@optiaxiom/react 1.3.0 → 1.3.1

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-D9VKrY0d.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CwsU-HaV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1mepjeg'});
+var mark = recipeRuntime({base:'_2x8rug'});
 
 export { mark };

package/dist/esm/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-RHUT1F_l.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-DODouLxD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_1gopgst',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_10f5mc6']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1jfc1gp']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_36peo'],variants:{offset:{false:'mw3h1o',true:{}},position:{'bottom-right':'h49rb7','top-right':'cx31pt'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_513fhj']});
+var badge = recipeRuntime({base:'_1mchifr',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_39zd6s']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_12vom5c']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_12heisr'],variants:{offset:{false:'fsl09h',true:{}},position:{'bottom-right':'_1bqs7mm','top-right':'_1vjrmx'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'c1rbst']});
 
 export { badge, floating, indicator };

package/dist/esm/packages/react/src/inline-input/InlineInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DrggWV9x.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DU5yHX96.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'osf8rr',variants:{empty:{false:{},true:'hsmubj'}}});
-var input = recipeRuntime({base:'h6o0je'});
+var editor = recipeRuntime({base:'clqaag',variants:{empty:{false:{},true:'xrqdqk'}}});
+var input = recipeRuntime({base:'d09sm7'});
 
 export { editor, input };

package/dist/esm/packages/react/src/input/Input-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

package/dist/esm/packages/react/src/input-control/InputControl-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-Djmx4C5o.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CcpeXlIo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['yxn2vo',{bg:'transparent',flex:'auto',w:'full'},'jy9nnd','_1ea5ijj'],variants:{size:{md:{},lg:{},xl:['_1na51t4']}}});
+var control = recipeRuntime({base:['pxrhdv',{bg:'transparent',flex:'auto',w:'full'},'lh9fpr','_1cfjiv'],variants:{size:{md:{},lg:{},xl:['yytobg']}}});
 
 export { control };

package/dist/esm/packages/react/src/input-root/InputRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BuhN_n9G.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-Djmx4C5o.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-Cih6Anrm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CcpeXlIo.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-DAIh1s87.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_11vhwp4']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1aooqmg']});
 
 export { root };

package/dist/esm/packages/react/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DQZ0Czao.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-Dw-ODjec.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_1jxhu22'],variants:{variant:{outline:{border:'1',borderB:'2',borderColor:'border.tertiary',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = recipeRuntime({base:'upthqw',variants:{variant:{outline:'_75ege7',subtle:{}}}});
+var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_31lu17'],variants:{variant:{outline:{border:'1',borderB:'2',borderColor:'border.tertiary',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
+var keys = recipeRuntime({base:'_5e0r18',variants:{variant:{outline:'_15wig4c',subtle:{}}}});
 
 export { kbd, keys };

package/dist/esm/packages/react/src/label-menu-button/LabelMenuButton-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BuhN_n9G.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-Cs-zXoZj.css';
-import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-C1QpA097.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-BkCGiMYb.css';
+import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-DcNCgJgp.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'_10a1w0f']});
+var button = recipeRuntime({base:[{justifyContent:'space-between'},'t574ao']});
 var content = recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 

package/dist/esm/packages/react/src/layers/layers-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._15ugsxe';
-var reset = 'optiaxiom._1wk6g49';
+var components = 'optiaxiom.rykzvu';
+var reset = 'optiaxiom.x3pw4k';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

package/dist/esm/packages/react/src/layout/Layouts-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/layout/Layouts.css.ts.vanilla-jn7W4Vx_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/layout/Layouts.css.ts.vanilla-AW54A-sP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_45vo41']});
+var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1p9zzr2']});
 
 export { layout };

