@optiaxiom/react 1.2.1 → 1.2.3

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-Cuv-7Lkf.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DWK3EWXm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-ChqK3bZl.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'},'kxstwj']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_7w5lj2'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_87vrdf'],variants:{active:{false:'_10urqql',true:'_1m3ppah'}}});
+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'}}});
 
 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-Cuv-7Lkf.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-HcEsrZW7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-D0aQyzfO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({base:'_1dlkamr'});
+var picker = recipeRuntime({base:'_1mrrcup'});
 
 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-Cuv-7Lkf.css';
-import './../../../../assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-C7lyIL0R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-CBsIECJh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_7xrhpp']});
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_12x1rti']});
 
 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-Cuv-7Lkf.css';
-import './../../../../assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-C9OGCIAj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-BhgiFflg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1ybeyy4']});
+var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_15d7487']});
 
 export { panels };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
-import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-BSQN8LTY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-D6D3bnQA.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'},'_1rfspwh']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'flex-start',overflow:'auto',px:'24',py:'16'},'_3x8bzs']});
 
 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-Cuv-7Lkf.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CTgSdGWh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DT0-J7KE.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1xvxho1'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_14d1x7h'],variants:{size:{sm:'_136vpzk',md:'yo9pei',lg:'_1eae49a',fullscreen:'_1hgyo1b'}}});
-var nestedDialogCountVar = 'var(--wt53h9)';
+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)';
 
 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-Cuv-7Lkf.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.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-Cuv-7Lkf.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-DRP3cH3J.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-coreIxoF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'wrl6hq']});
-var close = recipeRuntime({base:['_86h01c']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontSize:'md',fontWeight:'400',w:'full'},'cnav8o']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'yaf6h6']});
+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']});
 
 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-Cuv-7Lkf.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-B9Svg74i.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-D_-IRbUg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_1wtqlgy']});
-var outer = recipeRuntime({base:[{display:'grid'},'hy5urr']});
+var inner = recipeRuntime({base:['_33u7hr']});
+var outer = recipeRuntime({base:[{display:'grid'},'_1rv7lth']});
 
 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-Cuv-7Lkf.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-B4tAEbXy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CiVTeyMz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1nu88mu',start:'_164ms1c'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_1k14np']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1r0ubs2']});
+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']});
 
 export { icon, root, trigger };

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,58 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useEffect, useRef } from 'react';
+import { DropdownMenuComboboxProvider } from '../dropdown-menu-combobox-context/DropdownMenuComboboxContext.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
+}) {
+  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,
+    {
+      inputRef,
+      inputValue,
+      isItemDisabled,
+      isItemSelected,
+      items,
+      itemToLabel,
+      onInputValueChange: setInputValue,
+      onItemSelect,
+      children
+    }
+  ) });
+}
+DropdownMenuCombobox.displayName = "@optiaxiom/react/DropdownMenuCombobox";
+
+export { DropdownMenuCombobox };

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

