@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/navigation/Menu/MenuContext.mjs

@@ -0,0 +1,60 @@
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+//#region src/components/navigation/Menu/MenuContext.ts
+var s = e(null), c = e(null), l = e(null);
+function u(e) {
+	let t = n(s);
+	if (!t) throw Error(`${e} must be rendered inside <Menu>.`);
+	return t;
+}
+function d(e) {
+	let t = n(c);
+	if (!t) throw Error(`${e} must be rendered inside <Menu>.`);
+	return t;
+}
+function f(e) {
+	let t = n(l);
+	if (!t) throw Error(`${e} must be rendered inside <Menu.Sub>.`);
+	return t;
+}
+function p() {
+	let [e, n] = o(null), s = a(void 0), c = a(void 0), l = t(() => {
+		s.current !== void 0 && window.clearTimeout(s.current), s.current = void 0, c.current = void 0;
+	}, []), u = t((e) => {
+		l(), n(e);
+	}, [l]), d = t((e) => {
+		l(), n((t) => t === e ? null : t);
+	}, [l]), f = t((e, t) => {
+		(s.current === void 0 || c.current !== e) && (l(), c.current = e, s.current = window.setTimeout(() => {
+			s.current = void 0, c.current = void 0, n(e);
+		}, t));
+	}, [l]);
+	return r(() => l, [l]), i(() => ({
+		openSub: e,
+		setOpenSub: u,
+		closeSub: d,
+		scheduleSub: f,
+		cancelSubTimer: l
+	}), [
+		e,
+		u,
+		d,
+		f,
+		l
+	]);
+}
+var m = "data-menu-item";
+function h(e) {
+	return Array.from(e.querySelectorAll(`[${m}]`)).filter((t) => t.closest("[role=\"menu\"]") === e);
+}
+function g(e) {
+	return e.getAttribute("data-menu-text") || (e.querySelector("[data-menu-label]")?.textContent ?? e.textContent ?? "").trim();
+}
+function _(e) {
+	e && (e.focus({ preventScroll: !0 }), e.scrollIntoView?.({ block: "nearest" }));
+}
+var v = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),label,summary,iframe,[contenteditable='true'],[tabindex]";
+function y(e) {
+	return e ? "left-start" : "right-start";
+}
+//#endregion
+export { m as ITEM_ATTR, c as MenuLevelContext, l as MenuSubContext, s as MenuTreeContext, v as PRESS_FOCUSABLE, y as defaultSubPlacement, _ as focusItem, g as getItemText, h as getMenuItems, d as useMenuLevel, f as useMenuSub, u as useMenuTree, p as useSubmenuState };

