tekivex-ui 2.5.3 → 2.5.4

package/dist/charts.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("recharts"),b=require("./index-BINBzXuY.cjs");function C(r){return[r.primary,r.secondary,r.info,r.success,r.warning,r.danger,"#a855f7","#f97316","#14b8a6","#e879f9"]}const v={top:10,right:30,bottom:10,left:0};function T(r){return{contentStyle:{backgroundColor:r.surface,border:`1px solid ${r.border}`,borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,0.15)",color:r.text,fontSize:13},labelStyle:{color:r.textMuted,fontWeight:600,marginBottom:4},itemStyle:{color:r.text},cursor:{fill:`${r.primary}15`}}}function A({data:r,series:S,xKey:h,height:m=300,margin:d=v,showGrid:x=!0,showLegend:u=!0,showTooltip:j=!0,smooth:a=!0,xTickFormatter:y,yTickFormatter:i,yDomain:o,ariaLabel:c="Area chart"}){const l=b.useTheme(),f=C(l),n=T(l),g={fill:l.textMuted,fontSize:12};return e.jsx("div",{role:"img","aria-label":c,style:{width:"100%",height:m},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.AreaChart,{data:r,margin:d,children:[x&&e.jsx(t.CartesianGrid,{strokeDasharray:"3 3",stroke:l.border,vertical:!1}),e.jsx(t.XAxis,{dataKey:h,tick:g,axisLine:{stroke:l.border},tickLine:!1,tickFormatter:y}),e.jsx(t.YAxis,{tick:g,axisLine:!1,tickLine:!1,tickFormatter:i,domain:o}),j&&e.jsx(t.Tooltip,{contentStyle:n.contentStyle,labelStyle:n.labelStyle,itemStyle:n.itemStyle,cursor:n.cursor}),u&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:l.textMuted,paddingTop:8}}),S.map((k,p)=>{const s=k.color??f[p%f.length];return e.jsx(t.Area,{type:a?"monotone":"linear",dataKey:k.key,name:k.label??k.key,stroke:s,strokeWidth:2,fill:s,fillOpacity:k.fillOpacity??.2,stackId:k.stacked?"stack":void 0,dot:!1,activeDot:{r:5,strokeWidth:0}},k.key)})]})})})}function z({data:r,series:S,xKey:h,height:m=300,margin:d=v,showGrid:x=!0,showLegend:u=!0,showTooltip:j=!0,layout:a="horizontal",barSize:y,xTickFormatter:i,yTickFormatter:o,ariaLabel:c="Bar chart"}){const l=b.useTheme(),f=C(l),n=T(l),g={fill:l.textMuted,fontSize:12},k=a==="vertical";return e.jsx("div",{role:"img","aria-label":c,style:{width:"100%",height:m},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.BarChart,{data:r,margin:d,layout:a,children:[x&&e.jsx(t.CartesianGrid,{strokeDasharray:"3 3",stroke:l.border,vertical:k,horizontal:!k}),k?e.jsxs(e.Fragment,{children:[e.jsx(t.YAxis,{dataKey:h,type:"category",tick:g,axisLine:!1,tickLine:!1,tickFormatter:i,width:100}),e.jsx(t.XAxis,{type:"number",tick:g,axisLine:{stroke:l.border},tickLine:!1,tickFormatter:o})]}):e.jsxs(e.Fragment,{children:[e.jsx(t.XAxis,{dataKey:h,tick:g,axisLine:{stroke:l.border},tickLine:!1,tickFormatter:i}),e.jsx(t.YAxis,{tick:g,axisLine:!1,tickLine:!1,tickFormatter:o})]}),j&&e.jsx(t.Tooltip,{contentStyle:n.contentStyle,labelStyle:n.labelStyle,itemStyle:n.itemStyle,cursor:{fill:`${l.surfaceAlt}`}}),u&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:l.textMuted,paddingTop:8}}),S.map((p,s)=>{const L=p.color??f[s%f.length];return e.jsx(t.Bar,{dataKey:p.key,name:p.label??p.key,fill:L,stackId:p.stackId,maxBarSize:y??40,radius:p.radius??[4,4,0,0]},p.key)})]})})})}function M({data:r,series:S,xKey:h,height:m=300,margin:d=v,showGrid:x=!0,showLegend:u=!0,showTooltip:j=!0,smooth:a=!0,referenceLines:y=[],xTickFormatter:i,yTickFormatter:o,yDomain:c,connectNulls:l=!1,ariaLabel:f="Line chart"}){const n=b.useTheme(),g=C(n),k=T(n),p={fill:n.textMuted,fontSize:12};return e.jsx("div",{role:"img","aria-label":f,style:{width:"100%",height:m},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.LineChart,{data:r,margin:d,children:[x&&e.jsx(t.CartesianGrid,{strokeDasharray:"3 3",stroke:n.border,vertical:!1}),e.jsx(t.XAxis,{dataKey:h,tick:p,axisLine:{stroke:n.border},tickLine:!1,tickFormatter:i}),e.jsx(t.YAxis,{tick:p,axisLine:!1,tickLine:!1,tickFormatter:o,domain:c}),j&&e.jsx(t.Tooltip,{contentStyle:k.contentStyle,labelStyle:k.labelStyle,itemStyle:k.itemStyle,cursor:{stroke:n.border,strokeWidth:1}}),u&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:n.textMuted,paddingTop:8}}),y.map((s,L)=>e.jsx(t.ReferenceLine,{y:s.y,x:s.x,label:s.label?{value:s.label,fill:n.textMuted,fontSize:11}:void 0,stroke:s.color??n.border,strokeDasharray:s.dashed?"4 4":void 0},L)),S.map((s,L)=>{const w=s.color??g[L%g.length];return e.jsx(t.Line,{type:a?"monotone":"linear",dataKey:s.key,name:s.label??s.key,stroke:w,strokeWidth:s.strokeWidth??2,strokeDasharray:s.dashed?"6 3":void 0,dot:s.dot??!1,activeDot:{r:5,strokeWidth:0,fill:w},connectNulls:l},s.key)})]})})})}function R({data:r,height:S=300,showLegend:h=!0,showTooltip:m=!0,showLabels:d=!1,outerRadius:x="70%",startAngle:u=90,ariaLabel:j="Pie chart"}){const a=b.useTheme(),y=C(a),i=T(a);return e.jsx("div",{role:"img","aria-label":j,style:{width:"100%",height:S},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.PieChart,{children:[m&&e.jsx(t.Tooltip,{contentStyle:i.contentStyle,labelStyle:i.labelStyle,itemStyle:i.itemStyle}),h&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:a.textMuted}}),e.jsx(t.Pie,{data:r,dataKey:"value",nameKey:"name",outerRadius:x,startAngle:u,endAngle:u-360,label:d?({name:o,percent:c})=>`${o} (${(c*100).toFixed(0)}%)`:void 0,labelLine:d,strokeWidth:2,stroke:a.bg,children:r.map((o,c)=>e.jsx(t.Cell,{fill:o.color??y[c%y.length]},o.name))})]})})})}function D({data:r,height:S=300,showLegend:h=!0,showTooltip:m=!0,centerLabel:d,centerSublabel:x,innerRadius:u="55%",outerRadius:j="75%",startAngle:a=90,ariaLabel:y="Donut chart"}){const i=b.useTheme(),o=C(i),c=T(i);return e.jsxs("div",{role:"img","aria-label":y,style:{width:"100%",height:S},children:[e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.PieChart,{children:[m&&e.jsx(t.Tooltip,{contentStyle:c.contentStyle,labelStyle:c.labelStyle,itemStyle:c.itemStyle}),h&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:i.textMuted}}),e.jsx(t.Pie,{data:r,dataKey:"value",nameKey:"name",innerRadius:u,outerRadius:j,startAngle:a,endAngle:a-360,strokeWidth:3,stroke:i.bg,label:!1,labelLine:!1,children:r.map((l,f)=>e.jsx(t.Cell,{fill:l.color??o[f%o.length]},l.name))}),(d||x)&&e.jsx("text",{})]})}),(d||x)&&e.jsxs("div",{style:{position:"absolute",inset:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",pointerEvents:"none",marginTop:h?-24:0},children:[d&&e.jsx("span",{style:{fontSize:22,fontWeight:700,color:i.text,lineHeight:1},children:d}),x&&e.jsx("span",{style:{fontSize:13,color:i.textMuted,marginTop:4},children:x})]})]})}function K({series:r,height:S=300,margin:h=v,showGrid:m=!0,showLegend:d=!0,showTooltip:x=!0,xTickFormatter:u,yTickFormatter:j,zRange:a=[20,400],ariaLabel:y="Scatter chart"}){const i=b.useTheme(),o=C(i),c=T(i),l={fill:i.textMuted,fontSize:12};return e.jsx("div",{role:"img","aria-label":y,style:{width:"100%",height:S},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.ScatterChart,{margin:h,children:[m&&e.jsx(t.CartesianGrid,{strokeDasharray:"3 3",stroke:i.border}),e.jsx(t.XAxis,{type:"number",dataKey:"x",tick:l,axisLine:{stroke:i.border},tickLine:!1,tickFormatter:u}),e.jsx(t.YAxis,{type:"number",dataKey:"y",tick:l,axisLine:!1,tickLine:!1,tickFormatter:j}),e.jsx(t.ZAxis,{type:"number",dataKey:"z",range:a}),x&&e.jsx(t.Tooltip,{contentStyle:c.contentStyle,labelStyle:c.labelStyle,itemStyle:c.itemStyle,cursor:{strokeDasharray:"3 3"}}),d&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:i.textMuted,paddingTop:8}}),r.map((f,n)=>e.jsx(t.Scatter,{name:f.name,data:f.data,fill:f.color??o[n%o.length],fillOpacity:.8},f.name??n))]})})})}function F({data:r,series:S,angleKey:h,height:m=300,showLegend:d=!0,showTooltip:x=!0,outerRadius:u="70%",ariaLabel:j="Radar chart"}){const a=b.useTheme(),y=C(a),i=T(a);return e.jsx("div",{role:"img","aria-label":j,style:{width:"100%",height:m},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.RadarChart,{data:r,outerRadius:u,children:[e.jsx(t.PolarGrid,{stroke:a.border}),e.jsx(t.PolarAngleAxis,{dataKey:h,tick:{fill:a.textMuted,fontSize:12}}),e.jsx(t.PolarRadiusAxis,{tick:{fill:a.textMuted,fontSize:10},axisLine:!1,tickLine:!1}),x&&e.jsx(t.Tooltip,{contentStyle:i.contentStyle,labelStyle:i.labelStyle,itemStyle:i.itemStyle}),d&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:a.textMuted}}),S.map((o,c)=>{const l=o.color??y[c%y.length];return e.jsx(t.Radar,{name:o.label??o.key,dataKey:o.key,stroke:l,fill:l,fillOpacity:o.fillOpacity??.2,strokeWidth:2},o.key)})]})})})}exports.TkxAreaChart=A;exports.TkxBarChart=z;exports.TkxDonutChart=D;exports.TkxLineChart=M;exports.TkxPieChart=R;exports.TkxRadarChart=F;exports.TkxScatterChart=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("recharts"),g=require("./index-BINBzXuY.cjs"),L=require("react");function C(i){return[i.primary,i.secondary,i.info,i.success,i.warning,i.danger,"#a855f7","#f97316","#14b8a6","#e879f9"]}const A={top:10,right:30,bottom:10,left:0};function T(i){return{contentStyle:{backgroundColor:i.surface,border:`1px solid ${i.border}`,borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,0.15)",color:i.text,fontSize:13},labelStyle:{color:i.textMuted,fontWeight:600,marginBottom:4},itemStyle:{color:i.text},cursor:{fill:`${i.primary}15`}}}function z({data:i,series:m,xKey:y,height:S=300,margin:d=A,showGrid:h=!0,showLegend:f=!0,showTooltip:p=!0,smooth:l=!0,xTickFormatter:u,yTickFormatter:o,yDomain:n,ariaLabel:x="Area chart"}){const r=g.useTheme(),c=C(r),a=T(r),j={fill:r.textMuted,fontSize:12};return e.jsx("div",{role:"img","aria-label":x,style:{width:"100%",height:S},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.AreaChart,{data:i,margin:d,children:[h&&e.jsx(t.CartesianGrid,{strokeDasharray:"3 3",stroke:r.border,vertical:!1}),e.jsx(t.XAxis,{dataKey:y,tick:j,axisLine:{stroke:r.border},tickLine:!1,tickFormatter:u}),e.jsx(t.YAxis,{tick:j,axisLine:!1,tickLine:!1,tickFormatter:o,domain:n}),p&&e.jsx(t.Tooltip,{contentStyle:a.contentStyle,labelStyle:a.labelStyle,itemStyle:a.itemStyle,cursor:a.cursor}),f&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:r.textMuted,paddingTop:8}}),m.map((k,b)=>{const s=k.color??c[b%c.length];return e.jsx(t.Area,{type:l?"monotone":"linear",dataKey:k.key,name:k.label??k.key,stroke:s,strokeWidth:2,fill:s,fillOpacity:k.fillOpacity??.2,stackId:k.stacked?"stack":void 0,dot:!1,activeDot:{r:5,strokeWidth:0}},k.key)})]})})})}function M({data:i,series:m,xKey:y,height:S=300,margin:d=A,showGrid:h=!0,showLegend:f=!0,showTooltip:p=!0,layout:l="horizontal",barSize:u,xTickFormatter:o,yTickFormatter:n,ariaLabel:x="Bar chart"}){const r=g.useTheme(),c=C(r),a=T(r),j={fill:r.textMuted,fontSize:12},k=l==="vertical";return e.jsx("div",{role:"img","aria-label":x,style:{width:"100%",height:S},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.BarChart,{data:i,margin:d,layout:l,children:[h&&e.jsx(t.CartesianGrid,{strokeDasharray:"3 3",stroke:r.border,vertical:k,horizontal:!k}),k?e.jsxs(e.Fragment,{children:[e.jsx(t.YAxis,{dataKey:y,type:"category",tick:j,axisLine:!1,tickLine:!1,tickFormatter:o,width:100}),e.jsx(t.XAxis,{type:"number",tick:j,axisLine:{stroke:r.border},tickLine:!1,tickFormatter:n})]}):e.jsxs(e.Fragment,{children:[e.jsx(t.XAxis,{dataKey:y,tick:j,axisLine:{stroke:r.border},tickLine:!1,tickFormatter:o}),e.jsx(t.YAxis,{tick:j,axisLine:!1,tickLine:!1,tickFormatter:n})]}),p&&e.jsx(t.Tooltip,{contentStyle:a.contentStyle,labelStyle:a.labelStyle,itemStyle:a.itemStyle,cursor:{fill:`${r.surfaceAlt}`}}),f&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:r.textMuted,paddingTop:8}}),m.map((b,s)=>{const v=b.color??c[s%c.length];return e.jsx(t.Bar,{dataKey:b.key,name:b.label??b.key,fill:v,stackId:b.stackId,maxBarSize:u??40,radius:b.radius??[4,4,0,0]},b.key)})]})})})}function R({data:i,series:m,xKey:y,height:S=300,margin:d=A,showGrid:h=!0,showLegend:f=!0,showTooltip:p=!0,smooth:l=!0,referenceLines:u=[],xTickFormatter:o,yTickFormatter:n,yDomain:x,connectNulls:r=!1,ariaLabel:c="Line chart"}){const a=g.useTheme(),j=C(a),k=T(a),b={fill:a.textMuted,fontSize:12};return e.jsx("div",{role:"img","aria-label":c,style:{width:"100%",height:S},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.LineChart,{data:i,margin:d,children:[h&&e.jsx(t.CartesianGrid,{strokeDasharray:"3 3",stroke:a.border,vertical:!1}),e.jsx(t.XAxis,{dataKey:y,tick:b,axisLine:{stroke:a.border},tickLine:!1,tickFormatter:o}),e.jsx(t.YAxis,{tick:b,axisLine:!1,tickLine:!1,tickFormatter:n,domain:x}),p&&e.jsx(t.Tooltip,{contentStyle:k.contentStyle,labelStyle:k.labelStyle,itemStyle:k.itemStyle,cursor:{stroke:a.border,strokeWidth:1}}),f&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:a.textMuted,paddingTop:8}}),u.map((s,v)=>e.jsx(t.ReferenceLine,{y:s.y,x:s.x,label:s.label?{value:s.label,fill:a.textMuted,fontSize:11}:void 0,stroke:s.color??a.border,strokeDasharray:s.dashed?"4 4":void 0},v)),m.map((s,v)=>{const w=s.color??j[v%j.length];return e.jsx(t.Line,{type:l?"monotone":"linear",dataKey:s.key,name:s.label??s.key,stroke:w,strokeWidth:s.strokeWidth??2,strokeDasharray:s.dashed?"6 3":void 0,dot:s.dot??!1,activeDot:{r:5,strokeWidth:0,fill:w},connectNulls:r},s.key)})]})})})}function F({data:i,height:m=300,showLegend:y=!0,showTooltip:S=!0,showLabels:d=!1,outerRadius:h="70%",startAngle:f=90,ariaLabel:p="Pie chart"}){const l=g.useTheme(),u=C(l),o=T(l),[n,x]=L.useState(!1);return L.useEffect(()=>{const r=requestAnimationFrame(()=>x(!0));return()=>cancelAnimationFrame(r)},[]),e.jsx("div",{role:"img","aria-label":p,style:{width:"100%",minWidth:240,height:m,position:"relative"},children:n&&e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",debounce:50,children:e.jsxs(t.PieChart,{children:[S&&e.jsx(t.Tooltip,{contentStyle:o.contentStyle,labelStyle:o.labelStyle,itemStyle:o.itemStyle}),y&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:l.textMuted}}),e.jsx(t.Pie,{data:i,dataKey:"value",nameKey:"name",outerRadius:h,startAngle:f,endAngle:f-360,label:d?({name:r,percent:c})=>`${r} (${(c*100).toFixed(0)}%)`:void 0,labelLine:d,strokeWidth:2,stroke:l.bg,children:i.map((r,c)=>e.jsx(t.Cell,{fill:r.color??u[c%u.length]},r.name))})]})})})}function D({data:i,height:m=300,showLegend:y=!0,showTooltip:S=!0,centerLabel:d,centerSublabel:h,innerRadius:f="55%",outerRadius:p="75%",startAngle:l=90,ariaLabel:u="Donut chart"}){const o=g.useTheme(),n=C(o),x=T(o),[r,c]=L.useState(!1);return L.useEffect(()=>{const a=requestAnimationFrame(()=>c(!0));return()=>cancelAnimationFrame(a)},[]),e.jsxs("div",{role:"img","aria-label":u,style:{width:"100%",minWidth:240,height:m,position:"relative"},children:[r&&e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",debounce:50,children:e.jsxs(t.PieChart,{children:[S&&e.jsx(t.Tooltip,{contentStyle:x.contentStyle,labelStyle:x.labelStyle,itemStyle:x.itemStyle}),y&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:o.textMuted}}),e.jsx(t.Pie,{data:i,dataKey:"value",nameKey:"name",innerRadius:f,outerRadius:p,startAngle:l,endAngle:l-360,strokeWidth:3,stroke:o.bg,label:!1,labelLine:!1,children:i.map((a,j)=>e.jsx(t.Cell,{fill:a.color??n[j%n.length]},a.name))}),(d||h)&&e.jsx("text",{})]})}),(d||h)&&e.jsxs("div",{style:{position:"absolute",inset:0,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",pointerEvents:"none",marginTop:y?-24:0},children:[d&&e.jsx("span",{style:{fontSize:22,fontWeight:700,color:o.text,lineHeight:1},children:d}),h&&e.jsx("span",{style:{fontSize:13,color:o.textMuted,marginTop:4},children:h})]})]})}function K({series:i,height:m=300,margin:y=A,showGrid:S=!0,showLegend:d=!0,showTooltip:h=!0,xTickFormatter:f,yTickFormatter:p,zRange:l=[20,400],ariaLabel:u="Scatter chart"}){const o=g.useTheme(),n=C(o),x=T(o),r={fill:o.textMuted,fontSize:12};return e.jsx("div",{role:"img","aria-label":u,style:{width:"100%",height:m},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.ScatterChart,{margin:y,children:[S&&e.jsx(t.CartesianGrid,{strokeDasharray:"3 3",stroke:o.border}),e.jsx(t.XAxis,{type:"number",dataKey:"x",tick:r,axisLine:{stroke:o.border},tickLine:!1,tickFormatter:f}),e.jsx(t.YAxis,{type:"number",dataKey:"y",tick:r,axisLine:!1,tickLine:!1,tickFormatter:p}),e.jsx(t.ZAxis,{type:"number",dataKey:"z",range:l}),h&&e.jsx(t.Tooltip,{contentStyle:x.contentStyle,labelStyle:x.labelStyle,itemStyle:x.itemStyle,cursor:{strokeDasharray:"3 3"}}),d&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:o.textMuted,paddingTop:8}}),i.map((c,a)=>e.jsx(t.Scatter,{name:c.name,data:c.data,fill:c.color??n[a%n.length],fillOpacity:.8},c.name??a))]})})})}function W({data:i,series:m,angleKey:y,height:S=300,showLegend:d=!0,showTooltip:h=!0,outerRadius:f="70%",ariaLabel:p="Radar chart"}){const l=g.useTheme(),u=C(l),o=T(l);return e.jsx("div",{role:"img","aria-label":p,style:{width:"100%",height:S},children:e.jsx(t.ResponsiveContainer,{width:"100%",height:"100%",children:e.jsxs(t.RadarChart,{data:i,outerRadius:f,children:[e.jsx(t.PolarGrid,{stroke:l.border}),e.jsx(t.PolarAngleAxis,{dataKey:y,tick:{fill:l.textMuted,fontSize:12}}),e.jsx(t.PolarRadiusAxis,{tick:{fill:l.textMuted,fontSize:10},axisLine:!1,tickLine:!1}),h&&e.jsx(t.Tooltip,{contentStyle:o.contentStyle,labelStyle:o.labelStyle,itemStyle:o.itemStyle}),d&&e.jsx(t.Legend,{wrapperStyle:{fontSize:13,color:l.textMuted}}),m.map((n,x)=>{const r=n.color??u[x%u.length];return e.jsx(t.Radar,{name:n.label??n.key,dataKey:n.key,stroke:r,fill:r,fillOpacity:n.fillOpacity??.2,strokeWidth:2},n.key)})]})})})}exports.TkxAreaChart=z;exports.TkxBarChart=M;exports.TkxDonutChart=D;exports.TkxLineChart=R;exports.TkxPieChart=F;exports.TkxRadarChart=W;exports.TkxScatterChart=K;

