@stanfordspezi/spezi-web-design-system/dist/src/components/Pagination/Pagination.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { ComponentProps } from 'react';
import { ButtonProps } from '../Button';
/**
 * Primitives to build your Pagination.
 * If you're looking for batteries-included components, see `ButtonPagination` and `LinkPagination`.
 */
export declare const Pagination: ({ className, ...props }: ComponentProps<"nav">) => import("react").JSX.Element;
/**
 * Container for pagination items.
 *
 * Provides proper layout and spacing for pagination controls.
 * Renders as a semantic unordered list for accessibility.
 * Usually contains {@link PaginationItemContainer} components.
 */
export declare const PaginationContent: ({ className, ...props }: ComponentProps<"ul">) => import("react").JSX.Element;
/**
 * Container for individual pagination items.
 *
 * Renders as a semantic list item for accessibility.
 * Should wrap each individual pagination control.
 *
 * @example
 * ```tsx
 * <PaginationItemContainer>
 *   <PaginationItem>1</PaginationItem>
 * </PaginationItemContainer>
 * ```
 */
export declare const PaginationItemContainer: ({ className, ...props }: ComponentProps<"li">) => import("react").JSX.Element;
interface PaginationLinkProps extends ButtonProps {
    /**
     * Indicates the pagination control is currently active page.
     */
    isActive?: boolean;
}
/**
 * Displays a single pagination control such as a page number or navigation action.
 * Handles active state and proper accessibility attributes.
 * Extends the Button component with pagination-specific behavior.
 *
 * @example
 * ```tsx
 * <PaginationItem isActive>1</PaginationItem>
 * ```
 *
 * @example
 * ```tsx
 * <PaginationItem aria-label="Go to previous page">
 *    <PreviousIcon />
 * </PaginationItem>
 * ```
 */
export declare const PaginationItem: ({ isActive, size, ...props }: PaginationLinkProps) => import("react").JSX.Element;
/**
 * Icon component for the previous page navigation button. Displays a left-pointing chevron icon.
 */
export declare const PaginationPreviousIcon: () => import("react").JSX.Element;
/**
 * Navigation component for moving to the previous page.
 *
 * Displays a button with a left chevron icon by default.
 *
 * @example
 * ```tsx
 * <PaginationPrevious onClick={() => goToPreviousPage()} />
 * ```
 *
 * @example
 * ```tsx
 * // custom content
 * <PaginationPrevious>Previous</PaginationPrevious>
 * ```
 */
export declare const PaginationPrevious: ({ children, ...props }: ComponentProps<typeof PaginationItem>) => import("react").JSX.Element;
/**
 * Icon component for the next page navigation button. Displays a right-pointing chevron icon.
 */
export declare const PaginationNextIcon: () => import("react").JSX.Element;
/**
 * Navigation component for moving to the next page.
 *
 * Displays a button with a right chevron icon by default.
 *
 * @example
 * ```tsx
 * <PaginationNext onClick={() => goToNextPage()} />
 * ```
 *
 * @example
 * ```tsx
 * // custom content
 * <PaginationNext>Next</PaginationNext>
 * ```
 */
export declare const PaginationNext: ({ children, ...props }: ComponentProps<typeof PaginationItem>) => import("react").JSX.Element;
/**
 * Ellipsis component for pagination.
 *
 * Indicates that pages have been omitted in the pagination sequence.
 * Hidden from screen readers while providing an appropriate screen reader text.
 * Commonly used when there are too many pages to display all page numbers.
 *
 * @example
 * ```tsx
 * <PaginationItemContainer>
 *   <PaginationEllipsis />
 * </PaginationItemContainer>
 * ```
 */
export declare const PaginationEllipsis: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
export {};