import { ReactNode } from 'react';
export declare const carouselHeader: import('tailwind-variants').TVReturnType<{
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            nav?: import('tailwind-merge').ClassNameValue;
            slot?: import('tailwind-merge').ClassNameValue;
            title?: import('tailwind-merge').ClassNameValue;
            root?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {
    [x: string]: {
        [x: string]: import('tailwind-merge').ClassNameValue | {
            nav?: import('tailwind-merge').ClassNameValue;
            slot?: import('tailwind-merge').ClassNameValue;
            title?: import('tailwind-merge').ClassNameValue;
            root?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    root: string;
    title: string;
    slot: string;
    nav: string;
}, undefined, {
    [key: string]: {
        [key: string]: import('tailwind-merge').ClassNameValue | {
            nav?: import('tailwind-merge').ClassNameValue;
            slot?: import('tailwind-merge').ClassNameValue;
            title?: import('tailwind-merge').ClassNameValue;
            root?: import('tailwind-merge').ClassNameValue;
        };
    };
} | {}, {
    root: string;
    title: string;
    slot: string;
    nav: string;
}, import('tailwind-variants').TVReturnType<unknown, {
    root: string;
    title: string;
    slot: string;
    nav: string;
}, undefined, unknown, unknown, undefined>>;
export interface CarouselHeaderProps {
    /** Title of the carousel. Used as the accessible label for the carousel region. */
    title: string;
    /** Optional content rendered after the title (e.g. a "View all" link). */
    actionSlot?: ReactNode;
    /** Additional CSS classes for the root element. */
    className?: string;
}
/**
 * Header area for the Carousel. Renders the title and an optional action slot.
 * The `CarouselHeader` displays a heading for the carousel and provides an optional slot
 * for actions like a "View all" button or link. On medium screens and up (`md+`), it also
 * embeds the `CarouselNav` controls in the top-right corner. On small screens, the nav
 * is rendered below the slides instead.
 * ## Accessibility
 * The title is used as the accessible label for the carousel region via `aria-labelledby`,
 * unless an explicit `aria-label` is provided to the `Carousel` root component.
 * The action slot is wrapped in a `group` role with an appropriate label for screen readers.
 * @example
 * ```tsx
 * <CarouselHeader title="Featured items" />
 * ```
 * @example
 * ```tsx
 * import { Button } from '@payfit/unity-components'
 *
 * <CarouselHeader
 *   title="Featured products"
 *   actionSlot={
 *     <Button variant="ghost" color="neutral">
 *       View all
 *     </Button>
 *   }
 * />
 * ```
 * @param {CarouselHeaderProps} props - Component props
 * @param {CarouselHeaderProps['title']} props.title - Carousel title (used as accessible label)
 * @param {CarouselHeaderProps['actionSlot']} props.actionSlot - Optional action content (e.g., "View all" button)
 * @param {CarouselHeaderProps['className']} props.className - Additional CSS classes
 * @see {@link CarouselHeaderProps} for all available props
 */
declare const CarouselHeader: import('react').ForwardRefExoticComponent<CarouselHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
export { CarouselHeader };