package/dist/charts.js

@@ -1,235 +1,236 @@
-import { jsx as t, jsxs as b, Fragment as R } from "react/jsx-runtime";
-import { ResponsiveContainer as L, AreaChart as O, CartesianGrid as A, XAxis as D, YAxis as T, Tooltip as v, Legend as w, Area as $, BarChart as j, Bar as G, LineChart as E, ReferenceLine as H, Line as N, PieChart as P, Pie as B, Cell as I, ScatterChart as U, ZAxis as V, Scatter as X, RadarChart as Y, PolarGrid as Z, PolarAngleAxis as _, PolarRadiusAxis as q, Radar as J } from "recharts";
+import { jsx as t, jsxs as g, Fragment as R } from "react/jsx-runtime";
+import { ResponsiveContainer as v, AreaChart as j, CartesianGrid as D, XAxis as F, YAxis as K, Tooltip as L, Legend as w, Area as E, BarChart as G, Bar as q, LineChart as H, ReferenceLine as N, Line as U, PieChart as P, Pie as B, Cell as I, ScatterChart as V, ZAxis as X, Scatter as Y, RadarChart as Z, PolarGrid as _, PolarAngleAxis as J, PolarRadiusAxis as Q, Radar as tt } from "recharts";
 import { u as z } from "./index-eT_U4qB2.js";
