@dimaan/ui 0.0.30 → 0.0.31

package/dist/index.d.cts

@@ -386,8 +386,9 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
     /**
-     * Visual tone. `'solid'` (default) is a full-color fill; `'soft'` is a calmer
-     * tinted fill — preferred for status columns in dense data tables.
+     * Visual tone. `'soft'` (default) is a calmer, modern tinted fill — great for
+     * status columns and category labels; `'solid'` is a full-color fill for
+     * stronger emphasis.
      */
     tone?: BadgeTone;
     /** Render a small dot before the label (useful for online/status indicators). */
@@ -1568,6 +1569,15 @@ interface TableProps<T> {
     striped?: boolean;
     /** Optional row click handler. */
     onRowClick?: (row: T, rowIndex: number) => void;
+    /**
+     * Optional per-row accent colour. When it returns a colour string, Table draws a
+     * thin rounded bar at the row's leading (inline-start) edge — e.g. to colour-code
+     * rows by category/department. Return `undefined` for no accent. Off by default,
+     * so existing consumers are unaffected.
+     *
+     * @example getRowAccent={(row) => DEPARTMENT_COLOR[row.department]}
+     */
+    getRowAccent?: (row: T, index: number) => string | undefined;
     /** Optional ref to the underlying <table> element. */
     tableRef?: Ref<HTMLTableElement>;
     'aria-label'?: string;

package/dist/index.d.ts

@@ -386,8 +386,9 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     size?: BadgeSize;
     /**
-     * Visual tone. `'solid'` (default) is a full-color fill; `'soft'` is a calmer
-     * tinted fill — preferred for status columns in dense data tables.
+     * Visual tone. `'soft'` (default) is a calmer, modern tinted fill — great for
+     * status columns and category labels; `'solid'` is a full-color fill for
+     * stronger emphasis.
      */
     tone?: BadgeTone;
     /** Render a small dot before the label (useful for online/status indicators). */
@@ -1568,6 +1569,15 @@ interface TableProps<T> {
     striped?: boolean;
     /** Optional row click handler. */
     onRowClick?: (row: T, rowIndex: number) => void;
+    /**
+     * Optional per-row accent colour. When it returns a colour string, Table draws a
+     * thin rounded bar at the row's leading (inline-start) edge — e.g. to colour-code
+     * rows by category/department. Return `undefined` for no accent. Off by default,
+     * so existing consumers are unaffected.
+     *
+     * @example getRowAccent={(row) => DEPARTMENT_COLOR[row.department]}
+     */
+    getRowAccent?: (row: T, index: number) => string | undefined;
     /** Optional ref to the underlying <table> element. */
     tableRef?: Ref<HTMLTableElement>;
     'aria-label'?: string;

package/dist/index.js

@@ -877,7 +877,7 @@ var badgeDotSizeClass = {
   md: "size-2"
 };
 var badgeBaseClass = "inline-flex shrink-0 items-center rounded-full border font-medium leading-none whitespace-nowrap select-none transition-colors";
-var Badge = forwardRef(function Badge2({ variant = "default", size = "md", tone = "solid", dot = false, className, children, ...props }, ref) {
+var Badge = forwardRef(function Badge2({ variant = "default", size = "md", tone = "soft", dot = false, className, children, ...props }, ref) {
   const variantClass = tone === "soft" ? badgeSoftVariantClass[variant] : badgeVariantClass[variant];
   return /* @__PURE__ */ jsxs(
     "span",
@@ -2293,9 +2293,9 @@ function Pagination({
             children: isRtl ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-3.5" })
           }
         ),
-        /* @__PURE__ */ jsxs("span", { className: "px-1 text-foreground", children: [
-          pageIndex + 1,
-          " / ",
+        /* @__PURE__ */ jsx("span", { className: "inline-flex min-w-7 items-center justify-center rounded-lg bg-gradient-table px-2.5 py-0.5 text-xs font-semibold text-white", children: pageIndex + 1 }),
+        /* @__PURE__ */ jsxs("span", { className: "px-0.5 text-muted-foreground", children: [
+          "/ ",
           pageCount
         ] }),
         /* @__PURE__ */ jsx(
@@ -2320,7 +2320,7 @@ function Toolbar({ count, onClear, renderLabel, clearLabel, children }) {
     {
       role: "toolbar",
       "aria-label": "Bulk actions",
-      className: "flex flex-wrap items-center gap-3 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm",
+      className: "flex flex-wrap items-center gap-3 rounded-xl border border-border bg-muted/50 px-3.5 py-2.5 text-sm shadow-[var(--shadow-xs)]",
       children: [
         /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: renderLabel ? renderLabel(count) : `${count} selected` }),
         /* @__PURE__ */ jsxs("div", { className: "ms-auto flex flex-wrap items-center gap-2", children: [
@@ -2336,18 +2336,18 @@ function Toolbar({ count, onClear, renderLabel, clearLabel, children }) {
 var tableSizeClass = {
   sm: {
     row: "",
-    cell: "px-3 py-1.5 text-xs tabular-nums",
-    head: "whitespace-nowrap px-3 py-2 text-xs font-medium"
+    cell: "px-3 py-2 text-xs tabular-nums",
+    head: "whitespace-nowrap px-3 py-3 text-[11px] font-semibold uppercase tracking-wider"
   },
   md: {
     row: "",
-    cell: "px-4 py-2.5 text-sm tabular-nums",
-    head: "whitespace-nowrap px-4 py-2.5 text-xs font-medium uppercase tracking-wide"
+    cell: "px-4 py-3.5 text-sm tabular-nums",
+    head: "whitespace-nowrap px-4 py-4 text-xs font-semibold uppercase tracking-wider"
   },
   lg: {
     row: "",
-    cell: "px-5 py-3.5 text-sm tabular-nums",
-    head: "whitespace-nowrap px-5 py-3 text-sm font-medium"
+    cell: "px-6 py-4 text-sm tabular-nums",
+    head: "whitespace-nowrap px-6 py-5 text-[13px] font-semibold uppercase tracking-wider"
   }
 };
 var tableBaseClass = "w-full caption-bottom border-collapse";
@@ -2404,6 +2404,7 @@ function Table(props) {
     maxHeight,
     striped = false,
     onRowClick,
+    getRowAccent,
     tableRef,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     showPagination,
@@ -2475,166 +2476,198 @@ function Table(props) {
         children: bulkActions(selectedRowsInData)
       }
     ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "overflow-x-auto rounded-xl border border-border bg-card shadow-[var(--shadow-card)]",
-          maxHeight !== void 0 && "overflow-y-auto"
-        ),
-        style: maxHeight !== void 0 ? { maxHeight } : void 0,
-        children: /* @__PURE__ */ jsxs(
-          "table",
-          {
-            ref: tableRef,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-rowcount": totalRowCount,
-            className: cn(tableBaseClass, "text-sm text-foreground", tableClassName),
-            children: [
-              caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
-              /* @__PURE__ */ jsx(
-                "thead",
-                {
-                  className: cn(
-                    // Clean opaque header (so a sticky header fully hides the rows
-                    // scrolling underneath it) with a hairline bottom rule drawn via an
-                    // inset shadow — it stays attached to the sticky header instead of
-                    // collapsing into the first row's border.
-                    "bg-card text-muted-foreground shadow-[inset_0_-1px_0_var(--color-border)]",
-                    maxHeight !== void 0 && "sticky top-0 z-10"
-                  ),
-                  children: /* @__PURE__ */ jsxs("tr", { children: [
-                    enableRowSelection ? /* @__PURE__ */ jsx("th", { scope: "col", className: cn("w-10", sizeClasses.head), children: /* @__PURE__ */ jsx(
-                      Checkbox,
-                      {
-                        "aria-label": "Select all rows on this page",
-                        checked: allOnPageSelected,
-                        indeterminate: someOnPageSelected,
-                        disabled: selectableRowIds.length === 0,
-                        onCheckedChange: toggleHeader
-                      }
-                    ) }) : null,
-                    columns.map((column) => {
-                      const isSorted = effectiveSort.columnId === column.id;
-                      const ariaSort = isSorted ? effectiveSort.direction === "asc" ? "ascending" : "descending" : "none";
-                      return /* @__PURE__ */ jsx(
-                        "th",
-                        {
-                          scope: "col",
-                          "aria-sort": column.sortable ? ariaSort : void 0,
-                          className: cn(
-                            sizeClasses.head,
-                            alignClass[column.align ?? "start"],
-                            column.className
-                          ),
-                          children: column.sortable ? /* @__PURE__ */ jsxs(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: () => handleSortClick(column.id),
-                              className: "inline-flex items-center gap-1.5 font-inherit uppercase tracking-inherit text-inherit hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-                              "aria-label": sortAriaLabel(column, effectiveSort),
-                              children: [
-                                /* @__PURE__ */ jsx("span", { children: renderHeader(column.header) }),
-                                /* @__PURE__ */ jsx(
-                                  SortIndicator,
-                                  {
-                                    active: isSorted,
-                                    direction: isSorted ? effectiveSort.direction : null
-                                  }
-                                )
-                              ]
-                            }
-                          ) : renderHeader(column.header)
-                        },
-                        column.id
-                      );
-                    })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(
-                SkeletonRows,
-                {
-                  rowCount: skeletonCount,
-                  columnCount: totalColumnCount,
-                  cellClassName: sizeClasses.cell
-                }
-              ) : data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-                "td",
-                {
-                  colSpan: totalColumnCount,
-                  className: cn(sizeClasses.cell, "py-10 text-center text-muted-foreground"),
-                  children: emptyState ?? "No data"
-                }
-              ) }) : data.map((row, rowIndex) => {
-                const id = getRowId(row, rowIndex);
-                const isSelected = selected.has(id);
-                const rowSelectable = isRowSelectable ? isRowSelectable(row) : true;
-                return /* @__PURE__ */ jsxs(
-                  "tr",
+    /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-xl border border-border bg-card shadow-[var(--shadow-card)]", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-testid": "table-accent",
+          className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-[3px] bg-gradient-table"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("overflow-x-auto", maxHeight !== void 0 && "overflow-y-auto"),
+          style: maxHeight !== void 0 ? { maxHeight } : void 0,
+          children: /* @__PURE__ */ jsxs(
+            "table",
+            {
+              ref: tableRef,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-rowcount": totalRowCount,
+              className: cn(tableBaseClass, "text-sm text-foreground", tableClassName),
+              children: [
+                caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+                /* @__PURE__ */ jsx(
+                  "thead",
                   {
-                    "data-selected": isSelected ? "true" : void 0,
-                    "aria-selected": enableRowSelection ? isSelected : void 0,
                     className: cn(
-                      "border-t border-border/60 first:border-t-0 transition-colors",
-                      "hover:bg-primary/5",
-                      striped && rowIndex % 2 === 1 && "bg-muted/20",
-                      isSelected && selectedRowClass,
-                      onRowClick && "cursor-pointer"
+                      // Clean opaque header (so a sticky header fully hides the rows
+                      // scrolling underneath it) with a hairline bottom rule drawn via an
+                      // inset shadow — it stays attached to the sticky header instead of
+                      // collapsing into the first row's border.
+                      // Opaque header background so a sticky header fully hides the rows
+                      // scrolling underneath it (a translucent tint would let them bleed through).
+                      "bg-muted text-muted-foreground shadow-[inset_0_-1px_0_var(--color-border)]",
+                      maxHeight !== void 0 && "sticky top-0 z-10"
                     ),
-                    onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
-                    children: [
-                      enableRowSelection ? /* @__PURE__ */ jsx("td", { className: cn(sizeClasses.cell, "w-10"), children: /* @__PURE__ */ jsx(
+                    children: /* @__PURE__ */ jsxs("tr", { children: [
+                      enableRowSelection ? /* @__PURE__ */ jsx("th", { scope: "col", className: cn("w-10", sizeClasses.head), children: /* @__PURE__ */ jsx(
                         Checkbox,
                         {
-                          "aria-label": `Select row ${rowIndex + 1}`,
-                          checked: isSelected,
-                          disabled: !rowSelectable,
-                          onCheckedChange: (next) => toggleRow(id, next),
-                          onClick: stopRowClickPropagation
+                          "aria-label": "Select all rows on this page",
+                          checked: allOnPageSelected,
+                          indeterminate: someOnPageSelected,
+                          disabled: selectableRowIds.length === 0,
+                          onCheckedChange: toggleHeader
                         }
                       ) }) : null,
-                      columns.map((column) => /* @__PURE__ */ jsx(
-                        "td",
-                        {
-                          className: cn(
-                            sizeClasses.cell,
-                            alignClass[column.align ?? "start"],
-                            column.className
-                          ),
-                          children: renderCell(column, row, rowIndex)
-                        },
-                        column.id
-                      ))
-                    ]
-                  },
-                  id
-                );
-              }) })
-            ]
-          }
-        )
-      }
-    ),
-    paginationVisible ? /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        pageIndex,
-        pageSize,
-        pageCount,
-        totalRowCount,
-        pageSizeOptions,
-        onChange: handlePaginationChange,
-        labels
-      }
-    ) : null
+                      columns.map((column) => {
+                        const isSorted = effectiveSort.columnId === column.id;
+                        const ariaSort = isSorted ? effectiveSort.direction === "asc" ? "ascending" : "descending" : "none";
+                        return /* @__PURE__ */ jsx(
+                          "th",
+                          {
+                            scope: "col",
+                            "aria-sort": column.sortable ? ariaSort : void 0,
+                            className: cn(
+                              sizeClasses.head,
+                              alignClass[column.align ?? "start"],
+                              column.className,
+                              isSorted && "text-primary"
+                            ),
+                            children: column.sortable ? /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => handleSortClick(column.id),
+                                className: "inline-flex items-center gap-1.5 font-inherit uppercase tracking-inherit text-inherit hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                                "aria-label": sortAriaLabel(column, effectiveSort),
+                                children: [
+                                  /* @__PURE__ */ jsx("span", { children: renderHeader(column.header) }),
+                                  /* @__PURE__ */ jsx(
+                                    SortIndicator,
+                                    {
+                                      active: isSorted,
+                                      direction: isSorted ? effectiveSort.direction : null
+                                    }
+                                  )
+                                ]
+                              }
+                            ) : renderHeader(column.header)
+                          },
+                          column.id
+                        );
+                      })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx(
+                  SkeletonRows,
+                  {
+                    rowCount: skeletonCount,
+                    columnCount: totalColumnCount,
+                    cellClassName: sizeClasses.cell
+                  }
+                ) : data.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    colSpan: totalColumnCount,
+                    className: cn(sizeClasses.cell, "py-10 text-center text-muted-foreground"),
+                    children: emptyState ?? "No data"
+                  }
+                ) }) : data.map((row, rowIndex) => {
+                  const id = getRowId(row, rowIndex);
+                  const isSelected = selected.has(id);
+                  const rowSelectable = isRowSelectable ? isRowSelectable(row) : true;
+                  const accent = getRowAccent?.(row, rowIndex);
+                  return /* @__PURE__ */ jsxs(
+                    "tr",
+                    {
+                      "data-selected": isSelected ? "true" : void 0,
+                      "aria-selected": enableRowSelection ? isSelected : void 0,
+                      className: cn(
+                        "border-b border-border/60 last:border-b-0 transition-colors",
+                        "hover:bg-muted/60",
+                        striped && rowIndex % 2 === 1 && "bg-muted/20",
+                        isSelected && selectedRowClass,
+                        onRowClick && "cursor-pointer"
+                      ),
+                      onClick: onRowClick ? () => onRowClick(row, rowIndex) : void 0,
+                      children: [
+                        enableRowSelection ? /* @__PURE__ */ jsxs("td", { className: cn(sizeClasses.cell, "relative w-10"), children: [
+                          accent ? /* @__PURE__ */ jsx(RowAccent, { color: accent }) : null,
+                          /* @__PURE__ */ jsx(
+                            Checkbox,
+                            {
+                              "aria-label": `Select row ${rowIndex + 1}`,
+                              checked: isSelected,
+                              disabled: !rowSelectable,
+                              onCheckedChange: (next) => toggleRow(id, next),
+                              onClick: stopRowClickPropagation
+                            }
+                          )
+                        ] }) : null,
+                        columns.map((column, colIndex) => {
+                          const isFirst = colIndex === 0 && !enableRowSelection;
+                          return /* @__PURE__ */ jsxs(
+                            "td",
+                            {
+                              className: cn(
+                                sizeClasses.cell,
+                                alignClass[column.align ?? "start"],
+                                column.className,
+                                isFirst && "relative"
+                              ),
+                              children: [
+                                isFirst && accent ? /* @__PURE__ */ jsx(RowAccent, { color: accent }) : null,
+                                renderCell(column, row, rowIndex)
+                              ]
+                            },
+                            column.id
+                          );
+                        })
+                      ]
+                    },
+                    id
+                  );
+                }) })
+              ]
+            }
+          )
+        }
+      ),
+      paginationVisible ? /* @__PURE__ */ jsx("div", { className: "border-t border-border px-4 py-3", children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          pageIndex,
+          pageSize,
+          pageCount,
+          totalRowCount,
+          pageSizeOptions,
+          onChange: handlePaginationChange,
+          labels
+        }
+      ) }) : null
+    ] })
   ] });
 }
 function renderHeader(header) {
   return typeof header === "function" ? header() : header;
 }
