@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/components/pagination/index.tsx

@@ -1,91 +1,91 @@
-"use client";
-
-import React from "react";
-import { PaginationProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
-
-export const Pagination: React.FC<PaginationProps> = ({
-  currentPage,
-  totalPages,
-  onPageChange,
-  ariaLabel = "Pagination",
-}: PaginationProps) => {
-  const pageItems = buildPageItems(currentPage, totalPages);
-
-  const navBtnBase =
-    "inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent cursor-pointer transition-colors duration-150 hover:border-text-brand hover:text-text-brand disabled:opacity-40 disabled:cursor-not-allowed";
-
-  const pageBtnBase =
-    "inline-flex items-center justify-center w-9 h-9 rounded-lg text-body2 text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-100 hover:text-gray-900";
-
-  const pageBtnActive = "bg-bg-surface-active font-bold hover:bg-bg-gray-300";
-
-  return (
-    <nav
-      className="flex items-center justify-center gap-1 px-6 pb-12"
-      aria-label={ariaLabel}
-    >
-      {/* Previous */}
-      <Button
-        className={navBtnBase}
-        onClick={() => onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        aria-label="Go to previous page"
-      >
-        <MaterialIcon name="chevron_left" size={32} aria-hidden="true" />
-      </Button>
-
-      {/* Page numbers */}
-      {pageItems.map((item, idx) =>
-        item === "..." ? (
-          <span
-            key={`ellipsis-${idx}`}
-            className="inline-flex h-9 w-9 cursor-default items-center justify-center text-body2 text-gray-500"
-            aria-hidden="true"
-          >
-            …
-          </span>
-        ) : (
-          <Button
-            key={item}
-            className={`${pageBtnBase} ${item === currentPage ? pageBtnActive : ""}`}
-            onClick={() => onPageChange(item)}
-            aria-label={`Go to page ${item}`}
-            aria-current={item === currentPage ? "page" : undefined}
-          >
-            {item}
-          </Button>
-        )
-      )}
-
-      {/* Next */}
-      <Button
-        className={navBtnBase}
-        onClick={() => onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-        aria-label="Go to next page"
-      >
-        <MaterialIcon name="chevron_right" size={32} aria-hidden="true" />
-      </Button>
-    </nav>
-  );
-};
-
-/** Returns an array of page numbers and ellipsis to render. */
-function buildPageItems(current: number, total: number): (number | "...")[] {
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, i) => i + 1);
-  }
-
-  if (current <= 4) {
-    return [1, 2, 3, 4, 5, "...", total];
-  }
-
-  if (current >= total - 3) {
-    return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
-  }
-
-  return [1, "...", current - 1, current, current + 1, "...", total];
-}
+"use client";
+
+import React from "react";
+import { PaginationProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  ariaLabel = "Pagination",
+}: PaginationProps) => {
+  const pageItems = buildPageItems(currentPage, totalPages);
+
+  const navBtnBase =
+    "inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent cursor-pointer transition-colors duration-150 hover:border-text-brand hover:text-text-brand disabled:opacity-40 disabled:cursor-not-allowed";
+
+  const pageBtnBase =
+    "inline-flex items-center justify-center w-9 h-9 rounded-lg text-body2 text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-100 hover:text-gray-900";
+
+  const pageBtnActive = "bg-bg-surface-active font-bold hover:bg-bg-gray-300";
+
+  return (
+    <nav
+      className="flex items-center justify-center gap-1 px-6 pb-12"
+      aria-label={ariaLabel}
+    >
+      {/* Previous */}
+      <Button
+        className={navBtnBase}
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        aria-label="Go to previous page"
+      >
+        <MaterialIcon name="chevron_left" size={32} aria-hidden="true" />
+      </Button>
+
+      {/* Page numbers */}
+      {pageItems.map((item, idx) =>
+        item === "..." ? (
+          <span
+            key={`ellipsis-${idx}`}
+            className="inline-flex h-9 w-9 cursor-default items-center justify-center text-body2 text-gray-500"
+            aria-hidden="true"
+          >
+            …
+          </span>
+        ) : (
+          <Button
+            key={item}
+            className={`${pageBtnBase} ${item === currentPage ? pageBtnActive : ""}`}
+            onClick={() => onPageChange(item)}
+            aria-label={`Go to page ${item}`}
+            aria-current={item === currentPage ? "page" : undefined}
+          >
+            {item}
+          </Button>
+        )
+      )}
+
+      {/* Next */}
+      <Button
+        className={navBtnBase}
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        aria-label="Go to next page"
+      >
+        <MaterialIcon name="chevron_right" size={32} aria-hidden="true" />
+      </Button>
+    </nav>
+  );
+};
+
+/** Returns an array of page numbers and ellipsis to render. */
+function buildPageItems(current: number, total: number): (number | "...")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  if (current <= 4) {
+    return [1, 2, 3, 4, 5, "...", total];
+  }
+
+  if (current >= total - 3) {
+    return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
+  }
+
+  return [1, "...", current - 1, current, current + 1, "...", total];
+}

package/src/components/pagination/types.ts

@@ -1,6 +1,6 @@
-export interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  ariaLabel?: string;
-}
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  ariaLabel?: string;
+}