@flikk/ui 1.0.0-beta.1

package/dist/components/core/CommandPalette/CommandPalette.js

@@ -0,0 +1,221 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { commandPaletteTheme } from './CommandPalette.theme.js';
+import { containerAnimations, overlayAnimations } from './CommandPalette.animations.js';
+import { cn } from '../../../utils/cn.js';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { CommandItem } from './CommandItem.js';
+import { Overlay } from '../../effects/Overlay/Overlay.js';
+
+/**
+ * Default filter function for commands
+ */
+const defaultFilterFunction = (command, searchValue) => {
+    var _a, _b;
+    const search = searchValue.toLowerCase();
+    const labelMatch = command.label.toLowerCase().includes(search);
+    const descriptionMatch = (_a = command.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search);
+    const keywordsMatch = (_b = command.keywords) === null || _b === void 0 ? void 0 : _b.some((keyword) => keyword.toLowerCase().includes(search));
+    return labelMatch || descriptionMatch || keywordsMatch || false;
+};
+/**
+ * Check if commands array is grouped
+ */
+const isGroupedCommands = (commands) => {
+    return commands.length > 0 && "commands" in commands[0];
+};
+/**
+ * Flatten grouped commands into a single array
+ */
+const flattenCommands = (commands) => {
+    if (isGroupedCommands(commands)) {
+        return commands.flatMap((group) => group.commands);
+    }
+    return commands;
+};
+/**
+ * Group commands by their group property
+ */
+const groupCommandsByCategory = (commands) => {
+    const grouped = {};
+    commands.forEach((command) => {
+        const groupKey = command.group || "Other";
+        if (!grouped[groupKey]) {
+            grouped[groupKey] = [];
+        }
+        grouped[groupKey].push(command);
+    });
+    return Object.entries(grouped).map(([label, groupCommands]) => ({
+        id: label.toLowerCase().replace(/\s+/g, "-"),
+        label,
+        commands: groupCommands,
+    }));
+};
+/**
+ * CommandPalette Component
+ *
+ * A ⌘K style command palette for quick navigation and actions.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * const commands = [
+ *   {
+ *     id: 'new-file',
+ *     label: 'New File',
+ *     contentStart: <DocumentPlusIcon />,
+ *     shortcut: ['⌘', 'N'],
+ *     onSelect: () => console.log('New file'),
+ *   },
+ * ];
+ *
+ * <CommandPalette
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   commands={commands}
+ * />
+ * ```
+ */
+const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, }, ref) => {
+    // Merge theme with overrides
+    const theme = useMemo(() => ({ ...commandPaletteTheme, ...(themeOverrides || {}) }), [themeOverrides]);
+    // State
+    const [searchValue, setSearchValue] = useState("");
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    // Refs
+    const searchInputRef = useRef(null);
+    const listContainerRef = useRef(null);
+    // Flatten all commands for filtering
+    const allCommands = useMemo(() => flattenCommands(commands), [commands]);
+    // Filter commands based on search
+    const filteredCommands = useMemo(() => {
+        if (!searchValue.trim()) {
+            return allCommands;
+        }
+        return allCommands.filter((command) => filterFunction(command, searchValue));
+    }, [allCommands, searchValue, filterFunction]);
+    // Group filtered commands if needed
+    const displayCommands = useMemo(() => {
+        if (grouped || isGroupedCommands(commands)) {
+            return groupCommandsByCategory(filteredCommands);
+        }
+        return filteredCommands;
+    }, [grouped, commands, filteredCommands]);
+    // Get flat list of filtered commands for keyboard navigation
+    const flatFilteredCommands = useMemo(() => {
+        if (isGroupedCommands(displayCommands)) {
+            return displayCommands.flatMap((group) => group.commands);
+        }
+        return displayCommands;
+    }, [displayCommands]);
+    // Reset highlighted index when search changes
+    useEffect(() => {
+        setHighlightedIndex(0);
+    }, [searchValue]);
+    // Focus search input when opened
+    // Focus search input when opened
+    useEffect(() => {
+        if (isOpen && searchInputRef.current) {
+            // Delay focus slightly to allow animation to start smoothly
+            // This prevents layout thrashing during the initial composite frame
+            const timer = setTimeout(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 50);
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
+    // Reset search when closed
+    useEffect(() => {
+        if (!isOpen) {
+            setSearchValue("");
+            setHighlightedIndex(0);
+        }
+    }, [isOpen]);
+    // Handle search change
+    const handleSearchChange = useCallback((e) => {
+        const value = e.target.value;
+        setSearchValue(value);
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(value);
+    }, [onSearchChange]);
+    // Handle command selection
+    const handleSelectCommand = useCallback((command) => {
+        if (command.disabled)
+            return;
+        command.onSelect();
+        onClose();
+    }, [onClose]);
+    // Keep refs in sync for keydown handler to avoid re-attaching listener
+    const flatFilteredCommandsRef = useRef(flatFilteredCommands);
+    flatFilteredCommandsRef.current = flatFilteredCommands;
+    const highlightedIndexRef = useRef(highlightedIndex);
+    highlightedIndexRef.current = highlightedIndex;
+    // Handle keyboard navigation (Arrow keys and Enter)
+    // Note: Escape key is handled by Overlay component
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            const cmds = flatFilteredCommandsRef.current;
+            // Arrow keys navigation
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                setHighlightedIndex((prev) => prev >= cmds.length - 1 ? 0 : prev + 1);
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                setHighlightedIndex((prev) => prev <= 0 ? cmds.length - 1 : prev - 1);
+            }
+            else if (event.key === "Enter") {
+                event.preventDefault();
+                const highlightedCommand = cmds[highlightedIndexRef.current];
+                if (highlightedCommand) {
+                    handleSelectCommand(highlightedCommand);
+                }
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isOpen, handleSelectCommand]);
+    // Scroll highlighted command into view
+    useEffect(() => {
+        if (listContainerRef.current) {
+            const highlightedElement = listContainerRef.current.querySelector(`[data-command-index="${highlightedIndex}"]`);
+            if (highlightedElement) {
+                highlightedElement.scrollIntoView({
+                    block: "nearest",
+                    behavior: "smooth",
+                });
+            }
+        }
+    }, [highlightedIndex]);
+    // Render commands list
+    const renderCommandsList = () => {
+        if (flatFilteredCommands.length === 0) {
+            return jsx("div", { className: theme.emptyState, children: emptyMessage });
+        }
+        // If grouped, render with group labels
+        if (isGroupedCommands(displayCommands)) {
+            let commandIndex = 0;
+            return displayCommands.map((group) => (jsxs("div", { className: "py-2", children: [jsx("div", { className: theme.groupLabel, children: group.label }), group.commands.map((command) => {
+                        const element = (jsx(CommandItem, { command: command, index: commandIndex, isHighlighted: commandIndex === highlightedIndex, onSelect: handleSelectCommand, onMouseEnter: setHighlightedIndex, theme: theme }, command.id));
+                        commandIndex++;
+                        return element;
+                    })] }, group.id)));
+        }
+        // Otherwise render flat list
+        return displayCommands.map((command, index) => (jsx(CommandItem, { command: command, index: index, isHighlighted: index === highlightedIndex, onSelect: handleSelectCommand, onMouseEnter: setHighlightedIndex, theme: theme }, command.id)));
+    };
+    return (jsxs(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: overlayClassName, contentClassName: cn(theme.container, className), animations: {
+            overlay: overlayAnimations,
+            content: containerAnimations,
+        }, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false })] }) }), jsx("div", { ref: listContainerRef, className: "overflow-y-auto overscroll-contain px-1", style: {
+                    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+                }, children: renderCommandsList() })] }));
+});
+CommandPalette.displayName = "CommandPalette";
+
+export { CommandPalette };

