wimui 0.5.2 → 0.6.0

package/dist/components/data-display/DataGrid/DataGrid.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../form/Checkbox/Checkbox.cjs"),r=require("../../navigation/Pagination/Pagination.cjs"),i=require("../Table/Table.cjs"),a=require("./useFixedColumns.cjs"),o=require("./useDataGridKeyboard.cjs"),s=require("./useInfiniteScroll.cjs"),c=require("./datagrid.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");function f({columns:e,data:f,rowKey:p=`id`,loading:m=!1,striped:h=!1,bordered:g=!1,hoverable:_=!0,stickyHeader:v=!0,height:y,maxHeight:b,emptyMessage:x,mobileCard:S=!1,selection:C,selectedRowKeys:w,onSelectionChange:T,sortConfig:E,onSortChange:D,pagination:O,infiniteScroll:k,className:A,ariaLabel:j}){let{t:M}=t.useWimTranslation(`common`),N=(0,l.useMemo)(()=>C?C===!0?{type:`checkbox`,selectedRowKeys:w??[],onChange:(e,t)=>{T?.(e,t)}}:C:null,[C,w,T]),{fixedLeftOffsets:P,fixedRightOffsets:F}=a.useFixedColumns(e,!!N),I=(e,t=!1)=>{let n=P[e];if(n)return{stickyLeft:!0,leftOffset:n.offset,stickyZIndex:t?1e3+n.zIndex:n.zIndex,className:(0,u.default)(c.default.cellFixed,n.isLast&&c.default.cellFixedLeftLast)};let r=F[e];return r?{stickyRight:!0,rightOffset:r.offset,stickyZIndex:t?1e3+r.zIndex:r.zIndex,className:(0,u.default)(c.default.cellFixed,r.isFirst&&c.default.cellFixedRightFirst)}:{}},L=(0,l.useCallback)(e=>typeof p==`function`?p(e):e[p],[p]),R=(0,l.useMemo)(()=>!N||f.length===0?!1:f.every(e=>N.selectedRowKeys.includes(L(e))),[f,N,L]),z=(0,l.useMemo)(()=>N?!R&&f.some(e=>N.selectedRowKeys.includes(L(e))):!1,[f,N,R,L]),B=e=>{if(!N)return;let t=e.target.checked,n=t?f.map(L):[],r=t?f:[];N.onChange(n,r)},V=(e,t)=>{if(!N)return;let n=t.target.checked,r=L(e),i=n?[...N.selectedRowKeys,r]:N.selectedRowKeys.filter(e=>e!==r),a=f.filter(e=>i.includes(L(e)));N.onChange(i,a)},{focusedCell:H,handleKeyDown:U,containerRef:W}=o.useDataGridKeyboard(e,f,!!N),{loaderRef:G}=s.useInfiniteScroll(k),K=e.length+ +!!N;return(0,d.jsxs)(`div`,{className:(0,u.default)(`wim-data-grid`,c.default.root,m&&c.default.loading,A),"aria-busy":m||void 0,children:[(0,d.jsxs)(`div`,{className:c.default.container,style:{height:y,maxHeight:b},inert:m||void 0,children:[(0,d.jsxs)(i.Table,{ref:W,onKeyDown:U,tabIndex:0,role:`grid`,"aria-label":j??M(`a11y.data_grid`),"aria-rowcount":f.length+1,"aria-colcount":K,striped:h,bordered:g,hoverable:_,stickyHeader:v,mobileCard:S,fullWidth:!0,className:(0,u.default)(`wim-table`,c.default.table),containerClassName:c.default.tableContainer,children:[(0,d.jsx)(i.Table.Header,{children:(0,d.jsxs)(i.Table.Row,{children:[N&&(0,d.jsx)(i.Table.Head,{role:`columnheader`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:1150,"data-row":-1,"data-col":-1,"aria-label":M(`a11y.select_all_rows`),tabIndex:H.row===-1&&H.col===-1?0:-1,children:(N.type??`checkbox`)===`checkbox`&&(0,d.jsx)(n.Checkbox,{checked:R,indeterminate:z,onChange:B,"aria-label":M(`a11y.select_all_rows`)})}),e.map((e,t)=>{let n=I(e.key,!0);return(0,d.jsx)(i.Table.Head,{role:`columnheader`,style:{width:e.width,minWidth:e.width},sortable:e.sortable,sortDirection:E?.key===e.key?E.direction:`none`,onSort:()=>{if(!e.sortable||!D)return;let t=E?.key===e.key?E.direction===`asc`?`desc`:E.direction===`desc`?`none`:`asc`:`asc`;D(e.key,t)},...n,tabIndex:H.row===-1&&H.col===(N?t+1:t)?0:-1,"data-row":-1,"data-col":N?t+1:t,children:e.title},e.key)})]})}),(0,d.jsx)(i.Table.Body,{children:f.map((t,r)=>{let a=L(t),o=N?.selectedRowKeys.includes(a);return(0,d.jsxs)(i.Table.Row,{selected:o,children:[N&&(0,d.jsx)(i.Table.Cell,{role:`gridcell`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:150,"data-row":r,"data-col":-1,tabIndex:H.row===r&&H.col===-1?0:-1,children:(0,d.jsx)(n.Checkbox,{checked:o,onChange:e=>V(t,e),"aria-label":M(`a11y.select_row`)})}),e.map((e,n)=>{let a=I(e.key,!1),o=t[e.dataIndex??e.key];return(0,d.jsx)(i.Table.Cell,{role:`gridcell`,label:typeof e.title==`string`?e.title:void 0,...a,"data-row":r,"data-col":N?n+1:n,tabIndex:H.row===r&&H.col===(N?n+1:n)?0:-1,children:e.render?e.render(o,t,r):o},e.key)})]},a)})})]}),f.length===0&&x&&(0,d.jsx)(`div`,{role:`status`,className:c.default.empty,children:x}),k?.hasMore&&(0,d.jsx)(`div`,{ref:G,className:c.default.loader,children:k.hasMore&&`Loading more...`})]}),O&&(0,d.jsxs)(`div`,{className:c.default.footer,inert:m||void 0,children:[(0,d.jsxs)(`div`,{className:c.default.info,children:[`Displaying `,f.length,` of `,O.total,` records`,N?.selectedRowKeys&&N.selectedRowKeys.length>0&&(0,d.jsxs)(`span`,{className:c.default.selectionInfo,children:[`(`,N.selectedRowKeys.length,` row(s) selected)`]})]}),(0,d.jsx)(`div`,{className:c.default.pagination,children:(0,d.jsx)(r.Pagination,{className:c.default.paginationContent,current:O.current,total:O.total,pageSize:O.pageSize,onChange:O.onChange})})]})]})}exports.DataGrid=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../form/Checkbox/Checkbox.cjs"),r=require("../../navigation/Pagination/Pagination.cjs"),i=require("../Table/Table.cjs"),a=require("./useFixedColumns.cjs"),o=require("./useDataGridKeyboard.cjs"),s=require("./useInfiniteScroll.cjs"),c=require("./datagrid.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");function f({columns:e,data:f,rowKey:p=`id`,loading:m=!1,striped:h=!1,bordered:g=!1,hoverable:_=!0,stickyHeader:v=!0,height:y,maxHeight:b,emptyMessage:x,mobileCard:S=!1,selection:C,selectedRowKeys:w,onSelectionChange:T,sortConfig:E,onSortChange:D,pagination:O,infiniteScroll:k,className:A,ariaLabel:j}){let{t:M}=t.useWimTranslation(`common`),N=m!==!1&&m!==void 0,P=m===!0||m===`blocking`,F=(0,l.useMemo)(()=>C?C===!0?{type:`checkbox`,selectedRowKeys:w??[],onChange:(e,t)=>{T?.(e,t)}}:C:null,[C,w,T]),{fixedLeftOffsets:I,fixedRightOffsets:L}=a.useFixedColumns(e,!!F),R=(e,t=!1)=>{let n=I[e];if(n)return{stickyLeft:!0,leftOffset:n.offset,stickyZIndex:t?1e3+n.zIndex:n.zIndex,className:(0,u.default)(c.default.cellFixed,n.isLast&&c.default.cellFixedLeftLast)};let r=L[e];return r?{stickyRight:!0,rightOffset:r.offset,stickyZIndex:t?1e3+r.zIndex:r.zIndex,className:(0,u.default)(c.default.cellFixed,r.isFirst&&c.default.cellFixedRightFirst)}:{}},z=(0,l.useCallback)(e=>typeof p==`function`?p(e):e[p],[p]),B=(0,l.useMemo)(()=>!F||f.length===0?!1:f.every(e=>F.selectedRowKeys.includes(z(e))),[f,F,z]),V=(0,l.useMemo)(()=>F?!B&&f.some(e=>F.selectedRowKeys.includes(z(e))):!1,[f,F,B,z]),H=e=>{if(!F)return;let t=e.target.checked,n=t?f.map(z):[],r=t?f:[];F.onChange(n,r)},U=(e,t)=>{if(!F)return;let n=t.target.checked,r=z(e),i=n?[...F.selectedRowKeys,r]:F.selectedRowKeys.filter(e=>e!==r),a=f.filter(e=>i.includes(z(e)));F.onChange(i,a)},{focusedCell:W,handleKeyDown:G,containerRef:K}=o.useDataGridKeyboard(e,f,!!F),{loaderRef:q}=s.useInfiniteScroll(k),J=e.length+ +!!F;return(0,d.jsxs)(`div`,{className:(0,u.default)(`wim-data-grid`,c.default.root,P&&c.default.loading,S===`md`?c.default.mobileCardMd:S&&c.default.mobileCard,A),"aria-busy":N||void 0,children:[(0,d.jsxs)(`div`,{className:c.default.container,style:{height:y,maxHeight:b},inert:P||void 0,children:[(0,d.jsxs)(i.Table,{ref:K,onKeyDown:G,tabIndex:0,role:`grid`,"aria-label":j??M(`a11y.data_grid`),"aria-rowcount":f.length+1,"aria-colcount":J,striped:h,bordered:g,hoverable:_,stickyHeader:v,mobileCard:S,fullWidth:!0,className:(0,u.default)(`wim-table`,c.default.table),containerClassName:c.default.tableContainer,children:[(0,d.jsx)(i.Table.Header,{children:(0,d.jsxs)(i.Table.Row,{children:[F&&(0,d.jsx)(i.Table.Head,{role:`columnheader`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:1150,"data-row":-1,"data-col":-1,"aria-label":M(`a11y.select_all_rows`),tabIndex:W.row===-1&&W.col===-1?0:-1,children:(F.type??`checkbox`)===`checkbox`&&(0,d.jsx)(n.Checkbox,{checked:B,indeterminate:V,onChange:H,"aria-label":M(`a11y.select_all_rows`)})}),e.map((e,t)=>{let n=R(e.key,!0);return(0,d.jsx)(i.Table.Head,{role:`columnheader`,style:{width:e.width,minWidth:e.width},sortable:e.sortable,sortDirection:E?.key===e.key?E.direction:`none`,onSort:()=>{if(!e.sortable||!D)return;let t=E?.key===e.key?E.direction===`asc`?`desc`:E.direction===`desc`?`none`:`asc`:`asc`;D(e.key,t)},...n,tabIndex:W.row===-1&&W.col===(F?t+1:t)?0:-1,"data-row":-1,"data-col":F?t+1:t,children:e.title},e.key)})]})}),(0,d.jsx)(i.Table.Body,{children:f.map((t,r)=>{let a=z(t),o=F?.selectedRowKeys.includes(a);return(0,d.jsxs)(i.Table.Row,{selected:o,children:[F&&(0,d.jsx)(i.Table.Cell,{role:`gridcell`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:150,"data-row":r,"data-col":-1,tabIndex:W.row===r&&W.col===-1?0:-1,children:(0,d.jsx)(n.Checkbox,{checked:o,onChange:e=>U(t,e),"aria-label":M(`a11y.select_row`)})}),e.map((e,n)=>{let a=R(e.key,!1),o=t[e.dataIndex??e.key];return(0,d.jsx)(i.Table.Cell,{role:`gridcell`,label:typeof e.title==`string`?e.title:void 0,...a,"data-row":r,"data-col":F?n+1:n,tabIndex:W.row===r&&W.col===(F?n+1:n)?0:-1,children:e.render?e.render(o,t,r):o},e.key)})]},a)})})]}),f.length===0&&x&&(0,d.jsx)(`div`,{role:`status`,className:c.default.empty,children:x}),k?.hasMore&&(0,d.jsx)(`div`,{ref:q,className:c.default.loader,children:k.hasMore&&M(`dataGrid.loading_more`)})]}),O&&(0,d.jsxs)(`div`,{className:c.default.footer,inert:P||void 0,children:[(0,d.jsxs)(`div`,{className:c.default.info,children:[M(`dataGrid.displaying`,{shown:f.length,total:O.total}),F?.selectedRowKeys&&F.selectedRowKeys.length>0&&(0,d.jsx)(`span`,{className:c.default.selectionInfo,children:M(`dataGrid.rows_selected`,{selected:F.selectedRowKeys.length})})]}),(0,d.jsx)(`div`,{className:c.default.pagination,children:(0,d.jsx)(r.Pagination,{className:c.default.paginationContent,current:O.current,total:O.total,pageSize:O.pageSize,onChange:O.onChange})})]})]})}exports.DataGrid=f;

