52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T165e,import * as React from "react"; import { cn } from "@/lib/utils"; import { announce } from "@/lib/announce"; export type DrawerActionTone = "danger" | "warning"; export interface DrawerActionProps { /** Icon shown above the label (mobile) or beside it (desktop). Phosphor or any node; sized to 20px. */ icon: React.ReactNode; /** Text label rendered below the icon. */ label: string; /** Click handler for plain actions (e.g. Cancel). */ onClick?: () => void; /** * Button type. Use `"submit"` together with `form` so a Save action can * submit a `

` rendered in the drawer's scrollable content (the footer * sits outside that form in the DOM). */ type?: "button" | "submit"; /** Associates a `type="submit"` action with a form by its `id`. */ form?: string; /** Disable the action (e.g. Save until the form is dirty/valid). */ disabled?: boolean; /** * Turns this into a tap-again-to-confirm action. The first activation arms it * (icon + label swap to this confirm variant, tinted by `tone`); the second * runs `onConfirm`. Pair with `armed` / `onArmedChange` to keep sibling * destructive actions mutually exclusive and to reset on drawer close. */ confirm?: { icon: React.ReactNode; label: string; /** @default "danger" */ tone?: DrawerActionTone; }; onConfirm?: () => void; /** Controlled armed state. When omitted the component manages its own. */ armed?: boolean; onArmedChange?: (armed: boolean) => void; /** Accessible label when the visible label needs supplementing. */ "aria-label"?: string; className?: string; /** Inline styles for the root element. */ style?: React.CSSProperties; } /** * A single action in a `BottomDrawer` footer: an icon stacked above the label * on mobile (bottom-nav item style) and inline beside it on desktop, mirroring * how the app nav shifts from the mobile bottom bar to the desktop header. * Footers lay these out in an even flex row (most-destructive leftmost), e.g. * `Delete | Reset | Cancel | Save`. * * Two modes: * - **Plain** -- `onClick` (Cancel), or `type="submit"` + `form` (Save). * - **Confirm** -- pass `confirm` + `onConfirm` for tap-again-to-confirm. * At rest the action is untinted; only the armed confirmation step tints * (`tone="danger"` red, `tone="warning"` amber). * * @example * ```tsx * } label={t('common.cancel')} onClick={onClose} /> * } label={t('common.save')} type="submit" form="edit-goal" disabled={!dirty} /> * } label={t('settings.removeGoal')} * confirm={{ icon: , label: t('common.confirm'), tone: 'danger' }} * onConfirm={handleRemove} armed={removeArmed} onArmedChange={setRemoveArmed} * /> * ``` */ export const DrawerAction = React.forwardRef(function DrawerAction({ icon, label, onClick, type = "button", form, disabled, confirm, onConfirm, armed: controlledArmed, onArmedChange, className, style, ...rest }, ref) { const [internalArmed, setInternalArmed] = React.useState(false); const isControlled = controlledArmed !== undefined; const armed = isControlled ? controlledArmed : internalArmed; const setArmed = React.useCallback( (next: boolean) => { if (!isControlled) setInternalArmed(next); onArmedChange?.(next); }, [isControlled, onArmedChange] ); const isConfirm = Boolean(confirm && onConfirm); const handleClick = () => { if (isConfirm) { if (armed) { onConfirm!(); setArmed(false); } else { setArmed(true); // Announce the confirm label assertively so screen-reader users hear // "press again to confirm" before the destructive second activation. announce(confirm!.label, "assertive"); } return; } onClick?.(); }; const showConfirm = isConfirm && armed; const tone = confirm?.tone ?? "danger"; return ( ); }); DrawerAction.displayName = "DrawerAction" 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/announce.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/drawer-action.tsx","content":"$54","type":"registry:ui","target":"components/ui/drawer-action.tsx"}],"className":"h-[70svh] min-h-80"}]]}]