tempest-react-sdk 0.25.0 → 0.26.1

package/bin/lib/icons/generate.test.mjs

@@ -0,0 +1,125 @@
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { iconAliases, iconNames } from "@/icons";
+
+import { generateRegistry, renderRegistry, scanIconSlugs } from "./generate.mjs";
+
+const known = new Set(iconNames);
+
+describe("scanIconSlugs", () => {
+    it("finds literal name props, braced or not", () => {
+        expect(
+            scanIconSlugs(`<Icon name="save" /><Icon name={"trash-2"} />`, known).sort(),
+        ).toEqual(["save", "trash-2"]);
+    });
+    it("finds an object field", () => {
+        expect(scanIconSlugs(`{ name: "house" }`, known)).toEqual(["house"]);
+    });
+    it("ignores a name that is not a lucide slug", () => {
+        expect(scanIconSlugs(`<Field name="email" />`, known)).toEqual([]);
+    });
+    it("ignores a dynamic name", () => {
+        expect(scanIconSlugs(`<Icon name={row.icon} />`, known)).toEqual([]);
+    });
+});
+
+describe("renderRegistry", () => {
+    it("emits a createIconRegistry call with static imports", () => {
+        const out = renderRegistry(["save", "trash-2"], iconAliases);
+        expect(out).toContain(`import { createIconRegistry } from "tempest-react-sdk/icons";`);
+        expect(out).toContain(`import { Save, Trash2 } from "lucide-react";`);
+        expect(out).toContain(`    "save": Save,`);
+    });
+    it("imports the canonical component for an alias but keeps the alias key", () => {
+        const out = renderRegistry(["alert-circle"], iconAliases);
+        expect(out).toContain(`import { CircleAlert } from "lucide-react";`);
+        expect(out).toContain(`    "alert-circle": CircleAlert,`);
+    });
+    it("emits an empty registry rather than an empty import", () => {
+        expect(renderRegistry([], iconAliases)).toContain("createIconRegistry({})");
+    });
+    it("is deterministic regardless of input order", () => {
+        expect(renderRegistry(["trash-2", "save"], iconAliases)).toBe(
+            renderRegistry(["save", "trash-2"], iconAliases),
+        );
+    });
+});
+
+describe("generateRegistry", () => {
+    let root;
+
+    beforeEach(() => {
+        root = mkdtempSync(join(tmpdir(), "tempest-gen-icons-"));
+    });
+
+    afterEach(() => {
+        rmSync(root, { recursive: true, force: true });
+    });
+
+    /** Write a source file under the fixture root. */
+    function write(rel, contents) {
+        const path = join(root, rel);
+        mkdirSync(join(path, ".."), { recursive: true });
+        writeFileSync(path, contents);
+    }
+
+    it("collects slugs across a nested tree", async () => {
+        write("pages/Home.tsx", `<Icon name="house" />`);
+        write("pages/admin/Users.tsx", `<Icon name="users" />`);
+        const { slugs, files } = await generateRegistry({ dir: root, known, aliases: iconAliases });
+        expect(slugs).toEqual(["house", "users"]);
+        expect(files).toBe(2);
+    });
+
+    it("skips node_modules, dist and dot directories", async () => {
+        write("node_modules/dep/index.ts", `<Icon name="bug" />`);
+        write("dist/out.js", `<Icon name="bomb" />`);
+        write(".cache/x.ts", `<Icon name="box" />`);
+        write("App.tsx", `<Icon name="house" />`);
+        const { slugs } = await generateRegistry({ dir: root, known, aliases: iconAliases });
+        expect(slugs).toEqual(["house"]);
+    });
+
+    it("adds include slugs and drops invalid ones", async () => {
+        write("App.tsx", "");
+        const { slugs } = await generateRegistry({
+            dir: root,
+            known,
+            aliases: iconAliases,
+            include: ["rocket", "not-an-icon"],
+        });
+        expect(slugs).toEqual(["rocket"]);
+    });
+
+    it("yields an empty registry for a tree with no icons", async () => {
+        write("App.tsx", `export const App = () => null;`);
+        const { slugs, source } = await generateRegistry({
+            dir: root,
+            known,
+            aliases: iconAliases,
+        });
+        expect(slugs).toEqual([]);
+        expect(source).toContain("createIconRegistry({})");
+    });
+
+    it("returns zero files for a directory that does not exist", async () => {
+        const { files, slugs } = await generateRegistry({
+            dir: join(root, "nope"),
+            known,
+            aliases: iconAliases,
+        });
+        expect(files).toBe(0);
+        expect(slugs).toEqual([]);
+    });
+});
+
+describe("renderRegistry — reserved names", () => {
+    it("aliases an export name that would shadow a restricted global", () => {
+        const out = renderRegistry(["infinity"], iconAliases);
+        expect(out).toContain(`import { Infinity as InfinityIcon } from "lucide-react";`);
+        expect(out).toContain(`"infinity": InfinityIcon,`);
+    });
+});

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,11 @@ 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 { checkLucide } from "./lib/doctor/lucide.mjs";
+import { generateRegistry, loadIconTables } from "./lib/icons/generate.mjs";
 import { generate } from "./lib/openapi/generate.mjs";
 import { loadSpec } from "./lib/openapi/load.mjs";
 
