@optiaxiom/react 1.2.4 → 1.3.0

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/{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,40 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { DropdownMenu } from '@radix-ui/react-dropdown-menu';
+import { useState, useRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { useMenuContext } from '../menu-context/MenuContext.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';
+
+function MenuSub({ children, item }) {
+  const { activePath, setActivePath } = useMenuContext(
+    "@optiaxiom/react/MenuSub"
+  );
+  const { items } = useCommandContext("@optiaxiom/react/MenuSub");
+  const index = items.indexOf(item);
+  const [presence, setPresence] = useState();
+  const contentRef = useRef(null);
+  return /* @__PURE__ */ jsx(
+    MenuSubProvider,
+    {
+      contentRef,
+      open: activePath[0] === index,
+      presence,
+      setOpen: () => {
+        setActivePath(
+          (path) => path.at(-1) === index ? path.slice(0, -1) : path
+        );
+      },
+      setPresence,
+      children: children ?? /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, open: activePath[0] === index || presence, 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,154 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { DropdownMenuPortal, DropdownMenuContent, DropdownMenuCheckboxItem, DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
+import { forwardRef, Fragment } from 'react';
+import { useCommandContext, resolveItemProperty } from '../command-context/CommandContext.js';
+import { ListboxCheckboxItem } from '../listbox-checkbox-item/ListboxCheckboxItem.js';
+import { ListboxItem } from '../listbox-item/ListboxItem.js';
+import { ListboxLabel } from '../listbox-label/ListboxLabel.js';
+import { ListboxRadioItem } from '../listbox-radio-item/ListboxRadioItem.js';
+import { useMenuContext } from '../menu-context/MenuContext.js';
+import { useMenuSubContext } from '../menu-sub-context/MenuSubContext.js';
+import { OverlayListbox } from '../overlay-listbox/OverlayListbox.js';
+import { Separator } from '../separator/Separator.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
+import { content } from './SelectContent-css.js';
+
+const MenuSubContent = forwardRef(
+  ({ align = "start", children, className, item, side = "right", ...props }, outerRef) => {
+    const { activePath, inputRef, onSelect, setOpen } = useMenuContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const { inputValue, setInputValue } = useCommandContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const {
+      contentRef,
+      open,
+      setOpen: setSubOpen,
+      setPresence
+    } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const ref = useComposedRefs(contentRef, outerRef);
+    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(TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsx(DropdownMenuPortal, { forceMount: true, children: /* @__PURE__ */ jsx(
+      OverlayListbox,
+      {
+        asChild: true,
+        maxH: "sm",
+        minW: "trigger",
+        ref,
+        ...content({}, className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          DropdownMenuContent,
+          {
+            align,
+            alignOffset: -4,
+            loop: true,
+            onCloseAutoFocus: (event) => {
+              if (activePath.length) {
+                return;
+              }
+              event.preventDefault();
+              inputRef.current?.focus();
+            },
+            onEscapeKeyDown: () => {
+              setOpen(false);
+            },
+            onKeyDown: (event) => {
+              if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                setSubOpen(false);
+              } else if (/^[A-Za-z0-9]$/.test(event.key)) {
+                event.preventDefault();
+                event.stopPropagation();
+                inputRef.current?.focus();
+                setInputValue(event.key);
+              }
+            },
+            side,
+            sideOffset: 0,
+            children: children ?? item.subOptions?.map((item2, index) => {
+              const type = "selected" in item2 ? item2.multi ? "checkbox" : "radio" : "action";
+              let element;
+              switch (type) {
+                case "action":
+                  element = /* @__PURE__ */ jsx(
+                    DropdownMenuItem,
+                    {
+                      asChild: true,
+                      onSelect: () => onSelect(item2, { close: true }),
+                      children: /* @__PURE__ */ jsx(ListboxItem, { addonBefore: item2.addon, children: resolveItemProperty(item2.label, { inputValue }) })
+                    }
+                  );
+                  break;
+                case "checkbox":
+                  element = /* @__PURE__ */ jsx(
+                    DropdownMenuCheckboxItem,
+                    {
+                      asChild: true,
+                      checked: resolveItemProperty(item2.selected),
+                      onKeyDown: (event) => {
+                        if (event.key === " ") {
+                          event.preventDefault();
+                          onSelect(item2, { close: false });
+                        }
+                      },
+                      onSelect: () => onSelect(item2, { close: true }),
+                      children: /* @__PURE__ */ jsx(
+                        ListboxCheckboxItem,
+                        {
+                          addonBefore: item2.addon,
+                          onCheckedChange: () => onSelect(item2, { close: false }),
+                          children: resolveItemProperty(item2.label, { inputValue })
+                        }
+                      )
+                    }
+                  );
+                  break;
+                case "radio":
+                  element = /* @__PURE__ */ jsx(
+                    DropdownMenuCheckboxItem,
+                    {
+                      asChild: true,
+                      checked: resolveItemProperty(item2.selected),
+                      onKeyDown: (event) => {
+                        if (event.key === " ") {
+                          event.preventDefault();
+                          onSelect(item2, { close: false });
+                        }
+                      },
+                      onSelect: () => onSelect(item2, { close: true }),
+                      children: /* @__PURE__ */ jsx(ListboxRadioItem, { addonBefore: item2.addon, children: resolveItemProperty(item2.label, { inputValue }) })
+                    }
+                  );
+                  break;
+              }
+              const group = item2.group;
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                shouldShowSeparator(group) && /* @__PURE__ */ jsx(Separator, {}),
+                shouldShowGroup(group) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.name }),
+                element
+              ] }, index);
+            })
+          }
+        )
+      }
+    ) }) });
+  }
+);
+MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
+
+export { MenuSubContent };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/menu-sub-content/SelectContent.css.ts.vanilla-DCAKMvfS.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:['fy6jej']});
+
+export { content };

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,65 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
+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';
+
+const MenuSubTrigger = forwardRef(
+  ({ children, item, onPointerDown, ...props }, ref) => {
+    const { downshift, pauseInteractionRef } = useCommandContext(
+      "@optiaxiom/react/MenuSubTrigger"
+    );
+    const { contentRef, open } = useMenuSubContext(
+      "@optiaxiom/react/MenuSubTrigger"
+    );
+    return /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FilteredSlot, { exclude: "disabled", children: /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}),
+        item,
+        onPointerDown: (event) => {
+          onPointerDown?.(event);
+          if (open) {
+            event.preventDefault();
+          }
+        },
+        onPointerEnter: () => {
+          downshift.selectItem(item);
+        },
+        onPointerLeave: (event) => {
+          const box = contentRef.current?.getBoundingClientRect();
+          if (!box) {
+            return;
+          }
+          pauseInteractionRef.current.triangle = {
+            bottom: {
+              x: box.left,
+              y: box.top + box.height
+            },
+            side: {
+              x: event.clientX + 10 * (box.left > event.clientX ? -1 : 1),
+              y: event.clientY
+            },
+            top: {
+              x: box.left,
+              y: box.top
+            }
+          };
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.triangle = 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-CieILHYz.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-CZU_vD75.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-D0WNNLdw.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'},'_185p2hp']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'izsqg1']});
 
 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-CieILHYz.css';
-import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-CaBogrTp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-Bif2yyXY.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:'_1anaf27',true:'ya4h72'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_1mt1i5q',true:'_4ipbs5'}}});
 
 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-CieILHYz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.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-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 './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BuhN_n9G.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-Cs-zXoZj.css';
+import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-zB0o2LeN.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'},'_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'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_1xm8id']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_1ia9ynw'],variants:{expanded:{false:'r695ak',true:'_11nbii2'}}});
 
 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-9E2kDjKk.css';
+import './../../../../assets/src/overlay-listbox/OverlayListbox.css.ts.vanilla-chiiITqE.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'wew7ix'],variants:{maxH:{xs:'wovu5i',sm:'sgyzin',md:'_18c7e0g',lg:'etqbx3',full:{}},minW:{'0':{},trigger:'jk2h68'},provider:{'dropdown-menu':'_8oh0fe',popover:'_1027ieb',popper:'vje6bw'}}});
+
+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-CieILHYz.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-5Dnur9Ag.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-CrrHJq3H.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-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']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'pwm3b3']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1n2e9ia'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'wk1s9r']});
 
 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-CieILHYz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.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-CieILHYz.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-CUEhZKLa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-Dt9oEgDm.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'},'_17hfz4t'],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'},'tdfzjm'],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-CieILHYz.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-DT4ltv0F.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-BFKb9lu8.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'},'_1m5dx7q']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_13xqgbu']});
 
 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-CieILHYz.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Dex_upXA.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CU81AtIf.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-DxL3bcdz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BuhN_n9G.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BD9DPgTh.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-MkXQcu00.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1im2bfp'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'ed3iue']});
-var input = recipeRuntime({base:'azn25b'});
-var radio = recipeRuntime({base:'_9kd979'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1ybljh6'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'tfv6hy']});
+var input = recipeRuntime({base:'_13ab1u9'});
+var radio = recipeRuntime({base:'l3qc26'});
 
 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-CieILHYz.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-BZ7nD-Os.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CvWIeABv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'xk9q3l']});
-var search = recipeRuntime({base:'_1lnqq8c'});
+var clear = recipeRuntime({base:[{size:'sm'},'qaj927']});
+var search = recipeRuntime({base:'vf1p8a'});
 
 export { clear, search };