docs: add new React Aria hooks docs

Makefile

@@ -121,11 +121,14 @@ website-production:
 	# $(MAKE) s2-docs-production
 	$(MAKE) starter-zip
 	$(MAKE) tailwind-starter
+	$(MAKE) hooks-starter
 	$(MAKE) s2-storybook-docs
 	mv starters/docs/storybook-static dist/production/docs/react-aria-starter
 	mv starters/docs/react-aria-starter.zip dist/production/docs/react-aria-starter.$$(git rev-parse --short HEAD).zip
 	mv starters/tailwind/storybook-static dist/production/docs/react-aria-tailwind-starter
 	mv starters/tailwind/react-aria-tailwind-starter.zip dist/production/docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip
+	mv starters/hooks/storybook-static dist/production/docs/react-aria-hooks-starter
+	mv starters/hooks/react-aria-hooks-starter.zip dist/production/docs/react-aria-hooks-starter.$$(git rev-parse --short HEAD).zip
 
 check-examples:
 	node scripts/extractExamplesS2.mjs
@@ -146,6 +149,12 @@ tailwind-starter:
 	cd starters/tailwind && zip -r react-aria-tailwind-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
 	cd starters/tailwind && yarn build-storybook
 
+hooks-starter:
+	cp LICENSE starters/hooks/.
+	cd starters/hooks && yarn --no-immutable && yarn up react-aria react-stately @internationalized/date && yarn tsc
+	cd starters/hooks && zip -r react-aria-hooks-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
+	cd starters/hooks && yarn build-storybook
+
 s2-storybook-docs:
 	yarn build:s2-storybook-docs -o dist/production/docs/s2
 

packages/dev/s2-docs/package.json

