@rovula/ui 0.1.29 → 0.1.30

package/dist/cjs/types/components/DataTable/DataTable.d.ts

@@ -130,11 +130,11 @@ export interface DataTableProps<TData, TValue> extends DataTableEditingProps<TDa
     /** Add vertical column dividers */
     divided?: boolean;
     /** Return a className string to apply to a specific body row. */
-    rowClassName?: (row: Row<TData>, index: number) => string | undefined;
+    rowClassName?: string | ((row: Row<TData>, index: number) => string | undefined);
     /** Return a className string to apply to a specific body cell. */
-    cellClassName?: (cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined;
+    cellClassName?: string | ((cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined);
     /** Return a className string to apply to a specific column header cell (`<th>`). */
-    headerCellClassName?: (header: Header<TData, unknown>) => string | undefined;
+    headerCellClassName?: string | ((header: Header<TData, unknown>) => string | undefined);
     /** Additional className for the header section (`<thead>`). */
     headerClassName?: string;
     /** Additional className for the header row (`<tr>` inside `<thead>`). */

package/dist/cjs/types/components/DataTable/DataTable.stories.d.ts

@@ -69,9 +69,9 @@ declare const meta: {
         surface?: "default" | "panel" | undefined;
         striped?: boolean | undefined;
         divided?: boolean | undefined;
-        rowClassName?: ((row: Row<unknown>, index: number) => string | undefined) | undefined;
-        cellClassName?: ((cell: import("@tanstack/react-table").Cell<unknown, unknown>, row: Row<unknown>) => string | undefined) | undefined;
-        headerCellClassName?: ((header: import("@tanstack/react-table").Header<unknown, unknown>) => string | undefined) | undefined;
+        rowClassName?: string | ((row: Row<unknown>, index: number) => string | undefined) | undefined;
+        cellClassName?: string | ((cell: import("@tanstack/react-table").Cell<unknown, unknown>, row: Row<unknown>) => string | undefined) | undefined;
+        headerCellClassName?: string | ((header: import("@tanstack/react-table").Header<unknown, unknown>) => string | undefined) | undefined;
         headerClassName?: string | undefined;
         headerRowClassName?: string | undefined;
         sortIndicatorVisibility?: "always" | "hover" | undefined;
@@ -94,6 +94,14 @@ declare const meta: {
 export default meta;
 /** Default — striped rows + column dividers, all columns sortable. */
 export declare const Default: StoryObj;
+/**
+ * Matches the Figma "Projects" page design — striped alternating rows,
+ * column dividers, row actions (more + navigate), client pagination,
+ * and a rounded bordered frame.
+ *
+ * Design ref: Xspector-New / node 11786-14865
+ */
+export declare const FigmaProjectsPage: StoryObj;
 /** Empty state — displayed when `data` is an empty array. */
 export declare const Empty: StoryObj;
 /** Non-striped with column dividers only. */
@@ -252,6 +260,24 @@ export declare const TableLayoutComparison: StoryObj;
  * - The **"Type"** cells for ROV are highlighted with an info tint.
  */
 export declare const WithCustomRowAndCellClassName: StoryObj;
+/**
+ * Showcase overriding header and body row heights via className props.
+ *
+ * The base `TableHead` uses `h-[44px] typography-body2` and `TableCell`
+ * uses `h-[42px] typography-body3`.
+ *
+ * `cn()` is configured with a custom `typography` class-group so
+ * `tailwind-merge` correctly deduplicates conflicting `typography-*`
+ * utilities (e.g. `typography-small2` replaces `typography-body2`).
+ *
+ * **Note:** `<th>` / `<td>` elements treat `height` as a minimum —
+ * to go smaller than the default, internal content (sort icon, badges)
+ * must also fit. Compact swaps to `typography-small2` (12px) text and
+ * reduces padding to reclaim space.
+ *
+ * Three sizes: **Compact**, **Default**, **Comfortable**.
+ */
+export declare const CustomRowAndHeaderSize: StoryObj;
 /**
  * Data management table — Figma **Xspector-New**:
  * [full frame](https://www.figma.com/design/99rq6FbfPx6hgPS0VCvHJh/Xspector-New?node-id=11965-17125),

package/dist/components/DataTable/DataTable.js

@@ -60,7 +60,9 @@ function renderDataTableBodyCells(opts) {
             tableLayout !== "equal" &&
             !(resizableSlackGrowColId != null &&
                 cell.column.id === resizableSlackGrowColId);
-        return (_jsx(TableCell, { colSpan: colSpan > 1 ? colSpan : undefined, style: resolveBodyCellWidthStyle(cell.column.columnDef, fixedColStyles === null || fixedColStyles === void 0 ? void 0 : fixedColStyles.get(cell.column.id), flexWidth, lockPxExactWidth, usePixelResizeWidth ? cell.column.getSize() : undefined), className: cn(columnMetaAlignClass(cell.column.columnDef.meta), (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.cellClassName, cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(cell, row)), onClick: onCellClick
+        return (_jsx(TableCell, { colSpan: colSpan > 1 ? colSpan : undefined, style: resolveBodyCellWidthStyle(cell.column.columnDef, fixedColStyles === null || fixedColStyles === void 0 ? void 0 : fixedColStyles.get(cell.column.id), flexWidth, lockPxExactWidth, usePixelResizeWidth ? cell.column.getSize() : undefined), className: cn(columnMetaAlignClass(cell.column.columnDef.meta), (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.cellClassName, typeof cellClassName === "function"
+                ? cellClassName(cell, row)
+                : cellClassName), onClick: onCellClick
                 ? (e) => onCellClick(cell, row, e)
                 : undefined, children: isFirstDataCell ? (_jsxs("div", { className: "flex items-center gap-1", style: { paddingLeft: `${row.depth * 20}px` }, children: [row.getCanExpand() ? (_jsx("button", { type: "button", onClick: row.getToggleExpandedHandler(), className: "flex items-center justify-center size-5 rounded hover:bg-table-c-hover shrink-0 transition-colors", "aria-label": row.getIsExpanded() ? "Collapse" : "Expand", children: row.getIsExpanded() ? (_jsx(ChevronDown, { className: "size-4" })) : (_jsx(ChevronRight, { className: "size-4" })) })) : (_jsx("span", { className: "size-5 shrink-0" })), flexRender(cell.column.columnDef.cell, cell.getContext())] })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id));
     });
@@ -855,9 +857,11 @@ export function DataTable({ data, columns, manualSorting = false, onSorting, pag
                                             !(resizableSlackGrowColId != null &&
                                                 header.column.id === resizableSlackGrowColId);
                                         const headerStyle = resolveHeaderWidthStyle(header.column.columnDef, flexWidth, fixedFallback, lockPxExactWidth, usePixelResizeWidth ? header.getSize() : undefined);
-                                        return (_jsxs(TableHead, { colSpan: header.colSpan, style: headerStyle, className: cn("relative overflow-visible group/col", isResizing && "select-none", (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.headerCellClassName, headerCellClassName === null || headerCellClassName === void 0 ? void 0 : headerCellClassName(header)), children: [_jsxs("div", { className: "flex flex-row items-center gap-1 group/header", children: [_jsx("div", { className: cn("flex flex-1 flex-row items-center overflow-hidden", canSort && "cursor-pointer select-none", columnMetaAlignClass(header.column.columnDef.meta)), onClick: header.column.getToggleSortingHandler(), children: header.isPlaceholder
+                                        return (_jsxs(TableHead, { colSpan: header.colSpan, style: headerStyle, className: cn("relative overflow-visible group/col whitespace-pre", isResizing && "select-none", (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.headerCellClassName, typeof headerCellClassName === "function"
+                                                ? headerCellClassName(header)
+                                                : headerCellClassName), children: [_jsxs("div", { className: "flex flex-row items-center gap-1 group/header", children: [_jsx("span", { className: cn("flex flex-1 flex-row items-center overflow-hidden", canSort && "cursor-pointer select-none", columnMetaAlignClass(header.column.columnDef.meta)), onClick: header.column.getToggleSortingHandler(), children: header.isPlaceholder
                                                                 ? null
-                                                                : flexRender(header.column.columnDef.header, header.getContext()) }), canSort && (_jsx(ActionButton, { variant: "icon", size: "sm", className: cn("shrink-0 transition-opacity", isSorted
+                                                                : flexRender(header.column.columnDef.header, header.getContext()) }), canSort && (_jsx(ActionButton, { variant: "icon", size: "xs", className: cn("shrink-0 transition-opacity", isSorted
                                                                 ? "opacity-100"
                                                                 : sortIndicatorVisibility === "always"
                                                                     ? "opacity-100"
@@ -915,7 +919,9 @@ export function DataTable({ data, columns, manualSorting = false, onSorting, pag
                                                     "data-highlighted": isHighlighted
                                                         ? "true"
                                                         : undefined,
-                                                    className: cn(rowBg, onRowClick && "cursor-pointer", rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, item.index)),
+                                                    className: cn(rowBg, onRowClick && "cursor-pointer", typeof rowClassName === "function"
+                                                        ? rowClassName(row, item.index)
+                                                        : rowClassName),
                                                     onClick: onRowClick
                                                         ? (e) => onRowClick(row, e)
                                                         : undefined,
@@ -952,7 +958,9 @@ export function DataTable({ data, columns, manualSorting = false, onSorting, pag
                                                 "data-highlighted": isHighlighted
                                                     ? "true"
                                                     : undefined,
-                                                className: cn(rowBg, onRowClick && "cursor-pointer", rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, rowIndex)),
+                                                className: cn(rowBg, onRowClick && "cursor-pointer", typeof rowClassName === "function"
+                                                    ? rowClassName(row, rowIndex)
+                                                    : rowClassName),
                                                 onClick: onRowClick
                                                     ? (e) => onRowClick(row, e)
                                                     : undefined,
@@ -978,7 +986,9 @@ export function DataTable({ data, columns, manualSorting = false, onSorting, pag
                                     const isHighlighted = Array.isArray(highlightRowId)
                                         ? highlightRowId.includes(row.id)
                                         : highlightRowId === row.id;
-                                    return (_jsx(TableRow, { divided: isExpandable && !striped ? true : !striped, colDivided: divided, "data-state": row.getIsSelected() ? "selected" : undefined, className: cn(rowBg, onRowClick && "cursor-pointer", rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, rowIndex)), "data-highlighted": isHighlighted ? "true" : undefined, onClick: onRowClick
+                                    return (_jsx(TableRow, { divided: isExpandable && !striped ? true : !striped, colDivided: divided, "data-state": row.getIsSelected() ? "selected" : undefined, className: cn(rowBg, onRowClick && "cursor-pointer", typeof rowClassName === "function"
+                                            ? rowClassName(row, rowIndex)
+                                            : rowClassName), "data-highlighted": isHighlighted ? "true" : undefined, onClick: onRowClick
                                             ? (e) => onRowClick(row, e)
                                             : undefined, "data-row-id": row.id, children: renderDataTableBodyCells({
                                             row,

package/dist/components/DataTable/DataTable.stories.js

@@ -171,6 +171,30 @@ const eventColumns = [
 export const Default = {
     render: () => (_jsx(DataTable, { columns: projectColumns, data: projectData, striped: true, divided: true, onSorting: (s) => console.log("sort", s) })),
 };
+/**
+ * Matches the Figma "Projects" page design — striped alternating rows,
+ * column dividers, row actions (more + navigate), client pagination,
+ * and a rounded bordered frame.
+ *
+ * Design ref: Xspector-New / node 11786-14865
+ */
+export const FigmaProjectsPage = {
+    render: () => {
+        const figmaProjectColumns = [
+            { accessorKey: "name", header: "Project name" },
+            { accessorKey: "type", header: "Type", size: 120 },
+            { accessorKey: "subtype", header: "Subtype" },
+            { accessorKey: "createdDate", header: "Created date", size: 180 },
+            {
+                accessorKey: "status",
+                header: "Status",
+                size: 200,
+                cell: ({ row }) => _jsx(StatusBadge, { status: row.original.status }),
+            },
+        ];
+        return (_jsx(DataTable, { columns: figmaProjectColumns, data: projectData, bordered: true, striped: true, divided: true, tableLayout: "fixed", paginationMode: "client", pageSizeOptions: [5, 10, 20], rowActions: (row) => _jsx(ProjectRowActions, { row: row }), onSorting: (s) => console.log("sort", s) }));
+    },
+};
 /** Empty state — displayed when `data` is an empty array. */
 export const Empty = {
     render: () => (_jsx(DataTable, { columns: projectColumns, data: [], striped: true, divided: true })),
@@ -679,6 +703,42 @@ export const WithCustomRowAndCellClassName = {
             return undefined;
         } })),
 };
+// ---------------------------------------------------------------------------
+// 13b. Custom body row size and header size
+// ---------------------------------------------------------------------------
+/**
+ * Showcase overriding header and body row heights via className props.
+ *
+ * The base `TableHead` uses `h-[44px] typography-body2` and `TableCell`
+ * uses `h-[42px] typography-body3`.
+ *
+ * `cn()` is configured with a custom `typography` class-group so
+ * `tailwind-merge` correctly deduplicates conflicting `typography-*`
+ * utilities (e.g. `typography-small2` replaces `typography-body2`).
+ *
+ * **Note:** `<th>` / `<td>` elements treat `height` as a minimum —
+ * to go smaller than the default, internal content (sort icon, badges)
+ * must also fit. Compact swaps to `typography-small2` (12px) text and
+ * reduces padding to reclaim space.
+ *
+ * Three sizes: **Compact**, **Default**, **Comfortable**.
+ */
+export const CustomRowAndHeaderSize = {
+    render: () => {
+        const compactColumns = [
+            { accessorKey: "name", header: "Project name" },
+            { accessorKey: "type", header: "Type" },
+            { accessorKey: "subtype", header: "Subtype" },
+            { accessorKey: "createdDate", header: "Created date" },
+            {
+                accessorKey: "status",
+                header: "Status",
+                cell: ({ row }) => (_jsx("span", { className: `inline-flex items-center px-2 py-0.5 rounded typography-small2 ${statusCls[row.original.status]}`, children: row.original.status })),
+            },
+        ];
+        return (_jsxs("div", { className: "flex flex-col gap-8 h-full", children: [_jsxs("div", { className: "flex flex-col gap-2 flex-1 min-h-0", children: [_jsxs("p", { className: "typography-subtitle1 text-text-contrast-max px-1", children: ["Compact", " ", _jsx("span", { className: "typography-small2 text-text-g-contrast-medium", children: "\u2014 Header 32px \u00B7 Row 28px \u00B7 typography-small2 (12px)" })] }), _jsx(DataTable, { columns: compactColumns, data: projectData, striped: true, divided: true, headerCellClassName: "h-[32px] typography-small2", cellClassName: "h-[28px] typography-small2", onSorting: (s) => console.log("sort", s) })] }), _jsxs("div", { className: "flex flex-col gap-2 flex-1 min-h-0", children: [_jsxs("p", { className: "typography-subtitle1 text-text-contrast-max px-1", children: ["Default", " ", _jsx("span", { className: "typography-small2 text-text-g-contrast-medium", children: "\u2014 Header 44px \u00B7 Row 42px \u00B7 typography-body2 / body3" })] }), _jsx(DataTable, { columns: projectColumns, data: projectData, striped: true, divided: true, onSorting: (s) => console.log("sort", s) })] }), _jsxs("div", { className: "flex flex-col gap-2 flex-1 min-h-0", children: [_jsxs("p", { className: "typography-subtitle1 text-text-contrast-max px-1", children: ["Comfortable", " ", _jsx("span", { className: "typography-small2 text-text-g-contrast-medium", children: "\u2014 Header 56px \u00B7 Row 50px \u00B7 typography-subtitle2 / subtitle4 (16px / 14px)" })] }), _jsx(DataTable, { columns: projectColumns, data: projectData, striped: true, divided: true, headerCellClassName: "h-[56px] typography-subtitle2", cellClassName: "h-[50px] typography-subtitle4", onSorting: (s) => console.log("sort", s) })] })] }));
+    },
+};
 const DM_DATA_CATEGORY_LABELS = [
     "Sequence",
     "Date",

package/dist/components/Table/Table.js

@@ -25,7 +25,7 @@ const Table = React.forwardRef((_a, ref) => {
     var { rootClassName, className, rootRef, bordered = false, scrollableWrapper = true } = _a, props = __rest(_a, ["rootClassName", "className", "rootRef", "bordered", "scrollableWrapper"]);
     const scrollClassName = cn("relative h-full w-full min-h-0 overflow-auto", "ui-scrollbar ui-scrollbar-x-m ui-scrollbar-y-s");
     const tableClassName = cn("min-w-full caption-bottom border-separate border-spacing-0", className);
-    const tableEl = (_jsx("table", Object.assign({ ref: ref, className: tableClassName }, props)));
+    const tableEl = _jsx("table", Object.assign({ ref: ref, className: tableClassName }, props));
     if (!bordered && scrollableWrapper === false) {
         return (_jsx("table", Object.assign({ ref: ref, className: cn(tableClassName, rootClassName) }, props)));
     }
@@ -45,7 +45,7 @@ Table.displayName = "Table";
 // ---------------------------------------------------------------------------
 const TableHeader = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("thead", Object.assign({ ref: ref, className: cn("[&_tr>th]:border-b [&_tr>th]:border-b-table-c-header-line", className) }, props)));
+    return (_jsx("thead", Object.assign({ ref: ref, className: cn("[&_tr>th]:box-border [&_tr>th]:border-b [&_tr>th]:border-b-table-c-header-line", className) }, props)));
 });
 TableHeader.displayName = "TableHeader";
 // ---------------------------------------------------------------------------
@@ -89,7 +89,7 @@ TableFooter.displayName = "TableFooter";
 // ---------------------------------------------------------------------------
 const TableRow = React.forwardRef((_a, ref) => {
     var { className, divided = true, colDivided = false } = _a, props = __rest(_a, ["className", "divided", "colDivided"]);
-    return (_jsx("tr", Object.assign({ ref: ref, className: cn("transition-colors", 
+    return (_jsx("tr", Object.assign({ ref: ref, className: cn("transition-colors  box-border", 
         // Row separator — applied on cells because border-separate ignores tr borders
         divided && [
             "[&>td]:border-b [&>td]:border-b-table-c-row-line",
@@ -107,7 +107,7 @@ TableRow.displayName = "TableRow";
 // ---------------------------------------------------------------------------
 const TableHead = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("th", Object.assign({ ref: ref, className: cn("h-[44px] box-border py-3 px-3 text-left align-middle", "typography-body2 text-text-contrast-max", "bg-table-c-header-bg", 
+    return (_jsx("th", Object.assign({ ref: ref, className: cn("box-border py-3 px-3 text-left align-middle", "typography-body2 text-text-contrast-max", "bg-table-c-header-bg", "leading-[20px]", 
         // Prefer min-width only so callers (e.g. DataTable exactWidth) can set
         // a different width via inline style without fighting a fixed `w-10`.
         "[&:has([role=checkbox])]:px-3 [&:has([role=checkbox])]:min-w-10", className) }, props)));
@@ -118,7 +118,7 @@ TableHead.displayName = "TableHead";
 // ---------------------------------------------------------------------------
 const TableCell = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("td", Object.assign({ ref: ref, className: cn("h-[42px] box-border py-3 px-3 text-left align-middle", "typography-body3 text-text-contrast-max", 
+    return (_jsx("td", Object.assign({ ref: ref, className: cn("box-border py-3 px-3 text-left align-middle", "typography-body3 text-text-contrast-max", "leading-[18px]", // content สูง 18
         // Inherit row background from <tr> so every cell paints the same fill
         // (some table layouts / browsers leave the last column visually “empty”).
         "bg-inherit", "[&:has([role=checkbox])]:px-3 [&:has([role=checkbox])]:min-w-10", className) }, props)));

package/dist/esm/bundle.css

@@ -1001,6 +1001,9 @@ input[type=number] {
 .h-\[280px\]{
   height: 280px;
 }
+.h-\[28px\]{
+  height: 28px;
+}
 .h-\[2px\]{
   height: 2px;
 }
@@ -1025,9 +1028,15 @@ input[type=number] {
 .h-\[48px\]{
   height: 48px;
 }
+.h-\[50px\]{
+  height: 50px;
+}
 .h-\[54px\]{
   height: 54px;
 }
+.h-\[56px\]{
+  height: 56px;
+}
 .h-\[64px\]{
   height: 64px;
 }
@@ -1596,6 +1605,9 @@ input[type=number] {
 .whitespace-nowrap{
   white-space: nowrap;
 }
+.whitespace-pre{
+  white-space: pre;
+}
 .whitespace-pre-line{
   white-space: pre-line;
 }
@@ -4070,6 +4082,12 @@ input[type=number] {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
+.leading-\[18px\]{
+  line-height: 18px;
+}
+.leading-\[20px\]{
+  line-height: 20px;
+}
 .leading-\[3rem\]{
   line-height: 3rem;
 }
@@ -7279,6 +7297,9 @@ input[type=number] {
 .\[\&_tr\>td\]\:border-b-0 tr>td{
   border-bottom-width: 0px;
 }
+.\[\&_tr\>th\]\:box-border tr>th{
+  box-sizing: border-box;
+}
 .\[\&_tr\>th\]\:border-b tr>th{
   border-bottom-width: 1px;
 }