entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/layout/Stack/Stack.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utils/cx.js';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { gapVar, stackRecipe } from './Stack.css.js';
+
+/** Base spacing unit in px */
+const SPACING_UNIT = 4;
+/**
+ * Calculate gap value based on spacing multiplier
+ */
+const getGapValue = (spacing, customGap) => {
+    if (customGap !== undefined) {
+        return typeof customGap === 'number' ? `${customGap}px` : customGap;
+    }
+    return `${spacing * SPACING_UNIT}px`;
+};
+/**
+ * A flexible stacking component for arranging elements vertically or horizontally.
+ *
+ * Built on flexbox with consistent spacing and alignment options. Perfect for
+ * simple layouts where you need to stack elements with controlled spacing.
+ * Use Grid or Flex components for more complex layout requirements.
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical stack
+ * <Stack spacing={2}>
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </Stack>
+ *
+ * // Horizontal stack with full width
+ * <Stack direction="row" expand spacing={3} justify="space-between">
+ *   <Button>Cancel</Button>
+ *   <Button variant="filled">Save</Button>
+ * </Stack>
+ *
+ * // Responsive stack
+ * <Stack
+ *   direction="column"
+ *   md="row"
+ *   spacing={2}
+ *   align="center"
+ * >
+ *   <Logo />
+ *   <Navigation />
+ *   <UserMenu />
+ * </Stack>
+ *
+ * // Centered content
+ * <Stack
+ *   direction="column"
+ *   expand
+ *   justify="center"
+ *   align="center"
+ *   spacing={4}
+ * >
+ *   <Icon />
+ *   <Title>Welcome</Title>
+ *   <Button>Get Started</Button>
+ * </Stack>
+ *
+ * // Wrapping horizontal stack
+ * <Stack
+ *   direction="row"
+ *   wrap="wrap"
+ *   spacing={2}
+ *   justify="center"
+ * >
+ *   <Tag>React</Tag>
+ *   <Tag>TypeScript</Tag>
+ *   <Tag>CSS</Tag>
+ * </Stack>
+ * ```
+ */
+const Stack = ({ children, direction = 'column', sm, md, lg, xl, wrap = 'nowrap', expand = false, spacing = 0, customGap, justify = 'flex-start', align = 'flex-start', className, testId, style, ref, ...htmlProps }) => {
+    const mergedStyle = {
+        ...assignInlineVars({
+            [gapVar]: getGapValue(spacing, customGap),
+        }),
+        ...style,
+    };
+    // Build data attributes for responsive direction overrides
+    const dataAttrs = {};
+    if (sm)
+        dataAttrs['data-sm-dir'] = sm;
+    if (md)
+        dataAttrs['data-md-dir'] = md;
+    if (lg)
+        dataAttrs['data-lg-dir'] = lg;
+    if (xl)
+        dataAttrs['data-xl-dir'] = xl;
+    if (expand)
+        dataAttrs['data-expand'] = 'true';
+    return (jsx("div", { ref: ref, className: cx(stackRecipe({
+            direction,
+            wrap,
+            justify,
+            align,
+            expandRow: expand && direction === 'row' ? true : undefined,
+            expandColumn: expand && direction === 'column' ? true : undefined,
+        }), className), "data-testid": testId, style: mergedStyle, ...dataAttrs, ...htmlProps, children: children }));
+};
+Stack.displayName = 'Stack';
+
+export { Stack };
+//# sourceMappingURL=Stack.js.map

package/dist/esm/components/layout/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../../../../src/components/layout/Stack/Stack.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAyIA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DG;AACI;AAmBL;AACE;;;AAGA;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAY;;;;;;AAWJ;AACA;AACD;AAWT;AAEA;;"}

