@iclips/ui 1.0.1 → 1.0.3

package/dist/index.cjs

@@ -5640,56 +5640,72 @@ function Switch({
     }
   );
 }
-function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "table-container",
-      className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "table",
-        {
-          "data-slot": "table",
-          className: cn("w-full caption-bottom text-sm", className),
-          ...props
-        }
-      )
-    }
-  );
-}
-function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "thead",
-    {
-      "data-slot": "table-header",
-      className: cn("[&_tr]:border-b", className),
-      ...props
-    }
-  );
-}
-function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tbody",
-    {
-      "data-slot": "table-body",
-      className: cn("[&_tr:last-child]:border-0", className),
-      ...props
-    }
-  );
-}
-function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tfoot",
-    {
-      "data-slot": "table-footer",
-      className: cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
+var Table = React7__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "table-container",
+        className: "relative w-full overflow-x-auto",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            ref,
+            "data-slot": "table",
+            className: cn("w-full caption-bottom text-sm", className),
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+Table.displayName = "Table";
+var TableHeader = React7__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "thead",
+      {
+        ref,
+        "data-slot": "table-header",
+        className: cn("[&_tr]:border-b", className),
+        ...props
+      }
+    );
+  }
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React7__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tbody",
+      {
+        ref,
+        "data-slot": "table-body",
+        className: cn("[&_tr:last-child]:border-0", className),
+        ...props
+      }
+    );
+  }
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React7__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tfoot",
+      {
+        ref,
+        "data-slot": "table-footer",
+        className: cn(
+          "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableFooter.displayName = "TableFooter";
 var TableRow = React7__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
@@ -5705,44 +5721,261 @@ var TableRow = React7__namespace.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableRow.displayName = "TableRow";
-function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "th",
-    {
-      "data-slot": "table-head",
-      className: cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      ),
-      ...props
-    }
-  );
+var TableHead = React7__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        ref,
+        "data-slot": "table-head",
+        className: cn(
+          "text-foreground h-10 px-2 text-left align-middle font-medium",
+          "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+var TableCell = React7__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        ref,
+        "data-slot": "table-cell",
+        className: cn(
+          "p-2 align-middle",
+          "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React7__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "caption",
+      {
+        ref,
+        "data-slot": "table-caption",
+        className: cn("text-muted-foreground mt-4 text-sm", className),
+        ...props
+      }
+    );
+  }
+);
+TableCaption.displayName = "TableCaption";
+var defaultLabels = {
+  previous: "Anterior",
+  next: "Pr\xF3xima",
+  first: "Primeira",
+  last: "\xDAltima",
+  showing: "Mostrando",
+  of: "de",
+  results: "resultados",
+  itemsPerPage: "Itens por p\xE1gina",
+  page: "P\xE1gina"
+};
+var defaultPageSizeOptions = [10, 20, 30, 50, 100];
+function getPageNumbers(currentPage, totalPages, maxVisible = 5) {
+  if (totalPages <= maxVisible) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const pages = [];
+  const halfVisible = Math.floor(maxVisible / 2);
+  pages.push(1);
+  let start = Math.max(2, currentPage - halfVisible);
+  let end = Math.min(totalPages - 1, currentPage + halfVisible);
+  if (currentPage <= halfVisible + 1) {
+    end = maxVisible - 1;
+  } else if (currentPage >= totalPages - halfVisible) {
+    start = totalPages - maxVisible + 2;
+  }
+  if (start > 2) {
+    pages.push("ellipsis");
+  }
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  if (end < totalPages - 1) {
+    pages.push("ellipsis");
+  }
+  if (totalPages > 1) {
+    pages.push(totalPages);
+  }
+  return pages;
 }
