@optiaxiom/react 1.2.3 → 1.2.5

package/dist/cjs/unstable.js

@@ -3,10 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-Ca7QNPUM.js');
-require('./assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-CaImrrFx.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-D8uu-aKn.css');
+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 reactComposeRefs = require('@radix-ui/react-compose-refs');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
@@ -16,76 +16,77 @@ var reactContext = require('@radix-ui/react-context');
 var reactVisuallyHidden = 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-hnKiMBLN.css');
+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-CroXhFsv.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-CNUnEpSQ.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-DuVxFI6D.css');
+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');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BSjn-Kas.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-DWtXRO2M.css');
-require('./assets/src/link/Link.css.ts.vanilla-TKnv0NLW.css');
-require('./assets/src/card/Card.css.ts.vanilla-jR5y1JC8.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-D0Ggy0K6.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-8O8_Hd5W.css');
-require('./assets/src/card-action/CardAction.css.ts.vanilla-DM3Lsu8j.css');
+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');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-CBP-IbRI.css');
+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-84xHc68j.css');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BfzbPCLF.css');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-CqP7GfrB.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-ChqK3bZl.css');
-require('./assets/src/table/Table.css.ts.vanilla-Cap38JYr.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-nwoe02am.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-BshAA-yT.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-DkDe4uir.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-CTJSjhcu.css');
-require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-OoBOGXUY.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-D0aQyzfO.css');
-require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-CBsIECJh.css');
-require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-BhgiFflg.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-D_VuiMn0.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-O7l92lAs.css');
+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');
 var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BSjn-Kas.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-myHxMctj.css');
