chore(types): update HTML attributes for React 19 compatibility (#2621)

src/components/Button.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 
 /**
  * Render the button elements in the calendar.
  *
  * @private
  * @deprecated Use `PreviousMonthButton` or `@link NextMonthButton` instead.
  */
-export function Button(props: JSX.IntrinsicElements["button"]) {
+export function Button(props: ButtonHTMLAttributes<HTMLButtonElement>) {
   return <button {...props} />;
 }
 

src/components/CaptionLabel.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the label in the month caption.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function CaptionLabel(props: JSX.IntrinsicElements["span"]) {
+export function CaptionLabel(props: HTMLAttributes<HTMLSpanElement>) {
   return <span {...props} />;
 }
 

src/components/Day.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 import type { CalendarDay } from "../classes/index.js";
 import type { Modifiers } from "../types/index.js";
@@ -19,7 +19,7 @@ export function Day(
     day: CalendarDay;
     /** The modifiers to apply to the day. */
     modifiers: Modifiers;
-  } & JSX.IntrinsicElements["td"]
+  } & HTMLAttributes<HTMLDivElement>
 ) {
   const { day, modifiers, ...tdProps } = props;
   return <td {...tdProps} />;

src/components/DayButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 
 import type { CalendarDay } from "../classes/index.js";
 import type { Modifiers } from "../types/index.js";
@@ -15,7 +15,7 @@ export function DayButton(
     day: CalendarDay;
     /** The modifiers for the day. */
     modifiers: Modifiers;
-  } & JSX.IntrinsicElements["button"]
+  } & ButtonHTMLAttributes<HTMLButtonElement>
 ) {
   const { day, modifiers, ...buttonProps } = props;
 

src/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type SelectHTMLAttributes } from "react";
 
 import { UI } from "../UI.js";
 import type { ClassNames, CustomComponents } from "../types/index.js";