package/dist/esm/components/navigation/ContextMenu/ContextMenu.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
+import '../../primitives/Icon/Icon.js';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { CircleIcon } from '../../Icons/CircleIcon.js';
+import { Text } from '../../primitives/Text/Text.js';
+import { cx } from '../../../utils/cx.js';
+import { Menu } from '../Menu/Menu.js';
+import { useMenu, createItemClickHandler } from '../Menu/useMenu.js';
+import { renderItemWithSubmenu } from '../Menu/Menu.helpers.js';
+import { separatorStyle, menuContentStyle } from '../Menu/Menu.css.js';
+import { useContextMenuTarget } from './useContextMenuTarget.js';
+
+function ContextMenu({ config, selectedItems = {}, onChange, children, payload, checkboxIcon = jsx(CheckIcon, { size: "sm" }), radioIcon = jsx(CircleIcon, { size: "sm" }), disabled = false, className, style, testId, ref, ...rest }) {
+    const { handleItemClick, isItemSelected, toggleSubmenu } = useMenu(selectedItems, onChange);
+    const { context, onContextMenuCapture } = useContextMenuTarget(payload);
+    const resolvedConfig = useMemo(() => {
+        return typeof config === 'function' ? config(context) : config;
+    }, [config, context]);
+    const menuItems = useMemo(() => {
+        return resolvedConfig.groups.map((group, groupIndex) => {
+            const items = group.items.map(item => {
+                const isSelected = isItemSelected(group.id, item.id);
+                const clickHandler = createItemClickHandler(item, group, handleItemClick, toggleSubmenu);
+                return renderItemWithSubmenu(item, group, isSelected, checkboxIcon, radioIcon, selectedItems, clickHandler, onChange, Menu);
+            });
+            const showSeparator = groupIndex < resolvedConfig.groups.length - 1 &&
+                resolvedConfig.groups.length > 1;
+            return (jsxs(React.Fragment, { children: [jsxs(ContextMenu$1.Group, { children: [group.label && (jsx(ContextMenu$1.GroupLabel, { children: jsx(Text, { variant: "caption", color: "muted", weight: "semibold", children: group.label }) })), group.itemSelectionType === 'radio' ? (jsx(ContextMenu$1.RadioGroup, { value: selectedItems[group.id]?.[0] ?? '', children: items })) : (items)] }), showSeparator && (jsx(ContextMenu$1.Separator, { className: separatorStyle }))] }, group.id));
+        });
+    }, [
+        resolvedConfig,
+        isItemSelected,
+        handleItemClick,
+        toggleSubmenu,
+        checkboxIcon,
+        radioIcon,
+        selectedItems,
+        onChange,
+    ]);
+    return (jsxs(ContextMenu$1.Root, { disabled: disabled, children: [jsx(ContextMenu$1.Trigger, { onContextMenuCapture: onContextMenuCapture, style: { display: 'contents' }, children: children }), jsx(ContextMenu$1.Portal, { children: jsx(ContextMenu$1.Positioner, { children: jsx(ContextMenu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), style: style, "data-testid": testId, ...rest, children: menuItems }) }) })] }));
+}
+
+export { ContextMenu };
+//# sourceMappingURL=ContextMenu.js.map

package/dist/esm/components/navigation/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sources":["../../../../../../src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;AAcM;AAeJ;;AAMA;AACE;AACF;AAEA;;;AAGM;AACA;;AAkBF;;AAIE;;AA2BJ;AACF;;;;;;;;;AASC;AAED;AAuBF;;"}

package/dist/esm/components/navigation/ContextMenu/useContextMenuTarget.js

@@ -0,0 +1,53 @@
+"use client";
+import { useState, useCallback, useEffect } from 'react';
+
+function useContextMenuTarget(payload) {
+    const [context, setContext] = useState({
+        event: null,
+        target: null,
+        payload,
+    });
+    const [targetNode, setTargetNode] = useState(null);
+    const updateContext = useCallback((event, target) => {
+        setContext({
+            event,
+            target,
+            payload,
+        });
+    }, [payload]);
+    const onContextMenuCapture = useCallback((event) => {
+        const target = event.target instanceof HTMLElement
+            ? event.target
+            : event.currentTarget;
+        updateContext(event.nativeEvent, target);
+    }, [updateContext]);
+    const targetRef = useCallback((node) => {
+        setTargetNode(node);
+    }, []);
+    useEffect(() => {
+        if (!targetNode)
+            return;
+        const handleContextMenu = (event) => {
+            const target = event.target instanceof HTMLElement ? event.target : targetNode;
+            updateContext(event, target);
+        };
+        targetNode.addEventListener('contextmenu', handleContextMenu, true);
+        return () => {
+            targetNode.removeEventListener('contextmenu', handleContextMenu, true);
+        };
+    }, [targetNode, updateContext]);
+    useEffect(() => {
+        setContext(prev => ({
+            ...prev,
+            payload,
+        }));
+    }, [payload]);
+    return {
+        context,
+        onContextMenuCapture,
+        targetRef,
+    };
+}
+
+export { useContextMenuTarget };
+//# sourceMappingURL=useContextMenuTarget.js.map

