@rinzai/zen 0.10.3 → 0.13.0

package/dist/code-block/index.js

@@ -1,45 +1,40 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useEffect as t, useRef as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useMessages as t } from "../locale-provider/index.js";
+import { useCopyToClipboard as n } from "../utils/useCopyToClipboard.js";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region packages/code-block/index.tsx
-function o({ code: o, language: s, highlight: c, copyable: l = !0, variant: u = "glass", className: d, ...f }) {
-	let p = o.trim(), [m, h] = r(!1);
-	t(() => {
-		if (!m) return;
-		let e = setTimeout(() => h(!1), 1500);
-		return () => clearTimeout(e);
-	}, [m]);
-	let g = n(null), [_, v] = r(!1);
-	return t(() => {
-		let e = g.current;
+function c({ code: c, language: l, highlight: u, copyable: d = !0, variant: f = "glass", className: p, ...m }) {
+	let h = t(), g = c.trim(), { copy: _, copied: v } = n(), y = i(null), [b, x] = a(!1);
+	return r(() => {
+		let e = y.current;
 		if (!e || typeof ResizeObserver > "u") return;
-		let t = new ResizeObserver(() => v(e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight));
+		let t = new ResizeObserver(() => x(e.scrollWidth > e.clientWidth || e.scrollHeight > e.clientHeight));
 		return t.observe(e), () => t.disconnect();
-	}, []), /* @__PURE__ */ a("div", {
-		className: e("zen__code-block group relative flex flex-col", u === "glass" && "glass glow-edge overflow-hidden rounded-xl", d),
-		"data-language": s,
-		...f,
-		children: [/* @__PURE__ */ i("pre", {
-			ref: g,
-			tabIndex: _ ? 0 : void 0,
-			className: "text-foreground focus-visible:ring-ring/50 m-0! min-h-0 overflow-auto rounded-none! bg-transparent! p-5! font-mono text-[13px]! leading-6 font-normal! outline-hidden focus-visible:ring-2 focus-visible:ring-inset",
-			children: c ? /* @__PURE__ */ i("code", {
+	}, []), /* @__PURE__ */ s("div", {
+		className: e("zen__code-block group relative flex flex-col", f === "glass" && "glass glow-edge overflow-hidden rounded-xl", p),
+		"data-language": l,
+		...m,
+		children: [/* @__PURE__ */ o("pre", {
+			ref: y,
+			tabIndex: b ? 0 : void 0,
+			dir: "ltr",
+			className: "text-foreground focus-ring m-0! min-h-0 overflow-auto rounded-none! bg-transparent! p-5! font-mono text-[13px]! leading-6 font-normal! outline-hidden focus-visible:ring-inset",
+			children: u ? /* @__PURE__ */ o("code", {
 				className: "bg-transparent! p-0! text-inherit!",
-				dangerouslySetInnerHTML: { __html: c(p, s) }
-			}) : /* @__PURE__ */ i("code", {
+				dangerouslySetInnerHTML: { __html: u(g, l) }
+			}) : /* @__PURE__ */ o("code", {
 				className: "bg-transparent! p-0! text-inherit!",
-				children: p
+				children: g
 			})
-		}), l && /* @__PURE__ */ i("button", {
+		}), d && /* @__PURE__ */ o("button", {
 			type: "button",
-			onClick: async () => {
-				await navigator.clipboard?.writeText(p), h(!0);
-			},
-			className: e("zen__code-copy inline-flex items-center justify-center text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute top-2.5 right-2.5 cursor-pointer rounded-lg px-2.5 py-1 text-xs font-medium outline-hidden transition-[opacity,background-color,color] focus-visible:ring-2", "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:min-h-11 pointer-coarse:min-w-11 [@media(hover:none)]:bg-card/90 [@media(hover:none)]:opacity-100", m && "text-primary opacity-100"),
-			children: m ? "Copied" : "Copy"
+			onClick: () => _(g),
+			className: e("zen__code-copy inline-flex items-center justify-center text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground absolute top-2.5 end-2.5 cursor-pointer rounded-lg px-2.5 py-1 text-xs font-medium outline-hidden transition-[opacity,background-color,color] focus-ring", "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 pointer-coarse:min-h-11 pointer-coarse:min-w-11 [@media(hover:none)]:bg-card/90 [@media(hover:none)]:opacity-100", v && "text-primary opacity-100"),
+			children: v ? h.copied : h.copy
 		})]
 	});
 }
 //#endregion
-export { o as default };
+export { c as default };

package/dist/code-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/code-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,MAAU,EACV,KAAK,EAAE,UAAU,EACjB,YAAiB,EACjB,aAAa,EACb,UAAU,EACV,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,cAAc,+BAgEhB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,WAAW,CAAC;IACzG,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/code-input/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAoB,MAAM,OAAO,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,MAAU,EACV,KAAK,EAAE,UAAU,EACjB,YAAiB,EACjB,aAAa,EACb,UAAU,EACV,OAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,cAAc,+BAmEhB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,WAAW,CAAC;IACzG,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qGAAqG;IACrG,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/code-input/index.js

@@ -1,44 +1,50 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useFieldProps as t } from "../field/index.js";
-import { useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { useControllable as n } from "../utils/useControllable.js";
+import { useFieldProps as r } from "../field/index.js";
+import { useFormReset as i } from "../utils/form-value.js";
+import { useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region packages/code-input/index.tsx
-function a({ length: a = 6, value: o, defaultValue: s = "", onValueChange: c, onComplete: l, allowed: u = /\d/, className: d, disabled: f, ...p }) {
-	let [m, h] = n(s), g = o ?? m, [_, v] = n(!1), y = t(p), b = u.source === "\\d";
-	return /* @__PURE__ */ i("div", {
-		className: e("zen__code-input relative inline-flex gap-2", f && "opacity-50", d),
-		children: [/* @__PURE__ */ r("input", {
+function l({ length: l = 6, value: u, defaultValue: d = "", onValueChange: f, onComplete: p, allowed: m = /\d/, className: h, disabled: g, ..._ }) {
+	let [v, y, b] = n(u, d, f), x = a(null), S = t(x, _.ref);
+	i(x, b);
+	let [C, w] = o(!1), T = r(_), E = m.source === "\\d";
+	return /* @__PURE__ */ c("div", {
+		className: e("zen__code-input relative inline-flex gap-2", g && "opacity-50", h),
+		children: [/* @__PURE__ */ s("input", {
 			autoComplete: "one-time-code",
-			inputMode: b ? "numeric" : "text",
+			inputMode: E ? "numeric" : "text",
 			spellCheck: !1,
-			maxLength: a,
-			...p,
-			...y,
-			disabled: f,
-			value: g,
+			maxLength: l,
+			..._,
+			...T,
+			ref: S,
+			disabled: g,
+			value: v,
 			onChange: (e) => {
-				let t = e.target.value.split("").filter((e) => u.test(e)).join("").slice(0, a);
-				o === void 0 && h(t), c?.(t), t.length === a && g.length !== a && l?.(t);
+				let t = e.target.value.split("").filter((e) => m.test(e)).join("").slice(0, l);
+				_.onChange?.(e), y(t), t.length === l && v.length !== l && p?.(t);
 			},
 			onFocus: (e) => {
-				p.onFocus?.(e), v(!0);
+				_.onFocus?.(e), w(!0);
 				let t = e.target.value.length;
 				e.target.setSelectionRange(t, t);
 			},
 			onBlur: (e) => {
-				p.onBlur?.(e), v(!1);
+				_.onBlur?.(e), w(!1);
 			},
 			className: "absolute inset-0 z-10 cursor-text font-mono text-transparent caret-transparent opacity-0 outline-hidden selection:bg-transparent disabled:cursor-not-allowed"
-		}), Array.from({ length: a }, (t, n) => {
-			let o = _ && (n === g.length || n === a - 1 && g.length === a);
-			return /* @__PURE__ */ i("span", {
+		}), Array.from({ length: l }, (t, n) => {
+			let r = C && (n === v.length || n === l - 1 && v.length === l);
+			return /* @__PURE__ */ c("span", {
 				"aria-hidden": !0,
-				className: e("glow-border bg-tint/[0.035] relative grid h-12 w-10 place-items-center rounded-lg border font-mono text-lg tabular-nums [--glow-border-color:oklch(var(--glow)/0.22)]", "transition-[border-color,box-shadow,background-color] duration-200", o && "border-glow/60 bg-tint/[0.05] shadow-glow-focus [--glow-border-color:transparent]", y["aria-invalid"] && "border-destructive/60"),
-				children: [g[n], o && n === g.length && /* @__PURE__ */ r("span", { className: "zen__code-caret bg-foreground absolute h-5 w-px" })]
+				className: e("glow-border bg-tint/[0.035] relative grid h-12 w-10 place-items-center rounded-lg border font-mono text-lg tabular-nums [--glow-border-color:oklch(var(--glow)/0.22)]", "transition-[border-color,box-shadow,background-color] duration-200", r && "border-glow/60 bg-tint/[0.05] shadow-glow-focus [--glow-border-color:transparent]", T["aria-invalid"] && "border-destructive/60"),
+				children: [v[n], r && n === v.length && /* @__PURE__ */ s("span", { className: "zen__code-caret bg-foreground absolute h-5 w-px" })]
 			}, n);
 		})]
 	});
 }
 //#endregion
-export { a as default };
+export { l as default };

package/dist/collapse/index.d.ts

@@ -1,5 +1,5 @@
 import { BadgeProps } from '../badge';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 /**
  * A row showing as many items as fit on one line, and the rest behind a "+N"
  * button that opens them in a popover. It measures the items as rendered (any
@@ -7,8 +7,9 @@ import { ReactNode } from 'react';
  * is the room it's given, not its items': size the row with className (e.g.
  * w-full, max-w-md, gap-1).
  */
-export default function Collapse<TData>({ items, data, children, moreLabel, badgeVariant, badgeClassName, className, }: CollapseProps<TData>): import('react').JSX.Element;
-export interface CollapseProps<TData> {
+export default function Collapse<TData>({ items, data, children, moreLabel, badgeVariant, badgeClassName, className, ref, ...rest }: CollapseProps<TData>): import('react').JSX.Element;
+/** Other props (data-*, an id) go on the row. */
+export interface CollapseProps<TData> extends Omit<ComponentProps<'div'>, 'children'> {
     items: string[];
     /** Extra data per item, passed to `children` with it. */
     data?: TData[];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/collapse/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAEhF;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,EACpC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAc,EACd,YAA0B,EAC1B,cAAc,EACd,SAAS,GACZ,EAAE,aAAa,CAAC,KAAK,CAAC,+BAqGtB;AAED,MAAM,WAAW,aAAa,CAAC,KAAK;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACf,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,SAAS,CAAC;IACvE,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACrC,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/collapse/index.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAI/C,OAAO,EAAE,cAAc,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAEhG;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,EACpC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAc,EACd,YAA0B,EAC1B,cAAc,EACd,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACV,EAAE,aAAa,CAAC,KAAK,CAAC,+BAwGtB;AAED,iDAAiD;AACjD,MAAM,WAAW,aAAa,CAAC,KAAK,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACjF,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;IACf,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,SAAS,CAAC;IACvE,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACrC,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/collapse/index.js

@@ -1,82 +1,85 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import t from "../badge/index.js";
-import n, { PopoverContent as r, PopoverTrigger as i } from "../popover/index.js";
-import { useEffect as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { useMessages as n } from "../locale-provider/index.js";
+import r from "../badge/index.js";
+import i, { PopoverContent as a, PopoverTrigger as o } from "../popover/index.js";
+import { useEffect as s, useLayoutEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region packages/collapse/index.tsx
-function d({ items: d, data: f, children: p, moreLabel: m = "", badgeVariant: h = "secondary", badgeClassName: g, className: _ }) {
-	let v = s(null), [y, b] = c(null), x = s({
+function p({ items: p, data: m, children: h, moreLabel: g = "", badgeVariant: _ = "secondary", badgeClassName: v, className: y, ref: b, ...x }) {
+	let S = n(), C = l(null), w = t(C, b), [T, E] = u(null), D = l({
 		items: [],
 		more: 0,
 		gap: 0
-	}), S = d.join("\0");
-	o(() => b(null), [S]), o(() => {
-		let e = v.current;
+	}), O = p.join("\0");
+	c(() => E(null), [O]), c(() => {
+		let e = C.current;
 		if (!e) return;
 		let t = () => {
-			let { items: t, more: n, gap: r } = x.current, i = e.clientWidth;
+			let { items: t, more: n, gap: r } = D.current, i = e.clientWidth;
 			if (t.reduce((e, t) => e + t, 0) + r * Math.max(0, t.length - 1) <= i) return t.length;
 			let a = n, o = 0;
 			for (; o < t.length && a + t[o] + r <= i;) a += t[o++] + r;
 			return o;
 		};
-		if (y === null) {
+		if (T === null) {
 			let n = Array.from(e.querySelectorAll(":scope > [data-collapse-item]")), r = e.querySelector(":scope > [data-collapse-more]");
-			x.current = {
+			D.current = {
 				items: n.map((e) => e.offsetWidth),
 				more: r?.offsetWidth ?? 0,
 				gap: parseFloat(getComputedStyle(e).columnGap) || 0
-			}, b(t());
+			}, E(t());
 			return;
 		}
 		if (typeof ResizeObserver > "u") return;
-		let n = new ResizeObserver(() => b(t()));
+		let n = new ResizeObserver(() => E(t()));
 		return n.observe(e), () => n.disconnect();
-	}, [y, S]), a(() => {
+	}, [T, O]), s(() => {
 		let e = !0;
-		return document.fonts?.ready.then(() => e && b(null)), () => {
+		return document.fonts?.ready.then(() => e && E(null)), () => {
 			e = !1;
 		};
 	}, []);
-	let C = y ?? d.length, w = d.slice(C), T = (e) => `+${e}${m ? ` ${m}` : ""}`;
-	return /* @__PURE__ */ u("div", {
-		ref: v,
-		className: e("zen__collapse flex min-w-0 items-center overflow-hidden [contain:inline-size]", _),
-		children: [d.slice(0, C).map((e, t) => /* @__PURE__ */ l("span", {
+	let k = T ?? p.length, A = p.slice(k), j = (e) => `+${e}${g ? ` ${g}` : ""}`;
+	return /* @__PURE__ */ f("div", {
+		...x,
+		ref: w,
+		className: e("zen__collapse flex min-w-0 items-center overflow-hidden [contain:inline-size]", y),
+		children: [p.slice(0, k).map((e, t) => /* @__PURE__ */ d("span", {
 			"data-collapse-item": !0,
 			className: "flex shrink-0",
-			children: p(e, t, f?.[t])
-		}, e)), y === null ? /* @__PURE__ */ l("span", {
+			children: h(e, t, m?.[t])
+		}, e)), T === null ? /* @__PURE__ */ d("span", {
 			"data-collapse-more": !0,
 			"aria-hidden": !0,
 			className: "invisible flex shrink-0",
-			children: /* @__PURE__ */ l(t, {
-				variant: h,
-				className: g,
-				children: T(d.length)
+			children: /* @__PURE__ */ d(r, {
+				variant: _,
+				className: v,
+				children: j(p.length)
 			})
-		}) : w.length > 0 && /* @__PURE__ */ u(n, { children: [/* @__PURE__ */ l(i, {
+		}) : A.length > 0 && /* @__PURE__ */ f(i, { children: [/* @__PURE__ */ d(o, {
 			"data-collapse-more": !0,
 			onClick: (e) => e.stopPropagation(),
 			className: "flex shrink-0 rounded-md",
-			"aria-label": `Show ${T(w.length).slice(1)}`,
-			children: /* @__PURE__ */ l(t, {
-				variant: h,
-				className: e("cursor-pointer", g),
-				children: T(w.length)
+			"aria-label": S.showMore(j(A.length).slice(1)),
+			children: /* @__PURE__ */ d(r, {
+				variant: _,
+				className: e("cursor-pointer", v),
+				children: j(A.length)
 			})
-		}), /* @__PURE__ */ l(r, {
-			"aria-label": T(w.length).slice(1),
-			children: /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ d(a, {
+			"aria-label": j(A.length).slice(1),
+			children: /* @__PURE__ */ d("div", {
 				className: "grid max-h-60 grid-flow-row grid-cols-2 gap-3 overflow-auto p-2",
-				children: w.map((e, t) => /* @__PURE__ */ l("span", {
+				children: A.map((e, t) => /* @__PURE__ */ d("span", {
 					className: "flex",
-					children: p(e, C + t, f?.[C + t])
+					children: h(e, k + t, m?.[k + t])
 				}, e))
 			})
 		})] })]
 	});
 }
 //#endregion
-export { d as default };
+export { p as default };

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

@@ -0,0 +1,43 @@
+import { FieldSize } from '../utils/styles';
+import { ComponentProps } from 'react';
+/**
+ * Everything ColorPicker opens: a saturation and brightness area, hue and
+ * alpha sliders, the hex, and your swatches. Use it inline, or in a popup of
+ * your own. Values are hex: "#rrggbb", or "#rrggbbaa" with `alpha`.
+ */
+export declare function ColorPanel({ value: valueProp, defaultValue, onValueChange, onValueCommit, alpha, swatches, className, ...rest }: ColorPanelProps): import('react').JSX.Element;
+/**
+ * A field showing a colour and its hex that opens a ColorPanel: drag or use
+ * the arrow keys in the area, slide the hue (and opacity, with `alpha`), type
+ * a hex or pick a swatch. Works in a Field like any input.
+ */
+export default function ColorPicker({ value: valueProp, defaultValue, onValueChange, onValueCommit, alpha, swatches, name, size, id, disabled, className, style, ...rest }: ColorPickerProps): import('react').JSX.Element;
+export interface ColorSwatch {
+    label: string;
+    /** Hex, like the picker's value. */
+    value: string;
+}
+interface ColorValueProps {
+    /** "#rrggbb", or "#rrggbbaa" with `alpha`, when you keep it. */
+    value?: string;
+    /** The first colour, when the picker keeps its own. Black by default. */
+    defaultValue?: string;
+    /** Every change, while dragging too. */
+    onValueChange?: (value: string) => void;
+    /** Once a change is made: let go of the area or a slider, a key, a hex entered, a swatch picked. */
+    onValueCommit?: (value: string) => void;
+    /** Offer opacity; values may then be "#rrggbbaa". */
+    alpha?: boolean;
+    /** Colours to pick in one press, such as your theme's. */
+    swatches?: ColorSwatch[];
+}
+export interface ColorPanelProps extends ColorValueProps, Omit<ComponentProps<'div'>, 'defaultValue'> {
+}
+export interface ColorPickerProps extends ColorValueProps, Omit<ComponentProps<'button'>, 'value' | 'defaultValue'> {
+    /** Form field name: the hex is submitted with the form. */
+    name?: string;
+    /** Height, matching Button's: sm (32px), default (40px) or lg (44px). */
+    size?: FieldSize;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/color-picker/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAc,KAAK,SAAS,EAAgC,MAAM,mBAAmB,CAAC;AAE7F,OAAO,EAAE,cAAc,EAAgD,MAAM,OAAO,CAAC;AAmBrF;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EAAE,SAAS,EAChB,YAAwB,EACxB,aAAa,EACb,aAAa,EACb,KAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,eAAe,+BAkJjB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EAAE,SAAS,EAChB,YAAwB,EACxB,aAAa,EACb,aAAa,EACb,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,IAAgB,EAChB,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,gBAAgB,+BAmDlB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,eAAe;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,oGAAoG;IACpG,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;CAAG;AAExG,MAAM,WAAW,gBAAiB,SAAQ,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAC/G,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB"}

package/dist/color-picker/index.js

@@ -0,0 +1,221 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useControllable as t } from "../utils/useControllable.js";
+import { useAnchoredPopup as n } from "../utils/useAnchoredPopup.js";
+import { useMessages as r } from "../locale-provider/index.js";
+import { useFieldProps as i } from "../field/index.js";
+import { FIELD_SIZE as a, POPUP as o, TRIGGER as s } from "../utils/styles.js";
+import c from "../input/index.js";
+import { FormValue as l } from "../utils/form-value.js";
+import u from "../slider/index.js";
+import { hexToHsv as d, hsvToHex as f } from "../utils/color.js";
+import { FieldChevron as p } from "../utils/field-chevron.js";
+import { useId as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region packages/color-picker/index.tsx
+var y = {
+	h: 0,
+	s: 0,
+	v: 0,
+	a: 1
+}, b = "repeating-conic-gradient(#9ca3af 0 25%, #f3f4f6 0 50%) 0 0 / 8px 8px", x = `linear-gradient(to right, ${[
+	0,
+	60,
+	120,
+	180,
+	240,
+	300,
+	360
+].map((e) => `hsl(${e} 100% 50%)`).join(", ")})`, S = (e) => Math.round(e * 100), C = {
+	ArrowLeft: [-1, 0],
+	ArrowRight: [1, 0],
+	ArrowDown: [0, -1],
+	ArrowUp: [0, 1]
+};
+function w(e, t) {
+	let n = d(e);
+	return n ? f(t ? n : {
+		...n,
+		a: 1
+	}) : null;
+}
+function T({ value: n, defaultValue: i = "#000000", onValueChange: a, onValueCommit: o, alpha: s = !1, swatches: l, className: p, ...g }) {
+	let T = r(), [E, D] = t(n, i, a), O = m(), [k, A] = h(() => d(E) ?? y), [j, M] = h(E);
+	if (E !== j) {
+		M(E);
+		let e = w(E, s);
+		e && e !== f(k) && A(d(e));
+	}
+	let N = f(k), P = f({
+		...k,
+		a: 1
+	}), [F, I] = h(null), L = (e) => {
+		let t = {
+			...k,
+			...e
+		};
+		return s || (t.a = 1), A(t), D(f(t)), f(t);
+	}, R = (e = N) => o?.(e), z = (e) => {
+		let t = e.currentTarget.getBoundingClientRect(), n = Math.min(1, Math.max(0, (e.clientX - t.left) / t.width)), r = 1 - Math.min(1, Math.max(0, (e.clientY - t.top) / t.height));
+		return L({
+			s: n,
+			v: r
+		});
+	}, B = (e) => {
+		let t = C[e.key];
+		if (!t) return;
+		e.preventDefault();
+		let n = (e.shiftKey ? 10 : 1) / 100, r = (e) => Math.min(1, Math.max(0, Math.round((e + 2 ** -52) * 100) / 100));
+		R(L({
+			s: r(k.s + t[0] * n),
+			v: r(k.v + t[1] * n)
+		}));
+	}, V = () => {
+		if (F === null) return;
+		let e = w(F.startsWith("#") ? F : `#${F}`, s);
+		I(null), e && e !== N && (A(d(e)), D(e), R(e));
+	};
+	return /* @__PURE__ */ v("div", {
+		className: e("zen__color-panel flex w-64 flex-col gap-3", p),
+		...g,
+		children: [
+			/* @__PURE__ */ _("div", {
+				role: "slider",
+				tabIndex: 0,
+				"aria-label": T.saturationBrightness,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": S(k.s),
+				"aria-valuetext": T.saturationBrightnessValue(S(k.s), S(k.v)),
+				onPointerDown: (e) => {
+					e.button === 0 && (e.currentTarget.setPointerCapture?.(e.pointerId), e.currentTarget.focus(), z(e));
+				},
+				onPointerMove: (e) => e.currentTarget.hasPointerCapture?.(e.pointerId) && z(e),
+				onPointerUp: (e) => R(z(e)),
+				onKeyDown: B,
+				style: { background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${k.h} 100% 50%))` },
+				className: "focus-ring relative h-40 cursor-crosshair touch-none rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.1)] outline-hidden",
+				children: /* @__PURE__ */ _("span", {
+					"aria-hidden": !0,
+					style: {
+						left: `${k.s * 100}%`,
+						top: `${(1 - k.v) * 100}%`,
+						background: P
+					},
+					className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_12px_oklch(0_0_0/0.35)]"
+				})
+			}),
+			/* @__PURE__ */ _(u, {
+				"aria-label": T.hue,
+				min: 0,
+				max: 359,
+				value: Math.round(k.h),
+				onValueChange: (e) => L({ h: e }),
+				onValueCommit: () => R(),
+				trackBackground: x,
+				thumbColor: `hsl(${k.h} 100% 50%)`,
+				valueText: T.hueValue
+			}),
+			s && /* @__PURE__ */ _(u, {
+				"aria-label": T.opacity,
+				min: 0,
+				max: 100,
+				value: S(k.a),
+				onValueChange: (e) => L({ a: e / 100 }),
+				onValueCommit: () => R(),
+				trackBackground: `linear-gradient(to right, transparent, ${P}), ${b}`,
+				thumbColor: P,
+				valueText: T.opacityValue
+			}),
+			/* @__PURE__ */ _(c, {
+				"aria-label": T.hex,
+				spellCheck: !1,
+				autoComplete: "off",
+				value: F ?? N,
+				onChange: (e) => I(e.target.value),
+				onBlur: V,
+				onKeyDown: (e) => e.key === "Enter" && V(),
+				className: "h-9 font-mono tabular-nums"
+			}),
+			l && l.length > 0 && /* @__PURE__ */ v("fieldset", {
+				className: "flex flex-wrap gap-1.5",
+				children: [/* @__PURE__ */ _("legend", {
+					className: "sr-only",
+					children: T.swatches
+				}), l.map((e) => {
+					let t = w(e.value, s);
+					return /* @__PURE__ */ v("label", {
+						title: e.label,
+						className: "relative cursor-pointer",
+						children: [/* @__PURE__ */ _("input", {
+							type: "radio",
+							name: O,
+							"aria-label": e.label,
+							checked: t === N,
+							onChange: () => {
+								t && (A(d(t)), D(t), R(t));
+							},
+							className: "peer sr-only"
+						}), /* @__PURE__ */ _("span", {
+							"aria-hidden": !0,
+							style: { background: `linear-gradient(${e.value}, ${e.value}), ${b}` },
+							className: "ring-offset-background peer- peer-checked:ring-foreground/70 peer-focus-ring block size-6 rounded-full shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.12)] ring-offset-2 transition-shadow peer-checked:ring-2"
+						})]
+					}, e.value);
+				})]
+			})
+		]
+	});
+}
+function E({ value: c, defaultValue: u = "#000000", onValueChange: d, onValueCommit: f, alpha: m, swatches: h, name: y, size: x = "default", id: S, disabled: C, className: w, style: E, ...D }) {
+	let O = r(), [k, A, j] = t(c, u, d), M = n(), N = i({
+		...D,
+		id: S
+	});
+	return /* @__PURE__ */ v(g, { children: [
+		/* @__PURE__ */ v("button", {
+			type: "button",
+			...D,
+			...N,
+			id: S,
+			disabled: C,
+			...M.triggerProps,
+			style: {
+				...M.triggerProps.style,
+				...E
+			},
+			className: e("zen__color-picker group", s, a[x], "w-full", M.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", w),
+			children: [/* @__PURE__ */ v("span", {
+				className: "flex min-w-0 items-center gap-2.5",
+				children: [/* @__PURE__ */ _("span", {
+					"aria-hidden": !0,
+					style: { background: `linear-gradient(${k}, ${k}), ${b}` },
+					className: "size-5 shrink-0 rounded-md shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.15)]"
+				}), /* @__PURE__ */ _("span", {
+					className: "truncate font-mono tabular-nums",
+					children: k
+				})]
+			}), /* @__PURE__ */ _(p, { open: M.open })]
+		}),
+		/* @__PURE__ */ _(l, {
+			name: y,
+			value: k,
+			onReset: j
+		}),
+		/* @__PURE__ */ _("div", {
+			...M.popupProps,
+			role: "dialog",
+			"aria-label": O.chooseColour,
+			className: e("zen__popover", o, "p-3"),
+			children: /* @__PURE__ */ _(T, {
+				value: k,
+				onValueChange: A,
+				onValueCommit: f,
+				alpha: m,
+				swatches: h
+			})
+		})
+	] });
+}
+//#endregion
+export { T as ColorPanel, E as default };

package/dist/combobox/index.d.ts

@@ -1,3 +1,4 @@
+import { FieldSize } from '../utils/styles';
 import { ComponentProps, ReactNode } from 'react';
 /**
  * Pick one or several items from a list you can search: a field that opens a
@@ -13,14 +14,14 @@ export default function Combobox<T>(props: ComboboxProps<T>): import('react').JS
  * The field: shows the choice (text, or chips when `multiple`) or the
  * placeholder, and opens the panel. Pass children to show the value your own way.
  */
-export declare function ComboboxTrigger({ placeholder, disabled, className, style, children, ...rest }: ComboboxTriggerProps): import('react').JSX.Element;
+export declare function ComboboxTrigger({ placeholder: placeholderProp, disabled, size, className, style, children, ...rest }: ComboboxTriggerProps): import('react').JSX.Element;
 /** The panel under the field. Put ComboboxSearch and ComboboxList in it. */
 export declare function ComboboxPopup({ className, children }: {
     className?: string;
     children: ReactNode;
 }): import('react').JSX.Element;
 /** The search box: focused when the panel opens; ↑↓ move through the matches and Enter chooses. */
-export declare function ComboboxSearch({ placeholder, 'aria-label': ariaLabel, }: ComboboxSearchProps): import('react').JSX.Element;
+export declare function ComboboxSearch({ placeholder, 'aria-label': ariaLabel }: ComboboxSearchProps): import('react').JSX.Element;
 /**
  * The matching items, rendered only while in view (so thousands stay fast).
  * Rows are `itemHeight` px tall; `renderItem` draws each (default: a
@@ -48,21 +49,28 @@ interface ComboboxBaseProps<T> {
     filter?: (item: T, query: string) => boolean;
     /** Chosen items that aren't in `items` (e.g. just created), so the field can still show them. */
     selectedItems?: readonly T[];
+    /** Form field name: the chosen key is submitted with the form (with `multiple`, each key). */
+    name?: string;
     children: ReactNode;
 }
+/** `value` when you keep the choice; `defaultValue` for the first one when the combobox keeps its own. */
 export type ComboboxProps<T> = ComboboxBaseProps<T> & ({
     multiple?: false;
-    value: string | null;
-    onValueChange: (key: string) => void;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (key: string) => void;
 } | {
     multiple: true;
-    value: readonly string[];
-    onValueChange: (keys: string[]) => void;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (keys: string[]) => void;
 });
 export interface ComboboxTriggerProps extends Omit<ComponentProps<'div'>, 'children'> {
     /** Shown while nothing is chosen. */
     placeholder?: string;
     disabled?: boolean;
+    /** Height, matching Button's: sm (32px), default (40px) or lg (44px). */
+    size?: FieldSize;
     /** Your own display of the value (default: its text, or chips). */
     children?: ReactNode;
 }