wimui 0.25.0 → 0.26.0

package/dist/components/_internal/ChartDataTable.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("./chart-data-table.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");var i=({caption:e,columns:n,rows:i})=>n.length===0||i.length===0?null:(0,r.jsx)(`div`,{className:t.default.root,children:(0,r.jsxs)(`table`,{"aria-label":e,children:[(0,r.jsx)(`thead`,{children:(0,r.jsx)(`tr`,{children:n.map((e,t)=>e===``?(0,r.jsx)(`td`,{},`corner-${t}`):(0,r.jsx)(`th`,{scope:`col`,children:e},`${e}-${t}`))})}),(0,r.jsx)(`tbody`,{children:i.map((e,t)=>(0,r.jsx)(`tr`,{children:e.map((e,t)=>t===0?(0,r.jsx)(`th`,{scope:`row`,children:e},t):(0,r.jsx)(`td`,{children:e},t))},t))})]})});exports.ChartDataTable=i;

package/dist/components/_internal/ChartDataTable.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+/** 表に入れられる値。`ChartDataPoint` の値域と揃える。 */
+export type ChartTableCell = string | number | null | undefined;
+export type ChartDataTableProps = {
+    /**
+     * 表の名前。図に付けた名前をそのまま使う（別の名前を作らない）。
+     *
+     * **`<caption>` ではなく `aria-label` で付ける。** `<caption>` は DOM に
+     * テキストノードを足すので、可視の見出しと同じ文字列が 2 つになり、
+     * 利用者側の `getByText(title)` が**多重一致で落ちる**（この repo 自身の
+     * チャートテスト 10 件が実際に落ちた）。名前の付き方は変わらないのに
+     * 使う側のテストだけ壊すのは筋が悪い。
+     */
+    caption?: string;
+    /** 列見出し。1 列目は行見出しになる。 */
+    columns: string[];
+    /** 行。`columns` と同じ長さで渡す。 */
+    rows: ChartTableCell[][];
+};
+/**
+ * チャートの値を、**目には見えないが支援技術は読める表**として併記する（T230）。
+ *
+ * ── なぜ名前だけでは足りないのか ────────────────────────────────────────
+ * `role="img"` と `aria-label` を付ければ「この図が何か」は伝わるが、**描かれた
+ * 値は 1 つも伝わらない**。チャートは値を見せるための部品なので、名前だけでは
+ * 「グラフがあります」と言って終わる。表を併記して初めて、見えない人にも同じ
+ * 情報が届く。
+ *
+ * ── 図の**中**には置けない ──────────────────────────────────────────────
+ * `role="img"` は **children presentational**（中身が支援技術に露出しない）。
+ * 表を `role="img"` の内側に置くと**読まれない**ので、この部品は必ず図の
+ * **兄弟**として置く。チャート側は根を `role="figure"` にし、recharts の描画を
+ * `aria-hidden` で隠したうえで、この表を並べる。
+ *
+ * ── 隠し方 ──────────────────────────────────────────────────────────────
+ * `VisuallyHidden` は `<span>` を描くので、`<table>` を入れると**不正な HTML**に
+ * なる（span は phrasing content）。そのため同じ視覚隠蔽の規則を持つ `<div>` を
+ * ここで用意している。規則は `visuallyHidden.module.scss` と同一。
+ *
+ * ── 空のときは何も描かない ──────────────────────────────────────────────
+ * 見出しだけの表は音声で読むと雑音になるだけなので、行が無ければ描かない。
+ */
+export declare const ChartDataTable: ({ caption, columns, rows, }: ChartDataTableProps) => React.JSX.Element | null;

package/dist/components/_internal/ChartDataTable.js

@@ -0,0 +1,20 @@
+"use client";
+import e from "./chart-data-table.module.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/_internal/ChartDataTable.tsx
+var r = ({ caption: r, columns: i, rows: a }) => i.length === 0 || a.length === 0 ? null : /* @__PURE__ */ t("div", {
+	className: e.root,
+	children: /* @__PURE__ */ n("table", {
+		"aria-label": r,
+		children: [/* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { children: i.map((e, n) => e === "" ? /* @__PURE__ */ t("td", {}, `corner-${n}`) : /* @__PURE__ */ t("th", {
+			scope: "col",
+			children: e
+		}, `${e}-${n}`)) }) }), /* @__PURE__ */ t("tbody", { children: a.map((e, n) => /* @__PURE__ */ t("tr", { children: e.map((e, n) => n === 0 ? /* @__PURE__ */ t("th", {
+			scope: "row",
+			children: e
+		}, n) : /* @__PURE__ */ t("td", { children: e }, n)) }, n)) })]
+	})
+});
+//#endregion
+export { r as ChartDataTable };

