@rinzai/zen 0.10.3 → 0.13.0

package/dist/toast/index.js

@@ -1,98 +1,100 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
 import { useGraphicsMode as t } from "../utils/graphics.js";
-import { AlertIcon as n, CheckIcon as r, InfoIcon as i } from "../utils/status-icons.js";
-import a from "../icons/micro/x-mark.js";
-import { createContext as o, useCallback as s, useContext as c, useEffect as l, useRef as u, useState as d } from "react";
-import { createPortal as f } from "react-dom";
+import { useMessages as n } from "../locale-provider/index.js";
+import { AlertIcon as r, CheckIcon as i, InfoIcon as a } from "../utils/status-icons.js";
+import o from "../icons/micro/x-mark.js";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useRef as d, useState as f } from "react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { createPortal as g } from "react-dom";
 //#region packages/toast/index.tsx
-var g = 5e3, _ = 3, v = 300, y = 14, b = .05, x = 10, S = 60, C = .45, w = o(null), T = o(null);
-function E({ children: n, offset: r, viewportClassName: i }) {
+var _ = 5e3, v = 3, y = 300, b = 14, x = .05, S = 10, C = 60, w = .45, T = s(null), E = s(null);
+function D({ children: r, offset: i, viewportClassName: a }) {
+	let o = n();
 	t();
-	let [a, o] = d([]), c = u(0), p = u(/* @__PURE__ */ new Map()), S = u(/* @__PURE__ */ new Set()), [C, E] = d([]), [D, k] = d(!1);
-	l(() => k(!0), []);
-	let A = s((e) => (E((t) => [...t, e]), () => E((t) => t.filter((t) => t !== e))), []), M = C.at(-1) ?? (D ? document.body : null), [N, P] = d({}), F = s((e, t) => P((n) => n[e] === t ? n : {
+	let [s, l] = f([]), p = d(0), C = d(/* @__PURE__ */ new Map()), w = d(/* @__PURE__ */ new Set()), [D, O] = f([]), [A, j] = f(!1);
+	u(() => j(!0), []);
+	let N = c((e) => (O((t) => [...t, e]), () => O((t) => t.filter((t) => t !== e))), []), P = D.at(-1) ?? (A ? document.body : null), [F, I] = f({}), L = c((e, t) => I((n) => n[e] === t ? n : {
 		...n,
 		[e]: t
-	}), []), [I, L] = d(!1), [R, z] = d(!1), B = u(null), V = s((e) => {
-		B.current = e, O(e);
+	}), []), [R, z] = f(!1), [B, V] = f(!1), H = d(null), U = c((e) => {
+		H.current = e, k(e);
 	}, []);
-	l(() => {
+	u(() => {
 		let e = (e) => {
-			e.key === "F8" && B.current?.querySelector(".zen__toast:not([inert])") && (e.preventDefault(), B.current.focus());
+			e.key === "F8" && H.current?.querySelector(".zen__toast:not([inert])") && (e.preventDefault(), H.current.focus());
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, []);
-	let H = s((e, t = "fade") => {
-		o((n) => n.map((n) => n.id === e ? {
+	let W = c((e, t = "fade") => {
+		l((n) => n.map((n) => n.id === e ? {
 			...n,
 			leaving: t
 		} : n)), setTimeout(() => {
-			o((t) => {
+			l((t) => {
 				let n = t.filter((t) => t.id !== e);
-				return n.length || L(!1), n;
-			}), P(({ [e]: t, ...n }) => n), p.current.delete(e), S.current.delete(e);
-		}, v);
-	}, []), U = s((e, { description: t, tone: n = "info", action: r, timeout: i } = {}) => {
-		let a = c.current++, s = {
+				return n.length || z(!1), n;
+			}), I(({ [e]: t, ...n }) => n), C.current.delete(e), w.current.delete(e);
+		}, y);
+	}, []), G = c((e, { description: t, tone: n = "default", action: r, timeout: i } = {}) => {
+		let a = p.current++, o = {
 			id: a,
 			title: e,
 			description: t,
 			tone: n,
 			action: r,
-			timeout: i ?? (r ? 1e4 : g)
+			timeout: i ?? (r ? 1e4 : _)
 		};
-		return o((e) => [...e, s]), a;
-	}, []), W = a.filter((e) => !e.leaving), G = (I || R) && W.length > 0, K = W.at(-1), q = K ? N[K.id] : void 0, J = W.slice(-3), Y = G ? J.reduce((e, t) => e + (N[t.id] ?? 0), 0) + x * (J.length - 1) : (q ?? 0) + y * (J.length - 1), X = (e) => {
-		let t = W.filter((t) => t.id > e.id), n = t.length;
+		return l((e) => [...e, o]), a;
+	}, []), K = s.filter((e) => !e.leaving), q = (R || B) && K.length > 0, J = K.at(-1), Y = J ? F[J.id] : void 0, X = K.slice(-3), Z = q ? X.reduce((e, t) => e + (F[t.id] ?? 0), 0) + S * (X.length - 1) : (Y ?? 0) + b * (X.length - 1), Q = (e) => {
+		let t = K.filter((t) => t.id > e.id), n = t.length;
 		return {
 			index: n,
 			front: n === 0,
-			hidden: n >= _,
-			y: G ? -(t.reduce((e, t) => e + (N[t.id] ?? 0), 0) + x * n) : -14 * Math.min(n, 2),
-			scale: G ? 1 : 1 - b * Math.min(n, 2),
-			height: !G && n > 0 ? q : void 0
+			hidden: n >= v,
+			y: q ? -(t.reduce((e, t) => e + (F[t.id] ?? 0), 0) + S * n) : -14 * Math.min(n, 2),
+			scale: q ? 1 : 1 - x * Math.min(n, 2),
+			height: !q && n > 0 ? Y : void 0
 		};
 	};
-	return /* @__PURE__ */ h(w.Provider, {
-		value: U,
-		children: [/* @__PURE__ */ m(T.Provider, {
-			value: A,
-			children: n
-		}), M && f(/* @__PURE__ */ m("section", {
-			ref: V,
+	return /* @__PURE__ */ h(T.Provider, {
+		value: G,
+		children: [/* @__PURE__ */ m(E.Provider, {
+			value: N,
+			children: r
+		}), P && g(/* @__PURE__ */ m("section", {
+			ref: U,
 			popover: "manual",
 			tabIndex: -1,
-			"aria-label": "Notifications (F8)",
-			"data-expanded": G || void 0,
-			onMouseEnter: () => L(!0),
-			onMouseLeave: () => L(!1),
-			onFocus: () => z(!0),
+			"aria-label": o.notifications,
+			"data-expanded": q || void 0,
+			onMouseEnter: () => z(!0),
+			onMouseLeave: () => z(!1),
+			onFocus: () => V(!0),
 			onBlur: (e) => {
-				e.currentTarget.contains(e.relatedTarget) || z(!1);
+				e.currentTarget.contains(e.relatedTarget) || V(!1);
 			},
-			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "ease-out-soft transition-[height] duration-300", i),
+			className: e("zen__toast-viewport fixed top-auto end-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] start-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "ease-out-soft transition-[height] duration-300", a),
 			style: {
-				height: Y,
-				...r && { "--zen-toast-offset": r }
+				height: Z,
+				...i && { "--zen-toast-offset": i }
 			},
-			children: a.map((e, t) => /* @__PURE__ */ m(j, {
+			children: s.map((e, t) => /* @__PURE__ */ m(M, {
 				toast: e,
-				layout: X(e),
+				layout: Q(e),
 				z: t + 1,
-				paused: G,
-				onDismiss: H,
-				onHeight: F,
-				clocks: p.current,
-				entered: S.current
+				paused: q,
+				onDismiss: W,
+				onHeight: L,
+				clocks: C.current,
+				entered: w.current
 			}, e.id))
-		}), M)]
+		}), P)]
 	});
 }
-function D(e, t) {
-	let n = c(T);
-	l(() => {
+function O(e, t) {
+	let n = l(E);
+	u(() => {
 		let r = e.current;
 		if (n && t && r) return n(r);
 	}, [
@@ -101,116 +103,116 @@ function D(e, t) {
 		e
 	]);
 }
-function O(e) {
+function k(e) {
 	if (e?.showPopover) try {
 		e.showPopover();
 	} catch {}
 }
-function k() {
-	let e = c(w);
+function A() {
+	let e = l(T);
 	if (!e) throw Error("useToast() needs a <ToastProvider> above it");
 	return e;
 }
-var A = {
-	success: {
-		icon: r,
+var j = {
+	positive: {
+		icon: i,
 		ring: "border-primary/30",
 		badge: "bg-primary/15 text-primary",
 		bar: "bg-primary",
 		glow: "shadow-[0_18px_50px_-18px_oklch(var(--glow)/calc(0.55*var(--glow-k)))]"
 	},
-	error: {
-		icon: n,
+	negative: {
+		icon: r,
 		ring: "border-destructive/40",
 		badge: "bg-destructive/10 text-destructive",
 		bar: "bg-destructive",
 		glow: "shadow-[0_18px_50px_-18px_oklch(var(--destructive)/calc(0.55*var(--glow-k)))]"
 	},
-	info: {
-		icon: i,
+	default: {
+		icon: a,
 		ring: "border-tint/10",
 		badge: "bg-tint/[0.08] text-foreground",
 		bar: "bg-muted-foreground",
 		glow: "shadow-[var(--toast-shadow)]"
 	}
 };
-function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, clocks: c, entered: f }) {
-	let g = A[t.tone] ?? A.info, _ = g.icon, v = u(null), y = u(null), [b] = d(() => !f.has(t.id));
-	l(() => {
-		v.current?.isConnected && f.add(t.id);
-	}, [f, t.id]);
-	let [x, w] = d(!1);
-	l(() => {
-		if (!b) return;
-		let e = requestAnimationFrame(() => e = requestAnimationFrame(() => w(!0)));
+function M({ toast: t, layout: r, z: i, paused: a, onDismiss: s, onHeight: c, clocks: l, entered: g }) {
+	let _ = n(), v = j[t.tone] ?? j.default, y = v.icon, b = d(null), x = d(null), [S] = f(() => !g.has(t.id));
+	u(() => {
+		b.current?.isConnected && g.add(t.id);
+	}, [g, t.id]);
+	let [T, E] = f(!1);
+	u(() => {
+		if (!S) return;
+		let e = requestAnimationFrame(() => e = requestAnimationFrame(() => E(!0)));
 		return () => cancelAnimationFrame(e);
-	}, [b]), c.has(t.id) || c.set(t.id, {
+	}, [S]), l.has(t.id) || l.set(t.id, {
 		spent: 0,
 		since: null
 	});
-	let T = c.get(t.id), [E] = d(() => T.spent + (T.since === null ? 0 : Date.now() - T.since));
-	l(() => {
-		let e = y.current;
+	let D = l.get(t.id), [O] = f(() => D.spent + (D.since === null ? 0 : Date.now() - D.since));
+	u(() => {
+		let e = x.current;
 		if (!e) return;
-		let n = () => s(t.id, e.offsetHeight);
+		let n = () => c(t.id, e.offsetHeight);
 		n();
 		let r = new ResizeObserver(n);
 		return r.observe(e), () => r.disconnect();
-	}, [s, t.id]), l(() => {
-		if (!t.timeout || i || t.leaving) return;
-		T.since = Date.now();
-		let e = setTimeout(() => o(t.id), Math.max(0, t.timeout - T.spent));
+	}, [c, t.id]), u(() => {
+		if (!t.timeout || a || t.leaving) return;
+		D.since = Date.now();
+		let e = setTimeout(() => s(t.id), Math.max(0, t.timeout - D.spent));
 		return () => {
-			clearTimeout(e), T.since !== null && (T.spent += Date.now() - T.since), T.since = null;
+			clearTimeout(e), D.since !== null && (D.spent += Date.now() - D.since), D.since = null;
 		};
 	}, [
-		i,
+		a,
 		t.id,
 		t.timeout,
 		t.leaving,
-		o,
-		T
+		s,
+		D
 	]);
-	let D = u(null), O = (e) => {
-		t.leaving || e.button !== 0 || e.target.closest("button") || (D.current = {
+	let k = d(null), A = (e) => {
+		t.leaving || e.button !== 0 || e.target.closest("button") || (k.current = {
 			x: e.clientX,
 			dx: 0,
 			t: e.timeStamp,
 			speed: 0
 		}, e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.dataset.swiping = "");
-	}, k = (e) => {
-		if (!D.current) return;
-		let t = D.current, n = e.clientX - t.x;
+	}, M = (e) => {
+		if (!k.current) return;
+		let t = k.current, n = e.clientX - t.x;
 		t.speed = (n - t.dx) / Math.max(1, e.timeStamp - t.t), t.dx = n, t.t = e.timeStamp, e.currentTarget.style.setProperty("--zen-swipe", `${n > 0 ? n : n / 6}px`);
-	}, j = (e) => {
-		let n = D.current;
-		n && (D.current = null, delete e.currentTarget.dataset.swiping, n.dx > S || n.dx > 0 && n.speed > C ? o(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
+	}, N = (e) => {
+		let n = k.current;
+		n && (k.current = null, delete e.currentTarget.dataset.swiping, n.dx > C || n.dx > 0 && n.speed > w ? s(t.id, "swipe") : e.currentTarget.style.setProperty("--zen-swipe", "0px"));
 	};
 	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("div", {
-		ref: v,
-		role: t.tone === "error" ? "alert" : "status",
+		ref: b,
+		role: t.tone === "negative" ? "alert" : "status",
 		"aria-live": "off",
-		"data-front": n.front || void 0,
-		"data-behind": !n.front && n.height !== void 0 || void 0,
-		inert: n.hidden || !!t.leaving,
-		onPointerDown: O,
-		onPointerMove: k,
-		onPointerUp: j,
-		onPointerCancel: j,
-		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "ease-out-soft transition-[transform,translate,opacity,height] duration-400 data-swiping:transition-none", b && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", g.ring, g.glow),
+		"data-front": r.front || void 0,
+		"data-behind": !r.front && r.height !== void 0 || void 0,
+		inert: r.hidden || !!t.leaving,
+		onPointerDown: A,
+		onPointerMove: M,
+		onPointerUp: N,
+		onPointerCancel: N,
+		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "ease-out-soft transition-[transform,translate,opacity,height] duration-400 data-swiping:transition-none", S && "starting:translate-y-full starting:opacity-0", r.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", v.ring, v.glow),
 		style: {
-			zIndex: r,
-			height: n.height,
-			transform: `translateX(var(--zen-swipe, 0px)) translateY(${n.y}px) scale(${n.scale})`
+			zIndex: i,
+			height: r.height,
+			transform: `translateX(var(--zen-swipe, 0px)) translateY(${r.y}px) scale(${r.scale})`
 		},
 		children: [/* @__PURE__ */ h("div", {
-			ref: y,
-			className: "flex items-start gap-3 p-3.5 pr-10 transition-opacity duration-300 group-data-behind:opacity-0",
+			ref: x,
+			className: "flex items-start gap-3 p-3.5 pe-10 transition-opacity duration-300 group-data-behind:opacity-0",
 			children: [
 				/* @__PURE__ */ m("span", {
-					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", g.badge),
+					className: e("mt-0.5 grid size-8 shrink-0 place-items-center rounded-full", v.badge),
 					"aria-hidden": !0,
-					children: /* @__PURE__ */ m(_, { className: "size-4" })
+					children: /* @__PURE__ */ m(y, { className: "size-4" })
 				}),
 				/* @__PURE__ */ h("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5",
@@ -226,36 +228,36 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 						t.action && /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: () => {
-								t.action?.onClick(), o(t.id);
+								t.action?.onClick(), s(t.id);
 							},
-							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-visible:ring-ring/50 mt-2 cursor-pointer self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors focus-visible:ring-2",
+							className: "border-tint/10 bg-tint/[0.06] hover:bg-tint/[0.12] focus-ring mt-2 cursor-pointer self-start rounded-lg border px-3 py-1 text-xs font-medium outline-hidden transition-colors",
 							children: t.action.label
 						})
 					]
 				}),
 				/* @__PURE__ */ m("button", {
 					type: "button",
-					"aria-label": "Dismiss",
-					onClick: () => o(t.id),
-					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute top-2.5 right-2.5 grid size-7 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2",
-					children: /* @__PURE__ */ m(a, { className: "size-3.5" })
+					"aria-label": _.dismiss,
+					onClick: () => s(t.id),
+					className: "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-ring absolute end-2.5 top-2.5 grid size-7 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors",
+					children: /* @__PURE__ */ m(o, { className: "size-3.5" })
 				})
 			]
 		}), t.timeout > 0 && /* @__PURE__ */ m("span", {
 			"aria-hidden": !0,
-			className: e("zen__toast-timer absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-60 transition-opacity group-data-behind:opacity-0", g.bar),
+			className: e("zen__toast-timer absolute start-0 bottom-0 h-0.5 w-full origin-left opacity-60 rtl:origin-right transition-opacity group-data-behind:opacity-0", v.bar),
 			style: {
 				animationDuration: `${t.timeout}ms`,
-				animationDelay: `${-E}ms`,
-				animationPlayState: i ? "paused" : void 0
+				animationDelay: `${-O}ms`,
+				animationPlayState: a ? "paused" : void 0
 			}
 		})]
 	}), /* @__PURE__ */ m("span", {
 		className: "sr-only",
-		"aria-live": t.tone === "error" ? "assertive" : "polite",
+		"aria-live": t.tone === "negative" ? "assertive" : "polite",
 		"aria-atomic": "true",
-		children: x && [t.title, t.description].filter(Boolean).join(". ")
+		children: T && [t.title, t.description].filter(Boolean).join(". ")
 	})] });
 }
 //#endregion
-export { E as default, k as useToast, D as useToastHost };
+export { D as default, A as useToast, O as useToastHost };

package/dist/toggle/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-export interface ToggleProps extends Omit<ComponentProps<'input'>, 'onChange' | 'type'> {
-    onChange?: (checked: boolean) => void;
+export interface ToggleProps extends Omit<ComponentProps<'input'>, 'type'> {
+    onCheckedChange?: (checked: boolean) => void;
 }
 /**
  * On/off switch. A native checkbox with the switch role underneath, so forms

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACnF,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,+BAyChD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toggle/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IACtE,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,+BA4ChD"}

package/dist/toggle/index.js

@@ -3,19 +3,21 @@ import { cx as e } from "../utils/cx.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region packages/toggle/index.tsx
 function r(r) {
-	let { className: i, onChange: a, onKeyDown: o, disabled: s, ...c } = r;
+	let { className: i, onChange: a, onCheckedChange: o, onKeyDown: s, disabled: c, ...l } = r;
 	return /* @__PURE__ */ n("span", {
-		className: e("zen__toggle bg-tint/[0.06] relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-[color:oklch(var(--tint)/var(--zen-control-edge))] p-0.5", "has-focus-visible:ring-glow/50 transition-[background-color,box-shadow,border-color] duration-300 has-focus-visible:ring-2", "has-checked:border-glow/60 has-checked:bg-glow/40 has-checked:shadow-[0_0_18px_-2px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", "has-disabled:cursor-not-allowed has-disabled:opacity-50", i),
+		className: e("zen__toggle bg-tint/[0.06] relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-[color:oklch(var(--tint)/var(--zen-control-edge))] p-0.5", "has- transition-[background-color,box-shadow,border-color] duration-300 has-focus-ring", "has-checked:border-glow/60 has-checked:bg-glow/40 has-checked:shadow-[0_0_18px_-2px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", "has-disabled:cursor-not-allowed has-disabled:opacity-50", i),
 		children: [/* @__PURE__ */ t("input", {
 			type: "checkbox",
 			role: "switch",
 			className: "peer absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none rounded-full opacity-0 disabled:cursor-not-allowed",
-			disabled: s,
-			onChange: (e) => a?.(e.target.checked),
+			disabled: c,
+			onChange: (e) => {
+				a?.(e), o?.(e.target.checked);
+			},
 			onKeyDown: (e) => {
-				o?.(e), e.key === "Enter" && !e.defaultPrevented && (e.preventDefault(), e.currentTarget.click());
+				s?.(e), e.key === "Enter" && !e.defaultPrevented && (e.preventDefault(), e.currentTarget.click());
 			},
-			...c
+			...l
 		}), /* @__PURE__ */ t("span", {
 			"aria-hidden": !0,
 			className: e("size-[1.125rem] rounded-full bg-[var(--zen-thumb-off)] shadow-md", "zen__toggle-thumb ease-out-soft transition-[translate,background-color] duration-300", "peer-checked:translate-x-5 peer-checked:bg-white")

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

@@ -0,0 +1,35 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Buttons that stay pressed, in a row: any number of them (`multiple`, e.g.
+ * filters), or at most one, which can be released again. For exactly one
+ * always chosen, use Segmented. ←→ move between them, Home and End jump to
+ * the ends; Space or Enter presses.
+ */
+export default function ToggleGroup(props: ToggleGroupProps): import('react').JSX.Element;
+/** One button of a ToggleGroup: text, an icon (give it an aria-label), or both. */
+export declare function ToggleGroupItem({ value, className, onClick, ...rest }: ToggleGroupItemProps): import('react').JSX.Element;
+interface ToggleGroupBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue'> {
+    /** Form field name: each pressed item's value is submitted under it. */
+    name?: string;
+    /** The ToggleGroupItems. */
+    children?: ReactNode;
+}
+export type ToggleGroupProps = ToggleGroupBaseProps & ({
+    /** At most one pressed (the default); pressing another releases it. */
+    multiple?: false;
+    /** The pressed item's value, or null for none, when you keep it. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+} | {
+    /** Any number pressed. */
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: readonly string[]) => void;
+});
+export interface ToggleGroupItemProps extends ComponentProps<'button'> {
+    value: string;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toggle-group/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAWrF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAyD1D;AAED,mFAAmF;AACnF,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,+BAqB3F;AAED,UAAU,oBAAqB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;IAC9E,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAC/C,CACM;IACI,uEAAuE;IACvE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD,GACD;IACI,0BAA0B;IAC1B,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;CACtD,CACN,CAAC;AAEN,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAClE,KAAK,EAAE,MAAM,CAAC;CACjB"}

package/dist/toggle-group/index.js

@@ -0,0 +1,53 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { moveFocus as n, useRovingTabIndex as r } from "../utils/roving.js";
+import { useControllable as i } from "../utils/useControllable.js";
+import { FormValue as a } from "../utils/form-value.js";
+import { useToolbarOrientation as o } from "../toolbar/index.js";
+import { createContext as s, useContext as c, useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region packages/toggle-group/index.tsx
+var f = ".zen__toggle-group-item", p = s(null);
+function m(s) {
+	let { multiple: c, value: m, defaultValue: h, onValueChange: g, name: _, className: v, onKeyDown: y, children: b, ref: x, ...S } = s, [C, w, T] = i(m, h ?? (c ? [] : null), g), E = typeof C == "string" ? [C] : C ?? [], D = {
+		isPressed: (e) => E.includes(e),
+		setPressed: (e, t) => {
+			w(c ? t ? [...E, e] : E.filter((t) => t !== e) : t ? e : null);
+		}
+	}, O = l(null), k = t(O, x), A = o(), j = !A;
+	return r(O, f, "[aria-pressed=true]", j), /* @__PURE__ */ d(p.Provider, {
+		value: D,
+		children: [/* @__PURE__ */ u("div", {
+			role: "group",
+			"data-zen-roving": j ? "" : void 0,
+			...S,
+			ref: k,
+			onKeyDown: (e) => {
+				y?.(e), j && n(e, f);
+			},
+			className: e("zen__toggle-group relative inline-flex w-fit flex-wrap gap-1", j && "glow-edge border-tint/10 bg-tint/[0.03] rounded-xl border p-1", A === "vertical" && "flex-col", v),
+			children: b
+		}), /* @__PURE__ */ u(a, {
+			name: _,
+			value: E,
+			onReset: T
+		})]
+	});
+}
+function h({ value: t, className: n, onClick: r, ...i }) {
+	let a = c(p);
+	if (!a) throw Error("<ToggleGroupItem> must be inside <ToggleGroup>");
+	let o = a.isPressed(t);
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		"aria-pressed": o,
+		onClick: (e) => {
+			r?.(e), e.defaultPrevented || a.setPressed(t, !o);
+		},
+		className: e("zen__toggle-group-item text-muted-foreground hover:text-foreground focus-ring inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 text-sm whitespace-nowrap transition-[color,background-color,box-shadow] duration-300 select-none", "aria-pressed:bg-primary/15 aria-pressed:text-foreground aria-pressed:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)]", "disabled:hover:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", n),
+		...i
+	});
+}
+//#endregion
+export { h as ToggleGroupItem, m as default };

package/dist/toolbar/index.d.ts

@@ -0,0 +1,19 @@
+import { SeparatorProps } from '../separator';
+import { ComponentProps } from 'react';
+/** Whether this is inside a Toolbar, which then moves focus through its items (a ToggleGroup's too). */
+/** Which way the Toolbar this is in runs, or null outside one. */
+export declare const useToolbarOrientation: () => "horizontal" | "vertical" | null;
+export declare const useInToolbar: () => boolean;
+/**
+ * A row of controls for one thing, e.g. a table's or an editor's: buttons,
+ * ToggleGroups, Selects, a search field. Tab enters it once; ←→ (↑↓ when
+ * `orientation="vertical"`) move between its controls, Home and End jump to
+ * the ends. Divide it with ToolbarSeparator. Give it an aria-label.
+ */
+export default function Toolbar({ orientation, className, onKeyDown, ref: refProp, ...rest }: ToolbarProps): import('react').JSX.Element;
+/** A hairline between groups of a Toolbar's controls, across its direction. */
+export declare function ToolbarSeparator({ className, ...rest }: Omit<SeparatorProps, 'orientation'>): import('react').JSX.Element;
+export interface ToolbarProps extends ComponentProps<'div'> {
+    orientation?: 'horizontal' | 'vertical';
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIhE,OAAO,EAAE,cAAc,EAAqC,MAAM,OAAO,CAAC;AAI1E,wGAAwG;AACxG,kEAAkE;AAClE,eAAO,MAAM,qBAAqB,wCAAmC,CAAC;AACtE,eAAO,MAAM,YAAY,eAAyC,CAAC;AAMnE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC5B,WAA0B,EAC1B,SAAS,EACT,SAAS,EACT,GAAG,EAAE,OAAO,EACZ,GAAG,IAAI,EACV,EAAE,YAAY,+BA+Bd;AAED,+EAA+E;AAC/E,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,+BAS3F;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CAC3C"}

package/dist/toolbar/index.js

@@ -0,0 +1,36 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { moveFocus as n, useRovingTabIndex as r } from "../utils/roving.js";
+import i from "../separator/index.js";
+import { createContext as a, useContext as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region packages/toolbar/index.tsx
+var l = a(null), u = () => o(l), d = () => u() !== null, f = "button, a[href], input:not([type=hidden]), select, textarea, [role=button], [role=combobox]", p = "input:not([type=checkbox], [type=radio], [type=range], [type=button]), textarea, [contenteditable]";
+function m({ orientation: i = "horizontal", className: a, onKeyDown: o, ref: u, ...d }) {
+	let m = s(null), h = t(m, u);
+	return r(m, f), /* @__PURE__ */ c(l.Provider, {
+		value: i,
+		children: /* @__PURE__ */ c("div", {
+			role: "toolbar",
+			"aria-orientation": i === "vertical" ? "vertical" : void 0,
+			"data-zen-roving": "",
+			ref: h,
+			onKeyDown: (e) => {
+				o?.(e), !(i !== "vertical" && e.target.matches(p) && /^Arrow(Left|Right)$|^Home$|^End$/.test(e.key)) && n(e, f, i);
+			},
+			className: e("zen__toolbar glow-edge border-tint/10 bg-tint/[0.03] relative flex w-fit items-center gap-1 rounded-xl border p-1", i === "vertical" && "flex-col", a),
+			...d
+		})
+	});
+}
+function h({ className: t, ...n }) {
+	let r = o(l) === "vertical";
+	return /* @__PURE__ */ c(i, {
+		orientation: r ? "horizontal" : "vertical",
+		className: e(r ? "my-0.5 w-auto self-stretch mx-1.5" : "mx-0.5 my-1.5", t),
+		...n
+	});
+}
+//#endregion
+export { h as ToolbarSeparator, m as default, d as useInToolbar, u as useToolbarOrientation };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EACH,cAAc,EAEd,SAAS,EAQZ,MAAM,OAAO,CAAC;AAmBf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BA+BrE;AAED,2GAA2G;AAC3G,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAmCrB;AAED,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,EAC3B,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAwBrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tooltip/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAUrF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAIrE;AAED,2GAA2G;AAC3G,wBAAgB,cAAc,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAerB;AAED,kGAAkG;AAClG,wBAAgB,cAAc,CAAC,EAC3B,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,cAAc,EACd,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAmBrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}