package/dist/esm/components/navigation/ContextMenu/useContextMenuTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContextMenuTarget.js","sources":["../../../../../../src/components/navigation/ContextMenu/useContextMenuTarget.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AASM;AAGJ;AACE;AACA;;AAED;;;AAKG;;;;AAIC;AACH;AAIF;AAEI;;AAGI;AACJ;AACF;AAIF;;;;AAKE;;AAEA;AACE;AAEA;AACF;;AAGA;;AAEA;AACF;;AAGE;AACE;;AAED;AACH;;;;;;AAOF;;"}

package/dist/esm/components/navigation/Menu/Menu.css.js

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-DD0c5D10.css';
+
+var checkboxItemStyle = 'Menu_interactiveItemBase__1pkkb711';
+var chevronIconStyle = 'Menu_chevronIconStyle__1pkkb717';
+var iconContainerStyle = 'Menu_iconContainerStyle__1pkkb714';
+var iconHiddenStyle = 'Menu_iconHiddenStyle__1pkkb716';
+var iconVisibleStyle = 'Menu_iconVisibleStyle__1pkkb715';
+var menuContentStyle = 'Menu_menuContentStyle__1pkkb710';
+var menuItemContentStyle = 'Menu_menuItemContentStyle__1pkkb713';
+var menuItemDisabledStyle = 'Menu_menuItemDisabledStyle__1pkkb712';
+var menuItemStyle = 'Menu_interactiveItemBase__1pkkb711';
+var radioItemStyle = 'Menu_interactiveItemBase__1pkkb711';
+var separatorStyle = 'Menu_separatorStyle__1pkkb718';
+
+export { checkboxItemStyle, chevronIconStyle, iconContainerStyle, iconHiddenStyle, iconVisibleStyle, menuContentStyle, menuItemContentStyle, menuItemDisabledStyle, menuItemStyle, radioItemStyle, separatorStyle };
+//# sourceMappingURL=Menu.css.js.map