-require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-5X080pPs.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-2_2fjsst.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-CrBIVGRY.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-01olIgL1.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-q9nAVGcH.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-QQNkjqmm.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BIJsazXZ.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-CsQVolPU.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-DT0-J7KE.css');
+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('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-hMhU56Ah.css');
+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-BNGYKXQt.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-Dd_H_S8U.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BSjn-Kas.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-NI15o5dX.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-CDiICAHT.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-BQDcc8sI.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-0HPKoojU.css');
+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('@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-Cppbhebc.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-Bx7HYaRZ.css');
+require('./assets/src/text/Text.css.ts.vanilla-B5VbRhB3.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-xLDa2Hwh.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-iUHuX3BC.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BT4yT_nE.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-D_Ki3sbG.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-XnX_6gBC.css');
+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('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-eS4sCNal.css');
-require('./assets/src/box/Box.css.ts.vanilla-DL8o92Hh.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-Dzc94FcN.css');
+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');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -247,7 +248,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'zmcqdz']});
+var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_8zt3s1']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -257,7 +258,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'},'oqyc6o']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'qgo5fk']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -276,6 +277,11 @@ function usePortalPatch(initialHighlightedIndex = -1) {
   const [highlightedIndex, setHighlightedIndex] = React.useState(
     initialHighlightedIndex
   );
+  React.useEffect(() => {
+    if (!placed) {
+      setHighlightedIndex(initialHighlightedIndex);
+    }
+  }, [initialHighlightedIndex, placed]);
   return [
     /**
      * Downshift attempts to scroll to the currently selected item when the menu
@@ -294,10 +300,25 @@ 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, itemToLabel, itemToValue } = useSelectContext(
+  const { items, itemToValue } = useSelectContext(
     "@optiaxiom/react/SelectHiddenSelect"
   );
+  const itemToValueStable = useEffectEvent(itemToValue);
+  const options = React.useMemo(
+    () => items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: itemToValueStable(item), children: itemToValueStable(item) }, itemToValueStable(item))),
+    [itemToValueStable, items]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "select",
     {
@@ -311,7 +332,7 @@ const SelectHiddenSelect = React.forwardRef(({ defaultValue, disabled, name, onC
       value,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("option", { value: "" }),
-        items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: itemToValue(item), children: itemToLabel(item) }, itemToValue(item)))
+        options
       ]
     }
   ) });
@@ -343,7 +364,7 @@ const Select = React.forwardRef(
     isItemDisabled = () => false,
     items,
     itemToLabel = (value2) => value2 ? String(value2) : "",
-    itemToValue = (item) => typeof item === "string" ? item : void 0,
+    itemToValue = (item) => item,
     name,
     onBlur,
     onChange,
@@ -360,11 +381,12 @@ const Select = React.forwardRef(
       onChange: onValueChange,
       prop: value
     });
-    Skeleton.useObserveValue(innerRef, setShadowValue);
+    const forceValueChange = Skeleton.useObserveValue(innerRef, setShadowValue);
     useObserveReset(innerRef, setShadowValue);
+    const itemToValueStable = useEffectEvent(itemToValue);
     const selectedItem = React.useMemo(
-      () => shadowValue ? items.find((item) => itemToValue(item) === shadowValue) : void 0,
-      [itemToValue, items, shadowValue]
+      () => shadowValue !== void 0 ? items.find((item) => itemToValueStable(item) === shadowValue) : void 0,
+      [itemToValueStable, items, shadowValue]
     );
     const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
       defaultProp: defaultOpen,
@@ -380,9 +402,10 @@ const Select = React.forwardRef(
       highlightedIndex,
       isItemDisabled,
       isOpen: placed,
+      // @ts-expect-error -- no harm in supporting read only arrays
       items,
-      itemToKey: itemToValue,
-      itemToString: itemToLabel,
+      itemToKey: (item) => item !== null ? itemToValue(item) : item,
+      itemToString: (item) => item !== null ? itemToLabel(item) : "",
       onHighlightedIndexChange(changes) {
         if ((changes.type === downshift.useSelect.stateChangeTypes.ItemMouseMove || changes.type === downshift.useSelect.stateChangeTypes.MenuMouseLeave) && isOpen || changes.isOpen) {
           setHighlightedIndex(changes.highlightedIndex);
@@ -392,9 +415,7 @@ const Select = React.forwardRef(
         setIsOpen(isOpen2);
       },
       onSelectedItemChange({ selectedItem: selectedItem2 }) {
-        if (innerRef.current) {
-          innerRef.current.value = itemToValue(selectedItem2) ?? "";
-        }
+        forceValueChange(itemToValue(selectedItem2) ?? "");
       },
       selectedItem: selectedItem ?? null
     });
@@ -418,6 +439,7 @@ const Select = React.forwardRef(
             SelectHiddenSelect,
             {
               defaultValue,
+              disabled,
               name,
               onChange: (event) => {
                 setShadowValue(event.target.value);
@@ -443,6 +465,7 @@ const ListboxVirtualized = React.forwardRef(({ children, highlightedItem, items,
   React.useEffect(() => {
     requestAnimationFrame(() => setEnabled(true));
   }, []);
+  const { presence } = React.useContext(Skeleton.TransitionGroupContext) ?? {};
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: items.length,
     enabled,
@@ -455,11 +478,11 @@ const ListboxVirtualized = React.forwardRef(({ children, highlightedItem, items,
   );
   React.useEffect(() => {
     const index = itemToIndexMap.get(highlightedItem);
-    if (!enabled || typeof index !== "number") {
+    if (!presence || typeof index !== "number" || rowVirtualizer.isScrolling) {
       return;
     }
     rowVirtualizer.scrollToIndex(index);
-  }, [enabled, highlightedItem, itemToIndexMap, rowVirtualizer]);
+  }, [presence, highlightedItem, itemToIndexMap, rowVirtualizer]);
   const virtualItems = rowVirtualizer.getVirtualItems();
   const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
     Math.max(0, virtualItems[0].start),
@@ -550,7 +573,7 @@ const SelectRadioItem = React.forwardRef(
 );
 SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
 
-var content$3 = Skeleton.recipeRuntime({base:['_1hoc702']});
+var content$3 = Skeleton.recipeRuntime({base:['fwayxp']});
 
 const SelectContent = React.forwardRef(
   ({
@@ -581,7 +604,6 @@ const SelectContent = React.forwardRef(
           }
         },
         open: isOpen,
-        presence: placed,
         children: /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           Skeleton.MenuListbox,
           {
@@ -664,7 +686,7 @@ const SelectTrigger = React.forwardRef(
       },
       [focusOnOpen]
     );
-    const value = selectedItem ? itemToLabel(selectedItem) : placeholder;
+    const value = selectedItem ? itemToLabel(selectedItem) || placeholder : placeholder;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactPopper.PopperAnchor,
       {
@@ -740,7 +762,7 @@ const Clock = React.forwardRef(
           value: parsed.hour,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select hour", flex: "1", placeholder: "HH" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: hours.map((hour) => /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item: hour, children: hour }, hour)) })
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
           ]
         }
       ),
@@ -779,7 +801,7 @@ const Clock = React.forwardRef(
                 placeholder: "--"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: periods.map((meridiem) => /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item: meridiem, children: meridiem }, meridiem)) })
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
           ]
         }
       )
@@ -788,16 +810,6 @@ const Clock = React.forwardRef(
 );
 Clock.displayName = "@optiaxiom/react/Clock";
 
-function useEffectEvent(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React.useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
 const list = ["md", "sm"];
 const useResponsiveMatches = (config) => {
   const matches = {
@@ -826,8 +838,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'},'_4uegt3'],variants:{appearance:{'default':'_1y80vy8',holiday:[{color:'fg.error'},'k3u0yt'],range_middle:'_1f0l8kz',selected:[{color:'fg.white'},'cij4sj'],weekend:[{color:'fg.tertiary'},'kctzoi']},range:{end:['up3dxi'],middle:['sgvt12'],start:['utr7mk']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_1u8rpv1']});
+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']});
 
 function CalendarDayButton({
   children,
@@ -892,14 +904,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1ckpbsz']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1w3br18']});
 
 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'},'_5mhgbp']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_84h1eu']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -1064,7 +1076,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'urz2jt'});
+var root = Skeleton.recipeRuntime({base:'_1bsyws2'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1075,7 +1087,7 @@ ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-var card = Skeleton.recipeRuntime({base:['_1yh5xm1',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'xx2tni']});
+var card = Skeleton.recipeRuntime({base:['_9v3ucd',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'u4v2ms']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -1107,7 +1119,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_6dvtfg'],variants:{visible:{false:'y3ct7d',true:'hwgnsm'}}});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'jproer'],variants:{visible:{false:'ym8uww',true:'fign15'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
@@ -1116,7 +1128,7 @@ const ActionsContent = React.forwardRef(
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var action = Skeleton.recipeRuntime({base:['rkcjl9']});
+var action = Skeleton.recipeRuntime({base:['oxlg66']});
 
 const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1186,7 +1198,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'uf131h'],variants:{orientation:{horizontal:[{w:'auto'},'x5z5hg'],vertical:[{w:'full'},'aj8w6g']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_9fsv0m'],variants:{orientation:{horizontal:[{w:'auto'},'m10qi7'],vertical:[{w:'full'},'x4dzne']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -1212,7 +1224,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['_1kozqb7',{alignSelf:'stretch'},'_1nswtwo'],variants:{orientation:{horizontal:['a9pv7m'],vertical:['yjgvyd']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_1lx6sij',{alignSelf:'stretch'},'nmpkrw'],variants:{orientation:{horizontal:['_1s6v127'],vertical:['_4rrvmw']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1270,11 +1282,36 @@ const ComboboxPopoverContent = React.forwardRef((props, ref) => {
 });
 ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
 
+const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
+
 const collator = new Intl.Collator(void 0, {
   sensitivity: "base",
   usage: "search"
 });
+function fuzzysearch(haystack, needle) {
+  const hlen = haystack.length;
+  const nlen = needle.length;
+  if (nlen > hlen) {
+    return false;
+  }
+  if (nlen === hlen) {
+    return needle === haystack;
+  }
+  outer:
+    for (let i = 0, j = 0; i < nlen; i++) {
+      const nch = needle.charAt(i);
+      while (j < hlen) {
+        if (collator.compare(haystack.charAt(j++), nch) === 0) {
+          continue outer;
+        }
+      }
+      return false;
+    }
+  return true;
+}
+
 const useCommandItems = ({
+  defaultFilter,
   defaultItems,
   inputValue: inputValueProp,
   items: itemsProp,
@@ -1286,8 +1323,14 @@ const useCommandItems = ({
     onChange: onInputValueChange,
     prop: inputValueProp
   });
+  const filterFn = useEffectEvent(
+    defaultFilter ?? ((item, inputValue2) => {
+      const string = itemToLabel(item).normalize();
+      return fuzzysearch(string, inputValue2);
+    })
+  );
   const [itemsState, setItemsState] = React.useState(
-    defaultItems ? filter(defaultItems, inputValue, itemToLabel) : []
+    defaultItems ? filter(defaultItems, inputValue, filterFn) : []
   );
   const items = typeof itemsProp !== "undefined" ? itemsProp : itemsState;
   return [
@@ -1296,38 +1339,142 @@ const useCommandItems = ({
     useEffectEvent((inputValue2) => {
       setInputValue(inputValue2);
       if (typeof itemsProp === "undefined" && defaultItems) {
-        setItemsState(filter(defaultItems, inputValue2, itemToLabel));
+        setItemsState(filter(defaultItems, inputValue2, filterFn));
       }
     })
   ];
 };
-const filter = (items, inputValue, itemToLabel) => {
-  const substring = (inputValue ?? "").normalize("NFC");
-  return inputValue ? items.filter((item) => {
-    const string = itemToLabel(item).normalize("NFC");
-    for (let i = 0; i + substring.length <= string.length; i++) {
-      const slice = string.slice(i, i + substring.length);
-      if (collator.compare(substring, slice) === 0) {
-        return true;
-      }
-    }
-    return false;
-  }) : items;
+const filter = (items, inputValue, filterFn) => {
+  const substring = (inputValue ?? "").normalize();
+  return inputValue ? items.filter((item) => filterFn(item, substring)) : items;
 };
 
-function Combobox({
+function Command({
   children,
+  defaultFilter,
   defaultItems,
-  defaultOpen = false,
   inputValue: inputValueProp,
   isItemDisabled = () => false,
   isItemSelected = () => false,
   items: itemsProp,
   itemToLabel = (value) => value ? String(value) : "",
+  itemToSubItems,
   onInputValueChange,
-  onItemSelect,
+  onItemSelect
+}) {
+  const [items, inputValue, setInputValue] = useCommandItems({
+    defaultFilter,
+    defaultItems,
+    inputValue: inputValueProp,
+    items: itemsProp,
+    itemToLabel,
+    onInputValueChange
+  });
+  const [lastInteractionSource, setLastInteractionSource] = React.useState("pointer");
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    () => items.findIndex((item, index) => isItemSelected(item, index))
+  );
+  const [highlightedSubIndex, setHighlightedSubIndex] = React.useState(-1);
+  const downshift$1 = downshift.useCombobox({
+    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
+    inputValue,
+    isItemDisabled,
+    isOpen: placed,
+    // @ts-expect-error -- no harm in supporting read only arrays
+    items,
+    itemToString: (item) => item !== null ? itemToLabel(item) : "",
+    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);
+      }
+    },
+    onIsOpenChange({ isOpen, type }) {
+      if (isOpen) {
+        if (type === downshift.useCombobox.stateChangeTypes.InputClick || type === downshift.useCombobox.stateChangeTypes.ToggleButtonClick) {
+          setLastInteractionSource("pointer");
+        } else {
+          setLastInteractionSource("keyboard");
+        }
+      }
+    },
+    onSelectedItemChange({ selectedItem, type }) {
+      if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
+        onItemSelect?.(selectedItem);
+      }
+    },
+    selectedItem: null,
+    stateReducer: (state, actionAndChanges) => {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case downshift.useCombobox.stateChangeTypes.InputBlur:
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
+        case downshift.useCombobox.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            /**
+             * Keep the selected option highlighted rather than resetting to -1
+             */
+            highlightedIndex: state.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    }
+  });
+  downshift$1.getInputProps({}, { suppressRefError: true });
+  downshift$1.getMenuProps({}, { suppressRefError: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CommandProvider,
+    {
+      downshift: downshift$1,
+      highlightedItem: items[downshift$1.highlightedIndex],
+      highlightedSubIndex: highlightedSubIndex === -1 && items[downshift$1.highlightedIndex] && itemToSubItems?.(items[downshift$1.highlightedIndex])?.length ? 0 : highlightedSubIndex,
+      isItemDisabled,
+      isItemSelected,
+      items,
+      itemToLabel,
+      itemToSubItems,
+      lastInteractionSource,
+      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);
+        }
+      }),
+      setPlaced,
+      children
+    }
+  );
+}
+Command.displayName = "@optiaxiom/react/Command";
+
+function Combobox({
+  children,
+  defaultOpen = false,
   onOpenChange,
-  open: openProp
+  open: openProp,
+  ...props
 }) {
   const components = useResponsiveMatches({
     base: {
@@ -1346,40 +1493,11 @@ function Combobox({
     onChange: onOpenChange,
     prop: openProp
   });
-  const [items, inputValue, setInputValue] = useCommandItems({
-    defaultItems,
-    inputValue: inputValueProp,
-    items: itemsProp,
-    itemToLabel,
-    onInputValueChange
-  });
-  React.useEffect(() => {
-    if (open) {
-      setInputValue("");
-    }
-  }, [open, setInputValue]);
-  return /* @__PURE__ */ jsxRuntime.jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ComboboxProvider,
-    {
-      components,
-      inputValue,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToLabel,
-      onInputValueChange: setInputValue,
-      onItemSelect,
-      open,
-      setOpen,
-      children
-    }
-  ) });
+  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";
 
-const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
-
-var item$2 = Skeleton.recipeRuntime({base:'_1osx9pv'});
+var item$2 = Skeleton.recipeRuntime({base:'_14286wt'});
 
 const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
   const { lastInteractionSource } = useCommandContext(
@@ -1442,6 +1560,9 @@ const CommandInput = React.forwardRef(
       setHighlightedSubIndex,
       setInputValue
     } = useCommandContext("@optiaxiom/react/CommandInput");
+    React.useEffect(() => {
+      setInputValue("");
+    }, [setInputValue]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Input,
       {
@@ -1528,170 +1649,48 @@ const ComboboxInput = React.forwardRef(
 );
 ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
 
-const ComboboxEmpty = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { ref, ...props });
-  }
-);
-ComboboxEmpty.displayName = "@optiaxiom/react/ComboboxEmpty";
-
 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, size, ...props }, ref) => {
-    const { downshift, setPlaced } = useCommandContext(
-      "@optiaxiom/react/CommandListbox"
-    );
+  ({ 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, { size, ...downshift.getMenuProps({ ref, ...props }), children });
-  }
-);
-CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
-
-const ComboboxListbox = React.forwardRef(
-  ({ children, items: itemsProp, loading, ...props }, ref) => {
-    const { highlightedItem, items, itemToLabel } = useCommandContext(
-      "@optiaxiom/react/ComboboxListbox"
-    );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      CommandListbox,
+      Skeleton.Listbox,
       {
-        asChild: !loading && typeof children === "function",
-        ref,
-        tabIndex: -1,
-        ...props,
-        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(
+        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: itemsProp ?? items,
+            items,
             children
           }
-        ) : children : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          ComboboxRadioItem,
-          {
-            item,
-            children: itemToLabel(item)
-          },
-          typeof item === "string" ? item : index
-        )) : /* @__PURE__ */ jsxRuntime.jsx(ComboboxEmpty, { children: "No results found." })
+        ) : 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 })
       }
     );
   }
 );
