/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { Navigation } from '@progress/kendo-react-common';
import { EventDataProps } from './TimelineCard.js';
import * as React from 'react';
export type { EventDataProps };
export interface TimelineEventProps {
    /**
     * Specifies if the TimelineEvent card is default collapsed.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Timeline events={[{ opened: true, title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    opened?: boolean;
    /**
     * Specifies the text that is rendered as TimelineEvent card body.
     *
     * @example
     * ```jsx
     * <Timeline events={[{ description: 'Event details', title: 'Event 1', date: new Date() }]} />
     * ```
     */
    description: string;
    /**
     * Represents the TimelineEvent point on the axis.
     *
     * @example
     * ```jsx
     * <Timeline events={[{ date: new Date(), title: 'Event 1', description: 'Details' }]} />
     * ```
     */
    date: Date;
    /**
     * Specifies the text that is rendered as the TimelineEvent card title.
     *
     * @example
     * ```jsx
     * <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    title: string;
    /**
     * Specifies the text that is rendered under the `title`.
     *
     * @example
     * ```jsx
     * <Timeline events={[{ subtitle: 'Subtitle', title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    subtitle?: string;
    /**
     * Specifies the images that are rendered under the `description`.
     *
     * @example
     * ```jsx
     * <Timeline events={[{ images: [{ src: 'image.jpg', alt: 'Image' }], title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    images?: {
        src: string;
        alt?: string;
    }[];
    /**
     * Specifies the corresponding links that are rendered under the `images`.
     *
     * @example
     * ```jsx
     * <Timeline events={[{ actions: [{ text: 'Learn More', url: 'https://example.com' }], title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    actions?: {
        text: string;
        url: string;
    }[];
    /**
     * @hidden
     */
    yearFlag?: number;
}
export interface TimelineProps {
    /**
     * The collection of TimelineEvents to be displayed in the Timeline.
     *
     * @example
     * ```jsx
     * <Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    events: TimelineEventProps[];
    /**
     * Specifies the CSS class names which are set to the Timeline.
     *
     * @example
     * ```jsx
     * <Timeline className="custom-class" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    className?: string;
    /**
     * Specifies whether the TimelineEvent cards can be expanded or collapsed.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Timeline collapsibleEvents={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    collapsibleEvents?: boolean;
    /**
     * Switches the Timeline to horizontal mode.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Timeline horizontal={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    horizontal?: boolean;
    /**
     * The date format for displaying the TimelineEvent date.
     *
     * @default MMM dd, yyyy
     *
     * @example
     * ```jsx
     * <Timeline dateFormat="dd/MM/yyyy" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    dateFormat?: string;
    /**
     * Renders TimelineEvents alternatingly on both sides of the axis.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Timeline alterMode={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    alterMode?: boolean;
    /**
     * Specifies the time for sliding to the next TimelineEvent in horizontal mode and collapsing the TimelineEvent in vertical mode.
     * The default value are:
     * - `300ms` for horizontal
     * - `400ms` for vertical
     *
     * @example
     * ```jsx
     * <Timeline transitionDuration={500} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    transitionDuration?: number;
    /**
     * Enables keyboard navigation for the Timeline.
     *
     * @default false
     *
     * @example
     * ```jsx
     * <Timeline navigatable={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    navigatable?: boolean;
    /**
     * Fires when a TimelineEvent card is toggled.
     *
     * @example
     * ```jsx
     * <Timeline onChange={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    onChange?: (event: EventDataProps) => void;
    /**
     * Fires when a TimelineEvent card action is clicked.
     *
     * @example
     * ```jsx
     * <Timeline onActionClick={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />
     * ```
     */
    onActionClick?: (event: EventDataProps) => void;
}
/**
 * @hidden
 */
export interface TimelineDirectionsProps {
    eventsData: TimelineEventProps[];
    dateFormat?: string;
    transitionDuration?: number;
    navigatable?: boolean;
    navigation?: React.MutableRefObject<Navigation>;
    onActionClick?: (event: EventDataProps) => void;
}
export declare const Timeline: React.FunctionComponent<TimelineProps>;