@rinzai/zen 0.15.0 → 0.16.0

package/dist/stepper/index.js

@@ -1,17 +1,17 @@
 "use client";
-import e from "../icons/micro/check.js";
-import { cx as t } from "../utils/cx.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import t from "../icons/micro/check.js";
+import { cx as n } from "../utils/cx.js";
 import { Children as r, isValidElement as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region packages/stepper/index.tsx
 function s({ value: s, className: c, children: l, "aria-label": u, ...d }) {
-	let f = n(), p = u ?? f.progress, m = r.toArray(l).filter(i);
+	let f = e(), p = u ?? f.progress, m = r.toArray(l).filter(i);
 	return /* @__PURE__ */ a("ol", {
 		"aria-label": p,
-		className: t("zen__stepper flex w-full items-start", c),
+		className: n("zen__stepper flex w-full items-start", c),
 		...d,
-		children: m.map((n, r) => {
+		children: m.map((e, r) => {
 			let i = r < s ? "done" : r === s ? "current" : "upcoming";
 			return /* @__PURE__ */ o("li", {
 				"data-state": i,
@@ -21,26 +21,26 @@ function s({ value: s, className: c, children: l, "aria-label": u, ...d }) {
 					r > 0 && /* @__PURE__ */ a("span", {
 						"aria-hidden": !0,
 						className: "bg-tint/10 absolute start-[calc(-50%+1.25rem)] end-[calc(50%+1.25rem)] top-3.5 h-px overflow-hidden",
-						children: /* @__PURE__ */ a("span", { className: t("bg-primary ease-out-soft block h-full origin-left transition-transform rtl:origin-right duration-500", i === "upcoming" && "scale-x-0") })
+						children: /* @__PURE__ */ a("span", { className: n("bg-primary ease-out-soft block h-full origin-left transition-transform rtl:origin-right duration-500", i === "upcoming" && "scale-x-0") })
 					}),
 					/* @__PURE__ */ a("span", {
 						"aria-hidden": !0,
-						className: t("grid size-7 place-items-center rounded-full text-xs font-semibold tabular-nums transition-[background-color,color,box-shadow] duration-300", i === "upcoming" && "bg-tint/[0.05] text-muted-foreground shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.12)]", i === "current" && "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.5),0_0_18px_-2px_oklch(var(--glow)/calc(0.7*var(--glow-k)))]", i === "done" && "bg-primary text-primary-foreground"),
-						children: i === "done" ? /* @__PURE__ */ a(e, { className: "size-3.5" }) : r + 1
+						className: n("grid size-7 place-items-center rounded-full text-xs font-semibold tabular-nums transition-[background-color,color,box-shadow] duration-300", i === "upcoming" && "bg-tint/[0.05] text-muted-foreground shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.12)]", i === "current" && "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.5),0_0_18px_-2px_oklch(var(--glow)/calc(0.7*var(--glow-k)))]", i === "done" && "bg-primary text-primary-foreground"),
+						children: i === "done" ? /* @__PURE__ */ a(t, { className: "size-3.5" }) : r + 1
 					}),
-					n,
+					e,
 					/* @__PURE__ */ a("span", {
 						className: "sr-only",
 						children: i === "done" ? ", done" : i === "upcoming" ? ", not started" : ""
 					})
 				]
-			}, n.key ?? r);
+			}, e.key ?? r);
 		})
 	});
 }
-function c({ description: e, className: n, children: r }) {
+function c({ description: e, className: t, children: r }) {
 	return /* @__PURE__ */ o("span", {
-		className: t("flex flex-col gap-0.5 px-1", n),
+		className: n("flex flex-col gap-0.5 px-1", t),
 		children: [/* @__PURE__ */ a("span", {
 			className: "text-muted-foreground group-data-[state=current]/step:text-foreground group-data-[state=done]/step:text-foreground text-sm font-medium",
 			children: r

package/dist/table/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import { reducedMotion as n } from "../utils/motion.js";
 import r from "../icons/chevron-down.js";
 import i from "../icons/chevron-up.js";
@@ -9,7 +9,7 @@ import { TableSwipeAction as l, TableSwipeRow as u } from "./swipe.js";
 import { useCallback as d, useEffect as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region packages/table/index.tsx
-function y({ label: t, className: n, ref: r, onScroll: i, ...a }) {
+function y({ label: e, className: n, ref: r, onScroll: i, ...a }) {
 	let o = h(null), s = d(() => {
 		let e = o.current;
 		if (!e) return;
@@ -23,7 +23,7 @@ function y({ label: t, className: n, ref: r, onScroll: i, ...a }) {
 		let t = typeof ResizeObserver > "u" ? null : new ResizeObserver(s);
 		return t?.observe(e), e.firstElementChild && t?.observe(e.firstElementChild), () => t?.disconnect();
 	}, [s]), /* @__PURE__ */ _("div", {
-		className: e("zen__table-panel glass glow-edge isolate flex flex-col overflow-hidden rounded-xl", n),
+		className: t("zen__table-panel glass glow-edge isolate flex flex-col overflow-hidden rounded-xl", n),
 		children: /* @__PURE__ */ _("div", {
 			ref: (e) => {
 				o.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
@@ -31,23 +31,23 @@ function y({ label: t, className: n, ref: r, onScroll: i, ...a }) {
 			onScroll: (e) => {
 				s(), i?.(e);
 			},
-			role: t ? "region" : void 0,
-			"aria-label": t,
-			tabIndex: t ? 0 : void 0,
+			role: e ? "region" : void 0,
+			"aria-label": e,
+			tabIndex: e ? 0 : void 0,
 			className: "zen__table-container focus-ring relative min-h-0 overflow-auto rounded-[inherit] outline-hidden will-change-scroll focus-visible:ring-inset",
 			...a
 		})
 	});
 }
-function b({ className: t, ...n }) {
+function b({ className: e, ...n }) {
 	return /* @__PURE__ */ _("table", {
-		className: e("zen__table w-full border-separate border-spacing-0 text-sm", t),
+		className: t("zen__table w-full border-separate border-spacing-0 text-sm", e),
 		...n
 	});
 }
-function x({ className: t, ...n }) {
+function x({ className: e, ...n }) {
 	return /* @__PURE__ */ _("thead", {
-		className: e("zen__sticky-top sticky top-0 z-20", t),
+		className: t("zen__sticky-top sticky top-0 z-20", e),
 		...n
 	});
 }
@@ -113,29 +113,29 @@ var w = typeof window > "u" ? f : p, T = {
 	duration: 260,
 	easing: "ease-out"
 };
-function O({ className: t, ...n }) {
+function O({ className: e, ...n }) {
 	return /* @__PURE__ */ _("tfoot", {
-		className: e("zen__sticky-bottom sticky bottom-0 z-20", t),
+		className: t("zen__sticky-bottom sticky bottom-0 z-20", e),
 		...n
 	});
 }
-function k({ selected: t, className: n, ...r }) {
+function k({ selected: e, className: n, ...r }) {
 	return /* @__PURE__ */ _("tr", {
-		"data-selected": t || void 0,
-		className: e("group", n),
+		"data-selected": e || void 0,
+		className: t("group", n),
 		...r
 	});
 }
-function A({ numeric: t, sticky: n, sortDirection: a, onSort: o, scope: s = "col", className: c, children: l, ...u }) {
+function A({ numeric: e, sticky: n, sortDirection: a, onSort: o, scope: s = "col", className: c, children: l, ...u }) {
 	return /* @__PURE__ */ _("th", {
 		scope: s,
 		"aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : void 0,
-		className: e("border-tint/[0.07] text-muted-foreground border-b px-3 py-2.5 align-middle text-xs leading-5 font-medium tracking-wider whitespace-nowrap uppercase", n === "start" && "zen__sticky-start sticky start-0 z-10", t ? "text-end" : "text-start", c),
+		className: t("border-tint/[0.07] text-muted-foreground border-b px-3 py-2.5 align-middle text-xs leading-5 font-medium tracking-wider whitespace-nowrap uppercase", n === "start" && "zen__sticky-start sticky start-0 z-10", e ? "text-end" : "text-start", c),
 		...u,
 		children: o ? /* @__PURE__ */ v("button", {
 			type: "button",
 			onClick: o,
-			className: e("hover:text-foreground touch-target inline-flex cursor-pointer items-center gap-1 align-middle leading-5 tracking-wider uppercase", t && "flex-row-reverse"),
+			className: t("hover:text-foreground touch-target inline-flex cursor-pointer items-center gap-1 align-middle leading-5 tracking-wider uppercase", e && "flex-row-reverse"),
 			children: [l, /* @__PURE__ */ _("span", {
 				"aria-hidden": !0,
 				className: "inline-flex w-3",
@@ -150,15 +150,15 @@ function A({ numeric: t, sticky: n, sortDirection: a, onSort: o, scope: s = "col
 		}) : l
 	});
 }
-function j({ numeric: t, sticky: n, className: r, ...i }) {
+function j({ numeric: e, sticky: n, className: r, ...i }) {
 	return /* @__PURE__ */ _("td", {
-		className: e("border-tint/[0.045] border-b px-3 py-2.5 transition-colors duration-150", "group-hover:[background-image:linear-gradient(oklch(var(--tint)/0.035),oklch(var(--tint)/0.035))]", "group-data-selected:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))]", n === "start" && "zen__sticky-start sticky start-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)] rtl:shadow-[inset_1px_0_0_oklch(var(--tint)/0.06)]", t && "text-end tabular-nums", r),
+		className: t("border-tint/[0.045] border-b px-3 py-2.5 transition-colors duration-150", "group-hover:[background-image:linear-gradient(oklch(var(--tint)/0.035),oklch(var(--tint)/0.035))]", "group-data-selected:[background-image:linear-gradient(oklch(var(--primary)/0.09),oklch(var(--primary)/0.09))]", n === "start" && "zen__sticky-start sticky start-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)] rtl:shadow-[inset_1px_0_0_oklch(var(--tint)/0.06)]", e && "text-end tabular-nums", r),
 		...i
 	});
 }
-function M({ numeric: t, sticky: n, className: r, ...i }) {
+function M({ numeric: e, sticky: n, className: r, ...i }) {
 	return /* @__PURE__ */ _("td", {
-		className: e("border-tint/[0.07] h-9 border-t px-3 font-medium whitespace-nowrap", n === "start" && "zen__sticky-start sticky start-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)] rtl:shadow-[inset_1px_0_0_oklch(var(--tint)/0.06)]", t && "text-end tabular-nums", r),
+		className: t("border-tint/[0.07] h-9 border-t px-3 font-medium whitespace-nowrap", n === "start" && "zen__sticky-start sticky start-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)] rtl:shadow-[inset_1px_0_0_oklch(var(--tint)/0.06)]", e && "text-end tabular-nums", r),
 		...i
 	});
 }
@@ -176,10 +176,10 @@ function N({ height: e, colSpan: t }) {
 		})
 	});
 }
-function P({ colSpan: e, children: n }) {
-	let r = t();
+function P({ colSpan: t, children: n }) {
+	let r = e();
 	return /* @__PURE__ */ _("tr", { children: /* @__PURE__ */ _("td", {
-		colSpan: e,
+		colSpan: t,
 		className: "text-muted-foreground px-3 py-8 text-center",
 		children: n ?? r.nothingHere
 	}) });

package/dist/table/selection.js

@@ -1,6 +1,6 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import n from "../icons/micro/x-mark.js";
 import r from "../checkbox/index.js";
 import { useRef as i, useState as a } from "react";
@@ -29,13 +29,13 @@ function c(e) {
 		})
 	};
 }
-function l({ checked: t, onSelect: n, label: i, className: a, ...s }) {
+function l({ checked: e, onSelect: n, label: i, className: a, ...s }) {
 	return /* @__PURE__ */ o("td", {
-		className: e("border-tint/[0.045] w-10 border-b py-2.5 ps-3 pe-0", a),
+		className: t("border-tint/[0.045] w-10 border-b py-2.5 ps-3 pe-0", a),
 		...s,
 		children: /* @__PURE__ */ o(r, {
 			"aria-label": i,
-			checked: t,
+			checked: e,
 			onClick: (e) => n(e.currentTarget.checked, e.shiftKey),
 			onCheckedChange: () => {},
 			className: "touch-target grid"
@@ -43,9 +43,9 @@ function l({ checked: t, onSelect: n, label: i, className: a, ...s }) {
 	});
 }
 function u({ checked: n, indeterminate: i, onSelect: a, label: s, className: c, ...l }) {
-	let u = t(), d = s ?? u.selectAll;
+	let u = e(), d = s ?? u.selectAll;
 	return /* @__PURE__ */ o("th", {
-		className: e("w-10 py-2.5 ps-3 pe-0", c),
+		className: t("w-10 py-2.5 ps-3 pe-0", c),
 		...l,
 		children: /* @__PURE__ */ o(r, {
 			"aria-label": d,
@@ -57,11 +57,11 @@ function u({ checked: n, indeterminate: i, onSelect: a, label: s, className: c,
 	});
 }
 function d({ count: r, onClear: i, label: a, clearLabel: c, className: l, children: u }) {
-	let d = t(), f = a ?? d.selectedCount, p = c ?? d.clearSelection;
+	let d = e(), f = a ?? d.selectedCount, p = c ?? d.clearSelection;
 	return r === 0 ? null : /* @__PURE__ */ s("div", {
 		role: "toolbar",
 		"aria-label": d.selection,
-		className: e("zen__selection-bar glass glass-blur glow-edge fixed inset-x-0 bottom-6 z-40 mx-auto flex w-fit max-w-[calc(100vw-2rem)] items-center gap-2 rounded-2xl py-2 ps-4 pe-2 shadow-[0_12px_40px_-12px_oklch(0_0_0/0.6)]", l),
+		className: t("zen__selection-bar glass glass-blur glow-edge fixed inset-x-0 bottom-6 z-40 mx-auto flex w-fit max-w-[calc(100vw-2rem)] items-center gap-2 rounded-2xl py-2 ps-4 pe-2 shadow-[0_12px_40px_-12px_oklch(0_0_0/0.6)]", l),
 		children: [
 			/* @__PURE__ */ o("span", {
 				className: "text-sm font-medium whitespace-nowrap tabular-nums",

package/dist/table-of-contents/index.js

@@ -1,12 +1,12 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import { followSectionLink as n } from "../utils/section-link.js";
 import { useEffect as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region packages/table-of-contents/index.tsx
 function s({ items: s, title: c, className: l, ...u }) {
-	let d = t(), f = c ?? d.onThisPage, [p, m] = i();
+	let d = e(), f = c ?? d.onThisPage, [p, m] = i();
 	return r(() => {
 		if (typeof IntersectionObserver > "u") return;
 		let e = s.map((e) => document.getElementById(e.id)).filter((e) => !!e), t = /* @__PURE__ */ new Set(), n = new IntersectionObserver((e) => {
@@ -18,22 +18,22 @@ function s({ items: s, title: c, className: l, ...u }) {
 	}, [s]), s.length ? /* @__PURE__ */ o("nav", {
 		"aria-label": f || d.onThisPage,
 		...u,
-		className: e("zen__toc flex flex-col gap-3", l),
+		className: t("zen__toc flex flex-col gap-3", l),
 		children: [f && /* @__PURE__ */ a("p", {
 			className: "text-muted-foreground text-2xs mt-0! tracking-widest uppercase",
 			children: f
 		}), /* @__PURE__ */ a("ul", {
 			className: "border-tint/[0.07] flex flex-col gap-2 border-l text-sm",
-			children: s.map((t) => /* @__PURE__ */ a("li", {
-				className: e("-ms-px", t.depth === 2 && "ps-3"),
+			children: s.map((e) => /* @__PURE__ */ a("li", {
+				className: t("-ms-px", e.depth === 2 && "ps-3"),
 				children: /* @__PURE__ */ a("a", {
-					href: `#${t.id}`,
+					href: `#${e.id}`,
 					onClick: n,
-					"aria-current": t.id === p ? "location" : void 0,
-					className: e("text-muted-foreground hover:text-foreground block border-s border-transparent ps-3 transition-colors pointer-coarse:py-1.5", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
-					children: t.label
+					"aria-current": e.id === p ? "location" : void 0,
+					className: t("text-muted-foreground hover:text-foreground block border-s border-transparent ps-3 transition-colors pointer-coarse:py-1.5", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
+					children: e.label
 				})
-			}, t.id))
+			}, e.id))
 		})]
 	}) : null;
 }

package/dist/tag-input/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useControllable as t } from "../utils/useControllable.js";
-import { useMessages as n } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { useControllable as n } from "../utils/useControllable.js";
 import { useFieldProps as r } from "../field/index.js";
 import { FIELD as i } from "../utils/styles.js";
 import { FormValue as a } from "../utils/form-value.js";
@@ -10,7 +10,7 @@ import { useLayoutEffect as s, useRef as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region packages/tag-input/index.tsx
 function f({ value: f, defaultValue: p = [], onValueChange: m, validate: h, removeLabel: g, className: _, disabled: v, name: y, ...b }) {
-	let x = n(), S = g ?? x.remove, [C, w, T] = t(f, p, m), [E, D] = l(""), O = r(b), k = c(null), A = C.length;
+	let x = e(), S = g ?? x.remove, [C, w, T] = n(f, p, m), [E, D] = l(""), O = r(b), k = c(null), A = C.length;
 	s(() => {
 		let e = k.current;
 		e?.parentElement?.contains(document.activeElement) && (e.scrollTop = e.scrollHeight);
@@ -21,7 +21,7 @@ function f({ value: f, defaultValue: p = [], onValueChange: m, validate: h, remo
 		t.length !== C.length && w(t);
 	};
 	return /* @__PURE__ */ d("div", {
-		className: e("zen__tag-input", i, "flex h-auto max-h-36 min-h-10 w-full cursor-text flex-col gap-1.5 py-1.5", "has-[input:focus-visible]:border-glow/60 has-[input:focus-visible]:bg-tint/[0.05] has-[input:focus-visible]:shadow-glow-focus has-[input:focus-visible]:[--glow-border-color:transparent]", v && "cursor-not-allowed opacity-50", _),
+		className: t("zen__tag-input", i, "flex h-auto max-h-36 min-h-10 w-full cursor-text flex-col gap-1.5 py-1.5", "has-[input:focus-visible]:border-glow/60 has-[input:focus-visible]:bg-tint/[0.05] has-[input:focus-visible]:shadow-glow-focus has-[input:focus-visible]:[--glow-border-color:transparent]", v && "cursor-not-allowed opacity-50", _),
 		onClick: (e) => e.currentTarget.querySelector("input")?.focus(),
 		children: [
 			A > 0 && /* @__PURE__ */ u("div", {

package/dist/theme-toggle/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMessages as t } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import n from "../icons/micro/moon.js";
 import r from "../icons/micro/sun.js";
 import { prepareThemeWave as i, themeWave as a } from "../utils/theme-wave.js";
@@ -25,7 +25,7 @@ function f(e) {
 }
 var p = () => document.documentElement.classList.contains("light") ? "light" : "dark";
 function m({ value: l, onValueChange: u, target: m, storageKey: h = "theme", className: g, ..._ }) {
-	let v = o(f, p, () => "dark"), y = l ?? v, b = y === "dark" ? "light" : "dark", x = t();
+	let v = o(f, p, () => "dark"), y = l ?? v, b = y === "dark" ? "light" : "dark", x = e();
 	return /* @__PURE__ */ s("button", {
 		type: "button",
 		"aria-label": b === "dark" ? x.switchToDark : x.switchToLight,
@@ -44,7 +44,7 @@ function m({ value: l, onValueChange: u, target: m, storageKey: h = "theme", cla
 				u?.(b), d.forEach((e) => e());
 			});
 		}, e.currentTarget, m?.current),
-		className: e("zen__theme-toggle text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground grid size-10 cursor-pointer place-items-center rounded-lg outline-hidden focus-ring", g),
+		className: t("zen__theme-toggle text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground grid size-10 cursor-pointer place-items-center rounded-lg outline-hidden focus-ring", g),
 		children: s(y === "dark" ? n : r, { className: "size-4" })
 	});
 }

package/dist/theme.css

@@ -1156,6 +1156,109 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
         translate: -100% 0;
     }
 }
+/*
+ * A menu as a bottom sheet on phones (MenuContent's `sheet`): across the
+ * bottom of the screen over a scrim, sliding up and following a finger
+ * swiping it back down. A submenu slides in over it from the side, and the
+ * menu moves aside; it slides back out the same way, or goes down with the
+ * menu. Anchoring is set inline, hence !important. --zen-sheet tells the
+ * scripts it's a sheet now (no opening submenus on hover).
+ */
+@media (width < theme(--breakpoint-md)) {
+    .zen__popover[data-zen-sheet] {
+        --zen-sheet: 1;
+        position: fixed;
+        position-area: none !important;
+        position-try-fallbacks: none !important;
+        position-visibility: always;
+        /* Edge to edge, over a scrollbar's gutter too. */
+        inset: auto auto 0 0 !important;
+        justify-self: auto !important;
+        width: 100vw !important;
+        min-width: 0 !important;
+        max-height: 85dvh;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        margin: 0 !important;
+        padding: 0.5rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom));
+        border-width: 1px 0 0;
+        border-radius: 1rem 1rem 0 0;
+        background-color: oklch(var(--card) / 0.9);
+        pointer-events: auto;
+        translate: var(--zen-swipe, 0 0);
+        will-change: translate;
+        transition:
+            translate 320ms var(--ease-out-soft),
+            opacity 200ms,
+            overlay 320ms allow-discrete,
+            display 320ms allow-discrete;
+    }
+    .zen__popover[data-zen-sheet]:not(:popover-open) {
+        translate: 0 100%;
+    }
+    .zen__popover:popover-open .zen__popover[data-zen-sheet][data-zen-beside]:not(:popover-open) {
+        translate: 100% 0;
+    }
+    .zen__popover:popover-open .zen__popover[data-zen-sheet][data-zen-beside]:not(:popover-open):dir(rtl) {
+        translate: -100% 0;
+    }
+    /* Under an open submenu (in the top layer, so it's not moved with it). */
+    .zen__popover[data-zen-sheet]:popover-open:has(.zen__popover[data-zen-sheet]:popover-open) {
+        translate: -30% 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+    .zen__popover[data-zen-sheet]:popover-open:has(.zen__popover[data-zen-sheet]:popover-open):dir(rtl) {
+        translate: 30% 0;
+    }
+    .zen__popover[data-zen-sheet] [role^='menuitem'] {
+        min-height: 3rem;
+    }
+    .zen__popover[data-zen-sheet] .zen__sheet-only {
+        display: revert-layer;
+    }
+    .zen__popover[data-zen-sheet]::backdrop {
+        background: var(--backdrop-scrim, oklch(0 0 0 / 0.5));
+        opacity: calc(1 - var(--zen-swipe-progress, 0));
+        transition:
+            opacity 200ms,
+            overlay 320ms allow-discrete,
+            display 320ms allow-discrete;
+    }
+    .zen__popover[data-zen-sheet]:not(:popover-open)::backdrop {
+        opacity: 0;
+    }
+    /* The menu's scrim is behind a submenu already. */
+    .zen__popover[data-zen-sheet][data-zen-beside]::backdrop {
+        background: none;
+    }
+    .zen__popover[data-zen-sheet][data-swiping],
+    .zen__popover[data-zen-sheet][data-swiping]::backdrop {
+        transition: none;
+        user-select: none;
+    }
+    :root:has(.zen__popover[data-zen-sheet]:popover-open) {
+        overflow: hidden;
+    }
+    @starting-style {
+        .zen__popover[data-zen-sheet]:popover-open {
+            translate: 0 100%;
+        }
+        .zen__popover[data-zen-sheet][data-zen-beside]:popover-open {
+            translate: 100% 0;
+        }
+        .zen__popover[data-zen-sheet][data-zen-beside]:popover-open:dir(rtl) {
+            translate: -100% 0;
+        }
+        .zen__popover[data-zen-sheet]:popover-open::backdrop {
+            opacity: 0;
+        }
+    }
+}
+/* What only a sheet shows: its grip, a submenu's way back. */
+.zen__sheet-only {
+    display: none;
+}
 /*
  * The page behind a modal dialog doesn't scroll. Hiding the overflow removes
  * the scrollbar, so where the page had one (Dialog sets data-zen-scrollbar),

package/dist/time-field/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { readingKey as t } from "../utils/direction.js";
-import { useControllable as n } from "../utils/useControllable.js";
-import { useLocale as r, useMessages as i } from "../locale-provider/index.js";
+import { useLocale as e, useMessages as t } from "../locale-provider/index.js";
+import { cx as n } from "../utils/cx.js";
+import { readingKey as r } from "../utils/direction.js";
+import { useControllable as i } from "../utils/useControllable.js";
 import { useField as a } from "../field/index.js";
 import { FIELD_SIZE as o, FIELD_WITHIN as s } from "../utils/styles.js";
 import { FormValue as c } from "../utils/form-value.js";
@@ -11,21 +11,21 @@ import { useMemo as u, useRef as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region packages/time-field/index.tsx
 function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, locale: y, name: b, size: x = "default", invalid: S, disabled: C, className: w, onMouseDown: T, ...E }) {
-	let D = i(), O = a(), k = r(y), A = u(() => new g(k), [k]), [j, M, N] = n(l, h, _), [P, F] = f(null), I = P ?? A.split(j), L = d(""), R = (e) => {
+	let D = t(), O = a(), k = e(y), A = u(() => new g(k), [k]), [j, M, N] = i(l, h, _), [P, F] = f(null), I = P ?? A.split(j), L = d(""), R = (e) => {
 		let t = A.join(e);
 		F(t === null ? e : null), t !== j && M(t);
-	}, z = (e, n) => {
-		let r = t(e.key, e.currentTarget), i = (t) => {
+	}, z = (e, t) => {
+		let n = r(e.key, e.currentTarget), i = (t) => {
 			let n = [...e.currentTarget.parentElement.querySelectorAll("[role=spinbutton]")];
 			n[n.indexOf(e.currentTarget) + t]?.focus();
 		};
-		if (r === "ArrowLeft" || r === "ArrowRight") return e.preventDefault(), i(r === "ArrowLeft" ? -1 : 1);
-		if (r === "ArrowUp" || r === "ArrowDown") return e.preventDefault(), L.current = "", R(A.step(I, n, r === "ArrowUp" ? 1 : -1, v));
-		if (r === "Backspace" || r === "Delete") return e.preventDefault(), L.current = "", R({
+		if (n === "ArrowLeft" || n === "ArrowRight") return e.preventDefault(), i(n === "ArrowLeft" ? -1 : 1);
+		if (n === "ArrowUp" || n === "ArrowDown") return e.preventDefault(), L.current = "", R(A.step(I, t, n === "ArrowUp" ? 1 : -1, v));
+		if (n === "Backspace" || n === "Delete") return e.preventDefault(), L.current = "", R({
 			...I,
-			[n === "dayPeriod" ? "period" : n]: null
+			[t === "dayPeriod" ? "period" : t]: null
 		});
-		if (n === "dayPeriod") {
+		if (t === "dayPeriod") {
 			let t = A.periodFor(e.key);
 			return t === null ? void 0 : (e.preventDefault(), R({
 				...I,
@@ -35,18 +35,18 @@ function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, lo
 		let a = A.digit(e.key);
 		if (a === null) return;
 		e.preventDefault();
-		let { n: o, done: s } = A.type(n, L.current + a);
+		let { n: o, done: s } = A.type(t, L.current + a);
 		L.current = s ? "" : L.current + a, R({
 			...I,
-			[n]: o
+			[t]: o
 		}), s && i(1);
-	}, B = A.order.map((t, n) => {
-		if (t.type === "literal") return /* @__PURE__ */ p("span", {
+	}, B = A.order.map((e, t) => {
+		if (e.type === "literal") return /* @__PURE__ */ p("span", {
 			"aria-hidden": !0,
 			className: "text-muted-foreground whitespace-pre",
-			children: t.value
-		}, n);
-		let r = t.type, i = r === "dayPeriod" ? I.period : I[r], a = {
+			children: e.value
+		}, t);
+		let r = e.type, i = r === "dayPeriod" ? I.period : I[r], a = {
 			hour: D.hour,
 			minute: D.minute,
 			dayPeriod: D.dayPeriod
@@ -62,7 +62,7 @@ function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, lo
 			"aria-disabled": C || void 0,
 			onKeyDown: C ? void 0 : (e) => z(e, r),
 			onFocus: () => L.current = "",
-			className: e("zen__time-segment rounded-sm px-0.5 tabular-nums outline-hidden caret-transparent select-none", "focus:bg-primary/20 focus:text-foreground", o === null && "text-muted-foreground"),
+			className: n("zen__time-segment rounded-sm px-0.5 tabular-nums outline-hidden caret-transparent select-none", "focus:bg-primary/20 focus:text-foreground", o === null && "text-muted-foreground"),
 			children: o ?? "––"
 		}, r);
 	});
@@ -75,7 +75,7 @@ function h({ value: l, defaultValue: h = null, onValueChange: _, step: v = 1, lo
 		onMouseDown: (e) => {
 			T?.(e), !(e.defaultPrevented || e.target.closest("[role=spinbutton]")) && (e.preventDefault(), e.currentTarget.querySelector("[role=spinbutton]")?.focus());
 		},
-		className: e("zen__time-field", s, o[x], "w-fit cursor-text gap-0", C && "bg-muted text-muted-foreground cursor-not-allowed opacity-50", "data-invalid:border-destructive", w),
+		className: n("zen__time-field", s, o[x], "w-fit cursor-text gap-0", C && "bg-muted text-muted-foreground cursor-not-allowed opacity-50", "data-invalid:border-destructive", w),
 		children: [B, /* @__PURE__ */ p(c, {
 			name: b,
 			value: j ?? "",

package/dist/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA+JhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YAhNoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAoNpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BAiKhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YAlNoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAsNpF"}