@rinzai/zen 0.7.4 → 0.8.0

package/dist/combobox/index.js

@@ -3,31 +3,31 @@ import { cx as e } from "../utils/cx.js";
 import { anchoredStyle as t, useAnchoredPopup as n } from "../utils/useAnchoredPopup.js";
 import r from "../badge/index.js";
 import i from "../button/index.js";
-import { POPUP as a, TRIGGER as o } from "../utils/styles.js";
-import s from "../collapse/index.js";
-import { CheckIcon as c } from "../utils/status-icons.js";
-import { useField as l } from "../field/index.js";
-import u from "../icons/search.js";
-import d from "../icons/x-mark.js";
-import { InputGroupAddon as f, InputGroupInput as p } from "../input-group/index.js";
-import { FieldChevron as m } from "../utils/field-chevron.js";
-import { useVirtualList as h } from "../utils/useVirtualList.js";
-import { createContext as g, useContext as _, useEffect as v, useMemo as y, useRef as b, useState as x } from "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { PLACEHOLDER as a, POPUP as o, TRIGGER as s } from "../utils/styles.js";
+import c from "../collapse/index.js";
+import { CheckIcon as l } from "../utils/status-icons.js";
+import { useField as u } from "../field/index.js";
+import d from "../icons/search.js";
+import f from "../icons/x-mark.js";
+import { InputGroupAddon as p, InputGroupInput as m } from "../input-group/index.js";
+import { FieldChevron as h } from "../utils/field-chevron.js";
+import { useVirtualList as g } from "../utils/useVirtualList.js";
+import { createContext as _, useContext as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region packages/combobox/index.tsx
-var T = g(null), E = () => {
-	let e = _(T);
+var E = _(null), D = () => {
+	let e = v(E);
 	if (!e) throw Error("Combobox parts must be inside a Combobox");
 	return e;
 };
-function D(e) {
-	let { items: t, itemKey: r = (e) => e.key, itemText: i = (e) => e.text, filter: a = (e, t) => i(e).toLowerCase().includes(t.toLowerCase()), selectedItems: o = [], children: s } = e, c = e.multiple === !0, l = c ? e.value : e.value === null ? [] : [e.value], [u, d] = x(""), [f, p] = x(null), m = b(null), h = b(null), g = b(null), _ = b(35), v = y(() => u ? t.filter((e) => a(e, u)) : t, [
+function O(e) {
+	let { items: t, itemKey: r = (e) => e.key, itemText: i = (e) => e.text, filter: a = (e, t) => i(e).toLowerCase().includes(t.toLowerCase()), selectedItems: o = [], children: s } = e, c = e.multiple === !0, l = c ? e.value : e.value === null ? [] : [e.value], [u, d] = S(""), [f, p] = S(null), m = x(null), h = x(null), g = x(null), _ = x(35), v = b(() => u ? t.filter((e) => a(e, u)) : t, [
 		t,
 		u,
 		a
-	]), S = n({ onOpenChange: (e) => {
-		e || (p(null), d(""), S.popupRef.current?.contains(document.activeElement) && h.current?.focus());
-	} }), w = {
+	]), y = n({ onOpenChange: (e) => {
+		e || (p(null), d(""), y.popupRef.current?.contains(document.activeElement) && h.current?.focus());
+	} }), C = {
 		multiple: c,
 		keyOf: r,
 		textOf: i,
@@ -39,83 +39,83 @@ function D(e) {
 			if (e.multiple === !0) {
 				let n = e.value.includes(t);
 				e.onValueChange(n ? e.value.filter((e) => e !== t) : [...e.value, t]);
-			} else e.onValueChange(t), S.setOpen(!1);
+			} else e.onValueChange(t), y.setOpen(!1);
 		},
 		query: u,
 		setQuery: d,
 		active: f,
 		setActive: p,
 		create: m,
-		popup: S,
+		popup: y,
 		triggerRef: h,
 		listRef: g,
-		optionId: (e) => `${S.id}-option-${e}`,
+		optionId: (e) => `${y.id}-option-${e}`,
 		itemHeight: _
 	};
-	return /* @__PURE__ */ C(T.Provider, {
-		value: w,
+	return /* @__PURE__ */ w(E.Provider, {
+		value: C,
 		children: s
 	});
 }
-function O({ placeholder: t = "Select an Item", disabled: n, className: r, style: i, children: a, ...s }) {
-	let c = E(), { popup: u } = c, d = l(), f = b(!1), p = () => !n && u.setOpen(!0);
-	return /* @__PURE__ */ w("div", {
+function k({ placeholder: t = "Select an Item", disabled: n, className: r, style: i, children: a, ...o }) {
+	let c = D(), { popup: l } = c, d = u(), f = x(!1), p = () => !n && l.setOpen(!0);
+	return /* @__PURE__ */ T("div", {
 		id: d?.id,
-		"aria-labelledby": s["aria-label"] ? void 0 : d?.labelId,
+		"aria-labelledby": o["aria-label"] ? void 0 : d?.labelId,
 		"aria-invalid": d?.["aria-invalid"],
-		...s,
-		"aria-describedby": e(d?.["aria-describedby"], s["aria-describedby"]).trim() || void 0,
+		...o,
+		"aria-describedby": e(d?.["aria-describedby"], o["aria-describedby"]).trim() || void 0,
 		ref: c.triggerRef,
 		role: "combobox",
 		tabIndex: n ? -1 : 0,
 		"aria-haspopup": "listbox",
-		"aria-expanded": u.open,
-		"aria-controls": u.id,
+		"aria-expanded": l.open,
+		"aria-controls": l.id,
 		"aria-disabled": n || void 0,
-		"data-popup-open": u.triggerProps["data-popup-open"],
-		"data-zen-anchor": u.triggerProps["data-zen-anchor"],
+		"data-popup-open": l.triggerProps["data-popup-open"],
+		"data-zen-anchor": l.triggerProps["data-zen-anchor"],
 		style: {
-			...u.triggerProps.style,
+			...l.triggerProps.style,
 			...i
 		},
 		onPointerDown: (e) => {
-			s.onPointerDown?.(e), f.current = u.open;
+			o.onPointerDown?.(e), f.current = l.open;
 		},
 		onClick: (e) => {
-			s.onClick?.(e), e.preventDefault(), f.current ? u.setOpen(!1) : p(), f.current = !1;
+			o.onClick?.(e), e.preventDefault(), f.current ? l.setOpen(!1) : p(), f.current = !1;
 		},
 		onKeyDown: (e) => {
-			s.onKeyDown?.(e), [
+			o.onKeyDown?.(e), [
 				"Enter",
 				" ",
 				"ArrowDown"
 			].includes(e.key) && (e.preventDefault(), p());
 		},
-		className: e(o, "w-56 shrink-0", n ? "cursor-not-allowed opacity-50" : "cursor-pointer", u.open && "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", r),
-		children: [/* @__PURE__ */ C("div", {
+		className: e(s, "w-56 shrink-0", n ? "cursor-not-allowed opacity-50" : "cursor-pointer", l.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", r),
+		children: [/* @__PURE__ */ w("div", {
 			className: e("flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-sm", n ? "text-muted-foreground" : "text-foreground"),
-			children: a ?? /* @__PURE__ */ C(k, { placeholder: t })
-		}), /* @__PURE__ */ C(m, { open: u.open })]
+			children: a ?? /* @__PURE__ */ w(A, { placeholder: t })
+		}), /* @__PURE__ */ w(h, { open: l.open })]
 	});
 }
-function k({ placeholder: e }) {
-	let t = E(), n = new Map([...t.selectedItems, ...t.items].map((e) => [t.keyOf(e), e])), a = t.chosen.flatMap((e) => {
+function A({ placeholder: e }) {
+	let t = D(), n = new Map([...t.selectedItems, ...t.items].map((e) => [t.keyOf(e), e])), o = t.chosen.flatMap((e) => {
 		let r = n.has(e) ? t.textOf(n.get(e)) : void 0;
 		return r ? [{
 			key: e,
 			text: r
 		}] : [];
 	});
-	return a.length ? t.multiple ? /* @__PURE__ */ C(s, {
-		items: a.map((e) => e.text),
-		data: a,
+	return o.length ? t.multiple ? /* @__PURE__ */ w(c, {
+		items: o.map((e) => e.text),
+		data: o,
 		badgeVariant: "secondary",
 		badgeClassName: "h-6 min-w-min gap-2",
 		className: "w-full gap-1",
-		children: (e, n, a) => /* @__PURE__ */ w(r, {
+		children: (e, n, a) => /* @__PURE__ */ T(r, {
 			className: "flex h-6 min-w-min gap-2 pr-1",
 			variant: "secondary",
-			children: [e, /* @__PURE__ */ C(i, {
+			children: [e, /* @__PURE__ */ w(i, {
 				"aria-label": `Remove ${e}`,
 				onClick: (e) => {
 					e.stopPropagation(), a && t.toggle(a.key);
@@ -123,38 +123,38 @@ function k({ placeholder: e }) {
 				variant: "icon",
 				size: "icon",
 				className: "group relative -top-px size-4 rounded-sm p-0.5",
-				children: /* @__PURE__ */ C(d, { className: "size-3 transition duration-300 group-hover:rotate-90" })
+				children: /* @__PURE__ */ w(f, { className: "zen__combobox-remove-icon size-3 transition duration-300 group-hover:rotate-90" })
 			})]
 		}, a?.key ?? n)
-	}) : /* @__PURE__ */ C(S, { children: a[0].text }) : /* @__PURE__ */ C("span", {
-		className: t.multiple ? "text-muted-foreground" : void 0,
+	}) : /* @__PURE__ */ w(C, { children: o[0].text }) : /* @__PURE__ */ w("span", {
+		className: a,
 		children: e
 	});
 }
-function A({ className: n, children: r }) {
-	let { popup: i } = E();
-	return /* @__PURE__ */ C("div", {
+function j({ className: n, children: r }) {
+	let { popup: i } = D();
+	return /* @__PURE__ */ w("div", {
 		...i.popupProps,
 		style: t(i.id, {
 			offset: 5,
 			width: "match"
 		}),
-		className: e("zen__popover", a, "overflow-visible p-0", n),
-		children: /* @__PURE__ */ C("div", {
+		className: e("zen__popover", o, "overflow-visible p-0", n),
+		children: /* @__PURE__ */ w("div", {
 			className: "divide-tint/10 flex w-full flex-col divide-y overflow-hidden rounded-xl",
 			children: r
 		})
 	});
 }
-function j({ placeholder: e = "Search", "aria-label": t = "Search options" }) {
-	let n = E(), r = b(null);
-	v(() => {
+function M({ placeholder: e = "Search", "aria-label": t = "Search options" }) {
+	let n = D(), r = x(null);
+	y(() => {
 		n.popup.open && r.current?.focus();
 	}, [n.popup.open]);
 	let i = n.matches.map(n.keyOf);
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ T("div", {
 		className: "flex h-10 grow items-center gap-2 px-3",
-		children: [/* @__PURE__ */ C(f, { children: /* @__PURE__ */ C(u, {}) }), /* @__PURE__ */ C(p, {
+		children: [/* @__PURE__ */ w(p, { children: /* @__PURE__ */ w(d, {}) }), /* @__PURE__ */ w(m, {
 			ref: r,
 			placeholder: e,
 			"aria-label": t,
@@ -168,35 +168,35 @@ function j({ placeholder: e = "Search", "aria-label": t = "Search options" }) {
 				let t = n.active === null ? -1 : i.indexOf(n.active), r = (t) => {
 					if (e.preventDefault(), !i.length) return;
 					let r = i[(t + i.length) % i.length];
-					n.setActive(r), M(n.listRef.current, i.indexOf(r), n.itemHeight.current);
+					n.setActive(r), N(n.listRef.current, i.indexOf(r), n.itemHeight.current);
 				};
 				e.key === "ArrowDown" ? r(t + 1) : e.key === "ArrowUp" ? r(t === -1 ? i.length - 1 : t - 1) : e.key === "Enter" && (e.preventDefault(), n.active === null ? !i.length && n.query && n.create.current && (n.create.current(n.query), n.setQuery("")) : n.toggle(n.active));
 			}
 		})]
 	});
 }
-var M = (e, t, n) => {
+var N = (e, t, n) => {
 	if (!e || t < 0) return;
 	let r = t * n;
 	r < e.scrollTop ? e.scrollTop = r : r + n > e.scrollTop + e.clientHeight && (e.scrollTop = r + n - e.clientHeight);
-}, N = g(null);
-function P({ renderItem: e, itemHeight: t = 35, children: n }) {
-	let r = E();
+}, P = _(null);
+function F({ renderItem: e, itemHeight: t = 35, children: n }) {
+	let r = D();
 	r.itemHeight.current = t;
-	let i = h({
+	let i = g({
 		count: r.matches.length,
 		itemHeight: t,
 		scrollRef: r.listRef
 	});
-	return v(() => {
+	return y(() => {
 		r.listRef.current && (r.listRef.current.scrollTop = 0);
-	}, [r.query, r.listRef]), /* @__PURE__ */ w("ul", {
+	}, [r.query, r.listRef]), /* @__PURE__ */ T("ul", {
 		id: `${r.popup.id}-list`,
 		role: "listbox",
 		"aria-multiselectable": r.multiple || void 0,
 		className: "max-h-72 grow overflow-y-auto py-1 focus:ring-0 focus:outline-hidden",
 		ref: r.listRef,
-		children: [/* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ w("div", {
 			style: {
 				height: `${i.totalSize}px`,
 				width: "100%",
@@ -204,20 +204,20 @@ function P({ renderItem: e, itemHeight: t = 35, children: n }) {
 			},
 			children: i.items.map((t) => {
 				let n = r.matches[t.index];
-				return /* @__PURE__ */ C(N.Provider, {
+				return /* @__PURE__ */ w(P.Provider, {
 					value: {
 						start: t.start,
 						size: t.size
 					},
-					children: e ? e(n) : /* @__PURE__ */ C(F, { item: n })
+					children: e ? e(n) : /* @__PURE__ */ w(I, { item: n })
 				}, r.keyOf(n));
 			})
 		}), n]
 	});
 }
-function F({ item: t, className: n, children: r }) {
-	let i = E(), a = _(N), o = i.keyOf(t), s = i.chosen.includes(o);
-	return /* @__PURE__ */ w("li", {
+function I({ item: t, className: n, children: r }) {
+	let i = D(), a = v(P), o = i.keyOf(t), s = i.chosen.includes(o);
+	return /* @__PURE__ */ T("li", {
 		id: i.optionId(o),
 		role: "option",
 		"aria-selected": s,
@@ -229,28 +229,28 @@ function F({ item: t, className: n, children: r }) {
 		onMouseMove: () => i.active !== o && i.setActive(o),
 		onClick: () => i.toggle(o),
 		className: e("hover:bg-muted data-highlighted:bg-muted grid w-full cursor-pointer grid-cols-[1rem_1fr] items-center gap-2 px-3 py-2 text-sm outline-hidden select-none", a && "absolute top-0 left-0", n),
-		children: [/* @__PURE__ */ C("span", {
+		children: [/* @__PURE__ */ w("span", {
 			className: "text-primary col-start-1",
 			"aria-hidden": !0,
-			children: s && /* @__PURE__ */ C(c, {})
-		}), /* @__PURE__ */ C("span", {
+			children: s && /* @__PURE__ */ w(l, {})
+		}), /* @__PURE__ */ w("span", {
 			className: "col-start-2 truncate",
 			children: r ?? i.textOf(t)
 		})]
 	});
 }
-function I({ children: e = "No results found" }) {
-	let t = E();
-	return !t.query || t.matches.length ? null : /* @__PURE__ */ C("li", {
+function L({ children: e = "No results found" }) {
+	let t = D();
+	return !t.query || t.matches.length ? null : /* @__PURE__ */ w("li", {
 		className: "text-muted-foreground cursor-not-allowed px-3 py-2 text-sm",
 		children: e
 	});
 }
-function L({ onCreate: e, children: t = (e) => `Add ${e}` }) {
-	let n = E(), { create: r } = n;
-	return v(() => (r.current = e, () => {
+function R({ onCreate: e, children: t = (e) => `Add ${e}` }) {
+	let n = D(), { create: r } = n;
+	return y(() => (r.current = e, () => {
 		r.current = null;
-	}), [r, e]), !n.query || n.matches.length ? null : /* @__PURE__ */ C("li", {
+	}), [r, e]), !n.query || n.matches.length ? null : /* @__PURE__ */ w("li", {
 		role: "option",
 		"aria-selected": !1,
 		className: "hover:bg-muted cursor-pointer px-3 py-2 text-sm select-none",
@@ -261,4 +261,4 @@ function L({ onCreate: e, children: t = (e) => `Add ${e}` }) {
 	});
 }
 //#endregion
-export { L as ComboboxCreate, I as ComboboxEmpty, F as ComboboxItem, P as ComboboxList, A as ComboboxPopup, j as ComboboxSearch, O as ComboboxTrigger, D as default };
+export { R as ComboboxCreate, L as ComboboxEmpty, I as ComboboxItem, F as ComboboxList, j as ComboboxPopup, M as ComboboxSearch, k as ComboboxTrigger, O as default };

package/dist/date-picker/index.js

@@ -71,9 +71,9 @@ function m({ shown: a, placeholder: o, label: s, calendar: c, onClear: f, clearL
 			...b.triggerProps.style,
 			...v
 		},
-		className: e("zen__date-picker group", r, "w-full", b.open && "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", g),
+		className: e("zen__date-picker group", r, "w-full", b.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", g),
 		children: [/* @__PURE__ */ u("span", {
-			className: e("truncate", !a && "text-muted-foreground"),
+			className: e("truncate", !a && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
 			children: a ?? o
 		}), /* @__PURE__ */ u(h, {})]
 	}), /* @__PURE__ */ d("div", {

package/dist/dialog/index.js

@@ -24,7 +24,7 @@ function f({ open: n, onOpenChange: i, title: a, description: f, children: p, di
 		"aria-labelledby": x,
 		"aria-describedby": f ? S : void 0,
 		"data-side": _,
-		className: e("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !_ && "m-auto max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] rounded-xl", !_ && (g === "lg" ? "w-[60rem]" : "w-[28rem]"), _ === "bottom" && "mx-auto mt-auto mb-0 max-h-[85dvh] w-full max-w-2xl rounded-t-2xl", (_ === "left" || _ === "right") && "my-0 h-dvh max-h-dvh w-[24rem] max-w-[calc(100vw-2.5rem)]", _ === "right" && "mr-0 ml-auto rounded-l-2xl", _ === "left" && "mr-auto ml-0 rounded-r-2xl", "backdrop:bg-black/50 backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", v),
+		className: e("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !_ && "m-auto max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] rounded-xl", !_ && (g === "lg" ? "w-[60rem]" : "w-[28rem]"), _ === "bottom" && "mx-auto mt-auto mb-0 max-h-[85dvh] w-full max-w-2xl rounded-t-2xl", (_ === "left" || _ === "right") && "my-0 h-dvh max-h-dvh w-[24rem] max-w-[calc(100vw-2.5rem)]", _ === "right" && "mr-0 ml-auto rounded-l-2xl", _ === "left" && "mr-auto ml-0 rounded-r-2xl", "backdrop:bg-[color:var(--backdrop-scrim,oklch(0_0_0/0.5))] backdrop:backdrop-blur-sm pointer-coarse:backdrop:backdrop-blur-none", v),
 		onCancel: (e) => {
 			e.preventDefault(), m && i?.(!1);
 		},
@@ -42,7 +42,7 @@ function f({ open: n, onOpenChange: i, title: a, description: f, children: p, di
 					className: "flex flex-col gap-2",
 					children: [/* @__PURE__ */ l("h2", {
 						id: x,
-						className: "text-lg font-semibold tracking-tight",
+						className: "text-lg font-semibold tracking-tight text-balance",
 						children: a
 					}), f && /* @__PURE__ */ l("p", {
 						id: S,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/disclosure/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAkD,MAAM,OAAO,CAAC;AAgBjH;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,WAAmB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAWxG;AAED,sHAAsH;AACtH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BA0BpG;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,sCAuDxF;AAED,MAAM,WAAW,eAAe;IAC5B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/disclosure/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAkD,MAAM,OAAO,CAAC;AAgBjH;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,WAAmB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAWxG;AAED,sHAAsH;AACtH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BAwBpG;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,sCAuDxF;AAED,MAAM,WAAW,eAAe;IAC5B,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB"}

package/dist/disclosure/index.js

@@ -34,7 +34,7 @@ function p({ className: n, onClick: r, children: i, ...a }) {
 		},
 		className: e("zen__disclosure group text-muted-foreground flex w-fit cursor-pointer items-center gap-1.5 rounded-md text-sm font-medium outline-hidden", "hover:text-foreground aria-expanded:text-foreground transition-colors duration-200", "focus-visible:outline-ring/50 focus-visible:outline-2 focus-visible:outline-offset-4", n),
 		...a,
-		children: [/* @__PURE__ */ c(t, { className: e("text-inherit duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", !o && "-rotate-90") }), i]
+		children: [/* @__PURE__ */ c(t, { className: e("ease-out-soft text-inherit duration-300", !o && "-rotate-90") }), i]
 	});
 }
 function m({ className: t, children: n, ...r }) {
@@ -51,11 +51,11 @@ function m({ className: t, children: n, ...r }) {
 		id: l,
 		"data-open": a || void 0,
 		inert: !a,
-		className: e("zen__disclosure-content grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-open:grid-rows-[1fr]", m && "data-open:starting:grid-rows-[0fr]"),
+		className: e("zen__disclosure-content ease-out-soft grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 data-open:grid-rows-[1fr]", m && "data-open:starting:grid-rows-[0fr]"),
 		children: /* @__PURE__ */ c("div", {
 			className: "min-h-0 overflow-hidden",
 			children: /* @__PURE__ */ c("div", {
-				className: e("-translate-y-1 pt-2 opacity-0 transition-[opacity,translate] duration-300 ease-out", "in-data-open:translate-y-0 in-data-open:opacity-100", m && "in-data-open:starting:-translate-y-1 in-data-open:starting:opacity-0", t),
+				className: e("zen__disclosure-body -translate-y-1 pt-2 opacity-0 transition-[opacity,translate] duration-300 ease-out", "in-data-open:translate-y-0 in-data-open:opacity-100", m && "in-data-open:starting:-translate-y-1 in-data-open:starting:opacity-0", t),
 				...r,
 				children: n
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,+BAkB9C;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,UAAU,+BAmB9C;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC"}

package/dist/input/index.js

@@ -7,7 +7,7 @@ import { jsx as r } from "react/jsx-runtime";
 function i(i) {
 	let { className: a, ...o } = i, s = n(o);
 	return /* @__PURE__ */ r("input", {
-		className: e(t, "w-full", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", "file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium", "[[type=\"checkbox\"]]:accent-primary [[type=\"checkbox\"]]:h-4 [[type=\"checkbox\"]]:w-4 [[type=\"checkbox\"]]:rounded-sm", "[[type=\"radio\"]]:accent-primary [[type=\"radio\"]]:h-4 [[type=\"radio\"]]:w-4", a),
+		className: e("zen__input", t, "w-full", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", "file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium", "[[type=\"checkbox\"]]:accent-primary [[type=\"checkbox\"]]:h-4 [[type=\"checkbox\"]]:w-4 [[type=\"checkbox\"]]:rounded-sm", "[[type=\"radio\"]]:accent-primary [[type=\"radio\"]]:h-4 [[type=\"radio\"]]:w-4", a),
 		...o,
 		...s
 	});

package/dist/input-group/index.js

@@ -21,7 +21,7 @@ function i({ invalid: n, className: i, onMouseDown: a, ...o }) {
 function a({ className: t, ...i }) {
 	let a = n(i);
 	return /* @__PURE__ */ r("input", {
-		className: e("placeholder:text-muted-foreground h-full w-full min-w-0 flex-1 bg-transparent text-sm outline-hidden disabled:cursor-not-allowed", t),
+		className: e("h-full w-full min-w-0 flex-1 bg-transparent text-sm outline-hidden placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))] disabled:cursor-not-allowed", t),
 		...i,
 		...a
 	});

package/dist/meter/index.js

@@ -27,7 +27,7 @@ function i({ value: i, max: a = 100, label: o, detail: s, hint: c, valueText: l,
 			/* @__PURE__ */ n("div", {
 				className: "bg-muted col-span-2 h-2 overflow-hidden rounded-full",
 				children: /* @__PURE__ */ n("div", {
-					className: e("h-full rounded-full transition-[width] duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)]", v === "danger" ? "bg-destructive shadow-[0_0_12px_oklch(var(--destructive)/0.7)]" : v === "warning" ? "bg-accent-foreground shadow-[0_0_12px_oklch(var(--accent-foreground)/0.6)]" : "from-primary to-glow-2 bg-gradient-to-r shadow-[0_0_12px_oklch(var(--glow)/0.6)]"),
+					className: e("zen__meter-fill ease-out-soft h-full rounded-full transition-[width] duration-700", v === "danger" ? "bg-destructive shadow-[0_0_12px_oklch(var(--destructive)/calc(0.7*var(--glow-k)))]" : v === "warning" ? "bg-accent-foreground shadow-[0_0_12px_oklch(var(--accent-foreground)/calc(0.6*var(--glow-k)))]" : "from-primary to-glow-2 bg-gradient-to-r shadow-[0_0_12px_oklch(var(--glow)/calc(0.6*var(--glow-k)))]"),
 					style: { width: `${_}%` }
 				})
 			}),

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/month-picker/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAe,KAAK,KAAK,EAAc,MAAM,kBAAkB,CAAC;AAGvE,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,EAAE,EACF,SAAS,EACT,QAAgB,EAChB,WAA4B,EAC5B,OAAO,EACP,UAAoB,EACpB,KAAK,EACL,GAAG,IAAI,EACV,EAAE,gBAAgB,+BA2FlB;AAED,gGAAgG;AAChG,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC3G,mCAAmC;IACnC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/month-picker/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAe,KAAK,KAAK,EAAc,MAAM,kBAAkB,CAAC;AAWvE,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,EACH,EAAE,EACF,SAAS,EACT,QAAgB,EAChB,WAA4B,EAC5B,OAAO,EACP,UAAoB,EACpB,KAAK,EACL,GAAG,IAAI,EACV,EAAE,gBAAgB,+BA2FlB;AAED,gGAAgG;AAChG,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,CAAC;IAC3G,mCAAmC;IACnC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/month-picker/index.js

@@ -1,93 +1,93 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
 import { useAnchoredPopup as t } from "../utils/useAnchoredPopup.js";
-import { PICKER_MONTH as n, PICKER_NAV as r, POPUP as i, TRIGGER as a } from "../utils/styles.js";
-import { useFieldProps as o } from "../field/index.js";
-import { FieldChevron as s } from "../utils/field-chevron.js";
-import c from "../icons/chevron-left.js";
-import l from "../icons/chevron-right.js";
-import { formatMonth as u, monthNames as d } from "../utils/month.js";
-import { useState as f } from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { PICKER_MONTH as n, PICKER_NAV as r, PLACEHOLDER as i, POPUP as a, TRIGGER as o } from "../utils/styles.js";
+import { useFieldProps as s } from "../field/index.js";
+import { FieldChevron as c } from "../utils/field-chevron.js";
+import l from "../icons/chevron-left.js";
+import u from "../icons/chevron-right.js";
+import { formatMonth as d, monthNames as f } from "../utils/month.js";
+import { useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region packages/month-picker/index.tsx
-function g({ value: g, onChange: _, locale: v, min: y, max: b, id: x, className: S, disabled: C = !1, placeholder: w = "Pick a month", onClear: T, clearLabel: E = "Clear", style: D, ...O }) {
-	let [k, A] = f(() => Number((g ?? (/* @__PURE__ */ new Date()).toISOString()).slice(0, 4))), j = t({ onOpenChange: (e) => e && g && A(Number(g.slice(0, 4))) }), M = o({
-		...O,
-		id: x
-	}), N = d(v), P = (e) => (!y || e >= y) && (!b || e <= b);
-	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h("button", {
+function _({ value: _, onChange: v, locale: y, min: b, max: x, id: S, className: C, disabled: w = !1, placeholder: T = "Pick a month", onClear: E, clearLabel: D = "Clear", style: O, ...k }) {
+	let [A, j] = p(() => Number((_ ?? (/* @__PURE__ */ new Date()).toISOString()).slice(0, 4))), M = t({ onOpenChange: (e) => e && _ && j(Number(_.slice(0, 4))) }), N = s({
+		...k,
+		id: S
+	}), P = f(y), F = (e) => (!b || e >= b) && (!x || e <= x);
+	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("button", {
 		type: "button",
-		...O,
-		...M,
-		id: x,
-		disabled: C,
-		...j.triggerProps,
+		...k,
+		...N,
+		id: S,
+		disabled: w,
+		...M.triggerProps,
 		style: {
-			...j.triggerProps.style,
-			...D
+			...M.triggerProps.style,
+			...O
 		},
-		className: e("zen__month-picker group", a, "w-full", j.open && "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", S),
-		children: [/* @__PURE__ */ m("span", {
-			className: g ? void 0 : "text-muted-foreground",
-			children: g ? u(g, v) : w
-		}), /* @__PURE__ */ m(s, { open: j.open })]
-	}), /* @__PURE__ */ h("div", {
-		...j.popupProps,
+		className: e("zen__month-picker group", o, "w-full", M.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", C),
+		children: [/* @__PURE__ */ h("span", {
+			className: _ ? void 0 : i,
+			children: _ ? d(_, y) : T
+		}), /* @__PURE__ */ h(c, { open: M.open })]
+	}), /* @__PURE__ */ g("div", {
+		...M.popupProps,
 		role: "dialog",
 		"aria-label": "Choose month",
-		className: e("zen__popover", i, "w-64 p-3"),
+		className: e("zen__popover", a, "w-64 p-3"),
 		children: [
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ g("div", {
 				className: "mb-2 flex items-center justify-between",
 				children: [
-					/* @__PURE__ */ m("button", {
+					/* @__PURE__ */ h("button", {
 						type: "button",
 						"aria-label": "Previous year",
-						onClick: () => A((e) => e - 1),
+						onClick: () => j((e) => e - 1),
 						className: r,
-						children: /* @__PURE__ */ m(c, { className: "size-4" })
+						children: /* @__PURE__ */ h(l, { className: "size-4" })
 					}),
-					/* @__PURE__ */ m("span", {
+					/* @__PURE__ */ h("span", {
 						className: "text-sm font-semibold tabular-nums",
 						"aria-live": "polite",
-						children: k
+						children: A
 					}),
-					/* @__PURE__ */ m("button", {
+					/* @__PURE__ */ h("button", {
 						type: "button",
 						"aria-label": "Next year",
-						onClick: () => A((e) => e + 1),
+						onClick: () => j((e) => e + 1),
 						className: r,
-						children: /* @__PURE__ */ m(l, { className: "size-4" })
+						children: /* @__PURE__ */ h(u, { className: "size-4" })
 					})
 				]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "grid grid-cols-3 gap-1",
-				children: N.map((t, r) => {
-					let i = `${k}-${String(r + 1).padStart(2, "0")}`, a = i === g;
-					return /* @__PURE__ */ m("button", {
+				children: P.map((t, r) => {
+					let i = `${A}-${String(r + 1).padStart(2, "0")}`, a = i === _;
+					return /* @__PURE__ */ h("button", {
 						type: "button",
-						disabled: !P(i),
+						disabled: !F(i),
 						"aria-pressed": a,
-						"aria-label": u(i, v, "long"),
+						"aria-label": d(i, y, "long"),
 						onClick: () => {
-							_(i), j.setOpen(!1);
+							v(i), M.setOpen(!1);
 						},
 						className: e(n, a && "bg-primary text-primary-foreground hover:bg-primary"),
 						children: t
 					}, i);
 				})
 			}),
-			T && g && /* @__PURE__ */ m("button", {
+			E && _ && /* @__PURE__ */ h("button", {
 				type: "button",
 				onClick: () => {
-					T(), j.setOpen(!1);
+					E(), M.setOpen(!1);
 				},
 				className: "border-tint/[0.06] text-muted-foreground hover:text-foreground focus-visible:ring-ring/40 mt-2 w-full cursor-pointer rounded-lg border-t px-2 pt-2.5 pb-1.5 text-sm outline-hidden focus-visible:ring-2",
-				children: E
+				children: D
 			})
 		]
 	})] });
 }
 //#endregion
-export { g as default };
+export { _ as default };

package/dist/page-header/index.js

@@ -11,7 +11,7 @@ function r({ eyebrow: r, title: i, lead: a, children: o, className: s }) {
 				children: r
 			}),
 			/* @__PURE__ */ t("h1", {
-				className: "text-aurora text-4xl font-semibold tracking-tight lg:text-5xl",
+				className: "text-aurora text-4xl font-semibold tracking-tight text-balance lg:text-5xl",
 				children: i
 			}),
 			a && /* @__PURE__ */ t("p", {

package/dist/progress-ring/index.js

@@ -37,7 +37,7 @@ function r({ value: r, size: i = 84, stroke: a = 7, label: o, children: s, class
 				strokeLinecap: "round",
 				strokeDasharray: u,
 				strokeDashoffset: u * (1 - d),
-				className: "stroke-primary [filter:drop-shadow(0_0_6px_oklch(var(--glow)/0.45))] transition-[stroke-dashoffset] duration-700 ease-out"
+				className: "zen__progress-ring-arc stroke-primary [filter:drop-shadow(0_0_6px_oklch(var(--glow)/calc(0.45*var(--glow-k))))] transition-[stroke-dashoffset] duration-700 ease-out"
 			})]
 		}), /* @__PURE__ */ t("div", {
 			className: "absolute inset-0 grid place-items-center text-center",

package/dist/radio-group/index.js

@@ -45,10 +45,10 @@ function c({ value: t, disabled: r, description: s, className: c, children: l })
 				checked: u.value === t,
 				disabled: r || u.disabled,
 				onChange: () => u.onChange(t),
-				className: e("peer border-tint/20 bg-tint/[0.04] m-0 size-full cursor-pointer appearance-none rounded-full border outline-hidden", "transition-[border-color,box-shadow] duration-200", "hover:enabled:border-tint/35 focus-visible:ring-ring/50 focus-visible:ring-2", "checked:border-primary checked:shadow-[0_0_14px_-3px_oklch(var(--glow)/0.8)] disabled:cursor-not-allowed")
+				className: e("peer bg-tint/[0.04] m-0 size-full cursor-pointer appearance-none rounded-full border border-[color:oklch(var(--tint)/var(--zen-control-edge))] outline-hidden", "transition-[border-color,box-shadow] duration-200", "focus-visible:ring-ring/50 focus-visible:ring-2 hover:enabled:border-[color:oklch(var(--tint)/var(--zen-control-edge-hover))]", "checked:border-primary checked:shadow-[0_0_14px_-3px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] disabled:cursor-not-allowed")
 			}), /* @__PURE__ */ i("span", {
 				"aria-hidden": !0,
-				className: "bg-primary pointer-events-none absolute size-2 scale-0 rounded-full shadow-[0_0_8px_oklch(var(--glow)/0.9)] transition-transform duration-200 ease-[cubic-bezier(0.3,1.6,0.5,1)] peer-checked:scale-100"
+				className: "zen__radio-dot bg-primary pointer-events-none absolute size-2 scale-0 rounded-full shadow-[0_0_8px_oklch(var(--glow)/calc(0.9*var(--glow-k)))] transition-transform duration-200 ease-[cubic-bezier(0.3,1.6,0.5,1)] peer-checked:scale-100"
 			})]
 		}), /* @__PURE__ */ a("span", {
 			className: "flex flex-col gap-0.5",