`<Tab>` and `<TabPanel>` `id` type mismatch

[kidonng]

Provide a general summary of the issue here

<Tab id={value}> accepts Key (string and number) while <TabPanel id={value}> only accepts string.

🤔 Expected Behavior?

<Tab> type is defined as:

react-spectrum/packages/react-aria-components/src/Tabs.tsx

Lines 46 to 48 in c3afbc4

	export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents {
	/** The unique id of the tab. */
	id?: Key,

I expect to be able to use number as id for <TabPanel> as well.

😯 Current Behavior

Trying to use number as id for <TabPanel> causes a type error:

Due to <TabPanel> type defined as:

react-spectrum/packages/@react-types/shared/src/dom.d.ts

Lines 58 to 63 in c3afbc4

	export interface DOMProps {
	/**
	* The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
	*/
	id?: string
	}

💁 Possible Solution

react-spectrum/packages/react-aria-components/src/Tabs.tsx

Line 86 in c3afbc4

export interface TabPanelProps extends AriaTabPanelProps, RenderProps<TabPanelRenderProps> {

  export interface TabPanelProps extends AriaTabPanelProps, RenderProps<TabPanelRenderProps> { 
+   /** The unique id of the tab. */
+   id?: Key,

🔦 Context

No response

🖥️ Steps to Reproduce

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wChRJY4BvOAFRQCMAaepgBRQDskAbOAL5xsuAkXQwAtCijAUktLkg8uMAM5lSirmvgwmauAF44AHgB8pONbMNGcYABMj1AIxCA9JZu2O3Pg7ObgLmph52nDy8lmGWQA

Version

react-aria-components@1.10.1

What browsers are you seeing the problem on?

Other

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response