@optiaxiom/react 1.5.4 → 1.5.6

package/dist/cjs/unstable.js

@@ -3,99 +3,88 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var IconMagnifyingGlass = require('./IconMagnifyingGlass-hmmKrmr2.js');
+var IconMagnifyingGlass = require('./IconMagnifyingGlass-CnD1WAmi.js');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var downshift = require('downshift');
 var reactContext = require('@radix-ui/react-context');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
-require('./assets/src/layers/layers.css.ts.vanilla-3kSpbNl5.css');
-require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-B4CE23FH.css');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-Bg2YlhiL.css');
-require('./assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-DNdX_o65.css');
-require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-8XG07EDw.css');
-var reactId = require('@radix-ui/react-id');
-require('./assets/src/cover/Cover.css.ts.vanilla-Bvm4KJcN.css');
-require('./assets/src/card/Card.css.ts.vanilla-C3iyrQhz.css');
 var clsx = require('clsx');
-require('./assets/src/card/CardCheckbox.css.ts.vanilla-BgDeBd1m.css');
-require('./assets/src/card/CardHeader.css.ts.vanilla-BFTVhJxW.css');
-require('./assets/src/card/CardPreview.css.ts.vanilla-kiMDFXEr.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-DDa5-u9M.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BBuNcCvH.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-DhjR3-Ki.css');
+require('./assets/src/layers/layers.css.ts.vanilla-nFVu-ZDm.css');
+require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-CBMQbVjz.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-B8hZrgBR.css');
+var reactId = require('@radix-ui/react-id');
+require('./assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-DihBOcSG.css');
+require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-LObQFiHg.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-Chfa40d3.css');
+require('./assets/src/card/Card.css.ts.vanilla-BnTVX_ll.css');
+require('./assets/src/card/CardCheckbox.css.ts.vanilla-C5OxiMY7.css');
+require('./assets/src/card/CardHeader.css.ts.vanilla-BEu3KTs9.css');
+require('./assets/src/card/CardPreview.css.ts.vanilla-Bne_Cil5.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-DRXADYWx.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-C3SYRm21.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-DeyoFTth.css');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/pill/Pill.css.ts.vanilla-B2Is7XuO.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-CoNYBuq7.css');
 var helpers = require('@dnd-kit/helpers');
 var react = require('@dnd-kit/react');
-require('./assets/src/sortable/Sortable.css.ts.vanilla-BHHUv1C2.css');
-require('./assets/src/sortable/SortableHandle.css.ts.vanilla-CtiUCath.css');
+require('./assets/src/sortable/SortableHandle.css.ts.vanilla-DA78exg7.css');
 var sortable = require('@dnd-kit/react/sortable');
-require('./assets/src/sortable/SortableItem.css.ts.vanilla-Pm6YeT8x.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-Jr6bfht3.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-B6SRciqg.css');
-require('./assets/src/table/Table.css.ts.vanilla-CjxtcFrD.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-DfZSn9rQ.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-dbNPxr0e.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-CStotefy.css');
-require('./assets/src/table/TableHeader.css.ts.vanilla-nw3IAq_1.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-B5htcVwe.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-M05uOsbn.css');
+require('./assets/src/sortable/SortableItem.css.ts.vanilla-BrI_in6l.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CTpvRnOH.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-MVg4KWkB.css');
+require('./assets/src/table/Table.css.ts.vanilla-lSRIADtp.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-CWp8lWOU.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-CBKKEaC5.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-CeWfRgVl.css');
+require('./assets/src/table/TableHeader.css.ts.vanilla-Cf1gCgyq.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-CAlBCCjl.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BTuZhwZP.css');
 require('react-day-picker');
 require('@radix-ui/react-popper');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/calendar/Calendar.css.ts.vanilla-Bb2ZrqYd.css');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-B5fdgClO.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-DG7xjeUf.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-wZs9ViPZ.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-tCmBEyVy.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-Jr6bfht3.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-DB66dcP2.css');
