@optiaxiom/react 1.2.1 → 1.2.3

package/dist/cjs/unstable.js

@@ -3,10 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-C5Hitlls.js');
-require('./assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-os_HDA_Z.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-Cx3SKb6H.css');
+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 reactComposeRefs = require('@radix-ui/react-compose-refs');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
@@ -16,75 +16,76 @@ 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-Clg7WjUb.css');
+require('./assets/src/select-content/SelectContent.css.ts.vanilla-hnKiMBLN.css');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-BSYbWT-r.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-CXViYM7b.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-CthaNPla.css');
+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');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DgtPdTAh.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-CsJxHhFc.css');
-require('./assets/src/link/Link.css.ts.vanilla-UCpNUYWa.css');
-require('./assets/src/card/Card.css.ts.vanilla-DbLKnqUo.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-_UfaSvyS.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-z3unCwRo.css');
-require('./assets/src/card-action/CardAction.css.ts.vanilla-C49W_yor.css');
+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');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-DKwDkrcg.css');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-CBP-IbRI.css');
 var RadixDialog = require('@radix-ui/react-dialog');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-DVJVzR2k.css');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-84xHc68j.css');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-W6Khkalq.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DWK3EWXm.css');
-require('./assets/src/table/Table.css.ts.vanilla-DppyHkK_.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-C-922DVT.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-DN_hxrZj.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-D7emOZJi.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-SQxeBF7k.css');
-require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-DAi3klAu.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-HcEsrZW7.css');
-require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-C7lyIL0R.css');
-require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-C9OGCIAj.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-BBCFzWTa.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-CyYfftZo.css');
+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');
 var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DgtPdTAh.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-B4p1rHFT.css');
-require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-BRyS9Qb4.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-vC3rRLUg.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-DdWm__I7.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-W0qTnuXO.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-B-kpM7Gr.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-DsFm7XLh.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BZn78GT3.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-rvL6ykD8.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-CTgSdGWh.css');
+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('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-0PyACqm-.css');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-DM0xAozN.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-_XAOP0ff.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-DgtPdTAh.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-CA3LAOeu.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-D1h4gYyA.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-DEnY6Cu8.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-DDypIAx2.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-hMhU56Ah.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('@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-D34eKJ8V.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-DEVrCpaO.css');
+require('./assets/src/text/Text.css.ts.vanilla-Cppbhebc.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-Bx7HYaRZ.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-hw60FkV-.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-DjZ2kzIz.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-Dhifwe4Z.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-BXmZfDA2.css');
+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('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-CpC_7tYh.css');
-require('./assets/src/box/Box.css.ts.vanilla-nUzLtBqq.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-BnwUQUGM.css');
+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');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -246,7 +247,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1d036to']});
+var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'zmcqdz']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -256,7 +257,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'},'_1ycizya']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'oqyc6o']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -333,30 +334,6 @@ const useObserveReset = (inputRef, setValue) => {
   }, [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,
@@ -383,7 +360,7 @@ const Select = React.forwardRef(
       onChange: onValueChange,
       prop: value
     });
