@optiaxiom/react 1.2.5 → 1.3.1

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

@@ -1,21 +1,44 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Listbox } from '../listbox/Listbox.js';
-import { Paper } from '../paper/Paper.js';
-import { Transition } from '../transition/Transition.js';
-import { listbox } from './MenuListbox-css.js';
+import { CommandListbox } from '../command-listbox/CommandListbox.js';
+import { ListboxLabel } from '../listbox-label/ListboxLabel.js';
+import { ListboxSeparator } from '../listbox-separator/ListboxSeparator.js';
+import { MenuCheckboxItem } from '../menu-checkbox-item/MenuCheckboxItem.js';
+import { useMenuContext } from '../menu-context/MenuContext.js';
+import { MenuItem } from '../menu-item/MenuItem.js';
+import { MenuRadioItem } from '../menu-radio-item/MenuRadioItem.js';
+import { MenuSub } from '../menu-sub/MenuSub.js';
 
 const MenuListbox = forwardRef(
-  ({ children, className, maxH, minW, provider = "popover", ...props }, ref) => /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, children: /* @__PURE__ */ jsx(
-    Listbox,
-    {
-      ref,
-      ...listbox({ maxH, minW, provider }, className),
-      ...props,
-      children
-    }
-  ) }) })
+  ({ children, ...props }, ref) => {
+    const { size } = useMenuContext("@optiaxiom/react/MenuListbox");
+    let isFirstItem = true;
+    let lastGroup = void 0;
+    const shouldShowSeparator = (group) => {
+      const show = !isFirstItem;
+      isFirstItem = false;
+      return show && group && group !== lastGroup && group.separator;
+    };
+    const shouldShowGroup = (group) => {
+      const show = group !== lastGroup;
+      lastGroup = group;
+      return show && !group?.hidden;
+    };
+    return /* @__PURE__ */ jsx(CommandListbox, { ref, ...props, children: children ?? ((item, index) => {
+      if (index === 0) {
+        isFirstItem = true;
+        lastGroup = void 0;
+      }
+      const Comp = item.subOptions?.length ? size === "sm" ? MenuSub : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : MenuRadioItem : MenuItem;
+      const group = item.group;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        shouldShowSeparator(group) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
+        shouldShowGroup(group) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.name }),
+        /* @__PURE__ */ jsx(Comp, { item })
+      ] });
+    }) });
+  }
 );
 MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
 

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

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [MenuNestedProvider, useMenuNestedContext] = createContext("@optiaxiom/react/MenuNested", { inputRef: void 0, level: 0 });
+
+export { MenuNestedProvider, useMenuNestedContext };

package/dist/esm/packages/react/src/{combobox-popover/ComboboxPopover.js → menu-popover/MenuPopover.js}

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { Popover } from '../popover/Popover.js';
 
-function ComboboxPopover(props) {
+function MenuPopover(props) {
   return /* @__PURE__ */ jsx(Popover, { modal: true, ...props });
 }
-ComboboxPopover.displayName = "@optiaxiom/react/ComboboxPopover";
+MenuPopover.displayName = "@optiaxiom/react/MenuPopover";
 
-export { ComboboxPopover };
+export { MenuPopover };

package/dist/esm/packages/react/src/{combobox-popover-content/ComboboxPopoverContent.js → menu-popover-content/MenuPopoverContent.js}

@@ -3,9 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { PopoverContent } from '../popover-content/PopoverContent.js';
 
-const ComboboxPopoverContent = forwardRef((props, ref) => {
+const MenuPopoverContent = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
 });
-ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
+MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
 
-export { ComboboxPopoverContent };
+export { MenuPopoverContent };

package/dist/esm/packages/react/src/menu-radio-item/MenuRadioItem.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CommandItem } from '../command-item/CommandItem.js';
+import { ListboxRadioItem } from '../listbox-radio-item/ListboxRadioItem.js';
+
+const MenuRadioItem = forwardRef(
+  ({ children, ...props }, ref) => {
+    const Comp = props.item.link ? "a" : "div";
+    return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
+      ListboxRadioItem,
+      {
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        children: /* @__PURE__ */ jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+      }
+    ) });
+  }
+);
+MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
+
+export { MenuRadioItem };

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { useMenuContext } from '../menu-context/MenuContext.js';
+import { useMenuNestedContext } from '../menu-nested-context/MenuNestedContext.js';
+import { MenuSubContent } from '../menu-sub-content/MenuSubContent.js';
+import { MenuSubProvider } from '../menu-sub-context/MenuSubContext.js';
+import { MenuSubTrigger } from '../menu-sub-trigger/MenuSubTrigger.js';
+import { Popover } from '../popover/Popover.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);
+  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 })
+      ] })
+    }
+  );
+}
+MenuSub.displayName = "@optiaxiom/react/MenuSub";
+
+export { MenuSub };

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