package/dist/esm/packages/react/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-B3y4Cor7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-D-bSclzt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'t1ipl3']});
-var link = recipeRuntime({base:['cewjro','_19yjn8c'],variants:{appearance:{'default':'_1wa6swa',inverse:'bpx0jy',subtle:'_14my6pr'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_15g4k1z']});
+var link = recipeRuntime({base:['_1vusj1r','_1mkx9lq'],variants:{appearance:{'default':'_7dz0qv',inverse:'_14cnxbw',subtle:'_1axdz9m'}}});
 
 export { icon, link };

package/dist/esm/packages/react/src/listbox-checkbox-item/ListboxCheckboxItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/listbox-checkbox-item/ListboxCheckboxItem.css.ts.vanilla-DOCfa7Zk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/listbox-checkbox-item/ListboxCheckboxItem.css.ts.vanilla-C2eU117O.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:[{display:'inline-flex',transition:'opacity'},'_50bgsb'],variants:{visible:{false:{},true:'_1rb62wy'}}});
+var checkbox = recipeRuntime({base:[{display:'inline-flex',transition:'opacity'},'_1ybh4jh'],variants:{visible:{false:{},true:'fn3m5h'}}});
 
 export { checkbox };

package/dist/esm/packages/react/src/listbox-item/ListboxItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-T_bauynn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-TsCn1kNw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'_1hfjjk0']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1jf4qmn'],variants:{intent:{danger:'_1eyldeb',neutral:'zm7l1o'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'nlbhu']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1jap5h']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'et942b'],variants:{intent:{danger:'_2qcsub',neutral:'_18y6cwx'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_7wxz17']});
 
 export { description, item, title };

package/dist/esm/packages/react/src/listbox-item-indicator/ListboxItemIndicator-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
-import './../../../../assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-BAisdqe5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-D8wnYoJl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['oxed6l'],variants:{active:{false:{},true:'cykdef'}}});
+var indicator = recipeRuntime({base:['_1br0wwf'],variants:{active:{false:{},true:'_1o9q8zi'}}});
 
 export { indicator };

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

@@ -56,7 +56,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 +86,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 +125,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-input/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-D2iWt029.css';
+import './../../../../assets/src/menu-input/MenuInput.css.ts.vanilla-CUqEzWEo.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'},'_1hote6u']}}});
 
 export { input };

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

@@ -15,9 +15,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 +31,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-nested-context/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-sub/MenuSub.js