@@ -0,0 +1,73 @@
+"use client";
+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';
+
+const DropdownMenuComboboxContent = forwardRef(({ children, onMouseMove, ...props }, outerRef) => {
+  const { setOpen } = useDropdownMenuContext(
+    "@optiaxiom/react/DropdownMenuComboboxContent"
+  );
+  const {
+    inputRef,
+    inputValue,
+    isItemDisabled,
+    isItemSelected,
+    items,
+    itemToLabel,
+    onInputValueChange,
+    onItemSelect
+  } = useDropdownMenuComboboxContext(
+    "@optiaxiom/react/DropdownMenuComboboxContent"
+  );
+  const innerRef = useRef(null);
+  const ref = useComposedRefs(innerRef, outerRef);
+  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__ */ jsx(
+    Command,
+    {
+      inputValue,
+      isItemDisabled,
+      isItemSelected,
+      items,
+      itemToLabel,
+      onInputValueChange,
+      onItemSelect: (item) => {
+        onItemSelect?.(item);
+        setOpen(false);
+      },
+      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, {})
+          ] })
+        }
+      )
+    }
+  );
+});
+DropdownMenuComboboxContent.displayName = "@optiaxiom/react/DropdownMenuComboboxContent";
+
+export { DropdownMenuComboboxContent };

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

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [DropdownMenuComboboxProvider, useDropdownMenuComboboxContext] = createContext("@optiaxiom/react/DropdownMenuCombobox");
+
+export { DropdownMenuComboboxProvider, useDropdownMenuComboboxContext };

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandInput } from '../command-input/CommandInput.js';
+import { useDropdownMenuComboboxContext } from '../dropdown-menu-combobox-context/DropdownMenuComboboxContext.js';
+
+const DropdownMenuComboboxInput = forwardRef((props, outerRef) => {
+  const { downshift, highlightedItem } = useCommandContext(
+    "@optiaxiom/react/DropdownMenuComboboxInput"
+  );
+  const { inputRef } = useDropdownMenuComboboxContext(
+    "@optiaxiom/react/DropdownMenuComboboxInput"
+  );
+  const ref = useComposedRefs(inputRef, outerRef);
+  return /* @__PURE__ */ 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";
+
+export { DropdownMenuComboboxInput };

package/dist/esm/packages/react/src/{combobox-scroll-area/ComboboxScrollArea.js → dropdown-menu-combobox-listbox/DropdownMenuComboboxListbox.js}

@@ -4,18 +4,18 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { ComboboxRadioItem } from '../combobox-radio-item/ComboboxRadioItem.js';
 import { useCommandContext } from '../command-context/CommandContext.js';
-import { ListboxScrollArea } from '../listbox-scroll-area/ListboxScrollArea.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 ComboboxScrollArea = forwardRef(({ children, items: itemsProp, loading, ...props }, ref) => {
-  const { highlightedItem, items } = useCommandContext(
-    "@optiaxiom/react/ComboboxScrollArea"
+const DropdownMenuComboboxListbox = forwardRef(({ children, items: itemsProp, loading, ...props }, ref) => {
+  const { highlightedItem, items, itemToLabel } = useCommandContext(
+    "@optiaxiom/react/DropdownMenuComboboxListbox"
   );
   return /* @__PURE__ */ jsx(
-    ListboxScrollArea,
+    CommandListbox,
     {
       asChild: !loading && typeof children === "function",
       ref,
@@ -27,10 +27,10 @@ const ComboboxScrollArea = forwardRef(({ children, items: itemsProp, loading, ..
           items: itemsProp ?? items,
           children
         }
-      ) : children : items.map((item) => /* @__PURE__ */ jsx(ComboboxRadioItem, { item, children: item }, item))
+      ) : children : items.map((item) => /* @__PURE__ */ jsx(DropdownMenuAutocompleteItem, { item, children: itemToLabel(item) }, item))
     }
   );
 });
-ComboboxScrollArea.displayName = "@optiaxiom/react/ComboboxScrollArea";
+DropdownMenuComboboxListbox.displayName = "@optiaxiom/react/DropdownMenuComboboxListbox";
 
-export { ComboboxScrollArea };
+export { DropdownMenuComboboxListbox };

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DropdownMenuSubTrigger } from '../dropdown-menu-sub-trigger/DropdownMenuSubTrigger.js';
+
+const DropdownMenuComboboxTrigger = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { "aria-haspopup": "dialog", ref, ...props });
+});
+DropdownMenuComboboxTrigger.displayName = "@optiaxiom/react/DropdownMenuComboboxTrigger";
+
+export { DropdownMenuComboboxTrigger };

package/dist/esm/packages/react/src/dropdown-menu-nested-context/DropdownMenuNestedContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [DropdownMenuNestedProvider, useDropdownMenuNestedContext] = createContext("@optiaxiom/react/DropdownMenuNested");
+
+export { DropdownMenuNestedProvider, useDropdownMenuNestedContext };

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

