@optiaxiom/react 1.2.2 → 1.2.3

package/dist/esm/packages/react/src/label-menu-button/LabelMenuButton-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DzsQUyBc.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-Bk0AU707.css';
-import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-Dzy6lxC7.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/button-base/ButtonBase.css.ts.vanilla-myHxMctj.css';
+import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-5X080pPs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'_1kfg8qy']});
+var button = recipeRuntime({base:[{justifyContent:'space-between'},'m9re08']});
 var content = recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 

package/dist/esm/packages/react/src/layers/layers-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._115nzx7';
-var reset = 'optiaxiom._11twa79';
+var components = 'optiaxiom._78rlm9';
+var reset = 'optiaxiom.iiehqz';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

package/dist/esm/packages/react/src/layout/Layouts-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/layout/Layouts.css.ts.vanilla-Bpvkmm6o.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/layout/Layouts.css.ts.vanilla-2_2fjsst.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'wzqxdr']});
+var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1biy5g3']});
 
 export { layout };

package/dist/esm/packages/react/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-Da2vEMfC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-TKnv0NLW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_16tr4tl']});
-var link = recipeRuntime({base:['yns6zc','_4ac0s8'],variants:{appearance:{'default':'w8yeev',inverse:'sdh54q',subtle:'w5dqub'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_12ngo0c']});
+var link = recipeRuntime({base:['_9ruatd','efcfqr'],variants:{appearance:{'default':'mn8ovf',inverse:'zynvll',subtle:'_1quia90'}}});
 
 export { icon, link };

package/dist/esm/packages/react/src/listbox/Listbox.js

@@ -11,6 +11,7 @@ const Listbox = forwardRef(
       Box,
       {
         display: "flex",
+        flex: "1",
         flexDirection: "column",
         gap: "2",
         overflow: "auto",

package/dist/esm/packages/react/src/listbox-item/ListboxItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-DQv6Rr64.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-0HPKoojU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'_1ufm5v5']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'i0m4s7'],variants:{intent:{danger:'ux6ppg',neutral:'_1ojc505'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_6i48yy']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_18r4oz3']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'hqwj4v'],variants:{intent:{danger:'_15z0jzo',neutral:'_189z6vn'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'dwbafh']});
 
 export { description, item, title };

package/dist/esm/packages/react/src/listbox-virtualized/ListboxVirtualized.js

@@ -6,7 +6,7 @@ import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { ListboxScrollArea } from '../listbox-scroll-area/ListboxScrollArea.js';
+import { Listbox } from '../listbox/Listbox.js';
 
 const ListboxVirtualized = forwardRef(({ children, highlightedItem, items, ...props }, outerRef) => {
   const innerRef = useRef(null);
@@ -53,7 +53,7 @@ const ListboxVirtualized = forwardRef(({ children, highlightedItem, items, ...pr
     observer.observe(innerRef.current);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx(ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Listbox, { ref, ...props, children: /* @__PURE__ */ jsx(
     Box,
     {
       flex: "none",

package/dist/esm/packages/react/src/menu-listbox/MenuListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-CMRF3Al4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-iUHuX3BC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_22e3rt'],variants:{maxH:{xs:'_1i7q4i1',sm:'_117pinn',md:'_3figr4',lg:'_2f1efu',full:{}},minW:{'0':{},trigger:'_9ia5nj'},provider:{'dropdown-menu':'_4q6ldc',popover:'r0qjkb',popper:'_1kjxbyu'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_4tbatu'],variants:{maxH:{xs:'w75y6g',sm:'_4olg70',md:'_15l3fyj',lg:'_1s27qhm',full:{}},minW:{'0':{},trigger:'c6b1zd'},provider:{'dropdown-menu':'_1l5dx4o',popover:'y1acmi',popper:'_1gjjlkh'}}});
 
 export { listbox };

package/dist/esm/packages/react/src/nav/Nav-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-BkV839Tx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-k_NX91J6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1kvmzwp']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'ih0v60']});
 
 export { nav };

package/dist/esm/packages/react/src/nav-account-item/NavAccountItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-BgKdz8XC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-B7d7O2m4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'iofvur',true:'_7675nm'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_14nhb14',true:'_72dlep'}}});
 
 export { item };

package/dist/esm/packages/react/src/nav-body/NavBody-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',gap:'4',justifyContent:'flex-start',overflowX:'hidden',py:'8',w:'full'}],variants:{expanded:{false:{overflowY:'hidden'},true:{overflowY:'auto'}}}});

package/dist/esm/packages/react/src/nav-item/NavItem-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DzsQUyBc.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-Bk0AU707.css';
-import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-BjbnpsF2.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/button-base/ButtonBase.css.ts.vanilla-myHxMctj.css';
+import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-C8BRUtaY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1ogf3ia']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_1mkd1kr'],variants:{expanded:{false:'_13p9j4k',true:'_69mvy4'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'x86hap']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'m156vt'],variants:{expanded:{false:'_18ghumw',true:'_8j3rta'}}});
 
 export { item, label };

package/dist/esm/packages/react/src/pagination/Pagination-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-BJ3cDXvf.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-Bx7HYaRZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'ok3jvm']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_3u19gd'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1f04fi3']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'u07k4x']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1ptypqc'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_155l7i1']});
 
 export { button, cursor, list };