package/dist/esm/components/navigation/Menu/Menu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/esm/components/navigation/Menu/Menu.helpers.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Menu } from '@base-ui/react/menu';
+import '../../primitives/Icon/Icon.js';
+import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
+import { Text } from '../../primitives/Text/Text.js';
+import { Stack } from '../../layout/Stack/Stack.js';
+import { cx } from '../../../utils/cx.js';
+import { menuContentStyle, iconVisibleStyle, menuItemDisabledStyle, menuItemStyle, iconHiddenStyle, checkboxItemStyle, radioItemStyle, menuItemContentStyle, iconContainerStyle, chevronIconStyle } from './Menu.css.js';
+
+/**
+ * Helper function to render menu item content with consistent structure.
+ */
+const renderMenuItemContent = (item, iconSlot) => (jsxs("div", { className: menuItemContentStyle, children: [iconSlot && jsx("div", { className: iconContainerStyle, children: iconSlot }), jsxs(Stack, { direction: "row", justify: "space-between", align: "center", expand: true, children: [jsx(Text, { variant: "caption", size: "md", color: "primary", children: item.label }), item.subMenu && (jsx("div", { className: chevronIconStyle, children: jsx(ChevronUpIcon, { size: "sm" }) }))] })] }));
+/**
+ * Helper function to render a radio menu item.
+ */
+const renderRadioItem = (item, _group, isSelected, radioIcon, clickHandler) => (jsx(Menu.RadioItem, { value: item.id, disabled: item.disabled, onClick: clickHandler, className: cx(radioItemStyle, item.disabled && menuItemDisabledStyle), children: renderMenuItemContent(item, jsx(Menu.RadioItemIndicator, { children: jsx("div", { className: isSelected ? iconVisibleStyle : iconHiddenStyle, children: radioIcon }) })) }, item.id));
+/**
+ * Helper function to render a checkbox menu item.
+ */
+const renderCheckboxItem = (item, _group, isSelected, checkboxIcon, clickHandler) => (jsx(Menu.CheckboxItem, { checked: isSelected, disabled: item.disabled, onClick: clickHandler, className: cx(checkboxItemStyle, item.disabled && menuItemDisabledStyle), children: renderMenuItemContent(item, jsx(Menu.CheckboxItemIndicator, { children: jsx("div", { className: isSelected ? iconVisibleStyle : iconHiddenStyle, children: checkboxIcon }) })) }, item.id));
+/**
+ * Helper function to render a regular menu item without selection state.
+ */
+const renderRegularItem = (item, _group, clickHandler) => (jsx(Menu.Item, { disabled: item.disabled, onClick: clickHandler, className: cx(menuItemStyle, item.disabled && menuItemDisabledStyle), children: renderMenuItemContent(item, item.icon ? (jsx("div", { className: iconVisibleStyle, children: item.icon })) : undefined) }, item.id));
+/**
+ * Helper function to render a menu item based on group selection type.
+ */
+const renderMenuItem = (item, group, isSelected, checkboxIcon, radioIcon, clickHandler) => {
+    switch (group.itemSelectionType) {
+        case 'radio':
+            return renderRadioItem(item, group, isSelected, radioIcon, clickHandler);
+        case 'checkbox':
+            return renderCheckboxItem(item, group, isSelected, checkboxIcon, clickHandler);
+        case 'none':
+        default:
+            return renderRegularItem(item, group, clickHandler);
+    }
+};
+/**
+ * Helper function to render a menu item with optional submenu wrapper.
+ */
+const renderItemWithSubmenu = (item, group, isSelected, checkboxIcon, radioIcon, selectedItems, clickHandler, onChange, MenuComponent) => {
+    const menuItem = renderMenuItem(item, group, isSelected, checkboxIcon, radioIcon, clickHandler);
+    // If item has submenu, wrap it in submenu structure
+    if (item.subMenu) {
+        return (jsxs(Menu.Root, { children: [jsx(Menu.SubmenuTrigger, { children: menuItem }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { children: jsx(Menu.Popup, { className: menuContentStyle, children: jsx(MenuComponent, { isSubmenu: true, config: item.subMenu, selectedItems: selectedItems, onChange: onChange, checkboxIcon: checkboxIcon, radioIcon: radioIcon }) }) }) })] }, item.id));
+    }
+    return menuItem;
+};
+
+export { renderCheckboxItem, renderItemWithSubmenu, renderMenuItem, renderMenuItemContent, renderRadioItem, renderRegularItem };
+//# sourceMappingURL=Menu.helpers.js.map

package/dist/esm/components/navigation/Menu/Menu.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.helpers.js","sources":["../../../../../../src/components/navigation/Menu/Menu.helpers.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AA6BA;;AAEG;AACI;AAmBP;;AAEG;AACI;AAyBP;;AAEG;AACI;AAyBP;;AAEG;AACI;AAoBP;;AAEG;AACI;AAQL;AACE;AACE;AACF;AACE;AAOF;AACA;;;AAGJ;AAEA;;AAEG;;AAYD;;AAUA;AACE;;AAqBF;AACF;;"}