@@ -58,7 +58,8 @@
   },
   "alias": {
     "tailwind-starter": "../../../starters/tailwind/src",
-    "vanilla-starter": "../../../starters/docs/src"
+    "vanilla-starter": "../../../starters/docs/src",
+    "hooks-starter": "../../../starters/hooks/src"
   },
   "targets": {
     "react-static": {

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

@@ -7,7 +7,7 @@ import Anatomy from '/packages/react-aria/docs/breadcrumbs/anatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const tags = ['navigation'];
-export const relatedPages = [{'title': 'useBreadcrumbs', 'url': 'Breadcrumbs/useBreadcrumbs.html'}];
+export const relatedPages = [{'title': 'useBreadcrumbs', 'url': './Breadcrumbs/useBreadcrumbs'}];
 export const description = 'Displays a hierarchy of links to the current page or resource in an application.';
 
 # Breadcrumbs

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

@@ -0,0 +1,56 @@
+{/* Copyright 2026 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '../../../src/Layout';
+export default Layout;
+import {FunctionAPI} from '../../../src/FunctionAPI';
+import {InterfaceType} from '../../../src/types';
+import docs from 'docs:@react-aria/breadcrumbs';
+
+export const section = 'Hooks';
+export const description = 'Provides the behavior and accessibility implementation for a breadcrumbs component.';
+export const isSubpage = true;
+
+# useBreadcrumbs
+
+<PageDescription>{docs.exports.useBreadcrumbs.description}</PageDescription>
+
+This example uses `useBreadcrumbs` for the navigation landmark and `useBreadcrumbItem` for each item, marking the last item as the current page.
+
+```tsx render files={["starters/hooks/src/Breadcrumbs.tsx", "starters/hooks/src/Breadcrumbs.css", "starters/hooks/src/Link.css"]}
+"use client";
+import {Breadcrumbs, Breadcrumb} from 'hooks-starter/Breadcrumbs';
+
+<Breadcrumbs>
+  <Breadcrumb onPress={() => alert('Pressed Folder 1')}>Folder 1</Breadcrumb>
+  <Breadcrumb onPress={() => alert('Pressed Folder 2')}>Folder 2</Breadcrumb>
+  <Breadcrumb>Folder 3</Breadcrumb>
+</Breadcrumbs>
+```
+
+## API
+
+<FunctionAPI function={docs.exports.useBreadcrumbs} links={docs.links} />
+<FunctionAPI function={docs.exports.useBreadcrumbItem} links={docs.links} />
+
+### AriaBreadcrumbsProps
+
+<InterfaceType {...docs.exports.AriaBreadcrumbsProps} />
+
+### BreadcrumbsAria
+
+<InterfaceType {...docs.exports.BreadcrumbsAria} />
+
+### AriaBreadcrumbItemProps
+
+<InterfaceType {...docs.exports.AriaBreadcrumbItemProps} />
+
+### BreadcrumbItemAria
+
+<InterfaceType {...docs.exports.BreadcrumbItemAria} />

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

@@ -12,7 +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': 'Button/useButton.html'}];
+export const relatedPages = [{'title': 'useButton', 'url': './Button/useButton'}];
 export const description = 'Allows a user to perform an action, with mouse, touch, and keyboard interactions.';
 
 # Button

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

@@ -0,0 +1,41 @@
+{/* Copyright 2026 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '../../../src/Layout';
+export default Layout;
+import {FunctionAPI} from '../../../src/FunctionAPI';
+import {InterfaceType} from '../../../src/types';
+import docs from 'docs:@react-aria/button';
+
+export const section = 'Hooks';
+export const description = 'Provides the behavior and accessibility implementation for a button.';
+export const isSubpage = true;
+
+# useButton
+
+<PageDescription>{docs.exports.useButton.description}</PageDescription>
+
+```tsx render files={["starters/hooks/src/Button.tsx", "starters/hooks/src/Button.css"]}
+"use client";
+import {Button} from 'hooks-starter/Button';
+
+<Button onPress={() => alert('Button pressed!')}>Press me</Button>
+```
+
+## API
+
+<FunctionAPI function={docs.exports.useButton} links={docs.links} />
+
+### AriaButtonProps
+
+<InterfaceType {...docs.exports.AriaButtonProps} />
+
+### ButtonAria
+
+<InterfaceType {...docs.exports.ButtonAria} />

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

@@ -9,7 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '/packages/react-aria/docs/calendar/calendar-anatomy.svg';
 
 export const tags = ['date'];
-export const relatedPages = [{'title': 'useCalendar', 'url': 'Calendar/useCalendar.html'}];
+export const relatedPages = [{'title': 'useCalendar', 'url': './Calendar/useCalendar'}];
 export const description = 'Displays one or more date grids and allows users to select a single date.';
 
 # Calendar

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

@@ -0,0 +1,63 @@
+{/* Copyright 2026 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '../../../src/Layout';
+export default Layout;
+import {FunctionAPI} from '../../../src/FunctionAPI';
+import {InterfaceType} from '../../../src/types';
+import docs from 'docs:@react-aria/calendar';
+import statelyDocs from 'docs:@react-stately/calendar';
+
+export const section = 'Hooks';
+export const description = 'Provides the behavior and accessibility implementation for a calendar component.';
+export const isSubpage = true;
+
+# useCalendar
+
+<PageDescription>{docs.exports.useCalendar.description}</PageDescription>
+
+A calendar is built from scratch with `useCalendar`, `useCalendarGrid`, and `useCalendarCell`, since those hooks are the calendar primitives. The previous and next navigation buttons reuse the [Button](../Button) component from React Aria Components.
+
+```tsx render files={["starters/hooks/src/Calendar.tsx", "starters/hooks/src/Calendar.css"]}
+"use client";
+import {Calendar} from 'hooks-starter/Calendar';
+
+<Calendar aria-label="Event date" />
+```
+
+## API
+
+<FunctionAPI function={statelyDocs.exports.useCalendarState} links={statelyDocs.links} />
+<FunctionAPI function={docs.exports.useCalendar} links={docs.links} />
+<FunctionAPI function={docs.exports.useCalendarGrid} links={docs.links} />
+<FunctionAPI function={docs.exports.useCalendarCell} links={docs.links} />
+
+### AriaCalendarProps
+
+<InterfaceType {...docs.exports.AriaCalendarProps} />
+
+### CalendarAria
+
+<InterfaceType {...docs.exports.CalendarAria} />
+
+### AriaCalendarGridProps
+
+<InterfaceType {...docs.exports.AriaCalendarGridProps} />
+
+### CalendarGridAria
+
+<InterfaceType {...docs.exports.CalendarGridAria} />
+
+### AriaCalendarCellProps
+
+<InterfaceType {...docs.exports.AriaCalendarCellProps} />
+
+### CalendarCellAria
+
+<InterfaceType {...docs.exports.CalendarCellAria} />

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

@@ -9,7 +9,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '/packages/react-aria/docs/checkbox/checkbox-anatomy.svg';
 
 export const tags = ['input'];
-export const relatedPages = [{'title': 'useCheckbox', 'url': 'Checkbox/useCheckbox.html'}];
+export const relatedPages = [{'title': 'useCheckbox', 'url': './Checkbox/useCheckbox'}];
 export const description = 'Allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.';
 
 # Checkbox

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

@@ -0,0 +1,45 @@
+{/* Copyright 2026 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '../../../src/Layout';
+export default Layout;
+import {FunctionAPI} from '../../../src/FunctionAPI';
+import {InterfaceType} from '../../../src/types';
+import docs from 'docs:@react-aria/checkbox';
+import statelyDocs from 'docs:@react-stately/toggle';
+
+export const section = 'Hooks';
+export const description = 'Provides the behavior and accessibility implementation for a checkbox.';
+export const isSubpage = true;
+
+# useCheckbox
+
+<PageDescription>{docs.exports.useCheckbox.description}</PageDescription>
+
+This example uses `useCheckbox` to build a checkbox from a native `<input type="checkbox">`, wrapped in a label.
+
+```tsx render files={["starters/hooks/src/Checkbox.tsx", "starters/hooks/src/Checkbox.css"]}
+"use client";
+import {Checkbox} from 'hooks-starter/Checkbox';
+
+<Checkbox>Unsubscribe</Checkbox>
+```
+
+## API
+
+<FunctionAPI function={statelyDocs.exports.useToggleState} links={statelyDocs.links} />
+<FunctionAPI function={docs.exports.useCheckbox} links={docs.links} />
+
+### AriaCheckboxProps
+
+<InterfaceType {...docs.exports.AriaCheckboxProps} />
+
+### CheckboxAria
+
+<InterfaceType {...docs.exports.CheckboxAria} />

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

@@ -9,7 +9,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['input'];
 export const relatedPages = [
-  {title: 'useCheckboxGroup', url: 'CheckboxGroup/useCheckboxGroup.html'},
+  {title: 'useCheckboxGroup', url: './CheckboxGroup/useCheckboxGroup'},
   {title: 'Testing CheckboxGroup', url: './CheckboxGroup/testing'}
 ];
 export const description = 'Allows a user to select multiple items from a list of options.';

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

@@ -0,0 +1,54 @@
+{/* Copyright 2026 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import {Layout} from '../../../src/Layout';
+export default Layout;
+import {FunctionAPI} from '../../../src/FunctionAPI';
+import {InterfaceType} from '../../../src/types';
+import docs from 'docs:@react-aria/checkbox';
+import statelyDocs from 'docs:@react-stately/checkbox';
+
+export const section = 'Hooks';
+export const description = 'Provides the behavior and accessibility implementation for a checkbox group component.';
+export const isSubpage = true;
+
+# useCheckboxGroup
+
+<PageDescription>{docs.exports.useCheckboxGroup.description}</PageDescription>
+
+This example uses `useCheckboxGroup` for the group and `useCheckboxGroupItem` for each checkbox. The group state is shared with each item through React context.
+
+```tsx render files={["starters/hooks/src/CheckboxGroup.tsx", "starters/hooks/src/CheckboxGroup.css", "starters/hooks/src/Checkbox.css"]}
+"use client";
+import {CheckboxGroup, Checkbox} from 'hooks-starter/CheckboxGroup';
+
+<CheckboxGroup label="Favorite sports">
+  <Checkbox value="soccer" isDisabled>Soccer</Checkbox>
+  <Checkbox value="baseball">Baseball</Checkbox>
+  <Checkbox value="basketball">Basketball</Checkbox>
+</CheckboxGroup>
+```
+
+## API
+
+<FunctionAPI function={statelyDocs.exports.useCheckboxGroupState} links={statelyDocs.links} />
+<FunctionAPI function={docs.exports.useCheckboxGroup} links={docs.links} />
+<FunctionAPI function={docs.exports.useCheckboxGroupItem} links={docs.links} />
+
+### AriaCheckboxGroupProps
+
+<InterfaceType {...docs.exports.AriaCheckboxGroupProps} />
+
+### CheckboxGroupAria
+
+<InterfaceType {...docs.exports.CheckboxGroupAria} />
+
+### AriaCheckboxGroupItemProps
+
+<InterfaceType {...docs.exports.AriaCheckboxGroupItemProps} />

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

@@ -8,7 +8,7 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '/packages/react-aria/docs/color/ColorAreaAnatomy.svg';
 
 export const tags = [];
-export const relatedPages = [{'title': 'useColorArea', 'url': 'ColorArea/useColorArea.html'}];
+export const relatedPages = [{'title': 'useColorArea', 'url': './ColorArea/useColorArea'}];
 export const description = 'Allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.';
 
 # ColorArea