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:T3377,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const EASE = [0.23, 1, 0.32, 1] as const; const LEAVE = [0.23, 1, 0.32, 1] as const; const SURFACE = { type: "spring", stiffness: 420, damping: 36, mass: 0.9 } as const; const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; const FOCUSABLE = [ "a[href]", "area[href]", "button:not([disabled])", "input:not([disabled]):not([type='hidden'])", "select:not([disabled])", "textarea:not([disabled])", "iframe", "summary", "[contenteditable='true']", "[tabindex]:not([tabindex='-1'])", ].join(","); function focusableWithin(root: HTMLElement): HTMLElement[] { return Array.from(root.querySelectorAll(FOCUSABLE)).filter( (el) => el.tabIndex !== -1 && !el.hasAttribute("inert") && el.getAttribute("aria-hidden") !== "true" && el.getClientRects().length > 0, ); } let locks = 0; let releaseLock: (() => void) | null = null; function lockDocumentScroll() { locks += 1; if (locks > 1) return; const body = document.body; const gap = window.innerWidth - document.documentElement.clientWidth; const overflow = body.style.overflow; const paddingRight = body.style.paddingRight; const base = Number.parseFloat(window.getComputedStyle(body).paddingRight); body.style.overflow = "hidden"; if (gap > 0) { body.style.paddingRight = `${(Number.isFinite(base) ? base : 0) + gap}px`; } releaseLock = () => { body.style.overflow = overflow; body.style.paddingRight = paddingRight; }; } function unlockDocumentScroll() { locks = Math.max(0, locks - 1); if (locks > 0) return; releaseLock?.(); releaseLock = null; } const stack: object[] = []; export type UseModalOptions = { open: boolean; onClose: () => void; closeOnEscape?: boolean; closeOnBackdrop?: boolean; lockScroll?: boolean; initialFocusRef?: React.RefObject; container?: HTMLElement | null; }; export type ModalOverlayProps = { ref: React.RefObject; onPointerDown: (event: React.PointerEvent) => void; onClick: (event: React.MouseEvent) => void; }; export type ModalPanelProps = { ref: React.RefObject; role: "dialog"; "aria-modal": true; "aria-labelledby": string; tabIndex: -1; onKeyDown: (event: React.KeyboardEvent) => void; }; export type UseModalResult = { target: HTMLElement | null; titleId: string; descriptionId: string; overlayProps: ModalOverlayProps; panelProps: ModalPanelProps; close: () => void; }; export function useModal({ open, onClose, closeOnEscape = true, closeOnBackdrop = true, lockScroll = true, initialFocusRef, container, }: UseModalOptions): UseModalResult { const [target, setTarget] = useState(null); const overlayRef = useRef(null); const panelRef = useRef(null); const downedOutside = useRef(false); const baseId = useId(); const titleId = `${baseId}-title`; const descriptionId = `${baseId}-description`; const latest = useRef({ onClose, closeOnEscape, closeOnBackdrop, initialFocusRef }); latest.current = { onClose, closeOnEscape, closeOnBackdrop, initialFocusRef }; const close = useCallback(() => latest.current.onClose(), []); useEffect(() => { setTarget(container === undefined ? document.body : container); }, [container]); useIsomorphicLayoutEffect(() => { if (!open || !lockScroll) return; lockDocumentScroll(); return () => unlockDocumentScroll(); }, [open, lockScroll]); useEffect(() => { if (!open || !target) return; const overlay = overlayRef.current; const parent = overlay?.parentElement; if (!overlay || !parent) return; const changed: Array<[Element, string | null]> = []; for (const child of Array.from(parent.children)) { if (child === overlay) continue; changed.push([child, child.getAttribute("inert")]); child.setAttribute("inert", ""); } return () => { for (const [child, previous] of changed) { if (previous === null) child.removeAttribute("inert"); else child.setAttribute("inert", previous); } }; }, [open, target]); useEffect(() => { if (!open) return; const token = {}; stack.push(token); const onKeyDown = (event: KeyboardEvent) => { if (event.key !== "Escape") return; if (stack[stack.length - 1] !== token) return; if (!latest.current.closeOnEscape) return; event.preventDefault(); event.stopPropagation(); latest.current.onClose(); }; document.addEventListener("keydown", onKeyDown); return () => { document.removeEventListener("keydown", onKeyDown); const index = stack.indexOf(token); if (index > -1) stack.splice(index, 1); }; }, [open]); useEffect(() => { if (!open || !target) return; const onFocusIn = (event: FocusEvent) => { const panel = panelRef.current; const node = event.target as Node | null; if (!panel || !node || panel.contains(node)) return; panel.focus({ preventScroll: true }); }; document.addEventListener("focusin", onFocusIn); return () => document.removeEventListener("focusin", onFocusIn); }, [open, target]); useEffect(() => { if (!open || !target) return; const panel = panelRef.current; if (!panel) return; const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null; const preferred = latest.current.initialFocusRef?.current; (preferred ?? focusableWithin(panel)[0] ?? panel).focus({ preventScroll: true }); return () => { if (previous && previous.isConnected) previous.focus({ preventScroll: true }); }; }, [open, target]); const onKeyDown = useCallback((event: React.KeyboardEvent) => { if (event.key !== "Tab") return; const panel = panelRef.current; if (!panel) return; const items = focusableWithin(panel); if (items.length === 0) { event.preventDefault(); panel.focus({ preventScroll: true }); return; } const first = items[0]; const last = items[items.length - 1]; const active = document.activeElement; if (event.shiftKey && (active === first || active === panel)) { event.preventDefault(); last.focus({ preventScroll: true }); return; } if (!event.shiftKey && active === last) { event.preventDefault(); first.focus({ preventScroll: true }); } }, []); const onPointerDown = useCallback((event: React.PointerEvent) => { const panel = panelRef.current; downedOutside.current = !panel?.contains(event.target as Node); }, []); const onClick = useCallback((event: React.MouseEvent) => { const panel = panelRef.current; if (!latest.current.closeOnBackdrop) return; if (panel?.contains(event.target as Node)) return; if (!downedOutside.current) return; downedOutside.current = false; latest.current.onClose(); }, []); return { target, titleId, descriptionId, overlayProps: { ref: overlayRef, onPointerDown, onClick }, panelProps: { ref: panelRef, role: "dialog", "aria-modal": true, "aria-labelledby": titleId, tabIndex: -1, onKeyDown, }, close, }; } const CLOSE_ICON = ( ); export type ModalProps = { open: boolean; onClose: () => void; title: React.ReactNode; description?: React.ReactNode; children?: React.ReactNode; footer?: React.ReactNode; closeLabel?: string; showClose?: boolean; closeOnEscape?: boolean; closeOnBackdrop?: boolean; lockScroll?: boolean; initialFocusRef?: React.RefObject; container?: HTMLElement | null; maxWidth?: number; maxHeight?: string; className?: string; }; export function Modal({ open, onClose, title, description, children, footer, closeLabel = "Close dialog", showClose = true, closeOnEscape = true, closeOnBackdrop = true, lockScroll = true, initialFocusRef, container, maxWidth = 440, maxHeight = "min(78vh, 620px)", className = "", }: ModalProps) { const reduced = useReducedMotion(); const { target, titleId, descriptionId, overlayProps, panelProps } = useModal({ open, onClose, closeOnEscape, closeOnBackdrop, lockScroll, initialFocusRef, container, }); const variants = useMemo(() => { if (reduced) { return { backdrop: { closed: { opacity: 0 }, open: { opacity: 1, transition: { duration: 0 } }, gone: { opacity: 0, transition: { duration: 0 } }, }, panel: { closed: { opacity: 0 }, open: { opacity: 1, transition: { duration: 0 } }, gone: { opacity: 0, transition: { duration: 0 } }, }, }; } return { backdrop: { closed: { opacity: 0 }, open: { opacity: 1, transition: { duration: 0.2, ease: EASE } }, gone: { opacity: 0, transition: { duration: 0.15, ease: LEAVE } }, }, panel: { closed: { opacity: 0, scale: 0.96, y: 12 }, open: { opacity: 1, scale: 1, y: 0, transition: { ...SURFACE, opacity: { duration: 0.16, ease: EASE } }, }, gone: { opacity: 0, scale: 0.98, y: 6, transition: { duration: 0.15, ease: LEAVE }, }, }, }; }, [reduced]); if (!target) return null; return createPortal( {open ? (

{title}

{description ? (

{description}

) : null}

{showClose ? ( ) : null}

{children ? (

{children}

) : null} {footer ? (

{footer}

) : null} ) : null} , target, ); } 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":[["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/modal.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/modal.tsx"}],"className":"h-[70svh] min-h-80"}]]}]