entangle-ui 0.8.2 → 0.10.0

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAcH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAsBJ;AAGF;;"}
+{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAeH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAuBJ;AAGF;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbSeparator.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbSeparator.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;;;;;;AAOG;;AAED;AAEI;AAYF;AAGJ;;"}
+{"version":3,"file":"BreadcrumbSeparator.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbSeparator.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUA;;;;;;;AAOG;;AAED;AAEI;AAYF;AAGJ;;"}

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

@@ -14,22 +14,27 @@ import '../../Icons/ChevronDownIcon.js';
 import '../../Icons/ChevronUpIcon.js';
 import '../../Icons/ClockIcon.js';
 import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
 import '../../Icons/CodeIcon.js';
 import '../../Icons/CopyIcon.js';
 import '../../Icons/CutIcon.js';
 import '../../Icons/DownloadIcon.js';
 import '../../Icons/EditIcon.js';
 import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
 import '../../Icons/EyeDropperIcon.js';
 import '../../Icons/EyeIcon.js';
 import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
 import '../../Icons/FolderIcon.js';
 import '../../Icons/FullscreenIcon.js';
 import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
+import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
 import '../../Icons/ListIcon.js';
 import '../../Icons/LockIcon.js';
@@ -50,6 +55,7 @@ import '../../Icons/SuccessIcon.js';
 import '../../Icons/TagIcon.js';
 import '../../Icons/TrashIcon.js';
 import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
 import '../../Icons/UnlockIcon.js';
 import '../../Icons/UploadIcon.js';
 import '../../Icons/UserIcon.js';
@@ -85,8 +91,8 @@ import '../../Icons/PinIcon.js';
 import { cx } from '../../../utils/cx.js';
 import { BreadcrumbEllipsis } from './BreadcrumbEllipsis.js';
 import { BreadcrumbItem } from './BreadcrumbItem.js';
-import { BreadcrumbSeparator } from './BreadcrumbSeparator.js';
 import { breadcrumbsListRecipe, breadcrumbsRootRecipe } from './Breadcrumbs.css.js';
+import { BreadcrumbSeparator } from './BreadcrumbSeparator.js';
 
 function isComponentElement(child, component) {
     return React.isValidElement(child) && child.type === component;
@@ -149,7 +155,11 @@ const Breadcrumbs = /*#__PURE__*/ React.memo(({ separator = jsx(ArrowRightIcon,
             .join(' / ');
         const collapsedTrail = [
             ...visibleBefore,
-            jsx(BreadcrumbEllipsis, { onClick: expandable ? () => setExpanded(true) : undefined, tooltip: collapsedLabels || undefined }, "breadcrumb-ellipsis"),
+            jsx(BreadcrumbEllipsis, { onClick: expandable
+                    ? () => {
+                        setExpanded(true);
+                    }
+                    : undefined, tooltip: collapsedLabels || undefined }, "breadcrumb-ellipsis"),
             ...visibleAfter,
         ];
         return withSeparators(collapsedTrail, separator);

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;;AAMA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;AACA;;;;;AAWA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}

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

@@ -1,46 +1,52 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
-import { CheckIcon } from '../../Icons/CheckIcon.js';
-import { CircleIcon } from '../../Icons/CircleIcon.js';
-import { Text } from '../../primitives/Text/Text.js';
+import React from 'react';
+import { menuContentStyle } from '../Menu/Menu.css.js';
+import { MenuGapContext, DEFAULT_MENU_GAP } from '../Menu/MenuGapContext.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 }) }) })] }));
-}
+/**
+ * Right-click context menu, built on `@base-ui/react` ContextMenu primitives.
+ *
+ * Compose the trigger area and content as children. Reuse the shared `Menu.*`
+ * primitives for items, or pass a fully custom panel into
+ * `ContextMenu.Content`. Define separate menus per area by giving each area its
+ * own `ContextMenu`.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenu.Trigger>
+ *     <div className="viewport">Right-click me</div>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <Menu.Item icon={<CutIcon />} shortcut="⌘X">Cut</Menu.Item>
+ *     <Menu.Item icon={<CopyIcon />} shortcut="⌘C">Copy</Menu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu>
+ * ```
+ */
+const ContextMenuRoot = ({ children, open, defaultOpen, onOpenChange, disabled, gap = DEFAULT_MENU_GAP, ref, }) => {
+    const actionsRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({ close: () => actionsRef.current?.close() }), []);
+    return (jsx(MenuGapContext.Provider, { value: gap, children: jsx(ContextMenu$1.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, disabled: disabled, actionsRef: actionsRef, children: children }) }));
+};
+ContextMenuRoot.displayName = 'ContextMenu';
+const ContextMenuTrigger = ({ children, render, className, style, testId, ref, ...rest }) => (jsx(ContextMenu$1.Trigger, { ref: ref, render: render, className: className, 
+    // With `render`, the user's element is the trigger, so no wrapper is
+    // needed; otherwise wrap so the trigger is transparent to layout.
+    style: render ? style : { display: 'contents', ...style }, "data-testid": testId, ...rest, children: render ? undefined : children }));
+ContextMenuTrigger.displayName = 'ContextMenu.Trigger';
+const ContextMenuContent = ({ children, className, testId, ref, ...rest }) => (jsx(ContextMenu$1.Portal, { children: jsx(ContextMenu$1.Positioner, { children: jsx(ContextMenu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: children }) }) }));
+ContextMenuContent.displayName = 'ContextMenu.Content';
+/**
+ * Compound ContextMenu API. Items reuse the shared `Menu.*` primitives.
+ */
+const ContextMenu = /*#__PURE__*/ Object.assign(ContextMenuRoot, {
+    Trigger: ContextMenuTrigger,
+    Content: ContextMenuContent,
+});
 
 export { ContextMenu };
 //# sourceMappingURL=ContextMenu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../../../../src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AAeM;AAeJ;;AAMA;AACE;AACF;AAEA;;;AAGM;AACA;;AAkBF;;AAIE;;AA2BJ;AACF;;;;;;;;;AASC;AAED;AAuBF;;"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../../../../src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH;;;AAeE;AAaF;AACA;AAEA;;;AAeI;AAOJ;AAEA;AAoBA;AAEA;;AAEG;AACI;AACL;AACA;AACD;;"}

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

@@ -1,16 +1,13 @@
-import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-DD0c5D10.css';
+import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-B5iVe5S2.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 groupLabelStyle = 'Menu_groupLabelStyle__1pkkb716';
+var itemEndSlotStyle = 'Menu_itemEndSlotStyle__1pkkb714';
+var itemLabelStyle = 'Menu_itemLabelStyle__1pkkb713';
+var itemStartSlotStyle = 'Menu_itemStartSlotStyle__1pkkb712';
 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';
+var menuItemStyle = 'Menu_menuItemStyle__1pkkb711';
+var separatorStyle = 'Menu_separatorStyle__1pkkb717';
+var shortcutStyle = 'Menu_shortcutStyle__1pkkb715';
 
-export { checkboxItemStyle, chevronIconStyle, iconContainerStyle, iconHiddenStyle, iconVisibleStyle, menuContentStyle, menuItemContentStyle, menuItemDisabledStyle, menuItemStyle, radioItemStyle, separatorStyle };
+export { groupLabelStyle, itemEndSlotStyle, itemLabelStyle, itemStartSlotStyle, menuContentStyle, menuItemStyle, separatorStyle, shortcutStyle };
 //# sourceMappingURL=Menu.css.js.map

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

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

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

@@ -1,81 +1,115 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Menu as Menu$1 } from '@base-ui/react/menu';
+import React from 'react';
 import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
 import { CircleIcon } from '../../Icons/CircleIcon.js';
 import { Button } from '../../primitives/Button/Button.js';
