react-day-picker 10.0.0-next.6 → 10.0.1

package/README.md

@@ -6,7 +6,7 @@ You are reading the README for `react-day-picker`, the legacy DayPicker package
 
 ## Documentation
 
-See **[daypicker.dev](https://daypicker.dev)** for guides, examples, and API reference, or read [the v10 docs in the repository](https://github.com/gpbl/react-day-picker/blob/main/apps/website/versioned_docs/version-next/start.mdx).
+See **[daypicker.dev](https://daypicker.dev)** for guides, examples, and API reference, or read [the v10 docs in the repository](https://github.com/gpbl/react-day-picker/blob/main/apps/website/docs/start.mdx).
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/gpbl/react-day-picker/main/apps/website/static/img/screenshot-dark.png" />
@@ -32,13 +32,13 @@ DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies o
 Install the legacy DayPicker package name:
 
 ```bash
-npm install react-day-picker@next
+npm install react-day-picker
 ```
 
 For new projects, prefer the `@daypicker/react` package name:
 
 ```bash
-npm install @daypicker/react@next
+npm install @daypicker/react
 ```
 
 <a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a> <img src="https://img.shields.io/npm/dm/react-day-picker.svg" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/>

package/dist/cjs/DayPicker.js

@@ -238,15 +238,15 @@ function DayPicker(initialProps) {
     const handleDayMouseLeave = (0, react_1.useCallback)((day, modifiers) => (e) => {
         onDayMouseLeave?.(day.date, modifiers, e);
     }, [onDayMouseLeave]);
-    const handleMonthChange = (0, react_1.useCallback)((date) => (e) => {
+    const handleMonthChange = (0, react_1.useCallback)((date, monthOffset) => (e) => {
         const selectedMonth = Number(e.target.value);
         const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
-        goToMonth(month);
+        goToMonth(dateLib.addMonths(month, -monthOffset));
     }, [dateLib, goToMonth]);
-    const handleYearChange = (0, react_1.useCallback)((date) => (e) => {
+    const handleYearChange = (0, react_1.useCallback)((date, monthOffset) => (e) => {
         const selectedYear = Number(e.target.value);
         const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
-        goToMonth(month);
+        goToMonth(dateLib.addMonths(month, -monthOffset));
     }, [dateLib, goToMonth]);
     const { className, style } = (0, react_1.useMemo)(() => ({
         className: [classNames[UI_js_1.UI.Root], props.className]
@@ -255,6 +255,17 @@ function DayPicker(initialProps) {
         style: { ...styles?.[UI_js_1.UI.Root], ...props.style },
     }), [classNames, props.className, props.style, styles]);
     const dataAttributes = (0, getDataAttributes_js_1.getDataAttributes)(props);
+    const getDropdownStyle = (dropdown) => {
+        const dropdownStyle = styles?.[UI_js_1.UI.Dropdown];
+        const specificDropdownStyle = styles?.[dropdown];
+        if (!dropdownStyle && !specificDropdownStyle) {
+            return undefined;
+        }
+        return {
+            ...dropdownStyle,
+            ...specificDropdownStyle,
+        };
+    };
     const rootElRef = (0, react_1.useRef)(null);
     (0, useAnimation_js_1.useAnimation)(rootElRef, Boolean(props.animate), {
         classNames,
@@ -283,19 +294,22 @@ function DayPicker(initialProps) {
             react_1.default.createElement(components.Months, { className: classNames[UI_js_1.UI.Months], style: styles?.[UI_js_1.UI.Months] },
                 !props.hideNavigation && !navLayout && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
                 months.map((calendarMonth, displayIndex) => {
+                    const monthOffset = props.reverseMonths
+                        ? months.length - 1 - displayIndex
+                        : displayIndex;
                     return (react_1.default.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Month], style: styles?.[UI_js_1.UI.Month], 
                         // biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
                         key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
                         navLayout === "around" &&
                             !props.hideNavigation &&
-                            displayIndex === 0 && (react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
-                            react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
+                            displayIndex === 0 && (react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], style: styles?.[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
+                            react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], style: styles?.[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
                         react_1.default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.MonthCaption], style: styles?.[UI_js_1.UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (react_1.default.createElement(components.DropdownNav, { className: classNames[UI_js_1.UI.Dropdowns], style: styles?.[UI_js_1.UI.Dropdowns] },
                             (() => {
                                 const monthControl = captionLayout === "dropdown" ||
-                                    captionLayout === "dropdown-months" ? (react_1.default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI_js_1.UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: (0, getMonthOptions_js_1.getMonthOptions)(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
+                                    captionLayout === "dropdown-months" ? (react_1.default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI_js_1.UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date, monthOffset), options: (0, getMonthOptions_js_1.getMonthOptions)(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: getDropdownStyle(UI_js_1.UI.MonthsDropdown), value: dateLib.getMonth(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
                                 const yearControl = captionLayout === "dropdown" ||
-                                    captionLayout === "dropdown-years" ? (react_1.default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI_js_1.UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: (0, getYearOptions_js_1.getYearOptions)(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI_js_1.UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
+                                    captionLayout === "dropdown-years" ? (react_1.default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI_js_1.UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date, monthOffset), options: (0, getYearOptions_js_1.getYearOptions)(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: getDropdownStyle(UI_js_1.UI.YearsDropdown), value: dateLib.getYear(calendarMonth.date) })) : (react_1.default.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
                                 const controls = dateLib.getMonthYearOrder() === "year-first"
                                     ? [yearControl, monthControl]
                                     : [monthControl, yearControl];
@@ -312,11 +326,11 @@ function DayPicker(initialProps) {
                                     width: "1px",
                                     whiteSpace: "nowrap",
                                     wordWrap: "normal",
-                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
+                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (react_1.default.createElement(components.CaptionLabel, { className: classNames[UI_js_1.UI.CaptionLabel], style: styles?.[UI_js_1.UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
                         navLayout === "around" &&
                             !props.hideNavigation &&
-                            displayIndex === numberOfMonths - 1 && (react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
-                            react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
+                            displayIndex === numberOfMonths - 1 && (react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], style: styles?.[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
+                            react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], style: styles?.[UI_js_1.UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
                         displayIndex === numberOfMonths - 1 &&
                             navLayout === "after" &&
                             !props.hideNavigation && (react_1.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI_js_1.UI.Nav], style: styles?.[UI_js_1.UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),

package/dist/cjs/classes/DateLib.d.ts

@@ -19,6 +19,7 @@ export interface DayPickerLocale extends DateFnsLocale {
     /** Localized DayPicker-specific labels. */
     labels?: DayPickerLocaleLabels;
 }
+/** Alias for the locale shape accepted by DayPicker APIs. */
 export type Locale = DayPickerLocale;
 /** Indicates the preferred ordering of month and year for localized labels. */
 export type MonthYearOrder = "month-first" | "year-first";

package/dist/cjs/components/CaptionLabel.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function CaptionLabel(props: HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+/** Props accepted by the {@link CaptionLabel} component. */
 export type CaptionLabelProps = Parameters<typeof CaptionLabel>[0];

package/dist/cjs/components/Chevron.d.ts

@@ -7,6 +7,7 @@ import React from "react";
  */
 export declare function Chevron(props: {
     className?: string;
+    style?: React.CSSProperties;
     /**
      * The size of the chevron.
      *
@@ -18,4 +19,5 @@ export declare function Chevron(props: {
     /** The orientation of the chevron. */
     orientation?: "up" | "down" | "left" | "right";
 }): React.JSX.Element;
+/** Props accepted by the {@link Chevron} component. */
 export type ChevronProps = Parameters<typeof Chevron>[0];

package/dist/cjs/components/Chevron.js

@@ -12,8 +12,8 @@ const react_1 = __importDefault(require("react"));
  * @see https://daypicker.dev/guides/custom-components
  */
 function Chevron(props) {
-    const { size = 24, orientation = "left", className } = props;
-    return (react_1.default.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24" },
+    const { size = 24, orientation = "left", className, style } = props;
+    return (react_1.default.createElement("svg", { className: className, style: style, 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" })),
         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" })),
         orientation === "left" && (react_1.default.createElement("polygon", { points: "16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" })),

package/dist/cjs/components/Day.d.ts

@@ -17,4 +17,5 @@ export declare function Day(props: {
     /** The modifiers to apply to the day. */
     modifiers: Modifiers;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Day} component. */
 export type DayProps = Parameters<typeof Day>[0];

package/dist/cjs/components/DayButton.d.ts

@@ -13,4 +13,5 @@ export declare function DayButton(props: {
     /** The modifiers to apply to the day. */
     modifiers: Modifiers;
 } & ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link DayButton} component. */
 export type DayButtonProps = Parameters<typeof DayButton>[0];

package/dist/cjs/components/Dropdown.d.ts

@@ -18,4 +18,5 @@ export declare function Dropdown(props: {
     /** The options to display in the dropdown. */
     options?: DropdownOption[] | undefined;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;
+/** Props accepted by the {@link Dropdown} component. */
 export type DropdownProps = Parameters<typeof Dropdown>[0];

package/dist/cjs/components/Dropdown.js

@@ -15,12 +15,12 @@ const useDayPicker_js_1 = require("../useDayPicker.js");
  */
 function Dropdown(props) {
     const { options, className, ...selectProps } = props;
-    const { classNames, components } = (0, useDayPicker_js_1.useDayPicker)();
+    const { classNames, components, styles } = (0, useDayPicker_js_1.useDayPicker)();
     const cssClassSelect = [classNames[UI_js_1.UI.Dropdown], className].join(" ");
     const selectedOption = options?.find(({ value }) => value === selectProps.value);
-    return (react_1.default.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI_js_1.UI.DropdownRoot] },
+    return (react_1.default.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI_js_1.UI.DropdownRoot], style: styles?.[UI_js_1.UI.DropdownRoot] },
         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 },
+        react_1.default.createElement("span", { className: classNames[UI_js_1.UI.CaptionLabel], style: styles?.[UI_js_1.UI.CaptionLabel], "aria-hidden": true },
             selectedOption?.label,
-            react_1.default.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI_js_1.UI.Chevron] }))));
+            react_1.default.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI_js_1.UI.Chevron], style: styles?.[UI_js_1.UI.Chevron] }))));
 }

package/dist/cjs/components/DropdownNav.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function DropdownNav(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link DropdownNav} component. */
 export type DropdownNavProps = Parameters<typeof DropdownNav>[0];

package/dist/cjs/components/Footer.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Footer(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Footer} component. */
 export type FooterProps = Parameters<typeof Footer>[0];

package/dist/cjs/components/Month.d.ts

@@ -13,4 +13,5 @@ export declare function Month(props: {
     /** The index of the month being displayed. */
     displayIndex: number;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Month} component. */
 export type MonthProps = Parameters<typeof Month>[0];

package/dist/cjs/components/MonthCaption.d.ts

@@ -12,4 +12,5 @@ export declare function MonthCaption(props: {
     /** The index of the month being displayed. */
     displayIndex: number;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link MonthCaption} component. */
 export type MonthCaptionProps = Parameters<typeof MonthCaption>[0];

package/dist/cjs/components/MonthGrid.d.ts

@@ -6,4 +6,5 @@ import React, { type TableHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function MonthGrid(props: TableHTMLAttributes<HTMLTableElement>): React.JSX.Element;
+/** Props accepted by the {@link MonthGrid} component. */
 export type MonthGridProps = Parameters<typeof MonthGrid>[0];

package/dist/cjs/components/Months.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Months(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Months} component. */
 export type MonthsProps = Parameters<typeof Months>[0];

package/dist/cjs/components/Nav.d.ts

@@ -15,4 +15,5 @@ export declare function Nav(props: {
     /** The date of the next month, if available. */
     nextMonth?: Date | undefined;
 } & HTMLAttributes<HTMLElement>): React.JSX.Element;
+/** Props accepted by the {@link Nav} component. */
 export type NavProps = Parameters<typeof Nav>[0];

package/dist/cjs/components/Nav.js

@@ -45,7 +45,7 @@ const useDayPicker_js_1 = require("../useDayPicker.js");
  */
 function Nav(props) {
     const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
-    const { components, classNames, labels: { labelPrevious, labelNext }, } = (0, useDayPicker_js_1.useDayPicker)();
+    const { components, classNames, styles, labels: { labelPrevious, labelNext }, } = (0, useDayPicker_js_1.useDayPicker)();
     const handleNextClick = (0, react_1.useCallback)((e) => {
         if (nextMonth) {
             onNextClick?.(e);
@@ -57,8 +57,8 @@ function Nav(props) {
         }
     }, [previousMonth, onPreviousClick]);
     return (react_1.default.createElement("nav", { ...navProps },
-        react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick },
-            react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], orientation: "left" })),
-        react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick },
-            react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, orientation: "right", className: classNames[UI_js_1.UI.Chevron] }))));
+        react_1.default.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI_js_1.UI.PreviousMonthButton], style: styles?.[UI_js_1.UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick },
+            react_1.default.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI_js_1.UI.Chevron], style: styles?.[UI_js_1.UI.Chevron], orientation: "left" })),
+        react_1.default.createElement(components.NextMonthButton, { type: "button", className: classNames[UI_js_1.UI.NextMonthButton], style: styles?.[UI_js_1.UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick },
+            react_1.default.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, orientation: "right", className: classNames[UI_js_1.UI.Chevron], style: styles?.[UI_js_1.UI.Chevron] }))));
 }

package/dist/cjs/components/NextMonthButton.d.ts

@@ -6,4 +6,5 @@ import React, { type ButtonHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function NextMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link NextMonthButton} component. */
 export type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];

package/dist/cjs/components/Option.d.ts

@@ -6,4 +6,5 @@ import React, { type OptionHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Option(props: OptionHTMLAttributes<HTMLOptionElement>): React.JSX.Element;
+/** Props accepted by the {@link Option} component. */
 export type OptionProps = Parameters<typeof Option>[0];

package/dist/cjs/components/PreviousMonthButton.d.ts

@@ -6,4 +6,5 @@ import React, { type ButtonHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function PreviousMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link PreviousMonthButton} component. */
 export type PreviousMonthButtonProps = Parameters<typeof PreviousMonthButton>[0];

package/dist/cjs/components/Root.d.ts

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

package/dist/cjs/components/Select.d.ts

@@ -6,4 +6,5 @@ import React, { type SelectHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Select(props: SelectHTMLAttributes<HTMLSelectElement>): React.JSX.Element;
+/** Props accepted by the {@link Select} component. */
 export type SelectProps = Parameters<typeof Select>[0];

package/dist/cjs/components/Week.d.ts

@@ -10,4 +10,5 @@ export declare function Week(props: {
     /** The week to render. */
     week: CalendarWeek;
 } & HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
+/** Props accepted by the {@link Week} component. */
 export type WeekProps = Parameters<typeof Week>[0];

package/dist/cjs/components/WeekNumber.d.ts

@@ -10,4 +10,5 @@ export declare function WeekNumber(props: {
     /** The week to display. */
     week: CalendarWeek;
 } & ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link WeekNumber} component. */
 export type WeekNumberProps = Parameters<typeof WeekNumber>[0];

package/dist/cjs/components/WeekNumberHeader.d.ts

@@ -6,4 +6,5 @@ import React, { type ThHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function WeekNumberHeader(props: ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link WeekNumberHeader} component. */
 export type WeekNumberHeaderProps = Parameters<typeof WeekNumberHeader>[0];

package/dist/cjs/components/Weekday.d.ts

@@ -6,4 +6,5 @@ import React, { type ThHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weekday(props: ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link Weekday} component. */
 export type WeekdayProps = Parameters<typeof Weekday>[0];

package/dist/cjs/components/Weekdays.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weekdays(props: HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
+/** Props accepted by the {@link Weekdays} component. */
 export type WeekdaysProps = Parameters<typeof Weekdays>[0];

package/dist/cjs/components/Weeks.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weeks(props: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
+/** Props accepted by the {@link Weeks} component. */
 export type WeeksProps = Parameters<typeof Weeks>[0];

package/dist/cjs/types/selection.d.ts

@@ -1,5 +1,6 @@
 import type { DayPickerProps } from "./props.js";
 import type { DateRange, Mode, Modifiers } from "./shared.js";
+/** Selection state and helpers for the active selection mode. */
 export type Selection<T extends DayPickerProps> = {
     /** The selected date(s). */
     selected: SelectedValue<T> | undefined;
@@ -8,12 +9,15 @@ export type Selection<T extends DayPickerProps> = {
     /** Whether the given date is selected. */
     isSelected: (date: Date) => boolean;
 };
+/** Selected value for single selection mode, respecting required selections. */
 export type SelectedSingle<T extends {
     required?: boolean;
 }> = T["required"] extends true ? Date : Date | undefined;
+/** Selected value for multiple selection mode, respecting required selections. */
 export type SelectedMulti<T extends {
     required?: boolean;
 }> = T["required"] extends true ? Date[] : Date[] | undefined;
+/** Selected value for range selection mode, respecting required selections. */
 export type SelectedRange<T extends {
     required?: boolean;
 }> = T["required"] extends true ? DateRange : DateRange | undefined;
@@ -46,12 +50,15 @@ export type SelectedValue<T> = T extends {
     mode: "range";
     required?: boolean;
 } ? SelectedRange<T> : undefined;
+/** Selection handler for single selection mode. */
 export type SelectHandlerSingle<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? Date : Date | undefined;
+/** Selection handler for multiple selection mode. */
 export type SelectHandlerMulti<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? Date[] : Date[] | undefined;
+/** Selection handler for range selection mode. */
 export type SelectHandlerRange<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? DateRange : DateRange | undefined;

package/dist/esm/DayPicker.js

@@ -202,15 +202,15 @@ export function DayPicker(initialProps) {
     const handleDayMouseLeave = useCallback((day, modifiers) => (e) => {
         onDayMouseLeave?.(day.date, modifiers, e);
     }, [onDayMouseLeave]);
-    const handleMonthChange = useCallback((date) => (e) => {
+    const handleMonthChange = useCallback((date, monthOffset) => (e) => {
         const selectedMonth = Number(e.target.value);
         const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
-        goToMonth(month);
+        goToMonth(dateLib.addMonths(month, -monthOffset));
     }, [dateLib, goToMonth]);
-    const handleYearChange = useCallback((date) => (e) => {
+    const handleYearChange = useCallback((date, monthOffset) => (e) => {
         const selectedYear = Number(e.target.value);
         const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
-        goToMonth(month);
+        goToMonth(dateLib.addMonths(month, -monthOffset));
     }, [dateLib, goToMonth]);
     const { className, style } = useMemo(() => ({
         className: [classNames[UI.Root], props.className]
@@ -219,6 +219,17 @@ export function DayPicker(initialProps) {
         style: { ...styles?.[UI.Root], ...props.style },
     }), [classNames, props.className, props.style, styles]);
     const dataAttributes = getDataAttributes(props);
+    const getDropdownStyle = (dropdown) => {
+        const dropdownStyle = styles?.[UI.Dropdown];
+        const specificDropdownStyle = styles?.[dropdown];
+        if (!dropdownStyle && !specificDropdownStyle) {
+            return undefined;
+        }
+        return {
+            ...dropdownStyle,
+            ...specificDropdownStyle,
+        };
+    };
     const rootElRef = useRef(null);
     useAnimation(rootElRef, Boolean(props.animate), {
         classNames,
@@ -247,19 +258,22 @@ export function DayPicker(initialProps) {
             React.createElement(components.Months, { className: classNames[UI.Months], style: styles?.[UI.Months] },
                 !props.hideNavigation && !navLayout && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),
                 months.map((calendarMonth, displayIndex) => {
+                    const monthOffset = props.reverseMonths
+                        ? months.length - 1 - displayIndex
+                        : displayIndex;
                     return (React.createElement(components.Month, { "data-animated-month": props.animate ? "true" : undefined, className: classNames[UI.Month], style: styles?.[UI.Month], 
                         // biome-ignore lint/suspicious/noArrayIndexKey: breaks animation
                         key: displayIndex, displayIndex: displayIndex, calendarMonth: calendarMonth },
                         navLayout === "around" &&
                             !props.hideNavigation &&
-                            displayIndex === 0 && (React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
-                            React.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
+                            displayIndex === 0 && (React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], style: styles?.[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : undefined },
+                            React.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], style: styles?.[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" }))),
                         React.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : undefined, className: classNames[UI.MonthCaption], style: styles?.[UI.MonthCaption], calendarMonth: calendarMonth, displayIndex: displayIndex }, captionLayout?.startsWith("dropdown") ? (React.createElement(components.DropdownNav, { className: classNames[UI.Dropdowns], style: styles?.[UI.Dropdowns] },
                             (() => {
                                 const monthControl = captionLayout === "dropdown" ||
-                                    captionLayout === "dropdown-months" ? (React.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: styles?.[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) })) : (React.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
+                                    captionLayout === "dropdown-months" ? (React.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date, monthOffset), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib), style: getDropdownStyle(UI.MonthsDropdown), value: dateLib.getMonth(calendarMonth.date) })) : (React.createElement("span", { key: "month" }, formatMonthDropdown(calendarMonth.date, dateLib)));
                                 const yearControl = captionLayout === "dropdown" ||
-                                    captionLayout === "dropdown-years" ? (React.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: styles?.[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) })) : (React.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
+                                    captionLayout === "dropdown-years" ? (React.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date, monthOffset), options: getYearOptions(navStart, navEnd, formatters, dateLib, Boolean(props.reverseYears)), style: getDropdownStyle(UI.YearsDropdown), value: dateLib.getYear(calendarMonth.date) })) : (React.createElement("span", { key: "year" }, formatYearDropdown(calendarMonth.date, dateLib)));
                                 const controls = dateLib.getMonthYearOrder() === "year-first"
                                     ? [yearControl, monthControl]
                                     : [monthControl, yearControl];
@@ -276,11 +290,11 @@ export function DayPicker(initialProps) {
                                     width: "1px",
                                     whiteSpace: "nowrap",
                                     wordWrap: "normal",
-                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (React.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
+                                } }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))) : (React.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], style: styles?.[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption(calendarMonth.date, dateLib.options, dateLib)))),
                         navLayout === "around" &&
                             !props.hideNavigation &&
-                            displayIndex === numberOfMonths - 1 && (React.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
-                            React.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
+                            displayIndex === numberOfMonths - 1 && (React.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], style: styles?.[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : undefined },
+                            React.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, className: classNames[UI.Chevron], style: styles?.[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" }))),
                         displayIndex === numberOfMonths - 1 &&
                             navLayout === "after" &&
                             !props.hideNavigation && (React.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : undefined, className: classNames[UI.Nav], style: styles?.[UI.Nav], "aria-label": labelNav(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth, nextMonth: nextMonth })),

package/dist/esm/classes/DateLib.d.ts

@@ -19,6 +19,7 @@ export interface DayPickerLocale extends DateFnsLocale {
     /** Localized DayPicker-specific labels. */
     labels?: DayPickerLocaleLabels;
 }
+/** Alias for the locale shape accepted by DayPicker APIs. */
 export type Locale = DayPickerLocale;
 /** Indicates the preferred ordering of month and year for localized labels. */
 export type MonthYearOrder = "month-first" | "year-first";

package/dist/esm/components/CaptionLabel.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function CaptionLabel(props: HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+/** Props accepted by the {@link CaptionLabel} component. */
 export type CaptionLabelProps = Parameters<typeof CaptionLabel>[0];

package/dist/esm/components/Chevron.d.ts

@@ -7,6 +7,7 @@ import React from "react";
  */
 export declare function Chevron(props: {
     className?: string;
+    style?: React.CSSProperties;
     /**
      * The size of the chevron.
      *
@@ -18,4 +19,5 @@ export declare function Chevron(props: {
     /** The orientation of the chevron. */
     orientation?: "up" | "down" | "left" | "right";
 }): React.JSX.Element;
+/** Props accepted by the {@link Chevron} component. */
 export type ChevronProps = Parameters<typeof Chevron>[0];

package/dist/esm/components/Chevron.js

@@ -6,8 +6,8 @@ import React from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export function Chevron(props) {
-    const { size = 24, orientation = "left", className } = props;
-    return (React.createElement("svg", { className: className, width: size, height: size, viewBox: "0 0 24 24" },
+    const { size = 24, orientation = "left", className, style } = props;
+    return (React.createElement("svg", { className: className, style: style, 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" })),
         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" })),
         orientation === "left" && (React.createElement("polygon", { points: "16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" })),

package/dist/esm/components/Day.d.ts

@@ -17,4 +17,5 @@ export declare function Day(props: {
     /** The modifiers to apply to the day. */
     modifiers: Modifiers;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Day} component. */
 export type DayProps = Parameters<typeof Day>[0];

package/dist/esm/components/DayButton.d.ts

@@ -13,4 +13,5 @@ export declare function DayButton(props: {
     /** The modifiers to apply to the day. */
     modifiers: Modifiers;
 } & ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link DayButton} component. */
 export type DayButtonProps = Parameters<typeof DayButton>[0];

package/dist/esm/components/Dropdown.d.ts

@@ -18,4 +18,5 @@ export declare function Dropdown(props: {
     /** The options to display in the dropdown. */
     options?: DropdownOption[] | undefined;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">): React.JSX.Element;
+/** Props accepted by the {@link Dropdown} component. */
 export type DropdownProps = Parameters<typeof Dropdown>[0];

package/dist/esm/components/Dropdown.js

@@ -9,12 +9,12 @@ import { useDayPicker } from "../useDayPicker.js";
  */
 export function Dropdown(props) {
     const { options, className, ...selectProps } = props;
-    const { classNames, components } = useDayPicker();
+    const { classNames, components, styles } = useDayPicker();
     const cssClassSelect = [classNames[UI.Dropdown], className].join(" ");
     const selectedOption = options?.find(({ value }) => value === selectProps.value);
-    return (React.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI.DropdownRoot] },
+    return (React.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI.DropdownRoot], style: styles?.[UI.DropdownRoot] },
         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 },
+        React.createElement("span", { className: classNames[UI.CaptionLabel], style: styles?.[UI.CaptionLabel], "aria-hidden": true },
             selectedOption?.label,
-            React.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI.Chevron] }))));
+            React.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI.Chevron], style: styles?.[UI.Chevron] }))));
 }

package/dist/esm/components/DropdownNav.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function DropdownNav(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link DropdownNav} component. */
 export type DropdownNavProps = Parameters<typeof DropdownNav>[0];

package/dist/esm/components/Footer.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Footer(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Footer} component. */
 export type FooterProps = Parameters<typeof Footer>[0];

package/dist/esm/components/Month.d.ts

@@ -13,4 +13,5 @@ export declare function Month(props: {
     /** The index of the month being displayed. */
     displayIndex: number;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Month} component. */
 export type MonthProps = Parameters<typeof Month>[0];

package/dist/esm/components/MonthCaption.d.ts

@@ -12,4 +12,5 @@ export declare function MonthCaption(props: {
     /** The index of the month being displayed. */
     displayIndex: number;
 } & HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link MonthCaption} component. */
 export type MonthCaptionProps = Parameters<typeof MonthCaption>[0];

package/dist/esm/components/MonthGrid.d.ts

@@ -6,4 +6,5 @@ import React, { type TableHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function MonthGrid(props: TableHTMLAttributes<HTMLTableElement>): React.JSX.Element;
+/** Props accepted by the {@link MonthGrid} component. */
 export type MonthGridProps = Parameters<typeof MonthGrid>[0];

package/dist/esm/components/Months.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Months(props: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Props accepted by the {@link Months} component. */
 export type MonthsProps = Parameters<typeof Months>[0];

package/dist/esm/components/Nav.d.ts

@@ -15,4 +15,5 @@ export declare function Nav(props: {
     /** The date of the next month, if available. */
     nextMonth?: Date | undefined;
 } & HTMLAttributes<HTMLElement>): React.JSX.Element;
+/** Props accepted by the {@link Nav} component. */
 export type NavProps = Parameters<typeof Nav>[0];

package/dist/esm/components/Nav.js

@@ -9,7 +9,7 @@ import { useDayPicker } from "../useDayPicker.js";
  */
 export function Nav(props) {
     const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
-    const { components, classNames, labels: { labelPrevious, labelNext }, } = useDayPicker();
+    const { components, classNames, styles, labels: { labelPrevious, labelNext }, } = useDayPicker();
     const handleNextClick = useCallback((e) => {
         if (nextMonth) {
             onNextClick?.(e);
@@ -21,8 +21,8 @@ export function Nav(props) {
         }
     }, [previousMonth, onPreviousClick]);
     return (React.createElement("nav", { ...navProps },
-        React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick },
-            React.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], orientation: "left" })),
-        React.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick },
-            React.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, orientation: "right", className: classNames[UI.Chevron] }))));
+        React.createElement(components.PreviousMonthButton, { type: "button", className: classNames[UI.PreviousMonthButton], style: styles?.[UI.PreviousMonthButton], tabIndex: previousMonth ? undefined : -1, "aria-disabled": previousMonth ? undefined : true, "aria-label": labelPrevious(previousMonth), onClick: handlePreviousClick },
+            React.createElement(components.Chevron, { disabled: previousMonth ? undefined : true, className: classNames[UI.Chevron], style: styles?.[UI.Chevron], orientation: "left" })),
+        React.createElement(components.NextMonthButton, { type: "button", className: classNames[UI.NextMonthButton], style: styles?.[UI.NextMonthButton], tabIndex: nextMonth ? undefined : -1, "aria-disabled": nextMonth ? undefined : true, "aria-label": labelNext(nextMonth), onClick: handleNextClick },
+            React.createElement(components.Chevron, { disabled: nextMonth ? undefined : true, orientation: "right", className: classNames[UI.Chevron], style: styles?.[UI.Chevron] }))));
 }

package/dist/esm/components/NextMonthButton.d.ts

@@ -6,4 +6,5 @@ import React, { type ButtonHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function NextMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link NextMonthButton} component. */
 export type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];

package/dist/esm/components/Option.d.ts

@@ -6,4 +6,5 @@ import React, { type OptionHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Option(props: OptionHTMLAttributes<HTMLOptionElement>): React.JSX.Element;
+/** Props accepted by the {@link Option} component. */
 export type OptionProps = Parameters<typeof Option>[0];

package/dist/esm/components/PreviousMonthButton.d.ts

@@ -6,4 +6,5 @@ import React, { type ButtonHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function PreviousMonthButton(props: ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+/** Props accepted by the {@link PreviousMonthButton} component. */
 export type PreviousMonthButtonProps = Parameters<typeof PreviousMonthButton>[0];

package/dist/esm/components/Root.d.ts

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

package/dist/esm/components/Select.d.ts

@@ -6,4 +6,5 @@ import React, { type SelectHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Select(props: SelectHTMLAttributes<HTMLSelectElement>): React.JSX.Element;
+/** Props accepted by the {@link Select} component. */
 export type SelectProps = Parameters<typeof Select>[0];

package/dist/esm/components/Week.d.ts

@@ -10,4 +10,5 @@ export declare function Week(props: {
     /** The week to render. */
     week: CalendarWeek;
 } & HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
+/** Props accepted by the {@link Week} component. */
 export type WeekProps = Parameters<typeof Week>[0];

package/dist/esm/components/WeekNumber.d.ts

@@ -10,4 +10,5 @@ export declare function WeekNumber(props: {
     /** The week to display. */
     week: CalendarWeek;
 } & ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link WeekNumber} component. */
 export type WeekNumberProps = Parameters<typeof WeekNumber>[0];

package/dist/esm/components/WeekNumberHeader.d.ts

@@ -6,4 +6,5 @@ import React, { type ThHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function WeekNumberHeader(props: ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link WeekNumberHeader} component. */
 export type WeekNumberHeaderProps = Parameters<typeof WeekNumberHeader>[0];

package/dist/esm/components/Weekday.d.ts

@@ -6,4 +6,5 @@ import React, { type ThHTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weekday(props: ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+/** Props accepted by the {@link Weekday} component. */
 export type WeekdayProps = Parameters<typeof Weekday>[0];

package/dist/esm/components/Weekdays.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weekdays(props: HTMLAttributes<HTMLTableRowElement>): React.JSX.Element;
+/** Props accepted by the {@link Weekdays} component. */
 export type WeekdaysProps = Parameters<typeof Weekdays>[0];

package/dist/esm/components/Weeks.d.ts

@@ -6,4 +6,5 @@ import React, { type HTMLAttributes } from "react";
  * @see https://daypicker.dev/guides/custom-components
  */
 export declare function Weeks(props: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
+/** Props accepted by the {@link Weeks} component. */
 export type WeeksProps = Parameters<typeof Weeks>[0];

package/dist/esm/types/selection.d.ts

@@ -1,5 +1,6 @@
 import type { DayPickerProps } from "./props.js";
 import type { DateRange, Mode, Modifiers } from "./shared.js";
+/** Selection state and helpers for the active selection mode. */
 export type Selection<T extends DayPickerProps> = {
     /** The selected date(s). */
     selected: SelectedValue<T> | undefined;
@@ -8,12 +9,15 @@ export type Selection<T extends DayPickerProps> = {
     /** Whether the given date is selected. */
     isSelected: (date: Date) => boolean;
 };
+/** Selected value for single selection mode, respecting required selections. */
 export type SelectedSingle<T extends {
     required?: boolean;
 }> = T["required"] extends true ? Date : Date | undefined;
+/** Selected value for multiple selection mode, respecting required selections. */
 export type SelectedMulti<T extends {
     required?: boolean;
 }> = T["required"] extends true ? Date[] : Date[] | undefined;
+/** Selected value for range selection mode, respecting required selections. */
 export type SelectedRange<T extends {
     required?: boolean;
 }> = T["required"] extends true ? DateRange : DateRange | undefined;
@@ -46,12 +50,15 @@ export type SelectedValue<T> = T extends {
     mode: "range";
     required?: boolean;
 } ? SelectedRange<T> : undefined;
+/** Selection handler for single selection mode. */
 export type SelectHandlerSingle<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? Date : Date | undefined;
+/** Selection handler for multiple selection mode. */
 export type SelectHandlerMulti<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? Date[] : Date[] | undefined;
+/** Selection handler for range selection mode. */
 export type SelectHandlerRange<T extends {
     required?: boolean | undefined;
 }> = (triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => T["required"] extends true ? DateRange : DateRange | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "10.0.0-next.6",
+  "version": "10.0.1",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "https://daypicker.dev",
@@ -168,7 +168,13 @@
     "date-fns": "^4.1.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": ">=16.8.0",
+    "@types/react": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   },
   "funding": {
     "type": "individual",