🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-day-picker

Package Overview
Dependencies
Maintainers
2
Versions
269
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-day-picker - npm Package Compare versions

Comparing version

9.6.7
to
9.7.0

dist/cjs/helpers/createGetModifiers.d.ts
dist/cjs/helpers/createGetModifiers.js
dist/cjs/helpers/createGetModifiers.js.map
dist/esm/helpers/createGetModifiers.d.ts
dist/esm/helpers/createGetModifiers.js
dist/esm/helpers/createGetModifiers.js.map
src/helpers/createGetModifiers.test.ts
src/helpers/createGetModifiers.ts
src/helpers/getFocusableDate.test.ts

31

dist/cjs/classes/CalendarDay.d.ts
import { type DateLib } from "./DateLib.js";
/**
* Represent the day displayed in the calendar.
* Represents a day displayed in the calendar.
*
* In DayPicker, a `Day` is a `Date` that can be displayed in the calendar. It
* is used as extension of the native `Date` object to provide additional
* information about the day.
* In DayPicker, a `CalendarDay` is a wrapper around a `Date` object that
* provides additional information about the day, such as whether it belongs to
* the displayed month.
*/

@@ -12,3 +12,3 @@ export declare class CalendarDay {

/**
* The utility functions to manipulate dates.
* Utility functions for manipulating dates.
*

@@ -19,14 +19,14 @@ * @private

/**
* Whether the day is not belonging to the displayed month.
* Indicates whether the day does not belong to the displayed month.
*
* When `outside` is `true`, use `displayMonth` to know to which month the day
* belongs.
* If `outside` is `true`, use `displayMonth` to determine the month to which
* the day belongs.
*/
readonly outside: boolean;
/**
* The months where the day is displayed.
* The month that is currently displayed in the calendar.
*
* In DayPicker, days can fall out the displayed months (e.g. when
* `showOutsideDays` is `true`). This property is useful to know if the day is
* in the same month of the displayed month.
* This property is useful for determining if the day belongs to the same
* month as the displayed month, especially when `showOutsideDays` is
* enabled.
*/

@@ -37,6 +37,9 @@ readonly displayMonth: Date;

/**
* Check if the day is the same as the given day: considering if it is in the
* same display month.
* Checks if this day is equal to another `CalendarDay`, considering both the
* date and the displayed month.
*
* @param day The `CalendarDay` to compare with.
* @returns `true` if the days are equal, otherwise `false`.
*/
isEqualTo(day: CalendarDay): boolean;
}

15

dist/cjs/classes/CalendarDay.js

@@ -6,7 +6,7 @@ "use strict";

/**
* Represent the day displayed in the calendar.
* Represents a day displayed in the calendar.
*
* In DayPicker, a `Day` is a `Date` that can be displayed in the calendar. It
* is used as extension of the native `Date` object to provide additional
* information about the day.
* In DayPicker, a `CalendarDay` is a wrapper around a `Date` object that
* provides additional information about the day, such as whether it belongs to
* the displayed month.
*/