-ComboboxListbox.displayName = "@optiaxiom/react/ComboboxListbox";
+CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
 
-function Command({
-  children,
-  defaultItems,
-  inputValue: inputValueProp,
-  isItemDisabled = () => false,
-  isItemSelected = () => false,
-  items: itemsProp,
-  itemToLabel = (value) => value ? String(value) : "",
-  itemToSubItems,
-  onInputValueChange,
-  onItemSelect
-}) {
-  const [items, inputValue, setInputValue] = useCommandItems({
-    defaultItems,
-    inputValue: inputValueProp,
-    items: itemsProp,
-    itemToLabel,
-    onInputValueChange
-  });
-  const [lastInteractionSource, setLastInteractionSource] = React.useState("pointer");
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    () => items.findIndex((item, index) => isItemSelected(item, index))
-  );
-  const [highlightedSubIndex, setHighlightedSubIndex] = React.useState(-1);
-  const downshift$1 = downshift.useCombobox({
-    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
-    inputValue,
-    isItemDisabled,
-    isOpen: placed,
-    items,
-    itemToString: itemToLabel,
-    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);
-      }
-    },
-    onIsOpenChange({ isOpen, type }) {
-      if (isOpen) {
-        if (type === downshift.useCombobox.stateChangeTypes.InputClick || type === downshift.useCombobox.stateChangeTypes.ToggleButtonClick) {
-          setLastInteractionSource("pointer");
-        } else {
-          setLastInteractionSource("keyboard");
-        }
-      }
-    },
-    onSelectedItemChange({ selectedItem, type }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem) {
-        onItemSelect?.(selectedItem);
-      }
-    },
-    selectedItem: null,
-    stateReducer: (state, actionAndChanges) => {
-      const { changes, type } = actionAndChanges;
-      switch (type) {
-        case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-        case downshift.useCombobox.stateChangeTypes.ItemClick:
-          return {
-            ...changes,
-            /**
-             * Keep the selected option highlighted rather than resetting to -1
-             */
-            highlightedIndex: state.highlightedIndex
-          };
-        default:
-          return changes;
-      }
-    }
-  });
-  downshift$1.getMenuProps({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandProvider,
-    {
-      downshift: downshift$1,
-      highlightedItem: items[downshift$1.highlightedIndex],
-      highlightedSubIndex: highlightedSubIndex === -1 && items[downshift$1.highlightedIndex] && itemToSubItems?.(items[downshift$1.highlightedIndex])?.length ? 0 : highlightedSubIndex,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToLabel,
-      itemToSubItems,
-      lastInteractionSource,
-      setHighlightedIndex: (index, source) => {
-        setHighlightedIndex(index);
-        setLastInteractionSource(source);
-      },
-      setHighlightedSubIndex: (index, source) => {
-        setHighlightedSubIndex(index);
-        setLastInteractionSource(source);
-      },
-      setInputValue,
-      setPlaced,
-      children
-    }
-  );
-}
-Command.displayName = "@optiaxiom/react/Command";
+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) => {
@@ -1700,16 +1699,9 @@ const ComboboxContent = React.forwardRef(
       sm: "4"
     });
     const { labelId } = Skeleton.useFieldContext();
