react-day-picker 8.2.1 → 8.3.0

package/dist/index.d.ts

@@ -1,40 +1,1176 @@
-export * from './DayPicker';
-export * from './components/Button';
-export * from './components/Caption';
-export * from './components/CaptionDropdowns';
-export * from './components/CaptionLabel';
-export * from './components/CaptionNavigation';
-export * from './components/Day';
-export * from './components/DayContent';
-export * from './components/Dropdown';
-export * from './components/Footer';
-export * from './components/Head';
-export * from './components/HeadRow';
-export * from './components/IconDropdown';
-export * from './components/IconRight';
-export * from './components/IconLeft';
-export * from './components/Row';
-export * from './components/WeekNumber';
-export * from './hooks/useInput';
-export * from './hooks/useDayRender';
-export * from './hooks/useActiveModifiers';
-export * from './contexts/DayPicker';
-export * from './contexts/Focus';
-export * from './contexts/Navigation';
-export * from './contexts/RootProvider';
-export * from './contexts/SelectMultiple';
-export * from './contexts/SelectRange';
-export * from './contexts/SelectSingle';
-export * from './types/DayPickerBase';
-export * from './types/DayPickerDefault';
-export * from './types/DayPickerMultiple';
-export * from './types/DayPickerRange';
-export * from './types/DayPickerSingle';
-export * from './types/EventHandlers';
-export * from './types/Formatters';
-export * from './types/Labels';
-export * from './types/Matchers';
-export * from './types/Modifiers';
-export * from './types/Styles';
-export * from './contexts/Modifiers/utils/isMatch';
-export * from './contexts/SelectRange/utils/addToRange';
+/// <reference types="react" />
+import { Locale } from "date-fns";
+import React from "react";
+import { ReactNode, HTMLProps } from "react";
+/** Represent the props of the {@link Caption} component. */
+interface CaptionProps {
+    /** The ID for the heading element. Must be the same as the labelled-by in Table. */
+    id?: string;
+    /** The month where the caption is displayed. */
+    displayMonth: Date;
+}
+/**
+ * The layout of the caption:
+ *
+ * - `dropdown`: display dropdowns for choosing the month and the year.
+ * - `buttons`: display previous month / next month buttons.
+ */
+type CaptionLayout = "dropdown" | "buttons";
+/**
+ * Render the caption of a month. The caption has a different layout when
+ * setting the {@link DayPickerBase.captionLayout} prop.
+ */
+declare function Caption(props: CaptionProps): JSX.Element;
+/** The props for the {@link CaptionLabel} component. */
+interface CaptionLabelProps {
+    /** The ID for the heading element. Must be the same as the labelled-by in Table. */
+    id?: string;
+    /** The month where the caption is displayed. */
+    displayMonth: Date;
+}
+/** Render the caption for the displayed month. This component is used when `captionLayout="buttons"`. */
+declare function CaptionLabel(props: CaptionLabelProps): JSX.Element;
+/** Represent the props used by the {@link Day} component. */
+interface DayProps {
+    /** The month where the date is displayed. */
+    displayMonth: Date;
+    /** The date to render. */
+    date: Date;
+}
+/**
+ * The content of a day cell – as a button or span element according to its
+ * modifiers.
+ */
+declare function Day(props: DayProps): JSX.Element;
+/**
+ * A value or a function that matches a specific day.
+ *
+ *
+ * Matchers are passed to DayPicker via {@link DayPickerBase.disabled},
+ * {@link DayPickerBase.hidden]] or [[DayPickerProps.selected} and are used to
+ * determine if a day should get a {@link Modifier}.
+ *
+ * Matchers can be of different types:
+ *
+ * ```
+ * // will always match the day
+ * const booleanMatcher: Matcher = true;
+ *
+ *  // will match the today's date
+ * const dateMatcher: Matcher = new Date();
+ *
+ * // will match the days in the array
+ * const arrayMatcher: Matcher = [new Date(2019, 1, 2);, new Date(2019, 1, 4)];
+ *
+ * // will match days after the 2nd of February 2019
+ * const afterMatcher: DateAfter = { after: new Date(2019, 1, 2); };
+ *  // will match days before the 2nd of February 2019 }
+ * const beforeMatcher: DateBefore = { before: : new Date(2019, 1, 2); };
+ *
+ * // will match Sundays
+ * const dayOfWeekMatcher: DayOfWeek = {
+ *  dayOfWeek: 0
+ * };
+ *
+ * // will match the included days, except the two dates
+ * const intervalMatcher: DateInterval = {
+ *    after: new Date(2019, 1, 2);,
+ *    before: new Date(2019, 1, 5)
+ * };
+ *
+ * // will match the included days, including the two dates
+ * const rangeMatcher: DateRange = {
+ *    from: new Date(2019, 1, 2);,
+ *    to: new Date(2019, 1, 5)
+ * };
+ *
+ * // will match when the function return true
+ * const functionMatcher: Matcher = (day: Date) => {
+ *  return day.getMonth() === 2 // match when month is March
+ * };
+ * ```
+ *
+ * @see {@link isMatch}
+ *
+ * */
+type Matcher = boolean | ((date: Date) => boolean) | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek;
+/** A matcher to match a day falling after the specified date, with the date not included. */
+type DateAfter = {
+    after: Date;
+};
+/** A matcher to match a day falling before the specified date, with the date not included. */
+type DateBefore = {
+    before: Date;
+};
+/** A matcher to match a day falling before and after two dates, where the dates are not included. */
+type DateInterval = {
+    before: Date;
+    after: Date;
+};
+/** A matcher to match a range of dates. The range can be open. Differently from {@link DateInterval}, the dates here are included. */
+type DateRange = {
+    from: Date | undefined;
+    to?: Date | undefined;
+};
+/** A matcher to match a date being one of the specified days of the week (`0-7`, where `0` is Sunday). */
+type DayOfWeek = {
+    dayOfWeek: number[];
+};
+/** Returns true if `matcher` is of type {@link DateInterval}. */
+declare function isDateInterval(matcher: unknown): matcher is DateInterval;
+/** Returns true if `value` is a {@link DateRange} type. */
+declare function isDateRange(value: unknown): value is DateRange;
+/** Returns true if `value` is of type {@link DateAfter}. */
+declare function isDateAfterType(value: unknown): value is DateAfter;
+/** Returns true if `value` is of type {@link DateBefore}. */
+declare function isDateBeforeType(value: unknown): value is DateBefore;
+/** Returns true if `value` is a {@link DayOfWeek} type. */
+declare function isDayOfWeekType(value: unknown): value is DayOfWeek;
+/** A _modifier_ represents different styles or states of a day displayed in the calendar. */
+type Modifier = string;
+/** The modifiers used by DayPicker. */
+type Modifiers = CustomModifiers & InternalModifiers;
+/** The name of the modifiers that are used internally by DayPicker. */
+declare enum InternalModifier {
+    Outside = "outside",
+    /** Name of the modifier applied to the disabled days, using the `disabled` prop. */
+    Disabled = "disabled",
+    /** Name of the modifier applied to the selected days using the `selected` prop). */
+    Selected = "selected",
+    /** Name of the modifier applied to the hidden days using the `hidden` prop). */
+    Hidden = "hidden",
+    /** Name of the modifier applied to the day specified using the `today` prop). */
+    Today = "today",
+    /** The modifier applied to the day starting a selected range, when in range selection mode.  */
+    RangeStart = "range_start",
+    /** The modifier applied to the day ending a selected range, when in range selection mode.  */
+    RangeEnd = "range_end",
+    /** The modifier applied to the days between the start and the end of a selected range, when in range selection mode.  */
+    RangeMiddle = "range_middle"
+}
+/** Map of matchers used for the internal modifiers. */
+type InternalModifiers = Record<InternalModifier, Matcher[]>;
+/**
+ * The modifiers that are matching a day in the calendar. Use the {@link useActiveModifiers} hook to get the modifiers for a day.
+ *
+ * ```
+ * const activeModifiers: ActiveModifiers = {
+ *  selected: true,
+ *  customModifier: true
+ * }
+ * ```
+ *
+ * */
+type ActiveModifiers = Record<Modifier, true> & Partial<Record<InternalModifier, true>>;
+/** The style to apply to each day element matching a modifier. */
+type ModifiersStyles = Record<Modifier, React.CSSProperties> & Partial<Record<InternalModifier, React.CSSProperties>>;
+/** The classnames to assign to each day element matching a modifier. */
+type ModifiersClassNames = Record<Modifier, string> & Partial<Record<InternalModifier, string>>;
+/** The custom modifiers passed to the {@link DayPickerBase.modifiers}. */
+type DayModifiers = Record<Modifier, Matcher | Matcher[]>;
+/**
+ * A map of matchers used as custom modifiers by DayPicker component. This is
+ * the same as {@link DayModifiers]], but it accepts only array of [[Matcher}s.
+ */
+type CustomModifiers = Record<Modifier, Matcher[]>;
+/** Represent the props for the {@link DayContent} component. */
+interface DayContentProps {
+    /** The date representing the day. */
+    date: Date;
+    /** The month where the day is displayed. */
+    displayMonth: Date;
+    /** The active modifiers for the given date. */
+    activeModifiers: ActiveModifiers;
+}
+/** Render the content of the day cell. */
+declare function DayContent(props: DayContentProps): JSX.Element;
+/** The props for the {@link Dropdown} component. */
+interface DropdownProps {
+    /** The name attribute of the element. */
+    name?: string;
+    /** The caption displayed to replace the hidden select. */
+    caption?: React.ReactNode;
+    children?: React.SelectHTMLAttributes<HTMLSelectElement>["children"];
+    className?: string;
+    ["aria-label"]?: string;
+    style?: React.CSSProperties;
+    /** The selected value. */
+    value?: string | number;
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+/**
+ * Render a styled select component – displaying a caption and a custom
+ * drop-down icon.
+ */
+declare function Dropdown(props: DropdownProps): JSX.Element;
+/**
+ * The props for the {@link Row} component.
+ */
+interface RowProps {
+    /** The month where the row is displayed. */
+    displayMonth: Date;
+    /** The number of the week to render. */
+    weekNumber: number;
+    /** The days contained in the week. */
+    dates: Date[];
+}
+/** Render a row in the calendar, with the days and the week number. */
+declare function Row(props: RowProps): JSX.Element;
+/**
+ * The props for the {@link WeekNumber} component.
+ */
+interface WeekNumberProps {
+    /** The number of the week. */
+    number: number;
+    /** The dates in the week. */
+    dates: Date[];
+}
+/**
+ * Render the week number element. If `onWeekNumberClick` is passed to DayPicker, it
+ * renders a button, otherwise a span element.
+ */
+declare function WeekNumber(props: WeekNumberProps): JSX.Element;
+/** The event handler when a day is clicked. */
+type DayClickEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: React.MouseEvent) => void;
+/** The event handler when a day is focused. */
+type DayFocusEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: React.FocusEvent | React.KeyboardEvent) => void;
+/** The event handler when a day gets a keyboard event. */
+type DayKeyboardEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: React.KeyboardEvent) => void;
+/** The event handler when a day gets a mouse event. */
+type DayMouseEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: React.MouseEvent) => void;
+/** The event handler when a month is changed in the calendar. */
+type MonthChangeEventHandler = (month: Date) => void;
+/** The event handler when selecting multiple days. */
+type SelectMultipleEventHandler = (/** The selected days */
+days: Date[] | undefined, /** The day that was clicked triggering the event. */
+selectedDay: Date, /** The day that was clicked */
+activeModifiers: ActiveModifiers, /** The mouse event that triggered this event. */
+e: React.MouseEvent) => void;
+/** The event handler when selecting a range of days. */
+type SelectRangeEventHandler = (/** The current range of the selected days. */
+range: DateRange | undefined, /** The day that was selected (or clicked) triggering the event. */
+selectedDay: Date, /** The modifiers of the selected day. */
+activeModifiers: ActiveModifiers, e: React.MouseEvent) => void;
+/** The event handler when selecting a single day. */
+type SelectSingleEventHandler = (/** The selected day, `undefined` when `required={false}` (default) and the day is clicked again. */
+day: Date | undefined, /** The day that was selected (or clicked) triggering the event. */
+selectedDay: Date, /** The modifiers of the selected day. */
+activeModifiers: ActiveModifiers, e: React.MouseEvent) => void;
+/**The event handler when the week number is clicked. */
+type WeekNumberClickEventHandler = (/** The week number that has been clicked. */
+weekNumber: number, /** The dates in the clicked week. */
+dates: Date[], /** The mouse event that triggered this event. */
+e: React.MouseEvent) => void;
+/** The event handler when a day gets a touch event. */
+type DayTouchEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: React.TouchEvent) => void;
+/** Represents a function to format a date. */
+type DateFormatter = (date: Date, options?: {
+    locale?: Locale;
+}) => React.ReactNode;
+/** Represent a map of formatters used to render localized content. */
+type Formatters = {
+    /** Format the month in the caption when `captionLayout` is `buttons`. */
+    formatCaption: DateFormatter;
+    /** Format the month in the navigation dropdown. */
+    formatMonthCaption: DateFormatter;
+    /** Format the year in the navigation dropdown. */
+    formatYearCaption: DateFormatter;
+    /** Format the day in the day cell. */
+    formatDay: DateFormatter;
+    /** Format the week number. */
+    formatWeekNumber: WeekNumberFormatter;
+    /** Format the week day name in the header */
+    formatWeekdayName: DateFormatter;
+};
+/** Represent a function to format the week number. */
+type WeekNumberFormatter = (weekNumber: number, options?: {
+    locale?: Locale;
+}) => React.ReactNode;
+/** Map of functions to translate ARIA labels for the relative elements. */
+type Labels = {
+    labelMonthDropdown: () => string;
+    labelYearDropdown: () => string;
+    labelNext: NavButtonLabel;
+    labelPrevious: NavButtonLabel;
+    labelDay: DayLabel;
+    labelWeekday: WeekdayLabel;
+    labelWeekNumber: WeekNumberLabel;
+};
+/** Return the ARIA label for the {@link Day} component. */
+type DayLabel = (day: Date, activeModifiers: ActiveModifiers, options?: {
+    locale?: Locale;
+}) => string;
+/** Return the ARIA label for the "next month" / "prev month" buttons in the navigation.*/
+type NavButtonLabel = (month?: Date, options?: {
+    locale?: Locale;
+}) => string;
+/** Return the ARIA label for the Head component.*/
+type WeekdayLabel = (day: Date, options?: {
+    locale?: Locale;
+}) => string;
+/** Return the ARIA label of the week number.*/
+type WeekNumberLabel = (n: number, options?: {
+    locale?: Locale;
+}) => string;
+/** The style (either via class names or via in-line styles) of an element. */
+type StyledElement<T> = {
+    /** The root element. */
+    readonly root: T;
+    /** The root element when `numberOfMonths > 1`. */
+    readonly multiple_months: T;
+    /** The root element when `showWeekNumber={true}`. */
+    readonly with_weeknumber: T;
+    /** The style of an element visually hidden. */
+    readonly vhidden: T;
+    /** The style for resetting the buttons. */
+    readonly button_reset: T;
+    /** The buttons. */
+    readonly button: T;
+    /** The caption (showing the calendar heading and the navigation) */
+    readonly caption: T;
+    /** The caption when at the start of a series of months. */
+    readonly caption_start: T;
+    /** The caption when at the end of a series of months. */
+    readonly caption_end: T;
+    /** The caption when between two months (when `multipleMonths > 2`). */
+    readonly caption_between: T;
+    /** The caption label. */
+    readonly caption_label: T;
+    /** The drop-downs container. */
+    readonly caption_dropdowns: T;
+    /** The drop-down (select) element. */
+    readonly dropdown: T;
+    /** The drop-down to change the month. */
+    readonly dropdown_month: T;
+    /** The drop-down to change the year. */
+    readonly dropdown_year: T;
+    /** The drop-down icon. */
+    readonly dropdown_icon: T;
+    /** The months wrapper. */
+    readonly months: T;
+    /** The table wrapper. */
+    readonly month: T;
+    /** Table containing the monthly calendar. */
+    readonly table: T;
+    /** The table body. */
+    readonly tbody: T;
+    /** The table footer. */
+    readonly tfoot: T;
+    /** The table’s head. */
+    readonly head: T;
+    /** The row in the head. */
+    readonly head_row: T;
+    /** The head cell. */
+    readonly head_cell: T;
+    /** The navigation container. */
+    readonly nav: T;
+    /** The navigation button. */
+    readonly nav_button: T;
+    /** The "previous month" navigation button. */
+    readonly nav_button_previous: T;
+    /** The "next month" navigation button. */
+    readonly nav_button_next: T;
+    /** The icon for the navigation button. */
+    readonly nav_icon: T;
+    /** The table’s row. */
+    readonly row: T;
+    /** The weeknumber displayed in the column. */
+    readonly weeknumber: T;
+    /** The table cell containing the day element. */
+    readonly cell: T;
+    /** The day element: it is a `span` when not interactive, a `button` otherwise. */
+    readonly day: T;
+    /** The day when outside the month. */
+    readonly day_outside: T;
+    /** The day when selected. */
+    readonly day_selected: T;
+    /** The day when disabled. */
+    readonly day_disabled: T;
+    /** The day when hidden. */
+    readonly day_hidden: T;
+    /** The day when at the start of a selected range. */
+    readonly day_range_start: T;
+    /** The day when at the end of a selected range. */
+    readonly day_range_end: T;
+    /** The day in the middle of a selected range: it does not include the "from" and the "to" days. */
+    readonly day_range_middle: T;
+    /** The day when today. */
+    readonly day_today: T;
+};
+/** These elements must not be in the `styles` or `classNames` records as they are styled via the `modifiersStyles` or `modifiersClassNames` pop */
+type InternalModifiersElement = "day_outside" | "day_selected" | "day_disabled" | "day_hidden" | "day_range_start" | "day_range_end" | "day_range_middle" | "day_today";
+/** The class names of each element. */
+type ClassNames = Partial<StyledElement<string>>;
+/**
+ * The inline-styles of each styled element, to use with the `styles` prop. Day
+ * modifiers, such as `today` or `hidden`, should be styled using the
+ * `modifiersStyles` prop.
+ */
+type Styles = Partial<Omit<StyledElement<React.CSSProperties>, InternalModifiersElement>>;
+/** Props of a component that can be styled via classNames or inline-styles. */
+type StyledComponent = {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+};
+/**
+ * Selection modes supported by DayPicker.
+ *
+ * - `single`: use DayPicker to select single days.
+ * - `multiple`: allow selecting multiple days.
+ * - `range`: use DayPicker to select a range of days
+ * - `default`: disable the built-in selection behavior. Customize what is selected by using {@link DayPickerBase.onDayClick}.
+ */
+type DaySelectionMode = "single" | "multiple" | "range" | "default";
+/**
+ * The base props for the {@link DayPicker} component and the {@link DayPickerContext}.
+ */
+interface DayPickerBase {
+    /** The CSS class to add to the container element. To change the name of the class instead, use `classNames.root`. */
+    className?: string;
+    /**
+     * Change the class names of the HTML elements.
+     *
+     * Use this prop when you need to change the default class names — for example
+     * when using CSS modules.
+     */
+    classNames?: ClassNames;
+    /**
+     * Change the class name for the day matching the {@link modifiers}.
+     */
+    modifiersClassNames?: ModifiersClassNames;
+    /**
+     * Style to apply to the container element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Change the inline styles for each UIElement.
+     */
+    styles?: Styles;
+    /**
+     * Change the inline style for the day matching the {@link modifiers}.
+     */
+    modifiersStyles?: ModifiersStyles;
+    /**
+     * An unique id to replace the random generated id, used by DayPicker for accessibility.
+     */
+    id?: string;
+    /**
+     * The initial month to show in the calendar. Default is the current month.
+     *
+     * Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use {@link month]] and [[onMonthChange}.
+     */
+    defaultMonth?: Date;
+    /**
+     * The month displayed in the calendar.
+     *
+     * As opposed to {@link DayPickerBase.defaultMonth}, use this prop with {@link DayPickerBase.onMonthChange} to
+     * change the month programmatically.
+     */
+    month?: Date;
+    /**
+     * Event fired when the user navigates between months.
+     */
+    onMonthChange?: MonthChangeEventHandler;
+    /**
+     * The number of displayed months. Defaults to `1`.
+     */
+    numberOfMonths?: number;
+    /**
+     * The earliest day to start the month navigation.
+     */
+    fromDate?: Date;
+    /**
+     * The latest day to end the month navigation.
+     */
+    toDate?: Date;
+    /**
+     * The earliest month to start the month navigation.
+     */
+    fromMonth?: Date;
+    /**
+     * The latest month to end the month navigation.
+     */
+    toMonth?: Date;
+    /**
+     * The earliest year to start the month navigation.
+     */
+    fromYear?: number;
+    /**
+     * The latest year to end the month navigation.
+     */
+    toYear?: number;
+    /**
+     * Disable the navigation between months.
+     */
+    disableNavigation?: boolean;
+    /**
+     * Paginate the month navigation displaying the {@link numberOfMonths} at time.
+     */
+    pagedNavigation?: boolean;
+    /**
+     * Render the months in reversed order (when {@link numberOfMonths} is greater
+     * than `1`) to display the most recent month first.
+     */
+    reverseMonths?: boolean;
+    /**
+     * Change the layout of the caption:
+     *
+     * - `buttons` (default): display prev/right buttons
+     * - `dropdown`: display drop-downs to change the month and the year
+     *
+     * **Note:** the `dropdown` layout is available only when `fromDate`,
+     * `fromMonth` or`fromYear` and `toDate`, `toMonth` or `toYear` are set.
+     *
+     */
+    captionLayout?: CaptionLayout;
+    /**
+     * Display six weeks per months, regardless the month’s number of weeks.
+     * To use this prop, {@link showOutsideDays} must be set. Default to `false`.
+     */
+    fixedWeeks?: boolean;
+    /**
+     * Hide the month’s head displaying the weekday names.
+     */
+    hideHead?: boolean;
+    /**
+     * Show the outside days.  An outside day is a day falling in the next or the
+     * previous month. Default is `false`.
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Show the week numbers column. Weeks are numbered according to the local
+     * week index. To use ISO week numbering, use the {@link ISOWeek} prop.
+     *
+     * @defaultValue false
+     */
+    showWeekNumber?: boolean;
+    /**
+     * The index of the first day of the week (0 - Sunday). Overrides the locale's one.
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * The day of January, which is always in the first week of the year. See also
+     * https://date-fns.org/docs/getWeek and
+     * https://en.wikipedia.org/wiki/Week#Numbering
+     */
+    firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    /**
+     * Use ISO week dates instead of the locale setting. See also
+     * https://en.wikipedia.org/wiki/ISO_week_date.
+     *
+     * Setting this prop will ignore {@link weekStartsOn} and {@link firstWeekContainsDate}.
+     */
+    ISOWeek?: boolean;
+    /**
+     * Map of components used to create the layout. Look at the [components source](https://github.com/gpbl/react-day-picker/tree/master/packages/react-day-picker/src/components) to understand how internal components are built.
+     */
+    components?: CustomComponents;
+    /** Content to add to the `tfoot` element. */
+    footer?: React.ReactNode;
+    /**
+     * When a selection mode is set, DayPicker will focus the first selected day
+     * (if set) or the today's date (if not disabled).
+     *
+     * Use this prop when you need to focus DayPicker after a user actions, for
+     * improved accessibility.
+     */
+    initialFocus?: boolean;
+    /**
+     * Apply the `disabled` modifier to the matching days.
+     */
+    disabled?: Matcher | Matcher[] | undefined;
+    /**
+     * Apply the `hidden` modifier to the matching days. Will hide them from the
+     * calendar.
+     */
+    hidden?: Matcher | Matcher[] | undefined;
+    /** Apply the `selected` modifier to the matching days. */
+    selected?: Matcher | Matcher[] | undefined;
+    /**
+     * The today’s date. Default is the current date. This Date will get the
+     * `today` modifier to style the day.
+     */
+    today?: Date;
+    /**
+     * Add modifiers to the matching days.
+     */
+    modifiers?: DayModifiers;
+    /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
+    locale?: Locale;
+    /**
+     * Labels creators to override the defaults. Use this prop to customize the
+     * ARIA labels attributes.
+     */
+    labels?: Partial<Labels>;
+    /**
+     * The text direction of the calendar. Use `ltr` for left-to-right (default)
+     * or `rtl` for right-to-left.
+     */
+    dir?: string;
+    /**
+     * A map of formatters. Use the formatters to override the default formatting
+     * functions.
+     */
+    formatters?: Partial<Formatters>;
+    onDayClick?: DayClickEventHandler;
+    onDayFocus?: DayFocusEventHandler;
+    onDayBlur?: DayFocusEventHandler;
+    onDayMouseEnter?: DayMouseEventHandler;
+    onDayMouseLeave?: DayMouseEventHandler;
+    onDayKeyDown?: DayKeyboardEventHandler;
+    onDayKeyUp?: DayKeyboardEventHandler;
+    onDayKeyPress?: DayKeyboardEventHandler;
+    onDayTouchCancel?: DayTouchEventHandler;
+    onDayTouchEnd?: DayTouchEventHandler;
+    onDayTouchMove?: DayTouchEventHandler;
+    onDayTouchStart?: DayTouchEventHandler;
+    onNextClick?: MonthChangeEventHandler;
+    onPrevClick?: MonthChangeEventHandler;
+    onWeekNumberClick?: WeekNumberClickEventHandler;
+}
+/**
+ * Map of the components that can be changed using the `components` prop.
+ *
+ * Look at the [components
+ * source](https://github.com/gpbl/react-day-picker/tree/master/packages/react-day-picker/src/components)
+ * to understand how internal components are built.
+ */
+interface CustomComponents {
+    /** The component for the caption element. */
+    Caption?: (props: CaptionProps) => JSX.Element | null;
+    /** The component for the caption element. */
+    CaptionLabel?: (props: CaptionLabelProps) => JSX.Element | null;
+    /**
+     * The component for the day element.
+     *
+     * Each `Day` in DayPicker should render one of the following, according to
+     * the return value of {@link useDayRender}.
+     *
+     * - an empty `React.Fragment`, to render if `isHidden` is true
+     * - a `button` element, when the day is interactive, e.g. is selectable
+     * - a `div` or a `span` element, when the day is not interactive
+     *
+     */
+    Day?: (props: DayProps) => JSX.Element | null;
+    /** The component for the content of the day element. */
+    DayContent?: (props: DayContentProps) => JSX.Element | null;
+    /** The component for the drop-down elements. */
+    Dropdown?: (props: DropdownProps) => JSX.Element | null;
+    /** The component for the table footer. */
+    Footer?: () => JSX.Element | null;
+    /** The component for the table’s head. */
+    Head?: () => JSX.Element | null;
+    /** The component for the table’s head row. */
+    HeadRow?: () => JSX.Element | null;
+    /** The component for the small icon in the drop-downs. */
+    IconDropdown?: (props: StyledComponent) => JSX.Element | null;
+    /** The arrow right icon (used for the Navigation buttons). */
+    IconRight?: (props: StyledComponent) => JSX.Element | null;
+    /** The arrow left icon (used for the Navigation buttons). */
+    IconLeft?: (props: StyledComponent) => JSX.Element | null;
+    /** The component for the table rows. */
+    Row?: (props: RowProps) => JSX.Element | null;
+    /** The component for the week number in the table rows. */
+    WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
+}
+/**
+ * All the components in use by DayPicker that can be customized via the {@link components} prop.
+ */
+type Components = Required<CustomComponents>;
+/** The props for the {@link DayPicker} component when using `mode="default"` or `undefined`. */
+interface DayPickerDefaultProps extends DayPickerBase {
+    mode?: DaySelectionMode;
+}
+/** Returns true when the props are of type {@link DayPickerDefaultProps}. */
+declare function isDayPickerDefault(props: DayPickerProps): props is DayPickerDefaultProps;
+/** The props for the {@link DayPicker} component when using `mode="range"`. */
+interface DayPickerRangeProps extends DayPickerBase {
+    mode: "range";
+    /** The selected range of days. */
+    selected?: DateRange | undefined;
+    /** Event fired when a range (or a part of the range) is selected. */
+    onSelect?: SelectRangeEventHandler;
+    /** The minimum amount of days that can be selected. */
+    min?: number;
+    /** The maximum amount of days that can be selected. */
+    max?: number;
+}
+/** Returns true when the props are of type {@link DayPickerRangeProps}. */
+declare function isDayPickerRange(props: DayPickerProps | DayPickerContextValue): props is DayPickerRangeProps;
+/** The props for the {@link DayPicker} component when using `mode="single"`. */
+interface DayPickerSingleProps extends DayPickerBase {
+    mode: "single";
+    /** The selected day. */
+    selected?: Date | undefined;
+    /** Event fired when a day is selected. */
+    onSelect?: SelectSingleEventHandler;
+    /** Make the selection required. */
+    required?: boolean;
+}
+/** Returns true when the props are of type {@link DayPickerSingleProps}. */
+declare function isDayPickerSingle(props: DayPickerProps | DayPickerContextValue): props is DayPickerSingleProps;
+/**
+ * The value of the {@link DayPickerContext} extends the props from DayPicker
+ * with default and cleaned up values.
+ */
+interface DayPickerContextValue extends DayPickerBase {
+    mode: DaySelectionMode;
+    onSelect?: DayPickerSingleProps["onSelect"] | DayPickerMultipleProps["onSelect"] | DayPickerRangeProps["onSelect"];
+    required?: boolean;
+    min?: number;
+    max?: number;
+    selected?: Matcher | Matcher[];
+    captionLayout: CaptionLayout;
+    components: Components;
+    classNames: Required<ClassNames>;
+    formatters: Formatters;
+    labels: Labels;
+    locale: Locale;
+    modifiersClassNames: ModifiersClassNames;
+    modifiers: DayModifiers;
+    numberOfMonths: number;
+    styles: Styles;
+    today: Date;
+}
+/**
+ * The DayPicker context shares the props passed to DayPicker within internal
+ * and custom components. It is used to set the default values and perform
+ * one-time calculations required to render the days.
+ *
+ * Access to this context from the {@link useDayPicker} hook.
+ */
+declare const DayPickerContext: React.Context<DayPickerContextValue | undefined>;
+/** The props for the {@link DayPickerProvider}. */
+interface DayPickerProviderProps {
+    /** The initial props from the DayPicker component. */
+    initialProps: DayPickerProps;
+    children?: ReactNode;
+}
+/**
+ * The provider for the {@link DayPickerContext}, assigning the defaults from the
+ * initial DayPicker props.
+ */
+declare function DayPickerProvider(props: DayPickerProviderProps): JSX.Element;
+/**
+ * Hook to access the {@link DayPickerContextValue}.
+ *
+ * Use the DayPicker context to access to the props passed to DayPicker inside
+ * internal or custom components.
+ */
+declare function useDayPicker(): DayPickerContextValue;
+/** The props for the {@link DayPicker} component when using `mode="multiple"`. */
+interface DayPickerMultipleProps extends DayPickerBase {
+    mode: "multiple";
+    /** The selected days. */
+    selected?: Date[] | undefined;
+    /** Event fired when a days added or removed to the selection. */
+    onSelect?: SelectMultipleEventHandler;
+    /** The minimum amount of days that can be selected. */
+    min?: number;
+    /** The maximum amount of days that can be selected. */
+    max?: number;
+}
+/** Returns true when the props are of type {@link DayPickerMultipleProps}. */
+declare function isDayPickerMultiple(props: DayPickerProps | DayPickerContextValue): props is DayPickerMultipleProps;
+type DayPickerProps = DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps;
+/**
+ * DayPicker render a date picker component to let users pick dates from a
+ * calendar. See http://react-day-picker.js.org for updated documentation and
+ * examples.
+ *
+ * ### Customization
+ *
+ * DayPicker offers different customization props. For example,
+ *
+ * - show multiple months using `numberOfMonths`
+ * - display a dropdown to navigate the months via `captionLayout`
+ * - display the week numbers with `showWeekNumbers`
+ * - disable or hide days with `disabled` or `hidden`
+ *
+ * ### Controlling the months
+ *
+ * Change the initially displayed month using the `defaultMonth` prop. The
+ * displayed months are controlled by DayPicker and stored in its internal
+ * state. To control the months yourself, use `month` instead of `defaultMonth`
+ * and use the `onMonthChange` event to set it.
+ *
+ * To limit the months the user can navigate to, use
+ * `fromDate`/`fromMonth`/`fromYear` or `toDate`/`toMonth`/`toYear`.
+ *
+ * ### Selection modes
+ *
+ * DayPicker supports different selection mode that can be toggled using the
+ * `mode` prop:
+ *
+ * - `mode="single"`: only one day can be selected. Use `required` to make the
+ *   selection required. Use the `onSelect` event handler to get the selected
+ *   days.
+ * - `mode="multiple"`: users can select one or more days. Limit the amount of
+ *   days that can be selected with the `min` or the `max` props.
+ * - `mode="range"`: users can select a range of days. Limit the amount of days
+ *   in the range with the `min` or the `max` props.
+ * - `mode="default"` (default): the built-in selections are disabled. Implement
+ *   your own selection mode with `onDayClick`.
+ *
+ * The selection modes should cover the most common use cases. In case you
+ * need a more refined way of selecting days, use `mode="default"`. Use the
+ * `selected` props and add the day event handlers to add/remove days from the
+ * selection.
+ *
+ * ### Modifiers
+ *
+ * A _modifier_ represents different styles or states for the days displayed in
+ * the calendar (like "selected" or "disabled"). Define custom modifiers using
+ * the `modifiers` prop.
+ *
+ * ### Formatters and custom component
+ *
+ * You can customize how the content is displayed in the date picker by using
+ * either the formatters or replacing the internal components.
+ *
+ * For the most common cases you want to use the `formatters` prop to change how
+ * the content is formatted in the calendar. Use the `components` prop to
+ * replace the internal components, like the navigation icons.
+ *
+ * ### Styling
+ *
+ * DayPicker comes with a default, basic style in `react-day-picker/style` – use
+ * it as template for your own style.
+ *
+ * If you are using CSS modules, pass the imported styles object the
+ * `classNames` props.
+ *
+ * You can also style the elements via inline-styles using the `styles` prop.
+ *
+ * ### Form fields
+ *
+ * If you need to bind the date picker to a form field, you can use the
+ * `useInput` hooks for a basic behavior. See the `useInput` source as an
+ * example to bind the date picker with form fields.
+ *
+ * ### Localization
+ *
+ * To localize DayPicker, import the locale from `date-fns` package and use the
+ * `locale` prop.
+ *
+ * For example, to use Spanish locale:
+ *
+ * ```
+ * import es from 'date-fns/locale/es';
+ * <DayPicker locale={es} />
+ * ```
+ */
+declare function DayPicker(props: DayPickerDefaultProps | DayPickerSingleProps | DayPickerMultipleProps | DayPickerRangeProps): JSX.Element;
+/** The props for the {@link Button} component. */
+type ButtonProps = React.HTMLProps<HTMLButtonElement>;
+/**
+ * Render a button HTML element applying the reset class name.
+ */
+declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "multiple" | "default" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "children" | "className" | "id" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Render a caption with the dropdowns to navigate between months and years.
+ */
+declare function CaptionDropdowns(props: CaptionProps): JSX.Element;
+/**
+ * Render a caption with a button-based navigation.
+ */
+declare function CaptionNavigation(props: CaptionProps): JSX.Element;
+/** Render the Footer component (empty as default).*/
+declare function Footer(): JSX.Element;
+/** Render the table head. */
+declare function Head(): JSX.Element;
+/**
+ * Render the HeadRow component - i.e. the table head row with the weekday names.
+ */
+declare function HeadRow(): JSX.Element;
+/**
+ * Render the icon in the styled drop-down.
+ */
+declare function IconDropdown(props: StyledComponent): JSX.Element;
+/**
+ * Render the "next month" button in the navigation.
+ */
+declare function IconRight(props: StyledComponent): JSX.Element;
+/**
+ * Render the "previous month" button in the navigation.
+ */
+declare function IconLeft(props: StyledComponent): JSX.Element;
+/** The props to attach to the input field when using {@link useInput}. */
+type InputHTMLAttributes = Pick<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "onFocus" | "value" | "placeholder">;
+/** The props to attach to the DayPicker component when using {@link useInput}. */
+type InputDayPickerProps = Pick<DayPickerSingleProps, "fromDate" | "toDate" | "locale" | "month" | "onDayClick" | "onMonthChange" | "selected" | "today">;
+interface UseInputOptions extends Pick<DayPickerBase, "locale" | "fromDate" | "toDate" | "fromMonth" | "toMonth" | "fromYear" | "toYear" | "today"> {
+    /** The initially selected date */
+    defaultSelected?: Date;
+    /** The format string for formatting the input field. See https://date-fns.org/docs/format for a list of format strings. Default to `PP`. */
+    format?: string;
+    /** Make the selection required. */
+    required?: boolean;
+}
+/** Represent the value returned by {@link useInput}. */
+interface UseInputValue {
+    /** The props to pass to a DayPicker component. */
+    dayPickerProps: InputDayPickerProps;
+    /** The props to pass to an input field. */
+    inputProps: InputHTMLAttributes;
+    /** A function to reset to the initial state. */
+    reset: () => void;
+    /** A function to set the selected day. */
+    setSelected: (day: Date | undefined) => void;
+}
+/** Return props and setters for binding an input field to DayPicker. */
+declare function useInput(options?: UseInputOptions): UseInputValue;
+type EventName = "onClick" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart";
+type DayEventHandlers = Pick<HTMLProps<HTMLButtonElement>, EventName>;
+type SelectedDays = Date | Date[] | DateRange | undefined;
+type DayRender = {
+    /** Whether the day should be rendered a `button` instead of a `div` */
+    isButton: boolean;
+    /** Whether the day should be hidden. */
+    isHidden: boolean;
+    /** The modifiers active for the given day. */
+    activeModifiers: ActiveModifiers;
+    /** The props to apply to the button element (when `isButton` is true). */
+    buttonProps: StyledComponent & Pick<ButtonProps, "disabled" | "aria-pressed" | "tabIndex"> & DayEventHandlers;
+    /** The props to apply to the div element (when `isButton` is false). */
+    divProps: StyledComponent;
+    selectedDays: SelectedDays;
+};
+/**
+ * Return props and data used to render the {@link Day} component.
+ *
+ * Use this hook when creating a component to replace the built-in `Day`
+ * component.
+ */
+declare function useDayRender(/** The date to render. */
+day: Date, /** The month where the date is displayed (if not the same as `date`, it means it is an "outside" day). */
+displayMonth: Date, /** A ref to the button element that will be target of focus when rendered (if required). */
+buttonRef: React.RefObject<HTMLButtonElement>): DayRender;
+/**
+ * Return the active modifiers for the specified day.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ *
+ * @param day
+ * @param displayMonth
+ */
+declare function useActiveModifiers(day: Date, /**
+ * The month where the date is displayed. If not the same as `date`, the day
+ * is an "outside day".
+ */
+displayMonth?: Date): ActiveModifiers;
+/** Represents the value of the {@link FocusContext}. */
+type FocusContextValue = {
+    /** The day currently focused. */
+    focusedDay: Date | undefined;
+    /** Day that will be focused.  */
+    focusTarget: Date | undefined;
+    /** Focus a day. */
+    focus: (day: Date) => void;
+    /** Blur the focused day. */
+    blur: () => void;
+    /** Focus the day after the focused day. */
+    focusDayAfter: () => void;
+    /** Focus the day before the focused day. */
+    focusDayBefore: () => void;
+    /** Focus the day in the week before the focused day. */
+    focusWeekBefore: () => void;
+    /** Focus the day in the week after the focused day. */
+    focusWeekAfter: () => void;
+    /* Focus the day in the month before the focused day. */
+    focusMonthBefore: () => void;
+    /* Focus the day in the month after the focused day. */
+    focusMonthAfter: () => void;
+    /* Focus the day in the year before the focused day. */
+    focusYearBefore: () => void;
+    /* Focus the day in the year after the focused day. */
+    focusYearAfter: () => void;
+    /* Focus the day at the start of the week of the focused day. */
+    focusStartOfWeek: () => void;
+    /* Focus the day at the end of the week of focused day. */
+    focusEndOfWeek: () => void;
+};
+/**
+ * The Focus context shares details about the focused day for the keyboard
+ *
+ * Access this context from the {@link useFocusContext} hook.
+ */
+declare const FocusContext: React.Context<FocusContextValue | undefined>;
+/** The provider for the {@link FocusContext}. */
+declare function FocusProvider(props: {
+    children: ReactNode;
+}): JSX.Element;
+/**
+ * Hook to access the {@link FocusContextValue}. Use this hook to handle the
+ * focus state of the elements.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+declare function useFocusContext(): FocusContextValue;
+/** Represents the value of the {@link NavigationContext}. */
+interface NavigationContextValue {
+    /** The month to display in the calendar. When `numberOfMonths` is greater than one, is the first of the displayed months. */
+    currentMonth: Date;
+    /** The months rendered by DayPicker. DayPicker can render multiple months via `numberOfMonths`. */
+    displayMonths: Date[];
+    /** Navigate to the specified month. */
+    goToMonth: (month: Date) => void;
+    /** Navigate to the specified date. */
+    goToDate: (date: Date, refDate?: Date) => void;
+    /** The next month to display. */
+    nextMonth?: Date;
+    /** The previous month to display. */
+    previousMonth?: Date;
+    /** Whether the given day is included in the displayed months. */
+    isDateDisplayed: (day: Date) => boolean;
+}
+/**
+ * The Navigation context shares details and methods to navigate the months in DayPicker.
+ * Access this context from the {@link useNavigation} hook.
+ */
+declare const NavigationContext: React.Context<NavigationContextValue | undefined>;
+/** Provides the values for the {@link NavigationContext}. */
+declare function NavigationProvider(props: {
+    children?: ReactNode;
+}): JSX.Element;
+/**
+ * Hook to access the {@link NavigationContextValue}. Use this hook to navigate
+ * between months or years in DayPicker.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+declare function useNavigation(): NavigationContextValue;
+/** The props of {@link RootProvider}. */
+type RootContext = DayPickerBase & {
+    children: React.ReactNode;
+};
+/** Provide the value for all the context providers. */
+declare function RootProvider(props: RootContext): JSX.Element;
+/** Represent the modifiers that are changed by the multiple selection. */
+type SelectMultipleModifiers = Pick<Modifiers, InternalModifier.Disabled>;
+/** Represents the value of a {@link SelectMultipleContext}. */
+interface SelectMultipleContextValue {
+    /** The days that have been selected. */
+    selected: Date[] | undefined;
+    /** The modifiers for the corresponding selection. */
+    modifiers: SelectMultipleModifiers;
+    /** Event handler to attach to the day button to enable the multiple select. */
+    onDayClick?: DayClickEventHandler;
+}
+/**
+ * The SelectMultiple context shares details about the selected days when in
+ * multiple selection mode.
+ *
+ * Access this context from the {@link useSelectMultiple} hook.
+ */
+declare const SelectMultipleContext: React.Context<SelectMultipleContextValue | undefined>;
+type SelectMultipleProviderProps = {
+    initialProps: DayPickerBase;
+    children: ReactNode;
+};
+/** Provides the values for the {@link SelectMultipleContext}. */
+declare function SelectMultipleProvider(props: SelectMultipleProviderProps): JSX.Element;
+type SelectMultipleProviderInternalProps = {
+    initialProps: DayPickerMultipleProps;
+    children: ReactNode;
+};
+declare function SelectMultipleProviderInternal({ initialProps, children }: SelectMultipleProviderInternalProps): JSX.Element;
+/**
+ * Hook to access the {@link SelectMultipleContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+declare function useSelectMultiple(): SelectMultipleContextValue;
+/** Represent the modifiers that are changed by the range selection. */
+type SelectRangeModifiers = Pick<Modifiers, InternalModifier.Disabled | InternalModifier.RangeEnd | InternalModifier.RangeMiddle | InternalModifier.RangeStart>;
+/** Represents the value of a {@link SelectRangeContext}. */
+interface SelectRangeContextValue {
+    /** The range of days that has been selected. */
+    selected: DateRange | undefined;
+    /** The modifiers for the corresponding selection. */
+    modifiers: SelectRangeModifiers;
+    /** Event handler to attach to the day button to enable the range select. */
+    onDayClick?: DayClickEventHandler;
+}
+/**
+ * The SelectRange context shares details about the selected days when in
+ * range selection mode.
+ *
+ * Access this context from the {@link useSelectRange} hook.
+ */
+declare const SelectRangeContext: React.Context<SelectRangeContextValue | undefined>;
+type SelectRangeProviderProps = {
+    initialProps: DayPickerBase;
+    children: ReactNode;
+};
+/** Provides the values for the {@link SelectRangeProvider}. */
+declare function SelectRangeProvider(props: SelectRangeProviderProps): JSX.Element;
+type SelectRangeProviderInternalProps = {
+    initialProps: DayPickerRangeProps;
+    children: ReactNode;
+};
+declare function SelectRangeProviderInternal({ initialProps, children }: SelectRangeProviderInternalProps): JSX.Element;
+/**
+ * Hook to access the {@link SelectRangeContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+declare function useSelectRange(): SelectRangeContextValue;
+/** Represents the value of a {@link SelectSingleContext}. */
+interface SelectSingleContextValue {
+    /** The day that has been selected. */
+    selected: Date | undefined;
+    /** Event handler to attach to the day button to enable the single select. */
+    onDayClick?: DayClickEventHandler;
+}
+/**
+ * The SelectSingle context shares details about the selected days when in
+ * single selection mode.
+ *
+ * Access this context from the {@link useSelectSingle} hook.
+ */
+declare const SelectSingleContext: React.Context<SelectSingleContextValue | undefined>;
+type SelectSingleProviderProps = {
+    initialProps: DayPickerBase;
+    children: React.ReactNode;
+};
+/** Provides the values for the {@link SelectSingleProvider}. */
+declare function SelectSingleProvider(props: SelectSingleProviderProps): JSX.Element;
+type SelectSingleProviderInternal = {
+    initialProps: DayPickerSingleProps;
+    children: React.ReactNode;
+};
+declare function SelectSingleProviderInternal({ initialProps, children }: SelectSingleProviderInternal): JSX.Element;
+/**
+ * Hook to access the {@link SelectSingleContextValue}.
+ *
+ * This hook is meant to be used inside internal or custom components.
+ */
+declare function useSelectSingle(): SelectSingleContextValue;
+/**
+ * Returns whether a day matches against at least one of the given Matchers.
+ *
+ * ```
+ * const day = new Date(2022, 5, 19);
+ * const matcher1: DateRange = {
+ *    from: new Date(2021, 12, 21),
+ *    to: new Date(2021, 12, 30)
+ * }
+ * const matcher2: DateRange = {
+ *    from: new Date(2022, 5, 1),
+ *    to: new Date(2022, 5, 23)
+ * }
+ *
+ * const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range.
+ * ```
+ * */
+declare function isMatch(day: Date, matchers: Matcher[]): boolean;
+/**
+ * Add a day to an existing range.
+ *
+ * The returned range takes in account the `undefined` values and if the added
+ * day is already present in the range.
+ */
+declare function addToRange(day: Date, range?: DateRange): DateRange | undefined;
+export { DayPickerProps, DayPicker, ButtonProps, Button, CaptionProps, CaptionLayout, Caption, CaptionDropdowns, CaptionLabelProps, CaptionLabel, CaptionNavigation, DayProps, Day, DayContentProps, DayContent, DropdownProps, Dropdown, Footer, Head, HeadRow, IconDropdown, IconRight, IconLeft, RowProps, Row, WeekNumberProps, WeekNumber, InputHTMLAttributes, InputDayPickerProps, UseInputOptions, UseInputValue, useInput, DayRender, useDayRender, useActiveModifiers, DayPickerContextValue, DayPickerContext, DayPickerProviderProps, DayPickerProvider, useDayPicker, FocusContextValue, FocusContext, FocusProvider, useFocusContext, NavigationContextValue, NavigationContext, NavigationProvider, useNavigation, RootContext, RootProvider, SelectMultipleModifiers, SelectMultipleContextValue, SelectMultipleContext, SelectMultipleProviderProps, SelectMultipleProvider, SelectMultipleProviderInternal, useSelectMultiple, SelectRangeModifiers, SelectRangeContextValue, SelectRangeContext, SelectRangeProvider, SelectRangeProviderInternal, useSelectRange, SelectSingleContextValue, SelectSingleContext, SelectSingleProvider, SelectSingleProviderInternal, useSelectSingle, DaySelectionMode, DayPickerBase, CustomComponents, Components, DayPickerDefaultProps, isDayPickerDefault, DayPickerMultipleProps, isDayPickerMultiple, DayPickerRangeProps, isDayPickerRange, DayPickerSingleProps, isDayPickerSingle, DayClickEventHandler, DayFocusEventHandler, DayKeyboardEventHandler, DayMouseEventHandler, MonthChangeEventHandler, SelectMultipleEventHandler, SelectRangeEventHandler, SelectSingleEventHandler, WeekNumberClickEventHandler, DayTouchEventHandler, DateFormatter, Formatters, WeekNumberFormatter, Labels, DayLabel, NavButtonLabel, WeekdayLabel, WeekNumberLabel, Matcher, DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, isDateInterval, isDateRange, isDateAfterType, isDateBeforeType, isDayOfWeekType, Modifier, Modifiers, InternalModifier, InternalModifiers, ActiveModifiers, ModifiersStyles, ModifiersClassNames, DayModifiers, CustomModifiers, StyledElement, InternalModifiersElement, ClassNames, Styles, StyledComponent, isMatch, addToRange };