@zentauri-ui/zentauri-components 1.5.22 → 1.6.0

package/src/ui/pagination/pagination.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useCallback, useId, type KeyboardEvent } from "react";
+import { useCallback, useId, type KeyboardEvent } from "react";
 
 import { cn, clampPage } from "../../lib/utils";
 import { buttonVariants } from "../buttons/variants";
@@ -13,40 +13,30 @@ const defaultPrevLabel = "Previous page";
 const defaultNextLabel = "Next page";
 const defaultEllipsisLabel = "More pages";
 
-export const Pagination = forwardRef<HTMLElement, PaginationProps>(
-  function Pagination(
-    {
-      className,
-      appearance = "default",
-      size = "md",
-      pageCount,
-      page,
-      defaultPage = 1,
-      onPageChange,
-      siblingCount = 1,
-      boundaryCount = 1,
-      showPrevNext = true,
-      prevLabel = defaultPrevLabel,
-      nextLabel = defaultNextLabel,
-      ellipsisLabel = defaultEllipsisLabel,
-      getPageHref,
-      "aria-label": ariaLabel = "Pagination",
-      ...rest
-    },
-    ref,
-  ) {
-    const id = useId();
-    const listId = `${id}-list`;
-
-    const {
-      currentPage,
-      items,
-      setPage,
-      goPrev,
-      goNext,
-      canGoPrev,
-      canGoNext,
-    } = usePagination({
+export const Pagination = ({
+  className,
+  appearance = "default",
+  size = "md",
+  pageCount,
+  page,
+  defaultPage = 1,
+  onPageChange,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showPrevNext = true,
+  prevLabel = defaultPrevLabel,
+  nextLabel = defaultNextLabel,
+  ellipsisLabel = defaultEllipsisLabel,
+  getPageHref,
+  "aria-label": ariaLabel = "Pagination",
+  ref,
+  ...rest
+}: PaginationProps) => {
+  const id = useId();
+  const listId = `${id}-list`;
+
+  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =
+    usePagination({
       pageCount,
       page,
       defaultPage,
@@ -55,183 +45,182 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       onPageChange,
     });
 
-    const handleKeyDown = useCallback(
-      (event: KeyboardEvent<HTMLElement>) => {
-        if (pageCount <= 0) {
-          return;
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (pageCount <= 0) {
+        return;
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        event.preventDefault();
+        if (canGoNext) {
+          setPage(currentPage + 1);
         }
-        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-          event.preventDefault();
-          if (canGoNext) {
-            setPage(currentPage + 1);
-          }
-        } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-          event.preventDefault();
-          if (canGoPrev) {
-            setPage(currentPage - 1);
-          }
-        } else if (event.key === "Home") {
-          event.preventDefault();
-          setPage(1);
-        } else if (event.key === "End") {
-          event.preventDefault();
-          setPage(pageCount);
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (canGoPrev) {
+          setPage(currentPage - 1);
         }
-      },
-      [canGoNext, canGoPrev, currentPage, pageCount, setPage],
-    );
-
-    if (pageCount <= 0) {
-      return null;
-    }
-
-    const inactiveTriggerClass = cn(
-      buttonVariants({ appearance: "ghost", size }),
-      "bg-white/[0.04] text-slate-200 hover:bg-white/10",
-    );
-
-    const currentTriggerClass = buttonVariants({ appearance, size });
-
-    const triggerFocusRing =
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950";
-
-    const renderPageControl = (pageNumber: number) => {
-      const isCurrent = pageNumber === currentPage;
-      const href = getPageHref?.(pageNumber);
-      const shared = cn(
-        isCurrent ? currentTriggerClass : inactiveTriggerClass,
-        "min-w-[2.25ch] shrink-0",
-        triggerFocusRing,
-      );
-
-      if (href) {
-        return (
-          <a
-            data-slot="pagination-trigger"
-            href={href}
-            aria-label={`Page ${pageNumber}`}
-            aria-current={isCurrent ? "page" : undefined}
-            className={shared}
-          >
-            {pageNumber}
-          </a>
-        );
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        setPage(1);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        setPage(pageCount);
       }
+    },
+    [canGoNext, canGoPrev, currentPage, pageCount, setPage],
+  );
+
+  if (pageCount <= 0) {
+    return null;
+  }
+
+  const inactiveTriggerClass = cn(
+    buttonVariants({ appearance: "ghost", size }),
+    "bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10",
+  );
+
+  const currentTriggerClass = buttonVariants({ appearance, size });
+
+  const triggerFocusRing =
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950";
+
+  const renderPageControl = (pageNumber: number) => {
+    const isCurrent = pageNumber === currentPage;
+    const href = getPageHref?.(pageNumber);
+    const shared = cn(
+      isCurrent ? currentTriggerClass : inactiveTriggerClass,
+      "min-w-[2.25ch] shrink-0",
+      triggerFocusRing,
+    );
 
+    if (href) {
       return (
-        <button
-          type="button"
+        <a
           data-slot="pagination-trigger"
+          href={href}
           aria-label={`Page ${pageNumber}`}
           aria-current={isCurrent ? "page" : undefined}
           className={shared}
-          onClick={() => {
-            if (!isCurrent) {
-              setPage(pageNumber);
-            }
-          }}
         >
           {pageNumber}
-        </button>
+        </a>
       );
-    };
-
-    const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));
-    const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));
-
-    const navTriggerClass = cn(
-      buttonVariants({ appearance: "outline", size }),
-      "shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
-    );
+    }
 
     return (
-      <nav
-        ref={ref}
-        data-slot="pagination"
-        aria-label={ariaLabel}
-        className={cn("w-full", className)}
-        onKeyDown={handleKeyDown}
-        {...rest}
+      <button
+        type="button"
+        data-slot="pagination-trigger"
+        aria-label={`Page ${pageNumber}`}
+        aria-current={isCurrent ? "page" : undefined}
+        className={shared}
+        onClick={() => {
+          if (!isCurrent) {
+            setPage(pageNumber);
+          }
+        }}
       >
-        <div className="flex flex-wrap items-center gap-2">
-          {showPrevNext ? (
-            getPageHref && prevHref && canGoPrev ? (
-              <a
-                data-slot="pagination-prev"
-                aria-label={prevLabel}
-                href={prevHref}
-                className={navTriggerClass}
-              >
-                Prev
-              </a>
-            ) : (
-              <button
-                type="button"
-                data-slot="pagination-prev"
-                aria-label={prevLabel}
-                disabled={!canGoPrev}
-                className={navTriggerClass}
-                onClick={goPrev}
-              >
-                Prev
-              </button>
-            )
-          ) : null}
-
-          <ul
-            id={listId}
-            data-slot="pagination-list"
-            className={paginationListVariants({ appearance, size })}
-          >
-            {items.map((item) => (
-              <li
-                key={item.type === "page" ? `page-${item.value}` : item.key}
-                data-slot="pagination-item"
-                className="inline-flex items-center"
-              >
-                {item.type === "ellipsis" ? (
-                  <span
-                    data-slot="pagination-ellipsis"
-                    className={paginationEllipsisVariants({ size })}
-                    role="img"
-                    aria-label={ellipsisLabel}
-                  >
-                    …
-                  </span>
-                ) : (
-                  renderPageControl(item.value)
-                )}
-              </li>
-            ))}
-          </ul>
-
-          {showPrevNext ? (
-            getPageHref && nextHref && canGoNext ? (
-              <a
-                data-slot="pagination-next"
-                aria-label={nextLabel}
-                href={nextHref}
-                className={navTriggerClass}
-              >
-                Next
-              </a>
-            ) : (
-              <button
-                type="button"
-                data-slot="pagination-next"
-                aria-label={nextLabel}
-                disabled={!canGoNext}
-                className={navTriggerClass}
-                onClick={goNext}
-              >
-                Next
-              </button>
-            )
-          ) : null}
-        </div>
-      </nav>
+        {pageNumber}
+      </button>
     );
-  },
-);
+  };
+
+  const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));
+  const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));
+
+  const navTriggerClass = cn(
+    buttonVariants({ appearance: "outline", size }),
+    "shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
+  );
+
+  return (
+    <nav
+      ref={ref}
+      data-slot="pagination"
+      aria-label={ariaLabel}
+      className={cn("w-full", className)}
+      onKeyDown={handleKeyDown}
+      {...rest}
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        {showPrevNext ? (
+          getPageHref && prevHref && canGoPrev ? (
+            <a
+              data-slot="pagination-prev"
+              aria-label={prevLabel}
+              href={prevHref}
+              className={navTriggerClass}
+            >
+              Prev
+            </a>
+          ) : (
+            <button
+              type="button"
+              data-slot="pagination-prev"
+              aria-label={prevLabel}
+              disabled={!canGoPrev}
+              className={navTriggerClass}
+              onClick={goPrev}
+            >
+              Prev
+            </button>
+          )
+        ) : null}
+
+        <ul
+          id={listId}
+          data-slot="pagination-list"
+          className={paginationListVariants({ appearance, size })}
+        >
+          {items.map((item) => (
+            <li
+              key={item.type === "page" ? `page-${item.value}` : item.key}
+              data-slot="pagination-item"
+              className="inline-flex items-center"
+            >
+              {item.type === "ellipsis" ? (
+                <span
+                  data-slot="pagination-ellipsis"
+                  className={paginationEllipsisVariants({ size })}
+                  role="img"
+                  aria-label={ellipsisLabel}
+                >
+                  …
+                </span>
+              ) : (
+                renderPageControl(item.value)
+              )}
+            </li>
+          ))}
+        </ul>
+
+        {showPrevNext ? (
+          getPageHref && nextHref && canGoNext ? (
+            <a
+              data-slot="pagination-next"
+              aria-label={nextLabel}
+              href={nextHref}
+              className={navTriggerClass}
+            >
+              Next
+            </a>
+          ) : (
+            <button
+              type="button"
+              data-slot="pagination-next"
+              aria-label={nextLabel}
+              disabled={!canGoNext}
+              className={navTriggerClass}
+              onClick={goNext}
+            >
+              Next
+            </button>
+          )
+        ) : null}
+      </div>
+    </nav>
+  );
+};
 
 Pagination.displayName = "Pagination";

