react-pagination-thami 1.0.0

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from "./pagination.types";
+import "./pagination.css";
+export default function Pagination({ total, pageSize, currentPage, onChange, siblingCount, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Pagination/pagination.types.d.ts

@@ -0,0 +1,7 @@
+export type PaginationProps = {
+    total: number;
+    pageSize: number;
+    currentPage: number;
+    onChange: (page: number) => void;
+    siblingCount?: number;
+};

package/dist/components/Pagination/pagination.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const DOTS = "...";
+export declare function range(start: number, end: number): number[];

package/dist/components/Pagination/usePagination.d.ts

@@ -0,0 +1,2 @@
+import { PaginationProps } from "./pagination.types";
+export declare function usePagination({ total, pageSize, currentPage, siblingCount, }: PaginationProps): (string | number)[];

package/dist/demo/App.d.ts

@@ -0,0 +1 @@
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/dist/demo/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.css

@@ -0,0 +1,28 @@
+/* src/components/Pagination/pagination.css */
+.pagination {
+  display: flex;
+  gap: 6px;
+  list-style: none;
+  padding: 0;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.pagination button {
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  background: white;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.pagination button.active {
+  background: black;
+  color: white;
+}
+.pagination button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.dots {
+  padding: 6px 10px;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Pagination/pagination.css"],"sourcesContent":[".pagination {\r\n  display: flex;\r\n  gap: 6px;\r\n  list-style: none;\r\n  padding: 0;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.pagination button {\r\n  padding: 6px 10px;\r\n  border: 1px solid #ddd;\r\n  background: white;\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n}\r\n\r\n.pagination button.active {\r\n  background: black;\r\n  color: white;\r\n}\r\n\r\n.pagination button:disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.dots {\r\n  padding: 6px 10px;\r\n}"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,OAAK;AACL,cAAY;AACZ,WAAS;AACT,eAAa;AACb,aAAW;AACb;AAEA,CATC,WASW;AACV,WAAS,IAAI;AACb,UAAQ,IAAI,MAAM;AAClB,cAAY;AACZ,iBAAe;AACf,UAAQ;AACV;AAEA,CAjBC,WAiBW,MAAM,CAAC;AACjB,cAAY;AACZ,SAAO;AACT;AAEA,CAtBC,WAsBW,MAAM;AAChB,WAAS;AACT,UAAQ;AACV;AAEA,CAAC;AACC,WAAS,IAAI;AACf;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as Pagination } from "./components/Pagination/Pagination";

package/dist/index.js

@@ -0,0 +1,149 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Pagination: () => Pagination
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Pagination/usePagination.ts
+var import_react = require("react");
+
+// src/components/Pagination/pagination.utils.ts
+var DOTS = "...";
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+
+// src/components/Pagination/usePagination.ts
+function usePagination({
+  total,
+  pageSize,
+  currentPage,
+  siblingCount = 1
+}) {
+  return (0, import_react.useMemo)(() => {
+    const totalPages = Math.ceil(total / pageSize);
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= totalPages) {
+      return range(1, totalPages);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const showLeftDots = leftSiblingIndex > 2;
+    const showRightDots = rightSiblingIndex < totalPages - 2;
+    if (!showLeftDots && showRightDots) {
+      return [
+        ...range(1, 3 + 2 * siblingCount),
+        DOTS,
+        totalPages
+      ];
+    }
+    if (showLeftDots && !showRightDots) {
+      return [
+        1,
+        DOTS,
+        ...range(totalPages - (3 + 2 * siblingCount) + 1, totalPages)
+      ];
+    }
+    if (showLeftDots && showRightDots) {
+      return [
+        1,
+        DOTS,
+        ...range(leftSiblingIndex, rightSiblingIndex),
+        DOTS,
+        totalPages
+      ];
+    }
+    return [];
+  }, [total, pageSize, currentPage, siblingCount]);
+}
+
+// src/components/Pagination/Pagination.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Pagination({
+  total,
+  pageSize,
+  currentPage,
+  onChange,
+  siblingCount = 1
+}) {
+  const totalPages = Math.ceil(total / pageSize);
+  const paginationRange = usePagination({
+    total,
+    pageSize,
+    currentPage,
+    onChange,
+    siblingCount
+  });
+  if (totalPages <= 1 || !paginationRange) return null;
+  const handleKeyDown = (e, page) => {
+    if (page === DOTS) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onChange(Number(page));
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": "Pagination", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(currentPage - 1),
+        disabled: currentPage === 1,
+        "aria-label": "Previous page",
+        children: "Prev"
+      }
+    ) }),
+    paginationRange.map((page, idx) => {
+      if (page === DOTS) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "dots", children: "..." }, `dots-${idx}`);
+      }
+      const pageNumber = Number(page);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: currentPage === pageNumber ? "active" : "",
+          onClick: () => onChange(pageNumber),
+          onKeyDown: (e) => handleKeyDown(e, page),
+          "aria-current": currentPage === pageNumber ? "page" : void 0,
+          children: pageNumber
+        }
+      ) }, pageNumber);
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        "aria-label": "Next page",
+        children: "Next"
+      }
+    ) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Pagination
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Pagination/usePagination.ts","../src/components/Pagination/pagination.utils.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["export { default as Pagination } from \"./components/Pagination/Pagination\";","import { useMemo } from \"react\";\r\nimport { DOTS, range } from \"./pagination.utils\";\r\nimport { PaginationProps } from \"./pagination.types\";\r\n\r\nexport function usePagination({\r\n  total,\r\n  pageSize,\r\n  currentPage,\r\n  siblingCount = 1,\r\n}: PaginationProps) {\r\n  return useMemo(() => {\r\n    const totalPages = Math.ceil(total / pageSize);\r\n\r\n    const totalPageNumbers = siblingCount + 5;\r\n\r\n    if (totalPageNumbers >= totalPages) {\r\n      return range(1, totalPages);\r\n    }\r\n\r\n    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\r\n    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\r\n\r\n    const showLeftDots = leftSiblingIndex > 2;\r\n    const showRightDots = rightSiblingIndex < totalPages - 2;\r\n\r\n    if (!showLeftDots && showRightDots) {\r\n      return [\r\n        ...range(1, 3 + 2 * siblingCount),\r\n        DOTS,\r\n        totalPages,\r\n      ];\r\n    }\r\n\r\n    if (showLeftDots && !showRightDots) {\r\n      return [\r\n        1,\r\n        DOTS,\r\n        ...range(totalPages - (3 + 2 * siblingCount) + 1, totalPages),\r\n      ];\r\n    }\r\n\r\n    if (showLeftDots && showRightDots) {\r\n      return [\r\n        1,\r\n        DOTS,\r\n        ...range(leftSiblingIndex, rightSiblingIndex),\r\n        DOTS,\r\n        totalPages,\r\n      ];\r\n    }\r\n\r\n    return [];\r\n  }, [total, pageSize, currentPage, siblingCount]);\r\n}","export const DOTS = \"...\";\r\n\r\nexport function range(start: number, end: number) {\r\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n}","import React from \"react\";\r\nimport { usePagination } from \"./usePagination\";\r\nimport { PaginationProps } from \"./pagination.types\";\r\nimport { DOTS } from \"./pagination.utils\";\r\nimport \"./pagination.css\";\r\n\r\nexport default function Pagination({\r\n  total,\r\n  pageSize,\r\n  currentPage,\r\n  onChange,\r\n  siblingCount = 1,\r\n}: PaginationProps) {\r\n  const totalPages = Math.ceil(total / pageSize);\r\n\r\n  const paginationRange = usePagination({\r\n    total,\r\n    pageSize,\r\n    currentPage,\r\n    onChange,\r\n    siblingCount,\r\n  });\r\n\r\n  if (totalPages <= 1 || !paginationRange) return null;\r\n\r\n  const handleKeyDown = (\r\n    e: React.KeyboardEvent<HTMLButtonElement>,\r\n    page: string | number\r\n  ) => {\r\n    if (page === DOTS) return;\r\n\r\n    if (e.key === \"Enter\" || e.key === \" \") {\r\n      e.preventDefault();\r\n      onChange(Number(page));\r\n    }\r\n  };\r\n\r\n  return (\r\n    <nav aria-label=\"Pagination\">\r\n      <ul className=\"pagination\">\r\n        {/* Prev */}\r\n        <li>\r\n          <button\r\n            type=\"button\"\r\n            onClick={() => onChange(currentPage - 1)}\r\n            disabled={currentPage === 1}\r\n            aria-label=\"Previous page\"\r\n          >\r\n            Prev\r\n          </button>\r\n        </li>\r\n\r\n        {/* Pages */}\r\n        {paginationRange.map((page: string | number, idx: number) => {\r\n          if (page === DOTS) {\r\n            return (\r\n              <li key={`dots-${idx}`} className=\"dots\">\r\n                ...\r\n              </li>\r\n            );\r\n          }\r\n\r\n          const pageNumber = Number(page);\r\n\r\n          return (\r\n            <li key={pageNumber}>\r\n              <button\r\n                type=\"button\"\r\n                className={currentPage === pageNumber ? \"active\" : \"\"}\r\n                onClick={() => onChange(pageNumber)}\r\n                onKeyDown={(e) => handleKeyDown(e, page)}\r\n                aria-current={currentPage === pageNumber ? \"page\" : undefined}\r\n              >\r\n                {pageNumber}\r\n              </button>\r\n            </li>\r\n          );\r\n        })}\r\n\r\n        {/* Next */}\r\n        <li>\r\n          <button\r\n            type=\"button\"\r\n            onClick={() => onChange(currentPage + 1)}\r\n            disabled={currentPage === totalPages}\r\n            aria-label=\"Next page\"\r\n          >\r\n            Next\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  );\r\n}"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,122 @@
+// src/components/Pagination/usePagination.ts
+import { useMemo } from "react";
+
+// src/components/Pagination/pagination.utils.ts
+var DOTS = "...";
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+
+// src/components/Pagination/usePagination.ts
+function usePagination({
+  total,
+  pageSize,
+  currentPage,
+  siblingCount = 1
+}) {
+  return useMemo(() => {
+    const totalPages = Math.ceil(total / pageSize);
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= totalPages) {
+      return range(1, totalPages);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const showLeftDots = leftSiblingIndex > 2;
+    const showRightDots = rightSiblingIndex < totalPages - 2;
+    if (!showLeftDots && showRightDots) {
+      return [
+        ...range(1, 3 + 2 * siblingCount),
+        DOTS,
+        totalPages
+      ];
+    }
+    if (showLeftDots && !showRightDots) {
+      return [
+        1,
+        DOTS,
+        ...range(totalPages - (3 + 2 * siblingCount) + 1, totalPages)
+      ];
+    }
+    if (showLeftDots && showRightDots) {
+      return [
+        1,
+        DOTS,
+        ...range(leftSiblingIndex, rightSiblingIndex),
+        DOTS,
+        totalPages
+      ];
+    }
+    return [];
+  }, [total, pageSize, currentPage, siblingCount]);
+}
+
+// src/components/Pagination/Pagination.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination({
+  total,
+  pageSize,
+  currentPage,
+  onChange,
+  siblingCount = 1
+}) {
+  const totalPages = Math.ceil(total / pageSize);
+  const paginationRange = usePagination({
+    total,
+    pageSize,
+    currentPage,
+    onChange,
+    siblingCount
+  });
+  if (totalPages <= 1 || !paginationRange) return null;
+  const handleKeyDown = (e, page) => {
+    if (page === DOTS) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onChange(Number(page));
+    }
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Pagination", children: /* @__PURE__ */ jsxs("ul", { className: "pagination", children: [
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(currentPage - 1),
+        disabled: currentPage === 1,
+        "aria-label": "Previous page",
+        children: "Prev"
+      }
+    ) }),
+    paginationRange.map((page, idx) => {
+      if (page === DOTS) {
+        return /* @__PURE__ */ jsx("li", { className: "dots", children: "..." }, `dots-${idx}`);
+      }
+      const pageNumber = Number(page);
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: currentPage === pageNumber ? "active" : "",
+          onClick: () => onChange(pageNumber),
+          onKeyDown: (e) => handleKeyDown(e, page),
+          "aria-current": currentPage === pageNumber ? "page" : void 0,
+          children: pageNumber
+        }
+      ) }, pageNumber);
+    }),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        "aria-label": "Next page",
+        children: "Next"
+      }
+    ) })
+  ] }) });
+}
+export {
+  Pagination
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Pagination/usePagination.ts","../src/components/Pagination/pagination.utils.ts","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { useMemo } from \"react\";\r\nimport { DOTS, range } from \"./pagination.utils\";\r\nimport { PaginationProps } from \"./pagination.types\";\r\n\r\nexport function usePagination({\r\n  total,\r\n  pageSize,\r\n  currentPage,\r\n  siblingCount = 1,\r\n}: PaginationProps) {\r\n  return useMemo(() => {\r\n    const totalPages = Math.ceil(total / pageSize);\r\n\r\n    const totalPageNumbers = siblingCount + 5;\r\n\r\n    if (totalPageNumbers >= totalPages) {\r\n      return range(1, totalPages);\r\n    }\r\n\r\n    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\r\n    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\r\n\r\n    const showLeftDots = leftSiblingIndex > 2;\r\n    const showRightDots = rightSiblingIndex < totalPages - 2;\r\n\r\n    if (!showLeftDots && showRightDots) {\r\n      return [\r\n        ...range(1, 3 + 2 * siblingCount),\r\n        DOTS,\r\n        totalPages,\r\n      ];\r\n    }\r\n\r\n    if (showLeftDots && !showRightDots) {\r\n      return [\r\n        1,\r\n        DOTS,\r\n        ...range(totalPages - (3 + 2 * siblingCount) + 1, totalPages),\r\n      ];\r\n    }\r\n\r\n    if (showLeftDots && showRightDots) {\r\n      return [\r\n        1,\r\n        DOTS,\r\n        ...range(leftSiblingIndex, rightSiblingIndex),\r\n        DOTS,\r\n        totalPages,\r\n      ];\r\n    }\r\n\r\n    return [];\r\n  }, [total, pageSize, currentPage, siblingCount]);\r\n}","export const DOTS = \"...\";\r\n\r\nexport function range(start: number, end: number) {\r\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\r\n}","import React from \"react\";\r\nimport { usePagination } from \"./usePagination\";\r\nimport { PaginationProps } from \"./pagination.types\";\r\nimport { DOTS } from \"./pagination.utils\";\r\nimport \"./pagination.css\";\r\n\r\nexport default function Pagination({\r\n  total,\r\n  pageSize,\r\n  currentPage,\r\n  onChange,\r\n  siblingCount = 1,\r\n}: PaginationProps) {\r\n  const totalPages = Math.ceil(total / pageSize);\r\n\r\n  const paginationRange = usePagination({\r\n    total,\r\n    pageSize,\r\n    currentPage,\r\n    onChange,\r\n    siblingCount,\r\n  });\r\n\r\n  if (totalPages <= 1 || !paginationRange) return null;\r\n\r\n  const handleKeyDown = (\r\n    e: React.KeyboardEvent<HTMLButtonElement>,\r\n    page: string | number\r\n  ) => {\r\n    if (page === DOTS) return;\r\n\r\n    if (e.key === \"Enter\" || e.key === \" \") {\r\n      e.preventDefault();\r\n      onChange(Number(page));\r\n    }\r\n  };\r\n\r\n  return (\r\n    <nav aria-label=\"Pagination\">\r\n      <ul className=\"pagination\">\r\n        {/* Prev */}\r\n        <li>\r\n          <button\r\n            type=\"button\"\r\n            onClick={() => onChange(currentPage - 1)}\r\n            disabled={currentPage === 1}\r\n            aria-label=\"Previous page\"\r\n          >\r\n            Prev\r\n          </button>\r\n        </li>\r\n\r\n        {/* Pages */}\r\n        {paginationRange.map((page: string | number, idx: number) => {\r\n          if (page === DOTS) {\r\n            return (\r\n              <li key={`dots-${idx}`} className=\"dots\">\r\n                ...\r\n              </li>\r\n            );\r\n          }\r\n\r\n          const pageNumber = Number(page);\r\n\r\n          return (\r\n            <li key={pageNumber}>\r\n              <button\r\n                type=\"button\"\r\n                className={currentPage === pageNumber ? \"active\" : \"\"}\r\n                onClick={() => onChange(pageNumber)}\r\n                onKeyDown={(e) => handleKeyDown(e, page)}\r\n                aria-current={currentPage === pageNumber ? \"page\" : undefined}\r\n              >\r\n                {pageNumber}\r\n              </button>\r\n            </li>\r\n          );\r\n        })}\r\n\r\n        {/* Next */}\r\n        <li>\r\n          <button\r\n            type=\"button\"\r\n            onClick={() => onChange(currentPage + 1)}\r\n            disabled={currentPage === totalPages}\r\n            aria-label=\"Next page\"\r\n          >\r\n            Next\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  );\r\n}"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "react-pagination-thami",
+  "version": "1.0.0",
+  "description": "Reusable React pagination component",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run build:js && npm run build:types",
+    "build:js": "tsup src/index.ts",
+    "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "pagination",
+    "component",
+    "ui"
+  ],
+  "author": "thami",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "tsup": "^8.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  }
+}