-function C(e) {
+import { useState as O, useEffect as $ } from "react";
+function C(r) {
   return [
-    e.primary,
-    e.secondary,
-    e.info,
-    e.success,
-    e.warning,
-    e.danger,
+    r.primary,
+    r.secondary,
+    r.info,
+    r.success,
+    r.warning,
+    r.danger,
     "#a855f7",
     "#f97316",
     "#14b8a6",
     "#e879f9"
   ];
 }
-const F = { top: 10, right: 30, bottom: 10, left: 0 };
-function M(e) {
+const T = { top: 10, right: 30, bottom: 10, left: 0 };
+function M(r) {
   return {
     contentStyle: {
-      backgroundColor: e.surface,
-      border: `1px solid ${e.border}`,
+      backgroundColor: r.surface,
+      border: `1px solid ${r.border}`,
       borderRadius: 8,
       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-      color: e.text,
+      color: r.text,
       fontSize: 13
     },
-    labelStyle: { color: e.textMuted, fontWeight: 600, marginBottom: 4 },
-    itemStyle: { color: e.text },
-    cursor: { fill: `${e.primary}15` }
+    labelStyle: { color: r.textMuted, fontWeight: 600, marginBottom: 4 },
+    itemStyle: { color: r.text },
+    cursor: { fill: `${r.primary}15` }
   };
 }
-function rt({
-  data: e,
-  series: S,
-  xKey: y,
-  height: m = 300,
-  margin: d = F,
-  showGrid: s = !0,
-  showLegend: f = !0,
+function ot({
+  data: r,
+  series: m,
+  xKey: h,
+  height: S = 300,
+  margin: d = T,
+  showGrid: y = !0,
+  showLegend: k = !0,
   showTooltip: p = !0,
   smooth: o = !0,
-  xTickFormatter: h,
-  yTickFormatter: r,
-  yDomain: l,
-  ariaLabel: c = "Area chart"
+  xTickFormatter: u,
+  yTickFormatter: i,
+  yDomain: a,
+  ariaLabel: s = "Area chart"
 }) {
-  const i = z(), u = C(i), a = M(i), g = { fill: i.textMuted, fontSize: 12 };
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": c, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(O, { data: e, margin: d, children: [
-    s && /* @__PURE__ */ t(A, { strokeDasharray: "3 3", stroke: i.border, vertical: !1 }),
+  const e = z(), c = C(e), l = M(e), x = { fill: e.textMuted, fontSize: 12 };
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": s, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(j, { data: r, margin: d, children: [
+    y && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: e.border, vertical: !1 }),
     /* @__PURE__ */ t(
-      D,
+      F,
       {
-        dataKey: y,
-        tick: g,
-        axisLine: { stroke: i.border },
+        dataKey: h,
+        tick: x,
+        axisLine: { stroke: e.border },
         tickLine: !1,
-        tickFormatter: h
+        tickFormatter: u
       }
     ),
     /* @__PURE__ */ t(
-      T,
+      K,
       {
-        tick: g,
+        tick: x,
         axisLine: !1,
         tickLine: !1,
-        tickFormatter: r,
-        domain: l
+        tickFormatter: i,
+        domain: a
       }
     ),
     p && /* @__PURE__ */ t(
-      v,
+      L,
       {
-        contentStyle: a.contentStyle,
-        labelStyle: a.labelStyle,
-        itemStyle: a.itemStyle,
-        cursor: a.cursor
+        contentStyle: l.contentStyle,
+        labelStyle: l.labelStyle,
+        itemStyle: l.itemStyle,
+        cursor: l.cursor
       }
     ),
-    f && /* @__PURE__ */ t(
+    k && /* @__PURE__ */ t(
       w,
       {
-        wrapperStyle: { fontSize: 13, color: i.textMuted, paddingTop: 8 }
+        wrapperStyle: { fontSize: 13, color: e.textMuted, paddingTop: 8 }
       }
     ),
-    S.map((k, x) => {
-      const n = k.color ?? u[x % u.length];
+    m.map((f, b) => {
+      const n = f.color ?? c[b % c.length];
       return /* @__PURE__ */ t(
-        $,
+        E,
         {
           type: o ? "monotone" : "linear",
-          dataKey: k.key,
-          name: k.label ?? k.key,
+          dataKey: f.key,
+          name: f.label ?? f.key,
           stroke: n,
           strokeWidth: 2,
           fill: n,
-          fillOpacity: k.fillOpacity ?? 0.2,
-          stackId: k.stacked ? "stack" : void 0,
+          fillOpacity: f.fillOpacity ?? 0.2,
+          stackId: f.stacked ? "stack" : void 0,
           dot: !1,
           activeDot: { r: 5, strokeWidth: 0 }
         },
-        k.key
+        f.key
       );
     })
   ] }) }) });
 }