package/dist/components/core/CommandPalette/CommandPalette.theme.d.ts

@@ -0,0 +1,2 @@
+import type { CommandPaletteThemeOverrides } from "./CommandPalette.types";
+export declare const commandPaletteTheme: Required<CommandPaletteThemeOverrides>;

package/dist/components/core/CommandPalette/CommandPalette.theme.js

@@ -0,0 +1,30 @@
+const commandPaletteTheme = {
+    overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 " +
+        "flex items-start justify-center pt-[10vh] px-4",
+    container: "relative w-full max-h-[calc(100vh-2rem)] w-full max-w-lg " +
+        "bg-[var(--color-background)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 " +
+        "border border-[var(--color-border)] ring-4 ring-[var(--color-background)]/20 " +
+        "flex flex-col my-4 min-h-0 overflow-hidden " +
+        // Dark mode
+        "dark:ring-black/30",
+    searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
+    searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
+        "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
+        "focus:outline-none focus:ring-0 " +
+        // Dark mode
+        "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
+    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
+        "dark:text-[var(--color-neutral-500)]",
+    commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
+        "hover:bg-[var(--color-primary)] " +
+        "data-[highlighted=true]:bg-[var(--color-primary)] data-[highlighted=true]:hover:bg-[var(--color-primary)] " +
+        "data-[highlighted=true]:text-white " +
+        "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
+        // Dark mode - adjust hover state
+        "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
+        "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
+    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
+        "dark:text-[var(--color-neutral-500)]",
+};
+
+export { commandPaletteTheme };

