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:T2a06,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { animate, motion, useDragControls, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; const DISCLOSE = { type: "spring", stiffness: 150, damping: 27, mass: 1, } as const; const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'; type Inertable = HTMLElement & { inert?: boolean }; type DragInfo = { offset: { x: number; y: number }; velocity: { x: number; y: number }; }; export type DrawerSide = "left" | "right"; export type UseDrawerOptions = { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; side?: DrawerSide; width?: number; dismissRatio?: number; modal?: boolean; }; export function useDrawer({ open: controlled, defaultOpen = false, onOpenChange, side = "right", width = 320, dismissRatio = 0.38, modal = true, }: UseDrawerOptions = {}) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const [dragging, setDragging] = useState(false); const open = controlled ?? uncontrolled; const sign = side === "right" ? 1 : -1; const away = sign * (width + 24); const x = useMotionValue(open ? 0 : away); const veil = useTransform(x, (v) => 1 - Math.min(1, Math.abs(v) / width)); const rootRef = useRef(null); const panelRef = useRef(null); const returnTo = useRef(null); const anim = useRef<{ stop: () => void } | null>(null); const live = useRef(open); live.current = open; const changed = useRef(onOpenChange); changed.current = onOpenChange; const reduced = useReducedMotion(); const controls = useDragControls(); const setOpen = useCallback( (next: boolean) => { if (controlled === undefined) setUncontrolled(next); changed.current?.(next); }, [controlled], ); const close = useCallback(() => setOpen(false), [setOpen]); const glide = useCallback( (to: number) => { anim.current?.stop(); anim.current = animate(x, to, reduced ? { duration: 0 } : DISCLOSE); }, [x, reduced], ); useEffect(() => { glide(open ? 0 : away); return () => anim.current?.stop(); }, [open, away, glide]); useEffect(() => { const panel = panelRef.current as Inertable | null; if (!panel) return; panel.inert = !open; return () => { panel.inert = false; }; }, [open]); useEffect(() => { if (open) { const active = document.activeElement; returnTo.current = active instanceof HTMLElement ? active : null; const panel = panelRef.current; if (!panel) return; const first = panel.querySelector(FOCUSABLE); (first ?? panel).focus({ preventScroll: true }); return; } const target = returnTo.current; returnTo.current = null; if (target && target.isConnected) target.focus({ preventScroll: true }); }, [open]); useEffect(() => { if (!modal || !open) return; const root = document.documentElement; const overflow = root.style.overflow; const padding = root.style.paddingRight; const gutter = window.innerWidth - root.clientWidth; root.style.overflow = "hidden"; if (gutter > 0) root.style.paddingRight = `${gutter}px`; return () => { root.style.overflow = overflow; root.style.paddingRight = padding; }; }, [modal, open]); useEffect(() => { const shell = rootRef.current; if (!modal || !open || !shell) return; const muted: Inertable[] = []; for (const node of Array.from(document.body.children)) { if (!(node instanceof HTMLElement) || node.contains(shell)) continue; const el = node as Inertable; if (el.inert) continue; el.inert = true; muted.push(el); } return () => { for (const el of muted) el.inert = false; }; }, [modal, open]); const onKeyDown = useCallback( (event: React.KeyboardEvent) => { const panel = panelRef.current; if (!panel) return; if (event.key === "Escape") { event.stopPropagation(); close(); return; } if (event.key !== "Tab") return; const nodes = Array.from(panel.querySelectorAll(FOCUSABLE)); if (nodes.length === 0) { event.preventDefault(); panel.focus({ preventScroll: true }); return; } const first = nodes[0]; const last = nodes[nodes.length - 1]; const active = document.activeElement; if (event.shiftKey && (active === first || active === panel)) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && active === last) { event.preventDefault(); first.focus(); } }, [close], ); const startDrag = useCallback( (event: React.PointerEvent) => { if (!live.current) return; controls.start(event); }, [controls], ); const onDragStart = useCallback(() => setDragging(true), []); const onDragEnd = useCallback( (_event: MouseEvent | TouchEvent | PointerEvent, info: DragInfo) => { setDragging(false); const travel = sign * info.offset.x; const speed = sign * info.velocity.x; if (travel > width * dismissRatio || speed > 520) { close(); return; } glide(0); }, [sign, width, dismissRatio, glide, close], ); const panelProps = { tabIndex: -1, role: "dialog" as const, "aria-modal": modal, onKeyDown, drag: "x" as const, dragControls: controls, dragListener: false, dragMomentum: false, dragConstraints: { left: 0, right: 0 }, dragElastic: side === "right" ? { top: 0, bottom: 0, left: 0, right: 1 } : { top: 0, bottom: 0, left: 1, right: 0 }, onDragStart, onDragEnd, }; return { open, side, width, dragging, x, veil, setOpen, close, rootRef, panelRef, panelProps, gripProps: { onPointerDown: startDrag }, }; } export type UseDrawerResult = ReturnType; const CLOSE_ICON = ( ); export type DrawerProps = { open: boolean; onOpenChange: (open: boolean) => void; title: string; children: React.ReactNode; description?: string; footer?: React.ReactNode; side?: DrawerSide; width?: number; container?: "viewport" | "parent"; closeLabel?: string; hint?: string; dismissOnScrimClick?: boolean; className?: string; }; export function Drawer({ open, onOpenChange, title, children, description, footer, side = "right", width = 320, container = "viewport", closeLabel = "Close panel", hint = "Press Escape to close this panel, or drag its handle toward the edge.", dismissOnScrimClick = true, className = "", }: DrawerProps) { const titleId = useId(); const hintId = useId(); const drawer = useDrawer({ open, onOpenChange, side, width, modal: container === "viewport", }); const edge = side === "right" ? "right-0 rounded-l-[14px] border-l" : "left-0 rounded-r-[14px] border-r"; const [host, setHost] = useState(null); useEffect(() => { setHost(container === "viewport" ? document.body : null); }, [container]); const tree = (

{title}

{description ? (

{description}

) : null}

{children}

{footer ? (

{footer}

) : null} {hint}

); if (container !== "viewport") return tree; return host ? createPortal(tree, host) : null; } 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/drawer.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/drawer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]