import * as stylex from '@stylexjs/stylex';
import { type InputStatus, type FieldStatusVariant } from '../Field';
import { type ISODateString, type DayOfWeek, type DayOfWeekName } from '../Calendar';
import type { TimestampFormat } from '../Timestamp';
declare const sizeStyles: Readonly<{
    readonly sm: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "28px">;
        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 180>;
    }>;
    readonly md: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 180>;
    }>;
    readonly lg: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "36px">;
        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 180>;
    }>;
}>;
export type DateInputSize = keyof typeof sizeStyles;
/**
 * Named display formats for a committed date value. These are the date-only
 * members of Timestamp's `format` vocabulary — reused verbatim (via
 * `Extract`) so the same literal renders the same date shape in both
 * `Timestamp` and `DateInput`:
 * - `'date'`: locale short-month date, e.g. "Mar 21, 2026"
 * - `'date_long'`: locale long-month date, e.g. "March 21, 2026" (the default)
 * - `'date_weekday'`: short weekday + date, e.g. "Wed, Mar 21, 2026"
 * - `'system_date'`: ISO 8601 calendar date, e.g. "2026-03-21"
 *
 * Because `DateInputFormat` is `Extract`ed from `TimestampFormat`, the two
 * types stay in compile-time lockstep: renaming or removing one of these
 * members from `TimestampFormat` breaks this type at build time.
 */
export type DateInputFormat = Extract<TimestampFormat, 'date' | 'date_long' | 'date_weekday' | 'system_date'>;
export type { InputStatus as DateInputStatus, InputStatusType as DateInputStatusType, } from '../Field';
import type { BaseProps } from '../BaseProps';
import type { SizeValue } from '../utils/types';
export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLInputElement>;
    /**
     * Label text for the input (required for accessibility).
     */
    label: string;
    /**
     * Whether to visually hide the label (still accessible to screen readers).
     * @default false
     */
    isLabelHidden?: boolean;
    /**
     * Description text displayed between the label and input.
     */
    description?: string;
    /**
     * Whether the field is optional. Mutually exclusive with isRequired.
     * @default false
     */
    isOptional?: boolean;
    /**
     * Whether the field is required. Mutually exclusive with isOptional.
     * @default false
     */
    isRequired?: boolean;
    /**
     * Whether the input is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Explains why the input is disabled. When set together with
     * `isDisabled`, the input shows a tooltip with this text on hover and
     * keyboard focus, and the field stays focusable (via `aria-disabled`)
     * so the reason is discoverable by keyboard and assistive technology.
     * Typing and calendar activation stay blocked.
     *
     * Use this instead of wrapping a disabled input in `Tooltip` — disabled
     * controls don't emit the pointer events an external tooltip needs.
     *
     * @example
     * ```
     * <DateInput
     *   label="Event date"
     *   value={date}
     *   onChange={setDate}
     *   isDisabled
     *   disabledMessage="You need the Editor role to change this"
     * />
     * ```
     */
    disabledMessage?: string;
    /**
     * The selected date in ISO format (YYYY-MM-DD).
     */
    value?: ISODateString;
    /**
     * Callback fired when the date changes.
     * Called with undefined when input is cleared.
     */
    onChange?: (value: ISODateString | undefined) => void;
    /**
     * Async action on change. Fires after onChange.
     */
    changeAction?: (value: ISODateString | undefined) => void | Promise<void>;
    /**
     * Whether the input is in a loading state.
     * @default false
     */
    isLoading?: boolean;
    /**
     * Minimum selectable date in ISO format.
     */
    min?: ISODateString;
    /**
     * Maximum selectable date in ISO format.
     */
    max?: ISODateString;
    /**
     * Custom date constraint functions. Date is disabled if ANY function returns false.
     */
    dateConstraints?: ReadonlyArray<(date: Date) => boolean>;
    /**
     * Placeholder text shown when no date is selected.
     * @default "Select a date"
     */
    placeholder?: string;
    /**
     * The size of the input.
     * - 'sm': Compact size (18px height)
     * - 'md': Default size (26px height)
     * @default 'md'
     */
    size?: DateInputSize;
    /**
     * Status indicator for the input.
     * When set, displays a colored border and status icon.
     * If message is provided, displays below the input.
     */
    status?: InputStatus;
    /**
     * How the status message is placed relative to the input.
     * - 'attached': message overlaps directly below the input (bordered treatment)
     * - 'detached': message floats below as a separate element with spacing
     * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
     * @default 'attached'
     */
    statusVariant?: FieldStatusVariant;
    /**
     * Width of the field. Numbers are treated as pixels, strings are used as-is
     * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
     * stay aligned, unlike setting width via `xstyle`/`className`/`style`.
     */
    width?: SizeValue;
    /**
     * Tooltip text to display in an info icon at the end of the label.
     */
    labelTooltip?: string;
    /**
     * Whether to show a clear button when a date is set.
     * When clicked, resets the value to undefined and returns focus to the input.
     * @default false
     */
    hasClear?: boolean;
    /**
     * Number of months to display in the calendar popover.
     * @default 1
     */
    numberOfMonths?: 1 | 2;
    /**
     * First day of week in the calendar popover. Accepts a number
     * (0 = Sunday … 6 = Saturday) or a three-letter day name ('sun'–'sat',
     * case-insensitive).
     * @default 0
     */
    weekStartsOn?: DayOfWeek | DayOfWeekName;
    /**
     * How the committed date value is displayed in the text field. Accepts a
     * named format reused from `Timestamp`'s `format` vocabulary (so the same
     * literal renders the same date shape in both components) or a function that
     * maps the ISO value to a custom display string.
     *
     * - `'date_long'` (default): long-month date, e.g. "March 21, 2026"
     * - `'date'`: short-month date, e.g. "Mar 21, 2026"
     * - `'date_weekday'`: short weekday + date, e.g. "Wed, Mar 21, 2026"
     * - `'system_date'`: ISO 8601 calendar date, e.g. "2026-03-21"
     * - `(value: ISODateString) => string`: fully custom display string
     *
     * Formatting applies only to the committed value — never to text the user is
     * actively typing. A custom function's output that `parseDateInput` cannot
     * read back can't be re-committed after an edit; external `value` changes
     * always recompute the display from the ISO value.
     *
     * @default 'date_long'
     * @example
     * ```
     * <DateInput label="Ship date" value={date} onChange={setDate} format="date" />
     * <DateInput
     *   label="Ship date"
     *   value={date}
     *   onChange={setDate}
     *   format={iso => new Date(iso + 'T00:00').toDateString()}
     * />
     * ```
     */
    format?: DateInputFormat | ((value: ISODateString) => string);
}
/**
 * A date picker component combining a text input with a calendar popover.
 *
 * @example
 * ```
 * <DateInput
 *   label="Event date"
 *   value={date}
 *   onChange={setDate}
 * />
 * ```
 */
export declare function DateInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, hasClear, numberOfMonths, weekStartsOn, format, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
export declare namespace DateInput {
    var displayName: string;
}
//# sourceMappingURL=DateInput.d.ts.map