@optiaxiom/react 1.3.0 → 1.3.2

package/dist/esm/packages/react/src/menu/Menu.js

@@ -3,11 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { Command } from '../command/Command.js';
-import { resolveItemProperty } from '../command-context/CommandContext.js';
+import '../command/CommandInput.js';
+import '../command/CommandItem.js';
+import '../command/CommandListbox.js';
+import { resolveItemProperty } from '../command/CommandContext.js';
 import { Dialog } from '../dialog/Dialog.js';
-import { MenuProvider } from '../menu-context/MenuContext.js';
-import { MenuPopover } from '../menu-popover/MenuPopover.js';
-import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
+import '../dialog/DialogBody.js';
+import '../dialog/DialogClose.js';
+import '../dialog/DialogContent.js';
+import '../dialog/DialogFooter.js';
+import '../dialog/DialogForm.js';
+import '../dialog/DialogHeader.js';
+import '../dialog/DialogTrigger.js';
+import '../field/FieldContext.js';
+import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
+import { MenuProvider } from './MenuContext.js';
+import { MenuPopover } from './MenuPopover.js';
 
 function Menu({
   children,
@@ -56,7 +67,10 @@ function Menu({
   }, [open, size]);
   const inputRef = useRef(null);
   const options = useMemo(
-    () => activePath.length && size === "lg" ? optionsProp[activePath[0]].subOptions ?? [] : size === "sm" ? optionsProp.map((option) => ({
+    () => activePath.length && size === "lg" ? activePath.reduce(
+      (result, index) => result[index].subOptions ?? [],
+      optionsProp
+    ) : size === "sm" ? optionsProp.map((option) => ({
       ...option,
       label: option.subOptions ? resolveItemProperty(option.label, { inputValue }).replace(
         "\u2026",
@@ -83,7 +97,12 @@ function Menu({
     if (open) {
       setInputVisible(inputDefaultVisibleRef.current);
     }
-  }, [activePath, open]);
+  }, [open]);
+  useEffect(() => {
+    if (size === "lg") {
+      setInputVisible(inputDefaultVisibleRef.current);
+    }
+  }, [activePath, size]);
   return /* @__PURE__ */ jsx(Comp, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
     MenuProvider,
     {
@@ -117,7 +136,9 @@ function Menu({
           onSelect: (item, { close }) => {
             if (item.subOptions?.length) {
               const index = options.indexOf(item);
-              setActivePath((path) => !path.includes(index) ? [index] : path);
+              setActivePath(
+                (path) => path.at(-1) !== index ? [...path, index] : path
+              );
             } else {
               item.execute?.({ inputValue });
               if (typeof openProp === "undefined" && close) {

package/dist/esm/packages/react/src/menu/MenuCheckboxItem.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../command/Command.js';
+import '../command/CommandInput.js';
+import { CommandItem } from '../command/CommandItem.js';
+import '../command/CommandListbox.js';
+import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
+import '../listbox/Listbox.js';
+import { ListboxCheckboxItem } from '../listbox/ListboxCheckboxItem.js';
+import '../listbox/ListboxEmpty.js';
+import '../listbox/ListboxFooter.js';
+import '../listbox/ListboxGroup.js';
+import '../listbox/ListboxItem.js';
+import '../listbox/ListboxItemIndicator.js';
+import '../listbox/ListboxItemized.js';
+import '../listbox/ListboxLabel.js';
+import '../listbox/ListboxRadioItem.js';
+import '../listbox/ListboxSeparator.js';
+import '../listbox/ListboxSwitchItem.js';
+import '../listbox/ListboxVirtualized.js';
+
+const MenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
+  const Comp = props.item.link ? "a" : "div";
+  const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
+  return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
+    ListboxCheckboxItem,
+    {
+      addonBefore: props.item.addon,
+      asChild: true,
+      description: props.item.description,
+      onCheckedChange: () => !resolveItemProperty(props.item.disabledReason) && props.item.execute?.({ inputValue }),
+      children: /* @__PURE__ */ jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+    }
+  ) });
+});
+MenuCheckboxItem.displayName = "@optiaxiom/react/MenuCheckboxItem";
+
+export { MenuCheckboxItem };

package/dist/esm/packages/react/src/{menu-content → menu}/MenuContent.js

@@ -1,15 +1,14 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useCommandContext } from '../command-context/CommandContext.js';
-import '../field-context/FieldContext.js';
-import { useFieldContext } from '../field-context/useFieldContext.js';
-import { useMenuContext } from '../menu-context/MenuContext.js';
-import { MenuDialogContent } from '../menu-dialog-content/MenuDialogContent.js';
-import { MenuInput } from '../menu-input/MenuInput.js';
-import { MenuListbox } from '../menu-listbox/MenuListbox.js';
-import { MenuPopoverContent } from '../menu-popover-content/MenuPopoverContent.js';
+import { useCommandContext } from '../command/CommandContext.js';
+import { useFieldContext } from '../field/useFieldContext.js';
 import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
+import { useMenuContext } from './MenuContext.js';
+import { MenuDialogContent } from './MenuDialogContent.js';
+import { MenuInput } from './MenuInput.js';
+import { MenuListbox } from './MenuListbox.js';
+import { MenuPopoverContent } from './MenuPopoverContent.js';
 
 const MenuContent = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/esm/packages/react/src/{menu-dialog-content → menu}/MenuDialogContent.js

@@ -2,8 +2,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef } from 'react';
-import { DialogContent } from '../dialog-content/DialogContent.js';
-import { DialogHeader } from '../dialog-header/DialogHeader.js';
+import '../dialog/Dialog.js';
+import '../dialog/DialogBody.js';
+import '../dialog/DialogClose.js';
+import { DialogContent } from '../dialog/DialogContent.js';
+import '../dialog/DialogFooter.js';
+import '../dialog/DialogForm.js';
+import { DialogHeader } from '../dialog/DialogHeader.js';
+import '../dialog/DialogTrigger.js';
 
 const MenuDialogContent = forwardRef(
   ({

package/dist/esm/packages/react/src/{menu-input → menu}/MenuInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/menu-input/MenuInput.css.ts.vanilla-CrjgCTO4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-oNHGAD0Z.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'f6257q']}}});
+var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1m3xa98']}}});
 
 export { input };

package/dist/esm/packages/react/src/{menu-input → menu}/MenuInput.js

@@ -5,9 +5,12 @@ import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useCommandContext } from '../command-context/CommandContext.js';
-import { CommandInput } from '../command-input/CommandInput.js';
-import { useMenuContext } from '../menu-context/MenuContext.js';
+import '../command/Command.js';
+import { CommandInput } from '../command/CommandInput.js';
+import '../command/CommandItem.js';
+import '../command/CommandListbox.js';
+import { useCommandContext } from '../command/CommandContext.js';
+import { useMenuContext } from './MenuContext.js';
 import { input } from './MenuInput-css.js';
 
 const MenuInput = forwardRef(
@@ -15,9 +18,7 @@ const MenuInput = forwardRef(
     const { inputRef, open, size } = useMenuContext(
       "@optiaxiom/react/MenuInput"
     );
-    const { downshift, highlightedItem } = useCommandContext(
-      "@optiaxiom/react/MenuInput"
-    );
+    const { downshift } = useCommandContext("@optiaxiom/react/MenuInput");
     const ref = useComposedRefs(inputRef, outerRef);
     const [minWidth, setMinWidth] = useState(160);
     const containerRef = useRef(null);
@@ -33,26 +34,6 @@ const MenuInput = forwardRef(
     return /* @__PURE__ */ jsx(Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsx(
       CommandInput,
       {
-        htmlSize: 1,
-        onKeyDown: (event) => {
-          if (!(event.target instanceof HTMLInputElement)) {
-            return;
-          }
-          if (event.target.value) {
-            return;
-          }
-          if (!highlightedItem) {
-            return;
-          }
-          const subOptions = highlightedItem.subOptions;
-          if (event.key === " ") {
-            event.preventDefault();
-            downshift.selectItem(highlightedItem);
-          } else if (event.key === "ArrowRight" && subOptions?.length) {
-            event.preventDefault();
-            downshift.selectItem(highlightedItem);
-          }
-        },
         ref,
         size: size === "sm" ? "md" : "xl",
         ...input({ size }, className),

package/dist/esm/packages/react/src/menu/MenuItem.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../command/Command.js';
+import '../command/CommandInput.js';
+import { CommandItem } from '../command/CommandItem.js';
+import '../command/CommandListbox.js';
+import '../listbox/Listbox.js';
+import '../listbox/ListboxCheckboxItem.js';
+import '../listbox/ListboxEmpty.js';
+import '../listbox/ListboxFooter.js';
+import '../listbox/ListboxGroup.js';
+import { ListboxItem } from '../listbox/ListboxItem.js';
+import '../listbox/ListboxItemIndicator.js';
+import '../listbox/ListboxItemized.js';
+import '../listbox/ListboxLabel.js';
+import '../listbox/ListboxRadioItem.js';
+import '../listbox/ListboxSeparator.js';
+import '../listbox/ListboxSwitchItem.js';
+import '../listbox/ListboxVirtualized.js';
+
+const MenuItem = forwardRef(
+  ({ children, ...props }, ref) => {
+    const Comp = props.item.link ? "a" : "div";
+    return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
+      ListboxItem,
+      {
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        children: /* @__PURE__ */ jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+      }
+    ) });
+  }
+);
+MenuItem.displayName = "@optiaxiom/react/MenuItem";
+
+export { MenuItem };

package/dist/esm/packages/react/src/{menu-listbox → menu}/MenuListbox.js

@@ -1,14 +1,28 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { CommandListbox } from '../command-listbox/CommandListbox.js';
-import { ListboxLabel } from '../listbox-label/ListboxLabel.js';
-import { ListboxSeparator } from '../listbox-separator/ListboxSeparator.js';
-import { MenuCheckboxItem } from '../menu-checkbox-item/MenuCheckboxItem.js';
-import { useMenuContext } from '../menu-context/MenuContext.js';
-import { MenuItem } from '../menu-item/MenuItem.js';
-import { MenuRadioItem } from '../menu-radio-item/MenuRadioItem.js';
-import { MenuSub } from '../menu-sub/MenuSub.js';
+import '../command/Command.js';
+import '../command/CommandInput.js';
+import '../command/CommandItem.js';
+import { CommandListbox } from '../command/CommandListbox.js';
+import '../listbox/Listbox.js';
+import '../listbox/ListboxCheckboxItem.js';
+import '../listbox/ListboxEmpty.js';
+import '../listbox/ListboxFooter.js';
+import '../listbox/ListboxGroup.js';
+import '../listbox/ListboxItem.js';
+import '../listbox/ListboxItemIndicator.js';
+import '../listbox/ListboxItemized.js';
+import { ListboxLabel } from '../listbox/ListboxLabel.js';
+import '../listbox/ListboxRadioItem.js';
+import { ListboxSeparator } from '../listbox/ListboxSeparator.js';
+import '../listbox/ListboxSwitchItem.js';
+import '../listbox/ListboxVirtualized.js';
+import { MenuCheckboxItem } from './MenuCheckboxItem.js';
+import { useMenuContext } from './MenuContext.js';
+import { MenuItem } from './MenuItem.js';
+import { MenuRadioItem } from './MenuRadioItem.js';
+import { MenuSub } from './MenuSub.js';
 
 const MenuListbox = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/esm/packages/react/src/menu/MenuNestedContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [MenuNestedProvider, useMenuNestedContext] = createContext("@optiaxiom/react/MenuNested", { inputRef: void 0, level: 0 });
+
+export { MenuNestedProvider, useMenuNestedContext };

package/dist/esm/packages/react/src/{menu-popover → menu}/MenuPopover.js

@@ -1,6 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Popover } from '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
 
 function MenuPopover(props) {
   return /* @__PURE__ */ jsx(Popover, { modal: true, ...props });

package/dist/esm/packages/react/src/{menu-popover-content → menu}/MenuPopoverContent.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { PopoverContent } from '../popover-content/PopoverContent.js';
+import '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import { PopoverContent } from '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
 
 const MenuPopoverContent = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });

package/dist/esm/packages/react/src/menu/MenuRadioItem.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../command/Command.js';
+import '../command/CommandInput.js';
+import { CommandItem } from '../command/CommandItem.js';
+import '../command/CommandListbox.js';
+import '../listbox/Listbox.js';
+import '../listbox/ListboxCheckboxItem.js';
+import '../listbox/ListboxEmpty.js';
+import '../listbox/ListboxFooter.js';
+import '../listbox/ListboxGroup.js';
+import '../listbox/ListboxItem.js';
+import '../listbox/ListboxItemIndicator.js';
+import '../listbox/ListboxItemized.js';
+import '../listbox/ListboxLabel.js';
+import { ListboxRadioItem } from '../listbox/ListboxRadioItem.js';
+import '../listbox/ListboxSeparator.js';
+import '../listbox/ListboxSwitchItem.js';
+import '../listbox/ListboxVirtualized.js';
+
+const MenuRadioItem = forwardRef(
+  ({ children, ...props }, ref) => {
+    const Comp = props.item.link ? "a" : "div";
+    return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
+      ListboxRadioItem,
+      {
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        children: /* @__PURE__ */ jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+      }
+    ) });
+  }
+);
+MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
+
+export { MenuRadioItem };

package/dist/esm/packages/react/src/menu/MenuSub.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useCommandContext } from '../command/CommandContext.js';
+import { Popover } from '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
+import { useMenuContext } from './MenuContext.js';
+import { useMenuNestedContext } from './MenuNestedContext.js';
+import { MenuSubContent } from './MenuSubContent.js';
+import { MenuSubProvider } from './MenuSubContext.js';
+import { MenuSubTrigger } from './MenuSubTrigger.js';
+
+function MenuSub({ children, item }) {
+  const { activePath, setActivePath } = useMenuContext(
+    "@optiaxiom/react/MenuSub"
+  );
+  const { items } = useCommandContext("@optiaxiom/react/MenuSub");
+  const { level } = useMenuNestedContext("@optiaxiom/react/MenuSub");
+  const index = items.indexOf(item);
+  const contentRef = useRef(null);
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsx(
+    MenuSubProvider,
+    {
+      contentRef,
+      inputRef,
+      level,
+      open: activePath[level] === index,
+      setOpen: () => {
+        setActivePath(
+          (path) => path[level] === index ? path.slice(0, level) : path
+        );
+      },
+      children: children ?? /* @__PURE__ */ jsxs(Popover, { open: activePath[level] === index, children: [
+        /* @__PURE__ */ jsx(MenuSubTrigger, { item }),
+        /* @__PURE__ */ jsx(MenuSubContent, { item })
+      ] })
+    }
+  );
+}
+MenuSub.displayName = "@optiaxiom/react/MenuSub";
+
+export { MenuSub };

package/dist/esm/packages/react/src/menu/MenuSubContent.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef, useMemo } from 'react';
+import { Command } from '../command/Command.js';
+import { CommandInput } from '../command/CommandInput.js';
+import '../command/CommandItem.js';
+import '../command/CommandListbox.js';
+import { useCommandContext } from '../command/CommandContext.js';
+import '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import { PopoverContent } from '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
+import { useMenuContext } from './MenuContext.js';
+import { MenuListbox } from './MenuListbox.js';
+import { useMenuNestedContext, MenuNestedProvider } from './MenuNestedContext.js';
+import { useMenuSubContext } from './MenuSubContext.js';
+
+const MenuSubContent = forwardRef(
+  ({ align = "start", children, item, side = "right", ...props }, outerRef) => {
+    const options = useMemo(() => item.subOptions ?? [], [item]);
+    const {
+      activePath,
+      inputRef: rootInputRef,
+      onSelect,
+      setActivePath,
+      setOpen
+    } = useMenuContext("@optiaxiom/react/MenuSubContent");
+    const { setInputValue } = useCommandContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const {
+      contentRef,
+      inputRef,
+      level,
+      setOpen: setSubOpen
+    } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const { inputRef: parentInputRef = rootInputRef } = useMenuNestedContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const ref = useComposedRefs(contentRef, outerRef);
+    return /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align,
+        alignOffset: -4,
+        maxH: "sm",
+        minW: "trigger",
+        onCloseAutoFocus: (event) => {
+          if (activePath.length > level) {
+            return;
+          }
+          event.preventDefault();
+          parentInputRef.current?.focus();
+        },
+        onEscapeKeyDown: () => setOpen(false),
+        p: "4",
+        ref,
+        side,
+        sideOffset: 0,
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(
+          Command,
+          {
+            onHover: (item2) => {
+              if (item2.subOptions?.length) {
+                const index = options.indexOf(item2);
+                setActivePath(
+                  (path) => path[level + 1] !== index ? [...path.slice(0, level + 1), index] : path
+                );
+              } else {
+                setActivePath(
+                  (path) => path.length > level + 1 ? path.slice(0, level + 1) : path
+                );
+              }
+            },
+            onInputValueChange: (inputValue) => {
+              parentInputRef.current?.focus();
+              setInputValue(inputValue);
+            },
+            onSelect: (item2, { close }) => {
+              if (item2.subOptions?.length) {
+                const index = options.indexOf(item2);
+                setActivePath(
+                  (path) => path[level + 1] !== index ? [...path.slice(0, level + 1), index] : path
+                );
+              } else {
+                onSelect(item2, { close });
+              }
+            },
+            options,
+            children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+                CommandInput,
+                {
+                  onKeyDown: (event) => {
+                    if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      setSubOpen(false);
+                    }
+                  },
+                  ref: inputRef
+                }
+              ) }),
+              /* @__PURE__ */ jsx(MenuNestedProvider, { inputRef, level: level + 1, children: /* @__PURE__ */ jsx(MenuListbox, {}) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
+
+export { MenuSubContent };

package/dist/esm/packages/react/src/menu/MenuSubTrigger.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command/CommandContext.js';
+import { FilteredSlot } from '../filtered-slot/FilteredSlot.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import { PopoverTrigger } from '../popover/PopoverTrigger.js';
+import { MenuItem } from './MenuItem.js';
+import { useMenuSubContext } from './MenuSubContext.js';
+
+const MenuSubTrigger = forwardRef(
+  ({ children, item, onPointerDown, ...props }, ref) => {
+    const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
+    const { contentRef, open } = useMenuSubContext(
+      "@optiaxiom/react/MenuSubTrigger"
+    );
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}),
+        item,
+        onPointerDown: (event) => {
+          onPointerDown?.(event);
+          if (open) {
+            event.preventDefault();
+          }
+        },
+        onPointerEnter: () => {
+          if (highlightedItem !== item) {
+            return;
+          }
+          downshift.selectItem(item);
+        },
+        onPointerLeave: (event) => {
+          const box = contentRef.current?.getBoundingClientRect();
+          if (!box) {
+            return;
+          }
+          const bottom = {
+            x: box.left,
+            y: box.top + box.height
+          };
+          const side = {
+            x: event.clientX + 10 * (box.left > event.clientX ? -1 : 1),
+            y: event.clientY
+          };
+          const top = {
+            x: box.left,
+            y: box.top
+          };
+          pauseInteractionRef.current.isInsideTriangle = (target) => {
+            const b0 = (top.x - side.x) * (bottom.y - side.y) - (bottom.x - side.x) * (top.y - side.y), b1 = ((top.x - target.x) * (bottom.y - target.y) - (bottom.x - target.x) * (top.y - target.y)) / b0, b2 = ((bottom.x - target.x) * (side.y - target.y) - (side.x - target.x) * (bottom.y - target.y)) / b0, b3 = ((side.x - target.x) * (top.y - target.y) - (top.x - target.x) * (side.y - target.y)) / b0;
+            return b1 > 0 && b2 > 0 && b3 > 0;
+          };
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.isInsideTriangle = null;
+          }, 50);
+        },
+        ref,
+        ...props,
+        children
+      }
+    ) }) });
+  }
+);
+MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";
+
+export { MenuSubTrigger };

