@rinzai/zen 0.10.3 → 0.13.0

package/dist/tabs/index.js

@@ -1,143 +1,145 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { reducedMotion as t } from "../utils/motion.js";
-import { PILL as n } from "../utils/styles.js";
-import { useIndicator as r } from "../utils/indicator.js";
-import i, { PillIndicator as a } from "../pills/index.js";
-import { createContext as o, useContext as s, useEffect as c, useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { readingKey as t } from "../utils/direction.js";
+import { useControllable as n } from "../utils/useControllable.js";
+import { reducedMotion as r } from "../utils/motion.js";
+import { PILL as i } from "../utils/styles.js";
+import { useIndicator as a } from "../utils/indicator.js";
+import o, { PillIndicator as s } from "../pills/index.js";
+import { createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useLayoutEffect as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region packages/tabs/index.tsx
-var h = typeof window > "u" ? c : u, g = o(null);
-function _(e) {
-	let t = s(g);
+var v = typeof window > "u" ? d : p, y = c(null);
+function b(e) {
+	let t = u(y);
 	if (!t) throw Error(`<${e}> must be inside <Tabs>`);
 	return t;
 }
-function v({ value: t, defaultValue: n = "", onValueChange: r, className: i, ...a }) {
-	let [o, s] = f(n), c = t ?? o, [u, m] = f({ value: c });
-	u.value !== c && m({
-		value: c,
+function x({ value: t, defaultValue: r = "", onValueChange: i, className: a, ...o }) {
+	let [s, c] = n(t, r, i), [u, d] = h({ value: s });
+	u.value !== s && d({
+		value: s,
 		before: u.value
 	});
-	let h = d(null), _ = (e) => {
-		let t = h.current;
-		return h.current = e, t;
-	}, v = l();
-	return /* @__PURE__ */ p(g.Provider, {
+	let p = m(null), _ = (e) => {
+		let t = p.current;
+		return p.current = e, t;
+	}, [v, b] = h(0), x = l(() => (b((e) => e + 1), () => b((e) => e - 1)), []), S = f();
+	return /* @__PURE__ */ g(y.Provider, {
 		value: {
-			value: c,
+			value: s,
 			before: u.before,
 			show: _,
-			select: (e) => {
-				t === void 0 && s(e), r?.(e);
-			},
-			idFor: (e, t) => `${v}-${e}-${t.replace(/\s+/g, "-")}`
+			select: c,
+			idFor: (e, t) => `${S}-${e}-${t.replace(/\s+/g, "-")}`,
+			hasPanels: v > 0,
+			addPanel: x
 		},
-		children: /* @__PURE__ */ p("div", {
-			className: e("zen__tabs relative flex flex-col gap-4", i),
-			...a
+		children: /* @__PURE__ */ g("div", {
+			className: e("zen__tabs relative flex flex-col gap-4", a),
+			...o
 		})
 	});
 }
-var y = o("underline");
-function b({ variant: e = "underline", className: t, children: n, ...r }) {
-	_("TabList");
-	let o = d(null), s = (e) => {
-		let t = Array.from(o.current?.querySelectorAll("[role=\"tab\"]:not(:disabled)") ?? []), n = t.indexOf(document.activeElement);
-		if (n === -1) return;
-		let r = {
-			ArrowRight: n + 1,
-			ArrowLeft: n - 1,
+var S = c("underline");
+function C({ variant: e = "underline", className: n, children: r, ...i }) {
+	b("TabList");
+	let a = m(null), c = (e) => {
+		let n = Array.from(a.current?.querySelectorAll("[role=\"tab\"]:not(:disabled)") ?? []), r = n.indexOf(document.activeElement);
+		if (r === -1) return;
+		let i = {
+			ArrowRight: r + 1,
+			ArrowLeft: r - 1,
 			Home: 0,
-			End: t.length - 1
-		}[e.key];
-		if (r === void 0) return;
+			End: n.length - 1
+		}[t(e.key, e.currentTarget)];
+		if (i === void 0) return;
 		e.preventDefault();
-		let i = t[(r + t.length) % t.length];
-		i.focus(), i.click();
-	}, c = /* @__PURE__ */ p(y.Provider, {
+		let o = n[(i + n.length) % n.length];
+		o.focus(), o.click();
+	}, l = /* @__PURE__ */ g(S.Provider, {
 		value: e,
-		children: n
+		children: r
 	});
-	return e === "pills" ? /* @__PURE__ */ m(i, {
-		ref: o,
+	return e === "pills" ? /* @__PURE__ */ _(o, {
+		ref: a,
 		role: "tablist",
-		onKeyDown: s,
-		className: t,
-		...r,
-		children: [c, /* @__PURE__ */ p(a, {})]
-	}) : /* @__PURE__ */ p(x, {
-		ref: o,
+		onKeyDown: c,
+		className: n,
+		...i,
+		children: [l, /* @__PURE__ */ g(s, {})]
+	}) : /* @__PURE__ */ g(w, {
+		ref: a,
 		role: "tablist",
-		onKeyDown: s,
-		className: t,
-		...r,
-		children: c
+		onKeyDown: c,
+		className: n,
+		...i,
+		children: l
 	});
 }
-function x({ ref: t, className: n, children: i, ...a }) {
-	let o = d(null), s = r(o, "[role=\"tab\"][aria-selected=\"true\"]");
-	return /* @__PURE__ */ m("div", {
+function w({ ref: t, className: n, children: r, ...i }) {
+	let o = m(null), s = a(o, "[role=\"tab\"][aria-selected=\"true\"]");
+	return /* @__PURE__ */ _("div", {
 		ref: (e) => {
 			o.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
 		},
 		className: e("border-border relative flex gap-1 border-b", n),
-		...a,
-		children: [i, s ? /* @__PURE__ */ p("span", {
+		...i,
+		children: [r, s ? /* @__PURE__ */ g("span", {
 			"aria-hidden": !0,
 			className: "zen__tab-bar bg-primary absolute bottom-[-1px] left-0 h-0.5 transition-[translate,width] duration-150 ease-in-out",
 			style: {
 				width: s.w,
 				translate: `${s.x}px 0`
 			}
-		}, "measured") : /* @__PURE__ */ p("span", {
+		}, "measured") : /* @__PURE__ */ g("span", {
 			"aria-hidden": !0,
 			"data-pending": !0,
 			className: "zen__tab-bar hidden"
 		}, "pending")]
 	});
 }
-function S({ value: t, className: r, onClick: i, ...a }) {
-	let { value: o, select: c, idFor: l } = _("Tab"), u = s(y), d = o === t;
-	return /* @__PURE__ */ p("button", {
+function T({ value: t, className: n, onClick: r, ...a }) {
+	let { value: o, select: s, idFor: c, hasPanels: l } = b("Tab"), d = u(S), f = o === t;
+	return /* @__PURE__ */ g("button", {
 		type: "button",
 		role: "tab",
-		id: l("tab", t),
-		"aria-selected": d,
-		"aria-controls": l("panel", t),
-		tabIndex: d ? 0 : -1,
-		"data-active": d || void 0,
+		id: c("tab", t),
+		"aria-selected": f,
+		"aria-controls": l ? c("panel", t) : void 0,
+		tabIndex: f ? 0 : -1,
+		"data-active": f || void 0,
 		onClick: (e) => {
-			c(t), i?.(e);
+			s(t), r?.(e);
 		},
-		className: e(u === "pills" ? n : "focus-visible:ring-ring text-muted-foreground hover:text-foreground data-active:text-foreground cursor-pointer px-3 py-2 text-sm whitespace-nowrap outline-hidden select-none focus-visible:ring-1 disabled:cursor-not-allowed", r),
+		className: e(d === "pills" ? i : "focus-ring text-muted-foreground hover:text-foreground data-active:text-foreground cursor-pointer px-3 py-2 text-sm whitespace-nowrap select-none disabled:cursor-not-allowed", n),
 		...a
 	});
 }
-function C({ value: n, className: r, ...i }) {
-	let { value: a, before: o, show: s, idFor: c } = _("TabPanel"), l = a === n;
-	return h(() => {
-		if (!l) return;
-		let e = document.getElementById(c("panel", n)), r = s(e);
-		if (!e || o === void 0 || o === n) return;
-		let i = document.getElementById(c("tab", n)), a = document.getElementById(c("tab", o));
+function E({ value: t, className: n, ...i }) {
+	let { value: a, before: o, show: s, idFor: c, addPanel: l } = b("TabPanel"), u = a === t;
+	return d(l, [l]), v(() => {
+		if (!u) return;
+		let e = document.getElementById(c("panel", t)), n = s(e);
+		if (!e || o === void 0 || o === t) return;
+		let i = document.getElementById(c("tab", t)), a = document.getElementById(c("tab", o));
 		if (!i || !a) return;
-		let u = !!(i.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING);
-		e.dataset.enter = u ? "end" : "start", t() || T(e, r, u);
-	}, [l, o]), l ? /* @__PURE__ */ p("div", {
+		let l = !!(i.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING);
+		e.dataset.enter = l ? "end" : "start", r() || O(e, n, l);
+	}, [u, o]), u ? /* @__PURE__ */ g("div", {
 		role: "tabpanel",
-		id: c("panel", n),
-		"aria-labelledby": c("tab", n),
+		id: c("panel", t),
+		"aria-labelledby": c("tab", t),
 		tabIndex: 0,
-		className: e("zen__tab-panel focus-visible:outline-ring/50 outline-hidden focus-visible:outline-2 focus-visible:outline-offset-4", r),
+		className: e("zen__tab-panel focus-visible:outline-ring/50 outline-hidden focus-visible:outline-2 focus-visible:outline-offset-4", n),
 		...i
 	}) : null;
 }
-var w = {
+var D = {
 	duration: 300,
 	easing: "cubic-bezier(0.33, 1, 0.68, 1)"
 };
-function T(e, t, n) {
+function O(e, t, n) {
 	let r = e.closest(".zen__tabs");
 	if (!e.animate) return;
 	let i = n === (getComputedStyle(e).direction !== "rtl") ? 1 : -1, a = e.offsetWidth, o = Math.min(a * .25, 208), s = e.offsetHeight, c = s;
@@ -154,7 +156,7 @@ function T(e, t, n) {
 			translate: ["0 0", `${-i * o}px 0`],
 			opacity: [1, 0],
 			clipPath: ["inset(0 0 0 0)", i > 0 ? `inset(0 0 ${u}px ${o}px)` : `inset(0 ${o}px ${u}px 0)`]
-		}, w);
+		}, D);
 		d.onfinish = d.oncancel = () => t.remove();
 	}
 	let l = Math.max(0, s - c);
@@ -162,7 +164,7 @@ function T(e, t, n) {
 		translate: [`${i * o}px 0`, "0 0"],
 		opacity: [0, 1],
 		clipPath: [i > 0 ? `inset(0 ${o}px ${l}px 0)` : `inset(0 0 ${l}px ${o}px)`, "inset(0 0 0 0)"]
-	}, w);
+	}, D);
 }
 //#endregion
-export { S as Tab, b as TabList, C as TabPanel, v as default };
+export { T as Tab, C as TabList, E as TabPanel, x as default };

package/dist/tag-input/index.d.ts

@@ -6,7 +6,7 @@ import { ComponentProps } from 'react';
  * trimmed and kept once. Past about three rows the tags scroll, under a
  * typing line that stays in view (a max-h-* class sets the field's height).
  */
-export default function TagInput({ value: controlled, defaultValue, onValueChange, validate, removeLabel, className, disabled, ...rest }: TagInputProps): import('react').JSX.Element;
+export default function TagInput({ value: controlled, defaultValue, onValueChange, validate, removeLabel: removeLabelProp, className, disabled, name, ...rest }: TagInputProps): import('react').JSX.Element;
 export interface TagInputProps extends Omit<ComponentProps<'input'>, 'value' | 'defaultValue'> {
     value?: string[];
     defaultValue?: string[];
@@ -15,5 +15,7 @@ export interface TagInputProps extends Omit<ComponentProps<'input'>, 'value' | '
     validate?: (entry: string) => boolean;
     /** The × button's label, for screen readers. */
     removeLabel?: (tag: string) => string;
+    /** Form field name: each tag is submitted under it. */
+    name?: string;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/tag-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tag-input/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,cAAc,EAAoD,MAAM,OAAO,CAAC;AAEzG;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,KAAK,EAAE,UAAU,EACjB,YAAiB,EACjB,aAAa,EACb,QAAQ,EACR,WAAsC,EACtC,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,aAAa,+BAgGf;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAC1F,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tag-input/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAkB,cAAc,EAAoD,MAAM,OAAO,CAAC;AAEzG;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,KAAK,EAAE,UAAU,EACjB,YAAiB,EACjB,aAAa,EACb,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,GAAG,IAAI,EACV,EAAE,aAAa,+BA8Ff;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAC1F,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/tag-input/index.js

@@ -1,61 +1,70 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { FIELD as t } from "../utils/styles.js";
-import { useFieldProps as n } from "../field/index.js";
-import r from "../icons/micro/x-mark.js";
-import { useLayoutEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useControllable as t } from "../utils/useControllable.js";
+import { useMessages as n } from "../locale-provider/index.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";
+import o from "../icons/micro/x-mark.js";
+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 l({ value: l, defaultValue: u = [], onValueChange: d, validate: f, removeLabel: p = (e) => `Remove ${e}`, className: m, disabled: h, ...g }) {
-	let [_, v] = o(u), y = l ?? _, [b, x] = o(""), S = n(g), C = a(null), w = y.length;
-	i(() => {
-		let e = C.current;
+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;
+	s(() => {
+		let e = k.current;
 		e?.parentElement?.contains(document.activeElement) && (e.scrollTop = e.scrollHeight);
-	}, [w]);
-	let T = (e) => {
-		l === void 0 && v(e), d?.(e);
-	}, E = (e) => {
-		let t = [...y];
-		for (let n of e.map((e) => e.trim())) n && !t.includes(n) && (f?.(n) ?? !0) && t.push(n);
-		t.length !== y.length && T(t);
+	}, [A]);
+	let j = (e) => {
+		let t = [...C];
+		for (let n of e.map((e) => e.trim())) n && !t.includes(n) && (h?.(n) ?? !0) && t.push(n);
+		t.length !== C.length && w(t);
 	};
-	return /* @__PURE__ */ c("div", {
-		className: e("zen__tag-input", t, "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]", h && "cursor-not-allowed opacity-50", m),
+	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", _),
 		onClick: (e) => e.currentTarget.querySelector("input")?.focus(),
-		children: [w > 0 && /* @__PURE__ */ s("div", {
-			ref: C,
-			className: "flex min-h-0 flex-wrap gap-1.5 overflow-y-auto",
-			children: y.map((e) => /* @__PURE__ */ c("span", {
-				className: "zen__tag bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]",
-				children: [e, /* @__PURE__ */ s("button", {
-					type: "button",
-					disabled: h,
-					"aria-label": p(e),
-					onClick: () => T(y.filter((t) => t !== e)),
-					className: "text-muted-foreground hover:text-foreground hover:bg-tint/10 focus-visible:ring-ring/50 touch-target grid size-4 cursor-pointer place-items-center rounded-sm outline-hidden focus-visible:ring-2",
-					children: /* @__PURE__ */ s(r, { className: "size-3" })
-				})]
-			}, e))
-		}), /* @__PURE__ */ s("input", {
-			...g,
-			...S,
-			disabled: h,
-			value: b,
-			onChange: (e) => x(e.target.value),
-			onKeyDown: (e) => {
-				g.onKeyDown?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && ((e.key === "Enter" || e.key === ",") && b.trim() ? (e.preventDefault(), E([b]), x("")) : e.key === "Backspace" && !b && y.length && (e.preventDefault(), x(y[y.length - 1]), T(y.slice(0, -1))));
-			},
-			onBlur: (e) => {
-				g.onBlur?.(e), b.trim() && (E([b]), x(""));
-			},
-			onPaste: (e) => {
-				g.onPaste?.(e);
-				let t = e.clipboardData.getData("text");
-				!e.defaultPrevented && /[,\n]/.test(t) && (e.preventDefault(), E(t.split(/[,\n]/)));
-			},
-			className: "h-7 w-full shrink-0 bg-transparent outline-hidden placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"
-		})]
+		children: [
+			A > 0 && /* @__PURE__ */ u("div", {
+				ref: k,
+				className: "flex min-h-0 flex-wrap gap-1.5 overflow-y-auto",
+				children: C.map((e) => /* @__PURE__ */ d("span", {
+					className: "zen__tag bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-md py-0.5 ps-2 pe-1 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]",
+					children: [e, /* @__PURE__ */ u("button", {
+						type: "button",
+						disabled: v,
+						"aria-label": S(e),
+						onClick: () => w(C.filter((t) => t !== e)),
+						className: "text-muted-foreground hover:text-foreground hover:bg-tint/10 touch-target focus-ring grid size-4 cursor-pointer place-items-center rounded-sm outline-hidden",
+						children: /* @__PURE__ */ u(o, { className: "size-3" })
+					})]
+				}, e))
+			}),
+			/* @__PURE__ */ u("input", {
+				...b,
+				...O,
+				disabled: v,
+				value: E,
+				onChange: (e) => D(e.target.value),
+				onKeyDown: (e) => {
+					b.onKeyDown?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && ((e.key === "Enter" || e.key === ",") && E.trim() ? (e.preventDefault(), j([E]), D("")) : e.key === "Backspace" && !E && C.length && (e.preventDefault(), D(C[C.length - 1]), w(C.slice(0, -1))));
+				},
+				onBlur: (e) => {
+					b.onBlur?.(e), E.trim() && (j([E]), D(""));
+				},
+				onPaste: (e) => {
+					b.onPaste?.(e);
+					let t = e.clipboardData.getData("text");
+					!e.defaultPrevented && /[,\n]/.test(t) && (e.preventDefault(), j(t.split(/[,\n]/)));
+				},
+				className: "h-7 w-full shrink-0 bg-transparent outline-hidden placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"
+			}),
+			/* @__PURE__ */ u(a, {
+				name: y,
+				value: C,
+				onReset: T
+			})
+		]
 	});
 }
 //#endregion
-export { l as default };
+export { f as default };

package/dist/textarea/index.js

@@ -1,13 +1,13 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { FIELD as t } from "../utils/styles.js";
-import { useFieldProps as n } from "../field/index.js";
+import { useFieldProps as t } from "../field/index.js";
+import { FIELD as n } from "../utils/styles.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region packages/textarea/index.tsx
 function i(i) {
-	let { className: a, ...o } = i, s = n(o);
+	let { className: a, ...o } = i, s = t(o);
 	return /* @__PURE__ */ r("textarea", {
-		className: e("zen__textarea", t.replace("h-10", ""), "h-32 w-full resize-y py-2", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", a),
+		className: e("zen__textarea", n.replace("h-10", ""), "h-32 w-full resize-y py-2", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", a),
 		...o,
 		...s
 	});

package/dist/theme-toggle/index.d.ts

@@ -1,5 +1,5 @@
 import { Appearance } from '../utils/theme';
-import { RefObject } from 'react';
+import { ComponentProps, RefObject } from 'react';
 /** The inline script ThemeScript renders (for frameworks that take a raw string). */
 export declare const themeScript: (storageKey?: string) => string;
 /**
@@ -15,23 +15,24 @@ export declare function ThemeScript({ storageKey }: {
  *
  * On its own, it switches <html>'s class and remembers the choice (localStorage):
  * add ThemeScript to <head> to apply it on the next visit. Give it `value` and
- * `onChange` and the theme is yours: it shows `value` and leaves applying and
- * storing the choice to `onChange` (in your state, a database, a cookie…).
+ * `onValueChange` and the theme is yours: it shows `value` and leaves applying and
+ * storing the choice to `onValueChange` (in your state, a database, a cookie…).
  * With `target` too, it switches the theme of one element (a panel, a preview),
  * and the water stays inside it.
  */
-export default function ThemeToggle({ value, onChange, target, storageKey, className }: ThemeToggleProps): import('react').JSX.Element;
-export interface ThemeToggleProps {
+export default function ThemeToggle({ value, onValueChange, target, storageKey, className, ...rest }: ThemeToggleProps): import('react').JSX.Element;
+/** Other props (aria-*, data-*, an id) go on the button. */
+export interface ThemeToggleProps extends Omit<ComponentProps<'button'>, 'value' | 'onClick'> {
     /**
-     * The theme, when you keep it: the toggle shows it, and `onChange` must apply
+     * The theme, when you keep it: the toggle shows it, and `onValueChange` must apply
      * the new one (by the end of a synchronous render and its effects). Without it,
      * the toggle switches <html>'s class itself.
      */
     value?: Appearance;
     /** Called with the theme switched to. */
-    onChange?: (theme: Appearance) => void;
+    onValueChange?: (theme: Appearance) => void;
     /**
-     * The element whose theme `onChange` switches, when it's not the page (a panel
+     * The element whose theme `onValueChange` switches, when it's not the page (a panel
      * with its own .dark or .light): the wave plays inside it. Needs `value`.
      */
     target?: RefObject<HTMLElement | null>;

package/dist/theme-toggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/theme-toggle/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAG7D,qFAAqF;AACrF,eAAO,MAAM,WAAW,GAAI,mBAAoB,WAC4I,CAAC;AAE7L;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,UAAoB,EAAE,EAAE;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE5E;AAiBD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAoB,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA4CjH;AAED,MAAM,WAAW,gBAAgB;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACvC,kGAAkG;IAClG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/theme-toggle/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAGlF,qFAAqF;AACrF,eAAO,MAAM,WAAW,GAAI,mBAAoB,WAC4I,CAAC;AAE7L;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,UAAoB,EAAE,EAAE;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE5E;AAiBD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EACL,aAAa,EACb,MAAM,EACN,UAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACV,EAAE,gBAAgB,+BA8ClB;AAED,4DAA4D;AAC5D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACzF;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACvC,kGAAkG;IAClG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/theme-toggle/index.js

@@ -1,50 +1,52 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import t from "../icons/micro/moon.js";
-import n from "../icons/micro/sun.js";
-import { prepareThemeWave as r, themeWave as i } from "../utils/theme-wave.js";
-import { useSyncExternalStore as a } from "react";
-import { flushSync as o } from "react-dom";
+import { useMessages as t } from "../locale-provider/index.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";
+import { useSyncExternalStore as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
+import { flushSync as c } from "react-dom";
 //#region packages/theme-toggle/index.tsx
-var c = (e = "theme") => `try{var t=localStorage.getItem(${JSON.stringify(e)}),r=document.documentElement;if(t==='light'||t==='dark'){r.classList.remove('light','dark');r.classList.add(t)}}catch(e){}`;
-function l({ storageKey: e = "theme" }) {
-	return /* @__PURE__ */ s("script", { dangerouslySetInnerHTML: { __html: c(e) } });
+var l = (e = "theme") => `try{var t=localStorage.getItem(${JSON.stringify(e)}),r=document.documentElement;if(t==='light'||t==='dark'){r.classList.remove('light','dark');r.classList.add(t)}}catch(e){}`;
+function u({ storageKey: e = "theme" }) {
+	return /* @__PURE__ */ s("script", { dangerouslySetInnerHTML: { __html: l(e) } });
 }
-var u = /* @__PURE__ */ new Set();
-function d(e) {
-	u.add(e);
+var d = /* @__PURE__ */ new Set();
+function f(e) {
+	d.add(e);
 	let t = new MutationObserver(e);
 	return t.observe(document.documentElement, {
 		attributes: !0,
 		attributeFilter: ["class"]
 	}), () => {
-		u.delete(e), t.disconnect();
+		d.delete(e), t.disconnect();
 	};
 }
-var f = () => document.documentElement.classList.contains("light") ? "light" : "dark";
-function p({ value: c, onChange: l, target: p, storageKey: m = "theme", className: h }) {
-	let g = a(d, f, () => "dark"), _ = c ?? g, v = _ === "dark" ? "light" : "dark";
+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();
 	return /* @__PURE__ */ s("button", {
 		type: "button",
-		"aria-label": `Switch to ${v} theme`,
-		onPointerEnter: r,
-		onFocus: r,
-		onClick: (e) => i(() => {
-			if (c === void 0) {
+		"aria-label": b === "dark" ? x.switchToDark : x.switchToLight,
+		..._,
+		onPointerEnter: i,
+		onFocus: i,
+		onClick: (e) => a(() => {
+			if (l === void 0) {
 				let e = document.documentElement;
-				e.classList.remove("dark", "light"), e.classList.add(v);
+				e.classList.remove("dark", "light"), e.classList.add(b);
 				try {
-					localStorage.setItem(m, v);
+					localStorage.setItem(h, b);
 				} catch {}
 			}
-			o(() => {
-				l?.(v), u.forEach((e) => e());
+			c(() => {
+				u?.(b), d.forEach((e) => e());
 			});
-		}, e.currentTarget, p?.current),
-		className: e("zen__theme-toggle text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground focus-visible:ring-ring/50 grid size-9 cursor-pointer place-items-center rounded-lg outline-hidden focus-visible:ring-2", h),
-		children: s(_ === "dark" ? t : n, { className: "size-4" })
+		}, 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),
+		children: s(y === "dark" ? n : r, { className: "size-4" })
 	});
 }
 //#endregion
-export { l as ThemeScript, p as default, c as themeScript };
+export { u as ThemeScript, m as default, l as themeScript };