@optiaxiom/react 1.2.2 → 1.2.4

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

@@ -0,0 +1,48 @@
+"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 { 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 { 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 { presence } = useDropdownMenuSubContext(
+    "@optiaxiom/react/DropdownMenuComboboxContent"
+  );
+  const { inputRef } = useDropdownMenuComboboxContext(
+    "@optiaxiom/react/DropdownMenuComboboxContent"
+  );
+  const innerRef = useRef(null);
+  const ref = useComposedRefs(innerRef, outerRef);
+  useEffect(() => {
+    const container = innerRef.current;
+    if (!container || !presence) {
+      return;
+    }
+    const listener = () => inputRef.current?.focus();
+    container.addEventListener("focus", listener);
+    return () => container.removeEventListener("focus", listener);
+  }, [inputRef, presence]);
+  return /* @__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/dropdown-menu-combobox-listbox/DropdownMenuComboboxListbox.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandListbox } from '../command-listbox/CommandListbox.js';
+import { DropdownMenuAutocompleteItem } from '../dropdown-menu-autocomplete-item/DropdownMenuAutocompleteItem.js';
+
+const DropdownMenuComboboxListbox = forwardRef(({ children, ...props }, ref) => {
+  const { itemToLabel } = useCommandContext(
+    "@optiaxiom/react/DropdownMenuComboboxListbox"
+  );
+  return /* @__PURE__ */ jsx(CommandListbox, { ref, ...props, children: children ?? ((item) => /* @__PURE__ */ jsx(DropdownMenuAutocompleteItem, { item, children: itemToLabel(item) }, item)) });
+});
+DropdownMenuComboboxListbox.displayName = "@optiaxiom/react/DropdownMenuComboboxListbox";
+
+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, useState } 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,24 @@ 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]);
+  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

@@ -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 { open } = useDropdownMenuSubContext(
+const DropdownMenuSubContent = forwardRef(({ asChild, children, ...props }, ref) => {
+  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, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubContent, { alignOffset: -4, ref, sideOffset: 0, children }) }) }) });
+  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,
+      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-DpYQJpX-.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-ofermjO4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-13HyyQrQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1gy9il1'});
+var mark = recipeRuntime({base:'_18nbssf'});
 
 export { mark };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-Bq7RrVn9.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-2tkHDJ5G.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_1kv55gc',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'f6bjm1']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1f7kbc6']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'mx5u7s'],variants:{offset:{false:'_1fd4ird',true:{}},position:{'bottom-right':'_1mexyp3','top-right':'_1cr7mkl'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1gse7qr']});
+var badge = recipeRuntime({base:'_962oxt',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'cnorv4']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'zk4tr']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1gu3kef'],variants:{offset:{false:'g0nv7n',true:{}},position:{'bottom-right':'_18ms2tf','top-right':'kc1f59'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'lx7x6m']});
 
 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-DpYQJpX-.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DDBW92Tz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-ijDFxMKY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'_150qp1y',variants:{empty:{false:{},true:'_1rsu871'}}});
-var input = recipeRuntime({base:'_7q3de8'});
+var editor = recipeRuntime({base:'_1n8hfc4',variants:{empty:{false:{},true:'_1fi63nx'}}});
+var input = recipeRuntime({base:'k4lr2o'});
 
 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-DpYQJpX-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.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-DpYQJpX-.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-xEBFM-Ld.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-ByKgnlq8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['mgnez8',{bg:'transparent',flex:'auto',w:'full'},'_19kpzac','_95fb79'],variants:{size:{md:{},lg:{},xl:['_5pv9ey']}}});
+var control = recipeRuntime({base:['_1kiw9pk',{bg:'transparent',flex:'auto',w:'full'},'_13iimdy','_1g307ml'],variants:{size:{md:{},lg:{},xl:['whj9v9']}}});
 
 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-DpYQJpX-.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-DzsQUyBc.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-xEBFM-Ld.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-CbKMaJ2Y.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Dex_upXA.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-ByKgnlq8.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-B4cbWcsf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_14mz6jw']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1yvbuyy']});
 
 export { root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DpYQJpX-.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-BsG-N7J7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DLP9-s5E.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'},'_1rulp2n'],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:'_46opda',variants:{variant:{outline:'_6no78z',subtle:{}}}});
+var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_1g59zk6'],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:'xrdebl',variants:{variant:{outline:'bgycyr',subtle:{}}}});
 
 export { kbd, keys };

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-CieILHYz.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Dex_upXA.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DOZDW1pV.css';
+import './../../../../assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-BXHIzVTL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'_1kfg8qy']});
+var button = recipeRuntime({base:[{justifyContent:'space-between'},'ag0ejg']});
 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-CieILHYz.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._115nzx7';
-var reset = 'optiaxiom._11twa79';
+var components = 'optiaxiom.ofk66h';
+var reset = 'optiaxiom._1k8mbgv';
 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-CieILHYz.css';
+import './../../../../assets/src/layout/Layouts.css.ts.vanilla-JGjqW3ul.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'},'_1dh401']});
 
 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-CieILHYz.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-C8IGxRpo.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'},'h18w6i']});