package/dist/components/data-display/DataGrid/DataGrid.d.ts

@@ -21,8 +21,15 @@ export type DataGridProps<T> = {
     data: T[];
     /** Row key: a field name or a function that derives the key from a record */
     rowKey?: string | ((record: T) => string);
-    /** Whether the grid is in a loading state */
-    loading?: boolean;
+    /**
+     * Loading state.
+     * `true` / `"blocking"` fades the grid and blocks interaction (first load — the
+     * rows are not there yet, or are about to be replaced wholesale).
+     * `"refresh"` only announces `aria-busy`: the rows stay readable and usable while
+     * fresh data is fetched. It deliberately does not dim, because fading the content
+     * drops secondary text below the AA contrast floor.
+     */
+    loading?: boolean | "blocking" | "refresh";
     /** Whether to show striped (zebra) rows */
     striped?: boolean;
     /** Whether to show borders between cells */
@@ -37,8 +44,8 @@ export type DataGridProps<T> = {
     maxHeight?: string | number;
     /** Message or element to display when data is empty */
     emptyMessage?: React.ReactNode;
-    /** Enable mobile card layout */
-    mobileCard?: boolean;
+    /** Enable the card layout below a container width (`true`/`"sm"` = 576px, `"md"` = 768px) */
+    mobileCard?: boolean | "sm" | "md";
     /** Row selection: a boolean shorthand or a full configuration object */
     selection?: boolean | SelectionConfig<T>;
     /** Selected row keys (used with boolean `selection`) */

package/dist/components/data-display/DataGrid/DataGrid.js

@@ -12,7 +12,7 @@ import u from "classnames";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/data-display/DataGrid/DataGrid.tsx
 function p({ columns: p, data: m, rowKey: h = "id", loading: g = !1, striped: _ = !1, bordered: v = !1, hoverable: y = !0, stickyHeader: b = !0, height: x, maxHeight: S, emptyMessage: C, mobileCard: w = !1, selection: T, selectedRowKeys: E, onSelectionChange: D, sortConfig: O, onSortChange: k, pagination: A, infiniteScroll: j, className: M, ariaLabel: N }) {
-	let { t: P } = e("common"), F = l(() => T ? T === !0 ? {
+	let { t: P } = e("common"), F = g !== !1 && g !== void 0, I = g === !0 || g === "blocking", L = l(() => T ? T === !0 ? {
 		type: "checkbox",
 		selectedRowKeys: E ?? [],
 		onChange: (e, t) => {
@@ -22,58 +22,58 @@ function p({ columns: p, data: m, rowKey: h = "id", loading: g = !1, striped: _
 		T,
 		E,
 		D
-	]), { fixedLeftOffsets: I, fixedRightOffsets: L } = i(p, !!F), R = (e, t = !1) => {
-		let n = I[e];
+	]), { fixedLeftOffsets: R, fixedRightOffsets: z } = i(p, !!L), B = (e, t = !1) => {
+		let n = R[e];
 		if (n) return {
 			stickyLeft: !0,
 			leftOffset: n.offset,
 			stickyZIndex: t ? 1e3 + n.zIndex : n.zIndex,
 			className: u(s.cellFixed, n.isLast && s.cellFixedLeftLast)
 		};
-		let r = L[e];
+		let r = z[e];
 		return r ? {
 			stickyRight: !0,
 			rightOffset: r.offset,
 			stickyZIndex: t ? 1e3 + r.zIndex : r.zIndex,
 			className: u(s.cellFixed, r.isFirst && s.cellFixedRightFirst)
 		} : {};
-	}, z = c((e) => typeof h == "function" ? h(e) : e[h], [h]), B = l(() => !F || m.length === 0 ? !1 : m.every((e) => F.selectedRowKeys.includes(z(e))), [
+	}, V = c((e) => typeof h == "function" ? h(e) : e[h], [h]), H = l(() => !L || m.length === 0 ? !1 : m.every((e) => L.selectedRowKeys.includes(V(e))), [
 		m,
-		F,
-		z
-	]), V = l(() => F ? !B && m.some((e) => F.selectedRowKeys.includes(z(e))) : !1, [
+		L,
+		V
+	]), U = l(() => L ? !H && m.some((e) => L.selectedRowKeys.includes(V(e))) : !1, [
 		m,
-		F,
-		B,
-		z
-	]), H = (e) => {
-		if (!F) return;
-		let t = e.target.checked, n = t ? m.map(z) : [], r = t ? m : [];
-		F.onChange(n, r);
-	}, U = (e, t) => {
-		if (!F) return;
-		let n = t.target.checked, r = z(e), i = n ? [...F.selectedRowKeys, r] : F.selectedRowKeys.filter((e) => e !== r), a = m.filter((e) => i.includes(z(e)));
-		F.onChange(i, a);
-	}, { focusedCell: W, handleKeyDown: G, containerRef: K } = a(p, m, !!F), { loaderRef: q } = o(j), J = p.length + +!!F;
+		L,
+		H,
+		V
+	]), W = (e) => {
+		if (!L) return;
+		let t = e.target.checked, n = t ? m.map(V) : [], r = t ? m : [];
+		L.onChange(n, r);
+	}, G = (e, t) => {
+		if (!L) return;
+		let n = t.target.checked, r = V(e), i = n ? [...L.selectedRowKeys, r] : L.selectedRowKeys.filter((e) => e !== r), a = m.filter((e) => i.includes(V(e)));
+		L.onChange(i, a);
+	}, { focusedCell: K, handleKeyDown: q, containerRef: J } = a(p, m, !!L), { loaderRef: Y } = o(j), X = p.length + +!!L;
 	return /* @__PURE__ */ f("div", {
-		className: u("wim-data-grid", s.root, g && s.loading, M),
-		"aria-busy": g || void 0,
+		className: u("wim-data-grid", s.root, I && s.loading, w === "md" ? s.mobileCardMd : w && s.mobileCard, M),
+		"aria-busy": F || void 0,
 		children: [/* @__PURE__ */ f("div", {
 			className: s.container,
 			style: {
 				height: x,
 				maxHeight: S
 			},
-			inert: g || void 0,
+			inert: I || void 0,
 			children: [
 				/* @__PURE__ */ f(r, {
-					ref: K,
-					onKeyDown: G,
+					ref: J,
+					onKeyDown: q,
 					tabIndex: 0,
 					role: "grid",
 					"aria-label": N ?? P("a11y.data_grid"),
 					"aria-rowcount": m.length + 1,
-					"aria-colcount": J,
+					"aria-colcount": X,
 					striped: _,
 					bordered: v,
 					hoverable: y,
@@ -82,7 +82,7 @@ function p({ columns: p, data: m, rowKey: h = "id", loading: g = !1, striped: _
 					fullWidth: !0,
 					className: u("wim-table", s.table),
 					containerClassName: s.tableContainer,
-					children: [/* @__PURE__ */ d(r.Header, { children: /* @__PURE__ */ f(r.Row, { children: [F && /* @__PURE__ */ d(r.Head, {
+					children: [/* @__PURE__ */ d(r.Header, { children: /* @__PURE__ */ f(r.Row, { children: [L && /* @__PURE__ */ d(r.Head, {
 						role: "columnheader",
 						selection: !0,
 						stickyLeft: !0,
@@ -91,15 +91,15 @@ function p({ columns: p, data: m, rowKey: h = "id", loading: g = !1, striped: _
 						"data-row": -1,
 						"data-col": -1,
 						"aria-label": P("a11y.select_all_rows"),
-						tabIndex: W.row === -1 && W.col === -1 ? 0 : -1,
-						children: (F.type ?? "checkbox") === "checkbox" && /* @__PURE__ */ d(t, {
-							checked: B,
-							indeterminate: V,
-							onChange: H,
+						tabIndex: K.row === -1 && K.col === -1 ? 0 : -1,
+						children: (L.type ?? "checkbox") === "checkbox" && /* @__PURE__ */ d(t, {
+							checked: H,
+							indeterminate: U,
+							onChange: W,
 							"aria-label": P("a11y.select_all_rows")
 						})
 					}), p.map((e, t) => {
-						let n = R(e.key, !0);
+						let n = B(e.key, !0);
 						return /* @__PURE__ */ d(r.Head, {
 							role: "columnheader",
 							style: {
@@ -114,16 +114,16 @@ function p({ columns: p, data: m, rowKey: h = "id", loading: g = !1, striped: _
 								k(e.key, t);
 							},
 							...n,
-							tabIndex: W.row === -1 && W.col === (F ? t + 1 : t) ? 0 : -1,
+							tabIndex: K.row === -1 && K.col === (L ? t + 1 : t) ? 0 : -1,
 							"data-row": -1,
-							"data-col": F ? t + 1 : t,
+							"data-col": L ? t + 1 : t,
 							children: e.title
 						}, e.key);
 					})] }) }), /* @__PURE__ */ d(r.Body, { children: m.map((e, n) => {
-						let i = z(e), a = F?.selectedRowKeys.includes(i);
+						let i = V(e), a = L?.selectedRowKeys.includes(i);
 						return /* @__PURE__ */ f(r.Row, {
 							selected: a,
-							children: [F && /* @__PURE__ */ d(r.Cell, {
+							children: [L && /* @__PURE__ */ d(r.Cell, {
 								role: "gridcell",
 								selection: !0,
 								stickyLeft: !0,
@@ -131,21 +131,21 @@ function p({ columns: p, data: m, rowKey: h = "id", loading: g = !1, striped: _
 								stickyZIndex: 150,
 								"data-row": n,
 								"data-col": -1,
-								tabIndex: W.row === n && W.col === -1 ? 0 : -1,
+								tabIndex: K.row === n && K.col === -1 ? 0 : -1,
 								children: /* @__PURE__ */ d(t, {
 									checked: a,
-									onChange: (t) => U(e, t),
+									onChange: (t) => G(e, t),
 									"aria-label": P("a11y.select_row")
 								})
 							}), p.map((t, i) => {
-								let a = R(t.key, !1), o = e[t.dataIndex ?? t.key];
+								let a = B(t.key, !1), o = e[t.dataIndex ?? t.key];
 								return /* @__PURE__ */ d(r.Cell, {
 									role: "gridcell",
 									label: typeof t.title == "string" ? t.title : void 0,
 									...a,
 									"data-row": n,
-									"data-col": F ? i + 1 : i,
-									tabIndex: W.row === n && W.col === (F ? i + 1 : i) ? 0 : -1,
+									"data-col": L ? i + 1 : i,
+									tabIndex: K.row === n && K.col === (L ? i + 1 : i) ? 0 : -1,
 									children: t.render ? t.render(o, e, n) : o
 								}, t.key);
 							})]
@@ -158,31 +158,23 @@ function p({ columns: p, data: m, rowKey: h = "id", loading: g = !1, striped: _
 					children: C
 				}),
 				j?.hasMore && /* @__PURE__ */ d("div", {
-					ref: q,
+					ref: Y,
 					className: s.loader,
-					children: j.hasMore && "Loading more..."
+					children: j.hasMore && P("dataGrid.loading_more")
 				})
 			]
 		}), A && /* @__PURE__ */ f("div", {
 			className: s.footer,
-			inert: g || void 0,
+			inert: I || void 0,
 			children: [/* @__PURE__ */ f("div", {
 				className: s.info,
-				children: [
-					"Displaying ",
-					m.length,
-					" of ",
-					A.total,
-					" records",
-					F?.selectedRowKeys && F.selectedRowKeys.length > 0 && /* @__PURE__ */ f("span", {
-						className: s.selectionInfo,
-						children: [
-							"(",
-							F.selectedRowKeys.length,
-							" row(s) selected)"
-						]
-					})
-				]
+				children: [P("dataGrid.displaying", {
+					shown: m.length,
+					total: A.total
+				}), L?.selectedRowKeys && L.selectedRowKeys.length > 0 && /* @__PURE__ */ d("span", {
+					className: s.selectionInfo,
+					children: P("dataGrid.rows_selected", { selected: L.selectedRowKeys.length })
+				})]
 			}), /* @__PURE__ */ d("div", {
 				className: s.pagination,
 				children: /* @__PURE__ */ d(n, {

package/dist/components/data-display/DataGrid/datagrid.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_asx5s_3`,t=`_container_asx5s_15`,n=`_footer_asx5s_22`,r=`_info_asx5s_33`,i=`_pagination_asx5s_44`,a=`_paginationContent_asx5s_55`,o=`_loading_asx5s_59`,s=`_loader_asx5s_64`,c=`_table_asx5s_73`,l=`_tableContainer_asx5s_78`,u=`_cellFixed_asx5s_82`,d=`_cellFixedLeftLast_asx5s_87`,f=`_cellFixedRightFirst_asx5s_99`,p=`_selectionInfo_asx5s_111`,m={root:e,container:t,footer:n,info:r,pagination:i,paginationContent:a,loading:o,loader:s,table:c,tableContainer:l,cellFixed:u,cellFixedLeftLast:d,cellFixedRightFirst:f,selectionInfo:p};exports.cellFixed=u,exports.cellFixedLeftLast=d,exports.cellFixedRightFirst=f,exports.container=t,exports.default=m,exports.footer=n,exports.info=r,exports.loader=s,exports.loading=o,exports.pagination=i,exports.paginationContent=a,exports.root=e,exports.selectionInfo=p,exports.table=c,exports.tableContainer=l;
+var e=`_root_1ka0q_3`,t=`_container_1ka0q_3`,n=`_footer_1ka0q_3`,r=`_mobileCard_1ka0q_53`,i=`_mobileCardMd_1ka0q_66`,a=`_info_1ka0q_78`,o=`_pagination_1ka0q_89`,s=`_paginationContent_1ka0q_100`,c=`_loading_1ka0q_104`,l=`_loader_1ka0q_109`,u=`_table_1ka0q_118`,d=`_tableContainer_1ka0q_123`,f=`_cellFixed_1ka0q_127`,p=`_cellFixedLeftLast_1ka0q_132`,m=`_cellFixedRightFirst_1ka0q_144`,h=`_selectionInfo_1ka0q_156`,g={root:e,container:t,footer:n,mobileCard:r,mobileCardMd:i,info:a,pagination:o,paginationContent:s,loading:c,loader:l,table:u,tableContainer:d,cellFixed:f,cellFixedLeftLast:p,cellFixedRightFirst:m,selectionInfo:h};exports.cellFixed=f,exports.cellFixedLeftLast=p,exports.cellFixedRightFirst=m,exports.container=t,exports.default=g,exports.footer=n,exports.info=a,exports.loader=l,exports.loading=c,exports.mobileCard=r,exports.mobileCardMd=i,exports.pagination=o,exports.paginationContent=s,exports.root=e,exports.selectionInfo=h,exports.table=u,exports.tableContainer=d;

package/dist/components/data-display/DataGrid/datagrid.module.js

@@ -1,20 +1,22 @@
 "use client";
 //#region src/components/data-display/DataGrid/datagrid.module.scss
-var e = "_root_asx5s_3", t = "_container_asx5s_15", n = "_footer_asx5s_22", r = "_info_asx5s_33", i = "_pagination_asx5s_44", a = "_paginationContent_asx5s_55", o = "_loading_asx5s_59", s = "_loader_asx5s_64", c = "_table_asx5s_73", l = "_tableContainer_asx5s_78", u = "_cellFixed_asx5s_82", d = "_cellFixedLeftLast_asx5s_87", f = "_cellFixedRightFirst_asx5s_99", p = "_selectionInfo_asx5s_111", m = {
+var e = "_root_1ka0q_3", t = "_container_1ka0q_3", n = "_footer_1ka0q_3", r = "_mobileCard_1ka0q_53", i = "_mobileCardMd_1ka0q_66", a = "_info_1ka0q_78", o = "_pagination_1ka0q_89", s = "_paginationContent_1ka0q_100", c = "_loading_1ka0q_104", l = "_loader_1ka0q_109", u = "_table_1ka0q_118", d = "_tableContainer_1ka0q_123", f = "_cellFixed_1ka0q_127", p = "_cellFixedLeftLast_1ka0q_132", m = "_cellFixedRightFirst_1ka0q_144", h = "_selectionInfo_1ka0q_156", g = {
 	root: e,
 	container: t,
 	footer: n,
-	info: r,
-	pagination: i,
-	paginationContent: a,
-	loading: o,
-	loader: s,
-	table: c,
-	tableContainer: l,
-	cellFixed: u,
-	cellFixedLeftLast: d,
-	cellFixedRightFirst: f,
-	selectionInfo: p
+	mobileCard: r,
+	mobileCardMd: i,
+	info: a,
+	pagination: o,
+	paginationContent: s,
+	loading: c,
+	loader: l,
+	table: u,
+	tableContainer: d,
+	cellFixed: f,
+	cellFixedLeftLast: p,
+	cellFixedRightFirst: m,
+	selectionInfo: h
 };
 //#endregion
-export { u as cellFixed, d as cellFixedLeftLast, f as cellFixedRightFirst, t as container, m as default, n as footer, r as info, s as loader, o as loading, i as pagination, a as paginationContent, e as root, p as selectionInfo, c as table, l as tableContainer };
+export { f as cellFixed, p as cellFixedLeftLast, m as cellFixedRightFirst, t as container, g as default, n as footer, a as info, l as loader, c as loading, r as mobileCard, i as mobileCardMd, o as pagination, s as paginationContent, e as root, h as selectionInfo, u as table, d as tableContainer };

package/dist/components/data-display/Kanban/Kanban.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../icon/more-horizontal.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("./kanban.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,a.forwardRef)(({columns:e,onMove:n,onCardMove:r,className:c,forceMobileUI:u=!1,children:d,asChild:p=!1,...h},g)=>{let[_,v]=(0,a.useState)(null),[y,b]=(0,a.useState)(null),[x,S]=(0,a.useState)(null),C=n||r,w=(e,t,n)=>{v({itemId:t,columnId:n}),e.dataTransfer.setData(`text/plain`,`${n}:${t}`),e.dataTransfer.effectAllowed=`move`},T=(e,t)=>{e.preventDefault(),b(t)},E=(e,t)=>{e.preventDefault(),b(null);let[n,r]=e.dataTransfer.getData(`text/plain`).split(`:`);C?.(r,n,t),v(null)},D=(e,t,n)=>{C?.(e,t,n),S(null)},O=a.default.useMemo(()=>{if(e)return e;let t=[];return a.default.Children.forEach(d,e=>{if(a.default.isValidElement(e)){let n=e.props;typeof n.id==`string`&&typeof n.title==`string`&&t.push({id:n.id,title:n.title,items:[]})}}),t},[d,e]),k=()=>d||(e?e.map(e=>(0,s.jsx)(m,{id:e.id,title:e.title,cardCount:e.items.length,children:e.items.map(e=>(0,s.jsx)(f,{id:e.id,children:e.content},e.id))},e.id)):null),A=p?t.Root:`div`;return(0,s.jsx)(l.Provider,{value:{draggedItem:_,dragOverColumn:y,setDragOverColumn:b,handleDragStart:w,handleDragOver:T,handleDrop:E,handleMobileMove:D,activeMobileMenu:x,setActiveMobileMenu:S,columns:O},children:(0,s.jsx)(A,{...h,ref:g,className:(0,o.default)(`wim-kanban`,i.default.root,u&&i.default.touch,c),role:`region`,"aria-label":`Kanban Board`,children:(0,s.jsx)(t.Slottable,{children:k()})})})}),l=a.default.createContext(null),u=()=>{let e=a.default.useContext(l);if(!e)throw Error(`Kanban compound components must be used within Kanban`);return e},d=({id:e,title:t,cardCount:n,children:r,className:a})=>{let{dragOverColumn:c,handleDragOver:l,handleDrop:d,setDragOverColumn:f}=u();return(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.column,{[i.default.dragOver]:c===e},a),onDragOver:t=>l(t,e),onDrop:t=>d(t,e),onDragLeave:()=>f(null),children:[(0,s.jsxs)(`div`,{className:i.default.columnHeader,children:[(0,s.jsx)(`div`,{className:i.default.columnTitle,children:t}),n!==void 0&&(0,s.jsx)(`div`,{className:i.default.columnCount,"aria-label":`${n} cards`,children:n})]}),(0,s.jsx)(`div`,{className:i.default.columnBody,children:r})]})},f=({id:e,children:t,disabled:c,className:l})=>{let{draggedItem:d,handleDragStart:f,handleMobileMove:m,activeMobileMenu:h,setActiveMobileMenu:g,columns:_}=u(),v=a.default.useContext(p);return(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.card,{[i.default.dragging]:d?.itemId===e,[i.default.disabled]:c},l),draggable:!c,onDragStart:t=>v&&f(t,e,v),children:[(0,s.jsx)(`div`,{className:i.default.cardContent,children:t}),(0,s.jsxs)(`div`,{className:i.default.cardMove,children:[(0,s.jsx)(`button`,{type:`button`,className:i.default.cardMoveBtn,onClick:()=>g(h===e?null:e),"aria-label":`Move card`,disabled:c,children:(0,s.jsx)(r.Icon,{component:n.default,size:`sm`})}),h===e&&(0,s.jsx)(`div`,{className:i.default.cardMoveMenu,role:`listbox`,"aria-label":`Move to column`,children:_.filter(e=>e.id!==v).map(t=>(0,s.jsx)(`button`,{type:`button`,className:i.default.cardMoveOption,onClick:()=>v&&m(e,v,t.id),role:`option`,"aria-selected":!1,children:t.title},t.id))})]})]})},p=a.default.createContext(null),m=e=>(0,s.jsx)(p.Provider,{value:e.id,children:(0,s.jsx)(d,{...e})}),h=c;h.Column=m,h.Card=f,c.displayName=`Kanban`,h.displayName=`KanbanBoard`,d.displayName=`KanbanColumn`,f.displayName=`KanbanCard`,m.displayName=`KanbanColumnWrapper`,exports.Kanban=c,exports.KanbanBoard=h,exports.default=h,exports.KanbanCard=f,exports.KanbanColumn=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../../icon/more-horizontal.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("./kanban.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=(0,o.forwardRef)(({columns:e,onMove:r,onCardMove:i,className:l,forceMobileUI:d=!1,children:f,asChild:m=!1,...g},_)=>{let{t:v}=n.useWimTranslation(`common`),[y,b]=(0,o.useState)(null),[x,S]=(0,o.useState)(null),[C,w]=(0,o.useState)(null),T=r||i,E=(e,t,n)=>{b({itemId:t,columnId:n}),e.dataTransfer.setData(`text/plain`,`${n}:${t}`),e.dataTransfer.effectAllowed=`move`},D=(e,t)=>{e.preventDefault(),S(t)},O=(e,t)=>{e.preventDefault(),S(null);let[n,r]=e.dataTransfer.getData(`text/plain`).split(`:`);T?.(r,n,t),b(null)},k=(e,t,n)=>{T?.(e,t,n),w(null)},A=o.default.useMemo(()=>{if(e)return e;let t=[];return o.default.Children.forEach(f,e=>{if(o.default.isValidElement(e)){let n=e.props;typeof n.id==`string`&&typeof n.title==`string`&&t.push({id:n.id,title:n.title,items:[]})}}),t},[f,e]),j=()=>f||(e?e.map(e=>(0,c.jsx)(h,{id:e.id,title:e.title,cardCount:e.items.length,children:e.items.map(e=>(0,c.jsx)(p,{id:e.id,children:e.content},e.id))},e.id)):null),M=m?t.Root:`div`;return(0,c.jsx)(u.Provider,{value:{draggedItem:y,dragOverColumn:x,setDragOverColumn:S,handleDragStart:E,handleDragOver:D,handleDrop:O,handleMobileMove:k,activeMobileMenu:C,setActiveMobileMenu:w,columns:A},children:(0,c.jsx)(M,{...g,ref:_,className:(0,s.default)(`wim-kanban`,a.default.root,d&&a.default.touch,l),role:`region`,"aria-label":v(`a11y.kanban_board`),children:(0,c.jsx)(t.Slottable,{children:j()})})})}),u=o.default.createContext(null),d=()=>{let e=o.default.useContext(u);if(!e)throw Error(`Kanban compound components must be used within Kanban`);return e},f=({id:e,title:t,cardCount:n,children:r,className:i})=>{let{dragOverColumn:o,handleDragOver:l,handleDrop:u,setDragOverColumn:f}=d();return(0,c.jsxs)(`div`,{className:(0,s.default)(a.default.column,{[a.default.dragOver]:o===e},i),onDragOver:t=>l(t,e),onDrop:t=>u(t,e),onDragLeave:()=>f(null),children:[(0,c.jsxs)(`div`,{className:a.default.columnHeader,children:[(0,c.jsx)(`div`,{className:a.default.columnTitle,children:t}),n!==void 0&&(0,c.jsx)(`div`,{className:a.default.columnCount,"aria-label":`${n} cards`,children:n})]}),(0,c.jsx)(`div`,{className:a.default.columnBody,children:r})]})},p=({id:e,children:t,disabled:l,className:u})=>{let{t:f}=n.useWimTranslation(`common`),{draggedItem:p,handleDragStart:h,handleMobileMove:g,activeMobileMenu:_,setActiveMobileMenu:v,columns:y}=d(),b=o.default.useContext(m);return(0,c.jsxs)(`div`,{className:(0,s.default)(a.default.card,{[a.default.dragging]:p?.itemId===e,[a.default.disabled]:l},u),draggable:!l,onDragStart:t=>b&&h(t,e,b),children:[(0,c.jsx)(`div`,{className:a.default.cardContent,children:t}),(0,c.jsxs)(`div`,{className:a.default.cardMove,children:[(0,c.jsx)(`button`,{type:`button`,className:a.default.cardMoveBtn,onClick:()=>v(_===e?null:e),"aria-label":f(`a11y.move_card`),disabled:l,children:(0,c.jsx)(i.Icon,{component:r.default,size:`sm`})}),_===e&&(0,c.jsx)(`div`,{className:a.default.cardMoveMenu,role:`listbox`,"aria-label":f(`a11y.move_to_column`),children:y.filter(e=>e.id!==b).map(t=>(0,c.jsx)(`button`,{type:`button`,className:a.default.cardMoveOption,onClick:()=>b&&g(e,b,t.id),role:`option`,"aria-selected":!1,children:t.title},t.id))})]})]})},m=o.default.createContext(null),h=e=>(0,c.jsx)(m.Provider,{value:e.id,children:(0,c.jsx)(f,{...e})}),g=l;g.Column=h,g.Card=p,l.displayName=`Kanban`,g.displayName=`KanbanBoard`,f.displayName=`KanbanColumn`,p.displayName=`KanbanCard`,h.displayName=`KanbanColumnWrapper`,exports.Kanban=l,exports.KanbanBoard=g,exports.default=g,exports.KanbanCard=p,exports.KanbanColumn=f;

package/dist/components/data-display/Kanban/Kanban.js

@@ -1,31 +1,32 @@
 "use client";
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import n from "../../../icon/more-horizontal.js";
-import { Icon as r } from "../../media/Icon/Icon.js";
-import i from "./kanban.module.js";
-import a, { forwardRef as o, useState as s } from "react";
-import c from "classnames";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
+import r from "../../../icon/more-horizontal.js";
+import { Icon as i } from "../../media/Icon/Icon.js";
+import a from "./kanban.module.js";
+import o, { forwardRef as s, useState as c } from "react";
+import l from "classnames";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/data-display/Kanban/Kanban.tsx
-var d = o(({ columns: n, onMove: r, onCardMove: o, className: u, forceMobileUI: d = !1, children: p, asChild: m = !1, ...g }, v) => {
-	let [y, b] = s(null), [x, S] = s(null), [C, w] = s(null), T = r || o, E = (e, t, n) => {
-		b({
+var f = s(({ columns: r, onMove: i, onCardMove: s, className: d, forceMobileUI: f = !1, children: m, asChild: h = !1, ..._ }, y) => {
+	let { t: b } = n("common"), [x, S] = c(null), [C, w] = c(null), [T, E] = c(null), D = i || s, O = (e, t, n) => {
+		S({
 			itemId: t,
 			columnId: n
 		}), e.dataTransfer.setData("text/plain", `${n}:${t}`), e.dataTransfer.effectAllowed = "move";
-	}, D = (e, t) => {
-		e.preventDefault(), S(t);
-	}, O = (e, t) => {
-		e.preventDefault(), S(null);
+	}, k = (e, t) => {
+		e.preventDefault(), w(t);
+	}, A = (e, t) => {
+		e.preventDefault(), w(null);
 		let [n, r] = e.dataTransfer.getData("text/plain").split(":");
-		T?.(r, n, t), b(null);
-	}, k = (e, t, n) => {
-		T?.(e, t, n), w(null);
-	}, A = a.useMemo(() => {
-		if (n) return n;
+		D?.(r, n, t), S(null);
+	}, j = (e, t, n) => {
+		D?.(e, t, n), E(null);
+	}, M = o.useMemo(() => {
+		if (r) return r;
 		let e = [];
-		return a.Children.forEach(p, (t) => {
-			if (a.isValidElement(t)) {
+		return o.Children.forEach(m, (t) => {
+			if (o.isValidElement(t)) {
 				let n = t.props;
 				typeof n.id == "string" && typeof n.title == "string" && e.push({
 					id: n.id,
@@ -34,95 +35,95 @@ var d = o(({ columns: n, onMove: r, onCardMove: o, className: u, forceMobileUI:
 				});
 			}
 		}), e;
-	}, [p, n]), j = () => p || (n ? n.map((e) => /* @__PURE__ */ l(_, {
+	}, [m, r]), N = () => m || (r ? r.map((e) => /* @__PURE__ */ u(v, {
 		id: e.id,
 		title: e.title,
 		cardCount: e.items.length,
-		children: e.items.map((e) => /* @__PURE__ */ l(h, {
+		children: e.items.map((e) => /* @__PURE__ */ u(g, {
 			id: e.id,
 			children: e.content
 		}, e.id))
-	}, e.id)) : null), M = m ? e : "div";
-	return /* @__PURE__ */ l(f.Provider, {
+	}, e.id)) : null), P = h ? e : "div";
+	return /* @__PURE__ */ u(p.Provider, {
 		value: {
-			draggedItem: y,
-			dragOverColumn: x,
-			setDragOverColumn: S,
-			handleDragStart: E,
-			handleDragOver: D,
-			handleDrop: O,
-			handleMobileMove: k,
-			activeMobileMenu: C,
-			setActiveMobileMenu: w,
-			columns: A
+			draggedItem: x,
+			dragOverColumn: C,
+			setDragOverColumn: w,
+			handleDragStart: O,
+			handleDragOver: k,
+			handleDrop: A,
+			handleMobileMove: j,
+			activeMobileMenu: T,
+			setActiveMobileMenu: E,
+			columns: M
 		},
-		children: /* @__PURE__ */ l(M, {
-			...g,
-			ref: v,
-			className: c("wim-kanban", i.root, d && i.touch, u),
+		children: /* @__PURE__ */ u(P, {
+			..._,
+			ref: y,
+			className: l("wim-kanban", a.root, f && a.touch, d),
 			role: "region",
-			"aria-label": "Kanban Board",
-			children: /* @__PURE__ */ l(t, { children: j() })
+			"aria-label": b("a11y.kanban_board"),
+			children: /* @__PURE__ */ u(t, { children: N() })
 		})
 	});
-}), f = a.createContext(null), p = () => {
-	let e = a.useContext(f);
+}), p = o.createContext(null), m = () => {
+	let e = o.useContext(p);
 	if (!e) throw Error("Kanban compound components must be used within Kanban");
 	return e;
-}, m = ({ id: e, title: t, cardCount: n, children: r, className: a }) => {
-	let { dragOverColumn: o, handleDragOver: s, handleDrop: d, setDragOverColumn: f } = p();
-	return /* @__PURE__ */ u("div", {
-		className: c(i.column, { [i.dragOver]: o === e }, a),
+}, h = ({ id: e, title: t, cardCount: n, children: r, className: i }) => {
+	let { dragOverColumn: o, handleDragOver: s, handleDrop: c, setDragOverColumn: f } = m();
+	return /* @__PURE__ */ d("div", {
+		className: l(a.column, { [a.dragOver]: o === e }, i),
 		onDragOver: (t) => s(t, e),
-		onDrop: (t) => d(t, e),
+		onDrop: (t) => c(t, e),
 		onDragLeave: () => f(null),
-		children: [/* @__PURE__ */ u("div", {
-			className: i.columnHeader,
-			children: [/* @__PURE__ */ l("div", {
-				className: i.columnTitle,
+		children: [/* @__PURE__ */ d("div", {
+			className: a.columnHeader,
+			children: [/* @__PURE__ */ u("div", {
+				className: a.columnTitle,
 				children: t
-			}), n !== void 0 && /* @__PURE__ */ l("div", {
-				className: i.columnCount,
+			}), n !== void 0 && /* @__PURE__ */ u("div", {
+				className: a.columnCount,
 				"aria-label": `${n} cards`,
 				children: n
 			})]
-		}), /* @__PURE__ */ l("div", {
-			className: i.columnBody,
+		}), /* @__PURE__ */ u("div", {
+			className: a.columnBody,
 			children: r
 		})]
 	});
-}, h = ({ id: e, children: t, disabled: o, className: s }) => {
-	let { draggedItem: d, handleDragStart: f, handleMobileMove: m, activeMobileMenu: h, setActiveMobileMenu: _, columns: v } = p(), y = a.useContext(g);
-	return /* @__PURE__ */ u("div", {
-		className: c(i.card, {
-			[i.dragging]: d?.itemId === e,
-			[i.disabled]: o
-		}, s),
-		draggable: !o,
-		onDragStart: (t) => y && f(t, e, y),
-		children: [/* @__PURE__ */ l("div", {
-			className: i.cardContent,
+}, g = ({ id: e, children: t, disabled: s, className: c }) => {
+	let { t: f } = n("common"), { draggedItem: p, handleDragStart: h, handleMobileMove: g, activeMobileMenu: v, setActiveMobileMenu: y, columns: b } = m(), x = o.useContext(_);
+	return /* @__PURE__ */ d("div", {
+		className: l(a.card, {
+			[a.dragging]: p?.itemId === e,
+			[a.disabled]: s
+		}, c),
+		draggable: !s,
+		onDragStart: (t) => x && h(t, e, x),
+		children: [/* @__PURE__ */ u("div", {
+			className: a.cardContent,
 			children: t
-		}), /* @__PURE__ */ u("div", {
-			className: i.cardMove,
-			children: [/* @__PURE__ */ l("button", {
+		}), /* @__PURE__ */ d("div", {
+			className: a.cardMove,
+			children: [/* @__PURE__ */ u("button", {
 				type: "button",
-				className: i.cardMoveBtn,
-				onClick: () => _(h === e ? null : e),
-				"aria-label": "Move card",
-				disabled: o,
-				children: /* @__PURE__ */ l(r, {
-					component: n,
+				className: a.cardMoveBtn,
+				onClick: () => y(v === e ? null : e),
+				"aria-label": f("a11y.move_card"),
+				disabled: s,
+				children: /* @__PURE__ */ u(i, {
+					component: r,
 					size: "sm"
 				})
-			}), h === e && /* @__PURE__ */ l("div", {
-				className: i.cardMoveMenu,
+			}), v === e && /* @__PURE__ */ u("div", {
+				className: a.cardMoveMenu,
 				role: "listbox",
-				"aria-label": "Move to column",
-				children: v.filter((e) => e.id !== y).map((t) => /* @__PURE__ */ l("button", {
+				"aria-label": f("a11y.move_to_column"),
+				children: b.filter((e) => e.id !== x).map((t) => /* @__PURE__ */ u("button", {
 					type: "button",
-					className: i.cardMoveOption,
-					onClick: () => y && m(e, y, t.id),
+					className: a.cardMoveOption,
+					onClick: () => x && g(e, x, t.id),
 					role: "option",
 					"aria-selected": !1,
 					children: t.title
@@ -130,10 +131,10 @@ var d = o(({ columns: n, onMove: r, onCardMove: o, className: u, forceMobileUI:
 			})]
 		})]
 	});
-}, g = a.createContext(null), _ = (e) => /* @__PURE__ */ l(g.Provider, {
+}, _ = o.createContext(null), v = (e) => /* @__PURE__ */ u(_.Provider, {
 	value: e.id,
-	children: /* @__PURE__ */ l(m, { ...e })
-}), v = d;
-v.Column = _, v.Card = h, d.displayName = "Kanban", v.displayName = "KanbanBoard", m.displayName = "KanbanColumn", h.displayName = "KanbanCard", _.displayName = "KanbanColumnWrapper";
+	children: /* @__PURE__ */ u(h, { ...e })
+}), y = f;
+y.Column = v, y.Card = g, f.displayName = "Kanban", y.displayName = "KanbanBoard", h.displayName = "KanbanColumn", g.displayName = "KanbanCard", v.displayName = "KanbanColumnWrapper";
 //#endregion
-export { d as Kanban, v as KanbanBoard, v as default, h as KanbanCard, m as KanbanColumn };
+export { f as Kanban, y as KanbanBoard, y as default, g as KanbanCard, h as KanbanColumn };

package/dist/components/data-display/Table/Table.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../icon/chevron-down.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("./table.module.cjs"),a=require("./useTableSort.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=o.default.forwardRef(({asChild:e=!1,striped:n=!1,bordered:r=!1,hoverable:a=!1,fullWidth:o=!1,stickyHeader:l=!1,scrollbar:u=`default`,mobileCard:d=!1,height:f,maxHeight:p,containerClassName:m,card:h=!1,className:g,children:_,...v},y)=>{let b={height:f,maxHeight:p,overflow:f||p?`auto`:void 0},x=e?t.Root:`table`;return(0,c.jsx)(`div`,{className:(0,s.default)(i.default.container,l&&i.default.sticky,u===`subtle`&&i.default.subtleScrollbar,u===`hidden`&&i.default.noScrollbar,h&&i.default.cardContainer,m),style:b,tabIndex:f||p?0:void 0,role:`none`,"data-testid":`table-container`,children:(0,c.jsx)(x,{className:(0,s.default)(i.default.root,n&&i.default.striped,r&&i.default.bordered,a&&i.default.hoverable,o&&i.default.fullWidth,l&&i.default.stickyHeader,d&&i.default.mobileCard,`wim-table`,g),ref:y,"data-testid":`table-root`,...v,children:(0,c.jsx)(t.Slottable,{children:_})})})}),u=o.default.forwardRef(({asChild:e=!1,className:n,children:r,...a},o)=>(0,c.jsx)(e?t.Root:`thead`,{className:(0,s.default)(i.default.header,n),ref:o,"data-testid":`table-header`,...a,children:(0,c.jsx)(t.Slottable,{children:r})})),d=o.default.forwardRef(({asChild:e=!1,className:n,children:r,...a},o)=>(0,c.jsx)(e?t.Root:`tbody`,{className:(0,s.default)(i.default.body,n),ref:o,"data-testid":`table-body`,...a,children:(0,c.jsx)(t.Slottable,{children:r})})),f=o.default.forwardRef(({asChild:e=!1,className:n,children:r,...a},o)=>(0,c.jsx)(e?t.Root:`tfoot`,{className:(0,s.default)(i.default.footer,n),ref:o,"data-testid":`table-footer`,...a,children:(0,c.jsx)(t.Slottable,{children:r})})),p=o.default.forwardRef(({asChild:e=!1,selected:n=!1,className:r,children:a,...o},l)=>(0,c.jsx)(e?t.Root:`tr`,{className:(0,s.default)(i.default.row,n&&i.default.selected,r),ref:l,"data-testid":`table-row`,...o,children:(0,c.jsx)(t.Slottable,{children:a})})),m=o.default.forwardRef(({asChild:e=!1,sortable:a=!1,sortDirection:o=`none`,onSort:l,selection:u=!1,stickyLeft:d=!1,stickyRight:f=!1,leftOffset:p,rightOffset:m,stickyZIndex:h,className:g,style:_,children:v,...y},b)=>(0,c.jsx)(e?t.Root:`th`,{className:(0,s.default)(i.default.head,a&&i.default.sortable,u&&i.default.selection,d&&i.default.stickyLeft,f&&i.default.stickyRight,g),style:{..._,left:d?p===void 0?0:p:void 0,right:f?m===void 0?0:m:void 0,zIndex:h===void 0?void 0:h},ref:b,"data-testid":`table-head`,...y,onClick:a?l:y.onClick,tabIndex:y.tabIndex===void 0?a?0:void 0:y.tabIndex,"aria-sort":a?o===`asc`?`ascending`:o===`desc`?`descending`:`none`:void 0,onKeyDown:e=>{a&&l&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),l(e)),y.onKeyDown?.(e)},children:(0,c.jsxs)(`div`,{className:i.default.headContent,children:[(0,c.jsx)(t.Slottable,{children:v}),a&&(0,c.jsx)(`span`,{className:(0,s.default)(i.default.sortIcon,i.default[o]),children:(0,c.jsx)(r.Icon,{component:n.default,size:`sm`})})]})})),h=o.default.forwardRef(({asChild:e=!1,selection:n=!1,label:r,stickyLeft:a=!1,stickyRight:o=!1,leftOffset:l,rightOffset:u,stickyZIndex:d,className:f,style:p,children:m,...h},g)=>(0,c.jsx)(e?t.Root:`td`,{className:(0,s.default)(i.default.cell,n&&i.default.selection,a&&i.default.stickyLeft,o&&i.default.stickyRight,f),style:{...p,left:a?l===void 0?0:l:void 0,right:o?u===void 0?0:u:void 0,zIndex:d===void 0?void 0:d},"data-label":r,ref:g,"data-testid":`table-cell`,...h,children:(0,c.jsx)(t.Slottable,{children:m})}));l.displayName=`Table`,u.displayName=`Table.Header`,d.displayName=`Table.Body`,f.displayName=`Table.Footer`,p.displayName=`Table.Row`,m.displayName=`Table.Head`,h.displayName=`Table.Cell`;var g=l;g.Header=u,g.Body=d,g.Footer=f,g.Row=p,g.Head=m,g.Cell=h,exports.Table=g,exports.default=g,exports.TableBody=d,exports.TableCell=h,exports.TableFooter=f,exports.TableHead=m,exports.TableHeader=u,exports.TableRow=p,exports.getNextSortDirection=a.getNextSortDirection,exports.useTableSort=a.useTableSort;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../icon/chevron-down.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("./table.module.cjs"),a=require("./useTableSort.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=o.default.forwardRef(({asChild:e=!1,striped:n=!1,bordered:r=!1,hoverable:a=!1,fullWidth:o=!1,stickyHeader:l=!1,scrollbar:u=`default`,mobileCard:d=!1,height:f,maxHeight:p,containerClassName:m,card:h=!1,className:g,children:_,...v},y)=>{let b={height:f,maxHeight:p,overflow:f||p?`auto`:void 0},x=e?t.Root:`table`;return(0,c.jsx)(`div`,{className:(0,s.default)(i.default.container,l&&i.default.sticky,u===`subtle`&&i.default.subtleScrollbar,u===`hidden`&&i.default.noScrollbar,h&&i.default.cardContainer,m),style:b,tabIndex:f||p?0:void 0,role:`none`,"data-testid":`table-container`,children:(0,c.jsx)(x,{className:(0,s.default)(i.default.root,n&&i.default.striped,r&&i.default.bordered,a&&i.default.hoverable,o&&i.default.fullWidth,l&&i.default.stickyHeader,d===`md`?i.default.mobileCardMd:d&&i.default.mobileCard,`wim-table`,g),ref:y,"data-testid":`table-root`,...v,children:(0,c.jsx)(t.Slottable,{children:_})})})}),u=o.default.forwardRef(({asChild:e=!1,className:n,children:r,...a},o)=>(0,c.jsx)(e?t.Root:`thead`,{className:(0,s.default)(i.default.header,n),ref:o,"data-testid":`table-header`,...a,children:(0,c.jsx)(t.Slottable,{children:r})})),d=o.default.forwardRef(({asChild:e=!1,className:n,children:r,...a},o)=>(0,c.jsx)(e?t.Root:`tbody`,{className:(0,s.default)(i.default.body,n),ref:o,"data-testid":`table-body`,...a,children:(0,c.jsx)(t.Slottable,{children:r})})),f=o.default.forwardRef(({asChild:e=!1,className:n,children:r,...a},o)=>(0,c.jsx)(e?t.Root:`tfoot`,{className:(0,s.default)(i.default.footer,n),ref:o,"data-testid":`table-footer`,...a,children:(0,c.jsx)(t.Slottable,{children:r})})),p=o.default.forwardRef(({asChild:e=!1,selected:n=!1,className:r,children:a,...o},l)=>(0,c.jsx)(e?t.Root:`tr`,{className:(0,s.default)(i.default.row,n&&i.default.selected,r),ref:l,"data-testid":`table-row`,...o,children:(0,c.jsx)(t.Slottable,{children:a})})),m=o.default.forwardRef(({asChild:e=!1,sortable:a=!1,sortDirection:o=`none`,onSort:l,selection:u=!1,stickyLeft:d=!1,stickyRight:f=!1,leftOffset:p,rightOffset:m,stickyZIndex:h,className:g,style:_,children:v,...y},b)=>(0,c.jsx)(e?t.Root:`th`,{className:(0,s.default)(i.default.head,a&&i.default.sortable,u&&i.default.selection,d&&i.default.stickyLeft,f&&i.default.stickyRight,g),style:{..._,left:d?p===void 0?0:p:void 0,right:f?m===void 0?0:m:void 0,zIndex:h===void 0?void 0:h},ref:b,"data-testid":`table-head`,...y,onClick:a?l:y.onClick,tabIndex:y.tabIndex===void 0?a?0:void 0:y.tabIndex,"aria-sort":a?o===`asc`?`ascending`:o===`desc`?`descending`:`none`:void 0,onKeyDown:e=>{a&&l&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),l(e)),y.onKeyDown?.(e)},children:(0,c.jsxs)(`div`,{className:i.default.headContent,children:[(0,c.jsx)(t.Slottable,{children:v}),a&&(0,c.jsx)(`span`,{className:(0,s.default)(i.default.sortIcon,i.default[o]),children:(0,c.jsx)(r.Icon,{component:n.default,size:`sm`})})]})})),h=o.default.forwardRef(({asChild:e=!1,selection:n=!1,label:r,stickyLeft:a=!1,stickyRight:o=!1,leftOffset:l,rightOffset:u,stickyZIndex:d,className:f,style:p,children:m,...h},g)=>(0,c.jsx)(e?t.Root:`td`,{className:(0,s.default)(i.default.cell,n&&i.default.selection,a&&i.default.stickyLeft,o&&i.default.stickyRight,f),style:{...p,left:a?l===void 0?0:l:void 0,right:o?u===void 0?0:u:void 0,zIndex:d===void 0?void 0:d},"data-label":r,ref:g,"data-testid":`table-cell`,...h,children:(0,c.jsx)(t.Slottable,{children:m})}));l.displayName=`Table`,u.displayName=`Table.Header`,d.displayName=`Table.Body`,f.displayName=`Table.Footer`,p.displayName=`Table.Row`,m.displayName=`Table.Head`,h.displayName=`Table.Cell`;var g=l;g.Header=u,g.Body=d,g.Footer=f,g.Row=p,g.Head=m,g.Cell=h,exports.Table=g,exports.default=g,exports.TableBody=d,exports.TableCell=h,exports.TableFooter=f,exports.TableHead=m,exports.TableHeader=u,exports.TableRow=p,exports.getNextSortDirection=a.getNextSortDirection,exports.useTableSort=a.useTableSort;

package/dist/components/data-display/Table/Table.d.ts

@@ -17,9 +17,10 @@ export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement>
     /** Scrollbar style of the container */
     scrollbar?: "default" | "subtle" | "hidden";
     /**
-     * Mobile view: Switch to card layout
+     * Mobile view: switch to a card layout below a container width.
+     * `true` / `"sm"` switches under 576px, `"md"` under 768px (the old default).
      */
-    mobileCard?: boolean;
+    mobileCard?: boolean | "sm" | "md";
     /** Height of the container (enables vertical scrolling) */
     height?: string | number;
     /** Maximum height of the container (enables vertical scrolling) */