package/dist/components/_internal/chart-data-table.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_hg6ur_6`,t={root:e};exports.default=t,exports.root=e;

package/dist/components/_internal/chart-data-table.module.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/_internal/chart-data-table.module.scss
+var e = "_root_hg6ur_6", t = { root: e };
+//#endregion
+export { t as default, e as root };

package/dist/components/_internal/chartTableData.d.ts

@@ -0,0 +1,53 @@
+import { ChartDataPoint } from '../helpers';
+import { ChartTableCell } from './ChartDataTable';
+/**
+ * チャートの `data` を、`ChartDataTable` が描ける形（列見出し + 行）へ写す（T230）。
+ *
+ * **チャートごとに `data` の形が違う**ので、ここに形ごとの写し方を集めている。
+ * 各チャートに散らすと、片方だけ直して片方が腐る ── 実際 T229 で、同じ内容が
+ * 2 か所にあると**負けたほうが黙って腐る**のを見たばかり。
+ *
+ * 値の見出しは**呼び出し側が渡したキー名をそのまま使う**（`xAxisKey` / `keys` /
+ * `dataKey` など）。こちらで訳語を用意すると、呼び出し側のデータと表の言葉が
+ * 食い違う。キーが無い形（`PieChart` の `{ name, value }` など）だけ既定の
+ * 英語を持つ ── `GanttChart` が既に同じやり方をしている。
+ */
+export type ChartTable = {
+    columns: string[];
+    rows: ChartTableCell[][];
+};
+/**
+ * 系列型: 1 行が 1 目盛りで、系列ぶんの列が並ぶ。
+ * `AreaChart` / `BarChart` / `LineChart` / `RadarChart` がこれ。
+ */
+export declare const seriesTable: (data: ChartDataPoint[], indexKey: string, keys: string[]) => ChartTable;
+/**
+ * 対型: 名前と値の 2 列。`FunnelChart` / `PieChart` / `Treemap` がこれ。
+ * `Treemap` は入れ子（`{ name, children: [...] }`）で渡されることがあるので、
+ * 葉だけを取り出してから渡すこと（`flattenLeaves`）。
+ */
+export declare const pairTable: (data: ChartDataPoint[], nameKey: string, valueKey: string) => ChartTable;
+/**
+ * 入れ子のデータから葉だけを取り出す。`Treemap` は `children` を持つ形も受ける。
+ * 描かれているのは葉のタイルだけなので、表も葉だけを並べる。
+ */
+export declare const flattenLeaves: (nodes: ChartDataPoint[]) => ChartDataPoint[];
+/**
+ * 行列型: 行が y、列が x で、交点に値が入る。`Heatmap` がこれ。
+ * 1 列目は行見出し（y のラベル）なので、列見出しの先頭は空にする。
+ */
+export declare const matrixTable: (data: {
+    x: string;
+    y: string;
+    value: number;
+}[], xLabels: string[], yLabels: string[]) => ChartTable;
+/**
+ * 点型: 1 行が 1 点。`ScatterChart` がこれ。
+ * `z` は任意なので、**1 点でも持っていれば**列に出す（持たない点は空欄）。
+ */
+export declare const pointTable: (data: {
+    x: number;
+    y: number;
+    z?: number;
+    name: string;
+}[], xLabel: string, yLabel: string, zLabel: string) => ChartTable;

package/dist/components/ai/AgentStatus/agent-status.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1sh9o_3`,t=`_sm_1sh9o_14`,n=`_lg_1sh9o_18`,r=`_indicator_1sh9o_23`,i=`_dot_1sh9o_32`,a=`_label_1sh9o_47`,o=`_idle_1sh9o_51`,s=`_thinking_1sh9o_54`,c=`_running_1sh9o_60`,l=`_waiting_1sh9o_69`,u=`_done_1sh9o_72`,d=`_error_1sh9o_75`,f={root:e,sm:t,lg:n,indicator:r,dot:i,label:a,idle:o,thinking:s,"agent-pulse":`_agent-pulse_1sh9o_1`,running:c,"agent-spin":`_agent-spin_1sh9o_1`,waiting:l,done:u,error:d};exports.default=f,exports.done=u,exports.dot=i,exports.error=d,exports.idle=o,exports.indicator=r,exports.label=a,exports.lg=n,exports.root=e,exports.running=c,exports.sm=t,exports.thinking=s,exports.waiting=l;
+var e=`_root_nu4a4_3`,t=`_sm_nu4a4_14`,n=`_lg_nu4a4_18`,r=`_indicator_nu4a4_23`,i=`_dot_nu4a4_32`,a=`_label_nu4a4_47`,o=`_idle_nu4a4_51`,s=`_thinking_nu4a4_54`,c=`_running_nu4a4_60`,l=`_waiting_nu4a4_69`,u=`_done_nu4a4_72`,d=`_error_nu4a4_75`,f={root:e,sm:t,lg:n,indicator:r,dot:i,label:a,idle:o,thinking:s,"agent-pulse":`_agent-pulse_nu4a4_1`,running:c,"agent-spin":`_agent-spin_nu4a4_1`,waiting:l,done:u,error:d};exports.default=f,exports.done=u,exports.dot=i,exports.error=d,exports.idle=o,exports.indicator=r,exports.label=a,exports.lg=n,exports.root=e,exports.running=c,exports.sm=t,exports.thinking=s,exports.waiting=l;