@@ -0,0 +1,111 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef, useMemo } from 'react';
+import { Command } from '../command/Command.js';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandInput } from '../command-input/CommandInput.js';
+import { useMenuContext } from '../menu-context/MenuContext.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { useMenuNestedContext, MenuNestedProvider } from '../menu-nested-context/MenuNestedContext.js';
+import { useMenuSubContext } from '../menu-sub-context/MenuSubContext.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+
+const MenuSubContent = forwardRef(
+  ({ align = "start", children, item, side = "right", ...props }, outerRef) => {
+    const options = useMemo(() => item.subOptions ?? [], [item]);
+    const {
+      activePath,
+      inputRef: rootInputRef,
+      onSelect,
+      setActivePath,
+      setOpen
+    } = useMenuContext("@optiaxiom/react/MenuSubContent");
+    const { setInputValue } = useCommandContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const {
+      contentRef,
+      inputRef,
+      level,
+      setOpen: setSubOpen
+    } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const { inputRef: parentInputRef = rootInputRef } = useMenuNestedContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const ref = useComposedRefs(contentRef, outerRef);
+    return /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align,
+        alignOffset: -4,
+        maxH: "sm",
+        minW: "trigger",
+        onCloseAutoFocus: (event) => {
+          if (activePath.length > level) {
+            return;
+          }
+          event.preventDefault();
+          parentInputRef.current?.focus();
+        },
+        onEscapeKeyDown: () => setOpen(false),
+        p: "4",
+        ref,
+        side,
+        sideOffset: 0,
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(
+          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
+                );
+              }
+            },
+            onInputValueChange: (inputValue) => {
+              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
+                );
+              } else {
+                onSelect(item2, { close });
+              }
+            },
+            options,
+            children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+                CommandInput,
+                {
+                  onKeyDown: (event) => {
+                    if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      setSubOpen(false);
+                    }
+                  },
+                  ref: inputRef
+                }
+              ) }),
+              /* @__PURE__ */ jsx(MenuNestedProvider, { inputRef, level: level + 1, children: /* @__PURE__ */ jsx(MenuListbox, {}) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
+
+export { MenuSubContent };

package/dist/esm/packages/react/src/menu-sub-context/MenuSubContext.js

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

package/dist/esm/packages/react/src/menu-sub-trigger/MenuSubTrigger.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { FilteredSlot } from '../filtered-slot/FilteredSlot.js';
+import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { MenuItem } from '../menu-item/MenuItem.js';
+import { useMenuSubContext } from '../menu-sub-context/MenuSubContext.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+
+const MenuSubTrigger = forwardRef(
+  ({ children, item, onPointerDown, ...props }, ref) => {
+    const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
+    const { contentRef, open } = useMenuSubContext(
+      "@optiaxiom/react/MenuSubTrigger"
+    );
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}),
+        item,
+        onPointerDown: (event) => {
+          onPointerDown?.(event);
+          if (open) {
+            event.preventDefault();
+          }
+        },
+        onPointerEnter: () => {
+          if (highlightedItem !== item) {
+            return;
+          }
+          downshift.selectItem(item);
+        },
+        onPointerLeave: (event) => {
+          const box = contentRef.current?.getBoundingClientRect();
+          if (!box) {
+            return;
+          }
+          const bottom = {
+            x: box.left,
+            y: box.top + box.height
+          };
+          const side = {
+            x: event.clientX + 10 * (box.left > event.clientX ? -1 : 1),
+            y: event.clientY
+          };
+          const top = {
+            x: box.left,
+            y: box.top
+          };
+          pauseInteractionRef.current.isInsideTriangle = (target) => {
+            const b0 = (top.x - side.x) * (bottom.y - side.y) - (bottom.x - side.x) * (top.y - side.y), b1 = ((top.x - target.x) * (bottom.y - target.y) - (bottom.x - target.x) * (top.y - target.y)) / b0, b2 = ((bottom.x - target.x) * (side.y - target.y) - (side.x - target.x) * (bottom.y - target.y)) / b0, b3 = ((side.x - target.x) * (top.y - target.y) - (top.x - target.x) * (side.y - target.y)) / b0;
+            return b1 > 0 && b2 > 0 && b3 > 0;
+          };
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.isInsideTriangle = null;
+          }, 50);
+        },
+        ref,
+        ...props,
+        children
+      }
+    ) }) });
+  }
+);
+MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";
+
+export { MenuSubTrigger };

package/dist/esm/packages/react/src/{combobox-trigger/ComboboxTrigger.js → menu-trigger/MenuTrigger.js}

@@ -3,19 +3,20 @@ import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef, useRef } from 'react';
 import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
-import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
+import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
+import { useMenuContext } from '../menu-context/MenuContext.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
 import { useFieldLabelTrigger } from '../use-field-label-trigger/useFieldLabelTrigger.js';
 
