@optiaxiom/react 1.2.5 → 1.3.0

package/dist/cjs/unstable.js

@@ -3,90 +3,87 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-DE4URqWE.js');
-require('./assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-CV-bql3a.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-CWx9s0VY.css');
+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 reactComposeRefs = require('@radix-ui/react-compose-refs');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
 var reactPopper = require('@radix-ui/react-popper');
 var downshift = require('downshift');
 var reactContext = require('@radix-ui/react-context');
-var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+var RadixVisuallyHidden = require('@radix-ui/react-visually-hidden');
 var reactPortal = require('@radix-ui/react-portal');
 var reactVirtual = require('@tanstack/react-virtual');
-require('./assets/src/select-content/SelectContent.css.ts.vanilla-DXggbRTQ.css');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-4BAxMnL5.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-Bun2UNFP.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-DHSTTORm.css');
+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');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CjfwYd9Q.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-MaOs4its.css');
-require('./assets/src/link/Link.css.ts.vanilla-DsprUWN_.css');
-require('./assets/src/card/Card.css.ts.vanilla-CRUkZJ0N.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-Bz7PeMPd.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-DFwtJh9H.css');
-require('./assets/src/card-action/CardAction.css.ts.vanilla-G-MAb5WN.css');
+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');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-DaibQxBG.css');
-var RadixDialog = require('@radix-ui/react-dialog');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BfzbPCLF.css');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-MqvDJoWy.css');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-Cz62bqT8.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CrqZmJXD.css');
-require('./assets/src/table/Table.css.ts.vanilla-DA5H5_FY.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-gyrGzzA_.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-Dzxs57Ca.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-DARtrZn8.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-MsX92Doe.css');
-require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-BSLfrkW1.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-BR8vi6FR.css');
-require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-DhKbHjAB.css');
-require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-CaPBBNgA.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-Xw-ns80B.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BdKXpj1z.css');
+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');
 var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CjfwYd9Q.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-Cnjh6ZE6.css');
-require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-D7RfKeTc.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-4_F9ttVI.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-DKrCo1ZD.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-CFXSuLJN.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-DnWR9h1S.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-i6CsKaj9.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-Bwmx5Lqj.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-TqOwdkqK.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-CTrZhzGF.css');
+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('@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('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-Bj8DiXwJ.css');
-require('@radix-ui/react-dropdown-menu');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-BlFqBxdI.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-I6c00poA.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CjfwYd9Q.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-DNCCDGec.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-D4QUtJqT.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-Cow23haB.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-CKKVEFPs.css');
-require('./assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-dIk7ESAB.css');
+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('@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-B5VbRhB3.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-xLDa2Hwh.css');
+require('./assets/src/text/Text.css.ts.vanilla-FQ1NB0hD.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-CrrHJq3H.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-Cqb0w2i5.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-DlcmsaMY.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-BGvCoOzl.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-D_jnqlSi.css');
+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('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-CUMPevOq.css');
-require('./assets/src/box/Box.css.ts.vanilla-Dy0kxHbJ.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-R1bNynwK.css');
+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');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -105,7 +102,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var RadixDialog__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixDialog);
+var RadixVisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixVisuallyHidden);
 
 const toPlainDateTime = (date) => new Date(date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1e3).toISOString().slice(0, -1);
 
@@ -248,17 +245,17 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_8zt3s1']});
+var item = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_178wu0q']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...item$3({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...item({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
   }
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'qgo5fk']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1cs9h3b']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -300,26 +297,13 @@ function usePortalPatch(initialHighlightedIndex = -1) {
 
 const [SelectProvider, useSelectContext] = reactContext.createContext("@optiaxiom/react/Select");
 
-function useEffectEvent(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React.useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
 const SelectHiddenSelect = React.forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
-  const { items, itemToValue } = useSelectContext(
-    "@optiaxiom/react/SelectHiddenSelect"
-  );
-  const itemToValueStable = useEffectEvent(itemToValue);
+  const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");
   const options = React.useMemo(
-    () => items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: itemToValueStable(item), children: itemToValueStable(item) }, itemToValueStable(item))),
-    [itemToValueStable, items]
+    () => items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.value, children: item.value }, item.value)),
+    [items]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "select",
     {
       defaultValue,
@@ -361,16 +345,14 @@ const Select = React.forwardRef(
     defaultOpen = false,
     defaultValue,
     disabled,
-    isItemDisabled = () => false,
-    items,
-    itemToLabel = (value2) => value2 ? String(value2) : "",
-    itemToValue = (item) => item,
+    loading,
     name,
     onBlur,
     onChange,
     onOpenChange,
     onValueChange,
     open,
+    options: items,
     required,
     value
   }, outerRef) => {
@@ -383,10 +365,9 @@ const Select = React.forwardRef(
     });
     const forceValueChange = Skeleton.useObserveValue(innerRef, setShadowValue);
     useObserveReset(innerRef, setShadowValue);
-    const itemToValueStable = useEffectEvent(itemToValue);
     const selectedItem = React.useMemo(
-      () => shadowValue !== void 0 ? items.find((item) => itemToValueStable(item) === shadowValue) : void 0,
-      [itemToValueStable, items, shadowValue]
+      () => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0,
+      [items, shadowValue]
     );
     const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
       defaultProp: defaultOpen,
