@algorithm-shift/design-system 1.2.47 → 1.2.49

package/dist/index.mjs

@@ -2130,7 +2130,8 @@ var CustomPagination = ({
   totalPages,
   currentPage,
   onPageChange,
-  maxVisiblePages = 5
+  maxVisiblePages = 5,
+  perPage
 }) => {
   const getPageNumbers = () => {
     const pages = [];
@@ -2163,35 +2164,61 @@ var CustomPagination = ({
   };
   const handlePageChange = (page) => {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
-      onPageChange(page);
+      onPageChange({
+        page,
+        itemsPerPage: perPage
+      });
     }
   };
   const pageNumbers = getPageNumbers();
-  return /* @__PURE__ */ jsx43(Pagination, { children: /* @__PURE__ */ jsxs26(PaginationContent, { children: [
-    /* @__PURE__ */ jsx43(PaginationItem, { children: /* @__PURE__ */ jsx43(
-      PaginationPrevious,
-      {
-        onClick: () => handlePageChange(currentPage - 1),
-        className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
-      }
-    ) }),
-    pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx43(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ jsx43(PaginationEllipsis, {}) : /* @__PURE__ */ jsx43(
-      PaginationLink,
-      {
-        onClick: () => handlePageChange(pageNumber),
-        isActive: currentPage === pageNumber,
-        className: "cursor-pointer",
-        children: pageNumber
-      }
-    ) }, index)),
-    /* @__PURE__ */ jsx43(PaginationItem, { children: /* @__PURE__ */ jsx43(
-      PaginationNext,
-      {
-        onClick: () => handlePageChange(currentPage + 1),
-        className: currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"
-      }
-    ) })
-  ] }) });
+  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-row gap-1 w-full items-center justify-between", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx43("p", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Items per page:" }),
+      /* @__PURE__ */ jsxs26(
+        Select,
+        {
+          defaultValue: String(perPage),
+          onValueChange: (value) => {
+            onPageChange({ page: 1, itemsPerPage: Number(value) });
+          },
+          children: [
+            /* @__PURE__ */ jsx43(SelectTrigger, { className: "w-[100px]", children: /* @__PURE__ */ jsx43(SelectValue, { placeholder: "Select" }) }),
+            /* @__PURE__ */ jsxs26(SelectContent, { children: [
+              /* @__PURE__ */ jsx43(SelectItem, { value: "5", children: "5" }),
+              /* @__PURE__ */ jsx43(SelectItem, { value: "10", children: "10" }),
+              /* @__PURE__ */ jsx43(SelectItem, { value: "20", children: "20" }),
+              /* @__PURE__ */ jsx43(SelectItem, { value: "50", children: "50" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx43(Pagination, { className: "flex-end", children: /* @__PURE__ */ jsxs26(PaginationContent, { children: [
+      /* @__PURE__ */ jsx43(PaginationItem, { children: /* @__PURE__ */ jsx43(
+        PaginationPrevious,
+        {
+          onClick: () => handlePageChange(currentPage - 1),
+          className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
+        }
+      ) }),
+      pageNumbers.map((pageNumber, index) => /* @__PURE__ */ jsx43(PaginationItem, { children: pageNumber === "..." ? /* @__PURE__ */ jsx43(PaginationEllipsis, {}) : /* @__PURE__ */ jsx43(
+        PaginationLink,
+        {
+          onClick: () => handlePageChange(pageNumber),
+          isActive: currentPage === pageNumber,
+          className: "cursor-pointer",
+          children: pageNumber
+        }
+      ) }, index)),
+      /* @__PURE__ */ jsx43(PaginationItem, { children: /* @__PURE__ */ jsx43(
+        PaginationNext,
+        {
+          onClick: () => handlePageChange(currentPage + 1),
+          className: currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"
+        }
+      ) })
+    ] }) })
+  ] });
 };
 var Pagination_default = CustomPagination;
 
@@ -2212,6 +2239,7 @@ var Table2 = ({
   totalRecords = 0,
   ...props
 }) => {
+  const [perPage, setPerPage] = useState3(itemsPerPage);
   const rawColumns = Array.isArray(columns) ? columns : [];
   const rawData = Array.isArray(data) ? data : [];
   const rawRowActions = Array.isArray(rowActions) ? rowActions : [];
@@ -2222,19 +2250,19 @@ var Table2 = ({
     if (isControlled) return;
     if (currentPage > 1 && !pagination) setInternalPage(1);
   }, [pagination, isControlled]);
-  const enablePagination = pagination && (paginationMode === "server" ? totalRecords > itemsPerPage : rawData.length > itemsPerPage);
-  const handlePageChange = (next) => {
-    if (!isControlled) setInternalPage(next);
-    onPageChange?.(next);
+  const enablePagination = pagination && (paginationMode === "server" ? totalRecords > perPage : rawData.length > perPage);
+  const handlePageChange = ({ page: page2, itemsPerPage: itemsPerPage2 }) => {
+    if (!isControlled) setInternalPage(page2);
+    onPageChange?.({ page: page2, itemsPerPage: itemsPerPage2 });
   };
   const paginatedData = !enablePagination ? rawData : paginationMode === "server" ? rawData : rawData.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
+    (currentPage - 1) * perPage,
+    currentPage * perPage
   );
   const totalPages = enablePagination ? Math.max(
     1,
     Math.ceil(
-      (paginationMode === "server" ? totalRecords : rawData.length) / itemsPerPage
+      (paginationMode === "server" ? totalRecords : rawData.length) / perPage
     )
   ) : 1;
   return /* @__PURE__ */ jsxs27("div", { className: `${className || ""} space-y-3`, style, children: [
@@ -2251,6 +2279,7 @@ var Table2 = ({
     enablePagination && /* @__PURE__ */ jsx44(
       Pagination_default,
       {
+        perPage,
         totalPages,
         currentPage,
         onPageChange: handlePageChange