5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 61:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 62:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T383d,"use client"; import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, motion, useIsPresent } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const OPEN = { duration: 0.2, ease: EASE_OUT }; // Leaving is quicker than arriving: once dismissed, it should get out of the way. const CLOSE = { duration: 0.15, ease: EASE_OUT }; const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; // Counted, so a nested dialog closing doesn't unlock the page under its parent. let scrollLocks = 0; let savedBody = { overflow: "", paddingRight: "" }; function lockScroll() { if (scrollLocks++ > 0) return; const body = document.body; // Hiding overflow removes the scrollbar; padding by its width keeps the // page from sliding sideways under the backdrop. const gap = window.innerWidth - document.documentElement.clientWidth; const padding = parseFloat(getComputedStyle(body).paddingRight) || 0; savedBody = { overflow: body.style.overflow, paddingRight: body.style.paddingRight, }; body.style.overflow = "hidden"; if (gap > 0) body.style.paddingRight = `${padding + gap}px`; } function unlockScroll() { if (--scrollLocks > 0) return; document.body.style.overflow = savedBody.overflow; document.body.style.paddingRight = savedBody.paddingRight; } const subscribeNoop = () => () => {}; // The portal needs document.body, which only exists on the client. function useIsClient() { return useSyncExternalStore( subscribeNoop, () => true, () => false, ); } type Parent = { setChildOpen: (open: boolean) => void; openRef: React.RefObject; }; const ParentContext = createContext(null); export function Dialog({ open, onOpenChange, title, description, role = "dialog", className, children, }: { open: boolean; onOpenChange: (open: boolean) => void; title: React.ReactNode; description?: React.ReactNode; /** "alertdialog" for confirmations that interrupt with a question. */ role?: "dialog" | "alertdialog"; className?: string; children?: React.ReactNode; }) { const isClient = useIsClient(); const reduceMotion = useReducedMotion(); const id = useId(); const parent = useContext(ParentContext); const panelRef = useRef(null); const [childOpen, setChildOpenState] = useState(false); const childOpenRef = useRef(false); const openRef = useRef(open); const setChildOpen = useCallback((next: boolean) => { childOpenRef.current = next; setChildOpenState(next); }, []); const context = useMemo(() => ({ setChildOpen, openRef }), [setChildOpen]); // A layout effect, so it's current before the passive cleanups below read it. useLayoutEffect(() => { openRef.current = open; }, [open]); useEffect(() => { if (!open || !parent) return; parent.setChildOpen(true); return () => parent.setChildOpen(false); }, [open, parent]); useEffect(() => { if (!open) return; const previous = document.activeElement as HTMLElement | null; const panel = panelRef.current; const initial = panel?.querySelector("[data-autofocus]") ?? panel?.querySelector(FOCUSABLE) ?? panel; initial?.focus({ preventScroll: true }); lockScroll(); const onKeyDown = (e: KeyboardEvent) => { // A nested dialog on top owns the keyboard until it closes. if (childOpenRef.current || e.key !== "Escape") return; e.preventDefault(); onOpenChange(false); }; // Focus that escapes anyway (screen reader navigation, a click that lands // on the page behind) is pulled back in. const onFocusIn = (e: FocusEvent) => { if (childOpenRef.current || !panel) return; if (!panel.contains(e.target as Node)) panel.focus({ preventScroll: true }); }; document.addEventListener("keydown", onKeyDown); document.addEventListener("focusin", onFocusIn); return () => { document.removeEventListener("keydown", onKeyDown); document.removeEventListener("focusin", onFocusIn); unlockScroll(); // If the parent closed in the same moment, it hands focus back to its // own trigger instead; this one sits inside a panel that's leaving. if (parent && !parent.openRef.current) return; const restore = () => previous?.focus({ preventScroll: true }); // The parent is still inert until it re-renders, and inert elements // refuse focus, so wait a frame for it to come back. if (previous?.closest("[inert]")) requestAnimationFrame(restore); else restore(); }; }, [open, onOpenChange, parent]); if (!isClient) return null; return createPortal( {open && ( onOpenChange(false)} className={className} > {children} )} , document.body, ); } function Layer({ panelRef, id, role, title, description, receded, reduceMotion, onClose, className, children, }: { panelRef: React.RefObject; id: string; role: "dialog" | "alertdialog"; title: React.ReactNode; description?: React.ReactNode; receded: boolean; reduceMotion: boolean; onClose: () => void; className?: string; children: React.ReactNode; }) { // While it animates out, clicks and focus go straight through to the page, // so the exit never holds up the next interaction. const isPresent = useIsPresent(); // Only a press that starts on the backdrop closes, so dragging a text // selection out of the panel doesn't dismiss it. const pressedBackdrop = useRef(false); const onKeyDown = (e: React.KeyboardEvent) => { if (e.key !== "Tab") return; const items = [ ...e.currentTarget.querySelectorAll(FOCUSABLE), ].filter((el) => el.getClientRects().length > 0); if (!items.length) { e.preventDefault(); return; } const first = items[0]; const last = items[items.length - 1]; const active = document.activeElement; if (e.shiftKey && (active === first || active === e.currentTarget)) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); } }; return (

{/* Token-only dim: a grey wash in light, near black in dark. A nested dialog's backdrop stacks on this one, which is what dims the parent. */} { pressedBackdrop.current = e.target === e.currentTarget; }} onClick={(e) => { if (pressedBackdrop.current && e.target === e.currentTarget) onClose(); pressedBackdrop.current = false; }} />

{title}

{description && (

{description}

)} {children}

); } const button = "flex h-10 touch-manipulation items-center justify-center rounded-full px-4 text-sm font-medium outline-hidden transition-[scale,background-color] duration-150 ease-out select-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground active:scale-[0.96] motion-reduce:transition-[background-color]"; const secondary = cn(button, "bg-muted text-foreground hover:bg-border"); const primary = cn( button, "bg-foreground text-background hover:bg-foreground/85", ); export default function DialogDemo() { const inputId = useId(); const [open, setOpen] = useState(false); const [confirming, setConfirming] = useState(false); const [name, setName] = useState("northwind-web"); const [draft, setDraft] = useState(name); const [deleted, setDeleted] = useState(false); return ( // 12px padding + the 20px button radius = 32px, so the corners nest.

{name}

{deleted ? "Scheduled for deletion" : "Deployed 2 hours ago"}

); } 5e:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/dialog.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]