-    useObserveValue(innerRef, setShadowValue);
+    Skeleton.useObserveValue(innerRef, setShadowValue);
     useObserveReset(innerRef, setShadowValue);
     const selectedItem = React.useMemo(
       () => shadowValue ? items.find((item) => itemToValue(item) === shadowValue) : void 0,
@@ -504,7 +481,7 @@ const ListboxVirtualized = React.forwardRef(({ children, highlightedItem, items,
     observer.observe(innerRef.current);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Listbox, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     Skeleton.Box,
     {
       flex: "none",
@@ -573,7 +550,7 @@ const SelectRadioItem = React.forwardRef(
 );
 SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
 
-var content$3 = Skeleton.recipeRuntime({base:['jqon0m']});
+var content$3 = Skeleton.recipeRuntime({base:['_1hoc702']});
 
 const SelectContent = React.forwardRef(
   ({
@@ -849,8 +826,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'},'_1v69ysg'],variants:{appearance:{'default':'_158ksx7',holiday:[{color:'fg.error'},'_1vn045p'],range_middle:'_1bd17z4',selected:[{color:'fg.white'},'_5e84fw'],weekend:[{color:'fg.tertiary'},'_1o5oqyb']},range:{end:['_7j2wcy'],middle:['_1c7z75l'],start:['r1enva']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_11ti670']});
+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']});
 
 function CalendarDayButton({
   children,
@@ -915,14 +892,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1xucfdf']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1ckpbsz']});
 
 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'},'_1440ccj']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_5mhgbp']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -1087,7 +1064,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'_16s51hm'});
+var root = Skeleton.recipeRuntime({base:'urz2jt'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1098,7 +1075,7 @@ ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-var card = Skeleton.recipeRuntime({base:['l5blm9',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1ft5c1']});
+var card = Skeleton.recipeRuntime({base:['_1yh5xm1',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'xx2tni']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -1130,7 +1107,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_1skhpyr'],variants:{visible:{false:'_1720qzu',true:'_8beru8'}}});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_6dvtfg'],variants:{visible:{false:'y3ct7d',true:'hwgnsm'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
@@ -1139,7 +1116,7 @@ const ActionsContent = React.forwardRef(
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var action = Skeleton.recipeRuntime({base:['_1gykdu1']});
+var action = Skeleton.recipeRuntime({base:['rkcjl9']});
 
 const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1209,7 +1186,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'udfqza'],variants:{orientation:{horizontal:[{w:'auto'},'sa8291'],vertical:[{w:'full'},'_1vnaxh1']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'uf131h'],variants:{orientation:{horizontal:[{w:'auto'},'x5z5hg'],vertical:[{w:'full'},'aj8w6g']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -1235,7 +1212,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['glarbo',{alignSelf:'stretch'},'_1dedy1o'],variants:{orientation:{horizontal:['_1qbczf1'],vertical:['_1s3a94e']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_1kozqb7',{alignSelf:'stretch'},'_1nswtwo'],variants:{orientation:{horizontal:['a9pv7m'],vertical:['yjgvyd']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1293,13 +1270,59 @@ const ComboboxPopoverContent = React.forwardRef((props, ref) => {
 });
 ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
 
+const collator = new Intl.Collator(void 0, {
+  sensitivity: "base",
+  usage: "search"
+});
+const useCommandItems = ({
+  defaultItems,
+  inputValue: inputValueProp,
+  items: itemsProp,
+  itemToLabel,
+  onInputValueChange
+}) => {
+  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
+  });
+  const [itemsState, setItemsState] = React.useState(
+    defaultItems ? filter(defaultItems, inputValue, itemToLabel) : []
+  );
+  const items = typeof itemsProp !== "undefined" ? itemsProp : itemsState;
+  return [
+    items,
+    inputValue,
+    useEffectEvent((inputValue2) => {
+      setInputValue(inputValue2);
+      if (typeof itemsProp === "undefined" && defaultItems) {
+        setItemsState(filter(defaultItems, inputValue2, itemToLabel));
+      }
+    })
+  ];
+};
+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;
+};
+
 function Combobox({
   children,
+  defaultItems,
   defaultOpen = false,
-  inputValue,
+  inputValue: inputValueProp,
   isItemDisabled = () => false,
   isItemSelected = () => false,
-  items,
+  items: itemsProp,
   itemToLabel = (value) => value ? String(value) : "",
   onInputValueChange,
   onItemSelect,
@@ -1323,15 +1346,18 @@ function Combobox({
     onChange: onOpenChange,
     prop: openProp
   });
-  const onInputValueChangeStable = useEffectEvent(
-    onInputValueChange ?? (() => {
-    })
-  );
+  const [items, inputValue, setInputValue] = useCommandItems({
+    defaultItems,
+    inputValue: inputValueProp,
+    items: itemsProp,
+    itemToLabel,
+    onInputValueChange
+  });
   React.useEffect(() => {
     if (open) {
-      onInputValueChangeStable("");
+      setInputValue("");
     }
-  }, [open, onInputValueChangeStable]);
+  }, [open, setInputValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
     ComboboxProvider,
     {
@@ -1341,7 +1367,7 @@ function Combobox({
       isItemSelected,
       items,
       itemToLabel,
-      onInputValueChange,
+      onInputValueChange: setInputValue,
       onItemSelect,
       open,
       setOpen,
@@ -1353,7 +1379,7 @@ Combobox.displayName = "@optiaxiom/react/Combobox";
 
 const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
 
-var item$2 = Skeleton.recipeRuntime({base:'m0uhps'});
+var item$2 = Skeleton.recipeRuntime({base:'_1osx9pv'});
 
 const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
   const { lastInteractionSource } = useCommandContext(
@@ -1406,13 +1432,6 @@ const ComboboxCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
 });
 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 {
@@ -1509,50 +1528,82 @@ 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 ComboboxScrollArea = React.forwardRef(({ children, items: itemsProp, loading, ...props }, ref) => {
-  const { highlightedItem, items } = useCommandContext(
-    "@optiaxiom/react/ComboboxScrollArea"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.ListboxScrollArea,
-    {
-      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(ComboboxRadioItem, { item, children: item }, item))
-    }
-  );
-});
-ComboboxScrollArea.displayName = "@optiaxiom/react/ComboboxScrollArea";
+const CommandListbox = React.forwardRef(
+  ({ children, size, ...props }, ref) => {
+    const { downshift, setPlaced } = useCommandContext(
+      "@optiaxiom/react/CommandListbox"
+    );
+    React.useEffect(() => {
+      requestAnimationFrame(() => setPlaced(true));
+    }, [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,
+      {
+        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(
+          ListboxVirtualized,
+          {
+            highlightedItem,
+            items: itemsProp ?? 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." })
+      }
+    );
+  }
+);
+ComboboxListbox.displayName = "@optiaxiom/react/ComboboxListbox";
 
 function Command({
   children,
+  defaultItems,
   inputValue: inputValueProp,
   isItemDisabled = () => false,
   isItemSelected = () => false,
-  items,
+  items: itemsProp,
   itemToLabel = (value) => value ? String(value) : "",
   itemToSubItems,
   onInputValueChange,
-  onItemSelect,
-  ...props
+  onItemSelect
 }) {
-  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
-    defaultProp: "",
-    onChange: onInputValueChange,
-    prop: inputValueProp
+  const [items, inputValue, setInputValue] = useCommandItems({
+    defaultItems,
+    inputValue: inputValueProp,
+    items: itemsProp,
+    itemToLabel,
+    onInputValueChange
   });
   const [lastInteractionSource, setLastInteractionSource] = React.useState("pointer");
   const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
@@ -1560,7 +1611,6 @@ function Command({
   );
   const [highlightedSubIndex, setHighlightedSubIndex] = React.useState(-1);
   const downshift$1 = downshift.useCombobox({
-    ...props,
     highlightedIndex: highlightedIndex === -1 ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
     inputValue,
     isItemDisabled,
@@ -1596,7 +1646,23 @@ function Command({
         onItemSelect?.(selectedItem);
       }
     },
-    selectedItem: null
+    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(
@@ -1608,6 +1674,7 @@ function Command({
       isItemDisabled,
       isItemSelected,
       items,
+      itemToLabel,
       itemToSubItems,
       lastInteractionSource,
       setHighlightedIndex: (index, source) => {
@@ -1626,19 +1693,6 @@ function Command({
 }
 Command.displayName = "@optiaxiom/react/Command";
 
-const CommandListbox = React.forwardRef(
-  ({ children, size, ...props }, ref) => {
-    const { downshift, setPlaced } = useCommandContext(
-      "@optiaxiom/react/CommandListbox"
-    );
-    React.useEffect(() => {
-      requestAnimationFrame(() => setPlaced(true));
-    }, [setPlaced]);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Listbox, { size, ...downshift.getMenuProps({ ref, ...props }), children });
-  }
-);
-CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
-
 const ComboboxContent = React.forwardRef(
   ({ children, ...props }, ref) => {
     const p = useResponsiveMatches({
@@ -1674,27 +1728,10 @@ const ComboboxContent = React.forwardRef(
             itemToLabel,
             onInputValueChange,
             onItemSelect,
-            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;
-              }
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            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" })
-            ] }) })
+              /* @__PURE__ */ jsxRuntime.jsx(ComboboxListbox, {})
+            ] })
           }
         )
       }
@@ -1832,17 +1869,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_7lests'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_1x2t2my']});
+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']});
 
 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'},'kxstwj']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_7w5lj2'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_87vrdf'],variants:{active:{false:'_10urqql',true:'_1m3ppah'}}});
+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'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1895,22 +1932,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'},'_1wwj3bg'],variants:{layout:{auto:['_14pqbl5'],fixed:[{display:'grid'},'j95xxb']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_1ujm27r']});
+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']});
 
 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:['_1d1km0w']});
+var body = Skeleton.recipeRuntime({base:['_5i65wt']});
 
 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'},'_1g4wytd']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1mdksgk']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1922,20 +1959,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:['_1l2gdm9',{transition:'colors',w:'full'},'_1v6oh7p']});
+var row = Skeleton.recipeRuntime({base:['_87j3dm',{transition:'colors',w:'full'},'_11a2rr9']});
 
 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'},'_141c5q2'],variants:{pinned:{left:'_1covsec',right:'_1twjx5s'},pinnedType:{body:'b3i7kg',header:{}}}});
-var cellOffsetVar = 'var(--_1s2xjze)';
-var cellSizeVar = 'var(--wep9ta)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'qjc5mu']});
-var leftTotalSizeVar = 'var(--uoccg)';
-var rightTotalSizeVar = 'var(--_1v0u4w1)';
-var table = Skeleton.recipeRuntime({base:'i3o1gc',variants:{pinned:{both:'imz10m',left:'_1iqe5xy',none:{},right:'_1xsz37l'}}});
+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'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -2113,7 +2150,7 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
-var addon = Skeleton.recipeRuntime({base:'yhvxp3',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'_9g1b73',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
 const DataTableFooter = React.forwardRef(
@@ -2195,7 +2232,7 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_1dlkamr'});
+var picker = Skeleton.recipeRuntime({base:'_1mrrcup'});
 
 function toInstant(str) {
   const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
@@ -2218,13 +2255,14 @@ const DateInput = React.forwardRef(
     const [open, setOpen] = React.useState(false);
     const hasInteractedOutsideRef = React.useRef(false);
     const pickerRef = React.useRef(null);
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     const [value, setValue] = reactUseControllableState.useControllableState({
       defaultProp: props.defaultValue,
       prop: props.value
     });
+    const forceValueChange = Skeleton.useObserveValue(innerRef, setValue);
     const instant = typeof value === "string" ? toInstant(value.includes("T") ? value : value + "T00:00") : void 0;
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     const maxDate = max ? new Date(max) : void 0;
     const minDate = min ? new Date(min) : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
@@ -2293,12 +2331,9 @@ const DateInput = React.forwardRef(
                   if (!date) {
                     return;
                   }
-                  if (innerRef.current) {
-                    Skeleton.forceValueChange(
-                      innerRef?.current,
-                      type === "datetime-local" ? toPlainDateTime(date) : toPlainDate(date)
-                    );
-                  }
+                  forceValueChange(
+                    type === "datetime-local" ? toPlainDateTime(date) : toPlainDate(date)
+                  );
                   if (type === "date") {
                     setOpen(false);
                   }
@@ -2314,9 +2349,7 @@ const DateInput = React.forwardRef(
                 Skeleton.Button,
                 {
                   onClick: () => {
-                    if (innerRef.current) {
-                      Skeleton.forceValueChange(innerRef.current, "");
-                    }
+                    forceValueChange("");
                     if (type === "date") {
                       setOpen(false);
                     }
@@ -2373,7 +2406,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_7xrhpp']});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_12x1rti']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -2500,7 +2533,7 @@ function DateRangePicker({
 }
 DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
 
-var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1ybeyy4']});
+var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_15d7487']});
 
 const DateRangePickerContent = React.forwardRef(
   ({
@@ -2597,7 +2630,181 @@ const DateRangePickerTrigger = React.forwardRef(
 );
 DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
 
-var mark = Skeleton.recipeRuntime({base:'_1vpuu6r'});
+const [DropdownMenuComboboxProvider, useDropdownMenuComboboxContext] = reactContext.createContext("@optiaxiom/react/DropdownMenuCombobox");
+
+function DropdownMenuCombobox({
+  children,
+  defaultItems,
+  defaultOpen,
+  inputValue: inputValueProp,
+  isItemDisabled,
+  isItemSelected,
+  items: itemsProp,
+  itemToLabel = (value) => value ? String(value) : "",
+  onInputValueChange,
+  onItemSelect,
+  onOpenChange,
+  open: openProp
+}) {
+  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,
+    {
+      inputRef,
+      inputValue,
+      isItemDisabled,
+      isItemSelected,
+      items,
+      itemToLabel,
+      onInputValueChange: setInputValue,
+      onItemSelect,
+      children
+    }
+  ) });
+}
+DropdownMenuCombobox.displayName = "@optiaxiom/react/DropdownMenuCombobox";
+
+const DropdownMenuComboboxInput = React.forwardRef((props, outerRef) => {
+  const { downshift, highlightedItem } = useCommandContext(
+    "@optiaxiom/react/DropdownMenuComboboxInput"
+  );
+  const { inputRef } = useDropdownMenuComboboxContext(
+    "@optiaxiom/react/DropdownMenuComboboxInput"
+  );
+  const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CommandInput,
+    {
+      htmlSize: 10,
+      m: "4",
+      onKeyDown: (event) => {
+        if (!(event.target instanceof HTMLInputElement)) {
+          return;
+        }
+        if (event.key === " " && !event.target.value) {
+          event.preventDefault();
+          downshift.selectItem(highlightedItem);
+        }
+      },
+      ref,
+      ...props
+    }
+  );
+});
+DropdownMenuComboboxInput.displayName = "@optiaxiom/react/DropdownMenuComboboxInput";
+
+const DropdownMenuAutocompleteItem = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxItem, { children }) });
+});
+DropdownMenuAutocompleteItem.displayName = "@optiaxiom/react/DropdownMenuAutocompleteItem";
+
+const DropdownMenuComboboxListbox = React.forwardRef(({ children, items: itemsProp, loading, ...props }, ref) => {
+  const { highlightedItem, items, 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))
+    }
+  );
+});
+DropdownMenuComboboxListbox.displayName = "@optiaxiom/react/DropdownMenuComboboxListbox";
+
+const DropdownMenuComboboxContent = React.forwardRef(({ children, onMouseMove, ...props }, outerRef) => {
+  const { setOpen } = Skeleton.useDropdownMenuContext(
+    "@optiaxiom/react/DropdownMenuComboboxContent"
+  );
+  const {
+    inputRef,
+    inputValue,
+    isItemDisabled,
+    isItemSelected,
+    items,
+    itemToLabel,
+    onInputValueChange,
+    onItemSelect
+  } = useDropdownMenuComboboxContext(
+    "@optiaxiom/react/DropdownMenuComboboxContent"
+  );
+  const innerRef = React.useRef(null);
+  const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+  React.useEffect(() => {
+    const container = innerRef.current;
+    if (!container) {
+      return;
+    }
+    const listener = () => inputRef.current?.focus();
+    container.addEventListener("focus", listener);
+    return () => container.removeEventListener("focus", listener);
+  }, [inputRef]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Command,
+    {
+      inputValue,
+      isItemDisabled,
+      isItemSelected,
+      items,
+      itemToLabel,
+      onInputValueChange,
+      onItemSelect: (item) => {
+        onItemSelect?.(item);
+        setOpen(false);
+      },
+      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, {})
+          ] })
+        }
+      )
+    }
+  );
+});
+DropdownMenuComboboxContent.displayName = "@optiaxiom/react/DropdownMenuComboboxContent";
+
+const DropdownMenuComboboxTrigger = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DropdownMenuSubTrigger, { "aria-haspopup": "dialog", ref, ...props });
+});
+DropdownMenuComboboxTrigger.displayName = "@optiaxiom/react/DropdownMenuComboboxTrigger";
+
+var mark = Skeleton.recipeRuntime({base:'_1u22gyd'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2629,8 +2836,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'von1fn',variants:{empty:{false:{},true:'_115fwr0'}}});
-var input$1 = Skeleton.recipeRuntime({base:'t0bzca'});
+var editor = Skeleton.recipeRuntime({base:'zujuet',variants:{empty:{false:{},true:'irh2h9'}}});
+var input$1 = Skeleton.recipeRuntime({base:'snpcyt'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2710,7 +2917,7 @@ function getText(element) {
   return text;
 }
 
-var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'icyf1h']});
+var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'m9re08']});
 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'}}}});
 
