@devalok/shilp-sutra 0.34.0 → 0.36.0

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

@@ -1,73 +1,86 @@
 "use client";
-import { jsx as s, jsxs as l } from "react/jsx-runtime";
-import { flexRender as u } from "@tanstack/react-table";
-import { Checkbox as C } from "./checkbox.js";
-import { Skeleton as a } from "./skeleton.js";
-import { cn as g } from "./lib/utils.js";
-import { useDataTableContext as w } from "./data-table-context.js";
-function B({
-  loading: h,
-  skeletonRowCount: x,
-  noResultsText: p,
-  emptyState: n
-}) {
-  const { table: b, selectable: N } = w(), c = b.getRowModel().rows;
-  return h ? /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-03", children: Array.from({ length: x }, (t, d) => /* @__PURE__ */ l(
-    "div",
-    {
-      className: "rounded-ds-lg border border-surface-border bg-surface-raised p-ds-04",
-      children: [
-        /* @__PURE__ */ s(a, { variant: "text", className: "mb-ds-03 h-5 w-2/3", animation: "pulse" }),
-        /* @__PURE__ */ l("div", { className: "flex flex-col gap-ds-02", children: [
-          /* @__PURE__ */ s(a, { variant: "text", className: "h-4 w-full", animation: "pulse" }),
-          /* @__PURE__ */ s(a, { variant: "text", className: "h-4 w-3/4", animation: "pulse" }),
-          /* @__PURE__ */ s(a, { variant: "text", className: "h-4 w-1/2", animation: "pulse" })
-        ] })
-      ]
-    },
-    `card-skeleton-${d}`
-  )) }) : c.length ? /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-03", role: "list", children: c.map((t) => {
-    const i = t.getVisibleCells().filter(
-      (e) => e.column.id !== "_select" && e.column.id !== "_expand"
-    ), r = i[0], o = i.slice(1), m = t.getIsSelected();
-    return /* @__PURE__ */ l(
-      "div",
-      {
-        role: "listitem",
-        className: g(
-          "rounded-ds-lg border border-surface-border bg-surface-raised p-ds-04",
-          m && "ring-2 ring-accent-9"
-        ),
-        children: [
-          /* @__PURE__ */ l("div", { className: "flex items-start justify-between gap-ds-03 mb-ds-02", children: [
-            /* @__PURE__ */ s("div", { className: "min-w-0 flex-1 font-medium text-surface-fg", children: r && u(r.column.columnDef.cell, r.getContext()) }),
-            N && /* @__PURE__ */ s(
-              C,
-              {
-                size: "sm",
-                checked: m,
-                disabled: !t.getCanSelect(),
-                onCheckedChange: (e) => t.toggleSelected(!!e),
-                "aria-label": "Select row",
-                className: "shrink-0"
-              }
-            )
-          ] }),
-          o.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-01 border-t border-surface-border pt-ds-02", children: o.map((e) => {
-            const f = e.column.columnDef.meta;
-            f?.hideBelow === "md" || f?.hideBelow;
-            const v = typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id;
-            return /* @__PURE__ */ l("div", { className: "flex justify-between gap-ds-03 text-ds-sm", children: [
-              /* @__PURE__ */ s("span", { className: "shrink-0 text-surface-fg-muted", children: v }),
-              /* @__PURE__ */ s("span", { className: "min-w-0 text-right text-surface-fg", children: u(e.column.columnDef.cell, e.getContext()) })
-            ] }, e.id);
-          }) })
-        ]
-      },
-      t.id
-    );
-  }) }) : /* @__PURE__ */ s("div", { className: g("py-ds-07 text-center", !n && "text-surface-fg-subtle"), children: n || p || "No results." });
+import { cn as e } from "./lib/utils.js";
+import { Checkbox as t } from "./checkbox.js";
+import { Skeleton as n } from "./skeleton.js";
+import { useDataTableContext as r } from "./data-table-context.js";
+import "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { flexRender as o } 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 } = r(), p = d.getRowModel().rows;
+	return s ? /* @__PURE__ */ i("div", {
+		className: "flex flex-col gap-ds-03",
+		children: Array.from({ length: c }, (e, t) => /* @__PURE__ */ a("div", {
+			className: "rounded-ds-lg border border-surface-border bg-surface-raised p-ds-04",
+			children: [/* @__PURE__ */ i(n, {
+				variant: "text",
+				className: "mb-ds-03 h-5 w-2/3",
+				animation: "pulse"
+			}), /* @__PURE__ */ a("div", {
+				className: "flex flex-col gap-ds-02",
+				children: [
+					/* @__PURE__ */ i(n, {
+						variant: "text",
+						className: "h-4 w-full",
+						animation: "pulse"
+					}),
+					/* @__PURE__ */ i(n, {
+						variant: "text",
+						className: "h-4 w-3/4",
+						animation: "pulse"
+					}),
+					/* @__PURE__ */ i(n, {
+						variant: "text",
+						className: "h-4 w-1/2",
+						animation: "pulse"
+					})
+				]
+			})]
+		}, `card-skeleton-${t}`))
+	}) : p.length ? /* @__PURE__ */ i("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", {
+				role: "listitem",
+				className: e("rounded-ds-lg 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", {
+						className: "min-w-0 flex-1 font-medium text-surface-fg",
+						children: s && o(s.column.columnDef.cell, s.getContext())
+					}), f && /* @__PURE__ */ i(t, {
+						size: "sm",
+						checked: l,
+						disabled: !n.getCanSelect(),
+						onCheckedChange: (e) => n.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) => {
+						let t = e.column.columnDef.meta;
+						return t?.hideBelow === "md" || t?.hideBelow, /* @__PURE__ */ a("div", {
+							className: "flex justify-between gap-ds-03 text-ds-sm",
+							children: [/* @__PURE__ */ i("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", {
+								className: "min-w-0 text-right text-surface-fg",
+								children: o(e.column.columnDef.cell, e.getContext())
+							})]
+						}, e.id);
+					})
+				})]
+			}, n.id);
+		})
+	}) : /* @__PURE__ */ i("div", {
+		className: e("py-ds-07 text-center", !u && "text-surface-fg-subtle"),
+		children: u || l || "No results."
+	});
 }
