@rinzai/zen 0.5.0 → 0.6.0

package/README.md

@@ -57,9 +57,9 @@ export default function App() {
 ## What's inside
 
 - **Surfaces:** Card, Stat, Dialog, ConfirmDialog, Popover, Toast, Backdrop (aurora, contours or dots, and a pointer light)
-- **Inputs:** Button, Input, TextArea, InputGroup, MoneyInput, Select, Dropdown, MonthPicker, Segmented, Slider, Toggle, Field
+- **Inputs:** Button, Input, TextArea, InputGroup, MoneyInput, Select, Combobox, MonthPicker, Segmented, Slider, Toggle, Field
 - **Data:** composable Table with sticky edges and sorting, tree rows, editable cells, virtual rows, Meter, ProgressRing, AnimatedNumber
-- **Navigation:** Header, NavPills, Tabs, TabBar, SideNav, TableOfContents, ActionsMenu
+- **Navigation:** Header, Pills, Tabs, TabBar, SideNav, TableOfContents, Menu
 - **Theming:** dark and light, OKLCH tokens, and a theme generator (presets or any hue) that keeps contrast readable
 - **Hooks and utilities:** `useAnchoredPopup`, `useVirtualList`, `useTree`, `useSort`, money and month helpers, `cx` (Tailwind-aware class merging), `cva`
 

package/dist/animated-number/index.js

@@ -0,0 +1,33 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { formatMoney as t } from "../utils/money.js";
+import { useEffect as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region packages/animated-number/index.tsx
+var s = typeof window > "u" ? n : r, c = (e) => 1 - (1 - e) ** 3;
+function l({ value: t, format: n = String, duration: r = 650, fromZero: l = !0, className: u }) {
+	let [d, f] = a(l ? 0 : t), p = i(l ? 0 : t);
+	return s(() => {
+		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || document.documentElement.classList.contains("reduce-motion") || r <= 0) {
+			p.current = t, f(t);
+			return;
+		}
+		let e = p.current, n = performance.now(), i = requestAnimationFrame(function a(o) {
+			let s = Math.min(1, (o - n) / r), l = Math.round(e + (t - e) * c(s));
+			p.current = l, f(l), s < 1 && (i = requestAnimationFrame(a));
+		});
+		return () => cancelAnimationFrame(i);
+	}, [t, r]), /* @__PURE__ */ o("span", {
+		className: e("zen__animated-number tabular-nums", u),
+		children: n(d)
+	});
+}
+function u({ value: e, currency: n, locale: r, showDecimals: i = !1, ...a }) {
+	return /* @__PURE__ */ o(l, {
+		value: e,
+		format: (e) => t(e, n, r, { showDecimals: i }),
+		...a
+	});
+}
+//#endregion
+export { u as AnimatedMoney, l as default };

package/dist/avatar/index.js

@@ -0,0 +1,38 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/avatar/index.tsx
+function n({ src: n, name: r, alt: i, className: a }) {
+	let o = (r.trim()[0] ?? "?").toUpperCase();
+	return /* @__PURE__ */ t("span", {
+		role: i ? "img" : void 0,
+		"aria-label": i,
+		"aria-hidden": !i || void 0,
+		className: e("zen__avatar relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full font-semibold select-none", "size-9 text-sm", "text-primary-foreground bg-[radial-gradient(circle_at_30%_25%,oklch(var(--glow)/0.9),oklch(var(--primary)/0.55))]", "shadow-[0_0_0_1px_oklch(var(--tint)/0.12),0_0_18px_-6px_oklch(var(--glow)/calc(0.9*var(--glow-strength)))]", a),
+		children: n ? /* @__PURE__ */ t("img", {
+			src: n,
+			alt: "",
+			className: "size-full object-cover",
+			draggable: !1
+		}) : o
+	});
+}
+var r = class extends Error {};
+async function i(e, t = 160, n = .85) {
+	if (!e.type.startsWith("image/")) throw new r("Choose an image file.");
+	if (e.size > 20971520) throw new r("That image is too large (over 20 MB).");
+	let i;
+	try {
+		i = await createImageBitmap(e);
+	} catch {
+		throw new r("That image couldn't be read.");
+	}
+	let a = Math.min(i.width, i.height), o = document.createElement("canvas");
+	o.width = o.height = t;
+	let s = o.getContext("2d");
+	s.imageSmoothingQuality = "high", s.drawImage(i, (i.width - a) / 2, (i.height - a) / 2, a, a, 0, 0, t, t), i.close();
+	let c = o.toDataURL("image/webp", n);
+	return c.startsWith("data:image/webp") ? c : o.toDataURL("image/jpeg", n);
+}
+//#endregion
+export { r as ImageCropError, i as cropImageToSquare, n as default };

package/dist/backdrop/index.d.ts

@@ -1,14 +1,18 @@
+import { CSSProperties } from 'react';
 /**
  * Fixed page background: slow aurora glows over a faint pattern (topographic
  * contours or a dot grid), with a light that follows the pointer. It also
- * lights `.glow-edge` borders (cards, outline buttons, dialogs) near the
- * pointer. Render once, behind everything.
+ * lights `.glow-edge` and `.glow-border` borders (cards, outline buttons,
+ * dialogs, fields) near the pointer. Render once, behind everything.
  */
-export default function Backdrop({ pattern, topoSrc }: BackdropProps): import('react').JSX.Element;
+export default function Backdrop({ pattern, topoSrc, className, style }: BackdropProps): import('react').JSX.Element;
 export interface BackdropProps {
     /** Background pattern. Defaults to contours when `topoSrc` is given, dots otherwise. */
     pattern?: 'contours' | 'dots';
     /** URL of a contour-line image (strokes on transparent), used as a mask. */
     topoSrc?: string;
+    /** Classes for the backdrop layer (e.g. a view-transition-name). */
+    className?: string;
+    style?: CSSProperties;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/backdrop/index.tsx"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,aAAa,+BA2LnE;AAED,MAAM,WAAW,aAAa;IAC1B,wFAAwF;IACxF,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/backdrop/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,aAAa,+BA4LrF;AAED,MAAM,WAAW,aAAa;IAC1B,wFAAwF;IACxF,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB"}

package/dist/backdrop/index.js

@@ -0,0 +1,98 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { applyGraphicsMode as t } from "../utils/graphics.js";
+import { useEffect as n, useRef as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/backdrop/index.tsx
+function s({ pattern: s, topoSrc: c, className: l, style: u }) {
+	let d = s ?? (c ? "contours" : "dots"), f = r(null);
+	return n(() => {
+		let e = document.documentElement, n = f.current, r = 0, i = -9999, a = -9999, o = /* @__PURE__ */ new WeakSet(), s = !0, c = /* @__PURE__ */ new WeakMap(), l = (e, t, n, r = "--gx", i = "--gy") => {
+			let a = t + " " + n;
+			c.get(e) !== a && (c.set(e, a), e.style.setProperty(r, t), e.style.setProperty(i, n));
+		}, u = () => {
+			r = 0;
+			let e = Array.from(document.querySelectorAll(".glow-edge, .glow-border")), t = e.map((e) => e.getBoundingClientRect()), c = n?.getBoundingClientRect();
+			if (n && c) {
+				let e = s ? "out" : "in";
+				n.dataset.pointer !== e && (n.dataset.pointer = e);
+				let t = n.querySelector(".zen-light");
+				t && !s && l(t, `${Math.round(i - c.left)}px`, `${Math.round(a - c.top)}px`, "left", "top");
+			}
+			e.forEach((e, n) => {
+				let r = t[n];
+				i > r.left - 400 && i < r.right + 400 && a > r.top - 400 && a < r.bottom + 400 ? (l(e, `${Math.round(i - r.left)}px`, `${Math.round(a - r.top)}px`), o.delete(e)) : o.has(e) || (l(e, "-9999px", "-9999px"), o.add(e));
+			});
+		}, d = () => {
+			r ||= requestAnimationFrame(u);
+		}, p = (e) => {
+			i = e.clientX, a = e.clientY, s = !1, d();
+		}, m = () => {
+			i = a = -9999, s = !0, d();
+		};
+		if (window.matchMedia?.("(hover: none), (pointer: coarse)").matches || t() === "lite") return;
+		window.addEventListener("pointermove", p, { passive: !0 }), e.addEventListener("pointerleave", m);
+		let h = 0, g = () => {
+			clearTimeout(h), h = window.setTimeout(d, 120);
+		};
+		return window.addEventListener("scroll", g, {
+			passive: !0,
+			capture: !0
+		}), window.addEventListener("resize", d, { passive: !0 }), () => {
+			window.removeEventListener("pointermove", p), e.removeEventListener("pointerleave", m), window.removeEventListener("scroll", g, { capture: !0 }), clearTimeout(h), window.removeEventListener("resize", d), cancelAnimationFrame(r);
+		};
+	}, []), n(() => {
+		let e = f.current;
+		if (!c || !e || typeof document > "u") return;
+		let t = "", n = !1, r = 0, i = new Image();
+		i.src = c;
+		let a = async () => {
+			try {
+				await i.decode();
+				let r = window.devicePixelRatio || 1, a = Math.round(e.clientWidth * r), o = Math.round(e.clientHeight * r);
+				if (!a || !o) return;
+				let s = document.createElement("canvas");
+				s.width = a, s.height = o;
+				let c = i.naturalWidth || a, l = i.naturalHeight || o, u = Math.max(a / c, o / l);
+				s.getContext("2d")?.drawImage(i, (a - c * u) / 2, (o - l * u) / 2, c * u, l * u);
+				let d = await new Promise((e) => s.toBlob(e));
+				if (n || !d) return;
+				let f = URL.createObjectURL(d);
+				e.style.setProperty("--zen-topo", `url("${f}")`), t && URL.revokeObjectURL(t), t = f;
+			} catch {}
+		};
+		a();
+		let o = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => {
+			clearTimeout(r), r = window.setTimeout(a, 200);
+		});
+		return o?.observe(e), () => {
+			n = !0, clearTimeout(r), o?.disconnect(), t && URL.revokeObjectURL(t), e.style.setProperty("--zen-topo", `url("${c}")`);
+		};
+	}, [c]), /* @__PURE__ */ o("div", {
+		ref: f,
+		className: e("zen-backdrop", l),
+		"data-pattern": d,
+		"aria-hidden": !0,
+		style: {
+			...c && { "--zen-topo": `url("${c}")` },
+			...u
+		},
+		children: [
+			/* @__PURE__ */ a("div", { className: "zen-aurora" }),
+			d === "contours" ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", { className: "zen-topo" }), /* @__PURE__ */ a("div", {
+				className: "zen-topo zen-topo--lit",
+				children: /* @__PURE__ */ a("div", { className: "zen-light" })
+			})] }) : /* @__PURE__ */ o(i, { children: [
+				/* @__PURE__ */ a("div", { className: "zen-dots" }),
+				/* @__PURE__ */ a("div", { className: "zen-dots zen-dots--ambient" }),
+				/* @__PURE__ */ a("div", {
+					className: "zen-dots zen-dots--lit",
+					children: /* @__PURE__ */ a("div", { className: "zen-light" })
+				})
+			] }),
+			/* @__PURE__ */ a("div", { className: "zen-vignette" })
+		]
+	});
+}
+//#endregion
+export { s as default };

