jett.admin.npmpackage 1.0.62 → 1.0.65

package/dist/index.css

@@ -276,9 +276,6 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-4 {
-    top: calc(var(--spacing) * 4);
-  }
   .top-full {
     top: 100%;
   }
@@ -291,9 +288,6 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
   .z-10 {
     z-index: 10;
   }
@@ -360,6 +354,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -399,12 +396,18 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-\[50px\] {
     width: 50px;
   }
@@ -414,6 +417,9 @@
   .w-full {
     width: 100%;
   }
+  .min-w-9 {
+    min-width: calc(var(--spacing) * 9);
+  }
   .min-w-\[100\%\] {
     min-width: 100%;
   }
@@ -423,9 +429,6 @@
   .shrink-0 {
     flex-shrink: 0;
   }
-  .table-fixed {
-    table-layout: fixed;
-  }
   .caption-bottom {
     caption-side: bottom;
   }
@@ -494,6 +497,9 @@
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -577,6 +583,9 @@
   .border-gray-400 {
     border-color: var(--color-gray-400);
   }
+  .border-primary {
+    border-color: var(--color-primary);
+  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -670,6 +679,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-20 {
+    padding-top: calc(var(--spacing) * 20);
+  }
   .text-center {
     text-align: center;
   }
@@ -997,6 +1009,11 @@
       position: relative;
     }
   }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
   .md\:hidden {
     @media (width >= 48rem) {
       display: none;
@@ -1013,6 +1030,11 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .md\:pt-4 {
+    @media (width >= 48rem) {
+      padding-top: calc(var(--spacing) * 4);
+    }
+  }
   .md\:max-lg\:w-\[280px\] {
     @media (width >= 48rem) {
       @media (width < 64rem) {
@@ -1050,6 +1072,11 @@
       background-color: var(--color-green-900);
     }
   }
+  .dark\:bg-primary {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-primary);
+    }
+  }
   .dark\:bg-red-900 {
     &:where(.dark, .dark *) {
       background-color: var(--color-red-900);
@@ -1070,6 +1097,11 @@
       color: #f4f4f5cc;
     }
   }
+  .dark\:text-gray-600 {
+    &:where(.dark, .dark *) {
+      color: var(--color-gray-600);
+    }
+  }
   .dark\:text-green-100 {
     &:where(.dark, .dark *) {
       color: var(--color-green-100);

package/dist/index.js

@@ -41,6 +41,7 @@ __export(index_exports, {
   CustomTable: () => CustomTable,
   CustomTextarea: () => CustomTextarea,
   CustomUpload: () => CustomUpload,
+  Pagination: () => Pagination,
   ProgressBar: () => ProgressBar,
   RightSheet: () => RightSheet
 });
@@ -777,26 +778,35 @@ var AppSideBar = ({
   const closeMobileMenu = () => {
     setIsMobileMenuOpen(false);
   };
-  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "fixed top-0 left-0 w-full z-50 md:hidden bg-white dark:bg-[#18181b] border-b border-gray-200 dark:border-[#303036] shadow-lg px-4 py-3 flex items-center justify-between" }, /* @__PURE__ */ import_react12.default.createElement(
     "button",
     {
       onClick: toggleMobileMenu,
-      className: "fixed top-0 left-0 w-full z-50 md:hidden p-2 bg-white dark:bg-[#18181b] border-b border-gray-200 dark:border-[#303036] shadow-lg hover:bg-gray-50 dark:hover:bg-[#27272a] transition-colors",
+      className: "p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-[#27272a] transition-colors",
       "aria-label": "Toggle menu"
     },
     isMobileMenuOpen ? /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.X, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" }) : /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.Menu, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" })
-  ), isMobileMenuOpen && /* @__PURE__ */ import_react12.default.createElement(
+  ), /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex-1 flex justify-center" }, /* @__PURE__ */ import_react12.default.createElement(
+    "img",
+    {
+      src: sideBarLogoLocal,
+      alt: "sidebarLogo",
+      width: 108,
+      height: 40,
+      className: "object-contain"
+    }
+  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "w-10" })), isMobileMenuOpen && /* @__PURE__ */ import_react12.default.createElement(
     "div",
     {
-      className: "fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden",
+      className: "fixed inset-0 bg-black/80 bg-opacity-50 z-40 md:hidden",
       onClick: closeMobileMenu
     }
   ), /* @__PURE__ */ import_react12.default.createElement(
     "div",
     {
-      className: `fixed top-0 left-0 md:relative w-[320px] transition-all ease-in-out delay-100 bg-white dark:bg-[#18181b] border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 h-full max-h-[100vh] z-40 md:max-lg:w-[280px] ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`
+      className: `fixed top-0 left-0 md:relative w-[320px] transition-all ease-in-out delay-100 bg-white dark:bg-[#18181b] border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 pt-20 md:pt-4 h-full max-h-[100vh] z-40 md:max-lg:w-[280px] ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`
     },
-    /* @__PURE__ */ import_react12.default.createElement("div", { className: "p-2 mb-2" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center justify-center w-full h-[60px] mb-2" }, /* @__PURE__ */ import_react12.default.createElement(
+    /* @__PURE__ */ import_react12.default.createElement("div", { className: "p-2 mb-2 hidden md:block" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center justify-center w-full h-[60px] mb-2" }, /* @__PURE__ */ import_react12.default.createElement(
       "img",
       {
         src: sideBarLogoLocal,
@@ -964,7 +974,7 @@ var CustomTable = ({
   children,
   isHideCheckbox = "false"
 }) => {
-  return /* @__PURE__ */ import_react14.default.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "w-full relative overflow-x-auto" }, /* @__PURE__ */ import_react14.default.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-[#18181b] table-fixed border-collapse" }, /* @__PURE__ */ import_react14.default.createElement("thead", { className: "border-b border-[#e5e5e5] dark:bg-[#18181b]" }, /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto flex flex-col" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "w-full relative overflow-x-auto flex-1" }, /* @__PURE__ */ import_react14.default.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-[#18181b]  border-collapse" }, /* @__PURE__ */ import_react14.default.createElement("thead", { className: "border-b border-[#e5e5e5] dark:bg-[#18181b]" }, /* @__PURE__ */ import_react14.default.createElement(
     "tr",
     {
       className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n                                data-[state=selected]:bg-muted"
@@ -990,6 +1000,147 @@ var CustomTable = ({
     })
   )), /* @__PURE__ */ import_react14.default.createElement("tbody", null, children))));
 };
+
+// src/Pagination/Pagination.jsx
+var import_react15 = __toESM(require("react"));
+var import_lucide_react7 = require("lucide-react");
+var Pagination = ({
+  data = [],
+  children,
+  component: Component,
+  itemsPerPage = 10,
+  itemsPerPageOptions = [5, 10, 20, 50, 100],
+  // Controlled props (optional)
+  currentPage: controlledCurrentPage,
+  onPageChange: controlledOnPageChange,
+  onItemsPerPageChange: controlledOnItemsPerPageChange,
+  // Legacy props for backward compatibility
+  totalPages,
+  totalItems: legacyTotalItems,
+  onPageChange: legacyOnPageChange,
+  onItemsPerPageChange: legacyOnItemsPerPageChange
+}) => {
+  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react15.useState)(1);
+  const [internalItemsPerPage, setInternalItemsPerPage] = (0, import_react15.useState)(itemsPerPage);
+  const isControlled = controlledCurrentPage !== void 0;
+  const isItemsPerPageControlled = controlledOnItemsPerPageChange !== void 0;
+  const currentPage = isControlled ? controlledCurrentPage : internalCurrentPage;
+  const activeItemsPerPage = isItemsPerPageControlled ? itemsPerPage : internalItemsPerPage;
+  const totalItems = legacyTotalItems !== void 0 ? legacyTotalItems : data.length;
+  const calculatedTotalPages = (0, import_react15.useMemo)(() => {
+    if (totalItems > 0 && activeItemsPerPage > 0) {
+      return Math.ceil(totalItems / activeItemsPerPage);
+    }
+    return 1;
+  }, [totalItems, activeItemsPerPage]);
+  const paginatedData = (0, import_react15.useMemo)(() => {
+    if (!data || data.length === 0) return [];
+    const startIndex = (currentPage - 1) * activeItemsPerPage;
+    const endIndex = startIndex + activeItemsPerPage;
+    return data.slice(startIndex, endIndex);
+  }, [data, currentPage, activeItemsPerPage]);
+  (0, import_react15.useEffect)(() => {
+    if (!isControlled && currentPage > calculatedTotalPages && calculatedTotalPages > 0) {
+      setInternalCurrentPage(1);
+    }
+  }, [calculatedTotalPages, isControlled, currentPage]);
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisible = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    let endPage = Math.min(calculatedTotalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) {
+      startPage = Math.max(1, endPage - maxVisible + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+  const handlePageChange = (page) => {
+    if (page >= 1 && page <= calculatedTotalPages) {
+      if (isControlled && controlledOnPageChange) {
+        controlledOnPageChange(page);
+      } else if (legacyOnPageChange) {
+        legacyOnPageChange(page);
+      } else {
+        setInternalCurrentPage(page);
+      }
+    }
+  };
+  const handleItemsPerPageChange = (value) => {
+    const newItemsPerPage = Number(value);
+    if (isControlled && controlledOnItemsPerPageChange) {
+      controlledOnItemsPerPageChange(newItemsPerPage);
+      if (controlledOnPageChange) {
+        controlledOnPageChange(1);
+      }
+    } else if (legacyOnItemsPerPageChange) {
+      legacyOnItemsPerPageChange(newItemsPerPage);
+      if (legacyOnPageChange) {
+        legacyOnPageChange(1);
+      }
+    } else {
+      setInternalItemsPerPage(newItemsPerPage);
+      setInternalCurrentPage(1);
+    }
+  };
+  const startItem = totalItems !== void 0 ? (currentPage - 1) * activeItemsPerPage + 1 : null;
+  const endItem = totalItems !== void 0 ? Math.min(currentPage * activeItemsPerPage, totalItems) : null;
+  const renderContent = () => {
+    if (Component) {
+      return paginatedData.map((item) => {
+        return /* @__PURE__ */ import_react15.default.createElement(Component, { key: item.id, data: item });
+      });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, renderContent()), /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10" }, totalItems !== void 0 && /* @__PURE__ */ import_react15.default.createElement("div", { className: "text-sm text-[#737373] dark:text-white" }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ import_react15.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react15.default.createElement(
+    "button",
+    {
+      onClick: () => handlePageChange(1),
+      disabled: currentPage === 1,
+      className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      title: "First page"
+    },
+    /* @__PURE__ */ import_react15.default.createElement(import_lucide_react7.ChevronsLeft, { size: 16 })
+  ), /* @__PURE__ */ import_react15.default.createElement(
+    "button",
+    {
+      onClick: () => handlePageChange(currentPage - 1),
+      disabled: currentPage === 1,
+      className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      title: "Previous page"
+    },
+    /* @__PURE__ */ import_react15.default.createElement(import_lucide_react7.ChevronLeft, { size: 16 })
+  ), getPageNumbers().map((pageNum) => /* @__PURE__ */ import_react15.default.createElement(
+    "button",
+    {
+      key: pageNum,
+      onClick: () => handlePageChange(pageNum),
+      className: `flex items-center justify-center min-w-9 h-9 px-3 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === pageNum ? "bg-primary text-white border-primary dark:bg-primary" : "bg-white text-black hover:bg-gray-50 dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`
+    },
+    pageNum
+  )), /* @__PURE__ */ import_react15.default.createElement(
+    "button",
+    {
+      onClick: () => handlePageChange(currentPage + 1),
+      disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
+      className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      title: "Next page"
+    },
+    /* @__PURE__ */ import_react15.default.createElement(import_lucide_react7.ChevronRight, { size: 16 })
+  ), /* @__PURE__ */ import_react15.default.createElement(
+    "button",
+    {
+      onClick: () => handlePageChange(calculatedTotalPages),
+      disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
+      className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      title: "Last page"
+    },
+    /* @__PURE__ */ import_react15.default.createElement(import_lucide_react7.ChevronsRight, { size: 16 })
+  ))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppSideBar,
@@ -1004,6 +1155,7 @@ var CustomTable = ({
   CustomTable,
   CustomTextarea,
   CustomUpload,
+  Pagination,
   ProgressBar,
   RightSheet
 });

package/dist/index.mjs

@@ -743,26 +743,35 @@ var AppSideBar = ({
   const closeMobileMenu = () => {
     setIsMobileMenuOpen(false);
   };
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { className: "fixed top-0 left-0 w-full z-50 md:hidden bg-white dark:bg-[#18181b] border-b border-gray-200 dark:border-[#303036] shadow-lg px-4 py-3 flex items-center justify-between" }, /* @__PURE__ */ React12.createElement(
     "button",
     {
       onClick: toggleMobileMenu,
-      className: "fixed top-0 left-0 w-full z-50 md:hidden p-2 bg-white dark:bg-[#18181b] border-b border-gray-200 dark:border-[#303036] shadow-lg hover:bg-gray-50 dark:hover:bg-[#27272a] transition-colors",
+      className: "p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-[#27272a] transition-colors",
       "aria-label": "Toggle menu"
     },
     isMobileMenuOpen ? /* @__PURE__ */ React12.createElement(X, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" }) : /* @__PURE__ */ React12.createElement(Menu, { className: "w-6 h-6 text-gray-700 dark:text-[#f4f4f5cc]" })
-  ), isMobileMenuOpen && /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React12.createElement("div", { className: "flex-1 flex justify-center" }, /* @__PURE__ */ React12.createElement(
+    "img",
+    {
+      src: sideBarLogoLocal,
+      alt: "sidebarLogo",
+      width: 108,
+      height: 40,
+      className: "object-contain"
+    }
+  )), /* @__PURE__ */ React12.createElement("div", { className: "w-10" })), isMobileMenuOpen && /* @__PURE__ */ React12.createElement(
     "div",
     {
-      className: "fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden",
+      className: "fixed inset-0 bg-black/80 bg-opacity-50 z-40 md:hidden",
       onClick: closeMobileMenu
     }
   ), /* @__PURE__ */ React12.createElement(
     "div",
     {
-      className: `fixed top-0 left-0 md:relative w-[320px] transition-all ease-in-out delay-100 bg-white dark:bg-[#18181b] border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 h-full max-h-[100vh] z-40 md:max-lg:w-[280px] ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`
+      className: `fixed top-0 left-0 md:relative w-[320px] transition-all ease-in-out delay-100 bg-white dark:bg-[#18181b] border-r border-gray-200 dark:border-[#303036] flex flex-col p-4 pt-20 md:pt-4 h-full max-h-[100vh] z-40 md:max-lg:w-[280px] ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`
     },
-    /* @__PURE__ */ React12.createElement("div", { className: "p-2 mb-2" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-center w-full h-[60px] mb-2" }, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React12.createElement("div", { className: "p-2 mb-2 hidden md:block" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-center w-full h-[60px] mb-2" }, /* @__PURE__ */ React12.createElement(
       "img",
       {
         src: sideBarLogoLocal,
@@ -930,7 +939,7 @@ var CustomTable = ({
   children,
   isHideCheckbox = "false"
 }) => {
-  return /* @__PURE__ */ React14.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto" }, /* @__PURE__ */ React14.createElement("div", { className: "w-full relative overflow-x-auto" }, /* @__PURE__ */ React14.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-[#18181b] table-fixed border-collapse" }, /* @__PURE__ */ React14.createElement("thead", { className: "border-b border-[#e5e5e5] dark:bg-[#18181b]" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement("div", { className: "border border-[#e5e5e5] dark:border-[#303036] rounded-lg overflow-x-auto flex flex-col" }, /* @__PURE__ */ React14.createElement("div", { className: "w-full relative overflow-x-auto flex-1" }, /* @__PURE__ */ React14.createElement("table", { className: "w-full caption-bottom text-sm overflow-x-auto bg-white dark:bg-[#18181b]  border-collapse" }, /* @__PURE__ */ React14.createElement("thead", { className: "border-b border-[#e5e5e5] dark:bg-[#18181b]" }, /* @__PURE__ */ React14.createElement(
     "tr",
     {
       className: "transition-colors text-[#737373] hover:bg-muted/50 \r\n                                data-[state=selected]:bg-muted"
@@ -956,6 +965,147 @@ var CustomTable = ({
     })
   )), /* @__PURE__ */ React14.createElement("tbody", null, children))));
 };
+
+// src/Pagination/Pagination.jsx
+import React15, { useMemo, useState as useState5, useEffect as useEffect3 } from "react";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+var Pagination = ({
+  data = [],
+  children,
+  component: Component,
+  itemsPerPage = 10,
+  itemsPerPageOptions = [5, 10, 20, 50, 100],
+  // Controlled props (optional)
+  currentPage: controlledCurrentPage,
+  onPageChange: controlledOnPageChange,
+  onItemsPerPageChange: controlledOnItemsPerPageChange,
+  // Legacy props for backward compatibility
+  totalPages,
+  totalItems: legacyTotalItems,
+  onPageChange: legacyOnPageChange,
+  onItemsPerPageChange: legacyOnItemsPerPageChange
+}) => {
+  const [internalCurrentPage, setInternalCurrentPage] = useState5(1);
+  const [internalItemsPerPage, setInternalItemsPerPage] = useState5(itemsPerPage);
+  const isControlled = controlledCurrentPage !== void 0;
+  const isItemsPerPageControlled = controlledOnItemsPerPageChange !== void 0;
+  const currentPage = isControlled ? controlledCurrentPage : internalCurrentPage;
+  const activeItemsPerPage = isItemsPerPageControlled ? itemsPerPage : internalItemsPerPage;
+  const totalItems = legacyTotalItems !== void 0 ? legacyTotalItems : data.length;
+  const calculatedTotalPages = useMemo(() => {
+    if (totalItems > 0 && activeItemsPerPage > 0) {
+      return Math.ceil(totalItems / activeItemsPerPage);
+    }
+    return 1;
+  }, [totalItems, activeItemsPerPage]);
+  const paginatedData = useMemo(() => {
+    if (!data || data.length === 0) return [];
+    const startIndex = (currentPage - 1) * activeItemsPerPage;
+    const endIndex = startIndex + activeItemsPerPage;
+    return data.slice(startIndex, endIndex);
+  }, [data, currentPage, activeItemsPerPage]);
+  useEffect3(() => {
+    if (!isControlled && currentPage > calculatedTotalPages && calculatedTotalPages > 0) {
+      setInternalCurrentPage(1);
+    }
+  }, [calculatedTotalPages, isControlled, currentPage]);
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisible = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    let endPage = Math.min(calculatedTotalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) {
+      startPage = Math.max(1, endPage - maxVisible + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+  const handlePageChange = (page) => {
+    if (page >= 1 && page <= calculatedTotalPages) {
+      if (isControlled && controlledOnPageChange) {
+        controlledOnPageChange(page);
+      } else if (legacyOnPageChange) {
+        legacyOnPageChange(page);
+      } else {
+        setInternalCurrentPage(page);
+      }
+    }
+  };
+  const handleItemsPerPageChange = (value) => {
+    const newItemsPerPage = Number(value);
+    if (isControlled && controlledOnItemsPerPageChange) {
+      controlledOnItemsPerPageChange(newItemsPerPage);
+      if (controlledOnPageChange) {
+        controlledOnPageChange(1);
+      }
+    } else if (legacyOnItemsPerPageChange) {
+      legacyOnItemsPerPageChange(newItemsPerPage);
+      if (legacyOnPageChange) {
+        legacyOnPageChange(1);
+      }
+    } else {
+      setInternalItemsPerPage(newItemsPerPage);
+      setInternalCurrentPage(1);
+    }
+  };
+  const startItem = totalItems !== void 0 ? (currentPage - 1) * activeItemsPerPage + 1 : null;
+  const endItem = totalItems !== void 0 ? Math.min(currentPage * activeItemsPerPage, totalItems) : null;
+  const renderContent = () => {
+    if (Component) {
+      return paginatedData.map((item) => {
+        return /* @__PURE__ */ React15.createElement(Component, { key: item.id, data: item });
+      });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(React15.Fragment, null, renderContent()), /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10" }, totalItems !== void 0 && /* @__PURE__ */ React15.createElement("div", { className: "text-sm text-[#737373] dark:text-white" }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
+    "button",
+    {
+      onClick: () => handlePageChange(1),
+      disabled: currentPage === 1,
+      className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      title: "First page"
+    },
+    /* @__PURE__ */ React15.createElement(ChevronsLeft, { size: 16 })
+  ), /* @__PURE__ */ React15.createElement(
+    "button",
+    {
+      onClick: () => handlePageChange(currentPage - 1),
+      disabled: currentPage === 1,
+      className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      title: "Previous page"
+    },
+    /* @__PURE__ */ React15.createElement(ChevronLeft, { size: 16 })
+  ), getPageNumbers().map((pageNum) => /* @__PURE__ */ React15.createElement(
+    "button",
+    {
+      key: pageNum,
+      onClick: () => handlePageChange(pageNum),
+      className: `flex items-center justify-center min-w-9 h-9 px-3 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === pageNum ? "bg-primary text-white border-primary dark:bg-primary" : "bg-white text-black hover:bg-gray-50 dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`
+    },
+    pageNum
+  )), /* @__PURE__ */ React15.createElement(
+    "button",
+    {
+      onClick: () => handlePageChange(currentPage + 1),
+      disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
+      className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      title: "Next page"
+    },
+    /* @__PURE__ */ React15.createElement(ChevronRight, { size: 16 })
+  ), /* @__PURE__ */ React15.createElement(
+    "button",
+    {
+      onClick: () => handlePageChange(calculatedTotalPages),
+      disabled: currentPage === calculatedTotalPages || calculatedTotalPages === 0,
+      className: `flex items-center justify-center w-9 h-9 rounded-md border border-[#e5e5e5] dark:border-[#303036] text-sm transition-colors ${currentPage === calculatedTotalPages || calculatedTotalPages === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-[#27272a] dark:text-gray-600" : "bg-white text-black hover:bg-gray-50 cursor-pointer dark:bg-[#18181b] dark:text-white dark:hover:bg-[#27272a]"}`,
+      title: "Last page"
+    },
+    /* @__PURE__ */ React15.createElement(ChevronsRight, { size: 16 })
+  ))));
+};
 export {
   AppSideBar,
   Chip,
@@ -969,6 +1119,7 @@ export {
   CustomTable,
   CustomTextarea,
   CustomUpload,
+  Pagination,
   ProgressBar,
   RightSheet
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jett.admin.npmpackage",
-  "version": "1.0.62",
+  "version": "1.0.65",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "exports": {