Pagination

1import * as React from "react";
2import { cn } from "@/lib/utils";
3import { Button, buttonVariants } from "@/registry/default/button/button";
4
5import { HugeiconsIcon } from "@hugeicons/react";
6import { ArrowLeft01Icon, ArrowRight01Icon, MoreHorizontalIcon } from "@hugeicons/core-free-icons";
7function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
8  return (
9    <nav
10      role="navigation"
11      aria-label="pagination"
12      data-slot="pagination"
13      className={cn("mx-auto flex w-full justify-center", className)}
14      {...props}
15    />
16  );
17}
18
19function PaginationContent({
20  className,
21  ...props
22}: React.ComponentProps<"ul">) {
23  return (
24    <ul
25      data-slot="pagination-content"
26      className={cn("flex flex-row items-center gap-1", className)}
27      {...props}
28    />
29  );
30}
31
32function PaginationItem({ ...props }: React.ComponentProps<"li">) {
33  return <li data-slot="pagination-item" {...props} />;
34}
35
36type PaginationLinkProps = {
37  isActive?: boolean;
38  isDisabled?: boolean;
39} & Pick<React.ComponentProps<typeof Button>, "size"> &
40  React.ComponentProps<"a">;
41
42// Pagination links are real anchors styled with the flat `buttonVariants`
43// recipe on purpose: rendering them through <Button render={<a/>}> would
44// bolt button semantics (role="button", no Space navigation) onto elements
45// that must stay links for screen readers.
46function PaginationLink({
47  className,
48  isActive,
49  isDisabled,
50  size = "icon",
51  ...props
52}: PaginationLinkProps) {
53  return (
54    <a
55      aria-current={isActive ? "page" : undefined}
56      aria-disabled={isDisabled}
57      data-slot="pagination-link"
58      data-active={isActive}
59      data-disabled={isDisabled}
60      className={cn(
61        buttonVariants({
62          variant: isActive ? "outline" : "ghost",
63          size,
64        }),
65        isDisabled && "pointer-events-none opacity-60",
66        className,
67      )}
68      {...props}
69    />
70  );
71}
72
73function PaginationPrevious({
74  className,
75  ...props
76}: React.ComponentProps<typeof PaginationLink>) {
77  return (
78    <PaginationLink
79      aria-label="Go to previous page"
80      size="default"
81      // pl-2.5 mirrors the Button's leading-icon optical padding, which the
82      // flat recipe has no compound variants for.
83      className={cn("gap-1.5 pl-2.5", className)}
84      {...props}
85    >
86      <HugeiconsIcon icon={ArrowLeft01Icon} size={16} strokeWidth={2} />
87// … truncated