-import { Text } from '../../primitives/Text/Text.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.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';
+import { menuItemStyle, separatorStyle, itemStartSlotStyle, itemLabelStyle, itemEndSlotStyle, shortcutStyle, menuContentStyle, groupLabelStyle } from './Menu.css.js';
+import { MenuGapContext, DEFAULT_MENU_GAP } from './MenuGapContext.js';
 
 /**
- * A configuration-driven menu component for editor interfaces.
- *
- * Automatically handles radio/checkbox selection states, grouping,
- * and nested submenus based on provided configuration object.
+ * Internal three-slot row used by every interactive menu entry.
+ */
+const ItemLayout = ({ start, children, shortcut, endContent, }) => (jsxs(Fragment, { children: [start != null && jsx("span", { className: itemStartSlotStyle, children: start }), jsx("span", { className: itemLabelStyle, children: children }), (shortcut != null || endContent != null) && (jsxs("span", { className: itemEndSlotStyle, children: [shortcut != null && jsx("span", { className: shortcutStyle, children: shortcut }), endContent] }))] }));
+/**
+ * Merge `onClick` and its `onSelect` alias into one stable handler so a new
+ * function identity isn't handed to Base UI on every render. Returns
+ * `undefined` when neither is set, so no listener is attached.
+ */
+const useActivate = (onClick, onSelect) => {
+    const handlersRef = useLatest({ onClick, onSelect });
+    const handleActivate = React.useCallback(event => {
+        handlersRef.current.onClick?.(event);
+        handlersRef.current.onSelect?.(event);
+    }, [handlersRef]);
+    return onClick || onSelect ? handleActivate : undefined;
+};
+/**
+ * Composable menu for editor interfaces, built on `@base-ui/react` Menu
+ * primitives. Compose the trigger, content and items as children — no config
+ * 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>
+ *   <Menu.Trigger>File</Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item icon={<SaveIcon />} shortcut="⌘S" onClick={save}>
+ *       Save
+ *     </Menu.Item>
+ *     <Menu.Separator />
+ *     <Menu.Sub>
+ *       <Menu.SubTrigger>Export</Menu.SubTrigger>
+ *       <Menu.SubContent>
+ *         <Menu.Item>PNG</Menu.Item>
+ *         <Menu.Item>SVG</Menu.Item>
+ *       </Menu.SubContent>
+ *     </Menu.Sub>
+ *   </Menu.Content>
  * </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 }) }) })] }));
+const MenuRoot = ({ children, open, defaultOpen, onOpenChange, modal, disabled, gap = DEFAULT_MENU_GAP, ref, }) => {
+    const actionsRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({ close: () => actionsRef.current?.close() }), []);
+    return (jsx(MenuGapContext.Provider, { value: gap, children: jsx(Menu$1.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, modal: modal, disabled: disabled, actionsRef: actionsRef, children: children }) }));
+};
+MenuRoot.displayName = 'Menu';
+const MenuTrigger = ({ children, render, disabled, openOnHover, className, testId, ...rest }) => (jsx(Menu$1.Trigger, { render: render ?? jsx(Button, {}), disabled: disabled, openOnHover: openOnHover, className: className, "data-testid": testId, ...rest, children: children }));
+MenuTrigger.displayName = 'Menu.Trigger';
+const MenuContent = ({ children, className, side, align = 'start', sideOffset, alignOffset, testId, ref, ...rest }) => {
+    const gap = React.useContext(MenuGapContext);
+    return (jsx(Menu$1.Portal, { children: jsx(Menu$1.Positioner, { side: side, align: align, sideOffset: sideOffset ?? gap, alignOffset: alignOffset, children: jsx(Menu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: children }) }) }));
 };
+MenuContent.displayName = 'Menu.Content';
+const MenuItem = React.memo(({ children, icon, shortcut, endContent, disabled, closeOnClick = true, onClick, onSelect, className, testId, ref, ...rest }) => {
+    const handleActivate = useActivate(onClick, onSelect);
+    return (jsx(Menu$1.Item, { ref: ref, disabled: disabled, closeOnClick: closeOnClick, onClick: handleActivate, className: cx(menuItemStyle, className), "data-testid": testId, ...rest, children: jsx(ItemLayout, { start: icon, shortcut: shortcut, endContent: endContent, children: children }) }));
+});
+MenuItem.displayName = 'Menu.Item';
+const MenuGroup = ({ children, label, className, testId, ...rest }) => (jsxs(Menu$1.Group, { className: className, "data-testid": testId, ...rest, children: [label != null && (jsx(Menu$1.GroupLabel, { className: groupLabelStyle, children: label })), children] }));
+MenuGroup.displayName = 'Menu.Group';
+const MenuSeparator = React.memo(({ className, testId, ...rest }) => (jsx(Menu$1.Separator, { className: cx(separatorStyle, className), "data-testid": testId, ...rest })));
+MenuSeparator.displayName = 'Menu.Separator';
+const MenuRadioGroup = ({ children, value, defaultValue, onValueChange, className, testId, ...rest }) => (jsx(Menu$1.RadioGroup, { value: value, defaultValue: defaultValue, onValueChange: onValueChange, className: className, "data-testid": testId, ...rest, children: children }));
+MenuRadioGroup.displayName = 'Menu.RadioGroup';
+const MenuRadioItem = React.memo(({ children, value, indicator = jsx(CircleIcon, { size: "sm" }), shortcut, endContent, disabled, closeOnClick = false, onClick, onSelect, className, testId, ref, ...rest }) => {
+    const handleActivate = useActivate(onClick, onSelect);
+    return (jsx(Menu$1.RadioItem, { ref: ref, value: value, disabled: disabled, closeOnClick: closeOnClick, onClick: handleActivate, className: cx(menuItemStyle, className), "data-testid": testId, ...rest, children: jsx(ItemLayout, { start: jsx(Menu$1.RadioItemIndicator, { children: indicator }), shortcut: shortcut, endContent: endContent, children: children }) }));
+});
+MenuRadioItem.displayName = 'Menu.RadioItem';
+const MenuCheckboxItem = React.memo(({ children, checked, defaultChecked, onCheckedChange, indicator = jsx(CheckIcon, { size: "sm" }), shortcut, endContent, disabled, closeOnClick = false, onClick, onSelect, className, testId, ref, ...rest }) => {
+    const handleActivate = useActivate(onClick, onSelect);
+    return (jsx(Menu$1.CheckboxItem, { ref: ref, checked: checked, defaultChecked: defaultChecked, onCheckedChange: onCheckedChange, disabled: disabled, closeOnClick: closeOnClick, onClick: handleActivate, className: cx(menuItemStyle, className), "data-testid": testId, ...rest, children: jsx(ItemLayout, { start: jsx(Menu$1.CheckboxItemIndicator, { children: indicator }), shortcut: shortcut, endContent: endContent, children: children }) }));
+});
+MenuCheckboxItem.displayName = 'Menu.CheckboxItem';
+const MenuSub = ({ children, defaultOpen, }) => (jsx(Menu$1.SubmenuRoot, { defaultOpen: defaultOpen, children: children }));
+MenuSub.displayName = 'Menu.Sub';
+const MenuSubTrigger = React.memo(({ children, icon, disabled, onClick, className, testId, ref, ...rest }) => (jsx(Menu$1.SubmenuTrigger, { ref: ref, disabled: disabled, onClick: onClick, className: cx(menuItemStyle, className), "data-testid": testId, ...rest, children: jsx(ItemLayout, { start: icon, endContent: jsx(ChevronRightIcon, { size: "sm" }), children: children }) })));
+MenuSubTrigger.displayName = 'Menu.SubTrigger';
+/**
+ * Compound Menu API.
+ *
+ * `Content` and `SubContent` are the same popup surface. The gap from the
+ * anchor is set once on the `Menu` root (`gap` prop) and inherited by both.
+ */
+const Menu = /*#__PURE__*/ Object.assign(MenuRoot, {
+    Trigger: MenuTrigger,
+    Content: MenuContent,
+    Item: MenuItem,
+    Group: MenuGroup,
+    Separator: MenuSeparator,
+    RadioGroup: MenuRadioGroup,
+    RadioItem: MenuRadioItem,
+    CheckboxItem: MenuCheckboxItem,
+    Sub: MenuSub,
+    SubTrigger: MenuSubTrigger,
+    SubContent: MenuContent,
+});
 
 export { Menu };
 //# sourceMappingURL=Menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../../../src/components/navigation/Menu/Menu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;AACI;AAaL;AAKA;;;AAGM;AACA;;AAkBF;AAEA;;;AAyBF;AACF;;;;;;;;;AASC;;;;;AAOD;AAsBF;;"}
