@jiwambe/components 0.3.4 → 0.3.6

package/dist/components/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { DataTableToolbar, DataTableTab } from './DataTableToolbar';\nimport { DataTableHeader, ColumnDef } from './DataTableHeader';\nimport { DataTableRow } from './DataTableRow';\nimport { DataTablePagination } from './DataTablePagination';\nimport { DataTableStatusBadge } from './DataTableStatusBadge';\nimport { DataTableReviewerCell } from './DataTableReviewerCell';\nimport { DataTableCell } from './DataTableCell';\nimport { DataTableRowMenu } from './DataTableRowMenu';\nimport type { DataTableAction } from './DataTableRowMenu';\nimport { Skeleton } from '../Skeleton/Skeleton';\n\n/**\n * Props for the DataTable component.\n */\nexport interface DataTableProps<TRow extends Record<string, unknown>> {\n  /** All rows of data. */\n  rows: TRow[];\n  /** Column definitions. */\n  columns: ColumnDef<TRow>[];\n  /** Tab definitions rendered in the toolbar. @default [] */\n  tabs?: DataTableTab[];\n  /** Currently active tab id. @default undefined */\n  activeTab?: string;\n  /** Fired when the active tab changes. */\n  onTabChange?: (tabId: string) => void;\n  /** Called when row order changes after drag-and-drop. */\n  onRowReorder?: (fromIndex: number, toIndex: number) => void;\n  /** Called when row selection changes. */\n  onSelectionChange?: (selectedRows: TRow[]) => void;\n  /** Controlled page index (0-based). @default 0 */\n  page?: number;\n  /** Fired when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Controlled rows per page. @default 10 */\n  pageSize?: number;\n  /** Fired when the number of rows per page changes. */\n  onPageSizeChange?: (size: number) => void;\n  /** Total row count for server-side pagination. @default rows.length */\n  totalRows?: number;\n  /** Show skeleton loading rows. @default false */\n  loading?: boolean;\n  /** Number of skeleton rows to render while loading. @default 5 */\n  loadingRowCount?: number;\n  /** Label shown in selection summary. @default 'row(s) selected' */\n  selectionLabel?: string;\n  /** When false, hides row and header checkboxes. @default true */\n  selectable?: boolean;\n  /** Actions for each row’s trailing ⋮ menu (built-in column). */\n  getRowActions?: (row: TRow) => DataTableAction[];\n  /** Additional class names for the wrapper. */\n  className?: string;\n}\n\n/**\n * A comprehensive Data Table component with support for tabs, selection,\n * sorting, pagination, and drag-and-drop reordering. Follows Jiwambe design tokens.\n *\n * @example\n * <DataTable\n *   rows={data}\n *   columns={columns}\n *   tabs={[{ id: 'all', label: 'All', count: 12 }, { id: 'pending', label: 'Pending' }]}\n *   activeTab=\"all\"\n *   loading={isLoading}\n * />\n */\nexport function DataTable<TRow extends Record<string, unknown>>({\n  rows,\n  columns,\n  tabs = [],\n  activeTab,\n  onTabChange,\n  onRowReorder,\n  onSelectionChange,\n  page = 0,\n  onPageChange,\n  pageSize = 10,\n  onPageSizeChange,\n  totalRows,\n  loading = false,\n  loadingRowCount = 5,\n  selectionLabel = 'row(s) selected',\n  selectable = true,\n  getRowActions,\n  className = '',\n}: DataTableProps<TRow>) {\n  // --- Selection State ---\n  const [selectedIds, setSelectedIds] = useState<Set<string | number>>(new Set());\n\n  const handleSelectRow = useCallback((row: TRow, isSelected: boolean) => {\n    const idField = 'id' in row ? (row.id as string | number) : JSON.stringify(row);\n    setSelectedIds(prev => {\n      const next = new Set(prev);\n      if (isSelected) next.add(idField);\n      else next.delete(idField);\n      \n      // Notify parent\n      const selectedRows = rows.filter(r => {\n        const rId = 'id' in r ? (r.id as string | number) : JSON.stringify(r);\n        return next.has(rId);\n      });\n      onSelectionChange?.(selectedRows);\n      \n      return next;\n    });\n  }, [rows, onSelectionChange]);\n\n  const handleSelectAll = useCallback((isSelected: boolean) => {\n    if (isSelected) {\n      const allIds = rows.map(r => ('id' in r ? (r.id as string | number) : JSON.stringify(r)));\n      setSelectedIds(new Set(allIds));\n      onSelectionChange?.(rows);\n    } else {\n      setSelectedIds(new Set());\n      onSelectionChange?.([]);\n    }\n  }, [rows, onSelectionChange]);\n\n  const allSelected = useMemo(() => \n    rows.length > 0 && selectedIds.size === rows.length,\n  [rows.length, selectedIds.size]);\n\n  // --- Sorting State (local for demonstration, usually parent-controlled) ---\n  const [sortCol, setSortCol] = useState<string | undefined>();\n  const [sortDir, setSortDir] = useState<'asc' | 'desc' | undefined>();\n\n  const handleSort = (columnId: string) => {\n    if (sortCol === columnId) {\n      setSortDir(prev => prev === 'asc' ? 'desc' : 'asc');\n    } else {\n      setSortCol(columnId);\n      setSortDir('asc');\n    }\n  };\n\n  // --- Drag and Drop State ---\n  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);\n\n  const handleDragStart = (e: React.DragEvent, index: number) => {\n    setDraggedIndex(index);\n    e.dataTransfer.effectAllowed = 'move';\n    // Required for some browsers\n    e.dataTransfer.setData('text/plain', index.toString());\n  };\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault();\n    e.dataTransfer.dropEffect = 'move';\n  };\n\n  const handleDrop = (e: React.DragEvent, index: number) => {\n    e.preventDefault();\n    if (draggedIndex !== null && draggedIndex !== index) {\n      onRowReorder?.(draggedIndex, index);\n    }\n    setDraggedIndex(null);\n  };\n\n  return (\n    <div className={['flex flex-col w-full border border-border-light rounded-rad-md overflow-hidden bg-fill-bg-primary', className].filter(Boolean).join(' ')}>\n      {/* Toolbar */}\n      {(tabs.length > 0 || onTabChange) && (\n        <DataTableToolbar\n          tabs={tabs}\n          activeTab={activeTab}\n          onTabChange={onTabChange}\n          className=\"px-space-4\"\n        />\n      )}\n\n      {/* Table Container */}\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full border-collapse\">\n          <DataTableHeader\n            columns={columns}\n            allSelected={allSelected}\n            onSelectAll={handleSelectAll}\n            sortColumn={sortCol}\n            sortDirection={sortDir}\n            onSort={handleSort}\n            reorderable={!!onRowReorder}\n            selectable={selectable}\n          />\n          <tbody>\n            {loading ? (\n              // Skeleton Loading State\n              Array.from({ length: loadingRowCount }).map((_, idx) => (\n                <tr key={`skeleton-${idx}`} className=\"border-b border-border-light last:border-none\">\n                  {selectable && (\n                    <td className=\"p-space-4 w-[80px]\">\n                      <div className=\"flex items-center gap-space-2 text-left\">\n                        {onRowReorder && <Skeleton width=\"1rem\" height=\"1rem\" radius=\"xs\" />}\n                        <Skeleton width=\"1.25rem\" height=\"1.25rem\" radius=\"xs\" />\n                      </div>\n                    </td>\n                  )}\n                  {columns.map((col) => (\n                    <td key={col.id} className=\"p-space-4\">\n                      <Skeleton.Text width=\"70%\" />\n                    </td>\n                  ))}\n                  <td className=\"p-space-4 w-[60px]\"></td>\n                </tr>\n              ))\n            ) : rows.length === 0 ? (\n              // Empty State\n              <tr>\n                <td\n                  colSpan={columns.length + (selectable ? 1 : 0) + 1}\n                  className=\"p-space-12 text-center text-text-secondary\"\n                >\n                  No data found.\n                </td>\n              </tr>\n            ) : (\n              // Data Rows\n              rows.map((row, idx) => {\n                const id = 'id' in row ? (row.id as string | number) : JSON.stringify(row);\n                return (\n                  <DataTableRow\n                    key={id}\n                    row={row}\n                    rowIndex={idx}\n                    columns={columns}\n                    selected={selectedIds.has(id)}\n                    onSelect={(isSelected) => handleSelectRow(row, isSelected)}\n                    onDragStart={onRowReorder ? handleDragStart : undefined}\n                    onDragOver={onRowReorder ? handleDragOver : undefined}\n                    onDrop={onRowReorder ? handleDrop : undefined}\n                    reorderable={!!onRowReorder}\n                    selectable={selectable}\n                    actions={getRowActions?.(row) ?? []}\n                  />\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Pagination Footer */}\n      {(onPageChange || onPageSizeChange) && (\n        <DataTablePagination\n          page={page}\n          pageSize={pageSize}\n          totalRows={totalRows ?? rows.length}\n          selectedCount={selectedIds.size}\n          selectionLabel={selectionLabel}\n          onPageChange={onPageChange!}\n          onPageSizeChange={onPageSizeChange!}\n          hideSelectionSummary={!selectable}\n        />\n      )}\n    </div>\n  );\n}\n\n// --- Compound Components ---\nDataTable.Header = DataTableHeader;\nDataTable.Row = DataTableRow;\nDataTable.Cell = DataTableCell;\nDataTable.Toolbar = DataTableToolbar;\nDataTable.Pagination = DataTablePagination;\nDataTable.StatusBadge = DataTableStatusBadge;\nDataTable.ReviewerCell = DataTableReviewerCell;\nDataTable.RowMenu = DataTableRowMenu;\n"],"names":[],"mappings":";;;;;;;;;;;;AAqEO;AAAyD;AAC9D;AACA;AACO;AACP;AACA;AACA;AACA;AACO;AACP;AACW;AACX;AACA;AACU;AACQ;AACD;AACJ;AACb;AAEF;AAEE;AAEA;AACE;AACA;AACE;AACA;AAAgC;AAIhC;AACE;AACA;AAAmB;AAErB;AAEA;AAAO;AACR;AAGH;AACE;AACE;AACA;AACA;AAAoB;AAEpB;AACA;AAAoB;AACtB;AAGF;AAAoB;AAC2B;AACjB;AAG9B;AACA;AAEA;AACE;AACE;AAAkD;AAElD;AACA;AAAgB;AAClB;AAIF;AAEA;AACE;AACA;AAEA;AAAqD;AAGvD;AACE;AACA;AAA4B;AAG9B;AACE;AACA;AACE;AAA6B;AAE/B;AAAoB;AAGtB;AAGM;AACA;AAAC;AAAA;AACC;AACA;AACA;AACU;AAAA;AAAA;AAOV;AAAA;AAAC;AAAA;AACC;AACA;AACa;AACD;AACG;AACP;AACO;AACf;AAAA;AAAA;AAGC;AAAA;AAIM;AAGM;AAAiE;AACX;AAE3D;AAMD;AACkC;AAEtC;AACiB;AAAA;AAGhB;AAAC;AAAA;AACkD;AACvC;AACX;AAAA;AAGH;AAAA;AAAA;AAIE;AACA;AACE;AAAC;AAAA;AAEC;AACU;AACV;AAC4B;AAC6B;AACX;AACF;AACR;AACrB;AACf;AACiC;AAAC;AAX7B;AAAA;AAcV;AAEL;AAEJ;AAIE;AAAC;AAAA;AACC;AACA;AAC6B;AACF;AAC3B;AACA;AACA;AACuB;AAAA;AAAA;AAKjC;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/components/DataTable/DataTable.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DataTable.test.d.ts.map

package/dist/components/DataTable/DataTable.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.test.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.test.tsx"],"names":[],"mappings":""}

package/dist/components/DataTable/DataTableCell.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+/**
+ * Props for the DataTableCell component.
+ */
+export interface DataTableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Alignment of cell content. @default 'left' */
+    align?: 'left' | 'center' | 'right';
+    /** Children to render inside the cell. */
+    children?: React.ReactNode;
+}
+/**
+ * Generic table cell component (<td>) with alignment support.
+ */
+export declare function DataTableCell({ align, children, className, ...rest }: DataTableCellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTableCell.d.ts.map

package/dist/components/DataTable/DataTableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCell.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IACtF,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAc,EACd,QAAQ,EACR,SAAc,EACd,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAkBpB"}

package/dist/components/DataTable/DataTableCell.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function DataTableCell({
+  align = "left",
+  children,
+  className = "",
+  ...rest
+}) {
+  const textClass = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }[align];
+  const classes = [
+    "p-space-4 align-middle whitespace-nowrap",
+    textClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("td", { className: classes, ...rest, children });
+}
+export {
+  DataTableCell
+};
+//# sourceMappingURL=DataTableCell.js.map

package/dist/components/DataTable/DataTableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCell.js","sources":["../../../src/components/DataTable/DataTableCell.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\n/**\n * Props for the DataTableCell component.\n */\nexport interface DataTableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Alignment of cell content. @default 'left' */\n  align?: 'left' | 'center' | 'right';\n  /** Children to render inside the cell. */\n  children?: React.ReactNode;\n}\n\n/**\n * Generic table cell component (<td>) with alignment support.\n */\nexport function DataTableCell({\n  align = 'left',\n  children,\n  className = '',\n  ...rest\n}: DataTableCellProps) {\n  const textClass = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  }[align];\n\n  const classes = [\n    'p-space-4 align-middle whitespace-nowrap',\n    textClass,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <td className={classes} {...rest}>\n      {children}\n    </td>\n  );\n}\n"],"names":[],"mappings":";;AAiBO;AAAuB;AACpB;AACR;AACY;AAEd;AACE;AAAkB;AACV;AACE;AACD;AAGT;AAAgB;AACd;AACA;AACA;AAGF;AAKF;;;;"}

