@optiaxiom/react 1.3.0 → 1.3.1

package/dist/cjs/unstable.js

@@ -3,10 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-D9kBwl_6.js');
-require('./assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DWZetct8.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-BbqzwWHh.css');
+var Skeleton = require('./Skeleton-CE8kcuAZ.js');
+require('./assets/src/layers/layers.css.ts.vanilla-D2iWt029.css');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-B3bvX3WR.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-B79F0dM2.css');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
@@ -17,73 +17,71 @@ var RadixVisuallyHidden = require('@radix-ui/react-visually-hidden');
 var reactPortal = require('@radix-ui/react-portal');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-VdS4O7gs.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-CV3jww0a.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-KqCd-2ik.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-0TZcmmu3.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BnSeiwfY.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-BEUq3kDL.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BuhN_n9G.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-QdHEU1mZ.css');
-require('./assets/src/link/Link.css.ts.vanilla-B3y4Cor7.css');
-require('./assets/src/card/Card.css.ts.vanilla-CrsxV1vR.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-CC3tXVjV.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-By_KKDNi.css');
-require('./assets/src/card-action/CardAction.css.ts.vanilla-CyOOeLcY.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-CFXkX2QS.css');
+require('./assets/src/link/Link.css.ts.vanilla-D-bSclzt.css');
+require('./assets/src/card/Card.css.ts.vanilla-C3yqZN2A.css');
+require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-DwmjlEGM.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-BvmS9ZSU.css');
+require('./assets/src/card-action/CardAction.css.ts.vanilla-B51eANPd.css');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-MqvDJoWy.css');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-DA-nCsoz.css');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-5cVo8-8R.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DQZuvEQA.css');
-require('./assets/src/table/Table.css.ts.vanilla-9FeooTji.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-BUg4jUW-.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-CxBIRqIz.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-WEAPDuXd.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-BUSMEieY.css');
-require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-YMRroFsN.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-BCONQNF4.css');
-require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-D8qogbi-.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-D9VKrY0d.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DrggWV9x.css');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-Dabn0RCS.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-Cl1-HqFR.css');
+require('./assets/src/table/Table.css.ts.vanilla-BwPOHhs_.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-BYY8IIuw.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-C8xEmbBv.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-CrSWyIGa.css');
+require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-DT67y1Z6.css');
+require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-CUUnuvvE.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-BaJS33T7.css');
+require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-C5ejyS0a.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-CwsU-HaV.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DU5yHX96.css');
 var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BuhN_n9G.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-Cs-zXoZj.css');
-require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-C1QpA097.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-jn7W4Vx_.css');
-require('./assets/src/menu-input/MenuInput.css.ts.vanilla-CrjgCTO4.css');
-var RadixMenu = require('@radix-ui/react-dropdown-menu');
-require('./assets/src/menu-sub-content/SelectContent.css.ts.vanilla-DCAKMvfS.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-Dt9oEgDm.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-BkCGiMYb.css');
+require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-DcNCgJgp.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-AW54A-sP.css');
+require('./assets/src/menu-input/MenuInput.css.ts.vanilla-CUqEzWEo.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-D2bvjE-M.css');
 require('@radix-ui/react-dialog');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-BeqTH3mM.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-Rq_MWFQh.css');
-require('./assets/src/dialog-header/DialogHeader.css.ts.vanilla-BKx5_XPN.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-BROM2YGz.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-RMNv9Lqm.css');
+require('./assets/src/dialog-header/DialogHeader.css.ts.vanilla-DDRAkIzV.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-Duu7HDfq.css');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-Djmx4C5o.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-Cih6Anrm.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BuhN_n9G.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-BD9DPgTh.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-YDkEAbGj.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-Lqy6ibue.css');
-require('./assets/src/listbox-checkbox-item/ListboxCheckboxItem.css.ts.vanilla-DOCfa7Zk.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-T_bauynn.css');
-require('./assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-BAisdqe5.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-DA0Ma99D.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-CcpeXlIo.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-DAIh1s87.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-ByPjrct_.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-DGNVVOIL.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-CG80wFdK.css');
+require('./assets/src/listbox-checkbox-item/ListboxCheckboxItem.css.ts.vanilla-C2eU117O.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-TsCn1kNw.css');
+require('./assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-D8wnYoJl.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/text/Text.css.ts.vanilla-FQ1NB0hD.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-CrrHJq3H.css');
+require('./assets/src/text/Text.css.ts.vanilla-B2NYcXGo.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-ZIE8tgBJ.css');
 require('@radix-ui/react-popover');