-    const {
-      components,
-      inputValue,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToLabel,
-      onInputValueChange,
-      onItemSelect
-    } = useComboboxContext("@optiaxiom/react/ComboboxContent");
+    const { components } = useComboboxContext(
+      "@optiaxiom/react/ComboboxContent"
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       components.Content,
       {
@@ -1718,22 +1710,10 @@ const ComboboxContent = React.forwardRef(
         p,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Command,
-          {
-            inputValue,
-            isItemDisabled,
-            isItemSelected,
-            items,
-            itemToLabel,
-            onInputValueChange,
-            onItemSelect,
-            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ComboboxInput, { placeholder: "Search..." }),
-              /* @__PURE__ */ jsxRuntime.jsx(ComboboxListbox, {})
-            ] })
-          }
-        )
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ComboboxInput, { placeholder: "Search..." }),
+          /* @__PURE__ */ jsxRuntime.jsx(ComboboxListbox, {})
+        ] })
       }
     );
   }
@@ -1767,15 +1747,10 @@ const ComboboxSeparator = React.forwardRef((props, ref) => {
 ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
 
 const ComboboxTrigger = React.forwardRef(
-  ({
-    "aria-labelledby": ariaLabelledBy,
-    asChild,
-    children,
-    placeholder,
-    ...props
-  }, outerRef) => {
-    const { components, isItemSelected, items, itemToLabel, setOpen } = useComboboxContext("@optiaxiom/react/ComboboxTrigger");
-    const value = items.filter((item, index) => isItemSelected(item, index));
+  ({ "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);
@@ -1792,12 +1767,8 @@ 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 ? itemToLabel(value[0]) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          value.length,
-          " selected"
-        ] }) }) : placeholder })
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
       }
     );
   }
