wimui 0.24.4 → 0.26.0

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

@@ -32,5 +32,11 @@ export type FunnelChartProps = {
      * @default false
      */
     animated?: boolean;
+    /**
+     * Accessible name for the chart. Defaults to `title` when omitted; pass this
+     * when the chart has no visible title, or when the title is not descriptive
+     * enough on its own.
+     */
+    "aria-label"?: string;
 };
-export declare const FunnelChart: ({ data, dataKey, nameKey, height, width, title, animated, }: FunnelChartProps) => React.JSX.Element;
+export declare const FunnelChart: ({ data, dataKey, nameKey, height, width, title, animated, "aria-label": ariaLabel, }: FunnelChartProps) => React.JSX.Element;

package/dist/components/charts/FunnelChart/FunnelChart.js

@@ -1,49 +1,66 @@
 "use client";
 import { Title as e } from "../../typography/Title/Title.js";
-import { CHART_THEME as t } from "../../helpers.js";
-import n from "./funnel-chart.module.js";
+import { CHART_HIDDEN_A11Y_PROPS as t, CHART_THEME as n } from "../../helpers.js";
+import { ChartDataTable as r } from "../../_internal/ChartDataTable.js";
+import { pairTable as i } from "../../_internal/chartTableData.js";
+import a from "./funnel-chart.module.js";
 import "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Cell as a, Funnel as o, FunnelChart as s, LabelList as c, ResponsiveContainer as l, Tooltip as u } from "recharts";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Cell as c, Funnel as l, FunnelChart as u, LabelList as d, ResponsiveContainer as f, Tooltip as p } from "recharts";
 //#region src/components/charts/FunnelChart/FunnelChart.tsx
