@optiaxiom/react 1.2.3 → 1.2.5

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-84xHc68j.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BfzbPCLF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_1osx9pv'});
+var item = recipeRuntime({base:'_14286wt'});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-DWtXRO2M.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-MaOs4its.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_1c55xmn','_18xlm1w'],true:{}},inset:{false:'gelf32',true:'dgowto'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['_1jplud9','_1riho7v'],true:{}},inset:{false:'_8w7al6',true:'f4v3d3'}}});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BshAA-yT.css';
-import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-CTJSjhcu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-Dzxs57Ca.css';
+import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-MsX92Doe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = 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 = recipeRuntime({base:[{display:'grid'},'_1ole8v5']});
-var leftTotalSizeVar = 'var(--_1abw5yr)';
-var rightTotalSizeVar = 'var(--_1pr764b)';
-var table = recipeRuntime({base:'_1j82aiq',variants:{pinned:{both:'_176wa32',left:'_1p99ji0',none:{},right:'qa8jx0'}}});
+var cell = 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 = recipeRuntime({base:[{display:'grid'},'_1dvu9uq']});
+var leftTotalSizeVar = 'var(--_12zd1fa)';
+var rightTotalSizeVar = 'var(--dm8p5p)';
+var table = recipeRuntime({base:'cl3n7r',variants:{pinned:{both:'_1v0nhcu',left:'_1xvq3du',none:{},right:'tjzwgn'}}});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-OoBOGXUY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-BSLfrkW1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_9g1b73',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'w0mlxs',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-BeSAdLYi.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-ChqK3bZl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CrqZmJXD.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'},'_1jc4rnh']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_13z2emg'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1wk9652'],variants:{active:{false:'d9ovjy',true:'_718fjn'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1kzywp6']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'xuzae'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_12oj5j7'],variants:{active:{false:'_1usa78f',true:'_1ytyt7y'}}});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-D0aQyzfO.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-BR8vi6FR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({base:'_1mrrcup'});
+var picker = recipeRuntime({base:'_3xxe0i'});
 
 export { picker };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
-import './../../../../assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-CBsIECJh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-DhKbHjAB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_12x1rti']});
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1jbn8se']});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-BhgiFflg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-CaPBBNgA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_15d7487']});
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_142opfz']});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-D6D3bnQA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-D34fEDom.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'},'_3x8bzs']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'d6l8a9']});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DT0-J7KE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CTrZhzGF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'p2y2xq'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'jrv83z'],variants:{size:{sm:'kvbnv0',md:'_1go2t9u',lg:'_16eo0h6',fullscreen:'ex9bad'}}});
-var nestedDialogCountVar = 'var(--bkwkd6)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_7tvtcj'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'d5vaz0'],variants:{size:{sm:'_1uh8dtp',md:'_19kjcix',lg:'og5uzz',fullscreen:'_1f8wops'}}});
+var nestedDialogCountVar = 'var(--_1a0o3hz)';
 
 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-BeSAdLYi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.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-BeSAdLYi.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-coreIxoF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-0DbxmJJE.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'bmyehn']});
-var close = recipeRuntime({base:['wtujen']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1xkuj4w']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1oi83ko']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_15bxf2h']});
+var close = recipeRuntime({base:['ju8xby']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'_1yaxyi']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_11rggyu']});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-D_-IRbUg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-Cf8_KbPG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_33u7hr']});
-var outer = recipeRuntime({base:[{display:'grid'},'_1rv7lth']});
+var inner = recipeRuntime({base:['nr844y']});
+var outer = recipeRuntime({base:[{display:'grid'},'jumvhf']});
 
 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-BeSAdLYi.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CiVTeyMz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-Defa1rUD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_12ysgbq',start:'ym6136'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1eaq44r']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'t0jm61']});
+var icon = recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_1wnbfmu',start:'_137e53w'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'n8i9x9']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_18t7hg6']});
 
 export { icon, root, trigger };

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