@@ -394,18 +375,16 @@ const Select = React.forwardRef(
       prop: open
     });
     const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-      () => selectedItem ? items.findIndex(
-        (item) => itemToValue(selectedItem) === itemToValue(item)
-      ) : -1
+      () => selectedItem ? items.findIndex((item) => selectedItem.value === item.value) : -1
     );
     const downshift$1 = downshift.useSelect({
       highlightedIndex,
-      isItemDisabled,
+      isItemDisabled: (item) => !!item.disabledReason,
       isOpen: placed,
       // @ts-expect-error -- no harm in supporting read only arrays
       items,
-      itemToKey: (item) => item !== null ? itemToValue(item) : item,
-      itemToString: (item) => item !== null ? itemToLabel(item) : "",
+      itemToKey: (item) => item !== null ? item.value : item,
+      itemToString: (item) => item !== null ? item.label : "",
       onHighlightedIndexChange(changes) {
         if ((changes.type === downshift.useSelect.stateChangeTypes.ItemMouseMove || changes.type === downshift.useSelect.stateChangeTypes.MenuMouseLeave) && isOpen || changes.isOpen) {
           setHighlightedIndex(changes.highlightedIndex);
@@ -415,7 +394,7 @@ const Select = React.forwardRef(
         setIsOpen(isOpen2);
       },
       onSelectedItemChange({ selectedItem: selectedItem2 }) {
-        forceValueChange(itemToValue(selectedItem2) ?? "");
+        forceValueChange(selectedItem2?.value ?? "");
       },
       selectedItem: selectedItem ?? null
     });
@@ -428,8 +407,7 @@ const Select = React.forwardRef(
         highlightedItem: items[highlightedIndex],
         isOpen,
         items,
-        itemToLabel,
-        itemToValue,
+        loading,
         onBlur,
         placed,
         selectedItem,
@@ -514,13 +492,13 @@ const ListboxVirtualized = React.forwardRef(({ children, highlightedItem, items,
         paddingBottom,
         paddingTop
       },
-      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsxs(
+      children: virtualItems.map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsxs(
         Skeleton.Box,
         {
           "data-index": virtualItem.index,
           ref: rowVirtualizer.measureElement,
           children: [
-            children(items[virtualItem.index]),
+            children(items[virtualItem.index], virtualItem.index),
             virtualItem.index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { pb: "2" })
           ]
         },
@@ -531,6 +509,56 @@ const ListboxVirtualized = React.forwardRef(({ children, highlightedItem, items,
 });
 ListboxVirtualized.displayName = "@optiaxiom/react/ListboxVirtualized";
 
+function useEffectEvent(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+const VIRTUALIZE_THRESHOLD = 50;
+const ListboxItemized = React.forwardRef(
+  ({
+    children,
+    empty = "No results found.",
+    highlightedItem,
+    items,
+    itemToKey,
+    loading,
+    onPlacedChange,
+    placed,
+    ...props
+  }, ref) => {
+    const onPlacedChangeStable = useEffectEvent(onPlacedChange ?? (() => {
+    }));
+    React.useEffect(() => {
+      requestAnimationFrame(() => onPlacedChangeStable(true));
+      return () => onPlacedChangeStable(false);
+    }, [onPlacedChangeStable]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Listbox,
+      {
+        asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD && placed,
+        ref,
+        tabIndex: -1,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? placed && /* @__PURE__ */ jsxRuntime.jsx(
+          ListboxVirtualized,
+          {
+            highlightedItem,
+            items,
+            children
+          }
+        ) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: children(item, index) }, itemToKey(item))) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { children: empty }) : items.length > 0 ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { children: empty })
+      }
+    );
+  }
+);
+ListboxItemized.displayName = "@optiaxiom/react/ListboxItemized";
+
 const SelectItem = React.forwardRef(
   ({ children, item, onMouseMove, size, ...props }, ref) => {
     const { downshift, highlightedItem, isOpen, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
@@ -573,74 +601,76 @@ const SelectRadioItem = React.forwardRef(
 );
 SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
 
-var content$3 = Skeleton.recipeRuntime({base:['fwayxp']});
-
 const SelectContent = React.forwardRef(
-  ({
-    align = "start",
-    children,
-    className,
-    loading,
-    side = "bottom",
-    ...props
-  }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+  ({ align = "start", children, side = "bottom", size, ...props }, ref) => {
     const {
       downshift,
       highlightedItem,
       isOpen,
       items,
-      itemToLabel,
-      itemToValue,
+      loading,
       placed,
       setPlaced
     } = useSelectContext("@optiaxiom/react/SelectContent");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.TransitionGroup,
+    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, { open: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.OverlayListbox,
       {
-        onPresenceChange: (presence) => {
-          if (!presence) {
-            setPlaced(presence);
-          }
-        },
-        open: isOpen,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.MenuListbox,
+        asChild: true,
+        maxH: "sm",
+        minW: "trigger",
+        provider: "popper",
+        ref,
+        role: "dialog",
+        size,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactPopper.PopperContent, { align, side, sideOffset: 5, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ListboxItemized,
           {
-            asChild: true,
-            maxH: "sm",
-            minW: "trigger",
-            provider: "popper",
-            ...content$3({}, className),
-            ...boxProps,
-            ...downshift.getMenuProps(
-              { ref, ...restProps },
-              { suppressRefError: !placed }
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactPopper.PopperContent,
-              {
-                align,
-                asChild: !loading && typeof children === "function",
-                onPlaced: () => setPlaced(true),
-                side,
-                sideOffset: 5,
-                children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children ? typeof children === "function" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  ListboxVirtualized,
-                  {
-                    highlightedItem,
-                    items,
-                    children
-                  }
-                ) : children : items.map((item) => {
-                  return /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item, children: itemToLabel(item) }, itemToValue(item));
-                })
+            highlightedItem,
+            items,
+            itemToKey: (item) => item.value,
+            loading,
+            onPlacedChange: setPlaced,
+            placed,
+            ...downshift.getMenuProps({}, { suppressRefError: !placed }),
+            children: children ?? ((item, index) => {
+              if (index === 0) {
+                isFirstItem = true;
+                lastGroup = void 0;
               }
-            )
+              const group = item.group;
+              return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                shouldShowSeparator(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, {}),
+                shouldShowGroup(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { children: group.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectRadioItem,
+                  {
+                    addonBefore: item.addon,
+                    "aria-label": item["aria-label"],
+                    description: item.description,
+                    item,
+                    children: item.label
+                  },
+                  item.value
+                )
+              ] });
+            })
           }
-        ) }) })
+        ) })
       }
-    );
+    ) }) }) });
   }
 );
 SelectContent.displayName = "@optiaxiom/react/SelectContent";
@@ -673,7 +703,7 @@ const SelectTrigger = React.forwardRef(
     placeholder,
     ...props
   }, ref) => {
-    const { disabled, downshift, isOpen, itemToLabel, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
+    const { disabled, downshift, isOpen, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
     const buttonRef = React.useRef(null);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
@@ -686,7 +716,7 @@ const SelectTrigger = React.forwardRef(
       },
       [focusOnOpen]
     );
-    const value = selectedItem ? itemToLabel(selectedItem) || placeholder : placeholder;
+    const value = selectedItem?.value ? selectedItem.label || placeholder : placeholder;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactPopper.PopperAnchor,
       {
@@ -757,8 +787,8 @@ const Clock = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsxs(
         Select,
         {
-          items: hours,
           onValueChange: (hour) => hour && setValue(format({ ...parsed, hour })),
+          options: hours.map((hour) => ({ label: hour, value: hour })),
           value: parsed.hour,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select hour", flex: "1", placeholder: "HH" }),
@@ -769,28 +799,24 @@ const Clock = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsxs(
         Select,
         {
-          items: minutes,
           onValueChange: (minute) => minute && setValue(format({ ...parsed, minute })),
+          options: minutes.map((minute) => ({
+            ariaLabel: `${parseInt(minute)}`,
+            label: minute,
+            value: minute
+          })),
           value: parsed.minute,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select minute", flex: "1", placeholder: "MM" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: minutes.map((minute) => /* @__PURE__ */ jsxRuntime.jsx(
-              SelectRadioItem,
-              {
-                "aria-label": `${parseInt(minute)}`,
-                item: minute,
-                children: minute
-              },
-              minute
-            )) })
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
           ]
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
         Select,
         {
-          items: periods,
-          onValueChange: (meridiem) => meridiem && setValue(format({ ...parsed, meridiem })),
+          onValueChange: (meridiem) => (meridiem === "AM" || meridiem === "PM") && setValue(format({ ...parsed, meridiem })),
+          options: periods.map((period) => ({ label: period, value: period })),
           value: parsed.meridiem,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -838,8 +864,8 @@ function CalendarDay({ children, ...props }) {
 }
 CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
 
-var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',mt:'2',size:'md',transition:'colors'},'_1h13b5x'],variants:{appearance:{'default':'_1b49ntc',holiday:[{color:'fg.error'},'_1rm900o'],range_middle:'_479fpg',selected:[{color:'fg.white'},'pnh3z4'],weekend:[{color:'fg.tertiary'},'a1a5uk']},range:{end:['_150ve9g'],middle:['tvmewa'],start:['_19go4d4']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_5zsqp5']});
+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']});
 
 function CalendarDayButton({
   children,
@@ -859,10 +885,11 @@ function CalendarDayButton({
     Skeleton.Box,
     {
       asChild: true,
+      "data-disabled": modifiers.outside || props.disabled,
       ...button$2(
         {
           appearance: modifiers.range_middle ? "range_middle" : modifiers.selected ? "selected" : modifiers.holiday ? "holiday" : modifiers.weekend ? "weekend" : "default",
-          range: modifiers.range_start && modifiers.range_end ? void 0 : modifiers.range_start ? "start" : modifiers.range_middle ? "middle" : modifiers.range_end ? "end" : void 0
+          range: modifiers.outside || modifiers.range_start && modifiers.range_end ? void 0 : modifiers.range_start ? "start" : modifiers.range_middle ? "middle" : modifiers.range_end ? "end" : void 0
         },
         className
       ),
@@ -904,14 +931,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1w3br18']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1ukbjap']});
 
 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'},'_84h1eu']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_1ja9z4b']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -937,7 +964,7 @@ function CalendarPreviousMonthButton({
 CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
 
 function CalendarWeek({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", gap: "2", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Week, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", gap: "2", mt: "2", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Week, { ...props, children }) });
 }
 CalendarWeek.displayName = "@optiaxiom/react/CalendarWeek";
 
@@ -1038,6 +1065,7 @@ const Calendar = React.forwardRef(
                 ...min ? [{ before: min }] : [],
                 ...max ? [{ after: max }] : []
               ],
+              fixedWeeks: mode === "range",
               mode,
               modifiers: { holiday, weekend },
               numberOfMonths: mode === "range" ? numberOfMonths : 1,
@@ -1048,6 +1076,7 @@ const Calendar = React.forwardRef(
               },
               required: true,
               selected: value,
+              showOutsideDays: mode === "range",
               today
             }
           ),