-var d = ({ data: d, dataKey: f, nameKey: p, height: m = 300, width: h = "100%", title: g, animated: _ = !1 }) => /* @__PURE__ */ i("div", {
-	className: `wim-funnel-chart ${n.root}`,
-	style: { width: h },
-	children: [g && /* @__PURE__ */ r(e, {
-		tag: "h3",
-		size: "md",
-		style: { marginBottom: "var(--wim-spacing-md)" },
-		children: g
-	}), /* @__PURE__ */ r("div", {
-		className: n.container,
-		style: { height: m },
-		children: /* @__PURE__ */ r(l, {
-			width: "100%",
-			height: "100%",
-			children: /* @__PURE__ */ i(s, {
-				margin: {
-					top: 8,
-					right: 88,
-					bottom: 8,
-					left: 88
-				},
-				children: [/* @__PURE__ */ r(u, {
-					contentStyle: t.tooltip.contentStyle,
-					cursor: t.tooltip.cursor
-				}), /* @__PURE__ */ i(o, {
-					dataKey: f,
-					data: d,
-					isAnimationActive: _,
-					children: [/* @__PURE__ */ r(c, {
-						position: "right",
-						fill: "var(--wim-color-text-secondary)",
-						dataKey: p,
-						stroke: "none"
-					}), d.map((e, t) => /* @__PURE__ */ r(a, { fill: `color-mix(in oklch, var(--wim-color-chart-primary) ${100 - Math.round(t / Math.max(d.length - 1, 1) * 55)}%, var(--wim-color-surface))` }, `cell-${t}`))]
-				})]
+var m = ({ data: m, dataKey: h, nameKey: g, height: _ = 300, width: v = "100%", title: y, animated: b = !1, "aria-label": x }) => {
+	let S = x ?? y, C = i(m, g, h);
+	return /* @__PURE__ */ s("div", {
+		className: `wim-funnel-chart ${a.root}`,
+		style: { width: v },
+		role: S ? "figure" : void 0,
+		"aria-label": S,
+		children: [
+			y && /* @__PURE__ */ o(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: y
+			}),
+			/* @__PURE__ */ o("div", {
+				className: a.container,
+				style: { height: _ },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ o(f, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ s(u, {
+						...t,
+						margin: {
+							top: 8,
+							right: 88,
+							bottom: 8,
+							left: 88
+						},
+						children: [/* @__PURE__ */ o(p, {
+							contentStyle: n.tooltip.contentStyle,
+							cursor: n.tooltip.cursor
+						}), /* @__PURE__ */ s(l, {
+							dataKey: h,
+							data: m,
+							isAnimationActive: b,
+							children: [/* @__PURE__ */ o(d, {
+								position: "right",
+								fill: "var(--wim-color-text-secondary)",
+								dataKey: g,
+								stroke: "none"
+							}), m.map((e, t) => /* @__PURE__ */ o(c, { fill: `color-mix(in oklch, var(--wim-color-chart-primary) ${100 - Math.round(t / Math.max(m.length - 1, 1) * 55)}%, var(--wim-color-surface))` }, `cell-${t}`))]
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ o(r, {
+				caption: S,
+				columns: C.columns,
+				rows: C.rows
 			})
-		})
-	})]
-});
+		]
+	});
+};
 //#endregion
-export { d as FunnelChart };
+export { m as FunnelChart };

package/dist/components/charts/GanttChart/gantt-chart.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1r4eg_4`,t=`_layout_1r4eg_23`,n=`_labelPanel_1r4eg_28`,r=`_labelRow_1r4eg_40`,i=`_labelText_1r4eg_49`,a=`_timelineScroll_1r4eg_55`,o=`_header_1r4eg_73`,s=`_headerCell_1r4eg_80`,c=`_body_1r4eg_102`,l=`_row_1r4eg_109`,u=`_bar_1r4eg_115`,d=`_clickable_1r4eg_129`,f=`_progress_1r4eg_138`,p={root:e,layout:t,labelPanel:n,labelRow:r,labelText:i,timelineScroll:a,header:o,headerCell:s,body:c,row:l,bar:u,clickable:d,progress:f};exports.bar=u,exports.body=c,exports.clickable=d,exports.default=p,exports.header=o,exports.headerCell=s,exports.labelPanel=n,exports.labelRow=r,exports.labelText=i,exports.layout=t,exports.progress=f,exports.root=e,exports.row=l,exports.timelineScroll=a;
+var e=`_root_1pxp3_4`,t=`_layout_1pxp3_23`,n=`_labelPanel_1pxp3_28`,r=`_labelRow_1pxp3_40`,i=`_labelText_1pxp3_49`,a=`_timelineScroll_1pxp3_55`,o=`_header_1pxp3_74`,s=`_headerCell_1pxp3_81`,c=`_body_1pxp3_103`,l=`_row_1pxp3_110`,u=`_bar_1pxp3_116`,d=`_clickable_1pxp3_130`,f=`_progress_1pxp3_139`,p={root:e,layout:t,labelPanel:n,labelRow:r,labelText:i,timelineScroll:a,header:o,headerCell:s,body:c,row:l,bar:u,clickable:d,progress:f};exports.bar=u,exports.body=c,exports.clickable=d,exports.default=p,exports.header=o,exports.headerCell=s,exports.labelPanel=n,exports.labelRow=r,exports.labelText=i,exports.layout=t,exports.progress=f,exports.root=e,exports.row=l,exports.timelineScroll=a;

package/dist/components/charts/GanttChart/gantt-chart.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/charts/GanttChart/gantt-chart.module.scss
-var e = "_root_1r4eg_4", t = "_layout_1r4eg_23", n = "_labelPanel_1r4eg_28", r = "_labelRow_1r4eg_40", i = "_labelText_1r4eg_49", a = "_timelineScroll_1r4eg_55", o = "_header_1r4eg_73", s = "_headerCell_1r4eg_80", c = "_body_1r4eg_102", l = "_row_1r4eg_109", u = "_bar_1r4eg_115", d = "_clickable_1r4eg_129", f = "_progress_1r4eg_138", p = {
+var e = "_root_1pxp3_4", t = "_layout_1pxp3_23", n = "_labelPanel_1pxp3_28", r = "_labelRow_1pxp3_40", i = "_labelText_1pxp3_49", a = "_timelineScroll_1pxp3_55", o = "_header_1pxp3_74", s = "_headerCell_1pxp3_81", c = "_body_1pxp3_103", l = "_row_1pxp3_110", u = "_bar_1pxp3_116", d = "_clickable_1pxp3_130", f = "_progress_1pxp3_139", p = {
 	root: e,
 	layout: t,
 	labelPanel: n,

package/dist/components/charts/GaugeChart/GaugeChart.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./gauge-chart.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime"),s=require("recharts");var c=({value:e,min:i=0,max:c=100,height:l=200,width:u=`100%`,title:d,label:f,color:p,animated:m=!1})=>{let h=Math.max(i,Math.min(c,e)),g=[{value:h-i},{value:c-h}],_=p||n.CHART_COLORS[0];return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-gauge-chart`,r.default.root),style:{width:u},children:[d&&(0,o.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:d}),(0,o.jsxs)(`div`,{className:r.default.container,style:{height:l},children:[(0,o.jsx)(s.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,o.jsx)(s.PieChart,{children:(0,o.jsxs)(s.Pie,{data:g,cx:`50%`,cy:`80%`,startAngle:180,endAngle:0,innerRadius:`60%`,outerRadius:`80%`,paddingAngle:0,dataKey:`value`,stroke:`none`,isAnimationActive:m,children:[(0,o.jsx)(s.Cell,{fill:_}),(0,o.jsx)(s.Cell,{fill:`var(--wim-color-surface-variant)`})]})})}),(0,o.jsx)(`div`,{className:r.default.gaugeLabel,children:f||e})]})]})};exports.GaugeChart=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./gauge-chart.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime"),s=require("recharts");var c=({value:e,min:i=0,max:c=100,height:l=200,width:u=`100%`,title:d,label:f,color:p,animated:m=!1,"aria-label":h})=>{let g=h??d,_=Math.max(i,Math.min(c,e)),v=[{value:_-i},{value:c-_}],y=p||n.CHART_COLORS[0];return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-gauge-chart`,r.default.root),style:{width:u},role:g?`figure`:void 0,"aria-label":g,children:[d&&(0,o.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:d}),(0,o.jsxs)(`div`,{className:r.default.container,style:{height:l},children:[(0,o.jsx)(s.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,o.jsx)(s.PieChart,{children:(0,o.jsxs)(s.Pie,{data:v,cx:`50%`,cy:`80%`,startAngle:180,endAngle:0,innerRadius:`60%`,outerRadius:`80%`,paddingAngle:0,dataKey:`value`,stroke:`none`,isAnimationActive:m,children:[(0,o.jsx)(s.Cell,{fill:y}),(0,o.jsx)(s.Cell,{fill:`var(--wim-color-surface-variant)`})]})})}),(0,o.jsx)(`div`,{className:r.default.gaugeLabel,children:f||e})]})]})};exports.GaugeChart=c;

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

@@ -41,5 +41,11 @@ export type GaugeChartProps = {
      * @default false
      */
     animated?: boolean;
+    /**
+     * Accessible name for the chart. Defaults to `title` when omitted; pass this
+     * when the chart has no visible title, or when the title is not descriptive
+     * enough on its own.
+     */
+    "aria-label"?: string;
 };
-export declare const GaugeChart: ({ value, min, max, height, width, title, label, color, animated, }: GaugeChartProps) => React.JSX.Element;
+export declare const GaugeChart: ({ value, min, max, height, width, title, label, color, animated, "aria-label": ariaLabel, }: GaugeChartProps) => React.JSX.Element;

package/dist/components/charts/GaugeChart/GaugeChart.js

@@ -7,11 +7,13 @@ import r from "classnames";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { Cell as o, Pie as s, PieChart as c, ResponsiveContainer as l } from "recharts";
 //#region src/components/charts/GaugeChart/GaugeChart.tsx
-var u = ({ value: u, min: d = 0, max: f = 100, height: p = 200, width: m = "100%", title: h, label: g, color: _, animated: v = !1 }) => {
-	let y = Math.max(d, Math.min(f, u)), b = [{ value: y - d }, { value: f - y }], x = _ || t[0];
+var u = ({ value: u, min: d = 0, max: f = 100, height: p = 200, width: m = "100%", title: h, label: g, color: _, animated: v = !1, "aria-label": y }) => {
+	let b = y ?? h, x = Math.max(d, Math.min(f, u)), S = [{ value: x - d }, { value: f - x }], C = _ || t[0];
 	return /* @__PURE__ */ a("div", {
 		className: r("wim-gauge-chart", n.root),
 		style: { width: m },
+		role: b ? "figure" : void 0,
+		"aria-label": b,
 		children: [h && /* @__PURE__ */ i(e, {
 			tag: "h3",
 			size: "md",
@@ -24,7 +26,7 @@ var u = ({ value: u, min: d = 0, max: f = 100, height: p = 200, width: m = "100%
 				width: "100%",
 				height: "100%",
 				children: /* @__PURE__ */ i(c, { children: /* @__PURE__ */ a(s, {
-					data: b,
+					data: S,
 					cx: "50%",
 					cy: "80%",
 					startAngle: 180,
@@ -35,7 +37,7 @@ var u = ({ value: u, min: d = 0, max: f = 100, height: p = 200, width: m = "100%
 					dataKey: "value",
 					stroke: "none",
 					isAnimationActive: v,
-					children: [/* @__PURE__ */ i(o, { fill: x }), /* @__PURE__ */ i(o, { fill: "var(--wim-color-surface-variant)" })]
+					children: [/* @__PURE__ */ i(o, { fill: C }), /* @__PURE__ */ i(o, { fill: "var(--wim-color-surface-variant)" })]
 				}) })
 			}), /* @__PURE__ */ i("div", {
 				className: n.gaugeLabel,

package/dist/components/charts/Heatmap/Heatmap.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./heatmap.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s=({data:e,xAxisKey:i,yAxisKey:s,height:c=300,width:l=`100%`,title:u,colorRange:d=[`var(--wim-color-surface-variant)`,`var(--wim-color-chart-primary)`],animated:f=!1})=>{let p=e.map(e=>({x:i.indexOf(e.x),y:s.indexOf(e.y),value:e.value,labelX:e.x,labelY:e.y})),m=e.map(e=>e.value),h=Math.max(...m),g=Math.min(...m),_=e=>{let t=h-g,n=t===0?1:(e-g)/t,r=Math.round(n*100);return`color-mix(in oklch, ${d[1]} ${r}%, ${d[0]})`};return(0,a.jsxs)(`div`,{className:`wim-heatmap ${r.default.root}`,style:{width:l},children:[u&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:u}),(0,a.jsx)(`div`,{className:r.default.container,style:{height:c},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.ScatterChart,{margin:{top:20,right:4,left:8,bottom:20},children:[(0,a.jsx)(o.XAxis,{type:`number`,dataKey:`x`,ticks:Array.from({length:i.length},(e,t)=>t),tickFormatter:e=>i[e],padding:{left:20,right:20},...n.CHART_THEME.axis}),(0,a.jsx)(o.YAxis,{type:`number`,dataKey:`y`,ticks:Array.from({length:s.length},(e,t)=>t),tickFormatter:e=>s[e],...n.CHART_THEME.axis}),(0,a.jsx)(o.ZAxis,{type:`number`,dataKey:`value`,range:[400,400]}),(0,a.jsx)(o.Tooltip,{cursor:n.CHART_THEME.tooltip.cursor,content:({active:e,payload:t})=>{if(e&&t&&t.length){let e=t[0].payload;return(0,a.jsxs)(`div`,{style:{...n.CHART_THEME.tooltip.contentStyle,padding:`8px`},children:[(0,a.jsxs)(`div`,{children:[e.labelX,` / `,e.labelY]}),(0,a.jsxs)(`div`,{style:{fontWeight:`bold`},children:[`Value: `,e.value]})]})}return null}}),(0,a.jsx)(o.Scatter,{data:p,shape:`square`,isAnimationActive:f,children:p.map((e,t)=>(0,a.jsx)(o.Cell,{fill:_(e.value)},`cell-${t}`))})]})})})]})};exports.Heatmap=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("../../_internal/ChartDataTable.cjs"),i=require("../../_internal/chartTableData.cjs"),a=require("./heatmap.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime"),c=require("recharts");var l=({data:e,xAxisKey:o,yAxisKey:l,height:u=300,width:d=`100%`,title:f,colorRange:p=[`var(--wim-color-surface-variant)`,`var(--wim-color-chart-primary)`],animated:m=!1,"aria-label":h})=>{let g=h??f,_=i.matrixTable(e,o,l),v=e.map(e=>({x:o.indexOf(e.x),y:l.indexOf(e.y),value:e.value,labelX:e.x,labelY:e.y})),y=e.map(e=>e.value),b=Math.max(...y),x=Math.min(...y),S=e=>{let t=b-x,n=t===0?1:(e-x)/t,r=Math.round(n*100);return`color-mix(in oklch, ${p[1]} ${r}%, ${p[0]})`};return(0,s.jsxs)(`div`,{className:`wim-heatmap ${a.default.root}`,style:{width:d},role:g?`figure`:void 0,"aria-label":g,children:[f&&(0,s.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:f}),(0,s.jsx)(`div`,{className:a.default.container,style:{height:u},"aria-hidden":`true`,children:(0,s.jsx)(c.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,s.jsxs)(c.ScatterChart,{...n.CHART_HIDDEN_A11Y_PROPS,margin:{top:20,right:4,left:8,bottom:20},children:[(0,s.jsx)(c.XAxis,{type:`number`,dataKey:`x`,ticks:Array.from({length:o.length},(e,t)=>t),tickFormatter:e=>o[e],padding:{left:20,right:20},...n.CHART_THEME.axis}),(0,s.jsx)(c.YAxis,{type:`number`,dataKey:`y`,ticks:Array.from({length:l.length},(e,t)=>t),tickFormatter:e=>l[e],...n.CHART_THEME.axis}),(0,s.jsx)(c.ZAxis,{type:`number`,dataKey:`value`,range:[400,400]}),(0,s.jsx)(c.Tooltip,{cursor:n.CHART_THEME.tooltip.cursor,content:({active:e,payload:t})=>{if(e&&t&&t.length){let e=t[0].payload;return(0,s.jsxs)(`div`,{style:{...n.CHART_THEME.tooltip.contentStyle,padding:`8px`},children:[(0,s.jsxs)(`div`,{children:[e.labelX,` / `,e.labelY]}),(0,s.jsxs)(`div`,{style:{fontWeight:`bold`},children:[`Value: `,e.value]})]})}return null}}),(0,s.jsx)(c.Scatter,{data:v,shape:`square`,isAnimationActive:m,children:v.map((e,t)=>(0,s.jsx)(c.Cell,{fill:S(e.value)},`cell-${t}`))})]})})}),(0,s.jsx)(r.ChartDataTable,{caption:g,columns:_.columns,rows:_.rows})]})};exports.Heatmap=l;

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

@@ -40,5 +40,11 @@ export type HeatmapProps = {
      * @default false
      */
     animated?: boolean;
+    /**
+     * Accessible name for the chart. Defaults to `title` when omitted; pass this
+     * when the chart has no visible title, or when the title is not descriptive
+     * enough on its own.
+     */
+    "aria-label"?: string;
 };
-export declare const Heatmap: ({ data, xAxisKey, yAxisKey, height, width, title, colorRange, animated, }: HeatmapProps) => React.JSX.Element;
+export declare const Heatmap: ({ data, xAxisKey, yAxisKey, height, width, title, colorRange, animated, "aria-label": ariaLabel, }: HeatmapProps) => React.JSX.Element;

package/dist/components/charts/Heatmap/Heatmap.js

@@ -1,101 +1,115 @@
 "use client";
 import { Title as e } from "../../typography/Title/Title.js";
-import { CHART_THEME as t } from "../../helpers.js";
-import n from "./heatmap.module.js";
+import { CHART_HIDDEN_A11Y_PROPS as t, CHART_THEME as n } from "../../helpers.js";
+import { ChartDataTable as r } from "../../_internal/ChartDataTable.js";
+import { matrixTable as i } from "../../_internal/chartTableData.js";
+import a from "./heatmap.module.js";
 import "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Cell as a, ResponsiveContainer as o, Scatter as s, ScatterChart as c, Tooltip as l, XAxis as u, YAxis as d, ZAxis as f } from "recharts";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Cell as c, ResponsiveContainer as l, Scatter as u, ScatterChart as d, Tooltip as f, XAxis as p, YAxis as m, ZAxis as h } from "recharts";
 //#region src/components/charts/Heatmap/Heatmap.tsx
-var p = ({ data: p, xAxisKey: m, yAxisKey: h, height: g = 300, width: _ = "100%", title: v, colorRange: y = ["var(--wim-color-surface-variant)", "var(--wim-color-chart-primary)"], animated: b = !1 }) => {
-	let x = p.map((e) => ({
-		x: m.indexOf(e.x),
-		y: h.indexOf(e.y),
+var g = ({ data: g, xAxisKey: _, yAxisKey: v, height: y = 300, width: b = "100%", title: x, colorRange: S = ["var(--wim-color-surface-variant)", "var(--wim-color-chart-primary)"], animated: C = !1, "aria-label": w }) => {
+	let T = w ?? x, E = i(g, _, v), D = g.map((e) => ({
+		x: _.indexOf(e.x),
+		y: v.indexOf(e.y),
 		value: e.value,
 		labelX: e.x,
 		labelY: e.y
-	})), S = p.map((e) => e.value), C = Math.max(...S), w = Math.min(...S), T = (e) => {
-		let t = C - w, n = t === 0 ? 1 : (e - w) / t, r = Math.round(n * 100);
-		return `color-mix(in oklch, ${y[1]} ${r}%, ${y[0]})`;
+	})), O = g.map((e) => e.value), k = Math.max(...O), A = Math.min(...O), j = (e) => {
+		let t = k - A, n = t === 0 ? 1 : (e - A) / t, r = Math.round(n * 100);
+		return `color-mix(in oklch, ${S[1]} ${r}%, ${S[0]})`;
 	};
-	return /* @__PURE__ */ i("div", {
-		className: `wim-heatmap ${n.root}`,
-		style: { width: _ },
-		children: [v && /* @__PURE__ */ r(e, {
-			tag: "h3",
-			size: "md",
-			style: { marginBottom: "var(--wim-spacing-md)" },
-			children: v
-		}), /* @__PURE__ */ r("div", {
-			className: n.container,
-			style: { height: g },
-			children: /* @__PURE__ */ r(o, {
-				width: "100%",
-				height: "100%",
-				children: /* @__PURE__ */ i(c, {
-					margin: {
-						top: 20,
-						right: 4,
-						left: 8,
-						bottom: 20
-					},
-					children: [
-						/* @__PURE__ */ r(u, {
-							type: "number",
-							dataKey: "x",
-							ticks: Array.from({ length: m.length }, (e, t) => t),
-							tickFormatter: (e) => m[e],
-							padding: {
-								left: 20,
-								right: 20
-							},
-							...t.axis
-						}),
-						/* @__PURE__ */ r(d, {
-							type: "number",
-							dataKey: "y",
-							ticks: Array.from({ length: h.length }, (e, t) => t),
-							tickFormatter: (e) => h[e],
-							...t.axis
-						}),
-						/* @__PURE__ */ r(f, {
-							type: "number",
-							dataKey: "value",
-							range: [400, 400]
-						}),
-						/* @__PURE__ */ r(l, {
-							cursor: t.tooltip.cursor,
-							content: ({ active: e, payload: n }) => {
-								if (e && n && n.length) {
-									let e = n[0].payload;
-									return /* @__PURE__ */ i("div", {
-										style: {
-											...t.tooltip.contentStyle,
-											padding: "8px"
-										},
-										children: [/* @__PURE__ */ i("div", { children: [
-											e.labelX,
-											" / ",
-											e.labelY
-										] }), /* @__PURE__ */ i("div", {
-											style: { fontWeight: "bold" },
-											children: ["Value: ", e.value]
-										})]
-									});
+	return /* @__PURE__ */ s("div", {
+		className: `wim-heatmap ${a.root}`,
+		style: { width: b },
+		role: T ? "figure" : void 0,
+		"aria-label": T,
+		children: [
+			x && /* @__PURE__ */ o(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: x
+			}),
+			/* @__PURE__ */ o("div", {
+				className: a.container,
+				style: { height: y },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ o(l, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ s(d, {
+						...t,
+						margin: {
+							top: 20,
+							right: 4,
+							left: 8,
+							bottom: 20
+						},
+						children: [
+							/* @__PURE__ */ o(p, {
+								type: "number",
+								dataKey: "x",
+								ticks: Array.from({ length: _.length }, (e, t) => t),
+								tickFormatter: (e) => _[e],
+								padding: {
+									left: 20,
+									right: 20
+								},
+								...n.axis
+							}),
+							/* @__PURE__ */ o(m, {
+								type: "number",
+								dataKey: "y",
+								ticks: Array.from({ length: v.length }, (e, t) => t),
+								tickFormatter: (e) => v[e],
+								...n.axis
+							}),
+							/* @__PURE__ */ o(h, {
+								type: "number",
+								dataKey: "value",
+								range: [400, 400]
+							}),
+							/* @__PURE__ */ o(f, {
+								cursor: n.tooltip.cursor,
+								content: ({ active: e, payload: t }) => {
+									if (e && t && t.length) {
+										let e = t[0].payload;
+										return /* @__PURE__ */ s("div", {
+											style: {
+												...n.tooltip.contentStyle,
+												padding: "8px"
+											},
+											children: [/* @__PURE__ */ s("div", { children: [
+												e.labelX,
+												" / ",
+												e.labelY
+											] }), /* @__PURE__ */ s("div", {
+												style: { fontWeight: "bold" },
+												children: ["Value: ", e.value]
+											})]
+										});
+									}
+									return null;
 								}
-								return null;
-							}
-						}),
-						/* @__PURE__ */ r(s, {
-							data: x,
-							shape: "square",
-							isAnimationActive: b,
-							children: x.map((e, t) => /* @__PURE__ */ r(a, { fill: T(e.value) }, `cell-${t}`))
-						})
-					]
+							}),
+							/* @__PURE__ */ o(u, {
+								data: D,
+								shape: "square",
+								isAnimationActive: C,
+								children: D.map((e, t) => /* @__PURE__ */ o(c, { fill: j(e.value) }, `cell-${t}`))
+							})
+						]
+					})
 				})
+			}),
+			/* @__PURE__ */ o(r, {
+				caption: T,
+				columns: E.columns,
+				rows: E.rows
 			})
-		})]
+		]
 	});
 };
 //#endregion
-export { p as Heatmap };
+export { g as Heatmap };

package/dist/components/charts/LineChart/LineChart.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./line-chart.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s=({data:e,keys:i,xAxisKey:s,height:c=300,width:l=`100%`,title:u,smooth:d=!1,yDomain:f=[0,`auto`],animated:p=!1})=>(0,a.jsxs)(`div`,{className:`wim-line-chart ${r.default.root}`,style:{width:l},children:[u&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:u}),(0,a.jsx)(`div`,{className:r.default.container,style:{height:c},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.LineChart,{data:e,margin:{top:5,right:30,left:0,bottom:5},children:[(0,a.jsx)(o.CartesianGrid,{...n.CHART_THEME.grid,vertical:!1}),(0,a.jsx)(o.XAxis,{dataKey:s,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,a.jsx)(o.YAxis,{width:44,domain:f,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,a.jsx)(o.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,a.jsx)(o.Legend,{verticalAlign:`top`,height:36,...n.CHART_THEME.legend}),i.map((e,t)=>(0,a.jsx)(o.Line,{type:d?`monotone`:`linear`,dataKey:e,stroke:n.CHART_COLORS[t%n.CHART_COLORS.length],strokeWidth:2,dot:{r:4,strokeWidth:2,fill:`var(--wim-color-primary-fill)`},activeDot:{r:6},isAnimationActive:p},e))]})})})]});exports.LineChart=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("../../_internal/ChartDataTable.cjs"),i=require("../../_internal/chartTableData.cjs"),a=require("./line-chart.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime"),c=require("recharts");var l=({data:e,keys:o,xAxisKey:l,height:u=300,width:d=`100%`,title:f,smooth:p=!1,yDomain:m=[0,`auto`],animated:h=!1,"aria-label":g})=>{let _=g??f,v=i.seriesTable(e,l,o);return(0,s.jsxs)(`div`,{className:`wim-line-chart ${a.default.root}`,style:{width:d},role:_?`figure`:void 0,"aria-label":_,children:[f&&(0,s.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:f}),(0,s.jsx)(`div`,{className:a.default.container,style:{height:u},"aria-hidden":`true`,children:(0,s.jsx)(c.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,s.jsxs)(c.LineChart,{...n.CHART_HIDDEN_A11Y_PROPS,data:e,margin:{top:5,right:30,left:0,bottom:5},children:[(0,s.jsx)(c.CartesianGrid,{...n.CHART_THEME.grid,vertical:!1}),(0,s.jsx)(c.XAxis,{dataKey:l,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,s.jsx)(c.YAxis,{width:44,domain:m,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,s.jsx)(c.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,s.jsx)(c.Legend,{verticalAlign:`top`,height:36,...n.CHART_THEME.legend}),o.map((e,t)=>(0,s.jsx)(c.Line,{type:p?`monotone`:`linear`,dataKey:e,stroke:n.CHART_COLORS[t%n.CHART_COLORS.length],strokeWidth:2,dot:{r:4,strokeWidth:2,fill:`var(--wim-color-primary-fill)`},activeDot:{r:6},isAnimationActive:h},e))]})})}),(0,s.jsx)(r.ChartDataTable,{caption:_,columns:v.columns,rows:v.rows})]})};exports.LineChart=l;

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

@@ -44,5 +44,11 @@ export type LineChartProps = {
      * @default false
      */
     animated?: boolean;
+    /**
+     * Accessible name for the chart. Defaults to `title` when omitted; pass this
+     * when the chart has no visible title, or when the title is not descriptive
+     * enough on its own.
+     */
+    "aria-label"?: string;
 };
-export declare const LineChart: ({ data, keys, xAxisKey, height, width, title, smooth, yDomain, animated, }: LineChartProps) => React.JSX.Element;
+export declare const LineChart: ({ data, keys, xAxisKey, height, width, title, smooth, yDomain, animated, "aria-label": ariaLabel, }: LineChartProps) => React.JSX.Element;

package/dist/components/charts/LineChart/LineChart.js

@@ -1,77 +1,94 @@
 "use client";
 import { Title as e } from "../../typography/Title/Title.js";
-import { CHART_COLORS as t, CHART_THEME as n } from "../../helpers.js";
-import r from "./line-chart.module.js";
+import { CHART_COLORS as t, CHART_HIDDEN_A11Y_PROPS as n, CHART_THEME as r } from "../../helpers.js";
+import { ChartDataTable as i } from "../../_internal/ChartDataTable.js";
+import { seriesTable as a } from "../../_internal/chartTableData.js";
+import o from "./line-chart.module.js";
 import "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { CartesianGrid as o, Legend as s, Line as c, LineChart as l, ResponsiveContainer as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { CartesianGrid as l, Legend as u, Line as d, LineChart as f, ResponsiveContainer as p, Tooltip as m, XAxis as h, YAxis as g } from "recharts";
 //#region src/components/charts/LineChart/LineChart.tsx
-var m = ({ data: m, keys: h, xAxisKey: g, height: _ = 300, width: v = "100%", title: y, smooth: b = !1, yDomain: x = [0, "auto"], animated: S = !1 }) => /* @__PURE__ */ a("div", {
-	className: `wim-line-chart ${r.root}`,
-	style: { width: v },
-	children: [y && /* @__PURE__ */ i(e, {
-		tag: "h3",
-		size: "md",
-		style: { marginBottom: "var(--wim-spacing-md)" },
-		children: y
-	}), /* @__PURE__ */ i("div", {
-		className: r.container,
-		style: { height: _ },
-		children: /* @__PURE__ */ i(u, {
-			width: "100%",
-			height: "100%",
-			children: /* @__PURE__ */ a(l, {
-				data: m,
-				margin: {
-					top: 5,
-					right: 30,
-					left: 0,
-					bottom: 5
-				},
-				children: [
-					/* @__PURE__ */ i(o, {
-						...n.grid,
-						vertical: !1
-					}),
-					/* @__PURE__ */ i(f, {
-						dataKey: g,
-						...n.axis,
-						tickLine: !1,
-						axisLine: !1
-					}),
-					/* @__PURE__ */ i(p, {
-						width: 44,
-						domain: x,
-						...n.axis,
-						tickLine: !1,
-						axisLine: !1
-					}),
-					/* @__PURE__ */ i(d, {
-						contentStyle: n.tooltip.contentStyle,
-						cursor: n.tooltip.cursor
-					}),
-					/* @__PURE__ */ i(s, {
-						verticalAlign: "top",
-						height: 36,
-						...n.legend
-					}),
-					h.map((e, n) => /* @__PURE__ */ i(c, {
-						type: b ? "monotone" : "linear",
-						dataKey: e,
-						stroke: t[n % t.length],
-						strokeWidth: 2,
-						dot: {
-							r: 4,
-							strokeWidth: 2,
-							fill: "var(--wim-color-primary-fill)"
+var _ = ({ data: _, keys: v, xAxisKey: y, height: b = 300, width: x = "100%", title: S, smooth: C = !1, yDomain: w = [0, "auto"], animated: T = !1, "aria-label": E }) => {
+	let D = E ?? S, O = a(_, y, v);
+	return /* @__PURE__ */ c("div", {
+		className: `wim-line-chart ${o.root}`,
+		style: { width: x },
+		role: D ? "figure" : void 0,
+		"aria-label": D,
+		children: [
+			S && /* @__PURE__ */ s(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: S
+			}),
+			/* @__PURE__ */ s("div", {
+				className: o.container,
+				style: { height: b },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s(p, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ c(f, {
+						...n,
+						data: _,
+						margin: {
+							top: 5,
+							right: 30,
+							left: 0,
+							bottom: 5
 						},
-						activeDot: { r: 6 },
-						isAnimationActive: S
-					}, e))
-				]
+						children: [
+							/* @__PURE__ */ s(l, {
+								...r.grid,
+								vertical: !1
+							}),
+							/* @__PURE__ */ s(h, {
+								dataKey: y,
+								...r.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ s(g, {
+								width: 44,
+								domain: w,
+								...r.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ s(m, {
+								contentStyle: r.tooltip.contentStyle,
+								cursor: r.tooltip.cursor
+							}),
+							/* @__PURE__ */ s(u, {
+								verticalAlign: "top",
+								height: 36,
+								...r.legend
+							}),
+							v.map((e, n) => /* @__PURE__ */ s(d, {
+								type: C ? "monotone" : "linear",
+								dataKey: e,
+								stroke: t[n % t.length],
+								strokeWidth: 2,
+								dot: {
+									r: 4,
+									strokeWidth: 2,
+									fill: "var(--wim-color-primary-fill)"
+								},
+								activeDot: { r: 6 },
+								isAnimationActive: T
+							}, e))
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ s(i, {
+				caption: D,
+				columns: O.columns,
+				rows: O.rows
 			})
-		})
-	})]
-});
+		]
+	});
+};
 //#endregion
-export { m as LineChart };
+export { _ as LineChart };