-function it({
-  data: e,
-  series: S,
-  xKey: y,
-  height: m = 300,
-  margin: d = F,
-  showGrid: s = !0,
-  showLegend: f = !0,
+function at({
+  data: r,
+  series: m,
+  xKey: h,
+  height: S = 300,
+  margin: d = T,
+  showGrid: y = !0,
+  showLegend: k = !0,
   showTooltip: p = !0,
   layout: o = "horizontal",
-  barSize: h,
-  xTickFormatter: r,
-  yTickFormatter: l,
-  ariaLabel: c = "Bar chart"
+  barSize: u,
+  xTickFormatter: i,
+  yTickFormatter: a,
+  ariaLabel: s = "Bar chart"
 }) {
-  const i = z(), u = C(i), a = M(i), g = { fill: i.textMuted, fontSize: 12 }, k = o === "vertical";
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": c, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(j, { data: e, margin: d, layout: o, children: [
-    s && /* @__PURE__ */ t(
-      A,
+  const e = z(), c = C(e), l = M(e), x = { fill: e.textMuted, fontSize: 12 }, f = o === "vertical";
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": s, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(G, { data: r, margin: d, layout: o, children: [
+    y && /* @__PURE__ */ t(
+      D,
       {
         strokeDasharray: "3 3",
-        stroke: i.border,
-        vertical: k,
-        horizontal: !k
+        stroke: e.border,
+        vertical: f,
+        horizontal: !f
       }
     ),
-    k ? /* @__PURE__ */ b(R, { children: [
-      /* @__PURE__ */ t(T, { dataKey: y, type: "category", tick: g, axisLine: !1, tickLine: !1, tickFormatter: r, width: 100 }),
-      /* @__PURE__ */ t(D, { type: "number", tick: g, axisLine: { stroke: i.border }, tickLine: !1, tickFormatter: l })
-    ] }) : /* @__PURE__ */ b(R, { children: [
-      /* @__PURE__ */ t(D, { dataKey: y, tick: g, axisLine: { stroke: i.border }, tickLine: !1, tickFormatter: r }),
-      /* @__PURE__ */ t(T, { tick: g, axisLine: !1, tickLine: !1, tickFormatter: l })
+    f ? /* @__PURE__ */ g(R, { children: [
+      /* @__PURE__ */ t(K, { dataKey: h, type: "category", tick: x, axisLine: !1, tickLine: !1, tickFormatter: i, width: 100 }),
+      /* @__PURE__ */ t(F, { type: "number", tick: x, axisLine: { stroke: e.border }, tickLine: !1, tickFormatter: a })
+    ] }) : /* @__PURE__ */ g(R, { children: [
+      /* @__PURE__ */ t(F, { dataKey: h, tick: x, axisLine: { stroke: e.border }, tickLine: !1, tickFormatter: i }),
+      /* @__PURE__ */ t(K, { tick: x, axisLine: !1, tickLine: !1, tickFormatter: a })
     ] }),
     p && /* @__PURE__ */ t(
-      v,
+      L,
       {
-        contentStyle: a.contentStyle,
-        labelStyle: a.labelStyle,
-        itemStyle: a.itemStyle,
-        cursor: { fill: `${i.surfaceAlt}` }
+        contentStyle: l.contentStyle,
+        labelStyle: l.labelStyle,
+        itemStyle: l.itemStyle,
+        cursor: { fill: `${e.surfaceAlt}` }
       }
     ),
-    f && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted, paddingTop: 8 } }),
-    S.map((x, n) => {
-      const K = x.color ?? u[n % u.length];
+    k && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: e.textMuted, paddingTop: 8 } }),
+    m.map((b, n) => {
+      const A = b.color ?? c[n % c.length];
       return /* @__PURE__ */ t(
-        G,
+        q,
         {
-          dataKey: x.key,
-          name: x.label ?? x.key,
-          fill: K,
-          stackId: x.stackId,
-          maxBarSize: h ?? 40,
-          radius: x.radius ?? [4, 4, 0, 0]
+          dataKey: b.key,
+          name: b.label ?? b.key,
+          fill: A,
+          stackId: b.stackId,
+          maxBarSize: u ?? 40,
+          radius: b.radius ?? [4, 4, 0, 0]
         },
-        x.key
+        b.key
       );
     })
   ] }) }) });
 }
