51: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"] 52: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"] 53:T2962,"use client"; import { cn } from "@/lib/utils"; import { ChevronRightIcon } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ContextMenu as ContextMenuPrimitive } from "radix-ui"; import type React from "react"; import { type ComponentProps, createContext, useContext, useState, } from "react"; import { DURATION, EASE_OUT, SPRING_DEFAULT } from "@/components/smoothui/lib/animation"; export interface ContextMenuProps { /** The trigger element that opens the context menu on right-click */ children: React.ReactNode; /** Optional CSS class for the content container */ className?: string; /** Menu items to render */ items: ContextMenuItemConfig[]; } export interface ContextMenuItemConfig { /** Nested submenu items */ children?: ContextMenuItemConfig[]; /** Whether the item is disabled */ disabled?: boolean; /** Renders a group label instead of an item */ groupLabel?: string; /** Optional icon to display before the label */ icon?: React.ReactNode; /** Unique key for the item */ key: string; /** Display label */ label: string; /** Callback when item is selected */ onSelect?: () => void; /** Renders a separator instead of an item */ separator?: boolean; /** Optional keyboard shortcut text to display */ shortcut?: string; /** Destructive variant styling */ variant?: "default" | "destructive"; } /** * Surface motion: the bordered Content element itself fades and scales, so the * border and fill appear together with the items. Exit runs through * AnimatePresence because Radix only waits for CSS animations before unmounting. */ const surfaceMotion = (shouldReduceMotion: boolean | null) => shouldReduceMotion ? { animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: 0 } }, initial: { opacity: 1 }, transition: { duration: 0 }, } : { animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, transition: { duration: DURATION.default, ease: EASE_OUT }, }, initial: { opacity: 0, scale: 0.95, y: -4 }, transition: SPRING_DEFAULT, }; const SubOpenContext = createContext(false); /* ------------------------------------------------------------------ */ /* Thin radix wrappers (shadcn-parity, no @repo/shadcn-ui) */ /* ------------------------------------------------------------------ */ const ContextMenuRoot = ({ ...props }: ComponentProps) => ( ); const ContextMenuTrigger = ({ ...props }: ComponentProps) => ( ); const ContextMenuGroup = ({ ...props }: ComponentProps) => ( ); const ContextMenuSub = ({ defaultOpen = false, onOpenChange, open: openProp, ...props }: ComponentProps) => { const [internalOpen, setInternalOpen] = useState(defaultOpen); const isOpen = openProp ?? internalOpen; return ( { setInternalOpen(value); onOpenChange?.(value); }} open={isOpen} {...props} /> ); }; const ContextMenuSubTrigger = ({ className, children, ...props }: ComponentProps) => ( {children} ); const ContextMenuSubContent = ({ className, children, ...props }: ComponentProps) => { const shouldReduceMotion = useReducedMotion(); const motionProps = surfaceMotion(shouldReduceMotion); const isOpen = useContext(SubOpenContext); return ( {isOpen ? ( {children} ) : null} ); }; const ContextMenuContent = ({ className, children, ...props }: ComponentProps) => { const shouldReduceMotion = useReducedMotion(); const motionProps = surfaceMotion(shouldReduceMotion); return ( {children} ); }; const ContextMenuItem = ({ className, variant = "default", ...props }: ComponentProps & { variant?: "default" | "destructive"; }) => ( ); const ContextMenuLabel = ({ className, ...props }: ComponentProps) => ( ); const ContextMenuSeparator = ({ className, ...props }: ComponentProps) => ( ); const ContextMenuShortcut = ({ className, ...props }: ComponentProps<"span">) => ( ); export default function ContextMenu({ children, items, className, }: ContextMenuProps) { const shouldReduceMotion = useReducedMotion(); const [isOpen, setIsOpen] = useState(false); const renderItem = (item: ContextMenuItemConfig, index: number) => { if (item.separator) { return ; } if (item.groupLabel) { return ( {item.groupLabel} ); } if (item.children && item.children.length > 0) { return ( {item.icon ? {item.icon} : null} {item.label} {item.children.map((child, childIndex) => renderItem(child, childIndex) )} ); } return ( {item.icon ? {item.icon} : null} {item.label} {item.shortcut ? ( {item.shortcut} ) : null} ); }; return ( {children} {isOpen ? ( {items.map((item, index) => renderItem(item, index))} ) : null} ); } 50:["$","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"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/lib.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"index.tsx","content":"$53","type":"registry:ui","target":"components/smoothui/context-menu/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]