import React from "react";
import type { AkselColor } from "../../types/index.js";
import type { TimelineComponentTypes } from "../utils/types.internal.js";
export interface TimelinePeriodProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Period start date.
     */
    start: Date;
    /**
     * Period end date.
     */
    end: Date;
    /**
     * Icon for easier visual identification.
     */
    icon?: React.ReactNode;
    /**
     * Period status.
     * @default "neutral"
     */
    status?: "success" | "warning" | "danger" | "info" | "neutral";
    /**
     * Overrides color set by status.
     *
     * @see 🏷️ {@link AkselColor}
     * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
     */
    "data-color"?: AkselColor;
    /**
     * Status label for screen-readers
     * e.g "Sykemeldt", "foreldrepermisjon"
     */
    statusLabel?: string;
    /**
     * Callback when selecting a period.
     */
    onSelectPeriod?: (event: React.MouseEvent<Element> | React.KeyboardEvent<Element>) => void;
    /**
     * Content displayed in Popover on click.
     */
    children?: React.ReactNode;
    /**
     * Visual active inidcation on period.
     *
     * Make sure only one period is active at a time.
     */
    isActive?: boolean;
    /**
     * Default orientation of popover
     * @default "top"
     */
    placement?: "top" | "bottom";
}
export interface PeriodType extends React.ForwardRefExoticComponent<TimelinePeriodProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> {
    componentType: TimelineComponentTypes;
}
export declare const Period: PeriodType;
export default Period;