<!-- source-hash: 9a5725df328375e394d39d73c7bbb936 -->
Cursor-based pagination UI components supporting forward/backward navigation with optional reset-to-first-page functionality.

## Key Components

### `CursorPagination`

Full-featured pagination bar with info text display and configurable navigation controls.

**Props:**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `hasNextPage` | `boolean` | — | Whether a next page exists |
| `hasPreviousPage` | `boolean` | — | Whether a previous page exists |
| `isFirstPage` | `boolean` | `true` | Disables reset/previous when on first page |
| `startCursor` | `string \| null` | — | Cursor passed to `onPrevious` |
| `endCursor` | `string \| null` | — | Cursor passed to `onNext` |
| `currentCount` | `number` | — | Items shown in the current page |
| `totalCount` | `number \| null` | — | Total item count (optional) |
| `itemName` | `string` | `'items'` | Label used in display text |
| `loading` | `boolean` | `false` | Disables all buttons |
| `onNext` | `(cursor: string) => void` | — | Called with `endCursor` |
| `onPrevious` | `(cursor: string) => void` | — | Called with `startCursor` |
| `onReset` | `() => void` | — | Replaces Previous button with a reset/home button |
| `showInfo` | `boolean` | `true` | Toggles the item count display text |
| `compact` | `boolean` | `false` | Reduces padding and hides button labels on mobile |
| `resetButtonLabel` | `string` | `'First'` | Label for the reset button |
| `resetButtonIcon` | `'home' \| 'rotate'` | `'home'` | Icon for the reset button |

### `CursorPaginationSimple`

Compact icon-only variant using transparent buttons — accepts a subset of `CursorPaginationProps`.

## Usage Example

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

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

> **Navigation logic:** When `onReset` is provided, it replaces the Previous button with a Home/Reset button that is disabled on the first page. When only `onPrevious` is provided, a standard chevron-left Previous button is rendered instead.

**Source:** [`cursor-pagination.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/cursor-pagination.tsx)