package/src/ui/pagination/types.ts

@@ -1,5 +1,5 @@
 import type { VariantProps } from "class-variance-authority";
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import type { buttonVariants } from "../buttons/variants";
 
@@ -36,10 +36,7 @@ export type UsePaginationResult = {
   canGoNext: boolean;
 };
 
-export type PaginationProps = Omit<
-  ComponentPropsWithoutRef<"nav">,
-  "onChange"
-> &
+export type PaginationProps = Omit<ComponentPropsWithRef<"nav">, "onChange"> &
   VariantProps<typeof buttonVariants> & {
     pageCount: number;
     page?: number;

package/src/ui/pagination/variants.ts

@@ -5,47 +5,50 @@ import { cva } from "class-variance-authority";
  * `components/ui/buttons/variants.ts` for consistent design-system tokens.
  */
 export const paginationListVariants = cva(
-  "inline-flex flex-wrap items-center rounded-xl border p-1 ring-offset-slate-950",
+  "inline-flex flex-wrap items-center rounded-xl border p-1 ring-offset-slate-50 dark:ring-offset-slate-950",
   {
     variants: {
       appearance: {
-        default: "border-white/10 bg-white/[0.03]",
-        secondary: "border-white/10 bg-slate-900/40",
-        destructive: "border-rose-500/25 bg-rose-950/20",
-        outline: "border-white/15 bg-transparent",
+        default:
+          "border-black/10 dark:border-white/10 bg-black/[0.03] dark:bg-white/[0.03]",
+        secondary:
+          "border-black/10 dark:border-white/10 bg-slate-100/40 dark:bg-slate-900/40",
+        destructive: "border-rose-500/25 bg-rose-50 dark:bg-rose-950/20",
+        outline: "border-black/15 dark:border-white/15 bg-transparent",
         ghost: "border-transparent bg-transparent",
         link: "border-transparent bg-transparent",
-        glass: "border-white/15 bg-white/5 backdrop-blur-md",
-        emerald: "border-emerald-500/25 bg-emerald-950/20",
-        indigo: "border-indigo-500/25 bg-indigo-950/20",
-        purple: "border-purple-500/25 bg-purple-950/20",
-        pink: "border-pink-500/25 bg-pink-950/20",
-        rose: "border-rose-500/25 bg-rose-950/20",
-        sky: "border-sky-500/25 bg-sky-950/20",
-        teal: "border-teal-500/25 bg-teal-950/20",
-        yellow: "border-yellow-500/25 bg-yellow-950/20",
-        orange: "border-orange-500/25 bg-orange-950/20",
-        gray: "border-gray-500/25 bg-gray-950/20",
-        amber: "border-amber-500/25 bg-amber-950/20",
-        violet: "border-violet-500/25 bg-violet-950/20",
+        glass:
+          "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 backdrop-blur-md",
+        emerald: "border-emerald-500/25 bg-emerald-50 dark:bg-emerald-950/20",
+        indigo: "border-indigo-500/25 bg-indigo-50 dark:bg-indigo-950/20",
+        purple: "border-purple-500/25 bg-purple-50 dark:bg-purple-950/20",
+        pink: "border-pink-500/25 bg-pink-50 dark:bg-pink-950/20",
+        rose: "border-rose-500/25 bg-rose-50 dark:bg-rose-950/20",
+        sky: "border-sky-500/25 bg-sky-50 dark:bg-sky-950/20",
+        teal: "border-teal-500/25 bg-teal-50 dark:bg-teal-950/20",
+        yellow: "border-yellow-500/25 bg-yellow-50 dark:bg-yellow-950/20",
+        orange: "border-orange-500/25 bg-orange-50 dark:bg-orange-950/20",
+        gray: "border-gray-500/25 bg-gray-50 dark:bg-gray-950/20",
+        amber: "border-amber-500/25 bg-amber-50 dark:bg-amber-950/20",
+        violet: "border-violet-500/25 bg-violet-50 dark:bg-violet-950/20",
         "gradient-blue":
-          "border-blue-500/30 bg-linear-to-r from-blue-950/30 to-purple-950/30",
+          "border-blue-500/30 bg-linear-to-r from-blue-50 dark:from-blue-950/30 to-purple-50 dark:to-purple-950/30",
         "gradient-green":
-          "border-lime-500/30 bg-linear-to-r from-green-950/30 to-lime-950/30",
+          "border-lime-500/30 bg-linear-to-r from-green-50 dark:from-green-950/30 to-lime-50 dark:to-lime-950/30",
         "gradient-red":
-          "border-pink-500/30 bg-linear-to-r from-red-950/30 to-pink-950/30",
+          "border-pink-500/30 bg-linear-to-r from-red-50 dark:from-red-950/30 to-pink-50 dark:to-pink-950/30",
         "gradient-yellow":
-          "border-orange-500/30 bg-linear-to-r from-yellow-950/30 to-orange-950/30",
+          "border-orange-500/30 bg-linear-to-r from-yellow-50 dark:from-yellow-950/30 to-orange-50 dark:to-orange-950/30",
         "gradient-purple":
-          "border-pink-500/30 bg-linear-to-r from-purple-950/30 to-pink-950/30",
+          "border-pink-500/30 bg-linear-to-r from-purple-50 dark:from-purple-950/30 to-pink-50 dark:to-pink-950/30",
         "gradient-teal":
-          "border-cyan-500/30 bg-linear-to-r from-teal-950/30 to-cyan-950/30",
+          "border-cyan-500/30 bg-linear-to-r from-teal-50 dark:from-teal-950/30 to-cyan-50 dark:to-cyan-950/30",
         "gradient-indigo":
-          "border-purple-500/30 bg-linear-to-r from-indigo-950/30 to-purple-950/30",
+          "border-purple-500/30 bg-linear-to-r from-indigo-50 dark:from-indigo-950/30 to-purple-50 dark:to-purple-950/30",
         "gradient-pink":
-          "border-rose-500/30 bg-linear-to-r from-pink-950/30 to-rose-950/30",
+          "border-rose-500/30 bg-linear-to-r from-pink-50 dark:from-pink-950/30 to-rose-50 dark:to-rose-950/30",
         "gradient-orange":
-          "border-orange-500/30 bg-linear-to-r from-orange-950/30 to-red-950/30",
+          "border-orange-500/30 bg-linear-to-r from-orange-50 dark:from-orange-950/30 to-red-50 dark:to-red-950/30",
       },
       size: {
         sm: "gap-0.5",
@@ -72,7 +75,7 @@ export const paginationListVariants = cva(
 );
 
 export const paginationEllipsisVariants = cva(
-  "inline-flex min-w-[2ch] select-none items-center justify-center px-1 font-medium text-slate-400",
+  "inline-flex min-w-[2ch] select-none items-center justify-center px-1 font-medium text-slate-500 dark:text-slate-400",
   {
     variants: {
       size: {