@devalok/shilp-sutra 0.56.0 → 0.57.0

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

@@ -21,6 +21,8 @@ export interface DataTableContextValue<TData = unknown> {
     sortable: boolean;
     /** Whether per-column filters are enabled */
     filterable: boolean;
+    /** When set, only these column IDs get filter inputs (subset of filterable columns) */
+    filterableColumns?: string[];
     /** Whether inline editing is enabled */
     editable: boolean;
     /** Whether row expansion is enabled */
@@ -41,6 +43,8 @@ export interface DataTableContextValue<TData = unknown> {
     renderExpanded?: (row: TData) => React.ReactNode;
     /** Row click handler */
     onRowClick?: (row: TData) => void;
+    /** Return a className for a given row — applied to the tr in table and card layouts */
+    rowClassName?: (row: TData) => string | undefined;
 }
 export declare function DataTableProvider<TData>({ children, value, }: {
     children: React.ReactNode;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"data-table-context.js","names":[],"sources":["../../src/ui/data-table-context.tsx"],"sourcesContent":["'use client'\n\nimport { type ColumnPinningState, type Table } from '@tanstack/react-table'\nimport React from 'react'\n\n// ── Shared types ────────────────────────────────────────────────\n\n/** Editing state: which cell is currently in edit mode */\nexport type EditingCell = { rowIndex: number; columnId: string } | null\n\n// ── Utility functions ───────────────────────────────────────────\n\nexport function getColumnMetaClasses(meta?: Record<string, unknown>): string {\n  if (!meta) return ''\n  const classes: string[] = []\n  if (meta.align === 'right') classes.push('text-right tabular-nums')\n  if (meta.align === 'center') classes.push('text-center')\n  if (meta.hideBelow === 'sm') classes.push('hidden sm:table-cell')\n  if (meta.hideBelow === 'md') classes.push('hidden md:table-cell')\n  if (meta.hideBelow === 'lg') classes.push('hidden lg:table-cell')\n  return classes.join(' ')\n}\n\n/** Interactive element selectors for row click filtering */\nexport const INTERACTIVE_SELECTOR =\n  'button, a, input, select, textarea, [role=\"checkbox\"]'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport interface DataTableContextValue<TData = unknown> {\n  table: Table<TData>\n  /** All assembled columns (including _select, _expand) */\n  allColumns: { id?: string; header?: unknown }[]\n  /** Column pinning state for sticky positioning */\n  columnPinningState: ColumnPinningState\n  /** Whether sorting is enabled */\n  sortable: boolean\n  /** Whether per-column filters are enabled */\n  filterable: boolean\n  /** Whether inline editing is enabled */\n  editable: boolean\n  /** Whether row expansion is enabled */\n  expandable: boolean\n  /** Whether virtual rows are enabled */\n  virtualRows: boolean\n  /** Whether row selection is enabled */\n  selectable: boolean\n  /** Mobile view mode */\n  mobileView: 'card' | 'table'\n  /** Current editing cell */\n  editingCell: EditingCell\n  /** Set editing cell */\n  setEditingCell: (cell: EditingCell) => void\n  /** Callback when a cell value is edited */\n  onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void\n  /** Render function for expanded row content */\n  renderExpanded?: (row: TData) => React.ReactNode\n  /** Row click handler */\n  onRowClick?: (row: TData) => void\n}\n\nconst DataTableContext = React.createContext<DataTableContextValue | null>(null)\n\nexport function DataTableProvider<TData>({\n  children,\n  value,\n}: {\n  children: React.ReactNode\n  value: DataTableContextValue<TData>\n}) {\n  return (\n    <DataTableContext.Provider value={value as DataTableContextValue}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport function useDataTableContext<TData = unknown>() {\n  const ctx = React.useContext(DataTableContext)\n  if (!ctx) throw new Error('useDataTableContext must be used within DataTableProvider')\n  return ctx as DataTableContextValue<TData>\n}\n\n// ── Shared helpers ──────────────────────────────────────────────\n\n/** Compute sticky positioning styles for pinned columns */\nexport function getPinnedCellStyle(\n  columnId: string,\n  columnPinningState: ColumnPinningState,\n) {\n  const { left = [], right = [] } = columnPinningState\n  const leftIndex = left.indexOf(columnId)\n  const rightIndex = right.indexOf(columnId)\n\n  if (leftIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { left: 0 } as React.CSSProperties,\n    }\n  }\n  if (rightIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { right: 0 } as React.CSSProperties,\n    }\n  }\n  return { className: '', style: {} as React.CSSProperties }\n}\n\n/** Check if a column allows editing */\nexport function isColumnEditable<TData>(\n  columnId: string,\n  editable: boolean,\n  table: Table<TData>,\n): boolean {\n  if (!editable) return false\n  // Internal columns are never editable\n  if (columnId === '_select' || columnId === '_expand') return false\n  const col = table.getColumn(columnId)\n  if (!col) return false\n  const meta = col.columnDef.meta as\n    | { enableEditing?: boolean }\n    | undefined\n  // Editable by default unless explicitly disabled\n  if (meta?.enableEditing === false) return false\n  return true\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAqB,GAAwC;CAC3E,IAAI,CAAC,GAAM,OAAO;CAClB,IAAM,IAAoB,CAAC;CAM3B,OALI,EAAK,UAAU,WAAS,EAAQ,KAAK,yBAAyB,GAC9D,EAAK,UAAU,YAAU,EAAQ,KAAK,aAAa,GACnD,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GAC5D,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GAC5D,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GACzD,EAAQ,KAAK,GAAG;AACzB;AAGA,IAAa,IACX,2DAoCI,IAAmB,EAAM,cAA4C,IAAI;AAE/E,SAAgB,EAAyB,EACvC,aACA,YAIC;CACD,OACE,kBAAC,EAAiB,UAAlB;EAAkC;EAC/B;CACwB,CAAA;AAE/B;AAEA,SAAgB,IAAuC;CACrD,IAAM,IAAM,EAAM,WAAW,CAAgB;CAC7C,IAAI,CAAC,GAAK,MAAU,MAAM,2DAA2D;CACrF,OAAO;AACT;AAKA,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,UAAO,CAAC,GAAG,WAAQ,CAAC,MAAM,GAC5B,IAAY,EAAK,QAAQ,CAAQ,GACjC,IAAa,EAAM,QAAQ,CAAQ;CAczC,OAZI,MAAc,KAMd,MAAe,KAMZ;EAAE,WAAW;EAAI,OAAO,CAAC;CAAyB,IALhD;EACL,WAAW;EACX,OAAO,EAAE,OAAO,EAAE;CACpB,IATO;EACL,WAAW;EACX,OAAO,EAAE,MAAM,EAAE;CACnB;AASJ;AAGA,SAAgB,EACd,GACA,GACA,GACS;CAGT,IAFI,CAAC,KAED,MAAa,aAAa,MAAa,WAAW,OAAO;CAC7D,IAAM,IAAM,EAAM,UAAU,CAAQ;CAOpC,OADA,EALI,CAAC,KACQ,EAAI,UAAU,MAIjB,kBAAkB;AAE9B"}
+{"version":3,"file":"data-table-context.js","names":[],"sources":["../../src/ui/data-table-context.tsx"],"sourcesContent":["'use client'\n\nimport { type ColumnPinningState, type Table } from '@tanstack/react-table'\nimport React from 'react'\n\n// ── Shared types ────────────────────────────────────────────────\n\n/** Editing state: which cell is currently in edit mode */\nexport type EditingCell = { rowIndex: number; columnId: string } | null\n\n// ── Utility functions ───────────────────────────────────────────\n\nexport function getColumnMetaClasses(meta?: Record<string, unknown>): string {\n  if (!meta) return ''\n  const classes: string[] = []\n  if (meta.align === 'right') classes.push('text-right tabular-nums')\n  if (meta.align === 'center') classes.push('text-center')\n  if (meta.hideBelow === 'sm') classes.push('hidden sm:table-cell')\n  if (meta.hideBelow === 'md') classes.push('hidden md:table-cell')\n  if (meta.hideBelow === 'lg') classes.push('hidden lg:table-cell')\n  return classes.join(' ')\n}\n\n/** Interactive element selectors for row click filtering */\nexport const INTERACTIVE_SELECTOR =\n  'button, a, input, select, textarea, [role=\"checkbox\"]'\n\n// ── Context ─────────────────────────────────────────────────────\n\nexport interface DataTableContextValue<TData = unknown> {\n  table: Table<TData>\n  /** All assembled columns (including _select, _expand) */\n  allColumns: { id?: string; header?: unknown }[]\n  /** Column pinning state for sticky positioning */\n  columnPinningState: ColumnPinningState\n  /** Whether sorting is enabled */\n  sortable: boolean\n  /** Whether per-column filters are enabled */\n  filterable: boolean\n  /** When set, only these column IDs get filter inputs (subset of filterable columns) */\n  filterableColumns?: string[]\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  /** Return a className for a given row — applied to the tr in table and card layouts */\n  rowClassName?: (row: TData) => string | undefined\n}\n\nconst DataTableContext = React.createContext<DataTableContextValue | null>(null)\n\nexport function DataTableProvider<TData>({\n  children,\n  value,\n}: {\n  children: React.ReactNode\n  value: DataTableContextValue<TData>\n}) {\n  return (\n    <DataTableContext.Provider value={value as DataTableContextValue}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport function useDataTableContext<TData = unknown>() {\n  const ctx = React.useContext(DataTableContext)\n  if (!ctx) throw new Error('useDataTableContext must be used within DataTableProvider')\n  return ctx as DataTableContextValue<TData>\n}\n\n// ── Shared helpers ──────────────────────────────────────────────\n\n/** Compute sticky positioning styles for pinned columns */\nexport function getPinnedCellStyle(\n  columnId: string,\n  columnPinningState: ColumnPinningState,\n) {\n  const { left = [], right = [] } = columnPinningState\n  const leftIndex = left.indexOf(columnId)\n  const rightIndex = right.indexOf(columnId)\n\n  if (leftIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { left: 0 } as React.CSSProperties,\n    }\n  }\n  if (rightIndex !== -1) {\n    return {\n      className: 'sticky bg-surface-base z-raised',\n      style: { right: 0 } as React.CSSProperties,\n    }\n  }\n  return { className: '', style: {} as React.CSSProperties }\n}\n\n/** Check if a column allows editing */\nexport function isColumnEditable<TData>(\n  columnId: string,\n  editable: boolean,\n  table: Table<TData>,\n): boolean {\n  if (!editable) return false\n  // Internal columns are never editable\n  if (columnId === '_select' || columnId === '_expand') return false\n  const col = table.getColumn(columnId)\n  if (!col) return false\n  const meta = col.columnDef.meta as\n    | { enableEditing?: boolean }\n    | undefined\n  // Editable by default unless explicitly disabled\n  if (meta?.enableEditing === false) return false\n  return true\n}\n"],"mappings":";;;;AAYA,SAAgB,EAAqB,GAAwC;CAC3E,IAAI,CAAC,GAAM,OAAO;CAClB,IAAM,IAAoB,CAAC;CAM3B,OALI,EAAK,UAAU,WAAS,EAAQ,KAAK,yBAAyB,GAC9D,EAAK,UAAU,YAAU,EAAQ,KAAK,aAAa,GACnD,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GAC5D,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GAC5D,EAAK,cAAc,QAAM,EAAQ,KAAK,sBAAsB,GACzD,EAAQ,KAAK,GAAG;AACzB;AAGA,IAAa,IACX,2DAwCI,IAAmB,EAAM,cAA4C,IAAI;AAE/E,SAAgB,EAAyB,EACvC,aACA,YAIC;CACD,OACE,kBAAC,EAAiB,UAAlB;EAAkC;EAC/B;CACwB,CAAA;AAE/B;AAEA,SAAgB,IAAuC;CACrD,IAAM,IAAM,EAAM,WAAW,CAAgB;CAC7C,IAAI,CAAC,GAAK,MAAU,MAAM,2DAA2D;CACrF,OAAO;AACT;AAKA,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,UAAO,CAAC,GAAG,WAAQ,CAAC,MAAM,GAC5B,IAAY,EAAK,QAAQ,CAAQ,GACjC,IAAa,EAAM,QAAQ,CAAQ;CAczC,OAZI,MAAc,KAMd,MAAe,KAMZ;EAAE,WAAW;EAAI,OAAO,CAAC;CAAyB,IALhD;EACL,WAAW;EACX,OAAO,EAAE,OAAO,EAAE;CACpB,IATO;EACL,WAAW;EACX,OAAO,EAAE,MAAM,EAAE;CACnB;AASJ;AAGA,SAAgB,EACd,GACA,GACA,GACS;CAGT,IAFI,CAAC,KAED,MAAa,aAAa,MAAa,WAAW,OAAO;CAC7D,IAAM,IAAM,EAAM,UAAU,CAAQ;CAOpC,OADA,EALI,CAAC,KACQ,EAAI,UAAU,MAIjB,kBAAkB;AAE9B"}

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

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

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

@@ -11,18 +11,18 @@ 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 } = a();
+	let { table: v, sortable: y, filterable: b, filterableColumns: x, columnPinningState: S } = a();
 	return /* @__PURE__ */ u(s, {
-		className: t(_ && "sticky top-0 z-10 bg-surface-raised"),
+		className: t(_ && "sticky top-0 z-10 bg-surface-panel"),
 		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);
+			let s = y && a.column.getCanSort(), c = a.column.getIsSorted(), _ = i(a.column.id, S);
 			return /* @__PURE__ */ l(o, {
 				className: t(_.className, r(a.column.columnDef.meta)),
 				style: _.style,
 				"aria-sort": s ? c === "asc" ? "ascending" : c === "desc" ? "descending" : "none" : void 0,
 				children: a.isPlaceholder ? null : s ? /* @__PURE__ */ u("button", {
 					type: "button",
-					className: t("flex items-center gap-ds-01 font-medium", "cursor-pointer select-none", "-ml-ds-01 rounded-control-inner px-ds-01 py-ds-01", "hover:bg-surface-raised-hover transition-colors"),
+					className: t("flex items-center gap-ds-01 font-medium", "cursor-pointer select-none", "-ml-ds-01 rounded-control-inner px-ds-01 py-ds-01", "hover:bg-surface-panel-hover transition-colors"),
 					onClick: a.column.getToggleSortingHandler(),
 					"aria-label": `Sort by ${typeof a.column.columnDef.header == "string" ? a.column.columnDef.header : a.column.id}`,
 					children: [g(a.column.columnDef.header, a.getContext()), /* @__PURE__ */ l(m, {
@@ -83,17 +83,20 @@ function _({ stickyHeader: _ }) {
 					})]
 				}) : 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__ */ 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: t("h-ds-xs-plus w-full rounded-control", "border border-card-strong bg-surface-raised-hover", "px-ds-02 text-body-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7")
-			})
-		}, `${e.id}-filter`)) }, `${e.id}-filters`))]
+		}) }, a.id)), b && v.getHeaderGroups().map((e) => /* @__PURE__ */ l(c, { children: e.headers.map((e) => {
+			let n = x ? x.includes(e.column.id) : e.column.columnDef.enableColumnFilter !== !1;
+			return /* @__PURE__ */ l(o, {
+				className: "py-ds-01",
+				children: e.isPlaceholder || !n ? 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: t("h-ds-xs-plus w-full rounded-control", "border border-card-strong bg-surface-panel-hover", "px-ds-02 text-body-sm", "text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus:border-accent-7")
+				})
+			}, `${e.id}-filter`);
+		}) }, `${e.id}-filters`))]
 	});
 }
 //#endregion

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 {\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        // surface-raised, not base — the table lives on a card; a base-colored\n        // sticky bar would read as a grey stripe over the white surface.\n        stickyHeader && 'sticky top-0 z-10 bg-surface-raised',\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-control-inner px-ds-01 py-ds-01',\n                      'hover:bg-surface-raised-hover 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-control',\n                      'border border-card-strong bg-surface-raised-hover',\n                      'px-ds-02 text-body-sm',\n                      'text-surface-fg placeholder:text-surface-fg-subtle',\n                      'outline-hidden focus:border-accent-7',\n                    )}\n                  />\n                )}\n              </TableHead>\n            ))}\n          </TableRow>\n        ))}\n    </TableHeader>\n  )\n}\n\nexport { DataTableHeaderImpl as DataTableHeader }\n"],"mappings":"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"}
+{"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, filterableColumns, columnPinningState } =\n    useDataTableContext()\n\n  return (\n    <TableHeader\n      className={cn(\n        // surface-panel, not base — the table lives on a card; a base-colored\n        // sticky bar would read as a grey stripe over the white surface.\n        stickyHeader && 'sticky top-0 z-10 bg-surface-panel',\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-control-inner px-ds-01 py-ds-01',\n                      'hover:bg-surface-panel-hover 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              // When filterableColumns is set, only render inputs for listed IDs.\n              // Falls back to the existing enableColumnFilter: false column-level opt-out.\n              const isFiltered = filterableColumns\n                ? filterableColumns.includes(header.column.id)\n                : header.column.columnDef.enableColumnFilter !== false\n              return (\n                <TableHead key={`${header.id}-filter`} className=\"py-ds-01\">\n                  {header.isPlaceholder || !isFiltered ? 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-control',\n                        'border border-card-strong bg-surface-panel-hover',\n                        'px-ds-02 text-body-sm',\n                        'text-surface-fg placeholder:text-surface-fg-subtle',\n                        'outline-hidden focus:border-accent-7',\n                      )}\n                    />\n                  )}\n                </TableHead>\n              )\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

@@ -20,7 +20,7 @@ function o({ table: o, totalRowCount: s, useServerPagination: c, pageSizeOptions
 						o.setPageSize(Number(e.target.value));
 					},
 					"aria-label": "Rows per page",
-					className: e("h-ds-sm rounded-control", "border border-card-strong bg-surface-raised-hover", "px-ds-03 text-body-sm", "text-surface-fg"),
+					className: e("h-ds-sm rounded-control", "border border-card-strong bg-surface-panel-hover", "px-ds-03 text-body-sm", "text-surface-fg"),
 					children: (l ?? [
 						10,
 						20,
@@ -36,7 +36,7 @@ function o({ table: o, totalRowCount: s, useServerPagination: c, pageSizeOptions
 					disabled: !o.getCanPreviousPage(),
 					onClick: () => o.previousPage(),
 					"aria-label": "Previous page",
-					className: e("h-ds-sm w-ds-sm flex items-center justify-center", "rounded-control border border-surface-border-strong", "enabled:hover:bg-surface-raised", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
+					className: e("h-ds-sm w-ds-sm flex items-center justify-center", "rounded-control border border-surface-border-strong", "enabled:hover:bg-surface-panel-hover", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
 					children: /* @__PURE__ */ n(t, {
 						icon: i,
 						size: "sm"
@@ -57,7 +57,7 @@ function o({ table: o, totalRowCount: s, useServerPagination: c, pageSizeOptions
 					disabled: !o.getCanNextPage(),
 					onClick: () => o.nextPage(),
 					"aria-label": "Next page",
-					className: e("h-ds-sm w-ds-sm flex items-center justify-center", "rounded-control border border-surface-border-strong", "enabled:hover:bg-surface-raised", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
+					className: e("h-ds-sm w-ds-sm flex items-center justify-center", "rounded-control border border-surface-border-strong", "enabled:hover:bg-surface-panel-hover", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
 					children: /* @__PURE__ */ n(t, {
 						icon: a,
 						size: "sm"

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 { 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-body-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-control',\n              'border border-card-strong bg-surface-raised-hover',\n              'px-ds-03 text-body-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-control 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-body-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-control 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;CACD,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,GAAc,aACX;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEG,CAAC,KACA,kBAAC,UAAD;KACE,OAAO,EAAM,SAAS,CAAC,CAAC,WAAW;KACnC,WAAW,MAAM;MACf,EAAM,YAAY,OAAO,EAAE,OAAO,KAAK,CAAC;KAC1C;KACA,cAAW;KACX,WAAW,EACT,2BACA,qDACA,yBACA,iBACF;gBAEE,KAAmB;MAAC;MAAI;MAAI;MAAI;KAAG,EAAA,CAAG,KAAK,MAC3C,kBAAC,UAAD;MAAmB,OAAO;gBAA1B,CACG,GAAK,OACA;QAFK,CAEL,CACT;IACK,CAAA;IAIV,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,mBAAmB;KACpC,eAAe,EAAM,aAAa;KAClC,cAAW;KACX,WAAW,EACT,oDACA,uDACA,mCACA,gEACA,mBACF;eAEA,kBAAC,GAAD;MAAM,MAAM;MAAiB,MAAK;KAAM,CAAA;IAClC,CAAA;IAGR,kBAAC,QAAD;KAAM,WAAU;eAAhB;MAAqD;MAC7C,EAAM,SAAS,CAAC,CAAC,WAAW,YAAY;MAAE;MAAI;MACnD,EAAM,aAAa;KAChB;;IAGN,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,eAAe;KAChC,eAAe,EAAM,SAAS;KAC9B,cAAW;KACX,WAAW,EACT,oDACA,uDACA,mCACA,gEACA,mBACF;eAEA,kBAAC,GAAD;MAAM,MAAM;MAAkB,MAAK;KAAM,CAAA;IACnC,CAAA;GACL;IACF;;AAET"}
+{"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-body-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-control',\n              'border border-card-strong bg-surface-panel-hover',\n              'px-ds-03 text-body-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-control border border-surface-border-strong',\n            'enabled:hover:bg-surface-panel-hover',\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-body-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-control border border-surface-border-strong',\n            'enabled:hover:bg-surface-panel-hover',\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;CACD,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,GAAc,aACX;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEG,CAAC,KACA,kBAAC,UAAD;KACE,OAAO,EAAM,SAAS,CAAC,CAAC,WAAW;KACnC,WAAW,MAAM;MACf,EAAM,YAAY,OAAO,EAAE,OAAO,KAAK,CAAC;KAC1C;KACA,cAAW;KACX,WAAW,EACT,2BACA,oDACA,yBACA,iBACF;gBAEE,KAAmB;MAAC;MAAI;MAAI;MAAI;KAAG,EAAA,CAAG,KAAK,MAC3C,kBAAC,UAAD;MAAmB,OAAO;gBAA1B,CACG,GAAK,OACA;QAFK,CAEL,CACT;IACK,CAAA;IAIV,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,mBAAmB;KACpC,eAAe,EAAM,aAAa;KAClC,cAAW;KACX,WAAW,EACT,oDACA,uDACA,wCACA,gEACA,mBACF;eAEA,kBAAC,GAAD;MAAM,MAAM;MAAiB,MAAK;KAAM,CAAA;IAClC,CAAA;IAGR,kBAAC,QAAD;KAAM,WAAU;eAAhB;MAAqD;MAC7C,EAAM,SAAS,CAAC,CAAC,WAAW,YAAY;MAAE;MAAI;MACnD,EAAM,aAAa;KAChB;;IAGN,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC,EAAM,eAAe;KAChC,eAAe,EAAM,SAAS;KAC9B,cAAW;KACX,WAAW,EACT,oDACA,uDACA,wCACA,gEACA,mBACF;eAEA,kBAAC,GAAD;MAAM,MAAM;MAAkB,MAAK;KAAM,CAAA;IACnC,CAAA;GACL;IACF;;AAET"}

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

@@ -8,9 +8,19 @@ export interface DataTableToolbarProps<TData> extends Omit<React.HTMLAttributes<
     onGlobalFilterChange: (value: string) => void;
     density: Density;
     onDensityChange: (density: Density) => void;
+    /** Show the Export CSV button. @default true */
     enableExport?: boolean;
+    /**
+     * Override the default CSV export. When provided, clicking Export calls this
+     * instead of the built-in client-side CSV logic. Receives the currently visible
+     * filtered rows so you can trigger a server fetch or apply custom formatting.
+     *
+     * Same signature as `DataTable`'s `onExport`, so the prop can be forwarded
+     * straight through.
+     */
+    onExport?: (visibleRows: TData[]) => void;
 }
-export declare function DataTableToolbar<TData>({ table, globalFilter, globalFilterValue, onGlobalFilterChange, density, onDensityChange, enableExport, className, ...props }: DataTableToolbarProps<TData>): React.JSX.Element;
+export declare function DataTableToolbar<TData>({ table, globalFilter, globalFilterValue, onGlobalFilterChange, density, onDensityChange, enableExport, onExport, className, ...props }: DataTableToolbarProps<TData>): React.JSX.Element;
 export declare namespace DataTableToolbar {
     var displayName: string;
 }

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":"AAQA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,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;AAyCD,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,qBA8F9B;yBAxGe,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;AAc9B,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,gDAAgD;IAChD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,IAAI,CAAA;CAC1C;AAyCD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,EACtC,KAAK,EACL,YAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,OAAO,EACP,eAAe,EACf,YAAmB,EACnB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,KAAK,CAAC,qBAoG9B;yBA/Ge,gBAAgB"}

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

@@ -26,11 +26,11 @@ function v(e) {
 	})), r = [t.join(","), ...n.map((e) => e.join(","))].join("\n"), i = new Blob([r], { type: "text/csv;charset=utf-8;" }), a = URL.createObjectURL(i), o = document.createElement("a");
 	o.href = a, o.download = "table-export.csv", o.click(), URL.revokeObjectURL(a);
 }
-function y({ table: y, globalFilter: b = !1, globalFilterValue: x, onGlobalFilterChange: S, density: C, onDensityChange: w, enableExport: T = !0, className: E, ...D }) {
-	let O = y.getAllColumns().filter((e) => e.getCanHide() && e.id !== "_select");
+function y({ table: y, globalFilter: b = !1, globalFilterValue: x, onGlobalFilterChange: S, density: C, onDensityChange: w, enableExport: T = !0, onExport: E, className: D, ...O }) {
+	let k = y.getAllColumns().filter((e) => e.getCanHide() && e.id !== "_select");
 	return /* @__PURE__ */ u("div", {
-		className: e("flex items-center gap-ds-03 pb-ds-04", E),
-		...D,
+		className: e("flex items-center gap-ds-03 pb-ds-04", D),
+		...O,
 		children: [b && /* @__PURE__ */ u("div", {
 			className: "flex flex-1 items-center gap-ds-02",
 			children: [/* @__PURE__ */ l(t, {
@@ -48,7 +48,7 @@ function y({ table: y, globalFilter: b = !1, globalFilterValue: x, onGlobalFilte
 		}), /* @__PURE__ */ u("div", {
 			className: "ml-auto flex items-center gap-ds-03",
 			children: [
-				O.length > 0 && /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(c, {
+				k.length > 0 && /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(c, {
 					asChild: !0,
 					children: /* @__PURE__ */ u(n, {
 						variant: "outline",
@@ -67,7 +67,7 @@ function y({ table: y, globalFilter: b = !1, globalFilterValue: x, onGlobalFilte
 					children: [
 						/* @__PURE__ */ l(o, { children: "Toggle columns" }),
 						/* @__PURE__ */ l(s, {}),
-						O.map((e) => {
+						k.map((e) => {
 							let t = e.columnDef.header, n = typeof t == "string" ? t : e.id;
 							return /* @__PURE__ */ l(i, {
 								checked: e.getIsVisible(),
@@ -94,7 +94,7 @@ function y({ table: y, globalFilter: b = !1, globalFilterValue: x, onGlobalFilte
 					variant: "outline",
 					color: "neutral",
 					size: "sm",
-					onClick: () => v(y),
+					onClick: () => E ? E(y.getFilteredRowModel().rows.map((e) => e.original)) : v(y),
 					"aria-label": "Export table as CSV",
 					children: [/* @__PURE__ */ l(t, {
 						icon: f,

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 {\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 { Button } from './button'\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 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-body-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                variant=\"outline\"\n                color=\"neutral\"\n                size=\"sm\"\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          variant=\"outline\"\n          color=\"neutral\"\n          size=\"sm\"\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            variant=\"outline\"\n            color=\"neutral\"\n            size=\"sm\"\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 { Button } from './button'\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  /** Show the Export CSV button. @default true */\n  enableExport?: boolean\n  /**\n   * Override the default CSV export. When provided, clicking Export calls this\n   * instead of the built-in client-side CSV logic. Receives the currently visible\n   * filtered rows so you can trigger a server fetch or apply custom formatting.\n   *\n   * Same signature as `DataTable`'s `onExport`, so the prop can be forwarded\n   * straight through.\n   */\n  onExport?: (visibleRows: TData[]) => void\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  onExport,\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-body-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                variant=\"outline\"\n                color=\"neutral\"\n                size=\"sm\"\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          variant=\"outline\"\n          color=\"neutral\"\n          size=\"sm\"\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            variant=\"outline\"\n            color=\"neutral\"\n            size=\"sm\"\n            onClick={() =>\n              onExport\n                ? onExport(\n                    table.getFilteredRowModel().rows.map((r) => r.original),\n                  )\n                : exportToCsv(table)\n            }\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,6 +1,6 @@
 import { ColumnDef, RowData } from '@tanstack/react-table';
 import { default as React } from 'react';
-import { BulkAction } from './data-table-bulk-actions.js';
+import { BulkAction, BulkActionsPosition } from './data-table-bulk-actions.js';
 import { Density } from './data-table-toolbar.js';
 export type { BulkAction } from './data-table-bulk-actions.js';
 declare module '@tanstack/react-table' {
@@ -91,8 +91,13 @@ export interface DataTableProps<TData, TValue> {
     pageSizeOptions?: number[];
     /** Enable row selection with checkboxes */
     selectable?: boolean;
-    /** Callback when row selection changes */
-    onSelectionChange?: (selectedRows: TData[]) => void;
+    /**
+     * Callback when row selection changes.
+     * Second argument `selectedIds` is the set of selected row IDs — the natural
+     * complement of the `selectedIds` controlled prop, so you never have to
+     * re-derive them yourself.
+     */
+    onSelectionChange?: (selectedRows: TData[], selectedIds: Set<string>) => void;
     /** Show toolbar above the table with column visibility, density, and export controls */
     toolbar?: boolean;
     /** Row density — controls cell vertical padding */
@@ -112,7 +117,11 @@ export interface DataTableProps<TData, TValue> {
     renderExpanded?: (row: TData) => React.ReactNode;
     /** Enable row virtualization for large datasets */
     virtualRows?: boolean;
-    /** Height of each virtual row in pixels (default 48) */
+    /**
+     * Estimated height of each virtual row in pixels (default 48). Real heights are
+     * measured after mount, so this only has to be close — it decides the initial
+     * scroll extent and how many rows render before the first measurement pass.
+     */
     virtualRowHeight?: number;
     /** Maximum height of the scrollable container in pixels (default 600) */
     maxHeight?: number;
@@ -143,10 +152,48 @@ export interface DataTableProps<TData, TValue> {
     onRowClick?: (row: TData) => void;
     /** Actions shown in a floating bar when rows are selected */
     bulkActions?: BulkAction<TData>[];
+    /** Where the bulk-actions bar renders. @default 'bottom' */
+    bulkActionsPosition?: BulkActionsPosition;
     /** Render rows as stacked cards on small screens (below sm breakpoint). Default 'table'. */
     mobileView?: 'card' | 'table';
+    /**
+     * Whether to show the Export CSV button in the toolbar. Defaults to `true`
+     * (the button has always rendered whenever `toolbar` is on). Pass `false` to
+     * hide it — worth doing with server-side `pagination`, where the built-in CSV
+     * export can only see the current page's rows; `onExport` is the other answer
+     * there, since it lets you fetch the full set yourself.
+     */
+    enableExport?: boolean;
+    /**
+     * Override the default client-side CSV export. Receives the currently visible
+     * (filtered) rows so you can trigger a server-side full export or apply custom
+     * formatting. When provided, the built-in CSV logic is skipped entirely.
+     */
+    onExport?: (visibleRows: TData[]) => void;
+    /**
+     * Restrict filter inputs to specific column IDs. Only effective when
+     * `filterable` is true. When omitted, all columns without
+     * `enableColumnFilter: false` in their `ColumnDef` get a filter input
+     * (existing behaviour). When provided, only the listed columns get inputs.
+     *
+     * @example
+     * // Show filter inputs only for name and email columns
+     * <DataTable filterable filterableColumns={['name', 'email']} />
+     */
+    filterableColumns?: string[];
+    /**
+     * Return a className string for a given row — applied to the `<tr>` in table
+     * layout and to the `Card` in `mobileView="card"` layout.
+     *
+     * The return value is passed through `cn()` verbatim, so an invented class
+     * silently does nothing. Use real token steps (`bg-error-3`, `bg-warning-3`).
+     *
+     * @example
+     * rowClassName={(row) => row.status === 'overdue' ? 'bg-error-3' : undefined}
+     */
+    rowClassName?: (row: TData) => string | undefined;
 }
-export declare function DataTable<TData, TValue>({ columns, data, className, noResultsText, sortable, filterable, globalFilter, paginated, pageSize: initialPageSize, pageSizeOptions, selectable, onSelectionChange, toolbar, density: initialDensity, columnPinning: initialColumnPinning, editable, onCellEdit, expandable, renderExpanded, virtualRows, virtualRowHeight, maxHeight, onSort, emptyState, loading, selectedIds, selectableFilter, getRowId: getRowIdProp, pagination: serverPagination, singleExpand, stickyHeader, onRowClick, bulkActions, mobileView, }: DataTableProps<TData, TValue>): React.JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, className, noResultsText, sortable, filterable, globalFilter, paginated, pageSize: initialPageSize, pageSizeOptions, selectable, onSelectionChange, toolbar, density: initialDensity, columnPinning: initialColumnPinning, editable, onCellEdit, expandable, renderExpanded, virtualRows, virtualRowHeight, maxHeight, onSort, emptyState, loading, selectedIds, selectableFilter, getRowId: getRowIdProp, pagination: serverPagination, singleExpand, stickyHeader, onRowClick, bulkActions, bulkActionsPosition, mobileView, enableExport, onExport, filterableColumns, rowClassName, }: DataTableProps<TData, TValue>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

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":"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"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/ui/data-table.tsx"],"names":[],"mappings":"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"}