@rinzai/zen 0.11.0 → 0.13.0

package/dist/select/index.js

@@ -1,181 +1,184 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
 import { useTypeahead as t } from "../utils/typeahead.js";
-import { useAnchoredPopup as n } from "../utils/useAnchoredPopup.js";
-import { CheckIcon as r } from "../utils/status-icons.js";
-import { useFieldProps as i } from "../field/index.js";
-import { POPUP as a, TRIGGER as o } from "../utils/styles.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";
+import { useControllable as n } from "../utils/useControllable.js";
+import { useAnchoredPopup as r } from "../utils/useAnchoredPopup.js";
+import { useMessages as i } from "../locale-provider/index.js";
+import { CheckIcon as a } from "../utils/status-icons.js";
+import { useFieldProps as o } from "../field/index.js";
+import { FIELD_SIZE as s, POPUP as c, TRIGGER as l } from "../utils/styles.js";
+import { FormValue as u } from "../utils/form-value.js";
+import { FieldChevron as d } from "../utils/field-chevron.js";
+import { Children as f, Fragment as p, createContext as m, isValidElement as h, useCallback as ee, useContext as g, useEffect as _, useId as te, useLayoutEffect as v, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region packages/select/index.tsx
-var S = u(null);
-function C({ value: r, 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 = i({
-		...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) => ({
+var w = m(null);
+function T({ value: a, defaultValue: f = null, onValueChange: p, placeholder: m, disabled: h = !1, size: g = "default", name: v, id: T, className: D, listClassName: O, children: k, style: A, onKeyDown: j, ...M }) {
+	let N = i(), P = m ?? N.selectPlaceholder, [F, I, L] = n(a, f, p), R = y(null), z = te(), B = T ?? z, ne = o({
+		...M,
+		id: T
+	}), [V, H] = b(null), U = t(), [W, G] = b(/* @__PURE__ */ new Map()), K = () => Array.from(R.current?.querySelectorAll("[role=\"option\"]") ?? []).map((e) => ({
 		value: e.dataset.value,
 		label: e.dataset.label ?? "",
 		disabled: e.getAttribute("aria-disabled") === "true"
-	})), z = n({
+	})), q = r({
 		matchWidth: !0,
 		onOpenChange: (e) => {
 			if (!e) return;
-			let t = R();
-			P(t.find((e) => e.value === r)?.value ?? t.find((e) => !e.disabled)?.value ?? null);
+			let t = K();
+			H(t.find((e) => e.value === F)?.value ?? t.find((e) => !e.disabled)?.value ?? null);
 		}
 	});
-	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) => {
+	_(() => {
+		q.open && R.current?.focus();
+	}, [q.open]);
+	let J = (e) => {
+		K().find((t) => t.value === e)?.disabled || (I(e), q.setOpen(!1));
+	}, Y = ee((e, t) => (G((n) => n.get(e) === t ? n : new Map(n).set(e, t)), () => G((t) => {
 		let n = new Map(t);
 		return n.delete(e), n;
-	})), []), H = new Map(I);
-	w(T, H);
-	let U = r === null ? void 0 : H.get(r), W = (e, t, n = R()) => {
+	})), []), X = new Map(W);
+	E(k, X);
+	let Z = F === null ? void 0 : X.get(F), Q = (e, t, n = K()) => {
 		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;
-	}, G = (e) => {
+	}, re = (e) => {
 		let t = {
-			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)
+			ArrowDown: () => H((e) => Q(e, 1)),
+			ArrowUp: () => H((e) => Q(e, -1)),
+			Home: () => H(Q(null, 1)),
+			End: () => H(Q(null, -1)),
+			Enter: () => V !== null && J(V),
+			" ": () => V !== null && J(V),
+			Tab: () => q.setOpen(!1)
 		};
 		if (t[e.key]) {
 			e.key !== "Tab" && e.preventDefault(), t[e.key]();
 			return;
 		}
-		let n = F(e);
+		let n = U(e);
 		if (n) {
-			let e = R().find((e) => !e.disabled && e.label.toLowerCase().startsWith(n));
-			e && P(e.value);
+			let e = K().find((e) => !e.disabled && e.label.toLowerCase().startsWith(n));
+			e && H(e.value);
 		}
-	}, K = (e) => `${z.id}-option-${e}`;
-	return /* @__PURE__ */ x(y, { children: [
-		/* @__PURE__ */ x("button", {
+	}, $ = (e) => `${q.id}-option-${e}`;
+	return /* @__PURE__ */ C(x, { children: [
+		/* @__PURE__ */ C("button", {
 			type: "button",
-			...O,
 			...M,
-			id: j,
-			disabled: u,
+			...ne,
+			id: B,
+			disabled: h,
 			"aria-haspopup": "listbox",
-			...z.triggerProps,
+			...q.triggerProps,
 			style: {
-				...z.triggerProps.style,
-				...E
+				...q.triggerProps.style,
+				...A
 			},
 			onKeyDown: (e) => {
-				D?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !z.open && (e.preventDefault(), z.setOpen(!0));
+				j?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !q.open && (e.preventDefault(), q.setOpen(!0));
 			},
-			className: e("zen__select group", o, "w-full", z.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", g),
-			children: [/* @__PURE__ */ b("span", {
-				className: e("truncate", U === void 0 && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
-				children: U ?? l
-			}), /* @__PURE__ */ b(s, { open: z.open })]
+			className: e("zen__select group", l, s[g], "w-full", q.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", D),
+			children: [/* @__PURE__ */ S("span", {
+				className: e("truncate", Z === void 0 && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
+				children: Z ?? P
+			}), /* @__PURE__ */ S(d, { open: q.open })]
 		}),
-		d && /* @__PURE__ */ b("input", {
-			type: "hidden",
-			name: d,
-			value: r ?? ""
+		/* @__PURE__ */ S(u, {
+			name: v,
+			value: F ?? "",
+			onReset: L
 		}),
-		/* @__PURE__ */ b("div", {
-			...z.popupProps,
-			className: e("zen__popover", a, "overflow-visible py-1", C),
-			children: /* @__PURE__ */ b("div", {
-				ref: k,
+		/* @__PURE__ */ S("div", {
+			...q.popupProps,
+			className: e("zen__popover", c, "overflow-visible py-1", O),
+			children: /* @__PURE__ */ S("div", {
+				ref: R,
 				role: "listbox",
 				tabIndex: -1,
-				"aria-label": O["aria-label"],
-				"aria-labelledby": O["aria-label"] ? void 0 : j,
-				"aria-activedescendant": N === null ? void 0 : K(N),
-				onKeyDown: G,
+				"aria-label": M["aria-label"],
+				"aria-labelledby": M["aria-label"] ? void 0 : B,
+				"aria-activedescendant": V === null ? void 0 : $(V),
+				onKeyDown: re,
 				className: "max-h-72 overflow-y-auto outline-hidden",
-				children: /* @__PURE__ */ b(S.Provider, {
+				children: /* @__PURE__ */ S(w.Provider, {
 					value: {
-						value: r,
-						active: N,
-						setActive: P,
-						choose: B,
-						optionId: K,
-						register: V
+						value: F,
+						active: V,
+						setActive: H,
+						choose: J,
+						optionId: $,
+						register: Y
 					},
-					children: T
+					children: k
 				})
 			})
 		})
 	] });
 }
-function w(e, t) {
-	c.forEach(e, (e) => {
-		if (!d(e)) return;
+function E(e, t) {
+	f.forEach(e, (e) => {
+		if (!h(e)) return;
 		let n = e;
-		if (n.type === E && n.props.value !== void 0) {
-			let e = n.props.label ?? T(n.props.children);
+		if (n.type === O && n.props.value !== void 0) {
+			let e = n.props.label ?? D(n.props.children);
 			e && t.set(n.props.value, e);
-		} else (n.type === D || n.type === l) && w(n.props.children, t);
+		} else (n.type === k || n.type === p) && E(n.props.children, t);
 	});
 }
-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: i, className: a, children: o }) {
-	let s = p(S);
+var D = (e) => typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(D).join("") : "";
+function O({ value: t, label: n, disabled: r, className: i, children: o }) {
+	let s = g(w);
 	if (!s) throw Error("SelectItem must be inside a Select");
-	let c = _(null), l = n ?? T(o), u = s.register;
-	g(() => u(t, l || c.current?.textContent?.trim() || ""), [
+	let c = y(null), l = n ?? D(o), u = s.register;
+	v(() => u(t, l || c.current?.textContent?.trim() || ""), [
 		u,
 		t,
 		l
 	]);
 	let d = s.value === t;
-	return /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ C("div", {
 		ref: c,
 		id: s.optionId(t),
 		role: "option",
 		"data-value": t,
 		"data-label": l || void 0,
 		"aria-selected": d,
-		"aria-disabled": i || void 0,
+		"aria-disabled": r || void 0,
 		"data-highlighted": s.active === t || void 0,
-		onMouseMove: () => !i && s.setActive(t),
+		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__ */ b("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__ */ S("span", {
 			className: "text-primary col-start-1",
 			"aria-hidden": !0,
-			children: d && /* @__PURE__ */ b(r, {})
-		}), /* @__PURE__ */ b("span", {
+			children: d && /* @__PURE__ */ S(a, {})
+		}), /* @__PURE__ */ S("span", {
 			className: "col-start-2 truncate",
 			children: o
 		})]
 	});
 }
-function D({ label: e, children: t }) {
-	return /* @__PURE__ */ x("div", {
+function k({ label: e, children: t }) {
+	return /* @__PURE__ */ C("div", {
 		role: "group",
 		"aria-label": typeof e == "string" ? e : void 0,
-		children: [/* @__PURE__ */ b("div", {
+		children: [/* @__PURE__ */ S("div", {
 			"aria-hidden": !0,
 			className: "text-muted-foreground px-3 pt-2 pb-1 text-xs font-medium",
 			children: e
 		}), t]
 	});
 }
-function O() {
-	return /* @__PURE__ */ b("div", {
+function A() {
+	return /* @__PURE__ */ S("div", {
 		role: "separator",
 		className: "bg-tint/[0.07] mx-2 my-1 h-px"
 	});
 }
 //#endregion
-export { D as SelectGroup, E as SelectItem, O as SelectSeparator, C as default };
+export { k as SelectGroup, O as SelectItem, A as SelectSeparator, T as default };

package/dist/separator/index.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+/**
+ * A hairline between groups of content, across (the default) or upright
+ * (`orientation="vertical"`, e.g. between toolbar buttons; it takes its
+ * container's height). Screen readers hear it only when it divides something
+ * meaningful: pass `decorative` for one that's just visual.
+ */
+export default function Separator({ orientation, decorative, className, ...rest }: SeparatorProps): import('react').JSX.Element;
+export interface SeparatorProps extends ComponentProps<'div'> {
+    orientation?: 'horizontal' | 'vertical';
+    /** Only visual: hidden from screen readers. */
+    decorative?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/separator/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,WAA0B,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAc/G;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IACzD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB"}

package/dist/separator/index.js

@@ -0,0 +1,15 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/separator/index.tsx
+function n({ orientation: n = "horizontal", decorative: r, className: i, ...a }) {
+	return /* @__PURE__ */ t("div", {
+		role: r ? "none" : "separator",
+		"aria-orientation": r || n === "horizontal" ? void 0 : "vertical",
+		"data-orientation": n,
+		className: e("zen__separator bg-tint/[0.09] shrink-0", n === "horizontal" ? "h-px w-full" : "w-px self-stretch", i),
+		...a
+	});
+}
+//#endregion
+export { n as default };

package/dist/side-nav/index.js

@@ -18,7 +18,7 @@ function a({ title: t, children: i, className: a }) {
 		}), 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)]");
+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-ring", "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,

package/dist/skeleton/index.d.ts

@@ -1,13 +1,13 @@
-import { ReactElement } from 'react';
+import { ComponentProps, ReactElement } from 'react';
 /**
  * Shimmering placeholder in the shape of content that's on its way. Size it with className.
  *
  * Give it the content as its child and `loading`: the placeholder shows while
  * loading, then the content fades in where it was.
  */
-export default function Skeleton({ className, loading, children }: SkeletonProps): import('react').JSX.Element;
-export interface SkeletonProps {
-    className?: string;
+export default function Skeleton({ className, loading, children, ...rest }: SkeletonProps): import('react').JSX.Element;
+/** Other props (data-*, a style) go on the placeholder. */
+export interface SkeletonProps extends Omit<ComponentProps<'span'>, 'children'> {
     /** With children: show the placeholder instead of them while true. */
     loading?: boolean;
     /** The content this stands in for, a single element. */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAK/E;AAED,MAAM,WAAW,aAAa;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAE/D;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BAKxF;AAED,2DAA2D;AAC3D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC3E,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B"}

package/dist/skeleton/index.js

@@ -4,13 +4,14 @@ import { Slot as t } from "../utils/slot.js";
 import { useState as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 //#region packages/skeleton/index.tsx
-function i({ className: i, loading: a, children: o }) {
-	let [s, c] = n(!!a);
-	return a && !s && c(!0), o && !a ? s ? /* @__PURE__ */ r(t, {
+function i({ className: i, loading: a, children: o, ...s }) {
+	let [c, l] = n(!!a);
+	return a && !c && l(!0), o && !a ? c ? /* @__PURE__ */ r(t, {
 		className: "zen__reveal",
 		children: o
 	}) : o : /* @__PURE__ */ r("span", {
 		"aria-hidden": !0,
+		...s,
 		className: e("zen__skeleton block rounded-md", i)
 	});
 }

package/dist/slider/index.d.ts

@@ -5,11 +5,14 @@ import { ComponentProps } from 'react';
  * the accent unless you give it your own `trackBackground` (e.g. a hue
  * gradient), and a glowing thumb.
  */
-export default function Slider({ value, min, max, step, onValueChange, onValueCommit, trackBackground, thumbColor, valueText, className, style, ...rest }: SliderProps): import('react').JSX.Element;
+export default function Slider({ value: valueProp, defaultValue, min, max, step, onValueChange, onValueCommit, trackBackground, thumbColor, valueText, className, style, onChange, ...rest }: SliderProps): import('react').JSX.Element;
 /** The glowing thumb, with its focus ring: Slider's and RangeSlider's. */
 export declare const THUMB: string;
-export interface SliderProps extends Omit<ComponentProps<'input'>, 'type' | 'value' | 'min' | 'max' | 'step' | 'onChange' | 'defaultValue'> {
-    value: number;
+export interface SliderProps extends Omit<ComponentProps<'input'>, 'type' | 'value' | 'min' | 'max' | 'step' | 'defaultValue'> {
+    /** The value, when you keep it. */
+    value?: number;
+    /** The first value, when the slider keeps its own (default `min`). */
+    defaultValue?: number;
     min?: number;
     max?: number;
     step?: number;

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,+BA6Cb;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,QAI+E,CAAC;AAElG,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":"AAGA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,WAAW,+BAmDb;AAED,0EAA0E;AAC1E,eAAO,MAAM,KAAK,QAI+E,CAAC;AAElG,MAAM,WAAW,WAAY,SAAQ,IAAI,CACrC,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,cAAc,CAC7D;IACG,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,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

@@ -1,35 +1,41 @@
 "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";
+import { useControllable as t } from "../utils/useControllable.js";
+import { useFormReset as n } from "../utils/form-value.js";
+import { useEffect as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region packages/slider/index.tsx
-function i({ value: i, min: o = 0, max: s = 100, step: c = 1, onValueChange: l, onValueCommit: u, trackBackground: d, thumbColor: f, valueText: p, className: m, style: h, ...g }) {
-	let _ = n(null), v = n(u);
-	v.current = u, t(() => {
-		let e = _.current;
+function o({ value: o, defaultValue: c, min: l = 0, max: u = 100, step: d = 1, onValueChange: f, onValueCommit: p, trackBackground: m, thumbColor: h, valueText: g, className: _, style: v, onChange: y, ...b }) {
+	let [x, S, C] = t(o, c ?? l, f), w = i(null);
+	n(w, C);
+	let T = i(p);
+	T.current = p, r(() => {
+		let e = w.current;
 		if (!e) return;
-		let t = () => v.current?.(Number(e.value));
+		let t = () => T.current?.(Number(e.value));
 		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
 	}, []);
-	let y = s > o ? (i - o) / (s - o) * 100 : 0, b = d ?? `linear-gradient(to right, oklch(var(--primary)) ${y}%, oklch(var(--muted)) ${y}%)`;
-	return /* @__PURE__ */ r("input", {
-		ref: _,
+	let E = u > l ? (x - l) / (u - l) * 100 : 0, D = m ?? `linear-gradient(to var(--zen-end), oklch(var(--primary)) ${E}%, oklch(var(--muted)) ${E}%)`;
+	return /* @__PURE__ */ a("input", {
+		ref: w,
 		type: "range",
-		min: o,
-		max: s,
-		step: c,
-		value: i,
-		"aria-valuetext": p?.(i),
-		onChange: (e) => l?.(Number(e.target.value)),
+		min: l,
+		max: u,
+		step: d,
+		value: x,
+		"aria-valuetext": g?.(x),
+		onChange: (e) => {
+			y?.(e), S(Number(e.target.value));
+		},
 		style: {
-			...h,
-			"--zen-track": b,
-			"--zen-thumb": f ?? "oklch(var(--primary))"
+			...v,
+			"--zen-track": D,
+			"--zen-thumb": h ?? "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)]", a, m),
-		...g
+		className: e("zen__slider h-5 w-full cursor-pointer [--zen-end:right] rtl:[--zen-end:left] 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)]", s, _),
+		...b
 	});
 }
-var a = "[&::-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)/calc(0.8*var(--glow-k)))] [&::-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)/calc(0.8*var(--glow-k)))] [&::-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";
+var s = "[&::-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)/calc(0.8*var(--glow-k)))] [&::-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)/calc(0.8*var(--glow-k)))] [&::-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";
 //#endregion
-export { a as THUMB, i as default };
+export { s as THUMB, o as default };

package/dist/sortable/index.d.ts

@@ -1,4 +1,7 @@
 import { ComponentProps } from 'react';
+export { SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps } from './shared';
+export { default as SortableTree, type SortableTreeProps } from './tree';
+export { flattenTree, type SortableNode, type SortableRow } from './tree-model';
 /**
  * A list put in order by dragging, e.g. budget categories: drag an item by its
  * SortableHandle and the others make way (a phone taps lightly at each new
@@ -6,28 +9,15 @@ import { ComponentProps } from 'react';
  * From the keyboard, Space or Enter on a handle picks the item up, the arrow
  * keys move it, Space or Enter drops it and Escape puts it back; each step is
  * announced. `value` is the ids in order; render a SortableItem for each.
+ * With `asChild` (and `asChild` on the items), your own elements instead: a
+ * TableBody of TableRows, say, one per group, each sorted on its own.
  */
-export declare function SortableList({ value, onChange, className, children, ...rest }: SortableListProps): import('react').JSX.Element;
-/** One item in a SortableList; give it the `id` it has in the list's value. */
-export declare function SortableItem({ id, className, ...rest }: SortableItemProps): import('react').JSX.Element;
-/**
- * What an item is dragged by: a grip button. `label` names the item ("Rent");
- * the button reads "Reorder Rent". It takes no scroll gestures, so dragging it
- * never scrolls the page.
- */
-export declare function SortableHandle({ id, label, className, children, ...rest }: SortableHandleProps): import('react').JSX.Element;
-export interface SortableListProps extends Omit<ComponentProps<'ul'>, 'onChange'> {
+export declare function SortableList({ value, onValueChange, asChild, className, children, ref, ...rest }: SortableListProps): import('react').JSX.Element;
+export interface SortableListProps extends ComponentProps<'ul'> {
     /** The items' ids, in order. */
     value: readonly string[];
-    onChange: (value: string[]) => void;
-}
-export interface SortableItemProps extends ComponentProps<'li'> {
-    id: string;
-}
-export interface SortableHandleProps extends Omit<ComponentProps<'button'>, 'id'> {
-    /** The item's id, as in the list's value. */
-    id: string;
-    /** The item's name, e.g. "Rent". */
-    label: string;
+    onValueChange: (value: string[]) => void;
+    /** Put the list's props on your own element (the single child, e.g. a TableBody) instead of a ul. */
+    asChild?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/sortable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,cAAc,EASjB,MAAM,OAAO,CAAC;AA2Bf;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAuJhG;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAczE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BAwB9F;AAUD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC7E,gCAAgC;IAChC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,EAAE,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAC7E,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/sortable/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAA6E,MAAM,OAAO,CAAC;AAIlH,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhF;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAkInH;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC3D,gCAAgC;IAChC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,qGAAqG;IACrG,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}