tembro 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file.
 
+## 4.0.1 - 2026-07-17
+
+### Changed
+
+- Fixed viewport workspaces so the document never competes with `WorkspaceMain` for vertical scrolling.
+- Rebalanced light and dark surface, border, elevation, hover, active, and keyboard-focus tokens.
+- Added multi-series grouped and stacked bars, multi-series line and gradient area charts, legends, curves, dots, and accessible series tables.
+- Improved responsive chart and dashboard composition while preserving the existing single-series API.
+
 ## 4.0.0 - 2026-07-17
 
 ### Added

package/dist/components/charts/charts.d.ts

@@ -12,6 +12,7 @@ export type ChartSeries = {
     data: number[];
     color?: string;
 };
+export type ChartCurve = "linear" | "monotone" | "natural" | "step";
 export type ChartAxisLabel = string | number | React.ReactNode;
 export type ChartSize = "sm" | "md" | "lg";
 export type ChartState = "ready" | "loading" | "empty";
@@ -41,7 +42,8 @@ export type ChartFrameProps = React.ComponentProps<typeof Card> & {
 };
 declare function ChartFrame({ title, description, action, state, emptyLabel, className, children, ...props }: ChartFrameProps): React.JSX.Element;
 export type BarChartProps = React.ComponentProps<"div"> & {
-    data: ChartDatum[];
+    data?: ChartDatum[];
+    series?: ChartSeries[];
     size?: ChartSize;
     max?: number;
     showLabels?: boolean;
@@ -54,10 +56,14 @@ export type BarChartProps = React.ComponentProps<"div"> & {
     barClassName?: string;
     domain?: ChartDomain;
     ariaLabel?: string;
+    stacked?: boolean;
+    showLegend?: boolean;
+    barRadius?: number;
 };
-declare function BarChart({ data, size, max, showLabels, showValues, showGrid, showTooltip, valueFormatter, state, emptyLabel, barClassName, domain, ariaLabel, className, ...props }: BarChartProps): React.JSX.Element;
+declare function BarChart({ data, series, size, max, showLabels, showValues, showGrid, showTooltip, valueFormatter, state, emptyLabel, barClassName, domain, ariaLabel, stacked, showLegend, barRadius, className, ...props }: BarChartProps): React.JSX.Element;
 export type LineChartProps = Omit<React.ComponentProps<"div">, "children"> & {
-    values: number[];
+    values?: number[];
+    series?: ChartSeries[];
     size?: ChartSize;
     width?: number;
     height?: number;
@@ -72,10 +78,15 @@ export type LineChartProps = Omit<React.ComponentProps<"div">, "children"> & {
     emptyLabel?: React.ReactNode;
     domain?: ChartDomain;
     ariaLabel?: string;
+    curve?: ChartCurve;
+    showDots?: boolean;
+    showLegend?: boolean;
+    gradient?: boolean;
+    strokeWidth?: number;
 };
-declare function LineChart({ values, size, width, height: heightProp, showArea, showGrid, showAxis, showTooltip, labels, valueFormatter, stroke, state, emptyLabel, domain, ariaLabel, className, style, ...props }: LineChartProps): React.JSX.Element;
+declare function LineChart({ values, series, size, width, height: heightProp, showArea, showGrid, showAxis, showTooltip, labels, valueFormatter, stroke, state, emptyLabel, domain, ariaLabel, curve, showDots, showLegend, gradient, strokeWidth, className, style, ...props }: LineChartProps): React.JSX.Element;
 declare function AreaChart(props: Omit<LineChartProps, "showArea">): React.JSX.Element;
-export type SparklineProps = Omit<LineChartProps, "size" | "showArea" | "showAxis"> & {
+export type SparklineProps = Omit<LineChartProps, "size" | "showArea" | "showAxis" | "series" | "showLegend"> & {
     values: number[];
     positive?: boolean;
 };

package/dist/src/components/charts/charts.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../feedback/state-view.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s={sm:120,md:220,lg:320};function c(e,t){return t??`var(--color-chart-${e%5+1}, var(--primary))`}function l(e,t){return typeof e==`string`||typeof e==`number`?String(e):t}function u(e,t){return t?t(e):e.toLocaleString()}function d({state:e,emptyLabel:t,height:n}){return e===`loading`?(0,a.jsx)(r.StateView,{status:`loading`,loadingVariant:`skeleton`,variant:`plain`,size:`compact`,style:{minHeight:n}}):e===`empty`?(0,a.jsx)(r.StateView,{status:`empty`,title:t,description:null,variant:`plain`,size:`compact`,style:{minHeight:n}}):null}function f({data:e,valueFormatter:t,caption:n}){return(0,a.jsx)(`div`,{className:`sr-only`,children:(0,a.jsxs)(`table`,{children:[(0,a.jsx)(`caption`,{children:n}),(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`col`,children:`Label`}),(0,a.jsx)(`th`,{scope:`col`,children:`Value`}),(0,a.jsx)(`th`,{scope:`col`,children:`Description`})]})}),(0,a.jsx)(`tbody`,{children:e.map((e,n)=>(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`row`,children:e.label}),(0,a.jsx)(`td`,{children:u(e.value,t)}),(0,a.jsx)(`td`,{children:e.description})]},n))})]})})}function p({active:e,label:t,payload:n,valueFormatter:r,labelFormatter:i}){return!e||!n?.length?null:(0,a.jsxs)(`div`,{"data-slot":`chart-tooltip`,className:`min-w-36 rounded-[var(--radius-md)] border border-border/75 bg-popover/98 p-3 text-popover-foreground shadow-lg backdrop-blur`,children:[t===void 0?null:(0,a.jsx)(`div`,{className:`mb-2 text-xs font-semibold text-muted-foreground`,children:i?i(t):t}),(0,a.jsx)(`div`,{className:`grid gap-1.5`,children:n.map((e,t)=>{let n=typeof e.value==`number`?e.value:Number(e.value??0);return(0,a.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2 text-sm`,children:[(0,a.jsx)(`span`,{className:`size-2.5 shrink-0 rounded-sm`,style:{background:e.color}}),(0,a.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.name??`Value`}),(0,a.jsx)(`span`,{className:`font-semibold tabular-nums`,children:u(n,r)})]},`${e.name??`value`}-${t}`)})})]})}function m({title:e,description:r,action:i,state:o=`ready`,emptyLabel:s=`No data available.`,className:c,children:l,...u}){return(0,a.jsxs)(n.Card,{"data-slot":`chart-frame`,"data-state":o,className:t.cn(`min-w-0`,c),...u,children:[e||r||i?(0,a.jsxs)(n.CardHeader,{className:`flex-row items-start justify-between gap-3`,children:[(0,a.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[e?(0,a.jsx)(n.CardTitle,{children:e}):null,r?(0,a.jsx)(n.CardDescription,{children:r}):null]}),i?(0,a.jsx)(`div`,{className:`shrink-0`,children:i}):null]}):null,(0,a.jsx)(n.CardContent,{children:o===`ready`?l:(0,a.jsx)(d,{state:o,emptyLabel:s,height:180})})]})}function h({data:e,size:n=`md`,max:r,showLabels:i=!0,showValues:m=!1,showGrid:h=!0,showTooltip:g=!0,valueFormatter:_,state:v=`ready`,emptyLabel:y=`No chart data.`,barClassName:b,domain:x,ariaLabel:S=`Bar chart`,className:C,...w}){let T=s[n],E=v===`ready`&&e.length===0?`empty`:v;if(E!==`ready`)return(0,a.jsx)(d,{state:E,emptyLabel:y,height:T});let D=e.map((e,t)=>({name:l(e.label,`Item ${t+1}`),value:e.value,fill:c(t,e.color),originalLabel:e.label,description:e.description})),O=x??(r===void 0?[`auto`,`auto`]:[`auto`,r]);return(0,a.jsxs)(`div`,{"data-slot":`bar-chart`,role:`img`,"aria-label":S,className:t.cn(`min-w-0`,C),...w,children:[(0,a.jsx)(`div`,{style:{height:T},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(o.BarChart,{data:D,margin:{top:m?20:8,right:8,bottom:i?8:0,left:0},children:[h?(0,a.jsx)(o.CartesianGrid,{vertical:!1,stroke:`var(--border)`,strokeDasharray:`4 6`}):null,(0,a.jsx)(o.XAxis,{dataKey:`name`,hide:!i,axisLine:!1,tickLine:!1,tick:{fill:`var(--muted-foreground)`,fontSize:12},interval:`preserveStartEnd`}),(0,a.jsx)(o.YAxis,{hide:!0,domain:O}),g?(0,a.jsx)(o.Tooltip,{cursor:{fill:`var(--muted)`,opacity:.35},content:(0,a.jsx)(p,{valueFormatter:_})}):null,(0,a.jsx)(o.Bar,{dataKey:`value`,name:`Value`,radius:[6,6,2,2],className:b,isAnimationActive:!1,label:m?{position:`top`,fill:`var(--muted-foreground)`,fontSize:11,formatter:e=>String(u(Number(e),_))}:!1,children:D.map(e=>(0,a.jsx)(o.Cell,{fill:e.fill},e.name))})]})})}),(0,a.jsx)(f,{data:e,valueFormatter:_,caption:S})]})}function g({values:e,size:n=`md`,width:r=560,height:i,showArea:c=!1,showGrid:u=!0,showAxis:m=!1,showTooltip:h=!0,labels:g,valueFormatter:_,stroke:v=`var(--primary)`,state:y=`ready`,emptyLabel:b=`No line data.`,domain:x=[`auto`,`auto`],ariaLabel:S=c?`Area chart`:`Line chart`,className:C,style:w,...T}){let E=i??s[n],D=y===`ready`&&e.length===0?`empty`:y;if(D!==`ready`)return(0,a.jsx)(d,{state:D,emptyLabel:b,height:E});let O=e.map((e,t)=>({name:l(g?.[t],String(t+1)),value:e,originalLabel:g?.[t]??String(t+1)})),k=c?o.AreaChart:o.LineChart;return(0,a.jsxs)(`div`,{"data-slot":c?`area-chart`:`line-chart`,role:`img`,"aria-label":S,"data-chart-width":r,className:t.cn(`min-w-0`,C),style:w,...T,children:[(0,a.jsx)(`div`,{style:{height:E},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(k,{data:O,margin:{top:10,right:10,bottom:m?8:0,left:m?-12:0},children:[u?(0,a.jsx)(o.CartesianGrid,{vertical:!1,stroke:`var(--border)`,strokeDasharray:`4 6`}):null,(0,a.jsx)(o.XAxis,{dataKey:`name`,hide:!m,axisLine:!1,tickLine:!1,tick:{fill:`var(--muted-foreground)`,fontSize:12},interval:`preserveStartEnd`}),(0,a.jsx)(o.YAxis,{hide:!m,domain:x,axisLine:!1,tickLine:!1,width:44,tick:{fill:`var(--muted-foreground)`,fontSize:11}}),h?(0,a.jsx)(o.Tooltip,{content:(0,a.jsx)(p,{valueFormatter:_})}):null,c?(0,a.jsx)(o.Area,{type:`monotone`,dataKey:`value`,name:`Value`,stroke:v,strokeWidth:2.5,fill:v,fillOpacity:.14,activeDot:{r:5},isAnimationActive:!1}):(0,a.jsx)(o.Line,{type:`monotone`,dataKey:`value`,name:`Value`,stroke:v,strokeWidth:2.5,dot:{r:3.5,fill:v},activeDot:{r:5},isAnimationActive:!1})]})})}),(0,a.jsx)(f,{data:e.map((e,t)=>({label:g?.[t]??t+1,value:e})),valueFormatter:_,caption:S})]})}function _(e){return(0,a.jsx)(g,{showArea:!0,...e})}function v({values:e,positive:n=!0,stroke:r,className:i,showTooltip:o=!1,...s}){return(0,a.jsx)(g,{values:e,size:`sm`,stroke:r??(n?`var(--aui-success,var(--primary))`:`var(--destructive)`),showGrid:!1,showAxis:!1,showTooltip:o,className:t.cn(`max-w-44`,i),ariaLabel:`Sparkline`,...s})}function y({data:e,size:n=180,strokeWidth:r=18,centerLabel:i,centerValue:s,state:u=`ready`,emptyLabel:m=`No distribution data.`,showTooltip:h=!0,valueFormatter:g,ariaLabel:_=`Donut chart`,className:v,style:y,...b}){let x=u===`ready`&&e.length===0?`empty`:u;if(x!==`ready`)return(0,a.jsx)(d,{state:x,emptyLabel:m,height:n});let S=e.map((e,t)=>({name:l(e.label,`Item ${t+1}`),value:Math.max(0,e.value),fill:c(t,e.color),description:e.description})),C=Math.max(8,n/2-8);return(0,a.jsxs)(`div`,{"data-slot":`donut-chart`,role:`img`,"aria-label":_,className:t.cn(`relative inline-grid place-items-center`,v),style:{width:n,height:n,...y},...b,children:[(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(o.PieChart,{children:[h?(0,a.jsx)(o.Tooltip,{content:(0,a.jsx)(p,{valueFormatter:g})}):null,(0,a.jsx)(o.Pie,{data:S,dataKey:`value`,nameKey:`name`,cx:`50%`,cy:`50%`,innerRadius:Math.max(0,C-r),outerRadius:C,paddingAngle:2,stroke:`var(--background)`,strokeWidth:2,isAnimationActive:!1,children:S.map(e=>(0,a.jsx)(o.Cell,{fill:e.fill},e.name))})]})}),s||i?(0,a.jsxs)(`div`,{className:`pointer-events-none absolute inset-0 grid place-content-center text-center`,children:[(0,a.jsx)(`div`,{className:`text-xl font-semibold tabular-nums`,children:s}),(0,a.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:i})]}):null,(0,a.jsx)(f,{data:e,valueFormatter:g,caption:_})]})}function b({data:e,className:n,...r}){return(0,a.jsx)(`div`,{"data-slot":`chart-legend`,className:t.cn(`flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground`,n),...r,children:e.map((e,t)=>(0,a.jsxs)(`div`,{className:`inline-flex min-w-0 items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`size-2.5 shrink-0 rounded-sm`,style:{background:c(t,e.color)}}),(0,a.jsx)(`span`,{className:`truncate`,children:e.label})]},t))})}function x({label:e,value:n,change:r,positive:i=!0,values:o,className:s,...c}){return(0,a.jsxs)(`div`,{"data-slot":`metric-trend`,className:t.cn(`grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-4`,s),...c,children:[(0,a.jsxs)(`div`,{className:`min-w-0`,children:[(0,a.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e}),(0,a.jsx)(`div`,{className:`mt-1 text-2xl font-semibold tracking-tight tabular-nums`,children:n}),r?(0,a.jsx)(`div`,{className:t.cn(`mt-1 text-xs font-medium`,i?`text-[color:var(--aui-success,var(--primary))]`:`text-destructive`),children:r}):null]}),o?.length?(0,a.jsx)(v,{values:o,positive:i}):null]})}exports.AreaChart=_,exports.BarChart=h,exports.ChartFrame=m,exports.ChartLegend=b,exports.ChartTooltipContent=p,exports.DonutChart=y,exports.LineChart=g,exports.MetricTrend=x,exports.Sparkline=v;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("../feedback/state-view.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s={sm:120,md:220,lg:320};function c(e,t){return t??`var(--color-chart-${e%5+1}, var(--primary))`}function l(e,t){return typeof e==`string`||typeof e==`number`?String(e):t}function u(e,t){return t?t(e):e.toLocaleString()}function d({state:e,emptyLabel:t,height:n}){return e===`loading`?(0,a.jsx)(r.StateView,{status:`loading`,loadingVariant:`skeleton`,variant:`plain`,size:`compact`,style:{minHeight:n}}):e===`empty`?(0,a.jsx)(r.StateView,{status:`empty`,title:t,description:null,variant:`plain`,size:`compact`,style:{minHeight:n}}):null}function f({data:e,valueFormatter:t,caption:n}){return(0,a.jsx)(`div`,{className:`sr-only`,children:(0,a.jsxs)(`table`,{children:[(0,a.jsx)(`caption`,{children:n}),(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`col`,children:`Label`}),(0,a.jsx)(`th`,{scope:`col`,children:`Value`}),(0,a.jsx)(`th`,{scope:`col`,children:`Description`})]})}),(0,a.jsx)(`tbody`,{children:e.map((e,n)=>(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`row`,children:e.label}),(0,a.jsx)(`td`,{children:u(e.value,t)}),(0,a.jsx)(`td`,{children:e.description})]},n))})]})})}function p({labels:e,series:t,valueFormatter:n,caption:r}){return(0,a.jsx)(`div`,{className:`sr-only`,children:(0,a.jsxs)(`table`,{children:[(0,a.jsx)(`caption`,{children:r}),(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`col`,children:`Label`}),t.map(e=>(0,a.jsx)(`th`,{scope:`col`,children:e.label},e.key))]})}),(0,a.jsx)(`tbody`,{children:e.map((e,r)=>(0,a.jsxs)(`tr`,{children:[(0,a.jsx)(`th`,{scope:`row`,children:e}),t.map(e=>(0,a.jsx)(`td`,{children:u(e.data[r]??0,n)},e.key))]},r))})]})})}function m({active:e,label:t,payload:n,valueFormatter:r,labelFormatter:i}){return!e||!n?.length?null:(0,a.jsxs)(`div`,{"data-slot":`chart-tooltip`,className:`min-w-36 rounded-[var(--radius-md)] border border-border/75 bg-popover/98 p-3 text-popover-foreground shadow-lg backdrop-blur`,children:[t===void 0?null:(0,a.jsx)(`div`,{className:`mb-2 text-xs font-semibold text-muted-foreground`,children:i?i(t):t}),(0,a.jsx)(`div`,{className:`grid gap-1.5`,children:n.map((e,t)=>{let n=typeof e.value==`number`?e.value:Number(e.value??0);return(0,a.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2 text-sm`,children:[(0,a.jsx)(`span`,{className:`size-2.5 shrink-0 rounded-sm`,style:{background:e.color}}),(0,a.jsx)(`span`,{className:`min-w-0 flex-1 truncate`,children:e.name??`Value`}),(0,a.jsx)(`span`,{className:`font-semibold tabular-nums`,children:u(n,r)})]},`${e.name??`value`}-${t}`)})})]})}function h({title:e,description:r,action:i,state:o=`ready`,emptyLabel:s=`No data available.`,className:c,children:l,...u}){return(0,a.jsxs)(n.Card,{"data-slot":`chart-frame`,"data-state":o,className:t.cn(`min-w-0`,c),...u,children:[e||r||i?(0,a.jsxs)(n.CardHeader,{className:`flex-row items-start justify-between gap-3`,children:[(0,a.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[e?(0,a.jsx)(n.CardTitle,{children:e}):null,r?(0,a.jsx)(n.CardDescription,{children:r}):null]}),i?(0,a.jsx)(`div`,{className:`shrink-0`,children:i}):null]}):null,(0,a.jsx)(n.CardContent,{children:o===`ready`?l:(0,a.jsx)(d,{state:o,emptyLabel:s,height:180})})]})}function g({data:e=[],series:n,size:r=`md`,max:i,showLabels:h=!0,showValues:g=!1,showGrid:_=!0,showTooltip:v=!0,valueFormatter:y,state:b=`ready`,emptyLabel:S=`No chart data.`,barClassName:C,domain:w,ariaLabel:T=`Bar chart`,stacked:E=!1,showLegend:D=!!n?.length,barRadius:O=6,className:k,...A}){let j=s[r],M=n?.length?n:[{key:`value`,label:`Value`,data:e.map(e=>e.value)}],N=Math.max(e.length,...M.map(e=>e.data.length)),P=b===`ready`&&N===0?`empty`:b;if(P!==`ready`)return(0,a.jsx)(d,{state:P,emptyLabel:S,height:j});let F=Array.from({length:N},(t,n)=>e[n]?.label??`Item ${n+1}`),I=F.map((e,t)=>Object.fromEntries([[`name`,l(e,`Item ${t+1}`)],[`originalLabel`,e],...M.map(e=>[e.key,e.data[t]??0])])),L=w??(i===void 0?[`auto`,`auto`]:[`auto`,i]);return(0,a.jsxs)(`div`,{"data-slot":`bar-chart`,role:`img`,"aria-label":T,className:t.cn(`min-w-0`,k),...A,children:[(0,a.jsx)(`div`,{style:{height:j},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(o.BarChart,{data:I,margin:{top:g?20:8,right:8,bottom:h?8:0,left:0},children:[_?(0,a.jsx)(o.CartesianGrid,{vertical:!1,stroke:`var(--border)`,strokeDasharray:`4 6`}):null,(0,a.jsx)(o.XAxis,{dataKey:`name`,hide:!h,axisLine:!1,tickLine:!1,tick:{fill:`var(--muted-foreground)`,fontSize:12},interval:`preserveStartEnd`}),(0,a.jsx)(o.YAxis,{hide:!0,domain:L}),v?(0,a.jsx)(o.Tooltip,{cursor:{fill:`var(--muted)`,opacity:.35},content:(0,a.jsx)(m,{valueFormatter:y})}):null,M.map((t,r)=>(0,a.jsx)(o.Bar,{dataKey:t.key,name:l(t.label,t.key),fill:c(r,t.color),stackId:E?`total`:void 0,radius:[O,O,2,2],className:C,isAnimationActive:!1,label:g&&(!E||r===M.length-1)?{position:`top`,fill:`var(--muted-foreground)`,fontSize:11,formatter:e=>String(u(Number(e),y))}:!1,children:n?.length?null:e.map((e,t)=>(0,a.jsx)(o.Cell,{fill:c(t,e.color)},t))},t.key))]})})}),D&&M.length>1?(0,a.jsx)(x,{className:`mt-3`,data:M.map((e,t)=>({label:e.label,value:0,color:c(t,e.color)}))}):null,n?.length?(0,a.jsx)(p,{labels:F,series:M,valueFormatter:y,caption:T}):(0,a.jsx)(f,{data:e,valueFormatter:y,caption:T})]})}function _({values:e=[],series:n,size:r=`md`,width:u=560,height:f,showArea:h=!1,showGrid:g=!0,showAxis:_=!1,showTooltip:v=!0,labels:y,valueFormatter:b,stroke:S=`var(--primary)`,state:C=`ready`,emptyLabel:w=`No line data.`,domain:T=[`auto`,`auto`],ariaLabel:E=h?`Area chart`:`Line chart`,curve:D=`monotone`,showDots:O=!h,showLegend:k=!!n?.length,gradient:A=h,strokeWidth:j=2.5,className:M,style:N,...P}){let F=f??s[r],I=i.useId().replace(/:/g,``),L=n?.length?n:[{key:`value`,label:`Value`,data:e,color:S}],R=Math.max(...L.map(e=>e.data.length),0),z=C===`ready`&&R===0?`empty`:C;if(z!==`ready`)return(0,a.jsx)(d,{state:z,emptyLabel:w,height:F});let B=Array.from({length:R},(e,t)=>y?.[t]??String(t+1)),V=B.map((e,t)=>Object.fromEntries([[`name`,l(e,String(t+1))],[`originalLabel`,e],...L.map(e=>[e.key,e.data[t]??0])])),H=h?o.AreaChart:o.LineChart;return(0,a.jsxs)(`div`,{"data-slot":h?`area-chart`:`line-chart`,role:`img`,"aria-label":E,"data-chart-width":u,className:t.cn(`min-w-0`,M),style:N,...P,children:[(0,a.jsx)(`div`,{style:{height:F},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(H,{data:V,margin:{top:10,right:10,bottom:_?8:0,left:_?-12:0},children:[h&&A?(0,a.jsx)(`defs`,{children:L.map((e,t)=>{let n=c(t,e.color);return(0,a.jsxs)(`linearGradient`,{id:`${I}-${e.key}`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,a.jsx)(`stop`,{offset:`0%`,stopColor:n,stopOpacity:.34}),(0,a.jsx)(`stop`,{offset:`92%`,stopColor:n,stopOpacity:.02})]},e.key)})}):null,g?(0,a.jsx)(o.CartesianGrid,{vertical:!1,stroke:`var(--border)`,strokeDasharray:`4 6`}):null,(0,a.jsx)(o.XAxis,{dataKey:`name`,hide:!_,axisLine:!1,tickLine:!1,tick:{fill:`var(--muted-foreground)`,fontSize:12},interval:`preserveStartEnd`}),(0,a.jsx)(o.YAxis,{hide:!_,domain:T,axisLine:!1,tickLine:!1,width:44,tick:{fill:`var(--muted-foreground)`,fontSize:11}}),v?(0,a.jsx)(o.Tooltip,{content:(0,a.jsx)(m,{valueFormatter:b})}):null,L.map((e,t)=>{let n=c(t,e.color);return h?(0,a.jsx)(o.Area,{type:D,dataKey:e.key,name:l(e.label,e.key),stroke:n,strokeWidth:j,fill:A?`url(#${I}-${e.key})`:n,fillOpacity:A?1:.12,dot:O?{r:3,fill:n,strokeWidth:2,stroke:`var(--background)`}:!1,activeDot:{r:5,strokeWidth:2,stroke:`var(--background)`},isAnimationActive:!1},e.key):(0,a.jsx)(o.Line,{type:D,dataKey:e.key,name:l(e.label,e.key),stroke:n,strokeWidth:j,dot:O?{r:3,fill:n,strokeWidth:2,stroke:`var(--background)`}:!1,activeDot:{r:5,strokeWidth:2,stroke:`var(--background)`},isAnimationActive:!1},e.key)})]})})}),k&&L.length>1?(0,a.jsx)(x,{className:`mt-3`,data:L.map((e,t)=>({label:e.label,value:0,color:c(t,e.color)}))}):null,(0,a.jsx)(p,{labels:B,series:L,valueFormatter:b,caption:E})]})}function v(e){return(0,a.jsx)(_,{showArea:!0,...e})}function y({values:e,positive:n=!0,stroke:r,className:i,showTooltip:o=!1,...s}){return(0,a.jsx)(_,{values:e,size:`sm`,stroke:r??(n?`var(--aui-success,var(--primary))`:`var(--destructive)`),showGrid:!1,showAxis:!1,showTooltip:o,className:t.cn(`max-w-44`,i),ariaLabel:`Sparkline`,...s})}function b({data:e,size:n=180,strokeWidth:r=18,centerLabel:i,centerValue:s,state:u=`ready`,emptyLabel:p=`No distribution data.`,showTooltip:h=!0,valueFormatter:g,ariaLabel:_=`Donut chart`,className:v,style:y,...b}){let x=u===`ready`&&e.length===0?`empty`:u;if(x!==`ready`)return(0,a.jsx)(d,{state:x,emptyLabel:p,height:n});let S=e.map((e,t)=>({name:l(e.label,`Item ${t+1}`),value:Math.max(0,e.value),fill:c(t,e.color),description:e.description})),C=Math.max(8,n/2-8);return(0,a.jsxs)(`div`,{"data-slot":`donut-chart`,role:`img`,"aria-label":_,className:t.cn(`relative inline-grid place-items-center`,v),style:{width:n,height:n,...y},...b,children:[(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,minWidth:1,minHeight:1,children:(0,a.jsxs)(o.PieChart,{children:[h?(0,a.jsx)(o.Tooltip,{content:(0,a.jsx)(m,{valueFormatter:g})}):null,(0,a.jsx)(o.Pie,{data:S,dataKey:`value`,nameKey:`name`,cx:`50%`,cy:`50%`,innerRadius:Math.max(0,C-r),outerRadius:C,paddingAngle:2,stroke:`var(--background)`,strokeWidth:2,isAnimationActive:!1,children:S.map(e=>(0,a.jsx)(o.Cell,{fill:e.fill},e.name))})]})}),s||i?(0,a.jsxs)(`div`,{className:`pointer-events-none absolute inset-0 grid place-content-center text-center`,children:[(0,a.jsx)(`div`,{className:`text-xl font-semibold tabular-nums`,children:s}),(0,a.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:i})]}):null,(0,a.jsx)(f,{data:e,valueFormatter:g,caption:_})]})}function x({data:e,className:n,...r}){return(0,a.jsx)(`div`,{"data-slot":`chart-legend`,className:t.cn(`flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground`,n),...r,children:e.map((e,t)=>(0,a.jsxs)(`div`,{className:`inline-flex min-w-0 items-center gap-2`,children:[(0,a.jsx)(`span`,{className:`size-2.5 shrink-0 rounded-sm`,style:{background:c(t,e.color)}}),(0,a.jsx)(`span`,{className:`truncate`,children:e.label})]},t))})}function S({label:e,value:n,change:r,positive:i=!0,values:o,className:s,...c}){return(0,a.jsxs)(`div`,{"data-slot":`metric-trend`,className:t.cn(`grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-4`,s),...c,children:[(0,a.jsxs)(`div`,{className:`min-w-0`,children:[(0,a.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e}),(0,a.jsx)(`div`,{className:`mt-1 text-2xl font-semibold tracking-tight tabular-nums`,children:n}),r?(0,a.jsx)(`div`,{className:t.cn(`mt-1 text-xs font-medium`,i?`text-[color:var(--aui-success,var(--primary))]`:`text-destructive`),children:r}):null]}),o?.length?(0,a.jsx)(y,{values:o,positive:i}):null]})}exports.AreaChart=v,exports.BarChart=g,exports.ChartFrame=h,exports.ChartLegend=x,exports.ChartTooltipContent=m,exports.DonutChart=b,exports.LineChart=_,exports.MetricTrend=S,exports.Sparkline=y;