+function RowAccent({ color }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-testid": "row-accent",
+      className: "pointer-events-none absolute inset-y-1 start-0 w-[3px] rounded-full",
+      style: { background: color }
+    }
+  );
+}
 function renderCell(column, row, rowIndex) {
   if (column.render) return column.render(row, rowIndex);
   if (column.accessor !== void 0) {
@@ -2659,10 +2692,18 @@ function stopRowClickPropagation(event) {
 function SkeletonRows({ rowCount, columnCount, cellClassName }) {
   const rowKeys = Array.from({ length: Math.max(0, rowCount) }, (_, i) => `skeleton-row-${i}`);
   const colKeys = Array.from({ length: Math.max(1, columnCount) }, (_, i) => `skeleton-col-${i}`);
-  return /* @__PURE__ */ jsx(Fragment, { children: rowKeys.map((rowKey) => /* @__PURE__ */ jsx("tr", { className: "border-t border-border", "data-testid": "table-skeleton-row", children: colKeys.map((colKey) => /* @__PURE__ */ jsx("td", { className: cellClassName, children: /* @__PURE__ */ jsx("span", { className: "block h-3 w-full animate-pulse rounded bg-muted" }) }, `${rowKey}-${colKey}`)) }, rowKey)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: rowKeys.map((rowKey) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: "border-b border-border/60 last:border-b-0",
+      "data-testid": "table-skeleton-row",
+      children: colKeys.map((colKey) => /* @__PURE__ */ jsx("td", { className: cellClassName, children: /* @__PURE__ */ jsx("span", { className: "block h-3 w-full animate-pulse rounded bg-muted" }) }, `${rowKey}-${colKey}`))
+    },
+    rowKey
+  )) });
 }
 function SortIndicator({ active, direction }) {
-  const className = cn("size-3.5 shrink-0", active ? "text-foreground" : "text-muted-foreground");
+  const className = cn("size-3.5 shrink-0", active ? "text-primary" : "text-muted-foreground");
   if (!active) return /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className });
   return direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className });
 }