tempest-react-sdk 0.25.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/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

package/dist/components/DataTable/DataTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { usePagination } from \"@/hooks\";\nimport { Table, type TableAlign, type TableColumn, type TablePriority } from \"../Table\";\nimport { Pagination } from \"../Pagination\";\nimport { SearchBar } from \"../SearchBar\";\nimport styles from \"./DataTable.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort<T> {\n    key: keyof T;\n    direction: SortDirection;\n}\n\n/**\n * Column definition for {@link DataTable}. Extends the headless {@link Table}\n * column shape with a typed `key`, opt-in sorting, and the visual options that\n * are forwarded to the underlying Table cell.\n */\nexport interface DataTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `String(row[key])`. */\n    render?: (row: T) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment forwarded to the Table cell. */\n    align?: TableAlign;\n    /** Responsive visibility priority forwarded to the Table cell. */\n    priority?: TablePriority;\n    /** Fixed column width forwarded to the Table cell. */\n    width?: string | number;\n}\n\nexport interface DataTableProps<T> extends HTMLAttributes<HTMLDivElement> {\n    /** Full, unfiltered dataset. Sorting/filtering/pagination happen client-side. */\n    data: T[];\n    /** Column definitions. */\n    columns: DataTableColumn<T>[];\n    /** Rows per page. Default 10. */\n    pageSize?: number;\n    /** Render a search input above the table. Default false. */\n    searchable?: boolean;\n    /**\n     * Keys to match the search term against. When omitted, every column whose\n     * value is a string or number is searched.\n     */\n    searchKeys?: (keyof T)[];\n    /** Initial sort applied before any header interaction. */\n    initialSort?: DataTableSort<T>;\n    /** Stable key extractor for rows. Defaults to the row index. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Content shown when no rows match. */\n    emptyMessage?: ReactNode;\n}\n\n/**\n * Compare two arbitrary cell values with stable, type-aware ordering:\n * numbers numerically, dates by timestamp, everything else by `localeCompare`.\n *\n * @param a - First value.\n * @param b - Second value.\n * @returns Negative when `a < b`, positive when `a > b`, zero when equal.\n */\nfunction compareValues(a: unknown, b: unknown): number {\n    if (a == null && b == null) return 0;\n    if (a == null) return -1;\n    if (b == null) return 1;\n    if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n    if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();\n    if (typeof a === \"boolean\" && typeof b === \"boolean\") {\n        return Number(a) - Number(b);\n    }\n    return String(a).localeCompare(String(b), undefined, { numeric: true });\n}\n\n/**\n * Stateful, headless data table built on top of {@link Table}. Adds\n * client-side searching, click-to-sort columns, and pagination while\n * delegating all table markup to the underlying Table component.\n *\n * - Clicking a sortable header cycles asc → desc → unsorted.\n * - Search matches a case-insensitive substring across `searchKeys`\n *   (or every string/number column when not provided).\n * - Pagination is hidden when the result fits on a single page.\n *\n * The header memo depends on `columns` and `sort` only: `toggleSort` is\n * recreated each render but always closes over the same setter, so including it\n * would rebuild every header on every render without changing behaviour. That\n * is why `exhaustive-deps` is silenced on that dependency array.\n */\nexport function DataTable<T>({\n    data,\n    columns,\n    pageSize = 10,\n    searchable = false,\n    searchKeys,\n    initialSort,\n    rowKey = (_row, index) => index,\n    emptyMessage,\n    className,\n    ...rest\n}: DataTableProps<T>) {\n    const [search, setSearch] = useState<string>(\"\");\n    const [sort, setSort] = useState<DataTableSort<T> | null>(initialSort ?? null);\n    const { page, setPage } = usePagination(1, pageSize);\n\n    const effectiveSearchKeys = useMemo<(keyof T)[]>(() => {\n        if (searchKeys && searchKeys.length > 0) return searchKeys;\n        return columns\n            .filter((column) => {\n                const sample = data.find((row) => row[column.key] != null);\n                const value = sample ? sample[column.key] : undefined;\n                return typeof value === \"string\" || typeof value === \"number\";\n            })\n            .map((column) => column.key);\n    }, [searchKeys, columns, data]);\n\n    const filtered = useMemo<T[]>(() => {\n        const term = search.trim().toLowerCase();\n        if (!term || !searchable) return data;\n        return data.filter((row) =>\n            effectiveSearchKeys.some((key) => {\n                const value = row[key];\n                return value != null && String(value).toLowerCase().includes(term);\n            }),\n        );\n    }, [data, search, searchable, effectiveSearchKeys]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return filtered;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...filtered].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [filtered, sort]);\n\n    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));\n\n    // Clamp the current page when the dataset shrinks (e.g. after filtering).\n    useEffect(() => {\n        if (page > totalPages) setPage(totalPages);\n    }, [page, totalPages, setPage]);\n\n    const safePage = Math.min(page, totalPages);\n    const pageRows = useMemo<T[]>(() => {\n        const start = (safePage - 1) * pageSize;\n        return sorted.slice(start, start + pageSize);\n    }, [sorted, safePage, pageSize]);\n\n    function toggleSort(key: keyof T): void {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n    }\n\n    const tableColumns = useMemo<TableColumn<T>[]>(\n        () =>\n            columns.map((column) => {\n                const isSorted = sort?.key === column.key;\n                const indicator = isSorted ? (sort?.direction === \"asc\" ? \" ▲\" : \" ▼\") : \"\";\n                const header = column.sortable ? (\n                    <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={() => toggleSort(column.key)}\n                        aria-label={`Ordenar por ${\n                            typeof column.header === \"string\" ? column.header : String(column.key)\n                        }`}\n                    >\n                        {column.header}\n                        <span className={styles.sortIndicator} aria-hidden>\n                            {indicator}\n                        </span>\n                    </button>\n                ) : (\n                    column.header\n                );\n\n                return {\n                    key: String(column.key),\n                    header,\n                    align: column.align,\n                    priority: column.priority,\n                    width: column.width,\n                    render: column.render\n                        ? (row: T) => column.render!(row)\n                        : (row: T) => (row[column.key] as ReactNode) ?? null,\n                };\n            }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [columns, sort],\n    );\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {searchable && (\n                <SearchBar\n                    value={search}\n                    onChange={(value) => {\n                        setSearch(value);\n                        setPage(1);\n                    }}\n                    wrapperClassName={styles.search}\n                />\n            )}\n            <Table\n                columns={tableColumns}\n                data={pageRows}\n                rowKey={(row, index) => rowKey(row, (safePage - 1) * pageSize + index)}\n                emptyMessage={emptyMessage}\n            />\n            {totalPages > 1 && (\n                <Pagination\n                    page={safePage}\n                    totalPages={totalPages}\n                    onPageChange={setPage}\n                    totalItems={sorted.length}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\nimport { usePagination } from \"@/hooks\";\nimport { Table, type TableAlign, type TableColumn, type TablePriority } from \"../Table\";\nimport { Pagination } from \"../Pagination\";\nimport { SearchBar } from \"../SearchBar\";\nimport styles from \"./DataTable.module.css\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort<T> {\n    key: keyof T;\n    direction: SortDirection;\n}\n\n/**\n * Column definition for {@link DataTable}. Extends the headless {@link Table}\n * column shape with a typed `key`, opt-in sorting, and the visual options that\n * are forwarded to the underlying Table cell.\n */\nexport interface DataTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `String(row[key])`. */\n    render?: (row: T) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment forwarded to the Table cell. */\n    align?: TableAlign;\n    /** Responsive visibility priority forwarded to the Table cell. */\n    priority?: TablePriority;\n    /** Fixed column width forwarded to the Table cell. */\n    width?: string | number;\n}\n\nexport interface DataTableProps<T> extends HTMLAttributes<HTMLDivElement> {\n    /** Full, unfiltered dataset. Sorting/filtering/pagination happen client-side. */\n    data: T[];\n    /** Column definitions. */\n    columns: DataTableColumn<T>[];\n    /** Rows per page. Default 10. */\n    pageSize?: number;\n    /** Render a search input above the table. Default false. */\n    searchable?: boolean;\n    /**\n     * Keys to match the search term against. When omitted, every column whose\n     * value is a string or number is searched.\n     */\n    searchKeys?: (keyof T)[];\n    /** Initial sort applied before any header interaction. */\n    initialSort?: DataTableSort<T>;\n    /** Stable key extractor for rows. Defaults to the row index. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Content shown when no rows match. */\n    emptyMessage?: ReactNode;\n}\n\n/**\n * Stateful, headless data table built on top of {@link Table}. Adds\n * client-side searching, click-to-sort columns, and pagination while\n * delegating all table markup to the underlying Table component.\n *\n * - Clicking a sortable header cycles asc → desc → unsorted.\n * - Search matches a case-insensitive substring across `searchKeys`\n *   (or every string/number column when not provided).\n * - Pagination is hidden when the result fits on a single page.\n *\n * The header memo depends on `columns` and `sort` only: `toggleSort` is\n * recreated each render but always closes over the same setter, so including it\n * would rebuild every header on every render without changing behaviour. That\n * is why `exhaustive-deps` is silenced on that dependency array.\n */\nexport function DataTable<T>({\n    data,\n    columns,\n    pageSize = 10,\n    searchable = false,\n    searchKeys,\n    initialSort,\n    rowKey = (_row, index) => index,\n    emptyMessage,\n    className,\n    ...rest\n}: DataTableProps<T>) {\n    const [search, setSearch] = useState<string>(\"\");\n    const [sort, setSort] = useState<DataTableSort<T> | null>(initialSort ?? null);\n    const { page, setPage } = usePagination(1, pageSize);\n\n    const effectiveSearchKeys = useMemo<(keyof T)[]>(() => {\n        if (searchKeys && searchKeys.length > 0) return searchKeys;\n        return columns\n            .filter((column) => {\n                const sample = data.find((row) => row[column.key] != null);\n                const value = sample ? sample[column.key] : undefined;\n                return typeof value === \"string\" || typeof value === \"number\";\n            })\n            .map((column) => column.key);\n    }, [searchKeys, columns, data]);\n\n    const filtered = useMemo<T[]>(() => {\n        const term = search.trim().toLowerCase();\n        if (!term || !searchable) return data;\n        return data.filter((row) =>\n            effectiveSearchKeys.some((key) => {\n                const value = row[key];\n                return value != null && String(value).toLowerCase().includes(term);\n            }),\n        );\n    }, [data, search, searchable, effectiveSearchKeys]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return filtered;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...filtered].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [filtered, sort]);\n\n    const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));\n\n    // Clamp the current page when the dataset shrinks (e.g. after filtering).\n    useEffect(() => {\n        if (page > totalPages) setPage(totalPages);\n    }, [page, totalPages, setPage]);\n\n    const safePage = Math.min(page, totalPages);\n    const pageRows = useMemo<T[]>(() => {\n        const start = (safePage - 1) * pageSize;\n        return sorted.slice(start, start + pageSize);\n    }, [sorted, safePage, pageSize]);\n\n    function toggleSort(key: keyof T): void {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n    }\n\n    const tableColumns = useMemo<TableColumn<T>[]>(\n        () =>\n            columns.map((column) => {\n                const isSorted = sort?.key === column.key;\n                const indicator = isSorted ? (sort?.direction === \"asc\" ? \" ▲\" : \" ▼\") : \"\";\n                const header = column.sortable ? (\n                    <button\n                        type=\"button\"\n                        className={styles.sortButton}\n                        onClick={() => toggleSort(column.key)}\n                        aria-label={`Ordenar por ${\n                            typeof column.header === \"string\" ? column.header : String(column.key)\n                        }`}\n                    >\n                        {column.header}\n                        <span className={styles.sortIndicator} aria-hidden>\n                            {indicator}\n                        </span>\n                    </button>\n                ) : (\n                    column.header\n                );\n\n                return {\n                    key: String(column.key),\n                    header,\n                    align: column.align,\n                    priority: column.priority,\n                    width: column.width,\n                    render: column.render\n                        ? (row: T) => column.render!(row)\n                        : (row: T) => (row[column.key] as ReactNode) ?? null,\n                };\n            }),\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [columns, sort],\n    );\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {searchable && (\n                <SearchBar\n                    value={search}\n                    onChange={(value) => {\n                        setSearch(value);\n                        setPage(1);\n                    }}\n                    wrapperClassName={styles.search}\n                />\n            )}\n            <Table\n                columns={tableColumns}\n                data={pageRows}\n                rowKey={(row, index) => rowKey(row, (safePage - 1) * pageSize + index)}\n                emptyMessage={emptyMessage}\n            />\n            {totalPages > 1 && (\n                <Pagination\n                    page={safePage}\n                    totalPages={totalPages}\n                    onPageChange={setPage}\n                    totalItems={sorted.length}\n                />\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/DataTable/DataTable.js