@@ -26,7 +26,7 @@ const DisclosureTrigger = forwardRef(
       addonBefore,
       /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger(), children: /* @__PURE__ */ jsx(Cover, { asChild: true, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { children: [
         chevronPosition === "start" && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsx(IconAngleRight, {}) }),
-        /* @__PURE__ */ jsx(Box, { flex: "1", children }),
+        /* @__PURE__ */ jsx(Box, { flex: "1", overflow: "hidden", children }),
         chevronPosition === "end" && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsx(IconAngleLeft, {}) })
       ] }) }) }),
       addonAfter

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-combobox/DropdownMenuCombobox.js

@@ -1,57 +1,40 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useEffect, useRef } from 'react';
+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';
-import { useCommandItems } from '../use-command-items/useCommandItems.js';
 
 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 } = useDropdownMenuContext(
+    "@optiaxiom/react/DropdownMenuCombobox"
+  );
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  const [items, inputValue, setInputValue] = useCommandItems({
-    defaultItems,
-    inputValue: inputValueProp,
-    items: itemsProp,
-    itemToLabel,
-    onInputValueChange
-  });
-  useEffect(() => {
-    if (open) {
-      setInputValue("");
-    }
-  }, [open, setInputValue]);
   const inputRef = useRef(null);
-  return /* @__PURE__ */ jsx(DropdownMenuSub, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
-    DropdownMenuComboboxProvider,
+  return /* @__PURE__ */ jsx(DropdownMenuSub, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(DropdownMenuComboboxProvider, { inputRef, children: /* @__PURE__ */ jsx(
+    Command,
     {
-      inputRef,
-      inputValue,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToLabel,
-      onInputValueChange: setInputValue,
-      onItemSelect,
+      onItemSelect: (item) => {
+        onItemSelect?.(item);
+        setOpenRoot(false);
+      },
+      ...props,
       children
     }
-  ) });
+  ) }) });
 }
 DropdownMenuCombobox.displayName = "@optiaxiom/react/DropdownMenuCombobox";
 

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

@@ -2,69 +2,44 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef, useRef, useEffect } from 'react';
-import { Command } from '../command/Command.js';
 import { useDropdownMenuComboboxContext } from '../dropdown-menu-combobox-context/DropdownMenuComboboxContext.js';
 import { DropdownMenuComboboxInput } from '../dropdown-menu-combobox-input/DropdownMenuComboboxInput.js';
 import { DropdownMenuComboboxListbox } from '../dropdown-menu-combobox-listbox/DropdownMenuComboboxListbox.js';
-import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
 import { DropdownMenuSubContent } from '../dropdown-menu-sub-content/DropdownMenuSubContent.js';
+import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
 
 const DropdownMenuComboboxContent = forwardRef(({ children, onMouseMove, ...props }, outerRef) => {
-  const { setOpen } = useDropdownMenuContext(
+  const { presence } = useDropdownMenuSubContext(
     "@optiaxiom/react/DropdownMenuComboboxContent"
   );
-  const {
-    inputRef,
-    inputValue,
-    isItemDisabled,
-    isItemSelected,
-    items,
-    itemToLabel,
-    onInputValueChange,
-    onItemSelect
-  } = useDropdownMenuComboboxContext(
+  const { inputRef } = useDropdownMenuComboboxContext(
     "@optiaxiom/react/DropdownMenuComboboxContent"
   );
   const innerRef = useRef(null);
   const ref = useComposedRefs(innerRef, outerRef);
   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__ */ jsx(
-    Command,
+    DropdownMenuSubContent,
     {
-      inputValue,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToLabel,
-      onInputValueChange,
-      onItemSelect: (item) => {
-        onItemSelect?.(item);
-        setOpen(false);
+      onMouseMove: (event) => {
+        onMouseMove?.(event);
+        inputRef.current?.focus();
       },
-      children: /* @__PURE__ */ jsx(
-        DropdownMenuSubContent,
-        {
-          onMouseMove: (event) => {
-            onMouseMove?.(event);
-            inputRef.current?.focus();
-          },
-          ref,
-          role: "dialog",
-          ...props,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuComboboxInput, { placeholder: "Search..." }),
-            /* @__PURE__ */ jsx(DropdownMenuComboboxListbox, {})
-          ] })
-        }
-      )
+      ref,
+      role: "dialog",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuComboboxInput, { placeholder: "Search..." }),
+        /* @__PURE__ */ jsx(DropdownMenuComboboxListbox, {})
+      ] })
     }
   );
 });

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

