@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,197 @@
+import { jsx } from 'react/jsx-runtime';
+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';
+import { useIsClient } from '../../../hooks/useIsClient.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 isClient = useIsClient();
+    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 = (jsx(AnimatePresence, { children: isOpen && (jsx(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: children })) }));
+    // Always use portal for context menus
+    return isClient
+        ? createPortal(menuContent, document.body)
+        : null;
+});
+ContextMenuContent.displayName = "ContextMenuContent";
+
+export { ContextMenuContent };

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

@@ -0,0 +1,5 @@
+import { ContextMenuContextValue, SubMenuContextValue } from "./ContextMenu.types";
+export declare const ContextMenuContext: import("react").Context<ContextMenuContextValue | null>;
+export declare const useContextMenuContext: () => ContextMenuContextValue;
+export declare const SubMenuContext: import("react").Context<SubMenuContextValue | null>;
+export declare const useSubMenuContext: () => SubMenuContextValue;

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.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ContextMenuItemProps } from "./ContextMenu.types";
+/**
+ * ContextMenuItem - Individual menu item with optional check indicator.
+ * Built on shared MenuItem, adds checked state and ContextMenu context integration.
+ */
+export declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,34 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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 ? (jsxs(Fragment, { children: [checked && (jsx(CheckIcon, { className: theme.itemCheckedStyle, "aria-hidden": "true" })), startContent] })) : undefined;
+    // Build end content: user's endContent OR shortcut display
+    const resolvedEndContent = endContent ||
+        (shortcut ? (jsx("span", { className: "text-xs text-[var(--color-text-muted)] font-mono", children: shortcut })) : undefined);
+    return (jsx(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: children }));
+});
+ContextMenuItem.displayName = "ContextMenuItem";
+
+export { ContextMenuItem };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuLabelProps } from "./ContextMenu.types";
+/**
+ * ContextMenuLabel - Non-interactive section header
+ */
+export declare const ContextMenuLabel: React.ForwardRefExoticComponent<ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+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 (jsx("div", { ref: ref, className: cn(theme.labelStyle, className), ...props, children: children }));
+});
+ContextMenuLabel.displayName = "ContextMenuLabel";
+
+export { ContextMenuLabel };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSeparatorProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSeparator - Visual divider between menu items
+ */
+export declare const ContextMenuSeparator: React.ForwardRefExoticComponent<ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+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 (jsx("div", { ref: ref, role: "separator", "aria-orientation": "horizontal", className: cn(theme.separatorStyle, className), ...props }));
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+
+export { ContextMenuSeparator };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSubProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSub - Wrapper for nested submenu with hover logic
+ */
+export declare const ContextMenuSub: React.FC<ContextMenuSubProps>;

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

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+import { SubMenuContext } from './ContextMenuContext.js';
+
+/**
+ * ContextMenuSub - Wrapper for nested submenu with hover logic
+ */
+const ContextMenuSub = ({ children, className, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
+    const handleOpenChange = useCallback((value) => {
+        setIsOpen(value);
+    }, []);
+    // Handle mouse enter - clear any close timeout
+    const handleMouseEnter = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+    }, []);
+    // Handle mouse leave - close submenu after delay
+    const handleMouseLeave = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        hoverTimeoutRef.current = setTimeout(() => {
+            setIsOpen(false);
+        }, 150);
+    }, []);
+    const contextValue = {
+        isOpen,
+        onOpenChange: handleOpenChange,
+        triggerRef,
+    };
+    return (jsx(SubMenuContext.Provider, { value: contextValue, children: jsx("div", { className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: children }) }));
+};
+ContextMenuSub.displayName = "ContextMenuSub";
+
+export { ContextMenuSub };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSubContentProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSubContent - Submenu content positioned to the right of trigger
+ */
+export declare const ContextMenuSubContent: React.ForwardRefExoticComponent<ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,106 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.js';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+
+/**
+ * ContextMenuSubContent - Submenu content positioned to the right of trigger
+ */
+const ContextMenuSubContent = React__default.forwardRef(({ children, className, animation = true, ...props }, ref) => {
+    const { theme } = useContextMenuContext();
+    const { isOpen, triggerRef, onOpenChange } = useSubMenuContext();
+    const shouldReduceMotion = useReducedMotion();
+    const isClient = useIsClient();
+    const localRef = useRef(null);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    // Update position when submenu opens
+    useEffect(() => {
+        if (isOpen && triggerRef.current) {
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            // Position to the right of the trigger
+            let x = triggerRect.right + 4; // 4px offset
+            let y = triggerRect.top;
+            // Check if submenu would overflow right edge
+            const submenuWidth = 180; // min-w-[180px]
+            if (x + submenuWidth > window.innerWidth) {
+                // Position to the left instead
+                x = triggerRect.left - submenuWidth - 4;
+            }
+            // Check if submenu would overflow bottom edge
+            const submenuHeight = 300; // estimated max height
+            if (y + submenuHeight > window.innerHeight) {
+                y = window.innerHeight - submenuHeight - 10;
+            }
+            // Keep minimum padding from edges
+            x = Math.max(10, Math.min(x, window.innerWidth - submenuWidth - 10));
+            y = Math.max(10, y);
+            setPosition({ x, y });
+        }
+    }, [isOpen, triggerRef]);
+    // Close submenu 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 && typeof ref === "object" && "current" in ref) {
+            ref.current = el;
+        }
+    }, [ref]);
+    // Animation variants
+    const menuVariants = {
+        hidden: {
+            opacity: 0,
+            scale: 0.95,
+            x: -10,
+        },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            x: 0,
+        },
+        exit: {
+            opacity: 0,
+            scale: 0.95,
+            x: -10,
+        },
+    };
+    // Extract DOM props to avoid conflicts
+    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 submenuContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, className: cn("fixed z-50", isDarkMode && "dark", theme.subContentStyle, className), style: {
+                top: `${position.y}px`,
+                left: `${position.x}px`,
+            }, role: "menu", "aria-label": "Submenu", 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: children })) }));
+    // Always use portal for submenus
+    return isClient
+        ? createPortal(submenuContent, document.body)
+        : null;
+});
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+
+export { ContextMenuSubContent };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuSubTriggerProps } from "./ContextMenu.types";
+/**
+ * ContextMenuSubTrigger - Trigger for nested submenu with chevron indicator
+ */
+export declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useCallback } from 'react';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { useContextMenuContext, useSubMenuContext } from './ContextMenuContext.js';
+
+/**
+ * ContextMenuSubTrigger - Trigger for nested submenu with chevron indicator
+ */
+const ContextMenuSubTrigger = React__default.forwardRef(({ children, className, disabled = false, ...props }, ref) => {
+    const { theme } = useContextMenuContext();
+    const { isOpen, onOpenChange, triggerRef } = useSubMenuContext();
+    const hoverTimeoutRef = useRef(null);
+    // Handle mouse enter - open submenu after short delay
+    const handleMouseEnter = useCallback(() => {
+        if (disabled)
+            return;
+        // Clear any existing timeout
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+        }
+        // Open submenu after short delay
+        hoverTimeoutRef.current = setTimeout(() => {
+            onOpenChange(true);
+        }, 150);
+    }, [disabled, onOpenChange]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case "ArrowRight":
+                e.preventDefault();
+                e.stopPropagation();
+                onOpenChange(true);
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                e.stopPropagation();
+                onOpenChange(false);
+                break;
+        }
+    }, [disabled, onOpenChange]);
+    // Combine refs
+    const handleRef = useCallback((el) => {
+        if (triggerRef && typeof triggerRef === "object" && "current" in triggerRef) {
+            triggerRef.current = el;
+        }
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref && typeof ref === "object" && "current" in ref) {
+            ref.current = el;
+        }
+    }, [ref, triggerRef]);
+    return (jsxs("div", { ref: handleRef, role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled, tabIndex: disabled ? undefined : -1, className: cn(theme.subTriggerStyle, theme.itemFocusStyle, className), onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, ...props, children: [jsx("span", { className: "flex-1 truncate", children: children }), jsx(ChevronRightIcon, { className: "absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-muted)]", "aria-hidden": "true" })] }));
+});
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+
+export { ContextMenuSubTrigger };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { ContextMenuTriggerProps } from "./ContextMenu.types";
+/**
+ * ContextMenuTrigger - Area that triggers the context menu on right-click
+ */
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuTriggerProps & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,49 @@
+import React__default, { useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useContextMenuContext } from './ContextMenuContext.js';
+
+/**
+ * ContextMenuTrigger - Area that triggers the context menu on right-click
+ */
+const ContextMenuTrigger = React__default.forwardRef(({ children, className, disabled = false }, ref) => {
+    const { onOpenChange, triggerRef } = useContextMenuContext();
+    // Handle right-click event
+    const handleContextMenu = useCallback((e) => {
+        if (disabled)
+            return;
+        // Prevent default browser context menu
+        e.preventDefault();
+        e.stopPropagation();
+        // Store cursor position BEFORE opening menu
+        e.currentTarget.__cursorPosition = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+        // Now open the menu with position available
+        onOpenChange(true);
+    }, [disabled, onOpenChange]);
+    // Clone child element and add context menu handler
+    const child = React__default.Children.only(children);
+    const handleRef = useCallback((el) => {
+        // Assign to context ref
+        if (triggerRef && typeof triggerRef === "object" && "current" in triggerRef) {
+            triggerRef.current = el;
+        }
+        // Forward ref
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref && typeof ref === "object" && "current" in ref) {
+            ref.current = el;
+        }
+    }, [ref, triggerRef]);
+    return React__default.cloneElement(child, {
+        ref: handleRef,
+        onContextMenu: handleContextMenu,
+        className: cn(child.props.className, className),
+        "data-disabled": disabled,
+    });
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+
+export { ContextMenuTrigger };

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

@@ -0,0 +1,4 @@
+export { ContextMenu } from "./ContextMenu";
+export type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuSubProps, ContextMenuSubTriggerProps, ContextMenuSubContentProps, ContextMenuSeparatorProps, ContextMenuLabelProps, ContextMenuThemeOverrides, } from "./ContextMenu.types";
+export type { ContextMenuTheme } from "./ContextMenu.theme";
+export { contextMenuTheme } from "./ContextMenu.theme";

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { DescriptionListProps, DescriptionListItemProps } from "./DescriptionList.types";
+export declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & React.RefAttributes<HTMLDListElement>> & {
+    Item: React.ForwardRefExoticComponent<DescriptionListItemProps & React.RefAttributes<HTMLDivElement>>;
+};