@rinzai/zen 0.11.0 → 0.14.0

package/dist/repeat-picker/index.d.ts

@@ -1,16 +1,23 @@
 import { DateString } from '../utils/date';
 import { Repeat } from '../utils/repeat';
+import { ComponentProps } from 'react';
 /**
  * How often something recurs, e.g. a bill: every n days, weeks, months or
  * years, on chosen weekdays or a day of the month. Says what it means in
  * words, and with a `start` date, the next few dates it falls on.
  */
-export default function RepeatPicker({ value, onChange, locale, start, weekStartsOn, label, className, }: RepeatPickerProps): import('react').JSX.Element;
-export interface RepeatPickerProps {
-    value: Repeat;
-    onChange: (value: Repeat) => void;
-    /** For weekday and date names, and the week's first day. */
-    locale: string;
+export default function RepeatPicker({ value: valueProp, defaultValue, onValueChange, locale: localeProp, start, weekStartsOn: weekStartsOnProp, label: labelProp, name, className, ...rest }: RepeatPickerProps): import('react').JSX.Element;
+/** Other props (aria-*, data-*, an id) go on the fieldset. */
+export interface RepeatPickerProps extends Omit<ComponentProps<'fieldset'>, 'defaultValue' | 'children'> {
+    /** The rule, when you keep it. */
+    value?: Repeat;
+    /** The first rule, when the picker keeps its own. Every month by default. */
+    defaultValue?: Repeat;
+    onValueChange?: (value: Repeat) => void;
+    /** Form field name: the rule is submitted as JSON. */
+    name?: string;
+    /** For weekday and date names, and the week's first day. Defaults to the LocaleProvider's. */
+    locale?: string;
     /** When it starts: its weekday and day of the month are the defaults, and the next dates are shown. */
     start?: DateString;
     /** 0 for Sunday … 6. Defaults to the locale's. */

package/dist/repeat-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/repeat-picker/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAkD,MAAM,iBAAiB,CAAC;AAClG,OAAO,EAAmC,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAKjF;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,YAAgC,EAChC,KAAiB,EACjB,SAAS,GACZ,EAAE,iBAAiB,+BA4FnB;AAED,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4DAA4D;IAC5D,MAAM,EAAE,MAAM,CAAC;IACf,uGAAuG;IACvG,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/repeat-picker/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,UAAU,EAAkD,MAAM,iBAAiB,CAAC;AAClG,OAAO,EAAmC,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAIjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAK,EAAE,SAAS,EAChB,YAA0C,EAC1C,aAAa,EACb,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACV,EAAE,iBAAiB,+BAkGnB;AAED,8DAA8D;AAC9D,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACpG,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uGAAuG;IACvG,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/repeat-picker/index.js

@@ -1,115 +1,127 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import t from "../input/index.js";
-import n from "../chip/index.js";
-import { dayOfWeek as r, formatDate as i, weekStart as a, weekdayNames as o } from "../utils/date.js";
-import s, { SelectItem as c } from "../select/index.js";
-import { describeRepeat as l, nextOccurrences as u } from "../utils/repeat.js";
-import { useState as d } from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useControllable as t } from "../utils/useControllable.js";
+import { useLocale as n, useMessages as r } from "../locale-provider/index.js";
+import i from "../input/index.js";
+import { FormValue as a } from "../utils/form-value.js";
+import o from "../chip/index.js";
+import { dayOfWeek as s, formatDate as c, weekStart as l, weekdayNames as u } from "../utils/date.js";
+import d, { SelectItem as f } from "../select/index.js";
+import { describeRepeat as p, nextOccurrences as m } from "../utils/repeat.js";
+import { useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region packages/repeat-picker/index.tsx
-var h = [
+var y = [
 	"day",
 	"week",
 	"month",
 	"year"
 ];
-function g({ value: g, onChange: _, locale: v, start: y, weekStartsOn: b = a(v), label: x = "Repeats", className: S }) {
-	let [C, w] = d(String(g.every));
-	Number(C) !== g.every && C !== "" && w(String(g.every));
-	let T = o(v), E = Array.from({ length: 7 }, (e, t) => (b + t) % 7), D = g.weekdays ?? (y ? [r(y)] : []), O = g.every !== 1;
-	return /* @__PURE__ */ m("fieldset", {
-		className: e("zen__repeat-picker flex flex-col gap-3", S),
+function b({ value: b, defaultValue: x = {
+	every: 1,
+	unit: "month"
+}, onValueChange: S, locale: C, start: w, weekStartsOn: T, label: E, name: D, className: O, ...k }) {
+	let A = r(), j = E ?? A.repeats, M = n(C), N = T ?? l(M), [P, F, I] = t(b, x, S), [L, R] = h(String(P.every));
+	Number(L) !== P.every && L !== "" && R(String(P.every));
+	let z = u(M), B = Array.from({ length: 7 }, (e, t) => (N + t) % 7), V = P.weekdays ?? (w ? [s(w)] : []), H = P.every !== 1, U = (e) => {
+		let t = {
+			every: P.every,
+			unit: e
+		};
+		e === "week" && w && (t.weekdays = [s(w)]), e === "month" && (t.day = w ? Number(w.slice(8)) : 1), F(t);
+	};
+	return /* @__PURE__ */ v("fieldset", {
+		className: e("zen__repeat-picker flex flex-col gap-3", O),
+		...k,
 		children: [
-			/* @__PURE__ */ p("legend", {
+			/* @__PURE__ */ _(a, {
+				name: D,
+				value: JSON.stringify(P),
+				onReset: I
+			}),
+			/* @__PURE__ */ _("legend", {
 				className: "sr-only",
-				children: x
+				children: j
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex items-center gap-2 text-sm",
 				children: [
-					/* @__PURE__ */ p("span", {
+					/* @__PURE__ */ _("span", {
 						className: "text-muted-foreground",
-						children: "Every"
+						children: A.every
 					}),
-					/* @__PURE__ */ p(t, {
-						"aria-label": "How many",
+					/* @__PURE__ */ _(i, {
+						"aria-label": A.howMany,
 						inputMode: "numeric",
-						value: C,
+						value: L,
 						onChange: (e) => {
 							let t = e.target.value.replace(/\D/g, "").slice(0, 3);
-							w(t), Number(t) >= 1 && _({
-								...g,
+							R(t), Number(t) >= 1 && F({
+								...P,
 								every: Number(t)
 							});
 						},
-						onBlur: () => w(String(g.every)),
+						onBlur: () => R(String(P.every)),
 						className: "w-16 text-center tabular-nums"
 					}),
-					/* @__PURE__ */ p(s, {
-						"aria-label": "Unit",
-						value: g.unit,
-						onChange: (e) => {
-							let t = {
-								every: g.every,
-								unit: e
-							};
-							e === "week" && y && (t.weekdays = [r(y)]), e === "month" && (t.day = y ? Number(y.slice(8)) : 1), _(t);
-						},
+					/* @__PURE__ */ _(d, {
+						"aria-label": A.unit,
+						value: P.unit,
+						onValueChange: U,
 						className: "w-32",
-						children: h.map((e) => /* @__PURE__ */ p(c, {
+						children: y.map((e) => /* @__PURE__ */ _(f, {
 							value: e,
-							children: O ? `${e}s` : e
+							children: A.repeatUnit(e, H ? 2 : 1)
 						}, e))
 					})
 				]
 			}),
-			g.unit === "week" && /* @__PURE__ */ p("div", {
+			P.unit === "week" && /* @__PURE__ */ _("div", {
 				role: "group",
-				"aria-label": "On",
+				"aria-label": A.on,
 				className: "flex flex-wrap gap-1.5",
-				children: E.map((e) => {
-					let t = D.includes(e);
-					return /* @__PURE__ */ p(n, {
+				children: B.map((e) => {
+					let t = V.includes(e);
+					return /* @__PURE__ */ _(o, {
 						pressed: t,
 						onClick: () => {
-							t && D.length === 1 || _({
-								...g,
-								weekdays: t ? D.filter((t) => t !== e) : [...D, e]
+							t && V.length === 1 || F({
+								...P,
+								weekdays: t ? V.filter((t) => t !== e) : [...V, e]
 							});
 						},
-						children: T[e]
+						children: z[e]
 					}, e);
 				})
 			}),
-			g.unit === "month" && /* @__PURE__ */ m(s, {
-				"aria-label": "On",
-				value: String(g.day ?? (y ? Number(y.slice(8)) : 1)),
-				onChange: (e) => _({
-					...g,
+			P.unit === "month" && /* @__PURE__ */ v(d, {
+				"aria-label": A.on,
+				value: String(P.day ?? (w ? Number(w.slice(8)) : 1)),
+				onValueChange: (e) => F({
+					...P,
 					day: Number(e)
 				}),
 				className: "w-40",
-				children: [Array.from({ length: 31 }, (e, t) => /* @__PURE__ */ m(c, {
+				children: [Array.from({ length: 31 }, (e, t) => /* @__PURE__ */ _(f, {
 					value: String(t + 1),
-					children: ["Day ", t + 1]
-				}, t + 1)), /* @__PURE__ */ p(c, {
+					children: A.day(t + 1)
+				}, t + 1)), /* @__PURE__ */ _(f, {
 					value: "-1",
-					children: "Last day"
+					children: A.lastDay
 				})]
 			}),
-			/* @__PURE__ */ m("p", {
+			/* @__PURE__ */ v("p", {
 				"aria-live": "polite",
 				className: "text-muted-foreground text-sm",
-				children: [l(g, v, y), y && /* @__PURE__ */ m(f, { children: [
-					/* @__PURE__ */ p("br", {}),
-					"Next:",
+				children: [p(P, M, w, A), w && /* @__PURE__ */ v(g, { children: [
+					/* @__PURE__ */ _("br", {}),
+					A.next,
 					" ",
-					u(g, y, 3).map((e) => i(e, v)).join(", ")
+					m(P, w, 3).map((e) => c(e, M)).join(", ")
 				] })]
 			})
 		]
 	});
 }
 //#endregion
-export { g as default };
+export { b as default };

package/dist/resizable/index.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from 'react';
+/**
+ * Panels side by side (or stacked, `orientation="vertical"`) with handles
+ * between them to drag, or to focus and move with the arrow keys. Sizes are
+ * percentages of the group; `onLayout` reports them all after each change,
+ * e.g. to keep for next time as the panels' `defaultSize`. Groups nest.
+ */
+export default function ResizablePanelGroup({ orientation, onLayout, ref, className, ...rest }: ResizablePanelGroupProps): import('react').JSX.Element;
+/** One panel: `defaultSize` is a percentage of the group (those without one share what's left); `minSize` and `maxSize` bound it. */
+export declare function ResizablePanel({ defaultSize, minSize, maxSize, id: idProp, className, style, ...rest }: ResizablePanelProps): import('react').JSX.Element;
+/**
+ * The boundary between two panels: a hairline that lights up while it's
+ * dragged, hovered or focused, with a wider grip than it looks. Arrow keys move
+ * it, Home and End take the panel before it to its smallest and largest.
+ */
+export declare function ResizableHandle({ ref: refProp, className, onPointerDown, onKeyDown, ...rest }: ComponentProps<'div'>): import('react').JSX.Element;
+export interface ResizablePanelGroupProps extends ComponentProps<'div'> {
+    /** Side by side (default), or stacked. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Every panel's size, in percent and in order, after each change. */
+    onLayout?: (sizes: number[]) => void;
+}
+export interface ResizablePanelProps extends ComponentProps<'div'> {
+    /** Its share of the group, in percent. */
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/resizable/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EACH,cAAc,EAUjB,MAAM,OAAO,CAAC;AA+Bf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EACxC,WAA0B,EAC1B,QAAQ,EACR,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACV,EAAE,wBAAwB,+BAyE1B;AAED,qIAAqI;AACrI,wBAAgB,cAAc,CAAC,EAC3B,WAAW,EACX,OAAW,EACX,OAAa,EACb,EAAE,EAAE,MAAM,EACV,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAiBrB;AAKD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BA0GpH;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACnE,0CAA0C;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/resizable/index.js

@@ -0,0 +1,135 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { readingKey as t } from "../utils/direction.js";
+import { useMergedRefs as n } from "../utils/refs.js";
+import { useMessages as r } from "../locale-provider/index.js";
+import { createContext as i, useContext as a, useEffect as o, useId as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+//#region packages/resizable/index.tsx
+var f = typeof window > "u" ? o : c, p = i(null);
+function m(e) {
+	let t = a(p);
+	if (!t) throw Error(`<${e}> must be inside <ResizablePanelGroup>`);
+	return t;
+}
+var h = "[data-zen-panel]", g = (e, t, n) => Math.min(n, Math.max(t, e));
+function _({ orientation: t = "horizontal", onLayout: r, ref: i, className: a, ...o }) {
+	let s = l(null), c = n(s, i), [m, _] = u({}), [v, y] = u({}), b = l(v), x = (e) => {
+		b.current = e, y(e);
+	}, [S, C] = u(!1), w = () => Array.from(s.current?.querySelectorAll(`:scope > ${h}`) ?? [], (e) => e.dataset.zenPanel);
+	f(() => {
+		let e = w();
+		if (e.some((e) => !m[e])) return;
+		let t = (e) => b.current[e] ?? m[e]?.defaultSize, n = e.filter((e) => t(e) === void 0), r = e.reduce((e, n) => e + (t(n) ?? 0), 0), i = n.length ? Math.max(0, 100 - r) / n.length : 0, a = Object.fromEntries(e.map((e) => [e, t(e) ?? i])), o = e.reduce((e, t) => e + a[t], 0) || 1;
+		for (let t of e) a[t] = a[t] * 100 / o;
+		x(a);
+	}, [m]);
+	let T = {
+		orientation: t,
+		sizes: v,
+		specs: m,
+		register: (e, t) => (_((n) => ({
+			...n,
+			[e]: t
+		})), () => _((t) => {
+			let { [e]: n, ...r } = t;
+			return r;
+		})),
+		resize: (e, t, n) => {
+			let i = m[e], a = m[t];
+			if (!i || !a) return;
+			let o = b.current, s = o[e] + o[t], c = g(n, Math.max(i.minSize, s - a.maxSize), Math.min(i.maxSize, s - a.minSize));
+			if (c === o[e]) return;
+			let l = {
+				...o,
+				[e]: c,
+				[t]: s - c
+			};
+			x(l), r?.(w().map((e) => l[e]));
+		},
+		setDragging: C
+	};
+	return /* @__PURE__ */ d(p.Provider, {
+		value: T,
+		children: /* @__PURE__ */ d("div", {
+			...o,
+			ref: c,
+			"data-orientation": t,
+			"data-dragging": S || void 0,
+			className: e("zen__resizable flex size-full", t === "vertical" && "flex-col", S && "select-none", a)
+		})
+	});
+}
+function v({ defaultSize: t, minSize: n = 0, maxSize: r = 100, id: i, className: a, style: o, ...c }) {
+	let l = m("ResizablePanel"), u = s(), p = i ?? u, { register: h } = l;
+	f(() => h(p, {
+		defaultSize: t,
+		minSize: n,
+		maxSize: r
+	}), [
+		p,
+		t,
+		n,
+		r
+	]);
+	let g = l.sizes[p] ?? t ?? 1;
+	return /* @__PURE__ */ d("div", {
+		...c,
+		id: p,
+		"data-zen-panel": p,
+		style: {
+			flex: `${g} 1 0px`,
+			...o
+		},
+		className: e("min-h-0 min-w-0 overflow-hidden", a)
+	});
+}
+var y = 5;
+function b({ ref: i, className: a, onPointerDown: o, onKeyDown: s, ...c }) {
+	let p = r(), g = m("ResizableHandle"), _ = l(null), v = n(_, i), [b, x] = u(null), [S, C] = u(!1), w = g.orientation === "horizontal";
+	f(() => {
+		let e = _.current, t = e?.previousElementSibling?.closest(h)?.dataset.zenPanel, n = e?.nextElementSibling?.closest(h)?.dataset.zenPanel;
+		x((e) => !t || !n ? null : e?.[0] === t && e[1] === n ? e : [t, n]);
+	});
+	let [T, E] = b ?? [], D = T ? g.sizes[T] : void 0, O = T ? g.specs[T] : void 0, k = (e) => {
+		if (o?.(e), e.defaultPrevented || e.button !== 0 || !T || !E || D === void 0) return;
+		e.preventDefault();
+		let t = e.currentTarget, [n, r] = [t.previousElementSibling, t.nextElementSibling], i = (D + g.sizes[E]) / ((w ? n.offsetWidth + r.offsetWidth : n.offsetHeight + r.offsetHeight) || 1), a = w && getComputedStyle(t).direction === "rtl" ? -1 : 1, s = w ? e.clientX : e.clientY;
+		t.setPointerCapture(e.pointerId), t.focus({ preventScroll: !0 }), C(!0), g.setDragging(!0);
+		let c = (e) => g.resize(T, E, D + ((w ? e.clientX : e.clientY) - s) * i * a), l = () => {
+			C(!1), g.setDragging(!1), t.removeEventListener("pointermove", c), t.removeEventListener("pointerup", l), t.removeEventListener("pointercancel", l);
+		};
+		t.addEventListener("pointermove", c), t.addEventListener("pointerup", l), t.addEventListener("pointercancel", l);
+	}, A = (e) => {
+		if (s?.(e), e.defaultPrevented || !T || !E || D === void 0 || !O) return;
+		let n = w ? t(e.key, e.currentTarget) : e.key, r = {
+			[w ? "ArrowLeft" : "ArrowUp"]: D - y,
+			[w ? "ArrowRight" : "ArrowDown"]: D + y,
+			Home: O.minSize,
+			End: O.maxSize
+		}[n];
+		r !== void 0 && (e.preventDefault(), g.resize(T, E, r));
+	};
+	return /* @__PURE__ */ d("div", {
+		role: "separator",
+		"aria-label": p.resize,
+		tabIndex: 0,
+		...c,
+		ref: v,
+		"aria-orientation": w ? "vertical" : "horizontal",
+		"aria-controls": T,
+		"aria-valuenow": D === void 0 ? void 0 : Math.round(D),
+		"aria-valuemin": O?.minSize,
+		"aria-valuemax": O?.maxSize,
+		"data-active": S || void 0,
+		onPointerDown: k,
+		onKeyDown: A,
+		className: e("group/handle relative z-10 flex shrink-0 touch-none items-center justify-center outline-hidden", w ? "w-px cursor-col-resize before:absolute before:inset-y-0 before:-inset-x-2" : "h-px cursor-row-resize before:absolute before:inset-x-0 before:-inset-y-2", a),
+		children: /* @__PURE__ */ d("span", {
+			"aria-hidden": !0,
+			className: e("bg-tint/[0.09] pointer-events-none absolute transition-[background-color,box-shadow,width,height] duration-200", w ? "inset-y-0 w-px" : "inset-x-0 h-px", "group-hover/handle:bg-primary/60 group-focus-visible/handle:bg-primary group-data-active/handle:bg-primary", "group-focus-visible/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] group-data-active/handle:shadow-[0_0_12px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", w ? "group-focus-visible/handle:w-0.5 group-data-active/handle:w-0.5" : "group-focus-visible/handle:h-0.5 group-data-active/handle:h-0.5")
+		})
+	});
+}
+//#endregion
+export { b as ResizableHandle, v as ResizablePanel, _ as default };

package/dist/segmented/index.d.ts

@@ -1,17 +1,20 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 /**
  * A small set of mutually exclusive options, shown as a pill row. Native radio
  * inputs underneath, so arrow keys and forms work as for any radio group. The
  * selection slides between options, like Pills. Fill it with
  * SegmentedItem (any content: text, icons, a disabled option).
  */
-export default function Segmented<V extends string>({ label, value, onChange, name, className, children, }: SegmentedProps<V>): import('react').JSX.Element;
+export default function Segmented<V extends string>({ label, value: valueProp, defaultValue, onValueChange, name, className, children, ...rest }: SegmentedProps<V>): import('react').JSX.Element;
 /** One option of a Segmented: a native radio covering whatever you put inside. */
 export declare function SegmentedItem({ value, disabled, className, children }: SegmentedItemProps): import('react').JSX.Element;
-export interface SegmentedProps<V extends string> {
+export interface SegmentedProps<V extends string> extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {
     label: string;
-    value: V;
-    onChange: (value: V) => void;
+    /** The chosen option, when you keep it. */
+    value?: V;
+    /** The first chosen option, when the control keeps its own. */
+    defaultValue?: V;
+    onValueChange?: (value: V) => void;
     /** Form field name; defaults to a generated one. */
     name?: string;
     className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/segmented/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAA6B,MAAM,OAAO,CAAC;AAY5E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,GACX,EAAE,cAAc,CAAC,CAAC,CAAC,+BAuCnB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BA4BzF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/segmented/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAA6B,MAAM,OAAO,CAAC;AAY5F;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,cAAc,CAAC,CAAC,CAAC,+BAwCnB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BA4BzF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IAC9G,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;CACvB"}

package/dist/segmented/index.js

@@ -1,58 +1,60 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useIndicator as t } from "../utils/indicator.js";
-import { createContext as n, useContext as r, useId as i, useRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useControllable as t } from "../utils/useControllable.js";
+import { useIndicator as n } from "../utils/indicator.js";
+import { createContext as r, useContext as i, useId as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region packages/segmented/index.tsx
-var c = n(null);
-function l({ label: n, value: r, onChange: l, name: u, className: d, children: f }) {
-	let p = i(), m = a(null), h = t(m, "label:has(input:checked)", [r, f]);
-	return /* @__PURE__ */ s("div", {
-		className: e("zen__segmented flex flex-col gap-2", d),
-		children: [/* @__PURE__ */ o("span", {
-			id: p,
+var l = r(null);
+function u({ label: r, value: i, defaultValue: u, onValueChange: d, name: f, className: p, children: m, ...h }) {
+	let [g, _] = t(i, u, d), v = a(), y = o(null), b = n(y, "label:has(input:checked)", [g, m]);
+	return /* @__PURE__ */ c("div", {
+		className: e("zen__segmented flex flex-col gap-2", p),
+		...h,
+		children: [/* @__PURE__ */ s("span", {
+			id: v,
 			className: "text-sm font-medium",
-			children: n
-		}), /* @__PURE__ */ s("div", {
-			ref: m,
+			children: r
+		}), /* @__PURE__ */ c("div", {
+			ref: y,
 			role: "radiogroup",
-			"aria-labelledby": p,
+			"aria-labelledby": v,
 			className: "glow-edge border-tint/10 bg-tint/[0.03] relative inline-flex w-fit flex-wrap gap-1 rounded-xl border p-1",
-			children: [h && /* @__PURE__ */ o("span", {
+			children: [b && /* @__PURE__ */ s("span", {
 				"aria-hidden": !0,
 				className: "zen__segmented-indicator bg-primary/15 ease-out-soft absolute top-0 left-0 rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)] transition-[translate,width,height] duration-500",
 				style: {
-					translate: `${h.x}px ${h.y}px`,
-					width: h.w,
-					height: h.h
+					translate: `${b.x}px ${b.y}px`,
+					width: b.w,
+					height: b.h
 				}
-			}), /* @__PURE__ */ o(c.Provider, {
+			}), /* @__PURE__ */ s(l.Provider, {
 				value: {
-					name: u ?? p,
-					value: r,
-					onChange: l,
-					measured: h !== null
+					name: f ?? v,
+					value: g,
+					select: _,
+					measured: b !== null
 				},
-				children: f
+				children: m
 			})]
 		})]
 	});
 }
-function u({ value: t, disabled: n, className: i, children: a }) {
-	let l = r(c);
-	if (!l) throw Error("SegmentedItem must be inside a Segmented");
-	return /* @__PURE__ */ s("label", {
-		className: e("text-muted-foreground relative cursor-pointer rounded-lg px-3 py-1.5 text-sm transition-colors duration-300", "hover:text-foreground has-checked:text-foreground has-focus-visible:ring-ring/50 has-focus-visible:ring-2", "has-disabled:hover:text-muted-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50", !l.measured && "has-checked:bg-primary/15 has-checked:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)]", i),
-		children: [/* @__PURE__ */ o("input", {
+function d({ value: t, disabled: n, className: r, children: a }) {
+	let o = i(l);
+	if (!o) throw Error("SegmentedItem must be inside a Segmented");
+	return /* @__PURE__ */ c("label", {
+		className: e("text-muted-foreground relative cursor-pointer rounded-lg px-3 py-1.5 text-sm transition-colors duration-300", "hover:text-foreground has-checked:text-foreground has- has-focus-ring", "has-disabled:hover:text-muted-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50", !o.measured && "has-checked:bg-primary/15 has-checked:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)]", r),
+		children: [/* @__PURE__ */ s("input", {
 			type: "radio",
 			className: "absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none rounded-[inherit] opacity-0 disabled:cursor-not-allowed",
-			name: l.name,
+			name: o.name,
 			value: t,
-			checked: l.value === t,
+			checked: o.value === t,
 			disabled: n,
-			onChange: () => l.onChange(t)
+			onChange: () => o.select(t)
 		}), a]
 	});
 }
 //#endregion
-export { u as SegmentedItem, l as default };
+export { d as SegmentedItem, u as default };

package/dist/select/index.d.ts

@@ -1,3 +1,4 @@
+import { FieldSize } from '../utils/styles';
 import { ComponentProps, ReactNode } from 'react';
 /**
  * Pick one value from a short list: a field-styled button that opens a list
@@ -5,7 +6,7 @@ import { ComponentProps, ReactNode } from 'react';
  * to close. Fill it with SelectItem, organised with SelectGroup and
  * SelectSeparator. For long or searchable lists, use Combobox.
  */
-export default function Select<V extends string>({ value, onChange, placeholder, disabled, name, id, className, listClassName, children, style, onKeyDown, ...rest }: SelectProps<V>): import('react').JSX.Element;
+export default function Select<V extends string>({ value: valueProp, defaultValue, onValueChange, placeholder: placeholderProp, disabled, size, name, id, className, listClassName, children, style, onKeyDown, ...rest }: SelectProps<V>): import('react').JSX.Element;
 /**
  * One choice in a Select. Its `label` (or its text, when that's all it holds)
  * shows in the field once chosen and is matched when typing to jump.
@@ -20,11 +21,16 @@ export declare function SelectGroup({ label, children }: {
 export declare function SelectSeparator(): import('react').JSX.Element;
 /** Also takes the trigger button's props (aria-*, data-*, onBlur…), so Field can wire it up. */
 export interface SelectProps<V extends string> extends Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'children' | 'defaultValue' | 'name'> {
-    value: V | null;
-    onChange: (value: V) => void;
+    /** The chosen value, when you keep it; null for none. */
+    value?: V | null;
+    /** The first value, when the select keeps its own. */
+    defaultValue?: V | null;
+    onValueChange?: (value: V) => void;
     /** Shown while nothing is chosen. */
     placeholder?: string;
     disabled?: boolean;
+    /** Height, matching Button's: sm (32px), default (40px) or lg (44px). */
+    size?: FieldSize;
     /** Form field name: adds a hidden input with the value. */
     name?: string;
     id?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/select/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAMH,cAAc,EAEd,SAAS,EAQZ,MAAM,OAAO,CAAC;AAaf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EAC7C,KAAK,EACL,QAAQ,EACR,WAAuB,EACvB,QAAgB,EAChB,IAAI,EACJ,EAAE,EACF,SAAS,EACT,aAAa,EACb,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACV,EAAE,WAAW,CAAC,CAAC,CAAC,+BAmIhB;AAuBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAiC1F;AAED,uCAAuC;AACvC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BASzF;AAED,0CAA0C;AAC1C,wBAAgB,eAAe,gCAE9B;AAED,gGAAgG;AAChG,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CACvD,cAAc,CAAC,QAAQ,CAAC,EACxB,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC9D;IACG,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/select/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAc,KAAK,SAAS,EAA6C,MAAM,mBAAmB,CAAC;AAI1G,OAAO,EAMH,cAAc,EAEd,SAAS,EAQZ,MAAM,OAAO,CAAC;AAaf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EAC7C,KAAK,EAAE,SAAS,EAChB,YAAmB,EACnB,aAAa,EACb,WAAW,EAAE,eAAe,EAC5B,QAAgB,EAChB,IAAgB,EAChB,IAAI,EACJ,EAAE,EACF,SAAS,EACT,aAAa,EACb,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACV,EAAE,WAAW,CAAC,CAAC,CAAC,+BA6IhB;AAuBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAiC1F;AAED,uCAAuC;AACvC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BASzF;AAED,0CAA0C;AAC1C,wBAAgB,eAAe,gCAE9B;AAED,gGAAgG;AAChG,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CACvD,cAAc,CAAC,QAAQ,CAAC,EACxB,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC9D;IACG,yDAAyD;IACzD,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACjB,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB"}