@optiaxiom/react 1.2.2 → 1.2.4

package/dist/esm/packages/react/src/command/Command.js

@@ -1,27 +1,32 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useCombobox } from 'downshift';
 import { useState } from 'react';
 import { CommandProvider } from '../command-context/CommandContext.js';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
+import { useCommandItems } from '../use-command-items/useCommandItems.js';
+import { useEffectEvent } from '../use-event/useEffectEvent.js';
 
 function Command({
   children,
+  defaultFilter,
+  defaultItems,
   inputValue: inputValueProp,
   isItemDisabled = () => false,
   isItemSelected = () => false,
-  items,
+  items: itemsProp,
   itemToLabel = (value) => value ? String(value) : "",
   itemToSubItems,
   onInputValueChange,
-  onItemSelect,
-  ...props
+  onItemSelect
 }) {
-  const [inputValue, setInputValue] = useControllableState({
-    defaultProp: "",
-    onChange: onInputValueChange,
-    prop: inputValueProp
+  const [items, inputValue, setInputValue] = useCommandItems({
+    defaultFilter,
+    defaultItems,
+    inputValue: inputValueProp,
+    items: itemsProp,
+    itemToLabel,
+    onInputValueChange
   });
   const [lastInteractionSource, setLastInteractionSource] = useState("pointer");
   const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
@@ -29,13 +34,13 @@ function Command({
   );
   const [highlightedSubIndex, setHighlightedSubIndex] = useState(-1);
   const downshift = useCombobox({
-    ...props,
     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: itemToLabel,
+    itemToString: (item) => item !== null ? itemToLabel(item) : "",
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
       if (type !== useCombobox.stateChangeTypes.MenuMouseLeave) {
         setHighlightedIndex(highlightedIndex2);
@@ -61,12 +66,31 @@ function Command({
       }
     },
     onSelectedItemChange({ selectedItem, type }) {
-      if (type !== useCombobox.stateChangeTypes.InputBlur && selectedItem) {
+      if (type !== useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
         onItemSelect?.(selectedItem);
       }
     },
-    selectedItem: null
+    selectedItem: null,
+    stateReducer: (state, actionAndChanges) => {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case useCombobox.stateChangeTypes.InputBlur:
+        case useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox.stateChangeTypes.InputKeyDownEscape:
+        case useCombobox.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            /**
+             * Keep the selected option highlighted rather than resetting to -1
+             */
+            highlightedIndex: state.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    }
   });
+  downshift.getInputProps({}, { suppressRefError: true });
   downshift.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx(
     CommandProvider,
@@ -77,8 +101,10 @@ function Command({
       isItemDisabled,
       isItemSelected,
       items,
+      itemToLabel,
       itemToSubItems,
       lastInteractionSource,
+      placed,
       setHighlightedIndex: (index, source) => {
         setHighlightedIndex(index);
         setLastInteractionSource(source);
@@ -87,7 +113,13 @@ function Command({
         setHighlightedSubIndex(index);
         setLastInteractionSource(source);
       },
-      setInputValue,
+      setInputValue: useEffectEvent((newInputValue) => {
+        if (inputValue === "" && newInputValue === "") {
+          onInputValueChange?.("");
+        } else {
+          setInputValue(newInputValue);
+        }
+      }),
       setPlaced,
       children
     }

package/dist/esm/packages/react/src/command-focusable-item/CommandFocusableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-D7_9AKNW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-D4xMmqXl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_1nhy10x'});
+var item = recipeRuntime({base:'_16kz7a8'});
 
 export { item };

package/dist/esm/packages/react/src/command-input/CommandInput.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { Input } from '../input/Input.js';
@@ -15,6 +15,9 @@ const CommandInput = forwardRef(
       setHighlightedSubIndex,
       setInputValue
     } = useCommandContext("@optiaxiom/react/CommandInput");
+    useEffect(() => {
+      setInputValue("");
+    }, [setInputValue]);
     return /* @__PURE__ */ jsx(
       Input,
       {

package/dist/esm/packages/react/src/command-listbox/CommandListbox.js

@@ -1,18 +1,39 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useEffect, Fragment } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { Listbox } from '../listbox/Listbox.js';
+import { ListboxEmpty } from '../listbox-empty/ListboxEmpty.js';
+import { ListboxVirtualized } from '../listbox-virtualized/ListboxVirtualized.js';
+import { Spinner } from '../spinner/Spinner.js';
 
+const VIRTUALIZE_THRESHOLD = 50;
 const CommandListbox = 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");
     useEffect(() => {
       requestAnimationFrame(() => setPlaced(true));
+      return () => setPlaced(false);
     }, [setPlaced]);
-    return /* @__PURE__ */ jsx(Listbox, { size, ...downshift.getMenuProps({ ref, ...props }), children });
+    return /* @__PURE__ */ jsx(
+      Listbox,
+      {
+        asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD && placed,
+        size,
+        ...downshift.getMenuProps({ ref, ...props }),
+        children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? placed && /* @__PURE__ */ jsx(
+          ListboxVirtualized,
+          {
+            highlightedItem,
+            items,
+            children
+          }
+        ) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsx(Fragment, { children: children(item) }, index)) : /* @__PURE__ */ jsx(ListboxEmpty, { children: empty }) : items.length > 0 ? children : /* @__PURE__ */ jsx(ListboxEmpty, { children: empty })
+      }
+    );
   }
 );
 CommandListbox.displayName = "@optiaxiom/react/CommandListbox";

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-CoWb26S5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-CRUwDdBV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_4s3xpb','_175k9tl'],true:{}},inset:{false:'g7gtyh',true:'_1vj6794'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['neveyw','pnaphe'],true:{}},inset:{false:'em3jtz',true:'_11b8qn4'}}});
 
 export { cover };

package/dist/esm/packages/react/src/data-table-body/DataTableBody-css.js

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DRGy8dlH.css';
-import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-ogeUaF7i.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BkEfRwCR.css';
+import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-DISWfewt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_12ib04t'],variants:{pinned:{left:'t20pyh',right:'_1yhb7j4'},pinnedType:{body:'_1c4swwj',header:{}}}});
-var cellOffsetVar = 'var(--_1jvcf3z)';
-var cellSizeVar = 'var(--_1bno8cr)';
-var header = recipeRuntime({base:[{display:'grid'},'_1pq57']});
-var leftTotalSizeVar = 'var(--lw3pe5)';
-var rightTotalSizeVar = 'var(--_121cy26)';
-var table = recipeRuntime({base:'n1ot2h',variants:{pinned:{both:'oe166q',left:'_1gyihhk',none:{},right:'_1cxpvzd'}}});
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'ehfmn1'],variants:{pinned:{left:'klcl4i',right:'_12veu82'},pinnedType:{body:'h6s9cb',header:{}}}});
+var cellOffsetVar = 'var(--_198fpji)';
+var cellSizeVar = 'var(--_1mak6g7)';
+var header = recipeRuntime({base:[{display:'grid'},'_5keshg']});
+var leftTotalSizeVar = 'var(--m98zrv)';
+var rightTotalSizeVar = 'var(--_1bcbhs)';
+var table = recipeRuntime({base:'_1izkl7k',variants:{pinned:{both:'_1l6lltr',left:'uvkmrq',none:{},right:'_1mae9fy'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

package/dist/esm/packages/react/src/data-table-footer/DataTableFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-CaEy5Zae.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-CfY6nJ1D.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_4m4009',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'_1w36xqn',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };

package/dist/esm/packages/react/src/data-table-footer/DataTableFooter.js

@@ -10,7 +10,6 @@ import { Flex } from '../flex/Flex.js';
 import { Pagination } from '../pagination/Pagination.js';
 import { Select } from '../select/Select.js';
 import { SelectContent } from '../select-content/SelectContent.js';
-import { SelectRadioItem } from '../select-radio-item/SelectRadioItem.js';
 import { SelectTrigger } from '../select-trigger/SelectTrigger.js';
 import { Text } from '../text/Text.js';
 import { addon } from './DataTableFooter-css.js';
@@ -48,7 +47,7 @@ const DataTableFooter = forwardRef(
                       "aria-labelledby": pageSizeId
                     }
                   ),
-                  /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((rows) => /* @__PURE__ */ jsx(SelectRadioItem, { item: rows, children: rows }, rows)) })
+                  /* @__PURE__ */ jsx(SelectContent, {})
                 ]
               }
             )

package/dist/esm/packages/react/src/data-table-header-cell/DataTableHeaderCell-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-TKWASNQv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-B_E7VYRO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'c28i6p']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1y50cp1'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_17z2oph'],variants:{active:{false:'_1lzap2u',true:'_13ph702'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1f5zbin']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_7cydv6'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1vgwnar'],variants:{active:{false:'_1uhy988',true:'_1ifq8rf'}}});
 
 export { button, handle, icon };

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BxTd8Evg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-CYsxkyti.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({base:'_1u5gimw'});
+var picker = recipeRuntime({base:'_16rfcz1'});
 
 export { picker };

package/dist/esm/packages/react/src/date-input/DateInput.js

@@ -12,9 +12,9 @@ import { Popover } from '../popover/Popover.js';
 import { PopoverAnchor } from '../popover-anchor/PopoverAnchor.js';
 import { PopoverContent } from '../popover-content/PopoverContent.js';
 import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+import { useObserveValue } from '../use-observe-value/useObserveValue.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
-import { forceValueChange } from '../utils/forceValueChange.js';
 import { toPlainDate } from '../utils/toPlainDate.js';
 import { toPlainDateTime } from '../utils/toPlainDateTime.js';
 import { picker } from './DateInput-css.js';
@@ -35,13 +35,14 @@ const DateInput = forwardRef(
     const [open, setOpen] = useState(false);
     const hasInteractedOutsideRef = useRef(false);
     const pickerRef = useRef(null);
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
     const [value, setValue] = useControllableState({
       defaultProp: props.defaultValue,
       prop: props.value
     });
+    const forceValueChange = useObserveValue(innerRef, setValue);
     const instant = typeof value === "string" ? toInstant(value.includes("T") ? value : value + "T00:00") : void 0;
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
     const maxDate = max ? new Date(max) : void 0;
     const minDate = min ? new Date(min) : void 0;
     return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
@@ -110,12 +111,9 @@ const DateInput = forwardRef(
                   if (!date) {
                     return;
                   }
-                  if (innerRef.current) {
-                    forceValueChange(
-                      innerRef?.current,
-                      type === "datetime-local" ? toPlainDateTime(date) : toPlainDate(date)
-                    );
-                  }
+                  forceValueChange(
+                    type === "datetime-local" ? toPlainDateTime(date) : toPlainDate(date)
+                  );
                   if (type === "date") {
                     setOpen(false);
                   }
@@ -131,9 +129,7 @@ const DateInput = forwardRef(
                 Button,
                 {
                   onClick: () => {
-                    if (innerRef.current) {
-                      forceValueChange(innerRef.current, "");
-                    }
+                    forceValueChange("");
                     if (type === "date") {
                       setOpen(false);
                     }

package/dist/esm/packages/react/src/date-picker-content/DatePickerContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-B3yzDcb4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-DMMAWY-O.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1yytgl9']});
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_14p0ut5']});
 
 export { panels };

package/dist/esm/packages/react/src/date-range-picker-content/DateRangePickerContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-BDF5IAA1.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-DQhMmfC6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_11yukxw']});
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_15j5u97']});
 
 export { panels };

package/dist/esm/packages/react/src/date-range-picker-content/DateRangePickerContent.js

@@ -2,10 +2,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import { Calendar } from '../calendar/Calendar.js';
+import { toInstant } from '../date-input/utils.js';
 import { useDateRangePickerContext } from '../date-range-picker-context/DateRangePickerContext.js';
 import { Flex } from '../flex/Flex.js';
 import { PopoverContent } from '../popover-content/PopoverContent.js';
 import { usePopoverContext } from '../popover-context/PopoverContext.js';
+import '../utils/conditions.js';
+import '@radix-ui/react-slot';
+import { toPlainDate } from '../utils/toPlainDate.js';
 import { panels } from './DateRangePickerContent-css.js';
 
 const DateRangePickerContent = forwardRef(
@@ -46,9 +50,15 @@ const DateRangePickerContent = 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);
               }
             },

package/dist/esm/packages/react/src/dialog-body/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-BvJEXakr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-CJs_lY5H.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'gq094j']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'_1jg4372']});
 
 export { body };

package/dist/esm/packages/react/src/dialog-content/DialogContent-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-BiRejqcJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CGJ8qwAd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1741alv'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1wczuec'],variants:{size:{sm:'_1ghiwgx',md:'_7qscrb',lg:'c4fcyr',fullscreen:'mrl7os'}}});
-var nestedDialogCountVar = 'var(--_1sjgmx3)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1okmu71'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_6weu1b'],variants:{size:{sm:'ki5z7i',md:'_1j639kn',lg:'y2rqof',fullscreen:'ki53qj'}}});
+var nestedDialogCountVar = 'var(--_1kmzv7p)';
 
 export { backdrop, content, nestedDialogCountVar };