package/dist/components/DataTable/DataTableHeader.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+/**
+ * Column definition for the DataTable.
+ */
+export interface ColumnDef<TRow> {
+    id: string;
+    header: string;
+    cell?: (row: TRow, rowIndex: number) => React.ReactNode;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Props for the DataTableHeader component.
+ */
+export interface DataTableHeaderProps<TRow> {
+    columns: ColumnDef<TRow>[];
+    allSelected: boolean;
+    onSelectAll: (selected: boolean) => void;
+    sortColumn?: string;
+    sortDirection?: 'asc' | 'desc';
+    onSort?: (columnId: string) => void;
+    reorderable?: boolean;
+    /** When false, the bulk-select column is omitted. @default true */
+    selectable?: boolean;
+}
+/**
+ * Header component for the DataTable. Renders <thead><tr>...</tr></thead>.
+ */
+export declare function DataTableHeader<TRow>({ columns, allSelected, onSelectAll, sortColumn, sortDirection, onSort, reorderable, selectable, }: DataTableHeaderProps<TRow>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTableHeader.d.ts.map

package/dist/components/DataTable/DataTableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B;;GAEG;AACH,MAAM,WAAW,SAAS,CAAC,IAAI;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB,CAAC,IAAI;IACxC,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,EACpC,OAAO,EACP,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACb,MAAM,EACN,WAAmB,EACnB,UAAiB,GAClB,EAAE,oBAAoB,CAAC,IAAI,CAAC,2CAmF5B"}

package/dist/components/DataTable/DataTableHeader.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Typography } from "../Typography/Typography.js";
+import { Icon } from "../Icon/Icon.js";
+function SortIcon({ direction }) {
+  if (direction === "asc") return /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) }), size: 16 });
+  if (direction === "desc") return /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }), size: 16 });
+  return /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" }) }), size: 16, className: "text-icon-primary-disabled" });
+}
+function DataTableHeader({
+  columns,
+  allSelected,
+  onSelectAll,
+  sortColumn,
+  sortDirection,
+  onSort,
+  reorderable = false,
+  selectable = true
+}) {
+  return /* @__PURE__ */ jsx("thead", { className: "bg-fill-bg-secondary border-b border-border-light", children: /* @__PURE__ */ jsxs("tr", { children: [
+    selectable && /* @__PURE__ */ jsxs("th", { className: "w-[80px] p-space-4 text-left", "aria-label": "Selection and drag", children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Selection and drag" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-space-2", children: [
+        reorderable && /* @__PURE__ */ jsx("div", { className: "w-4 h-4 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("label", { className: "relative flex cursor-pointer items-center justify-center h-5 w-5", htmlFor: "select-all-checkbox", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "select-all-checkbox",
+              type: "checkbox",
+              className: "peer sr-only",
+              checked: allSelected,
+              onChange: (e) => onSelectAll(e.target.checked),
+              "aria-label": "Select all rows"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: [
+            "pointer-events-none absolute inset-0 rounded-sm border-2 transition-all flex items-center justify-center",
+            allSelected ? "border-fill-action-primary bg-fill-action-primary" : "border-border-form-primary bg-fill-bg-primary",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-border-focus peer-focus-visible:ring-offset-2"
+          ].filter(Boolean).join(" "), children: allSelected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", className: "w-3 h-3", children: /* @__PURE__ */ jsx("path", { d: "M13.3332 4L5.99984 11.3333L2.6665 8" }) }) })
+        ] })
+      ] })
+    ] }),
+    columns.map((col) => {
+      const isSorted = sortColumn === col.id;
+      const isRightAligned = col.align === "right";
+      const alignClass = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      }[col.align || "left"];
+      return /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: ["p-space-4 select-none", alignClass, col.width || ""].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: [
+                "flex items-center gap-space-2",
+                col.align === "center" ? "justify-center" : isRightAligned ? "justify-end" : "justify-start",
+                col.sortable ? "cursor-pointer" : ""
+              ].filter(Boolean).join(" "),
+              onClick: () => col.sortable && (onSort == null ? void 0 : onSort(col.id)),
+              children: [
+                col.sortable && isRightAligned && /* @__PURE__ */ jsx(SortIcon, { direction: isSorted ? sortDirection : void 0 }),
+                /* @__PURE__ */ jsx(Typography, { variant: "text-xs", as: "span", className: "font-semibold text-text-secondary uppercase tracking-wider", children: col.header }),
+                col.sortable && !isRightAligned && /* @__PURE__ */ jsx(SortIcon, { direction: isSorted ? sortDirection : void 0 })
+              ]
+            }
+          )
+        },
+        col.id
+      );
+    }),
+    /* @__PURE__ */ jsx("th", { className: "w-[60px] p-space-4 text-left", "aria-label": "Actions", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
+  ] }) });
+}
+export {
+  DataTableHeader
+};
+//# sourceMappingURL=DataTableHeader.js.map

