flikkui 0.2.0-beta.6 → 0.2.0-beta.8

package/README.md

@@ -1,16 +1,44 @@
 # Flikkui
 
-A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion.
+A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete `className` override support.
 
 ## Installation
 
 ```bash
 npm install flikkui
+# or
+yarn add flikkui
 ```
 
 ## Setup
 
-Import styles in your main app file:
+The quickest way to get started is with the CLI init command. It auto-detects your project type (Next.js, Vite, Remix, CRA), installs peer dependencies, and injects the CSS import into your entry file:
+
+```bash
+npx flikkui init
+```
+
+Options:
+
+| Flag | Description |
+|------|-------------|
+| `--tailwind`, `-t` | Set up Tailwind CSS integration (adds preset and content paths) |
+| `--yes`, `-y` | Skip prompts and use defaults |
+| `--skip-install` | Skip installing dependencies (prints manual command instead) |
+
+### Manual Setup
+
+If you prefer to set things up yourself:
+
+1. Install peer dependencies:
+
+```bash
+npm install react react-dom tailwindcss motion clsx tailwind-merge @heroicons/react
+# or
+yarn add react react-dom tailwindcss motion clsx tailwind-merge @heroicons/react
+```
+
+2. Import styles in your main app file:
 
 ```tsx
 import 'flikkui/styles.css'
@@ -22,10 +50,21 @@ import 'flikkui/styles.css'
 import { Button } from 'flikkui'
 
 function App() {
-  return <Button variant="primary">Click me</Button>
+  return <Button variant="filled" color="primary">Click me</Button>
 }
 ```
 
+### Subpath Imports
+
+Import from specific categories to optimize bundle size:
+
+```tsx
+import { Button, Badge, Accordion } from 'flikkui/core'
+import { Input, Select, Checkbox } from 'flikkui/forms'
+import { AreaChart, BarChart } from 'flikkui/charts'
+import { GlassEffect } from 'flikkui/effects'
+```
+
 ## Customizing the Theme
 
 Flikkui uses CSS variables for all theming. Override any variable in your own CSS to customize colors, spacing, border radius, and more.
@@ -55,6 +94,19 @@ Override semantic color palettes by redefining the CSS variables after importing
 
 Available color palettes: `primary`, `danger`, `success`, `warning`. Each has shades from `50` to `950`.
 
+### Text Colors
+
+```css
+:root {
+  --color-text-primary: var(--color-neutral-950);
+  --color-text-secondary: var(--color-neutral-800);
+  --color-text-placeholder: var(--color-neutral-600);
+  --color-text-muted: var(--color-neutral-500);
+  --color-text-disabled: var(--color-neutral-400);
+  --color-text-inverse: var(--color-neutral-50);
+}
+```
+
 ### Backgrounds & Borders
 
 ```css
@@ -62,19 +114,53 @@ Available color palettes: `primary`, `danger`, `success`, `warning`. Each has sh
   --color-background: oklch(98.5% 0.002 247.839);
   --color-background-secondary: oklch(95% 0.002 247.839);
   --color-background-tertiary: oklch(90% 0.002 247.839);
+  --color-background-quaternary: oklch(85% 0.002 247.839);
+  --color-background-quinary: oklch(80% 0.002 247.839);
+  --color-background-disabled: var(--color-neutral-100);
   --color-border: oklch(92.2% 0 0);
 }
 ```
 