@@ -21,4 +21,7 @@ class CalendarDay {

/**
* Check if the day is the same as the given day: considering if it is in the
* same display month.
* Checks if this day is equal to another `CalendarDay`, considering both the
* date and the displayed month.
*
* @param day The `CalendarDay` to compare with.
* @returns `true` if the days are equal, otherwise `false`.
*/

@@ -25,0 +28,0 @@ isEqualTo(day) {

11

dist/cjs/classes/CalendarMonth.d.ts
import { CalendarWeek } from "./CalendarWeek.js";
/** Represent a month in a calendar year. Contains the weeks within the month. */
/**
* Represents a month in a calendar year.
*
* A `CalendarMonth` contains the weeks within the month and the date of the
* month.
*/
export declare class CalendarMonth {
constructor(month: Date, weeks: CalendarWeek[]);
/** The date of the month. */
/** The date representing the first day of the month. */
date: Date;
/** The weeks within the month. */
/** The weeks that belong to this month. */
weeks: CalendarWeek[];
}

7

dist/cjs/classes/CalendarMonth.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalendarMonth = void 0;
/** Represent a month in a calendar year. Contains the weeks within the month. */
/**
* Represents a month in a calendar year.
*
* A `CalendarMonth` contains the weeks within the month and the date of the
* month.
*/
class CalendarMonth {

@@ -6,0 +11,0 @@ constructor(month, weeks) {

8

dist/cjs/classes/CalendarWeek.d.ts
import { CalendarDay } from "./CalendarDay.js";
/** Represent a week in a calendar month. */
/**
* Represents a week in a calendar month.
*
* A `CalendarWeek` contains the days within the week and the week number.
*/
export declare class CalendarWeek {

@@ -7,4 +11,4 @@ constructor(weekNumber: number, days: CalendarDay[]);

weekNumber: number;
/** The days within the week. */
/** The days that belong to this week. */
days: CalendarDay[];
}

6

dist/cjs/classes/CalendarWeek.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalendarWeek = void 0;
/** Represent a week in a calendar month. */
/**
* Represents a week in a calendar month.
*
* A `CalendarWeek` contains the days within the week and the week number.
*/
class CalendarWeek {

@@ -6,0 +10,0 @@ constructor(weekNumber, days) {

105

dist/cjs/classes/DateLib.d.ts

@@ -1,6 +0,3 @@

import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, format, getISOWeek, getMonth, getWeek, getYear, isAfter, isBefore, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear } from "date-fns";
import type { EndOfWeekOptions, StartOfWeekOptions, FormatOptions as DateFnsFormatOptions } from "date-fns";
import type { EndOfWeekOptions, StartOfWeekOptions, FormatOptions as DateFnsFormatOptions, Interval, GetMonthOptions, GetYearOptions, GetWeekOptions } from "date-fns";
import type { Locale } from "date-fns/locale";
import { endOfBroadcastWeek } from "../helpers/endOfBroadcastWeek.js";
import { startOfBroadcastWeek } from "../helpers/startOfBroadcastWeek.js";
import { Numerals } from "../types/shared.js";

@@ -47,4 +44,4 @@ export type { Locale } from "date-fns/locale";

/**
* A wrapper class around [date-fns](http://date-fns.org) sharing the same
* options.
* A wrapper class around [date-fns](http://date-fns.org) that provides utility
* methods for date manipulation and formatting.
*

@@ -57,33 +54,37 @@ * @since 9.2.0

export declare class DateLib {
/** The options for the date library. */
/** The options for configuring the date library. */
readonly options: DateLibOptions;
/** Overrides for the date library functions. */
/** Overrides for the default date library functions. */
readonly overrides?: Partial<typeof DateLib.prototype>;
/**
* Creates an instance of DateLib.
* Creates an instance of `DateLib`.
*
* @param options The options for the date library.
* @param overrides Overrides for the date library functions.
* @param options Configuration options for the date library.
* @param overrides Custom overrides for the date library functions.
*/
constructor(options?: DateLibOptions, overrides?: Partial<typeof DateLib.prototype>);
/**
* Generate digit map dynamically using Intl.NumberFormat.
* Generates a mapping of Arabic digits (0-9) to the target numbering system
* digits.
*
* @since 9.5.0
* @returns A record mapping Arabic digits to the target numerals.
*/
private getDigitMap;
/**
* Replace Arabic digits with the target numbering system digits.
* Replaces Arabic digits in a string with the target numbering system digits.
*
* @since 9.5.0
* @param input The string containing Arabic digits.
* @returns The string with digits replaced.
*/
private replaceDigits;
/**
* Format number using the custom numbering system.
* Formats a number using the configured numbering system.
*
* @since 9.5.0
* @param value The number to format.
* @returns The formatted number.
* @returns The formatted number as a string.
*/
formatNumber(value: number): string;
formatNumber(value: number | string): string;
/**

@@ -96,10 +97,10 @@ * Reference to the built-in Date constructor.

/**
* Creates a new date object to the today's date.
* Creates a new `Date` object representing today's date.
*
* @since 9.5.0
* @returns The new date object.
* @returns A `Date` object for today's date.
*/
today: () => Date;
/**
* Creates a new date object with the specified year, month and date.
* Creates a new `Date` object with the specified year, month, and day.
*

@@ -110,3 +111,3 @@ * @since 9.5.0

* @param date The day of the month.
* @returns The new date object.
* @returns A new `Date` object.
*/

@@ -121,3 +122,3 @@ newDate: (year: number, monthIndex: number, date: number) => Date;

*/
addDays: typeof addDays;
addDays: (date: Date, amount: number) => Date;
/**

@@ -130,3 +131,3 @@ * Adds the specified number of months to the given date.

*/
addMonths: typeof addMonths;
addMonths: (date: Date, amount: number) => Date;
/**

@@ -139,3 +140,3 @@ * Adds the specified number of weeks to the given date.

*/
addWeeks: typeof addWeeks;
addWeeks: (date: Date, amount: number) => Date;
/**

@@ -148,3 +149,3 @@ * Adds the specified number of years to the given date.

*/
addYears: typeof addYears;
addYears: (date: Date, amount: number) => Date;
/**

@@ -157,3 +158,3 @@ * Returns the number of calendar days between the given dates.

*/
differenceInCalendarDays: typeof differenceInCalendarDays;
differenceInCalendarDays: (dateLeft: Date, dateRight: Date) => number;
/**

@@ -166,3 +167,3 @@ * Returns the number of calendar months between the given dates.

*/
differenceInCalendarMonths: typeof differenceInCalendarMonths;
differenceInCalendarMonths: (dateLeft: Date, dateRight: Date) => number;
/**

@@ -173,3 +174,3 @@ * Returns the months between the given dates.

*/
eachMonthOfInterval: typeof eachMonthOfInterval;
eachMonthOfInterval: (interval: Interval) => Date[];
/**

@@ -181,3 +182,3 @@ * Returns the end of the broadcast week for the given date.

*/
endOfBroadcastWeek: typeof endOfBroadcastWeek;
endOfBroadcastWeek: (date: Date) => Date;
/**

@@ -189,3 +190,3 @@ * Returns the end of the ISO week for the given date.

*/
endOfISOWeek: typeof endOfISOWeek;
endOfISOWeek: (date: Date) => Date;
/**

@@ -197,3 +198,3 @@ * Returns the end of the month for the given date.

*/
endOfMonth: typeof endOfMonth;
endOfMonth: (date: Date) => Date;
/**

@@ -205,3 +206,3 @@ * Returns the end of the week for the given date.

*/
endOfWeek: typeof endOfWeek;
endOfWeek: (date: Date, options?: EndOfWeekOptions<Date>) => Date;
/**

@@ -213,3 +214,3 @@ * Returns the end of the year for the given date.

*/
endOfYear: typeof endOfYear;
endOfYear: (date: Date) => Date;
/**

@@ -222,3 +223,3 @@ * Formats the given date using the specified format string.

*/
format: typeof format;
format: (date: Date, formatStr: string, options?: DateFnsFormatOptions) => string;
/**

@@ -230,3 +231,3 @@ * Returns the ISO week number for the given date.

*/
getISOWeek: typeof getISOWeek;
getISOWeek: (date: Date) => number;
/**

@@ -238,3 +239,3 @@ * Returns the month of the given date.

*/
getMonth: typeof getMonth;
getMonth: (date: Date, options?: GetMonthOptions) => number;
/**

@@ -246,3 +247,3 @@ * Returns the year of the given date.

*/
getYear: typeof getYear;
getYear: (date: Date, options?: GetYearOptions) => number;
/**

@@ -254,3 +255,3 @@ * Returns the local week number for the given date.

*/
getWeek: typeof getWeek;
getWeek: (date: Date, options?: GetWeekOptions) => number;
/**

@@ -263,3 +264,3 @@ * Checks if the first date is after the second date.

*/
isAfter: typeof isAfter;
isAfter: (date: Date, dateToCompare: Date) => boolean;
/**

@@ -272,3 +273,3 @@ * Checks if the first date is before the second date.

*/
isBefore: typeof isBefore;
isBefore: (date: Date, dateToCompare: Date) => boolean;
/**

@@ -288,3 +289,3 @@ * Checks if the given value is a Date object.

*/
isSameDay: typeof isSameDay;
isSameDay: (dateLeft: Date, dateRight: Date) => boolean;
/**

@@ -297,3 +298,3 @@ * Checks if the given dates are in the same month.

*/
isSameMonth: typeof isSameMonth;
isSameMonth: (dateLeft: Date, dateRight: Date) => boolean;
/**

@@ -306,3 +307,3 @@ * Checks if the given dates are in the same year.

*/
isSameYear: typeof isSameYear;
isSameYear: (dateLeft: Date, dateRight: Date) => boolean;
/**

@@ -314,3 +315,3 @@ * Returns the latest date in the given array of dates.

*/
max: typeof max;
max: (dates: Date[]) => Date;
/**

@@ -322,3 +323,3 @@ * Returns the earliest date in the given array of dates.

*/
min: typeof min;
min: (dates: Date[]) => Date;
/**

@@ -331,3 +332,3 @@ * Sets the month of the given date.

*/
setMonth: typeof setMonth;
setMonth: (date: Date, month: number) => Date;
/**

@@ -340,3 +341,3 @@ * Sets the year of the given date.

*/
setYear: typeof setYear;
setYear: (date: Date, year: number) => Date;
/**

@@ -348,3 +349,3 @@ * Returns the start of the broadcast week for the given date.

*/
startOfBroadcastWeek: typeof startOfBroadcastWeek;
startOfBroadcastWeek: (date: Date, dateLib: DateLib) => Date;
/**

@@ -356,3 +357,3 @@ * Returns the start of the day for the given date.

*/
startOfDay: typeof startOfDay;
startOfDay: (date: Date) => Date;
/**

@@ -364,3 +365,3 @@ * Returns the start of the ISO week for the given date.

*/
startOfISOWeek: typeof startOfISOWeek;
startOfISOWeek: (date: Date) => Date;
/**

@@ -372,3 +373,3 @@ * Returns the start of the month for the given date.

*/
startOfMonth: typeof startOfMonth;
startOfMonth: (date: Date) => Date;
/**

@@ -380,3 +381,3 @@ * Returns the start of the week for the given date.

*/
startOfWeek: typeof startOfWeek;
startOfWeek: (date: Date, options?: StartOfWeekOptions) => Date;
/**

@@ -388,3 +389,3 @@ * Returns the start of the year for the given date.

*/
startOfYear: typeof startOfYear;
startOfYear: (date: Date) => Date;
}

@@ -391,0 +392,0 @@ /** The default locale (English). */

48

dist/cjs/classes/DateLib.js

@@ -10,4 +10,4 @@ "use strict";

/**
* A wrapper class around [date-fns](http://date-fns.org) sharing the same
* options.
* A wrapper class around [date-fns](http://date-fns.org) that provides utility
* methods for date manipulation and formatting.
*

@@ -21,6 +21,6 @@ * @since 9.2.0

/**
* Creates an instance of DateLib.
* Creates an instance of `DateLib`.
*
* @param options The options for the date library.
* @param overrides Overrides for the date library functions.
* @param options Configuration options for the date library.
* @param overrides Custom overrides for the date library functions.
*/

@@ -35,6 +35,6 @@ constructor(options, overrides) {

/**
* Creates a new date object to the today's date.
* Creates a new `Date` object representing today's date.
*
* @since 9.5.0
* @returns The new date object.
* @returns A `Date` object for today's date.
*/

@@ -51,3 +51,3 @@ this.today = () => {

/**
* Creates a new date object with the specified year, month and date.
* Creates a new `Date` object with the specified year, month, and day.
*

@@ -58,3 +58,3 @@ * @since 9.5.0

* @param date The day of the month.
* @returns The new date object.
* @returns A new `Date` object.
*/

@@ -160,3 +160,3 @@ this.newDate = (year, monthIndex, date) => {

return this.overrides?.endOfBroadcastWeek
? this.overrides.endOfBroadcastWeek(date, this)
? this.overrides.endOfBroadcastWeek(date)
: (0, endOfBroadcastWeek_js_1.endOfBroadcastWeek)(date, this);

@@ -192,5 +192,5 @@ };

*/
this.endOfWeek = (date) => {
this.endOfWeek = (date, options) => {
return this.overrides?.endOfWeek
? this.overrides.endOfWeek(date, this.options)
? this.overrides.endOfWeek(date, options)
: (0, date_fns_1.endOfWeek)(date, this.options);

@@ -216,3 +216,3 @@ };

*/
this.format = (date, formatStr) => {
this.format = (date, formatStr, options) => {
const formatted = this.overrides?.format

@@ -243,3 +243,3 @@ ? this.overrides.format(date, formatStr, this.options)

*/
this.getMonth = (date) => {
this.getMonth = (date, options) => {
return this.overrides?.getMonth

@@ -255,3 +255,3 @@ ? this.overrides.getMonth(date, this.options)

*/
this.getYear = (date) => {
this.getYear = (date, options) => {
return this.overrides?.getYear

@@ -267,3 +267,3 @@ ? this.overrides.getYear(date, this.options)

*/
this.getWeek = (date) => {
this.getWeek = (date, options) => {
return this.overrides?.getWeek

@@ -392,3 +392,3 @@ ? this.overrides.getWeek(date, this.options)

*/
this.startOfBroadcastWeek = (date) => {
this.startOfBroadcastWeek = (date, dateLib) => {
return this.overrides?.startOfBroadcastWeek

@@ -437,3 +437,3 @@ ? this.overrides.startOfBroadcastWeek(date, this)

*/
this.startOfWeek = (date) => {
this.startOfWeek = (date, options) => {
return this.overrides?.startOfWeek

@@ -458,5 +458,7 @@ ? this.overrides.startOfWeek(date, this.options)

/**
* Generate digit map dynamically using Intl.NumberFormat.
* Generates a mapping of Arabic digits (0-9) to the target numbering system
* digits.
*
* @since 9.5.0
* @returns A record mapping Arabic digits to the target numerals.
*/

@@ -477,5 +479,7 @@ getDigitMap() {

/**
* Replace Arabic digits with the target numbering system digits.
* Replaces Arabic digits in a string with the target numbering system digits.
*
* @since 9.5.0
* @param input The string containing Arabic digits.
* @returns The string with digits replaced.
*/

@@ -487,7 +491,7 @@ replaceDigits(input) {

/**
* Format number using the custom numbering system.
* Formats a number using the configured numbering system.
*
* @since 9.5.0
* @param value The number to format.
* @returns The formatted number.
* @returns The formatted number as a string.
*/

@@ -494,0 +498,0 @@ formatNumber(value) {

8

dist/cjs/components/Day.d.ts

@@ -5,7 +5,7 @@ import React, { type HTMLAttributes } from "react";

/**
* Render the gridcell of a day in the calendar and handle the interaction and
* the focus with they day.
* Render a grid cell for a specific day in the calendar.
*
* If you need to just change the content of the day cell, consider swapping the
* `DayButton` component instead.
* Handles interaction and focus for the day. If you only need to change the
* content of the day cell, consider swapping the `DayButton` component
* instead.
*

@@ -12,0 +12,0 @@ * @group Components

8

dist/cjs/components/Day.js

@@ -9,7 +9,7 @@ "use strict";

/**
* Render the gridcell of a day in the calendar and handle the interaction and
* the focus with they day.
* Render a grid cell for a specific day in the calendar.
*
* If you need to just change the content of the day cell, consider swapping the
* `DayButton` component instead.
* Handles interaction and focus for the day. If you only need to change the
* content of the day cell, consider swapping the `DayButton` component
* instead.
*

@@ -16,0 +16,0 @@ * @group Components

4

dist/cjs/components/DayButton.d.ts

@@ -5,3 +5,3 @@ import React, { type ButtonHTMLAttributes } from "react";

/**
* Render the button for a day in the calendar.
* Render a button for a specific day in the calendar.
*

@@ -14,5 +14,5 @@ * @group Components

day: CalendarDay;
/** The modifiers for the day. */
/** The modifiers to apply to the day. */
modifiers: Modifiers;
} & ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
export type DayButtonProps = Parameters<typeof DayButton>[0];

2

dist/cjs/components/DayButton.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the button for a day in the calendar.
* Render a button for a specific day in the calendar.
*

@@ -12,0 +12,0 @@ * @group Components

10

dist/cjs/components/Dropdown.d.ts

@@ -9,10 +9,7 @@ import React, { type SelectHTMLAttributes } from "react";

label: string;
/**
* The dropdown option is disabled when it cannot be selected because out of
* the calendar range.
*/
/** Whether the dropdown option is disabled (e.g., out of the calendar range). */
disabled: boolean;
};
/**
* Render a dropdown component to use in the navigation bar.
* Render a dropdown component for navigation in the calendar.
*

@@ -24,3 +21,3 @@ * @group Components

/**
* @deprecated Use{@link useDayPicker} hook to get the list of internal
* @deprecated Use {@link useDayPicker} hook to get the list of internal
* components.

@@ -34,4 +31,5 @@ */

classNames: ClassNames;
/** The options to display in the dropdown. */
options?: DropdownOption[] | undefined;
} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;
export type DropdownProps = Parameters<typeof Dropdown>[0];

2

dist/cjs/components/Dropdown.js

@@ -10,3 +10,3 @@ "use strict";

/**
* Render a dropdown component to use in the navigation bar.
* Render a dropdown component for navigation in the calendar.
*

@@ -13,0 +13,0 @@ * @group Components

2

dist/cjs/components/DropdownNav.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Render the the navigation dropdowns.
* Render the navigation dropdowns for the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/DropdownNav.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the the navigation dropdowns.
* Render the navigation dropdowns for the calendar.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/Footer.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Component wrapping the footer.
* Render the footer of the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/Footer.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Component wrapping the footer.
* Render the footer of the calendar.
*

@@ -12,0 +12,0 @@ * @group Components

6

dist/cjs/components/Month.d.ts
import React, { type HTMLAttributes } from "react";
import type { CalendarMonth } from "../classes/CalendarMonth.js";
/**
* Render the grid with the weekday header row and the weeks for the given
* Render the grid with the weekday header row and the weeks for a specific
* month.

@@ -11,7 +11,7 @@ *

export declare function Month(props: {
/** The month where the grid is displayed. */
/** The month to display in the grid. */
calendarMonth: CalendarMonth;
/** The index where this month is displayed. */
/** The index of the month being displayed. */
displayIndex: number;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type MonthProps = Parameters<typeof Month>[0];

2

dist/cjs/components/Month.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the grid with the weekday header row and the weeks for the given
* Render the grid with the weekday header row and the weeks for a specific
* month.

@@ -12,0 +12,0 @@ *

6

dist/cjs/components/MonthCaption.d.ts
import React, { type HTMLAttributes } from "react";
import type { CalendarMonth } from "../classes/index.js";
/**
* Render the caption of a month in the calendar.
* Render the caption for a month in the calendar.
*

@@ -10,7 +10,7 @@ * @group Components

export declare function MonthCaption(props: {
/** The month where the grid is displayed. */
/** The month to display in the caption. */
calendarMonth: CalendarMonth;
/** The index where this month is displayed. */
/** The index of the month being displayed. */
displayIndex: number;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type MonthCaptionProps = Parameters<typeof MonthCaption>[0];

2

dist/cjs/components/MonthCaption.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the caption of a month in the calendar.
* Render the caption for a month in the calendar.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/MonthGrid.d.ts
import React, { type TableHTMLAttributes } from "react";
/**
* Render the grid of days in a month.
* Render the grid of days for a specific month.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/MonthGrid.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the grid of days in a month.
* Render the grid of days for a specific month.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/Months.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Component wrapping the month grids.
* Render a container wrapping the month grids.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/Months.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Component wrapping the month grids.
* Render a container wrapping the month grids.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/MonthsDropdown.d.ts
import React from "react";
import { DropdownProps } from "./Dropdown.js";
/**
* Render the dropdown to navigate between months.
* Render a dropdown to navigate between months in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

2

dist/cjs/components/MonthsDropdown.js

@@ -10,3 +10,3 @@ "use strict";

/**
* Render the dropdown to navigate between months.
* Render a dropdown to navigate between months in the calendar.
*

@@ -13,0 +13,0 @@ * @group Components

6

dist/cjs/components/Nav.d.ts
import React, { type MouseEventHandler, type HTMLAttributes } from "react";
/**
* Render the toolbar with the navigation button.
* Render the navigation toolbar with buttons to navigate between months.
*

@@ -9,7 +9,11 @@ * @group Components

export declare function Nav(props: {
/** Handler for the previous month button click. */
onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
/** Handler for the next month button click. */
onNextClick?: MouseEventHandler<HTMLButtonElement>;
/** The date of the previous month, if available. */
previousMonth?: Date | undefined;
/** The date of the next month, if available. */
nextMonth?: Date | undefined;
} & HTMLAttributes<HTMLElement>): React.JSX.Element;
export type NavProps = Parameters<typeof Nav>[0];

2

dist/cjs/components/Nav.js

@@ -41,3 +41,3 @@ "use strict";

/**
* Render the toolbar with the navigation button.
* Render the navigation toolbar with buttons to navigate between months.
*

@@ -44,0 +44,0 @@ * @group Components

2

dist/cjs/components/NextMonthButton.d.ts
import React, { type ButtonHTMLAttributes } from "react";
/**
* Render the next month button element in the calendar.
* Render the button to navigate to the next month in the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/NextMonthButton.js

@@ -10,3 +10,3 @@ "use strict";

/**
* Render the next month button element in the calendar.
* Render the button to navigate to the next month in the calendar.
*

@@ -13,0 +13,0 @@ * @group Components

2

dist/cjs/components/Option.d.ts
import React, { type OptionHTMLAttributes } from "react";
/**
* Render the `option` element.
* Render an `option` element.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/Option.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the `option` element.
* Render an `option` element.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/PreviousMonthButton.d.ts
import React, { type ButtonHTMLAttributes } from "react";
/**
* Render the previous month button element in the calendar.
* Render the button to navigate to the previous month in the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/PreviousMonthButton.js

@@ -10,3 +10,3 @@ "use strict";

/**
* Render the previous month button element in the calendar.
* Render the button to navigate to the previous month in the calendar.
*

@@ -13,0 +13,0 @@ * @group Components

4

dist/cjs/components/Root.d.ts
import React, { type Ref, type HTMLAttributes } from "react";
/**
* Render the root element.
* Render the root element of the calendar.
*

@@ -9,5 +9,5 @@ * @group Components

export declare function Root(props: {
/** Ref for root element used when `animate` is `true`. */
/** Ref for the root element, used when `animate` is `true`. */
rootRef?: Ref<HTMLDivElement>;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type RootProps = Parameters<typeof Root>[0];

2

dist/cjs/components/Root.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the root element.
* Render the root element of the calendar.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/Select.d.ts
import React, { type SelectHTMLAttributes } from "react";
/**
* Render the `select` element.
* Render a `select` element.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/Select.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the `select` element.
* Render a `select` element.
*

@@ -12,0 +12,0 @@ * @group Components

3

dist/cjs/components/Week.d.ts
import React, { type HTMLAttributes } from "react";
import type { CalendarWeek } from "../classes/index.js";
/**
* Render a row in the calendar, with the days and the week number.
* Render a table row representing a week in the calendar.
*

@@ -10,4 +10,5 @@ * @group Components

export declare function Week(props: {
/** The week to render. */
week: CalendarWeek;
} & HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
export type WeekProps = Parameters<typeof Week>[0];

2

dist/cjs/components/Week.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render a row in the calendar, with the days and the week number.
* Render a table row representing a week in the calendar.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/Weekday.d.ts
import React, { type ThHTMLAttributes } from "react";
/**
* Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
* Render a table header cell with the name of a weekday (e.g., "Mo", "Tu").
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/Weekday.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
* Render a table header cell with the name of a weekday (e.g., "Mo", "Tu").
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/Weekdays.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Render the row with the weekday names.
* Render the table row containing the weekday names.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/Weekdays.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the row with the weekday names.
* Render the table row containing the weekday names.
*

@@ -12,0 +12,0 @@ * @group Components

4

dist/cjs/components/WeekNumber.d.ts
import React, { type ThHTMLAttributes } from "react";
import type { CalendarWeek } from "../classes/index.js";
/**
* Render the cell with the number of the week.
* Render a table cell displaying the number of the week.
*

@@ -10,5 +10,5 @@ * @group Components

export declare function WeekNumber(props: {
/** The week to render. */
/** The week to display. */
week: CalendarWeek;
} & ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
export type WeekNumberProps = Parameters<typeof WeekNumber>[0];

2

dist/cjs/components/WeekNumber.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the cell with the number of the week.
* Render a table cell displaying the number of the week.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/WeekNumberHeader.d.ts
import React, { type ThHTMLAttributes } from "react";
/**
* Render the column header for the week numbers.
* Render the header cell for the week numbers column.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/WeekNumberHeader.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the column header for the week numbers.
* Render the header cell for the week numbers column.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/Weeks.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Render the weeks in the month grid.
* Render the container for the weeks in the month grid.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/cjs/components/Weeks.js

@@ -9,3 +9,3 @@ "use strict";

/**
* Render the weeks in the month grid.
* Render the container for the weeks in the month grid.
*

@@ -12,0 +12,0 @@ * @group Components

2

dist/cjs/components/YearsDropdown.d.ts
import React from "react";
import { DropdownProps } from "./Dropdown.js";
/**
* Render the dropdown to navigate between years.
* Render a dropdown to navigate between years in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

2

dist/cjs/components/YearsDropdown.js

@@ -10,3 +10,3 @@ "use strict";

/**
* Render the dropdown to navigate between years.
* Render a dropdown to navigate between years in the calendar.
*

@@ -13,0 +13,0 @@ * @group Components

6

dist/cjs/DayPicker.d.ts
import React from "react";
import type { DayPickerProps } from "./types/index.js";
/**
* Render the date picker calendar.
* Renders the DayPicker calendar component.
*
* @param initialProps - The props for the DayPicker component.
* @returns The rendered DayPicker component.
* @group DayPicker
* @see https://daypicker.dev
*/
export declare function DayPicker(props: DayPickerProps): React.JSX.Element;
export declare function DayPicker(initialProps: DayPickerProps): React.JSX.Element;

67

dist/cjs/DayPicker.js

@@ -38,4 +38,6 @@ "use strict";

const react_1 = __importStar(require("react"));
const tz_1 = require("@date-fns/tz");
const UI_js_1 = require("./UI.js");
const DateLib_js_1 = require("./classes/DateLib.js");
const createGetModifiers_js_1 = require("./helpers/createGetModifiers.js");
const getClassNamesForModifiers_js_1 = require("./helpers/getClassNamesForModifiers.js");

@@ -55,3 +57,2 @@ const getComponents_js_1 = require("./helpers/getComponents.js");

const useFocus_js_1 = require("./useFocus.js");
const useGetModifiers_js_1 = require("./useGetModifiers.js");
const useSelection_js_1 = require("./useSelection.js");

@@ -61,8 +62,47 @@ const rangeIncludesDate_js_1 = require("./utils/rangeIncludesDate.js");

/**
* Render the date picker calendar.
* Renders the DayPicker calendar component.
*
* @param initialProps - The props for the DayPicker component.
* @returns The rendered DayPicker component.
* @group DayPicker
* @see https://daypicker.dev
*/
function DayPicker(props) {
function DayPicker(initialProps) {
let props = initialProps;
if (props.timeZone) {
props = {
...initialProps
};
if (props.today) {
props.today = new tz_1.TZDate(props.today, props.timeZone);
}
if (props.month) {
props.month = new tz_1.TZDate(props.month, props.timeZone);
}
if (props.defaultMonth) {
props.defaultMonth = new tz_1.TZDate(props.defaultMonth, props.timeZone);
}
if (props.startMonth) {
props.startMonth = new tz_1.TZDate(props.startMonth, props.timeZone);
}
if (props.endMonth) {
props.endMonth = new tz_1.TZDate(props.endMonth, props.timeZone);
}
if (props.mode === "single" && props.selected) {
props.selected = new tz_1.TZDate(props.selected, props.timeZone);
}
else if (props.mode === "multiple" && props.selected) {
props.selected = props.selected?.map((date) => new tz_1.TZDate(date, props.timeZone));
}
else if (props.mode === "range" && props.selected) {
props.selected = {
from: props.selected.from
? new tz_1.TZDate(props.selected.from, props.timeZone)
: undefined,
to: props.selected.to
? new tz_1.TZDate(props.selected.to, props.timeZone)
: undefined
};
}
}
const { components, formatters, labels, dateLib, locale, classNames } = (0, react_1.useMemo)(() => {

@@ -102,10 +142,10 @@ const locale = { ...DateLib_js_1.defaultLocale, ...props.locale };

]);
const { captionLayout, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles } = props;
const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles } = props;
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters;
const calendar = (0, useCalendar_js_1.useCalendar)(props, dateLib);
const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar;
const getModifiers = (0, useGetModifiers_js_1.useGetModifiers)(days, props, dateLib);
const getModifiers = (0, createGetModifiers_js_1.createGetModifiers)(days, props, dateLib);
const { isSelected, select, selected: selectedValue } = (0, useSelection_js_1.useSelection)(props, dateLib) ?? {};
const { blur, focused, isFocusTarget, moveFocus, setFocused } = (0, useFocus_js_1.useFocus)(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelPrevious, labelNext, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
const weekdays = (0, react_1.useMemo)(() => (0, getWeekdays_js_1.getWeekdays)(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);

@@ -208,3 +248,3 @@ const isInteractive = mode !== undefined || onDayClick !== undefined;

react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] },
!props.hideNavigation && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
!props.hideNavigation && !navLayout && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
months.map((calendarMonth, displayIndex) => {

@@ -214,2 +254,6 @@ const dropdownMonths = (0, getMonthOptions_js_1.getMonthOptions)(calendarMonth.date, navStart, navEnd, formatters, dateLib);

return (react_1.default.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
navLayout === "around" &&
!props.hideNavigation &&
displayIndex === 0 && (react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
react_1.default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] },

@@ -232,2 +276,9 @@ captionLayout === "dropdown" ||

} }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
navLayout === "around" &&
!props.hideNavigation &&
displayIndex === numberOfMonths - 1 && (react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
displayIndex === numberOfMonths - 1 &&
navLayout === "after" &&
!props.hideNavigation && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
react_1.default.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||

@@ -242,3 +293,3 @@ undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] },

locale
}), className: classNames[UI_js_1.UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber))),
}), className: classNames[UI_js_1.UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
week.days.map((day) => {

@@ -245,0 +296,0 @@ const { date } = day;

9

dist/cjs/formatters/formatCaption.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the caption of the month.
* Formats the caption of the month.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param month The date representing the month.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted caption as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/cjs/formatters/formatCaption.js

@@ -7,5 +7,10 @@ "use strict";

/**
* Format the caption of the month.
* Formats the caption of the month.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param month The date representing the month.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted caption as a string.
* @group Formatters

@@ -12,0 +17,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/cjs/formatters/formatDay.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the day date shown in the day cell.
* Formats the day date shown in the day cell.
*
* @defaultValue `d` (e.g. "1")
* @defaultValue `d` (e.g., "1").
* @param date The date to format.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted day as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/cjs/formatters/formatDay.js

@@ -6,5 +6,10 @@ "use strict";

/**
* Format the day date shown in the day cell.
* Formats the day date shown in the day cell.
*
* @defaultValue `d` (e.g. "1")
* @defaultValue `d` (e.g., "1").
* @param date The date to format.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted day as a string.
* @group Formatters

@@ -11,0 +16,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

8

dist/cjs/formatters/formatMonthDropdown.d.ts
import { type DateLib } from "../classes/DateLib.js";
/**
* Format the month number for the dropdown option label.
* Formats the month for the dropdown option label.
*
* @defaultValue The localized month name
* @defaultValue The localized full month name.
* @param month The date representing the month.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted month name as a string.
* @group Formatters

@@ -7,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

8

dist/cjs/formatters/formatMonthDropdown.js

@@ -6,5 +6,9 @@ "use strict";

/**
* Format the month number for the dropdown option label.
* Formats the month for the dropdown option label.
*
* @defaultValue The localized month name
* @defaultValue The localized full month name.
* @param month The date representing the month.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted month name as a string.
* @group Formatters

@@ -11,0 +15,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/cjs/formatters/formatWeekdayName.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the weekday name to be displayed in the weekdays header.
* Formats the name of a weekday to be displayed in the weekdays header.
*
* @defaultValue `cccccc` (e.g. "Mo" for Monday)
* @defaultValue `cccccc` (e.g., "Mo" for Monday).
* @param weekday The date representing the weekday.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted weekday name as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/cjs/formatters/formatWeekdayName.js

@@ -6,5 +6,10 @@ "use strict";

/**
* Format the weekday name to be displayed in the weekdays header.
* Formats the name of a weekday to be displayed in the weekdays header.
*
* @defaultValue `cccccc` (e.g. "Mo" for Monday)
* @defaultValue `cccccc` (e.g., "Mo" for Monday).
* @param weekday The date representing the weekday.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted weekday name as a string.
* @group Formatters

@@ -11,0 +16,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

10

dist/cjs/formatters/formatWeekNumber.d.ts
/**
* Format the week number.
* Formats the week number.
*
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
* @defaultValue The week number as a string, with a leading zero for single-digit numbers.
* @param weekNumber The week number to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted week number as a string.
* @group Formatters
* @see https://daypicker.dev/docs/translation#custom-formatters
*/
export declare function formatWeekNumber(weekNumber: number): string;
export declare function formatWeekNumber(weekNumber: number, dateLib?: import("../classes/DateLib.js").DateLib): string;

15

dist/cjs/formatters/formatWeekNumber.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.formatWeekNumber = formatWeekNumber;
const DateLib_js_1 = require("../classes/DateLib.js");
/**
* Format the week number.
* Formats the week number.
*
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
* @defaultValue The week number as a string, with a leading zero for single-digit numbers.
* @param weekNumber The week number to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted week number as a string.
* @group Formatters
* @see https://daypicker.dev/docs/translation#custom-formatters
*/
function formatWeekNumber(weekNumber) {
function formatWeekNumber(weekNumber, dateLib = DateLib_js_1.defaultDateLib) {
if (weekNumber < 10) {
return `0${weekNumber.toLocaleString()}`;
return dateLib.formatNumber(`0${weekNumber.toLocaleString()}`);
}
return `${weekNumber.toLocaleString()}`;
return dateLib.formatNumber(`${weekNumber.toLocaleString()}`);
}
//# sourceMappingURL=formatWeekNumber.js.map

5

dist/cjs/formatters/formatWeekNumberHeader.d.ts
/**
* Format the week number header.
* Formats the header for the week number column.
*
* @defaultValue `""`
* @defaultValue An empty string `""`.
* @returns The formatted week number header as a string.
* @group Formatters

@@ -6,0 +7,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

5

dist/cjs/formatters/formatWeekNumberHeader.js

@@ -5,5 +5,6 @@ "use strict";

/**
* Format the week number header.
* Formats the header for the week number column.
*
* @defaultValue `""`
* @defaultValue An empty string `""`.
* @returns The formatted week number header as a string.
* @group Formatters

@@ -10,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

6

dist/cjs/formatters/formatYearDropdown.d.ts
import { type DateLib } from "../classes/DateLib.js";
/**
* Format the years for the dropdown option label.
* Formats the year for the dropdown option label.
*
* @param year The year to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted year as a string.
* @group Formatters

@@ -6,0 +10,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

6

dist/cjs/formatters/formatYearDropdown.js

@@ -7,4 +7,8 @@ "use strict";

/**
* Format the years for the dropdown option label.
* Formats the year for the dropdown option label.
*
* @param year The year to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted year as a string.
* @group Formatters

@@ -11,0 +15,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

14

dist/cjs/helpers/calculateFocusTarget.d.ts
import type { CalendarDay } from "../classes/index.js";
import type { Modifiers } from "../types/index.js";
/**
* Calculates the focus target day based on priority.
*
* This function determines the day that should receive focus in the calendar,
* prioritizing days with specific modifiers (e.g., "focused", "today") or
* selection states.
*
* @param days The array of `CalendarDay` objects to evaluate.
* @param getModifiers A function to retrieve the modifiers for a given day.
* @param isSelected A function to determine if a day is selected.
* @param lastFocused The last focused day, if any.
* @returns The `CalendarDay` that should receive focus, or `undefined` if no
* focusable day is found.
*/
export declare function calculateFocusTarget(days: CalendarDay[], getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, lastFocused: CalendarDay | undefined): CalendarDay | undefined;

25

dist/cjs/helpers/calculateFocusTarget.js

@@ -12,2 +12,11 @@ "use strict";

})(FocusTargetPriority || (FocusTargetPriority = {}));
/**
* Determines if a day is focusable based on its modifiers.
*
* A day is considered focusable if it is not disabled, hidden, or outside the
* displayed month.
*
* @param modifiers The modifiers applied to the day.
* @returns `true` if the day is focusable, otherwise `false`.
*/
function isFocusableDay(modifiers) {

@@ -18,2 +27,16 @@ return (!modifiers[UI_js_1.DayFlag.disabled] &&

}
/**
* Calculates the focus target day based on priority.
*
* This function determines the day that should receive focus in the calendar,
* prioritizing days with specific modifiers (e.g., "focused", "today") or
* selection states.
*
* @param days The array of `CalendarDay` objects to evaluate.
* @param getModifiers A function to retrieve the modifiers for a given day.
* @param isSelected A function to determine if a day is selected.
* @param lastFocused The last focused day, if any.
* @returns The `CalendarDay` that should receive focus, or `undefined` if no
* focusable day is found.
*/
function calculateFocusTarget(days, getModifiers, isSelected, lastFocused) {

@@ -48,3 +71,3 @@ let focusTarget;

if (!focusTarget) {
// return the first day that is focusable
// Return the first day that is focusable
focusTarget = days.find((day) => isFocusableDay(getModifiers(day)));

@@ -51,0 +74,0 @@ }

8

dist/cjs/helpers/endOfBroadcastWeek.d.ts
import type { DateLib } from "../classes/index.js";
/**
* Return the end date of the week in the broadcast calendar.
* Returns the end date of the week in the broadcast calendar.
*
* The broadcast week ends on the last day of the last broadcast week for the
* given date.
*
* @since 9.4.0
* @param date The date for which to calculate the end of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The end date of the broadcast week.
*/
export declare function endOfBroadcastWeek(date: Date, dateLib: DateLib): Date;

8

dist/cjs/helpers/endOfBroadcastWeek.js

@@ -7,5 +7,11 @@ "use strict";

/**
* Return the end date of the week in the broadcast calendar.
* Returns the end date of the week in the broadcast calendar.
*
* The broadcast week ends on the last day of the last broadcast week for the
* given date.
*
* @since 9.4.0
* @param date The date for which to calculate the end of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The end date of the broadcast week.
*/

@@ -12,0 +18,0 @@ function endOfBroadcastWeek(date, dateLib) {

9

dist/cjs/helpers/getBroadcastWeeksInMonth.d.ts
import { DateLib } from "../classes/index.js";
/**
* Return the number of weeks to display in the broadcast calendar.
* Returns the number of weeks to display in the broadcast calendar for a given
* month.
*
* The broadcast calendar may have either 4 or 5 weeks in a month, depending on
* the start and end dates of the broadcast weeks.
*
* @since 9.4.0
* @param month The month for which to calculate the number of weeks.
* @param dateLib The date library to use for date manipulation.
* @returns The number of weeks in the broadcast calendar (4 or 5).
*/
export declare function getBroadcastWeeksInMonth(month: Date, dateLib: DateLib): 4 | 5;

9

dist/cjs/helpers/getBroadcastWeeksInMonth.js

@@ -7,5 +7,12 @@ "use strict";

/**
* Return the number of weeks to display in the broadcast calendar.
* Returns the number of weeks to display in the broadcast calendar for a given
* month.
*
* The broadcast calendar may have either 4 or 5 weeks in a month, depending on
* the start and end dates of the broadcast weeks.
*
* @since 9.4.0
* @param month The month for which to calculate the number of weeks.
* @param dateLib The date library to use for date manipulation.
* @returns The number of weeks in the broadcast calendar (4 or 5).
*/

@@ -12,0 +19,0 @@ function getBroadcastWeeksInMonth(month, dateLib) {

12

dist/cjs/helpers/getClassNamesForModifiers.d.ts
import type { ModifiersClassNames, ClassNames } from "../types/index.js";
/**
* Returns the class names for a day based on its modifiers.
*
* This function combines the base class name for the day with any class names
* associated with active modifiers.
*
* @param modifiers The modifiers applied to the day.
* @param classNames The base class names for the calendar elements.
* @param modifiersClassNames The class names associated with specific
* modifiers.
* @returns An array of class names for the day.
*/
export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, classNames: ClassNames, modifiersClassNames?: ModifiersClassNames): string[];

12

dist/cjs/helpers/getClassNamesForModifiers.js

@@ -5,2 +5,14 @@ "use strict";

const UI_js_1 = require("../UI.js");
/**
* Returns the class names for a day based on its modifiers.
*
* This function combines the base class name for the day with any class names
* associated with active modifiers.
*
* @param modifiers The modifiers applied to the day.
* @param classNames The base class names for the calendar elements.
* @param modifiersClassNames The class names associated with specific
* modifiers.
* @returns An array of class names for the day.
*/
function getClassNamesForModifiers(modifiers, classNames, modifiersClassNames = {}) {

@@ -7,0 +19,0 @@ const modifierClassNames = Object.entries(modifiers)

10

dist/cjs/helpers/getComponents.d.ts
import type { CustomComponents, DayPickerProps } from "../types/index.js";
/**
* Merges custom components from the props with the default components.
*
* This function ensures that any custom components provided in the props
* override the default components.
*
* @param customComponents The custom components provided in the DayPicker
* props.
* @returns An object containing the merged components.
*/
export declare function getComponents(customComponents: DayPickerProps["components"]): CustomComponents;

10

dist/cjs/helpers/getComponents.js

@@ -38,2 +38,12 @@ "use strict";

const components = __importStar(require("../components/custom-components.js"));
/**
* Merges custom components from the props with the default components.
*
* This function ensures that any custom components provided in the props
* override the default components.
*
* @param customComponents The custom components provided in the DayPicker
* props.
* @returns An object containing the merged components.
*/
function getComponents(customComponents) {

@@ -40,0 +50,0 @@ return {

10

dist/cjs/helpers/getDataAttributes.d.ts
import type { DayPickerProps } from "../types/index.js";
/** Return the `data-` attributes from the props. */
/**
* Extracts `data-` attributes from the DayPicker props.
*
* This function collects all `data-` attributes from the props and adds
* additional attributes based on the DayPicker configuration.
*
* @param props The DayPicker props.
* @returns An object containing the `data-` attributes.
*/
export declare function getDataAttributes(props: DayPickerProps): Record<string, unknown>;

13

dist/cjs/helpers/getDataAttributes.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getDataAttributes = getDataAttributes;
/** Return the `data-` attributes from the props. */
/**
* Extracts `data-` attributes from the DayPicker props.
*
* This function collects all `data-` attributes from the props and adds
* additional attributes based on the DayPicker configuration.
*
* @param props The DayPicker props.
* @returns An object containing the `data-` attributes.
*/
function getDataAttributes(props) {

@@ -11,3 +19,4 @@ const dataAttributes = {

"data-week-numbers": props.showWeekNumber || undefined,
"data-broadcast-calendar": props.broadcastCalendar || undefined
"data-broadcast-calendar": props.broadcastCalendar || undefined,
"data-nav-layout": props.navLayout || undefined
};

@@ -14,0 +23,0 @@ Object.entries(props).forEach(([key, val]) => {

13

dist/cjs/helpers/getDates.d.ts
import { type DateLib } from "../classes/DateLib.js";
import { type DayPickerProps } from "../types/props.js";
/** Return all the dates to display in the calendar. */
/**
* Returns all the dates to display in the calendar.
*
* This function calculates the range of dates to display based on the provided
* display months, constraints, and calendar configuration.
*
* @param displayMonths The months to display in the calendar.
* @param maxDate The maximum date to include in the range.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates to display in the calendar.
*/
export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks" | "broadcastCalendar">, dateLib: DateLib): Date[];

15

dist/cjs/helpers/getDates.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getDates = getDates;
/** Return all the dates to display in the calendar. */
/**
* Returns all the dates to display in the calendar.
*
* This function calculates the range of dates to display based on the provided
* display months, constraints, and calendar configuration.
*
* @param displayMonths The months to display in the calendar.
* @param maxDate The maximum date to include in the range.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates to display in the calendar.
*/
function getDates(displayMonths, maxDate, props, dateLib) {

@@ -16,3 +27,3 @@ const firstMonth = displayMonths[0];

const endWeekLastDate = broadcastCalendar
? endOfBroadcastWeek(lastMonth, dateLib)
? endOfBroadcastWeek(lastMonth)
: ISOWeek

@@ -19,0 +30,0 @@ ? endOfISOWeek(endOfMonth(lastMonth))

4

dist/cjs/helpers/getDays.d.ts

@@ -5,3 +5,7 @@ import type { CalendarDay, CalendarMonth } from "../classes/index.js";

* weeks for each month.
*
* @param calendarMonths The array of calendar months.
* @returns An array of `CalendarDay` objects representing all the days in the
* calendar.
*/
export declare function getDays(calendarMonths: CalendarMonth[]): CalendarDay[];

5

dist/cjs/helpers/getDays.js

@@ -7,2 +7,6 @@ "use strict";

* weeks for each month.
*
* @param calendarMonths The array of calendar months.
* @returns An array of `CalendarDay` objects representing all the days in the
* calendar.
*/

@@ -12,3 +16,2 @@ function getDays(calendarMonths) {

return calendarMonths.reduce((days, month) => {
const initialDays = [];
const weekDays = month.weeks.reduce((weekDays, week) => {

@@ -15,0 +18,0 @@ return [...weekDays, ...week.days];

6

dist/cjs/helpers/getDefaultClassNames.d.ts
import type { ClassNames } from "../types/index.js";
/**
* Get the default class names for the UI elements.
* Returns the default class names for the UI elements.
*
* This function generates a mapping of default class names for various UI
* elements, day flags, selection states, and animations.
*
* @returns An object containing the default class names.
* @group Utilities
*/
export declare function getDefaultClassNames(): ClassNames;

6

dist/cjs/helpers/getDefaultClassNames.js

@@ -6,4 +6,8 @@ "use strict";

/**
* Get the default class names for the UI elements.
* Returns the default class names for the UI elements.
*
* This function generates a mapping of default class names for various UI
* elements, day flags, selection states, and animations.
*
* @returns An object containing the default class names.
* @group Utilities

@@ -10,0 +14,0 @@ */

10

dist/cjs/helpers/getDisplayMonths.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/**
* Returns the months to display in the calendar.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including `numberOfMonths`.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates representing the months to display.
*/
export declare function getDisplayMonths(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "numberOfMonths">, dateLib: DateLib): Date[];

10

dist/cjs/helpers/getDisplayMonths.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getDisplayMonths = getDisplayMonths;
/**
* Returns the months to display in the calendar.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including `numberOfMonths`.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates representing the months to display.
*/
function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib) {

@@ -5,0 +15,0 @@ const { numberOfMonths = 1 } = props;

17

dist/cjs/helpers/getFocusableDate.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types/index.js";
/** Return the next date that should be focused. */
/**
* Calculates the next date that should be focused in the calendar.
*
* This function determines the next focusable date based on the movement
* direction, constraints, and calendar configuration.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDate The reference date from which to calculate the next focusable
* date.
* @param navStart The earliest date the user can navigate to.
* @param navEnd The latest date the user can navigate to.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns The next focusable date.
*/
export declare function getFocusableDate(moveBy: MoveFocusBy, moveDir: MoveFocusDir, refDate: Date, navStart: Date | undefined, navEnd: Date | undefined, props: Pick<DayPickerProps, "ISOWeek" | "broadcastCalendar">, dateLib: DateLib): Date;

19

dist/cjs/helpers/getFocusableDate.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getFocusableDate = getFocusableDate;
/** Return the next date that should be focused. */
/**
* Calculates the next date that should be focused in the calendar.
*
* This function determines the next focusable date based on the movement
* direction, constraints, and calendar configuration.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDate The reference date from which to calculate the next focusable
* date.
* @param navStart The earliest date the user can navigate to.
* @param navEnd The latest date the user can navigate to.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns The next focusable date.
*/
function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {

@@ -19,3 +34,3 @@ const { ISOWeek, broadcastCalendar } = props;

endOfWeek: (date) => broadcastCalendar
? endOfBroadcastWeek(date, dateLib)
? endOfBroadcastWeek(date)
: ISOWeek

@@ -22,0 +37,0 @@ ? endOfISOWeek(date)

8

dist/cjs/helpers/getFormatters.d.ts
import * as defaultFormatters from "../formatters/index.js";
import type { DayPickerProps } from "../types/index.js";
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom formatters from the props with the default formatters.
*
* @param customFormatters The custom formatters provided in the DayPicker
* props.
* @returns The merged formatters object.
*/
export declare function getFormatters(customFormatters: DayPickerProps["formatters"]): {

@@ -5,0 +11,0 @@ formatCaption: typeof defaultFormatters.formatCaption;

8

dist/cjs/helpers/getFormatters.js

@@ -38,3 +38,9 @@ "use strict";

const defaultFormatters = __importStar(require("../formatters/index.js"));
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom formatters from the props with the default formatters.
*
* @param customFormatters The custom formatters provided in the DayPicker
* props.
* @returns The merged formatters object.
*/
function getFormatters(customFormatters) {

@@ -41,0 +47,0 @@ if (customFormatters?.formatMonthCaption && !customFormatters.formatCaption) {

12

dist/cjs/helpers/getInitialMonth.d.ts
import { type DateLib } from "../classes/DateLib.js";
import { type DayPickerProps } from "../types/props.js";
/** Return the start month based on the props passed to DayPicker. */
/**
* Determines the initial month to display in the calendar based on the provided
* props.
*
* This function calculates the starting month, considering constraints such as
* `startMonth`, `endMonth`, and the number of months to display.
*
* @param props The DayPicker props, including navigation and date constraints.
* @param dateLib The date library to use for date manipulation.
* @returns The initial month to display.
*/
export declare function getInitialMonth(props: Pick<DayPickerProps, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths" | "timeZone">, dateLib: DateLib): Date;

21

dist/cjs/helpers/getInitialMonth.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getInitialMonth = getInitialMonth;
const tz_1 = require("@date-fns/tz");
/** Return the start month based on the props passed to DayPicker. */
/**
* Determines the initial month to display in the calendar based on the provided
* props.
*
* This function calculates the starting month, considering constraints such as
* `startMonth`, `endMonth`, and the number of months to display.
*
* @param props The DayPicker props, including navigation and date constraints.
* @param dateLib The date library to use for date manipulation.
* @returns The initial month to display.
*/
function getInitialMonth(props, dateLib) {
const { month, defaultMonth, today = dateLib.today(), numberOfMonths = 1, endMonth, startMonth, timeZone } = props;
const { month, defaultMonth, today = dateLib.today(), numberOfMonths = 1, endMonth, startMonth } = props;
let initialMonth = month || defaultMonth || today;
const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib;
// Fix the initialMonth if is after the endMonth
// Adjust the initial month if it is after the endMonth
if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) {

@@ -15,10 +24,8 @@ const offset = -1 * (numberOfMonths - 1);

}
// Fix the initialMonth if is before the startMonth
// Adjust the initial month if it is before the startMonth
if (startMonth && differenceInCalendarMonths(initialMonth, startMonth) < 0) {
initialMonth = startMonth;
}
// When timeZone is provided, convert initialMonth to TZDate type to ensure proper timezone handling
initialMonth = timeZone ? new tz_1.TZDate(initialMonth, timeZone) : initialMonth;
return startOfMonth(initialMonth);
}
//# sourceMappingURL=getInitialMonth.js.map

7

dist/cjs/helpers/getLabels.d.ts
import type { DayPickerProps, Labels } from "../types/index.js";
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom labels from the props with the default labels.
*
* @param customLabels The custom labels provided in the DayPicker props.
* @returns The merged labels object.
*/
export declare function getLabels(customLabels: DayPickerProps["labels"]): Labels;

7

dist/cjs/helpers/getLabels.js

@@ -38,3 +38,8 @@ "use strict";

const defaultLabels = __importStar(require("../labels/index.js"));
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom labels from the props with the default labels.
*
* @param customLabels The custom labels provided in the DayPicker props.
* @returns The merged labels object.
*/
function getLabels(customLabels) {

@@ -41,0 +46,0 @@ return {

16

dist/cjs/helpers/getMonthOptions.d.ts
import { type DateLib } from "../classes/DateLib.js";
import { DropdownOption } from "../components/Dropdown.js";
import type { Formatters } from "../types/index.js";
/** Return the months to show in the dropdown. */
/**
* Returns the months to show in the dropdown.
*
* This function generates a list of months for the current year, formatted
* using the provided formatter, and determines whether each month should be
* disabled based on the navigation range.
*
* @param displayMonth The currently displayed month.
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the month labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the months, or `undefined`
* if no months are available.
*/
export declare function getMonthOptions(displayMonth: Date, navStart: Date | undefined, navEnd: Date | undefined, formatters: Pick<Formatters, "formatMonthDropdown">, dateLib: DateLib): DropdownOption[] | undefined;

16

dist/cjs/helpers/getMonthOptions.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getMonthOptions = getMonthOptions;
/** Return the months to show in the dropdown. */
/**
* Returns the months to show in the dropdown.
*
* This function generates a list of months for the current year, formatted
* using the provided formatter, and determines whether each month should be
* disabled based on the navigation range.
*
* @param displayMonth The currently displayed month.
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the month labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the months, or `undefined`
* if no months are available.
*/
function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {

@@ -6,0 +20,0 @@ const { startOfMonth, startOfYear, endOfYear, eachMonthOfInterval, getMonth } = dateLib;

23

dist/cjs/helpers/getMonths.d.ts
import type { DateLib } from "../classes/DateLib.js";
import { CalendarMonth } from "../classes/index.js";
import type { DayPickerProps } from "../types/index.js";
/** Return the months to display in the calendar. */
export declare function getMonths(
/** The months (as dates) to display in the calendar. */
displayMonths: Date[],
/** The dates to display in the calendar. */
dates: Date[],
/** Options from the props context. */
props: Pick<DayPickerProps, "broadcastCalendar" | "fixedWeeks" | "ISOWeek" | "reverseMonths">, dateLib: DateLib): CalendarMonth[];
/**
* Returns the months to display in the calendar.
*
* This function generates `CalendarMonth` objects for each month to be
* displayed, including their weeks and days, based on the provided display
* months and dates.
*
* @param displayMonths The months (as dates) to display in the calendar.
* @param dates The dates to display in the calendar.
* @param props Options from the DayPicker props context.
* @param dateLib The date library to use for date manipulation.
* @returns An array of `CalendarMonth` objects representing the months to
* display.
*/
export declare function getMonths(displayMonths: Date[], dates: Date[], props: Pick<DayPickerProps, "broadcastCalendar" | "fixedWeeks" | "ISOWeek" | "reverseMonths">, dateLib: DateLib): CalendarMonth[];

25

dist/cjs/helpers/getMonths.js

@@ -5,10 +5,17 @@ "use strict";

const index_js_1 = require("../classes/index.js");
/** Return the months to display in the calendar. */
function getMonths(
/** The months (as dates) to display in the calendar. */
displayMonths,
/** The dates to display in the calendar. */
dates,
/** Options from the props context. */
props, dateLib) {
/**
* Returns the months to display in the calendar.
*
* This function generates `CalendarMonth` objects for each month to be
* displayed, including their weeks and days, based on the provided display
* months and dates.
*
* @param displayMonths The months (as dates) to display in the calendar.
* @param dates The dates to display in the calendar.
* @param props Options from the DayPicker props context.
* @param dateLib The date library to use for date manipulation.
* @returns An array of `CalendarMonth` objects representing the months to
* display.
*/
function getMonths(displayMonths, dates, props, dateLib) {
const { addDays, endOfBroadcastWeek, endOfISOWeek, endOfMonth, endOfWeek, getISOWeek, getWeek, startOfBroadcastWeek, startOfISOWeek, startOfWeek } = dateLib;

@@ -22,3 +29,3 @@ const dayPickerMonths = displayMonths.reduce((months, month) => {

const lastDateOfLastWeek = props.broadcastCalendar
? endOfBroadcastWeek(month, dateLib)
? endOfBroadcastWeek(month)
: props.ISOWeek

@@ -25,0 +32,0 @@ ? endOfISOWeek(endOfMonth(month))

8

dist/cjs/helpers/getNavMonth.d.ts
import { type DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/** Return the start and end months for the calendar navigation. */
/**
* Returns the start and end months for calendar navigation.
*
* @param props The DayPicker props, including navigation and layout options.
* @param dateLib The date library to use for date manipulation.
* @returns A tuple containing the start and end months for navigation.
*/
export declare function getNavMonths(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "timeZone" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): [start: Date | undefined, end: Date | undefined];

8

dist/cjs/helpers/getNavMonth.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getNavMonths = getNavMonths;
/** Return the start and end months for the calendar navigation. */
/**
* Returns the start and end months for calendar navigation.
*
* @param props The DayPicker props, including navigation and layout options.
* @param dateLib The date library to use for date manipulation.
* @returns A tuple containing the start and end months for navigation.
*/
function getNavMonths(props, dateLib) {

@@ -6,0 +12,0 @@ let { startMonth, endMonth } = props;

21

dist/cjs/helpers/getNextFocus.d.ts
import type { DateLib } from "../classes/DateLib.js";
import { CalendarDay } from "../classes/index.js";
import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types/index.js";
export declare function getNextFocus(moveBy: MoveFocusBy, moveDir: MoveFocusDir,
/** The date that is currently focused. */
refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "ISOWeek" | "timeZone">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;
/**
* Determines the next focusable day in the calendar.
*
* This function recursively calculates the next focusable day based on the
* movement direction and modifiers applied to the days.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDay The currently focused day.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including modifiers and configuration
* options.
* @param dateLib The date library to use for date manipulation.
* @param attempt The current recursion attempt (used to limit recursion depth).
* @returns The next focusable day, or `undefined` if no focusable day is found.
*/
export declare function getNextFocus(moveBy: MoveFocusBy, moveDir: MoveFocusDir, refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "ISOWeek" | "timeZone">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;

24

dist/cjs/helpers/getNextFocus.js

@@ -7,5 +7,20 @@ "use strict";

const getFocusableDate_js_1 = require("./getFocusableDate.js");
function getNextFocus(moveBy, moveDir,
/** The date that is currently focused. */
refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) {
/**
* Determines the next focusable day in the calendar.
*
* This function recursively calculates the next focusable day based on the
* movement direction and modifiers applied to the days.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDay The currently focused day.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including modifiers and configuration
* options.
* @param dateLib The date library to use for date manipulation.
* @param attempt The current recursion attempt (used to limit recursion depth).
* @returns The next focusable day, or `undefined` if no focusable day is found.
*/
function getNextFocus(moveBy, moveDir, refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) {
if (attempt > 365) {

@@ -15,4 +30,3 @@ // Limit the recursion to 365 attempts

}
const focusableDate = (0, getFocusableDate_js_1.getFocusableDate)(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date?
calendarStartMonth, calendarEndMonth, props, dateLib);
const focusableDate = (0, getFocusableDate_js_1.getFocusableDate)(moveBy, moveDir, refDay.date, calendarStartMonth, calendarEndMonth, props, dateLib);
const isDisabled = Boolean(props.disabled && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, props.disabled, dateLib));

@@ -19,0 +33,0 @@ const isHidden = Boolean(props.hidden && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, props.hidden, dateLib));

18

dist/cjs/helpers/getNextMonth.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/**
* Return the next month the user can navigate to according to the given
* options.
* Returns the next month the user can navigate to, based on the given options.
*
* Please note that the next month is not always the next calendar month:
* The next month is not always the next calendar month:
*
* - If after the `calendarEndMonth` range, is `undefined`;
* - If the navigation is paged , is the number of months displayed ahead.
* - If it is after the `calendarEndMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips forward by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The next month, or `undefined` if navigation is not possible.
*/
export declare function getNextMonth(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined;

19

dist/cjs/helpers/getNextMonth.js

@@ -5,9 +5,17 @@ "use strict";

/**
* Return the next month the user can navigate to according to the given
* options.
* Returns the next month the user can navigate to, based on the given options.
*
* Please note that the next month is not always the next calendar month:
* The next month is not always the next calendar month:
*
* - If after the `calendarEndMonth` range, is `undefined`;
* - If the navigation is paged , is the number of months displayed ahead.
* - If it is after the `calendarEndMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips forward by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The next month, or `undefined` if navigation is not possible.
*/

@@ -29,5 +37,4 @@ function getNextMonth(firstDisplayedMonth, calendarEndMonth, options, dateLib) {

}
// Jump forward as the number of months when paged navigation
return addMonths(month, offset);
}
//# sourceMappingURL=getNextMonth.js.map

18

dist/cjs/helpers/getPreviousMonth.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/**
* Return the next previous the user can navigate to, according to the given
* Returns the previous month the user can navigate to, based on the given
* options.
*
* Please note that the previous month is not always the previous calendar
* month:
* The previous month is not always the previous calendar month:
*
* - If before the `calendarStartMonth` date, is `undefined`;
* - If the navigation is paged, is the number of months displayed before.
* - If it is before the `calendarStartMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips back by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The previous month, or `undefined` if navigation is not possible.
*/
export declare function getPreviousMonth(firstDisplayedMonth: Date, calendarStartMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined;

18

dist/cjs/helpers/getPreviousMonth.js

@@ -5,10 +5,18 @@ "use strict";

/**
* Return the next previous the user can navigate to, according to the given
* Returns the previous month the user can navigate to, based on the given
* options.
*
* Please note that the previous month is not always the previous calendar
* month:
* The previous month is not always the previous calendar month:
*
* - If before the `calendarStartMonth` date, is `undefined`;
* - If the navigation is paged, is the number of months displayed before.
* - If it is before the `calendarStartMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips back by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The previous month, or `undefined` if navigation is not possible.
*/

@@ -15,0 +23,0 @@ function getPreviousMonth(firstDisplayedMonth, calendarStartMonth, options, dateLib) {

11

dist/cjs/helpers/getStyleForModifiers.d.ts
import type { CSSProperties } from "react";
import type { Modifiers, ModifiersStyles, Styles } from "../types/index.js";
/**
* Returns the computed style for a day based on its modifiers.
*
* This function merges the base styles for the day with any styles associated
* with active modifiers.
*
* @param dayModifiers The modifiers applied to the day.
* @param styles The base styles for the calendar elements.
* @param modifiersStyles The styles associated with specific modifiers.
* @returns The computed style for the day.
*/
export declare function getStyleForModifiers(dayModifiers: Modifiers, styles?: Partial<Styles>, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties;

11

dist/cjs/helpers/getStyleForModifiers.js

@@ -5,2 +5,13 @@ "use strict";

const UI_js_1 = require("../UI.js");
/**
* Returns the computed style for a day based on its modifiers.
*
* This function merges the base styles for the day with any styles associated
* with active modifiers.
*
* @param dayModifiers The modifiers applied to the day.
* @param styles The base styles for the calendar elements.
* @param modifiersStyles The styles associated with specific modifiers.
* @returns The computed style for the day.
*/
function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {

@@ -7,0 +18,0 @@ let style = { ...styles?.[UI_js_1.UI.Day] };

18

dist/cjs/helpers/getWeekdays.d.ts
import { DateLib } from "../classes/DateLib.js";
/**
* Generate a series of 7 days, starting from the week, to use for formatting
* the weekday names (Monday, Tuesday, etc.).
* Generates a series of 7 days, starting from the beginning of the week, to use
* for formatting weekday names (e.g., Monday, Tuesday, etc.).
*
* @param dateLib The date library to use for date manipulation.
* @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
* @param broadcastCalendar Whether to use the broadcast calendar (weeks start
* on Monday, but may include adjustments for broadcast-specific rules).
* @returns An array of 7 dates representing the weekdays.
*/
export declare function getWeekdays(
/** The date library. */
dateLib: DateLib,
/** Use ISOWeek instead of locale/ */
ISOWeek?: boolean | undefined,
/** @since 9.4.0 */
broadcastCalendar?: boolean | undefined): Date[];
export declare function getWeekdays(dateLib: DateLib, ISOWeek?: boolean | undefined, broadcastCalendar?: boolean | undefined): Date[];

18

dist/cjs/helpers/getWeekdays.js

@@ -5,12 +5,12 @@ "use strict";

/**
* Generate a series of 7 days, starting from the week, to use for formatting
* the weekday names (Monday, Tuesday, etc.).
* Generates a series of 7 days, starting from the beginning of the week, to use
* for formatting weekday names (e.g., Monday, Tuesday, etc.).
*
* @param dateLib The date library to use for date manipulation.
* @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
* @param broadcastCalendar Whether to use the broadcast calendar (weeks start
* on Monday, but may include adjustments for broadcast-specific rules).
* @returns An array of 7 dates representing the weekdays.
*/
function getWeekdays(
/** The date library. */
dateLib,
/** Use ISOWeek instead of locale/ */
ISOWeek,
/** @since 9.4.0 */
broadcastCalendar) {
function getWeekdays(dateLib, ISOWeek, broadcastCalendar) {
const today = dateLib.today();

@@ -17,0 +17,0 @@ const start = broadcastCalendar

7

dist/cjs/helpers/getWeeks.d.ts
import type { CalendarMonth, CalendarWeek } from "../classes/index.js";
/** Returns an array of calendar weeks from an array of calendar months. */
/**
* Returns an array of calendar weeks from an array of calendar months.
*
* @param months The array of calendar months.
* @returns An array of calendar weeks.
*/
export declare function getWeeks(months: CalendarMonth[]): CalendarWeek[];

7

dist/cjs/helpers/getWeeks.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getWeeks = getWeeks;
/** Returns an array of calendar weeks from an array of calendar months. */
/**
* Returns an array of calendar weeks from an array of calendar months.
*
* @param months The array of calendar months.
* @returns An array of calendar weeks.
*/
function getWeeks(months) {

@@ -6,0 +11,0 @@ const initialWeeks = [];

14

dist/cjs/helpers/getYearOptions.d.ts
import type { DateLib } from "../classes/DateLib.js";
import { DropdownOption } from "../components/Dropdown.js";
import type { Formatters } from "../types/index.js";
/** Return the years to show in the dropdown. */
/**
* Returns the years to display in the dropdown.
*
* This function generates a list of years between the navigation start and end
* dates, formatted using the provided formatter.
*
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the year labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the years, or `undefined`
* if `navStart` or `navEnd` is not provided.
*/
export declare function getYearOptions(navStart: Date | undefined, navEnd: Date | undefined, formatters: Pick<Formatters, "formatYearDropdown">, dateLib: DateLib): DropdownOption[] | undefined;

14

dist/cjs/helpers/getYearOptions.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getYearOptions = getYearOptions;
/** Return the years to show in the dropdown. */
/**
* Returns the years to display in the dropdown.
*
* This function generates a list of years between the navigation start and end
* dates, formatted using the provided formatter.
*
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the year labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the years, or `undefined`
* if `navStart` or `navEnd` is not provided.
*/
function getYearOptions(navStart, navEnd, formatters, dateLib) {

@@ -6,0 +18,0 @@ if (!navStart)

9

dist/cjs/helpers/startOfBroadcastWeek.d.ts
import type { DateLib } from "../classes/index.js";
/**
* Return the start date of the week in the broadcast calendar.
* Returns the start date of the week in the broadcast calendar.
*
* The broadcast week starts on Monday. If the first day of the month is not a
* Monday, this function calculates the previous Monday as the start of the
* broadcast week.
*
* @since 9.4.0
* @param date The date for which to calculate the start of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The start date of the broadcast week.
*/
export declare function startOfBroadcastWeek(date: Date, dateLib: DateLib): Date;

9

dist/cjs/helpers/startOfBroadcastWeek.js

@@ -5,5 +5,12 @@ "use strict";

/**
* Return the start date of the week in the broadcast calendar.
* Returns the start date of the week in the broadcast calendar.
*
* The broadcast week starts on Monday. If the first day of the month is not a
* Monday, this function calculates the previous Monday as the start of the
* broadcast week.
*
* @since 9.4.0
* @param date The date for which to calculate the start of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The start date of the broadcast week.
*/

@@ -10,0 +17,0 @@ function startOfBroadcastWeek(date, dateLib) {

16

dist/cjs/helpers/useControlledValue.d.ts

@@ -5,2 +5,6 @@ export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;

*
* This hook allows a component to support both controlled and uncontrolled
* states by determining whether the `controlledValue` is provided. If it is
* undefined, the hook falls back to using the internal state.
*
* @example

@@ -14,9 +18,9 @@ * // Uncontrolled usage

* @template T - The type of the value.
* @param {T} defaultValue - The initial value for the uncontrolled state.
* @param {T | undefined} controlledValue - The value for the controlled state.
* If undefined, the component will use the uncontrolled state.
* @returns {[T, DispatchStateAction<T>]} - Returns a tuple where the first
* element is the current value (either controlled or uncontrolled) and the
* second element is a setter function to update the value.
* @param defaultValue The initial value for the uncontrolled state.
* @param controlledValue The value for the controlled state. If undefined, the
* component will use the uncontrolled state.
* @returns A tuple where the first element is the current value (either
* controlled or uncontrolled) and the second element is a setter function to
* update the value.
*/
export declare function useControlledValue<T>(defaultValue: T, controlledValue: T | undefined): [T, DispatchStateAction<T>];

16

dist/cjs/helpers/useControlledValue.js

@@ -8,2 +8,6 @@ "use strict";

*
* This hook allows a component to support both controlled and uncontrolled
* states by determining whether the `controlledValue` is provided. If it is
* undefined, the hook falls back to using the internal state.
*
* @example

@@ -17,8 +21,8 @@ * // Uncontrolled usage

* @template T - The type of the value.
* @param {T} defaultValue - The initial value for the uncontrolled state.
* @param {T | undefined} controlledValue - The value for the controlled state.
* If undefined, the component will use the uncontrolled state.
* @returns {[T, DispatchStateAction<T>]} - Returns a tuple where the first
* element is the current value (either controlled or uncontrolled) and the
* second element is a setter function to update the value.
* @param defaultValue The initial value for the uncontrolled state.
* @param controlledValue The value for the controlled state. If undefined, the
* component will use the uncontrolled state.
* @returns A tuple where the first element is the current value (either
* controlled or uncontrolled) and the second element is a setter function to
* update the value.
*/

@@ -25,0 +29,0 @@ function useControlledValue(defaultValue, controlledValue) {

15

dist/cjs/labels/labelDayButton.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
import type { Modifiers } from "../types/index.js";
/**
* The ARIA label for the day button.
* Generates the ARIA label for a day button.
*
* Use the `modifiers` argument to add additional context to the label, e.g.
* when a day is selected or is today.
* Use the `modifiers` argument to provide additional context for the label,
* such as indicating if the day is "today" or "selected."
*
* @defaultValue The formatted date.
* @param date - The date to format.
* @param modifiers - The modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the day button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export declare function labelDayButton(date: Date,
/** The modifiers for the day. */
modifiers: Modifiers, options?: DateLibOptions, dateLib?: DateLib): string;
export declare function labelDayButton(date: Date, modifiers: Modifiers, options?: DateLibOptions, dateLib?: DateLib): string;
/**

@@ -17,0 +20,0 @@ * @ignore

15

dist/cjs/labels/labelDayButton.js

@@ -7,14 +7,17 @@ "use strict";

/**
* The ARIA label for the day button.
* Generates the ARIA label for a day button.
*
* Use the `modifiers` argument to add additional context to the label, e.g.
* when a day is selected or is today.
* Use the `modifiers` argument to provide additional context for the label,
* such as indicating if the day is "today" or "selected."
*
* @defaultValue The formatted date.
* @param date - The date to format.
* @param modifiers - The modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the day button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
function labelDayButton(date,
/** The modifiers for the day. */
modifiers, options, dateLib) {
function labelDayButton(date, modifiers, options, dateLib) {
let label = (dateLib ?? new DateLib_js_1.DateLib(options)).format(date, "PPPP");

@@ -21,0 +24,0 @@ if (modifiers.today)

10

dist/cjs/labels/labelGrid.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the month grid, that will be announced when entering the
* grid.
* Generates the ARIA label for the month grid, which is announced when entering
* the grid.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param date - The date representing the month.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the month grid.
* @group Labels

@@ -8,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

10

dist/cjs/labels/labelGrid.js

@@ -7,6 +7,10 @@ "use strict";

/**
* The ARIA label for the month grid, that will be announced when entering the
* grid.
* Generates the ARIA label for the month grid, which is announced when entering
* the grid.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param date - The date representing the month.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the month grid.
* @group Labels

@@ -13,0 +17,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

11

dist/cjs/labels/labelGridcell.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
import type { Modifiers } from "../types/index.js";
/**
* The label for the day gridcell when the calendar is not interactive.
* Generates the label for a day grid cell when the calendar is not interactive.
*
* @param date - The date to format.
* @param modifiers - Optional modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The label for the day grid cell.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export declare function labelGridcell(date: Date,
/** The modifiers for the day. */
modifiers?: Modifiers, options?: DateLibOptions, dateLib?: DateLib): string;
export declare function labelGridcell(date: Date, modifiers?: Modifiers, options?: DateLibOptions, dateLib?: DateLib): string;

11

dist/cjs/labels/labelGridcell.js

@@ -6,10 +6,13 @@ "use strict";

/**
* The label for the day gridcell when the calendar is not interactive.
* Generates the label for a day grid cell when the calendar is not interactive.
*
* @param date - The date to format.
* @param modifiers - Optional modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The label for the day grid cell.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
function labelGridcell(date,
/** The modifiers for the day. */
modifiers, options, dateLib) {
function labelGridcell(date, modifiers, options, dateLib) {
let label = (dateLib ?? new DateLib_js_1.DateLib(options)).format(date, "PPPP");

@@ -16,0 +19,0 @@ if (modifiers?.today) {

4

dist/cjs/labels/labelMonthDropdown.d.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the months dropdown.
* Generates the ARIA label for the months dropdown.
*
* @defaultValue `"Choose the Month"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the months dropdown.
* @group Labels

@@ -7,0 +9,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/cjs/labels/labelMonthDropdown.js

@@ -5,5 +5,7 @@ "use strict";

/**
* The ARIA label for the months dropdown.
* Generates the ARIA label for the months dropdown.
*
* @defaultValue `"Choose the Month"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the months dropdown.
* @group Labels

@@ -10,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

3

dist/cjs/labels/labelNav.d.ts
/**
* The ARIA label for the navigation toolbar.
* Generates the ARIA label for the navigation toolbar.
*
* @defaultValue `""`
* @returns The ARIA label for the navigation toolbar.
* @group Labels

@@ -6,0 +7,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

3

dist/cjs/labels/labelNav.js

@@ -5,5 +5,6 @@ "use strict";

/**
* The ARIA label for the navigation toolbar.
* Generates the ARIA label for the navigation toolbar.
*
* @defaultValue `""`
* @returns The ARIA label for the navigation toolbar.
* @group Labels

@@ -10,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

9

dist/cjs/labels/labelNext.d.ts
/**
* The ARIA label for next month button.
* Generates the ARIA label for the "next month" button.
*
* @defaultValue `"Go to the Next Month"`
* @param month - The date representing the next month, or `undefined` if there
* is no next month.
* @returns The ARIA label for the "next month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export declare function labelNext(
/** `undefined` where there's no next month to navigate to. */
month: Date | undefined): string;
export declare function labelNext(month: Date | undefined): string;

9

dist/cjs/labels/labelNext.js

@@ -5,13 +5,14 @@ "use strict";

/**
* The ARIA label for next month button.
* Generates the ARIA label for the "next month" button.
*
* @defaultValue `"Go to the Next Month"`
* @param month - The date representing the next month, or `undefined` if there
* is no next month.
* @returns The ARIA label for the "next month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
function labelNext(
/** `undefined` where there's no next month to navigate to. */
month) {
function labelNext(month) {
return "Go to the Next Month";
}
//# sourceMappingURL=labelNext.js.map

9

dist/cjs/labels/labelPrevious.d.ts
/**
* The ARIA label for previous month button.
* Generates the ARIA label for the "previous month" button.
*
* @defaultValue `"Go to the Previous Month"`
* @param month - The date representing the previous month, or `undefined` if
* there is no previous month.
* @returns The ARIA label for the "previous month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export declare function labelPrevious(
/** Undefined where there's no previous month to navigate to. */
month: Date | undefined): string;
export declare function labelPrevious(month: Date | undefined): string;

9

dist/cjs/labels/labelPrevious.js

@@ -5,13 +5,14 @@ "use strict";

/**
* The ARIA label for previous month button.
* Generates the ARIA label for the "previous month" button.
*
* @defaultValue `"Go to the Previous Month"`
* @param month - The date representing the previous month, or `undefined` if
* there is no previous month.
* @returns The ARIA label for the "previous month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
function labelPrevious(
/** Undefined where there's no previous month to navigate to. */
month) {
function labelPrevious(month) {
return "Go to the Previous Month";
}
//# sourceMappingURL=labelPrevious.js.map

6

dist/cjs/labels/labelWeekday.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the Weekday column header.
* Generates the ARIA label for a weekday column header.
*
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
* @param date - The date representing the weekday.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the weekday column header.
* @group Labels

@@ -7,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

6

dist/cjs/labels/labelWeekday.js

@@ -6,5 +6,9 @@ "use strict";

/**
* The ARIA label for the Weekday column header.
* Generates the ARIA label for a weekday column header.
*
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
* @param date - The date representing the weekday.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the weekday column header.
* @group Labels

@@ -11,0 +15,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

5

dist/cjs/labels/labelWeekNumber.d.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the week number cell (the first cell in the row).
* Generates the ARIA label for the week number cell (the first cell in a row).
*
* @defaultValue `Week ${weekNumber}`
* @param weekNumber - The number of the week.
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number cell.
* @group Labels

@@ -7,0 +10,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

5

dist/cjs/labels/labelWeekNumber.js

@@ -5,5 +5,8 @@ "use strict";

/**
* The ARIA label for the week number cell (the first cell in the row).
* Generates the ARIA label for the week number cell (the first cell in a row).
*
* @defaultValue `Week ${weekNumber}`
* @param weekNumber - The number of the week.
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number cell.
* @group Labels

@@ -10,0 +13,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/cjs/labels/labelWeekNumberHeader.d.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the week number header element.
* Generates the ARIA label for the week number header element.
*
* @defaultValue `"Week Number"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number header.
* @group Labels

@@ -7,0 +9,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/cjs/labels/labelWeekNumberHeader.js

@@ -5,5 +5,7 @@ "use strict";

/**
* The ARIA label for the week number header element.
* Generates the ARIA label for the week number header element.
*
* @defaultValue `"Week Number"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number header.
* @group Labels

@@ -10,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/cjs/labels/labelYearDropdown.d.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the years dropdown.
* Generates the ARIA label for the years dropdown.
*
* @defaultValue `"Choose the Year"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the years dropdown.
* @group Labels

@@ -7,0 +9,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/cjs/labels/labelYearDropdown.js

@@ -5,5 +5,7 @@ "use strict";

/**
* The ARIA label for the years dropdown.
* Generates the ARIA label for the years dropdown.
*
* @defaultValue `"Choose the Year"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the years dropdown.
* @group Labels

@@ -10,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

17

dist/cjs/persian.d.ts

@@ -9,4 +9,12 @@ import React from "react";

/**
* Render the Persian Calendar.
* Renders the Persian calendar using the DayPicker component.
*
* @defaultValue
* - `locale`: `faIR`
* - `dir`: `rtl`
* - `dateLib`: `jalaliDateLib` from `date-fns-jalali`
* - `numerals`: `arabext` (Eastern Arabic-Indic)
* @param props - The props for the Persian calendar, including locale, text
* direction, date library, and numeral system.
* @returns The Persian calendar component.
* @see https://daypicker.dev/docs/localization#persian-calendar

@@ -54,3 +62,8 @@ */

}): React.JSX.Element;
/** Returns the date library used in the calendar. */
/**
* Returns the date library used in the Persian calendar.
*
* @param options - Optional configuration for the date library.
* @returns The date library instance.
*/
export declare const getDateLib: (options?: DateLibOptions) => DateLib;

17

dist/cjs/persian.js

@@ -48,4 +48,12 @@ "use strict";

/**
* Render the Persian Calendar.
* Renders the Persian calendar using the DayPicker component.
*
* @defaultValue
* - `locale`: `faIR`
* - `dir`: `rtl`
* - `dateLib`: `jalaliDateLib` from `date-fns-jalali`
* - `numerals`: `arabext` (Eastern Arabic-Indic)
* @param props - The props for the Persian calendar, including locale, text
* direction, date library, and numeral system.
* @returns The Persian calendar component.
* @see https://daypicker.dev/docs/localization#persian-calendar

@@ -64,3 +72,8 @@ */

}
/** Returns the date library used in the calendar. */
/**
* Returns the date library used in the Persian calendar.
*
* @param options - Optional configuration for the date library.
* @returns The date library instance.
*/
const getDateLib = (options) => {

@@ -67,0 +80,0 @@ return new index_js_1.DateLib(options, dateFnsJalali);

9

dist/cjs/selection/useMulti.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps, Selection } from "../types/index.js";
/**
* Hook to manage multiple-date selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected dates, a function to select dates,
* and a function to check if a date is selected.
*/
export declare function useMulti<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T>;

9

dist/cjs/selection/useMulti.js

@@ -5,2 +5,11 @@ "use strict";

const useControlledValue_js_1 = require("../helpers/useControlledValue.js");
/**
* Hook to manage multiple-date selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected dates, a function to select dates,
* and a function to check if a date is selected.
*/
function useMulti(props, dateLib) {

@@ -7,0 +16,0 @@ const { selected: initiallySelected, required, onSelect } = props;

9

dist/cjs/selection/useRange.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps, Selection } from "../types/index.js";
/**
* Hook to manage range selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected range, a function to select a
* range, and a function to check if a date is within the range.
*/
export declare function useRange<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T>;

9

dist/cjs/selection/useRange.js

@@ -7,2 +7,11 @@ "use strict";

const rangeIncludesDate_js_1 = require("../utils/rangeIncludesDate.js");
/**
* Hook to manage range selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected range, a function to select a
* range, and a function to check if a date is within the range.
*/
function useRange(props, dateLib) {

@@ -9,0 +18,0 @@ const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;

9

dist/cjs/selection/useSingle.d.ts

@@ -8,2 +8,11 @@ import type { DateLib } from "../classes/DateLib.js";

};
/**
* Hook to manage single-date selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected date, a function to select a date,
* and a function to check if a date is selected.
*/
export declare function useSingle<T extends DayPickerProps>(props: DayPickerProps, dateLib: DateLib): Selection<T>;

9

dist/cjs/selection/useSingle.js

@@ -5,2 +5,11 @@ "use strict";

const useControlledValue_js_1 = require("../helpers/useControlledValue.js");
/**
* Hook to manage single-date selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected date, a function to select a date,
* and a function to check if a date is selected.
*/
function useSingle(props, dateLib) {

@@ -7,0 +16,0 @@ const { selected: initiallySelected, required, onSelect } = props;

16

dist/cjs/types/deprecated.d.ts

@@ -66,3 +66,3 @@ import { DayFlag, SelectionState } from "../UI.js";

* @ignore
* @deprecated This type will be removed. Use `NonNullable<unknown>` instead
* @deprecated This type will be removed. Use `NonNullable<unknown>` instead.
*/

@@ -77,3 +77,3 @@ export type DayPickerDefaultProps = NonNullable<unknown>;

* @ignore
* @deprecated This type will be removed. Use `string` instead;
* @deprecated This type will be removed. Use `string` instead.
*/

@@ -89,4 +89,4 @@ export type Modifier = string;

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode: "single"}>`
* instead.
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "single"
* }>` instead.
*/

@@ -96,4 +96,4 @@ export type SelectSingleEventHandler = PropsSingle["onSelect"];

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode:
* "multiple"}>` instead.
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "multiple"
* }>` instead.
*/

@@ -103,3 +103,3 @@ export type SelectMultipleEventHandler = PropsMulti["onSelect"];

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode: "range"}>`
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "range" }>`
* instead.

@@ -115,3 +115,3 @@ */

* @ignore
* @deprecated This type has been removed to `useDayPicker`.
* @deprecated This type has been moved to `useDayPicker`.
* @group Hooks

@@ -118,0 +118,0 @@ */

2

dist/cjs/types/deprecated.js

@@ -23,3 +23,3 @@ "use strict";

* @ignore
* @deprecated This type has been removed to `useDayPicker`.
* @deprecated This type has been moved to `useDayPicker`.
* @group Hooks

@@ -26,0 +26,0 @@ */

70

dist/cjs/types/props.d.ts

@@ -184,5 +184,6 @@ import React from "react";

*
* **Note:** showing the dropdown will set the start/end months
* {@link startMonth} to 100 years ago, and {@link endMonth} to the end of the
* current year.
* **Note:** By default, showing the dropdown will set the {@link startMonth}
* to 100 years ago and {@link endMonth} to the end of the current year. You
* can override this behavior by explicitly setting `startMonth` and
* `endMonth`.
*

@@ -193,2 +194,16 @@ * @see https://daypicker.dev/docs/customization#caption-layouts

/**
* Adjust the positioning of the navigation buttons.
*
* - `around`: Displays the buttons on either side of the caption.
* - `after`: Displays the buttons after the caption. This ensures the tab order
* matches the visual order.
*
* If not set, the buttons default to being displayed after the caption, but
* the tab order may not align with the visual order.
*
* @since 9.7.0
* @see https://daypicker.dev/docs/customization#navigation-layouts
*/
navLayout?: "around" | "after" | undefined;
/**
* Display always 6 weeks per each month, regardless of the month’s number of

@@ -249,2 +264,3 @@ * weeks. Weeks will be filled with the days from the next month.

* The time zone (IANA or UTC offset) to use in the calendar (experimental).
*
* See

@@ -254,8 +270,3 @@ * [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)

*
* Time zones are supported by the `TZDate` object by the
* [@date-fns/tz](https://github.com/date-fns/tz) package. Please refer to the
* package documentation for more information.
*
* @since 9.1.1
* @experimental
* @see https://daypicker.dev/docs/time-zone

@@ -295,5 +306,6 @@ */

/**
* Apply the `disabled` modifier to the matching days.
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabling-dates
* @see https://daypicker.dev/docs/selection-modes#disabled
*/

@@ -318,2 +330,9 @@ disabled?: Matcher | Matcher[] | undefined;

*
* @example
* const modifiers = {
* weekend: { dayOfWeek: [0, 6] }, // Match weekends
* holiday: [new Date(2023, 11, 25)] // Match Christmas
* };
* <DayPicker modifiers={modifiers} />
*
* @see https://daypicker.dev/guides/custom-modifiers

@@ -401,3 +420,3 @@ */

* The index of the first day of the week (0 - Sunday). Overrides the locale's
* one.
* default.
*

@@ -408,3 +427,3 @@ * @see https://daypicker.dev/docs/localization#first-date-of-the-week

/**
* The day of January, which is always in the first week of the year.
* The day of January that is always in the first week of the year.
*

@@ -518,6 +537,18 @@ * @see https://daypicker.dev/docs/localization#first-week-contains-date

*
* @example
* const handleSelect: OnSelectHandler<Date> = (
* selected,
* triggerDate,
* modifiers,
* e
* ) => {
* console.log("Selected:", selected);
* console.log("Triggered by:", triggerDate);
* };
*
* @template T - The type of the selected item.
* @callback OnSelectHandler
* @param {T} selected - The selected item after the event.
* @param {Date} triggerDate - The date when the event was triggered.
* @param {Date} triggerDate - The date when the event was triggered. This is
* typically the day clicked or interacted with.
* @param {Modifiers} modifiers - The modifiers associated with the event.

@@ -600,2 +631,8 @@ * @param {React.MouseEvent | React.KeyboardEvent} e - The event object.

required: true;
/**
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabled
*/
disabled?: Matcher | Matcher[] | undefined;

@@ -626,2 +663,8 @@ /**

required?: false | undefined;
/**
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabled
*/
disabled?: Matcher | Matcher[] | undefined;

@@ -632,2 +675,3 @@ /**

* @since V9.0.2
* @see https://daypicker.dev/docs/selection-modes#exclude-disabled
*/

@@ -634,0 +678,0 @@ excludeDisabled?: boolean | undefined;

25

dist/cjs/types/selection.d.ts

@@ -20,2 +20,15 @@ import type { DayPickerProps } from "./props.js";

}> = T["required"] extends true ? DateRange : DateRange | undefined;
/**
* Represents the selected value based on the selection mode.
*
* @example
* // Single selection mode
* const selected: SelectedValue<{ mode: "single" }> = new Date();
*
* // Multiple selection mode
* const selected: SelectedValue<{ mode: "multiple" }> = [new Date(), new Date()];
*
* // Range selection mode
* const selected: SelectedValue<{ mode: "range" }> = { from: new Date(), to: new Date() };
*/
export type SelectedValue<T> = T extends {

@@ -40,2 +53,14 @@ mode: "single";

}> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? DateRange : DateRange | undefined;
/**
* The handler to set a selection based on the mode.
*
* @example
* const handleSelect: SelectHandler<{ mode: "single" }> = (
* triggerDate,
* modifiers,
* e
* ) => {
* console.log("Selected date:", triggerDate);
* };
*/
export type SelectHandler<T extends {

@@ -42,0 +67,0 @@ mode?: Mode | undefined;

107

dist/cjs/types/shared.d.ts

@@ -9,5 +9,5 @@ import type { CSSProperties } from "react";

*
* - `single`: use DayPicker to select single days.
* - `multiple`: allow selecting multiple days.
* - `range`: use DayPicker to select a range of days.
* - `single`: Select a single day.
* - `multiple`: Select multiple days.
* - `range`: Select a range of days.
*

@@ -18,3 +18,3 @@ * @see https://daypicker.dev/docs/selection-modes

/**
* The components that can be changed using the `components` prop.
* The components that can be customized using the `components` prop.
*

@@ -77,8 +77,8 @@ * @see https://daypicker.dev/guides/custom-components

WeekNumberHeader: typeof components.WeekNumberHeader;
/** Render the dropdown with the months. */
/** Render the dropdown for selecting months. */
MonthsDropdown: typeof components.MonthsDropdown;
/** Render the dropdown with the years. */
/** Render the dropdown for selecting years. */
YearsDropdown: typeof components.YearsDropdown;
};
/** Represent a map of formatters used to render localized content. */
/** Represents a map of formatters used to render localized content. */
export type Formatters = {

@@ -94,2 +94,4 @@ /** Format the caption of a month grid. */

* @deprecated Use {@link Formatters.formatCaption} instead.
*
* **Note:** This formatter will be removed in version 10.0.0.
*/

@@ -111,3 +113,3 @@ formatMonthCaption: typeof formatMonthCaption;

};
/** Map of functions to translate ARIA labels for the relative elements. */
/** A map of functions to translate ARIA labels for various elements. */
export type Labels = {

@@ -139,59 +141,21 @@ /** The label for the navigation toolbar. */

labelWeekNumber: typeof labelWeekNumber;
/**
* Return the label for the column of the week number.
*
* @since 9.0.0
*/
/** The label for the column of week numbers. */
labelWeekNumberHeader: typeof labelWeekNumberHeader;
};
/**
* A value or a function that matches a specific day.
* A value or a function that matches specific days.
*
* @example
* // 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)
* // Match weekends and specific holidays
* const matcher: Matcher = [
* { dayOfWeek: [0, 6] }, // Weekends
* { from: new Date(2023, 11, 24), to: new Date(2023, 11, 26) } // Christmas
* ];
*
* // 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
* };
*/
export type Matcher = boolean | ((date: Date) => boolean) | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek;
/**
* Match a day falling after the specified date, with the date not included.
* Match a day falling after the specified date (exclusive).
*
* @example
* // Match days after the 2nd of February 2019
* // Match days after February 2, 2019
* const matcher: DateAfter = { after: new Date(2019, 1, 2) };

@@ -203,6 +167,6 @@ */

/**
* Match a day falling before the specified date, with the date not included.
* Match a day falling before the specified date (exclusive).
*
* @example
* // Match days before the 2nd of February 2019
* // Match days before February 2, 2019
* const matcher: DateBefore = { before: new Date(2019, 1, 2) };

@@ -214,7 +178,7 @@ */

/**
* An interval of dates. Differently from {@link DateRange}, the range ends here
* are not included.
* An interval of dates. Unlike {@link DateRange}, the range ends are not
* included.
*
* @example
* // Match the days between the 2nd and the 5th of February 2019
* // Match days between February 2 and February 5, 2019
* const matcher: DateInterval = {

@@ -230,7 +194,6 @@ * after: new Date(2019, 1, 2),

/**
* A range of dates. The range can be open. Differently from
* {@link DateInterval}, the range ends here are included.
* A range of dates. Unlike {@link DateInterval}, the range ends are included.
*
* @example
* // Match the days between the 2nd and the 5th of February 2019
* // Match days between February 2 and February 5, 2019
* const matcher: DateRange = {

@@ -246,4 +209,3 @@ * from: new Date(2019, 1, 2),

/**
* Match dates being one of the specified days of the week (`0-6`, where `0` is
* Sunday).
* Match days of the week (`0-6`, where `0` is Sunday).
*

@@ -304,18 +266,7 @@ * @example

*
* - Retrieve modifiers using the {@link OnSelectHandler} via the `onSelect` prop,
* or within custom components using the {@link useDayPicker} hook.
* - Includes built-in modifiers from {@link DayFlag} and {@link SelectionState}.
* - Add custom modifiers using the `modifiers` prop.
*
* @example
* const modifiers: Modifiers = {
* today: false, // the day is not today
* selected: true, // the day is selected
* disabled: false, // the day is not disabled
* outside: false, // the day is not outside the month
* focused: false, // the day is not focused
*
* weekend: false // custom modifier example for matching a weekend
* booked: true // custom modifier example for matching a booked day
* available: false // custom modifier example for matching an available day
* today: true, // The day is today
* selected: false, // The day is not selected
* weekend: true // Custom modifier for weekends
* };

@@ -322,0 +273,0 @@ *

34

dist/cjs/UI.d.ts
import { CSSProperties } from "react";
/**
* The UI elements composing DayPicker. These elements are mapped to
* {@link CustomComponents}, the {@link ClassNames} and the {@link Styles} used by
* DayPicker.
* Enum representing the UI elements composing DayPicker. These elements are
* mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
*
* Some of these elements are extended by flags and modifiers.
* Some elements are extended by flags and modifiers.
*/

@@ -70,3 +69,3 @@ export declare enum UI {

}
/** The flags for the {@link UI.Day}. */
/** Enum representing flags for the {@link UI.Day} element. */
export declare enum DayFlag {

@@ -85,4 +84,4 @@ /** The day is disabled. */

/**
* The state that can be applied to the {@link UI.Day} element when in selection
* mode.
* Enum representing selection states that can be applied to the {@link UI.Day}
* element in selection mode.
*/

@@ -99,3 +98,2 @@ export declare enum SelectionState {

}
/** CSS classes used for animating months and captions. */
/**

@@ -124,21 +122,11 @@ * Enum representing different animation states for transitioning between

/**
* Deprecated UI elements and flags.
* Deprecated UI elements and flags from previous versions of DayPicker.
*
* These elements were used in previous version of DayPicker and are kept here
* to help the transition to the new {@link UI | UI elements}.
* These elements are kept for backward compatibility and to assist in
* transitioning to the new {@link UI} elements.
*
* ```diff
* <DayPicker classNames={{
* - cell: "my-cell",
* + day: "my-cell",
* - day: "my-day",
* + day_button: "my-day",
* - day_disabled: "my-day_disabled",
* + disabled: "my-day_disabled",
* // etc.
* }}/>
* ```
*
* @deprecated
* @since 9.0.1
* @template T - The type of the deprecated UI element (e.g., CSS class or
* style).
* @see https://daypicker.dev/upgrading

@@ -145,0 +133,0 @@ * @see https://daypicker.dev/docs/styling

14

dist/cjs/UI.js

@@ -5,7 +5,6 @@ "use strict";

/**
* The UI elements composing DayPicker. These elements are mapped to
* {@link CustomComponents}, the {@link ClassNames} and the {@link Styles} used by
* DayPicker.
* Enum representing the UI elements composing DayPicker. These elements are
* mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
*
* Some of these elements are extended by flags and modifiers.
* Some elements are extended by flags and modifiers.
*/

@@ -74,3 +73,3 @@ var UI;

})(UI || (exports.UI = UI = {}));
/** The flags for the {@link UI.Day}. */
/** Enum representing flags for the {@link UI.Day} element. */
var DayFlag;

@@ -90,4 +89,4 @@ (function (DayFlag) {

/**
* The state that can be applied to the {@link UI.Day} element when in selection
* mode.
* Enum representing selection states that can be applied to the {@link UI.Day}
* element in selection mode.
*/

@@ -105,3 +104,2 @@ var SelectionState;

})(SelectionState || (exports.SelectionState = SelectionState = {}));
/** CSS classes used for animating months and captions. */
/**

@@ -108,0 +106,0 @@ * Enum representing different animation states for transitioning between

12

dist/cjs/useAnimation.d.ts

@@ -6,3 +6,13 @@ import React from "react";

import { ClassNames } from "./types/shared.js";
/** @private */
/**
* Handles animations for transitioning between months in the DayPicker
* component.
*
* @private
* @param rootElRef - A reference to the root element of the DayPicker
* component.
* @param enabled - Whether animations are enabled.
* @param options - Configuration options for the animation, including class
* names, months, focused day, and the date utility library.
*/
export declare function useAnimation(rootElRef: React.RefObject<HTMLDivElement | null>, enabled: boolean, { classNames, months, focused, dateLib }: {

@@ -9,0 +19,0 @@ classNames: ClassNames;

12

dist/cjs/useAnimation.js

@@ -19,3 +19,13 @@ "use strict";

const queryWeekdaysEl = (element) => asHtmlElement(element.querySelector("[data-animated-weekdays]"));
/** @private */
/**
* Handles animations for transitioning between months in the DayPicker
* component.
*
* @private
* @param rootElRef - A reference to the root element of the DayPicker
* component.
* @param enabled - Whether animations are enabled.
* @param options - Configuration options for the animation, including class
* names, months, focused day, and the date utility library.
*/
function useAnimation(rootElRef, enabled, { classNames, months, focused, dateLib }) {

@@ -22,0 +32,0 @@ const previousRootElSnapshotRef = (0, react_1.useRef)(null);

10

dist/cjs/useCalendar.d.ts

@@ -46,3 +46,11 @@ import type { CalendarWeek, CalendarDay, CalendarMonth, DateLib } from "./classes/index.js";

}
/** @private */
/**
* Provides the calendar object to work with the calendar in custom components.
*
* @private
* @param props - The DayPicker props related to calendar configuration.
* @param dateLib - The date utility library instance.
* @returns The calendar object containing displayed days, weeks, months, and
* navigation methods.
*/
export declare function useCalendar(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "fixedWeeks" | "ISOWeek" | "numberOfMonths" | "disableNavigation" | "onMonthChange" | "month" | "defaultMonth" | "timeZone" | "broadcastCalendar" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): Calendar;

10

dist/cjs/useCalendar.js

@@ -15,3 +15,11 @@ "use strict";

const useControlledValue_js_1 = require("./helpers/useControlledValue.js");
/** @private */
/**
* Provides the calendar object to work with the calendar in custom components.
*
* @private
* @param props - The DayPicker props related to calendar configuration.
* @param dateLib - The date utility library instance.
* @returns The calendar object containing displayed days, weeks, months, and
* navigation methods.
*/
function useCalendar(props, dateLib) {

@@ -18,0 +26,0 @@ const [navStart, navEnd] = (0, getNavMonth_js_1.getNavMonths)(props, dateLib);

10

dist/cjs/useDayPicker.d.ts

@@ -57,11 +57,9 @@ import { CalendarDay } from "./classes/CalendarDay.js";

/**
* Returns the context to work with `<DayPicker />` inside custom components.
* Provides access to the DayPicker context, which includes properties and
* methods to interact with the DayPicker component. This hook must be used
* within a custom component.
*
* This hook provides access to the DayPicker context, which includes various
* properties and methods to interact with the DayPicker component. It must be
* used within a custom component.
*
* @template T - Use this type to refine the returned context type with a
* specific selection mode.
* @returns {DayPickerContext<T>} The context to work with DayPicker.
* @returns The context to work with DayPicker.
* @throws {Error} If the hook is used outside of a DayPicker provider.

@@ -68,0 +66,0 @@ * @group Hooks

10

dist/cjs/useDayPicker.js

@@ -9,11 +9,9 @@ "use strict";

/**
* Returns the context to work with `<DayPicker />` inside custom components.
* Provides access to the DayPicker context, which includes properties and
* methods to interact with the DayPicker component. This hook must be used
* within a custom component.
*
* This hook provides access to the DayPicker context, which includes various
* properties and methods to interact with the DayPicker component. It must be
* used within a custom component.
*
* @template T - Use this type to refine the returned context type with a
* specific selection mode.
* @returns {DayPickerContext<T>} The context to work with DayPicker.
* @returns The context to work with DayPicker.
* @throws {Error} If the hook is used outside of a DayPicker provider.

@@ -20,0 +18,0 @@ * @group Hooks

15

dist/cjs/useFocus.d.ts

@@ -16,3 +16,16 @@ import type { CalendarDay, DateLib } from "./classes/index.js";

};
/** @private */
/**
* Manages focus behavior for the DayPicker component, including setting,
* moving, and blurring focus on calendar days.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param calendar - The calendar object containing the displayed days and
* months.
* @param getModifiers - A function to retrieve modifiers for a given day.
* @param isSelected - A function to check if a date is selected.
* @param dateLib - The date utility library instance.
* @returns An object containing focus-related methods and the currently focused
* day.
*/
export declare function useFocus<T extends DayPickerProps>(props: T, calendar: Calendar, getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, dateLib: DateLib): UseFocus;

15

dist/cjs/useFocus.js

@@ -7,3 +7,16 @@ "use strict";

const getNextFocus_js_1 = require("./helpers/getNextFocus.js");
/** @private */
/**
* Manages focus behavior for the DayPicker component, including setting,
* moving, and blurring focus on calendar days.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param calendar - The calendar object containing the displayed days and
* months.
* @param getModifiers - A function to retrieve modifiers for a given day.
* @param isSelected - A function to check if a date is selected.
* @param dateLib - The date utility library instance.
* @returns An object containing focus-related methods and the currently focused
* day.
*/
function useFocus(props, calendar, getModifiers, isSelected, dateLib) {

@@ -10,0 +23,0 @@ const { autoFocus } = props;

10

dist/cjs/useSelection.d.ts
import { type DateLib } from "./classes/DateLib.js";
import type { DayPickerProps } from "./types/index.js";
import { Selection } from "./types/selection.js";
/**
* Determines the appropriate selection hook to use based on the selection mode
* and returns the corresponding selection object.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns The selection object for the specified mode, or `undefined` if no
* mode is set.
*/
export declare function useSelection<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T> | undefined;

10

dist/cjs/useSelection.js

@@ -7,2 +7,12 @@ "use strict";

const useSingle_js_1 = require("./selection/useSingle.js");
/**
* Determines the appropriate selection hook to use based on the selection mode
* and returns the corresponding selection object.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns The selection object for the specified mode, or `undefined` if no
* mode is set.
*/
function useSelection(props, dateLib) {

@@ -9,0 +19,0 @@ const single = (0, useSingle_js_1.useSingle)(props, dateLib);

6

dist/cjs/utc.d.ts
import React from "react";
import { type DayPickerProps } from "./index.js";
/**
* @deprecated Use the `timeZone` prop instead of this function. This function
* wraps the DayPicker component and sets the `timeZone` to "utc".
* @param props - The props to pass to the DayPicker component.
* @returns The DayPicker component with the `timeZone` set to "utc".
*/
export declare function DayPicker(props: DayPickerProps): React.JSX.Element;

6

dist/cjs/utc.js

@@ -9,2 +9,8 @@ "use strict";

const index_js_1 = require("./index.js");
/**
* @deprecated Use the `timeZone` prop instead of this function. This function
* wraps the DayPicker component and sets the `timeZone` to "utc".
* @param props - The props to pass to the DayPicker component.
* @returns The DayPicker component with the `timeZone` set to "utc".
*/
function DayPicker(props) {

@@ -11,0 +17,0 @@ return react_1.default.createElement(index_js_1.DayPicker, { timeZone: "utc", ...props });

21

dist/cjs/utils/addToRange.d.ts
import { type DateLib } from "../classes/DateLib.js";
import type { DateRange } from "../types/index.js";
/**
* Add a day to an existing range.
* Adds a date to an existing range, considering constraints like minimum and
* maximum range size.
*
* The returned range takes in account the `undefined` values and if the added
* day is already present in the range.
*
* @param date - The date to add to the range.
* @param initialRange - The initial range to which the date will be added.
* @param min - The minimum number of days in the range.
* @param max - The maximum number of days in the range.
* @param required - Whether the range must always include at least one date.
* @param dateLib - The date utility library instance.
* @returns The updated date range, or `undefined` if the range is cleared.
* @group Utilities
*/
export declare function addToRange(
/** The date to add to the range. */
date: Date,
/** The range where to add `date`. */
initialRange: DateRange | undefined, min?: number, max?: number, required?: boolean,
/** @ignore */
dateLib?: DateLib): DateRange | undefined;
export declare function addToRange(date: Date, initialRange: DateRange | undefined, min?: number, max?: number, required?: boolean, dateLib?: DateLib): DateRange | undefined;

21

dist/cjs/utils/addToRange.js

@@ -6,16 +6,15 @@ "use strict";

/**
* Add a day to an existing range.
* Adds a date to an existing range, considering constraints like minimum and
* maximum range size.
*
* The returned range takes in account the `undefined` values and if the added
* day is already present in the range.
*
* @param date - The date to add to the range.
* @param initialRange - The initial range to which the date will be added.
* @param min - The minimum number of days in the range.
* @param max - The maximum number of days in the range.
* @param required - Whether the range must always include at least one date.
* @param dateLib - The date utility library instance.
* @returns The updated date range, or `undefined` if the range is cleared.
* @group Utilities
*/
function addToRange(
/** The date to add to the range. */
date,
/** The range where to add `date`. */
initialRange, min = 0, max = 0, required = false,
/** @ignore */
dateLib = DateLib_js_1.defaultDateLib) {
function addToRange(date, initialRange, min = 0, max = 0, required = false, dateLib = DateLib_js_1.defaultDateLib) {
const { from, to } = initialRange || {};

@@ -22,0 +21,0 @@ const { isSameDay, isAfter, isBefore } = dateLib;

20

dist/cjs/utils/dateMatchModifiers.d.ts
import { type DateLib } from "../classes/DateLib.js";
import type { Matcher } from "../types/index.js";
/**
* Returns whether a day matches against at least one of the given
* {@link Matcher}.
* Checks if a given date matches at least one of the specified {@link Matcher}.
*
* ```tsx
* const date = 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)
* };
* dateMatchModifiers(date, [matcher1, matcher2]); // true, since day is in the matcher1 range.
* ```
*
* @param date - The date to check.
* @param matchers - The matchers to check against.
* @param dateLib - The date utility library instance.
* @returns `true` if the date matches any of the matchers, otherwise `false`.
* @group Utilities

@@ -21,0 +11,0 @@ */

20

dist/cjs/utils/dateMatchModifiers.js

@@ -9,18 +9,8 @@ "use strict";

/**
* Returns whether a day matches against at least one of the given
* {@link Matcher}.
* Checks if a given date matches at least one of the specified {@link Matcher}.
*
* ```tsx
* const date = 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)
* };
* dateMatchModifiers(date, [matcher1, matcher2]); // true, since day is in the matcher1 range.
* ```
*
* @param date - The date to check.
* @param matchers - The matchers to check against.
* @param dateLib - The date utility library instance.
* @returns `true` if the date matches any of the matchers, otherwise `false`.
* @group Utilities

@@ -27,0 +17,0 @@ */

16

dist/cjs/utils/rangeContainsDayOfWeek.d.ts
import { type DateLib } from "../classes/DateLib.js";
/**
* Returns whether a date range contains one or more days of the week.
* Checks if a date range contains one or more specified days of the week.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2024, 8, 1), // Sunday
* to: new Date(2024, 8, 6) // Thursday
* };
* rangeContainsDayOfWeek(date, 1); // true: contains range contains Monday
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param dayOfWeek - The day(s) of the week to check for (`0-6`, where `0` is
* Sunday).
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains the specified day(s) of the week,
* otherwise `false`.
* @group Utilities

@@ -15,0 +13,0 @@ */

16

dist/cjs/utils/rangeContainsDayOfWeek.js

@@ -6,13 +6,11 @@ "use strict";

/**
* Returns whether a date range contains one or more days of the week.
* Checks if a date range contains one or more specified days of the week.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2024, 8, 1), // Sunday
* to: new Date(2024, 8, 6) // Thursday
* };
* rangeContainsDayOfWeek(date, 1); // true: contains range contains Monday
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param dayOfWeek - The day(s) of the week to check for (`0-6`, where `0` is
* Sunday).
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains the specified day(s) of the week,
* otherwise `false`.
* @group Utilities

@@ -19,0 +17,0 @@ */

19

dist/cjs/utils/rangeContainsModifiers.d.ts
import { type DateLib } from "../classes/DateLib.js";
import type { Matcher } from "../types/index.js";
/**
* Returns whether a range contains dates that match the given modifiers.
* Checks if a date range contains dates that match the given modifiers.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2021, 12, 21),
* to: new Date(2021, 12, 30)
* };
* const matcher1: Date = new Date(2021, 12, 21);
* const matcher2: DateRange = {
* from: new Date(2022, 5, 1),
* to: new Date(2022, 5, 23)
* };
* rangeContainsModifiers(range, [matcher1, matcher2]); // true, since matcher1 is in the date.
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param modifiers - The modifiers to match against.
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains matching dates, otherwise `false`.
* @group Utilities

@@ -21,0 +12,0 @@ */

19

dist/cjs/utils/rangeContainsModifiers.js

@@ -11,18 +11,9 @@ "use strict";

/**
* Returns whether a range contains dates that match the given modifiers.
* Checks if a date range contains dates that match the given modifiers.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2021, 12, 21),
* to: new Date(2021, 12, 30)
* };
* const matcher1: Date = new Date(2021, 12, 21);
* const matcher2: DateRange = {
* from: new Date(2022, 5, 1),
* to: new Date(2022, 5, 23)
* };
* rangeContainsModifiers(range, [matcher1, matcher2]); // true, since matcher1 is in the date.
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param modifiers - The modifiers to match against.
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains matching dates, otherwise `false`.
* @group Utilities

@@ -29,0 +20,0 @@ */

11

dist/cjs/utils/rangeIncludesDate.d.ts
import type { DateRange } from "../types/index.js";
/**
* Determines whether a given date is inside a specified date range.
* Checks if a given date is within a specified date range.
*
* @since 9.0.0
* @param range - The date range to check against.
* @param date - The date to check.
* @param excludeEnds - If `true`, the range's start and end dates are excluded.
* @param dateLib - The date utility library instance.
* @returns `true` if the date is within the range, otherwise `false`.
* @group Utilities
*/
export declare function rangeIncludesDate(range: DateRange, date: Date,
/** If `true`, the ends of the range are excluded. */
excludeEnds?: boolean, dateLib?: import("../classes/DateLib.js").DateLib): boolean;
export declare function rangeIncludesDate(range: DateRange, date: Date, excludeEnds?: boolean, dateLib?: import("../classes/DateLib.js").DateLib): boolean;
/**

@@ -12,0 +15,0 @@ * @private

11

dist/cjs/utils/rangeIncludesDate.js

@@ -7,10 +7,13 @@ "use strict";

/**
* Determines whether a given date is inside a specified date range.
* Checks if a given date is within a specified date range.
*
* @since 9.0.0
* @param range - The date range to check against.
* @param date - The date to check.
* @param excludeEnds - If `true`, the range's start and end dates are excluded.
* @param dateLib - The date utility library instance.
* @returns `true` if the date is within the range, otherwise `false`.
* @group Utilities
*/
function rangeIncludesDate(range, date,
/** If `true`, the ends of the range are excluded. */
excludeEnds = false, dateLib = index_js_1.defaultDateLib) {
function rangeIncludesDate(range, date, excludeEnds = false, dateLib = index_js_1.defaultDateLib) {
let { from, to } = range;

@@ -17,0 +20,0 @@ const { differenceInCalendarDays, isSameDay } = dateLib;

6

dist/cjs/utils/rangeOverlaps.d.ts
/**
* Determines whether a given range overlaps with another range.
* Determines if two date ranges overlap.
*
* @since 9.2.2
* @param rangeLeft - The first date range.
* @param rangeRight - The second date range.
* @param dateLib - The date utility library instance.
* @returns `true` if the ranges overlap, otherwise `false`.
* @group Utilities

@@ -6,0 +10,0 @@ */

6

dist/cjs/utils/rangeOverlaps.js

@@ -7,5 +7,9 @@ "use strict";

/**
* Determines whether a given range overlaps with another range.
* Determines if two date ranges overlap.
*
* @since 9.2.2
* @param rangeLeft - The first date range.
* @param rangeRight - The second date range.
* @param dateLib - The date utility library instance.
* @returns `true` if the ranges overlap, otherwise `false`.
* @group Utilities

@@ -12,0 +16,0 @@ */

25

dist/cjs/utils/typeguards.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek } from "../types/index.js";
/**
* Returns true if `matcher` is of type {@link DateInterval}.
* Checks if the given value is of type {@link DateInterval}.
*
* @param matcher - The value to check.
* @returns `true` if the value is a {@link DateInterval}, otherwise `false`.
* @group Utilities

@@ -10,4 +12,6 @@ */

/**
* Returns true if `value` is a {@link DateRange} type.
* Checks if the given value is of type {@link DateRange}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateRange}, otherwise `false`.
* @group Utilities

@@ -17,4 +21,6 @@ */

/**
* Returns true if `value` is of type {@link DateAfter}.
* Checks if the given value is of type {@link DateAfter}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateAfter}, otherwise `false`.
* @group Utilities

@@ -24,4 +30,6 @@ */

/**
* Returns true if `value` is of type {@link DateBefore}.
* Checks if the given value is of type {@link DateBefore}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateBefore}, otherwise `false`.
* @group Utilities

@@ -31,4 +39,6 @@ */

/**
* Returns true if `value` is a {@link DayOfWeek} type.
* Checks if the given value is of type {@link DayOfWeek}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DayOfWeek}, otherwise `false`.
* @group Utilities

@@ -38,6 +48,9 @@ */

/**
* Returns true if `value` is an array of valid dates.
* Checks if the given value is an array of valid dates.
*
* @private
* @param value - The value to check.
* @param dateLib - The date utility library instance.
* @returns `true` if the value is an array of valid dates, otherwise `false`.
*/
export declare function isDatesArray(value: unknown, dateLib: DateLib): value is Date[];

25

dist/cjs/utils/typeguards.js

@@ -10,4 +10,6 @@ "use strict";

/**
* Returns true if `matcher` is of type {@link DateInterval}.
* Checks if the given value is of type {@link DateInterval}.
*
* @param matcher - The value to check.
* @returns `true` if the value is a {@link DateInterval}, otherwise `false`.
* @group Utilities

@@ -22,4 +24,6 @@ */

/**
* Returns true if `value` is a {@link DateRange} type.
* Checks if the given value is of type {@link DateRange}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateRange}, otherwise `false`.
* @group Utilities

@@ -31,4 +35,6 @@ */

/**
* Returns true if `value` is of type {@link DateAfter}.
* Checks if the given value is of type {@link DateAfter}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateAfter}, otherwise `false`.
* @group Utilities

@@ -40,4 +46,6 @@ */

/**
* Returns true if `value` is of type {@link DateBefore}.
* Checks if the given value is of type {@link DateBefore}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateBefore}, otherwise `false`.
* @group Utilities

@@ -49,4 +57,6 @@ */

/**
* Returns true if `value` is a {@link DayOfWeek} type.
* Checks if the given value is of type {@link DayOfWeek}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DayOfWeek}, otherwise `false`.
* @group Utilities

@@ -58,5 +68,8 @@ */

/**
* Returns true if `value` is an array of valid dates.
* Checks if the given value is an array of valid dates.
*
* @private
* @param value - The value to check.
* @param dateLib - The date utility library instance.
* @returns `true` if the value is an array of valid dates, otherwise `false`.
*/

@@ -63,0 +76,0 @@ function isDatesArray(value, dateLib) {

31

dist/esm/classes/CalendarDay.d.ts
import { type DateLib } from "./DateLib.js";
/**
* Represent the day displayed in the calendar.
* Represents a day displayed in the calendar.
*
* In DayPicker, a `Day` is a `Date` that can be displayed in the calendar. It
* is used as extension of the native `Date` object to provide additional
* information about the day.
* In DayPicker, a `CalendarDay` is a wrapper around a `Date` object that
* provides additional information about the day, such as whether it belongs to
* the displayed month.
*/

@@ -12,3 +12,3 @@ export declare class CalendarDay {

/**
* The utility functions to manipulate dates.
* Utility functions for manipulating dates.
*

@@ -19,14 +19,14 @@ * @private

/**
* Whether the day is not belonging to the displayed month.
* Indicates whether the day does not belong to the displayed month.
*
* When `outside` is `true`, use `displayMonth` to know to which month the day
* belongs.
* If `outside` is `true`, use `displayMonth` to determine the month to which
* the day belongs.
*/
readonly outside: boolean;
/**
* The months where the day is displayed.
* The month that is currently displayed in the calendar.
*
* In DayPicker, days can fall out the displayed months (e.g. when
* `showOutsideDays` is `true`). This property is useful to know if the day is
* in the same month of the displayed month.
* This property is useful for determining if the day belongs to the same
* month as the displayed month, especially when `showOutsideDays` is
* enabled.
*/

@@ -37,6 +37,9 @@ readonly displayMonth: Date;

/**
* Check if the day is the same as the given day: considering if it is in the
* same display month.
* Checks if this day is equal to another `CalendarDay`, considering both the
* date and the displayed month.
*
* @param day The `CalendarDay` to compare with.
* @returns `true` if the days are equal, otherwise `false`.
*/
isEqualTo(day: CalendarDay): boolean;
}

15

dist/esm/classes/CalendarDay.js
import { defaultDateLib } from "./DateLib.js";
/**
* Represent the day displayed in the calendar.
* Represents a day displayed in the calendar.
*
* In DayPicker, a `Day` is a `Date` that can be displayed in the calendar. It
* is used as extension of the native `Date` object to provide additional
* information about the day.
* In DayPicker, a `CalendarDay` is a wrapper around a `Date` object that
* provides additional information about the day, such as whether it belongs to
* the displayed month.
*/

@@ -17,4 +17,7 @@ export class CalendarDay {

/**
* Check if the day is the same as the given day: considering if it is in the
* same display month.
* Checks if this day is equal to another `CalendarDay`, considering both the
* date and the displayed month.
*
* @param day The `CalendarDay` to compare with.
* @returns `true` if the days are equal, otherwise `false`.
*/

@@ -21,0 +24,0 @@ isEqualTo(day) {

11

dist/esm/classes/CalendarMonth.d.ts
import { CalendarWeek } from "./CalendarWeek.js";
/** Represent a month in a calendar year. Contains the weeks within the month. */
/**
* Represents a month in a calendar year.
*
* A `CalendarMonth` contains the weeks within the month and the date of the
* month.
*/
export declare class CalendarMonth {
constructor(month: Date, weeks: CalendarWeek[]);
/** The date of the month. */
/** The date representing the first day of the month. */
date: Date;
/** The weeks within the month. */
/** The weeks that belong to this month. */
weeks: CalendarWeek[];
}

7

dist/esm/classes/CalendarMonth.js

@@ -1,2 +0,7 @@

/** Represent a month in a calendar year. Contains the weeks within the month. */
/**
* Represents a month in a calendar year.
*
* A `CalendarMonth` contains the weeks within the month and the date of the
* month.
*/
export class CalendarMonth {

@@ -3,0 +8,0 @@ constructor(month, weeks) {

8

dist/esm/classes/CalendarWeek.d.ts
import { CalendarDay } from "./CalendarDay.js";
/** Represent a week in a calendar month. */
/**
* Represents a week in a calendar month.
*
* A `CalendarWeek` contains the days within the week and the week number.
*/
export declare class CalendarWeek {

@@ -7,4 +11,4 @@ constructor(weekNumber: number, days: CalendarDay[]);

weekNumber: number;
/** The days within the week. */
/** The days that belong to this week. */
days: CalendarDay[];
}

6

dist/esm/classes/CalendarWeek.js

@@ -1,2 +0,6 @@

/** Represent a week in a calendar month. */
/**
* Represents a week in a calendar month.
*
* A `CalendarWeek` contains the days within the week and the week number.
*/
export class CalendarWeek {

@@ -3,0 +7,0 @@ constructor(weekNumber, days) {

105

dist/esm/classes/DateLib.d.ts

@@ -1,6 +0,3 @@

import { addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, format, getISOWeek, getMonth, getWeek, getYear, isAfter, isBefore, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear } from "date-fns";
import type { EndOfWeekOptions, StartOfWeekOptions, FormatOptions as DateFnsFormatOptions } from "date-fns";
import type { EndOfWeekOptions, StartOfWeekOptions, FormatOptions as DateFnsFormatOptions, Interval, GetMonthOptions, GetYearOptions, GetWeekOptions } from "date-fns";
import type { Locale } from "date-fns/locale";
import { endOfBroadcastWeek } from "../helpers/endOfBroadcastWeek.js";
import { startOfBroadcastWeek } from "../helpers/startOfBroadcastWeek.js";
import { Numerals } from "../types/shared.js";

@@ -47,4 +44,4 @@ export type { Locale } from "date-fns/locale";

/**
* A wrapper class around [date-fns](http://date-fns.org) sharing the same
* options.
* A wrapper class around [date-fns](http://date-fns.org) that provides utility
* methods for date manipulation and formatting.
*

@@ -57,33 +54,37 @@ * @since 9.2.0

export declare class DateLib {
/** The options for the date library. */
/** The options for configuring the date library. */
readonly options: DateLibOptions;
/** Overrides for the date library functions. */
/** Overrides for the default date library functions. */
readonly overrides?: Partial<typeof DateLib.prototype>;
/**
* Creates an instance of DateLib.
* Creates an instance of `DateLib`.
*
* @param options The options for the date library.
* @param overrides Overrides for the date library functions.
* @param options Configuration options for the date library.
* @param overrides Custom overrides for the date library functions.
*/
constructor(options?: DateLibOptions, overrides?: Partial<typeof DateLib.prototype>);
/**
* Generate digit map dynamically using Intl.NumberFormat.
* Generates a mapping of Arabic digits (0-9) to the target numbering system
* digits.
*
* @since 9.5.0
* @returns A record mapping Arabic digits to the target numerals.
*/
private getDigitMap;
/**
* Replace Arabic digits with the target numbering system digits.
* Replaces Arabic digits in a string with the target numbering system digits.
*
* @since 9.5.0
* @param input The string containing Arabic digits.
* @returns The string with digits replaced.
*/
private replaceDigits;
/**
* Format number using the custom numbering system.
* Formats a number using the configured numbering system.
*
* @since 9.5.0
* @param value The number to format.
* @returns The formatted number.
* @returns The formatted number as a string.
*/
formatNumber(value: number): string;
formatNumber(value: number | string): string;
/**

@@ -96,10 +97,10 @@ * Reference to the built-in Date constructor.

/**
* Creates a new date object to the today's date.
* Creates a new `Date` object representing today's date.
*
* @since 9.5.0
* @returns The new date object.
* @returns A `Date` object for today's date.
*/
today: () => Date;
/**
* Creates a new date object with the specified year, month and date.
* Creates a new `Date` object with the specified year, month, and day.
*

@@ -110,3 +111,3 @@ * @since 9.5.0

* @param date The day of the month.
* @returns The new date object.
* @returns A new `Date` object.
*/

@@ -121,3 +122,3 @@ newDate: (year: number, monthIndex: number, date: number) => Date;

*/
addDays: typeof addDays;
addDays: (date: Date, amount: number) => Date;
/**

@@ -130,3 +131,3 @@ * Adds the specified number of months to the given date.

*/
addMonths: typeof addMonths;
addMonths: (date: Date, amount: number) => Date;
/**

@@ -139,3 +140,3 @@ * Adds the specified number of weeks to the given date.

*/
addWeeks: typeof addWeeks;
addWeeks: (date: Date, amount: number) => Date;
/**

@@ -148,3 +149,3 @@ * Adds the specified number of years to the given date.

*/
addYears: typeof addYears;
addYears: (date: Date, amount: number) => Date;
/**

@@ -157,3 +158,3 @@ * Returns the number of calendar days between the given dates.

*/
differenceInCalendarDays: typeof differenceInCalendarDays;
differenceInCalendarDays: (dateLeft: Date, dateRight: Date) => number;
/**

@@ -166,3 +167,3 @@ * Returns the number of calendar months between the given dates.

*/
differenceInCalendarMonths: typeof differenceInCalendarMonths;
differenceInCalendarMonths: (dateLeft: Date, dateRight: Date) => number;
/**

@@ -173,3 +174,3 @@ * Returns the months between the given dates.

*/
eachMonthOfInterval: typeof eachMonthOfInterval;
eachMonthOfInterval: (interval: Interval) => Date[];
/**

@@ -181,3 +182,3 @@ * Returns the end of the broadcast week for the given date.

*/
endOfBroadcastWeek: typeof endOfBroadcastWeek;
endOfBroadcastWeek: (date: Date) => Date;
/**

@@ -189,3 +190,3 @@ * Returns the end of the ISO week for the given date.

*/
endOfISOWeek: typeof endOfISOWeek;
endOfISOWeek: (date: Date) => Date;
/**

@@ -197,3 +198,3 @@ * Returns the end of the month for the given date.

*/
endOfMonth: typeof endOfMonth;
endOfMonth: (date: Date) => Date;
/**

@@ -205,3 +206,3 @@ * Returns the end of the week for the given date.

*/
endOfWeek: typeof endOfWeek;
endOfWeek: (date: Date, options?: EndOfWeekOptions<Date>) => Date;
/**

@@ -213,3 +214,3 @@ * Returns the end of the year for the given date.

*/
endOfYear: typeof endOfYear;
endOfYear: (date: Date) => Date;
/**

@@ -222,3 +223,3 @@ * Formats the given date using the specified format string.

*/
format: typeof format;
format: (date: Date, formatStr: string, options?: DateFnsFormatOptions) => string;
/**

@@ -230,3 +231,3 @@ * Returns the ISO week number for the given date.

*/
getISOWeek: typeof getISOWeek;
getISOWeek: (date: Date) => number;
/**

@@ -238,3 +239,3 @@ * Returns the month of the given date.

*/
getMonth: typeof getMonth;
getMonth: (date: Date, options?: GetMonthOptions) => number;
/**

@@ -246,3 +247,3 @@ * Returns the year of the given date.

*/
getYear: typeof getYear;
getYear: (date: Date, options?: GetYearOptions) => number;
/**

@@ -254,3 +255,3 @@ * Returns the local week number for the given date.

*/
getWeek: typeof getWeek;
getWeek: (date: Date, options?: GetWeekOptions) => number;
/**

@@ -263,3 +264,3 @@ * Checks if the first date is after the second date.

*/
isAfter: typeof isAfter;
isAfter: (date: Date, dateToCompare: Date) => boolean;
/**

@@ -272,3 +273,3 @@ * Checks if the first date is before the second date.

*/
isBefore: typeof isBefore;
isBefore: (date: Date, dateToCompare: Date) => boolean;
/**

@@ -288,3 +289,3 @@ * Checks if the given value is a Date object.

*/
isSameDay: typeof isSameDay;
isSameDay: (dateLeft: Date, dateRight: Date) => boolean;
/**

@@ -297,3 +298,3 @@ * Checks if the given dates are in the same month.

*/
isSameMonth: typeof isSameMonth;
isSameMonth: (dateLeft: Date, dateRight: Date) => boolean;
/**

@@ -306,3 +307,3 @@ * Checks if the given dates are in the same year.

*/
isSameYear: typeof isSameYear;
isSameYear: (dateLeft: Date, dateRight: Date) => boolean;
/**

@@ -314,3 +315,3 @@ * Returns the latest date in the given array of dates.

*/
max: typeof max;
max: (dates: Date[]) => Date;
/**

@@ -322,3 +323,3 @@ * Returns the earliest date in the given array of dates.

*/
min: typeof min;
min: (dates: Date[]) => Date;
/**

@@ -331,3 +332,3 @@ * Sets the month of the given date.

*/
setMonth: typeof setMonth;
setMonth: (date: Date, month: number) => Date;
/**

@@ -340,3 +341,3 @@ * Sets the year of the given date.

*/
setYear: typeof setYear;
setYear: (date: Date, year: number) => Date;
/**

@@ -348,3 +349,3 @@ * Returns the start of the broadcast week for the given date.

*/
startOfBroadcastWeek: typeof startOfBroadcastWeek;
startOfBroadcastWeek: (date: Date, dateLib: DateLib) => Date;
/**

@@ -356,3 +357,3 @@ * Returns the start of the day for the given date.

*/
startOfDay: typeof startOfDay;
startOfDay: (date: Date) => Date;
/**

@@ -364,3 +365,3 @@ * Returns the start of the ISO week for the given date.

*/
startOfISOWeek: typeof startOfISOWeek;
startOfISOWeek: (date: Date) => Date;
/**

@@ -372,3 +373,3 @@ * Returns the start of the month for the given date.

*/
startOfMonth: typeof startOfMonth;
startOfMonth: (date: Date) => Date;
/**

@@ -380,3 +381,3 @@ * Returns the start of the week for the given date.

*/
startOfWeek: typeof startOfWeek;
startOfWeek: (date: Date, options?: StartOfWeekOptions) => Date;
/**

@@ -388,3 +389,3 @@ * Returns the start of the year for the given date.

*/
startOfYear: typeof startOfYear;
startOfYear: (date: Date) => Date;
}

@@ -391,0 +392,0 @@ /** The default locale (English). */

48

dist/esm/classes/DateLib.js

@@ -7,4 +7,4 @@ import { TZDate } from "@date-fns/tz";

/**
* A wrapper class around [date-fns](http://date-fns.org) sharing the same
* options.
* A wrapper class around [date-fns](http://date-fns.org) that provides utility
* methods for date manipulation and formatting.
*

@@ -18,6 +18,6 @@ * @since 9.2.0

/**
* Creates an instance of DateLib.
* Creates an instance of `DateLib`.
*
* @param options The options for the date library.
* @param overrides Overrides for the date library functions.
* @param options Configuration options for the date library.
* @param overrides Custom overrides for the date library functions.
*/

@@ -32,6 +32,6 @@ constructor(options, overrides) {

/**
* Creates a new date object to the today's date.
* Creates a new `Date` object representing today's date.
*
* @since 9.5.0
* @returns The new date object.
* @returns A `Date` object for today's date.
*/

@@ -48,3 +48,3 @@ this.today = () => {

/**
* Creates a new date object with the specified year, month and date.
* Creates a new `Date` object with the specified year, month, and day.
*

@@ -55,3 +55,3 @@ * @since 9.5.0

* @param date The day of the month.
* @returns The new date object.
* @returns A new `Date` object.
*/

@@ -157,3 +157,3 @@ this.newDate = (year, monthIndex, date) => {

return this.overrides?.endOfBroadcastWeek
? this.overrides.endOfBroadcastWeek(date, this)
? this.overrides.endOfBroadcastWeek(date)
: endOfBroadcastWeek(date, this);

@@ -189,5 +189,5 @@ };

*/
this.endOfWeek = (date) => {
this.endOfWeek = (date, options) => {
return this.overrides?.endOfWeek
? this.overrides.endOfWeek(date, this.options)
? this.overrides.endOfWeek(date, options)
: endOfWeek(date, this.options);

@@ -213,3 +213,3 @@ };

*/
this.format = (date, formatStr) => {
this.format = (date, formatStr, options) => {
const formatted = this.overrides?.format

@@ -240,3 +240,3 @@ ? this.overrides.format(date, formatStr, this.options)

*/
this.getMonth = (date) => {
this.getMonth = (date, options) => {
return this.overrides?.getMonth

@@ -252,3 +252,3 @@ ? this.overrides.getMonth(date, this.options)

*/
this.getYear = (date) => {
this.getYear = (date, options) => {
return this.overrides?.getYear

@@ -264,3 +264,3 @@ ? this.overrides.getYear(date, this.options)

*/
this.getWeek = (date) => {
this.getWeek = (date, options) => {
return this.overrides?.getWeek

@@ -389,3 +389,3 @@ ? this.overrides.getWeek(date, this.options)

*/
this.startOfBroadcastWeek = (date) => {
this.startOfBroadcastWeek = (date, dateLib) => {
return this.overrides?.startOfBroadcastWeek

@@ -434,3 +434,3 @@ ? this.overrides.startOfBroadcastWeek(date, this)

*/
this.startOfWeek = (date) => {
this.startOfWeek = (date, options) => {
return this.overrides?.startOfWeek

@@ -455,5 +455,7 @@ ? this.overrides.startOfWeek(date, this.options)

/**
* Generate digit map dynamically using Intl.NumberFormat.
* Generates a mapping of Arabic digits (0-9) to the target numbering system
* digits.
*
* @since 9.5.0
* @returns A record mapping Arabic digits to the target numerals.
*/

@@ -474,5 +476,7 @@ getDigitMap() {

/**
* Replace Arabic digits with the target numbering system digits.
* Replaces Arabic digits in a string with the target numbering system digits.
*
* @since 9.5.0
* @param input The string containing Arabic digits.
* @returns The string with digits replaced.
*/

@@ -484,7 +488,7 @@ replaceDigits(input) {

/**
* Format number using the custom numbering system.
* Formats a number using the configured numbering system.
*
* @since 9.5.0
* @param value The number to format.
* @returns The formatted number.
* @returns The formatted number as a string.
*/

@@ -491,0 +495,0 @@ formatNumber(value) {

8

dist/esm/components/Day.d.ts

@@ -5,7 +5,7 @@ import React, { type HTMLAttributes } from "react";

/**
* Render the gridcell of a day in the calendar and handle the interaction and
* the focus with they day.
* Render a grid cell for a specific day in the calendar.
*
* If you need to just change the content of the day cell, consider swapping the
* `DayButton` component instead.
* Handles interaction and focus for the day. If you only need to change the
* content of the day cell, consider swapping the `DayButton` component
* instead.
*

@@ -12,0 +12,0 @@ * @group Components

8

dist/esm/components/Day.js
import React from "react";
/**
* Render the gridcell of a day in the calendar and handle the interaction and
* the focus with they day.
* Render a grid cell for a specific day in the calendar.
*
* If you need to just change the content of the day cell, consider swapping the
* `DayButton` component instead.
* Handles interaction and focus for the day. If you only need to change the
* content of the day cell, consider swapping the `DayButton` component
* instead.
*

@@ -9,0 +9,0 @@ * @group Components

4

dist/esm/components/DayButton.d.ts

@@ -5,3 +5,3 @@ import React, { type ButtonHTMLAttributes } from "react";

/**
* Render the button for a day in the calendar.
* Render a button for a specific day in the calendar.
*

@@ -14,5 +14,5 @@ * @group Components

day: CalendarDay;
/** The modifiers for the day. */
/** The modifiers to apply to the day. */
modifiers: Modifiers;
} & ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
export type DayButtonProps = Parameters<typeof DayButton>[0];

2

dist/esm/components/DayButton.js
import React from "react";
/**
* Render the button for a day in the calendar.
* Render a button for a specific day in the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

10

dist/esm/components/Dropdown.d.ts

@@ -9,10 +9,7 @@ import React, { type SelectHTMLAttributes } from "react";

label: string;
/**
* The dropdown option is disabled when it cannot be selected because out of
* the calendar range.
*/
/** Whether the dropdown option is disabled (e.g., out of the calendar range). */
disabled: boolean;
};
/**
* Render a dropdown component to use in the navigation bar.
* Render a dropdown component for navigation in the calendar.
*

@@ -24,3 +21,3 @@ * @group Components

/**
* @deprecated Use{@link useDayPicker} hook to get the list of internal
* @deprecated Use {@link useDayPicker} hook to get the list of internal
* components.

@@ -34,4 +31,5 @@ */

classNames: ClassNames;
/** The options to display in the dropdown. */
options?: DropdownOption[] | undefined;
} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;
export type DropdownProps = Parameters<typeof Dropdown>[0];

2

dist/esm/components/Dropdown.js
import React from "react";
import { UI } from "../UI.js";
/**
* Render a dropdown component to use in the navigation bar.
* Render a dropdown component for navigation in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

2

dist/esm/components/DropdownNav.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Render the the navigation dropdowns.
* Render the navigation dropdowns for the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/DropdownNav.js
import React from "react";
/**
* Render the the navigation dropdowns.
* Render the navigation dropdowns for the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Footer.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Component wrapping the footer.
* Render the footer of the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Footer.js
import React from "react";
/**
* Component wrapping the footer.
* Render the footer of the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

6

dist/esm/components/Month.d.ts
import React, { type HTMLAttributes } from "react";
import type { CalendarMonth } from "../classes/CalendarMonth.js";
/**
* Render the grid with the weekday header row and the weeks for the given
* Render the grid with the weekday header row and the weeks for a specific
* month.

@@ -11,7 +11,7 @@ *

export declare function Month(props: {
/** The month where the grid is displayed. */
/** The month to display in the grid. */
calendarMonth: CalendarMonth;
/** The index where this month is displayed. */
/** The index of the month being displayed. */
displayIndex: number;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type MonthProps = Parameters<typeof Month>[0];

2

dist/esm/components/Month.js
import React from "react";
/**
* Render the grid with the weekday header row and the weeks for the given
* Render the grid with the weekday header row and the weeks for a specific
* month.

@@ -5,0 +5,0 @@ *

6

dist/esm/components/MonthCaption.d.ts
import React, { type HTMLAttributes } from "react";
import type { CalendarMonth } from "../classes/index.js";
/**
* Render the caption of a month in the calendar.
* Render the caption for a month in the calendar.
*

@@ -10,7 +10,7 @@ * @group Components

export declare function MonthCaption(props: {
/** The month where the grid is displayed. */
/** The month to display in the caption. */
calendarMonth: CalendarMonth;
/** The index where this month is displayed. */
/** The index of the month being displayed. */
displayIndex: number;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type MonthCaptionProps = Parameters<typeof MonthCaption>[0];

2

dist/esm/components/MonthCaption.js
import React from "react";
/**
* Render the caption of a month in the calendar.
* Render the caption for a month in the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/MonthGrid.d.ts
import React, { type TableHTMLAttributes } from "react";
/**
* Render the grid of days in a month.
* Render the grid of days for a specific month.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/MonthGrid.js
import React from "react";
/**
* Render the grid of days in a month.
* Render the grid of days for a specific month.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Months.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Component wrapping the month grids.
* Render a container wrapping the month grids.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Months.js
import React from "react";
/**
* Component wrapping the month grids.
* Render a container wrapping the month grids.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/MonthsDropdown.d.ts
import React from "react";
import { DropdownProps } from "./Dropdown.js";
/**
* Render the dropdown to navigate between months.
* Render a dropdown to navigate between months in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

2

dist/esm/components/MonthsDropdown.js
import React from "react";
import { useDayPicker } from "../useDayPicker.js";
/**
* Render the dropdown to navigate between months.
* Render a dropdown to navigate between months in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

6

dist/esm/components/Nav.d.ts
import React, { type MouseEventHandler, type HTMLAttributes } from "react";
/**
* Render the toolbar with the navigation button.
* Render the navigation toolbar with buttons to navigate between months.
*

@@ -9,7 +9,11 @@ * @group Components

export declare function Nav(props: {
/** Handler for the previous month button click. */
onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
/** Handler for the next month button click. */
onNextClick?: MouseEventHandler<HTMLButtonElement>;
/** The date of the previous month, if available. */
previousMonth?: Date | undefined;
/** The date of the next month, if available. */
nextMonth?: Date | undefined;
} & HTMLAttributes<HTMLElement>): React.JSX.Element;
export type NavProps = Parameters<typeof Nav>[0];

2

dist/esm/components/Nav.js

@@ -5,3 +5,3 @@ import React, { useCallback } from "react";

/**
* Render the toolbar with the navigation button.
* Render the navigation toolbar with buttons to navigate between months.
*

@@ -8,0 +8,0 @@ * @group Components

2

dist/esm/components/NextMonthButton.d.ts
import React, { type ButtonHTMLAttributes } from "react";
/**
* Render the next month button element in the calendar.
* Render the button to navigate to the next month in the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/NextMonthButton.js
import React from "react";
import { useDayPicker } from "../useDayPicker.js";
/**
* Render the next month button element in the calendar.
* Render the button to navigate to the next month in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

2

dist/esm/components/Option.d.ts
import React, { type OptionHTMLAttributes } from "react";
/**
* Render the `option` element.
* Render an `option` element.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Option.js
import React from "react";
/**
* Render the `option` element.
* Render an `option` element.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/PreviousMonthButton.d.ts
import React, { type ButtonHTMLAttributes } from "react";
/**
* Render the previous month button element in the calendar.
* Render the button to navigate to the previous month in the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/PreviousMonthButton.js
import React from "react";
import { useDayPicker } from "../useDayPicker.js";
/**
* Render the previous month button element in the calendar.
* Render the button to navigate to the previous month in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

4

dist/esm/components/Root.d.ts
import React, { type Ref, type HTMLAttributes } from "react";
/**
* Render the root element.
* Render the root element of the calendar.
*

@@ -9,5 +9,5 @@ * @group Components

export declare function Root(props: {
/** Ref for root element used when `animate` is `true`. */
/** Ref for the root element, used when `animate` is `true`. */
rootRef?: Ref<HTMLDivElement>;
} & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
export type RootProps = Parameters<typeof Root>[0];

2

dist/esm/components/Root.js
import React from "react";
/**
* Render the root element.
* Render the root element of the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Select.d.ts
import React, { type SelectHTMLAttributes } from "react";
/**
* Render the `select` element.
* Render a `select` element.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Select.js
import React from "react";
/**
* Render the `select` element.
* Render a `select` element.
*

@@ -5,0 +5,0 @@ * @group Components

3

dist/esm/components/Week.d.ts
import React, { type HTMLAttributes } from "react";
import type { CalendarWeek } from "../classes/index.js";
/**
* Render a row in the calendar, with the days and the week number.
* Render a table row representing a week in the calendar.
*

@@ -10,4 +10,5 @@ * @group Components

export declare function Week(props: {
/** The week to render. */
week: CalendarWeek;
} & HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
export type WeekProps = Parameters<typeof Week>[0];

2

dist/esm/components/Week.js
import React from "react";
/**
* Render a row in the calendar, with the days and the week number.
* Render a table row representing a week in the calendar.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Weekday.d.ts
import React, { type ThHTMLAttributes } from "react";
/**
* Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
* Render a table header cell with the name of a weekday (e.g., "Mo", "Tu").
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Weekday.js
import React from "react";
/**
* Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
* Render a table header cell with the name of a weekday (e.g., "Mo", "Tu").
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Weekdays.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Render the row with the weekday names.
* Render the table row containing the weekday names.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Weekdays.js
import React from "react";
/**
* Render the row with the weekday names.
* Render the table row containing the weekday names.
*

@@ -5,0 +5,0 @@ * @group Components

4

dist/esm/components/WeekNumber.d.ts
import React, { type ThHTMLAttributes } from "react";
import type { CalendarWeek } from "../classes/index.js";
/**
* Render the cell with the number of the week.
* Render a table cell displaying the number of the week.
*

@@ -10,5 +10,5 @@ * @group Components

export declare function WeekNumber(props: {
/** The week to render. */
/** The week to display. */
week: CalendarWeek;
} & ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
export type WeekNumberProps = Parameters<typeof WeekNumber>[0];

2

dist/esm/components/WeekNumber.js
import React from "react";
/**
* Render the cell with the number of the week.
* Render a table cell displaying the number of the week.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/WeekNumberHeader.d.ts
import React, { type ThHTMLAttributes } from "react";
/**
* Render the column header for the week numbers.
* Render the header cell for the week numbers column.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/WeekNumberHeader.js
import React from "react";
/**
* Render the column header for the week numbers.
* Render the header cell for the week numbers column.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Weeks.d.ts
import React, { type HTMLAttributes } from "react";
/**
* Render the weeks in the month grid.
* Render the container for the weeks in the month grid.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/Weeks.js
import React from "react";
/**
* Render the weeks in the month grid.
* Render the container for the weeks in the month grid.
*

@@ -5,0 +5,0 @@ * @group Components

2

dist/esm/components/YearsDropdown.d.ts
import React from "react";
import { DropdownProps } from "./Dropdown.js";
/**
* Render the dropdown to navigate between years.
* Render a dropdown to navigate between years in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

2

dist/esm/components/YearsDropdown.js
import React from "react";
import { useDayPicker } from "../useDayPicker.js";
/**
* Render the dropdown to navigate between years.
* Render a dropdown to navigate between years in the calendar.
*

@@ -6,0 +6,0 @@ * @group Components

6

dist/esm/DayPicker.d.ts
import React from "react";
import type { DayPickerProps } from "./types/index.js";
/**
* Render the date picker calendar.
* Renders the DayPicker calendar component.
*
* @param initialProps - The props for the DayPicker component.
* @returns The rendered DayPicker component.
* @group DayPicker
* @see https://daypicker.dev
*/
export declare function DayPicker(props: DayPickerProps): React.JSX.Element;
export declare function DayPicker(initialProps: DayPickerProps): React.JSX.Element;

67

dist/esm/DayPicker.js
import React, { useCallback, useMemo, useRef } from "react";
import { TZDate } from "@date-fns/tz";
import { UI, DayFlag, SelectionState } from "./UI.js";
import { DateLib, defaultLocale } from "./classes/DateLib.js";
import { createGetModifiers } from "./helpers/createGetModifiers.js";
import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js";

@@ -18,3 +20,2 @@ import { getComponents } from "./helpers/getComponents.js";

import { useFocus } from "./useFocus.js";
import { useGetModifiers } from "./useGetModifiers.js";
import { useSelection } from "./useSelection.js";

@@ -24,8 +25,47 @@ import { rangeIncludesDate } from "./utils/rangeIncludesDate.js";

/**
* Render the date picker calendar.
* Renders the DayPicker calendar component.
*
* @param initialProps - The props for the DayPicker component.
* @returns The rendered DayPicker component.
* @group DayPicker
* @see https://daypicker.dev
*/
export function DayPicker(props) {
export function DayPicker(initialProps) {
let props = initialProps;
if (props.timeZone) {
props = {
...initialProps
};
if (props.today) {
props.today = new TZDate(props.today, props.timeZone);
}
if (props.month) {
props.month = new TZDate(props.month, props.timeZone);
}
if (props.defaultMonth) {
props.defaultMonth = new TZDate(props.defaultMonth, props.timeZone);
}
if (props.startMonth) {
props.startMonth = new TZDate(props.startMonth, props.timeZone);
}
if (props.endMonth) {
props.endMonth = new TZDate(props.endMonth, props.timeZone);
}
if (props.mode === "single" && props.selected) {
props.selected = new TZDate(props.selected, props.timeZone);
}
else if (props.mode === "multiple" && props.selected) {
props.selected = props.selected?.map((date) => new TZDate(date, props.timeZone));
}
else if (props.mode === "range" && props.selected) {
props.selected = {
from: props.selected.from
? new TZDate(props.selected.from, props.timeZone)
: undefined,
to: props.selected.to
? new TZDate(props.selected.to, props.timeZone)
: undefined
};
}
}
const { components, formatters, labels, dateLib, locale, classNames } = useMemo(() => {

@@ -65,10 +105,10 @@ const locale = { ...defaultLocale, ...props.locale };

]);
const { captionLayout, mode, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles } = props;
const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles } = props;
const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters;
const calendar = useCalendar(props, dateLib);
const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar;
const getModifiers = useGetModifiers(days, props, dateLib);
const getModifiers = createGetModifiers(days, props, dateLib);
const { isSelected, select, selected: selectedValue } = useSelection(props, dateLib) ?? {};
const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelPrevious, labelNext, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
const weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);

@@ -171,3 +211,3 @@ const isInteractive = mode !== undefined || onDayClick !== undefined;

React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
!props.hideNavigation && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
!props.hideNavigation && !navLayout && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
months.map((calendarMonth, displayIndex) => {

@@ -177,2 +217,6 @@ const dropdownMonths = getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib);

return (React.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI.Month], style: styles?.[UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
navLayout === "around" &&
!props.hideNavigation &&
displayIndex === 0 && (React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
React.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
React.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },

@@ -195,2 +239,9 @@ captionLayout === "dropdown" ||

} }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (React.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
navLayout === "around" &&
!props.hideNavigation &&
displayIndex === numberOfMonths - 1 && (React.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
React.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
displayIndex === numberOfMonths - 1 &&
navLayout === "after" &&
!props.hideNavigation && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
React.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, dateLib.options, dateLib) ||

@@ -205,3 +256,3 @@ undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] },

locale
}), className: classNames[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber))),
}), className: classNames[UI.WeekNumber], scope: "row", role: "rowheader" }, formatWeekNumber(week.weekNumber, dateLib))),
week.days.map((day) => {

@@ -208,0 +259,0 @@ const { date } = day;

9

dist/esm/formatters/formatCaption.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the caption of the month.
* Formats the caption of the month.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param month The date representing the month.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted caption as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/esm/formatters/formatCaption.js
import { DateLib } from "../classes/DateLib.js";
/**
* Format the caption of the month.
* Formats the caption of the month.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param month The date representing the month.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted caption as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/esm/formatters/formatDay.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the day date shown in the day cell.
* Formats the day date shown in the day cell.
*
* @defaultValue `d` (e.g. "1")
* @defaultValue `d` (e.g., "1").
* @param date The date to format.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted day as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/esm/formatters/formatDay.js
import { DateLib } from "../classes/DateLib.js";
/**
* Format the day date shown in the day cell.
* Formats the day date shown in the day cell.
*
* @defaultValue `d` (e.g. "1")
* @defaultValue `d` (e.g., "1").
* @param date The date to format.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted day as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

8

dist/esm/formatters/formatMonthDropdown.d.ts
import { type DateLib } from "../classes/DateLib.js";
/**
* Format the month number for the dropdown option label.
* Formats the month for the dropdown option label.
*
* @defaultValue The localized month name
* @defaultValue The localized full month name.
* @param month The date representing the month.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted month name as a string.
* @group Formatters

@@ -7,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

8

dist/esm/formatters/formatMonthDropdown.js
import { defaultDateLib } from "../classes/DateLib.js";
/**
* Format the month number for the dropdown option label.
* Formats the month for the dropdown option label.
*
* @defaultValue The localized month name
* @defaultValue The localized full month name.
* @param month The date representing the month.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted month name as a string.
* @group Formatters

@@ -7,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/esm/formatters/formatWeekdayName.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the weekday name to be displayed in the weekdays header.
* Formats the name of a weekday to be displayed in the weekdays header.
*
* @defaultValue `cccccc` (e.g. "Mo" for Monday)
* @defaultValue `cccccc` (e.g., "Mo" for Monday).
* @param weekday The date representing the weekday.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted weekday name as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

dist/esm/formatters/formatWeekdayName.js
import { DateLib } from "../classes/DateLib.js";
/**
* Format the weekday name to be displayed in the weekdays header.
* Formats the name of a weekday to be displayed in the weekdays header.
*
* @defaultValue `cccccc` (e.g. "Mo" for Monday)
* @defaultValue `cccccc` (e.g., "Mo" for Monday).
* @param weekday The date representing the weekday.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted weekday name as a string.
* @group Formatters

@@ -7,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

10

dist/esm/formatters/formatWeekNumber.d.ts
/**
* Format the week number.
* Formats the week number.
*
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
* @defaultValue The week number as a string, with a leading zero for single-digit numbers.
* @param weekNumber The week number to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted week number as a string.
* @group Formatters
* @see https://daypicker.dev/docs/translation#custom-formatters
*/
export declare function formatWeekNumber(weekNumber: number): string;
export declare function formatWeekNumber(weekNumber: number, dateLib?: import("../classes/DateLib.js").DateLib): string;

15

dist/esm/formatters/formatWeekNumber.js

@@ -0,14 +1,19 @@

import { defaultDateLib } from "../classes/DateLib.js";
/**
* Format the week number.
* Formats the week number.
*
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
* @defaultValue The week number as a string, with a leading zero for single-digit numbers.
* @param weekNumber The week number to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted week number as a string.
* @group Formatters
* @see https://daypicker.dev/docs/translation#custom-formatters
*/
export function formatWeekNumber(weekNumber) {
export function formatWeekNumber(weekNumber, dateLib = defaultDateLib) {
if (weekNumber < 10) {
return `0${weekNumber.toLocaleString()}`;
return dateLib.formatNumber(`0${weekNumber.toLocaleString()}`);
}
return `${weekNumber.toLocaleString()}`;
return dateLib.formatNumber(`${weekNumber.toLocaleString()}`);
}
//# sourceMappingURL=formatWeekNumber.js.map

5

dist/esm/formatters/formatWeekNumberHeader.d.ts
/**
* Format the week number header.
* Formats the header for the week number column.
*
* @defaultValue `""`
* @defaultValue An empty string `""`.
* @returns The formatted week number header as a string.
* @group Formatters

@@ -6,0 +7,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

5

dist/esm/formatters/formatWeekNumberHeader.js
/**
* Format the week number header.
* Formats the header for the week number column.
*
* @defaultValue `""`
* @defaultValue An empty string `""`.
* @returns The formatted week number header as a string.
* @group Formatters

@@ -6,0 +7,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

6

dist/esm/formatters/formatYearDropdown.d.ts
import { type DateLib } from "../classes/DateLib.js";
/**
* Format the years for the dropdown option label.
* Formats the year for the dropdown option label.
*
* @param year The year to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted year as a string.
* @group Formatters

@@ -6,0 +10,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

6

dist/esm/formatters/formatYearDropdown.js
import { defaultDateLib } from "../classes/DateLib.js";
/**
* Format the years for the dropdown option label.
* Formats the year for the dropdown option label.
*
* @param year The year to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted year as a string.
* @group Formatters

@@ -6,0 +10,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

14

dist/esm/helpers/calculateFocusTarget.d.ts
import type { CalendarDay } from "../classes/index.js";
import type { Modifiers } from "../types/index.js";
/**
* Calculates the focus target day based on priority.
*
* This function determines the day that should receive focus in the calendar,
* prioritizing days with specific modifiers (e.g., "focused", "today") or
* selection states.
*
* @param days The array of `CalendarDay` objects to evaluate.
* @param getModifiers A function to retrieve the modifiers for a given day.
* @param isSelected A function to determine if a day is selected.
* @param lastFocused The last focused day, if any.
* @returns The `CalendarDay` that should receive focus, or `undefined` if no
* focusable day is found.
*/
export declare function calculateFocusTarget(days: CalendarDay[], getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, lastFocused: CalendarDay | undefined): CalendarDay | undefined;

25

dist/esm/helpers/calculateFocusTarget.js

@@ -9,2 +9,11 @@ import { DayFlag } from "../UI.js";

})(FocusTargetPriority || (FocusTargetPriority = {}));
/**
* Determines if a day is focusable based on its modifiers.
*
* A day is considered focusable if it is not disabled, hidden, or outside the
* displayed month.
*
* @param modifiers The modifiers applied to the day.
* @returns `true` if the day is focusable, otherwise `false`.
*/
function isFocusableDay(modifiers) {

@@ -15,2 +24,16 @@ return (!modifiers[DayFlag.disabled] &&

}
/**
* Calculates the focus target day based on priority.
*
* This function determines the day that should receive focus in the calendar,
* prioritizing days with specific modifiers (e.g., "focused", "today") or
* selection states.
*
* @param days The array of `CalendarDay` objects to evaluate.
* @param getModifiers A function to retrieve the modifiers for a given day.
* @param isSelected A function to determine if a day is selected.
* @param lastFocused The last focused day, if any.
* @returns The `CalendarDay` that should receive focus, or `undefined` if no
* focusable day is found.
*/
export function calculateFocusTarget(days, getModifiers, isSelected, lastFocused) {

@@ -45,3 +68,3 @@ let focusTarget;

if (!focusTarget) {
// return the first day that is focusable
// Return the first day that is focusable
focusTarget = days.find((day) => isFocusableDay(getModifiers(day)));

@@ -48,0 +71,0 @@ }

8

dist/esm/helpers/endOfBroadcastWeek.d.ts
import type { DateLib } from "../classes/index.js";
/**
* Return the end date of the week in the broadcast calendar.
* Returns the end date of the week in the broadcast calendar.
*
* The broadcast week ends on the last day of the last broadcast week for the
* given date.
*
* @since 9.4.0
* @param date The date for which to calculate the end of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The end date of the broadcast week.
*/
export declare function endOfBroadcastWeek(date: Date, dateLib: DateLib): Date;

8

dist/esm/helpers/endOfBroadcastWeek.js
import { getBroadcastWeeksInMonth } from "./getBroadcastWeeksInMonth.js";
import { startOfBroadcastWeek } from "./startOfBroadcastWeek.js";
/**
* Return the end date of the week in the broadcast calendar.
* Returns the end date of the week in the broadcast calendar.
*
* The broadcast week ends on the last day of the last broadcast week for the
* given date.
*
* @since 9.4.0
* @param date The date for which to calculate the end of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The end date of the broadcast week.
*/

@@ -8,0 +14,0 @@ export function endOfBroadcastWeek(date, dateLib) {

9

dist/esm/helpers/getBroadcastWeeksInMonth.d.ts
import { DateLib } from "../classes/index.js";
/**
* Return the number of weeks to display in the broadcast calendar.
* Returns the number of weeks to display in the broadcast calendar for a given
* month.
*
* The broadcast calendar may have either 4 or 5 weeks in a month, depending on
* the start and end dates of the broadcast weeks.
*
* @since 9.4.0
* @param month The month for which to calculate the number of weeks.
* @param dateLib The date library to use for date manipulation.
* @returns The number of weeks in the broadcast calendar (4 or 5).
*/
export declare function getBroadcastWeeksInMonth(month: Date, dateLib: DateLib): 4 | 5;

9

dist/esm/helpers/getBroadcastWeeksInMonth.js
const FIVE_WEEKS = 5;
const FOUR_WEEKS = 4;
/**
* Return the number of weeks to display in the broadcast calendar.
* Returns the number of weeks to display in the broadcast calendar for a given
* month.
*
* The broadcast calendar may have either 4 or 5 weeks in a month, depending on
* the start and end dates of the broadcast weeks.
*
* @since 9.4.0
* @param month The month for which to calculate the number of weeks.
* @param dateLib The date library to use for date manipulation.
* @returns The number of weeks in the broadcast calendar (4 or 5).
*/

@@ -8,0 +15,0 @@ export function getBroadcastWeeksInMonth(month, dateLib) {

12

dist/esm/helpers/getClassNamesForModifiers.d.ts
import type { ModifiersClassNames, ClassNames } from "../types/index.js";
/**
* Returns the class names for a day based on its modifiers.
*
* This function combines the base class name for the day with any class names
* associated with active modifiers.
*
* @param modifiers The modifiers applied to the day.
* @param classNames The base class names for the calendar elements.
* @param modifiersClassNames The class names associated with specific
* modifiers.
* @returns An array of class names for the day.
*/
export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, classNames: ClassNames, modifiersClassNames?: ModifiersClassNames): string[];

12

dist/esm/helpers/getClassNamesForModifiers.js
import { DayFlag, SelectionState, UI } from "../UI.js";
/**
* Returns the class names for a day based on its modifiers.
*
* This function combines the base class name for the day with any class names
* associated with active modifiers.
*
* @param modifiers The modifiers applied to the day.
* @param classNames The base class names for the calendar elements.
* @param modifiersClassNames The class names associated with specific
* modifiers.
* @returns An array of class names for the day.
*/
export function getClassNamesForModifiers(modifiers, classNames, modifiersClassNames = {}) {

@@ -3,0 +15,0 @@ const modifierClassNames = Object.entries(modifiers)

10

dist/esm/helpers/getComponents.d.ts
import type { CustomComponents, DayPickerProps } from "../types/index.js";
/**
* Merges custom components from the props with the default components.
*
* This function ensures that any custom components provided in the props
* override the default components.
*
* @param customComponents The custom components provided in the DayPicker
* props.
* @returns An object containing the merged components.
*/
export declare function getComponents(customComponents: DayPickerProps["components"]): CustomComponents;

10

dist/esm/helpers/getComponents.js
import * as components from "../components/custom-components.js";
/**
* Merges custom components from the props with the default components.
*
* This function ensures that any custom components provided in the props
* override the default components.
*
* @param customComponents The custom components provided in the DayPicker
* props.
* @returns An object containing the merged components.
*/
export function getComponents(customComponents) {

@@ -3,0 +13,0 @@ return {

10

dist/esm/helpers/getDataAttributes.d.ts
import type { DayPickerProps } from "../types/index.js";
/** Return the `data-` attributes from the props. */
/**
* Extracts `data-` attributes from the DayPicker props.
*
* This function collects all `data-` attributes from the props and adds
* additional attributes based on the DayPicker configuration.
*
* @param props The DayPicker props.
* @returns An object containing the `data-` attributes.
*/
export declare function getDataAttributes(props: DayPickerProps): Record<string, unknown>;

13

dist/esm/helpers/getDataAttributes.js

@@ -1,2 +0,10 @@

/** Return the `data-` attributes from the props. */
/**
* Extracts `data-` attributes from the DayPicker props.
*
* This function collects all `data-` attributes from the props and adds
* additional attributes based on the DayPicker configuration.
*
* @param props The DayPicker props.
* @returns An object containing the `data-` attributes.
*/
export function getDataAttributes(props) {

@@ -8,3 +16,4 @@ const dataAttributes = {

"data-week-numbers": props.showWeekNumber || undefined,
"data-broadcast-calendar": props.broadcastCalendar || undefined
"data-broadcast-calendar": props.broadcastCalendar || undefined,
"data-nav-layout": props.navLayout || undefined
};

@@ -11,0 +20,0 @@ Object.entries(props).forEach(([key, val]) => {

13

dist/esm/helpers/getDates.d.ts
import { type DateLib } from "../classes/DateLib.js";
import { type DayPickerProps } from "../types/props.js";
/** Return all the dates to display in the calendar. */
/**
* Returns all the dates to display in the calendar.
*
* This function calculates the range of dates to display based on the provided
* display months, constraints, and calendar configuration.
*
* @param displayMonths The months to display in the calendar.
* @param maxDate The maximum date to include in the range.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates to display in the calendar.
*/
export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks" | "broadcastCalendar">, dateLib: DateLib): Date[];

15

dist/esm/helpers/getDates.js

@@ -1,2 +0,13 @@

/** Return all the dates to display in the calendar. */
/**
* Returns all the dates to display in the calendar.
*
* This function calculates the range of dates to display based on the provided
* display months, constraints, and calendar configuration.
*
* @param displayMonths The months to display in the calendar.
* @param maxDate The maximum date to include in the range.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates to display in the calendar.
*/
export function getDates(displayMonths, maxDate, props, dateLib) {

@@ -13,3 +24,3 @@ const firstMonth = displayMonths[0];

const endWeekLastDate = broadcastCalendar
? endOfBroadcastWeek(lastMonth, dateLib)
? endOfBroadcastWeek(lastMonth)
: ISOWeek

@@ -16,0 +27,0 @@ ? endOfISOWeek(endOfMonth(lastMonth))

4

dist/esm/helpers/getDays.d.ts

@@ -5,3 +5,7 @@ import type { CalendarDay, CalendarMonth } from "../classes/index.js";

* weeks for each month.
*
* @param calendarMonths The array of calendar months.
* @returns An array of `CalendarDay` objects representing all the days in the
* calendar.
*/
export declare function getDays(calendarMonths: CalendarMonth[]): CalendarDay[];

5

dist/esm/helpers/getDays.js
/**
* Returns all the days belonging to the calendar by merging the days in the
* weeks for each month.
*
* @param calendarMonths The array of calendar months.
* @returns An array of `CalendarDay` objects representing all the days in the
* calendar.
*/

@@ -8,3 +12,2 @@ export function getDays(calendarMonths) {

return calendarMonths.reduce((days, month) => {
const initialDays = [];
const weekDays = month.weeks.reduce((weekDays, week) => {

@@ -11,0 +14,0 @@ return [...weekDays, ...week.days];

6

dist/esm/helpers/getDefaultClassNames.d.ts
import type { ClassNames } from "../types/index.js";
/**
* Get the default class names for the UI elements.
* Returns the default class names for the UI elements.
*
* This function generates a mapping of default class names for various UI
* elements, day flags, selection states, and animations.
*
* @returns An object containing the default class names.
* @group Utilities
*/
export declare function getDefaultClassNames(): ClassNames;

6

dist/esm/helpers/getDefaultClassNames.js
import { UI, DayFlag, SelectionState, Animation } from "../UI.js";
/**
* Get the default class names for the UI elements.
* Returns the default class names for the UI elements.
*
* This function generates a mapping of default class names for various UI
* elements, day flags, selection states, and animations.
*
* @returns An object containing the default class names.
* @group Utilities

@@ -6,0 +10,0 @@ */

10

dist/esm/helpers/getDisplayMonths.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/**
* Returns the months to display in the calendar.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including `numberOfMonths`.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates representing the months to display.
*/
export declare function getDisplayMonths(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "numberOfMonths">, dateLib: DateLib): Date[];

10

dist/esm/helpers/getDisplayMonths.js

@@ -0,1 +1,11 @@

/**
* Returns the months to display in the calendar.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including `numberOfMonths`.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates representing the months to display.
*/
export function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib) {

@@ -2,0 +12,0 @@ const { numberOfMonths = 1 } = props;

17

dist/esm/helpers/getFocusableDate.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types/index.js";
/** Return the next date that should be focused. */
/**
* Calculates the next date that should be focused in the calendar.
*
* This function determines the next focusable date based on the movement
* direction, constraints, and calendar configuration.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDate The reference date from which to calculate the next focusable
* date.
* @param navStart The earliest date the user can navigate to.
* @param navEnd The latest date the user can navigate to.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns The next focusable date.
*/
export declare function getFocusableDate(moveBy: MoveFocusBy, moveDir: MoveFocusDir, refDate: Date, navStart: Date | undefined, navEnd: Date | undefined, props: Pick<DayPickerProps, "ISOWeek" | "broadcastCalendar">, dateLib: DateLib): Date;

19

dist/esm/helpers/getFocusableDate.js

@@ -1,2 +0,17 @@

/** Return the next date that should be focused. */
/**
* Calculates the next date that should be focused in the calendar.
*
* This function determines the next focusable date based on the movement
* direction, constraints, and calendar configuration.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDate The reference date from which to calculate the next focusable
* date.
* @param navStart The earliest date the user can navigate to.
* @param navEnd The latest date the user can navigate to.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns The next focusable date.
*/
export function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {

@@ -16,3 +31,3 @@ const { ISOWeek, broadcastCalendar } = props;

endOfWeek: (date) => broadcastCalendar
? endOfBroadcastWeek(date, dateLib)
? endOfBroadcastWeek(date)
: ISOWeek

@@ -19,0 +34,0 @@ ? endOfISOWeek(date)

8

dist/esm/helpers/getFormatters.d.ts
import * as defaultFormatters from "../formatters/index.js";
import type { DayPickerProps } from "../types/index.js";
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom formatters from the props with the default formatters.
*
* @param customFormatters The custom formatters provided in the DayPicker
* props.
* @returns The merged formatters object.
*/
export declare function getFormatters(customFormatters: DayPickerProps["formatters"]): {

@@ -5,0 +11,0 @@ formatCaption: typeof defaultFormatters.formatCaption;

8

dist/esm/helpers/getFormatters.js
import * as defaultFormatters from "../formatters/index.js";
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom formatters from the props with the default formatters.
*
* @param customFormatters The custom formatters provided in the DayPicker
* props.
* @returns The merged formatters object.
*/
export function getFormatters(customFormatters) {

@@ -4,0 +10,0 @@ if (customFormatters?.formatMonthCaption && !customFormatters.formatCaption) {

12

dist/esm/helpers/getInitialMonth.d.ts
import { type DateLib } from "../classes/DateLib.js";
import { type DayPickerProps } from "../types/props.js";
/** Return the start month based on the props passed to DayPicker. */
/**
* Determines the initial month to display in the calendar based on the provided
* props.
*
* This function calculates the starting month, considering constraints such as
* `startMonth`, `endMonth`, and the number of months to display.
*
* @param props The DayPicker props, including navigation and date constraints.
* @param dateLib The date library to use for date manipulation.
* @returns The initial month to display.
*/
export declare function getInitialMonth(props: Pick<DayPickerProps, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths" | "timeZone">, dateLib: DateLib): Date;

21

dist/esm/helpers/getInitialMonth.js

@@ -1,8 +0,17 @@

import { TZDate } from "@date-fns/tz";
/** Return the start month based on the props passed to DayPicker. */
/**
* Determines the initial month to display in the calendar based on the provided
* props.
*
* This function calculates the starting month, considering constraints such as
* `startMonth`, `endMonth`, and the number of months to display.
*
* @param props The DayPicker props, including navigation and date constraints.
* @param dateLib The date library to use for date manipulation.
* @returns The initial month to display.
*/
export function getInitialMonth(props, dateLib) {
const { month, defaultMonth, today = dateLib.today(), numberOfMonths = 1, endMonth, startMonth, timeZone } = props;
const { month, defaultMonth, today = dateLib.today(), numberOfMonths = 1, endMonth, startMonth } = props;
let initialMonth = month || defaultMonth || today;
const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib;
// Fix the initialMonth if is after the endMonth
// Adjust the initial month if it is after the endMonth
if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) {

@@ -12,10 +21,8 @@ const offset = -1 * (numberOfMonths - 1);

}
// Fix the initialMonth if is before the startMonth
// Adjust the initial month if it is before the startMonth
if (startMonth && differenceInCalendarMonths(initialMonth, startMonth) < 0) {
initialMonth = startMonth;
}
// When timeZone is provided, convert initialMonth to TZDate type to ensure proper timezone handling
initialMonth = timeZone ? new TZDate(initialMonth, timeZone) : initialMonth;
return startOfMonth(initialMonth);
}
//# sourceMappingURL=getInitialMonth.js.map

7

dist/esm/helpers/getLabels.d.ts
import type { DayPickerProps, Labels } from "../types/index.js";
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom labels from the props with the default labels.
*
* @param customLabels The custom labels provided in the DayPicker props.
* @returns The merged labels object.
*/
export declare function getLabels(customLabels: DayPickerProps["labels"]): Labels;

7

dist/esm/helpers/getLabels.js
import * as defaultLabels from "../labels/index.js";
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom labels from the props with the default labels.
*
* @param customLabels The custom labels provided in the DayPicker props.
* @returns The merged labels object.
*/
export function getLabels(customLabels) {

@@ -4,0 +9,0 @@ return {

16

dist/esm/helpers/getMonthOptions.d.ts
import { type DateLib } from "../classes/DateLib.js";
import { DropdownOption } from "../components/Dropdown.js";
import type { Formatters } from "../types/index.js";
/** Return the months to show in the dropdown. */
/**
* Returns the months to show in the dropdown.
*
* This function generates a list of months for the current year, formatted
* using the provided formatter, and determines whether each month should be
* disabled based on the navigation range.
*
* @param displayMonth The currently displayed month.
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the month labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the months, or `undefined`
* if no months are available.
*/
export declare function getMonthOptions(displayMonth: Date, navStart: Date | undefined, navEnd: Date | undefined, formatters: Pick<Formatters, "formatMonthDropdown">, dateLib: DateLib): DropdownOption[] | undefined;

16

dist/esm/helpers/getMonthOptions.js

@@ -1,2 +0,16 @@

/** Return the months to show in the dropdown. */
/**
* Returns the months to show in the dropdown.
*
* This function generates a list of months for the current year, formatted
* using the provided formatter, and determines whether each month should be
* disabled based on the navigation range.
*
* @param displayMonth The currently displayed month.
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the month labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the months, or `undefined`
* if no months are available.
*/
export function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {

@@ -3,0 +17,0 @@ const { startOfMonth, startOfYear, endOfYear, eachMonthOfInterval, getMonth } = dateLib;

23

dist/esm/helpers/getMonths.d.ts
import type { DateLib } from "../classes/DateLib.js";
import { CalendarMonth } from "../classes/index.js";
import type { DayPickerProps } from "../types/index.js";
/** Return the months to display in the calendar. */
export declare function getMonths(
/** The months (as dates) to display in the calendar. */
displayMonths: Date[],
/** The dates to display in the calendar. */
dates: Date[],
/** Options from the props context. */
props: Pick<DayPickerProps, "broadcastCalendar" | "fixedWeeks" | "ISOWeek" | "reverseMonths">, dateLib: DateLib): CalendarMonth[];
/**
* Returns the months to display in the calendar.
*
* This function generates `CalendarMonth` objects for each month to be
* displayed, including their weeks and days, based on the provided display
* months and dates.
*
* @param displayMonths The months (as dates) to display in the calendar.
* @param dates The dates to display in the calendar.
* @param props Options from the DayPicker props context.
* @param dateLib The date library to use for date manipulation.
* @returns An array of `CalendarMonth` objects representing the months to
* display.
*/
export declare function getMonths(displayMonths: Date[], dates: Date[], props: Pick<DayPickerProps, "broadcastCalendar" | "fixedWeeks" | "ISOWeek" | "reverseMonths">, dateLib: DateLib): CalendarMonth[];

25

dist/esm/helpers/getMonths.js
import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
/** Return the months to display in the calendar. */
export function getMonths(
/** The months (as dates) to display in the calendar. */
displayMonths,
/** The dates to display in the calendar. */
dates,
/** Options from the props context. */
props, dateLib) {
/**
* Returns the months to display in the calendar.
*
* This function generates `CalendarMonth` objects for each month to be
* displayed, including their weeks and days, based on the provided display
* months and dates.
*
* @param displayMonths The months (as dates) to display in the calendar.
* @param dates The dates to display in the calendar.
* @param props Options from the DayPicker props context.
* @param dateLib The date library to use for date manipulation.
* @returns An array of `CalendarMonth` objects representing the months to
* display.
*/
export function getMonths(displayMonths, dates, props, dateLib) {
const { addDays, endOfBroadcastWeek, endOfISOWeek, endOfMonth, endOfWeek, getISOWeek, getWeek, startOfBroadcastWeek, startOfISOWeek, startOfWeek } = dateLib;

@@ -18,3 +25,3 @@ const dayPickerMonths = displayMonths.reduce((months, month) => {

const lastDateOfLastWeek = props.broadcastCalendar
? endOfBroadcastWeek(month, dateLib)
? endOfBroadcastWeek(month)
: props.ISOWeek

@@ -21,0 +28,0 @@ ? endOfISOWeek(endOfMonth(month))

8

dist/esm/helpers/getNavMonth.d.ts
import { type DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/** Return the start and end months for the calendar navigation. */
/**
* Returns the start and end months for calendar navigation.
*
* @param props The DayPicker props, including navigation and layout options.
* @param dateLib The date library to use for date manipulation.
* @returns A tuple containing the start and end months for navigation.
*/
export declare function getNavMonths(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "timeZone" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): [start: Date | undefined, end: Date | undefined];

8

dist/esm/helpers/getNavMonth.js

@@ -1,2 +0,8 @@

/** Return the start and end months for the calendar navigation. */
/**
* Returns the start and end months for calendar navigation.
*
* @param props The DayPicker props, including navigation and layout options.
* @param dateLib The date library to use for date manipulation.
* @returns A tuple containing the start and end months for navigation.
*/
export function getNavMonths(props, dateLib) {

@@ -3,0 +9,0 @@ let { startMonth, endMonth } = props;

21

dist/esm/helpers/getNextFocus.d.ts
import type { DateLib } from "../classes/DateLib.js";
import { CalendarDay } from "../classes/index.js";
import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types/index.js";
export declare function getNextFocus(moveBy: MoveFocusBy, moveDir: MoveFocusDir,
/** The date that is currently focused. */
refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "ISOWeek" | "timeZone">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;
/**
* Determines the next focusable day in the calendar.
*
* This function recursively calculates the next focusable day based on the
* movement direction and modifiers applied to the days.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDay The currently focused day.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including modifiers and configuration
* options.
* @param dateLib The date library to use for date manipulation.
* @param attempt The current recursion attempt (used to limit recursion depth).
* @returns The next focusable day, or `undefined` if no focusable day is found.
*/
export declare function getNextFocus(moveBy: MoveFocusBy, moveDir: MoveFocusDir, refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "ISOWeek" | "timeZone">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;

24

dist/esm/helpers/getNextFocus.js
import { CalendarDay } from "../classes/index.js";
import { dateMatchModifiers } from "../utils/dateMatchModifiers.js";
import { getFocusableDate } from "./getFocusableDate.js";
export function getNextFocus(moveBy, moveDir,
/** The date that is currently focused. */
refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) {
/**
* Determines the next focusable day in the calendar.
*
* This function recursively calculates the next focusable day based on the
* movement direction and modifiers applied to the days.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDay The currently focused day.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including modifiers and configuration
* options.
* @param dateLib The date library to use for date manipulation.
* @param attempt The current recursion attempt (used to limit recursion depth).
* @returns The next focusable day, or `undefined` if no focusable day is found.
*/
export function getNextFocus(moveBy, moveDir, refDay, calendarStartMonth, calendarEndMonth, props, dateLib, attempt = 0) {
if (attempt > 365) {

@@ -11,4 +26,3 @@ // Limit the recursion to 365 attempts

}
const focusableDate = getFocusableDate(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date?
calendarStartMonth, calendarEndMonth, props, dateLib);
const focusableDate = getFocusableDate(moveBy, moveDir, refDay.date, calendarStartMonth, calendarEndMonth, props, dateLib);
const isDisabled = Boolean(props.disabled && dateMatchModifiers(focusableDate, props.disabled, dateLib));

@@ -15,0 +29,0 @@ const isHidden = Boolean(props.hidden && dateMatchModifiers(focusableDate, props.hidden, dateLib));

18

dist/esm/helpers/getNextMonth.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/**
* Return the next month the user can navigate to according to the given
* options.
* Returns the next month the user can navigate to, based on the given options.
*
* Please note that the next month is not always the next calendar month:
* The next month is not always the next calendar month:
*
* - If after the `calendarEndMonth` range, is `undefined`;
* - If the navigation is paged , is the number of months displayed ahead.
* - If it is after the `calendarEndMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips forward by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The next month, or `undefined` if navigation is not possible.
*/
export declare function getNextMonth(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined;

19

dist/esm/helpers/getNextMonth.js
/**
* Return the next month the user can navigate to according to the given
* options.
* Returns the next month the user can navigate to, based on the given options.
*
* Please note that the next month is not always the next calendar month:
* The next month is not always the next calendar month:
*
* - If after the `calendarEndMonth` range, is `undefined`;
* - If the navigation is paged , is the number of months displayed ahead.
* - If it is after the `calendarEndMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips forward by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The next month, or `undefined` if navigation is not possible.
*/

@@ -25,5 +33,4 @@ export function getNextMonth(firstDisplayedMonth, calendarEndMonth, options, dateLib) {

}
// Jump forward as the number of months when paged navigation
return addMonths(month, offset);
}
//# sourceMappingURL=getNextMonth.js.map

18

dist/esm/helpers/getPreviousMonth.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/**
* Return the next previous the user can navigate to, according to the given
* Returns the previous month the user can navigate to, based on the given
* options.
*
* Please note that the previous month is not always the previous calendar
* month:
* The previous month is not always the previous calendar month:
*
* - If before the `calendarStartMonth` date, is `undefined`;
* - If the navigation is paged, is the number of months displayed before.
* - If it is before the `calendarStartMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips back by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The previous month, or `undefined` if navigation is not possible.
*/
export declare function getPreviousMonth(firstDisplayedMonth: Date, calendarStartMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined;

18

dist/esm/helpers/getPreviousMonth.js
/**
* Return the next previous the user can navigate to, according to the given
* Returns the previous month the user can navigate to, based on the given
* options.
*
* Please note that the previous month is not always the previous calendar
* month:
* The previous month is not always the previous calendar month:
*
* - If before the `calendarStartMonth` date, is `undefined`;
* - If the navigation is paged, is the number of months displayed before.
* - If it is before the `calendarStartMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips back by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The previous month, or `undefined` if navigation is not possible.
*/

@@ -11,0 +19,0 @@ export function getPreviousMonth(firstDisplayedMonth, calendarStartMonth, options, dateLib) {

11

dist/esm/helpers/getStyleForModifiers.d.ts
import type { CSSProperties } from "react";
import type { Modifiers, ModifiersStyles, Styles } from "../types/index.js";
/**
* Returns the computed style for a day based on its modifiers.
*
* This function merges the base styles for the day with any styles associated
* with active modifiers.
*
* @param dayModifiers The modifiers applied to the day.
* @param styles The base styles for the calendar elements.
* @param modifiersStyles The styles associated with specific modifiers.
* @returns The computed style for the day.
*/
export declare function getStyleForModifiers(dayModifiers: Modifiers, styles?: Partial<Styles>, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties;

11

dist/esm/helpers/getStyleForModifiers.js
import { UI } from "../UI.js";
/**
* Returns the computed style for a day based on its modifiers.
*
* This function merges the base styles for the day with any styles associated
* with active modifiers.
*
* @param dayModifiers The modifiers applied to the day.
* @param styles The base styles for the calendar elements.
* @param modifiersStyles The styles associated with specific modifiers.
* @returns The computed style for the day.
*/
export function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {

@@ -3,0 +14,0 @@ let style = { ...styles?.[UI.Day] };

18

dist/esm/helpers/getWeekdays.d.ts
import { DateLib } from "../classes/DateLib.js";
/**
* Generate a series of 7 days, starting from the week, to use for formatting
* the weekday names (Monday, Tuesday, etc.).
* Generates a series of 7 days, starting from the beginning of the week, to use
* for formatting weekday names (e.g., Monday, Tuesday, etc.).
*
* @param dateLib The date library to use for date manipulation.
* @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
* @param broadcastCalendar Whether to use the broadcast calendar (weeks start
* on Monday, but may include adjustments for broadcast-specific rules).
* @returns An array of 7 dates representing the weekdays.
*/
export declare function getWeekdays(
/** The date library. */
dateLib: DateLib,
/** Use ISOWeek instead of locale/ */
ISOWeek?: boolean | undefined,
/** @since 9.4.0 */
broadcastCalendar?: boolean | undefined): Date[];
export declare function getWeekdays(dateLib: DateLib, ISOWeek?: boolean | undefined, broadcastCalendar?: boolean | undefined): Date[];

18

dist/esm/helpers/getWeekdays.js
/**
* Generate a series of 7 days, starting from the week, to use for formatting
* the weekday names (Monday, Tuesday, etc.).
* Generates a series of 7 days, starting from the beginning of the week, to use
* for formatting weekday names (e.g., Monday, Tuesday, etc.).
*
* @param dateLib The date library to use for date manipulation.
* @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
* @param broadcastCalendar Whether to use the broadcast calendar (weeks start
* on Monday, but may include adjustments for broadcast-specific rules).
* @returns An array of 7 dates representing the weekdays.
*/
export function getWeekdays(
/** The date library. */
dateLib,
/** Use ISOWeek instead of locale/ */
ISOWeek,
/** @since 9.4.0 */
broadcastCalendar) {
export function getWeekdays(dateLib, ISOWeek, broadcastCalendar) {
const today = dateLib.today();

@@ -13,0 +13,0 @@ const start = broadcastCalendar

7

dist/esm/helpers/getWeeks.d.ts
import type { CalendarMonth, CalendarWeek } from "../classes/index.js";
/** Returns an array of calendar weeks from an array of calendar months. */
/**
* Returns an array of calendar weeks from an array of calendar months.
*
* @param months The array of calendar months.
* @returns An array of calendar weeks.
*/
export declare function getWeeks(months: CalendarMonth[]): CalendarWeek[];

7

dist/esm/helpers/getWeeks.js

@@ -1,2 +0,7 @@

/** Returns an array of calendar weeks from an array of calendar months. */
/**
* Returns an array of calendar weeks from an array of calendar months.
*
* @param months The array of calendar months.
* @returns An array of calendar weeks.
*/
export function getWeeks(months) {

@@ -3,0 +8,0 @@ const initialWeeks = [];

14

dist/esm/helpers/getYearOptions.d.ts
import type { DateLib } from "../classes/DateLib.js";
import { DropdownOption } from "../components/Dropdown.js";
import type { Formatters } from "../types/index.js";
/** Return the years to show in the dropdown. */
/**
* Returns the years to display in the dropdown.
*
* This function generates a list of years between the navigation start and end
* dates, formatted using the provided formatter.
*
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the year labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the years, or `undefined`
* if `navStart` or `navEnd` is not provided.
*/
export declare function getYearOptions(navStart: Date | undefined, navEnd: Date | undefined, formatters: Pick<Formatters, "formatYearDropdown">, dateLib: DateLib): DropdownOption[] | undefined;

14

dist/esm/helpers/getYearOptions.js

@@ -1,2 +0,14 @@

/** Return the years to show in the dropdown. */
/**
* Returns the years to display in the dropdown.
*
* This function generates a list of years between the navigation start and end
* dates, formatted using the provided formatter.
*
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the year labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the years, or `undefined`
* if `navStart` or `navEnd` is not provided.
*/
export function getYearOptions(navStart, navEnd, formatters, dateLib) {

@@ -3,0 +15,0 @@ if (!navStart)

9

dist/esm/helpers/startOfBroadcastWeek.d.ts
import type { DateLib } from "../classes/index.js";
/**
* Return the start date of the week in the broadcast calendar.
* Returns the start date of the week in the broadcast calendar.
*
* The broadcast week starts on Monday. If the first day of the month is not a
* Monday, this function calculates the previous Monday as the start of the
* broadcast week.
*
* @since 9.4.0
* @param date The date for which to calculate the start of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The start date of the broadcast week.
*/
export declare function startOfBroadcastWeek(date: Date, dateLib: DateLib): Date;

9

dist/esm/helpers/startOfBroadcastWeek.js
/**
* Return the start date of the week in the broadcast calendar.
* Returns the start date of the week in the broadcast calendar.
*
* The broadcast week starts on Monday. If the first day of the month is not a
* Monday, this function calculates the previous Monday as the start of the
* broadcast week.
*
* @since 9.4.0
* @param date The date for which to calculate the start of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The start date of the broadcast week.
*/

@@ -6,0 +13,0 @@ export function startOfBroadcastWeek(date, dateLib) {

16

dist/esm/helpers/useControlledValue.d.ts

@@ -5,2 +5,6 @@ export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;

*
* This hook allows a component to support both controlled and uncontrolled
* states by determining whether the `controlledValue` is provided. If it is
* undefined, the hook falls back to using the internal state.
*
* @example

@@ -14,9 +18,9 @@ * // Uncontrolled usage

* @template T - The type of the value.
* @param {T} defaultValue - The initial value for the uncontrolled state.
* @param {T | undefined} controlledValue - The value for the controlled state.
* If undefined, the component will use the uncontrolled state.
* @returns {[T, DispatchStateAction<T>]} - Returns a tuple where the first
* element is the current value (either controlled or uncontrolled) and the
* second element is a setter function to update the value.
* @param defaultValue The initial value for the uncontrolled state.
* @param controlledValue The value for the controlled state. If undefined, the
* component will use the uncontrolled state.
* @returns A tuple where the first element is the current value (either
* controlled or uncontrolled) and the second element is a setter function to
* update the value.
*/
export declare function useControlledValue<T>(defaultValue: T, controlledValue: T | undefined): [T, DispatchStateAction<T>];

16

dist/esm/helpers/useControlledValue.js

@@ -5,2 +5,6 @@ import { useState } from "react";

*
* This hook allows a component to support both controlled and uncontrolled
* states by determining whether the `controlledValue` is provided. If it is
* undefined, the hook falls back to using the internal state.
*
* @example

@@ -14,8 +18,8 @@ * // Uncontrolled usage

* @template T - The type of the value.
* @param {T} defaultValue - The initial value for the uncontrolled state.
* @param {T | undefined} controlledValue - The value for the controlled state.
* If undefined, the component will use the uncontrolled state.
* @returns {[T, DispatchStateAction<T>]} - Returns a tuple where the first
* element is the current value (either controlled or uncontrolled) and the
* second element is a setter function to update the value.
* @param defaultValue The initial value for the uncontrolled state.
* @param controlledValue The value for the controlled state. If undefined, the
* component will use the uncontrolled state.
* @returns A tuple where the first element is the current value (either
* controlled or uncontrolled) and the second element is a setter function to
* update the value.
*/

@@ -22,0 +26,0 @@ export function useControlledValue(defaultValue, controlledValue) {

15

dist/esm/labels/labelDayButton.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
import type { Modifiers } from "../types/index.js";
/**
* The ARIA label for the day button.
* Generates the ARIA label for a day button.
*
* Use the `modifiers` argument to add additional context to the label, e.g.
* when a day is selected or is today.
* Use the `modifiers` argument to provide additional context for the label,
* such as indicating if the day is "today" or "selected."
*
* @defaultValue The formatted date.
* @param date - The date to format.
* @param modifiers - The modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the day button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export declare function labelDayButton(date: Date,
/** The modifiers for the day. */
modifiers: Modifiers, options?: DateLibOptions, dateLib?: DateLib): string;
export declare function labelDayButton(date: Date, modifiers: Modifiers, options?: DateLibOptions, dateLib?: DateLib): string;
/**

@@ -17,0 +20,0 @@ * @ignore

15

dist/esm/labels/labelDayButton.js
import { DateLib } from "../classes/DateLib.js";
/**
* The ARIA label for the day button.
* Generates the ARIA label for a day button.
*
* Use the `modifiers` argument to add additional context to the label, e.g.
* when a day is selected or is today.
* Use the `modifiers` argument to provide additional context for the label,
* such as indicating if the day is "today" or "selected."
*
* @defaultValue The formatted date.
* @param date - The date to format.
* @param modifiers - The modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the day button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export function labelDayButton(date,
/** The modifiers for the day. */
modifiers, options, dateLib) {
export function labelDayButton(date, modifiers, options, dateLib) {
let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");

@@ -16,0 +19,0 @@ if (modifiers.today)

10

dist/esm/labels/labelGrid.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the month grid, that will be announced when entering the
* grid.
* Generates the ARIA label for the month grid, which is announced when entering
* the grid.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param date - The date representing the month.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the month grid.
* @group Labels

@@ -8,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

10

dist/esm/labels/labelGrid.js
import { DateLib } from "../classes/DateLib.js";
/**
* The ARIA label for the month grid, that will be announced when entering the
* grid.
* Generates the ARIA label for the month grid, which is announced when entering
* the grid.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param date - The date representing the month.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the month grid.
* @group Labels

@@ -8,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

11

dist/esm/labels/labelGridcell.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
import type { Modifiers } from "../types/index.js";
/**
* The label for the day gridcell when the calendar is not interactive.
* Generates the label for a day grid cell when the calendar is not interactive.
*
* @param date - The date to format.
* @param modifiers - Optional modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The label for the day grid cell.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export declare function labelGridcell(date: Date,
/** The modifiers for the day. */
modifiers?: Modifiers, options?: DateLibOptions, dateLib?: DateLib): string;
export declare function labelGridcell(date: Date, modifiers?: Modifiers, options?: DateLibOptions, dateLib?: DateLib): string;

11

dist/esm/labels/labelGridcell.js
import { DateLib } from "../classes/DateLib.js";
/**
* The label for the day gridcell when the calendar is not interactive.
* Generates the label for a day grid cell when the calendar is not interactive.
*
* @param date - The date to format.
* @param modifiers - Optional modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The label for the day grid cell.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export function labelGridcell(date,
/** The modifiers for the day. */
modifiers, options, dateLib) {
export function labelGridcell(date, modifiers, options, dateLib) {
let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");

@@ -12,0 +15,0 @@ if (modifiers?.today) {

4

dist/esm/labels/labelMonthDropdown.d.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the months dropdown.
* Generates the ARIA label for the months dropdown.
*
* @defaultValue `"Choose the Month"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the months dropdown.
* @group Labels

@@ -7,0 +9,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/esm/labels/labelMonthDropdown.js
/**
* The ARIA label for the months dropdown.
* Generates the ARIA label for the months dropdown.
*
* @defaultValue `"Choose the Month"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the months dropdown.
* @group Labels

@@ -6,0 +8,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

3

dist/esm/labels/labelNav.d.ts
/**
* The ARIA label for the navigation toolbar.
* Generates the ARIA label for the navigation toolbar.
*
* @defaultValue `""`
* @returns The ARIA label for the navigation toolbar.
* @group Labels

@@ -6,0 +7,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

3

dist/esm/labels/labelNav.js
/**
* The ARIA label for the navigation toolbar.
* Generates the ARIA label for the navigation toolbar.
*
* @defaultValue `""`
* @returns The ARIA label for the navigation toolbar.
* @group Labels

@@ -6,0 +7,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

9

dist/esm/labels/labelNext.d.ts
/**
* The ARIA label for next month button.
* Generates the ARIA label for the "next month" button.
*
* @defaultValue `"Go to the Next Month"`
* @param month - The date representing the next month, or `undefined` if there
* is no next month.
* @returns The ARIA label for the "next month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export declare function labelNext(
/** `undefined` where there's no next month to navigate to. */
month: Date | undefined): string;
export declare function labelNext(month: Date | undefined): string;

9

dist/esm/labels/labelNext.js
/**
* The ARIA label for next month button.
* Generates the ARIA label for the "next month" button.
*
* @defaultValue `"Go to the Next Month"`
* @param month - The date representing the next month, or `undefined` if there
* is no next month.
* @returns The ARIA label for the "next month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export function labelNext(
/** `undefined` where there's no next month to navigate to. */
month) {
export function labelNext(month) {
return "Go to the Next Month";
}
//# sourceMappingURL=labelNext.js.map

9

dist/esm/labels/labelPrevious.d.ts
/**
* The ARIA label for previous month button.
* Generates the ARIA label for the "previous month" button.
*
* @defaultValue `"Go to the Previous Month"`
* @param month - The date representing the previous month, or `undefined` if
* there is no previous month.
* @returns The ARIA label for the "previous month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export declare function labelPrevious(
/** Undefined where there's no previous month to navigate to. */
month: Date | undefined): string;
export declare function labelPrevious(month: Date | undefined): string;

9

dist/esm/labels/labelPrevious.js
/**
* The ARIA label for previous month button.
* Generates the ARIA label for the "previous month" button.
*
* @defaultValue `"Go to the Previous Month"`
* @param month - The date representing the previous month, or `undefined` if
* there is no previous month.
* @returns The ARIA label for the "previous month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export function labelPrevious(
/** Undefined where there's no previous month to navigate to. */
month) {
export function labelPrevious(month) {
return "Go to the Previous Month";
}
//# sourceMappingURL=labelPrevious.js.map

6

dist/esm/labels/labelWeekday.d.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the Weekday column header.
* Generates the ARIA label for a weekday column header.
*
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
* @param date - The date representing the weekday.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the weekday column header.
* @group Labels

@@ -7,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

6

dist/esm/labels/labelWeekday.js
import { DateLib } from "../classes/DateLib.js";
/**
* The ARIA label for the Weekday column header.
* Generates the ARIA label for a weekday column header.
*
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
* @param date - The date representing the weekday.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the weekday column header.
* @group Labels

@@ -7,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

5

dist/esm/labels/labelWeekNumber.d.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the week number cell (the first cell in the row).
* Generates the ARIA label for the week number cell (the first cell in a row).
*
* @defaultValue `Week ${weekNumber}`
* @param weekNumber - The number of the week.
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number cell.
* @group Labels

@@ -7,0 +10,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

5

dist/esm/labels/labelWeekNumber.js
/**
* The ARIA label for the week number cell (the first cell in the row).
* Generates the ARIA label for the week number cell (the first cell in a row).
*
* @defaultValue `Week ${weekNumber}`
* @param weekNumber - The number of the week.
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number cell.
* @group Labels

@@ -6,0 +9,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/esm/labels/labelWeekNumberHeader.d.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the week number header element.
* Generates the ARIA label for the week number header element.
*
* @defaultValue `"Week Number"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number header.
* @group Labels

@@ -7,0 +9,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/esm/labels/labelWeekNumberHeader.js
/**
* The ARIA label for the week number header element.
* Generates the ARIA label for the week number header element.
*
* @defaultValue `"Week Number"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number header.
* @group Labels

@@ -6,0 +8,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/esm/labels/labelYearDropdown.d.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the years dropdown.
* Generates the ARIA label for the years dropdown.
*
* @defaultValue `"Choose the Year"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the years dropdown.
* @group Labels

@@ -7,0 +9,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

dist/esm/labels/labelYearDropdown.js
/**
* The ARIA label for the years dropdown.
* Generates the ARIA label for the years dropdown.
*
* @defaultValue `"Choose the Year"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the years dropdown.
* @group Labels

@@ -6,0 +8,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

17

dist/esm/persian.d.ts

@@ -9,4 +9,12 @@ import React from "react";

/**
* Render the Persian Calendar.
* Renders the Persian calendar using the DayPicker component.
*
* @defaultValue
* - `locale`: `faIR`
* - `dir`: `rtl`
* - `dateLib`: `jalaliDateLib` from `date-fns-jalali`
* - `numerals`: `arabext` (Eastern Arabic-Indic)
* @param props - The props for the Persian calendar, including locale, text
* direction, date library, and numeral system.
* @returns The Persian calendar component.
* @see https://daypicker.dev/docs/localization#persian-calendar

@@ -54,3 +62,8 @@ */

}): React.JSX.Element;
/** Returns the date library used in the calendar. */
/**
* Returns the date library used in the Persian calendar.
*
* @param options - Optional configuration for the date library.
* @returns The date library instance.
*/
export declare const getDateLib: (options?: DateLibOptions) => DateLib;

17

dist/esm/persian.js

@@ -8,4 +8,12 @@ import React from "react";

/**
* Render the Persian Calendar.
* Renders the Persian calendar using the DayPicker component.
*
* @defaultValue
* - `locale`: `faIR`
* - `dir`: `rtl`
* - `dateLib`: `jalaliDateLib` from `date-fns-jalali`
* - `numerals`: `arabext` (Eastern Arabic-Indic)
* @param props - The props for the Persian calendar, including locale, text
* direction, date library, and numeral system.
* @returns The Persian calendar component.
* @see https://daypicker.dev/docs/localization#persian-calendar

@@ -24,3 +32,8 @@ */

}
/** Returns the date library used in the calendar. */
/**
* Returns the date library used in the Persian calendar.
*
* @param options - Optional configuration for the date library.
* @returns The date library instance.
*/
export const getDateLib = (options) => {

@@ -27,0 +40,0 @@ return new DateLib(options, dateFnsJalali);

9

dist/esm/selection/useMulti.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps, Selection } from "../types/index.js";
/**
* Hook to manage multiple-date selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected dates, a function to select dates,
* and a function to check if a date is selected.
*/
export declare function useMulti<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T>;

9

dist/esm/selection/useMulti.js
import { useControlledValue } from "../helpers/useControlledValue.js";
/**
* Hook to manage multiple-date selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected dates, a function to select dates,
* and a function to check if a date is selected.
*/
export function useMulti(props, dateLib) {

@@ -3,0 +12,0 @@ const { selected: initiallySelected, required, onSelect } = props;

9

dist/esm/selection/useRange.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps, Selection } from "../types/index.js";
/**
* Hook to manage range selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected range, a function to select a
* range, and a function to check if a date is within the range.
*/
export declare function useRange<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T>;

9

dist/esm/selection/useRange.js
import { useControlledValue } from "../helpers/useControlledValue.js";
import { addToRange, rangeContainsModifiers } from "../utils/index.js";
import { rangeIncludesDate } from "../utils/rangeIncludesDate.js";
/**
* Hook to manage range selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected range, a function to select a
* range, and a function to check if a date is within the range.
*/
export function useRange(props, dateLib) {

@@ -5,0 +14,0 @@ const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect } = props;

9

dist/esm/selection/useSingle.d.ts

@@ -8,2 +8,11 @@ import type { DateLib } from "../classes/DateLib.js";

};
/**
* Hook to manage single-date selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected date, a function to select a date,
* and a function to check if a date is selected.
*/
export declare function useSingle<T extends DayPickerProps>(props: DayPickerProps, dateLib: DateLib): Selection<T>;

9

dist/esm/selection/useSingle.js
import { useControlledValue } from "../helpers/useControlledValue.js";
/**
* Hook to manage single-date selection in the DayPicker component.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns An object containing the selected date, a function to select a date,
* and a function to check if a date is selected.
*/
export function useSingle(props, dateLib) {

@@ -3,0 +12,0 @@ const { selected: initiallySelected, required, onSelect } = props;

16

dist/esm/types/deprecated.d.ts

@@ -66,3 +66,3 @@ import { DayFlag, SelectionState } from "../UI.js";

* @ignore
* @deprecated This type will be removed. Use `NonNullable<unknown>` instead
* @deprecated This type will be removed. Use `NonNullable<unknown>` instead.
*/

@@ -77,3 +77,3 @@ export type DayPickerDefaultProps = NonNullable<unknown>;

* @ignore
* @deprecated This type will be removed. Use `string` instead;
* @deprecated This type will be removed. Use `string` instead.
*/

@@ -89,4 +89,4 @@ export type Modifier = string;

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode: "single"}>`
* instead.
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "single"
* }>` instead.
*/

@@ -96,4 +96,4 @@ export type SelectSingleEventHandler = PropsSingle["onSelect"];

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode:
* "multiple"}>` instead.
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "multiple"
* }>` instead.
*/

@@ -103,3 +103,3 @@ export type SelectMultipleEventHandler = PropsMulti["onSelect"];

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode: "range"}>`
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "range" }>`
* instead.

@@ -115,3 +115,3 @@ */

* @ignore
* @deprecated This type has been removed to `useDayPicker`.
* @deprecated This type has been moved to `useDayPicker`.
* @group Hooks

@@ -118,0 +118,0 @@ */

2

dist/esm/types/deprecated.js

@@ -20,3 +20,3 @@ import { MonthCaption } from "../components/MonthCaption.js";

* @ignore
* @deprecated This type has been removed to `useDayPicker`.
* @deprecated This type has been moved to `useDayPicker`.
* @group Hooks

@@ -23,0 +23,0 @@ */

70

dist/esm/types/props.d.ts

@@ -184,5 +184,6 @@ import React from "react";

*
* **Note:** showing the dropdown will set the start/end months
* {@link startMonth} to 100 years ago, and {@link endMonth} to the end of the
* current year.
* **Note:** By default, showing the dropdown will set the {@link startMonth}
* to 100 years ago and {@link endMonth} to the end of the current year. You
* can override this behavior by explicitly setting `startMonth` and
* `endMonth`.
*

@@ -193,2 +194,16 @@ * @see https://daypicker.dev/docs/customization#caption-layouts

/**
* Adjust the positioning of the navigation buttons.
*
* - `around`: Displays the buttons on either side of the caption.
* - `after`: Displays the buttons after the caption. This ensures the tab order
* matches the visual order.
*
* If not set, the buttons default to being displayed after the caption, but
* the tab order may not align with the visual order.
*
* @since 9.7.0
* @see https://daypicker.dev/docs/customization#navigation-layouts
*/
navLayout?: "around" | "after" | undefined;
/**
* Display always 6 weeks per each month, regardless of the month’s number of

@@ -249,2 +264,3 @@ * weeks. Weeks will be filled with the days from the next month.

* The time zone (IANA or UTC offset) to use in the calendar (experimental).
*
* See

@@ -254,8 +270,3 @@ * [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)

*
* Time zones are supported by the `TZDate` object by the
* [@date-fns/tz](https://github.com/date-fns/tz) package. Please refer to the
* package documentation for more information.
*
* @since 9.1.1
* @experimental
* @see https://daypicker.dev/docs/time-zone

@@ -295,5 +306,6 @@ */

/**
* Apply the `disabled` modifier to the matching days.
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabling-dates
* @see https://daypicker.dev/docs/selection-modes#disabled
*/

@@ -318,2 +330,9 @@ disabled?: Matcher | Matcher[] | undefined;

*
* @example
* const modifiers = {
* weekend: { dayOfWeek: [0, 6] }, // Match weekends
* holiday: [new Date(2023, 11, 25)] // Match Christmas
* };
* <DayPicker modifiers={modifiers} />
*
* @see https://daypicker.dev/guides/custom-modifiers

@@ -401,3 +420,3 @@ */

* The index of the first day of the week (0 - Sunday). Overrides the locale's
* one.
* default.
*

@@ -408,3 +427,3 @@ * @see https://daypicker.dev/docs/localization#first-date-of-the-week

/**
* The day of January, which is always in the first week of the year.
* The day of January that is always in the first week of the year.
*

@@ -518,6 +537,18 @@ * @see https://daypicker.dev/docs/localization#first-week-contains-date

*
* @example
* const handleSelect: OnSelectHandler<Date> = (
* selected,
* triggerDate,
* modifiers,
* e
* ) => {
* console.log("Selected:", selected);
* console.log("Triggered by:", triggerDate);
* };
*
* @template T - The type of the selected item.
* @callback OnSelectHandler
* @param {T} selected - The selected item after the event.
* @param {Date} triggerDate - The date when the event was triggered.
* @param {Date} triggerDate - The date when the event was triggered. This is
* typically the day clicked or interacted with.
* @param {Modifiers} modifiers - The modifiers associated with the event.

@@ -600,2 +631,8 @@ * @param {React.MouseEvent | React.KeyboardEvent} e - The event object.

required: true;
/**
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabled
*/
disabled?: Matcher | Matcher[] | undefined;

@@ -626,2 +663,8 @@ /**

required?: false | undefined;
/**
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabled
*/
disabled?: Matcher | Matcher[] | undefined;

@@ -632,2 +675,3 @@ /**

* @since V9.0.2
* @see https://daypicker.dev/docs/selection-modes#exclude-disabled
*/

@@ -634,0 +678,0 @@ excludeDisabled?: boolean | undefined;

25

dist/esm/types/selection.d.ts

@@ -20,2 +20,15 @@ import type { DayPickerProps } from "./props.js";

}> = T["required"] extends true ? DateRange : DateRange | undefined;
/**
* Represents the selected value based on the selection mode.
*
* @example
* // Single selection mode
* const selected: SelectedValue<{ mode: "single" }> = new Date();
*
* // Multiple selection mode
* const selected: SelectedValue<{ mode: "multiple" }> = [new Date(), new Date()];
*
* // Range selection mode
* const selected: SelectedValue<{ mode: "range" }> = { from: new Date(), to: new Date() };
*/
export type SelectedValue<T> = T extends {

@@ -40,2 +53,14 @@ mode: "single";

}> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? DateRange : DateRange | undefined;
/**
* The handler to set a selection based on the mode.
*
* @example
* const handleSelect: SelectHandler<{ mode: "single" }> = (
* triggerDate,
* modifiers,
* e
* ) => {
* console.log("Selected date:", triggerDate);
* };
*/
export type SelectHandler<T extends {

@@ -42,0 +67,0 @@ mode?: Mode | undefined;

107

dist/esm/types/shared.d.ts

@@ -9,5 +9,5 @@ import type { CSSProperties } from "react";

*
* - `single`: use DayPicker to select single days.
* - `multiple`: allow selecting multiple days.
* - `range`: use DayPicker to select a range of days.
* - `single`: Select a single day.
* - `multiple`: Select multiple days.
* - `range`: Select a range of days.
*

@@ -18,3 +18,3 @@ * @see https://daypicker.dev/docs/selection-modes

/**
* The components that can be changed using the `components` prop.
* The components that can be customized using the `components` prop.
*

@@ -77,8 +77,8 @@ * @see https://daypicker.dev/guides/custom-components

WeekNumberHeader: typeof components.WeekNumberHeader;
/** Render the dropdown with the months. */
/** Render the dropdown for selecting months. */
MonthsDropdown: typeof components.MonthsDropdown;
/** Render the dropdown with the years. */
/** Render the dropdown for selecting years. */
YearsDropdown: typeof components.YearsDropdown;
};
/** Represent a map of formatters used to render localized content. */
/** Represents a map of formatters used to render localized content. */
export type Formatters = {

@@ -94,2 +94,4 @@ /** Format the caption of a month grid. */

* @deprecated Use {@link Formatters.formatCaption} instead.
*
* **Note:** This formatter will be removed in version 10.0.0.
*/

@@ -111,3 +113,3 @@ formatMonthCaption: typeof formatMonthCaption;

};
/** Map of functions to translate ARIA labels for the relative elements. */
/** A map of functions to translate ARIA labels for various elements. */
export type Labels = {

@@ -139,59 +141,21 @@ /** The label for the navigation toolbar. */

labelWeekNumber: typeof labelWeekNumber;
/**
* Return the label for the column of the week number.
*
* @since 9.0.0
*/
/** The label for the column of week numbers. */
labelWeekNumberHeader: typeof labelWeekNumberHeader;
};
/**
* A value or a function that matches a specific day.
* A value or a function that matches specific days.
*
* @example
* // 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)
* // Match weekends and specific holidays
* const matcher: Matcher = [
* { dayOfWeek: [0, 6] }, // Weekends
* { from: new Date(2023, 11, 24), to: new Date(2023, 11, 26) } // Christmas
* ];
*
* // 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
* };
*/
export type Matcher = boolean | ((date: Date) => boolean) | Date | Date[] | DateRange | DateBefore | DateAfter | DateInterval | DayOfWeek;
/**
* Match a day falling after the specified date, with the date not included.
* Match a day falling after the specified date (exclusive).
*
* @example
* // Match days after the 2nd of February 2019
* // Match days after February 2, 2019
* const matcher: DateAfter = { after: new Date(2019, 1, 2) };

@@ -203,6 +167,6 @@ */

/**
* Match a day falling before the specified date, with the date not included.
* Match a day falling before the specified date (exclusive).
*
* @example
* // Match days before the 2nd of February 2019
* // Match days before February 2, 2019
* const matcher: DateBefore = { before: new Date(2019, 1, 2) };

@@ -214,7 +178,7 @@ */

/**
* An interval of dates. Differently from {@link DateRange}, the range ends here
* are not included.
* An interval of dates. Unlike {@link DateRange}, the range ends are not
* included.
*
* @example
* // Match the days between the 2nd and the 5th of February 2019
* // Match days between February 2 and February 5, 2019
* const matcher: DateInterval = {

@@ -230,7 +194,6 @@ * after: new Date(2019, 1, 2),

/**
* A range of dates. The range can be open. Differently from
* {@link DateInterval}, the range ends here are included.
* A range of dates. Unlike {@link DateInterval}, the range ends are included.
*
* @example
* // Match the days between the 2nd and the 5th of February 2019
* // Match days between February 2 and February 5, 2019
* const matcher: DateRange = {

@@ -246,4 +209,3 @@ * from: new Date(2019, 1, 2),

/**
* Match dates being one of the specified days of the week (`0-6`, where `0` is
* Sunday).
* Match days of the week (`0-6`, where `0` is Sunday).
*

@@ -304,18 +266,7 @@ * @example

*
* - Retrieve modifiers using the {@link OnSelectHandler} via the `onSelect` prop,
* or within custom components using the {@link useDayPicker} hook.
* - Includes built-in modifiers from {@link DayFlag} and {@link SelectionState}.
* - Add custom modifiers using the `modifiers` prop.
*
* @example
* const modifiers: Modifiers = {
* today: false, // the day is not today
* selected: true, // the day is selected
* disabled: false, // the day is not disabled
* outside: false, // the day is not outside the month
* focused: false, // the day is not focused
*
* weekend: false // custom modifier example for matching a weekend
* booked: true // custom modifier example for matching a booked day
* available: false // custom modifier example for matching an available day
* today: true, // The day is today
* selected: false, // The day is not selected
* weekend: true // Custom modifier for weekends
* };

@@ -322,0 +273,0 @@ *

34

dist/esm/UI.d.ts
import { CSSProperties } from "react";
/**
* The UI elements composing DayPicker. These elements are mapped to
* {@link CustomComponents}, the {@link ClassNames} and the {@link Styles} used by
* DayPicker.
* Enum representing the UI elements composing DayPicker. These elements are
* mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
*
* Some of these elements are extended by flags and modifiers.
* Some elements are extended by flags and modifiers.
*/

@@ -70,3 +69,3 @@ export declare enum UI {

}
/** The flags for the {@link UI.Day}. */
/** Enum representing flags for the {@link UI.Day} element. */
export declare enum DayFlag {

@@ -85,4 +84,4 @@ /** The day is disabled. */

/**
* The state that can be applied to the {@link UI.Day} element when in selection
* mode.
* Enum representing selection states that can be applied to the {@link UI.Day}
* element in selection mode.
*/

@@ -99,3 +98,2 @@ export declare enum SelectionState {

}
/** CSS classes used for animating months and captions. */
/**

@@ -124,21 +122,11 @@ * Enum representing different animation states for transitioning between

/**
* Deprecated UI elements and flags.
* Deprecated UI elements and flags from previous versions of DayPicker.
*
* These elements were used in previous version of DayPicker and are kept here
* to help the transition to the new {@link UI | UI elements}.
* These elements are kept for backward compatibility and to assist in
* transitioning to the new {@link UI} elements.
*
* ```diff
* <DayPicker classNames={{
* - cell: "my-cell",
* + day: "my-cell",
* - day: "my-day",
* + day_button: "my-day",
* - day_disabled: "my-day_disabled",
* + disabled: "my-day_disabled",
* // etc.
* }}/>
* ```
*
* @deprecated
* @since 9.0.1
* @template T - The type of the deprecated UI element (e.g., CSS class or
* style).
* @see https://daypicker.dev/upgrading

@@ -145,0 +133,0 @@ * @see https://daypicker.dev/docs/styling

14

dist/esm/UI.js
/**
* The UI elements composing DayPicker. These elements are mapped to
* {@link CustomComponents}, the {@link ClassNames} and the {@link Styles} used by
* DayPicker.
* Enum representing the UI elements composing DayPicker. These elements are
* mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
*
* Some of these elements are extended by flags and modifiers.
* Some elements are extended by flags and modifiers.
*/

@@ -70,3 +69,3 @@ export var UI;

})(UI || (UI = {}));
/** The flags for the {@link UI.Day}. */
/** Enum representing flags for the {@link UI.Day} element. */
export var DayFlag;

@@ -86,4 +85,4 @@ (function (DayFlag) {

/**
* The state that can be applied to the {@link UI.Day} element when in selection
* mode.
* Enum representing selection states that can be applied to the {@link UI.Day}
* element in selection mode.
*/

@@ -101,3 +100,2 @@ export var SelectionState;

})(SelectionState || (SelectionState = {}));
/** CSS classes used for animating months and captions. */
/**

@@ -104,0 +102,0 @@ * Enum representing different animation states for transitioning between

12

dist/esm/useAnimation.d.ts

@@ -6,3 +6,13 @@ import React from "react";

import { ClassNames } from "./types/shared.js";
/** @private */
/**
* Handles animations for transitioning between months in the DayPicker
* component.
*
* @private
* @param rootElRef - A reference to the root element of the DayPicker
* component.
* @param enabled - Whether animations are enabled.
* @param options - Configuration options for the animation, including class
* names, months, focused day, and the date utility library.
*/
export declare function useAnimation(rootElRef: React.RefObject<HTMLDivElement | null>, enabled: boolean, { classNames, months, focused, dateLib }: {

@@ -9,0 +19,0 @@ classNames: ClassNames;

12

dist/esm/useAnimation.js

@@ -16,3 +16,13 @@ import { useLayoutEffect, useRef } from "react";

const queryWeekdaysEl = (element) => asHtmlElement(element.querySelector("[data-animated-weekdays]"));
/** @private */
/**
* Handles animations for transitioning between months in the DayPicker
* component.
*
* @private
* @param rootElRef - A reference to the root element of the DayPicker
* component.
* @param enabled - Whether animations are enabled.
* @param options - Configuration options for the animation, including class
* names, months, focused day, and the date utility library.
*/
export function useAnimation(rootElRef, enabled, { classNames, months, focused, dateLib }) {

@@ -19,0 +29,0 @@ const previousRootElSnapshotRef = useRef(null);

10

dist/esm/useCalendar.d.ts

@@ -46,3 +46,11 @@ import type { CalendarWeek, CalendarDay, CalendarMonth, DateLib } from "./classes/index.js";

}
/** @private */
/**
* Provides the calendar object to work with the calendar in custom components.
*
* @private
* @param props - The DayPicker props related to calendar configuration.
* @param dateLib - The date utility library instance.
* @returns The calendar object containing displayed days, weeks, months, and
* navigation methods.
*/
export declare function useCalendar(props: Pick<DayPickerProps, "captionLayout" | "endMonth" | "startMonth" | "today" | "fixedWeeks" | "ISOWeek" | "numberOfMonths" | "disableNavigation" | "onMonthChange" | "month" | "defaultMonth" | "timeZone" | "broadcastCalendar" | "fromMonth" | "fromYear" | "toMonth" | "toYear">, dateLib: DateLib): Calendar;

10

dist/esm/useCalendar.js

@@ -12,3 +12,11 @@ import { useEffect } from "react";

import { useControlledValue } from "./helpers/useControlledValue.js";
/** @private */
/**
* Provides the calendar object to work with the calendar in custom components.
*
* @private
* @param props - The DayPicker props related to calendar configuration.
* @param dateLib - The date utility library instance.
* @returns The calendar object containing displayed days, weeks, months, and
* navigation methods.
*/
export function useCalendar(props, dateLib) {

@@ -15,0 +23,0 @@ const [navStart, navEnd] = getNavMonths(props, dateLib);

10

dist/esm/useDayPicker.d.ts

@@ -57,11 +57,9 @@ import { CalendarDay } from "./classes/CalendarDay.js";

/**
* Returns the context to work with `<DayPicker />` inside custom components.
* Provides access to the DayPicker context, which includes properties and
* methods to interact with the DayPicker component. This hook must be used
* within a custom component.
*
* This hook provides access to the DayPicker context, which includes various
* properties and methods to interact with the DayPicker component. It must be
* used within a custom component.
*
* @template T - Use this type to refine the returned context type with a
* specific selection mode.
* @returns {DayPickerContext<T>} The context to work with DayPicker.
* @returns The context to work with DayPicker.
* @throws {Error} If the hook is used outside of a DayPicker provider.

@@ -68,0 +66,0 @@ * @group Hooks

10

dist/esm/useDayPicker.js

@@ -5,11 +5,9 @@ import { createContext, useContext } from "react";

/**
* Returns the context to work with `<DayPicker />` inside custom components.
* Provides access to the DayPicker context, which includes properties and
* methods to interact with the DayPicker component. This hook must be used
* within a custom component.
*
* This hook provides access to the DayPicker context, which includes various
* properties and methods to interact with the DayPicker component. It must be
* used within a custom component.
*
* @template T - Use this type to refine the returned context type with a
* specific selection mode.
* @returns {DayPickerContext<T>} The context to work with DayPicker.
* @returns The context to work with DayPicker.
* @throws {Error} If the hook is used outside of a DayPicker provider.

@@ -16,0 +14,0 @@ * @group Hooks

15

dist/esm/useFocus.d.ts

@@ -16,3 +16,16 @@ import type { CalendarDay, DateLib } from "./classes/index.js";

};
/** @private */
/**
* Manages focus behavior for the DayPicker component, including setting,
* moving, and blurring focus on calendar days.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param calendar - The calendar object containing the displayed days and
* months.
* @param getModifiers - A function to retrieve modifiers for a given day.
* @param isSelected - A function to check if a date is selected.
* @param dateLib - The date utility library instance.
* @returns An object containing focus-related methods and the currently focused
* day.
*/
export declare function useFocus<T extends DayPickerProps>(props: T, calendar: Calendar, getModifiers: (day: CalendarDay) => Modifiers, isSelected: (date: Date) => boolean, dateLib: DateLib): UseFocus;

15

dist/esm/useFocus.js
import { useState } from "react";
import { calculateFocusTarget } from "./helpers/calculateFocusTarget.js";
import { getNextFocus } from "./helpers/getNextFocus.js";
/** @private */
/**
* Manages focus behavior for the DayPicker component, including setting,
* moving, and blurring focus on calendar days.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param calendar - The calendar object containing the displayed days and
* months.
* @param getModifiers - A function to retrieve modifiers for a given day.
* @param isSelected - A function to check if a date is selected.
* @param dateLib - The date utility library instance.
* @returns An object containing focus-related methods and the currently focused
* day.
*/
export function useFocus(props, calendar, getModifiers, isSelected, dateLib) {

@@ -6,0 +19,0 @@ const { autoFocus } = props;

10

dist/esm/useSelection.d.ts
import { type DateLib } from "./classes/DateLib.js";
import type { DayPickerProps } from "./types/index.js";
import { Selection } from "./types/selection.js";
/**
* Determines the appropriate selection hook to use based on the selection mode
* and returns the corresponding selection object.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns The selection object for the specified mode, or `undefined` if no
* mode is set.
*/
export declare function useSelection<T extends DayPickerProps>(props: T, dateLib: DateLib): Selection<T> | undefined;

10

dist/esm/useSelection.js
import { useMulti } from "./selection/useMulti.js";
import { useRange } from "./selection/useRange.js";
import { useSingle } from "./selection/useSingle.js";
/**
* Determines the appropriate selection hook to use based on the selection mode
* and returns the corresponding selection object.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns The selection object for the specified mode, or `undefined` if no
* mode is set.
*/
export function useSelection(props, dateLib) {

@@ -5,0 +15,0 @@ const single = useSingle(props, dateLib);

6

dist/esm/utc.d.ts
import React from "react";
import { type DayPickerProps } from "./index.js";
/**
* @deprecated Use the `timeZone` prop instead of this function. This function
* wraps the DayPicker component and sets the `timeZone` to "utc".
* @param props - The props to pass to the DayPicker component.
* @returns The DayPicker component with the `timeZone` set to "utc".
*/
export declare function DayPicker(props: DayPickerProps): React.JSX.Element;

6

dist/esm/utc.js
import React from "react";
import { DayPicker as DayPickerComponent } from "./index.js";
/**
* @deprecated Use the `timeZone` prop instead of this function. This function
* wraps the DayPicker component and sets the `timeZone` to "utc".
* @param props - The props to pass to the DayPicker component.
* @returns The DayPicker component with the `timeZone` set to "utc".
*/
export function DayPicker(props) {

@@ -4,0 +10,0 @@ return React.createElement(DayPickerComponent, { timeZone: "utc", ...props });

21

dist/esm/utils/addToRange.d.ts
import { type DateLib } from "../classes/DateLib.js";
import type { DateRange } from "../types/index.js";
/**
* Add a day to an existing range.
* Adds a date to an existing range, considering constraints like minimum and
* maximum range size.
*
* The returned range takes in account the `undefined` values and if the added
* day is already present in the range.
*
* @param date - The date to add to the range.
* @param initialRange - The initial range to which the date will be added.
* @param min - The minimum number of days in the range.
* @param max - The maximum number of days in the range.
* @param required - Whether the range must always include at least one date.
* @param dateLib - The date utility library instance.
* @returns The updated date range, or `undefined` if the range is cleared.
* @group Utilities
*/
export declare function addToRange(
/** The date to add to the range. */
date: Date,
/** The range where to add `date`. */
initialRange: DateRange | undefined, min?: number, max?: number, required?: boolean,
/** @ignore */
dateLib?: DateLib): DateRange | undefined;
export declare function addToRange(date: Date, initialRange: DateRange | undefined, min?: number, max?: number, required?: boolean, dateLib?: DateLib): DateRange | undefined;

21

dist/esm/utils/addToRange.js
import { defaultDateLib } from "../classes/DateLib.js";
/**
* Add a day to an existing range.
* Adds a date to an existing range, considering constraints like minimum and
* maximum range size.
*
* The returned range takes in account the `undefined` values and if the added
* day is already present in the range.
*
* @param date - The date to add to the range.
* @param initialRange - The initial range to which the date will be added.
* @param min - The minimum number of days in the range.
* @param max - The maximum number of days in the range.
* @param required - Whether the range must always include at least one date.
* @param dateLib - The date utility library instance.
* @returns The updated date range, or `undefined` if the range is cleared.
* @group Utilities
*/
export function addToRange(
/** The date to add to the range. */
date,
/** The range where to add `date`. */
initialRange, min = 0, max = 0, required = false,
/** @ignore */
dateLib = defaultDateLib) {
export function addToRange(date, initialRange, min = 0, max = 0, required = false, dateLib = defaultDateLib) {
const { from, to } = initialRange || {};

@@ -18,0 +17,0 @@ const { isSameDay, isAfter, isBefore } = dateLib;

20

dist/esm/utils/dateMatchModifiers.d.ts
import { type DateLib } from "../classes/DateLib.js";
import type { Matcher } from "../types/index.js";
/**
* Returns whether a day matches against at least one of the given
* {@link Matcher}.
* Checks if a given date matches at least one of the specified {@link Matcher}.
*
* ```tsx
* const date = 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)
* };
* dateMatchModifiers(date, [matcher1, matcher2]); // true, since day is in the matcher1 range.
* ```
*
* @param date - The date to check.
* @param matchers - The matchers to check against.
* @param dateLib - The date utility library instance.
* @returns `true` if the date matches any of the matchers, otherwise `false`.
* @group Utilities

@@ -21,0 +11,0 @@ */

20

dist/esm/utils/dateMatchModifiers.js

@@ -5,18 +5,8 @@ import { defaultDateLib } from "../classes/DateLib.js";

/**
* Returns whether a day matches against at least one of the given
* {@link Matcher}.
* Checks if a given date matches at least one of the specified {@link Matcher}.
*
* ```tsx
* const date = 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)
* };
* dateMatchModifiers(date, [matcher1, matcher2]); // true, since day is in the matcher1 range.
* ```
*
* @param date - The date to check.
* @param matchers - The matchers to check against.
* @param dateLib - The date utility library instance.
* @returns `true` if the date matches any of the matchers, otherwise `false`.
* @group Utilities

@@ -23,0 +13,0 @@ */

16

dist/esm/utils/rangeContainsDayOfWeek.d.ts
import { type DateLib } from "../classes/DateLib.js";
/**
* Returns whether a date range contains one or more days of the week.
* Checks if a date range contains one or more specified days of the week.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2024, 8, 1), // Sunday
* to: new Date(2024, 8, 6) // Thursday
* };
* rangeContainsDayOfWeek(date, 1); // true: contains range contains Monday
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param dayOfWeek - The day(s) of the week to check for (`0-6`, where `0` is
* Sunday).
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains the specified day(s) of the week,
* otherwise `false`.
* @group Utilities

@@ -15,0 +13,0 @@ */

16

dist/esm/utils/rangeContainsDayOfWeek.js
import { defaultDateLib } from "../classes/DateLib.js";
/**
* Returns whether a date range contains one or more days of the week.
* Checks if a date range contains one or more specified days of the week.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2024, 8, 1), // Sunday
* to: new Date(2024, 8, 6) // Thursday
* };
* rangeContainsDayOfWeek(date, 1); // true: contains range contains Monday
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param dayOfWeek - The day(s) of the week to check for (`0-6`, where `0` is
* Sunday).
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains the specified day(s) of the week,
* otherwise `false`.
* @group Utilities

@@ -15,0 +13,0 @@ */

19

dist/esm/utils/rangeContainsModifiers.d.ts
import { type DateLib } from "../classes/DateLib.js";
import type { Matcher } from "../types/index.js";
/**
* Returns whether a range contains dates that match the given modifiers.
* Checks if a date range contains dates that match the given modifiers.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2021, 12, 21),
* to: new Date(2021, 12, 30)
* };
* const matcher1: Date = new Date(2021, 12, 21);
* const matcher2: DateRange = {
* from: new Date(2022, 5, 1),
* to: new Date(2022, 5, 23)
* };
* rangeContainsModifiers(range, [matcher1, matcher2]); // true, since matcher1 is in the date.
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param modifiers - The modifiers to match against.
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains matching dates, otherwise `false`.
* @group Utilities

@@ -21,0 +12,0 @@ */

19

dist/esm/utils/rangeContainsModifiers.js

@@ -8,18 +8,9 @@ import { defaultDateLib } from "../classes/DateLib.js";

/**
* Returns whether a range contains dates that match the given modifiers.
* Checks if a date range contains dates that match the given modifiers.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2021, 12, 21),
* to: new Date(2021, 12, 30)
* };
* const matcher1: Date = new Date(2021, 12, 21);
* const matcher2: DateRange = {
* from: new Date(2022, 5, 1),
* to: new Date(2022, 5, 23)
* };
* rangeContainsModifiers(range, [matcher1, matcher2]); // true, since matcher1 is in the date.
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param modifiers - The modifiers to match against.
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains matching dates, otherwise `false`.
* @group Utilities

@@ -26,0 +17,0 @@ */

11

dist/esm/utils/rangeIncludesDate.d.ts
import type { DateRange } from "../types/index.js";
/**
* Determines whether a given date is inside a specified date range.
* Checks if a given date is within a specified date range.
*
* @since 9.0.0
* @param range - The date range to check against.
* @param date - The date to check.
* @param excludeEnds - If `true`, the range's start and end dates are excluded.
* @param dateLib - The date utility library instance.
* @returns `true` if the date is within the range, otherwise `false`.
* @group Utilities
*/
export declare function rangeIncludesDate(range: DateRange, date: Date,
/** If `true`, the ends of the range are excluded. */
excludeEnds?: boolean, dateLib?: import("../classes/DateLib.js").DateLib): boolean;
export declare function rangeIncludesDate(range: DateRange, date: Date, excludeEnds?: boolean, dateLib?: import("../classes/DateLib.js").DateLib): boolean;
/**

@@ -12,0 +15,0 @@ * @private

11

dist/esm/utils/rangeIncludesDate.js
import { defaultDateLib } from "../classes/index.js";
/**
* Determines whether a given date is inside a specified date range.
* Checks if a given date is within a specified date range.
*
* @since 9.0.0
* @param range - The date range to check against.
* @param date - The date to check.
* @param excludeEnds - If `true`, the range's start and end dates are excluded.
* @param dateLib - The date utility library instance.
* @returns `true` if the date is within the range, otherwise `false`.
* @group Utilities
*/
export function rangeIncludesDate(range, date,
/** If `true`, the ends of the range are excluded. */
excludeEnds = false, dateLib = defaultDateLib) {
export function rangeIncludesDate(range, date, excludeEnds = false, dateLib = defaultDateLib) {
let { from, to } = range;

@@ -12,0 +15,0 @@ const { differenceInCalendarDays, isSameDay } = dateLib;

6

dist/esm/utils/rangeOverlaps.d.ts
/**
* Determines whether a given range overlaps with another range.
* Determines if two date ranges overlap.
*
* @since 9.2.2
* @param rangeLeft - The first date range.
* @param rangeRight - The second date range.
* @param dateLib - The date utility library instance.
* @returns `true` if the ranges overlap, otherwise `false`.
* @group Utilities

@@ -6,0 +10,0 @@ */

6

dist/esm/utils/rangeOverlaps.js
import { defaultDateLib } from "../classes/index.js";
import { rangeIncludesDate } from "./rangeIncludesDate.js";
/**
* Determines whether a given range overlaps with another range.
* Determines if two date ranges overlap.
*
* @since 9.2.2
* @param rangeLeft - The first date range.
* @param rangeRight - The second date range.
* @param dateLib - The date utility library instance.
* @returns `true` if the ranges overlap, otherwise `false`.
* @group Utilities

@@ -8,0 +12,0 @@ */

25

dist/esm/utils/typeguards.d.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek } from "../types/index.js";
/**
* Returns true if `matcher` is of type {@link DateInterval}.
* Checks if the given value is of type {@link DateInterval}.
*
* @param matcher - The value to check.
* @returns `true` if the value is a {@link DateInterval}, otherwise `false`.
* @group Utilities

@@ -10,4 +12,6 @@ */

/**
* Returns true if `value` is a {@link DateRange} type.
* Checks if the given value is of type {@link DateRange}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateRange}, otherwise `false`.
* @group Utilities

@@ -17,4 +21,6 @@ */

/**
* Returns true if `value` is of type {@link DateAfter}.
* Checks if the given value is of type {@link DateAfter}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateAfter}, otherwise `false`.
* @group Utilities

@@ -24,4 +30,6 @@ */

/**
* Returns true if `value` is of type {@link DateBefore}.
* Checks if the given value is of type {@link DateBefore}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateBefore}, otherwise `false`.
* @group Utilities

@@ -31,4 +39,6 @@ */

/**
* Returns true if `value` is a {@link DayOfWeek} type.
* Checks if the given value is of type {@link DayOfWeek}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DayOfWeek}, otherwise `false`.
* @group Utilities

@@ -38,6 +48,9 @@ */

/**
* Returns true if `value` is an array of valid dates.
* Checks if the given value is an array of valid dates.
*
* @private
* @param value - The value to check.
* @param dateLib - The date utility library instance.
* @returns `true` if the value is an array of valid dates, otherwise `false`.
*/
export declare function isDatesArray(value: unknown, dateLib: DateLib): value is Date[];

25

dist/esm/utils/typeguards.js
/**
* Returns true if `matcher` is of type {@link DateInterval}.
* Checks if the given value is of type {@link DateInterval}.
*
* @param matcher - The value to check.
* @returns `true` if the value is a {@link DateInterval}, otherwise `false`.
* @group Utilities

@@ -13,4 +15,6 @@ */

/**
* Returns true if `value` is a {@link DateRange} type.
* Checks if the given value is of type {@link DateRange}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateRange}, otherwise `false`.
* @group Utilities

@@ -22,4 +26,6 @@ */

/**
* Returns true if `value` is of type {@link DateAfter}.
* Checks if the given value is of type {@link DateAfter}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateAfter}, otherwise `false`.
* @group Utilities

@@ -31,4 +37,6 @@ */

/**
* Returns true if `value` is of type {@link DateBefore}.
* Checks if the given value is of type {@link DateBefore}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateBefore}, otherwise `false`.
* @group Utilities

@@ -40,4 +48,6 @@ */

/**
* Returns true if `value` is a {@link DayOfWeek} type.
* Checks if the given value is of type {@link DayOfWeek}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DayOfWeek}, otherwise `false`.
* @group Utilities

@@ -49,5 +59,8 @@ */

/**
* Returns true if `value` is an array of valid dates.
* Checks if the given value is an array of valid dates.
*
* @private
* @param value - The value to check.
* @param dateLib - The date utility library instance.
* @returns `true` if the value is an array of valid dates, otherwise `false`.
*/

@@ -54,0 +67,0 @@ export function isDatesArray(value, dateLib) {

2

package.json
{
"name": "react-day-picker",
"version": "9.6.7",
"version": "9.7.0",
"description": "Customizable Date Picker for React",

@@ -5,0 +5,0 @@ "author": "Giampaolo Bellavite <io@gpbl.dev>",

10

README.md

@@ -5,4 +5,12 @@ # React DayPicker

📖 See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference.
## Documentation
See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference, or read [the docs in the repository](website/docs/start.mdx).
<picture>
<source media="(prefers-color-scheme: dark)" srcset="./website/static/img/screenshot-dark.png" />
<source media="(prefers-color-scheme: light)" srcset="./website/static/img/screenshot-light.png" />
<img width="460" height="366" src="./website/static/img/screenshot.png" alt="Screenshot of DayPicker displaying the September 2025 calendar, with the date range from the 17th to the 20th selected." />
</picture>
## Features

@@ -9,0 +17,0 @@

31

src/classes/CalendarDay.ts
import { type DateLib, defaultDateLib } from "./DateLib.js";
/**
* Represent the day displayed in the calendar.
* Represents a day displayed in the calendar.
*
* In DayPicker, a `Day` is a `Date` that can be displayed in the calendar. It
* is used as extension of the native `Date` object to provide additional
* information about the day.
* In DayPicker, a `CalendarDay` is a wrapper around a `Date` object that
* provides additional information about the day, such as whether it belongs to
* the displayed month.
*/

@@ -25,3 +25,3 @@ export class CalendarDay {

/**
* The utility functions to manipulate dates.
* Utility functions for manipulating dates.
*

@@ -33,6 +33,6 @@ * @private

/**
* Whether the day is not belonging to the displayed month.
* Indicates whether the day does not belong to the displayed month.
*
* When `outside` is `true`, use `displayMonth` to know to which month the day
* belongs.
* If `outside` is `true`, use `displayMonth` to determine the month to which
* the day belongs.
*/

@@ -42,7 +42,7 @@ readonly outside: boolean;

/**
* The months where the day is displayed.
* The month that is currently displayed in the calendar.
*
* In DayPicker, days can fall out the displayed months (e.g. when
* `showOutsideDays` is `true`). This property is useful to know if the day is
* in the same month of the displayed month.
* This property is useful for determining if the day belongs to the same
* month as the displayed month, especially when `showOutsideDays` is
* enabled.
*/

@@ -55,4 +55,7 @@ readonly displayMonth: Date;

/**
* Check if the day is the same as the given day: considering if it is in the
* same display month.
* Checks if this day is equal to another `CalendarDay`, considering both the
* date and the displayed month.
*
* @param day The `CalendarDay` to compare with.
* @returns `true` if the days are equal, otherwise `false`.
*/

@@ -59,0 +62,0 @@ isEqualTo(day: CalendarDay) {

11

src/classes/CalendarMonth.ts
import { CalendarWeek } from "./CalendarWeek.js";
/** Represent a month in a calendar year. Contains the weeks within the month. */
/**
* Represents a month in a calendar year.
*
* A `CalendarMonth` contains the weeks within the month and the date of the
* month.
*/
export class CalendarMonth {

@@ -10,7 +15,7 @@ constructor(month: Date, weeks: CalendarWeek[]) {

/** The date of the month. */
/** The date representing the first day of the month. */
date: Date;
/** The weeks within the month. */
/** The weeks that belong to this month. */
weeks: CalendarWeek[];
}

10

src/classes/CalendarWeek.ts
import { CalendarDay } from "./CalendarDay.js";
/** Represent a week in a calendar month. */
/**
* Represents a week in a calendar month.
*
* A `CalendarWeek` contains the days within the week and the week number.
*/
export class CalendarWeek {

@@ -9,6 +13,8 @@ constructor(weekNumber: number, days: CalendarDay[]) {

}
/** The number of the week within the year. */
weekNumber: number;
/** The days within the week. */
/** The days that belong to this week. */
days: CalendarDay[];
}

141

src/classes/DateLib.ts

@@ -39,3 +39,6 @@ import { TZDate } from "@date-fns/tz";

FormatOptions as DateFnsFormatOptions,
DateArg
Interval,
GetMonthOptions,
GetYearOptions,
GetWeekOptions
} from "date-fns";

@@ -95,4 +98,4 @@ import type { Locale } from "date-fns/locale";

/**
* A wrapper class around [date-fns](http://date-fns.org) sharing the same
* options.
* A wrapper class around [date-fns](http://date-fns.org) that provides utility
* methods for date manipulation and formatting.
*

@@ -105,13 +108,13 @@ * @since 9.2.0

export class DateLib {
/** The options for the date library. */
/** The options for configuring the date library. */
readonly options: DateLibOptions;
/** Overrides for the date library functions. */
/** Overrides for the default date library functions. */
readonly overrides?: Partial<typeof DateLib.prototype>;
/**
* Creates an instance of DateLib.
* Creates an instance of `DateLib`.
*
* @param options The options for the date library.
* @param overrides Overrides for the date library functions.
* @param options Configuration options for the date library.
* @param overrides Custom overrides for the date library functions.
*/

@@ -127,5 +130,7 @@ constructor(

/**
* Generate digit map dynamically using Intl.NumberFormat.
* Generates a mapping of Arabic digits (0-9) to the target numbering system
* digits.
*
* @since 9.5.0
* @returns A record mapping Arabic digits to the target numerals.
*/

@@ -150,5 +155,7 @@ private getDigitMap(): Record<string, string> {

/**
* Replace Arabic digits with the target numbering system digits.
* Replaces Arabic digits in a string with the target numbering system digits.
*
* @since 9.5.0
* @param input The string containing Arabic digits.
* @returns The string with digits replaced.
*/

@@ -161,9 +168,9 @@ private replaceDigits(input: string): string {

/**
* Format number using the custom numbering system.
* Formats a number using the configured numbering system.
*
* @since 9.5.0
* @param value The number to format.
* @returns The formatted number.
* @returns The formatted number as a string.
*/
formatNumber(value: number): string {
formatNumber(value: number | string): string {
return this.replaceDigits(value.toString());

@@ -180,6 +187,6 @@ }

/**
* Creates a new date object to the today's date.
* Creates a new `Date` object representing today's date.
*
* @since 9.5.0
* @returns The new date object.
* @returns A `Date` object for today's date.
*/

@@ -197,3 +204,3 @@ today = (): Date => {

/**
* Creates a new date object with the specified year, month and date.
* Creates a new `Date` object with the specified year, month, and day.
*

@@ -204,3 +211,3 @@ * @since 9.5.0

* @param date The day of the month.
* @returns The new date object.
* @returns A new `Date` object.
*/

@@ -224,3 +231,3 @@ newDate = (year: number, monthIndex: number, date: number): Date => {

*/
addDays: typeof addDays = (date, amount) => {
addDays = (date: Date, amount: number): Date => {
return this.overrides?.addDays

@@ -238,3 +245,3 @@ ? this.overrides.addDays(date, amount)

*/
addMonths: typeof addMonths = (date, amount) => {
addMonths = (date: Date, amount: number): Date => {
return this.overrides?.addMonths

@@ -252,3 +259,3 @@ ? this.overrides.addMonths(date, amount)

*/
addWeeks: typeof addWeeks = (date, amount) => {
addWeeks = (date: Date, amount: number): Date => {
return this.overrides?.addWeeks

@@ -266,3 +273,3 @@ ? this.overrides.addWeeks(date, amount)

*/
addYears: typeof addYears = (date, amount) => {
addYears = (date: Date, amount: number): Date => {
return this.overrides?.addYears

@@ -280,6 +287,3 @@ ? this.overrides.addYears(date, amount)

*/
differenceInCalendarDays: typeof differenceInCalendarDays = (
dateLeft,
dateRight
) => {
differenceInCalendarDays = (dateLeft: Date, dateRight: Date): number => {
return this.overrides?.differenceInCalendarDays

@@ -297,6 +301,3 @@ ? this.overrides.differenceInCalendarDays(dateLeft, dateRight)

*/
differenceInCalendarMonths: typeof differenceInCalendarMonths = (
dateLeft,
dateRight
) => {
differenceInCalendarMonths = (dateLeft: Date, dateRight: Date): number => {
return this.overrides?.differenceInCalendarMonths

@@ -312,3 +313,3 @@ ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight)

*/
eachMonthOfInterval: typeof eachMonthOfInterval = (interval) => {
eachMonthOfInterval = (interval: Interval): Date[] => {
return this.overrides?.eachMonthOfInterval

@@ -325,5 +326,5 @@ ? this.overrides.eachMonthOfInterval(interval)

*/
endOfBroadcastWeek: typeof endOfBroadcastWeek = (date: Date) => {
endOfBroadcastWeek = (date: Date): Date => {
return this.overrides?.endOfBroadcastWeek
? this.overrides.endOfBroadcastWeek(date, this)
? this.overrides.endOfBroadcastWeek(date)
: endOfBroadcastWeek(date, this);

@@ -338,3 +339,3 @@ };

*/
endOfISOWeek: typeof endOfISOWeek = (date) => {
endOfISOWeek = (date: Date): Date => {
return this.overrides?.endOfISOWeek

@@ -351,3 +352,3 @@ ? this.overrides.endOfISOWeek(date)

*/
endOfMonth: typeof endOfMonth = (date) => {
endOfMonth = (date: Date): Date => {
return this.overrides?.endOfMonth

@@ -364,14 +365,6 @@ ? this.overrides.endOfMonth(date)

*/
endOfWeek: typeof endOfWeek = <
DateType extends Date,
ResultDate extends Date = DateType
>(
date: DateArg<DateType>
): ResultDate => {
endOfWeek = (date: Date, options?: EndOfWeekOptions<Date>): Date => {
return this.overrides?.endOfWeek
? this.overrides.endOfWeek(
date,
this.options as EndOfWeekOptions<ResultDate>
)
: endOfWeek(date, this.options as EndOfWeekOptions<ResultDate>);
? this.overrides.endOfWeek(date, options)
: endOfWeek(date, this.options);
};

@@ -385,3 +378,3 @@

*/
endOfYear: typeof endOfYear = (date) => {
endOfYear = (date: Date): Date => {
return this.overrides?.endOfYear

@@ -399,3 +392,7 @@ ? this.overrides.endOfYear(date)

*/
format: typeof format = (date, formatStr) => {
format = (
date: Date,
formatStr: string,
options?: DateFnsFormatOptions
): string => {
const formatted = this.overrides?.format

@@ -416,3 +413,3 @@ ? this.overrides.format(date, formatStr, this.options)

*/
getISOWeek: typeof getISOWeek = (date) => {
getISOWeek = (date: Date): number => {
return this.overrides?.getISOWeek

@@ -429,3 +426,3 @@ ? this.overrides.getISOWeek(date)

*/
getMonth: typeof getMonth = (date) => {
getMonth = (date: Date, options?: GetMonthOptions): number => {
return this.overrides?.getMonth

@@ -442,3 +439,3 @@ ? this.overrides.getMonth(date, this.options)

*/
getYear: typeof getYear = (date) => {
getYear = (date: Date, options?: GetYearOptions): number => {
return this.overrides?.getYear

@@ -455,3 +452,3 @@ ? this.overrides.getYear(date, this.options)

*/
getWeek: typeof getWeek = (date) => {
getWeek = (date: Date, options?: GetWeekOptions): number => {
return this.overrides?.getWeek

@@ -469,3 +466,3 @@ ? this.overrides.getWeek(date, this.options)

*/
isAfter: typeof isAfter = (date, dateToCompare) => {
isAfter = (date: Date, dateToCompare: Date): boolean => {
return this.overrides?.isAfter

@@ -483,3 +480,3 @@ ? this.overrides.isAfter(date, dateToCompare)

*/
isBefore: typeof isBefore = (date, dateToCompare) => {
isBefore = (date: Date, dateToCompare: Date): boolean => {
return this.overrides?.isBefore

@@ -509,3 +506,3 @@ ? this.overrides.isBefore(date, dateToCompare)

*/
isSameDay: typeof isSameDay = (dateLeft, dateRight) => {
isSameDay = (dateLeft: Date, dateRight: Date): boolean => {
return this.overrides?.isSameDay

@@ -523,3 +520,3 @@ ? this.overrides.isSameDay(dateLeft, dateRight)

*/
isSameMonth: typeof isSameMonth = (dateLeft, dateRight) => {
isSameMonth = (dateLeft: Date, dateRight: Date): boolean => {
return this.overrides?.isSameMonth

@@ -537,3 +534,3 @@ ? this.overrides.isSameMonth(dateLeft, dateRight)

*/
isSameYear: typeof isSameYear = (dateLeft, dateRight) => {
isSameYear = (dateLeft: Date, dateRight: Date): boolean => {
return this.overrides?.isSameYear

@@ -550,3 +547,3 @@ ? this.overrides.isSameYear(dateLeft, dateRight)

*/
max: typeof max = (dates) => {
max = (dates: Date[]): Date => {
return this.overrides?.max ? this.overrides.max(dates) : max(dates);

@@ -561,3 +558,3 @@ };

*/
min: typeof min = (dates) => {
min = (dates: Date[]): Date => {
return this.overrides?.min ? this.overrides.min(dates) : min(dates);

@@ -573,3 +570,3 @@ };

*/
setMonth: typeof setMonth = (date, month) => {
setMonth = (date: Date, month: number): Date => {
return this.overrides?.setMonth

@@ -587,3 +584,3 @@ ? this.overrides.setMonth(date, month)

*/
setYear: typeof setYear = (date, year) => {
setYear = (date: Date, year: number): Date => {
return this.overrides?.setYear

@@ -600,3 +597,3 @@ ? this.overrides.setYear(date, year)

*/
startOfBroadcastWeek: typeof startOfBroadcastWeek = (date: Date) => {
startOfBroadcastWeek = (date: Date, dateLib: DateLib): Date => {
return this.overrides?.startOfBroadcastWeek

@@ -613,3 +610,3 @@ ? this.overrides.startOfBroadcastWeek(date, this)

*/
startOfDay: typeof startOfDay = (date) => {
startOfDay = (date: Date): Date => {
return this.overrides?.startOfDay

@@ -626,3 +623,3 @@ ? this.overrides.startOfDay(date)

*/
startOfISOWeek: typeof startOfISOWeek = (date) => {
startOfISOWeek = (date: Date): Date => {
return this.overrides?.startOfISOWeek

@@ -639,3 +636,3 @@ ? this.overrides.startOfISOWeek(date)

*/
startOfMonth: typeof startOfMonth = (date) => {
startOfMonth = (date: Date): Date => {
return this.overrides?.startOfMonth

@@ -652,14 +649,6 @@ ? this.overrides.startOfMonth(date)

*/
startOfWeek: typeof startOfWeek = <
DateType extends Date,
ResultDate extends Date = DateType
>(
date: DateArg<DateType>
): ResultDate => {
startOfWeek = (date: Date, options?: StartOfWeekOptions): Date => {
return this.overrides?.startOfWeek
? this.overrides.startOfWeek(
date,
this.options as StartOfWeekOptions<ResultDate>
)
: startOfWeek(date, this.options as StartOfWeekOptions<ResultDate>);
? this.overrides.startOfWeek(date, this.options)
: startOfWeek(date, this.options);
};

@@ -673,3 +662,3 @@

*/
startOfYear: typeof startOfYear = (date) => {
startOfYear = (date: Date): Date => {
return this.overrides?.startOfYear

@@ -676,0 +665,0 @@ ? this.overrides.startOfYear(date)

9

src/formatters/formatCaption.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the caption of the month.
* Formats the caption of the month.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param month The date representing the month.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted caption as a string.
* @group Formatters

@@ -8,0 +13,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

src/formatters/formatDay.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the day date shown in the day cell.
* Formats the day date shown in the day cell.
*
* @defaultValue `d` (e.g. "1")
* @defaultValue `d` (e.g., "1").
* @param date The date to format.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted day as a string.
* @group Formatters

@@ -8,0 +13,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

8

src/formatters/formatMonthDropdown.ts
import { defaultDateLib, type DateLib } from "../classes/DateLib.js";
/**
* Format the month number for the dropdown option label.
* Formats the month for the dropdown option label.
*
* @defaultValue The localized month name
* @defaultValue The localized full month name.
* @param month The date representing the month.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted month name as a string.
* @group Formatters

@@ -8,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

9

src/formatters/formatWeekdayName.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* Format the weekday name to be displayed in the weekdays header.
* Formats the name of a weekday to be displayed in the weekdays header.
*
* @defaultValue `cccccc` (e.g. "Mo" for Monday)
* @defaultValue `cccccc` (e.g., "Mo" for Monday).
* @param weekday The date representing the weekday.
* @param options Configuration options for the date library.
* @param dateLib The date library to use for formatting. If not provided, a new
* instance is created.
* @returns The formatted weekday name as a string.
* @group Formatters

@@ -8,0 +13,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

11

src/formatters/formatWeekNumber.test.ts

@@ -0,1 +1,3 @@

import { DateLib } from "../classes";
import { formatWeekNumber } from "./formatWeekNumber";

@@ -6,1 +8,10 @@

});
test("should return the formatted week number with leading zero", () => {
expect(formatWeekNumber(1)).toEqual("01");
});
test("should format with the provided numeral system", () => {
const dateLib = new DateLib({ numerals: "arab" });
expect(formatWeekNumber(1, dateLib)).toEqual("٠١");
});

16

src/formatters/formatWeekNumber.ts

@@ -0,13 +1,19 @@

import { defaultDateLib } from "../classes/DateLib.js";
/**
* Format the week number.
* Formats the week number.
*
* @defaultValue `weekNumber.toLocaleString()` with a leading zero for single-digit numbers
* @defaultValue The week number as a string, with a leading zero for single-digit numbers.
* @param weekNumber The week number to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted week number as a string.
* @group Formatters
* @see https://daypicker.dev/docs/translation#custom-formatters
*/
export function formatWeekNumber(weekNumber: number) {
export function formatWeekNumber(weekNumber: number, dateLib = defaultDateLib) {
if (weekNumber < 10) {
return `0${weekNumber.toLocaleString()}`;
return dateLib.formatNumber(`0${weekNumber.toLocaleString()}`);
}
return `${weekNumber.toLocaleString()}`;
return dateLib.formatNumber(`${weekNumber.toLocaleString()}`);
}

5

src/formatters/formatWeekNumberHeader.ts
/**
* Format the week number header.
* Formats the header for the week number column.
*
* @defaultValue `""`
* @defaultValue An empty string `""`.
* @returns The formatted week number header as a string.
* @group Formatters

@@ -6,0 +7,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

6

src/formatters/formatYearDropdown.ts
import { defaultDateLib, type DateLib } from "../classes/DateLib.js";
/**
* Format the years for the dropdown option label.
* Formats the year for the dropdown option label.
*
* @param year The year to format.
* @param dateLib The date library to use for formatting. Defaults to
* `defaultDateLib`.
* @returns The formatted year as a string.
* @group Formatters

@@ -7,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#custom-formatters

27

src/helpers/calculateFocusTarget.ts

@@ -12,2 +12,11 @@ import { DayFlag } from "../UI.js";

/**
* Determines if a day is focusable based on its modifiers.
*
* A day is considered focusable if it is not disabled, hidden, or outside the
* displayed month.
*
* @param modifiers The modifiers applied to the day.
* @returns `true` if the day is focusable, otherwise `false`.
*/
function isFocusableDay(modifiers: Modifiers) {

@@ -21,2 +30,16 @@ return (

/**
* Calculates the focus target day based on priority.
*
* This function determines the day that should receive focus in the calendar,
* prioritizing days with specific modifiers (e.g., "focused", "today") or
* selection states.
*
* @param days The array of `CalendarDay` objects to evaluate.
* @param getModifiers A function to retrieve the modifiers for a given day.
* @param isSelected A function to determine if a day is selected.
* @param lastFocused The last focused day, if any.
* @returns The `CalendarDay` that should receive focus, or `undefined` if no
* focusable day is found.
*/
export function calculateFocusTarget(

@@ -27,3 +50,3 @@ days: CalendarDay[],

lastFocused: CalendarDay | undefined
) {
): CalendarDay | undefined {
let focusTarget: CalendarDay | undefined;

@@ -65,3 +88,3 @@

if (!focusTarget) {
// return the first day that is focusable
// Return the first day that is focusable
focusTarget = days.find((day) => isFocusableDay(getModifiers(day)));

@@ -68,0 +91,0 @@ }

8

src/helpers/endOfBroadcastWeek.ts

@@ -7,5 +7,11 @@ import type { DateLib } from "../classes/index.js";

/**
* Return the end date of the week in the broadcast calendar.
* Returns the end date of the week in the broadcast calendar.
*
* The broadcast week ends on the last day of the last broadcast week for the
* given date.
*
* @since 9.4.0
* @param date The date for which to calculate the end of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The end date of the broadcast week.
*/

@@ -12,0 +18,0 @@ export function endOfBroadcastWeek(date: Date, dateLib: DateLib): Date {

9

src/helpers/getBroadcastWeeksInMonth.ts

@@ -7,5 +7,12 @@ import { DateLib } from "../classes/index.js";

/**
* Return the number of weeks to display in the broadcast calendar.
* Returns the number of weeks to display in the broadcast calendar for a given
* month.
*
* The broadcast calendar may have either 4 or 5 weeks in a month, depending on
* the start and end dates of the broadcast weeks.
*
* @since 9.4.0
* @param month The month for which to calculate the number of weeks.
* @param dateLib The date library to use for date manipulation.
* @returns The number of weeks in the broadcast calendar (4 or 5).
*/

@@ -12,0 +19,0 @@ export function getBroadcastWeeksInMonth(month: Date, dateLib: DateLib): 4 | 5 {

14

src/helpers/getClassNamesForModifiers.ts
import { DayFlag, SelectionState, UI } from "../UI.js";
import type { ModifiersClassNames, ClassNames } from "../types/index.js";
/**
* Returns the class names for a day based on its modifiers.
*
* This function combines the base class name for the day with any class names
* associated with active modifiers.
*
* @param modifiers The modifiers applied to the day.
* @param classNames The base class names for the calendar elements.
* @param modifiersClassNames The class names associated with specific
* modifiers.
* @returns An array of class names for the day.
*/
export function getClassNamesForModifiers(

@@ -8,3 +20,3 @@ modifiers: Record<string, boolean>,

modifiersClassNames: ModifiersClassNames = {}
) {
): string[] {
const modifierClassNames = Object.entries(modifiers)

@@ -11,0 +23,0 @@ .filter(([, active]) => active === true)

10

src/helpers/getComponents.ts
import * as components from "../components/custom-components.js";
import type { CustomComponents, DayPickerProps } from "../types/index.js";
/**
* Merges custom components from the props with the default components.
*
* This function ensures that any custom components provided in the props
* override the default components.
*
* @param customComponents The custom components provided in the DayPicker
* props.
* @returns An object containing the merged components.
*/
export function getComponents(

@@ -5,0 +15,0 @@ customComponents: DayPickerProps["components"]

15

src/helpers/getDates.ts
import { type DateLib } from "../classes/DateLib.js";
import { type DayPickerProps } from "../types/props.js";
/** Return all the dates to display in the calendar. */
/**
* Returns all the dates to display in the calendar.
*
* This function calculates the range of dates to display based on the provided
* display months, constraints, and calendar configuration.
*
* @param displayMonths The months to display in the calendar.
* @param maxDate The maximum date to include in the range.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates to display in the calendar.
*/
export function getDates(

@@ -36,3 +47,3 @@ displayMonths: Date[],

const endWeekLastDate = broadcastCalendar
? endOfBroadcastWeek(lastMonth, dateLib)
? endOfBroadcastWeek(lastMonth)
: ISOWeek

@@ -39,0 +50,0 @@ ? endOfISOWeek(endOfMonth(lastMonth))

5

src/helpers/getDays.ts

@@ -6,2 +6,6 @@ import type { CalendarDay, CalendarMonth } from "../classes/index.js";

* weeks for each month.
*
* @param calendarMonths The array of calendar months.
* @returns An array of `CalendarDay` objects representing all the days in the
* calendar.
*/

@@ -11,3 +15,2 @@ export function getDays(calendarMonths: CalendarMonth[]) {

return calendarMonths.reduce((days, month) => {
const initialDays: CalendarDay[] = [];
const weekDays: CalendarDay[] = month.weeks.reduce((weekDays, week) => {

@@ -14,0 +17,0 @@ return [...weekDays, ...week.days];

6

src/helpers/getDefaultClassNames.ts

@@ -5,4 +5,8 @@ import { UI, DayFlag, SelectionState, Animation } from "../UI.js";

/**
* Get the default class names for the UI elements.
* Returns the default class names for the UI elements.
*
* This function generates a mapping of default class names for various UI
* elements, day flags, selection states, and animations.
*
* @returns An object containing the default class names.
* @group Utilities

@@ -9,0 +13,0 @@ */

12

src/helpers/getDisplayMonths.ts
import type { DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/**
* Returns the months to display in the calendar.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param props The DayPicker props, including `numberOfMonths`.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dates representing the months to display.
*/
export function getDisplayMonths(

@@ -9,3 +19,3 @@ firstDisplayedMonth: Date,

dateLib: DateLib
) {
): Date[] {
const { numberOfMonths = 1 } = props;

@@ -12,0 +22,0 @@ const months: Date[] = [];

19

src/helpers/getFocusableDate.ts

@@ -8,3 +8,18 @@ import type { DateLib } from "../classes/DateLib.js";

/** Return the next date that should be focused. */
/**
* Calculates the next date that should be focused in the calendar.
*
* This function determines the next focusable date based on the movement
* direction, constraints, and calendar configuration.
*
* @param moveBy The unit of movement (e.g., "day", "week").
* @param moveDir The direction of movement ("before" or "after").
* @param refDate The reference date from which to calculate the next focusable
* date.
* @param navStart The earliest date the user can navigate to.
* @param navEnd The latest date the user can navigate to.
* @param props The DayPicker props, including calendar configuration options.
* @param dateLib The date library to use for date manipulation.
* @returns The next focusable date.
*/
export function getFocusableDate(

@@ -47,3 +62,3 @@ moveBy: MoveFocusBy,

broadcastCalendar
? endOfBroadcastWeek(date, dateLib)
? endOfBroadcastWeek(date)
: ISOWeek

@@ -50,0 +65,0 @@ ? endOfISOWeek(date)

8

src/helpers/getFormatters.ts
import * as defaultFormatters from "../formatters/index.js";
import type { DayPickerProps } from "../types/index.js";
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom formatters from the props with the default formatters.
*
* @param customFormatters The custom formatters provided in the DayPicker
* props.
* @returns The merged formatters object.
*/
export function getFormatters(customFormatters: DayPickerProps["formatters"]) {

@@ -6,0 +12,0 @@ if (customFormatters?.formatMonthCaption && !customFormatters.formatCaption) {

23

src/helpers/getInitialMonth.ts

@@ -1,7 +0,15 @@

import { TZDate } from "@date-fns/tz";
import { type DateLib } from "../classes/DateLib.js";
import { type DayPickerProps } from "../types/props.js";
/** Return the start month based on the props passed to DayPicker. */
/**
* Determines the initial month to display in the calendar based on the provided
* props.
*
* This function calculates the starting month, considering constraints such as
* `startMonth`, `endMonth`, and the number of months to display.
*
* @param props The DayPicker props, including navigation and date constraints.
* @param dateLib The date library to use for date manipulation.
* @returns The initial month to display.
*/
export function getInitialMonth(

@@ -28,4 +36,3 @@ props: Pick<

endMonth,
startMonth,
timeZone
startMonth
} = props;

@@ -35,3 +42,3 @@ let initialMonth = month || defaultMonth || today;

// Fix the initialMonth if is after the endMonth
// Adjust the initial month if it is after the endMonth
if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) {

@@ -41,10 +48,8 @@ const offset = -1 * (numberOfMonths - 1);

}
// Fix the initialMonth if is before the startMonth
// Adjust the initial month if it is before the startMonth
if (startMonth && differenceInCalendarMonths(initialMonth, startMonth) < 0) {
initialMonth = startMonth;
}
// When timeZone is provided, convert initialMonth to TZDate type to ensure proper timezone handling
initialMonth = timeZone ? new TZDate(initialMonth, timeZone) : initialMonth;
return startOfMonth(initialMonth);
}

7

src/helpers/getLabels.ts
import * as defaultLabels from "../labels/index.js";
import type { DayPickerProps, Labels } from "../types/index.js";
/** Return the formatters from the props merged with the default formatters. */
/**
* Merges custom labels from the props with the default labels.
*
* @param customLabels The custom labels provided in the DayPicker props.
* @returns The merged labels object.
*/
export function getLabels(customLabels: DayPickerProps["labels"]): Labels {

@@ -6,0 +11,0 @@ return {

16

src/helpers/getMonthOptions.ts

@@ -5,3 +5,17 @@ import { type DateLib } from "../classes/DateLib.js";

/** Return the months to show in the dropdown. */
/**
* Returns the months to show in the dropdown.
*
* This function generates a list of months for the current year, formatted
* using the provided formatter, and determines whether each month should be
* disabled based on the navigation range.
*
* @param displayMonth The currently displayed month.
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the month labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the months, or `undefined`
* if no months are available.
*/
export function getMonthOptions(

@@ -8,0 +22,0 @@ displayMonth: Date,

21

src/helpers/getMonths.ts

@@ -5,9 +5,19 @@ import type { DateLib } from "../classes/DateLib.js";

/** Return the months to display in the calendar. */
/**
* Returns the months to display in the calendar.
*
* This function generates `CalendarMonth` objects for each month to be
* displayed, including their weeks and days, based on the provided display
* months and dates.
*
* @param displayMonths The months (as dates) to display in the calendar.
* @param dates The dates to display in the calendar.
* @param props Options from the DayPicker props context.
* @param dateLib The date library to use for date manipulation.
* @returns An array of `CalendarMonth` objects representing the months to
* display.
*/
export function getMonths(
/** The months (as dates) to display in the calendar. */
displayMonths: Date[],
/** The dates to display in the calendar. */
dates: Date[],
/** Options from the props context. */
props: Pick<

@@ -31,2 +41,3 @@ DayPickerProps,

} = dateLib;
const dayPickerMonths = displayMonths.reduce<CalendarMonth[]>(

@@ -41,3 +52,3 @@ (months, month) => {

const lastDateOfLastWeek = props.broadcastCalendar
? endOfBroadcastWeek(month, dateLib)
? endOfBroadcastWeek(month)
: props.ISOWeek

@@ -44,0 +55,0 @@ ? endOfISOWeek(endOfMonth(month))

8

src/helpers/getNavMonth.ts
import { type DateLib } from "../classes/DateLib.js";
import type { DayPickerProps } from "../types/index.js";
/** Return the start and end months for the calendar navigation. */
/**
* Returns the start and end months for calendar navigation.
*
* @param props The DayPicker props, including navigation and layout options.
* @param dateLib The date library to use for date manipulation.
* @returns A tuple containing the start and end months for navigation.
*/
export function getNavMonths(

@@ -6,0 +12,0 @@ props: Pick<

19

src/helpers/getNextMonth.ts

@@ -5,9 +5,17 @@ import type { DateLib } from "../classes/DateLib.js";

/**
* Return the next month the user can navigate to according to the given
* options.
* Returns the next month the user can navigate to, based on the given options.
*
* Please note that the next month is not always the next calendar month:
* The next month is not always the next calendar month:
*
* - If after the `calendarEndMonth` range, is `undefined`;
* - If the navigation is paged , is the number of months displayed ahead.
* - If it is after the `calendarEndMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips forward by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarEndMonth The latest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The next month, or `undefined` if navigation is not possible.
*/

@@ -44,4 +52,3 @@ export function getNextMonth(

// Jump forward as the number of months when paged navigation
return addMonths(month, offset);
}

18

src/helpers/getPreviousMonth.ts

@@ -5,10 +5,18 @@ import type { DateLib } from "../classes/DateLib.js";

/**
* Return the next previous the user can navigate to, according to the given
* Returns the previous month the user can navigate to, based on the given
* options.
*
* Please note that the previous month is not always the previous calendar
* month:
* The previous month is not always the previous calendar month:
*
* - If before the `calendarStartMonth` date, is `undefined`;
* - If the navigation is paged, is the number of months displayed before.
* - If it is before the `calendarStartMonth`, it returns `undefined`.
* - If paged navigation is enabled, it skips back by the number of displayed
* months.
*
* @param firstDisplayedMonth The first month currently displayed in the
* calendar.
* @param calendarStartMonth The earliest month the user can navigate to.
* @param options Navigation options, including `numberOfMonths` and
* `pagedNavigation`.
* @param dateLib The date library to use for date manipulation.
* @returns The previous month, or `undefined` if navigation is not possible.
*/

@@ -15,0 +23,0 @@ export function getPreviousMonth(

13

src/helpers/getStyleForModifiers.ts

@@ -6,2 +6,13 @@ import type { CSSProperties } from "react";

/**
* Returns the computed style for a day based on its modifiers.
*
* This function merges the base styles for the day with any styles associated
* with active modifiers.
*
* @param dayModifiers The modifiers applied to the day.
* @param styles The base styles for the calendar elements.
* @param modifiersStyles The styles associated with specific modifiers.
* @returns The computed style for the day.
*/
export function getStyleForModifiers(

@@ -11,3 +22,3 @@ dayModifiers: Modifiers,

modifiersStyles: Partial<ModifiersStyles> = {}
) {
): CSSProperties {
let style: CSSProperties = { ...styles?.[UI.Day] };

@@ -14,0 +25,0 @@ Object.entries(dayModifiers)

13

src/helpers/getWeekdays.ts
import { DateLib } from "../classes/DateLib.js";
/**
* Generate a series of 7 days, starting from the week, to use for formatting
* the weekday names (Monday, Tuesday, etc.).
* Generates a series of 7 days, starting from the beginning of the week, to use
* for formatting weekday names (e.g., Monday, Tuesday, etc.).
*
* @param dateLib The date library to use for date manipulation.
* @param ISOWeek Whether to use ISO week numbering (weeks start on Monday).
* @param broadcastCalendar Whether to use the broadcast calendar (weeks start
* on Monday, but may include adjustments for broadcast-specific rules).
* @returns An array of 7 dates representing the weekdays.
*/
export function getWeekdays(
/** The date library. */
dateLib: DateLib,
/** Use ISOWeek instead of locale/ */
ISOWeek?: boolean | undefined,
/** @since 9.4.0 */
broadcastCalendar?: boolean | undefined

@@ -14,0 +17,0 @@ ): Date[] {

7

src/helpers/getWeeks.ts
import type { CalendarMonth, CalendarWeek } from "../classes/index.js";
/** Returns an array of calendar weeks from an array of calendar months. */
/**
* Returns an array of calendar weeks from an array of calendar months.
*
* @param months The array of calendar months.
* @returns An array of calendar weeks.
*/
export function getWeeks(months: CalendarMonth[]) {

@@ -5,0 +10,0 @@ const initialWeeks: CalendarWeek[] = [];

14

src/helpers/getYearOptions.ts

@@ -5,3 +5,15 @@ import type { DateLib } from "../classes/DateLib.js";

/** Return the years to show in the dropdown. */
/**
* Returns the years to display in the dropdown.
*
* This function generates a list of years between the navigation start and end
* dates, formatted using the provided formatter.
*
* @param navStart The start date for navigation.
* @param navEnd The end date for navigation.
* @param formatters The formatters to use for formatting the year labels.
* @param dateLib The date library to use for date manipulation.
* @returns An array of dropdown options representing the years, or `undefined`
* if `navStart` or `navEnd` is not provided.
*/
export function getYearOptions(

@@ -8,0 +20,0 @@ navStart: Date | undefined,

9

src/helpers/startOfBroadcastWeek.ts
import type { DateLib } from "../classes/index.js";
/**
* Return the start date of the week in the broadcast calendar.
* Returns the start date of the week in the broadcast calendar.
*
* The broadcast week starts on Monday. If the first day of the month is not a
* Monday, this function calculates the previous Monday as the start of the
* broadcast week.
*
* @since 9.4.0
* @param date The date for which to calculate the start of the broadcast week.
* @param dateLib The date library to use for date manipulation.
* @returns The start date of the broadcast week.
*/

@@ -8,0 +15,0 @@ export function startOfBroadcastWeek(date: Date, dateLib: DateLib): Date {

16

src/helpers/useControlledValue.ts

@@ -8,2 +8,6 @@ import { useState } from "react";

*
* This hook allows a component to support both controlled and uncontrolled
* states by determining whether the `controlledValue` is provided. If it is
* undefined, the hook falls back to using the internal state.
*
* @example

@@ -17,8 +21,8 @@ * // Uncontrolled usage

* @template T - The type of the value.
* @param {T} defaultValue - The initial value for the uncontrolled state.
* @param {T | undefined} controlledValue - The value for the controlled state.
* If undefined, the component will use the uncontrolled state.
* @returns {[T, DispatchStateAction<T>]} - Returns a tuple where the first
* element is the current value (either controlled or uncontrolled) and the
* second element is a setter function to update the value.
* @param defaultValue The initial value for the uncontrolled state.
* @param controlledValue The value for the controlled state. If undefined, the
* component will use the uncontrolled state.
* @returns A tuple where the first element is the current value (either
* controlled or uncontrolled) and the second element is a setter function to
* update the value.
*/

@@ -25,0 +29,0 @@ export function useControlledValue<T>(

12

src/labels/labelDayButton.ts

@@ -5,8 +5,13 @@ import { DateLib, type DateLibOptions } from "../classes/DateLib.js";

/**
* The ARIA label for the day button.
* Generates the ARIA label for a day button.
*
* Use the `modifiers` argument to add additional context to the label, e.g.
* when a day is selected or is today.
* Use the `modifiers` argument to provide additional context for the label,
* such as indicating if the day is "today" or "selected."
*
* @defaultValue The formatted date.
* @param date - The date to format.
* @param modifiers - The modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the day button.
* @group Labels

@@ -17,3 +22,2 @@ * @see https://daypicker.dev/docs/translation#aria-labels

date: Date,
/** The modifiers for the day. */
modifiers: Modifiers,

@@ -20,0 +24,0 @@ options?: DateLibOptions,

10

src/labels/labelGrid.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the month grid, that will be announced when entering the
* grid.
* Generates the ARIA label for the month grid, which is announced when entering
* the grid.
*
* @defaultValue `LLLL y` (e.g. "November 2022")
* @defaultValue `LLLL y` (e.g., "November 2022").
* @param date - The date representing the month.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the month grid.
* @group Labels

@@ -9,0 +13,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

8

src/labels/labelGridcell.ts

@@ -5,4 +5,9 @@ import { DateLib, type DateLibOptions } from "../classes/DateLib.js";

/**
* The label for the day gridcell when the calendar is not interactive.
* Generates the label for a day grid cell when the calendar is not interactive.
*
* @param date - The date to format.
* @param modifiers - Optional modifiers providing context for the day.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The label for the day grid cell.
* @group Labels

@@ -13,3 +18,2 @@ * @see https://daypicker.dev/docs/translation#aria-labels

date: Date,
/** The modifiers for the day. */
modifiers?: Modifiers,

@@ -16,0 +20,0 @@ options?: DateLibOptions,

4

src/labels/labelMonthDropdown.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the months dropdown.
* Generates the ARIA label for the months dropdown.
*
* @defaultValue `"Choose the Month"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the months dropdown.
* @group Labels

@@ -8,0 +10,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

3

src/labels/labelNav.ts
/**
* The ARIA label for the navigation toolbar.
* Generates the ARIA label for the navigation toolbar.
*
* @defaultValue `""`
* @returns The ARIA label for the navigation toolbar.
* @group Labels

@@ -6,0 +7,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

10

src/labels/labelNext.ts
/**
* The ARIA label for next month button.
* Generates the ARIA label for the "next month" button.
*
* @defaultValue `"Go to the Next Month"`
* @param month - The date representing the next month, or `undefined` if there
* is no next month.
* @returns The ARIA label for the "next month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export function labelNext(
/** `undefined` where there's no next month to navigate to. */
month: Date | undefined
) {
export function labelNext(month: Date | undefined) {
return "Go to the Next Month";
}

10

src/labels/labelPrevious.ts
/**
* The ARIA label for previous month button.
* Generates the ARIA label for the "previous month" button.
*
* @defaultValue `"Go to the Previous Month"`
* @param month - The date representing the previous month, or `undefined` if
* there is no previous month.
* @returns The ARIA label for the "previous month" button.
* @group Labels
* @see https://daypicker.dev/docs/translation#aria-labels
*/
export function labelPrevious(
/** Undefined where there's no previous month to navigate to. */
month: Date | undefined
) {
export function labelPrevious(month: Date | undefined) {
return "Go to the Previous Month";
}

6

src/labels/labelWeekday.ts
import { DateLib, type DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the Weekday column header.
* Generates the ARIA label for a weekday column header.
*
* @defaultValue `"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"`
* @param date - The date representing the weekday.
* @param options - Optional configuration for the date formatting library.
* @param dateLib - An optional instance of the date formatting library.
* @returns The ARIA label for the weekday column header.
* @group Labels

@@ -8,0 +12,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

5

src/labels/labelWeekNumber.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the week number cell (the first cell in the row).
* Generates the ARIA label for the week number cell (the first cell in a row).
*
* @defaultValue `Week ${weekNumber}`
* @param weekNumber - The number of the week.
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number cell.
* @group Labels

@@ -8,0 +11,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

src/labels/labelWeekNumberHeader.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the week number header element.
* Generates the ARIA label for the week number header element.
*
* @defaultValue `"Week Number"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the week number header.
* @group Labels

@@ -8,0 +10,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

4

src/labels/labelYearDropdown.ts
import type { DateLibOptions } from "../classes/DateLib.js";
/**
* The ARIA label for the years dropdown.
* Generates the ARIA label for the years dropdown.
*
* @defaultValue `"Choose the Year"`
* @param options - Optional configuration for the date formatting library.
* @returns The ARIA label for the years dropdown.
* @group Labels

@@ -8,0 +10,0 @@ * @see https://daypicker.dev/docs/translation#aria-labels

16

src/types/deprecated.ts

@@ -87,3 +87,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */

* @ignore
* @deprecated This type will be removed. Use `NonNullable<unknown>` instead
* @deprecated This type will be removed. Use `NonNullable<unknown>` instead.
*/

@@ -100,3 +100,3 @@ export type DayPickerDefaultProps = NonNullable<unknown>;

* @ignore
* @deprecated This type will be removed. Use `string` instead;
* @deprecated This type will be removed. Use `string` instead.
*/

@@ -121,4 +121,4 @@ export type Modifier = string;

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode: "single"}>`
* instead.
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "single"
* }>` instead.
*/

@@ -129,4 +129,4 @@ export type SelectSingleEventHandler = PropsSingle["onSelect"];

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode:
* "multiple"}>` instead.
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "multiple"
* }>` instead.
*/

@@ -137,3 +137,3 @@ export type SelectMultipleEventHandler = PropsMulti["onSelect"];

* @ignore
* @deprecated This type will be removed. Use `SelectHandler<{mode: "range"}>`
* @deprecated This type will be removed. Use `SelectHandler<{ mode: "range" }>`
* instead.

@@ -151,3 +151,3 @@ */

* @ignore
* @deprecated This type has been removed to `useDayPicker`.
* @deprecated This type has been moved to `useDayPicker`.
* @group Hooks

@@ -154,0 +154,0 @@ */

71

src/types/props.ts

@@ -212,5 +212,6 @@ import React from "react";

*
* **Note:** showing the dropdown will set the start/end months
* {@link startMonth} to 100 years ago, and {@link endMonth} to the end of the
* current year.
* **Note:** By default, showing the dropdown will set the {@link startMonth}
* to 100 years ago and {@link endMonth} to the end of the current year. You
* can override this behavior by explicitly setting `startMonth` and
* `endMonth`.
*

@@ -220,3 +221,18 @@ * @see https://daypicker.dev/docs/customization#caption-layouts

captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
/**
* Adjust the positioning of the navigation buttons.
*
* - `around`: Displays the buttons on either side of the caption.
* - `after`: Displays the buttons after the caption. This ensures the tab order
* matches the visual order.
*
* If not set, the buttons default to being displayed after the caption, but
* the tab order may not align with the visual order.
*
* @since 9.7.0
* @see https://daypicker.dev/docs/customization#navigation-layouts
*/
navLayout?: "around" | "after" | undefined;
/**
* Display always 6 weeks per each month, regardless of the month’s number of

@@ -277,2 +293,3 @@ * weeks. Weeks will be filled with the days from the next month.

* The time zone (IANA or UTC offset) to use in the calendar (experimental).
*
* See

@@ -282,8 +299,3 @@ * [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)

*
* Time zones are supported by the `TZDate` object by the
* [@date-fns/tz](https://github.com/date-fns/tz) package. Please refer to the
* package documentation for more information.
*
* @since 9.1.1
* @experimental
* @see https://daypicker.dev/docs/time-zone

@@ -323,5 +335,6 @@ */

/**
* Apply the `disabled` modifier to the matching days.
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabling-dates
* @see https://daypicker.dev/docs/selection-modes#disabled
*/

@@ -346,2 +359,9 @@ disabled?: Matcher | Matcher[] | undefined;

*
* @example
* const modifiers = {
* weekend: { dayOfWeek: [0, 6] }, // Match weekends
* holiday: [new Date(2023, 11, 25)] // Match Christmas
* };
* <DayPicker modifiers={modifiers} />
*
* @see https://daypicker.dev/guides/custom-modifiers

@@ -429,3 +449,3 @@ */

* The index of the first day of the week (0 - Sunday). Overrides the locale's
* one.
* default.
*

@@ -436,3 +456,3 @@ * @see https://daypicker.dev/docs/localization#first-date-of-the-week

/**
* The day of January, which is always in the first week of the year.
* The day of January that is always in the first week of the year.
*

@@ -553,6 +573,18 @@ * @see https://daypicker.dev/docs/localization#first-week-contains-date

*
* @example
* const handleSelect: OnSelectHandler<Date> = (
* selected,
* triggerDate,
* modifiers,
* e
* ) => {
* console.log("Selected:", selected);
* console.log("Triggered by:", triggerDate);
* };
*
* @template T - The type of the selected item.
* @callback OnSelectHandler
* @param {T} selected - The selected item after the event.
* @param {Date} triggerDate - The date when the event was triggered.
* @param {Date} triggerDate - The date when the event was triggered. This is
* typically the day clicked or interacted with.
* @param {Modifiers} modifiers - The modifiers associated with the event.

@@ -644,2 +676,8 @@ * @param {React.MouseEvent | React.KeyboardEvent} e - The event object.

required: true;
/**
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabled
*/
disabled?: Matcher | Matcher[] | undefined;

@@ -670,2 +708,8 @@ /**

required?: false | undefined;
/**
* Apply the `disabled` modifier to the matching days. Disabled days cannot be
* selected when in a selection mode is set.
*
* @see https://daypicker.dev/docs/selection-modes#disabled
*/
disabled?: Matcher | Matcher[] | undefined;

@@ -676,2 +720,3 @@ /**

* @since V9.0.2
* @see https://daypicker.dev/docs/selection-modes#exclude-disabled
*/

@@ -678,0 +723,0 @@ excludeDisabled?: boolean | undefined;

25

src/types/selection.ts

@@ -20,2 +20,15 @@ import type { DayPickerProps } from "./props.js";

/**
* Represents the selected value based on the selection mode.
*
* @example
* // Single selection mode
* const selected: SelectedValue<{ mode: "single" }> = new Date();
*
* // Multiple selection mode
* const selected: SelectedValue<{ mode: "multiple" }> = [new Date(), new Date()];
*
* // Range selection mode
* const selected: SelectedValue<{ mode: "range" }> = { from: new Date(), to: new Date() };
*/
export type SelectedValue<T> = T extends { mode: "single"; required?: boolean }

@@ -48,2 +61,14 @@ ? SelectedSingle<T>

/**
* The handler to set a selection based on the mode.
*
* @example
* const handleSelect: SelectHandler<{ mode: "single" }> = (
* triggerDate,
* modifiers,
* e
* ) => {
* console.log("Selected date:", triggerDate);
* };
*/
export type SelectHandler<

@@ -50,0 +75,0 @@ T extends { mode?: Mode | undefined; required?: boolean | undefined }

107

src/types/shared.ts

@@ -33,5 +33,5 @@ import type { CSSProperties } from "react";

*
* - `single`: use DayPicker to select single days.
* - `multiple`: allow selecting multiple days.
* - `range`: use DayPicker to select a range of days.
* - `single`: Select a single day.
* - `multiple`: Select multiple days.
* - `range`: Select a range of days.
*

@@ -43,3 +43,3 @@ * @see https://daypicker.dev/docs/selection-modes

/**
* The components that can be changed using the `components` prop.
* The components that can be customized using the `components` prop.
*

@@ -102,9 +102,9 @@ * @see https://daypicker.dev/guides/custom-components

WeekNumberHeader: typeof components.WeekNumberHeader;
/** Render the dropdown with the months. */
/** Render the dropdown for selecting months. */
MonthsDropdown: typeof components.MonthsDropdown;
/** Render the dropdown with the years. */
/** Render the dropdown for selecting years. */
YearsDropdown: typeof components.YearsDropdown;
};
/** Represent a map of formatters used to render localized content. */
/** Represents a map of formatters used to render localized content. */
export type Formatters = {

@@ -120,2 +120,4 @@ /** Format the caption of a month grid. */

* @deprecated Use {@link Formatters.formatCaption} instead.
*
* **Note:** This formatter will be removed in version 10.0.0.
*/

@@ -138,3 +140,3 @@ formatMonthCaption: typeof formatMonthCaption;

/** Map of functions to translate ARIA labels for the relative elements. */
/** A map of functions to translate ARIA labels for various elements. */
export type Labels = {

@@ -166,7 +168,3 @@ /** The label for the navigation toolbar. */

labelWeekNumber: typeof labelWeekNumber;
/**
* Return the label for the column of the week number.
*
* @since 9.0.0
*/
/** The label for the column of week numbers. */
labelWeekNumberHeader: typeof labelWeekNumberHeader;

@@ -176,44 +174,10 @@ };

/**
* A value or a function that matches a specific day.
* A value or a function that matches specific days.
*
* @example
* // 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)
* // Match weekends and specific holidays
* const matcher: Matcher = [
* { dayOfWeek: [0, 6] }, // Weekends
* { from: new Date(2023, 11, 24), to: new Date(2023, 11, 26) } // Christmas
* ];
*
* // 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
* };
*/

@@ -232,6 +196,6 @@ export type Matcher =

/**
* Match a day falling after the specified date, with the date not included.
* Match a day falling after the specified date (exclusive).
*
* @example
* // Match days after the 2nd of February 2019
* // Match days after February 2, 2019
* const matcher: DateAfter = { after: new Date(2019, 1, 2) };

@@ -242,6 +206,6 @@ */

/**
* Match a day falling before the specified date, with the date not included.
* Match a day falling before the specified date (exclusive).
*
* @example
* // Match days before the 2nd of February 2019
* // Match days before February 2, 2019
* const matcher: DateBefore = { before: new Date(2019, 1, 2) };

@@ -252,7 +216,7 @@ */

/**
* An interval of dates. Differently from {@link DateRange}, the range ends here
* are not included.
* An interval of dates. Unlike {@link DateRange}, the range ends are not
* included.
*
* @example
* // Match the days between the 2nd and the 5th of February 2019
* // Match days between February 2 and February 5, 2019
* const matcher: DateInterval = {

@@ -266,7 +230,6 @@ * after: new Date(2019, 1, 2),

/**
* A range of dates. The range can be open. Differently from
* {@link DateInterval}, the range ends here are included.
* A range of dates. Unlike {@link DateInterval}, the range ends are included.
*
* @example
* // Match the days between the 2nd and the 5th of February 2019
* // Match days between February 2 and February 5, 2019
* const matcher: DateRange = {

@@ -280,4 +243,3 @@ * from: new Date(2019, 1, 2),

/**
* Match dates being one of the specified days of the week (`0-6`, where `0` is
* Sunday).
* Match days of the week (`0-6`, where `0` is Sunday).
*

@@ -345,18 +307,7 @@ * @example

*
* - Retrieve modifiers using the {@link OnSelectHandler} via the `onSelect` prop,
* or within custom components using the {@link useDayPicker} hook.
* - Includes built-in modifiers from {@link DayFlag} and {@link SelectionState}.
* - Add custom modifiers using the `modifiers` prop.
*
* @example
* const modifiers: Modifiers = {
* today: false, // the day is not today
* selected: true, // the day is selected
* disabled: false, // the day is not disabled
* outside: false, // the day is not outside the month
* focused: false, // the day is not focused
*
* weekend: false // custom modifier example for matching a weekend
* booked: true // custom modifier example for matching a booked day
* available: false // custom modifier example for matching an available day
* today: true, // The day is today
* selected: false, // The day is not selected
* weekend: true // Custom modifier for weekends
* };

@@ -363,0 +314,0 @@ *

34

src/UI.ts

@@ -6,7 +6,6 @@ import { CSSProperties } from "react";

/**
* The UI elements composing DayPicker. These elements are mapped to
* {@link CustomComponents}, the {@link ClassNames} and the {@link Styles} used by
* DayPicker.
* Enum representing the UI elements composing DayPicker. These elements are
* mapped to {@link CustomComponents}, {@link ClassNames}, and {@link Styles}.
*
* Some of these elements are extended by flags and modifiers.
* Some elements are extended by flags and modifiers.
*/

@@ -75,3 +74,3 @@ export enum UI {

/** The flags for the {@link UI.Day}. */
/** Enum representing flags for the {@link UI.Day} element. */
export enum DayFlag {

@@ -91,4 +90,4 @@ /** The day is disabled. */

/**
* The state that can be applied to the {@link UI.Day} element when in selection
* mode.
* Enum representing selection states that can be applied to the {@link UI.Day}
* element in selection mode.
*/

@@ -106,3 +105,2 @@ export enum SelectionState {

/** CSS classes used for animating months and captions. */
/**

@@ -132,21 +130,11 @@ * Enum representing different animation states for transitioning between

/**
* Deprecated UI elements and flags.
* Deprecated UI elements and flags from previous versions of DayPicker.
*
* These elements were used in previous version of DayPicker and are kept here
* to help the transition to the new {@link UI | UI elements}.
* These elements are kept for backward compatibility and to assist in
* transitioning to the new {@link UI} elements.
*
* ```diff
* <DayPicker classNames={{
* - cell: "my-cell",
* + day: "my-cell",
* - day: "my-day",
* + day_button: "my-day",
* - day_disabled: "my-day_disabled",
* + disabled: "my-day_disabled",
* // etc.
* }}/>
* ```
*
* @deprecated
* @since 9.0.1
* @template T - The type of the deprecated UI element (e.g., CSS class or
* style).
* @see https://daypicker.dev/upgrading

@@ -153,0 +141,0 @@ * @see https://daypicker.dev/docs/styling

12

src/useAnimation.ts

@@ -28,3 +28,13 @@ import React, { useLayoutEffect, useRef } from "react";

/** @private */
/**
* Handles animations for transitioning between months in the DayPicker
* component.
*
* @private
* @param rootElRef - A reference to the root element of the DayPicker
* component.
* @param enabled - Whether animations are enabled.
* @param options - Configuration options for the animation, including class
* names, months, focused day, and the date utility library.
*/
export function useAnimation(

@@ -31,0 +41,0 @@ rootElRef: React.RefObject<HTMLDivElement | null>,

10

src/useCalendar.ts

@@ -68,3 +68,11 @@ import { useEffect } from "react";

/** @private */
/**
* Provides the calendar object to work with the calendar in custom components.
*
* @private
* @param props - The DayPicker props related to calendar configuration.
* @param dateLib - The date utility library instance.
* @returns The calendar object containing displayed days, weeks, months, and
* navigation methods.
*/
export function useCalendar(

@@ -71,0 +79,0 @@ props: Pick<

10

src/useDayPicker.ts

@@ -72,11 +72,9 @@ import { createContext, useContext } from "react";

/**
* Returns the context to work with `<DayPicker />` inside custom components.
* Provides access to the DayPicker context, which includes properties and
* methods to interact with the DayPicker component. This hook must be used
* within a custom component.
*
* This hook provides access to the DayPicker context, which includes various
* properties and methods to interact with the DayPicker component. It must be
* used within a custom component.
*
* @template T - Use this type to refine the returned context type with a
* specific selection mode.
* @returns {DayPickerContext<T>} The context to work with DayPicker.
* @returns The context to work with DayPicker.
* @throws {Error} If the hook is used outside of a DayPicker provider.

@@ -83,0 +81,0 @@ * @group Hooks

15

src/useFocus.ts

@@ -31,3 +31,16 @@ import { useState } from "react";

/** @private */
/**
* Manages focus behavior for the DayPicker component, including setting,
* moving, and blurring focus on calendar days.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param calendar - The calendar object containing the displayed days and
* months.
* @param getModifiers - A function to retrieve modifiers for a given day.
* @param isSelected - A function to check if a date is selected.
* @param dateLib - The date utility library instance.
* @returns An object containing focus-related methods and the currently focused
* day.
*/
export function useFocus<T extends DayPickerProps>(

@@ -34,0 +47,0 @@ props: T,

10

src/useSelection.ts

@@ -8,2 +8,12 @@ import { type DateLib } from "./classes/DateLib.js";

/**
* Determines the appropriate selection hook to use based on the selection mode
* and returns the corresponding selection object.
*
* @template T - The type of DayPicker props.
* @param props - The DayPicker props.
* @param dateLib - The date utility library instance.
* @returns The selection object for the specified mode, or `undefined` if no
* mode is set.
*/
export function useSelection<T extends DayPickerProps>(

@@ -10,0 +20,0 @@ props: T,

16

src/utils/addToRange.ts

@@ -5,13 +5,16 @@ import { defaultDateLib, type DateLib } from "../classes/DateLib.js";

/**
* Add a day to an existing range.
* Adds a date to an existing range, considering constraints like minimum and
* maximum range size.
*
* The returned range takes in account the `undefined` values and if the added
* day is already present in the range.
*
* @param date - The date to add to the range.
* @param initialRange - The initial range to which the date will be added.
* @param min - The minimum number of days in the range.
* @param max - The maximum number of days in the range.
* @param required - Whether the range must always include at least one date.
* @param dateLib - The date utility library instance.
* @returns The updated date range, or `undefined` if the range is cleared.
* @group Utilities
*/
export function addToRange(
/** The date to add to the range. */
date: Date,
/** The range where to add `date`. */
initialRange: DateRange | undefined,

@@ -21,3 +24,2 @@ min = 0,

required = false,
/** @ignore */
dateLib: DateLib = defaultDateLib

@@ -24,0 +26,0 @@ ): DateRange | undefined {

20

src/utils/dateMatchModifiers.ts

@@ -15,18 +15,8 @@ import { type DateLib, defaultDateLib } from "../classes/DateLib.js";

/**
* Returns whether a day matches against at least one of the given
* {@link Matcher}.
* Checks if a given date matches at least one of the specified {@link Matcher}.
*
* ```tsx
* const date = 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)
* };
* dateMatchModifiers(date, [matcher1, matcher2]); // true, since day is in the matcher1 range.
* ```
*
* @param date - The date to check.
* @param matchers - The matchers to check against.
* @param dateLib - The date utility library instance.
* @returns `true` if the date matches any of the matchers, otherwise `false`.
* @group Utilities

@@ -33,0 +23,0 @@ */

16

src/utils/rangeContainsDayOfWeek.ts
import { defaultDateLib, type DateLib } from "../classes/DateLib.js";
/**
* Returns whether a date range contains one or more days of the week.
* Checks if a date range contains one or more specified days of the week.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2024, 8, 1), // Sunday
* to: new Date(2024, 8, 6) // Thursday
* };
* rangeContainsDayOfWeek(date, 1); // true: contains range contains Monday
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param dayOfWeek - The day(s) of the week to check for (`0-6`, where `0` is
* Sunday).
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains the specified day(s) of the week,
* otherwise `false`.
* @group Utilities

@@ -16,0 +14,0 @@ */

19

src/utils/rangeContainsModifiers.ts

@@ -18,18 +18,9 @@ import { defaultDateLib, type DateLib } from "../classes/DateLib.js";

/**
* Returns whether a range contains dates that match the given modifiers.
* Checks if a date range contains dates that match the given modifiers.
*
* ```tsx
* const range: DateRange = {
* from: new Date(2021, 12, 21),
* to: new Date(2021, 12, 30)
* };
* const matcher1: Date = new Date(2021, 12, 21);
* const matcher2: DateRange = {
* from: new Date(2022, 5, 1),
* to: new Date(2022, 5, 23)
* };
* rangeContainsModifiers(range, [matcher1, matcher2]); // true, since matcher1 is in the date.
* ```
*
* @since 9.2.2
* @param range - The date range to check.
* @param modifiers - The modifiers to match against.
* @param dateLib - The date utility library instance.
* @returns `true` if the range contains matching dates, otherwise `false`.
* @group Utilities

@@ -36,0 +27,0 @@ */

8

src/utils/rangeIncludesDate.ts

@@ -5,5 +5,10 @@ import { defaultDateLib } from "../classes/index.js";

/**
* Determines whether a given date is inside a specified date range.
* Checks if a given date is within a specified date range.
*
* @since 9.0.0
* @param range - The date range to check against.
* @param date - The date to check.
* @param excludeEnds - If `true`, the range's start and end dates are excluded.
* @param dateLib - The date utility library instance.
* @returns `true` if the date is within the range, otherwise `false`.
* @group Utilities

@@ -14,3 +19,2 @@ */

date: Date,
/** If `true`, the ends of the range are excluded. */
excludeEnds = false,

@@ -17,0 +21,0 @@ dateLib = defaultDateLib

6

src/utils/rangeOverlaps.ts

@@ -6,5 +6,9 @@ import { defaultDateLib } from "../classes/index.js";

/**
* Determines whether a given range overlaps with another range.
* Determines if two date ranges overlap.
*
* @since 9.2.2
* @param rangeLeft - The first date range.
* @param rangeRight - The second date range.
* @param dateLib - The date utility library instance.
* @returns `true` if the ranges overlap, otherwise `false`.
* @group Utilities

@@ -11,0 +15,0 @@ */

25

src/utils/typeguards.ts

@@ -11,4 +11,6 @@ import type { DateLib } from "../classes/DateLib.js";

/**
* Returns true if `matcher` is of type {@link DateInterval}.
* Checks if the given value is of type {@link DateInterval}.
*
* @param matcher - The value to check.
* @returns `true` if the value is a {@link DateInterval}, otherwise `false`.
* @group Utilities

@@ -26,4 +28,6 @@ */

/**
* Returns true if `value` is a {@link DateRange} type.
* Checks if the given value is of type {@link DateRange}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateRange}, otherwise `false`.
* @group Utilities

@@ -36,4 +40,6 @@ */

/**
* Returns true if `value` is of type {@link DateAfter}.
* Checks if the given value is of type {@link DateAfter}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateAfter}, otherwise `false`.
* @group Utilities

@@ -46,4 +52,6 @@ */

/**
* Returns true if `value` is of type {@link DateBefore}.
* Checks if the given value is of type {@link DateBefore}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DateBefore}, otherwise `false`.
* @group Utilities

@@ -56,4 +64,6 @@ */

/**
* Returns true if `value` is a {@link DayOfWeek} type.
* Checks if the given value is of type {@link DayOfWeek}.
*
* @param value - The value to check.
* @returns `true` if the value is a {@link DayOfWeek}, otherwise `false`.
* @group Utilities

@@ -66,5 +76,8 @@ */

/**
* Returns true if `value` is an array of valid dates.
* Checks if the given value is an array of valid dates.
*
* @private
* @param value - The value to check.
* @param dateLib - The date utility library instance.
* @returns `true` if the value is an array of valid dates, otherwise `false`.
*/

@@ -71,0 +84,0 @@ export function isDatesArray(

dist/cjs/useGetModifiers.d.ts
dist/cjs/useGetModifiers.js
dist/cjs/useGetModifiers.js.map
dist/esm/useGetModifiers.d.ts
dist/esm/useGetModifiers.js
dist/esm/useGetModifiers.js.map
src/helpers/getPossibleFocusDate.test.ts
src/useGetModifiers.test.tsx
src/useGetModifiers.tsx
dist/cjs/classes/CalendarDay.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/classes/CalendarMonth.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/classes/CalendarWeek.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/classes/DateLib.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/components/Dropdown.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/components/Nav.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/components/Week.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/DayPicker.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/formatters/formatCaption.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/formatters/formatDay.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/formatters/formatMonthDropdown.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/formatters/formatWeekdayName.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/formatters/formatWeekNumber.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/formatters/formatWeekNumberHeader.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/formatters/formatYearDropdown.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/calculateFocusTarget.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/endOfBroadcastWeek.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getBroadcastWeeksInMonth.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getClassNamesForModifiers.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getComponents.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getDataAttributes.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getDates.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getDays.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getDefaultClassNames.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getDisplayMonths.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getFocusableDate.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getFormatters.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getInitialMonth.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getLabels.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getMonthOptions.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getMonths.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getNavMonth.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getNextFocus.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getNextMonth.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getPreviousMonth.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getStyleForModifiers.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getWeekdays.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getWeeks.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/getYearOptions.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/startOfBroadcastWeek.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/helpers/useControlledValue.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelDayButton.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelGrid.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelGridcell.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelMonthDropdown.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelNav.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelNext.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelPrevious.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelWeekday.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelWeekNumber.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelWeekNumberHeader.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/labels/labelYearDropdown.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/persian.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/selection/useMulti.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/selection/useRange.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/selection/useSingle.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/UI.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/useAnimation.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/useCalendar.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/useDayPicker.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/useFocus.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/useSelection.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utc.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/addToRange.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/dateMatchModifiers.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/rangeContainsDayOfWeek.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/rangeContainsModifiers.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/rangeIncludesDate.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/rangeOverlaps.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/typeguards.js.map

Sorry, the diff of this file is not supported yet

dist/esm/classes/CalendarDay.js.map

Sorry, the diff of this file is not supported yet

dist/esm/classes/CalendarMonth.js.map

Sorry, the diff of this file is not supported yet

dist/esm/classes/CalendarWeek.js.map

Sorry, the diff of this file is not supported yet

dist/esm/classes/DateLib.js.map

Sorry, the diff of this file is not supported yet

dist/esm/components/Dropdown.js.map

Sorry, the diff of this file is not supported yet

dist/esm/components/Nav.js.map

Sorry, the diff of this file is not supported yet

dist/esm/components/Week.js.map

Sorry, the diff of this file is not supported yet

dist/esm/DayPicker.js.map

Sorry, the diff of this file is not supported yet

dist/esm/formatters/formatCaption.js.map

Sorry, the diff of this file is not supported yet

dist/esm/formatters/formatDay.js.map

Sorry, the diff of this file is not supported yet

dist/esm/formatters/formatMonthDropdown.js.map

Sorry, the diff of this file is not supported yet

dist/esm/formatters/formatWeekdayName.js.map

Sorry, the diff of this file is not supported yet

dist/esm/formatters/formatWeekNumber.js.map

Sorry, the diff of this file is not supported yet

dist/esm/formatters/formatWeekNumberHeader.js.map

Sorry, the diff of this file is not supported yet

dist/esm/formatters/formatYearDropdown.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/calculateFocusTarget.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/endOfBroadcastWeek.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getBroadcastWeeksInMonth.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getClassNamesForModifiers.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getComponents.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getDataAttributes.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getDates.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getDays.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getDefaultClassNames.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getDisplayMonths.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getFocusableDate.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getFormatters.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getInitialMonth.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getLabels.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getMonthOptions.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getMonths.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getNavMonth.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getNextFocus.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getNextMonth.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getPreviousMonth.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getStyleForModifiers.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getWeekdays.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getWeeks.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/getYearOptions.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/startOfBroadcastWeek.js.map

Sorry, the diff of this file is not supported yet

dist/esm/helpers/useControlledValue.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelDayButton.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelGrid.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelGridcell.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelMonthDropdown.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelNav.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelNext.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelPrevious.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelWeekday.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelWeekNumber.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelWeekNumberHeader.js.map

Sorry, the diff of this file is not supported yet

dist/esm/labels/labelYearDropdown.js.map

Sorry, the diff of this file is not supported yet

dist/esm/persian.js.map

Sorry, the diff of this file is not supported yet

dist/esm/selection/useMulti.js.map

Sorry, the diff of this file is not supported yet

dist/esm/selection/useRange.js.map

Sorry, the diff of this file is not supported yet

dist/esm/selection/useSingle.js.map

Sorry, the diff of this file is not supported yet

dist/esm/UI.js.map

Sorry, the diff of this file is not supported yet

dist/esm/useAnimation.js.map

Sorry, the diff of this file is not supported yet

dist/esm/useCalendar.js.map

Sorry, the diff of this file is not supported yet

dist/esm/useDayPicker.js.map

Sorry, the diff of this file is not supported yet

dist/esm/useFocus.js.map

Sorry, the diff of this file is not supported yet

dist/esm/useSelection.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utc.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/addToRange.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/dateMatchModifiers.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/rangeContainsDayOfWeek.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/rangeContainsModifiers.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/rangeIncludesDate.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/rangeOverlaps.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/typeguards.js.map

Sorry, the diff of this file is not supported yet

src/components/Day.tsx

Sorry, the diff of this file is not supported yet

src/components/DayButton.tsx

Sorry, the diff of this file is not supported yet

src/components/Dropdown.tsx

Sorry, the diff of this file is not supported yet

src/components/DropdownNav.tsx

Sorry, the diff of this file is not supported yet

src/components/Footer.tsx

Sorry, the diff of this file is not supported yet

src/components/Month.tsx

Sorry, the diff of this file is not supported yet

src/components/MonthCaption.tsx

Sorry, the diff of this file is not supported yet

src/components/MonthGrid.tsx

Sorry, the diff of this file is not supported yet

src/components/Months.tsx

Sorry, the diff of this file is not supported yet

src/components/MonthsDropdown.tsx

Sorry, the diff of this file is not supported yet

src/components/Nav.tsx

Sorry, the diff of this file is not supported yet

src/components/NextMonthButton.tsx

Sorry, the diff of this file is not supported yet

src/components/Option.tsx

Sorry, the diff of this file is not supported yet

src/components/PreviousMonthButton.tsx

Sorry, the diff of this file is not supported yet

src/components/Root.tsx

Sorry, the diff of this file is not supported yet

src/components/Select.tsx

Sorry, the diff of this file is not supported yet

src/components/Week.tsx

Sorry, the diff of this file is not supported yet

src/components/Weekday.tsx

Sorry, the diff of this file is not supported yet

src/components/Weekdays.tsx

Sorry, the diff of this file is not supported yet

src/components/WeekNumber.tsx

Sorry, the diff of this file is not supported yet

src/components/WeekNumberHeader.tsx

Sorry, the diff of this file is not supported yet

src/components/Weeks.tsx

Sorry, the diff of this file is not supported yet

src/components/YearsDropdown.tsx

Sorry, the diff of this file is not supported yet

src/DayPicker.test.tsx

Sorry, the diff of this file is not supported yet

src/DayPicker.tsx

Sorry, the diff of this file is not supported yet

src/helpers/getDataAttributes.tsx

Sorry, the diff of this file is not supported yet

src/helpers/getNextFocus.tsx

Sorry, the diff of this file is not supported yet

src/persian.tsx

Sorry, the diff of this file is not supported yet

src/selection/useMulti.tsx

Sorry, the diff of this file is not supported yet

src/selection/useRange.tsx

Sorry, the diff of this file is not supported yet

src/selection/useSingle.tsx

Sorry, the diff of this file is not supported yet

src/style.css

Sorry, the diff of this file is not supported yet

src/style.module.css

Sorry, the diff of this file is not supported yet

src/utc.tsx

Sorry, the diff of this file is not supported yet