@@ -3,22 +3,20 @@ import { usePagination as t } from "../../hooks/use-pagination.js";
 import { Pagination as n } from "../Pagination/Pagination.js";
 import { SearchBar as r } from "../SearchBar/SearchBar.js";
 import { Table as i } from "../Table/Table.js";
-import a from "./DataTable.module.js";
-import { useEffect as o, useMemo as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { compareValues as a } from "../../utils/compare-values.js";
+import o from "./DataTable.module.js";
+import { useEffect as s, useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/DataTable/DataTable.tsx
-function d(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 f({ data: f, columns: p, pageSize: m = 10, searchable: h = !1, searchKeys: g, initialSort: _, rowKey: v = (e, t) => t, emptyMessage: y, className: b, ...x }) {
-	let [S, C] = c(""), [w, T] = c(_ ?? null), { page: E, setPage: D } = t(1, m), O = s(() => g && g.length > 0 ? g : p.filter((e) => {
+	let [S, C] = l(""), [w, T] = l(_ ?? null), { page: E, setPage: D } = t(1, m), O = c(() => g && g.length > 0 ? g : p.filter((e) => {
 		let t = f.find((t) => t[e.key] != null), n = t ? t[e.key] : void 0;
 		return typeof n == "string" || typeof n == "number";
 	}).map((e) => e.key), [
 		g,
 		p,
 		f
-	]), k = s(() => {
+	]), k = c(() => {
 		let e = S.trim().toLowerCase();
 		return !e || !h ? f : f.filter((t) => O.some((n) => {
 			let r = t[n];
@@ -29,19 +27,19 @@ function f({ data: f, columns: p, pageSize: m = 10, searchable: h = !1, searchKe
 		S,
 		h,
 		O
-	]), A = s(() => {
+	]), A = c(() => {
 		if (!w) return k;
 		let e = w.direction === "asc" ? 1 : -1;
-		return [...k].sort((t, n) => d(t[w.key], n[w.key]) * e);
+		return [...k].sort((t, n) => a(t[w.key], n[w.key]) * e);
 	}, [k, w]), j = Math.max(1, Math.ceil(A.length / m));
-	o(() => {
+	s(() => {
 		E > j && D(j);
 	}, [
 		E,
 		j,
 		D
 	]);
-	let M = Math.min(E, j), N = s(() => {
+	let M = Math.min(E, j), N = c(() => {
 		let e = (M - 1) * m;
 		return A.slice(e, e + m);
 	}, [
@@ -58,14 +56,14 @@ function f({ data: f, columns: p, pageSize: m = 10, searchable: h = !1, searchKe
 			direction: "desc"
 		} : null);
 	}
-	let F = s(() => p.map((e) => {
-		let t = w?.key === e.key ? w?.direction === "asc" ? " ▲" : " ▼" : "", n = e.sortable ? /* @__PURE__ */ u("button", {
+	let F = c(() => p.map((e) => {
+		let t = w?.key === e.key ? w?.direction === "asc" ? " ▲" : " ▼" : "", n = e.sortable ? /* @__PURE__ */ d("button", {
 			type: "button",
-			className: a.sortButton,
+			className: o.sortButton,
 			onClick: () => P(e.key),
 			"aria-label": `Ordenar por ${typeof e.header == "string" ? e.header : String(e.key)}`,
-			children: [e.header, /* @__PURE__ */ l("span", {
-				className: a.sortIndicator,
+			children: [e.header, /* @__PURE__ */ u("span", {
+				className: o.sortIndicator,
 				"aria-hidden": !0,
 				children: t
 			})]
@@ -79,24 +77,24 @@ function f({ data: f, columns: p, pageSize: m = 10, searchable: h = !1, searchKe
 			render: e.render ? (t) => e.render(t) : (t) => t[e.key] ?? null
 		};
 	}), [p, w]);
-	return /* @__PURE__ */ u("div", {
-		className: e(a.wrapper, b),
+	return /* @__PURE__ */ d("div", {
+		className: e(o.wrapper, b),
 		...x,
 		children: [
-			h && /* @__PURE__ */ l(r, {
+			h && /* @__PURE__ */ u(r, {
 				value: S,
 				onChange: (e) => {
 					C(e), D(1);
 				},
-				wrapperClassName: a.search
+				wrapperClassName: o.search
 			}),
-			/* @__PURE__ */ l(i, {
+			/* @__PURE__ */ u(i, {
 				columns: F,
 				data: N,
 				rowKey: (e, t) => v(e, (M - 1) * m + t),
 				emptyMessage: y
 			}),
-			j > 1 && /* @__PURE__ */ l(n, {
+			j > 1 && /* @__PURE__ */ u(n, {
 				page: M,
 				totalPages: j,
 				onPageChange: D,