import * as React from "react"; import { cn } from "aura-ui-core"; export interface PaginationProps extends React.HTMLAttributes<HTMLElement> { /** Página atual (1-based). */ page: number; /** Total de páginas. */ pageCount: number; /** Callback de navegação. */ onPageChange?: (page: number) => void; /** Quantidade de vizinhos ao redor da atual (padrão 1). */ siblingCount?: number; /** Desabilita tudo. */ disabled?: boolean; } function range(start: number, end: number) { return Array.from({ length: end - start + 1 }, (_, i) => start + i); } /** Base de todos os botões: foco visível explícito e estado desabilitado. */ const buttonBase = "aura-press h-9 rounded-[var(--aura-radius)] border px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-aura-ring focus-visible:ring-offset-2 focus-visible:ring-offset-aura-surface disabled:pointer-events-none disabled:opacity-40"; /** Paginação acessível com elevação Aura e foco visível. */ export const Pagination = React.forwardRef<HTMLElement, PaginationProps>( ( { page, pageCount, onPageChange, siblingCount = 1, disabled = false, className, ...props }, ref ) => { const pages = React.useMemo(() => { const total = Math.max(1, pageCount); const current = Math.min(Math.max(1, page), total); const left = Math.max(2, current - siblingCount); const right = Math.min(total - 1, current + siblingCount); const items: (number | "dots")[] = [1]; if (left > 2) items.push("dots"); items.push(...range(left, right)); if (right < total - 1) items.push("dots"); if (total > 1) items.push(total); return items; }, [page, pageCount, siblingCount]); const go = (n: number) => { if (disabled) return; const next = Math.min(Math.max(1, n), Math.max(1, pageCount)); if (next !== page) onPageChange?.(next); }; return ( <nav ref={ref} aria-label="Paginação" className={cn("flex items-center gap-1", className)} {...props} > <button type="button" aria-label="Página anterior" disabled={disabled || page <= 1} onClick={() => go(page - 1)} className={cn( buttonBase, "border-aura-border text-aura-muted-foreground hover:bg-aura-muted" )} > ← </button> {pages.map((item, i) => item === "dots" ? ( <span key={`dots-${i}`} aria-hidden className="px-1 text-aura-muted-foreground"> … </span> ) : ( <button key={item} type="button" aria-label={`Página ${item}`} aria-current={item === page ? "page" : undefined} disabled={disabled} onClick={() => go(item)} className={cn( buttonBase, "min-w-9 tabular-nums", item === page ? "border-transparent bg-aura-primary text-aura-primary-foreground shadow-aura-2" : "border-aura-border text-aura-surface-foreground hover:bg-aura-muted" )} > {item} </button> ) )} <button type="button" aria-label="Próxima página" disabled={disabled || page >= pageCount} onClick={() => go(page + 1)} className={cn( buttonBase, "border-aura-border text-aura-muted-foreground hover:bg-aura-muted" )} > → </button> </nav> ); } ); Pagination.displayName = "Pagination";

Instalação

Uso

API

Código-fonte

src/components/ui/pagination.tsx