asheeui 0.6.15 → 1.0.0

package/dist/components/{select-menu/SelectMenu.d.ts → menu/Menu.d.ts}

@@ -1,6 +1,6 @@
 import { FloatingContext } from '@floating-ui/react';
 import { ReactNode } from 'react';
-import { MenuConfig, SelectMenuOption } from './select-menu-config';
+import { MenuConfig, MenuOption } from './menu-config';
 /**
  * Menu props that extend MenuConfig with className.
  * Used for menu configuration overrides.
@@ -12,9 +12,9 @@ export type MenuProps = MenuConfig & {
     className?: string;
 };
 /**
- * Props for the SelectMenu component.
+ * Props for the Menu component.
  */
-export interface SelectMenuProps {
+export interface MenuComponentProps {
     /**
      * Whether the menu is open.
      */
@@ -49,7 +49,7 @@ export interface SelectMenuProps {
     /**
      * Available options to display in the menu.
      */
-    options: SelectMenuOption[];
+    options: MenuOption[];
     /**
      * Currently selected values.
      * Used to highlight selected options with a checkmark.
@@ -59,7 +59,7 @@ export interface SelectMenuProps {
      * Callback fired when an option is selected.
      * Receives the selected option object.
      */
-    onSelectMenuOption: (option: SelectMenuOption) => void;
+    onOptionSelect: (option: MenuOption) => void;
     /**
      * Whether search input is shown in the menu.
      * @default true
@@ -72,7 +72,7 @@ export interface SelectMenuProps {
     searchPlaceholder?: string;
     /**
      * Name attribute for the search input.
-     * @default "select-menu-search"
+     * @default "menu-search"
      */
     searchInputName?: string;
     /**
@@ -100,7 +100,7 @@ export interface SelectMenuProps {
      * Custom render function for each option.
      * Receives the option and a boolean indicating if it's selected.
      */
-    renderOption?: (option: SelectMenuOption, isSelected: boolean) => ReactNode;
+    renderOption?: (option: MenuOption, isSelected: boolean) => ReactNode;
     /**
      * Initial focus target for the FloatingFocusManager.
      */
@@ -110,13 +110,43 @@ export interface SelectMenuProps {
      * @default false
      */
     returnFocus?: boolean;
+    /**
+     * Index of the option that keyboard navigation treats as current.
+     * When omitted, the menu tracks the current option itself.
+     */
+    activeIndex?: number | null;
+    /**
+     * Called when the current option changes through keyboard navigation.
+     * A consumer that keeps focus in its own trigger uses this to mirror the
+     * current option in `aria-activedescendant`.
+     */
+    onActiveIndexChange?: (index: number | null) => void;
+    /**
+     * Whether the listbox accepts more than one selection.
+     * Exposed as `aria-multiselectable` on the option list.
+     *
+     * @default false
+     */
+    isMultiSelectable?: boolean;
 }
+/**
+ * Identifier of one option inside a menu listbox.
+ *
+ * The listbox id comes from the floating element, so the identifier a consumer
+ * publishes through `aria-activedescendant` and the identifier the option
+ * carries are built the same way from the same id.
+ *
+ * @param listboxId - Id of the option list container.
+ * @param index - Position of the option in the rendered list.
+ * @returns The option id, or `undefined` when the list has no id yet.
+ */
+export declare function menuOptionId(listboxId: string | undefined, index: number): string | undefined;
 /**
  * A reusable dropdown menu for selecting options from a list.
  *
- * SelectMenu renders a floating dropdown with search, option list, and
+ * Menu renders a floating dropdown with search, option list, and
  * selection state management. It is designed to be used as the dropdown
- * implementation for Select, MultiSelect, and Autocomplete components.
+ * implementation for Dropmenu, MultiSelect, and Autocomplete components.
  *
  * The component uses Floating UI for positioning and accessibility, and
  * supports custom option rendering, search filtering, and configurable
@@ -128,7 +158,7 @@ export interface SelectMenuProps {
  * the `menuProps.portal` prop if the menu needs to stay within a specific
  * parent container. This is typically controlled by the parent component.
  *
- * @param props - SelectMenu configuration options.
+ * @param props - Menu configuration options.
  * @param props.isOpen - Whether the menu is open.
  * @param props.context - Floating UI context.
  * @param props.getFloatingProps - Props getter for the floating element.
@@ -136,10 +166,10 @@ export interface SelectMenuProps {
  * @param props.isPositioned - Whether the floating element has been positioned by Floating UI. Defaults to true.
  * @param props.options - Available options to display.
  * @param props.selectedValues - Currently selected values.
- * @param props.onSelectMenuOption - Callback fired when an option is selected.
+ * @param props.onOptionSelect - Callback fired when an option is selected.
  * @param props.isSearch - Whether search is enabled. Defaults to true.
  * @param props.searchPlaceholder - Search placeholder. Defaults to "Search...".
- * @param props.searchInputName - Name attribute for the search input. Defaults to "select-menu-search".
+ * @param props.searchInputName - Name attribute for the search input. Defaults to "menu-search".
  * @param props.searchQuery - Controlled search query value.
  * @param props.onSearchChange - Callback fired when the search query changes.
  * @param props.belowList - Content below the options list.
@@ -148,33 +178,36 @@ export interface SelectMenuProps {
  * @param props.renderOption - Custom render function for options.
  * @param props.initialFocus - Initial focus target for the FloatingFocusManager.
  * @param props.returnFocus - Whether to return focus to the trigger after closing. Defaults to false.
+ * @param props.activeIndex - Index the menu treats as the current option. Defaults to the menu tracking it itself.
+ * @param props.onActiveIndexChange - Called when the current option changes through keyboard navigation.
+ * @param props.isMultiSelectable - Whether the option list accepts more than one selection. Defaults to false.
  *
  * @example
  * ```tsx
  * const { refs, context } = useFloating(...);
  *
- * <SelectMenu
+ * <Menu
  *   isOpen={isOpen}
  *   context={context}
  *   getFloatingProps={getFloatingProps}
  *   setFloatingRef={refs.setFloating}
  *   options={options}
  *   selectedValues={selectedValues}
- *   onSelectMenuOption={handleSelect}
+ *   onOptionSelect={handleSelect}
  * />
  * ```
  *
  * @example
  * ```tsx
  * // With custom menu configuration
- * <SelectMenu
+ * <Menu
  *   isOpen={isOpen}
  *   context={context}
  *   getFloatingProps={getFloatingProps}
  *   setFloatingRef={refs.setFloating}
  *   options={options}
  *   selectedValues={selectedValues}
- *   onSelectMenuOption={handleSelect}
+ *   onOptionSelect={handleSelect}
  *   menuProps={{
  *     className: "custom-dropdown",
  *     portal: false,
@@ -187,8 +220,8 @@ export interface SelectMenuProps {
  * @see MenuConfig - The configuration type for menu items.
  * @see Button - The button component used for menu items.
  */
-export declare const SelectMenu: {
-    ({ isOpen, floatingStyles, context, getFloatingProps, setFloatingRef, isPositioned, options, selectedValues, onSelectMenuOption, isSearch, searchPlaceholder, searchInputName, searchQuery, onSearchChange, belowList, menuConfig, menuProps, renderOption, initialFocus, returnFocus, }: SelectMenuProps): import("react").JSX.Element | null;
+export declare const Menu: {
+    ({ isOpen, floatingStyles, context, getFloatingProps, setFloatingRef, isPositioned, options, selectedValues, onOptionSelect, isSearch, searchPlaceholder, searchInputName, searchQuery, onSearchChange, belowList, menuConfig, menuProps, renderOption, initialFocus, returnFocus, activeIndex: activeIndexProp, onActiveIndexChange, isMultiSelectable, }: MenuComponentProps): import("react").JSX.Element | null;
     displayName: string;
 };
-//# sourceMappingURL=SelectMenu.d.ts.map
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAKL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAUf,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAOvB;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC;;OAEG;IACH,OAAO,EAAE,eAAe,CAAC;IAEzB;;OAEG;IACH,gBAAgB,EAAE,CAChB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE7B;;OAEG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnD;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,UAAU,EAAE,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAErC;;;OAGG;IACH,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAE7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEtE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAErD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAErD;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAwBD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,KAAK,EAAE,MAAM,GACZ,MAAM,GAAG,SAAS,CAEpB;AA0ED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,eAAO,MAAM,IAAI;gWAwBd,kBAAkB;;CAyXpB,CAAC"}

package/dist/components/menu/Menu.js

@@ -0,0 +1,161 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { resolveCascade as n, resolveRadiusKey as r } from "../../utils/resolve-token.js";
+import { CheckIcon as i } from "../../icons/CheckIcon.js";
+import { Button as a } from "../button/Button.js";
+import { Input as o } from "../input/Input.js";
+import { SearchIcon as s } from "../../icons/SearchIcon.js";
+import { useBodyScrollLock as c } from "../../libs/use-body-scroll-lock.js";
+import { FALLBACK_MENU_CONFIG as l } from "./menu-config.js";
+import { edgeOptionIndex as u, matchingOptionIndex as d, nextOptionIndex as f } from "./menu-navigation.js";
+import { memo as p, useCallback as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { FloatingFocusManager as S, FloatingPortal as C } from "@floating-ui/react";
+//#region src/components/menu/Menu.tsx
+function w(e, t) {
+	return e ? `${e}-option-${t}` : void 0;
+}
+var ee = p(function({ filteredOptions: e, selectedValues: t, onOptionSelect: n, renderOption: r, itemVariant: o, itemColor: s, activeItemVariant: c, activeItemColor: l, radius: u, size: d, optionRefs: f, listboxId: p, onOptionFocus: m }) {
+	let h = (e) => t.includes(e);
+	return e.length === 0 ? /* @__PURE__ */ b("div", {
+		role: "status",
+		className: "px-3 py-4 text-xs text-foreground/70 text-center",
+		children: "No options found"
+	}) : /* @__PURE__ */ b(y, { children: e.map((e, t) => {
+		let g = h(e.value);
+		return r ? r(e, g) : /* @__PURE__ */ x(a, {
+			ref: (e) => {
+				f.current[t] = e;
+			},
+			id: w(p, t),
+			role: "option",
+			"aria-selected": g,
+			"aria-disabled": e.disabled ? !0 : void 0,
+			onFocus: () => m(t),
+			variant: g ? c : o,
+			color: g ? l : s,
+			radius: u,
+			size: d,
+			isDisabled: e.disabled,
+			onClick: () => n(e),
+			className: "w-full justify-between font-normal text-left transition-colors truncate",
+			children: [/* @__PURE__ */ b("span", { children: e.label }), g && /* @__PURE__ */ b(i, { className: "w-3.5 h-3.5 shrink-0 ml-2" })]
+		}, String(e.value));
+	}) });
+}), T = ({ isOpen: i, floatingStyles: a, context: p, getFloatingProps: y, setFloatingRef: w, isPositioned: T = !0, options: E = [], selectedValues: te = [], onOptionSelect: ne, isSearch: D = !0, searchPlaceholder: re = "Search...", searchInputName: ie = "menu-search", searchQuery: ae, onSearchChange: O, belowList: k, menuConfig: A, menuProps: j = {}, renderOption: oe, initialFocus: se, returnFocus: ce, activeIndex: M, onActiveIndexChange: N, isMultiSelectable: le = !1 }) => {
+	let P = t(), [ue, de] = v(""), F = ae ?? ue, fe = (e) => {
+		O ? O(e) : de(e);
+	}, pe = n(j?.lockScroll, A?.lockScroll, void 0, l.lockScroll), me = n(j?.portal, A?.portal, void 0, l.portal), he = n(j?.portalTarget, A?.portalTarget, void 0, typeof document < "u" ? document.body : null);
+	c(i && pe);
+	let I = g(() => !D || !F.trim() ? E : E.filter((e) => e.label.toLowerCase().includes(F.toLowerCase())), [
+		E,
+		D,
+		F
+	]), L = _([]), R = _(null), z = _(""), B = _(null), [ge, _e] = v(null), ve = m((e) => {
+		R.current = e, w(e);
+	}, [w]), V = M === void 0 ? ge : M, H = V !== null && V >= 0 && V < I.length ? V : null, U = m((e) => {
+		_e(e), N?.(e);
+	}, [N]), ye = m((e) => {
+		U(e);
+	}, [U]), W = m((e) => {
+		let t = L.current[e];
+		t && R.current?.contains(document.activeElement) && t.focus();
+	}, []), G = m((e) => {
+		e !== null && (U(e), W(e));
+	}, [W, U]), K = m((e) => {
+		G(f(I, H, e));
+	}, [
+		G,
+		H,
+		I
+	]), q = m((e) => {
+		G(u(I, e));
+	}, [G, I]), be = m((e) => {
+		z.current += e, G(d(I, z.current)), B.current && clearTimeout(B.current), B.current = setTimeout(() => {
+			z.current = "";
+		}, 500);
+	}, [G, I]);
+	h(() => () => {
+		B.current && clearTimeout(B.current);
+	}, []);
+	let xe = (e) => {
+		let t = e.target, n = t.tagName === "INPUT" || t.tagName === "TEXTAREA";
+		if (!(n && e.key !== "ArrowDown" && e.key !== "ArrowUp")) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), K(1);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), K(-1);
+				return;
+			case "Home":
+				e.preventDefault(), q("first");
+				return;
+			case "End":
+				e.preventDefault(), q("last");
+				return;
+			default: !n && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && be(e.key);
+		}
+	}, J = n(j?.itemVariant, A?.itemVariant, void 0, l.itemVariant), Y = n(j?.itemColor, A?.itemColor, P.defaultColor, l.itemColor), Se = n(j?.activeItemVariant, A?.activeItemVariant, P.defaultVariant, l.activeItemVariant), Ce = n(j?.activeItemColor, A?.activeItemColor, P.defaultColor, l.activeItemColor), X = r(j?.radius, A?.radius, P.defaultRadius, l.radius), Z = n(j?.size, A?.size, void 0, l.size), Q = y({ onKeyDown: xe }), we = typeof Q.id == "string" ? Q.id : void 0;
+	if (!i) return null;
+	let $ = /* @__PURE__ */ b(S, {
+		context: p,
+		modal: !1,
+		initialFocus: se,
+		returnFocus: ce,
+		children: /* @__PURE__ */ x("div", {
+			ref: ve,
+			style: { ...a },
+			className: e("w-full outline-none max-h-60 shadow-xl bg-background border border-border p-1 flex flex-col gap-0.5 overflow-y-auto scrollable-hidden", "transition-none", T ? "animate-in fade-in-0 zoom-in-95 slide-in-from-top-1 duration-150 ease-out" : "invisible opacity-0 pointer-events-none", j?.className),
+			role: "listbox",
+			"aria-multiselectable": le ? !0 : void 0,
+			...Q,
+			children: [
+				D && /* @__PURE__ */ b("div", {
+					className: "w-full p-1 mb-1 sticky top-0 z-10 border-b border-border",
+					children: /* @__PURE__ */ b(o, {
+						name: ie,
+						type: "text",
+						variant: "bordered",
+						radius: X,
+						color: Y,
+						size: Z,
+						value: F,
+						onChange: (e) => fe(e.target.value),
+						startContent: /* @__PURE__ */ b(s, { className: "w-3.5 h-3.5 text-foreground/70" }),
+						placeholder: re,
+						autoFocus: !0,
+						className: "w-full pl-8 h-8 text-xs bg-secondary/30 border-none focus-visible:ring-0"
+					})
+				}),
+				/* @__PURE__ */ b(ee, {
+					filteredOptions: I,
+					selectedValues: te,
+					onOptionSelect: ne,
+					renderOption: oe,
+					itemVariant: J,
+					itemColor: Y,
+					activeItemVariant: Se,
+					activeItemColor: Ce,
+					radius: X,
+					size: Z,
+					optionRefs: L,
+					listboxId: we,
+					onOptionFocus: ye
+				}),
+				k && /* @__PURE__ */ b("div", {
+					className: "border-t border-border pt-1 mt-1",
+					children: k
+				})
+			]
+		})
+	});
+	return me ? /* @__PURE__ */ b(C, {
+		root: he,
+		children: $
+	}) : $;
+};
+T.displayName = "Menu";
+//#endregion
+export { T as Menu, w as menuOptionId };

package/dist/components/menu/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Menu';
+export * from './menu-config';
+export * from './menu-navigation';
+export * from './use-menu-floating';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}

package/dist/components/menu/index.js

@@ -0,0 +1,4 @@
+export * from "./Menu.js";
+export * from "./menu-config.js";
+export * from "./menu-navigation.js";
+export * from "./use-menu-floating.js";

package/dist/components/{select-menu/select-menu-config.d.ts → menu/menu-config.d.ts}

@@ -3,7 +3,7 @@ import { Color, Radius, Size, Variant } from '../../shared';
  * A single option in the select menu.
  * Each option must have a label and a unique value.
  */
-export interface SelectMenuOption {
+export interface MenuOption {
     /**
      * Text displayed in the input and in the options list.
      */
@@ -26,7 +26,7 @@ export interface SelectMenuOption {
     [key: string]: unknown;
 }
 /**
- * Theme configuration options for the SelectMenu component.
+ * Theme configuration options for the Menu component.
  * Controls the visual appearance of the dropdown menu and its items.
  */
 export interface MenuConfig {
@@ -86,7 +86,7 @@ export interface MenuConfig {
      * Whether to render the menu through Floating UI's `FloatingPortal`.
      * When true, the menu is rendered at the document body level.
      * Defaults to true. This is typically controlled by the parent
-     * component (Select, MultiSelect, Autocomplete) via their own
+     * component (Dropmenu, MultiSelect, Autocomplete) via their own
      * config or props.
      *
      * @see FloatingPortal - https://floating-ui.com/docs/FloatingPortal
@@ -104,7 +104,7 @@ export interface MenuConfig {
  * These values are used when instance props, component config,
  * and global defaults are all undefined.
  */
-export declare const FALLBACK_SELECT_MENU_CONFIG: {
+export declare const FALLBACK_MENU_CONFIG: {
     radius: Radius;
     size: Size;
     itemVariant: Variant;
@@ -114,4 +114,4 @@ export declare const FALLBACK_SELECT_MENU_CONFIG: {
     lockScroll: boolean;
     portal: boolean;
 };
-//# sourceMappingURL=select-menu-config.d.ts.map
+//# sourceMappingURL=menu-config.d.ts.map

package/dist/components/menu/menu-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-config.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAElB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;YACf,MAAM;UACR,IAAI;iBACM,OAAO;eACP,KAAK;uBACC,OAAO;qBACP,KAAK;;;CAGpC,CAAC"}

package/dist/components/menu/menu-config.js

@@ -0,0 +1,14 @@
+"use client";
+//#region src/components/menu/menu-config.ts
+var e = {
+	radius: "md",
+	size: "md",
+	itemVariant: "ghost",
+	itemColor: "primary",
+	activeItemVariant: "faded",
+	activeItemColor: "primary",
+	lockScroll: !0,
+	portal: !0
+};
+//#endregion
+export { e as FALLBACK_MENU_CONFIG };

package/dist/components/menu/menu-navigation.d.ts

@@ -0,0 +1,38 @@
+import { MenuOption } from './menu-config';
+/**
+ * Positions of the options that can be reached by keyboard navigation.
+ *
+ * @param options - The rendered option list, in display order.
+ * @returns The indexes of the options that are not disabled.
+ */
+export declare function enabledOptionIndexes(options: MenuOption[]): number[];
+/**
+ * Resolves the option that a movement key lands on.
+ *
+ * Movement starts at the first option when nothing is current yet: forward
+ * movement lands on the first enabled option and backward movement on the last
+ * one. Once an option is current, movement wraps around the ends of the list.
+ *
+ * @param options - The rendered option list, in display order.
+ * @param currentIndex - The current option, or `null` when none is current.
+ * @param delta - Movement direction: `1` forward, `-1` backward.
+ * @returns The index to make current, or `null` when no option is reachable.
+ */
+export declare function nextOptionIndex(options: MenuOption[], currentIndex: number | null, delta: number): number | null;
+/**
+ * Resolves the first or last reachable option.
+ *
+ * @param options - The rendered option list, in display order.
+ * @param edge - Which end of the list to resolve.
+ * @returns The index to make current, or `null` when no option is reachable.
+ */
+export declare function edgeOptionIndex(options: MenuOption[], edge: "first" | "last"): number | null;
+/**
+ * Resolves the first reachable option whose label starts with `prefix`.
+ *
+ * @param options - The rendered option list, in display order.
+ * @param prefix - Characters typed so far, matched case insensitively.
+ * @returns The index to make current, or `null` when nothing matches.
+ */
+export declare function matchingOptionIndex(options: MenuOption[], prefix: string): number | null;
+//# sourceMappingURL=menu-navigation.d.ts.map

package/dist/components/menu/menu-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/menu/menu-navigation.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,CAKpE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,UAAU,EAAE,EACrB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,KAAK,EAAE,MAAM,GACZ,MAAM,GAAG,IAAI,CAaf;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,UAAU,EAAE,EACrB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,GAAG,IAAI,CAKf;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,UAAU,EAAE,EACrB,MAAM,EAAE,MAAM,GACb,MAAM,GAAG,IAAI,CAMf"}

package/dist/components/menu/menu-navigation.js

@@ -0,0 +1,20 @@
+"use client";
+//#region src/components/menu/menu-navigation.ts
+function e(e) {
+	return e.reduce((e, t, n) => (t.disabled || e.push(n), e), []);
+}
+function t(t, n, r) {
+	let i = e(t);
+	if (i.length === 0) return null;
+	let a = n === null ? -1 : i.indexOf(n);
+	return i[a === -1 ? r > 0 ? 0 : i.length - 1 : (a + r + i.length) % i.length];
+}
+function n(t, n) {
+	let r = e(t);
+	return r.length === 0 ? null : n === "first" ? r[0] : r[r.length - 1];
+}
+function r(t, n) {
+	return e(t).find((e) => t[e].label.toLowerCase().startsWith(n.toLowerCase())) ?? null;
+}
+//#endregion
+export { n as edgeOptionIndex, e as enabledOptionIndexes, r as matchingOptionIndex, t as nextOptionIndex };

package/dist/components/{select-menu/use-select-floating.d.ts → menu/use-menu-floating.d.ts}

@@ -1,10 +1,10 @@
 import { UseInteractionsReturn, Placement, useFloating } from '@floating-ui/react';
 /**
- * Configuration options for the useSelectFloating hook.
+ * Configuration options for the useMenuFloating hook.
  * Controls the floating element's behavior, positioning, size, and
  * interaction wiring (click-to-open, dismiss, and ARIA role).
  */
-export interface UseSelectFloatingProps {
+export interface UseMenuFloatingProps {
     /**
      * Whether the floating element is open.
      * Controls visibility and triggers positioning calculations.
@@ -52,19 +52,28 @@ export interface UseSelectFloatingProps {
     matchReferenceWidth?: boolean;
     /**
      * ARIA role applied to the floating element via useRole.
-     * "listbox" fits Select/MultiSelect/Autocomplete; a component like
-     * DatePicker reusing this hook can pass "dialog" instead.
+     * "listbox" fits Dropmenu/MultiSelect/Autocomplete; a component like
+     * Calendar reusing this hook can pass "dialog" instead.
      *
      * @default "listbox"
      */
     role?: "listbox" | "menu" | "dialog" | "tooltip" | "grid" | "tree";
+    /**
+     * Layer delta added to the trigger's detected stacking-context z-index to
+     * resolve the floating element's final `z-index`. Keeps anchored popups
+     * above their own container (for example a navbar) while staying underneath
+     * unrelated app chrome.
+     *
+     * @default ASHEE_LAYER.dropdown
+     */
+    zIndex?: number;
 }
 /**
- * Return value of useSelectFloating. Combines Floating UI's positioning
+ * Return value of useMenuFloating. Combines Floating UI's positioning
  * context with the resolved interaction prop-getters, so consumers don't
  * need to wire useClick/useDismiss/useRole/useInteractions themselves.
  */
-export interface UseSelectFloatingReturn<T extends HTMLElement> {
+export interface UseMenuFloatingReturn<T extends HTMLElement> {
     refs: ReturnType<typeof useFloating<T>>["refs"];
     context: ReturnType<typeof useFloating<T>>["context"];
     floatingStyles: React.CSSProperties;
@@ -93,13 +102,14 @@ export interface UseSelectFloatingReturn<T extends HTMLElement> {
  * @param props.padding - Viewport padding for shift middleware. Defaults to 8.
  * @param props.matchReferenceWidth - Whether to match reference width. Defaults to true.
  * @param props.role - ARIA role for the floating element. Defaults to "listbox".
+ * @param props.zIndex - Layer delta for the floating element. Defaults to `ASHEE_LAYER.dropdown`.
  * @returns Floating UI refs/context/styles plus `isPositioned` and the
  * resolved `getReferenceProps`/`getFloatingProps` prop-getters.
  *
  * @example
  * ```tsx
  * const { refs, context, floatingStyles, getReferenceProps, getFloatingProps } =
- *   useSelectFloating({
+ *   useMenuFloating({
  *     isOpen,
  *     onOpenChange: setIsOpen,
  *     disabled: props.disabled,
@@ -118,7 +128,7 @@ export interface UseSelectFloatingReturn<T extends HTMLElement> {
  * ```
  *
  * @see useFloating - The underlying Floating UI hook.
- * @see Select - The select component that uses this hook.
+ * @see Dropmenu - The select component that uses this hook.
  */
-export declare function useSelectFloating<T extends HTMLElement = HTMLElement>({ isOpen, onOpenChange, disabled, placement, offsetDistance, padding, matchReferenceWidth, role, }: UseSelectFloatingProps): UseSelectFloatingReturn<T>;
-//# sourceMappingURL=use-select-floating.d.ts.map
+export declare function useMenuFloating<T extends HTMLElement = HTMLElement>({ isOpen, onOpenChange, disabled, placement, offsetDistance, padding, matchReferenceWidth, role, zIndex, }: UseMenuFloatingProps): UseMenuFloatingReturn<T>;
+//# sourceMappingURL=use-menu-floating.d.ts.map

package/dist/components/menu/use-menu-floating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu-floating.d.ts","sourceRoot":"","sources":["../../../src/components/menu/use-menu-floating.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAIL,KAAK,SAAS,EAKd,WAAW,EAGZ,MAAM,oBAAoB,CAAC;AAI5B;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAEnE;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,WAAW;IAC1D,IAAI,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAChD,OAAO,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,qBAAqB,CAAC,mBAAmB,CAAC,CAAC;IAC9D,gBAAgB,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;CAC7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EACnE,MAAM,EACN,YAAY,EACZ,QAAgB,EAChB,SAA0B,EAC1B,cAAkB,EAClB,OAAW,EACX,mBAA0B,EAC1B,IAAgB,EAChB,MAA6B,GAC9B,EAAE,oBAAoB,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAmDjD"}

package/dist/components/menu/use-menu-floating.js

@@ -0,0 +1,43 @@
+"use client";
+"use client";
+import { ASHEE_LAYER as e } from "../../utils/stacking.js";
+import { useFloatingZIndex as t } from "../../libs/use-floating-z-index.js";
+import { autoUpdate as n, flip as r, offset as i, shift as a, size as o, useClick as s, useDismiss as c, useFloating as l, useInteractions as u, useRole as d } from "@floating-ui/react";
+//#region src/components/menu/use-menu-floating.ts
+function f({ isOpen: f, onOpenChange: p, disabled: m = !1, placement: h = "bottom-start", offsetDistance: g = 4, padding: _ = 8, matchReferenceWidth: v = !0, role: y = "listbox", zIndex: b = e.dropdown }) {
+	let x = l({
+		open: f,
+		onOpenChange: (e) => !m && p(e),
+		placement: h,
+		strategy: "fixed",
+		whileElementsMounted: n,
+		middleware: [
+			i(g),
+			r(),
+			a({ padding: _ }),
+			o({ apply({ availableHeight: e, elements: t }) {
+				Object.assign(t.floating.style, {
+					maxHeight: `${e}px`,
+					...v && { width: `${t.reference.getBoundingClientRect().width}px` }
+				});
+			} })
+		]
+	}), S = t(x.refs.reference, f, b), { context: C } = x, w = s(C, { enabled: !m }), T = c(C), E = d(C, { role: y }), { getReferenceProps: D, getFloatingProps: O } = u([
+		w,
+		T,
+		E
+	]);
+	return {
+		refs: x.refs,
+		context: C,
+		floatingStyles: {
+			...x.floatingStyles,
+			zIndex: S
+		},
+		isPositioned: x.isPositioned,
+		getReferenceProps: D,
+		getFloatingProps: O
+	};
+}
+//#endregion
+export { f as useMenuFloating };