51: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"] 52: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"] 53:T1e65,"use client"; import { forwardRef, useEffect, useRef, useState } from "react"; import type { ReactNode } from "react"; import { cn } from "../../utils"; import { useFancyId } from "../../internals/use-id"; import { useSoundCue } from "../../sound/use-sound"; import { Button } from "../button/index"; import { DialogSurface } from "../dialog/DialogSurface"; export interface AlertDialogProps { /** Whether the alert dialog is open. Controlled when given; the component keeps its own copy either way. */ open?: boolean; /** Fires whenever `open` changes — Confirm, Cancel, or Escape. */ onOpenChange?: (open: boolean) => void; /** The heading. Omitted entirely (not just visually) when not given, so `aria-labelledby` never points at nothing. */ title?: string; /** The warning copy under the title. Same omission rule as `title`. */ description?: string; /** Label of the destructive action. */ confirmLabel?: string; /** Label of the safe action. */ cancelLabel?: string; /** Called when the destructive action is activated, before the surface closes. */ onConfirm?: () => void; /** * Called when the safe action is activated, before the surface closes — * and also when Escape closes the surface, since Escape is treated as * the keyboard equivalent of Cancel here. See the README for why. */ onCancel?: () => void; /** Element to focus once the surface opens. Defaults to the Cancel button — see the README. */ initialFocus?: HTMLElement | null; /** Optional trigger; renders in place and opens the surface on activation. */ trigger?: ReactNode; /** Additional classes for the panel. */ className?: string; /** * Plays the matching open/select/close cue through the sound controller. * Off by default; only audible once the user has enabled sound. */ sound?: boolean; } export const AlertDialog = forwardRef(function AlertDialog( { open: openProp, onOpenChange, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", onConfirm, onCancel, initialFocus = null, trigger, className, sound = false, }, forwardedRef ) { // The React shape of the source's `open = $bindable(false)`, identical to // `Dialog`'s: an internal copy seeded from the prop and re-synced during // render whenever the CALLER changes it, free to move on its own in // between. That is what lets one implementation serve a caller driving // `open` from its own state, a caller who passes only `onOpenChange`, and // a caller who passes neither and lets the trigger run the whole thing. // // Re-synced in the render path, not an effect: an effect would paint one // frame of the stale value first. const [open, setOpenState] = useState(openProp ?? false); const [lastOpenProp, setLastOpenProp] = useState(openProp); if (lastOpenProp !== openProp) { setLastOpenProp(openProp); setOpenState(openProp ?? false); } // A no-op while `sound` is false, so the call sites below stay unguarded. const playCue = useSoundCue(sound); // Same guard, and the same reason, as Dialog's own `setOpen`: a dismiss // that changes nothing fires nothing, so a second Escape during the close // cannot fire `onOpenChange` — or, through `handleCancel` below, // `onCancel` — a second time. function setOpen(next: boolean) { if (open === next) return; setOpenState(next); onOpenChange?.(next); } // A plain ref, not state: nothing renders off it, and both consumers // (`exclude`, `fallbackFocus`) resolve it at event time. Also doubles as // `DialogSurface`'s `fallbackFocus` target below — see Dialog's identical // field for why. const triggerRef = useRef(null); function openFromTrigger() { if (open) return; playCue("open"); setOpen(true); } // Escape's only path to closing this surface. Routing it through the // exact same function the Cancel button calls is the point, not an // implementation shortcut — see the README's "why is Escape wired to // onCancel" note: a user who presses Escape on a destructive prompt // meant to back out, the same thing clicking Cancel means, so both fire // the same callback. function handleCancel() { // Restates `setOpen`'s own dedupe locally: this runs before `setOpen`, // so a second Escape/Cancel arriving while `open` is already false // (mid-exit) must not play a second `close`. if (open) playCue("close"); onCancel?.(); setOpen(false); } function handleConfirm() { // Commit-close is silent — `setOpen` below carries no cue of its own — // so `select` is the only sound a confirm ever plays. The internal // Cancel/Confirm Buttons are never handed `sound` either: one // activation must play one cue, not this one plus a Button `press`. playCue("select"); onConfirm?.(); setOpen(false); } const uid = useFancyId(); const titleId = title ? `${uid}-title` : undefined; const descriptionId = description ? `${uid}-description` : undefined; // Same disclosure wiring as Dialog's: the state goes on the real button // inside the semantics-free wrapper, `aria-controls` only while the panel // exists. const panelId = `${uid}-panel`; useEffect(() => { const el = triggerRef.current?.firstElementChild; if (!el) return; el.setAttribute("aria-haspopup", "dialog"); el.setAttribute("aria-expanded", String(open)); if (open) el.setAttribute("aria-controls", panelId); else el.removeAttribute("aria-controls"); return () => { el.removeAttribute("aria-haspopup"); el.removeAttribute("aria-expanded"); el.removeAttribute("aria-controls"); }; }, [open, panelId, trigger]); const panelContent = ( <>

{title ? (

{title}

) : null}

{description ? (

{description}

) : null}

{/* Cancel first in DOM order — on top of matching the mockup's own left-to-right layout, this is what makes it the focus trap's default focus target (the trap always focuses the first focusable descendant absent an explicit `initialFocus`), with no extra wiring needed to satisfy "cancel, not confirm, is focused first" for the common case of no override. */}

); return ( <> {trigger ? ( /* See Dialog's identical wrapper for why this has no ARIA role of its own: it only listens for the click bubbling up from whatever `trigger` renders, which is expected to be a real interactive element carrying its own keyboard activation. `display: contents` keeps it out of layout entirely. */ { triggerRef.current = node; }} className="contents" onClick={openFromTrigger} > {trigger} ) : null} ); }); AlertDialog.displayName = "AlertDialog"; 50:["$","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,["$","$L51",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/button.json","https://fancy-ui.rama.app/r/dialog.json","https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"react/src/components/alert-dialog/AlertDialog.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/alert-dialog/AlertDialog.tsx"},{"path":"react/src/components/alert-dialog/index.ts","content":"\"use client\";\n\nexport { AlertDialog } from \"./AlertDialog\";\nexport type { AlertDialogProps } from \"./AlertDialog\";\n","type":"registry:ui","target":"@ui/fancy/components/alert-dialog/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]