@rinzai/zen 0.9.0 → 0.10.0

package/dist/dialog/index.js

@@ -2,155 +2,111 @@
 import { cx as e } from "../utils/cx.js";
 import { useGraphicsMode as t } from "../utils/graphics.js";
 import n from "../button/index.js";
-import { useToastHost as r } from "../toast/index.js";
-import { createContext as i, useContext as a, useEffect as o, useId as s, useRef as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import r from "../icons/micro/x-mark.js";
+import { useToastHost as i } from "../toast/index.js";
+import { useSwipe as a } from "../utils/swipe.js";
+import { createContext as o, useContext as s, useEffect as c, useId as l, useRef as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region packages/dialog/index.tsx
-var d = i(() => {});
-function f({ open: t, onOpenChange: n, title: r, description: i, children: a, dismissible: o = !0, initialFocus: f, size: m = "md", side: h, className: g, role: _ }) {
-	let y = c(null), b = s(), x = s();
-	return v(y, o && t ? h : void 0, () => n?.(!1)), p(y, t, f), /* @__PURE__ */ l("dialog", {
-		ref: y,
-		role: _,
-		"aria-labelledby": b,
-		"aria-describedby": i ? x : void 0,
-		"data-side": h,
-		className: e("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !h && "m-auto max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] rounded-xl", !h && (m === "lg" ? "w-[60rem]" : "w-[28rem]"), h === "bottom" && "mx-auto mt-auto mb-0 max-h-[85dvh] w-full max-w-2xl rounded-t-2xl", (h === "left" || h === "right") && "my-0 h-dvh max-h-dvh w-[24rem] max-w-[calc(100vw-2.5rem)]", h === "right" && "mr-0 ml-auto rounded-l-2xl", h === "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", g),
+var p = o(() => {});
+function m({ open: t, onOpenChange: n, title: i, description: a, children: o, dismissible: s = !0, initialFocus: c, size: m = "md", side: g, className: v, role: y, closeLabel: b = "Close" }) {
+	let x = u(null), S = l(), C = l();
+	return _(x, s && t ? g : void 0, () => n?.(!1)), h(x, t, c), /* @__PURE__ */ f("dialog", {
+		ref: x,
+		role: y,
+		"aria-labelledby": S,
+		"aria-describedby": a ? C : void 0,
+		"data-side": g,
+		className: e("zen__dialog glass glass-blur glow-edge text-card-foreground bg-card/90! overflow-visible p-0", !g && "m-auto max-h-[calc(100dvh-2rem)] max-w-[calc(100vw-2rem)] rounded-xl", !g && (m === "lg" ? "w-[60rem]" : "w-[28rem]"), g === "bottom" && "mx-auto mt-auto mb-0 max-h-[85dvh] w-full max-w-2xl rounded-t-2xl", (g === "left" || g === "right") && "my-0 h-dvh max-h-dvh w-[24rem] max-w-[calc(100vw-2.5rem)]", g === "right" && "mr-0 ml-auto rounded-l-2xl", g === "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(), o && n?.(!1);
+			e.preventDefault(), s && n?.(!1);
 		},
 		onClick: (e) => {
-			e.target === e.currentTarget && o && n?.(!1);
+			e.target === e.currentTarget && s && n?.(!1);
 		},
-		children: /* @__PURE__ */ u("div", {
-			className: e("flex flex-col gap-4 overflow-x-hidden overflow-y-auto p-6", h ? h === "bottom" ? "max-h-[85dvh] pt-3" : "h-full" : "max-h-[calc(100dvh-2rem)]"),
+		children: [/* @__PURE__ */ f("div", {
+			className: e("flex flex-col gap-4 overflow-x-hidden overflow-y-auto p-6", g ? g === "bottom" ? "max-h-[85dvh] pt-3" : "h-full" : "max-h-[calc(100dvh-2rem)]"),
 			children: [
-				h === "bottom" && /* @__PURE__ */ l("div", {
+				g === "bottom" && /* @__PURE__ */ d("div", {
 					"aria-hidden": !0,
 					className: "bg-tint/20 mx-auto h-1 w-10 shrink-0 rounded-full"
 				}),
-				/* @__PURE__ */ u("div", {
-					className: "flex flex-col gap-2",
-					children: [/* @__PURE__ */ l("h2", {
-						id: b,
+				/* @__PURE__ */ f("div", {
+					className: e("flex flex-col gap-2", s && "pe-8"),
+					children: [/* @__PURE__ */ d("h2", {
+						id: S,
 						className: "text-lg font-semibold tracking-tight text-balance",
-						children: r
-					}), i && /* @__PURE__ */ l("p", {
-						id: x,
-						className: "text-muted-foreground mt-0! text-sm leading-5",
 						children: i
+					}), a && /* @__PURE__ */ d("p", {
+						id: C,
+						className: "text-muted-foreground mt-0! text-sm leading-5",
+						children: a
 					})]
 				}),
-				/* @__PURE__ */ l(d.Provider, {
+				/* @__PURE__ */ d(p.Provider, {
 					value: () => n?.(!1),
-					children: a
+					children: o
 				})
 			]
-		})
+		}), s && /* @__PURE__ */ d("button", {
+			type: "button",
+			"aria-label": b,
+			onClick: () => n?.(!1),
+			className: e("text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 absolute end-4 grid size-8 cursor-pointer place-items-center rounded-lg outline-hidden transition-colors focus-visible:ring-2", g === "bottom" ? "top-7.5" : "top-5.5"),
+			children: /* @__PURE__ */ d(r, { className: "size-4" })
+		})]
 	});
 }
-function p(e, n, i) {
-	t(), o(() => {
+function h(e, n, r) {
+	t(), c(() => {
 		let t = e.current;
 		if (t) {
 			if (n && !t.open) {
 				let e = document.documentElement;
 				e.toggleAttribute("data-zen-scrollbar", window.innerWidth > e.clientWidth);
-				let n = document.activeElement === document.body ? null : document.activeElement?.getBoundingClientRect(), r = !!n && !t.dataset.side;
-				if (t.toggleAttribute("data-zen-from", r), t.showModal(), r) {
+				let n = document.activeElement === document.body ? null : document.activeElement?.getBoundingClientRect(), i = !!n && !t.dataset.side;
+				if (t.toggleAttribute("data-zen-from", i), t.showModal(), i) {
 					let e = n.left + n.width / 2 - t.offsetLeft, r = n.top + n.height / 2 - t.offsetTop;
 					t.style.transformOrigin = `${Math.round(e)}px ${Math.round(r)}px`;
 				}
-				i?.current?.focus();
+				r?.current?.focus();
 			} else !n && t.open && t.close();
 		}
 	}, [
 		e,
 		n,
-		i
-	]), r(e, n);
-}
-var m = .3, h = .5, g = 100, _ = 8;
-function v(e, t, n) {
-	let r = c(n);
-	o(() => {
-		r.current = n;
-	}), o(() => {
-		let n = e.current;
-		if (!n || (n.style.removeProperty("--zen-swipe"), n.style.removeProperty("--zen-swipe-progress"), !t)) return;
-		let i = t === "bottom" ? "y" : "x", a = t === "left" ? -1 : 1, o = null, s = !1, c = () => i === "y" ? n.offsetHeight : n.offsetWidth, l = (e) => (i === "y" ? e.clientY - o.y : e.clientX - o.x) * a, u = (e) => i === "y" ? e.clientX - o.x : e.clientY - o.y, d = (e) => {
-			let t = e > 0 ? e : e / 6;
-			n.style.setProperty("--zen-swipe", i === "y" ? `0 ${t}px` : `${t * a}px 0`), n.style.setProperty("--zen-swipe-progress", String(Math.max(0, Math.min(1, e / c()))));
-		}, f = (e) => {
-			let t = o?.on;
-			if (o = null, t) {
-				if (delete n.dataset.swiping, s = !0, e) return r.current();
-				n.style.removeProperty("--zen-swipe"), n.style.removeProperty("--zen-swipe-progress");
-			}
-		}, p = (e) => {
-			if (s = !1, e.pointerType === "touch") {
-				if (!e.isPrimary) return f(!1);
-				y(e.target, n, i) || (o = {
-					id: e.pointerId,
-					x: e.clientX,
-					y: e.clientY,
-					points: [[e.timeStamp, 0]],
-					on: !1
-				});
-			}
-		}, v = (e) => {
-			if (!o || e.pointerId !== o.id) return;
-			let t = l(e);
-			if (!o.on) {
-				if (Math.hypot(t, u(e)) < _) return;
-				if (t <= 0 || Math.abs(u(e)) * 1.5 > t || b(e.target, n, i, a)) {
-					o = null;
-					return;
-				}
-				o.on = !0, n.dataset.swiping = "", n.setPointerCapture?.(e.pointerId);
-			}
-			o.points = [...o.points.filter(([t]) => e.timeStamp - t < g), [e.timeStamp, t]], d(t);
-		}, x = (e) => {
-			if (!o || e.pointerId !== o.id) return;
-			let t = l(e), [n, r] = o.points.find(([t]) => e.timeStamp - t < g) ?? [e.timeStamp, t], i = (t - r) / Math.max(1, e.timeStamp - n);
-			f(e.type === "pointerup" && (t > c() * m || t > 0 && i > h));
-		}, S = (e) => {
-			o?.on && e.preventDefault();
-		}, C = (e) => {
-			s && (s = !1, e.stopPropagation(), e.preventDefault());
-		};
-		return n.addEventListener("pointerdown", p), n.addEventListener("pointermove", v), n.addEventListener("pointerup", x), n.addEventListener("pointercancel", x), n.addEventListener("touchmove", S, { passive: !1 }), n.addEventListener("click", C, !0), () => {
-			n.removeEventListener("pointerdown", p), n.removeEventListener("pointermove", v), n.removeEventListener("pointerup", x), n.removeEventListener("pointercancel", x), n.removeEventListener("touchmove", S), n.removeEventListener("click", C, !0), delete n.dataset.swiping;
-		};
-	}, [e, t]);
+		r
+	]), i(e, n);
 }
-function y(e, t, n) {
-	if (e.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])")) return !0;
-	let r = n === "y" ? /pan-(y|up|down)/ : /pan-(x|left|right)/;
-	for (let n = e; n && n !== t; n = n.parentElement) {
-		let e = getComputedStyle(n).touchAction;
-		if (e && e !== "auto" && e !== "manipulation" && !r.test(e)) return !0;
-	}
-	return !1;
-}
-function b(e, t, n, r) {
-	for (let i = e; i; i = i === t ? null : i.parentElement) {
-		let e = getComputedStyle(i);
-		if (!/auto|scroll/.test(n === "y" ? e.overflowY : e.overflowX)) continue;
-		let t = n === "y" ? i.scrollTop : i.scrollLeft, a = n === "y" ? i.scrollHeight - i.clientHeight : i.scrollWidth - i.clientWidth;
-		if (!(a <= 0) && (r > 0 ? t > 0 : t < a - 1)) return !0;
-	}
-	return !1;
+var g = .3;
+function _(e, t, n) {
+	let r = t === "bottom" ? "y" : "x", i = t === "left" ? -1 : 1, o = () => r === "y" ? e.current.offsetHeight : e.current.offsetWidth, s = () => {
+		e.current?.style.removeProperty("--zen-swipe"), e.current?.style.removeProperty("--zen-swipe-progress");
+	};
+	c(s, [e, t]), a(e, t ? {
+		axis: r,
+		sign: i
+	} : void 0, {
+		move: (t) => {
+			let n = t > 0 ? t : t / 6;
+			e.current.style.setProperty("--zen-swipe", r === "y" ? `0 ${n}px` : `${n * i}px 0`), e.current.style.setProperty("--zen-swipe-progress", String(Math.max(0, Math.min(1, t / o()))));
+		},
+		release: (e, t) => {
+			e > o() * g || e > 0 && t > .5 ? n() : s();
+		},
+		cancel: s,
+		threshold: () => o() * g
+	});
 }
-function x({ className: t, ...n }) {
-	return /* @__PURE__ */ l("div", {
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ d("div", {
 		className: e("flex justify-end gap-2", t),
 		...n
 	});
 }
-function S({ onClick: e, ...t }) {
-	let r = a(d);
-	return /* @__PURE__ */ l(n, {
+function y({ onClick: e, ...t }) {
+	let r = s(p);
+	return /* @__PURE__ */ d(n, {
 		...t,
 		onClick: (t) => {
 			e?.(t), t.defaultPrevented || r();
@@ -158,4 +114,4 @@ function S({ onClick: e, ...t }) {
 	});
 }
 //#endregion
-export { S as DialogClose, x as DialogFooter, f as default, p as useModal };
+export { y as DialogClose, v as DialogFooter, m as default, h as useModal };

package/dist/editable-cell/index.d.ts

@@ -3,7 +3,8 @@ import { ReactNode } from 'react';
  * A value edited in place, e.g. in a table cell: shows `children` as a button,
  * and on click (or Enter) swaps in your editor. Call `close()` from the editor
  * when it's done (committed or cancelled). Works with any editor: a compact
- * MoneyInput, an Input, a Select.
+ * MoneyInput, an Input, a Select. A value changed by an edit glows briefly
+ * when the editor closes.
  */
 export default function EditableCell({ children, editor, label, readOnly, editing: editingProp, onEditingChange, title, className, }: EditableCellProps): import('react').JSX.Element;
 export interface EditableCellProps {

package/dist/editable-cell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/editable-cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAgB,EAChB,OAAO,EAAE,WAAW,EACpB,eAAe,EACf,KAAK,EACL,SAAS,GACZ,EAAE,iBAAiB,+BA8BnB;AAED,MAAM,WAAW,iBAAiB;IAC9B,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,qEAAqE;IACrE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IACzC,qGAAqG;IACrG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/editable-cell/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAIhF;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAgB,EAChB,OAAO,EAAE,WAAW,EACpB,eAAe,EACf,KAAK,EACL,SAAS,GACZ,EAAE,iBAAiB,+BAwCnB;AAED,MAAM,WAAW,iBAAiB;IAC9B,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,qEAAqE;IACrE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IACzC,qGAAqG;IACrG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/editable-cell/index.js

@@ -1,24 +1,31 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { useState as t } from "react";
-import { Fragment as n, jsx as r } from "react/jsx-runtime";
+import { useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+import { Fragment as a, jsx as o } from "react/jsx-runtime";
 //#region packages/editable-cell/index.tsx
-function i({ children: i, editor: a, label: o, readOnly: s = !1, editing: c, onEditingChange: l, title: u, className: d }) {
-	let [f, p] = t(!1), m = c ?? f, h = (e) => {
-		c === void 0 && p(e), l?.(e);
-	};
-	return s ? /* @__PURE__ */ r("span", {
-		title: u,
-		className: e("zen__editable-cell block px-1 text-right tabular-nums", d),
-		children: i
-	}) : m ? /* @__PURE__ */ r(n, { children: a(() => h(!1)) }) : /* @__PURE__ */ r("button", {
+var s = typeof window > "u" ? t : n;
+function c({ children: t, editor: n, label: c, readOnly: l = !1, editing: u, onEditingChange: d, title: f, className: p }) {
+	let [m, h] = i(!1), g = u ?? m, _ = (e) => {
+		u === void 0 && h(e), d?.(e);
+	}, v = r(null), [y, b] = i(null);
+	return s(() => {
+		let e = v.current;
+		!g && e && y !== null && e.textContent !== y && (e.dataset.changed = "");
+	}, [g, y]), l ? /* @__PURE__ */ o("span", {
+		title: f,
+		className: e("zen__editable-cell block px-1 text-right tabular-nums", p),
+		children: t
+	}) : g ? /* @__PURE__ */ o(a, { children: n(() => _(!1)) }) : /* @__PURE__ */ o("button", {
+		ref: v,
 		type: "button",
-		title: u,
-		"aria-label": o ? `${o}. Edit` : void 0,
-		onClick: () => h(!0),
-		className: e("zen__editable-cell hover:bg-primary/10 focus-visible:ring-ring/50 w-full cursor-pointer rounded-md px-1.5 py-0.5 text-right tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-hidden", d),
-		children: i
+		title: f,
+		"aria-label": c ? `${c}. Edit` : void 0,
+		onClick: (e) => {
+			b(e.currentTarget.textContent), _(!0);
+		},
+		className: e("zen__editable-cell hover:bg-primary/10 focus-visible:ring-ring/50 w-full cursor-pointer rounded-md px-1.5 py-0.5 text-right tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-hidden", p),
+		children: t
 	});
 }
 //#endregion
-export { i as default };
+export { c as default };

package/dist/filter-bar/index.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * The filters in effect, as chips each removed with its ×, and "Clear all"
+ * once there are two or more. Renders nothing when no filter is set.
+ */
+export default function FilterBar({ onClear, clearLabel, 'aria-label': label, className, children, ref, ...rest }: FilterBarProps): import('react').JSX.Element | null;
+/** One filter in a FilterBar: what it is (e.g. "Amount: $50–$500"), and its × to remove it. */
+export declare function FilterChip({ onRemove, removeLabel, className, children }: FilterChipProps): import('react').JSX.Element;
+export interface FilterBarProps extends ComponentProps<'div'> {
+    /** Removes every filter; shown as "Clear all" once there are two or more. */
+    onClear?: () => void;
+    clearLabel?: ReactNode;
+}
+export interface FilterChipProps {
+    onRemove: () => void;
+    /** The × button's name for screen readers, e.g. "Remove amount filter". */
+    removeLabel?: string;
+    className?: string;
+    children: ReactNode;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/filter-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/filter-bar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,cAAc,EAAE,SAAS,EAAiD,MAAM,OAAO,CAAC;AAM3G;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,OAAO,EACP,UAAwB,EACxB,YAAY,EAAE,KAAwB,EACtC,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACV,EAAE,cAAc,sCA6BhB;AAiDD,+FAA+F;AAC/F,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,WAA6B,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAmB3G;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,KAAK,CAAC;IACzD,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB"}

package/dist/filter-bar/index.js

@@ -0,0 +1,90 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { reducedMotion as t } from "../utils/motion.js";
+import n from "../icons/micro/x-mark.js";
+import { Children as r, useEffect as i, useLayoutEffect as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region packages/filter-bar/index.tsx
+var l = typeof window > "u" ? i : a, u = {
+	duration: 260,
+	easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
+}, d = {
+	duration: 120,
+	easing: "ease-in"
+};
+function f({ onClear: t, clearLabel: n = "Clear all", "aria-label": i = "Active filters", className: a, children: l, ref: u, ...d }) {
+	let f = r.toArray(l).length, m = o(null);
+	return p(m), f === 0 ? null : /* @__PURE__ */ c("div", {
+		ref: (e) => {
+			if (m.current = e, typeof u == "function") return u(e);
+			u && (u.current = e);
+		},
+		role: "group",
+		"aria-label": i,
+		className: e("zen__filter-bar relative flex flex-wrap items-center gap-1.5", a),
+		...d,
+		children: [l, f > 1 && t && /* @__PURE__ */ s("button", {
+			type: "button",
+			onClick: t,
+			className: "zen__filter-clear text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 touch-target ml-1 cursor-pointer rounded-md px-1.5 py-1 text-xs outline-hidden focus-visible:ring-2",
+			children: n
+		})]
+	});
+}
+function p(e) {
+	let n = o(/* @__PURE__ */ new Map());
+	l(() => {
+		let r = e.current, i = n.current, a = /* @__PURE__ */ new Map();
+		for (let e of r ? [...r.children] : []) e instanceof HTMLElement && !e.dataset.zenLeaving && a.set(e, {
+			left: e.offsetLeft,
+			top: e.offsetTop
+		});
+		if (n.current = a, !r || t()) return;
+		let o = !1;
+		for (let [e, t] of i) {
+			if (e.isConnected || !(e instanceof HTMLElement)) continue;
+			o = !0, e.dataset.zenLeaving = "", e.setAttribute("aria-hidden", "true"), e.inert = !0, Object.assign(e.style, {
+				position: "absolute",
+				left: `${t.left}px`,
+				top: `${t.top}px`,
+				margin: "0",
+				animation: "none"
+			}), r.append(e);
+			let n = e.animate?.({
+				opacity: [1, 0],
+				scale: [1, .9]
+			}, d);
+			n ? n.onfinish = n.oncancel = () => e.remove() : e.remove();
+		}
+		let s = {
+			...u,
+			delay: o ? d.duration : 0,
+			fill: "backwards"
+		};
+		for (let [e, t] of a) {
+			let n = i.get(e);
+			!n || n.left === t.left && n.top === t.top || (n.top === t.top ? e.animate?.({ translate: [`${n.left - t.left}px 0`, "0 0"] }, s) : e.animate?.({
+				opacity: [0, 1],
+				translate: ["0 3px", "0 0"]
+			}, {
+				...s,
+				duration: 200,
+				delay: s.delay + u.duration * .6
+			}));
+		}
+	});
+}
+function m({ onRemove: t, removeLabel: r = "Remove filter", className: i, children: a }) {
+	return /* @__PURE__ */ c("span", {
+		className: e("zen__filter-chip bg-primary/12 text-foreground inline-flex items-center gap-1 rounded-full py-1 pr-1 pl-3 text-xs shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)]", i),
+		children: [a, /* @__PURE__ */ s("button", {
+			type: "button",
+			"aria-label": r,
+			onClick: t,
+			className: "text-muted-foreground hover:text-foreground hover:bg-tint/10 focus-visible:ring-ring/50 touch-target grid size-5 cursor-pointer place-items-center rounded-full outline-hidden focus-visible:ring-2",
+			children: /* @__PURE__ */ s(n, { className: "size-3" })
+		})]
+	});
+}
+//#endregion
+export { m as FilterChip, f as default };

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+/** The chart palette, so a category's colour matches it in charts. */
+export declare const ICON_COLORS: IconColor[];
+/**
+ * Pick an icon and a colour for something, e.g. a spending category: a button
+ * showing the choice opens a grid of icons and a row of colours. Icons are
+ * yours (emoji work); colours default to the chart palette. Both are radio
+ * groups, so arrow keys move through them.
+ */
+export default function IconPicker({ icons, colors, value, onChange, label, className, }: IconPickerProps): import('react').JSX.Element;
+export interface IconColor {
+    /** What's stored, e.g. "blue". */
+    value: string;
+    label: string;
+    /** Any CSS colour. */
+    color: string;
+}
+export interface IconPickerProps {
+    icons: {
+        value: string;
+        label: string;
+        icon: ReactNode;
+    }[];
+    /** Default: ICON_COLORS, the chart palette. */
+    colors?: IconColor[];
+    value: {
+        icon: string;
+        color?: string;
+    };
+    onChange: (value: {
+        icon: string;
+        color?: string;
+    }) => void;
+    /** What it's the icon of, e.g. "Category icon"; the button also says the current choice. */
+    label: string;
+    className?: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/icon-picker/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAAS,MAAM,OAAO,CAAC;AAExD,sEAAsE;AACtE,eAAO,MAAM,WAAW,EAAE,SAAS,EASlC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,MAAoB,EACpB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACZ,EAAE,eAAe,+BA8DjB;AAED,MAAM,WAAW,SAAS;IACtB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IAC3D,+CAA+C;IAC/C,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D,4FAA4F;IAC5F,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/icon-picker/index.js

@@ -0,0 +1,112 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import t, { PopoverContent as n, PopoverTrigger as r } from "../popover/index.js";
+import { useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/icon-picker/index.tsx
+var s = [
+	{
+		value: "blue",
+		label: "Blue",
+		color: "var(--chart-1)"
+	},
+	{
+		value: "orange",
+		label: "Orange",
+		color: "var(--chart-2)"
+	},
+	{
+		value: "teal",
+		label: "Teal",
+		color: "var(--chart-3)"
+	},
+	{
+		value: "amber",
+		label: "Amber",
+		color: "var(--chart-4)"
+	},
+	{
+		value: "pink",
+		label: "Pink",
+		color: "var(--chart-5)"
+	},
+	{
+		value: "green",
+		label: "Green",
+		color: "var(--chart-6)"
+	},
+	{
+		value: "violet",
+		label: "Violet",
+		color: "var(--chart-7)"
+	},
+	{
+		value: "red",
+		label: "Red",
+		color: "var(--chart-8)"
+	}
+];
+function c({ icons: c, colors: l = s, value: u, onChange: d, label: f, className: p }) {
+	let m = i(), h = c.find((e) => e.value === u.icon), g = l.find((e) => e.value === u.color), _ = (e) => ({ "--icon-color": e ?? "var(--color-muted-foreground)" });
+	return /* @__PURE__ */ o(t, { children: [/* @__PURE__ */ a(r, {
+		"aria-label": `${f}: ${[h?.label, g?.label].filter(Boolean).join(", ") || "none"}`,
+		style: _(g?.color),
+		className: e("zen__icon-picker focus-visible:ring-ring/50 grid size-10 shrink-0 place-items-center rounded-xl bg-[color-mix(in_oklch,var(--icon-color)_18%,transparent)] text-lg text-(--icon-color) outline-hidden transition-colors focus-visible:ring-2", p),
+		children: h?.icon
+	}), /* @__PURE__ */ o(n, {
+		"aria-label": f,
+		className: "flex w-72 flex-col gap-3 p-3",
+		children: [/* @__PURE__ */ o("fieldset", {
+			className: "flex flex-wrap gap-1.5",
+			children: [/* @__PURE__ */ a("legend", {
+				className: "text-muted-foreground mb-1.5 text-xs",
+				children: "Colour"
+			}), l.map((e) => /* @__PURE__ */ o("label", {
+				title: e.label,
+				className: "relative cursor-pointer",
+				children: [/* @__PURE__ */ a("input", {
+					type: "radio",
+					name: `${m}-color`,
+					"aria-label": e.label,
+					checked: u.color === e.value,
+					onChange: () => d({
+						...u,
+						color: e.value
+					}),
+					className: "peer sr-only"
+				}), /* @__PURE__ */ a("span", {
+					"aria-hidden": !0,
+					style: { background: e.color },
+					className: "ring-offset-background peer-focus-visible:ring-ring/60 peer-checked:ring-foreground/70 block size-6 rounded-full ring-offset-2 transition-shadow peer-checked:ring-2 peer-focus-visible:ring-2"
+				})]
+			}, e.value))]
+		}), /* @__PURE__ */ o("fieldset", {
+			className: "grid grid-cols-6 gap-1",
+			style: _(g?.color),
+			children: [/* @__PURE__ */ a("legend", {
+				className: "text-muted-foreground mb-1.5 text-xs",
+				children: "Icon"
+			}), c.map((e) => /* @__PURE__ */ o("label", {
+				title: e.label,
+				className: "cursor-pointer",
+				children: [/* @__PURE__ */ a("input", {
+					type: "radio",
+					name: `${m}-icon`,
+					"aria-label": e.label,
+					checked: u.icon === e.value,
+					onChange: () => d({
+						...u,
+						icon: e.value
+					}),
+					className: "peer sr-only"
+				}), /* @__PURE__ */ a("span", {
+					"aria-hidden": !0,
+					className: "hover:bg-tint/[0.07] peer-focus-visible:ring-ring/50 grid size-10 place-items-center rounded-lg text-lg transition-colors peer-checked:bg-[color-mix(in_oklch,var(--icon-color)_22%,transparent)] peer-checked:text-(--icon-color) peer-focus-visible:ring-2",
+					children: e.icon
+				})]
+			}, e.value))]
+		})]
+	})] });
+}
+//#endregion
+export { s as ICON_COLORS, c as default };

package/dist/icons/arrow-left.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+//#region packages/icons/arrow-left.tsx
+function t(t) {
+	return /* @__PURE__ */ e("svg", {
+		className: "size-6",
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		strokeWidth: "1.5",
+		stroke: "currentColor",
+		"aria-hidden": "true",
+		"data-slot": "icon",
+		...t,
+		children: /* @__PURE__ */ e("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+		})
+	});
+}
+//#endregion
+export { t as default };

package/dist/icons/micro/arrow-trending-down.d.ts

@@ -0,0 +1,3 @@
+import { default as IconProps } from '../icon.types';
+export default function ArrowTrendingDownMicro(props: IconProps): import('react').JSX.Element;
+//# sourceMappingURL=arrow-trending-down.d.ts.map

package/dist/icons/micro/arrow-trending-down.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-trending-down.d.ts","sourceRoot":"","sources":["../../../packages/icons/micro/arrow-trending-down.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,KAAK,EAAE,SAAS,+BAkB9D"}

package/dist/icons/micro/arrow-trending-down.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+//#region packages/icons/micro/arrow-trending-down.tsx
+function t(t) {
+	return /* @__PURE__ */ e("svg", {
+		className: "size-4",
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		"data-slot": "icon",
+		...t,
+		children: /* @__PURE__ */ e("path", {
+			fillRule: "evenodd",
+			d: "M1.22 4.22a.75.75 0 0 1 1.06 0L6 7.94l2.761-2.762a.75.75 0 0 1 1.158.12 24.9 24.9 0 0 1 2.718 5.556l.729-1.261a.75.75 0 0 1 1.299.75l-1.591 2.755a.75.75 0 0 1-1.025.275l-2.756-1.591a.75.75 0 1 1 .75-1.3l1.097.634a23.417 23.417 0 0 0-1.984-4.211L6.53 9.53a.75.75 0 0 1-1.06 0L1.22 5.28a.75.75 0 0 1 0-1.06Z",
+			clipRule: "evenodd"
+		})
+	});
+}
+//#endregion
+export { t as default };

package/dist/icons/micro/arrow-trending-up.d.ts

@@ -0,0 +1,3 @@
+import { default as IconProps } from '../icon.types';
+export default function ArrowTrendingUpMicro(props: IconProps): import('react').JSX.Element;
+//# sourceMappingURL=arrow-trending-up.d.ts.map

package/dist/icons/micro/arrow-trending-up.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-trending-up.d.ts","sourceRoot":"","sources":["../../../packages/icons/micro/arrow-trending-up.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,SAAS,+BAkB5D"}