-require('./assets/src/overlay-listbox/OverlayListbox.css.ts.vanilla-chiiITqE.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BmuWE4Qq.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-08euzODu.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-CvRF_XVl.css');
+require('./assets/src/overlay-listbox/OverlayListbox.css.ts.vanilla-CFW6sooD.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-XjejeJkt.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-CT8EdlkT.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-Bu-WyyWJ.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-zOSre7IM.css');
-require('./assets/src/box/Box.css.ts.vanilla-CBWU659a.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-Bzcsi9C4.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-acUo1A_8.css');
+require('./assets/src/box/Box.css.ts.vanilla-Cfss3XgW.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-Cw-U1f2M.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -245,7 +243,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_178wu0q']});
+var item = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'jarath']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -255,7 +253,7 @@ const BreadcrumbItem = React.forwardRef(
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1cs9h3b']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1rve23b']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -864,8 +862,8 @@ function CalendarDay({ children, ...props }) {
 }
 CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
 
-var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1cpennm'],variants:{appearance:{'default':'lpugor',holiday:[{color:'fg.error'},'_8xcodz'],range_middle:'_2szeva',selected:[{color:'fg.white'},'_1uve59g'],weekend:[{color:'fg.tertiary'},'_1oc1irp']},range:{end:['ep0dtw'],middle:['_1cw1l2p'],start:['h31ien']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_1j50ags']});
+var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1ey6956'],variants:{appearance:{'default':'o40pi0',holiday:[{color:'fg.error'},'_1bm3lkd'],range_middle:'qn7lxr',selected:[{color:'fg.white'},'_1jepfs1'],weekend:[{color:'fg.tertiary'},'p6usae']},range:{end:['_1opkj88'],middle:['_1chn8zi'],start:['wd69gz']}}});
+var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'itcpl5']});
 
 function CalendarDayButton({
   children,
@@ -931,14 +929,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1ukbjap']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'rj06bq']});
 
 function CalendarMonths({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
 }
 CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
 
-var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_1ja9z4b']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_2cl7kj']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -1105,7 +1103,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'m9j138'});
+var root = Skeleton.recipeRuntime({base:'_1bo82hc'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1116,7 +1114,7 @@ ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-var card = Skeleton.recipeRuntime({base:['_1440ip6',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'sddc3c']});
+var card = Skeleton.recipeRuntime({base:['_1kedgbq',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1bpwocj']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -1148,16 +1146,16 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$3 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_1lt85ke'],variants:{visible:{false:'_1rygawp',true:'_1ucphw9'}}});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_4wyfzu'],variants:{visible:{false:'_2qrlrc',true:'y6tlr4'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...content$3({ visible }, className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...content$2({ visible }, className), ...props, children });
   }
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var action = Skeleton.recipeRuntime({base:['_1cpbj8u']});
+var action = Skeleton.recipeRuntime({base:['r00ct0']});
 
 const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1227,7 +1225,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1wbz9af'],variants:{orientation:{horizontal:[{w:'auto'},'_1lqtcet'],vertical:[{w:'full'},'dp5jov']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1ivqld2'],variants:{orientation:{horizontal:[{w:'auto'},'_1kwxdnc'],vertical:[{w:'full'},'frlz6d']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -1253,7 +1251,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['_1vhbqt2',{alignSelf:'stretch'},'_12oievt'],variants:{orientation:{horizontal:['_1pkn190'],vertical:['_4l5cdf']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_147hzs6',{alignSelf:'stretch'},'fm7cxm'],variants:{orientation:{horizontal:['v3par3'],vertical:['_1cq1izs']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1332,16 +1330,15 @@ const useCommandItems = ({
   });
   return React.useMemo(() => {
     const substring = (inputValue ?? "").normalize();
-    return options.flatMap((item) => {
-      if (item.subOptions && substring) {
-        return item.subOptions.filter((item2) => filterFn(item2, substring)).map((subItem) => ({
-          ...subItem,
-          parentOption: item
-        }));
-      } else {
-        return filterFn(item, substring) ? [item] : [];
-      }
-    });
+    const callback = (parentOption) => (item) => {
+      return item.subOptions && substring ? item.subOptions.flatMap(callback(item)) : filterFn(item, substring) ? [
+        parentOption ? {
+          ...item,
+          parentOption
+        } : item
+      ] : [];
+    };
+    return options.flatMap(callback());
   }, [options, filterFn, inputValue]);
 };
 
@@ -1371,8 +1368,8 @@ function Command({
     }
   }, [placed, setInputValueStable]);
   const pauseInteractionRef = React.useRef({
-    timer: void 0,
-    triangle: null
+    isInsideTriangle: null,
+    timer: void 0
   });
   const downshift$1 = downshift.useCombobox({
     highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
@@ -1393,7 +1390,7 @@ function Command({
     onSelectedItemChange({ selectedItem, type }) {
       if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
         onItemSelect?.(selectedItem, {
-          close: type !== downshift.useCombobox.stateChangeTypes.FunctionSelectItem
+          close: type !== downshift.useCombobox.stateChangeTypes.FunctionSelectItem || !("selected" in selectedItem)
         });
       }
     },
@@ -1441,20 +1438,44 @@ function Command({
 Command.displayName = "@optiaxiom/react/Command";
 
 const CommandInput = React.forwardRef(
-  ({ size, ...props }, ref) => {
-    const { downshift, setInputValue } = useCommandContext(
+  ({ onKeyDown, size, ...props }, ref) => {
+    const { downshift, highlightedItem, setInputValue } = useCommandContext(
       "@optiaxiom/react/CommandInput"
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Input,
       {
         addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
+        htmlSize: 1,
         size,
         ...downshift.getInputProps({
           ref,
           ...props,
           onChange: (event) => {
             setInputValue("value" in event.target ? event.target.value : "");
+          },
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented) {
+              return;
+            }
+            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);
+            }
           }
         })
       }
@@ -1482,10 +1503,10 @@ const CommandItem = React.forwardRef(
           });
           return;
         }
-        if (!pauseInteractionRef.current.triangle) {
+        if (!pauseInteractionRef.current.isInsideTriangle) {
           return;
         }
-        if (isInsideTriangle(pauseInteractionRef.current.triangle, {
+        if (pauseInteractionRef.current.isInsideTriangle({
           x: event.clientX,
           y: event.clientY
         })) {
@@ -1495,10 +1516,10 @@ const CommandItem = React.forwardRef(
           });
           window.clearTimeout(pauseInteractionRef.current.timer);
           pauseInteractionRef.current.timer = window.setTimeout(() => {
-            pauseInteractionRef.current.triangle = null;
+            pauseInteractionRef.current.isInsideTriangle = null;
           }, 50);
         } else {
-          pauseInteractionRef.current.triangle = null;
+          pauseInteractionRef.current.isInsideTriangle = null;
         }
       },
       ref,
@@ -1533,14 +1554,6 @@ const CommandItem = React.forwardRef(
   }
 );
 CommandItem.displayName = "@optiaxiom/react/CommandItem";
-function isInsideTriangle({
-  bottom,
-  side,
-  top
-}, 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;
-}
 
 const CommandListbox = React.forwardRef(
   ({ children, size, ...props }, ref) => {
@@ -1627,17 +1640,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_1yvi2ai'});
-var content$2 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_19wv8hx']});
+var cell$2 = Skeleton.recipeRuntime({base:'_17zicgj'});
+var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_12glaqo']});
 
 const TableHeaderCell = React.forwardRef(
-  ({ children, className, colSpan, p, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$2(), px: p ?? px, py: p ?? py, children }) }) })
+  ({ children, className, colSpan, p, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), px: p ?? px, py: p ?? py, children }) }) })
 );
 TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
 
