shadcn-ui-react 0.5.3 → 0.6.0

package/dist/index.cjs

@@ -121,6 +121,7 @@ __export(index_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  DATA_TABLE_TEMPLATES: () => DATA_TABLE_TEMPLATES,
   DataTable: () => DataTable,
   DataTableSkeleton: () => DataTableSkeleton,
   Dialog: () => Dialog,
@@ -8391,12 +8392,215 @@ function Breadcrumbs({ items, className, classNameList }) {
 }
 
 // src/shared/data-table.tsx
-var import_react36 = require("react");
+var import_react36 = __toESM(require("react"), 1);
 var import_framer_motion2 = require("framer-motion");
 var import_react_icons18 = require("@radix-ui/react-icons");
 var import_react_table = require("@tanstack/react-table");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
+var TablePlain = import_react36.default.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "table",
+    __spreadValues({
+      ref,
+      className: cn("w-full caption-bottom text-sm", className)
+    }, props)
+  );
+});
+TablePlain.displayName = "TablePlain";
+var ACCENT_COLOR = {
+  primary: "var(--primary)",
+  emerald: "#10b981",
+  indigo: "#6366f1",
+  rose: "#f43f5e",
+  amber: "#f59e0b",
+  zinc: "#71717a"
+};
+function resolveAccent(accent, accentColor) {
+  var _a;
+  const custom = accentColor == null ? void 0 : accentColor.trim();
+  if (custom) return custom;
+  if (!accent) return void 0;
+  return (_a = ACCENT_COLOR[accent]) != null ? _a : ACCENT_COLOR.primary;
+}
+var DATA_TABLE_TEMPLATES = {
+  neo: {
+    root: cn(
+      "relative w-full overflow-hidden rounded-2xl border shadow-sm",
+      "bg-background/70 supports-[backdrop-filter]:bg-background/45 backdrop-blur",
+      "flex flex-col",
+      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
+    ),
+    table: cn("w-full text-sm"),
+    thead: "border-b",
+    theadSticky: "sticky top-0 z-10 bg-background/85 supports-[backdrop-filter]:bg-background/60 backdrop-blur",
+    trHead: "hover:bg-transparent",
+    th: cn(
+      "h-11 px-4 text-left align-middle whitespace-nowrap",
+      "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
+    ),
+    tbody: cn(
+      "[&_tr:last-child]:border-0",
+      "[&>tr:nth-child(even)]:bg-muted/20"
+    ),
+    tr: cn(
+      "border-b transition-colors",
+      "data-[state=selected]:bg-muted/35",
+      "data-[accent=on]:data-[state=selected]:bg-[color:var(--dt-accent)]/10"
+    ),
+    trClickable: cn(
+      "cursor-pointer",
+      "hover:bg-muted/35 active:bg-muted/45",
+      "data-[accent=on]:hover:bg-[color:var(--dt-accent)]/8",
+      "data-[accent=on]:active:bg-[color:var(--dt-accent)]/12"
+    ),
+    td: "px-4 py-3 align-middle",
+    footer: cn(
+      "border-t",
+      "bg-background/80 supports-[backdrop-filter]:bg-background/55 backdrop-blur"
+    ),
+    footerInner: "px-4 py-3",
+    metaWrap: "flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground",
+    controlsWrap: "flex flex-wrap items-center justify-between gap-3 sm:justify-end",
+    pageSizeLabel: "text-sm font-medium whitespace-nowrap",
+    pageSizeTrigger: cn(
+      "h-8 w-[5rem]",
+      "border-muted-foreground/20",
+      "focus-visible:ring-2 focus-visible:ring-ring",
+      "data-[accent=on]:focus-visible:ring-[color:var(--dt-accent)]/35"
+    ),
+    pageLabel: "hidden sm:flex min-w-[9.25rem] items-center justify-center text-sm font-medium",
+    navButton: cn(
+      "h-8 w-8 p-0 rounded-md",
+      "border-muted-foreground/20",
+      "hover:bg-muted/35 hover:border-muted-foreground/40",
+      "focus-visible:ring-2 focus-visible:ring-ring",
+      "data-[accent=on]:hover:border-[color:var(--dt-accent)]/45",
+      "data-[accent=on]:hover:bg-[color:var(--dt-accent)]/10",
+      "data-[accent=on]:focus-visible:ring-[color:var(--dt-accent)]/35"
+    )
+  },
+  glass: {
+    root: cn(
+      "relative w-full overflow-hidden rounded-2xl border shadow-md",
+      "bg-background/55 supports-[backdrop-filter]:bg-background/25 backdrop-blur-xl",
+      "flex flex-col",
+      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
+    ),
+    theadSticky: "sticky top-0 z-10 bg-background/70 supports-[backdrop-filter]:bg-background/35 backdrop-blur-xl",
+    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-background/20")
+  },
+  compact: {
+    th: "h-10 px-3 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap",
+    td: "px-3 py-2 text-xs align-middle",
+    pageSizeTrigger: "h-8 w-[4.5rem]"
+  },
+  minimal: {
+    root: cn("relative w-full overflow-hidden rounded-xl border-0 shadow-none bg-transparent flex flex-col"),
+    theadSticky: "sticky top-0 z-10 bg-background",
+    footer: "border-t bg-transparent",
+    tbody: "[&_tr:last-child]:border-0"
+  },
+  clean: {
+    root: cn(
+      "relative w-full overflow-hidden rounded-2xl border shadow-none",
+      "bg-background flex flex-col",
+      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
+    ),
+    theadSticky: "sticky top-0 z-10 bg-background",
+    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-transparent"),
+    tr: cn(
+      "border-b",
+      "data-[state=selected]:bg-muted/35",
+      "data-[accent=on]:data-[state=selected]:bg-[color:var(--dt-accent)]/10"
+    ),
+    trClickable: cn(
+      "cursor-pointer",
+      "hover:bg-muted/30 active:bg-muted/40",
+      "data-[accent=on]:hover:bg-[color:var(--dt-accent)]/8",
+      "data-[accent=on]:active:bg-[color:var(--dt-accent)]/12"
+    )
+  },
+  elevated: {
+    root: cn(
+      "relative w-full overflow-hidden rounded-3xl border shadow-lg",
+      "bg-card flex flex-col",
+      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
+    ),
+    theadSticky: "sticky top-0 z-10 bg-card/95 supports-[backdrop-filter]:bg-card/75 backdrop-blur",
+    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-muted/10"),
+    th: cn(
+      "h-12 px-5 text-left align-middle whitespace-nowrap",
+      "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
+    ),
+    td: "px-5 py-3 align-middle"
+  },
+  grid: {
+    root: cn("relative w-full overflow-hidden rounded-2xl border shadow-sm bg-background flex flex-col"),
+    table: cn(
+      "w-full text-sm border-separate border-spacing-0",
+      "[&_th]:border-b [&_td]:border-b",
+      "[&_th:not(:last-child)]:border-r [&_td:not(:last-child)]:border-r",
+      "[&_th]:border-muted-foreground/15 [&_td]:border-muted-foreground/10"
+    ),
+    thead: "border-b-0",
+    tbody: "[&_tr:last-child_td]:border-b-0",
+    tr: cn(
+      "transition-colors",
+      "data-[state=selected]:bg-muted/35",
+      "data-[accent=on]:data-[state=selected]:bg-[color:var(--dt-accent)]/10"
+    ),
+    trClickable: cn(
+      "cursor-pointer",
+      "hover:bg-muted/25 active:bg-muted/35",
+      "data-[accent=on]:hover:bg-[color:var(--dt-accent)]/7",
+      "data-[accent=on]:active:bg-[color:var(--dt-accent)]/10"
+    )
+  },
+  cards: {
+    root: cn("relative w-full overflow-hidden rounded-2xl border bg-transparent shadow-none flex flex-col"),
+    table: cn(
+      "w-full text-sm border-separate border-spacing-y-2",
+      "[&_tbody_tr_td]:bg-background",
+      "[&_tbody_tr_td:first-child]:rounded-l-xl",
+      "[&_tbody_tr_td:last-child]:rounded-r-xl",
+      "[&_tbody_tr_td]:shadow-sm",
+      "[&_thead_tr]:border-b"
+    ),
+    theadSticky: "sticky top-0 z-10 bg-background",
+    tr: cn(
+      "border-0",
+      "data-[state=selected]:opacity-100",
+      "data-[state=selected]:[&_td]:ring-1 data-[state=selected]:[&_td]:ring-muted-foreground/15",
+      "data-[accent=on]:data-[state=selected]:[&_td]:ring-[color:var(--dt-accent)]/25"
+    ),
+    trClickable: cn(
+      "cursor-pointer",
+      "[&_td]:transition-colors",
+      "hover:[&_td]:bg-muted/25 active:[&_td]:bg-muted/35",
+      "data-[accent=on]:hover:[&_td]:bg-[color:var(--dt-accent)]/7",
+      "data-[accent=on]:active:[&_td]:bg-[color:var(--dt-accent)]/10"
+    ),
+    tbody: "[&_tr:last-child]:border-0"
+  }
+};
+function mergeSlots(...parts) {
+  const out = {};
+  for (const p of parts) {
+    if (!p) continue;
+    for (const k of Object.keys(p)) {
+      const v = p[k];
+      if (!v) continue;
+      out[k] = out[k] ? cn(out[k], v) : v;
+    }
+  }
+  return out;
+}
 function DataTable({
   columns,
   data,
@@ -8410,18 +8614,17 @@ function DataTable({
   isRowsSelected = true,
   totalRows,
   rowsSelectedLabel = "row(s) selected",
-  className,
+  template = "neo",
+  classNames,
+  accent = null,
+  accentColor = null,
   emptyData,
-  bodyClassName,
-  cellClassName,
-  headerClassName,
-  rowClassName,
-  tableClassName,
   onPageChange,
   onClick,
   onPageSizeChange,
   animate = true,
   stickyHeader = true,
+  headerScroll = false,
   heightClassName = "h-[clamp(22rem,80vh,44rem)] supports-[height:100dvh]:h-[clamp(22rem,80dvh,44rem)]"
 }) {
   const safePageCount = Math.max(pageCount != null ? pageCount : 1, 1);
@@ -8459,114 +8662,90 @@ function DataTable({
     onPageSizeChange == null ? void 0 : onPageSizeChange(size);
     onPageChange == null ? void 0 : onPageChange(1);
   };
+  const ui = (0, import_react36.useMemo)(() => {
+    var _a;
+    const builtIn = (_a = DATA_TABLE_TEMPLATES[template]) != null ? _a : DATA_TABLE_TEMPLATES.neo;
+    return mergeSlots(DATA_TABLE_TEMPLATES.neo, builtIn, classNames);
+  }, [template, classNames]);
+  const dtAccent = resolveAccent(accent, accentColor);
+  const accentOn = !!dtAccent;
+  const dataAccent = accentOn ? "on" : "off";
+  const headerIsSticky = stickyHeader && !headerScroll;
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
-      className: cn(
-        "relative w-full overflow-hidden rounded-xl border bg-background/60 backdrop-blur supports-backdrop-filter:bg-background/40 shadow-sm",
-        "flex flex-col",
-        heightClassName,
-        className
-      ),
+      "data-accent": dataAccent,
+      className: cn(ui.root, heightClassName),
+      style: accentOn ? { "--dt-accent": dtAccent } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ScrollArea, { className: "h-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-            Table,
-            {
-              containerClassName: "overflow-visible",
-              className: cn("w-full", tableClassName),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  TableHeader,
-                  {
-                    className: cn(
-                      stickyHeader ? "sticky top-0 z-10 bg-background/80 backdrop-blur border-b" : "",
-                      headerClassName
-                    ),
-                    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                      TableRow,
-                      {
-                        className: cn("hover:bg-transparent", rowClassName),
-                        children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                          TableHead,
-                          {
-                            className: cn("whitespace-nowrap", headerClassName),
-                            children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )
-                          },
-                          header.id
-                        ))
-                      },
-                      headerGroup.id
-                    ))
-                  }
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ScrollArea, { className: "h-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "relative min-w-full w-max", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(TablePlain, { className: cn(ui.table), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHeader, { className: cn(ui.thead), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { className: cn(ui.trHead), children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              TableHead,
+              {
+                className: cn(
+                  ui.th,
+                  headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0
                 ),
-                animate ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_framer_motion2.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                  import_framer_motion2.motion.tbody,
-                  {
-                    className: cn("[&_tr:last-child]:border-0", bodyClassName),
-                    initial: { opacity: 0, y: 6 },
-                    animate: { opacity: 1, y: 0 },
-                    exit: { opacity: 0, y: -6 },
-                    transition: { duration: 0.18 },
-                    children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                      TableRow,
-                      {
-                        "data-state": row.getIsSelected() ? "selected" : void 0,
-                        onClick: () => onClick == null ? void 0 : onClick(row.original),
-                        className: cn(
-                          rowClassName,
-                          clickable ? "cursor-pointer hover:bg-muted/60 active:bg-muted/80" : ""
-                        ),
-                        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cellClassName, children: (0, import_react_table.flexRender)(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        ) }, cell.id))
-                      },
-                      row.id
-                    )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                      TableCell,
-                      {
-                        colSpan: columns.length,
-                        className: "h-28 text-center text-muted-foreground",
-                        children: "No results."
-                      }
-                    ) })
-                  },
-                  pageKey
-                ) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
+              },
+              header.id
+            )) }, headerGroup.id)) }),
+            animate ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_framer_motion2.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              import_framer_motion2.motion.tbody,
+              {
+                className: cn(ui.tbody),
+                initial: { opacity: 0, y: 6 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: -6 },
+                transition: { duration: 0.18 },
+                children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   TableRow,
                   {
+                    "data-accent": dataAccent,
                     "data-state": row.getIsSelected() ? "selected" : void 0,
                     onClick: () => onClick == null ? void 0 : onClick(row.original),
-                    className: cn(
-                      rowClassName,
-                      clickable ? "cursor-pointer hover:bg-muted/60 active:bg-muted/80" : ""
-                    ),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(cellClassName), children: (0, import_react_table.flexRender)(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    ) }, cell.id))
+                    className: cn(ui.tr, clickable ? ui.trClickable : void 0),
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
                   },
                   row.id