package/dist/components/ai/AgentStatus/agent-status.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/ai/AgentStatus/agent-status.module.scss
-var e = "_root_1sh9o_3", t = "_sm_1sh9o_14", n = "_lg_1sh9o_18", r = "_indicator_1sh9o_23", i = "_dot_1sh9o_32", a = "_label_1sh9o_47", o = "_idle_1sh9o_51", s = "_thinking_1sh9o_54", c = "_running_1sh9o_60", l = "_waiting_1sh9o_69", u = "_done_1sh9o_72", d = "_error_1sh9o_75", f = {
+var e = "_root_nu4a4_3", t = "_sm_nu4a4_14", n = "_lg_nu4a4_18", r = "_indicator_nu4a4_23", i = "_dot_nu4a4_32", a = "_label_nu4a4_47", o = "_idle_nu4a4_51", s = "_thinking_nu4a4_54", c = "_running_nu4a4_60", l = "_waiting_nu4a4_69", u = "_done_nu4a4_72", d = "_error_nu4a4_75", f = {
 	root: e,
 	sm: t,
 	lg: n,
@@ -9,9 +9,9 @@ var e = "_root_1sh9o_3", t = "_sm_1sh9o_14", n = "_lg_1sh9o_18", r = "_indicator
 	label: a,
 	idle: o,
 	thinking: s,
-	"agent-pulse": "_agent-pulse_1sh9o_1",
+	"agent-pulse": "_agent-pulse_nu4a4_1",
 	running: c,
-	"agent-spin": "_agent-spin_1sh9o_1",
+	"agent-spin": "_agent-spin_nu4a4_1",
 	waiting: l,
 	done: u,
 	error: d

package/dist/components/ai/CodeDiffViewer/code-diff-viewer.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_8jzru_29`,t=`_header_8jzru_45`,n=`_headerLeft_8jzru_55`,r=`_filename_8jzru_61`,i=`_viewToggle_8jzru_69`,a=`_viewBtn_8jzru_75`,o=`_active_8jzru_87`,s=`_headerActions_8jzru_98`,c=`_iconButton_8jzru_104`,l=`_copied_8jzru_125`,u=`_actionButton_8jzru_131`,d=`_applyButton_8jzru_148`,f=`_applying_8jzru_157`,p=`_applied_8jzru_161`,m=`_spin_8jzru_170`,h=`_rejectButton_8jzru_178`,g=`_body_8jzru_187`,_=`_unified_8jzru_192`,v=`_row_8jzru_197`,y=`_added_8jzru_200`,b=`_removed_8jzru_203`,x=`_split_8jzru_210`,S=`_splitPane_8jzru_214`,C=`_splitDivider_8jzru_219`,w=`_splitCell_8jzru_224`,T=`_empty_8jzru_234`,E=`_lineNum_8jzru_244`,D=`_prefix_8jzru_259`,O=`_lineContent_8jzru_274`,k={root:e,header:t,headerLeft:n,filename:r,viewToggle:i,viewBtn:a,active:o,headerActions:s,iconButton:c,copied:l,actionButton:u,applyButton:d,applying:f,applied:p,spin:m,"code-spin":`_code-spin_8jzru_1`,rejectButton:h,body:g,unified:_,row:v,added:y,removed:b,split:x,splitPane:S,splitDivider:C,splitCell:w,empty:T,lineNum:E,prefix:D,lineContent:O};exports.actionButton=u,exports.active=o,exports.added=y,exports.applied=p,exports.applyButton=d,exports.applying=f,exports.body=g,exports.copied=l,exports.default=k,exports.empty=T,exports.filename=r,exports.header=t,exports.headerActions=s,exports.headerLeft=n,exports.iconButton=c,exports.lineContent=O,exports.lineNum=E,exports.prefix=D,exports.rejectButton=h,exports.removed=b,exports.root=e,exports.row=v,exports.spin=m,exports.split=x,exports.splitCell=w,exports.splitDivider=C,exports.splitPane=S,exports.unified=_,exports.viewBtn=a,exports.viewToggle=i;
+var e=`_root_1sgsp_29`,t=`_header_1sgsp_45`,n=`_headerLeft_1sgsp_55`,r=`_filename_1sgsp_61`,i=`_viewToggle_1sgsp_69`,a=`_viewBtn_1sgsp_75`,o=`_active_1sgsp_87`,s=`_headerActions_1sgsp_98`,c=`_iconButton_1sgsp_104`,l=`_copied_1sgsp_125`,u=`_actionButton_1sgsp_131`,d=`_applyButton_1sgsp_148`,f=`_applying_1sgsp_157`,p=`_applied_1sgsp_161`,m=`_spin_1sgsp_170`,h=`_rejectButton_1sgsp_178`,g=`_body_1sgsp_187`,_=`_unified_1sgsp_192`,v=`_row_1sgsp_197`,y=`_added_1sgsp_200`,b=`_removed_1sgsp_203`,x=`_split_1sgsp_210`,S=`_splitPane_1sgsp_214`,C=`_splitDivider_1sgsp_219`,w=`_splitCell_1sgsp_224`,T=`_empty_1sgsp_234`,E=`_lineNum_1sgsp_244`,D=`_prefix_1sgsp_259`,O=`_lineContent_1sgsp_274`,k={root:e,header:t,headerLeft:n,filename:r,viewToggle:i,viewBtn:a,active:o,headerActions:s,iconButton:c,copied:l,actionButton:u,applyButton:d,applying:f,applied:p,spin:m,"code-spin":`_code-spin_1sgsp_1`,rejectButton:h,body:g,unified:_,row:v,added:y,removed:b,split:x,splitPane:S,splitDivider:C,splitCell:w,empty:T,lineNum:E,prefix:D,lineContent:O};exports.actionButton=u,exports.active=o,exports.added=y,exports.applied=p,exports.applyButton=d,exports.applying=f,exports.body=g,exports.copied=l,exports.default=k,exports.empty=T,exports.filename=r,exports.header=t,exports.headerActions=s,exports.headerLeft=n,exports.iconButton=c,exports.lineContent=O,exports.lineNum=E,exports.prefix=D,exports.rejectButton=h,exports.removed=b,exports.root=e,exports.row=v,exports.spin=m,exports.split=x,exports.splitCell=w,exports.splitDivider=C,exports.splitPane=S,exports.unified=_,exports.viewBtn=a,exports.viewToggle=i;

package/dist/components/ai/CodeDiffViewer/code-diff-viewer.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/ai/CodeDiffViewer/code-diff-viewer.module.scss
-var e = "_root_8jzru_29", t = "_header_8jzru_45", n = "_headerLeft_8jzru_55", r = "_filename_8jzru_61", i = "_viewToggle_8jzru_69", a = "_viewBtn_8jzru_75", o = "_active_8jzru_87", s = "_headerActions_8jzru_98", c = "_iconButton_8jzru_104", l = "_copied_8jzru_125", u = "_actionButton_8jzru_131", d = "_applyButton_8jzru_148", f = "_applying_8jzru_157", p = "_applied_8jzru_161", m = "_spin_8jzru_170", h = "_rejectButton_8jzru_178", g = "_body_8jzru_187", _ = "_unified_8jzru_192", v = "_row_8jzru_197", y = "_added_8jzru_200", b = "_removed_8jzru_203", x = "_split_8jzru_210", S = "_splitPane_8jzru_214", C = "_splitDivider_8jzru_219", w = "_splitCell_8jzru_224", T = "_empty_8jzru_234", E = "_lineNum_8jzru_244", D = "_prefix_8jzru_259", O = "_lineContent_8jzru_274", k = {
+var e = "_root_1sgsp_29", t = "_header_1sgsp_45", n = "_headerLeft_1sgsp_55", r = "_filename_1sgsp_61", i = "_viewToggle_1sgsp_69", a = "_viewBtn_1sgsp_75", o = "_active_1sgsp_87", s = "_headerActions_1sgsp_98", c = "_iconButton_1sgsp_104", l = "_copied_1sgsp_125", u = "_actionButton_1sgsp_131", d = "_applyButton_1sgsp_148", f = "_applying_1sgsp_157", p = "_applied_1sgsp_161", m = "_spin_1sgsp_170", h = "_rejectButton_1sgsp_178", g = "_body_1sgsp_187", _ = "_unified_1sgsp_192", v = "_row_1sgsp_197", y = "_added_1sgsp_200", b = "_removed_1sgsp_203", x = "_split_1sgsp_210", S = "_splitPane_1sgsp_214", C = "_splitDivider_1sgsp_219", w = "_splitCell_1sgsp_224", T = "_empty_1sgsp_234", E = "_lineNum_1sgsp_244", D = "_prefix_1sgsp_259", O = "_lineContent_1sgsp_274", k = {
 	root: e,
 	header: t,
 	headerLeft: n,
@@ -16,7 +16,7 @@ var e = "_root_8jzru_29", t = "_header_8jzru_45", n = "_headerLeft_8jzru_55", r
 	applying: f,
 	applied: p,
 	spin: m,
-	"code-spin": "_code-spin_8jzru_1",
+	"code-spin": "_code-spin_1sgsp_1",
 	rejectButton: h,
 	body: g,
 	unified: _,

package/dist/components/ai/InteractiveGraph/interactive-graph.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1kkkg_3`,t=`_minimap_1kkkg_84`,n=`_controls_1kkkg_96`,r={root:e,minimap:t,controls:n};exports.controls=n,exports.default=r,exports.minimap=t,exports.root=e;
+var e=`_root_1e18y_3`,t=`_minimap_1e18y_84`,n=`_controls_1e18y_96`,r={root:e,minimap:t,controls:n};exports.controls=n,exports.default=r,exports.minimap=t,exports.root=e;

package/dist/components/ai/InteractiveGraph/interactive-graph.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/ai/InteractiveGraph/interactive-graph.module.scss
-var e = "_root_1kkkg_3", t = "_minimap_1kkkg_84", n = "_controls_1kkkg_96", r = {
+var e = "_root_1e18y_3", t = "_minimap_1e18y_84", n = "_controls_1e18y_96", r = {
 	root: e,
 	minimap: t,
 	controls: n

package/dist/components/charts/AreaChart/AreaChart.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("./area-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,stacked:c=!1,yDomain:l=[0,`auto`],height:u=300,width:d=`100%`,title:f,smooth:p=!0,animated:m=!1})=>(0,a.jsxs)(`div`,{className:`wim-area-chart ${r.default.root}`,style:{width:d},children:[f&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:f}),(0,a.jsx)(`div`,{className:r.default.container,style:{height:u},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.AreaChart,{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:l,...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.Area,{type:p?`monotone`:`linear`,dataKey:e,stroke:n.CHART_COLORS[t%n.CHART_COLORS.length],strokeWidth:2,fill:n.CHART_COLORS[t%n.CHART_COLORS.length],fillOpacity:c?.9:.18,stackId:c?`stack`:void 0,isAnimationActive:m},e))]})})})]});exports.AreaChart=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("./area-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,stacked:u=!1,yDomain:d=[0,`auto`],height:f=300,width:p=`100%`,title:m,smooth:h=!0,animated:g=!1,"aria-label":_})=>{let v=_??m,y=i.seriesTable(e,l,o);return(0,s.jsxs)(`div`,{className:`wim-area-chart ${a.default.root}`,style:{width:p},role:v?`figure`:void 0,"aria-label":v,children:[m&&(0,s.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:m}),(0,s.jsx)(`div`,{className:a.default.container,style:{height:f},"aria-hidden":`true`,children:(0,s.jsx)(c.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,s.jsxs)(c.AreaChart,{...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:d,...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.Area,{type:h?`monotone`:`linear`,dataKey:e,stroke:n.CHART_COLORS[t%n.CHART_COLORS.length],strokeWidth:2,fill:n.CHART_COLORS[t%n.CHART_COLORS.length],fillOpacity:u?.9:.18,stackId:u?`stack`:void 0,isAnimationActive:g},e))]})})}),(0,s.jsx)(r.ChartDataTable,{caption:v,columns:y.columns,rows:y.rows})]})};exports.AreaChart=l;

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