-function lt({
-  data: e,
-  series: S,
-  xKey: y,
-  height: m = 300,
-  margin: d = F,
-  showGrid: s = !0,
-  showLegend: f = !0,
+function nt({
+  data: r,
+  series: m,
+  xKey: h,
+  height: S = 300,
+  margin: d = T,
+  showGrid: y = !0,
+  showLegend: k = !0,
   showTooltip: p = !0,
   smooth: o = !0,
-  referenceLines: h = [],
-  xTickFormatter: r,
-  yTickFormatter: l,
-  yDomain: c,
-  connectNulls: i = !1,
-  ariaLabel: u = "Line chart"
+  referenceLines: u = [],
+  xTickFormatter: i,
+  yTickFormatter: a,
+  yDomain: s,
+  connectNulls: e = !1,
+  ariaLabel: c = "Line chart"
 }) {
-  const a = z(), g = C(a), k = M(a), x = { fill: a.textMuted, fontSize: 12 };
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": u, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(E, { data: e, margin: d, children: [
-    s && /* @__PURE__ */ t(A, { strokeDasharray: "3 3", stroke: a.border, vertical: !1 }),
+  const l = z(), x = C(l), f = M(l), b = { fill: l.textMuted, fontSize: 12 };
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": c, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(H, { data: r, margin: d, children: [
+    y && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: l.border, vertical: !1 }),
     /* @__PURE__ */ t(
-      D,
+      F,
       {
-        dataKey: y,
-        tick: x,
-        axisLine: { stroke: a.border },
+        dataKey: h,
+        tick: b,
+        axisLine: { stroke: l.border },
         tickLine: !1,
-        tickFormatter: r
+        tickFormatter: i
       }
     ),
     /* @__PURE__ */ t(
-      T,
+      K,
       {
-        tick: x,
+        tick: b,
         axisLine: !1,
         tickLine: !1,
-        tickFormatter: l,
-        domain: c
+        tickFormatter: a,
+        domain: s
       }
     ),
     p && /* @__PURE__ */ t(
-      v,
+      L,
       {
-        contentStyle: k.contentStyle,
-        labelStyle: k.labelStyle,
-        itemStyle: k.itemStyle,
-        cursor: { stroke: a.border, strokeWidth: 1 }
+        contentStyle: f.contentStyle,
+        labelStyle: f.labelStyle,
+        itemStyle: f.itemStyle,
+        cursor: { stroke: l.border, strokeWidth: 1 }
       }
     ),
-    f && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: a.textMuted, paddingTop: 8 } }),
-    h.map((n, K) => /* @__PURE__ */ t(
-      H,
+    k && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: l.textMuted, paddingTop: 8 } }),
+    u.map((n, A) => /* @__PURE__ */ t(
+      N,
       {
         y: n.y,
         x: n.x,
-        label: n.label ? { value: n.label, fill: a.textMuted, fontSize: 11 } : void 0,
-        stroke: n.color ?? a.border,
+        label: n.label ? { value: n.label, fill: l.textMuted, fontSize: 11 } : void 0,
+        stroke: n.color ?? l.border,
         strokeDasharray: n.dashed ? "4 4" : void 0
       },
-      K
+      A
     )),
