@burdenoff/microfe-timecampus 2026.707.1 → 2026.710.2

package/dist/timecampus/components/charts/DonutChart.js

@@ -1,42 +1,38 @@
 import { cn as e } from "../../utils/helpers.js";
-import { Tooltip as t } from "../../../node_modules/recharts/es6/component/Tooltip.js";
-import { ResponsiveContainer as n } from "../../../node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { Cell as r } from "../../../node_modules/recharts/es6/component/Cell.js";
-import { Pie as i } from "../../../node_modules/recharts/es6/polar/Pie.js";
-import { PieChart as a } from "../../../node_modules/recharts/es6/chart/PieChart.js";
-import { chartTokens as o, formatNumber as s, renderValue as c, seriesColor as l, usePrefersReducedMotion as u } from "./chartTheme.js";
-import { ChartEmpty as d, ChartTooltip as f, srOnlyStyle as p } from "./ChartParts.js";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { chartTokens as t, formatNumber as n, renderValue as r, seriesColor as i, usePrefersReducedMotion as a } from "./chartTheme.js";
+import { ChartEmpty as o, ChartTooltip as s, srOnlyStyle as c } from "./ChartParts.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Cell as d, Pie as f, PieChart as p, ResponsiveContainer as m, Tooltip as h } from "recharts";
 //#region src/timecampus/components/charts/DonutChart.tsx
