import type { SyntheticEvent, InputHTMLAttributes } from 'react';
import type { FormMessage } from '@instructure/ui-form-field/latest';
import type { OtherHTMLAttributes, Renderable } from '@instructure/shared-types';
import type { Spacing } from '@instructure/emotion';
type DateInputOwnProps = {
    /**
     * Specifies the input label.
     */
    renderLabel: Renderable;
    /**
     * Accessible labels for the calendar button, month navigation buttons, and date picker dialog.
     */
    screenReaderLabels: {
        calendarIcon: string;
        prevMonthButton: string;
        nextMonthButton: string;
        datePickerDialog?: string;
    };
    /**
     * Specifies the input value.
     */
    value?: string;
    /**
     * Placeholder text for the input field. If it's left undefined it will display a hint for the date format (like `DD/MM/YYYY`).
     */
    placeholder?: string;
    /**
     * Callback fired when the input changes.
     */
    onChange?: (event: React.SyntheticEvent, inputValue: string, utcDateString: string) => void;
    /**
     * Callback executed when the input fires a blur event.
     */
    onBlur?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void;
    /**
     * Specifies if interaction with the input is enabled, disabled, or readonly.
     * When "disabled", the input changes visibly to indicate that it cannot
     * receive user interactions. When "readonly" the input still cannot receive
     * user interactions but it keeps the same styles as if it were enabled.
     */
    interaction?: 'enabled' | 'disabled' | 'readonly';
    /**
     * Specifies if the input is required.
     */
    isRequired?: boolean;
    /**
     * Controls whether the input is rendered inline with other elements or if it
     * is rendered as a block level element.
     */
    isInline?: boolean;
    /**
     * Specifies the width of the input.
     */
    width?: string;
    /**
     * Displays informational and error messages, used for input validation,
     * can also display screenreader-only messages.
     * Also changes the border color of the component on success/error.
     * This is automatically set to `invalidDateErrorMessage` when the date is invalid
     */
    messages?: FormMessage[];
    /**
     * The message shown to the user when the date is invalid. If this prop is not set, validation is bypassed.
     * If it's set to an empty string, validation happens and the input border changes to red if validation hasn't passed.
     **/
    invalidDateErrorMessage?: string;
    /**
     * A standard language identifier.
     *
     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales) for
     * more details.
     *
     * This property can also be set via a context property and if both are set
     * then the component property takes precedence over the context property.
     *
     * The web browser's locale will be used if no value is set via a component
     * property or a context property.
     **/
    locale?: string;
    /**
     * A timezone identifier in the format: *Area/Location*
     *
     * See [List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the list
     * of possible options.
     *
     * This property can also be set via a context property and if both are set
     * then the component property takes precedence over the context property.
     *
     * The system timezone will be used if no value is set via a component
     * property or a context property.
     **/
    timezone?: string;
    /**
     * If set, years can be picked from a dropdown.
     * It accepts an object.
     * screenReaderLabel: string // e.g.: i18n("pick a year")
     *
     * onRequestYearChange?:(e: React.MouseEvent,requestedYear: number): void // if set, on year change, only this will be called and no internal change will take place
     *
     * startYear: number // e.g.: 2001, sets the start year of the selectable list
     *
     * endYear: number // e.g.: 2030, sets the end year of the selectable list
     */
    withYearPicker?: {
        screenReaderLabel: string;
        onRequestYearChange?: (e: SyntheticEvent, requestedYear: number) => void;
        startYear: number;
        endYear: number;
    };
    /**
     * By default the date format is determined by the locale but can be changed via this prop to an alternate locale (passing it in as a string) or a custom parser and formatter (both as functions)
     */
    dateFormat?: {
        parser: (input: string) => Date | null;
        formatter: (date: Date) => string;
    } | string;
    /**
     * Callback executed when the input fires a blur event or a date is selected from the picker.
     */
    onRequestValidateDate?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void;
    /**
     * Custom icon for the icon button opening the picker.
     */
    renderCalendarIcon?: Renderable;
    /**
     * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
     */
    margin?: Spacing;
    disabledDates?: string[] | ((isoDateToCheck: string) => boolean);
    /**
     * A function that provides a reference to the inner input element
     */
    inputRef?: (inputElement: HTMLInputElement | null) => void;
};
type DateInputProps = DateInputOwnProps & OtherHTMLAttributes<DateInputOwnProps, InputHTMLAttributes<DateInputOwnProps & Element>>;
export type { DateInputProps };
//# sourceMappingURL=props.d.ts.map