+var link = recipeRuntime({base:['s3cm3h','_1mvq5vp'],variants:{appearance:{'default':'_1uplkzn',inverse:'_1njxenl',subtle:'_7abr7i'}}});
 
 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-empty/ListboxEmpty.js

@@ -6,7 +6,7 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
 const ListboxEmpty = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children = "No results found.", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -18,7 +18,7 @@ const ListboxEmpty = forwardRef(
         p: "16",
         ref,
         ...props,
-        children: children || "No options"
+        children
       }
     );
   }

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-CieILHYz.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-f1y8kxy7.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'},'_10n03p']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'gqoz4e'],variants:{intent:{danger:'ai1vzq',neutral:'_1sojc0d'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_1jyhfla']});
 
 export { description, item, title };

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

@@ -22,7 +22,6 @@ const ListboxItem = forwardRef(
     asChild,
     children,
     className,
-    "data-highlighted": dataHighlighted,
     description: description$1,
     icon,
     intent = "neutral",
@@ -38,11 +37,11 @@ const ListboxItem = forwardRef(
         "aria-labelledby": labelId,
         asChild: true,
         ref,
-        ...isHoverSupported && dataHighlighted !== void 0 && {
-          "data-highlighted": dataHighlighted
-        },
         ...item({ intent }, className),
         ...props,
+        ...!isHoverSupported && {
+          "data-highlighted": void 0
+        },
         children: /* @__PURE__ */ jsx(Comp, { children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
           addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null,
           /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
+import './../../../../assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-CA6t304_.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var indicator = recipeRuntime({base:['rx7r0j'],variants:{active:{false:{},true:'_1cleqnb'}}});
+
+export { indicator };

package/dist/esm/packages/react/src/listbox-item-indicator/ListboxItemIndicator.js

@@ -2,17 +2,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { IconCheck } from '../icons/IconCheck.js';
+import { indicator } from './ListboxItemIndicator-css.js';
 
 const ListboxItemIndicator = forwardRef(({ active, children, className, ...props }, ref) => {
-  const { boxProps, restProps } = extractBoxProps(props);
-  if (!active) {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, className, h: "0", w: "xs", ...boxProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
-  }
-  return (
-    // @ts-expect-error -- too complex
-    /* @__PURE__ */ jsx(Box, { asChild: true, className, ref, ...props, children: children ?? /* @__PURE__ */ jsx(IconCheck, {}) })
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      ref,
+      ...indicator({ active }, className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(IconCheck, {})
+    }
   );
 });
 ListboxItemIndicator.displayName = "@optiaxiom/react/ListboxItemIndicator";

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

@@ -2,11 +2,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import { forwardRef, useRef, useState, useEffect, useContext, 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';
+import { TransitionGroupContext } from '../transition-group-context/TransitionGroupContext.js';
 
 const ListboxVirtualized = forwardRef(({ children, highlightedItem, items, ...props }, outerRef) => {
   const innerRef = useRef(null);
@@ -15,6 +16,7 @@ const ListboxVirtualized = forwardRef(({ children, highlightedItem, items, ...pr
   useEffect(() => {
     requestAnimationFrame(() => setEnabled(true));
   }, []);
+  const { presence } = useContext(TransitionGroupContext) ?? {};
   const rowVirtualizer = useVirtualizer({
     count: items.length,
     enabled,
@@ -27,11 +29,11 @@ const ListboxVirtualized = forwardRef(({ children, highlightedItem, items, ...pr
   );
   useEffect(() => {
     const index = itemToIndexMap.get(highlightedItem);
-    if (!enabled || typeof index !== "number") {
+    if (!presence || typeof index !== "number" || rowVirtualizer.isScrolling) {
       return;
     }
     rowVirtualizer.scrollToIndex(index);
-  }, [enabled, highlightedItem, itemToIndexMap, rowVirtualizer]);
+  }, [presence, highlightedItem, itemToIndexMap, rowVirtualizer]);
   const virtualItems = rowVirtualizer.getVirtualItems();
   const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
     Math.max(0, virtualItems[0].start),
@@ -53,7 +55,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-CieILHYz.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-C4pIEpdK.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'},'_1wd4sw2'],variants:{maxH:{xs:'u2kl5u',sm:'_1jalg9u',md:'uy33z2',lg:'_1xhc77m',full:{}},minW:{'0':{},trigger:'_1rppeuf'},provider:{'dropdown-menu':'_18txwzm',popover:'u39etr',popper:'_1hd6zkw'}}});
 
 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-CieILHYz.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-CZU_vD75.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'},'_185p2hp']});
 
 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-CieILHYz.css';
+import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-CaBogrTp.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:'_1anaf27',true:'ya4h72'}}});
 
 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-CieILHYz.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-CieILHYz.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Dex_upXA.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DOZDW1pV.css';
+import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-D-Od9Jvm.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'},'_14ekli']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_92tuzk'],variants:{expanded:{false:'_78vfit',true:'ass3lh'}}});
 
 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-CieILHYz.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-5Dnur9Ag.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'},'eixw2x']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_3g092n'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'cyz5x6']});
 
 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-CieILHYz.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-CieILHYz.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-CUEhZKLa.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'},'_17hfz4t'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };