{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "context-menu", "title": "Context-menu", "description": "A context-menu component.", "dependencies": [ "@hugeicons/react", "@hugeicons/core-free-icons" ], "registryDependencies": [ "@cubby-ui/switch", "@cubby-ui/elevated" ], "files": [ { "path": "registry/default/context-menu/context-menu.tsx", "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { ContextMenu as BaseContextMenu } from \"@base-ui/react/context-menu\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n solidSurface,\r\n type SurfaceLevel,\r\n} from \"@/registry/default/lib/elevated\";\r\n\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport { ArrowRight01Icon, Tick02Icon } from \"@hugeicons/core-free-icons\";\r\nimport {\r\n SwitchVisual,\r\n type SwitchVisualProps,\r\n} from \"@/registry/default/switch/switch\";\r\n\r\n// Shared shell for checkbox and radio items. Padding matches the plain menu\r\n// item so labels line up across every item type; the indicator lives in a\r\n// reserved right-hand column so toggling never shifts the label.\r\nconst toggleItemClasses =\r\n \"group/switch data-highlighted:bg-surface-hover data-highlighted:text-accent-foreground grid cursor-default items-center rounded-md px-2.5 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-60 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\";\r\n\r\n// The tick draws itself in on check. `pathLength` restates the path as 1 unit\r\n// long, so the dash values are fractions of the stroke and survive a HugeIcons\r\n// reshape. Deriving the icon array is the only way to reach the path.\r\nconst tickIcon = Tick02Icon.map(([tag, attrs]) => [\r\n tag,\r\n { ...attrs, pathLength: 1 },\r\n]) as typeof Tick02Icon;\r\n\r\nconst checkmarkClasses =\r\n \"[&_path]:ease-out-expo [&_path]:transition-[stroke-dashoffset] [&_path]:duration-150 [&_path]:[stroke-dasharray:1] in-data-checked:[&_path]:[stroke-dashoffset:0] in-data-unchecked:[&_path]:[stroke-dashoffset:1] motion-reduce:[&_path]:transition-none\";\r\n\r\nfunction ContextMenu({\r\n ...props\r\n}: React.ComponentProps) {\r\n return ;\r\n}\r\n\r\nfunction ContextMenuTrigger({\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuGroup({\r\n ...props\r\n}: React.ComponentProps) {\r\n return ;\r\n}\r\n\r\nfunction ContextMenuPortal({\r\n ...props\r\n}: React.ComponentProps) {\r\n return ;\r\n}\r\n\r\nfunction ContextMenuPositioner({\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuRadioGroup({\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuContent({\r\n className,\r\n sideOffset = 4,\r\n align = \"start\",\r\n level = 3,\r\n shadowLevel = 3,\r\n ...props\r\n}: React.ComponentProps & {\r\n align?: BaseContextMenu.Positioner.Props[\"align\"];\r\n sideOffset?: BaseContextMenu.Positioner.Props[\"sideOffset\"];\r\n /** Surface elevation level for the popup bg (1-8). Bump when nesting inside a Dialog or other elevated container. Defaults to 3. */\r\n level?: SurfaceLevel;\r\n /** Shadow weight (1-8). Pinned to 3 by default so the menu reads the same regardless of nesting depth. */\r\n shadowLevel?: SurfaceLevel;\r\n}) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuItem({\r\n className,\r\n inset,\r\n variant = \"default\",\r\n ...props\r\n}: React.ComponentProps & {\r\n inset?: boolean;\r\n variant?: \"default\" | \"destructive\";\r\n}) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuLinkItem({\r\n className,\r\n inset,\r\n ...props\r\n}: React.ComponentProps & {\r\n inset?: boolean;\r\n}) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuCheckboxItem({\r\n className,\r\n children,\r\n checked,\r\n inset,\r\n indicator = \"check\",\r\n switchColor = \"primary\",\r\n switchShape = \"circle\",\r\n switchSize = \"xs\",\r\n switchMotion = \"default\",\r\n ...props\r\n}: React.ComponentProps & {\r\n inset?: boolean;\r\n /** Which indicator sits in the right-hand column. `\"switch\"` is visual only — the item keeps the `menuitemcheckbox` role. */\r\n indicator?: \"check\" | \"switch\";\r\n /** Checked track colour, when `indicator=\"switch\"`. */\r\n switchColor?: SwitchVisualProps[\"color\"];\r\n /** Thumb silhouette, when `indicator=\"switch\"`. */\r\n switchShape?: SwitchVisualProps[\"shape\"];\r\n /** Thumb size, when `indicator=\"switch\"`. Defaults to `xs`, which matches the row's text. */\r\n switchSize?: SwitchVisualProps[\"size\"];\r\n /** How the thumb travels, when `indicator=\"switch\"`. */\r\n switchMotion?: SwitchVisualProps[\"motion\"];\r\n}) {\r\n return (\r\n \r\n \r\n {children}\r\n \r\n {indicator === \"switch\" ? (\r\n // Visual only: the row carries the role and the click target, so a real\r\n // Switch here would nest a focusable control inside a menuitemcheckbox.\r\n // Base UI's indicator supplies the aria-hidden.\r\n }\r\n />\r\n ) : (\r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuRadioItem({\r\n className,\r\n children,\r\n inset,\r\n ...props\r\n}: React.ComponentProps & {\r\n inset?: boolean;\r\n}) {\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuLabel({\r\n className,\r\n inset,\r\n ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n inset?: boolean;\r\n}) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuGroupLabel({\r\n className,\r\n inset,\r\n ...props\r\n}: React.ComponentProps & {\r\n inset?: boolean;\r\n}) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuSeparator({\r\n className,\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuShortcut({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"span\">) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuSub({\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuSubTrigger({\r\n className,\r\n inset,\r\n children,\r\n delay = 0,\r\n closeDelay = 0,\r\n ...props\r\n}: React.ComponentProps & {\r\n inset?: boolean;\r\n}) {\r\n return (\r\n \r\n {children}\r\n \r\n \r\n );\r\n}\r\n\r\nfunction ContextMenuSubContent({\r\n className,\r\n // 8px, not 0: the positioner anchors to the sub-trigger, which sits 4px\r\n // inside the parent popup because of its p-1. A 0 offset therefore overlaps\r\n // the parent's edge by 4px; 8 leaves a 4px gap, matching Menubar.\r\n sideOffset = 8,\r\n align = \"start\",\r\n level = 5,\r\n shadowLevel = 3,\r\n ...props\r\n}: React.ComponentProps & {\r\n align?: BaseContextMenu.Positioner.Props[\"align\"];\r\n sideOffset?: BaseContextMenu.Positioner.Props[\"sideOffset\"];\r\n /** Surface elevation level for the submenu bg (1-8). Defaults to 5 — one tier above the parent menu's default of 3. Bump higher when nesting inside a Dialog. */\r\n level?: SurfaceLevel;\r\n /** Shadow weight (1-8). Pinned to 3 by default so the submenu reads the same dropdown weight as its parent. */\r\n shadowLevel?: SurfaceLevel;\r\n}) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport {\r\n ContextMenu,\r\n ContextMenuContent,\r\n ContextMenuItem,\r\n ContextMenuLinkItem,\r\n ContextMenuShortcut,\r\n ContextMenuTrigger,\r\n ContextMenuSeparator,\r\n ContextMenuGroup,\r\n ContextMenuLabel,\r\n ContextMenuGroupLabel,\r\n ContextMenuCheckboxItem,\r\n ContextMenuRadioGroup,\r\n ContextMenuPortal,\r\n ContextMenuPositioner,\r\n ContextMenuRadioItem,\r\n ContextMenuSub,\r\n ContextMenuSubTrigger,\r\n ContextMenuSubContent,\r\n};\r\n", "type": "registry:ui", "target": "components/ui/cubby-ui/context-menu.tsx" } ], "type": "registry:ui" }