@optiaxiom/react 1.1.3 → 1.2.0

package/dist/cjs/unstable.js

@@ -3,88 +3,88 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-CIMUlKOI.js');
-require('./assets/src/layers/layers.css.ts.vanilla-7HanOaMW.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-BkkuG56D.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-DcLipP64.css');
+var Skeleton = require('./Skeleton-1DQXHLG1.js');
+require('./assets/src/layers/layers.css.ts.vanilla-B8dEEUcR.css');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DFWY95lC.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-C7uBeQxj.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 reactPortal = require('@radix-ui/react-portal');
-require('./assets/src/select-content/SelectContent.css.ts.vanilla-CLZmZfb3.css');
+var reactVirtual = require('@tanstack/react-virtual');
+require('./assets/src/select-content/SelectContent.css.ts.vanilla-CIP9Lzv4.css');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-qXMxj_SU.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-DnUaHEqa.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-D5Q4e1r4.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-Icumfr0J.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-DqdufC4L.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-DSWRZO2S.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-srDo7dTU.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-DIOlO5hA.css');
-require('./assets/src/link/Link.css.ts.vanilla-BaVqR5vh.css');
-require('./assets/src/card/Card.css.ts.vanilla-CrrUFOhD.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-7uKVW8XL.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-ChyrJkeZ.css');
-require('./assets/src/card-action/CardAction.css.ts.vanilla-BUpdf1CG.css');
-var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-ReU4Msyb.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-DICSzzhV.css');
+require('./assets/src/link/Link.css.ts.vanilla-D3T-_vwR.css');
+require('./assets/src/card/Card.css.ts.vanilla-CkZ2wEBj.css');
+require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-DSZsPXAP.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-DW3GHIR3.css');
+require('./assets/src/card-action/CardAction.css.ts.vanilla-Dl6LCsxq.css');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-Cnp7BV04.css');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-D_zEzxvb.css');
 var RadixDialog = require('@radix-ui/react-dialog');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-D-0-eTQQ.css');
-var reactVirtual = require('@tanstack/react-virtual');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CCIi7Mm1.css');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-CDB__o5m.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DZGCKJIj.css');
-require('./assets/src/table/Table.css.ts.vanilla-Curs3x1M.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-COS6g--b.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-CytCLHP1.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-UHl7T9Fg.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-C0t_Zzcx.css');
-require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-D2WQmOWH.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-D6dRpRRO.css');
-require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-BfnLVA-b.css');
-require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-TVqMJ5K-.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-UYW3N6M9.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-XXoZU5Ec.css');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-DUVFO_5H.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DBA32Ifj.css');
+require('./assets/src/table/Table.css.ts.vanilla-yo8liONm.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-Ce_KdYzB.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-2O9DpgUJ.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-CSfly4Jf.css');
+require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-BFk2iMUq.css');
+require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-DF1ohAIA.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-BrQYS1Nm.css');
+require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-DK0swYVd.css');
+require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-Bl4EgFCy.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-D-Mh2gv9.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DZ0jEF15.css');
 var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-srDo7dTU.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-DXoKps84.css');
-require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-DXxGxGFs.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-CHt0Vhbl.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-VhWVHzqD.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-CxXQAtc0.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-CmVdlOZO.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-CqLFr5DZ.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-DA2xXbEa.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-D15NQypl.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-EQ9vAH4h.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-ReU4Msyb.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-0KfIDBKX.css');
+require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-8z9v56Ek.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-DK34t6Mv.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-Csb1AGeK.css');
+require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-BVyR-PfF.css');
+require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-DjNm3fdJ.css');
+require('./assets/src/badge/Badge.css.ts.vanilla-DThc8q2A.css');
+require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BsUIFTB3.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-0iT0kvSy.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-BbXNXMsQ.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-B_6QgqHz.css');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-BmYttwF2.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-BH1wVMm7.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-srDo7dTU.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-YO7Szc09.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-DHiBS49f.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-D0M5Xq3j.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-C6o0-JzW.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-DiGfLTN9.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-y8bMSH4v.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-iHZ9eqF7.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-ReU4Msyb.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-SvMQoK1u.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-MZqdWsRa.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-CFdKIFN4.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-DLs4QDCv.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-CeQRmk6F.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-1As6gOk7.css');
+require('./assets/src/text/Text.css.ts.vanilla-CuAC9pRy.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-BXbFVLhQ.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-DetpFFG8.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-A5IAJLaV.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-Bq5xXaVI.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-DEvMxl8J.css');
+require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-B9D6qIfE.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-KMgGUkhp.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-Cad6t5Kv.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-0HmnWR5O.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-CMrdy2Fb.css');
-require('./assets/src/box/Box.css.ts.vanilla-Ba15HAlk.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-BRkS9g3D.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-Bl6ojI1O.css');
+require('./assets/src/box/Box.css.ts.vanilla-BctltUpK.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-DG9soKiN.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -246,7 +246,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_12nq4wo']});
+var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1nxy7wn']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -256,7 +256,7 @@ const BreadcrumbItem = React.forwardRef(
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'r2sfj1']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1kmvymj']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -293,74 +293,287 @@ function usePortalPatch(initialHighlightedIndex = -1) {
 
 const [SelectProvider, useSelectContext] = reactContext.createContext("@optiaxiom/react/Select");
 
