import { type ReactElement } from "react";
import { FormGroupProps } from "../FormGroup/FormGroup";
import { DateBaseInputProps } from "./DateBaseInput/DateBaseInput";
type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProps {
    /**
     * If a value is set, the field is rendered in its invalid state.
     */
    errorMessage?: string;
}
/**
 * The date field component is used for entering date values with a calendar picker (same UI as DayPicker).
 *
 * ### When to use
 * Use DateField for selecting calendar dates such as birthdates, deadlines, or scheduling.
 *
 * ### When not to use
 * Do not use DateField for non-serialized dates or free-form date text input. Use TextField instead.
 *
 * @example Basic date field
 * ```tsx
 * import { DateField } from "@trackunit/react-form-components";
 * import { useState } from "react";
 *
 * const MyForm = () => {
 *   const [date, setDate] = useState("");
 *
 *   return (
 *     <DateField
 *       label="Start Date"
 *       value={date}
 *       onChange={(e) => setDate(e.target.value)}
 *     />
 *   );
 * };
 * ```
 * @example Date field with constraints
 * ```tsx
 * import { DateField } from "@trackunit/react-form-components";
 * import { useState } from "react";
 *
 * const BookingForm = () => {
 *   const [checkIn, setCheckIn] = useState("");
 *   const today = new Date().toISOString().split("T")[0];
 *
 *   return (
 *     <DateField
 *       label="Check-in Date"
 *       value={checkIn}
 *       onChange={(e) => setCheckIn(e.target.value)}
 *       min={today}
 *       helpText="Select a date from today onwards"
 *       required
 *     />
 *   );
 * };
 * ```
 * @example Server-side validation when the calendar popover closes
 * ```tsx
 * import { DateField } from "@trackunit/react-form-components";
 *
 * const ValidatedField = () => (
 *   <DateField
 *     label="Start date"
 *     onChange={(e) => setLocalValue(e.target.value)}
 *     onPickerClose={(e, reason) => {
 *       if (reason === "cancel") return;
 *       validateOnServer(e.target.value);
 *     }}
 *   />
 * );
 * ```
 * @example Open the picker automatically when the field is focused (e.g. via Tab)
 * ```tsx
 * import { DateField } from "@trackunit/react-form-components";
 *
 * const QuickPickField = () => (
 *   <DateField label="Start date" openOnFocus />
 * );
 * ```
 */
export declare const DateField: {
    ({ label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, "data-testid": dataTestId, ref, required, ...rest }: DateFieldProps): ReactElement;
    displayName: string;
};
export {};