@rinzai/zen 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.16.0
+
+### Added to existing components
+
+- **MenuContent**: `sheet` makes the menu a bottom sheet on phones (below `md`), as music apps show a song's menu: across the bottom of the screen over a scrim, with a grip, swiped down or tapped outside to close. Its submenus slide in over it, with a row at the top that goes back (the arrow back and Escape still do), and open only when chosen, not on hover. Wider screens keep the popover.
+- **SortableList**: works with a virtualized list. Give it `itemHeight` and render only the rows in view (from `useVirtualList`), each at its place in `value`; a drag works from `value`, not the rows on screen, and rows that come into view as it scrolls the list take their places. `onLiftedChange` says which item is picked up (by its handle or from the keyboard), to keep its row rendered. An item moved with the keyboard is scrolled into view.
+- **useVirtualList**: `keep` renders a row even when it's out of view, such as the one being dragged, with the rows between.
+- **SeekBar**: `times="below"` puts the time played and the length under the ends of the bar, as on a phone's Now Playing screen.
+- **TooltipContent**: `side="beside"` puts the tooltip after its trigger (before it if there's no room) instead of below, centred on it, as for the icons of a collapsed sidebar, where a tooltip below would cover the next icon. `align` lines up its top or bottom with the trigger's instead.
+- **Anchored popups** (`anchoredStyle`): beside the trigger, `align` now chooses top (start, as before), middle (center) or bottom (end).
+
+### Fixes
+
+- **ToastProvider**: once its toasts were gone, the empty toast area kept its last height (the height it was given went negative, which browsers ignore) and caught clicks meant for what was under it, such as a player bar's controls. It now shrinks to nothing.
+
 ## 0.15.0
 
 ### New components

package/dist/animated-number/index.js

@@ -1,14 +1,14 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useLocale as t } from "../locale-provider/index.js";
+import { useLocale as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import { formatMoney as n } from "../utils/money.js";
 import { reducedMotion as r } from "../utils/motion.js";
 import { useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region packages/animated-number/index.tsx
 var u = typeof window > "u" ? i : a, d = (e) => 1 - (1 - e) ** 3;
-function f({ value: t, format: n = String, duration: a = 650, fromZero: f = !0, roll: p = !1, className: h }) {
-	let [g, _] = s(f ? 0 : t), v = o(f ? 0 : t), [y, b] = s(!f);
+function f({ value: e, format: n = String, duration: a = 650, fromZero: f = !0, roll: p = !1, className: h }) {
+	let [g, _] = s(f ? 0 : e), v = o(f ? 0 : e), [y, b] = s(!f);
 	if (i(() => {
 		if (!p || y) return;
 		let e = requestAnimationFrame(() => b(!0));
@@ -16,22 +16,22 @@ function f({ value: t, format: n = String, duration: a = 650, fromZero: f = !0,
 	}, [p, y]), u(() => {
 		if (p) return;
 		if (r() || a <= 0) {
-			v.current = t, _(t);
+			v.current = e, _(e);
 			return;
 		}
-		let e = v.current, n = performance.now(), i = requestAnimationFrame(function r(o) {
-			let s = Math.min(1, (o - n) / a), c = Math.round(e + (t - e) * d(s));
+		let t = v.current, n = performance.now(), i = requestAnimationFrame(function r(o) {
+			let s = Math.min(1, (o - n) / a), c = Math.round(t + (e - t) * d(s));
 			v.current = c, _(c), s < 1 && (i = requestAnimationFrame(r));
 		});
 		return () => cancelAnimationFrame(i);
 	}, [
-		t,
+		e,
 		a,
 		p
 	]), p) {
-		let r = n(t);
+		let r = n(e);
 		return /* @__PURE__ */ l("span", {
-			className: e("zen__animated-number inline-flex items-start tabular-nums", h),
+			className: t("zen__animated-number inline-flex items-start tabular-nums", h),
 			children: [/* @__PURE__ */ c("span", {
 				className: "sr-only",
 				children: r
@@ -46,7 +46,7 @@ function f({ value: t, format: n = String, duration: a = 650, fromZero: f = !0,
 		});
 	}
 	return /* @__PURE__ */ c("span", {
-		className: e("zen__animated-number tabular-nums", h),
+		className: t("zen__animated-number tabular-nums", h),
 		children: n(g)
 	});
 }
@@ -75,10 +75,10 @@ function m({ digit: e, duration: t }) {
 		})
 	});
 }
-function h({ value: e, currency: r, locale: i, showDecimals: a = !1, ...o }) {
-	let s = t(i);
+function h({ value: t, currency: r, locale: i, showDecimals: a = !1, ...o }) {
+	let s = e(i);
 	return /* @__PURE__ */ c(f, {
-		value: e,
+		value: t,
 		format: (e) => n(e, r, s, { showDecimals: a }),
 		...o
 	});

package/dist/breadcrumbs/index.js

@@ -1,37 +1,37 @@
 "use client";
-import e from "../icons/micro/chevron-right.js";
-import { cx as t } from "../utils/cx.js";
-import { Slot as n } from "../utils/slot.js";
-import { useMessages as r } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import t from "../icons/micro/chevron-right.js";
+import { cx as n } from "../utils/cx.js";
+import { Slot as r } from "../utils/slot.js";
 import { Children as i, Fragment as a, isValidElement as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region packages/breadcrumbs/index.tsx
-function l({ className: n, children: l, "aria-label": u, ...d }) {
-	let f = r(), p = u ?? f.breadcrumb, m = i.toArray(l).filter(o);
+function l({ className: r, children: l, "aria-label": u, ...d }) {
+	let f = e(), p = u ?? f.breadcrumb, m = i.toArray(l).filter(o);
 	return /* @__PURE__ */ s("nav", {
 		"aria-label": p,
-		className: t("zen__breadcrumbs", n),
+		className: n("zen__breadcrumbs", r),
 		...d,
 		children: /* @__PURE__ */ s("ol", {
 			className: "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm",
-			children: m.map((t, n) => /* @__PURE__ */ c(a, { children: [n > 0 && /* @__PURE__ */ s("li", {
+			children: m.map((e, n) => /* @__PURE__ */ c(a, { children: [n > 0 && /* @__PURE__ */ s("li", {
 				"aria-hidden": !0,
 				className: "text-muted-foreground/60 flex",
-				children: /* @__PURE__ */ s(e, { className: "size-3.5 rtl:-scale-x-100" })
+				children: /* @__PURE__ */ s(t, { className: "size-3.5 rtl:-scale-x-100" })
 			}), /* @__PURE__ */ s("li", {
 				className: "flex min-w-0",
-				children: t
-			})] }, t.key ?? n))
+				children: e
+			})] }, e.key ?? n))
 		})
 	});
 }
-function u({ current: e, asChild: r, className: i, ...a }) {
-	let o = t("truncate rounded-sm outline-hidden transition-colors focus-ring", e ? "text-foreground font-medium" : "hover:text-foreground touch-target", i);
+function u({ current: e, asChild: t, className: i, ...a }) {
+	let o = n("truncate rounded-sm outline-hidden transition-colors focus-ring", e ? "text-foreground font-medium" : "hover:text-foreground touch-target", i);
 	return e ? /* @__PURE__ */ s("span", {
 		"aria-current": "page",
 		className: o,
 		...a
-	}) : s(r ? n : "a", {
+	}) : s(t ? r : "a", {
 		className: o,
 		...a
 	});

package/dist/calendar/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 { PICKER_MONTH as a, PICKER_NAV as o } from "../utils/styles.js";
 import s from "../icons/chevron-left.js";
 import c from "../icons/chevron-right.js";
@@ -13,7 +13,7 @@ import { useEffect as ae, useId as oe, useRef as _, useState as v } from "react"
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region packages/calendar/index.tsx
 function se(se) {
-	let { locale: le, min: x, max: S, isDisabled: ue, weekStartsOn: de, months: C = 1, defaultMonth: fe, className: w, autoFocus: pe, mode: T, value: me, defaultValue: he = null, onValueChange: ge, ...E } = se, D = r(le), _e = new Intl.NumberFormat(D), O = i(), k = de ?? re(D), [A, j] = n(me, he, ge), M = T === "range" ? A : null, N = T === "range" ? null : A, P = N ?? M?.start ?? null, F = ne(), I = ie() ? F : null, [L, R] = v(() => fe ?? (P ?? F).slice(0, 7)), [z, B] = v(() => P ?? F), [V, H] = v(null), [U, W] = v("days"), [G, K] = v(() => Number(L.slice(0, 4))), q = _(null), J = _(pe ?? !1), ve = oe(), ye = l(L, C - 1), be = (e) => e.slice(0, 7) >= L && e.slice(0, 7) <= ye, xe = (e) => !!x && e < x || !!S && e > S || !!ue?.(e), Y = be(z) ? z : m(z, f(z.slice(0, 7), L));
+	let { locale: le, min: x, max: S, isDisabled: ue, weekStartsOn: de, months: C = 1, defaultMonth: fe, className: w, autoFocus: pe, mode: T, value: me, defaultValue: he = null, onValueChange: ge, ...E } = se, D = e(le), _e = new Intl.NumberFormat(D), O = t(), k = de ?? re(D), [A, j] = i(me, he, ge), M = T === "range" ? A : null, N = T === "range" ? null : A, P = N ?? M?.start ?? null, F = ne(), I = ie() ? F : null, [L, R] = v(() => fe ?? (P ?? F).slice(0, 7)), [z, B] = v(() => P ?? F), [V, H] = v(null), [U, W] = v("days"), [G, K] = v(() => Number(L.slice(0, 4))), q = _(null), J = _(pe ?? !1), ve = oe(), ye = l(L, C - 1), be = (e) => e.slice(0, 7) >= L && e.slice(0, 7) <= ye, xe = (e) => !!x && e < x || !!S && e > S || !!ue?.(e), Y = be(z) ? z : m(z, f(z.slice(0, 7), L));
 	ae(() => {
 		J.current && (J.current = !1, q.current?.querySelector(`[data-date="${Y}"]`)?.focus());
 	}, [Y, U]);
@@ -36,16 +36,16 @@ function se(se) {
 			} else j(e);
 		}
 	}, we = (e) => {
-		let n = Y, r = (h(n) - k + 7) % 7, i = {
-			ArrowLeft: p(n, -1),
-			ArrowRight: p(n, 1),
-			ArrowUp: p(n, -7),
-			ArrowDown: p(n, 7),
-			Home: p(n, -r),
-			End: p(n, 6 - r),
-			PageUp: m(n, e.shiftKey ? -12 : -1),
-			PageDown: m(n, e.shiftKey ? 12 : 1)
-		}[t(e.key, e.currentTarget)];
+		let t = Y, n = (h(t) - k + 7) % 7, i = {
+			ArrowLeft: p(t, -1),
+			ArrowRight: p(t, 1),
+			ArrowUp: p(t, -7),
+			ArrowDown: p(t, 7),
+			Home: p(t, -n),
+			End: p(t, 6 - n),
+			PageUp: m(t, e.shiftKey ? -12 : -1),
+			PageDown: m(t, e.shiftKey ? 12 : 1)
+		}[r(e.key, e.currentTarget)];
 		i && (e.preventDefault(), Se(i));
 	}, X = M && M.end === null ? M.start : null, Te = X && V ? V < X ? [V, X] : [X, V] : null, [Z, Q] = M?.end ? [M.start, M.end] : Te ?? [null, null], Ee = (e) => {
 		R((t) => l(t, e));
@@ -80,16 +80,16 @@ function se(se) {
 		]
 	});
 	if (U === "months") {
-		let t = d(D);
+		let e = d(D);
 		return /* @__PURE__ */ b("div", {
-			className: e("zen__calendar w-fit", w),
+			className: n("zen__calendar w-fit", w),
 			...E,
 			children: [$, /* @__PURE__ */ y("div", {
 				className: "grid w-64 grid-cols-3 gap-1",
 				role: "group",
 				"aria-labelledby": ve,
-				children: t.map((t, n) => {
-					let r = `${G}-${String(n + 1).padStart(2, "0")}`, i = !!x && r < x.slice(0, 7) || !!S && r > S.slice(0, 7);
+				children: e.map((e, t) => {
+					let r = `${G}-${String(t + 1).padStart(2, "0")}`, i = !!x && r < x.slice(0, 7) || !!S && r > S.slice(0, 7);
 					return /* @__PURE__ */ y("button", {
 						type: "button",
 						disabled: i,
@@ -98,8 +98,8 @@ function se(se) {
 						onClick: () => {
 							R(r), J.current = !0, B(m(z, f(z.slice(0, 7), r))), W("days");
 						},
-						className: e(a, r === L && "bg-primary text-primary-foreground hover:bg-primary"),
-						children: t
+						className: n(a, r === L && "bg-primary text-primary-foreground hover:bg-primary"),
+						children: e
 					}, r);
 				})
 			})]
@@ -107,15 +107,15 @@ function se(se) {
 	}
 	let De = g(D, "narrow"), Oe = g(D, "long"), ke = Array.from({ length: 7 }, (e, t) => (k + t) % 7);
 	return /* @__PURE__ */ b("div", {
-		className: e("zen__calendar w-fit", w),
+		className: n("zen__calendar w-fit", w),
 		...E,
 		children: [$, /* @__PURE__ */ y("div", {
 			ref: q,
 			className: "flex gap-4",
 			onKeyDown: we,
 			onMouseLeave: () => H(null),
-			children: Array.from({ length: C }, (t, n) => {
-				let r = l(L, n), i = `${r}-01`, a = `${r}-${ee(r)}`, o = p(i, -((h(i) - k + 7) % 7));
+			children: Array.from({ length: C }, (e, t) => {
+				let r = l(L, t), i = `${r}-01`, a = `${r}-${ee(r)}`, o = p(i, -((h(i) - k + 7) % 7));
 				return /* @__PURE__ */ b("table", {
 					role: "grid",
 					"aria-label": u(r, D, "long"),
@@ -131,14 +131,14 @@ function se(se) {
 							className: "text-muted-foreground size-9 text-xs font-medium",
 							children: De[e]
 						}, e)) }) }),
-						/* @__PURE__ */ y("tbody", { children: Array.from({ length: 6 }, (t, n) => /* @__PURE__ */ y("tr", { children: Array.from({ length: 7 }, (t, s) => {
-							let c = p(o, n * 7 + s), l = c.slice(0, 7) === r;
+						/* @__PURE__ */ y("tbody", { children: Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ y("tr", { children: Array.from({ length: 7 }, (e, s) => {
+							let c = p(o, t * 7 + s), l = c.slice(0, 7) === r;
 							if (!l && C > 1) return /* @__PURE__ */ y("td", { role: "gridcell" }, c);
 							let u = c === Z, d = c === Q, f = !!Z && !!Q && c > Z && c < Q, m = c === N || c === M?.start || c === M?.end, h = xe(c);
 							return /* @__PURE__ */ y("td", {
 								role: "gridcell",
 								"aria-selected": m || f || void 0,
-								className: e("p-0", (f || (u || d) && Z !== Q) && "bg-primary/15", u && "rounded-s-lg", d && "rounded-e-lg", f && (s === 0 || C > 1 && c === i) && "rounded-s-lg", f && (s === 6 || C > 1 && c === a) && "rounded-e-lg"),
+								className: n("p-0", (f || (u || d) && Z !== Q) && "bg-primary/15", u && "rounded-s-lg", d && "rounded-e-lg", f && (s === 0 || C > 1 && c === i) && "rounded-s-lg", f && (s === 6 || C > 1 && c === a) && "rounded-e-lg"),
 								children: /* @__PURE__ */ y("button", {
 									type: "button",
 									"data-date": c,
@@ -152,11 +152,11 @@ function se(se) {
 										B(c), X && H(c);
 									},
 									onMouseEnter: () => X && H(c),
-									className: e(ce, !l && "text-muted-foreground", h && "cursor-not-allowed opacity-35", m ? "bg-primary text-primary-foreground shadow-[0_0_20px_-4px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]" : !h && "hover:bg-tint/[0.08]", c === I && "after:bg-primary after:absolute after:bottom-1 after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full", c === I && m && "after:bg-primary-foreground"),
+									className: n(ce, !l && "text-muted-foreground", h && "cursor-not-allowed opacity-35", m ? "bg-primary text-primary-foreground shadow-[0_0_20px_-4px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]" : !h && "hover:bg-tint/[0.08]", c === I && "after:bg-primary after:absolute after:bottom-1 after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full", c === I && m && "after:bg-primary-foreground"),
 									children: _e.format(Number(c.slice(8)))
 								})
 							}, c);
-						}) }, n)) })
+						}) }, t)) })
 					]
 				}, r);
 			})

package/dist/calendar-heatmap/index.js

@@ -1,28 +1,28 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useLocale as t } from "../locale-provider/index.js";
+import { useLocale as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
 import { formatMonth as n } from "../utils/month.js";
 import { dayOfWeek as r, daysInMonth as i, formatDate as a, weekStart as o, weekdayNames as s } from "../utils/date.js";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region packages/calendar-heatmap/index.tsx
 function d({ month: d, values: f, locale: p, format: m = String, weekStartsOn: h, onSelectedChange: g, selected: _, label: v, className: y, ...b }) {
-	let x = t(p), S = new Intl.NumberFormat(x), C = h ?? o(x), w = i(d), T = Array.from({ length: w }, (e, t) => `${d}-${String(t + 1).padStart(2, "0")}`), E = (r(T[0]) - C + 7) % 7, D = [...Array(E).fill(null), ...T];
+	let x = e(p), S = new Intl.NumberFormat(x), C = h ?? o(x), w = i(d), T = Array.from({ length: w }, (e, t) => `${d}-${String(t + 1).padStart(2, "0")}`), E = (r(T[0]) - C + 7) % 7, D = [...Array(E).fill(null), ...T];
 	for (; D.length % 7;) D.push(null);
 	let O = Array.from({ length: D.length / 7 }, (e, t) => D.slice(t * 7, t * 7 + 7)), k = s(x, "narrow"), A = s(x, "long"), j = Array.from({ length: 7 }, (e, t) => (C + t) % 7), M = Math.max(0, ...T.map((e) => f[e] ?? 0));
 	return /* @__PURE__ */ u("table", {
 		"aria-label": v ?? n(d, x, "long"),
 		...b,
-		className: e("zen__calendar-heatmap w-full table-fixed border-separate border-spacing-1", y),
+		className: t("zen__calendar-heatmap w-full table-fixed border-separate border-spacing-1", y),
 		children: [/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: j.map((e) => /* @__PURE__ */ l("th", {
 			scope: "col",
 			abbr: A[e],
 			className: "text-muted-foreground pb-1 text-xs font-normal",
 			children: k[e]
-		}, e)) }) }), /* @__PURE__ */ l("tbody", { children: O.map((t, n) => /* @__PURE__ */ l("tr", { children: t.map((t, n) => {
-			if (!t) return /* @__PURE__ */ l("td", {}, n);
-			let r = f[t], i = M > 0 && r ? Math.sqrt(r / M) : 0, o = `${a(t, x, "day")}: ${m(r || 0)}`, s = e("relative grid aspect-square w-full place-items-center rounded-md text-[0.65rem] tabular-nums transition-[box-shadow]", i ? i > .6 ? "text-primary-foreground" : "text-foreground/80" : "bg-tint/[0.04] text-muted-foreground", t === _ && "ring-ring ring-2"), d = i ? { background: `oklch(var(--primary) / ${+(.14 + .81 * i).toFixed(2)})` } : void 0, p = /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+		}, e)) }) }), /* @__PURE__ */ l("tbody", { children: O.map((e, n) => /* @__PURE__ */ l("tr", { children: e.map((e, n) => {
+			if (!e) return /* @__PURE__ */ l("td", {}, n);
+			let r = f[e], i = M > 0 && r ? Math.sqrt(r / M) : 0, o = `${a(e, x, "day")}: ${m(r || 0)}`, s = t("relative grid aspect-square w-full place-items-center rounded-md text-[0.65rem] tabular-nums transition-[box-shadow]", i ? i > .6 ? "text-primary-foreground" : "text-foreground/80" : "bg-tint/[0.04] text-muted-foreground", e === _ && "ring-ring ring-2"), d = i ? { background: `oklch(var(--primary) / ${+(.14 + .81 * i).toFixed(2)})` } : void 0, p = /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
 				"aria-hidden": !0,
-				children: S.format(Number(t.slice(8)))
+				children: S.format(Number(e.slice(8)))
 			}), /* @__PURE__ */ l("span", {
 				className: "sr-only",
 				children: o
@@ -32,9 +32,9 @@ function d({ month: d, values: f, locale: p, format: m = String, weekStartsOn: h
 				className: "p-0",
 				children: g ? /* @__PURE__ */ l("button", {
 					type: "button",
-					"aria-pressed": t === _,
-					onClick: () => g(t),
-					className: e(s, " cursor-pointer outline-hidden hover:shadow-[0_0_0_1px_oklch(var(--tint)/0.3)] focus-ring"),
+					"aria-pressed": e === _,
+					onClick: () => g(e),
+					className: t(s, " cursor-pointer outline-hidden hover:shadow-[0_0_0_1px_oklch(var(--tint)/0.3)] focus-ring"),
 					style: d,
 					children: p
 				}) : /* @__PURE__ */ l("span", {
@@ -42,7 +42,7 @@ function d({ month: d, values: f, locale: p, format: m = String, weekStartsOn: h
 					style: d,
 					children: p
 				})
-			}, t);
+			}, e);
 		}) }, n)) })]
 	});
 }

package/dist/canvas/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMergedRefs as t } from "../utils/refs.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 { useMergedRefs as n } from "../utils/refs.js";
 import { boundsOf as r, intersects as i, moveRect as a, resizeRect as o } from "./geometry.js";
 import { createContext as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useRef as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
@@ -31,7 +31,7 @@ var g = typeof window > "u" ? l : d, _ = 3, ee = "input, textarea, select, butto
 	ArrowDown: [0, 1]
 }, x = (e, t) => e.x === t.x && e.y === t.y && e.w === t.w && e.h === t.h, S = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), C = s(null);
 function w({ width: s, height: c, scale: l = 1, items: d, onItemsChange: v, onItemsChangeEnd: y, selected: w = [], onSelectedChange: T, minSize: E = 8, snap: D = !1, grid: O, className: te, style: ne, children: re, onPointerDown: ie, ref: ae, ...k }) {
-	let A = n(), j = f(null), oe = t(j, ae), M = f(!1), [N, se] = p(null), [ce, P] = p([]), [F, I] = p(null), [L, R] = p(null), [le, z] = p(!1), [B, V] = p(""), H = u();
+	let A = e(), j = f(null), oe = n(j, ae), M = f(!1), [N, se] = p(null), [ce, P] = p([]), [F, I] = p(null), [L, R] = p(null), [le, z] = p(!1), [B, V] = p(""), H = u();
 	g(() => {
 		let e = j.current;
 		if (l !== "fit" || !e) return;
@@ -190,7 +190,7 @@ function w({ width: s, height: c, scale: l = 1, items: d, onItemsChange: v, onIt
 						height: c * U
 					}
 				},
-				className: e("zen__canvas bg-tint/[0.03] relative shrink-0 overflow-hidden rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.08)] select-none", te),
+				className: t("zen__canvas bg-tint/[0.03] relative shrink-0 overflow-hidden rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.08)] select-none", te),
 				children: [/* @__PURE__ */ m("div", {
 					style: {
 						width: s,
@@ -198,7 +198,7 @@ function w({ width: s, height: c, scale: l = 1, items: d, onItemsChange: v, onIt
 						scale: String(U),
 						"--canvas-scale": U
 					},
-					className: e("absolute top-0 left-0 origin-top-left", l === "fit" && N === null && "invisible"),
+					className: t("absolute top-0 left-0 origin-top-left", l === "fit" && N === null && "invisible"),
 					children: re
 				}), /* @__PURE__ */ h("div", {
 					"aria-hidden": !0,
@@ -260,30 +260,30 @@ function w({ width: s, height: c, scale: l = 1, items: d, onItemsChange: v, onIt
 		]
 	});
 }
-function T({ id: t, label: n, className: r, style: i, children: a, ...o }) {
+function T({ id: e, label: n, className: r, style: i, children: a, ...o }) {
 	let s = c(C);
 	if (!s) throw Error("<CanvasItem> must be inside <Canvas>");
-	let l = s.item(t);
+	let l = s.item(e);
 	if (!l) return null;
-	let u = s.selected.includes(t), d = u && s.selected.length === 1;
+	let u = s.selected.includes(e), d = u && s.selected.length === 1;
 	return /* @__PURE__ */ h("div", {
 		role: "group",
 		"aria-roledescription": l.locked ? "locked item" : "movable item",
 		"aria-label": n,
 		"aria-describedby": l.locked ? void 0 : s.hintId,
 		tabIndex: 0,
-		"data-canvas-id": t,
+		"data-canvas-id": e,
 		"data-selected": u || void 0,
 		"data-locked": l.locked || void 0,
 		...o,
-		onFocus: (e) => {
-			o.onFocus?.(e), e.target === e.currentTarget && s.focus(t);
+		onFocus: (t) => {
+			o.onFocus?.(t), t.target === t.currentTarget && s.focus(e);
 		},
-		onPointerDown: (e) => {
-			o.onPointerDown?.(e), s.grab(e, t, n);
+		onPointerDown: (t) => {
+			o.onPointerDown?.(t), s.grab(t, e, n);
 		},
-		onKeyDown: (e) => {
-			o.onKeyDown?.(e), s.key(e, t, n);
+		onKeyDown: (t) => {
+			o.onKeyDown?.(t), s.key(t, e, n);
 		},
 		style: {
 			...i,
@@ -292,12 +292,12 @@ function T({ id: t, label: n, className: r, style: i, children: a, ...o }) {
 			width: l.w,
 			height: l.h
 		},
-		className: e("zen__canvas-item absolute cursor-move touch-none outline-hidden data-locked:cursor-default data-locked:touch-auto", "[outline-offset:calc(1px/var(--canvas-scale))]", "not-data-selected:hover:outline-solid not-data-selected:hover:outline-[length:calc(1px/var(--canvas-scale))] not-data-selected:hover:outline-[color:oklch(var(--tint)/0.35)]", "data-selected:outline-solid data-selected:outline-[length:calc(2px/var(--canvas-scale))] data-selected:outline-[color:oklch(var(--primary)/0.8)]", "focus-visible:outline-solid focus-visible:outline-[length:calc(2px/var(--canvas-scale))] focus-visible:outline-[color:oklch(var(--ring)/0.7)]", r),
+		className: t("zen__canvas-item absolute cursor-move touch-none outline-hidden data-locked:cursor-default data-locked:touch-auto", "[outline-offset:calc(1px/var(--canvas-scale))]", "not-data-selected:hover:outline-solid not-data-selected:hover:outline-[length:calc(1px/var(--canvas-scale))] not-data-selected:hover:outline-[color:oklch(var(--tint)/0.35)]", "data-selected:outline-solid data-selected:outline-[length:calc(2px/var(--canvas-scale))] data-selected:outline-[color:oklch(var(--primary)/0.8)]", "focus-visible:outline-solid focus-visible:outline-[length:calc(2px/var(--canvas-scale))] focus-visible:outline-[color:oklch(var(--ring)/0.7)]", r),
 		children: [a, d && !l.locked && v.map((r) => /* @__PURE__ */ m("span", {
 			"aria-hidden": !0,
 			"data-handle": r,
-			onPointerDown: (e) => s.grab(e, t, n, r),
-			className: e("bg-foreground absolute z-10 size-[calc(10px/var(--canvas-scale))] -translate-1/2 rounded-full border-[length:calc(2px/var(--canvas-scale))] border-[color:oklch(var(--primary))] shadow-[0_0_8px_oklch(var(--glow)/0.6)]", "after:absolute after:-inset-[calc(6px/var(--canvas-scale))] pointer-coarse:after:-inset-[calc(14px/var(--canvas-scale))]", y[r])
+			onPointerDown: (t) => s.grab(t, e, n, r),
+			className: t("bg-foreground absolute z-10 size-[calc(10px/var(--canvas-scale))] -translate-1/2 rounded-full border-[length:calc(2px/var(--canvas-scale))] border-[color:oklch(var(--primary))] shadow-[0_0_8px_oklch(var(--glow)/0.6)]", "after:absolute after:-inset-[calc(6px/var(--canvas-scale))] pointer-coarse:after:-inset-[calc(14px/var(--canvas-scale))]", y[r])
 		}, r))]
 	});
 }

package/dist/carousel/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useMergedRefs as t } from "../utils/refs.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 { useMergedRefs as n } from "../utils/refs.js";
 import { reducedMotion as r } from "../utils/motion.js";
 import i from "../icons/chevron-left.js";
 import a from "../icons/chevron-right.js";
@@ -18,8 +18,8 @@ function _(e, t) {
 	let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
 	return (getComputedStyle(t).direction === "rtl" ? r.right - n.right : n.left - r.left) + Math.abs(t.scrollLeft);
 }
-function v({ className: t, children: i, ...a }) {
-	let o = n(), c = d(null), [l, u] = f({
+function v({ className: n, children: i, ...a }) {
+	let o = e(), c = d(null), [l, u] = f({
 		index: 0,
 		stops: 1,
 		count: 0
@@ -70,23 +70,23 @@ function v({ className: t, children: i, ...a }) {
 		children: /* @__PURE__ */ p("section", {
 			"aria-roledescription": o.carousel,
 			...a,
-			className: e("zen__carousel relative", t),
+			className: t("zen__carousel relative", n),
 			children: i
 		})
 	});
 }
-function y({ ref: n, className: r, ...i }) {
-	let { contentRef: a } = g("CarouselContent"), o = t(a, n);
+function y({ ref: e, className: r, ...i }) {
+	let { contentRef: a } = g("CarouselContent"), o = n(a, e);
 	return /* @__PURE__ */ p("div", {
 		tabIndex: 0,
 		"aria-live": "polite",
 		...i,
 		ref: o,
-		className: e("flex snap-x snap-mandatory gap-4 overflow-x-auto overscroll-x-contain rounded-xl", "focus-ring [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", r)
+		className: t("flex snap-x snap-mandatory gap-4 overflow-x-auto overscroll-x-contain rounded-xl", "focus-ring [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", r)
 	});
 }
 function b({ ref: r, className: i, ...a }) {
-	let o = n(), { count: s } = g("CarouselItem"), c = d(null), l = t(c, r), [u, h] = f(0);
+	let o = e(), { count: s } = g("CarouselItem"), c = d(null), l = n(c, r), [u, h] = f(0);
 	return m(() => {
 		let e = c.current;
 		e?.parentElement && h(Array.prototype.indexOf.call(e.parentElement.children, e) + 1);
@@ -96,18 +96,18 @@ function b({ ref: r, className: i, ...a }) {
 		"aria-label": u && s ? o.slideOf(u, s) : void 0,
 		...a,
 		ref: l,
-		className: e("min-w-0 shrink-0 grow-0 basis-full snap-start", i)
+		className: t("min-w-0 shrink-0 grow-0 basis-full snap-start", i)
 	});
 }
 var x = "glass glass-blur text-foreground grid size-9 shrink-0 cursor-pointer place-items-center rounded-full transition-opacity focus-ring hover:bg-tint/[0.08] aria-disabled:cursor-not-allowed aria-disabled:opacity-0 aria-disabled:focus-visible:opacity-40";
-function S({ className: t, onClick: r, ...a }) {
-	let o = n(), { index: s, scrollTo: c } = g("CarouselPrevious"), l = s === 0;
+function S({ className: n, onClick: r, ...a }) {
+	let o = e(), { index: s, scrollTo: c } = g("CarouselPrevious"), l = s === 0;
 	return /* @__PURE__ */ p("button", {
 		type: "button",
 		"aria-label": o.previousSlide,
 		...a,
 		"aria-disabled": l || void 0,
-		className: e(x, t),
+		className: t(x, n),
 		onClick: (e) => {
 			r?.(e), !l && !e.defaultPrevented && c(s - 1);
 		},
@@ -117,14 +117,14 @@ function S({ className: t, onClick: r, ...a }) {
 		})
 	});
 }
-function C({ className: t, onClick: r, ...i }) {
-	let o = n(), { index: s, stops: c, scrollTo: l } = g("CarouselNext"), u = s >= c - 1;
+function C({ className: n, onClick: r, ...i }) {
+	let o = e(), { index: s, stops: c, scrollTo: l } = g("CarouselNext"), u = s >= c - 1;
 	return /* @__PURE__ */ p("button", {
 		type: "button",
 		"aria-label": o.nextSlide,
 		...i,
 		"aria-disabled": u || void 0,
-		className: e(x, t),
+		className: t(x, n),
 		onClick: (e) => {
 			r?.(e), !u && !e.defaultPrevented && l(s + 1);
 		},
@@ -134,12 +134,12 @@ function C({ className: t, onClick: r, ...i }) {
 		})
 	});
 }
-function w({ className: t, ...r }) {
-	let i = n(), { index: a, stops: o, scrollTo: s } = g("CarouselDots");
+function w({ className: n, ...r }) {
+	let i = e(), { index: a, stops: o, scrollTo: s } = g("CarouselDots");
 	return o < 2 ? null : /* @__PURE__ */ p("div", {
 		...r,
-		className: e("flex justify-center gap-0.5", t),
-		children: Array.from({ length: o }, (t, n) => /* @__PURE__ */ p("button", {
+		className: t("flex justify-center gap-0.5", n),
+		children: Array.from({ length: o }, (e, n) => /* @__PURE__ */ p("button", {
 			type: "button",
 			"aria-label": i.goToSlide(n + 1),
 			"aria-current": n === a || void 0,
@@ -147,15 +147,15 @@ function w({ className: t, ...r }) {
 			className: "group cursor-pointer rounded-full p-1 outline-hidden",
 			children: /* @__PURE__ */ p("span", {
 				"aria-hidden": !0,
-				className: e("block h-1.5 rounded-full transition-[width,background-color,box-shadow] duration-300", "group-focus-visible:ring-2 group-focus-visible:ring-ring/50", n === a ? "bg-primary w-5 shadow-[0_0_10px_oklch(var(--glow)/calc(0.7*var(--glow-k)))]" : "bg-tint/25 group-hover:bg-tint/40 w-1.5")
+				className: t("block h-1.5 rounded-full transition-[width,background-color,box-shadow] duration-300", "group-focus-visible:ring-2 group-focus-visible:ring-ring/50", n === a ? "bg-primary w-5 shadow-[0_0_10px_oklch(var(--glow)/calc(0.7*var(--glow-k)))]" : "bg-tint/25 group-hover:bg-tint/40 w-1.5")
 			})
 		}, n))
 	});
 }
-function T({ className: t, ...n }) {
+function T({ className: e, ...n }) {
 	return /* @__PURE__ */ p("div", {
 		...n,
-		className: e("mt-3 flex items-center justify-between gap-3", t)
+		className: t("mt-3 flex items-center justify-between gap-3", e)
 	});
 }
 //#endregion

package/dist/chart/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 { useSeen as n } from "../utils/useSeen.js";
 import { paletteColor as r } from "./palette.js";
 import { ChartTooltipCard as i, Key as a } from "./tooltip.js";
@@ -19,7 +19,7 @@ var g = () => null, _ = () => null, v = () => null, ne = () => null, y = /* @__P
 	bottom: 26
 }, x = 11;
 function S({ data: a, x: o, label: s, summary: c, height: g = 240, formatX: _ = String, formatY: v = O, formatTooltipX: S, renderTooltip: D, legend: j, palette: M = "chart", className: N, children: P, ...F }) {
-	let I = t(), L = l().replace(/[^\w-]/g, ""), R = d(null), z = E(R), B = n(R), [V, H] = f(null), [oe, U] = f(null), W = u(() => {
+	let I = e(), L = l().replace(/[^\w-]/g, ""), R = d(null), z = E(R), B = n(R), [V, H] = f(null), [oe, U] = f(null), W = u(() => {
 		let e = ee.toArray(P).filter(te), t = e.filter((e) => y.has(e.type)).length, n = [], i = [];
 		for (let a of e) {
 			a.type === ne && i.push(a.props);
@@ -223,7 +223,7 @@ function S({ data: a, x: o, label: s, summary: c, height: g = 240, formatX: _ =
 	return /* @__PURE__ */ h("figure", {
 		"aria-label": s,
 		...F,
-		className: e("zen__chart m-0 flex flex-col gap-3", N),
+		className: t("zen__chart m-0 flex flex-col gap-3", N),
 		children: [
 			ve && /* @__PURE__ */ m(w, { series: G }),
 			/* @__PURE__ */ h("div", {
@@ -304,12 +304,12 @@ function C(e, t) {
 	let n = e[t];
 	return typeof n == "number" && Number.isFinite(n) ? n : null;
 }
-function w({ series: e }) {
-	let n = t(), r = e.filter((t, n) => t.dimLabel && e.findIndex((e) => e.dimLabel === t.dimLabel) === n);
+function w({ series: t }) {
+	let n = e(), r = t.filter((e, n) => e.dimLabel && t.findIndex((t) => t.dimLabel === e.dimLabel) === n);
 	return /* @__PURE__ */ h("ul", {
 		className: "text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-xs",
 		"aria-label": n.legend,
-		children: [e.map((e) => /* @__PURE__ */ h("li", {
+		children: [t.map((e) => /* @__PURE__ */ h("li", {
 			className: "flex items-center gap-1.5",
 			children: [/* @__PURE__ */ m(a, {
 				color: e.color,