shadcn-ui-react 0.5.1 → 0.5.2

package/dist/index.cjs

@@ -7860,16 +7860,18 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 // src/components/table.tsx
 var React59 = __toESM(require("react"), 1);
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var Table = React59.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    "table",
-    __spreadValues({
-      ref,
-      className: cn("w-full caption-bottom text-sm", className)
-    }, props)
-  ) });
-});
+var Table = React59.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, containerClassName } = _b, props = __objRest(_b, ["className", "containerClassName"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("relative w-full overflow-auto", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "table",
+      __spreadValues({
+        ref,
+        className: cn("w-full caption-bottom text-sm", className)
+      }, props)
+    ) });
+  }
+);
 Table.displayName = "Table";
 var TableHeader = React59.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -7922,7 +7924,7 @@ var TableHead = React59.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -7936,7 +7938,7 @@ var TableCell = React59.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -8390,6 +8392,7 @@ function Breadcrumbs({ items, className, classNameList }) {
 
 // src/shared/data-table.tsx
 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");
@@ -8416,16 +8419,36 @@ function DataTable({
   tableClassName,
   onPageChange,
   onClick,
-  onPageSizeChange
+  onPageSizeChange,
+  animate = true,
+  stickyHeader = true,
+  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] = import_react36.default.useState({
     pageIndex: Math.max(page - 1, 0),
     pageSize: perPage
   });
+  (0, import_react36.useEffect)(() => {
+    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]);
+  (0, import_react36.useEffect)(() => {
+    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 table = (0, import_react_table.useReactTable)({
     data,
     columns,
-    pageCount,
+    pageCount: safePageCount,
     getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
     getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
     state: { pagination },
@@ -8434,147 +8457,190 @@ function DataTable({
     manualPagination: true,
     manualFiltering: true
   });
-  const onClickItem = (row) => {
-    if (onClick) {
-      onClick(row);
-    }
-  };
+  const clickable = !!onClick;
   (0, import_react36.useEffect)(() => {
-    if (onPageChange) {
-      onPageChange(pagination.pageIndex + 1);
-    }
-  }, [pagination, onPageChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("rounded-md border bg-background flex flex-col", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ScrollArea, { className: "h-[calc(80vh-220px)] md:h-[calc(80dvh-80px)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Table, { className: cn("relative", tableClassName), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHeader, { className: headerClassName, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { className: rowClassName, children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHead, { className: 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)(TableBody, { className: bodyClassName, 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: () => onClickItem(row.original),
-            className: rowClassName,
-            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-24 text-center",
-            children: "No results."
-          }
-        ) }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollBar, { orientation: "horizontal" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "border-t px-4 py-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
-        isRowsSelected && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-muted-foreground text-sm", children: [
-          table.getFilteredSelectedRowModel().rows.length,
-          " ",
-          ofLabel,
-          " ",
-          table.getFilteredRowModel().rows.length,
-          " ",
-          rowsSelectedLabel
-        ] }),
-        totalRows ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-sm text-muted-foreground", children: [
-          "Total: ",
-          totalRows,
-          " registros"
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end", 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 }),
+    onPageChange == null ? void 0 : onPageChange(pagination.pageIndex + 1);
+  }, [pagination.pageIndex, onPageChange]);
+  const pageKey = (0, import_react36.useMemo)(
+    () => `${pagination.pageIndex}-${pagination.pageSize}-${data.length}`,
+    [pagination.pageIndex, pagination.pageSize, data.length]
+  );
+  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
+      ),
+      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)(
-            Select2,
+            Table,
             {
-              value: `${pagination.pageSize}`,
-              onValueChange: (value) => {
-                const newSize = Number(value);
-                setPagination(__spreadProps(__spreadValues({}, pagination), {
-                  pageSize: newSize,
-                  pageIndex: 0
-                }));
-                if (onPageSizeChange) onPageSizeChange(newSize);
-              },
+              containerClassName: "overflow-visible",
+              className: cn("w-full", tableClassName),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: pagination.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)(
+                  TableHeader,
+                  {
+                    className: cn(
+                      headerClassName,
+                      stickyHeader ? "sticky top-0 z-10 bg-background/80 backdrop-blur border-b" : ""
+                    ),
+                    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))
+                  }
+                ),
+                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)(
+                  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: cn(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." }) }) })
               ]
             }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex w-[110px] items-center justify-center text-sm font-medium", children: [
