tempest-react-sdk 0.24.0 → 0.25.0

package/README.md

@@ -198,6 +198,14 @@ This injects the design tokens (`--tempest-primary`, `--tempest-radius-md`, ...)
 
 The styles ship hashed under the `tempest_` namespace — they do **not** collide with Tailwind, Stitches, Linaria, or app-level CSS Modules.
 
+**Optional layout layer.** CSS Modules cover the inside of each component; the layer _around_ them (page shell, two-column form, action row, card, a region that scrolls sideways instead of the page) is a second, opt-in stylesheet:
+
+```ts
+import "tempest-react-sdk/utilities.css";
+```
+
+~50 token-driven classes, all prefixed `tempest-`, **1.13 KB brotli** — a page shell like `<div className="tempest-container tempest-page">` with `.tempest-grid-auto`, `.tempest-form-grid`, `.tempest-card`, `.tempest-truncate`. It is not imported by `styles.css`, so an app with its own layout system pays nothing. It is deliberately _not_ a utility framework: no `p-4 mt-2 bg-blue-500` per value. See [Styles › opt-in utility layer](https://mauriciobenjamin700.github.io/tempest-react-sdk/styles/).
+
 ---
 
 ## What's inside
@@ -1788,9 +1796,9 @@ npm run clean          # rm -rf dist coverage
 
 Snapshot of current health:
 
-- 2272 tests / 366 files — 98.5% lines, 97.1% statements, 96.4% functions, 95.0% branches (CI floors: 98/97/96/94).
-- What your app actually pays (brotli, tree-shaken slices measured by `npm run size`): `cn` alone 153 B · one `Button` 794 B · a typical app shell (5 components + router + providers + HTTP + auth + a hook) 6.79 KB · offline/PWA surface 4.41 KB · `styles.css` 20.61 KB.
-- Full-barrel ceiling — nobody imports this, it is the no-tree-shaking worst case: 64.16 KB ESM / 78.83 KB CJS.
+- 2488 tests / 377 files — 98.5% lines, 97.1% statements, 96.6% functions, 95.0% branches (CI floors: 98/97/96/94).
+- What your app actually pays (brotli, tree-shaken slices measured by `npm run size`): `cn` alone 153 B · one `Button` 794 B · a typical app shell (5 components + router + providers + HTTP + auth + a hook) 6.83 KB · offline/PWA surface 4.44 KB · `styles.css` 21.68 KB · the opt-in `utilities.css` 1.13 KB.
+- Full-barrel ceiling — nobody imports this, it is the no-tree-shaking worst case: 70.21 KB ESM / 85.52 KB CJS.
 - Husky pre-commit runs `lint-staged` (eslint --fix + prettier --write) on staged files.
 
 The demo gallery lives in `examples/gallery` and consumes the local SDK via `file:../..`:

package/dist/charts/AreaChart.cjs

@@ -1,2 +1,2 @@
-const e=require("../utils/cn.cjs"),t=require("./palette.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,index:o,categories:s,colors:c=t.DEFAULT_CHART_COLORS,height:l=300,width:u,stack:d=!1,showLegend:f=!0,showGrid:p=!0,showTooltip:m=!0,valueFormatter:h,className:g}){let _=d?`stack`:void 0,v=(0,r.jsxs)(i.AreaChart,{data:a,width:u,height:l,children:[p?(0,r.jsx)(i.CartesianGrid,{strokeDasharray:`3 3`}):null,(0,r.jsx)(i.XAxis,{dataKey:o}),(0,r.jsx)(i.YAxis,{tickFormatter:h}),m?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(h)}):null,f?(0,r.jsx)(i.Legend,{}):null,s.map((e,t)=>{let n=c[t%c.length];return(0,r.jsx)(i.Area,{type:`monotone`,dataKey:e,stackId:_,stroke:n,fill:n,fillOpacity:.3},e)})]});return(0,r.jsx)(`div`,{className:e.cn(g),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:v}):v})}exports.AreaChart=a;
+const e=require("../utils/cn.cjs"),t=require("./use-chart-colors.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,index:o,categories:s,colors:c,height:l=300,width:u,stack:d=!1,showLegend:f=!0,showGrid:p=!0,showTooltip:m=!0,valueFormatter:h,className:g}){let _=t.useChartColors(c),v=d?`stack`:void 0,y=(0,r.jsxs)(i.AreaChart,{data:a,width:u,height:l,children:[p?(0,r.jsx)(i.CartesianGrid,{strokeDasharray:`3 3`}):null,(0,r.jsx)(i.XAxis,{dataKey:o}),(0,r.jsx)(i.YAxis,{tickFormatter:h}),m?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(h)}):null,f?(0,r.jsx)(i.Legend,{}):null,s.map((e,t)=>{let n=_[t%_.length];return(0,r.jsx)(i.Area,{type:`monotone`,dataKey:e,stackId:v,stroke:n,fill:n,fillOpacity:.3},e)})]});return(0,r.jsx)(`div`,{className:e.cn(g),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:y}):y})}exports.AreaChart=a;
 //# sourceMappingURL=AreaChart.cjs.map

package/dist/charts/AreaChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.cjs","names":[],"sources":["../../src/charts/AreaChart.tsx"],"sourcesContent":["import {\n    Area,\n    AreaChart as RAreaChart,\n    CartesianGrid,\n    Legend,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * AreaChart — themed wrapper over recharts `AreaChart`.\n *\n * Plots one filled area per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all\n * areas share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function AreaChart({\n    data,\n    index,\n    categories,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    stack = false,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const stackId = stack ? \"stack\" : undefined;\n\n    const chart = (\n        <RAreaChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => {\n                const color = colors[i % colors.length];\n                return (\n                    <Area\n                        key={category}\n                        type=\"monotone\"\n                        dataKey={category}\n                        stackId={stackId}\n                        stroke={color}\n                        fill={color}\n                        fillOpacity={0.3}\n                    />\n                );\n            })}\n        </RAreaChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"gJAuBA,SAAgB,EAAU,CACtB,OACA,QACA,aACA,SAAS,EAAA,qBACT,SAAS,IACT,QACA,QAAQ,GACR,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBACA,aACoB,CACpB,IAAM,EAAU,EAAQ,QAAU,IAAA,GAE5B,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,UAAD,CAAkB,OAAa,QAAe,kBAA9C,CACK,GAAW,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAe,gBAAgB,KAAO,CAAA,EAAI,MACtD,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,QAAS,CAAQ,CAAA,GACxB,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,cAAe,CAAiB,CAAA,EACtC,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,KAC1B,EAAW,KAAK,EAAU,IAAM,CAC7B,IAAM,EAAQ,EAAO,EAAI,EAAO,QAChC,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAEI,KAAK,WACL,QAAS,EACA,UACT,OAAQ,EACR,KAAM,EACN,YAAa,EAChB,EAPQ,CAOR,CAET,CAAC,CACO,IAGhB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}
+{"version":3,"file":"AreaChart.cjs","names":[],"sources":["../../src/charts/AreaChart.tsx"],"sourcesContent":["import {\n    Area,\n    AreaChart as RAreaChart,\n    CartesianGrid,\n    Legend,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * AreaChart — themed wrapper over recharts `AreaChart`.\n *\n * Plots one filled area per entry in `categories`, colored from `colors`\n * (cycling the `--tempest-chart-*` theme tokens by default). When `stack` is set, all\n * areas share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function AreaChart({\n    data,\n    index,\n    categories,\n    colors,\n    height = 300,\n    width,\n    stack = false,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const palette = useChartColors(colors);\n    const stackId = stack ? \"stack\" : undefined;\n\n    const chart = (\n        <RAreaChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => {\n                const color = palette[i % palette.length];\n                return (\n                    <Area\n                        key={category}\n                        type=\"monotone\"\n                        dataKey={category}\n                        stackId={stackId}\n                        stroke={color}\n                        fill={color}\n                        fillOpacity={0.3}\n                    />\n                );\n            })}\n        </RAreaChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"yJAuBA,SAAgB,EAAU,CACtB,OACA,QACA,aACA,SACA,SAAS,IACT,QACA,QAAQ,GACR,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBACA,aACoB,CACpB,IAAM,EAAU,EAAA,eAAe,CAAM,EAC/B,EAAU,EAAQ,QAAU,IAAA,GAE5B,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,UAAD,CAAkB,OAAa,QAAe,kBAA9C,CACK,GAAW,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAe,gBAAgB,KAAO,CAAA,EAAI,MACtD,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,QAAS,CAAQ,CAAA,GACxB,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,cAAe,CAAiB,CAAA,EACtC,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,KAC1B,EAAW,KAAK,EAAU,IAAM,CAC7B,IAAM,EAAQ,EAAQ,EAAI,EAAQ,QAClC,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAEI,KAAK,WACL,QAAS,EACA,UACT,OAAQ,EACR,KAAM,EACN,YAAa,EAChB,EAPQ,CAOR,CAET,CAAC,CACO,IAGhB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}

package/dist/charts/AreaChart.js

@@ -1,11 +1,11 @@
 import { cn as e } from "../utils/cn.js";
-import { DEFAULT_CHART_COLORS as t } from "./palette.js";
+import { useChartColors as t } from "./use-chart-colors.js";
 import { toTooltipFormatter as n } from "./types.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Area as a, AreaChart as o, CartesianGrid as s, Legend as c, ResponsiveContainer as l, Tooltip as u, XAxis as d, YAxis as f } from "recharts";
 //#region src/charts/AreaChart.tsx
-function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, width: v, stack: y = !1, showLegend: b = !0, showGrid: x = !0, showTooltip: S = !0, valueFormatter: C, className: w }) {
-	let T = y ? "stack" : void 0, E = /* @__PURE__ */ i(o, {
+function p({ data: p, index: m, categories: h, colors: g, height: _ = 300, width: v, stack: y = !1, showLegend: b = !0, showGrid: x = !0, showTooltip: S = !0, valueFormatter: C, className: w }) {
+	let T = t(g), E = y ? "stack" : void 0, D = /* @__PURE__ */ i(o, {
 		data: p,
 		width: v,
 		height: _,
@@ -16,11 +16,11 @@ function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, w
 			S ? /* @__PURE__ */ r(u, { formatter: n(C) }) : null,
 			b ? /* @__PURE__ */ r(c, {}) : null,
 			h.map((e, t) => {
-				let n = g[t % g.length];
+				let n = T[t % T.length];
 				return /* @__PURE__ */ r(a, {
 					type: "monotone",
 					dataKey: e,
-					stackId: T,
+					stackId: E,
 					stroke: n,
 					fill: n,
 					fillOpacity: .3
@@ -33,8 +33,8 @@ function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, w
 		children: v === void 0 ? /* @__PURE__ */ r(l, {
 			width: "100%",
 			height: _,
-			children: E
-		}) : E
+			children: D
+		}) : D
 	});
 }
 //#endregion

package/dist/charts/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.js","names":[],"sources":["../../src/charts/AreaChart.tsx"],"sourcesContent":["import {\n    Area,\n    AreaChart as RAreaChart,\n    CartesianGrid,\n    Legend,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * AreaChart — themed wrapper over recharts `AreaChart`.\n *\n * Plots one filled area per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all\n * areas share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function AreaChart({\n    data,\n    index,\n    categories,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    stack = false,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const stackId = stack ? \"stack\" : undefined;\n\n    const chart = (\n        <RAreaChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => {\n                const color = colors[i % colors.length];\n                return (\n                    <Area\n                        key={category}\n                        type=\"monotone\"\n                        dataKey={category}\n                        stackId={stackId}\n                        stroke={color}\n                        fill={color}\n                        fillOpacity={0.3}\n                    />\n                );\n            })}\n        </RAreaChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,EAAU,EACtB,SACA,UACA,eACA,YAAS,GACT,YAAS,KACT,UACA,WAAQ,IACR,gBAAa,IACb,cAAW,IACX,iBAAc,IACd,mBACA,gBACoB;CACpB,IAAM,IAAU,IAAQ,UAAU,KAAA,GAE5B,IACF,kBAAC,GAAD;EAAkB;EAAa;EAAe;YAA9C;GACK,IAAW,kBAAC,GAAD,EAAe,iBAAgB,MAAO,CAAA,IAAI;GACtD,kBAAC,GAAD,EAAO,SAAS,EAAQ,CAAA;GACxB,kBAAC,GAAD,EAAO,eAAe,EAAiB,CAAA;GACtC,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC1B,EAAW,KAAK,GAAU,MAAM;IAC7B,IAAM,IAAQ,EAAO,IAAI,EAAO;IAChC,OACI,kBAAC,GAAD;KAEI,MAAK;KACL,SAAS;KACA;KACT,QAAQ;KACR,MAAM;KACN,aAAa;IAChB,GAPQ,CAOR;GAET,CAAC;EACO;;CAGhB,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}
+{"version":3,"file":"AreaChart.js","names":[],"sources":["../../src/charts/AreaChart.tsx"],"sourcesContent":["import {\n    Area,\n    AreaChart as RAreaChart,\n    CartesianGrid,\n    Legend,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * AreaChart — themed wrapper over recharts `AreaChart`.\n *\n * Plots one filled area per entry in `categories`, colored from `colors`\n * (cycling the `--tempest-chart-*` theme tokens by default). When `stack` is set, all\n * areas share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function AreaChart({\n    data,\n    index,\n    categories,\n    colors,\n    height = 300,\n    width,\n    stack = false,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const palette = useChartColors(colors);\n    const stackId = stack ? \"stack\" : undefined;\n\n    const chart = (\n        <RAreaChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => {\n                const color = palette[i % palette.length];\n                return (\n                    <Area\n                        key={category}\n                        type=\"monotone\"\n                        dataKey={category}\n                        stackId={stackId}\n                        stroke={color}\n                        fill={color}\n                        fillOpacity={0.3}\n                    />\n                );\n            })}\n        </RAreaChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,EAAU,EACtB,SACA,UACA,eACA,WACA,YAAS,KACT,UACA,WAAQ,IACR,gBAAa,IACb,cAAW,IACX,iBAAc,IACd,mBACA,gBACoB;CACpB,IAAM,IAAU,EAAe,CAAM,GAC/B,IAAU,IAAQ,UAAU,KAAA,GAE5B,IACF,kBAAC,GAAD;EAAkB;EAAa;EAAe;YAA9C;GACK,IAAW,kBAAC,GAAD,EAAe,iBAAgB,MAAO,CAAA,IAAI;GACtD,kBAAC,GAAD,EAAO,SAAS,EAAQ,CAAA;GACxB,kBAAC,GAAD,EAAO,eAAe,EAAiB,CAAA;GACtC,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC1B,EAAW,KAAK,GAAU,MAAM;IAC7B,IAAM,IAAQ,EAAQ,IAAI,EAAQ;IAClC,OACI,kBAAC,GAAD;KAEI,MAAK;KACL,SAAS;KACA;KACT,QAAQ;KACR,MAAM;KACN,aAAa;IAChB,GAPQ,CAOR;GAET,CAAC;EACO;;CAGhB,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}

package/dist/charts/BarChart.cjs

@@ -1,2 +1,2 @@
-const e=require("../utils/cn.cjs"),t=require("./palette.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,index:o,categories:s,colors:c=t.DEFAULT_CHART_COLORS,height:l=300,width:u,stack:d=!1,showLegend:f=!0,showGrid:p=!0,showTooltip:m=!0,valueFormatter:h,className:g}){let _=d?`stack`:void 0,v=(0,r.jsxs)(i.BarChart,{data:a,width:u,height:l,children:[p?(0,r.jsx)(i.CartesianGrid,{strokeDasharray:`3 3`}):null,(0,r.jsx)(i.XAxis,{dataKey:o}),(0,r.jsx)(i.YAxis,{tickFormatter:h}),m?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(h)}):null,f?(0,r.jsx)(i.Legend,{}):null,s.map((e,t)=>(0,r.jsx)(i.Bar,{dataKey:e,stackId:_,fill:c[t%c.length]},e))]});return(0,r.jsx)(`div`,{className:e.cn(g),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:v}):v})}exports.BarChart=a;
+const e=require("../utils/cn.cjs"),t=require("./use-chart-colors.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,index:o,categories:s,colors:c,height:l=300,width:u,stack:d=!1,showLegend:f=!0,showGrid:p=!0,showTooltip:m=!0,valueFormatter:h,className:g}){let _=t.useChartColors(c),v=d?`stack`:void 0,y=(0,r.jsxs)(i.BarChart,{data:a,width:u,height:l,children:[p?(0,r.jsx)(i.CartesianGrid,{strokeDasharray:`3 3`}):null,(0,r.jsx)(i.XAxis,{dataKey:o}),(0,r.jsx)(i.YAxis,{tickFormatter:h}),m?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(h)}):null,f?(0,r.jsx)(i.Legend,{}):null,s.map((e,t)=>(0,r.jsx)(i.Bar,{dataKey:e,stackId:v,fill:_[t%_.length]},e))]});return(0,r.jsx)(`div`,{className:e.cn(g),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:y}):y})}exports.BarChart=a;
 //# sourceMappingURL=BarChart.cjs.map

package/dist/charts/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","names":[],"sources":["../../src/charts/BarChart.tsx"],"sourcesContent":["import {\n    Bar,\n    BarChart as RBarChart,\n    CartesianGrid,\n    Legend,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * BarChart — themed wrapper over recharts `BarChart`.\n *\n * Plots one bar series per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all\n * bars share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function BarChart({\n    data,\n    index,\n    categories,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    stack = false,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const stackId = stack ? \"stack\" : undefined;\n\n    const chart = (\n        <RBarChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => (\n                <Bar\n                    key={category}\n                    dataKey={category}\n                    stackId={stackId}\n                    fill={colors[i % colors.length]}\n                />\n            ))}\n        </RBarChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"gJAuBA,SAAgB,EAAS,CACrB,OACA,QACA,aACA,SAAS,EAAA,qBACT,SAAS,IACT,QACA,QAAQ,GACR,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBACA,aACoB,CACpB,IAAM,EAAU,EAAQ,QAAU,IAAA,GAE5B,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,SAAD,CAAiB,OAAa,QAAe,kBAA7C,CACK,GAAW,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAe,gBAAgB,KAAO,CAAA,EAAI,MACtD,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,QAAS,CAAQ,CAAA,GACxB,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,cAAe,CAAiB,CAAA,EACtC,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,KAC1B,EAAW,KAAK,EAAU,KACvB,EAAA,EAAA,IAAA,CAAC,EAAA,IAAD,CAEI,QAAS,EACA,UACT,KAAM,EAAO,EAAI,EAAO,OAC3B,EAJQ,CAIR,CACJ,CACM,IAGf,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}
+{"version":3,"file":"BarChart.cjs","names":[],"sources":["../../src/charts/BarChart.tsx"],"sourcesContent":["import {\n    Bar,\n    BarChart as RBarChart,\n    CartesianGrid,\n    Legend,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * BarChart — themed wrapper over recharts `BarChart`.\n *\n * Plots one bar series per entry in `categories`, colored from `colors`\n * (cycling the `--tempest-chart-*` theme tokens by default). When `stack` is set, all\n * bars share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function BarChart({\n    data,\n    index,\n    categories,\n    colors,\n    height = 300,\n    width,\n    stack = false,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const palette = useChartColors(colors);\n    const stackId = stack ? \"stack\" : undefined;\n\n    const chart = (\n        <RBarChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => (\n                <Bar\n                    key={category}\n                    dataKey={category}\n                    stackId={stackId}\n                    fill={palette[i % palette.length]}\n                />\n            ))}\n        </RBarChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"yJAuBA,SAAgB,EAAS,CACrB,OACA,QACA,aACA,SACA,SAAS,IACT,QACA,QAAQ,GACR,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBACA,aACoB,CACpB,IAAM,EAAU,EAAA,eAAe,CAAM,EAC/B,EAAU,EAAQ,QAAU,IAAA,GAE5B,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,SAAD,CAAiB,OAAa,QAAe,kBAA7C,CACK,GAAW,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAe,gBAAgB,KAAO,CAAA,EAAI,MACtD,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,QAAS,CAAQ,CAAA,GACxB,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,cAAe,CAAiB,CAAA,EACtC,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,KAC1B,EAAW,KAAK,EAAU,KACvB,EAAA,EAAA,IAAA,CAAC,EAAA,IAAD,CAEI,QAAS,EACA,UACT,KAAM,EAAQ,EAAI,EAAQ,OAC7B,EAJQ,CAIR,CACJ,CACM,IAGf,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}

package/dist/charts/BarChart.js

@@ -1,11 +1,11 @@
 import { cn as e } from "../utils/cn.js";
-import { DEFAULT_CHART_COLORS as t } from "./palette.js";
+import { useChartColors as t } from "./use-chart-colors.js";
 import { toTooltipFormatter as n } from "./types.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Bar as a, BarChart as o, CartesianGrid as s, Legend as c, ResponsiveContainer as l, Tooltip as u, XAxis as d, YAxis as f } from "recharts";
 //#region src/charts/BarChart.tsx
-function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, width: v, stack: y = !1, showLegend: b = !0, showGrid: x = !0, showTooltip: S = !0, valueFormatter: C, className: w }) {
-	let T = y ? "stack" : void 0, E = /* @__PURE__ */ i(o, {
+function p({ data: p, index: m, categories: h, colors: g, height: _ = 300, width: v, stack: y = !1, showLegend: b = !0, showGrid: x = !0, showTooltip: S = !0, valueFormatter: C, className: w }) {
+	let T = t(g), E = y ? "stack" : void 0, D = /* @__PURE__ */ i(o, {
 		data: p,
 		width: v,
 		height: _,
@@ -17,8 +17,8 @@ function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, w
 			b ? /* @__PURE__ */ r(c, {}) : null,
 			h.map((e, t) => /* @__PURE__ */ r(a, {
 				dataKey: e,
-				stackId: T,
-				fill: g[t % g.length]
+				stackId: E,
+				fill: T[t % T.length]
 			}, e))
 		]
 	});
@@ -27,8 +27,8 @@ function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, w
 		children: v === void 0 ? /* @__PURE__ */ r(l, {
 			width: "100%",
 			height: _,
-			children: E
-		}) : E
+			children: D
+		}) : D
 	});
 }
 //#endregion

package/dist/charts/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","names":[],"sources":["../../src/charts/BarChart.tsx"],"sourcesContent":["import {\n    Bar,\n    BarChart as RBarChart,\n    CartesianGrid,\n    Legend,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * BarChart — themed wrapper over recharts `BarChart`.\n *\n * Plots one bar series per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all\n * bars share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function BarChart({\n    data,\n    index,\n    categories,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    stack = false,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const stackId = stack ? \"stack\" : undefined;\n\n    const chart = (\n        <RBarChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => (\n                <Bar\n                    key={category}\n                    dataKey={category}\n                    stackId={stackId}\n                    fill={colors[i % colors.length]}\n                />\n            ))}\n        </RBarChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,EAAS,EACrB,SACA,UACA,eACA,YAAS,GACT,YAAS,KACT,UACA,WAAQ,IACR,gBAAa,IACb,cAAW,IACX,iBAAc,IACd,mBACA,gBACoB;CACpB,IAAM,IAAU,IAAQ,UAAU,KAAA,GAE5B,IACF,kBAAC,GAAD;EAAiB;EAAa;EAAe;YAA7C;GACK,IAAW,kBAAC,GAAD,EAAe,iBAAgB,MAAO,CAAA,IAAI;GACtD,kBAAC,GAAD,EAAO,SAAS,EAAQ,CAAA;GACxB,kBAAC,GAAD,EAAO,eAAe,EAAiB,CAAA;GACtC,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC1B,EAAW,KAAK,GAAU,MACvB,kBAAC,GAAD;IAEI,SAAS;IACA;IACT,MAAM,EAAO,IAAI,EAAO;GAC3B,GAJQ,CAIR,CACJ;EACM;;CAGf,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}
+{"version":3,"file":"BarChart.js","names":[],"sources":["../../src/charts/BarChart.tsx"],"sourcesContent":["import {\n    Bar,\n    BarChart as RBarChart,\n    CartesianGrid,\n    Legend,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * BarChart — themed wrapper over recharts `BarChart`.\n *\n * Plots one bar series per entry in `categories`, colored from `colors`\n * (cycling the `--tempest-chart-*` theme tokens by default). When `stack` is set, all\n * bars share a stackId. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function BarChart({\n    data,\n    index,\n    categories,\n    colors,\n    height = 300,\n    width,\n    stack = false,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const palette = useChartColors(colors);\n    const stackId = stack ? \"stack\" : undefined;\n\n    const chart = (\n        <RBarChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => (\n                <Bar\n                    key={category}\n                    dataKey={category}\n                    stackId={stackId}\n                    fill={palette[i % palette.length]}\n                />\n            ))}\n        </RBarChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,EAAS,EACrB,SACA,UACA,eACA,WACA,YAAS,KACT,UACA,WAAQ,IACR,gBAAa,IACb,cAAW,IACX,iBAAc,IACd,mBACA,gBACoB;CACpB,IAAM,IAAU,EAAe,CAAM,GAC/B,IAAU,IAAQ,UAAU,KAAA,GAE5B,IACF,kBAAC,GAAD;EAAiB;EAAa;EAAe;YAA7C;GACK,IAAW,kBAAC,GAAD,EAAe,iBAAgB,MAAO,CAAA,IAAI;GACtD,kBAAC,GAAD,EAAO,SAAS,EAAQ,CAAA;GACxB,kBAAC,GAAD,EAAO,eAAe,EAAiB,CAAA;GACtC,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC1B,EAAW,KAAK,GAAU,MACvB,kBAAC,GAAD;IAEI,SAAS;IACA;IACT,MAAM,EAAQ,IAAI,EAAQ;GAC7B,GAJQ,CAIR,CACJ;EACM;;CAGf,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}

package/dist/charts/LineChart.cjs

@@ -1,2 +1,2 @@
-const e=require("../utils/cn.cjs"),t=require("./palette.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,index:o,categories:s,colors:c=t.DEFAULT_CHART_COLORS,height:l=300,width:u,showLegend:d=!0,showGrid:f=!0,showTooltip:p=!0,valueFormatter:m,className:h}){let g=(0,r.jsxs)(i.LineChart,{data:a,width:u,height:l,children:[f?(0,r.jsx)(i.CartesianGrid,{strokeDasharray:`3 3`}):null,(0,r.jsx)(i.XAxis,{dataKey:o}),(0,r.jsx)(i.YAxis,{tickFormatter:m}),p?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(m)}):null,d?(0,r.jsx)(i.Legend,{}):null,s.map((e,t)=>(0,r.jsx)(i.Line,{type:`monotone`,dataKey:e,stroke:c[t%c.length],dot:!1},e))]});return(0,r.jsx)(`div`,{className:e.cn(h),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:g}):g})}exports.LineChart=a;
+const e=require("../utils/cn.cjs"),t=require("./use-chart-colors.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,index:o,categories:s,colors:c,height:l=300,width:u,showLegend:d=!0,showGrid:f=!0,showTooltip:p=!0,valueFormatter:m,className:h}){let g=t.useChartColors(c),_=(0,r.jsxs)(i.LineChart,{data:a,width:u,height:l,children:[f?(0,r.jsx)(i.CartesianGrid,{strokeDasharray:`3 3`}):null,(0,r.jsx)(i.XAxis,{dataKey:o}),(0,r.jsx)(i.YAxis,{tickFormatter:m}),p?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(m)}):null,d?(0,r.jsx)(i.Legend,{}):null,s.map((e,t)=>(0,r.jsx)(i.Line,{type:`monotone`,dataKey:e,stroke:g[t%g.length],dot:!1},e))]});return(0,r.jsx)(`div`,{className:e.cn(h),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:_}):_})}exports.LineChart=a;
 //# sourceMappingURL=LineChart.cjs.map

package/dist/charts/LineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","names":[],"sources":["../../src/charts/LineChart.tsx"],"sourcesContent":["import {\n    CartesianGrid,\n    Legend,\n    Line,\n    LineChart as RLineChart,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * LineChart — themed wrapper over recharts `LineChart`.\n *\n * Plots one line per entry in `categories`, colored from `colors` (cycling\n * {@link DEFAULT_CHART_COLORS} by default). `stack` is accepted for API parity\n * but does not visually stack lines. When `width` is provided the chart renders\n * at that fixed size without a ResponsiveContainer; otherwise it fills its\n * parent.\n */\nexport function LineChart({\n    data,\n    index,\n    categories,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const chart = (\n        <RLineChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => (\n                <Line\n                    key={category}\n                    type=\"monotone\"\n                    dataKey={category}\n                    stroke={colors[i % colors.length]}\n                    dot={false}\n                />\n            ))}\n        </RLineChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"gJAwBA,SAAgB,EAAU,CACtB,OACA,QACA,aACA,SAAS,EAAA,qBACT,SAAS,IACT,QACA,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBACA,aACoB,CACpB,IAAM,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,UAAD,CAAkB,OAAa,QAAe,kBAA9C,CACK,GAAW,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAe,gBAAgB,KAAO,CAAA,EAAI,MACtD,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,QAAS,CAAQ,CAAA,GACxB,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,cAAe,CAAiB,CAAA,EACtC,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,KAC1B,EAAW,KAAK,EAAU,KACvB,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAEI,KAAK,WACL,QAAS,EACT,OAAQ,EAAO,EAAI,EAAO,QAC1B,IAAK,EACR,EALQ,CAKR,CACJ,CACO,IAGhB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}
+{"version":3,"file":"LineChart.cjs","names":[],"sources":["../../src/charts/LineChart.tsx"],"sourcesContent":["import {\n    CartesianGrid,\n    Legend,\n    Line,\n    LineChart as RLineChart,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * LineChart — themed wrapper over recharts `LineChart`.\n *\n * Plots one line per entry in `categories`, colored from `colors` (cycling\n * the `--tempest-chart-*` theme tokens by default). `stack` is accepted for API parity\n * but does not visually stack lines. When `width` is provided the chart renders\n * at that fixed size without a ResponsiveContainer; otherwise it fills its\n * parent.\n */\nexport function LineChart({\n    data,\n    index,\n    categories,\n    colors,\n    height = 300,\n    width,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const palette = useChartColors(colors);\n    const chart = (\n        <RLineChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => (\n                <Line\n                    key={category}\n                    type=\"monotone\"\n                    dataKey={category}\n                    stroke={palette[i % palette.length]}\n                    dot={false}\n                />\n            ))}\n        </RLineChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"yJAwBA,SAAgB,EAAU,CACtB,OACA,QACA,aACA,SACA,SAAS,IACT,QACA,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBACA,aACoB,CACpB,IAAM,EAAU,EAAA,eAAe,CAAM,EAC/B,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,UAAD,CAAkB,OAAa,QAAe,kBAA9C,CACK,GAAW,EAAA,EAAA,IAAA,CAAC,EAAA,cAAD,CAAe,gBAAgB,KAAO,CAAA,EAAI,MACtD,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,QAAS,CAAQ,CAAA,GACxB,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,cAAe,CAAiB,CAAA,EACtC,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,KAC1B,EAAW,KAAK,EAAU,KACvB,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAEI,KAAK,WACL,QAAS,EACT,OAAQ,EAAQ,EAAI,EAAQ,QAC5B,IAAK,EACR,EALQ,CAKR,CACJ,CACO,IAGhB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}

package/dist/charts/LineChart.js

@@ -1,11 +1,11 @@
 import { cn as e } from "../utils/cn.js";
-import { DEFAULT_CHART_COLORS as t } from "./palette.js";
+import { useChartColors as t } from "./use-chart-colors.js";
 import { toTooltipFormatter as n } from "./types.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { CartesianGrid as a, Legend as o, Line as s, LineChart as c, ResponsiveContainer as l, Tooltip as u, XAxis as d, YAxis as f } from "recharts";
 //#region src/charts/LineChart.tsx
-function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, width: v, showLegend: y = !0, showGrid: b = !0, showTooltip: x = !0, valueFormatter: S, className: C }) {
-	let w = /* @__PURE__ */ i(c, {
+function p({ data: p, index: m, categories: h, colors: g, height: _ = 300, width: v, showLegend: y = !0, showGrid: b = !0, showTooltip: x = !0, valueFormatter: S, className: C }) {
+	let w = t(g), T = /* @__PURE__ */ i(c, {
 		data: p,
 		width: v,
 		height: _,
@@ -18,7 +18,7 @@ function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, w
 			h.map((e, t) => /* @__PURE__ */ r(s, {
 				type: "monotone",
 				dataKey: e,
-				stroke: g[t % g.length],
+				stroke: w[t % w.length],
 				dot: !1
 			}, e))
 		]
@@ -28,8 +28,8 @@ function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, w
 		children: v === void 0 ? /* @__PURE__ */ r(l, {
 			width: "100%",
 			height: _,
-			children: w
-		}) : w
+			children: T
+		}) : T
 	});
 }
 //#endregion

package/dist/charts/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","names":[],"sources":["../../src/charts/LineChart.tsx"],"sourcesContent":["import {\n    CartesianGrid,\n    Legend,\n    Line,\n    LineChart as RLineChart,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * LineChart — themed wrapper over recharts `LineChart`.\n *\n * Plots one line per entry in `categories`, colored from `colors` (cycling\n * {@link DEFAULT_CHART_COLORS} by default). `stack` is accepted for API parity\n * but does not visually stack lines. When `width` is provided the chart renders\n * at that fixed size without a ResponsiveContainer; otherwise it fills its\n * parent.\n */\nexport function LineChart({\n    data,\n    index,\n    categories,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const chart = (\n        <RLineChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => (\n                <Line\n                    key={category}\n                    type=\"monotone\"\n                    dataKey={category}\n                    stroke={colors[i % colors.length]}\n                    dot={false}\n                />\n            ))}\n        </RLineChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,EAAU,EACtB,SACA,UACA,eACA,YAAS,GACT,YAAS,KACT,UACA,gBAAa,IACb,cAAW,IACX,iBAAc,IACd,mBACA,gBACoB;CACpB,IAAM,IACF,kBAAC,GAAD;EAAkB;EAAa;EAAe;YAA9C;GACK,IAAW,kBAAC,GAAD,EAAe,iBAAgB,MAAO,CAAA,IAAI;GACtD,kBAAC,GAAD,EAAO,SAAS,EAAQ,CAAA;GACxB,kBAAC,GAAD,EAAO,eAAe,EAAiB,CAAA;GACtC,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC1B,EAAW,KAAK,GAAU,MACvB,kBAAC,GAAD;IAEI,MAAK;IACL,SAAS;IACT,QAAQ,EAAO,IAAI,EAAO;IAC1B,KAAK;GACR,GALQ,CAKR,CACJ;EACO;;CAGhB,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}
+{"version":3,"file":"LineChart.js","names":[],"sources":["../../src/charts/LineChart.tsx"],"sourcesContent":["import {\n    CartesianGrid,\n    Legend,\n    Line,\n    LineChart as RLineChart,\n    ResponsiveContainer,\n    Tooltip,\n    XAxis,\n    YAxis,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * LineChart — themed wrapper over recharts `LineChart`.\n *\n * Plots one line per entry in `categories`, colored from `colors` (cycling\n * the `--tempest-chart-*` theme tokens by default). `stack` is accepted for API parity\n * but does not visually stack lines. When `width` is provided the chart renders\n * at that fixed size without a ResponsiveContainer; otherwise it fills its\n * parent.\n */\nexport function LineChart({\n    data,\n    index,\n    categories,\n    colors,\n    height = 300,\n    width,\n    showLegend = true,\n    showGrid = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const palette = useChartColors(colors);\n    const chart = (\n        <RLineChart data={data} width={width} height={height}>\n            {showGrid ? <CartesianGrid strokeDasharray=\"3 3\" /> : null}\n            <XAxis dataKey={index} />\n            <YAxis tickFormatter={valueFormatter} />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => (\n                <Line\n                    key={category}\n                    type=\"monotone\"\n                    dataKey={category}\n                    stroke={palette[i % palette.length]}\n                    dot={false}\n                />\n            ))}\n        </RLineChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,EAAU,EACtB,SACA,UACA,eACA,WACA,YAAS,KACT,UACA,gBAAa,IACb,cAAW,IACX,iBAAc,IACd,mBACA,gBACoB;CACpB,IAAM,IAAU,EAAe,CAAM,GAC/B,IACF,kBAAC,GAAD;EAAkB;EAAa;EAAe;YAA9C;GACK,IAAW,kBAAC,GAAD,EAAe,iBAAgB,MAAO,CAAA,IAAI;GACtD,kBAAC,GAAD,EAAO,SAAS,EAAQ,CAAA;GACxB,kBAAC,GAAD,EAAO,eAAe,EAAiB,CAAA;GACtC,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC1B,EAAW,KAAK,GAAU,MACvB,kBAAC,GAAD;IAEI,MAAK;IACL,SAAS;IACT,QAAQ,EAAQ,IAAI,EAAQ;IAC5B,KAAK;GACR,GALQ,CAKR,CACJ;EACO;;CAGhB,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}

package/dist/charts/PieChart.cjs

@@ -1,2 +1,2 @@
-const e=require("../utils/cn.cjs"),t=require("./palette.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,category:o,index:s,colors:c=t.DEFAULT_CHART_COLORS,height:l=300,width:u,donut:d=!1,showLegend:f=!0,showTooltip:p=!0,valueFormatter:m,className:h}){let g=(0,r.jsxs)(i.PieChart,{width:u,height:l,children:[p?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(m)}):null,f?(0,r.jsx)(i.Legend,{}):null,(0,r.jsx)(i.Pie,{data:a,dataKey:o,nameKey:s,innerRadius:d?`60%`:0,outerRadius:`80%`,children:a.map((e,t)=>(0,r.jsx)(i.Cell,{fill:c[t%c.length]},`${String(e[s])}-${t}`))})]});return(0,r.jsx)(`div`,{className:e.cn(h),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:g}):g})}exports.PieChart=a;
+const e=require("../utils/cn.cjs"),t=require("./use-chart-colors.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,category:o,index:s,colors:c,height:l=300,width:u,donut:d=!1,showLegend:f=!0,showTooltip:p=!0,valueFormatter:m,className:h}){let g=t.useChartColors(c),_=(0,r.jsxs)(i.PieChart,{width:u,height:l,children:[p?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(m)}):null,f?(0,r.jsx)(i.Legend,{}):null,(0,r.jsx)(i.Pie,{data:a,dataKey:o,nameKey:s,innerRadius:d?`60%`:0,outerRadius:`80%`,children:a.map((e,t)=>(0,r.jsx)(i.Cell,{fill:g[t%g.length]},`${String(e[s])}-${t}`))})]});return(0,r.jsx)(`div`,{className:e.cn(h),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:_}):_})}exports.PieChart=a;
 //# sourceMappingURL=PieChart.cjs.map

package/dist/charts/PieChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.cjs","names":[],"sources":["../../src/charts/PieChart.tsx"],"sourcesContent":["import { Cell, Legend, Pie, PieChart as RPieChart, ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { PieChartProps } from \"./types\";\n\n/**\n * PieChart — themed wrapper over recharts `PieChart`.\n *\n * Renders one slice per row, reading the numeric value from `category` and the\n * label from `index`. Each slice is colored from `colors` (cycling\n * {@link DEFAULT_CHART_COLORS} by default). When `donut` is set the pie gets a\n * non-zero inner radius. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function PieChart({\n    data,\n    category,\n    index,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    donut = false,\n    showLegend = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: PieChartProps) {\n    const chart = (\n        <RPieChart width={width} height={height}>\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            <Pie\n                data={data}\n                dataKey={category}\n                nameKey={index}\n                innerRadius={donut ? \"60%\" : 0}\n                outerRadius=\"80%\"\n            >\n                {data.map((row, i) => (\n                    <Cell key={`${String(row[index])}-${i}`} fill={colors[i % colors.length]} />\n                ))}\n            </Pie>\n        </RPieChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"gJAeA,SAAgB,EAAS,CACrB,OACA,WACA,QACA,SAAS,EAAA,qBACT,SAAS,IACT,QACA,QAAQ,GACR,aAAa,GACb,cAAc,GACd,iBACA,aACc,CACd,IAAM,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,SAAD,CAAkB,QAAe,kBAAjC,CACK,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,MAC3B,EAAA,EAAA,IAAA,CAAC,EAAA,IAAD,CACU,OACN,QAAS,EACT,QAAS,EACT,YAAa,EAAQ,MAAQ,EAC7B,YAAY,eAEX,EAAK,KAAK,EAAK,KACZ,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAAyC,KAAM,EAAO,EAAI,EAAO,OAAU,EAAhE,GAAG,OAAO,EAAI,EAAM,EAAE,GAAG,GAAuC,CAC9E,CACA,CAAA,CACE,IAGf,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}
+{"version":3,"file":"PieChart.cjs","names":[],"sources":["../../src/charts/PieChart.tsx"],"sourcesContent":["import { Cell, Legend, Pie, PieChart as RPieChart, ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { PieChartProps } from \"./types\";\n\n/**\n * PieChart — themed wrapper over recharts `PieChart`.\n *\n * Renders one slice per row, reading the numeric value from `category` and the\n * label from `index`. Each slice is colored from `colors` (cycling\n * the `--tempest-chart-*` theme tokens by default). When `donut` is set the pie gets a\n * non-zero inner radius. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function PieChart({\n    data,\n    category,\n    index,\n    colors,\n    height = 300,\n    width,\n    donut = false,\n    showLegend = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: PieChartProps) {\n    const palette = useChartColors(colors);\n    const chart = (\n        <RPieChart width={width} height={height}>\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            <Pie\n                data={data}\n                dataKey={category}\n                nameKey={index}\n                innerRadius={donut ? \"60%\" : 0}\n                outerRadius=\"80%\"\n            >\n                {data.map((row, i) => (\n                    <Cell key={`${String(row[index])}-${i}`} fill={palette[i % palette.length]} />\n                ))}\n            </Pie>\n        </RPieChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"yJAeA,SAAgB,EAAS,CACrB,OACA,WACA,QACA,SACA,SAAS,IACT,QACA,QAAQ,GACR,aAAa,GACb,cAAc,GACd,iBACA,aACc,CACd,IAAM,EAAU,EAAA,eAAe,CAAM,EAC/B,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,SAAD,CAAkB,QAAe,kBAAjC,CACK,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,MAC3B,EAAA,EAAA,IAAA,CAAC,EAAA,IAAD,CACU,OACN,QAAS,EACT,QAAS,EACT,YAAa,EAAQ,MAAQ,EAC7B,YAAY,eAEX,EAAK,KAAK,EAAK,KACZ,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAAyC,KAAM,EAAQ,EAAI,EAAQ,OAAU,EAAlE,GAAG,OAAO,EAAI,EAAM,EAAE,GAAG,GAAyC,CAChF,CACA,CAAA,CACE,IAGf,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}

package/dist/charts/PieChart.js

@@ -1,11 +1,11 @@
 import { cn as e } from "../utils/cn.js";
-import { DEFAULT_CHART_COLORS as t } from "./palette.js";
+import { useChartColors as t } from "./use-chart-colors.js";
 import { toTooltipFormatter as n } from "./types.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Cell as a, Legend as o, Pie as s, PieChart as c, ResponsiveContainer as l, Tooltip as u } from "recharts";
 //#region src/charts/PieChart.tsx
-function d({ data: d, category: f, index: p, colors: m = t, height: h = 300, width: g, donut: _ = !1, showLegend: v = !0, showTooltip: y = !0, valueFormatter: b, className: x }) {
-	let S = /* @__PURE__ */ i(c, {
+function d({ data: d, category: f, index: p, colors: m, height: h = 300, width: g, donut: _ = !1, showLegend: v = !0, showTooltip: y = !0, valueFormatter: b, className: x }) {
+	let S = t(m), C = /* @__PURE__ */ i(c, {
 		width: g,
 		height: h,
 		children: [
@@ -17,7 +17,7 @@ function d({ data: d, category: f, index: p, colors: m = t, height: h = 300, wid
 				nameKey: p,
 				innerRadius: _ ? "60%" : 0,
 				outerRadius: "80%",
-				children: d.map((e, t) => /* @__PURE__ */ r(a, { fill: m[t % m.length] }, `${String(e[p])}-${t}`))
+				children: d.map((e, t) => /* @__PURE__ */ r(a, { fill: S[t % S.length] }, `${String(e[p])}-${t}`))
 			})
 		]
 	});
@@ -26,8 +26,8 @@ function d({ data: d, category: f, index: p, colors: m = t, height: h = 300, wid
 		children: g === void 0 ? /* @__PURE__ */ r(l, {
 			width: "100%",
 			height: h,
-			children: S
-		}) : S
+			children: C
+		}) : C
 	});
 }
 //#endregion

package/dist/charts/PieChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.js","names":[],"sources":["../../src/charts/PieChart.tsx"],"sourcesContent":["import { Cell, Legend, Pie, PieChart as RPieChart, ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { PieChartProps } from \"./types\";\n\n/**\n * PieChart — themed wrapper over recharts `PieChart`.\n *\n * Renders one slice per row, reading the numeric value from `category` and the\n * label from `index`. Each slice is colored from `colors` (cycling\n * {@link DEFAULT_CHART_COLORS} by default). When `donut` is set the pie gets a\n * non-zero inner radius. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function PieChart({\n    data,\n    category,\n    index,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    donut = false,\n    showLegend = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: PieChartProps) {\n    const chart = (\n        <RPieChart width={width} height={height}>\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            <Pie\n                data={data}\n                dataKey={category}\n                nameKey={index}\n                innerRadius={donut ? \"60%\" : 0}\n                outerRadius=\"80%\"\n            >\n                {data.map((row, i) => (\n                    <Cell key={`${String(row[index])}-${i}`} fill={colors[i % colors.length]} />\n                ))}\n            </Pie>\n        </RPieChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,EAAS,EACrB,SACA,aACA,UACA,YAAS,GACT,YAAS,KACT,UACA,WAAQ,IACR,gBAAa,IACb,iBAAc,IACd,mBACA,gBACc;CACd,IAAM,IACF,kBAAC,GAAD;EAAkB;EAAe;YAAjC;GACK,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC3B,kBAAC,GAAD;IACU;IACN,SAAS;IACT,SAAS;IACT,aAAa,IAAQ,QAAQ;IAC7B,aAAY;cAEX,EAAK,KAAK,GAAK,MACZ,kBAAC,GAAD,EAAyC,MAAM,EAAO,IAAI,EAAO,QAAU,GAAhE,GAAG,OAAO,EAAI,EAAM,EAAE,GAAG,GAAuC,CAC9E;GACA,CAAA;EACE;;CAGf,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}
+{"version":3,"file":"PieChart.js","names":[],"sources":["../../src/charts/PieChart.tsx"],"sourcesContent":["import { Cell, Legend, Pie, PieChart as RPieChart, ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { PieChartProps } from \"./types\";\n\n/**\n * PieChart — themed wrapper over recharts `PieChart`.\n *\n * Renders one slice per row, reading the numeric value from `category` and the\n * label from `index`. Each slice is colored from `colors` (cycling\n * the `--tempest-chart-*` theme tokens by default). When `donut` is set the pie gets a\n * non-zero inner radius. When `width` is provided the chart renders at that\n * fixed size without a ResponsiveContainer; otherwise it fills its parent.\n */\nexport function PieChart({\n    data,\n    category,\n    index,\n    colors,\n    height = 300,\n    width,\n    donut = false,\n    showLegend = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: PieChartProps) {\n    const palette = useChartColors(colors);\n    const chart = (\n        <RPieChart width={width} height={height}>\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            <Pie\n                data={data}\n                dataKey={category}\n                nameKey={index}\n                innerRadius={donut ? \"60%\" : 0}\n                outerRadius=\"80%\"\n            >\n                {data.map((row, i) => (\n                    <Cell key={`${String(row[index])}-${i}`} fill={palette[i % palette.length]} />\n                ))}\n            </Pie>\n        </RPieChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,EAAS,EACrB,SACA,aACA,UACA,WACA,YAAS,KACT,UACA,WAAQ,IACR,gBAAa,IACb,iBAAc,IACd,mBACA,gBACc;CACd,IAAM,IAAU,EAAe,CAAM,GAC/B,IACF,kBAAC,GAAD;EAAkB;EAAe;YAAjC;GACK,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC3B,kBAAC,GAAD;IACU;IACN,SAAS;IACT,SAAS;IACT,aAAa,IAAQ,QAAQ;IAC7B,aAAY;cAEX,EAAK,KAAK,GAAK,MACZ,kBAAC,GAAD,EAAyC,MAAM,EAAQ,IAAI,EAAQ,QAAU,GAAlE,GAAG,OAAO,EAAI,EAAM,EAAE,GAAG,GAAyC,CAChF;GACA,CAAA;EACE;;CAGf,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}

package/dist/charts/RadarChart.cjs

@@ -1,2 +1,2 @@
-const e=require("../utils/cn.cjs"),t=require("./palette.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,index:o,categories:s,colors:c=t.DEFAULT_CHART_COLORS,height:l=300,width:u,showLegend:d=!0,showTooltip:f=!0,valueFormatter:p,className:m}){let h=(0,r.jsxs)(i.RadarChart,{data:a,width:u,height:l,children:[(0,r.jsx)(i.PolarGrid,{}),(0,r.jsx)(i.PolarAngleAxis,{dataKey:o}),(0,r.jsx)(i.PolarRadiusAxis,{}),f?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(p)}):null,d?(0,r.jsx)(i.Legend,{}):null,s.map((e,t)=>{let n=c[t%c.length];return(0,r.jsx)(i.Radar,{dataKey:e,stroke:n,fill:n,fillOpacity:.3},e)})]});return(0,r.jsx)(`div`,{className:e.cn(m),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:h}):h})}exports.RadarChart=a;
+const e=require("../utils/cn.cjs"),t=require("./use-chart-colors.cjs"),n=require("./types.cjs");let r=require("react/jsx-runtime"),i=require("recharts");function a({data:a,index:o,categories:s,colors:c,height:l=300,width:u,showLegend:d=!0,showTooltip:f=!0,valueFormatter:p,className:m}){let h=t.useChartColors(c),g=(0,r.jsxs)(i.RadarChart,{data:a,width:u,height:l,children:[(0,r.jsx)(i.PolarGrid,{}),(0,r.jsx)(i.PolarAngleAxis,{dataKey:o}),(0,r.jsx)(i.PolarRadiusAxis,{}),f?(0,r.jsx)(i.Tooltip,{formatter:n.toTooltipFormatter(p)}):null,d?(0,r.jsx)(i.Legend,{}):null,s.map((e,t)=>{let n=h[t%h.length];return(0,r.jsx)(i.Radar,{dataKey:e,stroke:n,fill:n,fillOpacity:.3},e)})]});return(0,r.jsx)(`div`,{className:e.cn(m),children:u===void 0?(0,r.jsx)(i.ResponsiveContainer,{width:`100%`,height:l,children:g}):g})}exports.RadarChart=a;
 //# sourceMappingURL=RadarChart.cjs.map

package/dist/charts/RadarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadarChart.cjs","names":[],"sources":["../../src/charts/RadarChart.tsx"],"sourcesContent":["import {\n    Legend,\n    PolarAngleAxis,\n    PolarGrid,\n    PolarRadiusAxis,\n    RadarChart as RRadarChart,\n    Radar,\n    ResponsiveContainer,\n    Tooltip,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * RadarChart — themed wrapper over recharts `RadarChart`.\n *\n * Plots one radar polygon per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). `index` drives the angle\n * axis. When `width` is provided the chart renders at that fixed size without a\n * ResponsiveContainer; otherwise it fills its parent.\n */\nexport function RadarChart({\n    data,\n    index,\n    categories,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    showLegend = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const chart = (\n        <RRadarChart data={data} width={width} height={height}>\n            <PolarGrid />\n            <PolarAngleAxis dataKey={index} />\n            <PolarRadiusAxis />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => {\n                const color = colors[i % colors.length];\n                return (\n                    <Radar\n                        key={category}\n                        dataKey={category}\n                        stroke={color}\n                        fill={color}\n                        fillOpacity={0.3}\n                    />\n                );\n            })}\n        </RRadarChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"gJAuBA,SAAgB,EAAW,CACvB,OACA,QACA,aACA,SAAS,EAAA,qBACT,SAAS,IACT,QACA,aAAa,GACb,cAAc,GACd,iBACA,aACoB,CACpB,IAAM,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,WAAD,CAAmB,OAAa,QAAe,kBAA/C,EACI,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAAC,EAAA,eAAD,CAAgB,QAAS,CAAQ,CAAA,GACjC,EAAA,EAAA,IAAA,CAAC,EAAA,gBAAD,CAAkB,CAAA,EACjB,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,KAC1B,EAAW,KAAK,EAAU,IAAM,CAC7B,IAAM,EAAQ,EAAO,EAAI,EAAO,QAChC,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAEI,QAAS,EACT,OAAQ,EACR,KAAM,EACN,YAAa,EAChB,EALQ,CAKR,CAET,CAAC,CACQ,IAGjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}
+{"version":3,"file":"RadarChart.cjs","names":[],"sources":["../../src/charts/RadarChart.tsx"],"sourcesContent":["import {\n    Legend,\n    PolarAngleAxis,\n    PolarGrid,\n    PolarRadiusAxis,\n    RadarChart as RRadarChart,\n    Radar,\n    ResponsiveContainer,\n    Tooltip,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * RadarChart — themed wrapper over recharts `RadarChart`.\n *\n * Plots one radar polygon per entry in `categories`, colored from `colors`\n * (cycling the `--tempest-chart-*` theme tokens by default). `index` drives the angle\n * axis. When `width` is provided the chart renders at that fixed size without a\n * ResponsiveContainer; otherwise it fills its parent.\n */\nexport function RadarChart({\n    data,\n    index,\n    categories,\n    colors,\n    height = 300,\n    width,\n    showLegend = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const palette = useChartColors(colors);\n    const chart = (\n        <RRadarChart data={data} width={width} height={height}>\n            <PolarGrid />\n            <PolarAngleAxis dataKey={index} />\n            <PolarRadiusAxis />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => {\n                const color = palette[i % palette.length];\n                return (\n                    <Radar\n                        key={category}\n                        dataKey={category}\n                        stroke={color}\n                        fill={color}\n                        fillOpacity={0.3}\n                    />\n                );\n            })}\n        </RRadarChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":"yJAuBA,SAAgB,EAAW,CACvB,OACA,QACA,aACA,SACA,SAAS,IACT,QACA,aAAa,GACb,cAAc,GACd,iBACA,aACoB,CACpB,IAAM,EAAU,EAAA,eAAe,CAAM,EAC/B,GACF,EAAA,EAAA,KAAA,CAAC,EAAA,WAAD,CAAmB,OAAa,QAAe,kBAA/C,EACI,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAAC,EAAA,eAAD,CAAgB,QAAS,CAAQ,CAAA,GACjC,EAAA,EAAA,IAAA,CAAC,EAAA,gBAAD,CAAkB,CAAA,EACjB,GAAc,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,UAAW,EAAA,mBAAmB,CAAc,CAAI,CAAA,EAAI,KAC3E,GAAa,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAS,CAAA,EAAI,KAC1B,EAAW,KAAK,EAAU,IAAM,CAC7B,IAAM,EAAQ,EAAQ,EAAI,EAAQ,QAClC,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAEI,QAAS,EACT,OAAQ,EACR,KAAM,EACN,YAAa,EAChB,EALQ,CAKR,CAET,CAAC,CACQ,IAGjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,CAAS,WACvB,IAAU,IAAA,IAGP,EAAA,EAAA,IAAA,CAAC,EAAA,oBAAD,CAAqB,MAAM,OAAe,kBACrC,CACgB,CAAA,EAJrB,CAMH,CAAA,CAEb"}

package/dist/charts/RadarChart.js

@@ -1,11 +1,11 @@
 import { cn as e } from "../utils/cn.js";
-import { DEFAULT_CHART_COLORS as t } from "./palette.js";
+import { useChartColors as t } from "./use-chart-colors.js";
 import { toTooltipFormatter as n } from "./types.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Legend as a, PolarAngleAxis as o, PolarGrid as s, PolarRadiusAxis as c, Radar as l, RadarChart as u, ResponsiveContainer as d, Tooltip as f } from "recharts";
 //#region src/charts/RadarChart.tsx
-function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, width: v, showLegend: y = !0, showTooltip: b = !0, valueFormatter: x, className: S }) {
-	let C = /* @__PURE__ */ i(u, {
+function p({ data: p, index: m, categories: h, colors: g, height: _ = 300, width: v, showLegend: y = !0, showTooltip: b = !0, valueFormatter: x, className: S }) {
+	let C = t(g), w = /* @__PURE__ */ i(u, {
 		data: p,
 		width: v,
 		height: _,
@@ -16,7 +16,7 @@ function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, w
 			b ? /* @__PURE__ */ r(f, { formatter: n(x) }) : null,
 			y ? /* @__PURE__ */ r(a, {}) : null,
 			h.map((e, t) => {
-				let n = g[t % g.length];
+				let n = C[t % C.length];
 				return /* @__PURE__ */ r(l, {
 					dataKey: e,
 					stroke: n,
@@ -31,8 +31,8 @@ function p({ data: p, index: m, categories: h, colors: g = t, height: _ = 300, w
 		children: v === void 0 ? /* @__PURE__ */ r(d, {
 			width: "100%",
 			height: _,
-			children: C
-		}) : C
+			children: w
+		}) : w
 	});
 }
 //#endregion

package/dist/charts/RadarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadarChart.js","names":[],"sources":["../../src/charts/RadarChart.tsx"],"sourcesContent":["import {\n    Legend,\n    PolarAngleAxis,\n    PolarGrid,\n    PolarRadiusAxis,\n    RadarChart as RRadarChart,\n    Radar,\n    ResponsiveContainer,\n    Tooltip,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { DEFAULT_CHART_COLORS } from \"./palette\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * RadarChart — themed wrapper over recharts `RadarChart`.\n *\n * Plots one radar polygon per entry in `categories`, colored from `colors`\n * (cycling {@link DEFAULT_CHART_COLORS} by default). `index` drives the angle\n * axis. When `width` is provided the chart renders at that fixed size without a\n * ResponsiveContainer; otherwise it fills its parent.\n */\nexport function RadarChart({\n    data,\n    index,\n    categories,\n    colors = DEFAULT_CHART_COLORS,\n    height = 300,\n    width,\n    showLegend = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const chart = (\n        <RRadarChart data={data} width={width} height={height}>\n            <PolarGrid />\n            <PolarAngleAxis dataKey={index} />\n            <PolarRadiusAxis />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => {\n                const color = colors[i % colors.length];\n                return (\n                    <Radar\n                        key={category}\n                        dataKey={category}\n                        stroke={color}\n                        fill={color}\n                        fillOpacity={0.3}\n                    />\n                );\n            })}\n        </RRadarChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,EAAW,EACvB,SACA,UACA,eACA,YAAS,GACT,YAAS,KACT,UACA,gBAAa,IACb,iBAAc,IACd,mBACA,gBACoB;CACpB,IAAM,IACF,kBAAC,GAAD;EAAmB;EAAa;EAAe;YAA/C;GACI,kBAAC,GAAD,CAAY,CAAA;GACZ,kBAAC,GAAD,EAAgB,SAAS,EAAQ,CAAA;GACjC,kBAAC,GAAD,CAAkB,CAAA;GACjB,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC1B,EAAW,KAAK,GAAU,MAAM;IAC7B,IAAM,IAAQ,EAAO,IAAI,EAAO;IAChC,OACI,kBAAC,GAAD;KAEI,SAAS;KACT,QAAQ;KACR,MAAM;KACN,aAAa;IAChB,GALQ,CAKR;GAET,CAAC;EACQ;;CAGjB,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}
+{"version":3,"file":"RadarChart.js","names":[],"sources":["../../src/charts/RadarChart.tsx"],"sourcesContent":["import {\n    Legend,\n    PolarAngleAxis,\n    PolarGrid,\n    PolarRadiusAxis,\n    RadarChart as RRadarChart,\n    Radar,\n    ResponsiveContainer,\n    Tooltip,\n} from \"recharts\";\nimport { cn } from \"@/utils/cn\";\nimport { useChartColors } from \"./use-chart-colors\";\nimport { toTooltipFormatter } from \"./types\";\nimport type { CartesianChartProps } from \"./types\";\n\n/**\n * RadarChart — themed wrapper over recharts `RadarChart`.\n *\n * Plots one radar polygon per entry in `categories`, colored from `colors`\n * (cycling the `--tempest-chart-*` theme tokens by default). `index` drives the angle\n * axis. When `width` is provided the chart renders at that fixed size without a\n * ResponsiveContainer; otherwise it fills its parent.\n */\nexport function RadarChart({\n    data,\n    index,\n    categories,\n    colors,\n    height = 300,\n    width,\n    showLegend = true,\n    showTooltip = true,\n    valueFormatter,\n    className,\n}: CartesianChartProps) {\n    const palette = useChartColors(colors);\n    const chart = (\n        <RRadarChart data={data} width={width} height={height}>\n            <PolarGrid />\n            <PolarAngleAxis dataKey={index} />\n            <PolarRadiusAxis />\n            {showTooltip ? <Tooltip formatter={toTooltipFormatter(valueFormatter)} /> : null}\n            {showLegend ? <Legend /> : null}\n            {categories.map((category, i) => {\n                const color = palette[i % palette.length];\n                return (\n                    <Radar\n                        key={category}\n                        dataKey={category}\n                        stroke={color}\n                        fill={color}\n                        fillOpacity={0.3}\n                    />\n                );\n            })}\n        </RRadarChart>\n    );\n\n    return (\n        <div className={cn(className)}>\n            {width !== undefined ? (\n                chart\n            ) : (\n                <ResponsiveContainer width=\"100%\" height={height}>\n                    {chart}\n                </ResponsiveContainer>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,EAAW,EACvB,SACA,UACA,eACA,WACA,YAAS,KACT,UACA,gBAAa,IACb,iBAAc,IACd,mBACA,gBACoB;CACpB,IAAM,IAAU,EAAe,CAAM,GAC/B,IACF,kBAAC,GAAD;EAAmB;EAAa;EAAe;YAA/C;GACI,kBAAC,GAAD,CAAY,CAAA;GACZ,kBAAC,GAAD,EAAgB,SAAS,EAAQ,CAAA;GACjC,kBAAC,GAAD,CAAkB,CAAA;GACjB,IAAc,kBAAC,GAAD,EAAS,WAAW,EAAmB,CAAc,EAAI,CAAA,IAAI;GAC3E,IAAa,kBAAC,GAAD,CAAS,CAAA,IAAI;GAC1B,EAAW,KAAK,GAAU,MAAM;IAC7B,IAAM,IAAQ,EAAQ,IAAI,EAAQ;IAClC,OACI,kBAAC,GAAD;KAEI,SAAS;KACT,QAAQ;KACR,MAAM;KACN,aAAa;IAChB,GALQ,CAKR;GAET,CAAC;EACQ;;CAGjB,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;YACvB,MAAU,KAAA,IAGP,kBAAC,GAAD;GAAqB,OAAM;GAAe;aACrC;EACgB,CAAA,IAJrB;CAMH,CAAA;AAEb"}

package/dist/charts/palette.cjs

@@ -1,2 +1,2 @@
-var e=[`#2563eb`,`#16a34a`,`#f59e0b`,`#7c3aed`,`#ec4899`,`#06b6d4`];exports.DEFAULT_CHART_COLORS=e;
+var e=[`#2563eb`,`#16a34a`,`#f59e0b`,`#7c3aed`,`#ec4899`,`#06b6d4`],t=8;function n(t){if(typeof window>`u`||typeof document>`u`)return e;let n=t??document.documentElement;if(!n)return e;let r=window.getComputedStyle(n),i=[];for(let e=1;e<=8;e+=1){let t=r.getPropertyValue(`--tempest-chart-${e}`).trim();if(!t)break;i.push(t)}return i.length>0?i:e}function r(e,t,n=e===`grid`?`#e4e7ec`:`#667085`){if(typeof window>`u`||typeof document>`u`)return n;let r=t??document.documentElement;return r&&window.getComputedStyle(r).getPropertyValue(`--tempest-chart-${e}`).trim()||n}exports.CHART_COLOR_TOKEN_COUNT=t,exports.DEFAULT_CHART_COLORS=e,exports.resolveChartChrome=r,exports.resolveChartColors=n;
 //# sourceMappingURL=palette.cjs.map

package/dist/charts/palette.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"palette.cjs","names":[],"sources":["../../src/charts/palette.ts"],"sourcesContent":["/**\n * Default color palette for Tempest charts.\n *\n * A set of six visually distinct hex colors (blue, green, amber, violet, pink,\n * cyan) used to color chart series in cycle order. Exported so callers can\n * import and theme their own charts, or pass a custom `colors` array to any\n * chart component to override it.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n    \"#2563eb\", // blue\n    \"#16a34a\", // green\n    \"#f59e0b\", // amber\n    \"#7c3aed\", // violet\n    \"#ec4899\", // pink\n    \"#06b6d4\", // cyan\n];\n"],"mappings":"AAQA,IAAa,EAAiC,CAC1C,UACA,UACA,UACA,UACA,UACA,SACJ"}
+{"version":3,"file":"palette.cjs","names":[],"sources":["../../src/charts/palette.ts"],"sourcesContent":["/**\n * Series colors for Tempest charts, resolved from the theme tokens.\n *\n * Recharts sets colors as SVG presentation attributes (`fill=\"…\"`), where\n * `var(--token)` is **not** substituted — browsers only resolve custom properties\n * in CSS declarations. So the tokens are read from the computed style and handed\n * over as literal colors, which is what keeps a re-theme (and dark mode)\n * reflected in the charts.\n */\n\n/**\n * Fallback palette: six visually distinct hex colors (blue, green, amber,\n * violet, pink, cyan) in cycle order.\n *\n * Used when the `--tempest-chart-*` tokens cannot be read — no stylesheet\n * imported, a non-browser environment (tests, build scripts), or a host page that\n * dropped the tokens. Exported so callers can start from it and pass a tweaked\n * array to any chart's `colors` prop.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n    \"#2563eb\", // blue\n    \"#16a34a\", // green\n    \"#f59e0b\", // amber\n    \"#7c3aed\", // violet\n    \"#ec4899\", // pink\n    \"#06b6d4\", // cyan\n];\n\n/** How many `--tempest-chart-N` tokens the SDK ships. */\nexport const CHART_COLOR_TOKEN_COUNT = 8;\n\n/**\n * Read `--tempest-chart-1` … `--tempest-chart-8` into a color array.\n *\n * Stops at the first unset token, so an app that overrides only four series gets\n * exactly those four cycled instead of a half-themed tail. Returns\n * {@link DEFAULT_CHART_COLORS} when nothing is resolvable.\n *\n * @param element - Element to resolve the tokens against. Default `<html>`; pass\n *   a subtree root when a section carries a scoped theme.\n * @returns Literal color strings in cycle order.\n */\nexport function resolveChartColors(element?: Element | null): string[] {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n        return DEFAULT_CHART_COLORS;\n    }\n\n    const target = element ?? document.documentElement;\n    if (!target) return DEFAULT_CHART_COLORS;\n\n    const styles = window.getComputedStyle(target);\n    const resolved: string[] = [];\n\n    for (let index = 1; index <= CHART_COLOR_TOKEN_COUNT; index += 1) {\n        const value = styles.getPropertyValue(`--tempest-chart-${index}`).trim();\n        if (!value) break;\n        resolved.push(value);\n    }\n\n    return resolved.length > 0 ? resolved : DEFAULT_CHART_COLORS;\n}\n\n/**\n * Read one piece of chart chrome (`--tempest-chart-grid` / `--tempest-chart-axis`).\n *\n * @param part - Which chrome token to read.\n * @param element - Element to resolve against. Default `<html>`.\n * @param fallback - Value returned when the token is unset.\n * @returns The resolved color, or `fallback`.\n */\nexport function resolveChartChrome(\n    part: \"grid\" | \"axis\",\n    element?: Element | null,\n    fallback = part === \"grid\" ? \"#e4e7ec\" : \"#667085\",\n): string {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return fallback;\n    const target = element ?? document.documentElement;\n    if (!target) return fallback;\n    const value = window\n        .getComputedStyle(target)\n        .getPropertyValue(`--tempest-chart-${part}`)\n        .trim();\n    return value || fallback;\n}\n"],"mappings":"AAmBA,IAAa,EAAiC,CAC1C,UACA,UACA,UACA,UACA,UACA,SACJ,EAGa,EAA0B,EAavC,SAAgB,EAAmB,EAAoC,CACnE,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IACrD,OAAO,EAGX,IAAM,EAAS,GAAW,SAAS,gBACnC,GAAI,CAAC,EAAQ,OAAO,EAEpB,IAAM,EAAS,OAAO,iBAAiB,CAAM,EACvC,EAAqB,CAAC,EAE5B,IAAK,IAAI,EAAQ,EAAG,GAAA,EAAkC,GAAS,EAAG,CAC9D,IAAM,EAAQ,EAAO,iBAAiB,mBAAmB,GAAO,CAAC,CAAC,KAAK,EACvE,GAAI,CAAC,EAAO,MACZ,EAAS,KAAK,CAAK,CACvB,CAEA,OAAO,EAAS,OAAS,EAAI,EAAW,CAC5C,CAUA,SAAgB,EACZ,EACA,EACA,EAAW,IAAS,OAAS,UAAY,UACnC,CACN,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAAa,OAAO,EAC7E,IAAM,EAAS,GAAW,SAAS,gBAMnC,OALK,GACS,OACT,iBAAiB,CAAM,CAAC,CACxB,iBAAiB,mBAAmB,GAAM,CAAC,CAC3C,KACE,GALa,CAMxB"}

package/dist/charts/palette.js

@@ -6,8 +6,25 @@ var e = [
 	"#7c3aed",
 	"#ec4899",
 	"#06b6d4"
-];
+], t = 8;
+function n(t) {
+	if (typeof window > "u" || typeof document > "u") return e;
+	let n = t ?? document.documentElement;
+	if (!n) return e;
+	let r = window.getComputedStyle(n), i = [];
+	for (let e = 1; e <= 8; e += 1) {
+		let t = r.getPropertyValue(`--tempest-chart-${e}`).trim();
+		if (!t) break;
+		i.push(t);
+	}
+	return i.length > 0 ? i : e;
+}
+function r(e, t, n = e === "grid" ? "#e4e7ec" : "#667085") {
+	if (typeof window > "u" || typeof document > "u") return n;
+	let r = t ?? document.documentElement;
+	return r && window.getComputedStyle(r).getPropertyValue(`--tempest-chart-${e}`).trim() || n;
+}
 //#endregion
-export { e as DEFAULT_CHART_COLORS };
+export { t as CHART_COLOR_TOKEN_COUNT, e as DEFAULT_CHART_COLORS, r as resolveChartChrome, n as resolveChartColors };
 
 //# sourceMappingURL=palette.js.map

package/dist/charts/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","names":[],"sources":["../../src/charts/palette.ts"],"sourcesContent":["/**\n * Default color palette for Tempest charts.\n *\n * A set of six visually distinct hex colors (blue, green, amber, violet, pink,\n * cyan) used to color chart series in cycle order. Exported so callers can\n * import and theme their own charts, or pass a custom `colors` array to any\n * chart component to override it.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n    \"#2563eb\", // blue\n    \"#16a34a\", // green\n    \"#f59e0b\", // amber\n    \"#7c3aed\", // violet\n    \"#ec4899\", // pink\n    \"#06b6d4\", // cyan\n];\n"],"mappings":";AAQA,IAAa,IAAiC;CAC1C;CACA;CACA;CACA;CACA;CACA;AACJ"}
+{"version":3,"file":"palette.js","names":[],"sources":["../../src/charts/palette.ts"],"sourcesContent":["/**\n * Series colors for Tempest charts, resolved from the theme tokens.\n *\n * Recharts sets colors as SVG presentation attributes (`fill=\"…\"`), where\n * `var(--token)` is **not** substituted — browsers only resolve custom properties\n * in CSS declarations. So the tokens are read from the computed style and handed\n * over as literal colors, which is what keeps a re-theme (and dark mode)\n * reflected in the charts.\n */\n\n/**\n * Fallback palette: six visually distinct hex colors (blue, green, amber,\n * violet, pink, cyan) in cycle order.\n *\n * Used when the `--tempest-chart-*` tokens cannot be read — no stylesheet\n * imported, a non-browser environment (tests, build scripts), or a host page that\n * dropped the tokens. Exported so callers can start from it and pass a tweaked\n * array to any chart's `colors` prop.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n    \"#2563eb\", // blue\n    \"#16a34a\", // green\n    \"#f59e0b\", // amber\n    \"#7c3aed\", // violet\n    \"#ec4899\", // pink\n    \"#06b6d4\", // cyan\n];\n\n/** How many `--tempest-chart-N` tokens the SDK ships. */\nexport const CHART_COLOR_TOKEN_COUNT = 8;\n\n/**\n * Read `--tempest-chart-1` … `--tempest-chart-8` into a color array.\n *\n * Stops at the first unset token, so an app that overrides only four series gets\n * exactly those four cycled instead of a half-themed tail. Returns\n * {@link DEFAULT_CHART_COLORS} when nothing is resolvable.\n *\n * @param element - Element to resolve the tokens against. Default `<html>`; pass\n *   a subtree root when a section carries a scoped theme.\n * @returns Literal color strings in cycle order.\n */\nexport function resolveChartColors(element?: Element | null): string[] {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n        return DEFAULT_CHART_COLORS;\n    }\n\n    const target = element ?? document.documentElement;\n    if (!target) return DEFAULT_CHART_COLORS;\n\n    const styles = window.getComputedStyle(target);\n    const resolved: string[] = [];\n\n    for (let index = 1; index <= CHART_COLOR_TOKEN_COUNT; index += 1) {\n        const value = styles.getPropertyValue(`--tempest-chart-${index}`).trim();\n        if (!value) break;\n        resolved.push(value);\n    }\n\n    return resolved.length > 0 ? resolved : DEFAULT_CHART_COLORS;\n}\n\n/**\n * Read one piece of chart chrome (`--tempest-chart-grid` / `--tempest-chart-axis`).\n *\n * @param part - Which chrome token to read.\n * @param element - Element to resolve against. Default `<html>`.\n * @param fallback - Value returned when the token is unset.\n * @returns The resolved color, or `fallback`.\n */\nexport function resolveChartChrome(\n    part: \"grid\" | \"axis\",\n    element?: Element | null,\n    fallback = part === \"grid\" ? \"#e4e7ec\" : \"#667085\",\n): string {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return fallback;\n    const target = element ?? document.documentElement;\n    if (!target) return fallback;\n    const value = window\n        .getComputedStyle(target)\n        .getPropertyValue(`--tempest-chart-${part}`)\n        .trim();\n    return value || fallback;\n}\n"],"mappings":";AAmBA,IAAa,IAAiC;CAC1C;CACA;CACA;CACA;CACA;CACA;AACJ,GAGa,IAA0B;AAavC,SAAgB,EAAmB,GAAoC;CACnE,IAAI,OAAO,SAAW,OAAe,OAAO,WAAa,KACrD,OAAO;CAGX,IAAM,IAAS,KAAW,SAAS;CACnC,IAAI,CAAC,GAAQ,OAAO;CAEpB,IAAM,IAAS,OAAO,iBAAiB,CAAM,GACvC,IAAqB,CAAC;CAE5B,KAAK,IAAI,IAAQ,GAAG,KAAA,GAAkC,KAAS,GAAG;EAC9D,IAAM,IAAQ,EAAO,iBAAiB,mBAAmB,GAAO,CAAC,CAAC,KAAK;EACvE,IAAI,CAAC,GAAO;EACZ,EAAS,KAAK,CAAK;CACvB;CAEA,OAAO,EAAS,SAAS,IAAI,IAAW;AAC5C;AAUA,SAAgB,EACZ,GACA,GACA,IAAW,MAAS,SAAS,YAAY,WACnC;CACN,IAAI,OAAO,SAAW,OAAe,OAAO,WAAa,KAAa,OAAO;CAC7E,IAAM,IAAS,KAAW,SAAS;CAMnC,OALK,KACS,OACT,iBAAiB,CAAM,CAAC,CACxB,iBAAiB,mBAAmB,GAAM,CAAC,CAC3C,KACE,KALa;AAMxB"}

package/dist/charts/use-chart-colors.cjs

@@ -0,0 +1,2 @@
+const e=require("./palette.cjs");let t=require("react");function n(n,r){let[i,a]=(0,t.useState)(()=>n||e.resolveChartColors(r));return(0,t.useEffect)(()=>{if(n||typeof window>`u`||typeof MutationObserver>`u`)return;let t=r??document.documentElement;if(!t)return;let i=()=>a(e.resolveChartColors(t));i();let o=new Set([t]),s=t.ownerDocument?.documentElement;s&&o.add(s);let c=new MutationObserver(i);for(let e of o)c.observe(e,{attributes:!0,attributeFilter:[`data-tempest-theme`,`class`,`style`]});return()=>c.disconnect()},[n,r]),n??i}exports.useChartColors=n;
+//# sourceMappingURL=use-chart-colors.cjs.map

package/dist/charts/use-chart-colors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-colors.cjs","names":[],"sources":["../../src/charts/use-chart-colors.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { resolveChartColors } from \"./palette\";\n\n/**\n * Theme-aware series colors for a chart.\n *\n * Resolves the `--tempest-chart-*` tokens on mount and again whenever the theme\n * attribute flips, so switching to dark re-colors the series instead of leaving\n * light-theme colors on a dark canvas. Passing `explicit` short-circuits the\n * whole thing — an explicit `colors` prop always wins and no observer is set up.\n *\n * @param explicit - Colors passed by the caller. When present, returned as-is.\n * @param element - Element to resolve tokens against. Default `<html>`.\n * @returns Colors in cycle order.\n *\n * @example\n * ```tsx\n * function Sales({ data }: { data: ChartDatum[] }) {\n *   const colors = useChartColors();\n *   return <BarChart data={data} colors={colors} />;\n * }\n * ```\n */\nexport function useChartColors(explicit?: string[], element?: Element | null): string[] {\n    const [resolved, setResolved] = useState<string[]>(() =>\n        explicit ? explicit : resolveChartColors(element),\n    );\n\n    useEffect(() => {\n        if (explicit) return;\n        if (typeof window === \"undefined\" || typeof MutationObserver === \"undefined\") return;\n\n        const target = element ?? document.documentElement;\n        if (!target) return;\n\n        const sync = (): void => setResolved(resolveChartColors(target));\n        sync();\n\n        const roots = new Set<Element>([target]);\n        const documentRoot = target.ownerDocument?.documentElement;\n        if (documentRoot) roots.add(documentRoot);\n\n        const observer = new MutationObserver(sync);\n        for (const root of roots) {\n            observer.observe(root, {\n                attributes: true,\n                attributeFilter: [\"data-tempest-theme\", \"class\", \"style\"],\n            });\n        }\n\n        return () => observer.disconnect();\n    }, [explicit, element]);\n\n    return explicit ?? resolved;\n}\n"],"mappings":"wDAwBA,SAAgB,EAAe,EAAqB,EAAoC,CACpF,GAAM,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,KACb,GAAsB,EAAA,mBAAmB,CAAO,CACpD,EA2BA,OAzBA,EAAA,EAAA,UAAA,KAAgB,CAEZ,GADI,GACA,OAAO,OAAW,KAAe,OAAO,iBAAqB,IAAa,OAE9E,IAAM,EAAS,GAAW,SAAS,gBACnC,GAAI,CAAC,EAAQ,OAEb,IAAM,MAAmB,EAAY,EAAA,mBAAmB,CAAM,CAAC,EAC/D,EAAK,EAEL,IAAM,EAAQ,IAAI,IAAa,CAAC,CAAM,CAAC,EACjC,EAAe,EAAO,eAAe,gBACvC,GAAc,EAAM,IAAI,CAAY,EAExC,IAAM,EAAW,IAAI,iBAAiB,CAAI,EAC1C,IAAK,IAAM,KAAQ,EACf,EAAS,QAAQ,EAAM,CACnB,WAAY,GACZ,gBAAiB,CAAC,qBAAsB,QAAS,OAAO,CAC5D,CAAC,EAGL,UAAa,EAAS,WAAW,CACrC,EAAG,CAAC,EAAU,CAAO,CAAC,EAEf,GAAY,CACvB"}

package/dist/charts/use-chart-colors.js

@@ -0,0 +1,29 @@
+import { resolveChartColors as e } from "./palette.js";
+import { useEffect as t, useState as n } from "react";
+//#region src/charts/use-chart-colors.ts
+function r(r, i) {
+	let [a, o] = n(() => r || e(i));
+	return t(() => {
+		if (r || typeof window > "u" || typeof MutationObserver > "u") return;
+		let t = i ?? document.documentElement;
+		if (!t) return;
+		let n = () => o(e(t));
+		n();
+		let a = /* @__PURE__ */ new Set([t]), s = t.ownerDocument?.documentElement;
+		s && a.add(s);
+		let c = new MutationObserver(n);
+		for (let e of a) c.observe(e, {
+			attributes: !0,
+			attributeFilter: [
+				"data-tempest-theme",
+				"class",
+				"style"
+			]
+		});
+		return () => c.disconnect();
+	}, [r, i]), r ?? a;
+}
+//#endregion
+export { r as useChartColors };
+
+//# sourceMappingURL=use-chart-colors.js.map

package/dist/charts/use-chart-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-colors.js","names":[],"sources":["../../src/charts/use-chart-colors.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { resolveChartColors } from \"./palette\";\n\n/**\n * Theme-aware series colors for a chart.\n *\n * Resolves the `--tempest-chart-*` tokens on mount and again whenever the theme\n * attribute flips, so switching to dark re-colors the series instead of leaving\n * light-theme colors on a dark canvas. Passing `explicit` short-circuits the\n * whole thing — an explicit `colors` prop always wins and no observer is set up.\n *\n * @param explicit - Colors passed by the caller. When present, returned as-is.\n * @param element - Element to resolve tokens against. Default `<html>`.\n * @returns Colors in cycle order.\n *\n * @example\n * ```tsx\n * function Sales({ data }: { data: ChartDatum[] }) {\n *   const colors = useChartColors();\n *   return <BarChart data={data} colors={colors} />;\n * }\n * ```\n */\nexport function useChartColors(explicit?: string[], element?: Element | null): string[] {\n    const [resolved, setResolved] = useState<string[]>(() =>\n        explicit ? explicit : resolveChartColors(element),\n    );\n\n    useEffect(() => {\n        if (explicit) return;\n        if (typeof window === \"undefined\" || typeof MutationObserver === \"undefined\") return;\n\n        const target = element ?? document.documentElement;\n        if (!target) return;\n\n        const sync = (): void => setResolved(resolveChartColors(target));\n        sync();\n\n        const roots = new Set<Element>([target]);\n        const documentRoot = target.ownerDocument?.documentElement;\n        if (documentRoot) roots.add(documentRoot);\n\n        const observer = new MutationObserver(sync);\n        for (const root of roots) {\n            observer.observe(root, {\n                attributes: true,\n                attributeFilter: [\"data-tempest-theme\", \"class\", \"style\"],\n            });\n        }\n\n        return () => observer.disconnect();\n    }, [explicit, element]);\n\n    return explicit ?? resolved;\n}\n"],"mappings":";;;AAwBA,SAAgB,EAAe,GAAqB,GAAoC;CACpF,IAAM,CAAC,GAAU,KAAe,QAC5B,KAAsB,EAAmB,CAAO,CACpD;CA2BA,OAzBA,QAAgB;EAEZ,IADI,KACA,OAAO,SAAW,OAAe,OAAO,mBAAqB,KAAa;EAE9E,IAAM,IAAS,KAAW,SAAS;EACnC,IAAI,CAAC,GAAQ;EAEb,IAAM,UAAmB,EAAY,EAAmB,CAAM,CAAC;EAC/D,EAAK;EAEL,IAAM,oBAAQ,IAAI,IAAa,CAAC,CAAM,CAAC,GACjC,IAAe,EAAO,eAAe;EAC3C,AAAI,KAAc,EAAM,IAAI,CAAY;EAExC,IAAM,IAAW,IAAI,iBAAiB,CAAI;EAC1C,KAAK,IAAM,KAAQ,GACf,EAAS,QAAQ,GAAM;GACnB,YAAY;GACZ,iBAAiB;IAAC;IAAsB;IAAS;GAAO;EAC5D,CAAC;EAGL,aAAa,EAAS,WAAW;CACrC,GAAG,CAAC,GAAU,CAAO,CAAC,GAEf,KAAY;AACvB"}

package/dist/charts.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./charts/palette.cjs"),t=require("./charts/AreaChart.cjs"),n=require("./charts/BarChart.cjs"),r=require("./charts/LineChart.cjs"),i=require("./charts/PieChart.cjs"),a=require("./charts/RadarChart.cjs");exports.AreaChart=t.AreaChart,exports.BarChart=n.BarChart,exports.DEFAULT_CHART_COLORS=e.DEFAULT_CHART_COLORS,exports.LineChart=r.LineChart,exports.PieChart=i.PieChart,exports.RadarChart=a.RadarChart;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./charts/palette.cjs"),t=require("./charts/use-chart-colors.cjs"),n=require("./charts/AreaChart.cjs"),r=require("./charts/BarChart.cjs"),i=require("./charts/LineChart.cjs"),a=require("./charts/PieChart.cjs"),o=require("./charts/RadarChart.cjs");exports.AreaChart=n.AreaChart,exports.BarChart=r.BarChart,exports.CHART_COLOR_TOKEN_COUNT=e.CHART_COLOR_TOKEN_COUNT,exports.DEFAULT_CHART_COLORS=e.DEFAULT_CHART_COLORS,exports.LineChart=i.LineChart,exports.PieChart=a.PieChart,exports.RadarChart=o.RadarChart,exports.resolveChartChrome=e.resolveChartChrome,exports.resolveChartColors=e.resolveChartColors,exports.useChartColors=t.useChartColors;