@devalok/shilp-sutra 0.56.0 → 0.57.0

package/dist/ui/data-table-body.js

@@ -5,11 +5,11 @@ import { Skeleton as n } from "./skeleton.js";
 import { getColumnMetaClasses as r, getPinnedCellStyle as i, isColumnEditable as a, useDataTableContext as o } from "./data-table-context.js";
 import { TableBody as s, TableCell as c, TableRow as l } from "./table.js";
 import u, { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { AnimatePresence as _, motion as v, useReducedMotion as y } from "framer-motion";
-import { flexRender as b } from "@tanstack/react-table";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { AnimatePresence as v, motion as y, useReducedMotion as b } from "framer-motion";
+import { flexRender as x } from "@tanstack/react-table";
 //#region src/ui/data-table-body.tsx
-function x({ initialValue: e, onSave: n, onCancel: r }) {
+function S({ initialValue: e, onSave: n, onCancel: r }) {
 	let [i, a] = m(e), o = p(null);
 	f(() => {
 		o.current?.focus(), o.current?.select();
@@ -17,7 +17,7 @@ function x({ initialValue: e, onSave: n, onCancel: r }) {
 	let s = d(() => {
 		n(i);
 	}, [n, i]);
-	return /* @__PURE__ */ h("input", {
+	return /* @__PURE__ */ g("input", {
 		ref: o,
 		type: "text",
 		value: i,
@@ -26,127 +26,128 @@ function x({ initialValue: e, onSave: n, onCancel: r }) {
 		onKeyDown: (e) => {
 			e.key === "Enter" ? (e.preventDefault(), s()) : e.key === "Escape" && (e.preventDefault(), r());
 		},
-		className: t("h-ds-xs-plus w-full rounded-control", "border border-accent-7 bg-surface-raised-hover", "px-ds-02 text-body-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7"),
+		className: t("h-ds-xs-plus w-full rounded-control", "border border-accent-7 bg-surface-panel-hover", "px-ds-02 text-body-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7"),
 		"aria-label": "Edit cell value"
 	});
 }
-function S({ row: e, style: n }) {
-	let { table: s, columnPinningState: u, editable: f, editingCell: p, setEditingCell: m, onCellEdit: g, virtualRows: _, onRowClick: v } = o(), y = d((t) => {
-		v && (t.target.closest("button, a, input, select, textarea, [role=\"checkbox\"]") || v(e.original));
-	}, [v, e.original]), S = e.getVisibleCells();
-	return /* @__PURE__ */ h(l, {
+function C({ row: e }) {
+	let { table: n, columnPinningState: s, editable: u, editingCell: f, setEditingCell: p, onCellEdit: m, onRowClick: h, rowClassName: _ } = o(), v = d((t) => {
+		h && (t.target.closest("button, a, input, select, textarea, [role=\"checkbox\"]") || h(e.original));
+	}, [h, e.original]), y = e.getVisibleCells();
+	return /* @__PURE__ */ g(l, {
 		"data-state": e.getIsSelected() && "selected",
-		style: n,
-		className: t(_ ? "absolute w-full flex" : void 0, v && "cursor-pointer"),
-		onClick: v ? y : void 0,
-		children: S.map((n) => {
-			let o = i(n.column.id, u), l = p?.rowIndex === e.index && p?.columnId === n.column.id;
-			return /* @__PURE__ */ h(c, {
-				className: t(o.className, _ && "flex-1", r(n.column.columnDef.meta)),
-				style: o.style,
+		className: t(h && "cursor-pointer", _?.(e.original)),
+		onClick: h ? v : void 0,
+		children: y.map((o) => {
+			let l = i(o.column.id, s), d = f?.rowIndex === e.index && f?.columnId === o.column.id;
+			return /* @__PURE__ */ g(c, {
+				className: t(l.className, r(o.column.columnDef.meta)),
+				style: l.style,
 				onDoubleClick: () => {
-					a(n.column.id, f, s) && m({
+					a(o.column.id, u, n) && p({
 						rowIndex: e.index,
-						columnId: n.column.id
+						columnId: o.column.id
 					});
 				},
-				children: l ? /* @__PURE__ */ h(x, {
-					initialValue: String(n.getValue() ?? ""),
+				children: d ? /* @__PURE__ */ g(S, {
+					initialValue: String(o.getValue() ?? ""),
 					onSave: (t) => {
-						g?.(e.index, n.column.id, t), m(null);
+						m?.(e.index, o.column.id, t), p(null);
 					},
-					onCancel: () => m(null)
-				}) : b(n.column.columnDef.cell, n.getContext())
-			}, n.id);
+					onCancel: () => p(null)
+				}) : x(o.column.columnDef.cell, o.getContext())
+			}, o.id);
 		})
 	});
 }
-function C({ row: t, style: n }) {
-	let { allColumns: r, expandable: i, renderExpanded: a, virtualRows: s } = o(), u = y();
-	if (!i || !a) return null;
-	let d = t.getIsExpanded();
-	return s ? d ? /* @__PURE__ */ h(l, {
-		style: n,
-		className: "absolute w-full flex",
-		children: /* @__PURE__ */ h(c, {
-			colSpan: r.length,
-			className: "bg-surface-base p-ds-05 flex-1",
-			children: a(t.original)
-		})
-	}) : null : /* @__PURE__ */ h(_, {
+function w({ row: t }) {
+	let { allColumns: n, expandable: r, renderExpanded: i, virtualRows: a } = o(), s = b();
+	if (!r || !i) return null;
+	let u = t.getIsExpanded();
+	return a ? u ? /* @__PURE__ */ g(l, { children: /* @__PURE__ */ g(c, {
+		colSpan: n.length,
+		className: "bg-surface-base p-ds-05",
+		children: i(t.original)
+	}) }) : null : /* @__PURE__ */ g(v, {
 		initial: !1,
-		children: d && /* @__PURE__ */ h(l, {
-			style: n,
-			children: /* @__PURE__ */ h(c, {
-				colSpan: r.length,
-				className: "bg-surface-base p-0",
-				children: /* @__PURE__ */ h(v.div, {
-					className: "overflow-hidden",
-					initial: !u && {
-						height: 0,
-						opacity: 0
-					},
-					animate: {
-						height: "auto",
-						opacity: 1
-					},
-					exit: u ? void 0 : {
-						height: 0,
-						opacity: 0
-					},
-					transition: u ? { duration: 0 } : { ...e.smooth },
-					children: /* @__PURE__ */ h("div", {
-						className: "p-ds-05",
-						children: a(t.original)
-					})
+		children: u && /* @__PURE__ */ g(l, { children: /* @__PURE__ */ g(c, {
+			colSpan: n.length,
+			className: "bg-surface-base p-0",
+			children: /* @__PURE__ */ g(y.div, {
+				className: "overflow-hidden",
+				initial: !s && {
+					height: 0,
+					opacity: 0
+				},
+				animate: {
+					height: "auto",
+					opacity: 1
+				},
+				exit: s ? void 0 : {
+					height: 0,
+					opacity: 0
+				},
+				transition: s ? { duration: 0 } : { ...e.smooth },
+				children: /* @__PURE__ */ g("div", {
+					className: "p-ds-05",
+					children: i(t.original)
 				})
 			})
-		})
+		}) })
 	});
 }
-function w({ rowCount: e }) {
+function T({ rowCount: e }) {
 	let { allColumns: r } = o(), i = r.length, a = [
 		"w-3/4",
 		"w-1/2",
 		"w-2/3",
 		"w-full"
 	];
-	return /* @__PURE__ */ h(s, { children: Array.from({ length: e }, (e, o) => /* @__PURE__ */ h(l, { children: Array.from({ length: i }, (e, i) => /* @__PURE__ */ h(c, { children: (r[i]?.id ?? r[i]?.header) === "_select" ? /* @__PURE__ */ h(n, {
+	return /* @__PURE__ */ g(s, { children: Array.from({ length: e }, (e, o) => /* @__PURE__ */ g(l, { children: Array.from({ length: i }, (e, i) => /* @__PURE__ */ g(c, { children: (r[i]?.id ?? r[i]?.header) === "_select" ? /* @__PURE__ */ g(n, {
 		variant: "text",
 		className: "h-4 w-4",
 		animation: "pulse"
-	}) : /* @__PURE__ */ h(n, {
+	}) : /* @__PURE__ */ g(n, {
 		variant: "text",
 		className: t("h-4", a[i % a.length]),
 		animation: "pulse"
 	}) }, `skeleton-${o}-${i}`)) }, `skeleton-${o}`)) });
 }
-function T({ loading: e, skeletonRowCount: n, noResultsText: r, emptyState: i, virtualItems: a, totalVirtualSize: d }) {
-	let { table: f, allColumns: p, virtualRows: m } = o(), _ = f.getRowModel().rows;
-	return e ? /* @__PURE__ */ h(w, { rowCount: n }) : _.length ? m && a ? /* @__PURE__ */ h(s, {
-		style: {
-			height: `${d}px`,
-			position: "relative"
-		},
-		children: a.map((e) => {
-			let t = _[e.index];
-			return /* @__PURE__ */ h(S, {
-				row: t,
-				style: {
-					position: "absolute",
-					top: 0,
-					left: 0,
-					width: "100%",
-					height: `${e.size}px`,
-					transform: `translateY(${e.start}px)`
-				}
-			}, t.id);
-		})
-	}) : /* @__PURE__ */ h(s, { children: _.map((e) => /* @__PURE__ */ g(u.Fragment, { children: [/* @__PURE__ */ h(S, { row: e }), /* @__PURE__ */ h(C, { row: e })] }, e.id)) }) : /* @__PURE__ */ h(s, { children: /* @__PURE__ */ h(l, { children: /* @__PURE__ */ h(c, {
-		colSpan: p.length,
+function E({ loading: e, skeletonRowCount: n, noResultsText: r, emptyState: i, virtualItems: a, totalVirtualSize: d, measureRow: f }) {
+	let { table: p, allColumns: m, virtualRows: v } = o(), y = p.getRowModel().rows;
+	if (e) return /* @__PURE__ */ g(T, { rowCount: n });
+	if (!y.length) return /* @__PURE__ */ g(s, { children: /* @__PURE__ */ g(l, { children: /* @__PURE__ */ g(c, {
+		colSpan: m.length,
 		className: t("py-ds-07 text-center", !i && "text-surface-fg-subtle"),
 		children: i || r || "No results."
 	}) }) });
+	if (v && a) {
+		let e = a[0], n = a[a.length - 1], r = e ? e.start : 0, i = n ? Math.max(0, (d ?? 0) - n.end) : 0, o = (e) => /* @__PURE__ */ g("tbody", {
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ g("tr", { children: /* @__PURE__ */ g("td", {
+				colSpan: m.length,
+				style: {
+					height: e,
+					padding: 0,
+					border: 0
+				}
+			}) })
+		});
+		return /* @__PURE__ */ _(h, { children: [
+			r > 0 && o(r),
+			a.map((e) => {
+				let n = y[e.index], r = e.index === y.length - 1;
+				return /* @__PURE__ */ _("tbody", {
+					ref: f,
+					"data-index": e.index,
+					className: t(r && "[&_tr:last-child]:border-0"),
+					children: [/* @__PURE__ */ g(C, { row: n }), /* @__PURE__ */ g(w, { row: n })]
+				}, n.id);
+			}),
+			i > 0 && o(i)
+		] });
+	}
+	return /* @__PURE__ */ g(s, { children: y.map((e) => /* @__PURE__ */ _(u.Fragment, { children: [/* @__PURE__ */ g(C, { row: e }), /* @__PURE__ */ g(w, { row: e })] }, e.id)) });
 }
 //#endregion
-export { T as DataTableBody };
+export { E as DataTableBody };

package/dist/ui/data-table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-body.js","names":[],"sources":["../../src/ui/data-table-body.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender,type Row } from '@tanstack/react-table'\nimport { type VirtualItem } from '@tanstack/react-virtual'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  INTERACTIVE_SELECTOR,\n  isColumnEditable,\n  useDataTableContext,\n} from './data-table-context'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\nimport { TableBody, TableCell, TableRow } from './table'\n\n// ── CellEditInput ───────────────────────────────────────────────\n\n/**\n * Inline edit input rendered inside a table cell.\n * Auto-focuses, saves on Enter/blur, cancels on Escape.\n */\nfunction CellEditInput({\n  initialValue,\n  onSave,\n  onCancel,\n}: {\n  initialValue: string\n  onSave: (value: string) => void\n  onCancel: () => void\n}) {\n  const [value, setValue] = useState(initialValue)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    inputRef.current?.focus()\n    inputRef.current?.select()\n  }, [])\n\n  const handleSave = useCallback(() => {\n    onSave(value)\n  }, [onSave, value])\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"text\"\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n      onBlur={handleSave}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault()\n          handleSave()\n        } else if (e.key === 'Escape') {\n          e.preventDefault()\n          onCancel()\n        }\n      }}\n      className={cn(\n        'h-ds-xs-plus w-full rounded-control',\n        'border border-accent-7 bg-surface-raised-hover',\n        'px-ds-02 text-body-sm',\n        'text-surface-fg placeholder:text-surface-fg-subtle',\n        'outline-hidden focus:border-accent-7',\n      )}\n      aria-label=\"Edit cell value\"\n    />\n  )\n}\n\n// ── DataRow ─────────────────────────────────────────────────────\n\n/** Render a single data row (shared between virtual and non-virtual paths) */\nfunction DataTableRow<TData>({\n  row,\n  style,\n}: {\n  row: Row<TData>\n  style?: React.CSSProperties\n}) {\n  const {\n    table,\n    columnPinningState,\n    editable,\n    editingCell,\n    setEditingCell,\n    onCellEdit,\n    virtualRows,\n    onRowClick,\n  } = useDataTableContext<TData>()\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLTableRowElement>) => {\n      if (!onRowClick) return\n      const target = e.target as HTMLElement\n      if (target.closest(INTERACTIVE_SELECTOR)) return\n      onRowClick(row.original)\n    },\n    [onRowClick, row.original],\n  )\n\n  const visibleCells = row.getVisibleCells()\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && 'selected'}\n      style={style}\n      className={cn(\n        virtualRows ? 'absolute w-full flex' : undefined,\n        onRowClick && 'cursor-pointer',\n      )}\n      onClick={onRowClick ? handleRowClick : undefined}\n    >\n      {visibleCells.map((cell) => {\n        const pinned = getPinnedCellStyle(cell.column.id, columnPinningState)\n        const isEditing =\n          editingCell?.rowIndex === row.index &&\n          editingCell?.columnId === cell.column.id\n\n        return (\n          <TableCell\n            key={cell.id}\n            className={cn(\n              pinned.className,\n              virtualRows && 'flex-1',\n              getColumnMetaClasses(\n                cell.column.columnDef.meta as Record<string, unknown>,\n              ),\n            )}\n            style={pinned.style}\n            onDoubleClick={() => {\n              if (isColumnEditable(cell.column.id, editable, table)) {\n                setEditingCell({\n                  rowIndex: row.index,\n                  columnId: cell.column.id,\n                })\n              }\n            }}\n          >\n            {isEditing ? (\n              <CellEditInput\n                initialValue={String(cell.getValue() ?? '')}\n                onSave={(value) => {\n                  onCellEdit?.(row.index, cell.column.id, value)\n                  setEditingCell(null)\n                }}\n                onCancel={() => setEditingCell(null)}\n              />\n            ) : (\n              flexRender(cell.column.columnDef.cell, cell.getContext())\n            )}\n          </TableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\n// ── ExpandedRow ─────────────────────────────────────────────────\n\n/** Render expanded content row below the data row */\nfunction DataTableExpandedRow<TData>({\n  row,\n  style,\n}: {\n  row: Row<TData>\n  style?: React.CSSProperties\n}) {\n  const { allColumns, expandable, renderExpanded, virtualRows } =\n    useDataTableContext<TData>()\n  // Self-guarded (StatFlash pattern) — reveal collapses to an instant swap\n  // without relying on a consumer MotionProvider.\n  const prefersReduced = useReducedMotion()\n\n  if (!expandable || !renderExpanded) return null\n\n  const expanded = row.getIsExpanded()\n\n  // Virtual rows are absolutely positioned with measured heights — a height\n  // animation would fight the virtualizer, so the reveal is instant there.\n  if (virtualRows) {\n    if (!expanded) return null\n    return (\n      <TableRow style={style} className=\"absolute w-full flex\">\n        <TableCell\n          colSpan={allColumns.length}\n          className=\"bg-surface-base p-ds-05 flex-1\"\n        >\n          {renderExpanded(row.original)}\n        </TableCell>\n      </TableRow>\n    )\n  }\n\n  return (\n    <AnimatePresence initial={false}>\n      {expanded && (\n        <TableRow style={style}>\n          <TableCell\n            colSpan={allColumns.length}\n            // A recess, not a raised layer — surface-raised would vanish on a\n            // card. Padding moves to the inner div so the collapsed state has\n            // zero height.\n            className=\"bg-surface-base p-0\"\n          >\n            <motion.div\n              className=\"overflow-hidden\"\n              initial={prefersReduced ? false : { height: 0, opacity: 0 }}\n              animate={{ height: 'auto', opacity: 1 }}\n              exit={prefersReduced ? undefined : { height: 0, opacity: 0 }}\n              transition={\n                prefersReduced ? { duration: 0 } : { ...springs.smooth }\n              }\n            >\n              <div className=\"p-ds-05\">{renderExpanded(row.original)}</div>\n            </motion.div>\n          </TableCell>\n        </TableRow>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── SkeletonRows ────────────────────────────────────────────────\n\nfunction DataTableSkeletonRows({\n  rowCount,\n}: {\n  rowCount: number\n}) {\n  const { allColumns } = useDataTableContext()\n  const visibleColumnCount = allColumns.length\n  const skeletonWidths = ['w-3/4', 'w-1/2', 'w-2/3', 'w-full']\n\n  return (\n    <TableBody>\n      {Array.from({ length: rowCount }, (_, rowIdx) => (\n        <TableRow key={`skeleton-${rowIdx}`}>\n          {Array.from({ length: visibleColumnCount }, (_, colIdx) => {\n            const colId = allColumns[colIdx]?.id ?? allColumns[colIdx]?.header\n            const isSelect = colId === '_select'\n            return (\n              <TableCell key={`skeleton-${rowIdx}-${colIdx}`}>\n                {isSelect ? (\n                  <Skeleton\n                    variant=\"text\"\n                    className=\"h-4 w-4\"\n                    animation=\"pulse\"\n                  />\n                ) : (\n                  <Skeleton\n                    variant=\"text\"\n                    className={cn(\n                      'h-4',\n                      skeletonWidths[colIdx % skeletonWidths.length],\n                    )}\n                    animation=\"pulse\"\n                  />\n                )}\n              </TableCell>\n            )\n          })}\n        </TableRow>\n      ))}\n    </TableBody>\n  )\n}\n\n// ── DataTableBody (orchestrates all body rendering) ─────────────\n\nexport function DataTableBody<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n  virtualItems,\n  totalVirtualSize,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n  virtualItems?: VirtualItem[]\n  totalVirtualSize?: number\n}) {\n  const { table, allColumns, virtualRows } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading state: show skeleton rows\n  if (loading) {\n    return <DataTableSkeletonRows rowCount={skeletonRowCount} />\n  }\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={allColumns.length}\n            className={cn(\n              'py-ds-07 text-center',\n              !emptyState && 'text-surface-fg-subtle',\n            )}\n          >\n            {emptyState || noResultsText || 'No results.'}\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  if (virtualRows && virtualItems) {\n    return (\n      <TableBody\n        style={{\n          height: `${totalVirtualSize}px`,\n          position: 'relative',\n        }}\n      >\n        {virtualItems.map((virtualRow) => {\n          const row = rows[virtualRow.index]\n          return (\n            <DataTableRow\n              key={row.id}\n              row={row}\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                height: `${virtualRow.size}px`,\n                transform: `translateY(${virtualRow.start}px)`,\n              }}\n            />\n          )\n        })}\n      </TableBody>\n    )\n  }\n\n  // Standard (non-virtual) rendering\n  return (\n    <TableBody>\n      {rows.map((row) => (\n        <React.Fragment key={row.id}>\n          <DataTableRow row={row} />\n          <DataTableExpandedRow row={row} />\n        </React.Fragment>\n      ))}\n    </TableBody>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-table-body.js","names":[],"sources":["../../src/ui/data-table-body.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender,type Row } from '@tanstack/react-table'\nimport { type VirtualItem } from '@tanstack/react-virtual'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  INTERACTIVE_SELECTOR,\n  isColumnEditable,\n  useDataTableContext,\n} from './data-table-context'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\nimport { TableBody, TableCell, TableRow } from './table'\n\n// ── CellEditInput ───────────────────────────────────────────────\n\n/**\n * Inline edit input rendered inside a table cell.\n * Auto-focuses, saves on Enter/blur, cancels on Escape.\n */\nfunction CellEditInput({\n  initialValue,\n  onSave,\n  onCancel,\n}: {\n  initialValue: string\n  onSave: (value: string) => void\n  onCancel: () => void\n}) {\n  const [value, setValue] = useState(initialValue)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  useEffect(() => {\n    inputRef.current?.focus()\n    inputRef.current?.select()\n  }, [])\n\n  const handleSave = useCallback(() => {\n    onSave(value)\n  }, [onSave, value])\n\n  return (\n    <input\n      ref={inputRef}\n      type=\"text\"\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n      onBlur={handleSave}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault()\n          handleSave()\n        } else if (e.key === 'Escape') {\n          e.preventDefault()\n          onCancel()\n        }\n      }}\n      className={cn(\n        'h-ds-xs-plus w-full rounded-control',\n        'border border-accent-7 bg-surface-panel-hover',\n        'px-ds-02 text-body-sm',\n        'text-surface-fg placeholder:text-surface-fg-subtle',\n        'outline-hidden focus:border-accent-7',\n      )}\n      aria-label=\"Edit cell value\"\n    />\n  )\n}\n\n// ── DataRow ─────────────────────────────────────────────────────\n\n/** Render a single data row (shared between virtual and non-virtual paths) */\nfunction DataTableRow<TData>({ row }: { row: Row<TData> }) {\n  const {\n    table,\n    columnPinningState,\n    editable,\n    editingCell,\n    setEditingCell,\n    onCellEdit,\n    onRowClick,\n    rowClassName,\n  } = useDataTableContext<TData>()\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent<HTMLTableRowElement>) => {\n      if (!onRowClick) return\n      const target = e.target as HTMLElement\n      if (target.closest(INTERACTIVE_SELECTOR)) return\n      onRowClick(row.original)\n    },\n    [onRowClick, row.original],\n  )\n\n  const visibleCells = row.getVisibleCells()\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && 'selected'}\n      className={cn(\n        onRowClick && 'cursor-pointer',\n        rowClassName?.(row.original),\n      )}\n      onClick={onRowClick ? handleRowClick : undefined}\n    >\n      {visibleCells.map((cell) => {\n        const pinned = getPinnedCellStyle(cell.column.id, columnPinningState)\n        const isEditing =\n          editingCell?.rowIndex === row.index &&\n          editingCell?.columnId === cell.column.id\n\n        return (\n          <TableCell\n            key={cell.id}\n            className={cn(\n              pinned.className,\n              getColumnMetaClasses(\n                cell.column.columnDef.meta as Record<string, unknown>,\n              ),\n            )}\n            style={pinned.style}\n            onDoubleClick={() => {\n              if (isColumnEditable(cell.column.id, editable, table)) {\n                setEditingCell({\n                  rowIndex: row.index,\n                  columnId: cell.column.id,\n                })\n              }\n            }}\n          >\n            {isEditing ? (\n              <CellEditInput\n                initialValue={String(cell.getValue() ?? '')}\n                onSave={(value) => {\n                  onCellEdit?.(row.index, cell.column.id, value)\n                  setEditingCell(null)\n                }}\n                onCancel={() => setEditingCell(null)}\n              />\n            ) : (\n              flexRender(cell.column.columnDef.cell, cell.getContext())\n            )}\n          </TableCell>\n        )\n      })}\n    </TableRow>\n  )\n}\n\n// ── ExpandedRow ─────────────────────────────────────────────────\n\n/** Render expanded content row below the data row */\nfunction DataTableExpandedRow<TData>({ row }: { row: Row<TData> }) {\n  const { allColumns, expandable, renderExpanded, virtualRows } =\n    useDataTableContext<TData>()\n  // Self-guarded (StatFlash pattern) — reveal collapses to an instant swap\n  // without relying on a consumer MotionProvider.\n  const prefersReduced = useReducedMotion()\n\n  if (!expandable || !renderExpanded) return null\n\n  const expanded = row.getIsExpanded()\n\n  // In virtual mode the reveal is instant: the row group's height is watched by\n  // the virtualizer's ResizeObserver, and an animating height would fire a\n  // resize on every frame of the spring.\n  if (virtualRows) {\n    if (!expanded) return null\n    return (\n      <TableRow>\n        <TableCell colSpan={allColumns.length} className=\"bg-surface-base p-ds-05\">\n          {renderExpanded(row.original)}\n        </TableCell>\n      </TableRow>\n    )\n  }\n\n  return (\n    <AnimatePresence initial={false}>\n      {expanded && (\n        <TableRow>\n          <TableCell\n            colSpan={allColumns.length}\n            // A recess, not a raised layer — surface-panel would vanish on a\n            // card. Padding moves to the inner div so the collapsed state has\n            // zero height.\n            className=\"bg-surface-base p-0\"\n          >\n            <motion.div\n              className=\"overflow-hidden\"\n              initial={prefersReduced ? false : { height: 0, opacity: 0 }}\n              animate={{ height: 'auto', opacity: 1 }}\n              exit={prefersReduced ? undefined : { height: 0, opacity: 0 }}\n              transition={\n                prefersReduced ? { duration: 0 } : { ...springs.smooth }\n              }\n            >\n              <div className=\"p-ds-05\">{renderExpanded(row.original)}</div>\n            </motion.div>\n          </TableCell>\n        </TableRow>\n      )}\n    </AnimatePresence>\n  )\n}\n\n// ── SkeletonRows ────────────────────────────────────────────────\n\nfunction DataTableSkeletonRows({\n  rowCount,\n}: {\n  rowCount: number\n}) {\n  const { allColumns } = useDataTableContext()\n  const visibleColumnCount = allColumns.length\n  const skeletonWidths = ['w-3/4', 'w-1/2', 'w-2/3', 'w-full']\n\n  return (\n    <TableBody>\n      {Array.from({ length: rowCount }, (_, rowIdx) => (\n        <TableRow key={`skeleton-${rowIdx}`}>\n          {Array.from({ length: visibleColumnCount }, (_, colIdx) => {\n            const colId = allColumns[colIdx]?.id ?? allColumns[colIdx]?.header\n            const isSelect = colId === '_select'\n            return (\n              <TableCell key={`skeleton-${rowIdx}-${colIdx}`}>\n                {isSelect ? (\n                  <Skeleton\n                    variant=\"text\"\n                    className=\"h-4 w-4\"\n                    animation=\"pulse\"\n                  />\n                ) : (\n                  <Skeleton\n                    variant=\"text\"\n                    className={cn(\n                      'h-4',\n                      skeletonWidths[colIdx % skeletonWidths.length],\n                    )}\n                    animation=\"pulse\"\n                  />\n                )}\n              </TableCell>\n            )\n          })}\n        </TableRow>\n      ))}\n    </TableBody>\n  )\n}\n\n// ── DataTableBody (orchestrates all body rendering) ─────────────\n\nexport function DataTableBody<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n  virtualItems,\n  totalVirtualSize,\n  measureRow,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n  virtualItems?: VirtualItem[]\n  totalVirtualSize?: number\n  /** `virtualizer.measureElement` — attached to each virtual row group */\n  measureRow?: (node: HTMLTableSectionElement | null) => void\n}) {\n  const { table, allColumns, virtualRows } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading state: show skeleton rows\n  if (loading) {\n    return <DataTableSkeletonRows rowCount={skeletonRowCount} />\n  }\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell\n            colSpan={allColumns.length}\n            className={cn(\n              'py-ds-07 text-center',\n              !emptyState && 'text-surface-fg-subtle',\n            )}\n          >\n            {emptyState || noResultsText || 'No results.'}\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  if (virtualRows && virtualItems) {\n    // Each windowed row gets its OWN <tbody> (valid HTML — a table may hold any\n    // number of row groups) carrying `data-index` + the virtualizer's\n    // `measureElement` ref. That group is what gets measured, so a row's height\n    // INCLUDES its expanded detail row and `getTotalSize()` stays truthful.\n    //\n    // Rows stay in normal table flow; the window is positioned by spacer row\n    // groups above and below instead of absolute offsets. Two consequences worth\n    // knowing: an expanded panel can never paint on top of the next row (flow\n    // layout forbids it), and column widths keep tracking <thead> because the\n    // cells are still real table cells.\n    const firstItem = virtualItems[0]\n    const lastItem = virtualItems[virtualItems.length - 1]\n    const padTop = firstItem ? firstItem.start : 0\n    const padBottom = lastItem ? Math.max(0, (totalVirtualSize ?? 0) - lastItem.end) : 0\n    const spacerCell = (height: number) => (\n      <tbody aria-hidden=\"true\">\n        <tr>\n          <td colSpan={allColumns.length} style={{ height, padding: 0, border: 0 }} />\n        </tr>\n      </tbody>\n    )\n\n    return (\n      <>\n        {padTop > 0 && spacerCell(padTop)}\n        {virtualItems.map((virtualRow) => {\n          const row = rows[virtualRow.index]\n          const isLastRow = virtualRow.index === rows.length - 1\n          return (\n            <tbody\n              key={row.id}\n              ref={measureRow}\n              data-index={virtualRow.index}\n              className={cn(isLastRow && '[&_tr:last-child]:border-0')}\n            >\n              <DataTableRow row={row} />\n              <DataTableExpandedRow row={row} />\n            </tbody>\n          )\n        })}\n        {padBottom > 0 && spacerCell(padBottom)}\n      </>\n    )\n  }\n\n  // Standard (non-virtual) rendering\n  return (\n    <TableBody>\n      {rows.map((row) => (\n        <React.Fragment key={row.id}>\n          <DataTableRow row={row} />\n          <DataTableExpandedRow row={row} />\n        </React.Fragment>\n      ))}\n    </TableBody>\n  )\n}\n"],"mappings":"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"}

package/dist/ui/data-table-bulk-actions.d.ts

@@ -1,9 +1,14 @@
 import { Table } from '@tanstack/react-table';
 import { default as React } from 'react';
+import { IconInput } from './lib/icon-input.js';
+/** Where the floating bulk-action bar renders. @default 'bottom' */
+export type BulkActionsPosition = 'bottom' | 'top' | 'inline';
 /** Bulk action definition for the floating action bar */
 export interface BulkAction<TData> {
     label: string;
     onClick: (selectedRows: TData[]) => void;
+    /** Icon rendered before the label — useful for compact/mobile bars. */
+    icon?: IconInput;
     color?: 'accent' | 'error';
     disabled?: boolean;
 }
@@ -11,9 +16,10 @@ export interface BulkAction<TData> {
  * Floating action bar shown when rows are selected.
  * Internal — not exported to consumers.
  */
-export declare function DataTableBulkActions<TData>({ table, selectedRows, bulkActions, }: {
+export declare function DataTableBulkActions<TData>({ table, selectedRows, bulkActions, position, }: {
     table: Table<TData>;
     selectedRows: TData[];
     bulkActions: BulkAction<TData>[];
+    position?: BulkActionsPosition;
 }): React.JSX.Element;
 //# sourceMappingURL=data-table-bulk-actions.d.ts.map

package/dist/ui/data-table-bulk-actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-bulk-actions.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-bulk-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,yDAAyD;AACzD,MAAM,WAAW,UAAU,CAAC,KAAK;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IACxC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,YAAY,EACZ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,EAAE,KAAK,EAAE,CAAA;IACrB,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAA;CACjC,qBA0CA"}
+{"version":3,"file":"data-table-bulk-actions.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-bulk-actions.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGjD,oEAAoE;AACpE,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE7D,yDAAyD;AACzD,MAAM,WAAW,UAAU,CAAC,KAAK;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IACxC,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAQD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,EAC1C,KAAK,EACL,YAAY,EACZ,WAAW,EACX,QAAmB,GACpB,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,EAAE,KAAK,EAAE,CAAA;IACrB,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAA;IAChC,QAAQ,CAAC,EAAE,mBAAmB,CAAA;CAC/B,qBA0CA"}

package/dist/ui/data-table-bulk-actions.js

@@ -6,33 +6,39 @@ import "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { IconX as a } from "@tabler/icons-react";
 //#region src/ui/data-table-bulk-actions.tsx
-function o({ table: o, selectedRows: s, bulkActions: c }) {
+var o = {
+	bottom: "fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky animate-in slide-in-from-bottom-2",
+	top: "fixed top-6 left-1/2 -translate-x-1/2 z-sticky animate-in slide-in-from-top-2",
+	inline: "relative animate-in fade-in"
+};
+function s({ table: s, selectedRows: c, bulkActions: l, position: u = "bottom" }) {
 	return /* @__PURE__ */ i("div", {
-		className: e("fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky", "flex items-center gap-ds-04 px-ds-05 py-ds-03", "rounded-overlay bg-surface-overlay shadow-floating", "animate-in slide-in-from-bottom-2"),
+		className: e(o[u], "flex items-center gap-ds-04 px-ds-05 py-ds-03", "rounded-overlay bg-surface-overlay shadow-floating"),
 		role: "toolbar",
 		"aria-label": "Bulk actions",
 		children: [
 			/* @__PURE__ */ i("span", {
 				className: "text-body-sm font-medium text-surface-fg whitespace-nowrap",
-				children: [s.length, " selected"]
+				children: [c.length, " selected"]
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "h-5 w-px bg-surface-border",
 				"aria-hidden": "true"
 			}),
-			c.map((e) => /* @__PURE__ */ r(n, {
+			l.map((e) => /* @__PURE__ */ r(n, {
 				size: "sm",
 				variant: e.color === "error" ? "solid" : "outline",
 				color: e.color === "error" ? "error" : void 0,
 				disabled: e.disabled,
-				onClick: () => e.onClick(s),
+				startIcon: e.icon,
+				onClick: () => e.onClick(c),
 				children: e.label
 			}, e.label)),
 			/* @__PURE__ */ r("button", {
 				type: "button",
-				onClick: () => o.resetRowSelection(),
+				onClick: () => s.resetRowSelection(),
 				"aria-label": "Clear selection",
-				className: e("flex items-center justify-center p-ds-01", "rounded-control-inner hover:bg-surface-raised transition-colors", "text-surface-fg-muted hover:text-surface-fg"),
+				className: e("flex items-center justify-center p-ds-01", "rounded-control-inner hover:bg-surface-panel-hover transition-colors", "text-surface-fg-muted hover:text-surface-fg"),
 				children: /* @__PURE__ */ r(t, {
 					icon: a,
 					size: "sm"
@@ -42,4 +48,4 @@ function o({ table: o, selectedRows: s, bulkActions: c }) {
 	});
 }
 //#endregion
-export { o as DataTableBulkActions };
+export { s as DataTableBulkActions };

package/dist/ui/data-table-bulk-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-bulk-actions.js","names":[],"sources":["../../src/ui/data-table-bulk-actions.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { type Table } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n/** Bulk action definition for the floating action bar */\nexport interface BulkAction<TData> {\n  label: string\n  onClick: (selectedRows: TData[]) => void\n  color?: 'accent' | 'error'\n  disabled?: boolean\n}\n\n/**\n * Floating action bar shown when rows are selected.\n * Internal — not exported to consumers.\n */\nexport function DataTableBulkActions<TData>({\n  table,\n  selectedRows,\n  bulkActions,\n}: {\n  table: Table<TData>\n  selectedRows: TData[]\n  bulkActions: BulkAction<TData>[]\n}) {\n  return (\n    <div\n      className={cn(\n        'fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky',\n        'flex items-center gap-ds-04 px-ds-05 py-ds-03',\n        'rounded-overlay bg-surface-overlay shadow-floating',\n        'animate-in slide-in-from-bottom-2',\n      )}\n      role=\"toolbar\"\n      aria-label=\"Bulk actions\"\n    >\n      <span className=\"text-body-sm font-medium text-surface-fg whitespace-nowrap\">\n        {selectedRows.length} selected\n      </span>\n      <div className=\"h-5 w-px bg-surface-border\" aria-hidden=\"true\" />\n      {bulkActions.map((action) => (\n        <Button\n          key={action.label}\n          size=\"sm\"\n          variant={action.color === 'error' ? 'solid' : 'outline'}\n          color={action.color === 'error' ? 'error' : undefined}\n          disabled={action.disabled}\n          onClick={() => action.onClick(selectedRows)}\n        >\n          {action.label}\n        </Button>\n      ))}\n      <button\n        type=\"button\"\n        onClick={() => table.resetRowSelection()}\n        aria-label=\"Clear selection\"\n        className={cn(\n          'flex items-center justify-center p-ds-01',\n          'rounded-control-inner hover:bg-surface-raised transition-colors',\n          'text-surface-fg-muted hover:text-surface-fg',\n        )}\n      >\n        <Icon icon={IconX} size=\"sm\" />\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgB,EAA4B,EAC1C,UACA,iBACA,kBAKC;CACD,OACE,kBAAC,OAAD;EACE,WAAW,EACT,qDACA,iDACA,sDACA,mCACF;EACA,MAAK;EACL,cAAW;YARb;GAUE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAa,QAAO,WACjB;;GACN,kBAAC,OAAD;IAAK,WAAU;IAA6B,eAAY;GAAQ,CAAA;GAC/D,EAAY,KAAK,MAChB,kBAAC,GAAD;IAEE,MAAK;IACL,SAAS,EAAO,UAAU,UAAU,UAAU;IAC9C,OAAO,EAAO,UAAU,UAAU,UAAU,KAAA;IAC5C,UAAU,EAAO;IACjB,eAAe,EAAO,QAAQ,CAAY;cAEzC,EAAO;GACF,GARD,EAAO,KAQN,CACT;GACD,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAM,kBAAkB;IACvC,cAAW;IACX,WAAW,EACT,4CACA,mEACA,6CACF;cAEA,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;IAAM,CAAA;GACxB,CAAA;EACL;;AAET"}
+{"version":3,"file":"data-table-bulk-actions.js","names":[],"sources":["../../src/ui/data-table-bulk-actions.tsx"],"sourcesContent":["'use client'\n\nimport { IconX } from '@tabler/icons-react'\nimport { type Table } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Button } from './button'\nimport { Icon } from './icon'\nimport type { IconInput } from './lib/icon-input'\nimport { cn } from './lib/utils'\n\n/** Where the floating bulk-action bar renders. @default 'bottom' */\nexport type BulkActionsPosition = 'bottom' | 'top' | 'inline'\n\n/** Bulk action definition for the floating action bar */\nexport interface BulkAction<TData> {\n  label: string\n  onClick: (selectedRows: TData[]) => void\n  /** Icon rendered before the label — useful for compact/mobile bars. */\n  icon?: IconInput\n  color?: 'accent' | 'error'\n  disabled?: boolean\n}\n\nconst POSITION_CLASSES: Record<BulkActionsPosition, string> = {\n  bottom: 'fixed bottom-6 left-1/2 -translate-x-1/2 z-sticky animate-in slide-in-from-bottom-2',\n  top: 'fixed top-6 left-1/2 -translate-x-1/2 z-sticky animate-in slide-in-from-top-2',\n  inline: 'relative animate-in fade-in',\n}\n\n/**\n * Floating action bar shown when rows are selected.\n * Internal — not exported to consumers.\n */\nexport function DataTableBulkActions<TData>({\n  table,\n  selectedRows,\n  bulkActions,\n  position = 'bottom',\n}: {\n  table: Table<TData>\n  selectedRows: TData[]\n  bulkActions: BulkAction<TData>[]\n  position?: BulkActionsPosition\n}) {\n  return (\n    <div\n      className={cn(\n        POSITION_CLASSES[position],\n        'flex items-center gap-ds-04 px-ds-05 py-ds-03',\n        'rounded-overlay bg-surface-overlay shadow-floating',\n      )}\n      role=\"toolbar\"\n      aria-label=\"Bulk actions\"\n    >\n      <span className=\"text-body-sm font-medium text-surface-fg whitespace-nowrap\">\n        {selectedRows.length} selected\n      </span>\n      <div className=\"h-5 w-px bg-surface-border\" aria-hidden=\"true\" />\n      {bulkActions.map((action) => (\n        <Button\n          key={action.label}\n          size=\"sm\"\n          variant={action.color === 'error' ? 'solid' : 'outline'}\n          color={action.color === 'error' ? 'error' : undefined}\n          disabled={action.disabled}\n          startIcon={action.icon}\n          onClick={() => action.onClick(selectedRows)}\n        >\n          {action.label}\n        </Button>\n      ))}\n      <button\n        type=\"button\"\n        onClick={() => table.resetRowSelection()}\n        aria-label=\"Clear selection\"\n        className={cn(\n          'flex items-center justify-center p-ds-01',\n          'rounded-control-inner hover:bg-surface-panel-hover transition-colors',\n          'text-surface-fg-muted hover:text-surface-fg',\n        )}\n      >\n        <Icon icon={IconX} size=\"sm\" />\n      </button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAwBA,IAAM,IAAwD;CAC5D,QAAQ;CACR,KAAK;CACL,QAAQ;AACV;AAMA,SAAgB,EAA4B,EAC1C,UACA,iBACA,gBACA,cAAW,YAMV;CACD,OACE,kBAAC,OAAD;EACE,WAAW,EACT,EAAiB,IACjB,iDACA,oDACF;EACA,MAAK;EACL,cAAW;YAPb;GASE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACG,EAAa,QAAO,WACjB;;GACN,kBAAC,OAAD;IAAK,WAAU;IAA6B,eAAY;GAAQ,CAAA;GAC/D,EAAY,KAAK,MAChB,kBAAC,GAAD;IAEE,MAAK;IACL,SAAS,EAAO,UAAU,UAAU,UAAU;IAC9C,OAAO,EAAO,UAAU,UAAU,UAAU,KAAA;IAC5C,UAAU,EAAO;IACjB,WAAW,EAAO;IAClB,eAAe,EAAO,QAAQ,CAAY;cAEzC,EAAO;GACF,GATD,EAAO,KASN,CACT;GACD,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAM,kBAAkB;IACvC,cAAW;IACX,WAAW,EACT,4CACA,wEACA,6CACF;cAEA,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;IAAM,CAAA;GACxB,CAAA;EACL;;AAET"}

package/dist/ui/data-table-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-card.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,wBAAgB,cAAc,CAAC,KAAK,EAAE,EACpC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,qBAkHA"}
+{"version":3,"file":"data-table-card.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,wBAAgB,cAAc,CAAC,KAAK,EAAE,EACpC,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,UAAU,GACX,EAAE;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,qBAyJA"}

package/dist/ui/data-table-card.js

@@ -9,8 +9,8 @@ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { flexRender as l } from "@tanstack/react-table";
 //#region src/ui/data-table-card.tsx
 function u({ loading: u, skeletonRowCount: d, noResultsText: f, emptyState: p }) {
-	let { table: m, selectable: h } = a(), g = m.getRowModel().rows;
-	return u ? /* @__PURE__ */ s("div", {
+	let { table: m, selectable: h, filterable: g, filterableColumns: _, rowClassName: v } = a(), y = m.getRowModel().rows;
+	if (u) return /* @__PURE__ */ s("div", {
 		className: "flex flex-col gap-ds-03",
 		children: Array.from({ length: d }, (e, i) => /* @__PURE__ */ s(n, {
 			size: "sm",
@@ -40,54 +40,73 @@ function u({ loading: u, skeletonRowCount: d, noResultsText: f, emptyState: p })
 				]
 			})] })
 		}, `card-skeleton-${i}`))
-	}) : g.length ? /* @__PURE__ */ s("div", {
-		className: "flex flex-col gap-ds-03",
-		role: "list",
-		children: g.map((t) => {
-			let a = t.getVisibleCells().filter((e) => e.column.id !== "_select" && e.column.id !== "_expand"), u = a[0], d = a.slice(1), f = t.getIsSelected();
-			return /* @__PURE__ */ c(n, {
-				role: "listitem",
-				size: "sm",
-				variant: "outline",
-				className: e(f && "ring-2 ring-accent-9"),
-				children: [/* @__PURE__ */ c(r, {
-					className: "flex items-start justify-between gap-ds-03",
-					children: [/* @__PURE__ */ s("div", {
-						className: "min-w-0 flex-1 font-medium text-surface-fg",
-						children: u && l(u.column.columnDef.cell, u.getContext())
-					}), h && /* @__PURE__ */ s(i, {
-						size: "sm",
-						checked: f,
-						disabled: !t.getCanSelect(),
-						onCheckedChange: (e) => t.toggleSelected(!!e),
-						"aria-label": "Select row",
-						className: "shrink-0"
-					})]
-				}), d.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
-					"aria-hidden": "true",
-					className: "h-px w-full bg-surface-border-subtle"
-				}), /* @__PURE__ */ s(r, {
-					className: "flex flex-col gap-ds-01",
-					children: d.map((e) => {
-						let t = e.column.columnDef.meta;
-						return t?.hideBelow === "md" || t?.hideBelow, /* @__PURE__ */ c("div", {
-							className: "flex justify-between gap-ds-03 text-body-sm",
-							children: [/* @__PURE__ */ s("span", {
-								className: "shrink-0 text-surface-fg-muted",
-								children: typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id
-							}), /* @__PURE__ */ s("span", {
-								className: "min-w-0 text-right text-surface-fg",
-								children: l(e.column.columnDef.cell, e.getContext())
-							})]
-						}, e.id);
-					})
-				})] })]
-			}, t.id);
-		})
-	}) : /* @__PURE__ */ s("div", {
+	});
+	if (!y.length) return /* @__PURE__ */ s("div", {
 		className: e("py-ds-07 text-center", !p && "text-surface-fg-subtle"),
 		children: p || f || "No results."
 	});
+	let b = g ? m.getAllLeafColumns().filter((e) => e.id === "_select" || e.id === "_expand" ? !1 : _ ? _.includes(e.id) : e.columnDef.enableColumnFilter !== !1) : [];
+	return /* @__PURE__ */ c("div", {
+		className: "flex flex-col gap-ds-03",
+		children: [b.length > 0 && /* @__PURE__ */ s("div", {
+			className: "flex flex-col gap-ds-02",
+			children: b.map((t) => {
+				let n = typeof t.columnDef.header == "string" ? t.columnDef.header : t.id;
+				return /* @__PURE__ */ s("input", {
+					type: "text",
+					value: t.getFilterValue() ?? "",
+					onChange: (e) => t.setFilterValue(e.target.value),
+					placeholder: `Filter ${n}...`,
+					"aria-label": `Filter ${n}`,
+					className: e("h-ds-xs-plus w-full rounded-control", "border border-card-strong bg-surface-panel-hover", "px-ds-02 text-body-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7")
+				}, t.id);
+			})
+		}), /* @__PURE__ */ s("div", {
+			className: "flex flex-col gap-ds-03",
+			role: "list",
+			children: y.map((t) => {
+				let a = t.getVisibleCells().filter((e) => e.column.id !== "_select" && e.column.id !== "_expand"), u = a[0], d = a.slice(1), f = t.getIsSelected();
+				return /* @__PURE__ */ c(n, {
+					role: "listitem",
+					size: "sm",
+					variant: "outline",
+					className: e(f && "ring-2 ring-accent-9", v?.(t.original)),
+					children: [/* @__PURE__ */ c(r, {
+						className: "flex items-start justify-between gap-ds-03",
+						children: [/* @__PURE__ */ s("div", {
+							className: "min-w-0 flex-1 font-medium text-surface-fg",
+							children: u && l(u.column.columnDef.cell, u.getContext())
+						}), h && /* @__PURE__ */ s(i, {
+							size: "sm",
+							checked: f,
+							disabled: !t.getCanSelect(),
+							onCheckedChange: (e) => t.toggleSelected(!!e),
+							"aria-label": "Select row",
+							className: "shrink-0"
+						})]
+					}), d.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+						"aria-hidden": "true",
+						className: "h-px w-full bg-surface-border-subtle"
+					}), /* @__PURE__ */ s(r, {
+						className: "flex flex-col gap-ds-01",
+						children: d.map((e) => {
+							let t = e.column.columnDef.meta;
+							return t?.hideBelow === "md" || t?.hideBelow, /* @__PURE__ */ c("div", {
+								className: "flex justify-between gap-ds-03 text-body-sm",
+								children: [/* @__PURE__ */ s("span", {
+									className: "shrink-0 text-surface-fg-muted",
+									children: typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id
+								}), /* @__PURE__ */ s("span", {
+									className: "min-w-0 text-right text-surface-fg",
+									children: l(e.column.columnDef.cell, e.getContext())
+								})]
+							}, e.id);
+						})
+					})] })]
+				}, t.id);
+			})
+		})]
+	});
 }
 //#endregion
 export { u as DataTableCards };

package/dist/ui/data-table-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-card.js","names":[],"sources":["../../src/ui/data-table-card.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Card, CardContent } from './card'\nimport { Checkbox } from './checkbox'\nimport { useDataTableContext } from './data-table-context'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\n\n// ── DataTableCards ─────────────────────────────────────────────\n// Renders rows as vertically stacked cards for small (< sm) viewports.\n// Consumes the same TanStack Table instance from context — sorting,\n// filtering, pagination, and selection all work identically.\n\nexport function DataTableCards<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n}) {\n  const { table, selectable } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading skeleton\n  if (loading) {\n    return (\n      <div className=\"flex flex-col gap-ds-03\">\n        {Array.from({ length: skeletonRowCount }, (_, i) => (\n          <Card key={`card-skeleton-${i}`} size=\"sm\" variant=\"outline\">\n            <CardContent>\n              <Skeleton variant=\"text\" className=\"mb-ds-03 h-5 w-2/3\" animation=\"pulse\" />\n              <div className=\"flex flex-col gap-ds-02\">\n                <Skeleton variant=\"text\" className=\"h-4 w-full\" animation=\"pulse\" />\n                <Skeleton variant=\"text\" className=\"h-4 w-3/4\" animation=\"pulse\" />\n                <Skeleton variant=\"text\" className=\"h-4 w-1/2\" animation=\"pulse\" />\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <div className={cn('py-ds-07 text-center', !emptyState && 'text-surface-fg-subtle')}>\n        {emptyState || noResultsText || 'No results.'}\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex flex-col gap-ds-03\" role=\"list\">\n      {rows.map((row) => {\n        const cells = row.getVisibleCells()\n        // Skip internal columns (_select, _expand) for card content\n        const contentCells = cells.filter(\n          (cell) => cell.column.id !== '_select' && cell.column.id !== '_expand',\n        )\n        const primaryCell = contentCells[0]\n        const restCells = contentCells.slice(1)\n        const isSelected = row.getIsSelected()\n\n        return (\n          <Card\n            key={row.id}\n            role=\"listitem\"\n            size=\"sm\"\n            // outline, not default — a phone screen of stacked shadow cards\n            // accumulates lift (make-kit dense-list rule).\n            variant=\"outline\"\n            className={cn(isSelected && 'ring-2 ring-accent-9')}\n          >\n            {/* Header row: primary field + optional selection checkbox */}\n            <CardContent className=\"flex items-start justify-between gap-ds-03\">\n              <div className=\"min-w-0 flex-1 font-medium text-surface-fg\">\n                {primaryCell &&\n                  flexRender(primaryCell.column.columnDef.cell, primaryCell.getContext())}\n              </div>\n              {selectable && (\n                <Checkbox\n                  size=\"sm\"\n                  checked={isSelected}\n                  disabled={!row.getCanSelect()}\n                  onCheckedChange={(v) => row.toggleSelected(!!v)}\n                  aria-label=\"Select row\"\n                  className=\"shrink-0\"\n                />\n              )}\n            </CardContent>\n\n            {/* Label-value pairs for remaining columns, behind a full-width rule */}\n            {restCells.length > 0 && (\n              <>\n              <div aria-hidden=\"true\" className=\"h-px w-full bg-surface-border-subtle\" />\n              <CardContent className=\"flex flex-col gap-ds-01\">\n                {restCells.map((cell) => {\n                  // Respect hideBelow column meta — skip hidden columns\n                  const meta = cell.column.columnDef.meta as\n                    | { hideBelow?: string }\n                    | undefined\n                  // In card mode on mobile, hideBelow='sm' columns are still useful\n                  // since we're showing all data in a card layout. Only skip if\n                  // the column is explicitly hidden via visibility toggle.\n                  if (meta?.hideBelow === 'md' || meta?.hideBelow === 'lg') {\n                    // These would normally be hidden at this breakpoint in table\n                    // mode too, so skip them in cards for consistency\n                  }\n\n                  // Derive header label text\n                  const header =\n                    typeof cell.column.columnDef.header === 'string'\n                      ? cell.column.columnDef.header\n                      : cell.column.id\n\n                  return (\n                    <div key={cell.id} className=\"flex justify-between gap-ds-03 text-body-sm\">\n                      <span className=\"shrink-0 text-surface-fg-muted\">{header}</span>\n                      <span className=\"min-w-0 text-right text-surface-fg\">\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </span>\n                    </div>\n                  )\n                })}\n              </CardContent>\n              </>\n            )}\n          </Card>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,EAAsB,EACpC,YACA,qBACA,kBACA,iBAMC;CACD,IAAM,EAAE,UAAO,kBAAe,EAA2B,GACnD,IAAO,EAAM,YAAY,CAAC,CAAC;CA+BjC,OA5BI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,EAAiB,IAAI,GAAG,MAC5C,kBAAC,GAAD;GAAiC,MAAK;GAAK,SAAQ;aACjD,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAU,SAAQ;IAAO,WAAU;IAAqB,WAAU;GAAS,CAAA,GAC3E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAa,WAAU;KAAS,CAAA;KACnE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;KAAS,CAAA;KAClE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;KAAS,CAAA;IAC/D;KACM,EAAA,CAAA;EACT,GATK,iBAAiB,GAStB,CACP;CACE,CAAA,IAKJ,EAAK,SASR,kBAAC,OAAD;EAAK,WAAU;EAA0B,MAAK;YAC3C,EAAK,KAAK,MAAQ;GAGjB,IAAM,IAFQ,EAAI,gBAEG,CAAA,CAAM,QACxB,MAAS,EAAK,OAAO,OAAO,aAAa,EAAK,OAAO,OAAO,SAC/D,GACM,IAAc,EAAa,IAC3B,IAAY,EAAa,MAAM,CAAC,GAChC,IAAa,EAAI,cAAc;GAErC,OACE,kBAAC,GAAD;IAEE,MAAK;IACL,MAAK;IAGL,SAAQ;IACR,WAAW,EAAG,KAAc,sBAAsB;cAPpD,CAUE,kBAAC,GAAD;KAAa,WAAU;eAAvB,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ,KACC,EAAW,EAAY,OAAO,UAAU,MAAM,EAAY,WAAW,CAAC;KACrE,CAAA,GACJ,KACC,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU,CAAC,EAAI,aAAa;MAC5B,kBAAkB,MAAM,EAAI,eAAe,CAAC,CAAC,CAAC;MAC9C,cAAW;MACX,WAAU;KACX,CAAA,CAEQ;QAGZ,EAAU,SAAS,KAClB,kBAAA,GAAA,EAAA,UAAA,CACA,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;IAAwC,CAAA,GAC1E,kBAAC,GAAD;KAAa,WAAU;eACpB,EAAU,KAAK,MAAS;MAEvB,IAAM,IAAO,EAAK,OAAO,UAAU;MAiBnC,OAXI,GAAM,cAAc,QAAQ,GAAM,WAYpC,kBAAC,OAAD;OAAmB,WAAU;iBAA7B,CACE,kBAAC,QAAD;QAAM,WAAU;kBANlB,OAAO,EAAK,OAAO,UAAU,UAAW,WACpC,EAAK,OAAO,UAAU,SACtB,EAAK,OAAO;OAIiD,CAAA,GAC/D,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,WAAW,CAAC;OACrD,CAAA,CACH;SALK,EAAK,EAKV;KAET,CAAC;IACU,CAAA,CACX,EAAA,CAAA,CAEA;MA9DC,EAAI,EA8DL;EAEV,CAAC;CACE,CAAA,IArFH,kBAAC,OAAD;EAAK,WAAW,EAAG,wBAAwB,CAAC,KAAc,wBAAwB;YAC/E,KAAc,KAAiB;CAC7B,CAAA;AAqFX"}
+{"version":3,"file":"data-table-card.js","names":[],"sources":["../../src/ui/data-table-card.tsx"],"sourcesContent":["'use client'\n\nimport { flexRender } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Card, CardContent } from './card'\nimport { Checkbox } from './checkbox'\nimport { useDataTableContext } from './data-table-context'\nimport { cn } from './lib/utils'\nimport { Skeleton } from './skeleton'\n\n// ── DataTableCards ─────────────────────────────────────────────\n// Renders rows as vertically stacked cards for small (< sm) viewports.\n// Consumes the same TanStack Table instance from context — sorting,\n// filtering, pagination, and selection all work identically.\n\nexport function DataTableCards<TData>({\n  loading,\n  skeletonRowCount,\n  noResultsText,\n  emptyState,\n}: {\n  loading?: boolean\n  skeletonRowCount: number\n  noResultsText?: string\n  emptyState?: React.ReactNode\n}) {\n  const { table, selectable, filterable, filterableColumns, rowClassName } = useDataTableContext<TData>()\n  const rows = table.getRowModel().rows\n\n  // Loading skeleton\n  if (loading) {\n    return (\n      <div className=\"flex flex-col gap-ds-03\">\n        {Array.from({ length: skeletonRowCount }, (_, i) => (\n          <Card key={`card-skeleton-${i}`} size=\"sm\" variant=\"outline\">\n            <CardContent>\n              <Skeleton variant=\"text\" className=\"mb-ds-03 h-5 w-2/3\" animation=\"pulse\" />\n              <div className=\"flex flex-col gap-ds-02\">\n                <Skeleton variant=\"text\" className=\"h-4 w-full\" animation=\"pulse\" />\n                <Skeleton variant=\"text\" className=\"h-4 w-3/4\" animation=\"pulse\" />\n                <Skeleton variant=\"text\" className=\"h-4 w-1/2\" animation=\"pulse\" />\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <div className={cn('py-ds-07 text-center', !emptyState && 'text-surface-fg-subtle')}>\n        {emptyState || noResultsText || 'No results.'}\n      </div>\n    )\n  }\n\n  // Filterable columns that should show an input in card mode.\n  // Lives above the card list since there's no <thead> in card layout.\n  const filterableCols = filterable\n    ? table.getAllLeafColumns().filter((col) => {\n        if (col.id === '_select' || col.id === '_expand') return false\n        if (filterableColumns) return filterableColumns.includes(col.id)\n        return col.columnDef.enableColumnFilter !== false\n      })\n    : []\n\n  return (\n    <div className=\"flex flex-col gap-ds-03\">\n      {/* Filter inputs — rendered above the card list, one per filterable column */}\n      {filterableCols.length > 0 && (\n        <div className=\"flex flex-col gap-ds-02\">\n          {filterableCols.map((col) => {\n            const headerLabel =\n              typeof col.columnDef.header === 'string' ? col.columnDef.header : col.id\n            return (\n              <input\n                key={col.id}\n                type=\"text\"\n                value={(col.getFilterValue() as string) ?? ''}\n                onChange={(e) => col.setFilterValue(e.target.value)}\n                placeholder={`Filter ${headerLabel}...`}\n                aria-label={`Filter ${headerLabel}`}\n                className={cn(\n                  'h-ds-xs-plus w-full rounded-control',\n                  'border border-card-strong bg-surface-panel-hover',\n                  'px-ds-02 text-body-sm',\n                  'text-surface-fg placeholder:text-surface-fg-subtle',\n                  'outline-hidden focus:border-accent-7',\n                )}\n              />\n            )\n          })}\n        </div>\n      )}\n\n      <div className=\"flex flex-col gap-ds-03\" role=\"list\">\n      {rows.map((row) => {\n        const cells = row.getVisibleCells()\n        // Skip internal columns (_select, _expand) for card content\n        const contentCells = cells.filter(\n          (cell) => cell.column.id !== '_select' && cell.column.id !== '_expand',\n        )\n        const primaryCell = contentCells[0]\n        const restCells = contentCells.slice(1)\n        const isSelected = row.getIsSelected()\n\n        return (\n          <Card\n            key={row.id}\n            role=\"listitem\"\n            size=\"sm\"\n            // outline, not default — a phone screen of stacked shadow cards\n            // accumulates lift (make-kit dense-list rule).\n            variant=\"outline\"\n            className={cn(isSelected && 'ring-2 ring-accent-9', rowClassName?.(row.original))}\n          >\n            {/* Header row: primary field + optional selection checkbox */}\n            <CardContent className=\"flex items-start justify-between gap-ds-03\">\n              <div className=\"min-w-0 flex-1 font-medium text-surface-fg\">\n                {primaryCell &&\n                  flexRender(primaryCell.column.columnDef.cell, primaryCell.getContext())}\n              </div>\n              {selectable && (\n                <Checkbox\n                  size=\"sm\"\n                  checked={isSelected}\n                  disabled={!row.getCanSelect()}\n                  onCheckedChange={(v) => row.toggleSelected(!!v)}\n                  aria-label=\"Select row\"\n                  className=\"shrink-0\"\n                />\n              )}\n            </CardContent>\n\n            {/* Label-value pairs for remaining columns, behind a full-width rule */}\n            {restCells.length > 0 && (\n              <>\n              <div aria-hidden=\"true\" className=\"h-px w-full bg-surface-border-subtle\" />\n              <CardContent className=\"flex flex-col gap-ds-01\">\n                {restCells.map((cell) => {\n                  // Respect hideBelow column meta — skip hidden columns\n                  const meta = cell.column.columnDef.meta as\n                    | { hideBelow?: string }\n                    | undefined\n                  // In card mode on mobile, hideBelow='sm' columns are still useful\n                  // since we're showing all data in a card layout. Only skip if\n                  // the column is explicitly hidden via visibility toggle.\n                  if (meta?.hideBelow === 'md' || meta?.hideBelow === 'lg') {\n                    // These would normally be hidden at this breakpoint in table\n                    // mode too, so skip them in cards for consistency\n                  }\n\n                  // Derive header label text\n                  const header =\n                    typeof cell.column.columnDef.header === 'string'\n                      ? cell.column.columnDef.header\n                      : cell.column.id\n\n                  return (\n                    <div key={cell.id} className=\"flex justify-between gap-ds-03 text-body-sm\">\n                      <span className=\"shrink-0 text-surface-fg-muted\">{header}</span>\n                      <span className=\"min-w-0 text-right text-surface-fg\">\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </span>\n                    </div>\n                  )\n                })}\n              </CardContent>\n              </>\n            )}\n          </Card>\n        )\n      })}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}