@rinzai/zen 0.15.0 → 0.16.0

package/dist/menu/index.js

@@ -1,33 +1,40 @@
 "use client";
-import e from "../icons/micro/check.js";
-import t from "../icons/micro/chevron-right.js";
-import { cx as n } from "../utils/cx.js";
-import { readingKey as r } from "../utils/direction.js";
-import { useTypeahead as i } from "../utils/typeahead.js";
-import { useGraphicsMode as a } from "../utils/graphics.js";
-import { useMergedRefs as o } from "../utils/refs.js";
-import { moveFocus as s, rovingItems as c, useRovingTabIndex as l } from "../utils/roving.js";
-import { Slot as u } from "../utils/slot.js";
-import { useControllable as d } from "../utils/useControllable.js";
-import { anchorFor as f, anchoredStyle as p, useAnchoredPopup as m } from "../utils/useAnchoredPopup.js";
-import { createContext as h, useContext as g, useEffect as _, useId as v, useLayoutEffect as y, useRef as b, useState as x } from "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { createPortal as T } from "react-dom";
+import { useMessages as e } from "../locale-provider/index.js";
+import t from "../icons/micro/check.js";
+import n from "../icons/micro/chevron-right.js";
+import { cx as r } from "../utils/cx.js";
+import { readingKey as i } from "../utils/direction.js";
+import { useTypeahead as a } from "../utils/typeahead.js";
+import { useGraphicsMode as o } from "../utils/graphics.js";
+import { useMergedRefs as s } from "../utils/refs.js";
+import { moveFocus as c, rovingItems as l, useRovingTabIndex as u } from "../utils/roving.js";
+import { Slot as d } from "../utils/slot.js";
+import { useSheetSwipe as f } from "../utils/swipe.js";
+import { useControllable as p } from "../utils/useControllable.js";
+import { anchorFor as m, anchoredStyle as h, useAnchoredPopup as g } from "../utils/useAnchoredPopup.js";
+import { createContext as _, useContext as v, useEffect as y, useId as b, useLayoutEffect as x, useRef as S, useState as C } from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { createPortal as D } from "react-dom";
 //#region packages/menu/index.tsx
