import { type CSSProperties, type HTMLAttributes, type ImgHTMLAttributes, type ReactNode, type Ref } from 'react';
import { type CssLength } from '../../../utils/css';
export type SixFacesBoxTheme = 'dark' | 'light';
export type SixFacesBoxAlign = 'start' | 'end' | 'center';
export type SixFacesBoxFace = 'top' | 'front' | 'right' | 'back' | 'left' | 'bottom';
export type SixFacesBoxStat = {
    value: ReactNode;
    label: ReactNode;
};
export type SixFacesBoxItem = string | {
    id?: string | number;
    name?: string;
    src?: string;
    darkSrc?: string;
    alt?: string;
    placeholder?: string;
    eyebrow?: ReactNode;
    title?: ReactNode;
    body?: ReactNode;
    align?: SixFacesBoxAlign;
    stats?: readonly SixFacesBoxStat[];
    nextLabel?: ReactNode;
    previousLabel?: ReactNode;
    objectFit?: CSSProperties['objectFit'];
    objectPosition?: CSSProperties['objectPosition'];
    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
    decoding?: ImgHTMLAttributes<HTMLImageElement>['decoding'];
    fetchPriority?: ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
};
export type NormalizedSixFacesBoxItem = {
    id: string;
    index: number;
    face: SixFacesBoxFace;
    name: string;
    src?: string;
    darkSrc?: string;
    alt: string;
    placeholder: string;
    eyebrow?: ReactNode;
    title: ReactNode;
    body?: ReactNode;
    align: SixFacesBoxAlign;
    stats: readonly SixFacesBoxStat[];
    nextLabel?: ReactNode;
    previousLabel?: ReactNode;
    objectFit?: CSSProperties['objectFit'];
    objectPosition?: CSSProperties['objectPosition'];
    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
    decoding?: ImgHTMLAttributes<HTMLImageElement>['decoding'];
    fetchPriority?: ImgHTMLAttributes<HTMLImageElement>['fetchPriority'];
};
export type SixFacesBoxRenderContext = {
    activeIndex: number;
    index: number;
    isActive: boolean;
    item: NormalizedSixFacesBoxItem;
    items: readonly NormalizedSixFacesBoxItem[];
    theme: SixFacesBoxTheme;
};
export type SixFacesBoxProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'onChange'> & {
    items?: readonly SixFacesBoxItem[];
    ariaLabel?: string;
    height?: CssLength;
    cubeSize?: CssLength;
    perspective?: CssLength;
    theme?: SixFacesBoxTheme;
    defaultTheme?: SixFacesBoxTheme;
    onThemeChange?: (theme: SixFacesBoxTheme) => void;
    background?: CSSProperties['background'];
    color?: CSSProperties['color'];
    accentColor?: CSSProperties['color'];
    mutedColor?: CSSProperties['color'];
    cardBackground?: CSSProperties['background'];
    cardBorderColor?: CSSProperties['borderColor'];
    showCaption?: boolean;
    showControls?: boolean;
    showCredit?: boolean;
    showNavigation?: boolean;
    showProgress?: boolean;
    showThemeToggle?: boolean;
    credit?: ReactNode;
    renderFace?: (context: SixFacesBoxRenderContext) => ReactNode;
    renderPanel?: (context: SixFacesBoxRenderContext) => ReactNode;
    respectReducedMotion?: boolean;
    onActiveIndexChange?: (index: number, item: NormalizedSixFacesBoxItem) => void;
    ref?: Ref<HTMLElement>;
};
export declare const SixFacesBox: ({ ariaLabel, background, cardBackground, cardBorderColor, className, color, accentColor, credit, cubeSize, defaultTheme, height, items, mutedColor, onActiveIndexChange, onThemeChange, perspective, ref, renderFace, renderPanel, respectReducedMotion, showCaption, showControls, showCredit, showNavigation, showProgress, showThemeToggle, style, theme, ...props }: SixFacesBoxProps) => import("react/jsx-runtime").JSX.Element;