-    S.map((n, K) => {
-      const W = n.color ?? g[K % g.length];
+    m.map((n, A) => {
+      const W = n.color ?? x[A % x.length];
       return /* @__PURE__ */ t(
-        N,
+        U,
         {
           type: o ? "monotone" : "linear",
           dataKey: n.key,
@@ -239,242 +240,264 @@ function lt({
           strokeDasharray: n.dashed ? "6 3" : void 0,
           dot: n.dot ?? !1,
           activeDot: { r: 5, strokeWidth: 0, fill: W },
-          connectNulls: i
+          connectNulls: e
         },
         n.key
       );
     })
   ] }) }) });
 }
-function ot({
-  data: e,
-  height: S = 300,
-  showLegend: y = !0,
-  showTooltip: m = !0,
+function ct({
+  data: r,
+  height: m = 300,
+  showLegend: h = !0,
+  showTooltip: S = !0,
   showLabels: d = !1,
-  outerRadius: s = "70%",
-  startAngle: f = 90,
+  outerRadius: y = "70%",
+  startAngle: k = 90,
   ariaLabel: p = "Pie chart"
 }) {
-  const o = z(), h = C(o), r = M(o);
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": p, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(P, { children: [
-    m && /* @__PURE__ */ t(
-      v,
-      {
-        contentStyle: r.contentStyle,
-        labelStyle: r.labelStyle,
-        itemStyle: r.itemStyle
-      }
-    ),
-    y && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
-    /* @__PURE__ */ t(
-      B,
-      {
-        data: e,
-        dataKey: "value",
-        nameKey: "name",
-        outerRadius: s,
-        startAngle: f,
-        endAngle: f - 360,
-        label: d ? ({ name: l, percent: c }) => `${l} (${(c * 100).toFixed(0)}%)` : void 0,
-        labelLine: d,
-        strokeWidth: 2,
-        stroke: o.bg,
-        children: e.map((l, c) => /* @__PURE__ */ t(
-          I,
+  const o = z(), u = C(o), i = M(o), [a, s] = O(!1);
+  return $(() => {
+    const e = requestAnimationFrame(() => s(!0));
+    return () => cancelAnimationFrame(e);
+  }, []), /* @__PURE__ */ t(
+    "div",
+    {
+      role: "img",
+      "aria-label": p,
+      style: { width: "100%", minWidth: 240, height: m, position: "relative" },
+      children: a && /* @__PURE__ */ t(v, { width: "100%", height: "100%", debounce: 50, children: /* @__PURE__ */ g(P, { children: [
+        S && /* @__PURE__ */ t(
+          L,
           {
-            fill: l.color ?? h[c % h.length]
-          },
-          l.name
-        ))
-      }
-    )
-  ] }) }) });
+            contentStyle: i.contentStyle,
+            labelStyle: i.labelStyle,
+            itemStyle: i.itemStyle
+          }
+        ),
+        h && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
+        /* @__PURE__ */ t(
+          B,
+          {
+            data: r,
+            dataKey: "value",
+            nameKey: "name",
+            outerRadius: y,
+            startAngle: k,
+            endAngle: k - 360,
+            label: d ? ({ name: e, percent: c }) => `${e} (${(c * 100).toFixed(0)}%)` : void 0,
+            labelLine: d,
+            strokeWidth: 2,
+            stroke: o.bg,
+            children: r.map((e, c) => /* @__PURE__ */ t(
+              I,
+              {
+                fill: e.color ?? u[c % u.length]
+              },
+              e.name
+            ))
+          }
+        )
+      ] }) })
+    }
+  );
 }