package/dist/components/DataTable/DataTableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHeader.js","sources":["../../../src/components/DataTable/DataTableHeader.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Typography } from '../Typography/Typography';\nimport { Icon } from '../Icon/Icon';\n\n// Mock icons for sorting (ideally imported from @jiwambe/icons)\nfunction SortIcon({ direction }: { direction?: 'asc' | 'desc' }) {\n  if (direction === 'asc') return <Icon icon={<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"m18 15-6-6-6 6\"/></svg>} size={16} />;\n  if (direction === 'desc') return <Icon icon={<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"m6 9 6 6 6-6\"/></svg>} size={16} />;\n  return <Icon icon={<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"m7 15 5 5 5-5M7 9l5-5 5 5\"/></svg>} size={16} className=\"text-icon-primary-disabled\" />;\n}\n\n/**\n * Column definition for the DataTable.\n */\nexport interface ColumnDef<TRow> {\n  id: string;\n  header: string;\n  cell?: (row: TRow, rowIndex: number) => React.ReactNode;\n  sortable?: boolean;\n  width?: string;\n  align?: 'left' | 'center' | 'right';\n}\n\n/**\n * Props for the DataTableHeader component.\n */\nexport interface DataTableHeaderProps<TRow> {\n  columns: ColumnDef<TRow>[];\n  allSelected: boolean;\n  onSelectAll: (selected: boolean) => void;\n  sortColumn?: string;\n  sortDirection?: 'asc' | 'desc';\n  onSort?: (columnId: string) => void;\n  reorderable?: boolean;\n  /** When false, the bulk-select column is omitted. @default true */\n  selectable?: boolean;\n}\n\n/**\n * Header component for the DataTable. Renders <thead><tr>...</tr></thead>.\n */\nexport function DataTableHeader<TRow>({\n  columns,\n  allSelected,\n  onSelectAll,\n  sortColumn,\n  sortDirection,\n  onSort,\n  reorderable = false,\n  selectable = true,\n}: DataTableHeaderProps<TRow>) {\n  return (\n    <thead className=\"bg-fill-bg-secondary border-b border-border-light\">\n      <tr>\n        {/* Bulk select checkbox + gutter space for drag handle */}\n        {selectable && (\n          <th className=\"w-[80px] p-space-4 text-left\" aria-label=\"Selection and drag\">\n            <span className=\"sr-only\">Selection and drag</span>\n            <div className=\"flex items-center gap-space-2\">\n              {reorderable && (\n                <div className=\"w-4 h-4 shrink-0\" aria-hidden=\"true\" /> /* Placeholder for drag handle icon width (16px) */\n              )}\n              <label className=\"relative flex cursor-pointer items-center justify-center h-5 w-5\" htmlFor=\"select-all-checkbox\">\n                <input\n                  id=\"select-all-checkbox\"\n                  type=\"checkbox\"\n                  className=\"peer sr-only\"\n                  checked={allSelected}\n                  onChange={(e) => onSelectAll(e.target.checked)}\n                  aria-label=\"Select all rows\"\n                />\n                <span className={[\n                  'pointer-events-none absolute inset-0 rounded-sm border-2 transition-all flex items-center justify-center',\n                  allSelected ? 'border-fill-action-primary bg-fill-action-primary' : 'border-border-form-primary bg-fill-bg-primary',\n                  'peer-focus-visible:ring-2 peer-focus-visible:ring-border-focus peer-focus-visible:ring-offset-2'\n                ].filter(Boolean).join(' ')}>\n                  {allSelected && (\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" className=\"w-3 h-3\">\n                      <path d=\"M13.3332 4L5.99984 11.3333L2.6665 8\" />\n                    </svg>\n                  )}\n                </span>\n              </label>\n            </div>\n          </th>\n        )}\n\n        {/* Column headers */}\n        {columns.map((col) => {\n          const isSorted = sortColumn === col.id;\n          const isRightAligned = col.align === 'right';\n          const alignClass = {\n            left: 'text-left',\n            center: 'text-center',\n            right: 'text-right',\n          }[col.align || 'left'];\n          \n          return (\n            <th\n              key={col.id}\n              className={['p-space-4 select-none', alignClass, col.width || ''].filter(Boolean).join(' ')}\n            >\n              <div\n                className={[\n                  'flex items-center gap-space-2',\n                  col.align === 'center' ? 'justify-center' : isRightAligned ? 'justify-end' : 'justify-start',\n                  col.sortable ? 'cursor-pointer' : ''\n                ].filter(Boolean).join(' ')}\n                onClick={() => col.sortable && onSort?.(col.id)}\n              >\n                {/* For right-aligned columns, put sort icon on the left to keep text aligned with right-aligned data */}\n                {col.sortable && isRightAligned && (\n                  <SortIcon direction={isSorted ? sortDirection : undefined} />\n                )}\n                \n                <Typography variant=\"text-xs\" as=\"span\" className=\"font-semibold text-text-secondary uppercase tracking-wider\">\n                  {col.header}\n                </Typography>\n                \n                {col.sortable && !isRightAligned && (\n                  <SortIcon direction={isSorted ? sortDirection : undefined} />\n                )}\n              </div>\n            </th>\n          );\n        })}\n        {/* Actions Menu gutter */}\n        <th className=\"w-[60px] p-space-4 text-left\" aria-label=\"Actions\">\n          <span className=\"sr-only\">Actions</span>\n        </th>\n      </tr>\n    </thead>\n  );\n}\n"],"names":[],"mappings":";;;;AAOA;AACE;AACA;AACA;AACF;AAgCO;AAA+B;AACpC;AACA;AACA;AACA;AACA;AACA;AACc;AAEhB;AACE;AAIO;AAEG;AAA4C;AAEzC;AACsD;AAGrD;AAAA;AAAC;AAAA;AACI;AACE;AACK;AACD;AACoC;AAClC;AAAA;AAAA;AAEI;AACf;AACoE;AACpE;AAOF;AACF;AACF;AACF;AAKA;AACA;AACA;AAAmB;AACX;AACE;AACD;AAGT;AACE;AAAC;AAAA;AAE2F;AAE1F;AAAC;AAAA;AACY;AACT;AAC6E;AAC3C;AACV;AACkB;AAG3C;AAC4D;AAK7D;AAG6D;AAAA;AAAA;AAAA;AAE/D;AAvBS;AAAA;AA0Bd;AAID;AAIR;;;;"}