@@ -1869,17 +1840,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_143el2b'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_164v8pq']});
+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']});
 
 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'},'_1jc4rnh']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_13z2emg'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1wk9652'],variants:{active:{false:'d9ovjy',true:'_718fjn'}}});
+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'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1932,22 +1903,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'},'pf6p2k'],variants:{layout:{auto:['_1b8fdgd'],fixed:[{display:'grid'},'_1motu2a']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'fppsbj']});
+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']});
 
 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:['_5i65wt']});
+var body = Skeleton.recipeRuntime({base:['jli4x9']});
 
 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'},'_1mdksgk']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'p72438']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1959,20 +1930,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:['_87j3dm',{transition:'colors',w:'full'},'_11a2rr9']});
+var row = Skeleton.recipeRuntime({base:['_14xes2s',{transition:'colors',w:'full'},'_1qlkiw3']});
 
 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'},'jbu0v4'],variants:{pinned:{left:'n6ea40',right:'udkbdu'},pinnedType:{body:'_14g265e',header:{}}}});
-var cellOffsetVar = 'var(--_1o9r5u6)';
-var cellSizeVar = 'var(--o6g8m9)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_1ole8v5']});
-var leftTotalSizeVar = 'var(--_1abw5yr)';
-var rightTotalSizeVar = 'var(--_1pr764b)';
-var table = Skeleton.recipeRuntime({base:'_1j82aiq',variants:{pinned:{both:'_176wa32',left:'_1p99ji0',none:{},right:'qa8jx0'}}});
+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'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -2150,7 +2121,7 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
-var addon = Skeleton.recipeRuntime({base:'_9g1b73',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'w0mlxs',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
 const DataTableFooter = React.forwardRef(
@@ -2185,7 +2156,7 @@ const DataTableFooter = React.forwardRef(
                       "aria-labelledby": pageSizeId
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: pageSizeOptions.map((rows) => /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item: rows, children: rows }, rows)) })
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
                 ]
               }
             )
