its-just-ui/dist/components/Pagination/Pagination.d.ts

ITS Just UI - React 18 & React 19 UI component library. 36+ accessible, TypeScript-native components with Tailwind CSS. Zero-config Material UI alternative for SaaS dashboards and enterprise apps.

import { default as React } from 'react';

export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    currentPage?: number;
    defaultCurrentPage?: number;
    totalPages?: number;
    totalItems?: number;
    itemsPerPage?: number;
    onChange?: (page: number) => void;
    disabled?: boolean;
    _required?: boolean;
    type?: 'pagination' | 'table';
    variant?: 'default' | 'filled' | 'outlined' | 'flat' | 'elevated' | 'circular' | 'square';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error';
    shape?: 'rounded' | 'circular' | 'square';
    showFirstLast?: boolean;
    showPrevNext?: boolean;
    showPageNumbers?: boolean;
    showPageInfo?: boolean;
    showItemsPerPage?: boolean;
    showTotalItems?: boolean;
    maxPageNumbers?: number;
    isTablePagination?: boolean;
    labelDisplayedRows?: (from: number, to: number, count: number) => string;
    labelRowsPerPage?: string;
    rowsPerPageOptions?: number[];
    label?: React.ReactNode;
    helperText?: React.ReactNode;
    errorMessage?: string;
    _transition?: 'none' | 'slide' | 'fade' | 'bounce' | 'smooth';
    transitionDuration?: number;
    loading?: boolean;
    _loadingIcon?: React.ReactNode;
    containerClassName?: string;
    containerStyle?: React.CSSProperties;
    backgroundColor?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    boxShadow?: string;
    buttonBackgroundColor?: string;
    _buttonBackgroundColorHover?: string;
    _buttonBackgroundColorActive?: string;
    buttonBackgroundColorDisabled?: string;
    buttonBackgroundColorCurrent?: string;
    _buttonBackgroundColorCurrentHover?: string;
    buttonBorderWidth?: string;
    buttonBorderColor?: string;
    _buttonBorderColorHover?: string;
    _buttonBorderColorActive?: string;
    buttonBorderColorDisabled?: string;
    buttonBorderColorCurrent?: string;
    buttonBorderStyle?: string;
    buttonBorderRadius?: string;
    buttonPadding?: string;
    buttonPaddingX?: string;
    buttonPaddingY?: string;
    buttonBoxShadow?: string;
    _buttonBoxShadowHover?: string;
    _buttonBoxShadowActive?: string;
    buttonBoxShadowDisabled?: string;
    buttonBoxShadowCurrent?: string;
    textColor?: string;
    _textColorHover?: string;
    _textColorActive?: string;
    textColorDisabled?: string;
    textColorCurrent?: string;
    _textColorCurrentHover?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    iconColor?: string;
    _iconColorHover?: string;
    _iconColorActive?: string;
    iconColorDisabled?: string;
    _iconColorCurrent?: string;
    _iconColorCurrentHover?: string;
    iconSize?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    _focusRingOffset?: string;
    _focusRingOffsetColor?: string;
    _focusBorderColor?: string;
    _focusBackgroundColor?: string;
    focusBoxShadow?: string;
    gap?: string;
    buttonGap?: string;
    renderButton?: (page: number, isCurrent: boolean, disabled: boolean) => React.ReactNode;
    renderFirstButton?: (disabled: boolean) => React.ReactNode;
    renderLastButton?: (disabled: boolean) => React.ReactNode;
    renderPrevButton?: (disabled: boolean) => React.ReactNode;
    renderNextButton?: (disabled: boolean) => React.ReactNode;
    renderPageInfo?: (currentPage: number, totalPages: number, totalItems?: number) => React.ReactNode;
    renderItemsPerPage?: (itemsPerPage: number, onItemsPerPageChange: (value: number) => void) => React.ReactNode;
    firstIcon?: React.ReactNode;
    lastIcon?: React.ReactNode;
    prevIcon?: React.ReactNode;
    nextIcon?: React.ReactNode;
    successColor?: string;
    warningColor?: string;
    errorColor?: string;
    children?: React.ReactNode;
}
interface PaginationContextValue {
    currentPage: number;
    totalPages: number;
    totalItems?: number;
    itemsPerPage: number;
    disabled?: boolean;
    loading?: boolean;
    size?: 'sm' | 'md' | 'lg';
    variant?: 'default' | 'filled' | 'outlined' | 'flat' | 'elevated' | 'circular' | 'square';
    status?: 'default' | 'success' | 'warning' | 'error';
    onChange?: (page: number) => void;
}
export declare const usePagination: () => PaginationContextValue;
declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
export interface PaginationButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    page: number;
    isCurrent?: boolean;
    disabled?: boolean;
}
declare const PaginationButton: React.ForwardRefExoticComponent<PaginationButtonProps & React.RefAttributes<HTMLButtonElement>>;
export interface PaginationInfoProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}
declare const PaginationInfo: React.ForwardRefExoticComponent<PaginationInfoProps & React.RefAttributes<HTMLDivElement>>;
export { Pagination, PaginationButton, PaginationInfo };