+{"version":3,"file":"Menu.js","sources":["../../../../../../src/components/navigation/Menu/Menu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAuCA;;AAEG;AACH;AAuBA;;;;AAIG;AACH;;;;;AAWI;;AAIJ;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACH;;;AAgBE;AAcF;AACA;AAEA;AAoBA;AAEA;;;AA+BA;AACA;AAEA;;;AA+BE;AAEF;AAEA;AAgBA;AAEA;AASA;AAEA;AAoBA;AAEA;;AAiBI;AAwBF;AAEF;AAEA;;AAmBI;AA0BF;AAEF;AAEA;AAQA;AAEA;AAyBA;AAEA;;;;;AAKG;AACI;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}

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

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+
+/**
+ * Default gap, in px, between a menu (or submenu) popup and its anchor.
+ * Mirrors the spacing scale (`vars.spacing.md`); floating-ui needs a number,
+ * so it can't read the CSS token directly.
+ */
+const DEFAULT_MENU_GAP = 8;
+/**
+ * Menu-wide popup gap. Provided once by the `Menu` / `ContextMenu` root and
+ * consumed by `Menu.Content` and `Menu.SubContent` as their default
+ * `sideOffset`, so the spacing is defined for the whole menu rather than
+ * per submenu.
+ */
+const MenuGapContext = 
+/*#__PURE__*/ createContext(DEFAULT_MENU_GAP);
+
+export { DEFAULT_MENU_GAP, MenuGapContext };
+//# sourceMappingURL=MenuGapContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuGapContext.js","sources":["../../../../../../src/components/navigation/Menu/MenuGapContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,MAAM,gBAAgB,GAAG;AAEhC;;;;;AAKG;MACU,cAAc;AACzB,cAAc,aAAa,CAAS,gBAAgB;;;;"}

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

@@ -0,0 +1,12 @@
+import './../../../assets/src/components/navigation/Pagination/Pagination.css.ts.vanilla-CmlFyyjh.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var paginationButtonRecipe = createRuntimeFn({defaultClassName:'Pagination_paginationButtonRecipe__17bx4kb6',variantClassNames:{size:{sm:'Pagination_paginationButtonRecipe_size_sm__17bx4kb7',md:'Pagination_paginationButtonRecipe_size_md__17bx4kb8',lg:'Pagination_paginationButtonRecipe_size_lg__17bx4kb9'},selected:{true:'Pagination_paginationButtonRecipe_selected_true__17bx4kba'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var paginationEllipsisRecipe = createRuntimeFn({defaultClassName:'Pagination_paginationEllipsisRecipe__17bx4kbb',variantClassNames:{size:{sm:'Pagination_paginationEllipsisRecipe_size_sm__17bx4kbc',md:'Pagination_paginationEllipsisRecipe_size_md__17bx4kbd',lg:'Pagination_paginationEllipsisRecipe_size_lg__17bx4kbe'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var paginationIconStyle = 'Pagination_paginationIconStyle__17bx4kbf';
+var paginationItemStyle = 'Pagination_paginationItemStyle__17bx4kb5';
+var paginationListRecipe = createRuntimeFn({defaultClassName:'Pagination_paginationListRecipe__17bx4kb1',variantClassNames:{size:{sm:'Pagination_paginationListRecipe_size_sm__17bx4kb2',md:'Pagination_paginationListRecipe_size_md__17bx4kb3',lg:'Pagination_paginationListRecipe_size_lg__17bx4kb4'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var paginationRootStyle = 'Pagination_paginationRootStyle__17bx4kb0';
+
+export { paginationButtonRecipe, paginationEllipsisRecipe, paginationIconStyle, paginationItemStyle, paginationListRecipe, paginationRootStyle };
+//# sourceMappingURL=Pagination.css.js.map

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

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

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

@@ -0,0 +1,107 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { ChevronLeftIcon } from '../../Icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
+import { FirstIcon } from '../../Icons/FirstIcon.js';
+import { LastIcon } from '../../Icons/LastIcon.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { cx } from '../../../utils/cx.js';
+import { paginationItemStyle, paginationEllipsisRecipe, paginationButtonRecipe, paginationListRecipe, paginationRootStyle, paginationIconStyle } from './Pagination.css.js';
+import { usePaginationItems } from './usePagination.js';
+
+const defaultGetItemAriaLabel = (type, page, selected) => {
+    switch (type) {
+        case 'first':
+            return 'Go to first page';
+        case 'last':
+            return 'Go to last page';
+        case 'previous':
+            return 'Go to previous page';
+        case 'next':
+            return 'Go to next page';
+        case 'ellipsis':
+            return 'More pages';
+        case 'page':
+        default:
+            return selected ? `page ${String(page)}` : `Go to page ${String(page)}`;
+    }
+};
+function renderItemContent(type, page) {
+    switch (type) {
+        case 'first':
+            return jsx(FirstIcon, { className: paginationIconStyle });
+        case 'last':
+            return jsx(LastIcon, { className: paginationIconStyle });
+        case 'previous':
+            return jsx(ChevronLeftIcon, { className: paginationIconStyle });
+        case 'next':
+            return jsx(ChevronRightIcon, { className: paginationIconStyle });
+        case 'ellipsis':
+            return '…';
+        case 'page':
+        default:
+            return page;
+    }
+}
+/**
+ * Page navigator with sibling/boundary ellipsis logic. Controlled when `page`
+ * is set, otherwise uncontrolled with `defaultPage`. Pages are 1-based.
+ *
+ * @example
+ * ```tsx
+ * <Pagination count={20} defaultPage={1} onChange={(_, p) => setPage(p)} />
+ *
+ * // Compact: only prev/next + numbers
+ * <Pagination count={20} siblingCount={0} boundaryCount={1} />
+ *
+ * // Full controls
+ * <Pagination count={50} showFirstButton showLastButton />
+ * ```
+ */
+const Pagination = ({ count, page: pageProp, defaultPage = 1, onChange, siblingCount = 1, boundaryCount = 1, showFirstButton = false, showLastButton = false, hidePrevButton = false, hideNextButton = false, size = 'md', disabled = false, className, style, testId, getItemAriaLabel = defaultGetItemAriaLabel, ref, ...rest }) => {
+    const safeCount = Math.max(0, Math.floor(count));
+    const clampedDefault = Math.min(Math.max(1, defaultPage), Math.max(1, safeCount));
+    const [page, setPage] = useControlledState({
+        value: pageProp,
+        defaultValue: clampedDefault,
+        onChange: undefined,
+        fallback: 1,
+    });
+    const items = usePaginationItems({
+        count: safeCount,
+        page,
+        siblingCount: Math.max(0, siblingCount),
+        boundaryCount: Math.max(1, boundaryCount),
+        showFirstButton,
+        showLastButton,
+        hidePrevButton,
+        hideNextButton,
+        disabled,
+    });
+    const handleClick = useCallback((event, item) => {
+        if (item.disabled || item.page === null || item.type === 'ellipsis')
+            return;
+        const next = item.page;
+        if (next === page)
+            return;
+        setPage(next);
+        onChange?.(event, next);
+    }, [onChange, page, setPage]);
+    return (jsx("nav", { ref: ref, "aria-label": "pagination", className: cx(paginationRootStyle, className), style: style, "data-testid": testId, ...rest, children: jsx("ul", { className: paginationListRecipe({ size }), children: items.map((item, index) => {
+                const key = `${item.type}-${item.page ?? 'na'}-${String(index)}`;
+                if (item.type === 'ellipsis') {
+                    return (jsx("li", { className: paginationItemStyle, children: jsx("span", { className: paginationEllipsisRecipe({ size }), "aria-hidden": "true", children: "\u2026" }) }, key));
+                }
+                return (jsx("li", { className: paginationItemStyle, children: jsx("button", { type: "button", className: paginationButtonRecipe({
+                            size,
+                            selected: item.selected || undefined,
+                        }), disabled: item.disabled, "aria-current": item.selected ? 'page' : undefined, "aria-label": getItemAriaLabel(item.type, item.page, item.selected), onClick: event => {
+                            handleClick(event, item);
+                        }, "data-page": item.page ?? undefined, "data-type": item.type, children: renderItemContent(item.type, item.page) }) }, key));
+            }) }) }));
+};
+Pagination.displayName = 'Pagination';
+
+export { Pagination };
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../../../../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AA6BA;;AAMI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;AAKI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;;;;;;;;;;;;;AAcG;AACI;AAoBL;;AAMA;AACE;AACA;AACA;AACA;AACD;;AAGC;;;;;;;;;AASD;;AAIG;;AAEA;;;;AAGA;;;AAgBI;AACA;;;AAYA;;AAMQ;AACD;AASC;;AASV;AAIR;AAEA;;"}