4a: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T211d,"use client"; // easeui.dev/components/motion/dropdown-menu import { motion, useReducedMotion } from "motion/react"; import { type ButtonHTMLAttributes, createContext, type KeyboardEvent, type ReactNode, type RefObject, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; const EASE = [0.23, 1, 0.32, 1] as const; // Matches Select: opens in 150ms, closes a little faster. const OPEN = { duration: 0.15, ease: EASE } as const; const CLOSE = { duration: 0.1, ease: EASE } as const; interface DropdownMenuContextValue { open: boolean; setOpen: (open: boolean) => void; triggerRef: RefObject; listRef: RefObject; triggerId: string; listId: string; } const DropdownMenuContext = createContext(null); function useDropdownMenu(part: string) { const ctx = useContext(DropdownMenuContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } function enabledItems(list: HTMLElement | null) { return Array.from( list?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? [], ); } export interface DropdownMenuProps { /** Controlled open state. */ open?: boolean; /** Initial open state when uncontrolled. Default false. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; className?: string; children: ReactNode; } export function DropdownMenu({ open: openProp, defaultOpen = false, onOpenChange, className, children, }: DropdownMenuProps) { const id = useId(); const rootRef = useRef(null); const triggerRef = useRef(null); const listRef = useRef(null); const [innerOpen, setInnerOpen] = useState(defaultOpen); const open = openProp ?? innerOpen; const setOpen = useCallback( (next: boolean) => { if (openProp === undefined) setInnerOpen(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); // A press anywhere outside the menu closes it. useEffect(() => { if (!open) return; const onPointerDown = (event: PointerEvent) => { if (!rootRef.current?.contains(event.target as Node)) setOpen(false); }; window.addEventListener("pointerdown", onPointerDown); return () => window.removeEventListener("pointerdown", onPointerDown); }, [open, setOpen]); const ctx = useMemo( () => ({ open, setOpen, triggerRef, listRef, triggerId: `${id}-trigger`, listId: `${id}-menu`, }), [open, setOpen, id], ); return (

{children}

); } export type DropdownMenuTriggerProps = Omit< ButtonHTMLAttributes, "type" | "id" | "onClick" | "onKeyDown" >; export function DropdownMenuTrigger({ className, children, ...props }: DropdownMenuTriggerProps) { const m = useDropdownMenu("DropdownMenuTrigger"); const onKeyDown = (event: KeyboardEvent) => { if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); m.setOpen(true); } }; return ( ); } export interface DropdownMenuContentProps { /** Which trigger edge the menu hangs from. Default "start". */ align?: "start" | "end"; className?: string; children: ReactNode; } export function DropdownMenuContent({ align = "start", className, children, }: DropdownMenuContentProps) { const m = useDropdownMenu("DropdownMenuContent"); const reduce = useReducedMotion(); const [placement, setPlacement] = useState<"top" | "bottom">("bottom"); const { open, triggerRef, listRef } = m; // Open upward when there is not enough room below the trigger. useLayoutEffect(() => { if (!open) return; const trigger = triggerRef.current; const list = listRef.current; if (!trigger || !list) return; const rect = trigger.getBoundingClientRect(); const below = window.innerHeight - rect.bottom; setPlacement(below < list.offsetHeight + 16 && rect.top > below ? "top" : "bottom"); }, [open, triggerRef, listRef]); useEffect(() => { if (!open) return; enabledItems(listRef.current)[0]?.focus({ preventScroll: true }); }, [open, listRef]); const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); m.setOpen(false); triggerRef.current?.focus(); return; } if (event.key === "Tab") { m.setOpen(false); return; } const items = enabledItems(listRef.current); if (items.length === 0) return; const index = items.indexOf(document.activeElement as HTMLButtonElement); const next = event.key === "ArrowDown" ? index + 1 : event.key === "ArrowUp" ? index - 1 : event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : null; if (next === null) return; event.preventDefault(); items[(next + items.length) % items.length].focus(); }; const isTop = placement === "top"; // Items stay mounted while closed so the exit transition can play. return ( ); } export interface DropdownMenuItemProps { onSelect?: () => void; disabled?: boolean; /** Styles the item for a destructive action, such as Delete. Default false. */ destructive?: boolean; className?: string; children: ReactNode; } export function DropdownMenuItem({ onSelect, disabled = false, destructive = false, className, children, }: DropdownMenuItemProps) { const m = useDropdownMenu("DropdownMenuItem"); return ( ); } export function DropdownMenuSeparator({ className }: { className?: string }) { return

; } 49:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4a",null,{"namespace":"@easeui","registryDependencies":[]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"components/motion/dropdown-menu.tsx","content":"$4c","type":"registry:component","target":"@components/motion/dropdown-menu.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]