package/dist/esm/components/navigation/Menu/Menu.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { Menu as Menu$1 } from '@base-ui/react/menu';
+import '../../primitives/Icon/Icon.js';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { CircleIcon } from '../../Icons/CircleIcon.js';
+import { Button } from '../../primitives/Button/Button.js';
+import { Text } from '../../primitives/Text/Text.js';
+import { cx } from '../../../utils/cx.js';
+import { useMenu, createItemClickHandler } from './useMenu.js';
+import { renderItemWithSubmenu } from './Menu.helpers.js';
+import { separatorStyle, menuContentStyle } from './Menu.css.js';
+
+/**
+ * A configuration-driven menu component for editor interfaces.
+ *
+ * Automatically handles radio/checkbox selection states, grouping,
+ * and nested submenus based on provided configuration object.
+ *
+ * @example
+ * ```tsx
+ * const config = {
+ *   groups: [{
+ *     id: 'actions',
+ *     items: [
+ *       {
+ *         id: 'copy',
+ *         label: 'Copy',
+ *         onClick: handleCopy,
+ *         subMenu: nestedConfig,
+ *         submenuTrigger: 'hover' // Opens on hover (default)
+ *       },
+ *       {
+ *         id: 'paste',
+ *         label: 'Paste',
+ *         onClick: handlePaste,
+ *         subMenu: nestedConfig,
+ *         submenuTrigger: 'click' // Opens on click only
+ *       }
+ *     ],
+ *     itemSelectionType: 'none'
+ *   }]
+ * };
+ *
+ * <Menu config={config}>
+ *   <Button>Options</Button>
+ * </Menu>
+ * ```
+ */
+const Menu = ({ config, selectedItems = {}, onChange, children, checkboxIcon = jsx(CheckIcon, { size: "sm" }), radioIcon = jsx(CircleIcon, { size: "sm" }), disabled = false, className, isSubmenu = false, testId, ...rest }) => {
+    const { handleItemClick, isItemSelected, toggleSubmenu } = useMenu(selectedItems, onChange);
+    const menuItems = useMemo(() => {
+        return config.groups.map((group, groupIndex) => {
+            const items = group.items.map(item => {
+                const isSelected = isItemSelected(group.id, item.id);
+                const clickHandler = createItemClickHandler(item, group, handleItemClick, toggleSubmenu);
+                return renderItemWithSubmenu(item, group, isSelected, checkboxIcon, radioIcon, selectedItems, clickHandler, onChange, Menu);
+            });
+            const showSeparator = groupIndex < config.groups.length - 1 && config.groups.length > 1;
+            // Wrap group items with BaseMenu.Group structure
+            return (jsxs(React.Fragment, { children: [jsxs(Menu$1.Group, { children: [group.label && (jsx(Menu$1.GroupLabel, { children: jsx(Text, { variant: "caption", color: "muted", weight: "semibold", children: group.label }) })), group.itemSelectionType === 'radio' ? (jsx(Menu$1.RadioGroup, { value: selectedItems[group.id]?.[0] ?? '', children: items })) : (items)] }), showSeparator && jsx(Menu$1.Separator, { className: separatorStyle })] }, group.id));
+        });
+    }, [
+        config,
+        selectedItems,
+        isItemSelected,
+        handleItemClick,
+        toggleSubmenu,
+        checkboxIcon,
+        radioIcon,
+        onChange,
+    ]);
+    // For submenu, only render the content without root/trigger wrapper
+    if (isSubmenu) {
+        return jsx(Fragment, { children: menuItems });
+    }
+    return (jsxs(Menu$1.Root, { children: [jsx(Menu$1.Trigger, { render: props => jsx(Button, { ...props }), disabled: disabled, children: children }), jsx(Menu$1.Portal, { children: jsx(Menu$1.Positioner, { children: jsx(Menu$1.Popup, { className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: menuItems }) }) })] }));
+};
+
+export { Menu };
+//# sourceMappingURL=Menu.js.map

package/dist/esm/components/navigation/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../../../../src/components/navigation/Menu/Menu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;AACI;AAaL;AAKA;;;AAGM;AACA;;AAkBF;AAEA;;;AAyBF;AACF;;;;;;;;;AASC;;;;;AAOD;AAsBF;;"}

package/dist/esm/components/navigation/Menu/useMenu.js

