@rinzai/zen 0.6.1 → 0.7.0

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

@@ -9,7 +9,8 @@ export declare function ThemeScript({ storageKey }: {
 }): 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.
+ * (localStorage); the new theme spreads from the button like a drop of water (themeWave).
+ * Add ThemeScript to <head> to apply it on the next visit.
  */
 export default function ThemeToggle({ storageKey, className }: ThemeToggleProps): import('react').JSX.Element;
 export interface ThemeToggleProps {

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":"AASA,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,UAAoB,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAgCxF;AAED,MAAM,WAAW,gBAAgB;IAC7B,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/theme-toggle/index.js

@@ -1,43 +1,46 @@
 "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({ storageKey: c = "theme", className: l }) {
+	let p = a(d, f, () => "dark"), m = p === "dark" ? "light" : "dark";
+	return /* @__PURE__ */ o("button", {
 		type: "button",
-		"aria-label": `Switch to ${u} theme`,
-		onClick: () => {
+		"aria-label": `Switch to ${m} theme`,
+		onPointerEnter: r,
+		onFocus: r,
+		onClick: (e) => i(() => {
 			let e = document.documentElement;
-			e.classList.remove("dark", "light"), e.classList.add(u);
+			e.classList.remove("dark", "light"), e.classList.add(m);
 			try {
-				localStorage.setItem(o, u);
+				localStorage.setItem(c, m);
 			} 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" })] })
-		})
+			s(() => u.forEach((e) => e()));
+		}, e.currentTarget),
+		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", l),
+		children: o(p === "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 };

package/dist/theme.css

@@ -236,6 +236,13 @@
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
+    /*
+     * The gradient only paints within the box, and at a tight line height
+     * descenders (g, y) and accents hang outside it and would be cut off. The
+     * box reaches past them; the margins take that back, so layout is unchanged.
+     */
+    padding-block: 0.2em;
+    margin-block: -0.2em;
     /* Light theme: start from the ink colour, since near-white would vanish. */
     &:where(.light *, [data-theme='light'] *) {
         background-image: linear-gradient(100deg, oklch(var(--foreground)), oklch(var(--primary)) 85%);
@@ -439,6 +446,47 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
         zen-aurora-c 52s steps(26) infinite alternate;
 }
 
+/*
+ * A track's sliding indicator is placed by measuring, which can't happen until
+ * the page's script runs. Until then (server HTML, before hydration) the active
+ * item wears the indicator's look itself, in the same place, so it shows at
+ * once: the pill of Pills (and TabList variant="pills"), the bar of underline tabs.
+ */
+:has(> .zen__pill-indicator[data-pending]) :is([aria-current='page'], [aria-selected='true']) {
+    background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    box-shadow:
+        inset 0 0 0 1px oklch(var(--glow) / 0.35),
+        0 0 24px -4px oklch(var(--glow) / 0.6);
+}
+:has(> .zen__tab-bar[data-pending]) > [role='tab'][aria-selected='true'] {
+    /* The bar straddles the track's bottom border: 1px above its edge, 1px below. */
+    box-shadow:
+        inset 0 -1px 0 var(--color-primary),
+        0 1px 0 var(--color-primary);
+}
+
+/* The page's <main>, focused by Header's skip link: no ring round the whole page. */
+main[data-zen-skip-target]:focus {
+    outline: none;
+}
+
+/*
+ * themeWave() (utils/theme-wave.ts): the new theme spreads over the old one,
+ * which holds still, through a clip on the new page (or, into a dark theme,
+ * the old one closes in over the new). The water is a canvas
+ * drawn over both, in a layer of its own that shows as it is (no fade).
+ */
+html.zen-theme-waving::view-transition-old(root),
+html.zen-theme-waving::view-transition-new(root),
+html.zen-theme-waving::view-transition-new(zen-theme-water) {
+    animation: none;
+    mix-blend-mode: normal;
+}
+/* Into a dark theme, the old one closes in over the new. */
+html.zen-theme-closing::view-transition-old(root) {
+    z-index: 1;
+}
+
 /*
  * Contour lines (image from <Backdrop topoSrc>), faint everywhere… The image
  * is used as a mask over the tint, so its strokes are white on dark and ink
@@ -775,7 +823,17 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     }
 }
 
-/* Popovers scale and fade in from their top-layer entry, and back out. */
+/*
+ * Popovers scale and fade in from their top-layer entry, and back out. They
+ * stay on a GPU layer of their own after too: while animating they're drawn as
+ * one, and a popup at a fractional position (under a trigger that is) would
+ * otherwise be repainted when the animation ends, its icons snapping a pixel
+ * away from the text.
+ */
+.zen__popover,
+.zen__dialog {
+    will-change: scale;
+}
 .zen__popover {
     transition:
         opacity 150ms,
@@ -819,6 +877,9 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
         overlay 320ms allow-discrete,
         display 320ms allow-discrete;
 }
+.zen__dialog[data-side] {
+    will-change: translate;
+}
 .zen__dialog[data-side]:not([open]) {
     scale: none;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA4IhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA7LoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAiMpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/toast/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIH,SAAS,EACT,SAAS,EAMZ,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,YAAY;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,+BA8JhG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,QAO/E;AAYD,+EAA+E;AAC/E,wBAAgB,QAAQ,YA/MoB,MAAM,YAAY,YAAY,KAAK,MAAM,CAmNpF"}