@loke/design-system/dist/components/pagination/pagination.d.ts

A design system with individually importable components

import { type ButtonProps } from "@loke/design-system/button";
import { type ComponentProps } from "react";
/**
 * Pagination component for navigating through multiple pages of content.
 *
 * This component serves as the main container for pagination controls. It manages the current page state and renders the necessary pagination elements, such as previous, next, and page links.
 */
declare const Pagination: {
    ({ className, ...props }: ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
/**
 * PaginationContent component for rendering the content associated with the current page.
 *
 * This component displays the content for the currently selected page in the pagination system. It is typically used to dynamically update content based on the active page.
 */
declare const PaginationContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
/**
 * PaginationItem component for rendering an individual page or navigation control.
 *
 * This component represents a clickable item in the pagination system, such as a specific page number or a navigation control like "Previous" or "Next."
 */
declare const PaginationItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
type PaginationLinkProps = {
    /** Whether the link is currently active or not */
    isActive?: boolean;
} & Pick<ButtonProps, "size" | "disabled"> & ComponentProps<"a">;
/**
 * PaginationLink component for rendering a clickable link to a specific page.
 *
 * This component is used to navigate between pages in the pagination system. It renders a link that directs the user to the page associated with the link's label.
 */
declare const PaginationLink: {
    ({ className, isActive, size, disabled, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
/**
 * PaginationPrevious component for navigating to the previous page.
 *
 * This component provides a control that allows users to go to the previous page in the pagination system. It is typically disabled if the user is on the first page.
 */
declare const PaginationPrevious: {
    ({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
/**
 * PaginationNext component for navigating to the next page.
 *
 * This component provides a control that allows users to go to the next page in the pagination system. It is typically disabled if the user is on the last page.
 */
declare const PaginationNext: {
    ({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
/**
 * PaginationEllipsis component for indicating that there are more pages not directly visible.
 *
 * This component displays an ellipsis ("...") in the pagination system, signaling that there are additional pages between the current range of visible page links.
 */
declare const PaginationEllipsis: {
    ({ className, ...props }: ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
export type { PaginationLinkProps };