@xsolla/xui-pagination 0.148.0 → 0.148.1

package/README.md

@@ -0,0 +1,207 @@
+# Pagination
+
+A cross-platform React pagination component for navigating through paged content. Features adaptive page number display with ellipsis for large page counts.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-pagination
+# or
+yarn add @xsolla/xui-pagination
+```
+
+## Demo
+
+### Basic Pagination
+
+```tsx
+import * as React from 'react';
+import { Pagination } from '@xsolla/xui-pagination';
+
+export default function BasicPagination() {
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <Pagination
+      currentPage={page}
+      totalPages={10}
+      onPageChange={setPage}
+    />
+  );
+}
+```
+
+### Large Page Count
+
+```tsx
+import * as React from 'react';
+import { Pagination } from '@xsolla/xui-pagination';
+
+export default function LargePagination() {
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <Pagination
+      currentPage={page}
+      totalPages={100}
+      onPageChange={setPage}
+      siblingCount={1}
+    />
+  );
+}
+```
+
+### Stretched Layout
+
+```tsx
+import * as React from 'react';
+import { Pagination } from '@xsolla/xui-pagination';
+
+export default function StretchedPagination() {
+  const [page, setPage] = React.useState(5);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Pagination
+        currentPage={page}
+        totalPages={20}
+        onPageChange={setPage}
+        stretched={true}
+      />
+    </div>
+  );
+}
+```
+
+## Anatomy
+
+```jsx
+import { Pagination } from '@xsolla/xui-pagination';
+
+<Pagination
+  currentPage={1}              // Current active page
+  totalPages={10}              // Total number of pages
+  onPageChange={setPage}       // Page change handler
+  siblingCount={1}             // Pages shown on each side
+  showNavigation={true}        // Show prev/next arrows
+  stretched={false}            // Center and stretch
+  disabled={false}             // Disabled state
+  size="md"                    // Size variant
+/>
+```
+
+## Examples
+
+### Pagination Sizes
+
+```tsx
+import * as React from 'react';
+import { Pagination } from '@xsolla/xui-pagination';
+
+export default function PaginationSizes() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Pagination size="sm" currentPage={3} totalPages={10} />
+      <Pagination size="md" currentPage={3} totalPages={10} />
+      <Pagination size="lg" currentPage={3} totalPages={10} />
+    </div>
+  );
+}
+```
+
+### Without Navigation Arrows
+
+```tsx
+import * as React from 'react';
+import { Pagination } from '@xsolla/xui-pagination';
+
+export default function NoArrowsPagination() {
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <Pagination
+      currentPage={page}
+      totalPages={10}
+      onPageChange={setPage}
+      showNavigation={false}
+    />
+  );
+}
+```
+
+### More Sibling Pages
+
+```tsx
+import * as React from 'react';
+import { Pagination } from '@xsolla/xui-pagination';
+
+export default function MoreSiblingsPagination() {
+  const [page, setPage] = React.useState(10);
+
+  return (
+    <Pagination
+      currentPage={page}
+      totalPages={50}
+      onPageChange={setPage}
+      siblingCount={2}
+    />
+  );
+}
+```
+
+### Disabled Pagination
+
+```tsx
+import * as React from 'react';
+import { Pagination } from '@xsolla/xui-pagination';
+
+export default function DisabledPagination() {
+  return (
+    <Pagination
+      currentPage={5}
+      totalPages={10}
+      disabled={true}
+    />
+  );
+}
+```
+
+## API Reference
+
+### Pagination
+
+**Pagination Props:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| currentPage | `number` | `1` | Current active page (1-indexed). |
+| totalPages | `number` | `1` | Total number of pages. |
+| onPageChange | `(page: number) => void` | - | Page change handler. |
+| siblingCount | `number` | `1` | Number of pages shown on each side of current. |
+| showNavigation | `boolean` | `true` | Show previous/next arrow buttons. |
+| stretched | `boolean` | `false` | Center content and stretch to full width. |
+| disabled | `boolean` | `false` | Disabled state. |
+| size | `"sm" \| "md" \| "lg"` | `"md"` | Size variant. |
+| backgroundColor | `string` | - | Background color. |
+| testID | `string` | - | Test identifier. |
+
+## Behavior
+
+- Ellipsis appears when page count exceeds visible slots
+- First and last pages always shown when ellipsis present
+- Navigation arrows disabled at first/last page
+- Active page is visually highlighted
+
+## Page Number Display Logic
+
+Given `siblingCount=1` and `totalPages=20`:
+- Page 1: `1 2 3 4 5 ... 20`
+- Page 10: `1 ... 9 10 11 ... 20`
+- Page 20: `1 ... 16 17 18 19 20`
+
+## Accessibility
+
+- Page buttons have `aria-label` describing page number
+- Current page has `aria-current="page"`
+- Navigation buttons have descriptive `aria-label`
+- All buttons have `role="button"`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-pagination",
-  "version": "0.148.0",
+  "version": "0.148.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.1",
+    "@xsolla/xui-primitives-core": "0.148.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0"