package/dist/components/DataTable/DataTablePagination.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Props for the DataTablePagination component.
+ */
+export interface DataTablePaginationProps {
+    /** Current page index (0-based). */
+    page: number;
+    /** Number of rows per page. */
+    pageSize: number;
+    /** Total number of rows across all pages. */
+    totalRows: number;
+    /** Number of currently selected rows. */
+    selectedCount?: number;
+    /** Label for selection summary. @default 'row(s) selected' */
+    selectionLabel?: string;
+    /** Fired when the page changes. */
+    onPageChange: (page: number) => void;
+    /** Fired when rows-per-page changes. */
+    onPageSizeChange: (size: number) => void;
+    /** When true, hides the “X of Y row(s) selected” summary. @default false */
+    hideSelectionSummary?: boolean;
+}
+/**
+ * Pagination footer for the DataTable.
+ */
+export declare function DataTablePagination({ page, pageSize, totalRows, selectedCount, selectionLabel, onPageChange, onPageSizeChange, hideSelectionSummary, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTablePagination.d.ts.map

package/dist/components/DataTable/DataTablePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,4EAA4E;IAC5E,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAQD;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,aAAiB,EACjB,cAAkC,EAClC,YAAY,EACZ,gBAAgB,EAChB,oBAA4B,GAC7B,EAAE,wBAAwB,2CA6E1B"}

package/dist/components/DataTable/DataTablePagination.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Typography } from "../Typography/Typography.js";
+import { Select } from "../Select/Select.js";
+import { Button } from "../Button/Button.js";
+import { Icon } from "../Icon/Icon.js";
+function ChevronLeft() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
+}
+function ChevronRight() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+}
+function ChevronsLeft() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m11 17-5-5 5-5m7 10-5-5 5-5" }) });
+}
+function ChevronsRight() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m6 17 5-5-5-5m7 10 5-5-5-5" }) });
+}
+function DataTablePagination({
+  page,
+  pageSize,
+  totalRows,
+  selectedCount = 0,
+  selectionLabel = "row(s) selected",
+  onPageChange,
+  onPageSizeChange,
+  hideSelectionSummary = false
+}) {
+  const totalPages = Math.ceil(totalRows / pageSize) || 1;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-space-4 border-t border-border-light bg-fill-bg-primary", children: [
+    !hideSelectionSummary && /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(Typography, { variant: "text-xs", className: "text-text-secondary", children: [
+      selectedCount,
+      " of ",
+      totalRows,
+      " ",
+      selectionLabel
+    ] }) }),
+    hideSelectionSummary && /* @__PURE__ */ jsx("div", { className: "flex-1", "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-space-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "text-xs", className: "text-text-secondary whitespace-nowrap", children: "Rows per page" }),
+      /* @__PURE__ */ jsx("div", { className: "w-20", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          "aria-label": "Rows per page",
+          value: pageSize.toString(),
+          onChange: (e) => onPageSizeChange(parseInt(e.target.value, 10)),
+          options: [
+            { value: "5", label: "5" },
+            { value: "10", label: "10" },
+            { value: "20", label: "20" },
+            { value: "50", label: "50" }
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-end gap-space-4", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "text-xs", className: "text-text-secondary whitespace-nowrap", children: [
+        "Page ",
+        page + 1,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-space-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "small",
+            iconOnly: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(ChevronsLeft, {}), size: 16 }),
+            disabled: page === 0,
+            onClick: () => onPageChange(0),
+            "aria-label": "First page"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "small",
+            iconOnly: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(ChevronLeft, {}), size: 16 }),
+            disabled: page === 0,
+            onClick: () => onPageChange(page - 1),
+            "aria-label": "Previous page"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "small",
+            iconOnly: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(ChevronRight, {}), size: 16 }),
+            disabled: page >= totalPages - 1,
+            onClick: () => onPageChange(page + 1),
+            "aria-label": "Next page"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "small",
+            iconOnly: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(ChevronsRight, {}), size: 16 }),
+            disabled: page >= totalPages - 1,
+            onClick: () => onPageChange(totalPages - 1),
+            "aria-label": "Last page"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  DataTablePagination
+};
+//# sourceMappingURL=DataTablePagination.js.map