-function at({
-  data: e,
-  height: S = 300,
-  showLegend: y = !0,
-  showTooltip: m = !0,
+function dt({
+  data: r,
+  height: m = 300,
+  showLegend: h = !0,
+  showTooltip: S = !0,
   centerLabel: d,
-  centerSublabel: s,
-  innerRadius: f = "55%",
+  centerSublabel: y,
+  innerRadius: k = "55%",
   outerRadius: p = "75%",
   startAngle: o = 90,
-  ariaLabel: h = "Donut chart"
+  ariaLabel: u = "Donut chart"
 }) {
-  const r = z(), l = C(r), c = M(r);
-  return /* @__PURE__ */ b("div", { role: "img", "aria-label": h, style: { width: "100%", height: S }, children: [
-    /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(P, { children: [
-      m && /* @__PURE__ */ t(
-        v,
-        {
-          contentStyle: c.contentStyle,
-          labelStyle: c.labelStyle,
-          itemStyle: c.itemStyle
-        }
-      ),
-      y && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: r.textMuted } }),
-      /* @__PURE__ */ t(
-        B,
-        {
-          data: e,
-          dataKey: "value",
-          nameKey: "name",
-          innerRadius: f,
-          outerRadius: p,
-          startAngle: o,
-          endAngle: o - 360,
-          strokeWidth: 3,
-          stroke: r.bg,
-          label: !1,
-          labelLine: !1,
-          children: e.map((i, u) => /* @__PURE__ */ t(I, { fill: i.color ?? l[u % l.length] }, i.name))
-        }
-      ),
-      (d || s) && /* @__PURE__ */ t("text", {})
-    ] }) }),
-    (d || s) && /* @__PURE__ */ b(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          pointerEvents: "none",
-          marginTop: y ? -24 : 0
-        },
-        children: [
-          d && /* @__PURE__ */ t("span", { style: { fontSize: 22, fontWeight: 700, color: r.text, lineHeight: 1 }, children: d }),
-          s && /* @__PURE__ */ t("span", { style: { fontSize: 13, color: r.textMuted, marginTop: 4 }, children: s })
-        ]
-      }
-    )
-  ] });
+  const i = z(), a = C(i), s = M(i), [e, c] = O(!1);
+  return $(() => {
+    const l = requestAnimationFrame(() => c(!0));
+    return () => cancelAnimationFrame(l);
+  }, []), /* @__PURE__ */ g(
+    "div",
+    {
+      role: "img",
+      "aria-label": u,
+      style: { width: "100%", minWidth: 240, height: m, position: "relative" },
+      children: [
+        e && /* @__PURE__ */ t(v, { width: "100%", height: "100%", debounce: 50, children: /* @__PURE__ */ g(P, { children: [
+          S && /* @__PURE__ */ t(
+            L,
+            {
+              contentStyle: s.contentStyle,
+              labelStyle: s.labelStyle,
+              itemStyle: s.itemStyle
+            }
+          ),
+          h && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted } }),
+          /* @__PURE__ */ t(
+            B,
+            {
+              data: r,
+              dataKey: "value",
+              nameKey: "name",
+              innerRadius: k,
+              outerRadius: p,
+              startAngle: o,
+              endAngle: o - 360,
+              strokeWidth: 3,
+              stroke: i.bg,
+              label: !1,
+              labelLine: !1,
+              children: r.map((l, x) => /* @__PURE__ */ t(I, { fill: l.color ?? a[x % a.length] }, l.name))
+            }
+          ),
+          (d || y) && /* @__PURE__ */ t("text", {})
+        ] }) }),
+        (d || y) && /* @__PURE__ */ g(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none",
+              marginTop: h ? -24 : 0
+            },
+            children: [
+              d && /* @__PURE__ */ t("span", { style: { fontSize: 22, fontWeight: 700, color: i.text, lineHeight: 1 }, children: d }),
+              y && /* @__PURE__ */ t("span", { style: { fontSize: 13, color: i.textMuted, marginTop: 4 }, children: y })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-function nt({
-  series: e,
-  height: S = 300,
-  margin: y = F,
-  showGrid: m = !0,
+function st({
+  series: r,
+  height: m = 300,
+  margin: h = T,
+  showGrid: S = !0,
   showLegend: d = !0,
-  showTooltip: s = !0,
-  xTickFormatter: f,
+  showTooltip: y = !0,
+  xTickFormatter: k,
   yTickFormatter: p,
   zRange: o = [20, 400],
-  ariaLabel: h = "Scatter chart"
+  ariaLabel: u = "Scatter chart"
 }) {
-  const r = z(), l = C(r), c = M(r), i = { fill: r.textMuted, fontSize: 12 };
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": h, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(U, { margin: y, children: [
-    m && /* @__PURE__ */ t(A, { strokeDasharray: "3 3", stroke: r.border }),
+  const i = z(), a = C(i), s = M(i), e = { fill: i.textMuted, fontSize: 12 };
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": u, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(V, { margin: h, children: [
+    S && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: i.border }),
     /* @__PURE__ */ t(
-      D,
+      F,
       {
         type: "number",
         dataKey: "x",
-        tick: i,
-        axisLine: { stroke: r.border },
+        tick: e,
+        axisLine: { stroke: i.border },
         tickLine: !1,
-        tickFormatter: f
+        tickFormatter: k
       }
     ),
     /* @__PURE__ */ t(
-      T,
+      K,
       {
         type: "number",
         dataKey: "y",
-        tick: i,
+        tick: e,
         axisLine: !1,
         tickLine: !1,
         tickFormatter: p
       }
     ),
-    /* @__PURE__ */ t(V, { type: "number", dataKey: "z", range: o }),
-    s && /* @__PURE__ */ t(
-      v,
+    /* @__PURE__ */ t(X, { type: "number", dataKey: "z", range: o }),
+    y && /* @__PURE__ */ t(
+      L,
       {
-        contentStyle: c.contentStyle,
-        labelStyle: c.labelStyle,
-        itemStyle: c.itemStyle,
+        contentStyle: s.contentStyle,
+        labelStyle: s.labelStyle,
+        itemStyle: s.itemStyle,
         cursor: { strokeDasharray: "3 3" }
       }
     ),
-    d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: r.textMuted, paddingTop: 8 } }),
-    e.map((u, a) => /* @__PURE__ */ t(
-      X,
+    d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted, paddingTop: 8 } }),
+    r.map((c, l) => /* @__PURE__ */ t(
+      Y,
       {
-        name: u.name,
-        data: u.data,
-        fill: u.color ?? l[a % l.length],
+        name: c.name,
+        data: c.data,
+        fill: c.color ?? a[l % a.length],
         fillOpacity: 0.8
       },
-      u.name ?? a
+      c.name ?? l
     ))
   ] }) }) });
 }