package/dist/esm/packages/react/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'}]});

package/dist/esm/packages/react/src/dialog-header/DialogHeader-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-D4DDDEAk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-CZLt9SHt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_8b1d8q']});
-var close = recipeRuntime({base:['v8uusv']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'e34w8f']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1ftkez']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'k0k1jn']});
+var close = recipeRuntime({base:['_1xa8vyj']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'ar19oj']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'kdgycb']});
 
 export { actions, close, description, title };

package/dist/esm/packages/react/src/disclosure-content/DisclosureContent-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-Cjlr0PjN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-Bu9dcIq8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['mlv66i']});
-var outer = recipeRuntime({base:[{display:'grid'},'_8l039q']});
+var inner = recipeRuntime({base:['_1x9tswj']});
+var outer = recipeRuntime({base:[{display:'grid'},'_1xnafe0']});
 
 export { inner, outer };

package/dist/esm/packages/react/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-BXf0mRKE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DcLmb6BM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'a6rmd5',start:'sva3l5'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_17lavgd']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'b7yi1c']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_19jgpib',start:'_1luxqt8'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1e8x3rw']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1tu00pl']});
 
 export { icon, root, trigger };

package/dist/esm/packages/react/src/downshift/usePortalPatch.js

@@ -1,11 +1,16 @@
 "use client";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 function usePortalPatch(initialHighlightedIndex = -1) {
   const [placed, setPlaced] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState(
     initialHighlightedIndex
   );
+  useEffect(() => {
+    if (!placed) {
+      setHighlightedIndex(initialHighlightedIndex);
+    }
+  }, [initialHighlightedIndex, placed]);
   return [
     /**
      * Downshift attempts to scroll to the currently selected item when the menu

package/dist/esm/packages/react/src/dropdown-menu/DropdownMenu.js

@@ -4,6 +4,7 @@ import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useState } from 'react';
 import { DropdownMenuProvider } from '../dropdown-menu-context/DropdownMenuContext.js';
+import { DropdownMenuNestedProvider } from '../dropdown-menu-nested-context/DropdownMenuNestedContext.js';
 
 function DropdownMenu({
   children,
@@ -23,8 +24,9 @@ function DropdownMenu({
     {
       open,
       presence,
+      setOpen,
       setPresence,
-      children
+      children: /* @__PURE__ */ jsx(DropdownMenuNestedProvider, { open, children })
     }
   ) });
 }