@@ -2,6 +2,8 @@
 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 { useDropdownMenuNestedContext, DropdownMenuNestedProvider } from '../dropdown-menu-nested-context/DropdownMenuNestedContext.js';
 import { DropdownMenuSubProvider } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
 
 function DropdownMenuSub({
@@ -16,7 +18,15 @@ function DropdownMenuSub({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixMenu.Sub, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DropdownMenuSubProvider, { open, children }) });
+  const { open: parentOpen } = useDropdownMenuNestedContext(
+    "@optiaxiom/react/DropdownMenuSub"
+  );
+  useEffect(() => {
+    if (!parentOpen) {
+      setOpen(false);
+    }
+  }, [parentOpen, setOpen]);
+  return /* @__PURE__ */ jsx(RadixMenu.Sub, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DropdownMenuSubProvider, { open, children: /* @__PURE__ */ jsx(DropdownMenuNestedProvider, { open, children }) }) });
 }
 DropdownMenuSub.displayName = "@optiaxiom/react/DropdownMenuSub";
 

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

@@ -6,11 +6,20 @@ import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/Dropdown
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
-const DropdownMenuSubContent = forwardRef(({ children, ...props }, ref) => {
+const DropdownMenuSubContent = forwardRef(({ asChild, children, ...props }, ref) => {
   const { open } = useDropdownMenuSubContext(
     "@optiaxiom/react/DropdownMenuSubContent"
   );
-  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubContent, { alignOffset: -4, ref, sideOffset: 0, children }) }) }) });
+  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(
+    RadixMenu.SubContent,
+    {
+      alignOffset: -4,
+      asChild,
+      ref,
+      sideOffset: 0,
+      children
+    }
+  ) }) }) });
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 

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

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

package/dist/esm/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-B2EgtfBW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-CW_8j1pA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_18wkm58',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'eg0041']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'z32wa3']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1f7085y'],variants:{offset:{false:'_1e4sqd9',true:{}},position:{'bottom-right':'_1m9dt8t','top-right':'_1qmhhba'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1yx1wy2']});
+var badge = recipeRuntime({base:'_3j0gwr',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'fj48g7']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1di58km']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'f6vzqj'],variants:{offset:{false:'_14c1uxl',true:{}},position:{'bottom-right':'f4kg8h','top-right':'_1ldzw28'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_48qnyw']});
 
 export { badge, floating, indicator };

package/dist/esm/packages/react/src/inline-input/InlineInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-CyYfftZo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-O7l92lAs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'von1fn',variants:{empty:{false:{},true:'_115fwr0'}}});
-var input = recipeRuntime({base:'t0bzca'});
+var editor = recipeRuntime({base:'zujuet',variants:{empty:{false:{},true:'irh2h9'}}});
+var input = recipeRuntime({base:'snpcyt'});
 
 export { editor, input };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

package/dist/esm/packages/react/src/input-control/InputControl-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DM0xAozN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-BNGYKXQt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_6eu43k',{bg:'transparent',flex:'auto',w:'full'},'_1w1jsir','_1szefvo'],variants:{size:{md:{},lg:{},xl:['_17axnz6']}}});
+var control = recipeRuntime({base:['_12g6pku',{bg:'transparent',flex:'auto',w:'full'},'m20oq9','_19zfrfn'],variants:{size:{md:{},lg:{},xl:['_1k53om5']}}});
 
 export { control };

package/dist/esm/packages/react/src/input-root/InputRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DgtPdTAh.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DM0xAozN.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-_XAOP0ff.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BSjn-Kas.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-BNGYKXQt.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-Dd_H_S8U.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_15n4smu']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'pmpe7r']});
 
 export { root };

package/dist/esm/packages/react/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cuv-7Lkf.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-NCS9tFFq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-BrGLD7BH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'cz7lyg'],variants:{variant:{outline:{border:'1',borderB:'2',borderColor:'border.tertiary',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = recipeRuntime({base:'_1lh19o',variants:{variant:{outline:'_4aggfs',subtle:{}}}});
+var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_1vbyan'],variants:{variant:{outline:{border:'1',borderB:'2',borderColor:'border.tertiary',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
+var keys = recipeRuntime({base:'bq59ec',variants:{variant:{outline:'_1yexzm',subtle:{}}}});
 
 export { kbd, keys };