chore: add links to old docs for hooks we haven't migrated yet

packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx

@@ -7,6 +7,7 @@ import Anatomy from '@react-aria/breadcrumbs/docs/anatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const tags = ['navigation'];
+export const relatedPages = [{'title': 'useBreadcrumbs', 'url': 'https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html'}];
 
 # Breadcrumbs
 

packages/dev/s2-docs/pages/react-aria/Button.mdx

@@ -12,6 +12,7 @@ import '../../tailwind/tailwind.css';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 
 export const tags = ['btn'];
+export const relatedPages = [{'title': 'useButton', 'url': 'https://react-spectrum.adobe.com/react-aria/useButton.html'}];
 
 # Button
 

packages/dev/s2-docs/pages/react-aria/Calendar.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/calendar/docs/calendar-anatomy.svg';
 
 export const tags = ['date'];
+export const relatedPages = [{'title': 'useCalendar', 'url': 'https://react-spectrum.adobe.com/react-aria/useCalendar.html'}];
 
 # Calendar
 
@@ -45,7 +46,7 @@ import {useState} from 'react';
 function Example() {
   let [date, setDate] = useState(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
-  
+
   return (
     <>
       <Calendar
@@ -212,13 +213,13 @@ function Example(props) {
         [...Array(props.visibleDuration.months).keys()].map(i => (
           <div key={i} style={{flex: 1}}>
             <header style={{minHeight: 32}}>
-              {i === 0 && 
+              {i === 0 &&
                 <Button slot="previous" variant="quiet">
                   <ChevronLeft />
                 </Button>
               }
               <Heading>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))}</Heading>
-              {i === props.visibleDuration.months - 1 && 
+              {i === props.visibleDuration.months - 1 &&
                 <Button slot="next" variant="quiet">
                   <ChevronRight />
                 </Button>

packages/dev/s2-docs/pages/react-aria/Checkbox.mdx

@@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useCheckbox', 'url': 'https://react-spectrum.adobe.com/react-aria/useCheckbox.html'}];
 
 # Checkbox
 
@@ -46,7 +47,7 @@ function Example(props) {
 
   return (
     <>
-      <Checkbox 
+      <Checkbox
         {...props}
         ///- begin highlight -///
         isSelected={selected}

packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx

@@ -7,6 +7,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/checkbox/docs/checkboxgroup-anatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useCheckboxGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useCheckboxGroup.html'}];
 
 # CheckboxGroup
 

packages/dev/s2-docs/pages/react-aria/ColorArea.mdx

@@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/color/docs/ColorAreaAnatomy.svg';
 
 export const tags = [];
+export const relatedPages = [{'title': 'useColorArea', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorArea.html'}];
 
 # ColorArea
 

packages/dev/s2-docs/pages/react-aria/ColorField.mdx

@@ -9,6 +9,7 @@ import docs from 'docs:react-aria-components';
 import Anatomy from '@react-aria/color/docs/ColorFieldAnatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useColorField', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorField.html'}];
 
 # ColorField
 
@@ -76,7 +77,7 @@ function Example() {
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       <ColorField
         label="Hue"
-        
+
         value={color}
         onChange={setColor}
         /*- begin highlight -*/

packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx

@@ -8,6 +8,7 @@ import {ColorPicker as TailwindColorPicker} from 'tailwind-starter/ColorPicker';
 import '../../tailwind/tailwind.css';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useColorPicker', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorPicker.html'}];
 
 # ColorPicker
 
@@ -108,7 +109,7 @@ import {ColorArea} from 'vanilla-starter/ColorArea';
 
 <ColorPicker label="Stroke color" defaultValue="#345">
   <ColorWheel />
-  <ColorArea 
+  <ColorArea
     colorSpace="hsb"
     xChannel="saturation"
     yChannel="brightness"

packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/color/docs/ColorSliderAnatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useColorSlider', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorSlider.html'}];
 
 # ColorSlider
 

packages/dev/s2-docs/pages/react-aria/ColorSwatch.mdx

@@ -8,6 +8,7 @@ import {ColorSwatch as TailwindColorSwatch} from 'tailwind-starter/ColorSwatch';
 import '../../tailwind/tailwind.css';
 
 export const tags = [];
+export const relatedPages = [{'title': 'useColorSwatch', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorSwatch.html'}];
 
 # ColorSwatch
 

packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx

@@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/color/docs/ColorWheelAnatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useColorWheel', 'url': 'https://react-spectrum.adobe.com/react-aria/useColorWheel.html'}];
 
 # ColorWheel
 

packages/dev/s2-docs/pages/react-aria/ComboBox.mdx

@@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/ComboBoxAnatomy.svg';
 
 export const tags = ['autocomplete', 'search', 'typeahead', 'input'];
+export const relatedPages = [{'title': 'useComboBox', 'url': 'https://react-spectrum.adobe.com/react-aria/useComboBox.html'}];
 
 # ComboBox
 

packages/dev/s2-docs/pages/react-aria/DateField.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/datepicker/docs/datefield-anatomy.svg';
 
 export const tags = ['calendar', 'input'];
+export const relatedPages = [{'title': 'useDateField', 'url': 'https://react-spectrum.adobe.com/react-aria/useDateField.html'}];
 
 # DateField
 
@@ -47,7 +48,7 @@ import {useState} from 'react';
 function Example() {
   let [date, setDate] = useState(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
-  
+
   return (
     <>
       <DateField

packages/dev/s2-docs/pages/react-aria/DatePicker.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/datepicker/docs/datepicker-anatomy.svg';
 
 export const tags = ['calendar', 'input'];
+export const relatedPages = [{'title': 'useDatePicker', 'url': 'https://react-spectrum.adobe.com/react-aria/useDatePicker.html'}];
 
 # DatePicker
 
@@ -47,7 +48,7 @@ import {useState} from 'react';
 function Example() {
   let [date, setDate] = useState(parseDate('2020-02-03'));
   let formatter = useDateFormatter({ dateStyle: 'full' });
-  
+
   return (
     <>
       <DatePicker

packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/datepicker/docs/daterangepicker-anatomy.svg';
 
 export const tags = ['calendar', 'input'];
+export const relatedPages = [{'title': 'useDateRangePicker', 'url': 'https://react-spectrum.adobe.com/react-aria/useDateRangePicker.html'}];
 
 # DateRangePicker
 
@@ -50,7 +51,7 @@ function Example() {
     end: parseDate('2025-02-12')
   });
   let formatter = useDateFormatter({ dateStyle: 'long' });
-  
+
   return (
     <>
       <DateRangePicker

packages/dev/s2-docs/pages/react-aria/Disclosure.mdx

@@ -7,6 +7,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/DisclosureAnatomy.svg';
 
 export const tags = ['accordion', 'collapsible', 'expandable', 'details'];
+export const relatedPages = [{'title': 'useDisclosure', 'url': 'https://react-spectrum.adobe.com/react-aria/useDisclosure.html'}];
 
 # Disclosure
 

packages/dev/s2-docs/pages/react-aria/DisclosureGroup.mdx

@@ -7,6 +7,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/DisclosureGroupAnatomy.svg';
 
 export const tags = ['accordion', 'collapsible', 'expandable', 'details'];
+export const relatedPages = [{'title': 'useDisclosureGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useDisclosureGroup.html'}];
 
 # DisclosureGroup
 

packages/dev/s2-docs/pages/react-aria/DropZone.mdx

@@ -5,6 +5,7 @@ import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
 
 export const tags = ['file', 'drag', 'dnd', 'upload'];
+export const relatedPages = [{'title': 'useDrop', 'url': 'https://react-spectrum.adobe.com/react-aria/useDrop.html'}];
 
 # DropZone
 
@@ -24,7 +25,7 @@ export const tags = ['file', 'drag', 'dnd', 'upload'];
         // Determine whether dragged content should be accepted.
         getDropOperation={types => (
           ['text/plain', 'image/jpeg', 'image/png', 'image.gif'].some(t => types.has(t))
-            ? 'copy' 
+            ? 'copy'
             : 'cancel'
         )}
         onDrop={async (event) => {

packages/dev/s2-docs/pages/react-aria/GridList.mdx

@@ -8,6 +8,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/GridListAnatomy.svg';
 
 export const tags = ['list view'];
+export const relatedPages = [{'title': 'useGridList', 'url': 'https://react-spectrum.adobe.com/react-aria/useGridList.html'}];
 
 # GridList
 

packages/dev/s2-docs/pages/react-aria/Link.mdx

@@ -8,6 +8,7 @@ import tailwindDocs from 'docs:tailwind-starter/Link';
 import '../../tailwind/tailwind.css';
 
 export const tags = ['anchor', 'hyperlink', 'href'];
+export const relatedPages = [{'title': 'useLink', 'url': 'https://react-spectrum.adobe.com/react-aria/useLink.html'}];
 
 # Link
 

packages/dev/s2-docs/pages/react-aria/ListBox.mdx

@@ -9,6 +9,7 @@ import Anatomy from 'react-aria-components/docs/ListBoxAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['options'];
+export const relatedPages = [{'title': 'useListBox', 'url': 'https://react-spectrum.adobe.com/react-aria/useListBox.html'}];
 
 # ListBox
 

packages/dev/s2-docs/pages/react-aria/Menu.mdx

@@ -7,6 +7,7 @@ import Anatomy from 'react-aria-components/docs/MenuAnatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['dropdown'];
+export const relatedPages = [{'title': 'useMenu', 'url': 'https://react-spectrum.adobe.com/react-aria/useMenu.html'}];
 
 # Menu
 

packages/dev/s2-docs/pages/react-aria/Meter.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/meter/docs/anatomy.svg';
 
 export const tags = ['gauge', 'progress', 'level'];
+export const relatedPages = [{'title': 'useMeter', 'url': 'https://react-spectrum.adobe.com/react-aria/useMeter.html'}];
 
 # Meter
 

packages/dev/s2-docs/pages/react-aria/Modal.mdx

@@ -8,6 +8,7 @@ import Anatomy from '@react-aria/overlays/docs/modal-anatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['dialog', 'popup', 'overlay'];
+export const relatedPages = [{'title': 'useModalOverlay', 'url': 'https://react-spectrum.adobe.com/react-aria/useModalOverlay.html'}];
 
 # Modal
 

packages/dev/s2-docs/pages/react-aria/NumberField.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/numberfield/docs/anatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useNumberField', 'url': 'https://react-spectrum.adobe.com/react-aria/useNumberField.html'}];
 
 # NumberField
 

packages/dev/s2-docs/pages/react-aria/Popover.mdx

@@ -8,6 +8,7 @@ import Anatomy from '@react-aria/overlays/docs/popover-anatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['popup', 'overlay'];
+export const relatedPages = [{'title': 'usePopover', 'url': 'https://react-spectrum.adobe.com/react-aria/usePopover.html'}];
 
 # Popover
 

packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx

@@ -11,6 +11,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/progress/docs/anatomy.svg';
 
 export const tags = ['loading', 'progress'];
+export const relatedPages = [{'title': 'useProgressBar', 'url': 'https://react-spectrum.adobe.com/react-aria/useProgressBar.html'}];
 
 # ProgressBar
 

packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx

@@ -7,6 +7,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/radio/docs/anatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useRadioGroup', 'url': 'https://react-spectrum.adobe.com/react-aria/useRadioGroup.html'}];
 
 # RadioGroup
 

packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/calendar/docs/rangecalendar-anatomy.svg';
 
 export const tags = ['calendar'];
+export const relatedPages = [{'title': 'useRangeCalendar', 'url': 'https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html'}];
 
 # RangeCalendar
 
@@ -48,7 +49,7 @@ function Example() {
     end: parseDate('2025-02-12')
   });
   let formatter = useDateFormatter({ dateStyle: 'long' });
-  
+
   return (
     <>
       <RangeCalendar
@@ -230,13 +231,13 @@ function Example(props) {
         [...Array(props.visibleDuration.months).keys()].map(i => (
           <div key={i} style={{flex: 1}}>
             <header style={{minHeight: 32}}>
-              {i === 0 && 
+              {i === 0 &&
                 <Button slot="previous" variant="quiet">
                   <ChevronLeft />
                 </Button>
               }
               <Heading>{monthFormatter.format(state.visibleRange.start.add({months: i}).toDate(state.timeZone))}</Heading>
-              {i === props.visibleDuration.months - 1 && 
+              {i === props.visibleDuration.months - 1 &&
                 <Button slot="next" variant="quiet">
                   <ChevronRight />
                 </Button>

packages/dev/s2-docs/pages/react-aria/SearchField.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/searchfield/docs/anatomy.svg';
 
 export const tags = ['input'];
+export const relatedPages = [{'title': 'useSearchField', 'url': 'https://react-spectrum.adobe.com/react-aria/useSearchField.html'}];
 
 # SearchField
 
@@ -45,7 +46,7 @@ import {useState} from 'react';
 function Example() {
   let [search, setSearch] = useState('');
   let [submittedSearch, setSubmittedSearch] = useState('');
-  
+
   return (
     <div>
       <SearchField

packages/dev/s2-docs/pages/react-aria/Select.mdx

@@ -7,6 +7,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/SelectAnatomy.svg';
 
 export const tags = ['picker', 'dropdown', 'menu', 'input'];
+export const relatedPages = [{'title': 'useSelect', 'url': 'https://react-spectrum.adobe.com/react-aria/useSelect.html'}];
 
 # Select
 
@@ -242,7 +243,7 @@ function SelectWithTagGroup() {
         {/*- end highlight -*/}
         <Button variant="primary"><Plus /></Button>
       </Group>
-      <Popover 
+      <Popover
         // Position popover relative to the wrapping div instead of the Button
         triggerRef={triggerRef}
         hideArrow

packages/dev/s2-docs/pages/react-aria/Slider.mdx

@@ -9,6 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/slider/docs/anatomy.svg';
 
 export const tags = ['range input', 'track', 'scrubber'];
+export const relatedPages = [{'title': 'useSlider', 'url': 'https://react-spectrum.adobe.com/react-aria/useSlider.html'}];
 
 # Slider