-            pageLabel,
-            " ",
-            pagination.pageIndex + 1,
-            " ",
-            ofLabel,
-            " ",
-            pageCount
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            Button,
-            {
-              "aria-label": "Go to first page",
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), { pageIndex: 0 })),
-              disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons18.DoubleArrowLeftIcon, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            Button,
-            {
-              "aria-label": "Go to previous page",
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), {
-                pageIndex: pagination.pageIndex - 1
-              })),
-              disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeftIcon, { className: "h-4 w-4" })
-            }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            Button,
-            {
-              "aria-label": "Go to next page",
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), {
-                pageIndex: pagination.pageIndex + 1
-              })),
-              disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRightIcon, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            Button,
-            {
-              "aria-label": "Go to last page",
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), { pageIndex: pageCount - 1 })),
-              disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons18.DoubleArrowRightIcon, { className: "h-4 w-4" })
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
+          /* @__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: [
+              table.getFilteredSelectedRowModel().rows.length,
+              " ",
+              ofLabel,
+              " ",
+              table.getFilteredRowModel().rows.length,
+              " ",
+              rowsSelectedLabel
+            ] }),
+            typeof totalRows === "number" && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-sm text-muted-foreground", 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: "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: `${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__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { className: "h-8 w-21", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: pagination.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: [
+                pageLabel,
+                " ",
+                pagination.pageIndex + 1,
+                " ",
+                ofLabel,
+                " ",
+                safePageCount
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                Button,
+                {
+                  "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,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_icons18.DoubleArrowLeftIcon, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                Button,
+                {
+                  "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__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeftIcon, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                Button,
+                {
+                  "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__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRightIcon, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                Button,
+                {
+                  "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,
+                  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: [
+              pageLabel,
+              " ",
+              pagination.pageIndex + 1,
+              " ",
+              ofLabel,
+              " ",
+              safePageCount
+            ] })
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
 }
 
 // src/shared/data-table-skeleton.tsx
@@ -8589,10 +8655,10 @@ function DataTableSkeleton({
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "w-full space-y-3 overflow-auto", children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex w-full items-center justify-between space-x-2 overflow-auto p-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-1 items-center space-x-2 space-y-4", children: [
-        searchableColumnCount > 0 ? Array.from({ length: searchableColumnCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-10 w-[150px] lg:w-[250px]" }, i)) : null,
-        filterableColumnCount > 0 ? Array.from({ length: filterableColumnCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-10 w-[70px] border-dashed" }, i)) : null
+        searchableColumnCount > 0 ? Array.from({ length: searchableColumnCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-10 w-37.5 lg:w-62.5" }, i)) : null,
+        filterableColumnCount > 0 ? Array.from({ length: filterableColumnCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-10 w-17.5 border-dashed" }, i)) : null
       ] }),
-      showViewOptions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "ml-auto hidden h-7 w-[70px] lg:flex" }) : null
+      showViewOptions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "ml-auto hidden h-7 w-17.5 lg:flex" }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "rounded-md border", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Table, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TableHeader, { children: Array.from({ length: 1 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, i2) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-6 w-full" }) }, i2)) }, i)) }),
@@ -8603,9 +8669,9 @@ function DataTableSkeleton({
       /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8", children: [
         /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-8 w-24" }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-8 w-[70px]" })
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-8 w-17.5" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-8 w-20" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex w-25 items-center justify-center text-sm font-medium", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "h-8 w-20" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "hidden size-8 lg:block" }),
           /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Skeleton, { className: "size-8" }),

package/dist/index.d.cts

@@ -645,7 +645,9 @@ declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Ele
 
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
+declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & {
+    containerClassName?: string;
+} & React$1.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
@@ -790,8 +792,11 @@ interface DataTableProps<TData, TValue> {
     pageLabel?: string;
     ofLabel?: string;
     emptyData?: React__default.ReactNode;
+    animate?: boolean;
+    stickyHeader?: boolean;
+    heightClassName?: string;
 }
-declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, className, emptyData, bodyClassName, cellClassName, headerClassName, rowClassName, tableClassName, onPageChange, onClick, onPageSizeChange, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, className, emptyData, bodyClassName, cellClassName, headerClassName, rowClassName, tableClassName, onPageChange, onClick, onPageSizeChange, animate, stickyHeader, heightClassName, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 type DataTableSkeletonProps = {
     columnCount: number;

package/dist/index.d.ts

@@ -645,7 +645,9 @@ declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Ele
 
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & React$1.RefAttributes<HTMLTableElement>>;
+declare const Table: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableElement> & {
+    containerClassName?: string;
+} & React$1.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableSectionElement> & React$1.RefAttributes<HTMLTableSectionElement>>;
@@ -790,8 +792,11 @@ interface DataTableProps<TData, TValue> {
     pageLabel?: string;
     ofLabel?: string;
     emptyData?: React__default.ReactNode;
+    animate?: boolean;
+    stickyHeader?: boolean;
+    heightClassName?: string;
 }
-declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, className, emptyData, bodyClassName, cellClassName, headerClassName, rowClassName, tableClassName, onPageChange, onClick, onPageSizeChange, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, className, emptyData, bodyClassName, cellClassName, headerClassName, rowClassName, tableClassName, onPageChange, onClick, onPageSizeChange, animate, stickyHeader, heightClassName, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 type DataTableSkeletonProps = {
     columnCount: number;

package/dist/index.js

@@ -7651,16 +7651,18 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 // src/components/table.tsx
 import * as React59 from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var Table = React59.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx39("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx39(
-    "table",
-    __spreadValues({
-      ref,
-      className: cn("w-full caption-bottom text-sm", className)
-    }, props)
-  ) });
-});
+var Table = React59.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, containerClassName } = _b, props = __objRest(_b, ["className", "containerClassName"]);
+    return /* @__PURE__ */ jsx39("div", { className: cn("relative w-full overflow-auto", containerClassName), children: /* @__PURE__ */ jsx39(
+      "table",
+      __spreadValues({
+        ref,
+        className: cn("w-full caption-bottom text-sm", className)
+      }, props)
+    ) });
+  }
+);
 Table.displayName = "Table";
 var TableHeader = React59.forwardRef((_a, ref) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -7713,7 +7715,7 @@ var TableHead = React59.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -7727,7 +7729,7 @@ var TableCell = React59.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       className: cn(
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
         className
       )
     }, props)
