@optiaxiom/react 1.2.4 → 1.3.0

package/dist/esm/packages/react/src/input/Input.js

@@ -9,6 +9,7 @@ import { InputControl } from '../input-control/InputControl.js';
 import { InputRoot } from '../input-root/InputRoot.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
+import '../utils/isHoverSupported.js';
 import { root, addon, input } from './Input-css.js';
 
 const Input = forwardRef(

package/dist/esm/packages/react/src/input-control/InputControl-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-ByKgnlq8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-Djmx4C5o.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_1kiw9pk',{bg:'transparent',flex:'auto',w:'full'},'_13iimdy','_1g307ml'],variants:{size:{md:{},lg:{},xl:['whj9v9']}}});
+var control = recipeRuntime({base:['yxn2vo',{bg:'transparent',flex:'auto',w:'full'},'jy9nnd','_1ea5ijj'],variants:{size:{md:{},lg:{},xl:['_1na51t4']}}});
 
 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-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 './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-BuhN_n9G.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-Djmx4C5o.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-Cih6Anrm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1yvbuyy']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_11vhwp4']});
 
 export { root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DLP9-s5E.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DQZ0Czao.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'},'_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:{}}}});
+var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_1jxhu22'],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:'upthqw',variants:{variant:{outline:'_75ege7',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-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 './../../../../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/label-menu-button/LabelMenuButton.css.ts.vanilla-C1QpA097.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'space-between'},'ag0ejg']});
+var button = recipeRuntime({base:[{justifyContent:'space-between'},'_10a1w0f']});
 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-CieILHYz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom.ofk66h';
-var reset = 'optiaxiom._1k8mbgv';
+var components = 'optiaxiom._15ugsxe';
+var reset = 'optiaxiom._1wk6g49';
 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-CieILHYz.css';
-import './../../../../assets/src/layout/Layouts.css.ts.vanilla-JGjqW3ul.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/layout/Layouts.css.ts.vanilla-jn7W4Vx_.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1dh401']});
+var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_45vo41']});
 
 export { layout };