package/dist/components/DataTable/DataTablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.js","sources":["../../../src/components/DataTable/DataTablePagination.tsx"],"sourcesContent":["'use client';\n\nimport { Typography } from '../Typography/Typography';\nimport { Select } from '../Select/Select';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\n\n/**\n * Props for the DataTablePagination component.\n */\nexport interface DataTablePaginationProps {\n  /** Current page index (0-based). */\n  page: number;\n  /** Number of rows per page. */\n  pageSize: number;\n  /** Total number of rows across all pages. */\n  totalRows: number;\n  /** Number of currently selected rows. */\n  selectedCount?: number;\n  /** Label for selection summary. @default 'row(s) selected' */\n  selectionLabel?: string;\n  /** Fired when the page changes. */\n  onPageChange: (page: number) => void;\n  /** Fired when rows-per-page changes. */\n  onPageSizeChange: (size: number) => void;\n  /** When true, hides the “X of Y row(s) selected” summary. @default false */\n  hideSelectionSummary?: boolean;\n}\n\n// Mock icons for pagination\nfunction ChevronLeft() { return <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"m15 18-6-6 6-6\"/></svg>; }\nfunction ChevronRight() { return <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"m9 18 6-6-6-6\"/></svg>; }\nfunction ChevronsLeft() { return <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"m11 17-5-5 5-5m7 10-5-5 5-5\"/></svg>; }\nfunction ChevronsRight() { return <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"m6 17 5-5-5-5m7 10 5-5-5-5\"/></svg>; }\n\n/**\n * Pagination footer for the DataTable.\n */\nexport function DataTablePagination({\n  page,\n  pageSize,\n  totalRows,\n  selectedCount = 0,\n  selectionLabel = 'row(s) selected',\n  onPageChange,\n  onPageSizeChange,\n  hideSelectionSummary = false,\n}: DataTablePaginationProps) {\n  const totalPages = Math.ceil(totalRows / pageSize) || 1;\n\n  return (\n    <div className=\"flex items-center justify-between p-space-4 border-t border-border-light bg-fill-bg-primary\">\n      {/* Selection Summary */}\n      {!hideSelectionSummary && (\n        <div className=\"flex-1\">\n          <Typography variant=\"text-xs\" className=\"text-text-secondary\">\n            {selectedCount} of {totalRows} {selectionLabel}\n          </Typography>\n        </div>\n      )}\n      {hideSelectionSummary && <div className=\"flex-1\" aria-hidden />}\n\n      {/* Rows per page */}\n      <div className=\"flex items-center gap-space-3\">\n        <Typography variant=\"text-xs\" className=\"text-text-secondary whitespace-nowrap\">\n          Rows per page\n        </Typography>\n        <div className=\"w-20\">\n          <Select\n            aria-label=\"Rows per page\"\n            value={pageSize.toString()}\n            onChange={(e) => onPageSizeChange(parseInt(e.target.value, 10))}\n            options={[\n              { value: '5', label: '5' },\n              { value: '10', label: '10' },\n              { value: '20', label: '20' },\n              { value: '50', label: '50' },\n            ]}\n          />\n        </div>\n      </div>\n\n      {/* Page controls */}\n      <div className=\"flex-1 flex items-center justify-end gap-space-4\">\n        <Typography variant=\"text-xs\" className=\"text-text-secondary whitespace-nowrap\">\n          Page {page + 1} of {totalPages}\n        </Typography>\n        <div className=\"flex items-center gap-space-1\">\n          <Button\n            variant=\"ghost\"\n            size=\"small\"\n            iconOnly={<Icon icon={<ChevronsLeft />} size={16} />}\n            disabled={page === 0}\n            onClick={() => onPageChange(0)}\n            aria-label=\"First page\"\n          />\n          <Button\n            variant=\"ghost\"\n            size=\"small\"\n            iconOnly={<Icon icon={<ChevronLeft />} size={16} />}\n            disabled={page === 0}\n            onClick={() => onPageChange(page - 1)}\n            aria-label=\"Previous page\"\n          />\n          <Button\n            variant=\"ghost\"\n            size=\"small\"\n            iconOnly={<Icon icon={<ChevronRight />} size={16} />}\n            disabled={page >= totalPages - 1}\n            onClick={() => onPageChange(page + 1)}\n            aria-label=\"Next page\"\n          />\n          <Button\n            variant=\"ghost\"\n            size=\"small\"\n            iconOnly={<Icon icon={<ChevronsRight />} size={16} />}\n            disabled={page >= totalPages - 1}\n            onClick={() => onPageChange(totalPages - 1)}\n            aria-label=\"Last page\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA8BA;AAAyB;AAAoH;AAC7I;AAA0B;AAAmH;AAC7I;AAA0B;AAAiI;AAC3J;AAA2B;AAAgI;AAKpJ;AAA6B;AAClC;AACA;AACA;AACgB;AACC;AACjB;AACA;AAEF;AACE;AAEA;AAGK;AAGM;AAAA;AAAc;AAAK;AAAU;AAAE;AAEpC;AAE2D;AAI3D;AAEA;AAEE;AAAC;AAAA;AACY;AACK;AAC8C;AACrD;AACc;AACC;AACA;AACA;AAAK;AAC7B;AAEJ;AACF;AAIE;AAAgF;AAAA;AACjE;AAAE;AAAK;AACtB;AAEE;AAAA;AAAC;AAAA;AACS;AACH;AAC6C;AAC/B;AACU;AAClB;AAAA;AAAA;AAEb;AAAC;AAAA;AACS;AACH;AAC4C;AAC9B;AACiB;AACzB;AAAA;AAAA;AAEb;AAAC;AAAA;AACS;AACH;AAC6C;AACnB;AACK;AACzB;AAAA;AAAA;AAEb;AAAC;AAAA;AACS;AACH;AAC8C;AACpB;AACW;AAC/B;AAAA;AAAA;AAEf;AACF;AAGN;;;;"}