-var button$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1qa9e13']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'t7297c'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1k2m83v'],variants:{active:{false:'_6qodpz',true:'w9nuaz'}}});
+var button$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1j2rrz']});
+var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_1h86772'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1k4k6rc'],variants:{active:{false:'_1dr0ifh',true:'_1ahof'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1690,22 +1703,22 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
 });
 DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
 
-var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'_1g7ux9z'],variants:{layout:{auto:['e8nfzw'],fixed:[{display:'grid'},'_1h0pzle']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_1i4rsac']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'_1x7yaoc'],variants:{layout:{auto:['_17chxsm'],fixed:[{display:'grid'},'hpv250']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_77vhxu']});
 
 const Table = React.forwardRef(
   ({ children, className, layout = "auto", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...wrapper({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...table$1({ layout }), children: /* @__PURE__ */ jsxRuntime.jsx("table", { children }) }) })
 );
 Table.displayName = "@optiaxiom/react/Table";
 
-var body = Skeleton.recipeRuntime({base:['u4hmdj']});
+var body = Skeleton.recipeRuntime({base:['x2j69j']});
 
 const TableBody = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...body({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, children }) })
 );
 TableBody.displayName = "@optiaxiom/react/TableBody";
 
-var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1qd7285']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_159f5re']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1717,20 +1730,20 @@ TableCell.displayName = "@optiaxiom/react/TableCell";
 const TableHeader = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, children }) }));
 TableHeader.displayName = "@optiaxiom/react/TableHeader";
 