-const ComboboxTrigger = forwardRef(
+const MenuTrigger = forwardRef(
   ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
-    const { components, setOpen } = useComboboxContext(
-      "@optiaxiom/react/ComboboxTrigger"
-    );
+    const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
+    const Comp = size === "sm" ? PopoverTrigger : DialogTrigger;
     const buttonRef = useRef(null);
     const ref = useComposedRefs(outerRef, buttonRef);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
     return /* @__PURE__ */ jsx(
-      components.Trigger,
+      Comp,
       {
         "aria-labelledby": labelId,
         asChild: true,
@@ -33,6 +34,6 @@ const ComboboxTrigger = forwardRef(
     );
   }
 );
-ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
+MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-export { ComboboxTrigger };
+export { MenuTrigger };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-CcQI-qaQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-da2koA86.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'},'aee0f8']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1xvc1jl']});
 
 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-BIlp7Els.css';
-import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-BPtAVSY9.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-oXIly_cj.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:'_65v5js',true:'_1apdk5x'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'vyp2gw',true:'_1hdxkn6'}}});
 
 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-BIlp7Els.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.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-BIlp7Els.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-CjfwYd9Q.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-Cnjh6ZE6.css';
-import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-D5cxyXcF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-BkCGiMYb.css';
+import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-Zi5iRND8.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'},'_1153d11']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'nekkti'],variants:{expanded:{false:'_1g7h9l9',true:'_1fzgk6w'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1gkkiih']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'ricilp'],variants:{expanded:{false:'iy0kgr',true:'to5n72'}}});
 
 export { item, label };

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

@@ -12,6 +12,7 @@ import { Tooltip } from '../tooltip/Tooltip.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
+import '../utils/isHoverSupported.js';
 import { label, item } from './NavItem-css.js';
 
 const NavItem = forwardRef(

package/dist/esm/packages/react/src/overlay-listbox/OverlayListbox-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/overlay-listbox/OverlayListbox.css.ts.vanilla-CFW6sooD.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_13qtm32'],variants:{maxH:{xs:'su2idp',sm:'_1uz3p8h',md:'kpy9q6',lg:'m5oglk',full:{}},minW:{'0':{},trigger:'_196yegs'},provider:{'dropdown-menu':'_71xhey',popover:'wb6bgl',popper:'oo752a'}}});
+
+export { listbox };

package/dist/esm/packages/react/src/overlay-listbox/OverlayListbox.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Listbox } from '../listbox/Listbox.js';
+import { Paper } from '../paper/Paper.js';
+import { Transition } from '../transition/Transition.js';
+import { listbox } from './OverlayListbox-css.js';
+
+const OverlayListbox = forwardRef(
+  ({ children, className, maxH, minW, provider = "popover", ...props }, ref) => /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, children: /* @__PURE__ */ jsx(
+    Listbox,
+    {
+      ref,
+      ...listbox({ maxH, minW, provider }, className),
+      ...props,
+      children
+    }
+  ) }) })
+);
+OverlayListbox.displayName = "@optiaxiom/react/OverlayListbox";
+
+export { OverlayListbox };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-xLDa2Hwh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-ZIE8tgBJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'_1ch3nh8']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'drutx3'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'qtifxk']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'rhpcsk']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'fuo7b1'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'e4ivib']});
 
 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-BIlp7Els.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.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-BIlp7Els.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-DKrCo1ZD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-D2bvjE-M.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'},'_18b6ch8'],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'},'_1vmftfb'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

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

@@ -4,12 +4,13 @@ import { theme } from '@optiaxiom/globals';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef, useRef } from 'react';
-import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { ModalProvider } from '../modal-context/ModalContext.js';
+import { OverlayListbox } from '../overlay-listbox/OverlayListbox.js';
 import { usePopoverContext } from '../popover-context/PopoverContext.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
+import '../utils/isHoverSupported.js';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
 
 const PopoverContent = forwardRef(
@@ -26,7 +27,7 @@ const PopoverContent = forwardRef(
         open,
         presence,
         children: /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
-          MenuListbox,
+          OverlayListbox,
           {
             asChild: true,
             onBlur: onReactSelectInputBlur,

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-DJKvvyRC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-BA_AaWWC.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'},'_17wpzqk']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1dtqxyg']});
 
 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-BIlp7Els.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-CjfwYd9Q.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DNCCDGec.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-DNj1iOwo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-ByPjrct_.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-upB5JH7-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'bu2ojk'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'ni8g6q']});
-var input = recipeRuntime({base:'_1y8b4eb'});
-var radio = recipeRuntime({base:'_1rdxo6u'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1ejsrc'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_17k4vhe']});
+var input = recipeRuntime({base:'_20pn64'});
+var radio = recipeRuntime({base:'_5l9it2'});
 
 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-BIlp7Els.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-TCOQpsRY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D2iWt029.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CxLuqyqz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1h55pt5']});
-var search = recipeRuntime({base:'mz15w6'});
+var clear = recipeRuntime({base:[{size:'sm'},'hzymj1']});
+var search = recipeRuntime({base:'_13um1e3'});
 
 export { clear, search };