From dbad4476561e6db40761214cd73bc430ddb02a23 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 07:36:15 +1000
Subject: [PATCH 01/19] chore: TS explicit module boundaries RSP 1

---
 .../chromatic-fc/Accordion.stories.tsx        |   9 +-
 .../accordion/chromatic/Accordion.stories.tsx |  32 +-
 .../chromatic/Disclosure.stories.tsx          |  44 +-
 .../accordion/src/Accordion.tsx               |  20 +-
 .../chromatic-fc/ActionBar.stories.tsx        |  14 +-
 .../actionbar/chromatic/ActionBar.stories.tsx |  13 +-
 .../actionbar/src/ActionBarContainer.tsx      |   6 +-
 .../actionbar/stories/Example.tsx             |   6 +-
 .../chromatic-fc/ActionGroup.stories.tsx      |  27 +-
 .../chromatic/ActionGroup.stories.tsx         | 469 +++++++++++-------
 .../actiongroup/stories/Toolbar.stories.tsx   |   4 +-
 .../SearchAutocomplete.stories.tsx            |   8 +-
 .../chromatic/SearchAutocomplete.stories.tsx  |  42 +-
 .../avatar/chromatic-fc/Avatar.stories.tsx    |   5 +-
 .../avatar/chromatic/Avatar.stories.tsx       |  10 +-
 .../@react-spectrum/avatar/src/Avatar.tsx     |   6 +-
 .../avatar/stories/Avatar.stories.tsx         |  12 +-
 .../badge/chromatic/Badge.stories.tsx         |   4 +-
 packages/@react-spectrum/badge/src/Badge.tsx  |   6 +-
 .../chromatic-fc/Breadcrumbs.stories.tsx      |   7 +-
 .../chromatic/Breadcrumbs.stories.tsx         |  15 +-
 .../breadcrumbs/src/Breadcrumbs.tsx           |   6 +-
 .../chromatic-fc/ActionButton.stories.tsx     |  75 ++-
 .../button/chromatic-fc/Button.stories.tsx    |  31 +-
 .../chromatic-fc/LogicButton.stories.tsx      |  11 +-
 .../chromatic-fc/ToggleButton.stories.tsx     |  57 ++-
 .../button/chromatic/ActionButton.stories.tsx | 152 +++---
 .../ActionButtonLanguages.stories.tsx         |  42 +-
 .../button/chromatic/Button.stories.tsx       |  30 +-
 .../button/chromatic/LogicButton.stories.tsx  |  18 +-
 .../button/chromatic/ToggleButton.stories.tsx |  13 +-
 .../button/src/ActionButton.tsx               |   6 +-
 .../button/src/ClearButton.tsx                |   6 +-
 .../button/src/FieldButton.tsx                |   6 +-
 .../button/src/LogicButton.tsx                |   6 +-
 .../button/src/ToggleButton.tsx               |   6 +-
 .../chromatic/ButtonGroup.stories.tsx         |  21 +-
 .../buttongroup/src/ButtonGroup.tsx           |   6 +-
 .../chromatic-fc/Calendar.stories.tsx         |  29 +-
 .../chromatic-fc/CalendarCell.stories.tsx     |   7 +-
 .../calendar/chromatic/Calendar.stories.tsx   |  33 +-
 .../chromatic/CalendarCell.stories.tsx        |  17 +-
 .../chromatic/RangeCalendar.stories.tsx       |  37 +-
 .../stories/RangeCalendarCell.stories.tsx     |  35 +-
 44 files changed, 872 insertions(+), 537 deletions(-)

diff --git a/packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx b/packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx
index ebf823b8fa8..87ecaedb5ce 100644
--- a/packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx
+++ b/packages/@react-spectrum/accordion/chromatic-fc/Accordion.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
+import React from 'react';
 import {SpectrumAccordionProps} from '../src/Accordion';
 import {Template} from '../chromatic/Accordion.stories';
 
@@ -20,7 +21,9 @@ const meta: Meta<SpectrumAccordionProps> = {
 
 export default meta;
 
-export const Default = {
-  render: Template,
+export type AccordionStory = StoryObj<SpectrumAccordionProps>;
+
+export const Default: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {defaultExpandedKeys: ['shared']}
 };
diff --git a/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx b/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx
index ade7611b366..e496e26a90c 100644
--- a/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx
+++ b/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle, SpectrumAccordionProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 const meta: Meta = {
   title: 'Accordion',
@@ -22,7 +22,9 @@ const meta: Meta = {
 
 export default meta;
 
-export const Template = (args) => (
+export type AccordionStory = StoryObj<SpectrumAccordionProps>;
+
+export const Template = (args: SpectrumAccordionProps): JSX.Element => (
   <Accordion {...args}>
     <Disclosure id="files">
       <DisclosureTitle>
@@ -51,16 +53,16 @@ export const Template = (args) => (
   </Accordion>
 );
 
-export const Default = {
-  render: Template
+export const Default: AccordionStory = {
+  render: (args) => <Template {...args} />
 };
 
-export const WithExpandedKeys = {
-  render: Template,
+export const WithExpandedKeys: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {defaultExpandedKeys: ['shared']}
 };
 
-export const WithDisabledDisclosure = {
+export const WithDisabledDisclosure: AccordionStory = {
   render: (args) => (
     <Accordion {...args}>
       <Disclosure id="files">
@@ -90,22 +92,22 @@ export const WithDisabledDisclosure = {
     </Accordion>)
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {isDisabled: true}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: AccordionStory = {
+  render: (args) => <Template {...args} />,
   args: {isQuiet: true}
 };
 
-export const WithWrappingTitle = {
+export const WithWrappingTitle: AccordionStory = {
   render: (args) => (
     <Accordion maxWidth="size-3000" {...args}>
       <Disclosure id="files">
         <DisclosureTitle>
-          Long long long long long long long long long long long long long  long long long wrapping title 
+          Long long long long long long long long long long long long long  long long long wrapping title
         </DisclosureTitle>
         <DisclosurePanel>
           Files content
diff --git a/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx b/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx
index 453b480428f..03849a8108f 100644
--- a/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Disclosure, DisclosurePanel, DisclosureTitle} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Disclosure, DisclosurePanel, DisclosureTitle, SpectrumDisclosureProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 const meta: Meta = {
   title: 'Disclosure',
@@ -22,7 +22,9 @@ const meta: Meta = {
 
 export default meta;
 
-export const Template = (args) => (
+export type DisclosureStory = StoryObj<SpectrumDisclosureProps>;
+
+export const Template = (args: SpectrumDisclosureProps): JSX.Element => (
   <Disclosure {...args}>
     <DisclosureTitle>
       Your files
@@ -33,27 +35,29 @@ export const Template = (args) => (
   </Disclosure>
 );
 
-export const Default = {
-  render: Template
+export const Default: DisclosureStory = {
+  render: (args) => <Template {...args} />
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: DisclosureStory = {
+  render: (args) => <Template {...args} />,
   args: {isDisabled: true}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: DisclosureStory = {
+  render: (args) => <Template {...args} />,
   args: {isQuiet: true}
 };
 
-export const WrappingTitle = (args) => (
-  <Disclosure maxWidth="size-3000" {...args}>
-    <DisclosureTitle>
-      Long long long long long long long long long long long long long  long long long wrapping title 
-    </DisclosureTitle>
-    <DisclosurePanel>
-      Files content
-    </DisclosurePanel>
-  </Disclosure>
-);
+export const WrappingTitle: DisclosureStory = {
+  render: (args) => (
+    <Disclosure maxWidth="size-3000" {...args}>
+      <DisclosureTitle>
+        Long long long long long long long long long long long long long  long long long wrapping title
+      </DisclosureTitle>
+      <DisclosurePanel>
+        Files content
+      </DisclosurePanel>
+    </Disclosure>
+  )
+};
diff --git a/packages/@react-spectrum/accordion/src/Accordion.tsx b/packages/@react-spectrum/accordion/src/Accordion.tsx
index 1344ca0cff1..be8e23b193b 100644
--- a/packages/@react-spectrum/accordion/src/Accordion.tsx
+++ b/packages/@react-spectrum/accordion/src/Accordion.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef, forwardRefType, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType, StyleProps} from '@react-types/shared';
 import {Button, DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';
 import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
@@ -30,7 +30,9 @@ export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'clas
 const InternalAccordionContext = createContext<{isQuiet: boolean} | null>(null);
 
 /** A group of disclosures that can be expanded and collapsed. */
-export const Accordion = /*#__PURE__*/(forwardRef as forwardRefType)(function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
+export const Accordion:
+  (props: SpectrumAccordionProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null =
+/*#__PURE__*/(forwardRef as forwardRefType)(function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
@@ -55,7 +57,9 @@ export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'classNam
 }
 
 /** A collapsible section of content composed of a heading that expands and collapses a panel. */
-export const Disclosure = /*#__PURE__*/(forwardRef as forwardRefType)(function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
+export const Disclosure:
+  (props: SpectrumDisclosureProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null =
+/*#__PURE__*/(forwardRef as forwardRefType)(function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
@@ -82,14 +86,16 @@ export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps,
 }
 
 /** The panel that contains the content of the disclosure. */
-export const DisclosurePanel = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
+export const DisclosurePanel:
+  (props: SpectrumDisclosurePanelProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null =
+/*#__PURE__*/(forwardRef as forwardRefType)(function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
   return (
     <RACDisclosurePanel
       ref={domRef}
       {...styleProps as Omit<React.HTMLAttributes<HTMLElement>, 'role'>}
-      className={classNames(styles, 'spectrum-Accordion-itemContent', styleProps.className)} 
+      className={classNames(styles, 'spectrum-Accordion-itemContent', styleProps.className)}
       {...props}>
       {props.children}
     </RACDisclosurePanel>
@@ -107,7 +113,9 @@ export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProp
 }
 
 /** The heading of the disclosure. */
-export const DisclosureTitle = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>) {
+export const DisclosureTitle:
+  (props: SpectrumDisclosureTitleProps & React.RefAttributes<DOMRefValue<HTMLHeadingElement>>) => React.ReactElement | null =
+/*#__PURE__*/(forwardRef as forwardRefType)(function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>) {
   let {styleProps} = useStyleProps(props);
   let {level = 3} = props;
   let {direction} = useLocale();
diff --git a/packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx b/packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx
index 6828568cc3b..7cf2a06e9b0 100644
--- a/packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx
+++ b/packages/@react-spectrum/actionbar/chromatic-fc/ActionBar.stories.tsx
@@ -11,20 +11,26 @@
  * governing permissions and limitations under the License.
  */
 
-import {Default, LargeWidth} from '../chromatic/ActionBar.stories';
+import {Example} from '../stories/Example';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'ActionBar'
 };
 
-export const All = () => (
+export type ActionBarStory = StoryFn<typeof Example>;
+
+export const All: ActionBarStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Default</h2>
-    <Default />
+    <Flex gap="size-250">
+      <Example />
+      <Example defaultSelectedKeys={new Set(['Foo 1'])} />
+    </Flex>
     <h2>Large width</h2>
-    <LargeWidth />
+    <Example isEmphasized tableWidth={800} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
   </Flex>
 );
 All.story = {
diff --git a/packages/@react-spectrum/actionbar/chromatic/ActionBar.stories.tsx b/packages/@react-spectrum/actionbar/chromatic/ActionBar.stories.tsx
index 7861873f724..bbf2f592bd4 100644
--- a/packages/@react-spectrum/actionbar/chromatic/ActionBar.stories.tsx
+++ b/packages/@react-spectrum/actionbar/chromatic/ActionBar.stories.tsx
@@ -13,12 +13,15 @@
 import {Example, Example2} from '../stories/Example';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'ActionBar'
 };
 
-export const Default = () => (
+export type ActionBarStory = StoryFn<typeof Example>;
+
+export const Default: ActionBarStory = () => (
   <Flex gap="size-250">
     <Example />
     <Example defaultSelectedKeys={new Set(['Foo 1'])} />
@@ -29,13 +32,13 @@ Default.story = {
   name: 'default'
 };
 
-export const IsEmphasized = () => <Example isEmphasized defaultSelectedKeys={new Set(['Foo 1'])} />;
+export const IsEmphasized: ActionBarStory = () => <Example isEmphasized defaultSelectedKeys={new Set(['Foo 1'])} />;
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const LargeWidth = () => (
+export const LargeWidth: ActionBarStory = () => (
   <Example isEmphasized tableWidth={800} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
 );
 
@@ -43,7 +46,7 @@ LargeWidth.story = {
   name: 'large width'
 };
 
-export const CollapsedIcons = () => (
+export const CollapsedIcons: ActionBarStory = () => (
   <Example isEmphasized tableWidth={500} isQuiet defaultSelectedKeys={new Set(['Foo 1'])} />
 );
 
@@ -51,6 +54,6 @@ CollapsedIcons.story = {
   name: 'collapsed icons'
 };
 
-export const CollapseRounding = () => (
+export const CollapseRounding: ActionBarStory = () => (
   <Example2 tableWidth={800} defaultSelectedKeys={new Set(['Foo 1'])} />
 );
diff --git a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx
index ed74c03c882..3b1cdb4d5b3 100644
--- a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx
+++ b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React from 'react';
 import {SpectrumActionBarContainerProps} from '@react-types/actionbar';
@@ -22,7 +22,9 @@ import {useProviderProps} from '@react-spectrum/provider';
  * ActionBarContainer wraps around an ActionBar and a component that supports selection. It handles
  * the ActionBar's position with respect to its linked component.
  */
-export const ActionBarContainer = React.forwardRef(function ActionBarContainer(props: SpectrumActionBarContainerProps, ref: DOMRef<HTMLDivElement>) {
+export const ActionBarContainer:
+  React.ForwardRefExoticComponent<SpectrumActionBarContainerProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function ActionBarContainer(props: SpectrumActionBarContainerProps, ref: DOMRef<HTMLDivElement>) {
   // Grabs specific props from the closest Provider (see https://react-spectrum.adobe.com/react-spectrum/Provider.html#property-groups). Remove if your component doesn't support any of the listed props.
   props = useProviderProps(props);
 
diff --git a/packages/@react-spectrum/actionbar/stories/Example.tsx b/packages/@react-spectrum/actionbar/stories/Example.tsx
index 1597f13a340..debc2e79f83 100644
--- a/packages/@react-spectrum/actionbar/stories/Example.tsx
+++ b/packages/@react-spectrum/actionbar/stories/Example.tsx
@@ -19,7 +19,7 @@ import Duplicate from '@spectrum-icons/workflow/Duplicate';
 import Edit from '@spectrum-icons/workflow/Edit';
 import {mergeProps} from '@react-aria/utils';
 import Move from '@spectrum-icons/workflow/Move';
-import React, {useRef, useState} from 'react';
+import React, {JSX, useRef, useState} from 'react';
 import {Selection} from '@react-types/shared';
 import {Text} from '@react-spectrum/text';
 
@@ -48,7 +48,7 @@ let defaultItems = [
   {test: 'Test 2', foo: 'Foo 16', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'}
 ];
 
-export function Example(props: any = {}) {
+export function Example(props: any = {}): JSX.Element {
   const [selectedKeys, setSelectedKeys] = useState<Selection>(props.defaultSelectedKeys || new Set());
   let [items, setItems] = useState(defaultItems);
 
@@ -118,7 +118,7 @@ export function Example(props: any = {}) {
   );
 }
 
-export function Example2(props: any = {}) {
+export function Example2(props: any = {}): JSX.Element {
   const [selectedKeys, setSelectedKeys] = useState<Selection>(props.defaultSelectedKeys || new Set());
   let [items, setItems] = useState(defaultItems);
 
diff --git a/packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx b/packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx
index b7147c375fd..6f728f50cbf 100644
--- a/packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx
+++ b/packages/@react-spectrum/actiongroup/chromatic-fc/ActionGroup.stories.tsx
@@ -11,32 +11,41 @@
  */
 
 
-import {Compact, Default, IsDisabled, IsEmphasized, IsQuiet, StaticColorBlack, StaticColorWhite} from '../chromatic/ActionGroup.stories';
+import {docItems, editItems, Render, viewItems} from '../chromatic/ActionGroup.stories';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
+import {View} from '@react-spectrum/view';
 
 export default {
   title: 'ActionGroup'
 };
 
-export const All = () => (
+export type ActionGroupStory = StoryFn<typeof Render>;
+
+export const All: ActionGroupStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>default</h2>
-    <Default />
+    <Render items={docItems} />
     <h2>isDisabled</h2>
-    <IsDisabled />
+    <Render items={docItems} isDisabled defaultSelectedKeys={['1']} />
     <h2>compact</h2>
-    <Compact />
+    <Render items={viewItems} density="compact" defaultSelectedKeys={['1']} />
     <h2>isQuiet</h2>
-    <IsQuiet />
+    <Render items={editItems} isQuiet defaultSelectedKeys={['1']} />
     <h2>isEmphasized</h2>
-    <IsEmphasized />
+    <Render items={docItems} isEmphasized defaultSelectedKeys={['1']} />
     <h2>staticColor: black</h2>
-    <StaticColorBlack />
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Render items={viewItems} staticColor="black" defaultSelectedKeys={['1']} />
+    </View>
     <h2>staticColor: white</h2>
-    <StaticColorWhite />
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Render items={viewItems} staticColor="white" defaultSelectedKeys={['1']} />
+    </View>
   </Flex>
 );
+
 All.story = {
   name: 'all'
 };
diff --git a/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.stories.tsx b/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.stories.tsx
index aa988072e39..251a7c5de04 100644
--- a/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.stories.tsx
+++ b/packages/@react-spectrum/actiongroup/chromatic/ActionGroup.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionGroup} from '../';
+import {ActionGroup, SpectrumActionGroupProps} from '../';
 import BookIcon from '@spectrum-icons/workflow/Book';
 import CopyIcon from '@spectrum-icons/workflow/Copy';
 import DeleteIcon from '@spectrum-icons/workflow/Delete';
@@ -19,8 +19,9 @@ import DrawIcon from '@spectrum-icons/workflow/Draw';
 import {Flex} from '@react-spectrum/layout';
 import InfoIcon from '@spectrum-icons/workflow/Info';
 import {Item} from '@react-stately/collections';
+import {Meta, StoryObj} from '@storybook/react';
 import PropertiesIcon from '@spectrum-icons/workflow/Properties';
-import React from 'react';
+import React, {JSX} from 'react';
 import SettingsIcon from '@spectrum-icons/workflow/Settings';
 import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
@@ -28,11 +29,11 @@ import ViewCardIcon from '@spectrum-icons/workflow/ViewCard';
 import ViewGridIcon from '@spectrum-icons/workflow/ViewGrid';
 import ViewListIcon from '@spectrum-icons/workflow/ViewList';
 
-const docItems = [{children: 'Document setup', name: '1'}, {children: 'Settings', name: '2'}];
-const editItems = [{children: 'Edit', name: '1'}, {children: 'Copy', name: '2'}, {children: 'Delete', name: '3'}];
-const viewItems2 = [{children: 'Grid view', name: '1'}, {children: 'List view', name: '2'}];
-const viewItems = [{children: 'Grid view', name: '1'}, {children: 'List view', name: '2'}, {children: 'Gallery view', name: '3'}];
-const dataItems = [{children: 'Properties', name: '1'}, {children: 'Info', name: '2'}, {children: 'Keywords', name: '3'}];
+export const docItems = [{children: 'Document setup', name: '1'}, {children: 'Settings', name: '2'}] as const;
+export const editItems = [{children: 'Edit', name: '1'}, {children: 'Copy', name: '2'}, {children: 'Delete', name: '3'}] as const;
+export const viewItems2 = [{children: 'Grid view', name: '1'}, {children: 'List view', name: '2'}] as const;
+export const viewItems = [{children: 'Grid view', name: '1'}, {children: 'List view', name: '2'}, {children: 'Gallery view', name: '3'}] as const;
+export const dataItems = [{children: 'Properties', name: '1'}, {children: 'Info', name: '2'}, {children: 'Keywords', name: '3'}] as const;
 
 let iconMap = {
   'Document setup': DocumentIcon,
@@ -49,289 +50,373 @@ let iconMap = {
 };
 
 export default {
-  title: 'ActionGroup'
-};
+  title: 'ActionGroup',
+  excludeStories: ['Render', 'RenderText', 'RenderBoth', 'RenderIcons', 'docItems', 'editItems', 'viewItems2', 'viewItems', 'dataItems']
+} as Meta<typeof ActionGroup>;
 
-export const Default = () => render({}, docItems);
+export type ActionGroupStory = StoryObj<typeof Render>;
 
-Default.story = {
+export const Default: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems
+  },
   name: 'default'
 };
 
-export const IsDisabled = () => render({isDisabled: true, defaultSelectedKeys: ['1']}, docItems);
-
-IsDisabled.story = {
+export const IsDisabled: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems,
+    isDisabled: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isDisabled'
 };
 
-export const Compact = () => render({density: 'compact', defaultSelectedKeys: ['1']}, viewItems);
-
-Compact.story = {
+export const Compact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    density: 'compact',
+    defaultSelectedKeys: ['1']
+  },
   name: 'compact'
 };
 
-export const IsJustified = () =>
-  render({isJustified: true, defaultSelectedKeys: ['1']}, viewItems2);
-
-IsJustified.story = {
+export const IsJustified: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems2,
+    isJustified: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isJustified'
 };
 
-export const CompactIsJustified = () =>
-  render({density: 'compact', isJustified: true, defaultSelectedKeys: ['1']}, viewItems2);
-
-CompactIsJustified.story = {
+export const CompactIsJustified: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems2,
+    density: 'compact',
+    isJustified: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'compact, isJustified'
 };
 
-export const IsQuiet = () => render({isQuiet: true, defaultSelectedKeys: ['1']}, editItems);
-
-IsQuiet.story = {
+export const IsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: editItems,
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isQuiet'
 };
 
-export const CompactIsQuiet = () =>
-  render({density: 'compact', isQuiet: true, defaultSelectedKeys: ['1']}, editItems);
-
-CompactIsQuiet.story = {
+export const CompactIsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: editItems,
+    density: 'compact',
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'compact, isQuiet'
 };
 
-export const IsEmphasized = () =>
-  render({isEmphasized: true, defaultSelectedKeys: ['1']}, docItems);
-
-IsEmphasized.story = {
+export const IsEmphasized: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems,
+    isEmphasized: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isEmphasized'
 };
 
-export const CompactIsEmphasized = () =>
-  render({isEmphasized: true, density: 'compact', defaultSelectedKeys: ['1']}, viewItems);
-
-CompactIsEmphasized.story = {
+export const CompactIsEmphasized: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    isEmphasized: true,
+    density: 'compact',
+    defaultSelectedKeys: ['1']
+  },
   name: 'compact, isEmphasized'
 };
 
-export const IsQuietIsEmphasized = () =>
-  render({isEmphasized: true, isQuiet: true, defaultSelectedKeys: ['1']}, viewItems);
-
-IsQuietIsEmphasized.story = {
+export const IsQuietIsEmphasized: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    isEmphasized: true,
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'isQuiet, isEmphasized'
 };
 
-export const SelectionModeMultiple = () =>
-  render({selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems);
-
-SelectionModeMultiple.story = {
+export const SelectionModeMultiple: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple'
 };
 
-export const StaticColorWhite = () => (
-  <View backgroundColor="static-blue-700" padding="size-1000">
-    {render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
-  </View>
-);
-
-StaticColorWhite.story = {
+export const StaticColorWhite: ActionGroupStory = {
+  render: (args) => (
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Render {...args} />
+    </View>
+  ),
+  args: {
+    items: viewItems,
+    staticColor: 'white',
+    defaultSelectedKeys: ['1']
+  },
   name: 'staticColor=white'
 };
 
-export const StaticColorWhiteIsQuiet = () => (
-  <View backgroundColor="static-blue-700" padding="size-1000">
-    {render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
-  </View>
-);
-
-StaticColorWhiteIsQuiet.story = {
+export const StaticColorWhiteIsQuiet: ActionGroupStory = {
+  render: (args) => (
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Render {...args} />
+    </View>
+  ),
+  args: {
+    items: viewItems,
+    staticColor: 'white',
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'staticColor=white, isQuiet'
 };
 
-export const StaticColorBlack = () => (
-  <View backgroundColor="static-yellow-400" padding="size-1000">
-    {render({staticColor: 'black', defaultSelectedKeys: ['1']}, viewItems)}
-  </View>
-);
-
-StaticColorBlack.story = {
+export const StaticColorBlack: ActionGroupStory = {
+  render: (args) => (
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Render {...args} />
+    </View>
+  ),
+  args: {
+    items: viewItems,
+    staticColor: 'black',
+    defaultSelectedKeys: ['1']
+  },
   name: 'staticColor=black'
 };
 
-export const StaticColorBlackIsQuiet = () => (
-  <View backgroundColor="static-yellow-400" padding="size-1000">
-    {render({staticColor: 'black', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
-  </View>
-);
-
-StaticColorBlackIsQuiet.story = {
+export const StaticColorBlackIsQuiet: ActionGroupStory = {
+  render: (args) => (
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Render {...args} />
+    </View>
+  ),
+  args: {
+    items: viewItems,
+    staticColor: 'black',
+    isQuiet: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'staticColor=black, isQuiet'
 };
 
-export const SelectionModeSingleDisallowEmptySelection = () =>
-  render(
-    {selectionMode: 'single', disallowEmptySelection: true, defaultSelectedKeys: ['1']},
-    dataItems
-  );
-
-SelectionModeSingleDisallowEmptySelection.story = {
+export const SelectionModeSingleDisallowEmptySelection: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    selectionMode: 'single',
+    disallowEmptySelection: true,
+    defaultSelectedKeys: ['1']
+  },
   name: 'selectionMode: single, disallowEmptySelection'
 };
 
-export const SelectionModeMultipleIsQuiet = () =>
-  render({isQuiet: true, selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems);
-
-SelectionModeMultipleIsQuiet.story = {
+export const SelectionModeMultipleIsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isQuiet: true,
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isQuiet'
 };
 
-export const SelectionModeMultipleIsQuietCompact = () =>
-  render(
-    {
-      isQuiet: true,
-      density: 'compact',
-      selectionMode: 'multiple',
-      defaultSelectedKeys: ['1', '2']
-    },
-    dataItems
-  );
-
-SelectionModeMultipleIsQuietCompact.story = {
+export const SelectionModeMultipleIsQuietCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isQuiet: true,
+    density: 'compact',
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isQuiet, compact'
 };
 
-export const SelectionModeMultipleIsEmphasized = () =>
-  render(
-    {isEmphasized: true, selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']},
-    dataItems
-  );
-
-SelectionModeMultipleIsEmphasized.story = {
+export const SelectionModeMultipleIsEmphasized: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isEmphasized: true,
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isEmphasized'
 };
 
-export const SelectionModeMultipleIsEmphasizedCompact = () =>
-  render(
-    {
-      isEmphasized: true,
-      density: 'compact',
-      selectionMode: 'multiple',
-      defaultSelectedKeys: ['1', '2']
-    },
-    dataItems
-  );
-
-SelectionModeMultipleIsEmphasizedCompact.story = {
+export const SelectionModeMultipleIsEmphasizedCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isEmphasized: true,
+    density: 'compact',
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isEmphasized, compact'
 };
 
-export const SelectionModeMultipleIsEmphasizedIsQuiet = () =>
-  render(
-    {
-      isEmphasized: true,
-      isQuiet: true,
-      selectionMode: 'multiple',
-      defaultSelectedKeys: ['1', '2']
-    },
-    dataItems
-  );
-
-SelectionModeMultipleIsEmphasizedIsQuiet.story = {
+export const SelectionModeMultipleIsEmphasizedIsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isEmphasized: true,
+    isQuiet: true,
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isEmphasized, isQuiet'
 };
 
-export const SelectionModeMultipleIsEmphasizedIsQuietCompact = () =>
-  render(
-    {
-      isEmphasized: true,
-      isQuiet: true,
-      density: 'compact',
-      selectionMode: 'multiple',
-      defaultSelectedKeys: ['1', '2']
-    },
-    dataItems
-  );
-
-SelectionModeMultipleIsEmphasizedIsQuietCompact.story = {
+export const SelectionModeMultipleIsEmphasizedIsQuietCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    isEmphasized: true,
+    isQuiet: true,
+    density: 'compact',
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['1', '2']
+  },
   name: 'selectionMode: multiple, isEmphasized, isQuiet, compact'
 };
 
-export const SelectionModeNone = () => render({selectionMode: 'none'}, editItems);
-
-SelectionModeNone.story = {
+export const SelectionModeNone: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: editItems,
+    selectionMode: 'none'
+  },
   name: 'selectionMode: none'
 };
 
-export const Vertical = () =>
-  render({orientation: 'vertical', defaultSelectedKeys: ['1']}, docItems);
-
-Vertical.story = {
+export const Vertical: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems,
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical'
 };
 
-export const VerticalIsJustified = () =>
-  render({isJustified: true, orientation: 'vertical', defaultSelectedKeys: ['1']}, docItems);
-
-VerticalIsJustified.story = {
+export const VerticalIsJustified: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: docItems,
+    isJustified: true,
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, isJustified'
 };
 
-export const VerticalCompact = () =>
-  render({density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']}, viewItems);
-
-VerticalCompact.story = {
+export const VerticalCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    density: 'compact',
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, compact'
 };
 
-export const VerticalIsJustifiedCompact = () =>
-  render(
-    {isJustified: true, density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']},
-    viewItems
-  );
-
-VerticalIsJustifiedCompact.story = {
+export const VerticalIsJustifiedCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    isJustified: true,
+    density: 'compact',
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, isJustified, compact'
 };
 
-export const VerticalIsQuiet = () =>
-  render({isQuiet: true, orientation: 'vertical', defaultSelectedKeys: ['1']}, editItems);
-
-VerticalIsQuiet.story = {
+export const VerticalIsQuiet: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: editItems,
+    isQuiet: true,
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, isQuiet'
 };
 
-export const VerticalIsQuietCompact = () =>
-  render(
-    {isQuiet: true, density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']},
-    viewItems
-  );
-
-VerticalIsQuietCompact.story = {
+export const VerticalIsQuietCompact: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: viewItems,
+    isQuiet: true,
+    density: 'compact',
+    orientation: 'vertical',
+    defaultSelectedKeys: ['1']
+  },
   name: 'vertical, isQuiet, compact'
 };
 
-export const DisabledKeys = () =>
-  render({disabledKeys: ['1', '2'], selectionMode: 'multiple'}, dataItems);
-
-DisabledKeys.story = {
+export const DisabledKeys: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    disabledKeys: ['1', '2'],
+    selectionMode: 'multiple'
+  },
   name: 'disabledKeys'
 };
 
-export const OverflowAndHide = () =>
-  render({overflowMode: 'collapse', buttonLabelBehavior: 'hide', selectionMode: 'multiple'}, dataItems);
-
-OverflowAndHide.story = {
+export const OverflowAndHide: ActionGroupStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    items: dataItems,
+    overflowMode: 'collapse',
+    buttonLabelBehavior: 'hide',
+    selectionMode: 'multiple'
+  },
   name: 'overflowMode: collapse, buttonLabelBehavior: hide'
 };
 
-function render(props, items) {
+export function Render(props: Omit<SpectrumActionGroupProps<unknown>, 'children'> & {items: any}): JSX.Element {
   return (
     <Flex rowGap="size-300" margin="size-100" width="100%" direction="column">
-      {renderText(props, items)}
-      {renderBoth(props, items)}
-      {renderIcons(props, items)}
+      <RenderText {...props} />
+      <RenderBoth {...props} />
+      <RenderIcons {...props} />
     </Flex>
   );
 }
 
-function renderText(props, items: any = docItems) {
+export function RenderText(props: Omit<SpectrumActionGroupProps<unknown>, 'children'> & {items: any}): JSX.Element {
+  let {items} = props;
   return (
     <ActionGroup selectionMode="single" {...props}>
       {
@@ -343,7 +428,8 @@ function renderText(props, items: any = docItems) {
   );
 }
 
-function renderBoth(props, items: any = docItems) {
+export function RenderBoth(props: Omit<SpectrumActionGroupProps<unknown>, 'children'> & {items: any}): JSX.Element {
+  let {items = docItems} = props;
   return (
     <ActionGroup selectionMode="single" {...props}>
       {
@@ -361,7 +447,8 @@ function renderBoth(props, items: any = docItems) {
   );
 }
 
-function renderIcons(props, items: any = docItems) {
+export function RenderIcons(props: Omit<SpectrumActionGroupProps<unknown>, 'children'> & {items: any}): JSX.Element {
+  let {items = docItems} = props;
   return (
     <ActionGroup selectionMode="single" {...props}>
       {
diff --git a/packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx b/packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx
index 6f741d9f801..087d004760d 100644
--- a/packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx
+++ b/packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx
@@ -41,7 +41,9 @@ export interface SpectrumToolbarProps extends AriaLabelingProps {
   orientation?: Orientation
 }
 
-export const Toolbar = forwardRef((props: SpectrumToolbarProps, ref: ForwardedRef<HTMLDivElement>) => {
+export const Toolbar:
+  React.ForwardRefExoticComponent<SpectrumToolbarProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef((props: SpectrumToolbarProps, ref: ForwardedRef<HTMLDivElement>) => {
   props = useProviderProps(props);
   props = useSlotProps(props, 'toolbar');
   let {
diff --git a/packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx b/packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx
index 767d2916c34..ce5b907868c 100644
--- a/packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx
+++ b/packages/@react-spectrum/autocomplete/chromatic-fc/SearchAutocomplete.stories.tsx
@@ -10,14 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
+import React from 'react';
+import {StoryObj} from '@storybook/react';
 import {Template} from '../chromatic/SearchAutocomplete.stories';
 
 export default {
   title: 'SearchAutocomplete'
 };
 
-export const PropInputValue = {
-  render: Template,
+export type SearchAutocompleteStory = StoryObj<typeof Template>;
+
+export const PropInputValue: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'inputValue: Blah',
   args: {inputValue: 'Blah'}
 };
diff --git a/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx b/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx
index a6c2d62fcbb..32ae901e755 100644
--- a/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx
+++ b/packages/@react-spectrum/autocomplete/chromatic/SearchAutocomplete.stories.tsx
@@ -14,8 +14,8 @@ import Filter from '@spectrum-icons/workflow/Filter';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Item, SearchAutocomplete} from '../';
-import {Meta, StoryFn} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumSearchAutocompleteProps} from '@react-types/autocomplete';
 
 // Skipping focus styles because don't have a way of applying it via classnames
@@ -70,13 +70,15 @@ const meta: Meta<SpectrumSearchAutocompleteProps<object>> = {
 
 export default meta;
 
+export type SearchAutocompleteStory = StoryObj<typeof Template>;
+
 let items = [
   {name: 'Aardvark', id: '1'},
   {name: 'Kangaroo', id: '2'},
   {name: 'Snake', id: '3'}
 ];
 
-export const Template: StoryFn<SpectrumSearchAutocompleteProps<object>> = (args) => (
+export const Template = (args: SpectrumSearchAutocompleteProps<object>): JSX.Element => (
   <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -94,7 +96,7 @@ export const Template: StoryFn<SpectrumSearchAutocompleteProps<object>> = (args)
 );
 
 // Chromatic can't handle the size of the side label story so removed some extraneous props that don't matter for side label case.
-const TemplateSideLabel: StoryFn<SpectrumSearchAutocompleteProps<object>> = (args) => (
+const TemplateSideLabel = (args: SpectrumSearchAutocompleteProps<object>): JSX.Element => (
   <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200" width={800}>
     {combinations.filter(combo => !(combo.isReadOnly || combo.isDisabled)).map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -111,38 +113,38 @@ const TemplateSideLabel: StoryFn<SpectrumSearchAutocompleteProps<object>> = (arg
   </Grid>
 );
 
-export const PropDefaults = {
-  render: Template,
+export const PropDefaults: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const PropInputValue = {
-  render: Template,
+export const PropInputValue: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'inputValue: Blah',
   args: {inputValue: 'Blah'}
 };
 
-export const PropAriaLabelled = {
-  render: Template,
+export const PropAriaLabelled: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'aria-label',
   args: {'aria-label': 'Label'}
 };
 
-export const PropLabelEnd = {
-  render: Template,
+export const PropLabelEnd: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'label end',
   args: {...PropDefaults.args, labelAlign: 'end'}
 };
 
-export const PropLabelSide = {
-  render: TemplateSideLabel,
+export const PropLabelSide: SearchAutocompleteStory = {
+  render: (args) => <TemplateSideLabel {...args} />,
   name: 'label side',
   args: {...PropDefaults.args, labelPosition: 'side'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {...PropDefaults.args, width: 'size-1600'},
 
@@ -153,14 +155,14 @@ export const PropCustomWidth = {
   }
 };
 
-export const PropIconFilter = {
-  render: Template,
+export const PropIconFilter: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'icon: Filter',
   args: {...PropDefaults.args, icon: <Filter />}
 };
 
-export const PropIconNull = {
-  render: Template,
+export const PropIconNull: SearchAutocompleteStory = {
+  render: (args) => <Template {...args} />,
   name: 'icon: null',
   args: {...PropDefaults.args, icon: null}
 };
diff --git a/packages/@react-spectrum/avatar/chromatic-fc/Avatar.stories.tsx b/packages/@react-spectrum/avatar/chromatic-fc/Avatar.stories.tsx
index 858ef304ed4..57776adfdc9 100644
--- a/packages/@react-spectrum/avatar/chromatic-fc/Avatar.stories.tsx
+++ b/packages/@react-spectrum/avatar/chromatic-fc/Avatar.stories.tsx
@@ -13,6 +13,7 @@
 import {Avatar} from '..';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 const SRC_URL_1 =
   'https://mir-s3-cdn-cf.behance.net/project_modules/disp/690bc6105945313.5f84bfc9de488.png';
@@ -22,7 +23,9 @@ export default {
   title: 'Avatar'
 };
 
-export const all = () => (
+export type AvatarStory = StoryFn<typeof Avatar>;
+
+export const all: AvatarStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Default</h2>
     <Avatar src={SRC_URL_1} />
diff --git a/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx b/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx
index 91f788d431f..cabf4c21403 100644
--- a/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx
+++ b/packages/@react-spectrum/avatar/chromatic/Avatar.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Avatar} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {SpectrumAvatarProps} from '@react-types/avatar';
 
 const SRC_URL_1 =
@@ -25,17 +25,19 @@ const meta: Meta<SpectrumAvatarProps> = {
 
 export default meta;
 
-export const Default = {
+export type AvatarStory = StoryObj<typeof Avatar>;
+
+export const Default: AvatarStory = {
   args: {src: SRC_URL_1},
   name: 'default'
 };
 
-export const Disabled = {
+export const Disabled: AvatarStory = {
   args: {isDisabled: true, src: SRC_URL_1},
   name: 'isDisabled'
 };
 
-export const CustomSize = {
+export const CustomSize: AvatarStory = {
   args: {size: 'avatar-size-700', src: SRC_URL_2},
   name: 'with custom size'
 };
diff --git a/packages/@react-spectrum/avatar/src/Avatar.tsx b/packages/@react-spectrum/avatar/src/Avatar.tsx
index c3eee993820..b738e78f60f 100644
--- a/packages/@react-spectrum/avatar/src/Avatar.tsx
+++ b/packages/@react-spectrum/avatar/src/Avatar.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, dimensionValue, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {SpectrumAvatarProps} from '@react-types/avatar';
@@ -24,7 +24,9 @@ const SIZE_RE = /^size-\d+/;
 /**
  * An avatar is a thumbnail representation of an entity, such as a user or an organization.
  */
-export const Avatar = forwardRef(function Avatar(props: SpectrumAvatarProps, ref: DOMRef<HTMLImageElement>) {
+export const Avatar:
+  React.ForwardRefExoticComponent<SpectrumAvatarProps & React.RefAttributes<DOMRefValue<HTMLImageElement>>> =
+forwardRef(function Avatar(props: SpectrumAvatarProps, ref: DOMRef<HTMLImageElement>) {
   props = useSlotProps(props, 'avatar');
   const {
     alt = '',
diff --git a/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx b/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx
index ec25e54bf3c..e4c5bc0273c 100644
--- a/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx
+++ b/packages/@react-spectrum/avatar/stories/Avatar.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Avatar} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {SpectrumAvatarProps} from '@react-types/avatar';
 
 const SRC_URL_1 =
@@ -25,22 +25,24 @@ const meta: Meta<SpectrumAvatarProps> = {
 
 export default meta;
 
-export const Default = {
+export type AvatarStory = StoryObj<typeof Avatar>;
+
+export const Default: AvatarStory = {
   args: {src: SRC_URL_1},
   name: 'default'
 };
 
-export const Disabled = {
+export const Disabled: AvatarStory = {
   args: {isDisabled: true, src: SRC_URL_1},
   name: 'isDisabled'
 };
 
-export const WithAltText = {
+export const WithAltText: AvatarStory = {
   args: {alt: 'Pensive', src: SRC_URL_2},
   name: 'with alt text'
 };
 
-export const CustomSize = {
+export const CustomSize: AvatarStory = {
   args: {...WithAltText.args, size: 'avatar-size-700'},
   name: 'with custom size'
 };
diff --git a/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx b/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx
index b4b94261c7f..d8e97b64dbf 100644
--- a/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx
+++ b/packages/@react-spectrum/badge/chromatic/Badge.stories.tsx
@@ -14,7 +14,7 @@ import {Badge} from '../';
 import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';
 import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Flex} from '@react-spectrum/layout';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumBadgeProps} from '@react-types/badge';
 import {Text} from '@react-spectrum/text';
 
@@ -29,7 +29,7 @@ export default {
   excludeStories: ['renderVariants']
 } as ComponentMeta<typeof Badge>;
 
-export const renderVariants = (args) => (
+export const renderVariants = (args: SpectrumBadgeProps): JSX.Element => (
   <Flex wrap gap={8}>
     {variants.map((variant) => <Badge {...args} variant={variant} />)}
   </Flex>
diff --git a/packages/@react-spectrum/badge/src/Badge.tsx b/packages/@react-spectrum/badge/src/Badge.tsx
index 552c9f56234..e6b7423e131 100644
--- a/packages/@react-spectrum/badge/src/Badge.tsx
+++ b/packages/@react-spectrum/badge/src/Badge.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {SpectrumBadgeProps} from '@react-types/badge';
@@ -23,7 +23,9 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
  */
-export const Badge = forwardRef(function Badge(props: SpectrumBadgeProps, ref: DOMRef<HTMLDivElement>) {
+export const Badge:
+  React.ForwardRefExoticComponent<SpectrumBadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Badge(props: SpectrumBadgeProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     variant,
diff --git a/packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx b/packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx
index 1494697c492..150ff783000 100644
--- a/packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/breadcrumbs/chromatic-fc/Breadcrumbs.stories.tsx
@@ -12,12 +12,15 @@
 
 import {Breadcrumbs} from '../';
 import {Default as ChromaticDefault} from '../chromatic/Breadcrumbs.stories';
+import {Meta, StoryObj} from '@storybook/react';
 
 export default {
   title: 'Breadcrumbs',
   component: Breadcrumbs
-};
+} as Meta<typeof Breadcrumbs>;
+
+export type BreadcrumbsStory = StoryObj<typeof Breadcrumbs>;
 
-export const Default = {
+export const Default: BreadcrumbsStory = {
   ...ChromaticDefault
 };
diff --git a/packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx b/packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx
index 6b02aaf5615..42ea61e9c15 100644
--- a/packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/breadcrumbs/chromatic/Breadcrumbs.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {Breadcrumbs, Item} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 const meta: Meta<typeof Breadcrumbs> = {
@@ -21,8 +21,9 @@ const meta: Meta<typeof Breadcrumbs> = {
 
 export default meta;
 
+export type BreadcrumbsStory = StoryObj<typeof Breadcrumbs>;
 
-export const Default = {
+export const Default: BreadcrumbsStory = {
   args: {
     children: [
       <Item key="Folder 1">The quick brown fox jumps over</Item>,
@@ -36,19 +37,19 @@ export const Default = {
   }
 };
 
-export const IsMultiline = {
+export const IsMultiline: BreadcrumbsStory = {
   args: {...Default.args, isMultiline: true}
 };
 
-export const SizeS = {
+export const SizeS: BreadcrumbsStory = {
   args: {...Default.args, size: 'S'}
 };
 
-export const SizeM = {
+export const SizeM: BreadcrumbsStory = {
   args: {...Default.args, size: 'M'}
 };
 
-export const Truncated = {
+export const Truncated: BreadcrumbsStory = {
   decorators: [
     (Story) => (
       <div style={{width: '100px'}}>
@@ -59,6 +60,6 @@ export const Truncated = {
   args: {...Default.args}
 };
 
-export const ShowRoot = {
+export const ShowRoot: BreadcrumbsStory = {
   args: {...Default.args, showRoot: true}
 };
diff --git a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx
index e74fafb891d..6b7d11a8cd3 100644
--- a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx
@@ -12,7 +12,7 @@
 import {ActionButton} from '@react-spectrum/button';
 import {BreadcrumbItem} from './BreadcrumbItem';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, Key} from '@react-types/shared';
+import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb';
 import {Menu, MenuTrigger} from '@react-spectrum/menu';
 import React, {ReactElement, useCallback, useRef} from 'react';
@@ -28,7 +28,9 @@ const MAX_VISIBLE_ITEMS = 4;
 /**
  * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.
  */
-export const Breadcrumbs = React.forwardRef(function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
+export const Breadcrumbs:
+  React.ForwardRefExoticComponent<SpectrumBreadcrumbsProps<unknown> & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+React.forwardRef(function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
   props = useProviderProps(props);
   let {
     size = 'L',
diff --git a/packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx b/packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx
index 08a56837ab5..8f5188eb7d1 100644
--- a/packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic-fc/ActionButton.stories.tsx
@@ -10,24 +10,73 @@
  * governing permissions and limitations under the License.
  */
 
+import {ActionButton} from '../';
+import Add from '@spectrum-icons/workflow/Add';
 import {Flex} from '@react-spectrum/layout';
-import {IconText, StaticColorBlack, StaticColorWhite} from '../chromatic/ActionButton.stories';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
+import {Text} from '@react-spectrum/text';
+import {View} from '@react-spectrum/view';
 
 export default {
   title: 'Button/ActionButtons'
-};
+} as Meta<typeof ActionButton>;
+
+export type ActionButtonStory = StoryObj<typeof ActionButton>;
 
-export const All = () => (
-  <Flex gap="size-100" direction={'column'}>
-    <h2>icon + text</h2>
-    <IconText />
-    <h2>static color: white</h2>
-    <StaticColorWhite />
-    <h2>static color: black</h2>
-    <StaticColorBlack />
-  </Flex>
-);
-All.story = {
+export const All: ActionButtonStory = {
+  render: () => (
+    <Flex gap="size-100" direction={'column'}>
+      <h2>icon + text</h2>
+      <Flex gap="size-100">
+        <ActionButton>
+          <Add />
+          <Text>Default</Text>
+        </ActionButton>
+        <ActionButton isQuiet>
+          <Add />
+          <Text>Quiet</Text>
+        </ActionButton>
+        <ActionButton isDisabled>
+          <Text>Disabled</Text>
+          <Add />
+        </ActionButton>
+      </Flex>
+      <h2>static color: white</h2>
+      <View backgroundColor="static-blue-700" padding="size-1000">
+        <Flex direction="column" rowGap="size-150">
+          <ActionButton staticColor="white">
+            <Add />
+            <Text>Default</Text>
+          </ActionButton>
+          <ActionButton staticColor="white" isQuiet>
+            <Add />
+            <Text>Quiet</Text>
+          </ActionButton>
+          <ActionButton staticColor="white" isDisabled>
+            <Text>Disabled</Text>
+            <Add />
+          </ActionButton>
+        </Flex>
+      </View>
+      <h2>static color: black</h2>
+      <View backgroundColor="static-yellow-400" padding="size-1000">
+        <Flex direction="column" rowGap="size-150">
+          <ActionButton staticColor="black">
+            <Add />
+            <Text>Default</Text>
+          </ActionButton>
+          <ActionButton staticColor="black" isQuiet>
+            <Add />
+            <Text>Quiet</Text>
+          </ActionButton>
+          <ActionButton staticColor="black" isDisabled>
+            <Text>Disabled</Text>
+            <Add />
+          </ActionButton>
+        </Flex>
+      </View>
+    </Flex>
+  ),
   name: 'all'
 };
diff --git a/packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx b/packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx
index 31118827d91..2848ff1fc58 100644
--- a/packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic-fc/Button.stories.tsx
@@ -10,26 +10,43 @@
  * governing permissions and limitations under the License.
  */
 
-import {ElementA, VariantAccent, VariantNegative, VariantPrimary, WithIcon} from '../chromatic/Button.stories';
+import Bell from '@spectrum-icons/workflow/Bell';
+import {Button} from '../';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {Render} from '../chromatic/Button.stories';
+import {StoryFn} from '@storybook/react';
+import {Text} from '@react-spectrum/text';
 
 export default {
   title: 'Button'
 };
 
-export const All = () => (
+export type ButtonStory = StoryFn<typeof Render>;
+
+export const All: ButtonStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Accent</h2>
-    <VariantAccent />
+    <Render variant="accent" />
     <h2>Primary</h2>
-    <VariantPrimary />
+    <Render variant="primary" />
     <h2>Negative</h2>
-    <VariantNegative />
+    <Render variant="negative" />
     <h2>element a</h2>
-    <ElementA />
+    <Render elementType="a" variant="primary" />
     <h2>with icon</h2>
-    <WithIcon />
+    <Flex gap="size-200">
+      <Button variant="primary">
+        <Bell />
+        <Text>Default</Text>
+      </Button>
+      <Button
+        isDisabled
+        variant="primary">
+        <Text>Disabled</Text>
+        <Bell />
+      </Button>
+    </Flex>
   </Flex>
 );
 All.story = {
diff --git a/packages/@react-spectrum/button/chromatic-fc/LogicButton.stories.tsx b/packages/@react-spectrum/button/chromatic-fc/LogicButton.stories.tsx
index 03c326400f0..76b26cc6d82 100644
--- a/packages/@react-spectrum/button/chromatic-fc/LogicButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic-fc/LogicButton.stories.tsx
@@ -11,19 +11,22 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
-import {LogicVariantAnd, LogicVariantOr} from '../chromatic/LogicButton.stories';
 import React from 'react';
+import {Render} from '../chromatic/LogicButton.stories';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'Button/LogicButton'
 };
 
-export const All = () => (
+export type LogicButtonStory = StoryFn<typeof Render>;
+
+export const All: LogicButtonStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>And</h2>
-    <LogicVariantAnd />
+    <Render variant="and" />
     <h2>Or</h2>
-    <LogicVariantOr />
+    <Render variant="or" />
   </Flex>
 );
 All.story = {
diff --git a/packages/@react-spectrum/button/chromatic-fc/ToggleButton.stories.tsx b/packages/@react-spectrum/button/chromatic-fc/ToggleButton.stories.tsx
index 5aa6773a3d1..1aa5ba59b47 100644
--- a/packages/@react-spectrum/button/chromatic-fc/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic-fc/ToggleButton.stories.tsx
@@ -10,22 +10,63 @@
  * governing permissions and limitations under the License.
  */
 
-import {AllPossibleStates, StaticColorBlack, StaticColorWhite} from '../chromatic/ToggleButton.stories';
-import {Flex} from '@react-spectrum/layout';
+import {classNames} from '@react-spectrum/utils';
+import {Flex, Grid, repeat, View} from '@adobe/react-spectrum';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
+import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
+import {ToggleButton} from '../';
+
+let states = [
+  {isQuiet: true},
+  {isEmphasized: true},
+  {isSelected: true},
+  {isDisabled: true},
+  {UNSAFE_className: classNames(styles, 'is-active')},
+  {UNSAFE_className: classNames(styles, 'is-hovered')},
+  {UNSAFE_className: classNames(styles, 'focus-ring')}
+];
+
+let combinations = generatePowerset(
+  states,
+  (merged) => merged.isDisabled && merged.UNSAFE_className
+);
 
 export default {
   title: 'Button/ToggleButton'
-};
+} as Meta<typeof ToggleButton>;
+
+export type ToggleButtonStory = StoryFn<typeof ToggleButton>;
 
-export const ToggleButton = () => (
+export const AllPossibleStates: ToggleButtonStory = () => (
   <Flex direction={'column'} gap={'size-300'}>
-    <AllPossibleStates />
-    <StaticColorBlack />
-    <StaticColorWhite />
+    <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
+      {combinations.map((c) => (
+        <ToggleButton {...c}>Button</ToggleButton>
+      ))}
+    </Grid>
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
+        {combinations.map((c) => (
+          <ToggleButton {...c} staticColor="black">
+            Button
+          </ToggleButton>
+        ))}
+      </Grid>
+    </View>
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
+        {combinations.map((c) => (
+          <ToggleButton {...c} staticColor="white">
+            Button
+          </ToggleButton>
+        ))}
+      </Grid>
+    </View>
   </Flex>
 );
 
-ToggleButton.story = {
+AllPossibleStates.story = {
   name: 'all'
 };
diff --git a/packages/@react-spectrum/button/chromatic/ActionButton.stories.tsx b/packages/@react-spectrum/button/chromatic/ActionButton.stories.tsx
index 29a722c1215..98d3614df9c 100644
--- a/packages/@react-spectrum/button/chromatic/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/ActionButton.stories.tsx
@@ -13,6 +13,7 @@
 import {ActionButton} from '../';
 import Add from '@spectrum-icons/workflow/Add';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
@@ -22,107 +23,104 @@ export default {
   parameters: {
     chromaticProvider: {locales: ['en-US', 'ar-AE', 'ja-JP']}
   }
-};
+} as Meta<typeof ActionButton>;
 
-export const _Text = () => (
-  <Flex gap="size-100">
-    <ActionButton>
-      Default
-    </ActionButton>
-    <ActionButton isQuiet>
-      Quiet
-    </ActionButton>
-    <ActionButton isDisabled>
-      Disabled
-    </ActionButton>
-  </Flex>
-);
+export type ActionButtonStory = StoryObj<typeof ActionButton>;
 
-_Text.story = {
+export const _Text: ActionButtonStory = {
+  render: () => (
+    <Flex gap="size-100">
+      <ActionButton>
+        Default
+      </ActionButton>
+      <ActionButton isQuiet>
+        Quiet
+      </ActionButton>
+      <ActionButton isDisabled>
+        Disabled
+      </ActionButton>
+    </Flex>
+  ),
   name: 'text'
 };
 
-export const IconText = () => (
-  <Flex gap="size-100">
-    <ActionButton>
-      <Add />
-      <Text>Default</Text>
-    </ActionButton>
-    <ActionButton isQuiet>
-      <Add />
-      <Text>Quiet</Text>
-    </ActionButton>
-    <ActionButton isDisabled>
-      <Text>Disabled</Text>
-      <Add />
-    </ActionButton>
-  </Flex>
-);
-
-IconText.story = {
-  name: 'icon + text'
-};
-
-export const IconOnly = () => (
-  <Flex gap="size-100">
-    <ActionButton>
-      <Add />
-    </ActionButton>
-    <ActionButton isQuiet>
-      <Add />
-    </ActionButton>
-    <ActionButton isDisabled>
-      <Add />
-    </ActionButton>
-  </Flex>
-);
-
-IconOnly.story = {
-  name: 'icon only'
-};
-
-export const StaticColorWhite = () => (
-  <View backgroundColor="static-blue-700" padding="size-1000">
-    <Flex direction="column" rowGap="size-150">
-      <ActionButton staticColor="white">
+export const IconText: ActionButtonStory = {
+  render: () => (
+    <Flex gap="size-100">
+      <ActionButton>
         <Add />
         <Text>Default</Text>
       </ActionButton>
-      <ActionButton staticColor="white" isQuiet>
+      <ActionButton isQuiet>
         <Add />
         <Text>Quiet</Text>
       </ActionButton>
-      <ActionButton staticColor="white" isDisabled>
+      <ActionButton isDisabled>
         <Text>Disabled</Text>
         <Add />
       </ActionButton>
     </Flex>
-  </View>
-);
-
-StaticColorWhite.story = {
-  name: 'staticColor: white'
+  ),
+  name: 'icon + text'
 };
 
-export const StaticColorBlack = () => (
-  <View backgroundColor="static-yellow-400" padding="size-1000">
-    <Flex direction="column" rowGap="size-150">
-      <ActionButton staticColor="black">
+export const IconOnly: ActionButtonStory = {
+  render: () => (
+    <Flex gap="size-100">
+      <ActionButton>
         <Add />
-        <Text>Default</Text>
       </ActionButton>
-      <ActionButton staticColor="black" isQuiet>
+      <ActionButton isQuiet>
         <Add />
-        <Text>Quiet</Text>
       </ActionButton>
-      <ActionButton staticColor="black" isDisabled>
-        <Text>Disabled</Text>
+      <ActionButton isDisabled>
         <Add />
       </ActionButton>
     </Flex>
-  </View>
-);
+  ),
+  name: 'icon only'
+};
+
+export const StaticColorWhite: ActionButtonStory = {
+  render: () => (
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Flex direction="column" rowGap="size-150">
+        <ActionButton staticColor="white">
+          <Add />
+          <Text>Default</Text>
+        </ActionButton>
+        <ActionButton staticColor="white" isQuiet>
+          <Add />
+          <Text>Quiet</Text>
+        </ActionButton>
+        <ActionButton staticColor="white" isDisabled>
+          <Text>Disabled</Text>
+          <Add />
+        </ActionButton>
+      </Flex>
+    </View>
+  ),
+  name: 'staticColor: white'
+};
 
-StaticColorBlack.story = {
+export const StaticColorBlack: ActionButtonStory = {
+  render: () => (
+    <View backgroundColor="static-yellow-400" padding="size-1000">
+      <Flex direction="column" rowGap="size-150">
+        <ActionButton staticColor="black">
+          <Add />
+          <Text>Default</Text>
+        </ActionButton>
+        <ActionButton staticColor="black" isQuiet>
+          <Add />
+          <Text>Quiet</Text>
+        </ActionButton>
+        <ActionButton staticColor="black" isDisabled>
+          <Text>Disabled</Text>
+          <Add />
+        </ActionButton>
+      </Flex>
+    </View>
+  ),
   name: 'staticColor: black'
 };
diff --git a/packages/@react-spectrum/button/chromatic/ActionButtonLanguages.stories.tsx b/packages/@react-spectrum/button/chromatic/ActionButtonLanguages.stories.tsx
index 97b96339d35..360ed8572a2 100644
--- a/packages/@react-spectrum/button/chromatic/ActionButtonLanguages.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/ActionButtonLanguages.stories.tsx
@@ -13,6 +13,7 @@
 import {ActionButton} from '../';
 import Add from '@spectrum-icons/workflow/Add';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
@@ -27,27 +28,28 @@ export default {
       scales: ['large', 'medium']
     }
   }
-};
+} as Meta<typeof ActionButton>;
 
-export const JapaneseIconTextStaticColorWhite = () => (
-  <View backgroundColor="static-blue-700" padding="size-1000">
-    <Flex direction="column" rowGap="size-150">
-      <ActionButton staticColor="white">
-        <Add />
-        <Text>ディフォルト</Text>
-      </ActionButton>
-      <ActionButton staticColor="white" isQuiet>
-        <Add />
-        <Text>静かな</Text>
-      </ActionButton>
-      <ActionButton staticColor="white" isDisabled>
-        <Text>無効</Text>
-        <Add />
-      </ActionButton>
-    </Flex>
-  </View>
-);
+export type ActionButtonStory = StoryObj<typeof ActionButton>;
 
-JapaneseIconTextStaticColorWhite.story = {
+export const JapaneseIconTextStaticColorWhite: ActionButtonStory = {
+  render: () => (
+    <View backgroundColor="static-blue-700" padding="size-1000">
+      <Flex direction="column" rowGap="size-150">
+        <ActionButton staticColor="white">
+          <Add />
+          <Text>ディフォルト</Text>
+        </ActionButton>
+        <ActionButton staticColor="white" isQuiet>
+          <Add />
+          <Text>静かな</Text>
+        </ActionButton>
+        <ActionButton staticColor="white" isDisabled>
+          <Text>無効</Text>
+          <Add />
+        </ActionButton>
+      </Flex>
+    </View>
+  ),
   name: 'Japanese, icon + text, staticColor: white'
 };
diff --git a/packages/@react-spectrum/button/chromatic/Button.stories.tsx b/packages/@react-spectrum/button/chromatic/Button.stories.tsx
index 962f8604758..56802c9674b 100644
--- a/packages/@react-spectrum/button/chromatic/Button.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/Button.stories.tsx
@@ -11,11 +11,12 @@
  */
 
 import Bell from '@spectrum-icons/workflow/Bell';
-import {Button} from '../';
+import {Button, SpectrumButtonProps} from '../';
 import {classNames} from '@react-spectrum/utils';
 import {Flex, Grid, repeat} from '@react-spectrum/layout';
 import {generatePowerset} from '@react-spectrum/story-utils';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {ElementType, JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import {Text} from '@react-spectrum/text';
 import {View} from '@react-spectrum/view';
@@ -37,40 +38,43 @@ export default {
   title: 'Button',
   parameters: {
     chromaticProvider: {locales: ['en-US']}
-  }
-};
+  },
+  excludeStories: ['Render']
+} as Meta<typeof Button>;
+
+export type ButtonStory = StoryFn<typeof Button>;
 
-export const VariantAccent = () => render({variant: 'accent'});
+export const VariantAccent: ButtonStory = () => <Render variant="accent" />;
 
 VariantAccent.story = {
   name: 'variant: accent'
 };
 
-export const VariantPrimary = () => render({variant: 'primary'});
+export const VariantPrimary: ButtonStory = () => <Render variant="primary" />;
 
 VariantPrimary.story = {
   name: 'variant: primary'
 };
 
-export const VariantSecondary = () => render({variant: 'secondary'});
+export const VariantSecondary: ButtonStory = () => <Render variant="secondary" />;
 
 VariantSecondary.story = {
   name: 'variant: secondary'
 };
 
-export const VariantNegative = () => render({variant: 'negative'});
+export const VariantNegative: ButtonStory = () => <Render variant="negative" />;
 
 VariantNegative.story = {
   name: 'variant: negative'
 };
 
-export const ElementA = () => render({elementType: 'a', variant: 'primary'});
+export const ElementA: ButtonStory = () => <Render elementType="a" variant="primary" />;
 
 ElementA.story = {
   name: 'element: a'
 };
 
-export const WithIcon = () => (
+export const WithIcon: ButtonStory = () => (
   <Flex gap="size-200">
     <Button variant="primary">
       <Bell />
@@ -90,7 +94,7 @@ WithIcon.story = {
   parameters: {chromaticProvider: {locales: ['en-US', 'ar-AE']}}
 };
 
-export const IconOnly = () => (
+export const IconOnly: ButtonStory = () => (
   <Flex gap="size-200">
     <Button variant="primary" aria-label="Notifications">
       <Bell />
@@ -109,7 +113,7 @@ IconOnly.story = {
   parameters: {chromaticProvider: {locales: ['en-US', 'ar-AE']}}
 };
 
-export const DoubleTextNode = () => (
+export const DoubleTextNode: ButtonStory = () => (
   <Flex gap="size-200">
     <Button
       variant="primary">
@@ -127,7 +131,7 @@ DoubleTextNode.story = {
   name: 'double text node'
 };
 
-function render(props: any = {}) {
+export function Render<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'accent'}): JSX.Element {
   return (
     <Grid columns={repeat(4, '1fr')} autoFlow="row" justifyItems="start" gap="size-300">
       {combinations.map(c => {
diff --git a/packages/@react-spectrum/button/chromatic/LogicButton.stories.tsx b/packages/@react-spectrum/button/chromatic/LogicButton.stories.tsx
index 900276e66b5..482ffbd4e08 100644
--- a/packages/@react-spectrum/button/chromatic/LogicButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/LogicButton.stories.tsx
@@ -11,26 +11,30 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
-import {LogicButton} from '../';
-import React from 'react';
+import {LogicButton, SpectrumLogicButtonProps} from '../';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 
 export default {
-  title: 'Button/LogicButton'
-};
+  title: 'Button/LogicButton',
+  excludeStories: ['Render']
+} as Meta<typeof LogicButton>;
+
+export type LogicButtonStory = StoryFn<typeof LogicButton>;
 
-export const LogicVariantAnd = () => render({variant: 'and', label: 'and'});
+export const LogicVariantAnd: LogicButtonStory = () => <Render variant="and" />;
 
 LogicVariantAnd.story = {
   name: 'logic variant: and'
 };
 
-export const LogicVariantOr = () => render({variant: 'or', label: 'or'});
+export const LogicVariantOr: LogicButtonStory = () => <Render variant="or" />;
 
 LogicVariantOr.story = {
   name: 'logic variant: or'
 };
 
-function render(props: any = {}) {
+export function Render(props: SpectrumLogicButtonProps = {variant: 'and'}): JSX.Element {
   return (
     <Flex gap="size-100">
       <LogicButton {...props}>
diff --git a/packages/@react-spectrum/button/chromatic/ToggleButton.stories.tsx b/packages/@react-spectrum/button/chromatic/ToggleButton.stories.tsx
index dd74dd54270..41079ad2bf2 100644
--- a/packages/@react-spectrum/button/chromatic/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/button/chromatic/ToggleButton.stories.tsx
@@ -13,6 +13,7 @@
 import {classNames} from '@react-spectrum/utils';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat, View} from '@adobe/react-spectrum';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
 import {ToggleButton} from '../';
@@ -38,9 +39,11 @@ export default {
     providerSwitcher: {status: 'positive'},
     chromatic: {delay: 300}
   }
-};
+} as Meta<typeof ToggleButton>;
+
+export type ToggleButtonStory = StoryFn<typeof ToggleButton>;
 
-export const AllPossibleStates = () => (
+export const AllPossibleStates: ToggleButtonStory = () => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map((c) => (
       <ToggleButton {...c}>Button</ToggleButton>
@@ -52,7 +55,7 @@ AllPossibleStates.story = {
   name: 'all possible states'
 };
 
-export const StaticColorWhite = () => (
+export const StaticColorWhite: ToggleButtonStory = () => (
   <View backgroundColor="static-blue-700" padding="size-1000">
     <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
       {combinations.map((c) => (
@@ -68,7 +71,7 @@ StaticColorWhite.story = {
   name: 'staticColor = white'
 };
 
-export const StaticColorBlack = () => (
+export const StaticColorBlack: ToggleButtonStory = () => (
   <View backgroundColor="static-yellow-400" padding="size-1000">
     <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
       {combinations.map((c) => (
@@ -84,7 +87,7 @@ StaticColorBlack.story = {
   name: 'staticColor = black'
 };
 
-export const Arabic = () => (
+export const Arabic: ToggleButtonStory = () => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map((c) => (
       <ToggleButton {...c}>زر</ToggleButton>
diff --git a/packages/@react-spectrum/button/src/ActionButton.tsx b/packages/@react-spectrum/button/src/ActionButton.tsx
index c7969ddd5b7..747c0f8cec2 100644
--- a/packages/@react-spectrum/button/src/ActionButton.tsx
+++ b/packages/@react-spectrum/button/src/ActionButton.tsx
@@ -12,7 +12,7 @@
 
 import {classNames, ClearSlots, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import CornerTriangle from '@spectrum-icons/ui/CornerTriangle';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -27,7 +27,9 @@ import {useProviderProps} from '@react-spectrum/provider';
  * ActionButtons allow users to perform an action.
  * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
  */
-export const ActionButton = React.forwardRef(function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ActionButton:
+  React.ForwardRefExoticComponent<SpectrumActionButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+React.forwardRef(function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   props = useProviderProps(props);
   props = useSlotProps(props, 'actionButton');
   let textProps = useSlotProps({UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')}, 'text');
diff --git a/packages/@react-spectrum/button/src/ClearButton.tsx b/packages/@react-spectrum/button/src/ClearButton.tsx
index aed43c43639..7caea076b7b 100644
--- a/packages/@react-spectrum/button/src/ClearButton.tsx
+++ b/packages/@react-spectrum/button/src/ClearButton.tsx
@@ -13,7 +13,7 @@
 import {AriaButtonElementTypeProps, ButtonProps} from '@react-types/button';
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import CrossSmall from '@spectrum-icons/ui/CrossSmall';
-import {DOMProps, FocusableRef, StyleProps} from '@react-types/shared';
+import {DOMProps, FocusableRef, FocusableRefValue, StyleProps} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React, {ElementType} from 'react';
@@ -29,7 +29,9 @@ interface ClearButtonProps<T extends ElementType = 'button'> extends ButtonProps
   inset?: boolean
 }
 
-export const ClearButton = React.forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ClearButton:
+  React.ForwardRefExoticComponent<ClearButtonProps<'button'> & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+React.forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   let {
     children = <CrossSmall UNSAFE_className={styles['spectrum-Icon']} />,
     focusClassName,
diff --git a/packages/@react-spectrum/button/src/FieldButton.tsx b/packages/@react-spectrum/button/src/FieldButton.tsx
index a6070f06ea5..a4466b83e70 100644
--- a/packages/@react-spectrum/button/src/FieldButton.tsx
+++ b/packages/@react-spectrum/button/src/FieldButton.tsx
@@ -12,7 +12,7 @@
 
 import {ButtonProps} from '@react-types/button';
 import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMProps, FocusableRef, RefObject, StyleProps} from '@react-types/shared';
+import {DOMProps, FocusableRef, FocusableRefValue, RefObject, StyleProps} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -29,7 +29,9 @@ interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
 }
 
 // @private
-export const FieldButton = React.forwardRef(function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
+export const FieldButton:
+  React.ForwardRefExoticComponent<FieldButtonProps & React.RefAttributes<FocusableRefValue<HTMLElement, HTMLElement>>> =
+React.forwardRef(function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
   props = useSlotProps(props, 'button');
   let {
     isQuiet,
diff --git a/packages/@react-spectrum/button/src/LogicButton.tsx b/packages/@react-spectrum/button/src/LogicButton.tsx
index ce04abf7d85..1fffaff848d 100644
--- a/packages/@react-spectrum/button/src/LogicButton.tsx
+++ b/packages/@react-spectrum/button/src/LogicButton.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -24,7 +24,9 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * A LogicButton displays an operator within a boolean logic sequence.
  */
-export const LogicButton = React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const LogicButton:
+  React.ForwardRefExoticComponent<SpectrumLogicButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   props = useProviderProps(props);
   let {
     variant,
diff --git a/packages/@react-spectrum/button/src/ToggleButton.tsx b/packages/@react-spectrum/button/src/ToggleButton.tsx
index b5356661919..ea6f61e9617 100644
--- a/packages/@react-spectrum/button/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/button/src/ToggleButton.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -27,7 +27,9 @@ import {useToggleState} from '@react-stately/toggle';
  * ToggleButtons allow users to toggle a selection on or off, for example
  * switching between two states or modes.
  */
-export const ToggleButton = React.forwardRef(function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ToggleButton:
+  React.ForwardRefExoticComponent<SpectrumToggleButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+React.forwardRef(function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   props = useProviderProps(props);
   let {
     isQuiet,
diff --git a/packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.stories.tsx b/packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.stories.tsx
index ce2b1ab78ab..5310e3a729c 100644
--- a/packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/buttongroup/chromatic/ButtonGroup.stories.tsx
@@ -11,52 +11,55 @@
  */
 
 import {Button} from '@react-spectrum/button';
-import {ButtonGroup} from '../';
-import React from 'react';
+import {ButtonGroup, SpectrumButtonGroupProps} from '../';
+import React, {JSX} from 'react';
+import {StoryFn} from '@storybook/react';
 import {View} from '@react-spectrum/view';
 
 export default {
   title: 'ButtonGroup'
 };
 
-export const Default = () => render({});
+export type ButtonGroupStory = StoryFn<typeof ButtonGroup>;
+
+export const Default: ButtonGroupStory = () => render({});
 
 Default.story = {
   name: 'default'
 };
 
-export const AlignCenter = () => render({align: 'center'});
+export const AlignCenter: ButtonGroupStory = () => render({align: 'center'});
 
 AlignCenter.story = {
   name: 'align: center'
 };
 
-export const AlignEnd = () => render({align: 'end'});
+export const AlignEnd: ButtonGroupStory = () => render({align: 'end'});
 
 AlignEnd.story = {
   name: 'align: end'
 };
 
-export const OrientationVertical = () => render({orientation: 'vertical'});
+export const OrientationVertical: ButtonGroupStory = () => render({orientation: 'vertical'});
 
 OrientationVertical.story = {
   name: 'orientation: vertical'
 };
 
-export const OrientationVerticalAlignCenter = () =>
+export const OrientationVerticalAlignCenter: ButtonGroupStory = () =>
   render({orientation: 'vertical', align: 'center'});
 
 OrientationVerticalAlignCenter.story = {
   name: 'orientation: vertical, align: center'
 };
 
-export const OrientationVerticalAlignEnd = () => render({orientation: 'vertical', align: 'end'});
+export const OrientationVerticalAlignEnd: ButtonGroupStory = () => render({orientation: 'vertical', align: 'end'});
 
 OrientationVerticalAlignEnd.story = {
   name: 'orientation: vertical, align: end'
 };
 
-function render(props) {
+function render(props: Omit<SpectrumButtonGroupProps, 'children'>): JSX.Element {
   return (
     <>
       <View borderColor="static-blue-400" borderWidth="thin">
diff --git a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx
index f01e328bb8f..89790b3a6ef 100644
--- a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx
+++ b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx
@@ -18,7 +18,7 @@ import {
   useSlotProps,
   useStyleProps
 } from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';
 import {Provider, useProvider, useProviderProps} from '@react-spectrum/provider';
 import React, {useCallback, useRef} from 'react';
@@ -28,7 +28,9 @@ import styles from '@adobe/spectrum-css-temp/components/buttongroup/vars.css';
 /**
  * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
  */
-export const ButtonGroup = React.forwardRef(function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const ButtonGroup:
+  React.ForwardRefExoticComponent<SpectrumButtonGroupProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
   let {scale} = useProvider();
   props = useProviderProps(props);
   props = useSlotProps(props, 'buttonGroup');
diff --git a/packages/@react-spectrum/calendar/chromatic-fc/Calendar.stories.tsx b/packages/@react-spectrum/calendar/chromatic-fc/Calendar.stories.tsx
index 4a254aba4a0..af504234153 100644
--- a/packages/@react-spectrum/calendar/chromatic-fc/Calendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic-fc/Calendar.stories.tsx
@@ -10,29 +10,40 @@
  * governing permissions and limitations under the License.
  */
 
-import {Disabled, DisabledInvalid, ErrorMessage, MinMax, Selected, Unavailable} from '../chromatic/Calendar.stories';
+import {Calendar} from '../';
+import {CalendarDate} from '@internationalized/date';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 export default {
   title: 'Calendar'
-};
+} as Meta<typeof Calendar>;
+
+export type CalendarStory = StoryFn<typeof Calendar>;
 
-export const All = () => (
+const date = new CalendarDate(2022, 2, 3);
+
+export const All: CalendarStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>Selected</h2>
-    <Selected />
+    <Calendar value={date} />
     <h2>Min Max</h2>
-    <MinMax />
+    <Calendar
+      minValue={new CalendarDate(2022, 2, 10)}
+      maxValue={new CalendarDate(2022, 2, 20)} />
     <h2>Disabled</h2>
-    <Disabled />
+    <Calendar isDisabled value={date} />
     <h2>Unavailable</h2>
-    <Unavailable />
+    <Calendar
+      focusedValue={date}
+      isDateUnavailable={date => date.day >= 10 && date.day <= 20} />
     <h2>Error Message</h2>
-    <ErrorMessage />
+    <Calendar value={date} isInvalid errorMessage="Selection invalid." />
     <h2>Disabled Invalid</h2>
-    <DisabledInvalid />
+    <Calendar value={date} minValue={new CalendarDate(2022, 2, 5)} />
   </Flex>
 );
+
 All.story = {
   name: 'all'
 };
diff --git a/packages/@react-spectrum/calendar/chromatic-fc/CalendarCell.stories.tsx b/packages/@react-spectrum/calendar/chromatic-fc/CalendarCell.stories.tsx
index 9cc5311102b..32b7b11c913 100644
--- a/packages/@react-spectrum/calendar/chromatic-fc/CalendarCell.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic-fc/CalendarCell.stories.tsx
@@ -12,13 +12,16 @@
 
 import {AllStates} from '../chromatic/CalendarCell.stories';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'CalendarCell'
-};
+} as Meta<typeof AllStates> ;
+
+export type AllStatesStory = StoryFn<typeof AllStates>;
 
-export const All = () => (
+export const All: AllStatesStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <h2>All States</h2>
     <AllStates />
diff --git a/packages/@react-spectrum/calendar/chromatic/Calendar.stories.tsx b/packages/@react-spectrum/calendar/chromatic/Calendar.stories.tsx
index e7b84703c2d..84f67496a92 100644
--- a/packages/@react-spectrum/calendar/chromatic/Calendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic/Calendar.stories.tsx
@@ -12,6 +12,7 @@
 
 import {Calendar} from '../';
 import {CalendarDate} from '@internationalized/date';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -21,29 +22,31 @@ export default {
       locales: ['en-US'/* , 'ar-EG', 'ja-JP' */]
     }
   }
-};
+} as Meta<typeof Calendar>;
+
+export type CalendarStory = StoryFn<typeof Calendar>;
 
 const date = new CalendarDate(2022, 2, 3);
 
-export const Default = () => <Calendar focusedValue={date} />;
-export const Selected = () => <Calendar value={date} />;
-export const MinMax = () => (
+export const Default: CalendarStory = () => <Calendar focusedValue={date} />;
+export const Selected: CalendarStory = () => <Calendar value={date} />;
+export const MinMax: CalendarStory = () => (
   <Calendar
     minValue={new CalendarDate(2022, 2, 10)}
     maxValue={new CalendarDate(2022, 2, 20)} />
 );
-export const Disabled = () => <Calendar isDisabled value={date} />;
-export const ReadOnly = () => <Calendar isReadOnly value={date} />;
-export const Unavailable = () => (
+export const Disabled: CalendarStory = () => <Calendar isDisabled value={date} />;
+export const ReadOnly: CalendarStory = () => <Calendar isReadOnly value={date} />;
+export const Unavailable: CalendarStory = () => (
   <Calendar
     focusedValue={date}
     isDateUnavailable={date => date.day >= 10 && date.day <= 20} />
 );
-export const VisibleMonths2 = () => <Calendar value={date} visibleMonths={2} />;
-export const VisibleMonths3 = () => <Calendar value={date} visibleMonths={3} />;
-export const Invalid = () => <Calendar value={date} isInvalid />;
-export const ErrorMessage = () => <Calendar value={date} isInvalid errorMessage="Selection invalid." />;
-export const UnavailableInvalid = () => <Calendar value={date} isDateUnavailable={d => d.compare(date) === 0} />;
-export const DisabledInvalid = () => <Calendar value={date} minValue={new CalendarDate(2022, 2, 5)} />;
-export const CustomWeekStartMonday = () => <Calendar value={date} firstDayOfWeek="mon" />;
-export const CustomWeekStartSaturday = () => <Calendar value={date} firstDayOfWeek="sat" />;
+export const VisibleMonths2: CalendarStory = () => <Calendar value={date} visibleMonths={2} />;
+export const VisibleMonths3: CalendarStory = () => <Calendar value={date} visibleMonths={3} />;
+export const Invalid: CalendarStory = () => <Calendar value={date} isInvalid />;
+export const ErrorMessage: CalendarStory = () => <Calendar value={date} isInvalid errorMessage="Selection invalid." />;
+export const UnavailableInvalid: CalendarStory = () => <Calendar value={date} isDateUnavailable={d => d.compare(date) === 0} />;
+export const DisabledInvalid: CalendarStory = () => <Calendar value={date} minValue={new CalendarDate(2022, 2, 5)} />;
+export const CustomWeekStartMonday: CalendarStory = () => <Calendar value={date} firstDayOfWeek="mon" />;
+export const CustomWeekStartSaturday: CalendarStory = () => <Calendar value={date} firstDayOfWeek="sat" />;
diff --git a/packages/@react-spectrum/calendar/chromatic/CalendarCell.stories.tsx b/packages/@react-spectrum/calendar/chromatic/CalendarCell.stories.tsx
index 5bf28ee17fa..a576e17dd9f 100644
--- a/packages/@react-spectrum/calendar/chromatic/CalendarCell.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic/CalendarCell.stories.tsx
@@ -13,14 +13,15 @@
 import {classNames} from '@react-spectrum/utils';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useProvider} from '@react-spectrum/provider';
 
 export default {
   title: 'CalendarCall',
   excludeStories: ['AllStates']
-};
+} as Meta<typeof AllStates>;
 
 let states = [
   {isToday: true},
@@ -38,7 +39,9 @@ let states = [
   {isUnavailable: true}
 ];
 
-export const LightMedium = () => <AllStates />;
+export type AllStatesStory = StoryFn<typeof AllStates>;
+
+export const LightMedium: AllStatesStory = () => <AllStates />;
 LightMedium.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -47,7 +50,7 @@ LightMedium.parameters = {
   }
 };
 
-export const LightLarge = () => <AllStates />;
+export const LightLarge: AllStatesStory = () => <AllStates />;
 LightLarge.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -56,7 +59,7 @@ LightLarge.parameters = {
   }
 };
 
-export const DarkMedium = () => <AllStates />;
+export const DarkMedium: AllStatesStory = () => <AllStates />;
 DarkMedium.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -65,7 +68,7 @@ DarkMedium.parameters = {
   }
 };
 
-export const DarkLarge = () => <AllStates />;
+export const DarkLarge: AllStatesStory = () => <AllStates />;
 DarkLarge.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -74,7 +77,7 @@ DarkLarge.parameters = {
   }
 };
 
-export function AllStates() {
+export function AllStates(): JSX.Element {
   let {scale} = useProvider();
   let size = scale === 'medium' ? 40 : 50;
   return (
diff --git a/packages/@react-spectrum/calendar/chromatic/RangeCalendar.stories.tsx b/packages/@react-spectrum/calendar/chromatic/RangeCalendar.stories.tsx
index 4e71d2b573f..1b264ff8833 100644
--- a/packages/@react-spectrum/calendar/chromatic/RangeCalendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/chromatic/RangeCalendar.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import {CalendarDate, isWeekend} from '@internationalized/date';
+import {Meta, StoryFn} from '@storybook/react';
 import {RangeCalendar} from '../';
 import React from 'react';
 import {useLocale} from '@react-aria/i18n';
@@ -22,34 +23,36 @@ export default {
       locales: ['en-US'/* , 'ar-EG', 'ja-JP' */]
     }
   }
-};
+} as Meta<typeof RangeCalendar>;
+
+export type RangeCalendarStory = StoryFn<typeof RangeCalendar>;
 
 const value = {
   start: new CalendarDate(2022, 2, 3),
   end: new CalendarDate(2022, 2, 8)
 };
 
-export const Default = () => <RangeCalendar focusedValue={value.start} />;
-export const Selected = () => <RangeCalendar value={value} />;
-export const MinMax = () => (
+export const Default: RangeCalendarStory = () => <RangeCalendar focusedValue={value.start} />;
+export const Selected: RangeCalendarStory = () => <RangeCalendar value={value} />;
+export const MinMax: RangeCalendarStory = () => (
   <RangeCalendar
     minValue={new CalendarDate(2022, 2, 10)}
     maxValue={new CalendarDate(2022, 2, 20)} />
 );
-export const Disabled = () => <RangeCalendar isDisabled value={value} />;
-export const ReadOnly = () => <RangeCalendar isReadOnly value={value} />;
-export const Unavailable = () => (
+export const Disabled: RangeCalendarStory = () => <RangeCalendar isDisabled value={value} />;
+export const ReadOnly: RangeCalendarStory = () => <RangeCalendar isReadOnly value={value} />;
+export const Unavailable: RangeCalendarStory = () => (
   <RangeCalendar
     focusedValue={value.start}
     isDateUnavailable={date => date.day >= 10 && date.day <= 20} />
 );
-export const VisibleMonths2 = () => <RangeCalendar value={value} visibleMonths={2} />;
-export const VisibleMonths3 = () => <RangeCalendar value={value} visibleMonths={3} />;
-export const Invalid = () => <RangeCalendar value={value} isInvalid />;
-export const ErrorMessage = () => <RangeCalendar value={value} isInvalid errorMessage="Selection invalid." />;
-export const UnavailableInvalid = () => <RangeCalendar value={value} isDateUnavailable={date => date.day >= 1 && date.day <= 5} />;
-export const DisabledInvalid = () => <RangeCalendar value={value} minValue={new CalendarDate(2022, 2, 5)} />;
-export const NonContiguous = () => {
+export const VisibleMonths2: RangeCalendarStory = () => <RangeCalendar value={value} visibleMonths={2} />;
+export const VisibleMonths3: RangeCalendarStory = () => <RangeCalendar value={value} visibleMonths={3} />;
+export const Invalid: RangeCalendarStory = () => <RangeCalendar value={value} isInvalid />;
+export const ErrorMessage: RangeCalendarStory = () => <RangeCalendar value={value} isInvalid errorMessage="Selection invalid." />;
+export const UnavailableInvalid: RangeCalendarStory = () => <RangeCalendar value={value} isDateUnavailable={date => date.day >= 1 && date.day <= 5} />;
+export const DisabledInvalid: RangeCalendarStory = () => <RangeCalendar value={value} minValue={new CalendarDate(2022, 2, 5)} />;
+export const NonContiguous: RangeCalendarStory = () => {
   let {locale} = useLocale();
   return (
     <RangeCalendar
@@ -59,7 +62,7 @@ export const NonContiguous = () => {
   );
 };
 
-export const NonContiguousInvalid = () => {
+export const NonContiguousInvalid: RangeCalendarStory = () => {
   let {locale} = useLocale();
   return (
     <RangeCalendar
@@ -69,5 +72,5 @@ export const NonContiguousInvalid = () => {
   );
 };
 
-export const CustomWeekStartMonday = () => <RangeCalendar value={value} firstDayOfWeek="mon" />;
-export const CustomWeekStartSaturday = () => <RangeCalendar value={value} firstDayOfWeek="sat" />;
+export const CustomWeekStartMonday: RangeCalendarStory = () => <RangeCalendar value={value} firstDayOfWeek="mon" />;
+export const CustomWeekStartSaturday: RangeCalendarStory = () => <RangeCalendar value={value} firstDayOfWeek="sat" />;
diff --git a/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx b/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx
index 15e8763b7ac..120f79faffd 100644
--- a/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx
@@ -1,7 +1,8 @@
 import {classNames} from '@react-spectrum/utils';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 
 let states = [
@@ -20,10 +21,36 @@ let states = [
 
 export default {
   title: 'Date and Time/RangeCalendar/cell'
-};
+} as Meta<typeof Cell>;
+
+export type CellStory = StoryObj<typeof Cell>;
 
 // Fake cell for testing css
-function Cell({isToday, isSelected, isFocused, isHovered, isPressed, isDisabled, isRangeStart, isRangeEnd, isRangeSelection, isSelectionStart, isSelectionEnd}) {
+function Cell({
+  isToday,
+  isSelected,
+  isFocused,
+  isHovered,
+  isPressed,
+  isDisabled,
+  isRangeStart,
+  isRangeEnd,
+  isRangeSelection,
+  isSelectionStart,
+  isSelectionEnd
+}: {
+  isToday: boolean,
+  isSelected: boolean,
+  isFocused: boolean,
+  isHovered: boolean,
+  isPressed: boolean,
+  isDisabled: boolean,
+  isRangeStart: boolean,
+  isRangeEnd: boolean,
+  isRangeSelection: boolean,
+  isSelectionStart: boolean,
+  isSelectionEnd: boolean
+}): JSX.Element {
   return (
     <span
       className={classNames(styles, 'spectrum-Calendar-date', {
@@ -44,7 +71,7 @@ function Cell({isToday, isSelected, isFocused, isHovered, isPressed, isDisabled,
   );
 }
 
-export const Default = {
+export const Default: CellStory = {
   render: () => (
     <Grid columns={repeat(10, 100)}>
       {generatePowerset(states, (merged) =>

From 868a2b4e0bdabea4038fdfa6108fb9e823d4e6ea Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 09:27:18 +1000
Subject: [PATCH 02/19] card

---
 .../card/chromatic-fc/CardView.stories.tsx    |  7 ++++--
 .../card/chromatic-fc/QuietCard.stories.tsx   |  2 +-
 .../card/chromatic/Card.stories.tsx           |  4 ++--
 .../card/chromatic/CardView.stories.tsx       | 23 +++++++++----------
 .../card/chromatic/QuietCard.stories.tsx      | 22 +++++++++---------
 .../@react-spectrum/card/src/CardBase.tsx     |  6 +++--
 .../card/src/CardViewContext.tsx              |  2 +-
 .../card/stories/GalleryCardView.stories.tsx  |  8 +++----
 .../card/stories/GridCardView.stories.tsx     | 22 +++++++++---------
 .../card/stories/HorizontalCard.stories.tsx   |  4 ++--
 .../card/stories/QuietCard.stories.tsx        |  4 ++--
 .../stories/WaterfallCardView.stories.tsx     |  6 ++---
 .../@react-spectrum/card/stories/utils.ts     |  6 ++---
 13 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
index 394c4ad639e..d074fc8dd6a 100644
--- a/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic-fc/CardView.stories.tsx
@@ -11,8 +11,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {CardView} from '../';
 import {DefaultGrid as DefaultGridStory} from '../chromatic/CardView.stories';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {SpectrumCardViewProps} from '@react-types/card';
 
 const meta: Meta<SpectrumCardViewProps<object>> = {
@@ -21,4 +22,6 @@ const meta: Meta<SpectrumCardViewProps<object>> = {
 
 export default meta;
 
-export const DefaultGrid = DefaultGridStory;
+export type CardViewStory = StoryObj<typeof CardView>;
+
+export const DefaultGrid: CardViewStory = DefaultGridStory;
diff --git a/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx b/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
index 4f3f26f2a02..8d157acbfd2 100644
--- a/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic-fc/QuietCard.stories.tsx
@@ -31,7 +31,7 @@ export const Quiet: CardStory = {
   ...Default
 };
 
-export const QuietSelected = {
+export const QuietSelected: CardStory = {
   ...Selected,
   name: 'Selected'
 };
diff --git a/packages/@react-spectrum/card/chromatic/Card.stories.tsx b/packages/@react-spectrum/card/chromatic/Card.stories.tsx
index 04ebd6e6031..b6765727e5e 100644
--- a/packages/@react-spectrum/card/chromatic/Card.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/Card.stories.tsx
@@ -30,7 +30,7 @@ export default {
 
 export type CardStory = ComponentStoryObj<typeof Card>;
 
-export const Default = DefaultCard;
+export const Default: CardStory = DefaultCard;
 
 export const DefaultSquare: CardStory = {
   ...Default,
@@ -257,7 +257,7 @@ export const Selected: CardStory = SelectedStory;
 
 // actually use Illustration???
 // where to get the three asset svgs to use with Illustration
-export function File(props) {
+export function File(props: any): JSX.Element {
   props = useSlotProps(props, 'asset');
   let {styleProps} = useStyleProps(props);
   return (
diff --git a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
index 804d825b1d3..50d06991528 100644
--- a/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/CardView.stories.tsx
@@ -15,8 +15,8 @@ import {Card, CardView, GalleryLayout, GridLayout, WaterfallLayout} from '..';
 import {Content} from '@react-spectrum/view';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
-import {Meta} from '@storybook/react';
-import React, {useMemo} from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX, useMemo} from 'react';
 import {SpectrumCardViewProps} from '@react-types/card';
 import {useCollator} from '@react-aria/i18n';
 
@@ -26,6 +26,8 @@ const meta: Meta<SpectrumCardViewProps<object>> = {
 
 export default meta;
 
+export type CardViewStory = StoryObj<typeof CardView>;
+
 let itemsLowVariance = [
   {width: 1001, height: 381, src: 'https://i.imgur.com/Z7AzH2c.jpg', id: 1, title: 'Bob 1'},
   {width: 640, height: 640, src: 'https://i.imgur.com/DhygPot.jpg', id: 2, title: 'Joe 1'},
@@ -51,7 +53,7 @@ let itemsLowVariance = [
   {width: 314, height: 1009, src: 'https://i.imgur.com/3lzeoK7.jpg', id: 22, title: 'Bob 8'}
 ];
 
-function DynamicCardView(props: SpectrumCardViewProps<object>) {
+function DynamicCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let gridLayout = useMemo(() => new GridLayout({collator}), [collator]);
   let {
@@ -73,20 +75,17 @@ function DynamicCardView(props: SpectrumCardViewProps<object>) {
   );
 }
 
-const Template = (props) =>
-  <DynamicCardView {...props} />;
-
-export const DefaultGrid = {
-  render: Template,
+export const DefaultGrid: CardViewStory = {
+  render: (args) => <DynamicCardView {...args} />,
   args: {items: itemsLowVariance}
 };
 
-export const DefaultGallery = {
-  render: Template,
+export const DefaultGallery: CardViewStory = {
+  render: (args) => <DynamicCardView {...args} />,
   args: {items: itemsLowVariance, layout: GalleryLayout}
 };
 
-export const DefaultWaterfall = {
-  render: Template,
+export const DefaultWaterfall: CardViewStory = {
+  render: (args) => <DynamicCardView {...args} />,
   args: {items: itemsLowVariance, layout: WaterfallLayout}
 };
diff --git a/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx b/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
index abc9390c752..8e1720253e6 100644
--- a/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
+++ b/packages/@react-spectrum/card/chromatic/QuietCard.stories.tsx
@@ -41,47 +41,47 @@ export const Quiet: CardStory = {
   ...Default
 };
 
-export const QuietSquare = {
+export const QuietSquare: CardStory = {
   ...DefaultSquare
 };
 
-export const QuietTall = {
+export const QuietTall: CardStory = {
   ...DefaultTall
 };
 
-export const QuietNoDescription = {
+export const QuietNoDescription: CardStory = {
   ...NoDescription
 };
 
-export const QuietNoDescriptionSquare = {
+export const QuietNoDescriptionSquare: CardStory = {
   ...NoDescriptionSquare
 };
 
-export const QuietWithIllustration = {
+export const QuietWithIllustration: CardStory = {
   ...WithIllustration
 };
 
-export const QuietLongTitle = {
+export const QuietLongTitle: CardStory = {
   ...LongTitle
 };
 
-export const QuietLongDescription = {
+export const QuietLongDescription: CardStory = {
   ...LongDescription
 };
 
-export const QuietLongContentPoorWordSize = {
+export const QuietLongContentPoorWordSize: CardStory = {
   ...LongContentPoorWordSize
 };
 
-export const QuietLongDetail = {
+export const QuietLongDetail: CardStory = {
   ...LongDetail
 };
 
-export const QuietLongEverything = {
+export const QuietLongEverything: CardStory = {
   ...LongEverything
 };
 
-export const QuietSelected = {
+export const QuietSelected: CardStory = {
   ...Selected,
   name: 'Selected'
 };
diff --git a/packages/@react-spectrum/card/src/CardBase.tsx b/packages/@react-spectrum/card/src/CardBase.tsx
index 3efd75dd3f9..ec9fd7d1501 100644
--- a/packages/@react-spectrum/card/src/CardBase.tsx
+++ b/packages/@react-spectrum/card/src/CardBase.tsx
@@ -14,7 +14,7 @@
 import {AriaCardProps, SpectrumCardProps} from '@react-types/card';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, Node} from '@react-types/shared';
+import {DOMRef, DOMRefValue, Node} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';
 import {FocusRing, getFocusableTreeWalker} from '@react-aria/focus';
 import React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';
@@ -31,7 +31,9 @@ interface CardBaseProps<T> extends SpectrumCardProps {
 /**
  * TODO: Add description of component here.
  */
-export const CardBase = React.forwardRef(function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const CardBase:
+  React.ForwardRefExoticComponent<CardBaseProps<object> & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
   let {state} = context;
diff --git a/packages/@react-spectrum/card/src/CardViewContext.tsx b/packages/@react-spectrum/card/src/CardViewContext.tsx
index e474bafe3a5..2fca6017943 100644
--- a/packages/@react-spectrum/card/src/CardViewContext.tsx
+++ b/packages/@react-spectrum/card/src/CardViewContext.tsx
@@ -20,7 +20,7 @@ export interface CardViewContextValue {
   cardOrientation: 'horizontal' | 'vertical',
   renderEmptyState: () => React.ReactNode
 }
-export const CardViewContext = React.createContext<CardViewContextValue>(null);
+export const CardViewContext: React.Context<CardViewContextValue> = React.createContext<CardViewContextValue>(null);
 
 export function useCardViewContext(): CardViewContextValue | null {
   return useContext(CardViewContext);
diff --git a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
index bb59b03f79b..84e5a73fa9a 100644
--- a/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/GalleryCardView.stories.tsx
@@ -30,9 +30,9 @@ import {
   StaticCardViewStory
 } from './GridCardView.stories';
 import {CardView, GalleryLayout} from '../';
-import {ComponentStoryObj} from '@storybook/react';
+import {ComponentStoryObj, Meta} from '@storybook/react';
 import {GalleryLayoutOptions} from '../src/GalleryLayout';
-import React, {useMemo} from 'react';
+import React, {JSX, useMemo} from 'react';
 import {Size} from '@react-stately/virtualizer';
 import {SpectrumCardViewProps} from '@react-types/card';
 import {useCollator} from '@react-aria/i18n';
@@ -97,7 +97,7 @@ export default {
       options: ['none', 'single', 'multiple']
     }
   }
-};
+} as Meta<typeof CardView>;
 
 export const DefaultGalleryStatic: StaticCardViewStory = {
   ...StaticCards,
@@ -216,7 +216,7 @@ interface LayoutOptions {
   layoutOptions?: GalleryLayoutOptions
 }
 type CustomGalleryLayoutStory = ComponentStoryObj<typeof CustomGalleryLayout>;
-function CustomGalleryLayout(props: SpectrumCardViewProps<object> & LayoutOptions) {
+function CustomGalleryLayout(props: SpectrumCardViewProps<object> & LayoutOptions): JSX.Element {
   let {
     layoutOptions,
     ...otherProps
diff --git a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
index 12b78121a15..e1a44a15f37 100644
--- a/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/GridCardView.stories.tsx
@@ -14,7 +14,7 @@
 import {action} from '@storybook/addon-actions';
 import {ActionButton} from '@react-spectrum/button';
 import {Card, CardView, GridLayout} from '../';
-import {ComponentStoryObj} from '@storybook/react';
+import {ComponentStoryObj, JSX, Meta} from '@storybook/react';
 import {Content, View} from '@react-spectrum/view';
 import {Flex} from '@react-spectrum/layout';
 import {getImageFullData} from './utils';
@@ -61,7 +61,7 @@ export let falsyItems = [
   {id: 0, width: 1001, height: 381, src: 'https://i.imgur.com/Z7AzH2c.jpg', title: 'Bob 1'},
   {id: 1, width: 640, height: 640, src: 'https://i.imgur.com/DhygPot.jpg', title: 'Joe 1 really really really really really really really really really really really really long'},
   {id: 2, width: 182, height: 1009, src: 'https://i.imgur.com/L7RTlvI.png', title: 'Jane 1'}
-];
+] as const;
 
 function renderEmptyState() {
   return (
@@ -95,7 +95,7 @@ export default {
       options: ['none', 'single', 'multiple']
     }
   }
-} as ComponentStoryObj<typeof CardView>;
+} as Meta<typeof CardView>;
 
 let onSelectionChange = action('onSelectionChange');
 let actions = {
@@ -202,7 +202,7 @@ export const CustomLayoutOptions: CustomLayoutStory = {
 };
 
 export type CardViewIdKeysStory = ComponentStoryObj<typeof CardViewIdKeys>;
-function CardViewIdKeys(props: SpectrumCardViewProps<object>) {
+function CardViewIdKeys(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -236,7 +236,7 @@ function CardViewIdKeys(props: SpectrumCardViewProps<object>) {
 }
 
 export type DynamicCardViewStory = ComponentStoryObj<typeof DynamicCardView>;
-function DynamicCardView(props: SpectrumCardViewProps<object>) {
+function DynamicCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -283,7 +283,7 @@ function DynamicCardView(props: SpectrumCardViewProps<object>) {
 }
 
 export type ControlledCardViewStory = ComponentStoryObj<typeof ControlledCardView>;
-function ControlledCardView(props: SpectrumCardViewProps<object>) {
+function ControlledCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -332,7 +332,7 @@ function ControlledCardView(props: SpectrumCardViewProps<object>) {
 }
 
 export type NoItemCardViewStory = ComponentStoryObj<typeof NoItemCardView>;
-function NoItemCardView(props: SpectrumCardViewProps<object>) {
+function NoItemCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -366,7 +366,7 @@ function NoItemCardView(props: SpectrumCardViewProps<object>) {
 }
 
 export type StaticCardViewStory = ComponentStoryObj<typeof StaticCardView>;
-function StaticCardView(props: SpectrumCardViewProps<object>) {
+function StaticCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let cardOrientation = props.cardOrientation || 'vertical';
@@ -420,7 +420,7 @@ function StaticCardView(props: SpectrumCardViewProps<object>) {
 }
 
 export type AsyncLoadingCardViewStory = ComponentStoryObj<typeof AsyncLoadingCardView>;
-function AsyncLoadingCardView(props: SpectrumCardViewProps<object>) {
+function AsyncLoadingCardView(props: SpectrumCardViewProps<object>): JSX.Element {
   interface StarWarsChar {
     name: string,
     url: string
@@ -478,7 +478,7 @@ interface LayoutOptions {
   layoutOptions?: GridLayoutOptions
 }
 export type CustomLayoutStory = ComponentStoryObj<typeof CustomLayout>;
-export function CustomLayout(props: SpectrumCardViewProps<object> & LayoutOptions) {
+export function CustomLayout(props: SpectrumCardViewProps<object> & LayoutOptions): JSX.Element {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let layoutOptions = props.layoutOptions;
@@ -526,7 +526,7 @@ export function CustomLayout(props: SpectrumCardViewProps<object> & LayoutOption
   );
 }
 
-export function ResizeObserverCrash() {
+export function ResizeObserverCrash(): JSX.Element {
   const shots = [
     {id: 1, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'foo', label: 'foo'},
     {id: 2, src: 'https://i.imgur.com/Z7AzH2c.jpg', alt: 'bar', label: 'bar'},
diff --git a/packages/@react-spectrum/card/stories/HorizontalCard.stories.tsx b/packages/@react-spectrum/card/stories/HorizontalCard.stories.tsx
index 34e7f7949d9..156906e6af6 100644
--- a/packages/@react-spectrum/card/stories/HorizontalCard.stories.tsx
+++ b/packages/@react-spectrum/card/stories/HorizontalCard.stories.tsx
@@ -13,12 +13,12 @@
 
 import {Card} from '../index';
 import {CardStory} from './Card.stories';
-import {ComponentMeta} from '@storybook/react';
 import {Content} from '@react-spectrum/view';
 import {getImage} from '../stories/utils';
 import {Heading, Text} from '@react-spectrum/text';
 import {Horizontal} from '../chromatic/HorizontalCard.stories';
 import {Image} from '@react-spectrum/image';
+import {Meta} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -39,7 +39,7 @@ export default {
       }
     }
   }
-} as ComponentMeta<typeof Card>;
+} as Meta<typeof Card>;
 
 export const CardGrid: CardStory = {
   render: (args, context) => <Card {...args} {...context} id={null} />,
diff --git a/packages/@react-spectrum/card/stories/QuietCard.stories.tsx b/packages/@react-spectrum/card/stories/QuietCard.stories.tsx
index e1f14600600..c32e4b44cda 100644
--- a/packages/@react-spectrum/card/stories/QuietCard.stories.tsx
+++ b/packages/@react-spectrum/card/stories/QuietCard.stories.tsx
@@ -14,12 +14,12 @@
 import {Card} from '../index';
 import {CardStory} from './Card.stories';
 import {classNames} from '@react-spectrum/utils';
-import {ComponentMeta} from '@storybook/react';
 import {Content} from '@react-spectrum/view';
 import {File} from '../chromatic/Card.stories';
 import {getDescription, getImage} from '../stories/utils';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
+import {Meta} from '@storybook/react';
 import {Quiet} from '../chromatic/QuietCard.stories';
 import React from 'react';
 import styles from '@adobe/spectrum-css-temp/components/card/vars.css';
@@ -47,7 +47,7 @@ export default {
       }
     }
   }
-} as ComponentMeta<typeof Card>;
+} as Meta<typeof Card>;
 
 export const CardGrid: CardStory = {
   render: (args, context) => <Card {...args} {...context} id={null} />,
diff --git a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
index 0cc0554cc1c..d07f3caab65 100644
--- a/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
+++ b/packages/@react-spectrum/card/stories/WaterfallCardView.stories.tsx
@@ -30,7 +30,7 @@ import {
   StaticCardViewStory
 } from './GridCardView.stories';
 import {CardView, WaterfallLayout} from '../';
-import {ComponentStoryObj} from '@storybook/react';
+import {ComponentStoryObj, Meta} from '@storybook/react';
 import React, {useMemo} from 'react';
 import {Size} from '@react-stately/virtualizer';
 import {SpectrumCardViewProps} from '@react-types/card';
@@ -86,7 +86,7 @@ export default {
       options: ['none', 'single', 'multiple']
     }
   }
-} as ComponentStoryObj<typeof CardView>;
+} as Meta<typeof CardView>;
 
 export const DefaultWaterfallStatic: StaticCardViewStory = {
   ...StaticCards,
@@ -215,7 +215,7 @@ interface LayoutOptions {
 }
 
 type CustomWaterfallLayoutStory = ComponentStoryObj<typeof CustomWaterfallLayout>;
-function CustomWaterfallLayout(props: SpectrumCardViewProps<object> & LayoutOptions) {
+function CustomWaterfallLayout(props: SpectrumCardViewProps<object> & LayoutOptions): JSX.Element {
   let {
     layoutOptions,
     ...otherProps
diff --git a/packages/@react-spectrum/card/stories/utils.ts b/packages/@react-spectrum/card/stories/utils.ts
index f6183c330d1..53d4c207fdb 100644
--- a/packages/@react-spectrum/card/stories/utils.ts
+++ b/packages/@react-spectrum/card/stories/utils.ts
@@ -16,14 +16,14 @@ let descriptions = [
   'Rechtsschutzversicherungsgesellschaften Nahrungsmittelunverträglichkeit Unabhängigkeitserklärungen Freundschaftsbeziehungen'
 ];
 
-export function getImage(index: number) {
+export function getImage(index: number): string {
   return images[index % images.length].src;
 }
 
-export function getImageFullData(index: number) {
+export function getImageFullData(index: number): {width: number, height: number, src: string} {
   return images[index % images.length];
 }
 
-export function getDescription(index: number) {
+export function getDescription(index: number): string {
   return descriptions[index % descriptions.length];
 }

From d1dd456335deb6b5899c46eb188eced075385ddb Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 09:57:45 +1000
Subject: [PATCH 03/19] checkbox

---
 .../chromatic-fc/Checkbox.stories.tsx         | 16 ++++--
 .../checkbox/chromatic/Checkbox.stories.tsx   | 42 +++++++-------
 .../chromatic/CheckboxGroup.stories.tsx       | 57 ++++++++++---------
 .../@react-spectrum/checkbox/src/Checkbox.tsx |  6 +-
 .../checkbox/src/CheckboxGroup.tsx            |  6 +-
 .../@react-spectrum/checkbox/src/context.ts   |  2 +-
 6 files changed, 72 insertions(+), 57 deletions(-)

diff --git a/packages/@react-spectrum/checkbox/chromatic-fc/Checkbox.stories.tsx b/packages/@react-spectrum/checkbox/chromatic-fc/Checkbox.stories.tsx
index 37c6dca69bf..c5173392881 100644
--- a/packages/@react-spectrum/checkbox/chromatic-fc/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/checkbox/chromatic-fc/Checkbox.stories.tsx
@@ -11,32 +11,36 @@
  * governing permissions and limitations under the License.
  */
 
-import {Default as DefaultStory, IsDisabledTrue, IsEmphasizedTrue, ValidationStateInvalid} from '../chromatic/Checkbox.stories';
+import {Checkbox} from '../';
 import {Flex} from '@react-spectrum/layout';
 import React from 'react';
+import {Render} from '../chromatic/Checkbox.stories';
+import {StoryFn} from '@storybook/react';
 import {View} from '@react-spectrum/view';
 
 export default {
   title: 'Checkbox'
 };
 
-export const Default = () => (
+export type CheckboxStory = StoryFn<typeof Checkbox>;
+
+export const Default: CheckboxStory = () => (
   <Flex gap="size-100" direction={'column'}>
     <View>
       <h2>Default</h2>
-      <DefaultStory />
+      <Render />
     </View>
     <View>
       <h2>Invalid</h2>
-      <ValidationStateInvalid />
+      <Render isInvalid />
     </View>
     <View>
       <h2>Disabled</h2>
-      <IsDisabledTrue />
+      <Render isDisabled />
     </View>
     <View>
       <h2>Emphasized</h2>
-      <IsEmphasizedTrue />
+      <Render isEmphasized />
     </View>
   </Flex>
 );
diff --git a/packages/@react-spectrum/checkbox/chromatic/Checkbox.stories.tsx b/packages/@react-spectrum/checkbox/chromatic/Checkbox.stories.tsx
index 17f84e885f1..ccc9af6e68d 100644
--- a/packages/@react-spectrum/checkbox/chromatic/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/checkbox/chromatic/Checkbox.stories.tsx
@@ -10,60 +10,64 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox} from '../';
-import React from 'react';
+import {Checkbox, SpectrumCheckboxProps} from '../';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {View} from '@react-spectrum/view';
 
 export default {
-  title: 'Checkbox'
-};
+  title: 'Checkbox',
+  excludeStories: ['Render', 'RenderCustomLabel', 'RenderNoLabel']
+} as Meta<typeof Checkbox>;
+
+export type CheckboxStory = StoryFn<typeof Checkbox>;
 
-export const Default = () => render();
-export const ValidationStateInvalid = () => render({isInvalid: true});
+export const Default: CheckboxStory = () => <Render />;
+export const ValidationStateInvalid: CheckboxStory = () => <Render isInvalid />;
 
 ValidationStateInvalid.story = {
   name: 'validationState: "invalid"'
 };
 
-export const IsDisabledTrue = () => render({isDisabled: true});
+export const IsDisabledTrue: CheckboxStory = () => <Render isDisabled />;
 
 IsDisabledTrue.story = {
   name: 'isDisabled: true'
 };
 
-export const IsEmphasizedTrue = () => render({isEmphasized: true});
+export const IsEmphasizedTrue: CheckboxStory = () => <Render isEmphasized />;
 
 IsEmphasizedTrue.story = {
   name: 'isEmphasized: true'
 };
 
-export const IsEmphasizedTrueValidationStateInvalid = () =>
-  render({isEmphasized: true, isInvalid: true});
+export const IsEmphasizedTrueValidationStateInvalid: CheckboxStory = () =>
+  <Render isEmphasized isInvalid />;
 
 IsEmphasizedTrueValidationStateInvalid.story = {
   name: 'isEmphasized: true, validationState: "invalid"'
 };
 
-export const IsEmphasizedTrueIsDisabledTrue = () =>
-  render({isEmphasized: true, isDisabled: true});
+export const IsEmphasizedTrueIsDisabledTrue: CheckboxStory = () =>
+  <Render isEmphasized isDisabled />;
 
 IsEmphasizedTrueIsDisabledTrue.story = {
   name: 'isEmphasized: true, isDisabled: true'
 };
 
-export const IsReadOnlyTrue = () => render({isReadOnly: true});
+export const IsReadOnlyTrue: CheckboxStory = () => <Render isReadOnly />;
 
 IsReadOnlyTrue.story = {
   name: 'isReadOnly: true'
 };
 
-export const CustomLabel = () => renderCustomLabel();
+export const CustomLabel: CheckboxStory = () => <RenderCustomLabel />;
 
 CustomLabel.story = {
   name: 'custom label'
 };
 
-export const LongLabel = () => (
+export const LongLabel: CheckboxStory = () => (
   <View width="size-2000">
     <Checkbox>
       Super long checkbox label. Sample text. Arma virumque cano, Troiae qui primus ab oris.
@@ -75,14 +79,14 @@ LongLabel.story = {
   name: 'long label'
 };
 
-export const NoLabel = () => renderNoLabel({'aria-label': 'This checkbox has no visible label'});
+export const NoLabel: CheckboxStory = () => <RenderNoLabel aria-label="This checkbox has no visible label" />;
 
 NoLabel.story = {
   name: 'no label'
 };
 
 // need selected + indeterminate because there is a sibling selector `checked + ...` so being careful
-function render(props = {}) {
+export function Render(props: SpectrumCheckboxProps): JSX.Element {
   return (
     <>
       <Checkbox {...props}>Label</Checkbox>
@@ -99,7 +103,7 @@ function render(props = {}) {
   );
 }
 
-function renderCustomLabel(props = {}) {
+export function RenderCustomLabel(props: SpectrumCheckboxProps): JSX.Element {
   return (
     <>
       <Checkbox {...props}>
@@ -116,7 +120,7 @@ function renderCustomLabel(props = {}) {
   );
 }
 
-function renderNoLabel(props = {}) {
+export function RenderNoLabel(props: SpectrumCheckboxProps): JSX.Element {
   return (
     <>
       <Checkbox {...props} />
diff --git a/packages/@react-spectrum/checkbox/chromatic/CheckboxGroup.stories.tsx b/packages/@react-spectrum/checkbox/chromatic/CheckboxGroup.stories.tsx
index b58fbfa4171..166d20a06e8 100644
--- a/packages/@react-spectrum/checkbox/chromatic/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/checkbox/chromatic/CheckboxGroup.stories.tsx
@@ -13,70 +13,73 @@
 import {Checkbox, CheckboxGroup, SpectrumCheckboxGroupProps} from '..';
 import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
 import React from 'react';
+import {StoryFn} from '@storybook/react';
 
 export default {
   title: 'CheckboxGroup'
 };
 
-export const Default = () => render();
-export const DefaultValueDragons = () => render({defaultValue: ['dragons']});
+export type CheckboxGroupStory = StoryFn<typeof CheckboxGroup>;
+
+export const Default: CheckboxGroupStory = () => render();
+export const DefaultValueDragons: CheckboxGroupStory = () => render({defaultValue: ['dragons']});
 
 DefaultValueDragons.story = {
   name: 'defaultValue: dragons'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'});
+export const LabelPositionSide: CheckboxGroupStory = () => render({labelPosition: 'side'});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEnd = () => render({labelAlign: 'end'});
+export const LabelAlignEnd: CheckboxGroupStory = () => render({labelAlign: 'end'});
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const Horizontal = () => render({orientation: 'horizontal'});
+export const Horizontal: CheckboxGroupStory = () => render({orientation: 'horizontal'});
 
 Horizontal.story = {
   name: 'horizontal'
 };
 
-export const HorizontalLabelPositionSide = () =>
+export const HorizontalLabelPositionSide: CheckboxGroupStory = () =>
   render({orientation: 'horizontal', labelPosition: 'side'});
 
 HorizontalLabelPositionSide.story = {
   name: 'horizontal, labelPosition: side'
 };
 
-export const HorizontalLabelAlignEnd = () =>
+export const HorizontalLabelAlignEnd: CheckboxGroupStory = () =>
   render({orientation: 'horizontal', labelAlign: 'end'});
 
 HorizontalLabelAlignEnd.story = {
   name: 'horizontal, labelAlign: end'
 };
 
-export const IsDisabled = () => render({isDisabled: true});
+export const IsDisabled: CheckboxGroupStory = () => render({isDisabled: true});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsDisabledOnOneCheckbox = () => render({}, [{}, {isDisabled: true}, {}]);
+export const IsDisabledOnOneCheckbox: CheckboxGroupStory = () => render({}, [{}, {isDisabled: true}, {}]);
 
 IsDisabledOnOneCheckbox.story = {
   name: 'isDisabled on one checkbox'
 };
 
-export const IsDisabledTwoCheckboxesAndOneChecked = () =>
+export const IsDisabledTwoCheckboxesAndOneChecked: CheckboxGroupStory = () =>
   render({defaultValue: ['dragons']}, [{}, {isDisabled: true}, {isDisabled: true}]);
 
 IsDisabledTwoCheckboxesAndOneChecked.story = {
   name: 'isDisabled two checkboxes and one checked'
 };
 
-export const IsEmphasizedIsDisabledTwoCheckboxesAndOneChecked = () =>
+export const IsEmphasizedIsDisabledTwoCheckboxesAndOneChecked: CheckboxGroupStory = () =>
   render({isEmphasized: true, defaultValue: ['dragons']}, [
     {},
     {isDisabled: true},
@@ -87,65 +90,65 @@ IsEmphasizedIsDisabledTwoCheckboxesAndOneChecked.story = {
   name: 'isEmphasized, isDisabled two checkboxes and one checked'
 };
 
-export const IsDisabledOnOneCheckboxHorizontal = () =>
+export const IsDisabledOnOneCheckboxHorizontal: CheckboxGroupStory = () =>
   render({orientation: 'horizontal'}, [{}, {isDisabled: true}, {}]);
 
 IsDisabledOnOneCheckboxHorizontal.story = {
   name: 'isDisabled on one checkbox horizontal'
 };
 
-export const IsRequired = () => render({isRequired: true});
+export const IsRequired: CheckboxGroupStory = () => render({isRequired: true});
 
 IsRequired.story = {
   name: 'isRequired'
 };
 
-export const IsRequiredNecessityIndicatorLabel = () =>
+export const IsRequiredNecessityIndicatorLabel: CheckboxGroupStory = () =>
   render({isRequired: true, necessityIndicator: 'label'});
 
 IsRequiredNecessityIndicatorLabel.story = {
   name: 'isRequired, necessityIndicator: label'
 };
 
-export const NecessityIndicatorLabelLabelPositionSide = () =>
+export const NecessityIndicatorLabelLabelPositionSide: CheckboxGroupStory = () =>
   render({necessityIndicator: 'label', labelPosition: 'side'});
 
 NecessityIndicatorLabelLabelPositionSide.story = {
   name: 'necessityIndicator: label, labelPosition: side'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true});
+export const IsReadOnly: CheckboxGroupStory = () => render({isReadOnly: true});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const IsEmphasized = () => render({isEmphasized: true});
+export const IsEmphasized: CheckboxGroupStory = () => render({isEmphasized: true});
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const ValidationStateInvalid = () => render({isInvalid: true});
+export const ValidationStateInvalid: CheckboxGroupStory = () => render({isInvalid: true});
 
 ValidationStateInvalid.story = {
   name: 'validationState: "invalid"'
 };
 
-export const ValidationStateInvalidOnOneCheckbox = () =>
+export const ValidationStateInvalidOnOneCheckbox: CheckboxGroupStory = () =>
   render({}, [{}, {isInvalid: true}, {}]);
 
 ValidationStateInvalidOnOneCheckbox.story = {
   name: 'validationState: "invalid" on one checkbox'
 };
 
-export const WithDescription = () => render({description: 'Please select some pets.'});
+export const WithDescription: CheckboxGroupStory = () => render({description: 'Please select some pets.'});
 
 WithDescription.story = {
   name: 'with description'
 };
 
-export const WithErrorMessage = () =>
+export const WithErrorMessage: CheckboxGroupStory = () =>
   render({
     errorMessage: 'Please select a valid combination of pets.',
     isInvalid: true
@@ -155,7 +158,7 @@ WithErrorMessage.story = {
   name: 'with error message'
 };
 
-export const WithErrorMessageAndErrorIcon = () =>
+export const WithErrorMessageAndErrorIcon: CheckboxGroupStory = () =>
   render({
     errorMessage: 'Please select a valid combination of pets.',
     isInvalid: true,
@@ -166,7 +169,7 @@ WithErrorMessageAndErrorIcon.story = {
   name: 'with error message and error icon'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: CheckboxGroupStory = (args) =>
   render({
     ...args,
     contextualHelp: (
@@ -184,25 +187,25 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const NoVisibleLabel = () => render({label: null, 'aria-label': 'Pets'});
+export const NoVisibleLabel: CheckboxGroupStory = () => render({label: null, 'aria-label': 'Pets'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const AutoFocusOnOneCheckbox = () => render({}, [{}, {autoFocus: true}, {}]);
+export const AutoFocusOnOneCheckbox: CheckboxGroupStory = () => render({}, [{}, {autoFocus: true}, {}]);
 
 AutoFocusOnOneCheckbox.story = {
   name: 'autoFocus on one checkbox'
 };
 
-export const FormName = () => render({name: 'pets'});
+export const FormName: CheckboxGroupStory = () => render({name: 'pets'});
 
 FormName.story = {
   name: 'form name'
 };
 
-export const ShowErrorIcon = () =>
+export const ShowErrorIcon: CheckboxGroupStory = () =>
   render({isInvalid: true, errorMessage: 'Error message.', showErrorIcon: true});
 
 ShowErrorIcon.story = {
diff --git a/packages/@react-spectrum/checkbox/src/Checkbox.tsx b/packages/@react-spectrum/checkbox/src/Checkbox.tsx
index 9ce0915c976..36c835e1018 100644
--- a/packages/@react-spectrum/checkbox/src/Checkbox.tsx
+++ b/packages/@react-spectrum/checkbox/src/Checkbox.tsx
@@ -15,7 +15,7 @@ import {CheckboxGroupContext} from './context';
 import CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall';
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import DashSmall from '@spectrum-icons/ui/DashSmall';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import React, {forwardRef, useContext, useRef} from 'react';
 import {SpectrumCheckboxProps} from '@react-types/checkbox';
@@ -30,7 +30,9 @@ import {useToggleState} from '@react-stately/toggle';
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
-export const Checkbox = forwardRef(function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Checkbox:
+  React.ForwardRefExoticComponent<SpectrumCheckboxProps & React.RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
+forwardRef(function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
   let originalProps = props;
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useFocusableRef(ref, inputRef);
diff --git a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
index 721ab646fff..bc13f857b80 100644
--- a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
@@ -12,7 +12,7 @@
 
 import {CheckboxGroupContext} from './context';
 import {classNames, useDOMRef} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {Provider, useProviderProps} from '@react-spectrum/provider';
 import React from 'react';
@@ -25,7 +25,9 @@ import {useFormProps} from '@react-spectrum/form';
 /**
  * A CheckboxGroup allows users to select one or more items from a list of choices.
  */
-export const CheckboxGroup = React.forwardRef(function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const CheckboxGroup:
+  React.ForwardRefExoticComponent<SpectrumCheckboxGroupProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/checkbox/src/context.ts b/packages/@react-spectrum/checkbox/src/context.ts
index a92ecefa7ff..1a06ae2160e 100644
--- a/packages/@react-spectrum/checkbox/src/context.ts
+++ b/packages/@react-spectrum/checkbox/src/context.ts
@@ -13,4 +13,4 @@
 import {CheckboxGroupState} from '@react-stately/checkbox';
 import React from 'react';
 
-export const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(null);
+export const CheckboxGroupContext: React.Context<CheckboxGroupState | null> = React.createContext<CheckboxGroupState | null>(null);

From 0608ecf1f98a8de974412c44f52daf271a02f413 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 10:18:51 +1000
Subject: [PATCH 04/19] Color

---
 .../color/chromatic/ColorArea.stories.tsx     | 96 +++++++++----------
 .../color/chromatic/ColorField.stories.tsx    | 40 ++++----
 .../color/chromatic/ColorSlider.stories.tsx   | 38 ++++----
 .../@react-spectrum/color/src/ColorEditor.tsx |  6 +-
 .../@react-spectrum/color/src/ColorField.tsx  |  4 +-
 .../@react-spectrum/color/src/ColorPicker.tsx | 14 +--
 .../@react-spectrum/color/src/ColorSlider.tsx |  6 +-
 .../@react-spectrum/color/src/ColorSwatch.tsx | 10 +-
 .../color/src/ColorSwatchPicker.tsx           |  6 +-
 .../@react-spectrum/color/src/ColorWheel.tsx  |  6 +-
 .../color/stories/ColorPicker.stories.tsx     | 15 +--
 .../color/stories/ColorSwatch.stories.tsx     | 13 ++-
 .../stories/ColorSwatchPicker.stories.tsx     | 11 ++-
 .../color/stories/ColorWheel.stories.tsx      | 22 +++--
 .../color/test/ColorWheel.test.tsx            |  4 +-
 15 files changed, 160 insertions(+), 131 deletions(-)

diff --git a/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx
index 30ec42d48ea..06b58c828f5 100644
--- a/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx
+++ b/packages/@react-spectrum/color/chromatic/ColorArea.stories.tsx
@@ -12,9 +12,9 @@
 
 import {ColorArea, ColorField, ColorSlider, ColorSwatch, ColorWheel} from '../';
 import {Flex} from '@adobe/react-spectrum';
-import {Meta, StoryFn} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {parseColor} from '@react-stately/color';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {SpectrumColorAreaProps} from '@react-types/color';
 
 const meta: Meta<SpectrumColorAreaProps> = {
@@ -27,9 +27,9 @@ const meta: Meta<SpectrumColorAreaProps> = {
 
 export default meta;
 
-const Template: StoryFn<SpectrumColorAreaProps> = (args) => <ColorAreaExample {...args} />;
+export type ColorAreaStory = StoryObj<typeof ColorArea>;
 
-function ColorAreaExample(props: SpectrumColorAreaProps) {
+function ColorAreaExample(props: SpectrumColorAreaProps): JSX.Element {
   let {xChannel, yChannel, isDisabled} = props;
   let defaultValue =
     typeof props.defaultValue === 'string' ? parseColor(props.defaultValue) : props.defaultValue;
@@ -92,62 +92,62 @@ function ColorAreaExample(props: SpectrumColorAreaProps) {
     </div>
   );
 }
-export const XBlueYGreen = {
-  render: Template,
+export const XBlueYGreen: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="green"',
   args: {xChannel: 'blue', yChannel: 'green'}
 };
 
-export const XGreenYBlue = {
-  render: Template,
+export const XGreenYBlue: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="green", yChannel="blue"',
   args: {...XBlueYGreen.args, xChannel: 'green', yChannel: 'blue'}
 };
 
-export const XBlueYRed = {
-  render: Template,
+export const XBlueYRed: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="red"',
   args: {...XBlueYGreen.args, xChannel: 'blue', yChannel: 'red'}
 };
 
-export const XRedYBlue = {
-  render: Template,
+export const XRedYBlue: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="red", yChannel="blue"',
   args: {...XBlueYGreen.args, xChannel: 'red', yChannel: 'blue'}
 };
 
-export const XRedYGreen = {
-  render: Template,
+export const XRedYGreen: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="red", yChannel="green"',
   args: {...XBlueYGreen.args, xChannel: 'red', yChannel: 'green'}
 };
 
-export const XGreenYRed = {
-  render: Template,
+export const XGreenYRed: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="green", yChannel="red"',
   args: {...XBlueYGreen.args, xChannel: 'green', yChannel: 'red'}
 };
 
-export const XBlueYGreenisDisabled = {
-  render: Template,
+export const XBlueYGreenisDisabled: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="green", isDisabled',
   args: {...XBlueYGreen.args, isDisabled: true}
 };
 
-export const XBlueYGreenSize3000 = {
-  render: Template,
+export const XBlueYGreenSize3000: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="green", size="size-3000"',
   args: {...XBlueYGreen.args, size: 'size-3000'}
 };
 
-export const XBlueYGreenSize600 = {
-  render: Template,
+export const XBlueYGreenSize600: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'RGB xChannel="blue", yChannel="green", size="size-600"',
   args: {...XBlueYGreen.args, size: 'size-600'}
 };
 
-export const XSaturationYLightness = {
-  render: Template,
+export const XSaturationYLightness: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="saturation", yChannel="lightness"',
   args: {
     ...XBlueYGreen.args,
@@ -157,8 +157,8 @@ export const XSaturationYLightness = {
   }
 };
 
-export const XLightnessYSaturation = {
-  render: Template,
+export const XLightnessYSaturation: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="lightness", yChannel="saturation"',
   args: {
     ...XBlueYGreen.args,
@@ -168,8 +168,8 @@ export const XLightnessYSaturation = {
   }
 };
 
-export const XHueYSaturationHSL = {
-  render: Template,
+export const XHueYSaturationHSL: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="hue", yChannel="saturation"',
   args: {
     ...XSaturationYLightness.args,
@@ -179,8 +179,8 @@ export const XHueYSaturationHSL = {
   }
 };
 
-export const XSaturationYHueHSL = {
-  render: Template,
+export const XSaturationYHueHSL: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="saturation", yChannel="hue"',
   args: {
     ...XSaturationYLightness.args,
@@ -190,8 +190,8 @@ export const XSaturationYHueHSL = {
   }
 };
 
-export const XHueYLightnessHSL = {
-  render: Template,
+export const XHueYLightnessHSL: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="hue", yChannel="lightness"',
   args: {
     ...XHueYSaturationHSL.args,
@@ -201,8 +201,8 @@ export const XHueYLightnessHSL = {
   }
 };
 
-export const XLightnessYHueHSL = {
-  render: Template,
+export const XLightnessYHueHSL: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSL xChannel="lightness", yChannel="hue"',
   args: {
     ...XHueYSaturationHSL.args,
@@ -212,8 +212,8 @@ export const XLightnessYHueHSL = {
   }
 };
 
-export const XSaturationYBrightness = {
-  render: Template,
+export const XSaturationYBrightness: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="saturation", yChannel="brightness"',
   args: {
     ...XHueYSaturationHSL.args,
@@ -223,8 +223,8 @@ export const XSaturationYBrightness = {
   }
 };
 
-export const XBrightnessYSaturation = {
-  render: Template,
+export const XBrightnessYSaturation: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="brightness", yChannel="saturation"',
   args: {
     ...XHueYSaturationHSL.args,
@@ -234,14 +234,14 @@ export const XBrightnessYSaturation = {
   }
 };
 
-export const XSaturationYBrightnessisDisabled = {
-  render: Template,
+export const XSaturationYBrightnessisDisabled: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="saturation", yChannel="brightness", isDisabled',
   args: {...XSaturationYBrightness.args, isDisabled: true}
 };
 
-export const XHueYSaturationHSB = {
-  render: Template,
+export const XHueYSaturationHSB: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="hue", yChannel="saturation"',
   args: {
     ...XSaturationYBrightness.args,
@@ -251,8 +251,8 @@ export const XHueYSaturationHSB = {
   }
 };
 
-export const XSaturationYHueHSB = {
-  render: Template,
+export const XSaturationYHueHSB: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="saturation", yChannel="hue"',
   args: {
     ...XSaturationYBrightness.args,
@@ -262,8 +262,8 @@ export const XSaturationYHueHSB = {
   }
 };
 
-export const XHueYBrightnessHSB = {
-  render: Template,
+export const XHueYBrightnessHSB: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="hue", yChannel="brightness"',
   args: {
     ...XHueYSaturationHSB.args,
@@ -273,8 +273,8 @@ export const XHueYBrightnessHSB = {
   }
 };
 
-export const XBrightnessYHueHSB = {
-  render: Template,
+export const XBrightnessYHueHSB: ColorAreaStory = {
+  render: (args) => <ColorAreaExample {...args} />,
   name: 'HSB xChannel="brightness", yChannel="hue"',
   args: {
     ...XHueYSaturationHSB.args,
diff --git a/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx
index fbd3c9c9d24..293f3c9ad1b 100644
--- a/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx
+++ b/packages/@react-spectrum/color/chromatic/ColorField.stories.tsx
@@ -16,8 +16,8 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import {Meta, StoryFn} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumColorFieldProps} from '@react-types/color';
 
 // Ignore read only because it doesn't apply any distingishable visual features
@@ -70,7 +70,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryFn<SpectrumColorFieldProps> = (args) => (
+export type ColorFieldStory = StoryObj<typeof ColorField>;
+
+const Template = (args: SpectrumColorFieldProps): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -82,7 +84,7 @@ const Template: StoryFn<SpectrumColorFieldProps> = (args) => (
   </Grid>
 );
 
-const TemplateSmall: StoryFn<SpectrumColorFieldProps> = (args) => (
+const TemplateSmall = (args: SpectrumColorFieldProps): JSX.Element => (
   <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -94,7 +96,7 @@ const TemplateSmall: StoryFn<SpectrumColorFieldProps> = (args) => (
   </Grid>
 );
 
-const NoLabelTemplate: StoryFn<SpectrumColorFieldProps> = (args) => (
+const NoLabelTemplate = (args: SpectrumColorFieldProps): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combinations.filter(combo => combo.isRequired == null && combo.necessityIndicator == null).map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -106,44 +108,44 @@ const NoLabelTemplate: StoryFn<SpectrumColorFieldProps> = (args) => (
   </Grid>
 );
 
-export const PropDefaults = {
-  render: Template,
+export const PropDefaults: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const PropDefaultValue = {
-  render: Template,
+export const PropDefaultValue: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'default value',
   args: {...PropDefaults.args, defaultValue: '#abcdef'}
 };
 
-export const PropPlaceholder = {
-  render: Template,
+export const PropPlaceholder: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'placeholder',
   args: {...PropDefaults.args, placeholder: 'Enter a hex color'}
 };
 
-export const PropAriaLabelled = {
-  render: NoLabelTemplate,
+export const PropAriaLabelled: ColorFieldStory = {
+  render: (args) => <NoLabelTemplate {...args} />,
   name: 'aria-label',
   args: {'aria-label': 'Label'}
 };
 
-export const PropLabelEnd = {
-  render: Template,
+export const PropLabelEnd: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'label end',
   args: {...PropDefaults.args, labelAlign: 'end', defaultValue: '#abcdef'}
 };
 
-export const PropLabelSide = {
-  render: TemplateSmall,
+export const PropLabelSide: ColorFieldStory = {
+  render: (args) => <TemplateSmall {...args} />,
   name: 'label side',
   args: {...PropDefaults.args, labelPosition: 'side', defaultValue: '#abcdef'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: ColorFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {...PropDefaults.args, width: 'size-3000'}
 };
diff --git a/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx
index 7973ce1f4c2..74b38a6f7c5 100644
--- a/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx
+++ b/packages/@react-spectrum/color/chromatic/ColorSlider.stories.tsx
@@ -16,8 +16,8 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import {Meta, StoryFn} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumColorSliderProps} from '@react-types/color';
 
 let states = [
@@ -59,7 +59,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryFn<SpectrumColorSliderProps> = (args) => (
+export type ColorSliderStory = StoryObj<typeof ColorSlider>;
+
+const Template = (args: SpectrumColorSliderProps): JSX.Element => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -71,7 +73,7 @@ const Template: StoryFn<SpectrumColorSliderProps> = (args) => (
   </Grid>
 );
 
-const VerticalTemplate: StoryFn<SpectrumColorSliderProps> = (args) => (
+const VerticalTemplate = (args: SpectrumColorSliderProps): JSX.Element => (
   <Grid columns={repeat(5, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -83,44 +85,44 @@ const VerticalTemplate: StoryFn<SpectrumColorSliderProps> = (args) => (
   </Grid>
 );
 
-export const PropChannelRed = {
-  render: Template,
+export const PropChannelRed: ColorSliderStory = {
+  render: (args) => <Template {...args} />,
   name: 'channel: red',
   args: {channel: 'red', defaultValue: '#7f0000'}
 };
 
-export const PropChannelAlpha = {
-  render: Template,
+export const PropChannelAlpha: ColorSliderStory = {
+  render: (args) => <Template {...args} />,
   name: 'channel: alpha',
   args: {channel: 'alpha', defaultValue: '#7f0000'}
 };
 
-export const PropChannelLightness = {
-  render: Template,
+export const PropChannelLightness: ColorSliderStory = {
+  render: (args) => <Template {...args} />,
   name: 'channel: lightness',
   args: {channel: 'lightness', defaultValue: 'hsla(0, 100%, 50%, 0.5)'}
 };
 
-export const PropChannelBrightness = {
-  render: Template,
+export const PropChannelBrightness: ColorSliderStory = {
+  render: (args) => <Template {...args} />,
   name: 'channel: brightness',
   args: {channel: 'brightness', defaultValue: 'hsba(0, 100%, 50%, 0.5)'}
 };
 
-export const PropVertical = {
-  render: VerticalTemplate,
+export const PropVertical: ColorSliderStory = {
+  render: (args) => <VerticalTemplate {...args} />,
   name: 'orientation: vertical',
   args: {channel: 'red', defaultValue: '#7f0000'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: ColorSliderStory = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {channel: 'red', defaultValue: '#7f0000', width: 'size-3600'}
 };
 
-export const PropCustomHeight = {
-  render: VerticalTemplate,
+export const PropCustomHeight: ColorSliderStory = {
+  render: (args) => <VerticalTemplate {...args} />,
   name: 'custom height',
   args: {channel: 'red', defaultValue: '#7f0000', height: 'size-3600'}
 };
diff --git a/packages/@react-spectrum/color/src/ColorEditor.tsx b/packages/@react-spectrum/color/src/ColorEditor.tsx
index b7ce2c39ff5..43838cf27a7 100644
--- a/packages/@react-spectrum/color/src/ColorEditor.tsx
+++ b/packages/@react-spectrum/color/src/ColorEditor.tsx
@@ -2,7 +2,7 @@ import {ColorArea} from './ColorArea';
 import {ColorField} from './ColorField';
 import {ColorSlider} from './ColorSlider';
 import {ColorSpace} from '@react-types/color';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getColorChannels} from '@react-stately/color';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -20,7 +20,9 @@ export interface SpectrumColorEditorProps {
 /**
  * ColorEditor provides a default UI for editing colors within a ColorPicker.
  */
-export const ColorEditor = React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorEditor:
+  React.ForwardRefExoticComponent<SpectrumColorEditorProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
   let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
   let domRef = useDOMRef(ref);
   let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx
index 4e4c0f79100..fa625799e0f 100644
--- a/packages/@react-spectrum/color/src/ColorField.tsx
+++ b/packages/@react-spectrum/color/src/ColorField.tsx
@@ -26,7 +26,9 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * A color field allows users to edit a hex color or individual color channel value.
  */
-export const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
+export const ColorField:
+  React.ForwardRefExoticComponent<SpectrumColorFieldProps & React.RefAttributes<TextFieldRef<HTMLInputElement>>> =
+React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef<HTMLInputElement>>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   [props] = useContextProps(props, null, ColorFieldContext);
diff --git a/packages/@react-spectrum/color/src/ColorPicker.tsx b/packages/@react-spectrum/color/src/ColorPicker.tsx
index c0be4288e97..7401950055b 100644
--- a/packages/@react-spectrum/color/src/ColorPicker.tsx
+++ b/packages/@react-spectrum/color/src/ColorPicker.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ColorPicker as AriaColorPicker, Button, Color} from 'react-aria-components';
-import {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';
+import {AriaLabelingProps, FocusableRef, FocusableRefValue, ValueBase} from '@react-types/shared';
 import {ColorSwatch} from './ColorSwatch';
 import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
@@ -40,14 +40,16 @@ export interface SpectrumColorPickerProps extends ValueBase<string | Color, Colo
 /**
  * A ColorPicker combines a swatch with a customizable popover for editing a color.
  */
-export const ColorPicker = React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ColorPicker:
+  React.ForwardRefExoticComponent<SpectrumColorPickerProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {
   let swatchRef = useRef(null);
   let domRef = useFocusableRef(ref);
   let labelId = useId();
   return (
     <AriaColorPicker {...props}>
       <DialogTrigger type="popover" mobileType="tray" targetRef={unwrapDOMRef(swatchRef)}>
-        <Button 
+        <Button
           ref={domRef}
           className={style({
             backgroundColor: 'transparent',
@@ -91,13 +93,13 @@ export const ColorPicker = React.forwardRef(function ColorPicker(props: Spectrum
                   aria-describedby={props['aria-describedby']}
                   aria-details={props['aria-details']} />
               </div>
-              {props.label && 
+              {props.label &&
                 <span id={labelId}>{props.label}</span>
               }
             </>
           )}
         </Button>
-        <Dialog 
+        <Dialog
           aria-labelledby={props.label ? labelId : props['aria-labelledby']}
           aria-label={props['aria-label']}
           UNSAFE_style={{
@@ -105,7 +107,7 @@ export const ColorPicker = React.forwardRef(function ColorPicker(props: Spectrum
             minWidth: 0,
             margin: '0 auto' // Center within tray.
           }}>
-          <Content 
+          <Content
             UNSAFE_style={{
               position: 'relative',
               margin: 'calc(var(--spectrum-dialog-padding) * -1)',
diff --git a/packages/@react-spectrum/color/src/ColorSlider.tsx b/packages/@react-spectrum/color/src/ColorSlider.tsx
index f42e5af782c..02dbfa1e594 100644
--- a/packages/@react-spectrum/color/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/color/src/ColorSlider.tsx
@@ -13,7 +13,7 @@
 import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {ColorSliderContext, useContextProps} from 'react-aria-components';
 import {ColorThumb} from './ColorThumb';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {Label} from '@react-spectrum/label';
 import React, {useRef, useState} from 'react';
 import {SpectrumColorSliderProps} from '@react-types/color';
@@ -27,7 +27,9 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * ColorSliders allow users to adjust an individual channel of a color value.
  */
-export const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const ColorSlider:
+  React.ForwardRefExoticComponent<SpectrumColorSliderProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
+React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let inputRef = useRef(null);
   let trackRef = useRef(null);
diff --git a/packages/@react-spectrum/color/src/ColorSwatch.tsx b/packages/@react-spectrum/color/src/ColorSwatch.tsx
index ff7ba8a0484..63fa5741208 100644
--- a/packages/@react-spectrum/color/src/ColorSwatch.tsx
+++ b/packages/@react-spectrum/color/src/ColorSwatch.tsx
@@ -13,8 +13,8 @@
 import {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';
 import {Color} from '@react-types/color';
 import {ColorSwatchContext, useContextProps} from 'react-aria-components';
-import {DOMRef, StyleProps} from '@react-types/shared';
-import React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';
+import {DOMRef, DOMRefValue, StyleProps} from '@react-types/shared';
+import React, {Context, createContext, forwardRef, JSX, ReactElement, useContext} from 'react';
 import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
 import {useDOMRef, useStyleProps} from '@react-spectrum/utils';
 
@@ -35,12 +35,14 @@ interface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps,
   useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element
 }
 
-export const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
+export const SpectrumColorSwatchContext: Context<SpectrumColorSwatchContextValue | null> = createContext<SpectrumColorSwatchContextValue | null>(null);
 
 /**
  * A ColorSwatch displays a preview of a selected color.
  */
-export const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+export const ColorSwatch:
+  React.ForwardRefExoticComponent<SpectrumColorSwatchProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
   let domRef = useDOMRef(ref);
   [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);
   let {colorSwatchProps, color} = useColorSwatch(props);
diff --git a/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx
index 320e8fb0fdc..74c52afdbfe 100644
--- a/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx
+++ b/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx
@@ -12,7 +12,7 @@
 
 import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components';
 import {Color} from '@react-types/color';
-import {DOMRef, StyleProps, ValueBase} from '@react-types/shared';
+import {DOMRef, DOMRefValue, StyleProps, ValueBase} from '@react-types/shared';
 import React, {forwardRef, ReactElement, ReactNode} from 'react';
 import {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';
 import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
@@ -41,7 +41,9 @@ export interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color
 /**
  * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
  */
-export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorSwatchPicker:
+  React.ForwardRefExoticComponent<SpectrumColorSwatchPickerProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
   let {
     density = 'regular',
     size = 'M',
diff --git a/packages/@react-spectrum/color/src/ColorWheel.tsx b/packages/@react-spectrum/color/src/ColorWheel.tsx
index b187a4a1f6b..0a4de3fbd85 100644
--- a/packages/@react-spectrum/color/src/ColorWheel.tsx
+++ b/packages/@react-spectrum/color/src/ColorWheel.tsx
@@ -13,7 +13,7 @@
 import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {ColorThumb} from './ColorThumb';
 import {ColorWheelContext, useContextProps} from 'react-aria-components';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {SpectrumColorWheelProps} from '@react-types/color';
 import styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';
@@ -28,7 +28,9 @@ const WHEEL_THICKNESS = 24;
 /**
  * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
+export const ColorWheel:
+  React.ForwardRefExoticComponent<SpectrumColorWheelProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
+React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let inputRef = useRef(null);
   let containerRef = useFocusableRef(ref, inputRef);
diff --git a/packages/@react-spectrum/color/stories/ColorPicker.stories.tsx b/packages/@react-spectrum/color/stories/ColorPicker.stories.tsx
index 20e777b66bb..34b2dd48772 100644
--- a/packages/@react-spectrum/color/stories/ColorPicker.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorPicker.stories.tsx
@@ -11,8 +11,9 @@
  */
 
 import {ColorArea, ColorEditor, ColorSwatch, ColorSwatchPicker, ColorWheel} from '../src';
-import {ColorPicker} from '../src/ColorPicker';
+import {ColorPicker, SpectrumColorPickerProps} from '../src/ColorPicker';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -34,18 +35,20 @@ export default {
       options: ['XS', 'S', 'M', 'L']
     }
   }
-};
+} as Meta<SpectrumColorPickerProps>;
 
-export const Default = (args) => (
+export type ColorPickerStory = StoryFn<typeof ColorPicker>;
+
+export const Default: ColorPickerStory = (args) => (
   <ColorPicker defaultValue="#f00" {...args}>
     <ColorEditor />
   </ColorPicker>
 );
 
-export const Custom = (args) => (
+export const Custom: ColorPickerStory = (args) => (
   <ColorPicker defaultValue="#f00" {...args}>
     <ColorWheel />
-    <ColorArea 
+    <ColorArea
       colorSpace="hsb"
       xChannel="saturation"
       yChannel="brightness"
@@ -56,7 +59,7 @@ export const Custom = (args) => (
   </ColorPicker>
 );
 
-export const Swatches = (args) => (
+export const Swatches: ColorPickerStory = (args) => (
   <ColorPicker defaultValue="#A00" {...args}>
     <Flex direction="column" gap="size-300">
       <ColorEditor />
diff --git a/packages/@react-spectrum/color/stories/ColorSwatch.stories.tsx b/packages/@react-spectrum/color/stories/ColorSwatch.stories.tsx
index 56fbade0f39..c914db57e59 100644
--- a/packages/@react-spectrum/color/stories/ColorSwatch.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorSwatch.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSwatch} from '../src/ColorSwatch';
+import {ColorSwatch, SpectrumColorSwatchProps} from '../src/ColorSwatch';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -29,9 +30,11 @@ export default {
       options: ['XS', 'S', 'M', 'L']
     }
   }
-};
+} as Meta<SpectrumColorSwatchProps>;
+
+export type ColorSwatchStory = StoryFn<typeof ColorSwatch>;
 
-export const Default = (args) => (
+export const Default: ColorSwatchStory = (args) => (
   <ColorSwatch {...args} />
 );
 
@@ -39,7 +42,7 @@ Default.args = {
   color: 'rgb(255, 0, 0)'
 };
 
-export const NoValue = (args) => <ColorSwatch {...args} />;
+export const NoValue: ColorSwatchStory = (args) => <ColorSwatch {...args} />;
 
-export const CustomWidth = (args) => <ColorSwatch {...args} width="size-1000" />;
+export const CustomWidth: ColorSwatchStory = (args) => <ColorSwatch {...args} width="size-1000" />;
 CustomWidth.args = Default.args;
diff --git a/packages/@react-spectrum/color/stories/ColorSwatchPicker.stories.tsx b/packages/@react-spectrum/color/stories/ColorSwatchPicker.stories.tsx
index 22fd8ed901d..d1d40c30719 100644
--- a/packages/@react-spectrum/color/stories/ColorSwatchPicker.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorSwatchPicker.stories.tsx
@@ -11,7 +11,8 @@
  */
 
 import {ColorSwatch} from '../src/ColorSwatch';
-import {ColorSwatchPicker} from '../src/ColorSwatchPicker';
+import {ColorSwatchPicker, SpectrumColorSwatchPickerProps} from '../src/ColorSwatchPicker';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -34,9 +35,11 @@ export default {
       options: ['compact', 'regular', 'spacious']
     }
   }
-};
+} as Meta<SpectrumColorSwatchPickerProps>;
 
-export const Default = (args) => (
+export type ColorSwatchPickerStory = StoryFn<typeof ColorSwatchPicker>;
+
+export const Default: ColorSwatchPickerStory = (args) => (
   <ColorSwatchPicker defaultValue="#f00" {...args}>
     <ColorSwatch color="#f00" />
     <ColorSwatch color="#0f0" />
@@ -45,7 +48,7 @@ export const Default = (args) => (
   </ColorSwatchPicker>
 );
 
-export const ManySwatches = (args) => (
+export const ManySwatches: ColorSwatchPickerStory = (args) => (
   <ColorSwatchPicker {...args} maxWidth="size-3000">
     {Array.from(Array(24)).map(() => {
       let color = `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')}`;
diff --git a/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx b/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx
index 65e1a72620f..9d654ec14b9 100644
--- a/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorWheel.stories.tsx
@@ -12,17 +12,17 @@
 
 import {action} from '@storybook/addon-actions';
 import {ColorSwatch, ColorWheel} from '../';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
-import {Flex, useLocale} from '@adobe/react-spectrum';
+import {Flex, SpectrumColorWheelProps, useLocale} from '@adobe/react-spectrum';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {parseColor} from '@react-stately/color';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 
-export type ColorWheelStory = ComponentStoryObj<typeof ColorWheel>;
+export type ColorWheelStory = StoryObj<typeof ColorWheel>;
 
 export default {
   title: 'ColorWheel',
   component: ColorWheel,
-  excludeStories: ['ControlledHSL'],
+  excludeStories: ['ControlledHSLRender'],
   args: {
     onChange: action('onChange'),
     onChangeEnd: action('onChangeEnd')
@@ -45,7 +45,7 @@ export default {
       control: 'text'
     }
   }
-} as ComponentMeta<typeof ColorWheel>;
+} as Meta<typeof ColorWheel>;
 
 export const Default: ColorWheelStory = {
   args: {defaultValue: 'hsl(0, 100%, 50%)'},
@@ -55,14 +55,14 @@ export const Default: ColorWheelStory = {
 export const Controlled: ColorWheelStory = {
   render: (args) => (
     <Flex gap={'size-500'} direction="row" alignItems="center">
-      <ControlledHSL {...args} />
+      <ControlledHSLRender {...args} />
     </Flex>
   )
 };
 
-export function ControlledHSL(props) {
+export const ControlledHSLRender = (props: SpectrumColorWheelProps): JSX.Element => {
   let {locale} = useLocale();
-  let [color, setColor] = useState(props.defaultValue || parseColor('hsl(0, 100%, 50%)'));
+  let [color, setColor] = useState(parseColor('hsl(0, 100%, 50%)'));
   let onChangeEnd = (color) => {
     props.onChangeEnd && props.onChangeEnd(color);
     setColor(color);
@@ -78,4 +78,6 @@ export function ControlledHSL(props) {
       <div>{color.getColorName(locale)}</div>
     </div>
   );
-}
+};
+
+export const ControlledHSL: StoryFn<typeof ColorWheel> = (props) => <ControlledHSLRender {...props} />;
diff --git a/packages/@react-spectrum/color/test/ColorWheel.test.tsx b/packages/@react-spectrum/color/test/ColorWheel.test.tsx
index bdfdb1604c9..15ee47fb00a 100644
--- a/packages/@react-spectrum/color/test/ColorWheel.test.tsx
+++ b/packages/@react-spectrum/color/test/ColorWheel.test.tsx
@@ -12,7 +12,7 @@
 
 import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
 import {ColorWheel} from '../';
-import {ControlledHSL} from '../stories/ColorWheel.stories';
+import {ControlledHSLRender} from '../stories/ColorWheel.stories';
 import {parseColor} from '@react-stately/color';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
@@ -339,7 +339,7 @@ describe('ColorWheel', () => {
 
     it('clicking on the track works', () => {
       let defaultColor = parseColor('hsl(0, 100%, 50%)');
-      let {container: _container, getByRole} = render(<ControlledHSL defaultValue={defaultColor} onChange={onChangeSpy} onChangeEnd={onChangeEndSpy} />);
+      let {container: _container, getByRole} = render(<ControlledHSLRender defaultValue={defaultColor} onChange={onChangeSpy} onChangeEnd={onChangeEndSpy} />);
       let slider = getByRole('slider');
       let container = _container?.firstChild?.firstChild?.firstChild?.firstChild as HTMLElement;
       container.getBoundingClientRect = getBoundingClientRect;

From daeff766b88209e82e515a66ae15e2c4c3f7f1ef Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 11:16:49 +1000
Subject: [PATCH 05/19] combobox, contextualhelp, datepicker

---
 .../combobox/chromatic/ComboBox.stories.tsx   |  42 +++----
 .../combobox/src/MobileComboBox.tsx           |   8 +-
 .../contextualhelp/src/ContextualHelp.tsx     |   6 +-
 .../chromatic/DateField.stories.tsx           |  99 +++++++--------
 .../chromatic/DatePicker.stories.tsx          | 113 +++++++++---------
 .../chromatic/DateRangePicker.stories.tsx     | 113 +++++++++---------
 .../chromatic/TimeField.stories.tsx           |  73 +++++------
 .../@react-spectrum/datepicker/src/Input.tsx  |  18 ++-
 .../stories/DateRangePicker.stories.tsx       |  59 ++++-----
 .../DateRangePickerStyling.stories.tsx        |  42 ++++---
 .../datepicker/stories/TimeField.stories.tsx  |  55 +++++----
 .../stories/TimeFieldStyling.stories.tsx      |  36 +++---
 12 files changed, 357 insertions(+), 307 deletions(-)

diff --git a/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx b/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx
index 569001ea537..52e2e33b95a 100644
--- a/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx
+++ b/packages/@react-spectrum/combobox/chromatic/ComboBox.stories.tsx
@@ -16,8 +16,8 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import {Meta, StoryFn} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumComboBoxProps} from '@react-types/combobox';
 
 // Skipping focus styles because don't have a way of applying it via classnames
@@ -67,13 +67,15 @@ const meta: Meta<SpectrumComboBoxProps<object>> = {
 
 export default meta;
 
+export type ComboBoxStory = StoryObj<typeof ComboBox>;
+
 let items = [
   {name: 'Aardvark', id: '1'},
   {name: 'Kangaroo', id: '2'},
   {name: 'Snake', id: '3'}
 ];
 
-const Template: StoryFn<SpectrumComboBoxProps<object>> = (args) => (
+const Template = (args: SpectrumComboBoxProps<unknown>): JSX.Element => (
   <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -91,7 +93,7 @@ const Template: StoryFn<SpectrumComboBoxProps<object>> = (args) => (
 );
 
 // Chromatic can't handle the size of the side label story so removed some extraneous props that don't matter for side label case.
-const TemplateSideLabel: StoryFn<SpectrumComboBoxProps<object>> = (args) => (
+const TemplateSideLabel = (args: SpectrumComboBoxProps<unknown>): JSX.Element => (
   <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200" width={800}>
     {combinations.filter(combo => !(combo.isReadOnly || combo.isDisabled)).map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -108,44 +110,44 @@ const TemplateSideLabel: StoryFn<SpectrumComboBoxProps<object>> = (args) => (
   </Grid>
 );
 
-export const PropDefaults = {
-  render: Template,
+export const PropDefaults: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const PropSelectedKey = {
-  render: Template,
+export const PropSelectedKey: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'selectedKey: 2',
   args: {selectedKey: '2'}
 };
 
-export const PropInputValue = {
-  render: Template,
+export const PropInputValue: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'inputValue: Blah',
   args: {inputValue: 'Blah'}
 };
 
-export const PropAriaLabelled = {
-  render: Template,
+export const PropAriaLabelled: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'aria-label',
   args: {'aria-label': 'Label'}
 };
 
-export const PropLabelEnd = {
-  render: Template,
+export const PropLabelEnd: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'label end',
   args: {...PropDefaults.args, labelAlign: 'end'}
 };
 
-export const PropLabelSide = {
-  render: TemplateSideLabel,
+export const PropLabelSide: ComboBoxStory = {
+  render: (args) => <TemplateSideLabel {...args} />,
   name: 'label side',
   args: {...PropDefaults.args, labelPosition: 'side'}
 };
 
-export const PropCustomWidth = {
-  render: Template,
+export const PropCustomWidth: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'custom width',
   args: {...PropDefaults.args, width: 'size-1600'},
 
@@ -156,8 +158,8 @@ export const PropCustomWidth = {
   }
 };
 
-export const PropContextualHelp = {
-  render: Template,
+export const PropContextualHelp: ComboBoxStory = {
+  render: (args) => <Template {...args} />,
   name: 'contextual help',
   args: {
     ...PropDefaults.args,
diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
index 198c090bedd..32a62ba1677 100644
--- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
@@ -45,7 +45,9 @@ import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useFormValidation} from '@react-aria/form';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export const MobileComboBox = React.forwardRef(function MobileComboBox(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
+export const MobileComboBox:
+  React.ForwardRefExoticComponent<SpectrumComboBoxProps<any> & React.RefAttributes<FocusableRefValue<HTMLElement, HTMLElement>>> =
+React.forwardRef(function MobileComboBox(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
 
   let {
@@ -166,7 +168,9 @@ interface ComboBoxButtonProps extends AriaButtonProps {
   className?: string
 }
 
-export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxButtonProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ComboBoxButton:
+  React.ForwardRefExoticComponent<ComboBoxButtonProps & React.RefAttributes<HTMLDivElement>> =
+React.forwardRef(function ComboBoxButton(props: ComboBoxButtonProps, ref: ForwardedRef<HTMLDivElement>) {
   let {
     isQuiet,
     isDisabled,
diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
index 4d2857e0032..1f93425438f 100644
--- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
@@ -13,7 +13,7 @@
 import {ActionButton} from '@react-spectrum/button';
 import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import HelpOutline from '@spectrum-icons/workflow/HelpOutline';
 import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
 import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
@@ -27,7 +27,9 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 /**
  * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
  */
-export const ContextualHelp = React.forwardRef(function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ContextualHelp:
+  React.ForwardRefExoticComponent<SpectrumContextualHelpProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
+React.forwardRef(function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
   let {
     variant = 'help',
     placement = 'bottom start',
diff --git a/packages/@react-spectrum/datepicker/chromatic/DateField.stories.tsx b/packages/@react-spectrum/datepicker/chromatic/DateField.stories.tsx
index 20b28a295dc..8f179c32b0d 100644
--- a/packages/@react-spectrum/datepicker/chromatic/DateField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/chromatic/DateField.stories.tsx
@@ -15,6 +15,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {DateField} from '../';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 
@@ -25,14 +26,16 @@ export default {
       locales: ['en-US', 'ar-EG', 'ja-JP', 'he-IL']
     }
   }
-};
+} as Meta<typeof DateField>;
+
+export type DateFieldStory = StoryFn<typeof DateField>;
 
 const date = new CalendarDate(2022, 2, 3);
 const dateTime = new CalendarDateTime(2022, 2, 3, 8, 45);
 const zonedDateTime = parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]');
 
-export const Placeholder = () => <DateField label="Date" placeholderValue={date} />;
-export const PlaceholderFocus = () => <DateField label="Date" placeholderValue={date} autoFocus />;
+export const Placeholder: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} {...args} />;
+export const PlaceholderFocus: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocus.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -42,7 +45,7 @@ PlaceholderFocus.parameters = {
   }
 };
 
-export const PlaceholderFocusRTL = () => <DateField label="Date" placeholderValue={date} autoFocus />;
+export const PlaceholderFocusRTL: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocusRTL.parameters = {
   chromaticProvider: {
     locales: ['he-IL'],
@@ -52,19 +55,19 @@ PlaceholderFocusRTL.parameters = {
   }
 };
 
-export const PlaceholderFocusExpress = () => <DateField label="Date" placeholderValue={date} autoFocus />;
+export const PlaceholderFocusExpress: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocusExpress.parameters = {
   chromaticProvider: {
     express: true
   }
 };
 
-export const PlaceholderTime = () => <DateField label="Date" placeholderValue={dateTime} />;
-export const PlaceholderZoned = () => <DateField label="Date" placeholderValue={zonedDateTime} />;
-export const Value = () => <DateField label="Date" value={date} />;
-export const ValueTime = () => <DateField label="Date" value={dateTime} />;
-export const ValueZoned = () => <DateField label="Date" value={zonedDateTime} />;
-export const ValueFocus = () => <DateField label="Date" value={date} autoFocus />;
+export const PlaceholderTime: DateFieldStory = (args) => <DateField label="Date" placeholderValue={dateTime} {...args} />;
+export const PlaceholderZoned: DateFieldStory = (args) => <DateField label="Date" placeholderValue={zonedDateTime} {...args} />;
+export const Value: DateFieldStory = (args) => <DateField label="Date" value={date} {...args} />;
+export const ValueTime: DateFieldStory = (args) => <DateField label="Date" value={dateTime} {...args} />;
+export const ValueZoned: DateFieldStory = (args) => <DateField label="Date" value={zonedDateTime} {...args} />;
+export const ValueFocus: DateFieldStory = (args) => <DateField label="Date" value={date} autoFocus {...args} />;
 ValueFocus.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -74,31 +77,31 @@ ValueFocus.parameters = {
   }
 };
 
-export const DisabledPlaceholder = () => <DateField label="Date" placeholderValue={date} isDisabled />;
-export const DisabledValue = () => <DateField label="Date" value={date} isDisabled />;
-export const ReadOnly = () => <DateField label="Date" value={date} isReadOnly />;
-export const QuietPlaceholder = () => <DateField label="Date" placeholderValue={date} isQuiet />;
-export const QuietValue = () => <DateField label="Date" value={date} isQuiet />;
-export const Invalid = () => <DateField label="Date" value={date} validationState="invalid" />;
-export const ErrorMessage = () => <DateField label="Date" value={date} validationState="invalid" errorMessage="Invalid selection" />;
-export const HelpText = () => <DateField label="Date" value={date} description="Enter a date" />;
-export const FormatHelpText = () => <DateField label="Date" value={date} showFormatHelpText />;
-export const LabelPositionSide = () => <DateField label="Date" value={date} labelPosition="side" />;
-export const LabelAlignEnd = () => <DateField label="Date" value={date} labelAlign="end" />;
-export const Required = () => <DateField label="Date" value={date} isRequired />;
-export const RequiredLabel = () => <DateField label="Date" value={date} isRequired necessityIndicator="label" />;
-export const Optional = () => <DateField label="Date" value={date} necessityIndicator="label" />;
-export const NoLabel = () => <DateField aria-label="Date" value={date} />;
-export const QuietNoLabel = () => <DateField aria-label="Date" isQuiet value={date} />;
-export const CustomWidth = () => <DateField label="Date" value={date} width={500} />;
-export const QuietCustomWidth = () => <DateField label="Date" value={date} width={500} isQuiet />;
-export const CustomWidthNoLabel = () => <DateField aria-label="Date" value={date} width={500} />;
-export const QuietCustomWidthNoLabel = () => <DateField aria-label="Date" value={date} width={500} isQuiet />;
-export const CustomWidthLabelPositionSide = () => <DateField label="Date" value={date} width={500} labelPosition="side" />;
-export const QuietCustomWidthLabelPositionSide = () => <DateField label="Date" value={date} width={500} labelPosition="side" isQuiet />;
-export const CustomWidthSmall = () => <DateField label="Time" value={zonedDateTime} width={50} />;
-export const CustomWidthSmallInvalid = () => <DateField label="Time" value={zonedDateTime} width={50} validationState="invalid" />;
-export const CustomWidthSmallNoLabel = () => <DateField aria-label="Time" value={zonedDateTime} width={50} />;
+export const DisabledPlaceholder: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} isDisabled {...args} />;
+export const DisabledValue: DateFieldStory = (args) => <DateField label="Date" value={date} isDisabled {...args} />;
+export const ReadOnly: DateFieldStory = (args) => <DateField label="Date" value={date} isReadOnly {...args} />;
+export const QuietPlaceholder: DateFieldStory = (args) => <DateField label="Date" placeholderValue={date} isQuiet {...args} />;
+export const QuietValue: DateFieldStory = (args) => <DateField label="Date" value={date} isQuiet {...args} />;
+export const Invalid: DateFieldStory = (args) => <DateField label="Date" value={date} validationState="invalid" {...args} />;
+export const ErrorMessage: DateFieldStory = (args) => <DateField label="Date" value={date} validationState="invalid" errorMessage="Invalid selection" {...args} />;
+export const HelpText: DateFieldStory = (args) => <DateField label="Date" value={date} description="Enter a date" {...args} />;
+export const FormatHelpText: DateFieldStory = (args) => <DateField label="Date" value={date} showFormatHelpText {...args} />;
+export const LabelPositionSide: DateFieldStory = (args) => <DateField label="Date" value={date} labelPosition="side" {...args} />;
+export const LabelAlignEnd: DateFieldStory = (args) => <DateField label="Date" value={date} labelAlign="end" {...args} />;
+export const Required: DateFieldStory = (args) => <DateField label="Date" value={date} isRequired {...args} />;
+export const RequiredLabel: DateFieldStory = (args) => <DateField label="Date" value={date} isRequired necessityIndicator="label" {...args} />;
+export const Optional: DateFieldStory = (args) => <DateField label="Date" value={date} necessityIndicator="label" {...args} />;
+export const NoLabel: DateFieldStory = (args) => <DateField aria-label="Date" value={date} {...args} />;
+export const QuietNoLabel: DateFieldStory = (args) => <DateField aria-label="Date" isQuiet value={date} {...args} />;
+export const CustomWidth: DateFieldStory = (args) => <DateField label="Date" value={date} width={500} {...args} />;
+export const QuietCustomWidth: DateFieldStory = (args) => <DateField label="Date" value={date} width={500} isQuiet {...args} />;
+export const CustomWidthNoLabel: DateFieldStory = (args) => <DateField aria-label="Date" value={date} width={500} {...args} />;
+export const QuietCustomWidthNoLabel: DateFieldStory = (args) => <DateField aria-label="Date" value={date} width={500} isQuiet {...args} />;
+export const CustomWidthLabelPositionSide: DateFieldStory = (args) => <DateField label="Date" value={date} width={500} labelPosition="side" {...args} />;
+export const QuietCustomWidthLabelPositionSide: DateFieldStory = (args) => <DateField label="Date" value={date} width={500} labelPosition="side" isQuiet {...args} />;
+export const CustomWidthSmall: DateFieldStory = (args) => <DateField label="Time" value={zonedDateTime} width={50} {...args} />;
+export const CustomWidthSmallInvalid: DateFieldStory = (args) => <DateField label="Time" value={zonedDateTime} width={50} validationState="invalid" {...args} />;
+export const CustomWidthSmallNoLabel: DateFieldStory = (args) => <DateField aria-label="Time" value={zonedDateTime} width={50} {...args} />;
 
 let contextualHelp = (
   <ContextualHelp>
@@ -107,10 +110,10 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = () => <DateField label="Date" contextualHelp={contextualHelp} value={date} />;
-export const ContextualHelpSideLabel = () => <DateField label="Date" labelPosition="side" contextualHelp={contextualHelp} value={date} />;
+export const _ContextualHelp: DateFieldStory = (args) => <DateField label="Date" contextualHelp={contextualHelp} value={date} {...args} />;
+export const ContextualHelpSideLabel: DateFieldStory = (args) => <DateField label="Date" labelPosition="side" contextualHelp={contextualHelp} value={date} {...args} />;
 
-export const ArabicAlgeriaPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ArabicAlgeriaPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ArabicAlgeriaPreferences.parameters = {
   chromaticProvider: {
     locales: ['ar-DZ-u-ca-gregory', 'ar-DZ-u-ca-islamic', 'ar-DZ-u-ca-islamic-civil', 'ar-DZ-u-ca-islamic-tbla'],
@@ -120,7 +123,7 @@ ArabicAlgeriaPreferences.parameters = {
   }
 };
 
-export const ArabicUAEPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ArabicUAEPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ArabicUAEPreferences.parameters = {
   chromaticProvider: {
     locales: ['ar-AE-u-ca-gregory', 'ar-AE-u-ca-islamic-umalqura', 'ar-AE-u-ca-islamic', 'ar-AE-u-ca-islamic-civil', 'ar-AE-u-ca-islamic-tbla'],
@@ -130,7 +133,7 @@ ArabicUAEPreferences.parameters = {
   }
 };
 
-export const ArabicEgyptPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ArabicEgyptPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ArabicEgyptPreferences.parameters = {
   chromaticProvider: {
     locales: ['ar-EG-u-ca-gregory', 'ar-EG-u-ca-coptic', 'ar-EG-u-ca-islamic', 'ar-EG-u-ca-islamic-civil', 'ar-EG-u-ca-islamic-tbla'],
@@ -140,7 +143,7 @@ ArabicEgyptPreferences.parameters = {
   }
 };
 
-export const ArabicSaudiPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ArabicSaudiPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ArabicSaudiPreferences.parameters = {
   chromaticProvider: {
     locales: ['ar-SA-u-ca-islamic-umalqura', 'ar-SA-u-ca-gregory', 'ar-SA-u-ca-islamic', 'ar-SA-u-ca-islamic-rgsa'],
@@ -151,7 +154,7 @@ ArabicSaudiPreferences.parameters = {
 };
 
 
-export const HebrewPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const HebrewPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 HebrewPreferences.parameters = {
   chromaticProvider: {
     locales: ['he-IL-u-ca-gregory', 'he-IL-u-ca-hebrew', 'he-IL-u-ca-islamic-civil', 'he-IL-u-ca-islamic-tbla'],
@@ -161,7 +164,7 @@ HebrewPreferences.parameters = {
   }
 };
 
-export const JapanesePreferences = () =>  <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const JapanesePreferences: DateFieldStory = (args) =>  <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 JapanesePreferences.parameters = {
   chromaticProvider: {
     locales: ['ja-JP-u-ca-gregory', 'ja-JP-u-ca-japanese'],
@@ -171,7 +174,7 @@ JapanesePreferences.parameters = {
   }
 };
 
-export const ThaiPreferences = () =>  <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const ThaiPreferences: DateFieldStory = (args) =>  <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 ThaiPreferences.parameters = {
   chromaticProvider: {
     locales: ['th-TH-u-ca-buddhist', 'th-TH-u-ca-gregory'],
@@ -181,7 +184,7 @@ ThaiPreferences.parameters = {
   }
 };
 
-export const PersianPreferences = () => <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const PersianPreferences: DateFieldStory = (args) => <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 PersianPreferences.parameters = {
   chromaticProvider: {
     locales: ['fa-AF-u-ca-persian', 'fa-AF-u-ca-gregory', 'fa-AF-u-ca-islamic-civil', 'fa-AF-u-ca-islamic-tbla'],
@@ -191,7 +194,7 @@ PersianPreferences.parameters = {
   }
 };
 
-export const IndianPreferences = () =>  <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const IndianPreferences: DateFieldStory = (args) =>  <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 IndianPreferences.parameters = {
   chromaticProvider: {
     locales: ['hi-IN-u-ca-gregory', 'hi-IN-u-ca-indian'],
@@ -201,7 +204,7 @@ IndianPreferences.parameters = {
   }
 };
 
-export const AmharicPreferences = () =>  <Provider><DateField label="Date" value={dateTime} /></Provider>;
+export const AmharicPreferences: DateFieldStory = (args) =>  <Provider><DateField label="Date" value={dateTime} {...args} /></Provider>;
 AmharicPreferences.parameters = {
   chromaticProvider: {
     locales: ['am-ET-u-ca-gregory', 'am-ET-u-ca-ethiopic', 'am-ET-u-ca-ethioaa'],
diff --git a/packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx b/packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx
index e928ab54be3..15c10b5eadc 100644
--- a/packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/chromatic/DatePicker.stories.tsx
@@ -15,6 +15,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {DatePicker} from '../';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {userEvent, within} from '@storybook/testing-library';
 
@@ -25,7 +26,9 @@ export default {
       locales: ['en-US', 'ar-EG', 'ja-JP', 'he-IL']
     }
   }
-};
+} as Meta<typeof DatePicker>;
+
+export type DatePickerStory = StoryFn<typeof DatePicker>;
 
 const focusParams = {
   chromaticProvider: {
@@ -62,11 +65,11 @@ const date = new CalendarDate(2022, 2, 3);
 const dateTime = new CalendarDateTime(2022, 2, 3, 8, 45);
 const zonedDateTime = parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]');
 
-export const Placeholder = () => <DatePicker label="Date" placeholderValue={date} />;
-export const PlaceholderFocus = () => <DatePicker label="Date" placeholderValue={date} autoFocus />;
+export const Placeholder: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} {...args} />;
+export const PlaceholderFocus: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocus.parameters = focusParams;
 
-export const PlaceholderFocusRTL = () => <DatePicker label="Date" placeholderValue={date} autoFocus />;
+export const PlaceholderFocusRTL: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocusRTL.parameters = {
   chromaticProvider: {
     locales: ['ar-EG'],
@@ -76,47 +79,47 @@ PlaceholderFocusRTL.parameters = {
   }
 };
 
-export const PlaceholderFocusExpress = () => <DatePicker label="Date" placeholderValue={date} autoFocus />;
+export const PlaceholderFocusExpress: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} autoFocus {...args} />;
 PlaceholderFocusExpress.parameters = {
   chromaticProvider: {
     express: true
   }
 };
 
-export const PlaceholderTime = () => <DatePicker label="Date" placeholderValue={dateTime} />;
-export const PlaceholderZoned = () => <DatePicker label="Date" placeholderValue={zonedDateTime} />;
-export const Value = () => <DatePicker label="Date" value={date} />;
-export const ValueTime = () => <DatePicker label="Date" value={dateTime} />;
-export const ValueZoned = () => <DatePicker label="Date" value={zonedDateTime} />;
-export const ValueFocus = () => <DatePicker label="Date" value={date} autoFocus />;
+export const PlaceholderTime: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={dateTime} {...args} />;
+export const PlaceholderZoned: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={zonedDateTime} {...args} />;
+export const Value: DatePickerStory = (args) => <DatePicker label="Date" value={date} {...args} />;
+export const ValueTime: DatePickerStory = (args) => <DatePicker label="Date" value={dateTime} {...args} />;
+export const ValueZoned: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} {...args} />;
+export const ValueFocus: DatePickerStory = (args) => <DatePicker label="Date" value={date} autoFocus {...args} />;
 ValueFocus.parameters = focusParams;
 
-export const DisabledPlaceholder = () => <DatePicker label="Date" placeholderValue={date} isDisabled />;
-export const DisabledValue = () => <DatePicker label="Date" value={date} isDisabled />;
-export const ReadOnly = () => <DatePicker label="Date" value={date} isReadOnly />;
-export const QuietPlaceholder = () => <DatePicker label="Date" placeholderValue={date} isQuiet />;
-export const QuietValue = () => <DatePicker label="Date" value={date} isQuiet />;
-export const Invalid = () => <DatePicker label="Date" value={date} validationState="invalid" />;
-export const Unavailable = () => <DatePicker label="Date" value={date} isDateUnavailable={date => date.day <= 10} />;
-export const ErrorMessage = () => <DatePicker label="Date" value={date} validationState="invalid" errorMessage="Invalid selection" />;
-export const HelpText = () => <DatePicker label="Date" value={date} description="Enter a date" />;
-export const FormatHelpText = () => <DatePicker label="Date" value={date} showFormatHelpText />;
-export const LabelPositionSide = () => <DatePicker label="Date" value={date} labelPosition="side" />;
-export const LabelAlignEnd = () => <DatePicker label="Date" value={date} labelAlign="end" />;
-export const Required = () => <DatePicker label="Date" value={date} isRequired />;
-export const RequiredLabel = () => <DatePicker label="Date" value={date} isRequired necessityIndicator="label" />;
-export const Optional = () => <DatePicker label="Date" value={date} necessityIndicator="label" />;
-export const NoLabel = () => <DatePicker aria-label="Date" value={date} />;
-export const QuietNoLabel = () => <DatePicker aria-label="Date" isQuiet value={date} />;
-export const CustomWidth = () => <DatePicker label="Date" value={date} width={500} />;
-export const QuietCustomWidth = () => <DatePicker label="Date" value={date} width={500} isQuiet />;
-export const CustomWidthNoLabel = () => <DatePicker aria-label="Date" value={date} width={500} />;
-export const QuietCustomWidthNoLabel = () => <DatePicker aria-label="Date" value={date} width={500} isQuiet />;
-export const CustomWidthLabelPositionSide = () => <DatePicker label="Date" value={date} width={500} labelPosition="side" />;
-export const QuietCustomWidthLabelPositionSide = () => <DatePicker label="Date" value={date} width={500} labelPosition="side" isQuiet />;
-export const CustomWidthSmall = () => <DatePicker label="Date" value={zonedDateTime} width={50} />;
-export const CustomWidthSmallInvalid = () => <DatePicker label="Date" value={zonedDateTime} width={50} validationState="invalid" />;
-export const CustomWidthSmallNoLabel = () => <DatePicker aria-label="Date" value={zonedDateTime} width={50} />;
+export const DisabledPlaceholder: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} isDisabled {...args} />;
+export const DisabledValue: DatePickerStory = (args) => <DatePicker label="Date" value={date} isDisabled {...args} />;
+export const ReadOnly: DatePickerStory = (args) => <DatePicker label="Date" value={date} isReadOnly {...args} />;
+export const QuietPlaceholder: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} isQuiet {...args} />;
+export const QuietValue: DatePickerStory = (args) => <DatePicker label="Date" value={date} isQuiet {...args} />;
+export const Invalid: DatePickerStory = (args) => <DatePicker label="Date" value={date} validationState="invalid" {...args} />;
+export const Unavailable: DatePickerStory = (args) => <DatePicker label="Date" value={date} isDateUnavailable={date => date.day <= 10} {...args} />;
+export const ErrorMessage: DatePickerStory = (args) => <DatePicker label="Date" value={date} validationState="invalid" errorMessage="Invalid selection" {...args} />;
+export const HelpText: DatePickerStory = (args) => <DatePicker label="Date" value={date} description="Enter a date" {...args} />;
+export const FormatHelpText: DatePickerStory = (args) => <DatePicker label="Date" value={date} showFormatHelpText {...args} />;
+export const LabelPositionSide: DatePickerStory = (args) => <DatePicker label="Date" value={date} labelPosition="side" {...args} />;
+export const LabelAlignEnd: DatePickerStory = (args) => <DatePicker label="Date" value={date} labelAlign="end" {...args} />;
+export const Required: DatePickerStory = (args) => <DatePicker label="Date" value={date} isRequired {...args} />;
+export const RequiredLabel: DatePickerStory = (args) => <DatePicker label="Date" value={date} isRequired necessityIndicator="label" {...args} />;
+export const Optional: DatePickerStory = (args) => <DatePicker label="Date" value={date} necessityIndicator="label" {...args} />;
+export const NoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" value={date} {...args} />;
+export const QuietNoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" isQuiet value={date} {...args} />;
+export const CustomWidth: DatePickerStory = (args) => <DatePicker label="Date" value={date} width={500} {...args} />;
+export const QuietCustomWidth: DatePickerStory = (args) => <DatePicker label="Date" value={date} width={500} isQuiet {...args} />;
+export const CustomWidthNoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" value={date} width={500} {...args} />;
+export const QuietCustomWidthNoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" value={date} width={500} isQuiet {...args} />;
+export const CustomWidthLabelPositionSide: DatePickerStory = (args) => <DatePicker label="Date" value={date} width={500} labelPosition="side" {...args} />;
+export const QuietCustomWidthLabelPositionSide: DatePickerStory = (args) => <DatePicker label="Date" value={date} width={500} labelPosition="side" isQuiet {...args} />;
+export const CustomWidthSmall: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} width={50} {...args} />;
+export const CustomWidthSmallInvalid: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} width={50} validationState="invalid" {...args} />;
+export const CustomWidthSmallNoLabel: DatePickerStory = (args) => <DatePicker aria-label="Date" value={zonedDateTime} width={50} {...args} />;
 
 let contextualHelp = (
   <ContextualHelp>
@@ -125,50 +128,50 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = () => <DatePicker label="Date" contextualHelp={contextualHelp} value={date} />;
-export const ContextualHelpSideLabel = () => <DatePicker label="Date" labelPosition="side" contextualHelp={contextualHelp} value={date} />;
+export const _ContextualHelp: DatePickerStory = (args) => <DatePicker label="Date" contextualHelp={contextualHelp} value={date} {...args} />;
+export const ContextualHelpSideLabel: DatePickerStory = (args) => <DatePicker label="Date" labelPosition="side" contextualHelp={contextualHelp} value={date} {...args} />;
 
-export const OpenPlaceholder = () => <DatePicker label="Date" placeholderValue={date} isOpen shouldFlip={false} />;
+export const OpenPlaceholder: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} isOpen shouldFlip={false} {...args} />;
 OpenPlaceholder.parameters = openParams;
 OpenPlaceholder.decorators = openDecorators;
 
-export const OpenPlaceholderRTL = () => <DatePicker label="Date" placeholderValue={date} isOpen shouldFlip={false} />;
+export const OpenPlaceholderRTL: DatePickerStory = (args) => <DatePicker label="Date" placeholderValue={date} isOpen shouldFlip={false} {...args} />;
 OpenPlaceholderRTL.parameters = openParamsRTL;
 OpenPlaceholderRTL.decorators = openDecorators;
 
-export const OpenValue = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} />;
+export const OpenValue: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} {...args} />;
 OpenValue.parameters = openParams;
 OpenValue.decorators = openDecorators;
 
-export const OpenValueRTL = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} />;
+export const OpenValueRTL: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} {...args} />;
 OpenValueRTL.parameters = openParamsRTL;
 OpenValueRTL.decorators = openDecorators;
 
-export const OpenTime = () => <DatePicker label="Date" value={dateTime} isOpen shouldFlip={false} />;
+export const OpenTime: DatePickerStory = (args) => <DatePicker label="Date" value={dateTime} isOpen shouldFlip={false} {...args} />;
 OpenTime.parameters = openParams;
 OpenTime.decorators = openDecorators;
 
-export const OpenZoned = () => <DatePicker label="Date" value={zonedDateTime} isOpen shouldFlip={false} />;
+export const OpenZoned: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} isOpen shouldFlip={false} {...args} />;
 OpenZoned.parameters = openParams;
 OpenZoned.decorators = openDecorators;
 
-export const OpenInvalid = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} validationState="invalid" />;
+export const OpenInvalid: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} validationState="invalid" {...args} />;
 OpenInvalid.parameters = openParams;
 OpenInvalid.decorators = openDecorators;
 
-export const OpenErrorMessage = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} validationState="invalid" errorMessage="Invalid selection" />;
+export const OpenErrorMessage: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} validationState="invalid" errorMessage="Invalid selection" {...args} />;
 OpenErrorMessage.parameters = openParams;
 OpenErrorMessage.decorators = openDecorators;
 
-export const OpenInvalidTime = () => <DatePicker label="Date" value={zonedDateTime} isOpen shouldFlip={false} validationState="invalid" />;
+export const OpenInvalidTime: DatePickerStory = (args) => <DatePicker label="Date" value={zonedDateTime} isOpen shouldFlip={false} validationState="invalid" {...args} />;
 OpenInvalidTime.parameters = openParams;
 OpenInvalidTime.decorators = openDecorators;
 
-export const OpenUnavailable = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} isDateUnavailable={date => date.day <= 10} />;
+export const OpenUnavailable: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} isDateUnavailable={date => date.day <= 10} {...args} />;
 OpenUnavailable.parameters = openParams;
 OpenUnavailable.decorators = openDecorators;
 
-export const OpenExpress = () => <DatePicker label="Date" value={dateTime} isOpen shouldFlip={false} />;
+export const OpenExpress: DatePickerStory = (args) => <DatePicker label="Date" value={dateTime} isOpen shouldFlip={false} {...args} />;
 OpenExpress.parameters = {
   chromaticProvider: {
     express: true,
@@ -177,7 +180,7 @@ OpenExpress.parameters = {
 };
 OpenExpress.decorators = openDecorators;
 
-export const OpenLTRInteractions = () => <DatePicker label="Date" value={date} />;
+export const OpenLTRInteractions: DatePickerStory = (args) => <DatePicker label="Date" value={date} {...args} />;
 OpenLTRInteractions.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -199,7 +202,7 @@ OpenLTRInteractions.play = async ({canvasElement}) => {
   await userEvent.keyboard('[ArrowRight]');
 };
 
-export const OpenRTLInteractions = () => <DatePicker label="Date" value={date} />;
+export const OpenRTLInteractions: DatePickerStory = (args) => <DatePicker label="Date" value={date} {...args} />;
 OpenRTLInteractions.parameters = {
   chromaticProvider: {
     locales: ['ar-EG'],
@@ -221,11 +224,11 @@ OpenRTLInteractions.play = async ({canvasElement}) => {
   await userEvent.keyboard('[ArrowLeft]');
 };
 
-export const MultipleMonths = () => <DatePicker label="Date" value={date} isOpen shouldFlip={false} maxVisibleMonths={3} />;
+export const MultipleMonths: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen shouldFlip={false} maxVisibleMonths={3} {...args} />;
 MultipleMonths.parameters = openParams;
 MultipleMonths.decorators = [Story => <div style={{height: 550, width: 1000}}><Story /></div>];
 
-export const Tray = () => <DatePicker label="Date" value={date} isOpen />;
+export const Tray: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen {...args} />;
 Tray.parameters = {
   chromaticProvider: {
     colorSchemes: ['light'],
@@ -239,7 +242,7 @@ Tray.parameters = {
   }
 };
 
-export const TrayExpress = () => <DatePicker label="Date" value={date} isOpen />;
+export const TrayExpress: DatePickerStory = (args) => <DatePicker label="Date" value={date} isOpen {...args} />;
 TrayExpress.parameters = {
   chromaticProvider: {
     colorSchemes: ['light'],
diff --git a/packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx
index 411030f8d1c..8bccaa778a5 100644
--- a/packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/chromatic/DateRangePicker.stories.tsx
@@ -15,6 +15,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {DateRangePicker} from '../';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {userEvent, within} from '@storybook/testing-library';
 
@@ -25,7 +26,9 @@ export default {
       locales: ['en-US', 'ar-EG', 'ja-JP', 'he-IL']
     }
   }
-};
+} as Meta<typeof DateRangePicker>;
+
+export type DateRangePickerStory = StoryFn<typeof DateRangePicker>;
 
 const focusParams = {
   chromaticProvider: {
@@ -73,11 +76,11 @@ const zoned = {
   end: parseZonedDateTime('2021-11-19T00:45-08:00[America/Los_Angeles]')
 };
 
-export const Placeholder = () => <DateRangePicker label="Date" placeholderValue={value.start} />;
-export const PlaceholderFocus = () => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus />;
+export const Placeholder: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} {...args} />;
+export const PlaceholderFocus: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus {...args} />;
 PlaceholderFocus.parameters = focusParams;
 
-export const PlaceholderFocusRTL = () => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus />;
+export const PlaceholderFocusRTL: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus {...args} />;
 PlaceholderFocusRTL.parameters = {
   chromaticProvider: {
     locales: ['he-IL'],
@@ -87,47 +90,47 @@ PlaceholderFocusRTL.parameters = {
   }
 };
 
-export const PlaceholderFocusExpress = () => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus />;
+export const PlaceholderFocusExpress: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} autoFocus {...args} />;
 PlaceholderFocusExpress.parameters = {
   chromaticProvider: {
     express: true
   }
 };
 
-export const PlaceholderTime = () => <DateRangePicker label="Date" placeholderValue={dateTime.start} />;
-export const PlaceholderZoned = () => <DateRangePicker label="Date" placeholderValue={zoned.start} />;
-export const Value = () => <DateRangePicker label="Date" value={value} />;
-export const ValueTime = () => <DateRangePicker label="Date" value={dateTime} />;
-export const ValueZoned = () => <DateRangePicker label="Date" value={zoned} />;
-export const ValueFocus = () => <DateRangePicker label="Date" value={value} autoFocus />;
+export const PlaceholderTime: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={dateTime.start} {...args} />;
+export const PlaceholderZoned: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={zoned.start} {...args} />;
+export const Value: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} {...args} />;
+export const ValueTime: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={dateTime} {...args} />;
+export const ValueZoned: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} {...args} />;
+export const ValueFocus: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} autoFocus {...args} />;
 ValueFocus.parameters = focusParams;
 
-export const DisabledPlaceholder = () => <DateRangePicker label="Date" placeholderValue={value.start} isDisabled />;
-export const DisabledValue = () => <DateRangePicker label="Date" value={value} isDisabled />;
-export const ReadOnly = () => <DateRangePicker label="Date" value={value} isReadOnly />;
-export const QuietPlaceholder = () => <DateRangePicker label="Date" placeholderValue={value.start} isQuiet />;
-export const QuietValue = () => <DateRangePicker label="Date" value={value} isQuiet />;
-export const Invalid = () => <DateRangePicker label="Date" value={value} validationState="invalid" />;
-export const Unavailable = () => <DateRangePicker label="Date" value={value} isDateUnavailable={date => date.day <= 10} />;
-export const ErrorMessage = () => <DateRangePicker label="Date" value={value} validationState="invalid" errorMessage="Invalid selection" />;
-export const HelpText = () => <DateRangePicker label="Date" value={value} description="Enter a date" />;
-export const FormatHelpText = () => <DateRangePicker label="Date" value={value} showFormatHelpText />;
-export const LabelPositionSide = () => <DateRangePicker label="Date" value={value} labelPosition="side" />;
-export const LabelAlignEnd = () => <DateRangePicker label="Date" value={value} labelAlign="end" />;
-export const Required = () => <DateRangePicker label="Date" value={value} isRequired />;
-export const RequiredLabel = () => <DateRangePicker label="Date" value={value} isRequired necessityIndicator="label" />;
-export const Optional = () => <DateRangePicker label="Date" value={value} necessityIndicator="label" />;
-export const NoLabel = () => <DateRangePicker aria-label="Date" value={value} />;
-export const QuietNoLabel = () => <DateRangePicker aria-label="Date" isQuiet value={value} />;
-export const CustomWidth = () => <DateRangePicker label="Date" value={value} width={500} />;
-export const QuietCustomWidth = () => <DateRangePicker label="Date" value={value} width={500} isQuiet />;
-export const CustomWidthNoLabel = () => <DateRangePicker aria-label="Date" value={value} width={500} />;
-export const QuietCustomWidthNoLabel = () => <DateRangePicker aria-label="Date" value={value} width={500} isQuiet />;
-export const CustomWidthLabelPositionSide = () => <DateRangePicker label="Date" value={value} width={500} labelPosition="side" />;
-export const QuietCustomWidthLabelPositionSide = () => <DateRangePicker label="Date" value={value} width={500} labelPosition="side" isQuiet />;
-export const CustomWidthSmall = () => <DateRangePicker label="Date" value={zoned} width={50} />;
-export const CustomWidthSmallInvalid = () => <DateRangePicker label="Date" value={zoned} width={50} validationState="invalid" />;
-export const CustomWidthSmallNoLabel = () => <DateRangePicker aria-label="Date" value={zoned} width={50} />;
+export const DisabledPlaceholder: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} isDisabled {...args} />;
+export const DisabledValue: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isDisabled {...args} />;
+export const ReadOnly: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isReadOnly {...args} />;
+export const QuietPlaceholder: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} isQuiet {...args} />;
+export const QuietValue: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isQuiet {...args} />;
+export const Invalid: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} validationState="invalid" {...args} />;
+export const Unavailable: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isDateUnavailable={date => date.day <= 10} {...args} />;
+export const ErrorMessage: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} validationState="invalid" errorMessage="Invalid selection" {...args} />;
+export const HelpText: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} description="Enter a date" {...args} />;
+export const FormatHelpText: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} showFormatHelpText {...args} />;
+export const LabelPositionSide: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} labelPosition="side" {...args} />;
+export const LabelAlignEnd: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} labelAlign="end" {...args} />;
+export const Required: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isRequired {...args} />;
+export const RequiredLabel: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isRequired necessityIndicator="label" {...args} />;
+export const Optional: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} necessityIndicator="label" {...args} />;
+export const NoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" value={value} {...args} />;
+export const QuietNoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" isQuiet value={value} {...args} />;
+export const CustomWidth: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} width={500} {...args} />;
+export const QuietCustomWidth: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} width={500} isQuiet {...args} />;
+export const CustomWidthNoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" value={value} width={500} {...args} />;
+export const QuietCustomWidthNoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" value={value} width={500} isQuiet {...args} />;
+export const CustomWidthLabelPositionSide: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} width={500} labelPosition="side" {...args} />;
+export const QuietCustomWidthLabelPositionSide: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} width={500} labelPosition="side" isQuiet {...args} />;
+export const CustomWidthSmall: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} width={50} {...args} />;
+export const CustomWidthSmallInvalid: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} width={50} validationState="invalid" {...args} />;
+export const CustomWidthSmallNoLabel: DateRangePickerStory = (args) => <DateRangePicker aria-label="Date" value={zoned} width={50} {...args} />;
 
 let contextualHelp = (
   <ContextualHelp>
@@ -136,50 +139,50 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = () => <DateRangePicker label="Date" contextualHelp={contextualHelp} value={value} />;
-export const ContextualHelpSideLabel = () => <DateRangePicker label="Date" labelPosition="side" contextualHelp={contextualHelp} value={value} />;
+export const _ContextualHelp: DateRangePickerStory = (args) => <DateRangePicker label="Date" contextualHelp={contextualHelp} value={value} {...args} />;
+export const ContextualHelpSideLabel: DateRangePickerStory = (args) => <DateRangePicker label="Date" labelPosition="side" contextualHelp={contextualHelp} value={value} {...args} />;
 
-export const OpenPlaceholder = () => <DateRangePicker label="Date" placeholderValue={value.start} isOpen />;
+export const OpenPlaceholder: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} isOpen {...args} />;
 OpenPlaceholder.parameters = openParams;
 OpenPlaceholder.decorators = openDecorators;
 
-export const OpenPlaceholderRTL = () => <DateRangePicker label="Date" placeholderValue={value.start} isOpen />;
+export const OpenPlaceholderRTL: DateRangePickerStory = (args) => <DateRangePicker label="Date" placeholderValue={value.start} isOpen {...args} />;
 OpenPlaceholderRTL.parameters = openParamsRTL;
 OpenPlaceholderRTL.decorators = openDecorators;
 
-export const OpenValue = () => <DateRangePicker label="Date" value={value} isOpen />;
+export const OpenValue: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen {...args} />;
 OpenValue.parameters = openParams;
 OpenValue.decorators = openDecorators;
 
-export const OpenValueRTL = () => <DateRangePicker label="Date" value={value} isOpen />;
+export const OpenValueRTL: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen {...args} />;
 OpenValueRTL.parameters = openParamsRTL;
 OpenValueRTL.decorators = openDecorators;
 
-export const OpenTime = () => <DateRangePicker label="Date" value={dateTime} isOpen />;
+export const OpenTime: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={dateTime} isOpen {...args} />;
 OpenTime.parameters = openParams;
 OpenTime.decorators = openDecorators;
 
-export const OpenZoned = () => <DateRangePicker label="Date" value={zoned} isOpen />;
+export const OpenZoned: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} isOpen {...args} />;
 OpenZoned.parameters = openParams;
 OpenZoned.decorators = openDecorators;
 
-export const OpenInvalid = () => <DateRangePicker label="Date" value={value} isOpen validationState="invalid" />;
+export const OpenInvalid: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen validationState="invalid" {...args} />;
 OpenInvalid.parameters = openParams;
 OpenInvalid.decorators = openDecorators;
 
-export const OpenErrorMessage = () => <DateRangePicker label="Date" value={value} isOpen validationState="invalid" errorMessage="Invalid selection" />;
+export const OpenErrorMessage: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen validationState="invalid" errorMessage="Invalid selection" {...args} />;
 OpenErrorMessage.parameters = openParams;
 OpenErrorMessage.decorators = openDecorators;
 
-export const OpenInvalidTime = () => <DateRangePicker label="Date" value={zoned} isOpen validationState="invalid" />;
+export const OpenInvalidTime: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={zoned} isOpen validationState="invalid" {...args} />;
 OpenInvalidTime.parameters = openParams;
 OpenInvalidTime.decorators = openDecorators;
 
-export const OpenUnavailable = () => <DateRangePicker label="Date" value={value} isOpen isDateUnavailable={date => date.day <= 10} />;
+export const OpenUnavailable: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen isDateUnavailable={date => date.day <= 10} {...args} />;
 OpenUnavailable.parameters = openParams;
 OpenUnavailable.decorators = openDecorators;
 
-export const OpenExpress = () => <DateRangePicker label="Date" value={dateTime} isOpen />;
+export const OpenExpress: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={dateTime} isOpen {...args} />;
 OpenExpress.parameters = {
   chromaticProvider: {
     express: true,
@@ -188,7 +191,7 @@ OpenExpress.parameters = {
 };
 OpenExpress.decorators = openDecorators;
 
-export const OpenFocusLTRInteractions = () => <DateRangePicker label="Date" value={value} />;
+export const OpenFocusLTRInteractions: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} {...args} />;
 OpenFocusLTRInteractions.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -213,7 +216,7 @@ OpenFocusLTRInteractions.play = async ({canvasElement}) => {
   await userEvent.keyboard('[ArrowLeft]');
 };
 
-export const OpenFocusRTLInteractions = () => <DateRangePicker label="Date" value={value} />;
+export const OpenFocusRTLInteractions: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} {...args} />;
 OpenFocusRTLInteractions.parameters = {
   chromaticProvider: {
     locales: ['he-IL'],
@@ -236,11 +239,11 @@ OpenFocusRTLInteractions.play = async ({canvasElement}) => {
   await userEvent.keyboard('[ArrowRight]');
 };
 
-export const MultipleMonths = () => <DateRangePicker label="Date" value={value} isOpen maxVisibleMonths={3} />;
+export const MultipleMonths: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen maxVisibleMonths={3} {...args} />;
 MultipleMonths.parameters = openParams;
 MultipleMonths.decorators = [Story => <div style={{height: 550, width: 1000}}><Story /></div>];
 
-export const Tray = () => <DateRangePicker label="Date" value={value} isOpen />;
+export const Tray: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen {...args} />;
 Tray.parameters = {
   chromaticProvider: {
     colorSchemes: ['light'],
@@ -254,7 +257,7 @@ Tray.parameters = {
   }
 };
 
-export const TrayExpress = () => <DateRangePicker label="Date" value={value} isOpen />;
+export const TrayExpress: DateRangePickerStory = (args) => <DateRangePicker label="Date" value={value} isOpen {...args} />;
 TrayExpress.parameters = {
   chromaticProvider: {
     colorSchemes: ['light'],
diff --git a/packages/@react-spectrum/datepicker/chromatic/TimeField.stories.tsx b/packages/@react-spectrum/datepicker/chromatic/TimeField.stories.tsx
index 1c63080e598..f610c8d9ad2 100644
--- a/packages/@react-spectrum/datepicker/chromatic/TimeField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/chromatic/TimeField.stories.tsx
@@ -13,6 +13,7 @@
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {parseZonedDateTime, Time} from '@internationalized/date';
 import React from 'react';
 import {TimeField} from '../';
@@ -24,14 +25,16 @@ export default {
       locales: ['en-US', 'ar-EG', 'ja-JP']
     }
   }
-};
+} as Meta<typeof TimeField>;
+
+export type TimeFieldStory = StoryFn<typeof TimeField>;
 
 const time = new Time(8, 45);
 const zoned = parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]');
 
-export const Placeholder = () => <TimeField label="Time" placeholderValue={time} />;
-export const PlaceholderZoned = () => <TimeField label="Time" placeholderValue={zoned} />;
-export const PlaceholderFocus = () => <TimeField label="Time" placeholderValue={time} autoFocus />;
+export const Placeholder: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} {...args} />;
+export const PlaceholderZoned: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={zoned} {...args} />;
+export const PlaceholderFocus: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} autoFocus {...args} />;
 PlaceholderFocus.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -41,7 +44,7 @@ PlaceholderFocus.parameters = {
   }
 };
 
-export const PlaceholderFocusRTL = () => <TimeField label="Time" placeholderValue={time} autoFocus />;
+export const PlaceholderFocusRTL: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} autoFocus {...args} />;
 PlaceholderFocusRTL.parameters = {
   chromaticProvider: {
     locales: ['ar-EG'],
@@ -51,16 +54,16 @@ PlaceholderFocusRTL.parameters = {
   }
 };
 
-export const PlaceholderFocusExpress = () => <TimeField label="Time" placeholderValue={time} autoFocus />;
+export const PlaceholderFocusExpress: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} autoFocus {...args} />;
 PlaceholderFocusExpress.parameters = {
   chromaticProvider: {
     express: true
   }
 };
 
-export const Value = () => <TimeField label="Time" value={time} />;
-export const ValueZoned = () => <TimeField label="Time" value={zoned} />;
-export const ValueFocus = () => <TimeField label="Time" value={time} autoFocus />;
+export const Value: TimeFieldStory = (args) => <TimeField label="Time" value={time} {...args} />;
+export const ValueZoned: TimeFieldStory = (args) => <TimeField label="Time" value={zoned} {...args} />;
+export const ValueFocus: TimeFieldStory = (args) => <TimeField label="Time" value={time} autoFocus {...args} />;
 ValueFocus.parameters = {
   chromaticProvider: {
     locales: ['en-US'],
@@ -70,30 +73,30 @@ ValueFocus.parameters = {
   }
 };
 
-export const DisabledPlaceholder = () => <TimeField label="Time" placeholderValue={time} isDisabled />;
-export const DisabledValue = () => <TimeField label="Time" value={time} isDisabled />;
-export const ReadOnly = () => <TimeField label="Time" value={time} isReadOnly />;
-export const QuietPlaceholder = () => <TimeField label="Time" placeholderValue={time} isQuiet />;
-export const QuietValue = () => <TimeField label="Time" value={time} isQuiet />;
-export const Invalid = () => <TimeField label="Time" value={time} validationState="invalid" />;
-export const ErrorMessage = () => <TimeField label="Time" value={time} validationState="invalid" errorMessage="Invalid selection" />;
-export const HelpText = () => <TimeField label="Time" value={time} description="Enter a date" />;
-export const LabelPositionSide = () => <TimeField label="Time" value={time} labelPosition="side" />;
-export const LabelAlignEnd = () => <TimeField label="Time" value={time} labelAlign="end" />;
-export const Required = () => <TimeField label="Time" value={time} isRequired />;
-export const RequiredLabel = () => <TimeField label="Time" value={time} isRequired necessityIndicator="label" />;
-export const Optional = () => <TimeField label="Time" value={time} necessityIndicator="label" />;
-export const NoLabel = () => <TimeField aria-label="Time" value={time} />;
-export const QuietNoLabel = () => <TimeField aria-label="Time" isQuiet value={time} />;
-export const CustomWidth = () => <TimeField label="Time" value={time} width={500} />;
-export const QuietCustomWidth = () => <TimeField label="Time" value={time} width={500} isQuiet />;
-export const CustomWidthNoLabel = () => <TimeField aria-label="Time" value={time} width={500} />;
-export const QuietCustomWidthNoLabel = () => <TimeField aria-label="Time" value={time} width={500} isQuiet />;
-export const CustomWidthLabelPositionSide = () => <TimeField label="Time" value={time} width={500} labelPosition="side" />;
-export const QuietCustomWidthLabelPositionSide = () => <TimeField label="Time" value={time} width={500} labelPosition="side" isQuiet />;
-export const CustomWidthSmall = () => <TimeField label="Time" value={zoned} width={50} />;
-export const CustomWidthSmallInvalid = () => <TimeField label="Time" value={zoned} width={50} validationState="invalid" />;
-export const CustomWidthSmallNoLabel = () => <TimeField aria-label="Time" value={zoned} width={50} />;
+export const DisabledPlaceholder: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} isDisabled {...args} />;
+export const DisabledValue: TimeFieldStory = (args) => <TimeField label="Time" value={time} isDisabled {...args} />;
+export const ReadOnly: TimeFieldStory = (args) => <TimeField label="Time" value={time} isReadOnly {...args} />;
+export const QuietPlaceholder: TimeFieldStory = (args) => <TimeField label="Time" placeholderValue={time} isQuiet {...args} />;
+export const QuietValue: TimeFieldStory = (args) => <TimeField label="Time" value={time} isQuiet {...args} />;
+export const Invalid: TimeFieldStory = (args) => <TimeField label="Time" value={time} validationState="invalid" {...args} />;
+export const ErrorMessage: TimeFieldStory = (args) => <TimeField label="Time" value={time} validationState="invalid" errorMessage="Invalid selection" {...args} />;
+export const HelpText: TimeFieldStory = (args) => <TimeField label="Time" value={time} description="Enter a date" {...args} />;
+export const LabelPositionSide: TimeFieldStory = (args) => <TimeField label="Time" value={time} labelPosition="side" {...args} />;
+export const LabelAlignEnd: TimeFieldStory = (args) => <TimeField label="Time" value={time} labelAlign="end" {...args} />;
+export const Required: TimeFieldStory = (args) => <TimeField label="Time" value={time} isRequired {...args} />;
+export const RequiredLabel: TimeFieldStory = (args) => <TimeField label="Time" value={time} isRequired necessityIndicator="label" {...args} />;
+export const Optional: TimeFieldStory = (args) => <TimeField label="Time" value={time} necessityIndicator="label" {...args} />;
+export const NoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" value={time} {...args} />;
+export const QuietNoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" isQuiet value={time} {...args} />;
+export const CustomWidth: TimeFieldStory = (args) => <TimeField label="Time" value={time} width={500} {...args} />;
+export const QuietCustomWidth: TimeFieldStory = (args) => <TimeField label="Time" value={time} width={500} isQuiet {...args} />;
+export const CustomWidthNoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" value={time} width={500} {...args} />;
+export const QuietCustomWidthNoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" value={time} width={500} isQuiet {...args} />;
+export const CustomWidthLabelPositionSide: TimeFieldStory = (args) => <TimeField label="Time" value={time} width={500} labelPosition="side" {...args} />;
+export const QuietCustomWidthLabelPositionSide: TimeFieldStory = (args) => <TimeField label="Time" value={time} width={500} labelPosition="side" isQuiet {...args} />;
+export const CustomWidthSmall: TimeFieldStory = (args) => <TimeField label="Time" value={zoned} width={50} {...args} />;
+export const CustomWidthSmallInvalid: TimeFieldStory = (args) => <TimeField label="Time" value={zoned} width={50} validationState="invalid" {...args} />;
+export const CustomWidthSmallNoLabel: TimeFieldStory = (args) => <TimeField aria-label="Time" value={zoned} width={50} {...args} />;
 
 let contextualHelp = (
   <ContextualHelp>
@@ -102,5 +105,5 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = () => <TimeField label="Date" contextualHelp={contextualHelp} value={time} />;
-export const ContextualHelpSideLabel = () => <TimeField label="Date" labelPosition="side" contextualHelp={contextualHelp} value={time} />;
+export const _ContextualHelp: TimeFieldStory = (args) => <TimeField label="Date" contextualHelp={contextualHelp} value={time} {...args} />;
+export const ContextualHelpSideLabel: TimeFieldStory = (args) => <TimeField label="Date" labelPosition="side" contextualHelp={contextualHelp} value={time} {...args} />;
diff --git a/packages/@react-spectrum/datepicker/src/Input.tsx b/packages/@react-spectrum/datepicker/src/Input.tsx
index ba8f56eb937..e86acd524ec 100644
--- a/packages/@react-spectrum/datepicker/src/Input.tsx
+++ b/packages/@react-spectrum/datepicker/src/Input.tsx
@@ -14,12 +14,28 @@ import Alert from '@spectrum-icons/ui/AlertMedium';
 import Checkmark from '@spectrum-icons/ui/CheckmarkMedium';
 import {classNames, useValueEffect} from '@react-spectrum/utils';
 import datepickerStyles from './styles.css';
+import {FocusableProps, ValidationState} from '@react-types/shared';
 import {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import React, {ReactElement, useCallback, useRef} from 'react';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 
-export const Input = React.forwardRef(function Input(props: any, ref: any) {
+interface InputProps extends FocusableProps {
+  isDisabled?: boolean,
+  isQuiet?: boolean,
+  inputClassName?: string,
+  validationState: ValidationState | null,
+  children?: React.ReactNode,
+  fieldProps?: React.HTMLAttributes<HTMLDivElement>,
+  className?: string,
+  style?: React.CSSProperties,
+  disableFocusRing?: boolean,
+  minWidth?: string
+}
+
+export const Input:
+  React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLElement>> =
+React.forwardRef(function Input(props: InputProps, ref: any) {
   let inputRef = useRef<HTMLInputElement | null>(null);
   let {
     isDisabled,
diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
index c142d595698..e89d49ea9be 100644
--- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
@@ -21,8 +21,9 @@ import {DateValue} from '@react-types/calendar';
 import {Flex} from '@react-spectrum/layout';
 import {Item, Picker, Section} from '@react-spectrum/picker';
 import {Key} from '@react-types/shared';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@adobe/react-spectrum';
-import React from 'react';
+import React, {JSX} from 'react';
 import {useLocale} from '@react-aria/i18n';
 
 const BlockDecorator = storyFn => <div>{storyFn()}</div>;
@@ -31,105 +32,107 @@ export default {
   title: 'Date and Time/DateRangePicker',
   decorators: [BlockDecorator],
   excludeStories: ['render']
-};
+} as Meta<typeof DateRangePicker>;
+
+export type DateRangePickerStory = StoryFn<typeof DateRangePicker>;
 
-export const Default = () => render();
+export const Default: DateRangePickerStory = (args) => render(args);
 
 Default.story = {
   name: 'default'
 };
 
-export const DefaultValue = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const DefaultValue: DateRangePickerStory = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 DefaultValue.story = {
   name: 'defaultValue'
 };
 
-export const ControlledValue = () => <ControlledExample />;
+export const ControlledValue: DateRangePickerStory = (args) => <ControlledExample {...args} />;
 
 ControlledValue.story = {
   name: 'controlled value'
 };
 
-export const DefaultValueZoned = () => render({defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-05'), 'America/Los_Angeles')}});
+export const DefaultValueZoned: DateRangePickerStory = () => render({defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-05'), 'America/Los_Angeles')}});
 
 DefaultValueZoned.story = {
   name: 'defaultValue, zoned'
 };
 
-export const GranularityMinute = () => render({granularity: 'minute'});
+export const GranularityMinute: DateRangePickerStory = () => render({granularity: 'minute'});
 
 GranularityMinute.story = {
   name: 'granularity: minute'
 };
 
-export const GranularitySecond = () => render({granularity: 'second'});
+export const GranularitySecond: DateRangePickerStory = () => render({granularity: 'second'});
 
 GranularitySecond.story = {
   name: 'granularity: second'
 };
 
-export const HourCycle12 = () => render({granularity: 'minute', hourCycle: 12});
+export const HourCycle12: DateRangePickerStory = () => render({granularity: 'minute', hourCycle: 12});
 
 HourCycle12.story = {
   name: 'hourCycle: 12'
 };
 
-export const HourCycle24 = () => render({granularity: 'minute', hourCycle: 24});
+export const HourCycle24: DateRangePickerStory = () => render({granularity: 'minute', hourCycle: 24});
 
 HourCycle24.story = {
   name: 'hourCycle: 24'
 };
 
-export const ForceLeadingZeros = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}, shouldForceLeadingZeros: true});
+export const ForceLeadingZeros: DateRangePickerStory = () => render({defaultValue: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}, shouldForceLeadingZeros: true});
 
 ForceLeadingZeros.story = {
   name: 'shouldForceLeadingZeros'
 };
 
-export const IsDisabled = () => render({isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const IsDisabled: DateRangePickerStory = () => render({isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsQuietIsDisabled = () => render({isQuiet: true, isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const IsQuietIsDisabled: DateRangePickerStory = () => render({isQuiet: true, isDisabled: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 IsQuietIsDisabled.story = {
   name: 'isQuiet, isDisabled'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const IsReadOnly: DateRangePickerStory = () => render({isReadOnly: true, value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const AutoFocus = () => render({autoFocus: true});
+export const AutoFocus: DateRangePickerStory = () => render({autoFocus: true});
 
 AutoFocus.story = {
   name: 'autoFocus'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid', value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const ValidationStateInvalid: DateRangePickerStory = () => render({validationState: 'invalid', value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid', value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
+export const ValidationStateValid: DateRangePickerStory = () => render({validationState: 'valid', value: {start: new CalendarDate(2020, 2, 3), end: new CalendarDate(2020, 5, 4)}});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const MinDate201011MaxDate202011 = () => render({minValue: new CalendarDate(2010, 1, 1), maxValue: new CalendarDate(2020, 1, 1)});
+export const MinDate201011MaxDate202011: DateRangePickerStory = () => render({minValue: new CalendarDate(2010, 1, 1), maxValue: new CalendarDate(2020, 1, 1)});
 
 MinDate201011MaxDate202011.story = {
   name: 'minDate: 2010/1/1, maxDate: 2020/1/1'
 };
 
-export const IsDateUnavailable = () => {
+export const IsDateUnavailable: DateRangePickerStory = () => {
   const disabledRanges = [[today(getLocalTimeZone()), today(getLocalTimeZone()).add({weeks: 1})], [today(getLocalTimeZone()).add({weeks: 2}), today(getLocalTimeZone()).add({weeks: 3})]];
   let [value, setValue] = React.useState<DateRange | null>(null);
   let isInvalid = value && disabledRanges.some(interval => value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0);
@@ -147,48 +150,48 @@ IsDateUnavailable.story = {
   name: 'isDateUnavailable'
 };
 
-export const IsDateAvailableAllowsNonContiguousRanges = () => {
+export const IsDateAvailableAllowsNonContiguousRanges: DateRangePickerStory = (args) => {
   let {locale} = useLocale();
-  return render({isDateUnavailable: (date: DateValue) => isWeekend(date, locale), allowsNonContiguousRanges: true});
+  return render({isDateUnavailable: (date: DateValue) => isWeekend(date, locale), allowsNonContiguousRanges: true, ...args});
 };
 
 IsDateAvailableAllowsNonContiguousRanges.story = {
   name: 'isDateAvailable, allowsNonContiguousRanges'
 };
 
-export const PlaceholderValue198011 = () => render({placeholderValue: new CalendarDate(1980, 1, 1)});
+export const PlaceholderValue198011: DateRangePickerStory = (args) => render({placeholderValue: new CalendarDate(1980, 1, 1), ...args});
 
 PlaceholderValue198011.story = {
   name: 'placeholderValue: 1980/1/1'
 };
 
-export const MaxVisibleMonths2 = () => render({maxVisibleMonths: 2, granularity: 'minute'});
+export const MaxVisibleMonths2: DateRangePickerStory = (args) => render({maxVisibleMonths: 2, granularity: 'minute', ...args});
 
 MaxVisibleMonths2.story = {
   name: 'maxVisibleMonths: 2'
 };
 
-export const MaxVisibleMonths3 = () => render({maxVisibleMonths: 3, granularity: 'minute'});
+export const MaxVisibleMonths3: DateRangePickerStory = (args) => render({maxVisibleMonths: 3, granularity: 'minute', ...args});
 
 MaxVisibleMonths3.story = {
   name: 'maxVisibleMonths: 3'
 };
 
-export const ShowFormatHelpText = () => render({showFormatHelpText: true});
+export const ShowFormatHelpText: DateRangePickerStory = (args) => render({showFormatHelpText: true, ...args});
 
 ShowFormatHelpText.story = {
   name: 'showFormatHelpText'
 };
 
-export const AllTheEvents = () => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange')});
+export const AllTheEvents: DateRangePickerStory = (args) => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange'), ...args});
 
 AllTheEvents.story = {
   name: 'all the events'
 };
 
-export const CustomCalendar = () => <CustomExample />;
+export const CustomCalendar: DateRangePickerStory = (args) => <CustomExample {...args} />;
 
-export function render(props = {}) {
+export function render(props = {}): JSX.Element {
   return (
     <div>
       <Example
diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePickerStyling.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePickerStyling.stories.tsx
index b80c3e7b217..da75c6b336d 100644
--- a/packages/@react-spectrum/datepicker/stories/DateRangePickerStyling.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateRangePickerStyling.stories.tsx
@@ -12,7 +12,9 @@
 
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
+import {DateRangePicker} from '../';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {parseDate, toZoned} from '@internationalized/date';
 import React from 'react';
 import {render} from './DateRangePicker.stories';
@@ -22,99 +24,101 @@ const BlockDecorator = storyFn => <div>{storyFn()}</div>;
 export default {
   title: 'Date and Time/DateRangePicker/styling',
   decorators: [BlockDecorator]
-};
+} as Meta<typeof DateRangePicker>;
+
+export type DateRangePickerStory = StoryFn<typeof DateRangePicker>;
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: DateRangePickerStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'});
+export const LabelPositionSide: DateRangePickerStory = (args) => render({labelPosition: 'side', ...args});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEnd = () => render({labelPosition: 'top', labelAlign: 'end'});
+export const LabelAlignEnd: DateRangePickerStory = (args) => render({labelPosition: 'top', labelAlign: 'end', ...args});
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const Required = () => render({isRequired: true});
+export const Required: DateRangePickerStory = (args) => render({isRequired: true, ...args});
 
 Required.story = {
   name: 'required'
 };
 
-export const RequiredWithLabel = () => render({isRequired: true, necessityIndicator: 'label'});
+export const RequiredWithLabel: DateRangePickerStory = (args) => render({isRequired: true, necessityIndicator: 'label', ...args});
 
 RequiredWithLabel.story = {
   name: 'required with label'
 };
 
-export const Optional = () => render({necessityIndicator: 'label'});
+export const Optional: DateRangePickerStory = (args) => render({necessityIndicator: 'label', ...args});
 
 Optional.story = {
   name: 'optional'
 };
 
-export const NoVisibleLabel = () => render({'aria-label': 'Date range', label: null});
+export const NoVisibleLabel: DateRangePickerStory = (args) => render({'aria-label': 'Date range', label: null, ...args});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const QuietNoVisibleLabel = () => render({isQuiet: true, 'aria-label': 'Date range', label: null});
+export const QuietNoVisibleLabel: DateRangePickerStory = (args) => render({isQuiet: true, 'aria-label': 'Date range', label: null, ...args});
 
 QuietNoVisibleLabel.story = {
   name: 'quiet no visible label'
 };
 
-export const CustomWidth = () => render({width: 'size-4600'});
+export const CustomWidth: DateRangePickerStory = (args) => render({width: 'size-4600', ...args});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const QuietCustomWidth = () => render({isQuiet: true, width: 'size-4600'});
+export const QuietCustomWidth: DateRangePickerStory = (args) => render({isQuiet: true, width: 'size-4600', ...args});
 
 QuietCustomWidth.story = {
   name: 'quiet custom width'
 };
 
-export const CustomWidthNoVisibleLabel = () => render({width: 'size-4600', label: null, 'aria-label': 'Date range'});
+export const CustomWidthNoVisibleLabel: DateRangePickerStory = (args) => render({width: 'size-4600', label: null, 'aria-label': 'Date range', ...args});
 
 CustomWidthNoVisibleLabel.story = {
   name: 'custom width no visible label'
 };
 
-export const CustomWidthLabelPositionSide = () => render({width: 'size-4600', labelPosition: 'side'});
+export const CustomWidthLabelPositionSide: DateRangePickerStory = (args) => render({width: 'size-4600', labelPosition: 'side', ...args});
 
 CustomWidthLabelPositionSide.story = {
   name: 'custom width, labelPosition=side'
 };
 
-export const Description = () => render({description: 'Help text'});
+export const Description: DateRangePickerStory = (args) => render({description: 'Help text', ...args});
 
 Description.story = {
   name: 'description'
 };
 
-export const ErrorMessage = () => render({errorMessage: 'Dates must be after today', validationState: 'invalid'});
+export const ErrorMessage: DateRangePickerStory = (args) => render({errorMessage: 'Dates must be after today', validationState: 'invalid', ...args});
 
 ErrorMessage.story = {
   name: 'errorMessage'
 };
 
-export const InvalidWithTime = () => render({validationState: 'invalid', granularity: 'minute', defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-12'), 'America/Los_Angeles')}});
+export const InvalidWithTime: DateRangePickerStory = (args) => render({validationState: 'invalid', granularity: 'minute', defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-12'), 'America/Los_Angeles')}, ...args});
 
 InvalidWithTime.story = {
   name: 'invalid with time'
 };
 
-export const _ContextualHelp = () => render({contextualHelp: (
+export const _ContextualHelp: DateRangePickerStory = () => render({contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -125,7 +129,7 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const InScrollableContainer = () => (
+export const InScrollableContainer: DateRangePickerStory = () => (
   <div style={{height: '200vh'}}>
     {render({granularity: 'second'})}
   </div>
@@ -135,7 +139,7 @@ InScrollableContainer.story = {
   name: 'in scrollable container'
 };
 
-export const ShouldFlipFalse = () => render({shouldFlip: false});
+export const ShouldFlipFalse: DateRangePickerStory = (args) => render({shouldFlip: false, ...args});
 
 ShouldFlipFalse.story = {
   name: 'shouldFlip: false'
diff --git a/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx b/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
index a077df67a2d..943c92a0dd4 100644
--- a/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/TimeField.stories.tsx
@@ -12,7 +12,8 @@
 
 import {action} from '@storybook/addon-actions';
 import {CalendarDateTime, parseTime, parseZonedDateTime, Time, toZoned} from '@internationalized/date';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {TimeField} from '../';
 
 const BlockDecorator = storyFn => <div>{storyFn()}</div>;
@@ -21,147 +22,149 @@ export default {
   title: 'Date and Time/TimeField',
   decorators: [BlockDecorator],
   excludeStories: ['render']
-};
+} as Meta<typeof TimeField>;
+
+export type TimeFieldStory = StoryFn<typeof TimeField>;
 
-export const Default = () => render();
+export const Default: TimeFieldStory = () => render();
 
 Default.story = {
   name: 'default'
 };
 
-export const DefaultValue = () => render({defaultValue: parseTime('20:24')});
+export const DefaultValue: TimeFieldStory = () => render({defaultValue: parseTime('20:24')});
 
 DefaultValue.story = {
   name: 'defaultValue'
 };
 
-export const ControlledValue = () => render({value: new Time(2, 35)});
+export const ControlledValue: TimeFieldStory = () => render({value: new Time(2, 35)});
 
 ControlledValue.story = {
   name: 'controlled value'
 };
 
-export const GranularitySecond = () => render({granularity: 'second'});
+export const GranularitySecond: TimeFieldStory = () => render({granularity: 'second'});
 
 GranularitySecond.story = {
   name: 'granularity: second'
 };
 
-export const HourCycle12 = () => render({hourCycle: 12, defaultValue: parseTime('00:00')});
+export const HourCycle12: TimeFieldStory = () => render({hourCycle: 12, defaultValue: parseTime('00:00')});
 
 HourCycle12.story = {
   name: 'hourCycle: 12'
 };
 
-export const HourCycle24 = () => render({hourCycle: 24, defaultValue: parseTime('00:00')});
+export const HourCycle24: TimeFieldStory = () => render({hourCycle: 24, defaultValue: parseTime('00:00')});
 
 HourCycle24.story = {
   name: 'hourCycle: 24'
 };
 
-export const HourCycle12GranularityHour = () => render({hourCycle: 12, granularity: 'hour'});
+export const HourCycle12GranularityHour: TimeFieldStory = () => render({hourCycle: 12, granularity: 'hour'});
 
 HourCycle12GranularityHour.story = {
   name: 'hourCycle: 12, granularity: hour'
 };
 
-export const HourCycle24GranularityHour = () => render({hourCycle: 24, granularity: 'hour'});
+export const HourCycle24GranularityHour: TimeFieldStory = () => render({hourCycle: 24, granularity: 'hour'});
 
 HourCycle24GranularityHour.story = {
   name: 'hourCycle: 24, granularity: hour'
 };
 
-export const Zoned = () => render({defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]')});
+export const Zoned: TimeFieldStory = () => render({defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]')});
 
 Zoned.story = {
   name: 'zoned'
 };
 
-export const HideTimeZone = () => render({defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]'), hideTimeZone: true});
+export const HideTimeZone: TimeFieldStory = () => render({defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]'), hideTimeZone: true});
 
 HideTimeZone.story = {
   name: 'hideTimeZone'
 };
 
-export const ForceLeadingZeros = () => render({defaultValue: parseTime('08:00'), shouldForceLeadingZeros: true});
+export const ForceLeadingZeros: TimeFieldStory = () => render({defaultValue: parseTime('08:00'), shouldForceLeadingZeros: true});
 
 ForceLeadingZeros.story = {
   name: 'shouldForceLeadingZeros'
 };
 
-export const IsDisabled = () => render({isDisabled: true, value: new Time(2, 35)});
+export const IsDisabled: TimeFieldStory = () => render({isDisabled: true, value: new Time(2, 35)});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsQuietIsDisabled = () => render({isQuiet: true, isDisabled: true, value: new Time(2, 35)});
+export const IsQuietIsDisabled: TimeFieldStory = () => render({isQuiet: true, isDisabled: true, value: new Time(2, 35)});
 
 IsQuietIsDisabled.story = {
   name: 'isQuiet, isDisabled'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true, value: new Time(2, 35)});
+export const IsReadOnly: TimeFieldStory = () => render({isReadOnly: true, value: new Time(2, 35)});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const AutoFocus = () => render({autoFocus: true});
+export const AutoFocus: TimeFieldStory = () => render({autoFocus: true});
 
 AutoFocus.story = {
   name: 'autoFocus'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid', value: new Time(2, 35)});
+export const ValidationStateInvalid: TimeFieldStory = () => render({validationState: 'invalid', value: new Time(2, 35)});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid', value: new Time(2, 35)});
+export const ValidationStateValid: TimeFieldStory = () => render({validationState: 'valid', value: new Time(2, 35)});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const PlaceholderValue8Am = () => render({placeholderValue: new Time(8)});
+export const PlaceholderValue8Am: TimeFieldStory = () => render({placeholderValue: new Time(8)});
 
 PlaceholderValue8Am.story = {
   name: 'placeholderValue: 8 AM'
 };
 
-export const PlaceholderValue1980118AmZoned = () => render({placeholderValue: toZoned(new CalendarDateTime(1980, 1, 1, 8), 'America/Los_Angeles')});
+export const PlaceholderValue1980118AmZoned: TimeFieldStory = () => render({placeholderValue: toZoned(new CalendarDateTime(1980, 1, 1, 8), 'America/Los_Angeles')});
 
 PlaceholderValue1980118AmZoned.story = {
   name: 'placeholderValue: 1980/1/1 8AM, zoned'
 };
 
-export const MinValue8Am = () => render({minValue: new Time(8)});
+export const MinValue8Am: TimeFieldStory = () => render({minValue: new Time(8)});
 
 MinValue8Am.story = {
   name: 'minValue: 8 AM'
 };
 
-export const MaxValue8Pm = () => render({maxValue: new Time(20)});
+export const MaxValue8Pm: TimeFieldStory = () => render({maxValue: new Time(20)});
 
 MaxValue8Pm.story = {
   name: 'maxValue: 8 PM'
 };
 
-export const MinValue8AmMaxValue8Pm = () => render({minValue: new Time(8), maxValue: new Time(20)});
+export const MinValue8AmMaxValue8Pm: TimeFieldStory = () => render({minValue: new Time(8), maxValue: new Time(20)});
 
 MinValue8AmMaxValue8Pm.story = {
   name: 'minValue: 8 AM, maxValue: 8 PM'
 };
 
-export const AllTheEvents = () => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange')});
+export const AllTheEvents: TimeFieldStory = () => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange')});
 
 AllTheEvents.story = {
   name: 'all the events'
 };
 
-export function render(props = {}) {
+export function render(props = {}): JSX.Element {
   return (
     <TimeField
       label="Time"
diff --git a/packages/@react-spectrum/datepicker/stories/TimeFieldStyling.stories.tsx b/packages/@react-spectrum/datepicker/stories/TimeFieldStyling.stories.tsx
index 27e5a2742f9..21bdece7bf5 100644
--- a/packages/@react-spectrum/datepicker/stories/TimeFieldStyling.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/TimeFieldStyling.stories.tsx
@@ -13,101 +13,105 @@
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {render} from './TimeField.stories';
+import {TimeField} from '../';
 
 const BlockDecorator = storyFn => <div>{storyFn()}</div>;
 
 export default {
   title: 'Date and Time/TimeField/styling',
   decorators: [BlockDecorator]
-};
+} as Meta<typeof TimeField>;
+
+export type TimeFieldStory = StoryFn<typeof TimeField>;
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: TimeFieldStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'});
+export const LabelPositionSide: TimeFieldStory = () => render({labelPosition: 'side'});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEnd = () => render({labelPosition: 'top', labelAlign: 'end'});
+export const LabelAlignEnd: TimeFieldStory = () => render({labelPosition: 'top', labelAlign: 'end'});
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const Required = () => render({isRequired: true});
+export const Required: TimeFieldStory = () => render({isRequired: true});
 
 Required.story = {
   name: 'required'
 };
 
-export const RequiredWithLabel = () => render({isRequired: true, necessityIndicator: 'label'});
+export const RequiredWithLabel: TimeFieldStory = () => render({isRequired: true, necessityIndicator: 'label'});
 
 RequiredWithLabel.story = {
   name: 'required with label'
 };
 
-export const Optional = () => render({necessityIndicator: 'label'});
+export const Optional: TimeFieldStory = () => render({necessityIndicator: 'label'});
 
 Optional.story = {
   name: 'optional'
 };
 
-export const NoVisibleLabel = () => render({'aria-label': 'Time', label: null});
+export const NoVisibleLabel: TimeFieldStory = () => render({'aria-label': 'Time', label: null});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const QuietNoVisibleLabel = () => render({isQuiet: true, 'aria-label': 'Time', label: null});
+export const QuietNoVisibleLabel: TimeFieldStory = () => render({isQuiet: true, 'aria-label': 'Time', label: null});
 
 QuietNoVisibleLabel.story = {
   name: 'quiet no visible label'
 };
 
-export const CustomWidth = () => render({width: 'size-3000'});
+export const CustomWidth: TimeFieldStory = () => render({width: 'size-3000'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const QuietCustomWidth = () => render({isQuiet: true, width: 'size-3000'});
+export const QuietCustomWidth: TimeFieldStory = () => render({isQuiet: true, width: 'size-3000'});
 
 QuietCustomWidth.story = {
   name: 'quiet custom width'
 };
 
-export const CustomWidthNoVisibleLabel = () => render({width: 'size-3000', label: null, 'aria-label': 'Time'});
+export const CustomWidthNoVisibleLabel: TimeFieldStory = () => render({width: 'size-3000', label: null, 'aria-label': 'Time'});
 
 CustomWidthNoVisibleLabel.story = {
   name: 'custom width no visible label'
 };
 
-export const CustomWidthLabelPositionSide = () => render({width: 'size-3000', labelPosition: 'side'});
+export const CustomWidthLabelPositionSide: TimeFieldStory = () => render({width: 'size-3000', labelPosition: 'side'});
 
 CustomWidthLabelPositionSide.story = {
   name: 'custom width, labelPosition=side'
 };
 
-export const Description = () => render({description: 'Help text'});
+export const Description: TimeFieldStory = () => render({description: 'Help text'});
 
 Description.story = {
   name: 'description'
 };
 
-export const ErrorMessage = () => render({errorMessage: 'Time must be between 9 AM and 5 PM', validationState: 'invalid'});
+export const ErrorMessage: TimeFieldStory = () => render({errorMessage: 'Time must be between 9 AM and 5 PM', validationState: 'invalid'});
 
 ErrorMessage.story = {
   name: 'errorMessage'
 };
 
-export const _ContextualHelp = () => render({contextualHelp: (
+export const _ContextualHelp: TimeFieldStory = () => render({contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>

From 04cdc0c111ed4d9f12679dc73ab0e459bb857b86 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 11:43:05 +1000
Subject: [PATCH 06/19] dialog

---
 .../dialog/chromatic/AlertDialog.stories.tsx  | 29 ++++---
 .../dialog/chromatic/Dialog.stories.tsx       | 84 +++++++++++--------
 .../chromatic/DialogExpress.stories.tsx       | 20 +++--
 .../chromatic/DialogLanguages.stories.tsx     | 39 +++++----
 .../dialog/src/AlertDialog.tsx                |  6 +-
 .../@react-spectrum/dialog/src/Dialog.tsx     |  6 +-
 .../@react-spectrum/dialog/src/context.ts     |  2 +-
 .../dialog/stories/AlertDialog.stories.tsx    | 25 +++---
 .../dialog/stories/Dialog.stories.tsx         | 43 +++++-----
 .../stories/DialogContainer.stories.tsx       | 20 +++--
 .../stories/DialogContainerExamples.tsx       | 14 ++--
 .../dialog/stories/DialogTrigger.stories.tsx  | 67 ++++++++-------
 12 files changed, 198 insertions(+), 157 deletions(-)

diff --git a/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx b/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx
index 20a9b9e7279..6ba04a79b62 100644
--- a/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/chromatic/AlertDialog.stories.tsx
@@ -12,7 +12,8 @@
 
 import {ActionButton} from '@react-spectrum/button';
 import {AlertDialog, DialogTrigger} from '../';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {singleParagraph} from './Dialog.stories';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
 
@@ -22,9 +23,11 @@ export default {
     chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true, express: false}
   },
   excludeStories: ['renderAlert']
-};
+} as Meta<typeof AlertDialog>;
+
+export type AlertDialogStory = StoryFn<typeof AlertDialog>;
 
-export const Destructive = () => renderAlert({
+export const Destructive: AlertDialogStory = () => renderAlert({
   variant: 'destructive',
   title: 'Warning Destructive',
   children: singleParagraph(),
@@ -36,7 +39,7 @@ Destructive.story = {
   name: 'destructive'
 };
 
-export const Confirmation = () => renderAlert({
+export const Confirmation: AlertDialogStory = () => renderAlert({
   variant: 'confirmation',
   title: 'Confirmation Required',
   children: singleParagraph(),
@@ -48,7 +51,7 @@ Confirmation.story = {
   name: 'confirmation'
 };
 
-export const Information = () => renderAlert({
+export const Information: AlertDialogStory = () => renderAlert({
   variant: 'information',
   title: 'Informative Alert',
   children: singleParagraph(),
@@ -60,7 +63,7 @@ Information.story = {
   name: 'information'
 };
 
-export const Error = () => renderAlert({
+export const Error: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -72,7 +75,7 @@ Error.story = {
   name: 'error'
 };
 
-export const Warning = () => renderAlert({
+export const Warning: AlertDialogStory = () => renderAlert({
   variant: 'warning',
   title: 'This is a warning',
   children: singleParagraph(),
@@ -84,7 +87,7 @@ Warning.story = {
   name: 'warning'
 };
 
-export const PrimaryDisabled = () => renderAlert({
+export const PrimaryDisabled: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -97,7 +100,7 @@ PrimaryDisabled.story = {
   name: 'primary disabled'
 };
 
-export const AutoFocusPrimary = () => renderAlert({
+export const AutoFocusPrimary: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -111,7 +114,7 @@ AutoFocusPrimary.story = {
   name: 'autoFocus primary'
 };
 
-export const SecondaryDisabled = () => renderAlert({
+export const SecondaryDisabled: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -125,7 +128,7 @@ SecondaryDisabled.story = {
   name: 'secondary disabled'
 };
 
-export const AutoFocusSecondary = () => renderAlert({
+export const AutoFocusSecondary: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -139,7 +142,7 @@ AutoFocusSecondary.story = {
   name: 'autoFocus secondary'
 };
 
-export const AutoFocusCancel = () => renderAlert({
+export const AutoFocusCancel: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -153,7 +156,7 @@ AutoFocusCancel.story = {
   name: 'autoFocus cancel'
 };
 
-export function renderAlert({...props}: SpectrumAlertDialogProps) {
+export function renderAlert({...props}: SpectrumAlertDialogProps): JSX.Element {
   return (
     <div style={{display: 'flex', width: 'auto', margin: '100px 0'}}>
       <DialogTrigger defaultOpen>
diff --git a/packages/@react-spectrum/dialog/chromatic/Dialog.stories.tsx b/packages/@react-spectrum/dialog/chromatic/Dialog.stories.tsx
index ac2a40eb416..aecba104b2f 100644
--- a/packages/@react-spectrum/dialog/chromatic/Dialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/chromatic/Dialog.stories.tsx
@@ -14,14 +14,15 @@ import {ActionButton, Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Content, Footer, Header} from '@react-spectrum/view';
-import {Dialog, DialogTrigger, SpectrumDialogProps} from '../';
+import {Dialog, DialogTrigger, SpectrumDialogProps, SpectrumDialogTriggerProps} from '../';
 import {Divider} from '@react-spectrum/divider';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
+import {Meta, StoryFn} from '@storybook/react';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {JSX} from 'react';
 import {TextField} from '@react-spectrum/textfield';
 
 export default {
@@ -30,143 +31,147 @@ export default {
     chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true, express: false}
   },
   excludeStories: ['singleParagraph', 'renderTriggerProps']
-};
+} as Meta<typeof Dialog>;
+
+export type DialogStory = StoryFn<typeof Dialog>;
 
-export const Default = () => render({});
+export const Default: DialogStory = () => render({});
 
 Default.story = {
   name: 'default'
 };
 
-export const IsDismissable = () => render({isDismissable: true});
+export const IsDismissable: DialogStory = () => render({isDismissable: true});
 
 IsDismissable.story = {
   name: 'isDismissable'
 };
 
-export const LongContent = () => renderLongContent({});
+export const LongContent: DialogStory = () => renderLongContent({});
 
 LongContent.story = {
   name: 'long content'
 };
 
-export const LongContentMobileViewport = () => renderLongContent({});
+export const LongContentMobileViewport: DialogStory = () => renderLongContent({});
 
 LongContentMobileViewport.story = {
   name: 'long content, mobile viewport',
   parameters: {chromatic: {viewports: [320]}}
 };
 
-export const WithHero = () => renderHero({});
+export const WithHero: DialogStory = () => renderHero({});
 
 WithHero.story = {
   name: 'with hero'
 };
 
-export const WithHeroIsDimissable = () => renderHero({isDismissable: true});
+export const WithHeroIsDimissable: DialogStory = () => renderHero({isDismissable: true});
 
 WithHeroIsDimissable.story = {
   name: 'with hero, isDimissable'
 };
 
-export const WithFooter = () => renderFooter({});
+export const WithFooter: DialogStory = () => renderFooter({});
 
 WithFooter.story = {
   name: 'with footer'
 };
 
-export const Small = () => render({size: 'S'});
+export const Small: DialogStory = () => render({size: 'S'});
 
 Small.story = {
   name: 'small'
 };
 
-export const Medium = () => render({size: 'M'});
+export const Medium: DialogStory = () => render({size: 'M'});
 
 Medium.story = {
   name: 'medium'
 };
 
-export const Large = () => render({size: 'L'});
+export const Large: DialogStory = () => render({size: 'L'});
 
 Large.story = {
   name: 'large'
 };
 
-export const _Form = () => renderWithForm({});
+export const _Form: DialogStory = () => renderWithForm({});
 
 _Form.story = {
   name: 'form'
 };
 
-export const FullscreenTakeoverForm = () => renderWithForm({type: 'fullscreenTakeover'});
+export const FullscreenTakeoverForm: DialogStory = () => renderWithForm({type: 'fullscreenTakeover'});
 
 FullscreenTakeoverForm.story = {
   name: 'fullscreenTakeover form'
 };
 
-export const FullscreenTakeoverFormMobileViewport = () => renderWithForm({type: 'fullscreenTakeover'});
+export const FullscreenTakeoverFormMobileViewport: DialogStory = () => renderWithForm({type: 'fullscreenTakeover'});
 
 FullscreenTakeoverFormMobileViewport.story = {
   name: 'fullscreenTakeover form, mobile viewport',
   parameters: {chromatic: {viewports: [320]}}
 };
 
-export const ThreeButtons = () => renderWithThreeButtons({});
+export const ThreeButtons: DialogStory = () => renderWithThreeButtons({});
 
 ThreeButtons.story = {
   name: 'three buttons'
 };
 
-export const ThreeButtonsVerticalOrientation = () => renderWithThreeButtonsVertical({});
+export const ThreeButtonsVerticalOrientation: DialogStory = () => renderWithThreeButtonsVertical({});
 
 ThreeButtonsVerticalOrientation.story = {
   name: 'three buttons, vertical orientation'
 };
 
-export const ThreeButtonsFooter = () => renderWithThreeButtons({showFooter: true});
+export const ThreeButtonsFooter: DialogStory = () => renderWithThreeButtons({showFooter: true});
 
 ThreeButtonsFooter.story = {
   name: 'three buttons, footer'
 };
 
-export const ThreeButtonsFooterExtraLabel = () => renderWithThreeButtons({showFooter: true, extraLabel: ': This is the extra text'});
+export const ThreeButtonsFooterExtraLabel: DialogStory = () => renderWithThreeButtons({showFooter: true, extraLabel: ': This is the extra text'});
 
 ThreeButtonsFooterExtraLabel.story = {
   name: 'three buttons, footer, extraLabel'
 };
 
-export const ClearedContent = () => renderWithDividerInContent({});
+export const ClearedContent: DialogStory = () => renderWithDividerInContent({});
 
 ClearedContent.story = {
   name: 'cleared content'
 };
 
-export const ExtraLongFooter = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap'});
+export const ExtraLongFooter: DialogStory = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap'});
 
 ExtraLongFooter.story = {
   name: 'extra long footer'
 };
 
-export const ShowHeaderLongerHeadingAndHeader = () => renderWithOptions({showHeader: true, extraHeadering: ' This is extra text for long heading and header'});
+export const ShowHeaderLongerHeadingAndHeader: DialogStory = () => renderWithOptions({showHeader: true, extraHeadering: ' This is extra text for long heading and header'});
 
 ShowHeaderLongerHeadingAndHeader.story = {
   name: 'showHeader, longer heading and header'
 };
 
-export const ExtraLongFooterLongerHeadingAndHeader = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap', extraHeadering: ' This is extra text for long heading that wraps to make sure it fills the width'});
+export const ExtraLongFooterLongerHeadingAndHeader: DialogStory = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap', extraHeadering: ' This is extra text for long heading that wraps to make sure it fills the width'});
 
 ExtraLongFooterLongerHeadingAndHeader.story = {
   name: 'extra long footer, longer heading and header'
 };
 
-export const ExtraLongFooterShowHeaderLongerHeadingAndHeader = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap', showHeader: true, extraHeadering: ' This is extra text for long heading and header'});
+export const ExtraLongFooterShowHeaderLongerHeadingAndHeader: DialogStory = () => renderWithOptions({extraFooterLabel: 'This is all the extra text for a long footer to get it to wrap', showHeader: true, extraHeadering: ' This is extra text for long heading and header'});
 
 ExtraLongFooterShowHeaderLongerHeadingAndHeader.story = {
   name: 'extra long footer, showHeader, longer heading and header'
 };
 
-export const Tray = () => renderTriggerProps({type: 'tray'});
+export type DialogTriggerStory = StoryFn<typeof DialogTrigger>;
+
+export const Tray: DialogStory = () => renderTriggerProps({type: 'tray'});
 
 Tray.story = {
   name: 'tray',
@@ -176,7 +181,7 @@ Tray.story = {
   }
 };
 
-export const Popover = () => renderTriggerProps({type: 'popover'});
+export const Popover: DialogStory = () => renderTriggerProps({type: 'popover'});
 
 Popover.story = {
   name: 'popover',
@@ -186,7 +191,7 @@ Popover.story = {
   }
 };
 
-export const PopoverCrossOffset50 = () => renderTriggerProps({type: 'popover', crossOffset: 50});
+export const PopoverCrossOffset50: DialogStory = () => renderTriggerProps({type: 'popover', crossOffset: 50});
 
 PopoverCrossOffset50.story = {
   name: 'popover: crossOffset50',
@@ -196,7 +201,7 @@ PopoverCrossOffset50.story = {
   }
 };
 
-export const PopoverCrossOffset200 = () => renderTriggerProps({type: 'popover', crossOffset: 200});
+export const PopoverCrossOffset200: DialogStory = () => renderTriggerProps({type: 'popover', crossOffset: 200});
 
 PopoverCrossOffset200.story = {
   name: 'popover: crossOffset200',
@@ -206,7 +211,7 @@ PopoverCrossOffset200.story = {
   }
 };
 
-export const PopoverCrossOffset1000 = () => renderTriggerProps({type: 'popover', crossOffset: 1000});
+export const PopoverCrossOffset1000: DialogStory = () => renderTriggerProps({type: 'popover', crossOffset: 1000});
 
 PopoverCrossOffset1000.story = {
   name: 'popover: crossOffset1000',
@@ -216,7 +221,7 @@ PopoverCrossOffset1000.story = {
   }
 };
 
-export const PopoverContainerPadding = () => renderTriggerProps({type: 'popover', containerPadding: 30, shouldFlip: false, placement: 'top'});
+export const PopoverContainerPadding: DialogStory = () => renderTriggerProps({type: 'popover', containerPadding: 30, shouldFlip: false, placement: 'top'});
 
 PopoverContainerPadding.story = {
   name: 'popover: containerPadding',
@@ -226,7 +231,7 @@ PopoverContainerPadding.story = {
   }
 };
 
-export const MobileTypeFullscreenTakeoverModal = () => renderTriggerProps({type: 'modal', mobileType: 'fullscreenTakeover'});
+export const MobileTypeFullscreenTakeoverModal: DialogStory = () => renderTriggerProps({type: 'modal', mobileType: 'fullscreenTakeover'});
 
 MobileTypeFullscreenTakeoverModal.story = {
   name: 'mobileType fullscreenTakeover, modal',
@@ -236,7 +241,7 @@ MobileTypeFullscreenTakeoverModal.story = {
   }
 };
 
-export const MobileTypeModalPopover = () => renderTriggerProps({type: 'popover', mobileType: 'modal'});
+export const MobileTypeModalPopover: DialogStory = () => renderTriggerProps({type: 'popover', mobileType: 'modal'});
 
 MobileTypeModalPopover.story = {
   name: 'mobileType: modal, popover',
@@ -246,7 +251,7 @@ MobileTypeModalPopover.story = {
   }
 };
 
-export const MobileTypeTrayPopover = () => renderTriggerProps({type: 'popover', mobileType: 'tray'});
+export const MobileTypeTrayPopover: DialogStory = () => renderTriggerProps({type: 'popover', mobileType: 'tray'});
 
 MobileTypeTrayPopover.story = {
   name: 'mobileType: tray, popover',
@@ -284,7 +289,12 @@ function render(props: RenderProps) {
   );
 }
 
-export function renderTriggerProps({width = 'auto', isDismissable = undefined, ...triggerProps}) {
+interface RenderTriggerProps extends Omit<SpectrumDialogTriggerProps, 'children'> {
+  width?: string,
+  isDismissable?: boolean
+}
+
+export function renderTriggerProps({width = 'auto', isDismissable = undefined, ...triggerProps}: RenderTriggerProps): JSX.Element {
   return (
     <div style={{display: 'flex', width, margin: '100px 0'}}>
       <DialogTrigger isDismissable={isDismissable} defaultOpen {...triggerProps}>
@@ -397,8 +407,8 @@ function renderWithForm({width = 'auto', ...props}) {
     </div>
   );
 }
-export let singleParagraph = () => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.</Text>;
-let fiveParagraphs = () => (
+export let singleParagraph = (): JSX.Element => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.</Text>;
+let fiveParagraphs = (): JSX.Element => (
   <React.Fragment>
     <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi proin sed libero enim. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Diam quam nulla porttitor massa id. Eleifend mi in nulla posuere sollicitudin. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Faucibus in ornare quam viverra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nam libero justo laoreet sit amet cursus sit. Netus et malesuada fames ac. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Eros donec ac odio tempor orci. Ut etiam sit amet nisl purus in mollis nunc. Nisl rhoncus mattis rhoncus urna neque viverra. Convallis aenean et tortor at risus. Diam phasellus vestibulum lorem sed risus ultricies.</Text>
     <Text>Eleifend quam adipiscing vitae proin sagittis nisl. Diam donec adipiscing tristique risus. In fermentum posuere urna nec tincidunt praesent semper. Suspendisse in est ante in. Egestas diam in arcu cursus euismod quis viverra nibh cras. Aliquam sem fringilla ut morbi tincidunt augue interdum. Lacus sed turpis tincidunt id aliquet risus feugiat. Praesent semper feugiat nibh sed pulvinar proin. In massa tempor nec feugiat nisl pretium fusce id velit. Non nisi est sit amet facilisis. Mi in nulla posuere sollicitudin aliquam ultrices. Morbi leo urna molestie at elementum. Laoreet non curabitur gravida arcu ac tortor dignissim convallis. Risus quis varius quam quisque id. Platea dictumst quisque sagittis purus. Etiam non quam lacus suspendisse faucibus interdum posuere. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus.</Text>
diff --git a/packages/@react-spectrum/dialog/chromatic/DialogExpress.stories.tsx b/packages/@react-spectrum/dialog/chromatic/DialogExpress.stories.tsx
index df319c18606..9eb128b7731 100644
--- a/packages/@react-spectrum/dialog/chromatic/DialogExpress.stories.tsx
+++ b/packages/@react-spectrum/dialog/chromatic/DialogExpress.stories.tsx
@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {Dialog} from '../';
+import {Meta, StoryFn} from '@storybook/react';
 import {renderAlert} from './AlertDialog.stories';
 import {renderTriggerProps, singleParagraph} from './Dialog.stories';
 
@@ -18,9 +20,11 @@ export default {
   parameters: {
     chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium'], disableAnimations: true, express: true}
   }
-};
+} as Meta<typeof Dialog>;
+
+export type DialogExpressStory = StoryFn<typeof Dialog>;
 
-export const _Destructive = () => renderAlert({
+export const _Destructive: DialogExpressStory = () => renderAlert({
   variant: 'destructive',
   title: 'Warning Destructive',
   children: singleParagraph(),
@@ -32,7 +36,7 @@ _Destructive.story = {
   name: 'destructive'
 };
 
-export const _Confirmation = () => renderAlert({
+export const _Confirmation: DialogExpressStory = () => renderAlert({
   variant: 'confirmation',
   title: 'Confirmation Required',
   children: singleParagraph(),
@@ -44,7 +48,7 @@ _Confirmation.story = {
   name: 'confirmation'
 };
 
-export const _Information = () => renderAlert({
+export const _Information: DialogExpressStory = () => renderAlert({
   variant: 'information',
   title: 'Informative Alert',
   children: singleParagraph(),
@@ -56,7 +60,7 @@ _Information.story = {
   name: 'information'
 };
 
-export const _Error = () => renderAlert({
+export const _Error: DialogExpressStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -68,7 +72,7 @@ _Error.story = {
   name: 'error'
 };
 
-export const _Warning = () => renderAlert({
+export const _Warning: DialogExpressStory = () => renderAlert({
   variant: 'warning',
   title: 'This is a warning',
   children: singleParagraph(),
@@ -80,7 +84,7 @@ _Warning.story = {
   name: 'warning'
 };
 
-export const _Tray = () => renderTriggerProps({type: 'tray'});
+export const _Tray: DialogExpressStory = () => renderTriggerProps({type: 'tray'});
 
 _Tray.story = {
   name: 'tray',
@@ -90,7 +94,7 @@ _Tray.story = {
   }
 };
 
-export const _Popover = () => renderTriggerProps({type: 'popover'});
+export const _Popover: DialogExpressStory = () => renderTriggerProps({type: 'popover'});
 
 _Popover.story = {
   name: 'popover',
diff --git a/packages/@react-spectrum/dialog/chromatic/DialogLanguages.stories.tsx b/packages/@react-spectrum/dialog/chromatic/DialogLanguages.stories.tsx
index 6be6584cb7e..847a33f016c 100644
--- a/packages/@react-spectrum/dialog/chromatic/DialogLanguages.stories.tsx
+++ b/packages/@react-spectrum/dialog/chromatic/DialogLanguages.stories.tsx
@@ -14,14 +14,15 @@ import {ActionButton, Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
 import {Content, Header} from '@react-spectrum/view';
-import {Dialog, DialogTrigger} from '../';
+import {Dialog, DialogTrigger, SpectrumDialogTriggerProps} from '../';
 import {Divider} from '@react-spectrum/divider';
 import {Heading} from '@react-spectrum/text';
 // @ts-ignore
 import intlMessages from './intlMessages.json';
 import {Item, TagGroup} from '@react-spectrum/tag';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
-import React from 'react';
+import React, {JSX} from 'react';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export default {
@@ -34,10 +35,12 @@ export default {
       scales: ['medium']
     }
   },
-  excludeStories: ['TranslateDialog']
-};
+  excludeStories: ['TranslateDialogRender']
+} as Meta<typeof Dialog>;
+
+export type DialogLanguagesStory = StoryFn<typeof Dialog>;
 
-export let TranslateDialog = (dialogProps) => {
+export let TranslateDialogRender = (dialogProps: Omit<SpectrumDialogTriggerProps, 'children'>): JSX.Element => {
   let strings = useLocalizedStringFormatter(intlMessages);
 
   return (
@@ -97,38 +100,40 @@ export let TranslateDialog = (dialogProps) => {
   );
 };
 
-export const ArabicComplex = () => (
+export let TranslateDialog: DialogLanguagesStory = (args) => <TranslateDialogRender {...args} />;
+
+export const ArabicComplex: DialogLanguagesStory = () => (
   <Provider locale="ar-AE">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const HebrewComplex = () => (
+export const HebrewComplex: DialogLanguagesStory = () => (
   <Provider locale="he-IL">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const JapaneseComplex = () => (
+export const JapaneseComplex: DialogLanguagesStory = () => (
   <Provider locale="ja-JP">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const KoreanComplex = () => (
+export const KoreanComplex: DialogLanguagesStory = () => (
   <Provider locale="ko-KR">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const ChineseSimplfiedComplex = () => (
+export const ChineseSimplfiedComplex: DialogLanguagesStory = () => (
   <Provider locale="zh-CN">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
 
-export const ChineseTraditionalComplex = () => (
+export const ChineseTraditionalComplex: DialogLanguagesStory = () => (
   <Provider locale="zh-TW">
-    <TranslateDialog defaultOpen />
+    <TranslateDialogRender defaultOpen />
   </Provider>
 );
diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
index e7f4603c9e2..a82427a6366 100644
--- a/packages/@react-spectrum/dialog/src/AlertDialog.tsx
+++ b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
@@ -19,7 +19,7 @@ import {Content} from '@react-spectrum/view';
 import {Dialog} from './Dialog';
 import {DialogContext, DialogContextValue} from './context';
 import {Divider} from '@react-spectrum/divider';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {Heading} from '@react-spectrum/text';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -32,7 +32,9 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 /**
  * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
  */
-export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertDialogProps, ref: DOMRef) {
+export const AlertDialog:
+  React.ForwardRefExoticComponent<SpectrumAlertDialogProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function AlertDialog(props: SpectrumAlertDialogProps, ref: DOMRef) {
   let {
     onClose = () => {}
   } = useContext(DialogContext) || {} as DialogContextValue;
diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx
index 70adf576081..5a88723f01e 100644
--- a/packages/@react-spectrum/dialog/src/Dialog.tsx
+++ b/packages/@react-spectrum/dialog/src/Dialog.tsx
@@ -22,7 +22,7 @@ import {
 } from '@react-spectrum/utils';
 import CrossLarge from '@spectrum-icons/ui/CrossLarge';
 import {DialogContext, DialogContextValue} from './context';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {Grid} from '@react-spectrum/layout';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -45,7 +45,9 @@ let sizeMap = {
  * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
  * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
  */
-export const Dialog = React.forwardRef(function Dialog(props: SpectrumDialogProps, ref: DOMRef) {
+export const Dialog:
+  React.ForwardRefExoticComponent<SpectrumDialogProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+React.forwardRef(function Dialog(props: SpectrumDialogProps, ref: DOMRef) {
   props = useSlotProps(props, 'dialog');
   let {
     type = 'modal',
diff --git a/packages/@react-spectrum/dialog/src/context.ts b/packages/@react-spectrum/dialog/src/context.ts
index 02111ea23d9..f2c5aa496bd 100644
--- a/packages/@react-spectrum/dialog/src/context.ts
+++ b/packages/@react-spectrum/dialog/src/context.ts
@@ -18,4 +18,4 @@ export interface DialogContextValue extends HTMLAttributes<HTMLElement> {
   onClose: () => void
 }
 
-export const DialogContext = React.createContext<DialogContextValue | null>(null);
+export const DialogContext: React.Context<DialogContextValue | null> = React.createContext<DialogContextValue | null>(null);
diff --git a/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx b/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx
index 46f4aa5dd4e..5e0fe547bc4 100644
--- a/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx
@@ -12,15 +12,18 @@
 import {action} from '@storybook/addon-actions';
 import {ActionButton} from '@react-spectrum/button';
 import {AlertDialog, DialogTrigger} from '../';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {singleParagraph} from './Dialog.stories';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
 
 export default {
   title: 'Dialog/Alert'
-};
+} as Meta<typeof AlertDialog>;
+
+export type AlertDialogStory = StoryFn<typeof AlertDialog>;
 
-export const Destructive = () => renderAlert({
+export const Destructive: AlertDialogStory = () => renderAlert({
   variant: 'destructive',
   title: 'Warning Destructive',
   children: singleParagraph(),
@@ -35,7 +38,7 @@ Destructive.story = {
   name: 'destructive'
 };
 
-export const Confirmation = () => renderAlert({
+export const Confirmation: AlertDialogStory = () => renderAlert({
   variant: 'confirmation',
   title: 'Confirmation Required',
   children: singleParagraph(),
@@ -50,7 +53,7 @@ Confirmation.story = {
   name: 'confirmation'
 };
 
-export const Information = () => renderAlert({
+export const Information: AlertDialogStory = () => renderAlert({
   variant: 'information',
   title: 'Informative Alert',
   children: singleParagraph(),
@@ -65,7 +68,7 @@ Information.story = {
   name: 'information'
 };
 
-export const Error = () => renderAlert({
+export const Error: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -80,7 +83,7 @@ Error.story = {
   name: 'error'
 };
 
-export const Warning = () => renderAlert({
+export const Warning: AlertDialogStory = () => renderAlert({
   variant: 'warning',
   title: 'This is a warning',
   children: singleParagraph(),
@@ -95,7 +98,7 @@ Warning.story = {
   name: 'warning'
 };
 
-export const PrimaryDisabled = () => renderAlert({
+export const PrimaryDisabled: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -111,7 +114,7 @@ PrimaryDisabled.story = {
   name: 'primary disabled'
 };
 
-export const AutoFocusPrimary = () => renderAlert({
+export const AutoFocusPrimary: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -128,7 +131,7 @@ AutoFocusPrimary.story = {
   name: 'autoFocus primary'
 };
 
-export const SecondaryDisabled = () => renderAlert({
+export const SecondaryDisabled: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -145,7 +148,7 @@ SecondaryDisabled.story = {
   name: 'secondary disabled'
 };
 
-export const AutoFocusSecondary = () => renderAlert({
+export const AutoFocusSecondary: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
@@ -162,7 +165,7 @@ AutoFocusSecondary.story = {
   name: 'autoFocus secondary'
 };
 
-export const AutoFocusCancel = () => renderAlert({
+export const AutoFocusCancel: AlertDialogStory = () => renderAlert({
   variant: 'error',
   title: 'Error: Danger Will Robinson',
   children: singleParagraph(),
diff --git a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
index 05fac03bfc5..079ad51344a 100644
--- a/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/Dialog.stories.tsx
@@ -21,113 +21,116 @@ import {Form} from '@react-spectrum/form';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
 import {Item, Picker} from '@react-spectrum/picker';
+import {Meta, StoryFn} from '@storybook/react';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {TextField} from '@react-spectrum/textfield';
 
 export default {
   title: 'Dialog',
   providerSwitcher: {status: 'notice'},
   excludeStories: ['singleParagraph']
-};
+} as Meta<typeof Dialog>;
+
+export type DialogStory = StoryFn<typeof Dialog>;
 
-export const Default = () => render({});
+export const Default: DialogStory = () => render({});
 
 Default.story = {
   name: 'default'
 };
 
-export const IsDismissable = () => render({isDismissable: true});
+export const IsDismissable: DialogStory = () => render({isDismissable: true});
 
 IsDismissable.story = {
   name: 'isDismissable'
 };
 
-export const LongContent = () => renderLongContent({});
+export const LongContent: DialogStory = () => renderLongContent({});
 
 LongContent.story = {
   name: 'long content'
 };
 
-export const WithHero = () => renderHero({});
+export const WithHero: DialogStory = () => renderHero({});
 
 WithHero.story = {
   name: 'with hero'
 };
 
-export const WithHeroIsDimissable = () => renderHero({isDismissable: true});
+export const WithHeroIsDimissable: DialogStory = () => renderHero({isDismissable: true});
 
 WithHeroIsDimissable.story = {
   name: 'with hero, isDimissable'
 };
 
-export const WithFooter = () => renderFooter({});
+export const WithFooter: DialogStory = () => renderFooter({});
 
 WithFooter.story = {
   name: 'with footer'
 };
 
-export const Small = () => render({size: 'S'});
+export const Small: DialogStory = () => render({size: 'S'});
 
 Small.story = {
   name: 'small'
 };
 
-export const Medium = () => render({size: 'M'});
+export const Medium: DialogStory = () => render({size: 'M'});
 
 Medium.story = {
   name: 'medium'
 };
 
-export const Large = () => render({size: 'L'});
+export const Large: DialogStory = () => render({size: 'L'});
 
 Large.story = {
   name: 'large'
 };
 
-export const _Form = () => renderWithForm({});
+export const _Form: DialogStory = () => renderWithForm({});
 
 _Form.story = {
   name: 'form'
 };
 
-export const FullscreenTakeoverForm = () => renderWithForm({type: 'fullscreenTakeover'});
+export const FullscreenTakeoverForm: DialogStory = () => renderWithForm({type: 'fullscreenTakeover'});
 
 FullscreenTakeoverForm.story = {
   name: 'fullscreenTakeover form'
 };
 
-export const ThreeButtons = () => renderWithThreeButtons({});
+export const ThreeButtons: DialogStory = () => renderWithThreeButtons({});
 
 ThreeButtons.story = {
   name: 'three buttons'
 };
 
-export const ThreeButtonsVerticalOrientation = () => renderWithThreeButtonsVertical({});
+export const ThreeButtonsVerticalOrientation: DialogStory = () => renderWithThreeButtonsVertical({});
 
 ThreeButtonsVerticalOrientation.story = {
   name: 'three buttons, vertical orientation'
 };
 
-export const ThreeButtonsFooter = () => <RenderWithThreeButtonsAndFooter />;
+export const ThreeButtonsFooter: DialogStory = () => <RenderWithThreeButtonsAndFooter />;
 
 ThreeButtonsFooter.story = {
   name: 'three buttons, footer'
 };
 
-export const ClearedContent = () => renderWithDividerInContent({});
+export const ClearedContent: DialogStory = () => renderWithDividerInContent({});
 
 ClearedContent.story = {
   name: 'cleared content'
 };
 
-export const WithIframe = () => renderIframe({});
+export const WithIframe: DialogStory = () => renderIframe({});
 
 WithIframe.story = {
   name: 'with iframe'
 };
 
-export const HorizontalScrolling = () => renderHorizontalScrolling({});
+export const HorizontalScrolling: DialogStory = () => renderHorizontalScrolling({});
 
 
 type RenderProps = Omit<SpectrumDialogProps & {isDismissable?: boolean, width?: string}, 'children'>;
@@ -282,7 +285,7 @@ function renderWithForm({width = 'auto', ...props}) {
     </div>
   );
 }
-export let singleParagraph = () => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.</Text>;
+export let singleParagraph = (): JSX.Element => <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet tristique risus. In sit amet suscipit lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In condimentum imperdiet metus non condimentum. Duis eu velit et quam accumsan tempus at id velit. Duis elementum elementum purus, id tempus mauris posuere a. Nunc vestibulum sapien pellentesque lectus commodo ornare.</Text>;
 let fiveParagraphs = () => (
   <React.Fragment>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi proin sed libero enim. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sed enim ut sem viverra aliquet eget sit amet tellus. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Diam quam nulla porttitor massa id. Eleifend mi in nulla posuere sollicitudin. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Faucibus in ornare quam viverra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nam libero justo laoreet sit amet cursus sit. Netus et malesuada fames ac. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Eros donec ac odio tempor orci. Ut etiam sit amet nisl purus in mollis nunc. Nisl rhoncus mattis rhoncus urna neque viverra. Convallis aenean et tortor at risus. Diam phasellus vestibulum lorem sed risus ultricies.</p>
diff --git a/packages/@react-spectrum/dialog/stories/DialogContainer.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogContainer.stories.tsx
index 58f2505ac90..83e9a27edcd 100644
--- a/packages/@react-spectrum/dialog/stories/DialogContainer.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/DialogContainer.stories.tsx
@@ -10,52 +10,56 @@
  * governing permissions and limitations under the License.
  */
 
+import {DialogContainer} from '../';
 import {
   DialogContainerExample,
   MenuExample,
   NestedDialogContainerExample
 } from './DialogContainerExamples';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'DialogContainer',
   providerSwitcher: {status: 'notice'}
-};
+} as Meta<typeof DialogContainer>;
+
+export type DialogContainerStory = StoryFn<typeof DialogContainer>;
 
-export const Default = () => <DialogContainerExample />;
+export const Default: DialogContainerStory = () => <DialogContainerExample />;
 
 Default.story = {
   name: 'default'
 };
 
-export const InAMenu = () => <MenuExample />;
+export const InAMenu: DialogContainerStory = () => <MenuExample />;
 
 InAMenu.story = {
   name: 'in a menu'
 };
 
-export const TypeFullscreen = () => <MenuExample type="fullscreen" />;
+export const TypeFullscreen: DialogContainerStory = () => <MenuExample type="fullscreen" />;
 
 TypeFullscreen.story = {
   name: 'type: fullscreen'
 };
 
-export const TypeFullscreenTakeover = () => <MenuExample type="fullscreenTakeover" />;
+export const TypeFullscreenTakeover: DialogContainerStory = () => <MenuExample type="fullscreenTakeover" />;
 
 TypeFullscreenTakeover.story = {
   name: 'type: fullscreenTakeover'
 };
 
-export const IsDismissable = () => <MenuExample isDismissable />;
+export const IsDismissable: DialogContainerStory = () => <MenuExample isDismissable />;
 
 IsDismissable.story = {
   name: 'isDismissable'
 };
 
-export const IsKeyboardDismissDisabled = () => <MenuExample isKeyboardDismissDisabled />;
+export const IsKeyboardDismissDisabled: DialogContainerStory = () => <MenuExample isKeyboardDismissDisabled />;
 
 IsKeyboardDismissDisabled.story = {
   name: 'isKeyboardDismissDisabled'
 };
 
-export const NestedDialogContainers = () => <NestedDialogContainerExample />;
+export const NestedDialogContainers: DialogContainerStory = () => <NestedDialogContainerExample />;
diff --git a/packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx b/packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx
index e2ef9bfe7cf..fed09913df9 100644
--- a/packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx
+++ b/packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx
@@ -1,20 +1,20 @@
 import {ActionButton, Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Content, Header} from '@react-spectrum/view';
-import {Dialog, DialogContainer, useDialogContainer} from '../';
+import {Dialog, DialogContainer, SpectrumDialogContainerProps, SpectrumDialogProps, useDialogContainer} from '../';
 import {Divider} from '@react-spectrum/divider';
 import {Heading, Text} from '@react-spectrum/text';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {Key} from '@react-types/shared';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export function DialogContainerExample(props) {
+export function DialogContainerExample(props: Omit<SpectrumDialogContainerProps, 'children' | 'onDismiss'> & Omit<SpectrumDialogProps, 'children'>): JSX.Element {
   let [isOpen, setOpen] = React.useState(false);
 
   return (
     <>
       <ActionButton onPress={() => setOpen(true)}>Open dialog</ActionButton>
-      <DialogContainer onDismiss={() => setOpen(false)} {...props}>
+      <DialogContainer {...props} onDismiss={() => setOpen(false)}>
         {isOpen &&
           <ExampleDialog {...props} />
         }
@@ -23,7 +23,7 @@ export function DialogContainerExample(props) {
   );
 }
 
-export function MenuExample(props) {
+export function MenuExample(props: Omit<SpectrumDialogContainerProps, 'children' | 'onDismiss'> & Omit<SpectrumDialogProps, 'children'>): JSX.Element {
   let [isOpen, setOpen] = React.useState(false);
 
   return (
@@ -43,7 +43,7 @@ export function MenuExample(props) {
   );
 }
 
-function ExampleDialog(props) {
+function ExampleDialog(props: Omit<SpectrumDialogContainerProps, 'children' | 'onDismiss'> & Omit<SpectrumDialogProps, 'children'>): JSX.Element {
   let container = useDialogContainer();
 
   return (
@@ -62,7 +62,7 @@ function ExampleDialog(props) {
   );
 }
 
-export function NestedDialogContainerExample() {
+export function NestedDialogContainerExample(): JSX.Element {
   let [dialog, setDialog] = React.useState<Key | null>(null);
   let dismiss = () => setDialog(null);
 
diff --git a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
index 1c0075a1df4..b3deded9efc 100644
--- a/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
+++ b/packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
@@ -23,10 +23,11 @@ import {Flex, Grid} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
 import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
 import React, {useState} from 'react';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
-import {TranslateDialog} from './../chromatic/DialogLanguages.stories';
+import {TranslateDialogRender} from './../chromatic/DialogLanguages.stories';
 
 export default {
   title: 'DialogTrigger',
@@ -43,7 +44,9 @@ export default {
       }
     },
     placement: {
-      type: 'select',
+      control: {
+        type: 'select'
+      },
       defaultValue: 'top',
       options: [
         'bottom',
@@ -92,80 +95,82 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof DialogTrigger>;
+
+export type DialogTriggerStory = StoryFn<typeof DialogTrigger>;
 
-export const Default = (args) => render(args);
+export const Default: DialogTriggerStory = (args) => render(args);
 
 Default.story = {
   name: 'default'
 };
 
-export const TypePopover = (args) => renderPopover({type: 'popover', ...args});
+export const TypePopover: DialogTriggerStory = (args) => renderPopover({type: 'popover', ...args});
 
 TypePopover.story = {
   name: 'type: popover'
 };
 
-export const TypeModal = (args) => render({type: 'modal', ...args});
+export const TypeModal: DialogTriggerStory = (args) => render({type: 'modal', ...args});
 
 TypeModal.story = {
   name: 'type: modal'
 };
 
-export const TypeModalIsDismissable = (args) =>
+export const TypeModalIsDismissable: DialogTriggerStory = (args) =>
   render({type: 'modal', isDismissable: true, ...args});
 
 TypeModalIsDismissable.story = {
   name: 'type: modal isDismissable'
 };
 
-export const TypeFullscreen = (args) => render({type: 'fullscreen', ...args});
+export const TypeFullscreen: DialogTriggerStory = (args) => render({type: 'fullscreen', ...args});
 
 TypeFullscreen.story = {
   name: 'type: fullscreen'
 };
 
-export const TypeFullscreenTakeover = (args) => render({type: 'fullscreenTakeover', ...args});
+export const TypeFullscreenTakeover: DialogTriggerStory = (args) => render({type: 'fullscreenTakeover', ...args});
 
 TypeFullscreenTakeover.story = {
   name: 'type: fullscreenTakeover'
 };
 
-export const TypeTray = (args) => renderPopover({type: 'tray', ...args});
+export const TypeTray: DialogTriggerStory = (args) => renderPopover({type: 'tray', ...args});
 
 TypeTray.story = {
   name: 'type: tray'
 };
 
-export const MobileTypeFullscreen = (args) =>
+export const MobileTypeFullscreen: DialogTriggerStory = (args) =>
   render({type: 'modal', mobileType: 'fullscreen', ...args});
 
 MobileTypeFullscreen.story = {
   name: 'mobileType: fullscreen'
 };
 
-export const MobileTypeFullscreenTakeover = (args) =>
+export const MobileTypeFullscreenTakeover: DialogTriggerStory = (args) =>
   render({type: 'modal', mobileType: 'fullscreenTakeover', ...args});
 
 MobileTypeFullscreenTakeover.story = {
   name: 'mobileType: fullscreenTakeover'
 };
 
-export const PopoverWithMobileTypeModal = (args) =>
+export const PopoverWithMobileTypeModal: DialogTriggerStory = (args) =>
   renderPopover({type: 'popover', mobileType: 'modal', ...args});
 
 PopoverWithMobileTypeModal.story = {
   name: 'popover with mobileType: modal'
 };
 
-export const PopoverWithMobileTypeTray = (args) =>
+export const PopoverWithMobileTypeTray: DialogTriggerStory = (args) =>
   renderPopover({type: 'popover', mobileType: 'tray', ...args});
 
 PopoverWithMobileTypeTray.story = {
   name: 'popover with mobileType: tray'
 };
 
-export const NestedModals = () => (
+export const NestedModals: DialogTriggerStory = () => (
   <div style={{paddingTop: 100}}>
     <input aria-label="test input" />
     <Provider colorScheme="dark" UNSAFE_style={{padding: 40, marginTop: 10}}>
@@ -195,7 +200,7 @@ NestedModals.story = {
   name: 'nested modals'
 };
 
-export const NestedModalsFullscreentakeover = () => (
+export const NestedModalsFullscreentakeover: DialogTriggerStory = () => (
   <DialogTrigger type="fullscreenTakeover">
     <ActionButton>Trigger</ActionButton>
     {(close) => (
@@ -231,7 +236,7 @@ NestedModalsFullscreentakeover.story = {
   name: 'nested modals, fullscreentakeover'
 };
 
-export const WithMenuTrigger = () => (
+export const WithMenuTrigger: DialogTriggerStory = () => (
   <DialogTrigger type="popover">
     <ActionButton>Trigger</ActionButton>
     <Dialog>
@@ -254,7 +259,7 @@ WithMenuTrigger.story = {
   name: 'with menu trigger'
 };
 
-export const NestedPopovers = () => (
+export const NestedPopovers: DialogTriggerStory = () => (
   <div style={{paddingTop: 100}}>
     <DialogTrigger type="popover">
       <ActionButton>Trigger</ActionButton>
@@ -278,7 +283,7 @@ NestedPopovers.story = {
   name: 'nested popovers'
 };
 
-export const PopoverInsideScrollView = () => (
+export const PopoverInsideScrollView: DialogTriggerStory = () => (
   <div style={{height: 100, display: 'flex'}}>
     <div style={{paddingTop: 100, height: 100, overflow: 'auto'}}>
       <div style={{height: 200}}>
@@ -310,14 +315,14 @@ PopoverInsideScrollView.story = {
   }
 };
 
-export const ShouldFlipWithWidth = (args) =>
+export const ShouldFlipWithWidth: DialogTriggerStory = (args) =>
   renderPopover({type: 'popover', width: 'calc(100vh - 100px)', ...args});
 
 ShouldFlipWithWidth.story = {
   name: 'shouldFlip with width'
 };
 
-export const CloseFunctionWithButtonPopover = () => (
+export const CloseFunctionWithButtonPopover: DialogTriggerStory = () => (
   <div style={{display: 'flex', margin: '100px 0'}}>
     <DialogTrigger type="popover" onOpenChange={action('open change')}>
       <ActionButton>Trigger</ActionButton>
@@ -351,19 +356,19 @@ CloseFunctionWithButtonPopover.story = {
   name: 'Close function with button: popover'
 };
 
-export const TargetRef = (args) => <TriggerWithRef type="popover" {...args} />;
+export const TargetRef: DialogTriggerStory = (args) => <TriggerWithRef type="popover" {...args} />;
 
 TargetRef.story = {
   name: 'targetRef'
 };
 
-export const _AlertDialog = (args) => renderAlert(args);
+export const _AlertDialog: DialogTriggerStory = (args) => renderAlert(args);
 
 _AlertDialog.story = {
   name: 'alert dialog'
 };
 
-export const CrossoffsetExamples = () => (
+export const CrossoffsetExamples: DialogTriggerStory = () => (
   <Flex gap="size-200" alignSelf="center">
     <Flex gap="size-200" direction="column" alignItems="start">
       <span>Left Top</span>
@@ -417,13 +422,13 @@ CrossoffsetExamples.story = {
   name: 'crossoffset examples'
 };
 
-export const TriggerVisibleThroughUnderlay = (args) => renderTriggerNotCentered(args);
+export const TriggerVisibleThroughUnderlay: DialogTriggerStory = (args) => renderTriggerNotCentered(args);
 
 TriggerVisibleThroughUnderlay.story = {
   name: 'trigger visible through underlay'
 };
 
-export const _2Popovers = () => (
+export const _2Popovers: DialogTriggerStory = () => (
   <Flex gap="size-200">
     <DialogTrigger type="popover">
       <ActionButton>Trigger</ActionButton>
@@ -447,13 +452,13 @@ _2Popovers.story = {
   name: '2 popovers'
 };
 
-export const _AdjustableDialog = () => <AdjustableDialog />;
+export const _AdjustableDialog: DialogTriggerStory = () => <AdjustableDialog />;
 
 _AdjustableDialog.story = {
   name: 'adjustable dialog'
 };
 
-export const WithTooltip = () => (
+export const WithTooltip: DialogTriggerStory = () => (
   <div style={{display: 'flex', width: 'auto', margin: '100px 0'}}>
     <DialogTrigger isDismissable>
       <ActionButton>Trigger</ActionButton>
@@ -476,7 +481,7 @@ WithTooltip.story = {
   name: 'with tooltip inside'
 };
 
-export const WithTooltipTrigger = () => (
+export const WithTooltipTrigger: DialogTriggerStory = () => (
   <Flex direction="row" gap={10}>
     <DialogTrigger>
       <ActionButton>DialogTrigger only</ActionButton>
@@ -528,14 +533,14 @@ function CustomDialog({close}) {
   );
 }
 
-export const WithTranslations = () => <TranslateDialog />;
+export const WithTranslations: DialogTriggerStory = () => <TranslateDialogRender />;
 
 WithTranslations.story = {
   name: 'with translations',
   parameters: {description: {data: 'Translations included for: Arabic, English, Hebrew, Japanese, Korean, Simplified Chinese, and Traditional Chinese.'}}
 };
 
-export const TriggersOnEdges = () => (
+export const TriggersOnEdges: DialogTriggerStory = () => (
   <View width="100%" overflow="auto">
     <Grid
       areas={[

From 7d18e6bcb7f4ac0139f537c655c449a79f1bb6e1 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 12:02:56 +1000
Subject: [PATCH 07/19] divider, dropzone, form, icon, illustratedmessage,
 image

---
 .../divider/chromatic/Divider.stories.tsx     |  9 ++-
 .../@react-spectrum/divider/src/Divider.tsx   |  6 +-
 .../divider/stories/Divider.stories.tsx       | 17 +++---
 .../dropzone/chromatic/DropZone.stories.tsx   | 10 ++--
 .../@react-spectrum/dropzone/src/DropZone.tsx |  6 +-
 .../dropzone/stories/DropZone.stories.tsx     | 18 +++---
 .../dropzone/stories/FileTrigger.stories.tsx  | 10 ++--
 .../form/chromatic/Form.stories.tsx           | 58 ++++++++++---------
 .../form/chromatic/FormLanguages.stories.tsx  | 20 ++++---
 .../form/chromatic/FormLongLabel.stories.tsx  | 50 ++++++++--------
 packages/@react-spectrum/form/src/Form.tsx    |  6 +-
 .../form/stories/Form.stories.tsx             |  4 +-
 .../icon/stories/Icon.stories.tsx             |  7 ++-
 .../src/IllustratedMessage.tsx                |  6 +-
 packages/@react-spectrum/image/src/Image.tsx  |  8 ++-
 15 files changed, 134 insertions(+), 101 deletions(-)

diff --git a/packages/@react-spectrum/divider/chromatic/Divider.stories.tsx b/packages/@react-spectrum/divider/chromatic/Divider.stories.tsx
index 7d4d11c21b5..5789c498b8d 100644
--- a/packages/@react-spectrum/divider/chromatic/Divider.stories.tsx
+++ b/packages/@react-spectrum/divider/chromatic/Divider.stories.tsx
@@ -14,15 +14,18 @@ import {ActionButton} from '@react-spectrum/button';
 import Copy from '@spectrum-icons/workflow/Copy';
 import {Divider} from '../';
 import Edit from '@spectrum-icons/workflow/Edit';
+import {Meta, StoryFn} from '@storybook/react';
 import Properties from '@spectrum-icons/workflow/Properties';
 import React from 'react';
 import Select from '@spectrum-icons/workflow/Select';
 
 export default {
   title: 'Divider'
-};
+} as Meta<typeof Divider>;
 
-export const Horizontal = () => (
+export type DividerStory = StoryFn<typeof Divider>;
+
+export const Horizontal: DividerStory = () => (
   <section>
     <h1>Large</h1>
     <Divider />
@@ -34,7 +37,7 @@ export const Horizontal = () => (
   </section>
 );
 
-export const Vertical = () => (
+export const Vertical: DividerStory = () => (
   <section style={{display: 'flex'}}>
     <ActionButton aria-label="Properties" isQuiet>
       <Properties />
diff --git a/packages/@react-spectrum/divider/src/Divider.tsx b/packages/@react-spectrum/divider/src/Divider.tsx
index f86f766777d..23f78c1f768 100644
--- a/packages/@react-spectrum/divider/src/Divider.tsx
+++ b/packages/@react-spectrum/divider/src/Divider.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import React, {ElementType} from 'react';
 import {SpectrumDividerProps} from '@react-types/divider';
 import styles from '@adobe/spectrum-css-temp/components/rule/vars.css';
@@ -27,7 +27,9 @@ let sizeMap = {
  * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
  * They can also be used to establish rhythm and hierarchy.
  */
-export const Divider = React.forwardRef(function Divider(props: SpectrumDividerProps, ref: DOMRef) {
+export const Divider:
+  React.ForwardRefExoticComponent<SpectrumDividerProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+React.forwardRef(function Divider(props: SpectrumDividerProps, ref: DOMRef) {
   props = useSlotProps(props, 'divider');
   let {
     size = 'L',
diff --git a/packages/@react-spectrum/divider/stories/Divider.stories.tsx b/packages/@react-spectrum/divider/stories/Divider.stories.tsx
index 8ef33ae901a..63d942ea0c9 100644
--- a/packages/@react-spectrum/divider/stories/Divider.stories.tsx
+++ b/packages/@react-spectrum/divider/stories/Divider.stories.tsx
@@ -12,6 +12,7 @@
 
 import {ActionButton} from '@react-spectrum/button';
 import {Divider} from '../';
+import {Meta, StoryFn} from '@storybook/react';
 import Properties from '@spectrum-icons/workflow/Properties';
 import React from 'react';
 import Select from '@spectrum-icons/workflow/Select';
@@ -19,9 +20,11 @@ import Select from '@spectrum-icons/workflow/Select';
 export default {
   title: 'Divider',
   providerSwitcher: {status: 'positive'}
-};
+} as Meta<typeof Divider>;
+
+export type DividerStory = StoryFn<typeof Divider>;
 
-export const LargeDefault = () => (
+export const LargeDefault: DividerStory = () => (
   <section>
     <h1>Large</h1>
     <Divider />
@@ -33,7 +36,7 @@ LargeDefault.story = {
   name: 'Large (Default)'
 };
 
-export const Medium = () => (
+export const Medium: DividerStory = () => (
   <section>
     <h1>Medium</h1>
     <Divider size="M" />
@@ -41,7 +44,7 @@ export const Medium = () => (
   </section>
 );
 
-export const Small = () => (
+export const Small: DividerStory = () => (
   <section>
     <h1>Small</h1>
     <Divider size="S" />
@@ -49,19 +52,19 @@ export const Small = () => (
   </section>
 );
 
-export const VerticalLargeDefault = () => renderVertical();
+export const VerticalLargeDefault: DividerStory = () => renderVertical();
 
 VerticalLargeDefault.story = {
   name: 'Vertical, Large (Default)'
 };
 
-export const VerticalMedium = () => renderVertical({size: 'M'});
+export const VerticalMedium: DividerStory = () => renderVertical({size: 'M'});
 
 VerticalMedium.story = {
   name: 'Vertical, Medium'
 };
 
-export const VerticalSmall = () => renderVertical({size: 'S'});
+export const VerticalSmall: DividerStory = () => renderVertical({size: 'S'});
 
 VerticalSmall.story = {
   name: 'Vertical, Small'
diff --git a/packages/@react-spectrum/dropzone/chromatic/DropZone.stories.tsx b/packages/@react-spectrum/dropzone/chromatic/DropZone.stories.tsx
index 9c7bd6a20af..2d07ba3ebcf 100644
--- a/packages/@react-spectrum/dropzone/chromatic/DropZone.stories.tsx
+++ b/packages/@react-spectrum/dropzone/chromatic/DropZone.stories.tsx
@@ -15,18 +15,20 @@ import {DropZone, SpectrumDropZoneProps} from '../';
 import {FileTrigger, Text} from 'react-aria-components';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import Upload from '@spectrum-icons/illustrations/Upload';
 
 const meta: Meta<SpectrumDropZoneProps> = {
   title: 'DropZone',
   component: DropZone
-};
+} as Meta<typeof DropZone>;
 
 export default meta;
 
-export const Default = {
+export type DropZoneStory = StoryObj<typeof DropZone>;
+
+export const Default: DropZoneStory = {
   args: {
     children: (
       <>
@@ -43,7 +45,7 @@ export const Default = {
   }
 };
 
-export const WithFileTrigger = {
+export const WithFileTrigger: DropZoneStory = {
   args: {
     children: (
       <>
diff --git a/packages/@react-spectrum/dropzone/src/DropZone.tsx b/packages/@react-spectrum/dropzone/src/DropZone.tsx
index 1c272755267..800c5a26d3e 100644
--- a/packages/@react-spectrum/dropzone/src/DropZone.tsx
+++ b/packages/@react-spectrum/dropzone/src/DropZone.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, StyleProps} from '@react-types/shared';
 import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {DropZoneProps, HeadingContext, Provider, DropZone as RACDropZone} from 'react-aria-components';
 // @ts-ignore
@@ -39,7 +39,9 @@ let filterProps = (props) => {
 /**
  * A drop zone is an area into which one or multiple objects can be dragged and dropped.
  */
-export const DropZone = React.forwardRef(function DropZone(props: SpectrumDropZoneProps, ref: DOMRef<HTMLDivElement>) {
+export const DropZone:
+  React.ForwardRefExoticComponent<SpectrumDropZoneProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function DropZone(props: SpectrumDropZoneProps, ref: DOMRef<HTMLDivElement>) {
   let {children, isFilled, replaceMessage, ...otherProps} = props;
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx b/packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx
index 5140b4b1069..413331d4990 100644
--- a/packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx
+++ b/packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx
@@ -22,7 +22,7 @@ import File from '@spectrum-icons/illustrations/File';
 import {FileTrigger} from 'react-aria-components';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import NotFound from '@spectrum-icons/illustrations/NotFound';
 import React, {useState} from 'react';
 import {SpectrumDropZoneProps} from '../src/DropZone';
@@ -41,17 +41,19 @@ type StoryArgs = SpectrumDropZoneProps;
 const meta: Meta<StoryArgs> = {
   title: 'DropZone',
   component: DropZone
-};
+} as Meta<typeof DropZone>;
 
 export default meta;
 
-export const withDraggable = {
+export type DropZoneStory = StoryObj<typeof DropZone>;
+
+export const withDraggable: DropZoneStory = {
   render: (args) => (
     <DropZoneWithDraggable {...args} />
   )
 };
 
-export const customAriaLabel = {
+export const customAriaLabel: DropZoneStory = {
   render: (args) => (
     <DropZoneWithDraggable
       {...args}
@@ -59,13 +61,13 @@ export const customAriaLabel = {
   )
 };
 
-export const withButton = {
+export const withButton: DropZoneStory = {
   render: (args) => (
     <DropZoneWithButton {...args} />
   )
 };
 
-export const customBannerMessage = {
+export const customBannerMessage: DropZoneStory = {
   render: (args) => (
     <Example
       {...args}
@@ -73,13 +75,13 @@ export const customBannerMessage = {
   )
 };
 
-export const acceptsMultiple = {
+export const acceptsMultiple: DropZoneStory = {
   render: (args) => (
     <Example {...args} />
   )
 };
 
-export const filledDropzone = {
+export const filledDropzone: DropZoneStory = {
   render: (args) => (
     <DropZoneFilled {...args} />
   )
diff --git a/packages/@react-spectrum/dropzone/stories/FileTrigger.stories.tsx b/packages/@react-spectrum/dropzone/stories/FileTrigger.stories.tsx
index 4ae7b08e0cd..aab6540b542 100644
--- a/packages/@react-spectrum/dropzone/stories/FileTrigger.stories.tsx
+++ b/packages/@react-spectrum/dropzone/stories/FileTrigger.stories.tsx
@@ -13,7 +13,7 @@
 import {Button} from '@react-spectrum/button';
 import {FileTrigger, FileTriggerProps} from 'react-aria-components';
 import {Link} from '@react-spectrum/link';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 type StoryArgs = FileTriggerProps;
@@ -21,11 +21,13 @@ type StoryArgs = FileTriggerProps;
 const meta: Meta<StoryArgs> = {
   title: 'FileTrigger',
   component: FileTrigger
-};
+} as Meta<typeof FileTrigger>;
 
 export default meta;
 
-export const DefaultWithButton = {
+export type FileTriggerStory = StoryObj<typeof FileTrigger>;
+
+export const DefaultWithButton: FileTriggerStory = {
   render: (args) => (
     <FileTrigger {...args} >
       <Button variant={'accent'}>Upload</Button>
@@ -33,7 +35,7 @@ export const DefaultWithButton = {
   )
 };
 
-export const DefaultWithLink = {
+export const DefaultWithLink: FileTriggerStory = {
   render: (args) => (
     <FileTrigger {...args} >
       <Link>Upload</Link>
diff --git a/packages/@react-spectrum/form/chromatic/Form.stories.tsx b/packages/@react-spectrum/form/chromatic/Form.stories.tsx
index 055dc78a680..bfcc0247983 100644
--- a/packages/@react-spectrum/form/chromatic/Form.stories.tsx
+++ b/packages/@react-spectrum/form/chromatic/Form.stories.tsx
@@ -17,10 +17,10 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Form} from '../';
 import {Heading} from '@react-spectrum/text';
 import {Item, Picker} from '@react-spectrum/picker';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SpectrumFormProps} from '@react-types/form';
 import {TextArea, TextField} from '@react-spectrum/textfield';
@@ -28,17 +28,19 @@ import {TextArea, TextField} from '@react-spectrum/textfield';
 const meta: Meta<SpectrumFormProps> = {
   title: 'Form',
   component: Form
-};
+} as Meta<typeof Form>;
 
 export default meta;
 
+export type FormStory = StoryObj<typeof Form>;
+
 let flatOptions = [
   {id: 1, name: 'Aardvark'},
   {id: 2, name: 'Kangaroo'},
   {id: 3, name: 'Snake'}
 ];
 
-const Template = (args) => (
+const Template = (args: SpectrumFormProps): JSX.Element => (
   <Form {...args}>
     <CheckboxGroup defaultValue={['dragons']} label="Pets">
       <Checkbox value="dogs">Dogs</Checkbox>
@@ -74,74 +76,74 @@ const Template = (args) => (
   </Form>
 );
 
-export const Default = {
-  render: Template,
+export const Default: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const LabelPositionSide = {
-  render: Template,
+export const LabelPositionSide: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side',
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const LabelAlignEnd = {
-  render: Template,
+export const LabelAlignEnd: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label align: end',
   args: {...Default.args, labelAlign: 'end'}
 };
 
-export const LabelAlignSideEnd = {
-  render: Template,
+export const LabelAlignSideEnd: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side, label align: end',
   args: {...Default.args, labelPosition: 'side', labelAlign: 'end'}
 };
 
-export const Required = {
-  render: Template,
+export const Required: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isRequired',
   args: {...Default.args, isRequired: true}
 };
 
-export const NecessityIndicatorLabel = {
-  render: Template,
+export const NecessityIndicatorLabel: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'necessity indicator: label',
   args: {...Default.args, necessityIndicator: 'label'}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet',
   args: {...Default.args, isQuiet: true}
 };
 
-export const Emphasized = {
-  render: Template,
+export const Emphasized: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isEmphasized',
   args: {...Default.args, isEmphasized: true}
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isDisabled',
   args: {...Default.args, isDisabled: true}
 };
 
-export const ReadOnly = {
-  render: Template,
+export const ReadOnly: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isReadOnly',
   args: {...Default.args, isReadOnly: true}
 };
 
-export const ValidationStateInvalid = {
-  render: Template,
+export const ValidationStateInvalid: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'validationState: invalid',
   args: {...Default.args, validationState: 'invalid'}
 };
 
-export const ValidationStateValid = {
-  render: Template,
+export const ValidationStateValid: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'validationState: valid',
   args: {...Default.args, validationState: 'valid'}
 };
diff --git a/packages/@react-spectrum/form/chromatic/FormLanguages.stories.tsx b/packages/@react-spectrum/form/chromatic/FormLanguages.stories.tsx
index dd18436c00b..deb8c551d6a 100644
--- a/packages/@react-spectrum/form/chromatic/FormLanguages.stories.tsx
+++ b/packages/@react-spectrum/form/chromatic/FormLanguages.stories.tsx
@@ -15,15 +15,16 @@ import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
-import {Form} from '@react-spectrum/form';
+import {Form, SpectrumFormProps} from '@react-spectrum/form';
 import {Heading} from '@react-spectrum/text';
 // @ts-ignore
 import intlMessages from './intlMessages.json';
 import {Item, Picker} from '@react-spectrum/picker';
+import {Meta, StoryFn} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import {RangeSlider, Slider} from '@react-spectrum/slider';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {Switch} from '@react-spectrum/switch';
 import {TextArea, TextField} from '@react-spectrum/textfield';
@@ -38,10 +39,13 @@ export default {
       locales: ['ar-AE', 'he-IL', 'zh-CN', 'zh-TW', 'ja-JP', 'ko-KR'],
       scales: ['large', 'medium']
     }
-  }
-};
+  },
+  excludeStories: ['TranslateForm']
+} as Meta<typeof Form>;
+
+export type FormStory = StoryFn<typeof Form>;
 
-let TranslateForm = (props) => {
+export let TranslateForm = (props: Omit<SpectrumFormProps, 'children'>): JSX.Element => {
   let strings = useLocalizedStringFormatter(intlMessages);
 
   return (
@@ -145,10 +149,10 @@ let TranslateForm = (props) => {
   );
 };
 
-export const FormTranslatedText = (props) => (
+export const FormTranslatedText: FormStory = (props) => (
   <TranslateForm {...props} />
 );
 
-export const FormTranslatedTextSideLabel = () => {
-  return <FormTranslatedText labelPosition="side" labelAlign="start" width="500px" />;
+export const FormTranslatedTextSideLabel: FormStory = () => {
+  return <TranslateForm labelPosition="side" labelAlign="start" width="500px" />;
 };
diff --git a/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx b/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx
index 95f222af306..07c754eec65 100644
--- a/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx
+++ b/packages/@react-spectrum/form/chromatic/FormLongLabel.stories.tsx
@@ -15,10 +15,10 @@ import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
 import {Form} from '../';
 import {Item, Picker} from '@react-spectrum/picker';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {SpectrumFormProps} from '@react-types/form';
 import {TextArea, TextField} from '@react-spectrum/textfield';
@@ -26,17 +26,19 @@ import {TextArea, TextField} from '@react-spectrum/textfield';
 const meta: Meta<SpectrumFormProps> = {
   title: 'Form/LongLabel',
   component: Form
-};
+} as Meta<typeof Form>;
 
 export default meta;
 
+export type FormStory = StoryObj<typeof Form>;
+
 let flatOptions = [
   {id: 1, name: 'Aardvark'},
   {id: 2, name: 'Kangaroo'},
   {id: 3, name: 'Snake'}
 ];
 
-const Template = (args) => (
+const Template = (args: Omit<SpectrumFormProps, 'children'>): JSX.Element => (
   <Form {...args}>
     <CheckboxGroup defaultValue={['dragons']} label="Pets are family fun for all, two real and two fantasy">
       <Checkbox value="dogs">Dogs</Checkbox>
@@ -66,44 +68,44 @@ const Template = (args) => (
   </Form>
 );
 
-export const Default = {
-  render: Template,
+export const Default: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const DefaultNarrow = {
-  render: Template,
+export const DefaultNarrow: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'default, width: 200px',
   args: {width: '200px'}
 };
 
-export const LabelPositionSide = {
-  render: Template,
+export const LabelPositionSide: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side',
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const LabelAlignEnd = {
-  render: Template,
+export const LabelAlignEnd: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label align: end',
   args: {...Default.args, labelAlign: 'end'}
 };
 
-export const NecessityIndicatorLabel = {
-  render: Template,
+export const NecessityIndicatorLabel: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'necessity indicator: label',
   args: {...Default.args, necessityIndicator: 'label'}
 };
 
-export const LabelPositionSideRequiredNecessityIndicatorLabel = {
-  render: Template,
+export const LabelPositionSideRequiredNecessityIndicatorLabel: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side, isRequired, necessity indicator: label',
   args: {...Default.args, labelPosition: 'side', necessityIndicator: 'label', isRequired: true}
 };
 
-export const LabelPositionSideRequiredNecessityIndicatorLabelNarrow = {
-  render: Template,
+export const LabelPositionSideRequiredNecessityIndicatorLabelNarrow: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'label position: side, isRequired, necessity indicator: label, width: 200px',
   args: {
     ...Default.args,
@@ -114,20 +116,20 @@ export const LabelPositionSideRequiredNecessityIndicatorLabelNarrow = {
   }
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet',
   args: {...Default.args, isQuiet: true}
 };
 
-export const QuietLabelPositionSideAlignEnd = {
-  render: Template,
+export const QuietLabelPositionSideAlignEnd: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet, label position: side, label align: end',
   args: {...Default.args, isQuiet: true, labelPosition: 'side', labelAlign: 'end'}
 };
 
-export const QuietLabelPositionSideNarrow = {
-  render: Template,
+export const QuietLabelPositionSideNarrow: FormStory = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet, label position: side, width: 200px',
   args: {...Default.args, isQuiet: true, labelPosition: 'side', width: '200px'}
 };
diff --git a/packages/@react-spectrum/form/src/Form.tsx b/packages/@react-spectrum/form/src/Form.tsx
index b15d9012d5f..5917517eed8 100644
--- a/packages/@react-spectrum/form/src/Form.tsx
+++ b/packages/@react-spectrum/form/src/Form.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Alignment, DOMRef, LabelPosition, SpectrumLabelableProps} from '@react-types/shared';
+import {Alignment, DOMRef, DOMRefValue, LabelPosition, SpectrumLabelableProps} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {FormValidationContext} from '@react-stately/form';
@@ -47,7 +47,9 @@ const formPropNames = new Set([
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
  */
-export const Form = React.forwardRef(function Form(props: SpectrumFormProps, ref: DOMRef<HTMLFormElement>) {
+export const Form:
+  React.ForwardRefExoticComponent<SpectrumFormProps & React.RefAttributes<DOMRefValue<HTMLFormElement>>> =
+React.forwardRef(function Form(props: SpectrumFormProps, ref: DOMRef<HTMLFormElement>) {
   props = useProviderProps(props);
   let {
     children,
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index ded882d8e99..586a8cad4ad 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -25,7 +25,7 @@ import {countries, states} from './data';
 import {DateField, DatePicker, DateRangePicker, TimeField} from '@react-spectrum/datepicker';
 import {Flex} from '@react-spectrum/layout';
 import {Form, SpectrumFormProps} from '../';
-import {FormTranslatedText} from './../chromatic/FormLanguages.stories';
+import {FormTranslatedText, TranslateForm} from './../chromatic/FormLanguages.stories';
 import {Heading} from '@react-spectrum/text';
 import {InlineAlert} from '@react-spectrum/inlinealert';
 import {Item, Picker} from '@react-spectrum/picker';
@@ -433,7 +433,7 @@ export const FormWithNumberfieldAndLocaleArAe: FormStory = {
 };
 
 export const WithTranslations: FormStory = {
-  render: () => <FormTranslatedText />,
+  render: () => <TranslateForm />,
   name: 'with translations',
   parameters: {description: {data: 'Translations included for: Arabic, English, Hebrew, Japanese, Korean, Simplified Chinese, and Traditional Chinese.'}}
 };
diff --git a/packages/@react-spectrum/icon/stories/Icon.stories.tsx b/packages/@react-spectrum/icon/stories/Icon.stories.tsx
index e90c6cd8258..24a824a534c 100644
--- a/packages/@react-spectrum/icon/stories/Icon.stories.tsx
+++ b/packages/@react-spectrum/icon/stories/Icon.stories.tsx
@@ -11,14 +11,17 @@
  */
 
 import {Icon} from '../';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'Icons/Custom',
   providerSwitcher: {status: 'positive'}
-};
+} as Meta<typeof Icon>;
+
+export type IconStory = StoryFn<typeof Icon>;
 
-export const ExcitingSquare = () => (
+export const ExcitingSquare: IconStory = () => (
   <Icon>
     <svg viewBox="0 0 25 25">
       <rect x="0" y="0" width="25" height="25" />
diff --git a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx
index 038545fc671..5a5a2c6b758 100644
--- a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, ClearSlots, SlotProvider, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {Flex} from '@react-spectrum/layout';
 import React, {forwardRef} from 'react';
@@ -22,7 +22,9 @@ import styles from '@adobe/spectrum-css-temp/components/illustratedmessage/vars.
  * An IllustratedMessage displays an illustration and a message, usually
  * for an empty state or an error page.
  */
-export const IllustratedMessage = forwardRef(function IllustratedMessage(props: SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
+export const IllustratedMessage:
+  React.ForwardRefExoticComponent<SpectrumIllustratedMessageProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function IllustratedMessage(props: SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
   props = useSlotProps(props, 'illustration');
   let {
     children,
diff --git a/packages/@react-spectrum/image/src/Image.tsx b/packages/@react-spectrum/image/src/Image.tsx
index 487f416368f..fec71883871 100644
--- a/packages/@react-spectrum/image/src/Image.tsx
+++ b/packages/@react-spectrum/image/src/Image.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React from 'react';
 import {SpectrumImageProps} from '@react-types/image';
@@ -21,7 +21,9 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * Image is used to insert and display an image within a component.
  */
-export const Image = React.forwardRef(// incomplete component for show right now
+export const Image:
+  React.ForwardRefExoticComponent<SpectrumImageProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(// incomplete component for show right now
 
 function Image(props: SpectrumImageProps, ref: DOMRef<HTMLDivElement>) {
   /* Slots should be able to pass an alt for default behavior, but in Images, the child may know better. */
@@ -59,7 +61,7 @@ function Image(props: SpectrumImageProps, ref: DOMRef<HTMLDivElement>) {
         src={src}
         alt={userProvidedAlt || alt}
         style={{objectFit}}
-        className={classNames(styles, 'spectrum-Image-img')} 
+        className={classNames(styles, 'spectrum-Image-img')}
         onError={props?.onError}
         onLoad={props?.onLoad} />
     </div>

From beace6c70bba84b968cf57b9e09d6a3e597fa2b7 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 12:10:55 +1000
Subject: [PATCH 08/19] fix lint

---
 packages/@react-spectrum/form/stories/Form.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 586a8cad4ad..41c804493fb 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -25,7 +25,6 @@ import {countries, states} from './data';
 import {DateField, DatePicker, DateRangePicker, TimeField} from '@react-spectrum/datepicker';
 import {Flex} from '@react-spectrum/layout';
 import {Form, SpectrumFormProps} from '../';
-import {FormTranslatedText, TranslateForm} from './../chromatic/FormLanguages.stories';
 import {Heading} from '@react-spectrum/text';
 import {InlineAlert} from '@react-spectrum/inlinealert';
 import {Item, Picker} from '@react-spectrum/picker';
@@ -40,6 +39,7 @@ import {StatusLight} from '@react-spectrum/statuslight';
 import {Switch} from '@react-spectrum/switch';
 import {TagGroup} from '@react-spectrum/tag';
 import {TextArea, TextField} from '@react-spectrum/textfield';
+import {TranslateForm} from './../chromatic/FormLanguages.stories';
 import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
 import {Well} from '@react-spectrum/well';
 

From 6cd655f44f6e949fef5234f5ff657a6ce8f39741 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 12:21:14 +1000
Subject: [PATCH 09/19] inlinealert, label, labeledvalue, layout

---
 .../chromatic/InlineAlert.stories.tsx         | 16 ++++----
 .../inlinealert/src/InlineAlert.tsx           |  6 ++-
 .../stories/InlineAlert.stories.tsx           |  8 ++--
 .../label/chromatic/HelpText.stories.tsx      | 30 +++++++-------
 packages/@react-spectrum/label/src/Field.tsx  |  4 +-
 .../@react-spectrum/label/src/HelpText.tsx    |  6 ++-
 packages/@react-spectrum/label/src/Label.tsx  |  6 ++-
 .../label/stories/HelpText.stories.tsx        | 16 ++++----
 .../labeledvalue/src/LabeledValue.tsx         |  8 ++--
 .../stories/LabeledValue.stories.tsx          | 40 ++++++++++---------
 .../layout/chromatic/Flex.stories.tsx         | 31 +++++++-------
 .../layout/chromatic/Grid.stories.tsx         |  9 +++--
 packages/@react-spectrum/layout/src/Flex.tsx  |  6 ++-
 packages/@react-spectrum/layout/src/Grid.tsx  |  6 ++-
 .../layout/stories/Flex.stories.tsx           | 33 ++++++++-------
 .../layout/stories/Grid.stories.tsx           | 11 +++--
 16 files changed, 134 insertions(+), 102 deletions(-)

diff --git a/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.stories.tsx
index 028000a07d3..6c1b76d53d9 100644
--- a/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/inlinealert/chromatic/InlineAlert.stories.tsx
@@ -13,7 +13,7 @@
 import {Content} from '@react-spectrum/view';
 import {Heading} from '@react-spectrum/text';
 import {InlineAlert, SpectrumInlineAlertProps} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 const meta: Meta<SpectrumInlineAlertProps> = {
@@ -23,7 +23,9 @@ const meta: Meta<SpectrumInlineAlertProps> = {
 
 export default meta;
 
-export const Default = {
+export type InlineAlertStory = StoryObj<typeof InlineAlert>;
+
+export const Default: InlineAlertStory = {
   args: {
     children: (
       <>
@@ -34,7 +36,7 @@ export const Default = {
   }
 };
 
-export const Informative = {
+export const Informative: InlineAlertStory = {
   args: {
     variant: 'info',
     children: (
@@ -46,7 +48,7 @@ export const Informative = {
   }
 };
 
-export const Positive = {
+export const Positive: InlineAlertStory = {
   args: {
     variant: 'positive',
     children: (
@@ -58,7 +60,7 @@ export const Positive = {
   }
 };
 
-export const Notice = {
+export const Notice: InlineAlertStory = {
   args: {
     variant: 'notice',
     children: (
@@ -70,7 +72,7 @@ export const Notice = {
   }
 };
 
-export const Negative = {
+export const Negative: InlineAlertStory = {
   args: {
     variant: 'negative',
     children: (
@@ -82,7 +84,7 @@ export const Negative = {
   }
 };
 
-export const LongContent = {
+export const LongContent: InlineAlertStory = {
   args: {
     variant: 'info'
   },
diff --git a/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx
index 396647e2cfc..1e951f13b16 100644
--- a/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx
+++ b/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx
@@ -12,7 +12,7 @@
 
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMProps, DOMRef, StyleProps} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue, StyleProps} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {FocusRing} from '@react-aria/focus';
 import {Grid} from '@react-spectrum/layout';
@@ -52,7 +52,9 @@ let ICONS = {
  * Inline alerts display a non-modal message associated with objects in a view.
  * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
  */
-export const InlineAlert = React.forwardRef(function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef<HTMLDivElement>) {
+export const InlineAlert:
+  React.ForwardRefExoticComponent<SpectrumInlineAlertProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {
     children,
diff --git a/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx b/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx
index 1c70c459f3e..00c574d3dd6 100644
--- a/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx
+++ b/packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx
@@ -14,7 +14,7 @@ import {Button} from '@react-spectrum/button';
 import {Content} from '@react-spectrum/view';
 import {Heading} from '@react-spectrum/text';
 import {InlineAlert, SpectrumInlineAlertProps} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 
 type StoryArgs = SpectrumInlineAlertProps & {title: string, content: string};
@@ -42,7 +42,9 @@ const meta: Meta<StoryArgs> = {
 
 export default meta;
 
-export const Default = {
+export type InlineAlertStory = StoryObj<StoryArgs>;
+
+export const Default: InlineAlertStory = {
   render: (args) => (
     <InlineAlert {...args}>
       <Heading>{args.title}</Heading>
@@ -51,7 +53,7 @@ export const Default = {
   )
 };
 
-export const Dynamic = {
+export const Dynamic: InlineAlertStory = {
   render: (args) => <DynamicExample {...args} />
 };
 
diff --git a/packages/@react-spectrum/label/chromatic/HelpText.stories.tsx b/packages/@react-spectrum/label/chromatic/HelpText.stories.tsx
index bdc755bd673..cecab0c49ad 100644
--- a/packages/@react-spectrum/label/chromatic/HelpText.stories.tsx
+++ b/packages/@react-spectrum/label/chromatic/HelpText.stories.tsx
@@ -9,13 +9,11 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {TextField} from '@react-spectrum/textfield';
 
-type HelpTextStory = ComponentStoryObj<typeof TextField>;
-
 export default {
   title: 'HelpText',
   component: TextField,
@@ -23,13 +21,15 @@ export default {
     label: 'Password',
     description: 'Password must be at least 8 characters.'
   }
-} as ComponentMeta<typeof TextField>;
+} as Meta<typeof TextField>;
+
+export type HelpTextStory = StoryObj<typeof TextField>;
 
-export let Default: HelpTextStory = {
+export const Default: HelpTextStory = {
   name: 'description'
 };
 
-export const ErrorMessage = {
+export const ErrorMessage: HelpTextStory = {
   ...Default,
   args: {
     errorMessage: 'Create a password with at least 8 characters.',
@@ -38,7 +38,7 @@ export const ErrorMessage = {
   name: 'error message'
 };
 
-export const Disabled = {
+export const Disabled: HelpTextStory = {
   ...Default,
   args: {
     isDisabled: true
@@ -46,7 +46,7 @@ export const Disabled = {
   name: 'disabled'
 };
 
-export const LabelAlignEnd = {
+export const LabelAlignEnd: HelpTextStory = {
   ...Default,
   args: {
     labelAlign: 'end'
@@ -54,7 +54,7 @@ export const LabelAlignEnd = {
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: HelpTextStory = {
   ...Default,
   args: {
     labelPosition: 'side'
@@ -62,7 +62,7 @@ export const LabelPositionSide = {
   name: 'labelPosition: side'
 };
 
-export const NoVisibleLabel = {
+export const NoVisibleLabel: HelpTextStory = {
   ...Default,
   args: {
     label: null,
@@ -71,7 +71,7 @@ export const NoVisibleLabel = {
   name: 'no visible label'
 };
 
-export const CustomWidth = {
+export const CustomWidth: HelpTextStory = {
   ...Default,
   args: {
     width: '100px'
@@ -79,7 +79,7 @@ export const CustomWidth = {
   name: 'custom width'
 };
 
-export const CustomWidthLabelPositionSide = {
+export const CustomWidthLabelPositionSide: HelpTextStory = {
   ...Default,
   args: {
     width: '440px',
@@ -88,7 +88,7 @@ export const CustomWidthLabelPositionSide = {
   name: 'custom width, labelPosition: side'
 };
 
-export const ContainerWithTextAlignmentSetDescription = {
+export const ContainerWithTextAlignmentSetDescription: HelpTextStory = {
   args: {
     label: 'Password',
     description: 'Enter a single digit number'
@@ -97,7 +97,7 @@ export const ContainerWithTextAlignmentSetDescription = {
   decorators: [TextAlignDecorator]
 };
 
-export const ContainerWithTextAlignmentSetError = {
+export const ContainerWithTextAlignmentSetError: HelpTextStory = {
   args: {
     label: 'Password',
     errorMessage: 'Create a password with at least 8 characters.',
@@ -107,7 +107,7 @@ export const ContainerWithTextAlignmentSetError = {
   decorators: [TextAlignDecorator]
 };
 
-export const ContainerWithTextAlignmentSetDescriptionAndSetError = {
+export const ContainerWithTextAlignmentSetDescriptionAndSetError: HelpTextStory = {
   args: {
     label: 'Password',
     errorMessage: 'Create a password with at least 8 characters.',
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
index 45feae08714..0966daa7154 100644
--- a/packages/@react-spectrum/label/src/Field.tsx
+++ b/packages/@react-spectrum/label/src/Field.tsx
@@ -21,7 +21,9 @@ import React, {ReactNode, Ref} from 'react';
 import {SpectrumFieldProps} from '@react-types/label';
 import {useFormProps} from '@react-spectrum/form';
 
-export const Field = React.forwardRef(function Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {
+export const Field:
+  React.ForwardRefExoticComponent<SpectrumFieldProps & React.RefAttributes<HTMLElement>> =
+React.forwardRef(function Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {
   let formProps = useFormProps(props);
   let isInForm = formProps !== props;
   props = formProps;
diff --git a/packages/@react-spectrum/label/src/HelpText.tsx b/packages/@react-spectrum/label/src/HelpText.tsx
index 85f08bc9be6..29afdaa3fa6 100644
--- a/packages/@react-spectrum/label/src/HelpText.tsx
+++ b/packages/@react-spectrum/label/src/HelpText.tsx
@@ -12,7 +12,7 @@
 
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';
+import {DOMRef, DOMRefValue, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';
 import React, {HTMLAttributes, ReactNode} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/helptext/vars.css';
 
@@ -28,7 +28,9 @@ interface HelpTextProps extends Omit<SpectrumHelpTextProps, 'errorMessage'>, Omi
 /**
  * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
  */
-export const HelpText = React.forwardRef(function HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {
+export const HelpText:
+  React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {
   let {
     description,
     errorMessage,
diff --git a/packages/@react-spectrum/label/src/Label.tsx b/packages/@react-spectrum/label/src/Label.tsx
index 8e3a5b5893c..60b6876c7f1 100644
--- a/packages/@react-spectrum/label/src/Label.tsx
+++ b/packages/@react-spectrum/label/src/Label.tsx
@@ -12,7 +12,7 @@
 
 import Asterisk from '@spectrum-icons/ui/Asterisk';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -22,7 +22,9 @@ import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export const Label = React.forwardRef(function Label(props: SpectrumLabelProps, ref: DOMRef<HTMLLabelElement>) {
+export const Label:
+  React.ForwardRefExoticComponent<SpectrumLabelProps & React.RefAttributes<DOMRefValue<HTMLLabelElement>>> =
+React.forwardRef(function Label(props: SpectrumLabelProps, ref: DOMRef<HTMLLabelElement>) {
   props = useProviderProps(props);
   let {
     children,
diff --git a/packages/@react-spectrum/label/stories/HelpText.stories.tsx b/packages/@react-spectrum/label/stories/HelpText.stories.tsx
index b16f109e5da..91d733168e6 100644
--- a/packages/@react-spectrum/label/stories/HelpText.stories.tsx
+++ b/packages/@react-spectrum/label/stories/HelpText.stories.tsx
@@ -9,15 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React, {useState} from 'react';
 import {SpectrumTextFieldProps} from '@react-types/textfield';
 import {TextField} from '@react-spectrum/textfield';
 
-type HelpTextStory = ComponentStoryObj<typeof TextField>;
-
 const argTypes = {
   label: {
     control: 'text'
@@ -57,11 +55,13 @@ export default {
     description: 'Password must be at least 8 characters.'
   },
   argTypes: argTypes
-} as ComponentMeta<typeof TextField>;
+} as Meta<typeof TextField>;
+
+export type HelpTextStory = StoryObj<typeof TextField>;
 
-export let Default: HelpTextStory = {};
+export const Default: HelpTextStory = {};
 
-export let WithState: HelpTextStory = {
+export const WithState: HelpTextStory = {
   args: {
     label: 'Empty field',
     description: 'This input is only valid when it\'s empty.',
@@ -86,7 +86,7 @@ export let AriaLabel: HelpTextStory = {
   }
 };
 
-export const DescriptionAndCustomDescription = {
+export const DescriptionAndCustomDescription: StoryObj<SpectrumTextFieldProps & {customDescription: string}> = {
   args: {
     customDescription: 'Custom description.',
     'aria-describedby': 'custom-description'
@@ -150,7 +150,7 @@ function TextFieldWithValidationState(props: SpectrumTextFieldProps) {
 
 function TextFieldWithAriaLabelAndDynamicHelpText(props: SpectrumTextFieldProps) {
   let [value, setValue] = useState('');
-  
+
   return (
     <TextField
       {...props}
diff --git a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx b/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx
index 0ad3da053cc..27240222012 100644
--- a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx
+++ b/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx
@@ -12,7 +12,7 @@
 
 import {CalendarDate, CalendarDateTime, getLocalTimeZone, Time, toCalendarDateTime, today, ZonedDateTime} from '@internationalized/date';
 import {classNames, useDOMRef} from '@react-spectrum/utils';
-import type {DOMProps, DOMRef, RangeValue, SpectrumLabelableProps, StyleProps} from '@react-types/shared';
+import type {DOMProps, DOMRef, DOMRefValue, RangeValue, SpectrumLabelableProps, StyleProps} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {filterDOMProps} from '@react-aria/utils';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
@@ -79,7 +79,9 @@ export type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBa
 /**
  * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
  */
-export const LabeledValue = React.forwardRef(function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {
+export const LabeledValue:
+  React.ForwardRefExoticComponent<SpectrumLabeledValueProps<SpectrumLabeledValueTypes> & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+React.forwardRef(function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {
   let {
     value,
     formatOptions
@@ -95,7 +97,7 @@ export const LabeledValue = React.forwardRef(function LabeledValue<T extends Spe
       throw new Error('LabeledValue cannot contain an editable value.');
     }
   }, [domRef]);
-  
+
 
   let children;
   if (Array.isArray(value)) {
diff --git a/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx b/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx
index d7d131eec41..be21686e6f7 100644
--- a/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx
+++ b/packages/@react-spectrum/labeledvalue/stories/LabeledValue.stories.tsx
@@ -16,7 +16,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
 import {LabeledValue} from '..';
 import {Link} from '@react-spectrum/link';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 const meta: Meta<typeof LabeledValue> = {
@@ -43,86 +43,88 @@ const meta: Meta<typeof LabeledValue> = {
     }
   }
 };
- 
+
 export default meta;
 
-export let Default = {
+export type LabeledValueStory = StoryObj<typeof LabeledValue>;
+
+export const Default: LabeledValueStory = {
   args: {label: 'Test', value: 'foo '.repeat(20)},
   name: 'String'
 };
 
-export let StringArray = {
+export const StringArray: LabeledValueStory = {
   args: {label: 'Test', value: ['wow', 'cool', 'awesome']},
   name: 'String array'
 };
 
-export let CalendarDateType = {
+export const CalendarDateType: LabeledValueStory = {
   args: {label: 'Test', value: new CalendarDate(2019, 6, 5)},
   name: 'CalendarDate'
 };
 
-export let CalendarDateTimeType = {
+export const CalendarDateTimeType: LabeledValueStory = {
   args: {label: 'Test', value: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120)},
   name: 'CalendarDateTime'
 };
 
-export let CalendarDateTimeTypeFormatOptions = {
+export const CalendarDateTimeTypeFormatOptions: LabeledValueStory = {
   args: {label: 'Test', value: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120), formatOptions: {dateStyle: 'short', timeStyle: 'short'}},
   name: 'CalendarDateTime with formatOptions'
 };
 
-export let ZonedDateTimeType = {
+export const ZonedDateTimeType: LabeledValueStory = {
   args: {label: 'Test', value: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000)},
   name: 'ZonedDateTime'
 };
 
-export let DateType = {
+export const DateType: LabeledValueStory = {
   args: {label: 'Test', value: new Date(2000, 5, 5)},
   name: 'Date'
 };
 
-export let TimeType = {
+export const TimeType: LabeledValueStory = {
   args: {label: 'Test', value: new Time(9, 45)},
   name: 'Time'
 };
 
-export let CalendarDateRange = {
+export const CalendarDateRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 7, 5)}},
   name: 'RangeValue<CalendarDate>'
 };
 
-export let CalendarDateTimeRange = {
+export const CalendarDateTimeRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new CalendarDateTime(2020, 2, 3, 12, 23, 24, 120), end: new CalendarDateTime(2020, 3, 3, 12, 23, 24, 120)}},
   name: 'RangeValue<CalendarDateTime>'
 };
 
-export let ZonedDateTimeRange = {
+export const ZonedDateTimeRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new ZonedDateTime(2020, 2, 3, 'America/Los_Angeles', -28800000), end: new ZonedDateTime(2020, 3, 3, 'America/Los_Angeles', -28800000)}},
   name: 'RangeValue<ZonedDateTime>'
 };
 
-export let DateRange = {
+export const DateRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new Date(2019, 6, 5), end: new Date(2019, 6, 10)}},
   name: 'RangeValue<Date>'
 };
 
-export let TimeRange = {
+export const TimeRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: new Time(9, 45), end: new Time(10, 50)}},
   name: 'RangeValue<Time>'
 };
 
-export let Number = {
+export const Number: LabeledValueStory = {
   args: {label: 'Test', value: 10},
   name: 'Number'
 };
 
-export let NumberRange = {
+export const NumberRange: LabeledValueStory = {
   args: {label: 'Test', value: {start: 10, end: 20}},
   name: 'RangeValue<Number>'
 };
 
 
-export let CustomComponent = {
+export const CustomComponent: LabeledValueStory = {
   args: {
     label: 'Test',
     value: <Link href="https://www.adobe.com">Adobe</Link>
@@ -130,7 +132,7 @@ export let CustomComponent = {
   name: 'Custom component'
 };
 
-export let WithContextualHelp = {
+export const WithContextualHelp: LabeledValueStory = {
   args: {
     label: 'Test',
     value: 25,
diff --git a/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx b/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
index 6fe16d710e5..84f2cc68db8 100644
--- a/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
+++ b/packages/@react-spectrum/layout/chromatic/Flex.stories.tsx
@@ -12,6 +12,7 @@
 
 import {BackgroundColorValue, Responsive} from '@react-types/shared';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -42,9 +43,11 @@ export default {
   parameters: {
     chromaticProvider: {colorSchemes: ['light']}
   }
-};
+} as Meta<typeof Flex>;
+
+export type FlexStory = StoryObj<typeof Flex>;
 
-export const VerticalStackWithGap = () => (
+export const VerticalStackWithGap: FlexStory = () => (
   <Flex direction="column" width="size-2000" gap="size-100">
     <View backgroundColor="celery-600" height="size-800" />
     <View backgroundColor="blue-600" height="size-800" />
@@ -56,7 +59,7 @@ VerticalStackWithGap.story = {
   name: 'Vertical stack with gap'
 };
 
-export const HorizontalStackWithGap = () => (
+export const HorizontalStackWithGap: FlexStory = () => (
   <Flex direction="row" height="size-800" gap="size-100">
     <View backgroundColor="celery-600" width="size-800" />
     <View backgroundColor="blue-600" width="size-800" />
@@ -68,7 +71,7 @@ HorizontalStackWithGap.story = {
   name: 'Horizontal stack with gap'
 };
 
-export const WrappingWithGap = () => (
+export const WrappingWithGap: FlexStory = () => (
   <View maxWidth="80%" borderWidth="thin" borderColor="dark">
     <Flex direction="row" gap="size-100" wrap>
       {colors.map((color) => (
@@ -82,7 +85,7 @@ WrappingWithGap.story = {
   name: 'Wrapping with gap'
 };
 
-export const NestedFlexWithGap = () => (
+export const NestedFlexWithGap: FlexStory = () => (
   <Flex direction="column" gap="size-150">
     <View backgroundColor="celery-600" height="size-800" />
     <Flex direction="row" height="size-800" gap="size-100">
@@ -98,7 +101,7 @@ NestedFlexWithGap.story = {
   name: 'Nested flex with gap'
 };
 
-export const AlignCenter = () => (
+export const AlignCenter: FlexStory = () => (
   <Flex direction="row" gap="size-100" alignItems="center">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-2000" />
@@ -110,7 +113,7 @@ AlignCenter.story = {
   name: 'Align center'
 };
 
-export const AlignEnd = () => (
+export const AlignEnd: FlexStory = () => (
   <Flex direction="row" gap="size-100" alignItems="end">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-2000" />
@@ -122,7 +125,7 @@ AlignEnd.story = {
   name: 'Align end'
 };
 
-export const JustifyStart = () => (
+export const JustifyStart: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="start" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -134,7 +137,7 @@ JustifyStart.story = {
   name: 'Justify start'
 };
 
-export const JustifyCenter = () => (
+export const JustifyCenter: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="center" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -146,7 +149,7 @@ JustifyCenter.story = {
   name: 'Justify center'
 };
 
-export const JustifyEnd = () => (
+export const JustifyEnd: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="end" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -158,7 +161,7 @@ JustifyEnd.story = {
   name: 'Justify end'
 };
 
-export const JustifySpaceAround = () => (
+export const JustifySpaceAround: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-around" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -170,7 +173,7 @@ JustifySpaceAround.story = {
   name: 'Justify space-around'
 };
 
-export const JustifySpaceBetween = () => (
+export const JustifySpaceBetween: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-between" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -182,7 +185,7 @@ JustifySpaceBetween.story = {
   name: 'Justify space-between'
 };
 
-export const JustifySpaceEvenly = () => (
+export const JustifySpaceEvenly: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-evenly" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -194,7 +197,7 @@ JustifySpaceEvenly.story = {
   name: 'Justify space-evenly'
 };
 
-export const Ordered = () => (
+export const Ordered: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-evenly" width="80%">
     <View backgroundColor="celery-600" order={2} width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
diff --git a/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx b/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
index ce1aee081fe..0e7ae45a652 100644
--- a/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
+++ b/packages/@react-spectrum/layout/chromatic/Grid.stories.tsx
@@ -12,6 +12,7 @@
 
 import {BackgroundColorValue, Responsive} from '@react-types/shared';
 import {Grid, repeat} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -42,9 +43,11 @@ export default {
   parameters: {
     chromaticProvider: {colorSchemes: ['light']}
   }
-};
+} as Meta<typeof Grid>;
+
+export type GridStory = StoryObj<typeof Grid>;
 
-export const ExplicitGrid = () => (
+export const ExplicitGrid: GridStory = () => (
   <Grid
     areas={['header  header', 'sidebar content', 'footer  footer']}
     columns={['size-3000', 'auto']}
@@ -71,7 +74,7 @@ ExplicitGrid.story = {
   name: 'Explicit grid'
 };
 
-export const ImplicitGrid = () => (
+export const ImplicitGrid: GridStory = () => (
   <Grid
     columns={repeat('auto-fit', 'size-800')}
     autoRows="size-800"
diff --git a/packages/@react-spectrum/layout/src/Flex.tsx b/packages/@react-spectrum/layout/src/Flex.tsx
index 494a54cded1..5f5bf75e9b9 100644
--- a/packages/@react-spectrum/layout/src/Flex.tsx
+++ b/packages/@react-spectrum/layout/src/Flex.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, passthroughStyle, responsiveDimensionValue, StyleHandlers, useBreakpoint, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {FlexProps} from '@react-types/layout';
 import React, {forwardRef} from 'react';
@@ -29,7 +29,9 @@ const flexStyleProps: StyleHandlers = {
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
  * property to define consistent spacing between items.
  */
-export const Flex = forwardRef(function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
+export const Flex:
+  React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     ...otherProps
diff --git a/packages/@react-spectrum/layout/src/Grid.tsx b/packages/@react-spectrum/layout/src/Grid.tsx
index b09a89705a4..a059c5619b5 100644
--- a/packages/@react-spectrum/layout/src/Grid.tsx
+++ b/packages/@react-spectrum/layout/src/Grid.tsx
@@ -18,7 +18,7 @@ import {
   useDOMRef,
   useStyleProps
 } from '@react-spectrum/utils';
-import {DimensionValue, DOMRef} from '@react-types/shared';
+import {DimensionValue, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {GridProps} from '@react-types/layout';
 import React, {forwardRef} from 'react';
@@ -44,7 +44,9 @@ const gridStyleProps: StyleHandlers = {
  * A layout container using CSS grid. Supports Spectrum dimensions as values to
  * ensure consistent and adaptive sizing and spacing.
  */
-export const Grid = forwardRef(function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {
+export const Grid:
+  React.ForwardRefExoticComponent<GridProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     ...otherProps
diff --git a/packages/@react-spectrum/layout/stories/Flex.stories.tsx b/packages/@react-spectrum/layout/stories/Flex.stories.tsx
index 5c2316cabf5..f1cd197f4ae 100644
--- a/packages/@react-spectrum/layout/stories/Flex.stories.tsx
+++ b/packages/@react-spectrum/layout/stories/Flex.stories.tsx
@@ -12,6 +12,7 @@
 
 import {BackgroundColorValue, Responsive as TResponsive} from '@react-types/shared';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -38,9 +39,11 @@ for (let color of baseColors) {
 
 export default {
   title: 'Flex'
-};
+} as Meta<typeof Flex>;
+
+export type FlexStory = StoryFn<typeof Flex>;
 
-export const VerticalStackWithGap = () => (
+export const VerticalStackWithGap: FlexStory = () => (
   <Flex direction="column" width="size-2000" gap="size-100">
     <View backgroundColor="celery-600" height="size-800" />
     <View backgroundColor="blue-600" height="size-800" />
@@ -52,7 +55,7 @@ VerticalStackWithGap.story = {
   name: 'Vertical stack with gap'
 };
 
-export const HorizontalStackWithGap = () => (
+export const HorizontalStackWithGap: FlexStory = () => (
   <Flex direction="row" height="size-800" gap="size-100">
     <View backgroundColor="celery-600" width="size-800" />
     <View backgroundColor="blue-600" width="size-800" />
@@ -64,7 +67,7 @@ HorizontalStackWithGap.story = {
   name: 'Horizontal stack with gap'
 };
 
-export const WrappingWithGap = () => (
+export const WrappingWithGap: FlexStory = () => (
   <View maxWidth="80%" borderWidth="thin" borderColor="dark">
     <Flex direction="row" gap="size-100" wrap>
       {colors.map((color) => (
@@ -78,7 +81,7 @@ WrappingWithGap.story = {
   name: 'Wrapping with gap'
 };
 
-export const NestedFlexWithGap = () => (
+export const NestedFlexWithGap: FlexStory = () => (
   <Flex direction="column" gap="size-150">
     <View backgroundColor="celery-600" height="size-800" />
     <Flex direction="row" height="size-800" gap="size-100">
@@ -94,7 +97,7 @@ NestedFlexWithGap.story = {
   name: 'Nested flex with gap'
 };
 
-export const AlignCenter = () => (
+export const AlignCenter: FlexStory = () => (
   <Flex direction="row" gap="size-100" alignItems="center">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-2000" />
@@ -106,7 +109,7 @@ AlignCenter.story = {
   name: 'Align center'
 };
 
-export const AlignEnd = () => (
+export const AlignEnd: FlexStory = () => (
   <Flex direction="row" gap="size-100" alignItems="end">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-2000" />
@@ -118,7 +121,7 @@ AlignEnd.story = {
   name: 'Align end'
 };
 
-export const JustifyStart = () => (
+export const JustifyStart: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="start" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -130,7 +133,7 @@ JustifyStart.story = {
   name: 'Justify start'
 };
 
-export const JustifyCenter = () => (
+export const JustifyCenter: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="center" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -142,7 +145,7 @@ JustifyCenter.story = {
   name: 'Justify center'
 };
 
-export const JustifyEnd = () => (
+export const JustifyEnd: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="end" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -154,7 +157,7 @@ JustifyEnd.story = {
   name: 'Justify end'
 };
 
-export const JustifySpaceAround = () => (
+export const JustifySpaceAround: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-around" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -166,7 +169,7 @@ JustifySpaceAround.story = {
   name: 'Justify space-around'
 };
 
-export const JustifySpaceBetween = () => (
+export const JustifySpaceBetween: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-between" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -178,7 +181,7 @@ JustifySpaceBetween.story = {
   name: 'Justify space-between'
 };
 
-export const JustifySpaceEvenly = () => (
+export const JustifySpaceEvenly: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-evenly" width="80%">
     <View backgroundColor="celery-600" width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -190,7 +193,7 @@ JustifySpaceEvenly.story = {
   name: 'Justify space-evenly'
 };
 
-export const Ordered = () => (
+export const Ordered: FlexStory = () => (
   <Flex direction="row" gap="size-100" justifyContent="space-evenly" width="80%">
     <View backgroundColor="celery-600" order={2} width="size-800" height="size-800" />
     <View backgroundColor="blue-600" width="size-800" height="size-800" />
@@ -202,7 +205,7 @@ Ordered.story = {
   name: 'ordered'
 };
 
-export const Responsive = () => (
+export const Responsive: FlexStory = () => (
   <Flex
     direction={{base: 'column', L: 'row'}}
     gap={{base: 'size-100', M: 'size-250', L: 'size-350'}}>
diff --git a/packages/@react-spectrum/layout/stories/Grid.stories.tsx b/packages/@react-spectrum/layout/stories/Grid.stories.tsx
index 4488255682a..0b6fadea5b9 100644
--- a/packages/@react-spectrum/layout/stories/Grid.stories.tsx
+++ b/packages/@react-spectrum/layout/stories/Grid.stories.tsx
@@ -12,6 +12,7 @@
 
 import {BackgroundColorValue, Responsive as TResponsive} from '@react-types/shared';
 import {Grid, repeat} from '@react-spectrum/layout';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -38,9 +39,11 @@ for (let color of baseColors) {
 
 export default {
   title: 'Grid'
-};
+} as Meta<typeof Grid>;
+
+export type GridStory = StoryFn<typeof Grid>;
 
-export const ExplicitGrid = () => (
+export const ExplicitGrid: GridStory = () => (
   <Grid
     areas={['header  header', 'sidebar content', 'footer  footer']}
     columns={['size-3000', 'auto']}
@@ -67,7 +70,7 @@ ExplicitGrid.story = {
   name: 'Explicit grid'
 };
 
-export const ImplicitGrid = () => (
+export const ImplicitGrid: GridStory = () => (
   <Grid
     columns={repeat('auto-fit', 'size-800')}
     autoRows="size-800"
@@ -84,7 +87,7 @@ ImplicitGrid.story = {
   name: 'Implicit grid'
 };
 
-export const Responsive = () => (
+export const Responsive: GridStory = () => (
   <Grid
     columns={{
       base: repeat('auto-fit', 'size-800'),

From cc3fa9dd6b5749ba31e447992d74ceda8e4de439 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 13:10:29 +1000
Subject: [PATCH 10/19] link, list, listbox

---
 .../link/chromatic/Link.stories.tsx           | 22 ++---
 .../list/chromatic/ListView.stories.tsx       | 32 ++++---
 .../@react-spectrum/list/src/ListView.tsx     |  2 +-
 .../list/stories/ListView.stories.tsx         | 16 ++--
 .../list/stories/ListViewActions.stories.tsx  | 12 +--
 .../list/stories/ListViewDnD.stories.tsx      |  6 +-
 .../list/stories/ListViewDnDExamples.tsx      | 24 ++---
 .../list/stories/ListViewDnDUtil.stories.tsx  |  6 +-
 .../list/stories/ListViewDnDUtilExamples.tsx  | 22 ++---
 .../stories/ListViewSelection.stories.tsx     |  8 +-
 .../listbox/chromatic/ListBox.stories.tsx     | 36 +++----
 .../chromatic/ListBoxLanguages.stories.tsx    | 21 ++--
 .../listbox/src/ListBoxContext.ts             |  2 +-
 .../listbox/stories/ListBox.stories.tsx       | 95 ++++++++++---------
 14 files changed, 156 insertions(+), 148 deletions(-)

diff --git a/packages/@react-spectrum/link/chromatic/Link.stories.tsx b/packages/@react-spectrum/link/chromatic/Link.stories.tsx
index ba4e9262916..b6f1b19bb7e 100644
--- a/packages/@react-spectrum/link/chromatic/Link.stories.tsx
+++ b/packages/@react-spectrum/link/chromatic/Link.stories.tsx
@@ -11,34 +11,34 @@
  */
 
 import {Link} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {SpectrumLinkProps} from '@react-types/link';
 
 const meta: Meta<SpectrumLinkProps> = {
   title: 'Link',
   component: Link
-};
+} as Meta<SpectrumLinkProps>;
 
 export default meta;
 
-const Template = (args) => <Link {...args}>This is a React Spectrum Link</Link>;
+export type LinkStory = StoryObj<SpectrumLinkProps>;
 
-export const Default = {
-  render: Template
+export const Default: LinkStory = {
+  render: (args) => <Link {...args}>This is a React Spectrum Link</Link>
 };
 
-export const Secondary = {
-  render: Template,
+export const Secondary: LinkStory = {
+  render: (args) => <Link {...args}>This is a React Spectrum Link</Link>,
   args: {variant: 'secondary'}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: LinkStory = {
+  render: (args) => <Link {...args}>This is a React Spectrum Link</Link>,
   args: {isQuiet: true}
 };
 
-export const QuietSecondary = {
-  render: Template,
+export const QuietSecondary: LinkStory = {
+  render: (args) => <Link {...args}>This is a React Spectrum Link</Link>,
   args: {...Secondary.args, ...Quiet.args}
 };
diff --git a/packages/@react-spectrum/list/chromatic/ListView.stories.tsx b/packages/@react-spectrum/list/chromatic/ListView.stories.tsx
index 5301c55fb9a..f20477600df 100644
--- a/packages/@react-spectrum/list/chromatic/ListView.stories.tsx
+++ b/packages/@react-spectrum/list/chromatic/ListView.stories.tsx
@@ -22,9 +22,9 @@ import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Image} from '@react-spectrum/image';
 import Info from '@spectrum-icons/workflow/Info';
-import {Item, ListView} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Item, ListView, SpectrumListViewProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 let states = [
   {isQuiet: true},
@@ -64,7 +64,7 @@ const meta: Meta = {
     // noticed a small shifting before final layout, delaying so chromatic doesn't hit that
     chromatic: {delay: 10000}
   }
-};
+} as Meta<Omit<typeof ListView, 'children'>>;
 
 export default meta;
 
@@ -89,7 +89,7 @@ const renderActions = (
   </>
 );
 
-const Template = ({combos, ...args}) => (
+const Template = ({combos, ...args}: Omit<SpectrumListViewProps<any>, 'children'> & {combos: any[][]}): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combos.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -140,31 +140,33 @@ function renderEmptyState() {
   );
 }
 
-const TemplateEmptyState = () => (
-  <ListView width="size-3400" height="size-6000" renderEmptyState={renderEmptyState}>
+export type ListViewStory = StoryObj<Omit<typeof ListView, 'children'>>;
+
+const TemplateEmptyState = (props: Omit<SpectrumListViewProps<any>, 'children'>): JSX.Element => (
+  <ListView {...props} width="size-3400" height="size-6000" renderEmptyState={renderEmptyState}>
     {[]}
   </ListView>
 );
 
-export const Default = {
-  render: Template,
+export const Default: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: 'all visual option combos 1 of 3',
   args: {combos: combinations.slice(0, chunkSize)}
 };
 
-export const ComboPt2 = {
-  render: Template,
+export const ComboPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {combos: combinations.slice(chunkSize, chunkSize * 2)},
   name: 'all visual option combos 2 of 3'
 };
 
-export const ComboPt3 = {
-  render: Template,
+export const ComboPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   args: {combos: combinations.slice(chunkSize * 2, chunkSize * 3)},
   name: 'all visual option combos 3 of 3'
 };
 
-export const Empty = {
-  render: TemplateEmptyState,
+export const Empty: ListViewStory = {
+  render: (args) => <TemplateEmptyState {...args} />,
   name: 'empty state'
 };
diff --git a/packages/@react-spectrum/list/src/ListView.tsx b/packages/@react-spectrum/list/src/ListView.tsx
index 9481f98a410..c47b29f85af 100644
--- a/packages/@react-spectrum/list/src/ListView.tsx
+++ b/packages/@react-spectrum/list/src/ListView.tsx
@@ -75,7 +75,7 @@ interface ListViewContextValue<T> {
   renderEmptyState?: () => JSX.Element
 }
 
-export const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);
+export const ListViewContext: React.Context<ListViewContextValue<unknown> | null> = React.createContext<ListViewContextValue<unknown> | null>(null);
 
 const ROW_HEIGHTS = {
   compact: {
diff --git a/packages/@react-spectrum/list/stories/ListView.stories.tsx b/packages/@react-spectrum/list/stories/ListView.stories.tsx
index 6af4bf2fa6e..626bc09253f 100644
--- a/packages/@react-spectrum/list/stories/ListView.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListView.stories.tsx
@@ -2,7 +2,6 @@ import {action} from '@storybook/addon-actions';
 import {ActionBar, ActionBarContainer} from '@react-spectrum/actionbar';
 import {ActionButton, Button} from '@react-spectrum/button';
 import {ActionGroup} from '@react-spectrum/actiongroup';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Content} from '@react-spectrum/view';
 import Copy from '@spectrum-icons/workflow/Copy';
 import Delete from '@spectrum-icons/workflow/Delete';
@@ -16,10 +15,11 @@ import Folder from '@spectrum-icons/illustrations/Folder';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Image} from '@react-spectrum/image';
-import {Item, ListView} from '../';
+import {Item, ListView, SpectrumListViewProps} from '../';
 import {Link} from '@react-spectrum/link';
+import {Meta, StoryObj} from '@storybook/react';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
-import React, {useEffect, useState} from 'react';
+import React, {JSX, useEffect, useState} from 'react';
 import {useAsyncList, useListData} from '@react-stately/data';
 
 export const items: any = [
@@ -63,7 +63,7 @@ const itemsWithThumbs = [
   {key: '9', title: 'file of great boi', illustration: <File />}
 ];
 
-export function renderEmptyState() {
+export function renderEmptyState(): JSX.Element {
   return (
     <IllustratedMessage>
       <svg width="150" height="103" viewBox="0 0 150 103">
@@ -137,9 +137,9 @@ export default {
       options: ['selection', 'all']
     }
   }
-} as ComponentMeta<typeof ListView>;
+} as Meta<typeof ListView>;
 
-export type ListViewStory = ComponentStoryObj<typeof ListView>;
+export type ListViewStory = StoryObj<typeof ListView>;
 
 export const Default: ListViewStory = {
   render: (args) => (
@@ -460,13 +460,13 @@ function EmptyTest() {
   );
 }
 
-export const RemoveListItems = {
+export const RemoveListItems: StoryObj<typeof Demo> = {
   render: (args) => (
     <Demo {...args} />
   )
 };
 
-function Demo(props) {
+function Demo(props: Omit<SpectrumListViewProps<any>, 'children'>): JSX.Element {
   let [items, setItems] = useState<{key: number, label: string}[]>([
     {key: 1, label: 'utilities'}
   ]);
diff --git a/packages/@react-spectrum/list/stories/ListViewActions.stories.tsx b/packages/@react-spectrum/list/stories/ListViewActions.stories.tsx
index 322d2538dd6..5bfa71862c5 100644
--- a/packages/@react-spectrum/list/stories/ListViewActions.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewActions.stories.tsx
@@ -3,13 +3,13 @@ import {ActionButton} from '@react-spectrum/button';
 import {ActionGroup} from '@react-spectrum/actiongroup';
 import {ActionMenu} from '@react-spectrum/menu';
 import Add from '@spectrum-icons/workflow/Add';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import Copy from '@spectrum-icons/workflow/Copy';
 import Delete from '@spectrum-icons/workflow/Delete';
 import Folder from '@spectrum-icons/illustrations/Folder';
 import Info from '@spectrum-icons/workflow/Info';
-import {Item, ListView} from '../';
-import React from 'react';
+import {Item, ListView, SpectrumListViewProps} from '../';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import RemoveCircle from '@spectrum-icons/workflow/RemoveCircle';
 import {Text} from '@react-spectrum/text';
 import {useListData} from '@react-stately/data';
@@ -53,9 +53,9 @@ export default {
       options: ['selection', 'all']
     }
   }
-} as ComponentMeta<typeof ListView>;
+} as Meta<typeof ListView>;
 
-export type ListViewStory = ComponentStoryObj<typeof ListView>;
+export type ListViewStory = StoryObj<typeof ListView>;
 
 export const ActionButtons: ListViewStory = {
   render: (args) => renderActionsExample(props => <ActionButton {...props} aria-label="copy"><Copy /></ActionButton>, args),
@@ -151,7 +151,7 @@ function renderActionsExample(renderActions, props?) {
   );
 }
 
-export const FocusExample = (args) => {
+export const FocusExample = (args: Omit<SpectrumListViewProps<any>, 'children'>): JSX.Element => {
   const items = [
     {id: 1, name: 'Adobe Photoshop'},
     {id: 2, name: 'Adobe XD'},
diff --git a/packages/@react-spectrum/list/stories/ListViewDnD.stories.tsx b/packages/@react-spectrum/list/stories/ListViewDnD.stories.tsx
index d46025df339..c1144e5149b 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnD.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnD.stories.tsx
@@ -1,9 +1,9 @@
 import {action} from '@storybook/addon-actions';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {DragBetweenListsExample, DragBetweenListsRootOnlyExample, DragExample, DragIntoItemExample, ReorderExample} from './ListViewDnDExamples';
 import {Droppable} from '../../../@react-aria/dnd/stories/dnd.stories';
 import {Flex} from '@react-spectrum/layout';
 import {ListView} from '../';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
@@ -43,9 +43,9 @@ export default {
       options: ['selection', 'all']
     }
   }
-} as ComponentMeta<typeof ListView>;
+} as Meta<typeof ListView>;
 
-export type ListViewStory = ComponentStoryObj<typeof ListView>;
+export type ListViewStory = StoryObj<typeof ListView>;
 let getAllowedDropOperationsAction = action('getAllowedDropOperationsAction');
 
 export const DragOut: ListViewStory = {
diff --git a/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx b/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
index 653af3d77a6..23f4227ac4c 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnDExamples.tsx
@@ -2,19 +2,19 @@ import {action} from '@storybook/addon-actions';
 import {ActionMenu} from '@react-spectrum/menu';
 import {chain} from '@react-aria/utils';
 import Delete from '@spectrum-icons/workflow/Delete';
+import {DragAndDropOptions, useDragAndDrop} from '@react-spectrum/dnd';
 import Edit from '@spectrum-icons/workflow/Edit';
 import File from '@spectrum-icons/illustrations/File';
 import {Flex} from '@react-spectrum/layout';
 import Folder from '@spectrum-icons/illustrations/Folder';
-import {Item, ListView} from '../';
+import {Item, ListView, SpectrumListViewProps} from '../';
 import {ItemDropTarget, Key} from '@react-types/shared';
 import {items} from './ListView.stories';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
-import {useDragAndDrop} from '@react-spectrum/dnd';
 import {useListData} from '@react-stately/data';
 
-export function DragExample(props?) {
+export function DragExample(props: {listViewProps: SpectrumListViewProps<any>, dragHookOptions: DragAndDropOptions, getAllowedDropOperationsAction?: () => void}): JSX.Element {
   let {listViewProps, dragHookOptions} = props;
   let getItems = (keys) => [...keys].map(key => {
     let item = items.find(item => item.key === key);
@@ -84,10 +84,10 @@ let itemList2 = [
   {id: '12', type: 'item', textValue: 'Item Twelve'}
 ];
 
-export function ReorderExample(props) {
+export function ReorderExample(props: SpectrumListViewProps<any> & DragAndDropOptions & {getAllowedDropOperationsAction?: () => void}): JSX.Element {
   let {items, onDrop, onDragStart, onDragEnd, disabledKeys = ['2'], ...otherprops} = props;
   let list = useListData({
-    initialItems: items || itemList1
+    initialItems: items ? [...items] : itemList1
   });
 
   // Use a random drag type so the items can only be reordered within this list and not dragged elsewhere.
@@ -118,7 +118,7 @@ export function ReorderExample(props) {
     onDragStart: onDragStart,
     onDragEnd: onDragEnd,
     async onDrop(e) {
-      onDrop(e);
+      onDrop?.(e);
       if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
         let keys: Key[] = [];
         for (let item of e.items) {
@@ -167,7 +167,7 @@ export function ReorderExample(props) {
   );
 }
 
-export function DragIntoItemExample(props) {
+export function DragIntoItemExample(props: {listViewProps: SpectrumListViewProps<any>, dragHookOptions?: DragAndDropOptions, dropHookOptions?: DragAndDropOptions, getAllowedDropOperationsAction?: () => void}): JSX.Element {
   let {
     listViewProps = {},
     dragHookOptions = {},
@@ -275,18 +275,18 @@ export function DragIntoItemExample(props) {
   );
 }
 
-export function DragBetweenListsExample(props) {
+export function DragBetweenListsExample(props: SpectrumListViewProps<any> & DragAndDropOptions & {getAllowedDropOperationsAction?: () => void, items1?: any[], items2?: any[]}): JSX.Element {
   let {onDragStart, onDragEnd, onDrop} = props;
   let onDropAction = chain(action('onDrop'), onDrop);
   onDragStart = chain(action('dragStart'), onDragStart);
   onDragEnd = chain(action('dragEnd'), onDragEnd);
 
   let list1 = useListData({
-    initialItems: props.items1 || itemList1
+    initialItems: props.items1 ? [...props.items1] : itemList1
   });
 
   let list2 = useListData({
-    initialItems: props.items2 || itemList2
+    initialItems: props.items2 ? [...props.items2] : itemList2
   });
 
   let onMove = (keys: Key[], target: ItemDropTarget) => {
@@ -400,7 +400,7 @@ export function DragBetweenListsExample(props) {
   );
 }
 
-export function DragBetweenListsRootOnlyExample(props) {
+export function DragBetweenListsRootOnlyExample(props: any): JSX.Element {
   let {
     listViewProps = {},
     dragHookOptions = {},
diff --git a/packages/@react-spectrum/list/stories/ListViewDnDUtil.stories.tsx b/packages/@react-spectrum/list/stories/ListViewDnDUtil.stories.tsx
index 057991599eb..b478800e0a0 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnDUtil.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnDUtil.stories.tsx
@@ -1,9 +1,9 @@
 import {action} from '@storybook/addon-actions';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {DragBetweenListsComplex, DragBetweenListsOverride, DragExampleUtilHandlers, FinderDropUtilHandlers, InsertExampleUtilHandlers, ItemDropExampleUtilHandlers, ReorderExampleUtilHandlers, RootDropExampleUtilHandlers} from './ListViewDnDUtilExamples';
 import {Droppable} from '../../../@react-aria/dnd/stories/dnd.stories';
 import {Flex} from '@react-spectrum/layout';
 import {ListView} from '../';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -42,9 +42,9 @@ export default {
       options: ['selection', 'all']
     }
   }
-} as ComponentMeta<typeof ListView>;
+} as Meta<typeof ListView>;
 
-export type ListViewStory = ComponentStoryObj<typeof ListView>;
+export type ListViewStory = StoryObj<typeof ListView>;
 
 export const DragOut: ListViewStory = {
   render: (args) => (
diff --git a/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx b/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
index 50f93f58fd9..e41d2043a4a 100644
--- a/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewDnDUtilExamples.tsx
@@ -1,11 +1,11 @@
 import {action} from '@storybook/addon-actions';
 import {DIRECTORY_DRAG_TYPE} from '@react-aria/dnd';
+import {DragAndDropOptions, useDragAndDrop} from '@react-spectrum/dnd';
 import {Flex} from '@react-spectrum/layout';
 import Folder from '@spectrum-icons/illustrations/Folder';
-import {Item, ListView} from '../';
-import React from 'react';
+import {Item, ListView, SpectrumListViewProps} from '../';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
-import {useDragAndDrop} from '@react-spectrum/dnd';
 import {useListData} from '@react-stately/data';
 
 let itemProcessor = async (items, acceptedDragTypes) => {
@@ -48,7 +48,7 @@ let folderList2 = [
   {identifier: '13', type: 'unique_type', name: 'invalid drag item'}
 ];
 
-export function DragExampleUtilHandlers(props) {
+export function DragExampleUtilHandlers(props: {listViewProps: SpectrumListViewProps<any>, dndOptions: DragAndDropOptions}): JSX.Element {
   let {listViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -92,7 +92,7 @@ export function DragExampleUtilHandlers(props) {
   );
 }
 
-export function ReorderExampleUtilHandlers(props) {
+export function ReorderExampleUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, dndOptions?: DragAndDropOptions, items?: any[]}): JSX.Element {
   let {listViewProps, dndOptions, items} = props;
   let list = useListData({
     initialItems: (items as typeof folderList1) || folderList1,
@@ -167,7 +167,7 @@ export function ReorderExampleUtilHandlers(props) {
   );
 }
 
-export function ItemDropExampleUtilHandlers(props) {
+export function ItemDropExampleUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, dndOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -231,7 +231,7 @@ export function ItemDropExampleUtilHandlers(props) {
   );
 }
 
-export function RootDropExampleUtilHandlers(props) {
+export function RootDropExampleUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, firstListDnDOptions, secondListDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -322,7 +322,7 @@ export function RootDropExampleUtilHandlers(props) {
   );
 }
 
-export function InsertExampleUtilHandlers(props) {
+export function InsertExampleUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, firstListDnDOptions, secondListDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -422,7 +422,7 @@ export function InsertExampleUtilHandlers(props) {
   );
 }
 
-export function FinderDropUtilHandlers(props) {
+export function FinderDropUtilHandlers(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, firstListDnDOptions, secondListDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -501,7 +501,7 @@ export function FinderDropUtilHandlers(props) {
   );
 }
 
-export function DragBetweenListsComplex(props) {
+export function DragBetweenListsComplex(props: {listViewProps: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {listViewProps, firstListDnDOptions, secondListDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -725,7 +725,7 @@ export function DragBetweenListsComplex(props) {
   );
 }
 
-export function DragBetweenListsOverride(props) {
+export function DragBetweenListsOverride(props: {listViewProps?: Omit<SpectrumListViewProps<any>, 'children'>, firstListDnDOptions?: DragAndDropOptions, secondListDnDOptions?: DragAndDropOptions}): JSX.Element {
   let list1 = useListData({
     initialItems: [
       {identifier: '1', type: 'file', name: 'Adobe Photoshop'},
diff --git a/packages/@react-spectrum/list/stories/ListViewSelection.stories.tsx b/packages/@react-spectrum/list/stories/ListViewSelection.stories.tsx
index bd8dd8cb558..b5c726de296 100644
--- a/packages/@react-spectrum/list/stories/ListViewSelection.stories.tsx
+++ b/packages/@react-spectrum/list/stories/ListViewSelection.stories.tsx
@@ -3,11 +3,11 @@ import {ActionMenu} from '@react-spectrum/menu';
 import Add from '@spectrum-icons/workflow/Add';
 import {Breadcrumbs} from '@react-spectrum/breadcrumbs';
 import {chain} from '@react-aria/utils';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import Delete from '@spectrum-icons/workflow/Delete';
 import Folder from '@spectrum-icons/illustrations/Folder';
 import {Item, ListView} from '../';
 import {items} from './ListView.stories';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 import {Text} from '@react-spectrum/text';
 
@@ -49,9 +49,9 @@ export default {
       options: ['selection', 'all']
     }
   }
-} as ComponentMeta<typeof ListView>;
+} as Meta<typeof ListView>;
 
-export type ListViewStory = ComponentStoryObj<typeof ListView>;
+export type ListViewStory = StoryObj<typeof ListView>;
 
 export const Default: ListViewStory = {
   render: (args) => (
@@ -105,7 +105,7 @@ export const DisableFolderSelection: ListViewStory = {
   name: 'disable folders selection'
 };
 
-export const Links = (args) => {
+export const Links: StoryFn<typeof ListView> = (args) => {
   return (
     <ListView aria-label="ListView with links" width="250px" height={400} onSelectionChange={action('onSelectionChange')} {...args}>
       <Item key="https://adobe.com/" href="https://adobe.com/">Adobe</Item>
diff --git a/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx b/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx
index 8bcbf2154f1..08873024fc8 100644
--- a/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx
+++ b/packages/@react-spectrum/listbox/chromatic/ListBox.stories.tsx
@@ -20,9 +20,9 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 import {Item, ListBox, Section} from '../';
 import {Label} from '@react-spectrum/label';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumListBoxProps} from '@react-types/listbox';
 import {Text} from '@react-spectrum/text';
 
@@ -91,13 +91,13 @@ const meta: Meta<SpectrumListBoxProps<object>> = {
 
 export default meta;
 
-const Template = (args: SpectrumListBoxProps<object>) => (
+const Template = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={flatOptions}>
     {(item) => <Item key={item.name}>{item.name}</Item>}
   </ListBox>
 );
 
-const TemplateWithSections = (args: SpectrumListBoxProps<object>) => (
+const TemplateWithSections = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={withSection}>
     {item => (
       <Section key={item.name} items={item.children} title={item.name}>
@@ -107,7 +107,7 @@ const TemplateWithSections = (args: SpectrumListBoxProps<object>) => (
   </ListBox>
 );
 
-const TemplateNoTitle = (args: SpectrumListBoxProps<object>) => (
+const TemplateNoTitle = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={withSection}>
     {item => (
       <Section key={item.name} items={item.children}>
@@ -117,7 +117,7 @@ const TemplateNoTitle = (args: SpectrumListBoxProps<object>) => (
   </ListBox>
 );
 
-let customOption = (item) => {
+let customOption = (item): JSX.Element => {
   let Icon = iconMap[item.icon];
   return (
     <Item textValue={item.name} key={item.name}>
@@ -127,7 +127,7 @@ let customOption = (item) => {
   );
 };
 
-const TemplateComplex = (args: SpectrumListBoxProps<object>) => (
+const TemplateComplex = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={hardModeProgrammatic}>
     {item => (
       <Section key={item.name} items={item.children} title={item.name}>
@@ -137,7 +137,7 @@ const TemplateComplex = (args: SpectrumListBoxProps<object>) => (
   </ListBox>
 );
 
-const TemplateAvatars = (args: SpectrumListBoxProps<object>) => (
+const TemplateAvatars = (args: SpectrumListBoxProps<object>): JSX.Element => (
   <ListBox {...args} flexGrow={1} items={flatOptions}>
     {(item) => (
       <Item key={item.name}>
@@ -148,31 +148,31 @@ const TemplateAvatars = (args: SpectrumListBoxProps<object>) => (
   </ListBox>
 );
 
-export const Default = {
-  render: Template,
+export const Default: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: 'flat list with selection',
   args: {selectedKeys: ['Snake', 'Aardvark'], disabledKeys: ['Ross'], selectionMode: 'multiple'}
 };
 
-export const Sections = {
-  render: TemplateWithSections,
+export const Sections: StoryObj<typeof TemplateWithSections> = {
+  render: (args) => <TemplateWithSections {...args} />,
   name: 'with sections',
   args: {selectedKeys: ['Snake', 'Aardvark'], disabledKeys: ['Ross'], selectionMode: 'multiple'}
 };
 
-export const SectionsNoTitle = {
-  render: TemplateNoTitle,
+export const SectionsNoTitle: StoryObj<typeof TemplateNoTitle> = {
+  render: (args) => <TemplateNoTitle {...args} />,
   name: 'sections without titles',
   args: {selectedKeys: ['Snake', 'Aardvark'], disabledKeys: ['Ross'], selectionMode: 'multiple'}
 };
 
-export const ComplexItems = {
-  render: TemplateComplex,
+export const ComplexItems: StoryObj<typeof TemplateComplex> = {
+  render: (args) => <TemplateComplex {...args} />,
   name: 'complex items',
   args: {selectedKeys: ['Puppy', 'Cut'], disabledKeys: ['Paste'], selectionMode: 'multiple'}
 };
 
-export const WithAvatar = {
-  render: TemplateAvatars,
+export const WithAvatar: StoryObj<typeof TemplateAvatars> = {
+  render: (args) => <TemplateAvatars {...args} />,
   name: 'with avatar'
 };
diff --git a/packages/@react-spectrum/listbox/chromatic/ListBoxLanguages.stories.tsx b/packages/@react-spectrum/listbox/chromatic/ListBoxLanguages.stories.tsx
index 5f29e11e561..f47b61ea415 100644
--- a/packages/@react-spectrum/listbox/chromatic/ListBoxLanguages.stories.tsx
+++ b/packages/@react-spectrum/listbox/chromatic/ListBoxLanguages.stories.tsx
@@ -18,8 +18,9 @@ import Draw from '@spectrum-icons/workflow/Draw';
 import intlMessages from './intlMessages.json';
 import {Item, ListBox, Section} from '..';
 import {Label} from '@react-spectrum/label';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -34,9 +35,11 @@ export default {
     }
   },
   excludeStories: ['TranslateListBox']
-};
+} as Meta<typeof ListBox>;
+
+type ListBoxStory = StoryFn<typeof ListBox>;
 
-export let TranslateListBox = () => {
+export const TranslateListBox = (): JSX.Element => {
   let strings = useLocalizedStringFormatter(intlMessages);
 
   return (
@@ -85,37 +88,37 @@ export let TranslateListBox = () => {
   );
 };
 
-export const ArabicComplex = () => (
+export const ArabicComplex: ListBoxStory = () => (
   <Provider locale="ar-AE">
     <TranslateListBox />
   </Provider>
 );
 
-export const HebrewComplex = () => (
+export const HebrewComplex: ListBoxStory = () => (
   <Provider locale="he-IL">
     <TranslateListBox />
   </Provider>
 );
 
-export const JapaneseComplex = () => (
+export const JapaneseComplex: ListBoxStory = () => (
   <Provider locale="ja-JP">
     <TranslateListBox />
   </Provider>
 );
 
-export const KoreanComplex = () => (
+export const KoreanComplex: ListBoxStory = () => (
   <Provider locale="ko-KR">
     <TranslateListBox />
   </Provider>
 );
 
-export const ChineseSimplfiedComplex = () => (
+export const ChineseSimplfiedComplex: ListBoxStory = () => (
   <Provider locale="zh-CN">
     <TranslateListBox />
   </Provider>
 );
 
-export const ChineseTraditionalComplex = () => (
+export const ChineseTraditionalComplex: ListBoxStory = () => (
   <Provider locale="zh-TW">
     <TranslateListBox />
   </Provider>
diff --git a/packages/@react-spectrum/listbox/src/ListBoxContext.ts b/packages/@react-spectrum/listbox/src/ListBoxContext.ts
index 346d222f2fe..a00d036a96b 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxContext.ts
+++ b/packages/@react-spectrum/listbox/src/ListBoxContext.ts
@@ -20,4 +20,4 @@ interface ListBoxContextValue {
   shouldUseVirtualFocus: boolean
 }
 
-export const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);
+export const ListBoxContext: React.Context<ListBoxContextValue | null> = React.createContext<ListBoxContextValue | null>(null);
diff --git a/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx b/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
index cc8e70ad895..abf01e1bad4 100644
--- a/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
+++ b/packages/@react-spectrum/listbox/stories/ListBox.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionGroup, AlertDialog, Avatar, Button, DialogContainer, Flex, Text} from '@adobe/react-spectrum';
+import {ActionGroup, AlertDialog, Avatar, Button, DialogContainer, Flex, SpectrumListBoxProps, Text} from '@adobe/react-spectrum';
 import AlignCenter from '@spectrum-icons/workflow/AlignCenter';
 import AlignLeft from '@spectrum-icons/workflow/AlignLeft';
 import AlignRight from '@spectrum-icons/workflow/AlignRight';
@@ -24,8 +24,9 @@ import {FocusScope} from '@react-aria/focus';
 import {Item, ListBox, Section} from '../';
 import {Key} from '@react-types/shared';
 import {Label} from '@react-spectrum/label';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React, {useRef, useState} from 'react';
+import React, {JSX, useRef, useState} from 'react';
 import {TranslateListBox} from './../chromatic/ListBoxLanguages.stories';
 import {useAsyncList, useTreeData} from '@react-stately/data';
 
@@ -104,7 +105,9 @@ for (let i = 0; i < 50; i++) {
 export default {
   title: 'ListBox',
   excludeStories: ['FocusExample']
-};
+} as Meta<typeof ListBox>;
+
+type ListBoxStory = StoryObj<typeof ListBox>;
 
 function StoryDecorator(props) {
   return (
@@ -124,7 +127,7 @@ function StoryDecorator(props) {
   );
 }
 
-export const DefaultListBox = {
+export const DefaultListBox: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={flatOptions}>
       {(item) => <Item key={item.name}>{item.name}</Item>}
@@ -138,7 +141,7 @@ export const DefaultListBox = {
   name: 'Default ListBox'
 };
 
-export const ListBoxWSections = {
+export const ListBoxWSections: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={withSection}>
       {(item) => (
@@ -156,7 +159,7 @@ export const ListBoxWSections = {
   name: 'ListBox w/ sections'
 };
 
-export const ListBoxWManySectionsAndSelection = {
+export const ListBoxWManySectionsAndSelection: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -179,7 +182,7 @@ export const ListBoxWManySectionsAndSelection = {
   name: 'ListBox w/ many sections and selection'
 };
 
-export const ListBoxWSectionsAndFalsyIds = {
+export const ListBoxWSectionsAndFalsyIds: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -202,7 +205,7 @@ export const ListBoxWSectionsAndFalsyIds = {
   name: 'ListBox w/ sections and falsy ids'
 };
 
-export const ListBoxWSectionsAndNoTitle = {
+export const ListBoxWSectionsAndNoTitle: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={withSection}>
       {(item) => (
@@ -220,7 +223,7 @@ export const ListBoxWSectionsAndNoTitle = {
   name: 'ListBox w/ sections and no title'
 };
 
-export const Static = {
+export const Static: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label">
       <Item>One</Item>
@@ -235,7 +238,7 @@ export const Static = {
   )]
 };
 
-export const StaticWithSectionsAndSelection = {
+export const StaticWithSectionsAndSelection: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" selectionMode="multiple">
       <Section title="Section 1">
@@ -258,7 +261,7 @@ export const StaticWithSectionsAndSelection = {
   name: 'Static with sections and selection'
 };
 
-export const StaticWithSectionsAndNoTitle = {
+export const StaticWithSectionsAndNoTitle: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label">
       <Section aria-label="Section 1">
@@ -281,7 +284,7 @@ export const StaticWithSectionsAndNoTitle = {
   name: 'Static with sections and no title'
 };
 
-export const WithDefaultSelectedOption = {
+export const WithDefaultSelectedOption: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -305,7 +308,7 @@ export const WithDefaultSelectedOption = {
   name: 'with default selected option'
 };
 
-export const SingleSelectionWithDefaultSelectedOption = {
+export const SingleSelectionWithDefaultSelectedOption: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -325,7 +328,7 @@ export const SingleSelectionWithDefaultSelectedOption = {
   name: 'single selection with default selected option'
 };
 
-export const StaticWithDefaultSelectedOptions = {
+export const StaticWithDefaultSelectedOptions: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -354,7 +357,7 @@ export const StaticWithDefaultSelectedOptions = {
   name: 'static with default selected options'
 };
 
-export const WithSelectedOptionsControlled = {
+export const WithSelectedOptionsControlled: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -378,7 +381,7 @@ export const WithSelectedOptionsControlled = {
   name: 'with selected options (controlled)'
 };
 
-export const StaticWithSelectedOptionsControlled = {
+export const StaticWithSelectedOptionsControlled: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -407,7 +410,7 @@ export const StaticWithSelectedOptionsControlled = {
   name: 'static with selected options (controlled)'
 };
 
-export const WithDisabledOptions = {
+export const WithDisabledOptions: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -429,7 +432,7 @@ export const WithDisabledOptions = {
   name: 'with disabled options'
 };
 
-export const StaticWithDisabledOptions = {
+export const StaticWithDisabledOptions: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" disabledKeys={['3', '5']}>
       <Section title="Section 1">
@@ -453,7 +456,7 @@ export const StaticWithDisabledOptions = {
   name: 'static with disabled options'
 };
 
-export const MultipleSelection = {
+export const MultipleSelection: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -478,7 +481,7 @@ export const MultipleSelection = {
   name: 'Multiple selection'
 };
 
-export const MultipleSelectionStatic = {
+export const MultipleSelectionStatic: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -507,7 +510,7 @@ export const MultipleSelectionStatic = {
   name: 'Multiple selection, static'
 };
 
-export const NoSelectionAllowed = {
+export const NoSelectionAllowed: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={withSection}>
       {(item) => (
@@ -525,7 +528,7 @@ export const NoSelectionAllowed = {
   name: 'No selection allowed'
 };
 
-export const NoSelectionAllowedStatic = {
+export const NoSelectionAllowedStatic: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label">
       <Section title="Section 1">
@@ -548,7 +551,7 @@ export const NoSelectionAllowedStatic = {
   name: 'No selection allowed, static'
 };
 
-export const ListBoxWithAutoFocusTrue = {
+export const ListBoxWithAutoFocusTrue: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={withSection} autoFocus>
       {(item) => (
@@ -566,7 +569,7 @@ export const ListBoxWithAutoFocusTrue = {
   name: 'ListBox with autoFocus=true'
 };
 
-export const ListBoxWithAutoFocusComplex = {
+export const ListBoxWithAutoFocusComplex: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -590,7 +593,7 @@ export const ListBoxWithAutoFocusComplex = {
   name: 'ListBox with autoFocus=true, selectionMode=single, default selected key (uncontrolled)'
 };
 
-export const ListBoxWithAutoFocusFirst = {
+export const ListBoxWithAutoFocusFirst: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -614,7 +617,7 @@ export const ListBoxWithAutoFocusFirst = {
   name: 'ListBox with autoFocus="first"'
 };
 
-export const ListBoxWithAutoFocusLast = {
+export const ListBoxWithAutoFocusLast: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -638,7 +641,7 @@ export const ListBoxWithAutoFocusLast = {
   name: 'ListBox with autoFocus="last"'
 };
 
-export const ListBoxWithKeyboardSelectionWrapping = {
+export const ListBoxWithKeyboardSelectionWrapping: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -662,7 +665,7 @@ export const ListBoxWithKeyboardSelectionWrapping = {
   name: 'ListBox with keyboard selection wrapping'
 };
 
-export const WithSemanticElementsStatic = {
+export const WithSemanticElementsStatic: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -711,7 +714,7 @@ export const WithSemanticElementsStatic = {
   name: 'with semantic elements (static)'
 };
 
-export const WithSemanticElementsGenerativeMultipleSelection = {
+export const WithSemanticElementsGenerativeMultipleSelection: ListBoxStory = {
   render: () => (
     <ListBox
       flexGrow={1}
@@ -734,7 +737,7 @@ export const WithSemanticElementsGenerativeMultipleSelection = {
   name: 'with semantic elements (generative), multiple selection'
 };
 
-export const IsLoading = {
+export const IsLoading: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={[] as any[]} isLoading>
       {(item) => <Item>{item.name}</Item>}
@@ -748,7 +751,7 @@ export const IsLoading = {
   name: 'isLoading'
 };
 
-export const IsLoadingMore = {
+export const IsLoadingMore: ListBoxStory = {
   render: () => (
     <ListBox flexGrow={1} aria-labelledby="label" items={flatOptions} isLoading>
       {(item) => <Item key={item.name}>{item.name}</Item>}
@@ -762,7 +765,7 @@ export const IsLoadingMore = {
   name: 'isLoading more'
 };
 
-export const AsyncLoading = {
+export const AsyncLoading: ListBoxStory = {
   render: () => (
     <AsyncLoadingExample />
   ),
@@ -774,7 +777,7 @@ export const AsyncLoading = {
   name: 'async loading'
 };
 
-export const AsyncLoadingResizable = {
+export const AsyncLoadingResizable: ListBoxStory = {
   render: () => (
     <div style={{display: 'flex', height: '200px', flexGrow: 1, minWidth: '200px', padding: '10px', resize: 'both', overflow: 'auto'}}>
       <AsyncLoadingExample />
@@ -791,21 +794,21 @@ export const AsyncLoadingResizable = {
   name: 'async loading, resizable'
 };
 
-export const ListboxContainers = {
+export const ListboxContainers: ListBoxStory = {
   render: () => <App />,
-  decorators: null,
+  decorators: undefined,
   name: 'listbox containers'
 };
 
-export const RestoreFocusExample = {
+export const RestoreFocusExample: ListBoxStory = {
   render: (args) => <FocusExample {...args} />,
-  decorators: null,
+  decorators: undefined,
   name: 'restore focus after deleting selected items'
 };
 
-export const WithTranslations = {
+export const WithTranslations: ListBoxStory = {
   render: () => <TranslateListBox />,
-  decorators: null,
+  decorators: undefined,
   name: 'with translations',
   parameters: {description: {data: 'Translations included for: Arabic, English, Hebrew, Japanese, Korean, Simplified Chinese, and Traditional Chinese.'}}
 };
@@ -935,7 +938,7 @@ function App() {
   );
 }
 
-export function FocusExample(args = {}) {
+export let FocusExample = (args: Omit<SpectrumListBoxProps<any>, 'children'> = {}): JSX.Element => {
   let tree = useTreeData({
     initialItems: withSection,
     getKey: (item) => item.name,
@@ -973,7 +976,7 @@ export function FocusExample(args = {}) {
                 {...args}>
                 {item => item?.children?.length ? (
                   <Section key={item.value.name} items={item.children} title={item.value.name}>
-                    {item => <Item key={item.value.name}>{item.value.name}</Item>}
+                    {(item: any) => <Item key={item.value.name}>{item.value.name}</Item>}
                   </Section>
                 ) : null}
               </ListBox>
@@ -994,9 +997,9 @@ export function FocusExample(args = {}) {
       </Flex>
     </FocusScope>
   );
-}
+};
 
-export const Links = (args) => {
+export const Links: StoryFn<typeof ListBox> = (args: Omit<SpectrumListBoxProps<any>, 'children'>) => {
   return (
     <ListBox aria-label="ListBox with links" width="250px" height={400} onSelectionChange={action('onSelectionChange')} {...args}>
       <Item key="https://adobe.com/" href="https://adobe.com/">Adobe</Item>
@@ -1027,7 +1030,7 @@ Links.story = {
   }
 };
 
-export const WithAvatars = {
+export const WithAvatars: ListBoxStory = {
   render: () => (
     <ListBox aria-label="Listbox with avatars" width="350px">
       <Item textValue="Person 1">
@@ -1056,7 +1059,7 @@ interface ItemValue {
   items?: Array<ItemValue> | null
 }
 
-export function WithTreeData() {
+export let WithTreeData: StoryFn<typeof ListBox> = () => {
   let tree = useTreeData<ItemValue>({
     initialItems: [
       {
@@ -1114,4 +1117,4 @@ export function WithTreeData() {
       )}
     </ListBox>
   );
-}
+};

From 5ef2d3783df04ccd8d3503d316e17aa28a5f695f Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 14:05:00 +1000
Subject: [PATCH 11/19] menu

---
 .../menu/chromatic/MenuTrigger.stories.tsx    |  76 +++++-----
 .../MenuTriggerLanguages.stories.tsx          |  23 +--
 .../menu/chromatic/Submenu.stories.tsx        |   4 +-
 .../@react-spectrum/menu/src/MenuTrigger.tsx  |   6 +-
 packages/@react-spectrum/menu/src/context.ts  |   6 +-
 .../menu/stories/ActionMenu.stories.tsx       |  49 +++---
 .../menu/stories/MenuTrigger.stories.tsx      | 116 +++++++-------
 .../menu/stories/Submenu.stories.tsx          | 143 ++++++++++--------
 .../menu/test/SubMenuTrigger.test.tsx         |  12 +-
 9 files changed, 232 insertions(+), 203 deletions(-)

diff --git a/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx b/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx
index f69f55871b0..418edd08c9a 100644
--- a/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx
+++ b/packages/@react-spectrum/menu/chromatic/MenuTrigger.stories.tsx
@@ -20,9 +20,9 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 import {Item, Menu, MenuTrigger, Section} from '../';
 import {Keyboard, Text} from '@react-spectrum/text';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumMenuTriggerProps} from '@react-types/menu';
 
 const meta: Meta<SpectrumMenuTriggerProps> = {
@@ -97,7 +97,7 @@ let withArabic = [
   {name: 'لصق', icon: 'Paste', shortcut: '⌘V'}
 ];
 
-const Template = (args: SpectrumMenuTriggerProps) => (
+const Template = (args: SpectrumMenuTriggerProps): JSX.Element => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
       Menu Button
@@ -108,7 +108,7 @@ const Template = (args: SpectrumMenuTriggerProps) => (
   </MenuTrigger>
 );
 
-const TemplateWithSections = (args: SpectrumMenuTriggerProps) => (
+const TemplateWithSections = (args: SpectrumMenuTriggerProps): JSX.Element => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
       Menu Button
@@ -123,7 +123,7 @@ const TemplateWithSections = (args: SpectrumMenuTriggerProps) => (
   </MenuTrigger>
 );
 
-const customMenuItem = (item) => {
+const customMenuItem = (item): JSX.Element => {
   let Icon = iconMap[item.icon];
   return (
     <Item childItems={item.children} textValue={item.name} key={item.name}>
@@ -134,7 +134,7 @@ const customMenuItem = (item) => {
   );
 };
 
-const TemplateWithIcons = (args: SpectrumMenuTriggerProps) => (
+const TemplateWithIcons = (args: SpectrumMenuTriggerProps): JSX.Element => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
       Menu Button
@@ -149,7 +149,7 @@ const TemplateWithIcons = (args: SpectrumMenuTriggerProps) => (
   </MenuTrigger>
 );
 
-const TemplateArabicWithIcons = (args: SpectrumMenuTriggerProps) => (
+const TemplateArabicWithIcons = (args: SpectrumMenuTriggerProps): JSX.Element => (
   <MenuTrigger {...args} isOpen>
     <ActionButton>
       Menu Button
@@ -160,88 +160,90 @@ const TemplateArabicWithIcons = (args: SpectrumMenuTriggerProps) => (
   </MenuTrigger>
 );
 
-export const Default = {
-  render: Template,
+export type MenuTriggerStory = StoryObj<typeof Template>;
+
+export const Default: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'flat list'
 };
 
-export const WithSections = {
-  render: TemplateWithSections,
+export const WithSections: MenuTriggerStory = {
+  render: (args) => <TemplateWithSections {...args} />,
   name: 'with sections'
 };
 
-export const Complex = {
-  render: TemplateWithIcons,
+export const Complex: MenuTriggerStory = {
+  render: (args) => <TemplateWithIcons {...args} />,
   name: 'complex items'
 };
 
-export const AlignEnd = {
-  render: Template,
+export const AlignEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'align="end"',
   args: {align: 'end'}
 };
 
-export const DirectionTop = {
-  render: Template,
+export const DirectionTop: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="top"',
   args: {direction: 'top'}
 };
 
-export const DirectionBottom = {
-  render: Template,
+export const DirectionBottom: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="bottom"',
   args: {direction: 'bottom'}
 };
 
-export const DirectionStart = {
-  render: Template,
+export const DirectionStart: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="start"',
   args: {direction: 'start'}
 };
 
-export const DirectionStartEnd = {
-  render: Template,
+export const DirectionStartEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="start", align="end"',
   args: {direction: 'start', align: 'end'}
 };
 
-export const DirectionEnd = {
-  render: Template,
+export const DirectionEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="end"',
   args: {direction: 'end'}
 };
 
-export const DirectionEndEnd = {
-  render: Template,
+export const DirectionEndEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="end" align="end"',
   args: {direction: 'end', align: 'end'}
 };
 
-export const DirectionLeft = {
-  render: Template,
+export const DirectionLeft: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="left"',
   args: {direction: 'left'}
 };
 
-export const DirectionLeftEnd = {
-  render: Template,
+export const DirectionLeftEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="left", align="end"',
   args: {direction: 'left', align: 'end'}
 };
 
-export const DirectionRight = {
-  render: Template,
+export const DirectionRight: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="right"',
   args: {direction: 'right'}
 };
 
-export const DirectionRightEnd = {
-  render: Template,
+export const DirectionRightEnd: MenuTriggerStory = {
+  render: (args) => <Template {...args} />,
   name: 'direction="right", align="end"',
   args: {direction: 'right', align: 'end'}
 };
 
-export const ArabicComplex = {
-  render: TemplateArabicWithIcons,
+export const ArabicComplex: MenuTriggerStory = {
+  render: (args) => <TemplateArabicWithIcons {...args} />,
   name: 'Arabic complex items'
 };
diff --git a/packages/@react-spectrum/menu/chromatic/MenuTriggerLanguages.stories.tsx b/packages/@react-spectrum/menu/chromatic/MenuTriggerLanguages.stories.tsx
index bd2b2d950d5..4b108bed6f0 100644
--- a/packages/@react-spectrum/menu/chromatic/MenuTriggerLanguages.stories.tsx
+++ b/packages/@react-spectrum/menu/chromatic/MenuTriggerLanguages.stories.tsx
@@ -15,11 +15,12 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 // @ts-ignore
 import intlMessages from './intlMessages.json';
-import {Item, Menu, MenuTrigger} from '../';
+import {Item, Menu, MenuTrigger, SpectrumMenuTriggerProps} from '../';
 import {Keyboard, Text} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
 import {Provider} from '@react-spectrum/provider';
-import React from 'react';
+import React, {JSX} from 'react';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export default {
@@ -33,7 +34,7 @@ export default {
     }
   },
   excludeStories: ['TranslateMenu']
-};
+} as Meta<typeof MenuTrigger>;
 
 let iconMap = {
   Copy,
@@ -58,7 +59,7 @@ const customMenuItem = (item, strings) => {
   );
 };
 
-export let TranslateMenu = (props) => {
+export let TranslateMenu = (props: Omit<SpectrumMenuTriggerProps, 'children'>): JSX.Element => {
   let strings = useLocalizedStringFormatter(intlMessages);
 
   return (
@@ -73,37 +74,39 @@ export let TranslateMenu = (props) => {
   );
 };
 
-export const ArabicComplex = () => (
+export type MenuTriggerLanguagesStory = StoryFn<typeof MenuTrigger>;
+
+export const ArabicComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="ar-AE">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const HebrewComplex = () => (
+export const HebrewComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="he-IL">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const JapaneseComplex = () => (
+export const JapaneseComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="ja-JP">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const KoreanComplex = () => (
+export const KoreanComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="ko-KR">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const ChineseSimplfiedComplex = () => (
+export const ChineseSimplfiedComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="zh-CN">
     <TranslateMenu isOpen />
   </Provider>
 );
 
-export const ChineseTraditionalComplex = () => (
+export const ChineseTraditionalComplex: MenuTriggerLanguagesStory = () => (
   <Provider locale="zh-TW">
     <TranslateMenu isOpen />
   </Provider>
diff --git a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
index 3803ad0380e..9b473565eda 100644
--- a/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
+++ b/packages/@react-spectrum/menu/chromatic/Submenu.stories.tsx
@@ -18,7 +18,7 @@ import AnnotatePen from '@spectrum-icons/workflow/AnnotatePen';
 import {ComponentStoryObj, Meta} from '@storybook/react';
 import {Item, Menu, MenuTrigger, Section, SubmenuTrigger} from '../';
 import {Keyboard, Text} from '@react-spectrum/text';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumMenuTriggerProps} from '@react-types/menu';
 import TextIndentIncrease from '@spectrum-icons/workflow/TextIndentIncrease';
 import TextItalics from '@spectrum-icons/workflow/TextItalic';
@@ -170,7 +170,7 @@ Mobile.play = async ({canvasElement}) => {
   await within(body).findByText('Baseline');
 };
 
-function DefaultSubmenu(props) {
+function DefaultSubmenu(props: Omit<SpectrumMenuTriggerProps, 'children'>): JSX.Element {
   return (
     <MenuTrigger {...props} isOpen>
       <ActionButton>
diff --git a/packages/@react-spectrum/menu/src/MenuTrigger.tsx b/packages/@react-spectrum/menu/src/MenuTrigger.tsx
index 8c9e59d8cc7..38a42030152 100644
--- a/packages/@react-spectrum/menu/src/MenuTrigger.tsx
+++ b/packages/@react-spectrum/menu/src/MenuTrigger.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {MenuContext} from './context';
 import {Placement} from '@react-types/overlays';
 import {Popover, Tray} from '@react-spectrum/overlays';
@@ -26,7 +26,9 @@ import {useMenuTriggerState} from '@react-stately/menu';
  * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
  * linking the Menu's open state with the trigger's press state.
  */
-export const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
+export const MenuTrigger:
+  React.ForwardRefExoticComponent<SpectrumMenuTriggerProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
   let triggerRef = useRef<HTMLElement>(null);
   let domRef = useDOMRef(ref);
   let menuTriggerRef = domRef || triggerRef;
diff --git a/packages/@react-spectrum/menu/src/context.ts b/packages/@react-spectrum/menu/src/context.ts
index 3ce267adbb8..4ca71796e51 100644
--- a/packages/@react-spectrum/menu/src/context.ts
+++ b/packages/@react-spectrum/menu/src/context.ts
@@ -26,7 +26,7 @@ export interface MenuContextValue extends Omit<HTMLAttributes<HTMLElement>, 'aut
   submenuLevel?: number
 }
 
-export const MenuContext = React.createContext<MenuContextValue>({});
+export const MenuContext: React.Context<MenuContextValue> = React.createContext<MenuContextValue>({});
 
 export function useMenuContext(): MenuContextValue {
   return useContext(MenuContext);
@@ -41,7 +41,7 @@ export interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents,
   isOpen?: boolean
 }
 
-export const SubmenuTriggerContext = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);
+export const SubmenuTriggerContext: React.Context<SubmenuTriggerContextValue | undefined> = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);
 
 export function useSubmenuTriggerContext(): SubmenuTriggerContextValue | undefined {
   return useContext(SubmenuTriggerContext);
@@ -56,7 +56,7 @@ export interface MenuStateContextValue<T> {
   rootMenuTriggerState?: RootMenuTriggerState
 }
 
-export const MenuStateContext = React.createContext<MenuStateContextValue<any> | undefined>(undefined);
+export const MenuStateContext: React.Context<MenuStateContextValue<any> | undefined> = React.createContext<MenuStateContextValue<any> | undefined>(undefined);
 
 export function useMenuStateContext(): MenuStateContextValue<any> | undefined {
   return useContext(MenuStateContext);
diff --git a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx
index a0a1d3cf456..25c3760b314 100644
--- a/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx
+++ b/packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx
@@ -16,9 +16,9 @@ import {Alignment} from '@react-types/shared';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Flex} from '@react-spectrum/layout';
 import {Item} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {Picker} from '@react-spectrum/picker';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {SpectrumActionMenuProps} from '@react-types/menu';
 import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 
@@ -29,7 +29,7 @@ const meta: Meta<SpectrumActionMenuProps<object>> = {
 
 export default meta;
 
-const Template = (args) => (
+const Template = (args: Omit<SpectrumActionMenuProps<object>, 'children'>): JSX.Element => (
   <ActionMenu onAction={action('action')} {...args}>
     <Item key="one">One</Item>
     <Item key="two">Two</Item>
@@ -119,47 +119,50 @@ function DirectionAlignment() {
   </Flex>);
 }
 
-export const Default = {
-  render: Template,
+export type ActionMenuStoryFn = StoryFn<typeof Template>;
+export type ActionMenuStory = StoryObj<typeof Template>;
+
+export const Default: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {}
 };
 
-export const AriaLabel = {
-  render: Template,
+export const AriaLabel: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {'aria-label': 'Some more actions'}
 };
 
-export const DOMId = {
-  render: Template,
+export const DOMId: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {id: 'my-action-menu'}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {isQuiet: true}
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {isDisabled: true}
 };
 
-export const DisabledKeys = {
-  render: Template,
+export const DisabledKeys: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {disabledKeys: ['two']}
 };
 
-export const AutoFocus = {
-  render: Template,
+export const AutoFocus: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {autoFocus: true}
 };
 
-export const DefaultOpen = {
-  render: Template,
+export const DefaultOpen: ActionMenuStory = {
+  render: (args) => <Template {...args} />,
   args: {onOpenChange: action('openChange'), defaultOpen: true}
 };
 
-export const ControlledOpen = () => {
+export const ControlledOpen: ActionMenuStoryFn = () => {
   let [open, setOpen] = React.useState(false);
 
   return (
@@ -174,9 +177,9 @@ export const ControlledOpen = () => {
   );
 };
 
-export const DirectionAlignFlip = () => <DirectionAlignment />;
+export const DirectionAlignFlip: ActionMenuStoryFn = () => <DirectionAlignment />;
 
-export const WithTooltip = () => (
+export const WithTooltip: ActionMenuStoryFn = () => (
   <TooltipTrigger delay={0}>
     <ActionMenu>
       <Item key="cut">Cut</Item>
@@ -187,7 +190,7 @@ export const WithTooltip = () => (
   </TooltipTrigger>
 );
 
-export const Dynamic = () => {
+export const Dynamic: ActionMenuStoryFn = () => {
   const items = [
     {key: 'cut', label: 'Cut'},
     {key: 'copy', label: 'Copy'},
diff --git a/packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx b/packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx
index b477921bd61..29f611fcc7a 100644
--- a/packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx
+++ b/packages/@react-spectrum/menu/stories/MenuTrigger.stories.tsx
@@ -24,8 +24,9 @@ import Cut from '@spectrum-icons/workflow/Cut';
 import {Dialog} from '@react-spectrum/dialog';
 import {Heading, Keyboard, Text} from '@react-spectrum/text';
 import {Link} from '@react-spectrum/link';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {ToggleButton} from '@adobe/react-spectrum';
 import {TranslateMenu} from './../chromatic/MenuTriggerLanguages.stories';
 
@@ -110,9 +111,12 @@ let itemsWithFalsyId = [
 export default {
   title: 'MenuTrigger',
   excludeStories: ['render']
-};
+} as Meta<typeof MenuTrigger>;
+
+export type MenuTriggerStoryFn = StoryFn<typeof MenuTrigger>;
+export type MenuTriggerStory = StoryObj<typeof MenuTrigger>;
 
-export const DefaultMenuStatic = () =>
+export const DefaultMenuStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Item>One</Item>
@@ -125,7 +129,7 @@ DefaultMenuStatic.story = {
   name: 'default menu (static)'
 };
 
-export const DefaultMenuGenerative = () =>
+export const DefaultMenuGenerative: MenuTriggerStoryFn = () =>
   render(
     <Menu items={flatMenu} onAction={action('onAction')}>
       {(item) => <Item key={item.name}>{item.name}</Item>}
@@ -136,7 +140,7 @@ DefaultMenuGenerative.story = {
   name: 'default menu (generative)'
 };
 
-export const DefaultMenuWSectionStatic = () =>
+export const DefaultMenuWSectionStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Section title="Section 1">
@@ -156,19 +160,19 @@ DefaultMenuWSectionStatic.story = {
   name: 'default menu w/ section (static)'
 };
 
-export const DefaultMenuWSectionGenerative = () => render(defaultMenu);
+export const DefaultMenuWSectionGenerative: MenuTriggerStoryFn = () => render(defaultMenu);
 
 DefaultMenuWSectionGenerative.story = {
   name: 'default menu w/ section (generative)'
 };
 
-export const DefaultMenuWSectionGenerativeManyItems = () => render(manyItemsMenu);
+export const DefaultMenuWSectionGenerativeManyItems: MenuTriggerStoryFn = () => render(manyItemsMenu);
 
 DefaultMenuWSectionGenerativeManyItems.story = {
   name: 'default menu w/ section (generative), many items per section'
 };
 
-export const DefaultMenuWTitlelessSectionsStatic = () =>
+export const DefaultMenuWTitlelessSectionsStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Section aria-label="Section 1">
@@ -188,7 +192,7 @@ DefaultMenuWTitlelessSectionsStatic.story = {
   name: 'default menu w/ titleless sections (static)'
 };
 
-export const DefaultMenuWTitlelessSectionsGenerative = () =>
+export const DefaultMenuWTitlelessSectionsGenerative: MenuTriggerStoryFn = () =>
   render(
     <Menu items={withSection} onAction={action('onAction')}>
       {(item) => (
@@ -203,7 +207,7 @@ DefaultMenuWTitlelessSectionsGenerative.story = {
   name: 'default menu w/ titleless sections (generative)'
 };
 
-export const WithFalsyItemKeys = () =>
+export const WithFalsyItemKeys: MenuTriggerStoryFn = () =>
   render(
     <Menu items={itemsWithFalsyId} onAction={action('onAction')}>
       {(item) => (
@@ -218,7 +222,7 @@ WithFalsyItemKeys.story = {
   name: 'with falsy item keys'
 };
 
-export const SingleSelectedKeyControlledStatic = () =>
+export const SingleSelectedKeyControlledStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu selectionMode="single" onAction={action('onAction')} selectedKeys={['2']}>
       <Section title="Section 1">
@@ -239,14 +243,14 @@ SingleSelectedKeyControlledStatic.story = {
   name: 'single selected key (controlled, static)'
 };
 
-export const SingleSelectedKeyControlledGenerative = () =>
+export const SingleSelectedKeyControlledGenerative: MenuTriggerStoryFn = () =>
   render(defaultMenu, {}, {selectedKeys: ['Kangaroo'], selectionMode: 'single'});
 
 SingleSelectedKeyControlledGenerative.story = {
   name: 'single selected key (controlled, generative)'
 };
 
-export const SingleDefaultSelectedKeyUncontrolledStatic = () =>
+export const SingleDefaultSelectedKeyUncontrolledStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu selectionMode="single" onAction={action('onAction')} defaultSelectedKeys={['2']}>
       <Section title="Section 1">
@@ -267,14 +271,14 @@ SingleDefaultSelectedKeyUncontrolledStatic.story = {
   name: 'single default selected key (uncontrolled, static)'
 };
 
-export const SingleDefaultSelectedKeyUncontrolledGenerative = () =>
+export const SingleDefaultSelectedKeyUncontrolledGenerative: MenuTriggerStoryFn = () =>
   render(defaultMenu, {}, {defaultSelectedKeys: ['Kangaroo'], selectionMode: 'single'});
 
 SingleDefaultSelectedKeyUncontrolledGenerative.story = {
   name: 'single default selected key (uncontrolled, generative)'
 };
 
-export const MultipleDefaultSelectedKeyControlledStatic = () =>
+export const MultipleDefaultSelectedKeyControlledStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu
       onAction={action('onAction')}
@@ -298,14 +302,14 @@ MultipleDefaultSelectedKeyControlledStatic.story = {
   name: 'multiple default selected key (controlled, static)'
 };
 
-export const MultipleSelectedKeyControlledGenerative = () =>
+export const MultipleSelectedKeyControlledGenerative: MenuTriggerStoryFn = () =>
   render(defaultMenu, {}, {selectedKeys: ['Kangaroo', 'Devon'], selectionMode: 'multiple'});
 
 MultipleSelectedKeyControlledGenerative.story = {
   name: 'multiple selected key (controlled, generative)'
 };
 
-export const MultipleDefaultSelectedKeyUncontrolledStatic = () =>
+export const MultipleDefaultSelectedKeyUncontrolledStatic: MenuTriggerStoryFn = () =>
   render(
     <Menu
       onAction={action('onAction')}
@@ -329,7 +333,7 @@ MultipleDefaultSelectedKeyUncontrolledStatic.story = {
   name: 'multiple default selected key (uncontrolled, static)'
 };
 
-export const MultipleDefaultSelectedKeyUncontrolledGenerative = () =>
+export const MultipleDefaultSelectedKeyUncontrolledGenerative: MenuTriggerStoryFn = () =>
   render(
     defaultMenu,
     {},
@@ -340,19 +344,19 @@ MultipleDefaultSelectedKeyUncontrolledGenerative.story = {
   name: 'multiple default selected key (uncontrolled, generative)'
 };
 
-export const MenuWithAutoFocusTrue = () => render(defaultMenu, {}, {autoFocus: true});
+export const MenuWithAutoFocusTrue: MenuTriggerStoryFn = () => render(defaultMenu, {}, {autoFocus: true});
 
 MenuWithAutoFocusTrue.story = {
   name: 'Menu with autoFocus=true'
 };
 
-export const MenuWithAutoFocusFalse = () => render(defaultMenu, {}, {autoFocus: false});
+export const MenuWithAutoFocusFalse: MenuTriggerStoryFn = () => render(defaultMenu, {}, {autoFocus: false});
 
 MenuWithAutoFocusFalse.story = {
   name: 'Menu with autoFocus=false'
 };
 
-export const MenuWithAutoFocusTrueDefaultSelectedKeyUncontrolledSelectionModeSingle = () =>
+export const MenuWithAutoFocusTrueDefaultSelectedKeyUncontrolledSelectionModeSingle: MenuTriggerStoryFn = () =>
   render(
     defaultMenu,
     {},
@@ -363,26 +367,26 @@ MenuWithAutoFocusTrueDefaultSelectedKeyUncontrolledSelectionModeSingle.story = {
   name: 'Menu with autoFocus=true, default selected key (uncontrolled), selectionMode single'
 };
 
-export const MenuWithAutoFocusFirst = () => render(defaultMenu, {}, {autoFocus: 'first'});
+export const MenuWithAutoFocusFirst: MenuTriggerStoryFn = () => render(defaultMenu, {}, {autoFocus: 'first'});
 
 MenuWithAutoFocusFirst.story = {
   name: 'Menu with autoFocus="first"'
 };
 
-export const MenuWithAutoFocusLast = () => render(defaultMenu, {}, {autoFocus: 'last'});
+export const MenuWithAutoFocusLast: MenuTriggerStoryFn = () => render(defaultMenu, {}, {autoFocus: 'last'});
 
 MenuWithAutoFocusLast.story = {
   name: 'Menu with autoFocus="last"'
 };
 
-export const MenuWithKeyboardSelectionWrappingFalse = () =>
+export const MenuWithKeyboardSelectionWrappingFalse: MenuTriggerStoryFn = () =>
   render(defaultMenu, {}, {shouldFocusWrap: false});
 
 MenuWithKeyboardSelectionWrappingFalse.story = {
   name: 'Menu with keyboard selection wrapping false'
 };
 
-export const AlignEnd = () =>
+export const AlignEnd: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Item>One</Item>
@@ -396,118 +400,118 @@ AlignEnd.story = {
   name: 'align="end"'
 };
 
-export const DirectionTop = () => render(defaultMenu, {direction: 'top'});
+export const DirectionTop: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'top'});
 
 DirectionTop.story = {
   name: 'direction="top"'
 };
 
-export const DirectionBottom = () => render(defaultMenu, {direction: 'bottom'});
+export const DirectionBottom: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'bottom'});
 
 DirectionBottom.story = {
   name: 'direction="bottom"'
 };
 
-export const DirectionStart = () => render(defaultMenu, {direction: 'start'});
+export const DirectionStart: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'start'});
 
 DirectionStart.story = {
   name: 'direction="start"'
 };
 
-export const DirectionStartAlignEnd = () =>
+export const DirectionStartAlignEnd: MenuTriggerStoryFn = () =>
   render(defaultMenu, {direction: 'start', align: 'end'});
 
 DirectionStartAlignEnd.story = {
   name: 'direction="start", align="end"'
 };
 
-export const DirectionEnd = () => render(defaultMenu, {direction: 'end'});
+export const DirectionEnd: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'end'});
 
 DirectionEnd.story = {
   name: 'direction="end"'
 };
 
-export const DirectionEndAlignEnd = () => render(defaultMenu, {direction: 'end', align: 'end'});
+export const DirectionEndAlignEnd: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'end', align: 'end'});
 
 DirectionEndAlignEnd.story = {
   name: 'direction="end", align="end"'
 };
 
-export const DirectionLeft = () => render(defaultMenu, {direction: 'left'});
+export const DirectionLeft: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'left'});
 
 DirectionLeft.story = {
   name: 'direction="left"'
 };
 
-export const DirectionLeftAlignEnd = () => render(defaultMenu, {direction: 'left', align: 'end'});
+export const DirectionLeftAlignEnd: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'left', align: 'end'});
 
 DirectionLeftAlignEnd.story = {
   name: 'direction="left", align="end"'
 };
 
-export const DirectionRight = () => render(defaultMenu, {direction: 'right'});
+export const DirectionRight: MenuTriggerStoryFn = () => render(defaultMenu, {direction: 'right'});
 
 DirectionRight.story = {
   name: 'direction="right"'
 };
 
-export const DirectionRightAlignEnd = () =>
+export const DirectionRightAlignEnd: MenuTriggerStoryFn = () =>
   render(defaultMenu, {direction: 'right', align: 'end'});
 
 DirectionRightAlignEnd.story = {
   name: 'direction="right", align="end"'
 };
 
-export const ShouldFlip = () => render(defaultMenu, {shouldFlip: true});
+export const ShouldFlip: MenuTriggerStoryFn = () => render(defaultMenu, {shouldFlip: true});
 
 ShouldFlip.story = {
   name: 'shouldFlip'
 };
 
-export const IsOpen = () => render(defaultMenu, {isOpen: true});
+export const IsOpen: MenuTriggerStoryFn = () => render(defaultMenu, {isOpen: true});
 
 IsOpen.story = {
   name: 'isOpen'
 };
 
-export const DefaultOpen = () => render(defaultMenu, {defaultOpen: true});
+export const DefaultOpen: MenuTriggerStoryFn = () => render(defaultMenu, {defaultOpen: true});
 
 DefaultOpen.story = {
   name: 'defaultOpen'
 };
 
-export const DisabledButton = () => render(defaultMenu, {isDisabled: true});
+export const DisabledButton: MenuTriggerStoryFn = () => render(defaultMenu, {isDisabled: true});
 
 DisabledButton.story = {
   name: 'disabled button'
 };
 
-export const MultiselectMenu = () => render(defaultMenu, {}, {selectionMode: 'multiple'});
+export const MultiselectMenu: MenuTriggerStoryFn = () => render(defaultMenu, {}, {selectionMode: 'multiple'});
 
 MultiselectMenu.story = {
   name: 'multiselect menu'
 };
 
-export const NoSelectionAllowedMenu = () => render(defaultMenu, {}, {selectionMode: 'none'});
+export const NoSelectionAllowedMenu: MenuTriggerStoryFn = () => render(defaultMenu, {}, {selectionMode: 'none'});
 
 NoSelectionAllowedMenu.story = {
   name: 'no selection allowed menu'
 };
 
-export const CloseOnSelectFalse = () => render(defaultMenu, {closeOnSelect: false}, {});
+export const CloseOnSelectFalse: MenuTriggerStoryFn = () => render(defaultMenu, {closeOnSelect: false}, {});
 
 CloseOnSelectFalse.story = {
   name: 'closeOnSelect=false'
 };
 
-export const CloseOnSelectTrueMultiselectMenu = () =>
+export const CloseOnSelectTrueMultiselectMenu: MenuTriggerStoryFn = () =>
   render(defaultMenu, {closeOnSelect: true}, {selectionMode: 'multiple'});
 
 CloseOnSelectTrueMultiselectMenu.story = {
   name: 'closeOnSelect=true, multiselect menu'
 };
 
-export const MenuWithSemanticElementsStatic = () => (
+export const MenuWithSemanticElementsStatic: MenuTriggerStoryFn = () => (
   <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
     <MenuTrigger onOpenChange={action('onOpenChange')}>
       <ActionButton
@@ -560,7 +564,7 @@ MenuWithSemanticElementsStatic.story = {
   name: 'menu with semantic elements (static)'
 };
 
-export const MenuWithSemanticElementsGenerative = () =>
+export const MenuWithSemanticElementsGenerative: MenuTriggerStoryFn = () =>
   render(
     <Menu items={hardModeProgrammatic} onAction={action('onAction')}>
       {(item) => (
@@ -575,7 +579,7 @@ MenuWithSemanticElementsGenerative.story = {
   name: 'menu with semantic elements (generative)'
 };
 
-export const MenuShouldPreventScrolling = () => (
+export const MenuShouldPreventScrolling: MenuTriggerStoryFn = () => (
   <div style={{height: 100, display: 'flex'}}>
     <div style={{paddingTop: 100, height: 100, overflow: 'auto', background: 'antiquewhite'}}>
       <div style={{height: 200}}>
@@ -611,7 +615,7 @@ MenuShouldPreventScrolling.story = {
   name: 'menu should prevent scrolling'
 };
 
-export const MenuClosesOnBlur = () => (
+export const MenuClosesOnBlur: MenuTriggerStoryFn = () => (
   <>
     <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
       <label htmlFor="focus-before">Focus before</label>
@@ -645,7 +649,7 @@ MenuClosesOnBlur.story = {
   name: 'menu closes on blur'
 };
 
-export const WithFalsyKey = () =>
+export const WithFalsyKey: MenuTriggerStoryFn = () =>
   render(
     <Menu onAction={action('onAction')}>
       <Item key="1">One</Item>
@@ -658,19 +662,19 @@ WithFalsyKey.story = {
   name: 'with falsy key'
 };
 
-export const MenuTriggerWithTriggerLongPress = () => render(defaultMenu, {trigger: 'longPress'});
+export const MenuTriggerWithTriggerLongPress: MenuTriggerStoryFn = () => render(defaultMenu, {trigger: 'longPress'});
 
 MenuTriggerWithTriggerLongPress.story = {
   name: 'MenuTrigger with trigger="longPress"'
 };
 
-export const ControlledIsOpen = () => <ControlledOpeningMenuTrigger />;
+export const ControlledIsOpen: MenuTriggerStoryFn = () => <ControlledOpeningMenuTrigger />;
 
 ControlledIsOpen.story = {
   name: 'controlled isOpen'
 };
 
-export const WithTranslations = () => <TranslateMenu />;
+export const WithTranslations: MenuTriggerStoryFn = () => <TranslateMenu />;
 
 WithTranslations.story = {
   name: 'with translations',
@@ -688,7 +692,7 @@ let customMenuItem = (item) => {
   );
 };
 
-export function render(menu, {isDisabled, ...props}: any = {}, menuProps = {}) {
+export function render(menu: React.ReactElement, {isDisabled, ...props}: any = {}, menuProps = {}): JSX.Element {
   let menuRender = React.cloneElement(menu, menuProps);
   return (
     <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
@@ -747,7 +751,7 @@ function ControlledOpeningMenuTrigger() {
   );
 }
 
-export let MenuItemUnavailable = {
+export let MenuItemUnavailable: StoryObj<typeof Menu> = {
   render: () => render(
     <Menu onAction={action('onAction')}>
       <Item key="1">One</Item>
@@ -782,7 +786,7 @@ export let MenuItemUnavailable = {
   )
 };
 
-export let MenuItemUnavailableDynamic = {
+export let MenuItemUnavailableDynamic: StoryObj<typeof Menu> = {
   render: () => render(
     <Menu items={flatMenu} onAction={action('onAction')}>
       {(item) => {
@@ -803,7 +807,7 @@ export let MenuItemUnavailableDynamic = {
   )
 };
 
-export let MenuItemUnavailableToggling = {
+export let MenuItemUnavailableToggling: StoryObj<typeof Menu> = {
   render: () => <MenuWithUnavailableSometimes />
 };
 
@@ -854,7 +858,7 @@ function MenuWithUnavailableSometimes(props) {
   );
 }
 
-export const MenuWithLinks = (props) =>
+export const MenuWithLinks: StoryFn<typeof Menu> = (props) =>
   render(
     <Menu {...props} onAction={action('onAction')}>
       <Item href="https://adobe.com">Adobe</Item>
diff --git a/packages/@react-spectrum/menu/stories/Submenu.stories.tsx b/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
index 8e5c496360b..c78c8f17bb9 100644
--- a/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
+++ b/packages/@react-spectrum/menu/stories/Submenu.stories.tsx
@@ -21,40 +21,48 @@ import {ContextualHelpTrigger, Item, Menu, MenuTrigger, Section, SubmenuTrigger}
 import defaultConfig, {render as renderMenuTrigger} from './MenuTrigger.stories';
 import {Dialog} from '@react-spectrum/dialog';
 import {Heading, Keyboard, Text} from '@react-spectrum/text';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
+import {SpectrumMenuProps, SpectrumMenuTriggerProps, ToggleButton} from '@adobe/react-spectrum';
 import TextIndentIncrease from '@spectrum-icons/workflow/TextIndentIncrease';
 import TextItalics from '@spectrum-icons/workflow/TextItalic';
-import {ToggleButton} from '@adobe/react-spectrum';
 
 export default {
   ...defaultConfig,
-  title: 'MenuTrigger/Submenu'
+  title: 'MenuTrigger/Submenu',
+  excludeStories: ['SubmenuStaticRender', 'SubmenuDynamicRender', 'ComplexRender', 'TabBehaviorRender']
+} as Meta<typeof MenuTrigger>;
+
+export const SubmenuStaticRender = (args: Omit<SpectrumMenuProps<unknown>, 'children'> & {
+  menuTriggerProps?: Omit<SpectrumMenuTriggerProps, 'children'>,
+  submenu1Props?: Omit<SpectrumMenuProps<unknown>, 'children'>,
+  submenu2Props?: Omit<SpectrumMenuProps<unknown>, 'children'>
+}): JSX.Element => {
+  return renderMenuTrigger(
+    <Menu onAction={action('lvl 1 menu onAction')} {...args}>
+      <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
+      <SubmenuTrigger>
+        <Item key="Lvl 1 Item 2">Lvl 1 Item 2</Item>
+        <Menu onAction={action('lvl 2 menu onAction')} {...args.submenu1Props}>
+          <Item key="Lvl 2 Item 1">Lvl 2 Item 1</Item>
+          <Item key="Lvl 2 Item 2">Lvl 2 Item 2</Item>
+          <SubmenuTrigger>
+            <Item key="Lvl 2 Item 3">Lvl 2 Item 3</Item>
+            <Menu onAction={action('lvl 3 menu onAction')} {...args.submenu2Props}>
+              <Item key="Lvl 3 Item 1">Lvl 3 Item 1</Item>
+              <Item key="Lvl 3 Item 2">Lvl 3 Item 2</Item>
+              <Item key="Lvl 3 Item 3">Lvl 3 Item 3</Item>
+            </Menu>
+          </SubmenuTrigger>
+        </Menu>
+      </SubmenuTrigger>
+      <Item key="Lvl 1 Item 3">Lvl 1 Item 3</Item>
+    </Menu>
+  , args.menuTriggerProps);
 };
 
-export const SubmenuStatic = {
-  render: (args) => (
-    renderMenuTrigger(
-      <Menu onAction={action('lvl 1 menu onAction')} {...args}>
-        <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
-        <SubmenuTrigger>
-          <Item key="Lvl 1 Item 2">Lvl 1 Item 2</Item>
-          <Menu onAction={action('lvl 2 menu onAction')} {...args.submenu1Props}>
-            <Item key="Lvl 2 Item 1">Lvl 2 Item 1</Item>
-            <Item key="Lvl 2 Item 2">Lvl 2 Item 2</Item>
-            <SubmenuTrigger>
-              <Item key="Lvl 2 Item 3">Lvl 2 Item 3</Item>
-              <Menu onAction={action('lvl 3 menu onAction')} {...args.submenu2Props}>
-                <Item key="Lvl 3 Item 1">Lvl 3 Item 1</Item>
-                <Item key="Lvl 3 Item 2">Lvl 3 Item 2</Item>
-                <Item key="Lvl 3 Item 3">Lvl 3 Item 3</Item>
-              </Menu>
-            </SubmenuTrigger>
-          </Menu>
-        </SubmenuTrigger>
-        <Item key="Lvl 1 Item 3">Lvl 1 Item 3</Item>
-      </Menu>
-    , args.menuTriggerProps)
-  ),
+export const SubmenuStatic: StoryObj<typeof SubmenuStaticRender> = {
+  render: (args) => <SubmenuStaticRender {...args} />,
   name: 'static submenu items'
 };
 
@@ -105,18 +113,20 @@ let dynamicRenderFunc = (item) => {
   }
 };
 
-export const SubmenuDynamic = {
-  render: (args) => (
-    renderMenuTrigger(
-      <Menu items={dynamicSubmenu} onAction={action('onAction')} {...args}>
-        {(item) => dynamicRenderFunc(item)}
-      </Menu>
-    )
-  ),
+export const SubmenuDynamicRender = (args: Omit<SpectrumMenuProps<unknown>, 'children'>): JSX.Element => {
+  return renderMenuTrigger(
+    <Menu items={dynamicSubmenu} onAction={action('onAction')} {...args}>
+      {(item) => dynamicRenderFunc(item)}
+    </Menu>
+  );
+};
+
+export const SubmenuDynamic: StoryObj<typeof SubmenuDynamicRender> = {
+  render: (args) => <SubmenuDynamicRender {...args} />,
   name: 'dynamic submenu items'
 };
 
-export const SubmenuManyItems = {
+export const SubmenuManyItems: StoryObj<SpectrumMenuProps<unknown>> = {
   render: (args) => (
     renderMenuTrigger(
       <Menu items={manyItemsSubmenu} onAction={action('onAction')} {...args}>
@@ -127,7 +137,7 @@ export const SubmenuManyItems = {
   name: 'dynamic submenu with many items'
 };
 
-export const SubmenuStaticSections = {
+export const SubmenuStaticSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu onAction={action('onAction')}>
@@ -258,7 +268,7 @@ let dynamicRenderFuncSections = (item: ItemNode) => {
   }
 };
 
-export const SubmenuDynamicSections = {
+export const SubmenuDynamicSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu items={dynamicSubmenuSections} onAction={action('onAction')}>
@@ -289,7 +299,7 @@ let submenuNoSection = [
   ]}
 ];
 
-export const MainSectionsSubNoSections = {
+export const MainSectionsSubNoSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu items={submenuNoSection} onAction={action('onAction')}>
@@ -324,7 +334,7 @@ let submenuSections = [
   {name: 'Lvl 1 Item 3'}
 ];
 
-export const MainNoSectionsSubSections = {
+export const MainNoSectionsSubSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu items={submenuSections} onAction={action('onAction')}>
@@ -357,7 +367,7 @@ let mixedSectionsAndNonSections = [
   {name: 'Lvl 1 Item 3'}
 ];
 
-export const MixedSections = {
+export const MixedSections: StoryObj<SpectrumMenuProps<unknown>> = {
   render: () => (
     renderMenuTrigger(
       <Menu items={mixedSectionsAndNonSections} onAction={action('onAction')}>
@@ -401,18 +411,20 @@ let complex = [
   ]}
 ];
 
-export const Complex = {
-  render: () => (
-    renderMenuTrigger(
-      <Menu items={complex} onAction={action('onAction')}>
-        {(item) => dynamicRenderFuncSections(item)}
-      </Menu>
-    )
-  ),
+export const ComplexRender = (args: Omit<SpectrumMenuProps<unknown>, 'children'>): JSX.Element => {
+  return renderMenuTrigger(
+    <Menu items={complex} onAction={action('onAction')} {...args}>
+      {(item: any) => dynamicRenderFuncSections(item)}
+    </Menu>
+  );
+};
+
+export const Complex: StoryObj<typeof ComplexRender> = {
+  render: (args) => <ComplexRender {...args} />,
   name: 'complex'
 };
 
-export const SubmenuActions = {
+export const SubmenuActions: StoryObj<SpectrumMenuProps<unknown>> = {
   render: (args) => renderMenuTrigger(
     <Menu onAction={action('onAction lvl 1 menu')} onClose={action('onClose lvl 1 menu')} {...args}>
       <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
@@ -438,7 +450,7 @@ export const SubmenuActions = {
   parameters: {description: {data: 'Each menu has its own onAction and onClose that are triggered only if its direct menu option was acted upon.'}}
 };
 
-export const SubmenuSelection = {
+export const SubmenuSelection: StoryObj<SpectrumMenuProps<unknown>> = {
   render: (args) => renderMenuTrigger(
     <Menu onSelectionChange={action('onSelectionChange lvl 1 menu')} selectionMode="multiple" defaultSelectedKeys="all" {...args}>
       <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
@@ -464,7 +476,7 @@ export const SubmenuSelection = {
   parameters: {description: {data: 'Lvl 1 and Lvl 3 menus have multiple selection, Lvl 2 menu has single selection'}}
 };
 
-export const DisabledSubmenuTrigger = {
+export const DisabledSubmenuTrigger: StoryObj<SpectrumMenuProps<unknown>> = {
   render: (args) => renderMenuTrigger(
     <Menu onSelectionChange={action('onSelectionChange lvl 1 menu')} selectionMode="multiple" {...args}>
       <Item key="Lvl 1 Item 1">Lvl 1 Item 1</Item>
@@ -490,7 +502,11 @@ export const DisabledSubmenuTrigger = {
   parameters: {description: {data: 'Lvl 2 submenu trigger is disabled'}}
 };
 
-export const NoKeysProvided = {
+export const NoKeysProvided: StoryObj<Omit<SpectrumMenuProps<unknown>, 'children'> & {
+  menuTriggerProps?: Omit<SpectrumMenuTriggerProps, 'children'>,
+  submenu1Props?: Omit<SpectrumMenuProps<unknown>, 'children'>,
+  submenu2Props?: Omit<SpectrumMenuProps<unknown>, 'children'>
+}> = {
   render: (args) => (
     renderMenuTrigger(
       <Menu onAction={action('lvl 1 menu onAction')} {...args}>
@@ -518,12 +534,12 @@ export const NoKeysProvided = {
   parameters: {description: {data: 'No keys are provided so they should be autogenerated. It should allow for duplicated menu item keys across each submenu level, reflected in onAction'}}
 };
 
-export const ConditionalSubmenu = {
+export const ConditionalSubmenu: StoryObj<SpectrumMenuTriggerProps> = {
   render: (args) => <ConditionalSubmenuExample {...args} />,
   name: 'conditional submenu'
 };
 
-function ConditionalSubmenuExample(props) {
+function ConditionalSubmenuExample(props: Omit<SpectrumMenuTriggerProps, 'children'>): JSX.Element {
   let [disabled, setDisabled] = React.useState(false);
 
   return (
@@ -562,7 +578,10 @@ function ConditionalSubmenuExample(props) {
   );
 }
 
-export const UnavailableWithSubmenu = {
+export const UnavailableWithSubmenu: StoryObj<Omit<SpectrumMenuProps<unknown>, 'children'> & {
+  submenu1Props?: Omit<SpectrumMenuProps<unknown>, 'children'>,
+  submenu2Props?: Omit<SpectrumMenuProps<unknown>, 'children'>
+}> = {
   render: (args) => (
     renderMenuTrigger(
       <Menu onAction={action('lvl 1 menu onAction')} {...args}>
@@ -609,8 +628,8 @@ export const UnavailableWithSubmenu = {
   name: 'with unavailable menu item'
 };
 
-export const TabBehaviorStory = {
-  render: () => (
+export const TabBehaviorRender = (args: Omit<SpectrumMenuProps<unknown>, 'children'>): JSX.Element => {
+  return (
     <>
       <input data-testid="inputleft" />
       <div style={{display: 'flex', width: 'auto', margin: '250px 0'}}>
@@ -618,14 +637,18 @@ export const TabBehaviorStory = {
           <ActionButton>
             Menu Button
           </ActionButton>
-          <Menu items={dynamicSubmenu} onAction={action('onAction')}>
+          <Menu items={dynamicSubmenu} onAction={action('onAction')} {...args}>
             {(item) => dynamicRenderFunc(item)}
           </Menu>
         </MenuTrigger>
       </div>
       <input data-testid="inputright" />
     </>
-  ),
+  );
+};
+
+export const TabBehavior: StoryObj<typeof TabBehaviorRender> = {
+  render: (args) => <TabBehaviorRender {...args} />,
   name: 'tab behavior',
   parameters: {description: {data: 'Test tabbing and shift tabbing from within a submenu'}}
 };
diff --git a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
index f4dcef74377..6e14736e210 100644
--- a/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
+++ b/packages/@react-spectrum/menu/test/SubMenuTrigger.test.tsx
@@ -11,21 +11,13 @@
  */
 
 import {act, fireEvent, installPointerEvent, pointerMap, render as renderComponent, triggerTouch, within} from '@react-spectrum/test-utils-internal';
-import {composeStories} from '@storybook/react';
+import {ComplexRender as Complex, SubmenuDynamicRender as SubmenuDynamic, SubmenuStaticRender as SubmenuStatic, TabBehaviorRender as TabBehaviorStory} from '../stories/Submenu.stories';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import type {Scale} from '@react-types/provider';
-import * as stories from '../stories/Submenu.stories';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
-let {
-  SubmenuStatic,
-  SubmenuDynamic,
-  Complex,
-  TabBehaviorStory
-} = composeStories(stories);
-
 let render = (children, scale = 'medium' as Scale, locale = 'en-US') => {
   let tree = renderComponent(
     <Provider theme={theme} scale={scale} locale={locale}>
@@ -472,7 +464,7 @@ describe('Submenu', function () {
       await user.tab();
       await openSubMenus();
 
-      
+
       // Tab do nothing.
       await user.tab();
       let activeElement = document.activeElement;

From 0ac77097c5828a3c6f724414fc5b873809a22c4e Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 14:22:20 +1000
Subject: [PATCH 12/19] meter, numberfield, overlays, picker

---
 .../meter/chromatic/Meter.stories.tsx         |  22 ++--
 packages/@react-spectrum/meter/src/Meter.tsx  |   6 +-
 .../chromatic/NumberField.stories.tsx         |  64 +++++-----
 .../numberfield/src/NumberField.tsx           |   6 +-
 .../stories/NumberField.stories.tsx           | 113 +++++++++---------
 .../@react-spectrum/overlays/src/Modal.tsx    |   8 +-
 .../overlays/src/OpenTransition.tsx           |   6 +-
 .../@react-spectrum/overlays/src/Overlay.tsx  |   6 +-
 .../@react-spectrum/overlays/src/Popover.tsx  |   6 +-
 .../@react-spectrum/overlays/src/Tray.tsx     |   6 +-
 .../overlays/stories/Modal.stories.tsx        |  13 +-
 .../chromatic/Picker.Languages.stories.tsx    |  29 +++--
 .../picker/chromatic/Picker.stories.tsx       |  45 +++----
 .../picker/stories/Picker.stories.tsx         |  10 +-
 14 files changed, 182 insertions(+), 158 deletions(-)

diff --git a/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx b/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx
index 1f9994b0a87..10cc07f6dce 100644
--- a/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx
+++ b/packages/@react-spectrum/meter/chromatic/Meter.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {Meter} from '../';
 import {SpectrumMeterProps} from '@react-types/meter';
 
@@ -21,38 +21,40 @@ const meta: Meta<SpectrumMeterProps> = {
 
 export default meta;
 
-export const Default = {
+export type MeterStory = StoryObj<SpectrumMeterProps>;
+
+export const Default: MeterStory = {
   args: {label: 'Meter label', value: 50}
 };
 
-export const SizeS = {
+export const SizeS: MeterStory = {
   args: {...Default.args, size: 'S'}
 };
 
-export const ShowValueLabelFalse = {
+export const ShowValueLabelFalse: MeterStory = {
   args: {...Default.args, showValueLabel: false}
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: MeterStory = {
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const Positive = {
+export const Positive: MeterStory = {
   args: {...Default.args, variant: 'positive'}
 };
 
-export const Critical = {
+export const Critical: MeterStory = {
   args: {...Default.args, variant: 'critical'}
 };
 
-export const Warning = {
+export const Warning: MeterStory = {
   args: {...Default.args, variant: 'warning'}
 };
 
-export const Value0 = {
+export const Value0: MeterStory = {
   args: {...Default.args, value: 0}
 };
 
-export const Value100 = {
+export const Value100: MeterStory = {
   args: {...Default.args, value: 100}
 };
diff --git a/packages/@react-spectrum/meter/src/Meter.tsx b/packages/@react-spectrum/meter/src/Meter.tsx
index 5943fd3fcf2..91ce1bca843 100644
--- a/packages/@react-spectrum/meter/src/Meter.tsx
+++ b/packages/@react-spectrum/meter/src/Meter.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {ProgressBarBase} from '@react-spectrum/progress';
 import React from 'react';
 import {SpectrumMeterProps} from '@react-types/meter';
@@ -22,7 +22,9 @@ import {useMeter} from '@react-aria/meter';
  * Meters are visual representations of a quantity or an achievement.
  * Their progress is determined by user actions, rather than system actions.
  */
-export const Meter = React.forwardRef(function Meter(props: SpectrumMeterProps, ref: DOMRef<HTMLDivElement>) {
+export const Meter:
+  React.ForwardRefExoticComponent<SpectrumMeterProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function Meter(props: SpectrumMeterProps, ref: DOMRef<HTMLDivElement>) {
   let {variant = 'informative', ...otherProps} = props;
   const {
     meterProps,
diff --git a/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx b/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx
index 49d7b0f6681..bbf9e9b338c 100644
--- a/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx
+++ b/packages/@react-spectrum/numberfield/chromatic/NumberField.stories.tsx
@@ -17,9 +17,9 @@ import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
 import {mergeProps} from '@react-aria/utils';
-import {Meta, StoryFn} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {NumberField} from '../src';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumNumberFieldProps} from '@react-types/numberfield';
 import stepperStyles from '@adobe/spectrum-css-temp/components/stepper/vars.css';
 
@@ -106,11 +106,11 @@ function shortName(key, value) {
 
 const meta: Meta = {
   title: 'NumberField'
-};
+} as Meta<SpectrumNumberFieldProps>;
 
 export default meta;
 
-const Template: StoryFn<SpectrumNumberFieldProps> = (args) => (
+const Template = (args: SpectrumNumberFieldProps): JSX.Element => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -122,7 +122,7 @@ const Template: StoryFn<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
-const TemplateVertical: StoryFn<SpectrumNumberFieldProps> = (args) => (
+const TemplateVertical = (args: SpectrumNumberFieldProps): JSX.Element => (
   <Grid autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -134,7 +134,7 @@ const TemplateVertical: StoryFn<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
-const TemplateSmall: StoryFn<SpectrumNumberFieldProps> = (args) => (
+const TemplateSmall = (args: SpectrumNumberFieldProps): JSX.Element => (
   <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -146,7 +146,7 @@ const TemplateSmall: StoryFn<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
-const TemplateWithForcedStyles: StoryFn<SpectrumNumberFieldProps> = (args) => (
+const TemplateWithForcedStyles = (args: SpectrumNumberFieldProps): JSX.Element => (
   <Grid columns={repeat(states.length, '1fr')} autoFlow="row" gap="size-300">
     {combinationsStyles.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -155,26 +155,28 @@ const TemplateWithForcedStyles: StoryFn<SpectrumNumberFieldProps> = (args) => (
   </Grid>
 );
 
-export const PropDefaults = {
-  render: Template,
+export type NumberFieldStory = StoryObj<SpectrumNumberFieldProps>;
+
+export const PropDefaults: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const PropDefaultValue = {
-  render: Template,
+export const PropDefaultValue: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'default value',
   args: {...PropDefaults.args, defaultValue: 10}
 };
 
-export const PropValue = {
-  render: Template,
+export const PropValue: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'value',
   args: {...PropDefaults.args, value: 10}
 };
 
-export const PropValueMobileViewport = {
-  render: TemplateVertical,
+export const PropValueMobileViewport: NumberFieldStory = {
+  render: (args) => <TemplateVertical {...args} />,
   name: 'value, mobile viewport',
   args: {...PropDefaults.args, value: 10},
 
@@ -189,50 +191,50 @@ export const PropValueMobileViewport = {
   }
 };
 
-export const PropAriaLabelled = {
-  render: Template,
+export const PropAriaLabelled: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'aria-label',
   args: {'aria-label': 'Label'}
 };
 
-export const PropLabelEnd = {
-  render: Template,
+export const PropLabelEnd: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'label end',
   args: {...PropDefaults.args, labelAlign: 'end', defaultValue: 10}
 };
 
-export const PropMinValue = {
-  render: Template,
+export const PropMinValue: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'min value',
   args: {...PropDefaults.args, minValue: 10, defaultValue: 10}
 };
 
-export const PropMaxValue = {
-  render: Template,
+export const PropMaxValue: NumberFieldStory = {
+  render: (args) => <Template {...args} />,
   name: 'max value',
   args: {...PropDefaults.args, maxValue: 10, defaultValue: 10}
 };
 
-export const PropLabelSide = {
-  render: TemplateSmall,
+export const PropLabelSide: NumberFieldStory = {
+  render: (args) => <TemplateSmall {...args} />,
   name: 'label side',
   args: {...PropDefaults.args, labelPosition: 'side', defaultValue: 10}
 };
 
-export const PropCustomWidth = {
-  render: TemplateSmall,
+export const PropCustomWidth: NumberFieldStory = {
+  render: (args) => <TemplateSmall {...args} />,
   name: 'custom width',
   args: {...PropDefaults.args, width: 'size-3000'}
 };
 
-export const PropInteractionStyles = {
-  render: TemplateWithForcedStyles,
+export const PropInteractionStyles: NumberFieldStory = {
+  render: (args) => <TemplateWithForcedStyles {...args} />,
   name: 'interaction styles',
   args: {...PropAriaLabelled.args}
 };
 
-export const PropInteractionStylesMinValue = {
-  render: TemplateWithForcedStyles,
+export const PropInteractionStylesMinValue: NumberFieldStory = {
+  render: (args) => <TemplateWithForcedStyles {...args} />,
   name: 'interaction styles min value',
   args: {...PropAriaLabelled.args, minValue: 10, defaultValue: 10}
 };
diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx
index 8cc36864594..70a5f9c980b 100644
--- a/packages/@react-spectrum/numberfield/src/NumberField.tsx
+++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx
@@ -13,7 +13,7 @@
 import {AriaButtonProps} from '@react-types/button';
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {Field} from '@react-spectrum/label';
-import {FocusableRef, RefObject} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';
@@ -31,7 +31,9 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider';
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
  */
-export const NumberField = React.forwardRef(function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {
+export const NumberField:
+  React.ForwardRefExoticComponent<SpectrumNumberFieldProps & React.RefAttributes<FocusableRefValue<HTMLElement, HTMLElement>>> =
+React.forwardRef(function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let provider = useProvider();
diff --git a/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx b/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx
index 576cc43f920..455f05b6cf9 100644
--- a/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx
+++ b/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx
@@ -19,60 +19,63 @@ import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
 import {Heading} from '@react-spectrum/text';
 import {Item, Picker} from '@react-spectrum/picker';
-import {NumberField} from '../src';
+import {Meta, StoryFn} from '@storybook/react';
+import {NumberField, SpectrumNumberFieldProps} from '../src';
 import React, {ReactNode, useState} from 'react';
 
 export default {
   title: 'NumberField',
   decorators: [(story) => <ErrorBoundary>{story()}</ErrorBoundary>],
   providerSwitcher: {status: 'notice'}
-};
+} as Meta<SpectrumNumberFieldProps>;
+
+export type NumberFieldStory = StoryFn<SpectrumNumberFieldProps>;
 
-export const Default = () => render({});
+export const Default: NumberFieldStory = () => render({});
 
 Default.story = {
   name: 'default'
 };
 
-export const DefaultValue10 = () => render({defaultValue: 10});
+export const DefaultValue10: NumberFieldStory = () => render({defaultValue: 10});
 
 DefaultValue10.story = {
   name: 'defaultValue: 10'
 };
 
-export const Value10 = () => render({value: 10});
+export const Value10: NumberFieldStory = () => render({value: 10});
 
 Value10.story = {
   name: 'value: 10'
 };
 
-export const MaximumFractionDigits0 = () => render({formatOptions: {maximumFractionDigits: 0}});
+export const MaximumFractionDigits0: NumberFieldStory = () => render({formatOptions: {maximumFractionDigits: 0}});
 
 MaximumFractionDigits0.story = {
   name: 'maximumFractionDigits = 0'
 };
 
-export const Currency = () =>
+export const Currency: NumberFieldStory = () =>
   render({formatOptions: {style: 'currency', currency: 'EUR'}, label: 'Price'});
 
 Currency.story = {
   name: 'currency'
 };
 
-export const Percent = () => render({formatOptions: {style: 'percent'}, label: 'Tax'});
+export const Percent: NumberFieldStory = () => render({formatOptions: {style: 'percent'}, label: 'Tax'});
 
 Percent.story = {
   name: 'percent'
 };
 
-export const PercentMaxFractionDigits2NoMinFractionDigits = () =>
+export const PercentMaxFractionDigits2NoMinFractionDigits: NumberFieldStory = () =>
   render({formatOptions: {style: 'percent', maximumFractionDigits: 2}, label: 'Tax'});
 
 PercentMaxFractionDigits2NoMinFractionDigits.story = {
   name: 'percent, max fraction digits: 2, no min fraction digits'
 };
 
-export const PercentMin2Max2FractionDigits = () =>
+export const PercentMin2Max2FractionDigits: NumberFieldStory = () =>
   render({
     formatOptions: {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 2},
     label: 'Tax'
@@ -82,7 +85,7 @@ PercentMin2Max2FractionDigits.story = {
   name: 'percent min = 2 max = 2 fraction digits'
 };
 
-export const PercentMin2Max3FractionDigits = () =>
+export const PercentMin2Max3FractionDigits: NumberFieldStory = () =>
   render({
     formatOptions: {style: 'percent', minimumFractionDigits: 2, maximumFractionDigits: 3},
     label: 'Tax'
@@ -92,188 +95,188 @@ PercentMin2Max3FractionDigits.story = {
   name: 'percent min = 2 max = 3 fraction digits'
 };
 
-export const MinValue00FractionDigits = () =>
+export const MinValue00FractionDigits: NumberFieldStory = () =>
   render({minValue: 0, formatOptions: {maximumFractionDigits: 0}});
 
 MinValue00FractionDigits.story = {
   name: 'minValue = 0, 0 fraction digits'
 };
 
-export const PercentUsingSign = () =>
+export const PercentUsingSign: NumberFieldStory = () =>
   render({formatOptions: {style: 'percent', signDisplay: 'always'}, label: 'Tax'});
 
 PercentUsingSign.story = {
   name: 'percent using sign'
 };
 
-export const Disabled = () => render({isDisabled: true});
+export const Disabled: NumberFieldStory = () => render({isDisabled: true});
 
 Disabled.story = {
   name: 'disabled'
 };
 
-export const Readonly = () => render({defaultValue: 10, isReadOnly: true});
+export const Readonly: NumberFieldStory = () => render({defaultValue: 10, isReadOnly: true});
 
 Readonly.story = {
   name: 'readonly'
 };
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: NumberFieldStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const QuietDisabled = () => render({isQuiet: true, isDisabled: true, defaultValue: 10});
+export const QuietDisabled: NumberFieldStory = () => render({isQuiet: true, isDisabled: true, defaultValue: 10});
 
 QuietDisabled.story = {
   name: 'quiet disabled'
 };
 
-export const QuietReadonly = () => render({isQuiet: true, isReadOnly: true, defaultValue: 10});
+export const QuietReadonly: NumberFieldStory = () => render({isQuiet: true, isReadOnly: true, defaultValue: 10});
 
 QuietReadonly.story = {
   name: 'quiet readonly'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid'});
+export const ValidationStateInvalid: NumberFieldStory = () => render({validationState: 'invalid'});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid'});
+export const ValidationStateValid: NumberFieldStory = () => render({validationState: 'valid'});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const ValidationStateInvalidIsQuiet = () =>
+export const ValidationStateInvalidIsQuiet: NumberFieldStory = () =>
   render({validationState: 'invalid', isQuiet: true});
 
 ValidationStateInvalidIsQuiet.story = {
   name: 'validationState: invalid, isQuiet'
 };
 
-export const ValidationStateValidIsQuiet = () =>
+export const ValidationStateValidIsQuiet: NumberFieldStory = () =>
   render({validationState: 'valid', isQuiet: true});
 
 ValidationStateValidIsQuiet.story = {
   name: 'validationState: valid, isQuiet'
 };
 
-export const MinValue0MaxValue20 = () => render({minValue: 0, maxValue: 20});
+export const MinValue0MaxValue20: NumberFieldStory = () => render({minValue: 0, maxValue: 20});
 
 MinValue0MaxValue20.story = {
   name: 'minValue = 0, maxValue = 20'
 };
 
-export const MinValue0MaxValue20Quiet = () => render({isQuiet: true, minValue: 0, maxValue: 20});
+export const MinValue0MaxValue20Quiet: NumberFieldStory = () => render({isQuiet: true, minValue: 0, maxValue: 20});
 
 MinValue0MaxValue20Quiet.story = {
   name: 'minValue = 0, maxValue = 20, quiet'
 };
 
-export const MinValue50MaxValue20 = () => render({minValue: -50, maxValue: -20});
+export const MinValue50MaxValue20: NumberFieldStory = () => render({minValue: -50, maxValue: -20});
 
 MinValue50MaxValue20.story = {
   name: 'minValue = -50, maxValue = -20'
 };
 
-export const MinValue20MaxValue50 = () => render({minValue: 20, maxValue: 50});
+export const MinValue20MaxValue50: NumberFieldStory = () => render({minValue: 20, maxValue: 50});
 
 MinValue20MaxValue50.story = {
   name: 'minValue = 20, maxValue = 50'
 };
 
-export const MinValue0DefaultValue0 = () => render({minValue: 0, defaultValue: 0});
+export const MinValue0DefaultValue0: NumberFieldStory = () => render({minValue: 0, defaultValue: 0});
 
 MinValue0DefaultValue0.story = {
   name: 'minValue = 0, defaultValue = 0'
 };
 
-export const Step5 = () => render({step: 5});
+export const Step5: NumberFieldStory = () => render({step: 5});
 
 Step5.story = {
   name: 'step = 5'
 };
 
-export const Step3WithMin2Max21 = () => render({step: 3, minValue: 2, maxValue: 21});
+export const Step3WithMin2Max21: NumberFieldStory = () => render({step: 3, minValue: 2, maxValue: 21});
 
 Step3WithMin2Max21.story = {
   name: 'step = 3 with min = 2, max = 21'
 };
 
-export const AutoFocus = () => render({autoFocus: true});
+export const AutoFocus: NumberFieldStory = () => render({autoFocus: true});
 
 AutoFocus.story = {
   name: 'autoFocus'
 };
 
-export const HideStepper = () => render({hideStepper: true});
+export const HideStepper: NumberFieldStory = () => render({hideStepper: true});
 
 HideStepper.story = {
   name: 'hideStepper'
 };
 
-export const IsQuietHideStepper = () => render({isQuiet: true, hideStepper: true});
+export const IsQuietHideStepper: NumberFieldStory = () => render({isQuiet: true, hideStepper: true});
 
 IsQuietHideStepper.story = {
   name: 'isQuiet, hideStepper'
 };
 
-export const Required = () => render({isRequired: true});
+export const Required: NumberFieldStory = () => render({isRequired: true});
 
 Required.story = {
   name: 'required'
 };
 
-export const Optional = () => render({necessityIndicator: 'label'});
+export const Optional: NumberFieldStory = () => render({necessityIndicator: 'label'});
 
 Optional.story = {
   name: 'optional'
 };
 
-export const RequiredWithLabel = () => render({isRequired: true, necessityIndicator: 'label'});
+export const RequiredWithLabel: NumberFieldStory = () => render({isRequired: true, necessityIndicator: 'label'});
 
 RequiredWithLabel.story = {
   name: 'required with label'
 };
 
-export const LabelTopEnd = () =>
+export const LabelTopEnd: NumberFieldStory = () =>
   render({isRequired: true, labelPosition: 'top', labelAlign: 'end'});
 
 LabelTopEnd.story = {
   name: 'label top end'
 };
 
-export const LabelSide = () => render({isRequired: true, labelPosition: 'side'});
+export const LabelSide: NumberFieldStory = () => render({isRequired: true, labelPosition: 'side'});
 
 LabelSide.story = {
   name: 'label side'
 };
 
-export const NoVisibleLabel = () => renderNoLabel({isRequired: true, 'aria-label': 'Width'});
+export const NoVisibleLabel: NumberFieldStory = () => renderNoLabel({isRequired: true, 'aria-label': 'Width'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const QuietNoVisibleLabel = () =>
+export const QuietNoVisibleLabel: NumberFieldStory = () =>
   renderNoLabel({isQuiet: true, isRequired: true, 'aria-label': 'Width'});
 
 QuietNoVisibleLabel.story = {
   name: 'quiet no visible label'
 };
 
-export const QuietNoVisibleLabelHidestepper = () =>
+export const QuietNoVisibleLabelHidestepper: NumberFieldStory = () =>
   renderNoLabel({hideStepper: true, isQuiet: true, isRequired: true, 'aria-label': 'Width'});
 
 QuietNoVisibleLabelHidestepper.story = {
   name: 'quiet no visible label hidestepper'
 };
 
-export const AriaLabelledby = () => (
+export const AriaLabelledby: NumberFieldStory = () => (
   <>
     <label htmlFor="numberfield" id="label">
       Width
@@ -286,14 +289,14 @@ AriaLabelledby.story = {
   name: 'aria-labelledby'
 };
 
-export const WithDescriptionNoVisibleLabel = () =>
+export const WithDescriptionNoVisibleLabel: NumberFieldStory = () =>
   renderNoLabel({'aria-label': 'Age', description: 'Please select your age.'});
 
 WithDescriptionNoVisibleLabel.story = {
   name: 'with description, no visible label'
 };
 
-export const WithErrorMessageLabelPositionSide = () =>
+export const WithErrorMessageLabelPositionSide: NumberFieldStory = () =>
   render({
     labelPosition: 'side',
     errorMessage: 'Please enter a positive number.',
@@ -304,7 +307,7 @@ WithErrorMessageLabelPositionSide.story = {
   name: 'with error message, labelPosition: side'
 };
 
-export const _ContextualHelp = () =>
+export const _ContextualHelp: NumberFieldStory = () =>
   render({
     contextualHelp: (
       <ContextualHelp>
@@ -321,57 +324,57 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const CustomWidth = () => render({width: 'size-3000'});
+export const CustomWidth: NumberFieldStory = () => render({width: 'size-3000'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const QuietCustomWidth = () => render({isQuiet: true, width: 'size-3000'});
+export const QuietCustomWidth: NumberFieldStory = () => render({isQuiet: true, width: 'size-3000'});
 
 QuietCustomWidth.story = {
   name: 'quiet custom width'
 };
 
-export const CustomWidthNoVisibleLabel = () =>
+export const CustomWidthNoVisibleLabel: NumberFieldStory = () =>
   renderNoLabel({width: 'size-3000', isRequired: true, 'aria-label': 'Width'});
 
 CustomWidthNoVisibleLabel.story = {
   name: 'custom width no visible label'
 };
 
-export const CustomWidthLabelPositionSide = () =>
+export const CustomWidthLabelPositionSide: NumberFieldStory = () =>
   render({width: 'size-3000', labelPosition: 'side'});
 
 CustomWidthLabelPositionSide.story = {
   name: 'custom width, labelPosition=side'
 };
 
-export const Controlled = () => <NumberFieldControlled />;
+export const Controlled: NumberFieldStory = () => <NumberFieldControlled />;
 
 Controlled.story = {
   name: 'controlled'
 };
 
-export const CurrencySwitcher = () => <NumberFieldWithCurrencySelect />;
+export const CurrencySwitcher: NumberFieldStory = () => <NumberFieldWithCurrencySelect />;
 
 CurrencySwitcher.story = {
   name: 'currency switcher'
 };
 
-export const Flexed = () => renderSet();
+export const Flexed: NumberFieldStory = () => renderSet();
 
 Flexed.story = {
   name: 'flexed'
 };
 
-export const MinWidth = () => render({width: 0});
+export const MinWidth: NumberFieldStory = () => render({width: 0});
 
 MinWidth.story = {
   name: 'min width'
 };
 
-export const FocusEvents = () =>
+export const FocusEvents: NumberFieldStory = () =>
   render({
     onBlur: action('onBlur'),
     onFocus: action('onFocus'),
@@ -384,7 +387,7 @@ FocusEvents.story = {
   name: 'focus events'
 };
 
-export const InputDomEvents = () =>
+export const InputDomEvents: NumberFieldStory = () =>
   render({
     onCopy: action('onCopy'),
     onCut: action('onCut'),
@@ -401,7 +404,7 @@ InputDomEvents.story = {
   name: 'input dom events'
 };
 
-export const ResetControlledStateToBlankWithNull = () => <NumberFieldControlledStateReset />;
+export const ResetControlledStateToBlankWithNull: NumberFieldStory = () => <NumberFieldControlledStateReset />;
 
 ResetControlledStateToBlankWithNull.story = {
   name: 'reset controlled state to blank with null'
diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index 6a8e34450c4..776a2424464 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -12,7 +12,7 @@
 
 import {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, RefObject, StyleProps} from '@react-types/shared';
 import modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';
 import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
@@ -22,7 +22,7 @@ import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
 import {Underlay} from './Underlay';
 import {useObjectRef, useViewportSize} from '@react-aria/utils';
 
-interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
+export interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
   children: ReactNode,
   state: OverlayTriggerState,
   type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'
@@ -34,7 +34,9 @@ interface ModalWrapperProps extends ModalProps {
   children: ReactNode
 }
 
-export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
+export const Modal:
+  React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let wrapperRef = useRef<HTMLDivElement>(null);
diff --git a/packages/@react-spectrum/overlays/src/OpenTransition.tsx b/packages/@react-spectrum/overlays/src/OpenTransition.tsx
index 72f3cf80089..ec3b66b33c5 100644
--- a/packages/@react-spectrum/overlays/src/OpenTransition.tsx
+++ b/packages/@react-spectrum/overlays/src/OpenTransition.tsx
@@ -11,8 +11,7 @@
  */
 
 import React, {JSX, JSXElementConstructor, ReactElement} from 'react';
-import {Transition} from 'react-transition-group';
-// TODO install @types/react-transition-group
+import {Transition, TransitionProps} from 'react-transition-group';
 
 const OPEN_STATES = {
   entering: false,
@@ -33,8 +32,7 @@ const OPEN_STATES = {
  */
 
 export function OpenTransition(
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  props
+  props: TransitionProps
 ): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {
   // Do not apply any transition if in chromatic.
   if (process.env.CHROMATIC) {
diff --git a/packages/@react-spectrum/overlays/src/Overlay.tsx b/packages/@react-spectrum/overlays/src/Overlay.tsx
index e999fa5a546..27f74ab1f3f 100644
--- a/packages/@react-spectrum/overlays/src/Overlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Overlay.tsx
@@ -10,14 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {OpenTransition} from './OpenTransition';
 import {OverlayProps} from '@react-types/overlays';
 import {Provider} from '@react-spectrum/provider';
 import React, {useCallback, useState} from 'react';
 import {Overlay as ReactAriaOverlay} from '@react-aria/overlays';
 
-export const Overlay = React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
+export const Overlay:
+  React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     isOpen,
diff --git a/packages/@react-spectrum/overlays/src/Popover.tsx b/packages/@react-spectrum/overlays/src/Popover.tsx
index de4b7064334..30a0e7579e7 100644
--- a/packages/@react-spectrum/overlays/src/Popover.tsx
+++ b/packages/@react-spectrum/overlays/src/Popover.tsx
@@ -12,7 +12,7 @@
 
 import {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, RefObject, StyleProps} from '@react-types/shared';
 import {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';
 import {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {Overlay} from './Overlay';
@@ -67,7 +67,9 @@ let arrowPlacement = {
   bottom: 'bottom'
 };
 
-export const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+export const Popover:
+  React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     state,
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index 28f70d2c313..53c321930e1 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -12,7 +12,7 @@
 
 import {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, RefObject, StyleProps} from '@react-types/shared';
 import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
@@ -33,7 +33,9 @@ interface TrayWrapperProps extends TrayProps {
   wrapperRef: RefObject<HTMLDivElement | null>
 }
 
-export const Tray = forwardRef(function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
+export const Tray:
+  React.ForwardRefExoticComponent<TrayProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let wrapperRef = useRef<HTMLDivElement>(null);
diff --git a/packages/@react-spectrum/overlays/stories/Modal.stories.tsx b/packages/@react-spectrum/overlays/stories/Modal.stories.tsx
index 5614927f924..119db29b858 100644
--- a/packages/@react-spectrum/overlays/stories/Modal.stories.tsx
+++ b/packages/@react-spectrum/overlays/stories/Modal.stories.tsx
@@ -17,8 +17,9 @@ import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Divider} from '@react-spectrum/divider';
 import {Flex} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {Modal} from '../';
-import React, {Fragment} from 'react';
+import React, {Fragment, JSX} from 'react';
 import {useOverlayTriggerState} from '@react-stately/overlays';
 
 export default {
@@ -26,21 +27,23 @@ export default {
   parameters: {
     providerSwitcher: {status: 'notice'}
   }
-};
+} as Meta<typeof ModalExample>;
+
+export type ModalExampleStory = StoryFn<typeof ModalExample>;
 
-export const Default = () => <ModalExample />;
+export const Default: ModalExampleStory = () => <ModalExample />;
 
 Default.story = {
   name: 'default'
 };
 
-export const _UnmountingTrigger = () => <UnmountingTrigger />;
+export const _UnmountingTrigger: ModalExampleStory = () => <UnmountingTrigger />;
 
 _UnmountingTrigger.story = {
   name: 'unmounting trigger'
 };
 
-function ModalExample() {
+function ModalExample(): JSX.Element {
   let state = useOverlayTriggerState({});
 
   return (
diff --git a/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx b/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx
index 348ef277533..c15de9c692f 100644
--- a/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx
+++ b/packages/@react-spectrum/picker/chromatic/Picker.Languages.stories.tsx
@@ -11,8 +11,8 @@
  */
 
 import {Item, Picker, Section} from '..';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 
 export default {
@@ -23,7 +23,9 @@ export default {
   }
 } as Meta<typeof Picker>;
 
-const Template = (args: SpectrumPickerProps<object>) => (
+export type PickerStory = StoryObj<SpectrumPickerProps<object>>;
+
+const Template = (args: SpectrumPickerProps<object>): JSX.Element => (
   <Picker {...args}>
     <Section title="Animals">
       <Item key="Aardvark">Aardvark</Item>
@@ -37,8 +39,9 @@ const Template = (args: SpectrumPickerProps<object>) => (
     </Section>
   </Picker>
 );
-export const ArabicPlaceholder = {
-  render: Template,
+
+export const ArabicPlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: 'دولفين'},
 
   parameters: {
@@ -46,8 +49,8 @@ export const ArabicPlaceholder = {
   }
 };
 
-export const ChineseSimplifiedPlaceholder = {
-  render: Template,
+export const ChineseSimplifiedPlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: '海豚'},
 
   parameters: {
@@ -55,8 +58,8 @@ export const ChineseSimplifiedPlaceholder = {
   }
 };
 
-export const ChineseTraditionalPlaceholder = {
-  render: Template,
+export const ChineseTraditionalPlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: '海豚'},
 
   parameters: {
@@ -64,8 +67,8 @@ export const ChineseTraditionalPlaceholder = {
   }
 };
 
-export const JapanesePlaceholder = {
-  render: Template,
+export const JapanesePlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: 'イルカ'},
 
   parameters: {
@@ -73,8 +76,8 @@ export const JapanesePlaceholder = {
   }
 };
 
-export const KoreanPlaceholder = {
-  render: Template,
+export const KoreanPlaceholder: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', placeholder: '돌고래'},
 
   parameters: {
diff --git a/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx b/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx
index 2c263d9f5d9..ad3d9e3cdfb 100644
--- a/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/chromatic/Picker.stories.tsx
@@ -20,9 +20,9 @@ import Copy from '@spectrum-icons/workflow/Copy';
 import Cut from '@spectrum-icons/workflow/Cut';
 import {Heading, Text} from '@react-spectrum/text';
 import {Item, Picker, Section} from '../';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumPickerProps} from '@react-types/select';
 
 const meta: Meta<SpectrumPickerProps<object>> = {
@@ -38,8 +38,9 @@ const meta: Meta<SpectrumPickerProps<object>> = {
 
 export default meta;
 
+export type PickerStory = StoryObj<SpectrumPickerProps<object>>;
 
-const Template = (args: SpectrumPickerProps<object>) => (
+const Template = (args: SpectrumPickerProps<object>): JSX.Element => (
   <Picker {...args}>
     <Section title="Animals">
       <Item key="Aardvark">Aardvark</Item>
@@ -54,7 +55,7 @@ const Template = (args: SpectrumPickerProps<object>) => (
   </Picker>
 );
 
-const ComplexItemsTemplate = (args: SpectrumPickerProps<object>) => (
+const ComplexItemsTemplate = (args: SpectrumPickerProps<object>): JSX.Element => (
   <Picker {...args}>
     <Section title="Section 1">
       <Item textValue="Copy">
@@ -91,33 +92,33 @@ const ComplexItemsTemplate = (args: SpectrumPickerProps<object>) => (
     </Section>
   </Picker>
 );
-export const Default = {
-  render: Template,
+export const Default: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {label: 'Pick your favorite', isOpen: true}
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, isDisabled: true}
 };
 
-export const LabelAlignEnd = {
-  render: Template,
+export const LabelAlignEnd: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, labelAlign: 'end'}
 };
 
-export const LabelPositionSide = {
-  render: Template,
+export const LabelPositionSide: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const ValidationStateInvalid = {
-  render: Template,
+export const ValidationStateInvalid: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, isInvalid: true}
 };
 
-export const ComplexItems = {
-  render: ComplexItemsTemplate,
+export const ComplexItems: PickerStory = {
+  render: (args) => <ComplexItemsTemplate {...args} />,
   args: {...Default.args},
   parameters: {
     chromaticProvider: {
@@ -126,8 +127,8 @@ export const ComplexItems = {
   }
 };
 
-export const ComplexItemsExpress = {
-  render: ComplexItemsTemplate,
+export const ComplexItemsExpress: PickerStory = {
+  render: (args) => <ComplexItemsTemplate {...args} />,
   args: {...Default.args},
   parameters: {
     chromaticProvider: {
@@ -146,12 +147,12 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = {
-  render: Template,
+export const _ContextualHelp: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, contextualHelp}
 };
 
-export const ContextualHelpSideLabel = {
-  render: Template,
+export const ContextualHelpSideLabel: PickerStory = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, contextualHelp, labelPosition: 'side'}
 };
diff --git a/packages/@react-spectrum/picker/stories/Picker.stories.tsx b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
index 79c62b7b6b3..72520aeff06 100644
--- a/packages/@react-spectrum/picker/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
@@ -25,7 +25,7 @@ import {Flex} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
 import {Item, Picker, Section, SpectrumPickerProps} from '../';
 import Paste from '@spectrum-icons/workflow/Paste';
-import React,  {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {useAsyncList} from '@react-stately/data';
 import {userEvent, within} from '@storybook/testing-library';
 
@@ -449,7 +449,7 @@ export const Quiet: PickerStory = {
   )
 };
 
-function DefaultPicker(props: SpectrumPickerProps<object>) {
+function DefaultPicker(props: SpectrumPickerProps<object>): JSX.Element {
   return (
     <Picker {...props}>
       <Item key="Short">Short</Item>
@@ -459,7 +459,7 @@ function DefaultPicker(props: SpectrumPickerProps<object>) {
   );
 }
 
-function ComplexItemsPicker(props: SpectrumPickerProps<object>) {
+function ComplexItemsPicker(props: SpectrumPickerProps<object>): JSX.Element {
   return (
     <Picker {...props}>
       <Section title="Section 1">
@@ -495,7 +495,7 @@ function ComplexItemsPicker(props: SpectrumPickerProps<object>) {
   );
 }
 
-function AsyncLoadingExample(props) {
+function AsyncLoadingExample(props: SpectrumPickerProps<object>): JSX.Element {
   interface Pokemon {
     name: string,
     url: string
@@ -521,7 +521,7 @@ function AsyncLoadingExample(props) {
   );
 }
 
-function ResizePicker(props) {
+function ResizePicker(props: SpectrumPickerProps<object>): JSX.Element {
   const [state, setState] = useState(true);
 
   return (

From 12f89dcdd286b49dbc0d60ca6ae4a7de84f181f0 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 14:39:11 +1000
Subject: [PATCH 13/19] progress, provider, radio

---
 .../chromatic/ProgressBar.stories.tsx         | 22 ++---
 .../chromatic/ProgressCircle.stories.tsx      | 22 ++---
 .../progress/src/ProgressBar.tsx              |  6 +-
 .../progress/src/ProgressBarBase.tsx          |  8 +-
 .../progress/src/ProgressCircle.tsx           |  6 +-
 .../progress/stories/ProgressBar.stories.tsx  | 67 ++++++++-------
 .../stories/ProgressCircle.stories.tsx        | 33 ++++----
 .../provider/chromatic/Provider.stories.tsx   | 83 ++++++++++---------
 .../@react-spectrum/provider/src/Provider.tsx |  6 +-
 .../@react-spectrum/provider/src/context.ts   |  2 +-
 .../provider/stories/Provider.stories.tsx     | 37 +++++----
 .../radio/chromatic/Radio.stories.tsx         | 31 +++----
 packages/@react-spectrum/radio/src/Radio.tsx  |  6 +-
 .../@react-spectrum/radio/src/RadioGroup.tsx  |  6 +-
 packages/@react-spectrum/radio/src/context.ts |  2 +-
 .../radio/stories/Radio.stories.tsx           | 33 ++++----
 16 files changed, 203 insertions(+), 167 deletions(-)

diff --git a/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx b/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx
index 2f78d1617a0..59417e51b8e 100644
--- a/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx
+++ b/packages/@react-spectrum/progress/chromatic/ProgressBar.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {ProgressBar} from '../';
 import React, {CSSProperties} from 'react';
 import {SpectrumProgressBarProps} from '@react-types/progress';
@@ -22,6 +22,8 @@ const meta: Meta<SpectrumProgressBarProps> = {
 
 export default meta;
 
+export type ProgressBarStory = StoryObj<SpectrumProgressBarProps>;
+
 const grayedBoxStyle: CSSProperties = {
   width: '250px',
   height: '60px',
@@ -31,23 +33,23 @@ const grayedBoxStyle: CSSProperties = {
   justifyContent: 'center'
 };
 
-export const Default = {
+export const Default: ProgressBarStory = {
   args: {label: 'Progress label', value: 50}
 };
 
-export const SizeS = {
+export const SizeS: ProgressBarStory = {
   args: {...Default.args, size: 'S'}
 };
 
-export const ShowValueLabelFalse = {
+export const ShowValueLabelFalse: ProgressBarStory = {
   args: {...Default.args, showValueLabel: false}
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: ProgressBarStory = {
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const OverBackground = {
+export const OverBackground: ProgressBarStory = {
   args: {...Default.args, variant: 'overBackground'},
   decorators: [
     (Story) => (
@@ -58,7 +60,7 @@ export const OverBackground = {
   ]
 };
 
-export const StaticColorWhite = {
+export const StaticColorWhite: ProgressBarStory = {
   args: {...Default.args, staticColor: 'white'},
   decorators: [
     (Story) => (
@@ -69,7 +71,7 @@ export const StaticColorWhite = {
   ]
 };
 
-export const StaticColorBlack = {
+export const StaticColorBlack: ProgressBarStory = {
   args: {...Default.args, staticColor: 'black'},
   decorators: [
     (Story) => (
@@ -80,10 +82,10 @@ export const StaticColorBlack = {
   ]
 };
 
-export const Value0 = {
+export const Value0: ProgressBarStory = {
   args: {...Default.args, value: 0}
 };
 
-export const Value100 = {
+export const Value100: ProgressBarStory = {
   args: {...Default.args, value: 100}
 };
diff --git a/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx b/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx
index 692a1c5cd9a..dec906c6dc9 100644
--- a/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx
+++ b/packages/@react-spectrum/progress/chromatic/ProgressCircle.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {ProgressCircle} from '../';
 import React, {CSSProperties} from 'react';
 import {SpectrumProgressCircleProps} from '@react-types/progress';
@@ -22,6 +22,8 @@ const meta: Meta<SpectrumProgressCircleProps> = {
 
 export default meta;
 
+export type ProgressCircleStory = StoryObj<typeof ProgressCircle>;
+
 const grayedBoxStyle: CSSProperties = {
   width: '250px',
   height: '60px',
@@ -31,19 +33,19 @@ const grayedBoxStyle: CSSProperties = {
   justifyContent: 'center'
 };
 
-export const Default = {
-  args: {label: 'Progress label', value: 50}
+export const Default: ProgressCircleStory = {
+  args: {value: 50}
 };
 
-export const SizeS = {
+export const SizeS: ProgressCircleStory = {
   args: {...Default.args, size: 'S'}
 };
 
-export const SizeL = {
+export const SizeL: ProgressCircleStory = {
   args: {...Default.args, size: 'L'}
 };
 
-export const OverBackground = {
+export const OverBackground: ProgressCircleStory = {
   args: {...Default.args, variant: 'overBackground'},
   decorators: [
     (Story) => (
@@ -54,7 +56,7 @@ export const OverBackground = {
   ]
 };
 
-export const StaticColorWhite = {
+export const StaticColorWhite: ProgressCircleStory = {
   args: {...Default.args, staticColor: 'white'},
   decorators: [
     (Story) => (
@@ -65,7 +67,7 @@ export const StaticColorWhite = {
   ]
 };
 
-export const StaticColorBlack = {
+export const StaticColorBlack: ProgressCircleStory = {
   args: {...Default.args, staticColor: 'black'},
   decorators: [
     (Story) => (
@@ -76,10 +78,10 @@ export const StaticColorBlack = {
   ]
 };
 
-export const Value0 = {
+export const Value0: ProgressCircleStory = {
   args: {...Default.args, value: 0}
 };
 
-export const Value100 = {
+export const Value100: ProgressCircleStory = {
   args: {...Default.args, value: 100}
 };
diff --git a/packages/@react-spectrum/progress/src/ProgressBar.tsx b/packages/@react-spectrum/progress/src/ProgressBar.tsx
index 65146a01ea1..bc31917cc81 100644
--- a/packages/@react-spectrum/progress/src/ProgressBar.tsx
+++ b/packages/@react-spectrum/progress/src/ProgressBar.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {ProgressBarBase} from './ProgressBarBase';
 import React from 'react';
 import {SpectrumProgressBarProps} from '@react-types/progress';
@@ -22,7 +22,9 @@ import {useProgressBar} from '@react-aria/progress';
  * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
  * They can represent either determinate or indeterminate progress.
  */
-export const ProgressBar = React.forwardRef(function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressBar:
+  React.ForwardRefExoticComponent<SpectrumProgressBarProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   let {staticColor, variant, ...otherProps} = props;
   const {
     progressBarProps,
diff --git a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx
index d89c565cdba..7ee717aeff6 100644
--- a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx
+++ b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx
@@ -12,7 +12,7 @@
 
 import {clamp} from '@react-aria/utils';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {ProgressBarProps, SpectrumProgressBarBaseProps} from '@react-types/progress';
 import React, {CSSProperties, HTMLAttributes} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';
@@ -24,7 +24,9 @@ interface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBar
 }
 
 // Base ProgressBar component shared with Meter.
-export const ProgressBarBase = React.forwardRef(function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressBarBase:
+  React.ForwardRefExoticComponent<ProgressBarBaseProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMRef<HTMLDivElement>) {
   let {
     value = 0,
     minValue = 0,
@@ -84,7 +86,7 @@ export const ProgressBarBase = React.forwardRef(function ProgressBarBase(props:
             {label}
         </span>
       }
-      {showValueLabel && barProps && 
+      {showValueLabel && barProps &&
         <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>
           {barProps['aria-valuetext']}
         </div>
diff --git a/packages/@react-spectrum/progress/src/ProgressCircle.tsx b/packages/@react-spectrum/progress/src/ProgressCircle.tsx
index 134f59d8992..d149b803178 100644
--- a/packages/@react-spectrum/progress/src/ProgressCircle.tsx
+++ b/packages/@react-spectrum/progress/src/ProgressCircle.tsx
@@ -12,7 +12,7 @@
 
 import {clamp} from '@react-aria/utils';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import React, {CSSProperties} from 'react';
 import {SpectrumProgressCircleProps} from '@react-types/progress';
 import styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';
@@ -23,7 +23,9 @@ import {useProgressBar} from '@react-aria/progress';
  * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
  * They can represent determinate or indeterminate progress.
  */
-export const ProgressCircle = React.forwardRef(function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressCircle:
+  React.ForwardRefExoticComponent<SpectrumProgressCircleProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
   let {
     value = 0,
     minValue = 0,
diff --git a/packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx b/packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx
index 547159ed141..bd9f338eda6 100644
--- a/packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx
+++ b/packages/@react-spectrum/progress/stories/ProgressBar.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ProgressBar} from '../';
+import {Meta, StoryFn} from '@storybook/react';
+import {ProgressBar, SpectrumProgressBarProps} from '../';
 import React, {CSSProperties} from 'react';
 
 const formatOptions = {
@@ -40,46 +41,48 @@ export default {
       }
     }
   }
-};
+} as Meta<SpectrumProgressBarProps>;
+
+export type ProgressBarStory = StoryFn<SpectrumProgressBarProps>;
 
-export const Default = (args) => render(args);
-export const Value50 = () => render({value: 50});
+export const Default: ProgressBarStory = (args) => render(args);
+export const Value50: ProgressBarStory = () => render({value: 50});
 
 Value50.story = {
   name: 'value: 50'
 };
 
-export const Value100 = () => render({value: 100});
+export const Value100: ProgressBarStory = () => render({value: 100});
 
 Value100.story = {
   name: 'value: 100'
 };
 
-export const SizeS = (args) => render({size: 'S', ...args});
+export const SizeS: ProgressBarStory = (args) => render({size: 'S', ...args});
 
 SizeS.story = {
   name: 'size: S'
 };
 
-export const ShowValueLabelTrue = (args) => render({showValueLabel: true, ...args});
+export const ShowValueLabelTrue: ProgressBarStory = (args) => render({showValueLabel: true, ...args});
 
 ShowValueLabelTrue.story = {
   name: 'showValueLabel: true'
 };
 
-export const ShowValueLabelFalse = (args) => render({showValueLabel: false, ...args});
+export const ShowValueLabelFalse: ProgressBarStory = (args) => render({showValueLabel: false, ...args});
 
 ShowValueLabelFalse.story = {
   name: 'showValueLabel: false'
 };
 
-export const ValueLabel1Of4 = () => render({value: 25, valueLabel: '1 of 4'});
+export const ValueLabel1Of4: ProgressBarStory = () => render({value: 25, valueLabel: '1 of 4'});
 
 ValueLabel1Of4.story = {
   name: 'valueLabel: 1 of 4'
 };
 
-export const UsingNumberFormatOptionsWithCurrencyStyle = (args) =>
+export const UsingNumberFormatOptionsWithCurrencyStyle: ProgressBarStory = (args) =>
   render({
     ...args,
     showValueLabel: true,
@@ -90,32 +93,32 @@ UsingNumberFormatOptionsWithCurrencyStyle.story = {
   name: 'Using number formatOptions with currency style'
 };
 
-export const NoVisibleLabel = (args) => render({label: null, 'aria-label': 'Loading…', ...args});
+export const NoVisibleLabel: ProgressBarStory = (args) => render({label: null, 'aria-label': 'Loading…', ...args});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const LabelPositionSide = (args) => render({labelPosition: 'side', ...args});
+export const LabelPositionSide: ProgressBarStory = (args) => render({labelPosition: 'side', ...args});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelPositionTop = (args) => render({labelPosition: 'top', ...args});
+export const LabelPositionTop: ProgressBarStory = (args) => render({labelPosition: 'top', ...args});
 
 LabelPositionTop.story = {
   name: 'labelPosition: top'
 };
 
-export const LongLabel = (args) =>
+export const LongLabel: ProgressBarStory = (args) =>
   render({label: 'Super long progress bar label. Sample label copy. Loading...', ...args});
 
 LongLabel.story = {
   name: 'long label'
 };
 
-export const LongLabelLabelPositionSide = (args) =>
+export const LongLabelLabelPositionSide: ProgressBarStory = (args) =>
   render({
     labelPosition: 'side',
     label: 'Super long progress bar label. Sample label copy. Loading...',
@@ -126,19 +129,19 @@ LongLabelLabelPositionSide.story = {
   name: 'long label, labelPosition: side'
 };
 
-export const IsIndeterminateTrue = (args) => render({isIndeterminate: true, ...args});
+export const IsIndeterminateTrue: ProgressBarStory = (args) => render({isIndeterminate: true, ...args});
 
 IsIndeterminateTrue.story = {
   name: 'isIndeterminate: true'
 };
 
-export const IsIndeterminateTrueSizeS = () => render({isIndeterminate: true, size: 'S'});
+export const IsIndeterminateTrueSizeS: ProgressBarStory = () => render({isIndeterminate: true, size: 'S'});
 
 IsIndeterminateTrueSizeS.story = {
   name: 'isIndeterminate: true, size: S'
 };
 
-export const VariantOverBackground = (args) => (
+export const VariantOverBackground: ProgressBarStory = (args) => (
   <div style={grayedBoxStyle}>{render({variant: 'overBackground', ...args})}</div>
 );
 
@@ -146,7 +149,7 @@ VariantOverBackground.story = {
   name: 'variant: overBackground'
 };
 
-export const StaticColorWhite = (args) => (
+export const StaticColorWhite: ProgressBarStory = (args) => (
   <div style={grayedBoxStyle}>{render({staticColor: 'white', ...args})}</div>
 );
 
@@ -154,7 +157,7 @@ StaticColorWhite.story = {
   name: 'staticColor: white'
 };
 
-export const StaticColorBlack = (args) => (
+export const StaticColorBlack: ProgressBarStory = (args) => (
   <div style={{...grayedBoxStyle, backgroundColor: 'rgb(206, 247, 243)'}}>{render({staticColor: 'black', ...args})}</div>
 );
 
@@ -162,57 +165,57 @@ StaticColorBlack.story = {
   name: 'staticColor: black'
 };
 
-export const ParentWidth100 = () => <span style={{width: '100%'}}>{render()}</span>;
+export const ParentWidth100: ProgressBarStory = () => <span style={{width: '100%'}}>{render()}</span>;
 
 ParentWidth100.story = {
   name: 'parent width 100%'
 };
 
-export const ParentWidth100Px = () => <span style={{width: '100px'}}>{render()}</span>;
+export const ParentWidth100Px: ProgressBarStory = () => <span style={{width: '100px'}}>{render()}</span>;
 
 ParentWidth100Px.story = {
   name: 'parent width 100px'
 };
 
-export const Width300Px = () => render({width: '300px', value: 100});
+export const Width300Px: ProgressBarStory = () => render({width: '300px', value: 100});
 
 Width300Px.story = {
   name: 'width: 300px'
 };
 
-export const Width300PxIsIndeterminateTrue = () =>
+export const Width300PxIsIndeterminateTrue: ProgressBarStory = () =>
   render({width: '300px', isIndeterminate: true});
 
 Width300PxIsIndeterminateTrue.story = {
   name: 'width: 300px, isIndeterminate: true'
 };
 
-export const Width300PxLabelPositionSide = () => render({width: '300px', labelPosition: 'side'});
+export const Width300PxLabelPositionSide: ProgressBarStory = () => render({width: '300px', labelPosition: 'side'});
 
 Width300PxLabelPositionSide.story = {
   name: 'width: 300px, labelPosition: side'
 };
 
-export const Width300PxLabelPositionSideIsIndeterminateTrue = () =>
+export const Width300PxLabelPositionSideIsIndeterminateTrue: ProgressBarStory = () =>
   render({width: '300px', labelPosition: 'side', isIndeterminate: true});
 
 Width300PxLabelPositionSideIsIndeterminateTrue.story = {
   name: 'width: 300px, labelPosition: side, isIndeterminate: true'
 };
 
-export const Width30Px = () => render({width: '30px'});
+export const Width30Px: ProgressBarStory = () => render({width: '30px'});
 
 Width30Px.story = {
   name: 'width: 30px'
 };
 
-export const Width30PxSizeS = () => render({width: '30px', size: 'S'});
+export const Width30PxSizeS: ProgressBarStory = () => render({width: '30px', size: 'S'});
 
 Width30PxSizeS.story = {
   name: 'width: 30px, size: S'
 };
 
-export const Width30PxLabelPositionSideLongLabel = () =>
+export const Width30PxLabelPositionSideLongLabel: ProgressBarStory = () =>
   render({
     width: '30px',
     labelPosition: 'side',
@@ -223,7 +226,7 @@ Width30PxLabelPositionSideLongLabel.story = {
   name: 'width: 30px, labelPosition: side, long label'
 };
 
-export const Width30PxLabelPositionSideIsIndeterminateTrueLongLabelButtonOnRight = () => (
+export const Width30PxLabelPositionSideIsIndeterminateTrueLongLabelButtonOnRight: ProgressBarStory = () => (
   <>
     {render({
       width: '30px',
@@ -239,7 +242,7 @@ Width30PxLabelPositionSideIsIndeterminateTrueLongLabelButtonOnRight.story = {
   name: 'width: 30px, labelPosition: side, isIndeterminate: true, long label, button on right'
 };
 
-export const UsingRawValuesForMinValueMaxValueAndValue = () =>
+export const UsingRawValuesForMinValueMaxValueAndValue: ProgressBarStory = () =>
   render({
     showValueLabel: true,
     labelPosition: 'top',
@@ -251,7 +254,7 @@ UsingRawValuesForMinValueMaxValueAndValue.story = {
   name: 'Using raw values for minValue, maxValue, and value'
 };
 
-export const UsingRawValuesWithNumberFormatter = () =>
+export const UsingRawValuesWithNumberFormatter: ProgressBarStory = () =>
   render({
     showValueLabel: true,
     labelPosition: 'top',
diff --git a/packages/@react-spectrum/progress/stories/ProgressCircle.stories.tsx b/packages/@react-spectrum/progress/stories/ProgressCircle.stories.tsx
index 6774c923543..45f1363c592 100644
--- a/packages/@react-spectrum/progress/stories/ProgressCircle.stories.tsx
+++ b/packages/@react-spectrum/progress/stories/ProgressCircle.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ProgressCircle} from '../';
+import {Meta, StoryFn} from '@storybook/react';
+import {ProgressCircle, SpectrumProgressCircleProps} from '../';
 import React, {CSSProperties} from 'react';
 
 const grayedBoxStyle: CSSProperties = {
@@ -35,34 +36,36 @@ export default {
       }
     }
   }
-};
+} as Meta<SpectrumProgressCircleProps>;
+
+export type ProgressCircleStory = StoryFn<SpectrumProgressCircleProps>;
 
-export const Default = (args) => render(args);
-export const Value50 = () => render({value: 50});
+export const Default: ProgressCircleStory = (args) => render(args);
+export const Value50: ProgressCircleStory = () => render({value: 50});
 
 Value50.story = {
   name: 'value: 50'
 };
 
-export const Value100 = () => render({value: 100});
+export const Value100: ProgressCircleStory = () => render({value: 100});
 
 Value100.story = {
   name: 'value: 100'
 };
 
-export const SizeS = (args) => render({...args, size: 'S'});
+export const SizeS: ProgressCircleStory = (args) => render({...args, size: 'S'});
 
 SizeS.story = {
   name: 'size: S'
 };
 
-export const SizeL = (args) => render({...args, size: 'L'});
+export const SizeL: ProgressCircleStory = (args) => render({...args, size: 'L'});
 
 SizeL.story = {
   name: 'size: L'
 };
 
-export const VariantOverBackground = (args) => (
+export const VariantOverBackground: ProgressCircleStory = (args) => (
   <div style={grayedBoxStyle}>{render({...args, variant: 'overBackground'})}</div>
 );
 
@@ -70,7 +73,7 @@ VariantOverBackground.story = {
   name: 'variant: overBackground'
 };
 
-export const StaticColorWhite = (args) => (
+export const StaticColorWhite: ProgressCircleStory = (args) => (
   <div style={{...grayedBoxStyle, backgroundColor: 'rgb(0, 119, 114)'}}>{render({...args, staticColor: 'white'})}</div>
 );
 
@@ -78,7 +81,7 @@ StaticColorWhite.story = {
   name: 'staticColor: white'
 };
 
-export const StaticColorBlack = (args) => (
+export const StaticColorBlack: ProgressCircleStory = (args) => (
   <div style={{...grayedBoxStyle, backgroundColor: 'rgb(206, 247, 243)'}}>{render({...args, staticColor: 'black'})}</div>
 );
 
@@ -86,7 +89,7 @@ StaticColorBlack.story = {
   name: 'staticColor: black'
 };
 
-export const UsingRawValuesForMinValueMaxValueAndValue = () =>
+export const UsingRawValuesForMinValueMaxValueAndValue: ProgressCircleStory = () =>
   render({
     labelPosition: 'top',
     maxValue: 2147483648,
@@ -97,25 +100,25 @@ UsingRawValuesForMinValueMaxValueAndValue.story = {
   name: 'Using raw values for minValue, maxValue, and value'
 };
 
-export const IsIndeterminateTrue = () => render({isIndeterminate: true});
+export const IsIndeterminateTrue: ProgressCircleStory = () => render({isIndeterminate: true});
 
 IsIndeterminateTrue.story = {
   name: 'isIndeterminate: true'
 };
 
-export const IsIndeterminateTrueSizeS = () => render({isIndeterminate: true, size: 'S'});
+export const IsIndeterminateTrueSizeS: ProgressCircleStory = () => render({isIndeterminate: true, size: 'S'});
 
 IsIndeterminateTrueSizeS.story = {
   name: 'isIndeterminate: true, size: S'
 };
 
-export const IsIndeterminateTrueSizeL = () => render({isIndeterminate: true, size: 'L'});
+export const IsIndeterminateTrueSizeL: ProgressCircleStory = () => render({isIndeterminate: true, size: 'L'});
 
 IsIndeterminateTrueSizeL.story = {
   name: 'isIndeterminate: true, size: L'
 };
 
-export const IsIndeterminateTrueVariantOverBackground = () => (
+export const IsIndeterminateTrueVariantOverBackground: ProgressCircleStory = () => (
   <div style={grayedBoxStyle}>{render({isIndeterminate: true, variant: 'overBackground'})}</div>
 );
 
diff --git a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
index a5f20b61434..bd12e7c7184 100644
--- a/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/chromatic/Provider.stories.tsx
@@ -16,12 +16,12 @@ import {ComboBox, Item} from '@react-spectrum/combobox';
 import customTheme from './custom-theme.css';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
-import {Meta} from '@storybook/react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Provider} from '../';
 import {ProviderProps} from '@react-types/provider';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {JSX} from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
 import scaleMedium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
 import {SearchField} from '@react-spectrum/searchfield';
@@ -37,11 +37,13 @@ const THEME = {
 
 const meta: Meta<ProviderProps> = {
   title: 'Provider'
-};
+} as Meta<ProviderProps>;
 
 export default meta;
 
-const Template = (args: ProviderProps) => (
+export type ProviderStory = StoryFn<typeof Template>;
+
+const Template = (args: ProviderProps): JSX.Element => (
   <Provider {...args} UNSAFE_style={{padding: 50}}>
     <Form>
       <Flex> {/* Extra div via Flex so that the button does not expand to 100% width */}
@@ -77,8 +79,8 @@ const Template = (args: ProviderProps) => (
   </Provider>
 );
 
-const NestedColorSchemeTemplate = () => (
-  <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
+const NestedColorSchemeTemplate = (props: ProviderProps): JSX.Element => (
+  <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}} {...props}>
     <Button variant="primary">I am a dark button</Button>
     <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
       <Button variant="primary">I am a light button</Button>
@@ -86,8 +88,8 @@ const NestedColorSchemeTemplate = () => (
   </Provider>
 );
 
-const NestedPropTemplate = () => (
-  <Provider isDisabled>
+const NestedPropTemplate = (props: ProviderProps): JSX.Element => (
+  <Provider isDisabled {...props}>
     <Button variant="primary">I am disabled</Button>
     <Provider isQuiet>
       <Button variant="primary">I am disabled and quiet</Button>
@@ -95,8 +97,8 @@ const NestedPropTemplate = () => (
   </Provider>
 );
 
-const ResponsiveStyleTemplate = () => (
-  <Provider>
+const ResponsiveStyleTemplate = (props: ProviderProps): JSX.Element => (
+  <Provider {...props}>
     <div>
       <TextField
         label="A text field"
@@ -112,7 +114,7 @@ const ResponsiveStyleTemplate = () => (
   </Provider>
 );
 
-const CustomResponsivStylePropsTemplate = () => {
+const CustomResponsivStylePropsTemplate = (props: ProviderProps): JSX.Element => {
   let Breakpoint = () => {
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
@@ -133,13 +135,14 @@ const CustomResponsivStylePropsTemplate = () => {
   return (
     <Provider
       breakpoints={{S: 480, M: 640, L: 1024}}
-      UNSAFE_style={{padding: 50}}>
+      UNSAFE_style={{padding: 50}}
+      {...props}>
       <Breakpoint />
     </Provider>
   );
 };
 
-const BreakpointOmittedTemplate = () => {
+const BreakpointOmittedTemplate = (props: ProviderProps): JSX.Element => {
   let Breakpoint = () => {
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
@@ -158,68 +161,70 @@ const BreakpointOmittedTemplate = () => {
     );
   };
   return (
-    <Provider UNSAFE_style={{padding: 50}}>
+    <Provider UNSAFE_style={{padding: 50}} {...props}>
       <Breakpoint />
     </Provider>
   );
 };
 
-export const Default = {
-  render: Template,
+export type ProviderStoryObj = StoryObj<typeof Template>;
+
+export const Default: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'default',
   args: {}
 };
 
-export const CustomTheme = {
-  render: Template,
+export const CustomTheme: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'custom theme',
   args: {theme: THEME}
 };
 
-export const NestedColorScheme = {
-  render: NestedColorSchemeTemplate,
+export const NestedColorScheme: ProviderStoryObj = {
+  render: (args) => <NestedColorSchemeTemplate {...args} />,
   name: 'nested color schemes',
   args: {}
 };
 
-export const NestedProp = {
-  render: NestedPropTemplate,
+export const NestedProp: ProviderStoryObj = {
+  render: (args) => <NestedPropTemplate {...args} />,
   name: 'nested props',
   args: {}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isQuiet',
   args: {isQuiet: true}
 };
 
-export const Emphasized = {
-  render: Template,
+export const Emphasized: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isEmphasized',
   args: {isEmphasized: true}
 };
 
-export const Disabled = {
-  render: Template,
+export const Disabled: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isDisabled',
   args: {isDisabled: true}
 };
 
-export const ReadOnly = {
-  render: Template,
+export const ReadOnly: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isReadOnly',
   args: {isReadOnly: true}
 };
 
-export const Required = {
-  render: Template,
+export const Required: ProviderStoryObj = {
+  render: (args) => <Template {...args} />,
   name: 'isRequired',
   args: {isRequired: true}
 };
 
-export const ResponsiveStyle = {
-  render: ResponsiveStyleTemplate,
+export const ResponsiveStyle: ProviderStoryObj = {
+  render: (args) => <ResponsiveStyleTemplate {...args} />,
 
   parameters: {
     chromatic: {viewports: [320, 700, 1000, 1200, 1300]},
@@ -232,9 +237,9 @@ export const ResponsiveStyle = {
   }
 };
 
-export const CustomResponsivStyleProps = {
-  render: CustomResponsivStylePropsTemplate,
-  storyNname: 'custom responsive styleProps',
+export const CustomResponsivStyleProps: ProviderStoryObj = {
+  render: (args) => <CustomResponsivStylePropsTemplate {...args} />,
+  name: 'custom responsive styleProps',
 
   parameters: {
     chromatic: {viewports: [320, 600, 1000, 1200, 1300, 1600]},
@@ -247,8 +252,8 @@ export const CustomResponsivStyleProps = {
   }
 };
 
-export const BreakpointOmitted = {
-  render: BreakpointOmittedTemplate,
+export const BreakpointOmitted: ProviderStoryObj = {
+  render: (args) => <BreakpointOmittedTemplate {...args} />,
 
   parameters: {
     chromatic: {viewports: [320, 1000, 1200]},
diff --git a/packages/@react-spectrum/provider/src/Provider.tsx b/packages/@react-spectrum/provider/src/Provider.tsx
index 53fde2faf3c..2959c1de655 100644
--- a/packages/@react-spectrum/provider/src/Provider.tsx
+++ b/packages/@react-spectrum/provider/src/Provider.tsx
@@ -19,7 +19,7 @@ import {
 } from '@react-spectrum/utils';
 import clsx from 'clsx';
 import {Context} from './context';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps, RouterProvider} from '@react-aria/utils';
 import {I18nProvider, useLocale} from '@react-aria/i18n';
 import {ModalProvider, useModalProvider} from '@react-aria/overlays';
@@ -38,7 +38,9 @@ const DEFAULT_BREAKPOINTS = {S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536};
  * It defines the theme, locale, and other application level settings,
  * and can also be used to provide common properties to a group of components.
  */
-export const Provider = React.forwardRef(function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
+export const Provider:
+  React.ForwardRefExoticComponent<ProviderProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
   let prevContext = useContext(Context);
   let prevColorScheme = prevContext && prevContext.colorScheme;
   let prevBreakpoints = prevContext && prevContext.breakpoints;
diff --git a/packages/@react-spectrum/provider/src/context.ts b/packages/@react-spectrum/provider/src/context.ts
index 2c104719b04..1bd4ec3b564 100644
--- a/packages/@react-spectrum/provider/src/context.ts
+++ b/packages/@react-spectrum/provider/src/context.ts
@@ -15,5 +15,5 @@ import React from 'react';
 
 // Context is placed in a separate file to avoid fast refresh issue where the old provider context values
 // are immediately replaced with the null default. Stopgap solution until we fix this in parcel.
-export const Context = React.createContext<ProviderContext | null>(null);
+export const Context: React.Context<ProviderContext | null> = React.createContext<ProviderContext | null>(null);
 Context.displayName = 'ProviderContext';
diff --git a/packages/@react-spectrum/provider/stories/Provider.stories.tsx b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
index 931b9e0b014..732a2a9b4cd 100644
--- a/packages/@react-spectrum/provider/stories/Provider.stories.tsx
+++ b/packages/@react-spectrum/provider/stories/Provider.stories.tsx
@@ -17,8 +17,9 @@ import customTheme from './custom-theme.css';
 import {theme as expressTheme} from '@react-spectrum/theme-express';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
+import {Meta, StoryFn} from '@storybook/react';
 import {NumberField} from '@react-spectrum/numberfield';
-import {Provider} from '../';
+import {Provider, ProviderProps} from '../';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React from 'react';
 import scaleLarge from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
@@ -39,22 +40,24 @@ export default {
   parameters: {
     providerSwitcher: {status: 'positive'}
   }
-};
+} as Meta<ProviderProps>;
+
+export type ProviderStory = StoryFn<typeof Provider>;
 
-export const ColorSchemeDark = () =>
+export const ColorSchemeDark: ProviderStory = () =>
   render({colorScheme: 'dark', style: {padding: 50, textAlign: 'center', width: 500}});
 
 ColorSchemeDark.story = {
   name: 'colorScheme: dark'
 };
 
-export const ScaleLarge = () => render({scale: 'large'});
+export const ScaleLarge: ProviderStory = () => render({scale: 'large'});
 
 ScaleLarge.story = {
   name: 'scale: large'
 };
 
-export const NestedColorSchemes = () => (
+export const NestedColorSchemes: ProviderStory = () => (
   <Provider colorScheme="dark" UNSAFE_style={{padding: 50, textAlign: 'center', width: 500}}>
     <Button variant="primary">I am a dark button</Button>
     <Provider colorScheme="light" UNSAFE_style={{padding: 50, margin: 50, textAlign: 'center'}}>
@@ -67,7 +70,7 @@ NestedColorSchemes.story = {
   name: 'nested color schemes'
 };
 
-export const NestedProps = () => (
+export const NestedProps: ProviderStory = () => (
   <Provider isDisabled>
     <Button variant="primary">I am disabled</Button>
     <Provider isQuiet>
@@ -80,49 +83,49 @@ NestedProps.story = {
   name: 'nested props'
 };
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: ProviderStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const IsEmphasized = () => render({isEmphasized: true});
+export const IsEmphasized: ProviderStory = () => render({isEmphasized: true});
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const IsDisabled = () => render({isDisabled: true});
+export const IsDisabled: ProviderStory = () => render({isDisabled: true});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true});
+export const IsReadOnly: ProviderStory = () => render({isReadOnly: true});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const IsRequired = () => render({isRequired: true});
+export const IsRequired: ProviderStory = () => render({isRequired: true});
 
 IsRequired.story = {
   name: 'isRequired'
 };
 
-export const CustomTheme = () => render({theme: THEME});
+export const CustomTheme: ProviderStory = () => render({theme: THEME});
 
 CustomTheme.story = {
   name: 'custom theme'
 };
 
-export const ExpressTheme = () => render({theme: expressTheme});
+export const ExpressTheme: ProviderStory = () => render({theme: expressTheme});
 
 ExpressTheme.story = {
   name: 'express theme'
 };
 
-export const ResponsiveStyleProps = () => (
+export const ResponsiveStyleProps: ProviderStory = () => (
   <Provider UNSAFE_style={{padding: 50}}>
     <div>
       <TextField
@@ -142,7 +145,7 @@ ResponsiveStyleProps.story = {
   name: 'responsive styleProps'
 };
 
-export const CustomResponsiveStyleProps = () => {
+export const CustomResponsiveStyleProps: ProviderStory = () => {
   let Breakpoint = () => {
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
@@ -175,7 +178,7 @@ CustomResponsiveStyleProps.story = {
   name: 'custom responsive styleProps'
 };
 
-export const BreakpointOmitted = () => {
+export const BreakpointOmitted: ProviderStory = () => {
   let Breakpoint = () => {
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
@@ -200,7 +203,7 @@ BreakpointOmitted.story = {
   name: 'breakpoint omitted'
 };
 
-export const LocaleZhHant = () => (
+export const LocaleZhHant: ProviderStory = () => (
   <div>
     <div>Heaven and earth are mysterious and yellow, the universe is prehistoric</div>
     <Provider locale="zh-Hant">
diff --git a/packages/@react-spectrum/radio/chromatic/Radio.stories.tsx b/packages/@react-spectrum/radio/chromatic/Radio.stories.tsx
index d9f3ffb83d1..eb3901841f5 100644
--- a/packages/@react-spectrum/radio/chromatic/Radio.stories.tsx
+++ b/packages/@react-spectrum/radio/chromatic/Radio.stories.tsx
@@ -11,92 +11,95 @@
  */
 
 import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
+import {Meta, StoryFn} from '@storybook/react';
 import {Radio, RadioGroup} from '../src';
 import React from 'react';
 import {View} from '@react-spectrum/view';
 
 export default {
   title: 'RadioGroup'
-};
+} as Meta<typeof RadioGroup>;
+
+export type RadioGroupStory = StoryFn<typeof RadioGroup>;
 
-export const ControlledDragons = () => render({value: 'dragons'});
+export const ControlledDragons: RadioGroupStory = () => render({value: 'dragons'});
 
 ControlledDragons.story = {
   name: 'controlled: dragons'
 };
 
-export const LabelAlignEnd = () => renderLabelPositions({labelAlign: 'end', value: 'dragons'});
+export const LabelAlignEnd: RadioGroupStory = () => renderLabelPositions({labelAlign: 'end', value: 'dragons'});
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSide = () =>
+export const LabelPositionSide: RadioGroupStory = () =>
   renderLabelPositions({labelPosition: 'side', value: 'dragons'});
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelPositionSideLabelAlignEnd = () =>
+export const LabelPositionSideLabelAlignEnd: RadioGroupStory = () =>
   renderLabelPositions({labelPosition: 'side', labelAlign: 'end', value: 'dragons'});
 
 LabelPositionSideLabelAlignEnd.story = {
   name: 'labelPosition: side, labelAlign: end'
 };
 
-export const IsDisabled = () => render({isDisabled: true, value: 'dragons'});
+export const IsDisabled: RadioGroupStory = () => render({isDisabled: true, value: 'dragons'});
 
 IsDisabled.story = {
   name: 'isDisabled'
 };
 
-export const IsRequired = () => render({isRequired: true, value: 'dragons'});
+export const IsRequired: RadioGroupStory = () => render({isRequired: true, value: 'dragons'});
 
 IsRequired.story = {
   name: 'isRequired'
 };
 
-export const IsReadOnly = () => render({isReadOnly: true, value: 'dragons'});
+export const IsReadOnly: RadioGroupStory = () => render({isReadOnly: true, value: 'dragons'});
 
 IsReadOnly.story = {
   name: 'isReadOnly'
 };
 
-export const IsEmphasized = () => render({isEmphasized: true, value: 'dragons'});
+export const IsEmphasized: RadioGroupStory = () => render({isEmphasized: true, value: 'dragons'});
 
 IsEmphasized.story = {
   name: 'isEmphasized'
 };
 
-export const ValidationStateInvalid = () =>
+export const ValidationStateInvalid: RadioGroupStory = () =>
   render({isInvalid: true, value: 'dragons'});
 
 ValidationStateInvalid.story = {
   name: 'validationState: "invalid"'
 };
 
-export const NoVisibleLabel = () =>
+export const NoVisibleLabel: RadioGroupStory = () =>
   render({label: null, 'aria-label': 'Favorite pet', value: 'dragons'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const LongRadioLabel = () => renderLongLabel({value: 'dragons'});
+export const LongRadioLabel: RadioGroupStory = () => renderLongLabel({value: 'dragons'});
 
 LongRadioLabel.story = {
   name: 'long radio label'
 };
 
-export const ShowErrorIcon = () =>
+export const ShowErrorIcon: RadioGroupStory = () =>
   render({isInvalid: true, errorMessage: 'Error message.', showErrorIcon: true});
 
 ShowErrorIcon.story = {
   name: 'show error icon'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: RadioGroupStory = (args) =>
   render({
     ...args,
     contextualHelp: (
diff --git a/packages/@react-spectrum/radio/src/Radio.tsx b/packages/@react-spectrum/radio/src/Radio.tsx
index a0d586fb4cd..7ac90dee40a 100644
--- a/packages/@react-spectrum/radio/src/Radio.tsx
+++ b/packages/@react-spectrum/radio/src/Radio.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import React, {forwardRef, useRef} from 'react';
 import {SpectrumRadioProps} from '@react-types/radio';
@@ -24,7 +24,9 @@ import {useRadioProvider} from './context';
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const Radio = forwardRef(function Radio(props: SpectrumRadioProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Radio:
+  React.ForwardRefExoticComponent<SpectrumRadioProps & React.RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
+forwardRef(function Radio(props: SpectrumRadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let {
     isDisabled,
     children,
diff --git a/packages/@react-spectrum/radio/src/RadioGroup.tsx b/packages/@react-spectrum/radio/src/RadioGroup.tsx
index 33c0fcfda37..f31c2dbb1ec 100644
--- a/packages/@react-spectrum/radio/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/radio/src/RadioGroup.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {RadioContext} from './context';
 import React from 'react';
@@ -26,7 +26,9 @@ import {useRadioGroupState} from '@react-stately/radio';
  * Radio groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const RadioGroup = React.forwardRef(function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef<HTMLElement>) {
+export const RadioGroup:
+  React.ForwardRefExoticComponent<SpectrumRadioGroupProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+React.forwardRef(function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/radio/src/context.ts b/packages/@react-spectrum/radio/src/context.ts
index 4f8a3bf3e41..92d8eb017e9 100644
--- a/packages/@react-spectrum/radio/src/context.ts
+++ b/packages/@react-spectrum/radio/src/context.ts
@@ -19,7 +19,7 @@ interface RadioGroupContext {
   state: RadioGroupState
 }
 
-export const RadioContext = React.createContext<RadioGroupContext | null>(null);
+export const RadioContext: React.Context<RadioGroupContext | null> = React.createContext<RadioGroupContext | null>(null);
 
 export function useRadioProvider(): RadioGroupContext {
   return useContext(RadioContext) || {} as RadioGroupContext;
diff --git a/packages/@react-spectrum/radio/stories/Radio.stories.tsx b/packages/@react-spectrum/radio/stories/Radio.stories.tsx
index 0e7bd1522f4..0e11dc5e3be 100644
--- a/packages/@react-spectrum/radio/stories/Radio.stories.tsx
+++ b/packages/@react-spectrum/radio/stories/Radio.stories.tsx
@@ -12,6 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, Content, ContextualHelp, Flex, Heading} from '@adobe/react-spectrum';
+import {Meta, StoryFn} from '@storybook/react';
 import {Provider} from '@react-spectrum/provider';
 import {Radio, RadioGroup} from '../src';
 import React, {useState} from 'react';
@@ -57,46 +58,48 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof RadioGroup>;
+
+export type RadioGroupStory = StoryFn<typeof RadioGroup>;
 
-export const Default = (args) => render(args);
+export const Default: RadioGroupStory = (args) => render(args);
 
 Default.story = {
   name: 'default'
 };
 
-export const DefaultValueDragons = (args) => render({...args, defaultValue: 'dragons'});
+export const DefaultValueDragons: RadioGroupStory = (args) => render({...args, defaultValue: 'dragons'});
 
 DefaultValueDragons.story = {
   name: 'defaultValue: dragons'
 };
 
-export const ControlledDragons = (args) => render({...args, value: 'dragons'});
+export const ControlledDragons: RadioGroupStory = (args) => render({...args, value: 'dragons'});
 
 ControlledDragons.story = {
   name: 'controlled: dragons'
 };
 
-export const IsDisabledOnOneRadio = (args) => render(args, [{}, {isDisabled: true}, {}]);
+export const IsDisabledOnOneRadio: RadioGroupStory = (args) => render(args, [{}, {isDisabled: true}, {}]);
 
 IsDisabledOnOneRadio.story = {
   name: 'isDisabled on one radio'
 };
 
-export const WithDescription = (args) => render({...args, description: 'Please select a pet.'});
+export const WithDescription: RadioGroupStory = (args) => render({...args, description: 'Please select a pet.'});
 
 WithDescription.story = {
   name: 'with description'
 };
 
-export const WithErrorMessage = (args) =>
+export const WithErrorMessage: RadioGroupStory = (args) =>
   render({...args, errorMessage: 'Please select a pet.', isInvalid: true});
 
 WithErrorMessage.story = {
   name: 'with error message'
 };
 
-export const WithErrorMessageAndErrorIcon = (args) =>
+export const WithErrorMessageAndErrorIcon: RadioGroupStory = (args) =>
   render({
     ...args,
     errorMessage: 'Please select a pet.',
@@ -108,14 +111,14 @@ WithErrorMessageAndErrorIcon.story = {
   name: 'with error message and error icon'
 };
 
-export const WithDescriptionErrorMessageAndValidationFixedWidth = (args) =>
+export const WithDescriptionErrorMessageAndValidationFixedWidth: RadioGroupStory = (args) =>
   renderWithDescriptionErrorMessageAndValidation(args);
 
 WithDescriptionErrorMessageAndValidationFixedWidth.story = {
   name: 'with description, error message and validation, fixed width'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: RadioGroupStory = (args) =>
   render({
     ...args,
     contextualHelp: (
@@ -133,26 +136,26 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const NoVisibleLabel = (args) =>
+export const NoVisibleLabel: RadioGroupStory = (args) =>
   render({...args, label: null, 'aria-label': 'Favorite pet'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const LongRadioLabel = (args) => renderLongLabel(args);
+export const LongRadioLabel: RadioGroupStory = (args) => renderLongLabel(args);
 
 LongRadioLabel.story = {
   name: 'long radio label'
 };
 
-export const ProviderControlIsDisabled = () => renderFormControl();
+export const ProviderControlIsDisabled: RadioGroupStory = () => renderFormControl();
 
 ProviderControlIsDisabled.story = {
   name: 'provider control: isDisabled'
 };
 
-export const AutoFocusOnOneRadio = (args) => render(args, [{}, {autoFocus: true}, {}]);
+export const AutoFocusOnOneRadio: RadioGroupStory = (args) => render(args, [{}, {autoFocus: true}, {}]);
 
 AutoFocusOnOneRadio.story = {
   name: 'autoFocus on one radio'
@@ -254,7 +257,7 @@ function renderWithDescriptionErrorMessageAndValidation(props) {
   return <Example />;
 }
 
-export const ControlledRovingTab = () => {
+export const ControlledRovingTab: RadioGroupStory = () => {
   const [selected, setSelected] = useState('1');
 
   return (

From 692cba87b2ecd756eea193efa5c4fcff4b9701cd Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 15:54:28 +1000
Subject: [PATCH 14/19] searchfield, slider, steplist, story-utils, switch

---
 .../chromatic/SearchField.stories.tsx         | 21 ++++++----
 .../stories/SearchField.stories.tsx           | 35 ++++++++--------
 .../slider/chromatic/RangeSlider.stories.tsx  | 20 ++++-----
 .../slider/chromatic/Slider.stories.tsx       | 24 ++++++-----
 .../slider/src/RangeSlider.tsx                |  6 ++-
 .../@react-spectrum/slider/src/Slider.tsx     |  6 ++-
 .../@react-spectrum/slider/src/SliderBase.tsx |  6 ++-
 .../slider/stories/RangeSlider.stories.tsx    | 27 ++++++------
 .../slider/stories/Slider.stories.tsx         | 41 ++++++++++---------
 .../slider/test/Slider.test.tsx               | 14 +++----
 packages/@react-spectrum/slider/test/utils.ts | 15 +++++--
 .../chromatic/StatusLight.stories.tsx         |  9 ++--
 .../StatusLightLanguages.stories.tsx          |  9 ++--
 .../statuslight/src/StatusLight.tsx           |  6 ++-
 .../steplist/src/StepListContext.ts           |  2 +-
 .../steplist/stories/StepList.stories.tsx     | 12 +++---
 .../story-utils/src/GeneratePowerset.tsx      |  2 +-
 .../switch/chromatic/Switch.stories.tsx       | 23 ++++++-----
 .../@react-spectrum/switch/src/Switch.tsx     |  6 ++-
 19 files changed, 162 insertions(+), 122 deletions(-)

diff --git a/packages/@react-spectrum/searchfield/chromatic/SearchField.stories.tsx b/packages/@react-spectrum/searchfield/chromatic/SearchField.stories.tsx
index b2213098638..c523bfbb403 100644
--- a/packages/@react-spectrum/searchfield/chromatic/SearchField.stories.tsx
+++ b/packages/@react-spectrum/searchfield/chromatic/SearchField.stories.tsx
@@ -14,6 +14,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import Refresh from '@spectrum-icons/workflow/Refresh';
 import {SearchField} from '../';
@@ -23,36 +24,38 @@ const info =
 
 export default {
   title: 'SearchField'
-};
+} as Meta<typeof SearchField>;
+
+export type SearchFieldStory = StoryFn<typeof SearchField>;
 
-export const Default = () => renderSearchLandmark(render());
+export const Default: SearchFieldStory = () => renderSearchLandmark(render());
 
 Default.story = {
   parameters: {info}
 };
 
-export const Value = () => renderSearchLandmark(render({value: 'React'}));
+export const Value: SearchFieldStory = () => renderSearchLandmark(render({value: 'React'}));
 
 Value.story = {
   name: 'value',
   parameters: {info}
 };
 
-export const IsDisabled = () => renderSearchLandmark(render({value: 'React', isDisabled: true}));
+export const IsDisabled: SearchFieldStory = () => renderSearchLandmark(render({value: 'React', isDisabled: true}));
 
 IsDisabled.story = {
   name: 'isDisabled',
   parameters: {info}
 };
 
-export const IsReadOnly = () => renderSearchLandmark(render({value: 'React', isReadOnly: true}));
+export const IsReadOnly: SearchFieldStory = () => renderSearchLandmark(render({value: 'React', isReadOnly: true}));
 
 IsReadOnly.story = {
   name: 'isReadOnly',
   parameters: {info}
 };
 
-export const IconRefresh = () =>
+export const IconRefresh: SearchFieldStory = () =>
   renderSearchLandmark(render({defaultValue: 'React', icon: <Refresh />}));
 
 IconRefresh.story = {
@@ -60,20 +63,20 @@ IconRefresh.story = {
   parameters: {info}
 };
 
-export const IconNull = () => renderSearchLandmark(render({defaultValue: 'React', icon: null}));
+export const IconNull: SearchFieldStory = () => renderSearchLandmark(render({defaultValue: 'React', icon: null}));
 
 IconNull.story = {
   name: 'icon: null',
   parameters: {info}
 };
 
-export const CustomWidth = () => render({defaultValue: 'React', width: 275});
+export const CustomWidth: SearchFieldStory = () => render({defaultValue: 'React', width: 275});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: SearchFieldStory = (args) =>
   render({
     ...args,
     contextualHelp: (
diff --git a/packages/@react-spectrum/searchfield/stories/SearchField.stories.tsx b/packages/@react-spectrum/searchfield/stories/SearchField.stories.tsx
index 3227530d8ae..7c8c81efd01 100644
--- a/packages/@react-spectrum/searchfield/stories/SearchField.stories.tsx
+++ b/packages/@react-spectrum/searchfield/stories/SearchField.stories.tsx
@@ -17,6 +17,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import Refresh from '@spectrum-icons/workflow/Refresh';
 import {SearchField} from '../';
@@ -36,7 +37,7 @@ export default {
     necessityIndicator: 'icon',
     labelPosition: 'top',
     labelAlign: 'start',
-    validationState: null
+    validationState: undefined
   },
   argTypes: {
     labelPosition: {
@@ -64,15 +65,17 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof SearchField>;
+
+export type SearchFieldStory = StoryFn<typeof SearchField>;
 
-export const Default = (args) => renderSearchLandmark(render(args));
+export const Default: SearchFieldStory = (args) => renderSearchLandmark(render(args));
 
 Default.story = {
   parameters: {info}
 };
 
-export const DefaultValueUncontrolled = (args) =>
+export const DefaultValueUncontrolled: SearchFieldStory = (args) =>
   renderSearchLandmark(render({...args, defaultValue: 'React'}));
 
 DefaultValueUncontrolled.story = {
@@ -80,14 +83,14 @@ DefaultValueUncontrolled.story = {
   parameters: {info}
 };
 
-export const ValueControlled = (args) => renderSearchLandmark(render({...args, value: 'React'}));
+export const ValueControlled: SearchFieldStory = (args) => renderSearchLandmark(render({...args, value: 'React'}));
 
 ValueControlled.story = {
   name: 'value (controlled)',
   parameters: {info}
 };
 
-export const IconRefresh = (args) =>
+export const IconRefresh: SearchFieldStory = (args) =>
   renderSearchLandmark(render({...args, defaultValue: 'React', icon: <Refresh />}));
 
 IconRefresh.story = {
@@ -95,7 +98,7 @@ IconRefresh.story = {
   parameters: {info}
 };
 
-export const IconNull = (args) =>
+export const IconNull: SearchFieldStory = (args) =>
   renderSearchLandmark(render({...args, defaultValue: 'React', icon: null}));
 
 IconNull.story = {
@@ -103,7 +106,7 @@ IconNull.story = {
   parameters: {info}
 };
 
-export const OnClear = (args) =>
+export const OnClear: SearchFieldStory = (args) =>
   renderSearchLandmark(render({...args, onClear: action('clear')}));
 
 OnClear.story = {
@@ -111,34 +114,34 @@ OnClear.story = {
   parameters: {info}
 };
 
-export const AutoFocus = (args) => renderSearchLandmark(render({...args, autoFocus: true}));
+export const AutoFocus: SearchFieldStory = (args) => renderSearchLandmark(render({...args, autoFocus: true}));
 
 AutoFocus.story = {
   name: 'autoFocus',
   parameters: {info}
 };
 
-export const NoVisibleLabel = (args) =>
+export const NoVisibleLabel: SearchFieldStory = (args) =>
   render({...args, label: null, 'aria-label': 'Street address'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const WithDescription = (args) => render({...args, description: 'Enter a search term.'});
+export const WithDescription: SearchFieldStory = (args) => render({...args, description: 'Enter a search term.'});
 
 WithDescription.story = {
   name: 'with description'
 };
 
-export const WithErrorMessage = (args) =>
+export const WithErrorMessage: SearchFieldStory = (args) =>
   render({...args, errorMessage: 'Remove special characters.', validationState: 'invalid'});
 
 WithErrorMessage.story = {
   name: 'with error message'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: SearchFieldStory = (args) =>
   render({
     ...args,
     contextualHelp: (
@@ -156,13 +159,13 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const CustomWidth = (args) => render({...args, width: 300});
+export const CustomWidth: SearchFieldStory = (args) => render({...args, width: 300});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const CustomWidthAndNarrowContainer = (args) => (
+export const CustomWidthAndNarrowContainer: SearchFieldStory = (args) => (
   <Flex direction="column" width="30px">
     {render({...args, defaultValue: 'React', validationState: 'valid'})}
     {render({...args, defaultValue: 'React', width: 30})}
@@ -174,7 +177,7 @@ CustomWidthAndNarrowContainer.story = {
   name: 'custom width and narrow container'
 };
 
-export const WithinAPopover = (args) => (
+export const WithinAPopover: SearchFieldStory = (args) => (
   <DialogTrigger type="popover">
     <ActionButton>Trigger</ActionButton>
     <Dialog>
diff --git a/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx
index 63eaff09e2f..c2de34fa927 100644
--- a/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/slider/chromatic/RangeSlider.stories.tsx
@@ -13,7 +13,7 @@
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import {RangeSlider} from '../';
 import React from 'react';
 import {SpectrumRangeSliderProps} from '@react-types/slider';
@@ -21,26 +21,24 @@ import {SpectrumRangeSliderProps} from '@react-types/slider';
 const meta: Meta<SpectrumRangeSliderProps> = {
   title: 'RangeSlider',
   component: RangeSlider
-};
+} as Meta<SpectrumRangeSliderProps>;
 
 export default meta;
 
-export const Default = {
+export type RangeSliderStory = StoryObj<typeof RangeSlider>;
+
+export const Default: RangeSliderStory = {
   args: {label: 'RangeSlider label'}
 };
 
-export const Disabled = {
+export const Disabled: RangeSliderStory = {
   args: {...Default.args, isDisabled: true}
 };
 
-export const SmallerRange = {
+export const SmallerRange: RangeSliderStory = {
   args: {...Default.args, defaultValue: {start: 30, end: 70}}
 };
 
-export const LabelAlignEnd = {
-  args: {...Default.args, labelAlign: 'end'}
-};
-
 let contextualHelp = (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
@@ -48,10 +46,10 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = {
+export const _ContextualHelp: RangeSliderStory = {
   args: {label: 'Slider label', contextualHelp}
 };
 
-export const ContextualHelpSideLabel = {
+export const ContextualHelpSideLabel: RangeSliderStory = {
   args: {label: 'Slider label', contextualHelp, labelPosition: 'side'}
 };
diff --git a/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx b/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx
index 8948e848379..d73825a7bef 100644
--- a/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx
+++ b/packages/@react-spectrum/slider/chromatic/Slider.stories.tsx
@@ -13,7 +13,7 @@
 import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {Heading} from '@react-spectrum/text';
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {Slider} from '../';
 import {SpectrumSliderProps} from '@react-types/slider';
@@ -21,35 +21,37 @@ import {SpectrumSliderProps} from '@react-types/slider';
 const meta: Meta<SpectrumSliderProps> = {
   title: 'Slider',
   component: Slider
-};
+} as Meta<SpectrumSliderProps>;
 
 export default meta;
 
-export const Default = {
+export type SliderStory = StoryObj<typeof Slider>;
+
+export const Default: SliderStory = {
   args: {label: 'Slider label'}
 };
 
-export const Disabled = {
+export const Disabled: SliderStory = {
   args: {...Default.args, isDisabled: true}
 };
 
-export const LabelPositionSide = {
+export const LabelPositionSide: SliderStory = {
   args: {...Default.args, labelPosition: 'side'}
 };
 
-export const Value50 = {
+export const Value50: SliderStory = {
   args: {...Default.args, defaultValue: 50}
 };
 
-export const Filled = {
+export const Filled: SliderStory = {
   args: {...Value50.args, isFilled: true}
 };
 
-export const FillOffset = {
+export const FillOffset: SliderStory = {
   args: {...Filled.args, defaultValue: 80, fillOffset: 50}
 };
 
-export const TrackGradient = {
+export const TrackGradient: SliderStory = {
   args: {
     ...Default.args,
     isFilled: true,
@@ -65,10 +67,10 @@ let contextualHelp = (
   </ContextualHelp>
 );
 
-export const _ContextualHelp = {
+export const _ContextualHelp: SliderStory = {
   args: {label: 'Slider label', contextualHelp}
 };
 
-export const ContextualHelpSideLabel = {
+export const ContextualHelpSideLabel: SliderStory = {
   args: {label: 'Slider label', contextualHelp, labelPosition: 'side'}
 };
diff --git a/packages/@react-spectrum/slider/src/RangeSlider.tsx b/packages/@react-spectrum/slider/src/RangeSlider.tsx
index 268d2d647d8..85108e40852 100644
--- a/packages/@react-spectrum/slider/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/slider/src/RangeSlider.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import React from 'react';
@@ -24,7 +24,9 @@ import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 /**
  * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
  */
-export const RangeSlider = React.forwardRef(function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const RangeSlider:
+  React.ForwardRefExoticComponent<SpectrumRangeSliderProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
+React.forwardRef(function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;
 
   let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {
diff --git a/packages/@react-spectrum/slider/src/Slider.tsx b/packages/@react-spectrum/slider/src/Slider.tsx
index 40c36182189..43f50367ed8 100644
--- a/packages/@react-spectrum/slider/src/Slider.tsx
+++ b/packages/@react-spectrum/slider/src/Slider.tsx
@@ -12,7 +12,7 @@
 
 import {clamp} from '@react-aria/utils';
 import {classNames} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import React, {ReactNode} from 'react';
 import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';
 import {SliderThumb} from './SliderThumb';
@@ -23,7 +23,9 @@ import {useLocale} from '@react-aria/i18n';
 /**
  * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
  */
-export const Slider = React.forwardRef(function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const Slider:
+  React.ForwardRefExoticComponent<SpectrumSliderProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
+React.forwardRef(function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;
 
   let baseProps: Omit<SliderBaseProps, 'children'> = {
diff --git a/packages/@react-spectrum/slider/src/SliderBase.tsx b/packages/@react-spectrum/slider/src/SliderBase.tsx
index dd35c53a6de..246c38c9d71 100644
--- a/packages/@react-spectrum/slider/src/SliderBase.tsx
+++ b/packages/@react-spectrum/slider/src/SliderBase.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef, RefObject} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
 import React, {CSSProperties, ReactNode, useRef} from 'react';
 import {SliderState, useSliderState} from '@react-stately/slider';
 import {SpectrumBarSliderBase} from '@react-types/slider';
@@ -32,7 +32,9 @@ export interface SliderBaseProps<T = number[]> extends SpectrumBarSliderBase<T>
   style?: CSSProperties
 }
 
-export const SliderBase = React.forwardRef(function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
+export const SliderBase:
+  React.ForwardRefExoticComponent<SliderBaseProps<number[]> & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
+React.forwardRef(function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {
     isDisabled,
diff --git a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
index a54e782f35f..7534099fd56 100644
--- a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
@@ -15,6 +15,7 @@ import {Content} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {ErrorBoundary} from '@react-spectrum/story-utils';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import {RangeSlider} from '../';
 import React from 'react';
 import {SpectrumRangeSliderProps} from '@react-types/slider';
@@ -37,22 +38,24 @@ export default {
       }
     }
   }
-};
+} as Meta<SpectrumRangeSliderProps>;
+
+export type RangeSliderStory = StoryFn<typeof RangeSlider>;
 
-export const Default = (args) => render({...args, 'aria-label': 'Label', label: undefined});
-export const Label = (args) => render(args);
+export const Default: RangeSliderStory = (args) => render({...args, 'aria-label': 'Label', label: undefined});
+export const Label: RangeSliderStory = (args) => render(args);
 
 Label.story = {
   name: 'label'
 };
 
-export const CustomWidth = (args) => render({...args, width: '300px'});
+export const CustomWidth: RangeSliderStory = (args) => render({...args, width: '300px'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const LabelOverflow = (args) =>
+export const LabelOverflow: RangeSliderStory = (args) =>
   render({
     ...args,
     label: 'This is a rather long label for this narrow slider element.',
@@ -64,34 +67,34 @@ LabelOverflow.story = {
   name: 'label overflow'
 };
 
-export const ShowValueLabelFalse = (args) => render({...args, showValueLabel: false});
+export const ShowValueLabelFalse: RangeSliderStory = (args) => render({...args, showValueLabel: false});
 
 ShowValueLabelFalse.story = {
   name: 'showValueLabel: false'
 };
 
-export const FormatOptionsPercent = (args) =>
+export const FormatOptionsPercent: RangeSliderStory = (args) =>
   render({...args, minValue: 0, maxValue: 1, step: 0.01, formatOptions: {style: 'percent'}});
 
 FormatOptionsPercent.story = {
   name: 'formatOptions percent'
 };
 
-export const FormatOptionsCentimeter = (args) =>
+export const FormatOptionsCentimeter: RangeSliderStory = (args) =>
   render({...args, maxValue: 1000, formatOptions: {style: 'unit', unit: 'centimeter'}});
 
 FormatOptionsCentimeter.story = {
   name: 'formatOptions centimeter'
 };
 
-export const CustomValueLabel = (args) =>
+export const CustomValueLabel: RangeSliderStory = (args) =>
   render({...args, getValueLabel: (value) => `${value.start} <-> ${value.end}`});
 
 CustomValueLabel.story = {
   name: 'custom valueLabel'
 };
 
-export const CustomValueLabelWithLabelOverflow = (args) =>
+export const CustomValueLabelWithLabelOverflow: RangeSliderStory = (args) =>
   render({
     ...args,
     label: 'This is a rather long label for this narrow slider element.',
@@ -102,13 +105,13 @@ CustomValueLabelWithLabelOverflow.story = {
   name: 'custom valueLabel with label overflow'
 };
 
-export const MinMax = (args) => render({...args, minValue: 30, maxValue: 70});
+export const MinMax: RangeSliderStory = (args) => render({...args, minValue: 30, maxValue: 70});
 
 MinMax.story = {
   name: 'min/max'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: RangeSliderStory = (args) =>
   render({
     ...args,
     label: 'Label',
diff --git a/packages/@react-spectrum/slider/stories/Slider.stories.tsx b/packages/@react-spectrum/slider/stories/Slider.stories.tsx
index 2cef002818e..eb484d3128f 100644
--- a/packages/@react-spectrum/slider/stories/Slider.stories.tsx
+++ b/packages/@react-spectrum/slider/stories/Slider.stories.tsx
@@ -16,6 +16,7 @@ import {ContextualHelp} from '@react-spectrum/contextualhelp';
 import {ErrorBoundary} from '@react-spectrum/story-utils';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {Slider} from '../';
 import {SpectrumSliderProps} from '@react-types/slider';
@@ -38,16 +39,18 @@ export default {
       }
     }
   }
-};
+} as Meta<SpectrumSliderProps>;
+
+export type SliderStory = StoryFn<typeof Slider>;
 
-export const Default = (args) => render({...args, label: null, 'aria-label': 'Label'});
-export const Label = (args) => render(args);
+export const Default: SliderStory = (args) => render({...args, label: null, 'aria-label': 'Label'});
+export const Label: SliderStory = (args) => render(args);
 
 Label.story = {
   name: 'label'
 };
 
-export const Multitouch = (args) => (
+export const Multitouch: SliderStory = (args) => (
   <Flex direction="column" gap="size-1000">
     {render({...args, label: 'Label'})}
     {render({...args, label: 'Label'})}
@@ -58,19 +61,19 @@ Multitouch.story = {
   name: 'multitouch'
 };
 
-export const CustomWidth = (args) => render({...args, width: '300px'});
+export const CustomWidth: SliderStory = (args) => render({...args, width: '300px'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const CustomWidthSmall = (args) => render({...args, width: '30px'});
+export const CustomWidthSmall: SliderStory = (args) => render({...args, width: '30px'});
 
 CustomWidthSmall.story = {
   name: 'custom width small'
 };
 
-export const LabelOverflow = (args) =>
+export const LabelOverflow: SliderStory = (args) =>
   render({
     ...args,
     label: 'This is a rather long label for this narrow slider element.',
@@ -82,34 +85,34 @@ LabelOverflow.story = {
   name: 'label overflow'
 };
 
-export const ShowValueLabelFalse = (args) => render({...args, showValueLabel: false});
+export const ShowValueLabelFalse: SliderStory = (args) => render({...args, showValueLabel: false});
 
 ShowValueLabelFalse.story = {
   name: 'showValueLabel: false'
 };
 
-export const FormatOptionsPercent = (args) =>
+export const FormatOptionsPercent: SliderStory = (args) =>
   render({...args, minValue: 0, maxValue: 1, step: 0.01, formatOptions: {style: 'percent'}});
 
 FormatOptionsPercent.story = {
   name: 'formatOptions percent'
 };
 
-export const FormatOptionsCentimeter = (args) =>
+export const FormatOptionsCentimeter: SliderStory = (args) =>
   render({...args, maxValue: 1000, formatOptions: {style: 'unit', unit: 'centimeter'}});
 
 FormatOptionsCentimeter.story = {
   name: 'formatOptions centimeter'
 };
 
-export const CustomValueLabel = (args) =>
+export const CustomValueLabel: SliderStory = (args) =>
   render({...args, getValueLabel: (state) => `A ${state} B`});
 
 CustomValueLabel.story = {
   name: 'custom valueLabel'
 };
 
-export const CustomValueLabelWithLabelOverflow = (args) =>
+export const CustomValueLabelWithLabelOverflow: SliderStory = (args) =>
   render({
     ...args,
     label: 'This is a rather long label for this narrow slider element.',
@@ -120,25 +123,25 @@ CustomValueLabelWithLabelOverflow.story = {
   name: 'custom valueLabel with label overflow'
 };
 
-export const MinMax = (args) => render({...args, minValue: 30, maxValue: 70});
+export const MinMax: SliderStory = (args) => render({...args, minValue: 30, maxValue: 70});
 
 MinMax.story = {
   name: 'min/max'
 };
 
-export const Step = (args) => render({...args, minValue: 0, maxValue: 100, step: 5});
+export const Step: SliderStory = (args) => render({...args, minValue: 0, maxValue: 100, step: 5});
 
 Step.story = {
   name: 'step'
 };
 
-export const IsFilledTrue = (args) => render({...args, isFilled: true});
+export const IsFilledTrue: SliderStory = (args) => render({...args, isFilled: true});
 
 IsFilledTrue.story = {
   name: 'isFilled: true'
 };
 
-export const FillOffset = (args) =>
+export const FillOffset: SliderStory = (args) =>
   render({
     ...args,
     label: 'Exposure',
@@ -153,20 +156,20 @@ FillOffset.story = {
   name: 'fillOffset'
 };
 
-export const TrackGradient = (args) => render({...args, trackGradient: ['blue', 'red']});
+export const TrackGradient: SliderStory = (args) => render({...args, trackGradient: ['blue', 'red']});
 
 TrackGradient.story = {
   name: 'trackGradient'
 };
 
-export const TrackGradientWithFillOffset = (args) =>
+export const TrackGradientWithFillOffset: SliderStory = (args) =>
   render({...args, trackGradient: ['blue', 'red'], isFilled: true, fillOffset: 50});
 
 TrackGradientWithFillOffset.story = {
   name: 'trackGradient with fillOffset'
 };
 
-export const _ContextualHelp = (args) =>
+export const _ContextualHelp: SliderStory = (args) =>
   render({
     ...args,
     contextualHelp: (
diff --git a/packages/@react-spectrum/slider/test/Slider.test.tsx b/packages/@react-spectrum/slider/test/Slider.test.tsx
index c5bcba26e04..e30e16a17cf 100644
--- a/packages/@react-spectrum/slider/test/Slider.test.tsx
+++ b/packages/@react-spectrum/slider/test/Slider.test.tsx
@@ -284,7 +284,7 @@ describe('Slider', function () {
           <Slider label="Label" defaultValue={50} minValue={0} maxValue={100} />
         </Provider>
       );
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -305,7 +305,7 @@ describe('Slider', function () {
           <Slider label="Label" defaultValue={50} minValue={0} maxValue={100} orientation="vertical" />
         </Provider>
       );
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -321,7 +321,7 @@ describe('Slider', function () {
           <Slider label="Label" step={20} defaultValue={40} />
         </Provider>
       );
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -338,7 +338,7 @@ describe('Slider', function () {
         </Provider>
       );
       // The slider page size should be initially calulated as 230/10 = 23 and then snapped to 20 so it is a multiple of the step
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -355,7 +355,7 @@ describe('Slider', function () {
         </Provider>
       );
       // The slider page size should be initially calulated as 25/10 = 2.5, snaps to 2
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -372,7 +372,7 @@ describe('Slider', function () {
         </Provider>
       );
       // The slider page size should be initially calulated as 35/10 = 3.5, snaps to 4
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
 
@@ -386,7 +386,7 @@ describe('Slider', function () {
           <Slider label="Label" minValue={-1} defaultValue={0} maxValue={1} />
         </Provider>
       );
-      let slider = tree.getByRole('slider');
+      let slider = tree.getByRole('slider') as HTMLInputElement;
       testKeypresses([slider, slider], commands);
     });
   });
diff --git a/packages/@react-spectrum/slider/test/utils.ts b/packages/@react-spectrum/slider/test/utils.ts
index 2734c68af6c..74c98edace6 100644
--- a/packages/@react-spectrum/slider/test/utils.ts
+++ b/packages/@react-spectrum/slider/test/utils.ts
@@ -16,7 +16,16 @@ function pressKeyOnButton(key, button) {
   fireEvent.keyDown(button, {key});
   fireEvent.keyUp(button, {key});
 }
-export const press = {
+export const press: {
+  ArrowRight: (button: HTMLElement) => void,
+  ArrowLeft: (button: HTMLElement) => void,
+  ArrowUp: (button: HTMLElement) => void,
+  ArrowDown: (button: HTMLElement) => void,
+  Home: (button: HTMLElement) => void,
+  End: (button: HTMLElement) => void,
+  PageUp: (button: HTMLElement) => void,
+  PageDown: (button: HTMLElement) => void
+} = {
   ArrowRight: (button: HTMLElement) => pressKeyOnButton('ArrowRight', button),
   ArrowLeft: (button: HTMLElement) => pressKeyOnButton('ArrowLeft', button),
   ArrowUp: (button: HTMLElement) => pressKeyOnButton('ArrowUp', button),
@@ -25,9 +34,9 @@ export const press = {
   End: (button: HTMLElement) => pressKeyOnButton('End', button),
   PageUp: (button: HTMLElement) => pressKeyOnButton('PageUp', button),
   PageDown: (button: HTMLElement) => pressKeyOnButton('PageDown', button)
-};
+} as const;
 
-export function testKeypresses([sliderLeft, sliderRight], commands: any[]) {
+export function testKeypresses([sliderLeft, sliderRight]: [HTMLInputElement, HTMLInputElement], commands: any[]): void {
   for (let command of commands) {
     let c = command.left ?? command.right;
     let result = command.result;
diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx
index 3425de43bda..83d53ed26d2 100644
--- a/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx
+++ b/packages/@react-spectrum/statuslight/chromatic/StatusLight.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {SpectrumStatusLightProps} from '@react-types/statuslight';
 import {StatusLight} from '../';
@@ -20,15 +21,17 @@ let variants = ['celery', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'chartreuse'
 
 export default {
   title: 'StatusLight'
-};
+} as Meta<SpectrumStatusLightProps>;
+
+export type StatusLightStory = StoryObj<typeof StatusLight>;
 
-export const AllVariants = () => render();
+export const AllVariants: StatusLightStory = () => render();
 
 AllVariants.story = {
   name: 'all variants'
 };
 
-export const Multiline = () => (
+export const Multiline: StatusLightStory = () => (
   <View width="size-3000">
     <StatusLight variant="celery">Super long status light label. Sample text. Arma virumque cano, Troiae qui primus ab oris.</StatusLight>
   </View>
diff --git a/packages/@react-spectrum/statuslight/chromatic/StatusLightLanguages.stories.tsx b/packages/@react-spectrum/statuslight/chromatic/StatusLightLanguages.stories.tsx
index 14f34ec9596..d9618d05baa 100644
--- a/packages/@react-spectrum/statuslight/chromatic/StatusLightLanguages.stories.tsx
+++ b/packages/@react-spectrum/statuslight/chromatic/StatusLightLanguages.stories.tsx
@@ -11,8 +11,9 @@
  */
 
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
-import {StatusLight} from '../';
+import {SpectrumStatusLightProps, StatusLight} from '../';
 
 export default {
   title: 'Languages/StatusLight',
@@ -24,9 +25,11 @@ export default {
       scales: ['large', 'medium']
     }
   }
-};
+} as Meta<SpectrumStatusLightProps>;
+
+export type StatusLightLanguagesStory = StoryObj<typeof StatusLight>;
 
-export const NeutralNoItalicInCcjk = () => (
+export const NeutralNoItalicInCcjk: StatusLightLanguagesStory = () => (
   <Flex gap="size-200" direction="row" wrap>
     <StatusLight variant="neutral">Help</StatusLight>
     <StatusLight variant="neutral">مساعدة</StatusLight>
diff --git a/packages/@react-spectrum/statuslight/src/StatusLight.tsx b/packages/@react-spectrum/statuslight/src/StatusLight.tsx
index fd66f8ac948..facfb3c4d38 100644
--- a/packages/@react-spectrum/statuslight/src/StatusLight.tsx
+++ b/packages/@react-spectrum/statuslight/src/StatusLight.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {SpectrumStatusLightProps} from '@react-types/statuslight';
@@ -22,7 +22,9 @@ import {useProviderProps} from '@react-spectrum/provider';
  * Status lights are used to color code categories and labels commonly found in data visualization.
  * When status lights have a semantic meaning, they should use semantic variant colors.
  */
-export const StatusLight = forwardRef(function StatusLight(props: SpectrumStatusLightProps, ref: DOMRef<HTMLDivElement>) {
+export const StatusLight:
+  React.ForwardRefExoticComponent<SpectrumStatusLightProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function StatusLight(props: SpectrumStatusLightProps, ref: DOMRef<HTMLDivElement>) {
   let {
     variant,
     children,
diff --git a/packages/@react-spectrum/steplist/src/StepListContext.ts b/packages/@react-spectrum/steplist/src/StepListContext.ts
index 0bf617a8d2d..e9ba1bc314e 100644
--- a/packages/@react-spectrum/steplist/src/StepListContext.ts
+++ b/packages/@react-spectrum/steplist/src/StepListContext.ts
@@ -13,4 +13,4 @@
 import React from 'react';
 import {StepListState} from '@react-stately/steplist';
 
-export const StepListContext = React.createContext<StepListState<unknown> | null>(null);
+export const StepListContext: React.Context<StepListState<unknown> | null> = React.createContext<StepListState<unknown> | null>(null);
diff --git a/packages/@react-spectrum/steplist/stories/StepList.stories.tsx b/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
index e18c57d3e08..1faf597f20e 100644
--- a/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
+++ b/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
@@ -13,12 +13,12 @@
 import {action} from '@storybook/addon-actions';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Flex} from '@react-spectrum/layout';
 import {Item} from '@react-stately/collections';
 import {Key} from '@react-types/shared';
+import {Meta, StoryObj} from '@storybook/react';
 import {Picker} from '@react-spectrum/picker';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {JSX, useCallback, useMemo, useState} from 'react';
 import {SpectrumStepListProps, StepList} from '../';
 import {View} from '@react-spectrum/view';
 
@@ -74,9 +74,9 @@ export default {
       }
     }
   }
-} as ComponentMeta<typeof StepList>;
+} as Meta<typeof StepList>;
 
-function DefaultStepList(props: SpectrumStepListProps<object>) {
+function DefaultStepList(props: SpectrumStepListProps<object>): JSX.Element {
   return (
     <StepList {...props}>
       {options.map((o) => <Item key={o.key}>{o.value}</Item>)}
@@ -84,8 +84,8 @@ function DefaultStepList(props: SpectrumStepListProps<object>) {
   );
 }
 
-export type DefaultStory = ComponentStoryObj<typeof DefaultStepList>;
-export type StepListStory = ComponentStoryObj<typeof StepList>;
+export type DefaultStory = StoryObj<typeof DefaultStepList>;
+export type StepListStory = StoryObj<typeof StepList>;
 
 export const Default: DefaultStory = {
   render: (args) => <DefaultStepList {...args} />
diff --git a/packages/@react-spectrum/story-utils/src/GeneratePowerset.tsx b/packages/@react-spectrum/story-utils/src/GeneratePowerset.tsx
index 91dff9a8c28..c8e3b767872 100644
--- a/packages/@react-spectrum/story-utils/src/GeneratePowerset.tsx
+++ b/packages/@react-spectrum/story-utils/src/GeneratePowerset.tsx
@@ -13,7 +13,7 @@
 import {mergeProps} from '@react-aria/utils';
 
 // Generate a powerset from a given array of states/options,
-export function generatePowerset(states: Array<object>, exclude?: (merged) => boolean): any[] {
+export function generatePowerset(states: Array<any>, exclude?: (merged: any) => boolean): any[] {
   let combinations: any[] = [{}];
   for (let i = 0; i < states.length; i++) {
     let len = combinations.length;
diff --git a/packages/@react-spectrum/switch/chromatic/Switch.stories.tsx b/packages/@react-spectrum/switch/chromatic/Switch.stories.tsx
index bddebd01392..20d8cb35bed 100644
--- a/packages/@react-spectrum/switch/chromatic/Switch.stories.tsx
+++ b/packages/@react-spectrum/switch/chromatic/Switch.stories.tsx
@@ -10,47 +10,50 @@
  * governing permissions and limitations under the License.
  */
 
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
-import {Switch} from '../';
+import {SpectrumSwitchProps, Switch} from '../';
 import {View} from '@react-spectrum/view';
 
 export default {
   title: 'Switch'
-};
+} as Meta<SpectrumSwitchProps>;
+
+export type SwitchStory = StoryFn<typeof Switch>;
 
-export const Default = () => render();
-export const IsDisabledTrue = () => render({isDisabled: true});
+export const Default: SwitchStory = () => render();
+export const IsDisabledTrue: SwitchStory = () => render({isDisabled: true});
 
 IsDisabledTrue.story = {
   name: 'isDisabled: true'
 };
 
-export const IsEmphasizedTrue = () => render({isEmphasized: true});
+export const IsEmphasizedTrue: SwitchStory = () => render({isEmphasized: true});
 
 IsEmphasizedTrue.story = {
   name: 'isEmphasized: true'
 };
 
-export const IsEmphasizedTrueIsDisabledTrue = () =>
+export const IsEmphasizedTrueIsDisabledTrue: SwitchStory = () =>
   render({isEmphasized: true, isDisabled: true});
 
 IsEmphasizedTrueIsDisabledTrue.story = {
   name: 'isEmphasized: true, isDisabled: true'
 };
 
-export const IsReadOnlyTrue = () => render({isReadOnly: true});
+export const IsReadOnlyTrue: SwitchStory = () => render({isReadOnly: true});
 
 IsReadOnlyTrue.story = {
   name: 'isReadOnly: true'
 };
 
-export const CustomLabel = () => renderCustomLabel();
+export const CustomLabel: SwitchStory = () => renderCustomLabel();
 
 CustomLabel.story = {
   name: 'custom label'
 };
 
-export const LongLabel = () => (
+export const LongLabel: SwitchStory = () => (
   <View width="size-2000">
     <Switch>
       Super long switch label. Sample text. Arma virumque cano, Troiae qui primus ab oris.
@@ -62,7 +65,7 @@ LongLabel.story = {
   name: 'long label'
 };
 
-export const NoLabel = () => renderNoLabel({'aria-label': 'This checkbox has no visible label'});
+export const NoLabel: SwitchStory = () => renderNoLabel({'aria-label': 'This checkbox has no visible label'});
 
 NoLabel.story = {
   name: 'no label'
diff --git a/packages/@react-spectrum/switch/src/Switch.tsx b/packages/@react-spectrum/switch/src/Switch.tsx
index 949b2e0a50d..254499393c9 100644
--- a/packages/@react-spectrum/switch/src/Switch.tsx
+++ b/packages/@react-spectrum/switch/src/Switch.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import React, {forwardRef, useRef} from 'react';
 import {SpectrumSwitchProps} from '@react-types/switch';
@@ -25,7 +25,9 @@ import {useToggleState} from '@react-stately/toggle';
  * Switches allow users to turn an individual option on or off.
  * They are usually used to activate or deactivate a specific setting.
  */
-export const Switch = forwardRef(function Switch(props: SpectrumSwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Switch:
+  React.ForwardRefExoticComponent<SpectrumSwitchProps & React.RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
+forwardRef(function Switch(props: SpectrumSwitchProps, ref: FocusableRef<HTMLLabelElement>) {
   props = useProviderProps(props);
   let {
     isEmphasized = false,

From 0216ab714dd28bc2f98ed11c8099390ad2be02a0 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 15:54:36 +1000
Subject: [PATCH 15/19] table

---
 .../table/chromatic/TableView.stories.tsx     |  38 ++--
 .../table/chromatic/TreeGridTable.stories.tsx |  88 ++++----
 .../@react-spectrum/table/src/Resizer.tsx     |   6 +-
 .../table/src/TableViewBase.tsx               |   4 +-
 .../table/stories/CRUDExample.tsx             |   8 +-
 .../table/stories/ControllingResize.tsx       |   4 +-
 .../table/stories/HidingColumns.tsx           |   6 +-
 .../stories/HidingColumnsAllowsResizing.tsx   |   6 +-
 .../table/stories/Performance.tsx             |   4 +-
 .../table/stories/Table.stories.tsx           |  38 ++--
 .../table/stories/TableDnD.stories.tsx        |   2 +-
 .../table/stories/TableDnDExamples.tsx        |  24 +--
 .../table/stories/TableDnDUtil.stories.tsx    |   4 +-
 .../table/stories/TableDnDUtilExamples.tsx    |  22 +-
 .../table/stories/TreeGridTable.stories.tsx   | 189 ++++++++++--------
 .../table/test/TreeGridTable.test.tsx         |  19 +-
 16 files changed, 247 insertions(+), 215 deletions(-)

diff --git a/packages/@react-spectrum/table/chromatic/TableView.stories.tsx b/packages/@react-spectrum/table/chromatic/TableView.stories.tsx
index d8996665bc7..9b4f6352752 100644
--- a/packages/@react-spectrum/table/chromatic/TableView.stories.tsx
+++ b/packages/@react-spectrum/table/chromatic/TableView.stories.tsx
@@ -18,8 +18,8 @@ import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 let states = [
   {isQuiet: true},
@@ -111,7 +111,7 @@ let items = [
   {foo: 'Foo 5', bar: 'Baaaaaaaaaar 5', baz: 'Baz 1'}
 ];
 
-const Template = ({columns, items, ...args}) => (
+const Template = ({columns, items, ...args}: SpectrumTableProps<object> & {columns: any[], items: any[]}): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combinations.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -175,43 +175,45 @@ const EmptyTemplate = (args) =>
     </TableView>
   );
 
-export const Default = {
-  render: Template,
+export type TableViewStory = StoryObj<typeof Template>;
+
+export const Default: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'default items and columns',
   args: {columns, items}
 };
 
-export const ColumnAlign = {
-  render: Template,
+export const ColumnAlign: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'column alignment',
   args: {columns: alignColumns, items}
 };
 
-export const ColumnDividers = {
-  render: Template,
+export const ColumnDividers: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns dividers',
   args: {columns: dividerColumns, items}
 };
 
-export const ColumnWidth = {
-  render: Template,
+export const ColumnWidth: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns widths',
   args: {columns: customWidth, items}
 };
 
-export const HiddenColumns = {
-  render: Template,
+export const HiddenColumns: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'hidden columns',
   args: {columns: hiddenColumns, items}
 };
 
-export const NestedColumns = {
-  render: Template,
+export const NestedColumns: TableViewStory = {
+  render: (args) => <Template {...args} />,
   name: 'nested columns',
   args: {columns: nestedColumns, items}
 };
 
-export const MaxHeight = () => (
+export const MaxHeight: StoryFn<SpectrumTableProps<object>> = () => (
   <TableView maxHeight="size-1200">
     <TableHeader columns={columns}>
       {(column: any) => <Column key={column.key}>{column.name}</Column>}
@@ -222,8 +224,8 @@ export const MaxHeight = () => (
   </TableView>
 );
 
-export const Empty = {
-  render: EmptyTemplate,
+export const Empty: TableViewStory = {
+  render: (args) => <EmptyTemplate {...args} />,
   name: 'empty table',
   args: {}
 };
diff --git a/packages/@react-spectrum/table/chromatic/TreeGridTable.stories.tsx b/packages/@react-spectrum/table/chromatic/TreeGridTable.stories.tsx
index 885b03d5cf0..2c55e96363a 100644
--- a/packages/@react-spectrum/table/chromatic/TreeGridTable.stories.tsx
+++ b/packages/@react-spectrum/table/chromatic/TreeGridTable.stories.tsx
@@ -19,8 +19,8 @@ import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 enableTableNestedRows();
 
@@ -120,7 +120,7 @@ let nestedItems = [
   ]}
 ];
 
-const Template = ({combos, columns, items, ...args}) => (
+const Template = ({combos, columns, items, ...args}: SpectrumTableProps<object> & {combos: any[], columns: any[], items: any[]}): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combos.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -166,7 +166,7 @@ function renderEmptyState() {
   );
 }
 
-const EmptyTemplate = (args) =>
+const EmptyTemplate = (args: SpectrumTableProps<object>): JSX.Element =>
   (
     <TableView {...args} maxWidth={700} height={400} renderEmptyState={renderEmptyState} UNSTABLE_allowsExpandableRows>
       <TableHeader columns={columns}>
@@ -184,116 +184,118 @@ const EmptyTemplate = (args) =>
     </TableView>
   );
 
-export const Default = {
-  render: Template,
+export type TreeGridTableStory = StoryObj<typeof Template>;
+
+export const Default: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'default items and columns 1 of 3',
   args: {combos: combo1, columns, items: nestedItems}
 };
 
-export const DefaultPt2 = {
-  render: Template,
+export const DefaultPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'default items and columns 2 of 3',
   args: {combos: combo2, columns, items: nestedItems}
 };
 
-export const DefaultPt3 = {
-  render: Template,
+export const DefaultPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'default items and columns 3 of 3',
   args: {combos: combo3, columns, items: nestedItems}
 };
 
-export const ColumnAlign = {
-  render: Template,
+export const ColumnAlign: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'column alignment 1 of 3',
   args: {combos: combo1, columns: alignColumns, items: nestedItems}
 };
 
-export const ColumnAlignPt2 = {
-  render: Template,
+export const ColumnAlignPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'column alignment 2 of 3',
   args: {combos: combo2, columns: alignColumns, items: nestedItems}
 };
 
-export const ColumnAlignPt3 = {
-  render: Template,
+export const ColumnAlignPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'column alignment 3 of 3',
   args: {combos: combo3, columns: alignColumns, items: nestedItems}
 };
 
-export const ColumnDividers = {
-  render: Template,
+export const ColumnDividers: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns dividers 1 of 3',
   args: {combos: combo1, columns: dividerColumns, items: nestedItems}
 };
 
-export const ColumnDividersPt2 = {
-  render: Template,
+export const ColumnDividersPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns dividers 2 of 3',
   args: {combos: combo2, columns: dividerColumns, items: nestedItems}
 };
 
-export const ColumnDividersPt3 = {
-  render: Template,
+export const ColumnDividersPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns dividers 3 of 3',
   args: {combos: combo3, columns: dividerColumns, items: nestedItems}
 };
 
-export const ColumnWidth = {
-  render: Template,
+export const ColumnWidth: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns widths 1 of 3',
   args: {combos: combo1, columns: customWidth, items: nestedItems}
 };
 
-export const ColumnWidthPt2 = {
-  render: Template,
+export const ColumnWidthPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns widths 2 of 3',
   args: {combos: combo2, columns: customWidth, items: nestedItems}
 };
 
-export const ColumnWidthPt3 = {
-  render: Template,
+export const ColumnWidthPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'columns widths 3 of 3',
   args: {combos: combo3, columns: customWidth, items: nestedItems}
 };
 
-export const HiddenColumns = {
-  render: Template,
+export const HiddenColumns: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'hidden columns 1 of 3',
   args: {combos: combo1, columns: hiddenColumns, items: nestedItems}
 };
 
-export const HiddenColumnsPt2 = {
-  render: Template,
+export const HiddenColumnsPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'hidden columns 2 of 3',
   args: {combos: combo2, columns: hiddenColumns, items: nestedItems}
 };
 
-export const HiddenColumnsPt3 = {
-  render: Template,
+export const HiddenColumnsPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'hidden columns 3 of 3',
   args: {combos: combo3, columns: hiddenColumns, items: nestedItems}
 };
 
-export const NestedColumns = {
-  render: Template,
+export const NestedColumns: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'nested columns 1 of 3',
   args: {combos: combo1, columns: nestedColumns, items: nestedItems}
 };
 
-export const NestedColumnsPt2 = {
-  render: Template,
+export const NestedColumnsPt2: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'nested columns 2 of 3',
   args: {combos: combo2, columns: nestedColumns, items: nestedItems}
 };
 
-export const NestedColumnsPt3 = {
-  render: Template,
+export const NestedColumnsPt3: TreeGridTableStory = {
+  render: (args) => <Template {...args} />,
   name: 'nested columns 3 of 3',
   args: {combos: combo3, columns: nestedColumns, items: nestedItems}
 };
 
 
-export const MaxHeight = () => (
+export const MaxHeight: StoryFn<SpectrumTableProps<object>> = () => (
   <TableView maxHeight="size-1200" UNSTABLE_allowsExpandableRows>
     <TableHeader columns={columns}>
       {(column: any) => <Column key={column.key}>{column.name}</Column>}
@@ -304,8 +306,8 @@ export const MaxHeight = () => (
   </TableView>
 );
 
-export const Empty = {
-  render: EmptyTemplate,
+export const Empty: TreeGridTableStory = {
+  render: (args) => <EmptyTemplate {...args} />,
   name: 'empty table',
   args: {}
 };
diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx
index defc24868ea..2be334dab2a 100644
--- a/packages/@react-spectrum/table/src/Resizer.tsx
+++ b/packages/@react-spectrum/table/src/Resizer.tsx
@@ -46,9 +46,11 @@ const CURSORS = {
   e: getCursor(eCursor, 'e-resize')
 };
 
-export const ResizeStateContext = createContext<TableColumnResizeState<unknown> | null>(null);
+export const ResizeStateContext: React.Context<TableColumnResizeState<unknown> | null> = createContext<TableColumnResizeState<unknown> | null>(null);
 
-export const Resizer = React.forwardRef(function Resizer<T>(props: ResizerProps<T>, ref: ForwardedRef<HTMLInputElement | null>) {
+export const Resizer:
+  React.ForwardRefExoticComponent<ResizerProps<unknown> & React.RefAttributes<HTMLInputElement | null>> =
+React.forwardRef(function Resizer<T>(props: ResizerProps<T>, ref: ForwardedRef<HTMLInputElement | null>) {
   let {column, showResizer} = props;
   let objectRef = useObjectRef(ref);
   let {isEmpty, onFocusedResizer} = useTableContext();
diff --git a/packages/@react-spectrum/table/src/TableViewBase.tsx b/packages/@react-spectrum/table/src/TableViewBase.tsx
index 038742935f2..35334775f25 100644
--- a/packages/@react-spectrum/table/src/TableViewBase.tsx
+++ b/packages/@react-spectrum/table/src/TableViewBase.tsx
@@ -127,12 +127,12 @@ export interface TableContextValue<T> {
   renderEmptyState?: () => ReactElement
 }
 
-export const TableContext = React.createContext<TableContextValue<unknown> | null>(null);
+export const TableContext: React.Context<TableContextValue<unknown> | null> = React.createContext<TableContextValue<unknown> | null>(null);
 export function useTableContext(): TableContextValue<unknown> {
   return useContext(TableContext)!;
 }
 
-export const VirtualizerContext = React.createContext<{width: number, key: Key | null} | null>(null);
+export const VirtualizerContext: React.Context<{width: number, key: Key | null} | null> = React.createContext<{width: number, key: Key | null} | null>(null);
 export function useVirtualizerContext(): {
   width: number,
   key: Key | null
diff --git a/packages/@react-spectrum/table/stories/CRUDExample.tsx b/packages/@react-spectrum/table/stories/CRUDExample.tsx
index 8fa0b32e694..2b319dc0290 100644
--- a/packages/@react-spectrum/table/stories/CRUDExample.tsx
+++ b/packages/@react-spectrum/table/stories/CRUDExample.tsx
@@ -15,7 +15,7 @@ import {ActionGroup} from '@react-spectrum/actiongroup';
 import Add from '@spectrum-icons/workflow/Add';
 import {AlertDialog, Dialog, DialogContainer, useDialogContainer} from '@react-spectrum/dialog';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {Content} from '@react-spectrum/view';
 import Delete from '@spectrum-icons/workflow/Delete';
 import {Divider} from '@react-spectrum/divider';
@@ -27,11 +27,11 @@ import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {Key} from '@react-types/shared';
 import More from '@spectrum-icons/workflow/More';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import {TextField} from '@react-spectrum/textfield';
 import {useListData} from '@react-stately/data';
 
-export function CRUDExample(props) {
+export function CRUDExample(props: Omit<SpectrumTableProps<object>, 'children'>): JSX.Element {
   let list = useListData({
     initialItems: [
       {id: 1, firstName: 'Sam', lastName: 'Smith', birthday: 'May 3'},
@@ -50,7 +50,7 @@ export function CRUDExample(props) {
     <Flex direction="column">
       <ActionGroup marginBottom={8} onAction={action => setDialog({action})}>
         <Item key="add" aria-label="Add item"><Add /></Item>
-        {selectedCount > 0 
+        {selectedCount > 0
           ? <Item key="bulk-delete" aria-label="Delete selected items"><Delete /></Item>
           : null
         }
diff --git a/packages/@react-spectrum/table/stories/ControllingResize.tsx b/packages/@react-spectrum/table/stories/ControllingResize.tsx
index 0eb194beff6..4bcd4750a7e 100644
--- a/packages/@react-spectrum/table/stories/ControllingResize.tsx
+++ b/packages/@react-spectrum/table/stories/ControllingResize.tsx
@@ -14,7 +14,7 @@ import {Button} from '@react-spectrum/button';
 import {Cell, Column, Row, SpectrumColumnProps, TableBody, TableHeader, TableView} from '../';
 import {ColumnSize} from '@react-types/table';
 import {Key} from '@react-types/shared';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {JSX, useCallback, useMemo, useState} from 'react';
 
 export interface PokemonColumn extends Omit<SpectrumColumnProps<any>, 'children'> {
   name: string,
@@ -52,7 +52,7 @@ let defaultRows: PokemonData[] = [
   {id: 12, name: 'Pikachu', type: 'Electric', level: '100', weight: '13lbs', height: '1\'4"'}
 ];
 
-export function ControllingResize(props: {columns?: PokemonColumn[], rows?: PokemonData[], onResize?: (sizes: Map<Key, ColumnSize>) => void, [name: string]: any}) {
+export function ControllingResize(props: {columns?: PokemonColumn[], rows?: PokemonData[], onResize?: (sizes: Map<Key, ColumnSize>) => void, [name: string]: any}): JSX.Element {
   let {columns = defaultColumns, rows = defaultRows, onResize, ...otherProps} = props;
   let [widths, _setWidths] = useState<Map<Key, ColumnSize | null>>(() => new Map(columns.filter(col => col.width).map((col) => [col.uid as Key, col.width ?? null])));
 
diff --git a/packages/@react-spectrum/table/stories/HidingColumns.tsx b/packages/@react-spectrum/table/stories/HidingColumns.tsx
index 58a84582e2f..d44a85a49b7 100644
--- a/packages/@react-spectrum/table/stories/HidingColumns.tsx
+++ b/packages/@react-spectrum/table/stories/HidingColumns.tsx
@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
-import React from 'react';
+import React, {JSX} from 'react';
 
 let columns = [
   {key: 'planName', title: 'Plan Name'},
@@ -33,7 +33,7 @@ let data = [
   {id: 6, planName: 'Plan 6: $800k, MRI', audienceType: 'Demo+strategic', netBudget: '$800,000', targetOTP: '22.5%', reach: '11.5%'}
 ];
 
-export function HidingColumns(props) {
+export function HidingColumns(props: Omit<SpectrumTableProps<object>, 'children'>): JSX.Element {
   let [visibleColumns, setVisibleColumns] = React.useState(new Set(columns.map(c => c.key)));
   let toggleColumn = (key) => {
     let columns = new Set(visibleColumns);
diff --git a/packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx b/packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx
index d1264073b8a..7b042f4dcce 100644
--- a/packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx
+++ b/packages/@react-spectrum/table/stories/HidingColumnsAllowsResizing.tsx
@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
-import React from 'react';
+import React, {JSX} from 'react';
 
 let columns = [
   {key: 'planName', title: 'Plan Name'},
@@ -33,7 +33,7 @@ let data = [
   {id: 6, planName: 'Plan 6: $800k, MRI', audienceType: 'Demo+strategic', netBudget: '$800,000', targetOTP: '22.5%', reach: '11.5%'}
 ];
 
-export function HidingColumnsAllowsResizing(props) {
+export function HidingColumnsAllowsResizing(props: Omit<SpectrumTableProps<object>, 'children'>): JSX.Element {
   let [visibleColumns, setVisibleColumns] = React.useState(new Set(columns.map(c => c.key)));
   let toggleColumn = (key) => {
     let columns = new Set(visibleColumns);
diff --git a/packages/@react-spectrum/table/stories/Performance.tsx b/packages/@react-spectrum/table/stories/Performance.tsx
index 8d49f629c70..2331ced338c 100644
--- a/packages/@react-spectrum/table/stories/Performance.tsx
+++ b/packages/@react-spectrum/table/stories/Performance.tsx
@@ -6,7 +6,7 @@ import {Icon} from '@react-spectrum/icon';
 import {Item, TagGroup} from '@react-spectrum/tag';
 import {Link} from '@react-spectrum/link';
 import {ProgressBar} from '@react-spectrum/progress';
-import React from 'react';
+import React, {JSX} from 'react';
 import {SpectrumStatusLightProps} from '@react-types/statuslight';
 import {Text} from '@react-spectrum/text';
 
@@ -94,7 +94,7 @@ const getData = (rowNumber: number, columnNumber: number) => {
   };
 };
 
-export function Performance() {
+export function Performance(): JSX.Element {
   const {data, columns} = getData(DATA_SIZE, COLUMN_SIZE);
   return (
     <TableView
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 96020a918ae..26734f7f218 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -16,7 +16,6 @@ import Add from '@spectrum-icons/workflow/Add';
 import {Breadcrumbs, Item} from '@react-spectrum/breadcrumbs';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
 import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Content, View} from '@react-spectrum/view';
 import {ControllingResize, PokemonColumn} from './ControllingResize';
 import {CRUDExample} from './CRUDExample';
@@ -28,12 +27,13 @@ import {Heading} from '@react-spectrum/text';
 import {HidingColumns} from './HidingColumns';
 import {HidingColumnsAllowsResizing} from './HidingColumnsAllowsResizing';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Key, LoadingState} from '@react-types/shared';
+import {Key, LoadingState, SortDescriptor} from '@react-types/shared';
 import {Link} from '@react-spectrum/link';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import NoSearchResults from '@spectrum-icons/illustrations/NoSearchResults';
 import {Picker} from '@react-spectrum/picker';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React, {useCallback, useState} from 'react';
+import React, {JSX, useCallback, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
 import {Switch} from '@react-spectrum/switch';
 import {TextField} from '@react-spectrum/textfield';
@@ -123,9 +123,9 @@ export default {
       options: ['all', 'selection']
     }
   }
-} as ComponentMeta<typeof TableView>;
+} as Meta<typeof TableView>;
 
-export type TableStory = ComponentStoryObj<typeof TableView>;
+export type TableStory = StoryObj<Omit<typeof TableView, 'children'>>;
 
 
 // Known accessibility issue that will be caught by aXe: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#tableview
@@ -163,7 +163,7 @@ export let columns = [
   {name: 'Foo', key: 'foo'},
   {name: 'Bar', key: 'bar'},
   {name: 'Baz', key: 'baz'}
-];
+] as any[];
 
 let items = [
   {test: 'Test 1', foo: 'Foo 1', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
@@ -444,7 +444,9 @@ let timeTableRows = [
   {id: 6, time: '13:00 - 14:00', monday: 'History', tuesday: 'Math', wednesday: 'English', thursday: 'Science', friday: 'Art'}
 ];
 
-export const TableColSpanExample = () => {
+export type TableStoryFn = StoryFn<Omit<typeof TableView, 'children'>>;
+
+export const TableColSpanExample: TableStoryFn = () => {
   return (
     <TableView aria-label="Timetable">
       <TableHeader columns={timeTableColumns}>
@@ -474,7 +476,7 @@ export const TableColSpanExample = () => {
   );
 };
 
-export const TableCellColSpanWithVariousSpansExample = () => {
+export const TableCellColSpanWithVariousSpansExample: TableStoryFn = () => {
   return (
     <TableView aria-label="Table with various colspans">
       <TableHeader>
@@ -630,7 +632,7 @@ export const ManyColumnsAndRows: TableStory = {
   name: 'many columns and rows'
 };
 
-const TableViewFilledCellWidths = (props: SpectrumTableProps<unknown> & {allowsResizing: boolean}) => {
+const TableViewFilledCellWidths = (props: SpectrumTableProps<unknown> & {allowsResizing: boolean}): JSX.Element => {
   let {allowsResizing, ...otherProps} = props;
   return (
     <TableView {...otherProps}>
@@ -741,7 +743,7 @@ const TableViewFilledCellWidths = (props: SpectrumTableProps<unknown> & {allowsR
   );
 };
 
-export const ShouldFillCellWidth: ComponentStoryObj<typeof TableViewFilledCellWidths> = {
+export const ShouldFillCellWidth: StoryObj<typeof TableViewFilledCellWidths> = {
   args: {
     'aria-label': 'TableView with filled cells',
     width: 500,
@@ -861,7 +863,7 @@ export const CRUD: TableStory = {
   name: 'CRUD'
 };
 
-function DeletableRowsTable(props: SpectrumTableProps<unknown>) {
+function DeletableRowsTable(props: Omit<SpectrumTableProps<unknown>, 'children'>) {
   let list = useListData({
     initialItems: [
       {id: 1, firstName: 'Sam', lastName: 'Smith', birthday: 'May 3'},
@@ -1005,10 +1007,10 @@ function renderEmptyState() {
   );
 }
 
-export function EmptyStateTable(props) {
+export let EmptyStateTable = (props: Omit<SpectrumTableProps<unknown>, 'children'> & {items: any[], columns: any[], allowsSorting: boolean}): JSX.Element => {
   let {items, columns, allowsSorting, ...otherProps} = props;
   let [show, setShow] = useState(false);
-  let [sortDescriptor, setSortDescriptor] = useState({});
+  let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor | undefined>();
   return (
     <Flex direction="column">
       <ActionButton width="100px" onPress={() => setShow(show => !show)}>Toggle items</ActionButton>
@@ -1028,9 +1030,9 @@ export function EmptyStateTable(props) {
       </TableView>
     </Flex>
   );
-}
+};
 
-export const EmptyStateStory: TableStory = {
+export const EmptyStateStory: StoryObj<typeof EmptyStateTable> = {
   render: (args) => <EmptyStateTable {...args} />,
   name: 'renderEmptyState'
 };
@@ -2118,7 +2120,7 @@ export const TypeaheadWithDialog: TableStory = {
   )
 };
 
-export const Links = (args) => {
+export const Links: TableStoryFn = (args) => {
   return (
     <TableView {...args} aria-label="Bookmarks table" onSelectionChange={action('onSelectionChange')}>
       <TableHeader>
@@ -2152,7 +2154,7 @@ export const Links = (args) => {
   );
 };
 
-export const ColumnHeaderFocusRingTable = {
+export const ColumnHeaderFocusRingTable: StoryObj<typeof LoadingTable> = {
   render: () => <LoadingTable />,
   name: 'column header focus after loading',
   parameters: {
@@ -2167,7 +2169,7 @@ const allItems = [
   {key: 'julia', name: 'Julia', height: 70, birthday: 'February 10'}
 ];
 
-function LoadingTable() {
+function LoadingTable(): JSX.Element {
   const [items, setItems] = useState(allItems);
   const [loadingState, setLoadingState] = useState<LoadingState>('idle');
   const onSortChange = () => {
diff --git a/packages/@react-spectrum/table/stories/TableDnD.stories.tsx b/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
index 19d6b27c74b..389b04c17d4 100644
--- a/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnD.stories.tsx
@@ -91,7 +91,7 @@ export const DragWithinTable: TableStory = {
   name: 'Drag within table (Reorder)'
 };
 
-let manyItems: typeof items = [];
+let manyItems: Array<{id: string, first_name: string, last_name: string, email: string, ip_address: string, department: string, job_title: string}> = [];
 for (let i = 0; i < 100; i++) {
   manyItems.push({...items[i % 10], id: `${i}`});
 }
diff --git a/packages/@react-spectrum/table/stories/TableDnDExamples.tsx b/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
index 668ad84463a..cde0101e701 100644
--- a/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnDExamples.tsx
@@ -1,10 +1,10 @@
 
 import {action} from '@storybook/addon-actions';
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {chain} from '@react-aria/utils';
+import {DragEndEvent, DragStartEvent, DropEvent, ItemDropTarget, Key} from '@react-types/shared';
 import {Flex} from '@react-spectrum/layout';
-import {ItemDropTarget, Key} from '@react-types/shared';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useDragAndDrop} from '@react-spectrum/dnd';
 import {useListData} from '@react-stately/data';
@@ -40,11 +40,11 @@ export let items = [
   {id: 'h', first_name: 'Cathy', last_name: 'Lishman', email: 'clishman7@constantcontact.com', ip_address: '181.158.213.202', department: 'Research and Development', job_title: 'Assistant Professor'},
   {id: 'i', first_name: 'Enrika', last_name: 'Soitoux', email: 'esoitoux8@google.com.hk', ip_address: '51.244.20.173', department: 'Support', job_title: 'Teacher'},
   {id: 'j', first_name: 'Aloise', last_name: 'Tuxsell', email: 'atuxsell9@jigsy.com', ip_address: '253.46.84.168', department: 'Training', job_title: 'Financial Advisor'}
-];
+] as const;
 
 let getAllowedDropOperationsAction = action('getAllowedDropOperationsAction');
 
-export function DragExample(props?) {
+export function DragExample(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dragHookOptions?: any}): JSX.Element {
   let {tableViewProps, dragHookOptions} = props;
   let getItems = (keys) => [...keys].map(key => {
     let item = items.find(item => item.id === key)!;
@@ -78,7 +78,7 @@ export function DragExample(props?) {
   );
 }
 
-export function DragWithoutRowHeaderExample(props?)  {
+export function DragWithoutRowHeaderExample(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dragHookOptions?: any}): JSX.Element {
   let {tableViewProps, dragHookOptions} = props;
   let getItems = (keys) => [...keys].map(key => {
     let item = items.find(item => item.id === key)!;
@@ -112,10 +112,10 @@ export function DragWithoutRowHeaderExample(props?)  {
   );
 }
 
-export function ReorderExample(props) {
+export function ReorderExample(props: {onDrop?: (e: DropEvent) => void, onDragStart?: (e: DragStartEvent) => void, onDragEnd?: (e: DragEndEvent) => void, tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, items?: any[]}): JSX.Element {
   let {onDrop, onDragStart, onDragEnd, tableViewProps} = props;
   let list = useListData({
-    initialItems: (props.items as typeof items) || items,
+    initialItems: props.items || (items as unknown as any[]),
     getKey: item => item.id
   });
 
@@ -147,7 +147,7 @@ export function ReorderExample(props) {
     onDragStart: onDragStart,
     onDragEnd: onDragEnd,
     async onDrop(e) {
-      onDrop(e);
+      onDrop?.(e);
       if (e.target.type !== 'root' && e.target.dropPosition !== 'on') {
         let keys: Key[] = [];
         for (let item of e.items) {
@@ -192,7 +192,7 @@ export function ReorderExample(props) {
   );
 }
 
-export function DragOntoRowExample(props) {
+export function DragOntoRowExample(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dragHookOptions?: any, dropHookOptions?: {onDrop?: (e: DropEvent) => void}}): JSX.Element {
   let {
     tableViewProps = {},
     dragHookOptions = {},
@@ -328,7 +328,7 @@ let itemColumns = [
   {name: 'Name', key: 'name'}
 ];
 
-export function DragBetweenTablesExample(props) {
+export function DragBetweenTablesExample(props: {onDragStart?: (e: DragStartEvent) => void, onDragEnd?: (e: DragEndEvent) => void, onDrop?: (e: DropEvent) => void, tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, items1?: any[], items2?: any[]}): JSX.Element {
   let {onDragStart, onDragEnd, onDrop} = props;
   let onDropAction = chain(action('onDrop'), onDrop);
   onDragStart = chain(action('dragStart'), onDragStart);
@@ -449,7 +449,7 @@ export function DragBetweenTablesExample(props) {
   );
 }
 
-export function DragBetweenTablesRootOnlyExample(props) {
+export function DragBetweenTablesRootOnlyExample(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, items1?: any[], items2?: any[], dragHookOptions?: {onDragStart?: (e: DragStartEvent) => void, onDragEnd?: (e: DragEndEvent) => void}, dropHookOptions?: {onDrop?: (e: DropEvent) => void}}): JSX.Element {
   let {
     tableViewProps = {},
     dragHookOptions = {},
diff --git a/packages/@react-spectrum/table/stories/TableDnDUtil.stories.tsx b/packages/@react-spectrum/table/stories/TableDnDUtil.stories.tsx
index 993c452f0bd..03d65b615b9 100644
--- a/packages/@react-spectrum/table/stories/TableDnDUtil.stories.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnDUtil.stories.tsx
@@ -11,18 +11,18 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ComponentMeta} from '@storybook/react';
 import defaultConfig, {TableStory} from './Table.stories';
 import {DragBetweenTablesComplex, DragBetweenTablesOverride, DragExampleUtilHandlers, FinderDropUtilHandlers, InsertExampleUtilHandlers, ItemDropExampleUtilHandlers, ReorderExampleUtilHandlers, RootDropExampleUtilHandlers} from './TableDnDUtilExamples';
 import {Droppable} from '../../../@react-aria/dnd/stories/dnd.stories';
 import {Flex} from '@react-spectrum/layout';
+import {Meta} from '@storybook/react';
 import React from 'react';
 import {TableView} from '..';
 
 export default {
   ...defaultConfig,
   title: 'TableView/Drag and Drop/Util Handlers'
-} as ComponentMeta<typeof TableView>;
+} as Meta<typeof TableView>;
 
 // Known accessibility issue that will be caught by aXe: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#tableview
 export const DragOutOfTable: TableStory = {
diff --git a/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx b/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
index 62957cc62aa..dba902b9e1c 100644
--- a/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
+++ b/packages/@react-spectrum/table/stories/TableDnDUtilExamples.tsx
@@ -1,9 +1,9 @@
 
 import {action} from '@storybook/addon-actions';
-import {Cell, Column, Row, TableBody, TableHeader, TableView} from '..';
-import {DIRECTORY_DRAG_TYPE, useDragAndDrop} from '@react-spectrum/dnd';
+import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '..';
+import {DIRECTORY_DRAG_TYPE, DragAndDropOptions, useDragAndDrop} from '@react-spectrum/dnd';
 import {Flex} from '@react-spectrum/layout';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useListData} from '@react-stately/data';
 
@@ -55,7 +55,7 @@ let columns = [
     {name: 'Type', key: 'type'}
 ];
 
-export function DragExampleUtilHandlers(props) {
+export function DragExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dndOptions?: DragAndDropOptions} = {}): JSX.Element {
   let {tableViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -91,7 +91,7 @@ export function DragExampleUtilHandlers(props) {
   );
 }
 
-export function ReorderExampleUtilHandlers(props) {
+export function ReorderExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dndOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -160,7 +160,7 @@ export function ReorderExampleUtilHandlers(props) {
   );
 }
 
-export function ItemDropExampleUtilHandlers(props) {
+export function ItemDropExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, dndOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, dndOptions} = props;
   let list = useListData({
     initialItems: folderList1,
@@ -216,7 +216,7 @@ export function ItemDropExampleUtilHandlers(props) {
   );
 }
 
-export function RootDropExampleUtilHandlers(props) {
+export function RootDropExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, firstTableDnDOptions, secondTableDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -297,7 +297,7 @@ export function RootDropExampleUtilHandlers(props) {
   );
 }
 
-export function InsertExampleUtilHandlers(props) {
+export function InsertExampleUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, firstTableDnDOptions, secondTableDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -387,7 +387,7 @@ export function InsertExampleUtilHandlers(props) {
   );
 }
 
-export function FinderDropUtilHandlers(props) {
+export function FinderDropUtilHandlers(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, firstTableDnDOptions, secondTableDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -456,7 +456,7 @@ export function FinderDropUtilHandlers(props) {
   );
 }
 
-export function DragBetweenTablesComplex(props) {
+export function DragBetweenTablesComplex(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let {tableViewProps, firstTableDnDOptions, secondTableDnDOptions} = props;
   let list1 = useListData({
     initialItems: folderList1,
@@ -668,7 +668,7 @@ export function DragBetweenTablesComplex(props) {
   );
 }
 
-export function DragBetweenTablesOverride(props) {
+export function DragBetweenTablesOverride(props: {tableViewProps?: Omit<SpectrumTableProps<unknown>, 'children'>, firstTableDnDOptions?: DragAndDropOptions, secondTableDnDOptions?: DragAndDropOptions}): JSX.Element {
   let list1 = useListData({
     initialItems: [
       {identifier: '1', type: 'file', name: 'Adobe Photoshop'},
diff --git a/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx b/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
index 424bbe7f357..35c077d1c75 100644
--- a/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
+++ b/packages/@react-spectrum/table/stories/TreeGridTable.stories.tsx
@@ -14,20 +14,59 @@ import {action} from '@storybook/addon-actions';
 import {ActionButton} from '@react-spectrum/button';
 import {Cell, Column, Row, SpectrumTableProps, TableBody, TableHeader, TableView} from '../';
 import {chain} from '@react-aria/utils';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import defaultConfig, {columns, EmptyStateTable, TableStory} from './Table.stories';
 import {enableTableNestedRows} from '@react-stately/flags';
 import {Flex} from '@react-spectrum/layout';
 import {Key} from '@react-types/shared';
-import React, {useState} from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX, useState} from 'react';
 
 enableTableNestedRows();
 
 export default {
   ...defaultConfig,
-  title: 'TableView/Expandable rows'
-} as ComponentMeta<typeof TableView>;
+  title: 'TableView/Expandable rows',
+  excludeStories: [
+    'StaticExpandableRowsRender',
+    'DynamicExpandableRowsStoryRender',
+    'UserSetRowHeaderRender',
+    'ManyExpandableRowsStoryRender',
+    'EmptyTreeGridStoryRender',
+    'LoadingTreeGridStoryRender'
+  ]
+} as Meta<typeof TableView>;
 
+export const StaticExpandableRowsRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <TableView aria-label="TableView with static expandable rows" width={500} height={200} UNSTABLE_defaultExpandedKeys={['row 1']} UNSTABLE_allowsExpandableRows UNSTABLE_onExpandedChange={action('onExpandedChange')} {...args}>
+    <TableHeader>
+      <Column key="foo">Foo</Column>
+      <Column key="bar">Bar</Column>
+      <Column key="baz">Baz</Column>
+    </TableHeader>
+    <TableBody>
+      <Row key="row 1">
+        <Cell>Lvl 1 Foo 1</Cell>
+        <Cell>Lvl 1 Bar 1</Cell>
+        <Cell> Lvl 1 Baz 1</Cell>
+        <Row key="child row 1 level 2">
+          <Cell>Lvl 2 Foo 1</Cell>
+          <Cell>Lvl 2 Bar 1</Cell>
+          <Cell>Lvl 2 Baz 1</Cell>
+          <Row key="child row 1 level 3">
+            <Cell>Lvl 3 Foo 1</Cell>
+            <Cell>Lvl 3 Bar 1</Cell>
+            <Cell>Lvl 3 Baz 1</Cell>
+          </Row>
+        </Row>
+        <Row key="child row 2 level 2">
+          <Cell>Lvl 2 Foo 2</Cell>
+          <Cell>Lvl 2 Bar 2</Cell>
+          <Cell>Lvl 2 Baz 2</Cell>
+        </Row>
+      </Row>
+    </TableBody>
+  </TableView>
+);
 // Known accessibility issue that will be caught by aXe: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#tableview
 export const StaticExpandableRows: TableStory = {
   args: {
@@ -35,37 +74,7 @@ export const StaticExpandableRows: TableStory = {
     width: 500,
     height: 200
   },
-  render: (args) => (
-    <TableView UNSTABLE_defaultExpandedKeys={['row 1']} UNSTABLE_allowsExpandableRows UNSTABLE_onExpandedChange={action('onExpandedChange')} {...args}>
-      <TableHeader>
-        <Column key="foo">Foo</Column>
-        <Column key="bar">Bar</Column>
-        <Column key="baz">Baz</Column>
-      </TableHeader>
-      <TableBody>
-        <Row key="row 1">
-          <Cell>Lvl 1 Foo 1</Cell>
-          <Cell>Lvl 1 Bar 1</Cell>
-          <Cell> Lvl 1 Baz 1</Cell>
-          <Row key="child row 1 level 2">
-            <Cell>Lvl 2 Foo 1</Cell>
-            <Cell>Lvl 2 Bar 1</Cell>
-            <Cell>Lvl 2 Baz 1</Cell>
-            <Row key="child row 1 level 3">
-              <Cell>Lvl 3 Foo 1</Cell>
-              <Cell>Lvl 3 Bar 1</Cell>
-              <Cell>Lvl 3 Baz 1</Cell>
-            </Row>
-          </Row>
-          <Row key="child row 2 level 2">
-            <Cell>Lvl 2 Foo 2</Cell>
-            <Cell>Lvl 2 Bar 2</Cell>
-            <Cell>Lvl 2 Baz 2</Cell>
-          </Row>
-        </Row>
-      </TableBody>
-    </TableView>
-  ),
+  render: (args) => <StaticExpandableRowsRender {...args} />,
   name: 'static with expandable rows'
 };
 
@@ -78,7 +87,7 @@ let nestedItems = [
   ]}
 ];
 
-function DynamicExpandableRows(props: SpectrumTableProps<unknown>) {
+function DynamicExpandableRows(props: Omit<SpectrumTableProps<unknown>, 'children'>) {
   let [expandedKeys, setExpandedKeys] = useState<'all' | Set<Key>>('all');
 
   return (
@@ -105,55 +114,65 @@ function DynamicExpandableRows(props: SpectrumTableProps<unknown>) {
   );
 }
 
+export const DynamicExpandableRowsStoryRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <DynamicExpandableRows aria-label="TableView with dynamic expandable rows" width={500} height={400} {...args} />
+);
+
 export const DynamicExpandableRowsStory: TableStory = {
   args: {
     'aria-label': 'TableView with dynamic expandable rows',
     width: 500,
     height: 400
   },
-  render: (args) => (
-    <DynamicExpandableRows {...args} />
-  ),
+  render: (args) => <DynamicExpandableRowsStoryRender {...args} />,
   name: 'dynamic with expandable rows'
 };
 
+export const UserSetRowHeaderRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <TableView
+    UNSTABLE_allowsExpandableRows
+    UNSTABLE_onExpandedChange={action('onExpandedChange')}
+    aria-label="TableView with expandable rows and multiple row headers"
+    width={500}
+    height={400}
+    {...args}>
+    <TableHeader>
+      <Column key="foo" allowsResizing>Foo</Column>
+      <Column isRowHeader allowsResizing key="bar">Bar</Column>
+      <Column isRowHeader key="baz" allowsResizing>Baz</Column>
+    </TableHeader>
+    <TableBody>
+      <Row key="test">
+        <Cell>Lvl 1 Foo 1</Cell>
+        <Cell>Lvl 1 Bar 1</Cell>
+        <Cell>Lvl 1 Baz 1</Cell>
+        <Row>
+          <Cell>Lvl 2 Foo 1</Cell>
+          <Cell>Lvl 2 Bar 1</Cell>
+          <Cell>Lvl 2 Baz 1</Cell>
+          <Row>
+            <Cell>Lvl 3 Foo 1</Cell>
+            <Cell>Lvl 3 Bar 1</Cell>
+            <Cell>Lvl 3 Baz 1</Cell>
+          </Row>
+        </Row>
+        <Row>
+          <Cell>Lvl 2 Foo 2</Cell>
+          <Cell>Lvl 2 Bar 2</Cell>
+          <Cell>Lvl 2 Baz 2</Cell>
+        </Row>
+      </Row>
+    </TableBody>
+  </TableView>
+);
+
 export const UserSetRowHeader: TableStory = {
   args: {
     'aria-label': 'TableView with expandable rows and multiple row headers',
     width: 500,
     height: 400
   },
-  render: (args) => (
-    <TableView UNSTABLE_allowsExpandableRows UNSTABLE_onExpandedChange={action('onExpandedChange')} {...args}>
-      <TableHeader>
-        <Column key="foo" allowsResizing>Foo</Column>
-        <Column isRowHeader allowsResizing key="bar">Bar</Column>
-        <Column isRowHeader key="baz" allowsResizing>Baz</Column>
-      </TableHeader>
-      <TableBody>
-        <Row key="test">
-          <Cell>Lvl 1 Foo 1</Cell>
-          <Cell>Lvl 1 Bar 1</Cell>
-          <Cell>Lvl 1 Baz 1</Cell>
-          <Row>
-            <Cell>Lvl 2 Foo 1</Cell>
-            <Cell>Lvl 2 Bar 1</Cell>
-            <Cell>Lvl 2 Baz 1</Cell>
-            <Row>
-              <Cell>Lvl 3 Foo 1</Cell>
-              <Cell>Lvl 3 Bar 1</Cell>
-              <Cell>Lvl 3 Baz 1</Cell>
-            </Row>
-          </Row>
-          <Row>
-            <Cell>Lvl 2 Foo 2</Cell>
-            <Cell>Lvl 2 Bar 2</Cell>
-            <Cell>Lvl 2 Baz 2</Cell>
-          </Row>
-        </Row>
-      </TableBody>
-    </TableView>
-  ),
+  render: (args) => <UserSetRowHeaderRender {...args} />,
   name: 'multiple user set row headers',
   parameters: {
     description: {
@@ -179,17 +198,21 @@ function generateRows(count = 5) {
   for (let i = 1; i <= count; i++) {
     let row = generateRow(1, 3, i);
     manyRows.push(row);
-  }  
+  }
   return manyRows;
 }
 
-interface ManyExpandableRowsProps extends SpectrumTableProps<unknown> {
+interface ManyExpandableRowsProps extends Omit<SpectrumTableProps<unknown>, 'children'> {
   allowsResizing?: boolean,
   showDivider?: boolean,
   rowCount?: number
 }
 
-function ManyExpandableRows(props: ManyExpandableRowsProps) {
+export const ManyExpandableRowsStoryRender = (args: ManyExpandableRowsProps): JSX.Element => (
+  <ManyExpandableRows aria-label="TableView with many dynamic expandable rows" width={500} height={400} rowCount={5} {...args} />
+);
+
+function ManyExpandableRows(props: ManyExpandableRowsProps): JSX.Element {
   let {allowsResizing, showDivider, ...otherProps} = props;
   let [expandedKeys, setExpandedKeys] = useState<'all' | Set<Key>>('all');
   let manyRows = generateRows(props.rowCount ?? 5);
@@ -216,7 +239,7 @@ function ManyExpandableRows(props: ManyExpandableRowsProps) {
   );
 }
 
-export const ManyExpandableRowsStory: ComponentStoryObj<typeof ManyExpandableRows> = {
+export const ManyExpandableRowsStory: StoryObj<typeof ManyExpandableRows> = {
   args: {
     'aria-label': 'TableView with many dynamic expandable rows',
     width: 500,
@@ -224,20 +247,22 @@ export const ManyExpandableRowsStory: ComponentStoryObj<typeof ManyExpandableRow
     rowCount: 5
   },
   render: (args) => (
-    <ManyExpandableRows {...args} />
+    <ManyExpandableRowsStoryRender {...args} />
   ),
   name: 'many expandable rows'
 };
 
+export const EmptyTreeGridStoryRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <EmptyStateTable UNSTABLE_allowsExpandableRows selectionMode="none" columns={columns} items={generateRows()} allowsSorting={false} width={500} height={400} {...args} />
+);
+
 export const EmptyTreeGridStory: TableStory = {
   args: {
     'aria-label': 'TableView with empty state',
     width: 500,
     height: 400
   },
-  render: (args) => (
-    <EmptyStateTable UNSTABLE_allowsExpandableRows selectionMode="none" columns={columns} items={generateRows()} allowsSorting={false} onSortChange={null} sortDescriptor={null} {...args} />
-  ),
+  render: (args) => <EmptyTreeGridStoryRender {...args} />,
   name: 'empty state'
 };
 
@@ -263,15 +288,17 @@ function LoadingStateTable(props) {
   );
 }
 
+export const LoadingTreeGridStoryRender = (args: Omit<SpectrumTableProps<unknown>, 'children'>): JSX.Element => (
+  <LoadingStateTable aria-label="TableView with loading" width={500} height={400} {...args} />
+);
+
 export const LoadingTreeGridStory: TableStory = {
   args: {
     'aria-label': 'TableView with loading',
     width: 500,
     height: 400
   },
-  render: (args) => (
-    <LoadingStateTable {...args} />
-  ),
+  render: (args) => <LoadingTreeGridStoryRender {...args} />,
   name: 'isLoading'
 };
 
diff --git a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
index 1788b3f1ede..7b5eb4b1914 100644
--- a/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
+++ b/packages/@react-spectrum/table/test/TreeGridTable.test.tsx
@@ -21,25 +21,22 @@ import {
   within
 } from '@react-spectrum/test-utils-internal';
 import {announce} from '@react-aria/live-announcer';
-import {composeStories} from '@storybook/react';
+import {
+  DynamicExpandableRowsStoryRender as DynamicExpandableTable,
+  EmptyTreeGridStoryRender as EmptyStateTable,
+  LoadingTreeGridStoryRender as LoadingTable,
+  ManyExpandableRowsStoryRender as ManyRowsExpandableTable,
+  StaticExpandableRowsRender as StaticExpandableTable,
+  UserSetRowHeaderRender as UserSetRowHeaderTable
+} from '../stories/TreeGridTable.stories';
 import {enableTableNestedRows} from '@react-stately/flags';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {Scale} from '@react-types/provider';
 import {scrollIntoView} from '@react-aria/utils';
-import * as stories from '../stories/TreeGridTable.stories';
 import {theme} from '@react-spectrum/theme-default';
 import userEvent from '@testing-library/user-event';
 
-let {
-  StaticExpandableRows: StaticExpandableTable,
-  DynamicExpandableRowsStory: DynamicExpandableTable,
-  ManyExpandableRowsStory: ManyRowsExpandableTable,
-  EmptyTreeGridStory: EmptyStateTable,
-  LoadingTreeGridStory: LoadingTable,
-  UserSetRowHeader: UserSetRowHeaderTable
-} = composeStories(stories);
-
 let onSelectionChange = jest.fn();
 let onExpandedChange = jest.fn();
 let onAction = jest.fn();

From 07ff2e8d47756450f6659418fc7fdec99c76c0f6 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 16:17:51 +1000
Subject: [PATCH 16/19] tabs, text, textfield, toast, tooltip

---
 .../tabs/stories/Tabs.stories.tsx             | 81 ++++++++++---------
 packages/@react-spectrum/text/src/Heading.tsx |  6 +-
 .../@react-spectrum/text/src/Keyboard.tsx     |  6 +-
 packages/@react-spectrum/text/src/Text.tsx    |  6 +-
 .../textfield/chromatic/TextArea.stories.tsx  | 49 +++++------
 .../chromatic/TextAreaLanguages.stories.tsx   | 10 ++-
 .../textfield/chromatic/Textfield.stories.tsx | 47 ++++++-----
 .../chromatic/TextfieldLanguages.stories.tsx  | 11 ++-
 .../textfield/src/TextArea.tsx                |  4 +-
 .../textfield/src/TextField.tsx               |  4 +-
 .../textfield/src/TextFieldBase.tsx           |  4 +-
 .../textfield/stories/TextArea.stories.tsx    | 43 +++++-----
 .../textfield/stories/Textfield.stories.tsx   |  8 +-
 .../toast/chromatic/Toast.stories.tsx         | 25 +++---
 packages/@react-spectrum/toast/src/Toast.tsx  | 14 ++--
 .../@react-spectrum/toast/src/Toaster.tsx     |  2 +-
 .../toast/stories/Toast.stories.tsx           | 35 ++++----
 .../@react-spectrum/tooltip/src/Tooltip.tsx   |  6 +-
 .../@react-spectrum/tooltip/src/context.ts    |  4 +-
 19 files changed, 203 insertions(+), 162 deletions(-)

diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
index ebc359adeea..40ee193491a 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
@@ -19,6 +19,7 @@ import Calendar from '@spectrum-icons/workflow/Calendar';
 import Dashboard from '@spectrum-icons/workflow/Dashboard';
 import {Item, TabList, TabPanels, Tabs} from '..';
 import {Key} from '@react-types/shared';
+import {Meta, StoryFn} from '@storybook/react';
 import {Picker} from '@react-spectrum/picker';
 import React, {ReactNode, useCallback, useState} from 'react';
 import {RouterProvider} from '@react-aria/utils';
@@ -27,128 +28,130 @@ import {TextField} from '@react-spectrum/textfield';
 
 export default {
   title: 'Tabs'
-};
+} as Meta<typeof Tabs>;
+
+export type TabsStory = StoryFn<typeof Tabs>;
 
-export const Default = () => render();
-export const WithFalsyItemKey = () => renderWithFalsyKey();
+export const Default: TabsStory = () => render();
+export const WithFalsyItemKey: TabsStory = () => renderWithFalsyKey();
 
 WithFalsyItemKey.story = {
   name: 'with falsy item key'
 };
 
-export const DefaultSelectedKeyVal2 = () => render({defaultSelectedKey: 'val2'});
+export const DefaultSelectedKeyVal2: TabsStory = () => render({defaultSelectedKey: 'val2'});
 
 DefaultSelectedKeyVal2.story = {
   name: 'defaultSelectedKey: val2'
 };
 
-export const ControlledSelectedKeyVal3 = () => render({selectedKey: 'val3'});
+export const ControlledSelectedKeyVal3: TabsStory = () => render({selectedKey: 'val3'});
 
 ControlledSelectedKeyVal3.story = {
   name: 'controlled: selectedKey: val3'
 };
 
-export const OrientationVertical = () => render({orientation: 'vertical'});
+export const OrientationVertical: TabsStory = () => render({orientation: 'vertical'});
 
 OrientationVertical.story = {
   name: 'orientation: vertical'
 };
 
-export const DensityCompact = () => render({density: 'compact'});
+export const DensityCompact: TabsStory = () => render({density: 'compact'});
 
 DensityCompact.story = {
   name: 'density: compact'
 };
 
-export const IsQuiet = () => render({isQuiet: true});
+export const IsQuiet: TabsStory = () => render({isQuiet: true});
 
 IsQuiet.story = {
   name: 'isQuiet'
 };
 
-export const IsQuietDensityCompact = () => render({isQuiet: true, density: 'compact'});
+export const IsQuietDensityCompact: TabsStory = () => render({isQuiet: true, density: 'compact'});
 
 IsQuietDensityCompact.story = {
   name: 'isQuiet, density: compact'
 };
 
-export const DensityCompactOrientationVertical = () =>
+export const DensityCompactOrientationVertical: TabsStory = () =>
   render({density: 'compact', orientation: 'vertical'});
 
 DensityCompactOrientationVertical.story = {
   name: 'density: compact, orientation: vertical'
 };
 
-export const Icons = () => renderWithIcons();
+export const Icons: TabsStory = () => renderWithIcons();
 
 Icons.story = {
   name: 'icons'
 };
 
-export const IconsDensityCompact = () => renderWithIcons({density: 'compact'});
+export const IconsDensityCompact: TabsStory = () => renderWithIcons({density: 'compact'});
 
 IconsDensityCompact.story = {
   name: 'icons, density: compact'
 };
 
-export const IconsOrientationVertical = () => renderWithIcons({orientation: 'vertical'});
+export const IconsOrientationVertical: TabsStory = () => renderWithIcons({orientation: 'vertical'});
 
 IconsOrientationVertical.story = {
   name: 'icons, orientation: vertical'
 };
 
-export const IconsDensityCompactOrientationVertical = () =>
+export const IconsDensityCompactOrientationVertical: TabsStory = () =>
   renderWithIcons({orientation: 'vertical', density: 'compact'});
 
 IconsDensityCompactOrientationVertical.story = {
   name: 'icons, density: compact, orientation: vertical'
 };
 
-export const IsEmphasizedTrue = () => render({isEmphasized: true});
+export const IsEmphasizedTrue: TabsStory = () => render({isEmphasized: true});
 
 IsEmphasizedTrue.story = {
   name: 'isEmphasized: true'
 };
 
-export const IsEmphasizedTrueIconsIsQuietTrue = () =>
+export const IsEmphasizedTrueIconsIsQuietTrue: TabsStory = () =>
   renderWithIcons({isEmphasized: true, isQuiet: true});
 
 IsEmphasizedTrueIconsIsQuietTrue.story = {
   name: 'isEmphasized: true, icons, isQuiet: true'
 };
 
-export const IsEmphasizedTrueOrientationVertical = () =>
+export const IsEmphasizedTrueOrientationVertical: TabsStory = () =>
   render({isEmphasized: true, orientation: 'vertical'});
 
 IsEmphasizedTrueOrientationVertical.story = {
   name: 'isEmphasized: true, orientation: vertical'
 };
 
-export const DisableAllTabs = () => render({isDisabled: true});
+export const DisableAllTabs: TabsStory = () => render({isDisabled: true});
 
 DisableAllTabs.story = {
   name: 'disable all tabs'
 };
 
-export const KeyboardActivationManual = () => render({keyboardActivation: 'manual'});
+export const KeyboardActivationManual: TabsStory = () => render({keyboardActivation: 'manual'});
 
 KeyboardActivationManual.story = {
   name: 'keyboardActivation: manual'
 };
 
-export const MiddleDisabled = () => render({disabledKeys: ['val2']});
+export const MiddleDisabled: TabsStory = () => render({disabledKeys: ['val2']});
 
 MiddleDisabled.story = {
   name: 'middle disabled'
 };
 
-export const AllDisabled = () => render({disabledKeys: ['val1', 'val2', 'val3', 'val4', 'val5']});
+export const AllDisabled: TabsStory = () => render({disabledKeys: ['val1', 'val2', 'val3', 'val4', 'val5']});
 
 AllDisabled.story = {
   name: 'all disabled'
 };
 
-export const Resizeable = () => (
+export const Resizeable: TabsStory = () => (
   <div
     style={{
       minWidth: '100px',
@@ -167,25 +170,25 @@ Resizeable.story = {
   name: 'resizeable'
 };
 
-export const CollapseBehavior = () => <DynamicTabs />;
+export const CollapseBehavior: TabsStory = () => <DynamicTabs />;
 
 CollapseBehavior.story = {
   name: 'collapse behavior'
 };
 
-export const CollapseBehaviorIsQuiet = () => <DynamicTabs isQuiet />;
+export const CollapseBehaviorIsQuiet: TabsStory = () => <DynamicTabs isQuiet />;
 
 CollapseBehaviorIsQuiet.story = {
   name: 'collapse behavior, isQuiet'
 };
 
-export const CollapseBehaviorDensityCompact = () => <DynamicTabs density="compact" />;
+export const CollapseBehaviorDensityCompact: TabsStory = () => <DynamicTabs density="compact" />;
 
 CollapseBehaviorDensityCompact.story = {
   name: 'collapse behavior, density: compact'
 };
 
-export const CollapseBehaviorDensityCompactIsQuiet = () => (
+export const CollapseBehaviorDensityCompactIsQuiet: TabsStory = () => (
   <DynamicTabs isQuiet density="compact" />
 );
 
@@ -193,19 +196,19 @@ CollapseBehaviorDensityCompactIsQuiet.story = {
   name: 'collapse behavior, density: compact, isQuiet'
 };
 
-export const CollapseBehaviorIsEmphasizedTrue = () => <DynamicTabs isEmphasized />;
+export const CollapseBehaviorIsEmphasizedTrue: TabsStory = () => <DynamicTabs isEmphasized />;
 
 CollapseBehaviorIsEmphasizedTrue.story = {
   name: 'collapse behavior, isEmphasized: true'
 };
 
-export const _OrientationFlip = () => <OrientationFlip />;
+export const _OrientationFlip: TabsStory = () => <OrientationFlip />;
 
 _OrientationFlip.story = {
   name: 'orientation flip'
 };
 
-export const TestingTabsInFlex = () => (
+export const TestingTabsInFlex: TabsStory = () => (
   <Flex
     minHeight={400}
     minWidth={400}
@@ -232,7 +235,7 @@ TestingTabsInFlex.story = {
   name: 'testing: tabs in flex'
 };
 
-export const TransitionBetweenTabSizes = () => (
+export const TransitionBetweenTabSizes: TabsStory = () => (
   <Tabs maxWidth={500}>
     <TabList>
       <Item>
@@ -253,13 +256,13 @@ TransitionBetweenTabSizes.story = {
   name: 'transition between tab sizes'
 };
 
-export const TabWithFlexContainerInBetween = () => <DynamicTabsWithDecoration />;
+export const TabWithFlexContainerInBetween: TabsStory = () => <DynamicTabsWithDecoration />;
 
 TabWithFlexContainerInBetween.story = {
   name: 'Tab with flex container in between'
 };
 
-export const TabsAtTheBottom = () => (
+export const TabsAtTheBottom: TabsStory = () => (
   <Tabs maxWidth={500}>
     <TabPanels height="size-1000">
       <Item>Text 1</Item>
@@ -276,7 +279,7 @@ TabsAtTheBottom.story = {
   name: 'tabs at the bottom'
 };
 
-export const TabsOnTheRight = () => (
+export const TabsOnTheRight: TabsStory = () => (
   <Tabs maxWidth={500} orientation="vertical">
     <TabPanels>
       <Item>Text 1</Item>
@@ -293,7 +296,7 @@ TabsOnTheRight.story = {
   name: 'tabs on the right'
 };
 
-export const FocusableElementInTabPanel = () => (
+export const FocusableElementInTabPanel: TabsStory = () => (
   <Tabs maxWidth={500}>
     <TabList>
       <Item>Tab 1</Item>
@@ -314,7 +317,7 @@ FocusableElementInTabPanel.story = {
   name: 'focusable element in tab panel'
 };
 
-export const Tab1ControlledChild = () => {
+export const Tab1ControlledChild: TabsStory = () => {
   let [tab1Text, setTab1Text] = useState('');
 
   return (
@@ -339,7 +342,7 @@ Tab1ControlledChild.story = {
   name: 'Tab 1 controlled child'
 };
 
-export const ChangingTabTitles = () => {
+export const ChangingTabTitles: TabsStory = () => {
   let [tab1Text, setTab1Text] = useState('Tab 1');
   let [tab2Text, setTab2Text] = useState('Tab 2');
 
@@ -365,13 +368,13 @@ ChangingTabTitles.story = {
   name: 'changing tab titles'
 };
 
-export const ChangingSelectionProgramatically = () => <ControlledSelection />;
+export const ChangingSelectionProgramatically: TabsStory = () => <ControlledSelection />;
 
 ChangingSelectionProgramatically.story = {
   name: 'changing selection programatically'
 };
 
-export const Links = (args) => {
+export const Links: StoryFn<SpectrumTabsProps<unknown> & {collapsed?: boolean}> = (args) => {
   let [url, setUrl] = useState('/one');
 
   return (
@@ -402,7 +405,7 @@ Links.story = {
   }
 };
 
-export const Nested = (props) => {
+export const Nested: TabsStory = (props) => {
   return (
     <Tabs aria-label="Some tabs" width={'500px'} {...props} >
       <TabList>
diff --git a/packages/@react-spectrum/text/src/Heading.tsx b/packages/@react-spectrum/text/src/Heading.tsx
index 610c84048a6..13bd4153b46 100644
--- a/packages/@react-spectrum/text/src/Heading.tsx
+++ b/packages/@react-spectrum/text/src/Heading.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext, useContextProps} from 'react-aria-components';
 import {HeadingProps} from '@react-types/text';
@@ -20,7 +20,9 @@ import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 /**
  * Heading is used to create various levels of typographic hierarchies.
  */
-export const Heading = forwardRef(function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
+export const Heading:
+  React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<DOMRefValue<HTMLHeadingElement>>> =
+forwardRef(function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   let domRef = useDOMRef(ref);
   props = useSlotProps(props, 'heading');
   [props, domRef] = useContextProps(props, domRef, HeadingContext);
diff --git a/packages/@react-spectrum/text/src/Keyboard.tsx b/packages/@react-spectrum/text/src/Keyboard.tsx
index bcb4d49c899..33f956f70f4 100644
--- a/packages/@react-spectrum/text/src/Keyboard.tsx
+++ b/packages/@react-spectrum/text/src/Keyboard.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {KeyboardProps} from '@react-types/text';
 import React, {forwardRef} from 'react';
@@ -19,7 +19,9 @@ import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 /**
  * Keyboard represents text that specifies a keyboard command.
  */
-export const Keyboard = forwardRef(function Keyboard(props: KeyboardProps, ref: DOMRef) {
+export const Keyboard:
+  React.ForwardRefExoticComponent<KeyboardProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Keyboard(props: KeyboardProps, ref: DOMRef) {
   props = useSlotProps(props, 'keyboard');
   let {
     children,
diff --git a/packages/@react-spectrum/text/src/Text.tsx b/packages/@react-spectrum/text/src/Text.tsx
index 1e763a59d7b..92e6f8a9dc0 100644
--- a/packages/@react-spectrum/text/src/Text.tsx
+++ b/packages/@react-spectrum/text/src/Text.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {TextProps} from '@react-types/text';
@@ -19,7 +19,9 @@ import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 /**
  * Text represents text with no specific semantic meaning.
  */
-export const Text = forwardRef(function Text(props: TextProps, ref: DOMRef) {
+export const Text:
+  React.ForwardRefExoticComponent<TextProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Text(props: TextProps, ref: DOMRef) {
   props = useSlotProps(props, 'text');
   let {
     children,
diff --git a/packages/@react-spectrum/textfield/chromatic/TextArea.stories.tsx b/packages/@react-spectrum/textfield/chromatic/TextArea.stories.tsx
index 51f47ed84f0..1953190ac29 100644
--- a/packages/@react-spectrum/textfield/chromatic/TextArea.stories.tsx
+++ b/packages/@react-spectrum/textfield/chromatic/TextArea.stories.tsx
@@ -13,7 +13,8 @@
 import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
 import {Flex} from '@react-spectrum/layout';
 import Info from '@spectrum-icons/workflow/Info';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {TextArea} from '../';
 
 export default {
@@ -22,106 +23,108 @@ export default {
     chromaticProvider: {locales: ['en-US', 'ar-AE']}
   },
   excludeStories: ['render']
-};
+} as Meta<typeof TextArea>;
+
+export type TextAreaStory = StoryFn<typeof TextArea>;
 
-export const Default = () => render();
-export const ValueTestControlled = () => render({value: 'Test'});
+export const Default: TextAreaStory = () => render();
+export const ValueTestControlled: TextAreaStory = () => render({value: 'Test'});
 
 ValueTestControlled.story = {
   name: 'value: Test (controlled)'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid'});
+export const ValidationStateInvalid: TextAreaStory = () => render({validationState: 'invalid'});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid'});
+export const ValidationStateValid: TextAreaStory = () => render({validationState: 'valid'});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const IsReadOnlyTrue = () => render({isReadOnly: true});
+export const IsReadOnlyTrue: TextAreaStory = () => render({isReadOnly: true});
 
 IsReadOnlyTrue.story = {
   name: 'isReadOnly: true'
 };
 
-export const IsReadOnlyTrueValueReadOnlyValue = () => render({value: 'Read only value', isReadOnly: true});
+export const IsReadOnlyTrueValueReadOnlyValue: TextAreaStory = () => render({value: 'Read only value', isReadOnly: true});
 
 IsReadOnlyTrueValueReadOnlyValue.story = {
   name: 'isReadOnly: true, value: read only value'
 };
 
-export const IsRequiredTrue = () => render({isRequired: true});
+export const IsRequiredTrue: TextAreaStory = () => render({isRequired: true});
 
 IsRequiredTrue.story = {
   name: 'isRequired: true'
 };
 
-export const IsRequiredTrueNecessityIndicatorLabel = () => render({isRequired: true, necessityIndicator: 'label'}, false);
+export const IsRequiredTrueNecessityIndicatorLabel: TextAreaStory = () => render({isRequired: true, necessityIndicator: 'label'}, false);
 
 IsRequiredTrueNecessityIndicatorLabel.story = {
   name: 'isRequired: true, necessityIndicator: label'
 };
 
-export const IsRequiredFalseNecessityIndicatorLabel = () => render({isRequired: false, necessityIndicator: 'label'}, false);
+export const IsRequiredFalseNecessityIndicatorLabel: TextAreaStory = () => render({isRequired: false, necessityIndicator: 'label'}, false);
 
 IsRequiredFalseNecessityIndicatorLabel.story = {
   name: 'isRequired: false, necessityIndicator: label'
 };
 
-export const IconInfo = () => render({icon: <Info />});
+export const IconInfo: TextAreaStory = () => render({icon: <Info />});
 
 IconInfo.story = {
   name: 'icon: Info'
 };
 
-export const IconInfoValidationStateInvalid = () => render({icon: <Info />, validationState: 'invalid'});
+export const IconInfoValidationStateInvalid: TextAreaStory = () => render({icon: <Info />, validationState: 'invalid'});
 
 IconInfoValidationStateInvalid.story = {
   name: 'icon: Info, validationState: invalid'
 };
 
-export const LabelAlignEnd = () => render({labelAlign: 'end'}, false);
+export const LabelAlignEnd: TextAreaStory = () => render({labelAlign: 'end'}, false);
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'}, false);
+export const LabelPositionSide: TextAreaStory = () => render({labelPosition: 'side'}, false);
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEndLabelPositionSide = () => render({labelAlign: 'end', labelPosition: 'side'}, false);
+export const LabelAlignEndLabelPositionSide: TextAreaStory = () => render({labelAlign: 'end', labelPosition: 'side'}, false);
 
 LabelAlignEndLabelPositionSide.story = {
   name: 'labelAlign: end, labelPosition: side'
 };
 
-export const NoVisibleLabel = () => render({label: null, 'aria-label': 'Street address'}, false);
+export const NoVisibleLabel: TextAreaStory = () => render({label: null, 'aria-label': 'Street address'}, false);
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const CustomWidth = () => render({icon: <Info />, validationState: 'invalid', width: 275});
+export const CustomWidth: TextAreaStory = () => render({icon: <Info />, validationState: 'invalid', width: 275});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const CustomHeight = () => render({icon: <Info />, validationState: 'invalid', height: 350});
+export const CustomHeight: TextAreaStory = () => render({icon: <Info />, validationState: 'invalid', height: 350});
 
 CustomHeight.story = {
   name: 'custom height'
 };
 
-export const _ContextualHelp = args => render({...args, contextualHelp: (
+export const _ContextualHelp: TextAreaStory = (args) => render({...args, contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -132,7 +135,7 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const ContextualHelpLabelAlignEnd = args => render({...args, labelAlign: 'end', contextualHelp: (
+export const ContextualHelpLabelAlignEnd: TextAreaStory = (args) => render({...args, labelAlign: 'end', contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -143,7 +146,7 @@ ContextualHelpLabelAlignEnd.story = {
   name: 'contextual help, labelAlign: end'
 };
 
-export const ContextualHelpLabelPositionSide = args => render({...args, labelPosition: 'side', contextualHelp: (
+export const ContextualHelpLabelPositionSide: TextAreaStory = (args) => render({...args, labelPosition: 'side', contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -155,7 +158,7 @@ ContextualHelpLabelPositionSide.story = {
 };
 
 // allow some stories where disabled styles probably won't affect anything to turn that off, mostly to reduce clutter
-export function render(props = {}, disabled = true) {
+export function render(props = {}, disabled = true): JSX.Element {
   return (
     <Flex gap="size-100" wrap>
       <TextArea
diff --git a/packages/@react-spectrum/textfield/chromatic/TextAreaLanguages.stories.tsx b/packages/@react-spectrum/textfield/chromatic/TextAreaLanguages.stories.tsx
index 623ab0ef728..ea400348f34 100644
--- a/packages/@react-spectrum/textfield/chromatic/TextAreaLanguages.stories.tsx
+++ b/packages/@react-spectrum/textfield/chromatic/TextAreaLanguages.stories.tsx
@@ -11,8 +11,10 @@
  */
 
 import Info from '@spectrum-icons/workflow/Info';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {render} from './TextArea.stories';
+import {TextArea} from '../';
 
 export default {
   title: 'Languages/TextArea',
@@ -24,15 +26,17 @@ export default {
       scales: ['large', 'medium']
     }
   }
-};
+} as Meta<typeof TextArea>;
+
+export type TextAreaStory = StoryFn<typeof TextArea>;
 
-export const Value測試IconInfoLabelPositionSideValidationStateValid = () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'});
+export const Value測試IconInfoLabelPositionSideValidationStateValid: TextAreaStory = () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'});
 
 Value測試IconInfoLabelPositionSideValidationStateValid.story = {
   name: 'value: 測試, icon: Info, labelPosition: side, validationState: valid'
 };
 
-export const ValueاختبارIsRequiredFalseNecessityIndicatorLabel = () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'});
+export const ValueاختبارIsRequiredFalseNecessityIndicatorLabel: TextAreaStory = () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'});
 
 ValueاختبارIsRequiredFalseNecessityIndicatorLabel.story = {
   name: 'value: اختبار, isRequired: false, necessityIndicator: label'
diff --git a/packages/@react-spectrum/textfield/chromatic/Textfield.stories.tsx b/packages/@react-spectrum/textfield/chromatic/Textfield.stories.tsx
index 7767806283f..8a2a8e62d51 100644
--- a/packages/@react-spectrum/textfield/chromatic/Textfield.stories.tsx
+++ b/packages/@react-spectrum/textfield/chromatic/Textfield.stories.tsx
@@ -13,7 +13,8 @@
 import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
 import {Flex} from '@react-spectrum/layout';
 import Info from '@spectrum-icons/workflow/Info';
-import React from 'react';
+import {Meta, StoryFn} from '@storybook/react';
+import React, {JSX} from 'react';
 import {TextField} from '../';
 
 export default {
@@ -22,100 +23,102 @@ export default {
     chromaticProvider: {locales: ['en-US', 'ar-AE']}
   },
   excludeStories: ['render']
-};
+} as Meta<typeof TextField>;
+
+export type TextFieldStory = StoryFn<typeof TextField>;
 
-export const Default = () => render();
-export const ValueTest = () => render({value: 'Test'});
+export const Default: TextFieldStory = () => render();
+export const ValueTest: TextFieldStory = () => render({value: 'Test'});
 
 ValueTest.story = {
   name: 'value: Test'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid'});
+export const ValidationStateInvalid: TextFieldStory = () => render({validationState: 'invalid'});
 
 ValidationStateInvalid.story = {
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid'});
+export const ValidationStateValid: TextFieldStory = () => render({validationState: 'valid'});
 
 ValidationStateValid.story = {
   name: 'validationState: valid'
 };
 
-export const IsReadOnlyTrue = () => render({isReadOnly: true});
+export const IsReadOnlyTrue: TextFieldStory = () => render({isReadOnly: true});
 
 IsReadOnlyTrue.story = {
   name: 'isReadOnly: true'
 };
 
-export const IsReadOnlyTrueWithValue = () => render({value: 'Read only value', isReadOnly: true});
+export const IsReadOnlyTrueWithValue: TextFieldStory = () => render({value: 'Read only value', isReadOnly: true});
 
 IsReadOnlyTrueWithValue.story = {
   name: 'isReadOnly: true, with value'
 };
 
-export const IsRequiredTrue = () => render({isRequired: true});
+export const IsRequiredTrue: TextFieldStory = () => render({isRequired: true});
 
 IsRequiredTrue.story = {
   name: 'isRequired: true'
 };
 
-export const IsRequiredTrueNecessityIndicatorLabel = () => render({isRequired: true, necessityIndicator: 'label'}, false);
+export const IsRequiredTrueNecessityIndicatorLabel: TextFieldStory = () => render({isRequired: true, necessityIndicator: 'label'}, false);
 
 IsRequiredTrueNecessityIndicatorLabel.story = {
   name: 'isRequired: true, necessityIndicator: label'
 };
 
-export const IsRequiredFalseNecessityIndicatorLabel = () => render({isRequired: false, necessityIndicator: 'label'}, false);
+export const IsRequiredFalseNecessityIndicatorLabel: TextFieldStory = () => render({isRequired: false, necessityIndicator: 'label'}, false);
 
 IsRequiredFalseNecessityIndicatorLabel.story = {
   name: 'isRequired: false, necessityIndicator: label'
 };
 
-export const IconInfo = () => render({icon: <Info />});
+export const IconInfo: TextFieldStory = () => render({icon: <Info />});
 
 IconInfo.story = {
   name: 'icon: Info'
 };
 
-export const IconInfoValidationStateInvalid = () => render({icon: <Info />, validationState: 'invalid'});
+export const IconInfoValidationStateInvalid: TextFieldStory = () => render({icon: <Info />, validationState: 'invalid'});
 
 IconInfoValidationStateInvalid.story = {
   name: 'icon: Info, validationState: invalid'
 };
 
-export const LabelAlignEnd = () => render({labelAlign: 'end'}, false);
+export const LabelAlignEnd: TextFieldStory = () => render({labelAlign: 'end'}, false);
 
 LabelAlignEnd.story = {
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSide = () => render({labelPosition: 'side'}, false);
+export const LabelPositionSide: TextFieldStory = () => render({labelPosition: 'side'}, false);
 
 LabelPositionSide.story = {
   name: 'labelPosition: side'
 };
 
-export const LabelAlignEndLabelPositionSide = () => render({labelAlign: 'end', labelPosition: 'side'}, false);
+export const LabelAlignEndLabelPositionSide: TextFieldStory = () => render({labelAlign: 'end', labelPosition: 'side'}, false);
 
 LabelAlignEndLabelPositionSide.story = {
   name: 'labelAlign: end, labelPosition: side'
 };
 
-export const NoVisibleLabel = () => render({label: null, 'aria-label': 'Street address'}, false);
+export const NoVisibleLabel: TextFieldStory = () => render({label: null, 'aria-label': 'Street address'}, false);
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const CustomWidth = () => render({icon: <Info />, validationState: 'invalid', width: 275});
+export const CustomWidth: TextFieldStory = () => render({icon: <Info />, validationState: 'invalid', width: 275});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const _ContextualHelp = args => render({...args, contextualHelp: (
+export const _ContextualHelp: TextFieldStory = (args) => render({...args, contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -126,7 +129,7 @@ _ContextualHelp.story = {
   name: 'contextual help'
 };
 
-export const ContextualHelpLabelAlignEnd = args => render({...args, labelAlign: 'end', contextualHelp: (
+export const ContextualHelpLabelAlignEnd: TextFieldStory = (args) => render({...args, labelAlign: 'end', contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -137,7 +140,7 @@ ContextualHelpLabelAlignEnd.story = {
   name: 'contextual help, labelAlign: end'
 };
 
-export const ContextualHelpLabelPositionSide = args => render({...args, labelPosition: 'side', contextualHelp: (
+export const ContextualHelpLabelPositionSide: TextFieldStory = (args) => render({...args, labelPosition: 'side', contextualHelp: (
   <ContextualHelp>
     <Heading>What is a segment?</Heading>
     <Content>Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.</Content>
@@ -149,7 +152,7 @@ ContextualHelpLabelPositionSide.story = {
 };
 
 // allow some stories where disabled styles probably won't affect anything to turn that off, mostly to reduce clutter
-export function render(props = {}, disabled = true) {
+export function render(props = {}, disabled = true): JSX.Element {
   return (
     <Flex gap="size-100" wrap>
       <TextField
diff --git a/packages/@react-spectrum/textfield/chromatic/TextfieldLanguages.stories.tsx b/packages/@react-spectrum/textfield/chromatic/TextfieldLanguages.stories.tsx
index ab5939c45b5..554840918d5 100644
--- a/packages/@react-spectrum/textfield/chromatic/TextfieldLanguages.stories.tsx
+++ b/packages/@react-spectrum/textfield/chromatic/TextfieldLanguages.stories.tsx
@@ -12,6 +12,7 @@
 
 import {Flex} from '@react-spectrum/layout';
 import Info from '@spectrum-icons/workflow/Info';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {render} from './Textfield.stories';
 import {TextField} from '../';
@@ -27,9 +28,11 @@ export default {
       scales: ['large', 'medium']
     }
   }
-};
+} as Meta<typeof TextField>;
+
+export type TextFieldStory = StoryFn<typeof TextField>;
 
-export const Diacritics = () => (
+export const Diacritics: TextFieldStory = () => (
   <Flex gap="size-200" direction="row" wrap>
     <TextField label="Label" value="value" />
     <TextField label="رِفِتـــانٍ خانٍِ" value="رِفِتـــانٍ خانٍِ" />
@@ -42,13 +45,13 @@ Diacritics.story = {
   name: 'diacritics'
 };
 
-export const Value測試IconInfoLabelPositionSideValidationStateValid = () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'});
+export const Value測試IconInfoLabelPositionSideValidationStateValid: TextFieldStory = () => render({value: '測試', icon: <Info />, labelPosition: 'side', validationState: 'valid'});
 
 Value測試IconInfoLabelPositionSideValidationStateValid.story = {
   name: 'value: 測試, icon: Info, labelPosition: side, validationState: valid'
 };
 
-export const ValueاختبارIsRequiredFalseNecessityIndicatorLabel = () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'});
+export const ValueاختبارIsRequiredFalseNecessityIndicatorLabel: TextFieldStory = () => render({value: 'اختبار', isRequired: false, necessityIndicator: 'label'});
 
 ValueاختبارIsRequiredFalseNecessityIndicatorLabel.story = {
   name: 'value: اختبار, isRequired: false, necessityIndicator: label'
diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx
index 6e08d5ce71d..4e40e5102bf 100644
--- a/packages/@react-spectrum/textfield/src/TextArea.tsx
+++ b/packages/@react-spectrum/textfield/src/TextArea.tsx
@@ -24,7 +24,9 @@ import {useTextField} from '@react-aria/textfield';
  * a sizable amount of text to enter. They allow for all customizations that
  * are available to text fields.
  */
-export const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
+export const TextArea:
+  React.ForwardRefExoticComponent<SpectrumTextAreaProps & React.RefAttributes<TextFieldRef<HTMLTextAreaElement>>> =
+React.forwardRef(function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/textfield/src/TextField.tsx b/packages/@react-spectrum/textfield/src/TextField.tsx
index ed11a4295f7..fdd731bb730 100644
--- a/packages/@react-spectrum/textfield/src/TextField.tsx
+++ b/packages/@react-spectrum/textfield/src/TextField.tsx
@@ -22,7 +22,9 @@ import {useTextField} from '@react-aria/textfield';
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-export const TextField = forwardRef(function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
+export const TextField:
+  React.ForwardRefExoticComponent<SpectrumTextFieldProps & React.RefAttributes<TextFieldRef<HTMLInputElement>>> =
+forwardRef(function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
   props = useFormProps(props);
 
diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
index 05db443198a..665ee510610 100644
--- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
+++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
@@ -37,7 +37,9 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | '
   disableFocusRing?: boolean
 }
 
-export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
+export const TextFieldBase:
+  React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>> =
+forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
   let {
     validationState = props.isInvalid ? 'invalid' : null,
     icon,
diff --git a/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx b/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx
index 5ae0332a53e..b7d5a0bf7b9 100644
--- a/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx
+++ b/packages/@react-spectrum/textfield/stories/TextArea.stories.tsx
@@ -16,6 +16,7 @@ import {Content, ContextualHelp, Heading, useLocale} from '@adobe/react-spectrum
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
 import Info from '@spectrum-icons/workflow/Info';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 import {TextArea} from '../';
 
@@ -31,7 +32,7 @@ export default {
     necessityIndicator: 'icon',
     labelPosition: 'top',
     labelAlign: 'start',
-    validationState: null
+    validationState: undefined
   },
   argTypes: {
     labelPosition: {
@@ -59,55 +60,57 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof TextArea>;
+
+export type TextAreaStory = StoryFn<typeof TextArea>;
 
-export const Default = (args) => render(args);
-export const ValueTestControlled = (args) => render({...args, value: 'Test'});
+export const Default: TextAreaStory = (args) => render(args);
+export const ValueTestControlled: TextAreaStory = (args) => render({...args, value: 'Test'});
 
 ValueTestControlled.story = {
   name: 'value: Test (controlled)'
 };
 
-export const DefaultValueTestUncontrolled = (args) => render({...args, defaultValue: 'Test'});
+export const DefaultValueTestUncontrolled: TextAreaStory = (args) => render({...args, defaultValue: 'Test'});
 
 DefaultValueTestUncontrolled.story = {
   name: 'defaultValue: Test (uncontrolled)'
 };
 
-export const AutoFocusTrue = (args) => render({...args, autoFocus: true});
+export const AutoFocusTrue: TextAreaStory = (args) => render({...args, autoFocus: true});
 
 AutoFocusTrue.story = {
   name: 'autoFocus: true'
 };
 
-export const IconInfo = (args) => render({...args, icon: <Info />});
+export const IconInfo: TextAreaStory = (args) => render({...args, icon: <Info />});
 
 IconInfo.story = {
   name: 'icon: Info'
 };
 
-export const NoVisibleLabel = (args) =>
+export const NoVisibleLabel: TextAreaStory = (args) =>
   render({...args, label: null, 'aria-label': 'Street address'});
 
 NoVisibleLabel.story = {
   name: 'no visible label'
 };
 
-export const WithDescription = (args) =>
+export const WithDescription: TextAreaStory = (args) =>
   render({...args, description: 'Enter product feedback.'});
 
 WithDescription.story = {
   name: 'with description'
 };
 
-export const WithErrorMessage = (args) =>
+export const WithErrorMessage: TextAreaStory = (args) =>
   render({...args, errorMessage: 'Enter at least 250 characters.', validationState: 'invalid'});
 
 WithErrorMessage.story = {
   name: 'with error message'
 };
 
-export const WithContextualHelp = (args) =>
+export const WithContextualHelp: TextAreaStory = (args) =>
   render({
     ...args,
     contextualHelp: (
@@ -125,21 +128,21 @@ WithContextualHelp.story = {
   name: 'with contextual help'
 };
 
-export const CustomWidth = (args) =>
+export const CustomWidth: TextAreaStory = (args) =>
   render({...args, icon: <Info />, validationState: 'invalid', width: '300px'});
 
 CustomWidth.story = {
   name: 'custom width'
 };
 
-export const CustomWidthSmall = (args) =>
+export const CustomWidthSmall: TextAreaStory = (args) =>
   render({...args, icon: <Info />, validationState: 'invalid', width: '30px'});
 
 CustomWidthSmall.story = {
   name: 'custom width small'
 };
 
-export const CustomHeightWithLabel = (args) => (
+export const CustomHeightWithLabel: TextAreaStory = (args) => (
   <Form>
     <TextArea {...args} label="Custom height" description="height: size-2000" height="size-2000" />
     <TextArea
@@ -168,7 +171,7 @@ CustomHeightWithLabel.story = {
   name: 'custom height with label'
 };
 
-export const ChangeableHelptext = (args) => <ValidationExample {...args} />;
+export const ChangeableHelptext: TextAreaStory = (args) => <ValidationExample {...args} />;
 
 ChangeableHelptext.story = {
   name: 'changeable helptext',
@@ -179,7 +182,7 @@ ChangeableHelptext.story = {
   }
 };
 
-export const ChangeableHelptextCustomHeight = (args) => (
+export const ChangeableHelptextCustomHeight: TextAreaStory = (args) => (
   <ValidationExample {...args} height="175px" minHeight="100px" maxHeight="50vh" />
 );
 
@@ -192,19 +195,19 @@ ChangeableHelptextCustomHeight.story = {
   }
 };
 
-export const ControlledInteractive = (args) => <ControlledTextArea {...args} />;
+export const ControlledInteractive: TextAreaStory = (args) => <ControlledTextArea {...args} />;
 
 ControlledInteractive.story = {
   name: 'controlled interactive'
 };
 
-export const InFlex = (args) => renderInFlexRowAndBlock(args);
+export const InFlex: TextAreaStory = (args) => renderInFlexRowAndBlock(args);
 
 InFlex.story = {
   name: 'in flex'
 };
 
-export const InFlexValidationState = (args) =>
+export const InFlexValidationState: TextAreaStory = (args) =>
   renderInFlexRowAndBlock({...args, validationState: 'invalid'});
 
 InFlexValidationState.story = {
@@ -352,6 +355,6 @@ function DefaultLocaleStrings(props) {
   );
 }
 
-export const WithDifferentLocaleText = {
+export const WithDifferentLocaleText: StoryObj<typeof TextArea> = {
   render: (args) => <DefaultLocaleStrings {...args} />
 };
diff --git a/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx b/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx
index 1f780f44bf9..75893f1c717 100644
--- a/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx
+++ b/packages/@react-spectrum/textfield/stories/Textfield.stories.tsx
@@ -12,8 +12,8 @@
 
 import {action} from '@storybook/addon-actions';
 import {ActionButton, Content, ContextualHelp, Heading, useLocale} from '@adobe/react-spectrum';
-import {ComponentStoryObj} from '@storybook/react';
 import Info from '@spectrum-icons/workflow/Info';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {TextField} from '../';
 
@@ -30,7 +30,7 @@ export default {
     necessityIndicator: 'icon',
     labelPosition: 'top',
     labelAlign: 'start',
-    validationState: null
+    validationState: undefined
   },
   argTypes: {
     labelPosition: {
@@ -58,9 +58,9 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof TextField>;
 
-export type TextFieldStory = ComponentStoryObj<typeof TextField>;
+export type TextFieldStory = StoryObj<typeof TextField>;
 
 export const Default: TextFieldStory = {
   render: (args) => render(args)
diff --git a/packages/@react-spectrum/toast/chromatic/Toast.stories.tsx b/packages/@react-spectrum/toast/chromatic/Toast.stories.tsx
index 7050499b0e5..5d2650f59ce 100644
--- a/packages/@react-spectrum/toast/chromatic/Toast.stories.tsx
+++ b/packages/@react-spectrum/toast/chromatic/Toast.stories.tsx
@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import React from 'react';
-import {Toast} from '../src/Toast';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
+import {SpectrumToastValue, Toast} from '../src/Toast';
 import {useToastState} from '@react-stately/toast';
 
-function FakeToast(props) {
+function FakeToast(props: SpectrumToastValue): JSX.Element {
   let state = useToastState<any>();
   return <Toast toast={{content: props, key: 'toast'}} state={state} />;
 }
@@ -22,32 +23,34 @@ function FakeToast(props) {
 export default {
   title: 'Toast',
   component: FakeToast
-};
+} as Meta<typeof FakeToast>;
+
+export type ToastStory = StoryObj<typeof FakeToast>;
 
-export const Default = {
+export const Default: ToastStory = {
   args: {children: 'Neutral toast'}
 };
 
-export const Info = {
+export const Info: ToastStory = {
   args: {variant: 'info', children: 'Neutral toast'}
 };
 
-export const Positive = {
+export const Positive: ToastStory = {
   args: {variant: 'positive', children: 'Neutral toast'}
 };
 
-export const Negative = {
+export const Negative: ToastStory = {
   args: {variant: 'negative', children: 'Neutral toast'}
 };
 
-export const Action = {
+export const Action: ToastStory = {
   args: {variant: 'positive', children: 'Neutral toast', actionLabel: 'Undo'}
 };
 
-export const LongContent = {
+export const LongContent: ToastStory = {
   args: {variant: 'positive', children: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.'}
 };
 
-export const LongContentAction = {
+export const LongContentAction: ToastStory = {
   args: {variant: 'positive', children: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.', actionLabel: 'Undo'}
 };
diff --git a/packages/@react-spectrum/toast/src/Toast.tsx b/packages/@react-spectrum/toast/src/Toast.tsx
index fc1b4687bf5..b3f9f26c871 100644
--- a/packages/@react-spectrum/toast/src/Toast.tsx
+++ b/packages/@react-spectrum/toast/src/Toast.tsx
@@ -14,7 +14,7 @@ import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {Button, ClearButton} from '@react-spectrum/button';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import CrossMedium from '@spectrum-icons/ui/CrossMedium';
-import {DOMProps, DOMRef} from '@react-types/shared';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import InfoMedium from '@spectrum-icons/ui/InfoMedium';
 // @ts-ignore
@@ -43,12 +43,14 @@ export interface SpectrumToastProps {
 
 // TODO: express should use filled icons...
 export const ICONS = {
-  info: InfoMedium,
-  negative: AlertMedium,
-  positive: SuccessMedium
-};
+  info: InfoMedium as React.ComponentType,
+  negative: AlertMedium as React.ComponentType,
+  positive: SuccessMedium as React.ComponentType
+} as const;
 
-export const Toast = React.forwardRef(function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
+export const Toast:
+  React.ForwardRefExoticComponent<SpectrumToastProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+React.forwardRef(function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
   let {
     toast: {
       key,
diff --git a/packages/@react-spectrum/toast/src/Toaster.tsx b/packages/@react-spectrum/toast/src/Toaster.tsx
index 0fb2ae7ad2e..231d3ed4674 100644
--- a/packages/@react-spectrum/toast/src/Toaster.tsx
+++ b/packages/@react-spectrum/toast/src/Toaster.tsx
@@ -28,7 +28,7 @@ interface ToastContainerProps extends AriaToastRegionProps {
   placement?: ToastPlacement
 }
 
-export const ToasterContext = createContext(false);
+export const ToasterContext: React.Context<boolean> = createContext(false);
 
 export function Toaster(props: ToastContainerProps): ReactElement {
   let {
diff --git a/packages/@react-spectrum/toast/stories/Toast.stories.tsx b/packages/@react-spectrum/toast/stories/Toast.stories.tsx
index a4e1e697151..6dafe00fea8 100644
--- a/packages/@react-spectrum/toast/stories/Toast.stories.tsx
+++ b/packages/@react-spectrum/toast/stories/Toast.stories.tsx
@@ -18,7 +18,8 @@ import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Flex} from '@react-spectrum/layout';
 import {Heading} from '@react-spectrum/text';
-import React, {SyntheticEvent, useEffect, useMemo, useRef, useState} from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX, SyntheticEvent, useEffect, useMemo, useRef, useState} from 'react';
 import {SpectrumToastOptions, ToastPlacement} from '../src/ToastContainer';
 import {ToastContainer, ToastQueue} from '../';
 import {UNSAFE_PortalProvider} from '@react-aria/overlays';
@@ -29,29 +30,31 @@ export default {
   decorators: [
     (story, {parameters, args}) => (
       <>
-        {!parameters.disableToastContainer && <ToastContainer placement={args.placement} />}
+        {!parameters.disableToastContainer && <ToastContainer placement={(args as any).placement} />}
         <MainLandmark>{story()}</MainLandmark>
       </>
     )
   ],
   args: {
     shouldCloseOnAction: false,
-    timeout: null,
+    timeout: undefined,
     placement: undefined
   },
   argTypes: {
     timeout: {
       control: 'radio',
-      options: [null, 5000]
+      options: [undefined, 5000]
     },
     placement: {
       control: 'select',
       options: [undefined, 'top', 'top end', 'bottom', 'bottom end']
     }
   }
-};
+} as Meta<typeof RenderProvider>;
+
+export type ToastStory = StoryFn<typeof RenderProvider>;
 
-export const Default = (args) => <RenderProvider {...args} />;
+export const Default: ToastStory = (args) => <RenderProvider {...args} />;
 Default.story = {
   parameters: {
     a11y: {
@@ -69,7 +72,7 @@ Default.story = {
 };
 
 
-export const WithAction = (args) => (
+export const WithAction: ToastStory = (args) => (
   <RenderProvider {...args} actionLabel="Action" onAction={action('onAction')} />
 );
 
@@ -89,7 +92,7 @@ WithAction.story = {
 };
 
 
-export const WithTestId = (args) => (
+export const WithTestId: ToastStory = (args) => (
   <RenderProvider {...args} actionLabel="Action" onAction={action('onAction')} data-testid="hello i am a test id" />
 );
 
@@ -108,7 +111,7 @@ WithTestId.story = {
   }
 };
 
-export const WithDialog = (args) => (
+export const WithDialog: ToastStory = (args) => (
   <DialogTrigger isDismissable>
     <Button variant="accent">Open dialog</Button>
     <Dialog>
@@ -135,7 +138,7 @@ WithDialog.story = {
   }
 };
 
-export const MultipleToastContainers = (args) => <Multiple {...args} />;
+export const MultipleToastContainers: StoryFn<typeof Multiple> = (args) => <Multiple {...args} />;
 
 MultipleToastContainers.story = {
   name: 'multiple ToastContainers',
@@ -153,7 +156,7 @@ MultipleToastContainers.story = {
   }
 };
 
-export const ProgrammaticallyClosing = (args) => <ToastToggle {...args} />;
+export const ProgrammaticallyClosing: ToastStory = (args) => <ToastToggle {...args} />;
 
 ProgrammaticallyClosing.story = {
   name: 'programmatically closing',
@@ -170,7 +173,7 @@ ProgrammaticallyClosing.story = {
   }
 };
 
-export const WithIframe = () => <IframeExample />;
+export const WithIframe: ToastStory = () => <IframeExample />;
 
 WithIframe.story = {
   name: 'with iframe',
@@ -188,7 +191,7 @@ WithIframe.story = {
   }
 };
 
-function RenderProvider(options: SpectrumToastOptions) {
+function RenderProvider(options: SpectrumToastOptions): JSX.Element {
   return (
     <ButtonGroup>
       <Button
@@ -235,7 +238,7 @@ function ToastToggle(options: SpectrumToastOptions) {
   );
 }
 
-function Multiple(options: SpectrumToastOptions & {placement: ToastPlacement}) {
+function Multiple(options: SpectrumToastOptions & {placement: ToastPlacement}): JSX.Element {
   let [isMounted1, setMounted1] = useState(true);
 
   return (
@@ -360,14 +363,14 @@ function MainLandmark(props) {
   return <main aria-label="Danni's unicorn corral" ref={ref} {...props} {...landmarkProps} style={{padding: 40, background: 'white'}}>{props.children}</main>;
 }
 
-export const withFullscreen = {
+export const withFullscreen: StoryObj<typeof FullscreenApp> = {
   render: (args) => <FullscreenApp {...args} />,
   parameters: {
     disableToastContainer: true
   }
 };
 
-function FullscreenApp(props) {
+function FullscreenApp(props: SpectrumToastOptions & {placement: ToastPlacement}): JSX.Element {
   let ref = useRef<HTMLDivElement | null>(null);
   let [isFullscreen, setFullscreen] = useState(false);
   let fullscreenPress = () => {
diff --git a/packages/@react-spectrum/tooltip/src/Tooltip.tsx b/packages/@react-spectrum/tooltip/src/Tooltip.tsx
index 0dfe754ecff..2456db7f0d7 100644
--- a/packages/@react-spectrum/tooltip/src/Tooltip.tsx
+++ b/packages/@react-spectrum/tooltip/src/Tooltip.tsx
@@ -12,7 +12,7 @@
 
 import AlertSmall from '@spectrum-icons/ui/AlertSmall';
 import {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import InfoSmall from '@spectrum-icons/ui/InfoSmall';
 import {mergeProps} from '@react-aria/utils';
 import React, {useContext, useImperativeHandle, useRef} from 'react';
@@ -31,7 +31,9 @@ let iconMap = {
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.
  */
-export const Tooltip = React.forwardRef(function Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {
+export const Tooltip:
+  React.ForwardRefExoticComponent<SpectrumTooltipProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+React.forwardRef(function Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {
   let {ref: overlayRef, arrowProps, state, arrowRef, ...tooltipProviderProps} = useContext(TooltipContext);
   let defaultRef = useRef(null);
   overlayRef = overlayRef || defaultRef;
diff --git a/packages/@react-spectrum/tooltip/src/context.ts b/packages/@react-spectrum/tooltip/src/context.ts
index 1dcecea82f3..46fef78939e 100644
--- a/packages/@react-spectrum/tooltip/src/context.ts
+++ b/packages/@react-spectrum/tooltip/src/context.ts
@@ -11,7 +11,7 @@
  */
 
 import {PlacementAxis} from '@react-types/overlays';
-import React, {HTMLAttributes} from 'react';
+import React, {Context, HTMLAttributes} from 'react';
 import {RefObject, StyleProps} from '@react-types/shared';
 import {TooltipTriggerState} from '@react-stately/tooltip';
 
@@ -23,4 +23,4 @@ interface TooltipContextProps extends StyleProps {
   arrowRef?: RefObject<HTMLElement | null>
 }
 
-export const TooltipContext = React.createContext<TooltipContextProps>({placement: null});
+export const TooltipContext: Context<TooltipContextProps> = React.createContext<TooltipContextProps>({placement: null});

From 5c219373700a12f797f61cc79f79743440639922 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 16:20:11 +1000
Subject: [PATCH 17/19] finish last tab

---
 .../tabs/chromatic/Tabs.stories.tsx           | 68 ++++++++++---------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx
index 9a5496d7447..1671c2b2cdb 100644
--- a/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx
+++ b/packages/@react-spectrum/tabs/chromatic/Tabs.stories.tsx
@@ -12,8 +12,8 @@
 
 import {Heading, Text} from '@react-spectrum/text';
 import {Item, TabList, TabPanels, Tabs} from '../';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumTabsProps} from '@react-types/tabs';
 
 const meta: Meta<SpectrumTabsProps<object>> = {
@@ -29,7 +29,9 @@ const meta: Meta<SpectrumTabsProps<object>> = {
 
 export default meta;
 
-const Template = (args: SpectrumTabsProps<object>) => (
+export type TabsStoryProps = StoryObj<SpectrumTabsProps<object>>;
+
+const Template = (args: SpectrumTabsProps<object>): JSX.Element => (
   <Tabs {...args} aria-label="Tab example" maxWidth={500}>
     <TabList>
       <Item key="val1">Tab 1</Item>
@@ -73,77 +75,77 @@ const Template = (args: SpectrumTabsProps<object>) => (
   </Tabs>
 );
 
-export const Default = {
-  render: Template,
+export const Default: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {}
 };
 
-export const DefaultMobileViewport = {
-  render: Template,
+export const DefaultMobileViewport: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   parameters: {chromatic: {viewports: [320]}}
 };
 
-export const Quiet = {
-  render: Template,
+export const Quiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, isQuiet: true}
 };
 
-export const Emphasized = {
-  render: Template,
+export const Emphasized: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, isEmphasized: true}
 };
 
-export const Compact = {
-  render: Template,
+export const Compact: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, density: 'compact'}
 };
 
-export const CompactQuiet = {
-  render: Template,
+export const CompactQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Quiet.args, ...Compact.args}
 };
 
-export const Vertical = {
-  render: Template,
+export const Vertical: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Default.args, orientation: 'vertical'}
 };
 
-export const VerticalQuiet = {
-  render: Template,
+export const VerticalQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Vertical.args, ...Quiet.args}
 };
 
-export const VerticalCompact = {
-  render: Template,
+export const VerticalCompact: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Vertical.args, ...Compact.args}
 };
 
-export const VerticalCompactQuiet = {
-  render: Template,
+export const VerticalCompactQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Vertical.args, ...CompactQuiet.args}
 };
 
-export const EmphasizedQuiet = {
-  render: Template,
+export const EmphasizedQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Quiet.args}
 };
 
-export const EmphasizedVertical = {
-  render: Template,
+export const EmphasizedVertical: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Vertical.args}
 };
 
-export const EmphasizedVerticalQuiet = {
-  render: Template,
+export const EmphasizedVerticalQuiet: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Vertical.args, ...Quiet.args}
 };
 
-export const EmphasizedCompact = {
-  render: Template,
+export const EmphasizedCompact: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Compact.args}
 };
 
-export const EmphasizedCompactVertical = {
-  render: Template,
+export const EmphasizedCompactVertical: TabsStoryProps = {
+  render: (args) => <Template {...args} />,
   args: {...Emphasized.args, ...Compact.args, ...Vertical.args}
 };

From adf534320368c3f5c5338da8b492bf5c74862ad7 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 13 Jun 2025 16:34:11 +1000
Subject: [PATCH 18/19] tree, view, well

---
 .../tree/chromatic-fc/TreeView.stories.tsx    |  13 +-
 .../tree/chromatic/TreeView.stories.tsx       |  25 +-
 .../tree/stories/TreeView.stories.tsx         | 217 +++++++++---------
 packages/@react-spectrum/view/src/Content.tsx |   6 +-
 packages/@react-spectrum/view/src/Footer.tsx  |   6 +-
 packages/@react-spectrum/view/src/Header.tsx  |   6 +-
 .../view/stories/View.stories.tsx             |   5 +-
 .../well/chromatic/Well.stories.tsx           |   9 +-
 packages/@react-spectrum/well/src/Well.tsx    |   6 +-
 9 files changed, 152 insertions(+), 141 deletions(-)

diff --git a/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx b/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx
index 00cec78bf0e..135fc8021dc 100644
--- a/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx
+++ b/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx
@@ -18,8 +18,9 @@ import Edit from '@spectrum-icons/workflow/Edit';
 import FileTxt from '@spectrum-icons/workflow/FileTxt';
 import Folder from '@spectrum-icons/workflow/Folder';
 import React from 'react';
+import {SpectrumTreeViewProps, TreeView, TreeViewItem, TreeViewItemContent} from '../src';
+import {StoryFn} from '@storybook/react';
 import {Text} from '@react-spectrum/text';
-import {TreeView, TreeViewItem, TreeViewItemContent} from '../src';
 
 export default {
   title: 'TreeView'
@@ -120,18 +121,20 @@ function TestTree(props) {
   );
 }
 
-export const Default = () => (
+type TreeViewStoryProps = StoryFn<SpectrumTreeViewProps<unknown>>;
+
+export const Default: TreeViewStoryProps = () => (
   <TestTree />
 );
 
-export const SelectionMode = () => (
+export const SelectionMode: TreeViewStoryProps = () => (
   <TestTree selectionMode="multiple" />
 );
 
-export const DisabledBehaviorAll = () => (
+export const DisabledBehaviorAll: TreeViewStoryProps = () => (
   <TestTree disabledBehavior="all" selectionMode="multiple" />
 );
 
-export const HiglightSelectionWithDisabledBehaviorAll = () => (
+export const HiglightSelectionWithDisabledBehaviorAll: TreeViewStoryProps = () => (
   <TestTree selectionStyle="highlight" selectionMode="multiple" disabledBehavior="all" />
 );
diff --git a/packages/@react-spectrum/tree/chromatic/TreeView.stories.tsx b/packages/@react-spectrum/tree/chromatic/TreeView.stories.tsx
index df3441545c9..bca65f67f0a 100644
--- a/packages/@react-spectrum/tree/chromatic/TreeView.stories.tsx
+++ b/packages/@react-spectrum/tree/chromatic/TreeView.stories.tsx
@@ -22,8 +22,8 @@ import {generatePowerset} from '@react-spectrum/story-utils';
 import {Grid, repeat} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Meta} from '@storybook/react';
-import React from 'react';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumTreeViewProps, TreeView, TreeViewItem, TreeViewItemContent} from '../src';
 
 let states = [
@@ -66,7 +66,7 @@ const meta: Meta<SpectrumTreeViewProps<object>> = {
 
 export default meta;
 
-const Template = ({combos}) => (
+const Template = ({combos}: {combos: any}): JSX.Element => (
   <Grid columns={repeat(3, '1fr')} autoFlow="row" gap="size-300">
     {combos.map(c => {
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -182,9 +182,10 @@ function renderEmptyState() {
   );
 }
 
-const EmptyTemplate = () =>
+const EmptyTemplate = (props: SpectrumTreeViewProps<object>): JSX.Element =>
   (
     <TreeView
+      {...props}
       aria-label="test empty tree"
       items={[]}
       renderEmptyState={renderEmptyState}>
@@ -198,26 +199,26 @@ const EmptyTemplate = () =>
     </TreeView>
   );
 
-export const Default = {
-  render: Template,
+export const Default: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: '1 of 3',
   args: {combos: combo1}
 };
 
-export const DefaultPt2 = {
-  render: Template,
+export const DefaultPt2: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: '2 of 3',
   args: {combos: combo2}
 };
 
-export const DefaultPt3 = {
-  render: Template,
+export const DefaultPt3: StoryObj<typeof Template> = {
+  render: (args) => <Template {...args} />,
   name: '3 of 3',
   args: {combos: combo3}
 };
 
-export const Empty = {
-  render: EmptyTemplate,
+export const Empty: StoryObj<typeof EmptyTemplate> = {
+  render: (args) => <EmptyTemplate {...args} />,
   name: 'empty tree',
   args: {}
 };
diff --git a/packages/@react-spectrum/tree/stories/TreeView.stories.tsx b/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
index 40646928174..b678f3fc406 100644
--- a/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/tree/stories/TreeView.stories.tsx
@@ -21,7 +21,8 @@ import Folder from '@spectrum-icons/workflow/Folder';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
 import {Link} from '@react-spectrum/link';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {SpectrumTreeViewProps, TreeView, TreeViewItem, TreeViewItemContent} from '../src';
 
 export default {
@@ -41,46 +42,18 @@ export default {
       }
     }
   }
-};
+} as Meta<typeof TreeView>;
+
+type TreeStory = StoryFn<typeof TreeView>;
 
 // TODO: This story crashes on save and story switch, not sure why or if only local...
-export const TreeExampleStatic = (args: SpectrumTreeViewProps<unknown>) => (
-  <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
-    <TreeView {...args} disabledKeys={['projects-1']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
-      <TreeViewItem id="Photos" textValue="Photos">
-        <TreeViewItemContent>
-          <Text>Photos</Text>
-          <Folder />
-          <ActionGroup onAction={action('onActionGroup action')}>
-            <Item key="edit">
-              <Edit />
-              <Text>Edit</Text>
-            </Item>
-            <Item key="delete">
-              <Delete />
-              <Text>Delete</Text>
-            </Item>
-          </ActionGroup>
-        </TreeViewItemContent>
-      </TreeViewItem>
-      <TreeViewItem id="projects" textValue="Projects">
-        <TreeViewItemContent>
-          <Text>Projects</Text>
-          <Folder />
-          <ActionGroup onAction={action('onActionGroup action')}>
-            <Item key="edit">
-              <Edit />
-              <Text>Edit</Text>
-            </Item>
-            <Item key="delete">
-              <Delete />
-              <Text>Delete</Text>
-            </Item>
-          </ActionGroup>
-        </TreeViewItemContent>
-        <TreeViewItem id="projects-1" textValue="Projects-1">
+export const TreeExampleStatic: StoryObj<typeof TreeView> = {
+  render: (args) => (
+    <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
+      <TreeView {...args} disabledKeys={['projects-1']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
+        <TreeViewItem id="Photos" textValue="Photos">
           <TreeViewItemContent>
-            <Text>Projects-1</Text>
+            <Text>Photos</Text>
             <Folder />
             <ActionGroup onAction={action('onActionGroup action')}>
               <Item key="edit">
@@ -93,9 +66,73 @@ export const TreeExampleStatic = (args: SpectrumTreeViewProps<unknown>) => (
               </Item>
             </ActionGroup>
           </TreeViewItemContent>
-          <TreeViewItem id="projects-1A" textValue="Projects-1A">
+        </TreeViewItem>
+        <TreeViewItem id="projects" textValue="Projects">
+          <TreeViewItemContent>
+            <Text>Projects</Text>
+            <Folder />
+            <ActionGroup onAction={action('onActionGroup action')}>
+              <Item key="edit">
+                <Edit />
+                <Text>Edit</Text>
+              </Item>
+              <Item key="delete">
+                <Delete />
+                <Text>Delete</Text>
+              </Item>
+            </ActionGroup>
+          </TreeViewItemContent>
+          <TreeViewItem id="projects-1" textValue="Projects-1">
             <TreeViewItemContent>
-              <Text>Projects-1A</Text>
+              <Text>Projects-1</Text>
+              <Folder />
+              <ActionGroup onAction={action('onActionGroup action')}>
+                <Item key="edit">
+                  <Edit />
+                  <Text>Edit</Text>
+                </Item>
+                <Item key="delete">
+                  <Delete />
+                  <Text>Delete</Text>
+                </Item>
+              </ActionGroup>
+            </TreeViewItemContent>
+            <TreeViewItem id="projects-1A" textValue="Projects-1A">
+              <TreeViewItemContent>
+                <Text>Projects-1A</Text>
+                <FileTxt />
+                <ActionGroup onAction={action('onActionGroup action')}>
+                  <Item key="edit">
+                    <Edit />
+                    <Text>Edit</Text>
+                  </Item>
+                  <Item key="delete">
+                    <Delete />
+                    <Text>Delete</Text>
+                  </Item>
+                </ActionGroup>
+              </TreeViewItemContent>
+            </TreeViewItem>
+          </TreeViewItem>
+          <TreeViewItem id="projects-2" textValue="Projects-2">
+            <TreeViewItemContent>
+              <Text>Projects-2</Text>
+              <FileTxt />
+              <ActionGroup onAction={action('onActionGroup action')}>
+                <Item key="edit">
+                  <Edit />
+                  <Text>Edit</Text>
+                </Item>
+                <Item key="delete">
+                  <Delete />
+                  <Text>Delete</Text>
+                </Item>
+              </ActionGroup>
+            </TreeViewItemContent>
+          </TreeViewItem>
+          <TreeViewItem id="projects-3" textValue="Projects-3">
+            <TreeViewItemContent>
+              <Text>Projects-3</Text>
               <FileTxt />
               <ActionGroup onAction={action('onActionGroup action')}>
                 <Item key="edit">
@@ -110,44 +147,9 @@ export const TreeExampleStatic = (args: SpectrumTreeViewProps<unknown>) => (
             </TreeViewItemContent>
           </TreeViewItem>
         </TreeViewItem>
-        <TreeViewItem id="projects-2" textValue="Projects-2">
-          <TreeViewItemContent>
-            <Text>Projects-2</Text>
-            <FileTxt />
-            <ActionGroup onAction={action('onActionGroup action')}>
-              <Item key="edit">
-                <Edit />
-                <Text>Edit</Text>
-              </Item>
-              <Item key="delete">
-                <Delete />
-                <Text>Delete</Text>
-              </Item>
-            </ActionGroup>
-          </TreeViewItemContent>
-        </TreeViewItem>
-        <TreeViewItem id="projects-3" textValue="Projects-3">
-          <TreeViewItemContent>
-            <Text>Projects-3</Text>
-            <FileTxt />
-            <ActionGroup onAction={action('onActionGroup action')}>
-              <Item key="edit">
-                <Edit />
-                <Text>Edit</Text>
-              </Item>
-              <Item key="delete">
-                <Delete />
-                <Text>Delete</Text>
-              </Item>
-            </ActionGroup>
-          </TreeViewItemContent>
-        </TreeViewItem>
-      </TreeViewItem>
-    </TreeView>
-  </div>
-);
-
-TreeExampleStatic.story = {
+      </TreeView>
+    </div>
+  ),
   args: {
     selectionMode: 'none',
     selectionStyle: 'checkbox',
@@ -174,7 +176,7 @@ TreeExampleStatic.story = {
   }
 };
 
-export const TreeExampleStaticNoActions = (args: SpectrumTreeViewProps<unknown>) => (
+let TreeExampleStaticNoActionsRender = (args: SpectrumTreeViewProps<unknown>): JSX.Element => (
   <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
     <TreeView {...args} disabledKeys={['projects-1']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
       <TreeViewItem id="Photos" textValue="Photos">
@@ -217,8 +219,10 @@ export const TreeExampleStaticNoActions = (args: SpectrumTreeViewProps<unknown>)
   </div>
 );
 
-export const ExampleNoActions = {
-  render: TreeExampleStaticNoActions,
+export const TreeExampleStaticNoActions: TreeStory = (args: SpectrumTreeViewProps<unknown>) => <TreeExampleStaticNoActionsRender {...args} />;
+
+export const ExampleNoActions: StoryObj<typeof TreeExampleStaticNoActionsRender> = {
+  render: (args) => <TreeExampleStaticNoActionsRender {...args} />,
   args: {
     selectionMode: 'none',
     selectionStyle: 'checkbox',
@@ -312,38 +316,36 @@ const DynamicTreeItem = (props) => {
   );
 };
 
-export const TreeExampleDynamic = (args: SpectrumTreeViewProps<unknown>) => (
-  <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
-    <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
-      {(item: any) => (
-        <DynamicTreeItem
-          id={item.id}
-          icon={item.icon}
-          childItems={item.childItems}
-          textValue={item.name}
-          name={item.name} />
-      )}
-    </TreeView>
-  </div>
-);
-
-TreeExampleDynamic.story = {
-  ...TreeExampleStatic.story,
-  parameters: null
+export const TreeExampleDynamic: StoryObj<typeof TreeView> = {
+  render: (args: SpectrumTreeViewProps<unknown>) => (
+    <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
+      <TreeView disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')} {...args}>
+        {(item: any) => (
+          <DynamicTreeItem
+            id={item.id}
+            icon={item.icon}
+            childItems={item.childItems}
+            textValue={item.name}
+            name={item.name} />
+        )}
+      </TreeView>
+    </div>
+  ),
+  ...TreeExampleStatic,
+  parameters: undefined
 };
 
 
-export const WithActions = {
-  render: TreeExampleDynamic,
+export const WithActions: StoryObj<typeof TreeExampleDynamic> = {
   ...TreeExampleDynamic,
   args: {
     onAction: action('onAction'),
-    ...TreeExampleDynamic.story.args
+    ...TreeExampleDynamic.args
   },
   name: 'Tree with actions'
 };
 
-export const WithLinks = (args: SpectrumTreeViewProps<unknown>) => (
+export const WithLinks: TreeStory = (args: SpectrumTreeViewProps<unknown>) => (
   <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
     <TreeView {...args} disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
       {(item) => (
@@ -369,7 +371,7 @@ WithLinks.story = {
   }
 };
 
-export function renderEmptyState() {
+export function renderEmptyState(): JSX.Element {
   return (
     <IllustratedMessage>
       <svg width="150" height="103" viewBox="0 0 150 103">
@@ -381,18 +383,17 @@ export function renderEmptyState() {
   );
 }
 
-export const EmptyTree = {
-  render: TreeExampleDynamic,
+export const EmptyTree: StoryObj<typeof TreeExampleDynamic> = {
   ...TreeExampleDynamic,
   args: {
-    ...TreeExampleDynamic.story.args,
+    ...TreeExampleDynamic.args,
     items: [],
     renderEmptyState
   },
   name: 'Empty Tree'
 };
 
-export const WithActionMenu = (args: SpectrumTreeViewProps<unknown>) => (
+export const WithActionMenu: TreeStory = (args: SpectrumTreeViewProps<unknown>) => (
   <div style={{width: '300px', resize: 'both', height: '90vh', overflow: 'auto'}}>
     <TreeView {...args} disabledKeys={['reports-1AB']} aria-label="test dynamic tree" items={rows} onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
       {(item) => (
diff --git a/packages/@react-spectrum/view/src/Content.tsx b/packages/@react-spectrum/view/src/Content.tsx
index 9d3ed55fceb..dc4cf673eb5 100644
--- a/packages/@react-spectrum/view/src/Content.tsx
+++ b/packages/@react-spectrum/view/src/Content.tsx
@@ -12,14 +12,16 @@
 
 import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {ContentProps} from '@react-types/view';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 
 /**
  * Content represents the primary content within a Spectrum container.
  */
-export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef) {
+export const Content:
+  React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Content(props: ContentProps, ref: DOMRef) {
   props = useSlotProps(props, 'content');
   let {
     children,
diff --git a/packages/@react-spectrum/view/src/Footer.tsx b/packages/@react-spectrum/view/src/Footer.tsx
index 63d44e8d512..53c6d331788 100644
--- a/packages/@react-spectrum/view/src/Footer.tsx
+++ b/packages/@react-spectrum/view/src/Footer.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {FooterProps} from '@react-types/view';
 import React, {forwardRef} from 'react';
@@ -19,7 +19,9 @@ import React, {forwardRef} from 'react';
 /**
  * Footer represents a footer within a Spectrum container.
  */
-export const Footer = forwardRef(function Footer(props: FooterProps, ref: DOMRef) {
+export const Footer:
+  React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Footer(props: FooterProps, ref: DOMRef) {
   props = useSlotProps(props, 'footer');
   let {
     children,
diff --git a/packages/@react-spectrum/view/src/Header.tsx b/packages/@react-spectrum/view/src/Header.tsx
index 44e81a150ce..a19d897abc0 100644
--- a/packages/@react-spectrum/view/src/Header.tsx
+++ b/packages/@react-spectrum/view/src/Header.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeaderProps} from '@react-types/view';
 import React, {forwardRef} from 'react';
@@ -19,7 +19,9 @@ import React, {forwardRef} from 'react';
 /**
  * Header represents a header within a Spectrum container.
  */
-export const Header = forwardRef(function Header(props: HeaderProps, ref: DOMRef) {
+export const Header:
+  React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
+forwardRef(function Header(props: HeaderProps, ref: DOMRef) {
   props = useSlotProps(props, 'header');
   let {
     children,
diff --git a/packages/@react-spectrum/view/stories/View.stories.tsx b/packages/@react-spectrum/view/stories/View.stories.tsx
index 23931d27e94..986c0ef6f33 100644
--- a/packages/@react-spectrum/view/stories/View.stories.tsx
+++ b/packages/@react-spectrum/view/stories/View.stories.tsx
@@ -9,6 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import {View} from '../';
 
@@ -19,11 +20,11 @@ let meta = {
     colorVersion: 5,
     backgroundColor: 'blue-400'
   }
-};
+} as Meta<typeof View>;
 
 export default meta;
 
-export const Default = args => (
+export const Default: StoryFn<typeof View> = (args) => (
   <View
     {...args}
     width="single-line-width"
diff --git a/packages/@react-spectrum/well/chromatic/Well.stories.tsx b/packages/@react-spectrum/well/chromatic/Well.stories.tsx
index 18597ba4303..2c52bc55579 100644
--- a/packages/@react-spectrum/well/chromatic/Well.stories.tsx
+++ b/packages/@react-spectrum/well/chromatic/Well.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Meta} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {SpectrumWellProps} from '@react-types/well';
 import {Well} from '../';
@@ -22,9 +22,6 @@ const meta: Meta<SpectrumWellProps> = {
 
 export default meta;
 
-const Template = (args) =>
-  <Well {...args}>This is a React Spectrum Well</Well>;
-
-export const Default = {
-  render: Template
+export const Default: StoryObj<typeof Well> = {
+  render: (args) => <Well {...args}>This is a React Spectrum Well</Well>
 };
diff --git a/packages/@react-spectrum/well/src/Well.tsx b/packages/@react-spectrum/well/src/Well.tsx
index 63159c60206..2d2557681ce 100644
--- a/packages/@react-spectrum/well/src/Well.tsx
+++ b/packages/@react-spectrum/well/src/Well.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
+import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {SpectrumWellProps} from '@react-types/well';
@@ -21,7 +21,9 @@ import styles from '@adobe/spectrum-css-temp/components/well/vars.css';
  * A Well is a content container that displays non-editable content separate from other content on the screen.
  * Often this is used to display preformatted text, such as code/markup examples on a documentation page.
  */
-export const Well = forwardRef(function Well(props: SpectrumWellProps, ref: DOMRef<HTMLDivElement>) {
+export const Well:
+  React.ForwardRefExoticComponent<SpectrumWellProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
+forwardRef(function Well(props: SpectrumWellProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     role,

From 49b2b60e0cb184e9cf4a15b5eee855ee8256392a Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 27 Jun 2025 10:43:36 +1000
Subject: [PATCH 19/19] revert source file changes

---
 .../accordion/src/Accordion.tsx               | 20 ++++++-------------
 .../actionbar/src/ActionBarContainer.tsx      |  6 ++----
 .../@react-spectrum/avatar/src/Avatar.tsx     |  6 ++----
 packages/@react-spectrum/badge/src/Badge.tsx  |  6 ++----
 .../breadcrumbs/src/Breadcrumbs.tsx           |  6 ++----
 .../button/src/ActionButton.tsx               |  6 ++----
 .../button/src/ClearButton.tsx                |  6 ++----
 .../button/src/FieldButton.tsx                |  6 ++----
 .../button/src/LogicButton.tsx                |  6 ++----
 .../button/src/ToggleButton.tsx               |  6 ++----
 .../buttongroup/src/ButtonGroup.tsx           |  6 ++----
 .../@react-spectrum/card/src/CardBase.tsx     |  6 ++----
 .../card/src/CardViewContext.tsx              |  2 +-
 .../@react-spectrum/checkbox/src/Checkbox.tsx |  6 ++----
 .../checkbox/src/CheckboxGroup.tsx            |  6 ++----
 .../@react-spectrum/checkbox/src/context.ts   |  2 +-
 .../@react-spectrum/color/src/ColorEditor.tsx |  6 ++----
 .../@react-spectrum/color/src/ColorField.tsx  |  4 +---
 .../@react-spectrum/color/src/ColorPicker.tsx | 14 ++++++-------
 .../@react-spectrum/color/src/ColorSlider.tsx |  6 ++----
 .../@react-spectrum/color/src/ColorSwatch.tsx | 10 ++++------
 .../color/src/ColorSwatchPicker.tsx           |  6 ++----
 .../@react-spectrum/color/src/ColorWheel.tsx  |  6 ++----
 .../combobox/src/MobileComboBox.tsx           |  8 ++------
 .../contextualhelp/src/ContextualHelp.tsx     |  6 ++----
 .../@react-spectrum/datepicker/src/Input.tsx  | 18 +----------------
 .../dialog/src/AlertDialog.tsx                |  6 ++----
 .../@react-spectrum/dialog/src/Dialog.tsx     |  6 ++----
 .../@react-spectrum/dialog/src/context.ts     |  2 +-
 .../@react-spectrum/divider/src/Divider.tsx   |  6 ++----
 .../@react-spectrum/dropzone/src/DropZone.tsx |  6 ++----
 packages/@react-spectrum/form/src/Form.tsx    |  6 ++----
 .../src/IllustratedMessage.tsx                |  6 ++----
 packages/@react-spectrum/image/src/Image.tsx  |  8 +++-----
 .../inlinealert/src/InlineAlert.tsx           |  6 ++----
 packages/@react-spectrum/label/src/Field.tsx  |  4 +---
 .../@react-spectrum/label/src/HelpText.tsx    |  6 ++----
 packages/@react-spectrum/label/src/Label.tsx  |  6 ++----
 .../labeledvalue/src/LabeledValue.tsx         |  8 +++-----
 packages/@react-spectrum/layout/src/Flex.tsx  |  6 ++----
 packages/@react-spectrum/layout/src/Grid.tsx  |  6 ++----
 .../@react-spectrum/list/src/ListView.tsx     |  2 +-
 .../listbox/src/ListBoxContext.ts             |  2 +-
 .../@react-spectrum/menu/src/MenuTrigger.tsx  |  6 ++----
 packages/@react-spectrum/menu/src/context.ts  |  6 +++---
 packages/@react-spectrum/meter/src/Meter.tsx  |  6 ++----
 .../numberfield/src/NumberField.tsx           |  6 ++----
 .../@react-spectrum/overlays/src/Modal.tsx    |  8 +++-----
 .../@react-spectrum/overlays/src/Overlay.tsx  |  6 ++----
 .../@react-spectrum/overlays/src/Popover.tsx  |  6 ++----
 .../@react-spectrum/overlays/src/Tray.tsx     |  6 ++----
 .../progress/src/ProgressBar.tsx              |  6 ++----
 .../progress/src/ProgressBarBase.tsx          |  8 +++-----
 .../progress/src/ProgressCircle.tsx           |  6 ++----
 .../@react-spectrum/provider/src/Provider.tsx |  6 ++----
 .../@react-spectrum/provider/src/context.ts   |  2 +-
 packages/@react-spectrum/radio/src/Radio.tsx  |  6 ++----
 .../@react-spectrum/radio/src/RadioGroup.tsx  |  6 ++----
 packages/@react-spectrum/radio/src/context.ts |  2 +-
 .../slider/src/RangeSlider.tsx                |  6 ++----
 .../@react-spectrum/slider/src/Slider.tsx     |  6 ++----
 .../@react-spectrum/slider/src/SliderBase.tsx |  6 ++----
 .../statuslight/src/StatusLight.tsx           |  6 ++----
 .../steplist/src/StepListContext.ts           |  2 +-
 .../story-utils/src/GeneratePowerset.tsx      |  2 +-
 .../@react-spectrum/switch/src/Switch.tsx     |  6 ++----
 .../@react-spectrum/table/src/Resizer.tsx     |  6 ++----
 .../table/src/TableViewBase.tsx               |  4 ++--
 packages/@react-spectrum/text/src/Heading.tsx |  6 ++----
 .../@react-spectrum/text/src/Keyboard.tsx     |  6 ++----
 packages/@react-spectrum/text/src/Text.tsx    |  6 ++----
 .../textfield/src/TextArea.tsx                |  4 +---
 .../textfield/src/TextField.tsx               |  4 +---
 .../textfield/src/TextFieldBase.tsx           |  4 +---
 packages/@react-spectrum/toast/src/Toast.tsx  | 14 ++++++-------
 .../@react-spectrum/toast/src/Toaster.tsx     |  2 +-
 .../@react-spectrum/tooltip/src/Tooltip.tsx   |  6 ++----
 .../@react-spectrum/tooltip/src/context.ts    |  4 ++--
 packages/@react-spectrum/view/src/Content.tsx |  6 ++----
 packages/@react-spectrum/view/src/Footer.tsx  |  6 ++----
 packages/@react-spectrum/view/src/Header.tsx  |  6 ++----
 packages/@react-spectrum/well/src/Well.tsx    |  6 ++----
 82 files changed, 167 insertions(+), 327 deletions(-)

diff --git a/packages/@react-spectrum/accordion/src/Accordion.tsx b/packages/@react-spectrum/accordion/src/Accordion.tsx
index be8e23b193b..1344ca0cff1 100644
--- a/packages/@react-spectrum/accordion/src/Accordion.tsx
+++ b/packages/@react-spectrum/accordion/src/Accordion.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, forwardRefType, StyleProps} from '@react-types/shared';
 import {Button, DisclosureGroup, DisclosureGroupProps, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';
 import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
@@ -30,9 +30,7 @@ export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'clas
 const InternalAccordionContext = createContext<{isQuiet: boolean} | null>(null);
 
 /** A group of disclosures that can be expanded and collapsed. */
-export const Accordion:
-  (props: SpectrumAccordionProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null =
-/*#__PURE__*/(forwardRef as forwardRefType)(function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
+export const Accordion = /*#__PURE__*/(forwardRef as forwardRefType)(function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
@@ -57,9 +55,7 @@ export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'classNam
 }
 
 /** A collapsible section of content composed of a heading that expands and collapses a panel. */
-export const Disclosure:
-  (props: SpectrumDisclosureProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null =
-/*#__PURE__*/(forwardRef as forwardRefType)(function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
+export const Disclosure = /*#__PURE__*/(forwardRef as forwardRefType)(function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
@@ -86,16 +82,14 @@ export interface SpectrumDisclosurePanelProps extends Omit<DisclosurePanelProps,
 }
 
 /** The panel that contains the content of the disclosure. */
-export const DisclosurePanel:
-  (props: SpectrumDisclosurePanelProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>) => React.ReactElement | null =
-/*#__PURE__*/(forwardRef as forwardRefType)(function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
+export const DisclosurePanel = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
   return (
     <RACDisclosurePanel
       ref={domRef}
       {...styleProps as Omit<React.HTMLAttributes<HTMLElement>, 'role'>}
-      className={classNames(styles, 'spectrum-Accordion-itemContent', styleProps.className)}
+      className={classNames(styles, 'spectrum-Accordion-itemContent', styleProps.className)} 
       {...props}>
       {props.children}
     </RACDisclosurePanel>
@@ -113,9 +107,7 @@ export interface SpectrumDisclosureTitleProps extends DOMProps, AriaLabelingProp
 }
 
 /** The heading of the disclosure. */
-export const DisclosureTitle:
-  (props: SpectrumDisclosureTitleProps & React.RefAttributes<DOMRefValue<HTMLHeadingElement>>) => React.ReactElement | null =
-/*#__PURE__*/(forwardRef as forwardRefType)(function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>) {
+export const DisclosureTitle = /*#__PURE__*/(forwardRef as forwardRefType)(function DisclosureTitle(props: SpectrumDisclosureTitleProps, ref: DOMRef<HTMLHeadingElement>) {
   let {styleProps} = useStyleProps(props);
   let {level = 3} = props;
   let {direction} = useLocale();
diff --git a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx
index 3b1cdb4d5b3..ed74c03c882 100644
--- a/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx
+++ b/packages/@react-spectrum/actionbar/src/ActionBarContainer.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React from 'react';
 import {SpectrumActionBarContainerProps} from '@react-types/actionbar';
@@ -22,9 +22,7 @@ import {useProviderProps} from '@react-spectrum/provider';
  * ActionBarContainer wraps around an ActionBar and a component that supports selection. It handles
  * the ActionBar's position with respect to its linked component.
  */
-export const ActionBarContainer:
-  React.ForwardRefExoticComponent<SpectrumActionBarContainerProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function ActionBarContainer(props: SpectrumActionBarContainerProps, ref: DOMRef<HTMLDivElement>) {
+export const ActionBarContainer = React.forwardRef(function ActionBarContainer(props: SpectrumActionBarContainerProps, ref: DOMRef<HTMLDivElement>) {
   // Grabs specific props from the closest Provider (see https://react-spectrum.adobe.com/react-spectrum/Provider.html#property-groups). Remove if your component doesn't support any of the listed props.
   props = useProviderProps(props);
 
diff --git a/packages/@react-spectrum/avatar/src/Avatar.tsx b/packages/@react-spectrum/avatar/src/Avatar.tsx
index b738e78f60f..c3eee993820 100644
--- a/packages/@react-spectrum/avatar/src/Avatar.tsx
+++ b/packages/@react-spectrum/avatar/src/Avatar.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, dimensionValue, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {SpectrumAvatarProps} from '@react-types/avatar';
@@ -24,9 +24,7 @@ const SIZE_RE = /^size-\d+/;
 /**
  * An avatar is a thumbnail representation of an entity, such as a user or an organization.
  */
-export const Avatar:
-  React.ForwardRefExoticComponent<SpectrumAvatarProps & React.RefAttributes<DOMRefValue<HTMLImageElement>>> =
-forwardRef(function Avatar(props: SpectrumAvatarProps, ref: DOMRef<HTMLImageElement>) {
+export const Avatar = forwardRef(function Avatar(props: SpectrumAvatarProps, ref: DOMRef<HTMLImageElement>) {
   props = useSlotProps(props, 'avatar');
   const {
     alt = '',
diff --git a/packages/@react-spectrum/badge/src/Badge.tsx b/packages/@react-spectrum/badge/src/Badge.tsx
index e6b7423e131..552c9f56234 100644
--- a/packages/@react-spectrum/badge/src/Badge.tsx
+++ b/packages/@react-spectrum/badge/src/Badge.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {SpectrumBadgeProps} from '@react-types/badge';
@@ -23,9 +23,7 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
  */
-export const Badge:
-  React.ForwardRefExoticComponent<SpectrumBadgeProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Badge(props: SpectrumBadgeProps, ref: DOMRef<HTMLDivElement>) {
+export const Badge = forwardRef(function Badge(props: SpectrumBadgeProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     variant,
diff --git a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx
index 6b7d11a8cd3..e74fafb891d 100644
--- a/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx
@@ -12,7 +12,7 @@
 import {ActionButton} from '@react-spectrum/button';
 import {BreadcrumbItem} from './BreadcrumbItem';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
+import {DOMRef, Key} from '@react-types/shared';
 import FolderBreadcrumb from '@spectrum-icons/ui/FolderBreadcrumb';
 import {Menu, MenuTrigger} from '@react-spectrum/menu';
 import React, {ReactElement, useCallback, useRef} from 'react';
@@ -28,9 +28,7 @@ const MAX_VISIBLE_ITEMS = 4;
 /**
  * Breadcrumbs show hierarchy and navigational context for a user’s location within an application.
  */
-export const Breadcrumbs:
-  React.ForwardRefExoticComponent<SpectrumBreadcrumbsProps<unknown> & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-React.forwardRef(function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
+export const Breadcrumbs = React.forwardRef(function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
   props = useProviderProps(props);
   let {
     size = 'L',
diff --git a/packages/@react-spectrum/button/src/ActionButton.tsx b/packages/@react-spectrum/button/src/ActionButton.tsx
index 747c0f8cec2..c7969ddd5b7 100644
--- a/packages/@react-spectrum/button/src/ActionButton.tsx
+++ b/packages/@react-spectrum/button/src/ActionButton.tsx
@@ -12,7 +12,7 @@
 
 import {classNames, ClearSlots, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import CornerTriangle from '@spectrum-icons/ui/CornerTriangle';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -27,9 +27,7 @@ import {useProviderProps} from '@react-spectrum/provider';
  * ActionButtons allow users to perform an action.
  * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
  */
-export const ActionButton:
-  React.ForwardRefExoticComponent<SpectrumActionButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-React.forwardRef(function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ActionButton = React.forwardRef(function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   props = useProviderProps(props);
   props = useSlotProps(props, 'actionButton');
   let textProps = useSlotProps({UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')}, 'text');
diff --git a/packages/@react-spectrum/button/src/ClearButton.tsx b/packages/@react-spectrum/button/src/ClearButton.tsx
index 7caea076b7b..aed43c43639 100644
--- a/packages/@react-spectrum/button/src/ClearButton.tsx
+++ b/packages/@react-spectrum/button/src/ClearButton.tsx
@@ -13,7 +13,7 @@
 import {AriaButtonElementTypeProps, ButtonProps} from '@react-types/button';
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import CrossSmall from '@spectrum-icons/ui/CrossSmall';
-import {DOMProps, FocusableRef, FocusableRefValue, StyleProps} from '@react-types/shared';
+import {DOMProps, FocusableRef, StyleProps} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React, {ElementType} from 'react';
@@ -29,9 +29,7 @@ interface ClearButtonProps<T extends ElementType = 'button'> extends ButtonProps
   inset?: boolean
 }
 
-export const ClearButton:
-  React.ForwardRefExoticComponent<ClearButtonProps<'button'> & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-React.forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ClearButton = React.forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   let {
     children = <CrossSmall UNSAFE_className={styles['spectrum-Icon']} />,
     focusClassName,
diff --git a/packages/@react-spectrum/button/src/FieldButton.tsx b/packages/@react-spectrum/button/src/FieldButton.tsx
index a4466b83e70..a6070f06ea5 100644
--- a/packages/@react-spectrum/button/src/FieldButton.tsx
+++ b/packages/@react-spectrum/button/src/FieldButton.tsx
@@ -12,7 +12,7 @@
 
 import {ButtonProps} from '@react-types/button';
 import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMProps, FocusableRef, FocusableRefValue, RefObject, StyleProps} from '@react-types/shared';
+import {DOMProps, FocusableRef, RefObject, StyleProps} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -29,9 +29,7 @@ interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
 }
 
 // @private
-export const FieldButton:
-  React.ForwardRefExoticComponent<FieldButtonProps & React.RefAttributes<FocusableRefValue<HTMLElement, HTMLElement>>> =
-React.forwardRef(function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
+export const FieldButton = React.forwardRef(function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
   props = useSlotProps(props, 'button');
   let {
     isQuiet,
diff --git a/packages/@react-spectrum/button/src/LogicButton.tsx b/packages/@react-spectrum/button/src/LogicButton.tsx
index 1fffaff848d..ce04abf7d85 100644
--- a/packages/@react-spectrum/button/src/LogicButton.tsx
+++ b/packages/@react-spectrum/button/src/LogicButton.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -24,9 +24,7 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * A LogicButton displays an operator within a boolean logic sequence.
  */
-export const LogicButton:
-  React.ForwardRefExoticComponent<SpectrumLogicButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const LogicButton = React.forwardRef(function LogicButton(props: SpectrumLogicButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   props = useProviderProps(props);
   let {
     variant,
diff --git a/packages/@react-spectrum/button/src/ToggleButton.tsx b/packages/@react-spectrum/button/src/ToggleButton.tsx
index ea6f61e9617..b5356661919 100644
--- a/packages/@react-spectrum/button/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/button/src/ToggleButton.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
@@ -27,9 +27,7 @@ import {useToggleState} from '@react-stately/toggle';
  * ToggleButtons allow users to toggle a selection on or off, for example
  * switching between two states or modes.
  */
-export const ToggleButton:
-  React.ForwardRefExoticComponent<SpectrumToggleButtonProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-React.forwardRef(function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ToggleButton = React.forwardRef(function ToggleButton(props: SpectrumToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   props = useProviderProps(props);
   let {
     isQuiet,
diff --git a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx
index 89790b3a6ef..f01e328bb8f 100644
--- a/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx
+++ b/packages/@react-spectrum/buttongroup/src/ButtonGroup.tsx
@@ -18,7 +18,7 @@ import {
   useSlotProps,
   useStyleProps
 } from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';
 import {Provider, useProvider, useProviderProps} from '@react-spectrum/provider';
 import React, {useCallback, useRef} from 'react';
@@ -28,9 +28,7 @@ import styles from '@adobe/spectrum-css-temp/components/buttongroup/vars.css';
 /**
  * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
  */
-export const ButtonGroup:
-  React.ForwardRefExoticComponent<SpectrumButtonGroupProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const ButtonGroup = React.forwardRef(function ButtonGroup(props: SpectrumButtonGroupProps, ref: DOMRef<HTMLDivElement>) {
   let {scale} = useProvider();
   props = useProviderProps(props);
   props = useSlotProps(props, 'buttonGroup');
diff --git a/packages/@react-spectrum/card/src/CardBase.tsx b/packages/@react-spectrum/card/src/CardBase.tsx
index ec9fd7d1501..3efd75dd3f9 100644
--- a/packages/@react-spectrum/card/src/CardBase.tsx
+++ b/packages/@react-spectrum/card/src/CardBase.tsx
@@ -14,7 +14,7 @@
 import {AriaCardProps, SpectrumCardProps} from '@react-types/card';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, SlotProvider, useDOMRef, useHasChild, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue, Node} from '@react-types/shared';
+import {DOMRef, Node} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useLayoutEffect, useResizeObserver, useSlotId} from '@react-aria/utils';
 import {FocusRing, getFocusableTreeWalker} from '@react-aria/focus';
 import React, {HTMLAttributes, useCallback, useMemo, useRef, useState} from 'react';
@@ -31,9 +31,7 @@ interface CardBaseProps<T> extends SpectrumCardProps {
 /**
  * TODO: Add description of component here.
  */
-export const CardBase:
-  React.ForwardRefExoticComponent<CardBaseProps<object> & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const CardBase = React.forwardRef(function CardBase<T extends object>(props: CardBaseProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let context = useCardViewContext() || {}; // we can call again here, won't change from Card.tsx
   let {state} = context;
diff --git a/packages/@react-spectrum/card/src/CardViewContext.tsx b/packages/@react-spectrum/card/src/CardViewContext.tsx
index 2fca6017943..e474bafe3a5 100644
--- a/packages/@react-spectrum/card/src/CardViewContext.tsx
+++ b/packages/@react-spectrum/card/src/CardViewContext.tsx
@@ -20,7 +20,7 @@ export interface CardViewContextValue {
   cardOrientation: 'horizontal' | 'vertical',
   renderEmptyState: () => React.ReactNode
 }
-export const CardViewContext: React.Context<CardViewContextValue> = React.createContext<CardViewContextValue>(null);
+export const CardViewContext = React.createContext<CardViewContextValue>(null);
 
 export function useCardViewContext(): CardViewContextValue | null {
   return useContext(CardViewContext);
diff --git a/packages/@react-spectrum/checkbox/src/Checkbox.tsx b/packages/@react-spectrum/checkbox/src/Checkbox.tsx
index 36c835e1018..9ce0915c976 100644
--- a/packages/@react-spectrum/checkbox/src/Checkbox.tsx
+++ b/packages/@react-spectrum/checkbox/src/Checkbox.tsx
@@ -15,7 +15,7 @@ import {CheckboxGroupContext} from './context';
 import CheckmarkSmall from '@spectrum-icons/ui/CheckmarkSmall';
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import DashSmall from '@spectrum-icons/ui/DashSmall';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import React, {forwardRef, useContext, useRef} from 'react';
 import {SpectrumCheckboxProps} from '@react-types/checkbox';
@@ -30,9 +30,7 @@ import {useToggleState} from '@react-stately/toggle';
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
-export const Checkbox:
-  React.ForwardRefExoticComponent<SpectrumCheckboxProps & React.RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
-forwardRef(function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Checkbox = forwardRef(function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
   let originalProps = props;
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useFocusableRef(ref, inputRef);
diff --git a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
index bc13f857b80..721ab646fff 100644
--- a/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/checkbox/src/CheckboxGroup.tsx
@@ -12,7 +12,7 @@
 
 import {CheckboxGroupContext} from './context';
 import {classNames, useDOMRef} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {Provider, useProviderProps} from '@react-spectrum/provider';
 import React from 'react';
@@ -25,9 +25,7 @@ import {useFormProps} from '@react-spectrum/form';
 /**
  * A CheckboxGroup allows users to select one or more items from a list of choices.
  */
-export const CheckboxGroup:
-  React.ForwardRefExoticComponent<SpectrumCheckboxGroupProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
+export const CheckboxGroup = React.forwardRef(function CheckboxGroup(props: SpectrumCheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/checkbox/src/context.ts b/packages/@react-spectrum/checkbox/src/context.ts
index 1a06ae2160e..a92ecefa7ff 100644
--- a/packages/@react-spectrum/checkbox/src/context.ts
+++ b/packages/@react-spectrum/checkbox/src/context.ts
@@ -13,4 +13,4 @@
 import {CheckboxGroupState} from '@react-stately/checkbox';
 import React from 'react';
 
-export const CheckboxGroupContext: React.Context<CheckboxGroupState | null> = React.createContext<CheckboxGroupState | null>(null);
+export const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(null);
diff --git a/packages/@react-spectrum/color/src/ColorEditor.tsx b/packages/@react-spectrum/color/src/ColorEditor.tsx
index 43838cf27a7..b7ce2c39ff5 100644
--- a/packages/@react-spectrum/color/src/ColorEditor.tsx
+++ b/packages/@react-spectrum/color/src/ColorEditor.tsx
@@ -2,7 +2,7 @@ import {ColorArea} from './ColorArea';
 import {ColorField} from './ColorField';
 import {ColorSlider} from './ColorSlider';
 import {ColorSpace} from '@react-types/color';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {getColorChannels} from '@react-stately/color';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -20,9 +20,7 @@ export interface SpectrumColorEditorProps {
 /**
  * ColorEditor provides a default UI for editing colors within a ColorPicker.
  */
-export const ColorEditor:
-  React.ForwardRefExoticComponent<SpectrumColorEditorProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorEditor = React.forwardRef(function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
   let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
   let domRef = useDOMRef(ref);
   let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx
index fa625799e0f..4e4c0f79100 100644
--- a/packages/@react-spectrum/color/src/ColorField.tsx
+++ b/packages/@react-spectrum/color/src/ColorField.tsx
@@ -26,9 +26,7 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * A color field allows users to edit a hex color or individual color channel value.
  */
-export const ColorField:
-  React.ForwardRefExoticComponent<SpectrumColorFieldProps & React.RefAttributes<TextFieldRef<HTMLInputElement>>> =
-React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef<HTMLInputElement>>) {
+export const ColorField = React.forwardRef(function ColorField(props: SpectrumColorFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   [props] = useContextProps(props, null, ColorFieldContext);
diff --git a/packages/@react-spectrum/color/src/ColorPicker.tsx b/packages/@react-spectrum/color/src/ColorPicker.tsx
index 7401950055b..c0be4288e97 100644
--- a/packages/@react-spectrum/color/src/ColorPicker.tsx
+++ b/packages/@react-spectrum/color/src/ColorPicker.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ColorPicker as AriaColorPicker, Button, Color} from 'react-aria-components';
-import {AriaLabelingProps, FocusableRef, FocusableRefValue, ValueBase} from '@react-types/shared';
+import {AriaLabelingProps, FocusableRef, ValueBase} from '@react-types/shared';
 import {ColorSwatch} from './ColorSwatch';
 import {Content} from '@react-spectrum/view';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
@@ -40,16 +40,14 @@ export interface SpectrumColorPickerProps extends ValueBase<string | Color, Colo
 /**
  * A ColorPicker combines a swatch with a customizable popover for editing a color.
  */
-export const ColorPicker:
-  React.ForwardRefExoticComponent<SpectrumColorPickerProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ColorPicker = React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: FocusableRef<HTMLButtonElement>) {
   let swatchRef = useRef(null);
   let domRef = useFocusableRef(ref);
   let labelId = useId();
   return (
     <AriaColorPicker {...props}>
       <DialogTrigger type="popover" mobileType="tray" targetRef={unwrapDOMRef(swatchRef)}>
-        <Button
+        <Button 
           ref={domRef}
           className={style({
             backgroundColor: 'transparent',
@@ -93,13 +91,13 @@ React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: Focu
                   aria-describedby={props['aria-describedby']}
                   aria-details={props['aria-details']} />
               </div>
-              {props.label &&
+              {props.label && 
                 <span id={labelId}>{props.label}</span>
               }
             </>
           )}
         </Button>
-        <Dialog
+        <Dialog 
           aria-labelledby={props.label ? labelId : props['aria-labelledby']}
           aria-label={props['aria-label']}
           UNSAFE_style={{
@@ -107,7 +105,7 @@ React.forwardRef(function ColorPicker(props: SpectrumColorPickerProps, ref: Focu
             minWidth: 0,
             margin: '0 auto' // Center within tray.
           }}>
-          <Content
+          <Content 
             UNSAFE_style={{
               position: 'relative',
               margin: 'calc(var(--spectrum-dialog-padding) * -1)',
diff --git a/packages/@react-spectrum/color/src/ColorSlider.tsx b/packages/@react-spectrum/color/src/ColorSlider.tsx
index 02dbfa1e594..f42e5af782c 100644
--- a/packages/@react-spectrum/color/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/color/src/ColorSlider.tsx
@@ -13,7 +13,7 @@
 import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {ColorSliderContext, useContextProps} from 'react-aria-components';
 import {ColorThumb} from './ColorThumb';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {Label} from '@react-spectrum/label';
 import React, {useRef, useState} from 'react';
 import {SpectrumColorSliderProps} from '@react-types/color';
@@ -27,9 +27,7 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * ColorSliders allow users to adjust an individual channel of a color value.
  */
-export const ColorSlider:
-  React.ForwardRefExoticComponent<SpectrumColorSliderProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
-React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let inputRef = useRef(null);
   let trackRef = useRef(null);
diff --git a/packages/@react-spectrum/color/src/ColorSwatch.tsx b/packages/@react-spectrum/color/src/ColorSwatch.tsx
index 63fa5741208..ff7ba8a0484 100644
--- a/packages/@react-spectrum/color/src/ColorSwatch.tsx
+++ b/packages/@react-spectrum/color/src/ColorSwatch.tsx
@@ -13,8 +13,8 @@
 import {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';
 import {Color} from '@react-types/color';
 import {ColorSwatchContext, useContextProps} from 'react-aria-components';
-import {DOMRef, DOMRefValue, StyleProps} from '@react-types/shared';
-import React, {Context, createContext, forwardRef, JSX, ReactElement, useContext} from 'react';
+import {DOMRef, StyleProps} from '@react-types/shared';
+import React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';
 import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
 import {useDOMRef, useStyleProps} from '@react-spectrum/utils';
 
@@ -35,14 +35,12 @@ interface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps,
   useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element
 }
 
-export const SpectrumColorSwatchContext: Context<SpectrumColorSwatchContextValue | null> = createContext<SpectrumColorSwatchContextValue | null>(null);
+export const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
 
 /**
  * A ColorSwatch displays a preview of a selected color.
  */
-export const ColorSwatch:
-  React.ForwardRefExoticComponent<SpectrumColorSwatchProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+export const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
   let domRef = useDOMRef(ref);
   [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);
   let {colorSwatchProps, color} = useColorSwatch(props);
diff --git a/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx
index 74c52afdbfe..320e8fb0fdc 100644
--- a/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx
+++ b/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx
@@ -12,7 +12,7 @@
 
 import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components';
 import {Color} from '@react-types/color';
-import {DOMRef, DOMRefValue, StyleProps, ValueBase} from '@react-types/shared';
+import {DOMRef, StyleProps, ValueBase} from '@react-types/shared';
 import React, {forwardRef, ReactElement, ReactNode} from 'react';
 import {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';
 import {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};
@@ -41,9 +41,7 @@ export interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color
 /**
  * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
  */
-export const ColorSwatchPicker:
-  React.ForwardRefExoticComponent<SpectrumColorSwatchPickerProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
   let {
     density = 'regular',
     size = 'M',
diff --git a/packages/@react-spectrum/color/src/ColorWheel.tsx b/packages/@react-spectrum/color/src/ColorWheel.tsx
index 0a4de3fbd85..b187a4a1f6b 100644
--- a/packages/@react-spectrum/color/src/ColorWheel.tsx
+++ b/packages/@react-spectrum/color/src/ColorWheel.tsx
@@ -13,7 +13,7 @@
 import {classNames, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {ColorThumb} from './ColorThumb';
 import {ColorWheelContext, useContextProps} from 'react-aria-components';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {SpectrumColorWheelProps} from '@react-types/color';
 import styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';
@@ -28,9 +28,7 @@ const WHEEL_THICKNESS = 24;
 /**
  * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export const ColorWheel:
-  React.ForwardRefExoticComponent<SpectrumColorWheelProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
-React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
+export const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let inputRef = useRef(null);
   let containerRef = useFocusableRef(ref, inputRef);
diff --git a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
index d07f3075065..3b7b892dec1 100644
--- a/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/MobileComboBox.tsx
@@ -45,9 +45,7 @@ import {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useFormValidation} from '@react-aria/form';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export const MobileComboBox:
-  React.ForwardRefExoticComponent<SpectrumComboBoxProps<any> & React.RefAttributes<FocusableRefValue<HTMLElement, HTMLElement>>> =
-React.forwardRef(function MobileComboBox(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
+export const MobileComboBox = React.forwardRef(function MobileComboBox(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
 
   let {
@@ -168,9 +166,7 @@ interface ComboBoxButtonProps extends AriaButtonProps {
   className?: string
 }
 
-export const ComboBoxButton:
-  React.ForwardRefExoticComponent<ComboBoxButtonProps & React.RefAttributes<HTMLDivElement>> =
-React.forwardRef(function ComboBoxButton(props: ComboBoxButtonProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: ComboBoxButtonProps, ref: ForwardedRef<HTMLDivElement>) {
   let {
     isQuiet,
     isDisabled,
diff --git a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
index 1f93425438f..4d2857e0032 100644
--- a/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/contextualhelp/src/ContextualHelp.tsx
@@ -13,7 +13,7 @@
 import {ActionButton} from '@react-spectrum/button';
 import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import HelpOutline from '@spectrum-icons/workflow/HelpOutline';
 import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
 import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
@@ -27,9 +27,7 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 /**
  * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
  */
-export const ContextualHelp:
-  React.ForwardRefExoticComponent<SpectrumContextualHelpProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>> =
-React.forwardRef(function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ContextualHelp = React.forwardRef(function ContextualHelp(props: SpectrumContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
   let {
     variant = 'help',
     placement = 'bottom start',
diff --git a/packages/@react-spectrum/datepicker/src/Input.tsx b/packages/@react-spectrum/datepicker/src/Input.tsx
index e86acd524ec..ba8f56eb937 100644
--- a/packages/@react-spectrum/datepicker/src/Input.tsx
+++ b/packages/@react-spectrum/datepicker/src/Input.tsx
@@ -14,28 +14,12 @@ import Alert from '@spectrum-icons/ui/AlertMedium';
 import Checkmark from '@spectrum-icons/ui/CheckmarkMedium';
 import {classNames, useValueEffect} from '@react-spectrum/utils';
 import datepickerStyles from './styles.css';
-import {FocusableProps, ValidationState} from '@react-types/shared';
 import {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import React, {ReactElement, useCallback, useRef} from 'react';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 
-interface InputProps extends FocusableProps {
-  isDisabled?: boolean,
-  isQuiet?: boolean,
-  inputClassName?: string,
-  validationState: ValidationState | null,
-  children?: React.ReactNode,
-  fieldProps?: React.HTMLAttributes<HTMLDivElement>,
-  className?: string,
-  style?: React.CSSProperties,
-  disableFocusRing?: boolean,
-  minWidth?: string
-}
-
-export const Input:
-  React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLElement>> =
-React.forwardRef(function Input(props: InputProps, ref: any) {
+export const Input = React.forwardRef(function Input(props: any, ref: any) {
   let inputRef = useRef<HTMLInputElement | null>(null);
   let {
     isDisabled,
diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
index 0e87f39d551..00f6cb9a2a7 100644
--- a/packages/@react-spectrum/dialog/src/AlertDialog.tsx
+++ b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
@@ -19,7 +19,7 @@ import {Content} from '@react-spectrum/view';
 import {Dialog} from './Dialog';
 import {DialogContext, DialogContextValue} from './context';
 import {Divider} from '@react-spectrum/divider';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {Heading} from '@react-spectrum/text';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -32,9 +32,7 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 /**
  * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
  */
-export const AlertDialog:
-  React.ForwardRefExoticComponent<SpectrumAlertDialogProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function AlertDialog(props: SpectrumAlertDialogProps, ref: DOMRef) {
+export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertDialogProps, ref: DOMRef) {
   let {
     onClose = () => {}
   } = useContext(DialogContext) || {} as DialogContextValue;
diff --git a/packages/@react-spectrum/dialog/src/Dialog.tsx b/packages/@react-spectrum/dialog/src/Dialog.tsx
index 5a88723f01e..70adf576081 100644
--- a/packages/@react-spectrum/dialog/src/Dialog.tsx
+++ b/packages/@react-spectrum/dialog/src/Dialog.tsx
@@ -22,7 +22,7 @@ import {
 } from '@react-spectrum/utils';
 import CrossLarge from '@spectrum-icons/ui/CrossLarge';
 import {DialogContext, DialogContextValue} from './context';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {Grid} from '@react-spectrum/layout';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -45,9 +45,7 @@ let sizeMap = {
  * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
  * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
  */
-export const Dialog:
-  React.ForwardRefExoticComponent<SpectrumDialogProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-React.forwardRef(function Dialog(props: SpectrumDialogProps, ref: DOMRef) {
+export const Dialog = React.forwardRef(function Dialog(props: SpectrumDialogProps, ref: DOMRef) {
   props = useSlotProps(props, 'dialog');
   let {
     type = 'modal',
diff --git a/packages/@react-spectrum/dialog/src/context.ts b/packages/@react-spectrum/dialog/src/context.ts
index f2c5aa496bd..02111ea23d9 100644
--- a/packages/@react-spectrum/dialog/src/context.ts
+++ b/packages/@react-spectrum/dialog/src/context.ts
@@ -18,4 +18,4 @@ export interface DialogContextValue extends HTMLAttributes<HTMLElement> {
   onClose: () => void
 }
 
-export const DialogContext: React.Context<DialogContextValue | null> = React.createContext<DialogContextValue | null>(null);
+export const DialogContext = React.createContext<DialogContextValue | null>(null);
diff --git a/packages/@react-spectrum/divider/src/Divider.tsx b/packages/@react-spectrum/divider/src/Divider.tsx
index 23f78c1f768..f86f766777d 100644
--- a/packages/@react-spectrum/divider/src/Divider.tsx
+++ b/packages/@react-spectrum/divider/src/Divider.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import React, {ElementType} from 'react';
 import {SpectrumDividerProps} from '@react-types/divider';
 import styles from '@adobe/spectrum-css-temp/components/rule/vars.css';
@@ -27,9 +27,7 @@ let sizeMap = {
  * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
  * They can also be used to establish rhythm and hierarchy.
  */
-export const Divider:
-  React.ForwardRefExoticComponent<SpectrumDividerProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-React.forwardRef(function Divider(props: SpectrumDividerProps, ref: DOMRef) {
+export const Divider = React.forwardRef(function Divider(props: SpectrumDividerProps, ref: DOMRef) {
   props = useSlotProps(props, 'divider');
   let {
     size = 'L',
diff --git a/packages/@react-spectrum/dropzone/src/DropZone.tsx b/packages/@react-spectrum/dropzone/src/DropZone.tsx
index 800c5a26d3e..1c272755267 100644
--- a/packages/@react-spectrum/dropzone/src/DropZone.tsx
+++ b/packages/@react-spectrum/dropzone/src/DropZone.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
 import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {DropZoneProps, HeadingContext, Provider, DropZone as RACDropZone} from 'react-aria-components';
 // @ts-ignore
@@ -39,9 +39,7 @@ let filterProps = (props) => {
 /**
  * A drop zone is an area into which one or multiple objects can be dragged and dropped.
  */
-export const DropZone:
-  React.ForwardRefExoticComponent<SpectrumDropZoneProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function DropZone(props: SpectrumDropZoneProps, ref: DOMRef<HTMLDivElement>) {
+export const DropZone = React.forwardRef(function DropZone(props: SpectrumDropZoneProps, ref: DOMRef<HTMLDivElement>) {
   let {children, isFilled, replaceMessage, ...otherProps} = props;
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/form/src/Form.tsx b/packages/@react-spectrum/form/src/Form.tsx
index 5917517eed8..b15d9012d5f 100644
--- a/packages/@react-spectrum/form/src/Form.tsx
+++ b/packages/@react-spectrum/form/src/Form.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Alignment, DOMRef, DOMRefValue, LabelPosition, SpectrumLabelableProps} from '@react-types/shared';
+import {Alignment, DOMRef, LabelPosition, SpectrumLabelableProps} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {FormValidationContext} from '@react-stately/form';
@@ -47,9 +47,7 @@ const formPropNames = new Set([
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
  */
-export const Form:
-  React.ForwardRefExoticComponent<SpectrumFormProps & React.RefAttributes<DOMRefValue<HTMLFormElement>>> =
-React.forwardRef(function Form(props: SpectrumFormProps, ref: DOMRef<HTMLFormElement>) {
+export const Form = React.forwardRef(function Form(props: SpectrumFormProps, ref: DOMRef<HTMLFormElement>) {
   props = useProviderProps(props);
   let {
     children,
diff --git a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx
index 5a5a2c6b758..038545fc671 100644
--- a/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/illustratedmessage/src/IllustratedMessage.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, ClearSlots, SlotProvider, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {Flex} from '@react-spectrum/layout';
 import React, {forwardRef} from 'react';
@@ -22,9 +22,7 @@ import styles from '@adobe/spectrum-css-temp/components/illustratedmessage/vars.
  * An IllustratedMessage displays an illustration and a message, usually
  * for an empty state or an error page.
  */
-export const IllustratedMessage:
-  React.ForwardRefExoticComponent<SpectrumIllustratedMessageProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function IllustratedMessage(props: SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
+export const IllustratedMessage = forwardRef(function IllustratedMessage(props: SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
   props = useSlotProps(props, 'illustration');
   let {
     children,
diff --git a/packages/@react-spectrum/image/src/Image.tsx b/packages/@react-spectrum/image/src/Image.tsx
index fec71883871..487f416368f 100644
--- a/packages/@react-spectrum/image/src/Image.tsx
+++ b/packages/@react-spectrum/image/src/Image.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React from 'react';
 import {SpectrumImageProps} from '@react-types/image';
@@ -21,9 +21,7 @@ import {useProviderProps} from '@react-spectrum/provider';
 /**
  * Image is used to insert and display an image within a component.
  */
-export const Image:
-  React.ForwardRefExoticComponent<SpectrumImageProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(// incomplete component for show right now
+export const Image = React.forwardRef(// incomplete component for show right now
 
 function Image(props: SpectrumImageProps, ref: DOMRef<HTMLDivElement>) {
   /* Slots should be able to pass an alt for default behavior, but in Images, the child may know better. */
@@ -61,7 +59,7 @@ function Image(props: SpectrumImageProps, ref: DOMRef<HTMLDivElement>) {
         src={src}
         alt={userProvidedAlt || alt}
         style={{objectFit}}
-        className={classNames(styles, 'spectrum-Image-img')}
+        className={classNames(styles, 'spectrum-Image-img')} 
         onError={props?.onError}
         onLoad={props?.onLoad} />
     </div>
diff --git a/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx b/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx
index 1e951f13b16..396647e2cfc 100644
--- a/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx
+++ b/packages/@react-spectrum/inlinealert/src/InlineAlert.tsx
@@ -12,7 +12,7 @@
 
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMProps, DOMRef, DOMRefValue, StyleProps} from '@react-types/shared';
+import {DOMProps, DOMRef, StyleProps} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {FocusRing} from '@react-aria/focus';
 import {Grid} from '@react-spectrum/layout';
@@ -52,9 +52,7 @@ let ICONS = {
  * Inline alerts display a non-modal message associated with objects in a view.
  * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
  */
-export const InlineAlert:
-  React.ForwardRefExoticComponent<SpectrumInlineAlertProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef<HTMLDivElement>) {
+export const InlineAlert = React.forwardRef(function InlineAlert(props: SpectrumInlineAlertProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {
     children,
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
index 0966daa7154..45feae08714 100644
--- a/packages/@react-spectrum/label/src/Field.tsx
+++ b/packages/@react-spectrum/label/src/Field.tsx
@@ -21,9 +21,7 @@ import React, {ReactNode, Ref} from 'react';
 import {SpectrumFieldProps} from '@react-types/label';
 import {useFormProps} from '@react-spectrum/form';
 
-export const Field:
-  React.ForwardRefExoticComponent<SpectrumFieldProps & React.RefAttributes<HTMLElement>> =
-React.forwardRef(function Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {
+export const Field = React.forwardRef(function Field(props: SpectrumFieldProps, ref: Ref<HTMLElement>) {
   let formProps = useFormProps(props);
   let isInForm = formProps !== props;
   props = formProps;
diff --git a/packages/@react-spectrum/label/src/HelpText.tsx b/packages/@react-spectrum/label/src/HelpText.tsx
index 29afdaa3fa6..85f08bc9be6 100644
--- a/packages/@react-spectrum/label/src/HelpText.tsx
+++ b/packages/@react-spectrum/label/src/HelpText.tsx
@@ -12,7 +12,7 @@
 
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';
+import {DOMRef, SpectrumFieldValidation, SpectrumHelpTextProps, StyleProps, Validation} from '@react-types/shared';
 import React, {HTMLAttributes, ReactNode} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/helptext/vars.css';
 
@@ -28,9 +28,7 @@ interface HelpTextProps extends Omit<SpectrumHelpTextProps, 'errorMessage'>, Omi
 /**
  * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
  */
-export const HelpText:
-  React.ForwardRefExoticComponent<HelpTextProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {
+export const HelpText = React.forwardRef(function HelpText(props: HelpTextProps, ref: DOMRef<HTMLDivElement>) {
   let {
     description,
     errorMessage,
diff --git a/packages/@react-spectrum/label/src/Label.tsx b/packages/@react-spectrum/label/src/Label.tsx
index 60b6876c7f1..8e3a5b5893c 100644
--- a/packages/@react-spectrum/label/src/Label.tsx
+++ b/packages/@react-spectrum/label/src/Label.tsx
@@ -12,7 +12,7 @@
 
 import Asterisk from '@spectrum-icons/ui/Asterisk';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -22,9 +22,7 @@ import styles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
-export const Label:
-  React.ForwardRefExoticComponent<SpectrumLabelProps & React.RefAttributes<DOMRefValue<HTMLLabelElement>>> =
-React.forwardRef(function Label(props: SpectrumLabelProps, ref: DOMRef<HTMLLabelElement>) {
+export const Label = React.forwardRef(function Label(props: SpectrumLabelProps, ref: DOMRef<HTMLLabelElement>) {
   props = useProviderProps(props);
   let {
     children,
diff --git a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx b/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx
index 27240222012..0ad3da053cc 100644
--- a/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx
+++ b/packages/@react-spectrum/labeledvalue/src/LabeledValue.tsx
@@ -12,7 +12,7 @@
 
 import {CalendarDate, CalendarDateTime, getLocalTimeZone, Time, toCalendarDateTime, today, ZonedDateTime} from '@internationalized/date';
 import {classNames, useDOMRef} from '@react-spectrum/utils';
-import type {DOMProps, DOMRef, DOMRefValue, RangeValue, SpectrumLabelableProps, StyleProps} from '@react-types/shared';
+import type {DOMProps, DOMRef, RangeValue, SpectrumLabelableProps, StyleProps} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {filterDOMProps} from '@react-aria/utils';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
@@ -79,9 +79,7 @@ export type SpectrumLabeledValueProps<T> = LabeledValueProps<T> & LabeledValueBa
 /**
  * A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
  */
-export const LabeledValue:
-  React.ForwardRefExoticComponent<SpectrumLabeledValueProps<SpectrumLabeledValueTypes> & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-React.forwardRef(function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {
+export const LabeledValue = React.forwardRef(function LabeledValue<T extends SpectrumLabeledValueTypes>(props: SpectrumLabeledValueProps<T>, ref: DOMRef<HTMLElement>) {
   let {
     value,
     formatOptions
@@ -97,7 +95,7 @@ React.forwardRef(function LabeledValue<T extends SpectrumLabeledValueTypes>(prop
       throw new Error('LabeledValue cannot contain an editable value.');
     }
   }, [domRef]);
-
+  
 
   let children;
   if (Array.isArray(value)) {
diff --git a/packages/@react-spectrum/layout/src/Flex.tsx b/packages/@react-spectrum/layout/src/Flex.tsx
index 5f5bf75e9b9..494a54cded1 100644
--- a/packages/@react-spectrum/layout/src/Flex.tsx
+++ b/packages/@react-spectrum/layout/src/Flex.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, passthroughStyle, responsiveDimensionValue, StyleHandlers, useBreakpoint, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {FlexProps} from '@react-types/layout';
 import React, {forwardRef} from 'react';
@@ -29,9 +29,7 @@ const flexStyleProps: StyleHandlers = {
  * A layout container using flexbox. Provides Spectrum dimension values, and supports the gap
  * property to define consistent spacing between items.
  */
-export const Flex:
-  React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
+export const Flex = forwardRef(function Flex(props: FlexProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     ...otherProps
diff --git a/packages/@react-spectrum/layout/src/Grid.tsx b/packages/@react-spectrum/layout/src/Grid.tsx
index a059c5619b5..b09a89705a4 100644
--- a/packages/@react-spectrum/layout/src/Grid.tsx
+++ b/packages/@react-spectrum/layout/src/Grid.tsx
@@ -18,7 +18,7 @@ import {
   useDOMRef,
   useStyleProps
 } from '@react-spectrum/utils';
-import {DimensionValue, DOMRef, DOMRefValue} from '@react-types/shared';
+import {DimensionValue, DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {GridProps} from '@react-types/layout';
 import React, {forwardRef} from 'react';
@@ -44,9 +44,7 @@ const gridStyleProps: StyleHandlers = {
  * A layout container using CSS grid. Supports Spectrum dimensions as values to
  * ensure consistent and adaptive sizing and spacing.
  */
-export const Grid:
-  React.ForwardRefExoticComponent<GridProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {
+export const Grid = forwardRef(function Grid(props: GridProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     ...otherProps
diff --git a/packages/@react-spectrum/list/src/ListView.tsx b/packages/@react-spectrum/list/src/ListView.tsx
index c47b29f85af..9481f98a410 100644
--- a/packages/@react-spectrum/list/src/ListView.tsx
+++ b/packages/@react-spectrum/list/src/ListView.tsx
@@ -75,7 +75,7 @@ interface ListViewContextValue<T> {
   renderEmptyState?: () => JSX.Element
 }
 
-export const ListViewContext: React.Context<ListViewContextValue<unknown> | null> = React.createContext<ListViewContextValue<unknown> | null>(null);
+export const ListViewContext = React.createContext<ListViewContextValue<unknown> | null>(null);
 
 const ROW_HEIGHTS = {
   compact: {
diff --git a/packages/@react-spectrum/listbox/src/ListBoxContext.ts b/packages/@react-spectrum/listbox/src/ListBoxContext.ts
index a00d036a96b..346d222f2fe 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxContext.ts
+++ b/packages/@react-spectrum/listbox/src/ListBoxContext.ts
@@ -20,4 +20,4 @@ interface ListBoxContextValue {
   shouldUseVirtualFocus: boolean
 }
 
-export const ListBoxContext: React.Context<ListBoxContextValue | null> = React.createContext<ListBoxContextValue | null>(null);
+export const ListBoxContext = React.createContext<ListBoxContextValue | null>(null);
diff --git a/packages/@react-spectrum/menu/src/MenuTrigger.tsx b/packages/@react-spectrum/menu/src/MenuTrigger.tsx
index 38a42030152..8c9e59d8cc7 100644
--- a/packages/@react-spectrum/menu/src/MenuTrigger.tsx
+++ b/packages/@react-spectrum/menu/src/MenuTrigger.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {MenuContext} from './context';
 import {Placement} from '@react-types/overlays';
 import {Popover, Tray} from '@react-spectrum/overlays';
@@ -26,9 +26,7 @@ import {useMenuTriggerState} from '@react-stately/menu';
  * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
  * linking the Menu's open state with the trigger's press state.
  */
-export const MenuTrigger:
-  React.ForwardRefExoticComponent<SpectrumMenuTriggerProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
+export const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
   let triggerRef = useRef<HTMLElement>(null);
   let domRef = useDOMRef(ref);
   let menuTriggerRef = domRef || triggerRef;
diff --git a/packages/@react-spectrum/menu/src/context.ts b/packages/@react-spectrum/menu/src/context.ts
index 4ca71796e51..3ce267adbb8 100644
--- a/packages/@react-spectrum/menu/src/context.ts
+++ b/packages/@react-spectrum/menu/src/context.ts
@@ -26,7 +26,7 @@ export interface MenuContextValue extends Omit<HTMLAttributes<HTMLElement>, 'aut
   submenuLevel?: number
 }
 
-export const MenuContext: React.Context<MenuContextValue> = React.createContext<MenuContextValue>({});
+export const MenuContext = React.createContext<MenuContextValue>({});
 
 export function useMenuContext(): MenuContextValue {
   return useContext(MenuContext);
@@ -41,7 +41,7 @@ export interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents,
   isOpen?: boolean
 }
 
-export const SubmenuTriggerContext: React.Context<SubmenuTriggerContextValue | undefined> = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);
+export const SubmenuTriggerContext = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);
 
 export function useSubmenuTriggerContext(): SubmenuTriggerContextValue | undefined {
   return useContext(SubmenuTriggerContext);
@@ -56,7 +56,7 @@ export interface MenuStateContextValue<T> {
   rootMenuTriggerState?: RootMenuTriggerState
 }
 
-export const MenuStateContext: React.Context<MenuStateContextValue<any> | undefined> = React.createContext<MenuStateContextValue<any> | undefined>(undefined);
+export const MenuStateContext = React.createContext<MenuStateContextValue<any> | undefined>(undefined);
 
 export function useMenuStateContext(): MenuStateContextValue<any> | undefined {
   return useContext(MenuStateContext);
diff --git a/packages/@react-spectrum/meter/src/Meter.tsx b/packages/@react-spectrum/meter/src/Meter.tsx
index 91ce1bca843..5943fd3fcf2 100644
--- a/packages/@react-spectrum/meter/src/Meter.tsx
+++ b/packages/@react-spectrum/meter/src/Meter.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {ProgressBarBase} from '@react-spectrum/progress';
 import React from 'react';
 import {SpectrumMeterProps} from '@react-types/meter';
@@ -22,9 +22,7 @@ import {useMeter} from '@react-aria/meter';
  * Meters are visual representations of a quantity or an achievement.
  * Their progress is determined by user actions, rather than system actions.
  */
-export const Meter:
-  React.ForwardRefExoticComponent<SpectrumMeterProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function Meter(props: SpectrumMeterProps, ref: DOMRef<HTMLDivElement>) {
+export const Meter = React.forwardRef(function Meter(props: SpectrumMeterProps, ref: DOMRef<HTMLDivElement>) {
   let {variant = 'informative', ...otherProps} = props;
   const {
     meterProps,
diff --git a/packages/@react-spectrum/numberfield/src/NumberField.tsx b/packages/@react-spectrum/numberfield/src/NumberField.tsx
index 70a5f9c980b..8cc36864594 100644
--- a/packages/@react-spectrum/numberfield/src/NumberField.tsx
+++ b/packages/@react-spectrum/numberfield/src/NumberField.tsx
@@ -13,7 +13,7 @@
 import {AriaButtonProps} from '@react-types/button';
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
 import {Field} from '@react-spectrum/label';
-import {FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
+import {FocusableRef, RefObject} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';
@@ -31,9 +31,7 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider';
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.
  */
-export const NumberField:
-  React.ForwardRefExoticComponent<SpectrumNumberFieldProps & React.RefAttributes<FocusableRefValue<HTMLElement, HTMLElement>>> =
-React.forwardRef(function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {
+export const NumberField = React.forwardRef(function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let provider = useProvider();
diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index 776a2424464..6a8e34450c4 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -12,7 +12,7 @@
 
 import {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue, RefObject, StyleProps} from '@react-types/shared';
+import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
 import modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';
 import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
@@ -22,7 +22,7 @@ import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
 import {Underlay} from './Underlay';
 import {useObjectRef, useViewportSize} from '@react-aria/utils';
 
-export interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
+interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
   children: ReactNode,
   state: OverlayTriggerState,
   type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'
@@ -34,9 +34,7 @@ interface ModalWrapperProps extends ModalProps {
   children: ReactNode
 }
 
-export const Modal:
-  React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
+export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let wrapperRef = useRef<HTMLDivElement>(null);
diff --git a/packages/@react-spectrum/overlays/src/Overlay.tsx b/packages/@react-spectrum/overlays/src/Overlay.tsx
index 27f74ab1f3f..e999fa5a546 100644
--- a/packages/@react-spectrum/overlays/src/Overlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Overlay.tsx
@@ -10,16 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {OpenTransition} from './OpenTransition';
 import {OverlayProps} from '@react-types/overlays';
 import {Provider} from '@react-spectrum/provider';
 import React, {useCallback, useState} from 'react';
 import {Overlay as ReactAriaOverlay} from '@react-aria/overlays';
 
-export const Overlay:
-  React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
+export const Overlay = React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     isOpen,
diff --git a/packages/@react-spectrum/overlays/src/Popover.tsx b/packages/@react-spectrum/overlays/src/Popover.tsx
index 30a0e7579e7..de4b7064334 100644
--- a/packages/@react-spectrum/overlays/src/Popover.tsx
+++ b/packages/@react-spectrum/overlays/src/Popover.tsx
@@ -12,7 +12,7 @@
 
 import {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue, RefObject, StyleProps} from '@react-types/shared';
+import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
 import {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';
 import {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {Overlay} from './Overlay';
@@ -67,9 +67,7 @@ let arrowPlacement = {
   bottom: 'bottom'
 };
 
-export const Popover:
-  React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+export const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     state,
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index 53c321930e1..28f70d2c313 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -12,7 +12,7 @@
 
 import {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue, RefObject, StyleProps} from '@react-types/shared';
+import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
 import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
@@ -33,9 +33,7 @@ interface TrayWrapperProps extends TrayProps {
   wrapperRef: RefObject<HTMLDivElement | null>
 }
 
-export const Tray:
-  React.ForwardRefExoticComponent<TrayProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
+export const Tray = forwardRef(function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let wrapperRef = useRef<HTMLDivElement>(null);
diff --git a/packages/@react-spectrum/progress/src/ProgressBar.tsx b/packages/@react-spectrum/progress/src/ProgressBar.tsx
index bc31917cc81..65146a01ea1 100644
--- a/packages/@react-spectrum/progress/src/ProgressBar.tsx
+++ b/packages/@react-spectrum/progress/src/ProgressBar.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {ProgressBarBase} from './ProgressBarBase';
 import React from 'react';
 import {SpectrumProgressBarProps} from '@react-types/progress';
@@ -22,9 +22,7 @@ import {useProgressBar} from '@react-aria/progress';
  * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
  * They can represent either determinate or indeterminate progress.
  */
-export const ProgressBar:
-  React.ForwardRefExoticComponent<SpectrumProgressBarProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressBar = React.forwardRef(function ProgressBar(props: SpectrumProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   let {staticColor, variant, ...otherProps} = props;
   const {
     progressBarProps,
diff --git a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx
index 7ee717aeff6..d89c565cdba 100644
--- a/packages/@react-spectrum/progress/src/ProgressBarBase.tsx
+++ b/packages/@react-spectrum/progress/src/ProgressBarBase.tsx
@@ -12,7 +12,7 @@
 
 import {clamp} from '@react-aria/utils';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {ProgressBarProps, SpectrumProgressBarBaseProps} from '@react-types/progress';
 import React, {CSSProperties, HTMLAttributes} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/barloader/vars.css';
@@ -24,9 +24,7 @@ interface ProgressBarBaseProps extends SpectrumProgressBarBaseProps, ProgressBar
 }
 
 // Base ProgressBar component shared with Meter.
-export const ProgressBarBase:
-  React.ForwardRefExoticComponent<ProgressBarBaseProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressBarBase = React.forwardRef(function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMRef<HTMLDivElement>) {
   let {
     value = 0,
     minValue = 0,
@@ -86,7 +84,7 @@ React.forwardRef(function ProgressBarBase(props: ProgressBarBaseProps, ref: DOMR
             {label}
         </span>
       }
-      {showValueLabel && barProps &&
+      {showValueLabel && barProps && 
         <div className={classNames(styles, 'spectrum-BarLoader-percentage')}>
           {barProps['aria-valuetext']}
         </div>
diff --git a/packages/@react-spectrum/progress/src/ProgressCircle.tsx b/packages/@react-spectrum/progress/src/ProgressCircle.tsx
index d149b803178..134f59d8992 100644
--- a/packages/@react-spectrum/progress/src/ProgressCircle.tsx
+++ b/packages/@react-spectrum/progress/src/ProgressCircle.tsx
@@ -12,7 +12,7 @@
 
 import {clamp} from '@react-aria/utils';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import React, {CSSProperties} from 'react';
 import {SpectrumProgressCircleProps} from '@react-types/progress';
 import styles from '@adobe/spectrum-css-temp/components/circleloader/vars.css';
@@ -23,9 +23,7 @@ import {useProgressBar} from '@react-aria/progress';
  * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
  * They can represent determinate or indeterminate progress.
  */
-export const ProgressCircle:
-  React.ForwardRefExoticComponent<SpectrumProgressCircleProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressCircle = React.forwardRef(function ProgressCircle(props: SpectrumProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
   let {
     value = 0,
     minValue = 0,
diff --git a/packages/@react-spectrum/provider/src/Provider.tsx b/packages/@react-spectrum/provider/src/Provider.tsx
index 2959c1de655..53fde2faf3c 100644
--- a/packages/@react-spectrum/provider/src/Provider.tsx
+++ b/packages/@react-spectrum/provider/src/Provider.tsx
@@ -19,7 +19,7 @@ import {
 } from '@react-spectrum/utils';
 import clsx from 'clsx';
 import {Context} from './context';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps, RouterProvider} from '@react-aria/utils';
 import {I18nProvider, useLocale} from '@react-aria/i18n';
 import {ModalProvider, useModalProvider} from '@react-aria/overlays';
@@ -38,9 +38,7 @@ const DEFAULT_BREAKPOINTS = {S: 640, M: 768, L: 1024, XL: 1280, XXL: 1536};
  * It defines the theme, locale, and other application level settings,
  * and can also be used to provide common properties to a group of components.
  */
-export const Provider:
-  React.ForwardRefExoticComponent<ProviderProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
+export const Provider = React.forwardRef(function Provider(props: ProviderProps, ref: DOMRef<HTMLDivElement>) {
   let prevContext = useContext(Context);
   let prevColorScheme = prevContext && prevContext.colorScheme;
   let prevBreakpoints = prevContext && prevContext.breakpoints;
diff --git a/packages/@react-spectrum/provider/src/context.ts b/packages/@react-spectrum/provider/src/context.ts
index 1bd4ec3b564..2c104719b04 100644
--- a/packages/@react-spectrum/provider/src/context.ts
+++ b/packages/@react-spectrum/provider/src/context.ts
@@ -15,5 +15,5 @@ import React from 'react';
 
 // Context is placed in a separate file to avoid fast refresh issue where the old provider context values
 // are immediately replaced with the null default. Stopgap solution until we fix this in parcel.
-export const Context: React.Context<ProviderContext | null> = React.createContext<ProviderContext | null>(null);
+export const Context = React.createContext<ProviderContext | null>(null);
 Context.displayName = 'ProviderContext';
diff --git a/packages/@react-spectrum/radio/src/Radio.tsx b/packages/@react-spectrum/radio/src/Radio.tsx
index 7ac90dee40a..a0d586fb4cd 100644
--- a/packages/@react-spectrum/radio/src/Radio.tsx
+++ b/packages/@react-spectrum/radio/src/Radio.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import React, {forwardRef, useRef} from 'react';
 import {SpectrumRadioProps} from '@react-types/radio';
@@ -24,9 +24,7 @@ import {useRadioProvider} from './context';
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const Radio:
-  React.ForwardRefExoticComponent<SpectrumRadioProps & React.RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
-forwardRef(function Radio(props: SpectrumRadioProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Radio = forwardRef(function Radio(props: SpectrumRadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let {
     isDisabled,
     children,
diff --git a/packages/@react-spectrum/radio/src/RadioGroup.tsx b/packages/@react-spectrum/radio/src/RadioGroup.tsx
index f31c2dbb1ec..33c0fcfda37 100644
--- a/packages/@react-spectrum/radio/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/radio/src/RadioGroup.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {RadioContext} from './context';
 import React from 'react';
@@ -26,9 +26,7 @@ import {useRadioGroupState} from '@react-stately/radio';
  * Radio groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-export const RadioGroup:
-  React.ForwardRefExoticComponent<SpectrumRadioGroupProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-React.forwardRef(function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef<HTMLElement>) {
+export const RadioGroup = React.forwardRef(function RadioGroup(props: SpectrumRadioGroupProps, ref: DOMRef<HTMLElement>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/radio/src/context.ts b/packages/@react-spectrum/radio/src/context.ts
index 92d8eb017e9..4f8a3bf3e41 100644
--- a/packages/@react-spectrum/radio/src/context.ts
+++ b/packages/@react-spectrum/radio/src/context.ts
@@ -19,7 +19,7 @@ interface RadioGroupContext {
   state: RadioGroupState
 }
 
-export const RadioContext: React.Context<RadioGroupContext | null> = React.createContext<RadioGroupContext | null>(null);
+export const RadioContext = React.createContext<RadioGroupContext | null>(null);
 
 export function useRadioProvider(): RadioGroupContext {
   return useContext(RadioContext) || {} as RadioGroupContext;
diff --git a/packages/@react-spectrum/slider/src/RangeSlider.tsx b/packages/@react-spectrum/slider/src/RangeSlider.tsx
index 85108e40852..268d2d647d8 100644
--- a/packages/@react-spectrum/slider/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/slider/src/RangeSlider.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import React from 'react';
@@ -24,9 +24,7 @@ import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 /**
  * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
  */
-export const RangeSlider:
-  React.ForwardRefExoticComponent<SpectrumRangeSliderProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
-React.forwardRef(function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const RangeSlider = React.forwardRef(function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let {onChange, onChangeEnd, value, defaultValue, getValueLabel, ...otherProps} = props;
 
   let baseProps: Omit<SliderBaseProps<number[]>, 'children'> = {
diff --git a/packages/@react-spectrum/slider/src/Slider.tsx b/packages/@react-spectrum/slider/src/Slider.tsx
index 43f50367ed8..40c36182189 100644
--- a/packages/@react-spectrum/slider/src/Slider.tsx
+++ b/packages/@react-spectrum/slider/src/Slider.tsx
@@ -12,7 +12,7 @@
 
 import {clamp} from '@react-aria/utils';
 import {classNames} from '@react-spectrum/utils';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import React, {ReactNode} from 'react';
 import {SliderBase, SliderBaseChildArguments, SliderBaseProps} from './SliderBase';
 import {SliderThumb} from './SliderThumb';
@@ -23,9 +23,7 @@ import {useLocale} from '@react-aria/i18n';
 /**
  * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
  */
-export const Slider:
-  React.ForwardRefExoticComponent<SpectrumSliderProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
-React.forwardRef(function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const Slider = React.forwardRef(function Slider(props: SpectrumSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let {onChange, onChangeEnd, value, defaultValue, isFilled, fillOffset, trackGradient, getValueLabel, ...otherProps} = props;
 
   let baseProps: Omit<SliderBaseProps, 'children'> = {
diff --git a/packages/@react-spectrum/slider/src/SliderBase.tsx b/packages/@react-spectrum/slider/src/SliderBase.tsx
index 246c38c9d71..dd35c53a6de 100644
--- a/packages/@react-spectrum/slider/src/SliderBase.tsx
+++ b/packages/@react-spectrum/slider/src/SliderBase.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
+import {FocusableRef, RefObject} from '@react-types/shared';
 import React, {CSSProperties, ReactNode, useRef} from 'react';
 import {SliderState, useSliderState} from '@react-stately/slider';
 import {SpectrumBarSliderBase} from '@react-types/slider';
@@ -32,9 +32,7 @@ export interface SliderBaseProps<T = number[]> extends SpectrumBarSliderBase<T>
   style?: CSSProperties
 }
 
-export const SliderBase:
-  React.ForwardRefExoticComponent<SliderBaseProps<number[]> & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>> =
-React.forwardRef(function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
+export const SliderBase = React.forwardRef(function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {
     isDisabled,
diff --git a/packages/@react-spectrum/statuslight/src/StatusLight.tsx b/packages/@react-spectrum/statuslight/src/StatusLight.tsx
index facfb3c4d38..fd66f8ac948 100644
--- a/packages/@react-spectrum/statuslight/src/StatusLight.tsx
+++ b/packages/@react-spectrum/statuslight/src/StatusLight.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {SpectrumStatusLightProps} from '@react-types/statuslight';
@@ -22,9 +22,7 @@ import {useProviderProps} from '@react-spectrum/provider';
  * Status lights are used to color code categories and labels commonly found in data visualization.
  * When status lights have a semantic meaning, they should use semantic variant colors.
  */
-export const StatusLight:
-  React.ForwardRefExoticComponent<SpectrumStatusLightProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function StatusLight(props: SpectrumStatusLightProps, ref: DOMRef<HTMLDivElement>) {
+export const StatusLight = forwardRef(function StatusLight(props: SpectrumStatusLightProps, ref: DOMRef<HTMLDivElement>) {
   let {
     variant,
     children,
diff --git a/packages/@react-spectrum/steplist/src/StepListContext.ts b/packages/@react-spectrum/steplist/src/StepListContext.ts
index e9ba1bc314e..0bf617a8d2d 100644
--- a/packages/@react-spectrum/steplist/src/StepListContext.ts
+++ b/packages/@react-spectrum/steplist/src/StepListContext.ts
@@ -13,4 +13,4 @@
 import React from 'react';
 import {StepListState} from '@react-stately/steplist';
 
-export const StepListContext: React.Context<StepListState<unknown> | null> = React.createContext<StepListState<unknown> | null>(null);
+export const StepListContext = React.createContext<StepListState<unknown> | null>(null);
diff --git a/packages/@react-spectrum/story-utils/src/GeneratePowerset.tsx b/packages/@react-spectrum/story-utils/src/GeneratePowerset.tsx
index c8e3b767872..91dff9a8c28 100644
--- a/packages/@react-spectrum/story-utils/src/GeneratePowerset.tsx
+++ b/packages/@react-spectrum/story-utils/src/GeneratePowerset.tsx
@@ -13,7 +13,7 @@
 import {mergeProps} from '@react-aria/utils';
 
 // Generate a powerset from a given array of states/options,
-export function generatePowerset(states: Array<any>, exclude?: (merged: any) => boolean): any[] {
+export function generatePowerset(states: Array<object>, exclude?: (merged) => boolean): any[] {
   let combinations: any[] = [{}];
   for (let i = 0; i < states.length; i++) {
     let len = combinations.length;
diff --git a/packages/@react-spectrum/switch/src/Switch.tsx b/packages/@react-spectrum/switch/src/Switch.tsx
index 254499393c9..949b2e0a50d 100644
--- a/packages/@react-spectrum/switch/src/Switch.tsx
+++ b/packages/@react-spectrum/switch/src/Switch.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import React, {forwardRef, useRef} from 'react';
 import {SpectrumSwitchProps} from '@react-types/switch';
@@ -25,9 +25,7 @@ import {useToggleState} from '@react-stately/toggle';
  * Switches allow users to turn an individual option on or off.
  * They are usually used to activate or deactivate a specific setting.
  */
-export const Switch:
-  React.ForwardRefExoticComponent<SpectrumSwitchProps & React.RefAttributes<FocusableRefValue<HTMLLabelElement, HTMLLabelElement>>> =
-forwardRef(function Switch(props: SpectrumSwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Switch = forwardRef(function Switch(props: SpectrumSwitchProps, ref: FocusableRef<HTMLLabelElement>) {
   props = useProviderProps(props);
   let {
     isEmphasized = false,
diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx
index 2be334dab2a..defc24868ea 100644
--- a/packages/@react-spectrum/table/src/Resizer.tsx
+++ b/packages/@react-spectrum/table/src/Resizer.tsx
@@ -46,11 +46,9 @@ const CURSORS = {
   e: getCursor(eCursor, 'e-resize')
 };
 
-export const ResizeStateContext: React.Context<TableColumnResizeState<unknown> | null> = createContext<TableColumnResizeState<unknown> | null>(null);
+export const ResizeStateContext = createContext<TableColumnResizeState<unknown> | null>(null);
 
-export const Resizer:
-  React.ForwardRefExoticComponent<ResizerProps<unknown> & React.RefAttributes<HTMLInputElement | null>> =
-React.forwardRef(function Resizer<T>(props: ResizerProps<T>, ref: ForwardedRef<HTMLInputElement | null>) {
+export const Resizer = React.forwardRef(function Resizer<T>(props: ResizerProps<T>, ref: ForwardedRef<HTMLInputElement | null>) {
   let {column, showResizer} = props;
   let objectRef = useObjectRef(ref);
   let {isEmpty, onFocusedResizer} = useTableContext();
diff --git a/packages/@react-spectrum/table/src/TableViewBase.tsx b/packages/@react-spectrum/table/src/TableViewBase.tsx
index 35334775f25..038742935f2 100644
--- a/packages/@react-spectrum/table/src/TableViewBase.tsx
+++ b/packages/@react-spectrum/table/src/TableViewBase.tsx
@@ -127,12 +127,12 @@ export interface TableContextValue<T> {
   renderEmptyState?: () => ReactElement
 }
 
-export const TableContext: React.Context<TableContextValue<unknown> | null> = React.createContext<TableContextValue<unknown> | null>(null);
+export const TableContext = React.createContext<TableContextValue<unknown> | null>(null);
 export function useTableContext(): TableContextValue<unknown> {
   return useContext(TableContext)!;
 }
 
-export const VirtualizerContext: React.Context<{width: number, key: Key | null} | null> = React.createContext<{width: number, key: Key | null} | null>(null);
+export const VirtualizerContext = React.createContext<{width: number, key: Key | null} | null>(null);
 export function useVirtualizerContext(): {
   width: number,
   key: Key | null
diff --git a/packages/@react-spectrum/text/src/Heading.tsx b/packages/@react-spectrum/text/src/Heading.tsx
index 13bd4153b46..610c84048a6 100644
--- a/packages/@react-spectrum/text/src/Heading.tsx
+++ b/packages/@react-spectrum/text/src/Heading.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext, useContextProps} from 'react-aria-components';
 import {HeadingProps} from '@react-types/text';
@@ -20,9 +20,7 @@ import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 /**
  * Heading is used to create various levels of typographic hierarchies.
  */
-export const Heading:
-  React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<DOMRefValue<HTMLHeadingElement>>> =
-forwardRef(function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
+export const Heading = forwardRef(function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   let domRef = useDOMRef(ref);
   props = useSlotProps(props, 'heading');
   [props, domRef] = useContextProps(props, domRef, HeadingContext);
diff --git a/packages/@react-spectrum/text/src/Keyboard.tsx b/packages/@react-spectrum/text/src/Keyboard.tsx
index 33f956f70f4..bcb4d49c899 100644
--- a/packages/@react-spectrum/text/src/Keyboard.tsx
+++ b/packages/@react-spectrum/text/src/Keyboard.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {KeyboardProps} from '@react-types/text';
 import React, {forwardRef} from 'react';
@@ -19,9 +19,7 @@ import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 /**
  * Keyboard represents text that specifies a keyboard command.
  */
-export const Keyboard:
-  React.ForwardRefExoticComponent<KeyboardProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Keyboard(props: KeyboardProps, ref: DOMRef) {
+export const Keyboard = forwardRef(function Keyboard(props: KeyboardProps, ref: DOMRef) {
   props = useSlotProps(props, 'keyboard');
   let {
     children,
diff --git a/packages/@react-spectrum/text/src/Text.tsx b/packages/@react-spectrum/text/src/Text.tsx
index 92e6f8a9dc0..1e763a59d7b 100644
--- a/packages/@react-spectrum/text/src/Text.tsx
+++ b/packages/@react-spectrum/text/src/Text.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {TextProps} from '@react-types/text';
@@ -19,9 +19,7 @@ import {useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 /**
  * Text represents text with no specific semantic meaning.
  */
-export const Text:
-  React.ForwardRefExoticComponent<TextProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Text(props: TextProps, ref: DOMRef) {
+export const Text = forwardRef(function Text(props: TextProps, ref: DOMRef) {
   props = useSlotProps(props, 'text');
   let {
     children,
diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx
index 4e40e5102bf..6e08d5ce71d 100644
--- a/packages/@react-spectrum/textfield/src/TextArea.tsx
+++ b/packages/@react-spectrum/textfield/src/TextArea.tsx
@@ -24,9 +24,7 @@ import {useTextField} from '@react-aria/textfield';
  * a sizable amount of text to enter. They allow for all customizations that
  * are available to text fields.
  */
-export const TextArea:
-  React.ForwardRefExoticComponent<SpectrumTextAreaProps & React.RefAttributes<TextFieldRef<HTMLTextAreaElement>>> =
-React.forwardRef(function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
+export const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
   props = useProviderProps(props);
   props = useFormProps(props);
   let {
diff --git a/packages/@react-spectrum/textfield/src/TextField.tsx b/packages/@react-spectrum/textfield/src/TextField.tsx
index fdd731bb730..ed11a4295f7 100644
--- a/packages/@react-spectrum/textfield/src/TextField.tsx
+++ b/packages/@react-spectrum/textfield/src/TextField.tsx
@@ -22,9 +22,7 @@ import {useTextField} from '@react-aria/textfield';
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-export const TextField:
-  React.ForwardRefExoticComponent<SpectrumTextFieldProps & React.RefAttributes<TextFieldRef<HTMLInputElement>>> =
-forwardRef(function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
+export const TextField = forwardRef(function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
   props = useFormProps(props);
 
diff --git a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
index 5660d36a294..b73670171e6 100644
--- a/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
+++ b/packages/@react-spectrum/textfield/src/TextFieldBase.tsx
@@ -40,9 +40,7 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | '
   disableFocusRing?: boolean
 }
 
-export const TextFieldBase:
-  React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>> =
-forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
+export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
   let {
     validationState = props.isInvalid ? 'invalid' : null,
     icon,
diff --git a/packages/@react-spectrum/toast/src/Toast.tsx b/packages/@react-spectrum/toast/src/Toast.tsx
index f90949b7964..0981418c735 100644
--- a/packages/@react-spectrum/toast/src/Toast.tsx
+++ b/packages/@react-spectrum/toast/src/Toast.tsx
@@ -14,7 +14,7 @@ import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {Button, ClearButton} from '@react-spectrum/button';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import CrossMedium from '@spectrum-icons/ui/CrossMedium';
-import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMProps, DOMRef} from '@react-types/shared';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import InfoMedium from '@spectrum-icons/ui/InfoMedium';
 // @ts-ignore
@@ -43,14 +43,12 @@ export interface SpectrumToastProps {
 
 // TODO: express should use filled icons...
 export const ICONS = {
-  info: InfoMedium as React.ComponentType,
-  negative: AlertMedium as React.ComponentType,
-  positive: SuccessMedium as React.ComponentType
-} as const;
+  info: InfoMedium,
+  negative: AlertMedium,
+  positive: SuccessMedium
+};
 
-export const Toast:
-  React.ForwardRefExoticComponent<SpectrumToastProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-React.forwardRef(function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
+export const Toast = React.forwardRef(function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
   let {
     toast: {
       key,
diff --git a/packages/@react-spectrum/toast/src/Toaster.tsx b/packages/@react-spectrum/toast/src/Toaster.tsx
index 231d3ed4674..0fb2ae7ad2e 100644
--- a/packages/@react-spectrum/toast/src/Toaster.tsx
+++ b/packages/@react-spectrum/toast/src/Toaster.tsx
@@ -28,7 +28,7 @@ interface ToastContainerProps extends AriaToastRegionProps {
   placement?: ToastPlacement
 }
 
-export const ToasterContext: React.Context<boolean> = createContext(false);
+export const ToasterContext = createContext(false);
 
 export function Toaster(props: ToastContainerProps): ReactElement {
   let {
diff --git a/packages/@react-spectrum/tooltip/src/Tooltip.tsx b/packages/@react-spectrum/tooltip/src/Tooltip.tsx
index 2456db7f0d7..0dfe754ecff 100644
--- a/packages/@react-spectrum/tooltip/src/Tooltip.tsx
+++ b/packages/@react-spectrum/tooltip/src/Tooltip.tsx
@@ -12,7 +12,7 @@
 
 import AlertSmall from '@spectrum-icons/ui/AlertSmall';
 import {classNames, createDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import InfoSmall from '@spectrum-icons/ui/InfoSmall';
 import {mergeProps} from '@react-aria/utils';
 import React, {useContext, useImperativeHandle, useRef} from 'react';
@@ -31,9 +31,7 @@ let iconMap = {
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.
  */
-export const Tooltip:
-  React.ForwardRefExoticComponent<SpectrumTooltipProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-React.forwardRef(function Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {
+export const Tooltip = React.forwardRef(function Tooltip(props: SpectrumTooltipProps, ref: DOMRef) {
   let {ref: overlayRef, arrowProps, state, arrowRef, ...tooltipProviderProps} = useContext(TooltipContext);
   let defaultRef = useRef(null);
   overlayRef = overlayRef || defaultRef;
diff --git a/packages/@react-spectrum/tooltip/src/context.ts b/packages/@react-spectrum/tooltip/src/context.ts
index 46fef78939e..1dcecea82f3 100644
--- a/packages/@react-spectrum/tooltip/src/context.ts
+++ b/packages/@react-spectrum/tooltip/src/context.ts
@@ -11,7 +11,7 @@
  */
 
 import {PlacementAxis} from '@react-types/overlays';
-import React, {Context, HTMLAttributes} from 'react';
+import React, {HTMLAttributes} from 'react';
 import {RefObject, StyleProps} from '@react-types/shared';
 import {TooltipTriggerState} from '@react-stately/tooltip';
 
@@ -23,4 +23,4 @@ interface TooltipContextProps extends StyleProps {
   arrowRef?: RefObject<HTMLElement | null>
 }
 
-export const TooltipContext: Context<TooltipContextProps> = React.createContext<TooltipContextProps>({placement: null});
+export const TooltipContext = React.createContext<TooltipContextProps>({placement: null});
diff --git a/packages/@react-spectrum/view/src/Content.tsx b/packages/@react-spectrum/view/src/Content.tsx
index dc4cf673eb5..9d3ed55fceb 100644
--- a/packages/@react-spectrum/view/src/Content.tsx
+++ b/packages/@react-spectrum/view/src/Content.tsx
@@ -12,16 +12,14 @@
 
 import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {ContentProps} from '@react-types/view';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 
 /**
  * Content represents the primary content within a Spectrum container.
  */
-export const Content:
-  React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Content(props: ContentProps, ref: DOMRef) {
+export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef) {
   props = useSlotProps(props, 'content');
   let {
     children,
diff --git a/packages/@react-spectrum/view/src/Footer.tsx b/packages/@react-spectrum/view/src/Footer.tsx
index 53c6d331788..63d44e8d512 100644
--- a/packages/@react-spectrum/view/src/Footer.tsx
+++ b/packages/@react-spectrum/view/src/Footer.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {FooterProps} from '@react-types/view';
 import React, {forwardRef} from 'react';
@@ -19,9 +19,7 @@ import React, {forwardRef} from 'react';
 /**
  * Footer represents a footer within a Spectrum container.
  */
-export const Footer:
-  React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Footer(props: FooterProps, ref: DOMRef) {
+export const Footer = forwardRef(function Footer(props: FooterProps, ref: DOMRef) {
   props = useSlotProps(props, 'footer');
   let {
     children,
diff --git a/packages/@react-spectrum/view/src/Header.tsx b/packages/@react-spectrum/view/src/Header.tsx
index a19d897abc0..44e81a150ce 100644
--- a/packages/@react-spectrum/view/src/Header.tsx
+++ b/packages/@react-spectrum/view/src/Header.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ClearSlots, useDOMRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeaderProps} from '@react-types/view';
 import React, {forwardRef} from 'react';
@@ -19,9 +19,7 @@ import React, {forwardRef} from 'react';
 /**
  * Header represents a header within a Spectrum container.
  */
-export const Header:
-  React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<DOMRefValue<HTMLElement>>> =
-forwardRef(function Header(props: HeaderProps, ref: DOMRef) {
+export const Header = forwardRef(function Header(props: HeaderProps, ref: DOMRef) {
   props = useSlotProps(props, 'header');
   let {
     children,
diff --git a/packages/@react-spectrum/well/src/Well.tsx b/packages/@react-spectrum/well/src/Well.tsx
index 2d2557681ce..63159c60206 100644
--- a/packages/@react-spectrum/well/src/Well.tsx
+++ b/packages/@react-spectrum/well/src/Well.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef} from 'react';
 import {SpectrumWellProps} from '@react-types/well';
@@ -21,9 +21,7 @@ import styles from '@adobe/spectrum-css-temp/components/well/vars.css';
  * A Well is a content container that displays non-editable content separate from other content on the screen.
  * Often this is used to display preformatted text, such as code/markup examples on a documentation page.
  */
-export const Well:
-  React.ForwardRefExoticComponent<SpectrumWellProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>> =
-forwardRef(function Well(props: SpectrumWellProps, ref: DOMRef<HTMLDivElement>) {
+export const Well = forwardRef(function Well(props: SpectrumWellProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     role,