@burdenoff/microfe-timecampus 2026.703.4 → 2026.703.6

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

@@ -0,0 +1,123 @@
+import { Tooltip as e } from "../../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as t } from "../../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { PolarGrid as n } from "../../../node_modules/recharts/es6/polar/PolarGrid.js";
+import { PolarAngleAxis as r } from "../../../node_modules/recharts/es6/polar/PolarAngleAxis.js";
+import { Radar as i } from "../../../node_modules/recharts/es6/polar/Radar.js";
+import { RadarChart as a } from "../../../node_modules/recharts/es6/chart/RadarChart.js";
+import { chartTokens as o, usePrefersReducedMotion as s } from "./chartTheme.js";
+import { ChartEmpty as c, ChartTooltip as l, srOnlyStyle as u } from "./ChartParts.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/timecampus/components/charts/BalanceWheel.tsx
+function p({ data: p, height: m = 320, emptyLabel: h, ariaLabel: g, className: _ }) {
+	let v = s(), y = p.filter((e) => Number.isFinite(e.actualShare) && e.actualShare >= 0), b = y.reduce((e, t) => e + t.actualShare, 0), x = y.some((e) => typeof e.desiredShare == "number" && Number.isFinite(e.desiredShare));
+	if (y.length === 0 || b <= 0) return /* @__PURE__ */ d(c, {
+		height: m,
+		label: h,
+		className: _
+	});
+	let S = y.map((e) => ({
+		label: e.label,
+		Actual: Math.round(e.actualShare * 1e3) / 10,
+		Desired: typeof e.desiredShare == "number" && Number.isFinite(e.desiredShare) ? Math.round(e.desiredShare * 1e3) / 10 : 0
+	})), C = g ?? `Life balance across ${y.map((e) => e.label).join(", ")}`;
+	return /* @__PURE__ */ f("figure", {
+		role: "img",
+		"aria-label": C,
+		className: _,
+		children: [
+			/* @__PURE__ */ d("div", {
+				style: { height: m },
+				children: /* @__PURE__ */ d(t, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ f(a, {
+						data: S,
+						outerRadius: "72%",
+						children: [
+							/* @__PURE__ */ d(n, { stroke: o.grid }),
+							/* @__PURE__ */ d(r, {
+								dataKey: "label",
+								tick: {
+									fill: o.textSecondary,
+									fontSize: 11
+								}
+							}),
+							/* @__PURE__ */ d(e, {
+								cursor: !1,
+								content: /* @__PURE__ */ d(l, { valueFormat: (e) => `${e}%` })
+							}),
+							x && /* @__PURE__ */ d(i, {
+								name: "Desired",
+								dataKey: "Desired",
+								stroke: o.textMuted,
+								strokeDasharray: "4 3",
+								strokeWidth: 1.5,
+								fill: "transparent",
+								isAnimationActive: !v
+							}),
+							/* @__PURE__ */ d(i, {
+								name: "Actual",
+								dataKey: "Actual",
+								stroke: o.brand,
+								strokeWidth: 2,
+								fill: o.brand,
+								fillOpacity: .28,
+								isAnimationActive: !v
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ f("ul", {
+				className: "mt-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 text-xs text-text-secondary",
+				children: [/* @__PURE__ */ f("li", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ d("span", {
+						"aria-hidden": "true",
+						className: "h-2.5 w-2.5 rounded-[3px]",
+						style: { backgroundColor: o.brand }
+					}), "Actual"]
+				}), x && /* @__PURE__ */ f("li", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ d("span", {
+						"aria-hidden": "true",
+						className: "h-0 w-3.5 border-t-2 border-dashed",
+						style: { borderColor: o.textMuted }
+					}), "Desired"]
+				})]
+			}),
+			/* @__PURE__ */ f("table", {
+				style: u,
+				children: [
+					/* @__PURE__ */ d("caption", { children: C }),
+					/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", { children: [
+						/* @__PURE__ */ d("th", {
+							scope: "col",
+							children: "Domain"
+						}),
+						/* @__PURE__ */ d("th", {
+							scope: "col",
+							children: "Actual share"
+						}),
+						x && /* @__PURE__ */ d("th", {
+							scope: "col",
+							children: "Desired share"
+						})
+					] }) }),
+					/* @__PURE__ */ d("tbody", { children: y.map((e) => /* @__PURE__ */ f("tr", { children: [
+						/* @__PURE__ */ d("th", {
+							scope: "row",
+							children: e.label
+						}),
+						/* @__PURE__ */ d("td", { children: `${Math.round(e.actualShare * 100)}%` }),
+						x && /* @__PURE__ */ d("td", { children: typeof e.desiredShare == "number" ? `${Math.round(e.desiredShare * 100)}%` : "—" })
+					] }, e.domain)) })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { p as BalanceWheel };
+
+//# sourceMappingURL=BalanceWheel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceWheel.js","names":[],"sources":["../../../../src/timecampus/components/charts/BalanceWheel.tsx"],"sourcesContent":["import {\n  PolarAngleAxis,\n  PolarGrid,\n  Radar,\n  RadarChart,\n  ResponsiveContainer,\n  Tooltip,\n} from \"recharts\";\nimport { chartTokens, usePrefersReducedMotion } from \"./chartTheme\";\nimport { ChartEmpty, ChartTooltip, srOnlyStyle } from \"./ChartParts\";\n\n/** One life-domain axis of the wheel: the actual vs the desired share of time. */\nexport interface BalanceWheelDatum {\n  /** Stable domain key (e.g. \"FAMILY\"). */\n  domain: string;\n  /** Human label shown on the axis (e.g. \"Family\"). */\n  label: string;\n  /** Actual share of covered time, 0..1. */\n  actualShare: number;\n  /** Desired share the user declared, 0..1. Omit when no target is set. */\n  desiredShare?: number | null;\n}\n\nexport interface BalanceWheelProps {\n  data: BalanceWheelDatum[];\n  /** Pixel height of the wheel. Default 320. */\n  height?: number;\n  /** Message when there is no covered time to plot. */\n  emptyLabel?: string;\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * BalanceWheel — the signature life-balance visual: a radar of how your finite\n * time actually splits across life domains (solid brand polygon) overlaid with\n * the balance you said you WANT (dashed muted polygon). The gap between the two\n * is the insight. Token-only, theme-aware, and renders an honest empty state —\n * never a fake polygon — when there is no covered time. Values are real shares\n * passed in by the page; this component never fabricates data.\n */\nexport function BalanceWheel({\n  data,\n  height = 320,\n  emptyLabel,\n  ariaLabel,\n  className,\n}: BalanceWheelProps) {\n  const reducedMotion = usePrefersReducedMotion();\n\n  const rows = data.filter(\n    (d) => Number.isFinite(d.actualShare) && d.actualShare >= 0,\n  );\n  const total = rows.reduce((sum, d) => sum + d.actualShare, 0);\n  const hasDesired = rows.some(\n    (d) =>\n      typeof d.desiredShare === \"number\" && Number.isFinite(d.desiredShare),\n  );\n\n  if (rows.length === 0 || total <= 0) {\n    return (\n      <ChartEmpty height={height} label={emptyLabel} className={className} />\n    );\n  }\n\n  const chartData = rows.map((d) => ({\n    label: d.label,\n    Actual: Math.round(d.actualShare * 1000) / 10,\n    Desired:\n      typeof d.desiredShare === \"number\" && Number.isFinite(d.desiredShare)\n        ? Math.round(d.desiredShare * 1000) / 10\n        : 0,\n  }));\n\n  const label =\n    ariaLabel ?? `Life balance across ${rows.map((d) => d.label).join(\", \")}`;\n\n  return (\n    <figure role=\"img\" aria-label={label} className={className}>\n      <div style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RadarChart data={chartData} outerRadius=\"72%\">\n            <PolarGrid stroke={chartTokens.grid} />\n            <PolarAngleAxis\n              dataKey=\"label\"\n              tick={{ fill: chartTokens.textSecondary, fontSize: 11 }}\n            />\n            <Tooltip\n              cursor={false}\n              content={<ChartTooltip valueFormat={(v) => `${v}%`} />}\n            />\n            {hasDesired && (\n              <Radar\n                name=\"Desired\"\n                dataKey=\"Desired\"\n                stroke={chartTokens.textMuted}\n                strokeDasharray=\"4 3\"\n                strokeWidth={1.5}\n                fill=\"transparent\"\n                isAnimationActive={!reducedMotion}\n              />\n            )}\n            <Radar\n              name=\"Actual\"\n              dataKey=\"Actual\"\n              stroke={chartTokens.brand}\n              strokeWidth={2}\n              fill={chartTokens.brand}\n              fillOpacity={0.28}\n              isAnimationActive={!reducedMotion}\n            />\n          </RadarChart>\n        </ResponsiveContainer>\n      </div>\n\n      <ul className=\"mt-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 text-xs text-text-secondary\">\n        <li className=\"flex items-center gap-1.5\">\n          <span\n            aria-hidden=\"true\"\n            className=\"h-2.5 w-2.5 rounded-[3px]\"\n            style={{ backgroundColor: chartTokens.brand }}\n          />\n          Actual\n        </li>\n        {hasDesired && (\n          <li className=\"flex items-center gap-1.5\">\n            <span\n              aria-hidden=\"true\"\n              className=\"h-0 w-3.5 border-t-2 border-dashed\"\n              style={{ borderColor: chartTokens.textMuted }}\n            />\n            Desired\n          </li>\n        )}\n      </ul>\n\n      <table style={srOnlyStyle}>\n        <caption>{label}</caption>\n        <thead>\n          <tr>\n            <th scope=\"col\">Domain</th>\n            <th scope=\"col\">Actual share</th>\n            {hasDesired && <th scope=\"col\">Desired share</th>}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((d) => (\n            <tr key={d.domain}>\n              <th scope=\"row\">{d.label}</th>\n              <td>{`${Math.round(d.actualShare * 100)}%`}</td>\n              {hasDesired && (\n                <td>\n                  {typeof d.desiredShare === \"number\"\n                    ? `${Math.round(d.desiredShare * 100)}%`\n                    : \"—\"}\n                </td>\n              )}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </figure>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,133 @@
+import { Legend as e } from "../../../node_modules/recharts/es6/component/Legend.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 { Bar as r } from "../../../node_modules/recharts/es6/cartesian/Bar.js";
+import { CartesianGrid as i } from "../../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { XAxis as a } from "../../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as o } from "../../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { BarChart as s } from "../../../node_modules/recharts/es6/chart/BarChart.js";
+import { chartTokens as c, defaultSeriesColor as l, formatNumber as u, usePrefersReducedMotion as d } from "./chartTheme.js";
+import { ChartDataTable as f, ChartEmpty as p, ChartFigure as m, ChartLegend as h, ChartTooltip as g } from "./ChartParts.js";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/timecampus/components/charts/BarsChart.tsx
+function b({ data: b, xKey: x, series: S, orientation: C = "vertical", stacked: w = !1, height: T = 260, valueFormat: E = u, xTickFormat: D, showGrid: O = !0, showLegend: k, categoryWidth: A = 96, emptyLabel: j, ariaLabel: M, className: N }) {
+	let P = d(), F = S.map((e, t) => ({
+		...e,
+		label: e.label ?? e.key,
+		color: e.color ?? l(t, S.length)
+	})), I = M ?? `${F.map((e) => e.label).join(", ")} by ${x}`;
+	if (b.length === 0) return /* @__PURE__ */ v(p, {
+		height: T,
+		label: j,
+		className: N
+	});
+	let L = C === "vertical", R = k ?? F.length > 1, z = {
+		fill: c.textMuted,
+		fontSize: 12
+	}, B = F.length - 1, V = (e) => !w || e === B ? L ? [
+		4,
+		4,
+		0,
+		0
+	] : [
+		0,
+		4,
+		4,
+		0
+	] : [
+		0,
+		0,
+		0,
+		0
+	], H = w ? "stack" : void 0;
+	return /* @__PURE__ */ v(m, {
+		ariaLabel: I,
+		height: T,
+		className: N,
+		a11y: /* @__PURE__ */ v(f, {
+			caption: I,
+			xLabel: x,
+			xKey: x,
+			data: b,
+			series: F,
+			valueFormat: E
+		}),
+		children: /* @__PURE__ */ v(n, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ y(s, {
+				data: b,
+				layout: L ? "horizontal" : "vertical",
+				margin: {
+					top: 8,
+					right: 16,
+					bottom: 4,
+					left: 4
+				},
+				barCategoryGap: L ? "24%" : "28%",
+				children: [
+					O ? /* @__PURE__ */ v(i, {
+						vertical: !L,
+						horizontal: L,
+						stroke: c.grid,
+						strokeWidth: 1
+					}) : null,
+					L ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(a, {
+						dataKey: x,
+						type: "category",
+						tickLine: !1,
+						axisLine: !1,
+						tick: z,
+						tickMargin: 8,
+						tickFormatter: D ? (e) => D(e) : void 0
+					}), /* @__PURE__ */ v(o, {
+						type: "number",
+						tickLine: !1,
+						axisLine: !1,
+						tick: z,
+						width: 48,
+						tickFormatter: (e) => E(Number(e))
+					})] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(a, {
+						type: "number",
+						tickLine: !1,
+						axisLine: !1,
+						tick: z,
+						tickFormatter: (e) => E(Number(e))
+					}), /* @__PURE__ */ v(o, {
+						dataKey: x,
+						type: "category",
+						tickLine: !1,
+						axisLine: !1,
+						tick: z,
+						width: A,
+						tickFormatter: D ? (e) => D(e) : void 0
+					})] }),
+					/* @__PURE__ */ v(t, {
+						cursor: {
+							fill: c.track,
+							opacity: .5
+						},
+						content: /* @__PURE__ */ v(g, {
+							valueFormat: E,
+							labelFormat: D
+						})
+					}),
+					R ? /* @__PURE__ */ v(e, { content: /* @__PURE__ */ v(h, {}) }) : null,
+					F.map((e, t) => /* @__PURE__ */ v(r, {
+						dataKey: e.key,
+						name: e.label,
+						fill: e.color,
+						stackId: H,
+						maxBarSize: 24,
+						radius: V(t),
+						isAnimationActive: !P
+					}, e.key))
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { b as BarsChart };
+
+//# sourceMappingURL=BarsChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarsChart.js","names":[],"sources":["../../../../src/timecampus/components/charts/BarsChart.tsx"],"sourcesContent":["import {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport {\n  chartTokens,\n  defaultSeriesColor,\n  formatNumber,\n  usePrefersReducedMotion,\n  type ChartDatum,\n  type ChartSeries,\n  type ValueFormatter,\n} from \"./chartTheme\";\nimport {\n  ChartDataTable,\n  ChartEmpty,\n  ChartFigure,\n  ChartLegend,\n  ChartTooltip,\n} from \"./ChartParts\";\n\nexport interface BarsChartProps {\n  /** Rows of `{ [xKey]: label, [series.key]: number }`. */\n  data: ChartDatum[];\n  /** Field holding the category label. */\n  xKey: string;\n  /** One or more numeric series. */\n  series: ChartSeries[];\n  /** `vertical` = columns growing up (default); `horizontal` = bars growing right. */\n  orientation?: \"vertical\" | \"horizontal\";\n  /** Stack the series instead of grouping side-by-side. Default false. */\n  stacked?: boolean;\n  /** Pixel height. Default 260. */\n  height?: number;\n  /** Formats numeric values in the axis + tooltip. Default grouped integer. */\n  valueFormat?: ValueFormatter;\n  /** Formats the category tick + tooltip header. */\n  xTickFormat?: (value: string | number) => string;\n  /** Show the value-axis grid. Default true. */\n  showGrid?: boolean;\n  /** Force the legend on/off. Default: on when there are ≥ 2 series. */\n  showLegend?: boolean;\n  /** Width of the category label column in `horizontal` mode. Default 96. */\n  categoryWidth?: number;\n  /** Message shown when `data` is empty. */\n  emptyLabel?: string;\n  /** Accessible name. */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * BarsChart — categorical magnitude as columns or horizontal bars, grouped or\n * stacked. Thin (≤ 24px) marks with 4px rounded data-ends, a hairline grid, a\n * per-mark tooltip, a multi-series legend, an empty state and a screen-reader\n * table. Colour is identity only (never re-encoding the bar's length).\n */\nexport function BarsChart({\n  data,\n  xKey,\n  series,\n  orientation = \"vertical\",\n  stacked = false,\n  height = 260,\n  valueFormat = formatNumber,\n  xTickFormat,\n  showGrid = true,\n  showLegend,\n  categoryWidth = 96,\n  emptyLabel,\n  ariaLabel,\n  className,\n}: BarsChartProps) {\n  const reducedMotion = usePrefersReducedMotion();\n\n  const resolved = series.map((s, index) => ({\n    ...s,\n    label: s.label ?? s.key,\n    color: s.color ?? defaultSeriesColor(index, series.length),\n  }));\n  const label =\n    ariaLabel ?? `${resolved.map((s) => s.label).join(\", \")} by ${xKey}`;\n\n  if (data.length === 0) {\n    return (\n      <ChartEmpty height={height} label={emptyLabel} className={className} />\n    );\n  }\n\n  const isColumns = orientation === \"vertical\";\n  const withLegend = showLegend ?? resolved.length > 1;\n  const axisTick = { fill: chartTokens.textMuted, fontSize: 12 };\n  const lastIndex = resolved.length - 1;\n\n  /** Rounded data-end: columns round the top, horizontal bars the right; a stack\n   * rounds only its outermost (last) segment. */\n  const radiusFor = (index: number): [number, number, number, number] => {\n    const rounded = !stacked || index === lastIndex;\n    if (!rounded) return [0, 0, 0, 0];\n    return isColumns ? [4, 4, 0, 0] : [0, 4, 4, 0];\n  };\n\n  const stackId = stacked ? \"stack\" : undefined;\n\n  return (\n    <ChartFigure\n      ariaLabel={label}\n      height={height}\n      className={className}\n      a11y={\n        <ChartDataTable\n          caption={label}\n          xLabel={xKey}\n          xKey={xKey}\n          data={data}\n          series={resolved}\n          valueFormat={valueFormat}\n        />\n      }\n    >\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        <BarChart\n          data={data}\n          layout={isColumns ? \"horizontal\" : \"vertical\"}\n          margin={{ top: 8, right: 16, bottom: 4, left: 4 }}\n          barCategoryGap={isColumns ? \"24%\" : \"28%\"}\n        >\n          {showGrid ? (\n            <CartesianGrid\n              vertical={!isColumns}\n              horizontal={isColumns}\n              stroke={chartTokens.grid}\n              strokeWidth={1}\n            />\n          ) : null}\n\n          {isColumns ? (\n            <>\n              <XAxis\n                dataKey={xKey}\n                type=\"category\"\n                tickLine={false}\n                axisLine={false}\n                tick={axisTick}\n                tickMargin={8}\n                tickFormatter={\n                  xTickFormat\n                    ? (value) => xTickFormat(value as string | number)\n                    : undefined\n                }\n              />\n              <YAxis\n                type=\"number\"\n                tickLine={false}\n                axisLine={false}\n                tick={axisTick}\n                width={48}\n                tickFormatter={(value) => valueFormat(Number(value))}\n              />\n            </>\n          ) : (\n            <>\n              <XAxis\n                type=\"number\"\n                tickLine={false}\n                axisLine={false}\n                tick={axisTick}\n                tickFormatter={(value) => valueFormat(Number(value))}\n              />\n              <YAxis\n                dataKey={xKey}\n                type=\"category\"\n                tickLine={false}\n                axisLine={false}\n                tick={axisTick}\n                width={categoryWidth}\n                tickFormatter={\n                  xTickFormat\n                    ? (value) => xTickFormat(value as string | number)\n                    : undefined\n                }\n              />\n            </>\n          )}\n\n          <Tooltip\n            cursor={{ fill: chartTokens.track, opacity: 0.5 }}\n            content={\n              <ChartTooltip\n                valueFormat={valueFormat}\n                labelFormat={xTickFormat}\n              />\n            }\n          />\n\n          {withLegend ? <Legend content={<ChartLegend />} /> : null}\n\n          {resolved.map((s, index) => (\n            <Bar\n              key={s.key}\n              dataKey={s.key}\n              name={s.label}\n              fill={s.color}\n              stackId={stackId}\n              maxBarSize={24}\n              radius={radiusFor(index)}\n              isAnimationActive={!reducedMotion}\n            />\n          ))}\n        </BarChart>\n      </ResponsiveContainer>\n    </ChartFigure>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AA+DA,SAAgB,EAAU,EACxB,SACA,SACA,WACA,iBAAc,YACd,aAAU,IACV,YAAS,KACT,iBAAc,GACd,gBACA,cAAW,IACX,eACA,mBAAgB,IAChB,eACA,cACA,gBACiB;CACjB,IAAM,IAAgB,GAAyB,EAEzC,IAAW,EAAO,KAAK,GAAG,OAAW;EACzC,GAAG;EACH,OAAO,EAAE,SAAS,EAAE;EACpB,OAAO,EAAE,SAAS,EAAmB,GAAO,EAAO,OAAO;EAC3D,EAAE,EACG,IACJ,KAAa,GAAG,EAAS,KAAK,MAAM,EAAE,MAAM,CAAC,KAAK,KAAK,CAAC,MAAM;AAEhE,KAAI,EAAK,WAAW,EAClB,QACE,kBAAC,GAAD;EAAoB;EAAQ,OAAO;EAAuB;EAAa,CAAA;CAI3E,IAAM,IAAY,MAAgB,YAC5B,IAAa,KAAc,EAAS,SAAS,GAC7C,IAAW;EAAE,MAAM,EAAY;EAAW,UAAU;EAAI,EACxD,IAAY,EAAS,SAAS,GAI9B,KAAa,MACD,CAAC,KAAW,MAAU,IAE/B,IAAY;EAAC;EAAG;EAAG;EAAG;EAAE,GAAG;EAAC;EAAG;EAAG;EAAG;EAAE,GADzB;EAAC;EAAG;EAAG;EAAG;EAAE,EAI7B,IAAU,IAAU,UAAU,KAAA;AAEpC,QACE,kBAAC,GAAD;EACE,WAAW;EACH;EACG;EACX,MACE,kBAAC,GAAD;GACE,SAAS;GACT,QAAQ;GACF;GACA;GACN,QAAQ;GACK;GACb,CAAA;YAGJ,kBAAC,GAAD;GAAqB,OAAM;GAAO,QAAO;aACvC,kBAAC,GAAD;IACQ;IACN,QAAQ,IAAY,eAAe;IACnC,QAAQ;KAAE,KAAK;KAAG,OAAO;KAAI,QAAQ;KAAG,MAAM;KAAG;IACjD,gBAAgB,IAAY,QAAQ;cAJtC;KAMG,IACC,kBAAC,GAAD;MACE,UAAU,CAAC;MACX,YAAY;MACZ,QAAQ,EAAY;MACpB,aAAa;MACb,CAAA,GACA;KAEH,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;MACE,SAAS;MACT,MAAK;MACL,UAAU;MACV,UAAU;MACV,MAAM;MACN,YAAY;MACZ,eACE,KACK,MAAU,EAAY,EAAyB,GAChD,KAAA;MAEN,CAAA,EACF,kBAAC,GAAD;MACE,MAAK;MACL,UAAU;MACV,UAAU;MACV,MAAM;MACN,OAAO;MACP,gBAAgB,MAAU,EAAY,OAAO,EAAM,CAAC;MACpD,CAAA,CACD,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;MACE,MAAK;MACL,UAAU;MACV,UAAU;MACV,MAAM;MACN,gBAAgB,MAAU,EAAY,OAAO,EAAM,CAAC;MACpD,CAAA,EACF,kBAAC,GAAD;MACE,SAAS;MACT,MAAK;MACL,UAAU;MACV,UAAU;MACV,MAAM;MACN,OAAO;MACP,eACE,KACK,MAAU,EAAY,EAAyB,GAChD,KAAA;MAEN,CAAA,CACD,EAAA,CAAA;KAGL,kBAAC,GAAD;MACE,QAAQ;OAAE,MAAM,EAAY;OAAO,SAAS;OAAK;MACjD,SACE,kBAAC,GAAD;OACe;OACb,aAAa;OACb,CAAA;MAEJ,CAAA;KAED,IAAa,kBAAC,GAAD,EAAQ,SAAS,kBAAC,GAAD,EAAe,CAAA,EAAI,CAAA,GAAG;KAEpD,EAAS,KAAK,GAAG,MAChB,kBAAC,GAAD;MAEE,SAAS,EAAE;MACX,MAAM,EAAE;MACR,MAAM,EAAE;MACC;MACT,YAAY;MACZ,QAAQ,EAAU,EAAM;MACxB,mBAAmB,CAAC;MACpB,EARK,EAAE,IAQP,CACF;KACO;;GACS,CAAA;EACV,CAAA"}

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

@@ -0,0 +1,104 @@
+import { cn as e } from "../../utils/helpers.js";
+import { chartTokens as t, renderValue as n } from "./chartTheme.js";
+import { Inbox as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/timecampus/components/charts/ChartParts.tsx
+function o({ active: e, payload: r, label: o, valueFormat: s, labelFormat: c, hideLabel: l }) {
+	return !e || !r || r.length === 0 ? null : /* @__PURE__ */ a("div", {
+		className: "min-w-32 rounded-lg border border-border-seam bg-bg-surface/95 px-3 py-2 shadow-lg backdrop-blur-sm",
+		children: [!l && o !== void 0 && o !== "" ? /* @__PURE__ */ i("p", {
+			className: "mb-1.5 text-xs font-medium text-text-secondary",
+			children: c ? c(o) : String(o)
+		}) : null, /* @__PURE__ */ i("ul", {
+			className: "space-y-1",
+			children: r.map((e, r) => /* @__PURE__ */ a("li", {
+				className: "flex items-center justify-between gap-4 text-sm",
+				children: [/* @__PURE__ */ a("span", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: [/* @__PURE__ */ i("span", {
+						"aria-hidden": "true",
+						className: "h-2.5 w-2.5 shrink-0 rounded-[3px]",
+						style: { backgroundColor: e.color ?? t.brand }
+					}), /* @__PURE__ */ i("span", {
+						className: "truncate text-text-secondary",
+						children: e.name ?? e.dataKey
+					})]
+				}), /* @__PURE__ */ i("span", {
+					className: "font-semibold tabular-nums text-text-primary",
+					children: n(e.value, s)
+				})]
+			}, `${String(e.dataKey ?? e.name ?? r)}`))
+		})]
+	});
+}
+function s({ payload: e }) {
+	return !e || e.length === 0 ? null : /* @__PURE__ */ i("ul", {
+		className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 pt-3",
+		children: e.map((e, n) => /* @__PURE__ */ a("li", {
+			className: "flex items-center gap-1.5 text-xs text-text-secondary",
+			children: [/* @__PURE__ */ i("span", {
+				"aria-hidden": "true",
+				className: "h-2.5 w-2.5 rounded-[3px]",
+				style: { backgroundColor: e.color ?? t.brand }
+			}), e.value]
+		}, `${String(e.value ?? n)}`))
+	});
+}
+function c({ height: t = 240, label: n = "No data yet", className: o }) {
+	return /* @__PURE__ */ a("div", {
+		className: e("flex w-full flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border-seam bg-bg-sunken/40 text-center", o),
+		style: { height: t },
+		children: [/* @__PURE__ */ i(r, {
+			className: "h-6 w-6 text-text-muted",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ i("p", {
+			className: "text-sm text-text-muted",
+			children: n
+		})]
+	});
+}
+var l = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	padding: 0,
+	margin: "-1px",
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	borderWidth: 0
+};
+function u({ caption: e, xLabel: t, xKey: r, data: o, series: s, valueFormat: c }) {
+	return /* @__PURE__ */ a("table", {
+		style: l,
+		children: [
+			/* @__PURE__ */ i("caption", { children: e }),
+			/* @__PURE__ */ i("thead", { children: /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("th", {
+				scope: "col",
+				children: t
+			}), s.map((e) => /* @__PURE__ */ i("th", {
+				scope: "col",
+				children: e.label ?? e.key
+			}, e.key))] }) }),
+			/* @__PURE__ */ i("tbody", { children: o.map((e, t) => /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("th", {
+				scope: "row",
+				children: String(e[r] ?? "")
+			}), s.map((t) => /* @__PURE__ */ i("td", { children: n(e[t.key], c) }, t.key))] }, `${String(e[r] ?? t)}`)) })
+		]
+	});
+}
+function d({ ariaLabel: t, height: n, children: r, a11y: o, className: s }) {
+	return /* @__PURE__ */ a("figure", {
+		role: "img",
+		"aria-label": t,
+		className: e("w-full", s),
+		children: [/* @__PURE__ */ i("div", {
+			style: { height: n },
+			children: r
+		}), o]
+	});
+}
+//#endregion
+export { u as ChartDataTable, c as ChartEmpty, d as ChartFigure, s as ChartLegend, o as ChartTooltip, l as srOnlyStyle };
+
+//# sourceMappingURL=ChartParts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartParts.js","names":[],"sources":["../../../../src/timecampus/components/charts/ChartParts.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { Inbox } from \"lucide-react\";\nimport { cn } from \"../../utils/helpers\";\nimport {\n  chartTokens,\n  renderValue,\n  type ValueFormatter,\n  type ChartDatum,\n  type ChartSeries,\n} from \"./chartTheme\";\n\n/**\n * Shared chart chrome — the tooltip, legend, empty state and screen-reader data\n * table used by every recharts primitive in this folder. Kept token-only so the\n * whole set recolours with the theme.\n */\n\n/* -------------------------------------------------------------------------- */\n/* Tooltip                                                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface TooltipPayloadEntry {\n  name?: string | number;\n  value?: number | string;\n  color?: string;\n  dataKey?: string | number;\n}\n\nexport interface ChartTooltipProps {\n  /** Injected by recharts. */\n  active?: boolean;\n  /** Injected by recharts. */\n  payload?: TooltipPayloadEntry[];\n  /** Injected by recharts. */\n  label?: string | number;\n  valueFormat?: ValueFormatter;\n  labelFormat?: (label: string | number) => string;\n  /** Hide the header row (used by single-series / donut tooltips). */\n  hideLabel?: boolean;\n}\n\n/**\n * Token-styled tooltip card. Identity rides a colour swatch beside the name;\n * every text run stays in an ink token, never the series colour.\n */\nexport function ChartTooltip({\n  active,\n  payload,\n  label,\n  valueFormat,\n  labelFormat,\n  hideLabel,\n}: ChartTooltipProps) {\n  if (!active || !payload || payload.length === 0) return null;\n\n  return (\n    <div className=\"min-w-32 rounded-lg border border-border-seam bg-bg-surface/95 px-3 py-2 shadow-lg backdrop-blur-sm\">\n      {!hideLabel && label !== undefined && label !== \"\" ? (\n        <p className=\"mb-1.5 text-xs font-medium text-text-secondary\">\n          {labelFormat ? labelFormat(label) : String(label)}\n        </p>\n      ) : null}\n      <ul className=\"space-y-1\">\n        {payload.map((entry, index) => (\n          <li\n            key={`${String(entry.dataKey ?? entry.name ?? index)}`}\n            className=\"flex items-center justify-between gap-4 text-sm\"\n          >\n            <span className=\"flex min-w-0 items-center gap-1.5\">\n              <span\n                aria-hidden=\"true\"\n                className=\"h-2.5 w-2.5 shrink-0 rounded-[3px]\"\n                style={{ backgroundColor: entry.color ?? chartTokens.brand }}\n              />\n              <span className=\"truncate text-text-secondary\">\n                {entry.name ?? entry.dataKey}\n              </span>\n            </span>\n            <span className=\"font-semibold tabular-nums text-text-primary\">\n              {renderValue(entry.value, valueFormat)}\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Legend                                                                     */\n/* -------------------------------------------------------------------------- */\n\ninterface LegendPayloadEntry {\n  value?: string | number;\n  color?: string;\n}\n\nexport interface ChartLegendProps {\n  /** Injected by recharts. */\n  payload?: LegendPayloadEntry[];\n}\n\n/**\n * Token-styled legend — always present for ≥ 2 series so identity is never\n * carried by colour alone. Text is muted ink; the colour lives in the swatch.\n */\nexport function ChartLegend({ payload }: ChartLegendProps) {\n  if (!payload || payload.length === 0) return null;\n  return (\n    <ul className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 pt-3\">\n      {payload.map((entry, index) => (\n        <li\n          key={`${String(entry.value ?? index)}`}\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: entry.color ?? chartTokens.brand }}\n          />\n          {entry.value}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Empty state                                                                */\n/* -------------------------------------------------------------------------- */\n\nexport interface ChartEmptyProps {\n  /** Height of the placeholder, matched to the chart it stands in for. */\n  height?: number;\n  /** Muted message. Never fabricate data — show this instead. */\n  label?: string;\n  className?: string;\n}\n\n/** Calm \"no data yet\" placeholder. Rendered whenever a series is empty. */\nexport function ChartEmpty({\n  height = 240,\n  label = \"No data yet\",\n  className,\n}: ChartEmptyProps) {\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border-seam bg-bg-sunken/40 text-center\",\n        className,\n      )}\n      style={{ height }}\n    >\n      <Inbox className=\"h-6 w-6 text-text-muted\" aria-hidden=\"true\" />\n      <p className=\"text-sm text-text-muted\">{label}</p>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Screen-reader data table (accessibility relief channel)                    */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Visually-hidden style, applied inline so it never depends on the host's\n * Tailwind build emitting the `sr-only` utility. Keeps the a11y data tables out\n * of sight while readable by assistive tech in every environment.\n */\nexport const srOnlyStyle: CSSProperties = {\n  position: \"absolute\",\n  width: \"1px\",\n  height: \"1px\",\n  padding: 0,\n  margin: \"-1px\",\n  overflow: \"hidden\",\n  clipPath: \"inset(50%)\",\n  whiteSpace: \"nowrap\",\n  borderWidth: 0,\n};\n\nexport interface ChartDataTableProps {\n  caption: string;\n  xLabel: string;\n  xKey: string;\n  data: ChartDatum[];\n  series: ChartSeries[];\n  valueFormat?: ValueFormatter;\n}\n\n/**\n * Visually-hidden table mirroring the plotted data. Satisfies the data-viz\n * \"a table view exists\" accessibility requirement and gives assistive tech the\n * exact numbers behind the marks.\n */\nexport function ChartDataTable({\n  caption,\n  xLabel,\n  xKey,\n  data,\n  series,\n  valueFormat,\n}: ChartDataTableProps) {\n  return (\n    <table style={srOnlyStyle}>\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          <th scope=\"col\">{xLabel}</th>\n          {series.map((s) => (\n            <th scope=\"col\" key={s.key}>\n              {s.label ?? s.key}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {data.map((row, index) => (\n          <tr key={`${String(row[xKey] ?? index)}`}>\n            <th scope=\"row\">{String(row[xKey] ?? \"\")}</th>\n            {series.map((s) => (\n              <td key={s.key}>\n                {renderValue(row[s.key] as number | string, valueFormat)}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/* Figure wrapper                                                             */\n/* -------------------------------------------------------------------------- */\n\nexport interface ChartFigureProps {\n  /** Accessible name for the whole figure. */\n  ariaLabel: string;\n  height: number;\n  children: ReactNode;\n  /** Screen-reader table + any extra off-screen content. */\n  a11y?: ReactNode;\n  className?: string;\n}\n\n/** `role=\"img\"` wrapper giving the chart a single accessible name + fixed height. */\nexport function ChartFigure({\n  ariaLabel,\n  height,\n  children,\n  a11y,\n  className,\n}: ChartFigureProps) {\n  return (\n    <figure\n      role=\"img\"\n      aria-label={ariaLabel}\n      className={cn(\"w-full\", className)}\n    >\n      <div style={{ height }}>{children}</div>\n      {a11y}\n    </figure>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,116 @@
+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";
+//#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) => ({
+		...e,
+		color: e.color ?? l(t)
+	})), O = D.reduce((e, t) => e + t.value, 0);
+	if (D.length === 0 || O <= 0) return /* @__PURE__ */ m(d, {
+		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", {
+		role: "img",
+		"aria-label": k,
+		className: e("w-full", T),
+		children: [
+			/* @__PURE__ */ h("div", {
+				className: "relative mx-auto",
+				style: { height: y },
+				children: [/* @__PURE__ */ m(n, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ h(a, { children: [/* @__PURE__ */ m(t, {
+						cursor: !1,
+						content: /* @__PURE__ */ m(f, {
+							valueFormat: x,
+							hideLabel: !0
+						})
+					}), /* @__PURE__ */ m(i, {
+						data: D,
+						dataKey: "value",
+						nameKey: "name",
+						cx: "50%",
+						cy: "50%",
+						innerRadius: `${A}%`,
+						outerRadius: "82%",
+						paddingAngle: 1.5,
+						stroke: o.surface,
+						strokeWidth: 2,
+						isAnimationActive: !E,
+						children: D.map((e) => /* @__PURE__ */ m(r, { fill: e.color }, e.name))
+					})] })
+				}), j ? /* @__PURE__ */ h("div", {
+					className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+					children: [/* @__PURE__ */ m("span", {
+						className: "text-2xl font-bold text-text-primary",
+						children: M
+					}), _ ? /* @__PURE__ */ m("span", {
+						className: "mt-0.5 max-w-[70%] text-xs text-text-secondary",
+						children: _
+					}) : null]
+				}) : null]
+			}),
+			S ? /* @__PURE__ */ m("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", {
+					className: "flex items-center gap-1.5 text-xs text-text-secondary",
+					children: [
+						/* @__PURE__ */ m("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", {
+							className: "tabular-nums text-text-muted",
+							children: [Math.round(e.value / O * 100), "%"]
+						})
+					]
+				}, e.name))
+			}) : null,
+			/* @__PURE__ */ h("table", {
+				style: p,
+				children: [
+					/* @__PURE__ */ m("caption", { children: k }),
+					/* @__PURE__ */ m("thead", { children: /* @__PURE__ */ h("tr", { children: [
+						/* @__PURE__ */ m("th", {
+							scope: "col",
+							children: "Category"
+						}),
+						/* @__PURE__ */ m("th", {
+							scope: "col",
+							children: "Value"
+						}),
+						/* @__PURE__ */ m("th", {
+							scope: "col",
+							children: "Share"
+						})
+					] }) }),
+					/* @__PURE__ */ m("tbody", { children: D.map((e) => /* @__PURE__ */ h("tr", { children: [
+						/* @__PURE__ */ m("th", {
+							scope: "row",
+							children: e.name
+						}),
+						/* @__PURE__ */ m("td", { children: x(e.value) }),
+						/* @__PURE__ */ h("td", { children: [Math.round(e.value / O * 100), "%"] })
+					] }, e.name)) })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { g as DonutChart };
+
+//# sourceMappingURL=DonutChart.js.map

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

@@ -0,0 +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":"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"}