@@ -1076,7 +1105,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'_1bsyws2'});
+var root = Skeleton.recipeRuntime({base:'m9j138'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1087,7 +1116,7 @@ ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-var card = Skeleton.recipeRuntime({base:['_9v3ucd',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'u4v2ms']});
+var card = Skeleton.recipeRuntime({base:['_1440ip6',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'sddc3c']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -1119,16 +1148,16 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'jproer'],variants:{visible:{false:'ym8uww',true:'fign15'}}});
+var content$3 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_1lt85ke'],variants:{visible:{false:'_1rygawp',true:'_1ucphw9'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...content$2({ visible }, className), ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...content$3({ visible }, className), ...props, children });
   }
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var action = Skeleton.recipeRuntime({base:['oxlg66']});
+var action = Skeleton.recipeRuntime({base:['_1cpbj8u']});
 
 const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1164,7 +1193,7 @@ const CardCheckbox = React.forwardRef(
               shift: Boolean(children)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { id: labelPrefixId, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { id: labelPrefixId, children: [
             "Check to ",
             checked ? "unselect" : "select"
           ] }) })
@@ -1198,7 +1227,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_9fsv0m'],variants:{orientation:{horizontal:[{w:'auto'},'m10qi7'],vertical:[{w:'full'},'x4dzne']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1wbz9af'],variants:{orientation:{horizontal:[{w:'auto'},'_1lqtcet'],vertical:[{w:'full'},'dp5jov']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -1224,7 +1253,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['_1lx6sij',{alignSelf:'stretch'},'nmpkrw'],variants:{orientation:{horizontal:['_1s6v127'],vertical:['_4rrvmw']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_1vhbqt2',{alignSelf:'stretch'},'_12oievt'],variants:{orientation:{horizontal:['_1pkn190'],vertical:['_4l5cdf']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1262,26 +1291,7 @@ const CardTitle = React.forwardRef(
 );
 CardTitle.displayName = "@optiaxiom/react/CardTitle";
 
-const [ComboboxProvider, useComboboxContext] = reactContext.createContext("@optiaxiom/react/Combobox");
-
-const ComboboxDialogContent = React.forwardRef(({ "aria-label": ariaLabel, children, minW: _minW, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.DialogContent, { ref, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { children: ariaLabel }) }),
-    children
-  ] });
-});
-ComboboxDialogContent.displayName = "@optiaxiom/react/ComboboxDialogContent";
-
-function ComboboxPopover(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { modal: true, ...props });
-}
-ComboboxPopover.displayName = "@optiaxiom/react/ComboboxPopover";
-
-const ComboboxPopoverContent = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
-});
-ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
-
+const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
 const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
 
 const collator = new Intl.Collator(void 0, {
@@ -1295,7 +1305,7 @@ function fuzzysearch(haystack, needle) {
     return false;
   }
   if (nlen === hlen) {
-    return needle === haystack;
+    return collator.compare(needle, haystack) === 0;
   }
   outer:
     for (let i = 0, j = 0; i < nlen; i++) {
@@ -1311,105 +1321,80 @@ function fuzzysearch(haystack, needle) {
 }
 
 const useCommandItems = ({
-  defaultFilter,
-  defaultItems,
-  inputValue: inputValueProp,
-  items: itemsProp,
-  itemToLabel,
-  onInputValueChange
+  inputValue,
+  options
 }) => {
-  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
-    defaultProp: "",
-    onChange: onInputValueChange,
-    prop: inputValueProp
+  const filterFn = useEffectEvent((item, inputValue2) => {
+    const string = resolveItemProperty(item.label, {
+      inputValue: inputValue2
+    }).normalize();
+    return item.visible ? resolveItemProperty(item.visible, { inputValue: inputValue2 }) : inputValue2 ? fuzzysearch(string, inputValue2) || item.keywords && fuzzysearch(item.keywords, inputValue2) : true;
   });
-  const filterFn = useEffectEvent(
-    defaultFilter ?? ((item, inputValue2) => {
-      const string = itemToLabel(item).normalize();
-      return fuzzysearch(string, inputValue2);
-    })
-  );
-  const [itemsState, setItemsState] = React.useState(
-    defaultItems ? filter(defaultItems, inputValue, filterFn) : []
-  );
-  const items = typeof itemsProp !== "undefined" ? itemsProp : itemsState;
-  return [
-    items,
-    inputValue,
-    useEffectEvent((inputValue2) => {
-      setInputValue(inputValue2);
-      if (typeof itemsProp === "undefined" && defaultItems) {
-        setItemsState(filter(defaultItems, inputValue2, filterFn));
+  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 filter = (items, inputValue, filterFn) => {
-  const substring = (inputValue ?? "").normalize();
-  return inputValue ? items.filter((item) => filterFn(item, substring)) : items;
+    });
+  }, [options, filterFn, inputValue]);
 };
 
 function Command({
   children,
-  defaultFilter,
-  defaultItems,
+  empty,
   inputValue: inputValueProp,
-  isItemDisabled = () => false,
-  isItemSelected = () => false,
-  items: itemsProp,
-  itemToLabel = (value) => value ? String(value) : "",
-  itemToSubItems,
+  loading,
+  onHover,
   onInputValueChange,
-  onItemSelect
+  onSelect: onItemSelect,
+  options
 }) {
-  const [items, inputValue, setInputValue] = useCommandItems({
-    defaultFilter,
-    defaultItems,
-    inputValue: inputValueProp,
-    items: itemsProp,
-    itemToLabel,
-    onInputValueChange
+  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
   });
-  const [lastInteractionSource, setLastInteractionSource] = React.useState("pointer");
+  const items = useCommandItems({ inputValue, options });
   const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    () => items.findIndex((item, index) => isItemSelected(item, index))
+    () => items.findIndex((item) => resolveItemProperty(item.selected))
   );
-  const [highlightedSubIndex, setHighlightedSubIndex] = React.useState(-1);
+  const setInputValueStable = useEffectEvent(setInputValue);
+  React.useEffect(() => {
+    if (placed) {
+      setInputValueStable("");
+    }
+  }, [placed, setInputValueStable]);
+  const pauseInteractionRef = React.useRef({
+    timer: void 0,
+    triangle: null
+  });
   const downshift$1 = downshift.useCombobox({
-    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
+    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
     inputValue,
-    isItemDisabled,
+    isItemDisabled: (item) => Boolean(resolveItemProperty(item?.disabledReason)),
     isOpen: placed,
-    // @ts-expect-error -- no harm in supporting read only arrays
     items,
-    itemToString: (item) => item !== null ? itemToLabel(item) : "",
+    itemToString: (item) => item !== null ? resolveItemProperty(item.label, { inputValue }) : "",
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave) {
-        setHighlightedIndex(highlightedIndex2);
-      }
-      if (type === downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp || type === downshift.useCombobox.stateChangeTypes.InputKeyDownPageDown || type === downshift.useCombobox.stateChangeTypes.InputKeyDownPageUp) {
-        setLastInteractionSource("keyboard");
-      } else {
-        setLastInteractionSource("pointer");
-      }
-      if (highlightedIndex2 !== -1 && itemToSubItems?.(items[highlightedIndex2])?.length) {
-        setHighlightedSubIndex(0);
-      } else {
-        setHighlightedSubIndex(-1);
+      if (type === downshift.useCombobox.stateChangeTypes.MenuMouseLeave) {
+        return;
       }
-    },
-    onIsOpenChange({ isOpen, type }) {
-      if (isOpen) {
-        if (type === downshift.useCombobox.stateChangeTypes.InputClick || type === downshift.useCombobox.stateChangeTypes.ToggleButtonClick) {
-          setLastInteractionSource("pointer");
-        } else {
-          setLastInteractionSource("keyboard");
-        }
+      setHighlightedIndex(highlightedIndex2);
+      if (highlightedIndex2 !== -1 && type === downshift.useCombobox.stateChangeTypes.ItemMouseMove) {
+        onHover?.(items[highlightedIndex2]);
       }
     },
     onSelectedItemChange({ selectedItem, type }) {
       if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
-        onItemSelect?.(selectedItem);
+        onItemSelect?.(selectedItem, {
+          close: type !== downshift.useCombobox.stateChangeTypes.FunctionSelectItem
+        });
       }
     },
     selectedItem: null,
@@ -1424,6 +1409,7 @@ function Command({
             ...changes,
             /**
              * Keep the selected option highlighted rather than resetting to -1
+             * TODO: reset if activePath had values
              */
             highlightedIndex: state.highlightedIndex
           };
@@ -1438,30 +1424,15 @@ function Command({
     CommandProvider,
     {
       downshift: downshift$1,
+      empty,
       highlightedItem: items[downshift$1.highlightedIndex],
-      highlightedSubIndex: highlightedSubIndex === -1 && items[downshift$1.highlightedIndex] && itemToSubItems?.(items[downshift$1.highlightedIndex])?.length ? 0 : highlightedSubIndex,
-      isItemDisabled,
-      isItemSelected,
+      inputValue,
       items,
-      itemToLabel,
-      itemToSubItems,
-      lastInteractionSource,
+      loading,
+      pauseInteractionRef,
       placed,
-      setHighlightedIndex: (index, source) => {
-        setHighlightedIndex(index);
-        setLastInteractionSource(source);
-      },
-      setHighlightedSubIndex: (index, source) => {
-        setHighlightedSubIndex(index);
-        setLastInteractionSource(source);
-      },
-      setInputValue: useEffectEvent((newInputValue) => {
-        if (inputValue === "" && newInputValue === "") {
-          onInputValueChange?.("");
-        } else {
-          setInputValue(newInputValue);
-        }
-      }),
+      setHighlightedIndex,
+      setInputValue,
       setPlaced,
       children
     }
@@ -1469,331 +1440,147 @@ function Command({
 }
 Command.displayName = "@optiaxiom/react/Command";
 
-function Combobox({
-  children,
-  defaultOpen = false,
-  onOpenChange,
-  open: openProp,
-  ...props
-}) {
-  const components = useResponsiveMatches({
-    base: {
-      Content: ComboboxDialogContent,
-      Root: Skeleton.Dialog,
-      Trigger: Skeleton.DialogTrigger
-    },
-    sm: {
-      Content: ComboboxPopoverContent,
-      Root: ComboboxPopover,
-      Trigger: Skeleton.PopoverTrigger
-    }
-  });
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxProvider, { components, open, setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Command, { ...props, children }) }) });
-}
-Combobox.displayName = "@optiaxiom/react/Combobox";
-
-var item$2 = Skeleton.recipeRuntime({base:'_14286wt'});
-
-const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { lastInteractionSource } = useCommandContext(
-    "@optiaxiom/react/CommandFocusableItem"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Box,
-    {
-      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : void 0,
-      ref,
-      ...item$2({}, className),
-      ...props,
-      children
-    }
-  );
-});
-CommandFocusableItem.displayName = "@optiaxiom/react/CommandFocusableItem";
+const CommandInput = React.forwardRef(
+  ({ size, ...props }, ref) => {
+    const { downshift, setInputValue } = useCommandContext(
+      "@optiaxiom/react/CommandInput"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Input,
+      {
+        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
+        size,
+        ...downshift.getInputProps({
+          ref,
+          ...props,
+          onChange: (event) => {
+            setInputValue("value" in event.target ? event.target.value : "");
+          }
+        })
+      }
+    );
+  }
+);
+CommandInput.displayName = "@optiaxiom/react/CommandInput";
 
 const CommandItem = React.forwardRef(
-  ({ children, item, selected, size, ...props }, ref) => {
-    const { downshift, highlightedItem, isItemSelected, items } = useCommandContext("@optiaxiom/react/CommandItem");
+  ({ asChild, children, item, selected, size, ...props }, ref) => {
+    const { downshift, highlightedItem, inputValue, pauseInteractionRef } = useCommandContext("@optiaxiom/react/CommandItem");
     const itemProps = downshift.getItemProps({
-      "aria-selected": selected ?? isItemSelected(item, items.indexOf(item)),
+      "aria-selected": selected ?? resolveItemProperty(item.selected),
       item,
+      onClick: (event) => {
+        if (event.currentTarget instanceof HTMLAnchorElement) {
+          event.preventDefault();
+        }
+      },
+      onMouseMove: (event) => {
+        if (resolveItemProperty(item.disabledReason)) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+          return;
+        }
+        if (!pauseInteractionRef.current.triangle) {
+          return;
+        }
+        if (isInsideTriangle(pauseInteractionRef.current.triangle, {
+          x: event.clientX,
+          y: event.clientY
+        })) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+          window.clearTimeout(pauseInteractionRef.current.timer);
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.triangle = null;
+          }, 50);
+        } else {
+          pauseInteractionRef.current.triangle = null;
+        }
+      },
       ref,
       ...props
     });
+    const detail = resolveItemProperty(item.detail, { inputValue });
     return /* @__PURE__ */ jsxRuntime.jsx(
-      CommandFocusableItem,
+      Skeleton.Box,
       {
+        asChild,
         "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
         "data-highlighted": highlightedItem === item ? "" : void 0,
         size,
         tabIndex: -1,
         ...itemProps,
-        children
+        ...item.link && { href: item.link },
+        children: Skeleton.decorateChildren(
+          { asChild, children },
+          (children2) => children2 ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            item.parentOption && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", children: resolveItemProperty(item.parentOption.label, {
+                inputValue
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}) })
+            ] }),
+            resolveItemProperty(item.label, { inputValue }),
+            detail && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", children: detail })
+          ] })
+        )
       }
     );
   }
 );
 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 ComboboxItem = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
