<!-- source-hash: 0e65f8e03b416890c9d63ba33ba86a8e -->
Cursor-based pagination UI components for navigating relay-style paginated data using start/end cursors instead of page numbers.

## Key Components

### `CursorPagination`
Full-featured pagination bar with optional info text, Previous/Next navigation, and a reset-to-first-page button. Supports both compact and standard layouts.

### `CursorPaginationSimple`
Minimal icon-only variant using transparent buttons — ideal for inline or space-constrained contexts like table toolbars.

### `CursorPaginationProps`
Full interface supporting:

| Prop | Type | Description |
|------|------|-------------|
| `hasNextPage` | `boolean` | Required. Enables/disables Next button |
| `hasPreviousPage` | `boolean` | Enables/disables Previous button |
| `isFirstPage` | `boolean` | Disables reset button when already on page 1 |
| `startCursor` / `endCursor` | `string \| null` | Relay-style cursors passed back on navigation |
| `totalCount` / `currentCount` | `number` | Drives the info display text |
| `onNext` / `onPrevious` / `onReset` | `(cursor) => void` | Navigation callbacks |
| `compact` | `boolean` | Reduces padding; hides button labels on mobile |
| `resetButtonIcon` | `'home' \| 'rotate'` | Icon shown on the first-page reset button |

## Usage Example

```typescript
import { CursorPagination, CursorPaginationSimple } from './cursor-pagination'

// Full pagination bar
<CursorPagination
  hasNextPage={pageInfo.hasNextPage}
  hasPreviousPage={pageInfo.hasPreviousPage}
  startCursor={pageInfo.startCursor}
  endCursor={pageInfo.endCursor}
  currentCount={items.length}
  totalCount={totalCount}
  itemName="tickets"
  onNext={(cursor) => fetchPage({ after: cursor })}
  onReset={() => fetchPage({})}
  compact
/>

// Icon-only minimal variant
<CursorPaginationSimple
  hasNextPage={pageInfo.hasNextPage}
  onNext={() => fetchPage({ after: pageInfo.endCursor })}
  onReset={() => fetchPage({})}
  isFirstPage={isFirstPage}
/>
```