@rovula/ui 0.1.29 → 0.1.31

package/dist/esm/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/esm/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/esm/types/components/Icon/Icon.stories.d.ts

@@ -510,6 +510,10 @@ export declare const LucideIconBrowser: {
     args: {};
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const LucideIconAllBrowser: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
 export declare const PreviewMaterialIcon: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1036,11 +1036,11 @@ interface DataTableProps<TData, TValue> extends DataTableEditingProps<TData> {
     /** 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/src/theme/global.css

@@ -4354,6 +4354,10 @@ input[type=number] {
   height: 280px;
 }
 
+.h-\[28px\] {
+  height: 28px;
+}
+
 .h-\[2px\] {
   height: 2px;
 }
@@ -4386,10 +4390,18 @@ input[type=number] {
   height: 48px;
 }
 
+.h-\[50px\] {
+  height: 50px;
+}
+
 .h-\[54px\] {
   height: 54px;
 }
 
+.h-\[56px\] {
+  height: 56px;
+}
+
 .h-\[64px\] {
   height: 64px;
 }
@@ -5134,6 +5146,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.whitespace-pre {
+  white-space: pre;
+}
+
 .whitespace-pre-line {
   white-space: pre-line;
 }
@@ -8267,6 +8283,14 @@ input[type=number] {
   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;
 }
@@ -12361,6 +12385,10 @@ input[type=number] {
   border-bottom-width: 0px;
 }
 
+.\[\&_tr\>th\]\:box-border tr>th {
+  box-sizing: border-box;
+}
+
 .\[\&_tr\>th\]\:border-b tr>th {
   border-bottom-width: 1px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -63,10 +63,10 @@
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
-    "jsdom": "^26.0.0",
     "chromatic": "^11.7.1",
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
+    "jsdom": "^26.0.0",
     "postcss": "^8.4.38",
     "rollup": "^4.18.0",
     "rollup-plugin-dts": "^6.1.1",
@@ -111,7 +111,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
-    "lucide-react": "^0.460.0",
+    "lucide-react": "^1.7.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-day-picker": "^9.0.7",
     "react-dom": "^17.0.0 || ^18.0.0",

package/src/components/DataTable/DataTable.stories.tsx

@@ -320,6 +320,45 @@ export 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 const FigmaProjectsPage: StoryObj = {
+  render: () => {
+    const figmaProjectColumns: ColumnDef<Project>[] = [
+      { 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 }) => <StatusBadge status={row.original.status} />,
+      },
+    ];
+
+    return (
+      <DataTable
+        columns={figmaProjectColumns}
+        data={projectData}
+        bordered
+        striped
+        divided
+        tableLayout="fixed"
+        paginationMode="client"
+        pageSizeOptions={[5, 10, 20]}
+        rowActions={(row) => <ProjectRowActions row={row} />}
+        onSorting={(s) => console.log("sort", s)}
+      />
+    );
+  },
+};
+
 /** Empty state — displayed when `data` is an empty array. */
 export const Empty: StoryObj = {
   render: () => (
@@ -1435,6 +1474,108 @@ export const WithCustomRowAndCellClassName: StoryObj = {
   ),
 };
 
+// ---------------------------------------------------------------------------
+// 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: StoryObj = {
+  render: () => {
+    const compactColumns: ColumnDef<Project>[] = [
+      { accessorKey: "name", header: "Project name" },
+      { accessorKey: "type", header: "Type" },
+      { accessorKey: "subtype", header: "Subtype" },
+      { accessorKey: "createdDate", header: "Created date" },
+      {
+        accessorKey: "status",
+        header: "Status",
+        cell: ({ row }) => (
+          <span
+            className={`inline-flex items-center px-2 py-0.5 rounded typography-small2 ${
+              statusCls[row.original.status]
+            }`}
+          >
+            {row.original.status}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="flex flex-col gap-8 h-full">
+        <div className="flex flex-col gap-2 flex-1 min-h-0">
+          <p className="typography-subtitle1 text-text-contrast-max px-1">
+            Compact{" "}
+            <span className="typography-small2 text-text-g-contrast-medium">
+              — Header 32px · Row 28px · typography-small2 (12px)
+            </span>
+          </p>
+          <DataTable
+            columns={compactColumns}
+            data={projectData}
+            striped
+            divided
+            headerCellClassName="h-[32px] typography-small2"
+            cellClassName="h-[28px] typography-small2"
+            onSorting={(s) => console.log("sort", s)}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 flex-1 min-h-0">
+          <p className="typography-subtitle1 text-text-contrast-max px-1">
+            Default{" "}
+            <span className="typography-small2 text-text-g-contrast-medium">
+              — Header 44px · Row 42px · typography-body2 / body3
+            </span>
+          </p>
+          <DataTable
+            columns={projectColumns}
+            data={projectData}
+            striped
+            divided
+            onSorting={(s) => console.log("sort", s)}
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 flex-1 min-h-0">
+          <p className="typography-subtitle1 text-text-contrast-max px-1">
+            Comfortable{" "}
+            <span className="typography-small2 text-text-g-contrast-medium">
+              — Header 56px · Row 50px · typography-subtitle2 / subtitle4 (16px
+              / 14px)
+            </span>
+          </p>
+          <DataTable
+            columns={projectColumns}
+            data={projectData}
+            striped
+            divided
+            headerCellClassName="h-[56px] typography-subtitle2"
+            cellClassName="h-[50px] typography-subtitle4"
+            onSorting={(s) => console.log("sort", s)}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
 // ---------------------------------------------------------------------------
 // 14. Real-world example — Data Management (Figma: Xspector-New → Data management)
 // ---------------------------------------------------------------------------

package/src/components/DataTable/DataTable.tsx

@@ -136,10 +136,9 @@ function renderDataTableBodyCells<TData extends RowData>(opts: {
   resizable: boolean;
   tableLayout: "auto" | "fixed" | "equal";
   resizableSlackGrowColId: string | null;
-  cellClassName?: (
-    cell: Cell<TData, unknown>,
-    row: Row<TData>,
-  ) => string | undefined;
+  cellClassName?:
+    | string
+    | ((cell: Cell<TData, unknown>, row: Row<TData>) => string | undefined);
   onCellClick?: (
     cell: Cell<TData, unknown>,
     row: Row<TData>,
@@ -186,7 +185,9 @@ function renderDataTableBodyCells<TData extends RowData>(opts: {
           className={cn(
             columnMetaAlignClass(cell.column.columnDef.meta),
             cell.column.columnDef.meta?.cellClassName,
-            cellClassName?.(cell, row),
+            typeof cellClassName === "function"
+              ? cellClassName(cell, row)
+              : cellClassName,
           )}
           onClick={
             onCellClick
@@ -442,14 +443,17 @@ export interface DataTableProps<TData, TValue>
   /** 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>`). */
@@ -1822,15 +1826,17 @@ export function DataTable<TData, TValue>({
                         colSpan={header.colSpan}
                         style={headerStyle}
                         className={cn(
-                          "relative overflow-visible group/col",
+                          "relative overflow-visible group/col whitespace-pre",
                           isResizing && "select-none",
                           header.column.columnDef.meta?.headerCellClassName,
-                          headerCellClassName?.(header),
+                          typeof headerCellClassName === "function"
+                            ? headerCellClassName(header)
+                            : headerCellClassName,
                         )}
                       >
                         <div className="flex flex-row items-center gap-1 group/header">
                           {/* Column label — flex-1 pushes sort + ⋮ to the right */}
-                          <div
+                          <span
                             className={cn(
                               "flex flex-1 flex-row items-center overflow-hidden",
                               canSort && "cursor-pointer select-none",
@@ -1846,13 +1852,13 @@ export function DataTable<TData, TValue>({
                                   header.column.columnDef.header,
                                   header.getContext(),
                                 )}
-                          </div>
+                          </span>
 
                           {/* Sort button — visible when sorted; shown on hover when unsorted */}
                           {canSort && (
                             <ActionButton
                               variant="icon"
-                              size="sm"
+                              size="xs"
                               className={cn(
                                 "shrink-0 transition-opacity",
                                 isSorted
@@ -2018,7 +2024,10 @@ export function DataTable<TData, TValue>({
              *   - TableBody nth-child alternation applies across all rows (parents + children)
              *   - Row borders suppressed
              */}
-            <TableBody striped={striped} data-testid={testId ? `${testId}-tbody` : undefined}>
+            <TableBody
+              striped={striped}
+              data-testid={testId ? `${testId}-tbody` : undefined}
+            >
               {!isEmpty ? (
                 virtualized ? (
                   (() => {
@@ -2066,7 +2075,9 @@ export function DataTable<TData, TValue>({
                             className: cn(
                               rowBg,
                               onRowClick && "cursor-pointer",
-                              rowClassName?.(row, item.index),
+                              typeof rowClassName === "function"
+                                ? rowClassName(row, item.index)
+                                : rowClassName,
                             ),
                             onClick: onRowClick
                               ? (e: React.MouseEvent<HTMLTableRowElement>) =>
@@ -2142,7 +2153,9 @@ export function DataTable<TData, TValue>({
                           className: cn(
                             rowBg,
                             onRowClick && "cursor-pointer",
-                            rowClassName?.(row, rowIndex),
+                            typeof rowClassName === "function"
+                              ? rowClassName(row, rowIndex)
+                              : rowClassName,
                           ),
                           onClick: onRowClick
                             ? (e: React.MouseEvent<HTMLTableRowElement>) =>
@@ -2207,7 +2220,9 @@ export function DataTable<TData, TValue>({
                         className={cn(
                           rowBg,
                           onRowClick && "cursor-pointer",
-                          rowClassName?.(row, rowIndex),
+                          typeof rowClassName === "function"
+                            ? rowClassName(row, rowIndex)
+                            : rowClassName,
                         )}
                         data-highlighted={isHighlighted ? "true" : undefined}
                         onClick={

package/src/components/Icon/Icon.stories.tsx

@@ -390,13 +390,40 @@ export const PreviewLucideIcon = {
       <div className="flex flex-col justify-start gap-4 w-full h-full">
         <h4>Lucide icons (designer set)</h4>
         <p className="text-sm text-gray-500">
-          Names from <a href="https://lucide.dev/icons" target="_blank" rel="noreferrer" className="underline">lucide.dev/icons</a>. Use <code>getLucideIconNames()</code> for full list.
+          Names from{" "}
+          <a
+            href="https://lucide.dev/icons"
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+          >
+            lucide.dev/icons
+          </a>
+          . Use <code>getLucideIconNames()</code> for full list.
         </p>
         {LUCIDE_DESIGNER_ICONS.map((iconName) => (
           <div key={iconName} className="flex flex-row gap-6 items-center">
-            <Icon {...args} type="lucide" name={iconName} variant="outline" size="sm" />
-            <Icon {...args} type="lucide" name={iconName} variant="outline" size="md" />
-            <Icon {...args} type="lucide" name={iconName} variant="outline" size="lg" />
+            <Icon
+              {...args}
+              type="lucide"
+              name={iconName}
+              variant="outline"
+              size="sm"
+            />
+            <Icon
+              {...args}
+              type="lucide"
+              name={iconName}
+              variant="outline"
+              size="md"
+            />
+            <Icon
+              {...args}
+              type="lucide"
+              name={iconName}
+              variant="outline"
+              size="lg"
+            />
             <p className="ml-4 font-mono text-sm">{iconName}</p>
           </div>
         ))}
@@ -421,8 +448,12 @@ export const LucideIconBrowser = {
       });
     }, []);
 
+    console.log(names);
+
     const filtered = filter
-      ? names.filter((n) => n.toLowerCase().includes(filter.toLowerCase())).slice(0, 80)
+      ? names
+          .filter((n) => n.toLowerCase().includes(filter.toLowerCase()))
+          .slice(0, 80)
       : names.slice(0, 50);
 
     return (
@@ -457,6 +488,47 @@ export const LucideIconBrowser = {
   },
 } satisfies StoryObj;
 
+export const LucideIconAllBrowser = {
+  args: {},
+  render: () => {
+    const [names, setNames] = React.useState<string[]>([]);
+    const [loading, setLoading] = React.useState(true);
+
+    React.useEffect(() => {
+      import("@/icons").then(({ getLucideIconNames }) => {
+        getLucideIconNames().then((n) => {
+          setNames(n.sort());
+          setLoading(false);
+        });
+      });
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-4 p-4 max-h-[80vh] overflow-auto w-full h-full">
+        <h4>Lucide icon names ({names.length} total)</h4>
+
+        {loading ? (
+          <p>Loading...</p>
+        ) : (
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2">
+            {names.map((name) => (
+              <div
+                key={name}
+                className="flex flex-col items-center gap-1 p-2 border rounded hover:bg-gray-50"
+              >
+                <Icon type="lucide" name={name} size="md" />
+                <span className="font-mono text-xs truncate w-full text-center">
+                  {name}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
 export const PreviewMaterialIcon = {
   args: {
     // variant: "outline",