@rinzai/zen 0.11.0 → 0.14.0

package/README.md

@@ -40,13 +40,16 @@ The look is set in [Geist](https://vercel.com/font); load it however you like.
 ## Usage
 
 ```tsx
-import { Backdrop, Button, Card } from '@rinzai/zen';
+import { Backdrop, Button, Card, CardHeader, CardTitle } from '@rinzai/zen';
 
 export default function App() {
     return (
         <>
             <Backdrop />
-            <Card title="Budget">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Budget</CardTitle>
+                </CardHeader>
                 <Button>Save changes</Button>
             </Card>
         </>
@@ -56,14 +59,31 @@ export default function App() {
 
 ## What's inside
 
-- **Surfaces:** Card, Inset, Alert, Stat, Dialog (and sheets from an edge), ConfirmDialog, Popover, Tooltip, Toast (a stacked deck), Disclosure, Backdrop (aurora, contours or dots, and a pointer light)
-- **Inputs:** Button, Input, TextArea, InputGroup, MoneyInput (with currency conversion), Select, Combobox, Calendar, DatePicker, DateRangePicker, MonthPicker, ColorPicker, Checkbox, RadioGroup, RadioCards, Segmented, Slider, Toggle, Chip, Field
-- **Data:** Chart (areas, lines, bars) and DonutChart in plain SVG, composable Table with sticky edges and sorting, tree rows, editable cells, virtual rows, Meter, ProgressRing, AnimatedNumber, Badge, StatusPill (a live save status), Skeleton, Spinner, Canvas (items placed freely, with snapping)
-- **Navigation:** Header, Pills, Tabs, TabBar, SideNav, TableOfContents, Menu
+- **Surfaces:** Card, Inset, Alert, Stat, Dialog (and sheets from an edge), ConfirmDialog, Popover, Tooltip, HoverCard, Toast (a stacked deck), Disclosure, Accordion, Separator, Resizable panels, Carousel, Backdrop (aurora, contours or dots, and a pointer light)
+- **Inputs:** Button, ButtonGroup, Toggle, ToggleGroup, Toolbar, Input, TextArea, InputGroup, NumberField, TimeField, MoneyInput (with currency conversion), Select, Combobox, Calendar, DatePicker, DateRangePicker, MonthPicker, ColorPicker, Checkbox, RadioGroup, RadioCards, Segmented, Slider, Chip, Field
+- **Data:** Chart (areas, lines, bars) and DonutChart in plain SVG, composable Table with sticky edges, sorting and rows reordered by drag and drop, tree rows, editable cells, virtual rows, SortableList and SortableTree, Meter, ProgressRing, AnimatedNumber, Badge, StatusPill (a live save status), Skeleton, Spinner, Canvas (items placed freely, with snapping)
+- **Navigation:** Header, NavigationMenu, Pills, Tabs, TabBar, SideNav, TableOfContents, Menu (with submenus, checkbox and radio items, and context menus), Menubar
 - **Theming:** dark and light, OKLCH tokens, and a theme generator (presets or any hue) that keeps contrast readable
+- **Languages:** LocaleProvider for the locale and every word, and right-to-left layout
 - **Hooks and utilities:** `themeWave` (the theme spreads from the switch like a drop falling into water: ripples, glints and a rainbow edge, drawn on the GPU; `prepareThemeWave` readies it when the pointer reaches your own switch), `useAnchoredPopup`, `useVirtualList`, `useTree`, `useSort`, `useCopyToClipboard`, money, currency, month and date helpers, `hexToOklch` and `oklchToHex`, `cx` (Tailwind-aware class merging), `cva`
 
-Every component takes `className`, and a class you pass always overrides the component's default.
+Every component takes `className`, and a class you pass always overrides the component's default. Other props (`id`, `aria-*`, `data-*`, handlers) and `ref` reach its element, and parts that render a link or button take `asChild` to use your own (a router's Link, say).
+
+## Values and forms
+
+Controls report changes with `onValueChange` (`onCheckedChange` for Checkbox and Toggle). Pass `value` to control one, or `defaultValue` to let it keep its own. Give a control a `name` and it's submitted with its form, the custom ones (Combobox, the date pickers, MoneyInput, ColorPicker, TagInput…) included, and goes back to its first value when the form is reset.
+
+## Languages and right to left
+
+```tsx
+import { LocaleProvider } from '@rinzai/zen';
+
+<LocaleProvider locale="fr-FR" messages={{ clear: 'Effacer', noResults: 'Aucun résultat' }}>
+    <App />
+</LocaleProvider>;
+```
+
+The locale formats dates, numbers and money, and sets the week's first day. `messages` replaces any of the words Zen shows or announces (`ENGLISH` lists them all); the rest stay English. With `dir="rtl"` on the page or any element above, layout, arrow keys and chevrons mirror.
 
 ## Theming
 
@@ -84,6 +104,16 @@ import { applyPreset, applyTheme, DEFAULT_THEME } from '@rinzai/zen';
 applyTheme(applyPreset(DEFAULT_THEME, 'ocean'));
 ```
 
+## Overlays
+
+For a page composited over something else, such as an OBS browser source, which never gets a pointer:
+
+```html
+<html data-zen-glow="ambient" data-zen-page="transparent"></html>
+```
+
+`data-zen-glow="ambient"` sends the edge light round each glowing border by itself (on any element, it does so for what's inside). `data-zen-page="transparent"` paints nothing behind the content; it needs the base stylesheet.
+
 ## Browser support
 
 Chrome and Edge 114+, Safari 17+ and Firefox 128+: the versions with the native Popover API that popups, menus and toasts are built on, and with what Tailwind v4 needs.

package/dist/accordion/index.d.ts

@@ -0,0 +1,41 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * Sections under headings that open one at a time (or several, with
+ * `multiple`), e.g. questions and answers. Each AccordionItem is a Disclosure:
+ * an AccordionTrigger and an AccordionContent that grows open and folds shut.
+ * ↑↓ move between the headings, Home and End jump to the first and last.
+ */
+export default function Accordion(props: AccordionProps): import('react').JSX.Element;
+/** One section: an AccordionTrigger and its AccordionContent. */
+export declare function AccordionItem({ value, className, ...rest }: AccordionItemProps): import('react').JSX.Element;
+/** The heading and its button: your label, and a chevron that turns over while open. */
+export declare function AccordionTrigger({ level, className, onClick, children, ...rest }: AccordionTriggerProps): import('react').JSX.Element;
+/** What the trigger shows and hides; only in the page while open (or folding shut). */
+export declare function AccordionContent({ className, ...rest }: ComponentProps<'div'>): import('react').JSX.Element;
+interface AccordionBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue'> {
+    children?: ReactNode;
+}
+export type AccordionProps = AccordionBaseProps & ({
+    /** One section open at a time (the default); opening one closes the other. */
+    multiple?: false;
+    /** The open section's value, or null for none, when you keep it. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+} | {
+    /** Any number open at once. */
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: readonly string[]) => void;
+});
+export interface AccordionItemProps extends ComponentProps<'div'> {
+    /** Names the section in the Accordion's value. */
+    value: string;
+}
+export interface AccordionTriggerProps extends ComponentProps<'button'> {
+    /** The heading level it sits in, to fit the page's outline. Default 3. */
+    level?: 2 | 3 | 4 | 5 | 6;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/accordion/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAgC,SAAS,EAAc,MAAM,OAAO,CAAC;AAe5F;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,+BAwCtD;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,+BAQ9E;AAED,wFAAwF;AACxF,wBAAgB,gBAAgB,CAAC,EAAE,KAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,+BAwB3G;AAED,uFAAuF;AACvF,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAE7E;AAED,UAAU,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,cAAc,CAAC;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC3C,CACM;IACI,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD,GACD;IACI,+BAA+B;IAC/B,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;CACtD,CACN,CAAC;AAEN,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7D,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACnE,0EAA0E;IAC1E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC7B"}

package/dist/accordion/index.js

@@ -0,0 +1,81 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useControllable as t } from "../utils/useControllable.js";
+import { FieldChevron as n } from "../utils/field-chevron.js";
+import r, { DisclosureContent as i, useDisclosure as a } from "../disclosure/index.js";
+import { createContext as o, useContext as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/accordion/index.tsx
+var u = o(null);
+function d(e) {
+	let t = s(u);
+	if (!t) throw Error(`<${e}> must be inside <Accordion>`);
+	return t;
+}
+function f(n) {
+	let { multiple: r, value: i, defaultValue: a, onValueChange: o, className: s, onKeyDown: l, ...d } = n, [f, p] = t(i, a ?? (r ? [] : null), o), m = typeof f == "string" ? [f] : f ?? [], h = {
+		isOpen: (e) => m.includes(e),
+		setOpen: (e, t) => {
+			p(r ? t ? [...m, e] : m.filter((t) => t !== e) : t ? e : null);
+		}
+	}, g = (e) => {
+		l?.(e);
+		let t = e.currentTarget, n = [...t.querySelectorAll(".zen__accordion-trigger:not(:disabled)")].filter((e) => e.closest(".zen__accordion") === t), r = n.indexOf(e.target);
+		if (r === -1) return;
+		let i = {
+			ArrowDown: r + 1,
+			ArrowUp: r - 1,
+			Home: 0,
+			End: n.length - 1
+		}[e.key];
+		i !== void 0 && (e.preventDefault(), n[(i + n.length) % n.length].focus());
+	};
+	return /* @__PURE__ */ c(u.Provider, {
+		value: h,
+		children: /* @__PURE__ */ c("div", {
+			...d,
+			onKeyDown: g,
+			className: e("zen__accordion divide-tint/[0.07] flex flex-col divide-y", s)
+		})
+	});
+}
+function p({ value: t, className: n, ...i }) {
+	let a = d("AccordionItem"), o = a.isOpen(t);
+	return /* @__PURE__ */ c(r, {
+		open: o,
+		onOpenChange: (e) => a.setOpen(t, e),
+		children: /* @__PURE__ */ c("div", {
+			"data-open": o || void 0,
+			className: e("zen__accordion-item", n),
+			...i
+		})
+	});
+}
+function m({ level: t = 3, className: r, onClick: i, children: o, ...s }) {
+	let { open: u, setOpen: d, contentId: f } = a("AccordionTrigger"), p = `h${t}`;
+	return /* @__PURE__ */ c(p, {
+		className: "m-0! font-[inherit] text-[length:inherit]",
+		children: /* @__PURE__ */ l("button", {
+			type: "button",
+			"aria-expanded": u,
+			"aria-controls": u ? f : void 0,
+			onClick: (e) => {
+				i?.(e), e.defaultPrevented || d(!u);
+			},
+			className: e("zen__accordion-trigger group text-muted-foreground hover:text-foreground aria-expanded:text-foreground focus-ring flex w-full cursor-pointer items-center justify-between gap-3 rounded-md py-3.5 text-start text-sm font-medium transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50", r),
+			...s,
+			children: [o, /* @__PURE__ */ c(n, {
+				open: u,
+				className: "ease-out-soft text-inherit"
+			})]
+		})
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ c(i, {
+		className: e("text-muted-foreground pt-0 pb-4 text-sm", t),
+		...n
+	});
+}
+//#endregion
+export { h as AccordionContent, p as AccordionItem, m as AccordionTrigger, f as default };

package/dist/animated-number/index.d.ts

@@ -8,10 +8,11 @@ import { Money } from '../utils/money';
  */
 export default function AnimatedNumber({ value, format, duration, fromZero, roll, className, }: AnimatedNumberProps): import('react').JSX.Element;
 /** An amount of money (minor units) that counts to each new value. */
-export declare function AnimatedMoney({ value, currency, locale, showDecimals, ...rest }: Omit<AnimatedNumberProps, 'format' | 'value'> & {
+export declare function AnimatedMoney({ value, currency, locale: localeProp, showDecimals, ...rest }: Omit<AnimatedNumberProps, 'format' | 'value'> & {
     value: Money;
     currency: string;
-    locale: string;
+    /** Defaults to the LocaleProvider's. */
+    locale?: string;
     showDecimals?: boolean;
 }): import('react').JSX.Element;
 export interface AnimatedNumberProps {

package/dist/animated-number/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/animated-number/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAO3D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,KAAK,EACL,MAAe,EACf,QAAc,EACd,QAAe,EACf,IAAY,EACZ,SAAS,GACZ,EAAE,mBAAmB,+BAiDrB;AAoBD,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,YAAoB,EACpB,GAAG,IAAI,EACV,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,+BAIA;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/animated-number/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAO3D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,KAAK,EACL,MAAe,EACf,QAAc,EACd,QAAe,EACf,IAAY,EACZ,SAAS,GACZ,EAAE,mBAAmB,+BAiDrB;AAoBD,sEAAsE;AACtE,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,YAAoB,EACpB,GAAG,IAAI,EACV,EAAE,IAAI,CAAC,mBAAmB,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,+BAKA;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/animated-number/index.js

@@ -1,55 +1,56 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { formatMoney as t } from "../utils/money.js";
-import { reducedMotion as n } from "../utils/motion.js";
-import { useEffect as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useLocale as t } from "../locale-provider/index.js";
+import { formatMoney as n } from "../utils/money.js";
+import { reducedMotion as r } from "../utils/motion.js";
+import { useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region packages/animated-number/index.tsx
-var l = typeof window > "u" ? r : i, u = (e) => 1 - (1 - e) ** 3;
-function d({ value: t, format: i = String, duration: d = 650, fromZero: f = !0, roll: m = !1, className: h }) {
-	let [g, _] = o(f ? 0 : t), v = a(f ? 0 : t), [y, b] = o(!f);
-	if (r(() => {
-		if (!m || y) return;
+var u = typeof window > "u" ? i : a, d = (e) => 1 - (1 - e) ** 3;
+function f({ value: t, format: n = String, duration: a = 650, fromZero: f = !0, roll: p = !1, className: h }) {
+	let [g, _] = s(f ? 0 : t), v = o(f ? 0 : t), [y, b] = s(!f);
+	if (i(() => {
+		if (!p || y) return;
 		let e = requestAnimationFrame(() => b(!0));
 		return () => cancelAnimationFrame(e);
-	}, [m, y]), l(() => {
-		if (m) return;
-		if (n() || d <= 0) {
+	}, [p, y]), u(() => {
+		if (p) return;
+		if (r() || a <= 0) {
 			v.current = t, _(t);
 			return;
 		}
-		let e = v.current, r = performance.now(), i = requestAnimationFrame(function n(a) {
-			let o = Math.min(1, (a - r) / d), s = Math.round(e + (t - e) * u(o));
-			v.current = s, _(s), o < 1 && (i = requestAnimationFrame(n));
+		let e = v.current, n = performance.now(), i = requestAnimationFrame(function r(o) {
+			let s = Math.min(1, (o - n) / a), c = Math.round(e + (t - e) * d(s));
+			v.current = c, _(c), s < 1 && (i = requestAnimationFrame(r));
 		});
 		return () => cancelAnimationFrame(i);
 	}, [
 		t,
-		d,
-		m
-	]), m) {
-		let n = i(t);
-		return /* @__PURE__ */ c("span", {
+		a,
+		p
+	]), p) {
+		let r = n(t);
+		return /* @__PURE__ */ l("span", {
 			className: e("zen__animated-number inline-flex items-start tabular-nums", h),
-			children: [/* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ c("span", {
 				className: "sr-only",
-				children: n
-			}), /* @__PURE__ */ s("span", {
+				children: r
+			}), /* @__PURE__ */ c("span", {
 				"aria-hidden": !0,
 				className: "inline-flex items-start",
-				children: n.split("").map((e, t) => /\d/.test(e) ? /* @__PURE__ */ s(p, {
+				children: r.split("").map((e, t) => /\d/.test(e) ? /* @__PURE__ */ c(m, {
 					digit: y ? Number(e) : 0,
-					duration: d
-				}, n.length - t) : /* @__PURE__ */ s("span", { children: e }, n.length - t))
+					duration: a
+				}, r.length - t) : /* @__PURE__ */ c("span", { children: e }, r.length - t))
 			})]
 		});
 	}
-	return /* @__PURE__ */ s("span", {
+	return /* @__PURE__ */ c("span", {
 		className: e("zen__animated-number tabular-nums", h),
-		children: i(g)
+		children: n(g)
 	});
 }
-var f = [
+var p = [
 	0,
 	1,
 	2,
@@ -61,25 +62,26 @@ var f = [
 	8,
 	9
 ];
-function p({ digit: e, duration: t }) {
-	return /* @__PURE__ */ s("span", {
+function m({ digit: e, duration: t }) {
+	return /* @__PURE__ */ c("span", {
 		className: "inline-block h-[1lh] overflow-hidden",
-		children: /* @__PURE__ */ s("span", {
+		children: /* @__PURE__ */ c("span", {
 			className: "zen__digit ease-out-soft flex flex-col transition-[translate]",
 			style: {
 				translate: `0 ${-e * 10}%`,
 				transitionDuration: `${t}ms`
 			},
-			children: f.map((e) => /* @__PURE__ */ s("span", { children: e }, e))
+			children: p.map((e) => /* @__PURE__ */ c("span", { children: e }, e))
 		})
 	});
 }
-function m({ value: e, currency: n, locale: r, showDecimals: i = !1, ...a }) {
-	return /* @__PURE__ */ s(d, {
+function h({ value: e, currency: r, locale: i, showDecimals: a = !1, ...o }) {
+	let s = t(i);
+	return /* @__PURE__ */ c(f, {
 		value: e,
-		format: (e) => t(e, n, r, { showDecimals: i }),
-		...a
+		format: (e) => n(e, r, s, { showDecimals: a }),
+		...o
 	});
 }
 //#endregion
-export { m as AnimatedMoney, d as default };
+export { h as AnimatedMoney, f as default };

package/dist/avatar/index.d.ts

@@ -1,9 +1,13 @@
+import { ComponentProps } from 'react';
 /**
  * Round profile picture; without an image, the name's initial on the glowing
  * accent. Decorative (hidden from screen readers) unless you give it `alt`.
  */
-export default function Avatar({ src, name, alt, className }: AvatarProps): import('react').JSX.Element;
+export default function Avatar({ src, name, alt, className, ...rest }: AvatarProps): import('react').JSX.Element;
+/** `reason` says what went wrong, so you can say it in your own words; `message` says it in English. */
 export declare class ImageCropError extends Error {
+    readonly reason: 'not-an-image' | 'too-large' | 'unreadable';
+    constructor(reason: 'not-an-image' | 'too-large' | 'unreadable', message: string);
 }
 /**
  * Crops an image file to a centred square and resizes it in the browser (to
@@ -11,7 +15,8 @@ export declare class ImageCropError extends Error {
  * Handy for profile pictures you store yourself.
  */
 export declare function cropImageToSquare(file: Blob, size?: number, quality?: number): Promise<string>;
-export interface AvatarProps {
+/** Other props (data-*, an id, a title) go on the avatar's outer element. */
+export interface AvatarProps extends Omit<ComponentProps<'span'>, 'children'> {
     /** Image URL (or data URL); without it, or if it fails to load, the initial is shown. */
     src?: string | null;
     /** Name or email, for the initial. */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/avatar/index.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,WAAW,+BA+BxE;AAED,qBAAa,cAAe,SAAQ,KAAK;CAAG;AAE5C;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,SAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAkB/F;AAED,MAAM,WAAW,WAAW;IACxB,yFAAyF;IACzF,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/avatar/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAgCjF;AAED,wGAAwG;AACxG,qBAAa,cAAe,SAAQ,KAAK;IAEjC,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,WAAW,GAAG,YAAY;gBAAnD,MAAM,EAAE,cAAc,GAAG,WAAW,GAAG,YAAY,EAC5D,OAAO,EAAE,MAAM;CAItB;AAED;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,SAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAkB/F;AAED,6EAA6E;AAC7E,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACzE,yFAAyF;IACzF,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/avatar/index.js

@@ -3,34 +3,40 @@ import { cx as e } from "../utils/cx.js";
 import { useState as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region packages/avatar/index.tsx
-function i({ src: i, name: a, alt: o, className: s }) {
-	let c = (a.trim()[0] ?? "?").toUpperCase(), [l, u] = t(null), d = i && i !== l ? i : null;
+function i({ src: i, name: a, alt: o, className: s, ...c }) {
+	let l = (a.trim()[0] ?? "?").toUpperCase(), [u, d] = t(null), f = i && i !== u ? i : null;
 	return /* @__PURE__ */ r("span", {
 		role: o ? "img" : void 0,
 		"aria-label": o,
 		"aria-hidden": !o || void 0,
+		...c,
 		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)))]", s),
 		children: [/* @__PURE__ */ n("span", {
-			className: d ? "invisible" : void 0,
-			children: c
-		}), d && /* @__PURE__ */ n("img", {
-			src: d,
+			className: f ? "invisible" : void 0,
+			children: l
+		}), f && /* @__PURE__ */ n("img", {
+			src: f,
 			alt: "",
-			onError: () => u(d),
+			onError: () => d(f),
 			className: "absolute inset-0 size-full object-cover",
 			draggable: !1
 		})]
 	});
 }
-var a = class extends Error {};
+var a = class extends Error {
+	reason;
+	constructor(e, t) {
+		super(t), this.reason = e;
+	}
+};
 async function o(e, t = 160, n = .85) {
-	if (!e.type.startsWith("image/")) throw new a("Choose an image file.");
-	if (e.size > 20971520) throw new a("That image is too large (over 20 MB).");
+	if (!e.type.startsWith("image/")) throw new a("not-an-image", "Choose an image file.");
+	if (e.size > 20971520) throw new a("too-large", "That image is too large (over 20 MB).");
 	let r;
 	try {
 		r = await createImageBitmap(e);
 	} catch {
-		throw new a("That image couldn't be read.");
+		throw new a("unreadable", "That image couldn't be read.");
 	}
 	let i = Math.min(r.width, r.height), o = document.createElement("canvas");
 	o.width = o.height = t;

package/dist/backdrop/index.d.ts

@@ -1,18 +1,18 @@
-import { CSSProperties } from 'react';
+import { ComponentProps } 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` and `.glow-border` borders (cards, outline buttons,
  * dialogs, fields) near the pointer. Render once, behind everything.
  */
-export default function Backdrop({ pattern, topoSrc, className, style }: BackdropProps): import('react').JSX.Element;
-export interface BackdropProps {
+export default function Backdrop({ pattern, topoSrc, className, style, ref: refProp, ...rest }: BackdropProps): import('react').JSX.Element;
+/** Other props (data-*, an id) go on the backdrop layer. */
+export interface BackdropProps extends Omit<ComponentProps<'div'>, 'children'> {
     /** 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":"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,+BA2NrF;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/backdrop/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAoC,MAAM,OAAO,CAAC;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BA6N5G;AAED,4DAA4D;AAC5D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1E,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;CACtB"}

package/dist/backdrop/index.js

@@ -1,48 +1,49 @@
 "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";
+import { useMergedRefs as n } from "../utils/refs.js";
+import { useEffect as r, useRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } 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, u] = typeof CSS < "u" && CSS.supports?.("width", "attr(x type(<length>))") ? ["data-zen-gx", "data-zen-gy"] : ["--gx", "--gy"], d = (e, t, n) => t.startsWith("data-") ? e.setAttribute(t, n) : e.style.setProperty(t, n), p = (e, t, n, r = l, i = u) => {
+function c({ pattern: c, topoSrc: l, className: u, style: d, ref: f, ...p }) {
+	let m = c ?? (l ? "contours" : "dots"), h = i(null), g = n(h, f);
+	return r(() => {
+		let e = document.documentElement, n = h.current, r = 0, i = -9999, a = -9999, o = /* @__PURE__ */ new WeakSet(), s = !0, c = /* @__PURE__ */ new WeakMap(), [l, u] = typeof CSS < "u" && CSS.supports?.("width", "attr(x type(<length>))") ? ["data-zen-gx", "data-zen-gy"] : ["--gx", "--gy"], d = (e, t, n) => t.startsWith("data-") ? e.setAttribute(t, n) : e.style.setProperty(t, n), f = (e, t, n, r = l, i = u) => {
 			let a = t + " " + n;
 			c.get(e) !== a && (c.set(e, a), d(e, r, t), d(e, i, n));
-		}, m = () => {
+		}, p = () => {
 			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 && p(t, `${Math.round(i - c.left)}px`, `${Math.round(a - c.top)}px`, "left", "top");
+				t && !s && f(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 ? (p(e, `${Math.round(i - r.left)}px`, `${Math.round(a - r.top)}px`), o.delete(e)) : o.has(e) || (p(e, "-9999px", "-9999px"), o.add(e));
+				i > r.left - 400 && i < r.right + 400 && a > r.top - 400 && a < r.bottom + 400 ? (f(e, `${Math.round(i - r.left)}px`, `${Math.round(a - r.top)}px`), o.delete(e)) : o.has(e) || (f(e, "-9999px", "-9999px"), o.add(e));
 			});
-		}, h = () => {
-			r ||= requestAnimationFrame(m);
+		}, m = () => {
+			r ||= requestAnimationFrame(p);
 		}, g = (e) => {
-			i = e.clientX, a = e.clientY, s = !1, h();
+			i = e.clientX, a = e.clientY, s = !1, m();
 		}, _ = () => {
-			i = a = -9999, s = !0, h();
+			i = a = -9999, s = !0, m();
 		};
 		if (window.matchMedia?.("(hover: none), (pointer: coarse)").matches || t() === "lite") return;
 		window.addEventListener("pointermove", g, { passive: !0 }), e.addEventListener("pointerleave", _);
 		let v = 0, y = () => {
-			clearTimeout(v), v = window.setTimeout(h, 120);
+			clearTimeout(v), v = window.setTimeout(m, 120);
 		};
 		return window.addEventListener("scroll", y, {
 			passive: !0,
 			capture: !0
-		}), window.addEventListener("resize", h, { passive: !0 }), () => {
-			window.removeEventListener("pointermove", g), e.removeEventListener("pointerleave", _), window.removeEventListener("scroll", y, { capture: !0 }), clearTimeout(v), window.removeEventListener("resize", h), cancelAnimationFrame(r);
+		}), window.addEventListener("resize", m, { passive: !0 }), () => {
+			window.removeEventListener("pointermove", g), e.removeEventListener("pointerleave", _), window.removeEventListener("scroll", y, { capture: !0 }), clearTimeout(v), window.removeEventListener("resize", m), cancelAnimationFrame(r);
 		};
-	}, []), n(() => {
-		let e = f.current?.querySelector(".zen-aurora");
+	}, []), r(() => {
+		let e = h.current?.querySelector(".zen-aurora");
 		if (!e?.getAnimations) return;
 		let t = performance.now(), n = () => {
 			let n = performance.now(), r = e.getAnimations().filter((e) => e.effect?.getTiming().iterations === Infinity).map((e) => [e, e.playState === "paused" ? Number(e.currentTime ?? 0) : null]);
@@ -52,11 +53,11 @@ function s({ pattern: s, topoSrc: c, className: l, style: u }) {
 		n();
 		let r = window.setInterval(n, 1e3 / 6);
 		return () => clearInterval(r);
-	}, []), n(() => {
-		let e = f.current;
-		if (!c || !e || typeof document > "u") return;
+	}, []), r(() => {
+		let e = h.current;
+		if (!l || !e || typeof document > "u") return;
 		let t = "", n = !1, r = 0, i = new Image();
-		i.src = c;
+		i.src = l;
 		let a = async () => {
 			try {
 				await i.decode();
@@ -77,33 +78,34 @@ function s({ pattern: s, topoSrc: c, className: l, style: u }) {
 			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}")`);
+			n = !0, clearTimeout(r), o?.disconnect(), t && URL.revokeObjectURL(t), e.style.setProperty("--zen-topo", `url("${l}")`);
 		};
-	}, [c]), /* @__PURE__ */ o("div", {
-		ref: f,
-		className: e("zen-backdrop", l),
-		"data-pattern": d,
+	}, [l]), /* @__PURE__ */ s("div", {
+		...p,
+		ref: g,
+		className: e("zen-backdrop", u),
+		"data-pattern": m,
 		"aria-hidden": !0,
 		style: {
-			...c && { "--zen-topo": `url("${c}")` },
-			...u
+			...l && { "--zen-topo": `url("${l}")` },
+			...d
 		},
 		children: [
-			/* @__PURE__ */ a("div", { className: "zen-aurora" }),
-			d === "contours" ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", { className: "zen-topo" }), /* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", { className: "zen-aurora" }),
+			m === "contours" ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", { className: "zen-topo" }), /* @__PURE__ */ o("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", {
+				children: /* @__PURE__ */ o("div", { className: "zen-light" })
+			})] }) : /* @__PURE__ */ s(a, { children: [
+				/* @__PURE__ */ o("div", { className: "zen-dots" }),
+				/* @__PURE__ */ o("div", { className: "zen-dots zen-dots--ambient" }),
+				/* @__PURE__ */ o("div", {
 					className: "zen-dots zen-dots--lit",
-					children: /* @__PURE__ */ a("div", { className: "zen-light" })
+					children: /* @__PURE__ */ o("div", { className: "zen-light" })
 				})
 			] }),
-			/* @__PURE__ */ a("div", { className: "zen-vignette" })
+			/* @__PURE__ */ o("div", { className: "zen-vignette" })
 		]
 	});
 }
 //#endregion
-export { s as default };
+export { c as default };

package/dist/badge/index.d.ts

@@ -1,8 +1,10 @@
 import { VariantProps } from '../utils/cva';
 import { ComponentProps } from 'react';
-export default function Badge({ variant, className, ...rest }: BadgeProps): import('react').JSX.Element;
+/** A small label for status, counts and tags; `tone="negative"` for bad news. */
+export default function Badge({ variant, tone, className, ...rest }: BadgeProps): import('react').JSX.Element;
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "default" | "destructive" | "secondary" | null | undefined;
+    variant?: "outline" | "default" | "secondary" | null | undefined;
+    tone?: "default" | "negative" | null | undefined;
 } & ({
     class: import('../utils/cx').ClassValue;
     className?: never;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAO,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAExE;AACD,QAAA,MAAM,aAAa;;;;;;;;;;;0BAgBlB,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAO,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,iFAAiF;AACjF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAE9E;AACD,QAAA,MAAM,aAAa;;;;;;;;;;;;0BAoBlB,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG"}