@devalok/shilp-sutra 0.36.1 → 0.37.0-next.1

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 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"}
+{"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"}

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

@@ -1,34 +1,34 @@
 "use client";
-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 { springs as e } from "./lib/motion.js";
+import { cn as t } from "./lib/utils.js";
+import { Icon as n } from "./icon.js";
+import { getColumnMetaClasses as r, getPinnedCellStyle as i, useDataTableContext as a } from "./data-table-context.js";
+import { TableHead as o, TableHeader as s, TableRow as c } from "./table.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 { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { IconArrowDown as d, IconArrowUp as f, IconArrowsSort as p } from "@tabler/icons-react";
+import { AnimatePresence as m, motion as h } from "framer-motion";
 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)),
+	let { table: v, sortable: y, filterable: b, columnPinningState: x } = a();
+	return /* @__PURE__ */ u(s, {
+		className: t(_ && "sticky top-0 z-10 bg-surface-base"),
+		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, {
+				className: t(_.className, r(a.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", {
+				"aria-sort": s ? c === "asc" ? "ascending" : c === "desc" ? "descending" : "none" : void 0,
+				children: a.isPlaceholder ? null : s ? /* @__PURE__ */ u("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, {
+					className: t("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: 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, {
 						mode: "wait",
 						initial: !1,
-						children: u === "asc" ? /* @__PURE__ */ d(e.span, {
+						children: c === "asc" ? /* @__PURE__ */ l(h.span, {
 							initial: {
 								opacity: 0,
 								rotate: 90
@@ -41,14 +41,14 @@ function _({ stickyHeader: _ }) {
 								opacity: 0,
 								rotate: -90
 							},
-							transition: n.snappy,
+							transition: e.snappy,
 							className: "inline-flex",
-							children: /* @__PURE__ */ d(i, {
-								icon: m,
+							children: /* @__PURE__ */ l(n, {
+								icon: f,
 								size: "sm",
 								className: "text-surface-fg-muted"
 							})
-						}, "asc") : u === "desc" ? /* @__PURE__ */ d(e.span, {
+						}, "asc") : c === "desc" ? /* @__PURE__ */ l(h.span, {
 							initial: {
 								opacity: 0,
 								rotate: -90
@@ -61,37 +61,37 @@ function _({ stickyHeader: _ }) {
 								opacity: 0,
 								rotate: 90
 							},
-							transition: n.snappy,
+							transition: e.snappy,
 							className: "inline-flex",
-							children: /* @__PURE__ */ d(i, {
-								icon: p,
+							children: /* @__PURE__ */ l(n, {
+								icon: d,
 								size: "sm",
 								className: "text-surface-fg-muted"
 							})
-						}, "desc") : /* @__PURE__ */ d(e.span, {
+						}, "desc") : /* @__PURE__ */ l(h.span, {
 							initial: { opacity: 0 },
 							animate: { opacity: 1 },
 							exit: { opacity: 0 },
-							transition: n.snappy,
+							transition: e.snappy,
 							className: "inline-flex",
-							children: /* @__PURE__ */ d(i, {
-								icon: h,
+							children: /* @__PURE__ */ l(n, {
+								icon: p,
 								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, {
+				}) : g(a.column.columnDef.header, a.getContext())
+			}, a.id);
+		}) }, a.id)), b && v.getHeaderGroups().map((e) => /* @__PURE__ */ l(c, { children: e.headers.map((e) => /* @__PURE__ */ l(o, {
 			className: "py-ds-01",
-			children: e.isPlaceholder || e.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ d("input", {
+			children: e.isPlaceholder || e.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ l("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")
+				className: t("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`))]
 	});

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

@@ -1 +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":";;;;;;;;;;;;AAyBA,SAAS,EAAoB,EAAE,mBAA4C;CACzE,IAAM,EAAE,UAAO,aAAU,eAAY,0BACnC,GAAqB;AAEvB,QACE,kBAAC,GAAD;EACE,WAAW,EACT,KAAgB,oCACjB;YAHH,CAKG,EAAM,iBAAiB,CAAC,KAAK,MAC5B,kBAAC,GAAD,EAAA,UACG,EAAY,QAAQ,KAAK,MAAW;GACnC,IAAM,IAAU,KAAY,EAAO,OAAO,YAAY,EAChD,IAAS,EAAO,OAAO,aAAa,EACpC,IAAS,EACb,EAAO,OAAO,IACd,EACD;AAED,UACE,kBAAC,GAAD;IAEE,WAAW,EACT,EAAO,WACP,EACE,EAAO,OAAO,UAAU,KACzB,CACF;IACD,OAAO,EAAO;IACd,aACE,IACI,MAAW,QACT,cACA,MAAW,SACT,eACA,SACJ,KAAA;cAGL,EAAO,gBAAgB,OAAO,IAC7B,kBAAC,UAAD;KACE,MAAK;KACL,WAAW,EACT,2CACA,8BACA,6CACA,4CACD;KACD,SAAS,EAAO,OAAO,yBAAyB;KAChD,cAAY,WAAW,OAAO,EAAO,OAAO,UAAU,UAAW,WAAW,EAAO,OAAO,UAAU,SAAS,EAAO,OAAO;eAT7H,CAWG,EACC,EAAO,OAAO,UAAU,QACxB,EAAO,YAAY,CACpB,EACD,kBAAC,GAAD;MAAiB,MAAK;MAAO,SAAS;gBACnC,MAAW,QACV,kBAAC,EAAO,MAAR;OAEE,SAAS;QAAE,SAAS;QAAG,QAAQ;QAAI;OACnC,SAAS;QAAE,SAAS;QAAG,QAAQ;QAAG;OAClC,MAAM;QAAE,SAAS;QAAG,QAAQ;QAAK;OACjC,YAAY,EAAQ;OACpB,WAAU;iBAEV,kBAAC,GAAD;QACE,MAAM;QACN,MAAK;QACL,WAAU;QACV,CAAA;OACU,EAZR,MAYQ,GACZ,MAAW,SACb,kBAAC,EAAO,MAAR;OAEE,SAAS;QAAE,SAAS;QAAG,QAAQ;QAAK;OACpC,SAAS;QAAE,SAAS;QAAG,QAAQ;QAAG;OAClC,MAAM;QAAE,SAAS;QAAG,QAAQ;QAAI;OAChC,YAAY,EAAQ;OACpB,WAAU;iBAEV,kBAAC,GAAD;QACE,MAAM;QACN,MAAK;QACL,WAAU;QACV,CAAA;OACU,EAZR,OAYQ,GAEd,kBAAC,EAAO,MAAR;OAEE,SAAS,EAAE,SAAS,GAAG;OACvB,SAAS,EAAE,SAAS,GAAG;OACvB,MAAM,EAAE,SAAS,GAAG;OACpB,YAAY,EAAQ;OACpB,WAAU;iBAEV,kBAAC,GAAD;QACE,MAAM;QACN,MAAK;QACL,WAAU;QACV,CAAA;OACU,EAZR,WAYQ;MAEA,CAAA,CACX;SAET,EACE,EAAO,OAAO,UAAU,QACxB,EAAO,YAAY,CACpB;IAEO,EAzFL,EAAO,GAyFF;IAEd,EACO,EAvGI,EAAY,GAuGhB,CACX,EAGD,KACC,EAAM,iBAAiB,CAAC,KAAK,MAC3B,kBAAC,GAAD,EAAA,UACG,EAAY,QAAQ,KAAK,MACxB,kBAAC,GAAD;GAAuC,WAAU;aAC9C,EAAO,iBACR,EAAO,OAAO,UAAU,uBAAuB,KAAQ,OACrD,kBAAC,SAAD;IACE,MAAK;IACL,OACG,EAAO,OAAO,gBAAgB,IAAe;IAEhD,WAAW,MACT,EAAO,OAAO,eAAe,EAAE,OAAO,MAAM;IAE9C,aAAa,UAAU,OAAO,EAAO,OAAO,UAAU,UAAW,WAAW,EAAO,OAAO,UAAU,SAAS,GAAG;IAChH,cAAY,UAAU,OAAO,EAAO,OAAO,UAAU,UAAW,WAAW,EAAO,OAAO,UAAU,SAAS,EAAO,OAAO;IAC1H,WAAW,EACT,qCACA,+DACA,uBACA,sDACA,uCACD;IACD,CAAA;GAEM,EAtBI,GAAG,EAAO,GAAG,SAsBjB,CACZ,EACO,EA1BI,GAAG,EAAY,GAAG,UA0BtB,CACX,CACQ"}
+{"version":3,"file":"data-table-header.js","names":[],"sources":["../../src/ui/data-table-header.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconArrowDown,\n  IconArrowsSort,\n  IconArrowUp,\n} from '@tabler/icons-react'\nimport { flexRender } from '@tanstack/react-table'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport React from 'react'\n\nimport {\n  getColumnMetaClasses,\n  getPinnedCellStyle,\n  useDataTableContext,\n} from './data-table-context'\nimport { Icon } from './icon'\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { TableHead, TableHeader, TableRow } from './table'\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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-pagination.js","names":[],"sources":["../../src/ui/data-table-pagination.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\nimport { type Table } from '@tanstack/react-table'\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'\n\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n/**\n * Pagination controls: page size selector, prev/next buttons, page info.\n * Internal — not exported to consumers.\n */\nexport function DataTablePagination<TData>({\n  table,\n  totalRowCount,\n  useServerPagination,\n  pageSizeOptions,\n}: {\n  table: Table<TData>\n  totalRowCount: number\n  useServerPagination: boolean\n  pageSizeOptions?: number[]\n}) {\n  return (\n    <div className=\"flex items-center justify-between px-ds-03 py-ds-04 border-t border-surface-border\">\n      <span className=\"text-ds-sm text-surface-fg-muted\">\n        {totalRowCount} total rows\n      </span>\n      <div className=\"flex items-center gap-ds-03\">\n        {/* Page size selector */}\n        {!useServerPagination && (\n          <select\n            value={table.getState().pagination.pageSize}\n            onChange={(e) => {\n              table.setPageSize(Number(e.target.value))\n            }}\n            aria-label=\"Rows per page\"\n            className={cn(\n              'h-ds-sm rounded-ds-md',\n              'border border-surface-border-strong bg-surface-raised-hover',\n              'px-ds-03 text-ds-sm',\n              'text-surface-fg',\n            )}\n          >\n            {(pageSizeOptions ?? [10, 20, 50, 100]).map((size) => (\n              <option key={size} value={size}>\n                {size} rows\n              </option>\n            ))}\n          </select>\n        )}\n\n        {/* Previous page button */}\n        <button\n          type=\"button\"\n          disabled={!table.getCanPreviousPage()}\n          onClick={() => table.previousPage()}\n          aria-label=\"Previous page\"\n          className={cn(\n            'h-ds-sm w-ds-sm flex items-center justify-center',\n            'rounded-ds-md border border-surface-border-strong',\n            'enabled:hover:bg-surface-raised',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            'transition-colors',\n          )}\n        >\n          <Icon icon={IconChevronLeft} size=\"sm\" />\n        </button>\n\n        {/* Page info */}\n        <span className=\"text-ds-sm text-surface-fg-muted\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\n        </span>\n\n        {/* Next page button */}\n        <button\n          type=\"button\"\n          disabled={!table.getCanNextPage()}\n          onClick={() => table.nextPage()}\n          aria-label=\"Next page\"\n          className={cn(\n            'h-ds-sm w-ds-sm flex items-center justify-center',\n            'rounded-ds-md border border-surface-border-strong',\n            'enabled:hover:bg-surface-raised',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            'transition-colors',\n          )}\n        >\n          <Icon icon={IconChevronRight} size=\"sm\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,EAA2B,EACzC,UACA,kBACA,wBACA,sBAMC;AACD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,GAAc,cACV;MACP,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEG,CAAC,KACA,kBAAC,UAAD;KACE,OAAO,EAAM,UAAU,CAAC,WAAW;KACnC,WAAW,MAAM;AACf,QAAM,YAAY,OAAO,EAAE,OAAO,MAAM,CAAC;;KAE3C,cAAW;KACX,WAAW,EACT,yBACA,+DACA,uBACA,kBACD;gBAEC,KAAmB;MAAC;MAAI;MAAI;MAAI;MAAI,EAAE,KAAK,MAC3C,kBAAC,UAAD;MAAmB,OAAO;gBAA1B,CACG,GAAK,QACC;QAFI,EAEJ,CACT;KACK,CAAA;IAIX,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,oBAAoB;KACrC,eAAe,EAAM,cAAc;KACnC,cAAW;KACX,WAAW,EACT,oDACA,qDACA,mCACA,gEACA,oBACD;eAED,kBAAC,GAAD;MAAM,MAAM;MAAiB,MAAK;MAAO,CAAA;KAClC,CAAA;IAGT,kBAAC,QAAD;KAAM,WAAU;eAAhB;MAAmD;MAC3C,EAAM,UAAU,CAAC,WAAW,YAAY;MAAE;MAAI;MACnD,EAAM,cAAc;MAChB;;IAGP,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,gBAAgB;KACjC,eAAe,EAAM,UAAU;KAC/B,cAAW;KACX,WAAW,EACT,oDACA,qDACA,mCACA,gEACA,oBACD;eAED,kBAAC,GAAD;MAAM,MAAM;MAAkB,MAAK;MAAO,CAAA;KACnC,CAAA;IACL;KACF"}
+{"version":3,"file":"data-table-pagination.js","names":[],"sources":["../../src/ui/data-table-pagination.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'\nimport { type Table } from '@tanstack/react-table'\nimport React from 'react'\n\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\n/**\n * Pagination controls: page size selector, prev/next buttons, page info.\n * Internal — not exported to consumers.\n */\nexport function DataTablePagination<TData>({\n  table,\n  totalRowCount,\n  useServerPagination,\n  pageSizeOptions,\n}: {\n  table: Table<TData>\n  totalRowCount: number\n  useServerPagination: boolean\n  pageSizeOptions?: number[]\n}) {\n  return (\n    <div className=\"flex items-center justify-between px-ds-03 py-ds-04 border-t border-surface-border\">\n      <span className=\"text-ds-sm text-surface-fg-muted\">\n        {totalRowCount} total rows\n      </span>\n      <div className=\"flex items-center gap-ds-03\">\n        {/* Page size selector */}\n        {!useServerPagination && (\n          <select\n            value={table.getState().pagination.pageSize}\n            onChange={(e) => {\n              table.setPageSize(Number(e.target.value))\n            }}\n            aria-label=\"Rows per page\"\n            className={cn(\n              'h-ds-sm rounded-ds-md',\n              'border border-surface-border-strong bg-surface-raised-hover',\n              'px-ds-03 text-ds-sm',\n              'text-surface-fg',\n            )}\n          >\n            {(pageSizeOptions ?? [10, 20, 50, 100]).map((size) => (\n              <option key={size} value={size}>\n                {size} rows\n              </option>\n            ))}\n          </select>\n        )}\n\n        {/* Previous page button */}\n        <button\n          type=\"button\"\n          disabled={!table.getCanPreviousPage()}\n          onClick={() => table.previousPage()}\n          aria-label=\"Previous page\"\n          className={cn(\n            'h-ds-sm w-ds-sm flex items-center justify-center',\n            'rounded-ds-md border border-surface-border-strong',\n            'enabled:hover:bg-surface-raised',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            'transition-colors',\n          )}\n        >\n          <Icon icon={IconChevronLeft} size=\"sm\" />\n        </button>\n\n        {/* Page info */}\n        <span className=\"text-ds-sm text-surface-fg-muted\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\n        </span>\n\n        {/* Next page button */}\n        <button\n          type=\"button\"\n          disabled={!table.getCanNextPage()}\n          onClick={() => table.nextPage()}\n          aria-label=\"Next page\"\n          className={cn(\n            'h-ds-sm w-ds-sm flex items-center justify-center',\n            'rounded-ds-md border border-surface-border-strong',\n            'enabled:hover:bg-surface-raised',\n            'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n            'transition-colors',\n          )}\n        >\n          <Icon icon={IconChevronRight} size=\"sm\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,EAA2B,EACzC,UACA,kBACA,wBACA,sBAMC;AACD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,GAAc,cACV;MACP,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEG,CAAC,KACA,kBAAC,UAAD;KACE,OAAO,EAAM,UAAU,CAAC,WAAW;KACnC,WAAW,MAAM;AACf,QAAM,YAAY,OAAO,EAAE,OAAO,MAAM,CAAC;;KAE3C,cAAW;KACX,WAAW,EACT,yBACA,+DACA,uBACA,kBACD;gBAEC,KAAmB;MAAC;MAAI;MAAI;MAAI;MAAI,EAAE,KAAK,MAC3C,kBAAC,UAAD;MAAmB,OAAO;gBAA1B,CACG,GAAK,QACC;QAFI,EAEJ,CACT;KACK,CAAA;IAIX,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,oBAAoB;KACrC,eAAe,EAAM,cAAc;KACnC,cAAW;KACX,WAAW,EACT,oDACA,qDACA,mCACA,gEACA,oBACD;eAED,kBAAC,GAAD;MAAM,MAAM;MAAiB,MAAK;MAAO,CAAA;KAClC,CAAA;IAGT,kBAAC,QAAD;KAAM,WAAU;eAAhB;MAAmD;MAC3C,EAAM,UAAU,CAAC,WAAW,YAAY;MAAE;MAAI;MACnD,EAAM,cAAc;MAChB;;IAGP,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,gBAAgB;KACjC,eAAe,EAAM,UAAU;KAC/B,cAAW;KACX,WAAW,EACT,oDACA,qDACA,mCACA,gEACA,oBACD;eAED,kBAAC,GAAD;MAAM,MAAM;MAAkB,MAAK;MAAO,CAAA;KACnC,CAAA;IACL;KACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAkBlD,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAA;AAc5D,MAAM,WAAW,qBAAqB,CAAC,KAAK,CAAE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC1G,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAgDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,KAAK,EACL,YAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,OAAO,EACP,eAAe,EACf,YAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,KAAK,CAAC,2CA2F9B;yBArGe,gBAAgB"}
+{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-toolbar.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,CAAA;AAc5D,MAAM,WAAW,qBAAqB,CAAC,KAAK,CAAE,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC1G,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAgDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,KAAK,EACL,YAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,OAAO,EACP,eAAe,EACf,YAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,KAAK,CAAC,2CA2F9B;yBArGe,gBAAgB"}

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-toolbar.js","names":[],"sources":["../../src/ui/data-table-toolbar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { type Table } from '@tanstack/react-table'\nimport {\n  IconSearch,\n  IconColumns3,\n  IconTextResize,\n  IconDownload,\n} from '@tabler/icons-react'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuCheckboxItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} from './dropdown-menu'\nimport { cn } from './lib/utils'\nimport { Icon } from './icon'\n\nexport type Density = 'compact' | 'standard' | 'comfortable'\n\nconst densityLabels: Record<Density, string> = {\n  compact: 'Compact',\n  standard: 'Standard',\n  comfortable: 'Comfortable',\n}\n\nconst densityCycle: Record<Density, Density> = {\n  compact: 'standard',\n  standard: 'comfortable',\n  comfortable: 'compact',\n}\n\nexport interface DataTableToolbarProps<TData> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  table: Table<TData>\n  globalFilter?: boolean\n  globalFilterValue: string\n  onGlobalFilterChange: (value: string) => void\n  density: Density\n  onDensityChange: (density: Density) => void\n  enableExport?: boolean\n}\n\nconst toolbarButtonClass = cn(\n  'h-ds-sm px-ds-03 rounded-ds-md',\n  'border border-surface-border-strong',\n  'hover:bg-surface-raised',\n  'text-ds-sm flex items-center gap-ds-02 transition-colors',\n)\n\nconst toolbarIconClass = 'text-surface-fg-subtle'\n\nfunction exportToCsv<TData>(table: Table<TData>) {\n  const headers = table\n    .getAllLeafColumns()\n    .filter((col) => col.getIsVisible() && col.id !== '_select')\n    .map((col) => {\n      const header = col.columnDef.header\n      return typeof header === 'string' ? header : col.id\n    })\n\n  const rows = table.getFilteredRowModel().rows.map((row) =>\n    table\n      .getAllLeafColumns()\n      .filter((col) => col.getIsVisible() && col.id !== '_select')\n      .map((col) => {\n        const value = row.getValue(col.id)\n        const str = String(value ?? '')\n        // Escape CSV: wrap in quotes if it contains comma, quote, or newline\n        if (str.includes(',') || str.includes('\"') || str.includes('\\n')) {\n          return `\"${str.replace(/\"/g, '\"\"')}\"`\n        }\n        return str\n      }),\n  )\n\n  const csvContent = [headers.join(','), ...rows.map((r) => r.join(','))].join(\n    '\\n',\n  )\n\n  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })\n  const url = URL.createObjectURL(blob)\n  const link = document.createElement('a')\n  link.href = url\n  link.download = 'table-export.csv'\n  link.click()\n  URL.revokeObjectURL(url)\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  globalFilter = false,\n  globalFilterValue,\n  onGlobalFilterChange,\n  density,\n  onDensityChange,\n  enableExport = true,\n  className,\n  ...props\n}: DataTableToolbarProps<TData>) {\n  const toggleableColumns = table\n    .getAllColumns()\n    .filter((col) => col.getCanHide() && col.id !== '_select')\n\n  return (\n    <div className={cn('flex items-center gap-ds-03 pb-ds-04', className)} {...props}>\n      {/* Global search */}\n      {globalFilter && (\n        <div className=\"flex flex-1 items-center gap-ds-02\">\n          <Icon icon={IconSearch} size=\"sm\" className={toolbarIconClass} />\n          <input\n            type=\"text\"\n            value={globalFilterValue}\n            onChange={(e) => onGlobalFilterChange(e.target.value)}\n            placeholder=\"Search all columns...\"\n            aria-label=\"Search all columns\"\n            className={cn(\n              'flex-1 bg-transparent text-ds-md',\n              'text-surface-fg placeholder:text-surface-fg-subtle',\n              'outline-hidden',\n              'h-ds-sm',\n            )}\n          />\n        </div>\n      )}\n\n      <div className=\"ml-auto flex items-center gap-ds-03\">\n        {/* Column visibility dropdown */}\n        {toggleableColumns.length > 0 && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <button\n                type=\"button\"\n                className={toolbarButtonClass}\n                aria-label=\"Toggle column visibility\"\n              >\n                <Icon icon={IconColumns3} size=\"sm\" className={toolbarIconClass} />\n                Columns\n              </button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-40\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {toggleableColumns.map((column) => {\n                const headerDef = column.columnDef.header\n                const label =\n                  typeof headerDef === 'string' ? headerDef : column.id\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {label}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n\n        {/* Density toggle */}\n        <button\n          type=\"button\"\n          className={toolbarButtonClass}\n          onClick={() => onDensityChange(densityCycle[density])}\n          aria-label={`Table density: ${densityLabels[density]}. Click to change.`}\n          title={`Density: ${densityLabels[density]}`}\n        >\n          <Icon icon={IconTextResize} size=\"sm\" className={toolbarIconClass} />\n          {densityLabels[density]}\n        </button>\n\n        {/* CSV Export */}\n        {enableExport && (\n          <button\n            type=\"button\"\n            className={toolbarButtonClass}\n            onClick={() => exportToCsv(table)}\n            aria-label=\"Export table as CSV\"\n          >\n            <Icon icon={IconDownload} size=\"sm\" className={toolbarIconClass} />\n            Export\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\nDataTableToolbar.displayName = 'DataTableToolbar'\n"],"mappings":"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"}
+{"version":3,"file":"data-table-toolbar.js","names":[],"sources":["../../src/ui/data-table-toolbar.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconColumns3,\n  IconDownload,\n  IconSearch,\n  IconTextResize,\n} from '@tabler/icons-react'\nimport { type Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from './dropdown-menu'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\n\nexport type Density = 'compact' | 'standard' | 'comfortable'\n\nconst densityLabels: Record<Density, string> = {\n  compact: 'Compact',\n  standard: 'Standard',\n  comfortable: 'Comfortable',\n}\n\nconst densityCycle: Record<Density, Density> = {\n  compact: 'standard',\n  standard: 'comfortable',\n  comfortable: 'compact',\n}\n\nexport interface DataTableToolbarProps<TData> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  table: Table<TData>\n  globalFilter?: boolean\n  globalFilterValue: string\n  onGlobalFilterChange: (value: string) => void\n  density: Density\n  onDensityChange: (density: Density) => void\n  enableExport?: boolean\n}\n\nconst toolbarButtonClass = cn(\n  'h-ds-sm px-ds-03 rounded-ds-md',\n  'border border-surface-border-strong',\n  'hover:bg-surface-raised',\n  'text-ds-sm flex items-center gap-ds-02 transition-colors',\n)\n\nconst toolbarIconClass = 'text-surface-fg-subtle'\n\nfunction exportToCsv<TData>(table: Table<TData>) {\n  const headers = table\n    .getAllLeafColumns()\n    .filter((col) => col.getIsVisible() && col.id !== '_select')\n    .map((col) => {\n      const header = col.columnDef.header\n      return typeof header === 'string' ? header : col.id\n    })\n\n  const rows = table.getFilteredRowModel().rows.map((row) =>\n    table\n      .getAllLeafColumns()\n      .filter((col) => col.getIsVisible() && col.id !== '_select')\n      .map((col) => {\n        const value = row.getValue(col.id)\n        const str = String(value ?? '')\n        // Escape CSV: wrap in quotes if it contains comma, quote, or newline\n        if (str.includes(',') || str.includes('\"') || str.includes('\\n')) {\n          return `\"${str.replace(/\"/g, '\"\"')}\"`\n        }\n        return str\n      }),\n  )\n\n  const csvContent = [headers.join(','), ...rows.map((r) => r.join(','))].join(\n    '\\n',\n  )\n\n  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })\n  const url = URL.createObjectURL(blob)\n  const link = document.createElement('a')\n  link.href = url\n  link.download = 'table-export.csv'\n  link.click()\n  URL.revokeObjectURL(url)\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  globalFilter = false,\n  globalFilterValue,\n  onGlobalFilterChange,\n  density,\n  onDensityChange,\n  enableExport = true,\n  className,\n  ...props\n}: DataTableToolbarProps<TData>) {\n  const toggleableColumns = table\n    .getAllColumns()\n    .filter((col) => col.getCanHide() && col.id !== '_select')\n\n  return (\n    <div className={cn('flex items-center gap-ds-03 pb-ds-04', className)} {...props}>\n      {/* Global search */}\n      {globalFilter && (\n        <div className=\"flex flex-1 items-center gap-ds-02\">\n          <Icon icon={IconSearch} size=\"sm\" className={toolbarIconClass} />\n          <input\n            type=\"text\"\n            value={globalFilterValue}\n            onChange={(e) => onGlobalFilterChange(e.target.value)}\n            placeholder=\"Search all columns...\"\n            aria-label=\"Search all columns\"\n            className={cn(\n              'flex-1 bg-transparent text-ds-md',\n              'text-surface-fg placeholder:text-surface-fg-subtle',\n              'outline-hidden',\n              'h-ds-sm',\n            )}\n          />\n        </div>\n      )}\n\n      <div className=\"ml-auto flex items-center gap-ds-03\">\n        {/* Column visibility dropdown */}\n        {toggleableColumns.length > 0 && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <button\n                type=\"button\"\n                className={toolbarButtonClass}\n                aria-label=\"Toggle column visibility\"\n              >\n                <Icon icon={IconColumns3} size=\"sm\" className={toolbarIconClass} />\n                Columns\n              </button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-40\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {toggleableColumns.map((column) => {\n                const headerDef = column.columnDef.header\n                const label =\n                  typeof headerDef === 'string' ? headerDef : column.id\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {label}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n\n        {/* Density toggle */}\n        <button\n          type=\"button\"\n          className={toolbarButtonClass}\n          onClick={() => onDensityChange(densityCycle[density])}\n          aria-label={`Table density: ${densityLabels[density]}. Click to change.`}\n          title={`Density: ${densityLabels[density]}`}\n        >\n          <Icon icon={IconTextResize} size=\"sm\" className={toolbarIconClass} />\n          {densityLabels[density]}\n        </button>\n\n        {/* CSV Export */}\n        {enableExport && (\n          <button\n            type=\"button\"\n            className={toolbarButtonClass}\n            onClick={() => exportToCsv(table)}\n            aria-label=\"Export table as CSV\"\n          >\n            <Icon icon={IconDownload} size=\"sm\" className={toolbarIconClass} />\n            Export\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\nDataTableToolbar.displayName = 'DataTableToolbar'\n"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 "use client";
-import { default as React } from 'react';
 import { ColumnDef, RowData } from '@tanstack/react-table';
-import { Density } from './data-table-toolbar';
+import { default as React } from 'react';
 import { BulkAction } from './data-table-bulk-actions';
+import { Density } from './data-table-toolbar';
 export type { BulkAction } from './data-table-bulk-actions';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/ui/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EACL,KAAK,SAAS,EAMd,KAAK,OAAO,EAYb,MAAM,uBAAuB,CAAA;AAQ9B,OAAO,EAAoB,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAUrE,OAAO,EAAwB,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAGjF,YAAY,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,QAAQ,uBAAuB,CAAC;IAErC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;QACnC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;KAC/B;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH;;;;GAIG;AACH,MAAM,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM;IAC3C,mDAAmD;IACnD,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAA;IACnC,eAAe;IACf,IAAI,EAAE,KAAK,EAAE,CAAA;IACb,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8EAA8E;IAC9E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;IACnD,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2CAA2C;IAC3C,aAAa,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAGrD,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAGzE,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA;IAGhD,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAGlB,gGAAgG;IAChG,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,KAAK,IAAI,CAAA;IAGjE,6EAA6E;IAC7E,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAG5B,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAA;IAGjB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAA;IAC1C,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAA;IAGjC,0EAA0E;IAC1E,UAAU,CAAC,EAAE;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,QAAQ,EAAE,MAAM,CAAA;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;KACrC,CAAA;IAGD,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAA;IAGtB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAA;IAGtB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAGjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,CAAA;IAGjC,4FAA4F;IAC5F,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,EACvC,OAAO,EACP,IAAI,EACJ,SAAS,EACT,aAAa,EACb,QAAgB,EAChB,UAAkB,EAClB,YAAoB,EACpB,SAAiB,EACjB,QAAQ,EAAE,eAAe,EACzB,eAAe,EACf,UAAkB,EAClB,iBAAiB,EACjB,OAAe,EACf,OAAO,EAAE,cAA2B,EACpC,aAAa,EAAE,oBAAoB,EACnC,QAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,cAAc,EACd,WAAmB,EACnB,gBAAqB,EACrB,SAAe,EACf,MAAM,EACN,UAAU,EACV,OAAe,EACf,WAAW,EACX,gBAAgB,EAChB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,gBAAgB,EAC5B,YAAoB,EACpB,YAAoB,EACpB,UAAU,EACV,WAAW,EACX,UAAoB,GACrB,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,2CA4b/B;yBA/de,SAAS"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/ui/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/ui/data-table.js

@@ -2,8 +2,8 @@
 import { cn as e } from "./lib/utils.js";
 import { Icon as t } from "./icon.js";
 import { Checkbox as n } from "./checkbox.js";
-import { Table as r } from "./table.js";
-import { DataTableProvider as i, densityPaddingMap as ee } from "./data-table-context.js";
+import { DataTableProvider as r, densityPaddingMap as i } from "./data-table-context.js";
+import { Table as ee } from "./table.js";
 import { DataTableBody as te } from "./data-table-body.js";
 import { DataTableBulkActions as ne } from "./data-table-bulk-actions.js";
 import { DataTableCards as re } from "./data-table-card.js";
@@ -157,7 +157,7 @@ function d({ columns: d, data: f, className: _e, noResultsText: p, sortable: m =
 		});
 		Q.current(t);
 	}, [R, f]);
-	let qe = ee[V], Je = Z.getRowModel().rows, Ye = ge({
+	let qe = i[V], Je = Z.getRowModel().rows, Ye = ge({
 		count: S ? Je.length : 0,
 		getScrollElement: () => W.current,
 		estimateSize: () => Te,
@@ -211,7 +211,7 @@ function d({ columns: d, data: f, className: _e, noResultsText: p, sortable: m =
 		Ce,
 		we,
 		A
-	]), tt = S ? Ye.getVirtualItems() : void 0, nt = S ? Ye.getTotalSize() : void 0, rt = /* @__PURE__ */ u(r, {
+	]), tt = S ? Ye.getVirtualItems() : void 0, nt = S ? Ye.getTotalSize() : void 0, rt = /* @__PURE__ */ u(ee, {
 		"aria-busy": T || void 0,
 		children: [/* @__PURE__ */ l(ie, { stickyHeader: Oe }), /* @__PURE__ */ l(te, {
 			loading: T,
@@ -222,7 +222,7 @@ function d({ columns: d, data: f, className: _e, noResultsText: p, sortable: m =
 			totalVirtualSize: nt
 		})]
 	});
-	return /* @__PURE__ */ l(i, {
+	return /* @__PURE__ */ l(r, {
 		value: et,
 		children: /* @__PURE__ */ u("div", {
 			className: e(_e),

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","names":[],"sources":["../../src/ui/data-table.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type ColumnPinningState,\n  type ExpandedState,\n  type PaginationState,\n  type Row,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n  type TableState,\n  type Updater,\n  type VisibilityState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { IconChevronRight, IconSearch } from '@tabler/icons-react'\n\nimport { Icon } from './icon'\nimport { Table } from './table'\nimport { Checkbox } from './checkbox'\nimport { cn } from './lib/utils'\nimport { DataTableToolbar, type Density } from './data-table-toolbar'\nimport {\n  DataTableProvider,\n  densityPaddingMap,\n  type EditingCell,\n} from './data-table-context'\nimport { DataTableHeader } from './data-table-header'\nimport { DataTableBody } from './data-table-body'\nimport { DataTableCards } from './data-table-card'\nimport { DataTablePagination } from './data-table-pagination'\nimport { DataTableBulkActions, type BulkAction } from './data-table-bulk-actions'\n\n// Re-export public types so consumers' imports don't break\nexport type { BulkAction } from './data-table-bulk-actions'\n\ndeclare module '@tanstack/react-table' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: 'left' | 'center' | 'right'\n    hideBelow?: 'sm' | 'md' | 'lg'\n  }\n}\n\n/**\n * Props for DataTable — a feature-rich TanStack Table wrapper supporting sorting, filtering,\n * pagination, row selection, inline editing, row expansion, column pinning, and virtualization.\n *\n * All features are opt-in via boolean flags. The component manages its own internal state for\n * sorting, filtering, pagination, and selection — just pass `columns` and `data`.\n *\n * **Feature flags:** `sortable` | `filterable` | `globalFilter` | `paginated` | `selectable` |\n * `toolbar` | `editable` | `expandable` | `virtualRows`\n *\n * **Columns:** Use TanStack Table's `ColumnDef<TData, TValue>` type. Set\n * `meta: { enableEditing: false }` on a column to disable cell editing for that column.\n *\n * @example\n * // Minimal read-only table:\n * const columns: ColumnDef<User, string>[] = [\n *   { accessorKey: 'name', header: 'Name' },\n *   { accessorKey: 'email', header: 'Email' },\n * ]\n * <DataTable columns={columns} data={users} />\n *\n * @example\n * // Full-featured admin table with sorting, pagination, and selection:\n * <DataTable\n *   columns={projectColumns}\n *   data={projects}\n *   sortable\n *   paginated\n *   pageSize={20}\n *   selectable\n *   onSelectionChange={(rows) => setSelectedProjects(rows)}\n *   toolbar\n * />\n *\n * @example\n * // Virtualized table for large datasets (10k+ rows):\n * <DataTable\n *   columns={logColumns}\n *   data={allLogs}\n *   virtualRows\n *   virtualRowHeight={40}\n *   maxHeight={500}\n * />\n *\n * @example\n * // Table with expandable rows for nested detail:\n * <DataTable\n *   columns={orderColumns}\n *   data={orders}\n *   expandable\n *   renderExpanded={(order) => <OrderLineItems items={order.lineItems} />}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\n/**\n * A full-featured data table built on TanStack Table with sorting, filtering,\n * pagination, row selection, inline cell editing, expandable rows, column pinning,\n * a toolbar with density/export controls, and optional row virtualization.\n */\nexport interface DataTableProps<TData, TValue> {\n  /** Column definitions passed to TanStack Table. */\n  columns: ColumnDef<TData, TValue>[]\n  /** Row data */\n  data: TData[]\n  /** Additional class name for the wrapper div */\n  className?: string\n  /** Text shown when the table has no rows */\n  noResultsText?: string\n  /** Enable column sorting (click headers to sort) */\n  sortable?: boolean\n  /** Enable per-column filter inputs below headers */\n  filterable?: boolean\n  /** Enable a global search input above the table */\n  globalFilter?: boolean\n  /** Enable pagination controls below the table */\n  paginated?: boolean\n  /** Number of rows per page when paginated (default 10) */\n  pageSize?: number\n  /** Options for the page size selector dropdown (default [10, 20, 50, 100]) */\n  pageSizeOptions?: number[]\n  /** Enable row selection with checkboxes */\n  selectable?: boolean\n  /** Callback when row selection changes */\n  onSelectionChange?: (selectedRows: TData[]) => void\n  /** Show toolbar above the table with column visibility, density, and export controls */\n  toolbar?: boolean\n  /** Row density — controls cell vertical padding */\n  density?: Density\n  /** Initial column pinning configuration */\n  columnPinning?: { left?: string[]; right?: string[] }\n\n  // --- Cell Editing ---\n  /** Enable inline cell editing (double-click to edit) */\n  editable?: boolean\n  /** Callback when a cell value is edited */\n  onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void\n\n  // --- Row Expansion ---\n  /** Enable expandable rows with detail panels */\n  expandable?: boolean\n  /** Render function for expanded row content */\n  renderExpanded?: (row: TData) => React.ReactNode\n\n  // --- Virtualization ---\n  /** Enable row virtualization for large datasets */\n  virtualRows?: boolean\n  /** Height of each virtual row in pixels (default 48) */\n  virtualRowHeight?: number\n  /** Maximum height of the scrollable container in pixels (default 600) */\n  maxHeight?: number\n\n  // --- Server-side sorting ---\n  /** Callback for server-side sorting. When provided, sorting is manual (no client-side sort). */\n  onSort?: (key: string, direction: 'asc' | 'desc' | false) => void\n\n  // --- Empty state ---\n  /** Custom ReactNode to render when data is empty (replaces noResultsText) */\n  emptyState?: React.ReactNode\n\n  // --- Loading ---\n  /** Show shimmer skeleton rows instead of data */\n  loading?: boolean\n\n  // --- Controlled selection ---\n  /** Controlled set of selected row IDs — syncs internal selection state */\n  selectedIds?: Set<string>\n  /** Per-row filter to determine if a row is selectable */\n  selectableFilter?: (row: TData) => boolean\n  /** Custom row ID getter */\n  getRowId?: (row: TData) => string\n\n  // --- Server-side pagination ---\n  /** Server-side pagination config. When provided, pagination is manual. */\n  pagination?: {\n    page: number\n    pageSize: number\n    total: number\n    onPageChange: (page: number) => void\n  }\n\n  // --- Single-expand mode ---\n  /** When true, only one row can be expanded at a time */\n  singleExpand?: boolean\n\n  // --- Sticky header ---\n  /** When true, the table header sticks to the top on scroll */\n  stickyHeader?: boolean\n\n  // --- Row click ---\n  /** Callback when a row is clicked (not fired from interactive elements) */\n  onRowClick?: (row: TData) => void\n\n  // --- Bulk actions ---\n  /** Actions shown in a floating bar when rows are selected */\n  bulkActions?: BulkAction<TData>[]\n\n  // --- Mobile view ---\n  /** Render rows as stacked cards on small screens (below sm breakpoint). Default 'table'. */\n  mobileView?: 'card' | 'table'\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  className,\n  noResultsText,\n  sortable = false,\n  filterable = false,\n  globalFilter = false,\n  paginated = false,\n  pageSize: initialPageSize,\n  pageSizeOptions,\n  selectable = false,\n  onSelectionChange,\n  toolbar = false,\n  density: initialDensity = 'standard',\n  columnPinning: initialColumnPinning,\n  editable = false,\n  onCellEdit,\n  expandable = false,\n  renderExpanded,\n  virtualRows = false,\n  virtualRowHeight = 48,\n  maxHeight = 600,\n  onSort,\n  emptyState,\n  loading = false,\n  selectedIds,\n  selectableFilter,\n  getRowId: getRowIdProp,\n  pagination: serverPagination,\n  singleExpand = false,\n  stickyHeader = false,\n  onRowClick,\n  bulkActions,\n  mobileView = 'table',\n}: DataTableProps<TData, TValue>) {\n  // Detect below-sm viewport (640px) for card mode — separate from useIsMobile (768px)\n  const [isBelowSm, setIsBelowSm] = useState(false)\n  useEffect(() => {\n    const mql = window.matchMedia('(max-width: 639px)')\n    const onChange = () => setIsBelowSm(mql.matches)\n    mql.addEventListener('change', onChange)\n    setIsBelowSm(mql.matches)\n    return () => mql.removeEventListener('change', onChange)\n  }, [])\n\n  const showCards = mobileView === 'card' && isBelowSm\n\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [globalFilterValue, setGlobalFilterValue] = useState('')\n  const [paginationState, setPaginationState] = useState<PaginationState>({\n    pageIndex: serverPagination ? serverPagination.page - 1 : 0,\n    pageSize: serverPagination?.pageSize ?? initialPageSize ?? 10,\n  })\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n  const [columnPinningState, setColumnPinningState] =\n    useState<ColumnPinningState>({\n      left: initialColumnPinning?.left ?? [],\n      right: initialColumnPinning?.right ?? [],\n    })\n  const [density, setDensity] = useState<Density>(initialDensity)\n  const [editingCell, setEditingCell] = useState<EditingCell>(null)\n  const [expanded, setExpanded] = useState<ExpandedState>({})\n\n  // Ref for the virtual scroll container\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  // Guard to prevent onSelectionChange firing when syncing from selectedIds prop\n  const isSyncingFromPropRef = useRef(false)\n\n  // Sync controlled selectedIds to internal rowSelection\n  useEffect(() => {\n    if (selectedIds) {\n      isSyncingFromPropRef.current = true\n      const newSelection: RowSelectionState = {}\n      selectedIds.forEach((id) => {\n        newSelection[id] = true\n      })\n      setRowSelection(newSelection)\n    }\n  }, [selectedIds])\n\n  // Sync server pagination page to internal state\n  useEffect(() => {\n    if (serverPagination) {\n      setPaginationState((prev) => ({\n        ...prev,\n        pageIndex: serverPagination.page - 1,\n        pageSize: serverPagination.pageSize,\n      }))\n    }\n  }, [serverPagination?.page, serverPagination?.pageSize]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Server-side sorting handler\n  const handleSortingChange = useCallback(\n    (updater: Updater<SortingState>) => {\n      setSorting((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (onSort) {\n          if (next.length === 0 && prev.length > 0) {\n            // Sorting cleared\n            onSort(prev[0].id, false)\n          } else if (next.length > 0) {\n            onSort(next[0].id, next[0].desc ? 'desc' : 'asc')\n          }\n        }\n        return next\n      })\n    },\n    [onSort],\n  )\n\n  // Single-expand handler\n  const handleExpandedChange = useCallback(\n    (updater: Updater<ExpandedState>) => {\n      setExpanded((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (!singleExpand) return next\n        // If next is boolean true (expand all), just use it\n        if (next === true) return next\n        if (typeof next !== 'object') return next\n        // Determine which row was just toggled on\n        const prevKeys = typeof prev === 'object' ? Object.keys(prev).filter((k) => (prev as Record<string, boolean>)[k]) : []\n        const nextKeys = Object.keys(next).filter((k) => (next as Record<string, boolean>)[k])\n        // Find newly expanded row\n        const newlyExpanded = nextKeys.filter((k) => !prevKeys.includes(k))\n        if (newlyExpanded.length > 0) {\n          // Keep only the most recently expanded row\n          return { [newlyExpanded[newlyExpanded.length - 1]]: true } as ExpandedState\n        }\n        // If no new rows, means a row was collapsed — return as-is\n        return next\n      })\n    },\n    [singleExpand],\n  )\n\n  // Stable ref for server pagination callback to avoid useCallback invalidation\n  const onPageChangeRef = useRef(serverPagination?.onPageChange)\n  useEffect(() => {\n    onPageChangeRef.current = serverPagination?.onPageChange\n  }, [serverPagination?.onPageChange])\n\n  // Server-side pagination handler\n  const handlePaginationChange = useCallback(\n    (updater: Updater<PaginationState>) => {\n      setPaginationState((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (onPageChangeRef.current) {\n          // Only call onPageChange if the page actually changed\n          if (next.pageIndex !== prev.pageIndex) {\n            onPageChangeRef.current(next.pageIndex + 1)\n          }\n        }\n        return next\n      })\n    },\n    [],\n  )\n\n  // Checkbox column prepended when selectable is enabled\n  const selectColumn: ColumnDef<TData, unknown> = {\n    id: '_select',\n    header: ({ table: t }) => (\n      <Checkbox\n        size=\"sm\"\n        checked={t.getIsAllPageRowsSelected()}\n        indeterminate={t.getIsSomePageRowsSelected()}\n        onCheckedChange={(v) => t.toggleAllPageRowsSelected(!!v)}\n        aria-label=\"Select all rows\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        size=\"sm\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(v) => row.toggleSelected(!!v)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableColumnFilter: false,\n    enableHiding: false,\n  }\n\n  // Expand toggle column\n  const expandColumn: ColumnDef<TData, unknown> = {\n    id: '_expand',\n    header: () => null,\n    cell: ({ row }) => (\n      <button\n        type=\"button\"\n        onClick={() => row.toggleExpanded()}\n        aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}\n        className=\"flex items-center justify-center p-ds-01 rounded-ds-sm hover:bg-surface-raised transition-colors\"\n      >\n        <Icon\n          icon={IconChevronRight}\n          size=\"sm\"\n          className={cn(\n            'transition-transform duration-moderate-02',\n            row.getIsExpanded() && 'rotate-90',\n          )}\n        />\n      </button>\n    ),\n    enableSorting: false,\n    enableColumnFilter: false,\n    enableHiding: false,\n  }\n\n  // Assemble all columns in order: select?, expand?, ...user columns\n  const allColumns = [\n    ...(selectable ? [selectColumn] : []),\n    ...(expandable ? [expandColumn] : []),\n    ...columns,\n  ]\n\n  // Determine if using server-side pagination\n  const useServerPagination = !!serverPagination\n  const showPagination = paginated || useServerPagination\n\n  // Build state object once — sorting and filtering contribute independently\n  const tableState: Partial<TableState> = {\n    columnVisibility,\n    columnPinning: columnPinningState,\n  }\n  if (sortable) tableState.sorting = sorting\n  if (filterable || globalFilter) {\n    tableState.columnFilters = columnFilters\n    tableState.globalFilter = globalFilterValue\n  }\n  if (showPagination) tableState.pagination = paginationState\n  if (selectable) tableState.rowSelection = rowSelection\n  if (expandable) tableState.expanded = expanded\n\n  // Determine server-side sort mode\n  const isServerSort = sortable && !!onSort\n\n  const table = useReactTable({\n    data,\n    columns: allColumns,\n    state: tableState,\n    onColumnVisibilityChange: setColumnVisibility,\n    onColumnPinningChange: setColumnPinningState,\n    getCoreRowModel: getCoreRowModel(),\n    ...(sortable && {\n      onSortingChange: isServerSort ? handleSortingChange : setSorting,\n      ...(isServerSort\n        ? { manualSorting: true }\n        : { getSortedRowModel: getSortedRowModel() }),\n    }),\n    ...((filterable || globalFilter) && {\n      onColumnFiltersChange: setColumnFilters,\n      onGlobalFilterChange: setGlobalFilterValue,\n      getFilteredRowModel: getFilteredRowModel(),\n    }),\n    ...(showPagination && {\n      onPaginationChange: useServerPagination\n        ? handlePaginationChange\n        : setPaginationState,\n      ...(useServerPagination\n        ? {\n            manualPagination: true,\n            pageCount: Math.ceil(\n              serverPagination!.total / serverPagination!.pageSize,\n            ),\n          }\n        : { getPaginationRowModel: getPaginationRowModel() }),\n    }),\n    ...(selectable && {\n      onRowSelectionChange: setRowSelection,\n      enableRowSelection: selectableFilter\n        ? (row: Row<TData>) => selectableFilter(row.original)\n        : true,\n    }),\n    ...(expandable && {\n      onExpandedChange: singleExpand ? handleExpandedChange : setExpanded,\n      getExpandedRowModel: getExpandedRowModel(),\n    }),\n    ...(getRowIdProp && {\n      getRowId: (row: TData) => getRowIdProp(row),\n    }),\n  })\n\n  // Stable refs to avoid effect re-fires from inline callbacks\n  const onSelectionChangeRef = useRef(onSelectionChange)\n  const getRowIdRef = useRef(getRowIdProp)\n  useEffect(() => {\n    onSelectionChangeRef.current = onSelectionChange\n    getRowIdRef.current = getRowIdProp\n  }, [onSelectionChange, getRowIdProp])\n\n  // Fire selection callback when row selection changes (skip when syncing from prop)\n  useEffect(() => {\n    if (isSyncingFromPropRef.current) {\n      isSyncingFromPropRef.current = false\n      return\n    }\n    if (!onSelectionChangeRef.current) return\n    const selectedRowIds = Object.keys(rowSelection).filter((k) => rowSelection[k])\n    const selected = data.filter((_, i) => {\n      const id = getRowIdRef.current ? getRowIdRef.current(data[i]) : String(i)\n      return selectedRowIds.includes(id)\n    })\n    onSelectionChangeRef.current(selected)\n  }, [rowSelection, data])\n\n  const cellPadding = densityPaddingMap[density]\n\n  const rows = table.getRowModel().rows\n\n  // Virtualizer — always called but only active when virtualRows is true\n  const virtualizer = useVirtualizer({\n    count: virtualRows ? rows.length : 0,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => virtualRowHeight,\n    overscan: 10,\n  })\n\n  // Number of skeleton rows for loading state\n  const skeletonRowCount = serverPagination?.pageSize ?? initialPageSize ?? 5\n\n  // Get selected rows for bulk actions (derived from rowSelection + data, not table instance)\n  const selectedRows = useMemo(() => {\n    if (!bulkActions || !selectable) return []\n    const selectedRowIds = Object.keys(rowSelection).filter((k) => rowSelection[k])\n    return data.filter((_, i) => {\n      const id = getRowIdProp ? getRowIdProp(data[i]) : String(i)\n      return selectedRowIds.includes(id)\n    })\n  }, [bulkActions, selectable, rowSelection, data, getRowIdProp])\n\n  const hasSelectedRows = selectedRows.length > 0\n\n  // Total rows for pagination display\n  const totalRowCount = useServerPagination\n    ? serverPagination!.total\n    : table.getFilteredRowModel().rows.length\n\n  // Build context value for sub-components\n  const contextValue = useMemo(\n    () => ({\n      table,\n      allColumns: allColumns.map((col) => ({\n        id: (col as { id?: string }).id,\n        header: (col as { header?: unknown }).header,\n      })),\n      cellPadding,\n      columnPinningState,\n      sortable,\n      filterable,\n      editable,\n      expandable,\n      virtualRows,\n      selectable,\n      mobileView,\n      editingCell,\n      setEditingCell,\n      onCellEdit,\n      renderExpanded,\n      onRowClick,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      table,\n      allColumns.length,\n      cellPadding,\n      columnPinningState,\n      sortable,\n      filterable,\n      editable,\n      expandable,\n      virtualRows,\n      selectable,\n      mobileView,\n      editingCell,\n      onCellEdit,\n      renderExpanded,\n      onRowClick,\n    ],\n  )\n\n  // Virtual items for body\n  const virtualItems = virtualRows ? virtualizer.getVirtualItems() : undefined\n  const totalVirtualSize = virtualRows ? virtualizer.getTotalSize() : undefined\n\n  // Determine if we need a scroll wrapper for virtualization\n  const tableContent = (\n    <Table aria-busy={loading || undefined}>\n      <DataTableHeader stickyHeader={stickyHeader} />\n      <DataTableBody\n        loading={loading}\n        skeletonRowCount={skeletonRowCount}\n        noResultsText={noResultsText}\n        emptyState={emptyState}\n        virtualItems={virtualItems}\n        totalVirtualSize={totalVirtualSize}\n      />\n    </Table>\n  )\n\n  return (\n    <DataTableProvider value={contextValue}>\n      <div className={cn(className)}>\n        {/* Toolbar */}\n        {toolbar && (\n          <DataTableToolbar\n            table={table}\n            globalFilter={globalFilter}\n            globalFilterValue={globalFilterValue}\n            onGlobalFilterChange={setGlobalFilterValue}\n            density={density}\n            onDensityChange={setDensity}\n          />\n        )}\n\n        {/* Global search input — only show standalone when toolbar is disabled */}\n        {globalFilter && !toolbar && (\n          <div className=\"flex items-center gap-ds-03 pb-ds-04 border-b border-surface-border mb-ds-04\">\n            <Icon icon={IconSearch} size=\"sm\" className=\"text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              value={globalFilterValue}\n              onChange={(e) => setGlobalFilterValue(e.target.value)}\n              placeholder=\"Search all columns...\"\n              aria-label=\"Search all columns\"\n              className={cn(\n                'flex-1 bg-transparent text-ds-md',\n                'text-surface-fg placeholder:text-surface-fg-subtle',\n                'outline-hidden',\n              )}\n            />\n          </div>\n        )}\n\n        {/* Card view on small screens, or standard table */}\n        {showCards ? (\n          <DataTableCards\n            loading={loading}\n            skeletonRowCount={skeletonRowCount}\n            noResultsText={noResultsText}\n            emptyState={emptyState}\n          />\n        ) : virtualRows ? (\n          <div\n            ref={scrollContainerRef}\n            style={{ maxHeight: `${maxHeight}px`, overflowY: 'auto' }}\n          >\n            {tableContent}\n          </div>\n        ) : (\n          tableContent\n        )}\n\n        {/* Pagination controls */}\n        {showPagination && (\n          <DataTablePagination\n            table={table}\n            totalRowCount={totalRowCount}\n            useServerPagination={useServerPagination}\n            pageSizeOptions={pageSizeOptions}\n          />\n        )}\n\n        {/* Bulk action bar */}\n        {bulkActions && selectable && hasSelectedRows && (\n          <DataTableBulkActions\n            table={table}\n            selectedRows={selectedRows}\n            bulkActions={bulkActions}\n          />\n        )}\n      </div>\n    </DataTableProvider>\n  )\n}\nDataTable.displayName = 'DataTable'\n"],"mappings":"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"}
+{"version":3,"file":"data-table.js","names":[],"sources":["../../src/ui/data-table.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronRight, IconSearch } from '@tabler/icons-react'\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  type ColumnPinningState,\n  type ExpandedState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type Row,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n  type TableState,\n  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from '@tanstack/react-table'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { Checkbox } from './checkbox'\nimport { DataTableBody } from './data-table-body'\nimport { type BulkAction,DataTableBulkActions } from './data-table-bulk-actions'\nimport { DataTableCards } from './data-table-card'\nimport {\n  DataTableProvider,\n  densityPaddingMap,\n  type EditingCell,\n} from './data-table-context'\nimport { DataTableHeader } from './data-table-header'\nimport { DataTablePagination } from './data-table-pagination'\nimport { DataTableToolbar, type Density } from './data-table-toolbar'\nimport { Icon } from './icon'\nimport { cn } from './lib/utils'\nimport { Table } from './table'\n\n// Re-export public types so consumers' imports don't break\nexport type { BulkAction } from './data-table-bulk-actions'\n\ndeclare module '@tanstack/react-table' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: 'left' | 'center' | 'right'\n    hideBelow?: 'sm' | 'md' | 'lg'\n  }\n}\n\n/**\n * Props for DataTable — a feature-rich TanStack Table wrapper supporting sorting, filtering,\n * pagination, row selection, inline editing, row expansion, column pinning, and virtualization.\n *\n * All features are opt-in via boolean flags. The component manages its own internal state for\n * sorting, filtering, pagination, and selection — just pass `columns` and `data`.\n *\n * **Feature flags:** `sortable` | `filterable` | `globalFilter` | `paginated` | `selectable` |\n * `toolbar` | `editable` | `expandable` | `virtualRows`\n *\n * **Columns:** Use TanStack Table's `ColumnDef<TData, TValue>` type. Set\n * `meta: { enableEditing: false }` on a column to disable cell editing for that column.\n *\n * @example\n * // Minimal read-only table:\n * const columns: ColumnDef<User, string>[] = [\n *   { accessorKey: 'name', header: 'Name' },\n *   { accessorKey: 'email', header: 'Email' },\n * ]\n * <DataTable columns={columns} data={users} />\n *\n * @example\n * // Full-featured admin table with sorting, pagination, and selection:\n * <DataTable\n *   columns={projectColumns}\n *   data={projects}\n *   sortable\n *   paginated\n *   pageSize={20}\n *   selectable\n *   onSelectionChange={(rows) => setSelectedProjects(rows)}\n *   toolbar\n * />\n *\n * @example\n * // Virtualized table for large datasets (10k+ rows):\n * <DataTable\n *   columns={logColumns}\n *   data={allLogs}\n *   virtualRows\n *   virtualRowHeight={40}\n *   maxHeight={500}\n * />\n *\n * @example\n * // Table with expandable rows for nested detail:\n * <DataTable\n *   columns={orderColumns}\n *   data={orders}\n *   expandable\n *   renderExpanded={(order) => <OrderLineItems items={order.lineItems} />}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\n/**\n * A full-featured data table built on TanStack Table with sorting, filtering,\n * pagination, row selection, inline cell editing, expandable rows, column pinning,\n * a toolbar with density/export controls, and optional row virtualization.\n */\nexport interface DataTableProps<TData, TValue> {\n  /** Column definitions passed to TanStack Table. */\n  columns: ColumnDef<TData, TValue>[]\n  /** Row data */\n  data: TData[]\n  /** Additional class name for the wrapper div */\n  className?: string\n  /** Text shown when the table has no rows */\n  noResultsText?: string\n  /** Enable column sorting (click headers to sort) */\n  sortable?: boolean\n  /** Enable per-column filter inputs below headers */\n  filterable?: boolean\n  /** Enable a global search input above the table */\n  globalFilter?: boolean\n  /** Enable pagination controls below the table */\n  paginated?: boolean\n  /** Number of rows per page when paginated (default 10) */\n  pageSize?: number\n  /** Options for the page size selector dropdown (default [10, 20, 50, 100]) */\n  pageSizeOptions?: number[]\n  /** Enable row selection with checkboxes */\n  selectable?: boolean\n  /** Callback when row selection changes */\n  onSelectionChange?: (selectedRows: TData[]) => void\n  /** Show toolbar above the table with column visibility, density, and export controls */\n  toolbar?: boolean\n  /** Row density — controls cell vertical padding */\n  density?: Density\n  /** Initial column pinning configuration */\n  columnPinning?: { left?: string[]; right?: string[] }\n\n  // --- Cell Editing ---\n  /** Enable inline cell editing (double-click to edit) */\n  editable?: boolean\n  /** Callback when a cell value is edited */\n  onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void\n\n  // --- Row Expansion ---\n  /** Enable expandable rows with detail panels */\n  expandable?: boolean\n  /** Render function for expanded row content */\n  renderExpanded?: (row: TData) => React.ReactNode\n\n  // --- Virtualization ---\n  /** Enable row virtualization for large datasets */\n  virtualRows?: boolean\n  /** Height of each virtual row in pixels (default 48) */\n  virtualRowHeight?: number\n  /** Maximum height of the scrollable container in pixels (default 600) */\n  maxHeight?: number\n\n  // --- Server-side sorting ---\n  /** Callback for server-side sorting. When provided, sorting is manual (no client-side sort). */\n  onSort?: (key: string, direction: 'asc' | 'desc' | false) => void\n\n  // --- Empty state ---\n  /** Custom ReactNode to render when data is empty (replaces noResultsText) */\n  emptyState?: React.ReactNode\n\n  // --- Loading ---\n  /** Show shimmer skeleton rows instead of data */\n  loading?: boolean\n\n  // --- Controlled selection ---\n  /** Controlled set of selected row IDs — syncs internal selection state */\n  selectedIds?: Set<string>\n  /** Per-row filter to determine if a row is selectable */\n  selectableFilter?: (row: TData) => boolean\n  /** Custom row ID getter */\n  getRowId?: (row: TData) => string\n\n  // --- Server-side pagination ---\n  /** Server-side pagination config. When provided, pagination is manual. */\n  pagination?: {\n    page: number\n    pageSize: number\n    total: number\n    onPageChange: (page: number) => void\n  }\n\n  // --- Single-expand mode ---\n  /** When true, only one row can be expanded at a time */\n  singleExpand?: boolean\n\n  // --- Sticky header ---\n  /** When true, the table header sticks to the top on scroll */\n  stickyHeader?: boolean\n\n  // --- Row click ---\n  /** Callback when a row is clicked (not fired from interactive elements) */\n  onRowClick?: (row: TData) => void\n\n  // --- Bulk actions ---\n  /** Actions shown in a floating bar when rows are selected */\n  bulkActions?: BulkAction<TData>[]\n\n  // --- Mobile view ---\n  /** Render rows as stacked cards on small screens (below sm breakpoint). Default 'table'. */\n  mobileView?: 'card' | 'table'\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  className,\n  noResultsText,\n  sortable = false,\n  filterable = false,\n  globalFilter = false,\n  paginated = false,\n  pageSize: initialPageSize,\n  pageSizeOptions,\n  selectable = false,\n  onSelectionChange,\n  toolbar = false,\n  density: initialDensity = 'standard',\n  columnPinning: initialColumnPinning,\n  editable = false,\n  onCellEdit,\n  expandable = false,\n  renderExpanded,\n  virtualRows = false,\n  virtualRowHeight = 48,\n  maxHeight = 600,\n  onSort,\n  emptyState,\n  loading = false,\n  selectedIds,\n  selectableFilter,\n  getRowId: getRowIdProp,\n  pagination: serverPagination,\n  singleExpand = false,\n  stickyHeader = false,\n  onRowClick,\n  bulkActions,\n  mobileView = 'table',\n}: DataTableProps<TData, TValue>) {\n  // Detect below-sm viewport (640px) for card mode — separate from useIsMobile (768px)\n  const [isBelowSm, setIsBelowSm] = useState(false)\n  useEffect(() => {\n    const mql = window.matchMedia('(max-width: 639px)')\n    const onChange = () => setIsBelowSm(mql.matches)\n    mql.addEventListener('change', onChange)\n    setIsBelowSm(mql.matches)\n    return () => mql.removeEventListener('change', onChange)\n  }, [])\n\n  const showCards = mobileView === 'card' && isBelowSm\n\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [globalFilterValue, setGlobalFilterValue] = useState('')\n  const [paginationState, setPaginationState] = useState<PaginationState>({\n    pageIndex: serverPagination ? serverPagination.page - 1 : 0,\n    pageSize: serverPagination?.pageSize ?? initialPageSize ?? 10,\n  })\n  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n  const [columnPinningState, setColumnPinningState] =\n    useState<ColumnPinningState>({\n      left: initialColumnPinning?.left ?? [],\n      right: initialColumnPinning?.right ?? [],\n    })\n  const [density, setDensity] = useState<Density>(initialDensity)\n  const [editingCell, setEditingCell] = useState<EditingCell>(null)\n  const [expanded, setExpanded] = useState<ExpandedState>({})\n\n  // Ref for the virtual scroll container\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n  // Guard to prevent onSelectionChange firing when syncing from selectedIds prop\n  const isSyncingFromPropRef = useRef(false)\n\n  // Sync controlled selectedIds to internal rowSelection\n  useEffect(() => {\n    if (selectedIds) {\n      isSyncingFromPropRef.current = true\n      const newSelection: RowSelectionState = {}\n      selectedIds.forEach((id) => {\n        newSelection[id] = true\n      })\n      setRowSelection(newSelection)\n    }\n  }, [selectedIds])\n\n  // Sync server pagination page to internal state\n  useEffect(() => {\n    if (serverPagination) {\n      setPaginationState((prev) => ({\n        ...prev,\n        pageIndex: serverPagination.page - 1,\n        pageSize: serverPagination.pageSize,\n      }))\n    }\n  }, [serverPagination?.page, serverPagination?.pageSize]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Server-side sorting handler\n  const handleSortingChange = useCallback(\n    (updater: Updater<SortingState>) => {\n      setSorting((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (onSort) {\n          if (next.length === 0 && prev.length > 0) {\n            // Sorting cleared\n            onSort(prev[0].id, false)\n          } else if (next.length > 0) {\n            onSort(next[0].id, next[0].desc ? 'desc' : 'asc')\n          }\n        }\n        return next\n      })\n    },\n    [onSort],\n  )\n\n  // Single-expand handler\n  const handleExpandedChange = useCallback(\n    (updater: Updater<ExpandedState>) => {\n      setExpanded((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (!singleExpand) return next\n        // If next is boolean true (expand all), just use it\n        if (next === true) return next\n        if (typeof next !== 'object') return next\n        // Determine which row was just toggled on\n        const prevKeys = typeof prev === 'object' ? Object.keys(prev).filter((k) => (prev as Record<string, boolean>)[k]) : []\n        const nextKeys = Object.keys(next).filter((k) => (next as Record<string, boolean>)[k])\n        // Find newly expanded row\n        const newlyExpanded = nextKeys.filter((k) => !prevKeys.includes(k))\n        if (newlyExpanded.length > 0) {\n          // Keep only the most recently expanded row\n          return { [newlyExpanded[newlyExpanded.length - 1]]: true } as ExpandedState\n        }\n        // If no new rows, means a row was collapsed — return as-is\n        return next\n      })\n    },\n    [singleExpand],\n  )\n\n  // Stable ref for server pagination callback to avoid useCallback invalidation\n  const onPageChangeRef = useRef(serverPagination?.onPageChange)\n  useEffect(() => {\n    onPageChangeRef.current = serverPagination?.onPageChange\n  }, [serverPagination?.onPageChange])\n\n  // Server-side pagination handler\n  const handlePaginationChange = useCallback(\n    (updater: Updater<PaginationState>) => {\n      setPaginationState((prev) => {\n        const next = typeof updater === 'function' ? updater(prev) : updater\n        if (onPageChangeRef.current) {\n          // Only call onPageChange if the page actually changed\n          if (next.pageIndex !== prev.pageIndex) {\n            onPageChangeRef.current(next.pageIndex + 1)\n          }\n        }\n        return next\n      })\n    },\n    [],\n  )\n\n  // Checkbox column prepended when selectable is enabled\n  const selectColumn: ColumnDef<TData, unknown> = {\n    id: '_select',\n    header: ({ table: t }) => (\n      <Checkbox\n        size=\"sm\"\n        checked={t.getIsAllPageRowsSelected()}\n        indeterminate={t.getIsSomePageRowsSelected()}\n        onCheckedChange={(v) => t.toggleAllPageRowsSelected(!!v)}\n        aria-label=\"Select all rows\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        size=\"sm\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(v) => row.toggleSelected(!!v)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableColumnFilter: false,\n    enableHiding: false,\n  }\n\n  // Expand toggle column\n  const expandColumn: ColumnDef<TData, unknown> = {\n    id: '_expand',\n    header: () => null,\n    cell: ({ row }) => (\n      <button\n        type=\"button\"\n        onClick={() => row.toggleExpanded()}\n        aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}\n        className=\"flex items-center justify-center p-ds-01 rounded-ds-sm hover:bg-surface-raised transition-colors\"\n      >\n        <Icon\n          icon={IconChevronRight}\n          size=\"sm\"\n          className={cn(\n            'transition-transform duration-moderate-02',\n            row.getIsExpanded() && 'rotate-90',\n          )}\n        />\n      </button>\n    ),\n    enableSorting: false,\n    enableColumnFilter: false,\n    enableHiding: false,\n  }\n\n  // Assemble all columns in order: select?, expand?, ...user columns\n  const allColumns = [\n    ...(selectable ? [selectColumn] : []),\n    ...(expandable ? [expandColumn] : []),\n    ...columns,\n  ]\n\n  // Determine if using server-side pagination\n  const useServerPagination = !!serverPagination\n  const showPagination = paginated || useServerPagination\n\n  // Build state object once — sorting and filtering contribute independently\n  const tableState: Partial<TableState> = {\n    columnVisibility,\n    columnPinning: columnPinningState,\n  }\n  if (sortable) tableState.sorting = sorting\n  if (filterable || globalFilter) {\n    tableState.columnFilters = columnFilters\n    tableState.globalFilter = globalFilterValue\n  }\n  if (showPagination) tableState.pagination = paginationState\n  if (selectable) tableState.rowSelection = rowSelection\n  if (expandable) tableState.expanded = expanded\n\n  // Determine server-side sort mode\n  const isServerSort = sortable && !!onSort\n\n  const table = useReactTable({\n    data,\n    columns: allColumns,\n    state: tableState,\n    onColumnVisibilityChange: setColumnVisibility,\n    onColumnPinningChange: setColumnPinningState,\n    getCoreRowModel: getCoreRowModel(),\n    ...(sortable && {\n      onSortingChange: isServerSort ? handleSortingChange : setSorting,\n      ...(isServerSort\n        ? { manualSorting: true }\n        : { getSortedRowModel: getSortedRowModel() }),\n    }),\n    ...((filterable || globalFilter) && {\n      onColumnFiltersChange: setColumnFilters,\n      onGlobalFilterChange: setGlobalFilterValue,\n      getFilteredRowModel: getFilteredRowModel(),\n    }),\n    ...(showPagination && {\n      onPaginationChange: useServerPagination\n        ? handlePaginationChange\n        : setPaginationState,\n      ...(useServerPagination\n        ? {\n            manualPagination: true,\n            pageCount: Math.ceil(\n              serverPagination!.total / serverPagination!.pageSize,\n            ),\n          }\n        : { getPaginationRowModel: getPaginationRowModel() }),\n    }),\n    ...(selectable && {\n      onRowSelectionChange: setRowSelection,\n      enableRowSelection: selectableFilter\n        ? (row: Row<TData>) => selectableFilter(row.original)\n        : true,\n    }),\n    ...(expandable && {\n      onExpandedChange: singleExpand ? handleExpandedChange : setExpanded,\n      getExpandedRowModel: getExpandedRowModel(),\n    }),\n    ...(getRowIdProp && {\n      getRowId: (row: TData) => getRowIdProp(row),\n    }),\n  })\n\n  // Stable refs to avoid effect re-fires from inline callbacks\n  const onSelectionChangeRef = useRef(onSelectionChange)\n  const getRowIdRef = useRef(getRowIdProp)\n  useEffect(() => {\n    onSelectionChangeRef.current = onSelectionChange\n    getRowIdRef.current = getRowIdProp\n  }, [onSelectionChange, getRowIdProp])\n\n  // Fire selection callback when row selection changes (skip when syncing from prop)\n  useEffect(() => {\n    if (isSyncingFromPropRef.current) {\n      isSyncingFromPropRef.current = false\n      return\n    }\n    if (!onSelectionChangeRef.current) return\n    const selectedRowIds = Object.keys(rowSelection).filter((k) => rowSelection[k])\n    const selected = data.filter((_, i) => {\n      const id = getRowIdRef.current ? getRowIdRef.current(data[i]) : String(i)\n      return selectedRowIds.includes(id)\n    })\n    onSelectionChangeRef.current(selected)\n  }, [rowSelection, data])\n\n  const cellPadding = densityPaddingMap[density]\n\n  const rows = table.getRowModel().rows\n\n  // Virtualizer — always called but only active when virtualRows is true\n  const virtualizer = useVirtualizer({\n    count: virtualRows ? rows.length : 0,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => virtualRowHeight,\n    overscan: 10,\n  })\n\n  // Number of skeleton rows for loading state\n  const skeletonRowCount = serverPagination?.pageSize ?? initialPageSize ?? 5\n\n  // Get selected rows for bulk actions (derived from rowSelection + data, not table instance)\n  const selectedRows = useMemo(() => {\n    if (!bulkActions || !selectable) return []\n    const selectedRowIds = Object.keys(rowSelection).filter((k) => rowSelection[k])\n    return data.filter((_, i) => {\n      const id = getRowIdProp ? getRowIdProp(data[i]) : String(i)\n      return selectedRowIds.includes(id)\n    })\n  }, [bulkActions, selectable, rowSelection, data, getRowIdProp])\n\n  const hasSelectedRows = selectedRows.length > 0\n\n  // Total rows for pagination display\n  const totalRowCount = useServerPagination\n    ? serverPagination!.total\n    : table.getFilteredRowModel().rows.length\n\n  // Build context value for sub-components\n  const contextValue = useMemo(\n    () => ({\n      table,\n      allColumns: allColumns.map((col) => ({\n        id: (col as { id?: string }).id,\n        header: (col as { header?: unknown }).header,\n      })),\n      cellPadding,\n      columnPinningState,\n      sortable,\n      filterable,\n      editable,\n      expandable,\n      virtualRows,\n      selectable,\n      mobileView,\n      editingCell,\n      setEditingCell,\n      onCellEdit,\n      renderExpanded,\n      onRowClick,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      table,\n      allColumns.length,\n      cellPadding,\n      columnPinningState,\n      sortable,\n      filterable,\n      editable,\n      expandable,\n      virtualRows,\n      selectable,\n      mobileView,\n      editingCell,\n      onCellEdit,\n      renderExpanded,\n      onRowClick,\n    ],\n  )\n\n  // Virtual items for body\n  const virtualItems = virtualRows ? virtualizer.getVirtualItems() : undefined\n  const totalVirtualSize = virtualRows ? virtualizer.getTotalSize() : undefined\n\n  // Determine if we need a scroll wrapper for virtualization\n  const tableContent = (\n    <Table aria-busy={loading || undefined}>\n      <DataTableHeader stickyHeader={stickyHeader} />\n      <DataTableBody\n        loading={loading}\n        skeletonRowCount={skeletonRowCount}\n        noResultsText={noResultsText}\n        emptyState={emptyState}\n        virtualItems={virtualItems}\n        totalVirtualSize={totalVirtualSize}\n      />\n    </Table>\n  )\n\n  return (\n    <DataTableProvider value={contextValue}>\n      <div className={cn(className)}>\n        {/* Toolbar */}\n        {toolbar && (\n          <DataTableToolbar\n            table={table}\n            globalFilter={globalFilter}\n            globalFilterValue={globalFilterValue}\n            onGlobalFilterChange={setGlobalFilterValue}\n            density={density}\n            onDensityChange={setDensity}\n          />\n        )}\n\n        {/* Global search input — only show standalone when toolbar is disabled */}\n        {globalFilter && !toolbar && (\n          <div className=\"flex items-center gap-ds-03 pb-ds-04 border-b border-surface-border mb-ds-04\">\n            <Icon icon={IconSearch} size=\"sm\" className=\"text-surface-fg-subtle\" />\n            <input\n              type=\"text\"\n              value={globalFilterValue}\n              onChange={(e) => setGlobalFilterValue(e.target.value)}\n              placeholder=\"Search all columns...\"\n              aria-label=\"Search all columns\"\n              className={cn(\n                'flex-1 bg-transparent text-ds-md',\n                'text-surface-fg placeholder:text-surface-fg-subtle',\n                'outline-hidden',\n              )}\n            />\n          </div>\n        )}\n\n        {/* Card view on small screens, or standard table */}\n        {showCards ? (\n          <DataTableCards\n            loading={loading}\n            skeletonRowCount={skeletonRowCount}\n            noResultsText={noResultsText}\n            emptyState={emptyState}\n          />\n        ) : virtualRows ? (\n          <div\n            ref={scrollContainerRef}\n            style={{ maxHeight: `${maxHeight}px`, overflowY: 'auto' }}\n          >\n            {tableContent}\n          </div>\n        ) : (\n          tableContent\n        )}\n\n        {/* Pagination controls */}\n        {showPagination && (\n          <DataTablePagination\n            table={table}\n            totalRowCount={totalRowCount}\n            useServerPagination={useServerPagination}\n            pageSizeOptions={pageSizeOptions}\n          />\n        )}\n\n        {/* Bulk action bar */}\n        {bulkActions && selectable && hasSelectedRows && (\n          <DataTableBulkActions\n            table={table}\n            selectedRows={selectedRows}\n            bulkActions={bulkActions}\n          />\n        )}\n      </div>\n    </DataTableProvider>\n  )\n}\nDataTable.displayName = 'DataTable'\n"],"mappings":"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"}

package/dist/ui/devalok-grain.js

@@ -1,7 +1,7 @@
 "use client";
-import { a as e, n as t } from "../_chunks/framer.js";
 import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { motion as n, useReducedMotion as r } from "framer-motion";
 //#region src/ui/devalok-grain.tsx
 var i = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")", a = {
 	subtle: {
@@ -34,8 +34,8 @@ var i = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' widt
 	}
 };
 function s({ intensity: s = "subtle", surface: c = "solid", sheen: l = !1, tint: u, animated: d = !1, hoverIntensify: f = !1 }) {
-	let p = t(), m = a[s][c], h = Math.min(m * 1.4, .6), g = o[s], _ = u ? `linear-gradient(135deg, color-mix(in oklch, ${u} ${Math.round(g.ld * 100)}%, transparent), color-mix(in oklch, white ${Math.round(g.ll * 100)}%, transparent))` : `linear-gradient(135deg, oklch(0 0 0 / ${g.ld}), oklch(1 0 0 / ${g.ll}))`, v = u ? `linear-gradient(135deg, transparent, color-mix(in oklch, ${u} ${Math.round(g.dk * 100)}%, transparent))` : `linear-gradient(135deg, transparent, oklch(0 0 0 / ${g.dk}))`, y = d && !p;
-	return /* @__PURE__ */ r(y ? e.span : "span", {
+	let p = r(), m = a[s][c], h = Math.min(m * 1.4, .6), g = o[s], _ = u ? `linear-gradient(135deg, color-mix(in oklch, ${u} ${Math.round(g.ld * 100)}%, transparent), color-mix(in oklch, white ${Math.round(g.ll * 100)}%, transparent))` : `linear-gradient(135deg, oklch(0 0 0 / ${g.ld}), oklch(1 0 0 / ${g.ll}))`, v = u ? `linear-gradient(135deg, transparent, color-mix(in oklch, ${u} ${Math.round(g.dk * 100)}%, transparent))` : `linear-gradient(135deg, transparent, oklch(0 0 0 / ${g.dk}))`, y = d && !p;
+	return /* @__PURE__ */ t(y ? n.span : "span", {
 		"data-grain": "",
 		"aria-hidden": "true",
 		className: "pointer-events-none absolute inset-0 z-[1] rounded-[inherit] isolate overflow-hidden",
@@ -53,15 +53,15 @@ function s({ intensity: s = "subtle", surface: c = "solid", sheen: l = !1, tint:
 			}
 		} : {},
 		children: [
-			_ && /* @__PURE__ */ n("span", {
+			_ && /* @__PURE__ */ e("span", {
 				className: `absolute inset-0 dark:hidden transition-opacity duration-300 ${f ? "group-hover:opacity-100 opacity-80" : ""}`,
 				style: { background: _ }
 			}),
-			v && /* @__PURE__ */ n("span", {
+			v && /* @__PURE__ */ e("span", {
 				className: `absolute inset-0 hidden dark:block transition-opacity duration-300 ${f ? "group-hover:opacity-100 opacity-80" : ""}`,
 				style: { background: v }
 			}),
-			/* @__PURE__ */ n("span", {
+			/* @__PURE__ */ e("span", {
 				className: `absolute inset-0 transition-opacity duration-300 ${f ? "group-hover:opacity-[var(--grain-hover-opacity)]" : ""}`,
 				style: {
 					backgroundImage: i,
@@ -71,7 +71,7 @@ function s({ intensity: s = "subtle", surface: c = "solid", sheen: l = !1, tint:
 					"--grain-hover-opacity": f ? h : void 0
 				}
 			}),
-			l && /* @__PURE__ */ n("span", { className: "absolute inset-0 shadow-raised-inner" })
+			l && /* @__PURE__ */ e("span", { className: "absolute inset-0 shadow-raised-inner" })
 		]
 	});
 }