package/dist/components/core/CommandPalette/CommandPalette.types.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+/**
+ * Command item type
+ */
+export interface CommandItem {
+    /** Unique identifier for the command */
+    id: string;
+    /** Display label for the command */
+    label: string;
+    /** Description or subtitle for the command */
+    description?: string;
+    /** Content to display at the start (icon, avatar, etc.) */
+    contentStart?: React.ReactNode;
+    /** Content to display at the end (keyboard shortcuts, badges, etc.) */
+    contentEnd?: React.ReactNode;
+    /** Keyboard shortcut to display (convenience prop - renders as Kbd component in contentEnd) */
+    shortcut?: string | string[];
+    /** Category/group for the command */
+    group?: string;
+    /** Action to execute when command is selected */
+    onSelect: () => void;
+    /** Keywords for search matching */
+    keywords?: string[];
+    /** Whether the command is disabled */
+    disabled?: boolean;
+}
+/**
+ * Command group type
+ */
+export interface CommandGroup {
+    /** Unique identifier for the group */
+    id: string;
+    /** Display label for the group */
+    label: string;
+    /** Commands in this group */
+    commands: CommandItem[];
+}
+/**
+ * CommandPalette component props
+ */
+export interface CommandPaletteProps {
+    /** Whether the command palette is open */
+    isOpen: boolean;
+    /** Called when the palette should close */
+    onClose: () => void;
+    /** Array of commands or command groups */
+    commands: CommandItem[] | CommandGroup[];
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Custom empty state message */
+    emptyMessage?: string;
+    /** Maximum height of the command list */
+    maxHeight?: string | number;
+    /** Additional class name for the container */
+    className?: string;
+    /** Additional class name for the overlay */
+    overlayClassName?: string;
+    /** Component-level theme overrides */
+    theme?: CommandPaletteThemeOverrides;
+    /** Whether to group commands by category */
+    grouped?: boolean;
+    /** Called when search value changes */
+    onSearchChange?: (value: string) => void;
+    /** Custom filter function */
+    filterFunction?: (command: CommandItem, searchValue: string) => boolean;
+    /** Whether clicking the overlay should close the palette (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape should close the palette (default: true) */
+    closeOnEsc?: boolean;
+}
+/**
+ * Theme overrides for the CommandPalette component
+ */
+export interface CommandPaletteThemeOverrides {
+    /** Style for the overlay backdrop */
+    overlay?: string;
+    /** Style for the modal container */
+    container?: string;
+    /** Style for the search input wrapper */
+    searchWrapper?: string;
+    /** Style for the search input */
+    searchInput?: string;
+    /** Style for group labels */
+    groupLabel?: string;
+    /** Style for command items (uses data-[highlighted] and data-[disabled] selectors) */
+    commandItem?: string;
+    /** Style for empty state */
+    emptyState?: string;
+}

