@depup/react-aria-components 1.16.0-depup.0

package/src/Popover.tsx

@@ -0,0 +1,267 @@
+/*
+ * Copyright 2022 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 {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
+import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, useLocale, usePopover} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
+import {filterDOMProps, isFocusWithin, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
+import {focusSafely, getInteractionModality} from '@react-aria/interactions';
+import {OverlayArrowContext} from './OverlayArrow';
+import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
+import {OverlayTriggerStateContext} from './Dialog';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {useIsHidden} from '@react-aria/collections';
+
+export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-Popover'
+   */
+  className?: ClassNameOrFunction<PopoverRenderProps>,
+  /**
+   * The name of the component that triggered the popover. This is reflected on the element
+   * as the `data-trigger` attribute, and can be used to provide specific
+   * styles for the popover depending on which element triggered it.
+   */
+  trigger?: string,
+  /**
+   * The ref for the element which the popover positions itself with respect to.
+   *
+   * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc.,
+   * this is set automatically. It is only required when used standalone.
+   */
+  triggerRef?: RefObject<Element | null>,
+  /**
+   * Whether the popover is currently performing an entry animation.
+   */
+  isEntering?: boolean,
+  /**
+   * Whether the popover is currently performing an exit animation.
+   */
+  isExiting?: boolean,
+  /**
+   * The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
+   * @default document.body
+   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
+   */
+  UNSTABLE_portalContainer?: Element,
+  /**
+   * The additional offset applied along the main axis between the element and its
+   * anchor element.
+   * @default 8
+   */
+  offset?: number
+}
+
+export interface PopoverRenderProps {
+  /**
+   * The name of the component that triggered the popover, e.g. "DialogTrigger" or "ComboBox".
+   * @selector [data-trigger="..."]
+   */
+  trigger: string | null,
+  /**
+   * The placement of the popover relative to the trigger.
+   * @selector [data-placement="left | right | top | bottom"]
+   */
+  placement: PlacementAxis | null,
+  /**
+   * Whether the popover is currently entering. Use this to apply animations.
+   * @selector [data-entering]
+   */
+  isEntering: boolean,
+  /**
+   * Whether the popover is currently exiting. Use this to apply animations.
+   * @selector [data-exiting]
+   */
+  isExiting: boolean
+}
+
+interface PopoverContextValue extends PopoverProps {
+  /** Contexts to clear. */
+  clearContexts?: Context<any>[]
+}
+
+export const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);
+
+// Stores a ref for the portal container for a group of popovers (e.g. submenus).
+const PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);
+
+/**
+ * A popover is an overlay element positioned relative to a trigger.
+ */
+export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
+  [props, ref] = useContextProps(props, ref, PopoverContext);
+  let contextState = useContext(OverlayTriggerStateContext);
+  let localState = useOverlayTriggerState(props);
+  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+  let isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;
+  let isHidden = useIsHidden();
+  let {direction} = useLocale();
+
+  // If we are in a hidden tree, we still need to preserve our children.
+  if (isHidden) {
+    let children = props.children;
+    if (typeof children === 'function') {
+      children = children({
+        trigger: props.trigger || null,
+        placement: 'bottom',
+        isEntering: false,
+        isExiting: false,
+        defaultChildren: null
+      });
+    }
+
+    return <>{children}</>;
+  }
+
+  if (state && !state.isOpen && !isExiting) {
+    return null;
+  }
+
+  return (
+    <PopoverInner
+      {...props}
+      triggerRef={props.triggerRef!}
+      state={state}
+      popoverRef={ref}
+      isExiting={isExiting}
+      dir={direction} />
+  );
+});
+
+interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {
+  state: OverlayTriggerState,
+  isEntering?: boolean,
+  isExiting: boolean,
+  UNSTABLE_portalContainer?: Element,
+  trigger?: string,
+  dir?: 'ltr' | 'rtl',
+  clearContexts?: Context<any>[]
+}
+
+function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts, ...props}: PopoverInnerProps) {
+  // Calculate the arrow size internally (and remove props.arrowSize from PopoverProps)
+  // Referenced from: packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
+  let arrowRef = useRef<HTMLDivElement>(null);
+  let containerRef = useRef<HTMLDivElement | null>(null);
+  let groupCtx = useContext(PopoverGroupContext);
+  let isSubPopover = groupCtx && props.trigger === 'SubmenuTrigger';
+
+  let {popoverProps, underlayProps, arrowProps, placement, triggerAnchorPoint} = usePopover({
+    ...props,
+    offset: props.offset ?? 8,
+    arrowRef,
+    // If this is a submenu/subdialog, use the root popover's container
+    // to detect outside interaction and add aria-hidden.
+    groupRef: isSubPopover ? groupCtx! : containerRef
+  }, state);
+
+  let ref = props.popoverRef as RefObject<HTMLDivElement | null>;
+  let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-Popover',
+    values: {
+      trigger: props.trigger || null,
+      placement,
+      isEntering,
+      isExiting
+    }
+  });
+
+  // Automatically render Popover with role=dialog except when isNonModal is true,
+  // or a dialog is already nested inside the popover.
+  let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
+  let [isDialog, setDialog] = useState(false);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      setDialog(shouldBeDialog && !ref.current.querySelector('[role=dialog]'));
+    }
+  }, [ref, shouldBeDialog]);
+
+  // Focus the popover itself on mount, unless a child element is already focused.
+  // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
+  useEffect(() => {
+    if (isDialog && (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') && ref.current && !isFocusWithin(ref.current)) {
+      focusSafely(ref.current);
+    }
+  }, [isDialog, ref, props.trigger]);
+
+  let children = useMemo(() => {
+    let children = renderProps.children;
+    if (clearContexts) {
+      for (let Context of clearContexts) {
+        children = <Context.Provider value={null}>{children}</Context.Provider>;
+      }
+    }
+    return children;
+  }, [renderProps.children, clearContexts]);
+
+  let style = {
+    ...popoverProps.style,
+    '--trigger-anchor-point': triggerAnchorPoint ? `${triggerAnchorPoint.x}px ${triggerAnchorPoint.y}px` : undefined,
+    ...renderProps.style
+  };
+
+  let overlay = (
+    <dom.div
+      {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}
+      {...renderProps}
+      role={isDialog ? 'dialog' : undefined}
+      tabIndex={isDialog ? -1 : undefined}
+      aria-label={props['aria-label']}
+      aria-labelledby={props['aria-labelledby']}
+      ref={ref}
+      slot={props.slot || undefined}
+      style={style}
+      dir={props.dir}
+      data-trigger={props.trigger}
+      data-placement={placement}
+      data-entering={isEntering || undefined}
+      data-exiting={isExiting || undefined}>
+      {!props.isNonModal && <DismissButton onDismiss={state.close} />}
+      <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>
+        {children}
+      </OverlayArrowContext.Provider>
+      <DismissButton onDismiss={state.close} />
+    </dom.div>
+  );
+
+  // If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
+  if (!isSubPopover) {
+    return (
+      <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>
+        {!props.isNonModal && state.isOpen && <div data-testid="underlay" {...underlayProps} style={{position: 'fixed', inset: 0}} />}
+        <div ref={containerRef} style={{display: 'contents'}}>
+          <PopoverGroupContext.Provider value={containerRef}>
+            {overlay}
+          </PopoverGroupContext.Provider>
+        </div>
+      </Overlay>
+    );
+  }
+
+  // Submenus/subdialogs are mounted into the root popover's container.
+  return (
+    <Overlay {...props} shouldContainFocus={isDialog} isExiting={isExiting} portalContainer={UNSTABLE_portalContainer ?? groupCtx?.current ?? undefined}>
+      {overlay}
+    </Overlay>
+  );
+}