package/dist/esm/packages/react/src/dropdown-menu-autocomplete-item/DropdownMenuAutocompleteItem.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CommandItem } from '../command-item/CommandItem.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
+
+const DropdownMenuAutocompleteItem = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxItem, { children }) });
+});
+DropdownMenuAutocompleteItem.displayName = "@optiaxiom/react/DropdownMenuAutocompleteItem";
+
+export { DropdownMenuAutocompleteItem };

package/dist/esm/packages/react/src/dropdown-menu-combobox/DropdownMenuCombobox.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useRef } from 'react';
+import { Command } from '../command/Command.js';
+import { DropdownMenuComboboxProvider } from '../dropdown-menu-combobox-context/DropdownMenuComboboxContext.js';
+import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
+import { DropdownMenuSub } from '../dropdown-menu-sub/DropdownMenuSub.js';
+
+function DropdownMenuCombobox({
+  children,
+  defaultOpen,
+  onItemSelect,
+  onOpenChange,
+  open: openProp,
+  ...props
+}) {
+  const { setOpen: setOpenRoot } = useDropdownMenuContext(
+    "@optiaxiom/react/DropdownMenuCombobox"
+  );
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsx(DropdownMenuSub, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(DropdownMenuComboboxProvider, { inputRef, children: /* @__PURE__ */ jsx(
+    Command,
+    {
+      onItemSelect: (item) => {
+        onItemSelect?.(item);
+        setOpenRoot(false);
+      },
+      ...props,
+      children
+    }
+  ) }) });
+}
+DropdownMenuCombobox.displayName = "@optiaxiom/react/DropdownMenuCombobox";
+
+export { DropdownMenuCombobox };