@nocoo/basalt 2.0.3 → 2.1.0

package/dist/charts/stat-card.d.ts

@@ -1,20 +1,70 @@
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
 export type StatCardProps = {
+    /**
+     * Secondary heading label for the metric card (overridden by title).
+     */
     label?: string;
+    /**
+     * Primary heading title for the metric card (takes precedence over label).
+     */
     title?: string;
+    /**
+     * Metric value, formatted via toLocaleString() if a number is provided.
+     * Overridden by the status slot if provided.
+     */
     value: string | number;
+    /**
+     * Supporting descriptive subtitle text rendered below value.
+     */
     subtitle?: string;
+    /**
+     * Optional decorative Lucide icon component.
+     */
     icon?: LucideIcon;
+    /**
+     * Color class applied to the icon wrapper.
+     * @default "text-basalt-muted-foreground"
+     */
     iconColor?: string;
+    /**
+     * Structured percentage trend value and optional label.
+     * Overridden by the trendContent slot if provided.
+     */
     trend?: {
         value: number;
         label?: string;
     };
+    /**
+     * Optional header action or interactive element (e.g. tooltip trigger or button).
+     * Renders alongside the title/icon. Switches card role to group for accessible descendants.
+     */
+    action?: ReactNode;
+    /**
+     * Optional custom status replacement slot (e.g. loading skeleton, error state, or empty state).
+     * Takes precedence over the default value display and excludes value from accessible name.
+     * Subtitle and trend remain caller-managed; when error/empty state is shown, callers should omit trend.
+     */
+    status?: ReactNode;
+    /**
+     * Optional custom trend replacement slot (e.g. custom badge, sparkline, or localized trend indicator).
+     * Takes precedence over the default trend calculation and excludes default trend from accessible name.
+     */
+    trendContent?: ReactNode;
+    /**
+     * Optional custom content rendered below the metric value and above or alongside the trend.
+     */
+    children?: ReactNode;
+    /**
+     * Explicit accessible label overriding automatic accessible name calculation.
+     */
     ariaLabel?: string;
+    /**
+     * Additional CSS class names for styling the card root.
+     */
     className?: string;
 };
