@devalok/shilp-sutra 0.44.1 → 0.45.0

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

@@ -1,21 +1,23 @@
 "use client";
-import { cn as e } from "./lib/utils.js";
-import { getColumnMetaClasses as t, getPinnedCellStyle as n, isColumnEditable as r, useDataTableContext as i } from "./data-table-context.js";
-import { Skeleton as a } from "./skeleton.js";
-import { TableBody as o, TableCell as s, TableRow as c } from "./table.js";
-import l, { useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { flexRender as g } from "@tanstack/react-table";
+import { springs as e } from "./lib/motion.js";
+import { cn as t } from "./lib/utils.js";
+import { getColumnMetaClasses as n, getPinnedCellStyle as r, isColumnEditable as i, useDataTableContext as a } from "./data-table-context.js";
+import { Skeleton as o } from "./skeleton.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";
 //#region src/ui/data-table-body.tsx
-function _({ initialValue: t, onSave: n, onCancel: r }) {
-	let [i, a] = p(t), o = f(null);
-	d(() => {
+function x({ initialValue: e, onSave: n, onCancel: r }) {
+	let [i, a] = m(e), o = p(null);
+	f(() => {
 		o.current?.focus(), o.current?.select();
 	}, []);
-	let s = u(() => {
+	let s = d(() => {
 		n(i);
 	}, [n, i]);
-	return /* @__PURE__ */ m("input", {
+	return /* @__PURE__ */ h("input", {
 		ref: o,
 		type: "text",
 		value: i,
@@ -24,83 +26,111 @@ function _({ initialValue: t, onSave: n, onCancel: r }) {
 		onKeyDown: (e) => {
 			e.key === "Enter" ? (e.preventDefault(), s()) : e.key === "Escape" && (e.preventDefault(), r());
 		},
-		className: e("h-ds-xs-plus w-full rounded-control", "border border-accent-7 bg-surface-raised-hover", "px-ds-02 text-ds-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-raised-hover", "px-ds-02 text-ds-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7"),
 		"aria-label": "Edit cell value"
 	});
 }
-function v({ row: a, style: o }) {
-	let { table: l, cellPadding: d, columnPinningState: f, editable: p, editingCell: h, setEditingCell: v, onCellEdit: y, virtualRows: b, onRowClick: x } = i(), S = u((e) => {
-		x && (e.target.closest("button, a, input, select, textarea, [role=\"checkbox\"]") || x(a.original));
-	}, [x, a.original]), C = a.getVisibleCells();
-	return /* @__PURE__ */ m(c, {
-		"data-state": a.getIsSelected() && "selected",
+function S({ row: e, style: o }) {
+	let { table: s, columnPinningState: u, editable: f, editingCell: p, setEditingCell: m, onCellEdit: g, virtualRows: _, onRowClick: v } = a(), 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, {
+		"data-state": e.getIsSelected() && "selected",
 		style: o,
-		className: e(b ? "absolute w-full flex" : void 0, x && "cursor-pointer"),
-		onClick: x ? S : void 0,
-		children: C.map((i) => {
-			let o = n(i.column.id, f), c = h?.rowIndex === a.index && h?.columnId === i.column.id;
-			return /* @__PURE__ */ m(s, {
-				className: e(d, o.className, b && "flex-1", t(i.column.columnDef.meta)),
+		className: t(_ ? "absolute w-full flex" : void 0, v && "cursor-pointer"),
+		onClick: v ? y : void 0,
+		children: S.map((a) => {
+			let o = r(a.column.id, u), l = p?.rowIndex === e.index && p?.columnId === a.column.id;
+			return /* @__PURE__ */ h(c, {
+				className: t(o.className, _ && "flex-1", n(a.column.columnDef.meta)),
 				style: o.style,
 				onDoubleClick: () => {
-					r(i.column.id, p, l) && v({
-						rowIndex: a.index,
-						columnId: i.column.id
+					i(a.column.id, f, s) && m({
+						rowIndex: e.index,
+						columnId: a.column.id
 					});
 				},
-				children: c ? /* @__PURE__ */ m(_, {
-					initialValue: String(i.getValue() ?? ""),
-					onSave: (e) => {
-						y?.(a.index, i.column.id, e), v(null);
+				children: l ? /* @__PURE__ */ h(x, {
+					initialValue: String(a.getValue() ?? ""),
+					onSave: (t) => {
+						g?.(e.index, a.column.id, t), m(null);
 					},
-					onCancel: () => v(null)
-				}) : g(i.column.columnDef.cell, i.getContext())
-			}, i.id);
+					onCancel: () => m(null)
+				}) : b(a.column.columnDef.cell, a.getContext())
+			}, a.id);
 		})
 	});
 }
-function y({ row: t, style: n }) {
-	let { allColumns: r, expandable: a, renderExpanded: o, virtualRows: l } = i();
-	return !a || !t.getIsExpanded() || !o ? null : /* @__PURE__ */ m(c, {
+function C({ row: t, style: n }) {
+	let { allColumns: r, expandable: i, renderExpanded: o, virtualRows: s } = a(), u = y();
+	if (!i || !o) return null;
+	let d = t.getIsExpanded();
+	return s ? d ? /* @__PURE__ */ h(l, {
 		style: n,
-		className: l ? "absolute w-full flex" : void 0,
-		children: /* @__PURE__ */ m(s, {
+		className: "absolute w-full flex",
+		children: /* @__PURE__ */ h(c, {
 			colSpan: r.length,
-			className: e("bg-surface-raised p-ds-05", l && "flex-1"),
+			className: "bg-surface-base p-ds-05 flex-1",
 			children: o(t.original)
 		})
+	}) : null : /* @__PURE__ */ h(_, {
+		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 ? !1 : {
+						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: o(t.original)
+					})
+				})
+			})
+		})
 	});
 }
-function b({ rowCount: t }) {
-	let { allColumns: n, cellPadding: r } = i(), l = n.length, u = [
+function w({ rowCount: e }) {
+	let { allColumns: n } = a(), r = n.length, i = [
 		"w-3/4",
 		"w-1/2",
 		"w-2/3",
 		"w-full"
 	];
-	return /* @__PURE__ */ m(o, { children: Array.from({ length: t }, (t, i) => /* @__PURE__ */ m(c, { children: Array.from({ length: l }, (t, o) => /* @__PURE__ */ m(s, {
-		className: r,
-		children: (n[o]?.id ?? n[o]?.header) === "_select" ? /* @__PURE__ */ m(a, {
-			variant: "text",
-			className: "h-4 w-4",
-			animation: "pulse"
-		}) : /* @__PURE__ */ m(a, {
-			variant: "text",
-			className: e("h-4", u[o % u.length]),
-			animation: "pulse"
-		})
-	}, `skeleton-${i}-${o}`)) }, `skeleton-${i}`)) });
+	return /* @__PURE__ */ h(s, { children: Array.from({ length: e }, (e, a) => /* @__PURE__ */ h(l, { children: Array.from({ length: r }, (e, r) => /* @__PURE__ */ h(c, { children: (n[r]?.id ?? n[r]?.header) === "_select" ? /* @__PURE__ */ h(o, {
+		variant: "text",
+		className: "h-4 w-4",
+		animation: "pulse"
+	}) : /* @__PURE__ */ h(o, {
+		variant: "text",
+		className: t("h-4", i[r % i.length]),
+		animation: "pulse"
+	}) }, `skeleton-${a}-${r}`)) }, `skeleton-${a}`)) });
 }
-function x({ loading: t, skeletonRowCount: n, noResultsText: r, emptyState: a, virtualItems: u, totalVirtualSize: d }) {
-	let { table: f, allColumns: p, virtualRows: g } = i(), _ = f.getRowModel().rows;
-	return t ? /* @__PURE__ */ m(b, { rowCount: n }) : _.length ? g && u ? /* @__PURE__ */ m(o, {
+function T({ loading: e, skeletonRowCount: n, noResultsText: r, emptyState: i, virtualItems: o, totalVirtualSize: d }) {
+	let { table: f, allColumns: p, virtualRows: m } = a(), _ = f.getRowModel().rows;
+	return e ? /* @__PURE__ */ h(w, { rowCount: n }) : _.length ? m && o ? /* @__PURE__ */ h(s, {
 		style: {
 			height: `${d}px`,
 			position: "relative"
 		},
-		children: u.map((e) => {
+		children: o.map((e) => {
 			let t = _[e.index];
-			return /* @__PURE__ */ m(v, {
+			return /* @__PURE__ */ h(S, {
 				row: t,
 				style: {
 					position: "absolute",
@@ -112,11 +142,11 @@ function x({ loading: t, skeletonRowCount: n, noResultsText: r, emptyState: a, v
 				}
 			}, t.id);
 		})
-	}) : /* @__PURE__ */ m(o, { children: _.map((e) => /* @__PURE__ */ h(l.Fragment, { children: [/* @__PURE__ */ m(v, { row: e }), /* @__PURE__ */ m(y, { row: e })] }, e.id)) }) : /* @__PURE__ */ m(o, { children: /* @__PURE__ */ m(c, { children: /* @__PURE__ */ m(s, {
+	}) : /* @__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,
-		className: e("h-24 text-center", !a && "text-surface-fg-subtle"),
-		children: a || r || "No results."
+		className: t("py-ds-07 text-center", !i && "text-surface-fg-subtle"),
+		children: i || r || "No results."
 	}) }) });
 }
 //#endregion
-export { x as DataTableBody };
+export { T 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 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 { 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-ds-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    cellPadding,\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              cellPadding,\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\n  if (!expandable || !row.getIsExpanded() || !renderExpanded) return null\n\n  return (\n    <TableRow\n      style={style}\n      className={virtualRows ? 'absolute w-full flex' : undefined}\n    >\n      <TableCell\n        colSpan={allColumns.length}\n        className={cn(\n          'bg-surface-raised p-ds-05',\n          virtualRows && 'flex-1',\n        )}\n      >\n        {renderExpanded(row.original)}\n      </TableCell>\n    </TableRow>\n  )\n}\n\n// ── SkeletonRows ────────────────────────────────────────────────\n\nfunction DataTableSkeletonRows({\n  rowCount,\n}: {\n  rowCount: number\n}) {\n  const { allColumns, cellPadding } = 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\n                key={`skeleton-${rowIdx}-${colIdx}`}\n                className={cellPadding}\n              >\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              'h-24 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-raised-hover',\n        'px-ds-02 text-ds-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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"}

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;AAYzB,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,2CA+GA"}
+{"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,2CAkHA"}

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

@@ -1,86 +1,93 @@
 "use client";
 import { cn as e } from "./lib/utils.js";
-import { Checkbox as t } from "./checkbox.js";
-import { useDataTableContext as n } from "./data-table-context.js";
-import { Skeleton as r } from "./skeleton.js";
+import { Card as t, CardContent as n } from "./card.js";
+import { Checkbox as r } from "./checkbox.js";
+import { useDataTableContext as i } from "./data-table-context.js";
+import { Skeleton as a } from "./skeleton.js";
 import "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { flexRender as o } from "@tanstack/react-table";
+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 s({ loading: s, skeletonRowCount: c, noResultsText: l, emptyState: u }) {
-	let { table: d, selectable: f } = n(), p = d.getRowModel().rows;
-	return s ? /* @__PURE__ */ i("div", {
+function u({ loading: u, skeletonRowCount: d, noResultsText: f, emptyState: p }) {
+	let { table: m, selectable: h } = i(), g = m.getRowModel().rows;
+	return u ? /* @__PURE__ */ s("div", {
 		className: "flex flex-col gap-ds-03",
-		children: Array.from({ length: c }, (e, t) => /* @__PURE__ */ a("div", {
-			className: "rounded-surface border border-surface-border bg-surface-raised p-ds-04",
-			children: [/* @__PURE__ */ i(r, {
+		children: Array.from({ length: d }, (e, r) => /* @__PURE__ */ s(t, {
+			size: "sm",
+			variant: "outline",
+			children: /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(a, {
 				variant: "text",
 				className: "mb-ds-03 h-5 w-2/3",
 				animation: "pulse"
-			}), /* @__PURE__ */ a("div", {
+			}), /* @__PURE__ */ c("div", {
 				className: "flex flex-col gap-ds-02",
 				children: [
-					/* @__PURE__ */ i(r, {
+					/* @__PURE__ */ s(a, {
 						variant: "text",
 						className: "h-4 w-full",
 						animation: "pulse"
 					}),
-					/* @__PURE__ */ i(r, {
+					/* @__PURE__ */ s(a, {
 						variant: "text",
 						className: "h-4 w-3/4",
 						animation: "pulse"
 					}),
-					/* @__PURE__ */ i(r, {
+					/* @__PURE__ */ s(a, {
 						variant: "text",
 						className: "h-4 w-1/2",
 						animation: "pulse"
 					})
 				]
-			})]
-		}, `card-skeleton-${t}`))
-	}) : p.length ? /* @__PURE__ */ i("div", {
+			})] })
+		}, `card-skeleton-${r}`))
+	}) : g.length ? /* @__PURE__ */ s("div", {
 		className: "flex flex-col gap-ds-03",
 		role: "list",
-		children: p.map((n) => {
-			let r = n.getVisibleCells().filter((e) => e.column.id !== "_select" && e.column.id !== "_expand"), s = r[0], c = r.slice(1), l = n.getIsSelected();
-			return /* @__PURE__ */ a("div", {
+		children: g.map((i) => {
+			let a = i.getVisibleCells().filter((e) => e.column.id !== "_select" && e.column.id !== "_expand"), u = a[0], d = a.slice(1), f = i.getIsSelected();
+			return /* @__PURE__ */ c(t, {
 				role: "listitem",
-				className: e("rounded-surface border border-surface-border bg-surface-raised p-ds-04", l && "ring-2 ring-accent-9"),
-				children: [/* @__PURE__ */ a("div", {
-					className: "flex items-start justify-between gap-ds-03 mb-ds-02",
-					children: [/* @__PURE__ */ i("div", {
+				size: "sm",
+				variant: "outline",
+				className: e(f && "ring-2 ring-accent-9"),
+				children: [/* @__PURE__ */ c(n, {
+					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: s && o(s.column.columnDef.cell, s.getContext())
-					}), f && /* @__PURE__ */ i(t, {
+						children: u && l(u.column.columnDef.cell, u.getContext())
+					}), h && /* @__PURE__ */ s(r, {
 						size: "sm",
-						checked: l,
-						disabled: !n.getCanSelect(),
-						onCheckedChange: (e) => n.toggleSelected(!!e),
+						checked: f,
+						disabled: !i.getCanSelect(),
+						onCheckedChange: (e) => i.toggleSelected(!!e),
 						"aria-label": "Select row",
 						className: "shrink-0"
 					})]
-				}), c.length > 0 && /* @__PURE__ */ i("div", {
-					className: "flex flex-col gap-ds-01 border-t border-surface-border pt-ds-02",
-					children: c.map((e) => {
+				}), d.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+					"aria-hidden": "true",
+					className: "h-px w-full bg-surface-border-subtle"
+				}), /* @__PURE__ */ s(n, {
+					className: "flex flex-col gap-ds-01",
+					children: d.map((e) => {
 						let t = e.column.columnDef.meta;
-						return t?.hideBelow === "md" || t?.hideBelow, /* @__PURE__ */ a("div", {
+						return t?.hideBelow === "md" || t?.hideBelow, /* @__PURE__ */ c("div", {
 							className: "flex justify-between gap-ds-03 text-ds-sm",
-							children: [/* @__PURE__ */ i("span", {
+							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__ */ i("span", {
+							}), /* @__PURE__ */ s("span", {
 								className: "min-w-0 text-right text-surface-fg",
-								children: o(e.column.columnDef.cell, e.getContext())
+								children: l(e.column.columnDef.cell, e.getContext())
 							})]
 						}, e.id);
 					})
-				})]
-			}, n.id);
+				})] })]
+			}, i.id);
 		})
-	}) : /* @__PURE__ */ i("div", {
-		className: e("py-ds-07 text-center", !u && "text-surface-fg-subtle"),
-		children: u || l || "No results."
+	}) : /* @__PURE__ */ s("div", {
+		className: e("py-ds-07 text-center", !p && "text-surface-fg-subtle"),
+		children: p || f || "No results."
 	});
 }
 //#endregion
-export { s as DataTableCards };
+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 { 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          <div\n            key={`card-skeleton-${i}`}\n            className=\"rounded-surface border border-surface-border bg-surface-raised p-ds-04\"\n          >\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          </div>\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          <div\n            key={row.id}\n            role=\"listitem\"\n            className={cn(\n              'rounded-surface border border-surface-border bg-surface-raised p-ds-04',\n              isSelected && 'ring-2 ring-accent-9',\n            )}\n          >\n            {/* Header row: primary field + optional selection checkbox */}\n            <div className=\"flex items-start justify-between gap-ds-03 mb-ds-02\">\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            </div>\n\n            {/* Label-value pairs for remaining columns */}\n            {restCells.length > 0 && (\n              <div className=\"flex flex-col gap-ds-01 border-t border-surface-border pt-ds-02\">\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-ds-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              </div>\n            )}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,EAAsB,EACpC,YACA,qBACA,kBACA,iBAMC;CACD,IAAM,EAAE,UAAO,kBAAe,GAA4B,EACpD,IAAO,EAAM,aAAa,CAAC;AAgCjC,QA7BI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,GAAkB,GAAG,GAAG,MAC5C,kBAAC,OAAD;GAEE,WAAU;aAFZ,CAIE,kBAAC,GAAD;IAAU,SAAQ;IAAO,WAAU;IAAqB,WAAU;IAAU,CAAA,EAC5E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAa,WAAU;MAAU,CAAA;KACpE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;MAAU,CAAA;KACnE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;MAAU,CAAA;KAC/D;MACF;KATC,iBAAiB,IASlB,CACN;EACE,CAAA,GAKL,EAAK,SASR,kBAAC,OAAD;EAAK,WAAU;EAA0B,MAAK;YAC3C,EAAK,KAAK,MAAQ;GAGjB,IAAM,IAFQ,EAAI,iBAAiB,CAER,QACxB,MAAS,EAAK,OAAO,OAAO,aAAa,EAAK,OAAO,OAAO,UAC9D,EACK,IAAc,EAAa,IAC3B,IAAY,EAAa,MAAM,EAAE,EACjC,IAAa,EAAI,eAAe;AAEtC,UACE,kBAAC,OAAD;IAEE,MAAK;IACL,WAAW,EACT,0EACA,KAAc,uBACf;cANH,CASE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ,KACC,EAAW,EAAY,OAAO,UAAU,MAAM,EAAY,YAAY,CAAC;MACrE,CAAA,EACL,KACC,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU,CAAC,EAAI,cAAc;MAC7B,kBAAkB,MAAM,EAAI,eAAe,CAAC,CAAC,EAAE;MAC/C,cAAW;MACX,WAAU;MACV,CAAA,CAEA;QAGL,EAAU,SAAS,KAClB,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAU,KAAK,MAAS;MAEvB,IAAM,IAAO,EAAK,OAAO,UAAU;AAiBnC,aAXI,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;QAIkD,CAAA,EAChE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,YAAY,CAAC;QACrD,CAAA,CACH;SALI,EAAK,GAKT;OAER;KACE,CAAA,CAEJ;MA1DC,EAAI,GA0DL;IAER;EACE,CAAA,GAjFJ,kBAAC,OAAD;EAAK,WAAW,EAAG,wBAAwB,CAAC,KAAc,yBAAyB;YAChF,KAAc,KAAiB;EAC5B,CAAA"}
+{"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-ds-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,GAA4B,EACpD,IAAO,EAAM,aAAa,CAAC;AA+BjC,QA5BI,IAEA,kBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,EAAE,QAAQ,GAAkB,GAAG,GAAG,MAC5C,kBAAC,GAAD;GAAiC,MAAK;GAAK,SAAQ;aACjD,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAU,SAAQ;IAAO,WAAU;IAAqB,WAAU;IAAU,CAAA,EAC5E,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAa,WAAU;MAAU,CAAA;KACpE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;MAAU,CAAA;KACnE,kBAAC,GAAD;MAAU,SAAQ;MAAO,WAAU;MAAY,WAAU;MAAU,CAAA;KAC/D;MACM,EAAA,CAAA;GACT,EATI,iBAAiB,IASrB,CACP;EACE,CAAA,GAKL,EAAK,SASR,kBAAC,OAAD;EAAK,WAAU;EAA0B,MAAK;YAC3C,EAAK,KAAK,MAAQ;GAGjB,IAAM,IAFQ,EAAI,iBAAiB,CAER,QACxB,MAAS,EAAK,OAAO,OAAO,aAAa,EAAK,OAAO,OAAO,UAC9D,EACK,IAAc,EAAa,IAC3B,IAAY,EAAa,MAAM,EAAE,EACjC,IAAa,EAAI,eAAe;AAEtC,UACE,kBAAC,GAAD;IAEE,MAAK;IACL,MAAK;IAGL,SAAQ;IACR,WAAW,EAAG,KAAc,uBAAuB;cAPrD,CAUE,kBAAC,GAAD;KAAa,WAAU;eAAvB,CACE,kBAAC,OAAD;MAAK,WAAU;gBACZ,KACC,EAAW,EAAY,OAAO,UAAU,MAAM,EAAY,YAAY,CAAC;MACrE,CAAA,EACL,KACC,kBAAC,GAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU,CAAC,EAAI,cAAc;MAC7B,kBAAkB,MAAM,EAAI,eAAe,CAAC,CAAC,EAAE;MAC/C,cAAW;MACX,WAAU;MACV,CAAA,CAEQ;QAGb,EAAU,SAAS,KAClB,kBAAA,GAAA,EAAA,UAAA,CACA,kBAAC,OAAD;KAAK,eAAY;KAAO,WAAU;KAAyC,CAAA,EAC3E,kBAAC,GAAD;KAAa,WAAU;eACpB,EAAU,KAAK,MAAS;MAEvB,IAAM,IAAO,EAAK,OAAO,UAAU;AAiBnC,aAXI,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;QAIkD,CAAA,EAChE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,YAAY,CAAC;QACrD,CAAA,CACH;SALI,EAAK,GAKT;OAER;KACU,CAAA,CACX,EAAA,CAAA,CAEA;MA9DA,EAAI,GA8DJ;IAET;EACE,CAAA,GArFJ,kBAAC,OAAD;EAAK,WAAW,EAAG,wBAAwB,CAAC,KAAc,yBAAyB;YAChF,KAAc,KAAiB;EAC5B,CAAA"}

package/dist/ui/data-table-context.d.ts

@@ -1,14 +1,12 @@
 "use client";
 import { ColumnPinningState, Table } from '@tanstack/react-table';
 import { default as React } from 'react';
-import { Density } from './data-table-toolbar';
 /** Editing state: which cell is currently in edit mode */
 export type EditingCell = {
     rowIndex: number;
     columnId: string;
 } | null;
 export declare function getColumnMetaClasses(meta?: Record<string, unknown>): string;
-export declare const densityPaddingMap: Record<Density, string>;
 /** Interactive element selectors for row click filtering */
 export declare const INTERACTIVE_SELECTOR = "button, a, input, select, textarea, [role=\"checkbox\"]";
 export interface DataTableContextValue<TData = unknown> {
@@ -18,8 +16,6 @@ export interface DataTableContextValue<TData = unknown> {
         id?: string;
         header?: unknown;
     }[];
-    /** Current cell padding class based on density */
-    cellPadding: string;
     /** Column pinning state for sticky positioning */
     columnPinningState: ColumnPinningState;
     /** Whether sorting is enabled */

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAInD,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAIvE,wBAAgB,oBAAoB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAS3E;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAIrD,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,oBAAoB,4DACwB,CAAA;AAIzD,MAAM,WAAW,qBAAqB,CAAC,KAAK,GAAG,OAAO;IACpD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yDAAyD;IACzD,UAAU,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/C,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAA;IACnB,kDAAkD;IAClD,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,iCAAiC;IACjC,QAAQ,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAA;IACnB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,WAAW,EAAE,OAAO,CAAA;IACpB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,2BAA2B;IAC3B,WAAW,EAAE,WAAW,CAAA;IACxB,uBAAuB;IACvB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzE,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA;IAChD,wBAAwB;IACxB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;CAClC;AAID,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,EACvC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAA;CACpC,2CAMA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAG,OAAO,KAGnC,qBAAqB,CAAC,KAAK,CAAC,CAC3C;AAID,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,kBAAkB;;WASZ,KAAK,CAAC,aAAa;EAU9C;AAED,uCAAuC;AACvC,wBAAgB,gBAAgB,CAAC,KAAK,EACpC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAClB,OAAO,CAYT"}
+{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAIvE,wBAAgB,oBAAoB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAS3E;AAED,4DAA4D;AAC5D,eAAO,MAAM,oBAAoB,4DACwB,CAAA;AAIzD,MAAM,WAAW,qBAAqB,CAAC,KAAK,GAAG,OAAO;IACpD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yDAAyD;IACzD,UAAU,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/C,kDAAkD;IAClD,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,iCAAiC;IACjC,QAAQ,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAA;IACnB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,WAAW,EAAE,OAAO,CAAA;IACpB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,2BAA2B;IAC3B,WAAW,EAAE,WAAW,CAAA;IACxB,uBAAuB;IACvB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzE,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA;IAChD,wBAAwB;IACxB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;CAClC;AAID,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,EACvC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAA;CACpC,2CAMA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAG,OAAO,KAGnC,qBAAqB,CAAC,KAAK,CAAC,CAC3C;AAID,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,kBAAkB;;WASZ,KAAK,CAAC,aAAa;EAU9C;AAED,uCAAuC;AACvC,wBAAgB,gBAAgB,CAAC,KAAK,EACpC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAClB,OAAO,CAYT"}

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

@@ -7,23 +7,19 @@ function n(e) {
 	let t = [];
 	return e.align === "right" && t.push("text-right tabular-nums"), e.align === "center" && t.push("text-center"), e.hideBelow === "sm" && t.push("hidden sm:table-cell"), e.hideBelow === "md" && t.push("hidden md:table-cell"), e.hideBelow === "lg" && t.push("hidden lg:table-cell"), t.join(" ");
 }
-var r = {
-	compact: "py-ds-02",
-	standard: "py-ds-05",
-	comfortable: "py-ds-07"
-}, i = "button, a, input, select, textarea, [role=\"checkbox\"]", a = e.createContext(null);
-function o({ children: e, value: n }) {
-	return /* @__PURE__ */ t(a.Provider, {
+var r = "button, a, input, select, textarea, [role=\"checkbox\"]", i = e.createContext(null);
+function a({ children: e, value: n }) {
+	return /* @__PURE__ */ t(i.Provider, {
 		value: n,
 		children: e
 	});
 }
-function s() {
-	let t = e.useContext(a);
+function o() {
+	let t = e.useContext(i);
 	if (!t) throw Error("useDataTableContext must be used within DataTableProvider");
 	return t;
 }
-function c(e, t) {
+function s(e, t) {
 	let { left: n = [], right: r = [] } = t, i = n.indexOf(e), a = r.indexOf(e);
 	return i === -1 ? a === -1 ? {
 		className: "",
@@ -36,10 +32,10 @@ function c(e, t) {
 		style: { left: 0 }
 	};
 }
-function l(e, t, n) {
+function c(e, t, n) {
 	if (!t || e === "_select" || e === "_expand") return !1;
 	let r = n.getColumn(e);
 	return !(!r || r.columnDef.meta?.enableEditing === !1);
 }
 //#endregion
-export { o as DataTableProvider, i as INTERACTIVE_SELECTOR, r as densityPaddingMap, n as getColumnMetaClasses, c as getPinnedCellStyle, l as isColumnEditable, s as useDataTableContext };
+export { a as DataTableProvider, r as INTERACTIVE_SELECTOR, n as getColumnMetaClasses, s as getPinnedCellStyle, c as isColumnEditable, o as useDataTableContext };

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-context.js","names":[],"sources":["../../src/ui/data-table-context.tsx"],"sourcesContent":["'use client'\n\nimport { type ColumnPinningState, type Table } from '@tanstack/react-table'\nimport React from 'react'\n\nimport type { Density } from './data-table-toolbar'\n\n// ── Shared types ────────────────────────────────────────────────\n\n/** Editing state: which cell is currently in edit mode */\nexport type EditingCell = { rowIndex: number; columnId: string } | null\n\n// ── Utility functions ───────────────────────────────────────────\n\nexport function getColumnMetaClasses(meta?: Record<string, unknown>): string {\n  if (!meta) return ''\n  const classes: string[] = []\n  if (meta.align === 'right') classes.push('text-right tabular-nums')\n  if (meta.align === 'center') classes.push('text-center')\n  if (meta.hideBelow === 'sm') classes.push('hidden sm:table-cell')\n  if (meta.hideBelow === 'md') classes.push('hidden md:table-cell')\n  if (meta.hideBelow === 'lg') classes.push('hidden lg:table-cell')\n  return classes.join(' ')\n}\n\nexport const densityPaddingMap: Record<Density, string> = {\n  compact: 'py-ds-02',\n  standard: 'py-ds-05',\n  comfortable: 'py-ds-07',\n}\n\n/** Interactive element selectors for row click filtering */\nexport const INTERACTIVE_SELECTOR =\n  'button, a, input, select, textarea, [role=\"checkbox\"]'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport interface DataTableContextValue<TData = unknown> {\n  table: Table<TData>\n  /** All assembled columns (including _select, _expand) */\n  allColumns: { id?: string; header?: unknown }[]\n  /** Current cell padding class based on density */\n  cellPadding: string\n  /** Column pinning state for sticky positioning */\n  columnPinningState: ColumnPinningState\n  /** Whether sorting is enabled */\n  sortable: boolean\n  /** Whether per-column filters are enabled */\n  filterable: boolean\n  /** Whether inline editing is enabled */\n  editable: boolean\n  /** Whether row expansion is enabled */\n  expandable: boolean\n  /** Whether virtual rows are enabled */\n  virtualRows: boolean\n  /** Whether row selection is enabled */\n  selectable: boolean\n  /** Mobile view mode */\n  mobileView: 'card' | 'table'\n  /** Current editing cell */\n  editingCell: EditingCell\n  /** Set editing cell */\n  setEditingCell: (cell: EditingCell) => void\n  /** Callback when a cell value is edited */\n  onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void\n  /** Render function for expanded row content */\n  renderExpanded?: (row: TData) => React.ReactNode\n  /** Row click handler */\n  onRowClick?: (row: TData) => void\n}\n\nconst DataTableContext = React.createContext<DataTableContextValue | null>(null)\n\nexport function DataTableProvider<TData>({\n  children,\n  value,\n}: {\n  children: React.ReactNode\n  value: DataTableContextValue<TData>\n}) {\n  return (\n    <DataTableContext.Provider value={value as DataTableContextValue}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport function useDataTableContext<TData = unknown>() {\n  const ctx = React.useContext(DataTableContext)\n  if (!ctx) throw new Error('useDataTableContext must be used within DataTableProvider')\n  return ctx as DataTableContextValue<TData>\n}\n\n// ── Shared helpers ──────────────────────────────────────────────\n\n/** Compute sticky positioning styles for pinned columns */\nexport function getPinnedCellStyle(\n  columnId: string,\n  columnPinningState: ColumnPinningState,\n) {\n  const { left = [], right = [] } = columnPinningState\n  const leftIndex = left.indexOf(columnId)\n  const rightIndex = right.indexOf(columnId)\n\n  if (leftIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { left: 0 } as React.CSSProperties,\n    }\n  }\n  if (rightIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { right: 0 } as React.CSSProperties,\n    }\n  }\n  return { className: '', style: {} as React.CSSProperties }\n}\n\n/** Check if a column allows editing */\nexport function isColumnEditable<TData>(\n  columnId: string,\n  editable: boolean,\n  table: Table<TData>,\n): boolean {\n  if (!editable) return false\n  // Internal columns are never editable\n  if (columnId === '_select' || columnId === '_expand') return false\n  const col = table.getColumn(columnId)\n  if (!col) return false\n  const meta = col.columnDef.meta as\n    | { enableEditing?: boolean }\n    | undefined\n  // Editable by default unless explicitly disabled\n  if (meta?.enableEditing === false) return false\n  return true\n}\n"],"mappings":";;;;AAcA,SAAgB,EAAqB,GAAwC;AAC3E,KAAI,CAAC,EAAM,QAAO;CAClB,IAAM,IAAoB,EAAE;AAM5B,QALI,EAAK,UAAU,WAAS,EAAQ,KAAK,0BAA0B,EAC/D,EAAK,UAAU,YAAU,EAAQ,KAAK,cAAc,EACpD,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC7D,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC7D,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC1D,EAAQ,KAAK,IAAI;;AAG1B,IAAa,IAA6C;CACxD,SAAS;CACT,UAAU;CACV,aAAa;CACd,EAGY,IACX,2DAsCI,IAAmB,EAAM,cAA4C,KAAK;AAEhF,SAAgB,EAAyB,EACvC,aACA,YAIC;AACD,QACE,kBAAC,EAAiB,UAAlB;EAAkC;EAC/B;EACyB,CAAA;;AAIhC,SAAgB,IAAuC;CACrD,IAAM,IAAM,EAAM,WAAW,EAAiB;AAC9C,KAAI,CAAC,EAAK,OAAU,MAAM,4DAA4D;AACtF,QAAO;;AAMT,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,UAAO,EAAE,EAAE,WAAQ,EAAE,KAAK,GAC5B,IAAY,EAAK,QAAQ,EAAS,EAClC,IAAa,EAAM,QAAQ,EAAS;AAc1C,QAZI,MAAc,KAMd,MAAe,KAMZ;EAAE,WAAW;EAAI,OAAO,EAAE;EAAyB,GALjD;EACL,WAAW;EACX,OAAO,EAAE,OAAO,GAAG;EACpB,GATM;EACL,WAAW;EACX,OAAO,EAAE,MAAM,GAAG;EACnB;;AAYL,SAAgB,EACd,GACA,GACA,GACS;AAGT,KAFI,CAAC,KAED,MAAa,aAAa,MAAa,UAAW,QAAO;CAC7D,IAAM,IAAM,EAAM,UAAU,EAAS;AAOrC,QADA,EALI,CAAC,KACQ,EAAI,UAAU,MAIjB,kBAAkB"}
+{"version":3,"file":"data-table-context.js","names":[],"sources":["../../src/ui/data-table-context.tsx"],"sourcesContent":["'use client'\n\nimport { type ColumnPinningState, type Table } from '@tanstack/react-table'\nimport React from 'react'\n\n// ── Shared types ────────────────────────────────────────────────\n\n/** Editing state: which cell is currently in edit mode */\nexport type EditingCell = { rowIndex: number; columnId: string } | null\n\n// ── Utility functions ───────────────────────────────────────────\n\nexport function getColumnMetaClasses(meta?: Record<string, unknown>): string {\n  if (!meta) return ''\n  const classes: string[] = []\n  if (meta.align === 'right') classes.push('text-right tabular-nums')\n  if (meta.align === 'center') classes.push('text-center')\n  if (meta.hideBelow === 'sm') classes.push('hidden sm:table-cell')\n  if (meta.hideBelow === 'md') classes.push('hidden md:table-cell')\n  if (meta.hideBelow === 'lg') classes.push('hidden lg:table-cell')\n  return classes.join(' ')\n}\n\n/** Interactive element selectors for row click filtering */\nexport const INTERACTIVE_SELECTOR =\n  'button, a, input, select, textarea, [role=\"checkbox\"]'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport interface DataTableContextValue<TData = unknown> {\n  table: Table<TData>\n  /** All assembled columns (including _select, _expand) */\n  allColumns: { id?: string; header?: unknown }[]\n  /** Column pinning state for sticky positioning */\n  columnPinningState: ColumnPinningState\n  /** Whether sorting is enabled */\n  sortable: boolean\n  /** Whether per-column filters are enabled */\n  filterable: boolean\n  /** Whether inline editing is enabled */\n  editable: boolean\n  /** Whether row expansion is enabled */\n  expandable: boolean\n  /** Whether virtual rows are enabled */\n  virtualRows: boolean\n  /** Whether row selection is enabled */\n  selectable: boolean\n  /** Mobile view mode */\n  mobileView: 'card' | 'table'\n  /** Current editing cell */\n  editingCell: EditingCell\n  /** Set editing cell */\n  setEditingCell: (cell: EditingCell) => void\n  /** Callback when a cell value is edited */\n  onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void\n  /** Render function for expanded row content */\n  renderExpanded?: (row: TData) => React.ReactNode\n  /** Row click handler */\n  onRowClick?: (row: TData) => void\n}\n\nconst DataTableContext = React.createContext<DataTableContextValue | null>(null)\n\nexport function DataTableProvider<TData>({\n  children,\n  value,\n}: {\n  children: React.ReactNode\n  value: DataTableContextValue<TData>\n}) {\n  return (\n    <DataTableContext.Provider value={value as DataTableContextValue}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport function useDataTableContext<TData = unknown>() {\n  const ctx = React.useContext(DataTableContext)\n  if (!ctx) throw new Error('useDataTableContext must be used within DataTableProvider')\n  return ctx as DataTableContextValue<TData>\n}\n\n// ── Shared helpers ──────────────────────────────────────────────\n\n/** Compute sticky positioning styles for pinned columns */\nexport function getPinnedCellStyle(\n  columnId: string,\n  columnPinningState: ColumnPinningState,\n) {\n  const { left = [], right = [] } = columnPinningState\n  const leftIndex = left.indexOf(columnId)\n  const rightIndex = right.indexOf(columnId)\n\n  if (leftIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { left: 0 } as React.CSSProperties,\n    }\n  }\n  if (rightIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { right: 0 } as React.CSSProperties,\n    }\n  }\n  return { className: '', style: {} as React.CSSProperties }\n}\n\n/** Check if a column allows editing */\nexport function isColumnEditable<TData>(\n  columnId: string,\n  editable: boolean,\n  table: Table<TData>,\n): boolean {\n  if (!editable) return false\n  // Internal columns are never editable\n  if (columnId === '_select' || columnId === '_expand') return false\n  const col = table.getColumn(columnId)\n  if (!col) return false\n  const meta = col.columnDef.meta as\n    | { enableEditing?: boolean }\n    | undefined\n  // Editable by default unless explicitly disabled\n  if (meta?.enableEditing === false) return false\n  return true\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAqB,GAAwC;AAC3E,KAAI,CAAC,EAAM,QAAO;CAClB,IAAM,IAAoB,EAAE;AAM5B,QALI,EAAK,UAAU,WAAS,EAAQ,KAAK,0BAA0B,EAC/D,EAAK,UAAU,YAAU,EAAQ,KAAK,cAAc,EACpD,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC7D,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC7D,EAAK,cAAc,QAAM,EAAQ,KAAK,uBAAuB,EAC1D,EAAQ,KAAK,IAAI;;AAI1B,IAAa,IACX,2DAoCI,IAAmB,EAAM,cAA4C,KAAK;AAEhF,SAAgB,EAAyB,EACvC,aACA,YAIC;AACD,QACE,kBAAC,EAAiB,UAAlB;EAAkC;EAC/B;EACyB,CAAA;;AAIhC,SAAgB,IAAuC;CACrD,IAAM,IAAM,EAAM,WAAW,EAAiB;AAC9C,KAAI,CAAC,EAAK,OAAU,MAAM,4DAA4D;AACtF,QAAO;;AAMT,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,UAAO,EAAE,EAAE,WAAQ,EAAE,KAAK,GAC5B,IAAY,EAAK,QAAQ,EAAS,EAClC,IAAa,EAAM,QAAQ,EAAS;AAc1C,QAZI,MAAc,KAMd,MAAe,KAMZ;EAAE,WAAW;EAAI,OAAO,EAAE;EAAyB,GALjD;EACL,WAAW;EACX,OAAO,EAAE,OAAO,GAAG;EACpB,GATM;EACL,WAAW;EACX,OAAO,EAAE,MAAM,GAAG;EACnB;;AAYL,SAAgB,EACd,GACA,GACA,GACS;AAGT,KAFI,CAAC,KAED,MAAa,aAAa,MAAa,UAAW,QAAO;CAC7D,IAAM,IAAM,EAAM,UAAU,EAAS;AAOrC,QADA,EALI,CAAC,KACQ,EAAI,UAAU,MAIjB,kBAAkB"}

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-header.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-header.tsx"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAAE,YAAY,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,2CAsJxE;AAED,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,CAAA"}
+{"version":3,"file":"data-table-header.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-header.tsx"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAAE,YAAY,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,2CAwJxE;AAED,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,CAAA"}

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

@@ -13,7 +13,7 @@ import { flexRender as g } from "@tanstack/react-table";
 function _({ stickyHeader: _ }) {
 	let { table: v, sortable: y, filterable: b, columnPinningState: x } = a();
 	return /* @__PURE__ */ u(s, {
-		className: t(_ && "sticky top-0 z-10 bg-surface-base"),
+		className: t(_ && "sticky top-0 z-10 bg-surface-raised"),
 		children: [v.getHeaderGroups().map((a) => /* @__PURE__ */ l(c, { children: a.headers.map((a) => {
 			let s = y && a.column.getCanSort(), c = a.column.getIsSorted(), _ = i(a.column.id, x);
 			return /* @__PURE__ */ l(o, {
@@ -22,7 +22,7 @@ function _({ stickyHeader: _ }) {
 				"aria-sort": s ? c === "asc" ? "ascending" : c === "desc" ? "descending" : "none" : void 0,
 				children: a.isPlaceholder ? null : s ? /* @__PURE__ */ u("button", {
 					type: "button",
-					className: t("flex items-center gap-ds-01 font-medium", "cursor-pointer select-none", "-ml-ds-01 rounded-control-inner px-ds-01 py-ds-01", "hover:bg-surface-raised transition-colors"),
+					className: t("flex items-center gap-ds-01 font-medium", "cursor-pointer select-none", "-ml-ds-01 rounded-control-inner px-ds-01 py-ds-01", "hover:bg-surface-raised-hover transition-colors"),
 					onClick: a.column.getToggleSortingHandler(),
 					"aria-label": `Sort by ${typeof a.column.columnDef.header == "string" ? a.column.columnDef.header : a.column.id}`,
 					children: [g(a.column.columnDef.header, a.getContext()), /* @__PURE__ */ l(m, {