package/dist/components/navigation/Menu/MenuItem.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useMergedRef.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Icon/icons.cjs.js"),i=require("../../primitives/Icon/Icon.cjs.js"),a=require("../../primitives/Kbd/Kbd.cjs.js"),o=require("./MenuContext.cjs.js"),s=require("./Menu.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u={neutral:void 0,danger:s.default.danger};function d(e){let t={target:e,defaultPrevented:!1,preventDefault:()=>{t.defaultPrevented=!0}};return t}var f={cmd:`Meta`,meta:`Meta`,ctrl:`Control`,alt:`Alt`,option:`Alt`,shift:`Shift`,enter:`Enter`,return:`Enter`,esc:`Escape`,tab:`Tab`,space:`Space`,backspace:`Backspace`,delete:`Delete`,capslock:`CapsLock`,up:`ArrowUp`,down:`ArrowDown`,left:`ArrowLeft`,right:`ArrowRight`,pageup:`PageUp`,pagedown:`PageDown`,home:`Home`,end:`End`};function p(e,t){return e.map(e=>{let n=e.toLowerCase();return n===`mod`?t===`mac`?`Meta`:`Control`:f[n]??(e.length===1?e.toUpperCase():e)}).join(`+`)}var m={sm:`sm`,md:`sm`,lg:`md`},h=100,g=300,_={x:NaN,y:NaN},v=({role:e,tone:r=`neutral`,disabled:i=!1,icon:c,indicator:d,shortcut:f,end:v,href:y,target:b,rel:x,subId:S,textValue:C,onActivate:w,children:T,className:E,onClick:D,onPointerMove:O,ref:k,"aria-keyshortcuts":A,...j})=>{let M=o.useMenuLevel(`Menu.Item`),N=o.useMenuTree(`Menu.Item`),P=a.useKbdPlatform(),F=t.useMergedRef(k),I=e=>{if(O?.(e),e.defaultPrevented||e.pointerType===`touch`)return;let t=_.x!==e.clientX||_.y!==e.clientY;if(_.x=e.clientX,_.y=e.clientY,!t)return;let n=e.currentTarget,r=S&&M.openSub===S?document.getElementById(n.getAttribute(`aria-controls`)??``):null,a=!!r&&r.contains(document.activeElement);document.activeElement!==n&&!a&&n.focus({preventScroll:!0}),S?M.openSub===S?M.cancelSubTimer():i||M.scheduleSub(S,h):M.openSub!==null&&M.scheduleSub(null,g)},L=e=>{if(i){e.preventDefault();return}D?.(e),!e.defaultPrevented&&w(e)},R=Array.isArray(f),z=A??(R?p(f,P):void 0),B={...j,ref:F,role:e,tabIndex:-1,"aria-disabled":i||void 0,"aria-keyshortcuts":z,"data-disabled":i?``:void 0,"data-menu-text":C,[o.ITEM_ATTR]:``,className:n.cx(s.default.item,u[r],E),onClick:L,onPointerMove:I},V=(0,l.jsxs)(l.Fragment,{children:[d!==void 0&&(0,l.jsx)(`span`,{"aria-hidden":`true`,className:s.default.indicator,children:d}),c&&(0,l.jsx)(`span`,{"aria-hidden":`true`,className:s.default.icon,children:c}),(0,l.jsx)(`span`,{className:s.default.label,"data-menu-label":``,children:T}),f!=null&&f!==!1&&(0,l.jsx)(`span`,{"aria-hidden":`true`,className:s.default.shortcut,children:R?(0,l.jsx)(a.KbdShortcut,{keys:f,size:m[N.size],variant:`soft`}):f}),v]});return y!==void 0&&!i?(0,l.jsx)(`a`,{...B,href:y,target:b,rel:x,children:V}):(0,l.jsx)(`div`,{...B,children:V})};function y(e,t){let n=o.useMenuTree(`Menu.Item`);return r=>{(e??n.closeOnSelect??t)&&!r.defaultPrevented&&n.closeAll(`force`)}}var b=({onSelect:e,closeOnSelect:t,...n})=>{let r=y(t,!0);return(0,l.jsx)(v,{...n,role:`menuitem`,onActivate:t=>{let n=d(t.currentTarget);e?.(n),r(n)}})},x=({checked:t,defaultChecked:n=!1,onCheckedChange:i,onSelect:a,closeOnSelect:o,...s})=>{let[c,u]=e.useControllableState({value:t,defaultValue:n,onChange:i}),f=y(o,!1);return(0,l.jsx)(v,{...s,role:`menuitemcheckbox`,"aria-checked":c,"data-state":c?`checked`:`unchecked`,indicator:c?(0,l.jsx)(r.CheckIcon,{size:`sm`,strokeWidth:3}):null,onActivate:e=>{let t=d(e.currentTarget);a?.(t),u(!c),f(t)}})},S=(0,c.createContext)(null);function C(){let e=(0,c.useId)(),[t,n]=(0,c.useState)(null);return{value:(0,c.useMemo)(()=>({defaultLabelId:e,setLabelId:n}),[e]),labelledBy:t??void 0}}var w=({className:e,children:t,...r})=>{let{value:i,labelledBy:a}=C();return(0,l.jsx)(S.Provider,{value:i,children:(0,l.jsx)(`div`,{role:`group`,"aria-labelledby":r[`aria-label`]?void 0:a,...r,className:n.cx(s.default.group,e),children:t})})},T=({className:e,id:t,...r})=>{let i=(0,c.useContext)(S),a=t??i?.defaultLabelId,o=i?.setLabelId;return(0,c.useLayoutEffect)(()=>{if(o&&a)return o(a),()=>o(null)},[o,a]),(0,l.jsx)(`div`,{...r,id:a,className:n.cx(s.default.groupLabel,e)})},E=({className:e,...t})=>(0,l.jsx)(`div`,{role:`separator`,"aria-orientation":`horizontal`,...t,className:n.cx(s.default.separator,e)}),D=(0,c.createContext)(null),O=({value:t,defaultValue:r,onValueChange:i,className:a,children:o,...u})=>{let[d,f]=e.useControllableState({value:t,defaultValue:r??null,onChange:e=>{e!==null&&i?.(e)}}),p=(0,c.useMemo)(()=>({value:d,setValue:f}),[d,f]),{value:m,labelledBy:h}=C();return(0,l.jsx)(S.Provider,{value:m,children:(0,l.jsx)(D.Provider,{value:p,children:(0,l.jsx)(`div`,{role:`group`,"aria-labelledby":u[`aria-label`]?void 0:h,...u,className:n.cx(s.default.group,a),children:o})})})},k=({value:e,onSelect:t,closeOnSelect:n,...r})=>{let a=(0,c.useContext)(D),o=y(n,!1);if(!a)throw Error(`Menu.RadioItem must be rendered inside <Menu.RadioGroup>.`);let s=a.value===e;return(0,l.jsx)(v,{...r,role:`menuitemradio`,"aria-checked":s,"data-state":s?`checked`:`unchecked`,indicator:s?(0,l.jsx)(i.Icon,{size:`sm`,children:(0,l.jsx)(`circle`,{cx:`12`,cy:`12`,r:`5`,fill:`currentColor`,stroke:`none`})}):null,onActivate:n=>{let r=d(n.currentTarget);t?.(r),a.setValue(e),o(r)}})};exports.MenuCheckboxItem=x,exports.MenuGroup=w,exports.MenuItem=b,exports.MenuItemBase=v,exports.MenuLabel=T,exports.MenuRadioGroup=O,exports.MenuRadioItem=k,exports.MenuSeparator=E;