package/dist/components/DataTable/DataTableReviewerCell.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Props for the DataTableReviewerCell component.
+ */
+export interface DataTableReviewerCellProps {
+    /** Current reviewer's name or null/empty. */
+    value: string | null;
+    /** List of reviewer options for the dropdown. */
+    options: string[];
+    /** Fired when a reviewer is selected. */
+    onChange: (value: string) => void;
+    /** When true, prevents changes and renders as text only. @default false */
+    readOnly?: boolean;
+}
+/**
+ * Specialized cell for reviewer assignment. Renders as text or a Select trigger.
+ */
+export declare function DataTableReviewerCell({ value, options, onChange, readOnly, }: DataTableReviewerCellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTableReviewerCell.d.ts.map

package/dist/components/DataTable/DataTableReviewerCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableReviewerCell.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableReviewerCell.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,6CAA6C;IAC7C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iDAAiD;IACjD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,yCAAyC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAgB,GACjB,EAAE,0BAA0B,2CA8B5B"}

package/dist/components/DataTable/DataTableReviewerCell.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "../Select/Select.js";
+import { Typography } from "../Typography/Typography.js";
+function DataTableReviewerCell({
+  value,
+  options,
+  onChange,
+  readOnly = false
+}) {
+  if (value && value.length > 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center w-full overflow-hidden", children: /* @__PURE__ */ jsx(Typography, { variant: "text-sm", as: "span", className: "text-text-primary truncate", children: value }) });
+  }
+  if (readOnly) {
+    return /* @__PURE__ */ jsx(Typography, { variant: "text-sm", as: "span", className: "text-text-disabled", children: "—" });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-[200px]", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      "aria-label": "Assign reviewer",
+      placeholder: "Assign reviewer",
+      options: options.map((opt) => ({ value: opt, label: opt })),
+      onChange: (e) => onChange(e.target.value),
+      className: "text-xs min-h-[32px] py-space-1 hover:border-border-form-primary-hover focus:border-border-form-primary-active border-border-form-primary"
+    }
+  ) });
+}
+export {
+  DataTableReviewerCell
+};
+//# sourceMappingURL=DataTableReviewerCell.js.map