-function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "td",
+function TablePagination({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  pageSizeOptions = defaultPageSizeOptions,
+  maxVisiblePages = 5,
+  showInfo = true,
+  showPageNumbers = true,
+  showPageSizeSelector = true,
+  showFirstLastButtons = true,
+  labels: customLabels,
+  className
+}) {
+  const labels = { ...defaultLabels, ...customLabels };
+  const pages = getPageNumbers(currentPage, totalPages, maxVisiblePages);
+  const startItem = (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+  const hasPreviousPage = currentPage > 1;
+  const hasNextPage = currentPage < totalPages;
+  if (totalPages === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      "data-slot": "table-cell",
       className: cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
         className
       ),
-      ...props
+      role: "navigation",
+      "aria-label": "Pagina\xE7\xE3o da tabela",
+      children: [
+        showInfo && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground order-2 sm:order-1", children: [
+          labels.showing,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: startItem }),
+          " - ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: endItem }),
+          " ",
+          labels.of,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: totalItems }),
+          " ",
+          labels.results
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4 order-1 sm:order-2", children: [
+          showPageSizeSelector && onPageSizeChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: labels.itemsPerPage }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Select,
+              {
+                value: String(pageSize),
+                onValueChange: (value) => onPageSizeChange(Number(value)),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: pageSize }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: String(option), children: option }, option)) })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground sm:hidden", children: [
+            labels.page,
+            " ",
+            currentPage,
+            " ",
+            labels.of,
+            " ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            showFirstLastButtons && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: () => onPageChange(1),
+                disabled: !hasPreviousPage,
+                "aria-label": labels.first,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: () => onPageChange(currentPage - 1),
+                disabled: !hasPreviousPage,
+                "aria-label": labels.previous,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+              }
+            ),
+            showPageNumbers && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:flex items-center gap-1", children: pages.map(
+              (page, index) => page === "ellipsis" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "flex items-center justify-center w-8 h-8 text-muted-foreground",
+                  "aria-hidden": true,
+                  children: "..."
+                },
+                `ellipsis-${index}`
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: currentPage === page ? "default" : "outline",
+                  size: "icon",
+                  className: "h-8 w-8",
+                  onClick: () => onPageChange(page),
+                  "aria-label": `${labels.page} ${page}`,
+                  "aria-current": currentPage === page ? "page" : void 0,
+                  children: page
+                },
+                page
+              )
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: () => onPageChange(currentPage + 1),
+                disabled: !hasNextPage,
+                "aria-label": labels.next,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+              }
+            ),
+            showFirstLastButtons && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                className: "h-8 w-8",
+                onClick: () => onPageChange(totalPages),
+                disabled: !hasNextPage,
+                "aria-label": labels.last,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ] })
+      ]
     }
   );
 }
-function TableCaption({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "caption",
-    {
-      "data-slot": "table-caption",
-      className: cn("text-muted-foreground mt-4 text-sm", className),
-      ...props
-    }
-  );
+TablePagination.displayName = "TablePagination";
+
+// components/ui/table-types.ts
+function calculatePaginationMetadata(config) {
+  const { currentPage, pageSize, totalItems } = config;
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = Math.min(startIndex + pageSize, totalItems);
+  return {
+    totalPages,
+    startIndex,
+    endIndex,
+    hasNextPage: currentPage < totalPages,
+    hasPreviousPage: currentPage > 1
+  };
 }
 function Tabs({
   className,
@@ -6541,6 +6774,7 @@ exports.TableCell = TableCell;
 exports.TableFooter = TableFooter;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
+exports.TablePagination = TablePagination;
 exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
@@ -6561,8 +6795,10 @@ exports.UnderlineTabsList = UnderlineTabsList;
 exports.UnderlineTabsTrigger = UnderlineTabsTrigger;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
+exports.calculatePaginationMetadata = calculatePaginationMetadata;
 exports.cn = cn;
 exports.dadosContratoExemplo = dadosContratoExemplo;
+exports.getPageNumbers = getPageNumbers;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
 exports.toggleVariants = toggleVariants;
 exports.useFormField = useFormField;