+const CommandListbox = React.forwardRef(
+  ({ children, size, ...props }, ref) => {
+    const { downshift, highlightedItem, inputValue, items, placed, setPlaced } = useCommandContext("@optiaxiom/react/CommandListbox");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ListboxItemized,
+      {
+        highlightedItem,
+        items,
+        itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
+        onPlacedChange: setPlaced,
+        placed,
+        size,
+        ...downshift.getMenuProps({ ref, ...props }),
+        children
+      }
+    );
+  }
 );
-ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
+CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
 
-const ComboboxCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxCheckboxItem, { children }) });
-});
-ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
+const [DataTableProvider, useDataTableContext] = reactContext.createContext("@optiaxiom/react/DataTable");
 
-const CommandInput = React.forwardRef(
-  ({ onKeyDown, size, ...props }, ref) => {
-    const {
-      downshift,
-      highlightedItem,
-      highlightedSubIndex,
-      itemToSubItems,
-      setHighlightedSubIndex,
-      setInputValue
-    } = useCommandContext("@optiaxiom/react/CommandInput");
-    React.useEffect(() => {
-      setInputValue("");
-    }, [setInputValue]);
+const DataTable = React.forwardRef(
+  ({ children, table, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Input,
+      Skeleton.Flex,
       {
-        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
-        size,
-        ...downshift.getInputProps({
-          ...props,
-          onChange: (event) => {
-            setInputValue("value" in event.target ? event.target.value : "");
-          },
-          onKeyDown: (event) => {
-            onKeyDown?.(event);
-            if (event.defaultPrevented) {
-              return;
-            }
-            if (highlightedItem && highlightedSubIndex !== -1 && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Enter")) {
-              const subItems = itemToSubItems?.(highlightedItem) ?? [];
-              if (subItems.length === 0) {
-                return;
-              }
-              event.preventDefault();
-              Object.assign(event.nativeEvent, {
-                preventDownshiftDefault: true
-              });
-              if (event.key === "ArrowRight") {
-                setHighlightedSubIndex(
-                  highlightedSubIndex === subItems.length - 1 ? 0 : highlightedSubIndex + 1,
-                  "keyboard"
-                );
-              } else if (event.key === "ArrowLeft") {
-                setHighlightedSubIndex(
-                  highlightedSubIndex === 0 ? subItems.length - 1 : highlightedSubIndex - 1,
-                  "keyboard"
-                );
-              } else if (event.key === "Enter") {
-                downshift.selectItem(subItems[highlightedSubIndex]);
-              }
-            }
-          },
-          ref
-        })
+        gap: "8",
+        justifyContent: "flex-start",
+        maxH: "full",
+        maxW: "full",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DataTableProvider, { table, children })
       }
     );
   }
 );
-CommandInput.displayName = "@optiaxiom/react/CommandInput";
-
-const ComboboxInput = React.forwardRef(
-  (props, ref) => {
-    const { downshift, highlightedItem } = useCommandContext(
-      "@optiaxiom/react/ComboboxInput"
-    );
-    const { open } = useComboboxContext("@optiaxiom/react/ComboboxInput");
-    const [minWidth, setMinWidth] = React.useState(160);
-    const containerRef = React.useRef(null);
-    React.useEffect(() => {
-      if (!containerRef.current) {
-        return;
-      }
-      const rect = containerRef.current.getBoundingClientRect();
-      if (open && rect.width > minWidth) {
-        setMinWidth(rect.width);
-      }
-    }, [downshift.inputValue, minWidth, open]);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      CommandInput,
-      {
-        htmlSize: 1,
-        m: "4",
-        onKeyDown: (event) => {
-          if (!(event.target instanceof HTMLInputElement)) {
-            return;
-          }
-          if (event.key === " " && !event.target.value) {
-            event.preventDefault();
-            downshift.selectItem(highlightedItem);
-          }
-        },
-        ref,
-        ...props
-      }
-    ) });
-  }
-);
-ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
-
-const ComboboxRadioItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
-});
-ComboboxRadioItem.displayName = "@optiaxiom/react/ComboboxRadioItem";
-
-const VIRTUALIZE_THRESHOLD = 50;
-const CommandListbox = React.forwardRef(
-  ({ children, empty = "No results found.", loading, size, ...props }, ref) => {
-    const { downshift, highlightedItem, items, placed, setPlaced } = useCommandContext("@optiaxiom/react/CommandListbox");
-    React.useEffect(() => {
-      requestAnimationFrame(() => setPlaced(true));
-      return () => setPlaced(false);
-    }, [setPlaced]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Listbox,
-      {
-        asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD && placed,
-        size,
-        ...downshift.getMenuProps({ ref, ...props }),
-        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? placed && /* @__PURE__ */ jsxRuntime.jsx(
-          ListboxVirtualized,
-          {
-            highlightedItem,
-            items,
-            children
-          }
-        ) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: children(item) }, index)) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { children: empty }) : items.length > 0 ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { children: empty })
-      }
-    );
-  }
-);
-CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
-
-const ComboboxListbox = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    const { itemToLabel } = useCommandContext(
-      "@optiaxiom/react/ComboboxListbox"
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, tabIndex: -1, ...props, children: children ?? ((item) => /* @__PURE__ */ jsxRuntime.jsx(ComboboxRadioItem, { item, children: itemToLabel(item) })) });
-  }
-);
-ComboboxListbox.displayName = "@optiaxiom/react/ComboboxListbox";
-
-const ComboboxContent = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    const p = useResponsiveMatches({
-      base: "8",
-      sm: "4"
-    });
-    const { labelId } = Skeleton.useFieldContext();
-    const { components } = useComboboxContext(
-      "@optiaxiom/react/ComboboxContent"
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      components.Content,
-      {
-        "aria-labelledby": labelId,
-        overflow: "hidden",
-        p,
-        ref,
-        ...props,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ComboboxInput, { placeholder: "Search..." }),
-          /* @__PURE__ */ jsxRuntime.jsx(ComboboxListbox, {})
-        ] })
-      }
-    );
-  }
-);
-ComboboxContent.displayName = "@optiaxiom/react/ComboboxContent";
-
-const ComboboxFooter = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxFooter, { ref, ...props });
-  }
-);
-ComboboxFooter.displayName = "@optiaxiom/react/ComboboxFooter";
-
-const ComboboxGroup = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxGroup, { ref, ...props });
-  }
-);
-ComboboxGroup.displayName = "@optiaxiom/react/ComboboxGroup";
-
-const ComboboxLabel = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { ref, ...props });
-  }
-);
-ComboboxLabel.displayName = "@optiaxiom/react/ComboboxLabel";
-
-const ComboboxSeparator = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { ref, ...props });
-});
-ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
-
-const ComboboxTrigger = React.forwardRef(
-  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
-    const { components, setOpen } = useComboboxContext(
-      "@optiaxiom/react/ComboboxTrigger"
-    );
-    const buttonRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      components.Trigger,
-      {
-        "aria-labelledby": labelId,
-        asChild: true,
-        onKeyDown: (event) => {
-          switch (event.key) {
-            case "ArrowDown":
-            case "ArrowUp":
-              setOpen(true);
-          }
-        },
-        ref,
-        ...props,
-        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
-      }
-    );
-  }
-);
-ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
-
-const [DataTableProvider, useDataTableContext] = reactContext.createContext("@optiaxiom/react/DataTable");
-
-const DataTable = React.forwardRef(
-  ({ children, table, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Flex,
-      {
-        gap: "8",
-        justifyContent: "flex-start",
-        maxH: "full",
-        maxW: "full",
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(DataTableProvider, { table, children })
-      }
-    );
-  }
-);
-DataTable.displayName = "@optiaxiom/react/DataTable";
+DataTable.displayName = "@optiaxiom/react/DataTable";
 
 const IconSort = Skeleton.withIcon(
   {
@@ -1840,17 +1627,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_22k295'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'pafxzm']});
+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']});
 
 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$1(), 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$2(), 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'},'_1kzywp6']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'xuzae'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_12oj5j7'],variants:{active:{false:'_1usa78f',true:'_1ytyt7y'}}});
