<!-- source-hash: c4bd5081b24a42378ae712967abb83c2 -->
Accessible pagination component with smart page number windowing, ellipsis truncation, and both a high-level `Pagination` component and low-level composable primitives.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `Pagination` | Component | All-in-one pagination with built-in windowing logic |
| `PaginationContent` | Primitive | `<ul>` wrapper for custom pagination layouts |
| `PaginationItem` | Primitive | `<li>` wrapper for individual page entries |
| `PaginationLink` | Primitive | Styled `<button>` for page number links |
| `PaginationEllipsis` | Primitive | `MoreHorizontal` icon span for truncated ranges |
| `PaginationPrevious` | Primitive | Previous page `<button>` with chevron icon |
| `PaginationNext` | Primitive | Next page `<button>` with chevron icon |

### `PaginationProps`

| Prop | Type | Description |
|------|------|-------------|
| `currentPage` | `number` | Active page (1-based) |
| `totalPages` | `number` | Total number of pages |
| `onPageChange` | `(page: number) => void` | Callback fired on page selection |
| `className` | `string?` | Optional extra classes on the `<nav>` |

**Windowing logic:** shows up to 5 page buttons — always including first and last — with ellipsis (`-1`/`-2` sentinels) filling gaps in between.

## Usage Example

```typescript
// High-level component
import { Pagination } from "@/components/pagination"

<Pagination
  currentPage={3}
  totalPages={20}
  onPageChange={(page) => setCurrentPage(page)}
/>
```

```typescript
// Composable primitives for custom layouts
import {
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@/components/pagination"

<nav>
  <PaginationContent>
    <PaginationItem><PaginationPrevious onClick={() => setPage(p => p - 1)} /></PaginationItem>
    <PaginationItem><PaginationLink onClick={() => setPage(1)}>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext onClick={() => setPage(p => p + 1)} /></PaginationItem>
  </PaginationContent>
</nav>
```

> All interactive elements include `aria-label` and `aria-current="page"` attributes, and screen-reader-only text via `sr-only` spans for full accessibility compliance.