[pull] main from adobe:main

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';

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

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} />

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';

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} />

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';
 

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;
 

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}

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;
 

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'> {

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}