@@ -2232,7 +2203,7 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_1mrrcup'});
+var picker = Skeleton.recipeRuntime({base:'_3xxe0i'});
 
 function toInstant(str) {
   const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
@@ -2406,7 +2377,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_12x1rti']});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1jbn8se']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -2533,7 +2504,7 @@ function DateRangePicker({
 }
 DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
 
-var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_15d7487']});
+var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_142opfz']});
 
 const DateRangePickerContent = React.forwardRef(
   ({
@@ -2573,9 +2544,15 @@ const DateRangePickerContent = React.forwardRef(
               if (!from) {
                 const newFrom = value?.from && newValue?.from && newValue.from < value.from ? newValue.from : newValue?.to;
                 setFrom(newFrom);
-                setValue({ from: newFrom, to: newFrom });
+                setValue({
+                  from: newFrom,
+                  to: newFrom ? toInstant(toPlainDate(newFrom) + "T23:59:59.999") : void 0
+                });
               } else if (newValue?.to) {
-                setValue(newValue);
+                setValue({
+                  from: newValue.from,
+                  to: toInstant(toPlainDate(newValue.to) + "T23:59:59.999")
+                });
                 setOpen(false);
               }
             },
@@ -2634,50 +2611,32 @@ const [DropdownMenuComboboxProvider, useDropdownMenuComboboxContext] = reactCont
 
 function DropdownMenuCombobox({
   children,
-  defaultItems,
   defaultOpen,
-  inputValue: inputValueProp,
-  isItemDisabled,
-  isItemSelected,
-  items: itemsProp,
-  itemToLabel = (value) => value ? String(value) : "",
-  onInputValueChange,
   onItemSelect,
   onOpenChange,
-  open: openProp
+  open: openProp,
+  ...props
 }) {
+  const { setOpen: setOpenRoot } = Skeleton.useDropdownMenuContext(
+    "@optiaxiom/react/DropdownMenuCombobox"
+  );
   const [open, setOpen] = reactUseControllableState.useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  const [items, inputValue, setInputValue] = useCommandItems({
-    defaultItems,
-    inputValue: inputValueProp,
-    items: itemsProp,
-    itemToLabel,
-    onInputValueChange
-  });
-  React.useEffect(() => {
-    if (open) {
-      setInputValue("");
-    }
-  }, [open, setInputValue]);
   const inputRef = React.useRef(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DropdownMenuSub, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownMenuComboboxProvider,
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DropdownMenuSub, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxProvider, { inputRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Command,
     {
-      inputRef,
-      inputValue,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToLabel,
-      onInputValueChange: setInputValue,
-      onItemSelect,
+      onItemSelect: (item) => {
+        onItemSelect?.(item);
+        setOpenRoot(false);
+      },
+      ...props,
       children
     }
-  ) });
+  ) }) });
 }
 DropdownMenuCombobox.displayName = "@optiaxiom/react/DropdownMenuCombobox";
 