package/dist/components/DataTable/DataTableReviewerCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableReviewerCell.js","sources":["../../../src/components/DataTable/DataTableReviewerCell.tsx"],"sourcesContent":["'use client';\n\nimport { Select } from '../Select/Select';\nimport { Typography } from '../Typography/Typography';\n\n/**\n * Props for the DataTableReviewerCell component.\n */\nexport interface DataTableReviewerCellProps {\n  /** Current reviewer's name or null/empty. */\n  value: string | null;\n  /** List of reviewer options for the dropdown. */\n  options: string[];\n  /** Fired when a reviewer is selected. */\n  onChange: (value: string) => void;\n  /** When true, prevents changes and renders as text only. @default false */\n  readOnly?: boolean;\n}\n\n/**\n * Specialized cell for reviewer assignment. Renders as text or a Select trigger.\n */\nexport function DataTableReviewerCell({\n  value,\n  options,\n  onChange,\n  readOnly = false,\n}: DataTableReviewerCellProps) {\n  if (value && value.length > 0) {\n    return (\n      <div className=\"flex items-center w-full overflow-hidden\">\n        <Typography variant=\"text-sm\" as=\"span\" className=\"text-text-primary truncate\">\n          {value}\n        </Typography>\n      </div>\n    );\n  }\n\n  if (readOnly) {\n    return (\n      <Typography variant=\"text-sm\" as=\"span\" className=\"text-text-disabled\">\n        —\n      </Typography>\n    );\n  }\n\n  return (\n    <div className=\"w-full max-w-[200px]\" onClick={(e) => e.stopPropagation()}>\n      <Select\n        aria-label=\"Assign reviewer\"\n        placeholder=\"Assign reviewer\"\n        options={options.map(opt => ({ value: opt, label: opt }))}\n        onChange={(e) => onChange(e.target.value)}\n        className=\"text-xs min-h-[32px] py-space-1 hover:border-border-form-primary-hover focus:border-border-form-primary-active border-border-form-primary\"\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAsBO;AAA+B;AACpC;AACA;AACA;AAEF;AACE;AACE;AAKE;AAIJ;AACE;AAGE;AAIJ;AAEI;AAAC;AAAA;AACY;AACC;AAC4C;AAChB;AAC9B;AAAA;AAIlB;;;;"}

package/dist/components/DataTable/DataTableRow.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { DataTableAction } from './DataTableRowMenu';
+import { ColumnDef } from './DataTableHeader';
+/**
+ * Props for the DataTableRow component.
+ */
+export interface DataTableRowProps<TRow> {
+    /** The data for this individual row. */
+    row: TRow;
+    /** Index of the row in the current page. */
+    rowIndex: number;
+    /** Column definitions. */
+    columns: ColumnDef<TRow>[];
+    /** Whether the row is currently selected. */
+    selected: boolean;
+    /** Fired when the row's selection state changes. */
+    onSelect: (selected: boolean) => void;
+    /** Context menu actions for this row. @default [] */
+    actions?: DataTableAction[];
+    /** Fired when a native drag starts. */
+    onDragStart?: (e: React.DragEvent, index: number) => void;
+    /** Fired when another row is dragged over this row. */
+    onDragOver?: (e: React.DragEvent, index: number) => void;
+    /** Fired when a row is dropped onto this row. */
+    onDrop?: (e: React.DragEvent, index: number) => void;
+    /** Whether the table supports reordering. @default false */
+    reorderable?: boolean;
+    /** When false, the row checkbox column is omitted. @default true */
+    selectable?: boolean;
+}
+/**
+ * Single data row (<tr>) for the DataTable.
+ */
+export declare function DataTableRow<TRow>({ row, rowIndex, columns, selected, onSelect, actions, onDragStart, onDragOver, onDrop, reorderable, selectable, }: DataTableRowProps<TRow>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTableRow.d.ts.map

package/dist/components/DataTable/DataTableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRow.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAoB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,IAAI;IACrC,wCAAwC;IACxC,GAAG,EAAE,IAAI,CAAC;IACV,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC;IAC3B,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,qDAAqD;IACrD,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,uDAAuD;IACvD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAgBD;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,EACjC,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAY,EACZ,WAAW,EACX,UAAU,EACV,MAAM,EACN,WAAmB,EACnB,UAAiB,GAClB,EAAE,iBAAiB,CAAC,IAAI,CAAC,2CAwEzB"}

package/dist/components/DataTable/DataTableRow.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Icon } from "../Icon/Icon.js";
+import { DataTableCell } from "./DataTableCell.js";
+import { DataTableRowMenu } from "./DataTableRowMenu.js";
+function GripVertical() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "5", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "19", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "5", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "19", r: "1" })
+  ] });
+}
+function DataTableRow({
+  row,
+  rowIndex,
+  columns,
+  selected,
+  onSelect,
+  actions = [],
+  onDragStart,
+  onDragOver,
+  onDrop,
+  reorderable = false,
+  selectable = true
+}) {
+  const trClasses = [
+    "group transition-colors border-b border-border-light last:border-none",
+    selected ? "bg-fill-bg-secondary" : "bg-fill-bg-primary hover:bg-fill-bg-secondary"
+  ].filter(Boolean).join(" ");
+  const rowId = row.id || rowIndex;
+  const checkboxId = `select-row-${rowId}`;
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: trClasses,
+      draggable: !!onDragStart,
+      onDragStart: (e) => onDragStart == null ? void 0 : onDragStart(e, rowIndex),
+      onDragOver: (e) => onDragOver == null ? void 0 : onDragOver(e, rowIndex),
+      onDrop: (e) => onDrop == null ? void 0 : onDrop(e, rowIndex),
+      children: [
+        selectable && /* @__PURE__ */ jsx(DataTableCell, { className: "w-[80px]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-space-2", children: [
+          reorderable && /* @__PURE__ */ jsx("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing", children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(GripVertical, {}), size: 16, className: "text-icon-primary-disabled" }) }),
+          /* @__PURE__ */ jsxs("label", { className: "relative flex cursor-pointer items-center justify-center h-5 w-5", htmlFor: checkboxId, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: checkboxId,
+                type: "checkbox",
+                className: "peer sr-only",
+                checked: selected,
+                onChange: (e) => onSelect(e.target.checked),
+                "aria-label": `Select row ${rowIndex + 1}`
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: [
+              "pointer-events-none absolute inset-0 rounded-sm border-2 transition-all flex items-center justify-center",
+              selected ? "border-fill-action-primary bg-fill-action-primary" : "border-border-form-primary bg-fill-bg-primary",
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-border-focus peer-focus-visible:ring-offset-2"
+            ].filter(Boolean).join(" "), children: selected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", className: "w-3 h-3", children: /* @__PURE__ */ jsx("path", { d: "M13.3332 4L5.99984 11.3333L2.6665 8" }) }) })
+          ] })
+        ] }) }),
+        columns.map((col) => {
+          const content = col.cell ? col.cell(row, rowIndex) : row[col.id];
+          return /* @__PURE__ */ jsx(DataTableCell, { align: col.align, children: content }, col.id);
+        }),
+        /* @__PURE__ */ jsx(DataTableCell, { className: "w-[60px]", children: actions.length > 0 && /* @__PURE__ */ jsx(DataTableRowMenu, { actions }) })
+      ]
+    }
+  );
+}
+export {
+  DataTableRow
+};
+//# sourceMappingURL=DataTableRow.js.map

