@rinzai/zen 0.8.6 → 0.10.0

package/dist/menu/index.js

@@ -3,34 +3,52 @@ import { cx as e } from "../utils/cx.js";
 import { useTypeahead as t } from "../utils/typeahead.js";
 import { useGraphicsMode as n } from "../utils/graphics.js";
 import { Slot as r } from "../utils/slot.js";
-import { anchoredStyle as i, useAnchoredPopup as a } from "../utils/useAnchoredPopup.js";
-import { createContext as o, useContext as s, useId as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { anchorFor as i, anchoredStyle as a, useAnchoredPopup as o } from "../utils/useAnchoredPopup.js";
+import { createContext as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useRef as f, useState as p } from "react";
+import { createPortal as m } from "react-dom";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region packages/menu/index.tsx
-var d = o(() => {}), f = o(null);
-function p(e) {
-	let t = s(f);
+var v = typeof window > "u" ? l : d, y = s(() => {}), b = s(null);
+function x(e) {
+	let t = c(b);
 	if (!t) throw Error(`<${e}> must be inside <Menu>`);
 	return t;
 }
-function m({ onOpenChange: e, children: t }) {
+function S({ onOpenChange: e, children: t }) {
 	n();
-	let r = c(), i = a({ onOpenChange: (t) => {
-		t && i.popupRef.current?.focus(), e?.(t);
-	} });
-	return /* @__PURE__ */ l(f.Provider, {
+	let r = u(), [i, a] = p(null), s = f(null), c = f(!1), l = o({ onOpenChange: (t) => {
+		if (c.current = t, t ? l.popupRef.current?.focus() : d(), !t && s.current) {
+			let e = document.activeElement;
+			(!e || e === document.body || l.popupRef.current?.contains(e)) && s.current.focus(), s.current = null;
+		}
+		e?.(t);
+	} }), d = () => {
+		let e = l.popupRef.current?.getAnimations?.() ?? [];
+		Promise.allSettled(e.map((e) => e.finished)).then(() => {
+			c.current || a(null);
+		});
+	};
+	return v(() => {
+		if (i && (l.setOpen(!0), i.pointerId !== void 0)) try {
+			l.popupRef.current?.setPointerCapture(i.pointerId);
+		} catch {}
+	}, [i]), /* @__PURE__ */ g(b.Provider, {
 		value: {
-			popup: i,
-			triggerId: r
+			popup: l,
+			triggerId: r,
+			point: i,
+			openAt: (e) => {
+				s.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, a({ ...e });
+			}
 		},
-		children: /* @__PURE__ */ l(d.Provider, {
-			value: () => i.setOpen(!1),
+		children: /* @__PURE__ */ g(y.Provider, {
+			value: () => l.setOpen(!1),
 			children: t
 		})
 	});
 }
-function h({ asChild: t, style: n, children: i, ...a }) {
-	let { popup: o, triggerId: s } = p("MenuTrigger"), c = {
+function C({ asChild: t, style: n, children: i, ...a }) {
+	let { popup: o, triggerId: s } = x("MenuTrigger"), c = {
 		id: s,
 		"aria-haspopup": "menu",
 		...o.triggerProps,
@@ -40,19 +58,21 @@ function h({ asChild: t, style: n, children: i, ...a }) {
 			...n
 		}
 	};
-	return t ? /* @__PURE__ */ l(r, {
+	return t ? /* @__PURE__ */ g(r, {
 		...c,
 		children: i
-	}) : /* @__PURE__ */ l("button", {
+	}) : /* @__PURE__ */ g("button", {
 		type: "button",
 		...c,
 		className: e("cursor-pointer", c.className),
 		children: i
 	});
 }
-function g({ align: n = "end", offset: r = 6, className: a, style: o, children: s, ...c }) {
-	let { popup: u, triggerId: d } = p("MenuContent"), f = t(), m = (e) => {
-		let t = Array.from(u.popupRef.current?.querySelectorAll("[role=\"menuitem\"]:not(:disabled)") ?? []), n = t.indexOf(document.activeElement), r = t.length - 1, i = f(e);
+function w({ align: n, offset: r, className: i, style: o, children: s, ...c }) {
+	let { popup: l, triggerId: u, point: d } = x("MenuContent");
+	n ??= d ? "start" : "end", r ??= d ? 2 : 6;
+	let f = t(), p = (e) => {
+		let t = Array.from(l.popupRef.current?.querySelectorAll("[role=\"menuitem\"]:not(:disabled)") ?? []), n = t.indexOf(document.activeElement), r = t.length - 1, i = f(e);
 		if (i) {
 			t.find((e) => e.textContent?.trim().toLowerCase().startsWith(i))?.focus();
 			return;
@@ -65,61 +85,128 @@ function g({ align: n = "end", offset: r = 6, className: a, style: o, children:
 		}[e.key];
 		a !== void 0 && (e.preventDefault(), t[(a + t.length) % t.length]?.focus());
 	};
-	return /* @__PURE__ */ l("div", {
-		"aria-labelledby": d,
+	return /* @__PURE__ */ g("div", {
+		"aria-labelledby": d ? void 0 : u,
 		...c,
-		...u.popupProps,
+		...l.popupProps,
 		role: "menu",
 		tabIndex: -1,
 		onKeyDown: (e) => {
-			c.onKeyDown?.(e), m(e);
+			c.onKeyDown?.(e), p(e);
 		},
 		style: {
-			...i(u.id, {
+			...a(l.id, {
 				align: n,
 				offset: r
 			}),
 			...o
 		},
-		className: e("zen__popover glass glass-blur text-foreground min-w-44 rounded-xl p-1.5 outline-hidden", a),
+		className: e("zen__popover glass glass-blur text-foreground min-w-44 rounded-xl p-1.5 outline-hidden", i),
 		children: s
 	});
 }
-var _ = "flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm outline-hidden select-none hover:bg-tint/[0.07] focus:bg-tint/[0.07] disabled:cursor-not-allowed disabled:opacity-50";
-function v({ icon: t, destructive: n, onSelect: i, asChild: a, className: o, children: c, onClick: f, ...p }) {
-	let m = s(d), h = {
+var T = 500, E = 8;
+function D({ asChild: t, disabled: n, className: a, onContextMenu: o, onPointerDown: s, onClickCapture: c, children: d, ...p }) {
+	let { popup: v, point: y, openAt: b } = x("MenuContextTrigger"), S = u(), C = y?.from === S, w = f(null), D = f(!1), O = () => {
+		w.current && clearTimeout(w.current.timer), w.current = null;
+	};
+	l(() => O, []);
+	let k = {
 		...p,
+		className: e("[-webkit-touch-callout:none]", a),
+		"data-popup-open": C && v.open || void 0,
+		onContextMenu: (e) => {
+			if (o?.(e), !(n || e.defaultPrevented) && (e.preventDefault(), O(), !v.open)) {
+				if (e.clientX === 0 && e.clientY === 0) {
+					let t = e.target.getBoundingClientRect();
+					b({
+						x: t.left,
+						y: t.bottom,
+						from: S
+					});
+				} else {
+					let t = e.nativeEvent, n = "pointerId" in t && e.buttons ? t.pointerId : void 0;
+					b({
+						x: e.clientX,
+						y: e.clientY,
+						from: S,
+						pointerId: n
+					});
+				}
+			}
+		},
+		onPointerDown: (e) => {
+			if (s?.(e), D.current = !1, n || e.pointerType !== "touch" || !e.isPrimary) return;
+			let t = {
+				x: e.clientX,
+				y: e.clientY,
+				from: S,
+				pointerId: e.pointerId
+			}, r = e.currentTarget, i = (e) => {
+				Math.hypot(e.clientX - t.x, e.clientY - t.y) > E && a();
+			}, a = () => {
+				O(), r.removeEventListener("pointermove", i), r.removeEventListener("pointerup", a), r.removeEventListener("pointercancel", a);
+			};
+			r.addEventListener("pointermove", i), r.addEventListener("pointerup", a), r.addEventListener("pointercancel", a), w.current = {
+				...t,
+				timer: window.setTimeout(() => {
+					a(), D.current = !0, v.open || b(t);
+				}, T)
+			};
+		},
+		onClickCapture: (e) => {
+			c?.(e), D.current && (D.current = !1, e.preventDefault(), e.stopPropagation());
+		}
+	}, A = y && C && m(/* @__PURE__ */ g("span", {
+		"aria-hidden": !0,
+		...i(v.id),
+		style: {
+			...i(v.id).style,
+			position: "fixed",
+			left: y.x,
+			top: y.y
+		}
+	}), document.body);
+	return /* @__PURE__ */ _(h, { children: [g(t ? r : "div", {
+		...k,
+		children: d
+	}), A] });
+}
+var O = "flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm outline-hidden select-none hover:bg-tint/[0.07] focus:bg-tint/[0.07] disabled:cursor-not-allowed disabled:opacity-50";
+function k({ icon: t, destructive: n, onSelect: i, asChild: a, className: o, children: s, onClick: l, ...u }) {
+	let d = c(y), f = {
+		...u,
 		role: "menuitem",
 		tabIndex: -1,
-		className: e(_, n && "text-destructive", o),
+		className: e(O, n && "text-destructive", o),
 		onClick: (e) => {
-			f?.(e), m(), i?.();
+			l?.(e), d(), i?.();
 		}
 	};
-	return a ? /* @__PURE__ */ l(r, {
-		...h,
-		children: c
-	}) : /* @__PURE__ */ u("button", {
+	return a ? /* @__PURE__ */ g(r, {
+		...f,
+		children: s
+	}) : /* @__PURE__ */ _("button", {
 		type: "button",
-		...h,
-		children: [t && /* @__PURE__ */ l("span", {
+		...f,
+		children: [t && /* @__PURE__ */ g("span", {
 			"aria-hidden": !0,
 			className: e("flex shrink-0", !n && "text-muted-foreground"),
 			children: t
-		}), c]
+		}), s]
 	});
 }
-function y({ className: t }) {
-	return /* @__PURE__ */ l("div", {
+function A({ className: t }) {
+	return /* @__PURE__ */ g("div", {
 		role: "separator",
 		className: e("bg-tint/[0.07] mx-2 my-1 h-px", t)
 	});
 }
-function b({ className: t, ...n }) {
-	return /* @__PURE__ */ l("div", {
+function j({ className: t, ...n }) {
+	return /* @__PURE__ */ g("div", {
 		className: e("flex items-center gap-3 px-3 py-2.5", t),
 		...n
 	});
 }
 //#endregion
-export { g as MenuContent, b as MenuHeader, v as MenuItem, y as MenuSeparator, h as MenuTrigger, m as default };
+export { w as MenuContent, D as MenuContextTrigger, j as MenuHeader, k as MenuItem, A as MenuSeparator, C as MenuTrigger, S as default };

package/dist/meter/index.d.ts

@@ -4,7 +4,7 @@ import { ComponentProps, ReactNode } from 'react';
  * 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, ...rest }: MeterProps): import('react').JSX.Element;
+export default function Meter({ value, max, label, detail, hint, valueText, tone, warnAt, marks, 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;
@@ -21,6 +21,8 @@ export interface MeterProps extends Omit<ComponentProps<'div'>, 'children'> {
     tone?: 'auto' | 'default' | 'warning' | 'danger';
     /** Fraction of max where `auto` turns to warning (default 0.85). */
     warnAt?: number;
+    /** Milestones along the bar, in the same units as value: e.g. [2500, 5000, 7500] of 10000. */
+    marks?: number[];
     className?: string;
 }
 //# sourceMappingURL=index.d.ts.map

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,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"}
+{"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,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACV,EAAE,UAAU,+BAkEZ;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,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/meter/index.js

@@ -3,36 +3,41 @@ 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, ...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;
+function i({ value: i, max: a = 100, label: o, detail: s, hint: c, valueText: l, tone: u = "auto", warnAt: d = .85, marks: f, className: p, ...m }) {
+	let h = t(), g = i > a, _ = a > 0 ? i / a : +(i > 0), v = Math.min(100, Math.max(0, Math.round(_ * 100))), y = u === "auto" ? g ? "danger" : _ >= d ? "warning" : "default" : u;
 	return /* @__PURE__ */ r("div", {
-		...p,
+		...m,
 		role: "meter",
-		"aria-labelledby": o ? m : p["aria-labelledby"],
+		"aria-labelledby": o ? h : m["aria-labelledby"],
 		"aria-valuemin": 0,
 		"aria-valuemax": a,
 		"aria-valuenow": Math.min(i, a),
 		"aria-valuetext": l,
-		className: e("zen__meter grid grid-cols-2 gap-y-1.5", f),
+		className: e("zen__meter grid grid-cols-2 gap-y-1.5", p),
 		children: [
 			o && /* @__PURE__ */ n("span", {
-				id: m,
+				id: h,
 				className: "text-sm font-medium",
 				children: o
 			}),
 			s && /* @__PURE__ */ n("span", {
-				className: e("col-start-2 text-right text-sm tabular-nums", v === "danger" ? "text-destructive" : "text-muted-foreground"),
+				className: e("col-start-2 text-right text-sm tabular-nums", y === "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("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: `${_}%` }
-				})
+			/* @__PURE__ */ r("div", {
+				className: "bg-muted relative col-span-2 h-2 overflow-hidden rounded-full",
+				children: [/* @__PURE__ */ n("div", {
+					className: e("zen__meter-fill ease-out-soft h-full rounded-full transition-[width] duration-700", y === "danger" ? "bg-destructive shadow-[0_0_12px_oklch(var(--destructive)/calc(0.7*var(--glow-k)))]" : y === "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: `${v}%` }
+				}), f?.map((e) => /* @__PURE__ */ n("span", {
+					"aria-hidden": !0,
+					"data-reached": i >= e || void 0,
+					className: "zen__meter-mark bg-tint/25 data-reached:bg-background/70 absolute inset-y-0 w-0.5 -translate-x-1/2 transition-colors duration-700",
+					style: { left: `${a > 0 ? Math.min(100, e / a * 100) : 0}%` }
+				}, e))]
 			}),
 			c && /* @__PURE__ */ n("span", {
-				className: e("col-span-2 text-xs", v === "danger" ? "text-destructive" : "text-muted-foreground"),
+				className: e("col-span-2 text-xs", y === "danger" ? "text-destructive" : "text-muted-foreground"),
 				children: c
 			})
 		]

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

@@ -3,9 +3,9 @@ import { Money } from '../utils/money';
 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
- * Enter; Escape reverts. Values are integer minor units (paise, cents), or null
- * when empty.
+ * for en-IN) and accepts shorthand: 1.5L, 2cr, 10k, 1.2m, and sums: 120+45.50,
+ * 3*12.99. Commits on blur or Enter; Escape reverts. Values are integer minor
+ * units (paise, cents), or null when empty.
  *
  * With `convert`, the symbol becomes a currency switch: type an amount in e.g.
  * USD and it's converted at the rates you load (in the browser; the amount is

package/dist/page-transition/index.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+/**
+ * The page's content, which changes between pages: wrap your route's outlet in
+ * it, and when the router changes page in a view transition (React Router's
+ * `viewTransition`, or document.startViewTransition yourself) the old page
+ * fades out as the new one rises in, while everything outside (header, nav)
+ * stays still. One per page.
+ */
+export default function PageTransition({ className, style, ...rest }: ComponentProps<'div'>): import('react').JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/page-transition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/page-transition/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAQ1F"}

package/dist/page-transition/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/page-transition/index.tsx
+function n({ className: n, style: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("zen__page-transition", n),
+		style: {
+			viewTransitionName: "zen-page",
+			...r
+		},
+		...i
+	});
+}
+//#endregion
+export { n as default };

package/dist/pagination/index.d.ts

@@ -0,0 +1,26 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * The pages a long list is split into: previous and next, the first and last
+ * pages, and those around the current one (`page`, from 1). Pages are buttons
+ * calling `onPageChange`, or with `href`, links (render them with your router's
+ * Link through `renderLink`).
+ */
+export default function Pagination({ page, count, onPageChange, href, renderLink, siblings, className, 'aria-label': label, }: PaginationProps): import('react').JSX.Element | null;
+/** The pages to show: the first, the last, `siblings` either side of `page`, and a gap where pages are skipped. */
+export declare function pageRange(page: number, count: number, siblings?: number): (number | 'gap')[];
+export interface PaginationProps {
+    /** The current page, from 1. */
+    page: number;
+    /** How many pages there are. With fewer than 2, nothing is shown. */
+    count: number;
+    onPageChange?: (page: number) => void;
+    /** Pages as links: the URL of each. */
+    href?: (page: number) => string;
+    /** Renders a page link, e.g. with your router's Link. */
+    renderLink?: (props: ComponentProps<'a'>, page: number) => ReactNode;
+    /** Pages shown either side of the current one. */
+    siblings?: number;
+    className?: string;
+    'aria-label'?: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/pagination/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAwC,EACxC,QAAY,EACZ,SAAS,EACT,YAAY,EAAE,KAAe,GAChC,EAAE,eAAe,sCA6CjB;AAED,mHAAmH;AACnH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,CAavF;AAED,MAAM,WAAW,eAAe;IAC5B,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,uCAAuC;IACvC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACrE,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/dist/pagination/index.js

@@ -0,0 +1,62 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { buttonVariants as t } from "../button/index.js";
+import n from "../icons/chevron-left.js";
+import r from "../icons/chevron-right.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/pagination/index.tsx
+function o({ page: o, count: c, onPageChange: l, href: u, renderLink: d = (e) => /* @__PURE__ */ i("a", { ...e }), siblings: f = 1, className: p, "aria-label": m = "Pages" }) {
+	if (c < 2) return null;
+	let h = (n, r, a) => {
+		let o = n < 1 || n > c, s = e(t({
+			variant: "ghost",
+			size: "icon"
+		}), "min-w-9 w-auto px-2 tabular-nums", a.current && "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.3),0_0_18px_-6px_oklch(var(--glow)/calc(0.6*var(--glow-k)))] hover:bg-primary/20"), f = {
+			"aria-label": a["aria-label"],
+			"aria-current": a.current ? "page" : void 0,
+			className: s
+		};
+		return u && !o ? d({
+			...f,
+			href: u(n),
+			onClick: l && (() => l(n)),
+			children: r
+		}, n) : /* @__PURE__ */ i("button", {
+			type: "button",
+			...f,
+			disabled: o,
+			onClick: () => !a.current && l?.(n),
+			children: r
+		});
+	};
+	return /* @__PURE__ */ i("nav", {
+		"aria-label": m,
+		className: e("zen__pagination", p),
+		children: /* @__PURE__ */ a("ul", {
+			className: "flex items-center gap-1",
+			children: [
+				/* @__PURE__ */ i("li", { children: h(o - 1, /* @__PURE__ */ i(n, { className: "size-4" }), { "aria-label": "Previous page" }) }),
+				s(o, c, f).map((e, t) => /* @__PURE__ */ i("li", { children: e === "gap" ? /* @__PURE__ */ i("span", {
+					"aria-hidden": !0,
+					className: "text-muted-foreground grid w-6 place-items-center",
+					children: "…"
+				}) : h(e, e, {
+					"aria-label": `Page ${e}`,
+					current: e === o
+				}) }, e === "gap" ? `gap${t}` : e)),
+				/* @__PURE__ */ i("li", { children: h(o + 1, /* @__PURE__ */ i(r, { className: "size-4" }), { "aria-label": "Next page" }) })
+			]
+		})
+	});
+}
+function s(e, t, n = 1) {
+	let r = /* @__PURE__ */ new Set([1, t]);
+	for (let i = e - n; i <= e + n; i++) i >= 1 && i <= t && r.add(i);
+	let i = [...r].sort((e, t) => e - t), a = [];
+	return i.forEach((e, t) => {
+		let n = e - (i[t - 1] ?? e);
+		n === 2 ? a.push(e - 1) : n > 2 && a.push("gap"), a.push(e);
+	}), a;
+}
+//#endregion
+export { o as default, s as pageRange };

package/dist/progress-ring/index.d.ts

@@ -1,5 +1,8 @@
 import { ReactNode } from 'react';
-/** Circular progress, 0–1, with optional content in the middle. */
+/**
+ * Circular progress, 0–1, with optional content in the middle. Reaching 1
+ * while shown sends out a ring of glow, once.
+ */
 export default function ProgressRing({ value, size, stroke, label, children, className }: ProgressRingProps): import('react').JSX.Element;
 export interface ProgressRingProps {
     /** Progress from 0 to 1; values outside are clamped. */

package/dist/progress-ring/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/progress-ring/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,mEAAmE;AACnE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,MAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAsCnH;AAED,MAAM,WAAW,iBAAiB;IAC9B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/progress-ring/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,MAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAqDnH;AAED,MAAM,WAAW,iBAAiB;IAC9B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/progress-ring/index.js

@@ -1,49 +1,58 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region packages/progress-ring/index.tsx
-function r({ value: r, size: i = 84, stroke: a = 7, label: o, children: s, className: c }) {
-	let l = (i - a) / 2, u = 2 * Math.PI * l, d = Math.min(Math.max(r, 0), 1);
-	return /* @__PURE__ */ n("div", {
+function i({ value: i, size: a = 84, stroke: o = 7, label: s, children: c, className: l }) {
+	let u = (a - o) / 2, d = 2 * Math.PI * u, f = Math.min(Math.max(i, 0), 1), [p, m] = t(f), [h, g] = t(0);
+	return f !== p && (m(f), p < 1 && f === 1 && g(h + 1)), /* @__PURE__ */ r("div", {
 		role: "progressbar",
-		"aria-label": o,
+		"aria-label": s,
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
-		"aria-valuenow": Math.round(d * 100),
-		className: e("zen__progress-ring relative grid shrink-0 place-items-center", c),
+		"aria-valuenow": Math.round(f * 100),
+		className: e("zen__progress-ring relative grid shrink-0 place-items-center", l),
 		style: {
-			width: i,
-			height: i
+			width: a,
+			height: a
 		},
-		children: [/* @__PURE__ */ n("svg", {
-			width: i,
-			height: i,
-			viewBox: `0 0 ${i} ${i}`,
-			className: "-rotate-90",
-			"aria-hidden": !0,
-			children: [/* @__PURE__ */ t("circle", {
-				cx: i / 2,
-				cy: i / 2,
-				r: l,
-				fill: "none",
-				strokeWidth: a,
-				className: "stroke-tint/[0.07]"
-			}), /* @__PURE__ */ t("circle", {
-				cx: i / 2,
-				cy: i / 2,
-				r: l,
-				fill: "none",
-				strokeWidth: a,
-				strokeLinecap: "round",
-				strokeDasharray: u,
-				strokeDashoffset: u * (1 - d),
-				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",
-			children: s
-		})]
+		children: [
+			/* @__PURE__ */ r("svg", {
+				width: a,
+				height: a,
+				viewBox: `0 0 ${a} ${a}`,
+				className: "-rotate-90",
+				"aria-hidden": !0,
+				children: [/* @__PURE__ */ n("circle", {
+					cx: a / 2,
+					cy: a / 2,
+					r: u,
+					fill: "none",
+					strokeWidth: o,
+					className: "stroke-tint/[0.07]"
+				}), /* @__PURE__ */ n("circle", {
+					cx: a / 2,
+					cy: a / 2,
+					r: u,
+					fill: "none",
+					strokeWidth: o,
+					strokeLinecap: "round",
+					strokeDasharray: d,
+					strokeDashoffset: d * (1 - f),
+					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"
+				})]
+			}),
+			h > 0 && /* @__PURE__ */ n("span", {
+				"aria-hidden": !0,
+				className: "zen__ring-burst border-primary pointer-events-none absolute inset-0 rounded-full",
+				style: { borderWidth: o }
+			}, h),
+			/* @__PURE__ */ n("div", {
+				className: "absolute inset-0 grid place-items-center text-center",
+				children: c
+			})
+		]
 	});
 }
 //#endregion
-export { r as default };
+export { i as default };

package/dist/range-slider/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Two thumbs on one track, for a span such as an amount from $50 to $500:
+ * two native range inputs (keyboard, forms and screen readers work as on
+ * Slider), the span between them filled. The thumbs can meet but not cross.
+ */
+export default function RangeSlider({ value: [low, high], min, max, step, onValueChange, onValueCommit, label, thumbLabels, valueText, disabled, className, }: RangeSliderProps): import('react').JSX.Element;
+export interface RangeSliderProps {
+    /** The span, low then high. */
+    value: readonly [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    /** While dragging (every step). */
+    onValueChange?: (value: [number, number]) => void;
+    /** Once the user lets go: the moment to save or filter. */
+    onValueCommit?: (value: [number, number]) => void;
+    /** Accessible name of the pair, e.g. "Amount". */
+    label: string;
+    /** Each thumb's name (default "Minimum", "Maximum"). */
+    thumbLabels?: readonly [string, string];
+    /** Spoken value of a thumb, e.g. (v) => `$${v}`. */
+    valueText?: (value: number) => string;
+    disabled?: boolean;
+    className?: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/range-slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/range-slider/index.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,KAAK,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,EAClB,GAAO,EACP,GAAS,EACT,IAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAoC,EACpC,SAAS,EACT,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,+BAiDlB;AAED,MAAM,WAAW,gBAAgB;IAC7B,+BAA+B;IAC/B,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAClD,2DAA2D;IAC3D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAClD,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}