asheeui 0.7.0 → 1.0.0

package/dist/components/input/Input.js

@@ -1,9 +1,9 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { RADIUS_CLASS as n } from "../../shared/radius.js";
-import { resolveVariantClass as r } from "../../shared/variant.js";
+import { RADIUS_CLASS as t } from "../../shared/radius.js";
+import { resolveVariantClass as n } from "../../shared/variant.js";
+import { useAsheeConfig as r } from "../../libs/context.js";
 import { resolveCascade as i, resolveClassKey as a, resolveRadiusKey as o } from "../../utils/resolve-token.js";
 import { FieldShell as s } from "../field/FieldShell.js";
 import { FALLBACK_FIELD_CONFIG as c } from "../field/field-config.js";
@@ -13,13 +13,13 @@ import d, { forwardRef as f, useCallback as p, useId as m, useImperativeHandle a
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/input/Input.tsx
 var v = f(({ size: f, radius: v, variant: y, color: b, status: x, label: S, labelAlign: C, description: w, message: T, required: E, isLoading: D, id: O, className: k, disabled: A, startContent: j, endContent: M, style: N, onFocus: P, onBlur: F, enableVirtualKeyboard: I = !0, ...L }, R) => {
-	let z = t(), B = z.components?.input, V = te(null);
+	let z = r(), B = z.components?.input, V = te(null);
 	h(R, () => V.current);
 	let H = m(), U = O ?? H, W = w ? `${U}-description` : void 0, G = T ? `${U}-message` : void 0, K = [W, G].filter(Boolean).join(" ") || void 0, { handleFocus: q, handleBlur: J } = l(U, V, !!I, typeof I == "object" && I ? I : void 0), Y = p((e) => {
 		q(e), P?.(e);
 	}, [q, P]), X = p((e) => {
 		J(), F?.(e);
-	}, [J, F]), Z = i(f, B?.size, void 0, c.size), Q = i(y, B?.variant, z.defaultVariant, c.variant), ne = i(b, B?.color, z.defaultColor, c.color), re = o(typeof v == "string" ? v : void 0, typeof B?.radius == "string" ? B.radius : void 0, z.defaultRadius, c.radius), $ = x ?? c.status, ie = $ === "error" ? "danger" : $ === "success" ? "success" : $ === "warning" ? "warning" : ne, ae = i(C, B?.labelAlign, void 0, c.labelAlign), oe = r(Q, ie), se = $ === "default" ? "" : ee[$], ce = Q === "underlined" ? "rounded-none" : a(re, n, c.radius);
+	}, [J, F]), Z = i(f, B?.size, void 0, c.size), Q = i(y, B?.variant, z.defaultVariant, c.variant), ne = i(b, B?.color, z.defaultColor, c.color), re = o(typeof v == "string" ? v : void 0, typeof B?.radius == "string" ? B.radius : void 0, z.defaultRadius, c.radius), $ = x ?? c.status, ie = $ === "error" ? "danger" : $ === "success" ? "success" : $ === "warning" ? "warning" : ne, ae = i(C, B?.labelAlign, void 0, c.labelAlign), oe = n(Q, ie), se = $ === "default" ? "" : ee[$], ce = Q === "underlined" ? "rounded-none" : a(re, t, c.radius);
 	return /* @__PURE__ */ g(s, {
 		id: U,
 		label: S,

package/dist/components/link/Link.d.ts

@@ -35,15 +35,17 @@ export interface LinkProps extends BaseLinkProps {
      */
     children?: ReactNode;
     /**
-     * Custom link component to use instead of the native <a> tag.
-     * Useful for framework routing components like Next.js Link or TanStack Router Link.
+     * Component that replaces the native anchor, such as a framework router link.
+     *
+     * The substitution API is shared with `Image` and `Form`: `component` names
+     * the component and `componentProps` carries the props it needs.
      */
-    linkComponent?: ElementType;
+    component?: ElementType;
     /**
-     * Additional props to pass to the custom link component (e.g., { prefetch: true }).
-     * These take precedence over the component's own props.
+     * Additional props for `component` (for example `{ prefetch: true }`).
+     * These take precedence over the props the framework passes itself.
      */
-    linkProps?: Record<string, unknown>;
+    componentProps?: Record<string, unknown>;
 }
 /**
  * A navigational link with support for variants, colors, sizes, and
@@ -72,8 +74,8 @@ export interface LinkProps extends BaseLinkProps {
  * @param props.startIcon - Icon rendered before the link text.
  * @param props.endIcon - Icon rendered after the link text.
  * @param props.children - The link text content.
- * @param props.linkComponent - Custom link component for framework routing.
- * @param props.linkProps - Additional props for the custom link component.
+ * @param props.component - Component that replaces the native anchor.
+ * @param props.componentProps - Additional props for that component.
  * @param props.className - Extra CSS classes for the link.
  * @param props.target - Native target attribute.
  * @param props.rel - Native rel attribute.
@@ -102,8 +104,8 @@ export interface LinkProps extends BaseLinkProps {
  *
  * <Link
  *   href="/blog/post-1"
- *   linkComponent={NextLink}
- *   linkProps={{ prefetch: true }}
+ *   component={NextLink}
+ *   componentProps={{ prefetch: true }}
  *   isExternal={false}
  * >
  *   Read Post

package/dist/components/link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAEhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,EAEL,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AASvB,KAAK,aAAa,GAAG,UAAU,GAC7B,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAE5B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,eAAO,MAAM,IAAI,yGAqLhB,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAEhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,EAEL,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AASvB,KAAK,aAAa,GAAG,UAAU,GAC7B,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,eAAO,MAAM,IAAI,yGAqLhB,CAAC"}

package/dist/components/link/Link.js

@@ -9,7 +9,7 @@ import { LINK_COLOR_CLASS as o, LINK_ICON_SIZE_CLASS as s, LINK_SIZE_CLASS as c,
 import { forwardRef as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/link/Link.tsx
-var m = d(({ href: d, variant: m, color: h, size: g, underline: _, isExternal: v, disabled: y = !1, startIcon: b, endIcon: x, children: S, className: C, style: w, target: T, rel: E, onClick: D, linkComponent: O, linkProps: k, ...A }, j) => {
+var m = d(({ href: d, variant: m, color: h, size: g, underline: _, isExternal: v, disabled: y = !1, startIcon: b, endIcon: x, children: S, className: C, style: w, target: T, rel: E, onClick: D, component: O, componentProps: k, ...A }, j) => {
 	let M = t(), N = M.components?.link, P = n(g, N?.size, void 0, a.size), F = n(m, N?.variant, void 0, a.variant), I = n(h, N?.color, M.defaultColor, a.color), L = n(_, N?.underline, void 0, a.underline), R = v ?? N?.isExternal ?? a.isExternal, z = F === "muted" ? u.muted : e(r(I, o, a.color), r(F, u, a.variant)), B = r(P, c, a.size), V = r(P, s, a.size), H = r(L, l, a.underline), U = T ?? (R ? "_blank" : void 0), W = E ?? (R || U === "_blank" ? "noopener noreferrer" : void 0), G = (e) => {
 		if (y) {
 			e.preventDefault();

package/dist/components/marquee/Marquee.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Marquee.d.ts","sourceRoot":"","sources":["../../../src/components/marquee/Marquee.tsx"],"names":[],"mappings":"AAUA,OAAO,EAA8B,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAI5E,OAAO,EAGL,KAAK,aAAa,EAGnB,MAAM,kBAAkB,CAAC;AAO1B,KAAK,gBAAgB,GAAG,aAAa,GACnC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD;;;OAGG;IACH,QAAQ,EAAE,SAAS,EAAE,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,eAAO,MAAM,OAAO,yGAoKnB,CAAC"}
+{"version":3,"file":"Marquee.d.ts","sourceRoot":"","sources":["../../../src/components/marquee/Marquee.tsx"],"names":[],"mappings":"AAUA,OAAO,EAA8B,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAK5E,OAAO,EAGL,KAAK,aAAa,EAGnB,MAAM,kBAAkB,CAAC;AAO1B,KAAK,gBAAgB,GAAG,aAAa,GACnC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD;;;OAGG;IACH,QAAQ,EAAE,SAAS,EAAE,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,eAAO,MAAM,OAAO,yGA4KnB,CAAC"}

package/dist/components/marquee/Marquee.js

@@ -3,54 +3,57 @@
 import { cn as e } from "../../utils/cn.js";
 import { useAsheeConfig as t } from "../../libs/context.js";
 import { resolveCascade as n } from "../../utils/resolve-token.js";
-import { FALLBACK_MARQUEE_CONFIG as r } from "./marquee-config.js";
-import { MARQUEE_FADE_END_CLASS as i, MARQUEE_FADE_START_CLASS as a, MARQUEE_SPEED_PRESETS as o } from "./marquee-styles.js";
-import { forwardRef as s, isValidElement as c, useMemo as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { usePrefersReducedMotion as r } from "../../libs/use-prefers-reduced-motion.js";
+import { FALLBACK_MARQUEE_CONFIG as i } from "./marquee-config.js";
+import { MARQUEE_FADE_END_CLASS as a, MARQUEE_FADE_START_CLASS as o, MARQUEE_SPEED_PRESETS as s } from "./marquee-styles.js";
+import { forwardRef as c, isValidElement as l, useMemo as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/marquee/Marquee.tsx
-var p = s(({ children: s, axis: p, direction: m, speed: h, gap: g, pauseOnHover: _, fadeEdges: v, className: y, itemClassName: b, ...x }, S) => {
-	let C = t().components?.marquee, w = n(p, C?.axis, void 0, r.axis), T = n(m, C?.direction, void 0, r.direction), E = n(h, C?.speed, void 0, r.speed), D = n(g, C?.gap, void 0, r.gap), O = n(_, C?.pauseOnHover, void 0, r.pauseOnHover), k = n(v, C?.fadeEdges, void 0, r.fadeEdges), A = typeof E == "number" ? E : o[E] ?? o.normal, j = w === "y", M = l(() => [s, s].map((t, n) => {
+var m = c(({ children: c, axis: m, direction: h, speed: g, gap: _, pauseOnHover: v, fadeEdges: y, className: b, itemClassName: x, ...S }, C) => {
+	let w = t().components?.marquee, T = n(m, w?.axis, void 0, i.axis), E = n(h, w?.direction, void 0, i.direction), D = n(g, w?.speed, void 0, i.speed), O = n(_, w?.gap, void 0, i.gap), k = n(v, w?.pauseOnHover, void 0, i.pauseOnHover), A = n(y, w?.fadeEdges, void 0, i.fadeEdges), j = typeof D == "number" ? D : s[D] ?? s.normal, M = T === "y", N = r(), P = u(() => [c, c].map((t, n) => {
 		let r = n === 0 ? "primary" : "secondary";
-		return /* @__PURE__ */ d("div", {
-			className: e("flex shrink-0", j ? "flex-col" : "flex-row"),
-			style: { gap: D },
+		return /* @__PURE__ */ f("div", {
+			className: e("flex shrink-0", M ? "flex-col" : "flex-row"),
+			style: { gap: O },
 			"aria-hidden": n === 1,
 			children: t.map((t, n) => {
-				let i = c(t) && t.key ? `${r}-${t.key}` : `${r}-item-${n}`;
-				return /* @__PURE__ */ d("div", {
-					className: e("shrink-0", b),
+				let i = l(t) && t.key ? `${r}-${t.key}` : `${r}-item-${n}`;
+				return /* @__PURE__ */ f("div", {
+					className: e("shrink-0", x),
 					children: t
 				}, i);
 			})
 		}, `${r}-set`);
 	}), [
-		s,
-		j,
-		D,
-		b
+		c,
+		M,
+		O,
+		x
 	]);
-	return /* @__PURE__ */ f("div", {
-		ref: S,
-		className: e("group relative scrollbar-hide overflow-hidden", j ? "h-full" : "w-full", y),
-		...x,
+	return /* @__PURE__ */ p("div", {
+		ref: C,
+		className: e("group relative scrollbar-hide overflow-hidden", M ? "h-full" : "w-full", b),
+		...S,
 		children: [
-			/* @__PURE__ */ d("style", { children: "\n          @keyframes marquee-x {\n            from { transform: translateX(0%); }\n            to { transform: translateX(-50%); }\n          }\n          @keyframes marquee-y {\n            from { transform: translateY(0%); }\n            to { transform: translateY(-50%); }\n          }\n        " }),
-			/* @__PURE__ */ d("div", {
-				className: e("flex", j ? "flex-col" : "flex-row w-max", O && "group-hover:[animation-play-state:paused]"),
+			/* @__PURE__ */ f("style", { children: "\n          @keyframes marquee-x {\n            from { transform: translateX(0%); }\n            to { transform: translateX(-50%); }\n          }\n          @keyframes marquee-y {\n            from { transform: translateY(0%); }\n            to { transform: translateY(-50%); }\n          }\n        " }),
+			/* @__PURE__ */ f("div", {
+				className: e("flex", M ? "flex-col" : "flex-row w-max", k && "group-hover:[animation-play-state:paused]"),
 				style: {
-					gap: D,
-					animationName: j ? "marquee-y" : "marquee-x",
-					animationDuration: `${A}s`,
-					animationTimingFunction: "linear",
-					animationIterationCount: "infinite",
-					animationDirection: T === "reverse" ? "reverse" : "normal"
+					gap: O,
+					...N ? { animation: "none" } : {
+						animationName: M ? "marquee-y" : "marquee-x",
+						animationDuration: `${j}s`,
+						animationTimingFunction: "linear",
+						animationIterationCount: "infinite",
+						animationDirection: E === "reverse" ? "reverse" : "normal"
+					}
 				},
-				children: M
+				children: P
 			}),
-			k && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", { className: e("absolute z-10 pointer-events-none", a[w]) }), /* @__PURE__ */ d("div", { className: e("absolute z-10 pointer-events-none", i[w]) })] })
+			A && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", { className: e("absolute z-10 pointer-events-none", o[T]) }), /* @__PURE__ */ f("div", { className: e("absolute z-10 pointer-events-none", a[T]) })] })
 		]
 	});
 });
-p.displayName = "Marquee";
+m.displayName = "Marquee";
 //#endregion
-export { p as Marquee };
+export { m as Marquee };

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/{select-menu/select-menu-config.js → menu/menu-config.js}

@@ -1,5 +1,5 @@
 "use client";
-//#region src/components/select-menu/select-menu-config.ts
+//#region src/components/menu/menu-config.ts
 var e = {
 	radius: "md",
 	size: "md",
@@ -11,4 +11,4 @@ var e = {
 	portal: !0
 };
 //#endregion
-export { e as FALLBACK_SELECT_MENU_CONFIG };
+export { e as FALLBACK_MENU_CONFIG };