import React from 'react';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/carousel-pagination/colors-with-modes.css';
export type CarouselPaginationItemAttributes = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'disabled' | 'aria-disabled' | 'aria-current'> & {
    [attribute: `data-${string}`]: string | number | boolean | undefined;
};
export type CarouselPaginationLabels = {
    previous?: string;
    next?: string;
    /** Complete selector label using {current} and {total}. */
    item?: string;
};
export type CarouselPaginationProps = BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> & {
    /** Total number of carousel items. */
    itemCount: number;
    /** The current active item */
    activeIndex: number;
    /** Requests a new activeIndex; the parent updates selection. */
    onChange: (activeIndex: number) => void;
    /** Enables looping navigation between the first and last items. */
    loop?: boolean;
    /** Accessible control labels for localization. */
    labels?: CarouselPaginationLabels;
    /** Builds attributes for each item selector. */
    itemAttributesBuilder?: (index: number) => CarouselPaginationItemAttributes;
    /** Accessible name for the controls. */
    'aria-label': string;
    'data-testid'?: string;
};
/**
 * Use CarouselPagination to navigate a collection of items.
 * @see https://primer.style/brand/components/CarouselPagination/
 */
export declare const CarouselPagination: React.ForwardRefExoticComponent<Omit<CarouselPaginationProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
    testIds: {
        root: string;
    };
};