import { ChipProps, SxProps } from '@mui/material';
import { ReactNode } from 'react';
export interface TimeLineCollapseItems {
    title?: string | null;
    subtitle?: string | null;
    file?: string | string[] | null | {
        src?: string;
        srcThumb?: string;
        fileName?: string;
    } | {
        src?: string;
        srcThumb?: string;
        fileName?: string;
    }[];
    icon?: ReactNode;
    onClick?(): void;
    tag?: {
        label?: string | null;
        color?: ChipProps["color"];
    };
}
export interface TimeLineItem {
    /**
     * Callback to execute when the event is clicked.
     */
    onClick?(): void;
    /**
     * Custom collapse to display below the event.
     */
    Collapse?: ReactNode;
    /**
     * Custom icon to display on the left of the event.
     */
    Icon?: ReactNode;
    /**
     * Custom action to display on the right of the event.
     */
    Action?: ReactNode;
    /**
     * Custom footer to display below the event.
     */
    Footer?: ReactNode;
    /**
     * Unique key of the event.
     */
    key?: string;
    /**
     * Title of the event.
     */
    title?: string;
    /**
     * Subtitle of the event.
     */
    subtitle?: ReactNode;
    /**
     * If true, the event will be displayed as active.
     */
    active?: boolean;
    /**
     * Collapse items are displayed in a list below the main event.
     */
    collapseItems?: TimeLineCollapseItems[];
    /**
     * If true, the collapse will be open by default.
     */
    collapseDefaultOpen?: boolean;
    /**
     * Tag to display between the title and the subtitle.
     */
    tag?: {
        /**
         * Label of the tag.
         */
        label?: string | null;
        /**
         * Color of the tag.
         */
        color?: ChipProps["color"];
    };
}
export interface TimeLineProps {
    /**
     * Custom style for the container.
     */
    containerStyle?: SxProps;
    /**
     * If true, the skeleton loading will be displayed.
     */
    isLoading?: boolean;
    /**
     * Message to display when there are no items.
     */
    emptyMessage?: string;
    /**
     * Variant of the timeline.
     * hover: Timeline action will be displayed when hovering the event.
     * @default default
     */
    variant?: "default" | "hover";
    /**
     * List of items to display in the timeline.
     */
    items?: TimeLineItem[];
    /**
     * Data attributes for testing purposes.
     */
    "data-test"?: string;
    /**
     * Data attributes for testing purposes.
     */
    "data-testid"?: string;
}
declare const TimeLine: ({ items, isLoading, emptyMessage, containerStyle, variant, "data-test": dataTest, "data-testid": dataTestId, }: TimeLineProps) => import("@emotion/react/jsx-runtime").JSX.Element;
export default TimeLine;