@optiaxiom/react 3.4.3 → 3.5.0

package/dist/cjs/menu-BpIoYUbA.js

@@ -0,0 +1,1201 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_useSurface = require("./useSurface-Dy0GdyeS.js");
+const require_separator = require("./separator-DYd80dzd.js");
+const require_decorateChildren = require("./decorateChildren-BuXnWpNx.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_input = require("./input-BVk2X8bm.js");
+const require_SuggestionPopover = require("./SuggestionPopover-Bu_sY4dq.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_spinner = require("./spinner-CD-l6_pU.js");
+const require_dialog = require("./dialog-C_RmRBrt.js");
+const require_VisuallyHidden = require("./VisuallyHidden-DK0Wtj7A.js");
+const require_angle_menu_button = require("./angle-menu-button.js");
+const require_useEvent = require("./useEvent-BGCT9scH.js");
+const require_FieldContext = require("./FieldContext-MRvFQT4y.js");
+const require_utils = require("./utils-Dt_U6NjH.js");
+const require_avatar = require("./avatar-QYjj8itt.js");
+const require_tooltip = require("./tooltip-DgIDNGYv.js");
+let _radix_ui_react_id = require("@radix-ui/react-id");
+let react = require("react");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let clsx = require("clsx");
+clsx = require_rolldown_runtime.__toESM(clsx, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _optiaxiom_globals = require("@optiaxiom/globals");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _optiaxiom_icons_IconArrowUpRightFromSquare = require("@optiaxiom/icons/IconArrowUpRightFromSquare");
+let downshift = require("downshift");
+let _optiaxiom_icons_IconSearch = require("@optiaxiom/icons/IconSearch");
+let _optiaxiom_icons_IconChevronRight = require("@optiaxiom/icons/IconChevronRight");
+require("./assets/CommandItem.css.ts.vanilla-BqG-GAW6.css");
+require("./assets/MenuDialogContent.css.ts.vanilla-DjCkqnJA.css");
+require("./assets/MenuInput.css.ts.vanilla-B5rtfRUp.css");
+let react_remove_scroll = require("react-remove-scroll");
+//#region src/command/CommandContext.ts
+function resolveItemProperty(property, ...context) {
+	return typeof property === "function" ? property(...context) : property;
+}
+const [CommandProvider, useCommandContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/Command");
+//#endregion
+//#region src/surface/buildSurfacePath.ts
+const buildSurfacePath = (basePath, surface) => {
+	return `${basePath ? `${basePath}/` : ""}${surface.type}<${surface.name}>`;
+};
+//#endregion
+//#region src/surface/filterSuggestionsBySurface.ts
+/**
+* Helper to filter suggestions by surface metadata.
+* Builds a target path by appending surfaces to the current context path,
+* then filters suggestions matching that path.
+*/
+function filterSuggestionsBySurface(suggestions, path, surfaces) {
+	if (!suggestions || !surfaces?.length) return suggestions;
+	const targetPath = surfaces.reduce(buildSurfacePath, path ?? "");
+	return suggestions.filter((s) => ("/" + targetPath).endsWith("/" + s.surface));
+}
+//#endregion
+//#region src/command/fuzzysearch.ts
+/**
+* Based on https://github.com/bevacqua/fuzzysearch and modified with
+* Intl.Collator for unicode support.
+*/
+const collator = new Intl.Collator(void 0, {
+	sensitivity: "base",
+	usage: "search"
+});
+function fuzzysearch(haystack, needle) {
+	const hlen = haystack.length;
+	const nlen = needle.length;
+	if (nlen > hlen) return false;
+	if (nlen === hlen) return collator.compare(needle, haystack) === 0;
+	outer: for (let i = 0, j = 0; i < nlen; i++) {
+		const nch = needle.charAt(i);
+		while (j < hlen) if (collator.compare(haystack.charAt(j++), nch) === 0) continue outer;
+		return false;
+	}
+	return true;
+}
+function score(item, inputValue) {
+	if (!inputValue || item.skipFilterScoring) return 0;
+	const label = resolveItemProperty(item.label, { inputValue }).normalize().toLowerCase();
+	inputValue = inputValue.toLowerCase();
+	let score = 0;
+	if (label === inputValue) score = 1;
+	else if (label.includes(inputValue)) {
+		score = .75;
+		if (label.startsWith(inputValue)) score += .1;
+	} else if (item.keywords?.toLowerCase().includes(inputValue)) score = .5;
+	if (item.parentOption) score -= -.1;
+	return score;
+}
+//#endregion
+//#region src/command/useCommandItems.ts
+const useCommandItems = ({ inputValue, options }) => {
+	const filterFn = require_useEvent.useEvent((item, inputValue) => {
+		const string = resolveItemProperty(item.label, { inputValue }).normalize();
+		return "visible" in item ? resolveItemProperty(item.visible, { inputValue }) : inputValue ? fuzzysearch(string, inputValue) || item.keywords && fuzzysearch(item.keywords, inputValue) : true;
+	});
+	const surface = require_useSurface.useSurface();
+	const suggestions = surface?.suggestions.filter((s) => s.type === "value");
+	return (0, react.useMemo)(() => {
+		const substring = (inputValue ?? "").normalize();
+		const processedSurfaces = /* @__PURE__ */ new Set();
+		const suggestedValues = /* @__PURE__ */ new Map();
+		for (const option of options) if (option.surface?.type === "property") {
+			const optionSurface = option.surface;
+			const key = option.surface.name;
+			if (processedSurfaces.has(key)) continue;
+			processedSurfaces.add(key);
+			filterSuggestionsBySurface(suggestions, surface?.path, [{
+				name: option.surface.name,
+				type: "property"
+			}])?.forEach((s) => {
+				const path = buildSurfacePath(surface?.path, {
+					name: optionSurface.name,
+					type: optionSurface.type
+				});
+				suggestedValues.set(path, s.value);
+			});
+		}
+		const callback = (parentOption) => (item) => {
+			return item.subOptions && substring ? resolveItemProperty(item.subOptions, { inputValue }).flatMap(callback(item)) : filterFn(item, substring) ? [parentOption ? {
+				...item,
+				key: [parentOption.key ?? resolveItemProperty(parentOption.label, { inputValue }), item.key ?? resolveItemProperty(item.label, { inputValue })].join("-"),
+				parentOption
+			} : item] : [];
+		};
+		return options.flatMap(callback()).sort((a, b) => {
+			const aIsSuggested = a.surface?.type === "property" && suggestedValues.get(buildSurfacePath(surface?.path, a.surface)) === a.surface.value;
+			const bIsSuggested = b.surface?.type === "property" && suggestedValues.get(buildSurfacePath(surface?.path, b.surface)) === b.surface.value;
+			const aScore = score(a, substring) + (aIsSuggested ? 1e3 : 0);
+			const bScore = score(b, substring) + (bIsSuggested ? 1e3 : 0);
+			return (b.group?.priority ?? 0) + bScore - ((a.group?.priority ?? 0) + aScore);
+		});
+	}, [
+		options,
+		inputValue,
+		suggestions,
+		surface?.path,
+		filterFn
+	]);
+};
+//#endregion
+//#region src/command/Command.tsx
+function Command({ children, empty, enabled, inputValue: inputValueProp, loading, onHover, onInputValueChange, onSelect: onItemSelect, options }) {
+	const [inputValue, setInputValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Command",
+		defaultProp: "",
+		onChange: onInputValueChange,
+		prop: inputValueProp
+	});
+	const items = useCommandItems({
+		inputValue,
+		options
+	});
+	const [highlightedIndex, setHighlightedIndex] = require_utils.useHighlightedIndex(enabled);
+	const pauseInteractionRef = (0, react.useRef)({
+		isInsideTriangle: null,
+		timer: void 0
+	});
+	const highlightedItemRef = (0, react.useRef)(null);
+	const downshift$1 = (0, downshift.useCombobox)({
+		highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
+		inputValue,
+		isItemDisabled: (item) => Boolean(resolveItemProperty(item?.disabledReason)),
+		isOpen: !!enabled,
+		items,
+		itemToString: (item) => item !== null ? resolveItemProperty(item.label, { inputValue }) : "",
+		onHighlightedIndexChange({ highlightedIndex, type }) {
+			setHighlightedIndex(highlightedIndex);
+			if (highlightedIndex !== -1) onHover?.(items[highlightedIndex], type === downshift.useCombobox.stateChangeTypes.FunctionSetHighlightedIndex || type === downshift.useCombobox.stateChangeTypes.ItemMouseMove);
+		},
+		onSelectedItemChange({ selectedItem, type }) {
+			if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
+				onItemSelect?.(selectedItem, { dismiss: type !== downshift.useCombobox.stateChangeTypes.FunctionSelectItem || !("selected" in selectedItem) });
+				/**
+				* Reset selection back to null. Otherwise downshift keeps a ref of
+				* selectedItem to try to set the inputValue based on that. But this
+				* causes double selection of items since we always keep selectedItem as
+				* null and this causes a mismatch between the controlled prop and
+				* internal downshift state.
+				*/
+				downshift$1.selectItem(null);
+			}
+		},
+		scrollIntoView(node) {
+			node?.scrollIntoView({ block: "nearest" });
+		},
+		selectedItem: null,
+		stateReducer: (state, actionAndChanges) => {
+			const { changes, type } = actionAndChanges;
+			switch (type) {
+				case downshift.useCombobox.stateChangeTypes.InputBlur:
+				case downshift.useCombobox.stateChangeTypes.InputClick:
+				case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+				case downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
+				case downshift.useCombobox.stateChangeTypes.ItemClick:
+				case downshift.useCombobox.stateChangeTypes.MenuMouseLeave: return {
+					...changes,
+					/**
+					* Keep the selected option highlighted rather than resetting to -1
+					*/
+					highlightedIndex: state.highlightedIndex
+				};
+				default: return changes;
+			}
+		}
+	});
+	/**
+	* Dummy calls to suppress warning from downshift
+	*/
+	downshift$1.getInputProps({}, { suppressRefError: true });
+	downshift$1.getMenuProps({}, { suppressRefError: true });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandProvider, {
+		downshift: downshift$1,
+		empty,
+		enabled: Boolean(enabled),
+		highlightedItem: items[downshift$1.highlightedIndex],
+		highlightedItemRef,
+		inputValue,
+		items,
+		loading,
+		pauseInteractionRef,
+		setHighlightedIndex,
+		setInputValue,
+		children
+	});
+}
+Command.displayName = "@optiaxiom/react/Command";
+//#endregion
+//#region src/command/CommandInput.tsx
+const CommandInput = (0, react.forwardRef)(({ onBlur, onKeyDown, size, ...props }, ref) => {
+	const { downshift, highlightedItem, highlightedItemRef, setInputValue } = useCommandContext("@optiaxiom/react/CommandInput");
+	const setInputValueStable = require_useEvent.useEvent(setInputValue);
+	(0, react.useEffect)(() => {
+		setInputValueStable("");
+	}, [setInputValueStable]);
+	const preventDownshiftBlurRef = (0, react.useRef)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_globals.unstable_SurfaceProvider, {
+		disabled: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+			addonBefore: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconSearch.IconSearch, {}),
+			htmlSize: 1,
+			size,
+			...downshift.getInputProps({
+				"aria-label": props.placeholder,
+				ref,
+				...props,
+				onBlur: (event) => {
+					onBlur?.(event);
+					if (event.defaultPrevented) return;
+					if (preventDownshiftBlurRef.current) {
+						Object.assign(event, { preventDownshiftDefault: true });
+						preventDownshiftBlurRef.current = false;
+					}
+				},
+				onChange: (event) => {
+					setInputValue("value" in event.target ? event.target.value : "");
+				},
+				onKeyDown: (event) => {
+					onKeyDown?.(event);
+					if (event.defaultPrevented) return;
+					if (!(event.target instanceof HTMLInputElement)) return;
+					if (!highlightedItem) return;
+					const selectedWithSpace = !event.target.value && event.key === " ";
+					if (highlightedItemRef.current instanceof HTMLAnchorElement && !highlightedItem.execute && (selectedWithSpace || event.key === "Enter")) {
+						const { view: _view, ...eventInit } = event;
+						event.preventDefault();
+						Object.assign(event, { preventDownshiftDefault: true });
+						if (highlightedItem.external) eventInit.metaKey = true;
+						preventDownshiftBlurRef.current = true;
+						highlightedItemRef.current.dispatchEvent(new MouseEvent("click", eventInit));
+						downshift.selectItem(highlightedItem);
+					} else if (selectedWithSpace) {
+						event.preventDefault();
+						downshift.selectItem(highlightedItem);
+					}
+				}
+			})
+		})
+	});
+});
+CommandInput.displayName = "@optiaxiom/react/CommandInput";
+//#endregion
+//#region src/command/CommandItem.css.ts
+var detail = require_recipeRuntime.recipeRuntime({ base: [{ color: "fg.secondary" }, "mr1y8q"] });
+//#endregion
+//#region src/command/CommandItem.tsx
+const CommandItem = (0, react.forwardRef)(({ asChild, children, index, item, onClick, onMouseLeave, onMouseMove, selected, size, ...props }, outerRef) => {
+	const { downshift, enabled, highlightedItem, highlightedItemRef, inputValue, items, pauseInteractionRef } = useCommandContext("@optiaxiom/react/CommandItem");
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(highlightedItem === item ? highlightedItemRef : void 0, outerRef);
+	const surface = require_useSurface.useSurface();
+	const itemSuggestions = item.surface?.type === "property" ? filterSuggestionsBySurface(surface?.suggestions.filter((s) => s.type === "value"), surface?.path, [{
+		name: item.surface.name,
+		type: "property"
+	}]) : void 0;
+	const isSuggested = item.surface?.type === "property" && itemSuggestions?.some((s) => {
+		if (item.surface?.type !== "property") return false;
+		return s.value === item.surface.value;
+	}) && !resolveItemProperty(item.selected);
+	const itemProps = downshift.getItemProps({
+		"aria-posinset": index + 1,
+		"aria-selected": selected ?? resolveItemProperty(item.selected),
+		"aria-setsize": items.length,
+		index,
+		item,
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.currentTarget instanceof HTMLAnchorElement) {
+				if (event.altKey || event.metaKey || event.shiftKey) Object.assign(event, { preventDownshiftDefault: true });
+				else if (item.execute) event.preventDefault();
+			}
+		},
+		onMouseLeave: (event) => {
+			onMouseLeave?.(event);
+			window.clearTimeout(pauseInteractionRef.current.timer);
+		},
+		onMouseMove: (event) => {
+			onMouseMove?.(event);
+			if (event.defaultPrevented) return;
+			/**
+			* Downshift listens to mousemove on items for highlighting and
+			* scrolling.
+			*
+			* For disabled items we don't want this as downshift will try to reset
+			* highlightedIndex to -1 when mousing over them.
+			*
+			* We also use exit animations where downshift menu will be present in
+			* DOM while closing - and we need to prevent triggering mousemove
+			* during that time.
+			*/
+			if (!enabled || resolveItemProperty(item.disabledReason)) {
+				event.preventDefault();
+				Object.assign(event.nativeEvent, { preventDownshiftDefault: true });
+				return;
+			}
+			if (!pauseInteractionRef.current.isInsideTriangle) return;
+			if (pauseInteractionRef.current.isInsideTriangle({
+				x: event.clientX,
+				y: event.clientY
+			})) {
+				event.preventDefault();
+				Object.assign(event.nativeEvent, { preventDownshiftDefault: true });
+				window.clearTimeout(pauseInteractionRef.current.timer);
+				pauseInteractionRef.current.timer = window.setTimeout(() => {
+					pauseInteractionRef.current.isInsideTriangle = null;
+					downshift.setHighlightedIndex(index);
+				}, 20);
+			} else pauseInteractionRef.current.isInsideTriangle = null;
+		},
+		ref,
+		...props
+	});
+	const detail$1 = resolveItemProperty(item.detail, { inputValue });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild,
+		"data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+		"data-highlighted": highlightedItem === item ? "" : void 0,
+		size,
+		tabIndex: -1,
+		...itemProps,
+		...item.href && { href: item.href },
+		children: require_decorateChildren.decorateChildren({
+			asChild,
+			children
+		}, (children) => children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			item.parentOption && !item.parentOption.hiddenInSearchContext && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+				color: "fg.secondary",
+				children: resolveItemProperty(item.parentOption.label, { inputValue })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				asChild: true,
+				h: "10",
+				w: "auto",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconChevronRight.IconChevronRight, {})
+			})] }),
+			resolveItemProperty(item.label, { inputValue }),
+			isSuggested && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+				fallback: "opal",
+				size: "2xs"
+			}),
+			detail$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+				asChild: true,
+				truncate: true,
+				...detail(),
+				children: require_button.fallbackSpan(detail$1)
+			})
+		] }))
+	});
+});
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
+//#endregion
+//#region src/command/CommandListbox.tsx
+const CommandListbox = (0, react.forwardRef)(({ children, size, ...props }, ref) => {
+	const { downshift, highlightedItem, highlightedItemRef, inputValue, items } = useCommandContext("@optiaxiom/react/CommandListbox");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.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
+	});
+});
+CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
+//#endregion
+//#region src/menu/MenuContext.ts
+const [MenuProvider, useMenuContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/Menu");
+//#endregion
+//#region src/menu/MenuPopover.tsx
+function MenuPopover(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.Popover, { ...props });
+}
+MenuPopover.displayName = "@optiaxiom/react/MenuPopover";
+//#endregion
+//#region src/menu/MenuSubContext.ts
+const [MenuSubProvider, useMenuSubContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/MenuSub");
+//#endregion
+//#region src/menu/useMenuSurface.ts
+/**
+* Hook to track menu item interactions with surface context.
+* Handles property changes/toggles and accepts matching suggestions.
+*/
+function useMenuSurface() {
+	const surface = require_useSurface.useSurface();
+	return (item) => {
+		if (!item.surface || !surface) return;
+		const allSuggestions = surface.suggestions?.filter((s) => s.type === "value");
+		const itemSurface = item.surface;
+		if (itemSurface.type === "property") {
+			const matchingSuggestion = filterSuggestionsBySurface(allSuggestions, surface.path, [{
+				name: itemSurface.name,
+				type: "property"
+			}])?.find((s) => s.value === itemSurface.value);
+			if (item.multi || item.switch) surface.track({
+				checked: !resolveItemProperty(item.selected),
+				name: "toggled"
+			}, [itemSurface]);
+			else if ("selected" in item) surface.track({
+				name: "changed",
+				value: itemSurface.value
+			}, [itemSurface]);
+			if (matchingSuggestion) surface.accept(matchingSuggestion.id);
+		} else if (itemSurface.type === "action") surface.track({ name: "invoked" }, [itemSurface]);
+	};
+}
+//#endregion
+//#region src/menu/Menu.tsx
+/**
+* Dropdown menu for actions, multi-select, and complex interactions.
+* Supports filtering/search, checkbox/radio items, nested sub-menus,
+* links, and action handlers via `execute`.
+*
+* Must be used with MenuTrigger and MenuContent sub-components. MenuTrigger
+* automatically renders a button with chevron icon, or use MenuTrigger asChild
+* with custom buttons like EllipsisMenuButton for overflow menus.
+*
+* Use Menu when: action menus (edit/delete/archive), multi-select dropdowns,
+* filterable lists, nested menus, or items with links/navigation.
+*
+* Use Select instead when: you need a simple single-select form input
+* with `value`/`onChange` and form submission support.
+*
+* Note: Menu is not a form control - it has no `value`/`onChange` and does
+* not integrate with `Field`. For a single-select form field, use Select
+* (which does not support filtering). There is currently no built-in
+* filterable single-select form input.
+*
+* @category overlay
+* @group Menu
+* @since 1.6.0
+*/
+function Menu({ children, defaultOpen = false, inputValue: inputValueProp, inputVisible: inputVisibleProp, onInputValueChange, onOpenChange, open: openProp, options: optionsProp, placeholder = "Filter...", size: sizeProp, ...props }) {
+	const size = require_separator.useResponsiveMatches({
+		base: "lg",
+		sm: sizeProp ?? "sm"
+	});
+	const Comp = size === "sm" ? MenuPopover : require_dialog.Dialog;
+	const track = useMenuSurface();
+	const [open, setOpen] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Menu",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const [inputValue, setInputValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Menu",
+		defaultProp: "",
+		onChange: onInputValueChange,
+		prop: inputValueProp
+	});
+	const [activeItemStack, setActiveItemStack] = (0, react.useState)([]);
+	const [subMenuOpen, setSubMenuOpen] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (inputValue && size === "sm") setSubMenuOpen(false);
+	}, [inputValue, size]);
+	(0, react.useEffect)(() => {
+		if (size === "sm") {
+			if (!open) setSubMenuOpen(false);
+		} else if (open) setActiveItemStack((activeItemStack) => activeItemStack.length ? [] : activeItemStack);
+	}, [open, size]);
+	const contentRef = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	const itemRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const options = (0, react.useMemo)(() => size === "sm" ? optionsProp.map((option) => ({
+		...option,
+		label: option.subOptions ? resolveItemProperty(option.label, { inputValue }).replace("…", "") : resolveItemProperty(option.label, { inputValue })
+	})) : activeItemStack.length ? activeItemStack.reduce((result, stackItem) => {
+		const stackKey = stackItem.key ?? resolveItemProperty(stackItem.label, { inputValue });
+		for (const resultItem of result) if ((resultItem.key ?? resolveItemProperty(resultItem.label, { inputValue })) === stackKey) return resolveItemProperty(resultItem.subOptions, { inputValue }) ?? [];
+		throw new Error(`Could not find item: ${stackKey}`);
+	}, optionsProp) : optionsProp, [
+		activeItemStack,
+		inputValue,
+		optionsProp,
+		size
+	]);
+	const hasSelectableItem = (0, react.useMemo)(() => options.filter((item) => "selected" in item).length > options.length / 2 && options.length >= 10, [options]);
+	const inputDefaultVisibleRef = (0, react.useRef)(hasSelectableItem);
+	inputDefaultVisibleRef.current = inputVisibleProp === "always" ? true : hasSelectableItem || false;
+	const [inputVisible, setInputVisible] = (0, react.useState)(inputDefaultVisibleRef.current);
+	const [focusVisible, setFocusVisible] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (inputValue) setInputVisible(true);
+	}, [inputValue]);
+	(0, react.useEffect)(() => {
+		if (open) setInputVisible(inputDefaultVisibleRef.current);
+		else setFocusVisible(false);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (size === "lg") setInputVisible(inputDefaultVisibleRef.current);
+	}, [activeItemStack, size]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+		onOpenChange: setOpen,
+		open,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuProvider, {
+			activeItemStack,
+			focusVisible,
+			inputRef,
+			inputVisible,
+			onSelect: (item, { dismiss }) => {
+				track(item);
+				item.execute?.({
+					dismiss,
+					inputValue
+				});
+				if (typeof openProp === "undefined" && dismiss) setOpen(false);
+			},
+			open,
+			placeholder: activeItemStack.length ? resolveItemProperty(activeItemStack[activeItemStack.length - 1].label, { inputValue }) : placeholder,
+			setActiveItemStack,
+			setFocusVisible,
+			setOpen,
+			size,
+			triggerRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+				enabled: open ? activeItemStack.length + 1 : false,
+				inputValue,
+				onHover: (item, pointer) => {
+					if (!pointer) setFocusVisible(true);
+					setSubMenuOpen(pointer && (typeof item.subOptions === "function" || !!item.subOptions?.length));
+				},
+				onInputValueChange: setInputValue,
+				onSelect: (item, { dismiss }) => {
+					if (typeof item.subOptions === "function" || item.subOptions?.length) {
+						if (size === "lg") setActiveItemStack((stack) => [...stack ?? [], item]);
+						else setSubMenuOpen(true);
+					} else {
+						track(item);
+						item.execute?.({
+							dismiss,
+							inputValue
+						});
+						if (typeof openProp === "undefined" && dismiss) setOpen(false);
+					}
+				},
+				options,
+				...props,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSubProvider, {
+					contentRef,
+					inputRef,
+					itemRef,
+					open: subMenuOpen,
+					setOpen: setSubMenuOpen,
+					children
+				})
+			})
+		})
+	});
+}
+Menu.displayName = "@optiaxiom/react/Menu";
+//#endregion
+//#region src/menu/MenuDialogContent.css.ts
+var content = require_recipeRuntime.recipeRuntime({ base: "beqoyo" });
+//#endregion
+//#region src/menu/MenuDialogContent.tsx
+const MenuDialogContent = (0, react.forwardRef)(({ align: _align, "aria-label": ariaLabel, children, className, minW: _minW, side: _side, sideOffset: _sideOffset, ...props }, ref) => {
+	const { labelId: fieldLabelId } = require_FieldContext.useFieldContext("@optiaxiom/react/MenuDialogContent");
+	const { triggerRef } = useMenuContext("@optiaxiom/react/MenuDialogContent");
+	const labelId = (0, _radix_ui_react_id.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dialog.DialogContent, {
+		"aria-labelledby": (0, clsx.default)(fieldLabelId ?? triggerRef.current?.id, labelId),
+		onPointerDownOutside: () => {},
+		ref,
+		...content({}, className),
+		...props,
+		children: [
+			children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					id: labelId,
+					children: ariaLabel || "Menu"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+				tabIndex: -1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dialog.DialogHeader, { children: "Menu" })
+			})
+		]
+	});
+});
+MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
+//#endregion
+//#region src/menu/MenuInput.css.ts
+var input = require_recipeRuntime.recipeRuntime({ variants: { size: {
+	sm: { m: "4" },
+	lg: [{
+		border: "0",
+		borderB: "1",
+		borderColor: "border.secondary",
+		rounded: "none"
+	}, "_1w1gwja"]
+} } });
+//#endregion
+//#region src/menu/MenuInput.tsx
+const MenuInput = (0, react.forwardRef)(({ className, onKeyDown, ...props }, outerRef) => {
+	const { inputRef, open, setActiveItemStack, size } = useMenuContext("@optiaxiom/react/MenuInput");
+	const { downshift, highlightedItem } = useCommandContext("@optiaxiom/react/MenuInput");
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(inputRef, outerRef);
+	const containerRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!containerRef.current) return;
+		const rect = containerRef.current.getBoundingClientRect();
+		if (open) containerRef.current.style.minWidth = `${rect.width}px`;
+	}, [downshift.inputValue, open]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		ref: containerRef,
+		style: { minWidth: 160 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandInput, {
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				if (!(event.target instanceof HTMLInputElement)) return;
+				if (event.target.value) return;
+				if (event.key === "Backspace" && size === "lg") {
+					event.preventDefault();
+					setActiveItemStack((stack) => stack.length ? stack.slice(0, -1) : stack);
+				} else if (event.key === "ArrowRight" && (typeof highlightedItem?.subOptions === "function" || highlightedItem?.subOptions?.length) && size === "sm") {
+					event.preventDefault();
+					downshift.selectItem(highlightedItem);
+				}
+			},
+			ref,
+			size: size === "sm" ? "md" : "xl",
+			...input({ size }, className),
+			...props
+		})
+	});
+});
+MenuInput.displayName = "@optiaxiom/react/MenuInput";
+//#endregion
+//#region src/menu/MenuCheckboxItem.tsx
+const MenuCheckboxItem = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const Comp = props.item.href ? "a" : "div";
+	const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
+	const track = useMenuSurface();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxCheckboxItem, {
+			addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
+			asChild: true,
+			description: resolveItemProperty(props.item.description, { inputValue }),
+			onCheckedChange: () => {
+				if (!resolveItemProperty(props.item.disabledReason)) {
+					track(props.item);
+					props.item.execute?.({
+						dismiss: false,
+						inputValue
+					});
+				}
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+				...props.item.href && { href: props.item.href },
+				children
+			})
+		})
+	});
+});
+MenuCheckboxItem.displayName = "@optiaxiom/react/MenuCheckboxItem";
+//#endregion
+//#region src/menu/MenuItem.tsx
+const MenuItem = (0, react.forwardRef)(({ addonAfter, children, ...props }, ref) => {
+	const Comp = props.item.href ? "a" : "div";
+	const { highlightedItem, inputValue } = useCommandContext("@optiaxiom/react/MenuItem");
+	const { focusVisible } = useMenuContext("@optiaxiom/react/MenuItem");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxItem, {
+			addonAfter: props.item.href && props.item.external ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconArrowUpRightFromSquare.IconArrowUpRightFromSquare, {}) : addonAfter,
+			addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
+			asChild: true,
+			"data-focus-visible": focusVisible && highlightedItem === props.item ? "" : void 0,
+			description: resolveItemProperty(props.item.description, { inputValue }),
+			intent: props.item.intent,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+				...props.item.href && { href: props.item.href },
+				...props.item.href && props.item.external && {
+					rel: "noopener noreferrer",
+					target: "_blank"
+				},
+				children
+			})
+		})
+	});
+});
+MenuItem.displayName = "@optiaxiom/react/MenuItem";
+//#endregion
+//#region src/menu/MenuRadioItem.tsx
+const MenuRadioItem = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const Comp = props.item.href ? "a" : "div";
+	const { inputValue } = useCommandContext("@optiaxiom/react/MenuRadioItem");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxRadioItem, {
+			addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
+			asChild: true,
+			description: resolveItemProperty(props.item.description, { inputValue }),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+				...props.item.href && { href: props.item.href },
+				children
+			})
+		})
+	});
+});
+MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
+//#endregion
+//#region src/menu/MenuSubInput.tsx
+const MenuSubInput = (0, react.forwardRef)(({ onKeyDown, ...props }, ref) => {
+	const { downshift, highlightedItem } = useCommandContext("@optiaxiom/react/MenuSubInput");
+	const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuSubInput");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandInput, {
+		m: "4",
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (!(event.target instanceof HTMLInputElement)) return;
+			if (event.target.value) return;
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				setOpen(false);
+			} else if (event.key === "ArrowRight" && (typeof highlightedItem?.subOptions === "function" || highlightedItem?.subOptions?.length)) {
+				event.preventDefault();
+				downshift.selectItem(highlightedItem);
+			}
+		},
+		ref,
+		...props
+	});
+});
+MenuSubInput.displayName = "@optiaxiom/react/MenuSubInput";
+//#endregion
+//#region src/menu/MenuSubContent.tsx
+const MenuSubContent = (0, react.forwardRef)(({ align = "start", side = "right", ...props }, outerRef) => {
+	const { onSelect, setFocusVisible, setOpen: setRootMenuOpen } = useMenuContext("@optiaxiom/react/MenuSubContent");
+	const { highlightedItem: item, inputValue: parentInputValue, setInputValue: setParentInputValue } = useCommandContext("@optiaxiom/react/MenuSubContent");
+	const { contentRef: parentContentRef, inputRef: parentInputRef, itemRef: parentItemRef } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+	const { open, presence } = require_SuggestionPopover.usePopoverContext("@optiaxiom/react/MenuSubContent");
+	const labelId = (0, _radix_ui_react_id.useId)();
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(parentContentRef, outerRef);
+	const [inputValue, setInputValue] = (0, react.useState)("");
+	const options = (0, react.useMemo)(() => resolveItemProperty(item?.subOptions, { inputValue }) ?? [], [inputValue, item]);
+	const contentRef = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	const itemRef = (0, react.useRef)(null);
+	const [subMenuOpen, setSubMenuOpen] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!open) setSubMenuOpen(false);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		return () => {
+			setInputValue("");
+			setSubMenuOpen(false);
+		};
+	}, [item]);
+	if (!item || !(open || presence)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.PopoverAnchor, { virtualRef: parentItemRef }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SuggestionPopover.PopoverContent, {
+		align,
+		alignOffset: item.subOptionsInputVisible ? -46 : -4,
+		"aria-labelledby": (0, clsx.default)(parentItemRef.current?.id, labelId),
+		maxH: "lg",
+		onCloseAutoFocus: (event) => {
+			event.preventDefault();
+			parentInputRef.current?.focus();
+		},
+		onEscapeKeyDown: () => setRootMenuOpen(false),
+		onPointerDown: (event) => {
+			if (event.defaultPrevented) return;
+			if (event.target instanceof Element && (event.target.closest("[role=\"option\"]") || inputRef.current?.contains(event.target))) {
+				event.stopPropagation();
+				return;
+			}
+			event.preventDefault();
+			inputRef.current?.focus();
+		},
+		onPointerEnter: () => {
+			if (item.subOptionsInputVisible) inputRef.current?.focus();
+		},
+		onPointerLeave: (event) => {
+			if (item.subOptionsInputVisible) {
+				parentInputRef.current?.focus();
+				event.stopPropagation();
+			}
+		},
+		p: "4",
+		ref,
+		side,
+		sideOffset: 0,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				id: labelId,
+				children: "Submenu"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Command, {
+			enabled: true,
+			inputValue,
+			onHover: (item, pointer) => {
+				if (!pointer) setFocusVisible(true);
+				setSubMenuOpen(pointer && (typeof item.subOptions === "function" || !!item.subOptions?.length));
+			},
+			onInputValueChange: (inputValue) => {
+				if (item.subOptionsInputVisible) {
+					setInputValue(inputValue);
+					return;
+				}
+				parentInputRef.current?.focus();
+				setParentInputValue(inputValue);
+			},
+			onSelect: (item, { dismiss }) => {
+				if (typeof item.subOptions === "function" || item.subOptions?.length) setSubMenuOpen(true);
+				else onSelect(item, { dismiss });
+			},
+			options,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+				disabled: item.subOptionsInputVisible,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSubInput, {
+					placeholder: "Filter...",
+					ref: inputRef
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSubProvider, {
+				contentRef,
+				inputRef,
+				itemRef,
+				open: subMenuOpen,
+				setOpen: setSubMenuOpen,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+			})]
+		}, item.key ?? resolveItemProperty(item.label, { inputValue: parentInputValue }))]
+	})] });
+});
+MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
+//#endregion
+//#region src/menu/MenuSubTrigger.tsx
+const MenuSubTrigger = (0, react.forwardRef)(({ children, item, onPointerDown, onPointerEnter, onPointerLeave, onPointerMove, ...props }, outerRef) => {
+	const { downshift, enabled, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
+	const { open } = require_SuggestionPopover.usePopoverContext("@optiaxiom/react/MenuSubTrigger");
+	const { contentRef, itemRef } = useMenuSubContext("@optiaxiom/react/MenuSubTrigger");
+	/**
+	* We use a ref and combine pointerenter + pointermove because pointerenter
+	* is triggered both when mouse moves into the element and also when element
+	* is inserted into DOM and mouse happens to be present at that coordinate.
+	*
+	* So we only open the submenu when user moves the enters and then moves
+	* the mouse for the first time.
+	*/
+	const pointerEnterRef = (0, react.useRef)(false);
+	const innerRef = (0, react.useRef)();
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	(0, react.useEffect)(() => {
+		if (open && highlightedItem === item && innerRef.current) itemRef.current = innerRef.current;
+	}, [
+		highlightedItem,
+		item,
+		open,
+		itemRef
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, {
+		addonAfter: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconChevronRight.IconChevronRight, {}),
+		item,
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (open) event.preventDefault();
+		},
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			if (event.defaultPrevented) return;
+			if (highlightedItem === item) pointerEnterRef.current = true;
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			pointerEnterRef.current = false;
+			const box = contentRef.current?.getBoundingClientRect();
+			if (!box) return;
+			if (pauseInteractionRef.current.isInsideTriangle) return;
+			const bottom = {
+				x: box.left,
+				y: box.top + box.height
+			};
+			const side = {
+				x: event.clientX + 10 * (box.left > event.clientX ? -1 : 1),
+				y: event.clientY
+			};
+			const top = {
+				x: box.left,
+				y: box.top
+			};
+			pauseInteractionRef.current.isInsideTriangle = (target) => {
+				const b0 = (top.x - side.x) * (bottom.y - side.y) - (bottom.x - side.x) * (top.y - side.y), b1 = ((top.x - target.x) * (bottom.y - target.y) - (bottom.x - target.x) * (top.y - target.y)) / b0, b2 = ((bottom.x - target.x) * (side.y - target.y) - (side.x - target.x) * (bottom.y - target.y)) / b0, b3 = ((side.x - target.x) * (top.y - target.y) - (top.x - target.x) * (side.y - target.y)) / b0;
+				return b1 > 0 && b2 > 0 && b3 > 0;
+			};
+			pauseInteractionRef.current.timer = window.setTimeout(() => {
+				pauseInteractionRef.current.isInsideTriangle = null;
+			}, 20);
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			if (event.defaultPrevented) return;
+			if (pointerEnterRef.current && enabled) downshift.selectItem(item);
+			pointerEnterRef.current = false;
+		},
+		ref,
+		...props,
+		children
+	});
+});
+MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";
+//#endregion
+//#region src/menu/MenuSwitchItem.tsx
+const MenuSwitchItem = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const Comp = props.item.href ? "a" : "div";
+	const { inputValue } = useCommandContext("@optiaxiom/react/MenuSwitchItem");
+	const track = useMenuSurface();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxSwitchItem, {
+			addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
+			asChild: true,
+			description: resolveItemProperty(props.item.description, { inputValue }),
+			onCheckedChange: () => {
+				if (!resolveItemProperty(props.item.disabledReason)) {
+					track(props.item);
+					props.item.execute?.({
+						dismiss: false,
+						inputValue
+					});
+				}
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+				...props.item.href && { href: props.item.href },
+				children
+			})
+		})
+	});
+});
+MenuSwitchItem.displayName = "@optiaxiom/react/MenuSwitchItem";
+//#endregion
+//#region src/menu/MenuListbox.tsx
+const MenuListbox = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { inputValue } = useCommandContext("@optiaxiom/react/MenuListbox");
+	const { size } = useMenuContext("@optiaxiom/react/MenuListbox");
+	const { open } = useMenuSubContext("@optiaxiom/react/MenuListbox");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandListbox, {
+		ref,
+		...props,
+		children: children ?? ((item, index, prevItem) => {
+			const Comp = typeof item.subOptions === "function" || item.subOptions?.length ? size === "sm" ? MenuSubTrigger : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : item.switch ? MenuSwitchItem : MenuRadioItem : MenuItem;
+			const group = item.group;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				require_utils.shouldShowSeparator(group, prevItem) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxSeparator, {}),
+				require_utils.shouldShowGroup(group, prevItem) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.ListboxLabel, { children: group.label }),
+				Comp === MenuSubTrigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+					content: resolveItemProperty(item.disabledReason),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSubTrigger, {
+						index,
+						item
+					})
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.Tooltip, {
+					content: resolveItemProperty(item.disabledReason),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+						index,
+						item
+					})
+				})
+			] });
+		})
+	}), !inputValue && size === "sm" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.Popover, {
+		open,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSubContent, {})
+	})] });
+});
+MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
+//#endregion
+//#region src/menu/MenuPopoverContent.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/MenuPopoverContent");
+const MenuPopoverContent = (0, react.forwardRef)(({ align, "aria-label": ariaLabel, children, ...props }, ref) => {
+	const { shardRef } = (0, _optiaxiom_globals.useModalContext)("@optiaxiom/react/MenuPopoverContent");
+	const { labelId: fieldLabelId } = require_FieldContext.useFieldContext("@optiaxiom/react/MenuPopoverContent");
+	const { triggerRef } = useMenuContext("@optiaxiom/react/MenuPopoverContent");
+	const labelId = (0, _radix_ui_react_id.useId)();
+	const [resolvedAlign, setResolvedAlign] = (0, react.useState)(align);
+	(0, react.useLayoutEffect)(() => {
+		const rect = triggerRef.current?.getBoundingClientRect();
+		if (rect) {
+			const center = rect.left + rect.width / 2;
+			setResolvedAlign(center > window.innerWidth * .75 ? "end" : "start");
+		}
+	}, [align, triggerRef]);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SuggestionPopover.PopoverContent, {
+		align: align ?? resolvedAlign,
+		"aria-labelledby": (0, clsx.default)(fieldLabelId ?? triggerRef.current?.id, labelId),
+		ref,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+			id: labelId,
+			children: ariaLabel || "Menu"
+		}), children]
+	});
+	if (shardRef.current)
+ /**
+	* Handle scroll locking when menu is used within a modal.
+	*/
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_remove_scroll.RemoveScroll, {
+		allowPinchZoom: true,
+		as: Slot,
+		shards: [shardRef],
+		children: content
+	});
+	else return content;
+});
+MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
+//#endregion
+//#region src/menu/MenuContent.tsx
+/**
+* Menu content rendered in a portal with absolute positioning.
+*
+* Rendered as a popover in larger screens and in a dialog in smaller screens by
+* default.
+*
+* @group Menu
+*/
+const MenuContent = (0, react.forwardRef)(({ children, onPointerDown, ...props }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	const { activeItemStack, inputRef, inputVisible, placeholder, size } = useMenuContext("@optiaxiom/react/MenuContent");
+	const { empty, loading } = useCommandContext("@optiaxiom/react/MenuContent");
+	const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuContent");
+	const Comp = size === "sm" ? MenuPopoverContent : MenuDialogContent;
+	(0, react.useEffect)(() => {
+		innerRef.current?.animate([
+			{ scale: 1 },
+			{ scale: .97 },
+			{ scale: 1 }
+		], { duration: 150 });
+	}, [activeItemStack]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Comp, {
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.target instanceof Element && (event.target.closest("[role=\"option\"]") || inputRef.current?.contains(event.target))) return;
+			event.preventDefault();
+			inputRef.current?.focus();
+		},
+		overflow: "hidden",
+		p: size === "sm" ? "4" : "0",
+		ref,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+			disabled: inputVisible,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuInput, {
+				addonAfter: (loading === "both" || loading === "spinner") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_spinner.Spinner, { size: "2xs" }),
+				placeholder
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListbox, {
+			empty,
+			loading: loading === true ? "both" : loading || void 0,
+			onScroll: () => setOpen(false),
+			p: size === "lg" ? "6" : "0",
+			children
+		})]
+	});
+});
+MenuContent.displayName = "@optiaxiom/react/MenuContent";
+//#endregion
+//#region src/menu/MenuTrigger.tsx
+/**
+* Trigger button for Menu component with automatic chevron icon.
+*
+* Use this as the trigger for Menu dropdowns. By default, renders an
+* AngleMenuButton (button with trailing chevron). Use asChild to customize the
+* trigger button.
+*
+* @example
+* <MenuTrigger asChild><EllipsisMenuButton /></MenuTrigger>
+*
+* @extends Button
+* @group Menu
+*/
+const MenuTrigger = (0, react.forwardRef)(({ "aria-labelledby": ariaLabelledBy, asChild, children, onKeyDown, ...props }, outerRef) => {
+	const { setFocusVisible, setOpen, size, triggerRef } = useMenuContext("@optiaxiom/react/MenuTrigger");
+	const Comp = size === "sm" ? require_SuggestionPopover.PopoverTrigger : require_dialog.DialogTrigger;
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(outerRef, triggerRef);
+	const id = (0, _radix_ui_react_id.useId)();
+	const labelId = require_utils.useFieldLabelTrigger(triggerRef, ariaLabelledBy);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+		"aria-labelledby": labelId,
+		asChild: true,
+		id,
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					setFocusVisible(true);
+					setOpen(true);
+			}
+		},
+		ref,
+		...props,
+		children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_angle_menu_button.AngleMenuButton, { children })
+	});
+});
+MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
+//#endregion
+Object.defineProperty(exports, "Menu", {
+	enumerable: true,
+	get: function() {
+		return Menu;
+	}
+});
+Object.defineProperty(exports, "MenuContent", {
+	enumerable: true,
+	get: function() {
+		return MenuContent;
+	}
+});
+Object.defineProperty(exports, "MenuTrigger", {
+	enumerable: true,
+	get: function() {
+		return MenuTrigger;
+	}
+});
+Object.defineProperty(exports, "resolveItemProperty", {
+	enumerable: true,
+	get: function() {
+		return resolveItemProperty;
+	}
+});
+Object.defineProperty(exports, "useCommandContext", {
+	enumerable: true,
+	get: function() {
+		return useCommandContext;
+	}
+});
+Object.defineProperty(exports, "useMenuContext", {
+	enumerable: true,
+	get: function() {
+		return useMenuContext;
+	}
+});