Pagination

1import { ArrowsHorizontalIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
2import * as React from "react";
3import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
4import { cn } from "@/lib/utils";
5import { type Button, buttonVariants } from "./button";
6 
7/* Role: bordered adaptive glass. */
8const ROLE = {
9  border: true,
10};
11 
12const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
13  <nav aria-label="pagination" data-slot="pagination" className={cn("mx-auto flex w-full justify-center", className)} {...props} />
14);
15Pagination.displayName = "Pagination";
16 
17const PaginationContent = React.forwardRef<
18  HTMLUListElement,
19  React.ComponentProps<"ul"> &
20    MaterialAxisProps & {
21      variant?: "default" | "glass";
22    }
23>(({ className, variant = "glass", ...props }, ref) => {
24  const [axes, rest] = splitAxisProps(props);
25  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
26  const variants = {
27    default: "",
28    glass: "rounded-lg px-2 py-1",
29  };
30 
31  const m = materialSurface(variant === "default" ? null : ROLE, axes);
32 
33  return (
34    <ul
35      ref={ref}
36      data-slot="pagination-content"
37      data-material={m?.["data-material"]}
38      className={cn(m?.className, "flex flex-row items-center gap-1", variants[variant], className)}
39      {...rest}
40    />
41  );
42});
43PaginationContent.displayName = "PaginationContent";
44 
45const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
46  <li ref={ref} data-slot="pagination-item" className={cn("", className)} {...props} />
47));
48PaginationItem.displayName = "PaginationItem";
49 
50type PaginationLinkProps = {
51  isActive?: boolean;
52} & Pick<React.ComponentProps<typeof Button>, "size"> &
53  React.ComponentProps<"a"> &
54  MaterialAxisProps & {
55    variant?: "default" | "glass";
56  };
57 
58const PaginationLink = ({ className, isActive, size = "icon", variant = "glass", ...props }: PaginationLinkProps) => {
59  const [axes, rest] = splitAxisProps(props);
60  // The glass surface rides the ACTIVE page only; inactive links keep the plain outline/ghost button look.
61  const m = variant === "glass" && isActive ? materialSurface(ROLE, axes) : null;
62 
63  return (
64    <a
65      aria-current={isActive ? "page" : undefined}
66      data-slot="pagination-link"
67      data-active={isActive}
68      data-material={m?.["data-material"]}
69      className={cn(
70        m?.className,
71        buttonVariants({
72// … truncated