-function Select({
-  children,
-  defaultOpen = false,
-  defaultValue,
-  disabled,
-  items,
-  itemToKey = (value2) => value2,
-  itemToString = (value2) => value2 ? String(value2) : "",
-  onOpenChange,
-  onValueChange,
-  open,
-  value,
-  ...props
-}) {
-  const [selectedItem, setSelectedItem] = reactUseControllableState.useControllableState({
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: value
-  });
-  const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: open
-  });
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
+const SelectHiddenSelect = React.forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
+  const { items, itemToLabel, itemToValue } = useSelectContext(
+    "@optiaxiom/react/SelectHiddenSelect"
   );
-  const downshift$1 = downshift.useSelect({
-    ...props,
-    highlightedIndex,
-    isOpen: placed,
+  return /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "select",
+    {
+      defaultValue,
+      disabled,
+      name,
+      onChange,
+      ref,
+      required,
+      tabIndex: -1,
+      value,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "" }),
+        items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: itemToValue(item), children: itemToLabel(item) }, itemToValue(item)))
+      ]
+    }
+  ) });
+});
+SelectHiddenSelect.displayName = "@optiaxiom/react/SelectHiddenSelect";
+
+const useObserveReset = (inputRef, setValue) => {
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const form = input.closest("form");
+    if (!form) {
+      return;
+    }
+    const listener = () => setValue("");
+    form.addEventListener("reset", listener);
+    return () => form.removeEventListener("reset", listener);
+  }, [inputRef, setValue]);
+};
+
+const useObserveValue = (inputRef, setValue) => {
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(
+      input.constructor.prototype,
+      "value"
+    );
+    Object.defineProperty(input, "value", {
+      configurable: true,
+      enumerable: true,
+      get: function() {
+        return descriptor?.get?.call(input);
+      },
+      set: function(value) {
+        descriptor?.set?.call(input, value);
+        setValue(value);
+      }
+    });
+  }, [inputRef, setValue]);
+};
+
+const Select = React.forwardRef(
+  ({
+    children,
+    defaultOpen = false,
+    defaultValue,
+    disabled,
+    isItemDisabled = () => false,
     items,
-    itemToKey,
-    itemToString,
-    onHighlightedIndexChange(changes) {
-      if ((changes.type === downshift.useSelect.stateChangeTypes.ItemMouseMove || changes.type === downshift.useSelect.stateChangeTypes.MenuMouseLeave) && isOpen || changes.isOpen) {
-        setHighlightedIndex(changes.highlightedIndex);
+    itemToLabel = (value2) => value2 ? String(value2) : "",
+    itemToValue = (item) => typeof item === "string" ? item : void 0,
+    name,
+    onBlur,
+    onChange,
+    onOpenChange,
+    onValueChange,
+    open,
+    required,
+    value
+  }, outerRef) => {
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    const [shadowValue, setShadowValue] = reactUseControllableState.useControllableState({
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+      prop: value
+    });
+    useObserveValue(innerRef, setShadowValue);
+    useObserveReset(innerRef, setShadowValue);
+    const selectedItem = React.useMemo(
+      () => shadowValue ? items.find((item) => itemToValue(item) === shadowValue) : void 0,
+      [itemToValue, items, shadowValue]
+    );
+    const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+      () => selectedItem ? items.findIndex(
+        (item) => itemToValue(selectedItem) === itemToValue(item)
+      ) : -1
+    );
+    const downshift$1 = downshift.useSelect({
+      highlightedIndex,
+      isItemDisabled,
+      isOpen: placed,
+      items,
+      itemToKey: itemToValue,
+      itemToString: itemToLabel,
+      onHighlightedIndexChange(changes) {
+        if ((changes.type === downshift.useSelect.stateChangeTypes.ItemMouseMove || changes.type === downshift.useSelect.stateChangeTypes.MenuMouseLeave) && isOpen || changes.isOpen) {
+          setHighlightedIndex(changes.highlightedIndex);
+        }
+      },
+      onIsOpenChange({ isOpen: isOpen2 }) {
+        setIsOpen(isOpen2);
+      },
+      onSelectedItemChange({ selectedItem: selectedItem2 }) {
+        if (innerRef.current) {
+          innerRef.current.value = itemToValue(selectedItem2) ?? "";
+        }
+      },
+      selectedItem: selectedItem ?? null
+    });
+    downshift$1.getMenuProps({}, { suppressRefError: true });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      SelectProvider,
+      {
+        disabled,
+        downshift: downshift$1,
+        highlightedItem: items[highlightedIndex],
+        isOpen,
+        items,
+        itemToLabel,
+        itemToValue,
+        onBlur,
+        placed,
+        selectedItem,
+        setPlaced,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SelectHiddenSelect,
+            {
+              defaultValue,
+              name,
+              onChange: (event) => {
+                setShadowValue(event.target.value);
+                onChange?.(event);
+              },
+              ref,
+              required,
+              value
+            }
+          ),
+          children
+        ]
       }
-    },
-    onIsOpenChange({ isOpen: isOpen2 }) {
-      setIsOpen(isOpen2);
-    },
-    onSelectedItemChange({ selectedItem: selectedItem2 }) {
-      setSelectedItem(selectedItem2);
-    },
-    selectedItem: selectedItem ?? null
+    ) });
+  }
+);
+Select.displayName = "@optiaxiom/react/Select";
+
+const ListboxVirtualized = React.forwardRef(({ children, highlightedItem, items, ...props }, outerRef) => {
+  const innerRef = React.useRef(null);
+  const ref = reactComposeRefs.useComposedRefs(outerRef, innerRef);
+  const [enabled, setEnabled] = React.useState(false);
+  React.useEffect(() => {
+    requestAnimationFrame(() => setEnabled(true));
+  }, []);
+  const rowVirtualizer = reactVirtual.useVirtualizer({
+    count: items.length,
+    enabled,
+    estimateSize: () => 40,
+    getScrollElement: () => innerRef.current
   });
-  downshift$1.getMenuProps({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    SelectProvider,
+  const itemToIndexMap = React.useMemo(
+    () => new Map(items.map((item, index) => [item, index])),
+    [items]
+  );
+  React.useEffect(() => {
+    const index = itemToIndexMap.get(highlightedItem);
+    if (!enabled || typeof index !== "number") {
+      return;
+    }
+    rowVirtualizer.scrollToIndex(index);
+  }, [enabled, highlightedItem, itemToIndexMap, rowVirtualizer]);
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
+    Math.max(0, virtualItems[0].start),
+    Math.max(
+      0,
+      rowVirtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end
+    )
+  ] : [0, 0];
+  const [minWidth, setMinWidth] = React.useState(0);
+  React.useEffect(() => {
+    if (!innerRef.current) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setMinWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(innerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton.Box,
     {
-      disabled,
-      downshift: downshift$1,
-      highlightedItem: items[highlightedIndex],
-      isOpen,
-      items,
-      itemToKey,
-      itemToString,
-      placed,
-      selectedItem,
-      setPlaced,
-      children
+      flex: "none",
+      style: {
+        minHeight: Math.min(items.length, 8) * 40,
+        minWidth,
+        paddingBottom,
+        paddingTop
+      },
+      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsxs(
+        Skeleton.Box,
+        {
+          "data-index": virtualItem.index,
+          ref: rowVirtualizer.measureElement,
+          children: [
+            children(items[virtualItem.index]),
+            virtualItem.index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { pb: "2" })
+          ]
+        },
+        virtualItem.key
+      ))
     }
   ) });
-}
-Select.displayName = "@optiaxiom/react/Select";
+});
+ListboxVirtualized.displayName = "@optiaxiom/react/ListboxVirtualized";
+
+const SelectItem = React.forwardRef(
+  ({ children, item, onMouseMove, size, ...props }, ref) => {
+    const { downshift, highlightedItem, isOpen, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
+    const itemProps = downshift.getItemProps({
+      item,
+      onMouseMove: (event) => {
+        onMouseMove?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (!isOpen) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+        }
+      },
+      ref,
+      ...props
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Box,
+      {
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-selected": selectedItem === item ? "" : void 0,
+        size,
+        ...itemProps,
+        children
+      }
+    );
+  }
+);
+SelectItem.displayName = "@optiaxiom/react/SelectItem";
+
+const SelectRadioItem = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
+  }
+);
+SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
 
