import { Value } from '@tempots/dom';
import { ControlSize, PaginationVariant } from '../theme';
import { ThemeColorName } from '../../tokens';
/**
 * Configuration options for the {@link Pagination} component.
 */
export interface PaginationOptions {
    /** Current page number (1-indexed). */
    currentPage: Value<number>;
    /** Total number of pages available. */
    totalPages: Value<number>;
    /** Callback invoked when a page is selected. */
    onChange: (page: number) => void;
    /** Number of page siblings to show around the current page. @default 1 */
    siblings?: Value<number>;
    /** Whether to show Previous/Next navigation buttons. @default true */
    showPrevNext?: Value<boolean>;
    /** Whether to show First/Last page buttons. @default false */
    showFirstLast?: Value<boolean>;
    /** Size affecting button dimensions and font size. @default 'md' */
    size?: Value<ControlSize>;
    /** Visual style variant for the pagination items. @default 'filled' */
    variant?: Value<PaginationVariant>;
    /** Theme color for the active page indicator. @default 'primary' */
    color?: Value<ThemeColorName>;
    /** Whether to distribute items across the full available width. @default false */
    justify?: Value<boolean>;
    /** Whether to dynamically adjust the number of visible page numbers to fit available space. @default false */
    responsive?: Value<boolean>;
}
/**
 * Generates an array of page numbers and ellipsis markers for pagination display.
 *
 * The algorithm shows:
 * - The first page (if not in range)
 * - An ellipsis if there's a gap after first page
 * - Page numbers around the current page (siblings)
 * - An ellipsis if there's a gap before last page
 * - The last page (if not in range)
 *
 * @param current - The current page number (1-indexed)
 * @param total - The total number of pages
 * @param siblings - Number of page numbers to show on each side of current
 * @returns Array of page numbers and 'dots' markers for ellipsis
 *
 * @example
 * ```typescript
 * generatePaginationRange(5, 10, 1) // [1, 'dots', 4, 5, 6, 'dots', 10]
 * generatePaginationRange(1, 10, 1) // [1, 2, 'dots', 10]
 * generatePaginationRange(10, 10, 1) // [1, 'dots', 9, 10]
 * ```
 */
export declare function generatePaginationRange(current: number, total: number, siblings: number): (number | 'dots')[];
/**
 * Generates inline CSS custom properties for pagination theming based on variant and color.
 *
 * @param variant - The visual style variant
 * @param color - The theme color
 * @returns Semicolon-separated CSS custom property declarations
 */
export declare function generatePaginationStyles(variant: PaginationVariant, color: ThemeColorName): string;
/**
 * A pagination component for navigating through multiple pages of content.
 *
 * Features:
 * - Configurable number of sibling pages shown around current page
 * - Optional First/Last page navigation buttons
 * - Optional Previous/Next navigation buttons
 * - Ellipsis indicators for collapsed page ranges
 * - Responsive sizing with theme support
 * - Full keyboard navigation and ARIA support
 *
 * @param options - Configuration for appearance and behavior
 * @returns A navigation element with pagination controls
 *
 * @example
 * ```typescript
 * const currentPage = prop(1)
 * const totalPages = prop(10)
 *
 * Pagination({
 *   currentPage,
 *   totalPages,
 *   onChange: (page) => {
 *     currentPage.set(page)
 *     // Load page data...
 *   },
 *   siblings: 1,
 *   showPrevNext: true,
 *   showFirstLast: false,
 *   size: 'md'
 * })
 * ```
 */
export declare function Pagination({ currentPage, totalPages, onChange, siblings, showPrevNext, showFirstLast, size, variant, color, justify, responsive, }: PaginationOptions): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;