-export {
-  B as DataTableCards
-};
+//#endregion
+export { s as DataTableCards };

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-card.js","names":[],"sources":["../../src/ui/data-table-card.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { flexRender } from '@tanstack/react-table'\n\nimport { Checkbox } from './checkbox'\nimport { Skeleton } from './skeleton'\nimport { cn } from './lib/utils'\nimport { useDataTableContext } from './data-table-context'\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-ds-lg 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-ds-lg 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,wEACA,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"}

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

@@ -1,48 +1,45 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import a from "react";
-function f(e) {
-  if (!e) return "";
-  const 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(" ");
+import e from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/ui/data-table-context.tsx
+function n(e) {
+	if (!e) return "";
+	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(" ");
 }
-const d = {
-  compact: "py-ds-02",
-  standard: "py-ds-05",
-  comfortable: "py-ds-07"
-}, b = 'button, a, input, select, textarea, [role="checkbox"]', i = a.createContext(null);
-function h({
-  children: e,
-  value: t
-}) {
-  return /* @__PURE__ */ o(i.Provider, { value: t, children: e });
+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, {
+		value: n,
+		children: e
+	});
 }
-function x() {
-  const e = a.useContext(i);
-  if (!e) throw new Error("useDataTableContext must be used within DataTableProvider");
-  return e;
+function s() {
+	let t = e.useContext(a);
+	if (!t) throw Error("useDataTableContext must be used within DataTableProvider");
+	return t;
 }
-function g(e, t) {
-  const { left: s = [], right: n = [] } = t, r = s.indexOf(e), l = n.indexOf(e);
-  return r !== -1 ? {
-    className: "sticky bg-surface-base z-raised",
-    style: { left: 0 }
-  } : l !== -1 ? {
-    className: "sticky bg-surface-base z-raised",
-    style: { right: 0 }
-  } : { className: "", style: {} };
+function c(e, t) {
+	let { left: n = [], right: r = [] } = t, i = n.indexOf(e), a = r.indexOf(e);
+	return i === -1 ? a === -1 ? {
+		className: "",
+		style: {}
+	} : {
+		className: "sticky bg-surface-base z-raised",
+		style: { right: 0 }
+	} : {
+		className: "sticky bg-surface-base z-raised",
+		style: { left: 0 }
+	};
 }
-function p(e, t, s) {
-  if (!t || e === "_select" || e === "_expand") return !1;
-  const n = s.getColumn(e);
-  return !(!n || n.columnDef.meta?.enableEditing === !1);
+function l(e, t, n) {
+	if (!t || e === "_select" || e === "_expand") return !1;
+	let r = n.getColumn(e);
+	return !(!r || r.columnDef.meta?.enableEditing === !1);
 }
-export {
-  h as DataTableProvider,
-  b as INTERACTIVE_SELECTOR,
-  d as densityPaddingMap,
-  f as getColumnMetaClasses,
-  g as getPinnedCellStyle,
-  p as isColumnEditable,
-  x as useDataTableContext
-};
+//#endregion
+export { o as DataTableProvider, i as INTERACTIVE_SELECTOR, r as densityPaddingMap, n as getColumnMetaClasses, c as getPinnedCellStyle, l as isColumnEditable, s as useDataTableContext };

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-context.js","names":[],"sources":["../../src/ui/data-table-context.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { type ColumnPinningState, type Table } from '@tanstack/react-table'\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"}

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

@@ -1,141 +1,100 @@
 "use client";
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { flexRender as d } from "@tanstack/react-table";
-import { IconArrowUp as D, IconArrowDown as N, IconArrowsSort as C } from "@tabler/icons-react";
-import { Icon as s } from "./icon.js";
-import { TableHeader as S, TableRow as p, TableHead as f } from "./table.js";
-import { cn as a } from "./lib/utils.js";
-import { springs as i } from "./lib/motion.js";
-import { useDataTableContext as w, getPinnedCellStyle as H, getColumnMetaClasses as T } from "./data-table-context.js";
-import { A as I, m as c } from "../_chunks/framer.js";
-function R({ stickyHeader: g }) {
-  const { table: r, sortable: b, filterable: x, columnPinningState: y } = w();
-  return /* @__PURE__ */ u(
-    S,
-    {
-      className: a(
-        g && "sticky top-0 z-10 bg-surface-base"
-      ),
-      children: [
-        r.getHeaderGroups().map((n) => /* @__PURE__ */ t(p, { children: n.headers.map((e) => {
-          const o = b && e.column.getCanSort(), l = e.column.getIsSorted(), m = H(
-            e.column.id,
-            y
-          );
-          return /* @__PURE__ */ t(
-            f,
-            {
-              className: a(
-                m.className,
-                T(
-                  e.column.columnDef.meta
-                )
-              ),
-              style: m.style,
-              "aria-sort": o ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
-              children: e.isPlaceholder ? null : o ? /* @__PURE__ */ u(
-                "button",
-                {
-                  type: "button",
-                  className: a(
-                    "flex items-center gap-ds-01 font-medium",
-                    "cursor-pointer select-none",
-                    "-ml-ds-01 rounded-ds-sm px-ds-01 py-ds-01",
-                    "hover:bg-surface-raised transition-colors"
-                  ),
-                  onClick: e.column.getToggleSortingHandler(),
-                  "aria-label": `Sort by ${typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id}`,
-                  children: [
-                    d(
-                      e.column.columnDef.header,
-                      e.getContext()
-                    ),
-                    /* @__PURE__ */ t(I, { mode: "wait", initial: !1, children: l === "asc" ? /* @__PURE__ */ t(
-                      c.span,
-                      {
-                        initial: { opacity: 0, rotate: 90 },
-                        animate: { opacity: 1, rotate: 0 },
-                        exit: { opacity: 0, rotate: -90 },
-                        transition: i.snappy,
-                        className: "inline-flex",
-                        children: /* @__PURE__ */ t(
-                          s,
-                          {
-                            icon: D,
-                            size: "sm",
-                            className: "text-surface-fg-muted"
-                          }
-                        )
-                      },
-                      "asc"
-                    ) : l === "desc" ? /* @__PURE__ */ t(
-                      c.span,
-                      {
-                        initial: { opacity: 0, rotate: -90 },
-                        animate: { opacity: 1, rotate: 0 },
-                        exit: { opacity: 0, rotate: 90 },
-                        transition: i.snappy,
-                        className: "inline-flex",
-                        children: /* @__PURE__ */ t(
-                          s,
-                          {
-                            icon: N,
-                            size: "sm",
-                            className: "text-surface-fg-muted"
-                          }
-                        )
-                      },
-                      "desc"
-                    ) : /* @__PURE__ */ t(
-                      c.span,
-                      {
-                        initial: { opacity: 0 },
-                        animate: { opacity: 1 },
-                        exit: { opacity: 0 },
-                        transition: i.snappy,
-                        className: "inline-flex",
-                        children: /* @__PURE__ */ t(
-                          s,
-                          {
-                            icon: C,
-                            size: "sm",
-                            className: "text-surface-fg-subtle"
-                          }
-                        )
-                      },
-                      "unsorted"
-                    ) })
-                  ]
-                }
-              ) : d(
-                e.column.columnDef.header,
-                e.getContext()
-              )
-            },
-            e.id
-          );
-        }) }, n.id)),
-        x && r.getHeaderGroups().map((n) => /* @__PURE__ */ t(p, { children: n.headers.map((e) => /* @__PURE__ */ t(f, { className: "py-ds-01", children: e.isPlaceholder || e.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ t(
-          "input",
-          {
-            type: "text",
-            value: e.column.getFilterValue() ?? "",
-            onChange: (o) => e.column.setFilterValue(o.target.value),
-            placeholder: `Filter ${typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : ""}...`,
-            "aria-label": `Filter ${typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id}`,
-            className: a(
-              "h-ds-xs-plus w-full rounded-ds-md",
-              "border border-surface-border-strong bg-surface-raised-hover",
-              "px-ds-02 text-ds-sm",
-              "text-surface-fg placeholder:text-surface-fg-subtle",
-              "outline-hidden focus:border-accent-7"
-            )
-          }
-        ) }, `${e.id}-filter`)) }, `${n.id}-filters`))
-      ]
-    }
-  );
+import { a as e, c as t } from "../_chunks/framer.js";
+import { springs as n } from "./lib/motion.js";
+import { cn as r } from "./lib/utils.js";
+import { Icon as i } from "./icon.js";
+import { TableHead as a, TableHeader as o, TableRow as s } from "./table.js";
+import { getColumnMetaClasses as c, getPinnedCellStyle as l, useDataTableContext as u } from "./data-table-context.js";
+import "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { IconArrowDown as p, IconArrowUp as m, IconArrowsSort as h } from "@tabler/icons-react";
+import { flexRender as g } from "@tanstack/react-table";
+//#region src/ui/data-table-header.tsx
+function _({ stickyHeader: _ }) {
+	let { table: v, sortable: y, filterable: b, columnPinningState: x } = u();
+	return /* @__PURE__ */ f(o, {
+		className: r(_ && "sticky top-0 z-10 bg-surface-base"),
+		children: [v.getHeaderGroups().map((o) => /* @__PURE__ */ d(s, { children: o.headers.map((o) => {
+			let s = y && o.column.getCanSort(), u = o.column.getIsSorted(), _ = l(o.column.id, x);
+			return /* @__PURE__ */ d(a, {
+				className: r(_.className, c(o.column.columnDef.meta)),
+				style: _.style,
+				"aria-sort": s ? u === "asc" ? "ascending" : u === "desc" ? "descending" : "none" : void 0,
+				children: o.isPlaceholder ? null : s ? /* @__PURE__ */ f("button", {
+					type: "button",
+					className: r("flex items-center gap-ds-01 font-medium", "cursor-pointer select-none", "-ml-ds-01 rounded-ds-sm px-ds-01 py-ds-01", "hover:bg-surface-raised transition-colors"),
+					onClick: o.column.getToggleSortingHandler(),
+					"aria-label": `Sort by ${typeof o.column.columnDef.header == "string" ? o.column.columnDef.header : o.column.id}`,
+					children: [g(o.column.columnDef.header, o.getContext()), /* @__PURE__ */ d(t, {
+						mode: "wait",
+						initial: !1,
+						children: u === "asc" ? /* @__PURE__ */ d(e.span, {
+							initial: {
+								opacity: 0,
+								rotate: 90
+							},
+							animate: {
+								opacity: 1,
+								rotate: 0
+							},
+							exit: {
+								opacity: 0,
+								rotate: -90
+							},
+							transition: n.snappy,
+							className: "inline-flex",
+							children: /* @__PURE__ */ d(i, {
+								icon: m,
+								size: "sm",
+								className: "text-surface-fg-muted"
+							})
+						}, "asc") : u === "desc" ? /* @__PURE__ */ d(e.span, {
+							initial: {
+								opacity: 0,
+								rotate: -90
+							},
+							animate: {
+								opacity: 1,
+								rotate: 0
+							},
+							exit: {
+								opacity: 0,
+								rotate: 90
+							},
+							transition: n.snappy,
+							className: "inline-flex",
+							children: /* @__PURE__ */ d(i, {
+								icon: p,
+								size: "sm",
+								className: "text-surface-fg-muted"
+							})
+						}, "desc") : /* @__PURE__ */ d(e.span, {
+							initial: { opacity: 0 },
+							animate: { opacity: 1 },
+							exit: { opacity: 0 },
+							transition: n.snappy,
+							className: "inline-flex",
+							children: /* @__PURE__ */ d(i, {
+								icon: h,
+								size: "sm",
+								className: "text-surface-fg-subtle"
+							})
+						}, "unsorted")
+					})]
+				}) : g(o.column.columnDef.header, o.getContext())
+			}, o.id);
+		}) }, o.id)), b && v.getHeaderGroups().map((e) => /* @__PURE__ */ d(s, { children: e.headers.map((e) => /* @__PURE__ */ d(a, {
+			className: "py-ds-01",
+			children: e.isPlaceholder || e.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ d("input", {
+				type: "text",
+				value: e.column.getFilterValue() ?? "",
+				onChange: (t) => e.column.setFilterValue(t.target.value),
+				placeholder: `Filter ${typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : ""}...`,
+				"aria-label": `Filter ${typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id}`,
+				className: r("h-ds-xs-plus w-full rounded-ds-md", "border border-surface-border-strong bg-surface-raised-hover", "px-ds-02 text-ds-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7")
+			})
+		}, `${e.id}-filter`)) }, `${e.id}-filters`))]
+	});
 }
-export {
-  R as DataTableHeader
-};
+//#endregion
+export { _ as DataTableHeader };

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-header.js","names":[],"sources":["../../src/ui/data-table-header.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { flexRender } from '@tanstack/react-table'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport {\n  IconArrowDown,\n  IconArrowUp,\n  IconArrowsSort,\n} from '@tabler/icons-react'\n\nimport { Icon } from './icon'\nimport { TableHead, TableHeader, TableRow } from './table'\nimport { cn } from './lib/utils'\nimport { springs } from './lib/motion'\nimport {\n  useDataTableContext,\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n} from './data-table-context'\n\n/**\n * Renders the `<TableHeader>` block including sortable column headers\n * and optional per-column filter inputs. Internal — not exported to consumers.\n */\nfunction DataTableHeaderImpl({ stickyHeader }: { stickyHeader?: boolean }) {\n  const { table, sortable, filterable, columnPinningState } =\n    useDataTableContext()\n\n  return (\n    <TableHeader\n      className={cn(\n        stickyHeader && 'sticky top-0 z-10 bg-surface-base',\n      )}\n    >\n      {table.getHeaderGroups().map((headerGroup) => (\n        <TableRow key={headerGroup.id}>\n          {headerGroup.headers.map((header) => {\n            const canSort = sortable && header.column.getCanSort()\n            const sorted = header.column.getIsSorted()\n            const pinned = getPinnedCellStyle(\n              header.column.id,\n              columnPinningState,\n            )\n\n            return (\n              <TableHead\n                key={header.id}\n                className={cn(\n                  pinned.className,\n                  getColumnMetaClasses(\n                    header.column.columnDef.meta as Record<string, unknown>,\n                  ),\n                )}\n                style={pinned.style}\n                aria-sort={\n                  canSort\n                    ? sorted === 'asc'\n                      ? 'ascending'\n                      : sorted === 'desc'\n                        ? 'descending'\n                        : 'none'\n                    : undefined\n                }\n              >\n                {header.isPlaceholder ? null : canSort ? (\n                  <button\n                    type=\"button\"\n                    className={cn(\n                      'flex items-center gap-ds-01 font-medium',\n                      'cursor-pointer select-none',\n                      '-ml-ds-01 rounded-ds-sm px-ds-01 py-ds-01',\n                      'hover:bg-surface-raised transition-colors',\n                    )}\n                    onClick={header.column.getToggleSortingHandler()}\n                    aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id}`}\n                  >\n                    {flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )}\n                    <AnimatePresence mode=\"wait\" initial={false}>\n                      {sorted === 'asc' ? (\n                        <motion.span\n                          key=\"asc\"\n                          initial={{ opacity: 0, rotate: 90 }}\n                          animate={{ opacity: 1, rotate: 0 }}\n                          exit={{ opacity: 0, rotate: -90 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowUp}\n                            size=\"sm\"\n                            className=\"text-surface-fg-muted\"\n                          />\n                        </motion.span>\n                      ) : sorted === 'desc' ? (\n                        <motion.span\n                          key=\"desc\"\n                          initial={{ opacity: 0, rotate: -90 }}\n                          animate={{ opacity: 1, rotate: 0 }}\n                          exit={{ opacity: 0, rotate: 90 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowDown}\n                            size=\"sm\"\n                            className=\"text-surface-fg-muted\"\n                          />\n                        </motion.span>\n                      ) : (\n                        <motion.span\n                          key=\"unsorted\"\n                          initial={{ opacity: 0 }}\n                          animate={{ opacity: 1 }}\n                          exit={{ opacity: 0 }}\n                          transition={springs.snappy}\n                          className=\"inline-flex\"\n                        >\n                          <Icon\n                            icon={IconArrowsSort}\n                            size=\"sm\"\n                            className=\"text-surface-fg-subtle\"\n                          />\n                        </motion.span>\n                      )}\n                    </AnimatePresence>\n                  </button>\n                ) : (\n                  flexRender(\n                    header.column.columnDef.header,\n                    header.getContext(),\n                  )\n                )}\n              </TableHead>\n            )\n          })}\n        </TableRow>\n      ))}\n\n      {/* Column filter row */}\n      {filterable &&\n        table.getHeaderGroups().map((headerGroup) => (\n          <TableRow key={`${headerGroup.id}-filters`}>\n            {headerGroup.headers.map((header) => (\n              <TableHead key={`${header.id}-filter`} className=\"py-ds-01\">\n                {header.isPlaceholder ||\n                header.column.columnDef.enableColumnFilter === false ? null : (\n                  <input\n                    type=\"text\"\n                    value={\n                      (header.column.getFilterValue() as string) ?? ''\n                    }\n                    onChange={(e) =>\n                      header.column.setFilterValue(e.target.value)\n                    }\n                    placeholder={`Filter ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : ''}...`}\n                    aria-label={`Filter ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.column.id}`}\n                    className={cn(\n                      'h-ds-xs-plus w-full rounded-ds-md',\n                      'border border-surface-border-strong 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                  />\n                )}\n              </TableHead>\n            ))}\n          </TableRow>\n        ))}\n    </TableHeader>\n  )\n}\n\nexport { DataTableHeaderImpl as DataTableHeader }\n"],"mappings":"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"}