package/dist/components/DataTable/DataTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/DataTable/DataTableRow.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport { Icon } from '../Icon/Icon';\nimport { DataTableCell } from './DataTableCell';\nimport { DataTableRowMenu, DataTableAction } from './DataTableRowMenu';\nimport { ColumnDef } from './DataTableHeader';\n\n/**\n * Props for the DataTableRow component.\n */\nexport interface DataTableRowProps<TRow> {\n  /** The data for this individual row. */\n  row: TRow;\n  /** Index of the row in the current page. */\n  rowIndex: number;\n  /** Column definitions. */\n  columns: ColumnDef<TRow>[];\n  /** Whether the row is currently selected. */\n  selected: boolean;\n  /** Fired when the row's selection state changes. */\n  onSelect: (selected: boolean) => void;\n  /** Context menu actions for this row. @default [] */\n  actions?: DataTableAction[];\n  /** Fired when a native drag starts. */\n  onDragStart?: (e: React.DragEvent, index: number) => void;\n  /** Fired when another row is dragged over this row. */\n  onDragOver?: (e: React.DragEvent, index: number) => void;\n  /** Fired when a row is dropped onto this row. */\n  onDrop?: (e: React.DragEvent, index: number) => void;\n  /** Whether the table supports reordering. @default false */\n  reorderable?: boolean;\n  /** When false, the row checkbox column is omitted. @default true */\n  selectable?: boolean;\n}\n\n// Mock drag handle icon\nfunction GripVertical() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n      <circle cx=\"9\" cy=\"5\" r=\"1\" />\n      <circle cx=\"9\" cy=\"12\" r=\"1\" />\n      <circle cx=\"9\" cy=\"19\" r=\"1\" />\n      <circle cx=\"15\" cy=\"5\" r=\"1\" />\n      <circle cx=\"15\" cy=\"12\" r=\"1\" />\n      <circle cx=\"15\" cy=\"19\" r=\"1\" />\n    </svg>\n  );\n}\n\n/**\n * Single data row (<tr>) for the DataTable.\n */\nexport function DataTableRow<TRow>({\n  row,\n  rowIndex,\n  columns,\n  selected,\n  onSelect,\n  actions = [],\n  onDragStart,\n  onDragOver,\n  onDrop,\n  reorderable = false,\n  selectable = true,\n}: DataTableRowProps<TRow>) {\n  const trClasses = [\n    'group transition-colors border-b border-border-light last:border-none',\n    selected ? 'bg-fill-bg-secondary' : 'bg-fill-bg-primary hover:bg-fill-bg-secondary',\n  ].filter(Boolean).join(' ');\n\n  const rowId = (row as any).id || rowIndex;\n  const checkboxId = `select-row-${rowId}`;\n\n  return (\n    <tr\n      className={trClasses}\n      draggable={!!onDragStart}\n      onDragStart={(e) => onDragStart?.(e, rowIndex)}\n      onDragOver={(e) => onDragOver?.(e, rowIndex)}\n      onDrop={(e) => onDrop?.(e, rowIndex)}\n    >\n      {/* Interaction Gutter: Drag handle + Checkbox */}\n      {selectable && (\n        <DataTableCell className=\"w-[80px]\">\n          <div className=\"flex items-center gap-space-2\">\n            {/* Drag Handle - only visible on row hover and if reorderable */}\n            {reorderable && (\n              <div className=\"opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing\">\n                <Icon icon={<GripVertical />} size={16} className=\"text-icon-primary-disabled\" />\n              </div>\n            )}\n            \n            {/* Custom Checkbox */}\n            <label className=\"relative flex cursor-pointer items-center justify-center h-5 w-5\" htmlFor={checkboxId}>\n              <input\n                id={checkboxId}\n                type=\"checkbox\"\n                className=\"peer sr-only\"\n                checked={selected}\n                onChange={(e) => onSelect(e.target.checked)}\n                aria-label={`Select row ${rowIndex + 1}`}\n              />\n              <span className={[\n                'pointer-events-none absolute inset-0 rounded-sm border-2 transition-all flex items-center justify-center',\n                selected ? 'border-fill-action-primary bg-fill-action-primary' : 'border-border-form-primary bg-fill-bg-primary',\n                'peer-focus-visible:ring-2 peer-focus-visible:ring-border-focus peer-focus-visible:ring-offset-2'\n              ].filter(Boolean).join(' ')}>\n                {selected && (\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" className=\"w-3 h-3\">\n                    <path d=\"M13.3332 4L5.99984 11.3333L2.6665 8\" />\n                  </svg>\n                )}\n              </span>\n            </label>\n          </div>\n        </DataTableCell>\n      )}\n\n      {/* Data Cells */}\n      {columns.map((col) => {\n        const content = col.cell ? col.cell(row, rowIndex) : (row as any)[col.id];\n        return (\n          <DataTableCell key={col.id} align={col.align}>\n            {content}\n          </DataTableCell>\n        );\n      })}\n\n      {/* Row Menu Action */}\n      <DataTableCell className=\"w-[60px]\">\n        {actions.length > 0 && (\n          <DataTableRowMenu actions={actions} />\n        )}\n      </DataTableCell>\n    </tr>\n  );\n}\n"],"names":[],"mappings":";;;;;AAqCA;AACE;AAEI;AAA4B;AACC;AACA;AACA;AACC;AACA;AAGpC;AAKO;AAA4B;AACjC;AACA;AACA;AACA;AACA;AACU;AACV;AACA;AACA;AACc;AAEhB;AACE;AAAkB;AAChB;AACoC;AAGtC;AACA;AAEA;AACE;AAAC;AAAA;AACY;AACE;AACwB;AACF;AACR;AAG1B;AAIM;AAGC;AAKA;AAAA;AAAC;AAAA;AACK;AACC;AACK;AACD;AACiC;AACJ;AAAA;AAAA;AAEvB;AACf;AACiE;AACjE;AAOF;AACF;AAEJ;AAKA;AACA;AAGE;AAEH;AAOD;AAAA;AAAA;AAGN;;;;"}

package/dist/components/DataTable/DataTableRowMenu.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Shape of a single action in the DataTableRowMenu.
+ */
+export interface DataTableAction {
+    /** Label displayed in the menu. */
+    label: string;
+    /** Callback fired when the action is selected. */
+    onSelect: () => void;
+    /** When true, applies error/danger styling. @default false */
+    destructive?: boolean;
+}
+/**
+ * Props for the DataTableRowMenu component.
+ */
+export interface DataTableRowMenuProps {
+    /** Array of actions to display in the menu. */
+    actions: DataTableAction[];
+    /** Fired when the menu is opened. */
+    onOpen?: () => void;
+}
+/**
+ * Row context menu (three-dot dropdown). Renders a trigger button and a Popover panel.
+ */
+export declare function DataTableRowMenu({ actions, onOpen }: DataTableRowMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DataTableRowMenu.d.ts.map

package/dist/components/DataTable/DataTableRowMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableRowMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableRowMenu.tsx"],"names":[],"mappings":"AAQA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,+CAA+C;IAC/C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CAyD1E"}