-                )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   TableCell,
                   {
                     colSpan: columns.length,
-                    className: "h-28 text-center text-muted-foreground",
+                    className: cn(ui.td, "text-muted-foreground h-28 text-center"),
                     children: "No results."
                   }
-                ) }) })
-              ]
-            }
-          ),
+                ) })
+              },
+              pageKey
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableBody, { className: cn(ui.tbody), children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              TableRow,
+              {
+                "data-accent": dataAccent,
+                "data-state": row.getIsSelected() ? "selected" : void 0,
+                onClick: () => onClick == null ? void 0 : onClick(row.original),
+                className: cn(ui.tr, clickable ? ui.trClickable : void 0),
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+              },
+              row.id
+            )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              TableCell,
+              {
+                colSpan: columns.length,
+                className: cn(ui.td, "text-muted-foreground h-28 text-center"),
+                children: "No results."
+              }
+            ) }) })
+          ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollBar, { orientation: "horizontal" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "border-t bg-background/70 backdrop-blur supports-backdrop-filter:bg-background/50", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
-            isRowsSelected && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cn(ui.footer), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cn(ui.footerInner), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn(ui.metaWrap), children: [
+            isRowsSelected && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
               table.getFilteredSelectedRowModel().rows.length,
               " ",
               ofLabel,
@@ -8575,29 +8754,22 @@ function DataTable({
               " ",
               rowsSelectedLabel
             ] }),
-            typeof totalRows === "number" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-sm text-muted-foreground", children: [
+            typeof totalRows === "number" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
               "Total: ",
               totalRows,
               " registros"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 sm:justify-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn(ui.controlsWrap), children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-sm font-medium whitespace-nowrap", children: rowPerPageLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
-                Select2,
-                {
-                  value: `${pageSize}`,
-                  onValueChange: (value) => changePageSize(Number(value)),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { className: "h-8 w-21", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: pageSize }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
-                  ]
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: cn(ui.pageSizeLabel), children: rowPerPageLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Select2, { value: `${pageSize}`, onValueChange: (v) => changePageSize(Number(v)), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { "data-accent": dataAccent, className: cn(ui.pageSizeTrigger), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: `${pageSize}` }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
+              ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "hidden sm:flex min-w-35 items-center justify-center text-sm font-medium", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn(ui.pageLabel), children: [
                 pageLabel,
                 " ",
                 pageIndex + 1,
@@ -8609,9 +8781,10 @@ function DataTable({
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 Button,
                 {
+                  "data-accent": dataAccent,
                   "aria-label": "Go to first page",
                   variant: "outline",
-                  className: "hidden h-8 w-8 p-0 lg:flex",
+                  className: cn("hidden lg:flex", ui.navButton),
                   onClick: () => goToPage(0),
                   disabled: pageIndex === 0,
                   children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons18.DoubleArrowLeftIcon, { className: "h-4 w-4" })
@@ -8620,38 +8793,41 @@ function DataTable({
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 Button,
                 {
+                  "data-accent": dataAccent,
                   "aria-label": "Go to previous page",
                   variant: "outline",
-                  className: "h-8 w-8 p-0",
+                  className: cn(ui.navButton),
                   onClick: () => goToPage(pageIndex - 1),
                   disabled: pageIndex === 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeftIcon, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeft, { className: "h-4 w-4" })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 Button,
                 {
+                  "data-accent": dataAccent,
                   "aria-label": "Go to next page",
                   variant: "outline",
-                  className: "h-8 w-8 p-0",
+                  className: cn(ui.navButton),
                   onClick: () => goToPage(pageIndex + 1),
                   disabled: pageIndex + 1 >= safePageCount,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRightIcon, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRight, { className: "h-4 w-4" })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 Button,
                 {
+                  "data-accent": dataAccent,
                   "aria-label": "Go to last page",
                   variant: "outline",
-                  className: "hidden h-8 w-8 p-0 lg:flex",
+                  className: cn("hidden lg:flex", ui.navButton),
                   onClick: () => goToPage(safePageCount - 1),
                   disabled: pageIndex + 1 >= safePageCount,
                   children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons18.DoubleArrowRightIcon, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "sm:hidden w-full text-center text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground w-full text-center text-xs sm:hidden", children: [
               pageLabel,
               " ",
               pageIndex + 1,
@@ -9145,6 +9321,7 @@ function UiInput(_a) {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DATA_TABLE_TEMPLATES,
   DataTable,
   DataTableSkeleton,
   Dialog,