-function ct({
-  data: e,
-  series: S,
-  angleKey: y,
-  height: m = 300,
+function yt({
+  data: r,
+  series: m,
+  angleKey: h,
+  height: S = 300,
   showLegend: d = !0,
-  showTooltip: s = !0,
-  outerRadius: f = "70%",
+  showTooltip: y = !0,
+  outerRadius: k = "70%",
   ariaLabel: p = "Radar chart"
 }) {
-  const o = z(), h = C(o), r = M(o);
-  return /* @__PURE__ */ t("div", { role: "img", "aria-label": p, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(L, { width: "100%", height: "100%", children: /* @__PURE__ */ b(Y, { data: e, outerRadius: f, children: [
-    /* @__PURE__ */ t(Z, { stroke: o.border }),
+  const o = z(), u = C(o), i = M(o);
+  return /* @__PURE__ */ t("div", { role: "img", "aria-label": p, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(Z, { data: r, outerRadius: k, children: [
+    /* @__PURE__ */ t(_, { stroke: o.border }),
     /* @__PURE__ */ t(
-      _,
+      J,
       {
-        dataKey: y,
+        dataKey: h,
         tick: { fill: o.textMuted, fontSize: 12 }
       }
     ),
     /* @__PURE__ */ t(
-      q,
+      Q,
       {
         tick: { fill: o.textMuted, fontSize: 10 },
         axisLine: !1,
         tickLine: !1
       }
     ),
-    s && /* @__PURE__ */ t(
-      v,
+    y && /* @__PURE__ */ t(
+      L,
       {
-        contentStyle: r.contentStyle,
-        labelStyle: r.labelStyle,
-        itemStyle: r.itemStyle
+        contentStyle: i.contentStyle,
+        labelStyle: i.labelStyle,
+        itemStyle: i.itemStyle
       }
     ),
     d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
-    S.map((l, c) => {
-      const i = l.color ?? h[c % h.length];
+    m.map((a, s) => {
+      const e = a.color ?? u[s % u.length];
       return /* @__PURE__ */ t(
-        J,
+        tt,
         {
-          name: l.label ?? l.key,
-          dataKey: l.key,
-          stroke: i,
-          fill: i,
-          fillOpacity: l.fillOpacity ?? 0.2,
+          name: a.label ?? a.key,
+          dataKey: a.key,
+          stroke: e,
+          fill: e,
+          fillOpacity: a.fillOpacity ?? 0.2,
           strokeWidth: 2
         },
-        l.key
+        a.key
       );
     })
   ] }) }) });
 }
 export {
-  rt as TkxAreaChart,
-  it as TkxBarChart,
-  at as TkxDonutChart,
-  lt as TkxLineChart,
-  ot as TkxPieChart,
-  ct as TkxRadarChart,
-  nt as TkxScatterChart
+  ot as TkxAreaChart,
+  at as TkxBarChart,
+  dt as TkxDonutChart,
+  nt as TkxLineChart,
+  ct as TkxPieChart,
+  yt as TkxRadarChart,
+  st as TkxScatterChart
 };

package/dist/src/charts/TkxDonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TkxDonutChart.d.ts","sourceRoot":"","sources":["../../../src/charts/TkxDonutChart.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,MAAY,EACZ,UAAiB,EACjB,WAAkB,EAClB,WAAW,EACX,cAAc,EACd,WAAmB,EACnB,WAAmB,EACnB,UAAe,EACf,SAAyB,GAC1B,EAAE,kBAAkB,2CAyEpB"}
+{"version":3,"file":"TkxDonutChart.d.ts","sourceRoot":"","sources":["../../../src/charts/TkxDonutChart.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4BD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,MAAY,EACZ,UAAiB,EACjB,WAAkB,EAClB,WAAW,EACX,cAAc,EACd,WAAmB,EACnB,WAAmB,EACnB,UAAe,EACf,SAAyB,GAC1B,EAAE,kBAAkB,2CAqFpB"}

package/dist/src/charts/TkxPieChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TkxPieChart.d.ts","sourceRoot":"","sources":["../../../src/charts/TkxPieChart.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAY,EACZ,UAAiB,EACjB,WAAkB,EAClB,UAAkB,EAClB,WAAmB,EACnB,UAAe,EACf,SAAuB,GACxB,EAAE,gBAAgB,2CA0ClB"}
+{"version":3,"file":"TkxPieChart.d.ts","sourceRoot":"","sources":["../../../src/charts/TkxPieChart.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAY,EACZ,UAAiB,EACjB,WAAkB,EAClB,UAAkB,EAClB,WAAmB,EACnB,UAAe,EACf,SAAuB,GACxB,EAAE,gBAAgB,2CAwDlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tekivex-ui",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "Production-grade React component library — 70+ components, WCAG 2.1 AAA, WAI-ARIA 1.2, built-in charts, headless primitives, zero-runtime CSS engine, TypeScript-first.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/charts/TkxDonutChart.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   ResponsiveContainer,
   PieChart,
@@ -73,10 +74,21 @@ export function TkxDonutChart({
   const theme = useTheme();
   const colors = getDefaultColors(theme);
   const tt = tooltipStyle(theme);
+  // Force ResponsiveContainer to re-measure after the parent layout settles.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
 
   return (
-    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
-      <ResponsiveContainer width="100%" height="100%">
+    <div
+      role="img"
+      aria-label={ariaLabel}
+      style={{ width: '100%', minWidth: 240, height, position: 'relative' }}
+    >
+      {mounted && (
+      <ResponsiveContainer width="100%" height="100%" debounce={50}>
         <PieChart>
           {showTooltip && (
             <Tooltip
@@ -114,6 +126,7 @@ export function TkxDonutChart({
           )}
         </PieChart>
       </ResponsiveContainer>
+      )}
       {/* Overlay center label using absolute positioning */}
       {(centerLabel || centerSublabel) && (
         <div

package/src/charts/TkxPieChart.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   ResponsiveContainer,
   PieChart,
@@ -41,10 +42,23 @@ export function TkxPieChart({
   const theme = useTheme();
   const colors = getDefaultColors(theme);
   const tt = tooltipStyle(theme);
+  // Force ResponsiveContainer to re-measure after the parent layout settles.
+  // Without this, recharts can compute 0×0 on first paint inside CSS grids/flex
+  // and the chart silently disappears.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
 
   return (
-    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
-      <ResponsiveContainer width="100%" height="100%">
+    <div
+      role="img"
+      aria-label={ariaLabel}
+      style={{ width: '100%', minWidth: 240, height, position: 'relative' }}
+    >
+      {mounted && (
+      <ResponsiveContainer width="100%" height="100%" debounce={50}>
         <PieChart>
           {showTooltip && (
             <Tooltip
@@ -77,6 +91,7 @@ export function TkxPieChart({
           </Pie>
         </PieChart>
       </ResponsiveContainer>
+      )}
     </div>
   );
 }