@rinzai/zen 0.5.0 → 0.6.0

package/dist/select/index.js

@@ -0,0 +1,187 @@
+"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";
+//#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) => ({
+		value: e.dataset.value,
+		label: e.dataset.label ?? "",
+		disabled: e.getAttribute("aria-disabled") === "true"
+	})), R = t({
+		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);
+		}
+	});
+	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) => {
+		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()) => {
+		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) => {
+		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)
+		};
+		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);
+		}
+	}, G = (e) => `${R.id}-option-${e}`;
+	return /* @__PURE__ */ b(v, { children: [
+		/* @__PURE__ */ b("button", {
+			type: "button",
+			...D,
+			...j,
+			id: A,
+			disabled: l,
+			"aria-haspopup": "listbox",
+			...R.triggerProps,
+			style: {
+				...R.triggerProps.style,
+				...T
+			},
+			onKeyDown: (e) => {
+				E?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !R.open && (e.preventDefault(), R.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 })]
+		}),
+		u && /* @__PURE__ */ y("input", {
+			type: "hidden",
+			name: u,
+			value: i ?? ""
+		}),
+		/* @__PURE__ */ y("div", {
+			...R.popupProps,
+			className: e("zen__popover", n, "overflow-visible py-1", S),
+			children: /* @__PURE__ */ y("div", {
+				ref: O,
+				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,
+				className: "max-h-72 overflow-y-auto outline-hidden",
+				children: /* @__PURE__ */ y(x.Provider, {
+					value: {
+						value: i,
+						active: M,
+						setActive: N,
+						choose: z,
+						optionId: G,
+						register: B
+					},
+					children: w
+				})
+			})
+		})
+	] });
+}
+function C(e, t) {
+	s.forEach(e, (e) => {
+		if (!u(e)) return;
+		let n = e;
+		if (n.type === T && n.props.value !== void 0) {
+			let e = n.props.label ?? w(n.props.children);
+			e && t.set(n.props.value, e);
+		} else (n.type === E || n.type === c) && C(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);
+	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() || ""), [
+		u,
+		t,
+		l
+	]);
+	let d = s.value === t;
+	return /* @__PURE__ */ b("div", {
+		ref: c,
+		id: s.optionId(t),
+		role: "option",
+		"data-value": t,
+		"data-label": l || void 0,
+		"aria-selected": d,
+		"aria-disabled": r || void 0,
+		"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: "text-primary col-start-1",
+			"aria-hidden": !0,
+			children: d && /* @__PURE__ */ y(i, {})
+		}), /* @__PURE__ */ y("span", {
+			className: "col-start-2 truncate",
+			children: o
+		})]
+	});
+}
+function E({ label: e, children: t }) {
+	return /* @__PURE__ */ b("div", {
+		role: "group",
+		"aria-label": typeof e == "string" ? e : void 0,
+		children: [/* @__PURE__ */ y("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", {
+		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 };

package/dist/side-nav/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { Slot as t } from "../utils/slot.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region packages/side-nav/index.tsx
+function i({ className: t, ...r }) {
+	return /* @__PURE__ */ n("nav", {
+		className: e("zen__side-nav flex flex-col gap-6", t),
+		...r
+	});
+}
+function a({ title: t, children: i, className: a }) {
+	return /* @__PURE__ */ r("div", {
+		className: e("flex flex-col gap-1", a),
+		children: [t && /* @__PURE__ */ n("span", {
+			className: "text-muted-foreground px-3 pb-1 text-[0.68rem] tracking-[0.1em] uppercase",
+			children: t
+		}), i]
+	});
+}
+var o = e("rounded-lg px-3 py-1.5 text-sm outline-hidden transition-[background-color,color,box-shadow] duration-200", "text-muted-foreground hover:bg-tint/[0.05] hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-2", "aria-[current=page]:bg-primary/15 aria-[current=page]:text-foreground aria-[current=page]:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]");
+function s({ active: r, asChild: i, className: a, children: s, ...c }) {
+	let l = {
+		...c,
+		"aria-current": r ? "page" : void 0,
+		className: e(o, a)
+	};
+	return i ? (r || delete l["aria-current"], /* @__PURE__ */ n(t, {
+		...l,
+		children: s
+	})) : /* @__PURE__ */ n("a", {
+		...l,
+		children: s
+	});
+}
+//#endregion
+export { a as SideNavGroup, s as SideNavLink, i as default };

package/dist/skeleton/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/skeleton/index.tsx
+function n({ className: n }) {
+	return /* @__PURE__ */ t("span", {
+		"aria-hidden": !0,
+		className: e("zen__skeleton block rounded-md", n)
+	});
+}
+//#endregion
+export { n as default };

package/dist/slider/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useEffect as t, useRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region packages/slider/index.tsx
+function i({ value: i, min: a = 0, max: o = 100, step: s = 1, onValueChange: c, onValueCommit: l, trackBackground: u, thumbColor: d, valueText: f, className: p, style: m, ...h }) {
+	let g = n(null), _ = n(l);
+	_.current = l, t(() => {
+		let e = g.current;
+		if (!e) return;
+		let t = () => _.current?.(Number(e.value));
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []);
+	let v = o > a ? (i - a) / (o - a) * 100 : 0, y = u ?? `linear-gradient(to right, oklch(var(--primary)) ${v}%, oklch(var(--muted)) ${v}%)`;
+	return /* @__PURE__ */ r("input", {
+		ref: g,
+		type: "range",
+		min: a,
+		max: o,
+		step: s,
+		value: i,
+		"aria-valuetext": f?.(i),
+		onChange: (e) => c?.(Number(e.target.value)),
+		style: {
+			...m,
+			"--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),
+		...h
+	});
+}
+//#endregion
+export { i as default };

package/dist/spinner/index.js

@@ -0,0 +1,14 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/spinner/index.tsx
+function n({ label: n, className: r }) {
+	return /* @__PURE__ */ t("span", {
+		role: n ? "status" : void 0,
+		"aria-label": n,
+		"aria-hidden": !n || void 0,
+		className: e("zen__spinner inline-block size-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent", r)
+	});
+}
+//#endregion
+export { n as default };

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

@@ -2,6 +2,9 @@ import { ComponentProps, ReactNode } from 'react';
 /**
  * Phone navigation: a glass bar fixed to the bottom, clear of the home
  * indicator, hidden from `hideFrom` up (default md). Fill it with TabBarItems.
+ * Inside a rounded frame, round the bar to match (className, e.g.
+ * rounded-b-[15px]): with GPU compositing, Chrome doesn't clip a blurred
+ * backdrop to an ancestor's rounded corners, only to the element's own.
  */
 export default function TabBar({ hideFrom, className, children, ...rest }: TabBarProps): import('react').JSX.Element;
 /**

package/dist/tab-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tab-bar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAiB5F;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAYlG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tab-bar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAiB5F;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAYlG;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,KAAK,CAAC;IACtD,iEAAiE;IACjE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACzC;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/tab-bar/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { Slot as t } from "../utils/slot.js";
+import { Children as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/tab-bar/index.tsx
+function a({ hideFrom: t = "md", className: i, children: a, ...o }) {
+	return /* @__PURE__ */ r("nav", {
+		className: e("zen__tab-bar glass glass-blur glow-edge fixed inset-x-0 bottom-0 z-40 rounded-none border-x-0! border-b-0! pb-[env(safe-area-inset-bottom)]", t === "sm" && "sm:hidden", t === "md" && "md:hidden", t === "lg" && "lg:hidden", i),
+		...o,
+		children: /* @__PURE__ */ r("div", {
+			className: "grid",
+			style: { gridTemplateColumns: `repeat(${n.count(a)}, 1fr)` },
+			children: a
+		})
+	});
+}
+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)]");
+function s({ icon: n, active: a, asChild: s, className: c, children: l, ...u }) {
+	let d = {
+		...u,
+		"aria-current": a ? "page" : void 0,
+		className: e(o, c)
+	};
+	return s ? (a || delete d["aria-current"], /* @__PURE__ */ r(t, {
+		...d,
+		children: l
+	})) : /* @__PURE__ */ i("a", {
+		...d,
+		children: [n, l]
+	});
+}
+//#endregion
+export { s as TabBarItem, a as default };

package/dist/table/index.js

@@ -0,0 +1,148 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import t from "../icons/chevron-down.js";
+import n from "../icons/chevron-up.js";
+import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/table/index.tsx
+function u({ label: t, className: n, ref: a, onScroll: s, ...l }) {
+	let u = o(null), d = r(() => {
+		let e = u.current;
+		if (!e) return;
+		let t = (t, n) => n !== e.hasAttribute(t) && e.toggleAttribute(t, n);
+		t("data-under-top", e.scrollTop > 0), t("data-under-left", e.scrollLeft > 0), t("data-under-bottom", e.scrollTop + e.clientHeight < e.scrollHeight - 1);
+	}, []);
+	return i(() => {
+		let e = u.current;
+		if (!e) return;
+		d();
+		let t = typeof ResizeObserver > "u" ? null : new ResizeObserver(d);
+		return t?.observe(e), e.firstElementChild && t?.observe(e.firstElementChild), () => t?.disconnect();
+	}, [d]), /* @__PURE__ */ c("div", {
+		className: e("zen__table-panel glass glow-edge isolate flex flex-col overflow-hidden rounded-xl", n),
+		children: /* @__PURE__ */ c("div", {
+			ref: (e) => {
+				u.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+			},
+			onScroll: (e) => {
+				d(), s?.(e);
+			},
+			role: t ? "region" : void 0,
+			"aria-label": t,
+			tabIndex: t ? 0 : void 0,
+			className: "zen__table-container focus-visible:ring-ring/30 min-h-0 overflow-auto rounded-[inherit] outline-hidden will-change-scroll focus-visible:ring-2 focus-visible:ring-inset",
+			...l
+		})
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ c("table", {
+		className: e("zen__table w-full border-separate border-spacing-0 text-sm", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ c("thead", {
+		className: e("zen__sticky-top sticky top-0 z-20", t),
+		...n
+	});
+}
+function p(e) {
+	return /* @__PURE__ */ c("tbody", { ...e });
+}
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ c("tfoot", {
+		className: e("zen__sticky-bottom sticky bottom-0 z-20", t),
+		...n
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ c("tr", {
+		className: e("group", t),
+		...n
+	});
+}
+function g({ numeric: r, sticky: i, sortDirection: a, onSort: o, scope: s = "col", className: u, children: d, ...f }) {
+	return /* @__PURE__ */ c("th", {
+		scope: s,
+		"aria-sort": a === "asc" ? "ascending" : a === "desc" ? "descending" : void 0,
+		className: e("border-tint/[0.07] text-muted-foreground border-b px-3 py-2.5 align-middle text-xs leading-5 font-medium tracking-wider whitespace-nowrap uppercase", i === "left" && "zen__sticky-left sticky left-0 z-10", r ? "text-right" : "text-left", u),
+		...f,
+		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"),
+			children: [d, /* @__PURE__ */ c("span", {
+				"aria-hidden": !0,
+				className: "inline-flex w-3",
+				children: a === "asc" ? /* @__PURE__ */ c(n, {
+					className: "size-3",
+					strokeWidth: 2.5
+				}) : a === "desc" ? /* @__PURE__ */ c(t, {
+					className: "size-3",
+					strokeWidth: 2.5
+				}) : null
+			})]
+		}) : d
+	});
+}
+function _({ numeric: t, sticky: n, className: r, ...i }) {
+	return /* @__PURE__ */ c("td", {
+		className: e("border-tint/[0.045] border-b px-3 py-2.5 transition-colors duration-150", "group-hover:[background-image:linear-gradient(oklch(var(--tint)/0.035),oklch(var(--tint)/0.035))]", n === "left" && "zen__sticky-left sticky left-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)]", t && "text-right tabular-nums", r),
+		...i
+	});
+}
+function v({ numeric: t, sticky: n, className: r, ...i }) {
+	return /* @__PURE__ */ c("td", {
+		className: e("border-tint/[0.07] h-9 border-t px-3 font-medium whitespace-nowrap", n === "left" && "zen__sticky-left sticky left-0 z-10 shadow-[inset_-1px_0_0_oklch(var(--tint)/0.06)]", t && "text-right tabular-nums", r),
+		...i
+	});
+}
+function y({ height: e, colSpan: t }) {
+	return e <= 0 ? null : /* @__PURE__ */ c("tr", {
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ c("td", {
+			colSpan: t,
+			style: {
+				height: e,
+				padding: 0,
+				border: 0
+			}
+		})
+	});
+}
+function b({ colSpan: e, children: t = "Nothing here yet." }) {
+	return /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", {
+		colSpan: e,
+		className: "text-muted-foreground px-3 py-8 text-center",
+		children: t
+	}) });
+}
+function x(e, t, n) {
+	let [r, i] = s(n ?? null);
+	return {
+		rows: a(() => {
+			if (!r) return e;
+			let n = t[r.key], i = [...e].sort(n);
+			return r.direction === "desc" ? i.reverse() : i;
+		}, [
+			e,
+			r,
+			t
+		]),
+		sort: r,
+		setSort: i,
+		headProps: (e) => ({
+			sortDirection: r?.key === e ? r.direction : void 0,
+			onSort: () => i((t) => t?.key === e ? t.direction === "asc" ? {
+				key: e,
+				direction: "desc"
+			} : null : {
+				key: e,
+				direction: "asc"
+			})
+		})
+	};
+}
+//#endregion
+export { p as TableBody, _ as TableCell, u as TableContainer, b as TableEmpty, m as TableFooter, v as TableFooterCell, g as TableHead, f as TableHeader, h as TableRow, y as TableSpacerRow, d as default, x as useSort };

package/dist/table-of-contents/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useEffect as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/table-of-contents/index.tsx
+function a({ items: a, title: o = "On this page", className: s }) {
+	let [c, l] = n();
+	return t(() => {
+		if (typeof IntersectionObserver > "u") return;
+		let e = a.map((e) => document.getElementById(e.id)).filter((e) => !!e), t = /* @__PURE__ */ new Set(), n = new IntersectionObserver((e) => {
+			for (let n of e) n.isIntersecting ? t.add(n.target.id) : t.delete(n.target.id);
+			let n = a.find((e) => t.has(e.id));
+			n && l(n.id);
+		}, { rootMargin: "0px 0px -65% 0px" });
+		return e.forEach((e) => n.observe(e)), () => n.disconnect();
+	}, [a]), a.length ? /* @__PURE__ */ i("nav", {
+		"aria-label": o,
+		className: e("zen__toc flex flex-col gap-3", s),
+		children: [/* @__PURE__ */ r("p", {
+			className: "text-muted-foreground mt-0! text-[0.68rem] tracking-[0.1em] uppercase",
+			children: o
+		}), /* @__PURE__ */ r("ul", {
+			className: "border-tint/[0.07] flex flex-col gap-2 border-l text-sm",
+			children: a.map((t) => /* @__PURE__ */ r("li", {
+				className: e("-ml-px", t.depth === 2 && "pl-3"),
+				children: /* @__PURE__ */ r("a", {
+					href: `#${t.id}`,
+					"aria-current": t.id === c ? "location" : void 0,
+					className: e("text-muted-foreground hover:text-foreground block border-l border-transparent pl-3 transition-colors", "aria-[current=location]:border-primary aria-[current=location]:text-foreground"),
+					children: t.label
+				})
+			}, t.id))
+		})]
+	}) : null;
+}
+//#endregion
+export { a as default };

package/dist/tabs/index.d.ts

@@ -2,8 +2,9 @@ import { ComponentProps } from 'react';
 /** Tab set with an underline that slides to the active tab. Controlled (`value`) or not (`defaultValue`). */
 export default function Tabs({ value, defaultValue, onValueChange, className, ...rest }: TabsProps): import('react').JSX.Element;
 /**
- * `underline` (default): Sora's in-page tabs, a bar under the active tab.
- * `pills`: Sora's top-nav look, a glowing pill sliding along a glass track.
+ * The row of tabs. `underline` (default): in-page tabs, a bar sliding under
+ * the active tab. `pills`: the Pills look, a glowing pill sliding along a
+ * glass track (for navigation between pages, use Pills itself).
  */
 export declare function TabList({ variant, className, children, ...rest }: TabListProps): import('react').JSX.Element;
 export declare function Tab({ value, className, onClick, ...rest }: TabProps): import('react').JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tabs/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,cAAc,EAQjB,MAAM,OAAO,CAAC;AAgBf,6GAA6G;AAC7G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAiB,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAetG;AAID;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BA8D5F;AAED,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,+BA2BnE;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;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"}

package/dist/tabs/index.js

@@ -0,0 +1,114 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { PILL as t } from "../utils/styles.js";
+import { useIndicator as n } from "../utils/indicator.js";
+import r, { PillIndicator as i } from "../pills/index.js";
+import { createContext as a, useContext as o, useId as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region packages/tabs/index.tsx
+var f = a(null);
+function p(e) {
+	let t = o(f);
+	if (!t) throw Error(`<${e}> must be inside <Tabs>`);
+	return t;
+}
+function m({ value: t, defaultValue: n = "", onValueChange: r, className: i, ...a }) {
+	let [o, c] = l(n), d = t ?? o, p = s();
+	return /* @__PURE__ */ u(f.Provider, {
+		value: {
+			value: d,
+			select: (e) => {
+				t === void 0 && c(e), r?.(e);
+			},
+			idFor: (e, t) => `${p}-${e}-${t.replace(/\s+/g, "-")}`
+		},
+		children: /* @__PURE__ */ u("div", {
+			className: e("zen__tabs flex flex-col gap-4", i),
+			...a
+		})
+	});
+}
+var h = a("underline");
+function g({ variant: e = "underline", className: t, children: n, ...a }) {
+	p("TabList");
+	let o = c(null), s = (e) => {
+		let t = Array.from(o.current?.querySelectorAll("[role=\"tab\"]:not(:disabled)") ?? []), n = t.indexOf(document.activeElement);
+		if (n === -1) return;
+		let r = {
+			ArrowRight: n + 1,
+			ArrowLeft: n - 1,
+			Home: 0,
+			End: t.length - 1
+		}[e.key];
+		if (r === void 0) return;
+		e.preventDefault();
+		let i = t[(r + t.length) % t.length];
+		i.focus(), i.click();
+	}, l = /* @__PURE__ */ u(h.Provider, {
+		value: e,
+		children: n
+	});
+	return e === "pills" ? /* @__PURE__ */ d(r, {
+		ref: o,
+		role: "tablist",
+		onKeyDown: s,
+		className: t,
+		...a,
+		children: [l, /* @__PURE__ */ u(i, {})]
+	}) : /* @__PURE__ */ u(_, {
+		ref: o,
+		role: "tablist",
+		onKeyDown: s,
+		className: t,
+		...a,
+		children: l
+	});
+}
+function _({ ref: t, className: r, children: i, ...a }) {
+	let o = c(null), s = n(o, "[role=\"tab\"][aria-selected=\"true\"]");
+	return /* @__PURE__ */ d("div", {
+		ref: (e) => {
+			o.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+		},
+		className: e("border-border relative flex gap-1 border-b", r),
+		...a,
+		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",
+			style: {
+				width: s.w,
+				translate: `${s.x}px 0`
+			}
+		})]
+	});
+}
+function v({ value: n, className: r, onClick: i, ...a }) {
+	let { value: s, select: c, idFor: l } = p("Tab"), d = o(h), f = s === n;
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		role: "tab",
+		id: l("tab", n),
+		"aria-selected": f,
+		"aria-controls": l("panel", n),
+		tabIndex: f ? 0 : -1,
+		"data-active": f || void 0,
+		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),
+		...a
+	});
+}
+function y({ value: t, className: n, ...r }) {
+	let { value: i, idFor: a } = p("TabPanel");
+	return i === t ? /* @__PURE__ */ u("div", {
+		role: "tabpanel",
+		id: a("panel", t),
+		"aria-labelledby": a("tab", t),
+		tabIndex: 0,
+		className: e("outline-hidden", n),
+		...r
+	}) : null;
+}
+//#endregion
+export { v as Tab, g as TabList, y as TabPanel, m as default };

package/dist/tailwind.css

@@ -4,4 +4,4 @@
  *     @import '@rinzai/zen/tailwind.css';
  */
 @import './theme.css';
-@source './zen.js';
+@source './**/*.js';