diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index c77794e9827..f98cbdc36ab 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -513,7 +513,7 @@ export interface GridListLoadMoreItemProps extends Omit<LoadMoreSentinelProps, '
   isLoading?: boolean
 }
 
-export const GridListLoadMoreItem = createLeafComponent('loader', function GridListLoadingIndicator<T extends object>(props: GridListLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const GridListLoadMoreItem = createLeafComponent('loader', function GridListLoadingIndicator(props: GridListLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index f0f95b04af7..969fccceb9e 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -483,7 +483,7 @@ export interface ListBoxLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'c
   isLoading?: boolean
 }
 
-export const ListBoxLoadMoreItem = createLeafComponent('loader', function ListBoxLoadingIndicator<T extends object>(props: ListBoxLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const ListBoxLoadMoreItem = createLeafComponent('loader', function ListBoxLoadingIndicator(props: ListBoxLoadMoreItemProps, ref: ForwardedRef<HTMLDivElement>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
 
@@ -525,7 +525,7 @@ export const ListBoxLoadMoreItem = createLeafComponent('loader', function ListBo
           // aria-selected isn't needed here since this option is not selectable.
           // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
           role="option"
-          ref={ref}>
+          ref={ref as ForwardedRef<HTMLDivElement>}>
           {renderProps.children}
         </div>
       )}
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index be7b140af72..031d4b051eb 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1359,7 +1359,7 @@ export interface TableLoadMoreItemProps extends Omit<LoadMoreSentinelProps, 'col
   isLoading?: boolean
 }
 
-export const TableLoadMoreItem = createLeafComponent('loader', function TableLoadingIndicator<T extends object>(props: TableLoadMoreItemProps, ref: ForwardedRef<HTMLTableRowElement>, item: Node<T>) {
+export const TableLoadMoreItem = createLeafComponent('loader', function TableLoadingIndicator(props: TableLoadMoreItemProps, ref: ForwardedRef<HTMLTableRowElement>, item: Node<object>) {
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -1411,7 +1411,7 @@ export const TableLoadMoreItem = createLeafComponent('loader', function TableLoa
           {...mergeProps(filterDOMProps(props, {global: true}), rowProps)}
           {...renderProps}
           role="row"
-          ref={ref as any}>
+          ref={ref as ForwardedRef<HTMLTableRowElement>}>
           <TD role="rowheader" {...rowHeaderProps} style={style}>
             {renderProps.children}
           </TD>
diff --git a/packages/react-aria-components/stories/Autocomplete.stories.tsx b/packages/react-aria-components/stories/Autocomplete.stories.tsx
index aa4bcfee813..57982bc271a 100644
--- a/packages/react-aria-components/stories/Autocomplete.stories.tsx
+++ b/packages/react-aria-components/stories/Autocomplete.stories.tsx
@@ -11,8 +11,8 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Autocomplete, Button, Collection, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Popover, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Text, TextField, Virtualizer} from 'react-aria-components';
-import {Menu, MenuItem, MenuSection, MenuTrigger} from '../src/Menu';
+import {Autocomplete, Button, Collection, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, Popover, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Text, TextField, Virtualizer} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import {MyListBoxItem, MyMenuItem} from './utils';
 import React from 'react';
 import styles from '../example/index.css';
@@ -21,6 +21,7 @@ import {useFilter} from 'react-aria';
 
 export default {
   title: 'React Aria Components/Autocomplete',
+  component: Autocomplete,
   args: {
     onAction: action('onAction'),
     selectionMode: 'multiple',
@@ -46,7 +47,11 @@ export default {
       options: ['clearSelection', 'none']
     }
   }
-};
+} as Meta<typeof Autocomplete>;
+
+export type AutocompleteStory = StoryObj<typeof Autocomplete>;
+export type MenuStory = StoryObj<typeof Menu>;
+export type ListBoxStory = StoryObj<typeof ListBox>;
 
 let StaticMenu = (props) => {
   return (
@@ -113,7 +118,7 @@ function AutocompleteWrapper(props) {
   );
 }
 
-export const AutocompleteExample = {
+export const AutocompleteExample: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -131,7 +136,7 @@ export const AutocompleteExample = {
   name: 'Autocomplete complex static with textfield'
 };
 
-export const AutocompleteSearchfield = {
+export const AutocompleteSearchfield: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper defaultInputValue="Ba">
@@ -289,7 +294,7 @@ let dynamicRenderFuncSections = (item: ItemNode) => {
   }
 };
 
-export const AutocompleteMenuDynamic = {
+export const AutocompleteMenuDynamic: AutocompleteStory = {
   render: (args) => {
     return (
       <>
@@ -313,7 +318,7 @@ export const AutocompleteMenuDynamic = {
   name: 'Autocomplete, dynamic menu'
 };
 
-export const AutocompleteOnActionOnMenuItems = {
+export const AutocompleteOnActionOnMenuItems: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -342,7 +347,7 @@ interface AutocompleteItem {
 
 let items: AutocompleteItem[] = [{id: '1', name: 'Foo'}, {id: '2', name: 'Bar'}, {id: '3', name: 'Baz'}];
 
-export const AutocompleteDisabledKeys = {
+export const AutocompleteDisabledKeys: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -362,7 +367,7 @@ export const AutocompleteDisabledKeys = {
   name: 'Autocomplete, disabled key'
 };
 
-const AsyncExample = (args) => {
+const AsyncExample = (args: any): React.ReactElement => {
   let list = useAsyncList<AutocompleteItem>({
     async load({filterText}) {
       let json = await new Promise(resolve => {
@@ -413,7 +418,7 @@ const AsyncExample = (args) => {
   );
 };
 
-export const AutocompleteAsyncLoadingExample = {
+export const AutocompleteAsyncLoadingExample: StoryObj<typeof AsyncExample> = {
   render: (args) => {
     return <AsyncExample {...args} />;
   },
@@ -445,14 +450,14 @@ const CaseSensitiveFilter = (args) => {
   );
 };
 
-export const AutocompleteCaseSensitive = {
+export const AutocompleteCaseSensitive: AutocompleteStory = {
   render: (args) => {
     return <CaseSensitiveFilter {...args} />;
   },
   name: 'Autocomplete, case sensitive filter'
 };
 
-export const AutocompleteWithListbox = {
+export const AutocompleteWithListbox: AutocompleteStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -529,7 +534,7 @@ function VirtualizedListBox(props) {
   );
 }
 
-export const AutocompleteWithVirtualizedListbox = {
+export const AutocompleteWithVirtualizedListbox: AutocompleteStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -615,7 +620,7 @@ function ShellExample() {
   );
 }
 
-export const AutocompleteInPopover = {
+export const AutocompleteInPopover: MenuStory = {
   render: () => {
     return (
       <MenuTrigger>
@@ -660,7 +665,7 @@ export const AutocompleteInPopover = {
   }
 };
 
-export const AutocompleteInPopoverDialogTrigger = {
+export const AutocompleteInPopoverDialogTrigger: MenuStory = {
   render: () => {
     return (
       <DialogTrigger>
@@ -771,7 +776,7 @@ const MyMenu2 = () => {
   );
 };
 
-export function AutocompleteWithExtraButtons() {
+export function AutocompleteWithExtraButtons(): React.ReactElement {
   return (
     <div>
       <input />
@@ -787,7 +792,7 @@ export function AutocompleteWithExtraButtons() {
 // TODO: note that Space is used to select an item in a multiselect menu but that is also reserved for the
 // autocomplete input field. Should we add logic to allow Space to select menu items when focus is in the Menu
 // or is that a rare/unlikely use case for menus in general?
-export const AutocompleteMenuInPopoverDialogTrigger = {
+export const AutocompleteMenuInPopoverDialogTrigger: MenuStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -831,7 +836,7 @@ export const AutocompleteMenuInPopoverDialogTrigger = {
 
 let manyItems = [...Array(100)].map((_, i) => ({id: i, name: `Item ${i}`}));
 
-export const AutocompleteSelect = () => (
+export const AutocompleteSelect = (): React.ReactElement => (
   <Select style={{marginBottom: 40, position: 'relative'}}>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
diff --git a/packages/react-aria-components/stories/Breadcrumbs.stories.tsx b/packages/react-aria-components/stories/Breadcrumbs.stories.tsx
index d46e917561a..8a490df241d 100644
--- a/packages/react-aria-components/stories/Breadcrumbs.stories.tsx
+++ b/packages/react-aria-components/stories/Breadcrumbs.stories.tsx
@@ -11,26 +11,31 @@
  */
 
 import {Breadcrumb, Breadcrumbs, Link} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'React Aria Components/Breadcrumbs',
   component: Breadcrumbs
-};
+} as Meta<typeof Breadcrumbs>;
+
+export type BreadcrumbsStory = StoryObj<typeof Breadcrumbs>;
 
-export const BreadcrumbsExample = (args: any) => (
-  <Breadcrumbs {...args}>
-    <Breadcrumb>
-      <Link href="/">Home</Link>
-    </Breadcrumb>
-    <Breadcrumb>
-      <Link href="/react-aria">React Aria</Link>
-    </Breadcrumb>
-    <Breadcrumb>
-      <Link href="/react-aria">Breadcrumbs</Link>
-    </Breadcrumb>
-  </Breadcrumbs>
-);
+export const BreadcrumbsExample: BreadcrumbsStory = {
+  render: (args: any) => (
+    <Breadcrumbs {...args}>
+      <Breadcrumb>
+        <Link href="/">Home</Link>
+      </Breadcrumb>
+      <Breadcrumb>
+        <Link href="/react-aria">React Aria</Link>
+      </Breadcrumb>
+      <Breadcrumb>
+        <Link href="/react-aria">Breadcrumbs</Link>
+      </Breadcrumb>
+    </Breadcrumbs>
+  )
+};
 
 interface ItemValue {
   id: string,
@@ -42,12 +47,14 @@ let items: Array<ItemValue> = [
   {id: 'Breadcrumbs', url: '/react-aria/breadcrumbs'}
 ];
 
-export const DynamicBreadcrumbsExample = (args: any) => (
-  <Breadcrumbs {...args} items={items}>
-    {(item: ItemValue) => (
-      <Breadcrumb>
-        <Link href={item.url}>{item.id}</Link>
-      </Breadcrumb>
-    )}
-  </Breadcrumbs>
-);
+export const DynamicBreadcrumbsExample: BreadcrumbsStory = {
+  render: (args: any) => (
+    <Breadcrumbs {...args} items={items}>
+      {(item: ItemValue) => (
+        <Breadcrumb>
+          <Link href={item.url}>{item.id}</Link>
+        </Breadcrumb>
+      )}
+    </Breadcrumbs>
+  )
+};
diff --git a/packages/react-aria-components/stories/Button.stories.tsx b/packages/react-aria-components/stories/Button.stories.tsx
index 4a782b0159a..004ac03ef0b 100644
--- a/packages/react-aria-components/stories/Button.stories.tsx
+++ b/packages/react-aria-components/stories/Button.stories.tsx
@@ -13,21 +13,25 @@
 import {action} from '@storybook/addon-actions';
 import {Button, ProgressBar, Text} from 'react-aria-components';
 import {mergeProps} from '@react-aria/utils';
+import {Meta, StoryObj} from '@storybook/react';
 import React, {useEffect, useRef, useState} from 'react';
 import * as styles from './button-ripple.css';
 import * as styles2 from './button-pending.css';
 
 export default {
-  title: 'React Aria Components/Button'
-};
+  title: 'React Aria Components/Button',
+  component: Button
+} as Meta<typeof Button>;
 
-export const ButtonExample = () => {
-  return (
+export type ButtonStory = StoryObj<typeof Button>;
+
+export const ButtonExample: ButtonStory = {
+  render: () => (
     <Button data-testid="button-example" onPress={action('onPress')} onClick={action('onClick')}>Press me</Button>
-  );
+  )
 };
 
-export const PendingButton = {
+export const PendingButton: ButtonStory = {
   render: (args) => <PendingButtonExample {...args} />,
   args: {
     children: 'Press me'
@@ -79,10 +83,10 @@ function PendingButtonExample(props) {
   );
 }
 
-export const RippleButtonExample = () => {
-  return (
+export const RippleButtonExample: ButtonStory = {
+  render: () => (
     <RippleButton data-testid="button-example">Press me</RippleButton>
-  );
+  )
 };
 
 function RippleButton(props) {
@@ -148,7 +152,7 @@ function ButtonPerformanceExample() {
   );
 }
 
-export const ButtonPerformance = {
+export const ButtonPerformance: ButtonStory = {
   render: (args) => <ButtonPerformanceExample {...args} />,
   parameters: {
     description: {
diff --git a/packages/react-aria-components/stories/Calendar.stories.tsx b/packages/react-aria-components/stories/Calendar.stories.tsx
index ef2cec00463..e88d7f4ad3b 100644
--- a/packages/react-aria-components/stories/Calendar.stories.tsx
+++ b/packages/react-aria-components/stories/Calendar.stories.tsx
@@ -11,11 +11,16 @@
  */
 
 import {Button, Calendar, CalendarCell, CalendarGrid, CalendarStateContext, Heading, RangeCalendar} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import React, {useContext} from 'react';
 
 export default {
-  title: 'React Aria Components/Calendar'
-};
+  title: 'React Aria Components/Calendar',
+  component: Calendar
+} as Meta<typeof Calendar>;
+
+export type CalendarStory = StoryObj<typeof Calendar>;
+
 
 function Footer() {
   const state = useContext(CalendarStateContext);
@@ -36,60 +41,68 @@ function Footer() {
   );
 }
 
-export const CalendarExample = () => (
-  <Calendar style={{width: 220}}>
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Button slot="previous">&lt;</Button>
-      <Heading style={{flex: 1, textAlign: 'center'}} />
-      <Button slot="next">&gt;</Button>
-    </div>
-    <CalendarGrid style={{width: '100%'}}>
-      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
-    </CalendarGrid>
-  </Calendar>
-);
-
-export const CalendarResetValue = () => (
-  <Calendar style={{width: 220}}>
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Button slot="previous">&lt;</Button>
-      <Heading style={{flex: 1, textAlign: 'center'}} />
-      <Button slot="next">&gt;</Button>
-    </div>
-    <CalendarGrid style={{width: '100%'}}>
-      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
-    </CalendarGrid>
-    <Footer />
-  </Calendar>
-);
-
-export const CalendarMultiMonth = () => (
-  <Calendar style={{width: 500}} visibleDuration={{months: 2}}>
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Button slot="previous">&lt;</Button>
-      <Heading style={{flex: 1, textAlign: 'center'}} />
-      <Button slot="next">&gt;</Button>
-    </div>
-    <div style={{display: 'flex', gap: 20}}>
-      <CalendarGrid style={{flex: 1}}>
-        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
+export const CalendarExample: CalendarStory = {
+  render: () => (
+    <Calendar style={{width: 220}}>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+        <Button slot="previous">&lt;</Button>
+        <Heading style={{flex: 1, textAlign: 'center'}} />
+        <Button slot="next">&gt;</Button>
+      </div>
+      <CalendarGrid style={{width: '100%'}}>
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
       </CalendarGrid>
-      <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
-        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
+    </Calendar>
+  )
+};
+
+export const CalendarResetValue: CalendarStory = {
+  render: () => (
+    <Calendar style={{width: 220}}>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+        <Button slot="previous">&lt;</Button>
+        <Heading style={{flex: 1, textAlign: 'center'}} />
+        <Button slot="next">&gt;</Button>
+      </div>
+      <CalendarGrid style={{width: '100%'}}>
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
       </CalendarGrid>
-    </div>
-  </Calendar>
-);
+      <Footer />
+    </Calendar>
+  )
+};
 
-export const RangeCalendarExample = () => (
-  <RangeCalendar style={{width: 220}}>
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Button slot="previous">&lt;</Button>
-      <Heading style={{flex: 1, textAlign: 'center'}} />
-      <Button slot="next">&gt;</Button>
-    </div>
-    <CalendarGrid style={{width: '100%'}}>
-      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
-    </CalendarGrid>
-  </RangeCalendar>
-);
+export const CalendarMultiMonth: CalendarStory = {
+  render: () => (
+    <Calendar style={{width: 500}} visibleDuration={{months: 2}}>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+        <Button slot="previous">&lt;</Button>
+        <Heading style={{flex: 1, textAlign: 'center'}} />
+        <Button slot="next">&gt;</Button>
+      </div>
+      <div style={{display: 'flex', gap: 20}}>
+        <CalendarGrid style={{flex: 1}}>
+          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
+        </CalendarGrid>
+        <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
+          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected && !isOutsideMonth ? 'blue' : ''})} />}
+        </CalendarGrid>
+      </div>
+    </Calendar>
+  )
+};
+
+export const RangeCalendarExample: CalendarStory = {
+  render: () => (
+    <RangeCalendar style={{width: 220}}>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+        <Button slot="previous">&lt;</Button>
+        <Heading style={{flex: 1, textAlign: 'center'}} />
+        <Button slot="next">&gt;</Button>
+      </div>
+      <CalendarGrid style={{width: '100%'}}>
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+      </CalendarGrid>
+    </RangeCalendar>
+  )
+};
diff --git a/packages/react-aria-components/stories/Checkbox.stories.tsx b/packages/react-aria-components/stories/Checkbox.stories.tsx
index 244320ca6f6..c2b6c2c60a2 100644
--- a/packages/react-aria-components/stories/Checkbox.stories.tsx
+++ b/packages/react-aria-components/stories/Checkbox.stories.tsx
@@ -1,14 +1,18 @@
 import {Checkbox} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import './styles.css';
 
 
 export default {
-  title: 'React Aria Components/Checkbox'
-};
+  title: 'React Aria Components/Checkbox',
+  component: Checkbox
+} as Meta<typeof Checkbox>;
+
+export type CheckboxStory = StoryObj<typeof Checkbox>;
 
-export const CheckboxExample = () => {
-  return (
+export const CheckboxExample: CheckboxStory = {
+  render: () => (
     <Checkbox>
       <div className="checkbox">
         <svg viewBox="0 0 18 18" aria-hidden="true">
@@ -17,5 +21,5 @@ export const CheckboxExample = () => {
       </div>
       Unsubscribe
     </Checkbox>
-  );
+  )
 };
diff --git a/packages/react-aria-components/stories/CheckboxGroup.stories.tsx b/packages/react-aria-components/stories/CheckboxGroup.stories.tsx
index 85c771fbee8..65146a03420 100644
--- a/packages/react-aria-components/stories/CheckboxGroup.stories.tsx
+++ b/packages/react-aria-components/stories/CheckboxGroup.stories.tsx
@@ -1,15 +1,18 @@
 import {Button, Checkbox, CheckboxGroup, FieldError, Form, Label} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import './styles.css';
 import styles from '../example/index.css';
 
-
 export default {
-  title: 'React Aria Components/CheckboxGroup'
-};
+  title: 'React Aria Components/CheckboxGroup',
+  component: CheckboxGroup
+} as Meta<typeof CheckboxGroup>;
+
+export type CheckboxGroupStory = StoryObj<typeof CheckboxGroup>;
 
-export const CheckboxGroupExample = () => {
-  return (
+export const CheckboxGroupExample: CheckboxGroupStory = {
+  render: () => (
     <CheckboxGroup>
       <Label>Favorite sports</Label>
       <Checkbox value="soccer">
@@ -32,11 +35,11 @@ export const CheckboxGroupExample = () => {
       </Checkbox>
       <FieldError className={styles.errorMessage} />
     </CheckboxGroup>
-  );
+  )
 };
 
-export const CheckboxGroupSubmitExample = () => {
-  return (
+export const CheckboxGroupSubmitExample: CheckboxGroupStory = {
+  render: () => (
     <Form>
       <CheckboxGroup isRequired>
         <Label>Favorite sports</Label>
@@ -62,5 +65,5 @@ export const CheckboxGroupSubmitExample = () => {
       <Button type="submit">Submit</Button>
       <Button type="reset">Reset</Button>
     </Form>
-  );
+  )
 };
diff --git a/packages/react-aria-components/stories/ColorArea.stories.tsx b/packages/react-aria-components/stories/ColorArea.stories.tsx
index 5e1dec9634a..b28a3c141d6 100644
--- a/packages/react-aria-components/stories/ColorArea.stories.tsx
+++ b/packages/react-aria-components/stories/ColorArea.stories.tsx
@@ -10,36 +10,41 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorArea, ColorThumb} from '../src';
-import {ColorSliderExample} from './ColorSlider.stories';
+import {ColorArea, ColorAreaProps, ColorThumb} from '../src';
+import {ColorSliderExampleRender} from './ColorSlider.stories';
+import {Meta, StoryObj} from '@storybook/react';
 import {parseColor} from 'react-stately';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 
 export default {
   title: 'React Aria Components/ColorArea',
   decorators: [
     (Story, ctx) => {
       let args = ctx.args;
-      let [color, setColor] = useState(parseColor(args.defaultValue));
+      let [color, setColor] = useState(parseColor(args.defaultValue?.toString() ?? ''));
       let zChannel = color.getColorChannels().find(c => c !== args.xChannel && c !== args.yChannel);
       return (
         <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
           {Story({...ctx, args: {...ctx.args, value: color, onChange: setColor}})}
-          <ColorSliderExample channel={zChannel} value={color} onChange={setColor} />
+          <ColorSliderExampleRender channel={zChannel!} value={color} onChange={setColor} />
         </div>
       );
     }
-  ]
-};
+  ],
+  component: ColorArea,
+  excludeStories: ['ColorAreaExampleRender']
+} as Meta<typeof ColorArea>;
+
+export type ColorAreaStory = StoryObj<typeof ColorArea>;
 
 const SIZE = 192;
 const FOCUSED_THUMB_SIZE = 28;
 const THUMB_SIZE = 20;
 const BORDER_RADIUS = 4;
 
-export const ColorAreaExample = (args) => (
+export const ColorAreaExampleRender = (props: ColorAreaProps): JSX.Element => (
   <ColorArea
-    {...args}
+    {...props}
     style={({isDisabled}) => ({
       width: SIZE,
       height: SIZE,
@@ -62,57 +67,61 @@ export const ColorAreaExample = (args) => (
   </ColorArea>
 );
 
-ColorAreaExample.args = {
-  defaultValue: 'rgb(100, 149, 237)',
-  xChannel: 'red',
-  yChannel: 'green'
-};
-
-ColorAreaExample.argTypes = {
-  xChannel: {
-    control: 'select',
-    options: ['red', 'green', 'blue']
+export const ColorAreaExample: ColorAreaStory = {
+  render: (args) => (
+    <ColorAreaExampleRender {...args} />
+  ),
+  args: {
+    defaultValue: 'rgb(100, 149, 237)',
+    xChannel: 'red',
+    yChannel: 'green'
   },
-  yChannel: {
-    control: 'select',
-    options: ['red', 'green', 'blue']
+  argTypes: {
+    xChannel: {
+      control: 'select',
+      options: ['red', 'green', 'blue']
+    },
+    yChannel: {
+      control: 'select',
+      options: ['red', 'green', 'blue']
+    }
   }
 };
 
-export const ColorAreaHSL = (args) => <ColorAreaExample {...args} />;
-
-ColorAreaHSL.args = {
-  defaultValue: 'hsl(219, 79%, 66%)',
-  xChannel: 'hue',
-  yChannel: 'saturation'
-};
-
-ColorAreaHSL.argTypes = {
-  xChannel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'lightness']
+export const ColorAreaHSL: ColorAreaStory = {
+  render: ColorAreaExample.render,
+  args: {
+    defaultValue: 'hsl(219, 79%, 66%)',
+    xChannel: 'hue',
+    yChannel: 'saturation'
   },
-  yChannel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'lightness']
+  argTypes: {
+    xChannel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'lightness']
+    },
+    yChannel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'lightness']
+    }
   }
 };
 
-export const ColorAreaHSB = (args) => <ColorAreaExample {...args} />;
-
-ColorAreaHSB.args = {
-  defaultValue: 'hsb(219, 79%, 66%)',
-  xChannel: 'hue',
-  yChannel: 'saturation'
-};
-
-ColorAreaHSB.argTypes = {
-  xChannel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'brightness']
+export const ColorAreaHSB: ColorAreaStory = {
+  render: ColorAreaExample.render,
+  args: {
+    defaultValue: 'hsb(219, 79%, 66%)',
+    xChannel: 'hue',
+    yChannel: 'saturation'
   },
-  yChannel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'brightness']
+  argTypes: {
+    xChannel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'brightness']
+    },
+    yChannel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'brightness']
+    }
   }
 };
diff --git a/packages/react-aria-components/stories/ColorField.stories.tsx b/packages/react-aria-components/stories/ColorField.stories.tsx
index 9aa3b84d191..a880103eb2c 100644
--- a/packages/react-aria-components/stories/ColorField.stories.tsx
+++ b/packages/react-aria-components/stories/ColorField.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorField, FieldError, Input, Label} from 'react-aria-components';
+import {ColorField, ColorFieldProps, FieldError, Input, Label} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -24,18 +25,23 @@ export default {
       control: 'select',
       options: [null, 'red', 'green', 'blue', 'hue', 'saturation', 'lightness', 'brightness']
     }
-  }
-};
+  },
+  component: ColorField
+} as Meta<typeof ColorField>;
 
-export const ColorFieldExample = (args) => (
-  <ColorField {...args} validate={(v) => (v?.getChannelValue('red') === 0 ? 'Invalid value' : null)}>
-    <Label>{args.label}</Label>
-    <Input style={{display: 'block'}} />
-    <FieldError />
-  </ColorField>
-);
+;
+export type ColorFieldStory = StoryObj<(props: ColorFieldProps & {label: string}) => ReturnType<typeof ColorField>>;
 
-ColorFieldExample.args = {
-  label: 'Test',
-  defaultValue: '#f00'
+export const ColorFieldExample: ColorFieldStory = {
+  render: (args) => (
+    <ColorField {...args} validate={(v) => (v?.getChannelValue('red') === 0 ? 'Invalid value' : null)}>
+      <Label>{args.label}</Label>
+      <Input style={{display: 'block'}} />
+      <FieldError />
+    </ColorField>
+  ),
+  args: {
+    label: 'Test',
+    defaultValue: '#f00'
+  }
 };
diff --git a/packages/react-aria-components/stories/ColorPicker.stories.tsx b/packages/react-aria-components/stories/ColorPicker.stories.tsx
index c1048922560..b29058dc23c 100644
--- a/packages/react-aria-components/stories/ColorPicker.stories.tsx
+++ b/packages/react-aria-components/stories/ColorPicker.stories.tsx
@@ -11,25 +11,29 @@
  */
 
 import {Button, ColorSpace, ColorSwatchPicker, ColorSwatchPickerItem, Dialog, DialogTrigger, getColorChannels, Input, Label, Popover} from '../src';
-import {ColorAreaExample} from './ColorArea.stories';
+import {ColorAreaExampleRender} from './ColorArea.stories';
 import {ColorField} from '../src/ColorField';
 import {ColorPicker} from '../src/ColorPicker';
-import {ColorSliderExample} from './ColorSlider.stories';
-import {ColorSwatchExample} from './ColorSwatch.stories';
+import {ColorSliderExampleRender} from './ColorSlider.stories';
+import {ColorSwatchExampleRender} from './ColorSwatch.stories';
+import {Meta, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 
 export default {
-  title: 'React Aria Components/ColorPicker'
-};
+  title: 'React Aria Components/ColorPicker',
+  component: ColorPicker
+} as Meta<typeof ColorPicker>;
+
+export type ColorPickerStory = StoryObj<typeof ColorPicker>;
 
-export const ColorPickerExample = (args) => {
+function ColorPickerExampleRender(args) {
   let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
   return (
     <ColorPicker {...args} defaultValue="rgb(255, 0, 0)">
       <ColorPickerTrigger>
-        <ColorAreaExample colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
-        <ColorSliderExample colorSpace="hsb" channel="hue" />
-        <ColorSliderExample channel="alpha" />
+        <ColorAreaExampleRender colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
+        <ColorSliderExampleRender colorSpace="hsb" channel="hue" />
+        <ColorSliderExampleRender channel="alpha" />
         <label>
           {'Format: '}
           <select value={format} onChange={e => setFormat(e.target.value as ColorSpace | 'hex')}>
@@ -69,7 +73,7 @@ export const ColorPickerExample = (args) => {
                 position: 'relative'
               })}>
               {({isSelected}) => (<>
-                <ColorSwatchExample />
+                <ColorSwatchExampleRender />
                 {isSelected && (
                   <div
                     style={{
@@ -88,9 +92,13 @@ export const ColorPickerExample = (args) => {
       </ColorPickerTrigger>
     </ColorPicker>
   );
+}
+
+export const ColorPickerExample: ColorPickerStory = {
+  render: (args) => <ColorPickerExampleRender {...args} />
 };
 
-export const ColorPickerSliders = (args) => {
+function ColorPickerSlidersRender(args) {
   let [colorSpace, setColorSpace] = useState<ColorSpace>('rgb');
   return (
     <ColorPicker {...args} defaultValue="rgb(255, 0, 0)">
@@ -104,19 +112,23 @@ export const ColorPickerSliders = (args) => {
               <option>hsb</option>
             </select>
           </label>
-          {color.toFormat(colorSpace).getColorChannels().map(c => <ColorSliderExample key={c} colorSpace={colorSpace} channel={c} />)}
-          <ColorSliderExample channel="alpha" />
+          {color.toFormat(colorSpace).getColorChannels().map(c => <ColorSliderExampleRender key={c} colorSpace={colorSpace} channel={c} />)}
+          <ColorSliderExampleRender channel="alpha" />
         </ColorPickerTrigger>
       )}
     </ColorPicker>
   );
+}
+
+export const ColorPickerSliders: ColorPickerStory = {
+  render: (args) => <ColorPickerSlidersRender {...args} />
 };
 
 function ColorPickerTrigger({children}) {
   return (
     <DialogTrigger>
       <Button style={{background: 'none', border: 'none', padding: 0}}>
-        <ColorSwatchExample aria-label="Color picker" />
+        <ColorSwatchExampleRender aria-label="Color picker" />
       </Button>
       <Popover
         placement="bottom start"
diff --git a/packages/react-aria-components/stories/ColorSlider.stories.tsx b/packages/react-aria-components/stories/ColorSlider.stories.tsx
index 62b9ebf7a5e..fcd01a50c92 100644
--- a/packages/react-aria-components/stories/ColorSlider.stories.tsx
+++ b/packages/react-aria-components/stories/ColorSlider.stories.tsx
@@ -10,61 +10,70 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSlider, ColorThumb, Label, SliderOutput, SliderTrack} from '../src';
-import React from 'react';
+import {ColorSlider, ColorSliderProps, ColorThumb, Label, SliderOutput, SliderTrack} from '../src';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 export default {
-  title: 'React Aria Components/ColorSlider'
-};
+  title: 'React Aria Components/ColorSlider',
+  component: ColorSlider,
+  excludeStories: ['ColorSliderExampleRender']
+} as Meta<typeof ColorSlider>;
+
+export type ColorSliderStory = StoryObj<typeof ColorSlider>;
 
 const TRACK_THICKNESS = 28;
 const THUMB_SIZE = 20;
 
-export const ColorSliderExample = (args) => (
-  <ColorSlider
-    {...args}
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: 192
-    }}>
-    <div style={{display: 'flex', alignSelf: 'stretch', justifyContent: 'space-between'}}>
-      <Label />
-      <SliderOutput />
-    </div>
-    <SliderTrack
-      style={({defaultStyle}) => ({
-        height: TRACK_THICKNESS,
-        width: '100%',
-        borderRadius: 4,
-        background: `
-            ${defaultStyle.background},
-            repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
-      })}>
-      <ColorThumb
-        style={({isFocusVisible, color}) => ({
-          top: TRACK_THICKNESS / 2,
-          border: '2px solid white',
-          boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
-          width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-          height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-          borderRadius: '50%',
-          boxSizing: 'border-box',
-          background: color.toString()
-        })} />
-    </SliderTrack>
-  </ColorSlider>
-);
-
-ColorSliderExample.args = {
-  channel: 'hue',
-  defaultValue: 'hsl(0, 100%, 50%)'
-};
+export function ColorSliderExampleRender(args: ColorSliderProps): JSX.Element {
+  return (
+    <ColorSlider
+      {...args}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 192
+      }}>
+      <div style={{display: 'flex', alignSelf: 'stretch', justifyContent: 'space-between'}}>
+        <Label />
+        <SliderOutput />
+      </div>
+      <SliderTrack
+        style={({defaultStyle}) => ({
+          height: TRACK_THICKNESS,
+          width: '100%',
+          borderRadius: 4,
+          background: `
+              ${defaultStyle.background},
+              repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
+        })}>
+        <ColorThumb
+          style={({isFocusVisible, color}) => ({
+            top: TRACK_THICKNESS / 2,
+            border: '2px solid white',
+            boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
+            width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
+            height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
+            borderRadius: '50%',
+            boxSizing: 'border-box',
+            background: color.toString()
+          })} />
+      </SliderTrack>
+    </ColorSlider>
+  );
+}
 
-ColorSliderExample.argTypes = {
-  channel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'lightness', 'alpha']
+export const ColorSliderExample: ColorSliderStory = {
+  render: (args) => <ColorSliderExampleRender {...args} />,
+  args: {
+    channel: 'hue',
+    defaultValue: 'hsl(0, 100%, 50%)'
+  },
+  argTypes: {
+    channel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'lightness', 'alpha']
+    }
   }
 };
diff --git a/packages/react-aria-components/stories/ColorSwatch.stories.tsx b/packages/react-aria-components/stories/ColorSwatch.stories.tsx
index b9671c1bc6c..c4a53050121 100644
--- a/packages/react-aria-components/stories/ColorSwatch.stories.tsx
+++ b/packages/react-aria-components/stories/ColorSwatch.stories.tsx
@@ -10,14 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSwatch} from '../src/ColorSwatch';
-import React from 'react';
+import {ColorSwatch, ColorSwatchProps} from '../src/ColorSwatch';
+import {Meta, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 export default {
-  title: 'React Aria Components/ColorSwatch'
-};
+  title: 'React Aria Components/ColorSwatch',
+  component: ColorSwatch
+} as Meta<typeof ColorSwatch>;
+
+export type ColorSwatchStory = StoryObj<typeof ColorSwatch>;
 
-export const ColorSwatchExample = (args) => (
+export const ColorSwatchExampleRender = (args: ColorSwatchProps): JSX.Element => (
   <ColorSwatch
     {...args}
     style={({color}) => ({
@@ -31,12 +35,14 @@ export const ColorSwatchExample = (args) => (
     })} />
 );
 
-ColorSwatchExample.args = {
-  color: 'rgb(255, 0, 0)'
-};
-
-ColorSwatchExample.argTypes = {
-  color: {
-    control: 'color'
+export const ColorSwatchExample: ColorSwatchStory = {
+  render: (args) => <ColorSwatchExampleRender {...args} />,
+  args: {
+    color: 'rgb(255, 0, 0)'
+  },
+  argTypes: {
+    color: {
+      control: 'color'
+    }
   }
 };
diff --git a/packages/react-aria-components/stories/ColorWheel.stories.tsx b/packages/react-aria-components/stories/ColorWheel.stories.tsx
index cf71bf79946..71555c27c1a 100644
--- a/packages/react-aria-components/stories/ColorWheel.stories.tsx
+++ b/packages/react-aria-components/stories/ColorWheel.stories.tsx
@@ -11,18 +11,22 @@
  */
 
 import {ColorThumb, ColorWheel, ColorWheelTrack} from '../src';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components/ColorWheel'
-};
+  title: 'React Aria Components/ColorWheel',
+  component: ColorWheel
+} as Meta<typeof ColorWheel>;
+
+export type ColorWheelStory = StoryFn<typeof ColorWheel>;
 
 const RADIUS = 100;
 const TRACK_THICKNESS = 28;
 const THUMB_SIZE = 20;
 
 
-export const ColorWheelExample = (args) => (
+export const ColorWheelExample: ColorWheelStory = (args) => (
   <ColorWheel {...args} outerRadius={RADIUS} innerRadius={RADIUS - TRACK_THICKNESS}>
     <ColorWheelTrack />
     <ColorThumb
diff --git a/packages/react-aria-components/stories/ComboBox.stories.tsx b/packages/react-aria-components/stories/ComboBox.stories.tsx
index 7c4d21fe596..f88d7a3a89a 100644
--- a/packages/react-aria-components/stories/ComboBox.stories.tsx
+++ b/packages/react-aria-components/stories/ComboBox.stories.tsx
@@ -10,18 +10,23 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Collection, ComboBox, Input, Label, ListBox, ListLayout, Popover, useFilter, Virtualizer} from 'react-aria-components';
+import {Button, Collection, ComboBox, ComboBoxProps, Input, Label, ListBox, ListLayout, Popover, useFilter, Virtualizer} from 'react-aria-components';
 import {ListBoxLoadMoreItem} from '../src/ListBox';
 import {LoadingSpinner, MyListBoxItem} from './utils';
-import React, {useMemo, useState} from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX, useMemo, useState} from 'react';
 import styles from '../example/index.css';
 import {useAsyncList} from 'react-stately';
 
 export default {
-  title: 'React Aria Components/ComboBox'
-};
+  title: 'React Aria Components/ComboBox',
+  component: ComboBox
+} as Meta<typeof ComboBox>;
+
+export type ComboBoxStory = StoryFn<typeof ComboBox>;
+export type ComboBoxStoryObj = StoryObj<typeof ComboBox>;
 
-export const ComboBoxExample = () => (
+export const ComboBoxExample: ComboBoxStory = () => (
   <ComboBox name="combo-box-example" data-testid="combo-box-example">
     <Label style={{display: 'block'}}>Test</Label>
     <div style={{display: 'flex'}}>
@@ -49,7 +54,7 @@ interface ComboBoxItem {
 }
 
 let items: ComboBoxItem[] = [{id: '1', name: 'Foo'}, {id: '2', name: 'Bar'}, {id: '3', name: 'Baz'}];
-export const ComboBoxRenderPropsStatic = () => (
+export const ComboBoxRenderPropsStatic: ComboBoxStory = () => (
   <ComboBox data-testid="combo-box-render-props-static">
     {({isOpen}) => (
       <>
@@ -72,7 +77,7 @@ export const ComboBoxRenderPropsStatic = () => (
   </ComboBox>
 );
 
-export const ComboBoxRenderPropsDefaultItems = () => (
+export const ComboBoxRenderPropsDefaultItems: ComboBoxStory = () => (
   <ComboBox defaultItems={items}>
     {({isOpen}) => (
       <>
@@ -93,7 +98,7 @@ export const ComboBoxRenderPropsDefaultItems = () => (
   </ComboBox>
 );
 
-export const ComboBoxRenderPropsItems = {
+export const ComboBoxRenderPropsItems: ComboBoxStoryObj = {
   render: () => (
     <ComboBox items={items}>
       {({isOpen}) => (
@@ -121,7 +126,7 @@ export const ComboBoxRenderPropsItems = {
   }
 };
 
-export const ComboBoxRenderPropsListBoxDynamic = () => (
+export const ComboBoxRenderPropsListBoxDynamic: ComboBoxStory = () => (
   <ComboBox>
     {({isOpen}) => (
       <>
@@ -142,7 +147,7 @@ export const ComboBoxRenderPropsListBoxDynamic = () => (
   </ComboBox>
 );
 
-export const ComboBoxAsyncLoadingExample = () => {
+export const ComboBoxAsyncLoadingExample: ComboBoxStory = () => {
   let list = useAsyncList<ComboBoxItem>({
     async load({filterText}) {
       let json = await new Promise(resolve => {
@@ -185,7 +190,7 @@ export const ComboBoxAsyncLoadingExample = () => {
   );
 };
 
-export const ComboBoxImeExample = () => (
+export const ComboBoxImeExample: ComboBoxStory = () => (
   <ComboBox>
     <Label style={{display: 'block'}}>IME Test</Label>
     <div style={{display: 'flex'}}>
@@ -211,7 +216,7 @@ export const ComboBoxImeExample = () => (
 
 let manyItems = [...Array(10000)].map((_, i) => ({id: i, name: `Item ${i}`}));
 
-export const VirtualizedComboBox = (args) => {
+const VirtualizedComboBoxRender = (args: ComboBoxProps<any> & {isLoading: boolean}) => {
   const [searchTerm, setSearchTerm] = useState('');
   const {contains} = useFilter({sensitivity: 'base'});
   const filteredItems = useMemo(() => {
@@ -241,7 +246,8 @@ export const VirtualizedComboBox = (args) => {
   );
 };
 
-VirtualizedComboBox.story = {
+export const VirtualizedComboBox: StoryObj<typeof VirtualizedComboBoxRender> = {
+  render: (args) => <VirtualizedComboBoxRender {...args} />,
   args: {
     isLoading: false
   }
@@ -262,14 +268,14 @@ interface Character {
   birth_year: number
 }
 
-export const AsyncVirtualizedDynamicCombobox = (args) => {
+const AsyncVirtualizedDynamicComboboxRender = (props: {delay: number}): JSX.Element => {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
       }
 
-      await new Promise(resolve => setTimeout(resolve, args.delay));
+      await new Promise(resolve => setTimeout(resolve, props.delay));
       let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
       let json = await res.json();
 
@@ -306,7 +312,8 @@ export const AsyncVirtualizedDynamicCombobox = (args) => {
   );
 };
 
-AsyncVirtualizedDynamicCombobox.story = {
+export const AsyncVirtualizedDynamicCombobox: StoryObj<typeof AsyncVirtualizedDynamicComboboxRender> = {
+  render: (args) => <AsyncVirtualizedDynamicComboboxRender {...args} />,
   args: {
     delay: 50
   }
diff --git a/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx b/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx
index 56be87b6c27..f9030a3628f 100644
--- a/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx
+++ b/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx
@@ -11,14 +11,19 @@
  */
 
 import {Button, ComboBox, Input, Label, ListBox, ListBoxItem, Popover} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import './combobox-reproductions.css';
 
+
 export default {
-  title: 'React Aria Components/ComboBoxReproductions'
-};
+  title: 'React Aria Components/ComboBoxReproductions',
+  component: ComboBox
+} as Meta<typeof ComboBox>;
+
+export type ComboBoxReproductionStory = StoryFn<typeof ComboBox>;
 
-export const ComboBoxReproductionExample = () => (
+export const ComboBoxReproductionExample: ComboBoxReproductionStory = () => (
   <ComboBox>
     <Label>Favorite Animal</Label>
     <div>
diff --git a/packages/react-aria-components/stories/DateField.stories.tsx b/packages/react-aria-components/stories/DateField.stories.tsx
index 9fcfcf46040..68c7dd1a7b0 100644
--- a/packages/react-aria-components/stories/DateField.stories.tsx
+++ b/packages/react-aria-components/stories/DateField.stories.tsx
@@ -14,6 +14,7 @@ import {action} from '@storybook/addon-actions';
 import {Button, DateField, DateInput, DateSegment, FieldError, Form, Input, Label, TextField} from 'react-aria-components';
 import clsx from 'clsx';
 import {fromAbsolute, getLocalTimeZone, parseAbsoluteToLocal} from '@internationalized/date';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
@@ -48,10 +49,16 @@ export default {
   },
   args: {
     onChange: action('OnChange')
-  }
-};
+  },
+  component: DateField
+} as Meta<typeof DateField>;
+
+export type DateFieldStory = StoryFn<Omit<typeof DateField, 'minValue' | 'maxValue'> & {
+  minValue?: number,
+  maxValue?: number
+}>;
 
-export const DateFieldExample = (props) => (
+export const DateFieldExample: DateFieldStory = (props) => (
   <DateField
     {...props}
     minValue={props.minValue ? fromAbsolute(props.minValue, getLocalTimeZone()) : undefined}
diff --git a/packages/react-aria-components/stories/DatePicker.stories.tsx b/packages/react-aria-components/stories/DatePicker.stories.tsx
index 7a306b8571f..a63dcce7d0f 100644
--- a/packages/react-aria-components/stories/DatePicker.stories.tsx
+++ b/packages/react-aria-components/stories/DatePicker.stories.tsx
@@ -13,14 +13,18 @@
 import {action} from '@storybook/addon-actions';
 import {Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, Form, Group, Heading, Input, Label, Popover, RangeCalendar, TextField} from 'react-aria-components';
 import clsx from 'clsx';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/DatePicker'
-};
+  title: 'React Aria Components/DatePicker',
+  component: DatePicker
+} as Meta<typeof DatePicker>;
 
-export const DatePickerExample = () => (
+export type DatePickerStory = StoryFn<typeof DatePicker>;
+
+export const DatePickerExample: DatePickerStory = () => (
   <DatePicker data-testid="date-picker-example">
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex'}}>
@@ -53,7 +57,7 @@ export const DatePickerExample = () => (
   </DatePicker>
 );
 
-export const DatePickerTriggerWidthExample = () => (
+export const DatePickerTriggerWidthExample: DatePickerStory = () => (
   <DatePicker data-testid="date-picker-example">
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex', width: 300}}>
@@ -88,7 +92,7 @@ export const DatePickerTriggerWidthExample = () => (
   </DatePicker>
 );
 
-export const DateRangePickerExample = () => (
+export const DateRangePickerExample: DatePickerStory = () => (
   <DateRangePicker data-testid="date-range-picker-example">
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex'}}>
@@ -127,7 +131,7 @@ export const DateRangePickerExample = () => (
   </DateRangePicker>
 );
 
-export const DateRangePickerTriggerWidthExample = () => (
+export const DateRangePickerTriggerWidthExample: DatePickerStory = () => (
   <DateRangePicker data-testid="date-range-picker-example">
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex', width: 300}}>
diff --git a/packages/react-aria-components/stories/Disclosure.stories.tsx b/packages/react-aria-components/stories/Disclosure.stories.tsx
index 2da2d1e861b..5a5444452f6 100644
--- a/packages/react-aria-components/stories/Disclosure.stories.tsx
+++ b/packages/react-aria-components/stories/Disclosure.stories.tsx
@@ -12,15 +12,18 @@
 
 import {Button, Heading} from 'react-aria-components';
 import {Disclosure, DisclosurePanel} from '../src/Disclosure';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import './styles.css';
 
 export default {
   title: 'React Aria Components/Disclosure',
   component: Disclosure
-};
+} as Meta<typeof Disclosure>;
+
+export type DisclosureStory = StoryFn<typeof Disclosure>;
 
-export const DisclosureExample = (args: any) => (
+export const DisclosureExample: DisclosureStory = (args) => (
   <Disclosure {...args}>
     {({isExpanded}) => (
       <>
@@ -35,7 +38,7 @@ export const DisclosureExample = (args: any) => (
   </Disclosure>
 );
 
-export const DisclosureControlledExample = (args: any) => {
+export const DisclosureControlledExample: DisclosureStory = (args) => {
   let [isExpanded, setExpanded] = React.useState(false);
   return (
     <Disclosure {...args} isExpanded={isExpanded} onExpandedChange={setExpanded}>
diff --git a/packages/react-aria-components/stories/Dropzone.stories.tsx b/packages/react-aria-components/stories/Dropzone.stories.tsx
index 40ac1e2d759..95897172b02 100644
--- a/packages/react-aria-components/stories/Dropzone.stories.tsx
+++ b/packages/react-aria-components/stories/Dropzone.stories.tsx
@@ -14,14 +14,19 @@ import {action} from '@storybook/addon-actions';
 import {Button, DropZone, FileTrigger, Link, Text} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
 import {FocusRing, mergeProps, useButton, useClipboard, useDrag} from 'react-aria';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import React, {useRef} from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/Dropzone'
-};
+  title: 'React Aria Components/Dropzone',
+  component: DropZone
+} as Meta<typeof DropZone>;
+
+export type DropzoneStory = StoryFn<typeof DropZone>;
+export type DropzoneStoryObj = StoryObj<typeof DropZone>;
 
-export const DropzoneExampleWithFileTriggerLink = (props) => (
+export const DropzoneExampleWithFileTriggerLink: DropzoneStory = (props) => (
   <div>
     <DropZone
       {...props}
@@ -38,7 +43,7 @@ export const DropzoneExampleWithFileTriggerLink = (props) => (
   </div>
 );
 
-export const DropzoneExampleWithFileTriggerButton = (props) => (
+export const DropzoneExampleWithFileTriggerButton: DropzoneStory = (props) => (
   <div>
     <DropZone
       {...props}
@@ -53,7 +58,7 @@ export const DropzoneExampleWithFileTriggerButton = (props) => (
   </div>
 );
 
-export const DropzoneExampleWithDraggableAndFileTrigger = (props) => (
+export const DropzoneExampleWithDraggableAndFileTrigger: DropzoneStory = (props) => (
   <div>
     <Draggable />
     <DropZone
@@ -70,13 +75,12 @@ export const DropzoneExampleWithDraggableAndFileTrigger = (props) => (
   </div>
 );
 
-export const DropZoneOnlyAcceptPNGWithFileTrigger = (props) => (
+export const DropZoneOnlyAcceptPNGWithFileTrigger: DropzoneStory = (props) => (
   <div>
     <DropZone
       {...props}
       getDropOperation={(types) =>  types.has('image/png') ? 'copy' : 'cancel'}
       className={styles.dropzone}
-      onPress={action('OnPress')}
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')} >
@@ -87,13 +91,12 @@ export const DropZoneOnlyAcceptPNGWithFileTrigger = (props) => (
   </div>
 );
 
-export const DropZoneWithCaptureMobileOnly = (props) => (
+export const DropZoneWithCaptureMobileOnly: DropzoneStory = (props) => (
   <div>
     <DropZone
       {...props}
       getDropOperation={(types) =>  types.has('image/png') ? 'copy' : 'cancel'}
       className={styles.dropzone}
-      onPress={action('OnPress')}
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')} >
@@ -104,7 +107,7 @@ export const DropZoneWithCaptureMobileOnly = (props) => (
   </div>
 );
 
-export const DropzoneExampleWithDraggableObject = (props) => (
+export const DropzoneExampleWithDraggableObject: DropzoneStory = (props) => (
   <div>
     <Draggable />
     <DropZone
@@ -120,7 +123,7 @@ export const DropzoneExampleWithDraggableObject = (props) => (
   </div>
 );
 
-export const DropzoneExampleWithCopyableObject = (props) => (
+export const DropzoneExampleWithCopyableObject: DropzoneStory = (props) => (
   <div>
     <Copyable />
     <DropZone
@@ -163,7 +166,7 @@ const DropzoneWithRenderPropsExample = (props) => (
   </div>
 );
 
-export const DropzoneWithRenderProps = {
+export const DropzoneWithRenderProps: DropzoneStoryObj = {
   args: {
     isDisabled: false
   },
diff --git a/packages/react-aria-components/stories/FileTrigger.stories.tsx b/packages/react-aria-components/stories/FileTrigger.stories.tsx
index 60373f28217..7b6f9083825 100644
--- a/packages/react-aria-components/stories/FileTrigger.stories.tsx
+++ b/packages/react-aria-components/stories/FileTrigger.stories.tsx
@@ -12,13 +12,17 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, FileTrigger, Link} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components/FileTrigger'
-};
+  title: 'React Aria Components/FileTrigger',
+  component: FileTrigger
+} as Meta<typeof FileTrigger>;
+
+export type FileTriggerStory = StoryFn<typeof FileTrigger>;
 
-export const FileTriggerButton = (props) => (
+export const FileTriggerButton: FileTriggerStory = (props) => (
   <FileTrigger
     onSelect={action('onSelect')}
     data-testid="filetrigger-example"
@@ -27,7 +31,7 @@ export const FileTriggerButton = (props) => (
   </FileTrigger>
 );
 
-export const FileTriggerDirectories = (props) => {
+export const FileTriggerDirectories: FileTriggerStory = (props) => {
   let [files, setFiles] = React.useState<string[]>([]);
 
   return (
@@ -52,7 +56,7 @@ export const FileTriggerDirectories = (props) => {
   );
 };
 
-export const FileTriggerLinkAllowsMultiple = (props) => (
+export const FileTriggerLinkAllowsMultiple: FileTriggerStory = (props) => (
   <FileTrigger
     {...props}
     onSelect={action('onSelect')}
diff --git a/packages/react-aria-components/stories/Form.stories.tsx b/packages/react-aria-components/stories/Form.stories.tsx
index 8f7a9748abe..a2517f326c7 100644
--- a/packages/react-aria-components/stories/Form.stories.tsx
+++ b/packages/react-aria-components/stories/Form.stories.tsx
@@ -12,14 +12,18 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, Form, Input, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, TextField} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components/Form'
-};
+  title: 'React Aria Components/Form',
+  component: Form
+} as Meta<typeof Form>;
+
+export type FormStory = StoryFn<typeof Form>;
 
 
-export const FormAutoFillExample = () => {
+export const FormAutoFillExample: FormStory = () => {
   return (
     <Form
       aria-label="Shipping information"
diff --git a/packages/react-aria-components/stories/GridList.stories.tsx b/packages/react-aria-components/stories/GridList.stories.tsx
index 3b37885771d..589677cbb79 100644
--- a/packages/react-aria-components/stories/GridList.stories.tsx
+++ b/packages/react-aria-components/stories/GridList.stories.tsx
@@ -23,10 +23,13 @@ import {
   GridList,
   GridListItem,
   GridListItemProps,
+  GridListLoadMoreItem,
+  GridListProps,
   Heading,
   ListLayout,
   Modal,
   ModalOverlay,
+  ModalOverlayProps,
   Popover,
   Size,
   Tag,
@@ -36,17 +39,20 @@ import {
   Virtualizer
 } from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
-import {GridListLoadMoreItem} from '../src/GridList';
 import {Key, useAsyncList, useListData} from 'react-stately';
 import {LoadingSpinner} from './utils';
-import React, {useState} from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX, useState} from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/GridList'
-};
+  title: 'React Aria Components/GridList',
+  component: GridList
+} as Meta<typeof GridList>;
+
+export type GridListStory = StoryFn<typeof GridList>;
 
-export const GridListExample = (args) => (
+export const GridListExample: GridListStory = (args) => (
   <GridList
     {...args}
     className={styles.menu}
@@ -138,7 +144,7 @@ const MyCheckbox = ({children, ...props}: CheckboxProps) => {
   );
 };
 
-export function VirtualizedGridList(args) {
+const VirtualizedGridListRender = (args: GridListProps<any> & {isLoading: boolean}) => {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 10000; i++) {
     items.push({id: i, name: `Item ${i}`});
@@ -184,15 +190,16 @@ export function VirtualizedGridList(args) {
       </GridList>
     </Virtualizer>
   );
-}
+};
 
-VirtualizedGridList.story = {
+export const VirtualizedGridList: StoryObj<typeof VirtualizedGridListRender> = {
+  render: (args) => <VirtualizedGridListRender {...args} />,
   args: {
     isLoading: false
   }
 };
 
-export function VirtualizedGridListGrid() {
+export let VirtualizedGridListGrid: GridListStory = () => {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 10000; i++) {
     items.push({id: i, name: `Item ${i}`});
@@ -209,7 +216,7 @@ export function VirtualizedGridListGrid() {
       </GridList>
     </Virtualizer>
   );
-}
+};
 
 let renderEmptyState = ({isLoading}) => {
   return  (
@@ -242,14 +249,14 @@ const MyGridListLoaderIndicator = (props) => {
   );
 };
 
-export const AsyncGridList = (args) => {
+function AsyncGridListRender(props: {delay: number}): JSX.Element {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
       }
 
-      await new Promise(resolve => setTimeout(resolve, args.delay));
+      await new Promise(resolve => setTimeout(resolve, props.delay));
       let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
       let json = await res.json();
 
@@ -274,22 +281,23 @@ export const AsyncGridList = (args) => {
       <MyGridListLoaderIndicator isLoading={list.loadingState === 'loadingMore'} onLoadMore={list.loadMore} />
     </GridList>
   );
-};
+}
 
-AsyncGridList.story = {
+export let AsyncGridList: StoryObj<typeof AsyncGridListRender> = {
+  render: (args) => <AsyncGridListRender {...args} />,
   args: {
     delay: 50
   }
 };
 
-export const AsyncGridListVirtualized = (args) => {
+function AsyncGridListVirtualizedRender(props: {delay: number}): JSX.Element {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
       }
 
-      await new Promise(resolve => setTimeout(resolve, args.delay));
+      await new Promise(resolve => setTimeout(resolve, props.delay));
       let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
       let json = await res.json();
       return {
@@ -320,13 +328,14 @@ export const AsyncGridListVirtualized = (args) => {
   );
 };
 
-AsyncGridListVirtualized.story = {
+export let AsyncGridListVirtualized: StoryObj<typeof AsyncGridListVirtualizedRender> = {
+  render: (args) => <AsyncGridListVirtualizedRender {...args} />,
   args: {
     delay: 50
   }
 };
 
-export function TagGroupInsideGridList() {
+export let TagGroupInsideGridList: GridListStory = () => {
   return (
     <GridList
       className={styles.menu}
@@ -368,7 +377,7 @@ export function TagGroupInsideGridList() {
       </MyGridListItem>
     </GridList>
   );
-}
+};
 
 const GridListDropdown = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -411,7 +420,7 @@ const GridListDropdown = () => {
   );
 };
 
-function GridListInModalPickerRender(props) {
+function GridListInModalPickerRender(props: ModalOverlayProps): JSX.Element {
   const [mainModalOpen, setMainModalOpen] = useState(true);
   return (
     <>
@@ -456,7 +465,7 @@ function GridListInModalPickerRender(props) {
   );
 }
 
-export const GridListInModalPicker = {
+export let GridListInModalPicker: StoryObj<typeof GridListInModalPickerRender> = {
   render: (args) => <GridListInModalPickerRender {...args} />,
   parameters: {
     docs: {
diff --git a/packages/react-aria-components/stories/Link.stories.tsx b/packages/react-aria-components/stories/Link.stories.tsx
index 098c06c7b01..7670e148612 100644
--- a/packages/react-aria-components/stories/Link.stories.tsx
+++ b/packages/react-aria-components/stories/Link.stories.tsx
@@ -11,13 +11,17 @@
  */
 
 import {Link} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components/Link'
-};
+  title: 'React Aria Components/Link',
+  component: Link
+} as Meta<typeof Link>;
+
+export type LinkStory = StoryFn<typeof Link>;
 
-export const LinkExample = () => {
+export const LinkExample: LinkStory = () => {
   return (
     <Link data-testid="link-example" href="https://www.imdb.com/title/tt6348138/" hrefLang="en"  target="_blank">
       The missing link
diff --git a/packages/react-aria-components/stories/ListBox.stories.tsx b/packages/react-aria-components/stories/ListBox.stories.tsx
index 97b7e43c7a1..19fc5b98aa1 100644
--- a/packages/react-aria-components/stories/ListBox.stories.tsx
+++ b/packages/react-aria-components/stories/ListBox.stories.tsx
@@ -12,18 +12,23 @@
 
 import {action} from '@storybook/addon-actions';
 import {Collection, DropIndicator, GridLayout, Header, ListBox, ListBoxItem, ListBoxProps, ListBoxSection, ListLayout, Separator, Text, useDragAndDrop, Virtualizer, WaterfallLayout} from 'react-aria-components';
-import {ListBoxLoadMoreItem} from '../src/ListBox';
+import {ListBoxLoadMoreItem} from '../';
 import {LoadingSpinner, MyListBoxItem} from './utils';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import {Size} from '@react-stately/virtualizer';
 import styles from '../example/index.css';
 import {useAsyncList, useListData} from 'react-stately';
 
 export default {
-  title: 'React Aria Components/ListBox'
-};
+  title: 'React Aria Components/ListBox',
+  component: ListBox
+} as Meta<typeof ListBox>;
+
+export type ListBoxStory = StoryFn<typeof ListBox>;
+export type ListBoxStoryObj = StoryObj<typeof ListBox>;
 
-export const ListBoxExample = (args) => (
+export const ListBoxExample: ListBoxStory = (args) => (
   <ListBox className={styles.menu} {...args} aria-label="test listbox">
     <MyListBoxItem>Foo</MyListBoxItem>
     <MyListBoxItem>Bar</MyListBoxItem>
@@ -62,7 +67,7 @@ ListBoxExample.story = {
 
 // Known accessibility false positive: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#listbox
 // also has a aXe landmark error, not sure what it means
-export const ListBoxSections = () => (
+export const ListBoxSections: ListBoxStory = () => (
   <ListBox className={styles.menu} selectionMode="multiple" selectionBehavior="replace" aria-label="test listbox with section">
     <ListBoxSection className={styles.group}>
       <Header style={{fontSize: '1.2em'}}>Section 1</Header>
@@ -79,7 +84,7 @@ export const ListBoxSections = () => (
   </ListBox>
 );
 
-export const ListBoxComplex = () => (
+export const ListBoxComplex: ListBoxStory = () => (
   <ListBox className={styles.menu} selectionMode="multiple" selectionBehavior="replace" aria-label="listbox complex">
     <MyListBoxItem>
       <Text slot="label">Item 1</Text>
@@ -96,8 +101,14 @@ export const ListBoxComplex = () => (
   </ListBox>
 );
 
+interface Album {
+  id: number,
+  image: string,
+  title: string,
+  artist: string
+}
 
-let albums = [
+let albums: Album[] = [
   {
     id: 1,
     image: 'https://images.unsplash.com/photo-1593958812614-2db6a598c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGlzY298ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
@@ -130,7 +141,8 @@ let albums = [
   }
 ];
 
-export const ListBoxDnd = (props: ListBoxProps<typeof albums[0]>) => {
+type AlbumListBoxStory = StoryFn<typeof ListBox<Album>>;
+export const ListBoxDnd: AlbumListBoxStory = (props) => {
   let list = useListData({
     initialItems: albums
   });
@@ -181,7 +193,7 @@ ListBoxDnd.story = {
   }
 };
 
-export const ListBoxDndCustomDropIndicator = (props: ListBoxProps<typeof albums[0]>) => {
+export const ListBoxDndCustomDropIndicator: StoryFn<ListBoxProps<typeof albums[0]>> = (props) => {
   let list = useListData({
     initialItems: albums
   });
@@ -333,7 +345,7 @@ export const ListBoxPreviewOffset = {
   }
 };
 
-export const ListBoxHover = () => (
+export const ListBoxHover: ListBoxStory = () => (
   <ListBox className={styles.menu} aria-label="test listbox" onAction={action('onAction')} >
     <MyListBoxItem onHoverStart={action('onHoverStart')} onHoverChange={action('onHoverChange')} onHoverEnd={action('onHoverEnd')}>Hover</MyListBoxItem>
     <MyListBoxItem>Bar</MyListBoxItem>
@@ -342,7 +354,7 @@ export const ListBoxHover = () => (
   </ListBox>
 );
 
-export const ListBoxGrid = (args) => (
+export const ListBoxGrid: ListBoxStory = (args) => (
   <ListBox
     {...args}
     className={styles.menu}
@@ -393,13 +405,13 @@ function generateRandomString(minLength: number, maxLength: number): string {
   return result;
 }
 
-export function VirtualizedListBox(args) {
+function VirtualizedListBoxRender({variableHeight, isLoading}: {variableHeight: boolean, isLoading?: boolean}): JSX.Element {
   let sections: {id: string, name: string, children: {id: string, name: string}[]}[] = [];
   for (let s = 0; s < 10; s++) {
     let items: {id: string, name: string}[] = [];
     for (let i = 0; i < 100; i++) {
       const l = (s * 5) + i + 10;
-      items.push({id: `item_${s}_${i}`, name: `Section ${s}, Item ${i}${args.variableHeight ? ' ' + generateRandomString(l, l) : ''}`});
+      items.push({id: `item_${s}_${i}`, name: `Section ${s}, Item ${i}${variableHeight ? ' ' + generateRandomString(l, l) : ''}`});
     }
     sections.push({id: `section_${s}`, name: `Section ${s}`, children: items});
   }
@@ -422,21 +434,22 @@ export function VirtualizedListBox(args) {
             </ListBoxSection>
           )}
         </Collection>
-        <MyListBoxLoaderIndicator orientation="vertical" isLoading={args.isLoading} />
+        <MyListBoxLoaderIndicator orientation="vertical" isLoading={isLoading} />
       </ListBox>
     </Virtualizer>
   );
 }
 
-VirtualizedListBox.story = {
+export const VirtualizedListBox: StoryObj<typeof VirtualizedListBoxRender> = {
+  render: (args) => <VirtualizedListBoxRender {...args} />,
   args: {
     variableHeight: false,
     isLoading: false
   }
 };
 
-export function VirtualizedListBoxEmpty() {
-  return (
+export let VirtualizedListBoxEmpty: ListBoxStoryObj = {
+  render: () => (
     <Virtualizer
       layout={ListLayout}
       layoutOptions={{
@@ -447,10 +460,10 @@ export function VirtualizedListBoxEmpty() {
         <MyListBoxLoaderIndicator />
       </ListBox>
     </Virtualizer>
-  );
-}
+  )
+};
 
-export function VirtualizedListBoxDnd() {
+export let VirtualizedListBoxDnd: ListBoxStory = () => {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 10000; i++) {
     items.push({id: i, name: `Item ${i}`});
@@ -497,9 +510,9 @@ export function VirtualizedListBoxDnd() {
       </Virtualizer>
     </div>
   );
-}
+};
 
-function VirtualizedListBoxGridExample({minSize = 80, maxSize = 100, preserveAspectRatio = false}) {
+function VirtualizedListBoxGridExample({minSize = 80, maxSize = 100, preserveAspectRatio = false}: {minSize: number, maxSize: number, preserveAspectRatio: boolean}): JSX.Element {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 10000; i++) {
     items.push({id: i, name: `Item ${i}`});
@@ -550,8 +563,8 @@ function VirtualizedListBoxGridExample({minSize = 80, maxSize = 100, preserveAsp
   );
 }
 
-export const VirtualizedListBoxGrid = {
-  render(args) {
+export const VirtualizedListBoxGrid: StoryObj<typeof VirtualizedListBoxGridExample> = {
+  render: (args) => {
     return <VirtualizedListBoxGridExample {...args} />;
   },
   args: {
@@ -563,7 +576,7 @@ export const VirtualizedListBoxGrid = {
 
 let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'.split(' ');
 
-export function VirtualizedListBoxWaterfall({minSize = 80, maxSize = 100}) {
+export function VirtualizedListBoxWaterfall({minSize = 80, maxSize = 100}: {minSize: number, maxSize: number}): JSX.Element {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 1000; i++) {
     let words = Math.max(2, Math.floor(Math.random() * 25));
@@ -627,7 +640,7 @@ const MyListBoxLoaderIndicator = (props) => {
   );
 };
 
-export const AsyncListBox = (args) => {
+function AsyncListBoxRender(args: {delay: number, orientation: 'horizontal' | 'vertical'}): JSX.Element {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
@@ -674,7 +687,8 @@ export const AsyncListBox = (args) => {
   );
 };
 
-AsyncListBox.story = {
+export const AsyncListBox: StoryObj<typeof AsyncListBoxRender> = {
+  render: (args) => <AsyncListBoxRender {...args} />,
   args: {
     orientation: 'horizontal',
     delay: 50
@@ -687,7 +701,7 @@ AsyncListBox.story = {
   }
 };
 
-export const AsyncListBoxVirtualized = (args) => {
+export const AsyncListBoxVirtualized: StoryFn<typeof AsyncListBoxRender> = (args) => {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
diff --git a/packages/react-aria-components/stories/Menu.stories.tsx b/packages/react-aria-components/stories/Menu.stories.tsx
index 8732983f517..362d800d79d 100644
--- a/packages/react-aria-components/stories/Menu.stories.tsx
+++ b/packages/react-aria-components/stories/Menu.stories.tsx
@@ -11,16 +11,20 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Button, Header, Heading, Input, Keyboard, Label, Menu, MenuSection, MenuTrigger, Popover, Separator, SubmenuTrigger, Text, TextField} from 'react-aria-components';
+import {Button, Header, Heading, Input, Keyboard, Label, Menu, MenuSection, MenuTrigger, Popover, Separator, SubmenuTrigger, SubmenuTriggerProps, Text, TextField} from 'react-aria-components';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {MyMenuItem} from './utils';
-import React from 'react';
+import React, {JSX} from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/Menu'
-};
+  title: 'React Aria Components/Menu',
+  component: Menu
+} as Meta<typeof Menu>;
+
+export type MenuStory = StoryFn<typeof Menu>;
 
-export const MenuExample = () => (
+export const MenuExample: MenuStory = () => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -43,7 +47,7 @@ export const MenuExample = () => (
   </MenuTrigger>
 );
 
-export const MenuComplex = () => (
+export const MenuComplex: MenuStory = () => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -68,7 +72,7 @@ export const MenuComplex = () => (
   </MenuTrigger>
 );
 
-export const MenuScrollPaddingExample = () => (
+export const MenuScrollPaddingExample: MenuStory = () => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -116,60 +120,84 @@ export const MenuScrollPaddingExample = () => (
   </MenuTrigger>
 );
 
-export const SubmenuExample = (args) => (
-  <MenuTrigger>
-    <Button aria-label="Menu">☰</Button>
-    <Popover>
-      <Menu className={styles.menu} onAction={action('onAction')}>
-        <MyMenuItem id="Foo">Foo</MyMenuItem>
-        <SubmenuTrigger {...args}>
-          <MyMenuItem id="Bar">Bar</MyMenuItem>
-          <Popover className={styles.popover}>
-            <Menu className={styles.menu} onAction={action('onAction')}>
-              <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
-              <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
-              <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
-            </Menu>
-          </Popover>
-        </SubmenuTrigger>
-        <MyMenuItem id="Baz">Baz</MyMenuItem>
-        <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
-      </Menu>
-    </Popover>
-  </MenuTrigger>
-);
-
-export const SubmenuNestedExample = (args) => (
-  <MenuTrigger>
-    <Button aria-label="Menu">☰</Button>
-    <Popover>
-      <Menu className={styles.menu} onAction={action('onAction')}>
-        <MyMenuItem id="Foo">Foo</MyMenuItem>
-        <SubmenuTrigger {...args}>
-          <MyMenuItem id="Bar">Bar</MyMenuItem>
-          <Popover className={styles.popover}>
-            <Menu className={styles.menu} onAction={action('onAction')}>
-              <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
-              <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
-              <SubmenuTrigger {...args}>
+function SubmenuExampleRender(args: Omit<SubmenuTriggerProps, 'children'> & {delay: number}): JSX.Element {
+  return (
+    <MenuTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Menu className={styles.menu} onAction={action('onAction')}>
+          <MyMenuItem id="Foo">Foo</MyMenuItem>
+          <SubmenuTrigger {...args}>
+            <MyMenuItem id="Bar">Bar</MyMenuItem>
+            <Popover className={styles.popover}>
+              <Menu className={styles.menu} onAction={action('onAction')}>
+                <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
+                <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
                 <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
-                <Popover className={styles.popover}>
-                  <Menu className={styles.menu} onAction={action('onAction')}>
-                    <MyMenuItem id="Second Submenu Foo">Second Submenu Foo</MyMenuItem>
-                    <MyMenuItem id="Second Submenu Bar">Second Submenu Bar</MyMenuItem>
-                    <MyMenuItem id="Second Submenu Baz">Second Submenu Baz</MyMenuItem>
-                  </Menu>
-                </Popover>
-              </SubmenuTrigger>
-            </Menu>
-          </Popover>
-        </SubmenuTrigger>
-        <MyMenuItem id="Baz">Baz</MyMenuItem>
-        <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
-      </Menu>
-    </Popover>
-  </MenuTrigger>
-);
+              </Menu>
+            </Popover>
+          </SubmenuTrigger>
+          <MyMenuItem id="Baz">Baz</MyMenuItem>
+          <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  );
+}
+type SubmenuExampleStory = StoryObj<typeof SubmenuExampleRender>;
+export const SubmenuExample: SubmenuExampleStory = {
+  render: (args) => <SubmenuExampleRender {...args} />,
+  args: {
+    delay: 200
+  },
+  argTypes: {
+    delay: {
+      control: 'number'
+    }
+  }
+};
+
+export const SubmenuNestedExample: SubmenuExampleStory = {
+  render: (args) => (
+    <MenuTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Menu className={styles.menu} onAction={action('onAction')}>
+          <MyMenuItem id="Foo">Foo</MyMenuItem>
+          <SubmenuTrigger {...args}>
+            <MyMenuItem id="Bar">Bar</MyMenuItem>
+            <Popover className={styles.popover}>
+              <Menu className={styles.menu} onAction={action('onAction')}>
+                <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
+                <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
+                <SubmenuTrigger {...args}>
+                  <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
+                  <Popover className={styles.popover}>
+                    <Menu className={styles.menu} onAction={action('onAction')}>
+                      <MyMenuItem id="Second Submenu Foo">Second Submenu Foo</MyMenuItem>
+                      <MyMenuItem id="Second Submenu Bar">Second Submenu Bar</MyMenuItem>
+                      <MyMenuItem id="Second Submenu Baz">Second Submenu Baz</MyMenuItem>
+                    </Menu>
+                  </Popover>
+                </SubmenuTrigger>
+              </Menu>
+            </Popover>
+          </SubmenuTrigger>
+          <MyMenuItem id="Baz">Baz</MyMenuItem>
+          <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+  args: {
+    delay: 200
+  },
+  argTypes: {
+    delay: {
+      control: 'number'
+    }
+  }
+};
 
 let manyItemsSubmenu = [
   {id: 'Lvl 1 Item 1', name: 'Lvl 1 Item 1'},
@@ -201,168 +229,189 @@ let dynamicRenderFunc = (item, args) => {
   }
 };
 
-export const SubmenuManyItemsExample = (args) => (
-  <MenuTrigger>
-    <Button aria-label="Menu">☰</Button>
-    <Popover>
-      <Menu items={manyItemsSubmenu} className={styles.menu} onAction={action('onAction')}>
-        {(item) => dynamicRenderFunc(item, args)}
-      </Menu>
-    </Popover>
-  </MenuTrigger>
-);
-
-export const SubmenuDisabledExample = (args) => (
-  <MenuTrigger>
-    <Button aria-label="Menu">☰</Button>
-    <Popover>
-      <Menu className={styles.menu} onAction={action('onAction')} disabledKeys={['Bar']}>
-        <MyMenuItem id="Foo">Foo</MyMenuItem>
-        <SubmenuTrigger {...args}>
-          <MyMenuItem id="Bar">Bar</MyMenuItem>
-          <Popover className={styles.popover}>
-            <Menu className={styles.menu} onAction={action('onAction')}>
-              <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
-              <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
-              <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
-            </Menu>
-          </Popover>
-        </SubmenuTrigger>
-        <MyMenuItem id="Baz">Baz</MyMenuItem>
-        <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
-      </Menu>
-    </Popover>
-  </MenuTrigger>
-);
+export const SubmenuManyItemsExample: SubmenuExampleStory = {
+  render: (args) => (
+    <MenuTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Menu items={manyItemsSubmenu} className={styles.menu} onAction={action('onAction')}>
+          {(item) => dynamicRenderFunc(item, args)}
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+  args: {
+    delay: 200
+  },
+  argTypes: {
+    delay: {
+      control: 'number'
+    }
+  }
+};
 
-export const SubmenuSectionsExample = (args) => (
-  <MenuTrigger>
-    <Button aria-label="Menu">☰</Button>
-    <Popover>
-      <Menu className={styles.menu} onAction={action('onAction')}>
-        <MenuSection className={styles.group}>
-          <Header style={{fontSize: '1.2em'}}>Section 1</Header>
-          <MyMenuItem>Foo</MyMenuItem>
+export const SubmenuDisabledExample: SubmenuExampleStory = {
+  render: (args) => (
+    <MenuTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Menu className={styles.menu} onAction={action('onAction')} disabledKeys={['Bar']}>
+          <MyMenuItem id="Foo">Foo</MyMenuItem>
           <SubmenuTrigger {...args}>
             <MyMenuItem id="Bar">Bar</MyMenuItem>
             <Popover className={styles.popover}>
               <Menu className={styles.menu} onAction={action('onAction')}>
-                <MenuSection className={styles.group}>
-                  <Header style={{fontSize: '1.2em'}}>Submenu Section 1</Header>
-                  <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
-                  <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
-                  <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
-                  <MyMenuItem href="https://google.com">Google</MyMenuItem>
-                </MenuSection>
-                <Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
-                <MenuSection className={styles.group}>
-                  <Header style={{fontSize: '1.2em'}}>Submenu Section 2</Header>
-                  <MyMenuItem id="Submenu Foo 2">Submenu Foo</MyMenuItem>
-                  <MyMenuItem id="Submenu Bar 2">Submenu Bar</MyMenuItem>
-                  <MyMenuItem id="Submenu Baz 2">Submenu Baz</MyMenuItem>
-                </MenuSection>
+                <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
+                <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
+                <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
               </Menu>
             </Popover>
           </SubmenuTrigger>
-          <MyMenuItem>Baz</MyMenuItem>
-          <MyMenuItem href="https://google.com">Google</MyMenuItem>
-        </MenuSection>
-        <Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
-        <MenuSection className={styles.group}>
-          <Header style={{fontSize: '1.2em'}}>Section 2</Header>
-          <MyMenuItem>Foo</MyMenuItem>
-          <MyMenuItem>Bar</MyMenuItem>
-          <MyMenuItem>Baz</MyMenuItem>
-        </MenuSection>
-      </Menu>
-    </Popover>
-  </MenuTrigger>
-);
+          <MyMenuItem id="Baz">Baz</MyMenuItem>
+          <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
+  args: {
+    delay: 200
+  },
+  argTypes: {
+    delay: {
+      control: 'number'
+    }
+  }
+};
 
-// TODO: figure out why it is autofocusing the Menu in the SubDialog
-export const SubdialogExample = (args) => (
-  <MenuTrigger>
-    <Button aria-label="Menu">☰</Button>
-    <Popover>
-      <Menu className={styles.menu} onAction={action('onAction')}>
-        <MyMenuItem id="Foo">Foo</MyMenuItem>
-        <SubmenuTrigger {...args}>
-          <MyMenuItem id="Bar">Bar</MyMenuItem>
-          <Popover
-            style={{
-              background: 'Canvas',
-              color: 'CanvasText',
-              border: '1px solid gray',
-              padding: 5
-            }}>
-            <form style={{display: 'flex', flexDirection: 'column'}}>
-              <Heading slot="title">Sign up</Heading>
-              <TextField autoFocus>
-                <Label>First Name: </Label>
-                <Input />
-              </TextField>
-              <TextField>
-                <Label>Last Name: </Label>
-                <Input />
-              </TextField>
-              <Menu>
-                <SubmenuTrigger {...args}>
-                  <MyMenuItem>SubMenu</MyMenuItem>
-                  <Popover
-                    style={{
-                      background: 'Canvas',
-                      color: 'CanvasText',
-                      border: '1px solid gray',
-                      padding: 5
-                    }}>
-                    <Menu>
-                      <MyMenuItem>1</MyMenuItem>
-                      <MyMenuItem>2</MyMenuItem>
-                      <MyMenuItem>3</MyMenuItem>
-                    </Menu>
-                  </Popover>
-                </SubmenuTrigger>
-                <SubmenuTrigger {...args}>
-                  <MyMenuItem>SubDialog</MyMenuItem>
-                  <Popover
-                    style={{
-                      background: 'Canvas',
-                      color: 'CanvasText',
-                      border: '1px solid gray',
-                      padding: 5
-                    }}>
-                    <form style={{display: 'flex', flexDirection: 'column'}}>
-                      <Heading slot="title">Contact</Heading>
-                      <TextField autoFocus>
-                        <Label>Email: </Label>
-                        <Input />
-                      </TextField>
-                      <TextField>
-                        <Label>Contact number: </Label>
-                        <Input />
-                      </TextField>
-                      <Button style={{marginTop: 10}}>
-                        Submit
-                      </Button>
-                    </form>
-                  </Popover>
-                </SubmenuTrigger>
-                <MyMenuItem>C</MyMenuItem>
-              </Menu>
-              <Button style={{marginTop: 10}}>
-                Submit
-              </Button>
-            </form>
-          </Popover>
-        </SubmenuTrigger>
-        <MyMenuItem id="Baz">Baz</MyMenuItem>
-        <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
-      </Menu>
-    </Popover>
-  </MenuTrigger>
-);
+export const SubmenuSectionsExample: SubmenuExampleStory = {
+  render: (args) => (
+    <MenuTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Menu className={styles.menu} onAction={action('onAction')}>
+          <MenuSection className={styles.group}>
+            <Header style={{fontSize: '1.2em'}}>Section 1</Header>
+            <MyMenuItem>Foo</MyMenuItem>
+            <SubmenuTrigger {...args}>
+              <MyMenuItem id="Bar">Bar</MyMenuItem>
+              <Popover className={styles.popover}>
+                <Menu className={styles.menu} onAction={action('onAction')}>
+                  <MenuSection className={styles.group}>
+                    <Header style={{fontSize: '1.2em'}}>Submenu Section 1</Header>
+                    <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
+                    <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
+                    <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
+                    <MyMenuItem href="https://google.com">Google</MyMenuItem>
+                  </MenuSection>
+                  <Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
+                  <MenuSection className={styles.group}>
+                    <Header style={{fontSize: '1.2em'}}>Submenu Section 2</Header>
+                    <MyMenuItem id="Submenu Foo 2">Submenu Foo</MyMenuItem>
+                    <MyMenuItem id="Submenu Bar 2">Submenu Bar</MyMenuItem>
+                    <MyMenuItem id="Submenu Baz 2">Submenu Baz</MyMenuItem>
+                  </MenuSection>
+                </Menu>
+              </Popover>
+            </SubmenuTrigger>
+            <MyMenuItem>Baz</MyMenuItem>
+            <MyMenuItem href="https://google.com">Google</MyMenuItem>
+          </MenuSection>
+          <Separator style={{borderTop: '1px solid gray', margin: '2px 5px'}} />
+          <MenuSection className={styles.group}>
+            <Header style={{fontSize: '1.2em'}}>Section 2</Header>
+            <MyMenuItem>Foo</MyMenuItem>
+            <MyMenuItem>Bar</MyMenuItem>
+            <MyMenuItem>Baz</MyMenuItem>
+          </MenuSection>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  )
+};
 
-let submenuArgs = {
+// TODO: figure out why it is autofocusing the Menu in the SubDialog
+export const SubdialogExample: SubmenuExampleStory = {
+  render: (args) => (
+    <MenuTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Menu className={styles.menu} onAction={action('onAction')}>
+          <MyMenuItem id="Foo">Foo</MyMenuItem>
+          <SubmenuTrigger {...args}>
+            <MyMenuItem id="Bar">Bar</MyMenuItem>
+            <Popover
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 5
+              }}>
+              <form style={{display: 'flex', flexDirection: 'column'}}>
+                <Heading slot="title">Sign up</Heading>
+                <TextField autoFocus>
+                  <Label>First Name: </Label>
+                  <Input />
+                </TextField>
+                <TextField>
+                  <Label>Last Name: </Label>
+                  <Input />
+                </TextField>
+                <Menu>
+                  <SubmenuTrigger {...args}>
+                    <MyMenuItem>SubMenu</MyMenuItem>
+                    <Popover
+                      style={{
+                        background: 'Canvas',
+                        color: 'CanvasText',
+                        border: '1px solid gray',
+                        padding: 5
+                      }}>
+                      <Menu>
+                        <MyMenuItem>1</MyMenuItem>
+                        <MyMenuItem>2</MyMenuItem>
+                        <MyMenuItem>3</MyMenuItem>
+                      </Menu>
+                    </Popover>
+                  </SubmenuTrigger>
+                  <SubmenuTrigger {...args}>
+                    <MyMenuItem>SubDialog</MyMenuItem>
+                    <Popover
+                      style={{
+                        background: 'Canvas',
+                        color: 'CanvasText',
+                        border: '1px solid gray',
+                        padding: 5
+                      }}>
+                      <form style={{display: 'flex', flexDirection: 'column'}}>
+                        <Heading slot="title">Contact</Heading>
+                        <TextField autoFocus>
+                          <Label>Email: </Label>
+                          <Input />
+                        </TextField>
+                        <TextField>
+                          <Label>Contact number: </Label>
+                          <Input />
+                        </TextField>
+                        <Button style={{marginTop: 10}}>
+                          Submit
+                        </Button>
+                      </form>
+                    </Popover>
+                  </SubmenuTrigger>
+                  <MyMenuItem>C</MyMenuItem>
+                </Menu>
+                <Button style={{marginTop: 10}}>
+                  Submit
+                </Button>
+              </form>
+            </Popover>
+          </SubmenuTrigger>
+          <MyMenuItem id="Baz">Baz</MyMenuItem>
+          <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  ),
   args: {
     delay: 200
   },
@@ -372,9 +421,3 @@ let submenuArgs = {
     }
   }
 };
-
-SubmenuExample.story = {...submenuArgs};
-SubmenuNestedExample.story = {...submenuArgs};
-SubmenuManyItemsExample.story = {...submenuArgs};
-SubmenuDisabledExample.story = {...submenuArgs};
-SubdialogExample.story = {...submenuArgs};
diff --git a/packages/react-aria-components/stories/Meter.stories.tsx b/packages/react-aria-components/stories/Meter.stories.tsx
index 33ca1e0d018..505d17dd0fd 100644
--- a/packages/react-aria-components/stories/Meter.stories.tsx
+++ b/packages/react-aria-components/stories/Meter.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import {Label, Meter} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -24,9 +25,11 @@ export default {
     minValue: {control: 'number'},
     maxValue: {control: 'number'}
   }
-};
+} as Meta<typeof Meter>;
+
+export type MeterStory = StoryFn<typeof Meter>;
 
-export const MeterExample = (args) => {
+export const MeterExample: MeterStory = (args) => {
   return (
     <Meter {...args}>
       {({percentage, valueText}) => (
diff --git a/packages/react-aria-components/stories/Modal.stories.tsx b/packages/react-aria-components/stories/Modal.stories.tsx
index f97532547cb..22afb086256 100644
--- a/packages/react-aria-components/stories/Modal.stories.tsx
+++ b/packages/react-aria-components/stories/Modal.stories.tsx
@@ -11,13 +11,17 @@
  */
 
 import {Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React, {useEffect} from 'react';
 
 export default {
-  title: 'React Aria Components/Modal'
-};
+  title: 'React Aria Components/Modal',
+  component: Modal
+} as Meta<typeof Modal>;
+
+export type ModalStory = StoryFn<typeof Modal>;
 
-export const ModalExample = () => (
+export const ModalExample: ModalStory = () => (
   <DialogTrigger>
     <Button>Open modal</Button>
     <ModalOverlay
@@ -61,7 +65,7 @@ export const ModalExample = () => (
   </DialogTrigger>
 );
 
-export const ModalInteractionOutsideExample = () => {
+export const ModalInteractionOutsideExample: ModalStory = () => {
 
   useEffect(() => {
     let button = document.createElement('button');
@@ -128,7 +132,7 @@ export const ModalInteractionOutsideExample = () => {
   );
 };
 
-export const ModalInteractionOutsideDefaultOverlayExample = () => {
+export const ModalInteractionOutsideDefaultOverlayExample: ModalStory = () => {
 
   useEffect(() => {
     let button = document.createElement('button');
diff --git a/packages/react-aria-components/stories/NumberField.stories.tsx b/packages/react-aria-components/stories/NumberField.stories.tsx
index 8b5045db13b..d67cd086b65 100644
--- a/packages/react-aria-components/stories/NumberField.stories.tsx
+++ b/packages/react-aria-components/stories/NumberField.stories.tsx
@@ -11,13 +11,17 @@
  */
 
 import {Button, FieldError, Group, Input, Label, NumberField, NumberFieldProps} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 
 export default {
-  title: 'React Aria Components/NumberField'
-};
+  title: 'React Aria Components/NumberField',
+  component: NumberField
+} as Meta<typeof NumberField>;
+
+export type NumberFieldStory = StoryObj<typeof NumberField>;
 
-export const NumberFieldExample = {
+export const NumberFieldExample: NumberFieldStory = {
   args: {
     defaultValue: 0,
     minValue: 0,
diff --git a/packages/react-aria-components/stories/Popover.stories.tsx b/packages/react-aria-components/stories/Popover.stories.tsx
index 718a4e1d9e3..b66d97470dd 100644
--- a/packages/react-aria-components/stories/Popover.stories.tsx
+++ b/packages/react-aria-components/stories/Popover.stories.tsx
@@ -11,13 +11,17 @@
  */
 
 import {Button, Dialog, DialogTrigger, Heading, OverlayArrow, Popover} from 'react-aria-components';
-import React, {useEffect, useRef, useState} from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX, useEffect, useRef, useState} from 'react';
 
 export default {
-  title: 'React Aria Components/Popover'
-};
+  title: 'React Aria Components/Popover',
+  component: Popover
+} as Meta<typeof Popover>;
+
+export type PopoverStory = StoryFn<typeof Popover>;
 
-export const PopoverExample = () => (
+export const PopoverExample: PopoverStory = () => (
   <DialogTrigger>
     <Button>Open popover</Button>
     <Popover
@@ -52,7 +56,7 @@ export const PopoverExample = () => (
 
 const COUNTDOWN = 5000;
 
-function PopoverTriggerObserver() {
+function PopoverTriggerObserver(): JSX.Element {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [countdown, setCountdown] = useState(COUNTDOWN);
 
@@ -118,11 +122,235 @@ function PopoverTriggerObserver() {
 }
 
 
-export const PopoverTriggerObserverExample = {
-  render: PopoverTriggerObserver
+export const PopoverTriggerObserverExample: StoryObj<typeof PopoverTriggerObserver> = {
+  render: () => <PopoverTriggerObserver />
 };
 
-export const PopoverArrowBoundaryOffsetExample = {
+function PopoverArrowBoundaryOffsetExampleRender({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}:
+  {topLeft: number, topRight: number, leftTop: number, leftBottom: number, rightTop: number, rightBottom: number, bottomLeft: number, bottomRight: number}): JSX.Element {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Top left</Button>
+            <Popover
+              placement="top left"
+              shouldFlip={false}
+              arrowBoundaryOffset={topLeft}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Top left</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Top right</Button>
+            <Popover
+              placement="top right"
+              shouldFlip={false}
+              arrowBoundaryOffset={topRight}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Top right</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Left top</Button>
+            <Popover
+              placement="left top"
+              shouldFlip={false}
+              arrowBoundaryOffset={leftTop}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Left top</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Left bottom</Button>
+            <Popover
+              placement="left bottom"
+              shouldFlip={false}
+              arrowBoundaryOffset={leftBottom}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Left bottom</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Right top</Button>
+            <Popover
+              placement="right top"
+              shouldFlip={false}
+              arrowBoundaryOffset={rightTop}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Right top</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Right bottom</Button>
+            <Popover
+              placement="right bottom"
+              shouldFlip={false}
+              arrowBoundaryOffset={rightBottom}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Right bottom</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Bottom left</Button>
+            <Popover
+              placement="bottom left"
+              shouldFlip={false}
+              arrowBoundaryOffset={bottomLeft}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Bottom left</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Bottom right</Button>
+            <Popover
+              placement="bottom right"
+              shouldFlip={false}
+              arrowBoundaryOffset={bottomRight}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Bottom right</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const PopoverArrowBoundaryOffsetExample: StoryObj<typeof PopoverArrowBoundaryOffsetExampleRender> = {
   args: {
     topLeft: 25,
     topRight: 25,
@@ -191,231 +419,10 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     }
   },
-  render: ({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
-    return (
-      <div style={{display: 'flex', flexDirection: 'column'}}>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Top left</Button>
-              <Popover
-                placement="top left"
-                shouldFlip={false}
-                arrowBoundaryOffset={topLeft}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Top left</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Top right</Button>
-              <Popover
-                placement="top right"
-                shouldFlip={false}
-                arrowBoundaryOffset={topRight}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Top right</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Left top</Button>
-              <Popover
-                placement="left top"
-                shouldFlip={false}
-                arrowBoundaryOffset={leftTop}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Left top</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Left bottom</Button>
-              <Popover
-                placement="left bottom"
-                shouldFlip={false}
-                arrowBoundaryOffset={leftBottom}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Left bottom</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Right top</Button>
-              <Popover
-                placement="right top"
-                shouldFlip={false}
-                arrowBoundaryOffset={rightTop}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Right top</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Right bottom</Button>
-              <Popover
-                placement="right bottom"
-                shouldFlip={false}
-                arrowBoundaryOffset={rightBottom}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Right bottom</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Bottom left</Button>
-              <Popover
-                placement="bottom left"
-                shouldFlip={false}
-                arrowBoundaryOffset={bottomLeft}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Bottom left</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Bottom right</Button>
-              <Popover
-                placement="bottom right"
-                shouldFlip={false}
-                arrowBoundaryOffset={bottomRight}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Bottom right</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
+  render: (args) => <PopoverArrowBoundaryOffsetExampleRender {...args} />
 };
 
-export const PopoverTriggerWidthExample = () => (
+export const PopoverTriggerWidthExample: PopoverStory = () => (
   <DialogTrigger>
     <Button>Open popover</Button>
     <Popover
diff --git a/packages/react-aria-components/stories/ProgressBar.stories.tsx b/packages/react-aria-components/stories/ProgressBar.stories.tsx
index 9623d2d82f5..09a0b69faa4 100644
--- a/packages/react-aria-components/stories/ProgressBar.stories.tsx
+++ b/packages/react-aria-components/stories/ProgressBar.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import {Label, ProgressBar} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -24,9 +25,11 @@ export default {
     minValue: {control: 'number'},
     maxValue: {control: 'number'}
   }
-};
+} as Meta<typeof ProgressBar>;
+
+export type ProgressBarStory = StoryFn<typeof ProgressBar>;
 
-export const ProgressBarExample = (args) => {
+export const ProgressBarExample: ProgressBarStory = (args) => {
   return (
     <ProgressBar {...args}>
       {({percentage, valueText}) => (
diff --git a/packages/react-aria-components/stories/RadioGroup.stories.tsx b/packages/react-aria-components/stories/RadioGroup.stories.tsx
index d85d5c74d63..015fce1fde8 100644
--- a/packages/react-aria-components/stories/RadioGroup.stories.tsx
+++ b/packages/react-aria-components/stories/RadioGroup.stories.tsx
@@ -11,14 +11,18 @@
  */
 
 import {Button, Dialog, DialogTrigger, FieldError, Form, Label, Modal, ModalOverlay, Radio, RadioGroup} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React, {useState} from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/RadioGroup'
-};
+  title: 'React Aria Components/RadioGroup',
+  component: RadioGroup
+} as Meta<typeof RadioGroup>;
+
+export type RadioGroupStory = StoryFn<typeof RadioGroup>;
 
-export const RadioGroupExample = () => {
+export const RadioGroupExample: RadioGroupStory = () => {
   return (
     <RadioGroup
       data-testid="radio-group-example"
@@ -31,7 +35,7 @@ export const RadioGroupExample = () => {
   );
 };
 
-export const RadioGroupControlledExample = () => {
+export const RadioGroupControlledExample: RadioGroupStory = () => {
   let [selected, setSelected] = useState<string|null>(null);
 
   return (
@@ -48,7 +52,7 @@ export const RadioGroupControlledExample = () => {
   );
 };
 
-export const RadioGroupInDialogExample = () => {
+export const RadioGroupInDialogExample: RadioGroupStory = () => {
   return (
     <DialogTrigger>
       <Button>Open dialog</Button>
@@ -82,7 +86,14 @@ export const RadioGroupInDialogExample = () => {
               <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
                 <div style={{display: 'flex', flexDirection: 'row', gap: 20}}>
                   <div>
-                    <RadioGroupExample />
+                    <RadioGroup
+                      data-testid="radio-group-example"
+                      className={styles.radiogroup}>
+                      <Label>Favorite pet</Label>
+                      <Radio className={styles.radio} value="dogs" data-testid="radio-dog">Dog</Radio>
+                      <Radio className={styles.radio} value="cats">Cat</Radio>
+                      <Radio className={styles.radio} value="dragon">Dragon</Radio>
+                    </RadioGroup>
                   </div>
                   <Form>
                     <RadioGroup
@@ -130,7 +141,7 @@ export const RadioGroupInDialogExample = () => {
   );
 };
 
-export const RadioGroupSubmitExample = () => {
+export const RadioGroupSubmitExample: RadioGroupStory = () => {
   return (
     <Form>
       <RadioGroup
diff --git a/packages/react-aria-components/stories/SearchField.stories.tsx b/packages/react-aria-components/stories/SearchField.stories.tsx
index fce47419c0c..a7f5613ad20 100644
--- a/packages/react-aria-components/stories/SearchField.stories.tsx
+++ b/packages/react-aria-components/stories/SearchField.stories.tsx
@@ -12,14 +12,18 @@
 
 import {Button, Input, Label, SearchField} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/SearchField'
-};
+  title: 'React Aria Components/SearchField',
+  component: SearchField
+} as Meta<typeof SearchField>;
+
+export type SearchFieldStory = StoryFn<typeof SearchField>;
 
-export const SearchFieldExample = () => {
+export const SearchFieldExample: SearchFieldStory = () => {
   return (
     <SearchField className={classNames(styles, 'searchFieldExample')} data-testid="search-field-example">
       <Label>Search</Label>
diff --git a/packages/react-aria-components/stories/Select.stories.tsx b/packages/react-aria-components/stories/Select.stories.tsx
index 3058b949132..c5b392d9d83 100644
--- a/packages/react-aria-components/stories/Select.stories.tsx
+++ b/packages/react-aria-components/stories/Select.stories.tsx
@@ -13,21 +13,25 @@
 import {Button, Collection, FieldError, Form, Input, Label, ListBox, ListLayout, OverlayArrow, Popover, Select, SelectValue, TextField, Virtualizer} from 'react-aria-components';
 import {ListBoxLoadMoreItem} from '../src/ListBox';
 import {LoadingSpinner, MyListBoxItem} from './utils';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 import styles from '../example/index.css';
 import {useAsyncList} from 'react-stately';
 
 export default {
   title: 'React Aria Components/Select',
+  component: Select,
   argTypes: {
     validationBehavior: {
       control: 'select',
       options: ['native', 'aria']
     }
   }
-};
+} as Meta<typeof Select>;
+
+export type SelectStory = StoryFn<typeof Select>;
 
-export const SelectExample = () => (
+export const SelectExample: SelectStory = () => (
   <Select data-testid="select-example" id="select-example-id" style={{position: 'relative'}}>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
@@ -48,7 +52,7 @@ export const SelectExample = () => (
   </Select>
 );
 
-export const SelectRenderProps = () => (
+export const SelectRenderProps: SelectStory = () => (
   <Select data-testid="select-render-props" style={{position: 'relative'}}>
     {({isOpen}) => (
       <>
@@ -138,7 +142,7 @@ const usStateOptions = [
   {id: 'WY', name: 'Wyoming'}
 ];
 
-export const SelectManyItems = () => (
+export const SelectManyItems: SelectStory = () => (
   <Select style={{position: 'relative'}}>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
@@ -156,7 +160,7 @@ export const SelectManyItems = () => (
   </Select>
 );
 
-export const VirtualizedSelect = () => (
+export const VirtualizedSelect: SelectStory = () => (
   <Select style={{position: 'relative'}}>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
@@ -191,7 +195,7 @@ const MyListBoxLoaderIndicator = (props) => {
   );
 };
 
-export const AsyncVirtualizedCollectionRenderSelect = (args) => {
+function AsyncVirtualizedCollectionRenderSelectRender(args: {delay: number}): JSX.Element {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -241,13 +245,14 @@ export const AsyncVirtualizedCollectionRenderSelect = (args) => {
   );
 };
 
-AsyncVirtualizedCollectionRenderSelect.story = {
+export const AsyncVirtualizedCollectionRenderSelect: StoryObj<typeof AsyncVirtualizedCollectionRenderSelectRender> = {
+  render: (args) => <AsyncVirtualizedCollectionRenderSelectRender {...args} />,
   args: {
     delay: 50
   }
 };
 
-export const SelectSubmitExample = () => (
+export const SelectSubmitExample: SelectStory = () => (
   <Form>
     <TextField
       isRequired
diff --git a/packages/react-aria-components/stories/Slider.stories.tsx b/packages/react-aria-components/stories/Slider.stories.tsx
index dd7dabf4595..aedb3a124d6 100644
--- a/packages/react-aria-components/stories/Slider.stories.tsx
+++ b/packages/react-aria-components/stories/Slider.stories.tsx
@@ -10,15 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-import {Label, Slider, SliderOutput, SliderProps, SliderThumb, SliderTrack} from 'react-aria-components';
+import {Label, Slider, SliderOutput, SliderThumb, SliderTrack} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/Slider'
-};
+  title: 'React Aria Components/Slider',
+  component: Slider
+} as Meta<typeof Slider>;
+
+export type SliderStory = StoryFn<typeof Slider>;
 
-export const SliderExample = () => {
+export const SliderExample: SliderStory = () => {
   const [value, setValue] = React.useState([30, 60]);
   return (
     <div>
@@ -66,7 +70,7 @@ export const SliderExample = () => {
   );
 };
 
-export const SliderCSS = (props: SliderProps) => (
+export const SliderCSS: SliderStory = (props) => (
   <Slider {...props} defaultValue={30} className={styles.slider}>
     <div className={styles.label}>
       <Label>Test</Label>
diff --git a/packages/react-aria-components/stories/Switch.stories.tsx b/packages/react-aria-components/stories/Switch.stories.tsx
index 0aa93e4ef89..87505770870 100644
--- a/packages/react-aria-components/stories/Switch.stories.tsx
+++ b/packages/react-aria-components/stories/Switch.stories.tsx
@@ -11,15 +11,19 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 import {Switch} from 'react-aria-components';
 
 export default {
-  title: 'React Aria Components/Switch'
-};
+  title: 'React Aria Components/Switch',
+  component: Switch
+} as Meta<typeof Switch>;
+
+export type SwitchStory = StoryFn<typeof Switch>;
 
-export const SwitchExample = () => {
+export const SwitchExample: SwitchStory = () => {
   return (
     <Switch className={classNames(styles, 'switchExample')} data-testid="switch-example">
       <div className={classNames(styles, 'switchExample-indicator')} />
diff --git a/packages/react-aria-components/stories/Table.stories.tsx b/packages/react-aria-components/stories/Table.stories.tsx
index 0f8d19100b4..0780ca96c60 100644
--- a/packages/react-aria-components/stories/Table.stories.tsx
+++ b/packages/react-aria-components/stories/Table.stories.tsx
@@ -14,15 +14,20 @@ import {action} from '@storybook/addon-actions';
 import {Button, Cell, Checkbox, CheckboxProps, Collection, Column, ColumnProps, ColumnResizer, Dialog, DialogTrigger, DropIndicator, Heading, Menu, MenuTrigger, Modal, ModalOverlay, Popover, ResizableTableContainer, Row, Table, TableBody, TableHeader, TableLayout, useDragAndDrop, Virtualizer} from 'react-aria-components';
 import {isTextDropItem} from 'react-aria';
 import {LoadingSpinner, MyMenuItem} from './utils';
-import React, {startTransition, Suspense, useState} from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX, startTransition, Suspense, useState} from 'react';
+import {Selection, useAsyncList, useListData} from 'react-stately';
 import styles from '../example/index.css';
 import {TableLoadMoreItem} from '../src/Table';
-import {useAsyncList, useListData} from 'react-stately';
 
 export default {
   title: 'React Aria Components/Table',
+  component: Table,
   excludeStories: ['DndTable', 'makePromise']
-};
+} as Meta<typeof Table>;
+
+export type TableStory = StoryFn<typeof Table>;
+export type TableStoryObj = StoryObj<typeof Table>;
 
 const ReorderableTable = ({initialItems}: {initialItems: {id: string, name: string}[]}) => {
   let list = useListData({initialItems});
@@ -89,7 +94,7 @@ const ReorderableTable = ({initialItems}: {initialItems: {id: string, name: stri
   );
 };
 
-export const ReorderableTableExample = () => (
+export const ReorderableTableExample: TableStory = () => (
   <>
     <ResizableTableContainer style={{width: 300, overflow: 'auto'}}>
       <ReorderableTable initialItems={[{id: '1', name: 'Bob'}]} />
@@ -100,7 +105,7 @@ export const ReorderableTableExample = () => (
   </>
 );
 
-const TableExample = (args) => {
+const TableExample: TableStory = (args) => {
   let list = useListData({
     initialItems: [
       {id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
@@ -176,7 +181,7 @@ const TableExample = (args) => {
   );
 };
 
-export const TableExampleStory = {
+export const TableExampleStory: TableStoryObj = {
   render: TableExample,
   args: {
     selectionMode: 'none',
@@ -212,7 +217,7 @@ let rows = [
   {id: 4, name: 'log.txt', date: '1/18/20167', type: 'Text Document'}
 ];
 
-export const TableDynamicExample = () => {
+export const TableDynamicExample: TableStory = () => {
   return (
     <Table aria-label="Files">
       <TableHeader columns={columns}>
@@ -251,7 +256,7 @@ let timeTableRows = [
   {id: 6, time: '13:00 - 14:00', monday: 'History', tuesday: 'Math', wednesday: 'English', thursday: 'Science', friday: 'Art'}
 ];
 
-export const TableCellColSpanExample = () => {
+export const TableCellColSpanExample: TableStory = () => {
   return (
     <Table aria-label="Timetable">
       <TableHeader columns={timeTableColumns}>
@@ -284,7 +289,7 @@ export const TableCellColSpanExample = () => {
   );
 };
 
-export const TableCellColSpanWithVariousSpansExample = () => {
+export const TableCellColSpanWithVariousSpansExample: TableStory = () => {
   return (
     <Table aria-label="Table with various colspans">
       <TableHeader>
@@ -366,10 +371,10 @@ interface DndTableProps {
   'aria-label': string,
   isDisabled?: boolean,
   isLoading?: boolean,
-  onSelectionChange?: (keys) => void
+  onSelectionChange?: (keys: Selection) => void
 }
 
-export const DndTable = (props: DndTableProps) => {
+function DndTableRender(props: DndTableProps): JSX.Element {
   let list = useListData({
     initialItems: props.initialItems
   });
@@ -470,16 +475,22 @@ export const DndTable = (props: DndTableProps) => {
   );
 };
 
+export const DndTable: StoryFn<typeof DndTableRender> = (props) => {
+  return (
+    <DndTableRender {...props} />
+  );
+};
+
 type DndTableExampleProps = {
   isDisabledFirstTable?: boolean,
   isDisabledSecondTable?: boolean,
   isLoading?: boolean
 }
 
-export const DndTableExample = (props: DndTableExampleProps) => {
+function DndTableExampleRender(props: DndTableExampleProps): JSX.Element {
   return (
     <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
-      <DndTable
+      <DndTableRender
         isLoading={props.isLoading}
         initialItems={[
         {id: '1', type: 'file', name: 'Adobe Photoshop'},
@@ -491,7 +502,7 @@ export const DndTableExample = (props: DndTableExampleProps) => {
         ]}
         aria-label="First Table"
         isDisabled={props.isDisabledFirstTable} />
-      <DndTable
+      <DndTableRender
         isLoading={props.isLoading}
         initialItems={[
         {id: '7', type: 'folder', name: 'Pictures'},
@@ -507,6 +518,10 @@ export const DndTableExample = (props: DndTableExampleProps) => {
   );
 };
 
+export const DndTableExample: StoryFn<typeof DndTableExampleRender> = (props) => {
+  return <DndTableExampleRender {...props} />;
+};
+
 DndTableExample.args = {
   isDisabledFirstTable: false,
   isDisabledSecondTable: false,
@@ -556,7 +571,7 @@ function MyTableBody(props) {
   );
 }
 
-const TableLoadingBodyWrapper = (args: {isLoadingMore: boolean}) => {
+const TableLoadingBodyWrapper = (args: {isLoadingMore: boolean}): JSX.Element => {
   return (
     <Table aria-label="Files">
       <TableHeader columns={columns}>
@@ -577,7 +592,7 @@ const TableLoadingBodyWrapper = (args: {isLoadingMore: boolean}) => {
   );
 };
 
-export const TableLoadingBodyWrapperStory = {
+export const TableLoadingBodyWrapperStory: StoryObj<typeof TableLoadingBodyWrapper> = {
   render: TableLoadingBodyWrapper,
   args: {
     isLoadingMore: false
@@ -595,7 +610,7 @@ function MyRow(props) {
   );
 }
 
-const TableLoadingRowRenderWrapper = (args: {isLoadingMore: boolean}) => {
+const TableLoadingRowRenderWrapper = (args: {isLoadingMore: boolean}): JSX.Element => {
   return (
     <Table aria-label="Files">
       <TableHeader columns={columns}>
@@ -616,7 +631,7 @@ const TableLoadingRowRenderWrapper = (args: {isLoadingMore: boolean}) => {
   );
 };
 
-export const TableLoadingRowRenderWrapperStory = {
+export const TableLoadingRowRenderWrapperStory: StoryObj<typeof TableLoadingRowRenderWrapper> = {
   render: TableLoadingRowRenderWrapper,
   args: {
     isLoadingMore: false
@@ -630,7 +645,7 @@ function renderEmptyLoader({isLoading, tableWidth = 400}) {
   return <div style={{height: 30, position: 'sticky', top: 0, left: 0, width: tableWidth}}>{contents}</div>;
 }
 
-const RenderEmptyState = (args: {isLoading: boolean}) => {
+const RenderEmptyState = (args: {isLoading: boolean}): JSX.Element => {
   let {isLoading} = args;
   return (
     <Table aria-label="Files" selectionMode="multiple">
@@ -658,7 +673,7 @@ const RenderEmptyState = (args: {isLoading: boolean}) => {
   );
 };
 
-export const RenderEmptyStateStory  = {
+export const RenderEmptyStateStory: StoryObj<typeof RenderEmptyState> = {
   render: RenderEmptyState,
   args: {
     isLoading: false
@@ -673,7 +688,7 @@ interface Character {
   birth_year: number
 }
 
-const OnLoadMoreTable = (args) => {
+const OnLoadMoreTable = (args: {delay: number}): JSX.Element => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -721,7 +736,7 @@ const OnLoadMoreTable = (args) => {
   );
 };
 
-export const OnLoadMoreTableStory  = {
+export const OnLoadMoreTableStory: StoryObj<typeof OnLoadMoreTable> = {
   render: OnLoadMoreTable,
   name: 'onLoadMore table',
   args: {
@@ -729,7 +744,7 @@ export const OnLoadMoreTableStory  = {
   }
 };
 
-export function VirtualizedTable() {
+export const VirtualizedTable: TableStory = () => {
   let items: {id: number, foo: string, bar: string, baz: string}[] = [];
   for (let i = 0; i < 1000; i++) {
     items.push({id: i, foo: `Foo ${i}`, bar: `Bar ${i}`, baz: `Baz ${i}`});
@@ -784,9 +799,9 @@ export function VirtualizedTable() {
       </Table>
     </Virtualizer>
   );
-}
+};
 
-export function VirtualizedTableWithResizing() {
+export const VirtualizedTableWithResizing: TableStory = () => {
   let items: {id: number, foo: string, bar: string, baz: string}[] = [];
   for (let i = 0; i < 1000; i++) {
     items.push({id: i, foo: `Foo ${i}`, bar: `Bar ${i}`, baz: `Baz ${i}`});
@@ -819,9 +834,9 @@ export function VirtualizedTableWithResizing() {
       </Virtualizer>
     </ResizableTableContainer>
   );
-}
+};
 
-function VirtualizedTableWithEmptyState(args) {
+function VirtualizedTableWithEmptyState(args: {isLoading: boolean, showRows: boolean}): JSX.Element {
   let rows = [
     {foo: 'Foo 1', bar: 'Bar 1', baz: 'Baz 1'},
     {foo: 'Foo 2', bar: 'Bar 2', baz: 'Baz 2'},
@@ -861,7 +876,7 @@ function VirtualizedTableWithEmptyState(args) {
   );
 }
 
-export const VirtualizedTableWithEmptyStateStory  = {
+export const VirtualizedTableWithEmptyStateStory: StoryObj<typeof VirtualizedTableWithEmptyState> = {
   render: VirtualizedTableWithEmptyState,
   args: {
     isLoading: false,
@@ -870,7 +885,7 @@ export const VirtualizedTableWithEmptyStateStory  = {
   name: 'Virtualized Table With Empty State'
 };
 
-const OnLoadMoreTableVirtualized = (args) => {
+const OnLoadMoreTableVirtualized = (args: {delay: number}): JSX.Element => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -922,7 +937,7 @@ const OnLoadMoreTableVirtualized = (args) => {
   );
 };
 
-export const OnLoadMoreTableStoryVirtualized  = {
+export const OnLoadMoreTableStoryVirtualized: StoryObj<typeof OnLoadMoreTableVirtualized> = {
   render: OnLoadMoreTableVirtualized,
   name: 'Virtualized Table with async loading',
   args: {
@@ -930,7 +945,7 @@ export const OnLoadMoreTableStoryVirtualized  = {
   }
 };
 
-const OnLoadMoreTableVirtualizedResizeWrapper = (args) => {
+const OnLoadMoreTableVirtualizedResizeWrapper = (args: {delay: number}): JSX.Element => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -984,7 +999,7 @@ const OnLoadMoreTableVirtualizedResizeWrapper = (args) => {
   );
 };
 
-export const OnLoadMoreTableVirtualizedResizeWrapperStory  = {
+export const OnLoadMoreTableVirtualizedResizeWrapperStory: StoryObj<typeof OnLoadMoreTableVirtualizedResizeWrapper> = {
   render: OnLoadMoreTableVirtualizedResizeWrapper,
   name: 'Virtualized Table with async loading, with wrapper around Virtualizer',
   args: {
@@ -1010,11 +1025,11 @@ const items: Launch[] = [
   {id: 3, mission_name: 'RatSat', launch_year: 2009}
 ];
 
-export function makePromise(items: Launch[]) {
+export function makePromise(items: Launch[]): Promise<Launch[]> {
   return new Promise(resolve => setTimeout(() => resolve(items), 1000));
 }
 
-function TableSuspense({reactTransition = false}) {
+function TableSuspense({reactTransition = false}: {reactTransition?: boolean}): JSX.Element {
   let [promise, setPromise] = useState(() => makePromise(items.slice(0, 2)));
   let [isPending, startTransition] = React.useTransition();
   return (
@@ -1064,8 +1079,8 @@ function LocationsTableBody({promise}) {
   ));
 }
 
-export const TableWithSuspense = {
-  render: React.use != null ? TableSuspense : () => 'This story requires React 19.',
+export const TableWithSuspense: StoryObj<typeof TableSuspense> = {
+  render: React.use != null ? (args) => <TableSuspense {...args} /> : () => <>'This story requires React 19.'</>,
   args: {
     reactTransition: false
   },
@@ -1485,7 +1500,7 @@ const columns1 = [
   }
 ];
 
-export function TableWithReactTransition() {
+export const TableWithReactTransition: TableStory = () => {
   const [show, setShow] = useState(true);
   const items = show ? rows2 : rows1;
 
@@ -1514,4 +1529,4 @@ export function TableWithReactTransition() {
       </Table>
     </div>
   );
-}
+};
diff --git a/packages/react-aria-components/stories/Tabs.stories.tsx b/packages/react-aria-components/stories/Tabs.stories.tsx
index a5e3884c02e..f7298fb5e3f 100644
--- a/packages/react-aria-components/stories/Tabs.stories.tsx
+++ b/packages/react-aria-components/stories/Tabs.stories.tsx
@@ -10,15 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, OverlayArrow, Tab, TabList, TabPanel, TabProps, Tabs, TabsProps, Tooltip, TooltipTrigger} from 'react-aria-components';
+import {Button, OverlayArrow, Tab, TabList, TabPanel, TabProps, Tabs, Tooltip, TooltipTrigger} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
+import {Orientation} from 'react-aria';
 import React, {useState} from 'react';
 import {RouterProvider} from '@react-aria/utils';
 
 export default {
-  title: 'React Aria Components/Tabs'
-};
+  title: 'React Aria Components/Tabs',
+  component: Tabs
+} as Meta<typeof Tabs>;
+
+export type TabsStory = StoryFn<typeof Tabs>;
 
-export const TabsExample = () => {
+export const TabsExample: TabsStory = () => {
   let [url, setUrl] = useState('/FoR');
 
   return (
@@ -62,8 +67,8 @@ export const TabsExample = () => {
 };
 
 // Has error with invalid aria-controls, bug documented here: https://github.com/adobe/react-spectrum/issues/4781#issuecomment-1641057070
-export const TabsRenderProps = () => {
-  const [tabOrientation, setTabOrientation] = useState<TabsProps['orientation']>('vertical');
+export const TabsRenderProps: TabsStory = () => {
+  const [tabOrientation, setTabOrientation] = useState<Orientation>('vertical');
 
   return (
     <div style={{display: 'flex', flexDirection: 'row', gap: 8}}>
@@ -108,7 +113,7 @@ const CustomTab = (props: TabProps) => {
   );
 };
 
-export const NestedTabs = () => (
+export const NestedTabs: TabsStory = () => (
   <Tabs>
     <TabList style={{display: 'flex', gap: 8}}>
       <CustomTab id="foo">Foo</CustomTab>
diff --git a/packages/react-aria-components/stories/TextField.stories.tsx b/packages/react-aria-components/stories/TextField.stories.tsx
index eff284cab9c..b725932ddf4 100644
--- a/packages/react-aria-components/stories/TextField.stories.tsx
+++ b/packages/react-aria-components/stories/TextField.stories.tsx
@@ -12,14 +12,18 @@
 
 import {Button, FieldError, Form, Input, Label, TextField} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/TextField'
-};
+  title: 'React Aria Components/TextField',
+  component: TextField
+} as Meta<typeof TextField>;
+
+export type TextFieldStory = StoryFn<typeof TextField>;
 
-export const TextfieldExample = () => {
+export const TextfieldExample: TextFieldStory = () => {
   return (
     <TextField data-testid="textfield-example">
       <Label>First name</Label>
@@ -28,7 +32,7 @@ export const TextfieldExample = () => {
   );
 };
 
-export const TextFieldSubmitExample = (args) => {
+export const TextFieldSubmitExample: TextFieldStory = (args) => {
   return (
     <Form>
       <TextField className={classNames(styles, 'textfieldExample')} name="email" type="email" isRequired {...args}>
diff --git a/packages/react-aria-components/stories/TimeField.stories.tsx b/packages/react-aria-components/stories/TimeField.stories.tsx
index f58f18ffc85..456d68999a0 100644
--- a/packages/react-aria-components/stories/TimeField.stories.tsx
+++ b/packages/react-aria-components/stories/TimeField.stories.tsx
@@ -12,14 +12,18 @@
 
 import clsx from 'clsx';
 import {DateInput, DateSegment, Label, TimeField} from 'react-aria-components';
+import {Meta, StoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/TimeField'
-};
+  title: 'React Aria Components/TimeField',
+  component: TimeField
+} as Meta<typeof TimeField>;
 
-export const TimeFieldExample = () => (
+export type TimeFieldStory = StoryFn<typeof TimeField>;
+
+export const TimeFieldExample: TimeFieldStory = () => (
   <TimeField data-testid="time-field-example">
     <Label style={{display: 'block'}}>Time</Label>
     <DateInput className={styles.field}>
diff --git a/packages/react-aria-components/stories/ToggleButton.stories.tsx b/packages/react-aria-components/stories/ToggleButton.stories.tsx
index 4c9c0722ab5..da80442b3fa 100644
--- a/packages/react-aria-components/stories/ToggleButton.stories.tsx
+++ b/packages/react-aria-components/stories/ToggleButton.stories.tsx
@@ -12,15 +12,19 @@
 
 import {action} from '@storybook/addon-actions';
 import {classNames} from '@react-spectrum/utils';
+import {Meta, StoryFn} from '@storybook/react';
 import React, {useState} from 'react';
 import styles from '../example/index.css';
 import {ToggleButton} from 'react-aria-components';
 
 export default {
-  title: 'React Aria Components/ToggleButton'
-};
+  title: 'React Aria Components/ToggleButton',
+  component: ToggleButton
+} as Meta<typeof ToggleButton>;
+
+export type ToggleButtonStory = StoryFn<typeof ToggleButton>;
 
-export const ToggleButtonExample = () => {
+export const ToggleButtonExample: ToggleButtonStory = () => {
 
   const [textColor, setTextColor] = useState('black');
 
diff --git a/packages/react-aria-components/stories/Toolbar.stories.tsx b/packages/react-aria-components/stories/Toolbar.stories.tsx
index 670d9200635..557db3a0119 100644
--- a/packages/react-aria-components/stories/Toolbar.stories.tsx
+++ b/packages/react-aria-components/stories/Toolbar.stories.tsx
@@ -12,15 +12,19 @@
 
 import {Checkbox, Link, ToggleButton, Toolbar, ToolbarProps} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {Meta, StoryObj} from '@storybook/react';
 import {Orientation} from 'react-stately';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components/Toolbar'
-};
+  title: 'React Aria Components/Toolbar',
+  component: Toolbar
+} as Meta<typeof Toolbar>;
+
+export type ToolbarStory = StoryObj<typeof Toolbar>;
 
-export const ToolbarExample = {
+export const ToolbarExample: ToolbarStory = {
   args: {
     orientation: 'horizontal' as Orientation
   },
diff --git a/packages/react-aria-components/stories/Tooltip.stories.tsx b/packages/react-aria-components/stories/Tooltip.stories.tsx
index 72c5dbdad24..dc45108d691 100644
--- a/packages/react-aria-components/stories/Tooltip.stories.tsx
+++ b/packages/react-aria-components/stories/Tooltip.stories.tsx
@@ -11,13 +11,18 @@
  */
 
 import {Button, OverlayArrow, Tooltip, TooltipTrigger} from 'react-aria-components';
-import React from 'react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 export default {
-  title: 'React Aria Components/Tooltip'
-};
+  title: 'React Aria Components/Tooltip',
+  component: Tooltip
+} as Meta<typeof Tooltip>;
+
+export type TooltipStory = StoryFn<typeof Tooltip>;
+export type TooltipStoryObj = StoryObj<typeof Tooltip>;
 
-export const TooltipExample = () => (
+export const TooltipExample: TooltipStory = () => (
   <TooltipTrigger>
     <Button>Tooltip trigger</Button>
     <Tooltip
@@ -39,7 +44,224 @@ export const TooltipExample = () => (
   </TooltipTrigger>
 );
 
-export const TooltipArrowBoundaryOffsetExample = {
+function TooltipArrowBoundaryOffsetExampleRender(args: {
+  topLeft: number,
+  topRight: number,
+  leftTop: number,
+  leftBottom: number,
+  rightTop: number,
+  rightBottom: number,
+  bottomLeft: number,
+  bottomRight: number
+}): JSX.Element {
+  let {topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight} = args;
+  return (
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Top left</Button>
+            <Tooltip
+              placement="top left"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={topLeft}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Top left
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Top right</Button>
+            <Tooltip
+              placement="top right"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={topRight}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Top right
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Left top</Button>
+            <Tooltip
+              placement="left top"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={leftTop}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Left top
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Left bottom</Button>
+            <Tooltip
+              placement="left bottom"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={leftBottom}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Left bottom
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Right top</Button>
+            <Tooltip
+              placement="right top"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={rightTop}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Right top
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Right bottom</Button>
+            <Tooltip
+              placement="right bottom"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={rightBottom}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Right bottom
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Bottom left</Button>
+            <Tooltip
+              placement="bottom left"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={bottomLeft}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Bottom left
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Bottom right</Button>
+            <Tooltip
+              placement="bottom right"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={bottomRight}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Bottom right
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const TooltipArrowBoundaryOffsetExample: StoryObj<typeof TooltipArrowBoundaryOffsetExampleRender> = {
   args: {
     topLeft: 25,
     topRight: 25,
@@ -72,7 +294,7 @@ export const TooltipArrowBoundaryOffsetExample = {
         max: 100
       }
     },
-    leftBotton: {
+    leftBottom: {
       control: {
         type: 'range',
         min: -100,
@@ -108,210 +330,5 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     }
   },
-  render: ({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
-    return (
-      <div style={{display: 'flex', flexDirection: 'column'}}>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Top left</Button>
-              <Tooltip
-                placement="top left"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={topLeft}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Top left
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Top right</Button>
-              <Tooltip
-                placement="top right"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={topRight}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Top right
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Left top</Button>
-              <Tooltip
-                placement="left top"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={leftTop}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Left top
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Left bottom</Button>
-              <Tooltip
-                placement="left bottom"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={leftBottom}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Left bottom
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Right top</Button>
-              <Tooltip
-                placement="right top"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={rightTop}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Right top
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Right bottom</Button>
-              <Tooltip
-                placement="right bottom"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={rightBottom}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Right bottom
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Bottom left</Button>
-              <Tooltip
-                placement="bottom left"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={bottomLeft}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Bottom left
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Bottom right</Button>
-              <Tooltip
-                placement="bottom right"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={bottomRight}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Bottom right
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
+  render: (args) => <TooltipArrowBoundaryOffsetExampleRender {...args} />
 };
diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index f7773f016fd..57d857b079d 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -13,15 +13,19 @@
 import {action} from '@storybook/addon-actions';
 import {Button, Checkbox, CheckboxProps, Collection, DroppableCollectionReorderEvent, isTextDropItem, Key, ListLayout, Menu, MenuTrigger, Popover, Text, Tree, TreeItem, TreeItemContent, TreeItemProps, TreeProps, useDragAndDrop, Virtualizer} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import {MyMenuItem} from './utils';
-import React, {ReactNode, useCallback, useState} from 'react';
+import React, {JSX, ReactNode, useCallback, useState} from 'react';
 import styles from '../example/index.css';
 import {TreeLoadMoreItem} from '../src/Tree';
 import {useAsyncList, useListData, useTreeData} from '@react-stately/data';
 
 export default {
-  title: 'React Aria Components/Tree'
-};
+  title: 'React Aria Components/Tree',
+  component: Tree
+} as Meta<typeof Tree>;
+
+export type TreeStory = StoryFn<typeof Tree>;
 
 interface StaticTreeItemProps extends TreeItemProps {
   title?: string,
@@ -138,7 +142,7 @@ const StaticTreeItemNoActions = (props: StaticTreeItemProps) => {
   );
 };
 
-const TreeExampleStaticRender = (args) => (
+const TreeExampleStaticRender = <T extends object>(args: TreeProps<T>): JSX.Element => (
   <Tree className={styles.tree} {...args} disabledKeys={['projects']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
     <StaticTreeItem id="Photos" textValue="Photos">Photos</StaticTreeItem>
     <StaticTreeItem id="projects" textValue="Projects" title="Projects">
@@ -185,7 +189,7 @@ const TreeExampleStaticRender = (args) => (
   </Tree>
 );
 
-const TreeExampleStaticNoActionsRender = (args) => (
+const TreeExampleStaticNoActionsRender = <T extends object>(args: TreeProps<T>): JSX.Element => (
   <Tree className={styles.tree} {...args} disabledKeys={['projects']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
     <StaticTreeItemNoActions id="Photos" textValue="Photos">Photos</StaticTreeItemNoActions>
     <StaticTreeItemNoActions id="projects" textValue="Projects" title="Projects">
@@ -232,13 +236,12 @@ const TreeExampleStaticNoActionsRender = (args) => (
   </Tree>
 );
 
-export const TreeExampleStatic = {
-  render: TreeExampleStaticRender,
+export const TreeExampleStatic: StoryObj<typeof TreeExampleStaticRender> = {
+  render: (args) => <TreeExampleStaticRender {...args} />,
   args: {
     selectionMode: 'none',
     selectionBehavior: 'toggle',
-    disabledBehavior: 'selection',
-    disallowClearAll: false
+    disabledBehavior: 'selection'
   },
   argTypes: {
     selectionMode: {
@@ -261,13 +264,12 @@ export const TreeExampleStatic = {
   }
 };
 
-export const TreeExampleStaticNoActions = {
-  render: TreeExampleStaticNoActionsRender,
+export const TreeExampleStaticNoActions: StoryObj<typeof TreeExampleStaticNoActionsRender> = {
+  render: (args) => <TreeExampleStaticNoActionsRender {...args} />,
   args: {
     selectionMode: 'none',
     selectionBehavior: 'toggle',
-    disabledBehavior: 'selection',
-    disallowClearAll: false
+    disabledBehavior: 'selection'
   },
   argTypes: {
     selectionMode: {
@@ -418,7 +420,7 @@ const DynamicTreeItem = (props: DynamicTreeItemProps) => {
 
 let defaultExpandedKeys = new Set(['projects', 'project-2', 'project-5', 'reports', 'reports-1', 'reports-1A', 'reports-1AB']);
 
-const TreeExampleDynamicRender = (args: TreeProps<unknown>) => {
+const TreeExampleDynamicRender = <T extends object>(args: TreeProps<T>): JSX.Element => {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -436,13 +438,13 @@ const TreeExampleDynamicRender = (args: TreeProps<unknown>) => {
   );
 };
 
-export const TreeExampleDynamic = {
+export const TreeExampleDynamic: StoryObj<typeof TreeExampleDynamicRender> = {
   ...TreeExampleStatic,
-  render: TreeExampleDynamicRender,
-  parameters: null
+  render: (args) => <TreeExampleDynamicRender {...args} />,
+  parameters: undefined
 };
 
-export const WithActions = {
+export const WithActions: StoryObj<typeof TreeExampleDynamicRender> = {
   ...TreeExampleDynamic,
   args: {
     onAction: action('onAction'),
@@ -451,7 +453,7 @@ export const WithActions = {
   name: 'Tree with actions'
 };
 
-const WithLinksRender = (args: TreeProps<unknown>) => {
+const WithLinksRender = <T extends object>(args: TreeProps<T>): JSX.Element => {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -468,9 +470,9 @@ const WithLinksRender = (args: TreeProps<unknown>) => {
   );
 };
 
-export const WithLinks = {
+export const WithLinks: StoryObj<typeof WithLinksRender> = {
   ...TreeExampleDynamic,
-  render: WithLinksRender,
+  render: (args) => <WithLinksRender {...args} />,
   name: 'Tree with links',
   parameters: {
     description: {
@@ -483,7 +485,7 @@ function renderEmptyLoader({isLoading}) {
   return isLoading ? 'Root level loading spinner' : 'Nothing in tree';
 }
 
-const EmptyTreeStatic = (args: {isLoading: boolean}) => (
+const EmptyTreeStatic = <T extends object>(args: TreeProps<T> & {isLoading: boolean}): JSX.Element => (
   <Tree
     {...args}
     className={styles.tree}
@@ -499,15 +501,16 @@ const EmptyTreeStatic = (args: {isLoading: boolean}) => (
   </Tree>
 );
 
-export const EmptyTreeStaticStory = {
-  render: EmptyTreeStatic,
+export const EmptyTreeStaticStory: StoryObj<typeof EmptyTreeStatic> = {
+  render: (args) => <EmptyTreeStatic {...args} />,
   args: {
     isLoading: false
   },
   name: 'Empty/Loading Tree rendered with TreeLoader collection element'
 };
 
-function LoadingStoryDepOnCollection(args) {
+function LoadingStoryDepOnCollection<T extends object>(props: TreeProps<T> & {isLoading: boolean}): JSX.Element {
+  let {isLoading, ...args} = props;
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -516,20 +519,20 @@ function LoadingStoryDepOnCollection(args) {
 
   return (
     <Tree {...args} defaultExpandedKeys={defaultExpandedKeys} disabledKeys={['reports-1AB']} className={styles.tree} aria-label="test dynamic tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
-      <Collection items={treeData.items} dependencies={[args.isLoading]}>
+      <Collection items={treeData.items} dependencies={[isLoading]}>
         {(item) => (
-          <DynamicTreeItem renderLoader={(id) => id === 'project-2'} isLoading={args.isLoading} id={item.key} childItems={item.children ?? []} textValue={item.value.name}>
+          <DynamicTreeItem renderLoader={(id) => id === 'project-2'} isLoading={isLoading} id={item.key} childItems={item.children ?? []} textValue={item.value.name}>
             {item.value.name}
           </DynamicTreeItem>
         )}
       </Collection>
-      <MyTreeLoader isLoading={args.isLoading} />
+      <MyTreeLoader isLoading={isLoading} />
     </Tree>
   );
 }
 
-export const LoadingStoryDepOnCollectionStory = {
-  render: LoadingStoryDepOnCollection,
+export const LoadingStoryDepOnCollectionStory: StoryObj<typeof LoadingStoryDepOnCollection> = {
+  render: (args) => <LoadingStoryDepOnCollection {...args} />,
   args: {
     isLoading: false
   },
@@ -541,7 +544,7 @@ export const LoadingStoryDepOnCollectionStory = {
   }
 };
 
-function LoadingStoryDepOnTop(args: TreeProps<unknown> & {isLoading: boolean}) {
+function LoadingStoryDepOnTop<T extends object>(args: TreeProps<T> & {isLoading: boolean}): JSX.Element {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -559,8 +562,8 @@ function LoadingStoryDepOnTop(args: TreeProps<unknown> & {isLoading: boolean}) {
   );
 }
 
-export const LoadingStoryDepOnTopStory = {
-  render: LoadingStoryDepOnTop,
+export const LoadingStoryDepOnTopStory: StoryObj<typeof LoadingStoryDepOnTop> = {
+  render: (args) => <LoadingStoryDepOnTop {...args} />,
   args: {
     isLoading: false
   },
@@ -638,7 +641,7 @@ const DynamicTreeItemWithButtonLoader = (props: DynamicTreeItemProps) => {
   );
 };
 
-function ButtonLoadingIndicator(args: TreeProps<unknown> & {isLoading: boolean}) {
+function ButtonLoadingIndicator<T extends object>(args: TreeProps<T> & {isLoading: boolean}): JSX.Element {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -655,8 +658,8 @@ function ButtonLoadingIndicator(args: TreeProps<unknown> & {isLoading: boolean})
   );
 }
 
-export const ButtonLoadingIndicatorStory = {
-  render: ButtonLoadingIndicator,
+export const ButtonLoadingIndicatorStory: StoryObj<typeof ButtonLoadingIndicator> = {
+  render: (args) => <ButtonLoadingIndicator {...args} />,
   args: {
     isLoading: false
   },
@@ -667,7 +670,8 @@ export const ButtonLoadingIndicatorStory = {
     }
   }
 };
-function VirtualizedTreeRender(args) {
+
+function VirtualizedTreeRender<T extends object>(args: TreeProps<T>): JSX.Element {
   return (
     <Virtualizer layout={ListLayout} layoutOptions={{rowHeight: 30}}>
       <TreeExampleDynamicRender {...args} />
@@ -675,9 +679,9 @@ function VirtualizedTreeRender(args) {
   );
 }
 
-export const VirtualizedTree = {
+export const VirtualizedTree: StoryObj<typeof VirtualizedTreeRender> = {
   ...TreeExampleDynamic,
-  render: VirtualizedTreeRender
+  render: (args) => <VirtualizedTreeRender {...args} />
 };
 
 let projects: {id: string, value: string}[] = [];
@@ -965,7 +969,7 @@ dependencies={[isRootLoading]}>
   );
 }} */}
 
-function TreeDragAndDropExample(args) {
+function TreeDragAndDropExample<T extends object>(args: TreeProps<T> & {shouldAcceptItemDrop: 'folders' | 'all', dropFunction: 'onMove' | 'onInsert' | 'onRootDrop', shouldAllowInsert: boolean}): JSX.Element {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -1141,9 +1145,9 @@ function SecondTree(args) {
   );
 }
 
-export const TreeWithDragAndDrop = {
+export const TreeWithDragAndDrop: StoryObj<typeof TreeDragAndDropExample> = {
   ...TreeExampleDynamic,
-  render: function TreeDndExample(args) {
+  render: (args) => {
     return (
       <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
         <TreeDragAndDropExample {...args} />
diff --git a/packages/react-aria-components/stories/animations.stories.tsx b/packages/react-aria-components/stories/animations.stories.tsx
index c90cb9137ef..b08fa420cda 100644
--- a/packages/react-aria-components/stories/animations.stories.tsx
+++ b/packages/react-aria-components/stories/animations.stories.tsx
@@ -16,7 +16,7 @@ export default {
 };
 
 export let ModalAnimation = {
-  render: () => {
+  render: (): React.ReactElement => {
     return (
       <div className="App">
         <DialogTrigger>
diff --git a/packages/react-aria-components/stories/utils.tsx b/packages/react-aria-components/stories/utils.tsx
index c277ef1630e..d5a7439afa9 100644
--- a/packages/react-aria-components/stories/utils.tsx
+++ b/packages/react-aria-components/stories/utils.tsx
@@ -1,9 +1,9 @@
 import {classNames} from '@react-spectrum/utils';
 import {ListBoxItem, ListBoxItemProps, MenuItem, MenuItemProps, ProgressBar} from 'react-aria-components';
-import React from 'react';
+import React, {JSX} from 'react';
 import styles from '../example/index.css';
 
-export const MyListBoxItem = (props: ListBoxItemProps) => {
+export const MyListBoxItem = (props: ListBoxItemProps): JSX.Element => {
   return (
     <ListBoxItem
       {...props}
@@ -17,7 +17,7 @@ export const MyListBoxItem = (props: ListBoxItemProps) => {
   );
 };
 
-export const MyMenuItem = (props: MenuItemProps) => {
+export const MyMenuItem = (props: MenuItemProps): JSX.Element => {
   return (
     <MenuItem
       {...props}
@@ -30,7 +30,7 @@ export const MyMenuItem = (props: MenuItemProps) => {
   );
 };
 
-export const LoadingSpinner = ({style = {}}) => {
+export const LoadingSpinner = ({style = {}}: {style?: React.CSSProperties}): JSX.Element => {
   return (
     <ProgressBar
       aria-label="loading"
diff --git a/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx b/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx
index bde8720ca6b..f6da9dfe07c 100644
--- a/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx
+++ b/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx
@@ -63,7 +63,7 @@ interface AriaAutocompleteTestProps extends AriaBaseTestProps {
   selectionListener?: jest.Mock<any, any>,
   actionListener?: jest.Mock<any, any>
 }
-export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = 'menu', selectionListener, actionListener}: AriaAutocompleteTestProps) => {
+export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = 'menu', selectionListener, actionListener}: AriaAutocompleteTestProps): void => {
   describe(prefix ? prefix + ' AriaAutocomplete' : 'AriaAutocomplete', function () {
     let user;
     let collectionNodeRole;
diff --git a/packages/react-aria-components/test/AriaMenu.test-util.tsx b/packages/react-aria-components/test/AriaMenu.test-util.tsx
index 073f2fdf4ab..d3b70bc9de9 100644
--- a/packages/react-aria-components/test/AriaMenu.test-util.tsx
+++ b/packages/react-aria-components/test/AriaMenu.test-util.tsx
@@ -60,7 +60,7 @@ interface AriaMenuTestProps extends AriaBaseTestProps {
     submenus?: (props?: {name: string}) => ReturnType<typeof render>
   }
 }
-export const AriaMenuTests = ({renderers, setup, prefix}: AriaMenuTestProps) => {
+export const AriaMenuTests = ({renderers, setup, prefix}: AriaMenuTestProps): void => {
   describe(prefix ? prefix + 'AriaMenuTrigger' : 'AriaMenuTrigger', function () {
     let onOpenChange = jest.fn();
     let onOpen = jest.fn();
diff --git a/packages/react-aria-components/test/AriaTree.test-util.tsx b/packages/react-aria-components/test/AriaTree.test-util.tsx
index 357cceac0e6..f695141b107 100644
--- a/packages/react-aria-components/test/AriaTree.test-util.tsx
+++ b/packages/react-aria-components/test/AriaTree.test-util.tsx
@@ -54,7 +54,7 @@ interface AriaTreeTestProps extends AriaBaseTestProps {
     allInteractionsDisabled?: (props?: {name: string}) => ReturnType<typeof render>
   }
 }
-export const AriaTreeTests = ({renderers, setup, prefix}: AriaTreeTestProps) => {
+export const AriaTreeTests = ({renderers, setup, prefix}: AriaTreeTestProps): void => {
   describe(prefix ? prefix + 'AriaTree' : 'AriaTree', function () {
     let user;
     let testUtilUser = new User();