@@ -1,35 +1,15 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { CommandListbox } from '../command-listbox/CommandListbox.js';
 import { DropdownMenuAutocompleteItem } from '../dropdown-menu-autocomplete-item/DropdownMenuAutocompleteItem.js';
-import { ListboxVirtualized } from '../listbox-virtualized/ListboxVirtualized.js';
-import { Spinner } from '../spinner/Spinner.js';
 
-const DropdownMenuComboboxListbox = forwardRef(({ children, items: itemsProp, loading, ...props }, ref) => {
-  const { highlightedItem, items, itemToLabel } = useCommandContext(
+const DropdownMenuComboboxListbox = forwardRef(({ children, ...props }, ref) => {
+  const { itemToLabel } = useCommandContext(
     "@optiaxiom/react/DropdownMenuComboboxListbox"
   );
-  return /* @__PURE__ */ jsx(
-    CommandListbox,
-    {
-      asChild: !loading && typeof children === "function",
-      ref,
-      ...props,
-      children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children ? typeof children === "function" ? /* @__PURE__ */ jsx(
-        ListboxVirtualized,
-        {
-          highlightedItem,
-          items: itemsProp ?? items,
-          children
-        }
-      ) : children : items.map((item) => /* @__PURE__ */ jsx(DropdownMenuAutocompleteItem, { item, children: itemToLabel(item) }, item))
-    }
-  );
+  return /* @__PURE__ */ jsx(CommandListbox, { ref, ...props, children: children ?? ((item) => /* @__PURE__ */ jsx(DropdownMenuAutocompleteItem, { item, children: itemToLabel(item) }, item)) });
 });
 DropdownMenuComboboxListbox.displayName = "@optiaxiom/react/DropdownMenuComboboxListbox";
 

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

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDropdownMenuNestedContext, DropdownMenuNestedProvider } from '../dropdown-menu-nested-context/DropdownMenuNestedContext.js';
 import { DropdownMenuSubProvider } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
 
@@ -26,7 +26,16 @@ function DropdownMenuSub({
       setOpen(false);
     }
   }, [parentOpen, setOpen]);
-  return /* @__PURE__ */ jsx(RadixMenu.Sub, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DropdownMenuSubProvider, { open, children: /* @__PURE__ */ jsx(DropdownMenuNestedProvider, { open, children }) }) });
+  const [presence, setPresence] = useState();
+  return /* @__PURE__ */ jsx(RadixMenu.Sub, { onOpenChange: setOpen, open: open || presence, ...props, children: /* @__PURE__ */ jsx(
+    DropdownMenuSubProvider,
+    {
+      open,
+      presence,
+      setPresence,
+      children: /* @__PURE__ */ jsx(DropdownMenuNestedProvider, { open: open || presence, children })
+    }
+  ) });
 }
 DropdownMenuSub.displayName = "@optiaxiom/react/DropdownMenuSub";
 

package/dist/esm/packages/react/src/dropdown-menu-sub-content/DropdownMenuSubContent.js

@@ -7,10 +7,10 @@ import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
 const DropdownMenuSubContent = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { open } = useDropdownMenuSubContext(
+  const { open, setPresence } = useDropdownMenuSubContext(
     "@optiaxiom/react/DropdownMenuSubContent"
   );
-  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, minW: "trigger", provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, minW: "trigger", provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(
     RadixMenu.SubContent,
     {
       alignOffset: -4,

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-D_VuiMn0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-Xw-ns80B.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1u22gyd'});
+var mark = recipeRuntime({base:'i6obck'});
 
 export { mark };