@rinzai/zen 0.4.2 → 0.6.0

package/dist/money-input/index.js

@@ -0,0 +1,304 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import t, { MenuContent as n, MenuItem as r, MenuSeparator as i, MenuTrigger as a } from "../menu/index.js";
+import { currencySymbol as o, formatAmount as s, formatMoney as c, minorDigits as l, parseMoneyInput as u } from "../utils/money.js";
+import d from "../spinner/index.js";
+import { AlertIcon as f, InfoIcon as p } from "../utils/status-icons.js";
+import m, { InputGroupAddon as h, InputGroupInput as g } from "../input-group/index.js";
+import { FieldChevron as _ } from "../utils/field-chevron.js";
+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;
+	return /* @__PURE__ */ E("div", {
+		className: e("zen__money-input flex flex-col gap-1", s),
+		children: [/* @__PURE__ */ E(m, {
+			invalid: !!u.error,
+			"data-foreign": d || void 0,
+			className: e(r && "h-7", "data-foreign:border-primary/50"),
+			children: [
+				t ?? (u.conversion && !i ? /* @__PURE__ */ T(O, { money: u }) : /* @__PURE__ */ T(h, {
+					"aria-hidden": !0,
+					"data-slot": "symbol",
+					children: u.symbol
+				})),
+				/* @__PURE__ */ T(g, {
+					...u.inputProps,
+					id: a,
+					autoFocus: o,
+					disabled: i,
+					"aria-label": c,
+					className: e("tabular-nums", r ? "text-right" : "text-left")
+				}),
+				n
+			]
+		}), u.error ? /* @__PURE__ */ E("p", {
+			id: u.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 })]
+	});
+}
+function O({ money: s, className: c }) {
+	let l = s.conversion;
+	return l ? /* @__PURE__ */ E(t, { children: [/* @__PURE__ */ E(a, {
+		"aria-label": `Currency: ${l.currency}. Change to enter another currency`,
+		className: e("group/currency hover:bg-tint/[0.07] focus-visible:ring-ring/50 -ml-1 flex shrink-0 items-center gap-0.5 rounded-md px-1 py-0.5 text-sm outline-hidden focus-visible:ring-2", l.foreign ? "text-primary" : "text-muted-foreground", c),
+		children: [l.foreign ? l.currency : s.symbol, /* @__PURE__ */ T(_, { className: "text-inherit duration-150 group-data-popup-open/currency:rotate-180" })]
+	}), /* @__PURE__ */ E(n, {
+		align: "start",
+		offset: 8,
+		"aria-label": "Currency",
+		className: "max-h-72 w-60 overflow-y-auto",
+		children: [
+			/* @__PURE__ */ E(r, {
+				onSelect: () => l.pick(l.home),
+				className: "gap-2 py-1.5",
+				children: [/* @__PURE__ */ T("span", {
+					className: "w-9 font-medium",
+					children: l.home
+				}), /* @__PURE__ */ T("span", {
+					className: "text-muted-foreground",
+					children: "Your currency"
+				})]
+			}),
+			/* @__PURE__ */ T(i, {}),
+			/* @__PURE__ */ T("div", {
+				className: "text-muted-foreground px-3 pt-1 pb-1.5 text-xs",
+				children: "Enter in another currency, converted at today’s rate"
+			}),
+			l.choices.map((e) => /* @__PURE__ */ E(r, {
+				onSelect: () => l.pick(e),
+				className: "gap-2 py-1.5",
+				children: [/* @__PURE__ */ T("span", {
+					className: "w-9 font-medium",
+					children: e
+				}), /* @__PURE__ */ T("span", {
+					className: "text-muted-foreground",
+					children: o(e, "en")
+				})]
+			}, e))
+		]
+	})] }) : null;
+}
+function k({ money: t, className: n }) {
+	let r = t.conversion;
+	if (!r || !r.foreign && !r.converted) return null;
+	let { home: i, locale: a } = r, o = e("text-muted-foreground flex items-center gap-1.5 text-xs", n);
+	if (!r.foreign) {
+		let e = r.converted;
+		return /* @__PURE__ */ E("p", {
+			id: t.hintId,
+			role: "status",
+			className: o,
+			children: [
+				/* @__PURE__ */ T(p, { className: "text-primary shrink-0" }),
+				"Converted from ",
+				c(e.amount, e.currency, a),
+				" at ",
+				M(e.rate)
+			]
+		});
+	}
+	return /* @__PURE__ */ T("p", {
+		id: t.hintId,
+		role: "status",
+		className: o,
+		children: r.status === "idle" || r.status === "loading" ? /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(d, { className: "size-3" }), " Getting today’s rate…"] }) : r.rate === null ? /* @__PURE__ */ E(w, { children: [
+			/* @__PURE__ */ T(f, { className: "text-destructive shrink-0" }),
+			" Couldn’t get exchange rates. Enter the amount in",
+			" ",
+			i,
+			"."
+		] }) : /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(p, { className: "text-primary shrink-0" }), /* @__PURE__ */ E("span", { children: [
+			r.preview !== null && /* @__PURE__ */ E("span", {
+				className: "text-foreground font-medium",
+				children: [
+					"≈ ",
+					c(r.preview, i, a),
+					" ·",
+					" "
+				]
+			}),
+			"1 ",
+			r.currency,
+			" = ",
+			c(Math.round(r.rate * 10 ** l(i)), i, a),
+			" (",
+			r.source ? `${r.source}, ` : "",
+			N(r.date, a),
+			")"
+		] })] })
+	});
+}
+function A({ value: t, onChange: n, currency: r, locale: i, allowNegative: a = !1, allowEmpty: l = !1, live: d = !1, onCancel: f, convert: p }) {
+	let m = p?.initial ?? null, [h, g] = C(() => m?.currency ?? r), _ = !!p && h !== r, S = j(p?.loadRates, _), w = (e) => e === null ? "" : s(e, r, i), [T, E] = C(() => m ? s(m.amount, m.currency, i) : w(t)), [D, O] = C(null), [k, A] = C(null), [M, N] = C(!1), [P, F] = C(!1), I = x(), L = x();
+	b(() => {
+		!M && !_ && !(d && P) && E(w(t));
+	}, [
+		t,
+		r,
+		i
+	]);
+	let R = (e) => {
+		if (!S.table) return null;
+		try {
+			return y(S.table, e, r);
+		} catch {
+			return null;
+		}
+	}, z = _ ? R(h) : null, B = (e) => `Not an amount. Try ${s(3274e3, e, i)} or ${i.endsWith("-IN") ? "1.5L" : "10k"}.`;
+	function V(e, t) {
+		let n = e.trim();
+		if (n === "") {
+			if (l) return null;
+			O("Enter an amount.");
+			return;
+		}
+		let r;
+		try {
+			r = u(n, t);
+		} catch {
+			O(B(t));
+			return;
+		}
+		if (!a && r < 0) {
+			O("Amount can't be negative.");
+			return;
+		}
+		return O(null), r;
+	}
+	function H(e, t, i) {
+		let a = e.trim();
+		if (a === "") {
+			n(null), p?.onForeign?.(null);
+			return;
+		}
+		let o;
+		try {
+			o = u(a, t);
+		} catch {
+			n(null);
+			return;
+		}
+		t === r ? (n(o), p?.onForeign?.(null)) : i === null ? n(null) : (n(v(o, i, t, r)), p?.onForeign?.({
+			currency: t,
+			amount: o,
+			rate: i,
+			date: S.table.date
+		}));
+	}
+	b(() => {
+		d && P && _ && H(T, h, z);
+	}, [z]);
+	function U() {
+		let e = V(T, h);
+		if (e === void 0) return !1;
+		if (e !== null && _) {
+			if (z === null) return O(S.status === "error" ? "Couldn't get today's exchange rate." : "Still getting today's rate…"), !1;
+			let t = v(e, z, h, r), i = {
+				currency: h,
+				amount: e,
+				rate: z,
+				date: S.table.date
+			};
+			return A(i), g(r), E(w(t)), n(t), p?.onForeign?.(i), !0;
+		}
+		return E(w(e)), n(e), e !== t && (A(null), p?.onForeign?.(null)), !0;
+	}
+	function W() {
+		let e = V(T, h);
+		e !== void 0 && E(e === null ? "" : s(e, h, i));
+	}
+	function G(e) {
+		g(e), O(null), d && T.trim() && (F(!0), H(T, e, e === r ? null : R(e)));
+	}
+	let K = (() => {
+		if (!_ || z === null || !T.trim()) return null;
+		try {
+			return v(u(T, h), z, h, r);
+		} catch {
+			return null;
+		}
+	})();
+	return {
+		inputProps: {
+			type: "text",
+			inputMode: "decimal",
+			autoComplete: "off",
+			spellCheck: !1,
+			value: T,
+			"aria-invalid": D ? !0 : void 0,
+			"aria-describedby": e(D ? I : (_ || !!k) && L) || void 0,
+			onChange: (e) => {
+				E(e.target.value), A(null), d && (F(!0), H(e.target.value, h, z));
+			},
+			onFocus: () => N(!0),
+			onBlur: () => {
+				N(!1), d ? W() : U();
+			},
+			onKeyDown: (e) => {
+				e.key === "Enter" ? (e.preventDefault(), d ? W() : U()) : e.key === "Escape" && (e.preventDefault(), g(r), E(w(t)), O(null), f?.());
+			}
+		},
+		symbol: o(h, i),
+		error: D,
+		errorId: I,
+		hintId: L,
+		text: T,
+		setText: E,
+		commit: U,
+		formatted: t === null ? "" : c(t, r, i),
+		conversion: p ? {
+			home: r,
+			locale: i,
+			currency: h,
+			foreign: _,
+			choices: p.currencies.filter((e) => e !== r && (!S.table || e === S.table.base || e in S.table.rates)),
+			pick: G,
+			status: S.status,
+			rate: z,
+			date: S.table?.date ?? null,
+			source: p.source,
+			preview: K,
+			converted: k
+		} : null
+	};
+}
+function j(e, t) {
+	let [n, r] = C({
+		table: null,
+		status: "idle"
+	}), i = S(e);
+	return i.current = e, b(() => {
+		let e = i.current;
+		if (!e || !t || n.status === "ready" || n.status === "loading") return;
+		let a = (e) => r(e ? {
+			table: e,
+			status: "ready"
+		} : {
+			table: null,
+			status: "error"
+		}), o;
+		try {
+			o = e();
+		} catch {
+			a(null);
+			return;
+		}
+		o && typeof o.then == "function" ? (r({
+			table: null,
+			status: "loading"
+		}), o.then(a, () => a(null))) : a(o);
+	}, [t]), n;
+}
+var M = (e) => e >= 100 ? e.toFixed(2) : e >= 1 ? e.toFixed(4) : e.toPrecision(4), N = (e, t) => new Intl.DateTimeFormat(t, {
+	day: "numeric",
+	month: "short",
+	timeZone: "UTC"
+}).format(/* @__PURE__ */ new Date(`${e}T00:00:00Z`));
+//#endregion
+export { k as MoneyConversionHint, O as MoneyCurrencyMenu, D as default, A as useMoneyInput };

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