-var content$3 = Skeleton.recipeRuntime({base:['_16z4ysg']});
+var content$3 = Skeleton.recipeRuntime({base:['j259xi']});
 
 const SelectContent = React.forwardRef(
   ({
@@ -372,9 +585,16 @@ const SelectContent = React.forwardRef(
     ...props
   }, ref) => {
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    const { downshift, isOpen, placed, setPlaced } = useSelectContext(
-      "@optiaxiom/react/SelectContent"
-    );
+    const {
+      downshift,
+      highlightedItem,
+      isOpen,
+      items,
+      itemToLabel,
+      itemToValue,
+      placed,
+      setPlaced
+    } = useSelectContext("@optiaxiom/react/SelectContent");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.TransitionGroup,
       {
@@ -402,10 +622,20 @@ const SelectContent = React.forwardRef(
               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
+                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));
+                })
               }
             )
           }
@@ -416,48 +646,6 @@ const SelectContent = React.forwardRef(
 );
 SelectContent.displayName = "@optiaxiom/react/SelectContent";
 
-const SelectItem = React.forwardRef(
-  ({ children, item, onMouseMove, size, ...props }, ref) => {
-    const { downshift, highlightedItem, isOpen, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
-    const itemProps = downshift.getItemProps({
-      item,
-      onMouseMove: (event) => {
-        onMouseMove?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        if (!isOpen) {
-          event.preventDefault();
-          Object.assign(event.nativeEvent, {
-            preventDownshiftDefault: true
-          });
-        }
-      },
-      ref,
-      ...props
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
-      {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        "data-selected": selectedItem === item ? "" : void 0,
-        size,
-        ...itemProps,
-        children
-      }
-    );
-  }
-);
-SelectItem.displayName = "@optiaxiom/react/SelectItem";
-
-const SelectRadioItem = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
-  }
-);
-SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
-
 const useFieldLabelTrigger = (ref, ariaLabelledBy) => {
   const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
   React.useEffect(() => {
@@ -481,11 +669,12 @@ const SelectTrigger = React.forwardRef(
     "aria-labelledby": ariaLabelledBy,
     asChild,
     children,
+    onBlur: onBlurProp,
     onKeyDown,
     placeholder,
     ...props
   }, ref) => {
-    const { disabled, downshift, isOpen, itemToString, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
+    const { disabled, downshift, isOpen, itemToLabel, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
     const buttonRef = React.useRef(null);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
@@ -498,7 +687,7 @@ const SelectTrigger = React.forwardRef(
       },
       [focusOnOpen]
     );
-    const value = selectedItem ? itemToString(selectedItem) : placeholder;
+    const value = selectedItem ? itemToLabel(selectedItem) : placeholder;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactPopper.PopperAnchor,
       {
@@ -508,10 +697,15 @@ const SelectTrigger = React.forwardRef(
           ...restProps,
           "aria-labelledby": labelId,
           disabled,
+          onBlur: (event) => {
+            onBlurProp?.(event);
+            onBlur?.(event);
+          },
           onKeyDown: (event) => {
             onKeyDown?.(event);
             document.dispatchEvent(new Event("tooltip.open"));
-          }
+          },
+          type: "button"
         }),
         children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? Skeleton.decorateChildren(
           { asChild, children },
@@ -655,8 +849,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'},'_17mjph1'],variants:{appearance:{'default':'_1stagzz',holiday:[{color:'fg.error'},'_1d8fv8e'],range_middle:'_16f95s8',selected:[{color:'fg.white'},'_14toqic'],weekend:[{color:'fg.tertiary'},'_19k0uuu']},range:{end:['kl3gx2'],middle:['p8gmeb'],start:['_1n2kxrf']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_19gzrwq']});
+var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',mt:'2',size:'md',transition:'colors'},'_1p3fkuf'],variants:{appearance:{'default':'_1nuodwu',holiday:[{color:'fg.error'},'ji15eh'],range_middle:'_1nw6fym',selected:[{color:'fg.white'},'_1f5kbnb'],weekend:[{color:'fg.tertiary'},'_1i22qvz']},range:{end:['drh9tj'],middle:['_1nyq3is'],start:['_1uxvupt']}}});
+var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_1cm47zf']});
 
 function CalendarDayButton({
   children,
@@ -721,14 +915,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'yf8ybu']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1f1tm4n']});
 
 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'},'_962l4e']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'d7vmhi']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -893,7 +1087,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'uyzt7x'});
+var root = Skeleton.recipeRuntime({base:'_1kn9cbb'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -904,7 +1098,7 @@ ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-var card = Skeleton.recipeRuntime({base:['_11jp0gq',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'dc5n8l']});
+var card = Skeleton.recipeRuntime({base:['_1r9eow6',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'svfyj0']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -936,7 +1130,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_1qd2vku'],variants:{visible:{false:'_9ia3xu',true:'_1l16b6'}}});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_137ob1p'],variants:{visible:{false:'uy4v0v',true:'_1xbwtf0'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
@@ -945,7 +1139,7 @@ const ActionsContent = React.forwardRef(
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var action = Skeleton.recipeRuntime({base:['_447p5l']});
+var action = Skeleton.recipeRuntime({base:['_1c9bl1w']});
 
 const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1015,7 +1209,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1tkbko8'],variants:{orientation:{horizontal:[{w:'auto'},'_14a2vz'],vertical:[{w:'full'},'_1jrgkm8']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'wmtb4u'],variants:{orientation:{horizontal:[{w:'auto'},'_19qpoqo'],vertical:[{w:'full'},'_1318w25']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -1041,7 +1235,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['dur7cm',{alignSelf:'stretch'},'_1w9ofdv'],variants:{orientation:{horizontal:['_9mf7vj'],vertical:['_1wmjfxi']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_14j5qr8',{alignSelf:'stretch'},'vv5agy'],variants:{orientation:{horizontal:['_1hcao1h'],vertical:['_126vo25']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1104,14 +1298,13 @@ function Combobox({
   defaultOpen = false,
   inputValue,
   isItemDisabled = () => false,
+  isItemSelected = () => false,
   items,
-  itemToKey = (value) => value,
-  itemToString = (value) => value ? String(value) : "",
+  itemToLabel = (value) => value ? String(value) : "",
   onInputValueChange,
   onItemSelect,
   onOpenChange,
-  open: openProp,
-  value: valueProp
+  open: openProp
 }) {
   const components = useResponsiveMatches({
     base: {
@@ -1125,10 +1318,6 @@ function Combobox({
       Trigger: Skeleton.PopoverTrigger
     }
   });
-  const value = React.useMemo(
-    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
-    [valueProp]
-  );
   const [open, setOpen] = reactUseControllableState.useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
@@ -1149,14 +1338,13 @@ function Combobox({
       components,
       inputValue,
       isItemDisabled,
+      isItemSelected,
       items,
-      itemToKey,
-      itemToString,
+      itemToLabel,
       onInputValueChange,
       onItemSelect,
       open,
       setOpen,
-      value,
       children
     }
   ) });
@@ -1165,96 +1353,220 @@ Combobox.displayName = "@optiaxiom/react/Combobox";
 
 const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
 
-var item$2 = Skeleton.recipeRuntime({base:'_15gu4qf'});
+var item$2 = Skeleton.recipeRuntime({base:'oipfcl'});
+
+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 CommandItem = React.forwardRef(
+  ({ children, item, selected, size, ...props }, ref) => {
+    const { downshift, highlightedItem, isItemSelected, items } = useCommandContext("@optiaxiom/react/CommandItem");
+    const itemProps = downshift.getItemProps({
+      "aria-selected": selected ?? isItemSelected(item, items.indexOf(item)),
+      item,
+      ref,
+      ...props
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CommandFocusableItem,
+      {
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        size,
+        tabIndex: -1,
+        ...itemProps,
+        children
+      }
+    );
+  }
+);
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
+
+const ComboboxItem = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
+);
+ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
+
+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 ComboboxEmpty = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { ref, ...props });
+  }
+);
+ComboboxEmpty.displayName = "@optiaxiom/react/ComboboxEmpty";
+
+const CommandInput = React.forwardRef(
+  ({ onKeyDown, size, ...props }, ref) => {
+    const {
+      downshift,
+      highlightedItem,
+      highlightedSubIndex,
+      itemToSubItems,
+      setHighlightedSubIndex,
+      setInputValue
+    } = useCommandContext("@optiaxiom/react/CommandInput");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Input,
+      {
+        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
+        })
+      }
+    );
+  }
+);
+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 CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { lastInteractionSource } = useCommandContext(
-    "@optiaxiom/react/CommandFocusableItem"
+const ComboboxScrollArea = React.forwardRef(({ children, items: itemsProp, loading, ...props }, ref) => {
+  const { highlightedItem, items } = useCommandContext(
+    "@optiaxiom/react/ComboboxScrollArea"
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Box,
+    Skeleton.ListboxScrollArea,
     {
-      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : void 0,
+      asChild: !loading && typeof children === "function",
       ref,
-      ...item$2({}, className),
       ...props,
-      children
+      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: itemsProp ?? items,
+          children
+        }
+      ) : children : items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ComboboxRadioItem, { item, children: item }, item))
     }
   );
 });
-CommandFocusableItem.displayName = "@optiaxiom/react/CommandFocusableItem";
-
-const CommandItem = React.forwardRef(
-  ({ children, item, selected, size, ...props }, ref) => {
-    const { downshift, highlightedItem, value } = useCommandContext(
-      "@optiaxiom/react/CommandItem"
-    );
-    const itemProps = downshift.getItemProps({
-      "aria-selected": selected ?? value?.has(item),
-      item,
-      ref,
-      ...props
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      CommandFocusableItem,
-      {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        size,
-        tabIndex: -1,
-        ...itemProps,
-        children
-      }
-    );
-  }
-);
-CommandItem.displayName = "@optiaxiom/react/CommandItem";
-
-const ComboboxItem = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
-);
-ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
-
-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";
+ComboboxScrollArea.displayName = "@optiaxiom/react/ComboboxScrollArea";
 
-const isHoverSupported = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
 function Command({
   children,
   inputValue: inputValueProp,
   isItemDisabled = () => false,
+  isItemSelected = () => false,
   items,
-  itemToKey = (value) => value,
-  itemToString = (value) => value ? String(value) : "",
+  itemToLabel = (value) => value ? String(value) : "",
   itemToSubItems,
   onInputValueChange,
   onItemSelect,
-  value: valueProp,
   ...props
 }) {
-  const value = React.useMemo(
-    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
-    [valueProp]
-  );
   const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
     defaultProp: "",
     onChange: onInputValueChange,
     prop: inputValueProp
   });
   const [lastInteractionSource, setLastInteractionSource] = React.useState("pointer");
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(items.findIndex((item) => value?.has(item)));
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    () => items.findIndex((item, index) => isItemSelected(item, index))
+  );
   const [highlightedSubIndex, setHighlightedSubIndex] = React.useState(-1);
   const downshift$1 = downshift.useCombobox({
     ...props,
-    highlightedIndex: highlightedIndex === -1 && isHoverSupported ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
+    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
     inputValue,
     isItemDisabled,
     isOpen: placed,
     items,
-    itemToKey,
-    itemToString,
+    itemToString: itemToLabel,
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
       if (type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave) {
         setHighlightedIndex(highlightedIndex2);
@@ -1294,6 +1606,7 @@ function Command({
       highlightedItem: items[downshift$1.highlightedIndex],
       highlightedSubIndex: highlightedSubIndex === -1 && items[downshift$1.highlightedIndex] && itemToSubItems?.(items[downshift$1.highlightedIndex])?.length ? 0 : highlightedSubIndex,
       isItemDisabled,
+      isItemSelected,
       items,
       itemToSubItems,
       lastInteractionSource,
@@ -1307,7 +1620,6 @@ function Command({
       },
       setInputValue,
       setPlaced,
-      value,
       children
     }
   );
@@ -1320,7 +1632,7 @@ const CommandListbox = React.forwardRef(
       "@optiaxiom/react/CommandListbox"
     );
     React.useEffect(() => {
-      setPlaced(true);
+      requestAnimationFrame(() => setPlaced(true));
     }, [setPlaced]);
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Listbox, { size, ...downshift.getMenuProps({ ref, ...props }), children });
   }
@@ -1338,12 +1650,11 @@ const ComboboxContent = React.forwardRef(
       components,
       inputValue,
       isItemDisabled,
+      isItemSelected,
       items,
-      itemToKey,
-      itemToString,
+      itemToLabel,
       onInputValueChange,
-      onItemSelect,
-      value
+      onItemSelect
     } = useComboboxContext("@optiaxiom/react/ComboboxContent");
     return /* @__PURE__ */ jsxRuntime.jsx(
       components.Content,
@@ -1358,9 +1669,9 @@ const ComboboxContent = React.forwardRef(
           {
             inputValue,
             isItemDisabled,
+            isItemSelected,
             items,
-            itemToKey,
-            itemToString,
+            itemToLabel,
             onInputValueChange,
             onItemSelect,
             stateReducer: (state, actionAndChanges) => {
@@ -1379,8 +1690,11 @@ const ComboboxContent = React.forwardRef(
                   return changes;
               }
             },
-            value,
-            children: /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { children })
+            children: /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ComboboxInput, { placeholder: "Search..." }),
+              /* @__PURE__ */ jsxRuntime.jsx(ComboboxScrollArea, {}),
+              items.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(ComboboxEmpty, { children: "No result found" })
+            ] }) })
           }
         )
       }