-var E = typeof window > "u" ? _ : y, D = h(null), O = "[data-zen-menubar-trigger]", k = h(() => {}), A = h(null);
-function j(e) {
-	let t = g(A);
+var O = typeof window > "u" ? y : x, k = _(null), A = "[data-zen-menubar-trigger]", j = _(() => {}), M = _(!1), N = (e) => !!e?.hasAttribute("data-zen-sheet") && getComputedStyle(e).getPropertyValue("--zen-sheet").trim() === "1";
+function P(e, t) {
+	let n = v(j), [r, i] = C(!1);
+	O(() => i(t && N(e.current)), [t, e]), f(e, r ? "bottom" : void 0, n);
+}
+var F = _(null);
+function I(e) {
+	let t = v(F);
 	if (!t) throw Error(`<${e}> must be inside <Menu>`);
 	return t;
 }
-function M({ onOpenChange: e, children: t }) {
-	a();
-	let n = v(), [r, i] = x(null), o = b(null), s = b(!1), c = b(null), l = m({ onOpenChange: (t) => {
+function L({ onOpenChange: e, children: t }) {
+	o();
+	let n = b(), [r, i] = C(null), a = S(null), s = S(!1), c = S(null), l = g({ onOpenChange: (t) => {
 		s.current = t;
-		let n = l.popupRef.current, r = n ? R(n) : [], i = c.current;
-		if (c.current = null, t ? (i ? r[i === "first" ? 0 : r.length - 1] : n)?.focus() : u(), !t && o.current) {
+		let n = l.popupRef.current, r = n ? W(n) : [], i = c.current;
+		if (c.current = null, t ? (i ? r[i === "first" ? 0 : r.length - 1] : n)?.focus() : u(), !t && a.current) {
 			let e = document.activeElement;
-			(!e || e === document.body || l.popupRef.current?.contains(e)) && o.current.focus(), o.current = null;
+			(!e || e === document.body || l.popupRef.current?.contains(e)) && a.current.focus(), a.current = null;
 		}
 		e?.(t);
 	} }), u = () => {
@@ -36,22 +43,22 @@ function M({ onOpenChange: e, children: t }) {
 			s.current || i(null);
 		});
 	};
-	E(() => {
+	O(() => {
 		if (r && (l.setOpen(!0), r.pointerId !== void 0)) try {
 			l.popupRef.current?.setPointerCapture(r.pointerId);
 		} catch {}
 	}, [r]);
 	let d = (e) => {
-		o.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, i({ ...e });
+		a.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, i({ ...e });
 	}, f = (e) => {
 		let t = l.popupRef.current;
 		if (l.open && t) {
-			R(t).at(e === "first" ? 0 : -1)?.focus();
+			W(t).at(e === "first" ? 0 : -1)?.focus();
 			return;
 		}
-		c.current = e, o.current = document.getElementById(n), l.setOpen(!0);
-	}, p = g(D);
-	return _(() => (p?.set(n, f), () => void p?.delete(n))), /* @__PURE__ */ C(A.Provider, {
+		c.current = e, a.current = document.getElementById(n), l.setOpen(!0);
+	}, p = v(k);
+	return y(() => (p?.set(n, f), () => void p?.delete(n))), /* @__PURE__ */ T(F.Provider, {
 		value: {
 			popup: l,
 			triggerId: n,
@@ -59,14 +66,14 @@ function M({ onOpenChange: e, children: t }) {
 			openAt: d,
 			openFrom: f
 		},
-		children: /* @__PURE__ */ C(k.Provider, {
+		children: /* @__PURE__ */ T(j.Provider, {
 			value: () => l.setOpen(!1),
 			children: t
 		})
 	});
 }
-function N({ asChild: e, style: t, onKeyDown: r, onPointerEnter: i, children: a, ...o }) {
-	let { popup: s, triggerId: c, point: l, openFrom: d } = j("MenuTrigger"), f = !!g(D), p = {
+function R({ asChild: e, style: t, onKeyDown: n, onPointerEnter: i, children: a, ...o }) {
+	let { popup: s, triggerId: c, point: l, openFrom: u } = I("MenuTrigger"), f = !!v(k), p = {
 		id: c,
 		"aria-haspopup": "menu",
 		...s.triggerProps,
@@ -79,13 +86,13 @@ function N({ asChild: e, style: t, onKeyDown: r, onPointerEnter: i, children: a,
 			"data-zen-menubar-trigger": ""
 		},
 		...o,
-		className: n(f && ne, o.className),
+		className: r(f && le, o.className),
 		style: {
 			...s.triggerProps.style,
 			...t
 		},
 		onKeyDown: (e) => {
-			r?.(e), !(e.defaultPrevented || e.key !== "ArrowDown" && e.key !== "ArrowUp") && (e.preventDefault(), d(e.key === "ArrowDown" ? "first" : "last"));
+			n?.(e), !(e.defaultPrevented || e.key !== "ArrowDown" && e.key !== "ArrowUp") && (e.preventDefault(), u(e.key === "ArrowDown" ? "first" : "last"));
 		},
 		onPointerEnter: (e) => {
 			i?.(e);
@@ -93,125 +100,138 @@ function N({ asChild: e, style: t, onKeyDown: r, onPointerEnter: i, children: a,
 			t && !s.open && e.pointerType !== "touch" && t.querySelector("[data-zen-menubar-trigger][data-popup-open]") && (s.setOpen(!0), e.currentTarget.focus());
 		}
 	};
-	return e ? /* @__PURE__ */ C(u, {
+	return e ? /* @__PURE__ */ T(d, {
 		...p,
 		children: a
-	}) : /* @__PURE__ */ C("button", {
+	}) : /* @__PURE__ */ T("button", {
 		type: "button",
 		...p,
-		className: n("cursor-pointer", p.className),
+		className: r("cursor-pointer", p.className),
 		children: a
 	});
 }
-function P({ align: e, offset: t, ref: i, className: a, style: s, children: l, ...u }) {
-	let { popup: d, triggerId: f, point: m } = j("MenuContent"), h = o(d.popupRef, i), _ = g(D);
+function z({ align: e, offset: t, sheet: n, ref: a, className: o, style: c, children: u, ...d }) {
+	let { popup: f, triggerId: p, point: m } = I("MenuContent"), g = s(f.popupRef, a);
+	P(f.popupRef, !!n && f.open);
+	let _ = v(k);
 	e ??= m || _ ? "start" : "end", t ??= m ? 2 : 6;
-	let v = z(), y = (e) => {
+	let y = G(), b = (e) => {
 		if (e.defaultPrevented || e.target.closest("[role=\"menu\"]") !== e.currentTarget) return;
-		let t = r(e.key, e.currentTarget);
+		let t = i(e.key, e.currentTarget);
 		if (t !== "ArrowLeft" && t !== "ArrowRight") return;
-		let n = document.getElementById(f), i = n?.closest("[role=\"menubar\"]");
-		if (!n || !i) return;
-		let a = c(i, O), o = a[(a.indexOf(n) + (t === "ArrowRight" ? 1 : -1) + a.length) % a.length];
+		let n = document.getElementById(p), r = n?.closest("[role=\"menubar\"]");
+		if (!n || !r) return;
+		let a = l(r, A), o = a[(a.indexOf(n) + (t === "ArrowRight" ? 1 : -1) + a.length) % a.length];
 		o && o !== n && (e.preventDefault(), o.focus(), _?.get(o.id)?.("first"));
 	};
-	return /* @__PURE__ */ C("div", {
-		"aria-labelledby": m ? void 0 : f,
-		...u,
-		...d.popupProps,
-		ref: h,
+	return /* @__PURE__ */ E("div", {
+		"aria-labelledby": m ? void 0 : p,
+		...d,
+		...f.popupProps,
+		ref: g,
 		role: "menu",
 		tabIndex: -1,
+		"data-zen-sheet": n || void 0,
 		onKeyDown: (e) => {
-			u.onKeyDown?.(e), v(e), _ && y(e);
+			d.onKeyDown?.(e), y(e), _ && b(e);
 		},
 		style: {
-			...p(d.id, {
+			...h(f.id, {
 				align: e,
 				offset: t
 			}),
-			...s
+			...c
 		},
-		className: n("zen__popover glass glass-blur text-foreground min-w-44 rounded-xl p-1.5 outline-hidden", a),
-		children: l
+		className: r("zen__popover glass glass-blur text-foreground min-w-44 rounded-xl p-1.5 outline-hidden", o),
+		children: [n && /* @__PURE__ */ T(B, {}), /* @__PURE__ */ T(M.Provider, {
+			value: !!n,
+			children: u
+		})]
 	});
 }
-var F = 500, I = 8;
-function L({ asChild: e, disabled: t, className: r, onContextMenu: i, onPointerDown: a, onClickCapture: o, children: s, ...c }) {
-	let { popup: l, point: d, openAt: p } = j("MenuContextTrigger"), m = v(), h = d?.from === m, g = b(null), y = b(!1), x = () => {
+function B() {
+	return /* @__PURE__ */ T("div", {
+		"aria-hidden": !0,
+		className: "zen__sheet-only bg-tint/20 mx-auto mt-0.5 mb-2 h-1 w-10 rounded-full"
+	});
+}
+var V = 500, H = 8;
+function U({ asChild: e, disabled: t, className: n, onContextMenu: i, onPointerDown: a, onClickCapture: o, children: s, ...c }) {
+	let { popup: l, point: u, openAt: f } = I("MenuContextTrigger"), p = b(), h = u?.from === p, g = S(null), _ = S(!1), v = () => {
 		g.current && clearTimeout(g.current.timer), g.current = null;
 	};
-	_(() => x, []);
-	let E = {
+	y(() => v, []);
+	let x = {
 		...c,
-		className: n("[-webkit-touch-callout:none]", r),
+		className: r("[-webkit-touch-callout:none]", n),
 		"data-popup-open": h && l.open || void 0,
 		onContextMenu: (e) => {
-			if (i?.(e), !(t || e.defaultPrevented) && (e.preventDefault(), x(), !l.open)) {
+			if (i?.(e), !(t || e.defaultPrevented) && (e.preventDefault(), v(), !l.open)) {
 				if (e.clientX === 0 && e.clientY === 0) {
 					let t = e.target.getBoundingClientRect();
-					p({
+					f({
 						x: t.left,
 						y: t.bottom,
-						from: m
+						from: p
 					});
 				} else {
 					let t = e.nativeEvent, n = "pointerId" in t && e.buttons ? t.pointerId : void 0;
-					p({
+					f({
 						x: e.clientX,
 						y: e.clientY,
-						from: m,
+						from: p,
 						pointerId: n
 					});
 				}
 			}
 		},
 		onPointerDown: (e) => {
-			if (a?.(e), y.current = !1, t || e.pointerType !== "touch" || !e.isPrimary) return;
+			if (a?.(e), _.current = !1, t || e.pointerType !== "touch" || !e.isPrimary) return;
 			let n = {
 				x: e.clientX,
 				y: e.clientY,
-				from: m,
+				from: p,
 				pointerId: e.pointerId
 			}, r = e.currentTarget, i = (e) => {
-				Math.hypot(e.clientX - n.x, e.clientY - n.y) > I && o();
+				Math.hypot(e.clientX - n.x, e.clientY - n.y) > H && o();
 			}, o = () => {
-				x(), r.removeEventListener("pointermove", i), r.removeEventListener("pointerup", o), r.removeEventListener("pointercancel", o);
+				v(), r.removeEventListener("pointermove", i), r.removeEventListener("pointerup", o), r.removeEventListener("pointercancel", o);
 			};
 			r.addEventListener("pointermove", i), r.addEventListener("pointerup", o), r.addEventListener("pointercancel", o), g.current = {
 				...n,
 				timer: window.setTimeout(() => {
-					o(), y.current = !0, l.open || p(n);
-				}, F)
+					o(), _.current = !0, l.open || f(n);
+				}, V)
 			};
 		},
 		onClickCapture: (e) => {
-			o?.(e), y.current && (y.current = !1, e.preventDefault(), e.stopPropagation());
+			o?.(e), _.current && (_.current = !1, e.preventDefault(), e.stopPropagation());
 		}
-	}, D = d && h && T(/* @__PURE__ */ C("span", {
+	}, C = u && h && D(/* @__PURE__ */ T("span", {
 		"aria-hidden": !0,
-		...f(l.id),
+		...m(l.id),
 		style: {
-			...f(l.id).style,
+			...m(l.id).style,
 			position: "fixed",
-			left: d.x,
-			top: d.y
+			left: u.x,
+			top: u.y
 		}
 	}), document.body);
-	return /* @__PURE__ */ w(S, { children: [C(e ? u : "div", {
-		...E,
+	return /* @__PURE__ */ E(w, { children: [T(e ? d : "div", {
+		...x,
 		children: s
-	}), D] });
+	}), C] });
 }
-function R(e) {
-	return Array.from(e.querySelectorAll("[role^=\"menuitem\"]")).filter((t) => t.closest("[role=\"menu\"]") === e && !t.matches(":disabled, [aria-disabled=\"true\"]"));
+function W(e) {
+	let t = N(e);
+	return Array.from(e.querySelectorAll("[role^=\"menuitem\"]")).filter((n) => n.closest("[role=\"menu\"]") === e && !n.matches(":disabled, [aria-disabled=\"true\"]") && (t || !n.classList.contains("zen__sheet-only")));
 }
-function z() {
-	let e = i();
+function G() {
+	let e = a();
 	return (t) => {
 		let n = t.currentTarget;
 		if (t.target.closest("[role=\"menu\"]") !== n) return;
-		let r = R(n), i = r.indexOf(document.activeElement), a = r.length - 1, o = e(t);
+		let r = W(n), i = r.indexOf(document.activeElement), a = r.length - 1, o = e(t);
 		if (o) {
 			r.find((e) => e.textContent?.trim().toLowerCase().startsWith(o))?.focus();
 			return;
@@ -225,127 +245,128 @@ function z() {
 		s !== void 0 && (t.preventDefault(), r[(s + r.length) % r.length]?.focus());
 	};
 }
-var B = "flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-start text-sm outline-hidden select-none hover:bg-tint/[0.07] focus:bg-tint/[0.07] disabled:cursor-not-allowed disabled:opacity-50";
-function V({ icon: e, tone: t = "default", onSelect: r, asChild: i, className: a, children: o, onClick: s, ...c }) {
-	let l = g(k), d = {
+var K = "flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-start text-sm outline-hidden select-none hover:bg-tint/[0.07] focus:bg-tint/[0.07] disabled:cursor-not-allowed disabled:opacity-50";
+function q({ icon: e, tone: t = "default", onSelect: n, asChild: i, className: a, children: o, onClick: s, ...c }) {
+	let l = v(j), u = {
 		...c,
 		role: "menuitem",
 		tabIndex: -1,
-		className: n(B, t === "negative" && "text-destructive", a),
+		className: r(K, t === "negative" && "text-destructive", a),
 		onClick: (e) => {
-			s?.(e), l(), r?.();
+			s?.(e), l(), n?.();
 		}
-	}, f = e && /* @__PURE__ */ C("span", {
+	}, f = e && /* @__PURE__ */ T("span", {
 		"aria-hidden": !0,
-		className: n("flex shrink-0", t !== "negative" && "text-muted-foreground"),
+		className: r("flex shrink-0", t !== "negative" && "text-muted-foreground"),
 		children: e
 	});
-	return i ? /* @__PURE__ */ C(u, {
-		...d,
+	return i ? /* @__PURE__ */ T(d, {
+		...u,
 		before: f,
 		children: o
-	}) : /* @__PURE__ */ w("button", {
+	}) : /* @__PURE__ */ E("button", {
 		type: "button",
-		...d,
+		...u,
 		children: [f, o]
 	});
 }
-var H = "flex size-4 shrink-0 items-center justify-center";
-function U({ checked: t, defaultChecked: r = !1, onCheckedChange: i, className: a, children: o, onClick: s, ...c }) {
-	let [l, u] = d(t, r, i);
-	return /* @__PURE__ */ w("button", {
+var J = "flex size-4 shrink-0 items-center justify-center";
+function ee({ checked: e, defaultChecked: n = !1, onCheckedChange: i, className: a, children: o, onClick: s, ...c }) {
+	let [l, u] = p(e, n, i);
+	return /* @__PURE__ */ E("button", {
 		type: "button",
 		...c,
 		role: "menuitemcheckbox",
 		"aria-checked": l,
 		tabIndex: -1,
-		className: n(B, a),
+		className: r(K, a),
 		onClick: (e) => {
 			s?.(e), e.defaultPrevented || u(!l);
 		},
-		children: [/* @__PURE__ */ C("span", {
+		children: [/* @__PURE__ */ T("span", {
 			"aria-hidden": !0,
-			className: H,
-			children: l && /* @__PURE__ */ C(e, { className: "size-3.5" })
+			className: J,
+			children: l && /* @__PURE__ */ T(t, { className: "size-3.5" })
 		}), o]
 	});
 }
-var W = h(null);
-function G({ value: e, defaultValue: t = null, onValueChange: n, ...r }) {
-	let [i, a] = d(e, t, n);
-	return /* @__PURE__ */ C(W.Provider, {
+var Y = _(null);
+function te({ value: e, defaultValue: t = null, onValueChange: n, ...r }) {
+	let [i, a] = p(e, t, n);
+	return /* @__PURE__ */ T(Y.Provider, {
 		value: {
 			value: i,
 			select: a
 		},
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ T("div", {
 			role: "group",
 			...r
 		})
 	});
 }
-function K({ value: e, className: t, children: r, onClick: i, ...a }) {
-	let o = g(W);
+function ne({ value: e, className: t, children: n, onClick: i, ...a }) {
+	let o = v(Y);
 	if (!o) throw Error("<MenuRadioItem> must be inside <MenuRadioGroup>");
 	let s = o.value === e;
-	return /* @__PURE__ */ w("button", {
+	return /* @__PURE__ */ E("button", {
 		type: "button",
 		...a,
 		role: "menuitemradio",
 		"aria-checked": s,
 		tabIndex: -1,
-		className: n(B, t),
+		className: r(K, t),
 		onClick: (t) => {
 			i?.(t), t.defaultPrevented || o.select(e);
 		},
-		children: [/* @__PURE__ */ C("span", {
+		children: [/* @__PURE__ */ T("span", {
 			"aria-hidden": !0,
-			className: H,
-			children: s && /* @__PURE__ */ C("span", { className: "size-1.5 rounded-full bg-current" })
-		}), r]
+			className: J,
+			children: s && /* @__PURE__ */ T("span", { className: "size-1.5 rounded-full bg-current" })
+		}), n]
 	});
 }
-var q = h(null);
-function J(e) {
-	let t = g(q);
+var X = _(null);
+function Z(e) {
+	let t = v(X);
 	if (!t) throw Error(`<${e}> must be inside <MenuSub>`);
 	return t;
 }
-var Y = 250, X = (e) => {
+var re = 250, ie = (e) => {
 	try {
 		return !!e?.matches(":popover-open");
 	} catch {
 		return !0;
 	}
 };
-function Z({ onOpenChange: e, children: t }) {
-	let n = b(null), r = v(), i = b(0), a = b(!1), o = m({ onOpenChange: (t) => {
+function ae({ onOpenChange: e, children: t }) {
+	let n = S(null), r = b(), i = S(0), a = S(!1), o = g({ onOpenChange: (t) => {
 		let r = o.popupRef.current, i = n.current;
-		if (t && a.current && r && R(r)[0]?.focus(), a.current = !1, !t && i && X(i.closest("[role=\"menu\"]"))) {
+		if (t && a.current && r && W(r)[0]?.focus(), a.current = !1, !t && i && ie(i.closest("[role=\"menu\"]"))) {
 			let e = document.activeElement;
 			(!e || e === document.body || r?.contains(e)) && i.focus();
 		}
 		e?.(t);
-	} }), s = () => clearTimeout(i.current);
-	_(() => s, []);
-	let c = {
+	} }), [s, c] = C(""), l = () => clearTimeout(i.current);
+	y(() => l, []);
+	let u = {
 		popup: o,
+		label: s,
 		triggerRef: n,
 		triggerId: r,
 		show: (e) => {
-			if (s(), o.open) {
-				e && o.popupRef.current && R(o.popupRef.current)[0]?.focus();
+			if (l(), o.open) {
+				e && o.popupRef.current && W(o.popupRef.current)[0]?.focus();
 				return;
 			}
-			a.current = e, o.setOpen(!0);
+			a.current = e, c(n.current?.textContent?.trim() ?? ""), o.setOpen(!0);
 		},
 		hideSoon: () => {
-			s(), i.current = window.setTimeout(() => o.setOpen(!1), Y);
+			l(), i.current = window.setTimeout(() => o.setOpen(!1), re);
 		},
-		stay: s
+		stay: l
 	};
-	return /* @__PURE__ */ C(q.Provider, {
-		value: c,
+	return /* @__PURE__ */ T(X.Provider, {
+		value: u,
 		children: t
 	});
 }
@@ -353,9 +374,9 @@ function Q(e, t) {
 	let n = e.relatedTarget;
 	return n instanceof Node && !!t?.contains(n);
 }
-function $({ icon: e, ref: i, className: a, children: s, onClick: c, onKeyDown: l, onPointerEnter: u, onPointerLeave: d, style: f, ...p }) {
-	let m = J("MenuSubTrigger"), h = o(m.triggerRef, i), { popoverTarget: g, ..._ } = m.popup.triggerProps;
-	return /* @__PURE__ */ w("button", {
+function oe({ icon: e, ref: t, className: a, children: o, onClick: c, onKeyDown: l, onPointerEnter: u, onPointerLeave: d, style: f, ...p }) {
+	let m = Z("MenuSubTrigger"), h = s(m.triggerRef, t), { popoverTarget: g, ..._ } = m.popup.triggerProps;
+	return /* @__PURE__ */ E("button", {
 		type: "button",
 		id: m.triggerId,
 		...p,
@@ -368,93 +389,115 @@ function $({ icon: e, ref: i, className: a, children: s, onClick: c, onKeyDown:
 			..._.style,
 			...f
 		},
-		className: n(B, "data-popup-open:bg-tint/[0.07]", a),
+		className: r(K, "data-popup-open:bg-tint/[0.07]", a),
 		onClick: (e) => {
 			c?.(e), e.defaultPrevented || m.show(e.detail === 0);
 		},
 		onKeyDown: (e) => {
-			l?.(e), !(e.defaultPrevented || r(e.key, e.currentTarget) !== "ArrowRight") && (e.preventDefault(), m.show(!0));
+			l?.(e), !(e.defaultPrevented || i(e.key, e.currentTarget) !== "ArrowRight") && (e.preventDefault(), m.show(!0));
 		},
 		onPointerEnter: (e) => {
-			u?.(e), e.pointerType !== "touch" && m.show(!1);
+			u?.(e), e.pointerType !== "touch" && !N(e.currentTarget.closest("[role=\"menu\"]")) && m.show(!1);
 		},
 		onPointerLeave: (e) => {
-			d?.(e), Q(e, e.currentTarget.closest("[role=\"menu\"]")) && m.hideSoon();
+			d?.(e);
+			let t = e.currentTarget.closest("[role=\"menu\"]");
+			Q(e, t) && !N(t) && m.hideSoon();
 		},
 		children: [
-			e && /* @__PURE__ */ C("span", {
+			e && /* @__PURE__ */ T("span", {
 				"aria-hidden": !0,
 				className: "text-muted-foreground flex shrink-0",
 				children: e
 			}),
-			s,
-			/* @__PURE__ */ C(t, {
+			o,
+			/* @__PURE__ */ T(n, {
 				"aria-hidden": !0,
 				className: "text-muted-foreground ms-auto size-4 shrink-0 rtl:-scale-x-100"
 			})
 		]
 	});
 }
-function ee({ offset: e = 8, ref: t, className: i, style: a, onKeyDown: s, onPointerEnter: c, onPointerLeave: l, children: u, ...d }) {
-	let f = J("MenuSubContent"), m = o(f.popup.popupRef, t), h = z();
-	return /* @__PURE__ */ C("div", {
-		"aria-labelledby": f.triggerId,
-		...d,
-		...f.popup.popupProps,
-		ref: m,
+function se({ offset: t = 8, ref: a, className: o, style: c, onKeyDown: l, onPointerEnter: u, onPointerLeave: d, children: f, ...p }) {
+	let m = Z("MenuSubContent"), g = s(m.popup.popupRef, a), _ = G(), y = v(M), b = e();
+	P(m.popup.popupRef, y && m.popup.open);
+	let x = () => {
+		m.popup.setOpen(!1), m.triggerRef.current?.focus();
+	};
+	return /* @__PURE__ */ E("div", {
+		"aria-labelledby": m.triggerId,
+		...p,
+		...m.popup.popupProps,
+		ref: g,
 		role: "menu",
 		tabIndex: -1,
 		"data-zen-beside": "",
+		"data-zen-sheet": y || void 0,
 		onKeyDown: (e) => {
-			s?.(e), !e.defaultPrevented && (h(e), e.target.closest("[role=\"menu\"]") === e.currentTarget && r(e.key, e.currentTarget) === "ArrowLeft" && (e.preventDefault(), e.stopPropagation(), f.popup.setOpen(!1), f.triggerRef.current?.focus()));
+			l?.(e), !e.defaultPrevented && (_(e), e.target.closest("[role=\"menu\"]") === e.currentTarget && i(e.key, e.currentTarget) === "ArrowLeft" && (e.preventDefault(), e.stopPropagation(), x()));
 		},
 		onPointerEnter: (e) => {
-			c?.(e), f.stay();
+			u?.(e), m.stay();
 		},
 		onPointerLeave: (e) => {
-			l?.(e), Q(e, f.triggerRef.current?.closest("[role=\"menu\"]") ?? null) && !f.triggerRef.current?.contains(e.relatedTarget) && f.hideSoon();
+			d?.(e), Q(e, m.triggerRef.current?.closest("[role=\"menu\"]") ?? null) && !m.triggerRef.current?.contains(e.relatedTarget) && !N(e.currentTarget) && m.hideSoon();
 		},
 		style: {
-			...p(f.popup.id, {
+			...h(m.popup.id, {
 				side: "beside",
-				offset: e
+				offset: t
 			}),
 			marginBlock: -6,
-			...a
+			...c
 		},
-		className: n("zen__popover glass glass-blur text-foreground min-w-44 rounded-xl p-1.5 outline-hidden", i),
-		children: u
+		className: r("zen__popover glass glass-blur text-foreground min-w-44 rounded-xl p-1.5 outline-hidden", o),
+		children: [y && /* @__PURE__ */ E(w, { children: [
+			/* @__PURE__ */ T(B, {}),
+			/* @__PURE__ */ E("button", {
+				type: "button",
+				role: "menuitem",
+				tabIndex: -1,
+				"aria-label": b.back,
+				onClick: x,
+				className: r(K, "zen__sheet-only text-muted-foreground font-medium"),
+				children: [/* @__PURE__ */ T(n, {
+					"aria-hidden": !0,
+					className: "size-4 shrink-0 -scale-x-100 rtl:scale-x-100"
+				}), m.label]
+			}),
+			/* @__PURE__ */ T($, { className: "zen__sheet-only" })
+		] }), f]
 	});
 }
-function te({ ref: e, className: t, onKeyDown: r, children: i, ...a }) {
-	let c = b(null), u = o(c, e), [d] = x(() => /* @__PURE__ */ new Map());
-	return l(c, O), /* @__PURE__ */ C(D.Provider, {
+function ce({ ref: e, className: t, onKeyDown: n, children: i, ...a }) {
+	let o = S(null), l = s(o, e), [d] = C(() => /* @__PURE__ */ new Map());
+	return u(o, A), /* @__PURE__ */ T(k.Provider, {
 		value: d,
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ T("div", {
 			role: "menubar",
 			...a,
-			ref: u,
+			ref: l,
 			"data-zen-roving": "",
 			onKeyDown: (e) => {
-				r?.(e), s(e, O);
+				n?.(e), c(e, A);
 			},
-			className: n("zen__menubar glow-edge border-tint/10 bg-tint/[0.03] relative flex w-fit items-center gap-0.5 rounded-xl border p-1", t),
+			className: r("zen__menubar glow-edge border-tint/10 bg-tint/[0.03] relative flex w-fit items-center gap-0.5 rounded-xl border p-1", t),
 			children: i
 		})
 	});
 }
-var ne = "text-muted-foreground hover:text-foreground focus-ring h-8 rounded-lg px-3 text-sm transition-colors outline-hidden data-popup-open:bg-tint/[0.07] data-popup-open:text-foreground";
-function re({ className: e }) {
-	return /* @__PURE__ */ C("div", {
+var le = "text-muted-foreground hover:text-foreground focus-ring h-8 rounded-lg px-3 text-sm transition-colors outline-hidden data-popup-open:bg-tint/[0.07] data-popup-open:text-foreground";
+function $({ className: e }) {
+	return /* @__PURE__ */ T("div", {
 		role: "separator",
-		className: n("bg-tint/[0.07] mx-2 my-1 h-px", e)
+		className: r("bg-tint/[0.07] mx-2 my-1 h-px", e)
 	});
 }
-function ie({ className: e, ...t }) {
-	return /* @__PURE__ */ C("div", {
-		className: n("flex items-center gap-3 px-3 py-2.5", e),
+function ue({ className: e, ...t }) {
+	return /* @__PURE__ */ T("div", {
+		className: r("flex items-center gap-3 px-3 py-2.5", e),
 		...t
 	});
 }
 //#endregion
-export { U as MenuCheckboxItem, P as MenuContent, L as MenuContextTrigger, ie as MenuHeader, V as MenuItem, G as MenuRadioGroup, K as MenuRadioItem, re as MenuSeparator, Z as MenuSub, ee as MenuSubContent, $ as MenuSubTrigger, N as MenuTrigger, te as Menubar, M as default };
+export { ee as MenuCheckboxItem, z as MenuContent, U as MenuContextTrigger, ue as MenuHeader, q as MenuItem, te as MenuRadioGroup, ne as MenuRadioItem, $ as MenuSeparator, ae as MenuSub, se as MenuSubContent, oe as MenuSubTrigger, R as MenuTrigger, ce as Menubar, L as default };