rupoui 1.1.0 → 1.1.1

package/README.md

@@ -567,6 +567,109 @@ import { Tabs, Tab } from "rupoui";
 - `isVertical`: Whether to render tabs vertically.
 - `fullWidth`: Whether to take up the full width of the container.
 
+### Pagination
+
+A navigation component that allows users to navigate through pages of content with smooth animations.
+
+```tsx
+import { Pagination } from "rupoui";
+
+// One-Liner API (Recommended)
+<Pagination
+  page={currentPage}
+  totalPages={10}
+  onPageChange={setCurrentPage}
+/>
+
+// With variant and size
+<Pagination
+  page={currentPage}
+  totalPages={20}
+  onPageChange={setCurrentPage}
+  variant="outline"
+  size="lg"
+/>
+
+// Uncontrolled mode
+<Pagination
+  defaultPage={5}
+  totalPages={10}
+  onPageChange={(page) => console.log("Page:", page)}
+  variant="ghost"
+/>
+
+// Hide controls
+<Pagination
+  defaultPage={3}
+  totalPages={10}
+  showPrevious={false}
+  showNext={false}
+/>
+```
+
+**Advanced Composition:**
+
+For full control over the pagination layout, use the composable API:
+
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  usePagination,
+} from "rupoui";
+
+const MyPagination = () => {
+  const [page, setPage] = useState(1);
+  const range = usePagination({
+    totalPages: 20,
+    currentPage: page,
+    siblingCount: 2,
+    boundaryCount: 1,
+  });
+
+  return (
+    <Pagination page={page} totalPages={20} onPageChange={setPage}>
+      <PaginationContent>
+        <PaginationPrevious />
+        {range.map((item, index) =>
+          item === "ellipsis" ? (
+            <PaginationEllipsis key={`ellipsis-${index}`} />
+          ) : (
+            <PaginationItem key={item} value={item} />
+          ),
+        )}
+        <PaginationNext />
+      </PaginationContent>
+    </Pagination>
+  );
+};
+```
+
+**Props:**
+
+- `page` / `defaultPage`: Current page number (controlled/uncontrolled).
+- `totalPages`: Total number of pages (required).
+- `onPageChange`: Callback when the page changes.
+- `variant`: `solid` (default), `outline`, `ghost`.
+- `size`: `sm`, `md` (default), `lg`.
+- `siblingCount`: Number of pages to show on each side of current page (default: `1`).
+- `boundaryCount`: Number of pages to show at start and end (default: `1`).
+- `showPrevious` / `showNext`: Whether to show navigation buttons (default: `true`).
+- `disabled`: Whether pagination is disabled.
+- `classNames`: Custom styles for component slots (`base`, `content`, `item`, `prev`, `next`, `ellipsis`).
+
+**Features:**
+
+- **One-Liner API**: Simple and intuitive for common use cases.
+- **Composable**: Full control with advanced composition when needed.
+- **Animated**: Smooth transitions using Framer Motion's `layoutId`.
+- **Accessible**: Full keyboard navigation and ARIA support.
+- **Customizable**: Multiple variants, sizes, and styling options.
+
 ## 🎨 Customization
 
 ### Global Configuration

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rupoui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",