@@ -347,6 +352,21 @@ function doctor() {
                       "nested copy under tempest-react-sdk — run `npm dedupe` or align versions; two instances break hooks/context",
                   ],
         );
+
+        // lucide-react gets its own check: two copies of it do not break hooks the
+        // way a second React does, but they duplicate bytes and can leave the
+        // generated icon slug tables pointing at exports the older copy lacks.
+        const sdkPkg = readJSON(join(ROOT, "node_modules", "tempest-react-sdk", "package.json"));
+        checks.push(
+            ...checkLucide({
+                appSpec: deps["lucide-react"] ? String(deps["lucide-react"]) : null,
+                sdkSpec: sdkPkg?.dependencies?.["lucide-react"]
+                    ? String(sdkPkg.dependencies["lucide-react"])
+                    : null,
+                installedVersion: installedVersion("lucide-react"),
+                nestedCopy: nestedDupe("lucide-react"),
+            }),
+        );
     }
 
     // Declared-but-not-installed (package.json ↔ node_modules drift).
@@ -414,10 +434,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 +645,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]);
 }
 
-function fix(paths) {
+/** 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(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 +742,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 +803,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 +878,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/palette.cjs

@@ -1,2 +1,2 @@
-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;
+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=[],a=Number.parseInt(r.getPropertyValue(`--tempest-chart-count`).trim(),10),o=Number.isFinite(a)&&a>0?Math.min(a,8):8;for(let e=1;e<=o;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 * 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"}
+{"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 * Respects `--tempest-chart-count` when the theme declares one (`createTheme`\n * writes it), so a six-color brand palette is read as six and not padded with the\n * SDK's leftover `-7`/`-8` defaults. Otherwise it walks the tokens and stops at\n * the first unset one. Returns {@link DEFAULT_CHART_COLORS} when nothing is\n * 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    const declared = Number.parseInt(styles.getPropertyValue(\"--tempest-chart-count\").trim(), 10);\n    const limit =\n        Number.isFinite(declared) && declared > 0\n            ? Math.min(declared, CHART_COLOR_TOKEN_COUNT)\n            : CHART_COLOR_TOKEN_COUNT;\n\n    for (let index = 1; index <= limit; 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,EAevC,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,EACtB,EAAW,OAAO,SAAS,EAAO,iBAAiB,uBAAuB,CAAC,CAAC,KAAK,EAAG,EAAE,EACtF,EACF,OAAO,SAAS,CAAQ,GAAK,EAAW,EAClC,KAAK,IAAI,EAAA,CAAiC,EAAA,EAGpD,IAAK,IAAI,EAAQ,EAAG,GAAS,EAAO,GAAS,EAAG,CAC5C,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

@@ -11,8 +11,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 r = window.getComputedStyle(n), i = [], a = Number.parseInt(r.getPropertyValue("--tempest-chart-count").trim(), 10), o = Number.isFinite(a) && a > 0 ? Math.min(a, 8) : 8;
+	for (let e = 1; e <= o; e += 1) {
 		let t = r.getPropertyValue(`--tempest-chart-${e}`).trim();
 		if (!t) break;
 		i.push(t);

package/dist/charts/palette.js.map

@@ -1 +1 @@
-{"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"}
+{"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 * Respects `--tempest-chart-count` when the theme declares one (`createTheme`\n * writes it), so a six-color brand palette is read as six and not padded with the\n * SDK's leftover `-7`/`-8` defaults. Otherwise it walks the tokens and stops at\n * the first unset one. Returns {@link DEFAULT_CHART_COLORS} when nothing is\n * 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    const declared = Number.parseInt(styles.getPropertyValue(\"--tempest-chart-count\").trim(), 10);\n    const limit =\n        Number.isFinite(declared) && declared > 0\n            ? Math.min(declared, CHART_COLOR_TOKEN_COUNT)\n            : CHART_COLOR_TOKEN_COUNT;\n\n    for (let index = 1; index <= limit; 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;AAevC,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,GACtB,IAAW,OAAO,SAAS,EAAO,iBAAiB,uBAAuB,CAAC,CAAC,KAAK,GAAG,EAAE,GACtF,IACF,OAAO,SAAS,CAAQ,KAAK,IAAW,IAClC,KAAK,IAAI,GAAA,CAAiC,IAAA;CAGpD,KAAK,IAAI,IAAQ,GAAG,KAAS,GAAO,KAAS,GAAG;EAC5C,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.d.ts

@@ -153,9 +153,11 @@ export declare function resolveChartChrome(part: "grid" | "axis", element?: Elem
 /**
  * Read `--tempest-chart-1` … `--tempest-chart-8` into a color array.
  *
- * Stops at the first unset token, so an app that overrides only four series gets
- * exactly those four cycled instead of a half-themed tail. Returns
- * {@link DEFAULT_CHART_COLORS} when nothing is resolvable.
+ * Respects `--tempest-chart-count` when the theme declares one (`createTheme`
+ * writes it), so a six-color brand palette is read as six and not padded with the
+ * SDK's leftover `-7`/`-8` defaults. Otherwise it walks the tokens and stops at
+ * the first unset one. Returns {@link DEFAULT_CHART_COLORS} when nothing is
+ * resolvable.
  *
  * @param element - Element to resolve the tokens against. Default `<html>`; pass
  *   a subtree root when a section carries a scoped theme.

package/dist/components/ClickOutside/ClickOutside.cjs

@@ -1,2 +1,2 @@
-let e=require("react"),t=require("react/jsx-runtime");function n({onOutside:n,children:r,...i}){let a=(0,e.useRef)(null),o=(0,e.useRef)(n);return o.current=n,(0,e.useEffect)(()=>{if(typeof document>`u`)return;function e(e){let t=a.current,n=e.target;t&&n&&!t.contains(n)&&o.current(e)}return document.addEventListener(`mousedown`,e),document.addEventListener(`touchstart`,e),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`touchstart`,e)}},[]),(0,t.jsx)(`div`,{ref:a,...i,children:r})}exports.ClickOutside=n;
+let e=require("react"),t=require("react/jsx-runtime");function n({onOutside:n,children:r,...i}){let a=(0,e.useRef)(null),o=(0,e.useRef)(n);return(0,e.useEffect)(()=>{o.current=n},[n]),(0,e.useEffect)(()=>{if(typeof document>`u`)return;function e(e){let t=a.current,n=e.target;t&&n&&!t.contains(n)&&o.current(e)}return document.addEventListener(`mousedown`,e),document.addEventListener(`touchstart`,e),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`touchstart`,e)}},[]),(0,t.jsx)(`div`,{ref:a,...i,children:r})}exports.ClickOutside=n;
 //# sourceMappingURL=ClickOutside.cjs.map

package/dist/components/ClickOutside/ClickOutside.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ClickOutside.cjs","names":[],"sources":["../../../src/components/ClickOutside/ClickOutside.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nexport interface ClickOutsideProps extends HTMLAttributes<HTMLDivElement> {\n    /** Called when a pointer event lands outside the wrapped subtree. */\n    onOutside: (event: MouseEvent | TouchEvent) => void;\n    /** Content wrapped by the outside-click boundary. */\n    children: ReactNode;\n}\n\n/**\n * Wraps its children in a `<div>` and invokes `onOutside` whenever a\n * `mousedown` or `touchstart` event occurs outside that subtree.\n *\n * Useful for dismissing popovers, dropdowns and menus on outside interaction.\n * Listeners are attached to `document` on mount and removed on unmount.\n *\n * @param props - The click-outside props, plus any `<div>` attributes.\n * @returns The wrapper element containing the children.\n */\nexport function ClickOutside({ onOutside, children, ...props }: ClickOutsideProps): ReactNode {\n    const ref = useRef<HTMLDivElement>(null);\n    const handlerRef = useRef(onOutside);\n    handlerRef.current = onOutside;\n\n    useEffect(() => {\n        if (typeof document === \"undefined\") {\n            return;\n        }\n\n        function handle(event: MouseEvent | TouchEvent): void {\n            const node = ref.current;\n            const target = event.target as Node | null;\n            if (node && target && !node.contains(target)) {\n                handlerRef.current(event);\n            }\n        }\n\n        document.addEventListener(\"mousedown\", handle);\n        document.addEventListener(\"touchstart\", handle);\n        return () => {\n            document.removeEventListener(\"mousedown\", handle);\n            document.removeEventListener(\"touchstart\", handle);\n        };\n    }, []);\n\n    return (\n        <div ref={ref} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"sDAmBA,SAAgB,EAAa,CAAE,YAAW,WAAU,GAAG,GAAuC,CAC1F,IAAM,GAAA,EAAA,EAAA,OAAA,CAA6B,IAAI,EACjC,GAAA,EAAA,EAAA,OAAA,CAAoB,CAAS,EAwBnC,MAvBA,GAAW,QAAU,GAErB,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,OAAO,SAAa,IACpB,OAGJ,SAAS,EAAO,EAAsC,CAClD,IAAM,EAAO,EAAI,QACX,EAAS,EAAM,OACjB,GAAQ,GAAU,CAAC,EAAK,SAAS,CAAM,GACvC,EAAW,QAAQ,CAAK,CAEhC,CAIA,OAFA,SAAS,iBAAiB,YAAa,CAAM,EAC7C,SAAS,iBAAiB,aAAc,CAAM,MACjC,CACT,SAAS,oBAAoB,YAAa,CAAM,EAChD,SAAS,oBAAoB,aAAc,CAAM,CACrD,CACJ,EAAG,CAAC,CAAC,GAGD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,GAAI,EACd,UACA,CAAA,CAEb"}
+{"version":3,"file":"ClickOutside.cjs","names":[],"sources":["../../../src/components/ClickOutside/ClickOutside.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nexport interface ClickOutsideProps extends HTMLAttributes<HTMLDivElement> {\n    /** Called when a pointer event lands outside the wrapped subtree. */\n    onOutside: (event: MouseEvent | TouchEvent) => void;\n    /** Content wrapped by the outside-click boundary. */\n    children: ReactNode;\n}\n\n/**\n * Wraps its children in a `<div>` and invokes `onOutside` whenever a\n * `mousedown` or `touchstart` event occurs outside that subtree.\n *\n * Useful for dismissing popovers, dropdowns and menus on outside interaction.\n * Listeners are attached to `document` on mount and removed on unmount.\n *\n * @param props - The click-outside props, plus any `<div>` attributes.\n * @returns The wrapper element containing the children.\n */\nexport function ClickOutside({ onOutside, children, ...props }: ClickOutsideProps): ReactNode {\n    const ref = useRef<HTMLDivElement>(null);\n    const handlerRef = useRef(onOutside);\n    useEffect(() => {\n        handlerRef.current = onOutside;\n    }, [onOutside]);\n\n    useEffect(() => {\n        if (typeof document === \"undefined\") {\n            return;\n        }\n\n        function handle(event: MouseEvent | TouchEvent): void {\n            const node = ref.current;\n            const target = event.target as Node | null;\n            if (node && target && !node.contains(target)) {\n                handlerRef.current(event);\n            }\n        }\n\n        document.addEventListener(\"mousedown\", handle);\n        document.addEventListener(\"touchstart\", handle);\n        return () => {\n            document.removeEventListener(\"mousedown\", handle);\n            document.removeEventListener(\"touchstart\", handle);\n        };\n    }, []);\n\n    return (\n        <div ref={ref} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"sDAmBA,SAAgB,EAAa,CAAE,YAAW,WAAU,GAAG,GAAuC,CAC1F,IAAM,GAAA,EAAA,EAAA,OAAA,CAA6B,IAAI,EACjC,GAAA,EAAA,EAAA,OAAA,CAAoB,CAAS,EA0BnC,OAzBA,EAAA,EAAA,UAAA,KAAgB,CACZ,EAAW,QAAU,CACzB,EAAG,CAAC,CAAS,CAAC,GAEd,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,OAAO,SAAa,IACpB,OAGJ,SAAS,EAAO,EAAsC,CAClD,IAAM,EAAO,EAAI,QACX,EAAS,EAAM,OACjB,GAAQ,GAAU,CAAC,EAAK,SAAS,CAAM,GACvC,EAAW,QAAQ,CAAK,CAEhC,CAIA,OAFA,SAAS,iBAAiB,YAAa,CAAM,EAC7C,SAAS,iBAAiB,aAAc,CAAM,MACjC,CACT,SAAS,oBAAoB,YAAa,CAAM,EAChD,SAAS,oBAAoB,aAAc,CAAM,CACrD,CACJ,EAAG,CAAC,CAAC,GAGD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,GAAI,EACd,UACA,CAAA,CAEb"}

package/dist/components/ClickOutside/ClickOutside.js

@@ -3,7 +3,9 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/components/ClickOutside/ClickOutside.tsx
 function r({ onOutside: r, children: i, ...a }) {
 	let o = t(null), s = t(r);
-	return s.current = r, e(() => {
+	return e(() => {
+		s.current = r;
+	}, [r]), e(() => {
 		if (typeof document > "u") return;
 		function e(e) {
 			let t = o.current, n = e.target;

package/dist/components/ClickOutside/ClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClickOutside.js","names":[],"sources":["../../../src/components/ClickOutside/ClickOutside.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nexport interface ClickOutsideProps extends HTMLAttributes<HTMLDivElement> {\n    /** Called when a pointer event lands outside the wrapped subtree. */\n    onOutside: (event: MouseEvent | TouchEvent) => void;\n    /** Content wrapped by the outside-click boundary. */\n    children: ReactNode;\n}\n\n/**\n * Wraps its children in a `<div>` and invokes `onOutside` whenever a\n * `mousedown` or `touchstart` event occurs outside that subtree.\n *\n * Useful for dismissing popovers, dropdowns and menus on outside interaction.\n * Listeners are attached to `document` on mount and removed on unmount.\n *\n * @param props - The click-outside props, plus any `<div>` attributes.\n * @returns The wrapper element containing the children.\n */\nexport function ClickOutside({ onOutside, children, ...props }: ClickOutsideProps): ReactNode {\n    const ref = useRef<HTMLDivElement>(null);\n    const handlerRef = useRef(onOutside);\n    handlerRef.current = onOutside;\n\n    useEffect(() => {\n        if (typeof document === \"undefined\") {\n            return;\n        }\n\n        function handle(event: MouseEvent | TouchEvent): void {\n            const node = ref.current;\n            const target = event.target as Node | null;\n            if (node && target && !node.contains(target)) {\n                handlerRef.current(event);\n            }\n        }\n\n        document.addEventListener(\"mousedown\", handle);\n        document.addEventListener(\"touchstart\", handle);\n        return () => {\n            document.removeEventListener(\"mousedown\", handle);\n            document.removeEventListener(\"touchstart\", handle);\n        };\n    }, []);\n\n    return (\n        <div ref={ref} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;AAmBA,SAAgB,EAAa,EAAE,cAAW,aAAU,GAAG,KAAuC;CAC1F,IAAM,IAAM,EAAuB,IAAI,GACjC,IAAa,EAAO,CAAS;CAwBnC,OAvBA,EAAW,UAAU,GAErB,QAAgB;EACZ,IAAI,OAAO,WAAa,KACpB;EAGJ,SAAS,EAAO,GAAsC;GAClD,IAAM,IAAO,EAAI,SACX,IAAS,EAAM;GACrB,AAAI,KAAQ,KAAU,CAAC,EAAK,SAAS,CAAM,KACvC,EAAW,QAAQ,CAAK;EAEhC;EAIA,OAFA,SAAS,iBAAiB,aAAa,CAAM,GAC7C,SAAS,iBAAiB,cAAc,CAAM,SACjC;GAET,AADA,SAAS,oBAAoB,aAAa,CAAM,GAChD,SAAS,oBAAoB,cAAc,CAAM;EACrD;CACJ,GAAG,CAAC,CAAC,GAGD,kBAAC,OAAD;EAAU;EAAK,GAAI;EACd;CACA,CAAA;AAEb"}
+{"version":3,"file":"ClickOutside.js","names":[],"sources":["../../../src/components/ClickOutside/ClickOutside.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\n\nexport interface ClickOutsideProps extends HTMLAttributes<HTMLDivElement> {\n    /** Called when a pointer event lands outside the wrapped subtree. */\n    onOutside: (event: MouseEvent | TouchEvent) => void;\n    /** Content wrapped by the outside-click boundary. */\n    children: ReactNode;\n}\n\n/**\n * Wraps its children in a `<div>` and invokes `onOutside` whenever a\n * `mousedown` or `touchstart` event occurs outside that subtree.\n *\n * Useful for dismissing popovers, dropdowns and menus on outside interaction.\n * Listeners are attached to `document` on mount and removed on unmount.\n *\n * @param props - The click-outside props, plus any `<div>` attributes.\n * @returns The wrapper element containing the children.\n */\nexport function ClickOutside({ onOutside, children, ...props }: ClickOutsideProps): ReactNode {\n    const ref = useRef<HTMLDivElement>(null);\n    const handlerRef = useRef(onOutside);\n    useEffect(() => {\n        handlerRef.current = onOutside;\n    }, [onOutside]);\n\n    useEffect(() => {\n        if (typeof document === \"undefined\") {\n            return;\n        }\n\n        function handle(event: MouseEvent | TouchEvent): void {\n            const node = ref.current;\n            const target = event.target as Node | null;\n            if (node && target && !node.contains(target)) {\n                handlerRef.current(event);\n            }\n        }\n\n        document.addEventListener(\"mousedown\", handle);\n        document.addEventListener(\"touchstart\", handle);\n        return () => {\n            document.removeEventListener(\"mousedown\", handle);\n            document.removeEventListener(\"touchstart\", handle);\n        };\n    }, []);\n\n    return (\n        <div ref={ref} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;AAmBA,SAAgB,EAAa,EAAE,cAAW,aAAU,GAAG,KAAuC;CAC1F,IAAM,IAAM,EAAuB,IAAI,GACjC,IAAa,EAAO,CAAS;CA0BnC,OAzBA,QAAgB;EACZ,EAAW,UAAU;CACzB,GAAG,CAAC,CAAS,CAAC,GAEd,QAAgB;EACZ,IAAI,OAAO,WAAa,KACpB;EAGJ,SAAS,EAAO,GAAsC;GAClD,IAAM,IAAO,EAAI,SACX,IAAS,EAAM;GACrB,AAAI,KAAQ,KAAU,CAAC,EAAK,SAAS,CAAM,KACvC,EAAW,QAAQ,CAAK;EAEhC;EAIA,OAFA,SAAS,iBAAiB,aAAa,CAAM,GAC7C,SAAS,iBAAiB,cAAc,CAAM,SACjC;GAET,AADA,SAAS,oBAAoB,aAAa,CAAM,GAChD,SAAS,oBAAoB,cAAc,CAAM;EACrD;CACJ,GAAG,CAAC,CAAC,GAGD,kBAAC,OAAD;EAAU;EAAK,GAAI;EACd;CACA,CAAA;AAEb"}

package/dist/components/DataTable/DataTable.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-pagination.cjs"),n=require("../Pagination/Pagination.cjs"),r=require("../SearchBar/SearchBar.cjs"),i=require("../Table/Table.cjs"),a=require("./DataTable.module.cjs");let o=require("react"),s=require("react/jsx-runtime");function c(e,t){return e==null&&t==null?0:e==null?-1:t==null?1:typeof e==`number`&&typeof t==`number`?e-t:e instanceof Date&&t instanceof Date?e.getTime()-t.getTime():typeof e==`boolean`&&typeof t==`boolean`?Number(e)-Number(t):String(e).localeCompare(String(t),void 0,{numeric:!0})}function l({data:l,columns:u,pageSize:d=10,searchable:f=!1,searchKeys:p,initialSort:m,rowKey:h=(e,t)=>t,emptyMessage:g,className:_,...v}){let[y,b]=(0,o.useState)(``),[x,S]=(0,o.useState)(m??null),{page:C,setPage:w}=t.usePagination(1,d),T=(0,o.useMemo)(()=>p&&p.length>0?p:u.filter(e=>{let t=l.find(t=>t[e.key]!=null),n=t?t[e.key]:void 0;return typeof n==`string`||typeof n==`number`}).map(e=>e.key),[p,u,l]),E=(0,o.useMemo)(()=>{let e=y.trim().toLowerCase();return!e||!f?l:l.filter(t=>T.some(n=>{let r=t[n];return r!=null&&String(r).toLowerCase().includes(e)}))},[l,y,f,T]),D=(0,o.useMemo)(()=>{if(!x)return E;let e=x.direction===`asc`?1:-1;return[...E].sort((t,n)=>c(t[x.key],n[x.key])*e)},[E,x]),O=Math.max(1,Math.ceil(D.length/d));(0,o.useEffect)(()=>{C>O&&w(O)},[C,O,w]);let k=Math.min(C,O),A=(0,o.useMemo)(()=>{let e=(k-1)*d;return D.slice(e,e+d)},[D,k,d]);function j(e){S(t=>!t||t.key!==e?{key:e,direction:`asc`}:t.direction===`asc`?{key:e,direction:`desc`}:null)}let M=(0,o.useMemo)(()=>u.map(e=>{let t=x?.key===e.key?x?.direction===`asc`?` ▲`:` ▼`:``,n=e.sortable?(0,s.jsxs)(`button`,{type:`button`,className:a.default.sortButton,onClick:()=>j(e.key),"aria-label":`Ordenar por ${typeof e.header==`string`?e.header:String(e.key)}`,children:[e.header,(0,s.jsx)(`span`,{className:a.default.sortIndicator,"aria-hidden":!0,children:t})]}):e.header;return{key:String(e.key),header:n,align:e.align,priority:e.priority,width:e.width,render:e.render?t=>e.render(t):t=>t[e.key]??null}}),[u,x]);return(0,s.jsxs)(`div`,{className:e.cn(a.default.wrapper,_),...v,children:[f&&(0,s.jsx)(r.SearchBar,{value:y,onChange:e=>{b(e),w(1)},wrapperClassName:a.default.search}),(0,s.jsx)(i.Table,{columns:M,data:A,rowKey:(e,t)=>h(e,(k-1)*d+t),emptyMessage:g}),O>1&&(0,s.jsx)(n.Pagination,{page:k,totalPages:O,onPageChange:w,totalItems:D.length})]})}exports.DataTable=l;
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-pagination.cjs"),n=require("../Pagination/Pagination.cjs"),r=require("../SearchBar/SearchBar.cjs"),i=require("../Table/Table.cjs"),a=require("../../utils/compare-values.cjs"),o=require("./DataTable.module.cjs");let s=require("react"),c=require("react/jsx-runtime");function l({data:l,columns:u,pageSize:d=10,searchable:f=!1,searchKeys:p,initialSort:m,rowKey:h=(e,t)=>t,emptyMessage:g,className:_,...v}){let[y,b]=(0,s.useState)(``),[x,S]=(0,s.useState)(m??null),{page:C,setPage:w}=t.usePagination(1,d),T=(0,s.useMemo)(()=>p&&p.length>0?p:u.filter(e=>{let t=l.find(t=>t[e.key]!=null),n=t?t[e.key]:void 0;return typeof n==`string`||typeof n==`number`}).map(e=>e.key),[p,u,l]),E=(0,s.useMemo)(()=>{let e=y.trim().toLowerCase();return!e||!f?l:l.filter(t=>T.some(n=>{let r=t[n];return r!=null&&String(r).toLowerCase().includes(e)}))},[l,y,f,T]),D=(0,s.useMemo)(()=>{if(!x)return E;let e=x.direction===`asc`?1:-1;return[...E].sort((t,n)=>a.compareValues(t[x.key],n[x.key])*e)},[E,x]),O=Math.max(1,Math.ceil(D.length/d));(0,s.useEffect)(()=>{C>O&&w(O)},[C,O,w]);let k=Math.min(C,O),A=(0,s.useMemo)(()=>{let e=(k-1)*d;return D.slice(e,e+d)},[D,k,d]);function j(e){S(t=>!t||t.key!==e?{key:e,direction:`asc`}:t.direction===`asc`?{key:e,direction:`desc`}:null)}let M=(0,s.useMemo)(()=>u.map(e=>{let t=x?.key===e.key?x?.direction===`asc`?` ▲`:` ▼`:``,n=e.sortable?(0,c.jsxs)(`button`,{type:`button`,className:o.default.sortButton,onClick:()=>j(e.key),"aria-label":`Ordenar por ${typeof e.header==`string`?e.header:String(e.key)}`,children:[e.header,(0,c.jsx)(`span`,{className:o.default.sortIndicator,"aria-hidden":!0,children:t})]}):e.header;return{key:String(e.key),header:n,align:e.align,priority:e.priority,width:e.width,render:e.render?t=>e.render(t):t=>t[e.key]??null}}),[u,x]);return(0,c.jsxs)(`div`,{className:e.cn(o.default.wrapper,_),...v,children:[f&&(0,c.jsx)(r.SearchBar,{value:y,onChange:e=>{b(e),w(1)},wrapperClassName:o.default.search}),(0,c.jsx)(i.Table,{columns:M,data:A,rowKey:(e,t)=>h(e,(k-1)*d+t),emptyMessage:g}),O>1&&(0,c.jsx)(n.Pagination,{page:k,totalPages:O,onPageChange:w,totalItems:D.length})]})}exports.DataTable=l;
 //# sourceMappingURL=DataTable.cjs.map