package/dist/esm/packages/react/src/paper/Paper-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'},screen:{}}}});

package/dist/esm/packages/react/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla--WvLIxWt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-CrBIVGRY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1ylj1av'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'mpq5u7'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-CK59vwIc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-2OVTuk2l.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'oeilry']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'fznfgk']});
 
 export { indicator, progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DzsQUyBc.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-D5JHsMb9.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-ED2xlQzn.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/toggle-input/ToggleInput.css.ts.vanilla-NI15o5dX.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-BlN8MviH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1jtb3hz'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1o0wz12']});
-var input = recipeRuntime({base:'bccseq'});
-var radio = recipeRuntime({base:'u2bg38'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1r4ez37'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1r3wccs']});
+var input = recipeRuntime({base:'_1ucjqbz'});
+var radio = recipeRuntime({base:'_1k0mmbn'});
 
 export { control, indicator, input, radio };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-NUSsWbCe.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-ClJJhlvO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'b14e6t']});
-var search = recipeRuntime({base:'_17oqc3n'});
+var clear = recipeRuntime({base:[{size:'sm'},'_14uis7q']});
+var search = recipeRuntime({base:'slplp3'});
 
 export { clear, search };

package/dist/esm/packages/react/src/search-input/SearchInput.js

@@ -8,9 +8,7 @@ import { Flex } from '../flex/Flex.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { IconX } from '../icons/IconX.js';
 import { Input } from '../input/Input.js';
-import '../utils/conditions.js';
-import '@radix-ui/react-slot';
-import { forceValueChange } from '../utils/forceValueChange.js';
+import { useObserveValue } from '../use-observe-value/useObserveValue.js';
 import { search, clear } from './SearchInput-css.js';
 
 const SearchInput = forwardRef(
@@ -21,6 +19,7 @@ const SearchInput = forwardRef(
       defaultProp: props.defaultValue,
       prop: props.value
     });
+    const forceValueChange = useObserveValue(innerRef, setValue);
     return /* @__PURE__ */ jsx(
       Input,
       {
@@ -31,11 +30,8 @@ const SearchInput = forwardRef(
             "aria-label": "Clear",
             icon: value && /* @__PURE__ */ jsx(IconX, {}),
             onClick: () => {
-              if (!innerRef.current) {
-                return;
-              }
-              forceValueChange(innerRef.current, "");
-              innerRef.current.focus();
+              forceValueChange("");
+              innerRef.current?.focus();
               onValueClear?.();
             },
             tabIndex: -1,

package/dist/esm/packages/react/src/select/Select.js

@@ -8,8 +8,8 @@ import { forwardRef, useRef, useMemo } from 'react';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
 import { SelectProvider } from '../select-context/SelectContext.js';
 import { SelectHiddenSelect } from '../select-hidden-select/SelectHiddenSelect.js';
+import { useObserveValue } from '../use-observe-value/useObserveValue.js';
 import { useObserveReset } from './useObserveReset.js';
-import { useObserveValue } from './useObserveValue.js';
 
 const Select = forwardRef(
   ({

package/dist/esm/packages/react/src/select-content/SelectContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-fLOMhyAu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-hnKiMBLN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['ffcwjj']});
+var content = recipeRuntime({base:['_1hoc702']});
 
 export { content };

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-Cl63Xvb8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-hMhU56Ah.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_h2fokeqwgislkw3fqntlep77qq/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_9n8eeh',md:'fd7wo7',base:'_124rue5'},defaultClass:'_124rue5'},vertical:{conditions:{sm:'_1f94hko',md:'l1ujys',base:'qq5phl'},defaultClass:'qq5phl'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1oe604p',md:'_1ll109g',base:'spsrex'},defaultClass:'spsrex'},vertical:{conditions:{sm:'hm04m5',md:'iihrhz',base:'zk4v2k'},defaultClass:'zk4v2k'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/esm/packages/react/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-DpX5QV7P.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-Dzc94FcN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_5ubmc8']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_9pob9']});
 
 export { skeleton };

