import * as react from 'react';
import { HTMLAttributes, ReactNode } from 'react';
import { Status } from './status-dot.js';

interface TimelineItemData {
    id: string;
    /** Timestamp label */
    time: string;
    /** Title/headline of the event. Accepts a string or rich content (e.g. a bolded actor name inline with plain text). */
    title: ReactNode;
    /** Description */
    description?: string;
    /** Status indicator dot */
    status?: Status;
    /** Optional icon to replace dot */
    icon?: ReactNode;
    /** Optional metadata badges */
    meta?: string[];
}
interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
    /** Timeline events */
    items: TimelineItemData[];
    /** Whether items are active (show animated dot pulse) */
    active?: boolean;
    /** Whether the timeline is loading */
    loading?: boolean;
    /**
     * `'connected'` (default) draws a vertical line between dots and shows the timestamp
     * beside the title — a chronological trail. `'flat'` drops the connector, divides rows
     * with a hairline border, and puts the timestamp on its own line below the title —
     * suited to activity/audit logs.
     */
    variant?: 'connected' | 'flat';
}
declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLDivElement>>;

export { Timeline, type TimelineItemData, type TimelineProps };