@@ -0,0 +1,88 @@
+"use client";
+import React, { useCallback } from 'react';
+
+/**
+ * Hook for managing menu selection state and interactions.
+ * Handles radio/checkbox logic, state updates, and submenu visibility.
+ */
+const useMenu = (selectedItems = {}, onChange) => {
+    const [openSubmenus, setOpenSubmenus] = React.useState(new Set());
+    const handleItemClick = useCallback((groupId, itemId, group) => {
+        if (!onChange)
+            return;
+        const currentSelection = selectedItems[groupId] ?? [];
+        let newSelection;
+        switch (group.itemSelectionType) {
+            case 'radio':
+                // Radio: single selection, replace current
+                newSelection = [itemId];
+                break;
+            case 'checkbox':
+                // Checkbox: toggle selection
+                newSelection = currentSelection.includes(itemId)
+                    ? currentSelection.filter(id => id !== itemId)
+                    : [...currentSelection, itemId];
+                break;
+            case 'none':
+            default:
+                // No selection state management
+                return;
+        }
+        onChange({
+            ...selectedItems,
+            [groupId]: newSelection,
+        });
+    }, [selectedItems, onChange]);
+    const isItemSelected = useCallback((groupId, itemId) => {
+        return selectedItems[groupId]?.includes(itemId) ?? false;
+    }, [selectedItems]);
+    const toggleSubmenu = useCallback((itemId) => {
+        setOpenSubmenus(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(itemId)) {
+                newSet.delete(itemId);
+            }
+            else {
+                newSet.add(itemId);
+            }
+            return newSet;
+        });
+    }, []);
+    const openSubmenu = useCallback((itemId) => {
+        setOpenSubmenus(prev => new Set(prev).add(itemId));
+    }, []);
+    const closeSubmenu = useCallback((itemId) => {
+        setOpenSubmenus(prev => {
+            const newSet = new Set(prev);
+            newSet.delete(itemId);
+            return newSet;
+        });
+    }, []);
+    const isSubmenuOpen = useCallback((itemId) => {
+        return openSubmenus.has(itemId);
+    }, [openSubmenus]);
+    return {
+        handleItemClick,
+        isItemSelected,
+        toggleSubmenu,
+        openSubmenu,
+        closeSubmenu,
+        isSubmenuOpen,
+    };
+};
+/**
+ * Helper function to create a common click handler for menu items.
+ */
+const createItemClickHandler = (item, group, handleItemClick, toggleSubmenu) => (event) => {
+    // Call original onClick handler
+    item.onClick(item.id, event.nativeEvent);
+    // Handle submenu toggle for click trigger
+    if (item.subMenu && item.submenuTrigger === 'click') {
+        toggleSubmenu(item.id);
+    }
+    // Handle selection state
+    handleItemClick(group.id, item.id, group);
+};
+
+export { createItemClickHandler, useMenu };
+//# sourceMappingURL=useMenu.js.map

package/dist/esm/components/navigation/Menu/useMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenu.js","sources":["../../../../../../src/components/navigation/Menu/useMenu.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAMA;;;AAGG;AACI;AAIL;;AAMI;;;AAGA;AAEA;AACE;;AAEE;;AAEF;;AAEE;AACE;AACA;;AAEJ;AACA;;;;AAKF;AACE;;AAED;AACH;;;AAOA;AAIF;;AAEI;AACA;AACE;;;AAEA;;AAEF;AACF;;AAGF;AACE;;AAGF;;AAEI;AACA;AACA;AACF;;AAGF;AAEI;AACF;;;;;;;;;AAYJ;AAEA;;AAEG;AACI;;;;;AAiBD;;;;AAKJ;;"}