+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'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1879,7 +1666,7 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
         ) }),
         header.column.columnDef.enableSorting ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Cover, { asChild: true, inset: true, ...button$1(), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
           children,
-          sortDir && /* @__PURE__ */ jsxRuntime.jsxs(reactVisuallyHidden.VisuallyHidden, { children: [
+          sortDir && /* @__PURE__ */ jsxRuntime.jsxs(RadixVisuallyHidden.VisuallyHidden, { children: [
             "sorted ",
             sortDir === "asc" ? "ascending" : "descending"
           ] }),
@@ -1903,22 +1690,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'},'_19hiexi'],variants:{layout:{auto:['lpim7t'],fixed:[{display:'grid'},'_448yrh']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_1gftj40']});
+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']});
 
 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:['jli4x9']});
+var body = Skeleton.recipeRuntime({base:['u4hmdj']});
 
 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'},'p72438']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1qd7285']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1930,20 +1717,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:['_14xes2s',{transition:'colors',w:'full'},'_1qlkiw3']});
+var row = Skeleton.recipeRuntime({base:['xzaq7',{transition:'colors',w:'full'},'_7m0yfi']});
 
 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'},'_1iuw7iz'],variants:{pinned:{left:'y2wztl',right:'n26krp'},pinnedType:{body:'_1k2vu7v',header:{}}}});