package/dist/components/core/CommandPalette/index.d.ts

@@ -0,0 +1,3 @@
+export { CommandPalette } from './CommandPalette';
+export type { CommandPaletteProps, CommandItem, CommandGroup, CommandPaletteThemeOverrides, } from './CommandPalette.types';
+export { commandPaletteTheme } from './CommandPalette.theme';

package/dist/components/core/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { ContextMenuProps } from "./ContextMenu.types";
+export declare const ContextMenu: {
+    ({ children, className, onOpenChange, theme: themeOverrides, ...props }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuTriggerProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+    Sub: React.FC<import("./ContextMenu.types").ContextMenuSubProps>;
+    SubTrigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+    SubContent: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/core/ContextMenu/ContextMenu.js

@@ -0,0 +1,90 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { ContextMenuContext } from './ContextMenuContext.js';
+import { ContextMenuTrigger } from './ContextMenuTrigger.js';
+import { ContextMenuContent } from './ContextMenuContent.js';
+import { ContextMenuItem } from './ContextMenuItem.js';
+import { ContextMenuSub } from './ContextMenuSub.js';
+import { ContextMenuSubTrigger } from './ContextMenuSubTrigger.js';
+import { ContextMenuSubContent } from './ContextMenuSubContent.js';
+import { ContextMenuSeparator } from './ContextMenuSeparator.js';
+import { ContextMenuLabel } from './ContextMenuLabel.js';
+import { contextMenuTheme } from './ContextMenu.theme.js';
+
+/**
+ * ContextMenu component for right-click interactions
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenu.Trigger>
+ *     <div>Right click here</div>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <ContextMenu.Item shortcut="⌘R">Reload</ContextMenu.Item>
+ *     <ContextMenu.Separator />
+ *     <ContextMenu.Item checked={true}>Show Bookmarks</ContextMenu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu>
+ * ```
+ */
+const ContextMenuRoot = ({ children, className, onOpenChange, theme: themeOverrides, ...props }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [cursorPosition, setCursorPosition] = useState(null);
+    const contentRef = useRef(null);
+    const triggerRef = useRef(null);
+    // Handle open state changes
+    const handleOpenChange = useCallback((value) => {
+        setIsOpen(value);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
+        // Get cursor position from trigger element when opening
+        if (value && triggerRef.current) {
+            const storedPosition = triggerRef.current.__cursorPosition;
+            if (storedPosition) {
+                setCursorPosition(storedPosition);
+            }
+        }
+    }, [onOpenChange]);
+    // Merge theme with overrides
+    const theme = {
+        ...contextMenuTheme,
+        ...(themeOverrides || {}),
+    };
+    // Context value
+    const contextValue = {
+        isOpen,
+        onOpenChange: handleOpenChange,
+        cursorPosition,
+        contentRef,
+        triggerRef,
+        theme,
+    };
+    // Prevent browser context menu on the entire component
+    useEffect(() => {
+        const preventContextMenu = (e) => {
+            var _a;
+            if ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
+                e.preventDefault();
+            }
+        };
+        document.addEventListener("contextmenu", preventContextMenu);
+        return () => document.removeEventListener("contextmenu", preventContextMenu);
+    }, []);
+    return (jsx(ContextMenuContext.Provider, { value: contextValue, children: jsx("div", { className: cn("context-menu", className), "data-state": isOpen ? "open" : "closed", ...props, children: children }) }));
+};
+ContextMenuRoot.displayName = "ContextMenu";
+// Export as a unified component with sub-components
+const ContextMenu = Object.assign(ContextMenuRoot, {
+    Trigger: ContextMenuTrigger,
+    Content: ContextMenuContent,
+    Item: ContextMenuItem,
+    Sub: ContextMenuSub,
+    SubTrigger: ContextMenuSubTrigger,
+    SubContent: ContextMenuSubContent,
+    Separator: ContextMenuSeparator,
+    Label: ContextMenuLabel,
+});
+
+export { ContextMenu };

package/dist/components/core/ContextMenu/ContextMenu.theme.d.ts

@@ -0,0 +1,11 @@
+import { DropdownTheme } from "../Dropdown/Dropdown.theme";
+export interface ContextMenuTheme extends DropdownTheme {
+    contentStyle: string;
+    itemStyle: string;
+    itemCheckedStyle: string;
+    subTriggerStyle: string;
+    subContentStyle: string;
+    separatorStyle: string;
+    labelStyle: string;
+}
+export declare const contextMenuTheme: ContextMenuTheme;

package/dist/components/core/ContextMenu/ContextMenu.theme.js

@@ -0,0 +1,27 @@
+import { dropdownTheme } from '../Dropdown/Dropdown.theme.js';
+
+const contextMenuTheme = {
+    // Inherit all Dropdown styles for consistency
+    ...dropdownTheme,
+    // Content uses the same styling as Dropdown menu
+    contentStyle: dropdownTheme.menuStyle.replace("flex", "flex-col p-1"),
+    // Items use exact same styling as Dropdown items (with space for check icon)
+    itemStyle: `${dropdownTheme.itemBaseStyle} data-[checked=true]:pl-8`,
+    // Checked state - tick icon positioning (absolute left)
+    itemCheckedStyle: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-primary)] " +
+        "dark:text-[var(--color-neutral-200)]",
+    // Submenu trigger - based on Dropdown item style with chevron space
+    subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-background-tertiary)] ` +
+        "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
+    // Submenu content - similar to main menu but slightly smaller
+    subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] " +
+        "bg-[var(--color-background-secondary)] shadow-xl flex flex-col p-1 focus:outline-none " +
+        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
+    // Separator - horizontal divider
+    separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1 " +
+        "dark:bg-[var(--color-neutral-700)]",
+    // Label - section header (matches Dropdown section title)
+    labelStyle: dropdownTheme.sectionTitleStyle,
+};
+
+export { contextMenuTheme };

package/dist/components/core/ContextMenu/ContextMenu.types.d.ts

@@ -0,0 +1,86 @@
+import React, { ReactNode } from "react";
+import { ContextMenuTheme } from "./ContextMenu.theme";
+export interface ContextMenuContextValue {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    cursorPosition: {
+        x: number;
+        y: number;
+    } | null;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    theme: ContextMenuTheme;
+}
+export interface SubMenuContextValue {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    triggerRef: React.RefObject<HTMLDivElement | null>;
+}
+export interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    onOpenChange?: (isOpen: boolean) => void;
+    theme?: Partial<ContextMenuTheme>;
+}
+export interface ContextMenuTriggerProps {
+    children: React.ReactElement;
+    className?: string;
+    disabled?: boolean;
+}
+export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    animation?: boolean;
+    "aria-label"?: string;
+}
+export interface ContextMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    children: ReactNode;
+    className?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    isDanger?: boolean;
+    shortcut?: ReactNode;
+    onSelect?: () => void;
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+    description?: string;
+}
+export interface ContextMenuSubProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface ContextMenuSubTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export interface ContextMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+    animation?: boolean;
+}
+export interface ContextMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export interface ContextMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Theme overrides for the ContextMenu component
+ */
+export interface ContextMenuThemeOverrides {
+    /** Content container style */
+    contentStyle?: string;
+    /** Item base style */
+    itemStyle?: string;
+    /** Checked item style (for tick icon positioning) */
+    itemCheckedStyle?: string;
+    /** Sub trigger style */
+    subTriggerStyle?: string;
+    /** Sub content style */
+    subContentStyle?: string;
+    /** Separator style */
+    separatorStyle?: string;
+    /** Label style */
+    labelStyle?: string;
+}

package/dist/components/core/ContextMenu/ContextMenuContent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuContentProps } from "./ContextMenu.types";
+/**
+ * ContextMenuContent - Renders the menu at cursor position with keyboard navigation
+ */
+export declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;