@@ -49,5 +49,11 @@ export type AreaChartProps = {
      * @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 AreaChart: ({ data, keys, xAxisKey, stacked, yDomain, height, width, title, smooth, animated, }: AreaChartProps) => React.JSX.Element;
+export declare const AreaChart: ({ data, keys, xAxisKey, stacked, yDomain, height, width, title, smooth, animated, "aria-label": ariaLabel, }: AreaChartProps) => React.JSX.Element;

package/dist/components/charts/AreaChart/AreaChart.js

@@ -1,74 +1,91 @@
 "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 "./area-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 "./area-chart.module.js";
 import "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Area as o, AreaChart as s, CartesianGrid as c, Legend 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 { Area as l, AreaChart as u, CartesianGrid as d, Legend as f, ResponsiveContainer as p, Tooltip as m, XAxis as h, YAxis as g } from "recharts";
 //#region src/components/charts/AreaChart/AreaChart.tsx
-var m = ({ data: m, keys: h, xAxisKey: g, stacked: _ = !1, yDomain: v = [0, "auto"], height: y = 300, width: b = "100%", title: x, smooth: S = !0, animated: C = !1 }) => /* @__PURE__ */ a("div", {
-	className: `wim-area-chart ${r.root}`,
-	style: { width: b },
-	children: [x && /* @__PURE__ */ i(e, {
-		tag: "h3",
-		size: "md",
-		style: { marginBottom: "var(--wim-spacing-md)" },
-		children: x
-	}), /* @__PURE__ */ i("div", {
-		className: r.container,
-		style: { height: y },
-		children: /* @__PURE__ */ i(u, {
-			width: "100%",
-			height: "100%",
-			children: /* @__PURE__ */ a(s, {
-				data: m,
-				margin: {
-					top: 5,
-					right: 30,
-					left: 0,
-					bottom: 5
-				},
-				children: [
-					/* @__PURE__ */ i(c, {
-						...n.grid,
-						vertical: !1
-					}),
-					/* @__PURE__ */ i(f, {
-						dataKey: g,
-						...n.axis,
-						tickLine: !1,
-						axisLine: !1
-					}),
-					/* @__PURE__ */ i(p, {
-						width: 44,
-						domain: v,
-						...n.axis,
-						tickLine: !1,
-						axisLine: !1
-					}),
-					/* @__PURE__ */ i(d, {
-						contentStyle: n.tooltip.contentStyle,
-						cursor: n.tooltip.cursor
-					}),
-					/* @__PURE__ */ i(l, {
-						verticalAlign: "top",
-						height: 36,
-						...n.legend
-					}),
-					h.map((e, n) => /* @__PURE__ */ i(o, {
-						type: S ? "monotone" : "linear",
-						dataKey: e,
-						stroke: t[n % t.length],
-						strokeWidth: 2,
-						fill: t[n % t.length],
-						fillOpacity: _ ? .9 : .18,
-						stackId: _ ? "stack" : void 0,
-						isAnimationActive: C
-					}, e))
-				]
+var _ = ({ data: _, keys: v, xAxisKey: y, stacked: b = !1, yDomain: x = [0, "auto"], height: S = 300, width: C = "100%", title: w, smooth: T = !0, animated: E = !1, "aria-label": D }) => {
+	let O = D ?? w, k = a(_, y, v);
+	return /* @__PURE__ */ c("div", {
+		className: `wim-area-chart ${o.root}`,
+		style: { width: C },
+		role: O ? "figure" : void 0,
+		"aria-label": O,
+		children: [
+			w && /* @__PURE__ */ s(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: w
+			}),
+			/* @__PURE__ */ s("div", {
+				className: o.container,
+				style: { height: S },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s(p, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ c(u, {
+						...n,
+						data: _,
+						margin: {
+							top: 5,
+							right: 30,
+							left: 0,
+							bottom: 5
+						},
+						children: [
+							/* @__PURE__ */ s(d, {
+								...r.grid,
+								vertical: !1
+							}),
+							/* @__PURE__ */ s(h, {
+								dataKey: y,
+								...r.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ s(g, {
+								width: 44,
+								domain: x,
+								...r.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ s(m, {
+								contentStyle: r.tooltip.contentStyle,
+								cursor: r.tooltip.cursor
+							}),
+							/* @__PURE__ */ s(f, {
+								verticalAlign: "top",
+								height: 36,
+								...r.legend
+							}),
+							v.map((e, n) => /* @__PURE__ */ s(l, {
+								type: T ? "monotone" : "linear",
+								dataKey: e,
+								stroke: t[n % t.length],
+								strokeWidth: 2,
+								fill: t[n % t.length],
+								fillOpacity: b ? .9 : .18,
+								stackId: b ? "stack" : void 0,
+								isAnimationActive: E
+							}, e))
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ s(i, {
+				caption: O,
+				columns: k.columns,
+				rows: k.rows
 			})
-		})
-	})]
-});
+		]
+	});
+};
 //#endregion
-export { m as AreaChart };
+export { _ as AreaChart };

package/dist/components/charts/BarChart/BarChart.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("./bar-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,stacked:c=!1,yDomain:l=[0,`auto`],height:u=300,width:d=`100%`,title:f,animated:p=!1})=>(0,a.jsxs)(`div`,{className:`wim-bar-chart ${r.default.root}`,style:{width:d},children:[f&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:f}),(0,a.jsx)(`div`,{className:r.default.container,style:{height:u},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsxs)(o.BarChart,{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,interval:0,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,a.jsx)(o.YAxis,{width:44,domain:l,...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.Bar,{dataKey:e,fill:n.CHART_COLORS[t%n.CHART_COLORS.length],stackId:c?`stack`:void 0,radius:c?0:[4,4,0,0],stroke:c?`var(--wim-color-surface)`:void 0,strokeWidth:c?2:void 0,isAnimationActive:p},e))]})})})]});exports.BarChart=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("./bar-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,stacked:u=!1,yDomain:d=[0,`auto`],height:f=300,width:p=`100%`,title:m,animated:h=!1,"aria-label":g})=>{let _=g??m,v=i.seriesTable(e,l,o);return(0,s.jsxs)(`div`,{className:`wim-bar-chart ${a.default.root}`,style:{width:p},role:_?`figure`:void 0,"aria-label":_,children:[m&&(0,s.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:m}),(0,s.jsx)(`div`,{className:a.default.container,style:{height:f},"aria-hidden":`true`,children:(0,s.jsx)(c.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,s.jsxs)(c.BarChart,{...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,interval:0,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,s.jsx)(c.YAxis,{width:44,domain:d,...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.Bar,{dataKey:e,fill:n.CHART_COLORS[t%n.CHART_COLORS.length],stackId:u?`stack`:void 0,radius:u?0:[4,4,0,0],stroke:u?`var(--wim-color-surface)`:void 0,strokeWidth:u?2:void 0,isAnimationActive:h},e))]})})}),(0,s.jsx)(r.ChartDataTable,{caption:_,columns:v.columns,rows:v.rows})]})};exports.BarChart=l;

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

@@ -44,5 +44,11 @@ export type BarChartProps = {
      * @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 BarChart: ({ data, keys, xAxisKey, stacked, yDomain, height, width, title, animated, }: BarChartProps) => React.JSX.Element;
+export declare const BarChart: ({ data, keys, xAxisKey, stacked, yDomain, height, width, title, animated, "aria-label": ariaLabel, }: BarChartProps) => React.JSX.Element;

package/dist/components/charts/BarChart/BarChart.js

@@ -1,79 +1,96 @@
 "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 "./bar-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 "./bar-chart.module.js";
 import "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Bar as o, BarChart as s, CartesianGrid as c, Legend 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 { Bar as l, BarChart as u, CartesianGrid as d, Legend as f, ResponsiveContainer as p, Tooltip as m, XAxis as h, YAxis as g } from "recharts";
 //#region src/components/charts/BarChart/BarChart.tsx
-var m = ({ data: m, keys: h, xAxisKey: g, stacked: _ = !1, yDomain: v = [0, "auto"], height: y = 300, width: b = "100%", title: x, animated: S = !1 }) => /* @__PURE__ */ a("div", {
-	className: `wim-bar-chart ${r.root}`,
-	style: { width: b },
-	children: [x && /* @__PURE__ */ i(e, {
-		tag: "h3",
-		size: "md",
-		style: { marginBottom: "var(--wim-spacing-md)" },
-		children: x
-	}), /* @__PURE__ */ i("div", {
-		className: r.container,
-		style: { height: y },
-		children: /* @__PURE__ */ i(u, {
-			width: "100%",
-			height: "100%",
-			children: /* @__PURE__ */ a(s, {
-				data: m,
-				margin: {
-					top: 5,
-					right: 30,
-					left: 0,
-					bottom: 5
-				},
-				children: [
-					/* @__PURE__ */ i(c, {
-						...n.grid,
-						vertical: !1
-					}),
-					/* @__PURE__ */ i(f, {
-						dataKey: g,
-						interval: 0,
-						...n.axis,
-						tickLine: !1,
-						axisLine: !1
-					}),
-					/* @__PURE__ */ i(p, {
-						width: 44,
-						domain: v,
-						...n.axis,
-						tickLine: !1,
-						axisLine: !1
-					}),
-					/* @__PURE__ */ i(d, {
-						contentStyle: n.tooltip.contentStyle,
-						cursor: n.tooltip.cursor
-					}),
-					/* @__PURE__ */ i(l, {
-						verticalAlign: "top",
-						height: 36,
-						...n.legend
-					}),
-					h.map((e, n) => /* @__PURE__ */ i(o, {
-						dataKey: e,
-						fill: t[n % t.length],
-						stackId: _ ? "stack" : void 0,
-						radius: _ ? 0 : [
-							4,
-							4,
-							0,
-							0
-						],
-						stroke: _ ? "var(--wim-color-surface)" : void 0,
-						strokeWidth: _ ? 2 : void 0,
-						isAnimationActive: S
-					}, e))
-				]
+var _ = ({ data: _, keys: v, xAxisKey: y, stacked: b = !1, yDomain: x = [0, "auto"], height: S = 300, width: C = "100%", title: w, animated: T = !1, "aria-label": E }) => {
+	let D = E ?? w, O = a(_, y, v);
+	return /* @__PURE__ */ c("div", {
+		className: `wim-bar-chart ${o.root}`,
+		style: { width: C },
+		role: D ? "figure" : void 0,
+		"aria-label": D,
+		children: [
+			w && /* @__PURE__ */ s(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: w
+			}),
+			/* @__PURE__ */ s("div", {
+				className: o.container,
+				style: { height: S },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s(p, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ c(u, {
+						...n,
+						data: _,
+						margin: {
+							top: 5,
+							right: 30,
+							left: 0,
+							bottom: 5
+						},
+						children: [
+							/* @__PURE__ */ s(d, {
+								...r.grid,
+								vertical: !1
+							}),
+							/* @__PURE__ */ s(h, {
+								dataKey: y,
+								interval: 0,
+								...r.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ s(g, {
+								width: 44,
+								domain: x,
+								...r.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ s(m, {
+								contentStyle: r.tooltip.contentStyle,
+								cursor: r.tooltip.cursor
+							}),
+							/* @__PURE__ */ s(f, {
+								verticalAlign: "top",
+								height: 36,
+								...r.legend
+							}),
+							v.map((e, n) => /* @__PURE__ */ s(l, {
+								dataKey: e,
+								fill: t[n % t.length],
+								stackId: b ? "stack" : void 0,
+								radius: b ? 0 : [
+									4,
+									4,
+									0,
+									0
+								],
+								stroke: b ? "var(--wim-color-surface)" : void 0,
+								strokeWidth: b ? 2 : void 0,
+								isAnimationActive: T
+							}, e))
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ s(i, {
+				caption: D,
+				columns: O.columns,
+				rows: O.rows
 			})
-		})
-	})]
-});
+		]
+	});
+};
 //#endregion
-export { m as BarChart };
+export { _ as BarChart };

package/dist/components/charts/FunnelChart/FunnelChart.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("./funnel-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,dataKey:i,nameKey:s,height:c=300,width:l=`100%`,title:u,animated:d=!1})=>(0,a.jsxs)(`div`,{className:`wim-funnel-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.FunnelChart,{margin:{top:8,right:88,bottom:8,left:88},children:[(0,a.jsx)(o.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,a.jsxs)(o.Funnel,{dataKey:i,data:e,isAnimationActive:d,children:[(0,a.jsx)(o.LabelList,{position:`right`,fill:`var(--wim-color-text-secondary)`,dataKey:s,stroke:`none`}),e.map((t,n)=>(0,a.jsx)(o.Cell,{fill:`color-mix(in oklch, var(--wim-color-chart-primary) ${100-Math.round(n/Math.max(e.length-1,1)*55)}%, var(--wim-color-surface))`},`cell-${n}`))]})]})})})]});exports.FunnelChart=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("./funnel-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,dataKey:o,nameKey:l,height:u=300,width:d=`100%`,title:f,animated:p=!1,"aria-label":m})=>{let h=m??f,g=i.pairTable(e,l,o);return(0,s.jsxs)(`div`,{className:`wim-funnel-chart ${a.default.root}`,style:{width:d},role:h?`figure`:void 0,"aria-label":h,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.FunnelChart,{...n.CHART_HIDDEN_A11Y_PROPS,margin:{top:8,right:88,bottom:8,left:88},children:[(0,s.jsx)(c.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,s.jsxs)(c.Funnel,{dataKey:o,data:e,isAnimationActive:p,children:[(0,s.jsx)(c.LabelList,{position:`right`,fill:`var(--wim-color-text-secondary)`,dataKey:l,stroke:`none`}),e.map((t,n)=>(0,s.jsx)(c.Cell,{fill:`color-mix(in oklch, var(--wim-color-chart-primary) ${100-Math.round(n/Math.max(e.length-1,1)*55)}%, var(--wim-color-surface))`},`cell-${n}`))]})]})})}),(0,s.jsx)(r.ChartDataTable,{caption:h,columns:g.columns,rows:g.rows})]})};exports.FunnelChart=l;