tempest-react-sdk 0.24.0 → 0.26.0

package/dist/charts/PieChart.js.map

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

package/dist/charts/RadarChart.cjs

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

package/dist/charts/RadarChart.cjs.map

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

package/dist/charts/RadarChart.js

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

package/dist/charts/RadarChart.js.map

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

package/dist/charts/palette.cjs

@@ -1,2 +1,2 @@
-var e=[`#2563eb`,`#16a34a`,`#f59e0b`,`#7c3aed`,`#ec4899`,`#06b6d4`];exports.DEFAULT_CHART_COLORS=e;
+var e=[`#2563eb`,`#16a34a`,`#f59e0b`,`#7c3aed`,`#ec4899`,`#06b6d4`],t=8;function n(t){if(typeof window>`u`||typeof document>`u`)return e;let n=t??document.documentElement;if(!n)return e;let r=window.getComputedStyle(n),i=[],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 * Default color palette for Tempest charts.\n *\n * A set of six visually distinct hex colors (blue, green, amber, violet, pink,\n * cyan) used to color chart series in cycle order. Exported so callers can\n * import and theme their own charts, or pass a custom `colors` array to any\n * chart component to override it.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n    \"#2563eb\", // blue\n    \"#16a34a\", // green\n    \"#f59e0b\", // amber\n    \"#7c3aed\", // violet\n    \"#ec4899\", // pink\n    \"#06b6d4\", // cyan\n];\n"],"mappings":"AAQA,IAAa,EAAiC,CAC1C,UACA,UACA,UACA,UACA,UACA,SACJ"}
+{"version":3,"file":"palette.cjs","names":[],"sources":["../../src/charts/palette.ts"],"sourcesContent":["/**\n * Series colors for Tempest charts, resolved from the theme tokens.\n *\n * Recharts sets colors as SVG presentation attributes (`fill=\"…\"`), where\n * `var(--token)` is **not** substituted — browsers only resolve custom properties\n * in CSS declarations. So the tokens are read from the computed style and handed\n * over as literal colors, which is what keeps a re-theme (and dark mode)\n * reflected in the charts.\n */\n\n/**\n * Fallback palette: six visually distinct hex colors (blue, green, amber,\n * violet, pink, cyan) in cycle order.\n *\n * Used when the `--tempest-chart-*` tokens cannot be read — no stylesheet\n * imported, a non-browser environment (tests, build scripts), or a host page that\n * dropped the tokens. Exported so callers can start from it and pass a tweaked\n * array to any chart's `colors` prop.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n    \"#2563eb\", // blue\n    \"#16a34a\", // green\n    \"#f59e0b\", // amber\n    \"#7c3aed\", // violet\n    \"#ec4899\", // pink\n    \"#06b6d4\", // cyan\n];\n\n/** How many `--tempest-chart-N` tokens the SDK ships. */\nexport const CHART_COLOR_TOKEN_COUNT = 8;\n\n/**\n * Read `--tempest-chart-1` … `--tempest-chart-8` into a color array.\n *\n * 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

@@ -6,8 +6,25 @@ var e = [
 	"#7c3aed",
 	"#ec4899",
 	"#06b6d4"
-];
+], t = 8;
+function n(t) {
+	if (typeof window > "u" || typeof document > "u") return e;
+	let n = t ?? document.documentElement;
+	if (!n) return e;
+	let r = window.getComputedStyle(n), i = [], 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;
+}
 //#endregion
-export { e as DEFAULT_CHART_COLORS };
+export { t as CHART_COLOR_TOKEN_COUNT, e as DEFAULT_CHART_COLORS, r as resolveChartChrome, n as resolveChartColors };
 
 //# sourceMappingURL=palette.js.map

package/dist/charts/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","names":[],"sources":["../../src/charts/palette.ts"],"sourcesContent":["/**\n * Default color palette for Tempest charts.\n *\n * A set of six visually distinct hex colors (blue, green, amber, violet, pink,\n * cyan) used to color chart series in cycle order. Exported so callers can\n * import and theme their own charts, or pass a custom `colors` array to any\n * chart component to override it.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n    \"#2563eb\", // blue\n    \"#16a34a\", // green\n    \"#f59e0b\", // amber\n    \"#7c3aed\", // violet\n    \"#ec4899\", // pink\n    \"#06b6d4\", // cyan\n];\n"],"mappings":";AAQA,IAAa,IAAiC;CAC1C;CACA;CACA;CACA;CACA;CACA;AACJ"}
+{"version":3,"file":"palette.js","names":[],"sources":["../../src/charts/palette.ts"],"sourcesContent":["/**\n * Series colors for Tempest charts, resolved from the theme tokens.\n *\n * Recharts sets colors as SVG presentation attributes (`fill=\"…\"`), where\n * `var(--token)` is **not** substituted — browsers only resolve custom properties\n * in CSS declarations. So the tokens are read from the computed style and handed\n * over as literal colors, which is what keeps a re-theme (and dark mode)\n * reflected in the charts.\n */\n\n/**\n * Fallback palette: six visually distinct hex colors (blue, green, amber,\n * violet, pink, cyan) in cycle order.\n *\n * Used when the `--tempest-chart-*` tokens cannot be read — no stylesheet\n * imported, a non-browser environment (tests, build scripts), or a host page that\n * dropped the tokens. Exported so callers can start from it and pass a tweaked\n * array to any chart's `colors` prop.\n */\nexport const DEFAULT_CHART_COLORS: string[] = [\n    \"#2563eb\", // blue\n    \"#16a34a\", // green\n    \"#f59e0b\", // amber\n    \"#7c3aed\", // violet\n    \"#ec4899\", // pink\n    \"#06b6d4\", // cyan\n];\n\n/** How many `--tempest-chart-N` tokens the SDK ships. */\nexport const CHART_COLOR_TOKEN_COUNT = 8;\n\n/**\n * Read `--tempest-chart-1` … `--tempest-chart-8` into a color array.\n *\n * 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/use-chart-colors.cjs

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

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

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

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

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

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

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

package/dist/charts.cjs

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

package/dist/charts.d.ts

@@ -4,7 +4,7 @@ import { JSX } from 'react';
  * AreaChart — themed wrapper over recharts `AreaChart`.
  *
  * Plots one filled area per entry in `categories`, colored from `colors`
- * (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all
+ * (cycling the `--tempest-chart-*` theme tokens by default). When `stack` is set, all
  * areas share a stackId. When `width` is provided the chart renders at that
  * fixed size without a ResponsiveContainer; otherwise it fills its parent.
  */
@@ -14,7 +14,7 @@ export declare function AreaChart({ data, index, categories, colors, height, wid
  * BarChart — themed wrapper over recharts `BarChart`.
  *
  * Plots one bar series per entry in `categories`, colored from `colors`
- * (cycling {@link DEFAULT_CHART_COLORS} by default). When `stack` is set, all
+ * (cycling the `--tempest-chart-*` theme tokens by default). When `stack` is set, all
  * bars share a stackId. When `width` is provided the chart renders at that
  * fixed size without a ResponsiveContainer; otherwise it fills its parent.
  */
@@ -57,6 +57,9 @@ export declare interface CartesianChartProps {
     className?: string;
 }
 
+/** How many `--tempest-chart-N` tokens the SDK ships. */
+export declare const CHART_COLOR_TOKEN_COUNT = 8;
+
 /**
  * Tabular data consumed by every chart: an array of rows, where each row maps a
  * column key to a string (label) or number (value).
@@ -64,12 +67,13 @@ export declare interface CartesianChartProps {
 export declare type ChartData = Array<Record<string, string | number>>;
 
 /**
- * Default color palette for Tempest charts.
+ * Fallback palette: six visually distinct hex colors (blue, green, amber,
+ * violet, pink, cyan) in cycle order.
  *
- * A set of six visually distinct hex colors (blue, green, amber, violet, pink,
- * cyan) used to color chart series in cycle order. Exported so callers can
- * import and theme their own charts, or pass a custom `colors` array to any
- * chart component to override it.
+ * Used when the `--tempest-chart-*` tokens cannot be read — no stylesheet
+ * imported, a non-browser environment (tests, build scripts), or a host page that
+ * dropped the tokens. Exported so callers can start from it and pass a tweaked
+ * array to any chart's `colors` prop.
  */
 export declare const DEFAULT_CHART_COLORS: string[];
 
@@ -77,7 +81,7 @@ export declare const DEFAULT_CHART_COLORS: string[];
  * LineChart — themed wrapper over recharts `LineChart`.
  *
  * Plots one line per entry in `categories`, colored from `colors` (cycling
- * {@link DEFAULT_CHART_COLORS} by default). `stack` is accepted for API parity
+ * the `--tempest-chart-*` theme tokens by default). `stack` is accepted for API parity
  * but does not visually stack lines. When `width` is provided the chart renders
  * at that fixed size without a ResponsiveContainer; otherwise it fills its
  * parent.
@@ -89,7 +93,7 @@ export declare function LineChart({ data, index, categories, colors, height, wid
  *
  * Renders one slice per row, reading the numeric value from `category` and the
  * label from `index`. Each slice is colored from `colors` (cycling
- * {@link DEFAULT_CHART_COLORS} by default). When `donut` is set the pie gets a
+ * the `--tempest-chart-*` theme tokens by default). When `donut` is set the pie gets a
  * non-zero inner radius. When `width` is provided the chart renders at that
  * fixed size without a ResponsiveContainer; otherwise it fills its parent.
  */
@@ -130,10 +134,57 @@ export declare interface PieChartProps {
  * RadarChart — themed wrapper over recharts `RadarChart`.
  *
  * Plots one radar polygon per entry in `categories`, colored from `colors`
- * (cycling {@link DEFAULT_CHART_COLORS} by default). `index` drives the angle
+ * (cycling the `--tempest-chart-*` theme tokens by default). `index` drives the angle
  * axis. When `width` is provided the chart renders at that fixed size without a
  * ResponsiveContainer; otherwise it fills its parent.
  */
 export declare function RadarChart({ data, index, categories, colors, height, width, showLegend, showTooltip, valueFormatter, className, }: CartesianChartProps): JSX.Element;
 
+/**
+ * Read one piece of chart chrome (`--tempest-chart-grid` / `--tempest-chart-axis`).
+ *
+ * @param part - Which chrome token to read.
+ * @param element - Element to resolve against. Default `<html>`.
+ * @param fallback - Value returned when the token is unset.
+ * @returns The resolved color, or `fallback`.
+ */
+export declare function resolveChartChrome(part: "grid" | "axis", element?: Element | null, fallback?: string): string;
+
+/**
+ * Read `--tempest-chart-1` … `--tempest-chart-8` into a color array.
+ *
+ * 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.
+ * @returns Literal color strings in cycle order.
+ */
+export declare function resolveChartColors(element?: Element | null): string[];
+
+/**
+ * Theme-aware series colors for a chart.
+ *
+ * Resolves the `--tempest-chart-*` tokens on mount and again whenever the theme
+ * attribute flips, so switching to dark re-colors the series instead of leaving
+ * light-theme colors on a dark canvas. Passing `explicit` short-circuits the
+ * whole thing — an explicit `colors` prop always wins and no observer is set up.
+ *
+ * @param explicit - Colors passed by the caller. When present, returned as-is.
+ * @param element - Element to resolve tokens against. Default `<html>`.
+ * @returns Colors in cycle order.
+ *
+ * @example
+ * ```tsx
+ * function Sales({ data }: { data: ChartDatum[] }) {
+ *   const colors = useChartColors();
+ *   return <BarChart data={data} colors={colors} />;
+ * }
+ * ```
+ */
+export declare function useChartColors(explicit?: string[], element?: Element | null): string[];
+
 export { }

package/dist/charts.js

@@ -1,7 +1,8 @@
-import { DEFAULT_CHART_COLORS as e } from "./charts/palette.js";
-import { AreaChart as t } from "./charts/AreaChart.js";
-import { BarChart as n } from "./charts/BarChart.js";
-import { LineChart as r } from "./charts/LineChart.js";
-import { PieChart as i } from "./charts/PieChart.js";
-import { RadarChart as a } from "./charts/RadarChart.js";
-export { t as AreaChart, n as BarChart, e as DEFAULT_CHART_COLORS, r as LineChart, i as PieChart, a as RadarChart };
+import { CHART_COLOR_TOKEN_COUNT as e, DEFAULT_CHART_COLORS as t, resolveChartChrome as n, resolveChartColors as r } from "./charts/palette.js";
+import { useChartColors as i } from "./charts/use-chart-colors.js";
+import { AreaChart as a } from "./charts/AreaChart.js";
+import { BarChart as o } from "./charts/BarChart.js";
+import { LineChart as s } from "./charts/LineChart.js";
+import { PieChart as c } from "./charts/PieChart.js";
+import { RadarChart as l } from "./charts/RadarChart.js";
+export { a as AreaChart, o as BarChart, e as CHART_COLOR_TOKEN_COUNT, t as DEFAULT_CHART_COLORS, s as LineChart, c as PieChart, l as RadarChart, n as resolveChartChrome, r as resolveChartColors, i as useChartColors };

package/dist/components/AvatarGroup/AvatarGroup.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../Avatar/Avatar.cjs"),n=require("./AvatarGroup.module.cjs");let r=require("react/jsx-runtime");function i({items:i,max:a=4,size:o=`md`,label:s,onOverflowClick:c,className:l}){let u=Math.max(0,a),d=i.slice(0,u),f=i.length-d.length;return(0,r.jsxs)(`div`,{role:`group`,"aria-label":s,className:e.cn(n.default.group,n.default[o],l),children:[d.map((e,i)=>(0,r.jsx)(`span`,{className:n.default.slot,children:(0,r.jsx)(t.Avatar,{src:e.src,name:e.name,alt:e.name,size:o})},`${e.name}-${i}`)),f>0?(0,r.jsx)(`span`,{className:n.default.slot,children:c?(0,r.jsxs)(`button`,{type:`button`,className:e.cn(n.default.overflow,n.default.overflowButton),"aria-label":`${f} more`,onClick:c,children:[`+`,f]}):(0,r.jsxs)(`span`,{className:n.default.overflow,"aria-label":`${f} more`,children:[`+`,f]})}):null]})}exports.AvatarGroup=i;
+//# sourceMappingURL=AvatarGroup.cjs.map

package/dist/components/AvatarGroup/AvatarGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.cjs","names":[],"sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { cn } from \"@/utils/cn\";\nimport { Avatar } from \"../Avatar\";\nimport type { AvatarSize } from \"../Avatar\";\nimport styles from \"./AvatarGroup.module.css\";\n\n/** One participant of the group. */\nexport interface AvatarGroupItem {\n    /** Image URL. Falls back to initials from `name`. */\n    src?: string;\n    /** Full name — drives the initials and the accessible label. */\n    name: string;\n}\n\nexport interface AvatarGroupProps {\n    items: AvatarGroupItem[];\n    /** How many avatars to show before collapsing into `+N`. Default `4`. */\n    max?: number;\n    size?: AvatarSize;\n    /** Accessible name of the group, e.g. `\"Participantes\"`. */\n    label?: string;\n    /**\n     * Called when the `+N` chip is activated — a natural hook for \"see all\n     * participants\". Without it the chip is plain text and not focusable.\n     */\n    onOverflowClick?: () => void;\n    className?: string;\n}\n\n/**\n * Overlapping row of avatars with a `+N` overflow chip — participants of a\n * meeting, assignees of a task, members of a team.\n *\n * The whole row is one `role=\"group\"` with a single accessible name, and each\n * avatar's name is exposed as its label. That is deliberate: announcing seven\n * separate images with no relation between them is noise, and the overflow chip\n * carries the remaining count so the total is never hidden from a screen reader.\n *\n * @example\n * ```tsx\n * <AvatarGroup\n *   label=\"Participantes\"\n *   max={3}\n *   items={[\n *     { name: \"Ada Lovelace\", src: ada },\n *     { name: \"Grace Hopper\" },\n *     { name: \"Alan Turing\" },\n *     { name: \"Edsger Dijkstra\" },\n *   ]}\n *   onOverflowClick={() => setDrawerOpen(true)}\n * />\n * ```\n */\nexport function AvatarGroup({\n    items,\n    max = 4,\n    size = \"md\",\n    label,\n    onOverflowClick,\n    className,\n}: AvatarGroupProps) {\n    const limit = Math.max(0, max);\n    const visible = items.slice(0, limit);\n    const overflow = items.length - visible.length;\n\n    return (\n        <div role=\"group\" aria-label={label} className={cn(styles.group, styles[size], className)}>\n            {visible.map((item, index) => (\n                <span key={`${item.name}-${index}`} className={styles.slot}>\n                    <Avatar src={item.src} name={item.name} alt={item.name} size={size} />\n                </span>\n            ))}\n\n            {overflow > 0 ? (\n                <span className={styles.slot}>\n                    {onOverflowClick ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.overflow, styles.overflowButton)}\n                            aria-label={`${overflow} more`}\n                            onClick={onOverflowClick}\n                        >\n                            +{overflow}\n                        </button>\n                    ) : (\n                        <span className={styles.overflow} aria-label={`${overflow} more`}>\n                            +{overflow}\n                        </span>\n                    )}\n                </span>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"iJAoDA,SAAgB,EAAY,CACxB,QACA,MAAM,EACN,OAAO,KACP,QACA,kBACA,aACiB,CACjB,IAAM,EAAQ,KAAK,IAAI,EAAG,CAAG,EACvB,EAAU,EAAM,MAAM,EAAG,CAAK,EAC9B,EAAW,EAAM,OAAS,EAAQ,OAExC,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,KAAK,QAAQ,aAAY,EAAO,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,EAAA,QAAO,GAAO,CAAS,WAAxF,CACK,EAAQ,KAAK,EAAM,KAChB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAoC,UAAW,EAAA,QAAO,eAClD,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAQ,IAAK,EAAK,IAAK,KAAM,EAAK,KAAM,IAAK,EAAK,KAAY,MAAO,CAAA,CACnE,EAFK,GAAG,EAAK,KAAK,GAAG,GAErB,CACT,EAEA,EAAW,GACR,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,cACnB,GACG,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,SAAU,EAAA,QAAO,cAAc,EACpD,aAAY,GAAG,EAAS,OACxB,QAAS,WAJb,CAKC,IACK,CACE,KAER,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,aAAY,GAAG,EAAS,gBAA1D,CAAkE,IAC5D,CACA,GAER,CAAA,EACN,IACH,GAEb"}

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,39 @@
+import { cn as e } from "../../utils/cn.js";
+import { Avatar as t } from "../Avatar/Avatar.js";
+import n from "./AvatarGroup.module.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/AvatarGroup/AvatarGroup.tsx
+function a({ items: a, max: o = 4, size: s = "md", label: c, onOverflowClick: l, className: u }) {
+	let d = Math.max(0, o), f = a.slice(0, d), p = a.length - f.length;
+	return /* @__PURE__ */ i("div", {
+		role: "group",
+		"aria-label": c,
+		className: e(n.group, n[s], u),
+		children: [f.map((e, i) => /* @__PURE__ */ r("span", {
+			className: n.slot,
+			children: /* @__PURE__ */ r(t, {
+				src: e.src,
+				name: e.name,
+				alt: e.name,
+				size: s
+			})
+		}, `${e.name}-${i}`)), p > 0 ? /* @__PURE__ */ r("span", {
+			className: n.slot,
+			children: l ? /* @__PURE__ */ i("button", {
+				type: "button",
+				className: e(n.overflow, n.overflowButton),
+				"aria-label": `${p} more`,
+				onClick: l,
+				children: ["+", p]
+			}) : /* @__PURE__ */ i("span", {
+				className: n.overflow,
+				"aria-label": `${p} more`,
+				children: ["+", p]
+			})
+		}) : null]
+	});
+}
+//#endregion
+export { a as AvatarGroup };
+
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/AvatarGroup/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","names":[],"sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { cn } from \"@/utils/cn\";\nimport { Avatar } from \"../Avatar\";\nimport type { AvatarSize } from \"../Avatar\";\nimport styles from \"./AvatarGroup.module.css\";\n\n/** One participant of the group. */\nexport interface AvatarGroupItem {\n    /** Image URL. Falls back to initials from `name`. */\n    src?: string;\n    /** Full name — drives the initials and the accessible label. */\n    name: string;\n}\n\nexport interface AvatarGroupProps {\n    items: AvatarGroupItem[];\n    /** How many avatars to show before collapsing into `+N`. Default `4`. */\n    max?: number;\n    size?: AvatarSize;\n    /** Accessible name of the group, e.g. `\"Participantes\"`. */\n    label?: string;\n    /**\n     * Called when the `+N` chip is activated — a natural hook for \"see all\n     * participants\". Without it the chip is plain text and not focusable.\n     */\n    onOverflowClick?: () => void;\n    className?: string;\n}\n\n/**\n * Overlapping row of avatars with a `+N` overflow chip — participants of a\n * meeting, assignees of a task, members of a team.\n *\n * The whole row is one `role=\"group\"` with a single accessible name, and each\n * avatar's name is exposed as its label. That is deliberate: announcing seven\n * separate images with no relation between them is noise, and the overflow chip\n * carries the remaining count so the total is never hidden from a screen reader.\n *\n * @example\n * ```tsx\n * <AvatarGroup\n *   label=\"Participantes\"\n *   max={3}\n *   items={[\n *     { name: \"Ada Lovelace\", src: ada },\n *     { name: \"Grace Hopper\" },\n *     { name: \"Alan Turing\" },\n *     { name: \"Edsger Dijkstra\" },\n *   ]}\n *   onOverflowClick={() => setDrawerOpen(true)}\n * />\n * ```\n */\nexport function AvatarGroup({\n    items,\n    max = 4,\n    size = \"md\",\n    label,\n    onOverflowClick,\n    className,\n}: AvatarGroupProps) {\n    const limit = Math.max(0, max);\n    const visible = items.slice(0, limit);\n    const overflow = items.length - visible.length;\n\n    return (\n        <div role=\"group\" aria-label={label} className={cn(styles.group, styles[size], className)}>\n            {visible.map((item, index) => (\n                <span key={`${item.name}-${index}`} className={styles.slot}>\n                    <Avatar src={item.src} name={item.name} alt={item.name} size={size} />\n                </span>\n            ))}\n\n            {overflow > 0 ? (\n                <span className={styles.slot}>\n                    {onOverflowClick ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.overflow, styles.overflowButton)}\n                            aria-label={`${overflow} more`}\n                            onClick={onOverflowClick}\n                        >\n                            +{overflow}\n                        </button>\n                    ) : (\n                        <span className={styles.overflow} aria-label={`${overflow} more`}>\n                            +{overflow}\n                        </span>\n                    )}\n                </span>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAoDA,SAAgB,EAAY,EACxB,UACA,SAAM,GACN,UAAO,MACP,UACA,oBACA,gBACiB;CACjB,IAAM,IAAQ,KAAK,IAAI,GAAG,CAAG,GACvB,IAAU,EAAM,MAAM,GAAG,CAAK,GAC9B,IAAW,EAAM,SAAS,EAAQ;CAExC,OACI,kBAAC,OAAD;EAAK,MAAK;EAAQ,cAAY;EAAO,WAAW,EAAG,EAAO,OAAO,EAAO,IAAO,CAAS;YAAxF,CACK,EAAQ,KAAK,GAAM,MAChB,kBAAC,QAAD;GAAoC,WAAW,EAAO;aAClD,kBAAC,GAAD;IAAQ,KAAK,EAAK;IAAK,MAAM,EAAK;IAAM,KAAK,EAAK;IAAY;GAAO,CAAA;EACnE,GAFK,GAAG,EAAK,KAAK,GAAG,GAErB,CACT,GAEA,IAAW,IACR,kBAAC,QAAD;GAAM,WAAW,EAAO;aACnB,IACG,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAG,EAAO,UAAU,EAAO,cAAc;IACpD,cAAY,GAAG,EAAS;IACxB,SAAS;cAJb,CAKC,KACK,CACE;QAER,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAU,cAAY,GAAG,EAAS;cAA1D,CAAkE,KAC5D,CACA;;EAER,CAAA,IACN,IACH;;AAEb"}

package/dist/components/AvatarGroup/AvatarGroup.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_group_qCSYk`,t=`tempest_slot_KyJQJ`,n=`tempest_xs_PPTP5`,r=`tempest_sm_ptoRA`,i=`tempest_md_YbE61`,a=`tempest_lg_oAEMY`,o=`tempest_xl_78RZG`,s=`tempest_overflow_JZIo-`,c=`tempest_overflowButton_hSf-2`,l={group:e,slot:t,xs:n,sm:r,md:i,lg:a,xl:o,overflow:s,overflowButton:c};exports.default=l,exports.group=e,exports.lg=a,exports.md=i,exports.overflow=s,exports.overflowButton=c,exports.slot=t,exports.sm=r,exports.xl=o,exports.xs=n;
+//# sourceMappingURL=AvatarGroup.module.cjs.map

package/dist/components/AvatarGroup/AvatarGroup.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.module.cjs","names":[],"sources":["../../../src/components/AvatarGroup/AvatarGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: center;\n}\n\n/**\n * Each slot pulls the next avatar over the previous one. The overlap is a\n * fraction of the avatar size so every size keeps the same proportion.\n */\n.slot {\n    display: inline-flex;\n    border-radius: var(--tempest-radius-full);\n    box-shadow: 0 0 0 2px var(--tempest-bg);\n}\n\n.slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -10px);\n}\n\n.xs .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -8px);\n}\n\n.sm .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -10px);\n}\n\n.md .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -12px);\n}\n\n.lg .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -16px);\n}\n\n.xl .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -22px);\n}\n\n.overflow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    font-variant-numeric: tabular-nums;\n}\n\n.xs .overflow {\n    width: 24px;\n    height: 24px;\n    font-size: var(--tempest-text-2xs);\n}\n\n.sm .overflow {\n    width: 32px;\n    height: 32px;\n}\n\n.lg .overflow {\n    width: 56px;\n    height: 56px;\n    font-size: var(--tempest-text-sm);\n}\n\n.xl .overflow {\n    width: 80px;\n    height: 80px;\n    font-size: var(--tempest-text-base);\n}\n\n.overflowButton {\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.overflowButton:hover {\n    background-color: var(--tempest-border-strong);\n    color: var(--tempest-text);\n}\n\n.overflowButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overflowButton {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/AvatarGroup/AvatarGroup.module.js

@@ -0,0 +1,16 @@
+//#region src/components/AvatarGroup/AvatarGroup.module.css
+var e = "tempest_group_qCSYk", t = "tempest_slot_KyJQJ", n = "tempest_xs_PPTP5", r = "tempest_sm_ptoRA", i = "tempest_md_YbE61", a = "tempest_lg_oAEMY", o = "tempest_xl_78RZG", s = "tempest_overflow_JZIo-", c = "tempest_overflowButton_hSf-2", l = {
+	group: e,
+	slot: t,
+	xs: n,
+	sm: r,
+	md: i,
+	lg: a,
+	xl: o,
+	overflow: s,
+	overflowButton: c
+};
+//#endregion
+export { l as default, e as group, a as lg, i as md, s as overflow, c as overflowButton, t as slot, r as sm, o as xl, n as xs };
+
+//# sourceMappingURL=AvatarGroup.module.js.map

package/dist/components/AvatarGroup/AvatarGroup.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.module.js","names":[],"sources":["../../../src/components/AvatarGroup/AvatarGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: center;\n}\n\n/**\n * Each slot pulls the next avatar over the previous one. The overlap is a\n * fraction of the avatar size so every size keeps the same proportion.\n */\n.slot {\n    display: inline-flex;\n    border-radius: var(--tempest-radius-full);\n    box-shadow: 0 0 0 2px var(--tempest-bg);\n}\n\n.slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -10px);\n}\n\n.xs .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -8px);\n}\n\n.sm .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -10px);\n}\n\n.md .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -12px);\n}\n\n.lg .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -16px);\n}\n\n.xl .slot + .slot {\n    margin-inline-start: var(--tempest-avatar-overlap, -22px);\n}\n\n.overflow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    font-variant-numeric: tabular-nums;\n}\n\n.xs .overflow {\n    width: 24px;\n    height: 24px;\n    font-size: var(--tempest-text-2xs);\n}\n\n.sm .overflow {\n    width: 32px;\n    height: 32px;\n}\n\n.lg .overflow {\n    width: 56px;\n    height: 56px;\n    font-size: var(--tempest-text-sm);\n}\n\n.xl .overflow {\n    width: 80px;\n    height: 80px;\n    font-size: var(--tempest-text-base);\n}\n\n.overflowButton {\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.overflowButton:hover {\n    background-color: var(--tempest-border-strong);\n    color: var(--tempest-text);\n}\n\n.overflowButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overflowButton {\n        transition: none;\n    }\n}\n"],"mappings":""}

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