@@ -8180,11 +8182,9 @@ function Breadcrumbs({ items, className, classNameList }) {
 }
 
 // src/shared/data-table.tsx
-import React67, { useEffect as useEffect4 } from "react";
-import {
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon
-} from "@radix-ui/react-icons";
+import React67, { useEffect as useEffect4, useMemo as useMemo3 } from "react";
+import { AnimatePresence, motion as motion2 } from "framer-motion";
+import { DoubleArrowLeftIcon, DoubleArrowRightIcon } from "@radix-ui/react-icons";
 import {
   flexRender,
   getCoreRowModel,
@@ -8216,16 +8216,36 @@ function DataTable({
   tableClassName,
   onPageChange,
   onClick,
-  onPageSizeChange
+  onPageSizeChange,
+  animate = true,
+  stickyHeader = true,
+  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 table = useReactTable({
     data,
     columns,
-    pageCount,
+    pageCount: safePageCount,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     state: { pagination },
@@ -8234,147 +8254,190 @@ function DataTable({
     manualPagination: true,
     manualFiltering: true
   });
-  const onClickItem = (row) => {
-    if (onClick) {
-      onClick(row);
-    }
-  };
+  const clickable = !!onClick;
   useEffect4(() => {
-    if (onPageChange) {
-      onPageChange(pagination.pageIndex + 1);
-    }
-  }, [pagination, onPageChange]);
-  return /* @__PURE__ */ jsxs23("div", { className: cn("rounded-md border bg-background flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs23(ScrollArea, { className: "h-[calc(80vh-220px)] md:h-[calc(80dvh-80px)]", children: [
-      /* @__PURE__ */ jsxs23(Table, { className: cn("relative", tableClassName), children: [
-        /* @__PURE__ */ jsx48(TableHeader, { className: headerClassName, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx48(TableRow, { className: rowClassName, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx48(TableHead, { className: headerClassName, children: header.isPlaceholder ? null : flexRender(
-          header.column.columnDef.header,
-          header.getContext()
-        ) }, header.id)) }, headerGroup.id)) }),
-        /* @__PURE__ */ jsx48(TableBody, { className: bodyClassName, children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx48(
-          TableRow,
-          {
-            "data-state": row.getIsSelected() ? "selected" : void 0,
-            onClick: () => onClickItem(row.original),
-            className: rowClassName,
-            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-24 text-center",
-            children: "No results."
-          }
-        ) }) })
-      ] }),
-      /* @__PURE__ */ jsx48(ScrollBar, { orientation: "horizontal" })
-    ] }),
-    /* @__PURE__ */ jsxs23("div", { className: "border-t px-4 py-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
-        isRowsSelected && /* @__PURE__ */ jsxs23("div", { className: "text-muted-foreground text-sm", children: [
-          table.getFilteredSelectedRowModel().rows.length,
-          " ",
-          ofLabel,
-          " ",
-          table.getFilteredRowModel().rows.length,
-          " ",
-          rowsSelectedLabel
-        ] }),
-        totalRows ? /* @__PURE__ */ jsxs23("div", { className: "text-sm text-muted-foreground", children: [
-          "Total: ",
-          totalRows,
-          " registros"
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end", children: [
-        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx48("p", { className: "text-sm font-medium whitespace-nowrap", children: rowPerPageLabel }),
+    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]
+  );
+  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
+      ),
+      children: [
+        /* @__PURE__ */ jsx48("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs23(ScrollArea, { className: "h-full", children: [
           /* @__PURE__ */ jsxs23(
-            Select2,
+            Table,
             {
-              value: `${pagination.pageSize}`,
-              onValueChange: (value) => {
-                const newSize = Number(value);
-                setPagination(__spreadProps(__spreadValues({}, pagination), {
-                  pageSize: newSize,
-                  pageIndex: 0
-                }));
-                if (onPageSizeChange) onPageSizeChange(newSize);
-              },
+              containerClassName: "overflow-visible",
+              className: cn("w-full", tableClassName),
               children: [
-                /* @__PURE__ */ jsx48(SelectTrigger, { className: "h-8 w-[70px]", 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(
+                  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))
+                  }
+                ),
+                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(
+                  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: cn(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." }) }) })
               ]
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs23("div", { className: "flex w-[110px] items-center justify-center text-sm font-medium", children: [
-            pageLabel,
-            " ",
-            pagination.pageIndex + 1,
-            " ",
-            ofLabel,
-            " ",
-            pageCount
-          ] }),
-          /* @__PURE__ */ jsx48(
-            Button,
-            {
-              "aria-label": "Go to first page",
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), { pageIndex: 0 })),
-              disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ jsx48(DoubleArrowLeftIcon, { className: "h-4 w-4" })
-            }
           ),
-          /* @__PURE__ */ jsx48(
-            Button,
-            {
-              "aria-label": "Go to previous page",
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), {
-                pageIndex: pagination.pageIndex - 1
-              })),
-              disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ jsx48(ChevronLeftIcon2, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx48(
-            Button,
-            {
-              "aria-label": "Go to next page",
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), {
-                pageIndex: pagination.pageIndex + 1
-              })),
-              disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ jsx48(ChevronRightIcon6, { className: "h-4 w-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx48(
-            Button,
-            {
-              "aria-label": "Go to last page",
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: () => setPagination(__spreadProps(__spreadValues({}, pagination), { pageIndex: pageCount - 1 })),
-              disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ jsx48(DoubleArrowRightIcon, { className: "h-4 w-4" })
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
+          /* @__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: [
+              table.getFilteredSelectedRowModel().rows.length,
+              " ",
+              ofLabel,
+              " ",
+              table.getFilteredRowModel().rows.length,
+              " ",
+              rowsSelectedLabel
+            ] }),
+            typeof totalRows === "number" && /* @__PURE__ */ jsxs23("div", { className: "text-sm text-muted-foreground", 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: "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__ */ 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: [
+                pageLabel,
+                " ",
+                pagination.pageIndex + 1,
+                " ",
+                ofLabel,
+                " ",
+                safePageCount
+              ] }),
+              /* @__PURE__ */ jsx48(
+                Button,
+                {
+                  "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,
+                  children: /* @__PURE__ */ jsx48(DoubleArrowLeftIcon, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx48(
+                Button,
+                {
+                  "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" })
+                }
+              ),
+              /* @__PURE__ */ jsx48(
+                Button,
+                {
+                  "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" })
+                }
+              ),
+              /* @__PURE__ */ jsx48(
+                Button,
+                {
+                  "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,
+                  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: [
+              pageLabel,
+              " ",
+              pagination.pageIndex + 1,
+              " ",
+              ofLabel,
+              " ",
+              safePageCount
+            ] })
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
 }
 
 // src/shared/data-table-skeleton.tsx
@@ -8389,10 +8452,10 @@ function DataTableSkeleton({
   return /* @__PURE__ */ jsxs24("div", { className: "w-full space-y-3 overflow-auto", children: [
     /* @__PURE__ */ jsxs24("div", { className: "flex w-full items-center justify-between space-x-2 overflow-auto p-1", children: [
       /* @__PURE__ */ jsxs24("div", { className: "flex flex-1 items-center space-x-2 space-y-4", children: [
-        searchableColumnCount > 0 ? Array.from({ length: searchableColumnCount }).map((_, i) => /* @__PURE__ */ jsx49(Skeleton, { className: "h-10 w-[150px] lg:w-[250px]" }, i)) : null,
-        filterableColumnCount > 0 ? Array.from({ length: filterableColumnCount }).map((_, i) => /* @__PURE__ */ jsx49(Skeleton, { className: "h-10 w-[70px] border-dashed" }, i)) : null
+        searchableColumnCount > 0 ? Array.from({ length: searchableColumnCount }).map((_, i) => /* @__PURE__ */ jsx49(Skeleton, { className: "h-10 w-37.5 lg:w-62.5" }, i)) : null,
+        filterableColumnCount > 0 ? Array.from({ length: filterableColumnCount }).map((_, i) => /* @__PURE__ */ jsx49(Skeleton, { className: "h-10 w-17.5 border-dashed" }, i)) : null
       ] }),
-      showViewOptions ? /* @__PURE__ */ jsx49(Skeleton, { className: "ml-auto hidden h-7 w-[70px] lg:flex" }) : null
+      showViewOptions ? /* @__PURE__ */ jsx49(Skeleton, { className: "ml-auto hidden h-7 w-17.5 lg:flex" }) : null
     ] }),
     /* @__PURE__ */ jsx49("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs24(Table, { children: [
       /* @__PURE__ */ jsx49(TableHeader, { children: Array.from({ length: 1 }).map((_, i) => /* @__PURE__ */ jsx49(TableRow, { className: "hover:bg-transparent", children: Array.from({ length: columnCount }).map((_2, i2) => /* @__PURE__ */ jsx49(TableHead, { children: /* @__PURE__ */ jsx49(Skeleton, { className: "h-6 w-full" }) }, i2)) }, i)) }),
@@ -8403,9 +8466,9 @@ function DataTableSkeleton({
       /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8", children: [
         /* @__PURE__ */ jsxs24("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-24" }),
-          /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-[70px]" })
+          /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-17.5" })
         ] }),
-        /* @__PURE__ */ jsx49("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-20" }) }),
+        /* @__PURE__ */ jsx49("div", { className: "flex w-25 items-center justify-center text-sm font-medium", children: /* @__PURE__ */ jsx49(Skeleton, { className: "h-8 w-20" }) }),
         /* @__PURE__ */ jsxs24("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ jsx49(Skeleton, { className: "hidden size-8 lg:block" }),
           /* @__PURE__ */ jsx49(Skeleton, { className: "size-8" }),

package/dist/style.css

@@ -545,8 +545,8 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
+  .h-28 {
+    height: calc(var(--spacing) * 28);
   }
   .h-36 {
     height: calc(var(--spacing) * 36);
@@ -554,8 +554,8 @@
   .h-\[1px\] {
     height: 1px;
   }
-  .h-\[calc\(80vh-220px\)\] {
-    height: calc(80vh - 220px);
+  .h-\[clamp\(22rem\,80vh\,44rem\)\] {
+    height: clamp(22rem, 80vh, 44rem);
   }
   .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
     height: var(--radix-navigation-menu-viewport-height);
@@ -578,6 +578,9 @@
   .max-h-screen {
     max-height: 100vh;
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
@@ -611,15 +614,27 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-17\.5 {
+    width: calc(var(--spacing) * 17.5);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
+  .w-21 {
+    width: calc(var(--spacing) * 21);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-25 {
+    width: calc(var(--spacing) * 25);
+  }
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
+  .w-37\.5 {
+    width: calc(var(--spacing) * 37.5);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -632,18 +647,9 @@
   .w-\[1px\] {
     width: 1px;
   }
-  .w-\[70px\] {
-    width: 70px;
-  }
   .w-\[100px\] {
     width: 100px;
   }
-  .w-\[110px\] {
-    width: 110px;
-  }
-  .w-\[150px\] {
-    width: 150px;
-  }
   .w-full {
     width: 100%;
   }
@@ -670,6 +676,9 @@
   .min-w-32 {
     min-width: calc(var(--spacing) * 32);
   }
+  .min-w-35 {
+    min-width: calc(var(--spacing) * 35);
+  }
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -740,6 +749,9 @@
   .list-none {
     list-style-type: none;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -820,6 +832,10 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-3 {
+    -moz-column-gap: calc(var(--spacing) * 3);
+    column-gap: calc(var(--spacing) * 3);
+  }
   .space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -834,6 +850,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
   .self-center {
     align-self: center;
   }
@@ -843,6 +862,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-visible {
+    overflow: visible;
+  }
   .overflow-x-hidden {
     overflow-x: hidden;
   }
@@ -958,6 +980,24 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-background\/60 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 60%, transparent);
+    }
+  }
+  .bg-background\/70 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 70%, transparent);
+    }
+  }
+  .bg-background\/80 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 80%, transparent);
+    }
+  }
   .bg-black\/80 {
     background-color: color-mix(in srgb, #000 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1747,6 +1787,16 @@
       }
     }
   }
+  .hover\:bg-muted\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--muted) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-primary {
     &:hover {
       @media (hover: hover) {
@@ -2094,6 +2144,14 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
+  .active\:bg-muted\/80 {
+    &:active {
+      background-color: var(--muted);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--muted) 80%, transparent);
+      }
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -2629,6 +2687,22 @@
       transition-property: none;
     }
   }
+  .supports-backdrop-filter\:bg-background\/40 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: var(--background);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--background) 40%, transparent);
+      }
+    }
+  }
+  .supports-backdrop-filter\:bg-background\/50 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: var(--background);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--background) 50%, transparent);
+      }
+    }
+  }
   .supports-\[backdrop-filter\]\:bg-popover\/60 {
     @supports (backdrop-filter: var(--tw)) {
       background-color: var(--popover);
@@ -2637,6 +2711,11 @@
       }
     }
   }