package/dist/components/navigation/Menu/MenuItem.d.ts

@@ -0,0 +1,133 @@
+import { ComponentPropsWithRef, MouseEvent, ReactNode, Ref } from 'react';
+import { KbdKeyToken } from '../../primitives/Kbd';
+/** Semantic color of an item. `danger` marks destructive actions. */
+export type MenuItemTone = "neutral" | "danger";
+/**
+ * A keyboard shortcut hint: an array of key tokens (`["mod", "D"]`), shown
+ * with `KbdShortcut` and exposed as `aria-keyshortcuts`, or any custom node
+ * (then pass `aria-keyshortcuts` yourself).
+ */
+export type MenuShortcut = Array<KbdKeyToken | (string & {})> | ReactNode;
+/**
+ * Passed to `onSelect`. Call `preventDefault()` to keep the menu open after
+ * this selection.
+ */
+export interface MenuSelectEvent {
+    /** The item element that was selected. */
+    target: HTMLElement;
+    /** True once `preventDefault()` was called. */
+    defaultPrevented: boolean;
+    /** Keeps the menu open after this selection. */
+    preventDefault: () => void;
+}
+/** Props every item shares. */
+interface MenuItemSharedProps extends Omit<ComponentPropsWithRef<"div">, "onSelect" | "ref" | "role"> {
+    /** The item's label. */
+    children?: ReactNode;
+    /** Shows the item as unavailable. It stays focusable (`aria-disabled`) but can't be activated. @default false */
+    disabled?: boolean;
+    /** Decorative icon before the label. Hidden from assistive technology. */
+    icon?: ReactNode;
+    /** Text used for typeahead when the label isn't plain text. Defaults to the label's text. */
+    textValue?: string;
+    /** Ref to the item element (a `div`, or an `a` for link items). */
+    ref?: Ref<HTMLElement>;
+}
+interface ItemBaseProps extends MenuItemSharedProps {
+    role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+    tone?: MenuItemTone;
+    shortcut?: MenuShortcut;
+    /** The checkbox/radio slot. `undefined` renders no slot. */
+    indicator?: ReactNode;
+    /** Trailing content (the submenu chevron). */
+    end?: ReactNode;
+    href?: string;
+    target?: string;
+    rel?: string;
+    /** Set on a `SubTrigger`: hovering opens this submenu. */
+    subId?: string;
+    onActivate: (event: MouseEvent<HTMLElement>) => void;
+}
+/** @internal Renders one menu item and wires focus, hover, and activation. */
+export declare const MenuItemBase: ({ role, tone, disabled, icon, indicator, shortcut, end, href, target, rel, subId, textValue, onActivate, children, className, onClick, onPointerMove, ref, "aria-keyshortcuts": ariaKeyShortcuts, ...rest }: ItemBaseProps) => import("react").JSX.Element;
+export interface MenuItemProps extends MenuItemSharedProps {
+    /**
+     * Called when the item is chosen by click, Enter, or Space. Call
+     * `event.preventDefault()` to keep the menu open.
+     */
+    onSelect?: (event: MenuSelectEvent) => void;
+    /** Semantic color. Use `danger` for destructive actions (pair it with a clear label or icon). @default "neutral" */
+    tone?: MenuItemTone;
+    /** Keyboard shortcut hint shown at the end of the item, e.g. `["mod", "D"]`. */
+    shortcut?: MenuShortcut;
+    /** Close the menu after selection. Defaults to the root `closeOnSelect`, then `true`. */
+    closeOnSelect?: boolean;
+    /** Render the item as a link (`<a role="menuitem">`) to this URL. Dropped while `disabled`. */
+    href?: string;
+    /** Link target, with `href`. */
+    target?: string;
+    /** Link `rel`, with `href`. */
+    rel?: string;
+}
+/** An action (`role="menuitem"`). Closes the menu when selected by default. */
+export declare const MenuItem: ({ onSelect, closeOnSelect, ...rest }: MenuItemProps) => import("react").JSX.Element;
+export interface MenuCheckboxItemProps extends MenuItemSharedProps {
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Initial checked state when uncontrolled. @default false */
+    defaultChecked?: boolean;
+    /** Called with the next checked state when the item is toggled. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Called when the item is chosen, before it toggles. `preventDefault()` keeps the menu open (it already does by default). */
+    onSelect?: (event: MenuSelectEvent) => void;
+    /** Keyboard shortcut hint shown at the end of the item. */
+    shortcut?: MenuShortcut;
+    /** Close the menu after toggling. Defaults to the root `closeOnSelect`, then `false`. */
+    closeOnSelect?: boolean;
+}
+/**
+ * An on/off option (`role="menuitemcheckbox"` with `aria-checked`). Shows a
+ * check icon when checked. Keeps the menu open by default.
+ */
+export declare const MenuCheckboxItem: ({ checked: checkedProp, defaultChecked, onCheckedChange, onSelect, closeOnSelect, ...rest }: MenuCheckboxItemProps) => import("react").JSX.Element;
+export type MenuGroupProps = ComponentPropsWithRef<"div">;
+/**
+ * Groups related items (`role="group"`). A `Menu.Label` inside names the
+ * group; otherwise pass `aria-label`.
+ */
+export declare const MenuGroup: ({ className, children, ...rest }: MenuGroupProps) => import("react").JSX.Element;
+export type MenuLabelProps = ComponentPropsWithRef<"div">;
+/**
+ * A small heading for a group of items. Inside `Menu.Group` or
+ * `Menu.RadioGroup` it names the group (`aria-labelledby`). Not focusable.
+ */
+export declare const MenuLabel: ({ className, id, ...rest }: MenuLabelProps) => import("react").JSX.Element;
+export type MenuSeparatorProps = Omit<ComponentPropsWithRef<"div">, "children">;
+/** A divider between groups of items (`role="separator"`). */
+export declare const MenuSeparator: ({ className, ...rest }: MenuSeparatorProps) => import("react").JSX.Element;
+export interface MenuRadioGroupProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange"> {
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial selected value when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the newly selected value. */
+    onValueChange?: (value: string) => void;
+}
+/**
+ * A set of mutually exclusive `Menu.RadioItem`s (`role="group"`). Name it
+ * with a `Menu.Label` inside or `aria-label`.
+ */
+export declare const MenuRadioGroup: ({ value: valueProp, defaultValue, onValueChange, className, children, ...rest }: MenuRadioGroupProps) => import("react").JSX.Element;
+export interface MenuRadioItemProps extends MenuItemSharedProps {
+    /** The value this item selects in its `Menu.RadioGroup`. */
+    value: string;
+    /** Called when the item is chosen, before the group value changes. */
+    onSelect?: (event: MenuSelectEvent) => void;
+    /** Keyboard shortcut hint shown at the end of the item. */
+    shortcut?: MenuShortcut;
+    /** Close the menu after choosing. Defaults to the root `closeOnSelect`, then `false`. */
+    closeOnSelect?: boolean;
+}
+/** One option of a `Menu.RadioGroup` (`role="menuitemradio"` with `aria-checked`). Shows a dot when checked. */
+export declare const MenuRadioItem: ({ value, onSelect, closeOnSelect, ...rest }: MenuRadioItemProps) => import("react").JSX.Element;
+export {};

