@rinzai/zen 0.11.0 → 0.13.0

package/dist/code-block/index.js

@@ -1,38 +1,40 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useCopyToClipboard as t } from "../utils/useCopyToClipboard.js";
-import { useEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a, jsxs as o } 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 s({ code: s, language: c, highlight: l, copyable: u = !0, variant: d = "glass", className: f, ...p }) {
-	let m = s.trim(), { copy: h, copied: g } = t(), _ = r(null), [v, y] = i(!1);
-	return n(() => {
-		let e = _.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(() => y(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__ */ o("div", {
-		className: e("zen__code-block group relative flex flex-col", d === "glass" && "glass glow-edge overflow-hidden rounded-xl", f),
-		"data-language": c,
-		...p,
-		children: [/* @__PURE__ */ a("pre", {
-			ref: _,
-			tabIndex: v ? 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: l ? /* @__PURE__ */ a("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: l(m, c) }
-			}) : /* @__PURE__ */ a("code", {
+				dangerouslySetInnerHTML: { __html: u(g, l) }
+			}) : /* @__PURE__ */ o("code", {
 				className: "bg-transparent! p-0! text-inherit!",
-				children: m
+				children: g
 			})
-		}), u && /* @__PURE__ */ a("button", {
+		}), d && /* @__PURE__ */ o("button", {
 			type: "button",
-			onClick: () => h(m),
-			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", g && "text-primary opacity-100"),
-			children: g ? "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 { s 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

@@ -1,26 +1,29 @@
+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, onChange, onValueCommit, alpha, swatches, className, ...rest }: ColorPanelProps): import('react').JSX.Element;
+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, onChange, onValueCommit, alpha, swatches, id, disabled, className, style, ...rest }: ColorPickerProps): import('react').JSX.Element;
+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`. */
-    value: string;
+    /** "#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. */
-    onChange: (value: string) => void;
+    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". */
@@ -28,9 +31,13 @@ interface ColorValueProps {
     /** Colours to pick in one press, such as your theme's. */
     swatches?: ColorSwatch[];
 }
-export interface ColorPanelProps extends ColorValueProps, Omit<ComponentProps<'div'>, 'onChange'> {
+export interface ColorPanelProps extends ColorValueProps, Omit<ComponentProps<'div'>, 'defaultValue'> {
 }
-export interface ColorPickerProps extends ColorValueProps, Omit<ComponentProps<'button'>, 'value' | 'onChange'> {
+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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/color-picker/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAgD,MAAM,OAAO,CAAC;AAmBrF;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACV,EAAE,eAAe,+BAgJjB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,aAAa,EACb,KAAK,EACL,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,gBAAgB,+BAyClB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,eAAe;IACrB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,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,UAAU,CAAC;CAAG;AAEpG,MAAM,WAAW,gBAAiB,SAAQ,eAAe,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CAAG"}
+{"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"}