UNPKG

@payfit/unity-components

Version:

72 lines (71 loc) 2.49 kB
import { VariantProps } from '@payfit/unity-themes'; import { ComponentPropsWithoutRef, ReactNode } from 'react'; export declare const pagination: import('tailwind-variants').TVReturnType<{ [key: string]: { [key: string]: import('tailwind-merge').ClassNameValue | { base?: import('tailwind-merge').ClassNameValue; }; }; } | { [x: string]: { [x: string]: import('tailwind-merge').ClassNameValue | { base?: import('tailwind-merge').ClassNameValue; }; }; } | {}, { base: string; }, undefined, { [key: string]: { [key: string]: import('tailwind-merge').ClassNameValue | { base?: import('tailwind-merge').ClassNameValue; }; }; } | {}, { base: string; }, import('tailwind-variants').TVReturnType<unknown, { base: string; }, undefined, unknown, unknown, undefined>>; export interface PaginationProps extends VariantProps<typeof pagination>, ComponentPropsWithoutRef<'nav'> { children: ReactNode; /** * The total number of pages. * Use -1 to indicate an unknown page count (e.g., for server-paginated data where total pages are not known upfront). * When -1, the End key is disabled and forward navigation has no upper limit. */ pageCount: number; /** * The current page (1-based) */ currentPage: number; /** * Callback fired when the page changes * @param page - The new page number * @param previous - The previous page number * @param direction - The direction of navigation (1 for forward, -1 for backward) */ onPageChange: (page: number, previous: number, direction: -1 | 1) => void; } /** * The Pagination component provides a container for pagination controls with proper navigation semantics. * This is the root component for composition-based pagination patterns. * @example * ```tsx * import { Pagination, PaginationContent, PaginationItem, RawPaginationLink } from '@payfit/unity-components' * * function MyPagination() { * return ( * <Pagination> * <PaginationContent> * <PaginationItem> * <RawPaginationLink href="/page/1" isActive> * 1 * </RawPaginationLink> * </PaginationItem> * </PaginationContent> * </Pagination> * ) * } * ``` */ declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLElement>>; export { Pagination };