package/dist/badge/index.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from '../utils/cva';
 import { ComponentProps } from 'react';
 export default function Badge({ variant, className, ...rest }: BadgeProps): import('react').JSX.Element;
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
+    variant?: "outline" | "default" | "destructive" | "secondary" | null | undefined;
 } & ({
     class: import('../utils/cx').ClassValue;
     className?: never;

package/dist/badge/index.js

@@ -0,0 +1,24 @@
+"use client";
+import { cva as e } from "../utils/cva.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region packages/badge/index.tsx
+function n({ variant: e, className: n, ...i }) {
+	return /* @__PURE__ */ t("span", {
+		...i,
+		className: r({
+			variant: e,
+			className: n
+		})
+	});
+}
+var r = e("zen__badge inline-flex items-center rounded-md border px-1.5 py-0.5 text-[0.65rem] font-semibold tracking-wider uppercase whitespace-nowrap focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-glow/50", {
+	variants: { variant: {
+		default: "border-glow/30 bg-glow/10 text-primary",
+		secondary: "border-tint/10 bg-tint/[0.06] text-foreground",
+		destructive: "border-destructive/40 bg-destructive/15 text-destructive",
+		outline: "border-tint/10 text-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+export { n as default };

package/dist/button/index.d.ts

@@ -1,9 +1,14 @@
 import { VariantProps } from '../utils/cva';
 import { ComponentProps } from 'react';
-export default function Button({ className, variant, size, loading, disabled, type, children, ...rest }: ButtonProps): import('react').JSX.Element;
+/**
+ * A button in one of Zen's styles. With `asChild`, the styles go onto your own
+ * single child element instead, such as a router's Link (`loading` and `type`
+ * then don't apply).
+ */
+export default function Button({ className, variant, size, loading, disabled, type, asChild, children, ...rest }: ButtonProps): import('react').JSX.Element;
 export declare const buttonVariants: (props?: ({
-    variant?: "outline" | "link" | "default" | "icon" | "secondary" | "destructive" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+    variant?: "outline" | "link" | "default" | "icon" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | null | undefined;
 } & ({
     class: import('../utils/cx').ClassValue;
     className?: never;
@@ -17,5 +22,7 @@ export declare const buttonVariants: (props?: ({
 export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
     /** Shows a spinner and disables the button while an action runs. */
     loading?: boolean;
+    /** Put the button's styles on the single child element (e.g. a link) instead of a <button>. */
+    asChild?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/button/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,IAAe,EACf,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,WAAW,+BAcb;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;0BAoC1B,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC9F,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC3B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,IAAe,EACf,OAAe,EACf,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,WAAW,+BAqBb;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;0BAuC1B,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC9F,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/button/index.js

@@ -0,0 +1,54 @@
+"use client";
+import { Slot as e } from "../utils/slot.js";
+import { cva as t } from "../utils/cva.js";
+import n from "../spinner/index.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/button/index.tsx
+function a({ className: t, variant: a, size: s, loading: c = !1, disabled: l, type: u = "button", asChild: d = !1, children: f, ...p }) {
+	return d ? /* @__PURE__ */ r(e, {
+		...p,
+		className: o({
+			variant: a,
+			size: s,
+			className: t
+		}),
+		children: f
+	}) : /* @__PURE__ */ i("button", {
+		type: u,
+		disabled: l || c,
+		"aria-busy": c || void 0,
+		className: o({
+			variant: a,
+			size: s,
+			className: t
+		}),
+		...p,
+		children: [c && /* @__PURE__ */ r(n, {}), f]
+	});
+}
+var o = t("zen__button inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap outline-hidden select-none transition-[background-color,border-color,box-shadow,color,transform] duration-200 ease-out active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-glow/50 disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		variant: {
+			default: "bg-primary bg-[linear-gradient(to_bottom,oklch(1_0_0/0.16),transparent)] text-primary-foreground shadow-[0_0_0_1px_oklch(var(--glow)/0.55),0_0_22px_-6px_oklch(var(--glow)/0.7),inset_0_1px_0_hsl(0_0%_100%/0.3)] hover:shadow-[0_0_0_1px_oklch(var(--glow)/0.8),0_0_28px_-4px_oklch(var(--glow)/0.85),inset_0_1px_0_hsl(0_0%_100%/0.35)]",
+			secondary: "bg-primary/15 text-foreground shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.25)] hover:bg-primary/25",
+			outline: "glow-edge border border-tint/10 bg-tint/[0.03] text-foreground hover:border-tint/20 hover:bg-tint/[0.07]",
+			ghost: "text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground",
+			destructive: "bg-destructive/90 text-destructive-foreground shadow-[0_0_0_1px_oklch(var(--destructive)/0.6),0_0_22px_-8px_oklch(var(--destructive)/0.7)] hover:bg-destructive",
+			link: "h-auto! px-0! text-primary underline-offset-4 hover:underline",
+			icon: "text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground"
+		},
+		size: {
+			default: "h-10 px-4",
+			sm: "h-8 px-3 text-xs",
+			lg: "h-11 px-6",
+			icon: "size-9",
+			"icon-sm": "size-6 rounded-md"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+//#endregion
+export { o as buttonVariants, a as default };

package/dist/calendar/index.d.ts

@@ -0,0 +1,44 @@
+import { DateRange, DateString } from '../utils/date';
+import { Month } from '../utils/month';
+/**
+ * A month grid to pick a date, or a range of dates, fully keyboard-driven:
+ * arrows move by day and week, Home and End to the week's ends, Page Up and
+ * Down by month (with Shift, by year). The title opens a year and month grid
+ * to jump far. Dates are "YYYY-MM-DD" strings, so they never shift a day with
+ * time zones. Inline on a page, or in a popup with DatePicker.
+ */
+export default function Calendar(props: CalendarProps): import('react').JSX.Element;
+interface CalendarBaseProps {
+    /** Decides month and weekday names, and the first day of the week, e.g. "en-IN". */
+    locale: string;
+    /** Earliest date that can be picked ("YYYY-MM-DD"). */
+    min?: DateString;
+    /** Latest date that can be picked. */
+    max?: DateString;
+    /** Dates that can't be picked, e.g. weekends or booked days. */
+    isDisabled?: (date: DateString) => boolean;
+    /** 0 for Sunday … 6 for Saturday. Defaults to the locale's. */
+    weekStartsOn?: number;
+    /** Months shown side by side (e.g. 2 for ranges). */
+    months?: number;
+    /** Month shown first ("YYYY-MM"). Defaults to the chosen date's, or this month. */
+    defaultMonth?: Month;
+    /** Focus the chosen date (or today) when shown, e.g. in a popup. */
+    autoFocus?: boolean;
+    className?: string;
+}
+export interface CalendarSingleProps extends CalendarBaseProps {
+    mode?: 'single';
+    /** "YYYY-MM-DD", or null for none. */
+    value: DateString | null;
+    onChange: (date: DateString) => void;
+}
+export interface CalendarRangeProps extends CalendarBaseProps {
+    /** Pick a start and then an end; the days between are highlighted, previewed while pointing. */
+    mode: 'range';
+    value: DateRange | null;
+    onChange: (range: DateRange) => void;
+}
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/calendar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,SAAS,EACd,KAAK,UAAU,EAOlB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAA0B,KAAK,KAAK,EAA6B,MAAM,kBAAkB,CAAC;AAGjG;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAsRpD;AAOD,UAAU,iBAAiB;IACvB,oFAAoF;IACpF,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,sCAAsC;IACtC,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,gEAAgE;IAChE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAC3C,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC1D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,sCAAsC;IACtC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IACzD,gGAAgG;IAChG,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC"}

package/dist/calendar/index.js

@@ -0,0 +1,161 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import t from "../icons/chevron-left.js";
+import n from "../icons/chevron-right.js";
+import { addMonths as r, formatMonth as i, monthNames as a, monthsBetween as o } from "../utils/month.js";
+import { addDays as s, addMonthsToDate as c, dayOfWeek as l, daysInMonth as u, formatDate as ee, today as d, weekStart as f, weekdayNames as p } from "../utils/date.js";
+import { useEffect as m, useId as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region packages/calendar/index.tsx
+function b(b) {
+	let { locale: S, min: C, max: w, isDisabled: ne, weekStartsOn: T = f(S), months: E = 1, defaultMonth: re, className: D, autoFocus: ie } = b, O = b.mode === "range" ? b.value : null, k = b.mode === "range" ? null : b.value, A = k ?? O?.start ?? null, j = d(), [M, N] = _(() => re ?? (A ?? j).slice(0, 7)), [P, F] = _(() => A ?? j), [I, L] = _(null), [R, z] = _("days"), [B, V] = _(() => Number(M.slice(0, 4))), H = g(null), U = g(ie ?? !1), W = h(), G = r(M, E - 1), K = (e) => e.slice(0, 7) >= M && e.slice(0, 7) <= G, q = (e) => !!C && e < C || !!w && e > w || !!ne?.(e), J = K(P) ? P : c(P, o(P.slice(0, 7), M));
+	m(() => {
+		U.current && (U.current = !1, H.current?.querySelector(`[data-date="${J}"]`)?.focus());
+	}, [J, R]);
+	let ae = (e) => {
+		C && e < C && (e = C), w && e > w && (e = w), U.current = !0, F(e), K(e) || N(e < M ? e.slice(0, 7) : r(e.slice(0, 7), -(E - 1)));
+	}, oe = (e) => {
+		if (!q(e)) {
+			if (F(e), b.mode === "range") {
+				let t = b.value;
+				!t || t.end !== null ? b.onChange({
+					start: e,
+					end: null
+				}) : b.onChange(e < t.start ? {
+					start: e,
+					end: t.start
+				} : {
+					start: t.start,
+					end: e
+				});
+			} else b.onChange(e);
+		}
+	}, se = (e) => {
+		let t = J, n = (l(t) - T + 7) % 7, r = {
+			ArrowLeft: s(t, -1),
+			ArrowRight: s(t, 1),
+			ArrowUp: s(t, -7),
+			ArrowDown: s(t, 7),
+			Home: s(t, -n),
+			End: s(t, 6 - n),
+			PageUp: c(t, e.shiftKey ? -12 : -1),
+			PageDown: c(t, e.shiftKey ? 12 : 1)
+		}[e.key];
+		r && (e.preventDefault(), ae(r));
+	}, Y = O && O.end === null ? O.start : null, ce = Y && I ? I < Y ? [I, Y] : [Y, I] : null, [X, Z] = O?.end ? [O.start, O.end] : ce ?? [null, null], Q = (e) => {
+		N((t) => r(t, e));
+	}, $ = /* @__PURE__ */ y("div", {
+		className: "mb-2 flex items-center justify-between gap-2",
+		children: [
+			/* @__PURE__ */ v("button", {
+				type: "button",
+				"aria-label": R === "days" ? "Previous month" : "Previous year",
+				onClick: () => R === "days" ? Q(-1) : V((e) => e - 1),
+				className: x,
+				children: /* @__PURE__ */ v(t, { className: "size-4" })
+			}),
+			/* @__PURE__ */ v("button", {
+				type: "button",
+				id: W,
+				"aria-live": "polite",
+				"aria-label": R === "days" ? `${i(M, S, "long")}, choose month and year` : `${B}, back to days`,
+				onClick: () => {
+					V(Number(M.slice(0, 4))), z((e) => e === "days" ? "months" : "days");
+				},
+				className: "hover:bg-tint/[0.07] focus-visible:ring-ring/50 rounded-md px-2 py-1 text-sm font-semibold tabular-nums outline-hidden transition-colors focus-visible:ring-2",
+				children: R === "days" ? E === 1 ? i(M, S, "long") : `${i(M, S)} – ${i(G, S)}` : B
+			}),
+			/* @__PURE__ */ v("button", {
+				type: "button",
+				"aria-label": R === "days" ? "Next month" : "Next year",
+				onClick: () => R === "days" ? Q(1) : V((e) => e + 1),
+				className: x,
+				children: /* @__PURE__ */ v(n, { className: "size-4" })
+			})
+		]
+	});
+	if (R === "months") {
+		let t = a(S);
+		return /* @__PURE__ */ y("div", {
+			className: e("zen__calendar w-fit", D),
+			children: [$, /* @__PURE__ */ v("div", {
+				className: "grid w-64 grid-cols-3 gap-1",
+				role: "group",
+				"aria-labelledby": W,
+				children: t.map((t, n) => {
+					let r = `${B}-${String(n + 1).padStart(2, "0")}`, a = !!C && r < C.slice(0, 7) || !!w && r > w.slice(0, 7);
+					return /* @__PURE__ */ v("button", {
+						type: "button",
+						disabled: a,
+						"aria-pressed": r === M,
+						"aria-label": i(r, S, "long"),
+						onClick: () => {
+							N(r), U.current = !0, F(c(P, o(P.slice(0, 7), r))), z("days");
+						},
+						className: e("rounded-lg py-2 text-sm outline-hidden transition-colors disabled:cursor-not-allowed disabled:opacity-35", "focus-visible:ring-ring/50 focus-visible:ring-2", r === M ? "bg-primary text-primary-foreground" : "hover:bg-tint/[0.07]"),
+						children: t
+					}, r);
+				})
+			})]
+		});
+	}
+	let le = p(S, "narrow"), ue = p(S, "long"), de = Array.from({ length: 7 }, (e, t) => (T + t) % 7);
+	return /* @__PURE__ */ y("div", {
+		className: e("zen__calendar w-fit", D),
+		children: [$, /* @__PURE__ */ v("div", {
+			ref: H,
+			className: "flex gap-4",
+			onKeyDown: se,
+			onMouseLeave: () => L(null),
+			children: Array.from({ length: E }, (t, n) => {
+				let a = r(M, n), o = `${a}-01`, c = `${a}-${u(a)}`, d = s(o, -((l(o) - T + 7) % 7));
+				return /* @__PURE__ */ y("table", {
+					role: "grid",
+					"aria-label": i(a, S, "long"),
+					className: "border-separate border-spacing-x-0 border-spacing-y-0.5",
+					children: [
+						E > 1 && /* @__PURE__ */ v("caption", {
+							className: "text-muted-foreground pb-1 text-xs font-medium",
+							children: i(a, S, "long")
+						}),
+						/* @__PURE__ */ v("thead", { children: /* @__PURE__ */ v("tr", { children: de.map((e) => /* @__PURE__ */ v("th", {
+							scope: "col",
+							abbr: ue[e],
+							className: "text-muted-foreground size-9 text-xs font-medium",
+							children: le[e]
+						}, e)) }) }),
+						/* @__PURE__ */ v("tbody", { children: Array.from({ length: 6 }, (t, n) => /* @__PURE__ */ v("tr", { children: Array.from({ length: 7 }, (t, r) => {
+							let i = s(d, n * 7 + r), l = i.slice(0, 7) === a;
+							if (!l && E > 1) return /* @__PURE__ */ v("td", { role: "gridcell" }, i);
+							let u = i === X, f = i === Z, p = !!X && !!Z && i > X && i < Z, m = i === k || i === O?.start || i === O?.end, h = q(i);
+							return /* @__PURE__ */ v("td", {
+								role: "gridcell",
+								"aria-selected": m || p || void 0,
+								className: e("p-0", (p || (u || f) && X !== Z) && "bg-primary/15", u && "rounded-l-lg", f && "rounded-r-lg", p && (r === 0 || E > 1 && i === o) && "rounded-l-lg", p && (r === 6 || E > 1 && i === c) && "rounded-r-lg"),
+								children: /* @__PURE__ */ v("button", {
+									type: "button",
+									"data-date": i,
+									tabIndex: i === J ? 0 : -1,
+									"aria-label": ee(i, S, "full"),
+									"aria-pressed": m,
+									"aria-disabled": h || void 0,
+									"aria-current": i === j ? "date" : void 0,
+									onClick: () => oe(i),
+									onFocus: () => {
+										F(i), Y && L(i);
+									},
+									onMouseEnter: () => Y && L(i),
+									className: e(te, !l && "text-muted-foreground/45", h && "cursor-not-allowed opacity-35", m ? "bg-primary text-primary-foreground shadow-[0_0_20px_-4px_oklch(var(--glow)/0.8)]" : !h && "hover:bg-tint/[0.08]", i === j && "after:bg-primary after:absolute after:bottom-1 after:left-1/2 after:size-1 after:-translate-x-1/2 after:rounded-full", i === j && m && "after:bg-primary-foreground"),
+									children: Number(i.slice(8))
+								})
+							}, i);
+						}) }, n)) })
+					]
+				}, a);
+			})
+		})]
+	});
+}
+var x = "text-muted-foreground hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 grid size-8 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", te = "relative grid size-9 place-items-center rounded-lg text-sm tabular-nums outline-hidden transition-[background-color,color,box-shadow] duration-150 focus-visible:ring-2 focus-visible:ring-ring/60";
+//#endregion
+export { b as default };

package/dist/card/index.d.ts

@@ -1,6 +1,15 @@
 import { ComponentProps, ReactNode } from 'react';
-/** Glass panel whose border catches the pointer light. */
-export default function Card({ title, action, children, className, ...rest }: CardProps): import('react').JSX.Element;
+/**
+ * Glass panel whose border catches the pointer light. For a title with an
+ * action beside it, start it with a CardHeader holding a CardTitle and the action.
+ */
+export default function Card({ className, ...rest }: CardProps): import('react').JSX.Element;
+/** The top row of a Card: its title, and an action (a button, a menu) at the end. */
+export declare function CardHeader({ className, ...rest }: ComponentProps<'header'>): import('react').JSX.Element;
+/** A line under the CardTitle: what the card is about, or a figure's context ("₹12L at 8.5% · 20 years"). */
+export declare function CardDescription({ className, ...rest }: ComponentProps<'p'>): import('react').JSX.Element;
+/** The card's title: an h4 by default; with `asChild`, your own heading (an h2, say) gets its look. */
+export declare function CardTitle({ asChild, className, children, ...rest }: CardTitleProps): import('react').JSX.Element;
 /** A single figure with a label, e.g. "Revenue  $12,400". */
 export declare function Stat({ label, value, hint, tone, className }: StatProps): import('react').JSX.Element;
 /** Row of stats: two columns on phones (an odd last one spans both), three from `sm` up. */
@@ -8,10 +17,10 @@ export declare function StatRow({ children, className }: {
     children: ReactNode;
     className?: string;
 }): import('react').JSX.Element;
-export interface CardProps extends Omit<ComponentProps<'section'>, 'title'> {
-    title?: ReactNode;
-    /** Shown at the end of the header, e.g. a button or menu. */
-    action?: ReactNode;
+export type CardProps = ComponentProps<'section'>;
+export interface CardTitleProps extends ComponentProps<'h4'> {
+    /** Put the title's look on your own heading element instead of an h4. */
+    asChild?: boolean;
 }
 export interface StatProps {
     label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/card/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,0DAA0D;AAC1D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAetF;AAED,6DAA6D;AAC7D,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAgB,EAAE,SAAS,EAAE,EAAE,SAAS,+BAkBlF;AAED,4FAA4F;AAC5F,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3F;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAO7D;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BAE1E;AAED,6GAA6G;AAC7G,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,+BAE1E;AAED,uGAAuG;AACvG,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAIlF;AAED,6DAA6D;AAC7D,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAgB,EAAE,SAAS,EAAE,EAAE,SAAS,+BAkBlF;AAED,4FAA4F;AAC5F,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3F;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAElD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IACxD,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}