import './calendar/calendar';
import { Cre8ElementInternals } from '../contexts/form-internals-context';
import { Cre8Field } from '../field/field';
/**
 * The Date Picker component renders a form group with label, control, help text and validation styling much
 * like the Field component but exclusively for type=date.
 * Cre8DatePicker inherits the Cre8Field component.
 */
export declare class Cre8DatePicker extends Cre8Field {
    field: HTMLInputElement;
    type: 'text' | 'email' | 'number' | 'url' | 'tel' | 'password' | 'date';
    _internals: Cre8ElementInternals;
    /**
     * The type of the form field.
     * For Date Picker, this is always 'date'.
     */
    static styles: import("lit").CSSResult[];
    showCalendar: boolean;
    /**
     * Quick Shortcuts Variant
     * @attr {boolean}
     *
     */
    hasShortcuts?: boolean;
    label: string;
    /**
     * Handle Date On Input
     * 1) Set the input's value equal to the event.target.value when the input is changed.
     * 2) Set the internal form value of the input to the updated value
     */
    private handleDateOnInput;
    private handleCalendarSelect;
    private handleOutsideClick;
    private toggleCalendar;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-date-picker': Cre8DatePicker;
    }
}
export default Cre8DatePicker;
//# sourceMappingURL=date-picker.d.ts.map