-var row = Skeleton.recipeRuntime({base:['xzaq7',{transition:'colors',w:'full'},'_7m0yfi']});
+var row = Skeleton.recipeRuntime({base:['_1urd86t',{transition:'colors',w:'full'},'_2wamft']});
 
 const TableRow = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...row({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, children }) }) })
 );
 TableRow.displayName = "@optiaxiom/react/TableRow";
 
-var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'fn31b3'],variants:{pinned:{left:'_1va33xd',right:'_12s5zow'},pinnedType:{body:'njuhvp',header:{}}}});
-var cellOffsetVar = 'var(--_1k9vy4o)';
-var cellSizeVar = 'var(--mns3gj)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_6fagj0']});
-var leftTotalSizeVar = 'var(--eenlqt)';
-var rightTotalSizeVar = 'var(--_134ot22)';
-var table = Skeleton.recipeRuntime({base:'_1hdzyaq',variants:{pinned:{both:'_1me3eba',left:'xn1i0a',none:{},right:'_1kjpl6r'}}});
+var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'w3f2u6'],variants:{pinned:{left:'przi2k',right:'_4hhea2'},pinnedType:{body:'jer5ns',header:{}}}});
+var cellOffsetVar = 'var(--_1mtov39)';
+var cellSizeVar = 'var(--_10b0tf5)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_1poq2ke']});
+var leftTotalSizeVar = 'var(--_1tj311f)';
+var rightTotalSizeVar = 'var(--_1ygqjbh)';
+var table = Skeleton.recipeRuntime({base:'_1ys8i5x',variants:{pinned:{both:'_1ysbnzx',left:'_1fzpktf',none:{},right:'_18j0pz7'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -1908,7 +1921,7 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
-var addon = Skeleton.recipeRuntime({base:'_1r9phfc',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'_732vsj',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({
   label: size,
@@ -1993,7 +2006,7 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_1wwhkc9'});
+var picker = Skeleton.recipeRuntime({base:'_4cn5iy'});
 
 function toInstant(str) {
   const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
@@ -2167,7 +2180,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'snk0cb']});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'n36163']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -2398,7 +2411,7 @@ const DateRangePickerTrigger = React.forwardRef(
 );
 DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
 
-var mark = Skeleton.recipeRuntime({base:'_1mepjeg'});
+var mark = Skeleton.recipeRuntime({base:'_2x8rug'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2430,8 +2443,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'osf8rr',variants:{empty:{false:{},true:'hsmubj'}}});
-var input$1 = Skeleton.recipeRuntime({base:'h6o0je'});
+var editor = Skeleton.recipeRuntime({base:'clqaag',variants:{empty:{false:{},true:'xrqdqk'}}});
+var input$1 = Skeleton.recipeRuntime({base:'d09sm7'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2511,8 +2524,8 @@ function getText(element) {
   return text;
 }
 
-var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'_10a1w0f']});
-var content$1 = Skeleton.recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
+var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'t574ao']});
+var content = Skeleton.recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = Skeleton.recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 
 const LabelMenuButton = React.forwardRef(
@@ -2532,7 +2545,7 @@ const LabelMenuButton = React.forwardRef(
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { gap: "0", overflow: "hidden", textAlign: "start", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { asChild: true, id: labelId, truncate: true, ...label({ filled }), children: /* @__PURE__ */ jsxRuntime.jsx(RadixLabel.Label, { children: label$1 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { id: valueId, truncate: true, ...content$1({ filled }), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\xA0" }) })
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { id: valueId, truncate: true, ...content({ filled }), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\xA0" }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ButtonAddon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleDown, {}) })
         ]
@@ -2542,7 +2555,7 @@ const LabelMenuButton = React.forwardRef(
 );
 LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
 
-var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_45vo41']});
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1p9zzr2']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -2621,7 +2634,10 @@ function Menu({
   }, [open, size]);
   const inputRef = React.useRef(null);
   const options = React.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",
@@ -2648,7 +2664,12 @@ function Menu({
     if (open) {
       setInputVisible(inputDefaultVisibleRef.current);
     }
-  }, [activePath, open]);
+  }, [open]);
+  React.useEffect(() => {
+    if (size === "lg") {
+      setInputVisible(inputDefaultVisibleRef.current);
+    }
+  }, [activePath, size]);
   return /* @__PURE__ */ jsxRuntime.jsx(Comp, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
     MenuProvider,
     {
@@ -2682,7 +2703,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) {
@@ -2717,16 +2740,14 @@ const MenuDialogContent = React.forwardRef(
 );
 MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input = Skeleton.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'f6257q']}}});
+var input = Skeleton.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1hote6u']}}});
 
 const MenuInput = React.forwardRef(
   ({ className, ...props }, outerRef) => {
     const { inputRef, open, size } = useMenuContext(
       "@optiaxiom/react/MenuInput"
     );
-    const { downshift, highlightedItem } = useCommandContext(
-      "@optiaxiom/react/MenuInput"
-    );
+    const { downshift } = useCommandContext("@optiaxiom/react/MenuInput");
     const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
     const [minWidth, setMinWidth] = React.useState(160);
     const containerRef = React.useRef(null);
@@ -2742,26 +2763,6 @@ const MenuInput = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.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),
@@ -2820,155 +2821,113 @@ const MenuRadioItem = React.forwardRef(
 );
 MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
 
-const [MenuSubProvider, useMenuSubContext] = reactContext.createContext("@optiaxiom/react/MenuSub");
+const [MenuNestedProvider, useMenuNestedContext] = reactContext.createContext("@optiaxiom/react/MenuNested", { inputRef: void 0, level: 0 });
 
-var content = Skeleton.recipeRuntime({base:['fy6jej']});
+const [MenuSubProvider, useMenuSubContext] = reactContext.createContext("@optiaxiom/react/MenuSub");
 
 const MenuSubContent = React.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 = React.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 = reactComposeRefs.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__ */ jsxRuntime.jsx(Skeleton.TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu.DropdownMenuPortal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.OverlayListbox,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.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__ */ jsxRuntime.jsx(
-          RadixMenu.DropdownMenuContent,
+        children: children ?? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                    RadixMenu.DropdownMenuItem,
-                    {
-                      asChild: true,
-                      onSelect: () => onSelect(item2, { close: true }),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxItem, { addonBefore: item2.addon, children: resolveItemProperty(item2.label, { inputValue }) })
-                    }
-                  );
-                  break;
-                case "checkbox":
-                  element = /* @__PURE__ */ jsxRuntime.jsx(
-                    RadixMenu.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__ */ jsxRuntime.jsx(
-                        Skeleton.ListboxCheckboxItem,
-                        {
-                          addonBefore: item2.addon,
-                          onCheckedChange: () => onSelect(item2, { close: false }),
-                          children: resolveItemProperty(item2.label, { inputValue })
-                        }
-                      )
-                    }
-                  );
-                  break;
-                case "radio":
-                  element = /* @__PURE__ */ jsxRuntime.jsx(
-                    RadixMenu.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__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { addonBefore: item2.addon, children: resolveItemProperty(item2.label, { inputValue }) })
+            options,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                CommandInput,
+                {
+                  onKeyDown: (event) => {
+                    if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      setSubOpen(false);
                     }
-                  );
-                  break;
-              }
-              const group = item2.group;
-              return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-                shouldShowSeparator(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Separator, {}),
-                shouldShowGroup(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { children: group.name }),
-                element
-              ] }, index);
-            })
+                  },
+                  ref: inputRef
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(MenuNestedProvider, { inputRef, level: level + 1, children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, {}) })
+            ]
           }
         )
       }