+### Border Radius System
+
+All border radii derive from a single `--radius-base` token. Change it once to update the entire UI:
+
+```css
+:root {
+  --radius-base: 0.5rem; /* 8px - change this to update all radii */
+
+  /* Forms & Controls (1x base) */
+  --form-radius: var(--radius-base);
+  --button-radius: var(--form-radius);
+  --badge-radius: var(--form-radius);
+  --nav-item-radius: var(--radius-base);
+
+  /* Overlays (1.5x base) */
+  --dropdown-radius: calc(var(--radius-base) * 1.5);
+  --tooltip-radius: var(--radius-base);
+  --popover-radius: calc(var(--radius-base) * 1.5);
+
+  /* Feedback surfaces */
+  --alert-radius: calc(var(--radius-base) * 1.5);
+  --toast-radius: calc(var(--radius-base) * 2);
+  --drawer-radius: calc(var(--radius-base) * 2);
+
+  /* Surfaces (3x base) */
+  --card-radius: calc(var(--radius-base) * 3);
+  --modal-radius: calc(var(--radius-base) * 3);
+
+  /* Special shapes */
+  --segmented-radius: 99px;
+  --avatar-radius: 50%;
+}
+```
+
 ### Form Elements
 
 Control sizing, padding, and border radius for all form components:
 
 ```css
 :root {
-  /* Border radius */
-  --form-rounded: 0.5rem;
-
   /* Heights */
   --form-min-h-sm: 2rem;
   --form-min-h-md: 2.5rem;
@@ -85,6 +171,11 @@ Control sizing, padding, and border radius for all form components:
   --form-px-md: 0.875rem;
   --form-px-lg: 1rem;
 
+  /* Vertical padding */
+  --form-py-sm: 0.5rem;
+  --form-py-md: 0.625rem;
+  --form-py-lg: 0.75rem;
+
   /* Font sizes */
   --form-text-sm: 0.75rem;
   --form-text-md: 0.875rem;
@@ -92,7 +183,7 @@ Control sizing, padding, and border radius for all form components:
 }
 ```
 
-Button, badge, segmented, and other component variables inherit from these form defaults but can be overridden individually (e.g. `--button-rounded`, `--badge-rounded`).
+Button, badge, segmented, and other component variables inherit from these form defaults but can be overridden individually (e.g. `--button-radius`, `--badge-radius`, `--button-px-*`).
 
 ### Dark Mode
 
@@ -111,6 +202,8 @@ The library ships with sensible dark mode defaults. To customize dark mode color
   --color-background: oklch(14.5% 0 0);
   --color-border: oklch(30% 0 0);
   --color-primary: var(--color-primary-400);
