@payfit/unity-components/dist/esm/components/timeline/Timeline.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { ReactNode } from 'react';
import { timeline } from './Timeline.variants.js';
export type TimelineProps = {
    /**
     * Accessible label for the timeline (required for screen readers)
     * @example "Order progress" | "Setup steps" | "Declaration timeline"
     */
    'aria-label': string;
    /**
     * Custom progress description for screen readers (visually hidden)
     * Optional. Provides context about overall progress in the timeline.
     * @example "Step 2 of 4, 1 completed" | "3 out of 5 steps completed"
     */
    customProgressLabel?: string;
    /**
     * Orientation of the timeline
     * @default 'vertical'
     */
    orientation?: VariantProps<typeof timeline>['orientation'];
    /**
     * Type of timeline markers
     * @default 'default'
     */
    type?: 'default' | 'numbered';
    /**
     * Additional CSS classes
     */
    className?: string;
    /**
     * Timeline steps
     */
    children?: ReactNode;
};
/**
 * Timeline component displays chronological events in vertical or horizontal orientation
 * @example
 * ```tsx
 * <Timeline orientation="vertical" type="numbered">
 *   <TimelineStep state="completed" stepNumber={1}>
 *     <TimelineStepHeader title="Step 1" subtitle="January 15, 2024" />
 *     <TimelineStepDescription>
 *       Description of the step
 *     </TimelineStepDescription>
 *   </TimelineStep>
 * </Timeline>
 * ```
 */
export declare const Timeline: import('react').ForwardRefExoticComponent<TimelineProps & import('react').RefAttributes<HTMLOListElement | HTMLUListElement>>;