react-day-picker - npm Package Compare versions

Comparing version 9.0.0-rc.2 to 9.0.0-rc.3

dist/cjs/classes/CalendarDay.d.ts

@@ -1,2 +0,2 @@
-import type { DateLib } from "../types";
+import type { DateLib } from "../types/index.js";
 /**
@@ -11,3 +11,7 @@ * Represent the day displayed in the calendar.
     constructor(date: Date, displayMonth: Date, dateLib?: DateLib);
-    /** The utility functions to manipulate dates. */
+    /**
+     * The utility functions to manipulate dates.
+     *
+     * @private
+     */
     readonly dateLib: DateLib;
@@ -31,2 +35,4 @@ /**
     readonly date: Date;
+    /** A unique identifier for the day. */
+    readonly uid: string;
     /**
@@ -33,0 +39,0 @@ * Check if the day is the same as the given day: considering if it is in the

dist/cjs/classes/CalendarDay.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CalendarDay = void 0;
-const lib_1 = require("../lib");
+const index_js_1 = require("../lib/index.js");
 /**
@@ -13,3 +13,3 @@ * Represent the day displayed in the calendar.
 class CalendarDay {
-    constructor(date, displayMonth, dateLib = lib_1.dateLib) {
+    constructor(date, displayMonth, dateLib = index_js_1.dateLib) {
         this.date = date;
@@ -19,2 +19,6 @@ this.displayMonth = displayMonth;
         this.dateLib = dateLib;
+        const { format } = dateLib;
+        this.uid =
+            format(date, "yyyyMMdd") +
+                (this.outside ? `-` + format(displayMonth, "yyyyMMdd") : "");
     }
@@ -21,0 +25,0 @@ /**

dist/cjs/classes/CalendarMonth.d.ts

@@ -1,2 +0,2 @@
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarWeek } from "./CalendarWeek.js";
 /** Represent a month in a calendar year. Contains the weeks within the month. */
@@ -3,0 +3,0 @@ export declare class CalendarMonth {

dist/cjs/classes/CalendarWeek.d.ts

@@ -1,2 +0,2 @@
-import { CalendarDay } from "./CalendarDay";
+import { CalendarDay } from "./CalendarDay.js";
 /** Represent a week in a calendar month. */
@@ -3,0 +3,0 @@ export declare class CalendarWeek {

dist/cjs/classes/index.d.ts

@@ -1,3 +0,3 @@
-export * from "./CalendarDay";
-export * from "./CalendarMonth";
-export * from "./CalendarWeek";
+export * from "./CalendarDay.js";
+export * from "./CalendarMonth.js";
+export * from "./CalendarWeek.js";

dist/cjs/classes/index.js

@@ -17,5 +17,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./CalendarDay"), exports);
-__exportStar(require("./CalendarMonth"), exports);
-__exportStar(require("./CalendarWeek"), exports);
+__exportStar(require("./CalendarDay.js"), exports);
+__exportStar(require("./CalendarMonth.js"), exports);
+__exportStar(require("./CalendarWeek.js"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/components/Button.d.ts

@@ -1,2 +0,2 @@
-import React, { type ButtonHTMLAttributes } from "react";
+import React from "react";
 /**
@@ -10,3 +10,3 @@ * Render the button elements in the calendar.
  */
-export declare function Button(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+export declare function Button(props: JSX.IntrinsicElements["button"]): React.JSX.Element;
 export type ButtonProps = Parameters<typeof Button>[0];

dist/cjs/components/Button.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+exports.Button = Button;
 const react_1 = __importDefault(require("react"));
@@ -20,3 +20,2 @@ /**
 }
-exports.Button = Button;
 //# sourceMappingURL=Button.js.map

dist/cjs/components/Chevron.d.ts

@@ -8,7 +8,16 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function Chevron(props: {
+    className?: string;
+    /**
+     * The size of the chevron.
+     *
+     * @defaultValue 24
+     */
     size?: number;
+    /** Set to `true` to disable the chevron. */
+    disabled?: boolean;
+    /** The orientation of the chevron. */
     orientation?: "up" | "down" | "left" | "right";
 }): React.JSX.Element;

dist/cjs/components/Chevron.js

@@ -6,6 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chevron = void 0;
+exports.Chevron = Chevron;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
 /**
@@ -17,14 +15,7 @@ * Render the chevron icon used in the navigation buttons and dropdowns.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function Chevron(props) {
-    const { size = 24, orientation = "left" } = props;
-    const { classNames, disableNavigation } = (0, contexts_1.useProps)();
-    const svgClassName = [
-        classNames[UI_1.UI.Chevron],
-        disableNavigation ? classNames[UI_1.ChevronFlag.disabled] : ""
-    ]
-        .join(" ")
-        .trim();
-    return (react_1.default.createElement("svg", { className: svgClassName, width: size, height: size, viewBox: "0 0 24 24" },
+    const { size = 24, orientation = "left", className } = props;
+    return (react_1.default.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24" },
         orientation === "up" && (react_1.default.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" })),
@@ -35,3 +26,2 @@ orientation === "down" && (react_1.default.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" })),
 }
-exports.Chevron = Chevron;
 //# sourceMappingURL=Chevron.js.map

dist/cjs/components/custom-components.d.ts

@@ -1,19 +0,22 @@
-export * from "./Button";
-export * from "./Chevron";
-export * from "./Day";
-export * from "./DayDate";
-export * from "./Dropdown";
-export * from "./DropdownNav";
-export * from "./Footer";
-export * from "./Month";
-export * from "./MonthCaption";
-export * from "./Months";
-export * from "./MonthsDropdown";
-export * from "./Nav";
-export * from "./Option";
-export * from "./Select";
-export * from "./Week";
-export * from "./Weekday";
-export * from "./Weekdays";
-export * from "./WeekNumber";
-export * from "./YearsDropdown";
+export * from "./Button.js";
+export * from "./Chevron.js";
+export * from "./CaptionLabel.js";
+export * from "./Day.js";
+export * from "./DayButton.js";
+export * from "./Dropdown.js";
+export * from "./DropdownNav.js";
+export * from "./Footer.js";
+export * from "./Month.js";
+export * from "./MonthCaption.js";
+export * from "./MonthGrid.js";
+export * from "./Months.js";
+export * from "./Nav.js";
+export * from "./Option.js";
+export * from "./Root.js";
+export * from "./Select.js";
+export * from "./Weeks.js";
+export * from "./Week.js";
+export * from "./Weekday.js";
+export * from "./Weekdays.js";
+export * from "./WeekNumber.js";
+export * from "./WeekNumberHeader.js";

dist/cjs/components/custom-components.js

@@ -17,21 +17,24 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Button"), exports);
-__exportStar(require("./Chevron"), exports);
-__exportStar(require("./Day"), exports);
-__exportStar(require("./DayDate"), exports);
-__exportStar(require("./Dropdown"), exports);
-__exportStar(require("./DropdownNav"), exports);
-__exportStar(require("./Footer"), exports);
-__exportStar(require("./Month"), exports);
-__exportStar(require("./MonthCaption"), exports);
-__exportStar(require("./Months"), exports);
-__exportStar(require("./MonthsDropdown"), exports);
-__exportStar(require("./Nav"), exports);
-__exportStar(require("./Option"), exports);
-__exportStar(require("./Select"), exports);
-__exportStar(require("./Week"), exports);
-__exportStar(require("./Weekday"), exports);
-__exportStar(require("./Weekdays"), exports);
-__exportStar(require("./WeekNumber"), exports);
-__exportStar(require("./YearsDropdown"), exports);
+__exportStar(require("./Button.js"), exports);
+__exportStar(require("./Chevron.js"), exports);
+__exportStar(require("./CaptionLabel.js"), exports);
+__exportStar(require("./Day.js"), exports);
+__exportStar(require("./DayButton.js"), exports);
+__exportStar(require("./Dropdown.js"), exports);
+__exportStar(require("./DropdownNav.js"), exports);
+__exportStar(require("./Footer.js"), exports);
+__exportStar(require("./Month.js"), exports);
+__exportStar(require("./MonthCaption.js"), exports);
+__exportStar(require("./MonthGrid.js"), exports);
+__exportStar(require("./Months.js"), exports);
+__exportStar(require("./Nav.js"), exports);
+__exportStar(require("./Option.js"), exports);
+__exportStar(require("./Root.js"), exports);
+__exportStar(require("./Select.js"), exports);
+__exportStar(require("./Weeks.js"), exports);
+__exportStar(require("./Week.js"), exports);
+__exportStar(require("./Weekday.js"), exports);
+__exportStar(require("./Weekdays.js"), exports);
+__exportStar(require("./WeekNumber.js"), exports);
+__exportStar(require("./WeekNumberHeader.js"), exports);
 //# sourceMappingURL=custom-components.js.map

dist/cjs/components/Day.d.ts

 import React from "react";
-import type { ReactNode } from "react";
-import type { CalendarDay } from "../classes";
-import type { Modifiers } from "../types";
+import type { CalendarDay } from "../classes/index.js";
+import type { Modifiers } from "../types/index.js";
 /**
@@ -19,5 +18,3 @@ * Render the gridcell of a day in the calendar and handle the interaction and
     modifiers: Modifiers;
-    children?: ReactNode;
-    rootProps: Pick<JSX.IntrinsicElements["div"], "className" | "style" | "tabIndex" | "aria-colindex" | "aria-disabled" | "aria-hidden" | "aria-label" | "aria-selected" | "onClick" | "onBlur" | "onFocus" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "ref" | "role">;
-}): React.JSX.Element;
+} & JSX.IntrinsicElements["td"]): React.JSX.Element;
 export type DayProps = Parameters<typeof Day>[0];

dist/cjs/components/Day.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Day = void 0;
+exports.Day = Day;
 const react_1 = __importDefault(require("react"));
@@ -21,5 +21,5 @@ /**
 function Day(props) {
-    return react_1.default.createElement("div", { ...props.rootProps }, props.children);
+    const { day, modifiers, ...tdProps } = props;
+    return react_1.default.createElement("td", { ...tdProps });
 }
-exports.Day = Day;
 //# sourceMappingURL=Day.js.map

dist/cjs/components/Dropdown.d.ts

@@ -1,2 +0,4 @@
-import React, { type SelectHTMLAttributes } from "react";
+import React from "react";
+import { UI } from "../UI.js";
+import type { ClassNames, CustomComponents } from "../types/index.js";
 /** An option to use in the dropdown. Maps to the `<option>` HTML element. */
@@ -20,8 +22,9 @@ export type DropdownOption = {
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function Dropdown(props: {
+    components: Pick<Required<CustomComponents>, "Select" | "Option" | "Chevron">;
+    classNames: Pick<ClassNames, UI.DropdownRoot | UI.Dropdown | UI.CaptionLabel | UI.Chevron>;
     options?: DropdownOption[] | undefined;
-    rootClassName?: string;
-} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;
+} & Omit<JSX.IntrinsicElements["select"], "children">): React.JSX.Element;
 export type DropdownProps = Parameters<typeof Dropdown>[0];

dist/cjs/components/Dropdown.js

@@ -6,9 +6,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = void 0;
+exports.Dropdown = Dropdown;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
-const Chevron_1 = require("./Chevron");
-const Option_1 = require("./Option");
-const Select_1 = require("./Select");
+const UI_js_1 = require("../UI.js");
 /**
@@ -20,20 +16,15 @@ * Render a dropdown component to use in the navigation bar.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function Dropdown(props) {
-    const { options, rootClassName, className, ...selectProps } = props;
-    const { classNames, components } = (0, contexts_1.useProps)();
-    const cssClassRoot = [classNames[UI_1.UI.DropdownRoot], rootClassName].join(" ");
-    const cssClassSelect = [classNames[UI_1.UI.Dropdown], className].join(" ");
-    const Select = components?.Select ?? Select_1.Select;
-    const Option = components?.Option ?? Option_1.Option;
-    const Chevron = components?.Chevron ?? Chevron_1.Chevron;
+    const { options, className, components, classNames, ...selectProps } = props;
+    const cssClassRoot = [classNames[UI_js_1.UI.DropdownRoot]].join(" ");
+    const cssClassSelect = [classNames[UI_js_1.UI.Dropdown], className].join(" ");
     const selectedOption = options?.find(({ value }) => value === selectProps.value);
     return (react_1.default.createElement("span", { className: cssClassRoot },
-        react_1.default.createElement(Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (react_1.default.createElement(Option, { key: value, value: value, disabled: disabled }, label)))),
-        react_1.default.createElement("span", { className: classNames[UI_1.UI.CaptionLabel], "aria-hidden": true },
+        react_1.default.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (react_1.default.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))),
+        react_1.default.createElement("span", { className: classNames[UI_js_1.UI.CaptionLabel], "aria-hidden": true },
             selectedOption?.label,
-            react_1.default.createElement(Chevron, { orientation: "down", size: 18 }))));
+            react_1.default.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI_js_1.UI.Chevron] }))));
 }
-exports.Dropdown = Dropdown;
 //# sourceMappingURL=Dropdown.js.map

dist/cjs/components/DropdownNav.d.ts

 import React from "react";
-import type { CalendarMonth } from "../classes";
 /**
- * Render the dropdowns to navigate between months.
+ * Render the the navigation dropdowns.
  *
@@ -9,14 +8,5 @@ * Use the `components` prop to swap this component with a custom one.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function DropdownNav(props: {
-    /** The month where the dropdown navigation is displayed. */
-    month: CalendarMonth;
-    /** Whether the user can change the month. */
-    showMonths?: boolean;
-    /** Whether the user can change the year. */
-    showYears?: boolean;
-    /** The index where this month is displayed. */
-    index: number;
-}): React.JSX.Element;
+export declare function DropdownNav(props: JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type DropdownNavProps = Parameters<typeof DropdownNav>[0];

dist/cjs/components/DropdownNav.js

@@ -6,10 +6,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownNav = void 0;
+exports.DropdownNav = DropdownNav;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
-const MonthsDropdown_1 = require("./MonthsDropdown");
-const YearsDropdown_1 = require("./YearsDropdown");
 /**
- * Render the dropdowns to navigate between months.
+ * Render the the navigation dropdowns.
  *
@@ -19,11 +15,7 @@ * Use the `components` prop to swap this component with a custom one.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function DropdownNav(props) {
-    const { classNames, styles, formatters: { formatMonthDropdown, formatYearDropdown } } = (0, contexts_1.useProps)();
-    return (react_1.default.createElement("div", { className: classNames[UI_1.UI.DropdownNav], style: styles?.[UI_1.UI.DropdownNav] },
-        props.showMonths ? (react_1.default.createElement(MonthsDropdown_1.MonthsDropdown, { month: props.month })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(props.month.date.getMonth()))),
-        props.showYears ? (react_1.default.createElement(YearsDropdown_1.YearsDropdown, { month: props.month })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown(props.month.date.getFullYear())))));
+    return react_1.default.createElement("div", { ...props });
 }
-exports.DropdownNav = DropdownNav;
 //# sourceMappingURL=DropdownNav.js.map

dist/cjs/components/Footer.d.ts

@@ -1,2 +0,2 @@
-import React, { type HTMLProps } from "react";
+import React from "react";
 /**
@@ -8,5 +8,5 @@ * Component wrapping the footer.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Footer(props: Pick<HTMLProps<HTMLElement>, "children" | "className" | "style">): React.JSX.Element;
+export declare function Footer(props: JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type FooterProps = Parameters<typeof Footer>[0];

dist/cjs/components/Footer.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
+exports.Footer = Footer;
 const react_1 = __importDefault(require("react"));
@@ -15,8 +15,7 @@ /**
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function Footer(props) {
-    return react_1.default.createElement("div", { ...props }, props.children);
+    return react_1.default.createElement("div", { ...props });
 }
-exports.Footer = Footer;
 //# sourceMappingURL=Footer.js.map

dist/cjs/components/Month.d.ts

 import React from "react";
-import type { CalendarMonth } from "../classes/CalendarMonth";
+import type { CalendarMonth } from "../classes/CalendarMonth.js";
 /**
@@ -10,10 +10,10 @@ * Render the grid with the weekday header row and the weeks for the given
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function Month(props: {
     /** The month where the grid is displayed. */
-    month: CalendarMonth;
+    calendarMonth: CalendarMonth;
     /** The index where this month is displayed. */
-    index: number;
-}): React.JSX.Element;
+    displayIndex: number;
+} & JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type MonthProps = Parameters<typeof Month>[0];

dist/cjs/components/Month.js

@@ -6,9 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Month = void 0;
+exports.Month = Month;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
-const MonthCaption_1 = require("./MonthCaption");
-const Week_1 = require("./Week");
-const Weekdays_1 = require("./Weekdays");
 /**
@@ -21,19 +16,8 @@ * Render the grid with the weekday header row and the weeks for the given
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function Month(props) {
-    const { id, mode, hideWeekdayRow, components, classNames, styles } = (0, contexts_1.useProps)();
-    const reactId = react_1.default.useId();
-    const captionId = id ? `${id}-caption-${props.index}` : reactId;
-    const gridId = id ? `${id}-grid-${props.index}` : reactId;
-    const Weekdays = components?.Weekdays ?? Weekdays_1.Weekdays;
-    const MonthCaption = components?.MonthCaption ?? MonthCaption_1.MonthCaption;
-    const Week = components?.Week ?? Week_1.Week;
-    return (react_1.default.createElement("div", { className: classNames[UI_1.UI.MonthWrapper], style: styles?.[UI_1.UI.MonthWrapper] },
-        react_1.default.createElement(MonthCaption, { id: captionId, month: props.month, index: props.index }),
-        react_1.default.createElement("div", { id: gridId, role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-labelledby": captionId, className: classNames[UI_1.UI.Month], style: styles?.[UI_1.UI.Month] },
-            react_1.default.createElement(Weekdays, null),
-            react_1.default.createElement("div", { role: "rowgroup", className: classNames[UI_1.UI.Weeks], style: styles?.[UI_1.UI.Weeks] }, props.month.weeks.map((week, i) => (react_1.default.createElement(Week, { key: week.weekNumber, week: week, "aria-rowindex": i + (hideWeekdayRow ? 1 : 2) })))))));
+    const { calendarMonth, displayIndex, ...divProps } = props;
+    return react_1.default.createElement("div", { ...divProps }, props.children);
 }
-exports.Month = Month;
 //# sourceMappingURL=Month.js.map

dist/cjs/components/MonthCaption.d.ts

 import React from "react";
-import type { CalendarMonth } from "../classes";
+import type { CalendarMonth } from "../classes/index.js";
 /**
@@ -9,12 +9,10 @@ * Render the caption of a month in the calendar.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function MonthCaption(props: {
     /** The month where the grid is displayed. */
-    month: CalendarMonth;
-    /** Used for the aria-label. */
-    id: string;
+    calendarMonth: CalendarMonth;
     /** The index where this month is displayed. */
-    index: number;
-}): React.JSX.Element;
+    displayIndex: number;
+} & JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type MonthCaptionProps = Parameters<typeof MonthCaption>[0];

dist/cjs/components/MonthCaption.js

@@ -6,7 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthCaption = void 0;
+exports.MonthCaption = MonthCaption;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
-const DropdownNav_1 = require("./DropdownNav");
 /**
@@ -18,9 +15,8 @@ * Render the caption of a month in the calendar.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function MonthCaption(props) {
-    const { classNames, captionLayout, dateLib, formatters: { formatCaption }, labels: { labelCaption }, locale, styles } = (0, contexts_1.useProps)();
-    return (react_1.default.createElement("div", { id: props.id, className: classNames[UI_1.UI.MonthCaption], style: styles?.[UI_1.UI.MonthCaption] }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(DropdownNav_1.DropdownNav, { month: props.month, index: props.index, showMonths: captionLayout === "dropdown" || captionLayout === "dropdown-months", showYears: captionLayout === "dropdown" || captionLayout === "dropdown-years" })) : (react_1.default.createElement("span", { className: classNames[UI_1.UI.CaptionLabel], role: "status", "aria-live": "polite", "aria-label": labelCaption(props.month.date, { locale }, dateLib) ?? undefined }, formatCaption(props.month.date, { locale }, dateLib)))));
+    const { calendarMonth, displayIndex, ...divProps } = props;
+    return react_1.default.createElement("div", { ...divProps });
 }
-exports.MonthCaption = MonthCaption;
 //# sourceMappingURL=MonthCaption.js.map

dist/cjs/components/Months.d.ts

 import React from "react";
-import type { HTMLProps } from "react";
 /**
  * Component wrapping the month grids.
  *
- * Use the `components` prop to swap this component with a custom one.
- *
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Months(props: Pick<HTMLProps<HTMLElement>, "children" | "className" | "style">): React.JSX.Element;
+export declare function Months(props: JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type MonthsProps = Parameters<typeof Months>[0];

dist/cjs/components/Months.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Months = void 0;
+exports.Months = Months;
 const react_1 = __importDefault(require("react"));
@@ -12,11 +12,8 @@ /**
  *
- * Use the `components` prop to swap this component with a custom one.
- *
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function Months(props) {
-    return react_1.default.createElement("div", { ...props }, props.children);
+    return react_1.default.createElement("div", { ...props });
 }
-exports.Months = Months;
 //# sourceMappingURL=Months.js.map

dist/cjs/components/Nav.d.ts

 import React from "react";
 /**
- * Render the navigation buttons to change the month.
+ * Render the toolbar with the navigation button.
  *
@@ -8,4 +8,5 @@ * Use the `components` prop to swap this component with a custom one.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Nav(): React.JSX.Element;
+export declare function Nav(props: JSX.IntrinsicElements["div"]): React.JSX.Element;
+export type NavProps = Parameters<typeof Nav>[0];

dist/cjs/components/Nav.js

@@ -6,10 +6,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Nav = void 0;
+exports.Nav = Nav;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
-const Button_1 = require("./Button");
-const Chevron_1 = require("./Chevron");
 /**
- * Render the navigation buttons to change the month.
+ * Render the toolbar with the navigation button.
  *
@@ -19,28 +15,7 @@ * Use the `components` prop to swap this component with a custom one.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-function Nav() {
-    const { classNames, styles, labels: { labelNext, labelPrevious }, locale, components, id, onNextClick, onPrevClick } = (0, contexts_1.useProps)();
-    const calendar = (0, contexts_1.useCalendar)();
-    const handlePreviousClick = () => {
-        if (!calendar.previousMonth)
-            return;
-        calendar.goToPreviousMonth();
-        onPrevClick?.(calendar.previousMonth);
-    };
-    const handleNextClick = () => {
-        if (!calendar.nextMonth)
-            return;
-        calendar.goToNextMonth();
-        onNextClick?.(calendar.nextMonth);
-    };
-    const Button = components?.Button ?? Button_1.Button;
-    const Chevron = components?.Chevron ?? Chevron_1.Chevron;
-    return (react_1.default.createElement("div", { role: "toolbar", className: classNames[UI_1.UI.Nav], style: styles?.[UI_1.UI.Nav] },
-        react_1.default.createElement(Button, { type: "button", name: "previous-month", className: classNames[UI_1.UI.ButtonPrevious], tabIndex: calendar.previousMonth ? undefined : -1, disabled: calendar.previousMonth ? undefined : true, "aria-label": labelPrevious(calendar.previousMonth, { locale }), "aria-controls": id, onClick: handlePreviousClick },
-            react_1.default.createElement(Chevron, null)),
-        react_1.default.createElement(Button, { type: "button", name: "next-month", className: classNames[UI_1.UI.ButtonNext], tabIndex: calendar.nextMonth ? undefined : -1, disabled: calendar.nextMonth ? undefined : true, "aria-label": labelNext(calendar.nextMonth, { locale }), "aria-controls": id, onClick: handleNextClick },
-            react_1.default.createElement(Chevron, { orientation: "right" }))));
+function Nav(props) {
+    return react_1.default.createElement("div", { ...props });
 }
-exports.Nav = Nav;
 //# sourceMappingURL=Nav.js.map

dist/cjs/components/Option.d.ts

 import React from "react";
-import type { OptionHTMLAttributes } from "react";
 /**
@@ -9,5 +8,5 @@ * Render the `option` element.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Option(props: OptionHTMLAttributes<HTMLOptionElement>): React.JSX.Element;
+export declare function Option(props: JSX.IntrinsicElements["option"]): React.JSX.Element;
 export type OptionProps = Parameters<typeof Option>[0];

dist/cjs/components/Option.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Option = void 0;
+exports.Option = Option;
 const react_1 = __importDefault(require("react"));
@@ -15,3 +15,3 @@ /**
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -21,3 +21,2 @@ function Option(props) {
 }
-exports.Option = Option;
 //# sourceMappingURL=Option.js.map

dist/cjs/components/Select.d.ts

 import React from "react";
-import type { SelectHTMLAttributes } from "react";
 /**
@@ -9,5 +8,5 @@ * Render the `select` element.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Select(props: SelectHTMLAttributes<HTMLSelectElement>): React.JSX.Element;
+export declare function Select(props: JSX.IntrinsicElements["select"]): React.JSX.Element;
 export type SelectProps = Parameters<typeof Select>[0];

dist/cjs/components/Select.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
+exports.Select = Select;
 const react_1 = __importDefault(require("react"));
@@ -15,3 +15,3 @@ /**
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -21,3 +21,2 @@ function Select(props) {
 }
-exports.Select = Select;
 //# sourceMappingURL=Select.js.map

dist/cjs/components/Week.d.ts

 import React from "react";
-import type { CalendarWeek } from "../classes";
+import type { CalendarWeek } from "../classes/index.js";
 /**
@@ -9,8 +9,7 @@ * Render a row in the calendar, with the days and the week number.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function Week(props: {
-    ["aria-rowindex"]: number;
     week: CalendarWeek;
-}): React.JSX.Element;
+} & JSX.IntrinsicElements["tr"]): React.JSX.Element;
 export type WeekProps = Parameters<typeof Week>[0];

dist/cjs/components/Week.js

@@ -6,8 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Week = void 0;
+exports.Week = Week;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
-const DayWrapper_1 = require("./DayWrapper");
-const WeekNumber_1 = require("./WeekNumber");
 /**
@@ -19,12 +15,8 @@ * Render a row in the calendar, with the days and the week number.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function Week(props) {
-    const { styles, classNames, showWeekNumber, components, dateLib: { getUnixTime } } = (0, contexts_1.useProps)();
-    const WeekNumber = components?.WeekNumber ?? WeekNumber_1.WeekNumber;
-    return (react_1.default.createElement("div", { role: "row", "aria-rowindex": props["aria-rowindex"], className: classNames[UI_1.UI.Week], style: styles?.[UI_1.UI.Week] },
-        showWeekNumber && react_1.default.createElement(WeekNumber, { week: props.week }),
-        props.week.days.map((day, i) => (react_1.default.createElement(DayWrapper_1.DayWrapper, { day: day, "aria-colindex": showWeekNumber ? i + 2 : i + 1, key: getUnixTime(day.date) })))));
+    const { week, ...trProps } = props;
+    return react_1.default.createElement("tr", { ...trProps });
 }
-exports.Week = Week;
 //# sourceMappingURL=Week.js.map

dist/cjs/components/Weekday.d.ts

@@ -8,9 +8,5 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Weekday(props: {
-    ["aria-colindex"]?: number | undefined;
-    ["aria-label"]?: string | undefined;
-    weekday?: Date;
-}): React.JSX.Element;
+export declare function Weekday(props: JSX.IntrinsicElements["th"]): React.JSX.Element;
 export type WeekdayProps = Parameters<typeof Weekday>[0];

dist/cjs/components/Weekday.js

@@ -6,6 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Weekday = void 0;
+exports.Weekday = Weekday;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
 /**
@@ -17,14 +15,7 @@ * Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 function Weekday(props) {
-    const { classNames, dateLib, formatters: { formatWeekdayName }, labels: { labelWeekday, labelWeekNumberHeader }, locale, hideWeekdayRow, styles } = (0, contexts_1.useProps)();
-    return (react_1.default.createElement("span", { role: "columnheader", "aria-colindex": props["aria-colindex"], "aria-label": props.weekday
-            ? labelWeekday(props.weekday, { locale }, dateLib)
-            : labelWeekNumberHeader({ locale }), className: classNames[UI_1.UI.Weekday], style: styles?.[UI_1.UI.Weekday] }, !hideWeekdayRow &&
-        (props.weekday
-            ? formatWeekdayName(props.weekday, { locale }, dateLib)
-            : "#")));
+    return react_1.default.createElement("th", { ...props });
 }
-exports.Weekday = Weekday;
 //# sourceMappingURL=Weekday.js.map

dist/cjs/components/Weekdays.d.ts

@@ -8,4 +8,5 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Weekdays(): React.JSX.Element;
+export declare function Weekdays(props: JSX.IntrinsicElements["tr"]): React.JSX.Element;
+export type WeekdaysProps = Parameters<typeof Weekdays>[0];

dist/cjs/components/Weekdays.js

@@ -6,8 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Weekdays = void 0;
+exports.Weekdays = Weekdays;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
-const getWeekdays_1 = require("../helpers/getWeekdays");
-const Weekday_1 = require("./Weekday");
 /**
@@ -19,13 +15,8 @@ * Render the row with the weekday names.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-function Weekdays() {
-    const { classNames, components, dateLib, hideWeekdayRow, ISOWeek, locale, showWeekNumber, styles, weekStartsOn } = (0, contexts_1.useProps)();
-    const weekdays = (0, getWeekdays_1.getWeekdays)(locale, weekStartsOn, ISOWeek, dateLib);
-    const Weekday = components?.Weekday ?? Weekday_1.Weekday;
-    return (react_1.default.createElement("div", { role: "row", hidden: hideWeekdayRow, "aria-rowindex": 1, style: styles?.[UI_1.UI.Weekdays], className: classNames[UI_1.UI.Weekdays], onClick: (e) => e.stopPropagation() },
-        showWeekNumber && react_1.default.createElement(Weekday, { "aria-colindex": 1 }),
-        weekdays.map((weekday, i) => (react_1.default.createElement(Weekday, { key: i, weekday: weekday, "aria-colindex": showWeekNumber ? i + 2 : i + 1 })))));
+function Weekdays(props) {
+    return (react_1.default.createElement("thead", null,
+        react_1.default.createElement("tr", { ...props })));
 }
-exports.Weekdays = Weekdays;
 //# sourceMappingURL=Weekdays.js.map

dist/cjs/components/WeekNumber.d.ts

 import React from "react";
-import type { CalendarWeek } from "../classes";
+import type { CalendarWeek } from "../classes/index.js";
 /**
@@ -12,4 +12,5 @@ * Render the cell with the number of the week.
 export declare function WeekNumber(props: {
+    /** The week to render. */
     week: CalendarWeek;
-}): React.JSX.Element;
+} & JSX.IntrinsicElements["td"]): React.JSX.Element;
 export type WeekNumberProps = Parameters<typeof WeekNumber>[0];

dist/cjs/components/WeekNumber.js

@@ -6,6 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WeekNumber = void 0;
+exports.WeekNumber = WeekNumber;
 const react_1 = __importDefault(require("react"));
-const UI_1 = require("../UI");
-const contexts_1 = require("../contexts");
 /**
@@ -20,10 +18,5 @@ * Render the cell with the number of the week.
 function WeekNumber(props) {
-    const { classNames, formatters: { formatWeekNumber }, labels: { labelWeekNumber }, locale, styles, onWeekNumberClick } = (0, contexts_1.useProps)();
-    const isInteractive = Boolean(onWeekNumberClick);
-    return (react_1.default.createElement("div", { role: "rowheader", "aria-colindex": 1, "aria-label": labelWeekNumber(props.week.weekNumber, { locale }), className: [
-            classNames[UI_1.UI.WeekNumber],
-            isInteractive ? classNames[UI_1.WeekNumberFlag.week_number_interactive] : ""
-        ].join(" "), style: styles?.[UI_1.UI.WeekNumber], tabIndex: isInteractive ? 0 : undefined, onClick: (e) => onWeekNumberClick?.(props.week.weekNumber, props.week.days.map((day) => day.date), e) }, formatWeekNumber(props.week.weekNumber)));
+    const { week, ...tdProps } = props;
+    return react_1.default.createElement("td", { ...tdProps });
 }
-exports.WeekNumber = WeekNumber;
 //# sourceMappingURL=WeekNumber.js.map

dist/cjs/DayPicker.d.ts

 import React from "react";
-import type { DayPickerProps } from "./types";
+import type { DayPickerProps } from "./types/index.js";
 /**
@@ -4,0 +4,0 @@ * Render the date picker calendar.

dist/cjs/DayPicker.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,6 +29,21 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DayPicker = void 0;
+exports.DayPicker = DayPicker;
 const react_1 = __importDefault(require("react"));
-const Calendar_1 = require("./components/Calendar");
-const providers_1 = require("./contexts/providers");
+const UI_js_1 = require("./UI.js");
+const getClassNamesForModifiers_js_1 = require("./helpers/getClassNamesForModifiers.js");
+const getComponents_js_1 = require("./helpers/getComponents.js");
+const getDataAttributes_js_1 = require("./helpers/getDataAttributes.js");
+const getDateLib_js_1 = require("./helpers/getDateLib.js");
+const getDefaultClassNames_js_1 = require("./helpers/getDefaultClassNames.js");
+const getDropdownMonths_js_1 = require("./helpers/getDropdownMonths.js");
+const getDropdownYears_js_1 = require("./helpers/getDropdownYears.js");
+const getFormatters_js_1 = require("./helpers/getFormatters.js");
+const getStyleForModifiers_js_1 = require("./helpers/getStyleForModifiers.js");
+const getWeekdays_js_1 = require("./helpers/getWeekdays.js");
+const defaultLabels = __importStar(require("./labels/index.js"));
+const useCalendar_js_1 = require("./useCalendar.js");
+const useDayPicker_js_1 = require("./useDayPicker.js");
+const useFocus_js_1 = require("./useFocus.js");
+const useModifiers_js_1 = require("./useModifiers.js");
+const useSelection_js_1 = require("./useSelection.js");
 /**
@@ -18,6 +56,196 @@ * Render the date picker calendar.
 function DayPicker(props) {
-    return (react_1.default.createElement(providers_1.ContextProviders, { ...props },
-        react_1.default.createElement(Calendar_1.Calendar, null)));
+    const reactId = react_1.default.useId();
+    const id = props.id ?? reactId;
+    const dateLib = (0, getDateLib_js_1.getDateLib)(props.dateLib);
+    const components = (0, getComponents_js_1.getComponents)(props.components);
+    const formatters = (0, getFormatters_js_1.getFormatters)(props.formatters);
+    const labels = { ...defaultLabels, ...props.labels };
+    const classNames = { ...(0, getDefaultClassNames_js_1.getDefaultClassNames)(), ...props.classNames };
+    const numberOfMonths = props.numberOfMonths ?? 1;
+    const calendar = (0, useCalendar_js_1.useCalendar)(props, dateLib);
+    const modifiers = (0, useModifiers_js_1.useModifiers)(props, calendar, dateLib);
+    const selection = (0, useSelection_js_1.useSelection)(props, dateLib);
+    const focus = (0, useFocus_js_1.useFocus)(props, calendar, modifiers, dateLib);
+    const { captionLayout, dir, locale, ISOWeek, mode, modifiersClassNames, modifiersStyles, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens } = props;
+    const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters;
+    const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
+    const weekdays = (0, getWeekdays_js_1.getWeekdays)(locale, weekStartsOn, ISOWeek, dateLib);
+    const isInteractive = mode !== undefined || onDayClick !== undefined;
+    const handlePreviousClick = () => {
+        if (!calendar.previousMonth)
+            return;
+        calendar.goToPreviousMonth();
+        onPrevClick?.(calendar.previousMonth);
+    };
+    const handleNextClick = () => {
+        if (!calendar.nextMonth)
+            return;
+        calendar.goToNextMonth();
+        onNextClick?.(calendar.nextMonth);
+    };
+    const handleDayClick = (day, m) => {
+        return (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            selection?.handleSelect(day.date, m, e);
+            focus.setFocused(day);
+            onDayClick?.(day.date, m, e);
+        };
+    };
+    const handleDayFocus = (day, m) => {
+        return (e) => {
+            focus.setFocused(day);
+            onDayFocus?.(day.date, m, e);
+        };
+    };
+    const handleDayBlur = (day, m) => {
+        return (e) => {
+            focus.blur();
+            onDayBlur?.(day.date, m, e);
+        };
+    };
+    const handleDayKeyDown = (day, m) => {
+        return (e) => {
+            switch (e.key) {
+                case "ArrowLeft":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dir === "rtl" ? focus.focusDayAfter() : focus.focusDayBefore();
+                    break;
+                case "ArrowRight":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dir === "rtl" ? focus.focusDayBefore() : focus.focusDayAfter();
+                    break;
+                case "ArrowDown":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    focus.focusWeekAfter();
+                    break;
+                case "ArrowUp":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    focus.focusWeekBefore();
+                    break;
+                case " ":
+                case "Enter":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    selection?.handleSelect(day.date, m, e);
+                    break;
+                case "PageUp":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.shiftKey ? focus.focusYearBefore() : focus.focusMonthBefore();
+                    break;
+                case "PageDown":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.shiftKey ? focus.focusYearAfter() : focus.focusMonthAfter();
+                    break;
+                case "Home":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    focus.focusStartOfWeek();
+                    break;
+                case "End":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    focus.focusEndOfWeek();
+                    break;
+            }
+            onDayKeyDown?.(day.date, m, e);
+        };
+    };
+    const formatOptions = {
+        locale,
+        weekStartsOn,
+        firstWeekContainsDate,
+        useAdditionalWeekYearTokens,
+        useAdditionalDayOfYearTokens
+    };
+    const labelOptions = formatOptions;
+    return (react_1.default.createElement(useDayPicker_js_1.dayPickerContext.Provider, { value: { ...calendar, ...selection, ...modifiers } },
+        react_1.default.createElement("div", { className: [classNames[UI_js_1.UI.Root], props.className]
+                .filter(Boolean)
+                .join(" "), style: { ...styles?.[UI_js_1.UI.Root], ...props.style }, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, "data-interactive": isInteractive || undefined, "data-multiple-months": numberOfMonths > 1 || undefined, "data-week-numbers": showWeekNumber || undefined, ...(0, getDataAttributes_js_1.getDataAttributes)(props) },
+            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, { role: "toolbar", className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav() },
+                    react_1.default.createElement(components.Button, { type: "button", className: classNames[UI_js_1.UI.ButtonPrevious], tabIndex: calendar.previousMonth ? undefined : -1, disabled: calendar.previousMonth ? undefined : true, "aria-label": labelPrevious(calendar.previousMonth, {
+                            locale
+                        }), "aria-controls": id, onClick: handlePreviousClick },
+                        react_1.default.createElement(components.Chevron, { disabled: calendar.previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: "left" })),
+                    react_1.default.createElement(components.Button, { type: "button", className: classNames[UI_js_1.UI.ButtonNext], tabIndex: calendar.nextMonth ? undefined : -1, disabled: calendar.nextMonth ? undefined : true, "aria-label": labelNext(calendar.nextMonth, labelOptions), "aria-controls": id, onClick: handleNextClick },
+                        react_1.default.createElement(components.Chevron, { disabled: calendar.previousMonth ? undefined : true, orientation: "right", className: classNames[UI_js_1.UI.Chevron] })))),
+                calendar.months.map((calendarMonth, displayIndex) => {
+                    const captionId = `${id}-caption-${displayIndex}`;
+                    const handleMonthChange = (e) => {
+                        const selectedMonth = Number(e.target.value);
+                        const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth);
+                        calendar.goToMonth(month);
+                    };
+                    const handleYearChange = (e) => {
+                        const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value));
+                        calendar.goToMonth(month);
+                    };
+                    const dropdownMonths = (0, getDropdownMonths_js_1.getDropdownMonths)(calendarMonth.date, calendar.navigationStartMonth, calendar.navigationEndMonth, formatters, locale, dateLib);
+                    const dropdownYears = (0, getDropdownYears_js_1.getDropdownYears)(calendar.months[0].date, calendar.navigationStartMonth, calendar.navigationEndMonth, formatters, dateLib);
+                    return (react_1.default.createElement(components.Month, { className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
+                        react_1.default.createElement(components.MonthCaption, { className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], id: captionId, calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.DropdownNav], style: styles?.[UI_js_1.UI.DropdownNav] },
+                            captionLayout === "dropdown" ||
+                                captionLayout === "dropdown-months" ? (react_1.default.createElement(components.Dropdown, { "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange, options: dropdownMonths, style: styles?.[UI_js_1.UI.Dropdown], value: calendarMonth.date.getMonth() })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(calendarMonth.date.getMonth()))),
+                            captionLayout === "dropdown" ||
+                                captionLayout === "dropdown-years" ? (react_1.default.createElement(components.Dropdown, { "aria-label": labelYearDropdown(labelOptions), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange, options: dropdownYears, style: styles?.[UI_js_1.UI.Dropdown], value: calendarMonth.date.getFullYear() })) : (react_1.default.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown(calendarMonth.date.getFullYear()))))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, formatOptions, dateLib)))),
+                        react_1.default.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, labelOptions, dateLib) ||
+                                undefined, className: classNames[UI_js_1.UI.MonthGrid], style: styles?.[UI_js_1.UI.MonthGrid] },
+                            react_1.default.createElement(components.Weekdays, { className: classNames[UI_js_1.UI.Weekdays], hidden: props.hideWeekdayRow, role: "row", style: styles?.[UI_js_1.UI.Weekdays] },
+                                showWeekNumber && (react_1.default.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI_js_1.UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI_js_1.UI.WeekNumberHeader] }, !props.hideWeekdayRow && formatWeekNumberHeader())),
+                                weekdays.map((weekday, i) => (react_1.default.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI_js_1.UI.Weekday], key: i, role: "columnheader", style: styles?.[UI_js_1.UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib))))),
+                            react_1.default.createElement(components.Weeks, { className: classNames[UI_js_1.UI.Weeks], role: "rowgroup", style: styles?.[UI_js_1.UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
+                                return (react_1.default.createElement(components.Week, { className: classNames[UI_js_1.UI.Week], key: week.weekNumber, role: "row", style: styles?.[UI_js_1.UI.Week], week: week },
+                                    showWeekNumber && (react_1.default.createElement(components.WeekNumber, { week: week, role: "rowheader", style: styles?.[UI_js_1.UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
+                                            locale
+                                        }), className: classNames[UI_js_1.UI.WeekNumber] }, formatWeekNumber(week.weekNumber))),
+                                    week.days.map((day, dayIndex) => {
+                                        const m = modifiers.getModifiers(day);
+                                        if (!m.disabled) {
+                                            if (selection?.isSelected(day.date) &&
+                                                !m.disabled) {
+                                                m[UI_js_1.SelectionState.selected] = true;
+                                            }
+                                            if (mode === "range") {
+                                                const { isRangeEnd, isRangeStart, isRangeMiddle } = selection;
+                                                if (isRangeStart(day.date)) {
+                                                    m[UI_js_1.SelectionState.range_start] = true;
+                                                }
+                                                if (isRangeMiddle(day.date)) {
+                                                    m[UI_js_1.SelectionState.range_middle] = true;
+                                                }
+                                                if (isRangeEnd(day.date)) {
+                                                    m[UI_js_1.SelectionState.range_end] = true;
+                                                }
+                                            }
+                                        }
+                                        const isFocused = Boolean(focus.focused?.isEqualTo(day));
+                                        const style = {
+                                            ...(0, getStyleForModifiers_js_1.getStyleForModifiers)(m, modifiersStyles),
+                                            ...styles?.[UI_js_1.UI.Day]
+                                        };
+                                        const className = [
+                                            classNames[UI_js_1.UI.Day],
+                                            ...(0, getClassNamesForModifiers_js_1.getClassNamesForModifiers)(m, classNames, modifiersClassNames),
+                                            ...(isFocused
+                                                ? [classNames[UI_js_1.DayFlag.focused]]
+                                                : [])
+                                        ];
+                                        return (react_1.default.createElement(components.Day, { key: `${dateLib.format(day.date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: m, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": m.hidden || undefined, "aria-selected": m.selected || undefined, "aria-label": !isInteractive
+                                                ? labelGridcell(day.date, m, labelOptions, dateLib)
+                                                : undefined, "data-day": dateLib.format(day.date, "yyyy-MM-dd"), "data-month": numberOfMonths > 1
+                                                ? dateLib.format(day.date, "yyyy-MM")
+                                                : undefined, "data-selected": m.selected || undefined, "data-disabled": m.disabled || undefined, "data-hidden": m.hidden || undefined, "data-focused": isFocused || undefined }, isInteractive ? (react_1.default.createElement(components.DayButton, { className: classNames[UI_js_1.UI.DayButton], style: styles?.[UI_js_1.UI.DayButton], day: day, modifiers: m, disabled: m.disabled || undefined, tabIndex: focus.isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(day.date, m, labelOptions, dateLib), onClick: handleDayClick(day, m), onBlur: handleDayBlur(day, m), onFocus: handleDayFocus(day, m), onKeyDown: handleDayKeyDown(day, m) }, formatDay(day.date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib))));
+                                    })));
+                            })))));
+                })),
+            props.footer && (react_1.default.createElement(components.Footer, { className: classNames[UI_js_1.UI.Footer], style: styles?.[UI_js_1.UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }
-exports.DayPicker = DayPicker;
 //# sourceMappingURL=DayPicker.js.map

dist/cjs/formatters/formatCaption.d.ts

@@ -1,3 +0,3 @@
-import { FormatOptions } from "../lib";
-import type { DateLib } from "../types";
+import { FormatOptions } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -4,0 +4,0 @@ * The default formatter for the caption element.

dist/cjs/formatters/formatCaption.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatMonthCaption = exports.formatCaption = void 0;
-const lib_1 = require("../lib");
+exports.formatMonthCaption = void 0;
+exports.formatCaption = formatCaption;
+const index_js_1 = require("../lib/index.js");
 /**
@@ -10,6 +11,5 @@ * The default formatter for the caption element.
  */
-function formatCaption(month, options, dateLib = lib_1.dateLib) {
+function formatCaption(month, options, dateLib = index_js_1.dateLib) {
     return dateLib.format(month, "LLLL y", options);
 }
-exports.formatCaption = formatCaption;
 /**
@@ -16,0 +16,0 @@ * @private

dist/cjs/formatters/formatDay.d.ts

@@ -1,3 +0,3 @@
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { FormatOptions } from "../lib/dateLib.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -4,0 +4,0 @@ * The default formatter for the day grid cell element.

dist/cjs/formatters/formatDay.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDay = void 0;
-const lib_1 = require("../lib");
+exports.formatDay = formatDay;
+const index_js_1 = require("../lib/index.js");
 /**
@@ -10,6 +10,5 @@ * The default formatter for the day grid cell element.
  */
-function formatDay(date, options, dateLib = lib_1.dateLib) {
+function formatDay(date, options, dateLib = index_js_1.dateLib) {
     return dateLib.format(date, "d", options);
 }
-exports.formatDay = formatDay;
 //# sourceMappingURL=formatDay.js.map

dist/cjs/formatters/formatMonthDropdown.d.ts

@@ -10,2 +10,2 @@ /**
 /** The locale to use for formatting. */
-locale?: import("date-fns/locale/types").Locale): string;
+locale?: import("date-fns").Locale): string;

dist/cjs/formatters/formatMonthDropdown.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatMonthDropdown = void 0;
-const locales_1 = require("../lib/locales");
+exports.formatMonthDropdown = formatMonthDropdown;
+const locales_js_1 = require("../lib/locales.js");
 /**
@@ -14,7 +14,6 @@ * The default formatter for the month dropdown value.
 /** The locale to use for formatting. */
-locale = locales_1.enUS) {
+locale = locales_js_1.enUS) {
     return (locale.localize?.month(monthNumber) ??
         monthNumber.toString());
 }
-exports.formatMonthDropdown = formatMonthDropdown;
 //# sourceMappingURL=formatMonthDropdown.js.map

dist/cjs/formatters/formatWeekdayName.d.ts

@@ -1,3 +0,3 @@
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { FormatOptions } from "../lib/dateLib.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -4,0 +4,0 @@ * The default formatter for the name of the weekday.

dist/cjs/formatters/formatWeekdayName.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatWeekdayName = void 0;
-const lib_1 = require("../lib");
+exports.formatWeekdayName = formatWeekdayName;
+const index_js_1 = require("../lib/index.js");
 /**
@@ -10,6 +10,5 @@ * The default formatter for the name of the weekday.
  */
-function formatWeekdayName(weekday, options, dateLib = lib_1.dateLib) {
+function formatWeekdayName(weekday, options, dateLib = index_js_1.dateLib) {
     return dateLib.format(weekday, "cccccc", options);
 }
-exports.formatWeekdayName = formatWeekdayName;
 //# sourceMappingURL=formatWeekdayName.js.map

dist/cjs/formatters/formatWeekNumber.d.ts

 /**
  * The default formatter for the week numbers.
  *
+ * @param weekNumber - The week number to format. `0` when heading of the week
+ *   numbers.
  * @group Formatters
  */
-export declare function formatWeekNumber(weekNumber: number): string;
+export declare function formatWeekNumber(weekNumber: number | 0): string;

dist/cjs/formatters/formatWeekNumber.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatWeekNumber = void 0;
+exports.formatWeekNumber = formatWeekNumber;
 /**
  * The default formatter for the week numbers.
  *
+ * @param weekNumber - The week number to format. `0` when heading of the week
+ *   numbers.
  * @group Formatters
  */
 function formatWeekNumber(weekNumber) {
+    if (weekNumber === 0) {
+        return `#`;
+    }
+    if (weekNumber < 10) {
+        return `0${weekNumber.toLocaleString()}`;
+    }
     return `${weekNumber.toLocaleString()}`;
 }
-exports.formatWeekNumber = formatWeekNumber;
 //# sourceMappingURL=formatWeekNumber.js.map

dist/cjs/formatters/formatYearDropdown.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatYearCaption = exports.formatYearDropdown = void 0;
+exports.formatYearCaption = void 0;
+exports.formatYearDropdown = formatYearDropdown;
 /**
@@ -12,3 +13,2 @@ * The default formatter for the Year caption.
 }
-exports.formatYearDropdown = formatYearDropdown;
 /**
@@ -15,0 +15,0 @@ * @private

dist/cjs/formatters/index.d.ts

@@ -1,6 +0,7 @@
-export * from "./formatCaption";
-export * from "./formatDay";
-export * from "./formatMonthDropdown";
-export * from "./formatWeekNumber";
-export * from "./formatWeekdayName";
-export * from "./formatYearDropdown";
+export * from "./formatCaption.js";
+export * from "./formatDay.js";
+export * from "./formatMonthDropdown.js";
+export * from "./formatWeekNumber.js";
+export * from "./formatWeekNumberHeader.js";
+export * from "./formatWeekdayName.js";
+export * from "./formatYearDropdown.js";

dist/cjs/formatters/index.js

@@ -17,8 +17,9 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./formatCaption"), exports);
-__exportStar(require("./formatDay"), exports);
-__exportStar(require("./formatMonthDropdown"), exports);
-__exportStar(require("./formatWeekNumber"), exports);
-__exportStar(require("./formatWeekdayName"), exports);
-__exportStar(require("./formatYearDropdown"), exports);
+__exportStar(require("./formatCaption.js"), exports);
+__exportStar(require("./formatDay.js"), exports);
+__exportStar(require("./formatMonthDropdown.js"), exports);
+__exportStar(require("./formatWeekNumber.js"), exports);
+__exportStar(require("./formatWeekNumberHeader.js"), exports);
+__exportStar(require("./formatWeekdayName.js"), exports);
+__exportStar(require("./formatYearDropdown.js"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/helpers/getClassNamesForModifiers.d.ts

@@ -1,2 +0,2 @@
-import type { ModifiersClassNames, ClassNames } from "../types";
-export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, modifiersClassNames: ModifiersClassNames, classNames: ClassNames): string[];
+import type { ModifiersClassNames, ClassNames } from "../types/index.js";
+export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, classNames: ClassNames, modifiersClassNames?: ModifiersClassNames): string[];

dist/cjs/helpers/getClassNamesForModifiers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getClassNamesForModifiers = void 0;
-const UI_1 = require("../UI");
-function getClassNamesForModifiers(modifiers, modifiersClassNames, classNames) {
+exports.getClassNamesForModifiers = getClassNamesForModifiers;
+const UI_js_1 = require("../UI.js");
+function getClassNamesForModifiers(modifiers, classNames, modifiersClassNames = {}) {
     const modifierClassNames = Object.entries(modifiers)
@@ -12,7 +12,7 @@ .filter(([, active]) => active === true)
         }
-        else if (classNames[UI_1.DayFlag[key]]) {
-            previousValue.push(classNames[UI_1.DayFlag[key]]);
+        else if (classNames[UI_js_1.DayFlag[key]]) {
+            previousValue.push(classNames[UI_js_1.DayFlag[key]]);
         }
-        else if (classNames[UI_1.SelectionState[key]]) {
-            previousValue.push(classNames[UI_1.SelectionState[key]]);
+        else if (classNames[UI_js_1.SelectionState[key]]) {
+            previousValue.push(classNames[UI_js_1.SelectionState[key]]);
         }
@@ -23,3 +23,2 @@ return previousValue;
 }
-exports.getClassNamesForModifiers = getClassNamesForModifiers;
 //# sourceMappingURL=getClassNamesForModifiers.js.map

dist/cjs/helpers/getDataAttributes.d.ts

@@ -1,3 +0,3 @@
-import type { DayPickerProps } from "../types";
+import type { DayPickerProps } from "../types/index.js";
 /** Return the `data-` attributes from the props. */
 export declare function getDataAttributes(props: DayPickerProps): Record<string, unknown>;

dist/cjs/helpers/getDataAttributes.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDataAttributes = void 0;
+exports.getDataAttributes = getDataAttributes;
 /** Return the `data-` attributes from the props. */
 function getDataAttributes(props) {
-    const dataAttributes = {};
+    const dataAttributes = {
+        "data-mode": props.mode ?? undefined,
+        "data-required": "required" in props ? props.required : undefined
+    };
     Object.entries(props).forEach(([key, val]) => {
@@ -14,3 +17,2 @@ if (key.startsWith("data-")) {
 }
-exports.getDataAttributes = getDataAttributes;
 //# sourceMappingURL=getDataAttributes.js.map

dist/cjs/helpers/getDates.d.ts

@@ -1,3 +0,3 @@
-import { PropsContextValue } from "../contexts";
+import { DateLib, DayPickerProps } from "../index.js";
 /** Return all the dates to display in the calendar. */
-export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<PropsContextValue, "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn" | "dateLib">): Date[];
+export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn">, dateLib: DateLib): Date[];

dist/cjs/helpers/getDates.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDates = void 0;
+exports.getDates = getDates;
 /** The number of days in a month when having 6 weeks. */
 const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
-function getDates(displayMonths, maxDate, props) {
+function getDates(displayMonths, maxDate, props, dateLib) {
     const firstMonth = displayMonths[0];
     const lastMonth = displayMonths[displayMonths.length - 1];
     const { ISOWeek, fixedWeeks, locale, weekStartsOn } = props ?? {};
-    const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, addDays, differenceInCalendarDays, differenceInCalendarMonths, isAfter, endOfMonth, Date } = props.dateLib;
+    const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, addDays, differenceInCalendarDays, differenceInCalendarMonths, isAfter, endOfMonth, Date } = dateLib;
     const startWeekFirstDate = ISOWeek
@@ -44,3 +44,2 @@ ? startOfISOWeek(firstMonth)
 }
-exports.getDates = getDates;
 //# sourceMappingURL=getDates.js.map

dist/cjs/helpers/getDays.d.ts

@@ -1,2 +0,2 @@
-import type { CalendarDay, CalendarMonth } from "../classes";
+import type { CalendarDay, CalendarMonth } from "../classes/index.js";
 /**
@@ -3,0 +3,0 @@ * Returns all the days belonging to the calendar by merging the days in the

dist/cjs/helpers/getDays.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDays = void 0;
+exports.getDays = getDays;
 /**
@@ -18,3 +18,2 @@ * Returns all the days belonging to the calendar by merging the days in the
 }
-exports.getDays = getDays;
 //# sourceMappingURL=getDays.js.map

dist/cjs/helpers/getDefaultClassNames.d.ts

@@ -1,2 +0,2 @@
-import type { ClassNames } from "../types";
+import type { ClassNames } from "../types/index.js";
 /**
@@ -3,0 +3,0 @@ * Get the default class names for the UI elements.

dist/cjs/helpers/getDefaultClassNames.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultClassNames = void 0;
-const UI_1 = require("../UI");
+exports.getDefaultClassNames = getDefaultClassNames;
+const UI_js_1 = require("../UI.js");
 /**
@@ -12,29 +12,16 @@ * Get the default class names for the UI elements.
     const classNames = {};
-    for (const key in UI_1.UI) {
-        classNames[UI_1.UI[key]] =
-            `rdp-${UI_1.UI[key]}`;
+    for (const key in UI_js_1.UI) {
+        classNames[UI_js_1.UI[key]] =
+            `rdp-${UI_js_1.UI[key]}`;
     }
-    for (const key in UI_1.CalendarFlag) {
-        classNames[UI_1.CalendarFlag[key]] =
-            `rdp-${UI_1.CalendarFlag[key]}`;
+    for (const key in UI_js_1.DayFlag) {
+        classNames[UI_js_1.DayFlag[key]] =
+            `rdp-${UI_js_1.DayFlag[key]}`;
     }
-    for (const key in UI_1.ChevronFlag) {
-        classNames[UI_1.ChevronFlag[key]] =
-            `rdp-${UI_1.ChevronFlag[key]}`;
+    for (const key in UI_js_1.SelectionState) {
+        classNames[UI_js_1.SelectionState[key]] =
+            `rdp-${UI_js_1.SelectionState[key]}`;
     }
-    for (const key in UI_1.WeekNumberFlag) {
-        classNames[UI_1.WeekNumberFlag[key]] =
-            `rdp-${UI_1.WeekNumberFlag[key]}`;
-    }
-    for (const key in UI_1.DayFlag) {
-        classNames[UI_1.DayFlag[key]] =
-            `rdp-${UI_1.DayFlag[key]}`;
-    }
-    for (const key in UI_1.SelectionState) {
-        classNames[UI_1.SelectionState[key]] =
-            `rdp-${UI_1.SelectionState[key]}`;
-    }
     return classNames;
 }
-exports.getDefaultClassNames = getDefaultClassNames;
 //# sourceMappingURL=getDefaultClassNames.js.map

dist/cjs/helpers/getDisplayMonths.d.ts

@@ -1,2 +0,2 @@
-import type { PropsContextValue } from "../contexts";
-export declare function getDisplayMonths(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "numberOfMonths" | "endMonth" | "dateLib">): Date[];
+import type { DateLib, DayPickerProps } from "../types/index.js";
+export declare function getDisplayMonths(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "numberOfMonths">, dateLib: DateLib): Date[];

dist/cjs/helpers/getDisplayMonths.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDisplayMonths = void 0;
-function getDisplayMonths(firstDisplayedMonth, props) {
+exports.getDisplayMonths = getDisplayMonths;
+function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib) {
+    const { numberOfMonths = 1 } = props;
     const months = [];
-    for (let i = 0; i < props.numberOfMonths; i++) {
-        const month = props.dateLib.addMonths(firstDisplayedMonth, i);
-        if (props.endMonth && month > props.endMonth) {
+    for (let i = 0; i < numberOfMonths; i++) {
+        const month = dateLib.addMonths(firstDisplayedMonth, i);
+        if (calendarEndMonth && month > calendarEndMonth) {
             break;
@@ -15,3 +16,2 @@ }
 }
-exports.getDisplayMonths = getDisplayMonths;
 //# sourceMappingURL=getDisplayMonths.js.map

dist/cjs/helpers/getDropdownMonths.d.ts

@@ -1,4 +0,5 @@
-import { DropdownOption } from "../components/Dropdown";
-import { PropsContextValue } from "../contexts";
+import { DropdownOption } from "../components/Dropdown.js";
+import type { Locale } from "../lib/dateLib.js";
+import type { DateLib, Formatters } from "../types/index.js";
 /** Return the months to show in the dropdown. */
-export declare function getDropdownMonths(displayMonth: Date, props: Pick<PropsContextValue, "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib">): DropdownOption[] | undefined;
+export declare function getDropdownMonths(displayMonth: Date, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, formatters: Pick<Formatters, "formatMonthDropdown">, locale: Locale | undefined, dateLib: DateLib): DropdownOption[] | undefined;

dist/cjs/helpers/getDropdownMonths.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDropdownMonths = void 0;
+exports.getDropdownMonths = getDropdownMonths;
 /** Return the months to show in the dropdown. */
-function getDropdownMonths(displayMonth, props) {
-    const { startMonth, endMonth } = props;
-    if (!startMonth)
+function getDropdownMonths(displayMonth, calendarStartMonth, calendarEndMonth, formatters, locale, dateLib) {
+    if (!calendarStartMonth)
         return undefined;
-    if (!endMonth)
+    if (!calendarEndMonth)
         return undefined;
-    const { addMonths, startOfMonth, isBefore, Date } = props.dateLib;
+    const { addMonths, startOfMonth, isBefore, Date } = dateLib;
     const year = displayMonth.getFullYear();
-    const navStartMonth = startOfMonth(startMonth);
-    const navEndMonth = startOfMonth(endMonth);
+    const navStartMonth = startOfMonth(calendarStartMonth);
+    const navEndMonth = startOfMonth(calendarEndMonth);
     const months = [];
@@ -25,5 +24,7 @@ let month = navStartMonth;
     const options = sortedMonths.map((value) => {
-        const label = props.formatters.formatMonthDropdown(value, props.locale);
-        const disabled = (startMonth && new Date(year, value) < startOfMonth(startMonth)) ||
-            (endMonth && new Date(year, value) > startOfMonth(endMonth)) ||
+        const label = formatters.formatMonthDropdown(value, locale);
+        const disabled = (calendarStartMonth &&
+            new Date(year, value) < startOfMonth(calendarStartMonth)) ||
+            (calendarEndMonth &&
+                new Date(year, value) > startOfMonth(calendarEndMonth)) ||
             false;
@@ -34,3 +35,2 @@ return { value, label, disabled };
 }
-exports.getDropdownMonths = getDropdownMonths;
 //# sourceMappingURL=getDropdownMonths.js.map

dist/cjs/helpers/getDropdownYears.d.ts

@@ -1,4 +0,4 @@
-import { DropdownOption } from "../components/Dropdown";
-import { PropsContextValue } from "../contexts";
+import { DropdownOption } from "../components/Dropdown.js";
+import type { DateLib, Formatters } from "../types/index.js";
 /** Return the years to show in the dropdown. */
-export declare function getDropdownYears(displayMonth: Date, props: Pick<PropsContextValue, "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib">): DropdownOption[] | undefined;
+export declare function getDropdownYears(displayMonth: Date, calendarStart: Date | undefined, calendarEnd: Date | undefined, formatters: Pick<Formatters, "formatYearDropdown">, dateLib: DateLib): DropdownOption[] | undefined;

dist/cjs/helpers/getDropdownYears.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDropdownYears = void 0;
+exports.getDropdownYears = getDropdownYears;
 /** Return the years to show in the dropdown. */
-function getDropdownYears(displayMonth, props) {
-    const { startMonth, endMonth } = props;
-    if (!startMonth)
+function getDropdownYears(displayMonth, calendarStart, calendarEnd, formatters, dateLib) {
+    if (!calendarStart)
         return undefined;
-    if (!endMonth)
+    if (!calendarEnd)
         return undefined;
-    const { startOfMonth, startOfYear, endOfYear, addYears, isBefore, isSameYear, Date } = props.dateLib;
+    const { startOfMonth, startOfYear, endOfYear, addYears, isBefore, isSameYear, Date } = dateLib;
     const month = displayMonth.getMonth();
-    const firstNavYear = startOfYear(startMonth);
-    const lastNavYear = endOfYear(endMonth);
+    const firstNavYear = startOfYear(calendarStart);
+    const lastNavYear = endOfYear(calendarEnd);
     const years = [];
@@ -22,6 +21,8 @@ let year = firstNavYear;
     return years.map((value) => {
-        const disabled = (startMonth && new Date(value, month) < startOfMonth(startMonth)) ||
-            (month && endMonth && new Date(value, month) > startOfMonth(endMonth)) ||
+        const disabled = (calendarStart && new Date(value, month) < startOfMonth(calendarStart)) ||
+            (month &&
+                calendarEnd &&
+                new Date(value, month) > startOfMonth(calendarEnd)) ||
             false;
-        const label = props.formatters.formatYearDropdown(value);
+        const label = formatters.formatYearDropdown(value);
         return {
@@ -34,3 +35,2 @@ value,
 }
-exports.getDropdownYears = getDropdownYears;
 //# sourceMappingURL=getDropdownYears.js.map

dist/cjs/helpers/getFormatters.d.ts

@@ -1,9 +0,9 @@
-import * as defaultFormatters from "../formatters";
-import type { DayPickerProps } from "../types";
+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. */
 export declare function getFormatters(customFormatters: DayPickerProps["formatters"]): {
     formatCaption: typeof defaultFormatters.formatCaption;
-    formatMonthCaption: typeof defaultFormatters.formatCaption;
+    formatMonthCaption: typeof defaultFormatters.formatMonthCaption;
     formatMonthDropdown: typeof defaultFormatters.formatMonthDropdown;
-    formatYearCaption: typeof defaultFormatters.formatYearDropdown;
+    formatYearCaption: typeof defaultFormatters.formatYearCaption;
     formatYearDropdown: typeof defaultFormatters.formatYearDropdown;
@@ -13,2 +13,3 @@ formatDay: typeof defaultFormatters.formatDay;
     formatWeekdayName: typeof defaultFormatters.formatWeekdayName;
+    formatWeekNumberHeader(): string;
 };

dist/cjs/helpers/getFormatters.js

@@ -26,4 +26,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFormatters = void 0;
-const defaultFormatters = __importStar(require("../formatters"));
+exports.getFormatters = getFormatters;
+const defaultFormatters = __importStar(require("../formatters/index.js"));
 /** Return the formatters from the props merged with the default formatters. */
@@ -43,3 +43,2 @@ function getFormatters(customFormatters) {
 }
-exports.getFormatters = getFormatters;
 //# sourceMappingURL=getFormatters.js.map

dist/cjs/helpers/getInitialMonth.d.ts

@@ -1,3 +0,3 @@
-import type { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../index.js";
 /** Return the start month based on the props passed to DayPicker. */
-export declare function getInitialMonth(props: Pick<PropsContextValue, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths" | "dateLib">): Date;
+export declare function getInitialMonth(props: Pick<DayPickerProps, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths">, dateLib: DateLib): Date;

dist/cjs/helpers/getInitialMonth.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInitialMonth = void 0;
+exports.getInitialMonth = getInitialMonth;
 /** Return the start month based on the props passed to DayPicker. */
-function getInitialMonth(props) {
-    const { month, defaultMonth, dateLib: { Date }, today, numberOfMonths = 1, endMonth, startMonth } = props;
-    let initialMonth = month || defaultMonth || today || new Date();
-    const { differenceInCalendarMonths, addMonths, startOfMonth } = props.dateLib;
+function getInitialMonth(props, dateLib) {
+    const { month, defaultMonth, today = new dateLib.Date(), numberOfMonths = 1, endMonth, startMonth } = props;
+    let initialMonth = month || defaultMonth || today;
+    const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib;
     // Fix the initialMonth if is after the to-date
@@ -20,3 +20,2 @@ if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) {
 }
-exports.getInitialMonth = getInitialMonth;
 //# sourceMappingURL=getInitialMonth.js.map

dist/cjs/helpers/getMonths.d.ts

@@ -1,3 +0,3 @@
-import { CalendarMonth } from "../classes";
-import type { PropsContextValue } from "../contexts";
+import { CalendarMonth } from "../classes/index.js";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 /** Return the months to display in the calendar. */
@@ -10,2 +10,2 @@ export declare function getMonths(
 /** Options from the props context. */
-props: Pick<PropsContextValue, "dateLib" | "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">): CalendarMonth[];
+options: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">, dateLib: DateLib): CalendarMonth[];

dist/cjs/helpers/getMonths.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMonths = void 0;
-const classes_1 = require("../classes");
+exports.getMonths = getMonths;
+const index_js_1 = require("../classes/index.js");
 /** Return the months to display in the calendar. */
@@ -12,16 +12,16 @@ function getMonths(
 /** Options from the props context. */
-props) {
-    const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = props.dateLib;
+options, dateLib) {
+    const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = dateLib;
     const dayPickerMonths = displayMonths.reduce((months, month) => {
-        const firstDateOfFirstWeek = props.ISOWeek
+        const firstDateOfFirstWeek = options.ISOWeek
             ? startOfISOWeek(month)
             : startOfWeek(month, {
-                locale: props.locale,
-                weekStartsOn: props.weekStartsOn
+                locale: options.locale,
+                weekStartsOn: options.weekStartsOn
             });
-        const lastDateOfLastWeek = props.ISOWeek
+        const lastDateOfLastWeek = options.ISOWeek
             ? endOfISOWeek(endOfMonth(month))
             : endOfWeek(endOfMonth(month), {
-                locale: props.locale,
-                weekStartsOn: props.weekStartsOn
+                locale: options.locale,
+                weekStartsOn: options.weekStartsOn
             });
@@ -32,3 +32,3 @@ /** The dates to display in the month. */
         });
-        if (props.fixedWeeks && monthDates.length < 42) {
+        if (options.fixedWeeks && monthDates.length < 42) {
             const extraDates = dates.filter((date) => {
@@ -40,13 +40,13 @@ return (date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7));
         const weeks = monthDates.reduce((weeks, date) => {
-            const weekNumber = props.ISOWeek
+            const weekNumber = options.ISOWeek
                 ? getISOWeek(date)
                 : getWeek(date, {
-                    locale: props.locale,
-                    weekStartsOn: props.weekStartsOn,
-                    firstWeekContainsDate: props.firstWeekContainsDate
+                    locale: options.locale,
+                    weekStartsOn: options.weekStartsOn,
+                    firstWeekContainsDate: options.firstWeekContainsDate
                 });
             const week = weeks.find((week) => week.weekNumber === weekNumber);
-            const day = new classes_1.CalendarDay(date, month, props.dateLib);
+            const day = new index_js_1.CalendarDay(date, month, dateLib);
             if (!week) {
-                weeks.push(new classes_1.CalendarWeek(weekNumber, [day]));
+                weeks.push(new index_js_1.CalendarWeek(weekNumber, [day]));
             }
@@ -58,7 +58,7 @@ else {
         }, []);
-        const dayPickerMonth = new classes_1.CalendarMonth(month, weeks);
+        const dayPickerMonth = new index_js_1.CalendarMonth(month, weeks);
         months.push(dayPickerMonth);
         return months;
     }, []);
-    if (!props.reverseMonths) {
+    if (!options.reverseMonths) {
         return dayPickerMonths;
@@ -70,3 +70,2 @@ }
 }
-exports.getMonths = getMonths;
 //# sourceMappingURL=getMonths.js.map

dist/cjs/helpers/getNextFocus.d.ts

@@ -1,7 +0,5 @@
-import { CalendarDay } from "../classes";
-import type { PropsContextValue } from "../contexts";
-import type { MoveFocusBy, MoveFocusDir } from "../types";
-export type Options = Pick<PropsContextValue, "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth">;
+import { CalendarDay } from "../classes/index.js";
+import type { DateLib, DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types/index.js";
 export declare function getNextFocus(moveBy: MoveFocusBy, moveDir: MoveFocusDir, 
 /** The date that is currently focused. */
-focused: CalendarDay, options: Pick<PropsContextValue, "dateLib" | "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth">, attempt?: number): CalendarDay | undefined;
+refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;

dist/cjs/helpers/getNextFocus.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNextFocus = void 0;
-const classes_1 = require("../classes");
-const dateMatchModifiers_1 = require("../utils/dateMatchModifiers");
-const getPossibleFocusDate_1 = require("./getPossibleFocusDate");
+exports.getNextFocus = getNextFocus;
+const index_js_1 = require("../classes/index.js");
+const dateMatchModifiers_js_1 = require("../utils/dateMatchModifiers.js");
+const getFocusableDate_js_1 = require("./getFocusableDate.js");
 function getNextFocus(moveBy, moveDir, 
 /** The date that is currently focused. */
-focused, options, attempt = 0) {
+refDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt = 0) {
     if (attempt > 365) {
@@ -14,9 +14,9 @@ // Limit the recursion to 365 attempts
     }
-    const possibleFocusDate = (0, getPossibleFocusDate_1.getPossibleFocusDate)(moveBy, moveDir, focused.date, options);
+    const focusableDate = (0, getFocusableDate_js_1.getFocusableDate)(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date?
+    calendarStartMonth, calendarEndMonth, options, dateLib);
     const isDisabled = Boolean(options.disabled &&
-        (0, dateMatchModifiers_1.dateMatchModifiers)(possibleFocusDate, options.disabled, options.dateLib));
-    const isHidden = Boolean(options.hidden &&
-        (0, dateMatchModifiers_1.dateMatchModifiers)(possibleFocusDate, options.hidden, options.dateLib));
-    const targetMonth = possibleFocusDate;
-    const focusDay = new classes_1.CalendarDay(possibleFocusDate, targetMonth, options.dateLib);
+        (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, options.disabled, dateLib));
+    const isHidden = Boolean(options.hidden && (0, dateMatchModifiers_js_1.dateMatchModifiers)(focusableDate, options.hidden, dateLib));
+    const targetMonth = focusableDate;
+    const focusDay = new index_js_1.CalendarDay(focusableDate, targetMonth, dateLib);
     if (!isDisabled && !isHidden) {
@@ -26,5 +26,4 @@ return focusDay;
     // Recursively attempt to find the next focusable date
-    return getNextFocus(moveBy, moveDir, focusDay, options, attempt + 1);
+    return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt + 1);
 }
-exports.getNextFocus = getNextFocus;
 //# sourceMappingURL=getNextFocus.js.map

dist/cjs/helpers/getNextMonth.d.ts

@@ -1,2 +0,2 @@
-import { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 /**
@@ -8,5 +8,5 @@ * Return the next month the user can navigate to according to the given
  *
- * - If after the `endMonth` range, is `undefined`;
+ * - If after the `calendarEndMonth` range, is `undefined`;
  * - If the navigation is paged , is the number of months displayed ahead.
  */
-export declare function getNextMonth(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "startMonth" | "endMonth" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "dateLib">): Date | undefined;
+export declare function getNextMonth(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined;

dist/cjs/helpers/getNextMonth.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNextMonth = void 0;
+exports.getNextMonth = getNextMonth;
 /**
@@ -10,18 +10,18 @@ * Return the next month the user can navigate to according to the given
  *
- * - If after the `endMonth` range, is `undefined`;
+ * - If after the `calendarEndMonth` range, is `undefined`;
  * - If the navigation is paged , is the number of months displayed ahead.
  */
-function getNextMonth(firstDisplayedMonth, props) {
-    if (props.disableNavigation) {
+function getNextMonth(firstDisplayedMonth, calendarEndMonth, options, dateLib) {
+    if (options.disableNavigation) {
         return undefined;
     }
-    const { pagedNavigation, numberOfMonths } = props;
-    const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib;
+    const { pagedNavigation, numberOfMonths = 1 } = options;
+    const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
     const offset = pagedNavigation ? numberOfMonths : 1;
     const month = startOfMonth(firstDisplayedMonth);
-    if (!props.endMonth) {
+    if (!calendarEndMonth) {
         return addMonths(month, offset);
     }
-    const monthsDiff = differenceInCalendarMonths(props.endMonth, firstDisplayedMonth);
-    if (monthsDiff < numberOfMonths) {
+    const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth);
+    if (monthsDiff < numberOfMonths ?? 1) {
         return undefined;
@@ -32,3 +32,2 @@ }
 }
-exports.getNextMonth = getNextMonth;
 //# sourceMappingURL=getNextMonth.js.map

dist/cjs/helpers/getPreviousMonth.d.ts

@@ -1,2 +0,2 @@
-import type { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 /**
@@ -9,5 +9,5 @@ * Return the next previous the user can navigate to, according to the given
  *
- * - If before the `startMonth` date, is `undefined`;
+ * - If before the `calendarStartMonth` date, is `undefined`;
  * - If the navigation is paged, is the number of months displayed before.
  */
-export declare function getPreviousMonth(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "startMonth" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "dateLib">): Date | undefined;
+export declare function getPreviousMonth(firstDisplayedMonth: Date, calendarStartMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined;

dist/cjs/helpers/getPreviousMonth.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPreviousMonth = void 0;
+exports.getPreviousMonth = getPreviousMonth;
 /**
@@ -11,17 +11,17 @@ * Return the next previous the user can navigate to, according to the given
  *
- * - If before the `startMonth` date, is `undefined`;
+ * - If before the `calendarStartMonth` date, is `undefined`;
  * - If the navigation is paged, is the number of months displayed before.
  */
-function getPreviousMonth(firstDisplayedMonth, props) {
-    if (props.disableNavigation) {
+function getPreviousMonth(firstDisplayedMonth, calendarStartMonth, options, dateLib) {
+    if (options.disableNavigation) {
         return undefined;
     }
-    const { pagedNavigation, numberOfMonths } = props;
-    const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib;
-    const offset = pagedNavigation ? numberOfMonths : 1;
+    const { pagedNavigation, numberOfMonths } = options;
+    const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
+    const offset = pagedNavigation ? numberOfMonths ?? 1 : 1;
     const month = startOfMonth(firstDisplayedMonth);
-    if (!props.startMonth) {
+    if (!calendarStartMonth) {
         return addMonths(month, -offset);
     }
-    const monthsDiff = differenceInCalendarMonths(month, props.startMonth);
+    const monthsDiff = differenceInCalendarMonths(month, calendarStartMonth);
     if (monthsDiff <= 0) {
@@ -32,3 +32,2 @@ return undefined;
 }
-exports.getPreviousMonth = getPreviousMonth;
 //# sourceMappingURL=getPreviousMonth.js.map

dist/cjs/helpers/getStyleForModifiers.d.ts

 import type { CSSProperties } from "react";
-import type { Modifiers, ModifiersStyles, Styles } from "../types";
-export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles: Partial<ModifiersStyles>, styles: Partial<Styles>): CSSProperties;
+import type { Modifiers, ModifiersStyles } from "../types/index.js";
+export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties;

dist/cjs/helpers/getStyleForModifiers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStyleForModifiers = void 0;
-const UI_1 = require("../UI");
-function getStyleForModifiers(dayModifiers, modifiersStyles, styles) {
-    let style = { ...styles[UI_1.UI.Day] };
+exports.getStyleForModifiers = getStyleForModifiers;
+function getStyleForModifiers(dayModifiers, modifiersStyles = {}) {
+    let style = {};
     Object.entries(dayModifiers)
@@ -17,3 +16,2 @@ .filter(([, active]) => active === true)
 }
-exports.getStyleForModifiers = getStyleForModifiers;
 //# sourceMappingURL=getStyleForModifiers.js.map

dist/cjs/helpers/getWeekdays.d.ts

@@ -1,3 +0,3 @@
-import type { Locale } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { Locale } from "../lib/dateLib.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -4,0 +4,0 @@ * Generate a series of 7 days, starting from the week, to use for formatting

dist/cjs/helpers/getWeekdays.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWeekdays = void 0;
-const lib_1 = require("../lib");
+exports.getWeekdays = getWeekdays;
+const index_js_1 = require("../lib/index.js");
 /**
@@ -13,3 +13,3 @@ * Generate a series of 7 days, starting from the week, to use for formatting
 /** Use ISOWeek instead of locale/ */
-ISOWeek, dateLib = lib_1.dateLib) {
+ISOWeek, dateLib = index_js_1.dateLib) {
     const start = ISOWeek
@@ -25,3 +25,2 @@ ? dateLib.startOfISOWeek(new dateLib.Date())
 }
-exports.getWeekdays = getWeekdays;
 //# sourceMappingURL=getWeekdays.js.map

dist/cjs/helpers/getWeeks.d.ts

@@ -1,3 +0,3 @@
-import type { CalendarMonth, CalendarWeek } from "../classes";
+import type { CalendarMonth, CalendarWeek } from "../classes/index.js";
 /** Returns an array of calendar weeks from an array of calendar months. */
 export declare function getWeeks(months: CalendarMonth[]): CalendarWeek[];

dist/cjs/helpers/getWeeks.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWeeks = void 0;
+exports.getWeeks = getWeeks;
 /** Returns an array of calendar weeks from an array of calendar months. */
@@ -11,3 +11,2 @@ function getWeeks(months) {
 }
-exports.getWeeks = getWeeks;
 //# sourceMappingURL=getWeeks.js.map

dist/cjs/helpers/index.d.ts

@@ -1,1 +0,1 @@
-export * from "./getDefaultClassNames";
+export * from "./getDefaultClassNames.js";

dist/cjs/helpers/index.js

@@ -18,3 +18,3 @@ "use strict";
 // Only export helpers that can be useful to other developers.
-__exportStar(require("./getDefaultClassNames"), exports);
+__exportStar(require("./getDefaultClassNames.js"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/helpers/useControlledValue.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
@@ -3,0 +2,0 @@ /**

dist/cjs/helpers/useControlledValue.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useControlledValue = void 0;
+exports.useControlledValue = useControlledValue;
 const react_1 = require("react");
@@ -22,3 +22,2 @@ /**
 }
-exports.useControlledValue = useControlledValue;
 //# sourceMappingURL=useControlledValue.js.map

dist/cjs/index.d.ts

@@ -1,12 +0,11 @@
-export * from "./DayPicker";
-export * from "./types";
-export * from "./classes";
-export * from "./components/custom-components";
-export * from "./contexts";
-export * from "./selection";
-export * from "./lib";
-export * from "./formatters";
-export * from "./helpers";
-export * from "./labels";
-export * from "./utils";
-export * from "./UI";
+export * from "./DayPicker.js";
+export * from "./types/index.js";
+export * from "./classes/index.js";
+export * from "./components/custom-components.js";
+export * from "./lib/index.js";
+export * from "./formatters/index.js";
+export * from "./helpers/index.js";
+export * from "./labels/index.js";
+export * from "./utils/index.js";
+export * from "./UI.js";
+export * from "./useDayPicker.js";

dist/cjs/index.js

@@ -17,14 +17,13 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DayPicker"), exports);
-__exportStar(require("./types"), exports);
-__exportStar(require("./classes"), exports);
-__exportStar(require("./components/custom-components"), exports);
-__exportStar(require("./contexts"), exports);
-__exportStar(require("./selection"), exports);
-__exportStar(require("./lib"), exports);
-__exportStar(require("./formatters"), exports);
-__exportStar(require("./helpers"), exports);
-__exportStar(require("./labels"), exports);
-__exportStar(require("./utils"), exports);
-__exportStar(require("./UI"), exports);
+__exportStar(require("./DayPicker.js"), exports);
+__exportStar(require("./types/index.js"), exports);
+__exportStar(require("./classes/index.js"), exports);
+__exportStar(require("./components/custom-components.js"), exports);
+__exportStar(require("./lib/index.js"), exports);
+__exportStar(require("./formatters/index.js"), exports);
+__exportStar(require("./helpers/index.js"), exports);
+__exportStar(require("./labels/index.js"), exports);
+__exportStar(require("./utils/index.js"), exports);
+__exportStar(require("./UI.js"), exports);
+__exportStar(require("./useDayPicker.js"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/jalali.d.ts

 import React from "react";
-import { type DayPickerProps } from "./";
+import { type DayPickerProps } from "./index.js";
 export declare function DayPicker(props: DayPickerProps): React.JSX.Element;

dist/cjs/jalali.js

@@ -29,10 +29,9 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DayPicker = void 0;
+exports.DayPicker = DayPicker;
 const react_1 = __importDefault(require("react"));
 const jalaliDateLib = __importStar(require("date-fns-jalali"));
-const _1 = require("./");
+const index_js_1 = require("./index.js");
 function DayPicker(props) {
-    return react_1.default.createElement(_1.DayPicker, { dateLib: jalaliDateLib, ...props });
+    return react_1.default.createElement(index_js_1.DayPicker, { dateLib: jalaliDateLib, ...props });
 }
-exports.DayPicker = DayPicker;
 //# sourceMappingURL=jalali.js.map

dist/cjs/labels/index.d.ts

@@ -1,9 +0,12 @@
-export * from "./labelDay";
-export * from "./labelCaption";
-export * from "./labelMonthDropdown";
-export * from "./labelNext";
-export * from "./labelPrevious";
-export * from "./labelWeekday";
-export * from "./labelWeekNumber";
-export * from "./labelWeekNumberHeader";
-export * from "./labelYearDropdown";
+export * from "./labelGrid.js";
+export * from "./labelGridcell.js";
+export * from "./labelDayButton.js";
+export * from "./labelNav.js";
+export * from "./labelGrid.js";
+export * from "./labelMonthDropdown.js";
+export * from "./labelNext.js";
+export * from "./labelPrevious.js";
+export * from "./labelWeekday.js";
+export * from "./labelWeekNumber.js";
+export * from "./labelWeekNumberHeader.js";
+export * from "./labelYearDropdown.js";

dist/cjs/labels/index.js

@@ -17,11 +17,14 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./labelDay"), exports);
-__exportStar(require("./labelCaption"), exports);
-__exportStar(require("./labelMonthDropdown"), exports);
-__exportStar(require("./labelNext"), exports);
-__exportStar(require("./labelPrevious"), exports);
-__exportStar(require("./labelWeekday"), exports);
-__exportStar(require("./labelWeekNumber"), exports);
-__exportStar(require("./labelWeekNumberHeader"), exports);
-__exportStar(require("./labelYearDropdown"), exports);
+__exportStar(require("./labelGrid.js"), exports);
+__exportStar(require("./labelGridcell.js"), exports);
+__exportStar(require("./labelDayButton.js"), exports);
+__exportStar(require("./labelNav.js"), exports);
+__exportStar(require("./labelGrid.js"), exports);
+__exportStar(require("./labelMonthDropdown.js"), exports);
+__exportStar(require("./labelNext.js"), exports);
+__exportStar(require("./labelPrevious.js"), exports);
+__exportStar(require("./labelWeekday.js"), exports);
+__exportStar(require("./labelWeekNumber.js"), exports);
+__exportStar(require("./labelWeekNumberHeader.js"), exports);
+__exportStar(require("./labelYearDropdown.js"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/labels/labelGrid.d.ts

@@ -1,8 +0,14 @@
-import type { FormatOptions } from "date-fns";
-import type { DateLib } from "../types";
+import type { LabelOptions } from "../lib/dateLib.js";
+import { DateLib } from "../types/index.js";
 /**
- * Return the default ARIA label for the month grid.
+ * Return an ARIA label for the month grid, that will be announced when entering
+ * the grid.
  *
  * @group Labels
  */
-export declare function labelGrid(month: Date, options?: FormatOptions, dateLib?: DateLib): string;
+export declare function labelGrid(date: Date, options?: LabelOptions, dateLib?: DateLib): string;
+/**
+ * @deprecated Use {@link labelGrid} instead.
+ * @protected
+ */
+export declare const labelCaption: typeof labelGrid;

dist/cjs/labels/labelGrid.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelGrid = void 0;
-const lib_1 = require("../lib");
+exports.labelCaption = void 0;
+exports.labelGrid = labelGrid;
+const index_js_1 = require("../lib/index.js");
 /**
- * Return the default ARIA label for the month grid.
+ * Return an ARIA label for the month grid, that will be announced when entering
+ * the grid.
  *
  * @group Labels
  */
-function labelGrid(month, options, dateLib = lib_1.dateLib) {
-    return dateLib.format(month, "LLLL y", options);
+function labelGrid(date, options, dateLib = index_js_1.dateLib) {
+    return dateLib.format(date, "LLLL y", options);
 }
-exports.labelGrid = labelGrid;
+/**
+ * @deprecated Use {@link labelGrid} instead.
+ * @protected
+ */
+exports.labelCaption = labelGrid;
 //# sourceMappingURL=labelGrid.js.map

dist/cjs/labels/labelMonthDropdown.d.ts

@@ -1,7 +0,7 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the WeekNumber element.
+ * Return the default ARIA label for the months dropdown element.
  *
  * @group Labels
  */
-export declare function labelMonthDropdown(options?: FormatOptions): string;
+export declare function labelMonthDropdown(options?: LabelOptions): string;

dist/cjs/labels/labelMonthDropdown.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelMonthDropdown = void 0;
+exports.labelMonthDropdown = labelMonthDropdown;
 /**
- * Return the default ARIA label for the WeekNumber element.
+ * Return the default ARIA label for the months dropdown element.
  *
@@ -13,3 +13,2 @@ * @group Labels
 }
-exports.labelMonthDropdown = labelMonthDropdown;
 //# sourceMappingURL=labelMonthDropdown.js.map

dist/cjs/labels/labelNext.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -9,2 +9,2 @@ * Return the default ARIA label for next month button.
 /** Undefined where there's no next month no navigate to. */
-month: Date | undefined, options?: FormatOptions): string;
+month: Date | undefined, options?: LabelOptions): string;

dist/cjs/labels/labelNext.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelNext = void 0;
+exports.labelNext = labelNext;
 /**
@@ -17,3 +17,2 @@ * Return the default ARIA label for next month button.
 }
-exports.labelNext = labelNext;
 //# sourceMappingURL=labelNext.js.map

dist/cjs/labels/labelPrevious.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -9,2 +9,2 @@ * Return the default ARIA label for next month button.
 /** Undefined where there's no previous month no navigate to. */
-month: Date | undefined, options?: FormatOptions): string;
+month: Date | undefined, options?: LabelOptions): string;

dist/cjs/labels/labelPrevious.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelPrevious = void 0;
+exports.labelPrevious = labelPrevious;
 /**
@@ -17,3 +17,2 @@ * Return the default ARIA label for next month button.
 }
-exports.labelPrevious = labelPrevious;
 //# sourceMappingURL=labelPrevious.js.map

dist/cjs/labels/labelWeekday.d.ts

@@ -1,3 +0,3 @@
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -8,2 +8,2 @@ * Return he default ARIA label for the Weekday element.
  */
-export declare function labelWeekday(date: Date, options?: FormatOptions, dateLib?: DateLib): string;
+export declare function labelWeekday(date: Date, options?: LabelOptions, dateLib?: DateLib): string;

dist/cjs/labels/labelWeekday.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelWeekday = void 0;
-const lib_1 = require("../lib");
+exports.labelWeekday = labelWeekday;
+const index_js_1 = require("../lib/index.js");
 /**
@@ -10,6 +10,5 @@ * Return he default ARIA label for the Weekday element.
  */
-function labelWeekday(date, options, dateLib = lib_1.dateLib) {
+function labelWeekday(date, options, dateLib = index_js_1.dateLib) {
     return dateLib.format(date, "cccc", options);
 }
-exports.labelWeekday = labelWeekday;
 //# sourceMappingURL=labelWeekday.js.map

dist/cjs/labels/labelWeekNumber.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -7,2 +7,2 @@ * Return the default ARIA label for the week number element.
  */
-export declare function labelWeekNumber(weekNumber: number, options?: FormatOptions): string;
+export declare function labelWeekNumber(weekNumber: number, options?: LabelOptions): string;

dist/cjs/labels/labelWeekNumber.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelWeekNumber = void 0;
+exports.labelWeekNumber = labelWeekNumber;
 /**
@@ -14,3 +14,2 @@ * Return the default ARIA label for the week number element.
 }
-exports.labelWeekNumber = labelWeekNumber;
 //# sourceMappingURL=labelWeekNumber.js.map

dist/cjs/labels/labelWeekNumberHeader.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -7,2 +7,2 @@ * Return the default ARIA label for the week number header element.
  */
-export declare function labelWeekNumberHeader(options?: FormatOptions): string;
+export declare function labelWeekNumberHeader(options?: LabelOptions): string;

dist/cjs/labels/labelWeekNumberHeader.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelWeekNumberHeader = void 0;
+exports.labelWeekNumberHeader = labelWeekNumberHeader;
 /**
@@ -14,3 +14,2 @@ * Return the default ARIA label for the week number header element.
 }
-exports.labelWeekNumberHeader = labelWeekNumberHeader;
 //# sourceMappingURL=labelWeekNumberHeader.js.map

dist/cjs/labels/labelYearDropdown.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -7,2 +7,2 @@ * Return the default ARIA label for the years dropdown.
  */
-export declare function labelYearDropdown(options?: FormatOptions): string;
+export declare function labelYearDropdown(options?: LabelOptions): string;

dist/cjs/labels/labelYearDropdown.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.labelYearDropdown = void 0;
+exports.labelYearDropdown = labelYearDropdown;
 /**
@@ -13,3 +13,2 @@ * Return the default ARIA label for the years dropdown.
 }
-exports.labelYearDropdown = labelYearDropdown;
 //# sourceMappingURL=labelYearDropdown.js.map

dist/cjs/lib/dateLib.d.ts

 import { GenericDateConstructor } from "date-fns";
+import type { FormatOptions as DateFnsFormatOptions, Locale as DateFnsLocale } from "date-fns";
 import { addDays } from "date-fns/addDays";
@@ -14,3 +15,2 @@ import { addMonths } from "date-fns/addMonths";
 import { getISOWeek } from "date-fns/getISOWeek";
-import { getUnixTime } from "date-fns/getUnixTime";
 import { getWeek } from "date-fns/getWeek";
@@ -32,12 +32,18 @@ import { isAfter } from "date-fns/isAfter";
 import { startOfYear } from "date-fns/startOfYear";
-/** @private */
-export type { Locale } from "date-fns";
-/** @private */
-export type { FormatOptions } from "date-fns";
-/** @private */
+/** The options for the {@link Formatters}. */
+export type FormatOptions = DateFnsFormatOptions;
+/** The options for the {@link Labels}. */
+export type LabelOptions = DateFnsFormatOptions;
+/** The locale used within DayPicker. */
+export type Locale = DateFnsLocale;
 export type { Month as DateFnsMonth } from "date-fns";
-/** The default date library to use with the date picker. */
+/**
+ * The default date library to use with the date picker.
+ *
+ * @private
+ * @internal
+ */
 export declare const dateLib: {
     /** The constructor of the date object. */
-    Date: GenericDateConstructor<Date>;
+    Date: GenericDateConstructor;
     addDays: typeof addDays;
@@ -55,3 +61,2 @@ addMonths: typeof addMonths;
     getISOWeek: typeof getISOWeek;
-    getUnixTime: typeof getUnixTime;
     getWeek: typeof getWeek;
@@ -58,0 +63,0 @@ isAfter: typeof isAfter;

dist/cjs/lib/dateLib.js

@@ -16,3 +16,2 @@ "use strict";
 const getISOWeek_1 = require("date-fns/getISOWeek");
-const getUnixTime_1 = require("date-fns/getUnixTime");
 const getWeek_1 = require("date-fns/getWeek");
@@ -34,3 +33,8 @@ const isAfter_1 = require("date-fns/isAfter");
 const startOfYear_1 = require("date-fns/startOfYear");
-/** The default date library to use with the date picker. */
+/**
+ * The default date library to use with the date picker.
+ *
+ * @private
+ * @internal
+ */
 exports.dateLib = {
@@ -51,3 +55,2 @@ /** The constructor of the date object. */
     getISOWeek: getISOWeek_1.getISOWeek,
-    getUnixTime: getUnixTime_1.getUnixTime,
     getWeek: getWeek_1.getWeek,
@@ -54,0 +57,0 @@ isAfter: isAfter_1.isAfter,

dist/cjs/lib/index.d.ts

@@ -1,1 +0,1 @@
-export * from "./dateLib";
+export * from "./dateLib.js";

dist/cjs/lib/index.js

@@ -17,3 +17,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./dateLib"), exports);
+__exportStar(require("./dateLib.js"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/selection/useMulti.d.ts

 import React from "react";
-import type { Modifiers, PropsMulti } from "../types";
-export type MultiContextValue<T> = {
-    setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => Date[] | undefined;
+import type { DateLib, DayPickerProps, Modifiers, PropsMulti, PropsMultiRequired } from "../types/index.js";
+export type UseMulti<T> = {
+    handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => Date[] | undefined;
     isSelected: (date: Date) => boolean;
@@ -13,14 +13,4 @@ } & (T extends {
 });
-/** @private */
-export declare function MultiProvider(props: React.PropsWithChildren<PropsMulti>): React.JSX.Element;
-/**
- * Access to the multi context to get the selected dates or update them.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export declare function useMulti<T extends {
-    required: boolean;
-}>(): MultiContextValue<T>;
+export declare function useMulti<T extends DayPickerProps>(props: T extends {
+    mode: "multiple";
+} ? PropsMulti | PropsMultiRequired : object, dateLib: DateLib): UseMulti<T>;

dist/cjs/selection/useMulti.js

@@ -6,10 +6,8 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMulti = exports.MultiProvider = void 0;
+exports.useMulti = useMulti;
 const react_1 = __importDefault(require("react"));
-const contexts_1 = require("../contexts");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const MultiContext = react_1.default.createContext(undefined);
-function useMultiContextValue({ required = false, min = undefined, max = undefined, selected, onSelect }) {
-    const { mode, dateLib: { isSameDay, Date } } = (0, contexts_1.useProps)();
-    const [dates, setDates] = react_1.default.useState(selected);
+function useMulti(props, dateLib) {
+    const { selected, required, onSelect, mode } = props;
+    const [dates, setDates] = react_1.default.useState(mode !== "multiple" ? undefined : selected);
+    const { isSameDay, Date } = dateLib;
     // Update the selected date if the required flag is set.
@@ -32,2 +30,3 @@ react_1.default.useEffect(() => {
     };
+    const { min, max } = props;
     const setSelected = (triggerDate, modifiers, e) => {
@@ -62,28 +61,6 @@ let newDates = [...(dates ?? [])];
         selected: dates,
-        setSelected,
+        handleSelect: setSelected,
         isSelected
     };
 }
-/** @private */
-function MultiProvider(props) {
-    const value = useMultiContextValue(props);
-    return (react_1.default.createElement(MultiContext.Provider, { value: value }, props.children));
-}
-exports.MultiProvider = MultiProvider;
-/**
- * Access to the multi context to get the selected dates or update them.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-function useMulti() {
-    const context = react_1.default.useContext(MultiContext);
-    if (!context) {
-        throw new Error("useMulti() must be used within a MultiContextProvider.");
-    }
-    return context;
-}
-exports.useMulti = useMulti;
 //# sourceMappingURL=useMulti.js.map

dist/cjs/selection/useRange.d.ts

 import React from "react";
-import { DateRange, Modifiers, PropsRange } from "../types";
-export type RangeContextValue<T> = {
-    setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => DateRange | undefined;
+import { DateLib, DateRange, DayPickerProps, Modifiers, PropsRange, PropsRangeRequired } from "../types/index.js";
+export type UseRange<T> = {
+    handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => DateRange | undefined;
     isSelected: (date: Date) => boolean;
+    isRangeStart: (date: Date) => boolean;
+    isRangeEnd: (date: Date) => boolean;
+    isRangeMiddle: (date: Date) => boolean;
 } & (T extends {
@@ -13,14 +16,4 @@ required: true;
 });
-/** @private */
-export declare function RangeProvider(props: React.PropsWithChildren<PropsRange>): React.JSX.Element;
-/**
- * Access to the range context to get the selected range or update it.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export declare function useRange<T extends {
-    required: boolean;
-}>(): RangeContextValue<T>;
+export declare function useRange<T extends DayPickerProps>(props: T extends {
+    mode: "range";
+} ? PropsRange | PropsRangeRequired : object, dateLib: DateLib): UseRange<T>;

dist/cjs/selection/useRange.js

@@ -6,16 +6,13 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRange = exports.RangeProvider = void 0;
+exports.useRange = useRange;
 const react_1 = __importDefault(require("react"));
-const contexts_1 = require("../contexts");
-const utils_1 = require("../utils");
-const isDateInRange_1 = require("../utils/isDateInRange");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const RangeContext = react_1.default.createContext(undefined);
-function useRangeContextValue({ required, min, max, selected, onSelect }) {
-    const { dateLib, mode } = (0, contexts_1.useProps)();
+const index_js_1 = require("../utils/index.js");
+const isDateInRange_js_1 = require("../utils/isDateInRange.js");
+function useRange(props, dateLib) {
+    const { mode, disabled, selected, required, onSelect } = props;
     const { differenceInCalendarDays } = dateLib;
-    const [range, setRange] = react_1.default.useState(selected);
+    const [range, setRange] = react_1.default.useState(mode === "range" ? selected : undefined);
     // Update the selected date if the required flag is set.
     react_1.default.useEffect(() => {
-        if (mode !== "multiple")
+        if (mode !== "range")
             return;
@@ -30,11 +27,14 @@ if (required && range === undefined) {
             return;
+        if (range === selected)
+            return;
         setRange(selected);
-    }, [mode, selected]);
-    const isSelected = required
-        ? (date) => (0, isDateInRange_1.isDateInRange)(date, range, dateLib)
-        : (date) => range && (0, isDateInRange_1.isDateInRange)(date, range, dateLib);
+    }, [mode, range, selected]);
+    const isSelected = (date) => range && (0, isDateInRange_js_1.isDateInRange)(date, range, dateLib);
     const setSelected = (triggerDate, modifiers, e) => {
+        if (mode !== "range")
+            return;
         const newRange = triggerDate
-            ? (0, utils_1.addToRange)(triggerDate, range, dateLib)
+            ? (0, index_js_1.addToRange)(triggerDate, range, dateLib)
             : undefined;
+        const { min, max } = props;
         if (min) {
@@ -56,2 +56,13 @@ if (newRange?.from &&
         }
+        if (newRange?.from && newRange.to) {
+            let newDate = newRange.from;
+            while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) {
+                newDate = dateLib.addDays(newDate, 1);
+                if (disabled && (0, index_js_1.dateMatchModifiers)(newDate, disabled, dateLib)) {
+                    newRange.from = triggerDate;
+                    newRange.to = undefined;
+                    break;
+                }
+            }
+        }
         setRange(newRange);
@@ -61,30 +72,25 @@ onSelect?.(newRange, triggerDate, modifiers, e);
     };
+    const isRangeStart = (date) => {
+        return (range && range.from && range.to && dateLib.isSameDay(date, range.from));
+    };
+    const isRangeEnd = (date) => {
+        return range && range.to && dateLib.isSameDay(date, range.to);
+    };
+    const isRangeMiddle = (date) => {
+        return (range &&
+            range.from &&
+            range.to &&
+            isSelected(date) &&
+            !isRangeStart(date) &&
+            !isRangeEnd(date));
+    };
     return {
         selected: range,
-        setSelected,
-        isSelected
+        handleSelect: setSelected,
+        isSelected,
+        isRangeStart,
+        isRangeEnd,
+        isRangeMiddle
     };
 }
-/** @private */
-function RangeProvider(props) {
-    const value = useRangeContextValue(props);
-    return (react_1.default.createElement(RangeContext.Provider, { value: value }, props.children));
-}
-exports.RangeProvider = RangeProvider;
-/**
- * Access to the range context to get the selected range or update it.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-function useRange() {
-    const context = react_1.default.useContext(RangeContext);
-    if (!context) {
-        throw new Error("useRange() must be used within a RangeContextProvider.");
-    }
-    return context;
-}
-exports.useRange = useRange;
 //# sourceMappingURL=useRange.js.map

dist/cjs/selection/useSingle.d.ts

 import React from "react";
-import { Modifiers, PropsSingle } from "../types";
-export type SingleContextValue<T> = {
-    setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
+import type { DateLib, DayPickerProps, Modifiers, PropsSingle, PropsSingleRequired } from "../types/index.js";
+export type UseSingle<T> = {
+    handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
     isSelected: (date: Date) => boolean;
@@ -13,12 +13,4 @@ } & (T extends {
 });
-/** @private */
-export declare function SingleProvider(props: React.PropsWithChildren<PropsSingle>): React.JSX.Element;
-/**
- * Access to the single context to get the selected date or update it.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export declare function useSingle(): SingleContextValue<any>;
+export declare function useSingle<T extends DayPickerProps>(props: T extends {
+    mode: "single";
+} ? PropsSingle | PropsSingleRequired : object, dateLib: DateLib): UseSingle<T>;

dist/cjs/selection/useSingle.js

@@ -6,16 +6,16 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSingle = exports.SingleProvider = void 0;
+exports.useSingle = useSingle;
 const react_1 = __importDefault(require("react"));
-const contexts_1 = require("../contexts");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const SingleContext = react_1.default.createContext(undefined);
-function useSingleContextValue({ required = false, selected, onSelect }) {
-    const [date, setDate] = react_1.default.useState(selected);
-    const { dateLib: { isSameDay }, today, mode } = (0, contexts_1.useProps)();
+function useSingle(props, dateLib) {
+    const { selected, required, onSelect, mode } = props;
+    const [date, setDate] = react_1.default.useState(mode !== "single" ? undefined : selected);
+    const { isSameDay, Date, startOfDay } = dateLib;
     // Update the selected date if the required flag is set.
     react_1.default.useEffect(() => {
+        if (mode !== "single")
+            return;
         if (required && date === undefined) {
-            setDate(today);
+            setDate(startOfDay(new Date()));
         }
-    }, [required, date, today]);
+    }, [required, date, Date, startOfDay, mode]);
     // Update the selected date if the `selected` value changes.
@@ -31,2 +31,4 @@ react_1.default.useEffect(() => {
     const setSelected = (triggerDate, modifiers, e) => {
+        if (mode !== "single")
+            return;
         let newDate = triggerDate;
@@ -38,29 +40,16 @@ if (!required && date && date && isSameDay(triggerDate, date)) {
         setDate(newDate);
-        onSelect?.(newDate, triggerDate, modifiers, e);
+        if (required) {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
+        else {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
         return newDate;
     };
-    return { selected: date, setSelected, isSelected };
+    return {
+        selected: date,
+        handleSelect: setSelected,
+        isSelected
+    };
 }
-/** @private */
-function SingleProvider(props) {
-    const value = useSingleContextValue(props);
-    return (react_1.default.createElement(SingleContext.Provider, { value: value }, props.children));
-}
-exports.SingleProvider = SingleProvider;
-/**
- * Access to the single context to get the selected date or update it.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-function useSingle() {
-    const context = react_1.default.useContext(SingleContext);
-    if (!context) {
-        throw new Error("useSingle() must be used within a SingleContextProvider");
-    }
-    return context;
-}
-exports.useSingle = useSingle;
 //# sourceMappingURL=useSingle.js.map

dist/cjs/types/deprecated.d.ts

@@ -1,10 +0,7 @@
-/// <reference types="react" />
-import { Calendar } from "../components/Calendar";
-import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption";
-import { Week, type WeekProps } from "../components/Week";
-import { useCalendar } from "../contexts";
-import { useProps, type PropsContextValue } from "../contexts";
-import { labelDay, labelNext, labelWeekday, labelWeekNumber } from "../labels";
-import type { PropsMulti, PropsRange, PropsSingle } from "./props";
-import type { Mode, DayEventHandler } from "./shared";
+import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption.js";
+import { Week, type WeekProps } from "../components/Week.js";
+import { labelDayButton, labelNext, labelWeekday, labelWeekNumber } from "../labels/index.js";
+import { useDayPicker } from "../useDayPicker.js";
+import type { PropsMulti, PropsRange, PropsSingle } from "./props.js";
+import type { Mode, DayEventHandler } from "./shared.js";
 /**
@@ -21,13 +18,6 @@ * @deprecated This type will be removed.
 /**
- * @deprecated This type has been renamed. Use `Calendar` instead.
- * @protected
- * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export declare const Root: typeof Calendar;
-/**
  * @deprecated This component has been renamed. Use `MonthCaption` instead.
  * @protected
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -44,3 +34,3 @@ export declare const Caption: typeof MonthCaption;
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -52,3 +42,3 @@ export type HeadRow = any;
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -113,18 +103,12 @@ export declare const Row: typeof Week;
 /**
- * @deprecated This type has been renamed to `useProps`.
+ * @deprecated This type has been removed to `useDayPicker`.
  * @protected
  * @group Hooks
  */
-export declare const useDayPicker: typeof useProps;
+export declare const useNavigation: typeof useDayPicker;
 /**
- * @deprecated This type has been renamed to `useCalendar`.
- * @protected
- * @group Hooks
- */
-export declare const useNavigation: typeof useCalendar;
-/**
  * @deprecated This hook has been removed. Use a custom `Day` component instead.
  * @protected
  * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -138,6 +122,6 @@ export type useDayRender = any;
 /**
- * @deprecated Use `typeof labelDay` instead.
+ * @deprecated Use `typeof labelDayButton` instead.
  * @protected
  */
-export type DayLabel = typeof labelDay;
+export type DayLabel = typeof labelDayButton;
 /**
@@ -193,6 +177,1 @@ * @deprecated Use `typeof labelNext` or `typeof labelPrevious` instead.
 export type DayTouchEventHandler = DayEventHandler<React.TouchEvent>;
-/**
- * @deprecated The type has been renamed. Use `PropsContext` instead.
- * @protected
- */
-export type DayPickerContext = PropsContextValue;

dist/cjs/types/deprecated.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useNavigation = exports.useDayPicker = exports.Row = exports.Caption = exports.Root = void 0;
+exports.useNavigation = exports.Row = exports.Caption = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const Calendar_1 = require("../components/Calendar");
-const MonthCaption_1 = require("../components/MonthCaption");
-const Week_1 = require("../components/Week");
-const contexts_1 = require("../contexts");
-const contexts_2 = require("../contexts");
+const MonthCaption_js_1 = require("../components/MonthCaption.js");
+const Week_js_1 = require("../components/Week.js");
+const useDayPicker_js_1 = require("../useDayPicker.js");
 /**
- * @deprecated This type has been renamed. Use `Calendar` instead.
- * @protected
- * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-exports.Root = Calendar_1.Calendar;
-/**
  * @deprecated This component has been renamed. Use `MonthCaption` instead.
  * @protected
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-exports.Caption = MonthCaption_1.MonthCaption;
+exports.Caption = MonthCaption_js_1.MonthCaption;
 /**
@@ -28,17 +19,11 @@ * @deprecated This component has been renamed. Use `Week` instead.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-exports.Row = Week_1.Week;
+exports.Row = Week_js_1.Week;
 /**
- * @deprecated This type has been renamed to `useProps`.
+ * @deprecated This type has been removed to `useDayPicker`.
  * @protected
  * @group Hooks
  */
-exports.useDayPicker = contexts_2.useProps;
-/**
- * @deprecated This type has been renamed to `useCalendar`.
- * @protected
- * @group Hooks
- */
-exports.useNavigation = contexts_1.useCalendar;
+exports.useNavigation = useDayPicker_js_1.useDayPicker;
 //# sourceMappingURL=deprecated.js.map

dist/cjs/types/index.d.ts

@@ -1,3 +0,3 @@
-export * from "./deprecated";
-export * from "./shared";
-export * from "./props";
+export * from "./deprecated.js";
+export * from "./shared.js";
+export * from "./props.js";

dist/cjs/types/index.js

@@ -17,5 +17,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./deprecated"), exports);
-__exportStar(require("./shared"), exports);
-__exportStar(require("./props"), exports);
+__exportStar(require("./deprecated.js"), exports);
+__exportStar(require("./shared.js"), exports);
+__exportStar(require("./props.js"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/types/props.d.ts

 import React from "react";
-import type { Locale } from "../lib/dateLib";
-import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, WeekNumberMouseEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared";
+import type { Locale } from "../lib/dateLib.js";
+import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared.js";
 /**
@@ -177,5 +177,12 @@ * The props for the `<DayPicker />` component.
     components?: CustomComponents;
-    /** Content to add to the grid as footer element. */
-    footer?: React.ReactNode;
     /**
+     * Add a footer to the calendar, acting as live region.
+     *
+     * Use this prop to communicate the calendar's status to screen readers.
+     * Prefer strings over complex UI elements.
+     *
+     * @see https://daypicker.dev/next/using-daypicker/accessibility
+     */
+    footer?: React.ReactNode | string;
+    /**
      * When a selection mode is set, DayPicker will focus the first selected day
@@ -261,2 +268,12 @@ * (if set) or the today's date (if not disabled).
     onMonthChange?: MonthChangeEventHandler;
+    /** Event handler when the next month button is clicked. */
+    onNextClick?: MonthChangeEventHandler;
+    /** Event handler when the previous month button is clicked. */
+    onPrevClick?: MonthChangeEventHandler;
+    /**
+     * Event handler when a week number is clicked
+     *
+     * @deprecated Use a custom `WeekNumber` component instead.
+     */
+    onWeekNumberClick?: any;
     /** Event handler when a day is clicked. */
@@ -268,38 +285,52 @@ onDayClick?: DayEventHandler<React.MouseEvent>;
     onDayBlur?: DayEventHandler<React.FocusEvent>;
-    /** Event handler when the mouse enters a day. */
-    onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
-    /** Event handler when the mouse leaves a day. */
-    onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
     /** Event handler when a key is pressed on a day. */
     onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
-    /** Event handler when a key is released on a day. */
+    /**
+     * Replace the default date library with a custom one.
+     *
+     * @private
+     * @since 9.0.0
+     * @experimental
+     */
+    dateLib?: Partial<DateLib> | undefined;
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayKeyUp?: DayEventHandler<React.KeyboardEvent>;
-    /** Event handler when a key is pressed and released on a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayKeyPress?: DayEventHandler<React.KeyboardEvent>;
-    /** Event handler when a pointer enters a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayPointerEnter?: DayEventHandler<React.PointerEvent>;
-    /** Event handler when a pointer leaves a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayPointerLeave?: DayEventHandler<React.PointerEvent>;
-    /** Event handler when a touch is cancelled on a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayTouchCancel?: DayEventHandler<React.TouchEvent>;
-    /** Event handler when a touch ends on a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayTouchEnd?: DayEventHandler<React.TouchEvent>;
-    /** Event handler when a touch moves on a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayTouchMove?: DayEventHandler<React.TouchEvent>;
-    /** Event handler when a touch starts on a day. */
-    onDayTouchStart?: DayEventHandler<React.TouchEvent>;
-    /** Event handler when the next month button is clicked. */
-    onNextClick?: MonthChangeEventHandler;
-    /** Event handler when the previous month button is clicked. */
-    onPrevClick?: MonthChangeEventHandler;
-    /** Event handler when a week number is clicked */
-    onWeekNumberClick?: WeekNumberMouseEventHandler;
     /**
-     * Replace the default date library with a custom one.
-     *
      * @private
-     * @since 9.0.0
-     * @experimental
+     * @deprecated Use a custom `DayButton` component instead.
      */
-    dateLib?: Partial<DateLib> | undefined;
+    onDayTouchStart?: DayEventHandler<React.TouchEvent>;
 }
@@ -376,2 +407,3 @@ /**
     selected?: DateRange | undefined;
+    disabled?: Matcher | Matcher[] | undefined;
     onSelect?: (selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
@@ -378,0 +410,0 @@ min?: number;

dist/cjs/types/shared.d.ts

@@ -1,7 +0,7 @@
-import type { MouseEvent, CSSProperties } from "react";
-import { UI, DayFlag, CalendarFlag, ChevronFlag, WeekNumberFlag, SelectionState } from "../UI";
-import * as components from "../components/custom-components";
-import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatYearCaption, formatYearDropdown } from "../formatters";
-import { labelDay, labelCaption, labelMonthDropdown, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } from "../labels";
-import { dateLib } from "../lib";
+import type { CSSProperties } from "react";
+import { UI, DayFlag, SelectionState } from "../UI.js";
+import * as components from "../components/custom-components.js";
+import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatYearCaption, formatYearDropdown } from "../formatters/index.js";
+import { labelDayButton, labelNav, labelGrid, labelGridcell, labelMonthDropdown, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } from "../labels/index.js";
+import { dateLib } from "../lib/index.js";
 /**
@@ -42,3 +42,3 @@ * Selection modes supported by DayPicker.
     formatWeekNumber: typeof formatWeekNumber;
-    /** Format the week day name in the header */
+    /** Format the week day name in the header. */
     formatWeekdayName: typeof formatWeekdayName;
@@ -48,17 +48,23 @@ };
 export type Labels = {
-    /** Return the label for the month dropdown. */
-    labelCaption: typeof labelCaption;
-    /** Return the label for the month dropdown. */
+    /** The label for the navigation toolbar. */
+    labelNav: typeof labelNav;
+    /** The label for the month grid. */
+    labelGrid: typeof labelGrid;
+    /** The label for the gridcell, when the calendar is not interactive. */
+    labelGridcell: typeof labelGridcell;
+    /** The label for the month dropdown. */
     labelMonthDropdown: typeof labelMonthDropdown;
-    /** Return the label for the year dropdown. */
+    /** The label for the year dropdown. */
     labelYearDropdown: typeof labelYearDropdown;
-    /** Return the label for the next month button. */
+    /** The label for the "next month" button. */
     labelNext: typeof labelNext;
-    /** Return the label for the previous month button. */
+    /** The label for the "previous month" button. */
     labelPrevious: typeof labelPrevious;
-    /** Return the label for the day cell. */
-    labelDay: typeof labelDay;
-    /** Return the label for the weekday. */
+    /** The label for the day button.. */
+    labelDayButton: typeof labelDayButton;
+    /** @deprecated Use {@link labelDayButton} instead. */
+    labelDay: typeof labelDayButton;
+    /** The label for the weekday. */
     labelWeekday: typeof labelWeekday;
-    /** Return the label for the week number. */
+    /** The label for the week number. */
     labelWeekNumber: typeof labelWeekNumber;
@@ -172,17 +178,9 @@ /**
 export type MonthChangeEventHandler = (month: Date) => void;
-/** The event handler when the week number is clicked. */
-export type WeekNumberMouseEventHandler = (
-/** The week number that has been clicked. */
-weekNumber: number, 
-/** The dates in the clicked week. */
-dates: Date[], 
-/** The mouse event that triggered this event. */
-e: MouseEvent) => void;
 /** Maps user interface elements, selection states, and flags to a CSS style. */
 export type Styles = {
-    [key in UI | SelectionState | DayFlag | CalendarFlag | ChevronFlag | WeekNumberFlag]: CSSProperties | undefined;
+    [key in UI | SelectionState | DayFlag]: CSSProperties | undefined;
 };
 /** Defines the class names for various UI components and states. */
 export type ClassNames = {
-    [key in UI | SelectionState | DayFlag | CalendarFlag | ChevronFlag | WeekNumberFlag]: string;
+    [key in UI | SelectionState | DayFlag]: string;
 };
@@ -189,0 +187,0 @@ /** The flags that are matching a day in the calendar. */

dist/cjs/UI.d.ts

@@ -11,9 +11,6 @@ /**
     ButtonPrevious = "button_previous",
-    /** The next button the navigation */
+    /** The next button the navigation. */
     ButtonNext = "button_next",
-    /**
-     * The calendar element: the root component displaying the months and the
-     * navigation bar. Extended by {@link CalendarFlag}.
-     */
-    Calendar = "calendar",
+    /** The root component displaying the months and the navigation bar. */
+    Root = "root",
     /** The Chevron SVG element used by navigation buttons and dropdowns. */
@@ -26,4 +23,4 @@ Chevron = "chevron",
     Day = "day",
-    /** The element containing the formatted day's date, inside the grid cell. */
-    DayDate = "day_date",
+    /** The button containing the formatted day's date, inside the grid cell. */
+    DayButton = "day_button",
     /** The caption label of the month (when not showing the dropdown navigation). */
@@ -40,3 +37,3 @@ CaptionLabel = "caption_label",
     /** The month grid. */
-    Month = "month",
+    MonthGrid = "month_grid",
     /** Contains the dropdown navigation or the caption label. */
@@ -46,7 +43,7 @@ MonthCaption = "month_caption",
     MonthsDropdown = "months_dropdown",
-    /** Wrapper of the {@link} grid. */
-    MonthWrapper = "month_wrapper",
+    /** Wrapper of the month grid. */
+    Month = "month",
     /** The container of the displayed months. */
     Months = "months",
-    /** The navigation bar with the previous and next buttons */
+    /** The navigation bar with the previous and next buttons. */
     Nav = "nav",
@@ -61,7 +58,6 @@ /** The row containing the week. */
     Weekdays = "weekdays",
-    /**
-     * The row header containing the week number. Extended by
-     * {@link WeekNumberFlag}.
-     */
+    /** The row header containing the week number. */
     WeekNumber = "week_number",
+    /** The row header containing the week number. */
+    WeekNumberHeader = "week_number_header",
     /** The dropdown with the years. */
@@ -72,10 +68,8 @@ YearsDropdown = "years_dropdown"
 export declare enum DayFlag {
-    /** The day is disabled */
+    /** The day is disabled. */
     disabled = "disabled",
-    /** The day is hidden */
+    /** The day is hidden. */
     hidden = "hidden",
-    /** The day is outside the current month */
+    /** The day is outside the current month. */
     outside = "outside",
-    /** The day is focusable. */
-    focusable = "focusable",
     /** The day is focused. */
@@ -100,23 +94,1 @@ focused = "focused",
 }
-/** Flags that can be applied to the {@link UI.Calendar} element. */
-export declare enum CalendarFlag {
-    /** Assigned when the week numbers are show. */
-    has_week_numbers = "has_week_numbers",
-    /** Assigned when the weekdays are hidden. */
-    no_weekdays = "no_weekdays",
-    /** Assigned when the calendar has multiple months. */
-    has_multiple_months = "has_multiple_months"
-}
-/** Flags that can be applied to the {@link UI.Chevron} element. */
-export declare enum ChevronFlag {
-    /** Assigned when the week numbers are show. */
-    disabled = "chevron_disabled"
-}
-/** Flags that can be applied to the {@link UI.WeekNumber} element. */
-export declare enum WeekNumberFlag {
-    /**
-     * Assigned when the week number is interactive, i.e. has an
-     * `onWeekNumberClick` event attached to it.
-     */
-    week_number_interactive = "week_number_interactive"
-}

dist/cjs/UI.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WeekNumberFlag = exports.ChevronFlag = exports.CalendarFlag = exports.SelectionState = exports.DayFlag = exports.UI = void 0;
+exports.SelectionState = exports.DayFlag = exports.UI = void 0;
 /**
@@ -15,9 +15,6 @@ * The UI elements composing DayPicker. These elements are mapped to
     UI["ButtonPrevious"] = "button_previous";
-    /** The next button the navigation */
+    /** The next button the navigation. */
     UI["ButtonNext"] = "button_next";
-    /**
-     * The calendar element: the root component displaying the months and the
-     * navigation bar. Extended by {@link CalendarFlag}.
-     */
-    UI["Calendar"] = "calendar";
+    /** The root component displaying the months and the navigation bar. */
+    UI["Root"] = "root";
     /** The Chevron SVG element used by navigation buttons and dropdowns. */
@@ -30,4 +27,4 @@ UI["Chevron"] = "chevron";
     UI["Day"] = "day";
-    /** The element containing the formatted day's date, inside the grid cell. */
-    UI["DayDate"] = "day_date";
+    /** The button containing the formatted day's date, inside the grid cell. */
+    UI["DayButton"] = "day_button";
     /** The caption label of the month (when not showing the dropdown navigation). */
@@ -44,3 +41,3 @@ UI["CaptionLabel"] = "caption_label";
     /** The month grid. */
-    UI["Month"] = "month";
+    UI["MonthGrid"] = "month_grid";
     /** Contains the dropdown navigation or the caption label. */
@@ -50,7 +47,7 @@ UI["MonthCaption"] = "month_caption";
     UI["MonthsDropdown"] = "months_dropdown";
-    /** Wrapper of the {@link} grid. */
-    UI["MonthWrapper"] = "month_wrapper";
+    /** Wrapper of the month grid. */
+    UI["Month"] = "month";
     /** The container of the displayed months. */
     UI["Months"] = "months";
-    /** The navigation bar with the previous and next buttons */
+    /** The navigation bar with the previous and next buttons. */
     UI["Nav"] = "nav";
@@ -65,7 +62,6 @@ /** The row containing the week. */
     UI["Weekdays"] = "weekdays";
-    /**
-     * The row header containing the week number. Extended by
-     * {@link WeekNumberFlag}.
-     */
+    /** The row header containing the week number. */
     UI["WeekNumber"] = "week_number";
+    /** The row header containing the week number. */
+    UI["WeekNumberHeader"] = "week_number_header";
     /** The dropdown with the years. */
@@ -77,10 +73,8 @@ UI["YearsDropdown"] = "years_dropdown";
 (function (DayFlag) {
-    /** The day is disabled */
+    /** The day is disabled. */
     DayFlag["disabled"] = "disabled";
-    /** The day is hidden */
+    /** The day is hidden. */
     DayFlag["hidden"] = "hidden";
-    /** The day is outside the current month */
+    /** The day is outside the current month. */
     DayFlag["outside"] = "outside";
-    /** The day is focusable. */
-    DayFlag["focusable"] = "focusable";
     /** The day is focused. */
@@ -106,27 +100,2 @@ DayFlag["focused"] = "focused";
 })(SelectionState || (exports.SelectionState = SelectionState = {}));
-/** Flags that can be applied to the {@link UI.Calendar} element. */
-var CalendarFlag;
-(function (CalendarFlag) {
-    /** Assigned when the week numbers are show. */
-    CalendarFlag["has_week_numbers"] = "has_week_numbers";
-    /** Assigned when the weekdays are hidden. */
-    CalendarFlag["no_weekdays"] = "no_weekdays";
-    /** Assigned when the calendar has multiple months. */
-    CalendarFlag["has_multiple_months"] = "has_multiple_months";
-})(CalendarFlag || (exports.CalendarFlag = CalendarFlag = {}));
-/** Flags that can be applied to the {@link UI.Chevron} element. */
-var ChevronFlag;
-(function (ChevronFlag) {
-    /** Assigned when the week numbers are show. */
-    ChevronFlag["disabled"] = "chevron_disabled";
-})(ChevronFlag || (exports.ChevronFlag = ChevronFlag = {}));
-/** Flags that can be applied to the {@link UI.WeekNumber} element. */
-var WeekNumberFlag;
-(function (WeekNumberFlag) {
-    /**
-     * Assigned when the week number is interactive, i.e. has an
-     * `onWeekNumberClick` event attached to it.
-     */
-    WeekNumberFlag["week_number_interactive"] = "week_number_interactive";
-})(WeekNumberFlag || (exports.WeekNumberFlag = WeekNumberFlag = {}));
 //# sourceMappingURL=UI.js.map

dist/cjs/utc.d.ts

 import React from "react";
-import { type DayPickerProps } from "./";
+import { type DayPickerProps } from "./index.js";
 export declare function DayPicker(props: DayPickerProps): React.JSX.Element;

dist/cjs/utc.js

@@ -6,10 +6,9 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DayPicker = void 0;
+exports.DayPicker = DayPicker;
 const react_1 = __importDefault(require("react"));
 const utc_1 = require("@date-fns/utc");
-const _1 = require("./");
+const index_js_1 = require("./index.js");
 function DayPicker(props) {
-    return react_1.default.createElement(_1.DayPicker, { dateLib: { Date: utc_1.UTCDate }, ...props });
+    return react_1.default.createElement(index_js_1.DayPicker, { dateLib: { Date: utc_1.UTCDate }, ...props });
 }
-exports.DayPicker = DayPicker;
 //# sourceMappingURL=utc.js.map

dist/cjs/utils/addToRange.d.ts

@@ -1,2 +0,2 @@
-import type { DateRange, DateLib } from "../types";
+import type { DateRange, DateLib } from "../types/index.js";
 /**
@@ -3,0 +3,0 @@ * Add a day to an existing range.

dist/cjs/utils/addToRange.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addToRange = void 0;
-const lib_1 = require("../lib");
+exports.addToRange = addToRange;
+const index_js_1 = require("../lib/index.js");
 /**
@@ -13,3 +13,3 @@ * Add a day to an existing range.
  */
-function addToRange(date, range, dateLib = lib_1.dateLib) {
+function addToRange(date, range, dateLib = index_js_1.dateLib) {
     const { from, to } = range || {};
@@ -49,3 +49,2 @@ const { isSameDay, isAfter, isBefore } = dateLib;
 }
-exports.addToRange = addToRange;
 //# sourceMappingURL=addToRange.js.map

dist/cjs/utils/dateMatchModifiers.d.ts

@@ -1,4 +0,7 @@
-import type { DateLib, Matcher } from "../types";
+import type { DateLib, Matcher } from "../types/index.js";
+/** Returns true if `value` is an array of valid dates. */
+export declare function isDatesArray(value: unknown, dateLib: DateLib): value is Date[];
 /**
- * Returns whether a day matches against at least one of the given Matchers.
+ * Returns whether a day matches against at least one of the given
+ * {@link Matcher}`.
  *
@@ -20,2 +23,2 @@ * ```tsx
  */
-export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[], dateUtils?: DateLib): boolean;
+export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[], dateLib: DateLib): boolean;

dist/cjs/utils/dateMatchModifiers.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dateMatchModifiers = void 0;
-const lib_1 = require("../lib");
-const isDateInRange_1 = require("./isDateInRange");
-const typeguards_1 = require("./typeguards");
-/** Returns true if `value` is a Date type. */
-function isDateType(value) {
-    return lib_1.dateLib.isDate(value);
-}
+exports.isDatesArray = isDatesArray;
+exports.dateMatchModifiers = dateMatchModifiers;
+const isDateInRange_js_1 = require("./isDateInRange.js");
+const typeguards_js_1 = require("./typeguards.js");
 /** Returns true if `value` is an array of valid dates. */
-function isArrayOfDates(value) {
-    return Array.isArray(value) && value.every(lib_1.dateLib.isDate);
+function isDatesArray(value, dateLib) {
+    return Array.isArray(value) && value.every(dateLib.isDate);
 }
 /**
- * Returns whether a day matches against at least one of the given Matchers.
+ * Returns whether a day matches against at least one of the given
+ * {@link Matcher}`.
  *
@@ -33,5 +30,5 @@ * ```tsx
  */
-function dateMatchModifiers(date, matchers, dateUtils = lib_1.dateLib) {
+function dateMatchModifiers(date, matchers, dateLib) {
     const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers;
-    const { isSameDay, differenceInCalendarDays, isAfter } = dateUtils;
+    const { isSameDay, differenceInCalendarDays, isAfter } = dateLib;
     return matchersArr.some((matcher) => {
@@ -41,15 +38,15 @@ if (typeof matcher === "boolean") {
         }
-        if (isDateType(matcher)) {
+        if (dateLib.isDate(matcher)) {
             return isSameDay(date, matcher);
         }
-        if (isArrayOfDates(matcher)) {
+        if (isDatesArray(matcher, dateLib)) {
             return matcher.includes(date);
         }
-        if ((0, typeguards_1.isDateRange)(matcher)) {
-            return (0, isDateInRange_1.isDateInRange)(date, matcher, dateUtils);
+        if ((0, typeguards_js_1.isDateRange)(matcher)) {
+            return (0, isDateInRange_js_1.isDateInRange)(date, matcher, dateLib);
         }
-        if ((0, typeguards_1.isDayOfWeekType)(matcher)) {
+        if ((0, typeguards_js_1.isDayOfWeekType)(matcher)) {
             return matcher.dayOfWeek.includes(date.getDay());
         }
-        if ((0, typeguards_1.isDateInterval)(matcher)) {
+        if ((0, typeguards_js_1.isDateInterval)(matcher)) {
             const diffBefore = differenceInCalendarDays(matcher.before, date);
@@ -67,6 +64,6 @@ const diffAfter = differenceInCalendarDays(matcher.after, date);
         }
-        if ((0, typeguards_1.isDateAfterType)(matcher)) {
+        if ((0, typeguards_js_1.isDateAfterType)(matcher)) {
             return differenceInCalendarDays(date, matcher.after) > 0;
         }
-        if ((0, typeguards_1.isDateBeforeType)(matcher)) {
+        if ((0, typeguards_js_1.isDateBeforeType)(matcher)) {
             return differenceInCalendarDays(matcher.before, date) > 0;
@@ -80,3 +77,2 @@ }
 }
-exports.dateMatchModifiers = dateMatchModifiers;
 //# sourceMappingURL=dateMatchModifiers.js.map

dist/cjs/utils/index.d.ts

@@ -1,4 +0,4 @@
-export * from "./addToRange";
-export * from "./dateMatchModifiers";
-export * from "./isDateInRange";
-export * from "./typeguards";
+export * from "./addToRange.js";
+export * from "./dateMatchModifiers.js";
+export * from "./isDateInRange.js";
+export * from "./typeguards.js";

dist/cjs/utils/index.js

@@ -17,6 +17,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./addToRange"), exports);
-__exportStar(require("./dateMatchModifiers"), exports);
-__exportStar(require("./isDateInRange"), exports);
-__exportStar(require("./typeguards"), exports);
+__exportStar(require("./addToRange.js"), exports);
+__exportStar(require("./dateMatchModifiers.js"), exports);
+__exportStar(require("./isDateInRange.js"), exports);
+__exportStar(require("./typeguards.js"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/utils/isDateInRange.d.ts

@@ -1,2 +0,2 @@
-import type { DateRange, DateLib } from "../types";
+import type { DateRange, DateLib } from "../types/index.js";
 /**
@@ -3,0 +3,0 @@ * Determines whether a given date is inside a specified date range.

dist/cjs/utils/isDateInRange.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isDateInRange = void 0;
-const lib_1 = require("../lib");
+exports.isDateInRange = isDateInRange;
+const index_js_1 = require("../lib/index.js");
 /**
@@ -10,3 +10,3 @@ * Determines whether a given date is inside a specified date range.
  */
-function isDateInRange(date, range, dateLib = lib_1.dateLib) {
+function isDateInRange(date, range, dateLib = index_js_1.dateLib) {
     let { from, to } = range;
@@ -31,3 +31,2 @@ const { differenceInCalendarDays, isSameDay } = dateLib;
 }
-exports.isDateInRange = isDateInRange;
 //# sourceMappingURL=isDateInRange.js.map

dist/cjs/utils/typeguards.d.ts

@@ -1,2 +0,2 @@
-import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types";
+import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types/index.js";
 /**
@@ -27,8 +27,2 @@ * Returns true if `matcher` is of type `DateInterval`.
 /**
- * Returns true if `value` is a `DayOfWeek` type.
- *
- * @group Utilities
- */
-export declare function isDayOfWeekType(value: unknown): value is DayOfWeek;
-/**
  * Returns true if the props are for a single selection mode.
@@ -62,2 +56,8 @@ *
 /**
+ * Returns true if `value` is a `DayOfWeek` type.
+ *
+ * @group Utilities
+ */
+export declare function isDayOfWeekType(value: unknown): value is DayOfWeek;
+/**
  * @deprecated This function has been renamed Use `isRange` instead.
@@ -64,0 +64,0 @@ * @protected

dist/cjs/utils/typeguards.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isDayPickerRange = exports.isRange = exports.isDayPickerMultiple = exports.isMulti = exports.isDayPickerSingle = exports.isSingle = exports.isDayOfWeekType = exports.isDateBeforeType = exports.isDateAfterType = exports.isDateRange = exports.isDateInterval = void 0;
+exports.isDayPickerRange = exports.isDayPickerMultiple = exports.isDayPickerSingle = void 0;
+exports.isDateInterval = isDateInterval;
+exports.isDateRange = isDateRange;
+exports.isDateAfterType = isDateAfterType;
+exports.isDateBeforeType = isDateBeforeType;
+exports.isSingle = isSingle;
+exports.isMulti = isMulti;
+exports.isRange = isRange;
+exports.isDayOfWeekType = isDayOfWeekType;
 /**
@@ -15,3 +23,2 @@ * Returns true if `matcher` is of type `DateInterval`.
 }
-exports.isDateInterval = isDateInterval;
 /**
@@ -25,3 +32,2 @@ * Returns true if `value` is a `DateRange` type.
 }
-exports.isDateRange = isDateRange;
 /**
@@ -35,3 +41,2 @@ * Returns true if `value` is of type `DateAfter`.
 }
-exports.isDateAfterType = isDateAfterType;
 /**
@@ -45,13 +50,3 @@ * Returns true if `value` is of type `DateBefore`.
 }
-exports.isDateBeforeType = isDateBeforeType;
 /**
- * Returns true if `value` is a `DayOfWeek` type.
- *
- * @group Utilities
- */
-function isDayOfWeekType(value) {
-    return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
-}
-exports.isDayOfWeekType = isDayOfWeekType;
-/**
  * Returns true if the props are for a single selection mode.
@@ -64,3 +59,2 @@ *
 }
-exports.isSingle = isSingle;
 /**
@@ -79,3 +73,2 @@ * @deprecated This function has been renamed Use `isSingle` instead.
 }
-exports.isMulti = isMulti;
 /**
@@ -94,4 +87,11 @@ * @deprecated This function has been renamed Use `isMulti` instead.
 }
-exports.isRange = isRange;
 /**
+ * Returns true if `value` is a `DayOfWeek` type.
+ *
+ * @group Utilities
+ */
+function isDayOfWeekType(value) {
+    return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
+}
+/**
  * @deprecated This function has been renamed Use `isRange` instead.
@@ -98,0 +98,0 @@ * @protected

dist/esm/classes/CalendarDay.d.ts

@@ -1,2 +0,2 @@
-import type { DateLib } from "../types";
+import type { DateLib } from "../types/index.js";
 /**
@@ -11,3 +11,7 @@ * Represent the day displayed in the calendar.
     constructor(date: Date, displayMonth: Date, dateLib?: DateLib);
-    /** The utility functions to manipulate dates. */
+    /**
+     * The utility functions to manipulate dates.
+     *
+     * @private
+     */
     readonly dateLib: DateLib;
@@ -31,2 +35,4 @@ /**
     readonly date: Date;
+    /** A unique identifier for the day. */
+    readonly uid: string;
     /**
@@ -33,0 +39,0 @@ * Check if the day is the same as the given day: considering if it is in the

dist/esm/classes/CalendarDay.js

@@ -1,2 +0,2 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
@@ -15,2 +15,6 @@ * Represent the day displayed in the calendar.
         this.dateLib = dateLib;
+        const { format } = dateLib;
+        this.uid =
+            format(date, "yyyyMMdd") +
+                (this.outside ? `-` + format(displayMonth, "yyyyMMdd") : "");
     }
@@ -17,0 +21,0 @@ /**

dist/esm/classes/CalendarMonth.d.ts

@@ -1,2 +0,2 @@
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarWeek } from "./CalendarWeek.js";
 /** Represent a month in a calendar year. Contains the weeks within the month. */
@@ -3,0 +3,0 @@ export declare class CalendarMonth {

dist/esm/classes/CalendarWeek.d.ts

@@ -1,2 +0,2 @@
-import { CalendarDay } from "./CalendarDay";
+import { CalendarDay } from "./CalendarDay.js";
 /** Represent a week in a calendar month. */
@@ -3,0 +3,0 @@ export declare class CalendarWeek {

dist/esm/classes/index.d.ts

@@ -1,3 +0,3 @@
-export * from "./CalendarDay";
-export * from "./CalendarMonth";
-export * from "./CalendarWeek";
+export * from "./CalendarDay.js";
+export * from "./CalendarMonth.js";
+export * from "./CalendarWeek.js";

dist/esm/classes/index.js

@@ -1,4 +0,4 @@
-export * from "./CalendarDay";
-export * from "./CalendarMonth";
-export * from "./CalendarWeek";
+export * from "./CalendarDay.js";
+export * from "./CalendarMonth.js";
+export * from "./CalendarWeek.js";
 //# sourceMappingURL=index.js.map

dist/esm/components/Button.d.ts

@@ -1,2 +0,2 @@
-import React, { type ButtonHTMLAttributes } from "react";
+import React from "react";
 /**
@@ -10,3 +10,3 @@ * Render the button elements in the calendar.
  */
-export declare function Button(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+export declare function Button(props: JSX.IntrinsicElements["button"]): React.JSX.Element;
 export type ButtonProps = Parameters<typeof Button>[0];

dist/esm/components/Chevron.d.ts

@@ -8,7 +8,16 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function Chevron(props: {
+    className?: string;
+    /**
+     * The size of the chevron.
+     *
+     * @defaultValue 24
+     */
     size?: number;
+    /** Set to `true` to disable the chevron. */
+    disabled?: boolean;
+    /** The orientation of the chevron. */
     orientation?: "up" | "down" | "left" | "right";
 }): React.JSX.Element;

dist/esm/components/Chevron.js

 import React from "react";
-import { ChevronFlag, UI } from "../UI";
-import { useProps } from "../contexts";
 /**
@@ -10,14 +8,7 @@ * Render the chevron icon used in the navigation buttons and dropdowns.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function Chevron(props) {
-    const { size = 24, orientation = "left" } = props;
-    const { classNames, disableNavigation } = useProps();
-    const svgClassName = [
-        classNames[UI.Chevron],
-        disableNavigation ? classNames[ChevronFlag.disabled] : ""
-    ]
-        .join(" ")
-        .trim();
-    return (React.createElement("svg", { className: svgClassName, width: size, height: size, viewBox: "0 0 24 24" },
+    const { size = 24, orientation = "left", className } = props;
+    return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24" },
         orientation === "up" && (React.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" })),
@@ -24,0 +15,0 @@ orientation === "down" && (React.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" })),

dist/esm/components/custom-components.d.ts

@@ -1,19 +0,22 @@
-export * from "./Button";
-export * from "./Chevron";
-export * from "./Day";
-export * from "./DayDate";
-export * from "./Dropdown";
-export * from "./DropdownNav";
-export * from "./Footer";
-export * from "./Month";
-export * from "./MonthCaption";
-export * from "./Months";
-export * from "./MonthsDropdown";
-export * from "./Nav";
-export * from "./Option";
-export * from "./Select";
-export * from "./Week";
-export * from "./Weekday";
-export * from "./Weekdays";
-export * from "./WeekNumber";
-export * from "./YearsDropdown";
+export * from "./Button.js";
+export * from "./Chevron.js";
+export * from "./CaptionLabel.js";
+export * from "./Day.js";
+export * from "./DayButton.js";
+export * from "./Dropdown.js";
+export * from "./DropdownNav.js";
+export * from "./Footer.js";
+export * from "./Month.js";
+export * from "./MonthCaption.js";
+export * from "./MonthGrid.js";
+export * from "./Months.js";
+export * from "./Nav.js";
+export * from "./Option.js";
+export * from "./Root.js";
+export * from "./Select.js";
+export * from "./Weeks.js";
+export * from "./Week.js";
+export * from "./Weekday.js";
+export * from "./Weekdays.js";
+export * from "./WeekNumber.js";
+export * from "./WeekNumberHeader.js";

dist/esm/components/custom-components.js

@@ -1,20 +0,23 @@
-export * from "./Button";
-export * from "./Chevron";
-export * from "./Day";
-export * from "./DayDate";
-export * from "./Dropdown";
-export * from "./DropdownNav";
-export * from "./Footer";
-export * from "./Month";
-export * from "./MonthCaption";
-export * from "./Months";
-export * from "./MonthsDropdown";
-export * from "./Nav";
-export * from "./Option";
-export * from "./Select";
-export * from "./Week";
-export * from "./Weekday";
-export * from "./Weekdays";
-export * from "./WeekNumber";
-export * from "./YearsDropdown";
+export * from "./Button.js";
+export * from "./Chevron.js";
+export * from "./CaptionLabel.js";
+export * from "./Day.js";
+export * from "./DayButton.js";
+export * from "./Dropdown.js";
+export * from "./DropdownNav.js";
+export * from "./Footer.js";
+export * from "./Month.js";
+export * from "./MonthCaption.js";
+export * from "./MonthGrid.js";
+export * from "./Months.js";
+export * from "./Nav.js";
+export * from "./Option.js";
+export * from "./Root.js";
+export * from "./Select.js";
+export * from "./Weeks.js";
+export * from "./Week.js";
+export * from "./Weekday.js";
+export * from "./Weekdays.js";
+export * from "./WeekNumber.js";
+export * from "./WeekNumberHeader.js";
 //# sourceMappingURL=custom-components.js.map

dist/esm/components/Day.d.ts

 import React from "react";
-import type { ReactNode } from "react";
-import type { CalendarDay } from "../classes";
-import type { Modifiers } from "../types";
+import type { CalendarDay } from "../classes/index.js";
+import type { Modifiers } from "../types/index.js";
 /**
@@ -19,5 +18,3 @@ * Render the gridcell of a day in the calendar and handle the interaction and
     modifiers: Modifiers;
-    children?: ReactNode;
-    rootProps: Pick<JSX.IntrinsicElements["div"], "className" | "style" | "tabIndex" | "aria-colindex" | "aria-disabled" | "aria-hidden" | "aria-label" | "aria-selected" | "onClick" | "onBlur" | "onFocus" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onTouchCancel" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "ref" | "role">;
-}): React.JSX.Element;
+} & JSX.IntrinsicElements["td"]): React.JSX.Element;
 export type DayProps = Parameters<typeof Day>[0];

dist/esm/components/Day.js

@@ -14,4 +14,5 @@ import React from "react";
 export function Day(props) {
-    return React.createElement("div", { ...props.rootProps }, props.children);
+    const { day, modifiers, ...tdProps } = props;
+    return React.createElement("td", { ...tdProps });
 }
 //# sourceMappingURL=Day.js.map

dist/esm/components/Dropdown.d.ts

@@ -1,2 +0,4 @@
-import React, { type SelectHTMLAttributes } from "react";
+import React from "react";
+import { UI } from "../UI.js";
+import type { ClassNames, CustomComponents } from "../types/index.js";
 /** An option to use in the dropdown. Maps to the `<option>` HTML element. */
@@ -20,8 +22,9 @@ export type DropdownOption = {
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function Dropdown(props: {
+    components: Pick<Required<CustomComponents>, "Select" | "Option" | "Chevron">;
+    classNames: Pick<ClassNames, UI.DropdownRoot | UI.Dropdown | UI.CaptionLabel | UI.Chevron>;
     options?: DropdownOption[] | undefined;
-    rootClassName?: string;
-} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;
+} & Omit<JSX.IntrinsicElements["select"], "children">): React.JSX.Element;
 export type DropdownProps = Parameters<typeof Dropdown>[0];

dist/esm/components/Dropdown.js

 import React from "react";
-import { UI } from "../UI";
-import { useProps } from "../contexts";
-import { Chevron as DefaultChevron } from "./Chevron";
-import { Option as DefaultOption } from "./Option";
-import { Select as DefaultSelect } from "./Select";
+import { UI } from "../UI.js";
 /**
@@ -13,19 +9,15 @@ * Render a dropdown component to use in the navigation bar.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function Dropdown(props) {
-    const { options, rootClassName, className, ...selectProps } = props;
-    const { classNames, components } = useProps();
-    const cssClassRoot = [classNames[UI.DropdownRoot], rootClassName].join(" ");
+    const { options, className, components, classNames, ...selectProps } = props;
+    const cssClassRoot = [classNames[UI.DropdownRoot]].join(" ");
     const cssClassSelect = [classNames[UI.Dropdown], className].join(" ");
-    const Select = components?.Select ?? DefaultSelect;
-    const Option = components?.Option ?? DefaultOption;
-    const Chevron = components?.Chevron ?? DefaultChevron;
     const selectedOption = options?.find(({ value }) => value === selectProps.value);
     return (React.createElement("span", { className: cssClassRoot },
-        React.createElement(Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (React.createElement(Option, { key: value, value: value, disabled: disabled }, label)))),
+        React.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (React.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))),
         React.createElement("span", { className: classNames[UI.CaptionLabel], "aria-hidden": true },
             selectedOption?.label,
-            React.createElement(Chevron, { orientation: "down", size: 18 }))));
+            React.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI.Chevron] }))));
 }
 //# sourceMappingURL=Dropdown.js.map

dist/esm/components/DropdownNav.d.ts

 import React from "react";
-import type { CalendarMonth } from "../classes";
 /**
- * Render the dropdowns to navigate between months.
+ * Render the the navigation dropdowns.
  *
@@ -9,14 +8,5 @@ * Use the `components` prop to swap this component with a custom one.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function DropdownNav(props: {
-    /** The month where the dropdown navigation is displayed. */
-    month: CalendarMonth;
-    /** Whether the user can change the month. */
-    showMonths?: boolean;
-    /** Whether the user can change the year. */
-    showYears?: boolean;
-    /** The index where this month is displayed. */
-    index: number;
-}): React.JSX.Element;
+export declare function DropdownNav(props: JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type DropdownNavProps = Parameters<typeof DropdownNav>[0];

dist/esm/components/DropdownNav.js

 import React from "react";
-import { UI } from "../UI";
-import { useProps } from "../contexts";
-import { MonthsDropdown } from "./MonthsDropdown";
-import { YearsDropdown } from "./YearsDropdown";
 /**
- * Render the dropdowns to navigate between months.
+ * Render the the navigation dropdowns.
  *
@@ -12,10 +8,7 @@ * Use the `components` prop to swap this component with a custom one.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function DropdownNav(props) {
-    const { classNames, styles, formatters: { formatMonthDropdown, formatYearDropdown } } = useProps();
-    return (React.createElement("div", { className: classNames[UI.DropdownNav], style: styles?.[UI.DropdownNav] },
-        props.showMonths ? (React.createElement(MonthsDropdown, { month: props.month })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(props.month.date.getMonth()))),
-        props.showYears ? (React.createElement(YearsDropdown, { month: props.month })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown(props.month.date.getFullYear())))));
+    return React.createElement("div", { ...props });
 }
 //# sourceMappingURL=DropdownNav.js.map

dist/esm/components/Footer.d.ts

@@ -1,2 +0,2 @@
-import React, { type HTMLProps } from "react";
+import React from "react";
 /**
@@ -8,5 +8,5 @@ * Component wrapping the footer.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Footer(props: Pick<HTMLProps<HTMLElement>, "children" | "className" | "style">): React.JSX.Element;
+export declare function Footer(props: JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type FooterProps = Parameters<typeof Footer>[0];

dist/esm/components/Footer.js

@@ -8,7 +8,7 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function Footer(props) {
-    return React.createElement("div", { ...props }, props.children);
+    return React.createElement("div", { ...props });
 }
 //# sourceMappingURL=Footer.js.map

dist/esm/components/Month.d.ts

 import React from "react";
-import type { CalendarMonth } from "../classes/CalendarMonth";
+import type { CalendarMonth } from "../classes/CalendarMonth.js";
 /**
@@ -10,10 +10,10 @@ * Render the grid with the weekday header row and the weeks for the given
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function Month(props: {
     /** The month where the grid is displayed. */
-    month: CalendarMonth;
+    calendarMonth: CalendarMonth;
     /** The index where this month is displayed. */
-    index: number;
-}): React.JSX.Element;
+    displayIndex: number;
+} & JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type MonthProps = Parameters<typeof Month>[0];

dist/esm/components/Month.js

 import React from "react";
-import { UI } from "../UI";
-import { useProps } from "../contexts";
-import { MonthCaption as DefaultMonthCaption } from "./MonthCaption";
-import { Week as DefaultWeek } from "./Week";
-import { Weekdays as DefaultWeekdays } from "./Weekdays";
 /**
@@ -14,18 +9,8 @@ * Render the grid with the weekday header row and the weeks for the given
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function Month(props) {
-    const { id, mode, hideWeekdayRow, components, classNames, styles } = useProps();
-    const reactId = React.useId();
-    const captionId = id ? `${id}-caption-${props.index}` : reactId;
-    const gridId = id ? `${id}-grid-${props.index}` : reactId;
-    const Weekdays = components?.Weekdays ?? DefaultWeekdays;
-    const MonthCaption = components?.MonthCaption ?? DefaultMonthCaption;
-    const Week = components?.Week ?? DefaultWeek;
-    return (React.createElement("div", { className: classNames[UI.MonthWrapper], style: styles?.[UI.MonthWrapper] },
-        React.createElement(MonthCaption, { id: captionId, month: props.month, index: props.index }),
-        React.createElement("div", { id: gridId, role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-labelledby": captionId, className: classNames[UI.Month], style: styles?.[UI.Month] },
-            React.createElement(Weekdays, null),
-            React.createElement("div", { role: "rowgroup", className: classNames[UI.Weeks], style: styles?.[UI.Weeks] }, props.month.weeks.map((week, i) => (React.createElement(Week, { key: week.weekNumber, week: week, "aria-rowindex": i + (hideWeekdayRow ? 1 : 2) })))))));
+    const { calendarMonth, displayIndex, ...divProps } = props;
+    return React.createElement("div", { ...divProps }, props.children);
 }
 //# sourceMappingURL=Month.js.map

dist/esm/components/MonthCaption.d.ts

 import React from "react";
-import type { CalendarMonth } from "../classes";
+import type { CalendarMonth } from "../classes/index.js";
 /**
@@ -9,12 +9,10 @@ * Render the caption of a month in the calendar.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function MonthCaption(props: {
     /** The month where the grid is displayed. */
-    month: CalendarMonth;
-    /** Used for the aria-label. */
-    id: string;
+    calendarMonth: CalendarMonth;
     /** The index where this month is displayed. */
-    index: number;
-}): React.JSX.Element;
+    displayIndex: number;
+} & JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type MonthCaptionProps = Parameters<typeof MonthCaption>[0];

dist/esm/components/MonthCaption.js

 import React from "react";
-import { UI } from "../UI";
-import { useProps } from "../contexts";
-import { DropdownNav } from "./DropdownNav";
 /**
@@ -11,8 +8,8 @@ * Render the caption of a month in the calendar.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function MonthCaption(props) {
-    const { classNames, captionLayout, dateLib, formatters: { formatCaption }, labels: { labelCaption }, locale, styles } = useProps();
-    return (React.createElement("div", { id: props.id, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption] }, captionLayout?.startsWith("dropdown") ? (React.createElement(DropdownNav, { month: props.month, index: props.index, showMonths: captionLayout === "dropdown" || captionLayout === "dropdown-months", showYears: captionLayout === "dropdown" || captionLayout === "dropdown-years" })) : (React.createElement("span", { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite", "aria-label": labelCaption(props.month.date, { locale }, dateLib) ?? undefined }, formatCaption(props.month.date, { locale }, dateLib)))));
+    const { calendarMonth, displayIndex, ...divProps } = props;
+    return React.createElement("div", { ...divProps });
 }
 //# sourceMappingURL=MonthCaption.js.map

dist/esm/components/Months.d.ts

 import React from "react";
-import type { HTMLProps } from "react";
 /**
  * Component wrapping the month grids.
  *
- * Use the `components` prop to swap this component with a custom one.
- *
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Months(props: Pick<HTMLProps<HTMLElement>, "children" | "className" | "style">): React.JSX.Element;
+export declare function Months(props: JSX.IntrinsicElements["div"]): React.JSX.Element;
 export type MonthsProps = Parameters<typeof Months>[0];

dist/esm/components/Months.js

@@ -5,10 +5,8 @@ import React from "react";
  *
- * Use the `components` prop to swap this component with a custom one.
- *
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function Months(props) {
-    return React.createElement("div", { ...props }, props.children);
+    return React.createElement("div", { ...props });
 }
 //# sourceMappingURL=Months.js.map

dist/esm/components/Nav.d.ts

 import React from "react";
 /**
- * Render the navigation buttons to change the month.
+ * Render the toolbar with the navigation button.
  *
@@ -8,4 +8,5 @@ * Use the `components` prop to swap this component with a custom one.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Nav(): React.JSX.Element;
+export declare function Nav(props: JSX.IntrinsicElements["div"]): React.JSX.Element;
+export type NavProps = Parameters<typeof Nav>[0];

dist/esm/components/Nav.js

 import React from "react";
-import { UI } from "../UI";
-import { useCalendar, useProps } from "../contexts";
-import { Button as DefaultButton } from "./Button";
-import { Chevron as DefaultChevron } from "./Chevron";
 /**
- * Render the navigation buttons to change the month.
+ * Render the toolbar with the navigation button.
  *
@@ -12,27 +8,7 @@ * Use the `components` prop to swap this component with a custom one.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export function Nav() {
-    const { classNames, styles, labels: { labelNext, labelPrevious }, locale, components, id, onNextClick, onPrevClick } = useProps();
-    const calendar = useCalendar();
-    const handlePreviousClick = () => {
-        if (!calendar.previousMonth)
-            return;
-        calendar.goToPreviousMonth();
-        onPrevClick?.(calendar.previousMonth);
-    };
-    const handleNextClick = () => {
-        if (!calendar.nextMonth)
-            return;
-        calendar.goToNextMonth();
-        onNextClick?.(calendar.nextMonth);
-    };
-    const Button = components?.Button ?? DefaultButton;
-    const Chevron = components?.Chevron ?? DefaultChevron;
-    return (React.createElement("div", { role: "toolbar", className: classNames[UI.Nav], style: styles?.[UI.Nav] },
-        React.createElement(Button, { type: "button", name: "previous-month", className: classNames[UI.ButtonPrevious], tabIndex: calendar.previousMonth ? undefined : -1, disabled: calendar.previousMonth ? undefined : true, "aria-label": labelPrevious(calendar.previousMonth, { locale }), "aria-controls": id, onClick: handlePreviousClick },
-            React.createElement(Chevron, null)),
-        React.createElement(Button, { type: "button", name: "next-month", className: classNames[UI.ButtonNext], tabIndex: calendar.nextMonth ? undefined : -1, disabled: calendar.nextMonth ? undefined : true, "aria-label": labelNext(calendar.nextMonth, { locale }), "aria-controls": id, onClick: handleNextClick },
-            React.createElement(Chevron, { orientation: "right" }))));
+export function Nav(props) {
+    return React.createElement("div", { ...props });
 }
 //# sourceMappingURL=Nav.js.map

dist/esm/components/Option.d.ts

 import React from "react";
-import type { OptionHTMLAttributes } from "react";
 /**
@@ -9,5 +8,5 @@ * Render the `option` element.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Option(props: OptionHTMLAttributes<HTMLOptionElement>): React.JSX.Element;
+export declare function Option(props: JSX.IntrinsicElements["option"]): React.JSX.Element;
 export type OptionProps = Parameters<typeof Option>[0];

dist/esm/components/Option.js

@@ -8,3 +8,3 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -11,0 +11,0 @@ export function Option(props) {

dist/esm/components/Select.d.ts

 import React from "react";
-import type { SelectHTMLAttributes } from "react";
 /**
@@ -9,5 +8,5 @@ * Render the `select` element.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Select(props: SelectHTMLAttributes<HTMLSelectElement>): React.JSX.Element;
+export declare function Select(props: JSX.IntrinsicElements["select"]): React.JSX.Element;
 export type SelectProps = Parameters<typeof Select>[0];

dist/esm/components/Select.js

@@ -8,3 +8,3 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -11,0 +11,0 @@ export function Select(props) {

dist/esm/components/Week.d.ts

 import React from "react";
-import type { CalendarWeek } from "../classes";
+import type { CalendarWeek } from "../classes/index.js";
 /**
@@ -9,8 +9,7 @@ * Render a row in the calendar, with the days and the week number.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export declare function Week(props: {
-    ["aria-rowindex"]: number;
     week: CalendarWeek;
-}): React.JSX.Element;
+} & JSX.IntrinsicElements["tr"]): React.JSX.Element;
 export type WeekProps = Parameters<typeof Week>[0];

dist/esm/components/Week.js

 import React from "react";
-import { UI } from "../UI";
-import { useProps } from "../contexts";
-import { DayWrapper } from "./DayWrapper";
-import { WeekNumber as DefaultWeekNumber } from "./WeekNumber";
 /**
@@ -12,11 +8,8 @@ * Render a row in the calendar, with the days and the week number.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function Week(props) {
-    const { styles, classNames, showWeekNumber, components, dateLib: { getUnixTime } } = useProps();
-    const WeekNumber = components?.WeekNumber ?? DefaultWeekNumber;
-    return (React.createElement("div", { role: "row", "aria-rowindex": props["aria-rowindex"], className: classNames[UI.Week], style: styles?.[UI.Week] },
-        showWeekNumber && React.createElement(WeekNumber, { week: props.week }),
-        props.week.days.map((day, i) => (React.createElement(DayWrapper, { day: day, "aria-colindex": showWeekNumber ? i + 2 : i + 1, key: getUnixTime(day.date) })))));
+    const { week, ...trProps } = props;
+    return React.createElement("tr", { ...trProps });
 }
 //# sourceMappingURL=Week.js.map

dist/esm/components/Weekday.d.ts

@@ -8,9 +8,5 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Weekday(props: {
-    ["aria-colindex"]?: number | undefined;
-    ["aria-label"]?: string | undefined;
-    weekday?: Date;
-}): React.JSX.Element;
+export declare function Weekday(props: JSX.IntrinsicElements["th"]): React.JSX.Element;
 export type WeekdayProps = Parameters<typeof Weekday>[0];

dist/esm/components/Weekday.js

 import React from "react";
-import { UI } from "../UI";
-import { useProps } from "../contexts";
 /**
@@ -10,13 +8,7 @@ * Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export function Weekday(props) {
-    const { classNames, dateLib, formatters: { formatWeekdayName }, labels: { labelWeekday, labelWeekNumberHeader }, locale, hideWeekdayRow, styles } = useProps();
-    return (React.createElement("span", { role: "columnheader", "aria-colindex": props["aria-colindex"], "aria-label": props.weekday
-            ? labelWeekday(props.weekday, { locale }, dateLib)
-            : labelWeekNumberHeader({ locale }), className: classNames[UI.Weekday], style: styles?.[UI.Weekday] }, !hideWeekdayRow &&
-        (props.weekday
-            ? formatWeekdayName(props.weekday, { locale }, dateLib)
-            : "#")));
+    return React.createElement("th", { ...props });
 }
 //# sourceMappingURL=Weekday.js.map

dist/esm/components/Weekdays.d.ts

@@ -8,4 +8,5 @@ import React from "react";
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export declare function Weekdays(): React.JSX.Element;
+export declare function Weekdays(props: JSX.IntrinsicElements["tr"]): React.JSX.Element;
+export type WeekdaysProps = Parameters<typeof Weekdays>[0];

dist/esm/components/Weekdays.js

 import React from "react";
-import { UI } from "../UI";
-import { useProps } from "../contexts";
-import { getWeekdays } from "../helpers/getWeekdays";
-import { Weekday as DefaultWeekday } from "./Weekday";
 /**
@@ -12,12 +8,8 @@ * Render the row with the weekday names.
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
-export function Weekdays() {
-    const { classNames, components, dateLib, hideWeekdayRow, ISOWeek, locale, showWeekNumber, styles, weekStartsOn } = useProps();
-    const weekdays = getWeekdays(locale, weekStartsOn, ISOWeek, dateLib);
-    const Weekday = components?.Weekday ?? DefaultWeekday;
-    return (React.createElement("div", { role: "row", hidden: hideWeekdayRow, "aria-rowindex": 1, style: styles?.[UI.Weekdays], className: classNames[UI.Weekdays], onClick: (e) => e.stopPropagation() },
-        showWeekNumber && React.createElement(Weekday, { "aria-colindex": 1 }),
-        weekdays.map((weekday, i) => (React.createElement(Weekday, { key: i, weekday: weekday, "aria-colindex": showWeekNumber ? i + 2 : i + 1 })))));
+export function Weekdays(props) {
+    return (React.createElement("thead", null,
+        React.createElement("tr", { ...props })));
 }
 //# sourceMappingURL=Weekdays.js.map

dist/esm/components/WeekNumber.d.ts

 import React from "react";
-import type { CalendarWeek } from "../classes";
+import type { CalendarWeek } from "../classes/index.js";
 /**
@@ -12,4 +12,5 @@ * Render the cell with the number of the week.
 export declare function WeekNumber(props: {
+    /** The week to render. */
     week: CalendarWeek;
-}): React.JSX.Element;
+} & JSX.IntrinsicElements["td"]): React.JSX.Element;
 export type WeekNumberProps = Parameters<typeof WeekNumber>[0];

dist/esm/components/WeekNumber.js

 import React from "react";
-import { UI, WeekNumberFlag } from "../UI";
-import { useProps } from "../contexts";
 /**
@@ -13,9 +11,5 @@ * Render the cell with the number of the week.
 export function WeekNumber(props) {
-    const { classNames, formatters: { formatWeekNumber }, labels: { labelWeekNumber }, locale, styles, onWeekNumberClick } = useProps();
-    const isInteractive = Boolean(onWeekNumberClick);
-    return (React.createElement("div", { role: "rowheader", "aria-colindex": 1, "aria-label": labelWeekNumber(props.week.weekNumber, { locale }), className: [
-            classNames[UI.WeekNumber],
-            isInteractive ? classNames[WeekNumberFlag.week_number_interactive] : ""
-        ].join(" "), style: styles?.[UI.WeekNumber], tabIndex: isInteractive ? 0 : undefined, onClick: (e) => onWeekNumberClick?.(props.week.weekNumber, props.week.days.map((day) => day.date), e) }, formatWeekNumber(props.week.weekNumber)));
+    const { week, ...tdProps } = props;
+    return React.createElement("td", { ...tdProps });
 }
 //# sourceMappingURL=WeekNumber.js.map

dist/esm/DayPicker.d.ts

 import React from "react";
-import type { DayPickerProps } from "./types";
+import type { DayPickerProps } from "./types/index.js";
 /**
@@ -4,0 +4,0 @@ * Render the date picker calendar.

dist/esm/DayPicker.js

 import React from "react";
-import { Calendar } from "./components/Calendar";
-import { ContextProviders } from "./contexts/providers";
+import { UI, DayFlag, SelectionState } from "./UI.js";
+import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js";
+import { getComponents } from "./helpers/getComponents.js";
+import { getDataAttributes } from "./helpers/getDataAttributes.js";
+import { getDateLib } from "./helpers/getDateLib.js";
+import { getDefaultClassNames } from "./helpers/getDefaultClassNames.js";
+import { getDropdownMonths } from "./helpers/getDropdownMonths.js";
+import { getDropdownYears } from "./helpers/getDropdownYears.js";
+import { getFormatters } from "./helpers/getFormatters.js";
+import { getStyleForModifiers } from "./helpers/getStyleForModifiers.js";
+import { getWeekdays } from "./helpers/getWeekdays.js";
+import * as defaultLabels from "./labels/index.js";
+import { useCalendar } from "./useCalendar.js";
+import { dayPickerContext } from "./useDayPicker.js";
+import { useFocus } from "./useFocus.js";
+import { useModifiers } from "./useModifiers.js";
+import { useSelection } from "./useSelection.js";
 /**
@@ -11,5 +26,196 @@ * Render the date picker calendar.
 export function DayPicker(props) {
-    return (React.createElement(ContextProviders, { ...props },
-        React.createElement(Calendar, null)));
+    const reactId = React.useId();
+    const id = props.id ?? reactId;
+    const dateLib = getDateLib(props.dateLib);
+    const components = getComponents(props.components);
+    const formatters = getFormatters(props.formatters);
+    const labels = { ...defaultLabels, ...props.labels };
+    const classNames = { ...getDefaultClassNames(), ...props.classNames };
+    const numberOfMonths = props.numberOfMonths ?? 1;
+    const calendar = useCalendar(props, dateLib);
+    const modifiers = useModifiers(props, calendar, dateLib);
+    const selection = useSelection(props, dateLib);
+    const focus = useFocus(props, calendar, modifiers, dateLib);
+    const { captionLayout, dir, locale, ISOWeek, mode, modifiersClassNames, modifiersStyles, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onPrevClick, onNextClick, showWeekNumber, styles, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens } = props;
+    const { formatCaption, formatDay, formatMonthDropdown, formatWeekNumber, formatWeekNumberHeader, formatWeekdayName, formatYearDropdown } = formatters;
+    const { labelDayButton, labelGridcell, labelGrid, labelMonthDropdown, labelNav, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } = labels;
+    const weekdays = getWeekdays(locale, weekStartsOn, ISOWeek, dateLib);
+    const isInteractive = mode !== undefined || onDayClick !== undefined;
+    const handlePreviousClick = () => {
+        if (!calendar.previousMonth)
+            return;
+        calendar.goToPreviousMonth();
+        onPrevClick?.(calendar.previousMonth);
+    };
+    const handleNextClick = () => {
+        if (!calendar.nextMonth)
+            return;
+        calendar.goToNextMonth();
+        onNextClick?.(calendar.nextMonth);
+    };
+    const handleDayClick = (day, m) => {
+        return (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            selection?.handleSelect(day.date, m, e);
+            focus.setFocused(day);
+            onDayClick?.(day.date, m, e);
+        };
+    };
+    const handleDayFocus = (day, m) => {
+        return (e) => {
+            focus.setFocused(day);
+            onDayFocus?.(day.date, m, e);
+        };
+    };
+    const handleDayBlur = (day, m) => {
+        return (e) => {
+            focus.blur();
+            onDayBlur?.(day.date, m, e);
+        };
+    };
+    const handleDayKeyDown = (day, m) => {
+        return (e) => {
+            switch (e.key) {
+                case "ArrowLeft":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dir === "rtl" ? focus.focusDayAfter() : focus.focusDayBefore();
+                    break;
+                case "ArrowRight":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dir === "rtl" ? focus.focusDayBefore() : focus.focusDayAfter();
+                    break;
+                case "ArrowDown":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    focus.focusWeekAfter();
+                    break;
+                case "ArrowUp":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    focus.focusWeekBefore();
+                    break;
+                case " ":
+                case "Enter":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    selection?.handleSelect(day.date, m, e);
+                    break;
+                case "PageUp":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.shiftKey ? focus.focusYearBefore() : focus.focusMonthBefore();
+                    break;
+                case "PageDown":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.shiftKey ? focus.focusYearAfter() : focus.focusMonthAfter();
+                    break;
+                case "Home":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    focus.focusStartOfWeek();
+                    break;
+                case "End":
+                    e.preventDefault();
+                    e.stopPropagation();
+                    focus.focusEndOfWeek();
+                    break;
+            }
+            onDayKeyDown?.(day.date, m, e);
+        };
+    };
+    const formatOptions = {
+        locale,
+        weekStartsOn,
+        firstWeekContainsDate,
+        useAdditionalWeekYearTokens,
+        useAdditionalDayOfYearTokens
+    };
+    const labelOptions = formatOptions;
+    return (React.createElement(dayPickerContext.Provider, { value: { ...calendar, ...selection, ...modifiers } },
+        React.createElement("div", { className: [classNames[UI.Root], props.className]
+                .filter(Boolean)
+                .join(" "), style: { ...styles?.[UI.Root], ...props.style }, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, "data-interactive": isInteractive || undefined, "data-multiple-months": numberOfMonths > 1 || undefined, "data-week-numbers": showWeekNumber || undefined, ...getDataAttributes(props) },
+            React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
+                !props.hideNavigation && (React.createElement(components.Nav, { role: "toolbar", className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav() },
+                    React.createElement(components.Button, { type: "button", className: classNames[UI.ButtonPrevious], tabIndex: calendar.previousMonth ? undefined : -1, disabled: calendar.previousMonth ? undefined : true, "aria-label": labelPrevious(calendar.previousMonth, {
+                            locale
+                        }), "aria-controls": id, onClick: handlePreviousClick },
+                        React.createElement(components.Chevron, { disabled: calendar.previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: "left" })),
+                    React.createElement(components.Button, { type: "button", className: classNames[UI.ButtonNext], tabIndex: calendar.nextMonth ? undefined : -1, disabled: calendar.nextMonth ? undefined : true, "aria-label": labelNext(calendar.nextMonth, labelOptions), "aria-controls": id, onClick: handleNextClick },
+                        React.createElement(components.Chevron, { disabled: calendar.previousMonth ? undefined : true, orientation: "right", className: classNames[UI.Chevron] })))),
+                calendar.months.map((calendarMonth, displayIndex) => {
+                    const captionId = `${id}-caption-${displayIndex}`;
+                    const handleMonthChange = (e) => {
+                        const selectedMonth = Number(e.target.value);
+                        const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth);
+                        calendar.goToMonth(month);
+                    };
+                    const handleYearChange = (e) => {
+                        const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value));
+                        calendar.goToMonth(month);
+                    };
+                    const dropdownMonths = getDropdownMonths(calendarMonth.date, calendar.navigationStartMonth, calendar.navigationEndMonth, formatters, locale, dateLib);
+                    const dropdownYears = getDropdownYears(calendar.months[0].date, calendar.navigationStartMonth, calendar.navigationEndMonth, formatters, dateLib);
+                    return (React.createElement(components.Month, { className: classNames[UI.Month], style: styles?.[UI.Month], key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
+                        React.createElement(components.MonthCaption, { className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], id: captionId, calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.DropdownNav], style: styles?.[UI.DropdownNav] },
+                            captionLayout === "dropdown" ||
+                                captionLayout === "dropdown-months" ? (React.createElement(components.Dropdown, { "aria-label": labelMonthDropdown(), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange, options: dropdownMonths, style: styles?.[UI.Dropdown], value: calendarMonth.date.getMonth() })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatMonthDropdown(calendarMonth.date.getMonth()))),
+                            captionLayout === "dropdown" ||
+                                captionLayout === "dropdown-years" ? (React.createElement(components.Dropdown, { "aria-label": labelYearDropdown(labelOptions), classNames: classNames, components: components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange, options: dropdownYears, style: styles?.[UI.Dropdown], value: calendarMonth.date.getFullYear() })) : (React.createElement("span", { role: "status", "aria-live": "polite" }, formatYearDropdown(calendarMonth.date.getFullYear()))))) : (React.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, formatOptions, dateLib)))),
+                        React.createElement(components.MonthGrid, { role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid(calendarMonth.date, labelOptions, dateLib) ||
+                                undefined, className: classNames[UI.MonthGrid], style: styles?.[UI.MonthGrid] },
+                            React.createElement(components.Weekdays, { className: classNames[UI.Weekdays], hidden: props.hideWeekdayRow, role: "row", style: styles?.[UI.Weekdays] },
+                                showWeekNumber && (React.createElement(components.WeekNumberHeader, { "aria-label": labelWeekNumberHeader(labelOptions), className: classNames[UI.WeekNumberHeader], role: "columnheader", style: styles?.[UI.WeekNumberHeader] }, !props.hideWeekdayRow && formatWeekNumberHeader())),
+                                weekdays.map((weekday, i) => (React.createElement(components.Weekday, { "aria-label": labelWeekday(weekday, labelOptions, dateLib), className: classNames[UI.Weekday], key: i, role: "columnheader", style: styles?.[UI.Weekday] }, formatWeekdayName(weekday, formatOptions, dateLib))))),
+                            React.createElement(components.Weeks, { className: classNames[UI.Weeks], role: "rowgroup", style: styles?.[UI.Weeks] }, calendarMonth.weeks.map((week, weekIndex) => {
+                                return (React.createElement(components.Week, { className: classNames[UI.Week], key: week.weekNumber, role: "row", style: styles?.[UI.Week], week: week },
+                                    showWeekNumber && (React.createElement(components.WeekNumber, { week: week, role: "rowheader", style: styles?.[UI.WeekNumber], "aria-label": labelWeekNumber(week.weekNumber, {
+                                            locale
+                                        }), className: classNames[UI.WeekNumber] }, formatWeekNumber(week.weekNumber))),
+                                    week.days.map((day, dayIndex) => {
+                                        const m = modifiers.getModifiers(day);
+                                        if (!m.disabled) {
+                                            if (selection?.isSelected(day.date) &&
+                                                !m.disabled) {
+                                                m[SelectionState.selected] = true;
+                                            }
+                                            if (mode === "range") {
+                                                const { isRangeEnd, isRangeStart, isRangeMiddle } = selection;
+                                                if (isRangeStart(day.date)) {
+                                                    m[SelectionState.range_start] = true;
+                                                }
+                                                if (isRangeMiddle(day.date)) {
+                                                    m[SelectionState.range_middle] = true;
+                                                }
+                                                if (isRangeEnd(day.date)) {
+                                                    m[SelectionState.range_end] = true;
+                                                }
+                                            }
+                                        }
+                                        const isFocused = Boolean(focus.focused?.isEqualTo(day));
+                                        const style = {
+                                            ...getStyleForModifiers(m, modifiersStyles),
+                                            ...styles?.[UI.Day]
+                                        };
+                                        const className = [
+                                            classNames[UI.Day],
+                                            ...getClassNamesForModifiers(m, classNames, modifiersClassNames),
+                                            ...(isFocused
+                                                ? [classNames[DayFlag.focused]]
+                                                : [])
+                                        ];
+                                        return (React.createElement(components.Day, { key: `${dateLib.format(day.date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`, day: day, modifiers: m, role: "gridcell", className: className.join(" "), style: style, "aria-hidden": m.hidden || undefined, "aria-selected": m.selected || undefined, "aria-label": !isInteractive
+                                                ? labelGridcell(day.date, m, labelOptions, dateLib)
+                                                : undefined, "data-day": dateLib.format(day.date, "yyyy-MM-dd"), "data-month": numberOfMonths > 1
+                                                ? dateLib.format(day.date, "yyyy-MM")
+                                                : undefined, "data-selected": m.selected || undefined, "data-disabled": m.disabled || undefined, "data-hidden": m.hidden || undefined, "data-focused": isFocused || undefined }, isInteractive ? (React.createElement(components.DayButton, { className: classNames[UI.DayButton], style: styles?.[UI.DayButton], day: day, modifiers: m, disabled: m.disabled || undefined, tabIndex: focus.isFocusTarget(day) ? 0 : -1, "aria-label": labelDayButton(day.date, m, labelOptions, dateLib), onClick: handleDayClick(day, m), onBlur: handleDayBlur(day, m), onFocus: handleDayFocus(day, m), onKeyDown: handleDayKeyDown(day, m) }, formatDay(day.date, formatOptions, dateLib))) : (formatDay(day.date, formatOptions, dateLib))));
+                                    })));
+                            })))));
+                })),
+            props.footer && (React.createElement(components.Footer, { className: classNames[UI.Footer], style: styles?.[UI.Footer], role: "status", "aria-live": "polite" }, props.footer)))));
 }
 //# sourceMappingURL=DayPicker.js.map

dist/esm/formatters/formatCaption.d.ts

@@ -1,3 +0,3 @@
-import { FormatOptions } from "../lib";
-import type { DateLib } from "../types";
+import { FormatOptions } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -4,0 +4,0 @@ * The default formatter for the caption element.

dist/esm/formatters/formatCaption.js

@@ -1,2 +0,2 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
@@ -3,0 +3,0 @@ * The default formatter for the caption element.

dist/esm/formatters/formatDay.d.ts

@@ -1,3 +0,3 @@
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { FormatOptions } from "../lib/dateLib.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -4,0 +4,0 @@ * The default formatter for the day grid cell element.

dist/esm/formatters/formatDay.js

@@ -1,2 +0,2 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
@@ -3,0 +3,0 @@ * The default formatter for the day grid cell element.

dist/esm/formatters/formatMonthDropdown.d.ts

@@ -10,2 +10,2 @@ /**
 /** The locale to use for formatting. */
-locale?: import("date-fns/locale/types").Locale): string;
+locale?: import("date-fns").Locale): string;

dist/esm/formatters/formatMonthDropdown.js

@@ -1,2 +0,2 @@
-import { enUS } from "../lib/locales";
+import { enUS } from "../lib/locales.js";
 /**
@@ -3,0 +3,0 @@ * The default formatter for the month dropdown value.

dist/esm/formatters/formatWeekdayName.d.ts

@@ -1,3 +0,3 @@
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { FormatOptions } from "../lib/dateLib.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -4,0 +4,0 @@ * The default formatter for the name of the weekday.

dist/esm/formatters/formatWeekdayName.js

@@ -1,2 +0,2 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
@@ -3,0 +3,0 @@ * The default formatter for the name of the weekday.

dist/esm/formatters/formatWeekNumber.d.ts

 /**
  * The default formatter for the week numbers.
  *
+ * @param weekNumber - The week number to format. `0` when heading of the week
+ *   numbers.
  * @group Formatters
  */
-export declare function formatWeekNumber(weekNumber: number): string;
+export declare function formatWeekNumber(weekNumber: number | 0): string;

dist/esm/formatters/formatWeekNumber.js

 /**
  * The default formatter for the week numbers.
  *
+ * @param weekNumber - The week number to format. `0` when heading of the week
+ *   numbers.
  * @group Formatters
  */
 export function formatWeekNumber(weekNumber) {
+    if (weekNumber === 0) {
+        return `#`;
+    }
+    if (weekNumber < 10) {
+        return `0${weekNumber.toLocaleString()}`;
+    }
     return `${weekNumber.toLocaleString()}`;
 }
 //# sourceMappingURL=formatWeekNumber.js.map

dist/esm/formatters/index.d.ts

@@ -1,6 +0,7 @@
-export * from "./formatCaption";
-export * from "./formatDay";
-export * from "./formatMonthDropdown";
-export * from "./formatWeekNumber";
-export * from "./formatWeekdayName";
-export * from "./formatYearDropdown";
+export * from "./formatCaption.js";
+export * from "./formatDay.js";
+export * from "./formatMonthDropdown.js";
+export * from "./formatWeekNumber.js";
+export * from "./formatWeekNumberHeader.js";
+export * from "./formatWeekdayName.js";
+export * from "./formatYearDropdown.js";

dist/esm/formatters/index.js

@@ -1,7 +0,8 @@
-export * from "./formatCaption";
-export * from "./formatDay";
-export * from "./formatMonthDropdown";
-export * from "./formatWeekNumber";
-export * from "./formatWeekdayName";
-export * from "./formatYearDropdown";
+export * from "./formatCaption.js";
+export * from "./formatDay.js";
+export * from "./formatMonthDropdown.js";
+export * from "./formatWeekNumber.js";
+export * from "./formatWeekNumberHeader.js";
+export * from "./formatWeekdayName.js";
+export * from "./formatYearDropdown.js";
 //# sourceMappingURL=index.js.map

dist/esm/helpers/getClassNamesForModifiers.d.ts

@@ -1,2 +0,2 @@
-import type { ModifiersClassNames, ClassNames } from "../types";
-export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, modifiersClassNames: ModifiersClassNames, classNames: ClassNames): string[];
+import type { ModifiersClassNames, ClassNames } from "../types/index.js";
+export declare function getClassNamesForModifiers(modifiers: Record<string, boolean>, classNames: ClassNames, modifiersClassNames?: ModifiersClassNames): string[];

dist/esm/helpers/getClassNamesForModifiers.js

@@ -1,3 +0,3 @@
-import { DayFlag, SelectionState } from "../UI";
-export function getClassNamesForModifiers(modifiers, modifiersClassNames, classNames) {
+import { DayFlag, SelectionState } from "../UI.js";
+export function getClassNamesForModifiers(modifiers, classNames, modifiersClassNames = {}) {
     const modifierClassNames = Object.entries(modifiers)
@@ -4,0 +4,0 @@ .filter(([, active]) => active === true)

dist/esm/helpers/getDataAttributes.d.ts

@@ -1,3 +0,3 @@
-import type { DayPickerProps } from "../types";
+import type { DayPickerProps } from "../types/index.js";
 /** Return the `data-` attributes from the props. */
 export declare function getDataAttributes(props: DayPickerProps): Record<string, unknown>;

dist/esm/helpers/getDataAttributes.js

 /** Return the `data-` attributes from the props. */
 export function getDataAttributes(props) {
-    const dataAttributes = {};
+    const dataAttributes = {
+        "data-mode": props.mode ?? undefined,
+        "data-required": "required" in props ? props.required : undefined
+    };
     Object.entries(props).forEach(([key, val]) => {
@@ -5,0 +8,0 @@ if (key.startsWith("data-")) {

dist/esm/helpers/getDates.d.ts

@@ -1,3 +0,3 @@
-import { PropsContextValue } from "../contexts";
+import { DateLib, DayPickerProps } from "../index.js";
 /** Return all the dates to display in the calendar. */
-export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<PropsContextValue, "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn" | "dateLib">): Date[];
+export declare function getDates(displayMonths: Date[], maxDate: Date | undefined, props: Pick<DayPickerProps, "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn">, dateLib: DateLib): Date[];

dist/esm/helpers/getDates.js

 /** The number of days in a month when having 6 weeks. */
 const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
-export function getDates(displayMonths, maxDate, props) {
+export function getDates(displayMonths, maxDate, props, dateLib) {
     const firstMonth = displayMonths[0];
     const lastMonth = displayMonths[displayMonths.length - 1];
     const { ISOWeek, fixedWeeks, locale, weekStartsOn } = props ?? {};
-    const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, addDays, differenceInCalendarDays, differenceInCalendarMonths, isAfter, endOfMonth, Date } = props.dateLib;
+    const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, addDays, differenceInCalendarDays, differenceInCalendarMonths, isAfter, endOfMonth, Date } = dateLib;
     const startWeekFirstDate = ISOWeek
@@ -10,0 +10,0 @@ ? startOfISOWeek(firstMonth)

dist/esm/helpers/getDays.d.ts

@@ -1,2 +0,2 @@
-import type { CalendarDay, CalendarMonth } from "../classes";
+import type { CalendarDay, CalendarMonth } from "../classes/index.js";
 /**
@@ -3,0 +3,0 @@ * Returns all the days belonging to the calendar by merging the days in the

dist/esm/helpers/getDefaultClassNames.d.ts

@@ -1,2 +0,2 @@
-import type { ClassNames } from "../types";
+import type { ClassNames } from "../types/index.js";
 /**
@@ -3,0 +3,0 @@ * Get the default class names for the UI elements.

dist/esm/helpers/getDefaultClassNames.js

@@ -1,2 +0,2 @@
-import { UI, DayFlag, CalendarFlag, ChevronFlag, WeekNumberFlag, SelectionState } from "../UI";
+import { UI, DayFlag, SelectionState } from "../UI.js";
 /**
@@ -13,14 +13,2 @@ * Get the default class names for the UI elements.
     }
-    for (const key in CalendarFlag) {
-        classNames[CalendarFlag[key]] =
-            `rdp-${CalendarFlag[key]}`;
-    }
-    for (const key in ChevronFlag) {
-        classNames[ChevronFlag[key]] =
-            `rdp-${ChevronFlag[key]}`;
-    }
-    for (const key in WeekNumberFlag) {
-        classNames[WeekNumberFlag[key]] =
-            `rdp-${WeekNumberFlag[key]}`;
-    }
     for (const key in DayFlag) {
@@ -27,0 +15,0 @@ classNames[DayFlag[key]] =

dist/esm/helpers/getDisplayMonths.d.ts

@@ -1,2 +0,2 @@
-import type { PropsContextValue } from "../contexts";
-export declare function getDisplayMonths(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "numberOfMonths" | "endMonth" | "dateLib">): Date[];
+import type { DateLib, DayPickerProps } from "../types/index.js";
+export declare function getDisplayMonths(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, props: Pick<DayPickerProps, "numberOfMonths">, dateLib: DateLib): Date[];

dist/esm/helpers/getDisplayMonths.js

@@ -1,6 +0,7 @@
-export function getDisplayMonths(firstDisplayedMonth, props) {
+export function getDisplayMonths(firstDisplayedMonth, calendarEndMonth, props, dateLib) {
+    const { numberOfMonths = 1 } = props;
     const months = [];
-    for (let i = 0; i < props.numberOfMonths; i++) {
-        const month = props.dateLib.addMonths(firstDisplayedMonth, i);
-        if (props.endMonth && month > props.endMonth) {
+    for (let i = 0; i < numberOfMonths; i++) {
+        const month = dateLib.addMonths(firstDisplayedMonth, i);
+        if (calendarEndMonth && month > calendarEndMonth) {
             break;
@@ -7,0 +8,0 @@ }

dist/esm/helpers/getDropdownMonths.d.ts

@@ -1,4 +0,5 @@
-import { DropdownOption } from "../components/Dropdown";
-import { PropsContextValue } from "../contexts";
+import { DropdownOption } from "../components/Dropdown.js";
+import type { Locale } from "../lib/dateLib.js";
+import type { DateLib, Formatters } from "../types/index.js";
 /** Return the months to show in the dropdown. */
-export declare function getDropdownMonths(displayMonth: Date, props: Pick<PropsContextValue, "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib">): DropdownOption[] | undefined;
+export declare function getDropdownMonths(displayMonth: Date, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, formatters: Pick<Formatters, "formatMonthDropdown">, locale: Locale | undefined, dateLib: DateLib): DropdownOption[] | undefined;

dist/esm/helpers/getDropdownMonths.js

 /** Return the months to show in the dropdown. */
-export function getDropdownMonths(displayMonth, props) {
-    const { startMonth, endMonth } = props;
-    if (!startMonth)
+export function getDropdownMonths(displayMonth, calendarStartMonth, calendarEndMonth, formatters, locale, dateLib) {
+    if (!calendarStartMonth)
         return undefined;
-    if (!endMonth)
+    if (!calendarEndMonth)
         return undefined;
-    const { addMonths, startOfMonth, isBefore, Date } = props.dateLib;
+    const { addMonths, startOfMonth, isBefore, Date } = dateLib;
     const year = displayMonth.getFullYear();
-    const navStartMonth = startOfMonth(startMonth);
-    const navEndMonth = startOfMonth(endMonth);
+    const navStartMonth = startOfMonth(calendarStartMonth);
+    const navEndMonth = startOfMonth(calendarEndMonth);
     const months = [];
@@ -22,5 +21,7 @@ let month = navStartMonth;
     const options = sortedMonths.map((value) => {
-        const label = props.formatters.formatMonthDropdown(value, props.locale);
-        const disabled = (startMonth && new Date(year, value) < startOfMonth(startMonth)) ||
-            (endMonth && new Date(year, value) > startOfMonth(endMonth)) ||
+        const label = formatters.formatMonthDropdown(value, locale);
+        const disabled = (calendarStartMonth &&
+            new Date(year, value) < startOfMonth(calendarStartMonth)) ||
+            (calendarEndMonth &&
+                new Date(year, value) > startOfMonth(calendarEndMonth)) ||
             false;
@@ -27,0 +28,0 @@ return { value, label, disabled };

dist/esm/helpers/getDropdownYears.d.ts

@@ -1,4 +0,4 @@
-import { DropdownOption } from "../components/Dropdown";
-import { PropsContextValue } from "../contexts";
+import { DropdownOption } from "../components/Dropdown.js";
+import type { DateLib, Formatters } from "../types/index.js";
 /** Return the years to show in the dropdown. */
-export declare function getDropdownYears(displayMonth: Date, props: Pick<PropsContextValue, "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib">): DropdownOption[] | undefined;
+export declare function getDropdownYears(displayMonth: Date, calendarStart: Date | undefined, calendarEnd: Date | undefined, formatters: Pick<Formatters, "formatYearDropdown">, dateLib: DateLib): DropdownOption[] | undefined;

dist/esm/helpers/getDropdownYears.js

 /** Return the years to show in the dropdown. */
-export function getDropdownYears(displayMonth, props) {
-    const { startMonth, endMonth } = props;
-    if (!startMonth)
+export function getDropdownYears(displayMonth, calendarStart, calendarEnd, formatters, dateLib) {
+    if (!calendarStart)
         return undefined;
-    if (!endMonth)
+    if (!calendarEnd)
         return undefined;
-    const { startOfMonth, startOfYear, endOfYear, addYears, isBefore, isSameYear, Date } = props.dateLib;
+    const { startOfMonth, startOfYear, endOfYear, addYears, isBefore, isSameYear, Date } = dateLib;
     const month = displayMonth.getMonth();
-    const firstNavYear = startOfYear(startMonth);
-    const lastNavYear = endOfYear(endMonth);
+    const firstNavYear = startOfYear(calendarStart);
+    const lastNavYear = endOfYear(calendarEnd);
     const years = [];
@@ -19,6 +18,8 @@ let year = firstNavYear;
     return years.map((value) => {
-        const disabled = (startMonth && new Date(value, month) < startOfMonth(startMonth)) ||
-            (month && endMonth && new Date(value, month) > startOfMonth(endMonth)) ||
+        const disabled = (calendarStart && new Date(value, month) < startOfMonth(calendarStart)) ||
+            (month &&
+                calendarEnd &&
+                new Date(value, month) > startOfMonth(calendarEnd)) ||
             false;
-        const label = props.formatters.formatYearDropdown(value);
+        const label = formatters.formatYearDropdown(value);
         return {
@@ -25,0 +26,0 @@ value,

dist/esm/helpers/getFormatters.d.ts

@@ -1,9 +0,9 @@
-import * as defaultFormatters from "../formatters";
-import type { DayPickerProps } from "../types";
+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. */
 export declare function getFormatters(customFormatters: DayPickerProps["formatters"]): {
     formatCaption: typeof defaultFormatters.formatCaption;
-    formatMonthCaption: typeof defaultFormatters.formatCaption;
+    formatMonthCaption: typeof defaultFormatters.formatMonthCaption;
     formatMonthDropdown: typeof defaultFormatters.formatMonthDropdown;
-    formatYearCaption: typeof defaultFormatters.formatYearDropdown;
+    formatYearCaption: typeof defaultFormatters.formatYearCaption;
     formatYearDropdown: typeof defaultFormatters.formatYearDropdown;
@@ -13,2 +13,3 @@ formatDay: typeof defaultFormatters.formatDay;
     formatWeekdayName: typeof defaultFormatters.formatWeekdayName;
+    formatWeekNumberHeader(): string;
 };

dist/esm/helpers/getFormatters.js

@@ -1,2 +0,2 @@
-import * as defaultFormatters from "../formatters";
+import * as defaultFormatters from "../formatters/index.js";
 /** Return the formatters from the props merged with the default formatters. */
@@ -3,0 +3,0 @@ export function getFormatters(customFormatters) {

dist/esm/helpers/getInitialMonth.d.ts

@@ -1,3 +0,3 @@
-import type { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../index.js";
 /** Return the start month based on the props passed to DayPicker. */
-export declare function getInitialMonth(props: Pick<PropsContextValue, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths" | "dateLib">): Date;
+export declare function getInitialMonth(props: Pick<DayPickerProps, "fromYear" | "toYear" | "startMonth" | "endMonth" | "month" | "defaultMonth" | "today" | "numberOfMonths">, dateLib: DateLib): Date;

dist/esm/helpers/getInitialMonth.js

 /** Return the start month based on the props passed to DayPicker. */
-export function getInitialMonth(props) {
-    const { month, defaultMonth, dateLib: { Date }, today, numberOfMonths = 1, endMonth, startMonth } = props;
-    let initialMonth = month || defaultMonth || today || new Date();
-    const { differenceInCalendarMonths, addMonths, startOfMonth } = props.dateLib;
+export function getInitialMonth(props, dateLib) {
+    const { month, defaultMonth, today = new dateLib.Date(), numberOfMonths = 1, endMonth, startMonth } = props;
+    let initialMonth = month || defaultMonth || today;
+    const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib;
     // Fix the initialMonth if is after the to-date
@@ -7,0 +7,0 @@ if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) {

dist/esm/helpers/getMonths.d.ts

@@ -1,3 +0,3 @@
-import { CalendarMonth } from "../classes";
-import type { PropsContextValue } from "../contexts";
+import { CalendarMonth } from "../classes/index.js";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 /** Return the months to display in the calendar. */
@@ -10,2 +10,2 @@ export declare function getMonths(
 /** Options from the props context. */
-props: Pick<PropsContextValue, "dateLib" | "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">): CalendarMonth[];
+options: Pick<DayPickerProps, "fixedWeeks" | "ISOWeek" | "locale" | "weekStartsOn" | "reverseMonths" | "firstWeekContainsDate">, dateLib: DateLib): CalendarMonth[];

dist/esm/helpers/getMonths.js

@@ -1,2 +0,2 @@
-import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes";
+import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
 /** Return the months to display in the calendar. */
@@ -9,16 +9,16 @@ export function getMonths(
 /** Options from the props context. */
-props) {
-    const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = props.dateLib;
+options, dateLib) {
+    const { startOfWeek, endOfWeek, startOfISOWeek, endOfISOWeek, endOfMonth, addDays, getWeek, getISOWeek } = dateLib;
     const dayPickerMonths = displayMonths.reduce((months, month) => {
-        const firstDateOfFirstWeek = props.ISOWeek
+        const firstDateOfFirstWeek = options.ISOWeek
             ? startOfISOWeek(month)
             : startOfWeek(month, {
-                locale: props.locale,
-                weekStartsOn: props.weekStartsOn
+                locale: options.locale,
+                weekStartsOn: options.weekStartsOn
             });
-        const lastDateOfLastWeek = props.ISOWeek
+        const lastDateOfLastWeek = options.ISOWeek
             ? endOfISOWeek(endOfMonth(month))
             : endOfWeek(endOfMonth(month), {
-                locale: props.locale,
-                weekStartsOn: props.weekStartsOn
+                locale: options.locale,
+                weekStartsOn: options.weekStartsOn
             });
@@ -29,3 +29,3 @@ /** The dates to display in the month. */
         });
-        if (props.fixedWeeks && monthDates.length < 42) {
+        if (options.fixedWeeks && monthDates.length < 42) {
             const extraDates = dates.filter((date) => {
@@ -37,11 +37,11 @@ return (date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7));
         const weeks = monthDates.reduce((weeks, date) => {
-            const weekNumber = props.ISOWeek
+            const weekNumber = options.ISOWeek
                 ? getISOWeek(date)
                 : getWeek(date, {
-                    locale: props.locale,
-                    weekStartsOn: props.weekStartsOn,
-                    firstWeekContainsDate: props.firstWeekContainsDate
+                    locale: options.locale,
+                    weekStartsOn: options.weekStartsOn,
+                    firstWeekContainsDate: options.firstWeekContainsDate
                 });
             const week = weeks.find((week) => week.weekNumber === weekNumber);
-            const day = new CalendarDay(date, month, props.dateLib);
+            const day = new CalendarDay(date, month, dateLib);
             if (!week) {
@@ -59,3 +59,3 @@ weeks.push(new CalendarWeek(weekNumber, [day]));
     }, []);
-    if (!props.reverseMonths) {
+    if (!options.reverseMonths) {
         return dayPickerMonths;
@@ -62,0 +62,0 @@ }

dist/esm/helpers/getNextFocus.d.ts

@@ -1,7 +0,5 @@
-import { CalendarDay } from "../classes";
-import type { PropsContextValue } from "../contexts";
-import type { MoveFocusBy, MoveFocusDir } from "../types";
-export type Options = Pick<PropsContextValue, "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth">;
+import { CalendarDay } from "../classes/index.js";
+import type { DateLib, DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types/index.js";
 export declare function getNextFocus(moveBy: MoveFocusBy, moveDir: MoveFocusDir, 
 /** The date that is currently focused. */
-focused: CalendarDay, options: Pick<PropsContextValue, "dateLib" | "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth">, attempt?: number): CalendarDay | undefined;
+refDay: CalendarDay, calendarStartMonth: Date | undefined, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "disabled" | "hidden" | "modifiers" | "locale" | "ISOWeek" | "weekStartsOn">, dateLib: DateLib, attempt?: number): CalendarDay | undefined;

dist/esm/helpers/getNextFocus.js

@@ -1,7 +0,7 @@
-import { CalendarDay } from "../classes";
-import { dateMatchModifiers } from "../utils/dateMatchModifiers";
-import { getPossibleFocusDate } from "./getPossibleFocusDate";
+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. */
-focused, options, attempt = 0) {
+refDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt = 0) {
     if (attempt > 365) {
@@ -11,9 +11,9 @@ // Limit the recursion to 365 attempts
     }
-    const possibleFocusDate = getPossibleFocusDate(moveBy, moveDir, focused.date, options);
+    const focusableDate = getFocusableDate(moveBy, moveDir, refDay.date, // should be refDay? or refDay.date?
+    calendarStartMonth, calendarEndMonth, options, dateLib);
     const isDisabled = Boolean(options.disabled &&
-        dateMatchModifiers(possibleFocusDate, options.disabled, options.dateLib));
-    const isHidden = Boolean(options.hidden &&
-        dateMatchModifiers(possibleFocusDate, options.hidden, options.dateLib));
-    const targetMonth = possibleFocusDate;
-    const focusDay = new CalendarDay(possibleFocusDate, targetMonth, options.dateLib);
+        dateMatchModifiers(focusableDate, options.disabled, dateLib));
+    const isHidden = Boolean(options.hidden && dateMatchModifiers(focusableDate, options.hidden, dateLib));
+    const targetMonth = focusableDate;
+    const focusDay = new CalendarDay(focusableDate, targetMonth, dateLib);
     if (!isDisabled && !isHidden) {
@@ -23,4 +23,4 @@ return focusDay;
     // Recursively attempt to find the next focusable date
-    return getNextFocus(moveBy, moveDir, focusDay, options, attempt + 1);
+    return getNextFocus(moveBy, moveDir, focusDay, calendarStartMonth, calendarEndMonth, options, dateLib, attempt + 1);
 }
 //# sourceMappingURL=getNextFocus.js.map

dist/esm/helpers/getNextMonth.d.ts

@@ -1,2 +0,2 @@
-import { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 /**
@@ -8,5 +8,5 @@ * Return the next month the user can navigate to according to the given
  *
- * - If after the `endMonth` range, is `undefined`;
+ * - If after the `calendarEndMonth` range, is `undefined`;
  * - If the navigation is paged , is the number of months displayed ahead.
  */
-export declare function getNextMonth(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "startMonth" | "endMonth" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "dateLib">): Date | undefined;
+export declare function getNextMonth(firstDisplayedMonth: Date, calendarEndMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined;

dist/esm/helpers/getNextMonth.js

@@ -7,18 +7,18 @@ /**
  *
- * - If after the `endMonth` range, is `undefined`;
+ * - If after the `calendarEndMonth` range, is `undefined`;
  * - If the navigation is paged , is the number of months displayed ahead.
  */
-export function getNextMonth(firstDisplayedMonth, props) {
-    if (props.disableNavigation) {
+export function getNextMonth(firstDisplayedMonth, calendarEndMonth, options, dateLib) {
+    if (options.disableNavigation) {
         return undefined;
     }
-    const { pagedNavigation, numberOfMonths } = props;
-    const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib;
+    const { pagedNavigation, numberOfMonths = 1 } = options;
+    const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
     const offset = pagedNavigation ? numberOfMonths : 1;
     const month = startOfMonth(firstDisplayedMonth);
-    if (!props.endMonth) {
+    if (!calendarEndMonth) {
         return addMonths(month, offset);
     }
-    const monthsDiff = differenceInCalendarMonths(props.endMonth, firstDisplayedMonth);
-    if (monthsDiff < numberOfMonths) {
+    const monthsDiff = differenceInCalendarMonths(calendarEndMonth, firstDisplayedMonth);
+    if (monthsDiff < numberOfMonths ?? 1) {
         return undefined;
@@ -25,0 +25,0 @@ }

dist/esm/helpers/getPreviousMonth.d.ts

@@ -1,2 +0,2 @@
-import type { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 /**
@@ -9,5 +9,5 @@ * Return the next previous the user can navigate to, according to the given
  *
- * - If before the `startMonth` date, is `undefined`;
+ * - If before the `calendarStartMonth` date, is `undefined`;
  * - If the navigation is paged, is the number of months displayed before.
  */
-export declare function getPreviousMonth(firstDisplayedMonth: Date, props: Pick<PropsContextValue, "startMonth" | "numberOfMonths" | "pagedNavigation" | "disableNavigation" | "dateLib">): Date | undefined;
+export declare function getPreviousMonth(firstDisplayedMonth: Date, calendarStartMonth: Date | undefined, options: Pick<DayPickerProps, "numberOfMonths" | "pagedNavigation" | "disableNavigation">, dateLib: DateLib): Date | undefined;

dist/esm/helpers/getPreviousMonth.js

@@ -8,17 +8,17 @@ /**
  *
- * - If before the `startMonth` date, is `undefined`;
+ * - If before the `calendarStartMonth` date, is `undefined`;
  * - If the navigation is paged, is the number of months displayed before.
  */
-export function getPreviousMonth(firstDisplayedMonth, props) {
-    if (props.disableNavigation) {
+export function getPreviousMonth(firstDisplayedMonth, calendarStartMonth, options, dateLib) {
+    if (options.disableNavigation) {
         return undefined;
     }
-    const { pagedNavigation, numberOfMonths } = props;
-    const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib;
-    const offset = pagedNavigation ? numberOfMonths : 1;
+    const { pagedNavigation, numberOfMonths } = options;
+    const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
+    const offset = pagedNavigation ? numberOfMonths ?? 1 : 1;
     const month = startOfMonth(firstDisplayedMonth);
-    if (!props.startMonth) {
+    if (!calendarStartMonth) {
         return addMonths(month, -offset);
     }
-    const monthsDiff = differenceInCalendarMonths(month, props.startMonth);
+    const monthsDiff = differenceInCalendarMonths(month, calendarStartMonth);
     if (monthsDiff <= 0) {
@@ -25,0 +25,0 @@ return undefined;

dist/esm/helpers/getStyleForModifiers.d.ts

 import type { CSSProperties } from "react";
-import type { Modifiers, ModifiersStyles, Styles } from "../types";
-export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles: Partial<ModifiersStyles>, styles: Partial<Styles>): CSSProperties;
+import type { Modifiers, ModifiersStyles } from "../types/index.js";
+export declare function getStyleForModifiers(dayModifiers: Modifiers, modifiersStyles?: Partial<ModifiersStyles>): CSSProperties;

dist/esm/helpers/getStyleForModifiers.js

@@ -1,4 +0,3 @@
-import { UI } from "../UI";
-export function getStyleForModifiers(dayModifiers, modifiersStyles, styles) {
-    let style = { ...styles[UI.Day] };
+export function getStyleForModifiers(dayModifiers, modifiersStyles = {}) {
+    let style = {};
     Object.entries(dayModifiers)
@@ -5,0 +4,0 @@ .filter(([, active]) => active === true)

dist/esm/helpers/getWeekdays.d.ts

@@ -1,3 +0,3 @@
-import type { Locale } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { Locale } from "../lib/dateLib.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -4,0 +4,0 @@ * Generate a series of 7 days, starting from the week, to use for formatting

dist/esm/helpers/getWeekdays.js

@@ -1,2 +0,2 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
@@ -3,0 +3,0 @@ * Generate a series of 7 days, starting from the week, to use for formatting

dist/esm/helpers/getWeeks.d.ts

@@ -1,3 +0,3 @@
-import type { CalendarMonth, CalendarWeek } from "../classes";
+import type { CalendarMonth, CalendarWeek } from "../classes/index.js";
 /** Returns an array of calendar weeks from an array of calendar months. */
 export declare function getWeeks(months: CalendarMonth[]): CalendarWeek[];

dist/esm/helpers/index.d.ts

@@ -1,1 +0,1 @@
-export * from "./getDefaultClassNames";
+export * from "./getDefaultClassNames.js";

dist/esm/helpers/index.js

 // Only export helpers that can be useful to other developers.
-export * from "./getDefaultClassNames";
+export * from "./getDefaultClassNames.js";
 //# sourceMappingURL=index.js.map

dist/esm/helpers/useControlledValue.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 export type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
@@ -3,0 +2,0 @@ /**

dist/esm/index.d.ts

@@ -1,12 +0,11 @@
-export * from "./DayPicker";
-export * from "./types";
-export * from "./classes";
-export * from "./components/custom-components";
-export * from "./contexts";
-export * from "./selection";
-export * from "./lib";
-export * from "./formatters";
-export * from "./helpers";
-export * from "./labels";
-export * from "./utils";
-export * from "./UI";
+export * from "./DayPicker.js";
+export * from "./types/index.js";
+export * from "./classes/index.js";
+export * from "./components/custom-components.js";
+export * from "./lib/index.js";
+export * from "./formatters/index.js";
+export * from "./helpers/index.js";
+export * from "./labels/index.js";
+export * from "./utils/index.js";
+export * from "./UI.js";
+export * from "./useDayPicker.js";

dist/esm/index.js

@@ -1,13 +0,12 @@
-export * from "./DayPicker";
-export * from "./types";
-export * from "./classes";
-export * from "./components/custom-components";
-export * from "./contexts";
-export * from "./selection";
-export * from "./lib";
-export * from "./formatters";
-export * from "./helpers";
-export * from "./labels";
-export * from "./utils";
-export * from "./UI";
+export * from "./DayPicker.js";
+export * from "./types/index.js";
+export * from "./classes/index.js";
+export * from "./components/custom-components.js";
+export * from "./lib/index.js";
+export * from "./formatters/index.js";
+export * from "./helpers/index.js";
+export * from "./labels/index.js";
+export * from "./utils/index.js";
+export * from "./UI.js";
+export * from "./useDayPicker.js";
 //# sourceMappingURL=index.js.map

dist/esm/jalali.d.ts

 import React from "react";
-import { type DayPickerProps } from "./";
+import { type DayPickerProps } from "./index.js";
 export declare function DayPicker(props: DayPickerProps): React.JSX.Element;

dist/esm/jalali.js

 import React from "react";
 import * as jalaliDateLib from "date-fns-jalali";
-import { DayPicker as DayPickerComponent } from "./";
+import { DayPicker as DayPickerComponent } from "./index.js";
 export function DayPicker(props) {
@@ -5,0 +5,0 @@ return React.createElement(DayPickerComponent, { dateLib: jalaliDateLib, ...props });

dist/esm/labels/index.d.ts

@@ -1,9 +0,12 @@
-export * from "./labelDay";
-export * from "./labelCaption";
-export * from "./labelMonthDropdown";
-export * from "./labelNext";
-export * from "./labelPrevious";
-export * from "./labelWeekday";
-export * from "./labelWeekNumber";
-export * from "./labelWeekNumberHeader";
-export * from "./labelYearDropdown";
+export * from "./labelGrid.js";
+export * from "./labelGridcell.js";
+export * from "./labelDayButton.js";
+export * from "./labelNav.js";
+export * from "./labelGrid.js";
+export * from "./labelMonthDropdown.js";
+export * from "./labelNext.js";
+export * from "./labelPrevious.js";
+export * from "./labelWeekday.js";
+export * from "./labelWeekNumber.js";
+export * from "./labelWeekNumberHeader.js";
+export * from "./labelYearDropdown.js";

dist/esm/labels/index.js

@@ -1,10 +0,13 @@
-export * from "./labelDay";
-export * from "./labelCaption";
-export * from "./labelMonthDropdown";
-export * from "./labelNext";
-export * from "./labelPrevious";
-export * from "./labelWeekday";
-export * from "./labelWeekNumber";
-export * from "./labelWeekNumberHeader";
-export * from "./labelYearDropdown";
+export * from "./labelGrid.js";
+export * from "./labelGridcell.js";
+export * from "./labelDayButton.js";
+export * from "./labelNav.js";
+export * from "./labelGrid.js";
+export * from "./labelMonthDropdown.js";
+export * from "./labelNext.js";
+export * from "./labelPrevious.js";
+export * from "./labelWeekday.js";
+export * from "./labelWeekNumber.js";
+export * from "./labelWeekNumberHeader.js";
+export * from "./labelYearDropdown.js";
 //# sourceMappingURL=index.js.map

dist/esm/labels/labelGrid.d.ts

@@ -1,8 +0,14 @@
-import type { FormatOptions } from "date-fns";
-import type { DateLib } from "../types";
+import type { LabelOptions } from "../lib/dateLib.js";
+import { DateLib } from "../types/index.js";
 /**
- * Return the default ARIA label for the month grid.
+ * Return an ARIA label for the month grid, that will be announced when entering
+ * the grid.
  *
  * @group Labels
  */
-export declare function labelGrid(month: Date, options?: FormatOptions, dateLib?: DateLib): string;
+export declare function labelGrid(date: Date, options?: LabelOptions, dateLib?: DateLib): string;
+/**
+ * @deprecated Use {@link labelGrid} instead.
+ * @protected
+ */
+export declare const labelCaption: typeof labelGrid;

dist/esm/labels/labelGrid.js

@@ -1,10 +0,16 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
- * Return the default ARIA label for the month grid.
+ * Return an ARIA label for the month grid, that will be announced when entering
+ * the grid.
  *
  * @group Labels
  */
-export function labelGrid(month, options, dateLib = defaultDateLib) {
-    return dateLib.format(month, "LLLL y", options);
+export function labelGrid(date, options, dateLib = defaultDateLib) {
+    return dateLib.format(date, "LLLL y", options);
 }
+/**
+ * @deprecated Use {@link labelGrid} instead.
+ * @protected
+ */
+export const labelCaption = labelGrid;
 //# sourceMappingURL=labelGrid.js.map

dist/esm/labels/labelMonthDropdown.d.ts

@@ -1,7 +0,7 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
- * Return the default ARIA label for the WeekNumber element.
+ * Return the default ARIA label for the months dropdown element.
  *
  * @group Labels
  */
-export declare function labelMonthDropdown(options?: FormatOptions): string;
+export declare function labelMonthDropdown(options?: LabelOptions): string;

dist/esm/labels/labelMonthDropdown.js

 /**
- * Return the default ARIA label for the WeekNumber element.
+ * Return the default ARIA label for the months dropdown element.
  *
@@ -4,0 +4,0 @@ * @group Labels

dist/esm/labels/labelNext.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -9,2 +9,2 @@ * Return the default ARIA label for next month button.
 /** Undefined where there's no next month no navigate to. */
-month: Date | undefined, options?: FormatOptions): string;
+month: Date | undefined, options?: LabelOptions): string;

dist/esm/labels/labelPrevious.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -9,2 +9,2 @@ * Return the default ARIA label for next month button.
 /** Undefined where there's no previous month no navigate to. */
-month: Date | undefined, options?: FormatOptions): string;
+month: Date | undefined, options?: LabelOptions): string;

dist/esm/labels/labelWeekday.d.ts

@@ -1,3 +0,3 @@
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { LabelOptions } from "../lib/dateLib.js";
+import type { DateLib } from "../types/index.js";
 /**
@@ -8,2 +8,2 @@ * Return he default ARIA label for the Weekday element.
  */
-export declare function labelWeekday(date: Date, options?: FormatOptions, dateLib?: DateLib): string;
+export declare function labelWeekday(date: Date, options?: LabelOptions, dateLib?: DateLib): string;

dist/esm/labels/labelWeekday.js

@@ -1,2 +0,2 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
@@ -3,0 +3,0 @@ * Return he default ARIA label for the Weekday element.

dist/esm/labels/labelWeekNumber.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -7,2 +7,2 @@ * Return the default ARIA label for the week number element.
  */
-export declare function labelWeekNumber(weekNumber: number, options?: FormatOptions): string;
+export declare function labelWeekNumber(weekNumber: number, options?: LabelOptions): string;

dist/esm/labels/labelWeekNumberHeader.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -7,2 +7,2 @@ * Return the default ARIA label for the week number header element.
  */
-export declare function labelWeekNumberHeader(options?: FormatOptions): string;
+export declare function labelWeekNumberHeader(options?: LabelOptions): string;

dist/esm/labels/labelYearDropdown.d.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 /**
@@ -7,2 +7,2 @@ * Return the default ARIA label for the years dropdown.
  */
-export declare function labelYearDropdown(options?: FormatOptions): string;
+export declare function labelYearDropdown(options?: LabelOptions): string;

dist/esm/lib/dateLib.d.ts

 import { GenericDateConstructor } from "date-fns";
+import type { FormatOptions as DateFnsFormatOptions, Locale as DateFnsLocale } from "date-fns";
 import { addDays } from "date-fns/addDays";
@@ -14,3 +15,2 @@ import { addMonths } from "date-fns/addMonths";
 import { getISOWeek } from "date-fns/getISOWeek";
-import { getUnixTime } from "date-fns/getUnixTime";
 import { getWeek } from "date-fns/getWeek";
@@ -32,12 +32,18 @@ import { isAfter } from "date-fns/isAfter";
 import { startOfYear } from "date-fns/startOfYear";
-/** @private */
-export type { Locale } from "date-fns";
-/** @private */
-export type { FormatOptions } from "date-fns";
-/** @private */
+/** The options for the {@link Formatters}. */
+export type FormatOptions = DateFnsFormatOptions;
+/** The options for the {@link Labels}. */
+export type LabelOptions = DateFnsFormatOptions;
+/** The locale used within DayPicker. */
+export type Locale = DateFnsLocale;
 export type { Month as DateFnsMonth } from "date-fns";
-/** The default date library to use with the date picker. */
+/**
+ * The default date library to use with the date picker.
+ *
+ * @private
+ * @internal
+ */
 export declare const dateLib: {
     /** The constructor of the date object. */
-    Date: GenericDateConstructor<Date>;
+    Date: GenericDateConstructor;
     addDays: typeof addDays;
@@ -55,3 +61,2 @@ addMonths: typeof addMonths;
     getISOWeek: typeof getISOWeek;
-    getUnixTime: typeof getUnixTime;
     getWeek: typeof getWeek;
@@ -58,0 +63,0 @@ isAfter: typeof isAfter;

dist/esm/lib/dateLib.js

@@ -13,3 +13,2 @@ import { addDays } from "date-fns/addDays";
 import { getISOWeek } from "date-fns/getISOWeek";
-import { getUnixTime } from "date-fns/getUnixTime";
 import { getWeek } from "date-fns/getWeek";
@@ -31,3 +30,8 @@ import { isAfter } from "date-fns/isAfter";
 import { startOfYear } from "date-fns/startOfYear";
-/** The default date library to use with the date picker. */
+/**
+ * The default date library to use with the date picker.
+ *
+ * @private
+ * @internal
+ */
 export const dateLib = {
@@ -48,3 +52,2 @@ /** The constructor of the date object. */
     getISOWeek,
-    getUnixTime,
     getWeek,
@@ -51,0 +54,0 @@ isAfter,

dist/esm/lib/index.d.ts

@@ -1,1 +0,1 @@
-export * from "./dateLib";
+export * from "./dateLib.js";

dist/esm/lib/index.js

@@ -1,2 +0,2 @@
-export * from "./dateLib";
+export * from "./dateLib.js";
 //# sourceMappingURL=index.js.map

dist/esm/selection/useMulti.d.ts

 import React from "react";
-import type { Modifiers, PropsMulti } from "../types";
-export type MultiContextValue<T> = {
-    setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => Date[] | undefined;
+import type { DateLib, DayPickerProps, Modifiers, PropsMulti, PropsMultiRequired } from "../types/index.js";
+export type UseMulti<T> = {
+    handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => Date[] | undefined;
     isSelected: (date: Date) => boolean;
@@ -13,14 +13,4 @@ } & (T extends {
 });
-/** @private */
-export declare function MultiProvider(props: React.PropsWithChildren<PropsMulti>): React.JSX.Element;
-/**
- * Access to the multi context to get the selected dates or update them.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export declare function useMulti<T extends {
-    required: boolean;
-}>(): MultiContextValue<T>;
+export declare function useMulti<T extends DayPickerProps>(props: T extends {
+    mode: "multiple";
+} ? PropsMulti | PropsMultiRequired : object, dateLib: DateLib): UseMulti<T>;

dist/esm/selection/useMulti.js

 import React from "react";
-import { useProps } from "../contexts";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const MultiContext = React.createContext(undefined);
-function useMultiContextValue({ required = false, min = undefined, max = undefined, selected, onSelect }) {
-    const { mode, dateLib: { isSameDay, Date } } = useProps();
-    const [dates, setDates] = React.useState(selected);
+export function useMulti(props, dateLib) {
+    const { selected, required, onSelect, mode } = props;
+    const [dates, setDates] = React.useState(mode !== "multiple" ? undefined : selected);
+    const { isSameDay, Date } = dateLib;
     // Update the selected date if the required flag is set.
@@ -25,2 +23,3 @@ React.useEffect(() => {
     };
+    const { min, max } = props;
     const setSelected = (triggerDate, modifiers, e) => {
@@ -55,26 +54,6 @@ let newDates = [...(dates ?? [])];
         selected: dates,
-        setSelected,
+        handleSelect: setSelected,
         isSelected
     };
 }
-/** @private */
-export function MultiProvider(props) {
-    const value = useMultiContextValue(props);
-    return (React.createElement(MultiContext.Provider, { value: value }, props.children));
-}
-/**
- * Access to the multi context to get the selected dates or update them.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export function useMulti() {
-    const context = React.useContext(MultiContext);
-    if (!context) {
-        throw new Error("useMulti() must be used within a MultiContextProvider.");
-    }
-    return context;
-}
 //# sourceMappingURL=useMulti.js.map

dist/esm/selection/useRange.d.ts

 import React from "react";
-import { DateRange, Modifiers, PropsRange } from "../types";
-export type RangeContextValue<T> = {
-    setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => DateRange | undefined;
+import { DateLib, DateRange, DayPickerProps, Modifiers, PropsRange, PropsRangeRequired } from "../types/index.js";
+export type UseRange<T> = {
+    handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => DateRange | undefined;
     isSelected: (date: Date) => boolean;
+    isRangeStart: (date: Date) => boolean;
+    isRangeEnd: (date: Date) => boolean;
+    isRangeMiddle: (date: Date) => boolean;
 } & (T extends {
@@ -13,14 +16,4 @@ required: true;
 });
-/** @private */
-export declare function RangeProvider(props: React.PropsWithChildren<PropsRange>): React.JSX.Element;
-/**
- * Access to the range context to get the selected range or update it.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export declare function useRange<T extends {
-    required: boolean;
-}>(): RangeContextValue<T>;
+export declare function useRange<T extends DayPickerProps>(props: T extends {
+    mode: "range";
+} ? PropsRange | PropsRangeRequired : object, dateLib: DateLib): UseRange<T>;

dist/esm/selection/useRange.js

 import React from "react";
-import { useProps } from "../contexts";
-import { addToRange } from "../utils";
-import { isDateInRange } from "../utils/isDateInRange";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const RangeContext = React.createContext(undefined);
-function useRangeContextValue({ required, min, max, selected, onSelect }) {
-    const { dateLib, mode } = useProps();
+import { addToRange, dateMatchModifiers } from "../utils/index.js";
+import { isDateInRange } from "../utils/isDateInRange.js";
+export function useRange(props, dateLib) {
+    const { mode, disabled, selected, required, onSelect } = props;
     const { differenceInCalendarDays } = dateLib;
-    const [range, setRange] = React.useState(selected);
+    const [range, setRange] = React.useState(mode === "range" ? selected : undefined);
     // Update the selected date if the required flag is set.
     React.useEffect(() => {
-        if (mode !== "multiple")
+        if (mode !== "range")
             return;
@@ -23,11 +20,14 @@ if (required && range === undefined) {
             return;
+        if (range === selected)
+            return;
         setRange(selected);
-    }, [mode, selected]);
-    const isSelected = required
-        ? (date) => isDateInRange(date, range, dateLib)
-        : (date) => range && isDateInRange(date, range, dateLib);
+    }, [mode, range, selected]);
+    const isSelected = (date) => range && isDateInRange(date, range, dateLib);
     const setSelected = (triggerDate, modifiers, e) => {
+        if (mode !== "range")
+            return;
         const newRange = triggerDate
             ? addToRange(triggerDate, range, dateLib)
             : undefined;
+        const { min, max } = props;
         if (min) {
@@ -49,2 +49,13 @@ if (newRange?.from &&
         }
+        if (newRange?.from && newRange.to) {
+            let newDate = newRange.from;
+            while (dateLib.differenceInCalendarDays(newRange.to, newDate) > 0) {
+                newDate = dateLib.addDays(newDate, 1);
+                if (disabled && dateMatchModifiers(newDate, disabled, dateLib)) {
+                    newRange.from = triggerDate;
+                    newRange.to = undefined;
+                    break;
+                }
+            }
+        }
         setRange(newRange);
@@ -54,28 +65,25 @@ onSelect?.(newRange, triggerDate, modifiers, e);
     };
+    const isRangeStart = (date) => {
+        return (range && range.from && range.to && dateLib.isSameDay(date, range.from));
+    };
+    const isRangeEnd = (date) => {
+        return range && range.to && dateLib.isSameDay(date, range.to);
+    };
+    const isRangeMiddle = (date) => {
+        return (range &&
+            range.from &&
+            range.to &&
+            isSelected(date) &&
+            !isRangeStart(date) &&
+            !isRangeEnd(date));
+    };
     return {
         selected: range,
-        setSelected,
-        isSelected
+        handleSelect: setSelected,
+        isSelected,
+        isRangeStart,
+        isRangeEnd,
+        isRangeMiddle
     };
 }
-/** @private */
-export function RangeProvider(props) {
-    const value = useRangeContextValue(props);
-    return (React.createElement(RangeContext.Provider, { value: value }, props.children));
-}
-/**
- * Access to the range context to get the selected range or update it.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export function useRange() {
-    const context = React.useContext(RangeContext);
-    if (!context) {
-        throw new Error("useRange() must be used within a RangeContextProvider.");
-    }
-    return context;
-}
 //# sourceMappingURL=useRange.js.map

dist/esm/selection/useSingle.d.ts

 import React from "react";
-import { Modifiers, PropsSingle } from "../types";
-export type SingleContextValue<T> = {
-    setSelected: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
+import type { DateLib, DayPickerProps, Modifiers, PropsSingle, PropsSingleRequired } from "../types/index.js";
+export type UseSingle<T> = {
+    handleSelect: (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void;
     isSelected: (date: Date) => boolean;
@@ -13,12 +13,4 @@ } & (T extends {
 });
-/** @private */
-export declare function SingleProvider(props: React.PropsWithChildren<PropsSingle>): React.JSX.Element;
-/**
- * Access to the single context to get the selected date or update it.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export declare function useSingle(): SingleContextValue<any>;
+export declare function useSingle<T extends DayPickerProps>(props: T extends {
+    mode: "single";
+} ? PropsSingle | PropsSingleRequired : object, dateLib: DateLib): UseSingle<T>;

dist/esm/selection/useSingle.js

 import React from "react";
-import { useProps } from "../contexts";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const SingleContext = React.createContext(undefined);
-function useSingleContextValue({ required = false, selected, onSelect }) {
-    const [date, setDate] = React.useState(selected);
-    const { dateLib: { isSameDay }, today, mode } = useProps();
+export function useSingle(props, dateLib) {
+    const { selected, required, onSelect, mode } = props;
+    const [date, setDate] = React.useState(mode !== "single" ? undefined : selected);
+    const { isSameDay, Date, startOfDay } = dateLib;
     // Update the selected date if the required flag is set.
     React.useEffect(() => {
+        if (mode !== "single")
+            return;
         if (required && date === undefined) {
-            setDate(today);
+            setDate(startOfDay(new Date()));
         }
-    }, [required, date, today]);
+    }, [required, date, Date, startOfDay, mode]);
     // Update the selected date if the `selected` value changes.
@@ -24,2 +24,4 @@ React.useEffect(() => {
     const setSelected = (triggerDate, modifiers, e) => {
+        if (mode !== "single")
+            return;
         let newDate = triggerDate;
@@ -31,27 +33,16 @@ if (!required && date && date && isSameDay(triggerDate, date)) {
         setDate(newDate);
-        onSelect?.(newDate, triggerDate, modifiers, e);
+        if (required) {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
+        else {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
         return newDate;
     };
-    return { selected: date, setSelected, isSelected };
+    return {
+        selected: date,
+        handleSelect: setSelected,
+        isSelected
+    };
 }
-/** @private */
-export function SingleProvider(props) {
-    const value = useSingleContextValue(props);
-    return (React.createElement(SingleContext.Provider, { value: value }, props.children));
-}
-/**
- * Access to the single context to get the selected date or update it.
- *
- * Use this hook from the custom components passed via the `components` prop.
- *
- * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export function useSingle() {
-    const context = React.useContext(SingleContext);
-    if (!context) {
-        throw new Error("useSingle() must be used within a SingleContextProvider");
-    }
-    return context;
-}
 //# sourceMappingURL=useSingle.js.map

dist/esm/types/deprecated.d.ts

@@ -1,10 +0,7 @@
-/// <reference types="react" />
-import { Calendar } from "../components/Calendar";
-import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption";
-import { Week, type WeekProps } from "../components/Week";
-import { useCalendar } from "../contexts";
-import { useProps, type PropsContextValue } from "../contexts";
-import { labelDay, labelNext, labelWeekday, labelWeekNumber } from "../labels";
-import type { PropsMulti, PropsRange, PropsSingle } from "./props";
-import type { Mode, DayEventHandler } from "./shared";
+import { MonthCaption, type MonthCaptionProps } from "../components/MonthCaption.js";
+import { Week, type WeekProps } from "../components/Week.js";
+import { labelDayButton, labelNext, labelWeekday, labelWeekNumber } from "../labels/index.js";
+import { useDayPicker } from "../useDayPicker.js";
+import type { PropsMulti, PropsRange, PropsSingle } from "./props.js";
+import type { Mode, DayEventHandler } from "./shared.js";
 /**
@@ -21,13 +18,6 @@ * @deprecated This type will be removed.
 /**
- * @deprecated This type has been renamed. Use `Calendar` instead.
- * @protected
- * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export declare const Root: typeof Calendar;
-/**
  * @deprecated This component has been renamed. Use `MonthCaption` instead.
  * @protected
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -44,3 +34,3 @@ export declare const Caption: typeof MonthCaption;
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -52,3 +42,3 @@ export type HeadRow = any;
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -113,18 +103,12 @@ export declare const Row: typeof Week;
 /**
- * @deprecated This type has been renamed to `useProps`.
+ * @deprecated This type has been removed to `useDayPicker`.
  * @protected
  * @group Hooks
  */
-export declare const useDayPicker: typeof useProps;
+export declare const useNavigation: typeof useDayPicker;
 /**
- * @deprecated This type has been renamed to `useCalendar`.
- * @protected
- * @group Hooks
- */
-export declare const useNavigation: typeof useCalendar;
-/**
  * @deprecated This hook has been removed. Use a custom `Day` component instead.
  * @protected
  * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -138,6 +122,6 @@ export type useDayRender = any;
 /**
- * @deprecated Use `typeof labelDay` instead.
+ * @deprecated Use `typeof labelDayButton` instead.
  * @protected
  */
-export type DayLabel = typeof labelDay;
+export type DayLabel = typeof labelDayButton;
 /**
@@ -193,6 +177,1 @@ * @deprecated Use `typeof labelNext` or `typeof labelPrevious` instead.
 export type DayTouchEventHandler = DayEventHandler<React.TouchEvent>;
-/**
- * @deprecated The type has been renamed. Use `PropsContext` instead.
- * @protected
- */
-export type DayPickerContext = PropsContextValue;

dist/esm/types/deprecated.js

 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Calendar } from "../components/Calendar";
-import { MonthCaption } from "../components/MonthCaption";
-import { Week } from "../components/Week";
-import { useCalendar } from "../contexts";
-import { useProps } from "../contexts";
+import { MonthCaption } from "../components/MonthCaption.js";
+import { Week } from "../components/Week.js";
+import { useDayPicker } from "../useDayPicker.js";
 /**
- * @deprecated This type has been renamed. Use `Calendar` instead.
- * @protected
- * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export const Root = Calendar;
-/**
  * @deprecated This component has been renamed. Use `MonthCaption` instead.
  * @protected
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -25,17 +16,11 @@ export const Caption = MonthCaption;
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
 export const Row = Week;
 /**
- * @deprecated This type has been renamed to `useProps`.
+ * @deprecated This type has been removed to `useDayPicker`.
  * @protected
  * @group Hooks
  */
-export const useDayPicker = useProps;
-/**
- * @deprecated This type has been renamed to `useCalendar`.
- * @protected
- * @group Hooks
- */
-export const useNavigation = useCalendar;
+export const useNavigation = useDayPicker;
 //# sourceMappingURL=deprecated.js.map

dist/esm/types/index.d.ts

@@ -1,3 +0,3 @@
-export * from "./deprecated";
-export * from "./shared";
-export * from "./props";
+export * from "./deprecated.js";
+export * from "./shared.js";
+export * from "./props.js";

dist/esm/types/index.js

@@ -1,4 +0,4 @@
-export * from "./deprecated";
-export * from "./shared";
-export * from "./props";
+export * from "./deprecated.js";
+export * from "./shared.js";
+export * from "./props.js";
 //# sourceMappingURL=index.js.map

dist/esm/types/props.d.ts

 import React from "react";
-import type { Locale } from "../lib/dateLib";
-import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, WeekNumberMouseEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared";
+import type { Locale } from "../lib/dateLib.js";
+import type { ClassNames, ModifiersClassNames, Styles, ModifiersStyles, CustomComponents, Matcher, Labels, Formatters, MonthChangeEventHandler, DayEventHandler, Modifiers, DateRange, Mode, DateLib } from "./shared.js";
 /**
@@ -177,5 +177,12 @@ * The props for the `<DayPicker />` component.
     components?: CustomComponents;
-    /** Content to add to the grid as footer element. */
-    footer?: React.ReactNode;
     /**
+     * Add a footer to the calendar, acting as live region.
+     *
+     * Use this prop to communicate the calendar's status to screen readers.
+     * Prefer strings over complex UI elements.
+     *
+     * @see https://daypicker.dev/next/using-daypicker/accessibility
+     */
+    footer?: React.ReactNode | string;
+    /**
      * When a selection mode is set, DayPicker will focus the first selected day
@@ -261,2 +268,12 @@ * (if set) or the today's date (if not disabled).
     onMonthChange?: MonthChangeEventHandler;
+    /** Event handler when the next month button is clicked. */
+    onNextClick?: MonthChangeEventHandler;
+    /** Event handler when the previous month button is clicked. */
+    onPrevClick?: MonthChangeEventHandler;
+    /**
+     * Event handler when a week number is clicked
+     *
+     * @deprecated Use a custom `WeekNumber` component instead.
+     */
+    onWeekNumberClick?: any;
     /** Event handler when a day is clicked. */
@@ -268,38 +285,52 @@ onDayClick?: DayEventHandler<React.MouseEvent>;
     onDayBlur?: DayEventHandler<React.FocusEvent>;
-    /** Event handler when the mouse enters a day. */
-    onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
-    /** Event handler when the mouse leaves a day. */
-    onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
     /** Event handler when a key is pressed on a day. */
     onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
-    /** Event handler when a key is released on a day. */
+    /**
+     * Replace the default date library with a custom one.
+     *
+     * @private
+     * @since 9.0.0
+     * @experimental
+     */
+    dateLib?: Partial<DateLib> | undefined;
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayKeyUp?: DayEventHandler<React.KeyboardEvent>;
-    /** Event handler when a key is pressed and released on a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayKeyPress?: DayEventHandler<React.KeyboardEvent>;
-    /** Event handler when a pointer enters a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayPointerEnter?: DayEventHandler<React.PointerEvent>;
-    /** Event handler when a pointer leaves a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayPointerLeave?: DayEventHandler<React.PointerEvent>;
-    /** Event handler when a touch is cancelled on a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayTouchCancel?: DayEventHandler<React.TouchEvent>;
-    /** Event handler when a touch ends on a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayTouchEnd?: DayEventHandler<React.TouchEvent>;
-    /** Event handler when a touch moves on a day. */
+    /**
+     * @private
+     * @deprecated Use a custom `DayButton` component instead.
+     */
     onDayTouchMove?: DayEventHandler<React.TouchEvent>;
-    /** Event handler when a touch starts on a day. */
-    onDayTouchStart?: DayEventHandler<React.TouchEvent>;
-    /** Event handler when the next month button is clicked. */
-    onNextClick?: MonthChangeEventHandler;
-    /** Event handler when the previous month button is clicked. */
-    onPrevClick?: MonthChangeEventHandler;
-    /** Event handler when a week number is clicked */
-    onWeekNumberClick?: WeekNumberMouseEventHandler;
     /**
-     * Replace the default date library with a custom one.
-     *
      * @private
-     * @since 9.0.0
-     * @experimental
+     * @deprecated Use a custom `DayButton` component instead.
      */
-    dateLib?: Partial<DateLib> | undefined;
+    onDayTouchStart?: DayEventHandler<React.TouchEvent>;
 }
@@ -376,2 +407,3 @@ /**
     selected?: DateRange | undefined;
+    disabled?: Matcher | Matcher[] | undefined;
     onSelect?: (selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
@@ -378,0 +410,0 @@ min?: number;

dist/esm/types/shared.d.ts

@@ -1,7 +0,7 @@
-import type { MouseEvent, CSSProperties } from "react";
-import { UI, DayFlag, CalendarFlag, ChevronFlag, WeekNumberFlag, SelectionState } from "../UI";
-import * as components from "../components/custom-components";
-import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatYearCaption, formatYearDropdown } from "../formatters";
-import { labelDay, labelCaption, labelMonthDropdown, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } from "../labels";
-import { dateLib } from "../lib";
+import type { CSSProperties } from "react";
+import { UI, DayFlag, SelectionState } from "../UI.js";
+import * as components from "../components/custom-components.js";
+import { formatCaption, formatDay, formatMonthCaption, formatMonthDropdown, formatWeekdayName, formatWeekNumber, formatYearCaption, formatYearDropdown } from "../formatters/index.js";
+import { labelDayButton, labelNav, labelGrid, labelGridcell, labelMonthDropdown, labelNext, labelPrevious, labelWeekday, labelWeekNumber, labelWeekNumberHeader, labelYearDropdown } from "../labels/index.js";
+import { dateLib } from "../lib/index.js";
 /**
@@ -42,3 +42,3 @@ * Selection modes supported by DayPicker.
     formatWeekNumber: typeof formatWeekNumber;
-    /** Format the week day name in the header */
+    /** Format the week day name in the header. */
     formatWeekdayName: typeof formatWeekdayName;
@@ -48,17 +48,23 @@ };
 export type Labels = {
-    /** Return the label for the month dropdown. */
-    labelCaption: typeof labelCaption;
-    /** Return the label for the month dropdown. */
+    /** The label for the navigation toolbar. */
+    labelNav: typeof labelNav;
+    /** The label for the month grid. */
+    labelGrid: typeof labelGrid;
+    /** The label for the gridcell, when the calendar is not interactive. */
+    labelGridcell: typeof labelGridcell;
+    /** The label for the month dropdown. */
     labelMonthDropdown: typeof labelMonthDropdown;
-    /** Return the label for the year dropdown. */
+    /** The label for the year dropdown. */
     labelYearDropdown: typeof labelYearDropdown;
-    /** Return the label for the next month button. */
+    /** The label for the "next month" button. */
     labelNext: typeof labelNext;
-    /** Return the label for the previous month button. */
+    /** The label for the "previous month" button. */
     labelPrevious: typeof labelPrevious;
-    /** Return the label for the day cell. */
-    labelDay: typeof labelDay;
-    /** Return the label for the weekday. */
+    /** The label for the day button.. */
+    labelDayButton: typeof labelDayButton;
+    /** @deprecated Use {@link labelDayButton} instead. */
+    labelDay: typeof labelDayButton;
+    /** The label for the weekday. */
     labelWeekday: typeof labelWeekday;
-    /** Return the label for the week number. */
+    /** The label for the week number. */
     labelWeekNumber: typeof labelWeekNumber;
@@ -172,17 +178,9 @@ /**
 export type MonthChangeEventHandler = (month: Date) => void;
-/** The event handler when the week number is clicked. */
-export type WeekNumberMouseEventHandler = (
-/** The week number that has been clicked. */
-weekNumber: number, 
-/** The dates in the clicked week. */
-dates: Date[], 
-/** The mouse event that triggered this event. */
-e: MouseEvent) => void;
 /** Maps user interface elements, selection states, and flags to a CSS style. */
 export type Styles = {
-    [key in UI | SelectionState | DayFlag | CalendarFlag | ChevronFlag | WeekNumberFlag]: CSSProperties | undefined;
+    [key in UI | SelectionState | DayFlag]: CSSProperties | undefined;
 };
 /** Defines the class names for various UI components and states. */
 export type ClassNames = {
-    [key in UI | SelectionState | DayFlag | CalendarFlag | ChevronFlag | WeekNumberFlag]: string;
+    [key in UI | SelectionState | DayFlag]: string;
 };
@@ -189,0 +187,0 @@ /** The flags that are matching a day in the calendar. */

dist/esm/UI.d.ts

@@ -11,9 +11,6 @@ /**
     ButtonPrevious = "button_previous",
-    /** The next button the navigation */
+    /** The next button the navigation. */
     ButtonNext = "button_next",
-    /**
-     * The calendar element: the root component displaying the months and the
-     * navigation bar. Extended by {@link CalendarFlag}.
-     */
-    Calendar = "calendar",
+    /** The root component displaying the months and the navigation bar. */
+    Root = "root",
     /** The Chevron SVG element used by navigation buttons and dropdowns. */
@@ -26,4 +23,4 @@ Chevron = "chevron",
     Day = "day",
-    /** The element containing the formatted day's date, inside the grid cell. */
-    DayDate = "day_date",
+    /** The button containing the formatted day's date, inside the grid cell. */
+    DayButton = "day_button",
     /** The caption label of the month (when not showing the dropdown navigation). */
@@ -40,3 +37,3 @@ CaptionLabel = "caption_label",
     /** The month grid. */
-    Month = "month",
+    MonthGrid = "month_grid",
     /** Contains the dropdown navigation or the caption label. */
@@ -46,7 +43,7 @@ MonthCaption = "month_caption",
     MonthsDropdown = "months_dropdown",
-    /** Wrapper of the {@link} grid. */
-    MonthWrapper = "month_wrapper",
+    /** Wrapper of the month grid. */
+    Month = "month",
     /** The container of the displayed months. */
     Months = "months",
-    /** The navigation bar with the previous and next buttons */
+    /** The navigation bar with the previous and next buttons. */
     Nav = "nav",
@@ -61,7 +58,6 @@ /** The row containing the week. */
     Weekdays = "weekdays",
-    /**
-     * The row header containing the week number. Extended by
-     * {@link WeekNumberFlag}.
-     */
+    /** The row header containing the week number. */
     WeekNumber = "week_number",
+    /** The row header containing the week number. */
+    WeekNumberHeader = "week_number_header",
     /** The dropdown with the years. */
@@ -72,10 +68,8 @@ YearsDropdown = "years_dropdown"
 export declare enum DayFlag {
-    /** The day is disabled */
+    /** The day is disabled. */
     disabled = "disabled",
-    /** The day is hidden */
+    /** The day is hidden. */
     hidden = "hidden",
-    /** The day is outside the current month */
+    /** The day is outside the current month. */
     outside = "outside",
-    /** The day is focusable. */
-    focusable = "focusable",
     /** The day is focused. */
@@ -100,23 +94,1 @@ focused = "focused",
 }
-/** Flags that can be applied to the {@link UI.Calendar} element. */
-export declare enum CalendarFlag {
-    /** Assigned when the week numbers are show. */
-    has_week_numbers = "has_week_numbers",
-    /** Assigned when the weekdays are hidden. */
-    no_weekdays = "no_weekdays",
-    /** Assigned when the calendar has multiple months. */
-    has_multiple_months = "has_multiple_months"
-}
-/** Flags that can be applied to the {@link UI.Chevron} element. */
-export declare enum ChevronFlag {
-    /** Assigned when the week numbers are show. */
-    disabled = "chevron_disabled"
-}
-/** Flags that can be applied to the {@link UI.WeekNumber} element. */
-export declare enum WeekNumberFlag {
-    /**
-     * Assigned when the week number is interactive, i.e. has an
-     * `onWeekNumberClick` event attached to it.
-     */
-    week_number_interactive = "week_number_interactive"
-}

dist/esm/UI.js

@@ -12,9 +12,6 @@ /**
     UI["ButtonPrevious"] = "button_previous";
-    /** The next button the navigation */
+    /** The next button the navigation. */
     UI["ButtonNext"] = "button_next";
-    /**
-     * The calendar element: the root component displaying the months and the
-     * navigation bar. Extended by {@link CalendarFlag}.
-     */
-    UI["Calendar"] = "calendar";
+    /** The root component displaying the months and the navigation bar. */
+    UI["Root"] = "root";
     /** The Chevron SVG element used by navigation buttons and dropdowns. */
@@ -27,4 +24,4 @@ UI["Chevron"] = "chevron";
     UI["Day"] = "day";
-    /** The element containing the formatted day's date, inside the grid cell. */
-    UI["DayDate"] = "day_date";
+    /** The button containing the formatted day's date, inside the grid cell. */
+    UI["DayButton"] = "day_button";
     /** The caption label of the month (when not showing the dropdown navigation). */
@@ -41,3 +38,3 @@ UI["CaptionLabel"] = "caption_label";
     /** The month grid. */
-    UI["Month"] = "month";
+    UI["MonthGrid"] = "month_grid";
     /** Contains the dropdown navigation or the caption label. */
@@ -47,7 +44,7 @@ UI["MonthCaption"] = "month_caption";
     UI["MonthsDropdown"] = "months_dropdown";
-    /** Wrapper of the {@link} grid. */
-    UI["MonthWrapper"] = "month_wrapper";
+    /** Wrapper of the month grid. */
+    UI["Month"] = "month";
     /** The container of the displayed months. */
     UI["Months"] = "months";
-    /** The navigation bar with the previous and next buttons */
+    /** The navigation bar with the previous and next buttons. */
     UI["Nav"] = "nav";
@@ -62,7 +59,6 @@ /** The row containing the week. */
     UI["Weekdays"] = "weekdays";
-    /**
-     * The row header containing the week number. Extended by
-     * {@link WeekNumberFlag}.
-     */
+    /** The row header containing the week number. */
     UI["WeekNumber"] = "week_number";
+    /** The row header containing the week number. */
+    UI["WeekNumberHeader"] = "week_number_header";
     /** The dropdown with the years. */
@@ -74,10 +70,8 @@ UI["YearsDropdown"] = "years_dropdown";
 (function (DayFlag) {
-    /** The day is disabled */
+    /** The day is disabled. */
     DayFlag["disabled"] = "disabled";
-    /** The day is hidden */
+    /** The day is hidden. */
     DayFlag["hidden"] = "hidden";
-    /** The day is outside the current month */
+    /** The day is outside the current month. */
     DayFlag["outside"] = "outside";
-    /** The day is focusable. */
-    DayFlag["focusable"] = "focusable";
     /** The day is focused. */
@@ -103,27 +97,2 @@ DayFlag["focused"] = "focused";
 })(SelectionState || (SelectionState = {}));
-/** Flags that can be applied to the {@link UI.Calendar} element. */
-export var CalendarFlag;
-(function (CalendarFlag) {
-    /** Assigned when the week numbers are show. */
-    CalendarFlag["has_week_numbers"] = "has_week_numbers";
-    /** Assigned when the weekdays are hidden. */
-    CalendarFlag["no_weekdays"] = "no_weekdays";
-    /** Assigned when the calendar has multiple months. */
-    CalendarFlag["has_multiple_months"] = "has_multiple_months";
-})(CalendarFlag || (CalendarFlag = {}));
-/** Flags that can be applied to the {@link UI.Chevron} element. */
-export var ChevronFlag;
-(function (ChevronFlag) {
-    /** Assigned when the week numbers are show. */
-    ChevronFlag["disabled"] = "chevron_disabled";
-})(ChevronFlag || (ChevronFlag = {}));
-/** Flags that can be applied to the {@link UI.WeekNumber} element. */
-export var WeekNumberFlag;
-(function (WeekNumberFlag) {
-    /**
-     * Assigned when the week number is interactive, i.e. has an
-     * `onWeekNumberClick` event attached to it.
-     */
-    WeekNumberFlag["week_number_interactive"] = "week_number_interactive";
-})(WeekNumberFlag || (WeekNumberFlag = {}));
 //# sourceMappingURL=UI.js.map

dist/esm/utc.d.ts

 import React from "react";
-import { type DayPickerProps } from "./";
+import { type DayPickerProps } from "./index.js";
 export declare function DayPicker(props: DayPickerProps): React.JSX.Element;

dist/esm/utc.js

 import React from "react";
 import { UTCDate } from "@date-fns/utc";
-import { DayPicker as DayPickerComponent } from "./";
+import { DayPicker as DayPickerComponent } from "./index.js";
 export function DayPicker(props) {
@@ -5,0 +5,0 @@ return React.createElement(DayPickerComponent, { dateLib: { Date: UTCDate }, ...props });

dist/esm/utils/addToRange.d.ts

@@ -1,2 +0,2 @@
-import type { DateRange, DateLib } from "../types";
+import type { DateRange, DateLib } from "../types/index.js";
 /**
@@ -3,0 +3,0 @@ * Add a day to an existing range.

dist/esm/utils/addToRange.js

@@ -1,2 +0,2 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
@@ -3,0 +3,0 @@ * Add a day to an existing range.

dist/esm/utils/dateMatchModifiers.d.ts

@@ -1,4 +0,7 @@
-import type { DateLib, Matcher } from "../types";
+import type { DateLib, Matcher } from "../types/index.js";
+/** Returns true if `value` is an array of valid dates. */
+export declare function isDatesArray(value: unknown, dateLib: DateLib): value is Date[];
 /**
- * Returns whether a day matches against at least one of the given Matchers.
+ * Returns whether a day matches against at least one of the given
+ * {@link Matcher}`.
  *
@@ -20,2 +23,2 @@ * ```tsx
  */
-export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[], dateUtils?: DateLib): boolean;
+export declare function dateMatchModifiers(date: Date, matchers: Matcher | Matcher[], dateLib: DateLib): boolean;

dist/esm/utils/dateMatchModifiers.js

@@ -1,14 +0,10 @@
-import { dateLib as defaultDateLib } from "../lib";
-import { isDateInRange } from "./isDateInRange";
-import { isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType } from "./typeguards";
-/** Returns true if `value` is a Date type. */
-function isDateType(value) {
-    return defaultDateLib.isDate(value);
-}
+import { isDateInRange } from "./isDateInRange.js";
+import { isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType } from "./typeguards.js";
 /** Returns true if `value` is an array of valid dates. */
-function isArrayOfDates(value) {
-    return Array.isArray(value) && value.every(defaultDateLib.isDate);
+export function isDatesArray(value, dateLib) {
+    return Array.isArray(value) && value.every(dateLib.isDate);
 }
 /**
- * Returns whether a day matches against at least one of the given Matchers.
+ * Returns whether a day matches against at least one of the given
+ * {@link Matcher}`.
  *
@@ -30,5 +26,5 @@ * ```tsx
  */
-export function dateMatchModifiers(date, matchers, dateUtils = defaultDateLib) {
+export function dateMatchModifiers(date, matchers, dateLib) {
     const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers;
-    const { isSameDay, differenceInCalendarDays, isAfter } = dateUtils;
+    const { isSameDay, differenceInCalendarDays, isAfter } = dateLib;
     return matchersArr.some((matcher) => {
@@ -38,10 +34,10 @@ if (typeof matcher === "boolean") {
         }
-        if (isDateType(matcher)) {
+        if (dateLib.isDate(matcher)) {
             return isSameDay(date, matcher);
         }
-        if (isArrayOfDates(matcher)) {
+        if (isDatesArray(matcher, dateLib)) {
             return matcher.includes(date);
         }
         if (isDateRange(matcher)) {
-            return isDateInRange(date, matcher, dateUtils);
+            return isDateInRange(date, matcher, dateLib);
         }
@@ -48,0 +44,0 @@ if (isDayOfWeekType(matcher)) {

dist/esm/utils/index.d.ts

@@ -1,4 +0,4 @@
-export * from "./addToRange";
-export * from "./dateMatchModifiers";
-export * from "./isDateInRange";
-export * from "./typeguards";
+export * from "./addToRange.js";
+export * from "./dateMatchModifiers.js";
+export * from "./isDateInRange.js";
+export * from "./typeguards.js";

dist/esm/utils/index.js

@@ -1,5 +0,5 @@
-export * from "./addToRange";
-export * from "./dateMatchModifiers";
-export * from "./isDateInRange";
-export * from "./typeguards";
+export * from "./addToRange.js";
+export * from "./dateMatchModifiers.js";
+export * from "./isDateInRange.js";
+export * from "./typeguards.js";
 //# sourceMappingURL=index.js.map

dist/esm/utils/isDateInRange.d.ts

@@ -1,2 +0,2 @@
-import type { DateRange, DateLib } from "../types";
+import type { DateRange, DateLib } from "../types/index.js";
 /**
@@ -3,0 +3,0 @@ * Determines whether a given date is inside a specified date range.

dist/esm/utils/isDateInRange.js

@@ -1,2 +0,2 @@
-import { dateLib as defaultDateLib } from "../lib";
+import { dateLib as defaultDateLib } from "../lib/index.js";
 /**
@@ -3,0 +3,0 @@ * Determines whether a given date is inside a specified date range.

dist/esm/utils/typeguards.d.ts

@@ -1,2 +0,2 @@
-import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types";
+import type { DateAfter, DateBefore, DateInterval, DateRange, DayOfWeek, DayPickerProps, PropsMulti, PropsRange, PropsSingle } from "../types/index.js";
 /**
@@ -27,8 +27,2 @@ * Returns true if `matcher` is of type `DateInterval`.
 /**
- * Returns true if `value` is a `DayOfWeek` type.
- *
- * @group Utilities
- */
-export declare function isDayOfWeekType(value: unknown): value is DayOfWeek;
-/**
  * Returns true if the props are for a single selection mode.
@@ -62,2 +56,8 @@ *
 /**
+ * Returns true if `value` is a `DayOfWeek` type.
+ *
+ * @group Utilities
+ */
+export declare function isDayOfWeekType(value: unknown): value is DayOfWeek;
+/**
  * @deprecated This function has been renamed Use `isRange` instead.
@@ -64,0 +64,0 @@ * @protected

dist/esm/utils/typeguards.js

@@ -37,10 +37,2 @@ /**
 /**
- * Returns true if `value` is a `DayOfWeek` type.
- *
- * @group Utilities
- */
-export function isDayOfWeekType(value) {
-    return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
-}
-/**
  * Returns true if the props are for a single selection mode.
@@ -80,2 +72,10 @@ *
 /**
+ * Returns true if `value` is a `DayOfWeek` type.
+ *
+ * @group Utilities
+ */
+export function isDayOfWeekType(value) {
+    return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
+}
+/**
  * @deprecated This function has been renamed Use `isRange` instead.
@@ -82,0 +82,0 @@ * @protected

examples/index.ts

@@ -7,3 +7,3 @@ export * from "./AccessibleDatePicker";
 export * from "./CustomCaption";
-export * from "./CustomDayDate";
+export * from "./CustomDayButton";
 export * from "./CustomMultiple";
@@ -40,5 +40,3 @@ export * from "./CustomSingle";
 export * from "./MultipleMonths";
-export * from "./MultipleMonthsId";
 export * from "./MultipleMonthsPaged";
-export * from "./None";
 export * from "./NumberingSystem";
@@ -45,0 +43,0 @@ export * from "./OutsideDays";

package.json

 {
   "name": "react-day-picker",
-  "version": "9.0.0-rc.2",
+  "version": "9.0.0-rc.3",
   "description": "Customizable Date Picker for React",
@@ -19,2 +19,3 @@ "author": "Giampaolo Bellavite <[e-mail]>",
   "style": "./src/style.css",
+  "type": "module",
   "exports": {
@@ -101,6 +102,6 @@ ".": {
     "prepublish": "pnpm build",
-    "build": "pnpm build:cjs && pnpm build:esm",
+    "build": "pnpm build:cjs && pnpm build:esm && pnpm build:css",
     "build:cjs": "tsc --project tsconfig-cjs.json",
     "build:esm": "tsc --project tsconfig-esm.json",
-    "build:css": "tcm src",
+    "build:css": "./scripts/build-css.sh ./src/style.css ./src/style.module.css",
     "lint": "eslint .",
@@ -124,3 +125,3 @@ "test": "jest",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -135,3 +136,3 @@ "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "date-fns": "^3.6.0",
-    "date-fns-jalali": "3.6.0-0",
+    "date-fns-jalali": "3.6.0-1",
     "eslint": "^8.57.0",
@@ -145,2 +146,3 @@ "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-require-extensions": "^0.1.3",
     "eslint-plugin-testing-library": "^6.2.2",
@@ -158,3 +160,3 @@ "jest": "^29.7.0",
     "tslib": "^2.6.2",
-    "typescript": "~5.4.5",
+    "typescript": "~5.5.3",
     "typescript-css-modules": "^1.0.4"
@@ -161,0 +163,0 @@ },

src/classes/CalendarDay.ts

@@ -1,3 +0,3 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
@@ -23,5 +23,13 @@ /**
     this.dateLib = dateLib;
+    const { format } = dateLib;
+    this.uid =
+      format(date, "yyyyMMdd") +
+      (this.outside ? `-` + format(displayMonth, "yyyyMMdd") : "");
   }
 
-  /** The utility functions to manipulate dates. */
+  /**
+   * The utility functions to manipulate dates.
+   *
+   * @private
+   */
   readonly dateLib: DateLib;
@@ -49,2 +57,5 @@
 
+  /** A unique identifier for the day. */
+  readonly uid: string;
+
   /**
@@ -51,0 +62,0 @@ * Check if the day is the same as the given day: considering if it is in the

src/classes/CalendarMonth.ts

@@ -1,2 +0,2 @@
-import { CalendarWeek } from "./CalendarWeek";
+import { CalendarWeek } from "./CalendarWeek.js";
 
@@ -3,0 +3,0 @@ /** Represent a month in a calendar year. Contains the weeks within the month. */

src/classes/CalendarWeek.ts

@@ -1,2 +0,2 @@
-import { CalendarDay } from "./CalendarDay";
+import { CalendarDay } from "./CalendarDay.js";
 
@@ -3,0 +3,0 @@ /** Represent a week in a calendar month. */

src/classes/index.ts

@@ -1,3 +0,3 @@
-export * from "./CalendarDay";
-export * from "./CalendarMonth";
-export * from "./CalendarWeek";
+export * from "./CalendarDay.js";
+export * from "./CalendarMonth.js";
+export * from "./CalendarWeek.js";

src/formatters/formatCaption.ts

@@ -1,3 +0,3 @@
-import { FormatOptions, dateLib as defaultDateLib } from "../lib";
-import type { DateLib } from "../types";
+import { FormatOptions, dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
@@ -4,0 +4,0 @@ /**

src/formatters/formatDay.ts

@@ -1,4 +0,4 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { FormatOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
@@ -5,0 +5,0 @@ /**

src/formatters/formatMonthDropdown.ts

@@ -1,3 +0,3 @@
-import type { DateFnsMonth } from "../lib/dateLib";
-import { enUS } from "../lib/locales";
+import type { DateFnsMonth } from "../lib/dateLib.js";
+import { enUS } from "../lib/locales.js";
 
@@ -4,0 +4,0 @@ /**

src/formatters/formatWeekdayName.ts

@@ -1,4 +0,4 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { FormatOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
@@ -5,0 +5,0 @@ /**

src/formatters/formatWeekNumber.ts

 /**
  * The default formatter for the week numbers.
  *
+ * @param weekNumber - The week number to format. `0` when heading of the week
+ *   numbers.
  * @group Formatters
  */
-export function formatWeekNumber(weekNumber: number) {
+export function formatWeekNumber(weekNumber: number | 0) {
+  if (weekNumber === 0) {
+    return `#`;
+  }
+  if (weekNumber < 10) {
+    return `0${weekNumber.toLocaleString()}`;
+  }
   return `${weekNumber.toLocaleString()}`;
 }

src/formatters/index.ts

@@ -1,6 +0,7 @@
-export * from "./formatCaption";
-export * from "./formatDay";
-export * from "./formatMonthDropdown";
-export * from "./formatWeekNumber";
-export * from "./formatWeekdayName";
-export * from "./formatYearDropdown";
+export * from "./formatCaption.js";
+export * from "./formatDay.js";
+export * from "./formatMonthDropdown.js";
+export * from "./formatWeekNumber.js";
+export * from "./formatWeekNumberHeader.js";
+export * from "./formatWeekdayName.js";
+export * from "./formatYearDropdown.js";

src/helpers/getClassNamesForModifiers.ts

@@ -1,8 +0,8 @@
-import { DayFlag, SelectionState } from "../UI";
-import type { ModifiersClassNames, ClassNames } from "../types";
+import { DayFlag, SelectionState } from "../UI.js";
+import type { ModifiersClassNames, ClassNames } from "../types/index.js";
 
 export function getClassNamesForModifiers(
   modifiers: Record<string, boolean>,
-  modifiersClassNames: ModifiersClassNames,
-  classNames: ClassNames
+  classNames: ClassNames,
+  modifiersClassNames: ModifiersClassNames = {}
 ) {
@@ -9,0 +9,0 @@ const modifierClassNames = Object.entries(modifiers)

src/helpers/getDates.test.ts

@@ -10,6 +10,10 @@ import { dateLib } from "../lib";
       it("should return 42 dates", () => {
-        const dates = getDates([month], undefined, {
-          fixedWeeks: false,
+        const dates = getDates(
+          [month],
+          undefined,
+          {
+            fixedWeeks: false
+          },
           dateLib
-        });
+        );
         expect(dates).toHaveLength(42);
@@ -22,6 +26,10 @@ expect(dates[0]).toEqual(new Date(2023, 10, 26));
       it("should return 42 dates", () => {
-        const dates = getDates([month], undefined, {
-          fixedWeeks: true,
+        const dates = getDates(
+          [month],
+          undefined,
+          {
+            fixedWeeks: true
+          },
           dateLib
-        });
+        );
         expect(dates).toHaveLength(42);
@@ -37,6 +45,10 @@ expect(dates[0]).toEqual(new Date(2023, 10, 26));
       it("should return 35 dates", () => {
-        const dates = getDates([month], undefined, {
-          fixedWeeks: false,
+        const dates = getDates(
+          [month],
+          undefined,
+          {
+            fixedWeeks: false
+          },
           dateLib
-        });
+        );
         expect(dates).toHaveLength(35);
@@ -49,6 +61,10 @@ expect(dates[0]).toEqual(new Date(2023, 3, 30));
       it("should return 42 dates", () => {
-        const dates = getDates([month], undefined, {
-          fixedWeeks: true,
+        const dates = getDates(
+          [month],
+          undefined,
+          {
+            fixedWeeks: true
+          },
           dateLib
-        });
+        );
         expect(dates).toHaveLength(42);
@@ -63,6 +79,10 @@ expect(dates[0]).toEqual(new Date(2023, 3, 30));
     it("the first day should be Monday", () => {
-      const dates = getDates([month], undefined, {
-        weekStartsOn: 1,
+      const dates = getDates(
+        [month],
+        undefined,
+        {
+          weekStartsOn: 1
+        },
         dateLib
-      });
+      );
       expect(dates[0]).toBeMonday();
@@ -78,3 +98,3 @@ expect(dates[0]).toEqual(new Date(2023, 4, 1));
     it("the last day should be the max date", () => {
-      const dates = getDates([month], maxDate, { weekStartsOn: 1, dateLib });
+      const dates = getDates([month], maxDate, { weekStartsOn: 1 }, dateLib);
       expect(dates).toHaveLength(15);
@@ -87,3 +107,3 @@ expect(dates[dates.length - 1]).toEqual(maxDate);
     it("the first day should be Monday", () => {
-      const dates = getDates([month], undefined, { ISOWeek: true, dateLib });
+      const dates = getDates([month], undefined, { ISOWeek: true }, dateLib);
       expect(dates[0]).toBeMonday();
@@ -101,6 +121,10 @@ expect(dates[0]).toEqual(new Date(2023, 4, 1));
     it("should return an array of dates", () => {
-      const dates = getDates([firstMonth, lastMonth], undefined, {
-        fixedWeeks: false,
+      const dates = getDates(
+        [firstMonth, lastMonth],
+        undefined,
+        {
+          fixedWeeks: false
+        },
         dateLib
-      });
+      );
       expect(dates).toHaveLength(252);
@@ -117,6 +141,10 @@ expect(dates[0]).toEqual(new Date(2023, 3, 30));
     it("the last day should be the max date", () => {
-      const dates = getDates([firstMonth, lastMonth], maxDate, {
-        weekStartsOn: 1,
+      const dates = getDates(
+        [firstMonth, lastMonth],
+        maxDate,
+        {
+          weekStartsOn: 1
+        },
         dateLib
-      });
+      );
       expect(dates).toHaveLength(46);
@@ -129,3 +157,3 @@ expect(dates[dates.length - 1]).toEqual(maxDate);
     it("the first day should be Monday", () => {
-      const dates = getDates([month], undefined, { ISOWeek: true, dateLib });
+      const dates = getDates([month], undefined, { ISOWeek: true }, dateLib);
       expect(dates[0]).toBeMonday();
@@ -132,0 +160,0 @@ expect(dates[0]).toEqual(new Date(2023, 4, 1));

src/helpers/getDates.ts

@@ -1,2 +0,2 @@
-import { PropsContextValue } from "../contexts";
+import { DateLib, DayPickerProps } from "../index.js";
 
@@ -11,5 +11,6 @@ /** The number of days in a month when having 6 weeks. */
   props: Pick<
-    PropsContextValue,
-    "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn" | "dateLib"
-  >
+    DayPickerProps,
+    "ISOWeek" | "fixedWeeks" | "locale" | "weekStartsOn"
+  >,
+  dateLib: DateLib
 ): Date[] {
@@ -31,3 +32,3 @@ const firstMonth = displayMonths[0];
     Date
-  } = props.dateLib;
+  } = dateLib;
 
@@ -34,0 +35,0 @@ const startWeekFirstDate = ISOWeek

src/helpers/getDays.ts

@@ -1,2 +0,2 @@
-import type { CalendarDay, CalendarMonth } from "../classes";
+import type { CalendarDay, CalendarMonth } from "../classes/index.js";
 
@@ -3,0 +3,0 @@ /**

src/helpers/getDefaultClassNames.test.ts

@@ -7,8 +7,7 @@ import { getDefaultClassNames } from "./getDefaultClassNames";
     button_previous: "rdp-button_previous",
-    calendar: "rdp-calendar",
+    root: "rdp-root",
     caption_label: "rdp-caption_label",
     chevron: "rdp-chevron",
-    chevron_disabled: "rdp-chevron_disabled",
     day: "rdp-day",
-    day_date: "rdp-day_date",
+    day_button: "rdp-day_button",
     disabled: "rdp-disabled",
@@ -18,10 +17,7 @@ dropdown_nav: "rdp-dropdown_nav",
     dropdown: "rdp-dropdown",
-    focusable: "rdp-focusable",
     focused: "rdp-focused",
     footer: "rdp-footer",
-    has_multiple_months: "rdp-has_multiple_months",
-    has_week_numbers: "rdp-has_week_numbers",
     hidden: "rdp-hidden",
     month_caption: "rdp-month_caption",
-    month_wrapper: "rdp-month_wrapper",
+    month_grid: "rdp-month_grid",
     month: "rdp-month",
@@ -32,3 +28,2 @@ weeks: "rdp-weeks",
     nav: "rdp-nav",
-    no_weekdays: "rdp-no_weekdays",
     outside: "rdp-outside",
@@ -41,3 +36,3 @@ range_end: "rdp-range_end",
     week_number: "rdp-week_number",
-    week_number_interactive: "rdp-week_number_interactive",
+    week_number_header: "rdp-week_number_header",
     week: "rdp-week",
@@ -44,0 +39,0 @@ weekday: "rdp-weekday",

src/helpers/getDefaultClassNames.ts

@@ -1,10 +0,3 @@
-import {
-  UI,
-  DayFlag,
-  CalendarFlag,
-  ChevronFlag,
-  WeekNumberFlag,
-  SelectionState
-} from "../UI";
-import type { ClassNames } from "../types";
+import { UI, DayFlag, SelectionState } from "../UI.js";
+import type { ClassNames } from "../types/index.js";
 
@@ -24,17 +17,2 @@ /**
 
-  for (const key in CalendarFlag) {
-    classNames[CalendarFlag[key as keyof typeof CalendarFlag]] =
-      `rdp-${CalendarFlag[key as keyof typeof CalendarFlag]}`;
-  }
-
-  for (const key in ChevronFlag) {
-    classNames[ChevronFlag[key as keyof typeof ChevronFlag]] =
-      `rdp-${ChevronFlag[key as keyof typeof ChevronFlag]}`;
-  }
-
-  for (const key in WeekNumberFlag) {
-    classNames[WeekNumberFlag[key as keyof typeof WeekNumberFlag]] =
-      `rdp-${WeekNumberFlag[key as keyof typeof WeekNumberFlag]}`;
-  }
-
   for (const key in DayFlag) {
@@ -41,0 +19,0 @@ classNames[DayFlag[key as keyof typeof DayFlag]] =

src/helpers/getDisplayMonths.test.ts

@@ -9,7 +9,3 @@ import { dateLib } from "react-day-picker";
     const expectedResult = [new Date(2020, 0)];
-    const result = getDisplayMonths(firstMonth, {
-      numberOfMonths: 1,
-      endMonth: undefined,
-      dateLib
-    });
+    const result = getDisplayMonths(firstMonth, undefined, {}, dateLib);
     expect(result).toEqual(expectedResult);
@@ -25,7 +21,10 @@ });
     ];
-    const result = getDisplayMonths(firstMonth, {
-      numberOfMonths: 3,
-      endMonth: undefined,
+    const result = getDisplayMonths(
+      firstMonth,
+      undefined,
+      {
+        numberOfMonths: 3
+      },
       dateLib
-    });
+    );
     expect(result).toEqual(expectedResult);
@@ -37,9 +36,12 @@ });
     const expectedResult = [new Date(2020, 0), new Date(2020, 1)];
-    const result = getDisplayMonths(firstMonth, {
-      numberOfMonths: 3,
-      endMonth: new Date(2020, 1, 10),
+    const result = getDisplayMonths(
+      firstMonth,
+      new Date(2020, 1, 10),
+      {
+        numberOfMonths: 3
+      },
       dateLib
-    });
+    );
     expect(result).toEqual(expectedResult);
   });
 });

src/helpers/getDisplayMonths.ts

@@ -1,11 +0,14 @@
-import type { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 
 export function getDisplayMonths(
   firstDisplayedMonth: Date,
-  props: Pick<PropsContextValue, "numberOfMonths" | "endMonth" | "dateLib">
+  calendarEndMonth: Date | undefined,
+  props: Pick<DayPickerProps, "numberOfMonths">,
+  dateLib: DateLib
 ) {
+  const { numberOfMonths = 1 } = props;
   const months: Date[] = [];
-  for (let i = 0; i < props.numberOfMonths; i++) {
-    const month = props.dateLib.addMonths(firstDisplayedMonth, i);
-    if (props.endMonth && month > props.endMonth) {
+  for (let i = 0; i < numberOfMonths; i++) {
+    const month = dateLib.addMonths(firstDisplayedMonth, i);
+    if (calendarEndMonth && month > calendarEndMonth) {
       break;
@@ -12,0 +15,0 @@ }

src/helpers/getDropdownMonths.test.ts

@@ -16,9 +16,10 @@ import { type Locale, format } from "date-fns";
   });
-  const result = getDropdownMonths(displayMonth, {
+  const result = getDropdownMonths(
+    displayMonth,
+    startMonth,
+    endMonth,
     formatters,
     locale,
-    startMonth,
-    endMonth,
     dateLib
-  });
+  );
 
@@ -25,0 +26,0 @@ expect(result).toEqual([

src/helpers/getDropdownMonths.ts

@@ -1,3 +0,4 @@
-import { DropdownOption } from "../components/Dropdown";
-import { PropsContextValue } from "../contexts";
+import { DropdownOption } from "../components/Dropdown.js";
+import type { Locale } from "../lib/dateLib.js";
+import type { DateLib, Formatters } from "../types/index.js";
 
@@ -7,16 +8,16 @@ /** Return the months to show in the dropdown. */
   displayMonth: Date,
-  props: Pick<
-    PropsContextValue,
-    "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib"
-  >
+  calendarStartMonth: Date | undefined,
+  calendarEndMonth: Date | undefined,
+  formatters: Pick<Formatters, "formatMonthDropdown">,
+  locale: Locale | undefined,
+  dateLib: DateLib
 ): DropdownOption[] | undefined {
-  const { startMonth, endMonth } = props;
-  if (!startMonth) return undefined;
-  if (!endMonth) return undefined;
+  if (!calendarStartMonth) return undefined;
+  if (!calendarEndMonth) return undefined;
 
-  const { addMonths, startOfMonth, isBefore, Date } = props.dateLib;
+  const { addMonths, startOfMonth, isBefore, Date } = dateLib;
   const year = displayMonth.getFullYear();
 
-  const navStartMonth = startOfMonth(startMonth);
-  const navEndMonth = startOfMonth(endMonth);
+  const navStartMonth = startOfMonth(calendarStartMonth);
+  const navEndMonth = startOfMonth(calendarEndMonth);
 
@@ -33,6 +34,8 @@ const months: number[] = [];
   const options = sortedMonths.map((value) => {
-    const label = props.formatters.formatMonthDropdown(value, props.locale);
+    const label = formatters.formatMonthDropdown(value, locale);
     const disabled =
-      (startMonth && new Date(year, value) < startOfMonth(startMonth)) ||
-      (endMonth && new Date(year, value) > startOfMonth(endMonth)) ||
+      (calendarStartMonth &&
+        new Date(year, value) < startOfMonth(calendarStartMonth)) ||
+      (calendarEndMonth &&
+        new Date(year, value) > startOfMonth(calendarEndMonth)) ||
       false;
@@ -39,0 +42,0 @@ return { value, label, disabled };

src/helpers/getDropdownYears.test.ts

@@ -1,2 +0,1 @@
-import { enUS as locale } from "date-fns/locale";
 import { dateLib } from "react-day-picker";
@@ -12,16 +11,16 @@
   });
-  const result1 = getDropdownYears(displayMonth, {
+  const result1 = getDropdownYears(
+    displayMonth,
+    undefined,
+    new Date(2022, 11, 31),
     formatters,
-    locale,
-    startMonth: undefined,
-    endMonth: new Date(2022, 11, 31),
     dateLib
-  });
-  const result2 = getDropdownYears(displayMonth, {
+  );
+  const result2 = getDropdownYears(
+    displayMonth,
+    new Date(2022, 0, 1),
+    undefined,
     formatters,
-    locale,
-    startMonth: new Date(2022, 0, 1),
-    endMonth: undefined,
     dateLib
-  });
+  );
 
@@ -40,9 +39,9 @@ expect(result1).toBeUndefined();
 
-  const result = getDropdownYears(displayMonth, {
-    formatters,
-    locale,
+  const result = getDropdownYears(
+    displayMonth,
     startMonth,
     endMonth,
+    formatters,
     dateLib
-  });
+  );
 
@@ -49,0 +48,0 @@ expect(result).toEqual([

src/helpers/getDropdownYears.ts

@@ -1,3 +0,3 @@
-import { DropdownOption } from "../components/Dropdown";
-import { PropsContextValue } from "../contexts";
+import { DropdownOption } from "../components/Dropdown.js";
+import type { DateLib, Formatters } from "../types/index.js";
 
@@ -7,10 +7,9 @@ /** Return the years to show in the dropdown. */
   displayMonth: Date,
-  props: Pick<
-    PropsContextValue,
-    "formatters" | "locale" | "startMonth" | "endMonth" | "dateLib"
-  >
+  calendarStart: Date | undefined,
+  calendarEnd: Date | undefined,
+  formatters: Pick<Formatters, "formatYearDropdown">,
+  dateLib: DateLib
 ): DropdownOption[] | undefined {
-  const { startMonth, endMonth } = props;
-  if (!startMonth) return undefined;
-  if (!endMonth) return undefined;
+  if (!calendarStart) return undefined;
+  if (!calendarEnd) return undefined;
   const {
@@ -24,6 +23,6 @@ startOfMonth,
     Date
-  } = props.dateLib;
+  } = dateLib;
   const month = displayMonth.getMonth();
-  const firstNavYear = startOfYear(startMonth);
-  const lastNavYear = endOfYear(endMonth);
+  const firstNavYear = startOfYear(calendarStart);
+  const lastNavYear = endOfYear(calendarEnd);
   const years: number[] = [];
@@ -39,6 +38,8 @@
     const disabled =
-      (startMonth && new Date(value, month) < startOfMonth(startMonth)) ||
-      (month && endMonth && new Date(value, month) > startOfMonth(endMonth)) ||
+      (calendarStart && new Date(value, month) < startOfMonth(calendarStart)) ||
+      (month &&
+        calendarEnd &&
+        new Date(value, month) > startOfMonth(calendarEnd)) ||
       false;
-    const label = props.formatters.formatYearDropdown(value);
+    const label = formatters.formatYearDropdown(value);
     return {
@@ -45,0 +46,0 @@ value,

src/helpers/getFormatters.ts

@@ -1,3 +0,3 @@
-import * as defaultFormatters from "../formatters";
-import type { DayPickerProps } from "../types";
+import * as defaultFormatters from "../formatters/index.js";
+import type { DayPickerProps } from "../types/index.js";
 
@@ -4,0 +4,0 @@ /** Return the formatters from the props merged with the default formatters. */

src/helpers/getInitialMonth.test.ts

@@ -10,10 +10,3 @@ import { addMonths, isSameMonth } from "date-fns";
     it("return that month", () => {
-      const startMonth = getInitialMonth({
-        month,
-        dateLib,
-        startMonth: undefined,
-        endMonth: undefined,
-        today: new Date(),
-        numberOfMonths: 0
-      });
+      const startMonth = getInitialMonth({ month }, dateLib);
       expect(isSameMonth(startMonth, month)).toBe(true);
@@ -25,23 +18,10 @@ });
     it("return that month", () => {
-      const startMonth = getInitialMonth({
-        defaultMonth,
-        startMonth: undefined,
-        endMonth: undefined,
-        today: new Date(),
-        numberOfMonths: 0,
-        dateLib
-      });
+      const startMonth = getInitialMonth({ defaultMonth }, dateLib);
       expect(isSameMonth(startMonth, defaultMonth)).toBe(true);
     });
   });
-  describe("when no month or defaultMonth are in context", () => {
+  describe("when no month or defaultMonth", () => {
     const today = new Date(2010, 11, 12);
     it("return the today month", () => {
-      const startMonth = getInitialMonth({
-        today,
-        startMonth: undefined,
-        endMonth: undefined,
-        numberOfMonths: 0,
-        dateLib
-      });
+      const startMonth = getInitialMonth({ today }, dateLib);
       expect(isSameMonth(startMonth, today)).toBe(true);
@@ -56,12 +36,4 @@ });
     describe("when the number of month is 1", () => {
-      const numberOfMonths = 1;
       it("return the endMonth", () => {
-        const startMonth = getInitialMonth({
-          month,
-          endMonth,
-          numberOfMonths,
-          startMonth: undefined,
-          today: new Date(),
-          dateLib
-        });
+        const startMonth = getInitialMonth({ month, endMonth }, dateLib);
         expect(isSameMonth(startMonth, endMonth)).toBe(true);
@@ -71,13 +43,8 @@ });
     describe("when the number of month is 3", () => {
-      const numberOfMonths = 3;
       it("return the endMonth plus the number of months", () => {
-        const startMonth = getInitialMonth({
-          month,
-          endMonth,
-          numberOfMonths,
-          startMonth: undefined,
-          today: new Date(),
+        const startMonth = getInitialMonth(
+          { month, numberOfMonths: 3, endMonth },
           dateLib
-        });
-        const expectedMonth = addMonths(endMonth, -1 * (numberOfMonths - 1));
+        );
+        const expectedMonth = addMonths(endMonth, -1 * (3 - 1));
         expect(isSameMonth(startMonth, expectedMonth)).toBe(true);
@@ -84,0 +51,0 @@ });

src/helpers/getInitialMonth.ts

@@ -1,2 +0,2 @@
-import type { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../index.js";
 
@@ -6,3 +6,3 @@ /** Return the start month based on the props passed to DayPicker. */
   props: Pick<
-    PropsContextValue,
+    DayPickerProps,
     | "fromYear"
@@ -16,4 +16,4 @@ | "toYear"
     | "numberOfMonths"
-    | "dateLib"
-  >
+  >,
+  dateLib: DateLib
 ): Date {
@@ -23,4 +23,3 @@ const {
     defaultMonth,
-    dateLib: { Date },
-    today,
+    today = new dateLib.Date(),
     numberOfMonths = 1,
@@ -30,4 +29,4 @@ endMonth,
   } = props;
-  let initialMonth = month || defaultMonth || today || new Date();
-  const { differenceInCalendarMonths, addMonths, startOfMonth } = props.dateLib;
+  let initialMonth = month || defaultMonth || today;
+  const { differenceInCalendarMonths, addMonths, startOfMonth } = dateLib;
 
@@ -34,0 +33,0 @@ // Fix the initialMonth if is after the to-date

src/helpers/getMonths.test.ts

@@ -0,3 +1,4 @@
+import { DayPickerProps } from "react-day-picker";
+
 import { CalendarMonth } from "../classes";
-import type { PropsContextValue } from "../contexts/useProps";
 import { dateLib } from "../lib";
@@ -18,3 +19,3 @@
 const mockProps: Pick<
-  PropsContextValue,
+  DayPickerProps,
   | "fixedWeeks"
@@ -26,3 +27,2 @@ | "ISOWeek"
   | "firstWeekContainsDate"
-  | "dateLib"
 > = {
@@ -34,4 +34,3 @@ fixedWeeks: false,
   reverseMonths: false,
-  firstWeekContainsDate: 1,
-  dateLib
+  firstWeekContainsDate: 1
 };
@@ -42,3 +41,3 @@
 
-  const result = getMonths(displayMonths, mockDates, mockProps);
+  const result = getMonths(displayMonths, mockDates, mockProps, dateLib);
 
@@ -55,3 +54,3 @@ expect(result).toHaveLength(1);
 
-  const result = getMonths(displayMonths, mockDates, isoProps);
+  const result = getMonths(displayMonths, mockDates, isoProps, dateLib);
 
@@ -71,3 +70,3 @@ expect(result).toHaveLength(1);
 
-  const result = getMonths(displayMonths, mockDates, reverseProps);
+  const result = getMonths(displayMonths, mockDates, reverseProps, dateLib);
 
@@ -84,3 +83,3 @@ expect(result).toHaveLength(2);
 
-  const result = getMonths(displayMonths, mockDates, fixedWeeksProps);
+  const result = getMonths(displayMonths, mockDates, fixedWeeksProps, dateLib);
 
@@ -95,3 +94,3 @@ expect(result).toHaveLength(1);
 
-  const result = getMonths(displayMonths, [], mockProps);
+  const result = getMonths(displayMonths, [], mockProps, dateLib);
 
@@ -98,0 +97,0 @@ expect(result).toHaveLength(1);

src/helpers/getMonths.ts

@@ -1,3 +0,3 @@
-import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes";
-import type { PropsContextValue } from "../contexts";
+import { CalendarWeek, CalendarDay, CalendarMonth } from "../classes/index.js";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 
@@ -11,5 +11,4 @@ /** Return the months to display in the calendar. */
   /** Options from the props context. */
-  props: Pick<
-    PropsContextValue,
-    | "dateLib"
+  options: Pick<
+    DayPickerProps,
     | "fixedWeeks"
@@ -21,3 +20,4 @@ | "ISOWeek"
     | "firstWeekContainsDate"
-  >
+  >,
+  dateLib: DateLib
 ): CalendarMonth[] {
@@ -33,17 +33,17 @@ const {
     getISOWeek
-  } = props.dateLib;
+  } = dateLib;
   const dayPickerMonths = displayMonths.reduce<CalendarMonth[]>(
     (months, month) => {
-      const firstDateOfFirstWeek = props.ISOWeek
+      const firstDateOfFirstWeek = options.ISOWeek
         ? startOfISOWeek(month)
         : startOfWeek(month, {
-            locale: props.locale,
-            weekStartsOn: props.weekStartsOn
+            locale: options.locale,
+            weekStartsOn: options.weekStartsOn
           });
 
-      const lastDateOfLastWeek = props.ISOWeek
+      const lastDateOfLastWeek = options.ISOWeek
         ? endOfISOWeek(endOfMonth(month))
         : endOfWeek(endOfMonth(month), {
-            locale: props.locale,
-            weekStartsOn: props.weekStartsOn
+            locale: options.locale,
+            weekStartsOn: options.weekStartsOn
           });
@@ -56,3 +56,3 @@
 
-      if (props.fixedWeeks && monthDates.length < 42) {
+      if (options.fixedWeeks && monthDates.length < 42) {
         const extraDates = dates.filter((date) => {
@@ -68,12 +68,12 @@ return (
         (weeks, date) => {
-          const weekNumber = props.ISOWeek
+          const weekNumber = options.ISOWeek
             ? getISOWeek(date)
             : getWeek(date, {
-                locale: props.locale,
-                weekStartsOn: props.weekStartsOn,
-                firstWeekContainsDate: props.firstWeekContainsDate
+                locale: options.locale,
+                weekStartsOn: options.weekStartsOn,
+                firstWeekContainsDate: options.firstWeekContainsDate
               });
           const week = weeks.find((week) => week.weekNumber === weekNumber);
 
-          const day = new CalendarDay(date, month, props.dateLib);
+          const day = new CalendarDay(date, month, dateLib);
           if (!week) {
@@ -97,3 +97,3 @@ weeks.push(new CalendarWeek(weekNumber, [day]));
 
-  if (!props.reverseMonths) {
+  if (!options.reverseMonths) {
     return dayPickerMonths;
@@ -100,0 +100,0 @@ } else {

src/helpers/getNextMonth.test.ts

@@ -10,11 +10,11 @@ import { addMonths, isSameMonth } from "date-fns";
   describe("when the navigation is disabled", () => {
-    const disableNavigation = true;
     it("the next month is undefined", () => {
-      const result = getNextMonth(startingMonth, {
-        numberOfMonths: 1,
-        disableNavigation,
-        endMonth: undefined,
-        dateLib,
-        startMonth: undefined
-      });
+      const result = getNextMonth(
+        startingMonth,
+        undefined,
+        {
+          disableNavigation: true
+        },
+        dateLib
+      );
       expect(result).toBe(undefined);
@@ -26,8 +26,3 @@ });
     it("the next month is not undefined", () => {
-      const result = getNextMonth(startingMonth, {
-        numberOfMonths: 1,
-        endMonth,
-        startMonth: undefined,
-        dateLib
-      });
+      const result = getNextMonth(startingMonth, endMonth, {}, dateLib);
       const expectedNextMonth = addMonths(startingMonth, 1);
@@ -40,8 +35,3 @@ expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
     it("the next month is undefined", () => {
-      const result = getNextMonth(startingMonth, {
-        numberOfMonths: 1,
-        endMonth,
-        startMonth: undefined,
-        dateLib
-      });
+      const result = getNextMonth(startingMonth, endMonth, {}, dateLib);
       expect(result).toBe(undefined);
@@ -56,9 +46,11 @@ });
     it("the next month is 3 months ahead", () => {
-      const result = getNextMonth(startingMonth, {
-        numberOfMonths,
-        pagedNavigation,
-        startMonth: undefined,
-        endMonth: undefined,
+      const result = getNextMonth(
+        startingMonth,
+        undefined,
+        {
+          numberOfMonths,
+          pagedNavigation
+        },
         dateLib
-      });
+      );
       const expectedNextMonth = addMonths(startingMonth, 3);
@@ -69,9 +61,11 @@ expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
       it("the next month is undefined", () => {
-        const result = getNextMonth(startingMonth, {
-          numberOfMonths,
-          pagedNavigation,
-          startMonth: undefined,
-          endMonth: addMonths(startingMonth, 1),
+        const result = getNextMonth(
+          startingMonth,
+          addMonths(startingMonth, 1),
+          {
+            numberOfMonths,
+            pagedNavigation
+          },
           dateLib
-        });
+        );
         expect(result).toBe(undefined);
@@ -84,9 +78,11 @@ });
     it("the next month is 1 months ahead", () => {
-      const result = getNextMonth(startingMonth, {
-        numberOfMonths,
-        pagedNavigation,
-        endMonth: undefined,
-        startMonth: undefined,
+      const result = getNextMonth(
+        startingMonth,
+        undefined,
+        {
+          numberOfMonths,
+          pagedNavigation
+        },
         dateLib
-      });
+      );
       const expectedNextMonth = addMonths(startingMonth, 1);
@@ -97,9 +93,11 @@ expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
       it("the next month is undefined", () => {
-        const result = getNextMonth(startingMonth, {
-          numberOfMonths,
-          pagedNavigation,
-          startMonth: undefined,
-          endMonth: addMonths(startingMonth, 2),
+        const result = getNextMonth(
+          startingMonth,
+          addMonths(startingMonth, 2),
+          {
+            numberOfMonths,
+            pagedNavigation
+          },
           dateLib
-        });
+        );
         expect(result).toBe(undefined);
@@ -106,0 +104,0 @@ });

src/helpers/getNextMonth.ts

@@ -1,2 +0,2 @@
-import { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 
@@ -9,3 +9,3 @@ /**
  *
- * - If after the `endMonth` range, is `undefined`;
+ * - If after the `calendarEndMonth` range, is `undefined`;
  * - If the navigation is paged , is the number of months displayed ahead.
@@ -15,21 +15,18 @@ */
   firstDisplayedMonth: Date,
-  props: Pick<
-    PropsContextValue,
-    | "startMonth"
-    | "endMonth"
-    | "numberOfMonths"
-    | "pagedNavigation"
-    | "disableNavigation"
-    | "dateLib"
-  >
+  calendarEndMonth: Date | undefined,
+  options: Pick<
+    DayPickerProps,
+    "numberOfMonths" | "pagedNavigation" | "disableNavigation"
+  >,
+  dateLib: DateLib
 ): Date | undefined {
-  if (props.disableNavigation) {
+  if (options.disableNavigation) {
     return undefined;
   }
-  const { pagedNavigation, numberOfMonths } = props;
-  const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib;
+  const { pagedNavigation, numberOfMonths = 1 } = options;
+  const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
   const offset = pagedNavigation ? numberOfMonths : 1;
   const month = startOfMonth(firstDisplayedMonth);
 
-  if (!props.endMonth) {
+  if (!calendarEndMonth) {
     return addMonths(month, offset);
@@ -39,7 +36,7 @@ }
   const monthsDiff = differenceInCalendarMonths(
-    props.endMonth,
+    calendarEndMonth,
     firstDisplayedMonth
   );
 
-  if (monthsDiff < numberOfMonths) {
+  if (monthsDiff < numberOfMonths ?? 1) {
     return undefined;
@@ -46,0 +43,0 @@ }

src/helpers/getPossibleFocusDate.test.ts

@@ -14,21 +14,17 @@ import type { Locale } from "date-fns";
 
-import { dateLib } from "../";
-import type { PropsContextValue } from "../contexts/useProps";
-import type { MoveFocusBy, MoveFocusDir } from "../types";
+import type { DayPickerProps, MoveFocusBy, MoveFocusDir } from "../types";
 
-import { getPossibleFocusDate } from "./getPossibleFocusDate";
+import { dateLib } from "..";
+import { getFocusableDate } from "./getFocusableDate";
 
-const baseDate = new Date(2023, 0, 1); // Jan 1, 2023
-const options: Pick<
-  PropsContextValue,
-  "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth" | "dateLib"
-> = {
+const focusedDate = new Date(2023, 0, 1); // Jan 1, 2023
+const options: Pick<DayPickerProps, "locale" | "ISOWeek" | "weekStartsOn"> = {
   locale: undefined,
   ISOWeek: false,
-  weekStartsOn: 0, // Sunday
-  startMonth: new Date(2022, 0, 1), // Jan 1, 2022
-  endMonth: new Date(2024, 0, 1), // Jan 1, 2024
-  dateLib
+  weekStartsOn: 0 // Sunday
 };
 
+const calendarStartMonth = new Date(2022, 0, 1); // Jan 1, 2022
+const calendarEndMonth = new Date(2024, 0, 1); // Jan 1, 2024
+
 const testCases: {
@@ -51,4 +47,12 @@ moveBy: MoveFocusBy;
   test(`should move ${moveDir} by ${moveBy}`, () => {
-    const expectedDate = expectedFn(baseDate, moveDir === "after" ? 1 : -1);
-    const result = getPossibleFocusDate(moveBy, moveDir, baseDate, options);
+    const expectedDate = expectedFn(focusedDate, moveDir === "after" ? 1 : -1);
+    const result = getFocusableDate(
+      moveBy,
+      moveDir,
+      focusedDate,
+      calendarStartMonth,
+      calendarEndMonth,
+      options,
+      dateLib
+    );
     expect(result).toEqual(expectedDate);
@@ -77,4 +81,12 @@ });
   test(`should move ${moveDir} by ${moveBy}`, () => {
-    const expectedDate = expectedFn(baseDate);
-    const result = getPossibleFocusDate(moveBy, moveDir, baseDate, options);
+    const expectedDate = expectedFn(focusedDate);
+    const result = getFocusableDate(
+      moveBy,
+      moveDir,
+      focusedDate,
+      calendarStartMonth,
+      calendarEndMonth,
+      options,
+      dateLib
+    );
 
@@ -96,7 +108,12 @@ expect(result).toEqual(expectedDate);
   test(`should move ${moveDir} by ${moveBy} when ISOWeek is true`, () => {
-    const expectedDate = expectedFn(baseDate);
-    const result = getPossibleFocusDate(moveBy, moveDir, baseDate, {
-      ...options,
-      ISOWeek: true
-    });
+    const expectedDate = expectedFn(focusedDate);
+    const result = getFocusableDate(
+      moveBy,
+      moveDir,
+      focusedDate,
+      calendarStartMonth,
+      calendarEndMonth,
+      { ...options, ISOWeek: true },
+      dateLib
+    );
     expect(result).toEqual(expectedDate);
@@ -107,19 +124,25 @@ });
 test("should not move before startMonth", () => {
-  const result = getPossibleFocusDate(
+  const result = getFocusableDate(
     "day",
     "before",
     new Date(2022, 0, 2),
-    options
+    calendarStartMonth,
+    calendarEndMonth,
+    options,
+    dateLib
   );
-  expect(result).toEqual(options.startMonth);
+  expect(result).toEqual(calendarStartMonth);
 });
 
 test("should not move after endMonth", () => {
-  const result = getPossibleFocusDate(
+  const result = getFocusableDate(
     "day",
     "after",
     new Date(2023, 11, 31),
-    options
+    calendarStartMonth,
+    calendarEndMonth,
+    options,
+    dateLib
   );
-  expect(result).toEqual(options.endMonth);
+  expect(result).toEqual(calendarEndMonth);
 });

src/helpers/getPreviousMonth.test.ts

@@ -1,3 +0,2 @@
-import { dateLib } from "../";
-
+import { dateLib } from "..";
 import { getPreviousMonth } from "./getPreviousMonth";
@@ -7,11 +6,15 @@
   const firstDisplayedMonth = new Date(2022, 0, 1); // January 2022
+  const calendarStartMonth = new Date(2022, 0, 1); // January 2022
   const props = {
     disableNavigation: true,
     pagedNavigation: false,
-    numberOfMonths: 1,
-    startMonth: new Date(2022, 0, 1),
-    dateLib
+    numberOfMonths: 1
   };
 
-  const result = getPreviousMonth(firstDisplayedMonth, props);
+  const result = getPreviousMonth(
+    firstDisplayedMonth,
+    calendarStartMonth,
+    props,
+    dateLib
+  );
 
@@ -26,8 +29,11 @@ expect(result).toBeUndefined();
     pagedNavigation: false,
-    numberOfMonths: 1,
-    startMonth: undefined,
-    dateLib
+    numberOfMonths: 1
   };
 
-  const result = getPreviousMonth(firstDisplayedMonth, props);
+  const result = getPreviousMonth(
+    firstDisplayedMonth,
+    undefined,
+    props,
+    dateLib
+  );
 
@@ -39,12 +45,14 @@ expect(result).toEqual(new Date(2022, 0, 1)); // January 2022
   const firstDisplayedMonth = new Date(2022, 0, 1); // January 2022
+  const calendarStartMonth = new Date(2022, 0, 1); // January 2022
   const props = {
     disableNavigation: false,
     pagedNavigation: false,
-    numberOfMonths: 1,
-    startMonth: new Date(2022, 0, 1),
-    dateLib: dateLib
+    numberOfMonths: 1
   };
-
-  const result = getPreviousMonth(firstDisplayedMonth, props);
-
+  const result = getPreviousMonth(
+    firstDisplayedMonth,
+    calendarStartMonth,
+    props,
+    dateLib
+  );
   expect(result).toBeUndefined();
@@ -55,2 +63,3 @@ });
   const firstDisplayedMonth = new Date(2022, 2, 1); // March 2022
+  const calendarStartMonth = new Date(2022, 0, 1); // January 2022
   const props = {
@@ -64,5 +73,10 @@ disableNavigation: false,
 
-  const result = getPreviousMonth(firstDisplayedMonth, props);
+  const result = getPreviousMonth(
+    firstDisplayedMonth,
+    calendarStartMonth,
+    props,
+    dateLib
+  );
 
   expect(result).toEqual(new Date(2022, 0, 1)); // January 2022
 });

src/helpers/getPreviousMonth.ts

@@ -1,2 +0,2 @@
-import type { PropsContextValue } from "../contexts";
+import type { DateLib, DayPickerProps } from "../types/index.js";
 
@@ -10,3 +10,3 @@ /**
  *
- * - If before the `startMonth` date, is `undefined`;
+ * - If before the `calendarStartMonth` date, is `undefined`;
  * - If the navigation is paged, is the number of months displayed before.
@@ -16,22 +16,20 @@ */
   firstDisplayedMonth: Date,
-  props: Pick<
-    PropsContextValue,
-    | "startMonth"
-    | "numberOfMonths"
-    | "pagedNavigation"
-    | "disableNavigation"
-    | "dateLib"
-  >
+  calendarStartMonth: Date | undefined,
+  options: Pick<
+    DayPickerProps,
+    "numberOfMonths" | "pagedNavigation" | "disableNavigation"
+  >,
+  dateLib: DateLib
 ): Date | undefined {
-  if (props.disableNavigation) {
+  if (options.disableNavigation) {
     return undefined;
   }
-  const { pagedNavigation, numberOfMonths } = props;
-  const { startOfMonth, addMonths, differenceInCalendarMonths } = props.dateLib;
-  const offset = pagedNavigation ? numberOfMonths : 1;
+  const { pagedNavigation, numberOfMonths } = options;
+  const { startOfMonth, addMonths, differenceInCalendarMonths } = dateLib;
+  const offset = pagedNavigation ? numberOfMonths ?? 1 : 1;
   const month = startOfMonth(firstDisplayedMonth);
-  if (!props.startMonth) {
+  if (!calendarStartMonth) {
     return addMonths(month, -offset);
   }
-  const monthsDiff = differenceInCalendarMonths(month, props.startMonth);
+  const monthsDiff = differenceInCalendarMonths(month, calendarStartMonth);
 
@@ -38,0 +36,0 @@ if (monthsDiff <= 0) {

src/helpers/getStyleForModifiers.test.ts

 import type { CSSProperties } from "react";
 
 // Update the path as needed
-import { UI } from "../UI";
-import type { Modifiers, ModifiersStyles, Styles } from "../types";
+import type { Modifiers, ModifiersStyles } from "../types";
 
 import { getStyleForModifiers } from "./getStyleForModifiers";
 
-const baseDayStyle: CSSProperties = {
-  backgroundColor: "white",
-  color: "black"
-};
-const styles: Partial<Styles> = { [UI.Day]: baseDayStyle };
 const defaultModifiers: Modifiers = {
@@ -26,11 +20,3 @@ disabled: false,
 };
-test("returns base style when no modifiers are provided", () => {
-  const dayModifiers = defaultModifiers;
-  const modifiersStyles: Partial<ModifiersStyles> = {};
 
-  const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles);
-
-  expect(style).toEqual(baseDayStyle);
-});
-
 test("applies modifier styles to the base style", () => {
@@ -46,7 +32,6 @@ const dayModifiers: Modifiers = {
   const expectedStyle: CSSProperties = {
-    ...baseDayStyle,
     ...modifiersStyles.selected
   };
 
-  const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles);
+  const style = getStyleForModifiers(dayModifiers, modifiersStyles);
 
@@ -66,5 +51,5 @@ expect(style).toEqual(expectedStyle);
 
-  const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles);
+  const style = getStyleForModifiers(dayModifiers, modifiersStyles);
 
-  expect(style).toEqual({ ...baseDayStyle, opacity: 0.5 }); // should not have applied the disabled style
+  expect(style).toEqual({ opacity: 0.5 }); // should not have applied the disabled style
 });
@@ -83,3 +68,2 @@
   const expectedStyle: CSSProperties = {
-    ...baseDayStyle,
     ...modifiersStyles.selected,
@@ -89,3 +73,3 @@ ...modifiersStyles.highlighted
 
-  const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles);
+  const style = getStyleForModifiers(dayModifiers, modifiersStyles);
 
@@ -106,3 +90,2 @@ expect(style).toEqual(expectedStyle);
   const expectedStyle: CSSProperties = {
-    ...baseDayStyle,
     backgroundColor: "yellow", // from 'highlighted'
@@ -112,5 +95,5 @@ color: "green" // from 'highlighted', overriding 'selected'
 
-  const style = getStyleForModifiers(dayModifiers, modifiersStyles, styles);
+  const style = getStyleForModifiers(dayModifiers, modifiersStyles);
 
   expect(style).toEqual(expectedStyle);
 });

src/helpers/getStyleForModifiers.ts

 import type { CSSProperties } from "react";
 
-import { UI } from "../UI";
-import type { Modifiers, ModifiersStyles, Styles } from "../types";
+import type { Modifiers, ModifiersStyles } from "../types/index.js";
 
 export function getStyleForModifiers(
   dayModifiers: Modifiers,
-  modifiersStyles: Partial<ModifiersStyles>,
-  styles: Partial<Styles>
+  modifiersStyles: Partial<ModifiersStyles> = {}
 ): CSSProperties {
-  let style: CSSProperties = { ...styles[UI.Day] };
+  let style: CSSProperties = {};
   Object.entries(dayModifiers)
@@ -13,0 +11,0 @@ .filter(([, active]) => active === true)

src/helpers/getWeekdays.ts

@@ -1,4 +0,4 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { Locale } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { Locale } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
@@ -5,0 +5,0 @@ /**

src/helpers/getWeeks.ts

@@ -1,2 +0,2 @@
-import type { CalendarMonth, CalendarWeek } from "../classes";
+import type { CalendarMonth, CalendarWeek } from "../classes/index.js";
 
@@ -3,0 +3,0 @@ /** Returns an array of calendar weeks from an array of calendar months. */

src/helpers/index.ts

 // Only export helpers that can be useful to other developers.
-export * from "./getDefaultClassNames";
+export * from "./getDefaultClassNames.js";

src/index.ts

@@ -1,16 +0,15 @@
-export * from "./DayPicker";
-export * from "./types";
+export * from "./DayPicker.js";
+export * from "./types/index.js";
 
-export * from "./classes";
-export * from "./components/custom-components";
+export * from "./classes/index.js";
+export * from "./components/custom-components.js";
 
-export * from "./contexts";
-export * from "./selection";
+export * from "./lib/index.js";
 
-export * from "./lib";
+export * from "./formatters/index.js";
+export * from "./helpers/index.js";
+export * from "./labels/index.js";
+export * from "./utils/index.js";
+export * from "./UI.js";
 
-export * from "./formatters";
-export * from "./helpers";
-export * from "./labels";
-export * from "./utils";
-export * from "./UI";
+export * from "./useDayPicker.js";

src/labels/index.ts

@@ -1,9 +0,12 @@
-export * from "./labelDay";
-export * from "./labelCaption";
-export * from "./labelMonthDropdown";
-export * from "./labelNext";
-export * from "./labelPrevious";
-export * from "./labelWeekday";
-export * from "./labelWeekNumber";
-export * from "./labelWeekNumberHeader";
-export * from "./labelYearDropdown";
+export * from "./labelGrid.js";
+export * from "./labelGridcell.js";
+export * from "./labelDayButton.js";
+export * from "./labelNav.js";
+export * from "./labelGrid.js";
+export * from "./labelMonthDropdown.js";
+export * from "./labelNext.js";
+export * from "./labelPrevious.js";
+export * from "./labelWeekday.js";
+export * from "./labelWeekNumber.js";
+export * from "./labelWeekNumberHeader.js";
+export * from "./labelYearDropdown.js";

src/labels/labelGrid.ts

@@ -1,8 +0,8 @@
-import type { FormatOptions } from "date-fns";
+import type { LabelOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib } from "../types/index.js";
 
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateLib } from "../types";
-
 /**
- * Return the default ARIA label for the month grid.
+ * Return an ARIA label for the month grid, that will be announced when entering
+ * the grid.
  *
@@ -12,7 +12,13 @@ * @group Labels
 export function labelGrid(
-  month: Date,
-  options?: FormatOptions,
+  date: Date,
+  options?: LabelOptions,
   dateLib: DateLib = defaultDateLib
 ) {
-  return dateLib.format(month, "LLLL y", options);
+  return dateLib.format(date, "LLLL y", options);
 }
+
+/**
+ * @deprecated Use {@link labelGrid} instead.
+ * @protected
+ */
+export const labelCaption = labelGrid;

src/labels/labelMonthDropdown.ts

@@ -1,5 +0,5 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 
 /**
- * Return the default ARIA label for the WeekNumber element.
+ * Return the default ARIA label for the months dropdown element.
  *
@@ -9,4 +9,4 @@ * @group Labels
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function labelMonthDropdown(options?: FormatOptions) {
+export function labelMonthDropdown(options?: LabelOptions) {
   return "Month: ";
 }

src/labels/labelNext.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 
@@ -13,5 +13,5 @@ /**
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: FormatOptions
+  options?: LabelOptions
 ) {
   return "Next Month";
 }

src/labels/labelPrevious.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 
@@ -13,5 +13,5 @@ /**
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: FormatOptions
+  options?: LabelOptions
 ) {
   return "Previous Month";
 }

src/labels/labelWeekday.ts

@@ -1,4 +0,4 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { FormatOptions } from "../lib/dateLib";
-import type { DateLib } from "../types";
+import type { LabelOptions } from "../lib/dateLib.js";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateLib } from "../types/index.js";
 
@@ -12,3 +12,3 @@ /**
   date: Date,
-  options?: FormatOptions,
+  options?: LabelOptions,
   dateLib: DateLib = defaultDateLib
@@ -15,0 +15,0 @@ ): string {

src/labels/labelWeekNumber.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 
@@ -11,5 +11,5 @@ /**
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: FormatOptions
+  options?: LabelOptions
 ): string {
   return `Week ${weekNumber}`;
 }

src/labels/labelWeekNumberHeader.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 
@@ -10,5 +10,5 @@ /**
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  options?: FormatOptions
+  options?: LabelOptions
 ): string {
   return "Week Number";
 }

src/labels/labelYearDropdown.ts

@@ -1,2 +0,2 @@
-import type { FormatOptions } from "../lib/dateLib";
+import type { LabelOptions } from "../lib/dateLib.js";
 
@@ -9,4 +9,4 @@ /**
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function labelYearDropdown(options?: FormatOptions) {
+export function labelYearDropdown(options?: LabelOptions) {
   return "Year: ";
 }

src/lib/dateLib.ts

 import { GenericDateConstructor } from "date-fns";
+import type {
+  FormatOptions as DateFnsFormatOptions,
+  Locale as DateFnsLocale
+} from "date-fns";
 import { addDays } from "date-fns/addDays";
@@ -14,3 +18,2 @@ import { addMonths } from "date-fns/addMonths";
 import { getISOWeek } from "date-fns/getISOWeek";
-import { getUnixTime } from "date-fns/getUnixTime";
 import { getWeek } from "date-fns/getWeek";
@@ -33,10 +36,19 @@ import { isAfter } from "date-fns/isAfter";
 
-/** @private */
-export type { Locale } from "date-fns";
-/** @private */
-export type { FormatOptions } from "date-fns";
-/** @private */
+/** The options for the {@link Formatters}. */
+export type FormatOptions = DateFnsFormatOptions;
+
+/** The options for the {@link Labels}. */
+export type LabelOptions = DateFnsFormatOptions;
+
+/** The locale used within DayPicker. */
+export type Locale = DateFnsLocale;
+
 export type { Month as DateFnsMonth } from "date-fns";
 
-/** The default date library to use with the date picker. */
+/**
+ * The default date library to use with the date picker.
+ *
+ * @private
+ * @internal
+ */
 export const dateLib = {
@@ -57,3 +69,2 @@ /** The constructor of the date object. */
   getISOWeek,
-  getUnixTime,
   getWeek,
@@ -60,0 +71,0 @@ isAfter,

src/lib/index.ts

@@ -1,1 +0,1 @@
-export * from "./dateLib";
+export * from "./dateLib.js";

src/style.css.d.ts

 declare const styles: {
   readonly "rdp-button_next": string;
   readonly "rdp-button_previous": string;
-  readonly "rdp-calendar": string;
+  readonly "rdp-root": string;
   readonly "rdp-caption_label": string;
   readonly "rdp-chevron": string;
-  readonly "rdp-chevron_disabled": string;
   readonly "rdp-day": string;
-  readonly "rdp-day_date": string;
+  readonly "rdp-day_button": string;
   readonly "rdp-disabled": string;
@@ -20,3 +19,3 @@ readonly "rdp-dropdown": string;
   readonly "rdp-month_caption": string;
-  readonly "rdp-month_wrapper": string;
+  readonly "rdp-month_grid": string;
   readonly "rdp-months": string;
@@ -41,2 +40,1 @@ readonly "rdp-months_dropdown": string;
 export = styles;
-

src/types/deprecated.ts

 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Calendar } from "../components/Calendar";
 import {
   MonthCaption,
   type MonthCaptionProps
-} from "../components/MonthCaption";
-import { Week, type WeekProps } from "../components/Week";
-import { useCalendar } from "../contexts";
-import { useProps, type PropsContextValue } from "../contexts";
-import { labelDay, labelNext, labelWeekday, labelWeekNumber } from "../labels";
+} from "../components/MonthCaption.js";
+import { Week, type WeekProps } from "../components/Week.js";
+import {
+  labelDayButton,
+  labelNext,
+  labelWeekday,
+  labelWeekNumber
+} from "../labels/index.js";
+import { useDayPicker } from "../useDayPicker.js";
 
-import type { PropsMulti, PropsRange, PropsSingle } from "./props";
-import type { Mode, DayEventHandler } from "./shared";
+import type { PropsMulti, PropsRange, PropsSingle } from "./props.js";
+import type { Mode, DayEventHandler } from "./shared.js";
 
@@ -28,14 +31,6 @@ /**
 /**
- * @deprecated This type has been renamed. Use `Calendar` instead.
- * @protected
- * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
- */
-export const Root = Calendar;
-
-/**
  * @deprecated This component has been renamed. Use `MonthCaption` instead.
  * @protected
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -54,3 +49,3 @@ export const Caption = MonthCaption;
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -63,3 +58,3 @@ export type HeadRow = any;
  * @group Components
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -136,20 +131,13 @@ export const Row = Week;
 /**
- * @deprecated This type has been renamed to `useProps`.
+ * @deprecated This type has been removed to `useDayPicker`.
  * @protected
  * @group Hooks
  */
-export const useDayPicker = useProps;
+export const useNavigation = useDayPicker;
 
 /**
- * @deprecated This type has been renamed to `useCalendar`.
- * @protected
- * @group Hooks
- */
-export const useNavigation = useCalendar;
-
-/**
  * @deprecated This hook has been removed. Use a custom `Day` component instead.
  * @protected
  * @group Hooks
- * @see https://daypicker.dev/advanced-guides/custom-components
+ * @see https://daypicker.dev/next/advanced-guides/custom-components
  */
@@ -165,6 +153,6 @@ export type useDayRender = any;
 /**
- * @deprecated Use `typeof labelDay` instead.
+ * @deprecated Use `typeof labelDayButton` instead.
  * @protected
  */
-export type DayLabel = typeof labelDay;
+export type DayLabel = typeof labelDayButton;
 
@@ -231,7 +219,1 @@ /**
 export type DayTouchEventHandler = DayEventHandler<React.TouchEvent>;
-
-/**
- * @deprecated The type has been renamed. Use `PropsContext` instead.
- * @protected
- */
-export type DayPickerContext = PropsContextValue;

src/types/index.ts

@@ -1,3 +0,3 @@
-export * from "./deprecated";
-export * from "./shared";
-export * from "./props";
+export * from "./deprecated.js";
+export * from "./shared.js";
+export * from "./props.js";

src/types/props.ts

 import React from "react";
 
-import type { Locale } from "../lib/dateLib";
+import type { Locale } from "../lib/dateLib.js";
 
@@ -16,3 +16,2 @@ import type {
   DayEventHandler,
-  WeekNumberMouseEventHandler,
   Modifiers,
@@ -22,3 +21,3 @@ DateRange,
   DateLib
-} from "./shared";
+} from "./shared.js";
 
@@ -209,5 +208,12 @@ /**
   components?: CustomComponents;
-  /** Content to add to the grid as footer element. */
-  footer?: React.ReactNode;
   /**
+   * Add a footer to the calendar, acting as live region.
+   *
+   * Use this prop to communicate the calendar's status to screen readers.
+   * Prefer strings over complex UI elements.
+   *
+   * @see https://daypicker.dev/next/using-daypicker/accessibility
+   */
+  footer?: React.ReactNode | string;
+  /**
    * When a selection mode is set, DayPicker will focus the first selected day
@@ -292,5 +298,17 @@ * (if set) or the today's date (if not disabled).
 
-  /* EVENT HANDLERS */
   /** Event fired when the user navigates between months. */
   onMonthChange?: MonthChangeEventHandler;
+
+  /** Event handler when the next month button is clicked. */
+  onNextClick?: MonthChangeEventHandler;
+  /** Event handler when the previous month button is clicked. */
+  onPrevClick?: MonthChangeEventHandler;
+  /**
+   * Event handler when a week number is clicked
+   *
+   * @deprecated Use a custom `WeekNumber` component instead.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onWeekNumberClick?: any;
+
   /** Event handler when a day is clicked. */
@@ -302,39 +320,54 @@ onDayClick?: DayEventHandler<React.MouseEvent>;
   onDayBlur?: DayEventHandler<React.FocusEvent>;
-  /** Event handler when the mouse enters a day. */
-  onDayMouseEnter?: DayEventHandler<React.MouseEvent>;
-  /** Event handler when the mouse leaves a day. */
-  onDayMouseLeave?: DayEventHandler<React.MouseEvent>;
   /** Event handler when a key is pressed on a day. */
   onDayKeyDown?: DayEventHandler<React.KeyboardEvent>;
-  /** Event handler when a key is released on a day. */
+
+  /**
+   * Replace the default date library with a custom one.
+   *
+   * @private
+   * @since 9.0.0
+   * @experimental
+   */
+  dateLib?: Partial<DateLib> | undefined;
+
+  /**
+   * @private
+   * @deprecated Use a custom `DayButton` component instead.
+   */
   onDayKeyUp?: DayEventHandler<React.KeyboardEvent>;
-  /** Event handler when a key is pressed and released on a day. */
+  /**
+   * @private
+   * @deprecated Use a custom `DayButton` component instead.
+   */
   onDayKeyPress?: DayEventHandler<React.KeyboardEvent>;
-  /** Event handler when a pointer enters a day. */
+  /**
+   * @private
+   * @deprecated Use a custom `DayButton` component instead.
+   */
   onDayPointerEnter?: DayEventHandler<React.PointerEvent>;
-  /** Event handler when a pointer leaves a day. */
+  /**
+   * @private
+   * @deprecated Use a custom `DayButton` component instead.
+   */
   onDayPointerLeave?: DayEventHandler<React.PointerEvent>;
-  /** Event handler when a touch is cancelled on a day. */
+  /**
+   * @private
+   * @deprecated Use a custom `DayButton` component instead.
+   */
   onDayTouchCancel?: DayEventHandler<React.TouchEvent>;
-  /** Event handler when a touch ends on a day. */
+  /**
+   * @private
+   * @deprecated Use a custom `DayButton` component instead.
+   */
   onDayTouchEnd?: DayEventHandler<React.TouchEvent>;
-  /** Event handler when a touch moves on a day. */
+  /**
+   * @private
+   * @deprecated Use a custom `DayButton` component instead.
+   */
   onDayTouchMove?: DayEventHandler<React.TouchEvent>;
-  /** Event handler when a touch starts on a day. */
-  onDayTouchStart?: DayEventHandler<React.TouchEvent>;
-  /** Event handler when the next month button is clicked. */
-  onNextClick?: MonthChangeEventHandler;
-  /** Event handler when the previous month button is clicked. */
-  onPrevClick?: MonthChangeEventHandler;
-  /** Event handler when a week number is clicked */
-  onWeekNumberClick?: WeekNumberMouseEventHandler;
-
   /**
-   * Replace the default date library with a custom one.
-   *
    * @private
-   * @since 9.0.0
-   * @experimental
+   * @deprecated Use a custom `DayButton` component instead.
    */
-  dateLib?: Partial<DateLib> | undefined;
+  onDayTouchStart?: DayEventHandler<React.TouchEvent>;
 }
@@ -436,2 +469,3 @@ /**
   selected?: DateRange | undefined;
+  disabled?: Matcher | Matcher[] | undefined;
   onSelect?: (
@@ -438,0 +472,0 @@ selected: DateRange | undefined,

src/types/shared.ts

 /* eslint-disable @typescript-eslint/ban-types */
-import type { MouseEvent, CSSProperties } from "react";
+import type { CSSProperties } from "react";
 
+import { UI, DayFlag, SelectionState } from "../UI.js";
+import * as components from "../components/custom-components.js";
 import {
-  UI,
-  DayFlag,
-  CalendarFlag,
-  ChevronFlag,
-  WeekNumberFlag,
-  SelectionState
-} from "../UI";
-import * as components from "../components/custom-components";
-import {
   formatCaption,
@@ -22,6 +15,8 @@ formatDay,
   formatYearDropdown
-} from "../formatters";
+} from "../formatters/index.js";
 import {
-  labelDay,
-  labelCaption,
+  labelDayButton,
+  labelNav,
+  labelGrid,
+  labelGridcell,
   labelMonthDropdown,
@@ -34,4 +29,4 @@ labelNext,
   labelYearDropdown
-} from "../labels";
-import { dateLib } from "../lib";
+} from "../labels/index.js";
+import { dateLib } from "../lib/index.js";
 
@@ -76,3 +71,3 @@ /**
   formatWeekNumber: typeof formatWeekNumber;
-  /** Format the week day name in the header */
+  /** Format the week day name in the header. */
   formatWeekdayName: typeof formatWeekdayName;
@@ -83,17 +78,23 @@ };
 export type Labels = {
-  /** Return the label for the month dropdown. */
-  labelCaption: typeof labelCaption;
-  /** Return the label for the month dropdown. */
+  /** The label for the navigation toolbar. */
+  labelNav: typeof labelNav;
+  /** The label for the month grid. */
+  labelGrid: typeof labelGrid;
+  /** The label for the gridcell, when the calendar is not interactive. */
+  labelGridcell: typeof labelGridcell;
+  /** The label for the month dropdown. */
   labelMonthDropdown: typeof labelMonthDropdown;
-  /** Return the label for the year dropdown. */
+  /** The label for the year dropdown. */
   labelYearDropdown: typeof labelYearDropdown;
-  /** Return the label for the next month button. */
+  /** The label for the "next month" button. */
   labelNext: typeof labelNext;
-  /** Return the label for the previous month button. */
+  /** The label for the "previous month" button. */
   labelPrevious: typeof labelPrevious;
-  /** Return the label for the day cell. */
-  labelDay: typeof labelDay;
-  /** Return the label for the weekday. */
+  /** The label for the day button.. */
+  labelDayButton: typeof labelDayButton;
+  /** @deprecated Use {@link labelDayButton} instead. */
+  labelDay: typeof labelDayButton;
+  /** The label for the weekday. */
   labelWeekday: typeof labelWeekday;
-  /** Return the label for the week number. */
+  /** The label for the week number. */
   labelWeekNumber: typeof labelWeekNumber;
@@ -215,21 +216,5 @@ /**
 
-/** The event handler when the week number is clicked. */
-export type WeekNumberMouseEventHandler = (
-  /** The week number that has been clicked. */
-  weekNumber: number,
-  /** The dates in the clicked week. */
-  dates: Date[],
-  /** The mouse event that triggered this event. */
-  e: MouseEvent
-) => void;
-
 /** Maps user interface elements, selection states, and flags to a CSS style. */
 export type Styles = {
-  [key in
-    | UI
-    | SelectionState
-    | DayFlag
-    | CalendarFlag
-    | ChevronFlag
-    | WeekNumberFlag]: CSSProperties | undefined;
+  [key in UI | SelectionState | DayFlag]: CSSProperties | undefined;
 };
@@ -239,9 +224,3 @@
 export type ClassNames = {
-  [key in
-    | UI
-    | SelectionState
-    | DayFlag
-    | CalendarFlag
-    | ChevronFlag
-    | WeekNumberFlag]: string;
+  [key in UI | SelectionState | DayFlag]: string;
 };
@@ -248,0 +227,0 @@

src/UI.ts

@@ -1,2 +0,2 @@
-import type { CustomComponents, ClassNames, Styles } from "./types";
+import type { CustomComponents, ClassNames, Styles } from "./types/index.js";
 
@@ -13,9 +13,6 @@ /**
   ButtonPrevious = "button_previous",
-  /** The next button the navigation */
+  /** The next button the navigation. */
   ButtonNext = "button_next",
-  /**
-   * The calendar element: the root component displaying the months and the
-   * navigation bar. Extended by {@link CalendarFlag}.
-   */
-  Calendar = "calendar",
+  /** The root component displaying the months and the navigation bar. */
+  Root = "root",
   /** The Chevron SVG element used by navigation buttons and dropdowns. */
@@ -28,4 +25,4 @@ Chevron = "chevron",
   Day = "day",
-  /** The element containing the formatted day's date, inside the grid cell. */
-  DayDate = "day_date",
+  /** The button containing the formatted day's date, inside the grid cell. */
+  DayButton = "day_button",
   /** The caption label of the month (when not showing the dropdown navigation). */
@@ -42,3 +39,3 @@ CaptionLabel = "caption_label",
   /** The month grid. */
-  Month = "month",
+  MonthGrid = "month_grid",
   /** Contains the dropdown navigation or the caption label. */
@@ -48,7 +45,7 @@ MonthCaption = "month_caption",
   MonthsDropdown = "months_dropdown",
-  /** Wrapper of the {@link} grid. */
-  MonthWrapper = "month_wrapper",
+  /** Wrapper of the month grid. */
+  Month = "month",
   /** The container of the displayed months. */
   Months = "months",
-  /** The navigation bar with the previous and next buttons */
+  /** The navigation bar with the previous and next buttons. */
   Nav = "nav",
@@ -63,7 +60,6 @@ /** The row containing the week. */
   Weekdays = "weekdays",
-  /**
-   * The row header containing the week number. Extended by
-   * {@link WeekNumberFlag}.
-   */
+  /** The row header containing the week number. */
   WeekNumber = "week_number",
+  /** The row header containing the week number. */
+  WeekNumberHeader = "week_number_header",
   /** The dropdown with the years. */
@@ -75,10 +71,8 @@ YearsDropdown = "years_dropdown"
 export enum DayFlag {
-  /** The day is disabled */
+  /** The day is disabled. */
   disabled = "disabled",
-  /** The day is hidden */
+  /** The day is hidden. */
   hidden = "hidden",
-  /** The day is outside the current month */
+  /** The day is outside the current month. */
   outside = "outside",
-  /** The day is focusable. */
-  focusable = "focusable",
   /** The day is focused. */
@@ -104,26 +98,1 @@ focused = "focused",
 }
-
-/** Flags that can be applied to the {@link UI.Calendar} element. */
-export enum CalendarFlag {
-  /** Assigned when the week numbers are show. */
-  has_week_numbers = "has_week_numbers",
-  /** Assigned when the weekdays are hidden. */
-  no_weekdays = "no_weekdays",
-  /** Assigned when the calendar has multiple months. */
-  has_multiple_months = "has_multiple_months"
-}
-
-/** Flags that can be applied to the {@link UI.Chevron} element. */
-export enum ChevronFlag {
-  /** Assigned when the week numbers are show. */
-  disabled = "chevron_disabled"
-}
-
-/** Flags that can be applied to the {@link UI.WeekNumber} element. */
-export enum WeekNumberFlag {
-  /**
-   * Assigned when the week number is interactive, i.e. has an
-   * `onWeekNumberClick` event attached to it.
-   */
-  week_number_interactive = "week_number_interactive"
-}

src/utils/addToRange.ts

@@ -1,3 +0,3 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateRange, DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateRange, DateLib } from "../types/index.js";
 
@@ -4,0 +4,0 @@ /**

src/utils/dateMatchModifiers.ts

@@ -1,5 +0,4 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateLib, Matcher } from "../types";
+import type { DateLib, Matcher } from "../types/index.js";
 
-import { isDateInRange } from "./isDateInRange";
+import { isDateInRange } from "./isDateInRange.js";
 import {
@@ -11,16 +10,15 @@ isDateAfterType,
   isDayOfWeekType
-} from "./typeguards";
+} from "./typeguards.js";
 
-/** Returns true if `value` is a Date type. */
-function isDateType(value: unknown): value is Date {
-  return defaultDateLib.isDate(value);
-}
-
 /** Returns true if `value` is an array of valid dates. */
-function isArrayOfDates(value: unknown): value is Date[] {
-  return Array.isArray(value) && value.every(defaultDateLib.isDate);
+export function isDatesArray(
+  value: unknown,
+  dateLib: DateLib
+): value is Date[] {
+  return Array.isArray(value) && value.every(dateLib.isDate);
 }
 
 /**
- * Returns whether a day matches against at least one of the given Matchers.
+ * Returns whether a day matches against at least one of the given
+ * {@link Matcher}`.
  *
@@ -45,6 +43,6 @@ * ```tsx
   matchers: Matcher | Matcher[],
-  dateUtils: DateLib = defaultDateLib
+  dateLib: DateLib
 ): boolean {
   const matchersArr = !Array.isArray(matchers) ? [matchers] : matchers;
-  const { isSameDay, differenceInCalendarDays, isAfter } = dateUtils;
+  const { isSameDay, differenceInCalendarDays, isAfter } = dateLib;
   return matchersArr.some((matcher: Matcher) => {
@@ -54,10 +52,10 @@ if (typeof matcher === "boolean") {
     }
-    if (isDateType(matcher)) {
+    if (dateLib.isDate(matcher)) {
       return isSameDay(date, matcher);
     }
-    if (isArrayOfDates(matcher)) {
+    if (isDatesArray(matcher, dateLib)) {
       return matcher.includes(date);
     }
     if (isDateRange(matcher)) {
-      return isDateInRange(date, matcher, dateUtils);
+      return isDateInRange(date, matcher, dateLib);
     }
@@ -64,0 +62,0 @@ if (isDayOfWeekType(matcher)) {

src/utils/index.ts

@@ -1,4 +0,4 @@
-export * from "./addToRange";
-export * from "./dateMatchModifiers";
-export * from "./isDateInRange";
-export * from "./typeguards";
+export * from "./addToRange.js";
+export * from "./dateMatchModifiers.js";
+export * from "./isDateInRange.js";
+export * from "./typeguards.js";

src/utils/isDateInRange.ts

@@ -1,3 +0,3 @@
-import { dateLib as defaultDateLib } from "../lib";
-import type { DateRange, DateLib } from "../types";
+import { dateLib as defaultDateLib } from "../lib/index.js";
+import type { DateRange, DateLib } from "../types/index.js";
 
@@ -4,0 +4,0 @@ /**

src/utils/typeguards.ts

@@ -11,3 +11,3 @@ import type {
   PropsSingle
-} from "../types";
+} from "../types/index.js";
 
@@ -56,11 +56,2 @@ /**
 /**
- * Returns true if `value` is a `DayOfWeek` type.
- *
- * @group Utilities
- */
-export function isDayOfWeekType(value: unknown): value is DayOfWeek {
-  return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
-}
-
-/**
  * Returns true if the props are for a single selection mode.
@@ -111,2 +102,11 @@ *
 /**
+ * Returns true if `value` is a `DayOfWeek` type.
+ *
+ * @group Utilities
+ */
+export function isDayOfWeekType(value: unknown): value is DayOfWeek {
+  return Boolean(value && typeof value === "object" && "dayOfWeek" in value);
+}
+
+/**
  * @deprecated This function has been renamed Use `isRange` instead.
@@ -113,0 +113,0 @@ * @protected

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

865

increased by1.76%

Is type module

Yes

Worsened metrics

Total package byte prevSize

969361

decreased by-4.85%

Dev dependency count

38

increased by2.7%

Lines of code

18672

decreased by-6.42%

No dependency changes