+require('./assets/src/calendar/Calendar.css.ts.vanilla-IwZALI-5.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-W_-G7sxr.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla---_HwSGY.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-DeOuKG-S.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-Dms42-lh.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CTpvRnOH.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-nILnXZ3Y.css');
 require('@radix-ui/react-popover');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-Jr6bfht3.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-Brbn2K4g.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-Mv1w52P2.css');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-CRZnokk5.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BrSi_uD3.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-Dlhs2Jtu.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-cTJvWDIo.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-0fMBJUjO.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CTpvRnOH.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-DlAf6ou-.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-xLbTJMF7.css');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-B3QhbcHH.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DGSslDKK.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-D0mT5jvr.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-vM0HoL84.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-fA-TvUUn.css');
 require('@tanstack/react-virtual');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-nEW92Qgm.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-H9Rg-y-9.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-CJbzROcR.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-D_DPygje.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-f4Lcvjlm.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-DmgdSSTi.css');
 require('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-B3YkndCa.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CTpvRnOH.css');
 require('@vanilla-extract/dynamic');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-BLNU-7s8.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-BqGhLgoy.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
 require('@radix-ui/react-portal');
-require('./assets/src/dialog/DialogContent.css.ts.vanilla-Bmlq47OG.css');
-require('./assets/src/text/Text.css.ts.vanilla-d5Zps1qt.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-B1B2Yxl2.css');
+require('./assets/src/dialog/DialogFooter.css.ts.vanilla-B49qslcR.css');
+require('./assets/src/text/Text.css.ts.vanilla-BnRtrt_K.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-C9YGe-Hw.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-D4RtPpB9.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-CDRGTzwI.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-Dyb6gK8o.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-8LlHNuJj.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-D8nx5Iyi.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-30NKybOr.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-BjHegTjo.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-BaP85P-1.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-UmWuNxXw.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-BW209bzp.css');
-require('./assets/src/box/Box.css.ts.vanilla-zMAcUzMW.css');
-require('./assets/src/link/Link.css.ts.vanilla-CZWAIa03.css');
-
-const useFocusBookmark = (ref) => {
-  React.useEffect(() => {
-    IconMagnifyingGlass.bookmarks.current.push(ref);
-    return () => {
-      IconMagnifyingGlass.bookmarks.current = IconMagnifyingGlass.bookmarks.current.filter(
-        (bookmark) => bookmark !== ref
-      );
-    };
-  }, [ref]);
-};
+require('./assets/src/sprinkles/properties.css.ts.vanilla-4vGIXbtI.css');
+require('./assets/src/box/Box.css.ts.vanilla-nTyVom-Q.css');
+require('./assets/src/link/Link.css.ts.vanilla-CgkjgE-x.css');
 
 const keyNameMap = {
   " ": "space",
@@ -279,7 +268,7 @@ function Command({
     prop: inputValueProp
   });
   const items = useCommandItems({ inputValue, options });
-  const [highlightedIndex, setHighlightedIndex, placed] = IconMagnifyingGlass.usePortalPatch(
+  const [highlightedIndex, setHighlightedIndex] = IconMagnifyingGlass.useHighlightedIndex(
     enabled,
     () => items.filter((item) => "selected" in item).length > items.length / 2 ? items.findIndex(
       (item) => !resolveItemProperty(item.disabledReason) && resolveItemProperty(item.selected) && !item.multi
@@ -294,15 +283,16 @@ function Command({
     highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
     inputValue,
     isItemDisabled: (item) => Boolean(resolveItemProperty(item?.disabledReason)),
-    isOpen: placed,
+    isOpen: !!enabled,
     items,
     itemToString: (item) => item !== null ? resolveItemProperty(item.label, { inputValue }) : "",
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
       setHighlightedIndex(highlightedIndex2);
-      const item = items[highlightedIndex2];
-      const hasSubOptions = item && (typeof item.subOptions === "function" || !!item.subOptions?.length);
-      if (highlightedIndex2 !== -1 && (!hasSubOptions || type === downshift.useCombobox.stateChangeTypes.ItemMouseMove)) {
-        onHover?.(items[highlightedIndex2]);
+      if (highlightedIndex2 !== -1) {
+        onHover?.(
+          items[highlightedIndex2],
+          type === downshift.useCombobox.stateChangeTypes.FunctionSetHighlightedIndex || type === downshift.useCombobox.stateChangeTypes.ItemMouseMove
+        );
       }
     },
     onSelectedItemChange({ selectedItem, type }) {
@@ -371,6 +361,7 @@ const CommandInput = React.forwardRef(
         htmlSize: 1,
         size,
         ...downshift.getInputProps({
+          "aria-label": props.placeholder,
           ref,
           ...props,
           onBlur: (event) => {
@@ -535,15 +526,24 @@ CommandItem.displayName = "@optiaxiom/react/CommandItem";
 
 const CommandListbox = React.forwardRef(
   ({ children, size, ...props }, ref) => {
-    const { downshift, highlightedItem, inputValue, items } = useCommandContext(
-      "@optiaxiom/react/CommandListbox"
-    );
+    const {
+      downshift,
+      highlightedItem,
+      highlightedItemRef,
+      inputValue,
+      items
+    } = useCommandContext("@optiaxiom/react/CommandListbox");
     return /* @__PURE__ */ jsxRuntime.jsx(
       IconMagnifyingGlass.ListboxItemized,
       {
         highlightedItem,
         items,
         itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
+        onPlacedChange: (placed) => {
+          if (placed && highlightedItemRef.current) {
+            highlightedItemRef.current.scrollIntoView({ block: "nearest" });
+          }
+        },
         size,
         ...downshift.getMenuProps({ ref, ...props }),
         children
@@ -614,6 +614,7 @@ function Menu({
   }, [open, size]);
   const contentRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const itemRef = React.useRef(null);
   const triggerRef = React.useRef(null);
   const options = React.useMemo(
     () => size === "sm" ? optionsProp.map((option) => ({
@@ -680,14 +681,15 @@ function Menu({
       setActiveItemStack,
       setOpen,
       size,
+      triggerRef,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Command,
         {
           enabled: open ? activeItemStack.length + 1 : false,
           inputValue,
-          onHover: (item) => {
+          onHover: (item, pointer) => {
             setSubMenuOpen(
-              typeof item.subOptions === "function" || !!item.subOptions?.length
+              pointer && (typeof item.subOptions === "function" || !!item.subOptions?.length)
             );
           },
           onInputValueChange: setInputValue,
@@ -712,9 +714,9 @@ function Menu({
             {
               contentRef,
               inputRef,
+              itemRef,
               open: subMenuOpen,
               setOpen: setSubMenuOpen,
-              triggerRef,
               children
             }
           )
@@ -725,7 +727,7 @@ function Menu({
 }
 Menu.displayName = "@optiaxiom/react/Menu";
 
-var content$1 = IconMagnifyingGlass.recipeRuntime({base:'_1vtzzea'});
+var content$1 = IconMagnifyingGlass.recipeRuntime({base:'bptsto'});
 
 const MenuDialogContent = React.forwardRef(
   ({
@@ -737,15 +739,35 @@ const MenuDialogContent = React.forwardRef(
     sideOffset: _sideOffset,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.DialogContent, { ref, ...content$1({}, className), ...props, children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.DialogHeader, { children: ariaLabel }) })
-    ] });
+    const { labelId: fieldLabelId } = IconMagnifyingGlass.useFieldContext(
+      "@optiaxiom/react/MenuDialogContent"
+    );
+    const { triggerRef } = useMenuContext("@optiaxiom/react/MenuDialogContent");
+    const labelId = React.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      IconMagnifyingGlass.DialogContent,
+      {
+        "aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
+        ref,
+        ...content$1({}, className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: labelId, children: ariaLabel || "Menu" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.DialogHeader,
+            {
+              children: "Menu"
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
 MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input$1 = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1ecx42x']}}});
+var input$1 = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'h1krkg']}}});
 
 const MenuInput = React.forwardRef(
   ({ className, onKeyDown, ...props }, outerRef) => {
@@ -756,7 +778,6 @@ const MenuInput = React.forwardRef(
       "@optiaxiom/react/MenuInput"
     );
     const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
-    useFocusBookmark(inputRef);
     const [minWidth, setMinWidth] = React.useState(160);
     const containerRef = React.useRef(null);
     React.useEffect(() => {
@@ -852,14 +873,11 @@ const MenuRadioItem = React.forwardRef(
 MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
 
 const MenuSubInput = React.forwardRef(
-  ({ onKeyDown, ...props }, outerRef) => {
+  ({ onKeyDown, ...props }, ref) => {
     const { downshift, highlightedItem } = useCommandContext(
       "@optiaxiom/react/MenuSubInput"
     );
     const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuSubInput");
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    useFocusBookmark(innerRef);
     return /* @__PURE__ */ jsxRuntime.jsx(
       CommandInput,
       {
@@ -892,7 +910,7 @@ const MenuSubInput = React.forwardRef(
 MenuSubInput.displayName = "@optiaxiom/react/MenuSubInput";
 
 const MenuSubContent = React.forwardRef(
-  ({ align = "start", children, side = "right", ...props }, outerRef) => {
+  ({ align = "start", side = "right", ...props }, outerRef) => {
     const { onSelect, setOpen: setRootMenuOpen } = useMenuContext(
       "@optiaxiom/react/MenuSubContent"
     );
@@ -904,11 +922,12 @@ const MenuSubContent = React.forwardRef(
     const {
       contentRef: parentContentRef,
       inputRef: parentInputRef,
-      triggerRef: parentTriggerRef
+      itemRef: parentItemRef
     } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
     const { open, presence } = IconMagnifyingGlass.usePopoverContext(
       "@optiaxiom/react/MenuSubContent"
     );
+    const labelId = reactId.useId();
     const ref = reactComposeRefs.useComposedRefs(parentContentRef, outerRef);
     const [inputValue, setInputValue] = React.useState("");
     const options = React.useMemo(
@@ -917,7 +936,7 @@ const MenuSubContent = React.forwardRef(
     );
     const contentRef = React.useRef(null);
     const inputRef = React.useRef(null);
-    const triggerRef = React.useRef(null);
+    const itemRef = React.useRef(null);
     const [subMenuOpen, setSubMenuOpen] = React.useState(false);
     React.useEffect(() => {
       if (!open) {
@@ -934,12 +953,13 @@ const MenuSubContent = React.forwardRef(
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverAnchor, { virtualRef: parentTriggerRef }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverAnchor, { virtualRef: parentItemRef }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
         IconMagnifyingGlass.PopoverContent,
         {
           align,
           alignOffset: item.subOptionsInputVisible ? -46 : -4,
+          "aria-labelledby": clsx(parentItemRef.current?.id, labelId),
           onCloseAutoFocus: (event) => {
             event.preventDefault();
             parentInputRef.current?.focus();
@@ -971,51 +991,54 @@ const MenuSubContent = React.forwardRef(
           side,
           sideOffset: 0,
           ...props,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(
-            Command,
-            {
-              enabled: true,
-              inputValue,
-              onHover: (item2) => {
-                setSubMenuOpen(
-                  typeof item2.subOptions === "function" || !!item2.subOptions?.length
-                );
-              },
-              onInputValueChange: (inputValue2) => {
-                if (item.subOptionsInputVisible) {
-                  setInputValue(inputValue2);
-                  return;
-                }
-                parentInputRef.current?.focus();
-                setParentInputValue(inputValue2);
-              },
-              onSelect: (item2, { dismiss }) => {
-                if (typeof item2.subOptions === "function" || item2.subOptions?.length) {
-                  setSubMenuOpen(true);
-                } else {
-                  onSelect(item2, { dismiss });
-                }
-              },
-              options,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubInput, { ref: inputRef }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  MenuSubProvider,
-                  {
-                    contentRef,
-                    inputRef,
-                    open: subMenuOpen,
-                    setOpen: setSubMenuOpen,
-                    triggerRef,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: labelId, children: "Submenu" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Command,
+              {
+                enabled: true,
+                inputValue,
+                onHover: (item2, pointer) => {
+                  setSubMenuOpen(
+                    pointer && (typeof item2.subOptions === "function" || !!item2.subOptions?.length)
+                  );
+                },
+                onInputValueChange: (inputValue2) => {
+                  if (item.subOptionsInputVisible) {
+                    setInputValue(inputValue2);
+                    return;
                   }
-                )
-              ]
-            },
-            item.key ?? resolveItemProperty(item.label, {
-              inputValue: parentInputValue
-            })
-          )
+                  parentInputRef.current?.focus();
+                  setParentInputValue(inputValue2);
+                },
+                onSelect: (item2, { dismiss }) => {
+                  if (typeof item2.subOptions === "function" || item2.subOptions?.length) {
+                    setSubMenuOpen(true);
+                  } else {
+                    onSelect(item2, { dismiss });
+                  }
+                },
+                options,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubInput, { placeholder: "Filter...", ref: inputRef }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    MenuSubProvider,
+                    {
+                      contentRef,
+                      inputRef,
+                      itemRef,
+                      open: subMenuOpen,
+                      setOpen: setSubMenuOpen,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+                    }
+                  )
+                ]
+              },
+              item.key ?? resolveItemProperty(item.label, {
+                inputValue: parentInputValue
+              })
+            )
+          ]
         }
       )
     ] });
@@ -1035,7 +1058,7 @@ const MenuSubTrigger = React.forwardRef(
   }, outerRef) => {
     const { downshift, enabled, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
     const { open } = IconMagnifyingGlass.usePopoverContext("@optiaxiom/react/MenuSubTrigger");
-    const { contentRef, triggerRef } = useMenuSubContext(
+    const { contentRef, itemRef } = useMenuSubContext(
       "@optiaxiom/react/MenuSubTrigger"
     );
     const pointerEnterRef = React.useRef(false);
@@ -1043,9 +1066,9 @@ const MenuSubTrigger = React.forwardRef(
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     React.useEffect(() => {
       if (open && highlightedItem === item && innerRef.current) {
-        triggerRef.current = innerRef.current;
+        itemRef.current = innerRef.current;
       }
-    }, [highlightedItem, item, open, triggerRef]);
+    }, [highlightedItem, item, open, itemRef]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem,
       {
@@ -1161,8 +1184,25 @@ const MenuPopoverContentImpl = React.forwardRef(({ children, ...props }, outerRe
 });
 MenuPopoverContentImpl.displayName = "@optiaxiom/react/MenuPopoverContentImpl";
 
-const MenuPopoverContent = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverContent, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(MenuPopoverContentImpl, { children }) });
+const MenuPopoverContent = React.forwardRef(({ "aria-label": ariaLabel, children, ...props }, ref) => {
+  const { labelId: fieldLabelId } = IconMagnifyingGlass.useFieldContext(
+    "@optiaxiom/react/MenuPopoverContent"
+  );
+  const { triggerRef } = useMenuContext("@optiaxiom/react/MenuPopoverContent");
+  const labelId = reactId.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.PopoverContent,
+    {
+      "aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
+      asChild: true,
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPopoverContentImpl, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { id: labelId, children: ariaLabel || "Menu" }),
+        children
+      ] })
+    }
+  );
 });
 MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
 
@@ -1170,7 +1210,6 @@ const MenuContent = React.forwardRef(
   ({ children, onPointerDown, ...props }, outerRef) => {
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const { labelId } = IconMagnifyingGlass.useFieldContext("@optiaxiom/react/MenuContent");
     const { activeItemStack, inputRef, inputVisible, placeholder, size } = useMenuContext("@optiaxiom/react/MenuContent");
     const { empty, loading } = useCommandContext(
       "@optiaxiom/react/MenuContent"
@@ -1185,7 +1224,6 @@ const MenuContent = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       {
-        "aria-labelledby": labelId,
         onPointerDown: (event) => {
           onPointerDown?.(event);
           if (event.defaultPrevented) {
@@ -1228,16 +1266,19 @@ const MenuTrigger = React.forwardRef(
     onKeyDown,
     ...props
   }, outerRef) => {
-    const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
+    const { setOpen, size, triggerRef } = useMenuContext(
+      "@optiaxiom/react/MenuTrigger"
+    );
     const Comp = size === "sm" ? IconMagnifyingGlass.PopoverTrigger : IconMagnifyingGlass.DialogTrigger;
-    const buttonRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-    const labelId = IconMagnifyingGlass.useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    const ref = reactComposeRefs.useComposedRefs(outerRef, triggerRef);
+    const id = reactId.useId();
+    const labelId = IconMagnifyingGlass.useFieldLabelTrigger(triggerRef, ariaLabelledBy);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
       {
         "aria-labelledby": labelId,
         asChild: true,
+        id,
         onKeyDown: (event) => {
           onKeyDown?.(event);
           if (event.defaultPrevented) {
@@ -1257,10 +1298,10 @@ const MenuTrigger = React.forwardRef(
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var link = IconMagnifyingGlass.recipeRuntime({base:'_1pyear7'});
-var list = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'nye4x5']});
+var link = IconMagnifyingGlass.recipeRuntime({base:'_1m6jijp'});
+var list = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'cgalc4']});
 
-var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'h4zyak']});
+var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'ual7y0']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ addonAfter, children, className, ...props }, ref) => {
@@ -1324,7 +1365,7 @@ const renderItems = (items, limit = items.length, renderItem) => {
   ];
 };
 
-var card = IconMagnifyingGlass.recipeRuntime({base:['pe4xuh',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',justifyContent:'flex-start',p:'16'},'_10zsg1f']});
+var card = IconMagnifyingGlass.recipeRuntime({base:['mpoabw',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',justifyContent:'flex-start',p:'16'},'s8tsi8']});
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
@@ -1344,7 +1385,7 @@ const CardAction = React.forwardRef(
 );
 CardAction.displayName = "@optiaxiom/react/CardAction";
 
-var checkbox = IconMagnifyingGlass.recipeRuntime({base:['_16594ta']});
+var checkbox = IconMagnifyingGlass.recipeRuntime({base:['c6x2n9']});
 
 const CardCheckbox = React.forwardRef(
   ({ className, onChange, ...props }, ref) => {
@@ -1385,9 +1426,9 @@ const CardFooter = React.forwardRef(
 );
 CardFooter.displayName = "@optiaxiom/react/CardFooter";
 
-var addon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_1b7zmi4',before:'mdhssq'}}});
-var content = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1'},'fbk0sa']});
-var header = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'l5mcq5']});
+var addon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'l783rq',before:'_1iqoiua'}}});
+var content = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1'},'_1xtz7xu']});
+var header = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_1ywx44o']});
 
 const CardHeader = React.forwardRef(
   ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
@@ -1422,8 +1463,8 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var overlay$1 = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'m5xinb']});
-var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'k6pk55']});
+var overlay = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_3wrgvq']});
+var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_241hcc']});
 
 const CardPreview = React.forwardRef(
   ({
@@ -1437,7 +1478,7 @@ const CardPreview = React.forwardRef(
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ref, ...preview({}, className), ...props, children: [
       children,
-      (addonTopLeft || addonTopRight) && /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...overlay$1(), children: [
+      (addonTopLeft || addonTopRight) && /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...overlay(), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           IconMagnifyingGlass.Box,
           {
@@ -1485,7 +1526,7 @@ const CardPreview = React.forwardRef(
 );
 CardPreview.displayName = "@optiaxiom/react/CardPreview";
 
-var mark = IconMagnifyingGlass.recipeRuntime({base:'_1m3nnp4'});
+var mark = IconMagnifyingGlass.recipeRuntime({base:'_7jg8cx'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -1517,8 +1558,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = IconMagnifyingGlass.recipeRuntime({base:'jrfco2',variants:{empty:{false:{},true:'_12oosr1'}}});
-var input = IconMagnifyingGlass.recipeRuntime({base:'_1x0c0ss'});
+var editor = IconMagnifyingGlass.recipeRuntime({base:'_1q6o6pr',variants:{empty:{false:{},true:'_1hxjild'}}});
+var input = IconMagnifyingGlass.recipeRuntime({base:'q7erz8'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -1599,7 +1640,7 @@ function getText(element) {
   return text;
 }
 
-var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1wfqeks']});
+var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1r55pdu']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -1624,7 +1665,7 @@ const Layout = React.forwardRef(
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-var pill = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'lmeaay'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1c66woz'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
@@ -1655,16 +1696,14 @@ const PillGroup = React.forwardRef(
 );
 PillGroup.displayName = "@optiaxiom/react/PillGroup";
 
-var overlay = IconMagnifyingGlass.recipeRuntime({base:['a4iak9']});
-
 const [SortableProvider, useSortableContext] = reactContext.createContext("@optiaxiom/react/Sortable");
 
 const Sortable = React.forwardRef(
   ({ children, items: itemsProp, onChange, onItemsChange, ...props }, ref) => {
-    const [showOverlay, setShowOverlay] = React.useState(false);
     const [itemsState, setItemsState] = React.useState(null);
     const items = itemsState === null ? itemsProp ?? [] : itemsState;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const cacheRef = React.useRef(/* @__PURE__ */ new Map());
+    return /* @__PURE__ */ jsxRuntime.jsx(
       react.DragDropProvider,
       {
         onDragEnd: (event) => {
@@ -1688,30 +1727,38 @@ const Sortable = React.forwardRef(
           }
           setItemsState(helpers.move(itemsState, event));
         },
-        onDragStart: (event) => {
-          setShowOverlay(event.nativeEvent instanceof PointerEvent);
+        onDragStart: () => {
           setItemsState(itemsProp ?? []);
         },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ref, ...props, children: typeof children === "function" ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            SortableProvider,
-            {
-              index,
-              isSorting: itemsState !== null,
-              item,
-              children: children(item, index)
-            },
-            item
-          )) : children }),
-          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Portal, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsxRuntime.jsx(react.DragOverlay, { children: showOverlay && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { bg: "bg.overlay", rounded: "sm", size: "full" }) }) })
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(SortableProvider, { cacheRef, isSorting: itemsState !== null, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ref, ...props, children: children?.(items) }) })
       }
     );
   }
 );
 Sortable.displayName = "@optiaxiom/react/Sortable";
 
-var handle = IconMagnifyingGlass.recipeRuntime({base:'p9tst2'});
+const [SortableGroupProvider, useSortableGroupContext] = reactContext.createContext("@optiaxiom/react/SortableGroup", {
+  id: void 0,
+  setHasDropTarget: () => {
+  }
+});
+
+const SortableGroup = React.forwardRef(
+  ({ children, group: id, ...props }, outerRef) => {
+    const [hasDropTarget, setHasDropTarget] = React.useState(false);
+    const { isDropTarget, ref: innerRef } = react.useDroppable({
+      accept: "item",
+      collisionPriority: 1,
+      id,
+      type: "group"
+    });
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    return /* @__PURE__ */ jsxRuntime.jsx(SortableGroupProvider, { id, setHasDropTarget, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { justifyContent: "flex-start", ref, ...props, children: typeof children === "function" ? children(isDropTarget || hasDropTarget) : children }) });
+  }
+);
+SortableGroup.displayName = "@optiaxiom/react/SortableGroup";
+
+var handle = IconMagnifyingGlass.recipeRuntime({base:'_1kr0wpl'});
 
 const [SortableItemProvider, useSortableItemContext] = reactContext.createContext("@optiaxiom/react/SortableItem");
 
@@ -1736,47 +1783,51 @@ const SortableHandle = React.forwardRef(
 );
 SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
 
-var item = IconMagnifyingGlass.recipeRuntime({base:{transition:'opacity'},variants:{handle:{false:{},true:'_1tyfwt0'}}});
+var item = IconMagnifyingGlass.recipeRuntime({base:'_15gymfq',variants:{handle:{false:{},true:'rlr0n1'}}});
 
 const SortableItem = React.forwardRef(
-  ({ children, className, style, ...props }, outerRef) => {
-    const { index, isSorting, item: item$1 } = useSortableContext(
+  ({ children, className, index, item: id, ...props }, outerRef) => {
+    const { cacheRef, isSorting } = useSortableContext(
+      "@optiaxiom/react/SortableItem"
+    );
+    const { id: group, setHasDropTarget } = useSortableGroupContext(
       "@optiaxiom/react/SortableItem"
     );
     const handleRef = React.useRef(null);
-    const { isDragging, ref: innerRef } = sortable.useSortable({
+    const {
+      isDragging,
+      isDropTarget,
+      ref: innerRef
+    } = sortable.useSortable({
       accept: "item",
+      feedback: "clone",
+      group,
       handle: handleRef,
-      id: item$1,
+      id,
       index,
       type: "item"
     });
+    React.useEffect(() => {
+      if (!isDropTarget) {
+        return;
+      }
+      setHasDropTarget(true);
+      return () => setHasDropTarget(false);
+    }, [setHasDropTarget, id, isDropTarget]);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const cacheRef = React.useRef();
-    if (!isSorting || typeof children !== "function") {
-      cacheRef.current = typeof children === "function" ? children() : children;
+    if (!isSorting) {
+      cacheRef.current.set(id, children);
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SortableItemProvider,
+    return /* @__PURE__ */ jsxRuntime.jsx(SortableItemProvider, { handleRef, isDragging, children: /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
       {
-        handleRef,
-        id: item$1,
-        isDragging,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          IconMagnifyingGlass.Box,
-          {
-            ref,
-            style: {
-              opacity: isDragging ? 0.5 : void 0,
-              ...style
-            },
-            ...item({ handle: !handleRef.current }, className),
-            ...props,
-            children: cacheRef.current
-          }
-        )
+        "data-sortable-dragging": isDragging ? "" : void 0,
+        ref,
+        ...item({ handle: !handleRef.current }, className),
+        ...props,
+        children: cacheRef.current.get(id)
       }
-    );
+    ) });
   }
 );
 SortableItem.displayName = "@optiaxiom/react/SortableItem";
@@ -1823,6 +1874,7 @@ exports.MenuTrigger = MenuTrigger;
 exports.Pill = Pill;
 exports.PillGroup = PillGroup;
 exports.Sortable = Sortable;
+exports.SortableGroup = SortableGroup;
 exports.SortableHandle = SortableHandle;
 exports.SortableItem = SortableItem;
 exports.Spotlight = Spotlight;