@optiaxiom/react 1.2.1 → 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-Cuv-7Lkf.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DgtPdTAh.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-B4p1rHFT.css';
-import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-BRyS9Qb4.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'},'icyf1h']});
+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-Cuv-7Lkf.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BeSAdLYi.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._1brjx64';
-var reset = 'optiaxiom._1e65hrk';
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/layout/Layouts.css.ts.vanilla-vC3rRLUg.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'},'_1h7x3e6']});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-UCpNUYWa.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'},'_1ujinii']});
-var link = recipeRuntime({base:['_1tp4mp3','m4q3x4'],variants:{appearance:{'default':'_1b1qrka',inverse:'arpdzc',subtle:'kidylg'}}});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-DDypIAx2.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'},'_18h3d8v']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1k5m0hm'],variants:{intent:{danger:'_1pcasdj',neutral:'_6jv618'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_17i6o6t']});
+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-item/ListboxItem.js

@@ -37,8 +37,10 @@ const ListboxItem = forwardRef(
         "aria-describedby": description$1 ? descriptionId : void 0,
         "aria-labelledby": labelId,
         asChild: true,
-        "data-highlighted": isHoverSupported ? dataHighlighted : void 0,
         ref,
+        ...isHoverSupported && dataHighlighted !== void 0 && {
+          "data-highlighted": dataHighlighted
+        },
         ...item({ intent }, className),
         ...props,
         children: /* @__PURE__ */ jsx(Comp, { children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [

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-Cuv-7Lkf.css';
-import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-hw60FkV-.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'},'_1bsb685'],variants:{maxH:{xs:'ctdc24',sm:'_1s4to1o',md:'_1ssijip',lg:'_1dil7b4',full:{}},minW:{'0':{},trigger:'pg6vsf'},provider:{'dropdown-menu':'_1jasxvo',popover:'_1v02vm6',popper:'_12qxuvt'}}});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-CO44jpe6.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'},'_1ra5dkh']});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-BAyCZiY2.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:'mdhwab',true:'_1wwqmfz'}}});
+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-Cuv-7Lkf.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-Cuv-7Lkf.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DgtPdTAh.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-B4p1rHFT.css';
-import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-DIT1HBQg.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'},'_1fcyiri']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_1lzfmz7'],variants:{expanded:{false:'wuphk5',true:'ua9i2n'}}});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-DEVrCpaO.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'},'_1vo8r9r']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1vug546'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1t3nkey']});
+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-Cuv-7Lkf.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-Cuv-7Lkf.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-DdWm__I7.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'},'_13trnyi'],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-Cuv-7Lkf.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-NakD5UfX.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'},'v4vuvb']});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DgtPdTAh.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CA3LAOeu.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-CmcOpH1v.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'},'_1c83vdh'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'ll9y64']});
-var input = recipeRuntime({base:'_17hhgaa'});
-var radio = recipeRuntime({base:'_1y1w8hi'});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-kxHo8_M-.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'},'_1taramr']});
-var search = recipeRuntime({base:'_13ne56d'});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-Clg7WjUb.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:['jqon0m']});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-0PyACqm-.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:'_9euht1',md:'cqt3oh',base:'_7rvl3'},defaultClass:'_7rvl3'},vertical:{conditions:{sm:'r895zl',md:'_9m7ba9',base:'_1yuf8nw'},defaultClass:'_1yuf8nw'}},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-Cuv-7Lkf.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-BnwUQUGM.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'},'_1gn55m9']});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-Dhifwe4Z.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':'_9a61t1',inverse:'_10ovkaa'}}});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-W0qTnuXO.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'},'n8m7fs']});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-B-kpM7Gr.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'},'hv84y1']});
+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-Cuv-7Lkf.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-DsFm7XLh.css';
-import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BZn78GT3.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:'_4nd74b',true:'_160dri6'}}});
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'hi5w0x',true:'_18pj4kz'}}});
 
 export { item };