package/src/ProgressBar.tsx

@@ -0,0 +1,101 @@
+/*
+ * Copyright 2022 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 {AriaProgressBarProps, useProgressBar} from 'react-aria';
+import {clamp} from '@react-stately/utils';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot
+} from './utils';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
+import {LabelContext} from './Label';
+import React, {createContext, ForwardedRef, forwardRef} from 'react';
+
+export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'label'>, RenderProps<ProgressBarRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-ProgressBar'
+   */
+  className?: ClassNameOrFunction<ProgressBarRenderProps>
+}
+
+export interface ProgressBarRenderProps {
+  /**
+   * The value as a percentage between the minimum and maximum.
+   */
+  percentage: number | undefined,
+  /**
+   * A formatted version of the value.
+   * @selector [aria-valuetext]
+   */
+  valueText: string | undefined,
+  /**
+   * Whether the progress bar is indeterminate.
+   * @selector :not([aria-valuenow])
+   */
+  isIndeterminate: boolean
+}
+
+export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, HTMLDivElement>>(null);
+
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ */
+export const ProgressBar = forwardRef(function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, ProgressBarContext);
+  let {
+    value = 0,
+    minValue = 0,
+    maxValue = 100,
+    isIndeterminate = false
+  } = props;
+  value = clamp(value, minValue, maxValue);
+
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {
+    progressBarProps,
+    labelProps
+  } = useProgressBar({...props, label});
+
+  // Calculate the width of the progress bar as a percentage
+  let percentage = isIndeterminate ? undefined : (value - minValue) / (maxValue - minValue) * 100;
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-ProgressBar',
+    values: {
+      percentage,
+      valueText: progressBarProps['aria-valuetext'],
+      isIndeterminate
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+
+  return (
+    <dom.div {...mergeProps(DOMProps, renderProps, progressBarProps)} ref={ref} slot={props.slot || undefined}>
+      <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
+        {renderProps.children}
+      </LabelContext.Provider>
+    </dom.div>
+  );
+});

