import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
import { ReactNode } from "react";
export interface TimeRangeInput {
    /**
     * The starting time of the range.
     */
    timeFrom: string;
    /**
     * The ending time of the range.
     */
    timeTo: string;
}
export interface TimeRangeProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
    /**
     * Unique element identifier.
     */
    id?: string;
    /**
     * Custom node to separate start time input and end time input.
     *
     * @default <div data-testid={`${dataTestId}-separator`}>-</div>
     */
    children?: ReactNode;
    /**
     * Sets start time of the range and end time of the range.
     *
     * @default { timeFrom: "", timeTo: "" }
     */
    range?: TimeRangeInput;
    /**
     * Disables time selectors.
     */
    disabled?: boolean;
    /**
     * If true the range is rendered in its invalid state.
     */
    isInvalid?: boolean;
    /**
     * Called when time range changes.
     *
     * @param {TimeRangeInput} range - Selected time range.
     * @returns {void}
     */
    onChange: (range: TimeRangeInput) => void;
}
/**
 * TimeRange renders a pair of native `<input type="time">` fields for selecting a start and end time.
 * It provides a controlled time range with `onChange` callback and supports custom separators, disabled state, and validation styling.
 *
 * ### When to use
 * Use TimeRange for bare time range inputs inside custom layouts or composed components (e.g., inside Schedule rows).
 *
 * ### When not to use
 * Do not use TimeRange directly in forms that need a label, help text, or validation — use `TimeRangeField` instead.
 *
 * @example Basic time range input
 * ```tsx
 * import { TimeRange } from "@trackunit/react-form-components";
 *
 * const ShiftPicker = () => (
 *   <TimeRange
 *     range={{ timeFrom: "09:00", timeTo: "17:00" }}
 *     onChange={(range) => console.log(range)}
 *   />
 * );
 * ```
 * @param {TimeRangeProps} props - The props for the TimeRange component
 * @returns {ReactElement} TimeRange component
 */
export declare const TimeRange: ({ id, className, "data-testid": dataTestId, children, range, onChange, disabled, isInvalid, style, ref, }: TimeRangeProps) => import("react/jsx-runtime").JSX.Element;
export declare const DEFAULT_TIME = "12:00";