@rinzai/zen 0.6.0 → 0.7.0

package/dist/tooltip/index.js

@@ -2,86 +2,87 @@
 import { cx as e } from "../utils/cx.js";
 import { useGraphicsMode as t } from "../utils/graphics.js";
 import { Slot as n } from "../utils/slot.js";
-import { anchoredStyle as r } from "../utils/useAnchoredPopup.js";
-import { POPUP as i } from "../utils/styles.js";
-import { createContext as a, useCallback as o, useContext as s, useEffect as c, useId as l, useMemo as u, useRef as d } from "react";
-import { jsx as f } from "react/jsx-runtime";
+import { anchorFor as r, anchoredStyle as i, useAnchorFallback as a } from "../utils/useAnchoredPopup.js";
+import { POPUP as o } from "../utils/styles.js";
+import { createContext as s, useCallback as c, useContext as l, useEffect as u, useId as d, useMemo as f, useRef as p } from "react";
+import { jsx as m } from "react/jsx-runtime";
 //#region packages/tooltip/index.tsx
-var p = a(null);
-function m(e) {
-	let t = s(p);
+var h = s(null);
+function g(e) {
+	let t = l(h);
 	if (!t) throw Error(`<${e}> must be inside <Tooltip>`);
 	return t;
 }
-function h({ children: e }) {
+function _({ children: e }) {
 	t();
-	let n = `zen__tooltip-${l().replace(/[^\w-]/g, "")}`, r = d(null), i = d(0), a = o(() => {
+	let n = `zen__tooltip-${d().replace(/[^\w-]/g, "")}`, r = p(null), i = p(0), o = c(() => {
 		clearTimeout(i.current);
 		try {
 			r.current?.showPopover?.();
 		} catch {}
-	}, []), s = o(() => {
+	}, []), s = c(() => {
 		clearTimeout(i.current);
 		try {
 			r.current?.hidePopover?.();
 		} catch {}
-	}, []), m = o(() => {
+	}, []), l = c(() => {
 		clearTimeout(i.current), i.current = window.setTimeout(s, 100);
 	}, [s]);
-	c(() => () => clearTimeout(i.current), []);
-	let h = u(() => ({
+	u(() => () => clearTimeout(i.current), []), a(r);
+	let g = f(() => ({
 		id: n,
 		ref: r,
-		show: a,
+		show: o,
 		hide: s,
-		hideSoon: m
+		hideSoon: l
 	}), [
 		n,
-		a,
+		o,
 		s,
-		m
+		l
 	]);
-	return /* @__PURE__ */ f(p.Provider, {
-		value: h,
+	return /* @__PURE__ */ m(h.Provider, {
+		value: g,
 		children: e
 	});
 }
-function g({ asChild: e, style: t, onPointerEnter: r, onPointerLeave: i, onFocus: a, onBlur: o, onKeyDown: s, children: c, ...l }) {
-	let u = m("TooltipTrigger"), d = {
-		"aria-describedby": u.id,
-		...l,
+function v({ asChild: e, style: t, onPointerEnter: i, onPointerLeave: a, onFocus: o, onBlur: s, onKeyDown: c, children: l, ...u }) {
+	let d = g("TooltipTrigger"), f = {
+		"aria-describedby": d.id,
+		...u,
+		...r(d.id),
 		style: {
-			anchorName: `--${u.id}`,
+			...r(d.id).style,
 			...t
 		},
 		onPointerEnter: (e) => {
-			r?.(e), e.pointerType === "mouse" && u.show();
+			i?.(e), e.pointerType === "mouse" && d.show();
 		},
 		onPointerLeave: (e) => {
-			i?.(e), u.hideSoon();
+			a?.(e), d.hideSoon();
 		},
 		onFocus: (e) => {
-			a?.(e), e.currentTarget.matches(":focus-visible") && u.show();
+			o?.(e), e.currentTarget.matches(":focus-visible") && d.show();
 		},
 		onBlur: (e) => {
-			o?.(e), u.hide();
+			s?.(e), d.hide();
 		},
 		onKeyDown: (e) => {
-			s?.(e), e.key === "Escape" && u.hide();
+			c?.(e), e.key === "Escape" && d.hide();
 		}
 	};
-	return e ? /* @__PURE__ */ f(n, {
-		...d,
-		children: c
-	}) : /* @__PURE__ */ f("button", {
+	return e ? /* @__PURE__ */ m(n, {
+		...f,
+		children: l
+	}) : /* @__PURE__ */ m("button", {
 		type: "button",
-		...d,
-		children: c
+		...f,
+		children: l
 	});
 }
-function _({ align: t = "center", offset: n = 5, className: a, style: o, onPointerEnter: s, onPointerLeave: c, children: l, ...u }) {
-	let d = m("TooltipContent");
-	return /* @__PURE__ */ f("div", {
+function y({ align: t = "center", offset: n = 5, className: r, style: a, onPointerEnter: s, onPointerLeave: c, children: l, ...u }) {
+	let d = g("TooltipContent");
+	return /* @__PURE__ */ m("div", {
 		...u,
 		ref: d.ref,
 		id: d.id,
@@ -94,15 +95,16 @@ function _({ align: t = "center", offset: n = 5, className: a, style: o, onPoint
 			c?.(e), d.hideSoon();
 		},
 		style: {
-			...r(d.id, {
+			...i(d.id, {
 				align: t,
-				offset: n
+				offset: n,
+				width: "at-least"
 			}),
-			...o
+			...a
 		},
-		className: e("zen__popover fixed z-50 w-[anchor-size(width)] min-w-max overflow-visible p-0", i, a),
+		className: e("zen__popover fixed z-50 overflow-visible p-0", o, r),
 		children: l
 	});
 }
 //#endregion
-export { _ as TooltipContent, g as TooltipTrigger, h as default };
+export { y as TooltipContent, v as TooltipTrigger, _ as default };

package/dist/tree/index.d.ts

@@ -1,5 +1,5 @@
 import { TableCellProps } from '../table';
-import { ComponentProps, CSSProperties, ReactNode } from 'react';
+import { ComponentProps, CSSProperties, FocusEvent, KeyboardEvent, ReactNode } from 'react';
 /** One visible row of a tree. */
 export interface TreeRowData<T> {
     item: T;
@@ -9,11 +9,19 @@ export interface TreeRowData<T> {
     parentKey: string | null;
     hasChildren: boolean;
     expanded: boolean;
+    /** Its place among its siblings (1-based), and how many siblings there are. */
+    position: number;
+    siblings: number;
 }
 /**
  * Headless tree for tables and lists: turns nested items into the rows that
  * are visible (children of collapsed rows are skipped), and expands/collapses
  * them. With the Tree* parts, children grow in and shrink away smoothly.
+ *
+ * Put `tree.tableProps` on the Table: it's then a tree grid (WAI-ARIA), one tab
+ * stop whose rows the keyboard moves between. Up and Down go row to row, Home
+ * and End to the first and last, Right opens a row (or goes to its first
+ * child), Left closes it (or goes to its parent).
  */
 export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded, rowHeight }: UseTreeOptions<T>): {
     rows: TreeRowData<T>[];
@@ -25,10 +33,20 @@ export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded
     expandAll: () => void;
     /** Closes every row. */
     collapseAll: () => void;
+    /** For the Table: a tree grid. */
+    tableProps: {
+        role: "treegrid";
+    };
     rowProps: (row: TreeRowData<T>) => {
         'aria-level': number;
         'aria-expanded': boolean | undefined;
+        'aria-posinset': number;
+        'aria-setsize': number;
         'data-depth': number;
+        'data-tree-key': string;
+        tabIndex: number;
+        onFocus: (e: FocusEvent<HTMLElement>) => void;
+        onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
         className: string;
         style: CSSProperties;
         onAnimationEnd: (e: {
@@ -38,12 +56,13 @@ export declare function useTree<T>({ items, getKey, getChildren, defaultExpanded
     toggleProps: (row: TreeRowData<T>) => {
         expanded: boolean;
         onToggle: () => void;
+        tabIndex: number;
     };
     rowHeight: number;
 };
 export type Tree<T> = ReturnType<typeof useTree<T>>;
-/** A table row wired to useTree: tree semantics (aria-level, aria-expanded) and the open/close animation. */
-export declare function TreeRow<T>({ row, tree, className, style, ...rest }: TreeRowProps<T>): import('react').JSX.Element;
+/** A table row wired to useTree: tree semantics, the keyboard and the open/close animation. */
+export declare function TreeRow<T>({ row, tree, className, style, onFocus, onKeyDown, ...rest }: TreeRowProps<T>): import('react').JSX.Element;
 /** A cell in a TreeRow: its content sits in a box whose height animates as groups open and close. */
 export declare function TreeCell({ numeric, className, children, ...rest }: TableCellProps): import('react').JSX.Element;
 /** The first column's content: indented by depth, with the row's toggle (or a spacer, so labels line up). */

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

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

package/dist/tree/index.js

@@ -1,39 +1,42 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
 import { TableCell as t, TableRow as n } from "../table/index.js";
-import { useCallback as r, useMemo as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import r from "../icons/micro/chevron-right.js";
+import { useCallback as i, useMemo as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region packages/tree/index.tsx
-function l({ items: t, getKey: n, getChildren: s, defaultExpanded: c = !0, rowHeight: l = 36 }) {
-	let [u, d] = o(() => /* @__PURE__ */ new Set()), [f, p] = o(null), [m, h] = o(null), g = a(null), _ = r((e) => u.has(e) !== c, [u, c]), v = i(() => {
-		let e = [], r = (t, i, a) => {
-			for (let o of t) {
-				let t = n(o), c = s(o), l = !!c?.length, u = l && _(t);
+function u({ items: t, getKey: n, getChildren: r, defaultExpanded: c = !0, rowHeight: l = 36 }) {
+	let [u, d] = s(() => /* @__PURE__ */ new Set()), [f, p] = s(null), [m, h] = s(null), g = o(null), _ = i((e) => u.has(e) !== c, [u, c]), v = a(() => {
+		let e = [], i = (t, a, o) => {
+			t.forEach((s, c) => {
+				let l = n(s), u = r(s), d = !!u?.length, f = d && _(l);
 				e.push({
-					item: o,
-					key: t,
-					depth: i,
-					parentKey: a,
-					hasChildren: l,
-					expanded: u
-				}), u && r(c, i + 1, t);
-			}
+					item: s,
+					key: l,
+					depth: a,
+					parentKey: o,
+					hasChildren: d,
+					expanded: f,
+					position: c + 1,
+					siblings: t.length
+				}), f && i(u, a + 1, l);
+			});
 		};
-		return r(t, 0, null), e;
+		return i(t, 0, null), e;
 	}, [
 		t,
 		n,
-		s,
+		r,
 		_
 	]), y = () => {
-		let e = [], r = (t) => {
-			for (let i of t) {
-				let t = s(i);
-				t?.length && (e.push(n(i)), r(t));
+		let e = [], i = (t) => {
+			for (let a of t) {
+				let t = r(a);
+				t?.length && (e.push(n(a)), i(t));
 			}
 		};
-		return r(t), e;
-	}, b = r((e, t) => d((n) => {
+		return i(t), e;
+	}, b = i((e, t) => d((n) => {
 		let r = new Set(n);
 		return t === c ? r.delete(e) : r.add(e), r;
 	}), [c]), x = () => typeof window < "u" && (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || document.documentElement.classList.contains("reduce-motion")), S = (e) => {
@@ -54,6 +57,17 @@ function l({ items: t, getKey: n, getChildren: s, defaultExpanded: c = !0, rowHe
 			};
 			g.current = t, setTimeout(t, 500);
 		}
+	}, [C, w] = s(null), T = v.some((e) => e.key === C) ? C : v[0]?.key ?? null, E = (e) => e.expanded && m !== e.key, D = (e, t) => {
+		if (t.target !== t.currentTarget) return;
+		let n = v.indexOf(e), r;
+		if (t.key === "ArrowDown") r = v[n + 1];
+		else if (t.key === "ArrowUp") r = v[n - 1];
+		else if (t.key === "Home") r = v[0];
+		else if (t.key === "End") r = v.at(-1);
+		else if (t.key === "ArrowRight" && e.hasChildren) E(e) ? r = v[n + 1] : S(e.key);
+		else if (t.key === "ArrowLeft") E(e) ? S(e.key) : r = v.find((t) => t.key === e.parentKey);
+		else return;
+		t.preventDefault(), r && t.currentTarget.closest("[role=\"treegrid\"], table")?.querySelector(`[data-tree-key="${CSS.escape(r.key)}"]`)?.focus();
 	};
 	return {
 		rows: v,
@@ -63,73 +77,79 @@ function l({ items: t, getKey: n, getChildren: s, defaultExpanded: c = !0, rowHe
 		collapse: (e) => b(e, !1),
 		expandAll: () => d(c ? /* @__PURE__ */ new Set() : new Set(y())),
 		collapseAll: () => d(c ? new Set(y()) : /* @__PURE__ */ new Set()),
+		tableProps: { role: "treegrid" },
 		rowProps: (t) => ({
 			"aria-level": t.depth + 1,
-			"aria-expanded": t.hasChildren ? t.expanded : void 0,
+			"aria-expanded": t.hasChildren ? E(t) : void 0,
+			"aria-posinset": t.position,
+			"aria-setsize": t.siblings,
 			"data-depth": t.depth,
-			className: e(f && t.parentKey === f.key && "zen__tree-row-enter", m && t.parentKey === m && "zen__tree-row-exit"),
+			"data-tree-key": t.key,
+			tabIndex: t.key === T ? 0 : -1,
+			onFocus: (e) => {
+				e.target === e.currentTarget && w(t.key);
+			},
+			onKeyDown: (e) => D(t, e),
+			className: e("outline-hidden focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring/60", f && t.parentKey === f.key && "zen__tree-row-enter", m && t.parentKey === m && "zen__tree-row-exit"),
 			style: { "--row-h": `${l - 1}px` },
 			onAnimationEnd: (e) => {
 				e.animationName === "zen-row-close" && m && t.parentKey === m && g.current?.();
 			}
 		}),
 		toggleProps: (e) => ({
-			expanded: e.expanded && m !== e.key,
-			onToggle: () => S(e.key)
+			expanded: E(e),
+			onToggle: () => S(e.key),
+			tabIndex: -1
 		}),
 		rowHeight: l
 	};
 }
-function u({ row: t, tree: r, className: i, style: a, ...o }) {
-	let c = r.rowProps(t);
-	return /* @__PURE__ */ s(n, {
-		...o,
-		...c,
-		className: e(c.className, i),
+function d({ row: t, tree: r, className: i, style: a, onFocus: o, onKeyDown: s, ...l }) {
+	let u = r.rowProps(t);
+	return /* @__PURE__ */ c(n, {
+		...l,
+		...u,
+		onFocus: (e) => {
+			o?.(e), u.onFocus(e);
+		},
+		onKeyDown: (e) => {
+			s?.(e), e.defaultPrevented || u.onKeyDown(e);
+		},
+		className: e(u.className, i),
 		style: {
-			...c.style,
+			...u.style,
 			...a
 		}
 	});
 }
-function d({ numeric: n, className: r, children: i, ...a }) {
-	return /* @__PURE__ */ s(t, {
+function f({ numeric: n, className: r, children: i, ...a }) {
+	return /* @__PURE__ */ c(t, {
 		numeric: n,
 		className: e("py-0 whitespace-nowrap", r),
 		...a,
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ c("div", {
 			className: e("zen__tree-cell flex h-[var(--row-h)] items-center", n && "justify-end"),
 			children: i
 		})
 	});
 }
-function f({ row: t, tree: n, indent: r = 20, children: i, className: a }) {
-	return /* @__PURE__ */ c("div", {
+function p({ row: t, tree: n, indent: r = 20, children: i, className: a }) {
+	return /* @__PURE__ */ l("div", {
 		className: e("flex min-w-0 flex-1 items-center gap-1", a),
 		style: { paddingLeft: t.depth * r },
-		children: [t.hasChildren ? /* @__PURE__ */ s(p, { ...n.toggleProps(t) }) : /* @__PURE__ */ s("span", { className: "-ml-1 w-6 shrink-0" }), i]
+		children: [t.hasChildren ? /* @__PURE__ */ c(m, { ...n.toggleProps(t) }) : /* @__PURE__ */ c("span", { className: "-ml-1 w-6 shrink-0" }), i]
 	});
 }
-function p({ expanded: t, onToggle: n, className: r, ...i }) {
-	return /* @__PURE__ */ s("button", {
+function m({ expanded: t, onToggle: n, className: i, ...a }) {
+	return /* @__PURE__ */ c("button", {
 		type: "button",
 		onClick: n,
 		"aria-label": t ? "Collapse" : "Expand",
 		"aria-expanded": t,
-		className: e("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground focus-visible:ring-ring/50 -ml-1 grid size-6 shrink-0 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", r),
-		...i,
-		children: /* @__PURE__ */ s("svg", {
-			viewBox: "0 0 16 16",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			"aria-hidden": !0,
-			className: e("size-4 transition-transform duration-200 ease-out", t && "rotate-90"),
-			children: /* @__PURE__ */ s("path", { d: "m6 3.5 4.5 4.5L6 12.5" })
-		})
+		className: e("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground focus-visible:ring-ring/50 -ml-1 grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", i),
+		...a,
+		children: /* @__PURE__ */ c(r, { className: e("size-4 transition-transform duration-200 ease-out", t && "rotate-90") })
 	});
 }
 //#endregion
-export { d as TreeCell, f as TreeLabel, u as TreeRow, p as TreeToggle, l as useTree };
+export { f as TreeCell, p as TreeLabel, d as TreeRow, m as TreeToggle, u as useTree };

package/dist/utils/date.d.ts

@@ -23,15 +23,17 @@ export declare function dayOfWeek(date: DateString): number;
 export declare function today(now?: Date): DateString;
 /** Days from `from` to `to` (negative if `to` is earlier). */
 export declare function daysBetween(from: DateString, to: DateString): number;
+/** How much of a date to show; `day` is the day and month without the year ("Sep 3"), for dates within the year. */
+export type DateStyle = 'day' | 'short' | 'medium' | 'long' | 'full';
 /**
- * "Sep 30, 2026" (or the locale's equivalent) by default; `short` is
- * "9/30/26", `long` "September 30, 2026", `full` adds the weekday.
+ * "Sep 30, 2026" (or the locale's equivalent) by default; `day` is "Sep 30",
+ * `short` "9/30/26", `long` "September 30, 2026", `full` adds the weekday.
  */
-export declare function formatDate(date: DateString, locale: string, style?: 'short' | 'medium' | 'long' | 'full'): string;
+export declare function formatDate(date: DateString, locale: string, style?: DateStyle): string;
 /** Short weekday names for a locale, Sunday first. */
 export declare function weekdayNames(locale: string, style?: 'narrow' | 'short' | 'long'): string[];
 /** The first day of the week for a locale: 0 for Sunday, 1 for Monday, 6 for Saturday. */
 export declare function weekStart(locale: string): number;
 /** "Sep 3 – 10, 2026" (or the locale's equivalent), sharing what the two dates have in common. */
-export declare function formatDateRange(start: DateString, end: DateString, locale: string, style?: 'short' | 'medium' | 'long'): string;
+export declare function formatDateRange(start: DateString, end: DateString, locale: string, style?: Exclude<DateStyle, 'full'>): string;
 //# sourceMappingURL=date.d.ts.map

package/dist/utils/date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../packages/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAEhC,6EAA6E;AAC7E,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,GAAG,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAID,wBAAgB,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,CAI1D;AAED,0EAA0E;AAC1E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAGjD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAEtD;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAE/D;AAED,6FAA6F;AAC7F,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAKvE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAGhD;AAED,qCAAqC;AACrC,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAElD;AAED,qCAAqC;AACrC,wBAAgB,KAAK,CAAC,GAAG,GAAE,IAAiB,GAAG,UAAU,CAExD;AAED,8DAA8D;AAC9D,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,GAAG,MAAM,CAEpE;AAED;;;GAGG;AACH,wBAAgB,UAAU,CACtB,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAiB,GACvD,MAAM,CAIR;AAED,sDAAsD;AACtD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAAE,QAAQ,GAAG,OAAO,GAAG,MAAgB,GAAG,MAAM,EAAE,CAGnG;AAUD,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAahD;AAED,kGAAkG;AAClG,wBAAgB,eAAe,CAC3B,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,UAAU,EACf,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,OAAO,GAAG,QAAQ,GAAG,MAAiB,GAC9C,MAAM,CAGR"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../packages/utils/date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC;AAEhC,6EAA6E;AAC7E,MAAM,WAAW,SAAS;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,GAAG,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAID,wBAAgB,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,CAI1D;AAED,0EAA0E;AAC1E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAGjD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAEtD;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAE/D;AAED,6FAA6F;AAC7F,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU,CAKvE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAGhD;AAED,qCAAqC;AACrC,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAElD;AAED,qCAAqC;AACrC,wBAAgB,KAAK,CAAC,GAAG,GAAE,IAAiB,GAAG,UAAU,CAExD;AAED,8DAA8D;AAC9D,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,GAAG,MAAM,CAEpE;AAED,oHAAoH;AACpH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAQrE;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,GAAE,SAAoB,GAAG,MAAM,CAEhG;AAED,sDAAsD;AACtD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,GAAE,QAAQ,GAAG,OAAO,GAAG,MAAgB,GAAG,MAAM,EAAE,CAGnG;AAUD,0FAA0F;AAC1F,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAahD;AAED,kGAAkG;AAClG,wBAAgB,eAAe,CAC3B,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,UAAU,EACf,MAAM,EAAE,MAAM,EACd,KAAK,GAAE,OAAO,CAAC,SAAS,EAAE,MAAM,CAAY,GAC7C,MAAM,CAER"}

package/dist/utils/date.js

@@ -33,36 +33,38 @@ function c(e = /* @__PURE__ */ new Date()) {
 function l(e, t) {
 	return n(t) - n(e);
 }
-function u(e, t, r = "medium") {
-	return g(new Intl.DateTimeFormat(t, {
-		dateStyle: r,
-		timeZone: "UTC"
-	}).format(n(e) * 864e5));
+var u = (e, t) => new Intl.DateTimeFormat(e, t === "day" ? {
+	day: "numeric",
+	month: "short",
+	timeZone: "UTC"
+} : {
+	dateStyle: t,
+	timeZone: "UTC"
+});
+function d(e, t, r = "medium") {
+	return _(u(t, r).format(n(e) * 864e5));
 }
-function d(e, t = "short") {
+function f(e, t = "short") {
 	let n = new Intl.DateTimeFormat(e, {
 		weekday: t,
 		timeZone: "UTC"
 	});
 	return Array.from({ length: 7 }, (e, t) => n.format(Date.UTC(2023, 0, 1 + t)));
 }
-var f = new Set("AG AS BD BR BS BT BW BZ CA CN CO DM DO ET GT GU HK HN ID IL IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW".split(" ")), p = new Set("AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY".split(" "));
-function m(e) {
+var p = new Set("AG AS BD BR BS BT BW BZ CA CN CO DM DO ET GT GU HK HN ID IL IN JM JP KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY SA SG SV TH TT TW UM US VE VI WS YE ZA ZW".split(" ")), m = new Set("AE AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY".split(" "));
+function h(e) {
 	try {
 		let t = new Intl.Locale(e), n = t.getWeekInfo?.() ?? t.weekInfo;
 		if (n) return n.firstDay % 7;
 		let r = t.maximize().region ?? "";
-		return f.has(r) ? 0 : p.has(r) ? 6 : 1;
+		return p.has(r) ? 0 : m.has(r) ? 6 : 1;
 	} catch {
 		return 1;
 	}
 }
-function h(e, t, r, i = "medium") {
-	return g(new Intl.DateTimeFormat(r, {
-		dateStyle: i,
-		timeZone: "UTC"
-	}).formatRange(n(e) * 864e5, n(t) * 864e5));
+function g(e, t, r, i = "medium") {
+	return _(u(r, i).formatRange(n(e) * 864e5, n(t) * 864e5));
 }
-var g = (e) => e.replace(/[\u2009\u202f]/g, " ");
+var _ = (e) => e.replace(/[\u2009\u202f]/g, " ");
 //#endregion
-export { i as addDays, a as addMonthsToDate, n as dayIndex, s as dayOfWeek, l as daysBetween, o as daysInMonth, u as formatDate, h as formatDateRange, r as fromDayIndex, t as isDate, c as today, m as weekStart, d as weekdayNames };
+export { i as addDays, a as addMonthsToDate, n as dayIndex, s as dayOfWeek, l as daysBetween, o as daysInMonth, d as formatDate, g as formatDateRange, r as fromDayIndex, t as isDate, c as today, h as weekStart, f as weekdayNames };

package/dist/utils/field-chevron.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-chevron.d.ts","sourceRoot":"","sources":["../../packages/utils/field-chevron.tsx"],"names":[],"mappings":"AAEA,2FAA2F;AAC3F,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAmBvF"}
+{"version":3,"file":"field-chevron.d.ts","sourceRoot":"","sources":["../../packages/utils/field-chevron.tsx"],"names":[],"mappings":"AAIA,2FAA2F;AAC3F,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAUvF"}

package/dist/utils/field-chevron.js

@@ -1,19 +1,10 @@
 "use client";
 import { cx as e } from "./cx.js";
-import { jsx as t } from "react/jsx-runtime";
+import t from "../icons/micro/chevron-down.js";
+import { jsx as n } from "react/jsx-runtime";
 //#region packages/utils/field-chevron.tsx
-function n({ open: n, className: r }) {
-	return /* @__PURE__ */ t("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.6",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": !0,
-		className: e("text-muted-foreground size-4 shrink-0 transition-transform duration-300", n && "rotate-180", r),
-		children: /* @__PURE__ */ t("path", { d: "m4 6 4 4 4-4" })
-	});
+function r({ open: r, className: i }) {
+	return /* @__PURE__ */ n(t, { className: e("text-muted-foreground size-4 shrink-0 transition-transform duration-300", r && "rotate-180", i) });
 }
 //#endregion
-export { n as FieldChevron };
+export { r as FieldChevron };

package/dist/utils/status-icons.d.ts

@@ -1,4 +1,4 @@
-/** Small 16px status icons in the current text colour (toasts, field errors). */
+/** Small status icons in the current text colour (toasts, field errors): Heroicons' micro set. */
 export declare function CheckIcon({ className }: {
     className?: string;
 }): import('react').JSX.Element;

package/dist/utils/status-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-icons.d.ts","sourceRoot":"","sources":["../../packages/utils/status-icons.tsx"],"names":[],"mappings":"AAEA,iFAAiF;AACjF,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAe9D;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAgB9D;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAe7D"}
+{"version":3,"file":"status-icons.d.ts","sourceRoot":"","sources":["../../packages/utils/status-icons.tsx"],"names":[],"mappings":"AAMA,kGAAkG;AAClG,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE9D;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE9D;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE7D"}

package/dist/utils/status-icons.js

@@ -1,48 +1,18 @@
 "use client";
 import { cx as e } from "./cx.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import t from "../icons/micro/check.js";
+import n from "../icons/micro/exclamation-triangle.js";
+import r from "../icons/micro/information-circle.js";
+import { jsx as i } from "react/jsx-runtime";
 //#region packages/utils/status-icons.tsx
-function r({ className: n }) {
-	return /* @__PURE__ */ t("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		className: e("size-3.5", n),
-		"aria-hidden": !0,
-		children: /* @__PURE__ */ t("path", { d: "m3.5 8.5 3 3 6-7" })
-	});
+function a({ className: n }) {
+	return /* @__PURE__ */ i(t, { className: e("size-3.5", n) });
 }
-function i({ className: r }) {
-	return /* @__PURE__ */ n("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.8",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		className: e("size-3.5", r),
-		"aria-hidden": !0,
-		children: [/* @__PURE__ */ t("path", { d: "M8 2.2 1.6 13.3h12.8L8 2.2Z" }), /* @__PURE__ */ t("path", { d: "M8 6.5v3M8 11.6v.1" })]
-	});
+function o({ className: t }) {
+	return /* @__PURE__ */ i(n, { className: e("size-3.5", t) });
 }
-function a({ className: r }) {
-	return /* @__PURE__ */ n("svg", {
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.8",
-		strokeLinecap: "round",
-		className: e("size-3.5", r),
-		"aria-hidden": !0,
-		children: [/* @__PURE__ */ t("circle", {
-			cx: "8",
-			cy: "8",
-			r: "6.3"
-		}), /* @__PURE__ */ t("path", { d: "M8 7.3v3.8M8 4.9v.1" })]
-	});
+function s({ className: t }) {
+	return /* @__PURE__ */ i(r, { className: e("size-3.5", t) });
 }
 //#endregion
-export { i as AlertIcon, r as CheckIcon, a as InfoIcon };
+export { o as AlertIcon, a as CheckIcon, s as InfoIcon };