package/src/RSPContexts.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2024 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 {AriaLabelingProps, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, ValueBase} from '@react-types/shared';
+import {AriaTextFieldProps} from '@react-aria/textfield';
+import {CheckboxProps} from './Checkbox';
+import {ColorAreaProps} from './ColorArea';
+import {ColorFieldProps} from './ColorField';
+import {ColorSliderProps} from './ColorSlider';
+import {ColorWheelProps} from './ColorWheel';
+import {ContextValue} from './utils';
+import {createContext} from 'react';
+import {HeadingProps} from './Heading';
+
+// This file is a temporary workaround for a tree shaking issue in SWC (the minifier used by Parcel).
+// These are the contexts consumed by React Spectrum components that don't use the implementation from RAC
+// (they use hooks). When included in the same file as the implementation, Parcel includes both the context
+// and implementation even if only the context is imported. We moved these contexts to a separate file so
+// that the implementation does not get included in the bundle. This will be removed once the tree shaking
+// issue is fixed.
+export const CheckboxContext = createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);
+export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>(null);
+export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, HTMLDivElement>>(null);
+export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>(null);
+export const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>(null);
+export const HeadingContext = createContext<ContextValue<HeadingProps, HTMLHeadingElement>>({});
+
+export interface SelectableCollectionContextValue<T> extends DOMProps, AriaLabelingProps {
+  filter?: (nodeTextValue: string, node: Node<T>) => boolean,
+  /** Whether the collection items should use virtual focus instead of being focused directly. */
+  shouldUseVirtualFocus?: boolean,
+  /** Whether typeahead is disabled. */
+  disallowTypeAhead?: boolean
+}
+interface FieldInputContextValue<T = FocusableElement> extends
+  DOMProps,
+  FocusEvents<T>,
+  KeyboardEvents,
+  Pick<ValueBase<string>, 'onChange' | 'value'>,
+  Pick<AriaTextFieldProps, 'enterKeyHint' | 'aria-controls' | 'aria-autocomplete' | 'aria-activedescendant' | 'spellCheck' | 'autoCorrect' | 'autoComplete'> {}
+
+export const SelectableCollectionContext = createContext<ContextValue<SelectableCollectionContextValue<any>, HTMLElement>>(null);
+export const FieldInputContext = createContext<ContextValue<FieldInputContextValue, FocusableElement>>(null);

package/src/RadioGroup.tsx

