import { Refable, type Styleable } from "@trackunit/react-components";
import { FormGroupProps } from "../FormGroup/FormGroup";
import { TimeRangeProps } from "../TimeRange/TimeRange";
type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedProps, Refable<HTMLDivElement>, Styleable {
    /**
     * If a value is set, the field is rendered in its invalid state.
     */
    errorMessage?: string;
}
/**
 * TimeRangeField is a form-ready time range input that wraps a `TimeRange` selector inside a `FormGroup`.
 * It provides a labeled pair of start/end time inputs with support for tooltips, help text, and validation error messages.
 *
 * ### When to use
 * Use TimeRangeField when you need a labeled time range input inside a form — for example, selecting working hours, shift times, or scheduling windows.
 *
 * ### When not to use
 * Do not use TimeRangeField for date ranges — use `DayRangePicker`.
 * Do not use it outside a form context where you only need a bare time range input — use `TimeRange` directly instead.
 *
 * @example Basic time range field with a label
 * ```tsx
 * import { TimeRangeField } from "@trackunit/react-form-components";
 *
 * const ShiftTimeInput = () => (
 *   <TimeRangeField
 *     label="Shift hours"
 *     range={{ timeFrom: "08:00", timeTo: "16:00" }}
 *     onChange={(range) => console.log(range)}
 *   />
 * );
 * ```
 * @example Time range field with validation error
 * ```tsx
 * import { TimeRangeField } from "@trackunit/react-form-components";
 *
 * const ValidatedShiftInput = () => (
 *   <TimeRangeField
 *     label="Working hours"
 *     range={{ timeFrom: "18:00", timeTo: "06:00" }}
 *     errorMessage="End time must be after start time."
 *     onChange={(range) => console.log(range)}
 *   />
 * );
 * ```
 * @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
 * @returns {ReactElement} TimeRangeField component
 */
export declare const TimeRangeField: ({ className, "data-testid": dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, style, ref, ...rest }: TimeRangeFieldProps) => import("react/jsx-runtime").JSX.Element;
export {};