@@ -35,7 +35,7 @@ export function Dropdown(
      */
     classNames: ClassNames;
     options?: DropdownOption[] | undefined;
-  } & Omit<JSX.IntrinsicElements["select"], "children">
+  } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">
 ) {
   const { options, className, components, classNames, ...selectProps } = props;
 

src/components/DropdownNav.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the the navigation dropdowns.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function DropdownNav(props: JSX.IntrinsicElements["div"]) {
+export function DropdownNav(props: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} />;
 }
 

src/components/Footer.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Component wrapping the footer.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Footer(props: JSX.IntrinsicElements["div"]) {
+export function Footer(props: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} />;
 }
 

src/components/Month.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 import type { CalendarMonth } from "../classes/CalendarMonth.js";
 
@@ -15,7 +15,7 @@ export function Month(
     calendarMonth: CalendarMonth;
     /** The index where this month is displayed. */
     displayIndex: number;
-  } & JSX.IntrinsicElements["div"]
+  } & HTMLAttributes<HTMLDivElement>
 ) {
   const { calendarMonth, displayIndex, ...divProps } = props;
   return <div {...divProps}>{props.children}</div>;

src/components/MonthCaption.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 import type { CalendarMonth } from "../classes/index.js";
 
@@ -14,7 +14,7 @@ export function MonthCaption(
     calendarMonth: CalendarMonth;
     /** The index where this month is displayed. */
     displayIndex: number;
-  } & JSX.IntrinsicElements["div"]
+  } & HTMLAttributes<HTMLDivElement>
 ) {
   const { calendarMonth, displayIndex, ...divProps } = props;
   return <div {...divProps} />;

src/components/MonthGrid.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type TableHTMLAttributes } from "react";
 
 /**
  * Render the grid of days in a month.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function MonthGrid(props: JSX.IntrinsicElements["table"]) {
+export function MonthGrid(props: TableHTMLAttributes<HTMLTableElement>) {
   return <table {...props} />;
 }
 

src/components/Months.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Component wrapping the month grids.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Months(props: JSX.IntrinsicElements["div"]) {
+export function Months(props: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} />;
 }
 

src/components/Nav.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler } from "react";
+import React, { type MouseEventHandler, type HTMLAttributes } from "react";
 
 import { UI } from "../UI.js";
 import { useDayPicker } from "../useDayPicker.js";
@@ -15,7 +15,7 @@ export function Nav(
     onNextClick?: MouseEventHandler<HTMLButtonElement>;
     previousMonth?: Date | undefined;
     nextMonth?: Date | undefined;
-  } & JSX.IntrinsicElements["nav"]
+  } & HTMLAttributes<HTMLElement>
 ) {
   const {
     onPreviousClick,

src/components/NextMonthButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 
 import { useDayPicker } from "../useDayPicker.js";
 
@@ -8,7 +8,9 @@ import { useDayPicker } from "../useDayPicker.js";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function NextMonthButton(props: JSX.IntrinsicElements["button"]) {
+export function NextMonthButton(
+  props: ButtonHTMLAttributes<HTMLButtonElement>
+) {
   const { components } = useDayPicker();
   return <components.Button {...props} />;
 }

src/components/Option.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type OptionHTMLAttributes } from "react";
 
 /**
  * Render the `option` element.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Option(props: JSX.IntrinsicElements["option"]) {
+export function Option(props: OptionHTMLAttributes<HTMLOptionElement>) {
   return <option {...props} />;
 }
 

src/components/PreviousMonthButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 
 import { useDayPicker } from "../useDayPicker.js";
 
@@ -8,7 +8,9 @@ import { useDayPicker } from "../useDayPicker.js";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function PreviousMonthButton(props: JSX.IntrinsicElements["button"]) {
+export function PreviousMonthButton(
+  props: ButtonHTMLAttributes<HTMLButtonElement>
+) {
   const { components } = useDayPicker();
   return <components.Button {...props} />;
 }

src/components/Root.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the root element.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Root(props: JSX.IntrinsicElements["div"]) {
+export function Root(props: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} />;
 }
 

src/components/Select.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type SelectHTMLAttributes } from "react";
 
 /**
  * Render the `select` element.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Select(props: JSX.IntrinsicElements["select"]) {
+export function Select(props: SelectHTMLAttributes<HTMLSelectElement>) {
   return <select {...props} />;
 }
 

src/components/Week.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 import type { CalendarWeek } from "../classes/index.js";
 
@@ -11,7 +11,7 @@ import type { CalendarWeek } from "../classes/index.js";
 export function Week(
   props: {
     week: CalendarWeek;
-  } & JSX.IntrinsicElements["tr"]
+  } & HTMLAttributes<HTMLTableRowElement>
 ) {
   const { week, ...trProps } = props;
   return <tr {...trProps} />;

src/components/WeekNumber.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ThHTMLAttributes } from "react";
 
 import type { CalendarWeek } from "../classes/index.js";
 
@@ -12,7 +12,7 @@ export function WeekNumber(
   props: {
     /** The week to render. */
     week: CalendarWeek;
-  } & JSX.IntrinsicElements["th"]
+  } & ThHTMLAttributes<HTMLTableCellElement>
 ) {
   const { week, ...thProps } = props;
   return <th {...thProps} />;

src/components/WeekNumberHeader.tsx

@@ -1,12 +1,14 @@
-import React from "react";
+import React, { type ThHTMLAttributes } from "react";
 
 /**
  * Render the column header for the week numbers.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function WeekNumberHeader(props: JSX.IntrinsicElements["th"]) {
+export function WeekNumberHeader(
+  props: ThHTMLAttributes<HTMLTableCellElement>
+) {
   return <th {...props} />;
 }
 

src/components/Weekday.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type ThHTMLAttributes } from "react";
 
 /**
  * Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Weekday(props: JSX.IntrinsicElements["th"]) {
+export function Weekday(props: ThHTMLAttributes<HTMLTableCellElement>) {
   return <th {...props} />;
 }
 

src/components/Weekdays.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the row with the weekday names.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Weekdays(props: JSX.IntrinsicElements["tr"]) {
+export function Weekdays(props: HTMLAttributes<HTMLTableRowElement>) {
   return (
     <thead aria-hidden>
       <tr {...props} />

src/components/Weeks.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the weeks in the month grid.
  *
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Weeks(props: JSX.IntrinsicElements["tbody"]) {
+export function Weeks(props: HTMLAttributes<HTMLTableSectionElement>) {
   return <tbody {...props} />;
 }
 

website/src/components/BrowserWindow.tsx

@@ -24,7 +24,7 @@ export function BrowserWindow({
   style,
   bodyStyle,
   shadow = true
-}: Props): JSX.Element {
+}: Props) {
   return (
     <div className={styles.browserWindow} style={{ ...style, minHeight }}>
       <div className={styles.browserWindowHeader}>