package/dist/esm/packages/react/src/{menu-trigger → menu}/MenuTrigger.js

@@ -3,10 +3,23 @@ import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef, useRef } from 'react';
 import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
-import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
-import { useMenuContext } from '../menu-context/MenuContext.js';
-import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
-import { useFieldLabelTrigger } from '../use-field-label-trigger/useFieldLabelTrigger.js';
+import '../dialog/Dialog.js';
+import '../dialog/DialogBody.js';
+import '../dialog/DialogClose.js';
+import '../dialog/DialogContent.js';
+import '../dialog/DialogFooter.js';
+import '../dialog/DialogForm.js';
+import '../dialog/DialogHeader.js';
+import { DialogTrigger } from '../dialog/DialogTrigger.js';
+import { useFieldLabelTrigger } from '../hooks/useFieldLabelTrigger.js';
+import '../utils/conditions.js';
+import '@radix-ui/react-slot';
+import '../utils/isHoverSupported.js';
+import '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import { PopoverTrigger } from '../popover/PopoverTrigger.js';
+import { useMenuContext } from './MenuContext.js';
 
 const MenuTrigger = forwardRef(
   ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {

package/dist/esm/packages/react/src/{modal-layer → modal}/ModalLayer.js

@@ -6,7 +6,7 @@ import { FocusGuards } from '@radix-ui/react-focus-guards';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useState, useRef } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
-import { useModalContext, ModalProvider } from '../modal-context/ModalContext.js';
+import { useModalContext, ModalProvider } from './ModalContext.js';
 
 const ModalLayer = forwardRef(
   ({ asChild, children, ...props }, outerRef) => {

package/dist/esm/packages/react/src/modal/ModalListbox-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CKOpez_X.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-CXAEMq21.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1n71rmz'],variants:{maxH:{xs:'_1mj41d8',sm:'ewtpev',md:'_1139h0f',lg:'_7lxud6',full:{}},minW:{'0':{},trigger:'k54cyl'},provider:{'dropdown-menu':'kqnjuw',popover:'_2nrxt3',popper:'z7bj4t'}}});
+
+export { listbox };