-var cellOffsetVar = 'var(--_1r7wj72)';
-var cellSizeVar = 'var(--oqs8rg)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_1dvu9uq']});
-var leftTotalSizeVar = 'var(--_12zd1fa)';
-var rightTotalSizeVar = 'var(--dm8p5p)';
-var table = Skeleton.recipeRuntime({base:'cl3n7r',variants:{pinned:{both:'_1v0nhcu',left:'_1xvq3du',none:{},right:'tjzwgn'}}});
+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'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -2121,9 +1908,12 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
-var addon = Skeleton.recipeRuntime({base:'w0mlxs',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'_1r9phfc',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
-const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
+const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({
+  label: size,
+  value: size
+}));
 const DataTableFooter = React.forwardRef(
   ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
     const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
@@ -2145,8 +1935,8 @@ const DataTableFooter = React.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsxs(
               Select,
               {
-                items: pageSizeOptions,
                 onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
+                options: pageSizeOptions,
                 value: pagination.pageSize.toString(),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -2203,7 +1993,7 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_3xxe0i'});
+var picker = Skeleton.recipeRuntime({base:'_1wwhkc9'});
 
 function toInstant(str) {
   const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
@@ -2377,7 +2167,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1jbn8se']});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'snk0cb']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -2504,7 +2294,7 @@ function DateRangePicker({
 }
 DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
 
-var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_142opfz']});
+var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});
 
 const DateRangePickerContent = React.forwardRef(
   ({
@@ -2536,6 +2326,7 @@ const DateRangePickerContent = React.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(
           Calendar,
           {
+            alignSelf: "start",
             holiday,
             max,
             min,
@@ -2607,124 +2398,7 @@ const DateRangePickerTrigger = React.forwardRef(
 );
 DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
 
-const [DropdownMenuComboboxProvider, useDropdownMenuComboboxContext] = reactContext.createContext("@optiaxiom/react/DropdownMenuCombobox");
-
-function DropdownMenuCombobox({
-  children,
-  defaultOpen,
-  onItemSelect,
-  onOpenChange,
-  open: openProp,
-  ...props
-}) {
-  const { setOpen: setOpenRoot } = Skeleton.useDropdownMenuContext(
-    "@optiaxiom/react/DropdownMenuCombobox"
-  );
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const inputRef = React.useRef(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DropdownMenuSub, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxProvider, { inputRef, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Command,
-    {
-      onItemSelect: (item) => {
-        onItemSelect?.(item);
-        setOpenRoot(false);
-      },
-      ...props,
-      children
-    }
-  ) }) });
-}
-DropdownMenuCombobox.displayName = "@optiaxiom/react/DropdownMenuCombobox";
-
-const DropdownMenuComboboxInput = React.forwardRef((props, outerRef) => {
-  const { downshift, highlightedItem } = useCommandContext(
-    "@optiaxiom/react/DropdownMenuComboboxInput"
-  );
-  const { inputRef } = useDropdownMenuComboboxContext(
-    "@optiaxiom/react/DropdownMenuComboboxInput"
-  );
-  const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandInput,
-    {
-      htmlSize: 10,
-      m: "4",
-      onKeyDown: (event) => {
-        if (!(event.target instanceof HTMLInputElement)) {
-          return;
-        }
-        if (event.key === " " && !event.target.value) {
-          event.preventDefault();
-          downshift.selectItem(highlightedItem);
-        }
-      },
-      ref,
-      ...props
-    }
-  );
-});
-DropdownMenuComboboxInput.displayName = "@optiaxiom/react/DropdownMenuComboboxInput";
-
-const DropdownMenuAutocompleteItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxItem, { children }) });
-});
-DropdownMenuAutocompleteItem.displayName = "@optiaxiom/react/DropdownMenuAutocompleteItem";
-
-const DropdownMenuComboboxListbox = React.forwardRef(({ children, ...props }, ref) => {
-  const { itemToLabel } = useCommandContext(
-    "@optiaxiom/react/DropdownMenuComboboxListbox"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, ...props, children: children ?? ((item) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuAutocompleteItem, { item, children: itemToLabel(item) }, item)) });
-});
-DropdownMenuComboboxListbox.displayName = "@optiaxiom/react/DropdownMenuComboboxListbox";
-
-const DropdownMenuComboboxContent = React.forwardRef(({ children, onMouseMove, ...props }, outerRef) => {
-  const { presence } = Skeleton.useDropdownMenuSubContext(
-    "@optiaxiom/react/DropdownMenuComboboxContent"
-  );
-  const { inputRef } = useDropdownMenuComboboxContext(
-    "@optiaxiom/react/DropdownMenuComboboxContent"
-  );
-  const innerRef = React.useRef(null);
-  const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-  React.useEffect(() => {
-    const container = innerRef.current;
-    if (!container || !presence) {
-      return;
-    }
-    const listener = () => inputRef.current?.focus();
-    container.addEventListener("focus", listener);
-    return () => container.removeEventListener("focus", listener);
-  }, [inputRef, presence]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.DropdownMenuSubContent,
-    {
-      onMouseMove: (event) => {
-        onMouseMove?.(event);
-        inputRef.current?.focus();
-      },
-      ref,
-      role: "dialog",
-      ...props,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxInput, { placeholder: "Search..." }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxListbox, {})
-      ] })
-    }
-  );
-});
-DropdownMenuComboboxContent.displayName = "@optiaxiom/react/DropdownMenuComboboxContent";
-
-const DropdownMenuComboboxTrigger = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DropdownMenuSubTrigger, { "aria-haspopup": "dialog", ref, ...props });
-});
-DropdownMenuComboboxTrigger.displayName = "@optiaxiom/react/DropdownMenuComboboxTrigger";
-
-var mark = Skeleton.recipeRuntime({base:'i6obck'});
+var mark = Skeleton.recipeRuntime({base:'_1mepjeg'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2756,8 +2430,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'_7a7gm',variants:{empty:{false:{},true:'v0acjn'}}});
-var input$1 = Skeleton.recipeRuntime({base:'w0lpc1'});
+var editor = Skeleton.recipeRuntime({base:'osf8rr',variants:{empty:{false:{},true:'hsmubj'}}});
+var input$1 = Skeleton.recipeRuntime({base:'h6o0je'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2837,8 +2511,8 @@ function getText(element) {
   return text;
 }
 
-var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'k31rlt']});
-var content = Skeleton.recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
+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 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(
@@ -2858,7 +2532,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({ filled }), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\xA0" }) })
+            /* @__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.ButtonAddon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleDown, {}) })
         ]
@@ -2868,7 +2542,7 @@ const LabelMenuButton = React.forwardRef(
 );
 LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
 
-var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'ikdrzs']});
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_45vo41']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -2893,289 +2567,635 @@ const Layout = React.forwardRef(
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_18b6ch8'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
-
-const Pill = React.forwardRef(
-  ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
-      {
-        asChild: true,
-        "data-disabled": disabled ? "" : void 0,
-        ...pill({ size }, className),
-        ...boxProps,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { disabled, ref, ...restProps, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { truncate: true, children }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}) })
-        ] })
-      }
-    );
-  }
-);
-Pill.displayName = "@optiaxiom/react/Pill";
-
-const PillGroup = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "12", ref, ...props, children });
-  }
-);
-PillGroup.displayName = "@optiaxiom/react/PillGroup";
-
-const SelectGroup = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxGroup, { ref, ...props });
-  }
-);
-SelectGroup.displayName = "@optiaxiom/react/SelectGroup";
-
-const SelectLabel = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { ref, ...props });
-  }
-);
-SelectLabel.displayName = "@optiaxiom/react/SelectLabel";
-
-const SelectSeparator = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { ref, ...props });
-  }
-);
-SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
+const [MenuProvider, useMenuContext] = reactContext.createContext("@optiaxiom/react/Menu");
 
-const [SpotlightProvider, useSpotlightContext] = reactContext.createContext("@optiaxiom/react/Spotlight");
+function MenuPopover(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { modal: true, ...props });
+}
+MenuPopover.displayName = "@optiaxiom/react/MenuPopover";
 
-function Spotlight({
+function Menu({
   children,
+  defaultInputVisible,
   defaultOpen = false,
+  inputValue: inputValueProp,
+  onInputValueChange,
   onOpenChange,
   open: openProp,
+  options: optionsProp,
+  placeholder = "Filter...",
+  size: sizeProp,
   ...props
 }) {
+  const size = useResponsiveMatches({
+    base: "lg",
+    sm: sizeProp ?? "sm"
+  });
+  const Comp = size === "sm" ? MenuPopover : Skeleton.Dialog;
   const [open, setOpen] = reactUseControllableState.useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(SpotlightProvider, { open, setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Command, { ...props, children }) }) });
-}
-Spotlight.displayName = "@optiaxiom/react/Spotlight";
-
-const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children, size: _size, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Skeleton.DialogContent,
-    {
-      gap: "0",
-      overflow: "hidden",
-      pb: "24",
-      ref,
-      transitionType: "pop",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { children: ariaLabel ?? "Quick search" }) }),
-        children
-      ]
+  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
+  });
+  const [activePath, setActivePath] = React.useState([]);
+  React.useEffect(() => {
+    if (inputValue && size === "sm") {
+      setActivePath((path) => path.length ? [] : path);
     }
-  );
-});
-SpotlightContent.displayName = "@optiaxiom/react/SpotlightContent";
+  }, [inputValue, size]);
+  React.useEffect(() => {
+    if (size === "sm") {
+      if (!open) {
+        setActivePath((path) => path.length ? [] : path);
+      }
+    } else {
+      if (open) {
+        setActivePath((path) => path.length ? [] : path);
+      }
+    }
+  }, [open, size]);
+  const inputRef = React.useRef(null);
+  const options = React.useMemo(
+    () => activePath.length && size === "lg" ? optionsProp[activePath[0]].subOptions ?? [] : size === "sm" ? optionsProp.map((option) => ({
+      ...option,
+      label: option.subOptions ? resolveItemProperty(option.label, { inputValue }).replace(
+        "\u2026",
+        ""
+      ) : resolveItemProperty(option.label, { inputValue })
+    })) : optionsProp,
+    [activePath, inputValue, optionsProp, size]
+  );
+  const hasSelectableItem = React.useMemo(
+    () => options.some((item) => "selected" in item),
+    [options]
+  );
+  const inputDefaultVisibleRef = React.useRef(hasSelectableItem);
+  inputDefaultVisibleRef.current = hasSelectableItem || defaultInputVisible || false;
+  const [inputVisible, setInputVisible] = React.useState(
+    inputDefaultVisibleRef.current
+  );
+  React.useEffect(() => {
+    if (inputValue) {
+      setInputVisible(true);
+    }
+  }, [inputValue]);
+  React.useEffect(() => {
+    if (open) {
+      setInputVisible(inputDefaultVisibleRef.current);
+    }
+  }, [activePath, open]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MenuProvider,
+    {
+      activePath,
+      inputRef,
+      inputVisible,
+      onSelect: (item, { close }) => {
+        item.execute?.({ inputValue });
+        if (typeof openProp === "undefined" && close) {
+          setOpen(false);
+        }
+      },
+      open,
+      placeholder,
+      setActivePath,
+      setOpen,
+      size,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Command,
+        {
+          inputValue,
+          onHover: (item) => {
+            if (item.subOptions?.length) {
+              const index = options.indexOf(item);
+              setActivePath((path) => !path.includes(index) ? [index] : path);
+            } else {
+              setActivePath((path) => path.length ? [] : path);
+            }
+          },
+          onInputValueChange: setInputValue,
+          onSelect: (item, { close }) => {
+            if (item.subOptions?.length) {
+              const index = options.indexOf(item);
+              setActivePath((path) => !path.includes(index) ? [index] : path);
+            } else {
+              item.execute?.({ inputValue });
+              if (typeof openProp === "undefined" && close) {
+                setOpen(false);
+              }
+            }
+          },
+          options,
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+}
+Menu.displayName = "@optiaxiom/react/Menu";
 
-const SpotlightEmpty = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { fontSize: "lg", gap: "12", p: "32", ref, ...props });
+const MenuDialogContent = React.forwardRef(
+  ({
+    align: _align,
+    "aria-label": ariaLabel,
+    children,
+    side: _side,
+    sideOffset: _sideOffset,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.DialogContent, { ref, transitionType: "pop", ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogHeader, { children: ariaLabel }) }),
+      children
+    ] });
   }
 );
-SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
+MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1e8glwj']});
+var input = Skeleton.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'f6257q']}}});
 
-const SpotlightInput = React.forwardRef(
-  ({ addonAfter, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+const MenuInput = React.forwardRef(
+  ({ className, ...props }, outerRef) => {
+    const { inputRef, open, size } = useMenuContext(
+      "@optiaxiom/react/MenuInput"
+    );
+    const { downshift, highlightedItem } = useCommandContext(
+      "@optiaxiom/react/MenuInput"
+    );
+    const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
+    const [minWidth, setMinWidth] = React.useState(160);
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!containerRef.current) {
+        return;
+      }
+      const rect = containerRef.current.getBoundingClientRect();
+      if (open && rect.width > minWidth) {
+        setMinWidth(rect.width);
+      }
+    }, [downshift.inputValue, minWidth, open]);
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
       CommandInput,
       {
-        addonAfter: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", children: [
-          addonAfter,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.DialogClose,
-            {
-              appearance: "default",
-              fontSize: "xs",
-              fontWeight: "500",
-              h: "xs",
-              size: "sm",
-              children: "ESC"
-            }
-          )
-        ] }),
-        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
+        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: "xl",
-        ...input({}, className),
+        size: size === "sm" ? "md" : "xl",
+        ...input({ size }, className),
         ...props
       }
-    );
+    ) });
   }
 );
-SpotlightInput.displayName = "@optiaxiom/react/SpotlightInput";
+MenuInput.displayName = "@optiaxiom/react/MenuInput";
+
+const MenuCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
+  const Comp = props.item.link ? "a" : "div";
+  const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton.ListboxCheckboxItem,
+    {
+      addonBefore: props.item.addon,
+      asChild: true,
+      description: props.item.description,
+      onCheckedChange: () => props.item.execute?.({ inputValue }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+    }
+  ) });
+});
+MenuCheckboxItem.displayName = "@optiaxiom/react/MenuCheckboxItem";
 
-const SpotlightItem = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
+const MenuItem = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    const Comp = props.item.link ? "a" : "div";
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.ListboxItem,
+      {
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+      }
+    ) });
+  }
 );
-SpotlightItem.displayName = "@optiaxiom/react/SpotlightItem";
+MenuItem.displayName = "@optiaxiom/react/MenuItem";
 
-const SpotlightLabel = React.forwardRef(
+const MenuRadioItem = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+    const Comp = props.item.link ? "a" : "div";
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.ListboxRadioItem,
       {
-        color: "fg.default",
-        fontSize: "lg",
-        fontWeight: "600",
-        pb: "12",
-        pt: "16",
-        px: "24",
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+      }
+    ) });
+  }
+);
+MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
+
+const [MenuSubProvider, useMenuSubContext] = reactContext.createContext("@optiaxiom/react/MenuSub");
+
+var content = Skeleton.recipeRuntime({base:['fy6jej']});
+
+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(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const {
+      contentRef,
+      open,
+      setOpen: setSubOpen,
+      setPresence
+    } = useMenuSubContext("@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,
+      {
+        asChild: true,
+        maxH: "sm",
+        minW: "trigger",
         ref,
+        ...content({}, className),
         ...props,
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          RadixMenu.DropdownMenuContent,
+          {
+            align,
+            alignOffset: -4,
+            loop: true,
+            onCloseAutoFocus: (event) => {
+              if (activePath.length) {
+                return;
+              }
+              event.preventDefault();
+              inputRef.current?.focus();
+            },
+            onEscapeKeyDown: () => {
+              setOpen(false);
+            },
+            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);
+              }
+            },
+            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 }) })
+                    }
+                  );
+                  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);
+            })
+          }
+        )
       }
-    );
+    ) }) });
   }
 );
-SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
-
-const SpotlightListbox = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { gap: "8", ref, ...props }));
-SpotlightListbox.displayName = "@optiaxiom/react/SpotlightListbox";
+MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1hz708r']});
+const MenuSubTrigger = React.forwardRef(
+  ({ children, item, onPointerDown, ...props }, ref) => {
+    const { downshift, 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(
+      MenuItem,
+      {
+        addonAfter: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}),
+        item,
+        onPointerDown: (event) => {
+          onPointerDown?.(event);
+          if (open) {
+            event.preventDefault();
+          }
+        },
+        onPointerEnter: () => {
+          downshift.selectItem(item);
+        },
+        onPointerLeave: (event) => {
+          const box = contentRef.current?.getBoundingClientRect();
+          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
+            }
+          };
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.triangle = null;
+          }, 50);
+        },
+        ref,
+        ...props,
+        children
+      }
+    ) }) });
+  }
+);
+MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";
 
-const SpotlightRadioItem = React.forwardRef(({ addonAfter, children, className, description, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(SpotlightItem, { asChild: true, ref, ...item$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.ListboxRadioItem,
+function MenuSub({ children, item }) {
+  const { activePath, setActivePath } = useMenuContext(
+    "@optiaxiom/react/MenuSub"
+  );
+  const { items } = useCommandContext("@optiaxiom/react/MenuSub");
+  const index = items.indexOf(item);
+  const [presence, setPresence] = React.useState();
+  const contentRef = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuSubProvider,
     {
-      addonAfter: addonAfter ?? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}),
-      description: description && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { fontSize: "md", mt: "2", children: description }),
-      children
+      contentRef,
+      open: activePath[0] === index,
+      presence,
+      setOpen: () => {
+        setActivePath(
+          (path) => path.at(-1) === index ? path.slice(0, -1) : path
+        );
+      },
+      setPresence,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(RadixMenu.DropdownMenu, { modal: false, open: activePath[0] === index || presence, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MenuSubTrigger, { item }),
+        /* @__PURE__ */ jsxRuntime.jsx(MenuSubContent, { item })
+      ] })
     }