-    ) }) });
+    );
   }
 );
 MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
 
 const MenuSubTrigger = React.forwardRef(
   ({ children, item, onPointerDown, ...props }, ref) => {
-    const { downshift, pauseInteractionRef } = useCommandContext(
-      "@optiaxiom/react/MenuSubTrigger"
-    );
+    const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
     const { contentRef, open } = useMenuSubContext(
       "@optiaxiom/react/MenuSubTrigger"
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.FilteredSlot, { exclude: "disabled", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem,
       {
         addonAfter: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}),
@@ -2980,6 +2939,9 @@ const MenuSubTrigger = React.forwardRef(
           }
         },
         onPointerEnter: () => {
+          if (highlightedItem !== item) {
+            return;
+          }
           downshift.selectItem(item);
         },
         onPointerLeave: (event) => {
@@ -2987,22 +2949,24 @@ const MenuSubTrigger = React.forwardRef(
           if (!box) {
             return;
           }
-          pauseInteractionRef.current.triangle = {
-            bottom: {
-              x: box.left,
-              y: box.top + box.height
-            },
-            side: {
-              x: event.clientX + 10 * (box.left > event.clientX ? -1 : 1),
-              y: event.clientY
-            },
-            top: {
-              x: box.left,
-              y: box.top
-            }
+          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.triangle = null;
+            pauseInteractionRef.current.isInsideTriangle = null;
           }, 50);
         },
         ref,
@@ -3019,22 +2983,23 @@ function MenuSub({ children, item }) {
     "@optiaxiom/react/MenuSub"
   );
   const { items } = useCommandContext("@optiaxiom/react/MenuSub");
+  const { level } = useMenuNestedContext("@optiaxiom/react/MenuSub");
   const index = items.indexOf(item);
-  const [presence, setPresence] = React.useState();
   const contentRef = React.useRef(null);
+  const inputRef = React.useRef(null);
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(RadixMenu.DropdownMenu, { modal: false, open: activePath[0] === index || presence, children: [
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Popover, { open: activePath[level] === index, children: [
         /* @__PURE__ */ jsxRuntime.jsx(MenuSubTrigger, { item }),
         /* @__PURE__ */ jsxRuntime.jsx(MenuSubContent, { item })
       ] })
@@ -3151,7 +3116,7 @@ const MenuTrigger = React.forwardRef(
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'tdfzjm'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1vmftfb'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {