{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "context-menu",
"type": "registry:ui",
"title": "Context Menu",
"description": "Right-click menu with items, submenus, checkboxes, and keyboard shortcuts.",
"dependencies": [
"@radix-ui/react-context-menu",
"@saasflare/ui"
],
"files": [
{
"path": "components/ui/context-menu.tsx",
"type": "registry:ui",
"content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview ContextMenu primitive — right-click menu with items, sub-menus, checkboxes, and radio groups.\n * Built on Radix UI ContextMenu. Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/context-menu\n * @layer core\n *\n * @component\n * @example\n * import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from '@saasflare/ui';\n * \n * Right-click here\n * \n * Copy\n * Paste\n * \n * \n */\n\nimport * as React from \"react\"\nimport { CheckIcon, CaretRightIcon, CircleIcon } from \"@saasflare/ui\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Right-click menu root. Wraps Radix ContextMenu.Root and manages the open\n * state of a menu anchored at the pointer position. Compose with\n * {@link ContextMenuTrigger} and {@link ContextMenuContent}; supports items,\n * checkbox/radio items, labels, separators, and nested sub-menus.\n *\n * @component\n * @layer core\n *\n * @example\n * \n * Right-click here\n * \n * Copy\n * Paste\n * \n * \n */\nfunction ContextMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\n/**\n * Area that opens the menu on right-click (or long-press on touch).\n *\n * @component\n * @layer core\n */\nfunction ContextMenuTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Groups related menu items for semantics and accessibility.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Portals menu content into the document body. {@link ContextMenuContent}\n * already portals itself — reach for this only with custom content trees.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Manages the open state of a nested sub-menu. Compose with\n * {@link ContextMenuSubTrigger} and {@link ContextMenuSubContent}.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\n/**\n * Container for {@link ContextMenuRadioItem}s sharing a single selected value.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Item that opens a nested sub-menu; renders a trailing caret whose Phosphor\n * weight follows `iconWeight`. Set `inset` to align with items that have\n * indicators.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuSubTrigger({\n className,\n inset,\n iconWeight,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n} & Pick) {\n const sf = useSaasflareProps({ iconWeight })\n return (\n \n {children}\n \n \n )\n}\n\n/**\n * Panel for a nested sub-menu, positioned against its\n * {@link ContextMenuSubTrigger}.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Props for {@link ContextMenuContent}. Extends the Radix Content props with\n * `surface`/`radius`/`animated`/`iconWeight` overrides from\n * {@link SaasflareComponentProps}.\n */\ninterface ContextMenuContentProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Menu panel, portaled and anchored at the pointer position. Honors\n * `surface`/`radius`/`animated` overrides and emits the matching data axes\n * for the design system to style.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuContent({\n className,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: ContextMenuContentProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n return (\n \n \n \n )\n}\n\n/**\n * Selectable menu item. Use `variant=\"destructive\"` for dangerous actions\n * and `inset` to align with items that have indicators.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\n/**\n * Menu item with a togglable checked state, shown via a leading check\n * indicator whose Phosphor weight follows `iconWeight`.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuCheckboxItem({\n className,\n children,\n checked,\n iconWeight,\n ...props\n}: React.ComponentProps &\n Pick) {\n const sf = useSaasflareProps({ iconWeight })\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\n/**\n * Single-selection item within a {@link ContextMenuRadioGroup}; shows a\n * leading dot indicator when selected.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuRadioItem({\n className,\n children,\n iconWeight,\n ...props\n}: React.ComponentProps &\n Pick) {\n const sf = useSaasflareProps({ iconWeight })\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\n/**\n * Non-interactive heading for a group of menu items. Set `inset` to align\n * with items that have indicators.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\n/**\n * Thin divider between menu items or groups.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * Right-aligned keyboard shortcut hint inside a menu item. Purely visual —\n * it does not register the key binding.\n *\n * @component\n * @layer core\n */\nfunction ContextMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n type ContextMenuContentProps,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n",
"target": "components/ui/context-menu.tsx"
}
],
"$meta": {
"source": "https://ui.saasflare.io/r/context-menu.json"
}
}