@@ -1,11 +1,13 @@
 import { Month } from '../utils/month';
+import { ComponentProps } from 'react';
 /**
  * Month selector: a field showing "Sep 2026" that opens a year and a 12-month
  * grid. Months are "YYYY-MM" strings. With `onClear`, the popup also offers
  * `clearLabel` (e.g. "No end") to empty it.
  */
-export default function MonthPicker({ value, onChange, locale, min, max, id, className, disabled, placeholder, onClear, clearLabel, 'aria-label': ariaLabel, }: MonthPickerProps): import('react').JSX.Element;
-export interface MonthPickerProps {
+export default function MonthPicker({ value, onChange, locale, min, max, id, className, disabled, placeholder, onClear, clearLabel, style, ...rest }: MonthPickerProps): import('react').JSX.Element;
+/** Also takes the trigger button's props (aria-*, data-*, onBlur…), so Field can wire it up. */
+export interface MonthPickerProps extends Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'defaultValue'> {
     /** "YYYY-MM", or null for none. */
     value: Month | null;
     onChange: (month: Month) => void;
@@ -23,6 +25,5 @@ export interface MonthPickerProps {
     /** Offers a clear option in the popup (shown when a month is set). */
     onClear?: () => void;
     clearLabel?: string;
-    'aria-label'?: string;
 }
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/month-picker/index.js

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

package/dist/page-header/index.js

@@ -0,0 +1,26 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region packages/page-header/index.tsx
+function r({ eyebrow: r, title: i, lead: a, children: o, className: s }) {
+	return /* @__PURE__ */ n("header", {
+		className: e("zen__page-header flex flex-col gap-3", s),
+		children: [
+			r && /* @__PURE__ */ t("p", {
+				className: "text-muted-foreground mt-0! text-xs tracking-[0.1em] uppercase",
+				children: r
+			}),
+			/* @__PURE__ */ t("h1", {
+				className: "text-aurora text-4xl font-semibold tracking-tight lg:text-5xl",
+				children: i
+			}),
+			a && /* @__PURE__ */ t("p", {
+				className: "text-muted-foreground mt-0! max-w-2xl text-lg leading-relaxed",
+				children: a
+			}),
+			o
+		]
+	});
+}
+//#endregion
+export { r as default };

package/dist/pills/index.d.ts

@@ -0,0 +1,35 @@
+import { ComponentProps } from 'react';
+/**
+ * A glass track of pills, with an optional glowing pill that slides to the
+ * active one: whichever has aria-current="page" (router links such as React
+ * Router's NavLink set it themselves) or aria-selected="true". It adds no role
+ * of its own; what you wrap it in says what it is. Site navigation:
+ *
+ *   <nav aria-label="Main">
+ *       <Pills>
+ *           <PillIndicator />
+ *           <Pill href="/month" active>Month</Pill>
+ *           <Pill asChild><NavLink to="/goals">Goals</NavLink></Pill>
+ *       </Pills>
+ *   </nav>
+ *
+ * For tabs that switch panels in place, use Tabs with `<TabList variant="pills">`.
+ */
+export default function Pills({ className, ref, children, ...rest }: PillsProps): import('react').JSX.Element;
+/** The glowing pill under the active item. Place it inside Pills; hidden while none is active. */
+export declare function PillIndicator({ className }: {
+    className?: string;
+}): import('react').JSX.Element | null;
+/**
+ * One pill: a link. `active` marks the current page. With `asChild`, the
+ * styles go onto your own element instead (a router's Link or NavLink).
+ */
+export declare function Pill({ active, asChild, className, children, ...rest }: PillProps): import('react').JSX.Element;
+export type PillsProps = ComponentProps<'div'>;
+export interface PillProps extends ComponentProps<'a'> {
+    /** This pill is the current page (aria-current="page"). */
+    active?: boolean;
+    /** Style the single child element (e.g. a router link) instead of rendering an <a>. */
+    asChild?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/pills/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAqC,MAAM,OAAO,CAAC;AAO1E;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAgB9E;AAED,kGAAkG;AAClG,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,sCAUlE;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAQhF;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE/C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,GAAG,CAAC;IAClD,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/pills/index.js

@@ -0,0 +1,50 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { Slot as t } from "../utils/slot.js";
+import { PILL as n, PILL_INDICATOR as r, PILL_TRACK as i } from "../utils/styles.js";
+import { useIndicator as a } from "../utils/indicator.js";
+import { createContext as o, useContext as s, useRef as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+//#region packages/pills/index.tsx
+var u = o(null), d = "[aria-current=\"page\"], [aria-selected=\"true\"]";
+function f({ className: t, ref: n, children: r, ...o }) {
+	let s = c(null), f = a(s, d);
+	return /* @__PURE__ */ l("div", {
+		ref: (e) => {
+			s.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
+		},
+		className: e("zen__pills", i, t),
+		...o,
+		children: /* @__PURE__ */ l(u.Provider, {
+			value: f,
+			children: r
+		})
+	});
+}
+function p({ className: t }) {
+	let n = s(u);
+	return n ? /* @__PURE__ */ l("span", {
+		"aria-hidden": !0,
+		className: e(r, t),
+		style: {
+			translate: `${n.x}px 0`,
+			width: n.w
+		}
+	}) : null;
+}
+function m({ active: r, asChild: i, className: a, children: o, ...s }) {
+	let c = {
+		...s,
+		"aria-current": r ? "page" : void 0,
+		className: e(n, a)
+	};
+	return i ? (r || delete c["aria-current"], /* @__PURE__ */ l(t, {
+		...c,
+		children: o
+	})) : /* @__PURE__ */ l("a", {
+		...c,
+		children: o
+	});
+}
+//#endregion
+export { m as Pill, p as PillIndicator, f as default };

package/dist/popover/index.d.ts

@@ -1,24 +1,43 @@
-import { ComponentProps } from 'react';
-export default function Popover(props: PopoverProps): import('react').JSX.Element;
-export interface PopoverProps extends Omit<ComponentProps<'div'>, 'content'> {
-    placement?: Placement;
-    className?: string;
-    children?: React.ReactNode;
-    trigger?: 'hover' | 'click';
-    triggerType?: 'auto' | 'manual';
-    content?: React.ReactNode;
-    onOpen?: () => void;
-    onClose?: () => void;
-    disabled?: boolean;
-    show?: boolean;
-    setShow?: (show: boolean) => void;
-    role?: AriaRole | ComponentRole;
-    gap?: string;
-    /** Classes for the element wrapping `children` (it fits its content by default). */
-    triggerClassName?: string;
+import { ButtonProps } from '../button';
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A panel that opens from a button: a small form, a profile card, settings. A
+ * native popover, so outside clicks and Escape close it and focus returns to
+ * the button. Put a PopoverTrigger and a PopoverContent inside. Opens and closes
+ * on its own, or follows `open` (with `onOpenChange` to hear the user close it).
+ * For a hint on hover or focus, use Tooltip; for a list of actions, Menu.
+ */
+export default function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps): import('react').JSX.Element;
+/** The button that opens and closes the popover. With `asChild`, your own button (e.g. a Button) instead. */
+export declare function PopoverTrigger({ asChild, style, children, ...rest }: PopoverTriggerProps): import('react').JSX.Element;
+/**
+ * The panel: glass, below the trigger (above it if there's no room), centred on
+ * it by default. A dialog to assistive tech; give it `aria-label` or a heading
+ * it's labelled by when it holds a form.
+ */
+export declare function PopoverContent({ align, offset, className, style, children, ...rest }: PopoverContentProps): import('react').JSX.Element;
+/**
+ * A button that closes its popover (after its own onClick, unless that calls
+ * preventDefault). Takes every Button prop: variant, size, asChild…
+ */
+export declare function PopoverClose({ onClick, ...rest }: ButtonProps): import('react').JSX.Element;
+export interface PopoverProps {
+    /** Open or close it from your state; leave it out to let the trigger do it. */
+    open?: boolean;
+    /** Open when it first appears. */
+    defaultOpen?: boolean;
+    /** Every open and close: the trigger, outside clicks, Escape, PopoverClose. */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+export interface PopoverTriggerProps extends ComponentProps<'button'> {
+    /** Put the trigger's props on your own button element instead of rendering one. */
+    asChild?: boolean;
+}
+export interface PopoverContentProps extends ComponentProps<'div'> {
+    /** Centred on the trigger (default), or lined up with its start or end edge. */
+    align?: 'start' | 'end' | 'center';
+    /** Gap from the trigger, in px. */
+    offset?: number;
 }
-type AriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
-type ComponentRole = 'select' | 'label' | 'combobox';
-type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAkD,MAAM,OAAO,CAAC;AAEvF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,+BA0HlD;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IACxE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AACD,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAC5F,KAAK,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC;AACrD,KAAK,SAAS,GACR,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,OAAO,GACP,aAAa,GACb,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,CAAC"}
+{"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"}