-  ) });
-});
-SpotlightRadioItem.displayName = "@optiaxiom/react/SpotlightRadioItem";
-
-const [CommandSubProvider, useCommandSubContext] = reactContext.createContext("@optiaxiom/react/CommandSub");
+  );
+}
+MenuSub.displayName = "@optiaxiom/react/MenuSub";
 
-const CommandSub = React.forwardRef(
-  ({ children, item, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandSubProvider, { item, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, role: "group", ...props, children }) });
+const MenuListbox = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    const { size } = useMenuContext("@optiaxiom/react/MenuListbox");
+    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(CommandListbox, { ref, ...props, children: children ?? ((item, index) => {
+      if (index === 0) {
+        isFirstItem = true;
+        lastGroup = void 0;
+      }
+      const Comp = item.subOptions?.length ? size === "sm" ? MenuSub : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : MenuRadioItem : MenuItem;
+      const group = item.group;
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        shouldShowSeparator(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, {}),
+        shouldShowGroup(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { children: group.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(Comp, { item })
+      ] });
+    }) });
   }
 );
-CommandSub.displayName = "@optiaxiom/react/CommandSub";
+MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
 
-const SpotlightSub = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandSub, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "8", pt: "12", px: "24", children }) });
+const MenuPopoverContent = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
+});
+MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
+
+const VisuallyHidden = React.forwardRef(
+  ({ children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden__namespace.Root, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.FilteredSlot, { exclude: disabled ? "style" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children }) }) });
   }
 );