package/dist/esm/components/navigation/Tabs/Tab.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { useTabsContext } from './Tabs.js';
+import '../../primitives/Icon/Icon.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { cx } from '../../../utils/cx.js';
+import { vars } from '../../../theme/contract.css.js';
+import { tabIconStyle, tabCloseButtonStyle, tabRecipe, tabBaseStyle, tabEnclosedActiveVerticalStyle, tabEnclosedActiveHorizontalStyle, tabEnclosedInactiveStyle, tabEnclosedStyle, tabPillsActiveStyle, tabPillsInactiveStyle, tabPillsStyle, tabUnderlineActiveVerticalStyle, tabUnderlineActiveHorizontalStyle, tabUnderlineInactiveIndicatorStyle, tabUnderlineActiveStyle, tabUnderlineInactiveStyle, tabUnderlineStyle } from './Tabs.css.js';
+
+const TAB_SIZE_MAP = {
+    sm: { iconSize: 11 },
+    md: { iconSize: 13 },
+    lg: { iconSize: 15 },
+};
+// --- Helper to compute variant classes ---
+function getVariantClasses(variant, isActive, orientation) {
+    switch (variant) {
+        case 'underline':
+            return cx(tabUnderlineStyle, isActive ? tabUnderlineActiveStyle : tabUnderlineInactiveStyle, isActive
+                ? orientation === 'vertical'
+                    ? tabUnderlineActiveVerticalStyle
+                    : tabUnderlineActiveHorizontalStyle
+                : tabUnderlineInactiveIndicatorStyle);
+        case 'pills':
+            return cx(tabPillsStyle, isActive ? tabPillsActiveStyle : tabPillsInactiveStyle);
+        case 'enclosed':
+            return cx(tabEnclosedStyle, isActive
+                ? orientation === 'vertical'
+                    ? tabEnclosedActiveVerticalStyle
+                    : tabEnclosedActiveHorizontalStyle
+                : tabEnclosedInactiveStyle);
+        default:
+            return '';
+    }
+}
+// --- Component ---
+const Tab = ({ value, children, icon, disabled = false, closable = false, onClose, className, style, testId, ref, ...rest }) => {
+    const { activeValue, setActiveValue, variant, size, orientation, fullWidth, tabsId, } = useTabsContext();
+    const isActive = activeValue === value;
+    const sizeConfig = TAB_SIZE_MAP[size];
+    const closeIconSize = size === 'lg' ? 'md' : 'sm';
+    const tabId = `tabs-${tabsId}-tab-${value}`;
+    const panelId = `tabs-${tabsId}-panel-${value}`;
+    const handleClick = useCallback(() => {
+        if (!disabled) {
+            setActiveValue(value);
+        }
+    }, [disabled, setActiveValue, value]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!disabled) {
+                setActiveValue(value);
+            }
+        }
+        if (e.key === 'Delete' && closable && onClose) {
+            e.preventDefault();
+            onClose(value);
+        }
+    }, [disabled, setActiveValue, value, closable, onClose]);
+    const handleClose = useCallback((e) => {
+        e.stopPropagation();
+        onClose?.(value);
+    }, [onClose, value]);
+    const variantClasses = getVariantClasses(variant, isActive, orientation);
+    return (jsxs("button", { ref: ref, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": panelId, "aria-disabled": disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: handleClick, onKeyDown: handleKeyDown, className: cx(tabBaseStyle, tabRecipe({ size, disabled, fullWidth }), variantClasses, className), style: {
+            gap: vars.spacing.xs,
+            transition: `all ${vars.transitions.fast}`,
+            ...style,
+        }, "data-testid": testId, ...rest, children: [icon && (jsx("span", { className: tabIconStyle, style: {
+                    width: `${sizeConfig.iconSize}px`,
+                    height: `${sizeConfig.iconSize}px`,
+                }, children: icon })), children, closable && (jsx("span", { className: tabCloseButtonStyle, role: "button", "aria-label": `Close ${typeof children === 'string' ? children : value}`, onClick: handleClose, children: jsx(CloseIcon, { size: closeIconSize, decorative: true }) }))] }));
+};
+Tab.displayName = 'Tab';
+
+export { Tab };
+//# sourceMappingURL=Tab.js.map