@@ -2741,7 +2948,7 @@ const LabelMenuButton = React.forwardRef(
 );
 LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
 
-var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1h7x3e6']});
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1biy5g3']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -2766,7 +2973,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'},'_13trnyi'],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'},'mpq5u7'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
@@ -2821,10 +3028,11 @@ const [SpotlightProvider, useSpotlightContext] = reactContext.createContext("@op
 
 function Spotlight({
   children,
+  defaultItems,
   defaultOpen = false,
-  inputValue,
+  inputValue: inputValueProp,
   isItemDisabled = () => false,
-  items,
+  items: itemsProp,
   itemToLabel = (value) => value ? String(value) : "",
   itemToSubItems,
   onInputValueChange,
@@ -2837,15 +3045,18 @@ function Spotlight({
     onChange: onOpenChange,
     prop: openProp
   });
-  const onInputValueChangeStable = useEffectEvent(
-    onInputValueChange ?? (() => {
-    })
-  );
+  const [items, inputValue, setInputValue] = useCommandItems({
+    defaultItems,
+    inputValue: inputValueProp,
+    items: itemsProp,
+    itemToLabel,
+    onInputValueChange
+  });
   React.useEffect(() => {
     if (!open) {
-      onInputValueChangeStable("");
+      setInputValue("");
     }
-  }, [open, onInputValueChangeStable]);
+  }, [open, setInputValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
     SpotlightProvider,
     {
@@ -2854,7 +3065,7 @@ function Spotlight({
       items,
       itemToLabel,
       itemToSubItems,
-      onInputValueChange,
+      onInputValueChange: setInputValue,
       onItemSelect,
       open,
       setOpen,
@@ -2895,23 +3106,7 @@ const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children,
             itemToSubItems,
             onInputValueChange,
             onItemSelect,
-            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;
-              }
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { children })
+            children
           }
         )
       ]
@@ -2927,7 +3122,7 @@ const SpotlightEmpty = React.forwardRef(
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'n8m7fs']});
+var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_9pwxhp']});
 
 const SpotlightInput = React.forwardRef(
   ({ addonAfter, className, ...props }, ref) => {
@@ -2984,7 +3179,10 @@ const SpotlightLabel = React.forwardRef(
 );
 SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'hv84y1']});
