@rinzai/zen 0.6.0 → 0.7.0

package/LICENSE

@@ -19,3 +19,30 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+---
+
+The icons (packages/icons) are Heroicons (https://heroicons.com), generated
+from the heroicons package by scripts/icons.mjs, under this license:
+
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -56,12 +56,12 @@ 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, Combobox, MonthPicker, Segmented, Slider, Toggle, Field
-- **Data:** composable Table with sticky edges and sorting, tree rows, editable cells, virtual rows, Meter, ProgressRing, AnimatedNumber
+- **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, 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
 - **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`
+- **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`, money, currency, month and date helpers, `cx` (Tailwind-aware class merging), `cva`
 
 Every component takes `className`, and a class you pass always overrides the component's default.
 
@@ -84,6 +84,14 @@ import { applyPreset, applyTheme, DEFAULT_THEME } from '@rinzai/zen';
 applyTheme(applyPreset(DEFAULT_THEME, 'ocean'));
 ```
 
+## 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.
+
+- **Popups** are placed with CSS anchor positioning where the browser has it (Chrome 129+, Safari 26+, recent Firefox). Elsewhere Zen places them itself, the same way.
+- **Glass** is blurred live where there's a GPU and a mouse. On touch screens, without hardware acceleration, and with the OS's "reduce transparency", surfaces are solid instead.
+- **Motion** such as entry animations is left out where a browser lacks it, and for anyone who prefers reduced motion.
+
 ## Development
 
 ```sh

package/dist/alert/index.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, ReactNode } from 'react';
+/**
+ * A message beside the content it's about: a notice, a warning, a failure.
+ * A tinted box by default, or with `plain`, just the icon and text in the
+ * tone's colour. With a `title`, the title takes the tone and the text under
+ * it is quieter. Bad news is announced at once (role="alert"), anything else
+ * politely (role="status"); pass `role` to change that, e.g. "note" for a
+ * message that doesn't change.
+ */
+export default function Alert({ tone, plain, title, icon, className, children, ...rest }: AlertProps): import('react').JSX.Element;
+export interface AlertProps extends Omit<ComponentProps<'div'>, 'title'> {
+    /** `positive` in the accent colour, `negative` in red for bad news. */
+    tone?: 'default' | 'positive' | 'negative';
+    /** Just the icon and text, no box: for a line inside a form or a card. */
+    plain?: boolean;
+    /** A first line in the tone's colour; the text under it is quieter. */
+    title?: ReactNode;
+    /** Replaces the tone's icon (info, check, warning); `null` for none. */
+    icon?: ReactNode;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/alert/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBlD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC1B,IAAgB,EAChB,KAAa,EACb,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,UAAU,+BA4BZ;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACpE,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3C,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;CACpB"}

package/dist/alert/index.js

@@ -0,0 +1,49 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { AlertIcon as t, CheckIcon as n, InfoIcon as r } from "../utils/status-icons.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/alert/index.tsx
+var o = {
+	default: {
+		icon: r,
+		box: "border-tint/[0.08] bg-tint/[0.03] text-muted-foreground",
+		plain: "text-muted-foreground"
+	},
+	positive: {
+		icon: n,
+		box: "border-primary/30 bg-primary/10 text-primary",
+		plain: "text-primary"
+	},
+	negative: {
+		icon: t,
+		box: "border-destructive/35 bg-destructive/10 text-destructive",
+		plain: "text-destructive"
+	}
+};
+function s({ tone: t = "default", plain: n = !1, title: r, icon: s, className: c, children: l, ...u }) {
+	let d = o[t], f = d.icon;
+	return /* @__PURE__ */ a("div", {
+		role: t === "negative" ? "alert" : "status",
+		...u,
+		className: e("zen__alert flex items-start gap-2 text-sm", n ? d.plain : e("rounded-lg border px-3 py-2", d.box), c),
+		children: [s !== null && /* @__PURE__ */ i("span", {
+			"aria-hidden": !0,
+			className: "mt-0.5 flex shrink-0",
+			children: s ?? /* @__PURE__ */ i(f, {})
+		}), r ? /* @__PURE__ */ a("div", {
+			className: "flex min-w-0 flex-col gap-1",
+			children: [/* @__PURE__ */ i("p", {
+				className: "font-medium",
+				children: r
+			}), /* @__PURE__ */ i("div", {
+				className: "text-muted-foreground",
+				children: l
+			})]
+		}) : /* @__PURE__ */ i("div", {
+			className: "min-w-0",
+			children: l
+		})]
+	});
+}
+//#endregion
+export { s as default };

package/dist/button/index.d.ts

@@ -5,10 +5,11 @@ import { ComponentProps } from 'react';
  * 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 default function Button({ className, variant, size, tone, loading, disabled, type, asChild, children, ...rest }: ButtonProps): import('react').JSX.Element;
 export declare const buttonVariants: (props?: ({
     variant?: "outline" | "link" | "default" | "icon" | "destructive" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "muted" | null | undefined;
 } & ({
     class: import('../utils/cx').ClassValue;
     className?: never;

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

@@ -1 +1 @@
-{"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"}
+{"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,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,IAAe,EACf,OAAe,EACf,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,WAAW,+BAqBb;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;0BAwD1B,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

@@ -4,29 +4,31 @@ 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,
+function a({ className: t, variant: a, size: s, tone: c, loading: l = !1, disabled: u, type: d = "button", asChild: f = !1, children: p, ...m }) {
+	return f ? /* @__PURE__ */ r(e, {
+		...m,
 		className: o({
 			variant: a,
 			size: s,
+			tone: c,
 			className: t
 		}),
-		children: f
+		children: p
 	}) : /* @__PURE__ */ i("button", {
-		type: u,
-		disabled: l || c,
-		"aria-busy": c || void 0,
+		type: d,
+		disabled: u || l,
+		"aria-busy": l || void 0,
 		className: o({
 			variant: a,
 			size: s,
+			tone: c,
 			className: t
 		}),
-		...p,
-		children: [c && /* @__PURE__ */ r(n, {}), f]
+		...m,
+		children: [l && /* @__PURE__ */ r(n, {}), p]
 	});
 }
-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", {
+var o = t("zen__button inline-flex cursor-pointer 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)]",
@@ -34,7 +36,7 @@ var o = t("zen__button inline-flex items-center justify-center gap-2 rounded-lg
 			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",
+			link: "inline-block h-auto! max-w-full truncate rounded-sm px-0! text-left align-bottom text-[length:inherit] text-primary underline-offset-4 hover:underline active:scale-100",
 			icon: "text-muted-foreground hover:bg-tint/[0.06] hover:text-foreground"
 		},
 		size: {
@@ -43,11 +45,40 @@ var o = t("zen__button inline-flex items-center justify-center gap-2 rounded-lg
 			lg: "h-11 px-6",
 			icon: "size-9",
 			"icon-sm": "size-6 rounded-md"
+		},
+		tone: {
+			default: "",
+			muted: "",
+			inherit: "",
+			destructive: ""
 		}
 	},
+	compoundVariants: [
+		{
+			variant: "link",
+			tone: "muted",
+			class: "text-muted-foreground underline hover:text-foreground"
+		},
+		{
+			variant: "link",
+			tone: "inherit",
+			class: "text-current"
+		},
+		{
+			variant: "link",
+			tone: "destructive",
+			class: "text-destructive"
+		},
+		{
+			variant: ["ghost", "icon"],
+			tone: "destructive",
+			class: "hover:bg-destructive/10 hover:text-destructive focus-visible:ring-destructive/40"
+		}
+	],
 	defaultVariants: {
 		variant: "default",
-		size: "default"
+		size: "default",
+		tone: "default"
 	}
 });
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/calendar/index.tsx"],"names":[],"mappings":"AAIA,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,+BAkRpD;AAKD,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

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

package/dist/chart/donut.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ChartPalette } from './palette';
 /**
  * A ring of parts of a whole (e.g. spending by category), with your content in
  * the middle (e.g. the total). Segments are parted by a small gap, with
@@ -6,7 +7,7 @@ import { ReactNode } from 'react';
  * value. Best for a handful of parts: past about six, use bars. Colours default
  * to the chart palette in order.
  */
-export default function DonutChart({ items, label, size, thickness, formatValue, children, className, }: DonutChartProps): import('react').JSX.Element;
+export default function DonutChart({ items, label, size, thickness, palette, formatValue, children, className, }: DonutChartProps): import('react').JSX.Element;
 export interface DonutChartProps {
     /** The parts, in order round the ring from 12 o'clock. */
     items: {
@@ -23,6 +24,8 @@ export interface DonutChartProps {
     thickness?: number;
     /** Values in the tooltip and for screen readers. */
     formatValue?: (value: number) => string;
+    /** Colours for items that don't give their own: the categorical palette (default), or shades of the theme's glow. */
+    palette?: ChartPalette;
     /** Content in the middle, e.g. the total. */
     children?: ReactNode;
     className?: string;

package/dist/chart/donut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"donut.d.ts","sourceRoot":"","sources":["../../packages/chart/donut.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAY,MAAM,OAAO,CAAC;AAI3D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,IAAU,EACV,SAAgB,EAChB,WAAoB,EACpB,QAAQ,EACR,SAAS,GACZ,EAAE,eAAe,+BAqFjB;AAsBD,MAAM,WAAW,eAAe;IAC5B,0DAA0D;IAC1D,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvE,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"donut.d.ts","sourceRoot":"","sources":["../../packages/chart/donut.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,WAAW,CAAC;AAG5D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,IAAU,EACV,SAAgB,EAChB,OAAiB,EACjB,WAAoB,EACpB,QAAQ,EACR,SAAS,GACZ,EAAE,eAAe,+BAiIjB;AA8CD,MAAM,WAAW,eAAe;IAC5B,0DAA0D;IAC1D,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvE,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,qHAAqH;IACrH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}