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