+  --color-text-primary: var(--color-neutral-50);
+  --color-text-secondary: var(--color-neutral-400);
 }
 ```
 

package/dist/components/ai/CodeBlock/CodeBlock.js

@@ -1,6 +1,6 @@
 import React__default, { useState, useMemo, useCallback } from 'react';
 import { Prism } from 'react-syntax-highlighter';
-import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism/index.js';
 import { DocumentTextIcon, DocumentCheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import { codeBlockTheme } from './CodeBlock.theme.js';
 import { LanguageIcon } from './LanguageIcon.js';

package/dist/components/ai/PromptInput/PromptInput.js

@@ -81,6 +81,10 @@ import '../../core/Sidebar/SidebarNav.js';
 import '../../core/Sidebar/SidebarNavGroup.js';
 import '../../core/Sidebar/SidebarToggle.js';
 import '../../core/Sidebar/SidebarContext.js';
+import '../../core/ContextMenu/ContextMenu.js';
+import '../../core/ContextMenu/ContextMenu.theme.js';
+import '../../core/DescriptionList/DescriptionList.js';
+import '../../core/Pill/Pill.js';
 import '../../forms/TimePicker/WheelColumn.js';
 import '../../forms/TimePicker/TimePicker.theme.js';
 import '../../forms/Slider/Slider.js';
@@ -101,6 +105,16 @@ import '../../forms/InputTag/InputTag.js';
 import '../../forms/InputTag/InputTag.theme.js';
 import '../../forms/Combobox/Combobox.js';
 import '../../forms/Combobox/Combobox.theme.js';
+import '../../forms/ColorPicker/ColorPicker.js';
+import '../../forms/ColorPicker/ColorPickerTrigger.js';
+import '../../forms/ColorPicker/ColorPickerContent.js';
+import '../../forms/ColorPicker/ColorPicker2DCanvas.js';
+import '../../forms/ColorPicker/ColorPickerSwatch.js';
+import '../../forms/ColorPicker/ColorPickerSliders.js';
+import '../../forms/ColorPicker/ColorPickerInput.js';
+import '../../forms/ColorPicker/ColorPickerFormatSelector.js';
+import '../../forms/ColorPicker/ColorPickerEyeDropper.js';
+import '../../forms/ColorPicker/ColorPickerPresets.js';
 import { promptInputTheme } from './PromptInput.theme.js';
 
 /**

package/dist/components/ai/StreamingResponse/MarkdownRenderer.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import ReactMarkdown from 'react-markdown';
 import { Prism } from 'react-syntax-highlighter';
-import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism/index.js';
 import remarkGfm from 'remark-gfm';
 
 /**

package/dist/components/ai/index.js

@@ -0,0 +1,27 @@
+export { ChatInterface } from './ChatInterface/ChatInterface.js';
+export { chatInterfaceTheme } from './ChatInterface/ChatInterface.theme.js';
+export { useChatInterfaceContext } from './ChatInterface/ChatInterface.types.js';
+export { Message } from '../core/Message/Message.js';
+export { messageTheme } from '../core/Message/Message.theme.js';
+import '../core/Message/TypeWriter.js';
+export { MessageHistory } from './MessageHistory/MessageHistory.js';
+export { messageHistoryTheme } from './MessageHistory/MessageHistory.theme.js';
+export { PromptInput } from './PromptInput/PromptInput.js';
+export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
+export { ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.js';
+export { thinkingIndicatorTheme } from './ThinkingIndicator/ThinkingIndicator.theme.js';
+export { TokenCounter } from './TokenCounter/TokenCounter.js';
+export { tokenCounterTheme } from './TokenCounter/TokenCounter.theme.js';
+export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './TokenCounter/tokenUtils.js';
+export { PromptSuggestion } from './PromptSuggestions/PromptSuggestion.js';
+export { promptSuggestionTheme } from './PromptSuggestions/PromptSuggestion.theme.js';
+export { StreamingResponse } from './StreamingResponse/StreamingResponse.js';
+export { ErrorDisplay } from './StreamingResponse/ErrorDisplay.js';
+export { MarkdownRenderer } from './StreamingResponse/MarkdownRenderer.js';
+export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.theme.js';
+export { CodeBlock } from './CodeBlock/CodeBlock.js';
+export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
+export { ApprovalCard } from './ApprovalCard/ApprovalCard.js';
+export { approvalCardTheme } from './ApprovalCard/ApprovalCard.theme.js';
+export { ArtifactContainer } from './ArtifactContainer/ArtifactContainer.js';
+export { artifactContainerTheme, handleSizes } from './ArtifactContainer/ArtifactContainer.theme.js';

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

@@ -0,0 +1,90 @@
+import React__default, { 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 (React__default.createElement(ContextMenuContext.Provider, { value: contextValue },
+        React__default.createElement("div", { className: cn("context-menu", className), "data-state": isOpen ? "open" : "closed", ...props }, 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.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/ContextMenuContent.js

@@ -0,0 +1,194 @@
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { useContextMenuContext } from './ContextMenuContext.js';
+
+/**
+ * ContextMenuContent - Renders the menu at cursor position with keyboard navigation
+ */
+const ContextMenuContent = React__default.forwardRef(({ children, className, animation = true, "aria-label": ariaLabel, ...props }, ref) => {
+    const { isOpen, onOpenChange, cursorPosition, contentRef, triggerRef, theme, } = useContextMenuContext();
+    const shouldReduceMotion = useReducedMotion();
+    const localRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    // Initialize position from cursorPosition if available, otherwise use 0,0
+    const [position, setPosition] = useState(() => cursorPosition || { x: 0, y: 0 });
+    // Get all menu items (not separators or labels)
+    const getMenuItems = useCallback(() => {
+        if (!localRef.current)
+            return [];
+        return Array.from(localRef.current.querySelectorAll('[role="menuitem"]:not([data-disabled="true"])'));
+    }, []);
+    // Focus a menu item by index
+    const focusItem = useCallback((index) => {
+        var _a;
+        const items = getMenuItems();
+        if (index >= 0 && index < items.length) {
+            (_a = items[index]) === null || _a === void 0 ? void 0 : _a.focus();
+            setFocusedIndex(index);
+        }
+    }, [getMenuItems]);
+    // Keyboard navigation handler
+    const handleKeyDown = useCallback((e) => {
+        const items = getMenuItems();
+        const currentIndex = focusedIndex;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                focusItem(nextIndex);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                focusItem(prevIndex);
+                break;
+            case "Home":
+                e.preventDefault();
+                focusItem(0);
+                break;
+            case "End":
+                e.preventDefault();
+                focusItem(items.length - 1);
+                break;
+            case "Escape":
+                e.preventDefault();
+                onOpenChange(false);
+                break;
+            case "Tab":
+                e.preventDefault();
+                onOpenChange(false);
+                break;
+        }
+    }, [focusedIndex, focusItem, getMenuItems, onOpenChange]);
+    // Click outside to close - memoize handler to prevent unnecessary re-renders
+    const handleClickOutside = useCallback((e) => {
+        var _a;
+        // Skip if clicking on the trigger element
+        if (e.target === triggerRef.current ||
+            ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        onOpenChange(false);
+    }, [onOpenChange, triggerRef]);
+    // Only attach click outside listener when menu is open
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const listener = (event) => {
+            const el = localRef.current;
+            if (!el || el.contains(event.target)) {
+                return;
+            }
+            handleClickOutside(event);
+        };
+        // Small delay to prevent immediate closing from the same click that opened the menu
+        const timeoutId = setTimeout(() => {
+            document.addEventListener("mousedown", listener);
+            document.addEventListener("touchstart", listener);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener("mousedown", listener);
+            document.removeEventListener("touchstart", listener);
+        };
+    }, [isOpen, handleClickOutside]);
+    // Update position when menu opens
+    useEffect(() => {
+        if (isOpen && cursorPosition) {
+            // Get cursor position from trigger
+            const { x, y } = cursorPosition;
+            // Adjust position to keep menu in viewport
+            const menuWidth = 220; // min-w-[220px]
+            const menuHeight = 400; // max estimated height
+            let adjustedX = x;
+            let adjustedY = y;
+            // Check right edge
+            if (x + menuWidth > window.innerWidth) {
+                adjustedX = window.innerWidth - menuWidth - 10;
+            }
+            // Check bottom edge
+            if (y + menuHeight > window.innerHeight) {
+                adjustedY = window.innerHeight - menuHeight - 10;
+            }
+            // Keep minimum padding from edges
+            adjustedX = Math.max(10, adjustedX);
+            adjustedY = Math.max(10, adjustedY);
+            setPosition({ x: adjustedX, y: adjustedY });
+            // Focus first item after a small delay
+            requestAnimationFrame(() => {
+                const items = getMenuItems();
+                if (items.length > 0) {
+                    focusItem(0);
+                }
+            });
+        }
+        else {
+            setFocusedIndex(-1);
+        }
+    }, [isOpen, cursorPosition, getMenuItems, focusItem]);
+    // Close menu on scroll
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleScroll = () => {
+            onOpenChange(false);
+        };
+        // Use capture phase to catch all scroll events
+        window.addEventListener("scroll", handleScroll, true);
+        return () => window.removeEventListener("scroll", handleScroll, true);
+    }, [isOpen, onOpenChange]);
+    // Combine refs
+    const handleRef = useCallback((el) => {
+        localRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+        if (contentRef) {
+            contentRef.current = el;
+        }
+    }, [ref, contentRef]);
+    // Animation variants
+    const menuVariants = {
+        hidden: {
+            opacity: 0,
+            scale: 0.95,
+        },
+        visible: {
+            opacity: 1,
+            scale: 1,
+        },
+        exit: {
+            opacity: 0,
+            scale: 0.95,
+        },
+    };
+    // Extract DOM props to avoid conflicts with Framer Motion
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = props;
+    // Detect dark mode from document
+    const isDarkMode = typeof document !== "undefined" &&
+        (document.documentElement.classList.contains("dark") ||
+            document.body.classList.contains("dark") ||
+            document.querySelector(".dark") !== null);
+    const menuContent = (React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, { ref: handleRef, className: cn("fixed z-50", isDarkMode && "dark", theme.contentStyle, className), style: {
+            top: `${position.y}px`,
+            left: `${position.x}px`,
+        }, role: "menu", "aria-label": ariaLabel || "Context menu", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+            ? { duration: 0 }
+            : {
+                type: "spring",
+                stiffness: 500,
+                damping: 30,
+            }, "data-state": isOpen ? "open" : "closed", ...domProps }, children))));
+    // Always use portal for context menus
+    return typeof document !== "undefined"
+        ? createPortal(menuContent, document.body)
+        : null;
+});
+ContextMenuContent.displayName = "ContextMenuContent";
+
+export { ContextMenuContent };

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

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+
+// Main context menu context
+const ContextMenuContext = createContext(null);
+const useContextMenuContext = () => {
+    const context = useContext(ContextMenuContext);
+    if (!context) {
+        throw new Error("ContextMenu compound components must be used within a ContextMenu component");
+    }
+    return context;
+};
+// Submenu context (for nested menus)
+const SubMenuContext = createContext(null);
+const useSubMenuContext = () => {
+    const context = useContext(SubMenuContext);
+    if (!context) {
+        throw new Error("ContextMenu.Sub compound components must be used within a ContextMenu.Sub component");
+    }
+    return context;
+};
+
+export { ContextMenuContext, SubMenuContext, useContextMenuContext, useSubMenuContext };

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

@@ -0,0 +1,35 @@
+import React__default, { useCallback } from 'react';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useContextMenuContext } from './ContextMenuContext.js';
+import { MenuItem } from '../MenuItem/MenuItem.js';
+
+/**
+ * ContextMenuItem - Individual menu item with optional check indicator.
+ * Built on shared MenuItem, adds checked state and ContextMenu context integration.
+ */
+const ContextMenuItem = React__default.forwardRef(({ children, className, checked = false, disabled = false, isDanger = false, shortcut, onSelect, startContent, endContent, description, ...props }, ref) => {
+    const { onOpenChange, theme } = useContextMenuContext();
+    const handleActivate = useCallback(() => {
+        if (disabled)
+            return;
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+        onOpenChange(false);
+    }, [disabled, onSelect, onOpenChange]);
+    // Combine checked icon with startContent (CheckIcon uses absolute positioning)
+    const hasPrefix = checked || !!startContent;
+    const resolvedStartContent = hasPrefix ? (React__default.createElement(React__default.Fragment, null,
+        checked && (React__default.createElement(CheckIcon, { className: theme.itemCheckedStyle, "aria-hidden": "true" })),
+        startContent)) : undefined;
+    // Build end content: user's endContent OR shortcut display
+    const resolvedEndContent = endContent ||
+        (shortcut ? (React__default.createElement("span", { className: "text-xs text-[var(--color-text-muted)] font-mono" }, shortcut)) : undefined);
+    return (React__default.createElement(MenuItem, { ref: ref, role: "menuitem", disabled: disabled, isDanger: isDanger, startContent: resolvedStartContent, endContent: resolvedEndContent, description: description, onActivate: handleActivate, "data-checked": checked, "aria-checked": checked ? "true" : undefined, className: cn(checked && "pl-8", className), theme: {
+            baseStyle: theme.itemStyle,
+            dangerStyle: theme.itemDangerStyle,
+            focusStyle: theme.itemFocusStyle,
+        }, ...props }, children));
+});
+ContextMenuItem.displayName = "ContextMenuItem";
+
+export { ContextMenuItem };

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useContextMenuContext } from './ContextMenuContext.js';
+
+/**
+ * ContextMenuLabel - Non-interactive section header
+ */
+const ContextMenuLabel = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const { theme } = useContextMenuContext();
+    return (React__default.createElement("div", { ref: ref, className: cn(theme.labelStyle, className), ...props }, children));
+});
+ContextMenuLabel.displayName = "ContextMenuLabel";
+
+export { ContextMenuLabel };

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useContextMenuContext } from './ContextMenuContext.js';
+
+/**
+ * ContextMenuSeparator - Visual divider between menu items
+ */
+const ContextMenuSeparator = React__default.forwardRef(({ className, ...props }, ref) => {
+    const { theme } = useContextMenuContext();
+    return (React__default.createElement("div", { ref: ref, role: "separator", "aria-orientation": "horizontal", className: cn(theme.separatorStyle, className), ...props }));
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+
+export { ContextMenuSeparator };