+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']});
 
 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(
@@ -2998,9 +3196,6 @@ const SpotlightRadioItem = React.forwardRef(({ addonAfter, children, className,
 });
 SpotlightRadioItem.displayName = "@optiaxiom/react/SpotlightRadioItem";
 
-const SpotlightScrollArea = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { gap: "8", ref, ...props }));
-SpotlightScrollArea.displayName = "@optiaxiom/react/SpotlightScrollArea";
-
 const [CommandSubProvider, useCommandSubContext] = reactContext.createContext("@optiaxiom/react/CommandSub");
 
 const CommandSub = React.forwardRef(
@@ -3084,7 +3279,7 @@ const CommandSubItem = React.forwardRef(
 );
 CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_4nd74b',true:'_160dri6'}}});
+var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'hi5w0x',true:'_18pj4kz'}}});
 
 const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3150,8 +3345,8 @@ exports.ComboboxGroup = ComboboxGroup;
 exports.ComboboxInput = ComboboxInput;
 exports.ComboboxItem = ComboboxItem;
 exports.ComboboxLabel = ComboboxLabel;
+exports.ComboboxListbox = ComboboxListbox;
 exports.ComboboxRadioItem = ComboboxRadioItem;
-exports.ComboboxScrollArea = ComboboxScrollArea;
 exports.ComboboxSeparator = ComboboxSeparator;
 exports.ComboboxTrigger = ComboboxTrigger;
 exports.Command = Command;