@@ -2715,85 +2674,46 @@ const DropdownMenuAutocompleteItem = React.forwardRef(({ children, ...props }, r
 });
 DropdownMenuAutocompleteItem.displayName = "@optiaxiom/react/DropdownMenuAutocompleteItem";
 
-const DropdownMenuComboboxListbox = React.forwardRef(({ children, items: itemsProp, loading, ...props }, ref) => {
-  const { highlightedItem, items, itemToLabel } = useCommandContext(
+const DropdownMenuComboboxListbox = React.forwardRef(({ children, ...props }, ref) => {
+  const { itemToLabel } = useCommandContext(
     "@optiaxiom/react/DropdownMenuComboboxListbox"
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandListbox,
-    {
-      asChild: !loading && typeof children === "function",
-      ref,
-      ...props,
-      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(DropdownMenuAutocompleteItem, { item, children: itemToLabel(item) }, item))
-    }
-  );
+  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 { setOpen } = Skeleton.useDropdownMenuContext(
+  const { presence } = Skeleton.useDropdownMenuSubContext(
     "@optiaxiom/react/DropdownMenuComboboxContent"
   );
-  const {
-    inputRef,
-    inputValue,
-    isItemDisabled,
-    isItemSelected,
-    items,
-    itemToLabel,
-    onInputValueChange,
-    onItemSelect
-  } = useDropdownMenuComboboxContext(
+  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) {
+    if (!container || !presence) {
       return;
     }
     const listener = () => inputRef.current?.focus();
     container.addEventListener("focus", listener);
     return () => container.removeEventListener("focus", listener);
-  }, [inputRef]);
+  }, [inputRef, presence]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Command,
+    Skeleton.DropdownMenuSubContent,
     {
-      inputValue,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToLabel,
-      onInputValueChange,
-      onItemSelect: (item) => {
-        onItemSelect?.(item);
-        setOpen(false);
+      onMouseMove: (event) => {
+        onMouseMove?.(event);
+        inputRef.current?.focus();
       },
-      children: /* @__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, {})
-          ] })
-        }
-      )
+      ref,
+      role: "dialog",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxInput, { placeholder: "Search..." }),
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxListbox, {})
+      ] })
     }
   );
 });
@@ -2804,7 +2724,7 @@ const DropdownMenuComboboxTrigger = React.forwardRef((props, ref) => {
 });
 DropdownMenuComboboxTrigger.displayName = "@optiaxiom/react/DropdownMenuComboboxTrigger";
 
-var mark = Skeleton.recipeRuntime({base:'_1u22gyd'});
+var mark = Skeleton.recipeRuntime({base:'i6obck'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2836,8 +2756,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'zujuet',variants:{empty:{false:{},true:'irh2h9'}}});
-var input$1 = Skeleton.recipeRuntime({base:'snpcyt'});
+var editor = Skeleton.recipeRuntime({base:'_7a7gm',variants:{empty:{false:{},true:'v0acjn'}}});
+var input$1 = Skeleton.recipeRuntime({base:'w0lpc1'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2917,7 +2837,7 @@ function getText(element) {
   return text;
 }
 
-var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'m9re08']});
+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 label = Skeleton.recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 
@@ -2948,7 +2868,7 @@ const LabelMenuButton = React.forwardRef(
 );
 LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
 
-var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1biy5g3']});
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'ikdrzs']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -2973,7 +2893,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'},'mpq5u7'],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'},'_18b6ch8'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
@@ -3028,63 +2948,21 @@ const [SpotlightProvider, useSpotlightContext] = reactContext.createContext("@op
 
 function Spotlight({
   children,
-  defaultItems,
   defaultOpen = false,
-  inputValue: inputValueProp,
-  isItemDisabled = () => false,
-  items: itemsProp,
-  itemToLabel = (value) => value ? String(value) : "",
-  itemToSubItems,
-  onInputValueChange,
-  onItemSelect,
   onOpenChange,
-  open: openProp
+  open: openProp,
+  ...props
 }) {
   const [open, setOpen] = reactUseControllableState.useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  const [items, inputValue, setInputValue] = useCommandItems({
-    defaultItems,
-    inputValue: inputValueProp,
-    items: itemsProp,
-    itemToLabel,
-    onInputValueChange
-  });
-  React.useEffect(() => {
-    if (!open) {
-      setInputValue("");
-    }
-  }, [open, setInputValue]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    SpotlightProvider,
-    {
-      inputValue,
-      isItemDisabled,
-      items,
-      itemToLabel,
-      itemToSubItems,
-      onInputValueChange: setInputValue,
-      onItemSelect,
-      open,
-      setOpen,
-      children
-    }
-  ) });
+  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) => {
-  const {
-    inputValue,
-    isItemDisabled,
-    items,
-    itemToLabel,
-    itemToSubItems,
-    onInputValueChange,
-    onItemSelect
-  } = useSpotlightContext("@optiaxiom/react/SpotlightContent");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Skeleton.DialogContent,
     {
@@ -3096,19 +2974,7 @@ const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children,
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { children: ariaLabel ?? "Quick search" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Command,
-          {
-            inputValue,
-            isItemDisabled,
-            items,
-            itemToLabel,
-            itemToSubItems,
-            onInputValueChange,
-            onItemSelect,
-            children
-          }
-        )
+        children
       ]
     }
   );
@@ -3122,7 +2988,7 @@ const SpotlightEmpty = React.forwardRef(
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_9pwxhp']});
+var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1e8glwj']});
 
 const SpotlightInput = React.forwardRef(
   ({ addonAfter, className, ...props }, ref) => {
@@ -3182,7 +3048,7 @@ SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
 const SpotlightListbox = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { gap: "8", ref, ...props }));
 SpotlightListbox.displayName = "@optiaxiom/react/SpotlightListbox";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_11auo5f']});
+var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1hz708r']});
 
 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(
@@ -3279,7 +3145,7 @@ const CommandSubItem = React.forwardRef(
 );
 CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'hi5w0x',true:'_18pj4kz'}}});
+var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1d3ixq',true:'ojdloy'}}});
 
 const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3339,7 +3205,6 @@ exports.Clock = Clock;
 exports.Combobox = Combobox;
 exports.ComboboxCheckboxItem = ComboboxCheckboxItem;
 exports.ComboboxContent = ComboboxContent;
-exports.ComboboxEmpty = ComboboxEmpty;
 exports.ComboboxFooter = ComboboxFooter;
 exports.ComboboxGroup = ComboboxGroup;
 exports.ComboboxInput = ComboboxInput;