import React from "react";
import dayjs from "dayjs";
import { type UnknownProps } from "../@types/UnknownProps";
export interface TimelineLabelProps {
    formattedDate: string;
}
export type TimelineItemProps<Props extends UnknownProps> = Props & {
    date: string;
    index: number;
};
export interface TimelineProps<Props extends UnknownProps> extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * TimelineProps.datesで指定されたデータをpropsとして受け取り表示するためのコンポーネントを指定します。
     */
    renderItem?: React.ComponentType<TimelineItemProps<Props>>;
    /**
     * 日付と、日付に対応するデータ群を指定します。
     *
     * 昇順でkeyがソートされていることを前提としている点に注意してください。
     *
     * ソート処理が面倒な場合はUI側での処理を検討します。
     *
     * ここで値として指定された配列の型はTimelineProps.itemの引数に用いられます。
     *
     * dateのフォーマットはYYYYMMDDまたはYYYY-MM-DDです。number(ms)には後に対応するかもしれません。
     *
     * Date型を利用したいという強い要望があった場合はMapに切り替えることを検討します。
     *
     */
    dates: Record<string, Props[]>;
    /**
     * 区分ごとのラベルの表記を指定します。
     *
     * @default {year: numeric ,month: numeric, day: numeric}
     */
    format?: "relative" | Intl.DateTimeFormatOptions;
    /**
     * 区分を指定する。原点を中心として両側に、順に指定された区分点を配置していく。
     *
     * 原点のデフォルトは"今日"。
     *
     * 過去から未来へ昇順でソートされていることを前提にしています。
     * ソート処理が難しい場合はUI側での処理を検討します。
     *
     * @default []
     */
    separators?: {
        unit: "day" | "month" | "year" | "week";
        value: number;
    }[];
    /**
     * 基準日を指定する。
     * @default today
     */
    date?: dayjs.ConfigType;
    /**
     * フォーマットされた日付を受け取り、ラベルとして表示するコンポーネントを指定します。
     */
    renderLabel?: (props: TimelineLabelProps) => React.JSX.Element;
}
export declare const Timeline: <E extends UnknownProps>({ renderItem, dates, format, separators, date, renderLabel: Label, ...props }: TimelineProps<E>) => import("@emotion/react/jsx-runtime").JSX.Element | null;