@@ -1389,13 +1703,6 @@ const ComboboxContent = React.forwardRef(
 );
 ComboboxContent.displayName = "@optiaxiom/react/ComboboxContent";
 
-const ComboboxEmpty = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { ref, ...props });
-  }
-);
-ComboboxEmpty.displayName = "@optiaxiom/react/ComboboxEmpty";
-
 const ComboboxFooter = React.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxFooter, { ref, ...props });
@@ -1410,102 +1717,6 @@ const ComboboxGroup = React.forwardRef(
 );
 ComboboxGroup.displayName = "@optiaxiom/react/ComboboxGroup";
 
-const CommandInput = React.forwardRef(
-  ({ onKeyDown, size, ...props }, ref) => {
-    const {
-      downshift,
-      highlightedItem,
-      highlightedSubIndex,
-      itemToSubItems,
-      setHighlightedSubIndex,
-      setInputValue
-    } = useCommandContext("@optiaxiom/react/CommandInput");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Input,
-      {
-        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
-        })
-      }
-    );
-  }
-);
-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 ComboboxLabel = React.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { ref, ...props });
@@ -1513,16 +1724,6 @@ const ComboboxLabel = React.forwardRef(
 );
 ComboboxLabel.displayName = "@optiaxiom/react/ComboboxLabel";
 
