From c1d8023d152403c56191ee45ad6947db1b6bf907 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 22 Jul 2026 21:54:01 -0500
Subject: [PATCH] docs: New hook docs follow-up fixes (#10355)

* fix focus ring and press state in useRadioGroup

* useTagGroup: add missing starter tabs

* usePopover: fix default outline on open

* useToast: fix slot in Button so that X button is no longer gray

* useDisclosure: fix focus ring flashing white to purple

* useCalendar: add missing month/year picker hooks

* addRangeCalendar: add month/year picker types

* remove useAutocomplete docs link
---
 packages/@react-aria/calendar/src/index.ts     | 11 +++++++++++
 .../s2-docs/pages/react-aria/Autocomplete.mdx  |  2 +-
 .../pages/react-aria/Calendar/useCalendar.mdx  | 18 ++++++++++++++++++
 .../pages/react-aria/Popover/usePopover.mdx    |  2 +-
 .../RangeCalendar/useRangeCalendar.mdx         | 18 ++++++++++++++++++
 .../pages/react-aria/TagGroup/useTagGroup.mdx  |  2 +-
 starters/docs/src/Disclosure.css               |  5 ++++-
 starters/hooks/src/Button.tsx                  |  1 +
 starters/hooks/src/Disclosure.css              |  5 ++++-
 starters/hooks/src/Popover.tsx                 |  1 +
 starters/hooks/src/RadioGroup.tsx              |  4 ++--
 11 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/packages/@react-aria/calendar/src/index.ts b/packages/@react-aria/calendar/src/index.ts
index 11d9138bf54..a635df13cf5 100644
--- a/packages/@react-aria/calendar/src/index.ts
+++ b/packages/@react-aria/calendar/src/index.ts
@@ -11,6 +11,7 @@
  */
 
 export {useCalendar, useCalendarGrid, useCalendarCell} from 'react-aria/useCalendar';
+export {useCalendarMonthPicker, useCalendarYearPicker} from 'react-aria/useCalendar';
 
 export {useRangeCalendar} from 'react-aria/useRangeCalendar';
 export type {
@@ -21,6 +22,16 @@ export type {
   CalendarCellAria,
   CalendarAria
 } from 'react-aria/useCalendar';
+export type {
+  CalendarMonthPickerAria,
+  CalendarMonthPickerItem,
+  CalendarMonthPickerProps
+} from 'react-aria/useCalendar';
+export type {
+  CalendarYearPickerAria,
+  CalendarYearPickerItem,
+  CalendarYearPickerProps
+} from 'react-aria/useCalendar';
 export type {AriaRangeCalendarProps} from 'react-aria/useRangeCalendar';
 export type {CalendarProps, DateValue} from 'react-stately/useCalendarState';
 export type {RangeCalendarProps} from 'react-stately/useRangeCalendarState';
diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
index a94b155c666..d48aa47047b 100644
--- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
@@ -8,7 +8,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const tags = ['combobox', 'typeahead', 'input'];
 export const version = 'rc';
-export const relatedPages = [{'title': 'useAutocomplete', 'url': 'Autocomplete/useAutocomplete.html'}];
+export const relatedPages = [];
 export const description = 'Allows users to search or filter a list of suggestions.';
 
 # Autocomplete
diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx
index 29c3aa9bde8..94b961aee15 100644
--- a/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Calendar/useCalendar.mdx
@@ -59,6 +59,8 @@ import {Calendar} from 'hooks-starter/Calendar';
     {function: docs.exports.useCalendar, links: docs.links},
     {function: docs.exports.useCalendarGrid, links: docs.links},
     {function: docs.exports.useCalendarCell, links: docs.links},
+    {function: docs.exports.useCalendarMonthPicker, links: docs.links},
+    {function: docs.exports.useCalendarYearPicker, links: docs.links},
   ]}
 />
 
@@ -89,3 +91,19 @@ import {Calendar} from 'hooks-starter/Calendar';
 ### CalendarCellAria
 
 <InterfaceType {...docs.exports.CalendarCellAria} />
+
+### CalendarMonthPickerProps
+
+<InterfaceType {...docs.exports.CalendarMonthPickerProps} />
+
+### CalendarMonthPickerAria
+
+<InterfaceType {...docs.exports.CalendarMonthPickerAria} />
+
+### CalendarYearPickerProps
+
+<InterfaceType {...docs.exports.CalendarYearPickerProps} />
+
+### CalendarYearPickerAria
+
+<InterfaceType {...docs.exports.CalendarYearPickerAria} />
diff --git a/packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx
index 833eba0202d..05245b64f28 100644
--- a/packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Popover/usePopover.mdx
@@ -23,7 +23,7 @@ export const isSubpage = true;
 
 <PageDescription>{docs.exports.usePopover.description}</PageDescription>
 
-```tsx render files={["starters/hooks/src/Popover.tsx", "starters/hooks/src/Popover.css", "starters/hooks/src/Button.css", "starters/docs/src/Dialog.css"]}
+```tsx render files={["starters/hooks/src/Popover.tsx", "starters/hooks/src/Popover.css", "starters/hooks/src/Button.css", "starters/hooks/src/Dialog.css"]}
 "use client";
 import {Dialog, Heading} from 'react-aria-components/Dialog';
 import {PopoverTrigger} from 'hooks-starter/Popover';
diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar/useRangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar/useRangeCalendar.mdx
index 7a166e4b512..d1fd3ad0d8f 100644
--- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar/useRangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar/useRangeCalendar.mdx
@@ -59,6 +59,8 @@ import {RangeCalendar} from 'hooks-starter/RangeCalendar';
     {function: docs.exports.useRangeCalendar, links: docs.links},
     {function: docs.exports.useCalendarGrid, links: docs.links},
     {function: docs.exports.useCalendarCell, links: docs.links},
+    {function: docs.exports.useCalendarMonthPicker, links: docs.links},
+    {function: docs.exports.useCalendarYearPicker, links: docs.links},
   ]}
 />
 
@@ -81,3 +83,19 @@ import {RangeCalendar} from 'hooks-starter/RangeCalendar';
 ### AriaCalendarCellProps
 
 <InterfaceType {...docs.exports.AriaCalendarCellProps} />
+
+### CalendarMonthPickerProps
+
+<InterfaceType {...docs.exports.CalendarMonthPickerProps} />
+
+### CalendarMonthPickerAria
+
+<InterfaceType {...docs.exports.CalendarMonthPickerAria} />
+
+### CalendarYearPickerProps
+
+<InterfaceType {...docs.exports.CalendarYearPickerProps} />
+
+### CalendarYearPickerAria
+
+<InterfaceType {...docs.exports.CalendarYearPickerAria} />
diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup/useTagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup/useTagGroup.mdx
index ae8ecc9e8ab..f5e240f6569 100644
--- a/packages/dev/s2-docs/pages/react-aria/TagGroup/useTagGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TagGroup/useTagGroup.mdx
@@ -23,7 +23,7 @@ export const isSubpage = true;
 
 <PageDescription>{docs.exports.useTagGroup.description}</PageDescription>
 
-```tsx render
+```tsx render files={["starters/hooks/src/TagGroup.tsx", "starters/hooks/src/TagGroup.css"]}
 "use client";
 import {Tag, TagGroup} from 'hooks-starter/TagGroup';
 
diff --git a/starters/docs/src/Disclosure.css b/starters/docs/src/Disclosure.css
index 2a267afdd81..2d3c0ca8924 100644
--- a/starters/docs/src/Disclosure.css
+++ b/starters/docs/src/Disclosure.css
@@ -22,7 +22,10 @@
     gap: var(--spacing-1);
     padding: var(--spacing-2) var(--spacing-3);
     border-radius: var(--radius);
-    transition: all 200ms;
+    transition:
+      background 200ms,
+      color 200ms,
+      scale 200ms;
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
diff --git a/starters/hooks/src/Button.tsx b/starters/hooks/src/Button.tsx
index ce09456bf8e..a04778304cb 100644
--- a/starters/hooks/src/Button.tsx
+++ b/starters/hooks/src/Button.tsx
@@ -26,6 +26,7 @@ export function Button({variant = 'primary', ...props}: ButtonProps) {
     <button
       {...mergeProps(buttonProps, hoverProps, focusProps)}
       ref={ref}
+      slot={props.slot}
       className="react-aria-Button button-base"
       data-variant={variant}
       data-pressed={isPressed || undefined}
diff --git a/starters/hooks/src/Disclosure.css b/starters/hooks/src/Disclosure.css
index 2a267afdd81..2d3c0ca8924 100644
--- a/starters/hooks/src/Disclosure.css
+++ b/starters/hooks/src/Disclosure.css
@@ -22,7 +22,10 @@
     gap: var(--spacing-1);
     padding: var(--spacing-2) var(--spacing-3);
     border-radius: var(--radius);
-    transition: all 200ms;
+    transition:
+      background 200ms,
+      color 200ms,
+      scale 200ms;
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
diff --git a/starters/hooks/src/Popover.tsx b/starters/hooks/src/Popover.tsx
index 722dd6729b6..ec6d61c8a71 100644
--- a/starters/hooks/src/Popover.tsx
+++ b/starters/hooks/src/Popover.tsx
@@ -11,6 +11,7 @@ import {Button} from 'react-aria-components/Button';
 import {cloneElement, useRef} from 'react';
 import type {ReactElement, ReactNode} from 'react';
 import './Button.css';
+import './Dialog.css';
 import './Popover.css';
 
 export interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
diff --git a/starters/hooks/src/RadioGroup.tsx b/starters/hooks/src/RadioGroup.tsx
index 33edfbf4ad7..c57abd736c5 100644
--- a/starters/hooks/src/RadioGroup.tsx
+++ b/starters/hooks/src/RadioGroup.tsx
@@ -48,7 +48,7 @@ export function Radio(props: AriaRadioProps) {
   let state = React.useContext(RadioContext)!;
   let ref = useRef<HTMLInputElement>(null);
   /*- begin highlight -*/
-  let {inputProps, isSelected, isPressed, isDisabled} = useRadio(props, state, ref);
+  let {labelProps, inputProps, isSelected, isPressed, isDisabled} = useRadio(props, state, ref);
   /*- end highlight -*/
   let {hoverProps, isHovered} = useHover({isDisabled: isDisabled || state.isReadOnly});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
@@ -60,7 +60,7 @@ export function Radio(props: AriaRadioProps) {
       data-disabled={isDisabled || undefined}>
       {/* The label wraps a visually hidden native radio input plus the styled indicator. */}
       <label
-        {...hoverProps}
+        {...mergeProps(labelProps, hoverProps)}
         className="react-aria-RadioButton"
         data-selected={isSelected || undefined}
         data-pressed={isPressed || undefined}