tempest-react-sdk 0.24.0 → 0.26.0

package/bin/tempest.mjs

@@ -3,7 +3,7 @@
 //
 //   tempest doctor          health-check the current project (à la flutter doctor)
 //   tempest lint [paths…]    run ESLint (report only)
-//   tempest fix [paths…]     ESLint --fix (sort imports, drop unused, tidy whitespace) + Prettier
+//   tempest fix [paths…]     alias imports (../ → @/) + ESLint --fix + Prettier
 //   tempest format [paths…]  Prettier --write
 //   tempest --help | --version
 import { spawnSync } from "node:child_process";
@@ -11,6 +11,10 @@ import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { mkdir, writeFile } from "node:fs/promises";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { aliasImports } from "./lib/alias/index.mjs";
+import { loadTypeScript } from "./lib/alias/typescript.mjs";
+import { readTsconfig } from "./lib/alias/tsconfig.mjs";
+import { generateRegistry, loadIconTables } from "./lib/icons/generate.mjs";
 import { generate } from "./lib/openapi/generate.mjs";
 import { loadSpec } from "./lib/openapi/load.mjs";
 
@@ -414,10 +418,10 @@ function doctor() {
     }
 
     // ── TypeScript ────────────────────────────────────────────────────────────
-    const tsc = readJSON(join(ROOT, "tsconfig.json"));
+    const tsc = readTsconfig({ root: ROOT, ts: loadTypeScript(ROOT) });
     if (tsc) {
         checks.push(["section", "TypeScript"]);
-        const co = tsc.compilerOptions ?? {};
+        const co = tsc.compilerOptions;
         checks.push(
             co.paths?.["@/*"]
                 ? ["ok", 'tsconfig "@/*" alias']
@@ -625,12 +629,93 @@ function requireBin(name) {
     return bin;
 }
 
-function lint(paths) {
-    return run(requireBin("eslint"), paths.length ? paths : ["."]);
+/**
+ * Split argv into flags and positional paths.
+ *
+ * Needed because these commands used to hand `rest` straight through as their
+ * path list, so `tempest lint --max-warnings 0` counted the flag as a path and
+ * ESLint ran with a flag but no pattern. Flags are kept in order for forwarding.
+ *
+ * @param {string[]} args - The argv tail for the command.
+ * @returns {{ flags: string[], paths: string[] }}
+ */
+function splitArgs(args) {
+    const flags = [];
+    const paths = [];
+    for (const arg of args) (arg.startsWith("-") ? flags : paths).push(arg);
+    return { flags, paths };
+}
+
+function lint(args) {
+    const { flags, paths } = splitArgs(args);
+    return run(requireBin("eslint"), [...(paths.length ? paths : ["."]), ...flags]);
+}
+
+/** Flags `fix` owns itself; anything else is rejected rather than forwarded. */
+const FIX_FLAGS = new Set(["--no-alias", "--dry-run"]);
+
+/**
+ * Print the alias pass result.
+ *
+ * @param {object} result - Return value of `aliasImports`.
+ * @param {boolean} dryRun - Whether the pass wrote anything.
+ * @returns {void}
+ */
+function reportAlias(result, dryRun) {
+    if (result.status === "no-typescript") {
+        console.log(
+            `${c.yellow}! typescript not installed — skipping alias pass${c.reset} ${c.dim}(npm i -D typescript)${c.reset}`,
+        );
+        return;
+    }
+    if (result.status === "no-alias") {
+        console.log(
+            `${c.yellow}! no path alias found — skipping alias pass${c.reset} ${c.dim}add "paths": { "@/*": ["./src/*"] } to tsconfig.json${c.reset}`,
+        );
+        return;
+    }
+    for (const file of result.files) {
+        console.log(`  ${file.path} ${c.dim}${file.changes.length}${c.reset}`);
+        if (dryRun) {
+            for (const ch of file.changes) {
+                console.log(`    ${c.dim}${ch.line}:${c.reset} "${ch.from}" → "${ch.to}"`);
+            }
+        }
+    }
+    for (const err of result.errors) {
+        console.log(`  ${c.red}✗ ${err.path}${c.reset} ${c.dim}${err.message}${c.reset}`);
+    }
+    if (!result.total) {
+        console.log(`  ${c.dim}nothing to convert${c.reset}`);
+        return;
+    }
+    const verb = dryRun ? "would convert" : "converted";
+    console.log(
+        `  ${c.green}✓${c.reset} ${verb} ${result.total} import(s) in ${result.files.length} file(s)`,
+    );
 }
 
-function fix(paths) {
+function fix(args) {
+    const { flags, paths } = splitArgs(args);
+    const unknown = flags.filter((f) => !FIX_FLAGS.has(f));
+    if (unknown.length) {
+        console.error(
+            `${c.red}✗ Unknown flag for fix: ${unknown.join(", ")}${c.reset} — supported: ${[...FIX_FLAGS].join(", ")}`,
+        );
+        return 1;
+    }
     const targets = paths.length ? paths : ["."];
+    const dryRun = flags.includes("--dry-run");
+
+    let aliasStatus = 0;
+    if (!flags.includes("--no-alias")) {
+        console.log(`${c.dim}→ alias imports (../ → @/)${dryRun ? " [dry-run]" : ""}${c.reset}`);
+        const result = aliasImports({ root: ROOT, targets, dryRun });
+        reportAlias(result, dryRun);
+        aliasStatus = result.status === "error" ? 1 : 0;
+    }
+    if (dryRun) return aliasStatus;
+
     console.log(`${c.dim}→ eslint --fix (sort imports · drop unused · tidy whitespace)${c.reset}`);
     const eslintStatus = run(requireBin("eslint"), [...targets, "--fix"]);
     const prettier = localBin("prettier");
@@ -641,11 +726,12 @@ function fix(paths) {
     } else {
         console.log(`${c.yellow}! prettier not installed — skipping format pass${c.reset}`);
     }
-    return eslintStatus || prettierStatus;
+    return aliasStatus || eslintStatus || prettierStatus;
 }
 
-function format(paths) {
-    return run(requireBin("prettier"), ["--write", ...(paths.length ? paths : ["."])]);
+function format(args) {
+    const { flags, paths } = splitArgs(args);
+    return run(requireBin("prettier"), ["--write", ...(paths.length ? paths : ["."]), ...flags]);
 }
 
 // -------------------------------------------------------------- gen api ----
@@ -701,15 +787,67 @@ async function genApi(args) {
     return 0;
 }
 
+// ------------------------------------------------------------ gen icons ----
+
+/**
+ * `tempest gen icons [--out src/icons.generated.ts] [--dir src]` — write a static
+ * icon registry from the slugs the project's source mentions.
+ *
+ * The `tempestIcons()` Vite plugin does the same thing as a virtual module and
+ * needs no file; this exists for a project that is not on Vite, or that prefers a
+ * registry it can read and commit.
+ */
+async function genIcons(args) {
+    const outRel = parseOut(args, "src/icons.generated.ts");
+    const dirIndex = args.indexOf("--dir");
+    const dirRel = dirIndex >= 0 && args[dirIndex + 1] ? args[dirIndex + 1] : "src";
+    const dir = resolve(ROOT, dirRel);
+
+    let tables;
+    try {
+        tables = await loadIconTables(SELF_DIR);
+    } catch {
+        console.error(
+            `${c.red}✗ Could not read the icon tables from the installed SDK.${c.reset} Is tempest-react-sdk installed and built?`,
+        );
+        return 1;
+    }
+
+    console.log(`${c.dim}→ scanning ${dirRel}${c.reset}`);
+    const { source, slugs, files } = await generateRegistry({
+        dir,
+        known: tables.known,
+        aliases: tables.aliases,
+    });
+
+    const dest = resolve(ROOT, outRel);
+    await mkdir(dirname(dest), { recursive: true });
+    await writeFile(dest, source);
+
+    console.log(
+        `\n${c.green}✓ ${slugs.length} icon(s)${c.reset} from ${files} file(s) → ${c.bold}${outRel}${c.reset}`,
+    );
+    const prettier = localBin("prettier");
+    if (prettier) run(prettier, ["--write", outRel]);
+    console.log(`\n${c.dim}Wire it up:${c.reset}`);
+    console.log(`  import { IconProvider } from "tempest-react-sdk/icons";`);
+    console.log(`  import { icons } from "@/icons.generated";`);
+    console.log(`  <IconProvider registry={icons}>…</IconProvider>`);
+    return 0;
+}
+
+const GEN_TARGETS = { api: genApi, icons: genIcons };
+
 function gen(args) {
     const what = args[0];
-    if (what !== "api") {
+    const target = GEN_TARGETS[what];
+    if (!target) {
         console.error(
-            `${c.red}✗ Unknown gen target: ${what ?? "(none)"}${c.reset} — only \`gen api\` is supported.`,
+            `${c.red}✗ Unknown gen target: ${what ?? "(none)"}${c.reset} — supported: ${Object.keys(GEN_TARGETS).join(", ")}.`,
         );
         return 1;
     }
-    return genApi(args.slice(1));
+    return target(args.slice(1));
 }
 
 // ------------------------------------------------------------------ main ----
@@ -724,10 +862,17 @@ ${c.bold}Usage${c.reset}
 ${c.bold}Commands${c.reset}
   ${c.bold}doctor${c.reset}            Health-check the current project
   ${c.bold}lint${c.reset} [paths]      Run ESLint (report only)
-  ${c.bold}fix${c.reset} [paths]       ESLint --fix (sort imports, remove unused, tidy whitespace) + Prettier
+  ${c.bold}fix${c.reset} [paths]       Alias imports (../ → @/) + ESLint --fix (sort imports, remove
+                    unused, tidy whitespace) + Prettier
   ${c.bold}format${c.reset} [paths]    Prettier --write
   ${c.bold}gen api${c.reset} <src>    Generate Zod schemas + types + service classes from an OpenAPI spec
                     (e.g. tempest gen api http://127.0.0.1:8000/openapi.json --out src/api)
+  ${c.bold}gen icons${c.reset}         Write a static icon registry from the slugs your source uses
+                    (e.g. tempest gen icons --out src/icons.generated.ts --dir src)
+
+${c.bold}fix options${c.reset}
+  --dry-run         List the imports that would be rewritten; write nothing
+  --no-alias        Skip the alias pass (ESLint + Prettier only)
 
 ${c.bold}Options${c.reset}
   -h, --help        Show this help

package/dist/audio/use-audio.cjs

@@ -1,2 +1,2 @@
-const e=require("./audio-player.cjs");let t=require("react");function n(){let n=(0,t.useRef)(null),[r,i]=(0,t.useState)(!1);return n.current||=e.createAudioPlayer(),(0,t.useEffect)(()=>()=>{n.current?.stop()},[]),{play:(0,t.useCallback)(async(e,t)=>{await n.current.play(e,t)&&i(!0)},[]),stop:(0,t.useCallback)(()=>{n.current?.stop()},[]),unlocked:r}}exports.useAudio=n;
+const e=require("./audio-player.cjs");let t=require("react");function n(){let[n]=(0,t.useState)(()=>e.createAudioPlayer()),[r,i]=(0,t.useState)(!1);return(0,t.useEffect)(()=>()=>{n.stop()},[n]),{play:(0,t.useCallback)(async(e,t)=>{await n.play(e,t)&&i(!0)},[n]),stop:(0,t.useCallback)(()=>{n.stop()},[n]),unlocked:r}}exports.useAudio=n;
 //# sourceMappingURL=use-audio.cjs.map

package/dist/audio/use-audio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-audio.cjs","names":[],"sources":["../../src/audio/use-audio.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createAudioPlayer, type AudioPlayer, type PlayAudioOptions } from \"./audio-player\";\n\nexport interface UseAudioResult {\n    /** Play `src` on the hook's private player. */\n    play: (src: string, options?: PlayAudioOptions) => Promise<void>;\n    /** Stop the current clip. */\n    stop: () => void;\n    /**\n     * Whether the browser's autoplay policy has been satisfied. Becomes\n     * `true` after the first successful `play()`.\n     */\n    unlocked: boolean;\n}\n\n/**\n * Hook-managed audio player. Each component instance gets its own\n * {@link AudioPlayer}, so unmounting cleanly stops playback. Useful for\n * notification chimes, UI feedback sounds, and per-component soundtracks.\n */\nexport function useAudio(): UseAudioResult {\n    const playerRef = useRef<AudioPlayer | null>(null);\n    const [unlocked, setUnlocked] = useState<boolean>(false);\n\n    if (!playerRef.current) {\n        playerRef.current = createAudioPlayer();\n    }\n\n    useEffect(() => {\n        return () => {\n            playerRef.current?.stop();\n        };\n    }, []);\n\n    const play = useCallback(async (src: string, options?: PlayAudioOptions): Promise<void> => {\n        const result = await playerRef.current!.play(src, options);\n        if (result) setUnlocked(true);\n    }, []);\n\n    const stop = useCallback((): void => {\n        playerRef.current?.stop();\n    }, []);\n\n    return { play, stop, unlocked };\n}\n"],"mappings":"6DAoBA,SAAgB,GAA2B,CACvC,IAAM,GAAA,EAAA,EAAA,OAAA,CAAuC,IAAI,EAC3C,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAiC,EAAK,EAqBvD,MAnBA,CACI,EAAU,UAAU,EAAA,kBAAkB,GAG1C,EAAA,EAAA,UAAA,SACiB,CACT,EAAU,SAAS,KAAK,CAC5B,EACD,CAAC,CAAC,EAWE,CAAE,MAAA,EAAA,EAAA,YAAA,CATgB,MAAO,EAAa,IAA8C,CAEnF,MADiB,EAAU,QAAS,KAAK,EAAK,CAAO,GAC7C,EAAY,EAAI,CAChC,EAAG,CAAC,CAMK,EAAM,MAAA,EAAA,EAAA,YAAA,KAJsB,CACjC,EAAU,SAAS,KAAK,CAC5B,EAAG,CAAC,CAEW,EAAM,UAAS,CAClC"}
+{"version":3,"file":"use-audio.cjs","names":[],"sources":["../../src/audio/use-audio.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { createAudioPlayer, type AudioPlayer, type PlayAudioOptions } from \"./audio-player\";\n\nexport interface UseAudioResult {\n    /** Play `src` on the hook's private player. */\n    play: (src: string, options?: PlayAudioOptions) => Promise<void>;\n    /** Stop the current clip. */\n    stop: () => void;\n    /**\n     * Whether the browser's autoplay policy has been satisfied. Becomes\n     * `true` after the first successful `play()`.\n     */\n    unlocked: boolean;\n}\n\n/**\n * The player lives in a state initializer, not in a lazily-written ref: the\n * initializer runs exactly once and is not a side effect during render, which is\n * what the ref version was. The player identity never changes, so state holds it\n * fine and the value is non-null from the first render.\n *\n * Hook-managed audio player. Each component instance gets its own\n * {@link AudioPlayer}, so unmounting cleanly stops playback. Useful for\n * notification chimes, UI feedback sounds, and per-component soundtracks.\n */\nexport function useAudio(): UseAudioResult {\n    const [player] = useState<AudioPlayer>(() => createAudioPlayer());\n    const [unlocked, setUnlocked] = useState<boolean>(false);\n\n    useEffect(() => {\n        return () => {\n            player.stop();\n        };\n    }, [player]);\n\n    const play = useCallback(\n        async (src: string, options?: PlayAudioOptions): Promise<void> => {\n            const result = await player.play(src, options);\n            if (result) setUnlocked(true);\n        },\n        [player],\n    );\n\n    const stop = useCallback((): void => {\n        player.stop();\n    }, [player]);\n\n    return { play, stop, unlocked };\n}\n"],"mappings":"6DAyBA,SAAgB,GAA2B,CACvC,GAAM,CAAC,IAAA,EAAA,EAAA,SAAA,KAAsC,EAAA,kBAAkB,CAAC,EAC1D,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAiC,EAAK,EAoBvD,OAlBA,EAAA,EAAA,UAAA,SACiB,CACT,EAAO,KAAK,CAChB,EACD,CAAC,CAAM,CAAC,EAcJ,CAAE,MAAA,EAAA,EAAA,YAAA,CAXL,MAAO,EAAa,IAA8C,CAE1D,MADiB,EAAO,KAAK,EAAK,CAAO,GACjC,EAAY,EAAI,CAChC,EACA,CAAC,CAAM,CAOF,EAAM,MAAA,EAAA,EAAA,YAAA,KAJsB,CACjC,EAAO,KAAK,CAChB,EAAG,CAAC,CAAM,CAEK,EAAM,UAAS,CAClC"}

package/dist/audio/use-audio.js

@@ -1,21 +1,21 @@
 import { createAudioPlayer as e } from "./audio-player.js";
-import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { useCallback as t, useEffect as n, useState as r } from "react";
 //#region src/audio/use-audio.ts
-function a() {
-	let a = r(null), [o, s] = i(!1);
-	return a.current ||= e(), n(() => () => {
-		a.current?.stop();
-	}, []), {
+function i() {
+	let [i] = r(() => e()), [a, o] = r(!1);
+	return n(() => () => {
+		i.stop();
+	}, [i]), {
 		play: t(async (e, t) => {
-			await a.current.play(e, t) && s(!0);
-		}, []),
+			await i.play(e, t) && o(!0);
+		}, [i]),
 		stop: t(() => {
-			a.current?.stop();
-		}, []),
-		unlocked: o
+			i.stop();
+		}, [i]),
+		unlocked: a
 	};
 }
 //#endregion
-export { a as useAudio };
+export { i as useAudio };
 
 //# sourceMappingURL=use-audio.js.map

package/dist/audio/use-audio.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-audio.js","names":[],"sources":["../../src/audio/use-audio.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createAudioPlayer, type AudioPlayer, type PlayAudioOptions } from \"./audio-player\";\n\nexport interface UseAudioResult {\n    /** Play `src` on the hook's private player. */\n    play: (src: string, options?: PlayAudioOptions) => Promise<void>;\n    /** Stop the current clip. */\n    stop: () => void;\n    /**\n     * Whether the browser's autoplay policy has been satisfied. Becomes\n     * `true` after the first successful `play()`.\n     */\n    unlocked: boolean;\n}\n\n/**\n * Hook-managed audio player. Each component instance gets its own\n * {@link AudioPlayer}, so unmounting cleanly stops playback. Useful for\n * notification chimes, UI feedback sounds, and per-component soundtracks.\n */\nexport function useAudio(): UseAudioResult {\n    const playerRef = useRef<AudioPlayer | null>(null);\n    const [unlocked, setUnlocked] = useState<boolean>(false);\n\n    if (!playerRef.current) {\n        playerRef.current = createAudioPlayer();\n    }\n\n    useEffect(() => {\n        return () => {\n            playerRef.current?.stop();\n        };\n    }, []);\n\n    const play = useCallback(async (src: string, options?: PlayAudioOptions): Promise<void> => {\n        const result = await playerRef.current!.play(src, options);\n        if (result) setUnlocked(true);\n    }, []);\n\n    const stop = useCallback((): void => {\n        playerRef.current?.stop();\n    }, []);\n\n    return { play, stop, unlocked };\n}\n"],"mappings":";;;AAoBA,SAAgB,IAA2B;CACvC,IAAM,IAAY,EAA2B,IAAI,GAC3C,CAAC,GAAU,KAAe,EAAkB,EAAK;CAqBvD,OAnBA,AACI,EAAU,YAAU,EAAkB,GAG1C,cACiB;EACT,EAAU,SAAS,KAAK;CAC5B,GACD,CAAC,CAAC,GAWE;EAAE,MATI,EAAY,OAAO,GAAa,MAA8C;GAEvF,AAAI,MADiB,EAAU,QAAS,KAAK,GAAK,CAAO,KAC7C,EAAY,EAAI;EAChC,GAAG,CAAC,CAMK;EAAM,MAJF,QAAwB;GACjC,EAAU,SAAS,KAAK;EAC5B,GAAG,CAAC,CAEW;EAAM;CAAS;AAClC"}
+{"version":3,"file":"use-audio.js","names":[],"sources":["../../src/audio/use-audio.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\nimport { createAudioPlayer, type AudioPlayer, type PlayAudioOptions } from \"./audio-player\";\n\nexport interface UseAudioResult {\n    /** Play `src` on the hook's private player. */\n    play: (src: string, options?: PlayAudioOptions) => Promise<void>;\n    /** Stop the current clip. */\n    stop: () => void;\n    /**\n     * Whether the browser's autoplay policy has been satisfied. Becomes\n     * `true` after the first successful `play()`.\n     */\n    unlocked: boolean;\n}\n\n/**\n * The player lives in a state initializer, not in a lazily-written ref: the\n * initializer runs exactly once and is not a side effect during render, which is\n * what the ref version was. The player identity never changes, so state holds it\n * fine and the value is non-null from the first render.\n *\n * Hook-managed audio player. Each component instance gets its own\n * {@link AudioPlayer}, so unmounting cleanly stops playback. Useful for\n * notification chimes, UI feedback sounds, and per-component soundtracks.\n */\nexport function useAudio(): UseAudioResult {\n    const [player] = useState<AudioPlayer>(() => createAudioPlayer());\n    const [unlocked, setUnlocked] = useState<boolean>(false);\n\n    useEffect(() => {\n        return () => {\n            player.stop();\n        };\n    }, [player]);\n\n    const play = useCallback(\n        async (src: string, options?: PlayAudioOptions): Promise<void> => {\n            const result = await player.play(src, options);\n            if (result) setUnlocked(true);\n        },\n        [player],\n    );\n\n    const stop = useCallback((): void => {\n        player.stop();\n    }, [player]);\n\n    return { play, stop, unlocked };\n}\n"],"mappings":";;;AAyBA,SAAgB,IAA2B;CACvC,IAAM,CAAC,KAAU,QAA4B,EAAkB,CAAC,GAC1D,CAAC,GAAU,KAAe,EAAkB,EAAK;CAoBvD,OAlBA,cACiB;EACT,EAAO,KAAK;CAChB,GACD,CAAC,CAAM,CAAC,GAcJ;EAAE,MAZI,EACT,OAAO,GAAa,MAA8C;GAE9D,AAAI,MADiB,EAAO,KAAK,GAAK,CAAO,KACjC,EAAY,EAAI;EAChC,GACA,CAAC,CAAM,CAOF;EAAM,MAJF,QAAwB;GACjC,EAAO,KAAK;EAChB,GAAG,CAAC,CAAM,CAEK;EAAM;CAAS;AAClC"}

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