-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 ComboboxScrollArea = React.forwardRef(({ children, loading, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { ref, ...props, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children });
-});
-ComboboxScrollArea.displayName = "@optiaxiom/react/ComboboxScrollArea";
-
 const ComboboxSeparator = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { ref, ...props });
 });
@@ -1536,16 +1737,8 @@ const ComboboxTrigger = React.forwardRef(
     placeholder,
     ...props
   }, outerRef) => {
-    const {
-      components,
-      itemToString,
-      setOpen,
-      value: valueContext
-    } = useComboboxContext("@optiaxiom/react/ComboboxTrigger");
-    const value = React.useMemo(
-      () => valueContext instanceof Set ? [...valueContext] : valueContext,
-      [valueContext]
-    );
+    const { components, isItemSelected, items, itemToLabel, setOpen } = useComboboxContext("@optiaxiom/react/ComboboxTrigger");
+    const value = items.filter((item, index) => isItemSelected(item, index));
     const buttonRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
@@ -1564,7 +1757,7 @@ const ComboboxTrigger = React.forwardRef(
         ref,
         role: "combobox",
         ...props,
-        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.length === 1 ? itemToString(value[0]) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.length === 1 ? itemToLabel(value[0]) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           value.length,
           " selected"
         ] }) }) : placeholder })
