@neynar/ui 0.3.1 → 0.5.0

package/dist/components/ui/context-menu.d.ts

@@ -1,621 +1,64 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+import { MenuItemVariant } from '../../lib/variants';
 import * as React from "react";
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+type ContextMenuProps = ContextMenuPrimitive.Root.Props;
+/** Root context menu component. Manages state and handles right-click trigger. */
+declare function ContextMenu({ ...props }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuPortalProps = ContextMenuPrimitive.Portal.Props;
+/** Portal container for context menu content. Renders content in document body. */
+declare function ContextMenuPortal({ ...props }: ContextMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuTriggerProps = ContextMenuPrimitive.Trigger.Props;
+/** Element that triggers the context menu on right-click. */
+declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuContentProps = ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">;
 /**
- * ContextMenu - A contextual menu that appears on right-click or long-press
- *
- * Context menus provide contextual actions for specific elements or areas.
- * Built on Radix UI primitives, they appear when users right-click (or long-press
- * on touch devices) and offer actions relevant to the clicked item or region.
- *
- * @example
- * ```tsx
- * // Basic context menu with items
- * <ContextMenu>
- *   <ContextMenuTrigger>
- *     <div className="border rounded p-4">
- *       Right-click here
- *     </div>
- *   </ContextMenuTrigger>
- *   <ContextMenuContent>
- *     <ContextMenuItem>Copy</ContextMenuItem>
- *     <ContextMenuItem>Paste</ContextMenuItem>
- *     <ContextMenuSeparator />
- *     <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
- *   </ContextMenuContent>
- * </ContextMenu>
- * ```
- *
- * @example
- * ```tsx
- * // With sub-menus and shortcuts
- * <ContextMenu>
- *   <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
- *   <ContextMenuContent>
- *     <ContextMenuItem>
- *       Edit <ContextMenuShortcut>⌘E</ContextMenuShortcut>
- *     </ContextMenuItem>
- *     <ContextMenuSub>
- *       <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
- *       <ContextMenuSubContent>
- *         <ContextMenuItem>Email</ContextMenuItem>
- *         <ContextMenuItem>Copy Link</ContextMenuItem>
- *       </ContextMenuSubContent>
- *     </ContextMenuSub>
- *   </ContextMenuContent>
- * </ContextMenu>
- * ```
- *
- * @example
- * ```tsx
- * // With checkboxes and radio groups
- * <ContextMenu>
- *   <ContextMenuTrigger>Settings Menu</ContextMenuTrigger>
- *   <ContextMenuContent>
- *     <ContextMenuLabel>Preferences</ContextMenuLabel>
- *     <ContextMenuSeparator />
- *     <ContextMenuCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
- *       Show Toolbar
- *     </ContextMenuCheckboxItem>
- *     <ContextMenuCheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>
- *       Show Sidebar
- *     </ContextMenuCheckboxItem>
- *     <ContextMenuSeparator />
- *     <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
- *       <ContextMenuRadioItem value="light">Light Theme</ContextMenuRadioItem>
- *       <ContextMenuRadioItem value="dark">Dark Theme</ContextMenuRadioItem>
- *       <ContextMenuRadioItem value="system">System Theme</ContextMenuRadioItem>
- *     </ContextMenuRadioGroup>
- *   </ContextMenuContent>
- * </ContextMenu>
- * ```
- *
- * @accessibility
- * - Triggered by right-click, long-press, or Shift+F10
- * - Full keyboard navigation with arrow keys
- * - Escape key closes the menu and sub-menus
- * - Enter/Space activates menu items
- * - Tab moves focus outside the menu
- * - Proper ARIA roles and focus management
- * - Screen reader announcements for menu state changes
- * - Supports typeahead navigation by first letter
- * - Focus returns to trigger element when closed
- *
- * @see {@link ContextMenuTrigger} Trigger element component
- * @see {@link ContextMenuContent} Menu content container
- * @see {@link ContextMenuItem} Individual menu items
- * @see {@link https://ui.shadcn.com/docs/components/context-menu} shadcn/ui docs
- * @see {@link https://www.radix-ui.com/primitives/docs/components/context-menu} Radix UI docs
- * @since 1.0.0
+ * Context menu content with automatic portal and positioning.
+ * Includes animations, shadows, and overflow handling.
  */
-declare function ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuTrigger - The element that triggers the context menu
- *
- * Wraps any element to make it respond to right-click or long-press events.
- * The trigger element should provide visual feedback about its interactive nature.
- * Uses the `asChild` pattern to merge props with child elements for composition.
- *
- * @example
- * ```tsx
- * <ContextMenuTrigger>
- *   <Button variant="outline">Right-click me</Button>
- * </ContextMenuTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // With asChild for direct prop merging
- * <ContextMenuTrigger asChild>
- *   <div className="p-4 border rounded cursor-pointer">
- *     Right-click target area
- *   </div>
- * </ContextMenuTrigger>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param disabled - Prevents context menu from opening when trigger is activated
- * @param children - The element that should respond to right-click events
- */
-declare function ContextMenuTrigger(props: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuGroup - Logical grouping for menu items
- *
- * Groups related menu items together for better organization and accessibility.
- * Provides semantic structure without visual changes but improves screen reader
- * navigation by grouping related actions.
- *
- * @example
- * ```tsx
- * <ContextMenuGroup>
- *   <ContextMenuItem>Copy</ContextMenuItem>
- *   <ContextMenuItem>Cut</ContextMenuItem>
- *   <ContextMenuItem>Paste</ContextMenuItem>
- * </ContextMenuGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple groups with separators
- * <ContextMenuContent>
- *   <ContextMenuGroup>
- *     <ContextMenuItem>Undo</ContextMenuItem>
- *     <ContextMenuItem>Redo</ContextMenuItem>
- *   </ContextMenuGroup>
- *   <ContextMenuSeparator />
- *   <ContextMenuGroup>
- *     <ContextMenuItem>Copy</ContextMenuItem>
- *     <ContextMenuItem>Paste</ContextMenuItem>
- *   </ContextMenuGroup>
- * </ContextMenuContent>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param children - The menu items to group together logically
- */
-declare function ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuPortal - Portal container for menu content
- *
- * Renders menu content in a portal to ensure proper layering and positioning.
- * Useful for controlling where menu content is rendered in the DOM tree,
- * especially important for sub-menus and complex layouts.
- *
- * @example
- * ```tsx
- * <ContextMenuPortal>
- *   <ContextMenuSubContent>
- *     <ContextMenuItem>Portal Item</ContextMenuItem>
- *   </ContextMenuSubContent>
- * </ContextMenuPortal>
- * ```
- *
- * @example
- * ```tsx
- * // Portal into specific container
- * <ContextMenuPortal container={document.getElementById('menu-container')}>
- *   <ContextMenuContent>
- *     <ContextMenuItem>Custom Portal Item</ContextMenuItem>
- *   </ContextMenuContent>
- * </ContextMenuPortal>
- * ```
- *
- * @param container - Custom container element to portal content into
- * @param children - The menu content to render in the portal
- */
-declare function ContextMenuPortal(props: React.ComponentProps<typeof ContextMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuSub - Container for sub-menu functionality
- *
- * Wraps a sub-menu trigger and its content to create nested menu structures.
- * Enables hierarchical organization of menu items with proper state management
- * for opening and closing sub-menus.
- *
- * @example
- * ```tsx
- * <ContextMenuSub>
- *   <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
- *   <ContextMenuSubContent>
- *     <ContextMenuItem>Email</ContextMenuItem>
- *     <ContextMenuItem>Copy Link</ContextMenuItem>
- *   </ContextMenuSubContent>
- * </ContextMenuSub>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled sub-menu
- * const [subOpen, setSubOpen] = useState(false)
- *
- * <ContextMenuSub open={subOpen} onOpenChange={setSubOpen}>
- *   <ContextMenuSubTrigger>More Actions</ContextMenuSubTrigger>
- *   <ContextMenuSubContent>
- *     <ContextMenuItem onClick={() => setSubOpen(false)}>
- *       Archive
- *     </ContextMenuItem>
- *   </ContextMenuSubContent>
- * </ContextMenuSub>
- * ```
- *
- * @param open - Controlled open state of the sub-menu
- * @param onOpenChange - Callback fired when sub-menu open state changes
- * @param children - Sub-menu trigger and content components
- */
-declare function ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuRadioGroup - Container for radio button items
- *
- * Groups radio items together to allow single selection from multiple options.
- * Manages the selected state and ensures only one item can be selected at a time.
- * Provides controlled state management for radio selections within menus.
- *
- * @example
- * ```tsx
- * const [theme, setTheme] = useState("light")
- *
- * <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
- *   <ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
- *   <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
- *   <ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
- * </ContextMenuRadioGroup>
- * ```
- *
- * @example
- * ```tsx
- * // With label and separator
- * <ContextMenuContent>
- *   <ContextMenuLabel>Theme Selection</ContextMenuLabel>
- *   <ContextMenuSeparator />
- *   <ContextMenuRadioGroup value={currentTheme} onValueChange={handleThemeChange}>
- *     <ContextMenuRadioItem value="light">Light Mode</ContextMenuRadioItem>
- *     <ContextMenuRadioItem value="dark">Dark Mode</ContextMenuRadioItem>
- *     <ContextMenuRadioItem value="auto">Auto</ContextMenuRadioItem>
- *   </ContextMenuRadioGroup>
- * </ContextMenuContent>
- * ```
- *
- * @param value - The currently selected value that matches a RadioItem's value
- * @param onValueChange - Callback fired when selection changes, receives new value
- * @param children - ContextMenuRadioItem components to group together
- */
-declare function ContextMenuRadioGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuSubTrigger - Trigger element for opening sub-menus
- *
- * Menu item that opens a sub-menu on hover or focus. Automatically includes
- * a chevron icon to indicate the presence of a sub-menu. Supports the same
- * interaction patterns as regular menu items with additional sub-menu behavior.
- *
- * @example
- * ```tsx
- * <ContextMenuSubTrigger>
- *   <Share className="mr-2 h-4 w-4" />
- *   Share Options
- * </ContextMenuSubTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // With inset alignment for icon consistency
- * <ContextMenuContent>
- *   <ContextMenuItem inset>Regular Item</ContextMenuItem>
- *   <ContextMenuSubTrigger inset>
- *     More Actions
- *   </ContextMenuSubTrigger>
- * </ContextMenuContent>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param disabled - Prevents interaction and sub-menu opening
- * @param textValue - Custom text for typeahead navigation
- * @param inset - Whether to indent the trigger for proper visual alignment
- * @param children - Content of the trigger (text, icons, etc.)
- */
-declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, ...props }: ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuGroupProps = ContextMenuPrimitive.Group.Props;
+/** Groups related menu items together. Use with ContextMenuLabel. */
+declare function ContextMenuGroup({ ...props }: ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuLabelProps = ContextMenuPrimitive.GroupLabel.Props & {
+    /** Adds extra left padding to align with items that have icons. */
     inset?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuSubContent - Container for sub-menu items
- *
- * Contains the items within a sub-menu. Automatically positioned relative
- * to its trigger with collision detection and smooth animations. Supports
- * all the same features as main menu content including keyboard navigation.
- *
- * @example
- * ```tsx
- * <ContextMenuSubContent>
- *   <ContextMenuItem>Option 1</ContextMenuItem>
- *   <ContextMenuItem>Option 2</ContextMenuItem>
- *   <ContextMenuSeparator />
- *   <ContextMenuItem>Option 3</ContextMenuItem>
- * </ContextMenuSubContent>
- * ```
- *
- * @example
- * ```tsx
- * // With portal and collision avoidance
- * <ContextMenuSubContent
- *   avoidCollisions={true}
- *   sideOffset={8}
- *   className="min-w-[200px]"
- * >
- *   <ContextMenuLabel>Sub Options</ContextMenuLabel>
- *   <ContextMenuItem>Action A</ContextMenuItem>
- *   <ContextMenuItem>Action B</ContextMenuItem>
- * </ContextMenuSubContent>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param loop - Enable keyboard navigation looping from last to first item
- * @param onCloseAutoFocus - Handle focus return when sub-menu closes
- * @param onEscapeKeyDown - Handle escape key presses
- * @param avoidCollisions - Prevent collisions with viewport boundaries
- * @param sideOffset - Distance in pixels from the trigger anchor
- * @param className - Additional CSS classes for styling
- * @param children - Sub-menu items, separators, and labels
- */
-declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuContent - The container for context menu items
- *
- * Contains all menu items, separators, labels, and sub-menus. Automatically
- * positioned relative to the trigger point with collision detection and smooth
- * animations. Renders in a portal by default for proper layering.
- *
- * @example
- * ```tsx
- * <ContextMenuContent className="w-56">
- *   <ContextMenuLabel>Actions</ContextMenuLabel>
- *   <ContextMenuSeparator />
- *   <ContextMenuItem>Copy</ContextMenuItem>
- *   <ContextMenuItem>Paste</ContextMenuItem>
- * </ContextMenuContent>
- * ```
- *
- * @example
- * ```tsx
- * // With event handlers and positioning
- * <ContextMenuContent
- *   onCloseAutoFocus={(e) => e.preventDefault()}
- *   onEscapeKeyDown={(e) => console.log('Escape pressed')}
- *   avoidCollisions={true}
- *   sideOffset={4}
- *   loop={true}
- * >
- *   <ContextMenuItem>Item 1</ContextMenuItem>
- *   <ContextMenuItem>Item 2</ContextMenuItem>
- * </ContextMenuContent>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param loop - Enable keyboard navigation looping from last to first item
- * @param onCloseAutoFocus - Handle focus return when menu closes
- * @param onEscapeKeyDown - Handle escape key presses
- * @param avoidCollisions - Prevent collisions with viewport boundaries
- * @param sideOffset - Distance in pixels from the cursor/trigger point
- * @param className - Additional CSS classes for styling
- * @param children - Menu items, labels, separators, and sub-menus to display
- */
-declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuItem - An actionable item within the context menu
- *
- * Individual menu items that users can interact with. Supports different
- * variants for visual hierarchy and includes automatic icon styling.
- * Items can be clicked, selected via keyboard, and support custom styling.
- *
- * @example
- * ```tsx
- * <ContextMenuItem onSelect={() => console.log('Edit selected')}>
- *   <Edit className="mr-2 h-4 w-4" />
- *   Edit
- *   <ContextMenuShortcut>⌘E</ContextMenuShortcut>
- * </ContextMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * <ContextMenuItem variant="destructive" onSelect={handleDelete}>
- *   <Trash2 className="mr-2 h-4 w-4" />
- *   Delete
- * </ContextMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // With custom text value for typeahead
- * <ContextMenuItem
- *   textValue="Copy to clipboard"
- *   onSelect={handleCopy}
- * >
- *   <Copy className="mr-2 h-4 w-4" />
- *   Copy <span className="text-muted-foreground">to clipboard</span>
- * </ContextMenuItem>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param disabled - Prevents interaction and dims the item visually
- * @param onSelect - Callback fired when item is selected (via mouse or keyboard)
- * @param textValue - Custom text for typeahead navigation when content is complex
- * @param inset - Whether to indent the item for alignment with icon-based items
- * @param variant - Visual variant ("default" for normal actions, "destructive" for dangerous actions)
- * @param className - Additional CSS classes for custom styling
- * @param children - Content of the menu item (text, icons, shortcuts, etc.)
- */
-declare function ContextMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+};
+/** Label for a group of context menu items. */
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuItemProps = ContextMenuPrimitive.Item.Props & {
+    /** Adds extra left padding to align with items that have icons. */
     inset?: boolean;
-    variant?: "default" | "destructive";
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuCheckboxItem - A menu item with checkbox functionality
- *
- * Menu items that can be toggled on/off, useful for binary settings or options.
- * Displays a check mark when selected and supports controlled state management
- * with indeterminate state for partially selected collections.
- *
- * @example
- * ```tsx
- * const [showGrid, setShowGrid] = useState(true)
- *
- * <ContextMenuCheckboxItem
- *   checked={showGrid}
- *   onCheckedChange={setShowGrid}
- * >
- *   Show Grid
- * </ContextMenuCheckboxItem>
- * ```
- *
- * @example
- * ```tsx
- * // With indeterminate state
- * const [selectedItems, setSelectedItems] = useState(['item1'])
- * const allItems = ['item1', 'item2', 'item3']
- * const checkedState = selectedItems.length === 0
- *   ? false
- *   : selectedItems.length === allItems.length
- *     ? true
- *     : "indeterminate"
- *
- * <ContextMenuCheckboxItem
- *   checked={checkedState}
- *   onCheckedChange={(checked) =>
- *     setSelectedItems(checked ? allItems : [])
- *   }
- * >
- *   Select All
- * </ContextMenuCheckboxItem>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param checked - The checked state (true, false, or "indeterminate")
- * @param onCheckedChange - Callback fired when the checked state changes
- * @param disabled - Whether the item is disabled and non-interactive
- * @param onSelect - Callback fired when the item is selected (before onCheckedChange)
- * @param textValue - Custom text for typeahead navigation
- * @param className - Additional CSS classes for styling
- * @param children - Content of the checkbox item (typically text)
- */
-declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuRadioItem - A radio button item within a radio group
- *
- * Menu items that allow single selection from a group of options.
- * Must be used within a ContextMenuRadioGroup for proper functionality.
- * Displays a filled circle indicator when selected.
- *
- * @example
- * ```tsx
- * <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
- *   <ContextMenuRadioItem value="light">Light Theme</ContextMenuRadioItem>
- *   <ContextMenuRadioItem value="dark">Dark Theme</ContextMenuRadioItem>
- *   <ContextMenuRadioItem value="system">System Theme</ContextMenuRadioItem>
- * </ContextMenuRadioGroup>
- * ```
- *
- * @example
- * ```tsx
- * // With disabled state and custom text
- * <ContextMenuRadioGroup value={quality} onValueChange={setQuality}>
- *   <ContextMenuRadioItem value="low">Low Quality</ContextMenuRadioItem>
- *   <ContextMenuRadioItem value="medium">Medium Quality</ContextMenuRadioItem>
- *   <ContextMenuRadioItem value="high">High Quality</ContextMenuRadioItem>
- *   <ContextMenuRadioItem value="ultra" disabled>
- *     Ultra Quality (Premium)
- *   </ContextMenuRadioItem>
- * </ContextMenuRadioGroup>
- * ```
- *
- * @param value - The unique value for this radio item (required)
- * @param disabled - Whether the item is disabled and non-interactive
- * @param onSelect - Callback fired when the item is selected (before parent's onValueChange)
- * @param textValue - Custom text for typeahead navigation
- * @param className - Additional CSS classes for styling
- * @param children - Content of the radio item (typically text)
- */
-declare function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuLabel - A non-interactive label for menu sections
- *
- * Used to group related menu items and provide context. Labels are not
- * focusable and serve as visual section headers within the menu.
- * Helps organize menu content and improve accessibility.
- *
- * @example
- * ```tsx
- * <ContextMenuLabel>File Actions</ContextMenuLabel>
- * <ContextMenuSeparator />
- * <ContextMenuItem>Open</ContextMenuItem>
- * <ContextMenuItem>Save</ContextMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // With inset alignment for consistency
- * <ContextMenuContent>
- *   <ContextMenuLabel inset>Edit Options</ContextMenuLabel>
- *   <ContextMenuItem inset>Copy</ContextMenuItem>
- *   <ContextMenuItem inset>Paste</ContextMenuItem>
- * </ContextMenuContent>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param inset - Whether to indent the label to align with inset items
- * @param className - Additional CSS classes for styling
- * @param children - The text content of the label
- */
-declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+    /** Visual style variant. @default "default" */
+    variant?: MenuItemVariant;
+};
+/** Interactive menu item. Closes menu on click by default. */
+declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenuItemProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuSubProps = ContextMenuPrimitive.SubmenuRoot.Props;
+/** Root component for a nested submenu. */
+declare function ContextMenuSub({ ...props }: ContextMenuSubProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuSubTriggerProps = ContextMenuPrimitive.SubmenuTrigger.Props & {
+    /** Adds extra left padding to align with items that have icons. */
     inset?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuSeparator - A visual divider between menu items
- *
- * Creates visual separation between groups of related menu items.
- * Typically used after labels or to separate different types of actions.
- * Improves visual hierarchy and content organization in menus.
- *
- * @example
- * ```tsx
- * <ContextMenuItem>Copy</ContextMenuItem>
- * <ContextMenuItem>Paste</ContextMenuItem>
- * <ContextMenuSeparator />
- * <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Organizing menu sections
- * <ContextMenuContent>
- *   <ContextMenuLabel>Edit</ContextMenuLabel>
- *   <ContextMenuItem>Copy</ContextMenuItem>
- *   <ContextMenuItem>Paste</ContextMenuItem>
- *   <ContextMenuSeparator />
- *   <ContextMenuLabel>View</ContextMenuLabel>
- *   <ContextMenuItem>Zoom In</ContextMenuItem>
- *   <ContextMenuItem>Zoom Out</ContextMenuItem>
- * </ContextMenuContent>
- * ```
- *
- * @param asChild - Merges props with child element instead of rendering wrapper
- * @param className - Additional CSS classes for styling
- */
-declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
-/**
- * ContextMenuShortcut - Displays keyboard shortcuts within menu items
- *
- * Shows keyboard shortcuts aligned to the right side of menu items.
- * Provides visual indication of available keyboard shortcuts for actions.
- * Improves discoverability of keyboard navigation options.
- *
- * @example
- * ```tsx
- * <ContextMenuItem>
- *   Copy
- *   <ContextMenuShortcut>⌘C</ContextMenuShortcut>
- * </ContextMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Multiple shortcuts for different platforms
- * <ContextMenuItem>
- *   Save
- *   <ContextMenuShortcut>
- *     {isMac ? '⌘S' : 'Ctrl+S'}
- *   </ContextMenuShortcut>
- * </ContextMenuItem>
- * ```
- *
- * @example
- * ```tsx
- * // Complex shortcuts
- * <ContextMenuItem>
- *   Find and Replace
- *   <ContextMenuShortcut>⌘⌥F</ContextMenuShortcut>
- * </ContextMenuItem>
- * ```
- *
- * @param className - Additional CSS classes for styling
- * @param children - The keyboard shortcut text to display (e.g., "⌘C", "Ctrl+V")
- */
-declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
-export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
+};
+/** Menu item that opens a submenu. Automatically includes chevron icon. */
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuSubContentProps = React.ComponentProps<typeof ContextMenuContent>;
+/** Content container for a submenu. Opens to the right by default. */
+declare function ContextMenuSubContent({ ...props }: ContextMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuCheckboxItemProps = ContextMenuPrimitive.CheckboxItem.Props;
+/** Menu item with checkbox. Shows check icon when selected. */
+declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: ContextMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuRadioGroupProps = ContextMenuPrimitive.RadioGroup.Props;
+/** Container for mutually exclusive radio items. */
+declare function ContextMenuRadioGroup({ ...props }: ContextMenuRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuRadioItemProps = ContextMenuPrimitive.RadioItem.Props;
+/** Radio button menu item. Shows check icon when selected. */
+declare function ContextMenuRadioItem({ className, children, ...props }: ContextMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuSeparatorProps = ContextMenuPrimitive.Separator.Props;
+/** Visual separator between menu items or groups. */
+declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+type ContextMenuShortcutProps = React.ComponentProps<"span">;
+/** Displays keyboard shortcut hint aligned to the right of menu item. */
+declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, type ContextMenuProps, type ContextMenuTriggerProps, type ContextMenuContentProps, type ContextMenuItemProps, type ContextMenuCheckboxItemProps, type ContextMenuRadioItemProps, type ContextMenuLabelProps, type ContextMenuSeparatorProps, type ContextMenuShortcutProps, type ContextMenuGroupProps, type ContextMenuPortalProps, type ContextMenuSubProps, type ContextMenuSubContentProps, type ContextMenuSubTriggerProps, type ContextMenuRadioGroupProps, };
 //# sourceMappingURL=context-menu.d.ts.map