Repository: gpbl/react-day-picker
Pull request #2756 (2025-05-04 20:35:15)

fix: format week number with numerals
This PR fixes the week numbers not being properly formatted when using the `numerals` prop:

![Screen Shot 2025-05-04 at 14 59 25](https://github.com/user-attachments/assets/7a0e58c8-26f4-4481-96a0-03b988fe2892)

- Updated `formatWeekNumber` to use `DateLib` and `formatNumber`
- Added more tests

Result:

![Screen Shot 2025-05-04 at 14 59 53](https://github.com/user-attachments/assets/49e228ea-a498-4de4-8495-31968e247ec9)



Patch:
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index bc78f4f83..7f8644787 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -531,7 +531,7 @@ export function DayPicker(initialProps: DayPickerProps) {
                               scope="row"
                               role="rowheader"
                             >
-                              {formatWeekNumber(week.weekNumber)}
+                              {formatWeekNumber(week.weekNumber, dateLib)}
                             </components.WeekNumber>
                           )}
                           {week.days.map((day: CalendarDay) => {
diff --git a/src/classes/DateLib.ts b/src/classes/DateLib.ts
index be0249436..533e96dde 100644
--- a/src/classes/DateLib.ts
+++ b/src/classes/DateLib.ts
@@ -162,7 +162,7 @@ export class DateLib {
    * @param value The number to format.
    * @returns The formatted number.
    */
-  formatNumber(value: number): string {
+  formatNumber(value: number | string): string {
     return this.replaceDigits(value.toString());
   }
 
diff --git a/src/formatters/formatWeekNumber.ts b/src/formatters/formatWeekNumber.ts
index 4618745ca..fad534e60 100644
--- a/src/formatters/formatWeekNumber.ts
+++ b/src/formatters/formatWeekNumber.ts
@@ -1,3 +1,5 @@
+import { defaultDateLib } from "../classes/DateLib.js";
+
 /**
  * Format the week number.
  *
@@ -5,9 +7,9 @@
  * @group Formatters
  * @see https://daypicker.dev/docs/translation#custom-formatters
  */
-export function formatWeekNumber(weekNumber: number) {
+export function formatWeekNumber(weekNumber: number, dateLib = defaultDateLib) {
   if (weekNumber < 10) {
-    return `0${weekNumber.toLocaleString()}`;
+    return dateLib.formatNumber(`0${weekNumber.toLocaleString()}`);
   }
-  return `${weekNumber.toLocaleString()}`;
+  return dateLib.formatNumber(`${weekNumber.toLocaleString()}`);
 }
diff --git a/src/types/props.ts b/src/types/props.ts
index 5c2f17a38..9dd341a50 100644
--- a/src/types/props.ts
+++ b/src/types/props.ts
@@ -209,9 +209,10 @@ export interface PropsBase {
    * - `month`: display only the dropdown for the months
    * - `year`: display only the dropdown for the years
    *
-   * **Note:** showing the dropdown will set the start/end months
-   * {@link startMonth} to 100 years ago, and {@link endMonth} to the end of the
-   * current year.
+   * **Note:** By default, showing the dropdown will set the {@link startMonth}
+   * to 100 years ago and {@link endMonth} to the end of the current year. You
+   * can override this behavior by explicitly setting `startMonth` and
+   * `endMonth`.
    *
    * @see https://daypicker.dev/docs/customization#caption-layouts
    */
@@ -272,16 +273,12 @@ export interface PropsBase {
   ISOWeek?: boolean;
   /**
    * The time zone (IANA or UTC offset) to use in the calendar (experimental).
+   *
    * See
    * [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
    * for the possible values.
    *
-   * Time zones are supported by the `TZDate` object by the
-   * [@date-fns/tz](https://github.com/date-fns/tz) package. Please refer to the
-   * package documentation for more information.
-   *
    * @since 9.1.1
-   * @experimental
    * @see https://daypicker.dev/docs/time-zone
    */
   timeZone?: string | undefined;
@@ -316,9 +313,10 @@ export interface PropsBase {
    */
   initialFocus?: boolean;
   /**
-   * Apply the `disabled` modifier to the matching days.
+   * Apply the `disabled` modifier to the matching days. Disabled days cannot be
+   * selected when in a selection mode is set.
    *
-   * @see https://daypicker.dev/docs/selection-modes#disabling-dates
+   * @see https://daypicker.dev/docs/selection-modes#disabled
    */
   disabled?: Matcher | Matcher[] | undefined;
   /**
@@ -338,6 +336,13 @@ export interface PropsBase {
   /**
    * Add modifiers to the matching days.
    *
+   * @example
+   *   const modifiers = {
+   *   weekend: { dayOfWeek: [0, 6] }, // Match weekends
+   *   holiday: [new Date(2023, 11, 25)] // Match Christmas
+   *   };
+   *   <DayPicker modifiers={modifiers} />
+   *
    * @see https://daypicker.dev/guides/custom-modifiers
    */
   modifiers?: Record<string, Matcher | Matcher[] | undefined> | undefined;
@@ -542,10 +547,22 @@ export interface PropsBase {
 /**
  * Shared handler type for `onSelect` callback when a selection mode is set.
  *
+ * @example
+ *   const handleSelect: OnSelectHandler<Date> = (
+ *     selected,
+ *     triggerDate,
+ *     modifiers,
+ *     e
+ *   ) => {
+ *     console.log("Selected:", selected);
+ *     console.log("Triggered by:", triggerDate);
+ *   };
+ *
  * @template T - The type of the selected item.
  * @callback OnSelectHandler
  * @param {T} selected - The selected item after the event.
- * @param {Date} triggerDate - The date when the event was triggered.
+ * @param {Date} triggerDate - The date when the event was triggered. This is
+ *   typically the day clicked or interacted with.
  * @param {Modifiers} modifiers - The modifiers associated with the event.
  * @param {React.MouseEvent | React.KeyboardEvent} e - The event object.
  */
@@ -632,6 +649,12 @@ export interface PropsMulti {
 export interface PropsRangeRequired {
   mode: "range";
   required: true;
+  /**
+   * Apply the `disabled` modifier to the matching days. Disabled days cannot be
+   * selected when in a selection mode is set.
+   *
+   * @see https://daypicker.dev/docs/selection-modes#disabled
+   */
   disabled?: Matcher | Matcher[] | undefined;
   /**
    * When `true`, the range will reset when including a disabled day.
@@ -657,11 +680,18 @@ export interface PropsRangeRequired {
 export interface PropsRange {
   mode: "range";
   required?: false | undefined;
+  /**
+   * Apply the `disabled` modifier to the matching days. Disabled days cannot be
+   * selected when in a selection mode is set.
+   *
+   * @see https://daypicker.dev/docs/selection-modes#disabled
+   */
   disabled?: Matcher | Matcher[] | undefined;
   /**
    * When `true`, the range will reset when including a disabled day.
    *
    * @since V9.0.2
+   * @see https://daypicker.dev/docs/selection-modes#exclude-disabled
    */
   excludeDisabled?: boolean | undefined;
   /** The selected range. */
diff --git a/src/types/selection.ts b/src/types/selection.ts
index 525845a87..4272b2f97 100644
--- a/src/types/selection.ts
+++ b/src/types/selection.ts
@@ -17,6 +17,19 @@ export type SelectedMulti<T extends { required?: boolean }> =
 export type SelectedRange<T extends { required?: boolean }> =
   T["required"] extends true ? DateRange : DateRange | undefined;
 
+/**
+ * The selected value based on the selection mode.
+ *
+ * @example
+ *   // Single selection mode
+ *   const selected: SelectedValue<{ mode: "single" }> = new Date();
+ *
+ *   // Multiple selection mode
+ *   const selected: SelectedValue<{ mode: "multiple" }> = [new Date(), new Date()];
+ *
+ *   // Range selection mode
+ *   const selected: SelectedValue<{ mode: "range" }> = { from: new Date(), to: new Date() };
+ */
 export type SelectedValue<T> = T extends { mode: "single"; required?: boolean }
   ? SelectedSingle<T>
   : T extends { mode: "multiple"; required?: boolean }
@@ -44,6 +57,18 @@ export type SelectHandlerRange<T extends { required?: boolean | undefined }> = (
   e: React.MouseEvent | React.KeyboardEvent
 ) => T["required"] extends true ? DateRange : DateRange | undefined;
 
+/**
+ * The handler to set a selection based on the mode.
+ *
+ * @example
+ *   const handleSelect: SelectHandler<{ mode: "single" }> = (
+ *     triggerDate,
+ *     modifiers,
+ *     e
+ *   ) => {
+ *     console.log("Selected date:", triggerDate);
+ *   };
+ */
 export type SelectHandler<
   T extends { mode?: Mode | undefined; required?: boolean | undefined }
 > = T extends {
diff --git a/src/types/shared.ts b/src/types/shared.ts
index 2522b460e..0826b303c 100644
--- a/src/types/shared.ts
+++ b/src/types/shared.ts
@@ -114,6 +114,8 @@ export type Formatters = {
   /**
    * @ignore
    * @deprecated Use {@link Formatters.formatCaption} instead.
+   *
+   *   **Note:** This formatter will be removed in version 10.0.0.
    */
   formatMonthCaption: typeof formatMonthCaption;
   /** Format the week number. */
@@ -170,45 +172,11 @@ export type Labels = {
  * A value or a function that matches a specific day.
  *
  * @example
- *   // will always match the day
- *   const booleanMatcher: Matcher = true;
- *
- *   // will match the today's date
- *   const dateMatcher: Matcher = new Date();
- *
- *   // will match the days in the array
- *   const arrayMatcher: Matcher = [
- *     new Date(2019, 1, 2),
- *     new Date(2019, 1, 4)
+ *   // Match weekends and specific holidays
+ *   const matcher: Matcher = [
+ *     { dayOfWeek: [0, 6] }, // Weekends
+ *     { from: new Date(2023, 11, 24), to: new Date(2023, 11, 26) } // Christmas
  *   ];
- *
- *   // will match days after the 2nd of February 2019
- *   const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) };
- *
- *   // will match days before the 2nd of February 2019 }
- *   const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) };
- *
- *   // will match Sundays
- *   const dayOfWeekMatcher: DayOfWeek = {
- *     dayOfWeek: 0
- *   };
- *
- *   // will match the included days, except the two dates
- *   const intervalMatcher: DateInterval = {
- *     after: new Date(2019, 1, 2),
- *     before: new Date(2019, 1, 5)
- *   };
- *
- *   // will match the included days, including the two dates
- *   const rangeMatcher: DateRange = {
- *     from: new Date(2019, 1, 2),
- *     to: new Date(2019, 1, 5)
- *   };
- *
- *   // will match when the function return true
- *   const functionMatcher: Matcher = (day: Date) => {
- *     return day.getMonth() === 2; // match when month is March
- *   };
  */
 export type Matcher =
   | boolean
@@ -330,22 +298,11 @@ export type Styles = {
 /**
  * Represents the modifiers that match a specific day in the calendar.
  *
- * - Retrieve modifiers using the {@link OnSelectHandler} via the `onSelect` prop,
- *   or within custom components using the {@link useDayPicker} hook.
- * - Includes built-in modifiers from {@link DayFlag} and {@link SelectionState}.
- * - Add custom modifiers using the `modifiers` prop.
- *
  * @example
  *   const modifiers: Modifiers = {
- *   today: false, // the day is not today
- *   selected: true, // the day is selected
- *   disabled: false, // the day is not disabled
- *   outside: false, // the day is not outside the month
- *   focused: false, // the day is not focused
- *
- *   weekend: false // custom modifier example for matching a weekend
- *   booked: true // custom modifier example for matching a booked day
- *   available: false // custom modifier example for matching an available day
+ *     today: true, // The day is today
+ *     selected: false, // The day is not selected
+ *     weekend: true // Custom modifier for weekends
  *   };
  *
  * @see https://daypicker.dev/guides/custom-modifiers
diff --git a/website/docs/docs/customization.mdx b/website/docs/docs/customization.mdx
index a11d5b8fd..c2fec20df 100644
--- a/website/docs/docs/customization.mdx
+++ b/website/docs/docs/customization.mdx
@@ -50,13 +50,13 @@ To enable a navigation dropdown, set `captionLayout="dropdown"`. Use the `startM
 
 :::info Default Range
 
-Without specifying the `from*` and `to*` properties, the dropdown will display the last 100 years.
+Without specifying the `startMonth` and `endMonth` properties, the dropdown will display the last 100 years.
 
 :::
 
 ## Outside Days
 
-By default, DayPicker hides the days falling into the other months. Use `showOutsideDays` to display them.
+By default, DayPicker hides the days falling into other months. Use `showOutsideDays` to display them.
 
 ```tsx
 <DayPicker showOutsideDays />
diff --git a/website/docs/docs/localization.mdx b/website/docs/docs/localization.mdx
index 4ca7d51fa..0b969c11f 100644
--- a/website/docs/docs/localization.mdx
+++ b/website/docs/docs/localization.mdx
@@ -16,13 +16,13 @@ DayPicker provides various options to customize the calendar for different langu
 
 DayPicker supports all the locales included in the [date-fns](https://date-fns.org/docs/I18n) library.
 
-- To change the default `en-US` to another locale, import a locale object from `react-day-picker/locale` and pass it to the`locale` prop.
+To change the default `en-US` to another locale, import a locale object from `react-day-picker/locale` and pass it to the `locale` prop.
 
 ```tsx
-// import the locale object
+// Import the locale object
 import { es } from "react-day-picker/locale";
 
-// use the locale object
+// Use the locale object
 <DayPicker locale={es} />;
 ```
 
@@ -71,7 +71,7 @@ Use the `ISOWeek` prop to switch to [ISO Week Dates](https://en.wikipedia.org/wi
 
 DayPicker supports the Persian [Solar Hijri](<https://en.wikipedia.org/wiki/Iranian_calendars#Modern_calendar:_Solar_Hijri_(SH)>) calendar through the [date-fns-jalali](https://www.npmjs.com/package/date-fns-jalali) package.
 
-- To use the Persian calendar, import `DayPicker` from `react-day-picker/persian`:
+To use the Persian calendar, import `DayPicker` from `react-day-picker/persian`:
 
 ```diff
 - import { DayPicker } from 'react-day-picker';
@@ -86,8 +86,7 @@ DayPicker supports the Persian [Solar Hijri](<https://en.wikipedia.org/wiki/Iran
 
 By default, the Persian calendar uses the Farsi (Iran) locale and the Eastern Arabic-Indic (Persian) number system.
 
-- To use the English (US) locale, import it and pass the `locale` prop.
-- To change the numerals to Western Arabic, use the `numerals` prop.
+To use the English (US) locale, import it and pass the `locale` prop. To change the numerals to Western Arabic, use the `numerals` prop.
 
 ```tsx
 import { DayPicker, enUS } from "react-day-picker/persian";
@@ -103,7 +102,7 @@ export function PersianEn() {
 
 ### Formatting Persian Dates
 
-The calendar always returns Gregorian dates. Use the exported `getDateLib` getter to format dates to Persian calendar.
+The calendar always returns Gregorian dates. Use the exported `getDateLib` getter to format dates to the Persian calendar.
 
 ```tsx
 import { DayPicker, getDateLib } from "react-day-picker/persian";
diff --git a/website/docs/docs/navigation.mdx b/website/docs/docs/navigation.mdx
index 7d22831b6..41110684e 100644
--- a/website/docs/docs/navigation.mdx
+++ b/website/docs/docs/navigation.mdx
@@ -44,7 +44,7 @@ export function Controlled() {
 
 ### Today Button
 
-For example, to implement a <strong>Go to Today</strong> button, set `month` to the current date when the button is clicked.
+To implement a **Go to Today** button, set `month` to the current date when the button is clicked.
 
 ```tsx
 import { useState } from "react";
@@ -133,7 +133,7 @@ To improve accessibility for users who prefer reduced motion, you can use the `p
 
 ### Changing the Animation Functions
 
-For a more advanced customization, you can change override the default style with your own animation functions:
+For advanced customization, you can override the default style with your own animation functions:
 
 ```css
 .rdp-caption_after_enter {
@@ -159,7 +159,7 @@ For a more advanced customization, you can change override the default style wit
 
 :::warning Advanced Feature
 
-Customizing the animation function, such as for a up/down transition, can be challenging due to the HTML table structure of the grid. We may improve this in a future version. Please leave your feedback in [DayPicker Discussions](https://github.com/gpbl/react-day-picker/discussions).
+Customizing the animation function, such as for an up/down transition, can be challenging due to the HTML table structure of the grid. We may improve this in a future version. Please leave your feedback in [DayPicker Discussions](https://github.com/gpbl/react-day-picker/discussions).
 
 :::
 
@@ -181,7 +181,7 @@ To prevent the user from navigating between months, set the `disableNavigation`
 
 ## Hiding the Navigation {#hidenavigation}
 
-To hide the navigation completely, set the `hideNavigation` prop to `true`. Useful when setting the [caption layout](./customization.mdx#caption-layouts) to `"dropdown"`.
+To hide the navigation completely, set the `hideNavigation` prop to `true`. This is useful when setting the [caption layout](./customization.mdx#caption-layouts) to `"dropdown"`.
 
 | Prop Name        | Type      | Description              |
 | ---------------- | --------- | ------------------------ |
diff --git a/website/docs/docs/selection-modes.mdx b/website/docs/docs/selection-modes.mdx
index 7ba1e18a8..aed098009 100644
--- a/website/docs/docs/selection-modes.mdx
+++ b/website/docs/docs/selection-modes.mdx
@@ -4,25 +4,25 @@ sidebar_position: 4
 
 # Selection Modes
 
-DayPicker offers predefined rules for day selection:
+DayPicker offers predefined rules for date selection:
 
-- [Single mode](#single-mode): allows the selection of a single day.
-- [Multiple mode](#multiple-mode): allows the selection of multiple individual days.
-- [Range mode](#range-mode): allows the selection of a continuous range of days.
+- [Single mode](#single-mode): Allows the selection of a single date.
+- [Multiple mode](#multiple-mode): Allows the selection of multiple individual dates.
+- [Range mode](#range-mode): Allows the selection of a continuous range of dates.
 
-The `mode` prop determines the selection mode. Use the `disabled` prop to prevent the selection of specific days. The `selected` and `onSelect` props provide customization options for the selection process.
+The `mode` prop determines the selection mode. Use the `disabled` prop to prevent the selection of specific dates. The `selected` and `onSelect` props provide customization options for the selection process.
 
-| Prop Name  | Type                                                                                 | Description                             |
-| ---------- | ------------------------------------------------------------------------------------ | --------------------------------------- |
-| `mode`     | `"single"` \| `"multiple"` \| `"range"`                                              | Enter a selection mode.                 |
-| `disabled` | [`Matcher`](../api/type-aliases/Matcher.md) \| `Matcher[]`                           | Disabled days that cannot be selected.  |
-| `selected` | `Date` \| `Date[]` \| [`DateRange`](../api/type-aliases/DateRange.md) \| `undefined` | The selected day(s).                    |
-| `required` | `boolean`                                                                            | When `true`, the selection is required. |
-| `onSelect` | [`OnSelectHandler`](../api/type-aliases/OnSelectHandler.md)                          | Event callback when a date is selected. |
+| Prop Name  | Type                                                                                                        | Description                             |
+| ---------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| `mode`     | `"single"` \| `"multiple"` \| `"range"`                                                                     | Enter a selection mode.                 |
+| `disabled` | [`Matcher`](../api/type-aliases/Matcher.md) \| `Matcher[]`                                                  | Disabled dates that cannot be selected. |
+| `selected` | `Date` \| `Date[]` \| [`DateRange`](../api/type-aliases/DateRange.md) \| `undefined`                        | The selected date(s).                   |
+| `required` | `boolean` ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)) | When `true`, the selection is required. |
+| `onSelect` | [`OnSelectHandler`](../api/type-aliases/OnSelectHandler.md)                                                 | Event callback when a date is selected. |
 
 ## Single Mode
 
-When the `mode` prop is set to `"single"`, only one day can be selected at a time.
+When the `mode` prop is set to `"single"`, only one date can be selected at a time.
 
 ```tsx
 <DayPicker mode="single" />
@@ -34,11 +34,11 @@ When the `mode` prop is set to `"single"`, only one day can be selected at a tim
 
 ### Single Mode Props
 
-| Prop Name  | Type                                                                           | Description                             |
-| ---------- | ------------------------------------------------------------------------------ | --------------------------------------- |
-| `selected` | `Date \| undefined`                                                            | The selected date.                      |
-| `onSelect` | [`OnSelectHandler<Date \| undefined>`](../api/type-aliases/OnSelectHandler.md) | Event callback when a date is selected. |
-| `required` | `boolean`                                                                      | Make the selection required.            |
+| Prop Name  | Type                                                                                                               | Description                             |
+| ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------- |
+| `selected` | `Date \| undefined` ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)) | The selected date.                      |
+| `onSelect` | [`OnSelectHandler<Date \| undefined>`](../api/type-aliases/OnSelectHandler.md)                                     | Event callback when a date is selected. |
+| `required` | `boolean`                                                                                                          | Make the selection required.            |
 
 ### Controlled Selections
 
@@ -69,7 +69,7 @@ By setting the `required` prop, DayPicker ensures that the user cannot unselect
 
 ## Multiple Mode
 
-Set the `mode` prop to `"multiple"` to enable the selection of multiple days in DayPicker.
+Set the `mode` prop to `"multiple"` to enable the selection of multiple dates in DayPicker.
 
 ```tsx
 <DayPicker mode="multiple" />
@@ -81,15 +81,15 @@ Set the `mode` prop to `"multiple"` to enable the selection of multiple days in
 
 ### Multiple Mode Props
 
-| Prop Name  | Type                                                                             | Description                             |
-| ---------- | -------------------------------------------------------------------------------- | --------------------------------------- |
-| `selected` | `Date[] \| undefined`                                                            | The selected dates.                     |
-| `onSelect` | [`OnSelectHandler<Date[] \| undefined>`](../api/type-aliases/OnSelectHandler.md) | Event callback when a date is selected. |
-| `min`      | `number`                                                                         | The minimum dates that can be selected. |
-| `max`      | `number`                                                                         | The maximum dates that can be selected. |
-| `required` | `boolean`                                                                        | Make the selection required.            |
+| Prop Name  | Type                                                                             | Description                                       |
+| ---------- | -------------------------------------------------------------------------------- | ------------------------------------------------- |
+| `selected` | `Date[] \| undefined`                                                            | The selected dates.                               |
+| `onSelect` | [`OnSelectHandler<Date[] \| undefined>`](../api/type-aliases/OnSelectHandler.md) | Event callback when a date is selected.           |
+| `min`      | `number`                                                                         | The minimum number of dates that can be selected. |
+| `max`      | `number`                                                                         | The maximum number of dates that can be selected. |
+| `required` | `boolean`                                                                        | Make the selection required.                      |
 
-Use the `selected` and `onSelect` props to manage the selected date:
+Use the `selected` and `onSelect` props to manage the selected dates:
 
 ```tsx
 export function App() {
@@ -139,14 +139,14 @@ Set the `mode` prop to `"range"` to enable the selection of a continuous range o
 
 ### Range Mode Props
 
-| Prop Name         | Type                                                                                | Description                             |
-| ----------------- | ----------------------------------------------------------------------------------- | --------------------------------------- |
-| `selected`        | [`DateRange`](../api/type-aliases/DateRange.md)                                     | The selected range.                     |
-| `onSelect`        | [`OnSelectHandler<DateRange \| undefined>`](../api/type-aliases/OnSelectHandler.md) | Event callback when a date is selected. |
-| `required`        | `boolean`                                                                           | Make the selection required.            |
-| `min`             | `number`                                                                            | The minimum dates that can be selected. |
-| `max`             | `number`                                                                            | The maximum dates that can be selected. |
-| `excludeDisabled` | `boolean`                                                                           | Exclude disabled dates from the range.  |
+| Prop Name         | Type                                                                                | Description                                |
+| ----------------- | ----------------------------------------------------------------------------------- | ------------------------------------------ |
+| `selected`        | [`DateRange`](../api/type-aliases/DateRange.md)                                     | The selected range.                        |
+| `onSelect`        | [`OnSelectHandler<DateRange \| undefined>`](../api/type-aliases/OnSelectHandler.md) | Event callback when a date is selected.    |
+| `required`        | `boolean`                                                                           | Make the selection required.               |
+| `min`             | `number`                                                                            | The minimum number of nights in the range. |
+| `max`             | `number`                                                                            | The maximum number of nights in the range. |
+| `excludeDisabled` | `boolean`                                                                           | Exclude disabled dates from the range.     |
 
 ### Min and Max Dates
 
@@ -174,17 +174,59 @@ By setting the `required` prop, DayPicker ensures that the selected range cannot
   <Examples.RangeRequired />
 </BrowserWindow>
 
-## Disabling Dates
+## Disabling Dates {#disabled}
 
-To disable specific days, use the `disabled` prop. Disabled dates cannot be selected.
+To disable specific dates, use the `disabled` prop. Disabled dates cannot be selected.
 
-The prop accepts a [`Matcher`](../api/type-aliases/Matcher.md) or an array of matchers to specify which days should be disabled.
+### Matchers Types
 
-### Disabling Specific Dates
+The prop accepts a [`Matcher`](../api/type-aliases/Matcher.md) or an array of matchers to specify which dates should be disabled.
+
+| Matcher Type                                          | Description                                                               |
+| ----------------------------------------------------- | ------------------------------------------------------------------------- |
+| `boolean`                                             | Disable all dates.                                                        |
+| `Date`                                                | Matches a specific date.                                                  |
+| `Date[]`                                              | Matches any date in the array of dates.                                   |
+| [`DateRange`](../api/type-aliases/DateRange.md)       | Matches a range of dates, including the start and end dates.              |
+| [`DateBefore`](../api/type-aliases/DateBefore.md)     | Matches all dates before a specific date (exclusive).                     |
+| [`DateAfter`](../api/type-aliases/DateAfter.md)       | Matches all dates after a specific date (exclusive).                      |
+| [`DateInterval`](../api/type-aliases/DateInterval.md) | Matches dates between two dates (exclusive of the start and end dates).   |
+| [`DayOfWeek`](../api/type-aliases/DayOfWeek.md)       | Matches specific days of the week (e.g., Sunday is `0`, Saturday is `6`). |
+| `(date: Date) => boolean`                             | A function that returns `true` if the given date matches the condition.   |
+| [`Matcher[]`](../api/type-aliases/Matcher.md)         | An array of the matchers listed above.                                    |
 
 ```tsx
-// disable weekends
-<DayPicker mode="range" disabled={{ dayOfWeek: [0, 6] }} />
+// Disable all dates
+<DayPicker disabled />
+
+// Disable a specific date
+<DayPicker disabled={new Date(2023, 9, 1)} />
+
+// Disable an array of dates
+<DayPicker disabled={[new Date(2023, 9, 1), new Date(2023, 9, 2)]} />
+
+// Disable a range of dates
+<DayPicker disabled={{ from: new Date(2023, 9, 1), to: new Date(2023, 9, 5) }} />
+
+// Disable specific days of the week
+<DayPicker disabled={{ dayOfWeek: [0, 6] }} /> // disable weekends
+
+// Disable dates before a specific date
+<DayPicker disabled={{ before: new Date(2023, 9, 1) }} />
+
+// Disable dates after a specific date
+<DayPicker disabled={{ after: new Date(2023, 9, 5) }} />
+
+// Disable dates between two dates
+<DayPicker disabled={{ before: new Date(2023, 9, 1), after: new Date(2023, 9, 5) }} />
+```
+
+### Disabling Weekends
+
+To disable weekends, use the `dayOfWeek` matcher, where `0` is Sunday and `6` is Saturday.
+
+```tsx
+<DayPicker disabled={{ dayOfWeek: [0, 6] }} />
 ```
 
 <BrowserWindow>
@@ -193,6 +235,8 @@ The prop accepts a [`Matcher`](../api/type-aliases/Matcher.md) or an array of ma
 
 ### Disabling Dates in the Past
 
+Use the `before` matcher to disable all dates before today.
+
 ```tsx
 <DayPicker mode="single" disabled={{ before: new Date() }} />
 ```
@@ -221,9 +265,9 @@ In `range` mode, disabled dates are included in the selected range by default. T
 
 ## Customizing Selections
 
-To customize the behavior of a selection mode, use the `select` and `onSelect` props to handle the selection event and update the selected dates according to your application's requirements:
+To customize the behavior of a selection mode, use the `selected` and `onSelect` props to handle the selection event and update the selected dates according to your application's requirements:
 
-```jsx
+```tsx
 import { useState } from "react";
 
 import { DayPicker } from "react-day-picker";
diff --git a/website/docs/docs/styling.mdx b/website/docs/docs/styling.mdx
index 627bc5b6d..b08ffed92 100644
--- a/website/docs/docs/styling.mdx
+++ b/website/docs/docs/styling.mdx
@@ -4,7 +4,7 @@ sidebar_position: 2
 
 # Styling
 
-DayPicker comes with a minimal style inspired by MacOS date pickers, designed to be extended and customized.
+DayPicker comes with a minimal style inspired by macOS date pickers, designed to be extended and customized.
 
 You can also apply your own styles or use a CSS framework like [Tailwind CSS](https://tailwindcss.com) or [Bootstrap](https://getbootstrap.com) to style the calendar.
 
@@ -36,12 +36,9 @@ If you are not using a bundler, you can copy the CSS file to your project. See t
 
 </details>
 
-<details>
-<summary>Integration with shadcn/ui</summary>
-
-The current [shadcn/ui](https://ui.shadcn.com) does not show the latest version. For a proper integration, please refer to [date-picker.luca-felix.com](https://date-picker.luca-felix.com).
+### Integration with shadcn/ui
 
-</details>
+The current [shadcn/ui](https://ui.shadcn.com) does not show the latest version. For a proper integration, please refer to [shadcn-datetime-picker](https://github.com/Maliksidk19/shadcn-datetime-picker) or [date-picker.luca-felix.com](https://date-picker.luca-felix.com).
 
 ### CSS Variables
 
@@ -59,243 +56,42 @@ Define the CSS variables in your app's CSS file, after importing the DayPicker C
 
 The following table lists the CSS variables used by DayPicker within the `.rdp-root` class:
 
-<table class="no-wrap-table">
-  <thead>
-    <tr>
-      <th>CSS Variable</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>--rdp-accent-color</code>
-      </td>
-      <td>The accent color used for selected days and UI elements.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-accent-background-color</code>
-      </td>
-      <td>
-        The accent background color used for selected days and UI elements.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-animation_duration</code>
-      </td>
-      <td>
-        The duration of the animation when `animate` is set (default: `0.3s`).
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-animation_timing</code>
-      </td>
-      <td>
-        The timing function when `animate` is set (default: `cubic-bezier(0.4,
-        0, 0.2, 1)`.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-day-height</code>
-      </td>
-      <td>The height of the day cells (default: `44px`).</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-day-width</code>
-      </td>
-      <td>The width of the day cells (default: `44px`).</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-chevron-disabled-opacity</code>
-      </td>
-      <td>The opacity of the chevron when its container is disabled.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-day_button-border-radius</code>
-      </td>
-      <td>The border radius of the day cells.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-day_button-border</code>
-      </td>
-      <td>The border of the day cells.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-day_button-height</code>
-      </td>
-      <td>The height of the day cells (default: `42px`).</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-day_button-width</code>
-      </td>
-      <td>The width of the day cells (default: `42px`).</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-selected-border</code>
-      </td>
-      <td>The border of the selected days.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-disabled-opacity</code>
-      </td>
-      <td>The opacity of the disabled days.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-outside-opacity</code>
-      </td>
-      <td>The opacity of the days outside the current month.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-today-color</code>
-      </td>
-      <td>The color of today's date.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-dropdown-gap</code>
-      </td>
-      <td>The gap between the dropdowns used in the month captions.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-months-gap</code>
-      </td>
-      <td>The gap between the months in the multi-month view.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-nav_button-disabled-opacity</code>
-      </td>
-      <td>The opacity of the disabled navigation buttons.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-nav_button-height</code>
-      </td>
-      <td>The height of the navigation buttons.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-nav_button-width</code>
-      </td>
-      <td>The width of the navigation buttons.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-nav-height</code>
-      </td>
-      <td>The height of the navigation bar.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-range_middle-background-color</code>
-      </td>
-      <td>The color of the background for days in the middle of a range.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-range_middle-color</code>
-      </td>
-      <td>The color of the text for days in the middle of a range.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-range_start-color</code>
-      </td>
-      <td>The color of the range text at the start of the range.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-range_start-background</code>
-      </td>
-      <td>Used for the background of the start of the selected range.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-range_start-date-background-color</code>
-      </td>
-      <td>
-        The background color of the date at the start of the selected range.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-range_end-background</code>
-      </td>
-      <td>Used for the background of the end of the selected range.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-range_end-color</code>
-      </td>
-      <td>The color of the range text at the end of the range.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-range_end-date-background-color</code>
-      </td>
-      <td>
-        The background color of the date at the end of the selected range.
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-week_number-border-radius</code>
-      </td>
-      <td>The border radius of the week number.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-week_number-border</code>
-      </td>
-      <td>The border of the week number.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-week_number-height</code>
-      </td>
-      <td>The height of the week number cells.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdd-week_number-width</code>
-      </td>
-      <td>The width of the week number cells.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-weekday-opacity</code>
-      </td>
-      <td>The opacity of the weekday.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-weekday-padding</code>
-      </td>
-      <td>The padding of the weekday.</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--rdp-weekday-text-align</code>
-      </td>
-      <td>The text alignment of the weekday cells.</td>
-    </tr>
-  </tbody>
-</table>
+| CSS Variable                          | Description                                                                          |
+| ------------------------------------- | ------------------------------------------------------------------------------------ |
+| `--rdp-accent-color`                  | The accent color used for selected days and UI elements.                             |
+| `--rdp-accent-background-color`       | The accent background color used for selected days and UI elements.                  |
+| `--rdp-animation_duration`            | The duration of the animation when `animate` is set (default: `0.3s`).               |
+| `--rdp-animation_timing`              | The timing function when `animate` is set (default: `cubic-bezier(0.4, 0, 0.2, 1)`). |
+| `--rdp-day-height`                    | The height of the day cells (default: `44px`).                                       |
+| `--rdp-day-width`                     | The width of the day cells (default: `44px`).                                        |
+| `--rdp-chevron-disabled-opacity`      | The opacity of the chevron when its container is disabled.                           |
+| `--rdp-day_button-border-radius`      | The border radius of the day cells.                                                  |
+| `--rdp-day_button-border`             | The border of the day cells.                                                         |
+| `--rdp-day_button-height`             | The height of the day cells (default: `42px`).                                       |
+| `--rdp-day_button-width`              | The width of the day cells (default: `42px`).                                        |
+| `--rdp-selected-border`               | The border of the selected days.                                                     |
+| `--rdp-disabled-opacity`              | The opacity of the disabled days.                                                    |
+| `--rdp-outside-opacity`               | The opacity of the days outside the current month.                                   |
+| `--rdp-today-color`                   | The color of today's date.                                                           |
+| `--rdp-dropdown-gap`                  | The gap between the dropdowns used in the month captions.                            |
+| `--rdp-months-gap`                    | The gap between the months in the multi-month view.                                  |
+| `--rdp-nav_button-disabled-opacity`   | The opacity of the disabled navigation buttons.                                      |
+| `--rdp-nav_button-height`             | The height of the navigation buttons.                                                |
+| `--rdp-nav_button-width`              | The width of the navigation buttons.                                                 |
+| `--rdp-nav-height`                    | The height of the navigation bar.                                                    |
+| `--rdp-range_middle-background-color` | The color of the background for days in the middle of a range.                       |
+| `--rdp-range_middle-color`            | The color of the text for days in the middle of a range.                             |
+| `--rdp-range_start-color`             | The color of the range text at the start of the range.                               |
+| `--rdp-range_start-background`        | Used for the background of the start of the selected range.                          |
+| `--rdp-range_end-background`          | Used for the background of the end of the selected range.                            |
+| `--rdp-range_end-color`               | The color of the range text at the end of the range.                                 |
+| `--rdp-week_number-border-radius`     | The border radius of the week number.                                                |
+| `--rdp-week_number-border`            | The border of the week number.                                                       |
+| `--rdp-week_number-height`            | The height of the week number cells.                                                 |
+| `--rdp-week_number-width`             | The width of the week number cells.                                                  |
+| `--rdp-weekday-opacity`               | The opacity of the weekday.                                                          |
+| `--rdp-weekday-padding`               | The padding of the weekday.                                                          |
+| `--rdp-weekday-text-align`            | The text alignment of the weekday cells.                                             |
 
 ### Light/Dark Appearance
 
@@ -329,8 +125,6 @@ export function MyDatePicker() {
 
 Use the `classNames` prop to apply custom class names instead of the default ones. The [`ClassNames`](../api/type-aliases/ClassNames.md) type lists all the class names used by DayPicker.
 
-These class names correspond to the values of the [`UI`](../api/enumerations/UI.md), [`DayFlag`](../api/enumerations/DayFlag.md), and [`SelectionState`](../api/enumerations/SelectionState.md) enums.
-
 For example, to change the class name of the calendar container:
 
 ```tsx
@@ -339,7 +133,7 @@ For example, to change the class name of the calendar container:
 
 Or the disabled days:
 
-```jsx
+```tsx
 <DayPicker classNames={{ disabled: "my-disabled_style" }} />
 ```
 
diff --git a/website/docs/docs/time-zone.mdx b/website/docs/docs/time-zone.mdx
index cbdfb06a3..0ce0deb53 100644
--- a/website/docs/docs/time-zone.mdx
+++ b/website/docs/docs/time-zone.mdx
@@ -22,9 +22,9 @@ The time zone can be specified as either an [IANA time zone](https://en.wikipedi
   <Examples.TimeZone />
 </BrowserWindow>
 
-### Working with Time-Zoned Dates
+## Working with Time-Zoned Dates
 
-When working with time zones, make sure to use the `TZDate` object exported by `react-day-picker` instead of the native `Date` object. For more information, refer to the [date-fns doc](https://date-fns.org/v4.1.0/docs/Time-Zones).
+When working with time zones, use the `TZDate` object exported by `react-day-picker` instead of the native `Date` object. This ensures proper handling of time zones. For more information, refer to the [date-fns documentation](https://date-fns.org/v4.1.0/docs/Time-Zones).
 
 ```tsx
 import { DayPicker, TZDate } from "react-day-picker";
@@ -32,7 +32,7 @@ import { DayPicker, TZDate } from "react-day-picker";
 export function TimeZone() {
   const timeZone = "America/New_York";
   const [selected, setSelected] = useState<Date | undefined>(
-    new TZDate(2024, 12, 10, timeZone) // Make sure you use `TZDate` instead of `Date`
+    new TZDate(2024, 12, 10, timeZone) // Use `TZDate` instead of `Date`
   );
   return (
     <DayPicker
diff --git a/website/docs/docs/translation.mdx b/website/docs/docs/translation.mdx
index 5a863c3ae..ca9481593 100644
--- a/website/docs/docs/translation.mdx
+++ b/website/docs/docs/translation.mdx
@@ -8,7 +8,7 @@ When [localizing](./localization.mdx) DayPicker, you need to translate the label
 
 DayPicker supports full customization of ARIA labels and date formatters, which can be translated using the `labels` prop.
 
-:::info Get help with Translations
+:::info Get Help with Translations
 
 Get help and provide suggestions for translating DayPicker into your language. Visit the [Translations forum](https://github.com/gpbl/react-day-picker/discussions/categories/translation-and-localization) on GitHub.
 
@@ -19,14 +19,14 @@ Get help and provide suggestions for translating DayPicker into your language. V
 | Prop Name    | Type                                              | Description                                |
 | ------------ | ------------------------------------------------- | ------------------------------------------ |
 | `labels`     | [`Labels`](../api/type-aliases/Labels.md)         | Map the ARIA labels used within DayPicker. |
-| `formatters` | [`Formatters`](../api/type-aliases/Formatters.md) | Map the function used as date formatters.  |
+| `formatters` | [`Formatters`](../api/type-aliases/Formatters.md) | Map the functions used as date formatters. |
 | `dir`        | `rtl` \| `ltr`                                    | Set the text direction.                    |
 
 ## ARIA Labels
 
 The `labels` prop allows you to customize the [ARIA labels](../guides/accessibility.mdx).
 
-### Example: Italian labels
+### Example: Italian Labels
 
 ```tsx
 import { format } from "date-fns";
@@ -66,22 +66,22 @@ The following labels need to be translated, as they default to English:
 | -------------------------------------------------------------- | -------------------------------------------------------------------- |
 | [`labelDayButton`](../api/functions/labelDayButton.md)         | The ARIA label for the day button.                                   |
 | [`labelMonthDropdown`](../api/functions/labelMonthDropdown.md) | The ARIA label for the months dropdown.                              |
-| [`labelNext`](../api/functions/labelNext.md)                   | The ARIA label for next month button.                                |
-| [`labelPrevious`](../api/functions/labelPrevious.md)           | The ARIA label for previous month button.                            |
+| [`labelNext`](../api/functions/labelNext.md)                   | The ARIA label for the next month button.                            |
+| [`labelPrevious`](../api/functions/labelPrevious.md)           | The ARIA label for the previous month button.                        |
 | [`labelWeekNumber`](../api/functions/labelWeekNumber.md)       | The ARIA label for the week number cell (the first cell in the row). |
 | [`labelYearDropdown`](../api/functions/labelYearDropdown.md)   | The ARIA label for the years dropdown.                               |
 
-### Optional labels
+### Optional Labels
 
 The following labels are optional and should work out of the box in most languages:
 
-| Function                                                             | Description                                                                             |
-| -------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| [`labelGrid`](../api/functions/labelGrid.md)                         | Return an ARIA label for the month grid, that will be announced when entering the grid. |
-| [`labelGridcell`](../api/functions/labelGridcell.md)                 | The label for the day gridcell when the calendar is not interactive.                    |
-| [`labelNav`](../api/functions/labelNav.md)                           | The ARIA label for the navigation toolbar.                                              |
-| [`labelWeekNumberHeader`](../api/functions/labelWeekNumberHeader.md) | The ARIA label for the week number header element.                                      |
-| [`labelWeekday`](../api/functions/labelWeekday.md)                   | The ARIA label for the Weekday column header.                                           |
+| Function                                                             | Description                                                                |
+| -------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| [`labelGrid`](../api/functions/labelGrid.md)                         | Return an ARIA label for the month grid, announced when entering the grid. |
+| [`labelGridcell`](../api/functions/labelGridcell.md)                 | The label for the day grid cell when the calendar is not interactive.      |
+| [`labelNav`](../api/functions/labelNav.md)                           | The ARIA label for the navigation toolbar.                                 |
+| [`labelWeekNumberHeader`](../api/functions/labelWeekNumberHeader.md) | The ARIA label for the week number header element.                         |
+| [`labelWeekday`](../api/functions/labelWeekday.md)                   | The ARIA label for the weekday column header.                              |
 
 ## RTL Text Direction
 
diff --git a/website/docs/guides/accessibility.mdx b/website/docs/guides/accessibility.mdx
index de6e3575a..e0dc531c8 100644
--- a/website/docs/guides/accessibility.mdx
+++ b/website/docs/guides/accessibility.mdx
@@ -6,12 +6,12 @@ sidebar_position: 2
 
 DayPicker follows the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) for date pickers, including features like keyboard navigation, focus management, and labeling.
 
-Depending on your design, you might need to add more accessibility features. For example, when using [Input Fields](../guides/input-fields), there may be some limitations based on your accessibility goals. Keep up with best practices by following the [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/).
+Depending on your design, you might need to add more accessibility features. For example, when using [Input Fields](../guides/input-fields.mdx), there may be some limitations based on your accessibility goals. Keep up with best practices by following the [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/).
 
 :::tip Accessibility Tips
 
 - Test your date picker regularly with a screen reader to ensure accessibility.
-- Use an `aria-live` region to announce when a date is selected, like using the `footer` prop.
+- Use an `aria-live` region to announce when a date is selected, such as using the `footer` prop.
 - Customize ARIA labels with the [`labels`](../api/interfaces/PropsBase.md#labels) prop for better user feedback.
 - Maintain sufficient color contrast between text and background.
 - Offer instructions for first-time users or those unfamiliar with the date picker.
diff --git a/website/docs/guides/custom-components.mdx b/website/docs/guides/custom-components.mdx
index bb15bae66..d5f7a10bf 100644
--- a/website/docs/guides/custom-components.mdx
+++ b/website/docs/guides/custom-components.mdx
@@ -12,11 +12,11 @@ Use the `components` prop to extend each rendered HTML element with your own cus
 
 You may need to use custom components in advanced applications to:
 
-- Prevent default events from occurring
-- Add new event listeners, such as touch events
-- Display extra content, such as a calendar entry in the day cell
-- Implement buttons or dropdowns using your own design system components
-- Wrap an element with another element, like adding a tooltip to a day cell
+- Prevent default events from occurring.
+- Add new event listeners, such as touch events.
+- Display extra content, such as a calendar entry in the day cell.
+- Implement buttons or dropdowns using your own design system components.
+- Wrap an element with another element, like adding a tooltip to a day cell.
 
 When customizing components, familiarize yourself with the [API Reference](../api#components) and the [DayPicker Anatomy](../docs/anatomy.mdx). Ensure you maintain [accessibility](../guides/accessibility.mdx).
 
@@ -28,14 +28,14 @@ Custom components allow you to extend DayPicker beyond just using [formatters](.
 
 ## Implementing a Custom Component
 
-Pass the components to customize to the `components` prop. See the [list of custom components](#list-of-custom-components) below.
+Pass the components you want to customize to the `components` prop. See the [list of custom components](#list-of-custom-components) below.
 
 ```tsx
 <DayPicker
   components={{
     Day: CustomDaycell,
     MonthGrid: CustomMonthGrid
-    // etc
+    // etc.
   }}
 />
 ```
@@ -78,9 +78,9 @@ In a custom component, import the `useDayPicker` hook to access the DayPicker co
 import { useDayPicker } from "react-day-picker";
 ```
 
-| Function                                           | Return value                                                  | Description                                                                  |
-| :------------------------------------------------- | ------------------------------------------------------------- | :--------------------------------------------------------------------------- |
-| [`useDayPicker`](../api/functions/useDayPicker.md) | [`DayPickerContext`](../api/type-aliases/DayPickerContext.md) | Return the current state of DayPicker and functions to navigate the calendar |
+| Function                                           | Return value                                                  | Description                                                                    |
+| -------------------------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+| [`useDayPicker`](../api/functions/useDayPicker.md) | [`DayPickerContext`](../api/type-aliases/DayPickerContext.md) | Returns the current state of DayPicker and functions to navigate the calendar. |
 
 ### DayPicker Context
 
@@ -92,13 +92,13 @@ The DayPicker context provides the current state of the calendar, including the
 | `components`     | [`CustomComponents`](../api/type-aliases/CustomComponents.md)                 | The components used internally by DayPicker.   |
 | `formatters`     | [`Formatters`](../api/type-aliases/Formatters.md)                             | The formatters used to format the UI elements. |
 | `getModifiers`   | (`day`) => [`Modifiers`](../api/type-aliases/Modifiers.md)                    | Returns the modifiers for the given day.       |
-| `goToMonth`      | (`month`) => `void`                                                           | Navigate to the specified month.               |
+| `goToMonth`      | (`month`) => `void`                                                           | Navigates to the specified month.              |
 | `isSelected`     | (`date`) => `boolean` \| `undefined`                                          | Whether the given date is selected.            |
 | `labels`         | [`Labels`](../api/type-aliases/Labels.md)                                     | The labels used in the user interface.         |
 | `months`         | [`CalendarMonth`](../api/classes/CalendarMonth.md)[]                          | The months displayed in the calendar.          |
 | `nextMonth`      | `Date` \| `undefined`                                                         | The next month to display.                     |
 | `previousMonth`  | `Date` \| `undefined`                                                         | The previous month to display.                 |
-| `select`         | [`SelectHandler`](../api/type-aliases/SelectHandler.md)\<`T`\> \| `undefined` | Set a selection.                               |
+| `select`         | [`SelectHandler`](../api/type-aliases/SelectHandler.md)\<`T`\> \| `undefined` | Sets a selection.                              |
 | `selected`       | [`SelectedValue`](../api/type-aliases/SelectedValue.md)\<`T`\> \| `undefined` | The selected date(s).                          |
 | `styles`         | `Partial`\<[`Styles`](../api/type-aliases/Styles.md)\> \| `undefined`         | The styles for the UI elements.                |
 | `dayPickerProps` | [`DayPickerProps`](../api/type-aliases/DayPickerProps.md)                     | The props passed to the DayPicker component.   |
@@ -122,7 +122,7 @@ const SelectedDateContext = React.createContext<{
 function DayButton(props: DayButtonProps) {
   const { day, modifiers, ...buttonProps } = props;
 
-  const { setSelected } = React.use(SelectedDateContext);
+  const { setSelected } = React.useContext(SelectedDateContext);
   return (
     <button
       {...buttonProps}
@@ -161,6 +161,7 @@ You can use a custom [Dropdown](../api/functions/Dropdown.md) to select years an
 
 ```tsx title="./CustomDropdown.tsx"
 import React, { useState } from "react";
+
 import { DayButtonProps, DayPicker } from "react-day-picker";
 
 import {
@@ -220,9 +221,7 @@ export function CustomDropdown() {
       selected={selected}
       onSelect={setSelected}
       footer={
-        selected
-          ? `Selected: ${selected.toLocaleDateString()}`
-          : "Pick a day."
+        selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
       }
     />
   );
@@ -233,4 +232,4 @@ export function CustomDropdown() {
   <Examples.CustomDropdown />
 </BrowserWindow>
 
-What are you using custom components for? [Let us know](https://github.com/gpbl/react-day-picker/discussions).
\ No newline at end of file
+What are you using custom components for? [Let us know](https://github.com/gpbl/react-day-picker/discussions).
diff --git a/website/docs/guides/custom-modifiers.mdx b/website/docs/guides/custom-modifiers.mdx
index d03bf9cf4..29ea7584c 100644
--- a/website/docs/guides/custom-modifiers.mdx
+++ b/website/docs/guides/custom-modifiers.mdx
@@ -8,7 +8,7 @@ In DayPicker, a **custom modifier** is added to a day when the day matches a spe
 
 Modifiers are set using the `modifiers` prop. When a date matches a modifier, the modifier is passed to the `onSelect` event and other [DayEventHandler](../api/type-aliases/DayEventHandler.md) events (`onDayClick`, etc.) to inspect the days the user has interacted with.
 
-For example, you can use a custom modifier to mark days as already booked in a booking app.
+For example, you can use a custom modifier to mark days as already booked in a booking app:
 
 ```tsx
 <DayPicker
@@ -59,7 +59,7 @@ Use the `disabled` modifier to disable one or more days. Pass a [`Matcher`](../a
 
 ### `hidden` Modifier
 
-The `hidden` modifier removes a day from the calendar. Use the `hidden` prop to specify the days to be hidden.
+The `hidden` modifier removes a day from the calendar. Use the `hidden` prop to specify the days to be hidden:
 
 ```tsx
 const hiddenDays = [
@@ -77,7 +77,7 @@ const hiddenDays = [
 
 ### `today` Modifier
 
-The `today` modifier is a special modifier applied to the current date. You can change the current date using the `today` prop.
+The `today` modifier is a special modifier applied to the current date. You can change the current date using the `today` prop:
 
 ```tsx
 function Example() {
diff --git a/website/docs/guides/custom-selections.mdx b/website/docs/guides/custom-selections.mdx
index 54d6d33b1..282266866 100644
--- a/website/docs/guides/custom-selections.mdx
+++ b/website/docs/guides/custom-selections.mdx
@@ -10,14 +10,14 @@ This documentation is still a work in progress. If you have any questions, pleas
 
 :::
 
-If the built-in [selection modes](../docs/selection-modes.mdx) do not satisfy your app’s requirements, you can control the selection behavior using the [`onDayClick`](../api/interfaces/PropsBase.md#ondayclick) and [`modifiers`](../api
+If the built-in [selection modes](../docs/selection-modes.mdx) do not satisfy your app’s requirements, you can control the selection behavior using the [`onDayClick`](../api/interfaces/PropsBase.md#ondayclick) and [`modifiers`](../api/type-aliases/Modifiers.md) props.
 
 | Prop         | Type                                                        | Description                               |
 | ------------ | ----------------------------------------------------------- | ----------------------------------------- |
 | `onDayClick` | [`DayEventHandler`](../api/type-aliases/DayEventHandler.md) | Callback when a day is clicked.           |
 | `modifiers`  | [`Modifiers`](../api/type-aliases/Modifiers.md)             | An object with the modifiers of the days. |
 
-This prop is a function that receives the clicked day and its modifiers as arguments.
+The `onDayClick` prop is a function that receives the clicked day and its modifiers as arguments.
 
 ## Examples
 
@@ -52,7 +52,7 @@ export function CustomWeek() {
       }}
       onDayClick={(day, modifiers) => {
         if (modifiers.selected) {
-          setSelectedWeek(undefined); // clear the selection if the day is already selected
+          setSelectedWeek(undefined); // Clear the selection if the day is already selected
           return;
         }
         setSelectedWeek({
@@ -62,8 +62,7 @@ export function CustomWeek() {
       }}
       footer={
         selectedWeek &&
-        `Week from ${selectedWeek?.from?.toLocaleDateString()} to
-            ${selectedWeek?.to?.toLocaleDateString()}`
+        `Week from ${selectedWeek?.from?.toLocaleDateString()} to ${selectedWeek?.to?.toLocaleDateString()}`
       }
     />
   );
diff --git a/website/docs/guides/input-fields.mdx b/website/docs/guides/input-fields.mdx
index 15e283216..3da3bc533 100644
--- a/website/docs/guides/input-fields.mdx
+++ b/website/docs/guides/input-fields.mdx
@@ -53,7 +53,7 @@ export function Input() {
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value); // keep the input value in sync
+    setInputValue(e.target.value); // Keep the input value in sync
 
     const parsedDate = parse(e.target.value, "MM/dd/yyyy", new Date());
 
@@ -127,7 +127,7 @@ export function Dialog() {
   // Function to toggle the dialog visibility
   const toggleDialog = () => setIsDialogOpen(!isDialogOpen);
 
-  // Hook to handle the body scroll behavior and focus trapping.
+  // Hook to handle the body scroll behavior and focus trapping
   useEffect(() => {
     const handleBodyScroll = (isOpen: boolean) => {
       document.body.style.overflow = isOpen ? "hidden" : "";
@@ -145,7 +145,7 @@ export function Dialog() {
     };
   }, [isDialogOpen]);
 
-  const handleDayPickerSelect = (date: Date) => {
+  const handleDayPickerSelect = (date: Date | undefined) => {
     if (!date) {
       setInputValue("");
       setSelectedDate(undefined);
@@ -157,7 +157,7 @@ export function Dialog() {
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value); // keep the input value in sync
+    setInputValue(e.target.value); // Keep the input value in sync
 
     const parsedDate = parse(e.target.value, "MM/dd/yyyy", new Date());
 
@@ -179,7 +179,7 @@ export function Dialog() {
         id="date-input"
         type="text"
         value={inputValue}
-        placeholder={"MM/dd/yyyy"}
+        placeholder="MM/dd/yyyy"
         onChange={handleInputChange}
       />{" "}
       <button
diff --git a/website/docs/guides/timepicker.mdx b/website/docs/guides/timepicker.mdx
index 8c873eed5..6172e8a24 100644
--- a/website/docs/guides/timepicker.mdx
+++ b/website/docs/guides/timepicker.mdx
@@ -10,7 +10,9 @@ DayPicker does not include a built-in time picker. However, you can implement a
   <Examples.InputTime />
 </BrowserWindow>
 
-### Code
+## Example Code
+
+The following example demonstrates how to integrate a time input field with DayPicker to create a date and time picker.
 
 ```tsx
 import React, { ChangeEventHandler, useState } from "react";
@@ -64,7 +66,9 @@ export function InputTime() {
         mode="single"
         selected={selected}
         onSelect={handleDaySelect}
-        footer={`Selected date: ${selected ? selected.toLocaleString() : "none"}`}
+        footer={`Selected date: ${
+          selected ? selected.toLocaleString() : "none"
+        }`}
       />
     </div>
   );
diff --git a/website/docs/intro.mdx b/website/docs/intro.mdx
index 521168ac5..c7529129c 100644
--- a/website/docs/intro.mdx
+++ b/website/docs/intro.mdx
@@ -14,8 +14,8 @@ DayPicker is a [React](https://react.dev) component for creating date pickers, c
 - 🛠 Extensive set of props for [customizing](./docs/customization.mdx) the calendar.
 - 🎨 Minimal design that can be [easily styled](./docs/styling.mdx) with CSS or any CSS framework.
 - 📅 Supports [selections](./docs/selection-modes.mdx) of single days, multiple days, ranges of days, or [custom selections](./guides/custom-selections.mdx).
-- 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language and [time zones](https://daypicker.dev/docs/time-zone).
-- 🌐 Support for [ISO 8601](https://daypicker.dev/docs/localization#iso-week-dates), [Persian](https://daypicker.dev/docs/localization#persian-calendar), and [broadcast](https://daypicker.dev/docs/localization#broadcast-calendar) calendar.
+- 🌍 Can be [localized](./docs/localization.mdx) into any language and [time zones](./docs/localization.mdx#time-zone).
+- 🌐 Support for [ISO 8601](./docs/localization.mdx#iso-week-dates), [Persian](./docs/localization.mdx#persian-calendar), and [broadcast](./docs/localization.mdx#broadcast-calendar) calendars.
 - 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](./guides/accessibility.mdx).
 - ⚙️ [Customizable components](./guides/custom-components.mdx) to extend the rendered elements.
 - 🔤 Easy integration [with input fields](./guides/input-fields.mdx).
@@ -55,7 +55,7 @@ DayPicker is compatible with React 16.8 and later.
 
 ## License
 
-DayPicker is released under the [MIT License](./license).
+DayPicker is released under the [MIT License](./license.mdx).
 
 ## Community
 
diff --git a/website/docs/start.mdx b/website/docs/start.mdx
index bb59ddce0..44160661a 100644
--- a/website/docs/start.mdx
+++ b/website/docs/start.mdx
@@ -17,7 +17,7 @@ npm install react-day-picker
 To add a simple date picker to your app:
 
 1. Import the component and styles from `react-day-picker`.
-2. Choose a [selection mode](./docs/selection-modes) using the `mode` prop.
+2. Choose a [selection mode](./docs/selection-modes.mdx) using the `mode` prop.
 3. Use the `selected` and `onSelect` props to control the selected date.
 
 ```tsx
@@ -64,7 +64,7 @@ export function MyDatePicker() {
 
 ### Guides
 
-- 🔤 [Input Fields](./guides/input-fields) - Learn how to use DayPicker with input fields and form libraries.
-- 📏 [Custom Selections](./guides/custom-selections) - Create custom selection rules.
-- 🏷️ [Custom Modifiers](./guides/custom-modifiers) - Create custom modifiers to highlight specific days in the calendar.
-- 🛠 [Custom Components](./guides/custom-components) - Use custom components to create a fully customized date picker.
+- 🔤 [Input Fields](./guides/input-fields.mdx) - Learn how to use DayPicker with input fields and form libraries.
+- 📏 [Custom Selections](./guides/custom-selections.mdx) - Create custom selection rules.
+- 🏷️ [Custom Modifiers](./guides/custom-modifiers.mdx) - Highlight specific days in the calendar using custom modifiers.
+- 🛠 [Custom Components](./guides/custom-components.mdx) - Use custom components to create a fully customized date picker.
diff --git a/website/docs/upgrading.mdx b/website/docs/upgrading.mdx
index aca91ec49..30209affc 100644
--- a/website/docs/upgrading.mdx
+++ b/website/docs/upgrading.mdx
@@ -4,33 +4,33 @@ sidebar_position: 5
 
 # Upgrading to v9
 
-This release includes important updates related to accessibility, styles, internationalization and performance. See the [changelog](./changelog.mdx) for the full list of changes.
+This release includes significant updates related to accessibility, styles, internationalization, and performance. See the [changelog](./changelog.mdx) for the full list of changes.
 
-#### Upgrading from v7
+## Upgrading from v7
 
-If you are upgrading from v7, this guide is still valid for you. Read first the [migration guide from v7 to v8](../versioned_docs/version-8.10.1/upgrading.mdx) and then follow the steps below.
+If you are upgrading from v7, this guide is still valid. First, read the [migration guide from v7 to v8](../versioned_docs/version-8.10.1/upgrading.mdx), then follow the steps below.
 
 ## Checklist
 
-### 1. Upgrade to the latest version
+### 1. Upgrade to the Latest Version
 
 ```bash npm2yarn
 npm install react-day-picker@latest
 ```
 
-Remove `date-fns` from your dependencies if you are not using it directly in your code, like when using a [different locale](./docs/localization.mdx).
+If you are not using `date-fns` directly in your code (e.g., when using a [different locale](./docs/localization.mdx)), remove it from your dependencies:
 
 ```bash npm2yarn
 npm remove date-fns
 ```
 
-### 2. Update your custom styles
+### 2. Update Your Custom Styles
 
-The default design is slightly changed, so you may need to adjust DayPicker again to match your design. See the [styling docs](./docs/styling.mdx) for more information.
+The default design has changed slightly. You may need to adjust DayPicker to match your design. See the [styling docs](./docs/styling.mdx) for more information.
 
-### 3. When using `selected`, add the `onSelect` props
+### 3. Add the `onSelect` Prop When Using `selected`
 
-The `selected` prop is now a controlled prop. Make sure to add an `onSelect` prop to handle the selected state and keep it in sync with your component.
+The `selected` prop is now controlled. Add an `onSelect` prop to handle the selected state and keep it in sync with your component.
 
 ```diff
 + const [selected, setSelected] = useState<Date | undefined>(undefined);
@@ -41,11 +41,9 @@ The `selected` prop is now a controlled prop. Make sure to add an `onSelect` pro
   />
 ```
 
-### 4. Update the class names
+### 4. Update Class Names
 
-This version updates the name of the [UI elements](./api/enumerations/UI.md) to be more clear and consistent, so the class names have changed.
-
-If you are using custom styles via `classNames` or `styles` prop, you will need to update some of them.
+Class names for UI elements have been updated for clarity and consistency. If you use custom styles via the `classNames` or `styles` prop, update them accordingly.
 
 For example, `day_disabled` is now `disabled`:
 
@@ -58,7 +56,7 @@ For example, `day_disabled` is now `disabled`:
  />
 ```
 
-Please note that the `day` element is now `day_button`, and that the `cell` element is now `day`:
+Additionally, the `day` element is now `day_button`, and the `cell` element is now `day`:
 
 ```diff
  <DayPicker
@@ -71,10 +69,10 @@ Please note that the `day` element is now `day_button`, and that the `cell` elem
  />
 ```
 
-See the following list of updated class names. The [`DeprecatedUI`](./api/type-aliases/DeprecatedUI.md) type lists all the deprecated class names.
+See the full list of updated class names in the [`DeprecatedUI`](./api/type-aliases/DeprecatedUI.md) type.
 
 <details>
-  <summary>**List of updated `ClassNames`**</summary>
+  <summary>**List of Updated Class Names**</summary>
 
 | Old Name              | New Name                                                   |
 | --------------------- | ---------------------------------------------------------- |
@@ -115,18 +113,11 @@ See the following list of updated class names. The [`DeprecatedUI`](./api/type-a
 
 </details>
 
-### 5. Remove use of `fromDate`, `toDate`
-
-In case you are using `fromDate` or `toDate`, replace them with the `hidden` and `startMonth`, `endMonth` prop.
+### 5. Replace `fromDate` and `toDate`
 
-| Removed prop | Notes                                                                                                         |
-| ------------ | ------------------------------------------------------------------------------------------------------------- |
-| ~`fromDate`~ | Replace it with `startMonth` and the `hidden` prop and the `before` [Matcher](./api/type-aliases/Matcher.md). |
-| ~`toDate`~   | Replace it with `endMonth` the `hidden` prop and the `after` [Matcher](./api/type-aliases/Matcher.md).        |
+Replace `fromDate` and `toDate` with the `hidden`, `startMonth`, and `endMonth` props.
 
-#### Example
-
-To replace `fromDate`:
+#### Example: Replace `fromDate`
 
 ```diff
  <DayPicker
@@ -136,7 +127,7 @@ To replace `fromDate`:
  />
 ```
 
-To replace `toDate`:
+#### Example: Replace `toDate`
 
 ```diff
  <DayPicker
@@ -146,35 +137,33 @@ To replace `toDate`:
  />
 ```
 
-### 6. Update tests and translations
-
-DayPicker relies on ARIA labels to make the calendar accessible, and v9 include some updates to make them more clear and descriptive. Following the upgrade, you may need to update your tests and translations.
+### 6. Update Tests and Translations
 
-#### Updated ARIA labels
+DayPicker's ARIA labels have been updated for clarity. Update your tests and translations accordingly.
 
-The following ARIA labels have been updated:
+#### Updated ARIA Labels
 
-| Label                                                                    | Old label                | New label                                                                                                  |
+| Label                                                                    | Old Label                | New Label                                                                                                  |
 | ------------------------------------------------------------------------ | ------------------------ | ---------------------------------------------------------------------------------------------------------- |
 | [`labelDayButton`](./api/functions/labelDayButton)<br/>_ex_ ~`labelDay`~ | `21st November (Monday)` | `Monday, November 21st, 2024`<br/>`Monday, November 21st, 2024, selected`<br/>`Today, November 21st, 2024` |
 | [`labelPrevious`](./api/functions/labelPrevious)                         | `Go to previous month`   | `Go to the Previous Month`                                                                                 |
 | [`labelNext`](./api/functions/labelNext)                                 | `Go to next month`       | `Go to the Next Month`                                                                                     |
 | [`labelWeekNumber`](./api/functions/labelWeekNumber.md)                  | `Week nr. ##`            | `Week ##`                                                                                                  |
 
-You may need to update your test selectors — for example:
+Update test selectors as needed:
 
-```diff title="./test.js"
+```diff
 - screen.getByRole('button', 'Go to next month');
 + screen.getByRole('button', 'Go to the Next Month');
 ```
 
-#### `labelDay` changes
+#### `labelDay` Changes
 
-The `labelDay` function has been renamed to `labelDayButton`. It now includes the the year and communicates the selected and today status. See [Translating DayPicker](./docs//translation.mdx) for more information.
+The `labelDay` function has been renamed to `labelDayButton`. It now includes the year and communicates the selected and today status. See [Translating DayPicker](./docs/translation.mdx) for more information.
 
-### 7. Update formatters to return a string
+### 7. Update Formatters to Return a String
 
-The [formatters](./docs/localization.mdx#formatters) now are functions returning a `string` instead of a `ReactNode`. In case you are using the formatters, update your code to return a string.
+Formatters now return a `string` instead of a `ReactNode`. Update your code accordingly.
 
 ```diff
   <DayPicker
@@ -185,7 +174,7 @@ The [formatters](./docs/localization.mdx#formatters) now are functions returning
   />;
 ```
 
-If your formatters are returning a `ReactNode`, you can use a [custom component](./guides/custom-components.mdx) to return a `ReactElement`:
+If you need to return a `ReactElement`, use a [custom component](./guides/custom-components.mdx):
 
 ```tsx
 <DayPicker
@@ -198,11 +187,9 @@ If your formatters are returning a `ReactNode`, you can use a [custom component]
 />
 ```
 
-### 8. Update your Custom Components
-
-In case you are using the `components` prop, you may need to update your code, as some components have been updated.
+### 8. Update Custom Components
 
-- DayPicker now allows to change any of its components. See the [custom component](./guides/custom-components.mdx) guide and the updated [`CustomComponents`](./api/type-aliases/CustomComponents) type.
+If you use the `components` prop, update your code as some components have changed. See the [custom components guide](./guides/custom-components.mdx) for details.
 
 ```diff
   <DayPicker
@@ -222,31 +209,27 @@ In case you are using the `components` prop, you may need to update your code, a
 <details>
   <summary>**List of Updated Components**</summary>
 
-| Components     | Changes                                                                       |
-| -------------- | ----------------------------------------------------------------------------- |
-| `Caption`      | Renamed to [`MonthCaption`](./api/functions/MonthCaption.md).                 |
-| `Day`          | Now it renders a [`DayButton`](./api/functions/DayButton.md).                 |
-| `DayContent`   | Removed. Change its content with [`formatDay`](./api/functions/formatDay.md). |
-| `Head`         | Removed.                                                                      |
-| `HeadRow`      | Renamed to [`Weekdays`](./api/functions/Weekdays.md).                         |
-| `IconDropdown` | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md).     |
-| `IconLeft`     | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md).     |
-| `IconRight`    | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md).     |
-| `Row`          | Renamed to [`Week`](./api/functions/Week.md).                                 |
+| Component      | Changes                                                                     |
+| -------------- | --------------------------------------------------------------------------- |
+| `Caption`      | Renamed to [`MonthCaption`](./api/functions/MonthCaption.md).               |
+| `Day`          | Now renders a [`DayButton`](./api/functions/DayButton.md).                  |
+| `DayContent`   | Removed. Use [`formatDay`](./api/functions/formatDay.md) to change content. |
+| `Head`         | Removed.                                                                    |
+| `HeadRow`      | Renamed to [`Weekdays`](./api/functions/Weekdays.md).                       |
+| `IconDropdown` | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md).   |
+| `IconLeft`     | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md).   |
+| `IconRight`    | Removed. The icon is rendered by [`Chevron`](./api/functions/Chevron.md).   |
+| `Row`          | Renamed to [`Week`](./api/functions/Week.md).                               |
 
 </details>
 
-#### DayPicker hooks
-
-In v8, you could use the [DayPicker Hooks](../versioned_docs//version-8.10.1/advanced-guides/custom-components.mdx#daypicker-hooks) to access the DayPicker state and methods. In v9, these have been merged in the updated [`useDayPicker`](./api/functions/useDayPicker.md) hook.
-
-## Deprecations
+### Deprecations
 
-Deprecated props and types will be removed in the next major version, and it is recommended to update your code to avoid breaking changes.
+Deprecated props and types will be removed in the next major version. Update your code to avoid breaking changes.
 
-### Deprecated props
+#### Deprecated Props
 
-| Deprecated prop | Replacement  | Notes                                            |
+| Deprecated Prop | Replacement  | Notes                                            |
 | --------------- | ------------ | ------------------------------------------------ |
 | ~`fromMonth`~   | `startMonth` | Renamed. The start month for the navigation.     |
 | ~`toMonth`~     | `endMonth`   | Renamed. The end month for the navigation.       |
@@ -264,48 +247,48 @@ Deprecated props and types will be removed in the next major version, and it is
   />
 ```
 
-### Deprecated types
+#### Deprecated Types
 
-If you are using TypeScript, some typings have been deprecated in favor of clarity and shorter names.
+If you use TypeScript, some types have been deprecated for clarity and shorter names.
 
 ```diff
 - import type { DayPickerDefaultProps } from 'react-day-picker';
 + import type { PropsBase } from 'react-day-picker';
 ```
 
-See also the source of [types/deprecated.ts](https://github.com/gpbl/react-day-picker/blob/next/src/types/deprecated.ts).
+See the source of [types/deprecated.ts](https://github.com/gpbl/react-day-picker/blob/next/src/types/deprecated.ts) for more details.
 
 <details>
   <summary>**List of Deprecated Types**</summary>
 
-| Deprecated Type                | Deprecation Reason                                                                                                              |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
-| ~`Caption`~                    | This component has been renamed. Use [`MonthCaption`](./api/functions/MonthCaption.md) instead.                                 |
-| ~`HeadRow`~                    | This component has been removed.                                                                                                |
-| ~`Row`~                        | This component has been renamed. Use [`Week`](./api/functions/Week.md) instead.                                                 |
-| ~`DayPickerSingleProps`~       | This type has been renamed. Use [`PropsSingle`](./api/interfaces/PropsSingle.md) instead.                                       |
-| ~`DayPickerMultipleProps`~     | This type has been renamed. Use [`PropsMulti`](./api/interfaces/PropsMulti.md) instead.                                         |
-| ~`DayPickerRangeProps`~        | This type has been renamed. Use [`PropsRange`](./api/interfaces/PropsRange.md) instead.                                         |
-| ~`DayPickerDefaultProps`~      | This type has been renamed. Use [`PropsBase`](./api/interfaces/PropsBase.md) instead.                                           |
-| ~`DaySelectionMode`~           | This type has been renamed. Use [`Mode`](./api/type-aliases/Mode.md) instead.                                                   |
-| ~`Modifier`~                   | This type will be removed. Use `string` instead.                                                                                |
-| ~`InternaModifier`~            | This type has been split into [`DayFlag`](./api/enumerations/DayFlag) and [`SelectionState`](./api/enumerations/SelectionState) |
-| ~`SelectSingleEventHandler`~   | This type will be removed. Use [`PropsSingle["onSelect]`](./api/interfaces/PropsSingle.md) instead.                             |
-| ~`SelectMultipleEventHandler`~ | This type will be removed. Use [`PropsMulti["onSelect]`](./api/interfaces/PropsMulti.md) instead.                               |
-| ~`SelectRangeEventHandler`~    | This type will be removed. Use [`PropsRange["onSelect]`](./api/interfaces/PropsRange.md) instead.                               |
-| ~`DayPickerProviderProps`~     | This type is not used anymore.                                                                                                  |
-| ~`useNavigation`~              | This type has been included in [`useDayPicker`](./api/functions/useDayPicker.md).                                               |
-| ~`useDayRender`~               | This hook has been removed. To customize the rendering of a day, use the `htmlAttributes` prop in a custom `Day` component.     |
-| ~`ContextProvidersProps`~      | This type is not used anymore.                                                                                                  |
-| ~`DayLabel`~                   | Use `typeof labelDay` instead.                                                                                                  |
-| ~`NavButtonLabel`~             | Use `typeof labelNext` or `typeof labelPrevious` instead.                                                                       |
-| ~`WeekdayLabel`~               | Use `typeof labelWeekday` instead.                                                                                              |
-| ~`WeekNumberLabel`~            | Use `typeof labelWeekNumber` instead.                                                                                           |
-| ~`DayClickEventHandler`~       | Use `DayMouseEventHandler` instead.                                                                                             |
-| ~`DayFocusEventHandler`~       | This type will be removed. Use `DayEventHandler<React.FocusEvent \| React.KeyboardEvent>` instead.                              |
-| ~`DayKeyboardEventHandler`~    | This type will be removed. Use `DayEventHandler<React.KeyboardEvent>` instead.                                                  |
-| ~`DayMouseEventHandler`~       | This type will be removed. Use `DayEventHandler<React.MouseEvent>` instead.                                                     |
-| ~`DayPointerEventHandler`~     | This type will be removed. Use `DayEventHandler<React.PointerEvent>` instead.                                                   |
-| ~`DayTouchEventHandler`~       | This type will be removed. Use `DayEventHandler<React.TouchEvent>` instead.                                                     |
+| Deprecated Type                | Deprecation Reason                                                                                            |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| ~`Caption`~                    | Renamed to [`MonthCaption`](./api/functions/MonthCaption.md).                                                 |
+| ~`HeadRow`~                    | Removed.                                                                                                      |
+| ~`Row`~                        | Renamed to [`Week`](./api/functions/Week.md).                                                                 |
+| ~`DayPickerSingleProps`~       | Renamed to [`PropsSingle`](./api/interfaces/PropsSingle.md).                                                  |
+| ~`DayPickerMultipleProps`~     | Renamed to [`PropsMulti`](./api/interfaces/PropsMulti.md).                                                    |
+| ~`DayPickerRangeProps`~        | Renamed to [`PropsRange`](./api/interfaces/PropsRange.md).                                                    |
+| ~`DayPickerDefaultProps`~      | Renamed to [`PropsBase`](./api/interfaces/PropsBase.md).                                                      |
+| ~`DaySelectionMode`~           | Renamed to [`Mode`](./api/type-aliases/Mode.md).                                                              |
+| ~`Modifier`~                   | Will be removed. Use `string` instead.                                                                        |
+| ~`InternaModifier`~            | Split into [`DayFlag`](./api/enumerations/DayFlag) and [`SelectionState`](./api/enumerations/SelectionState). |
+| ~`SelectSingleEventHandler`~   | Will be removed. Use [`PropsSingle["onSelect]`](./api/interfaces/PropsSingle.md) instead.                     |
+| ~`SelectMultipleEventHandler`~ | Will be removed. Use [`PropsMulti["onSelect]`](./api/interfaces/PropsMulti.md) instead.                       |
+| ~`SelectRangeEventHandler`~    | Will be removed. Use [`PropsRange["onSelect]`](./api/interfaces/PropsRange.md) instead.                       |
+| ~`DayPickerProviderProps`~     | Not used anymore.                                                                                             |
+| ~`useNavigation`~              | Included in [`useDayPicker`](./api/functions/useDayPicker.md).                                                |
+| ~`useDayRender`~               | Removed. Customize day rendering with the `htmlAttributes` prop in a custom `Day` component.                  |
+| ~`ContextProvidersProps`~      | Not used anymore.                                                                                             |
+| ~`DayLabel`~                   | Use `typeof labelDay` instead.                                                                                |
+| ~`NavButtonLabel`~             | Use `typeof labelNext` or `typeof labelPrevious` instead.                                                     |
+| ~`WeekdayLabel`~               | Use `typeof labelWeekday` instead.                                                                            |
+| ~`WeekNumberLabel`~            | Use `typeof labelWeekNumber` instead.                                                                         |
+| ~`DayClickEventHandler`~       | Use `DayMouseEventHandler` instead.                                                                           |
+| ~`DayFocusEventHandler`~       | Will be removed. Use `DayEventHandler<React.FocusEvent \| React.KeyboardEvent>` instead.                      |
+| ~`DayKeyboardEventHandler`~    | Will be removed. Use `DayEventHandler<React.KeyboardEvent>` instead.                                          |
+| ~`DayMouseEventHandler`~       | Will be removed. Use `DayEventHandler<React.MouseEvent>` instead.                                             |
+| ~`DayPointerEventHandler`~     | Will be removed. Use `DayEventHandler<React.PointerEvent>` instead.                                           |
+| ~`DayTouchEventHandler`~       | Will be removed. Use `DayEventHandler<React.TouchEvent>` instead.                                             |
 
 </details>


Test patch:
diff --git a/src/formatters/formatWeekNumber.test.ts b/src/formatters/formatWeekNumber.test.ts
index 38546510d..397cea28b 100644
--- a/src/formatters/formatWeekNumber.test.ts
+++ b/src/formatters/formatWeekNumber.test.ts
@@ -1,5 +1,16 @@
+import { DateLib } from "../classes";
+
 import { formatWeekNumber } from "./formatWeekNumber";
 
 test("should return the formatted week number", () => {
   expect(formatWeekNumber(10)).toEqual("10");
 });
+
+test("should return the formatted week number with leading zero", () => {
+  expect(formatWeekNumber(1)).toEqual("01");
+});
+
+test("should format with the provided numeral system", () => {
+  const dateLib = new DateLib({ numerals: "arab" });
+  expect(formatWeekNumber(1, dateLib)).toEqual("٠١");
+});