package/dist/components/navigation/Menu/MenuItem.mjs

@@ -0,0 +1,250 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMergedRef as t } from "../../../hooks/useMergedRef.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { CheckIcon as r } from "../../primitives/Icon/icons.mjs";
+import { Icon as i } from "../../primitives/Icon/Icon.mjs";
+import { KbdShortcut as a, useKbdPlatform as o } from "../../primitives/Kbd/Kbd.mjs";
+import { ITEM_ATTR as s, useMenuLevel as c, useMenuTree as l } from "./MenuContext.mjs";
+import u from "./Menu.module.css.mjs";
+import { createContext as d, useContext as f, useId as p, useLayoutEffect as m, useMemo as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/navigation/Menu/MenuItem.tsx
+var b = {
+	neutral: void 0,
+	danger: u.danger
+};
+function x(e) {
+	let t = {
+		target: e,
+		defaultPrevented: !1,
+		preventDefault: () => {
+			t.defaultPrevented = !0;
+		}
+	};
+	return t;
+}
+var S = {
+	cmd: "Meta",
+	meta: "Meta",
+	ctrl: "Control",
+	alt: "Alt",
+	option: "Alt",
+	shift: "Shift",
+	enter: "Enter",
+	return: "Enter",
+	esc: "Escape",
+	tab: "Tab",
+	space: "Space",
+	backspace: "Backspace",
+	delete: "Delete",
+	capslock: "CapsLock",
+	up: "ArrowUp",
+	down: "ArrowDown",
+	left: "ArrowLeft",
+	right: "ArrowRight",
+	pageup: "PageUp",
+	pagedown: "PageDown",
+	home: "Home",
+	end: "End"
+};
+function C(e, t) {
+	return e.map((e) => {
+		let n = e.toLowerCase();
+		return n === "mod" ? t === "mac" ? "Meta" : "Control" : S[n] ?? (e.length === 1 ? e.toUpperCase() : e);
+	}).join("+");
+}
+var w = {
+	sm: "sm",
+	md: "sm",
+	lg: "md"
+}, T = 100, E = 300, D = {
+	x: NaN,
+	y: NaN
+}, O = ({ role: e, tone: r = "neutral", disabled: i = !1, icon: d, indicator: f, shortcut: p, end: m, href: h, target: g, rel: x, subId: S, textValue: O, onActivate: k, children: A, className: j, onClick: M, onPointerMove: N, ref: P, "aria-keyshortcuts": F, ...I }) => {
+	let L = c("Menu.Item"), R = l("Menu.Item"), z = o(), B = t(P), V = (e) => {
+		if (N?.(e), e.defaultPrevented || e.pointerType === "touch") return;
+		let t = D.x !== e.clientX || D.y !== e.clientY;
+		if (D.x = e.clientX, D.y = e.clientY, !t) return;
+		let n = e.currentTarget, r = S && L.openSub === S ? document.getElementById(n.getAttribute("aria-controls") ?? "") : null, a = !!r && r.contains(document.activeElement);
+		document.activeElement !== n && !a && n.focus({ preventScroll: !0 }), S ? L.openSub === S ? L.cancelSubTimer() : i || L.scheduleSub(S, T) : L.openSub !== null && L.scheduleSub(null, E);
+	}, H = (e) => {
+		if (i) {
+			e.preventDefault();
+			return;
+		}
+		M?.(e), !e.defaultPrevented && k(e);
+	}, U = Array.isArray(p), W = F ?? (U ? C(p, z) : void 0), G = {
+		...I,
+		ref: B,
+		role: e,
+		tabIndex: -1,
+		"aria-disabled": i || void 0,
+		"aria-keyshortcuts": W,
+		"data-disabled": i ? "" : void 0,
+		"data-menu-text": O,
+		[s]: "",
+		className: n(u.item, b[r], j),
+		onClick: H,
+		onPointerMove: V
+	}, K = /* @__PURE__ */ y(_, { children: [
+		f !== void 0 && /* @__PURE__ */ v("span", {
+			"aria-hidden": "true",
+			className: u.indicator,
+			children: f
+		}),
+		d && /* @__PURE__ */ v("span", {
+			"aria-hidden": "true",
+			className: u.icon,
+			children: d
+		}),
+		/* @__PURE__ */ v("span", {
+			className: u.label,
+			"data-menu-label": "",
+			children: A
+		}),
+		p != null && p !== !1 && /* @__PURE__ */ v("span", {
+			"aria-hidden": "true",
+			className: u.shortcut,
+			children: U ? /* @__PURE__ */ v(a, {
+				keys: p,
+				size: w[R.size],
+				variant: "soft"
+			}) : p
+		}),
+		m
+	] });
+	return h !== void 0 && !i ? /* @__PURE__ */ v("a", {
+		...G,
+		href: h,
+		target: g,
+		rel: x,
+		children: K
+	}) : /* @__PURE__ */ v("div", {
+		...G,
+		children: K
+	});
+};
+function k(e, t) {
+	let n = l("Menu.Item");
+	return (r) => {
+		(e ?? n.closeOnSelect ?? t) && !r.defaultPrevented && n.closeAll("force");
+	};
+}
+var A = ({ onSelect: e, closeOnSelect: t, ...n }) => {
+	let r = k(t, !0);
+	return /* @__PURE__ */ v(O, {
+		...n,
+		role: "menuitem",
+		onActivate: (t) => {
+			let n = x(t.currentTarget);
+			e?.(n), r(n);
+		}
+	});
+}, j = ({ checked: t, defaultChecked: n = !1, onCheckedChange: i, onSelect: a, closeOnSelect: o, ...s }) => {
+	let [c, l] = e({
+		value: t,
+		defaultValue: n,
+		onChange: i
+	}), u = k(o, !1);
+	return /* @__PURE__ */ v(O, {
+		...s,
+		role: "menuitemcheckbox",
+		"aria-checked": c,
+		"data-state": c ? "checked" : "unchecked",
+		indicator: c ? /* @__PURE__ */ v(r, {
+			size: "sm",
+			strokeWidth: 3
+		}) : null,
+		onActivate: (e) => {
+			let t = x(e.currentTarget);
+			a?.(t), l(!c), u(t);
+		}
+	});
+}, M = d(null);
+function N() {
+	let e = p(), [t, n] = g(null);
+	return {
+		value: h(() => ({
+			defaultLabelId: e,
+			setLabelId: n
+		}), [e]),
+		labelledBy: t ?? void 0
+	};
+}
+var P = ({ className: e, children: t, ...r }) => {
+	let { value: i, labelledBy: a } = N();
+	return /* @__PURE__ */ v(M.Provider, {
+		value: i,
+		children: /* @__PURE__ */ v("div", {
+			role: "group",
+			"aria-labelledby": r["aria-label"] ? void 0 : a,
+			...r,
+			className: n(u.group, e),
+			children: t
+		})
+	});
+}, F = ({ className: e, id: t, ...r }) => {
+	let i = f(M), a = t ?? i?.defaultLabelId, o = i?.setLabelId;
+	return m(() => {
+		if (o && a) return o(a), () => o(null);
+	}, [o, a]), /* @__PURE__ */ v("div", {
+		...r,
+		id: a,
+		className: n(u.groupLabel, e)
+	});
+}, I = ({ className: e, ...t }) => /* @__PURE__ */ v("div", {
+	role: "separator",
+	"aria-orientation": "horizontal",
+	...t,
+	className: n(u.separator, e)
+}), L = d(null), R = ({ value: t, defaultValue: r, onValueChange: i, className: a, children: o, ...s }) => {
+	let [c, l] = e({
+		value: t,
+		defaultValue: r ?? null,
+		onChange: (e) => {
+			e !== null && i?.(e);
+		}
+	}), d = h(() => ({
+		value: c,
+		setValue: l
+	}), [c, l]), { value: f, labelledBy: p } = N();
+	return /* @__PURE__ */ v(M.Provider, {
+		value: f,
+		children: /* @__PURE__ */ v(L.Provider, {
+			value: d,
+			children: /* @__PURE__ */ v("div", {
+				role: "group",
+				"aria-labelledby": s["aria-label"] ? void 0 : p,
+				...s,
+				className: n(u.group, a),
+				children: o
+			})
+		})
+	});
+}, z = ({ value: e, onSelect: t, closeOnSelect: n, ...r }) => {
+	let a = f(L), o = k(n, !1);
+	if (!a) throw Error("Menu.RadioItem must be rendered inside <Menu.RadioGroup>.");
+	let s = a.value === e;
+	return /* @__PURE__ */ v(O, {
+		...r,
+		role: "menuitemradio",
+		"aria-checked": s,
+		"data-state": s ? "checked" : "unchecked",
+		indicator: s ? /* @__PURE__ */ v(i, {
+			size: "sm",
+			children: /* @__PURE__ */ v("circle", {
+				cx: "12",
+				cy: "12",
+				r: "5",
+				fill: "currentColor",
+				stroke: "none"
+			})
+		}) : null,
+		onActivate: (n) => {
+			let r = x(n.currentTarget);
+			t?.(r), a.setValue(e), o(r);
+		}
+	});
+};
+//#endregion
+export { j as MenuCheckboxItem, P as MenuGroup, A as MenuItem, O as MenuItemBase, F as MenuLabel, R as MenuRadioGroup, z as MenuRadioItem, I as MenuSeparator };

package/dist/components/navigation/Menu/MenuSub.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useMergedRef.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../utilities/Portal/Portal.cjs.js"),r=require("../../primitives/Icon/icons.cjs.js"),i=require("./MenuContext.cjs.js"),a=require("./Menu.module.css.cjs.js"),o=require("./MenuContent.cjs.js"),s=require("./MenuItem.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u=({children:e,onOpenChange:t})=>{let n=i.useMenuLevel(`Menu.Sub`),r=`sub-${(0,c.useId)()}`,a=n.open&&n.openSub===r,o=(0,c.useRef)(null),s=(0,c.useRef)(null),u=(0,c.useRef)(`none`),d=(0,c.useRef)(`auto`),[f,p]=(0,c.useState)(0),m=i.useSubmenuState(),{setOpenSub:h}=m,{setOpenSub:g,closeSub:_}=n,v=(0,c.useCallback)((e,t={})=>{e?(d.current=`auto`,u.current=t.focus??`none`,p(e=>e+1),g(r)):(d.current=t.restore??`auto`,_(r))},[r,g,_]);(0,c.useEffect)(()=>{a||(h(null),u.current=`none`)},[a,h]);let y=(0,c.useRef)(t);y.current=t;let b=(0,c.useRef)(!0);(0,c.useEffect)(()=>{if(b.current){b.current=!1;return}y.current?.(a)},[a]);let x=(0,c.useMemo)(()=>({id:r,isSub:!0,open:a,setOpen:v,focusNonce:f,openFocusRef:u,restoreModeRef:d,triggerRef:o,contentRef:s,contentId:`${r}-menu`,triggerId:`${r}-trigger`,parent:n,...m}),[r,a,v,f,n,m]);return(0,l.jsx)(i.MenuSubContext.Provider,{value:x,children:e})},d=({ref:n,id:o,className:c,...u})=>{let d=i.useMenuSub(`Menu.SubTrigger`),f=e.useMergedRef(d.triggerRef,n);return(0,l.jsx)(s.MenuItemBase,{...u,ref:f,id:o??d.triggerId,role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":d.open,"aria-controls":d.open?d.contentId:void 0,"data-state":d.open?`open`:`closed`,subId:d.id,className:t.cx(a.default.subTrigger,c),end:(0,l.jsx)(`span`,{"aria-hidden":`true`,className:a.default.chevron,children:(0,l.jsx)(r.ChevronRightIcon,{size:`sm`})}),onActivate:e=>{d.setOpen(!0,{focus:e.detail===0?`first`:`none`})}})},f=({container:e,...t})=>{let r=i.useMenuSub(`Menu.SubContent`),a=i.useMenuTree(`Menu.SubContent`);return r.open?(0,l.jsx)(n.Portal,{container:e,children:(0,l.jsx)(o.MenuSurface,{...t,level:r,tree:a})}):null};exports.MenuSub=u,exports.MenuSubContent=f,exports.MenuSubTrigger=d;

package/dist/components/navigation/Menu/MenuSub.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { MenuSubContentProps } from './MenuContent';
+import { MenuItemProps } from './MenuItem';
+export interface MenuSubProps {
+    /** A `Menu.SubTrigger` and a `Menu.SubContent`. */
+    children?: ReactNode;
+    /** Called with the next open state whenever the submenu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A nested menu. Only one submenu per level is open at a time; it closes
+ * with its parent. Put a `Menu.SubTrigger` and a `Menu.SubContent` inside.
+ */
+export declare const MenuSub: ({ children, onOpenChange }: MenuSubProps) => import("react").JSX.Element;
+export type MenuSubTriggerProps = Omit<MenuItemProps, "onSelect" | "closeOnSelect" | "href" | "target" | "rel" | "shortcut" | "tone">;
+/**
+ * The item that opens a submenu (`role="menuitem"` with
+ * `aria-haspopup="menu"` and `aria-expanded`). Opens on hover after a short
+ * delay, on click, and with Enter, Space, or ArrowRight (ArrowLeft in RTL),
+ * which also move focus to the submenu's first item.
+ */
+export declare const MenuSubTrigger: ({ ref, id, className, ...rest }: MenuSubTriggerProps) => import("react").JSX.Element;
+/**
+ * The submenu surface (`role="menu"`, labelled by its `SubTrigger`).
+ * Portaled, placed beside the trigger (flips when there isn't room), and
+ * mounted only while open.
+ */
+export declare const MenuSubContent: ({ container, ...props }: MenuSubContentProps) => import("react").JSX.Element | null;

package/dist/components/navigation/Menu/MenuSub.mjs

@@ -0,0 +1,93 @@
+import { useMergedRef as e } from "../../../hooks/useMergedRef.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { Portal as n } from "../../utilities/Portal/Portal.mjs";
+import { ChevronRightIcon as r } from "../../primitives/Icon/icons.mjs";
+import { MenuSubContext as i, useMenuLevel as a, useMenuSub as o, useMenuTree as s, useSubmenuState as c } from "./MenuContext.mjs";
+import l from "./Menu.module.css.mjs";
+import { MenuSurface as u } from "./MenuContent.mjs";
+import { MenuItemBase as d } from "./MenuItem.mjs";
+import { useCallback as f, useEffect as p, useId as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v } from "react/jsx-runtime";
+//#region src/components/navigation/Menu/MenuSub.tsx
+var y = ({ children: e, onOpenChange: t }) => {
+	let n = a("Menu.Sub"), r = `sub-${m()}`, o = n.open && n.openSub === r, s = g(null), l = g(null), u = g("none"), d = g("auto"), [y, b] = _(0), x = c(), { setOpenSub: S } = x, { setOpenSub: C, closeSub: w } = n, T = f((e, t = {}) => {
+		e ? (d.current = "auto", u.current = t.focus ?? "none", b((e) => e + 1), C(r)) : (d.current = t.restore ?? "auto", w(r));
+	}, [
+		r,
+		C,
+		w
+	]);
+	p(() => {
+		o || (S(null), u.current = "none");
+	}, [o, S]);
+	let E = g(t);
+	E.current = t;
+	let D = g(!0);
+	p(() => {
+		if (D.current) {
+			D.current = !1;
+			return;
+		}
+		E.current?.(o);
+	}, [o]);
+	let O = h(() => ({
+		id: r,
+		isSub: !0,
+		open: o,
+		setOpen: T,
+		focusNonce: y,
+		openFocusRef: u,
+		restoreModeRef: d,
+		triggerRef: s,
+		contentRef: l,
+		contentId: `${r}-menu`,
+		triggerId: `${r}-trigger`,
+		parent: n,
+		...x
+	}), [
+		r,
+		o,
+		T,
+		y,
+		n,
+		x
+	]);
+	return /* @__PURE__ */ v(i.Provider, {
+		value: O,
+		children: e
+	});
+}, b = ({ ref: n, id: i, className: a, ...s }) => {
+	let c = o("Menu.SubTrigger"), u = e(c.triggerRef, n);
+	return /* @__PURE__ */ v(d, {
+		...s,
+		ref: u,
+		id: i ?? c.triggerId,
+		role: "menuitem",
+		"aria-haspopup": "menu",
+		"aria-expanded": c.open,
+		"aria-controls": c.open ? c.contentId : void 0,
+		"data-state": c.open ? "open" : "closed",
+		subId: c.id,
+		className: t(l.subTrigger, a),
+		end: /* @__PURE__ */ v("span", {
+			"aria-hidden": "true",
+			className: l.chevron,
+			children: /* @__PURE__ */ v(r, { size: "sm" })
+		}),
+		onActivate: (e) => {
+			c.setOpen(!0, { focus: e.detail === 0 ? "first" : "none" });
+		}
+	});
+}, x = ({ container: e, ...t }) => {
+	let r = o("Menu.SubContent"), i = s("Menu.SubContent");
+	return r.open ? /* @__PURE__ */ v(n, {
+		container: e,
+		children: /* @__PURE__ */ v(u, {
+			...t,
+			level: r,
+			tree: i
+		})
+	}) : null;
+};
+//#endregion
+export { y as MenuSub, x as MenuSubContent, b as MenuSubTrigger };

package/dist/components/navigation/Menu/index.d.ts

@@ -0,0 +1 @@
+export * from './Menu';

package/dist/components/navigation/Menu/useMenuRoot.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("./MenuContext.cjs.js");let n=require("react");function r({open:r,defaultOpen:i=!1,onOpenChange:a,size:o=`md`,closeOnSelect:s,anchorRef:c}){let[l,u]=e.useControllableState({value:r,defaultValue:i,onChange:a}),d=(0,n.useRef)(null),f=(0,n.useRef)(null),p=(0,n.useRef)(i?`first`:`none`),m=(0,n.useRef)(`auto`),h=(0,n.useRef)(!1),[g,_]=(0,n.useState)(0),v=t.useSubmenuState(),{setOpenSub:y}=v,b=(0,n.useId)(),x=(0,n.useCallback)((e,t={})=>{e?(h.current=!1,m.current=`auto`,p.current=t.focus??`first`,_(e=>e+1)):m.current=t.restore??`auto`,u(e)},[u]);return(0,n.useEffect)(()=>{l?h.current=!1:y(null)},[l,y]),{level:(0,n.useMemo)(()=>({id:b,isSub:!1,open:l,setOpen:x,focusNonce:g,openFocusRef:p,restoreModeRef:m,triggerRef:d,anchorRef:c,contentRef:f,contentId:`${b}-menu`,triggerId:`${b}-trigger`,parent:null,...v}),[l,x,g,b,v,c]),tree:(0,n.useMemo)(()=>({treeId:b,size:o,closeOnSelect:s,closingAllRef:h,closeAll:(e=`force`)=>{h.current=!0,x(!1,{restore:e}),window.setTimeout(()=>{h.current=!1},0)},focusRootTrigger:()=>d.current?.focus({preventScroll:!0})}),[b,o,s,x])}}exports.useMenuRoot=r;

package/dist/components/navigation/Menu/useMenuRoot.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import { MenuLevelContextValue, MenuTreeContextValue } from './MenuContext';
+import { MenuProps } from './Menu';
+/**
+ * @internal The state of a root menu level and its tree, shared by `Menu`
+ * and `ContextMenu`. `anchorRef`, when given, positions the menu instead of
+ * the trigger (ContextMenu anchors it to the pointer).
+ */
+export declare function useMenuRoot({ open: openProp, defaultOpen, onOpenChange, size, closeOnSelect, anchorRef, }: Omit<MenuProps, "children"> & {
+    anchorRef?: RefObject<HTMLElement | null>;
+}): {
+    level: MenuLevelContextValue;
+    tree: MenuTreeContextValue;
+};

package/dist/components/navigation/Menu/useMenuRoot.mjs

@@ -0,0 +1,59 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useSubmenuState as t } from "./MenuContext.mjs";
+import { useCallback as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+//#region src/components/navigation/Menu/useMenuRoot.ts
+function c({ open: c, defaultOpen: l = !1, onOpenChange: u, size: d = "md", closeOnSelect: f, anchorRef: p }) {
+	let [m, h] = e({
+		value: c,
+		defaultValue: l,
+		onChange: u
+	}), g = o(null), _ = o(null), v = o(l ? "first" : "none"), y = o("auto"), b = o(!1), [x, S] = s(0), C = t(), { setOpenSub: w } = C, T = i(), E = n((e, t = {}) => {
+		e ? (b.current = !1, y.current = "auto", v.current = t.focus ?? "first", S((e) => e + 1)) : y.current = t.restore ?? "auto", h(e);
+	}, [h]);
+	return r(() => {
+		m ? b.current = !1 : w(null);
+	}, [m, w]), {
+		level: a(() => ({
+			id: T,
+			isSub: !1,
+			open: m,
+			setOpen: E,
+			focusNonce: x,
+			openFocusRef: v,
+			restoreModeRef: y,
+			triggerRef: g,
+			anchorRef: p,
+			contentRef: _,
+			contentId: `${T}-menu`,
+			triggerId: `${T}-trigger`,
+			parent: null,
+			...C
+		}), [
+			m,
+			E,
+			x,
+			T,
+			C,
+			p
+		]),
+		tree: a(() => ({
+			treeId: T,
+			size: d,
+			closeOnSelect: f,
+			closingAllRef: b,
+			closeAll: (e = "force") => {
+				b.current = !0, E(!1, { restore: e }), window.setTimeout(() => {
+					b.current = !1;
+				}, 0);
+			},
+			focusRootTrigger: () => g.current?.focus({ preventScroll: !0 })
+		}), [
+			T,
+			d,
+			f,
+			E
+		])
+	};
+}
+//#endregion
+export { c as useMenuRoot };