@rinzai/zen 0.15.0 → 0.16.0

package/dist/money-input/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useControllable as t } from "../utils/useControllable.js";
-import n, { MenuContent as r, MenuItem as i, MenuSeparator as a, MenuTrigger as o } from "../menu/index.js";
-import { useLocale as s, useMessages as c } 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 { useControllable as r } from "../utils/useControllable.js";
+import i, { MenuContent as a, MenuItem as o, MenuSeparator as s, MenuTrigger as c } from "../menu/index.js";
 import { currencySymbol as l, formatAmount as u, formatMoney as d, minorDigits as f, parseMoneyInput as p } from "../utils/money.js";
 import m from "../spinner/index.js";
 import { AlertIcon as h, InfoIcon as g } from "../utils/status-icons.js";
@@ -13,10 +13,10 @@ import { convertMinor as S, rateBetween as C } from "../utils/fx.js";
 import { useEffect as w, useId as T, useRef as E, useState as D } from "react";
 import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
 //#region packages/money-input/index.tsx
-function j({ value: t, defaultValue: n, onValueChange: r, currency: i, locale: a, allowNegative: o, allowEmpty: s, live: c, onCancel: l, convert: u, start: d, end: f, compact: p = !1, size: m, disabled: g = !1, className: v, onFocus: S, onBlur: C, onKeyDown: w, "aria-describedby": T, name: E, ...D }) {
+function j({ value: e, defaultValue: t, onValueChange: r, currency: i, locale: a, allowNegative: o, allowEmpty: s, live: c, onCancel: l, convert: u, start: d, end: f, compact: p = !1, size: m, disabled: g = !1, className: v, onFocus: S, onBlur: C, onKeyDown: w, "aria-describedby": T, name: E, ...D }) {
 	let O = P({
-		value: t,
-		defaultValue: n,
+		value: e,
+		defaultValue: t,
 		onValueChange: r,
 		currency: i,
 		locale: a,
@@ -27,13 +27,13 @@ function j({ value: t, defaultValue: n, onValueChange: r, currency: i, locale: a
 		convert: u
 	}), j = !!O.conversion?.foreign;
 	return /* @__PURE__ */ A("div", {
-		className: e("zen__money-input flex flex-col gap-1", v),
+		className: n("zen__money-input flex flex-col gap-1", v),
 		children: [
 			/* @__PURE__ */ A(y, {
 				invalid: !!O.error,
 				size: m,
 				"data-foreign": j || void 0,
-				className: e(p && "h-7", "data-foreign:border-primary/50"),
+				className: n(p && "h-7", "data-foreign:border-primary/50"),
 				children: [
 					d ?? (O.conversion && !g ? /* @__PURE__ */ k(M, { money: O }) : /* @__PURE__ */ k(b, {
 						"aria-hidden": !0,
@@ -52,9 +52,9 @@ function j({ value: t, defaultValue: n, onValueChange: r, currency: i, locale: a
 						onKeyDown: (e) => {
 							O.inputProps.onKeyDown(e), w?.(e);
 						},
-						"aria-describedby": e(O.inputProps["aria-describedby"], T) || void 0,
+						"aria-describedby": n(O.inputProps["aria-describedby"], T) || void 0,
 						disabled: g,
-						className: e("tabular-nums", p ? "text-end" : "text-start")
+						className: n("tabular-nums", p ? "text-end" : "text-start")
 					}),
 					f
 				]
@@ -73,19 +73,19 @@ function j({ value: t, defaultValue: n, onValueChange: r, currency: i, locale: a
 		]
 	});
 }
-function M({ money: t, className: s }) {
-	let u = t.conversion, d = c();
-	return u ? /* @__PURE__ */ A(n, { children: [/* @__PURE__ */ A(o, {
+function M({ money: e, className: r }) {
+	let u = e.conversion, d = t();
+	return u ? /* @__PURE__ */ A(i, { children: [/* @__PURE__ */ A(c, {
 		"aria-label": d.changeCurrency(u.currency),
-		className: e("group/currency hover:bg-tint/[0.07] -ms-1 flex shrink-0 items-center gap-0.5 rounded-md px-1 py-0.5 text-sm outline-hidden focus-ring", u.foreign ? "text-primary" : "text-muted-foreground", s),
-		children: [u.foreign ? u.currency : t.symbol, /* @__PURE__ */ k(v, { className: "text-inherit duration-150 group-data-popup-open/currency:rotate-180" })]
-	}), /* @__PURE__ */ A(r, {
+		className: n("group/currency hover:bg-tint/[0.07] -ms-1 flex shrink-0 items-center gap-0.5 rounded-md px-1 py-0.5 text-sm outline-hidden focus-ring", u.foreign ? "text-primary" : "text-muted-foreground", r),
+		children: [u.foreign ? u.currency : e.symbol, /* @__PURE__ */ k(v, { className: "text-inherit duration-150 group-data-popup-open/currency:rotate-180" })]
+	}), /* @__PURE__ */ A(a, {
 		align: "start",
 		offset: 8,
 		"aria-label": d.currency,
 		className: "max-h-72 w-60 overflow-y-auto",
 		children: [
-			/* @__PURE__ */ A(i, {
+			/* @__PURE__ */ A(o, {
 				onSelect: () => u.pick(u.home),
 				className: "gap-2 py-1.5",
 				children: [/* @__PURE__ */ k("span", {
@@ -96,12 +96,12 @@ function M({ money: t, className: s }) {
 					children: d.yourCurrency
 				})]
 			}),
-			/* @__PURE__ */ k(a, {}),
+			/* @__PURE__ */ k(s, {}),
 			/* @__PURE__ */ k("div", {
 				className: "text-muted-foreground px-3 pt-1 pb-1.5 text-xs",
 				children: d.otherCurrencies
 			}),
-			u.choices.map((e) => /* @__PURE__ */ A(i, {
+			u.choices.map((e) => /* @__PURE__ */ A(o, {
 				onSelect: () => u.pick(e),
 				className: "gap-2 py-1.5",
 				children: [/* @__PURE__ */ k("span", {
@@ -115,63 +115,63 @@ function M({ money: t, className: s }) {
 		]
 	})] }) : null;
 }
-function N({ money: t, className: n }) {
-	let r = t.conversion, i = c();
-	if (!r || !r.foreign && !r.converted) return null;
-	let { home: a, locale: o } = r, s = e("text-muted-foreground flex items-center gap-1.5 text-xs", n);
-	if (!r.foreign) {
-		let e = r.converted;
+function N({ money: e, className: r }) {
+	let i = e.conversion, a = t();
+	if (!i || !i.foreign && !i.converted) return null;
+	let { home: o, locale: s } = i, c = n("text-muted-foreground flex items-center gap-1.5 text-xs", r);
+	if (!i.foreign) {
+		let t = i.converted;
 		return /* @__PURE__ */ A("p", {
-			id: t.hintId,
+			id: e.hintId,
 			role: "status",
-			className: s,
-			children: [/* @__PURE__ */ k(g, { className: "text-primary shrink-0" }), i.convertedFrom(d(e.amount, e.currency, o), I(e.rate))]
+			className: c,
+			children: [/* @__PURE__ */ k(g, { className: "text-primary shrink-0" }), a.convertedFrom(d(t.amount, t.currency, s), I(t.rate))]
 		});
 	}
 	return /* @__PURE__ */ k("p", {
-		id: t.hintId,
+		id: e.hintId,
 		role: "status",
-		className: s,
-		children: r.status === "idle" || r.status === "loading" ? /* @__PURE__ */ A(O, { children: [
+		className: c,
+		children: i.status === "idle" || i.status === "loading" ? /* @__PURE__ */ A(O, { children: [
 			/* @__PURE__ */ k(m, { className: "size-3" }),
 			" ",
-			i.gettingRate
-		] }) : r.rate === null ? /* @__PURE__ */ A(O, { children: [
+			a.gettingRate
+		] }) : i.rate === null ? /* @__PURE__ */ A(O, { children: [
 			/* @__PURE__ */ k(h, { className: "text-destructive shrink-0" }),
 			" ",
-			i.ratesUnavailable(a)
+			a.ratesUnavailable(o)
 		] }) : /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(g, { className: "text-primary shrink-0" }), /* @__PURE__ */ A("span", { children: [
-			r.preview !== null && /* @__PURE__ */ A("span", {
+			i.preview !== null && /* @__PURE__ */ A("span", {
 				className: "text-foreground font-medium",
 				children: [
 					"≈ ",
-					d(r.preview, a, o),
+					d(i.preview, o, s),
 					" ·",
 					" "
 				]
 			}),
-			i.rateOf(r.currency, d(Math.round(r.rate * 10 ** f(a)), a, o)),
+			a.rateOf(i.currency, d(Math.round(i.rate * 10 ** f(o)), o, s)),
 			" ",
 			"(",
-			r.source ? `${r.source}, ` : "",
-			L(r.date, o),
+			i.source ? `${i.source}, ` : "",
+			L(i.date, s),
 			")"
 		] })] })
 	});
 }
-function P({ value: n, defaultValue: r = null, onValueChange: i, currency: a, locale: o, allowNegative: f = !1, allowEmpty: m = !1, live: h = !1, onCancel: g, convert: _ }) {
-	let v = s(o), y = c(), [b, x, E] = t(n, r, i), O = _?.initial ?? null, [k, A] = D(() => O?.currency ?? a), j = !!_ && k !== a, M = F(_?.loadRates, j), N = (e) => e === null ? "" : u(e, a, v), [P, I] = D(() => O ? u(O.amount, O.currency, v) : N(b)), [L, R] = D(null), [z, B] = D(null), [V, H] = D(!1), [U, W] = D(!1), G = T(), K = T();
+function P({ value: i, defaultValue: a = null, onValueChange: o, currency: s, locale: c, allowNegative: f = !1, allowEmpty: m = !1, live: h = !1, onCancel: g, convert: _ }) {
+	let v = e(c), y = t(), [b, x, E] = r(i, a, o), O = _?.initial ?? null, [k, A] = D(() => O?.currency ?? s), j = !!_ && k !== s, M = F(_?.loadRates, j), N = (e) => e === null ? "" : u(e, s, v), [P, I] = D(() => O ? u(O.amount, O.currency, v) : N(b)), [L, R] = D(null), [z, B] = D(null), [V, H] = D(!1), [U, W] = D(!1), G = T(), K = T();
 	w(() => {
 		!V && !j && !(h && U) && I(N(b));
 	}, [
 		b,
-		a,
+		s,
 		v
 	]);
 	let q = (e) => {
 		if (!M.table) return null;
 		try {
-			return C(M.table, e, a);
+			return C(M.table, e, s);
 		} catch {
 			return null;
 		}
@@ -209,7 +209,7 @@ function P({ value: n, defaultValue: r = null, onValueChange: i, currency: a, lo
 			x(null);
 			return;
 		}
-		t === a ? (x(i), _?.onForeign?.(null)) : n === null ? x(null) : (x(S(i, n, t, a)), _?.onForeign?.({
+		t === s ? (x(i), _?.onForeign?.(null)) : n === null ? x(null) : (x(S(i, n, t, s)), _?.onForeign?.({
 			currency: t,
 			amount: i,
 			rate: n,
@@ -224,13 +224,13 @@ function P({ value: n, defaultValue: r = null, onValueChange: i, currency: a, lo
 		if (e === void 0) return !1;
 		if (e !== null && j) {
 			if (J === null) return R(M.status === "error" ? y.rateFailed : y.rateLoading), !1;
-			let t = S(e, J, k, a), n = {
+			let t = S(e, J, k, s), n = {
 				currency: k,
 				amount: e,
 				rate: J,
 				date: M.table.date
 			};
-			return B(n), A(a), I(N(t)), x(t), _?.onForeign?.(n), !0;
+			return B(n), A(s), I(N(t)), x(t), _?.onForeign?.(n), !0;
 		}
 		return I(N(e)), x(e), e !== b && (B(null), _?.onForeign?.(null)), !0;
 	}
@@ -239,12 +239,12 @@ function P({ value: n, defaultValue: r = null, onValueChange: i, currency: a, lo
 		e !== void 0 && I(e === null ? "" : u(e, k, v));
 	}
 	function ee(e) {
-		A(e), R(null), h && P.trim() && (W(!0), Z(P, e, e === a ? null : q(e)));
+		A(e), R(null), h && P.trim() && (W(!0), Z(P, e, e === s ? null : q(e)));
 	}
 	let te = (() => {
 		if (!j || J === null || !P.trim()) return null;
 		try {
-			return S(p(P, k), J, k, a);
+			return S(p(P, k), J, k, s);
 		} catch {
 			return null;
 		}
@@ -257,7 +257,7 @@ function P({ value: n, defaultValue: r = null, onValueChange: i, currency: a, lo
 			spellCheck: !1,
 			value: P,
 			"aria-invalid": L ? !0 : void 0,
-			"aria-describedby": e(L ? G : (j || !!z) && K) || void 0,
+			"aria-describedby": n(L ? G : (j || !!z) && K) || void 0,
 			onChange: (e) => {
 				I(e.target.value), B(null), h && (W(!0), Z(e.target.value, k, J));
 			},
@@ -266,7 +266,7 @@ function P({ value: n, defaultValue: r = null, onValueChange: i, currency: a, lo
 				H(!1), h ? $() : Q();
 			},
 			onKeyDown: (e) => {
-				e.key === "Enter" ? (e.preventDefault(), h ? $() : Q()) : e.key === "Escape" && (e.preventDefault(), A(a), I(N(b)), R(null), g?.());
+				e.key === "Enter" ? (e.preventDefault(), h ? $() : Q()) : e.key === "Escape" && (e.preventDefault(), A(s), I(N(b)), R(null), g?.());
 			}
 		},
 		value: b,
@@ -278,13 +278,13 @@ function P({ value: n, defaultValue: r = null, onValueChange: i, currency: a, lo
 		text: P,
 		setText: I,
 		commit: Q,
-		formatted: b === null ? "" : d(b, a, v),
+		formatted: b === null ? "" : d(b, s, v),
 		conversion: _ ? {
-			home: a,
+			home: s,
 			locale: v,
 			currency: k,
 			foreign: j,
-			choices: _.currencies.filter((e) => e !== a && (!M.table || e === M.table.base || e in M.table.rates)),
+			choices: _.currencies.filter((e) => e !== s && (!M.table || e === M.table.base || e in M.table.rates)),
 			pick: ee,
 			status: M.status,
 			rate: J,

package/dist/month-picker/index.js

@@ -1,8 +1,8 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useControllable as t } from "../utils/useControllable.js";
-import { useAnchoredPopup as n } from "../utils/useAnchoredPopup.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 { useControllable as r } from "../utils/useControllable.js";
+import { useAnchoredPopup as i } from "../utils/useAnchoredPopup.js";
 import { useFieldProps as a } from "../field/index.js";
 import { FIELD_SIZE as o, PICKER_MONTH as s, PICKER_NAV as c, PLACEHOLDER as l, POPUP as u, TRIGGER as d } from "../utils/styles.js";
 import { FormValue as f } from "../utils/form-value.js";
@@ -14,7 +14,7 @@ import { useState as v } from "react";
 import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region packages/month-picker/index.tsx
 function S({ value: S, defaultValue: C = null, onValueChange: w, locale: T, min: E, max: D, id: O, className: k, disabled: A = !1, size: j = "default", placeholder: M, clearable: N = !1, clearLabel: P, name: F, style: I, ...L }) {
-	let R = i(), z = M ?? R.pickMonth, B = P ?? R.clear, V = r(T), [H, U, W] = t(S, C, w), [G, K] = v(() => Number((H ?? (/* @__PURE__ */ new Date()).toISOString()).slice(0, 4))), q = n({ onOpenChange: (e) => e && H && K(Number(H.slice(0, 4))) }), J = a({
+	let R = t(), z = M ?? R.pickMonth, B = P ?? R.clear, V = e(T), [H, U, W] = r(S, C, w), [G, K] = v(() => Number((H ?? (/* @__PURE__ */ new Date()).toISOString()).slice(0, 4))), q = i({ onOpenChange: (e) => e && H && K(Number(H.slice(0, 4))) }), J = a({
 		...L,
 		id: O
 	}), Y = _(V), X = (e) => (!E || e >= E) && (!D || e <= D);
@@ -30,7 +30,7 @@ function S({ value: S, defaultValue: C = null, onValueChange: w, locale: T, min:
 				...q.triggerProps.style,
 				...I
 			},
-			className: e("zen__month-picker group", d, o[j], "w-full", q.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", k),
+			className: n("zen__month-picker group", d, o[j], "w-full", q.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", k),
 			children: [/* @__PURE__ */ b("span", {
 				className: H ? void 0 : l,
 				children: H ? g(H, V) : z
@@ -45,7 +45,7 @@ function S({ value: S, defaultValue: C = null, onValueChange: w, locale: T, min:
 			...q.popupProps,
 			role: "dialog",
 			"aria-label": R.chooseMonth,
-			className: e("zen__popover", u, "w-64 p-3"),
+			className: n("zen__popover", u, "w-64 p-3"),
 			children: [
 				/* @__PURE__ */ x("div", {
 					className: "mb-2 flex items-center justify-between",
@@ -73,8 +73,8 @@ function S({ value: S, defaultValue: C = null, onValueChange: w, locale: T, min:
 				}),
 				/* @__PURE__ */ b("div", {
 					className: "grid grid-cols-3 gap-1",
-					children: Y.map((t, n) => {
-						let r = `${G}-${String(n + 1).padStart(2, "0")}`, i = r === H;
+					children: Y.map((e, t) => {
+						let r = `${G}-${String(t + 1).padStart(2, "0")}`, i = r === H;
 						return /* @__PURE__ */ b("button", {
 							type: "button",
 							disabled: !X(r),
@@ -83,8 +83,8 @@ function S({ value: S, defaultValue: C = null, onValueChange: w, locale: T, min:
 							onClick: () => {
 								U(r), q.setOpen(!1);
 							},
-							className: e(s, i && "bg-primary text-primary-foreground hover:bg-primary"),
-							children: t
+							className: n(s, i && "bg-primary text-primary-foreground hover:bg-primary"),
+							children: e
 						}, r);
 					})
 				}),

package/dist/number-field/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 { useLocale as n, useMessages as r } 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 { useControllable as r } from "../utils/useControllable.js";
 import { FormValue as i } from "../utils/form-value.js";
 import a, { InputGroupAddon as o, InputGroupInput as s } from "../input-group/index.js";
 import c from "../icons/micro/minus.js";
@@ -11,7 +11,7 @@ import { useMemo as d, useRef as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region packages/number-field/index.tsx
 function g({ value: l, defaultValue: g = null, onValueChange: b, onValueCommit: x, min: S, max: C, step: w = 1, largeStep: T = w * 10, formatOptions: E, locale: D, name: O, size: k = "default", invalid: A, disabled: j, className: M, onFocus: N, onBlur: P, onKeyDown: F, ...I }) {
-	let L = r(), R = n(D), [z, B, V] = t(l, g, void 0), H = d(() => new y(R, E), [R, E]), [U, W] = p(null), G = f(!1), K = (e) => Math.min(C ?? Infinity, Math.max(S ?? -Infinity, e)), q = (e, t) => {
+	let L = t(), R = e(D), [z, B, V] = r(l, g, void 0), H = d(() => new y(R, E), [R, E]), [U, W] = p(null), G = f(!1), K = (e) => Math.min(C ?? Infinity, Math.max(S ?? -Infinity, e)), q = (e, t) => {
 		B(e), b?.(e, t);
 	}, J = (e, t) => {
 		q(e, t), x?.(e, t), G.current = !1, W(null);
@@ -29,7 +29,7 @@ function g({ value: l, defaultValue: g = null, onValueChange: b, onValueCommit:
 	return /* @__PURE__ */ h(a, {
 		size: k,
 		invalid: A,
-		className: e("zen__number-field px-1", M),
+		className: n("zen__number-field px-1", M),
 		children: [
 			/* @__PURE__ */ m(o, { children: /* @__PURE__ */ m(_, {
 				label: L.decrease,

package/dist/pagination/index.js

@@ -1,16 +1,16 @@
 "use client";
-import { cx as e } from "../utils/cx.js";
-import { useLocale as t, useMessages as n } 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 { buttonVariants as r } from "../button/index.js";
 import i from "../icons/chevron-left.js";
 import a from "../icons/chevron-right.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region packages/pagination/index.tsx
 function c({ page: c, count: u, onPageChange: d, href: f, renderLink: p = (e) => /* @__PURE__ */ o("a", { ...e }), siblings: m = 1, className: h, "aria-label": g }) {
-	let _ = n(), v = new Intl.NumberFormat(t()), y = g ?? _.pages;
+	let _ = t(), v = new Intl.NumberFormat(e()), y = g ?? _.pages;
 	if (u < 2) return null;
-	let b = (t, n, i) => {
-		let a = t < 1 || t > u, s = e(r({
+	let b = (e, t, i) => {
+		let a = e < 1 || e > u, s = n(r({
 			variant: "ghost",
 			size: "icon"
 		}), "min-w-9 w-auto px-2 tabular-nums", i.current && "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.3),0_0_18px_-6px_oklch(var(--glow)/calc(0.6*var(--glow-k)))] hover:bg-primary/20"), c = {
@@ -20,20 +20,20 @@ function c({ page: c, count: u, onPageChange: d, href: f, renderLink: p = (e) =>
 		};
 		return f && !a ? p({
 			...c,
-			href: f(t),
-			onClick: d && (() => d(t)),
-			children: n
-		}, t) : /* @__PURE__ */ o("button", {
+			href: f(e),
+			onClick: d && (() => d(e)),
+			children: t
+		}, e) : /* @__PURE__ */ o("button", {
 			type: "button",
 			...c,
 			disabled: a,
-			onClick: () => !i.current && d?.(t),
-			children: n
+			onClick: () => !i.current && d?.(e),
+			children: t
 		});
 	};
 	return /* @__PURE__ */ o("nav", {
 		"aria-label": y,
-		className: e("zen__pagination", h),
+		className: n("zen__pagination", h),
 		children: /* @__PURE__ */ s("ul", {
 			className: "flex items-center gap-1",
 			children: [

package/dist/range-slider/index.js

@@ -1,14 +1,14 @@
 "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 { useFormReset as r } from "../utils/form-value.js";
 import { THUMB as i } from "../slider/index.js";
 import { useRef as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region packages/range-slider/index.tsx
 function c({ value: c, defaultValue: l, min: u = 0, max: d = 100, step: f = 1, onValueChange: p, onValueCommit: m, label: h, thumbLabels: g, valueText: _, name: v, disabled: y, className: b, style: x, ...S }) {
-	let C = n(), w = g ?? [C.minimum, C.maximum], [[T, E], D, O] = t(c, l ?? [u, d], p), k = a(null);
+	let C = e(), w = g ?? [C.minimum, C.maximum], [[T, E], D, O] = n(c, l ?? [u, d], p), k = a(null);
 	r(k, O);
 	let A = (e) => d > u ? (e - u) / (d - u) * 100 : 0, j = [{
 		value: T,
@@ -21,7 +21,7 @@ function c({ value: c, defaultValue: l, min: u = 0, max: d = 100, step: f = 1, o
 		role: "group",
 		"aria-label": h,
 		...S,
-		className: e("zen__range-slider relative h-5 w-full", y && "opacity-50", b),
+		className: t("zen__range-slider relative h-5 w-full", y && "opacity-50", b),
 		style: {
 			"--zen-thumb": "oklch(var(--primary))",
 			...x
@@ -30,25 +30,25 @@ function c({ value: c, defaultValue: l, min: u = 0, max: d = 100, step: f = 1, o
 			"aria-hidden": !0,
 			className: "absolute inset-x-0 top-1/2 h-2.5 -translate-y-1/2 rounded-full [--zen-end:right] rtl:[--zen-end:left]",
 			style: { background: `linear-gradient(to var(--zen-end), oklch(var(--muted)) ${A(T)}%, oklch(var(--primary)) ${A(T)}% ${A(E)}%, oklch(var(--muted)) ${A(E)}%)` }
-		}), j.map((t, n) => /* @__PURE__ */ o("input", {
+		}), j.map((e, n) => /* @__PURE__ */ o("input", {
 			ref: n === 0 ? k : void 0,
 			type: "range",
 			name: v,
 			min: u,
 			max: d,
 			step: f,
-			value: t.value,
+			value: e.value,
 			disabled: y,
 			"aria-label": w[n],
-			"aria-valuetext": _?.(t.value),
-			onChange: (e) => {
-				let [n, r] = t.set(Number(e.target.value));
+			"aria-valuetext": _?.(e.value),
+			onChange: (t) => {
+				let [n, r] = e.set(Number(t.target.value));
 				D([n, r]);
 			},
 			onPointerUp: () => m?.([T, E]),
 			onKeyUp: () => m?.([T, E]),
 			style: { zIndex: n === 0 && T > (u + d) / 2 ? 2 : 1 },
-			className: e("pointer-events-none absolute inset-0 h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-moz-range-track]:h-2.5 [&::-moz-range-track]:bg-transparent", "[&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto", i)
+			className: t("pointer-events-none absolute inset-0 h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-moz-range-track]:h-2.5 [&::-moz-range-track]:bg-transparent", "[&::-webkit-slider-thumb]:pointer-events-auto [&::-moz-range-thumb]:pointer-events-auto", i)
 		}, n))]
 	});
 }

package/dist/repeat-picker/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 { useLocale as n, useMessages as r } 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 { useControllable as r } from "../utils/useControllable.js";
 import i from "../input/index.js";
 import { FormValue as a } from "../utils/form-value.js";
 import o from "../chip/index.js";
@@ -21,7 +21,7 @@ function b({ value: b, defaultValue: x = {
 	every: 1,
 	unit: "month"
 }, onValueChange: S, locale: C, start: w, weekStartsOn: T, label: E, name: D, className: O, ...k }) {
-	let A = r(), j = E ?? A.repeats, M = n(C), N = T ?? l(M), [P, F, I] = t(b, x, S), [L, R] = h(String(P.every));
+	let A = t(), j = E ?? A.repeats, M = e(C), N = T ?? l(M), [P, F, I] = r(b, x, S), [L, R] = h(String(P.every));
 	Number(L) !== P.every && L !== "" && R(String(P.every));
 	let z = u(M), B = Array.from({ length: 7 }, (e, t) => (N + t) % 7), V = P.weekdays ?? (w ? [s(w)] : []), H = P.every !== 1, U = (e) => {
 		let t = {
@@ -31,7 +31,7 @@ function b({ value: b, defaultValue: x = {
 		e === "week" && w && (t.weekdays = [s(w)]), e === "month" && (t.day = w ? Number(w.slice(8)) : 1), F(t);
 	};
 	return /* @__PURE__ */ v("fieldset", {
-		className: e("zen__repeat-picker flex flex-col gap-3", O),
+		className: n("zen__repeat-picker flex flex-col gap-3", O),
 		...k,
 		children: [
 			/* @__PURE__ */ _(a, {

package/dist/resizable/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 { useMergedRefs as n } from "../utils/refs.js";
-import { useMessages as r } from "../locale-provider/index.js";
+import { useMessages as e } from "../locale-provider/index.js";
+import { cx as t } from "../utils/cx.js";
+import { readingKey as n } from "../utils/direction.js";
+import { useMergedRefs as r } from "../utils/refs.js";
 import { createContext as i, useContext as a, useEffect as o, useId as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
 import { jsx as d } from "react/jsx-runtime";
 //#region packages/resizable/index.tsx
@@ -13,8 +13,8 @@ function m(e) {
 	return t;
 }
 var h = "[data-zen-panel]", g = (e, t, n) => Math.min(n, Math.max(t, e));
-function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, ...o }) {
-	let s = l(null), c = n(s, i), [m, _] = u({}), [v, y] = u({}), b = l(v), x = (e) => {
+function _({ orientation: e = "horizontal", onLayout: n, ref: i, className: a, ...o }) {
+	let s = l(null), c = r(s, i), [m, _] = u({}), [v, y] = u({}), b = l(v), x = (e) => {
 		b.current = e, y(e);
 	}, [S, C] = u(!1), w = () => Array.from(s.current?.querySelectorAll(`:scope > ${h}`) ?? [], (e) => e.dataset.zenPanel);
 	f(() => {
@@ -25,7 +25,7 @@ function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, .
 		x(a);
 	}, [m]);
 	let T = {
-		orientation: t,
+		orientation: e,
 		sizes: v,
 		specs: m,
 		register: (e, t) => (_((n) => ({
@@ -35,17 +35,17 @@ function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, .
 			let { [e]: n, ...r } = t;
 			return r;
 		})),
-		resize: (e, t, n) => {
+		resize: (e, t, r) => {
 			let i = m[e], a = m[t];
 			if (!i || !a) return;
-			let o = b.current, s = o[e] + o[t], c = g(n, Math.max(i.minSize, s - a.maxSize), Math.min(i.maxSize, s - a.minSize));
+			let o = b.current, s = o[e] + o[t], c = g(r, Math.max(i.minSize, s - a.maxSize), Math.min(i.maxSize, s - a.minSize));
 			if (c === o[e]) return;
 			let l = {
 				...o,
 				[e]: c,
 				[t]: s - c
 			};
-			x(l), r?.(w().map((e) => l[e]));
+			x(l), n?.(w().map((e) => l[e]));
 		},
 		setDragging: C
 	};
@@ -54,25 +54,25 @@ function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, .
 		children: /* @__PURE__ */ d("div", {
 			...o,
 			ref: c,
-			"data-orientation": t,
+			"data-orientation": e,
 			"data-dragging": S || void 0,
-			className: e("zen__resizable flex size-full", t === "vertical" && "flex-col", S && "select-none", a)
+			className: t("zen__resizable flex size-full", e === "vertical" && "flex-col", S && "select-none", a)
 		})
 	});
 }
-function v({ defaultSize: t, minSize: n = 0, maxSize: r = 100, id: i, className: a, style: o, ...c }) {
+function v({ defaultSize: e, minSize: n = 0, maxSize: r = 100, id: i, className: a, style: o, ...c }) {
 	let l = m("ResizablePanel"), u = s(), p = i ?? u, { register: h } = l;
 	f(() => h(p, {
-		defaultSize: t,
+		defaultSize: e,
 		minSize: n,
 		maxSize: r
 	}), [
 		p,
-		t,
+		e,
 		n,
 		r
 	]);
-	let g = l.sizes[p] ?? t ?? 1;
+	let g = l.sizes[p] ?? e ?? 1;
 	return /* @__PURE__ */ d("div", {
 		...c,
 		id: p,
@@ -81,12 +81,12 @@ function v({ defaultSize: t, minSize: n = 0, maxSize: r = 100, id: i, className:
 			flex: `${g} 1 0px`,
 			...o
 		},
-		className: e("min-h-0 min-w-0 overflow-hidden", a)
+		className: t("min-h-0 min-w-0 overflow-hidden", a)
 	});
 }
 var y = 5;
 function b({ ref: i, className: a, onPointerDown: o, onKeyDown: s, ...c }) {
-	let p = r(), g = m("ResizableHandle"), _ = l(null), v = n(_, i), [b, x] = u(null), [S, C] = u(!1), w = g.orientation === "horizontal";
+	let p = e(), g = m("ResizableHandle"), _ = l(null), v = r(_, i), [b, x] = u(null), [S, C] = u(!1), w = g.orientation === "horizontal";
 	f(() => {
 		let e = _.current, t = e?.previousElementSibling?.closest(h)?.dataset.zenPanel, n = e?.nextElementSibling?.closest(h)?.dataset.zenPanel;
 		x((e) => !t || !n ? null : e?.[0] === t && e[1] === n ? e : [t, n]);
@@ -102,12 +102,12 @@ function b({ ref: i, className: a, onPointerDown: o, onKeyDown: s, ...c }) {
 		t.addEventListener("pointermove", c), t.addEventListener("pointerup", l), t.addEventListener("pointercancel", l);
 	}, A = (e) => {
 		if (s?.(e), e.defaultPrevented || !T || !E || D === void 0 || !O) return;
-		let n = w ? t(e.key, e.currentTarget) : e.key, r = {
+		let t = w ? n(e.key, e.currentTarget) : e.key, r = {
 			[w ? "ArrowLeft" : "ArrowUp"]: D - y,
 			[w ? "ArrowRight" : "ArrowDown"]: D + y,
 			Home: O.minSize,
 			End: O.maxSize
-		}[n];
+		}[t];
 		r !== void 0 && (e.preventDefault(), g.resize(T, E, r));
 	};
 	return /* @__PURE__ */ d("div", {
@@ -124,10 +124,10 @@ function b({ ref: i, className: a, onPointerDown: o, onKeyDown: s, ...c }) {
 		"data-active": S || void 0,
 		onPointerDown: k,
 		onKeyDown: A,
-		className: e("group/handle relative z-10 flex shrink-0 touch-none items-center justify-center outline-hidden", w ? "w-px cursor-col-resize before:absolute before:inset-y-0 before:-inset-x-2" : "h-px cursor-row-resize before:absolute before:inset-x-0 before:-inset-y-2", a),
+		className: t("group/handle relative z-10 flex shrink-0 touch-none items-center justify-center outline-hidden", w ? "w-px cursor-col-resize before:absolute before:inset-y-0 before:-inset-x-2" : "h-px cursor-row-resize before:absolute before:inset-x-0 before:-inset-y-2", a),
 		children: /* @__PURE__ */ d("span", {
 			"aria-hidden": !0,
-			className: e("bg-tint/[0.09] pointer-events-none absolute transition-[background-color,box-shadow,width,height] duration-200", w ? "inset-y-0 w-px" : "inset-x-0 h-px", "group-hover/handle:bg-primary/60 group-focus-visible/handle:bg-primary group-data-active/handle:bg-primary", "group-focus-visible/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] group-data-active/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", w ? "group-focus-visible/handle:w-0.5 group-data-active/handle:w-0.5" : "group-focus-visible/handle:h-0.5 group-data-active/handle:h-0.5")
+			className: t("bg-tint/[0.09] pointer-events-none absolute transition-[background-color,box-shadow,width,height] duration-200", w ? "inset-y-0 w-px" : "inset-x-0 h-px", "group-hover/handle:bg-primary/60 group-focus-visible/handle:bg-primary group-data-active/handle:bg-primary", "group-focus-visible/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] group-data-active/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", w ? "group-focus-visible/handle:w-0.5 group-data-active/handle:w-0.5" : "group-focus-visible/handle:h-0.5 group-data-active/handle:h-0.5")
 		})
 	});
 }

package/dist/seek-bar/index.d.ts

@@ -6,7 +6,7 @@ import { SliderProps } from '../slider';
  * the player's time updates. While dragging, the time follows the thumb and
  * the track keeps playing; letting go seeks. The arrow keys seek 5 seconds.
  */
-export default function SeekBar({ currentTime, duration, buffered, playing, playbackRate, onSeek, onKeyDown, disabled, className, ...rest }: SeekBarProps): import('react').JSX.Element;
+export default function SeekBar({ currentTime, duration, buffered, playing, playbackRate, onSeek, times, onKeyDown, disabled, className, ...rest }: SeekBarProps): import('react').JSX.Element;
 export interface SeekBarProps extends Omit<SliderProps, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'onValueChange' | 'onValueCommit' | 'trackBackground'> {
     /** Seconds played. */
     currentTime: number;
@@ -20,5 +20,7 @@ export interface SeekBarProps extends Omit<SliderProps, 'value' | 'defaultValue'
     playbackRate?: number;
     /** When the user lets go, or steps with the keys: the time to play from. */
     onSeek: (time: number) => void;
+    /** Where the time played and the length go: either side of the bar (default), or under its ends, as on a phone's Now Playing screen. */
+    times?: 'beside' | 'below';
 }
 //# sourceMappingURL=index.d.ts.map