package/dist/esm/packages/react/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-C8IGxRpo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-B3y4Cor7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'h18w6i']});
-var link = recipeRuntime({base:['s3cm3h','_1mvq5vp'],variants:{appearance:{'default':'_1uplkzn',inverse:'_1njxenl',subtle:'_7abr7i'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'t1ipl3']});
+var link = recipeRuntime({base:['cewjro','_19yjn8c'],variants:{appearance:{'default':'_1wa6swa',inverse:'bpx0jy',subtle:'_14my6pr'}}});
 
 export { icon, link };

package/dist/esm/packages/react/src/link/Link.js

@@ -8,6 +8,7 @@ import { Cover } from '../cover/Cover.js';
 import { IconUpRightFromSquare } from '../icons/IconUpRightFromSquare.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
+import '../utils/isHoverSupported.js';
 import { link, icon } from './Link-css.js';
 
 const Link = forwardRef(

package/dist/esm/packages/react/src/listbox-checkbox-item/ListboxCheckboxItem-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/listbox-checkbox-item/ListboxCheckboxItem.css.ts.vanilla-DOCfa7Zk.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var checkbox = recipeRuntime({base:[{display:'inline-flex',transition:'opacity'},'_50bgsb'],variants:{visible:{false:{},true:'_1rb62wy'}}});
+
+export { checkbox };

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

@@ -1,24 +1,38 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Checkbox } from '../checkbox/Checkbox.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
 import { ListboxItem } from '../listbox-item/ListboxItem.js';
+import '../utils/conditions.js';
+import '@radix-ui/react-slot';
+import { isHoverSupported } from '../utils/isHoverSupported.js';
+import { checkbox } from './ListboxCheckboxItem-css.js';
 
-const ListboxCheckboxItem = forwardRef(({ addonBefore, icon, ...props }, ref) => {
+const ListboxCheckboxItem = forwardRef(({ addonBefore, icon, onCheckedChange, ...props }, ref) => {
+  const checked = Boolean(
+    props[props["role"] === "option" ? "aria-selected" : "aria-checked"]
+  );
   return /* @__PURE__ */ jsx(
     ListboxItem,
     {
       addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
         /* @__PURE__ */ jsx(
-          Checkbox,
+          Box,
           {
-            checked: Boolean(
-              props[props["role"] === "option" ? "aria-selected" : "aria-checked"]
-            ),
-            pointerEvents: "none",
-            tabIndex: -1
+            onClick: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onCheckedChange?.(true);
+            },
+            ...checkbox({
+              visible: checked || !isHoverSupported || "data-highlighted" in props && props["data-highlighted"] !== void 0
+            }),
+            children: /* @__PURE__ */ jsx(Checkbox, { checked, pointerEvents: "none", tabIndex: -1 })
           }
         ),
         addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CieILHYz.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-f1y8kxy7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-T_bauynn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-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']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1hfjjk0']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1jf4qmn'],variants:{intent:{danger:'_1eyldeb',neutral:'zm7l1o'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'nlbhu']});
 
 export { description, item, title };

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

@@ -12,9 +12,9 @@ import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { isHoverSupported } from '../utils/isHoverSupported.js';
 import { item, title, description } from './ListboxItem-css.js';
 
-const isHoverSupported = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
 const ListboxItem = forwardRef(
   ({
     addonAfter,

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

@@ -1,7 +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 './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-BAisdqe5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['rx7r0j'],variants:{active:{false:{},true:'_1cleqnb'}}});
+var indicator = recipeRuntime({base:['oxed6l'],variants:{active:{false:{},true:'cykdef'}}});
 
 export { indicator };

package/dist/esm/packages/react/src/listbox-itemized/ListboxItemized.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect, Fragment } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Listbox } from '../listbox/Listbox.js';
+import { ListboxEmpty } from '../listbox-empty/ListboxEmpty.js';
+import { ListboxVirtualized } from '../listbox-virtualized/ListboxVirtualized.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { useEffectEvent } from '../use-event/useEffectEvent.js';
+
+const VIRTUALIZE_THRESHOLD = 50;
+const ListboxItemized = forwardRef(
+  ({
+    children,
+    empty = "No results found.",
+    highlightedItem,
+    items,
+    itemToKey,
+    loading,
+    onPlacedChange,
+    placed,
+    ...props
+  }, ref) => {
+    const onPlacedChangeStable = useEffectEvent(onPlacedChange ?? (() => {
+    }));
+    useEffect(() => {
+      requestAnimationFrame(() => onPlacedChangeStable(true));
+      return () => onPlacedChangeStable(false);
+    }, [onPlacedChangeStable]);
+    return /* @__PURE__ */ jsx(
+      Listbox,
+      {
+        asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD && placed,
+        ref,
+        tabIndex: -1,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? placed && /* @__PURE__ */ jsx(
+          ListboxVirtualized,
+          {
+            highlightedItem,
+            items,
+            children
+          }
+        ) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsx(Fragment, { children: children(item, index) }, itemToKey(item))) : /* @__PURE__ */ jsx(ListboxEmpty, { children: empty }) : items.length > 0 ? children : /* @__PURE__ */ jsx(ListboxEmpty, { children: empty })
+      }
+    );
+  }
+);
+ListboxItemized.displayName = "@optiaxiom/react/ListboxItemized";
+
+export { ListboxItemized };

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

@@ -65,13 +65,13 @@ const ListboxVirtualized = forwardRef(({ children, highlightedItem, items, ...pr
         paddingBottom,
         paddingTop
       },
-      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxs(
+      children: virtualItems.map((virtualItem) => /* @__PURE__ */ jsxs(
         Box,
         {
           "data-index": virtualItem.index,
           ref: rowVirtualizer.measureElement,
           children: [
-            children(items[virtualItem.index]),
+            children(items[virtualItem.index], virtualItem.index),
             virtualItem.index < items.length - 1 && /* @__PURE__ */ jsx(Box, { pb: "2" })
           ]
         },

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

@@ -0,0 +1,138 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Command } from '../command/Command.js';
+import { resolveItemProperty } from '../command-context/CommandContext.js';
+import { Dialog } from '../dialog/Dialog.js';
+import { MenuProvider } from '../menu-context/MenuContext.js';
+import { MenuPopover } from '../menu-popover/MenuPopover.js';
+import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
+
+function Menu({
+  children,
+  defaultInputVisible,
+  defaultOpen = false,
+  inputValue: inputValueProp,
+  onInputValueChange,
+  onOpenChange,
+  open: openProp,
+  options: optionsProp,
+  placeholder = "Filter...",
+  size: sizeProp,
+  ...props
+}) {
+  const size = useResponsiveMatches({
+    base: "lg",
+    sm: sizeProp ?? "sm"
+  });
+  const Comp = size === "sm" ? MenuPopover : Dialog;
+  const [open, setOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const [inputValue, setInputValue] = useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
+  });
+  const [activePath, setActivePath] = useState([]);
+  useEffect(() => {
+    if (inputValue && size === "sm") {
+      setActivePath((path) => path.length ? [] : path);
+    }
+  }, [inputValue, size]);
+  useEffect(() => {
+    if (size === "sm") {
+      if (!open) {
+        setActivePath((path) => path.length ? [] : path);
+      }
+    } else {
+      if (open) {
+        setActivePath((path) => path.length ? [] : path);
+      }
+    }
+  }, [open, size]);
+  const inputRef = useRef(null);
+  const options = useMemo(
+    () => activePath.length && size === "lg" ? optionsProp[activePath[0]].subOptions ?? [] : size === "sm" ? optionsProp.map((option) => ({
+      ...option,
+      label: option.subOptions ? resolveItemProperty(option.label, { inputValue }).replace(
+        "\u2026",
+        ""
+      ) : resolveItemProperty(option.label, { inputValue })
+    })) : optionsProp,
+    [activePath, inputValue, optionsProp, size]
+  );
+  const hasSelectableItem = useMemo(
+    () => options.some((item) => "selected" in item),
+    [options]
+  );
+  const inputDefaultVisibleRef = useRef(hasSelectableItem);
+  inputDefaultVisibleRef.current = hasSelectableItem || defaultInputVisible || false;
+  const [inputVisible, setInputVisible] = useState(
+    inputDefaultVisibleRef.current
+  );
+  useEffect(() => {
+    if (inputValue) {
+      setInputVisible(true);
+    }
+  }, [inputValue]);
+  useEffect(() => {
+    if (open) {
+      setInputVisible(inputDefaultVisibleRef.current);
+    }
+  }, [activePath, open]);
+  return /* @__PURE__ */ jsx(Comp, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
+    MenuProvider,
+    {
+      activePath,
+      inputRef,
+      inputVisible,
+      onSelect: (item, { close }) => {
+        item.execute?.({ inputValue });
+        if (typeof openProp === "undefined" && close) {
+          setOpen(false);
+        }
+      },
+      open,
+      placeholder,
+      setActivePath,
+      setOpen,
+      size,
+      children: /* @__PURE__ */ jsx(
+        Command,
+        {
+          inputValue,
+          onHover: (item) => {
+            if (item.subOptions?.length) {
+              const index = options.indexOf(item);
+              setActivePath((path) => !path.includes(index) ? [index] : path);
+            } else {
+              setActivePath((path) => path.length ? [] : path);
+            }
+          },
+          onInputValueChange: setInputValue,
+          onSelect: (item, { close }) => {
+            if (item.subOptions?.length) {
+              const index = options.indexOf(item);
+              setActivePath((path) => !path.includes(index) ? [index] : path);
+            } else {
+              item.execute?.({ inputValue });
+              if (typeof openProp === "undefined" && close) {
+                setOpen(false);
+              }
+            }
+          },
+          options,
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+}
+Menu.displayName = "@optiaxiom/react/Menu";
+
+export { Menu };

package/dist/esm/packages/react/src/menu-checkbox-item/MenuCheckboxItem.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandItem } from '../command-item/CommandItem.js';
+import { ListboxCheckboxItem } from '../listbox-checkbox-item/ListboxCheckboxItem.js';
+
+const MenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
+  const Comp = props.item.link ? "a" : "div";
+  const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
+  return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
+    ListboxCheckboxItem,
+    {
+      addonBefore: props.item.addon,
+      asChild: true,
+      description: props.item.description,
+      onCheckedChange: () => props.item.execute?.({ inputValue }),
+      children: /* @__PURE__ */ jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+    }
+  ) });
+});
+MenuCheckboxItem.displayName = "@optiaxiom/react/MenuCheckboxItem";
+
+export { MenuCheckboxItem };

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import '../field-context/FieldContext.js';
+import { useFieldContext } from '../field-context/useFieldContext.js';
+import { useMenuContext } from '../menu-context/MenuContext.js';
+import { MenuDialogContent } from '../menu-dialog-content/MenuDialogContent.js';
+import { MenuInput } from '../menu-input/MenuInput.js';
+import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { MenuPopoverContent } from '../menu-popover-content/MenuPopoverContent.js';
+import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
+
+const MenuContent = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { labelId } = useFieldContext();
+    const { inputVisible, placeholder, size } = useMenuContext(
+      "@optiaxiom/react/MenuContent"
+    );
+    const { empty, loading } = useCommandContext(
+      "@optiaxiom/react/MenuContent"
+    );
+    const Comp = size === "sm" ? MenuPopoverContent : MenuDialogContent;
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        "aria-labelledby": labelId,
+        overflow: "hidden",
+        p: size === "sm" ? "4" : "0",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsx(MenuInput, { placeholder }) }),
+          /* @__PURE__ */ jsx(
+            MenuListbox,
+            {
+              empty,
+              loading,
+              p: size === "lg" ? "6" : "0",
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MenuContent.displayName = "@optiaxiom/react/MenuContent";
+
+export { MenuContent };

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

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

package/dist/esm/packages/react/src/menu-dialog-content/MenuDialogContent.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { forwardRef } from 'react';
+import { DialogContent } from '../dialog-content/DialogContent.js';
+import { DialogHeader } from '../dialog-header/DialogHeader.js';
+
+const MenuDialogContent = forwardRef(
+  ({
+    align: _align,
+    "aria-label": ariaLabel,
+    children,
+    side: _side,
+    sideOffset: _sideOffset,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(DialogContent, { ref, transitionType: "pop", ...props, children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsx(DialogHeader, { children: ariaLabel }) }),
+      children
+    ] });
+  }
+);
+MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
+
+export { MenuDialogContent };

package/dist/esm/packages/react/src/menu-input/MenuInput-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-9E2kDjKk.css';
+import './../../../../assets/src/menu-input/MenuInput.css.ts.vanilla-CrjgCTO4.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'f6257q']}}});
+
+export { input };

package/dist/esm/packages/react/src/{combobox-input/ComboboxInput.js → menu-input/MenuInput.js}

@@ -1,19 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { CommandInput } from '../command-input/CommandInput.js';
+import { useMenuContext } from '../menu-context/MenuContext.js';
+import { input } from './MenuInput-css.js';
 
-const ComboboxInput = forwardRef(
-  (props, ref) => {
+const MenuInput = forwardRef(
+  ({ className, ...props }, outerRef) => {
+    const { inputRef, open, size } = useMenuContext(
+      "@optiaxiom/react/MenuInput"
+    );
     const { downshift, highlightedItem } = useCommandContext(
-      "@optiaxiom/react/ComboboxInput"
+      "@optiaxiom/react/MenuInput"
     );
-    const { open } = useComboboxContext("@optiaxiom/react/ComboboxInput");
+    const ref = useComposedRefs(inputRef, outerRef);
     const [minWidth, setMinWidth] = useState(160);
     const containerRef = useRef(null);
     useEffect(() => {
@@ -29,22 +34,33 @@ const ComboboxInput = forwardRef(
       CommandInput,
       {
         htmlSize: 1,
-        m: "4",
         onKeyDown: (event) => {
           if (!(event.target instanceof HTMLInputElement)) {
             return;
           }
-          if (event.key === " " && !event.target.value) {
+          if (event.target.value) {
+            return;
+          }
+          if (!highlightedItem) {
+            return;
+          }
+          const subOptions = highlightedItem.subOptions;
+          if (event.key === " ") {
+            event.preventDefault();
+            downshift.selectItem(highlightedItem);
+          } else if (event.key === "ArrowRight" && subOptions?.length) {
             event.preventDefault();
             downshift.selectItem(highlightedItem);
           }
         },
         ref,
+        size: size === "sm" ? "md" : "xl",
+        ...input({ size }, className),
         ...props
       }
     ) });
   }
 );
-ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
+MenuInput.displayName = "@optiaxiom/react/MenuInput";
 
-export { ComboboxInput };
+export { MenuInput };

package/dist/esm/packages/react/src/menu-item/MenuItem.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 { ListboxItem } from '../listbox-item/ListboxItem.js';
+
+const MenuItem = forwardRef(
+  ({ children, ...props }, ref) => {
+    const Comp = props.item.link ? "a" : "div";
+    return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
+      ListboxItem,
+      {
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        children: /* @__PURE__ */ jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+      }
+    ) });
+  }
+);
+MenuItem.displayName = "@optiaxiom/react/MenuItem";
+
+export { MenuItem };