# Pagination

Previous and next links for moving through a long list in pages, with an optional position summary.

```tsx
// demo.tsx
import {Pagination, Stack, Text} from '@earendil-works/elanor-react';
import {useState} from 'react';

const projects = [
  'Website redesign',
  'Design system',
  'Release notes',
  'Customer research',
  'Help center',
  'Mobile app',
];
const pageSize = 2;
const pageCount = Math.ceil(projects.length / pageSize);

export default function PaginationDemo() {
  const [page, setPage] = useState(1);
  const start = (page - 1) * pageSize;

  return (
    <Stack gap="medium">
      <Text role="status">
        Projects {start + 1}–{start + pageSize} of {projects.length}
      </Text>
      <ul>
        {projects.slice(start, start + pageSize).map((project) => (
          <li key={project}>{project}</li>
        ))}
      </ul>
      <Pagination.Root summary={`Page ${page} of ${pageCount}`} aria-label="Project pages">
        <Pagination.Link
          href="#"
          disabled={page === 1}
          onClick={(event) => {
            event.preventDefault();
            setPage((current) => current - 1);
          }}
        >
          Previous
        </Pagination.Link>
        <Pagination.Separator />
        <Pagination.Link
          href="#"
          disabled={page === pageCount}
          onClick={(event) => {
            event.preventDefault();
            setPage((current) => current + 1);
          }}
        >
          Next
        </Pagination.Link>
      </Pagination.Root>
    </Stack>
  );
}
```

## Usage

```tsx
import {Pagination} from '@earendil-works/elanor-react';

<Pagination.Root summary="Page 2 of 5">
  <Pagination.Link href="?page=1">Previous</Pagination.Link>
  <Pagination.Separator />
  <Pagination.Link href="?page=3">Next</Pagination.Link>
</Pagination.Root>;
```

Root renders a `nav` named "Pagination"; pass `aria-label` to name it after the list, such as "Project pages". Use real `href`s so pages can be bookmarked; `disabled` turns off the link at either end. Announce the visible range in a status region, as the demo does.

## API

### `Pagination.Root`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `summary` | `string` | - | Position text before the links, such as "Page 2 of 5". |

Renders `<nav>`. Also accepts its HTML attributes and `ref`.

### `Pagination.Link`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled` | `boolean` | `false` | Removes `href` and the tab stop, such as for Previous on the first page. |

Renders `<a>`. Also accepts its HTML attributes and `ref`.

### `Pagination.Separator`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | `'\|'` |  |

Renders `<span>`. Also accepts its HTML attributes and `ref`.