@@ -1,34 +1,36 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { DropdownMenu } from '@radix-ui/react-dropdown-menu';
-import { useState, useRef } from 'react';
+import { useRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { useMenuContext } from '../menu-context/MenuContext.js';
+import { useMenuNestedContext } from '../menu-nested-context/MenuNestedContext.js';
 import { MenuSubContent } from '../menu-sub-content/MenuSubContent.js';
 import { MenuSubProvider } from '../menu-sub-context/MenuSubContext.js';
 import { MenuSubTrigger } from '../menu-sub-trigger/MenuSubTrigger.js';
+import { Popover } from '../popover/Popover.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 [presence, setPresence] = useState();
   const contentRef = useRef(null);
+  const inputRef = useRef(null);
   return /* @__PURE__ */ jsx(
     MenuSubProvider,
     {
       contentRef,
-      open: activePath[0] === index,
-      presence,
+      inputRef,
+      level,
+      open: activePath[level] === index,
       setOpen: () => {
         setActivePath(
-          (path) => path.at(-1) === index ? path.slice(0, -1) : path
+          (path) => path[level] === index ? path.slice(0, level) : path
         );
       },
-      setPresence,
-      children: children ?? /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, open: activePath[0] === index || presence, children: [
+      children: children ?? /* @__PURE__ */ jsxs(Popover, { open: activePath[level] === index, children: [
         /* @__PURE__ */ jsx(MenuSubTrigger, { item }),
         /* @__PURE__ */ jsx(MenuSubContent, { item })
       ] })

package/dist/esm/packages/react/src/menu-sub-content/MenuSubContent.js

@@ -1,152 +1,109 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { DropdownMenuPortal, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
-import { forwardRef, Fragment } from 'react';
-import { useCommandContext, resolveItemProperty } from '../command-context/CommandContext.js';
-import { ListboxCheckboxItem } from '../listbox-checkbox-item/ListboxCheckboxItem.js';
-import { ListboxItem } from '../listbox-item/ListboxItem.js';
-import { ListboxLabel } from '../listbox-label/ListboxLabel.js';
-import { ListboxRadioItem } from '../listbox-radio-item/ListboxRadioItem.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef, useMemo } from 'react';
+import { Command } from '../command/Command.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandInput } from '../command-input/CommandInput.js';
 import { useMenuContext } from '../menu-context/MenuContext.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { useMenuNestedContext, MenuNestedProvider } from '../menu-nested-context/MenuNestedContext.js';
 import { useMenuSubContext } from '../menu-sub-context/MenuSubContext.js';
-import { OverlayListbox } from '../overlay-listbox/OverlayListbox.js';
-import { Separator } from '../separator/Separator.js';
-import { TransitionGroup } from '../transition-group/TransitionGroup.js';
-import { content } from './SelectContent-css.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
 
 const MenuSubContent = forwardRef(
-  ({ align = "start", children, className, item, side = "right", ...props }, outerRef) => {
-    const { activePath, inputRef, onSelect, setOpen } = useMenuContext(
-      "@optiaxiom/react/MenuSubContent"
-    );
-    const { inputValue, setInputValue } = useCommandContext(
+  ({ 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,
-      open,
-      setOpen: setSubOpen,
-      setPresence
+      inputRef,
+      level,
+      setOpen: setSubOpen
     } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const { inputRef: parentInputRef = rootInputRef } = useMenuNestedContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
     const ref = useComposedRefs(contentRef, outerRef);
-    let isFirstItem = true;
-    let lastGroup = void 0;
-    const shouldShowSeparator = (group) => {
-      const show = !isFirstItem;
-      isFirstItem = false;
-      return show && group && group !== lastGroup && group.separator;
-    };
-    const shouldShowGroup = (group) => {
-      const show = group !== lastGroup;
-      lastGroup = group;
-      return show && !group?.hidden;
-    };
-    return /* @__PURE__ */ jsx(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(DropdownMenuPortal, { forceMount: true, children: /* @__PURE__ */ jsx(
-      OverlayListbox,
+    return /* @__PURE__ */ jsx(
+      PopoverContent,
       {
-        asChild: true,
+        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,
-        ...content({}, className),
+        side,
+        sideOffset: 0,
         ...props,
-        children: /* @__PURE__ */ jsx(
-          DropdownMenuContent,
+        children: children ?? /* @__PURE__ */ jsxs(
+          Command,
           {
-            align,
-            alignOffset: -4,
-            loop: true,
-            onCloseAutoFocus: (event) => {
-              if (activePath.length) {
-                return;
+            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
+                );
               }
-              event.preventDefault();
-              inputRef.current?.focus();
             },
-            onEscapeKeyDown: () => {
-              setOpen(false);
+            onInputValueChange: (inputValue) => {
+              parentInputRef.current?.focus();
+              setInputValue(inputValue);
             },
-            onKeyDown: (event) => {
-              if (event.key === "ArrowLeft") {
-                event.preventDefault();
-                setSubOpen(false);
-              } else if (/^[A-Za-z0-9]$/.test(event.key)) {
-                event.preventDefault();
-                event.stopPropagation();
-                inputRef.current?.focus();
-                setInputValue(event.key);
+            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 });
               }
             },
-            side,
-            sideOffset: 0,
-            children: children ?? item.subOptions?.map((item2, index) => {
-              const type = "selected" in item2 ? item2.multi ? "checkbox" : "radio" : "action";
-              let element;
-              switch (type) {
-                case "action":
-                  element = /* @__PURE__ */ jsx(
-                    DropdownMenuItem,
-                    {
-                      asChild: true,
-                      onSelect: () => onSelect(item2, { close: true }),
-                      children: /* @__PURE__ */ jsx(ListboxItem, { addonBefore: item2.addon, children: resolveItemProperty(item2.label, { inputValue }) })
-                    }
-                  );
-                  break;
-                case "checkbox":
-                  element = /* @__PURE__ */ jsx(
-                    DropdownMenuCheckboxItem,
-                    {
-                      asChild: true,
-                      checked: resolveItemProperty(item2.selected),
-                      onKeyDown: (event) => {
-                        if (event.key === " ") {
-                          event.preventDefault();
-                          onSelect(item2, { close: false });
-                        }
-                      },
-                      onSelect: () => onSelect(item2, { close: true }),
-                      children: /* @__PURE__ */ jsx(
-                        ListboxCheckboxItem,
-                        {
-                          addonBefore: item2.addon,
-                          onCheckedChange: () => onSelect(item2, { close: false }),
-                          children: resolveItemProperty(item2.label, { inputValue })
-                        }
-                      )
-                    }
-                  );
-                  break;
-                case "radio":
-                  element = /* @__PURE__ */ jsx(
-                    DropdownMenuCheckboxItem,
-                    {
-                      asChild: true,
-                      checked: resolveItemProperty(item2.selected),
-                      onKeyDown: (event) => {
-                        if (event.key === " ") {
-                          event.preventDefault();
-                          onSelect(item2, { close: false });
-                        }
-                      },
-                      onSelect: () => onSelect(item2, { close: true }),
-                      children: /* @__PURE__ */ jsx(ListboxRadioItem, { addonBefore: item2.addon, children: resolveItemProperty(item2.label, { inputValue }) })
+            options,
+            children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+                CommandInput,
+                {
+                  onKeyDown: (event) => {
+                    if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      setSubOpen(false);
                     }
-                  );
-                  break;
-              }
-              const group = item2.group;
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                shouldShowSeparator(group) && /* @__PURE__ */ jsx(Separator, {}),
-                shouldShowGroup(group) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.name }),
-                element
-              ] }, index);
-            })
+                  },
+                  ref: inputRef
+                }
+              ) }),
+              /* @__PURE__ */ jsx(MenuNestedProvider, { inputRef, level: level + 1, children: /* @__PURE__ */ jsx(MenuListbox, {}) })
+            ]
           }
         )
       }
-    ) }) });
+    );
   }
 );
 MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";