@rinzai/zen 0.6.0 → 0.6.1

package/dist/combobox/index.js

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

package/dist/meter/index.d.ts

@@ -1,11 +1,12 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 /**
  * A measure against a limit, e.g. spend against a budget: a bar with a label,
  * a figure and a note. Over the limit it turns red; near it, warm. Announced
  * as a meter, with `valueText` read out instead of the bare number.
  */
-export default function Meter({ value, max, label, detail, hint, valueText, tone, warnAt, className, }: MeterProps): import('react').JSX.Element;
-export interface MeterProps {
+export default function Meter({ value, max, label, detail, hint, valueText, tone, warnAt, className, ...rest }: MeterProps): import('react').JSX.Element;
+/** Also takes the element's own props, e.g. `aria-label` when there's no visible label. */
+export interface MeterProps extends Omit<ComponentProps<'div'>, 'children'> {
     value: number;
     /** The limit (default 100). Values past it fill the bar and turn it red. */
     max?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/meter/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAEzC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC1B,KAAK,EACL,GAAS,EACT,KAAK,EACL,MAAM,EACN,IAAI,EACJ,SAAS,EACT,IAAa,EACb,MAAa,EACb,SAAS,GACZ,EAAE,UAAU,+BAwDZ;AAED,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACjD,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/meter/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAEzD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC1B,KAAK,EACL,GAAS,EACT,KAAK,EACL,MAAM,EACN,IAAI,EACJ,SAAS,EACT,IAAa,EACb,MAAa,EACb,SAAS,EACT,GAAG,IAAI,EACV,EAAE,UAAU,+BAyDZ;AAED,2FAA2F;AAC3F,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACjD,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/meter/index.js

@@ -3,11 +3,12 @@ import { cx as e } from "../utils/cx.js";
 import { useId as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region packages/meter/index.tsx
-function i({ value: i, max: a = 100, label: o, detail: s, hint: c, valueText: l, tone: u = "auto", warnAt: d = .85, className: f }) {
-	let p = t(), m = i > a, h = a > 0 ? i / a : +(i > 0), g = Math.min(100, Math.max(0, Math.round(h * 100))), _ = u === "auto" ? m ? "danger" : h >= d ? "warning" : "default" : u;
+function i({ value: i, max: a = 100, label: o, detail: s, hint: c, valueText: l, tone: u = "auto", warnAt: d = .85, className: f, ...p }) {
+	let m = t(), h = i > a, g = a > 0 ? i / a : +(i > 0), _ = Math.min(100, Math.max(0, Math.round(g * 100))), v = u === "auto" ? h ? "danger" : g >= d ? "warning" : "default" : u;
 	return /* @__PURE__ */ r("div", {
+		...p,
 		role: "meter",
-		"aria-labelledby": o ? p : void 0,
+		"aria-labelledby": o ? m : p["aria-labelledby"],
 		"aria-valuemin": 0,
 		"aria-valuemax": a,
 		"aria-valuenow": Math.min(i, a),
@@ -15,23 +16,23 @@ function i({ value: i, max: a = 100, label: o, detail: s, hint: c, valueText: l,
 		className: e("zen__meter grid grid-cols-2 gap-y-1.5", f),
 		children: [
 			o && /* @__PURE__ */ n("span", {
-				id: p,
+				id: m,
 				className: "text-sm font-medium",
 				children: o
 			}),
 			s && /* @__PURE__ */ n("span", {
-				className: e("col-start-2 text-right text-sm tabular-nums", _ === "danger" ? "text-destructive" : "text-muted-foreground"),
+				className: e("col-start-2 text-right text-sm tabular-nums", v === "danger" ? "text-destructive" : "text-muted-foreground"),
 				children: s
 			}),
 			/* @__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)]", _ === "danger" ? "bg-destructive shadow-[0_0_12px_oklch(var(--destructive)/0.7)]" : _ === "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)]"),
-					style: { width: `${g}%` }
+					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)]"),
+					style: { width: `${_}%` }
 				})
 			}),
 			c && /* @__PURE__ */ n("span", {
-				className: e("col-span-2 text-xs", _ === "danger" ? "text-destructive" : "text-muted-foreground"),
+				className: e("col-span-2 text-xs", v === "danger" ? "text-destructive" : "text-muted-foreground"),
 				children: c
 			})
 		]

package/dist/money-input/index.d.ts

@@ -1,6 +1,6 @@
 import { ForeignAmount, RateTable } from '../utils/fx';
 import { Money } from '../utils/money';
-import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';
+import { ChangeEvent, ComponentProps, KeyboardEvent, ReactNode } from 'react';
 /**
  * Amount input in one currency. Shows grouped digits for the locale (1,52,000
  * for en-IN) and accepts shorthand: 1.5L, 2cr, 10k, 1.2m. Commits on blur or
@@ -12,7 +12,7 @@ import { ChangeEvent, KeyboardEvent, ReactNode } from 'react';
  * never sent anywhere). Replace the symbol with `start`, or build your own field
  * from useMoneyInput, MoneyCurrencyMenu and MoneyConversionHint.
  */
-export default function MoneyInput({ start, end, compact, disabled, id, autoFocus, className, 'aria-label': ariaLabel, ...options }: MoneyInputProps): import('react').JSX.Element;
+export default function MoneyInput({ value, onChange, currency, locale, allowNegative, allowEmpty, live, onCancel, convert, start, end, compact, disabled, className, onFocus, onBlur, onKeyDown, 'aria-describedby': describedBy, ...input }: MoneyInputProps): import('react').JSX.Element;
 /**
  * The currency switch for a converting field (`convert`): shows the symbol, or
  * the code of the foreign currency being typed in, and opens a menu of your
@@ -123,18 +123,17 @@ export interface MoneyInputOptions {
     /** Let people type in another currency, converted at the rates you load. */
     convert?: CurrencyConversion;
 }
-export interface MoneyInputProps extends MoneyInputOptions {
+/**
+ * Also takes the input's own props (placeholder, name, aria-*, onBlur…), except
+ * the value and its typing, which MoneyInput runs. className goes on the wrapper.
+ */
+export interface MoneyInputProps extends MoneyInputOptions, Omit<ComponentProps<'input'>, keyof MoneyInputOptions | 'defaultValue' | 'type' | 'inputMode' | 'children'> {
     /** Replaces the currency symbol (or the currency switch), e.g. with your own. */
     start?: ReactNode;
     /** Content after the input, e.g. a unit or a clear button. */
     end?: ReactNode;
     /** Smaller, for editing inside table rows. */
     compact?: boolean;
-    disabled?: boolean;
-    id?: string;
-    autoFocus?: boolean;
-    className?: string;
-    'aria-label'?: string;
 }
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/money-input/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAgB,KAAK,aAAa,EAAe,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAA0D,KAAK,KAAK,EAAmB,MAAM,kBAAkB,CAAC;AAEvH,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAC;AAElG;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,GAAG,EACH,OAAe,EACf,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,GAAG,OAAO,EACb,EAAE,eAAe,+BA0CjB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,sCAkCrG;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,sCA0CvG;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,aAAqB,EACrB,UAAkB,EAClB,IAAY,EACZ,QAAQ,EACR,OAAO,GACV,EAAE,iBAAiB;;;;;;;;;+BA+JE,WAAW,CAAC,gBAAgB,CAAC;;;gCAa5B,aAAa,CAAC,gBAAgB,CAAC;;IAiB9C,kFAAkF;;;;IAIlF,yEAAyE;;;;kBAnG1D,OAAO;IAwGtB,gEAAgE;;IAEhE,8EAA8E;;QAGpE,gCAAgC;;;QAGhC,mCAAmC;;QAEnC,8DAA8D;;QAE9D,yFAAyF;;oBA/EpF,MAAM;;QAqFX,wDAAwD;;QAExD,mDAAmD;;;QAGnD,gDAAgD;;QAEhD,oEAAoE;;;EAKrF;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAE/D,KAAK,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAmC1D,0EAA0E;AAC1E,MAAM,WAAW,kBAAkB;IAC/B,uGAAuG;IACvG,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B;;;OAGG;IACH,SAAS,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC9D,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kGAAkG;IAClG,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,sFAAsF;IACtF,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAC9B,gEAAgE;IAChE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,2FAA2F;IAC3F,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACtD,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8DAA8D;IAC9D,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/money-input/index.tsx"],"names":[],"mappings":"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"}

package/dist/money-input/index.js

@@ -10,36 +10,54 @@ import { convertMinor as v, rateBetween as y } from "../utils/fx.js";
 import { useEffect as b, useId as x, useRef as S, useState as C } from "react";
 import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region packages/money-input/index.tsx
-function D({ start: t, end: n, compact: r = !1, disabled: i = !1, id: a, autoFocus: o, className: s, "aria-label": c, ...l }) {
-	let u = A(l), d = !!u.conversion?.foreign;
+function D({ value: t, onChange: n, currency: r, locale: i, allowNegative: a, allowEmpty: o, live: s, onCancel: c, convert: l, start: u, end: d, compact: p = !1, disabled: _ = !1, className: v, onFocus: y, onBlur: b, onKeyDown: x, "aria-describedby": S, ...C }) {
+	let w = A({
+		value: t,
+		onChange: n,
+		currency: r,
+		locale: i,
+		allowNegative: a,
+		allowEmpty: o,
+		live: s,
+		onCancel: c,
+		convert: l
+	}), D = !!w.conversion?.foreign;
 	return /* @__PURE__ */ E("div", {
-		className: e("zen__money-input flex flex-col gap-1", s),
+		className: e("zen__money-input flex flex-col gap-1", v),
 		children: [/* @__PURE__ */ E(m, {
-			invalid: !!u.error,
-			"data-foreign": d || void 0,
-			className: e(r && "h-7", "data-foreign:border-primary/50"),
+			invalid: !!w.error,
+			"data-foreign": D || void 0,
+			className: e(p && "h-7", "data-foreign:border-primary/50"),
 			children: [
-				t ?? (u.conversion && !i ? /* @__PURE__ */ T(O, { money: u }) : /* @__PURE__ */ T(h, {
+				u ?? (w.conversion && !_ ? /* @__PURE__ */ T(O, { money: w }) : /* @__PURE__ */ T(h, {
 					"aria-hidden": !0,
 					"data-slot": "symbol",
-					children: u.symbol
+					children: w.symbol
 				})),
 				/* @__PURE__ */ T(g, {
-					...u.inputProps,
-					id: a,
-					autoFocus: o,
-					disabled: i,
-					"aria-label": c,
-					className: e("tabular-nums", r ? "text-right" : "text-left")
+					...C,
+					...w.inputProps,
+					onFocus: (e) => {
+						w.inputProps.onFocus(), y?.(e);
+					},
+					onBlur: (e) => {
+						w.inputProps.onBlur(), b?.(e);
+					},
+					onKeyDown: (e) => {
+						w.inputProps.onKeyDown(e), x?.(e);
+					},
+					"aria-describedby": e(w.inputProps["aria-describedby"], S) || void 0,
+					disabled: _,
+					className: e("tabular-nums", p ? "text-right" : "text-left")
 				}),
-				n
+				d
 			]
-		}), u.error ? /* @__PURE__ */ E("p", {
-			id: u.errorId,
+		}), w.error ? /* @__PURE__ */ E("p", {
+			id: w.errorId,
 			role: "alert",
 			className: "text-destructive mt-0! flex items-center gap-1.5 text-xs font-medium",
-			children: [/* @__PURE__ */ T(f, { className: "shrink-0" }), u.error]
-		}) : /* @__PURE__ */ T(k, { money: u })]
+			children: [/* @__PURE__ */ T(f, { className: "shrink-0" }), w.error]
+		}) : /* @__PURE__ */ T(k, { money: w })]
 	});
 }
 function O({ money: s, className: c }) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/popover/index.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAMlD,OAAO,EAAE,cAAc,EAA6B,SAAS,EAAyB,MAAM,OAAO,CAAC;AAYpG;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,IAAI,EAAE,WAAmB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAclG;AAED,6GAA6G;AAC7G,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BAcxF;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAiBrB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAW7D;AAED,MAAM,WAAW,YAAY;IACzB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/popover/index.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAMlD,OAAO,EAAE,cAAc,EAA6B,SAAS,EAAyB,MAAM,OAAO,CAAC;AAYpG;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,IAAI,EAAE,WAAmB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAclG;AAED,6GAA6G;AAC7G,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BAcxF;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAgB,EAChB,MAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,+BAarB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAW7D;AAED,MAAM,WAAW,YAAY;IACzB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACjE,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC9D,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACnC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/popover/index.js

@@ -54,11 +54,12 @@ function h({ align: t = "center", offset: n = 5, className: i, style: a, childre
 		style: {
 			...r(l.id, {
 				align: t,
-				offset: n
+				offset: n,
+				width: "at-least"
 			}),
 			...a
 		},
-		className: e("zen__popover fixed z-50 w-[anchor-size(width)] min-w-max overflow-visible p-0", o, i),
+		className: e("zen__popover fixed z-50 overflow-visible p-0", o, i),
 		children: s
 	});
 }

package/dist/theme.css

@@ -205,14 +205,25 @@
 
 /*
  * Built from Tailwind's backdrop utilities, which emit the standard and -webkit-
- * properties correctly. Phones: a live blur over scrolling content is the main
- * cause of jank, so touch screens get a solid tint instead.
+ * properties correctly. Where there's no live blur, the surface is solid: a
+ * translucent one lets sharp text behind show through (the blur is what hides
+ * it). No blur on touch screens (a live blur over scrolling content is the main
+ * cause of jank), without a GPU (lite graphics) and with the OS's "reduce
+ * transparency". The fallbacks live here, in the utilities layer, where a
+ * surface's own `!` background (a Dialog's) is: an unlayered !important rule
+ * loses to a layered one.
  */
 @utility glass-blur {
     @apply backdrop-blur-[18px] backdrop-saturate-140;
-    /* !: glass's `background` shorthand would otherwise reset the colour. */
-    @apply pointer-coarse:bg-card/96! pointer-coarse:backdrop-filter-none;
-    @apply [@media(hover:none)]:bg-card/96! [@media(hover:none)]:backdrop-filter-none;
+    /*
+     * !: glass's `background` shorthand would otherwise reset the colour. [:root_&]
+     * adds specificity, so each fallback beats a surface's own `!` background (a
+     * Dialog's bg-card/90!) whatever order the rules come in.
+     */
+    @apply pointer-coarse:[:root_&]:bg-card! pointer-coarse:backdrop-filter-none;
+    @apply [@media(hover:none)]:[:root_&]:bg-card! [@media(hover:none)]:backdrop-filter-none;
+    @apply [@media(prefers-reduced-transparency:reduce)]:[:root_&]:bg-card! [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none;
+    @apply [html[data-zen-graphics='lite']_&]:bg-card! [html[data-zen-graphics='lite']_&]:backdrop-filter-none;
 }
 
 @utility text-glow {
@@ -250,15 +261,10 @@
 /*
  * Without hardware acceleration (html[data-zen-graphics='lite'], set by
  * utils/graphics.ts) every blur, full-screen mask and animation is drawn on the
- * CPU each frame. Keep the look, drop the cost: solid tints instead of live
- * blur (as on phones), a still backdrop, no pointer light. The OS "reduce
- * transparency" setting gets the same tints.
+ * CPU each frame. Keep the look, drop the cost: solid surfaces instead of live
+ * blur (as on phones; see glass-blur), a still backdrop, no pointer light. The
+ * OS "reduce transparency" setting gets the same.
  */
-html[data-zen-graphics='lite'] .glass-blur {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-    background: oklch(var(--card) / 0.96) !important;
-}
 html[data-zen-graphics='lite'] .zen__header {
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
@@ -276,11 +282,6 @@ html[data-zen-graphics='lite'] :is(.zen-topo--lit, .zen-dots--lit) {
     display: none;
 }
 @media (prefers-reduced-transparency: reduce) {
-    .glass-blur {
-        -webkit-backdrop-filter: none !important;
-        backdrop-filter: none !important;
-        background: oklch(var(--card) / 0.96) !important;
-    }
     .zen__header {
         -webkit-backdrop-filter: none;
         backdrop-filter: none;