@rozie-ui/pagination-react 0.0.0-stage → 0.1.8

package/dist/index.d.mts

@@ -0,0 +1,78 @@
+import * as _$react from "react";
+import { ReactNode } from "react";
+//#region src/Pagination.d.ts
+/** The `change` event payload: the page that was just navigated to. */
+interface PaginationChangePayload {
+  /** The new, clamped, 1-based current page. */
+  page: number;
+}
+interface PrevControlCtx {
+  disabled: boolean;
+  goto: () => void;
+  page: number;
+}
+interface EllipsisCtx {
+  index: number;
+}
+interface ItemCtx {
+  page: number;
+  selected: boolean;
+  goto: () => void;
+}
+interface NextControlCtx {
+  disabled: boolean;
+  goto: () => void;
+  page: number;
+}
+interface PaginationProps extends Omit<_$react.ComponentPropsWithoutRef<'nav'>, 'modelValue' | 'defaultModelValue' | 'onModelValueChange' | 'totalPages' | 'total' | 'pageSize' | 'siblingCount' | 'boundaryCount' | 'disabled' | 'ariaLabel' | 'onChange' | 'renderPrevControl' | 'renderEllipsis' | 'renderItem' | 'renderNextControl' | 'slots' | 'children' | 'dangerouslySetInnerHTML'> {
+  /**
+   * The 1-based current page (two-way model). Clamped into `[1, totalPages]`. Bind it with `r-model:modelValue` / `v-model:modelValue` / `modelValue` + `onModelValueChange`; it is also the Angular ControlValueAccessor control value.
+   */
+  modelValue?: number;
+  defaultModelValue?: number;
+  onModelValueChange?: (modelValue: number) => void;
+  /**
+   * Explicit total page count. When provided (> 0) it takes precedence over `total` + `pageSize`. Use it when the backend already reports the page count.
+   */
+  totalPages?: (number) | null;
+  /**
+   * Total item count. Combined with `pageSize` to derive the page count (`ceil(total / pageSize)`) when `totalPages` is not given.
+   */
+  total?: (number) | null;
+  /**
+   * Items per page. Combined with `total` to derive the page count when `totalPages` is not given.
+   */
+  pageSize?: (number) | null;
+  /**
+   * Number of page buttons shown on each side of the current page (the sibling window). Larger values show more context around the current page.
+   */
+  siblingCount?: number;
+  /**
+   * Number of page buttons always shown at each boundary (the first and last `boundaryCount` pages), regardless of the current page.
+   */
+  boundaryCount?: number;
+  /**
+   * Disable the entire control — every page button and the prev/next controls become non-interactive and are marked `aria-disabled`.
+   */
+  disabled?: boolean;
+  /**
+   * Accessible name for the surrounding `<nav>` landmark (its `aria-label`). Defaults to `"Pagination"`.
+   */
+  ariaLabel?: string;
+  onChange?: (payload: PaginationChangePayload) => void;
+  renderPrevControl?: (ctx: PrevControlCtx) => ReactNode;
+  renderEllipsis?: (ctx: EllipsisCtx) => ReactNode;
+  renderItem?: (ctx: ItemCtx) => ReactNode;
+  renderNextControl?: (ctx: NextControlCtx) => ReactNode;
+  slots?: Record<string, () => _$react.ReactNode>;
+}
+interface PaginationHandle {
+  goto: (page: number) => void;
+  next: () => void;
+  prev: () => void;
+  first: () => void;
+  last: () => void;
+}
+declare const Pagination: _$react.ForwardRefExoticComponent<PaginationProps & _$react.RefAttributes<PaginationHandle>>;
+//#endregion
+export { Pagination, Pagination as default, PaginationChangePayload, type PaginationHandle };

package/dist/index.mjs

