entangle-ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,138 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+/**
+ * Calculate gap value based on spacing multiplier and theme
+ */
+const getGapValue = (spacing, theme, customGap) => {
+    if (customGap !== undefined) {
+        return typeof customGap === 'number' ? `${customGap}px` : customGap;
+    }
+    return `${spacing * theme.spacing.sm}px`;
+};
+const StyledStack = styled.div `
+  /* Base stack container */
+  display: flex;
+  box-sizing: border-box;
+
+  /* Flex properties */
+  flex-direction: ${props => props.$direction};
+  flex-wrap: ${props => props.$wrap};
+  justify-content: ${props => props.$justify};
+  align-items: ${props => props.$align};
+
+  /* Gap between items */
+  gap: ${props => getGapValue(props.$spacing, props.theme, props.$customGap)};
+
+  /* Expand behavior based on direction */
+  ${props => props.$expand && props.$direction === 'row' && 'width: 100%;'}
+  ${props => props.$expand && props.$direction === 'column' && 'height: 100%;'}
+  
+  /* Responsive direction changes */
+  ${props => props.$sm &&
+    `
+    @media (min-width: 576px) {
+      flex-direction: ${props.$sm};
+      ${props.$expand && props.$sm === 'row' ? 'width: 100%; height: auto;' : ''}
+      ${props.$expand && props.$sm === 'column' ? 'height: 100%; width: auto;' : ''}
+    }
+  `}
+  
+  ${props => props.$md &&
+    `
+    @media (min-width: 768px) {
+      flex-direction: ${props.$md};
+      ${props.$expand && props.$md === 'row' ? 'width: 100%; height: auto;' : ''}
+      ${props.$expand && props.$md === 'column' ? 'height: 100%; width: auto;' : ''}
+    }
+  `}
+  
+  ${props => props.$lg &&
+    `
+    @media (min-width: 992px) {
+      flex-direction: ${props.$lg};
+      ${props.$expand && props.$lg === 'row' ? 'width: 100%; height: auto;' : ''}
+      ${props.$expand && props.$lg === 'column' ? 'height: 100%; width: auto;' : ''}
+    }
+  `}
+  
+  ${props => props.$xl &&
+    `
+    @media (min-width: 1200px) {
+      flex-direction: ${props.$xl};
+      ${props.$expand && props.$xl === 'row' ? 'width: 100%; height: auto;' : ''}
+      ${props.$expand && props.$xl === 'column' ? 'height: 100%; width: auto;' : ''}
+    }
+  `}
+
+  /* Custom CSS */
+  ${props => processCss(props.$css, props.theme)}
+`;
+/**
+ * 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, css, style, ref, ...htmlProps }) => {
+    return (jsx(StyledStack, { ref: ref, className: className, "$direction": direction, "$sm": sm, "$md": md, "$lg": lg, "$xl": xl, "$wrap": wrap, "$expand": expand, "$spacing": spacing, "$customGap": customGap, "$justify": justify, "$align": align, "$css": css, "data-testid": testId, style: style, ...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":["_jsx"],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { ContextMenu as ContextMenu$1 } from '@base-ui-components/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 { Menu } from '../Menu/Menu.js';
+import { useMenu, createItemClickHandler } from '../Menu/useMenu.js';
+import { renderItemWithSubmenu } from '../Menu/Menu.helpers.js';
+import { StyledSeparator, StyledMenuContent } from '../Menu/Menu.styled.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(StyledSeparator, {})] }, 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(StyledMenuContent, { ref: ref, className: 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":["_jsx","_jsxs","BaseContextMenu"],"mappings":"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"}

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

@@ -0,0 +1,52 @@
+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":";;AAOM,SAAU,oBAAoB,CAClC,OAAkB,EAAA;AAElB,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqC;AACzE,QAAA,KAAK,EAAE,IAAI;AACX,QAAA,MAAM,EAAE,IAAI;QACZ,OAAO;AACR,KAAA,CAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC;IAEtE,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAiB,EAAE,MAA0B,KAAI;AAChD,QAAA,UAAU,CAAC;YACT,KAAK;YACL,MAAM;YACN,OAAO;AACR,SAAA,CAAC;AACJ,KAAC,EACD,CAAC,OAAO,CAAC,CACV;AAED,IAAA,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,KAAoC,KAAI;AACvC,QAAA,MAAM,MAAM,GACV,KAAK,CAAC,MAAM,YAAY;cACpB,KAAK,CAAC;AACR,cAAE,KAAK,CAAC,aAAa;AACzB,QAAA,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC;AAC1C,KAAC,EACD,CAAC,aAAa,CAAC,CAChB;AAED,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,IAAwB,KAAI;QACzD,aAAa,CAAC,IAAI,CAAC;KACpB,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,UAAU;YAAE;AAEjB,QAAA,MAAM,iBAAiB,GAAG,CAAC,KAAiB,KAAI;AAC9C,YAAA,MAAM,MAAM,GACV,KAAK,CAAC,MAAM,YAAY,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,UAAU;AACjE,YAAA,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC;AAC9B,SAAC;QAED,UAAU,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC;AACnE,QAAA,OAAO,MAAK;YACV,UAAU,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC;AACxE,SAAC;AACH,KAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;IAE/B,SAAS,CAAC,MAAK;AACb,QAAA,UAAU,CAAC,IAAI,KAAK;AAClB,YAAA,GAAG,IAAI;YACP,OAAO;AACR,SAAA,CAAC,CAAC;AACL,KAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,OAAO;QACL,OAAO;QACP,oBAAoB;QACpB,SAAS;KACV;AACH;;;;"}

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

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Menu } from '@base-ui-components/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 { StyledMenuContent, StyledMenuItem, StyledIcon, StyledCheckboxItem, StyledRadioItem, StyledMenuItemContent, StyledIconContainer, StyledChevronIcon } from './Menu.styled.js';
+
+/**
+ * Helper function to render menu item content with consistent structure.
+ */
+const renderMenuItemContent = (item, iconSlot) => (jsxs(StyledMenuItemContent, { children: [iconSlot && jsx(StyledIconContainer, { 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(StyledChevronIcon, { children: jsx(ChevronUpIcon, { size: "sm" }) }))] })] }));
+/**
+ * Helper function to render a radio menu item.
+ */
+const renderRadioItem = (item, _group, isSelected, radioIcon, clickHandler) => (jsx(StyledRadioItem, { value: item.id, disabled: item.disabled, onClick: clickHandler, children: renderMenuItemContent(item, jsx(Menu.RadioItemIndicator, { children: jsx(StyledIcon, { "$visible": isSelected, children: radioIcon }) })) }, item.id));
+/**
+ * Helper function to render a checkbox menu item.
+ */
+const renderCheckboxItem = (item, _group, isSelected, checkboxIcon, clickHandler) => (jsx(StyledCheckboxItem, { checked: isSelected, disabled: item.disabled, onClick: clickHandler, children: renderMenuItemContent(item, jsx(Menu.CheckboxItemIndicator, { children: jsx(StyledIcon, { "$visible": isSelected, children: checkboxIcon }) })) }, item.id));
+/**
+ * Helper function to render a regular menu item without selection state.
+ */
+const renderRegularItem = (item, _group, clickHandler) => (jsx(StyledMenuItem, { disabled: item.disabled, onClick: clickHandler, children: renderMenuItemContent(item, item.icon ? (jsx(StyledIcon, { "$visible": true, 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, { openOnHover: item.submenuTrigger !== 'click', children: [jsx(Menu.SubmenuTrigger, { children: menuItem }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { children: jsx(StyledMenuContent, { 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":["_jsxs","_jsx","BaseMenu"],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useMemo } from 'react';
+import { Menu as Menu$1 } from '@base-ui-components/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 { useMenu, createItemClickHandler } from './useMenu.js';
+import { renderItemWithSubmenu } from './Menu.helpers.js';
+import { StyledSeparator, StyledMenuContent } from './Menu.styled.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(StyledSeparator, {})] }, 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, { openOnHover: config.openOnHover, 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(StyledMenuContent, { className: 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":["_jsx","_jsxs","BaseMenu","_Fragment"],"mappings":"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"}

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

@@ -0,0 +1,83 @@
+import { Menu } from '@base-ui-components/react/menu';
+import styled from '@emotion/styled';
+
+const StyledMenuContent = styled(Menu.Popup) `
+  min-width: 200px;
+  background: ${props => props.theme.colors.background.elevated};
+  border: 1px solid ${props => props.theme.colors.border.default};
+  border-radius: ${props => props.theme.borderRadius.md}px;
+  box-shadow: ${props => props.theme.shadows.md};
+  padding: ${props => props.theme.spacing.sm}px;
+  z-index: ${props => props.theme.zIndex.dropdown};
+  outline: none;
+`;
+/** Shared styles for interactive menu items */
+const interactiveItemStyles = (props) => `
+  display: flex;
+  align-items: center;
+  padding: ${props.theme.spacing.sm}px;
+  border-radius: ${props.theme.borderRadius.sm}px;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+
+  color: ${props.disabled
+    ? props.theme.colors.text.disabled
+    : props.theme.colors.text.primary};
+
+  ${props.disabled
+    ? `
+    cursor: not-allowed;
+    pointer-events: none;
+  `
+    : ''}
+
+  &[data-highlighted] {
+    background: ${props.theme.colors.surface.hover};
+  }
+`;
+const StyledMenuItem = styled(Menu.Item) `
+  ${props => interactiveItemStyles(props)}
+`;
+const StyledRadioItem = styled(Menu.RadioItem) `
+  ${props => interactiveItemStyles(props)}
+`;
+const StyledCheckboxItem = styled(Menu.CheckboxItem) `
+  ${props => interactiveItemStyles(props)}
+`;
+const StyledMenuItemContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${props => props.theme.spacing.sm}px;
+  flex: 1;
+  min-height: 20px;
+`;
+const StyledIconContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+`;
+const StyledIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: ${props => (props.$visible ? 'visible' : 'hidden')};
+`;
+const StyledChevronIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${props => props.theme.spacing.sm}px;
+  transform: rotate(90deg);
+  color: ${props => props.theme.colors.text.muted};
+`;
+const StyledSeparator = styled(Menu.Separator) `
+  margin: ${props => props.theme.spacing.xs}px 0;
+  border-top: 1px solid ${props => props.theme.colors.border.default};
+`;
+
+export { StyledCheckboxItem, StyledChevronIcon, StyledIcon, StyledIconContainer, StyledMenuContent, StyledMenuItem, StyledMenuItemContent, StyledRadioItem, StyledSeparator };
+//# sourceMappingURL=Menu.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.styled.js","sources":["../../../../../../src/components/navigation/Menu/Menu.styled.ts"],"sourcesContent":[null],"names":["BaseMenu"],"mappings":";;;AAmBa,MAAA,iBAAiB,GAAG,MAAM,CAACA,IAAQ,CAAC,KAAK,CAAC,CAAmB;;gBAE1D,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAA;sBACzC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;mBAC7C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;gBACvC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;aAClC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;aAC/B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAA;;;AAIjD;AACA,MAAM,qBAAqB,GAAG,CAC5B,KAA6C,KAC1C;;;AAGQ,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;AAChB,iBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;;;;;AAM1C,SAAA,EAAA,KAAK,CAAC;MACF,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;MACxB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAC9B,CAAA;;AAGE,EAAA,EAAA,KAAK,CAAC;AACJ,MAAE;;;AAGL,EAAA;AACG,MAAE,EACN;;;AAGgB,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;;CAEjD;AAEY,MAAA,cAAc,GAAG,MAAM,CAACA,IAAQ,CAAC,IAAI,CAAC,CAElD;AACG,EAAA,EAAA,KAAK,IACL,qBAAqB,CAAC,KAA+C,CAAC;;AAG7D,MAAA,eAAe,GAAG,MAAM,CAACA,IAAQ,CAAC,SAAS,CAAC,CAExD;AACG,EAAA,EAAA,KAAK,IACL,qBAAqB,CAAC,KAA+C,CAAC;;AAG7D,MAAA,kBAAkB,GAAG,MAAM,CAACA,IAAQ,CAAC,YAAY,CAAC,CAE9D;AACG,EAAA,EAAA,KAAK,IACL,qBAAqB,CAAC,KAA+C,CAAC;;AAG7D,MAAA,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGtC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;;AAK3B,MAAA,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAmB;;;;;;;;AASnD,MAAA,UAAU,GAAG,MAAM,CAAC,GAAG,CAAiB;;;;AAIrC,cAAA,EAAA,KAAK,KAAK,KAAK,CAAC,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAA;;AAGnD,MAAA,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAmB;;;;iBAI7C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;WAErC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;;AAGpC,MAAA,eAAe,GAAG,MAAM,CAACA,IAAQ,CAAC,SAAS,CAAC,CAAmB;YAChE,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;0BACjB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;;;;;"}

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

@@ -0,0 +1,87 @@
+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":"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"}