import { TimeRangeValue } from '@perses-dev/spec';
import { ReactElement } from 'react';
import { TimeZoneOption } from '../model/timeZoneOption';
import { TimeOption } from '../model';
interface TimeRangeSelectorProps {
    /**
     * The current value of the time range.
     */
    value: TimeRangeValue;
    /**
     * The list of time options to display in the dropdown.
     * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.
     */
    timeOptions: TimeOption[];
    /**
     * The callback to call when the time range changes.
     */
    onChange: (value: TimeRangeValue) => void;
    /**
     * Custom line height for the select component.
     */
    height?: string;
    /**
     * Whether to show the custom time range option.
     * Defaults to true.
     */
    showCustomTimeRange?: boolean;
    /** Optional explicit timezone and change handler to enable changing tz from the selector */
    timeZone?: string;
    timeZoneOptions?: TimeZoneOption[];
    onTimeZoneChange?: (timeZone: TimeZoneOption) => void;
}
/**
 * Date & time selection component to customize what data renders on dashboard.
 * This includes relative shortcuts and the ability to pick absolute start and end times.
 * @param props
 * @constructor
 */
export declare function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange, timeZone: timeZoneProp, timeZoneOptions, onTimeZoneChange, }: TimeRangeSelectorProps): ReactElement;
export {};
//# sourceMappingURL=TimeRangeSelector.d.ts.map