package/dist/esm/packages/react/src/spinner/Spinner-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-DUXJuzON.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-D_Ki3sbG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'dkn2i5',inverse:'_145fuaw'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'dnhoj7',inverse:'_106dlxn'}}});
 
 export { track };

package/dist/esm/packages/react/src/spotlight/Spotlight.js

@@ -4,14 +4,15 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useEffect } from 'react';
 import { Dialog } from '../dialog/Dialog.js';
 import { SpotlightProvider } from '../spotlight-context/SpotlightContext.js';
-import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { useCommandItems } from '../use-command-items/useCommandItems.js';
 
 function Spotlight({
   children,
+  defaultItems,
   defaultOpen = false,
-  inputValue,
+  inputValue: inputValueProp,
   isItemDisabled = () => false,
-  items,
+  items: itemsProp,
   itemToLabel = (value) => value ? String(value) : "",
   itemToSubItems,
   onInputValueChange,
@@ -24,15 +25,18 @@ function Spotlight({
     onChange: onOpenChange,
     prop: openProp
   });
-  const onInputValueChangeStable = useEffectEvent(
-    onInputValueChange ?? (() => {
-    })
-  );
+  const [items, inputValue, setInputValue] = useCommandItems({
+    defaultItems,
+    inputValue: inputValueProp,
+    items: itemsProp,
+    itemToLabel,
+    onInputValueChange
+  });
   useEffect(() => {
     if (!open) {
-      onInputValueChangeStable("");
+      setInputValue("");
     }
-  }, [open, onInputValueChangeStable]);
+  }, [open, setInputValue]);
   return /* @__PURE__ */ jsx(Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
     SpotlightProvider,
     {
@@ -41,7 +45,7 @@ function Spotlight({
       items,
       itemToLabel,
       itemToSubItems,
-      onInputValueChange,
+      onInputValueChange: setInputValue,
       onItemSelect,
       open,
       setOpen,

package/dist/esm/packages/react/src/spotlight-content/SpotlightContent.js

@@ -2,10 +2,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { useCombobox } from 'downshift';
 import { forwardRef } from 'react';
 import { Command } from '../command/Command.js';
-import { CommandListbox } from '../command-listbox/CommandListbox.js';
 import { DialogContent } from '../dialog-content/DialogContent.js';
 import { useSpotlightContext } from '../spotlight-context/SpotlightContext.js';
 
@@ -40,23 +38,7 @@ const SpotlightContent = forwardRef(({ "aria-label": ariaLabel, children, size:
             itemToSubItems,
             onInputValueChange,
             onItemSelect,
-            stateReducer: (state, actionAndChanges) => {
-              const { changes, type } = actionAndChanges;
-              switch (type) {
-                case useCombobox.stateChangeTypes.InputKeyDownEnter:
-                case useCombobox.stateChangeTypes.ItemClick:
-                  return {
-                    ...changes,
-                    /**
-                     * Keep the selected option highlighted rather than resetting to -1
-                     */
-                    highlightedIndex: state.highlightedIndex
-                  };
-                default:
-                  return changes;
-              }
-            },
-            children: /* @__PURE__ */ jsx(CommandListbox, { children })
+            children
           }
         )
       ]

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-oRZV6092.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-01olIgL1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'t0ct7w']});
+var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_9pwxhp']});
 
 export { input };

package/dist/esm/packages/react/src/spotlight-listbox/SpotlightListbox.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CommandListbox } from '../command-listbox/CommandListbox.js';
+
+const SpotlightListbox = forwardRef((props, ref) => /* @__PURE__ */ jsx(CommandListbox, { gap: "8", ref, ...props }));
+SpotlightListbox.displayName = "@optiaxiom/react/SpotlightListbox";
+
+export { SpotlightListbox };

package/dist/esm/packages/react/src/spotlight-radio-item/SpotlightRadioItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-By3iPdRY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-q9nAVGcH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1cw5rxd']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_11auo5f']});
 
 export { item };

package/dist/esm/packages/react/src/spotlight-sub-item/SpotlightSubItem-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-ymgK9rLB.css';
-import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BUuebJZf.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-QQNkjqmm.css';
+import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BIJsazXZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1ks6gar',true:'rj7w58'}}});
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'hi5w0x',true:'_18pj4kz'}}});
 
 export { item };