@@ -3168,6 +3363,11 @@ exports.DatePickerTrigger = DatePickerTrigger;
 exports.DateRangePicker = DateRangePicker;
 exports.DateRangePickerContent = DateRangePickerContent;
 exports.DateRangePickerTrigger = DateRangePickerTrigger;
+exports.DropdownMenuCombobox = DropdownMenuCombobox;
+exports.DropdownMenuComboboxContent = DropdownMenuComboboxContent;
+exports.DropdownMenuComboboxInput = DropdownMenuComboboxInput;
+exports.DropdownMenuComboboxListbox = DropdownMenuComboboxListbox;
+exports.DropdownMenuComboboxTrigger = DropdownMenuComboboxTrigger;
 exports.Highlight = Highlight;
 exports.InlineInput = InlineInput;
 exports.LabelMenuButton = LabelMenuButton;
@@ -3188,8 +3388,8 @@ exports.SpotlightEmpty = SpotlightEmpty;
 exports.SpotlightInput = SpotlightInput;
 exports.SpotlightItem = SpotlightItem;
 exports.SpotlightLabel = SpotlightLabel;
+exports.SpotlightListbox = SpotlightListbox;
 exports.SpotlightRadioItem = SpotlightRadioItem;
-exports.SpotlightScrollArea = SpotlightScrollArea;
 exports.SpotlightSub = SpotlightSub;
 exports.SpotlightSubItem = SpotlightSubItem;
 exports.SpotlightTrigger = SpotlightTrigger;