@@ -1574,81 +1767,6 @@ const ComboboxTrigger = React.forwardRef(
 );
 ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
 
-const ComboboxVirtualized = React.forwardRef(({ children, items, ...props }, outerRef) => {
-  const innerRef = React.useRef(null);
-  const ref = reactComposeRefs.useComposedRefs(outerRef, innerRef);
-  const [enabled, setEnabled] = React.useState(false);
-  React.useEffect(() => {
-    requestAnimationFrame(() => setEnabled(true));
-  }, []);
-  const rowVirtualizer = reactVirtual.useVirtualizer({
-    count: items.length,
-    enabled,
-    estimateSize: () => 40,
-    getScrollElement: () => innerRef.current
-  });
-  const { highlightedItem } = useCommandContext(
-    "@optiaxiom/react/ComboboxVirtualized"
-  );
-  const itemToIndexMap = React.useMemo(
-    () => new Map(items.map((item, index) => [item, index])),
-    [items]
-  );
-  React.useEffect(() => {
-    const index = itemToIndexMap.get(highlightedItem);
-    if (typeof index !== "number") {
-      return;
-    }
-    rowVirtualizer.scrollToIndex(index);
-  }, [enabled, highlightedItem, itemToIndexMap, rowVirtualizer]);
-  const virtualItems = rowVirtualizer.getVirtualItems();
-  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
-    Math.max(0, virtualItems[0].start),
-    Math.max(
-      0,
-      rowVirtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end
-    )
-  ] : [0, 0];
-  const [minWidth, setMinWidth] = React.useState(0);
-  React.useEffect(() => {
-    if (!innerRef.current) {
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setMinWidth(entry.contentRect.width);
-      }
-    });
-    observer.observe(innerRef.current);
-    return () => observer.disconnect();
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Box,
-    {
-      flex: "none",
-      style: {
-        minHeight: Math.min(items.length, 8) * 40,
-        minWidth,
-        paddingBottom,
-        paddingTop
-      },
-      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsxs(
-        Skeleton.Box,
-        {
-          "data-index": virtualItem.index,
-          ref: rowVirtualizer.measureElement,
-          children: [
-            children(items[virtualItem.index]),
-            virtualItem.index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { pb: "2" })
-          ]
-        },
-        virtualItem.key
-      ))
-    }
-  ) });
-});
-ComboboxVirtualized.displayName = "@optiaxiom/react/ComboboxVirtualized";
-
 const [DataTableProvider, useDataTableContext] = reactContext.createContext("@optiaxiom/react/DataTable");
 
 const DataTable = React.forwardRef(
@@ -1714,17 +1832,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_15ug99x'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'ofyamu']});
+var cell$2 = Skeleton.recipeRuntime({base:'s0g3j2'});
+var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_4ja99p']});
 
 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 }) }) })
 );
 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'},'_1efksgk']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_1etzedj'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'j1b9lc'],variants:{active:{false:'tathdx',true:'rmpbyd'}}});
