react-day-picker 10.0.0 → 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

@@ -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,
@@ -291,14 +302,14 @@ function DayPicker(initialProps) {
                         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, monthOffset), 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, monthOffset), 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];
@@ -315,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/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.
      *

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/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/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/esm/DayPicker.js

@@ -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,
@@ -255,14 +266,14 @@ export function DayPicker(initialProps) {
                         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, monthOffset), 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, monthOffset), 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];
@@ -279,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/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.
      *

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "10.0.0",
+  "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",