-export declare function StatCard({ label, title, value, subtitle, icon: Icon, iconColor, trend, ariaLabel, className, }: StatCardProps): import("react").JSX.Element;
+export declare function StatCard({ label, title, value, subtitle, icon: Icon, iconColor, trend, action, status, trendContent, children, ariaLabel, className, }: StatCardProps): import("react").JSX.Element;
 export type StatGridProps = {
     children: ReactNode;
     columns?: 2 | 3 | 4;

package/dist/charts/stat-card.js

@@ -1,66 +1,93 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/charts/stat-card.tsx
-function r({ label: r, title: i, value: a, subtitle: o, icon: s, iconColor: c = "text-basalt-muted-foreground", trend: l, ariaLabel: u, className: d }) {
-	let f = i ?? r, p = typeof a == "number" ? a.toLocaleString() : a, m = l && l.value > 0, h = l && l.value < 0, g = u ?? [
-		f,
-		p,
-		o,
-		l ? `${m ? "+" : ""}${l.value}% ${l.label ?? ""}` : null
-	].filter(Boolean).join(" ").trim();
-	return /* @__PURE__ */ n("div", {
-		className: e("rounded-basalt-md border border-basalt-border bg-basalt-secondary p-4", d),
-		role: "img",
-		"aria-label": g,
-		children: [/* @__PURE__ */ n("div", {
-			className: "flex items-start justify-between",
-			children: [/* @__PURE__ */ n("div", {
-				className: "space-y-1",
+function i(e) {
+	return e != null && e !== !1;
+}
+function a({ label: a, title: o, value: s, subtitle: c, icon: l, iconColor: u = "text-basalt-muted-foreground", trend: d, action: f, status: p, trendContent: m, children: h, ariaLabel: g, className: _ }) {
+	let v = o ?? a, y = i(p), b = i(m), x = i(f), S = i(h), C = x || y || b || S, w = x || !!l, T = typeof s == "number" ? s.toLocaleString() : s, E = d && d.value > 0, D = d && d.value < 0, O = g ?? [
+		v,
+		y ? null : T,
+		c,
+		!b && d ? `${E ? "+" : ""}${d.value}% ${d.label ?? ""}` : null
+	].filter(Boolean).join(" ").trim(), k = /* @__PURE__ */ r(t, { children: [
+		/* @__PURE__ */ r("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ r("div", {
+				className: "min-w-0 flex-1 space-y-1",
 				children: [
-					/* @__PURE__ */ t("p", {
+					/* @__PURE__ */ n("p", {
 						className: "text-xs text-basalt-muted-foreground md:text-sm",
-						children: f
+						children: v
 					}),
-					/* @__PURE__ */ t("p", {
-						className: "font-display text-xl font-semibold tracking-tight text-basalt-foreground md:text-2xl",
+					y ? /* @__PURE__ */ n("div", {
+						className: "pt-0.5",
 						children: p
+					}) : /* @__PURE__ */ n("p", {
+						className: "font-display text-xl font-semibold tracking-tight text-basalt-foreground md:text-2xl",
+						children: T
 					}),
-					o ? /* @__PURE__ */ t("p", {
+					c ? /* @__PURE__ */ n("p", {
 						className: "text-xs text-basalt-muted-foreground",
-						children: o
+						children: c
 					}) : null
 				]
-			}), s ? /* @__PURE__ */ t("div", {
-				className: e("rounded-md bg-basalt-card p-2", c),
-				children: /* @__PURE__ */ t(s, {
-					className: "h-5 w-5",
-					strokeWidth: 1.5
-				})
+			}), w ? /* @__PURE__ */ r("div", {
+				className: "flex items-center gap-2 shrink-0",
+				children: [x ? /* @__PURE__ */ n("div", {
+					className: "flex items-center",
+					children: f
+				}) : null, l ? /* @__PURE__ */ n("div", {
+					className: e("rounded-md bg-basalt-card p-2", u),
+					children: /* @__PURE__ */ n(l, {
+						className: "h-5 w-5",
+						strokeWidth: 1.5
+					})
+				}) : null]
 			}) : null]
-		}), l ? /* @__PURE__ */ n("div", {
+		}),
+		S ? /* @__PURE__ */ n("div", {
+			className: "mt-2",
+			children: h
+		}) : null,
+		b ? /* @__PURE__ */ n("div", {
+			className: "mt-3 flex items-center gap-1 text-xs",
+			children: m
+		}) : d ? /* @__PURE__ */ r("div", {
 			className: "mt-3 flex items-center gap-1 text-xs",
-			children: [/* @__PURE__ */ t("span", {
-				className: e("font-medium", m && "text-basalt-heatmap-green-4", h && "text-basalt-destructive", !m && !h && "text-basalt-muted-foreground"),
-				children: `${m ? "+" : ""}${l.value}%`
-			}), l.label ? /* @__PURE__ */ t("span", {
+			children: [/* @__PURE__ */ n("span", {
+				className: e("font-medium", E && "text-basalt-heatmap-green-4", D && "text-basalt-destructive", !E && !D && "text-basalt-muted-foreground"),
+				children: `${E ? "+" : ""}${d.value}%`
+			}), d.label ? /* @__PURE__ */ n("span", {
 				className: "text-basalt-muted-foreground",
-				children: l.label
+				children: d.label
 			}) : null]
-		}) : null]
+		}) : null
+	] });
+	return C ? /* @__PURE__ */ n("div", {
+		className: e("rounded-basalt-md border border-basalt-border bg-basalt-secondary p-4", _),
+		role: "group",
+		"aria-label": O,
+		children: k
+	}) : /* @__PURE__ */ n("div", {
+		className: e("rounded-basalt-md border border-basalt-border bg-basalt-secondary p-4", _),
+		role: "img",
+		"aria-label": O,
+		children: k
 	});
 }
-function i({ children: n, columns: r = 4, className: i }) {
-	return /* @__PURE__ */ t("div", {
+function o({ children: t, columns: r = 4, className: i }) {
+	return /* @__PURE__ */ n("div", {
 		className: e("grid gap-3 md:gap-4", {
 			2: "grid-cols-1 sm:grid-cols-2",
 			3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
 			4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
 		}[r], i),
-		children: n
+		children: t
 	});
 }
 //#endregion
-export { r as StatCard, i as StatGrid };
+export { a as StatCard, o as StatGrid };
 
 //# sourceMappingURL=stat-card.js.map

package/dist/charts/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/charts/stat-card.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type StatCardProps = {\n\tlabel?: string;\n\ttitle?: string;\n\tvalue: string | number;\n\tsubtitle?: string;\n\ticon?: LucideIcon;\n\ticonColor?: string;\n\ttrend?: { value: number; label?: string };\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function StatCard({\n\tlabel,\n\ttitle,\n\tvalue,\n\tsubtitle,\n\ticon: Icon,\n\ticonColor = \"text-basalt-muted-foreground\",\n\ttrend,\n\tariaLabel,\n\tclassName,\n}: StatCardProps) {\n\tconst heading = title ?? label;\n\tconst display = typeof value === \"number\" ? value.toLocaleString() : value;\n\tconst isPositiveTrend = trend && trend.value > 0;\n\tconst isNegativeTrend = trend && trend.value < 0;\n\tconst named =\n\t\tariaLabel ??\n\t\t[\n\t\t\theading,\n\t\t\tdisplay,\n\t\t\tsubtitle,\n\t\t\ttrend ? `${isPositiveTrend ? \"+\" : \"\"}${trend.value}% ${trend.label ?? \"\"}` : null,\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \")\n\t\t\t.trim();\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-basalt-md border border-basalt-border bg-basalt-secondary p-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\trole=\"img\"\n\t\t\taria-label={named}\n\t\t>\n\t\t\t<div className=\"flex items-start justify-between\">\n\t\t\t\t<div className=\"space-y-1\">\n\t\t\t\t\t<p className=\"text-xs text-basalt-muted-foreground md:text-sm\">{heading}</p>\n\t\t\t\t\t<p className=\"font-display text-xl font-semibold tracking-tight text-basalt-foreground md:text-2xl\">\n\t\t\t\t\t\t{display}\n\t\t\t\t\t</p>\n\t\t\t\t\t{subtitle ? <p className=\"text-xs text-basalt-muted-foreground\">{subtitle}</p> : null}\n\t\t\t\t</div>\n\t\t\t\t{Icon ? (\n\t\t\t\t\t<div className={cn(\"rounded-md bg-basalt-card p-2\", iconColor)}>\n\t\t\t\t\t\t<Icon className=\"h-5 w-5\" strokeWidth={1.5} />\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t\t{trend ? (\n\t\t\t\t<div className=\"mt-3 flex items-center gap-1 text-xs\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"font-medium\",\n\t\t\t\t\t\t\tisPositiveTrend && \"text-basalt-heatmap-green-4\",\n\t\t\t\t\t\t\tisNegativeTrend && \"text-basalt-destructive\",\n\t\t\t\t\t\t\t!isPositiveTrend && !isNegativeTrend && \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{`${isPositiveTrend ? \"+\" : \"\"}${trend.value}%`}\n\t\t\t\t\t</span>\n\t\t\t\t\t{trend.label ? <span className=\"text-basalt-muted-foreground\">{trend.label}</span> : null}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nexport type StatGridProps = {\n\tchildren: ReactNode;\n\tcolumns?: 2 | 3 | 4;\n\tclassName?: string;\n};\n\nexport function StatGrid({ children, columns = 4, className }: StatGridProps) {\n\tconst gridCols = {\n\t\t2: \"grid-cols-1 sm:grid-cols-2\",\n\t\t3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n\t\t4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n\t};\n\treturn <div className={cn(\"grid gap-3 md:gap-4\", gridCols[columns], className)}>{children}</div>;\n}\n"],"mappings":";;;;AAgBA,SAAgB,EAAS,EACxB,UACA,UACA,UACA,aACA,MAAM,GACN,eAAY,gCACZ,UACA,cACA,gBACiB;CACjB,IAAM,IAAU,KAAS,GACnB,IAAU,OAAO,KAAU,WAAW,EAAM,eAAe,IAAI,GAC/D,IAAkB,KAAS,EAAM,QAAQ,GACzC,IAAkB,KAAS,EAAM,QAAQ,GACzC,IACL,KACA;EACC;EACA;EACA;EACA,IAAQ,GAAG,IAAkB,MAAM,KAAK,EAAM,MAAM,IAAI,EAAM,SAAS,OAAO;CAC/E,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,CAAC,CACT,KAAK;CACR,OACC,kBAAC,OAAD;EACC,WAAW,EACV,yEACA,CACD;EACA,MAAK;EACL,cAAY;EANb,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACC,kBAAC,KAAD;MAAG,WAAU;MAAmD,UAAA;KAAW,CAAA;KAC3E,kBAAC,KAAD;MAAG,WAAU;MACX,UAAA;KACC,CAAA;KACF,IAAW,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAY,CAAA,IAAI;IAC7E;GACJ,CAAA,GAAA,IACA,kBAAC,OAAD;IAAK,WAAW,EAAG,iCAAiC,CAAS;IAC5D,UAAA,kBAAC,GAAD;KAAM,WAAU;KAAU,aAAa;IAAM,CAAA;GACzC,CAAA,IACF,IACA;EACJ,CAAA,GAAA,IACA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,QAAD;IACC,WAAW,EACV,eACA,KAAmB,+BACnB,KAAmB,2BACnB,CAAC,KAAmB,CAAC,KAAmB,8BACzC;IAEC,UAAA,GAAG,IAAkB,MAAM,KAAK,EAAM,MAAM;GACxC,CAAA,GACL,EAAM,QAAQ,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA,EAAM;GAAY,CAAA,IAAI,IACjF;EACF,CAAA,IAAA,IACA;;AAEP;AAQA,SAAgB,EAAS,EAAE,aAAU,aAAU,GAAG,gBAA4B;CAM7E,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB;GAJhD,GAAG;GACH,GAAG;GACH,GAAG;EAE6C,EAAS,IAAU,CAAS;EAAI;CAAc,CAAA;AAChG"}
+{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/charts/stat-card.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type StatCardProps = {\n\t/**\n\t * Secondary heading label for the metric card (overridden by title).\n\t */\n\tlabel?: string;\n\t/**\n\t * Primary heading title for the metric card (takes precedence over label).\n\t */\n\ttitle?: string;\n\t/**\n\t * Metric value, formatted via toLocaleString() if a number is provided.\n\t * Overridden by the status slot if provided.\n\t */\n\tvalue: string | number;\n\t/**\n\t * Supporting descriptive subtitle text rendered below value.\n\t */\n\tsubtitle?: string;\n\t/**\n\t * Optional decorative Lucide icon component.\n\t */\n\ticon?: LucideIcon;\n\t/**\n\t * Color class applied to the icon wrapper.\n\t * @default \"text-basalt-muted-foreground\"\n\t */\n\ticonColor?: string;\n\t/**\n\t * Structured percentage trend value and optional label.\n\t * Overridden by the trendContent slot if provided.\n\t */\n\ttrend?: { value: number; label?: string };\n\t/**\n\t * Optional header action or interactive element (e.g. tooltip trigger or button).\n\t * Renders alongside the title/icon. Switches card role to group for accessible descendants.\n\t */\n\taction?: ReactNode;\n\t/**\n\t * Optional custom status replacement slot (e.g. loading skeleton, error state, or empty state).\n\t * Takes precedence over the default value display and excludes value from accessible name.\n\t * Subtitle and trend remain caller-managed; when error/empty state is shown, callers should omit trend.\n\t */\n\tstatus?: ReactNode;\n\t/**\n\t * Optional custom trend replacement slot (e.g. custom badge, sparkline, or localized trend indicator).\n\t * Takes precedence over the default trend calculation and excludes default trend from accessible name.\n\t */\n\ttrendContent?: ReactNode;\n\t/**\n\t * Optional custom content rendered below the metric value and above or alongside the trend.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Explicit accessible label overriding automatic accessible name calculation.\n\t */\n\tariaLabel?: string;\n\t/**\n\t * Additional CSS class names for styling the card root.\n\t */\n\tclassName?: string;\n};\n\nfunction hasSlotContent(slot: ReactNode | undefined): boolean {\n\treturn slot !== undefined && slot !== null && slot !== false;\n}\n\nexport function StatCard({\n\tlabel,\n\ttitle,\n\tvalue,\n\tsubtitle,\n\ticon: Icon,\n\ticonColor = \"text-basalt-muted-foreground\",\n\ttrend,\n\taction,\n\tstatus,\n\ttrendContent,\n\tchildren,\n\tariaLabel,\n\tclassName,\n}: StatCardProps) {\n\tconst heading = title ?? label;\n\tconst hasStatus = hasSlotContent(status);\n\tconst hasTrendContent = hasSlotContent(trendContent);\n\tconst hasAction = hasSlotContent(action);\n\tconst hasChildren = hasSlotContent(children);\n\tconst isInteractive = hasAction || hasStatus || hasTrendContent || hasChildren;\n\tconst hasHeaderEnd = hasAction || Boolean(Icon);\n\n\tconst display = typeof value === \"number\" ? value.toLocaleString() : value;\n\tconst isPositiveTrend = trend && trend.value > 0;\n\tconst isNegativeTrend = trend && trend.value < 0;\n\n\t// Accessible name: If custom status or custom trendContent is provided, do not report\n\t// the overridden hidden default value or default trend to assistive technology.\n\tconst named =\n\t\tariaLabel ??\n\t\t[\n\t\t\theading,\n\t\t\t!hasStatus ? display : null,\n\t\t\tsubtitle,\n\t\t\t!hasTrendContent && trend\n\t\t\t\t? `${isPositiveTrend ? \"+\" : \"\"}${trend.value}% ${trend.label ?? \"\"}`\n\t\t\t\t: null,\n\t\t]\n\t\t\t.filter(Boolean)\n\t\t\t.join(\" \")\n\t\t\t.trim();\n\n\tconst cardContent = (\n\t\t<>\n\t\t\t<div className=\"flex items-start justify-between gap-3\">\n\t\t\t\t<div className=\"min-w-0 flex-1 space-y-1\">\n\t\t\t\t\t<p className=\"text-xs text-basalt-muted-foreground md:text-sm\">{heading}</p>\n\t\t\t\t\t{hasStatus ? (\n\t\t\t\t\t\t<div className=\"pt-0.5\">{status}</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<p className=\"font-display text-xl font-semibold tracking-tight text-basalt-foreground md:text-2xl\">\n\t\t\t\t\t\t\t{display}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t\t{subtitle ? <p className=\"text-xs text-basalt-muted-foreground\">{subtitle}</p> : null}\n\t\t\t\t</div>\n\t\t\t\t{hasHeaderEnd ? (\n\t\t\t\t\t<div className=\"flex items-center gap-2 shrink-0\">\n\t\t\t\t\t\t{hasAction ? <div className=\"flex items-center\">{action}</div> : null}\n\t\t\t\t\t\t{Icon ? (\n\t\t\t\t\t\t\t<div className={cn(\"rounded-md bg-basalt-card p-2\", iconColor)}>\n\t\t\t\t\t\t\t\t<Icon className=\"h-5 w-5\" strokeWidth={1.5} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\n\t\t\t{hasChildren ? <div className=\"mt-2\">{children}</div> : null}\n\n\t\t\t{hasTrendContent ? (\n\t\t\t\t<div className=\"mt-3 flex items-center gap-1 text-xs\">{trendContent}</div>\n\t\t\t) : trend ? (\n\t\t\t\t<div className=\"mt-3 flex items-center gap-1 text-xs\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"font-medium\",\n\t\t\t\t\t\t\tisPositiveTrend && \"text-basalt-heatmap-green-4\",\n\t\t\t\t\t\t\tisNegativeTrend && \"text-basalt-destructive\",\n\t\t\t\t\t\t\t!isPositiveTrend && !isNegativeTrend && \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{`${isPositiveTrend ? \"+\" : \"\"}${trend.value}%`}\n\t\t\t\t\t</span>\n\t\t\t\t\t{trend.label ? <span className=\"text-basalt-muted-foreground\">{trend.label}</span> : null}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</>\n\t);\n\n\tif (isInteractive) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"rounded-basalt-md border border-basalt-border bg-basalt-secondary p-4\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\trole=\"group\"\n\t\t\t\taria-label={named}\n\t\t\t>\n\t\t\t\t{cardContent}\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-basalt-md border border-basalt-border bg-basalt-secondary p-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\trole=\"img\"\n\t\t\taria-label={named}\n\t\t>\n\t\t\t{cardContent}\n\t\t</div>\n\t);\n}\n\nexport type StatGridProps = {\n\tchildren: ReactNode;\n\tcolumns?: 2 | 3 | 4;\n\tclassName?: string;\n};\n\nexport function StatGrid({ children, columns = 4, className }: StatGridProps) {\n\tconst gridCols = {\n\t\t2: \"grid-cols-1 sm:grid-cols-2\",\n\t\t3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n\t\t4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n\t};\n\treturn <div className={cn(\"grid gap-3 md:gap-4\", gridCols[columns], className)}>{children}</div>;\n}\n"],"mappings":";;;;AAkEA,SAAS,EAAe,GAAsC;CAC7D,OAAO,KAA+B,QAAQ,MAAS;AACxD;AAEA,SAAgB,EAAS,EACxB,UACA,UACA,UACA,aACA,MAAM,GACN,eAAY,gCACZ,UACA,WACA,WACA,iBACA,aACA,cACA,gBACiB;CACjB,IAAM,IAAU,KAAS,GACnB,IAAY,EAAe,CAAM,GACjC,IAAkB,EAAe,CAAY,GAC7C,IAAY,EAAe,CAAM,GACjC,IAAc,EAAe,CAAQ,GACrC,IAAgB,KAAa,KAAa,KAAmB,GAC7D,IAAe,KAAa,EAAQ,GAEpC,IAAU,OAAO,KAAU,WAAW,EAAM,eAAe,IAAI,GAC/D,IAAkB,KAAS,EAAM,QAAQ,GACzC,IAAkB,KAAS,EAAM,QAAQ,GAIzC,IACL,KACA;EACC;EACC,IAAsB,OAAV;EACb;EACA,CAAC,KAAmB,IACjB,GAAG,IAAkB,MAAM,KAAK,EAAM,MAAM,IAAI,EAAM,SAAS,OAC/D;CACJ,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,CAAC,CACT,KAAK,GAEF,IACL,kBAAA,GAAA,EAAA,UAAA;EACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACC,kBAAC,KAAD;MAAG,WAAU;MAAmD,UAAA;KAAW,CAAA;KAC1E,IACA,kBAAC,OAAD;MAAK,WAAU;MAAU,UAAA;KAAY,CAAA,IAErC,kBAAC,KAAD;MAAG,WAAU;MACX,UAAA;KACC,CAAA;KAEH,IAAW,kBAAC,KAAD;MAAG,WAAU;MAAwC,UAAA;KAAY,CAAA,IAAI;IAC7E;GACJ,CAAA,GAAA,IACA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,IAAY,kBAAC,OAAD;KAAK,WAAU;KAAqB,UAAA;IAAY,CAAA,IAAI,MAChE,IACA,kBAAC,OAAD;KAAK,WAAW,EAAG,iCAAiC,CAAS;KAC5D,UAAA,kBAAC,GAAD;MAAM,WAAU;MAAU,aAAa;KAAM,CAAA;IACzC,CAAA,IACF,IACA;GACF,CAAA,IAAA,IACA;;EAEJ,IAAc,kBAAC,OAAD;GAAK,WAAU;GAAQ;EAAc,CAAA,IAAI;EAEvD,IACA,kBAAC,OAAD;GAAK,WAAU;GAAwC,UAAA;EAAkB,CAAA,IACtE,IACH,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,QAAD;IACC,WAAW,EACV,eACA,KAAmB,+BACnB,KAAmB,2BACnB,CAAC,KAAmB,CAAC,KAAmB,8BACzC;IAEC,UAAA,GAAG,IAAkB,MAAM,KAAK,EAAM,MAAM;GACxC,CAAA,GACL,EAAM,QAAQ,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA,EAAM;GAAY,CAAA,IAAI,IACjF;EACF,CAAA,IAAA;CACH,EAAA,CAAA;CAkBH,OAfI,IAEF,kBAAC,OAAD;EACC,WAAW,EACV,yEACA,CACD;EACA,MAAK;EACL,cAAY;EAEX,UAAA;CACG,CAAA,IAKN,kBAAC,OAAD;EACC,WAAW,EACV,yEACA,CACD;EACA,MAAK;EACL,cAAY;EAEX,UAAA;CACG,CAAA;AAEP;AAQA,SAAgB,EAAS,EAAE,aAAU,aAAU,GAAG,gBAA4B;CAM7E,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB;GAJhD,GAAG;GACH,GAAG;GACH,GAAG;EAE6C,EAAS,IAAU,CAAS;EAAI;CAAc,CAAA;AAChG"}

package/dist/charts/timeline.d.ts

@@ -3,7 +3,10 @@ export type TimelineEvent = {
     time: string;
     title: string;
     subtitle?: string;
+    /** Background utility classes for the event row. */
     color?: string;
+    /** Optional CSS text color for a custom background; subtitles inherit it without dimming. */
+    textColor?: string;
 };
 export type TimelineItem = {
     id?: string;

package/dist/charts/timeline.js

@@ -36,16 +36,17 @@ function o({ events: a, ariaLabel: o, className: s }) {
 		children: r.map((r) => {
 			let i = c.get(r) ?? [], a = i.length > 0;
 			return /* @__PURE__ */ n("li", {
-				className: e("relative flex items-start border-l-2 py-2 pl-4", a ? "border-basalt-primary" : "border-basalt-border"),
+				className: e("relative flex items-start border-l-2 py-2 pl-4", a ? "border-basalt-chart-1" : "border-basalt-border"),
 				children: [
 					/* @__PURE__ */ n("div", {
 						className: "absolute left-0 w-12 -translate-x-full pr-2 text-right text-xs text-basalt-muted-foreground",
 						children: [r.toString().padStart(2, "0"), ":00"]
 					}),
-					/* @__PURE__ */ t("div", { className: e("absolute -left-[5px] top-2 h-2 w-2 rounded-full", a ? "bg-basalt-primary" : "bg-basalt-border") }),
+					/* @__PURE__ */ t("div", { className: e("absolute -left-[5px] top-2 h-2 w-2 rounded-full", a ? "bg-basalt-chart-1" : "bg-basalt-border") }),
 					/* @__PURE__ */ t("div", {
 						className: "flex min-h-[24px] w-full flex-col gap-1",
 						children: i.map((r) => /* @__PURE__ */ n("div", {
+							style: r.textColor ? { color: r.textColor } : void 0,
 							className: e("flex items-center gap-2 rounded-md px-2 py-1 text-xs", r.color ? `${r.color} text-white` : "bg-basalt-muted text-basalt-foreground"),
 							children: [
 								/* @__PURE__ */ t("span", {
@@ -57,7 +58,7 @@ function o({ events: a, ariaLabel: o, className: s }) {
 									children: r.title
 								}),
 								r.subtitle ? /* @__PURE__ */ t("span", {
-									className: e("truncate", r.color ? "text-white/80" : "text-basalt-muted-foreground"),
+									className: e("truncate", r.textColor ? "text-current" : r.color ? "text-white/80" : "text-basalt-muted-foreground"),
 									children: r.subtitle
 								}) : null
 							]

package/dist/charts/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","names":[],"sources":["../../src/charts/timeline.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\nexport type TimelineEvent = {\n\tid: string;\n\ttime: string;\n\ttitle: string;\n\tsubtitle?: string;\n\tcolor?: string;\n};\n\nconst hours = Array.from({ length: 24 }, (_, index) => index);\n\nfunction getHour(time: string) {\n\treturn Number.parseInt(time.split(\":\")[0] ?? \"0\", 10);\n}\n\nexport type TimelineItem = { id?: string; title: string; at?: string };\n\nexport type TimelineItemsProps = {\n\titems: TimelineItem[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineEventsProps = {\n\tevents: TimelineEvent[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineProps = TimelineItemsProps | TimelineEventsProps;\n\nexport function Timeline(props: TimelineProps) {\n\tconst { ariaLabel = \"Timeline\", className } = props;\n\tif (\"events\" in props) {\n\t\treturn <HourTimeline events={props.events} ariaLabel={ariaLabel} className={className} />;\n\t}\n\treturn (\n\t\t<ol className={cn(\"space-y-2 text-sm\", className)} aria-label={ariaLabel}>\n\t\t\t{props.items.map((item, index) => (\n\t\t\t\t<li key={item.id ?? `${item.at ?? \"\"}-${item.title}-${index}`} className=\"flex gap-2\">\n\t\t\t\t\t<span className=\"text-basalt-muted-foreground\">{item.at}</span>\n\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nfunction HourTimeline({\n\tevents,\n\tariaLabel,\n\tclassName,\n}: {\n\tevents: TimelineEvent[];\n\tariaLabel: string;\n\tclassName?: string;\n}) {\n\tconst eventsByHour = new Map<number, TimelineEvent[]>();\n\tfor (const event of events) {\n\t\tconst hour = getHour(event.time);\n\t\tconst existing = eventsByHour.get(hour) ?? [];\n\t\teventsByHour.set(hour, [...existing, event]);\n\t}\n\treturn (\n\t\t<ol className={cn(\"flex flex-col pl-14\", className)} aria-label={ariaLabel}>\n\t\t\t{hours.map((hour) => {\n\t\t\t\tconst hourEvents = eventsByHour.get(hour) ?? [];\n\t\t\t\tconst hasEvents = hourEvents.length > 0;\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={hour}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative flex items-start border-l-2 py-2 pl-4\",\n\t\t\t\t\t\t\thasEvents ? \"border-basalt-primary\" : \"border-basalt-border\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"absolute left-0 w-12 -translate-x-full pr-2 text-right text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{hour.toString().padStart(2, \"0\")}:00\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"absolute -left-[5px] top-2 h-2 w-2 rounded-full\",\n\t\t\t\t\t\t\t\thasEvents ? \"bg-basalt-primary\" : \"bg-basalt-border\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"flex min-h-[24px] w-full flex-col gap-1\">\n\t\t\t\t\t\t\t{hourEvents.map((event) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={event.id}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-2 rounded-md px-2 py-1 text-xs\",\n\t\t\t\t\t\t\t\t\t\tevent.color\n\t\t\t\t\t\t\t\t\t\t\t? `${event.color} text-white`\n\t\t\t\t\t\t\t\t\t\t\t: \"bg-basalt-muted text-basalt-foreground\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium\">{event.time}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"truncate\">{event.title}</span>\n\t\t\t\t\t\t\t\t\t{event.subtitle ? (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"truncate\",\n\t\t\t\t\t\t\t\t\t\t\t\tevent.color ? \"text-white/80\" : \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{event.subtitle}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ol>\n\t);\n}\n"],"mappings":";;;;AAUA,IAAM,IAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAU,CAAK;AAE5D,SAAS,EAAQ,GAAc;CAC9B,OAAO,OAAO,SAAS,EAAK,MAAM,GAAG,CAAC,CAAC,MAAM,KAAK,EAAE;AACrD;AAgBA,SAAgB,EAAS,GAAsB;CAC9C,IAAM,EAAE,eAAY,YAAY,iBAAc;CAI9C,OAHI,YAAY,IACR,kBAAC,GAAD;EAAc,QAAQ,EAAM;EAAmB;EAAsB;CAAY,CAAA,IAGxF,kBAAC,MAAD;EAAI,WAAW,EAAG,qBAAqB,CAAS;EAAG,cAAY;EAC7D,UAAA,EAAM,MAAM,KAAK,GAAM,MACvB,kBAAC,MAAD;GAA+D,WAAU;GAAzE,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA,EAAK;GAAS,CAAA,GAC9D,kBAAC,QAAD,EAAA,UAAO,EAAK,MAAY,CAAA,CACrB;EAHK,GAAA,EAAK,MAAM,GAAG,EAAK,MAAM,GAAG,GAAG,EAAK,MAAM,GAAG,GAGlD,CACJ;CACE,CAAA;AAEN;AAEA,SAAS,EAAa,EACrB,WACA,cACA,gBAKE;CACF,IAAM,oBAAe,IAAI,IAA6B;CACtD,KAAK,IAAM,KAAS,GAAQ;EAC3B,IAAM,IAAO,EAAQ,EAAM,IAAI,GACzB,IAAW,EAAa,IAAI,CAAI,KAAK,CAAC;EAC5C,EAAa,IAAI,GAAM,CAAC,GAAG,GAAU,CAAK,CAAC;CAC5C;CACA,OACC,kBAAC,MAAD;EAAI,WAAW,EAAG,uBAAuB,CAAS;EAAG,cAAY;EAC/D,UAAA,EAAM,KAAK,MAAS;GACpB,IAAM,IAAa,EAAa,IAAI,CAAI,KAAK,CAAC,GACxC,IAAY,EAAW,SAAS;GACtC,OACC,kBAAC,MAAD;IAEC,WAAW,EACV,kDACA,IAAY,0BAA0B,sBACvC;IALD,UAAA;KAOC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,EAAK,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,GAAE,KAC9B;;KACL,kBAAC,OAAD,EACC,WAAW,EACV,mDACA,IAAY,sBAAsB,kBACnC,EACA,CAAA;KACD,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,EAAW,KAAK,MAChB,kBAAC,OAAD;OAEC,WAAW,EACV,wDACA,EAAM,QACH,GAAG,EAAM,MAAM,eACf,wCACJ;OAPD,UAAA;QASC,kBAAC,QAAD;SAAM,WAAU;SAAe,UAAA,EAAM;QAAW,CAAA;QAChD,kBAAC,QAAD;SAAM,WAAU;SAAY,UAAA,EAAM;QAAY,CAAA;QAC7C,EAAM,WACN,kBAAC,QAAD;SACC,WAAW,EACV,YACA,EAAM,QAAQ,kBAAkB,8BACjC;SAEC,UAAA,EAAM;QACF,CAAA,IACH;OACA;MApBC,GAAA,EAAM,EAoBP,CACL;KACG,CAAA;IACF;GAzCE,GAAA,CAyCF;EAEN,CAAC;CACE,CAAA;AAEN"}
+{"version":3,"file":"timeline.js","names":[],"sources":["../../src/charts/timeline.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\nexport type TimelineEvent = {\n\tid: string;\n\ttime: string;\n\ttitle: string;\n\tsubtitle?: string;\n\t/** Background utility classes for the event row. */\n\tcolor?: string;\n\t/** Optional CSS text color for a custom background; subtitles inherit it without dimming. */\n\ttextColor?: string;\n};\n\nconst hours = Array.from({ length: 24 }, (_, index) => index);\n\nfunction getHour(time: string) {\n\treturn Number.parseInt(time.split(\":\")[0] ?? \"0\", 10);\n}\n\nexport type TimelineItem = { id?: string; title: string; at?: string };\n\nexport type TimelineItemsProps = {\n\titems: TimelineItem[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineEventsProps = {\n\tevents: TimelineEvent[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineProps = TimelineItemsProps | TimelineEventsProps;\n\nexport function Timeline(props: TimelineProps) {\n\tconst { ariaLabel = \"Timeline\", className } = props;\n\tif (\"events\" in props) {\n\t\treturn <HourTimeline events={props.events} ariaLabel={ariaLabel} className={className} />;\n\t}\n\treturn (\n\t\t<ol className={cn(\"space-y-2 text-sm\", className)} aria-label={ariaLabel}>\n\t\t\t{props.items.map((item, index) => (\n\t\t\t\t<li key={item.id ?? `${item.at ?? \"\"}-${item.title}-${index}`} className=\"flex gap-2\">\n\t\t\t\t\t<span className=\"text-basalt-muted-foreground\">{item.at}</span>\n\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nfunction HourTimeline({\n\tevents,\n\tariaLabel,\n\tclassName,\n}: {\n\tevents: TimelineEvent[];\n\tariaLabel: string;\n\tclassName?: string;\n}) {\n\tconst eventsByHour = new Map<number, TimelineEvent[]>();\n\tfor (const event of events) {\n\t\tconst hour = getHour(event.time);\n\t\tconst existing = eventsByHour.get(hour) ?? [];\n\t\teventsByHour.set(hour, [...existing, event]);\n\t}\n\treturn (\n\t\t<ol className={cn(\"flex flex-col pl-14\", className)} aria-label={ariaLabel}>\n\t\t\t{hours.map((hour) => {\n\t\t\t\tconst hourEvents = eventsByHour.get(hour) ?? [];\n\t\t\t\tconst hasEvents = hourEvents.length > 0;\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={hour}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative flex items-start border-l-2 py-2 pl-4\",\n\t\t\t\t\t\t\thasEvents ? \"border-basalt-chart-1\" : \"border-basalt-border\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"absolute left-0 w-12 -translate-x-full pr-2 text-right text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{hour.toString().padStart(2, \"0\")}:00\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"absolute -left-[5px] top-2 h-2 w-2 rounded-full\",\n\t\t\t\t\t\t\t\thasEvents ? \"bg-basalt-chart-1\" : \"bg-basalt-border\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"flex min-h-[24px] w-full flex-col gap-1\">\n\t\t\t\t\t\t\t{hourEvents.map((event) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={event.id}\n\t\t\t\t\t\t\t\t\tstyle={event.textColor ? { color: event.textColor } : undefined}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-2 rounded-md px-2 py-1 text-xs\",\n\t\t\t\t\t\t\t\t\t\tevent.color\n\t\t\t\t\t\t\t\t\t\t\t? `${event.color} text-white`\n\t\t\t\t\t\t\t\t\t\t\t: \"bg-basalt-muted text-basalt-foreground\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium\">{event.time}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"truncate\">{event.title}</span>\n\t\t\t\t\t\t\t\t\t{event.subtitle ? (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"truncate\",\n\t\t\t\t\t\t\t\t\t\t\t\tevent.textColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-current\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: event.color\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? \"text-white/80\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{event.subtitle}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ol>\n\t);\n}\n"],"mappings":";;;;AAaA,IAAM,IAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAU,CAAK;AAE5D,SAAS,EAAQ,GAAc;CAC9B,OAAO,OAAO,SAAS,EAAK,MAAM,GAAG,CAAC,CAAC,MAAM,KAAK,EAAE;AACrD;AAgBA,SAAgB,EAAS,GAAsB;CAC9C,IAAM,EAAE,eAAY,YAAY,iBAAc;CAI9C,OAHI,YAAY,IACR,kBAAC,GAAD;EAAc,QAAQ,EAAM;EAAmB;EAAsB;CAAY,CAAA,IAGxF,kBAAC,MAAD;EAAI,WAAW,EAAG,qBAAqB,CAAS;EAAG,cAAY;EAC7D,UAAA,EAAM,MAAM,KAAK,GAAM,MACvB,kBAAC,MAAD;GAA+D,WAAU;GAAzE,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA,EAAK;GAAS,CAAA,GAC9D,kBAAC,QAAD,EAAA,UAAO,EAAK,MAAY,CAAA,CACrB;EAHK,GAAA,EAAK,MAAM,GAAG,EAAK,MAAM,GAAG,GAAG,EAAK,MAAM,GAAG,GAGlD,CACJ;CACE,CAAA;AAEN;AAEA,SAAS,EAAa,EACrB,WACA,cACA,gBAKE;CACF,IAAM,oBAAe,IAAI,IAA6B;CACtD,KAAK,IAAM,KAAS,GAAQ;EAC3B,IAAM,IAAO,EAAQ,EAAM,IAAI,GACzB,IAAW,EAAa,IAAI,CAAI,KAAK,CAAC;EAC5C,EAAa,IAAI,GAAM,CAAC,GAAG,GAAU,CAAK,CAAC;CAC5C;CACA,OACC,kBAAC,MAAD;EAAI,WAAW,EAAG,uBAAuB,CAAS;EAAG,cAAY;EAC/D,UAAA,EAAM,KAAK,MAAS;GACpB,IAAM,IAAa,EAAa,IAAI,CAAI,KAAK,CAAC,GACxC,IAAY,EAAW,SAAS;GACtC,OACC,kBAAC,MAAD;IAEC,WAAW,EACV,kDACA,IAAY,0BAA0B,sBACvC;IALD,UAAA;KAOC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,EAAK,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,GAAE,KAC9B;;KACL,kBAAC,OAAD,EACC,WAAW,EACV,mDACA,IAAY,sBAAsB,kBACnC,EACA,CAAA;KACD,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,EAAW,KAAK,MAChB,kBAAC,OAAD;OAEC,OAAO,EAAM,YAAY,EAAE,OAAO,EAAM,UAAU,IAAI,KAAA;OACtD,WAAW,EACV,wDACA,EAAM,QACH,GAAG,EAAM,MAAM,eACf,wCACJ;OARD,UAAA;QAUC,kBAAC,QAAD;SAAM,WAAU;SAAe,UAAA,EAAM;QAAW,CAAA;QAChD,kBAAC,QAAD;SAAM,WAAU;SAAY,UAAA,EAAM;QAAY,CAAA;QAC7C,EAAM,WACN,kBAAC,QAAD;SACC,WAAW,EACV,YACA,EAAM,YACH,iBACA,EAAM,QACL,kBACA,8BACL;SAEC,UAAA,EAAM;QACF,CAAA,IACH;OACA;MAzBC,GAAA,EAAM,EAyBP,CACL;KACG,CAAA;IACF;GA9CE,GAAA,CA8CF;EAEN,CAAC;CACE,CAAA;AAEN"}

package/dist/charts/timeseries.d.ts

@@ -1,8 +1,61 @@
-import type { XYPoint, XYSeriesDescriptor } from "./series.js";
-export type TimeseriesProps = {
-    data: XYPoint[];
-    series?: XYSeriesDescriptor[];
+import type { ReactNode } from "react";
+import { type LineChartAxisDomain, type LineChartLegendRenderer, type LineChartNumericKeys, type LineChartTooltipRenderer } from "./line.js";
+import type { ChartSeriesDescriptor, XYPoint } from "./series.js";
+export type TimeseriesProps<TData extends {
+    x: string | number;
+} = XYPoint, K extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string> = {
+    /**
+     * Dataset array where each record requires an `x` category or time coordinate.
+     * Any remaining fields with numeric, nullable, or optional number values are inferred as valid series keys.
+     */
+    data: TData[];
+    /**
+     * Series descriptors identifying which numeric keys to plot.
+     * Inferred strictly from numeric keys of `TData` (rejects non-numeric fields, `x`, and typos).
+     */
+    series?: Array<ChartSeriesDescriptor<NoInfer<K>>>;
     ariaLabel?: string;
     className?: string;
+    showAxes?: boolean;
+    showLegend?: boolean;
+    color?: string;
+    /**
+     * Value formatter for Y-axis tick values and fallback tooltip values.
+     */
+    valueFormatter?: (value: number) => string;
+    /**
+     * Formatter for X-axis category or time tick labels.
+     */
+    xValueFormatter?: (value: string | number) => string;
+    /**
+     * Custom numerical or keyword bounds for the Y-axis.
+     */
+    yDomain?: LineChartAxisDomain;
+    /**
+     * Custom legend slot or render function receiving resolved series descriptors.
+     */
+    legend?: ReactNode | LineChartLegendRenderer<K>;
+    /**
+     * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.
+     */
+    customTooltip?: LineChartTooltipRenderer;
+    /**
+     * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.
+     * Associated with the chart via useId and aria-describedby.
+     */
+    summary?: ReactNode;
+    /**
+     * Accessible tabular or structured data alternative rendered outside the plot area.
+     */
+    dataAlternative?: ReactNode;
+    /**
+     * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.
+     * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.
+     * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.
+     * @default true
+     */
+    accessibilityLayer?: boolean;
 };
-export declare function Timeseries({ data, series, ariaLabel, className }: TimeseriesProps): import("react").JSX.Element;
+export declare function Timeseries<TData extends {
+    x: string | number;
+} = XYPoint, K extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string>({ data, series, ariaLabel, className, showAxes, showLegend, color, valueFormatter, xValueFormatter, yDomain, legend, customTooltip, summary, dataAlternative, accessibilityLayer, }: TimeseriesProps<TData, K>): import("react").JSX.Element;

package/dist/charts/timeseries.js

@@ -2,12 +2,23 @@
 import { LineChart as e } from "./line.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/charts/timeseries.tsx
-function n({ data: n, series: r, ariaLabel: i = "Timeseries", className: a }) {
+function n({ data: n, series: r, ariaLabel: i = "Timeseries", className: a, showAxes: o = !1, showLegend: s = !1, color: c, valueFormatter: l, xValueFormatter: u, yDomain: d, legend: f, customTooltip: p, summary: m, dataAlternative: h, accessibilityLayer: g }) {
 	return /* @__PURE__ */ t(e, {
 		data: n,
 		series: r,
 		ariaLabel: i,
-		className: a
+		className: a,
+		showAxes: o,
+		showLegend: s,
+		color: c,
+		valueFormatter: l,
+		xValueFormatter: u,
+		yDomain: d,
+		legend: f,
+		customTooltip: p,
+		summary: m,
+		dataAlternative: h,
+		accessibilityLayer: g
 	});
 }
 //#endregion

package/dist/charts/timeseries.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeseries.js","names":[],"sources":["../../src/charts/timeseries.tsx"],"sourcesContent":["import { LineChart } from \"./line\";\nimport type { XYPoint, XYSeriesDescriptor } from \"./series\";\n\nexport type TimeseriesProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function Timeseries({ data, series, ariaLabel = \"Timeseries\", className }: TimeseriesProps) {\n\treturn <LineChart data={data} series={series} ariaLabel={ariaLabel} className={className} />;\n}\n"],"mappings":";;;;AAUA,SAAgB,EAAW,EAAE,SAAM,WAAQ,eAAY,cAAc,gBAA8B;CAClG,OAAO,kBAAC,GAAD;EAAiB;EAAc;EAAmB;EAAsB;CAAY,CAAA;AAC5F"}
+{"version":3,"file":"timeseries.js","names":[],"sources":["../../src/charts/timeseries.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n\tLineChart,\n\ttype LineChartAxisDomain,\n\ttype LineChartLegendRenderer,\n\ttype LineChartNumericKeys,\n\ttype LineChartTooltipRenderer,\n} from \"./line\";\nimport type { ChartSeriesDescriptor, XYPoint } from \"./series\";\n\nexport type TimeseriesProps<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n> = {\n\t/**\n\t * Dataset array where each record requires an `x` category or time coordinate.\n\t * Any remaining fields with numeric, nullable, or optional number values are inferred as valid series keys.\n\t */\n\tdata: TData[];\n\t/**\n\t * Series descriptors identifying which numeric keys to plot.\n\t * Inferred strictly from numeric keys of `TData` (rejects non-numeric fields, `x`, and typos).\n\t */\n\tseries?: Array<ChartSeriesDescriptor<NoInfer<K>>>;\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tshowLegend?: boolean;\n\tcolor?: string;\n\t/**\n\t * Value formatter for Y-axis tick values and fallback tooltip values.\n\t */\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Formatter for X-axis category or time tick labels.\n\t */\n\txValueFormatter?: (value: string | number) => string;\n\t/**\n\t * Custom numerical or keyword bounds for the Y-axis.\n\t */\n\tyDomain?: LineChartAxisDomain;\n\t/**\n\t * Custom legend slot or render function receiving resolved series descriptors.\n\t */\n\tlegend?: ReactNode | LineChartLegendRenderer<K>;\n\t/**\n\t * Custom tooltip content renderer receiving Recharts payload, active status, and coordinate label.\n\t */\n\tcustomTooltip?: LineChartTooltipRenderer;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function Timeseries<\n\tTData extends { x: string | number } = XYPoint,\n\tK extends LineChartNumericKeys<TData> & string = LineChartNumericKeys<TData> & string,\n>({\n\tdata,\n\tseries,\n\tariaLabel = \"Timeseries\",\n\tclassName,\n\tshowAxes = false,\n\tshowLegend = false,\n\tcolor,\n\tvalueFormatter,\n\txValueFormatter,\n\tyDomain,\n\tlegend,\n\tcustomTooltip,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: TimeseriesProps<TData, K>) {\n\treturn (\n\t\t<LineChart\n\t\t\tdata={data}\n\t\t\tseries={series}\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tshowAxes={showAxes}\n\t\t\tshowLegend={showLegend}\n\t\t\tcolor={color}\n\t\t\tvalueFormatter={valueFormatter}\n\t\t\txValueFormatter={xValueFormatter}\n\t\t\tyDomain={yDomain}\n\t\t\tlegend={legend}\n\t\t\tcustomTooltip={customTooltip}\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAmEA,SAAgB,EAGd,EACD,SACA,WACA,eAAY,cACZ,cACA,cAAW,IACX,gBAAa,IACb,UACA,mBACA,oBACA,YACA,WACA,kBACA,YACA,oBACA,yBAC6B;CAC7B,OACC,kBAAC,GAAD;EACO;EACE;EACG;EACA;EACD;EACE;EACL;EACS;EACC;EACR;EACD;EACO;EACN;EACQ;EACG;CACpB,CAAA;AAEH"}

package/dist/charts/tooltip.d.ts

@@ -1,3 +1,4 @@
+import type { ComponentProps, ReactNode } from "react";
 export type ChartTooltipItem = {
     name?: string;
     value?: number | string;
@@ -12,5 +13,61 @@ export type ChartTooltipContentProps = {
     label?: string | number;
     formatter?: (value: number) => string;
 };
+export interface ChartTooltipRowProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * Series or metric name displayed beside the color dot.
+     * Preserves numeric `0` and React nodes; nullish values omit the label element.
+     */
+    label?: ReactNode;
+    /**
+     * Display value of the point or metric.
+     * Finite numbers are automatically formatted via `formatter` or `formatChartNumber`.
+     * `null` or `undefined` renders placeholder "—". ReactNode values are passed through.
+     */
+    value?: ReactNode;
+    /**
+     * Dot swatch indicator color. Defaults to `--basalt-chart-1`.
+     */
+    color?: string;
+    /**
+     * Optional unit suffix (e.g., "ms", "req/s", "%") rendered adjacent to valid values.
+     * Omitted when `value` evaluates to placeholder "—".
+     */
+    unit?: ReactNode;
+    /**
+     * Custom numeric value formatter overriding `formatChartNumber`.
+     */
+    formatter?: (value: number) => string;
+    /**
+     * When true, suppresses rendering of the decorative color dot.
+     * @default false
+     */
+    hideIndicator?: boolean;
+}
+export interface ChartTooltipSummaryProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * Summary row heading label.
+     * Preserves numeric `0` and custom nodes.
+     * @default "Total"
+     */
+    label?: ReactNode;
+    /**
+     * Aggregated metric value. Finite numbers are formatted; nullish renders "—".
+     */
+    value?: ReactNode;
+    /**
+     * Optional unit suffix appended to the summary value.
+     */
+    unit?: ReactNode;
+    /**
+     * Custom numeric formatter for the summary value.
+     */
+    formatter?: (value: number) => string;
+}
+export interface ChartTooltipDividerProps extends Omit<ComponentProps<"hr">, "children"> {
+}
 export declare function formatChartNumber(value: number): string;
+export declare function ChartTooltipRow({ label, value, color, unit, formatter, hideIndicator, style, ...rest }: ChartTooltipRowProps): import("react").JSX.Element;
+export declare function ChartTooltipDivider({ style, ...rest }: ChartTooltipDividerProps): import("react").JSX.Element;
+export declare function ChartTooltipSummary({ label, value, unit, formatter, style, ...rest }: ChartTooltipSummaryProps): import("react").JSX.Element;
 export declare function ChartTooltipContent({ active, payload, label, formatter, }: ChartTooltipContentProps): import("react").JSX.Element | null;

package/dist/charts/tooltip.js

@@ -18,7 +18,124 @@ function s(e) {
 function c(e) {
 	return e.color ?? e.fill ?? e.stroke ?? "hsl(var(--basalt-chart-1))";
 }
-function l({ active: n, payload: l, label: u, formatter: d }) {
+function l(e, t) {
+	return e == null ? "—" : typeof e == "number" ? t ? t(e) : o(e) : e;
+}
+function u({ label: n, value: r, color: o, unit: s, formatter: c, hideIndicator: u = !1, style: d, ...f }) {
+	let p = l(r, c), m = n != null, h = o ?? "hsl(var(--basalt-chart-1))";
+	return /* @__PURE__ */ t("div", {
+		"data-testid": "chart-tooltip-row",
+		style: {
+			alignItems: "center",
+			display: "flex",
+			fontSize: i,
+			gap: 8,
+			lineHeight: "20px",
+			minWidth: 0,
+			...d
+		},
+		...f,
+		children: [
+			u ? null : /* @__PURE__ */ e("span", {
+				"aria-hidden": "true",
+				style: {
+					background: h,
+					borderRadius: 999,
+					boxShadow: "0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)",
+					flexShrink: 0,
+					height: a,
+					width: a
+				}
+			}),
+			m ? /* @__PURE__ */ e("span", {
+				style: {
+					color: "hsl(var(--basalt-muted-foreground))",
+					flex: 1,
+					minWidth: 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				},
+				children: n
+			}) : null,
+			/* @__PURE__ */ t("span", {
+				style: {
+					color: "hsl(var(--basalt-popover-foreground))",
+					flexShrink: 0,
+					fontVariantNumeric: "tabular-nums",
+					fontWeight: 600,
+					marginLeft: m ? 0 : "auto"
+				},
+				children: [p, s != null && p !== "—" ? /* @__PURE__ */ e("span", {
+					style: {
+						fontWeight: 400,
+						marginLeft: 2
+					},
+					children: s
+				}) : null]
+			})
+		]
+	});
+}
+function d({ style: t, ...n }) {
+	return /* @__PURE__ */ e("hr", {
+		"aria-orientation": "horizontal",
+		"data-testid": "chart-tooltip-divider",
+		style: {
+			backgroundColor: "hsl(var(--basalt-border) / 0.55)",
+			border: 0,
+			height: 1,
+			margin: "4px 0",
+			width: "100%",
+			...t
+		},
+		...n
+	});
+}
+function f({ label: n = "Total", value: r, unit: a, formatter: o, style: s, ...c }) {
+	let u = l(r, o), d = n != null;
+	return /* @__PURE__ */ t("div", {
+		"data-testid": "chart-tooltip-summary",
+		style: {
+			alignItems: "center",
+			display: "flex",
+			fontSize: i,
+			gap: 8,
+			lineHeight: "20px",
+			minWidth: 0,
+			...s
+		},
+		...c,
+		children: [d ? /* @__PURE__ */ e("span", {
+			style: {
+				color: "hsl(var(--basalt-muted-foreground))",
+				flex: 1,
+				fontWeight: 600,
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			children: n
+		}) : null, /* @__PURE__ */ t("span", {
+			style: {
+				color: "hsl(var(--basalt-popover-foreground))",
+				flexShrink: 0,
+				fontVariantNumeric: "tabular-nums",
+				fontWeight: 700,
+				marginLeft: d ? 0 : "auto"
+			},
+			children: [u, a != null && u !== "—" ? /* @__PURE__ */ e("span", {
+				style: {
+					fontWeight: 500,
+					marginLeft: 2
+				},
+				children: a
+			}) : null]
+		})]
+	});
+}
+function p({ active: n, payload: l, label: u, formatter: d }) {
 	if (!n || !l?.length) return null;
 	let f = d ?? o, p = u == null || u === "" ? void 0 : String(u);
 	return /* @__PURE__ */ t("div", {
@@ -100,6 +217,6 @@ function l({ active: n, payload: l, label: u, formatter: d }) {
 	});
 }
 //#endregion
-export { l as ChartTooltipContent, o as formatChartNumber };
+export { p as ChartTooltipContent, d as ChartTooltipDivider, u as ChartTooltipRow, f as ChartTooltipSummary, o as formatChartNumber };
 
 //# sourceMappingURL=tooltip.js.map