@rinzai/zen 0.6.1 → 0.7.1

package/dist/select/index.js

@@ -1,150 +1,144 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useAnchoredPopup as t } from "../utils/useAnchoredPopup.js";
-import { POPUP as n, TRIGGER as r } from "../utils/styles.js";
-import { CheckIcon as i } from "../utils/status-icons.js";
-import { useFieldProps as a } from "../field/index.js";
-import { FieldChevron as o } from "../utils/field-chevron.js";
-import { Children as s, Fragment as c, createContext as l, isValidElement as u, useCallback as d, useContext as f, useEffect as p, useId as m, useLayoutEffect as h, useRef as g, useState as _ } from "react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useTypeahead as t } from "../utils/typeahead.js";
+import { useAnchoredPopup as n } from "../utils/useAnchoredPopup.js";
+import { POPUP as r, TRIGGER as i } from "../utils/styles.js";
+import { CheckIcon as a } from "../utils/status-icons.js";
+import { useFieldProps as o } from "../field/index.js";
+import { FieldChevron as s } from "../utils/field-chevron.js";
+import { Children as c, Fragment as l, createContext as u, isValidElement as d, useCallback as f, useContext as p, useEffect as m, useId as h, useLayoutEffect as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region packages/select/index.tsx
-var x = l(null);
-function S({ value: i, onChange: s, placeholder: c = "Select…", disabled: l = !1, name: u, id: f, className: h, listClassName: S, children: w, style: T, onKeyDown: E, ...D }) {
-	let O = g(null), k = m(), A = f ?? k, j = a({
-		...D,
-		id: f
-	}), [M, N] = _(null), P = g({
-		text: "",
-		at: 0
-	}), [F, I] = _(/* @__PURE__ */ new Map()), L = () => Array.from(O.current?.querySelectorAll("[role=\"option\"]") ?? []).map((e) => ({
+var S = u(null);
+function C({ value: a, onChange: c, placeholder: l = "Select…", disabled: u = !1, name: d, id: p, className: g, listClassName: C, children: T, style: E, onKeyDown: D, ...O }) {
+	let k = _(null), A = h(), j = p ?? A, M = o({
+		...O,
+		id: p
+	}), [N, P] = v(null), F = t(), [I, L] = v(/* @__PURE__ */ new Map()), R = () => Array.from(k.current?.querySelectorAll("[role=\"option\"]") ?? []).map((e) => ({
 		value: e.dataset.value,
 		label: e.dataset.label ?? "",
 		disabled: e.getAttribute("aria-disabled") === "true"
-	})), R = t({
+	})), z = n({
 		matchWidth: !0,
 		onOpenChange: (e) => {
 			if (!e) return;
-			let t = L();
-			N(t.find((e) => e.value === i)?.value ?? t.find((e) => !e.disabled)?.value ?? null);
+			let t = R();
+			P(t.find((e) => e.value === a)?.value ?? t.find((e) => !e.disabled)?.value ?? null);
 		}
 	});
-	p(() => {
-		R.open && O.current?.focus();
-	}, [R.open]);
-	let z = (e) => {
-		L().find((t) => t.value === e)?.disabled || (s(e), R.setOpen(!1));
-	}, B = d((e, t) => (I((n) => n.get(e) === t ? n : new Map(n).set(e, t)), () => I((t) => {
+	m(() => {
+		z.open && k.current?.focus();
+	}, [z.open]);
+	let B = (e) => {
+		R().find((t) => t.value === e)?.disabled || (c(e), z.setOpen(!1));
+	}, V = f((e, t) => (L((n) => n.get(e) === t ? n : new Map(n).set(e, t)), () => L((t) => {
 		let n = new Map(t);
 		return n.delete(e), n;
-	})), []), V = new Map(F);
-	C(w, V);
-	let H = i === null ? void 0 : V.get(i), U = (e, t, n = L()) => {
+	})), []), H = new Map(I);
+	w(T, H);
+	let U = a === null ? void 0 : H.get(a), W = (e, t, n = R()) => {
 		let r = e === null ? t === 1 ? -1 : n.length : n.findIndex((t) => t.value === e);
 		for (let e = 1; e <= n.length; e++) {
 			let i = (r + t * e + n.length * 2) % n.length;
 			if (!n[i].disabled) return n[i].value;
 		}
 		return e;
-	}, W = (e) => {
+	}, G = (e) => {
 		let t = {
-			ArrowDown: () => N((e) => U(e, 1)),
-			ArrowUp: () => N((e) => U(e, -1)),
-			Home: () => N(U(null, 1)),
-			End: () => N(U(null, -1)),
-			Enter: () => M !== null && z(M),
-			" ": () => M !== null && z(M),
-			Tab: () => R.setOpen(!1)
+			ArrowDown: () => P((e) => W(e, 1)),
+			ArrowUp: () => P((e) => W(e, -1)),
+			Home: () => P(W(null, 1)),
+			End: () => P(W(null, -1)),
+			Enter: () => N !== null && B(N),
+			" ": () => N !== null && B(N),
+			Tab: () => z.setOpen(!1)
 		};
 		if (t[e.key]) {
 			e.key !== "Tab" && e.preventDefault(), t[e.key]();
 			return;
 		}
-		if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-			let t = Date.now(), n = (t - P.current.at < 700 ? P.current.text : "") + e.key.toLowerCase();
-			P.current = {
-				text: n,
-				at: t
-			};
-			let r = L().find((e) => !e.disabled && e.label.toLowerCase().startsWith(n));
-			r && N(r.value);
+		let n = F(e);
+		if (n) {
+			let e = R().find((e) => !e.disabled && e.label.toLowerCase().startsWith(n));
+			e && P(e.value);
 		}
-	}, G = (e) => `${R.id}-option-${e}`;
-	return /* @__PURE__ */ b(v, { children: [
-		/* @__PURE__ */ b("button", {
+	}, K = (e) => `${z.id}-option-${e}`;
+	return /* @__PURE__ */ x(y, { children: [
+		/* @__PURE__ */ x("button", {
 			type: "button",
-			...D,
-			...j,
-			id: A,
-			disabled: l,
+			...O,
+			...M,
+			id: j,
+			disabled: u,
 			"aria-haspopup": "listbox",
-			...R.triggerProps,
+			...z.triggerProps,
 			style: {
-				...R.triggerProps.style,
-				...T
+				...z.triggerProps.style,
+				...E
 			},
 			onKeyDown: (e) => {
-				E?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !R.open && (e.preventDefault(), R.setOpen(!0));
+				D?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !z.open && (e.preventDefault(), z.setOpen(!0));
 			},
-			className: e("zen__select group", r, "w-full", R.open && "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", h),
-			children: [/* @__PURE__ */ y("span", {
-				className: e("truncate", H === void 0 && "text-muted-foreground"),
-				children: H ?? c
-			}), /* @__PURE__ */ y(o, { open: R.open })]
+			className: e("zen__select group", i, "w-full", z.open && "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", g),
+			children: [/* @__PURE__ */ b("span", {
+				className: e("truncate", U === void 0 && "text-muted-foreground"),
+				children: U ?? l
+			}), /* @__PURE__ */ b(s, { open: z.open })]
 		}),
-		u && /* @__PURE__ */ y("input", {
+		d && /* @__PURE__ */ b("input", {
 			type: "hidden",
-			name: u,
-			value: i ?? ""
+			name: d,
+			value: a ?? ""
 		}),
-		/* @__PURE__ */ y("div", {
-			...R.popupProps,
-			className: e("zen__popover", n, "overflow-visible py-1", S),
-			children: /* @__PURE__ */ y("div", {
-				ref: O,
+		/* @__PURE__ */ b("div", {
+			...z.popupProps,
+			className: e("zen__popover", r, "overflow-visible py-1", C),
+			children: /* @__PURE__ */ b("div", {
+				ref: k,
 				role: "listbox",
 				tabIndex: -1,
-				"aria-label": D["aria-label"],
-				"aria-labelledby": D["aria-label"] ? void 0 : A,
-				"aria-activedescendant": M === null ? void 0 : G(M),
-				onKeyDown: W,
+				"aria-label": O["aria-label"],
+				"aria-labelledby": O["aria-label"] ? void 0 : j,
+				"aria-activedescendant": N === null ? void 0 : K(N),
+				onKeyDown: G,
 				className: "max-h-72 overflow-y-auto outline-hidden",
-				children: /* @__PURE__ */ y(x.Provider, {
+				children: /* @__PURE__ */ b(S.Provider, {
 					value: {
-						value: i,
-						active: M,
-						setActive: N,
-						choose: z,
-						optionId: G,
-						register: B
+						value: a,
+						active: N,
+						setActive: P,
+						choose: B,
+						optionId: K,
+						register: V
 					},
-					children: w
+					children: T
 				})
 			})
 		})
 	] });
 }
-function C(e, t) {
-	s.forEach(e, (e) => {
-		if (!u(e)) return;
+function w(e, t) {
+	c.forEach(e, (e) => {
+		if (!d(e)) return;
 		let n = e;
-		if (n.type === T && n.props.value !== void 0) {
-			let e = n.props.label ?? w(n.props.children);
+		if (n.type === E && n.props.value !== void 0) {
+			let e = n.props.label ?? T(n.props.children);
 			e && t.set(n.props.value, e);
-		} else (n.type === E || n.type === c) && C(n.props.children, t);
+		} else (n.type === D || n.type === l) && w(n.props.children, t);
 	});
 }
-var w = (e) => typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(w).join("") : "";
-function T({ value: t, label: n, disabled: r, className: a, children: o }) {
-	let s = f(x);
+var T = (e) => typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(T).join("") : "";
+function E({ value: t, label: n, disabled: r, className: i, children: o }) {
+	let s = p(S);
 	if (!s) throw Error("SelectItem must be inside a Select");
-	let c = g(null), l = n ?? w(o), u = s.register;
-	h(() => u(t, l || c.current?.textContent?.trim() || ""), [
+	let c = _(null), l = n ?? T(o), u = s.register;
+	g(() => u(t, l || c.current?.textContent?.trim() || ""), [
 		u,
 		t,
 		l
 	]);
 	let d = s.value === t;
-	return /* @__PURE__ */ b("div", {
+	return /* @__PURE__ */ x("div", {
 		ref: c,
 		id: s.optionId(t),
 		role: "option",
@@ -155,33 +149,33 @@ function T({ value: t, label: n, disabled: r, className: a, children: o }) {
 		"data-highlighted": s.active === t || void 0,
 		onMouseMove: () => !r && s.setActive(t),
 		onClick: () => s.choose(t),
-		className: e("grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", "data-highlighted:bg-muted aria-disabled:cursor-not-allowed aria-disabled:opacity-50", a),
-		children: [/* @__PURE__ */ y("span", {
+		className: e("grid cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", "data-highlighted:bg-muted aria-disabled:cursor-not-allowed aria-disabled:opacity-50", i),
+		children: [/* @__PURE__ */ b("span", {
 			className: "text-primary col-start-1",
 			"aria-hidden": !0,
-			children: d && /* @__PURE__ */ y(i, {})
-		}), /* @__PURE__ */ y("span", {
+			children: d && /* @__PURE__ */ b(a, {})
+		}), /* @__PURE__ */ b("span", {
 			className: "col-start-2 truncate",
 			children: o
 		})]
 	});
 }
-function E({ label: e, children: t }) {
-	return /* @__PURE__ */ b("div", {
+function D({ label: e, children: t }) {
+	return /* @__PURE__ */ x("div", {
 		role: "group",
 		"aria-label": typeof e == "string" ? e : void 0,
-		children: [/* @__PURE__ */ y("div", {
+		children: [/* @__PURE__ */ b("div", {
 			"aria-hidden": !0,
 			className: "text-muted-foreground px-3 pt-2 pb-1 text-xs font-medium",
 			children: e
 		}), t]
 	});
 }
-function D() {
-	return /* @__PURE__ */ y("div", {
+function O() {
+	return /* @__PURE__ */ b("div", {
 		role: "separator",
 		className: "bg-tint/[0.07] mx-2 my-1 h-px"
 	});
 }
 //#endregion
-export { E as SelectGroup, T as SelectItem, D as SelectSeparator, S as default };
+export { D as SelectGroup, E as SelectItem, O as SelectSeparator, C as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,WAAW,+BAiDb;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,cAAc,CAC1E;IACG,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,WAAW,+BAkDb;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,cAAc,CAC1E;IACG,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,6DAA6D;IAC7D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC"}

package/dist/slider/index.js

@@ -26,7 +26,7 @@ function i({ value: i, min: a = 0, max: o = 100, step: s = 1, onValueChange: c,
 			"--zen-track": y,
 			"--zen-thumb": d ?? "oklch(var(--primary))"
 		},
-		className: e("zen__slider h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:var(--zen-track)]", "[&::-moz-range-track]:h-2.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:[background:var(--zen-track)]", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/0.8)] [&::-webkit-slider-thumb]:[background:var(--zen-thumb)]", "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/0.8)] [&::-moz-range-thumb]:[background:var(--zen-thumb)]", "focus-visible:[&::-webkit-slider-thumb]:ring-ring/40 focus-visible:[&::-webkit-slider-thumb]:ring-4", p),
+		className: e("zen__slider h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:var(--zen-track)]", "[&::-moz-range-track]:h-2.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:[background:var(--zen-track)]", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/0.8)] [&::-webkit-slider-thumb]:[background:var(--zen-thumb)]", "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/0.8)] [&::-moz-range-thumb]:[background:var(--zen-thumb)]", "focus-visible:[&::-webkit-slider-thumb]:ring-ring/40 focus-visible:[&::-webkit-slider-thumb]:ring-4", "focus-visible:[&::-moz-range-thumb]:ring-ring/40 focus-visible:[&::-moz-range-thumb]:ring-4", p),
 		...h
 	});
 }

package/dist/status-pill/index.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+/**
+ * A small rounded status that changes in place, e.g. an app's "Saving…",
+ * "Saved", "Not saved · Retry": an icon (a Spinner, a Check) and a few words.
+ * `quiet` fades it back once the news is old (a save a few seconds ago).
+ * Changes are read out politely (role="status"). For an action inside it,
+ * such as Retry, use StatusPillAction. For a fixed label or count, use Badge.
+ */
+export default function StatusPill({ tone, quiet, className, ...rest }: StatusPillProps): import('react').JSX.Element;
+/** A text button inside a StatusPill, e.g. Retry, in the pill's colour. */
+export declare function StatusPillAction({ className, type, ...rest }: ComponentProps<'button'>): import('react').JSX.Element;
+export interface StatusPillProps extends ComponentProps<'span'> {
+    /** `positive` in the accent colour (done), `negative` in red (failed); `default` is muted (in progress). */
+    tone?: 'default' | 'positive' | 'negative';
+    /** Faded back into the page: the news is old. */
+    quiet?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/status-pill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/status-pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAQvC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAgB,EAAE,KAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAa1G;AAED,2EAA2E;AAC3E,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BAWjG;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,MAAM,CAAC;IAC3D,4GAA4G;IAC5G,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3C,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/status-pill/index.js

@@ -0,0 +1,25 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/status-pill/index.tsx
+var n = {
+	default: "border-tint/10 bg-tint/[0.05] text-muted-foreground",
+	positive: "border-primary/35 bg-primary/12 text-primary",
+	negative: "border-destructive/40 bg-destructive/15 text-destructive"
+};
+function r({ tone: r = "default", quiet: i = !1, className: a, ...o }) {
+	return /* @__PURE__ */ t("span", {
+		role: "status",
+		...o,
+		className: e("zen__status-pill inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium whitespace-nowrap [&_svg]:size-3.5 [&_svg]:shrink-0", "transition-[color,background-color,border-color,opacity] duration-300", i ? "text-muted-foreground border-transparent bg-transparent opacity-80" : n[r], a)
+	});
+}
+function i({ className: n, type: r = "button", ...i }) {
+	return /* @__PURE__ */ t("button", {
+		type: r,
+		...i,
+		className: e("ml-0.5 cursor-pointer rounded-full underline underline-offset-2 outline-hidden focus-visible:ring-2 focus-visible:ring-current/50", n)
+	});
+}
+//#endregion
+export { i as StatusPillAction, r as default };

package/dist/tab-bar/index.js

@@ -15,7 +15,7 @@ function a({ hideFrom: t = "md", className: i, children: a, ...o }) {
 		})
 	});
 }
-var o = e("flex flex-col items-center gap-1 py-2.5 text-[0.7rem] outline-hidden transition-colors duration-200 focus-visible:bg-tint/5", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/0.8)]");
+var o = e("flex flex-col items-center gap-1 py-2.5 text-[0.7rem] outline-hidden transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/0.8)]");
 function s({ icon: n, active: a, asChild: s, className: c, children: l, ...u }) {
 	let d = {
 		...u,

package/dist/table/index.js

@@ -71,7 +71,7 @@ function g({ numeric: r, sticky: i, sortDirection: a, onSort: o, scope: s = "col
 		children: o ? /* @__PURE__ */ l("button", {
 			type: "button",
 			onClick: o,
-			className: e("hover:text-foreground inline-flex items-center gap-1 align-middle leading-5 tracking-wider uppercase", r && "flex-row-reverse"),
+			className: e("hover:text-foreground inline-flex cursor-pointer items-center gap-1 align-middle leading-5 tracking-wider uppercase", r && "flex-row-reverse"),
 			children: [d, /* @__PURE__ */ c("span", {
 				"aria-hidden": !0,
 				className: "inline-flex w-3",

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tabs/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAqE,MAAM,OAAO,CAAC;AAgB1G,6GAA6G;AAC7G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAetG;AAID;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAiC5F;AA4BD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,+BA0BnE;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,sCAapE;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tabs/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAqE,MAAM,OAAO,CAAC;AAgB1G,6GAA6G;AAC7G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAetG;AAID;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAiC5F;AAiCD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,+BA0BnE;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,sCAgBpE;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,KAAK,CAAC;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;CACjB"}

package/dist/tabs/index.js

@@ -72,14 +72,18 @@ function _({ ref: t, className: r, children: i, ...a }) {
 		},
 		className: e("border-border relative flex gap-1 border-b", r),
 		...a,
-		children: [i, s && /* @__PURE__ */ u("span", {
+		children: [i, s ? /* @__PURE__ */ u("span", {
 			"aria-hidden": !0,
-			className: "bg-primary absolute bottom-[-1px] left-0 h-0.5 transition-[translate,width] duration-150 ease-in-out",
+			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__ */ u("span", {
+			"aria-hidden": !0,
+			"data-pending": !0,
+			className: "zen__tab-bar hidden"
+		}, "pending")]
 	});
 }
 function v({ value: n, className: r, onClick: i, ...a }) {
@@ -95,7 +99,7 @@ function v({ value: n, className: r, onClick: i, ...a }) {
 		onClick: (e) => {
 			c(n), i?.(e);
 		},
-		className: e(d === "pills" ? t : "focus-visible:ring-ring text-muted-foreground hover:text-foreground data-active:text-foreground px-3 py-2 text-sm whitespace-nowrap outline-hidden select-none focus-visible:ring-1", r),
+		className: e(d === "pills" ? t : "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),
 		...a
 	});
 }
@@ -106,7 +110,7 @@ function y({ value: t, className: n, ...r }) {
 		id: a("panel", t),
 		"aria-labelledby": a("tab", t),
 		tabIndex: 0,
-		className: e("outline-hidden", n),
+		className: e("focus-visible:outline-ring/50 outline-hidden focus-visible:outline-2 focus-visible:outline-offset-4", n),
 		...r
 	}) : null;
 }

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

@@ -1,3 +1,5 @@
+import { Appearance } from '../utils/theme';
+import { RefObject } from 'react';
 /** The inline script ThemeScript renders (for frameworks that take a raw string). */
 export declare const themeScript: (storageKey?: string) => string;
 /**
@@ -8,12 +10,32 @@ export declare function ThemeScript({ storageKey }: {
     storageKey?: string;
 }): import('react').JSX.Element;
 /**
- * Switches <html> between the dark and light themes and remembers the choice
- * (localStorage). Add ThemeScript to <head> to apply it on the next visit.
+ * Switches between the dark and light themes; the new theme spreads from the
+ * button like a drop of water (themeWave).
+ *
+ * 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…).
+ * With `target` too, it switches the theme of one element (a panel, a preview),
+ * and the water stays inside it.
  */
-export default function ThemeToggle({ storageKey, className }: ThemeToggleProps): import('react').JSX.Element;
+export default function ThemeToggle({ value, onChange, target, storageKey, className }: ThemeToggleProps): import('react').JSX.Element;
 export interface ThemeToggleProps {
-    /** localStorage key for the choice. Use the same one in ThemeScript. */
+    /**
+     * The theme, when you keep it: the toggle shows it, and `onChange` 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;
+    /**
+     * The element whose theme `onChange` 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>;
+    /** localStorage key for the choice, when the toggle keeps it. Use the same one in ThemeScript. */
     storageKey?: string;
     className?: string;
 }

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":"AAKA,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;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,UAAoB,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA6CxF;AAED,MAAM,WAAW,gBAAgB;IAC7B,wEAAwE;IACxE,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":"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"}

package/dist/theme-toggle/index.js

@@ -1,43 +1,50 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useEffect as t, useState as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+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 { jsx as o } from "react/jsx-runtime";
+import { flushSync as s } from "react-dom";
 //#region packages/theme-toggle/index.tsx
-var o = (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 s({ storageKey: e = "theme" }) {
-	return /* @__PURE__ */ i("script", { dangerouslySetInnerHTML: { __html: o(e) } });
+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__ */ o("script", { dangerouslySetInnerHTML: { __html: c(e) } });
 }
-function c({ storageKey: o = "theme", className: s }) {
-	let [c, l] = n("dark");
-	t(() => l(document.documentElement.classList.contains("light") ? "light" : "dark"), []);
-	let u = c === "dark" ? "light" : "dark";
-	return /* @__PURE__ */ i("button", {
+var u = /* @__PURE__ */ new Set();
+function d(e) {
+	u.add(e);
+	let t = new MutationObserver(e);
+	return t.observe(document.documentElement, {
+		attributes: !0,
+		attributeFilter: ["class"]
+	}), () => {
+		u.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";
+	return /* @__PURE__ */ o("button", {
 		type: "button",
-		"aria-label": `Switch to ${u} theme`,
-		onClick: () => {
-			let e = document.documentElement;
-			e.classList.remove("dark", "light"), e.classList.add(u);
-			try {
-				localStorage.setItem(o, u);
-			} catch {}
-			l(u);
-		},
-		className: e("zen__theme-toggle text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground focus-visible:ring-ring/50 grid size-9 place-items-center rounded-lg outline-hidden focus-visible:ring-2", s),
-		children: /* @__PURE__ */ i("svg", {
-			viewBox: "0 0 16 16",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			className: "size-4",
-			"aria-hidden": !0,
-			children: c === "dark" ? /* @__PURE__ */ i("path", { d: "M13.5 9.5A5.5 5.5 0 0 1 6.5 2.5a5.5 5.5 0 1 0 7 7Z" }) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("circle", {
-				cx: "8",
-				cy: "8",
-				r: "3"
-			}), /* @__PURE__ */ i("path", { d: "M8 1v1.5M8 13.5V15M1 8h1.5M13.5 8H15M3.05 3.05l1.06 1.06M11.89 11.89l1.06 1.06M3.05 12.95l1.06-1.06M11.89 4.11l1.06-1.06" })] })
-		})
+		"aria-label": `Switch to ${v} theme`,
+		onPointerEnter: r,
+		onFocus: r,
+		onClick: (e) => i(() => {
+			if (c === void 0) {
+				let e = document.documentElement;
+				e.classList.remove("dark", "light"), e.classList.add(v);
+				try {
+					localStorage.setItem(m, v);
+				} catch {}
+			}
+			s(() => {
+				l?.(v), u.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: o(_ === "dark" ? t : n, { className: "size-4" })
 	});
 }
 //#endregion
-export { s as ThemeScript, c as default, o as themeScript };
+export { l as ThemeScript, p as default, c as themeScript };