+var button$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_3bauab']});
+var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_6lbyk'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_9x93vu'],variants:{active:{false:'_12mwhl4',true:'u1bq0m'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1777,22 +1895,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'},'_9mz090'],variants:{layout:{auto:['_1ge5khn'],fixed:[{display:'grid'},'_1lrgla3']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_124eana']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'l1j1qm'],variants:{layout:{auto:['_1vpmc9g'],fixed:[{display:'grid'},'vkmkkb']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'wandsg']});
 
 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:['_1l5m4cn']});
+var body = Skeleton.recipeRuntime({base:['l5bv43']});
 
 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'},'_1g45xny']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1d2virk']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1804,20 +1922,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:['v7hlvn',{transition:'colors',w:'full'},'bl24y1']});
+var row = Skeleton.recipeRuntime({base:['_1t0qag9',{transition:'colors',w:'full'},'_45eiyy']});
 
 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'},'o2nqoj'],variants:{pinned:{left:'_1kyshx5',right:'_1u6jk0h'},pinnedType:{body:'ik7eq9',header:{}}}});
-var cellOffsetVar = 'var(--_1xzfrwa)';
-var cellSizeVar = 'var(--kx9nde)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_1rmkxpy']});
-var leftTotalSizeVar = 'var(--l8s7g8)';
-var rightTotalSizeVar = 'var(--t0n1s9)';
-var table = Skeleton.recipeRuntime({base:'_1q5wpt2',variants:{pinned:{both:'_1j6wx59',left:'_1kjm8ui',none:{},right:'_74jh5i'}}});
+var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'mnn028'],variants:{pinned:{left:'h6e6ec',right:'rf2u1f'},pinnedType:{body:'elbsmu',header:{}}}});
+var cellOffsetVar = 'var(--_9fs9lc)';
+var cellSizeVar = 'var(--n5m2xi)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_16txnts']});
+var leftTotalSizeVar = 'var(--c36d5g)';
+var rightTotalSizeVar = 'var(--_1uqsvhy)';
+var table = Skeleton.recipeRuntime({base:'_2gp2fx',variants:{pinned:{both:'lei9az',left:'fh7foj',none:{},right:'mocgmq'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -1995,7 +2113,7 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
-var addon = Skeleton.recipeRuntime({base:'_3h0ryr',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'_1h9f78s',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
 const DataTableFooter = React.forwardRef(
@@ -2077,7 +2195,7 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'jxo9da'});
+var picker = Skeleton.recipeRuntime({base:'eol8e0'});
 
 function toInstant(str) {
   const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
@@ -2255,7 +2373,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'qh2hvk']});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'na6cn6']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -2382,7 +2500,7 @@ function DateRangePicker({
 }
 DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
 
-var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1opcf4t']});
+var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1oq0pbb']});
 
 const DateRangePickerContent = React.forwardRef(
   ({
@@ -2479,7 +2597,7 @@ const DateRangePickerTrigger = React.forwardRef(
 );
 DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
 
-var mark = Skeleton.recipeRuntime({base:'_1fhljq0'});
+var mark = Skeleton.recipeRuntime({base:'_1qpl18q'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2511,8 +2629,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'s7b84s',variants:{empty:{false:{},true:'_1x1sbpz'}}});
-var input$1 = Skeleton.recipeRuntime({base:'btcu42'});
+var editor = Skeleton.recipeRuntime({base:'_1k6rlku',variants:{empty:{false:{},true:'_6omini'}}});
+var input$1 = Skeleton.recipeRuntime({base:'_10mqslh'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2592,7 +2710,7 @@ function getText(element) {
   return text;
 }
 
-var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'_1gcrkrt']});
+var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'_1b3dar']});
 var content = Skeleton.recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = Skeleton.recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 
@@ -2623,7 +2741,7 @@ const LabelMenuButton = React.forwardRef(
 );
 LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
 
-var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1qbl5tj']});
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1drq08i']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -2648,7 +2766,7 @@ 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'},'_1n5hopv'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_174utyp'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
@@ -2707,8 +2825,7 @@ function Spotlight({
   inputValue,
   isItemDisabled = () => false,
   items,
-  itemToKey = (value) => value,
-  itemToString = (value) => value ? String(value) : "",
+  itemToLabel = (value) => value ? String(value) : "",
   itemToSubItems,
   onInputValueChange,
   onItemSelect,
@@ -2735,8 +2852,7 @@ function Spotlight({
       inputValue,
       isItemDisabled,
       items,
-      itemToKey,
-      itemToString,
+      itemToLabel,
       itemToSubItems,
       onInputValueChange,
       onItemSelect,
@@ -2753,8 +2869,7 @@ const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children,
     inputValue,
     isItemDisabled,
     items,
-    itemToKey,
-    itemToString,
+    itemToLabel,
     itemToSubItems,
     onInputValueChange,
     onItemSelect
@@ -2776,8 +2891,7 @@ const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children,
             inputValue,
             isItemDisabled,
             items,
-            itemToKey,
-            itemToString,
+            itemToLabel,
             itemToSubItems,
             onInputValueChange,
             onItemSelect,
@@ -2813,7 +2927,7 @@ const SpotlightEmpty = React.forwardRef(
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'gxrskx']});
+var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1sv09x9']});
 
 const SpotlightInput = React.forwardRef(
   ({ addonAfter, className, ...props }, ref) => {
@@ -2870,7 +2984,7 @@ const SpotlightLabel = React.forwardRef(
 );
 SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'os7ymw']});
+var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'i9yljl']});
 
 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(
@@ -2910,21 +3024,22 @@ const CommandSubItem = React.forwardRef(
       highlightedItem,
       highlightedSubIndex,
       isItemDisabled,
+      isItemSelected,
       items,
       itemToSubItems,
       setHighlightedIndex,
-      setHighlightedSubIndex,
-      value
+      setHighlightedSubIndex
     } = useCommandContext("@optiaxiom/react/CommandSubItem");
     const { item: parentItem } = useCommandSubContext(
       "@optiaxiom/react/CommandSubItem"
     );
     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 ?? value?.has(item);
+    const isSelected = selected ?? isItemSelected(item, index);
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     React.useEffect(() => {
@@ -2956,7 +3071,7 @@ const CommandSubItem = React.forwardRef(
           if (event.defaultPrevented) {
             return;
           }
-          setHighlightedIndex(items.indexOf(parentItem), "pointer");
+          setHighlightedIndex(index, "pointer");
           setHighlightedSubIndex(subIndex, "pointer");
         },
         ref,
@@ -2969,7 +3084,7 @@ const CommandSubItem = React.forwardRef(
 );
 CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'q3kfn9',true:'j8cbez'}}});
+var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_7n89ri',true:'_1h4wma'}}});
 
 const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3039,7 +3154,6 @@ exports.ComboboxRadioItem = ComboboxRadioItem;
 exports.ComboboxScrollArea = ComboboxScrollArea;
 exports.ComboboxSeparator = ComboboxSeparator;
 exports.ComboboxTrigger = ComboboxTrigger;
-exports.ComboboxVirtualized = ComboboxVirtualized;
 exports.Command = Command;
 exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;