-SpotlightSub.displayName = "@optiaxiom/react/SpotlightSub";
+VisuallyHidden.displayName = "@optiaxiom/react/VisuallyHidden";
 
-const CommandSubItem = React.forwardRef(
-  ({ children, item, onClick, onMouseDown, onMouseMove, selected, ...props }, outerRef) => {
-    const {
-      downshift,
-      highlightedItem,
-      highlightedSubIndex,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToSubItems,
-      setHighlightedIndex,
-      setHighlightedSubIndex
-    } = useCommandContext("@optiaxiom/react/CommandSubItem");
-    const { item: parentItem } = useCommandSubContext(
-      "@optiaxiom/react/CommandSubItem"
+const MenuContent = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    const { labelId } = Skeleton.useFieldContext();
+    const { inputVisible, placeholder, size } = useMenuContext(
+      "@optiaxiom/react/MenuContent"
     );
-    const subItems = itemToSubItems?.(parentItem) ?? [];
-    const highlightedSubItem = highlightedItem === parentItem && highlightedSubIndex !== -1 ? subItems[highlightedSubIndex] : null;
-    const index = items.indexOf(parentItem);
-    const subIndex = subItems.indexOf(item);
-    const disabled = isItemDisabled(item, subIndex);
-    const highlighted = highlightedSubItem === item;
-    const isSelected = selected ?? isItemSelected(item, index);
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    React.useEffect(() => {
-      if (innerRef.current && isSelected) {
-        innerRef.current.scrollIntoView({ block: "nearest" });
+    const { empty, loading } = useCommandContext(
+      "@optiaxiom/react/MenuContent"
+    );
+    const Comp = size === "sm" ? MenuPopoverContent : MenuDialogContent;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        "aria-labelledby": labelId,
+        overflow: "hidden",
+        p: size === "sm" ? "4" : "0",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInput, { placeholder }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuListbox,
+            {
+              empty,
+              loading,
+              p: size === "lg" ? "6" : "0",
+              children
+            }
+          )
+        ]
       }
-    }, [isSelected]);
+    );
+  }
+);
+MenuContent.displayName = "@optiaxiom/react/MenuContent";
+
+const MenuTrigger = React.forwardRef(
+  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
+    const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
+    const Comp = size === "sm" ? Skeleton.PopoverTrigger : Skeleton.DialogTrigger;
+    const buttonRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
+    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      CommandFocusableItem,
+      Comp,
       {
-        "aria-disabled": disabled,
-        "aria-selected": isSelected,
-        "data-disabled": disabled ? "" : void 0,
-        "data-highlighted": highlighted ? "" : void 0,
-        onClick: (event) => {
-          onClick?.(event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          event.preventDefault();
-          downshift.selectItem(item);
-        },
-        onMouseDown: (event) => {
-          onMouseDown?.(event);
-          event.preventDefault();
-        },
-        onMouseMove: (event) => {
-          onMouseMove?.(event);
-          if (event.defaultPrevented) {
-            return;
+        "aria-labelledby": labelId,
+        asChild: true,
+        onKeyDown: (event) => {
+          switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp":
+              setOpen(true);
           }
-          setHighlightedIndex(index, "pointer");
-          setHighlightedSubIndex(subIndex, "pointer");
         },
         ref,
-        role: "option",
         ...props,
-        children
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
       }
     );
   }
 );
-CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
+MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1d3ixq',true:'ojdloy'}}});
+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'}}}});
 
-const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandSubItem,
-    {
-      asChild: true,
-      ref,
-      selected,
-      ...item({ active: selected || false }, className),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Skeleton.Badge,
-        {
-          intent: selected ? "information" : "neutral",
-          variant: selected ? "strong" : "subtle",
-          children
-        }
-      )
-    }
-  );
+const Pill = React.forwardRef(
+  ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Box,
+      {
+        asChild: true,
+        "data-disabled": disabled ? "" : void 0,
+        ...pill({ size }, className),
+        ...boxProps,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { disabled, ref, ...restProps, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { truncate: true, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}) })
+        ] })
+      }
+    );
+  }
+);
+Pill.displayName = "@optiaxiom/react/Pill";
+
+const PillGroup = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "12", ref, ...props, children });
+  }
+);
+PillGroup.displayName = "@optiaxiom/react/PillGroup";
+
+function Spotlight({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Menu, { defaultInputVisible: true, size: "lg", ...props, children });
+}
+Spotlight.displayName = "@optiaxiom/react/Spotlight";
+
+const SpotlightContent = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { "aria-label": "Quick search", ref, ...props });
 });
-SpotlightSubItem.displayName = "@optiaxiom/react/SpotlightSubItem";
+SpotlightContent.displayName = "@optiaxiom/react/SpotlightContent";
 
 const DEFAULT_HOTKEY = "mod+K";
 const SpotlightTrigger = React.forwardRef(({ children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
-  const { open, setOpen } = useSpotlightContext(
-    "@optiaxiom/react/SpotlightTrigger"
-  );
+  const { open, setOpen } = useMenuContext("@optiaxiom/react/SpotlightTrigger");
   useHotkeys([[hotkey, () => setOpen(!open)]]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogTrigger, { icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuTrigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}), children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children }) }) });
 });
 SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
 
@@ -3202,18 +3222,6 @@ exports.CardLink = CardLink;
 exports.CardOverflow = CardOverflow;
 exports.CardTitle = CardTitle;
 exports.Clock = Clock;
-exports.Combobox = Combobox;
-exports.ComboboxCheckboxItem = ComboboxCheckboxItem;
-exports.ComboboxContent = ComboboxContent;
-exports.ComboboxFooter = ComboboxFooter;
-exports.ComboboxGroup = ComboboxGroup;
-exports.ComboboxInput = ComboboxInput;
-exports.ComboboxItem = ComboboxItem;
-exports.ComboboxLabel = ComboboxLabel;
-exports.ComboboxListbox = ComboboxListbox;
-exports.ComboboxRadioItem = ComboboxRadioItem;
-exports.ComboboxSeparator = ComboboxSeparator;
-exports.ComboboxTrigger = ComboboxTrigger;
 exports.Command = Command;
 exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
@@ -3228,35 +3236,20 @@ exports.DatePickerTrigger = DatePickerTrigger;
 exports.DateRangePicker = DateRangePicker;
 exports.DateRangePickerContent = DateRangePickerContent;
 exports.DateRangePickerTrigger = DateRangePickerTrigger;
-exports.DropdownMenuCombobox = DropdownMenuCombobox;
-exports.DropdownMenuComboboxContent = DropdownMenuComboboxContent;
-exports.DropdownMenuComboboxInput = DropdownMenuComboboxInput;
-exports.DropdownMenuComboboxListbox = DropdownMenuComboboxListbox;
-exports.DropdownMenuComboboxTrigger = DropdownMenuComboboxTrigger;
 exports.Highlight = Highlight;
 exports.InlineInput = InlineInput;
 exports.LabelMenuButton = LabelMenuButton;
 exports.Layout = Layout;
+exports.Menu = Menu;
+exports.MenuContent = MenuContent;
+exports.MenuTrigger = MenuTrigger;
 exports.Pill = Pill;
 exports.PillGroup = PillGroup;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
-exports.SelectGroup = SelectGroup;
-exports.SelectItem = SelectItem;
-exports.SelectLabel = SelectLabel;
-exports.SelectRadioItem = SelectRadioItem;
-exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
-exports.SpotlightEmpty = SpotlightEmpty;
-exports.SpotlightInput = SpotlightInput;
-exports.SpotlightItem = SpotlightItem;
-exports.SpotlightLabel = SpotlightLabel;
-exports.SpotlightListbox = SpotlightListbox;
-exports.SpotlightRadioItem = SpotlightRadioItem;
-exports.SpotlightSub = SpotlightSub;
-exports.SpotlightSubItem = SpotlightSubItem;
 exports.SpotlightTrigger = SpotlightTrigger;
 exports.Table = Table;
 exports.TableAction = TableAction;