+  .supports-\[height\:100dvh\]\:h-\[clamp\(22rem\,80dvh\,44rem\)\] {
+    @supports (height:100dvh) {
+      height: clamp(22rem, 80dvh, 44rem);
+    }
+  }
   .sm\:top-auto {
     @media (width >= 40rem) {
       top: auto;
@@ -2657,11 +2736,26 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .sm\:flex {
+    @media (width >= 40rem) {
+      display: flex;
+    }
+  }
+  .sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
   .sm\:max-w-sm {
     @media (width >= 40rem) {
       max-width: var(--container-sm);
     }
   }
+  .sm\:grid-cols-\[1fr_auto\] {
+    @media (width >= 40rem) {
+      grid-template-columns: 1fr auto;
+    }
+  }
   .sm\:flex-col {
     @media (width >= 40rem) {
       flex-direction: column;
@@ -2677,11 +2771,6 @@
       align-items: center;
     }
   }
-  .sm\:justify-between {
-    @media (width >= 40rem) {
-      justify-content: space-between;
-    }
-  }
   .sm\:justify-end {
     @media (width >= 40rem) {
       justify-content: flex-end;
@@ -2757,11 +2846,6 @@
       position: absolute;
     }
   }
-  .md\:h-\[calc\(80dvh-80px\)\] {
-    @media (width >= 48rem) {
-      height: calc(80dvh - 80px);
-    }
-  }
   .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
     @media (width >= 48rem) {
       width: var(--radix-navigation-menu-viewport-width);
@@ -2792,9 +2876,9 @@
       display: flex;
     }
   }
-  .lg\:w-\[250px\] {
+  .lg\:w-62\.5 {
     @media (width >= 64rem) {
-      width: 250px;
+      width: calc(var(--spacing) * 62.5);
     }
   }
   .lg\:gap-8 {
@@ -2960,10 +3044,12 @@
       padding-right: calc(var(--spacing) * 0);
     }
   }
-  .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] {
-    & > [role=checkbox] {
-      --tw-translate-y: 2px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+  .\*\:\[\[role\=checkbox\]\]\:translate-y-0\.5 {
+    :is(& > *) {
+      &:is([role=checkbox]) {
+        --tw-translate-y: calc(var(--spacing) * 0.5);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
     }
   }
   .\[\&\>span\]\:line-clamp-1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -46,8 +46,8 @@
     "test:watch": "jest --watch"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/core": "^7.28.6",
+    "@babel/preset-env": "^7.28.6",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@eslint/config-array": "^0.23.0",
@@ -57,14 +57,14 @@
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.0.6",
-    "@types/react": "^19.2.8",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.52.0",
-    "@typescript-eslint/parser": "^8.52.0",
+    "@typescript-eslint/eslint-plugin": "^8.53.1",
+    "@typescript-eslint/parser": "^8.53.1",
     "autoprefixer": "^10.4.23",
     "babel-jest": "^30.2.0",
     "cross-env": "^10.1.0",
@@ -132,14 +132,14 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.25.0",
+    "framer-motion": "^12.27.5",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
     "react-dropzone": "^14.3.8",
     "react-helmet-next": "^0.0.2",
-    "react-hook-form": "^7.70.0",
-    "react-resizable-panels": "^4.3.3",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^4.4.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",