@@ -0,0 +1,273 @@
+/*
+ * Copyright 2022 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 {AriaRadioGroupProps, AriaRadioProps, HoverEvents, Orientation, useFocusRing, useHover, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
+import {FieldErrorContext} from './FieldError';
+import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
+import {FormContext} from './Form';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
+import {LabelContext} from './Label';
+import {RadioGroupState, useRadioGroupState} from 'react-stately';
+import React, {createContext, ForwardedRef, forwardRef, useMemo} from 'react';
+import {SelectionIndicatorContext} from './SelectionIndicator';
+import {SharedElementTransition} from './SharedElementTransition';
+import {TextContext} from './Text';
+
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-RadioGroup'
+   */
+  className?: ClassNameOrFunction<RadioGroupRenderProps>
+}
+export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvents, RenderProps<RadioRenderProps, 'label'>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-Radio'
+   */
+  className?: ClassNameOrFunction<RadioRenderProps>,
+  /**
+   * A ref for the HTML input element.
+   */
+  inputRef?: RefObject<HTMLInputElement | null>
+}
+
+export interface RadioGroupRenderProps {
+  /**
+   * The orientation of the radio group.
+   * @selector [data-orientation="horizontal | vertical"]
+   */
+  orientation: Orientation,
+  /**
+   * Whether the radio group is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the radio group is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the radio group is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
+  /**
+   * Whether the radio group is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * State of the radio group.
+   */
+  state: RadioGroupState
+}
+
+export interface RadioRenderProps {
+  /**
+   * Whether the radio is selected.
+   * @selector [data-selected]
+   */
+  isSelected: boolean,
+  /**
+   * Whether the radio is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean,
+  /**
+   * Whether the radio is currently in a pressed state.
+   * @selector [data-pressed]
+   */
+  isPressed: boolean,
+  /**
+   * Whether the radio is focused, either via a mouse or keyboard.
+   * @selector [data-focused]
+   */
+  isFocused: boolean,
+  /**
+   * Whether the radio is keyboard focused.
+   * @selector [data-focus-visible]
+   */
+  isFocusVisible: boolean,
+  /**
+   * Whether the radio is disabled.
+   * @selector [data-disabled]
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the radio is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the radio is invalid.
+   * @selector [data-invalid]
+   */
+  isInvalid: boolean,
+  /**
+   * Whether the checkbox is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean
+}
+
+export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
+export const RadioContext = createContext<ContextValue<Partial<RadioProps>, HTMLLabelElement>>(null);
+export const RadioGroupStateContext = createContext<RadioGroupState | null>(null);
+
+/**
+ * A radio group allows a user to select a single item from a list of mutually exclusive options.
+ */
+export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useContextProps(props, ref, RadioGroupContext);
+  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
+  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
+  let state = useRadioGroupState({
+    ...props,
+    validationBehavior
+  });
+
+  let [labelRef, label] = useSlot(
+    !props['aria-label'] && !props['aria-labelledby']
+  );
+  let {radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validation} = useRadioGroup({
+    ...props,
+    label,
+    validationBehavior
+  }, state);
+
+  let renderProps = useRenderProps({
+    ...props,
+    values: {
+      orientation: props.orientation || 'vertical',
+      isDisabled: state.isDisabled,
+      isReadOnly: state.isReadOnly,
+      isRequired: state.isRequired,
+      isInvalid: state.isInvalid,
+      state
+    },
+    defaultClassName: 'react-aria-RadioGroup'
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+
+  return (
+    <dom.div
+      {...mergeProps(DOMProps, renderProps, radioGroupProps)}
+      ref={ref}
+      slot={props.slot || undefined}
+      data-orientation={props.orientation || 'vertical'}
+      data-invalid={state.isInvalid || undefined}
+      data-disabled={state.isDisabled || undefined}
+      data-readonly={state.isReadOnly || undefined}
+      data-required={state.isRequired || undefined}>
+      <Provider
+        values={[
+          [RadioGroupStateContext, state],
+          [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
+          [TextContext, {
+            slots: {
+              description: descriptionProps,
+              errorMessage: errorMessageProps
+            }
+          }],
+          [FieldErrorContext, validation]
+        ]}>
+        <SharedElementTransition>
+          {renderProps.children}
+        </SharedElementTransition>
+      </Provider>
+    </dom.div>
+  );
+});
+
+/**
+ * A radio represents an individual option within a radio group.
+ */
+export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
+  let {
+    inputRef: userProvidedInputRef = null,
+    ...otherProps
+  } = props;
+  [props, ref] = useContextProps(otherProps, ref, RadioContext);
+  let state = React.useContext(RadioGroupStateContext)!;
+  let inputRef = useObjectRef(useMemo(() => mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null), [userProvidedInputRef, props.inputRef]));
+  let {labelProps, inputProps, isSelected, isDisabled, isPressed} = useRadio({
+    ...removeDataAttributes<RadioProps>(props),
+    // ReactNode type doesn't allow function children.
+    children: typeof props.children === 'function' ? true : props.children
+  }, state, inputRef);
+  let {isFocused, isFocusVisible, focusProps} = useFocusRing();
+  let interactionDisabled = isDisabled || state.isReadOnly;
+
+  let {hoverProps, isHovered} = useHover({
+    ...props,
+    isDisabled: interactionDisabled
+  });
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-Radio',
+    values: {
+      isSelected,
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isReadOnly: state.isReadOnly,
+      isInvalid: state.isInvalid,
+      isRequired: state.isRequired
+    }
+  });
+
+  let DOMProps = filterDOMProps(props, {global: true});
+  delete DOMProps.id;
+  delete DOMProps.onClick;
+
+  return (
+    <dom.label
+      {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
+      ref={ref}
+      data-selected={isSelected || undefined}
+      data-pressed={isPressed || undefined}
+      data-hovered={isHovered || undefined}
+      data-focused={isFocused || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-disabled={isDisabled || undefined}
+      data-readonly={state.isReadOnly || undefined}
+      data-invalid={state.isInvalid || undefined}
+      data-required={state.isRequired || undefined}>
+      <VisuallyHidden elementType="span">
+        <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
+      </VisuallyHidden>
+      <SelectionIndicatorContext.Provider value={{isSelected}}>
+        {renderProps.children}
+      </SelectionIndicatorContext.Provider>
+    </dom.label>
+  );
+});