50: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"] 51: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"] 52:T2bbc,"use client"; import * as DrawerPrimitive from "@radix-ui/react-dialog"; import { createContext, useCallback, useContext, useMemo, useRef, useState, type ComponentProps, type PointerEvent, type Ref, } from "react"; import { cn } from "@/registry/default/lib/utils"; function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } interface DrawerContextValue { open: boolean; setOpen: (open: boolean) => void; } const DrawerContext = createContext(null); interface DrawerDragHandlers { onPointerDown: (event: PointerEvent) => void; onPointerMove: (event: PointerEvent) => void; onPointerUp: (event: PointerEvent) => void; onPointerCancel: (event: PointerEvent) => void; } /** Drag handlers from DrawerContent, picked up by DrawerHeader. */ const DrawerDragContext = createContext(null); /** Elements inside the drag area that keep their own pointer behaviour. */ const INTERACTIVE = "a, button, input, select, textarea, label, [role=button], [contenteditable]"; /** * A panel that slides up from the bottom of the screen, for actions and * short forms on phones. It is a Radix dialog: focus moves into it and stays * trapped, Escape and a click on the overlay close it, and focus returns to * the trigger; screen readers announce it as a dialog named by * `DrawerTitle`. Pointer users can also drag it down by the handle or the * header to close it; that is an extra, never the only way out. With reduced * motion it appears without sliding and does not spring back. Controlled * with `open` / `onOpenChange` or uncontrolled with `defaultOpen`. * * @example * * * * * * * Share this page * Anyone with the link can view it. * * * * * * * * */ function Drawer({ open: openProp, defaultOpen = false, onOpenChange, ...props }: ComponentProps) { const [openState, setOpenState] = useState(defaultOpen); const open = openProp ?? openState; const setOpen = useCallback( (next: boolean) => { if (openProp === undefined) setOpenState(next); onOpenChange?.(next); }, [openProp, onOpenChange] ); const value = useMemo(() => ({ open, setOpen }), [open, setOpen]); return ( ); } function DrawerTrigger(props: ComponentProps) { return ; } function DrawerPortal(props: ComponentProps) { return ; } /** Closes the drawer. Use `asChild` to turn your own button into a close button. */ function DrawerClose(props: ComponentProps) { return ; } function DrawerOverlay({ className, ...props }: ComponentProps) { return ( ); } interface DrawerContentProps extends ComponentProps { /** * Classes for the overlay behind the drawer: opacity, blur, z-index. The * overlay is also `data-slot="drawer-overlay"` for styling from outside. */ overlayClassName?: string; /** Shows the grab handle at the top. It is decorative: hidden from screen readers. */ showHandle?: boolean; /** Share of the drawer's height (0 to 1) it has to be dragged down to close on release. */ closeThreshold?: number; } /** * The panel itself, rendered in a portal above an overlay, fixed to the * bottom of the screen and at most 85% of its height. It needs a * `DrawerTitle`; hide it with `sr-only` if the design has no visible * heading. While dragged it has `data-dragging="true"` and the offset in * the `--drawer-drag` CSS variable. For long content, put it in a * `div className="overflow-y-auto"` below the header. */ function DrawerContent({ className, children, overlayClassName, showHandle = true, closeThreshold = 0.25, ref, ...props }: DrawerContentProps) { const drawer = useContext(DrawerContext); const content = useRef(null); const mergedRef = useMemo(() => mergeRefs(ref, content), [ref]); const drag = useRef<{ pointerId: number; startY: number; height: number; offset: number } | null>( null ); const frame = useRef(0); const write = useCallback((offset: number) => { const element = content.current; if (element) element.style.setProperty("--drawer-drag", `${offset}px`); }, []); const end = useCallback( (event: PointerEvent, cancelled: boolean) => { const current = drag.current; if (!current || current.pointerId !== event.pointerId) return; drag.current = null; cancelAnimationFrame(frame.current); if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } content.current?.removeAttribute("data-dragging"); const threshold = Math.min(Math.max(closeThreshold, 0), 1) * current.height; if (!cancelled && current.offset > 0 && current.offset >= threshold && drawer) { // Leave the offset in place so the exit animation starts where the finger let go. write(current.offset); drawer.setOpen(false); } else { // Spring back: the transition runs now that data-dragging is gone. write(0); } }, [closeThreshold, drawer, write] ); const handlers = useMemo( () => ({ onPointerDown(event) { if (event.button !== 0 || !content.current) return; const target = event.target as Element; if (target !== event.currentTarget && target.closest(INTERACTIVE)) return; drag.current = { pointerId: event.pointerId, startY: event.clientY, height: content.current.getBoundingClientRect().height, offset: 0, }; event.currentTarget.setPointerCapture(event.pointerId); content.current.setAttribute("data-dragging", "true"); }, onPointerMove(event) { const current = drag.current; if (!current || current.pointerId !== event.pointerId) return; current.offset = Math.max(0, event.clientY - current.startY); cancelAnimationFrame(frame.current); frame.current = requestAnimationFrame(() => write(current.offset)); }, onPointerUp(event) { end(event, false); }, onPointerCancel(event) { end(event, true); }, }), [end, write] ); return ( {showHandle ? (

) : null} {children} ); } /** * The top of the drawer, with the title and description. Dragging it down * with a pointer moves the drawer, like the handle; buttons and links inside * keep working. */ function DrawerHeader({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }: ComponentProps<"div">) { const handlers = useContext(DrawerDragContext); return (

{ onPointerDown?.(event); if (!event.defaultPrevented) handlers?.onPointerDown(event); }} onPointerMove={(event) => { onPointerMove?.(event); handlers?.onPointerMove(event); }} onPointerUp={(event) => { onPointerUp?.(event); handlers?.onPointerUp(event); }} onPointerCancel={(event) => { onPointerCancel?.(event); handlers?.onPointerCancel(event); }} {...props} /> ); } function DrawerFooter({ className, ...props }: ComponentProps<"div">) { return (

); } /** Names the drawer for screen readers. */ function DrawerTitle({ className, ...props }: ComponentProps) { return ( ); } /** Read out after the title when the drawer opens. */ function DrawerDescription({ className, ...props }: ComponentProps) { return ( ); } export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, type DrawerContentProps, }; 4f:["$","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","@radix-ui/react-dialog",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-dialog","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":"@radix-ui/react-dialog"}]]}]}]]}],["$","$L50",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/drawer.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]