package/dist/esm/components/navigation/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../../../../src/components/navigation/Tabs/Tab.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAkCA;AACE;AACA;AACA;;AAGF;AAEA;;AAMI;AACE;;AAKM;AACA;;AAGR;AACE;AAIF;AACE;;AAIM;AACA;;AAGR;AACE;;AAEN;AAEA;AAEO;AAaL;AASA;AACA;AACA;AAEA;AACA;AAEA;;;;;AAMA;AAEI;;;;;;;;;;AAUF;AAIF;;AAGI;AACF;;AAMF;AAmBM;AACA;AACA;AACD;AAQK;AACA;;AAmBZ;AAEA;;"}

package/dist/esm/components/navigation/Tabs/TabList.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import { useTabsContext } from './Tabs.js';
+import { cx } from '../../../utils/cx.js';
+import { tabListRecipe } from './Tabs.css.js';
+
+// --- Component ---
+const TabList = ({ children, className, style, testId, ref, ...rest }) => {
+    const { orientation, variant, pillsFrame } = useTabsContext();
+    const listRef = useRef(null);
+    const setListRef = useCallback((node) => {
+        listRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleKeyDown = useCallback((e) => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const tabs = Array.from(list.querySelectorAll('[role="tab"]'));
+        const currentIndex = tabs.indexOf(e.target);
+        if (currentIndex === -1)
+            return;
+        const isHorizontal = orientation === 'horizontal';
+        const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        let nextIndex = null;
+        switch (e.key) {
+            case nextKey:
+                e.preventDefault();
+                nextIndex = currentIndex + 1;
+                if (nextIndex >= tabs.length)
+                    nextIndex = 0;
+                break;
+            case prevKey:
+                e.preventDefault();
+                nextIndex = currentIndex - 1;
+                if (nextIndex < 0)
+                    nextIndex = tabs.length - 1;
+                break;
+            case 'Home':
+                e.preventDefault();
+                nextIndex = 0;
+                break;
+            case 'End':
+                e.preventDefault();
+                nextIndex = tabs.length - 1;
+                break;
+        }
+        if (nextIndex !== null) {
+            tabs[nextIndex]?.focus();
+        }
+    }, [orientation]);
+    return (jsx("div", { ref: setListRef, role: "tablist", "aria-orientation": orientation, className: cx(tabListRecipe({ orientation, variant, pillsFrame }), className), style: style, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: children }));
+};
+TabList.displayName = 'TabList';
+
+export { TabList };
+//# sourceMappingURL=TabList.js.map

package/dist/esm/components/navigation/Tabs/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sources":["../../../../../../src/components/navigation/Tabs/TabList.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA;;;AAWE;AAEA;AAEI;AACA;;;;AAGG;;AAEL;AAIF;AAEI;AACA;;AAEA;;;;AAMA;;;;AAMA;AACE;;AAEE;AACA;;;AAEF;;AAEE;;AACmB;;AAErB;;;;AAIA;;AAEE;;;AAIJ;AACE;;AAEJ;;AAqBJ;AAEA;;"}

package/dist/esm/components/navigation/Tabs/TabPanel.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useTabsContext } from './Tabs.js';
+import { cx } from '../../../utils/cx.js';
+import { tabPanelStyle } from './Tabs.css.js';
+
+// --- Component ---
+const TabPanel = ({ value, children, keepMounted = false, className, style, testId, ref, ...rest }) => {
+    const { activeValue, tabsId } = useTabsContext();
+    const isActive = activeValue === value;
+    const tabId = `tabs-${tabsId}-tab-${value}`;
+    const panelId = `tabs-${tabsId}-panel-${value}`;
+    if (!isActive && !keepMounted) {
+        return null;
+    }
+    return (jsx("div", { ref: ref, role: "tabpanel", id: panelId, "aria-labelledby": tabId, tabIndex: isActive ? 0 : -1, hidden: !isActive || undefined, className: cx(tabPanelStyle, className), style: {
+            ...style,
+            ...(isActive ? undefined : { display: 'none' }),
+        }, "data-testid": testId, ...rest, children: children }));
+};
+TabPanel.displayName = 'TabPanel';
+
+export { TabPanel };
+//# sourceMappingURL=TabPanel.js.map