@@ -0,0 +1,306 @@
+import { Fragment, forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { flushSync } from "react-dom";
+import { clsx, mergeListeners, pickListeners, rozieAttr, rozieDisplay, useControllableState } from "@rozie/runtime-react";
+import "./Pagination.css";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/internal/paginationItems.ts
+/** Inclusive integer range [start, end]; empty when start > end. */
+function range(start, end) {
+	const out = [];
+	for (let i = start; i <= end; i++) out.push(i);
+	return out;
+}
+/**
+* Resolve the effective total page count from either an explicit `totalPages`
+* or `ceil(total / pageSize)`. Always at least 1 (an empty data set still has a
+* single page).
+*/
+function resolveTotalPages(input) {
+	const tp = input.totalPages;
+	if (typeof tp === "number" && tp > 0) return Math.max(1, Math.floor(tp));
+	const total = typeof input.total === "number" ? input.total : 0;
+	const size = typeof input.pageSize === "number" && input.pageSize > 0 ? input.pageSize : 0;
+	if (total > 0 && size > 0) return Math.max(1, Math.ceil(total / size));
+	return 1;
+}
+/**
+* Build the windowed page-item model. Pure: no clamping side effects, no DOM.
+*
+* Algorithm (MUI usePagination semantics):
+*   - `startPages` = first `boundaryCount` pages; `endPages` = last
+*     `boundaryCount` pages.
+*   - a sibling window of `siblingCount` pages on each side of `page`, kept
+*     clear of the boundary blocks.
+*   - an `'ellipsis'` collapses a gap of 2+ pages; a gap of exactly one page is
+*     rendered as that single bridging page (never a 1-page ellipsis).
+*/
+function paginationItems(input) {
+	const totalPages = resolveTotalPages(input);
+	const rawPage = typeof input.page === "number" && Number.isFinite(input.page) ? Math.floor(input.page) : 1;
+	const page = Math.min(Math.max(rawPage, 1), totalPages);
+	const siblingCount = Math.max(0, Math.floor(input.siblingCount ?? 1));
+	const boundaryCount = Math.max(0, Math.floor(input.boundaryCount ?? 1));
+	const startPages = range(1, Math.min(boundaryCount, totalPages));
+	const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+	const siblingsStart = Math.max(Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+	const endPagesFirst = endPages[0];
+	const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPagesFirst !== void 0 ? endPagesFirst - 2 : totalPages - 1);
+	const pages = [];
+	pages.push(...startPages);
+	if (siblingsStart > boundaryCount + 2) pages.push("ellipsis");
+	else if (boundaryCount + 1 < totalPages - boundaryCount) pages.push(boundaryCount + 1);
+	pages.push(...range(siblingsStart, siblingsEnd));
+	if (siblingsEnd < totalPages - boundaryCount - 1) pages.push("ellipsis");
+	else if (totalPages - boundaryCount > boundaryCount) pages.push(totalPages - boundaryCount);
+	pages.push(...endPages);
+	return {
+		totalPages,
+		page,
+		pages,
+		hasPrev: page > 1,
+		hasNext: page < totalPages
+	};
+}
+//#endregion
+//#region src/Pagination.tsx
+const Pagination = forwardRef(function Pagination(_props, ref) {
+	const props = {
+		..._props,
+		totalPages: _props.totalPages ?? null,
+		total: _props.total ?? null,
+		pageSize: _props.pageSize ?? null,
+		siblingCount: _props.siblingCount ?? 1,
+		boundaryCount: _props.boundaryCount ?? 1,
+		disabled: _props.disabled ?? false,
+		ariaLabel: _props.ariaLabel ?? "Pagination"
+	};
+	const attrs = (() => {
+		const { modelValue, totalPages, total, pageSize, siblingCount, boundaryCount, disabled, ariaLabel, defaultValue, onModelValueChange, defaultModelValue, onChange, renderPrevControl, renderEllipsis, renderItem, renderNextControl, slots, ...rest } = _props;
+		return rest;
+	})();
+	const [modelValue, setModelValue] = useControllableState({
+		value: props.modelValue,
+		defaultValue: props.defaultModelValue ?? 1,
+		onValueChange: props.onModelValueChange
+	});
+	const nav = useRef(null);
+	function model() {
+		return paginationItems({
+			page: modelValue,
+			totalPages: props.totalPages,
+			total: props.total,
+			pageSize: props.pageSize,
+			siblingCount: props.siblingCount,
+			boundaryCount: props.boundaryCount
+		});
+	}
+	function effectivePages() {
+		return model().totalPages;
+	}
+	function currentPage() {
+		return model().page;
+	}
+	function canPrev() {
+		return model().hasPrev;
+	}
+	function canNext() {
+		return model().hasNext;
+	}
+	function isActive(page) {
+		return page === currentPage();
+	}
+	function tabIndexFor(active) {
+		return active ? 0 : -1;
+	}
+	const { onChange: _rozieProp_onChange } = props;
+	const goToPage = useCallback((page) => {
+		if (props.disabled) return;
+		const tp = effectivePages();
+		let target = typeof page === "number" ? Math.floor(page) : 1;
+		if (target < 1) target = 1;
+		if (target > tp) target = tp;
+		if (target === currentPage()) return;
+		setModelValue(target);
+		_rozieProp_onChange && _rozieProp_onChange({ page: target });
+	}, [
+		_rozieProp_onChange,
+		currentPage,
+		effectivePages,
+		props.disabled,
+		setModelValue
+	]);
+	const goNext = useCallback(() => {
+		if (canNext()) goToPage(currentPage() + 1);
+	}, [
+		canNext,
+		currentPage,
+		goToPage
+	]);
+	const goPrev = useCallback(() => {
+		if (canPrev()) goToPage(currentPage() - 1);
+	}, [
+		canPrev,
+		currentPage,
+		goToPage
+	]);
+	function goFirst() {
+		return goToPage(1);
+	}
+	function goLast() {
+		return goToPage(effectivePages());
+	}
+	function controls() {
+		const nav$local = nav.current;
+		if (!nav$local) return [];
+		return Array.from(nav$local.querySelectorAll("[data-page-control]"));
+	}
+	function focusControlAt(idx) {
+		const els = controls();
+		if (els.length === 0) return;
+		let i = idx;
+		if (i < 0) i = 0;
+		if (i >= els.length) i = els.length - 1;
+		const el = els[i];
+		if (el && el.focus) el.focus();
+	}
+	function focusedIndex() {
+		const els = controls();
+		const nav$local = nav.current;
+		const root = nav$local ? nav$local.getRootNode() : null;
+		const active = root ? root.activeElement : null;
+		return els.indexOf(active);
+	}
+	const onControlKeydown = useCallback(($event) => {
+		if (props.disabled) return;
+		const key = $event.key;
+		const cur = focusedIndex();
+		if (key === "ArrowRight" || key === "ArrowDown") {
+			$event.preventDefault();
+			focusControlAt(cur + 1);
+		} else if (key === "ArrowLeft" || key === "ArrowUp") {
+			$event.preventDefault();
+			focusControlAt(cur - 1);
+		} else if (key === "Home") {
+			$event.preventDefault();
+			focusControlAt(0);
+		} else if (key === "End") {
+			$event.preventDefault();
+			focusControlAt(controls().length - 1);
+		}
+	}, [
+		controls,
+		focusControlAt,
+		focusedIndex,
+		props.disabled
+	]);
+	function goto(page) {
+		return goToPage(page);
+	}
+	function next() {
+		return goNext();
+	}
+	function prev() {
+		return goPrev();
+	}
+	function first() {
+		return goFirst();
+	}
+	function last() {
+		return goLast();
+	}
+	const _rozieExposeRef = useRef({
+		goto,
+		next,
+		prev,
+		first,
+		last
+	});
+	_rozieExposeRef.current = {
+		goto,
+		next,
+		prev,
+		first,
+		last
+	};
+	useImperativeHandle(ref, () => ({
+		goto: (...args) => flushSync(() => _rozieExposeRef.current.goto(...args)),
+		next: (...args) => flushSync(() => _rozieExposeRef.current.next(...args)),
+		prev: (...args) => flushSync(() => _rozieExposeRef.current.prev(...args)),
+		first: (...args) => flushSync(() => _rozieExposeRef.current.first(...args)),
+		last: (...args) => flushSync(() => _rozieExposeRef.current.last(...args))
+	}), []);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs("nav", {
+		ref: nav,
+		"aria-label": props.ariaLabel,
+		...attrs,
+		className: clsx(clsx("rozie-pagination", { "rozie-pagination--disabled": props.disabled }), attrs.className),
+		...mergeListeners({ onKeyDown: ($event) => {
+			onControlKeydown($event);
+		} }, pickListeners(attrs)),
+		"data-rozie-s-de247ae2": "",
+		children: [
+			props.renderPrevControl ?? props.slots?.["prevControl"] ? (props.renderPrevControl ?? props.slots?.["prevControl"])({
+				disabled: !canPrev() || props.disabled,
+				goto: goPrev,
+				page: currentPage() - 1
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "rozie-pagination-control rozie-pagination-prev",
+				"data-page-control": "",
+				tabIndex: tabIndexFor(true),
+				disabled: !canPrev() || props.disabled,
+				"aria-disabled": !!(!canPrev() || props.disabled),
+				"aria-label": "Previous page",
+				onClick: goPrev,
+				"data-rozie-s-de247ae2": "",
+				children: "‹"
+			}),
+			model().pages.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [!!(item === "ellipsis") && /* @__PURE__ */ jsx("span", {
+				className: "rozie-pagination-ellipsis",
+				"aria-hidden": "true",
+				"data-rozie-s-de247ae2": "",
+				children: props.renderEllipsis ?? props.slots?.["ellipsis"] ? (props.renderEllipsis ?? props.slots?.["ellipsis"])({ index }) : "…"
+			}), !!(item !== "ellipsis") && /* @__PURE__ */ jsx("span", {
+				className: "rozie-pagination-item",
+				"data-rozie-s-de247ae2": "",
+				children: props.renderItem ?? props.slots?.["item"] ? (props.renderItem ?? props.slots?.["item"])({
+					page: item,
+					selected: isActive(item),
+					goto: () => goToPage(item)
+				}) : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: clsx("rozie-pagination-page", { "is-active": isActive(item) }),
+					"data-page-control": "",
+					tabIndex: tabIndexFor(isActive(item)),
+					disabled: !!props.disabled,
+					"aria-disabled": !!props.disabled,
+					"aria-current": rozieAttr(isActive(item) ? "page" : void 0),
+					"aria-label": rozieAttr("Go to page " + item),
+					onClick: ($event) => {
+						goToPage(item);
+					},
+					"data-rozie-s-de247ae2": "",
+					children: rozieDisplay(item)
+				})
+			})] }, item === "ellipsis" ? "ellipsis-" + index : item)),
+			props.renderNextControl ?? props.slots?.["nextControl"] ? (props.renderNextControl ?? props.slots?.["nextControl"])({
+				disabled: !canNext() || props.disabled,
+				goto: goNext,
+				page: currentPage() + 1
+			}) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "rozie-pagination-control rozie-pagination-next",
+				"data-page-control": "",
+				tabIndex: tabIndexFor(true),
+				disabled: !canNext() || props.disabled,
+				"aria-disabled": !!(!canNext() || props.disabled),
+				"aria-label": "Next page",
+				onClick: goNext,
+				"data-rozie-s-de247ae2": "",
+				children: "›"
+			})
+		]
+	}) });
+});
+//#endregion
+export { Pagination, Pagination as default };

