@dimaan/ui 0.0.29 → 0.0.31

package/dist/index.js

@@ -344,7 +344,7 @@ function DashboardMain({ className, children, ...props }) {
         // stretching the whole layout past 100%.
         "flex min-h-screen min-w-0 flex-1 flex-col transition-[margin] duration-200 ease-out",
         // On desktop, push the main column past the fixed sidebar using logical margin.
-        collapsed ? "lg:ms-[var(--sidebar-width-collapsed)]" : "lg:ms-[var(--sidebar-width)]",
+        collapsed ? "lg:ms-0" : "lg:ms-(--sidebar-width)",
         className
       ),
       ...props,
@@ -513,14 +513,16 @@ function Sidebar({ className, children, ...props }) {
           "fixed inset-y-0 start-0 z-40 flex flex-col",
           // Surface
           "bg-sidebar text-sidebar-foreground border-e border-sidebar-border",
-          // Sizing — width animates between full and collapsed
-          collapsed ? "w-[var(--sidebar-width-collapsed)]" : "w-[var(--sidebar-width)]",
+          // Sizing — always full width; collapse hides it off-canvas (below).
+          "w-[var(--sidebar-width)]",
           // Motion
-          "transition-[transform,width] duration-200 ease-out",
-          // Mobile slide: hidden by default, visible when mobileOpen.
-          // Logical translate via rtl variant so it slides off the inline-start edge
-          // in both LTR and RTL.
-          mobileOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full lg:translate-x-0 lg:rtl:translate-x-0",
+          "transition-transform duration-200 ease-out",
+          // Mobile: slide in/out via mobileOpen. Logical translate (rtl variant)
+          // so it slides off the inline-start edge in both LTR and RTL.
+          mobileOpen ? "translate-x-0" : "-translate-x-full rtl:translate-x-full",
+          // Desktop: collapse fully hides the sidebar off-canvas; the header
+          // trigger slides it back in and the main content reclaims the width.
+          collapsed ? "lg:-translate-x-full lg:rtl:translate-x-full" : "lg:translate-x-0 lg:rtl:translate-x-0",
           className
         ),
         ...props,
@@ -543,18 +545,8 @@ function SidebarFooter({ className, children, ...props }) {
   );
 }
 function SidebarGroup({ label, className, children, ...props }) {
-  const { collapsed } = useDashboardLayout();
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 py-2", className), ...props, children: [
-    label ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "px-3 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground transition-opacity",
-          collapsed && "pointer-events-none h-0 overflow-hidden opacity-0"
-        ),
-        children: label
-      }
-    ) : null,
+    label ? /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: label }) : null,
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children })
   ] });
 }
@@ -588,7 +580,6 @@ function SidebarNavGroup({
   onClick,
   ...props
 }) {
-  const { collapsed } = useDashboardLayout();
   const submenuId = useId();
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = openProp !== void 0;
@@ -615,27 +606,23 @@ function SidebarNavGroup({
   const isActive = active || hasActiveChild;
   const prevHasActiveChild = useRef(false);
   useEffect(() => {
-    if (hasActiveChild && !prevHasActiveChild.current && !collapsed) {
+    if (hasActiveChild && !prevHasActiveChild.current) {
       setOpen(true);
     }
     prevHasActiveChild.current = hasActiveChild;
-  }, [hasActiveChild, collapsed, setOpen]);
-  useEffect(() => {
-    if (collapsed && open) setOpen(false);
-  }, [collapsed, open, setOpen]);
-  const titleAttr = collapsed && typeof label === "string" ? label : props.title ?? void 0;
-  const showChildren = !collapsed;
+  }, [hasActiveChild, setOpen]);
+  const titleAttr = props.title ?? void 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        "aria-expanded": showChildren ? open : void 0,
-        "aria-controls": showChildren ? submenuId : void 0,
+        "aria-expanded": open,
+        "aria-controls": submenuId,
         "data-active": isActive ? "true" : void 0,
         title: titleAttr,
         onClick: (e) => {
-          if (showChildren) setOpen(!open);
+          setOpen(!open);
           onClick?.(e);
         },
         className: cn(
@@ -643,7 +630,6 @@ function SidebarNavGroup({
           "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
           isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
-          collapsed && "justify-center px-0",
           className
         ),
         ...props,
@@ -656,18 +642,9 @@ function SidebarNavGroup({
             }
           ) : null,
           icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "flex-1 truncate text-start transition-[opacity,width]",
-                collapsed && "pointer-events-none w-0 opacity-0"
-              ),
-              children: label
-            }
-          ),
-          endSlot && !collapsed ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: endSlot }) : null,
-          showChildren ? /* @__PURE__ */ jsx(ChevronCaret, { open }) : null
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: label }),
+          endSlot ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: endSlot }) : null,
+          /* @__PURE__ */ jsx(ChevronCaret, { open })
         ]
       }
     ),
@@ -675,10 +652,10 @@ function SidebarNavGroup({
       "div",
       {
         id: submenuId,
-        hidden: !showChildren || !open,
+        hidden: !open,
         className: cn(
           "grid transition-[grid-template-rows] duration-200 ease-out",
-          showChildren && open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
         ),
         children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 ps-7 pt-1", children: /* @__PURE__ */ jsx(SidebarNavGroupContext.Provider, { value: contextValue, children }) }) })
       }
@@ -709,7 +686,6 @@ function SidebarNavItem({
   end,
   ...props
 }) {
-  const { collapsed } = useDashboardLayout();
   const resolved = useResolvedPath(to);
   const group = useContext(SidebarNavGroupContext);
   const itemId = useId();
@@ -721,13 +697,12 @@ function SidebarNavItem({
     return () => group.reportActive(itemId, false);
   }, [group, itemId, isActive]);
   const labelContent = label ?? children;
-  const titleAttr = collapsed && typeof labelContent === "string" ? labelContent : props.title;
+  const titleAttr = props.title;
   const getClassName = (active) => cn(
     "group relative flex h-9 shrink-0 items-center gap-3 rounded-md px-3 text-sm font-medium outline-none transition-colors",
     "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
     "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-sidebar",
     active && "bg-sidebar-accent text-sidebar-accent-foreground",
-    collapsed && "justify-center px-0",
     className
   );
   const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -739,17 +714,8 @@ function SidebarNavItem({
       }
     ) : null,
     icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center", children: icon }) : null,
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "flex-1 truncate text-start transition-[opacity,width]",
-          collapsed && "pointer-events-none w-0 opacity-0"
-        ),
-        children: labelContent
-      }
-    ),
-    endSlot && !collapsed ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: endSlot }) : null
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: labelContent }),
+    endSlot ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: endSlot }) : null
   ] });
   if (render) {
     return render({
@@ -911,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",
@@ -2327,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(
@@ -2354,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: [
@@ -2370,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";
@@ -2438,6 +2404,7 @@ function Table(props) {
     maxHeight,
     striped = false,
     onRowClick,
+    getRowAccent,
     tableRef,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     showPagination,
@@ -2509,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) {
@@ -2693,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 });
 }