-function g({ data: g, centerLabel: _, centerValue: v, height: y = 240, thickness: b = .42, valueFormat: x = s, showLegend: S = !0, emptyLabel: C, ariaLabel: w, className: T }) {
-	let E = u(), D = g.filter((e) => typeof e.value == "number" && Number.isFinite(e.value) && e.value > 0).map((e, t) => ({
+function g({ data: g, centerLabel: _, centerValue: v, height: y = 240, thickness: b = .42, valueFormat: x = n, showLegend: S = !0, emptyLabel: C, ariaLabel: w, className: T }) {
+	let E = a(), D = g.filter((e) => typeof e.value == "number" && Number.isFinite(e.value) && e.value > 0).map((e, t) => ({
 		...e,
-		color: e.color ?? l(t)
+		color: e.color ?? i(t)
 	})), O = D.reduce((e, t) => e + t.value, 0);
-	if (D.length === 0 || O <= 0) return /* @__PURE__ */ m(d, {
+	if (D.length === 0 || O <= 0) return /* @__PURE__ */ l(o, {
 		height: y,
 		label: C,
 		className: T
 	});
-	let k = w ?? `${_ ?? "Distribution"}: ${D.map((e) => e.name).join(", ")}`, A = Math.max(0, Math.round(82 * (1 - b))), j = _ !== void 0 || v !== void 0, M = v === void 0 ? x(O) : c(v, x);
-	return /* @__PURE__ */ h("figure", {
+	let k = w ?? `${_ ?? "Distribution"}: ${D.map((e) => e.name).join(", ")}`, A = Math.max(0, Math.round(82 * (1 - b))), j = _ !== void 0 || v !== void 0, M = v === void 0 ? x(O) : r(v, x);
+	return /* @__PURE__ */ u("figure", {
 		role: "img",
 		"aria-label": k,
 		className: e("w-full", T),
 		children: [
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ u("div", {
 				className: "relative mx-auto",
 				style: { height: y },
-				children: [/* @__PURE__ */ m(n, {
+				children: [/* @__PURE__ */ l(m, {
 					width: "100%",
 					height: "100%",
-					children: /* @__PURE__ */ h(a, { children: [/* @__PURE__ */ m(t, {
+					children: /* @__PURE__ */ u(p, { children: [/* @__PURE__ */ l(h, {
 						cursor: !1,
-						content: /* @__PURE__ */ m(f, {
+						content: /* @__PURE__ */ l(s, {
 							valueFormat: x,
 							hideLabel: !0
 						})
-					}), /* @__PURE__ */ m(i, {
+					}), /* @__PURE__ */ l(f, {
 						data: D,
 						dataKey: "value",
 						nameKey: "name",
@@ -45,65 +41,65 @@ function g({ data: g, centerLabel: _, centerValue: v, height: y = 240, thickness
 						innerRadius: `${A}%`,
 						outerRadius: "82%",
 						paddingAngle: 1.5,
-						stroke: o.surface,
+						stroke: t.surface,
 						strokeWidth: 2,
 						isAnimationActive: !E,
-						children: D.map((e) => /* @__PURE__ */ m(r, { fill: e.color }, e.name))
+						children: D.map((e) => /* @__PURE__ */ l(d, { fill: e.color }, e.name))
 					})] })
-				}), j ? /* @__PURE__ */ h("div", {
+				}), j ? /* @__PURE__ */ u("div", {
 					className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
-					children: [/* @__PURE__ */ m("span", {
+					children: [/* @__PURE__ */ l("span", {
 						className: "text-2xl font-bold text-text-primary",
 						children: M
-					}), _ ? /* @__PURE__ */ m("span", {
+					}), _ ? /* @__PURE__ */ l("span", {
 						className: "mt-0.5 max-w-[70%] text-xs text-text-secondary",
 						children: _
 					}) : null]
 				}) : null]
 			}),
-			S ? /* @__PURE__ */ m("ul", {
+			S ? /* @__PURE__ */ l("ul", {
 				className: "mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5",
-				children: D.map((e) => /* @__PURE__ */ h("li", {
+				children: D.map((e) => /* @__PURE__ */ u("li", {
 					className: "flex items-center gap-1.5 text-xs text-text-secondary",
 					children: [
-						/* @__PURE__ */ m("span", {
+						/* @__PURE__ */ l("span", {
 							"aria-hidden": "true",
 							className: "h-2.5 w-2.5 rounded-[3px]",
 							style: { backgroundColor: e.color }
 						}),
-						/* @__PURE__ */ m("span", { children: e.name }),
-						/* @__PURE__ */ h("span", {
+						/* @__PURE__ */ l("span", { children: e.name }),
+						/* @__PURE__ */ u("span", {
 							className: "tabular-nums text-text-muted",
 							children: [Math.round(e.value / O * 100), "%"]
 						})
 					]
 				}, e.name))
 			}) : null,
-			/* @__PURE__ */ h("table", {
-				style: p,
+			/* @__PURE__ */ u("table", {
+				style: c,
 				children: [
-					/* @__PURE__ */ m("caption", { children: k }),
-					/* @__PURE__ */ m("thead", { children: /* @__PURE__ */ h("tr", { children: [
-						/* @__PURE__ */ m("th", {
+					/* @__PURE__ */ l("caption", { children: k }),
+					/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", { children: [
+						/* @__PURE__ */ l("th", {
 							scope: "col",
 							children: "Category"
 						}),
-						/* @__PURE__ */ m("th", {
+						/* @__PURE__ */ l("th", {
 							scope: "col",
 							children: "Value"
 						}),
-						/* @__PURE__ */ m("th", {
+						/* @__PURE__ */ l("th", {
 							scope: "col",
 							children: "Share"
 						})
 					] }) }),
-					/* @__PURE__ */ m("tbody", { children: D.map((e) => /* @__PURE__ */ h("tr", { children: [
-						/* @__PURE__ */ m("th", {
+					/* @__PURE__ */ l("tbody", { children: D.map((e) => /* @__PURE__ */ u("tr", { children: [
+						/* @__PURE__ */ l("th", {
 							scope: "row",
 							children: e.name
 						}),
-						/* @__PURE__ */ m("td", { children: x(e.value) }),
-						/* @__PURE__ */ h("td", { children: [Math.round(e.value / O * 100), "%"] })
+						/* @__PURE__ */ l("td", { children: x(e.value) }),
+						/* @__PURE__ */ u("td", { children: [Math.round(e.value / O * 100), "%"] })
 					] }, e.name)) })
 				]
 			})

package/dist/timecampus/components/charts/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","names":[],"sources":["../../../../src/timecampus/components/charts/DonutChart.tsx"],"sourcesContent":["import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"../../utils/helpers\";\nimport {\n  chartTokens,\n  formatNumber,\n  renderValue,\n  seriesColor,\n  usePrefersReducedMotion,\n  type DonutSlice,\n  type ValueFormatter,\n} from \"./chartTheme\";\nimport { ChartEmpty, ChartTooltip, srOnlyStyle } from \"./ChartParts\";\n\nexport interface DonutChartProps {\n  /** Slices `{ name, value, color? }`. */\n  data: DonutSlice[];\n  /** Small caption under the centre value (e.g. \"Total assets\"). */\n  centerLabel?: string;\n  /**\n   * Big centre value. If omitted while `centerLabel` is set, the summed total is\n   * shown. A number is run through `valueFormat`.\n   */\n  centerValue?: string | number;\n  /** Pixel height of the ring. Default 240. */\n  height?: number;\n  /** Ring thickness as a fraction of the radius (0–1). Default 0.42. */\n  thickness?: number;\n  /** Formats slice + centre values. Default grouped integer. */\n  valueFormat?: ValueFormatter;\n  /** Show the legend list under the ring. Default true. */\n  showLegend?: boolean;\n  /** Message shown when there are no slices (or all zero). */\n  emptyLabel?: string;\n  /** Accessible name. */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * DonutChart — a category/status mix as a ring with a center total. Slices take\n * the categorical ramp in fixed order, identity is carried by an always-present\n * legend (never colour alone), and hover reveals a token-styled tooltip.\n * Renders an empty state — never a fake ring — when there is nothing to show.\n */\nexport function DonutChart({\n  data,\n  centerLabel,\n  centerValue,\n  height = 240,\n  thickness = 0.42,\n  valueFormat = formatNumber,\n  showLegend = true,\n  emptyLabel,\n  ariaLabel,\n  className,\n}: DonutChartProps) {\n  const reducedMotion = usePrefersReducedMotion();\n\n  const slices = data\n    .filter(\n      (slice) =>\n        typeof slice.value === \"number\" &&\n        Number.isFinite(slice.value) &&\n        slice.value > 0,\n    )\n    .map((slice, index) => ({\n      ...slice,\n      color: slice.color ?? seriesColor(index),\n    }));\n\n  const total = slices.reduce((sum, slice) => sum + slice.value, 0);\n\n  if (slices.length === 0 || total <= 0) {\n    return (\n      <ChartEmpty height={height} label={emptyLabel} className={className} />\n    );\n  }\n\n  const label =\n    ariaLabel ??\n    `${centerLabel ?? \"Distribution\"}: ${slices.map((s) => s.name).join(\", \")}`;\n  const outerPct = 82;\n  const innerPct = Math.max(0, Math.round(outerPct * (1 - thickness)));\n  const showCenter = centerLabel !== undefined || centerValue !== undefined;\n  const resolvedCenter =\n    centerValue !== undefined\n      ? renderValue(centerValue, valueFormat)\n      : valueFormat(total);\n\n  return (\n    <figure role=\"img\" aria-label={label} className={cn(\"w-full\", className)}>\n      <div className=\"relative mx-auto\" style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <PieChart>\n            <Tooltip\n              cursor={false}\n              content={<ChartTooltip valueFormat={valueFormat} hideLabel />}\n            />\n            <Pie\n              data={slices}\n              dataKey=\"value\"\n              nameKey=\"name\"\n              cx=\"50%\"\n              cy=\"50%\"\n              innerRadius={`${innerPct}%`}\n              outerRadius={`${outerPct}%`}\n              paddingAngle={1.5}\n              stroke={chartTokens.surface}\n              strokeWidth={2}\n              isAnimationActive={!reducedMotion}\n            >\n              {slices.map((slice) => (\n                <Cell key={slice.name} fill={slice.color} />\n              ))}\n            </Pie>\n          </PieChart>\n        </ResponsiveContainer>\n\n        {showCenter ? (\n          <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n            <span className=\"text-2xl font-bold text-text-primary\">\n              {resolvedCenter}\n            </span>\n            {centerLabel ? (\n              <span className=\"mt-0.5 max-w-[70%] text-xs text-text-secondary\">\n                {centerLabel}\n              </span>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n\n      {showLegend ? (\n        <ul className=\"mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5\">\n          {slices.map((slice) => (\n            <li\n              key={slice.name}\n              className=\"flex items-center gap-1.5 text-xs text-text-secondary\"\n            >\n              <span\n                aria-hidden=\"true\"\n                className=\"h-2.5 w-2.5 rounded-[3px]\"\n                style={{ backgroundColor: slice.color }}\n              />\n              <span>{slice.name}</span>\n              <span className=\"tabular-nums text-text-muted\">\n                {Math.round((slice.value / total) * 100)}%\n              </span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n\n      <table style={srOnlyStyle}>\n        <caption>{label}</caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">Category</th>\n            <th scope=\"col\">Value</th>\n            <th scope=\"col\">Share</th>\n          </tr>\n        </thead>\n        <tbody>\n          {slices.map((slice) => (\n            <tr key={slice.name}>\n              <th scope=\"row\">{slice.name}</th>\n              <td>{valueFormat(slice.value)}</td>\n              <td>{Math.round((slice.value / total) * 100)}%</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </figure>\n  );\n}\n"],"mappings":";;;;;;;;;;AA4CA,SAAgB,EAAW,EACzB,SACA,gBACA,gBACA,YAAS,KACT,eAAY,KACZ,iBAAc,GACd,gBAAa,IACb,eACA,cACA,gBACkB;CAClB,IAAM,IAAgB,GAAyB,EAEzC,IAAS,EACZ,QACE,MACC,OAAO,EAAM,SAAU,YACvB,OAAO,SAAS,EAAM,MAAM,IAC5B,EAAM,QAAQ,EACjB,CACA,KAAK,GAAO,OAAW;EACtB,GAAG;EACH,OAAO,EAAM,SAAS,EAAY,EAAM;EACzC,EAAE,EAEC,IAAQ,EAAO,QAAQ,GAAK,MAAU,IAAM,EAAM,OAAO,EAAE;AAEjE,KAAI,EAAO,WAAW,KAAK,KAAS,EAClC,QACE,kBAAC,GAAD;EAAoB;EAAQ,OAAO;EAAuB;EAAa,CAAA;CAI3E,IAAM,IACJ,KACA,GAAG,KAAe,eAAe,IAAI,EAAO,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,IAErE,IAAW,KAAK,IAAI,GAAG,KAAK,MAAM,MAAY,IAAI,GAAW,CAAC,EAC9D,IAAa,MAAgB,KAAA,KAAa,MAAgB,KAAA,GAC1D,IACJ,MAAgB,KAAA,IAEZ,EAAY,EAAM,GADlB,EAAY,GAAa,EAAY;AAG3C,QACE,kBAAC,UAAD;EAAQ,MAAK;EAAM,cAAY;EAAO,WAAW,EAAG,UAAU,EAAU;YAAxE;GACE,kBAAC,OAAD;IAAK,WAAU;IAAmB,OAAO,EAAE,WAAQ;cAAnD,CACE,kBAAC,GAAD;KAAqB,OAAM;KAAO,QAAO;eACvC,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MACE,QAAQ;MACR,SAAS,kBAAC,GAAD;OAA2B;OAAa,WAAA;OAAY,CAAA;MAC7D,CAAA,EACF,kBAAC,GAAD;MACE,MAAM;MACN,SAAQ;MACR,SAAQ;MACR,IAAG;MACH,IAAG;MACH,aAAa,GAAG,EAAS;MACzB,aAAa;MACb,cAAc;MACd,QAAQ,EAAY;MACpB,aAAa;MACb,mBAAmB,CAAC;gBAEnB,EAAO,KAAK,MACX,kBAAC,GAAD,EAAuB,MAAM,EAAM,OAAS,EAAjC,EAAM,KAA2B,CAC5C;MACE,CAAA,CACG,EAAA,CAAA;KACS,CAAA,EAErB,IACC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBACb;MACI,CAAA,EACN,IACC,kBAAC,QAAD;MAAM,WAAU;gBACb;MACI,CAAA,GACL,KACA;SACJ,KACA;;GAEL,IACC,kBAAC,MAAD;IAAI,WAAU;cACX,EAAO,KAAK,MACX,kBAAC,MAAD;KAEE,WAAU;eAFZ;MAIE,kBAAC,QAAD;OACE,eAAY;OACZ,WAAU;OACV,OAAO,EAAE,iBAAiB,EAAM,OAAO;OACvC,CAAA;MACF,kBAAC,QAAD,EAAA,UAAO,EAAM,MAAY,CAAA;MACzB,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACG,KAAK,MAAO,EAAM,QAAQ,IAAS,IAAI,EAAC,IACpC;;MACJ;OAZE,EAAM,KAYR,CACL;IACC,CAAA,GACH;GAEJ,kBAAC,SAAD;IAAO,OAAO;cAAd;KACE,kBAAC,WAAD,EAAA,UAAU,GAAgB,CAAA;KAC1B,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD,EAAA,UAAA;MACE,kBAAC,MAAD;OAAI,OAAM;iBAAM;OAAa,CAAA;MAC7B,kBAAC,MAAD;OAAI,OAAM;iBAAM;OAAU,CAAA;MAC1B,kBAAC,MAAD;OAAI,OAAM;iBAAM;OAAU,CAAA;MACvB,EAAA,CAAA,EACC,CAAA;KACR,kBAAC,SAAD,EAAA,UACG,EAAO,KAAK,MACX,kBAAC,MAAD,EAAA,UAAA;MACE,kBAAC,MAAD;OAAI,OAAM;iBAAO,EAAM;OAAU,CAAA;MACjC,kBAAC,MAAD,EAAA,UAAK,EAAY,EAAM,MAAM,EAAM,CAAA;MACnC,kBAAC,MAAD,EAAA,UAAA,CAAK,KAAK,MAAO,EAAM,QAAQ,IAAS,IAAI,EAAC,IAAM,EAAA,CAAA;MAChD,EAAA,EAJI,EAAM,KAIV,CACL,EACI,CAAA;KACF;;GACD"}
+{"version":3,"file":"DonutChart.js","names":[],"sources":["../../../../src/timecampus/components/charts/DonutChart.tsx"],"sourcesContent":["import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"../../utils/helpers\";\nimport {\n  chartTokens,\n  formatNumber,\n  renderValue,\n  seriesColor,\n  usePrefersReducedMotion,\n  type DonutSlice,\n  type ValueFormatter,\n} from \"./chartTheme\";\nimport { ChartEmpty, ChartTooltip, srOnlyStyle } from \"./ChartParts\";\n\nexport interface DonutChartProps {\n  /** Slices `{ name, value, color? }`. */\n  data: DonutSlice[];\n  /** Small caption under the centre value (e.g. \"Total assets\"). */\n  centerLabel?: string;\n  /**\n   * Big centre value. If omitted while `centerLabel` is set, the summed total is\n   * shown. A number is run through `valueFormat`.\n   */\n  centerValue?: string | number;\n  /** Pixel height of the ring. Default 240. */\n  height?: number;\n  /** Ring thickness as a fraction of the radius (0–1). Default 0.42. */\n  thickness?: number;\n  /** Formats slice + centre values. Default grouped integer. */\n  valueFormat?: ValueFormatter;\n  /** Show the legend list under the ring. Default true. */\n  showLegend?: boolean;\n  /** Message shown when there are no slices (or all zero). */\n  emptyLabel?: string;\n  /** Accessible name. */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * DonutChart — a category/status mix as a ring with a center total. Slices take\n * the categorical ramp in fixed order, identity is carried by an always-present\n * legend (never colour alone), and hover reveals a token-styled tooltip.\n * Renders an empty state — never a fake ring — when there is nothing to show.\n */\nexport function DonutChart({\n  data,\n  centerLabel,\n  centerValue,\n  height = 240,\n  thickness = 0.42,\n  valueFormat = formatNumber,\n  showLegend = true,\n  emptyLabel,\n  ariaLabel,\n  className,\n}: DonutChartProps) {\n  const reducedMotion = usePrefersReducedMotion();\n\n  const slices = data\n    .filter(\n      (slice) =>\n        typeof slice.value === \"number\" &&\n        Number.isFinite(slice.value) &&\n        slice.value > 0,\n    )\n    .map((slice, index) => ({\n      ...slice,\n      color: slice.color ?? seriesColor(index),\n    }));\n\n  const total = slices.reduce((sum, slice) => sum + slice.value, 0);\n\n  if (slices.length === 0 || total <= 0) {\n    return (\n      <ChartEmpty height={height} label={emptyLabel} className={className} />\n    );\n  }\n\n  const label =\n    ariaLabel ??\n    `${centerLabel ?? \"Distribution\"}: ${slices.map((s) => s.name).join(\", \")}`;\n  const outerPct = 82;\n  const innerPct = Math.max(0, Math.round(outerPct * (1 - thickness)));\n  const showCenter = centerLabel !== undefined || centerValue !== undefined;\n  const resolvedCenter =\n    centerValue !== undefined\n      ? renderValue(centerValue, valueFormat)\n      : valueFormat(total);\n\n  return (\n    <figure role=\"img\" aria-label={label} className={cn(\"w-full\", className)}>\n      <div className=\"relative mx-auto\" style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <PieChart>\n            <Tooltip\n              cursor={false}\n              content={<ChartTooltip valueFormat={valueFormat} hideLabel />}\n            />\n            <Pie\n              data={slices}\n              dataKey=\"value\"\n              nameKey=\"name\"\n              cx=\"50%\"\n              cy=\"50%\"\n              innerRadius={`${innerPct}%`}\n              outerRadius={`${outerPct}%`}\n              paddingAngle={1.5}\n              stroke={chartTokens.surface}\n              strokeWidth={2}\n              isAnimationActive={!reducedMotion}\n            >\n              {slices.map((slice) => (\n                <Cell key={slice.name} fill={slice.color} />\n              ))}\n            </Pie>\n          </PieChart>\n        </ResponsiveContainer>\n\n        {showCenter ? (\n          <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n            <span className=\"text-2xl font-bold text-text-primary\">\n              {resolvedCenter}\n            </span>\n            {centerLabel ? (\n              <span className=\"mt-0.5 max-w-[70%] text-xs text-text-secondary\">\n                {centerLabel}\n              </span>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n\n      {showLegend ? (\n        <ul className=\"mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5\">\n          {slices.map((slice) => (\n            <li\n              key={slice.name}\n              className=\"flex items-center gap-1.5 text-xs text-text-secondary\"\n            >\n              <span\n                aria-hidden=\"true\"\n                className=\"h-2.5 w-2.5 rounded-[3px]\"\n                style={{ backgroundColor: slice.color }}\n              />\n              <span>{slice.name}</span>\n              <span className=\"tabular-nums text-text-muted\">\n                {Math.round((slice.value / total) * 100)}%\n              </span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n\n      <table style={srOnlyStyle}>\n        <caption>{label}</caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">Category</th>\n            <th scope=\"col\">Value</th>\n            <th scope=\"col\">Share</th>\n          </tr>\n        </thead>\n        <tbody>\n          {slices.map((slice) => (\n            <tr key={slice.name}>\n              <th scope=\"row\">{slice.name}</th>\n              <td>{valueFormat(slice.value)}</td>\n              <td>{Math.round((slice.value / total) * 100)}%</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </figure>\n  );\n}\n"],"mappings":"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"}

package/dist/timecampus/components/charts/Heatmap.d.ts

@@ -0,0 +1,47 @@
+import { ValueFormatter } from './chartTheme';
+
+/** A single heatmap value: a number, or `null`/`undefined` for a no-data cell. */
+export type HeatmapValue = number | null | undefined;
+export interface HeatmapProps {
+    /**
+     * Row-major matrix of values — one inner array per row (e.g. day), each entry
+     * a column (e.g. hour or bucket). Ragged rows are tolerated: missing entries
+     * read as no-data cells. `null`/`undefined` render as an empty track cell.
+     */
+    data: HeatmapValue[][];
+    /** Row labels, top → bottom (e.g. `['Mon', … 'Sun']`). Drives the row count. */
+    rowLabels: string[];
+    /** Column labels, left → right (e.g. hours or buckets). Drives the column count. */
+    columnLabels: string[];
+    /**
+     * Value mapped to full intensity. Defaults to the largest finite value in
+     * `data`. Cells scale linearly from the track (0) to the brand token (`max`).
+     */
+    max?: number;
+    /** Header for the row axis — used in the sr-only table's corner cell. Default `Row`. */
+    rowsLabel?: string;
+    /** Formats a cell value in the native tooltip + sr-only table. Default grouped integer. */
+    valueFormat?: ValueFormatter;
+    /** Low → high captions bracketing the intensity legend. Default `['Less', 'More']`. */
+    legendLabels?: [string, string];
+    /** Show the intensity legend under the grid. Default true. */
+    showLegend?: boolean;
+    /** Pixel height of the grid area. Cells size to the grid — never fixed px. Default 260. */
+    height?: number;
+    /** Message shown when there is nothing to plot. */
+    emptyLabel?: string;
+    /** Accessible name for the figure. Default derived from the axis labels. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Heatmap — a token-only matrix of intensity cells (e.g. activity by day × hour
+ * for the Work Patterns page). Cell colour blends the brand token into the
+ * sunken track by value, so it recolours with the theme and never carries a raw
+ * colour. Cells are sized entirely by CSS grid (no fixed px) and the grid scrolls
+ * horizontally when there are many columns. Ships a legend, a native per-cell
+ * tooltip, an empty state and a screen-reader data table, wrapped in a
+ * `ChartFigure` for a single accessible name — matching the other primitives.
+ */
+export declare function Heatmap({ data, rowLabels, columnLabels, max, rowsLabel, valueFormat, legendLabels, showLegend, height, emptyLabel, ariaLabel, className, }: HeatmapProps): import("react").JSX.Element;
+//# sourceMappingURL=Heatmap.d.ts.map

package/dist/timecampus/components/charts/Heatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../../../../src/timecampus/components/charts/Heatmap.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAGtB,kFAAkF;AAClF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,IAAI,EAAE,YAAY,EAAE,EAAE,CAAC;IACvB,gFAAgF;IAChF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,oFAAoF;IACpF,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,GAAG,EACH,SAAiB,EACjB,WAA0B,EAC1B,YAA+B,EAC/B,UAAiB,EACjB,MAAY,EACZ,UAAU,EACV,SAAS,EACT,SAAS,GACV,EAAE,YAAY,+BA2Hd"}

package/dist/timecampus/components/charts/ProgressMeter.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { MeterTone, ValueFormatter } from './chartTheme';
+
+export interface ProgressMeterProps {
+    /** Current value. */
+    value: number;
+    /** Full-scale value. Default 100. */
+    max?: number;
+    /** Leading caption (e.g. "Seats used", "Budget spent"). */
+    label?: ReactNode;
+    /**
+     * Severity thresholds as fractions of `max` (0–1). With the default
+     * `higherIsWorse` a fraction ≥ `danger` turns the fill red, ≥ `warning` amber.
+     * Default `{ warning: 0.75, danger: 0.9 }`.
+     */
+    thresholds?: {
+        warning: number;
+        danger: number;
+    };
+    /** Whether a fuller meter is worse (usage/budget, default) or better (progress). */
+    higherIsWorse?: boolean;
+    /** Force a tone, bypassing thresholds. */
+    tone?: MeterTone;
+    /** Show the `value / max` readout on the right of the label row. Default true. */
+    showValue?: boolean;
+    /** Formats the value + max readout. Default grouped integer. */
+    format?: ValueFormatter;
+    /** Bar thickness. Default `md`. */
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+/**
+ * ProgressMeter — a linear meter for a single ratio (seat usage, budget spent,
+ * progress to target). The fill carries severity (good → warning → danger) via
+ * reserved status tokens over a muted track; the width transition is gated
+ * behind `motion-safe` so reduced-motion users get an instant fill. Token-only,
+ * no raw colour.
+ */
+export declare function ProgressMeter({ value, max, label, thresholds, higherIsWorse, tone, showValue, format, size, className, }: ProgressMeterProps): import("react").JSX.Element;
+//# sourceMappingURL=ProgressMeter.d.ts.map

package/dist/timecampus/components/charts/ProgressMeter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressMeter.d.ts","sourceRoot":"","sources":["../../../../src/timecampus/components/charts/ProgressMeter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9E,MAAM,WAAW,kBAAkB;IACjC,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,oFAAoF;IACpF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,mCAAmC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,GAAS,EACT,KAAK,EACL,UAA2C,EAC3C,aAAoB,EACpB,IAAI,EACJ,SAAgB,EAChB,MAAsB,EACtB,IAAW,EACX,SAAS,GACV,EAAE,kBAAkB,+BA2DpB"}

package/dist/timecampus/components/charts/RadialGauge.d.ts

@@ -0,0 +1,44 @@
+import { MeterTone, ValueFormatter } from './chartTheme';
+
+export interface RadialGaugeProps {
+    /** The measured value. */
+    value: number;
+    /** Scale minimum. Default 0. */
+    min?: number;
+    /** Scale maximum. Default 100. */
+    max?: number;
+    /** Big centre caption (e.g. "Compliance"). */
+    label?: string;
+    /** Small caption under the value. */
+    sublabel?: string;
+    /**
+     * Severity thresholds in value units. With `higherIsBetter` (default) pass
+     * `warning > danger` (e.g. `{ warning: 80, danger: 50 }` → ≥80 good, 50–79
+     * warning, <50 danger). Defaults derive from the range.
+     */
+    thresholds?: {
+        warning: number;
+        danger: number;
+    };
+    /** Whether a higher value is better (compliance/health) or worse (risk). Default true. */
+    higherIsBetter?: boolean;
+    /** Force a tone, bypassing threshold logic. */
+    tone?: MeterTone;
+    /** Force an explicit colour, bypassing tone + thresholds. */
+    color?: string;
+    /** Pixel height. Default 200. */
+    height?: number;
+    /** Formats the centre value. Default rounds to an integer. */
+    format?: ValueFormatter;
+    /** Accessible name. Default derived from label + value. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * RadialGauge — a single value on a 270° arc (compliance score, asset health,
+ * risk). The arc colour follows severity thresholds (good → warning → danger)
+ * using reserved status tokens, over a muted track. Center shows the value and
+ * label; respects `prefers-reduced-motion`.
+ */
+export declare function RadialGauge({ value, min, max, label, sublabel, thresholds, higherIsBetter, tone, color, height, format, ariaLabel, className, }: RadialGaugeProps): import("react").JSX.Element;
+//# sourceMappingURL=RadialGauge.d.ts.map

package/dist/timecampus/components/charts/RadialGauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGauge.d.ts","sourceRoot":"","sources":["../../../../src/timecampus/components/charts/RadialGauge.tsx"],"names":[],"mappings":"AAOA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,0FAA0F;IAC1F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAO,EACP,GAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAU,EACV,cAAqB,EACrB,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,MAAwC,EACxC,SAAS,EACT,SAAS,GACV,EAAE,gBAAgB,+BA+ElB"}

package/dist/timecampus/components/charts/RadialGauge.js

@@ -1,58 +1,55 @@
 import { cn as e } from "../../utils/helpers.js";
-import { ResponsiveContainer as t } from "../../../node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { PolarAngleAxis as n } from "../../../node_modules/recharts/es6/polar/PolarAngleAxis.js";
-import { RadialBar as r } from "../../../node_modules/recharts/es6/polar/RadialBar.js";
-import { RadialBarChart as i } from "../../../node_modules/recharts/es6/chart/RadialBarChart.js";
-import { chartTokens as a, toneColor as o, usePrefersReducedMotion as s } from "./chartTheme.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { chartTokens as t, toneColor as n, usePrefersReducedMotion as r } from "./chartTheme.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { PolarAngleAxis as o, RadialBar as s, RadialBarChart as c, ResponsiveContainer as l } from "recharts";
 //#region src/timecampus/components/charts/RadialGauge.tsx
 var u = (e, t, n) => Math.min(n, Math.max(t, e));
 function d({ value: d, min: f = 0, max: p = 100, label: m, sublabel: h, thresholds: g, higherIsBetter: _ = !0, tone: v, color: y, height: b = 200, format: x = (e) => Math.round(e).toString(), ariaLabel: S, className: C }) {
-	let w = s(), T = p - f || 1, E = u(d, f, p), D = g?.warning ?? (_ ? f + T * .8 : f + T * .5), O = g?.danger ?? (_ ? f + T * .5 : f + T * .8), k = y ?? o(v ?? (_ ? d >= D ? "success" : d >= O ? "warning" : "danger" : d <= D ? "success" : d <= O ? "warning" : "danger")), A = [{
+	let w = r(), T = p - f || 1, E = u(d, f, p), D = g?.warning ?? (_ ? f + T * .8 : f + T * .5), O = g?.danger ?? (_ ? f + T * .5 : f + T * .8), k = y ?? n(v ?? (_ ? d >= D ? "success" : d >= O ? "warning" : "danger" : d <= D ? "success" : d <= O ? "warning" : "danger")), A = [{
 		name: m ?? "value",
 		value: E
 	}];
-	return /* @__PURE__ */ l("figure", {
+	return /* @__PURE__ */ a("figure", {
 		role: "img",
 		"aria-label": S ?? `${m ? `${m}: ` : ""}${x(d)}`,
 		className: e("relative w-full", C),
 		style: { height: b },
-		children: [/* @__PURE__ */ c(t, {
+		children: [/* @__PURE__ */ i(l, {
 			width: "100%",
 			height: "100%",
-			children: /* @__PURE__ */ l(i, {
+			children: /* @__PURE__ */ a(c, {
 				data: A,
 				innerRadius: "72%",
 				outerRadius: "100%",
 				barSize: 14,
 				startAngle: 225,
 				endAngle: -45,
-				children: [/* @__PURE__ */ c(n, {
+				children: [/* @__PURE__ */ i(o, {
 					type: "number",
 					domain: [f, p],
 					angleAxisId: 0,
 					tick: !1
-				}), /* @__PURE__ */ c(r, {
+				}), /* @__PURE__ */ i(s, {
 					dataKey: "value",
 					angleAxisId: 0,
-					background: { fill: a.track },
+					background: { fill: t.track },
 					cornerRadius: 999,
 					fill: k,
 					isAnimationActive: !w
 				})]
 			})
-		}), /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ a("div", {
 			className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
 			children: [
-				/* @__PURE__ */ c("span", {
+				/* @__PURE__ */ i("span", {
 					className: "text-3xl font-bold leading-none text-text-primary",
 					children: x(d)
 				}),
-				m ? /* @__PURE__ */ c("span", {
+				m ? /* @__PURE__ */ i("span", {
 					className: "mt-1 text-sm font-medium text-text-secondary",
 					children: m
 				}) : null,
-				h ? /* @__PURE__ */ c("span", {
+				h ? /* @__PURE__ */ i("span", {
 					className: "text-xs text-text-muted",
 					children: h
 				}) : null

package/dist/timecampus/components/charts/RadialGauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialGauge.js","names":[],"sources":["../../../../src/timecampus/components/charts/RadialGauge.tsx"],"sourcesContent":["import {\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  ResponsiveContainer,\n} from \"recharts\";\nimport { cn } from \"../../utils/helpers\";\nimport {\n  chartTokens,\n  toneColor,\n  usePrefersReducedMotion,\n  type MeterTone,\n  type ValueFormatter,\n} from \"./chartTheme\";\n\nexport interface RadialGaugeProps {\n  /** The measured value. */\n  value: number;\n  /** Scale minimum. Default 0. */\n  min?: number;\n  /** Scale maximum. Default 100. */\n  max?: number;\n  /** Big centre caption (e.g. \"Compliance\"). */\n  label?: string;\n  /** Small caption under the value. */\n  sublabel?: string;\n  /**\n   * Severity thresholds in value units. With `higherIsBetter` (default) pass\n   * `warning > danger` (e.g. `{ warning: 80, danger: 50 }` → ≥80 good, 50–79\n   * warning, <50 danger). Defaults derive from the range.\n   */\n  thresholds?: { warning: number; danger: number };\n  /** Whether a higher value is better (compliance/health) or worse (risk). Default true. */\n  higherIsBetter?: boolean;\n  /** Force a tone, bypassing threshold logic. */\n  tone?: MeterTone;\n  /** Force an explicit colour, bypassing tone + thresholds. */\n  color?: string;\n  /** Pixel height. Default 200. */\n  height?: number;\n  /** Formats the centre value. Default rounds to an integer. */\n  format?: ValueFormatter;\n  /** Accessible name. Default derived from label + value. */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp = (value: number, min: number, max: number): number =>\n  Math.min(max, Math.max(min, value));\n\n/**\n * RadialGauge — a single value on a 270° arc (compliance score, asset health,\n * risk). The arc colour follows severity thresholds (good → warning → danger)\n * using reserved status tokens, over a muted track. Center shows the value and\n * label; respects `prefers-reduced-motion`.\n */\nexport function RadialGauge({\n  value,\n  min = 0,\n  max = 100,\n  label,\n  sublabel,\n  thresholds,\n  higherIsBetter = true,\n  tone,\n  color,\n  height = 200,\n  format = (v) => Math.round(v).toString(),\n  ariaLabel,\n  className,\n}: RadialGaugeProps) {\n  const reducedMotion = usePrefersReducedMotion();\n  const range = max - min || 1;\n  const clamped = clamp(value, min, max);\n\n  const warning =\n    thresholds?.warning ??\n    (higherIsBetter ? min + range * 0.8 : min + range * 0.5);\n  const danger =\n    thresholds?.danger ??\n    (higherIsBetter ? min + range * 0.5 : min + range * 0.8);\n\n  const resolvedTone: MeterTone =\n    tone ??\n    (higherIsBetter\n      ? value >= warning\n        ? \"success\"\n        : value >= danger\n          ? \"warning\"\n          : \"danger\"\n      : value <= warning\n        ? \"success\"\n        : value <= danger\n          ? \"warning\"\n          : \"danger\");\n\n  const arcColor = color ?? toneColor(resolvedTone);\n  const data = [{ name: label ?? \"value\", value: clamped }];\n  const accessibleName =\n    ariaLabel ?? `${label ? `${label}: ` : \"\"}${format(value)}`;\n\n  return (\n    <figure\n      role=\"img\"\n      aria-label={accessibleName}\n      className={cn(\"relative w-full\", className)}\n      style={{ height }}\n    >\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RadialBarChart\n          data={data}\n          innerRadius=\"72%\"\n          outerRadius=\"100%\"\n          barSize={14}\n          startAngle={225}\n          endAngle={-45}\n        >\n          <PolarAngleAxis\n            type=\"number\"\n            domain={[min, max]}\n            angleAxisId={0}\n            tick={false}\n          />\n          <RadialBar\n            dataKey=\"value\"\n            angleAxisId={0}\n            background={{ fill: chartTokens.track }}\n            cornerRadius={999}\n            fill={arcColor}\n            isAnimationActive={!reducedMotion}\n          />\n        </RadialBarChart>\n      </ResponsiveContainer>\n\n      <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n        <span className=\"text-3xl font-bold leading-none text-text-primary\">\n          {format(value)}\n        </span>\n        {label ? (\n          <span className=\"mt-1 text-sm font-medium text-text-secondary\">\n            {label}\n          </span>\n        ) : null}\n        {sublabel ? (\n          <span className=\"text-xs text-text-muted\">{sublabel}</span>\n        ) : null}\n      </div>\n    </figure>\n  );\n}\n"],"mappings":";;;;;;;;AA+CA,IAAM,KAAS,GAAe,GAAa,MACzC,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC;AAQrC,SAAgB,EAAY,EAC1B,UACA,SAAM,GACN,SAAM,KACN,UACA,aACA,eACA,oBAAiB,IACjB,SACA,UACA,YAAS,KACT,aAAU,MAAM,KAAK,MAAM,EAAE,CAAC,UAAU,EACxC,cACA,gBACmB;CACnB,IAAM,IAAgB,GAAyB,EACzC,IAAQ,IAAM,KAAO,GACrB,IAAU,EAAM,GAAO,GAAK,EAAI,EAEhC,IACJ,GAAY,YACX,IAAiB,IAAM,IAAQ,KAAM,IAAM,IAAQ,KAChD,IACJ,GAAY,WACX,IAAiB,IAAM,IAAQ,KAAM,IAAM,IAAQ,KAgBhD,IAAW,KAAS,EAbxB,MACC,IACG,KAAS,IACP,YACA,KAAS,IACP,YACA,WACJ,KAAS,IACP,YACA,KAAS,IACP,YACA,UAEuC,EAC3C,IAAO,CAAC;EAAE,MAAM,KAAS;EAAS,OAAO;EAAS,CAAC;AAIzD,QACE,kBAAC,UAAD;EACE,MAAK;EACL,cALF,KAAa,GAAG,IAAQ,GAAG,EAAM,MAAM,KAAK,EAAO,EAAM;EAMvD,WAAW,EAAG,mBAAmB,EAAU;EAC3C,OAAO,EAAE,WAAQ;YAJnB,CAME,kBAAC,GAAD;GAAqB,OAAM;GAAO,QAAO;aACvC,kBAAC,GAAD;IACQ;IACN,aAAY;IACZ,aAAY;IACZ,SAAS;IACT,YAAY;IACZ,UAAU;cANZ,CAQE,kBAAC,GAAD;KACE,MAAK;KACL,QAAQ,CAAC,GAAK,EAAI;KAClB,aAAa;KACb,MAAM;KACN,CAAA,EACF,kBAAC,GAAD;KACE,SAAQ;KACR,aAAa;KACb,YAAY,EAAE,MAAM,EAAY,OAAO;KACvC,cAAc;KACd,MAAM;KACN,mBAAmB,CAAC;KACpB,CAAA,CACa;;GACG,CAAA,EAEtB,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAO,EAAM;KACT,CAAA;IACN,IACC,kBAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA,GACL;IACH,IACC,kBAAC,QAAD;KAAM,WAAU;eAA2B;KAAgB,CAAA,GACzD;IACA;KACC"}
+{"version":3,"file":"RadialGauge.js","names":[],"sources":["../../../../src/timecampus/components/charts/RadialGauge.tsx"],"sourcesContent":["import {\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  ResponsiveContainer,\n} from \"recharts\";\nimport { cn } from \"../../utils/helpers\";\nimport {\n  chartTokens,\n  toneColor,\n  usePrefersReducedMotion,\n  type MeterTone,\n  type ValueFormatter,\n} from \"./chartTheme\";\n\nexport interface RadialGaugeProps {\n  /** The measured value. */\n  value: number;\n  /** Scale minimum. Default 0. */\n  min?: number;\n  /** Scale maximum. Default 100. */\n  max?: number;\n  /** Big centre caption (e.g. \"Compliance\"). */\n  label?: string;\n  /** Small caption under the value. */\n  sublabel?: string;\n  /**\n   * Severity thresholds in value units. With `higherIsBetter` (default) pass\n   * `warning > danger` (e.g. `{ warning: 80, danger: 50 }` → ≥80 good, 50–79\n   * warning, <50 danger). Defaults derive from the range.\n   */\n  thresholds?: { warning: number; danger: number };\n  /** Whether a higher value is better (compliance/health) or worse (risk). Default true. */\n  higherIsBetter?: boolean;\n  /** Force a tone, bypassing threshold logic. */\n  tone?: MeterTone;\n  /** Force an explicit colour, bypassing tone + thresholds. */\n  color?: string;\n  /** Pixel height. Default 200. */\n  height?: number;\n  /** Formats the centre value. Default rounds to an integer. */\n  format?: ValueFormatter;\n  /** Accessible name. Default derived from label + value. */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp = (value: number, min: number, max: number): number =>\n  Math.min(max, Math.max(min, value));\n\n/**\n * RadialGauge — a single value on a 270° arc (compliance score, asset health,\n * risk). The arc colour follows severity thresholds (good → warning → danger)\n * using reserved status tokens, over a muted track. Center shows the value and\n * label; respects `prefers-reduced-motion`.\n */\nexport function RadialGauge({\n  value,\n  min = 0,\n  max = 100,\n  label,\n  sublabel,\n  thresholds,\n  higherIsBetter = true,\n  tone,\n  color,\n  height = 200,\n  format = (v) => Math.round(v).toString(),\n  ariaLabel,\n  className,\n}: RadialGaugeProps) {\n  const reducedMotion = usePrefersReducedMotion();\n  const range = max - min || 1;\n  const clamped = clamp(value, min, max);\n\n  const warning =\n    thresholds?.warning ??\n    (higherIsBetter ? min + range * 0.8 : min + range * 0.5);\n  const danger =\n    thresholds?.danger ??\n    (higherIsBetter ? min + range * 0.5 : min + range * 0.8);\n\n  const resolvedTone: MeterTone =\n    tone ??\n    (higherIsBetter\n      ? value >= warning\n        ? \"success\"\n        : value >= danger\n          ? \"warning\"\n          : \"danger\"\n      : value <= warning\n        ? \"success\"\n        : value <= danger\n          ? \"warning\"\n          : \"danger\");\n\n  const arcColor = color ?? toneColor(resolvedTone);\n  const data = [{ name: label ?? \"value\", value: clamped }];\n  const accessibleName =\n    ariaLabel ?? `${label ? `${label}: ` : \"\"}${format(value)}`;\n\n  return (\n    <figure\n      role=\"img\"\n      aria-label={accessibleName}\n      className={cn(\"relative w-full\", className)}\n      style={{ height }}\n    >\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <RadialBarChart\n          data={data}\n          innerRadius=\"72%\"\n          outerRadius=\"100%\"\n          barSize={14}\n          startAngle={225}\n          endAngle={-45}\n        >\n          <PolarAngleAxis\n            type=\"number\"\n            domain={[min, max]}\n            angleAxisId={0}\n            tick={false}\n          />\n          <RadialBar\n            dataKey=\"value\"\n            angleAxisId={0}\n            background={{ fill: chartTokens.track }}\n            cornerRadius={999}\n            fill={arcColor}\n            isAnimationActive={!reducedMotion}\n          />\n        </RadialBarChart>\n      </ResponsiveContainer>\n\n      <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center\">\n        <span className=\"text-3xl font-bold leading-none text-text-primary\">\n          {format(value)}\n        </span>\n        {label ? (\n          <span className=\"mt-1 text-sm font-medium text-text-secondary\">\n            {label}\n          </span>\n        ) : null}\n        {sublabel ? (\n          <span className=\"text-xs text-text-muted\">{sublabel}</span>\n        ) : null}\n      </div>\n    </figure>\n  );\n}\n"],"mappings":";;;;;AA+CA,IAAM,KAAS,GAAe,GAAa,MACzC,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC;AAQrC,SAAgB,EAAY,EAC1B,UACA,SAAM,GACN,SAAM,KACN,UACA,aACA,eACA,oBAAiB,IACjB,SACA,UACA,YAAS,KACT,aAAU,MAAM,KAAK,MAAM,EAAE,CAAC,UAAU,EACxC,cACA,gBACmB;CACnB,IAAM,IAAgB,GAAyB,EACzC,IAAQ,IAAM,KAAO,GACrB,IAAU,EAAM,GAAO,GAAK,EAAI,EAEhC,IACJ,GAAY,YACX,IAAiB,IAAM,IAAQ,KAAM,IAAM,IAAQ,KAChD,IACJ,GAAY,WACX,IAAiB,IAAM,IAAQ,KAAM,IAAM,IAAQ,KAgBhD,IAAW,KAAS,EAbxB,MACC,IACG,KAAS,IACP,YACA,KAAS,IACP,YACA,WACJ,KAAS,IACP,YACA,KAAS,IACP,YACA,UAEuC,EAC3C,IAAO,CAAC;EAAE,MAAM,KAAS;EAAS,OAAO;EAAS,CAAC;AAIzD,QACE,kBAAC,UAAD;EACE,MAAK;EACL,cALF,KAAa,GAAG,IAAQ,GAAG,EAAM,MAAM,KAAK,EAAO,EAAM;EAMvD,WAAW,EAAG,mBAAmB,EAAU;EAC3C,OAAO,EAAE,WAAQ;YAJnB,CAME,kBAAC,GAAD;GAAqB,OAAM;GAAO,QAAO;aACvC,kBAAC,GAAD;IACQ;IACN,aAAY;IACZ,aAAY;IACZ,SAAS;IACT,YAAY;IACZ,UAAU;cANZ,CAQE,kBAAC,GAAD;KACE,MAAK;KACL,QAAQ,CAAC,GAAK,EAAI;KAClB,aAAa;KACb,MAAM;KACN,CAAA,EACF,kBAAC,GAAD;KACE,SAAQ;KACR,aAAa;KACb,YAAY,EAAE,MAAM,EAAY,OAAO;KACvC,cAAc;KACd,MAAM;KACN,mBAAmB,CAAC;KACpB,CAAA,CACa;;GACG,CAAA,EAEtB,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,QAAD;KAAM,WAAU;eACb,EAAO,EAAM;KACT,CAAA;IACN,IACC,kBAAC,QAAD;KAAM,WAAU;eACb;KACI,CAAA,GACL;IACH,IACC,kBAAC,QAAD;KAAM,WAAU;eAA2B;KAAgB,CAAA,GACzD;IACA;KACC"}

package/dist/timecampus/components/charts/Sparkline.d.ts

@@ -0,0 +1,25 @@
+export interface SparklineProps {
+    /** The series, oldest → newest. */
+    data: number[];
+    /** Line or gradient-filled area. Default `area`. */
+    type?: "line" | "area";
+    /** Mark colour (a CSS colour, default the brand token). */
+    color?: string;
+    /** Pixel height. Default 40. */
+    height?: number;
+    /** Stroke width. Default 2. */
+    strokeWidth?: number;
+    /** Emphasise the final point with a ringed dot. Default true. */
+    showEndDot?: boolean;
+    className?: string;
+    /** Accessible name; when omitted the sparkline is decorative (`aria-hidden`). */
+    ariaLabel?: string;
+}
+/**
+ * Sparkline — a tiny, axis-less trend line/area for KPI tiles. Reads its colour
+ * from a live token (brand by default) so it recolours with the theme,
+ * respects `prefers-reduced-motion`, and shows a stable muted baseline instead
+ * of fabricating a shape when there is too little data.
+ */
+export declare function Sparkline({ data, type, color, height, strokeWidth, showEndDot, className, ariaLabel, }: SparklineProps): import("react").JSX.Element;
+//# sourceMappingURL=Sparkline.d.ts.map

package/dist/timecampus/components/charts/Sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../../src/timecampus/components/charts/Sparkline.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,cAAc;IAC7B,mCAAmC;IACnC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAa,EACb,KAAyB,EACzB,MAAW,EACX,WAAe,EACf,UAAiB,EACjB,SAAS,EACT,SAAS,GACV,EAAE,cAAc,+BAoHhB"}

package/dist/timecampus/components/charts/Sparkline.js

@@ -1,3 +1,5 @@
+import "../../utils/helpers.js";
 import "./chartTheme.js";
 import "react";
 import "react/jsx-runtime";
+import "recharts";

package/dist/timecampus/components/charts/TrendChart.d.ts

@@ -0,0 +1,37 @@
+import { ChartDatum, ChartSeries, ValueFormatter } from './chartTheme';
+
+export interface TrendChartProps {
+    /** Rows of `{ [xKey]: label, [series.key]: number }`. */
+    data: ChartDatum[];
+    /** Field holding the x-axis category/time value. */
+    xKey: string;
+    /** One or more numeric series. Single series reads on-brand. */
+    series: ChartSeries[];
+    /** Line, or gradient-filled area. Default `area`. */
+    type?: "line" | "area";
+    /** Pixel height of the plot. Default 260. */
+    height?: number;
+    /** Formats y values in the axis and tooltip. Default grouped integer. */
+    valueFormat?: ValueFormatter;
+    /** Formats x tick + tooltip header. */
+    xTickFormat?: (value: string | number) => string;
+    /** Show the horizontal grid. Default true. */
+    showGrid?: boolean;
+    /** Force the legend on/off. Default: on when there are ≥ 2 series. */
+    showLegend?: boolean;
+    /** Emphasise each series' final point with a ringed dot. Default true. */
+    showEndDots?: boolean;
+    /** Message shown when `data` is empty — never fabricate a shape. */
+    emptyLabel?: string;
+    /** Accessible name for the figure. Default derived from the series labels. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * TrendChart — value-over-time as a line or gradient area (asset value,
+ * emissions, depreciation). Theme-aware tokens, a hairline grid, a crosshair
+ * tooltip, emphasised endpoints, a legend for multi-series, an empty state and
+ * a screen-reader data table. Respects `prefers-reduced-motion`.
+ */
+export declare function TrendChart({ data, xKey, series, type, height, valueFormat, xTickFormat, showGrid, showLegend, showEndDots, emptyLabel, ariaLabel, className, }: TrendChartProps): import("react").JSX.Element;
+//# sourceMappingURL=TrendChart.d.ts.map

package/dist/timecampus/components/charts/TrendChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendChart.d.ts","sourceRoot":"","sources":["../../../../src/timecampus/components/charts/TrendChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAKL,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAStB,MAAM,WAAW,eAAe;IAC9B,yDAAyD;IACzD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IACjD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,IAAa,EACb,MAAY,EACZ,WAA0B,EAC1B,WAAW,EACX,QAAe,EACf,UAAU,EACV,WAAkB,EAClB,UAAU,EACV,SAAS,EACT,SAAS,GACV,EAAE,eAAe,+BAwKjB"}