package/package.json

@@ -1,6 +1,74 @@
 {
   "name": "@rozie-ui/pagination-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.8",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "description": "Idiomatic React headless WAI-ARIA pagination control (page-item model with ellipses, sibling/boundary windowing, prev/next, roving keyboard nav) — one accessible Rozie source compiled to React.",
+  "keywords": [
+    "rozie",
+    "rozie-ui",
+    "pagination",
+    "pager",
+    "page-navigation",
+    "nav",
+    "headless",
+    "accessibility",
+    "aria",
+    "component",
+    "react"
+  ],
+  "author": "One Learning Community (https://github.com/One-Learning-Community)",
+  "homepage": "https://github.com/One-Learning-Community/rozie.js#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/One-Learning-Community/rozie.js.git",
+    "directory": "packages/ui/pagination/packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/One-Learning-Community/rozie.js/issues"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./source": "./src/Pagination.tsx",
+    "./themes/*": "./src/themes/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "@rozie/runtime-react": "^0.10.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2 || ^19",
+    "react-dom": "^18.2 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
 }

package/src/Pagination.css

@@ -0,0 +1,59 @@
+.rozie-pagination[data-rozie-s-de247ae2] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rozie-pagination-gap, var(--rpg-gap, 0.25rem));
+  font: var(--rozie-pagination-font, inherit);
+}
+.rozie-pagination-page[data-rozie-s-de247ae2],
+.rozie-pagination-control[data-rozie-s-de247ae2] {
+  box-sizing: border-box;
+  min-width: var(--rozie-pagination-size, var(--rpg-size, 2.25rem));
+  height: var(--rozie-pagination-size, var(--rpg-size, 2.25rem));
+  padding: 0 var(--rozie-pagination-padding-x, var(--rpg-padding-x, 0.5rem));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  font-weight: var(--rozie-pagination-font-weight, var(--rpg-font-weight, 500));
+  color: var(--rozie-pagination-fg, var(--rpg-fg, #1a1a1a));
+  background: var(--rozie-pagination-bg, var(--rpg-bg, transparent));
+  border: var(--rozie-pagination-border-width, var(--rpg-border-width, 1px)) solid var(--rozie-pagination-border, var(--rpg-border, rgba(0, 0, 0, 0.18)));
+  border-radius: var(--rozie-pagination-radius, var(--rpg-radius, 6px));
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+.rozie-pagination-page[data-rozie-s-de247ae2]:hover,
+.rozie-pagination-control[data-rozie-s-de247ae2]:hover {
+  background: var(--rozie-pagination-hover-bg, var(--rpg-hover-bg, rgba(0, 0, 0, 0.05)));
+  border-color: var(--rozie-pagination-hover-border, var(--rpg-hover-border, rgba(0, 0, 0, 0.28)));
+}
+.rozie-pagination-page[data-rozie-s-de247ae2]:focus-visible,
+.rozie-pagination-control[data-rozie-s-de247ae2]:focus-visible {
+  outline: var(--rozie-pagination-ring-width, var(--rpg-ring-width, 2px)) solid var(--rozie-pagination-ring, var(--rozie-pagination-accent, var(--rpg-ring, var(--rpg-accent, #0066cc))));
+  outline-offset: var(--rozie-pagination-ring-offset, var(--rpg-ring-offset, 1px));
+}
+.rozie-pagination-page.is-active[data-rozie-s-de247ae2] {
+  color: var(--rozie-pagination-active-fg, var(--rpg-active-fg, #fff));
+  background: var(--rozie-pagination-active-bg, var(--rozie-pagination-accent, var(--rpg-active-bg, var(--rpg-accent, #0066cc))));
+  border-color: var(--rozie-pagination-active-border, var(--rozie-pagination-accent, var(--rpg-active-border, var(--rpg-accent, #0066cc))));
+}
+.rozie-pagination-page[data-rozie-s-de247ae2]:disabled,
+.rozie-pagination-control[data-rozie-s-de247ae2]:disabled {
+  cursor: not-allowed;
+  opacity: var(--rozie-pagination-disabled-opacity, var(--rpg-disabled-opacity, 0.5));
+  pointer-events: none;
+}
+.rozie-pagination--disabled[data-rozie-s-de247ae2] {
+  opacity: var(--rozie-pagination-disabled-opacity, var(--rpg-disabled-opacity, 0.5));
+  pointer-events: none;
+}
+.rozie-pagination-ellipsis[data-rozie-s-de247ae2] {
+  min-width: var(--rozie-pagination-size, var(--rpg-size, 2.25rem));
+  height: var(--rozie-pagination-size, var(--rpg-size, 2.25rem));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rozie-pagination-ellipsis-fg, var(--rpg-ellipsis-fg, rgba(0, 0, 0, 0.5)));
+  user-select: none;
+}

package/src/Pagination.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type * as React from 'react';
+
+/** The `change` event payload: the page that was just navigated to. */
+export interface PaginationChangePayload {
+  /** The new, clamped, 1-based current page. */
+  page: number;
+}
+
+export interface PaginationProps extends Omit<import('react').ComponentPropsWithoutRef<'nav'>, 'modelValue' | 'defaultModelValue' | 'onModelValueChange' | 'totalPages' | 'total' | 'pageSize' | 'siblingCount' | 'boundaryCount' | 'disabled' | 'ariaLabel' | 'onChange' | 'renderPrevControl' | 'renderEllipsis' | 'renderItem' | 'renderNextControl' | 'slots' | 'children' | 'dangerouslySetInnerHTML'> {
+  /**
+   * The 1-based current page (two-way model). Clamped into `[1, totalPages]`. Bind it with `r-model:modelValue` / `v-model:modelValue` / `modelValue` + `onModelValueChange`; it is also the Angular ControlValueAccessor control value.
+   */
+  modelValue?: number;
+  defaultModelValue?: number;
+  onModelValueChange?: (next: number) => void;
+  /**
+   * Explicit total page count. When provided (> 0) it takes precedence over `total` + `pageSize`. Use it when the backend already reports the page count.
+   */
+  totalPages?: (number) | null;
+  /**
+   * Total item count. Combined with `pageSize` to derive the page count (`ceil(total / pageSize)`) when `totalPages` is not given.
+   */
+  total?: (number) | null;
+  /**
+   * Items per page. Combined with `total` to derive the page count when `totalPages` is not given.
+   */
+  pageSize?: (number) | null;
+  /**
+   * Number of page buttons shown on each side of the current page (the sibling window). Larger values show more context around the current page.
+   */
+  siblingCount?: number;
+  /**
+   * Number of page buttons always shown at each boundary (the first and last `boundaryCount` pages), regardless of the current page.
+   */
+  boundaryCount?: number;
+  /**
+   * Disable the entire control — every page button and the prev/next controls become non-interactive and are marked `aria-disabled`.
+   */
+  disabled?: boolean;
+  /**
+   * Accessible name for the surrounding `<nav>` landmark (its `aria-label`). Defaults to `"Pagination"`.
+   */
+  ariaLabel?: string;
+  onChange?: (payload: PaginationChangePayload) => void;
+  renderPrevControl?: (params: { disabled: boolean; goto: () => void; page: number }) => ReactNode;
+  renderEllipsis?: (params: { index: number }) => ReactNode;
+  renderItem?: (params: { page: number; selected: boolean; goto: () => void }) => ReactNode;
+  renderNextControl?: (params: { disabled: boolean; goto: () => void; page: number }) => ReactNode;
+  slots?: Record<string, () => ReactNode>;
+}
+
+export interface PaginationHandle {
+  goto: (page: number) => void;
+  next: () => void;
+  prev: () => void;
+  first: () => void;
+  last: () => void;
+}
+
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<PaginationHandle>>;
+export default Pagination;