@optiaxiom/react 1.3.5 → 1.4.0

package/dist/esm/packages/react/src/menu/MenuSub.js

@@ -1,44 +1,28 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
-import { useCommandContext } from '../command/CommandContext.js';
+import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
 import { Popover } from '../popover/Popover.js';
 import '../popover/PopoverAnchor.js';
 import '../popover/PopoverContent.js';
 import '../popover/PopoverTrigger.js';
-import { useMenuContext } from './MenuContext.js';
-import { useMenuNestedContext } from './MenuNestedContext.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContent.js';
+import '../tooltip/TooltipProvider.js';
+import '../tooltip/TooltipRoot.js';
+import '../tooltip/TooltipTrigger.js';
 import { MenuSubContent } from './MenuSubContent.js';
-import { MenuSubProvider } from './MenuSubContext.js';
+import { useMenuSubContext } from './MenuSubContext.js';
 import { MenuSubTrigger } from './MenuSubTrigger.js';
 
-function MenuSub({ children, item }) {
-  const { activePath, setActivePath } = useMenuContext(
-    "@optiaxiom/react/MenuSub"
-  );
-  const { items } = useCommandContext("@optiaxiom/react/MenuSub");
-  const { level } = useMenuNestedContext("@optiaxiom/react/MenuSub");
-  const index = items.indexOf(item);
+function MenuSub({ item }) {
+  const { highlightedItem } = useCommandContext("@optiaxiom/react/MenuSub");
+  const { open } = useMenuSubContext("@optiaxiom/react/MenuSub");
   const contentRef = useRef(null);
-  const inputRef = useRef(null);
-  return /* @__PURE__ */ jsx(
-    MenuSubProvider,
-    {
-      contentRef,
-      inputRef,
-      level,
-      open: activePath[level] === index,
-      setOpen: () => {
-        setActivePath(
-          (path) => path[level] === index ? path.slice(0, level) : path
-        );
-      },
-      children: children ?? /* @__PURE__ */ jsxs(Popover, { open: activePath[level] === index, children: [
-        /* @__PURE__ */ jsx(MenuSubTrigger, { item }),
-        /* @__PURE__ */ jsx(MenuSubContent, { item })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxs(Popover, { open: open && highlightedItem === item, children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsx(MenuSubTrigger, { contentRef, item }) }),
+    /* @__PURE__ */ jsx(MenuSubContent, { item, ref: contentRef })
+  ] });
 }
 MenuSub.displayName = "@optiaxiom/react/MenuSub";
 

package/dist/esm/packages/react/src/menu/MenuSubContent.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo, useRef, useState, useEffect } from 'react';
 import { Command } from '../command/Command.js';
 import { CommandInput } from '../command/CommandInput.js';
 import '../command/CommandItem.js';
@@ -11,50 +10,60 @@ import '../popover/Popover.js';
 import '../popover/PopoverAnchor.js';
 import { PopoverContent } from '../popover/PopoverContent.js';
 import '../popover/PopoverTrigger.js';
+import { usePopoverContext } from '../popover/PopoverContext.js';
 import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { useMenuContext } from './MenuContext.js';
 import { MenuListbox } from './MenuListbox.js';
-import { useMenuNestedContext, MenuNestedProvider } from './MenuNestedContext.js';
-import { useMenuSubContext } from './MenuSubContext.js';
+import { useMenuSubContext, MenuSubProvider } from './MenuSubContext.js';
 
 const MenuSubContent = forwardRef(
-  ({ align = "start", children, item, side = "right", ...props }, outerRef) => {
+  ({ align = "start", children, item, side = "right", ...props }, ref) => {
     const options = useMemo(() => item.subOptions ?? [], [item]);
-    const {
-      activePath,
-      inputRef: rootInputRef,
-      onSelect,
-      setActivePath,
-      setOpen
-    } = useMenuContext("@optiaxiom/react/MenuSubContent");
+    const { onSelect, setOpen: setRootMenuOpen } = useMenuContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
     const { setInputValue } = useCommandContext(
       "@optiaxiom/react/MenuSubContent"
     );
     const {
-      contentRef,
-      inputRef,
-      level,
-      setOpen: setSubOpen
+      inputRef: parentInputRef,
+      open: parentSubMenuOpen,
+      setOpen
     } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
-    const { inputRef: parentInputRef = rootInputRef } = useMenuNestedContext(
-      "@optiaxiom/react/MenuSubContent"
-    );
-    const ref = useComposedRefs(contentRef, outerRef);
+    const { open } = usePopoverContext("@optiaxiom/react/MenuSubContent");
+    const inputRef = useRef(null);
+    const [subMenuOpen, setSubMenuOpen] = useState(false);
+    useEffect(() => {
+      if (!open) {
+        setSubMenuOpen(false);
+      }
+    }, [open]);
     return /* @__PURE__ */ jsx(
       PopoverContent,
       {
         align,
-        alignOffset: -4,
+        alignOffset: item.subOptionsInputVisible ? -46 : -4,
         maxH: "sm",
         minW: "trigger",
         onCloseAutoFocus: (event) => {
-          if (activePath.length > level) {
+          if (parentSubMenuOpen) {
             return;
           }
           event.preventDefault();
           parentInputRef.current?.focus();
         },
-        onEscapeKeyDown: () => setOpen(false),
+        onEscapeKeyDown: () => setRootMenuOpen(false),
+        onPointerEnter: () => {
+          if (item.subOptionsInputVisible) {
+            inputRef.current?.focus();
+          }
+        },
+        onPointerLeave: (event) => {
+          if (item.subOptionsInputVisible) {
+            parentInputRef.current?.focus();
+            event.stopPropagation();
+          }
+        },
         p: "4",
         ref,
         side,
@@ -64,27 +73,18 @@ const MenuSubContent = forwardRef(
           Command,
           {
             onHover: (item2) => {
-              if (item2.subOptions?.length) {
-                const index = options.indexOf(item2);
-                setActivePath(
-                  (path) => path[level + 1] !== index ? [...path.slice(0, level + 1), index] : path
-                );
-              } else {
-                setActivePath(
-                  (path) => path.length > level + 1 ? path.slice(0, level + 1) : path
-                );
-              }
+              setSubMenuOpen(!!item2.subOptions?.length);
             },
             onInputValueChange: (inputValue) => {
+              if (item.subOptionsInputVisible) {
+                return;
+              }
               parentInputRef.current?.focus();
               setInputValue(inputValue);
             },
             onSelect: (item2, { close }) => {
               if (item2.subOptions?.length) {
-                const index = options.indexOf(item2);
-                setActivePath(
-                  (path) => path[level + 1] !== index ? [...path.slice(0, level + 1), index] : path
-                );
+                setSubMenuOpen(true);
               } else {
                 onSelect(item2, { close });
               }
@@ -92,19 +92,31 @@ const MenuSubContent = forwardRef(
             open: true,
             options,
             children: [
-              /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsx(
                 CommandInput,
                 {
+                  m: "4",
                   onKeyDown: (event) => {
-                    if (event.key === "ArrowLeft") {
+                    if (!(event.target instanceof HTMLInputElement)) {
+                      return;
+                    }
+                    if (!event.target.value && event.key === "ArrowLeft") {
                       event.preventDefault();
-                      setSubOpen(false);
+                      setOpen(false);
                     }
                   },
                   ref: inputRef
                 }
               ) }),
-              /* @__PURE__ */ jsx(MenuNestedProvider, { inputRef, level: level + 1, children: /* @__PURE__ */ jsx(MenuListbox, {}) })
+              /* @__PURE__ */ jsx(
+                MenuSubProvider,
+                {
+                  inputRef,
+                  open: subMenuOpen,
+                  setOpen: setSubMenuOpen,
+                  children: /* @__PURE__ */ jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+                }
+              )
             ]
           }
         )

package/dist/esm/packages/react/src/menu/MenuSubTrigger.js

@@ -8,15 +8,13 @@ import '../popover/Popover.js';
 import '../popover/PopoverAnchor.js';
 import '../popover/PopoverContent.js';
 import { PopoverTrigger } from '../popover/PopoverTrigger.js';
+import { usePopoverContext } from '../popover/PopoverContext.js';
 import { MenuItem } from './MenuItem.js';
-import { useMenuSubContext } from './MenuSubContext.js';
 
 const MenuSubTrigger = forwardRef(
-  ({ children, item, onPointerDown, ...props }, ref) => {
+  ({ children, contentRef, item, onPointerDown, ...props }, ref) => {
     const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
-    const { contentRef, open } = useMenuSubContext(
-      "@optiaxiom/react/MenuSubTrigger"
-    );
+    const { open } = usePopoverContext("@optiaxiom/react/MenuSubTrigger");
     return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsx(
       MenuItem,
       {
@@ -57,7 +55,7 @@ const MenuSubTrigger = forwardRef(
           };
           pauseInteractionRef.current.timer = window.setTimeout(() => {
             pauseInteractionRef.current.isInsideTriangle = null;
-          }, 50);
+          }, 20);
         },
         ref,
         ...props,

package/dist/esm/packages/react/src/menu/MenuTrigger.js

@@ -35,7 +35,6 @@ const MenuTrigger = forwardRef(
         onKeyDown: (event) => {
           switch (event.key) {
             case "ArrowDown":
-            case "ArrowUp":
               setOpen(true);
           }
         },

package/dist/esm/packages/react/src/modal/ModalListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-DflGc50g.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-HRG4F-ZP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'jgt8qi'],variants:{maxH:{xs:'xowou6',sm:'s0pf6r',md:'_9tqftk',lg:'_1ykedwz',full:{}},minW:{'0':{},trigger:'dxqos9'},provider:{'dropdown-menu':'_1qklw2a',popover:'s51i98',popper:'_1xqarpd'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'f3jaga'],variants:{maxH:{xs:'_1rta7jq',sm:'_1b4nf8x',md:'egu2f9',lg:'legzws',full:{}},minW:{'0':{},trigger:'_1ls4iuz'},provider:{'dropdown-menu':'_1qoln4v',popover:'_17q5i4e',popper:'_1nj65it'}}});
 
 export { listbox };

package/dist/esm/packages/react/src/modal/ModalListbox.js

@@ -13,7 +13,6 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
-import '../listbox/ListboxVirtualized.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
 import '../transition/TransitionGroup.js';

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-CY6428nQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-lXNnA0jZ.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'},'_1wdhff']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'zd4719']});
 
 export { nav };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-B5SqPdUr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-BO6iW_IA.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:'_1kolr98',true:'p8f7w8'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_1nn7idk',true:'_14jfwu0'}}});
 
 export { item };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.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/NavItem-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CQ7BhWOq.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DYMuviVw.css';
-import './../../../../assets/src/nav/NavItem.css.ts.vanilla-gg3nfbk7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-cBnoy0-c.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-CpGdbNV_.css';
+import './../../../../assets/src/nav/NavItem.css.ts.vanilla-BH50W90T.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'},'a9sr52']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_10uzdho'],variants:{expanded:{false:'_1yk9ell',true:'_1qr3ez2'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_11qf6d5']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'b494h7'],variants:{expanded:{false:'pkkqlq',true:'_93ez0s'}}});
 
 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-DtBvKw05.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-CGeVOUOK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-DNHyzLBI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'_15mzbl0']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1kcar28'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'g6zmaj']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'_1apw1d7']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1de0pjd'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1ro5rmd']});
 
 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-DtBvKw05.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.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-DtBvKw05.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-DT2sZIQP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-DWLptfp-.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'},'hsn5b2'],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'},'jxzh5n'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/popover/PopoverContent.js

@@ -7,6 +7,7 @@ import { forwardRef, useRef } from 'react';
 import { ModalProvider } from '../modal/ModalContext.js';
 import '../modal/ModalLayer.js';
 import { ModalListbox } from '../modal/ModalListbox.js';
+import { Portal } from '../portal/Portal.js';
 import '../transition/Transition.js';
 import { TransitionGroup } from '../transition/TransitionGroup.js';
 import '../utils/conditions.js';
@@ -27,7 +28,7 @@ const PopoverContent = forwardRef(
         onPresenceChange: setPresence,
         open,
         presence,
-        children: /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(
           ModalListbox,
           {
             asChild: true,

package/dist/esm/packages/react/src/portal/Portal.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as RadixPortal from '@radix-ui/react-portal';
+import { forwardRef } from 'react';
+import { usePortalContext } from './PortalContext.js';
+
+const Portal = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { container } = usePortalContext("@optiaxiom/react/Portal");
+    return /* @__PURE__ */ jsx(RadixPortal.Root, { container, ref, ...props, children });
+  }
+);
+Portal.displayName = "@optiaxiom/react/Portal";
+
+export { Portal };

package/dist/esm/packages/react/src/portal/PortalContext.js

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

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-DYAitkCw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-C4EM-zBV.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'},'_1abuk6t']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'go5hv2']});
 
 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-DtBvKw05.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-CQ7BhWOq.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-D5twvt0R.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-D-5ckJPZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-cBnoy0-c.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-m5FEauqI.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-BVTy-7Sd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1vw1vwt'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'ohqg61']});
-var input = recipeRuntime({base:'w34qzn'});
-var radio = recipeRuntime({base:'scgur0'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'dzjdlm'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_9tbl88']});
+var input = recipeRuntime({base:'e2ugug'});
+var radio = recipeRuntime({base:'su6edc'});
 
 export { control, indicator, input, radio };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CwZkIDIt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-Zlde0IIR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'cqlp21']});
-var input = recipeRuntime({base:'_1msiwo6'});
-var search = recipeRuntime({base:'_14x32vz'});
+var clear = recipeRuntime({base:[{size:'sm'},'j6z9l6']});
+var input = recipeRuntime({base:'_4bbct2'});
+var search = recipeRuntime({base:'_11ufxiy'});
 
 export { clear, input, search };

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

@@ -37,9 +37,9 @@ const SearchInput = forwardRef(
             appearance: "subtle",
             "aria-label": "Clear",
             icon: value && /* @__PURE__ */ jsx(IconX, {}),
-            onClick: () => {
+            onPointerDown: (event) => {
+              event.preventDefault();
               forceValueChange("");
-              innerRef.current?.focus();
               onValueClear?.();
             },
             tabIndex: -1,

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

@@ -97,6 +97,7 @@ const Select = forwardRef(
         }
       }
     });
+    downshift.getToggleButtonProps({}, { suppressRefError: true });
     downshift.getMenuProps({}, { suppressRefError: true });
     return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsxs(
       SelectProvider,

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PopperContent } from '@radix-ui/react-popper';
-import { Portal } from '@radix-ui/react-portal';
 import { forwardRef, useState } from 'react';
 import '../listbox/Listbox.js';
 import '../listbox/ListboxCheckboxItem.js';
@@ -15,10 +14,15 @@ import { ListboxLabel } from '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import { ListboxSeparator } from '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
-import '../listbox/ListboxVirtualized.js';
 import '../modal/ModalContext.js';
 import { ModalLayer } from '../modal/ModalLayer.js';
 import { ModalListbox } from '../modal/ModalListbox.js';
+import { Portal } from '../portal/Portal.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContent.js';
+import '../tooltip/TooltipProvider.js';
+import '../tooltip/TooltipRoot.js';
+import '../tooltip/TooltipTrigger.js';
 import '../transition/Transition.js';
 import { TransitionGroup } from '../transition/TransitionGroup.js';
 import { useSelectContext } from './SelectContext.js';
@@ -33,7 +37,7 @@ const SelectContent = forwardRef(
     const shouldShowSeparator = (group) => {
       const show = !isFirstItem;
       isFirstItem = false;
-      return show && group && group !== lastGroup && group.separator;
+      return show && group !== lastGroup && (group?.separator || lastGroup?.separator);
     };
     const shouldShowGroup = (group) => {
       const show = group !== lastGroup;
@@ -59,7 +63,6 @@ const SelectContent = forwardRef(
             itemToKey: (item) => item.value,
             loading,
             onPlacedChange: setPlaced,
-            placed,
             ...downshift.getMenuProps({}, { suppressRefError: !placed }),
             children: children ?? ((item, index) => {
               if (index === 0) {
@@ -70,7 +73,7 @@ const SelectContent = forwardRef(
               return /* @__PURE__ */ jsxs(Fragment, { children: [
                 shouldShowSeparator(group) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
                 shouldShowGroup(group) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Tooltip, { content: item.disabledReason, children: /* @__PURE__ */ jsx(
                   SelectRadioItem,
                   {
                     addonBefore: item.addon,
@@ -80,7 +83,7 @@ const SelectContent = forwardRef(
                     children: item.label
                   },
                   item.value
-                )
+                ) })
               ] });
             })
           }

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

@@ -13,7 +13,6 @@ import '../listbox/ListboxLabel.js';
 import { ListboxRadioItem } from '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
-import '../listbox/ListboxVirtualized.js';
 import { SelectItem } from './SelectItem.js';
 
 const SelectRadioItem = forwardRef(

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-ECYUpfs7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-BtevYyD1.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:'duau0v',md:'biz37e',base:'_1rgpudd'},defaultClass:'_1rgpudd'},vertical:{conditions:{sm:'_1n4trgv',md:'k14j1h',base:'mo1mzn'},defaultClass:'mo1mzn'}},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:'syalhg',md:'_7304w0',base:'_1v5s6ak'},defaultClass:'_1v5s6ak'},vertical:{conditions:{sm:'kbx44c',md:'te6eyf',base:'_1gceb0s'},defaultClass:'_1gceb0s'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/esm/packages/react/src/sidebar/SidebarToggle.js

@@ -25,7 +25,6 @@ const SidebarToggle = forwardRef(
         "aria-controls": navId,
         "aria-expanded": expanded ? "true" : "false",
         "aria-label": ariaLabel || (expanded ? "Collapse" : "Expand"),
-        fontWeight: "400",
         onClick: () => onExpandedChange(!expanded),
         ref,
         ...props,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CdLZTk-b.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-lz8oc9G-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'c7d14l']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_1o6llo6']});
 
 export { skeleton };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DtBvKw05.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-kEwTCoVb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-CwAsWxNd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'w9o8sl',inverse:'_4ya57j'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'_1wm3d6o',inverse:'st19ui'}}});
 
 export { track };

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

@@ -5,7 +5,7 @@ import '../menu/MenuContent.js';
 import '../menu/MenuTrigger.js';
 
 function Spotlight({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Menu, { defaultInputVisible: true, size: "lg", ...props, children });
+  return /* @__PURE__ */ jsx(Menu, { initialInputVisible: true, size: "lg", ...props, children });
 }
 Spotlight.displayName = "@optiaxiom/react/Spotlight";