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:T15f5,import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react"; import { createPortal } from "react-dom"; import { Check } from "lucide-react"; import { cn } from "@/lib/utils"; /** * A floating panel opened from a trigger: account menus, pickers, small action lists. * 12px corners, the `shadow-menu` elevation, 36px rows with 8px sides and 6px corners, and a * 120 ms grow from the trigger's corner. Closes on Escape and on a click outside. */ function panelPosition(side: "below" | "above", align: "start" | "end", r: DOMRect): CSSProperties { const vertical = side === "above" ? { bottom: window.innerHeight - r.top + 4 } : { top: r.bottom + 4 }; const horizontal = align === "end" ? { right: window.innerWidth - r.right } : { left: r.left }; return { ...vertical, ...horizontal }; } export function Menu({ trigger, children, side = "below", align = "start", className, rootClassName, label, }: { /** Render the button that opens it; call `toggle` on click. */ trigger: (props: { open: boolean; toggle: () => void; "aria-expanded": boolean; "aria-haspopup": "menu" }) => ReactNode; children: (props: { close: () => void }) => ReactNode; side?: "below" | "above"; align?: "start" | "end"; /** Panel width and extras, e.g. "w-72". */ className?: string; rootClassName?: string; label?: string; }) { const [open, setOpen] = useState(false); const [rect, setRect] = useState(null); const root = useRef(null); const panel = useRef(null); useEffect(() => { if (!open || !root.current) return; const update = () => setRect(root.current?.getBoundingClientRect() ?? null); update(); window.addEventListener("scroll", update, true); window.addEventListener("resize", update); const onDown = (e: PointerEvent) => { const t = e.target as Node; if (!root.current?.contains(t) && !panel.current?.contains(t)) setOpen(false); }; const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false); document.addEventListener("pointerdown", onDown); document.addEventListener("keydown", onKey); return () => { window.removeEventListener("scroll", update, true); window.removeEventListener("resize", update); document.removeEventListener("pointerdown", onDown); document.removeEventListener("keydown", onKey); }; }, [open]); return (

{trigger({ open, toggle: () => setOpen(!open), "aria-expanded": open, "aria-haspopup": "menu" })} {open && rect ? createPortal( , document.body, ) : null}

); } const ROW = "flex h-9 w-full cursor-pointer items-center gap-3 rounded-md border-0 bg-transparent px-2 text-left font-[inherit] text-label-14 text-foreground no-underline hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none"; /** One row: a button, or a link with `href`. The icon sits on the right, like a shortcut. */ export function MenuItem({ children, icon, href, external, onSelect, checked, className, }: { children: ReactNode; icon?: ReactNode; href?: string; external?: boolean; onSelect?: () => void; /** Shows a check on the right (for single-choice lists). */ checked?: boolean; className?: string; }) { const inner = ( <> {children} {checked !== undefined ? : null} {icon ? {icon} : null} ); if (href) return ( {inner} ); return ( ); } /** A full-width rule between groups of rows. */ export function MenuSeparator() { return

; } /** Non-interactive text at the top of a menu (who's signed in, a section name). */ export function MenuLabel({ children, className }: { children: ReactNode; className?: string }) { return

{children}

; } /** A keycap: 20px tall, 4px corners, 12px text. */ export function Kbd({ children }: { children: ReactNode }) { return ( {children} ); } 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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@dgit","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/dgit/ui/menu.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]