/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { DateInputFormatPlaceholder } from '../../dateinput/models/format-placeholder';
import { DateInputsPopupSettings } from '../../PopupSettings';
import { CalendarProps } from '../../calendar/components/Calendar.js';
import { PopupProps } from '@progress/kendo-react-popup';
import { DateInputProps, MultiViewCalendarProps } from '../../index.js';
import { DateFormatOptions } from '@progress/kendo-react-intl';
import { ToggleButtonProps } from '../ToggleButton.js';
import * as React from 'react';
/**
 * @hidden
 */
export interface DatePickerSettings {
    /**
     * Allows you to customize or replace the default Toggle button rendered by DatePicker.
     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#toc-customizing-the-toggle-button)).
     * Example usage of the `toggleButton` property:
     * ```jsx
     * <DatePicker toggleButton={CustomToggleButton} />
     * ```
     */
    toggleButton?: React.ComponentType<ToggleButtonProps>;
    /**
     * Allows you to customize or replace the default Calendar rendered by DatePicker.
     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#toc-customizing-the-calendar)).
     * Example usage of the `calendar` property:
     * ```jsx
     * <DatePicker calendar={CustomCalendar} />
     * ```
     */
    calendar?: React.ComponentType<CalendarProps<any>> | React.ComponentType<MultiViewCalendarProps<any>>;
    /**
     * Allows you to customize or replace the default Popup rendered by DatePicker.
     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#toc-customizing-the-popup)).
     * Example usage of the `popup` property:
     * ```jsx
     * <DatePicker popup={CustomPopup} />
     * ```
     */
    popup?: React.ComponentType<PopupProps>;
    /**
     * Allows you to customize or replace the default DateInput rendered by DatePicker.
     * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#toc-customizing-the-dateinput)).
     * Example usage of the `dateInput` property:
     * ```jsx
     * <DatePicker dateInput={CustomDateInput} />
     * ```
     */
    dateInput?: React.ComponentType<DateInputProps<any>>;
    /**
     * Sets the `className` of the DatePicker.
     * Example usage of the `className` property:
     * ```jsx
     * <DatePicker className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets the default state of the DatePicker upon render ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/default-value)).
     * Example usage of the `defaultShow` property:
     * ```jsx
     * <DatePicker defaultShow={true} />
     * ```
     */
    defaultShow?: boolean;
    /**
     * Determines whether the DatePicker is disabled ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/disabled-state)).
     * Example usage of the `disabled` property:
     * ```jsx
     * <DatePicker disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Specifies the focused date of the DatePicker ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/date)).
     * Example usage of the `focusedDate` property:
     * ```jsx
     * <DatePicker focusedDate={new Date()} />
     * ```
     */
    focusedDate?: Date;
    /**
     * Specifies the date format that is used to display the input value ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/formats)).
     * Example usage of the `format` property:
     * ```jsx
     * <DatePicker format="MM/dd/yyyy" />
     * ```
     */
    format?: string | DateFormatOptions;
    /**
     * Defines the descriptions of the format sections in the input field ([more information and examples](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/placeholders)).
     * Example usage of the `formatPlaceholder` property:
     * ```jsx
     * <DatePicker formatPlaceholder="Enter date" />
     * ```
     */
    formatPlaceholder?: DateInputFormatPlaceholder;
    /**
     * Specifies the `id` of the DatePicker.
     * Example usage of the `id` property:
     * ```jsx
     * <DatePicker id="datepicker-id" />
     * ```
     */
    id?: string;
    /**
     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
     * For example these elements could contain error or hint message.
     * Example usage of the `ariaDescribedBy` property:
     * ```jsx
     * <DatePicker ariaDescribedBy="description-id" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaDescribedBy?: string;
    /**
     * Identifies the element(s) which will label the component.
     * Example usage of the `ariaLabelledBy` property:
     * ```jsx
     * <DatePicker ariaLabelledBy="label-id" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabelledBy?: string;
    /**
     * The accessible label of the component.
     * Example usage of the `ariaLabel` property:
     * ```jsx
     * <DatePicker ariaLabel="Date Picker" />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabel?: string;
    /**
     * Specifies the greatest valid date ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/date-ranges)).
     * Example usage of the `max` property:
     * ```jsx
     * <DatePicker max={new Date(2099, 11, 31)} />
     * ```
     */
    max?: Date;
    /**
     * Specifies the smallest valid date ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/date-ranges)).
     * Example usage of the `min` property:
     * ```jsx
     * <DatePicker min={new Date(1900, 0, 1)} />
     * ```
     */
    min?: Date;
    /**
     * Specifies the `name` property of the `input` DOM element.
     * Example usage of the `name` property:
     * ```jsx
     * <DatePicker name="datepicker-name" />
     * ```
     */
    name?: string;
    /**
     * Fires each time any of the DatePicker elements gets blurred.
     * Example usage of the `onBlur` property:
     * ```jsx
     * <DatePicker onBlur={(event) => console.log('Blur event:', event)} />
     * ```
     */
    onBlur?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
    /**
     * Fires each time the user focuses any of the DatePicker elements.
     * Example usage of the `onFocus` property:
     * ```jsx
     * <DatePicker onFocus={(event) => console.log('Focus event:', event)} />
     * ```
     */
    onFocus?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
    /**
     * Configures the popup options of the DatePicker.
     *
     * The available options are:
     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
     * - `appendTo`: &mdash; Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
     * Example usage of the `popupSettings` property:
     * ```jsx
     * <DatePicker popupSettings={{ animate: true, popupClass: 'custom-popup' }} />
     * ```
     */
    popupSettings?: DateInputsPopupSettings;
    /**
     * Specifies if the calendar will be displayed ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/controlled-state#toc-controlling-the-popup-state)).
     * Example usage of the `show` property:
     * ```jsx
     * <DatePicker show={true} />
     * ```
     */
    show?: boolean;
    /**
     * Sets the `tabIndex` property of the DatePicker.
     * Example usage of the `tabIndex` property:
     * ```jsx
     * <DatePicker tabIndex={0} />
     * ```
     *
     * @remarks
     * This property is related to accessibility.
     */
    tabIndex?: number;
    /**
     * Sets the title of the `input` element of the DatePicker.
     * Example usage of the `title` property:
     * ```jsx
     * <DatePicker title="Date Picker Title" />
     * ```
     */
    title?: string;
    /**
     * Determines whether to display a week number column in the `month` view of the Calendar ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/week-num-column)).
     * Example usage of the `weekNumber` property:
     * ```jsx
     * <DatePicker weekNumber={true} />
     * ```
     */
    weekNumber?: boolean;
    /**
     * Specifies the width of the DatePicker.
     * Example usage of the `width` property:
     * ```jsx
     * <DatePicker width="300px" />
     * ```
     */
    width?: number | string;
    /**
     * Renders a floating label for the DatePicker.
     * Example usage of the `label` property:
     * ```jsx
     * <DatePicker label="Date Picker Label" />
     * ```
     */
    label?: React.ReactNode;
    /**
     * Specifies the hint the DateInput displays when its value is `null` or there is no partial selection.
     * For more information, refer to the article on
     * [placeholders](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/placeholders).
     * Example usage of the `placeholder` property:
     * ```jsx
     * <DatePicker placeholder="Enter a date" />
     * ```
     */
    placeholder?: string | null;
}