import * as tailwind_variants from 'tailwind-variants'; import * as _heroui_system from '@heroui/system'; import { HTMLHeroUIProps, PropGetter } from '@heroui/system'; import { SlotsToClasses, PaginationSlots, PaginationVariantProps } from '@heroui/theme'; import { Ref, Key, ReactNode } from 'react'; import { PaginationItemValue, UsePaginationProps as UsePaginationProps$1 } from '@heroui/use-pagination'; import { PressEvent } from '@react-types/shared'; type PaginationItemRenderProps = { /** * The pagination item ref. */ ref?: Ref; /** * React key. */ key?: Key; /** * The pagination item value. */ children?: ReactNode; /** * The pagination item value. */ value: PaginationItemValue; /** * The pagination item index. */ index: number; /** * Calculated pagination item position. This includes the dots. */ page: number; /** * The pagination total number of pages. */ total: number; /** * The active page number. */ activePage: number; /** * Whether the pagination item is active. */ isActive: boolean; /** * Whether the item is before the active page. */ isBefore: boolean; /** * Whether the pagination item is the first item in the pagination. */ isFirst: boolean; /** * Whether the pagination item is the last item in the pagination. */ isLast: boolean; /** * Whether the pagination item is the next item in the pagination. */ isNext: boolean; /** * Number of pages that are added or subtracted on the '...' button. * @default 5 */ dotsJump: number; /** * Whether the pagination item is the previous item in the pagination. */ isPrevious: boolean; /** * The pagination item className. */ className: string; /** * Callback to go to the next page. */ onNext: () => void; /** * Callback to go to the previous page. */ onPrevious: () => void; /** * Callback to go to the page. */ setPage: (page: number) => void; /** * Callback fired when the item is clicked. * @param e PressEvent */ onPress?: (e: PressEvent) => void; /** * Function to get the aria-label of the item. */ getAriaLabel?: (page?: PaginationItemValue) => string | undefined; }; interface Props extends Omit, "onChange"> { /** * Ref to the DOM node. */ ref?: Ref; /** * Number of pages that are added or subtracted on the '...' button. * @default 5 */ dotsJump?: number; /** * Non disable next/previous controls * @default false */ loop?: boolean; /** * Whether the pagination should display controls (left/right arrows). * @default true */ showControls?: boolean; /** * Render a custom pagination item. * @param props Pagination item props * @returns ReactNode */ renderItem?: (props: PaginationItemRenderProps) => ReactNode; /** * Function to get the aria-label of the item. If not provided, pagination will use the default one. */ getItemAriaLabel?: (page?: string | PaginationItemValue) => string; /** * Classname or List of classes to change the classNames of the element. * if `className` is passed, it will be added to the base slot. * * @example * ```ts * * ``` */ classNames?: SlotsToClasses; } type UsePaginationProps = Props & UsePaginationProps$1 & PaginationVariantProps; declare const CURSOR_TRANSITION_TIMEOUT = 300; declare function usePagination(originalProps: UsePaginationProps): { Component: _heroui_system.As; showControls: boolean; dotsJump: number; slots: { base: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; wrapper: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; item: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; prev: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; next: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; cursor: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; forwardIcon: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; ellipsis: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; chevronNext: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; } & { base: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; wrapper: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; item: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; prev: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; next: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; cursor: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; forwardIcon: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; ellipsis: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; chevronNext: (slotProps?: ({ size?: "md" | "sm" | "lg" | undefined; color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined; radius?: "none" | "md" | "full" | "sm" | "lg" | undefined; isDisabled?: boolean | undefined; disableAnimation?: boolean | undefined; variant?: "flat" | "bordered" | "faded" | "light" | undefined; isCompact?: boolean | undefined; showShadow?: boolean | undefined; disableCursorAnimation?: boolean | undefined; } & tailwind_variants.ClassProp) | undefined) => string; } & {}; classNames: SlotsToClasses<"prev" | "next" | "base" | "cursor" | "wrapper" | "ellipsis" | "chevronNext" | "item" | "forwardIcon"> | undefined; loop: boolean; total: number; range: PaginationItemValue[]; activePage: number; getItemRef: (node: HTMLElement | null, value: number) => void; disableAnimation: boolean; disableCursorAnimation: boolean; setPage: (pageNumber: number) => void; onPrevious: () => void; onNext: () => void; renderItem: ((props: PaginationItemRenderProps) => ReactNode) | undefined; getBaseProps: PropGetter; getWrapperProps: PropGetter; getItemProps: PropGetter; getCursorProps: PropGetter; getItemAriaLabel: (page?: string | PaginationItemValue) => string | undefined; }; type UsePaginationReturn = ReturnType; export { CURSOR_TRANSITION_TIMEOUT, type PaginationItemRenderProps, type UsePaginationProps, type UsePaginationReturn, usePagination };