shadcn-ui-react 0.5.2 → 0.6.0

package/dist/index.js

@@ -8182,18 +8182,223 @@ function Breadcrumbs({ items, className, classNameList }) {
 }
 
 // src/shared/data-table.tsx
-import React67, { useEffect as useEffect4, useMemo as useMemo3 } from "react";
+import React67, { useMemo as useMemo3 } from "react";
 import { AnimatePresence, motion as motion2 } from "framer-motion";
-import { DoubleArrowLeftIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
+import {
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon
+} from "@radix-ui/react-icons";
 import {
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
-  getPaginationRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon6 } from "lucide-react";
+import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import { jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
+var TablePlain = React67.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx48(
+    "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,
@@ -8207,132 +8412,138 @@ 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);
-  const [pagination, setPagination] = React67.useState({
-    pageIndex: Math.max(page - 1, 0),
-    pageSize: perPage
-  });
-  useEffect4(() => {
-    setPagination((prev) => {
-      const nextIndex = Math.max(page - 1, 0);
-      const nextSize = perPage;
-      if (prev.pageIndex === nextIndex && prev.pageSize === nextSize) return prev;
-      return { pageIndex: nextIndex, pageSize: nextSize };
-    });
-  }, [page, perPage]);
-  useEffect4(() => {
-    setPagination((prev) => {
-      const maxIndex = Math.max(safePageCount - 1, 0);
-      const clamped = Math.min(prev.pageIndex, maxIndex);
-      if (clamped === prev.pageIndex) return prev;
-      return __spreadProps(__spreadValues({}, prev), { pageIndex: clamped });
-    });
-  }, [safePageCount]);
+  const pageIndex = Math.min(Math.max(page - 1, 0), safePageCount - 1);
+  const pageSize = Math.max(perPage, 1);
+  const paginationState = useMemo3(
+    () => ({ pageIndex, pageSize }),
+    [pageIndex, pageSize]
+  );
   const table = useReactTable({
     data,
     columns,
     pageCount: safePageCount,
+    state: { pagination: paginationState },
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    state: { pagination },
-    onPaginationChange: setPagination,
-    getPaginationRowModel: getPaginationRowModel(),
     manualPagination: true,
-    manualFiltering: true
+    manualFiltering: true,
+    autoResetAll: false,
+    autoResetPageIndex: false
   });
   const clickable = !!onClick;
-  useEffect4(() => {
-    onPageChange == null ? void 0 : onPageChange(pagination.pageIndex + 1);
-  }, [pagination.pageIndex, onPageChange]);
   const pageKey = useMemo3(
-    () => `${pagination.pageIndex}-${pagination.pageSize}-${data.length}`,
-    [pagination.pageIndex, pagination.pageSize, data.length]
+    () => `${pageIndex}-${pageSize}-${data.length}`,
+    [pageIndex, pageSize, data.length]
   );
+  const goToPage = (nextPageIndex) => {
+    const clamped = Math.min(Math.max(nextPageIndex, 0), safePageCount - 1);
+    if (clamped === pageIndex) return;
+    onPageChange == null ? void 0 : onPageChange(clamped + 1);
+  };
+  const changePageSize = (newSize) => {
+    const size = Math.max(Number(newSize) || 1, 1);
+    if (size === pageSize) return;
+    onPageSizeChange == null ? void 0 : onPageSizeChange(size);
+    onPageChange == null ? void 0 : onPageChange(1);
+  };
+  const ui = useMemo3(() => {
+    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__ */ jsxs23(
     "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__ */ jsx48("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs23(ScrollArea, { className: "h-full", children: [
-          /* @__PURE__ */ jsxs23(
-            Table,
-            {
-              containerClassName: "overflow-visible",
-              className: cn("w-full", tableClassName),
-              children: [
-                /* @__PURE__ */ jsx48(
-                  TableHeader,
-                  {
-                    className: cn(
-                      headerClassName,
-                      stickyHeader ? "sticky top-0 z-10 bg-background/80 backdrop-blur border-b" : ""
-                    ),
-                    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx48(TableRow, { className: cn("hover:bg-transparent", rowClassName), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx48(TableHead, { className: cn("whitespace-nowrap", headerClassName), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id))
-                  }
+        /* @__PURE__ */ jsx48("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs23(ScrollArea, { className: "h-full", children: [
+          /* @__PURE__ */ jsx48("div", { className: "relative min-w-full w-max", children: /* @__PURE__ */ jsxs23(TablePlain, { className: cn(ui.table), children: [
+            /* @__PURE__ */ jsx48(TableHeader, { className: cn(ui.thead), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx48(TableRow, { className: cn(ui.trHead), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx48(
+              TableHead,
+              {
+                className: cn(
+                  ui.th,
+                  headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0
                 ),
-                animate ? /* @__PURE__ */ jsx48(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx48(
-                  motion2.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__ */ jsx48(
-                      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__ */ jsx48(TableCell, { className: cellClassName, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-                      },
-                      row.id
-                    )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(TableCell, { colSpan: columns.length, className: "h-28 text-center text-muted-foreground", children: "No results." }) })
-                  },
-                  pageKey
-                ) }) : /* @__PURE__ */ jsx48(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx48(
+                children: header.isPlaceholder ? null : flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
+              },
+              header.id
+            )) }, headerGroup.id)) }),
+            animate ? /* @__PURE__ */ jsx48(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx48(
+              motion2.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__ */ jsx48(
                   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__ */ jsx48(TableCell, { className: cn(cellClassName), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                    className: cn(ui.tr, clickable ? ui.trClickable : void 0),
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cn(ui.td), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
                   },
                   row.id
-                )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { children: /* @__PURE__ */ jsx48(TableCell, { colSpan: columns.length, className: "h-28 text-center text-muted-foreground", children: "No results." }) }) })
-              ]
-            }
-          ),
+                )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ jsx48(
+                  TableCell,
+                  {
+                    colSpan: columns.length,
+                    className: cn(ui.td, "text-muted-foreground h-28 text-center"),
+                    children: "No results."
+                  }
+                ) })
+              },
+              pageKey
+            ) }) : /* @__PURE__ */ jsx48(TableBody, { className: cn(ui.tbody), children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx48(
+              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__ */ jsx48(TableCell, { className: cn(ui.td), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+              },
+              row.id
+            )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ jsx48(
+              TableCell,
+              {
+                colSpan: columns.length,
+                className: cn(ui.td, "text-muted-foreground h-28 text-center"),
+                children: "No results."
+              }
+            ) }) })
+          ] }) }),
           /* @__PURE__ */ jsx48(ScrollBar, { orientation: "horizontal" })
         ] }) }),
-        /* @__PURE__ */ jsx48("div", { className: "border-t bg-background/70 backdrop-blur supports-backdrop-filter:bg-background/50", children: /* @__PURE__ */ jsx48("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs23("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
-          /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
-            isRowsSelected && /* @__PURE__ */ jsxs23("div", { className: "text-muted-foreground text-sm", children: [
+        /* @__PURE__ */ jsx48("div", { className: cn(ui.footer), children: /* @__PURE__ */ jsx48("div", { className: cn(ui.footerInner), children: /* @__PURE__ */ jsxs23("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[1fr_auto] sm:items-center", children: [
+          /* @__PURE__ */ jsxs23("div", { className: cn(ui.metaWrap), children: [
+            isRowsSelected && /* @__PURE__ */ jsxs23("div", { children: [
               table.getFilteredSelectedRowModel().rows.length,
               " ",
               ofLabel,
@@ -8341,37 +8552,25 @@ function DataTable({
               " ",
               rowsSelectedLabel
             ] }),
-            typeof totalRows === "number" && /* @__PURE__ */ jsxs23("div", { className: "text-sm text-muted-foreground", children: [
+            typeof totalRows === "number" && /* @__PURE__ */ jsxs23("div", { children: [
               "Total: ",
               totalRows,
               " registros"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center justify-between gap-3 sm:justify-end", children: [
+          /* @__PURE__ */ jsxs23("div", { className: cn(ui.controlsWrap), children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx48("p", { className: "text-sm font-medium whitespace-nowrap", children: rowPerPageLabel }),
-              /* @__PURE__ */ jsxs23(
-                Select2,
-                {
-                  value: `${pagination.pageSize}`,
-                  onValueChange: (value) => {
-                    const newSize = Number(value);
-                    setPagination((p) => __spreadProps(__spreadValues({}, p), { pageSize: newSize, pageIndex: 0 }));
-                    onPageSizeChange == null ? void 0 : onPageSizeChange(newSize);
-                    onPageChange == null ? void 0 : onPageChange(1);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx48(SelectTrigger, { className: "h-8 w-21", children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: pagination.pageSize }) }),
-                    /* @__PURE__ */ jsx48(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx48(SelectItem, { value: `${size}`, children: size }, size)) })
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsx48("p", { className: cn(ui.pageSizeLabel), children: rowPerPageLabel }),
+              /* @__PURE__ */ jsxs23(Select2, { value: `${pageSize}`, onValueChange: (v) => changePageSize(Number(v)), children: [
+                /* @__PURE__ */ jsx48(SelectTrigger, { "data-accent": dataAccent, className: cn(ui.pageSizeTrigger), children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: `${pageSize}` }) }),
+                /* @__PURE__ */ jsx48(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx48(SelectItem, { value: `${size}`, children: size }, size)) })
+              ] })
             ] }),
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs23("div", { className: "hidden sm:flex min-w-35 items-center justify-center text-sm font-medium", children: [
+              /* @__PURE__ */ jsxs23("div", { className: cn(ui.pageLabel), children: [
                 pageLabel,
                 " ",
-                pagination.pageIndex + 1,
+                pageIndex + 1,
                 " ",
                 ofLabel,
                 " ",
@@ -8380,54 +8579,56 @@ function DataTable({
               /* @__PURE__ */ jsx48(
                 Button,
                 {
+                  "data-accent": dataAccent,
                   "aria-label": "Go to first page",
                   variant: "outline",
-                  className: "hidden h-8 w-8 p-0 lg:flex",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: 0 })),
-                  disabled: pagination.pageIndex === 0,
+                  className: cn("hidden lg:flex", ui.navButton),
+                  onClick: () => goToPage(0),
+                  disabled: pageIndex === 0,
                   children: /* @__PURE__ */ jsx48(DoubleArrowLeftIcon, { className: "h-4 w-4" })
                 }
               ),
               /* @__PURE__ */ jsx48(
                 Button,
                 {
+                  "data-accent": dataAccent,
                   "aria-label": "Go to previous page",
                   variant: "outline",
-                  className: "h-8 w-8 p-0",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: Math.max(p.pageIndex - 1, 0) })),
-                  disabled: pagination.pageIndex === 0,
-                  children: /* @__PURE__ */ jsx48(ChevronLeftIcon2, { className: "h-4 w-4" })
+                  className: cn(ui.navButton),
+                  onClick: () => goToPage(pageIndex - 1),
+                  disabled: pageIndex === 0,
+                  children: /* @__PURE__ */ jsx48(ChevronLeft3, { className: "h-4 w-4" })
                 }
               ),
               /* @__PURE__ */ jsx48(
                 Button,
                 {
+                  "data-accent": dataAccent,
                   "aria-label": "Go to next page",
                   variant: "outline",
-                  className: "h-8 w-8 p-0",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), {
-                    pageIndex: Math.min(p.pageIndex + 1, safePageCount - 1)
-                  })),
-                  disabled: pagination.pageIndex + 1 >= safePageCount,
-                  children: /* @__PURE__ */ jsx48(ChevronRightIcon6, { className: "h-4 w-4" })
+                  className: cn(ui.navButton),
+                  onClick: () => goToPage(pageIndex + 1),
+                  disabled: pageIndex + 1 >= safePageCount,
+                  children: /* @__PURE__ */ jsx48(ChevronRight3, { className: "h-4 w-4" })
                 }
               ),
               /* @__PURE__ */ jsx48(
                 Button,
                 {
+                  "data-accent": dataAccent,
                   "aria-label": "Go to last page",
                   variant: "outline",
-                  className: "hidden h-8 w-8 p-0 lg:flex",
-                  onClick: () => setPagination((p) => __spreadProps(__spreadValues({}, p), { pageIndex: safePageCount - 1 })),
-                  disabled: pagination.pageIndex + 1 >= safePageCount,
+                  className: cn("hidden lg:flex", ui.navButton),
+                  onClick: () => goToPage(safePageCount - 1),
+                  disabled: pageIndex + 1 >= safePageCount,
                   children: /* @__PURE__ */ jsx48(DoubleArrowRightIcon, { className: "h-4 w-4" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs23("div", { className: "sm:hidden w-full text-center text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "text-muted-foreground w-full text-center text-xs sm:hidden", children: [
               pageLabel,
               " ",
-              pagination.pageIndex + 1,
+              pageIndex + 1,
               " ",
               ofLabel,
               " ",
@@ -8483,7 +8684,7 @@ function DataTableSkeleton({
 // src/shared/fileupload.tsx
 import { AvatarIcon } from "@radix-ui/react-icons";
 import { CameraIcon } from "lucide-react";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { useDropzone } from "react-dropzone";
 import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 function FileUpload({
@@ -8522,7 +8723,7 @@ function FileUpload({
 }
 function ImagePreview({ file }) {
   const [objectUrl, setObjectUrl] = useState5(null);
-  useEffect5(() => {
+  useEffect4(() => {
     const url = URL.createObjectURL(file);
     setObjectUrl(url);
     return () => {
@@ -8917,6 +9118,7 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  DATA_TABLE_TEMPLATES,
   DataTable,
   DataTableSkeleton,
   Dialog,