@react-spectrum/s2 0.5.0 → 0.7.0

package/src/Picker.tsx

@@ -49,7 +49,7 @@ import {
   FieldLabel,
   HelpText
 } from './Field';
-import {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, HelpTextProps, PressEvent, SpectrumLabelableProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
@@ -58,10 +58,12 @@ import {IconContext} from './Icon';
 import intlMessages from '../intl/*.json';
 import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
+import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useGlobalListeners} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -176,6 +178,7 @@ const quietFocusLine = style({
 export let menu = style({
   outlineStyle: 'none',
   display: 'grid',
+  width: 'full',
   gridTemplateColumns: {
     size: {
       S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],
@@ -189,7 +192,8 @@ export let menu = style({
   overflow: 'auto',
   padding: 8,
   fontFamily: 'sans',
-  fontSize: 'control'
+  fontSize: 'control',
+  gridAutoRows: 'min-content'
 });
 
 const invalidBorder = style({
@@ -228,7 +232,10 @@ const iconStyles = style({
 let InternalPickerContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
 let InsideSelectValueContext = createContext(false);
 
-function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ */
+export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
@@ -267,6 +274,21 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
     menuOffset = 8;
   }
 
+  // For mouse interactions, pickers open on press start. When the popover underlay appears
+  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
+  // to occur. We override this by listening for pointerup on the document ourselves.
+  let [isPressed, setPressed] = useState(false);
+  let {addGlobalListener} = useGlobalListeners();
+  let onPressStart = (e: PressEvent) => {
+    if (e.pointerType !== 'mouse') {
+      return;
+    }
+    setPressed(true);
+    addGlobalListener(document, 'pointerup', () => {
+      setPressed(false);
+    }, {once: true, capture: true});
+  };
+
   return (
     <AriaSelect
       {...pickerProps}
@@ -291,64 +313,66 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
               contextualHelp={props.contextualHelp}>
               {label}
             </FieldLabel>
-            <Button
-              ref={domRef}
-              style={renderProps => pressScale(domRef)(renderProps)}
-              // Prevent press scale from sticking while Picker is open.
-              // @ts-ignore
-              isPressed={false}
-              className={renderProps => inputButton({
-                ...renderProps,
-                size: size,
-                isOpen,
-                isQuiet
-              })}>
-              {(renderProps) => (
-                <>
-                  <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>
-                    {({defaultChildren}) => {
-                      return (
-                        <Provider
-                          values={[
-                            [IconContext, {
-                              slots: {
-                                icon: {
-                                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
-                                  styles: icon
+            <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
+              <Button
+                ref={domRef}
+                style={renderProps => pressScale(domRef)(renderProps)}
+                // Prevent press scale from sticking while Picker is open.
+                // @ts-ignore
+                isPressed={false}
+                className={renderProps => inputButton({
+                  ...renderProps,
+                  size: size,
+                  isOpen,
+                  isQuiet
+                })}>
+                {(renderProps) => (
+                  <>
+                    <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>
+                      {({defaultChildren}) => {
+                        return (
+                          <Provider
+                            values={[
+                              [IconContext, {
+                                slots: {
+                                  icon: {
+                                    render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
+                                    styles: icon
+                                  }
                                 }
-                              }
-                            }],
-                            [TextContext, {
-                              slots: {
-                                description: {},
-                                label: {styles: style({
-                                  display: 'block',
-                                  flexGrow: 1,
-                                  truncate: true
-                                })}
-                              }
-                            }],
-                            [InsideSelectValueContext, true]
-                          ]}>
-                          {defaultChildren}
-                        </Provider>
-                      );
-                    }}
-                  </SelectValue>
-                  {isInvalid && (
-                    <FieldErrorIcon isDisabled={isDisabled} />
-                  )}
-                  <ChevronIcon
-                    size={size}
-                    className={iconStyles} />
-                  {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
-                  {isInvalid && !isDisabled && !isQuiet &&
-                    // @ts-ignore known limitation detecting functions from the theme
-                    <div className={invalidBorder({...renderProps, size})} />
-                  }
-                </>
-              )}
-            </Button>
+                              }],
+                              [TextContext, {
+                                slots: {
+                                  description: {},
+                                  label: {styles: style({
+                                    display: 'block',
+                                    flexGrow: 1,
+                                    truncate: true
+                                  })}
+                                }
+                              }],
+                              [InsideSelectValueContext, true]
+                            ]}>
+                            {defaultChildren}
+                          </Provider>
+                        );
+                      }}
+                    </SelectValue>
+                    {isInvalid && (
+                      <FieldErrorIcon isDisabled={isDisabled} />
+                    )}
+                    <ChevronIcon
+                      size={size}
+                      className={iconStyles} />
+                    {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
+                    {isInvalid && !isDisabled && !isQuiet &&
+                      // @ts-ignore known limitation detecting functions from the theme
+                      <div className={invalidBorder({...renderProps, size})} />
+                    }
+                  </>
+                )}
+              </Button>
+            </PressResponder>
             <HelpText
               size={size}
               isDisabled={isDisabled}
@@ -399,13 +423,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
       )}
     </AriaSelect>
   );
-}
-
-/**
- * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
- */
-let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
-export {_Picker as Picker};
+});
 
 export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
   children: ReactNode
@@ -467,11 +485,12 @@ function DefaultProvider({context, value, children}: {context: React.Context<any
 
 export interface PickerSectionProps<T extends object> extends SectionProps<T> {}
 export function PickerSection<T extends object>(props: PickerSectionProps<T>) {
+  let {size} = useContext(InternalPickerContext);
   return (
     <>
       <AriaListBoxSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaListBoxSection>
       <Divider />

package/src/Popover.tsx

@@ -24,7 +24,6 @@ import {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './styl
 import {ColorSchemeContext} from './Provider';
 import {DOMRef} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
-import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types' with {type: 'macro'};
@@ -46,52 +45,6 @@ export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arro
   // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in
 }
 
-const fadeKeyframes = keyframes(`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`);
-const slideUpKeyframes = keyframes(`
-  from {
-    transform: translateY(-4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`);
-const slideDownKeyframes = keyframes(`
-  from {
-    transform: translateY(4px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`);
-const slideRightKeyframes = keyframes(`
-  from {
-    transform: translateX(4px);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-`);
-const slideLeftKeyframes = keyframes(`
-  from {
-    transform: translateX(-4px);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-`);
-
 let popover = style({
   ...colorScheme(),
   '--s2-container-bg': {
@@ -126,63 +79,42 @@ let popover = style({
   // Don't be larger than full screen minus 2 * containerPadding
   maxWidth: '[calc(100vw - 24px)]',
   boxSizing: 'border-box',
+  display: 'flex',
+  opacity: {
+    isEntering: 0,
+    isExiting: 0
+  },
   translateY: {
     placement: {
-      bottom: {
-        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop
-      },
       top: {
-        isArrowShown: -8
-      }
-    }
-  },
-  translateX: {
-    placement: {
-      left: {
-        isArrowShown: -8
+        isEntering: 4,
+        isExiting: 4
       },
-      right: {
-        isArrowShown: 8
+      bottom: {
+        isEntering: -4,
+        isExiting: -4
       }
-    }
+    },
+    isSubmenu: 0
   },
-  animation: {
+  translateX: {
     placement: {
-      top: {
-        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,
-        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`
-      },
-      bottom: {
-        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,
-        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`
-      },
       left: {
-        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,
-        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`
+        isEntering: 4,
+        isExiting: 4
       },
       right: {
-        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,
-        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`
+        isEntering: -4,
+        isExiting: -4
       }
     },
-    isSubmenu: {
-      isEntering: fadeKeyframes,
-      isExiting: fadeKeyframes
-    }
-  },
-  animationDuration: {
-    isEntering: 200,
-    isExiting: 200
-  },
-  animationDirection: {
-    isEntering: 'normal',
-    isExiting: 'reverse'
+    isSubmenu: 0
   },
-  animationTimingFunction: {
+  transition: '[opacity, translate]',
+  transitionDuration: 200,
+  transitionTimingFunction: {
     isExiting: 'in'
   },
-  transition: '[opacity, transform]',
-  willChange: '[opacity, transform]',
   isolation: 'isolate',
   pointerEvents: {
     isExiting: 'none'
@@ -215,7 +147,7 @@ let arrow = style({
   }
 });
 
-function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let {
     hideArrow = false,
     UNSAFE_className = '',
@@ -262,6 +194,7 @@ function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <AriaPopover
       {...props}
+      offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}
       ref={popoverRef}
       style={{
         ...UNSAFE_style,
@@ -283,10 +216,7 @@ function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
       ))}
     </AriaPopover>
   );
-}
-
-let _PopoverBase = forwardRef(PopoverBase);
-export {_PopoverBase as PopoverBase};
+});
 
 export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}
 
@@ -297,15 +227,18 @@ const dialogStyle = style({
   borderRadius: '[inherit]',
   overflow: 'auto',
   position: 'relative',
-  size: 'full',
+  width: 'full',
   maxSize: '[inherit]'
 }, getAllowedOverrides({height: true}));
 
-function Popover(props: PopoverDialogProps, ref: DOMRef) {
+/**
+ * A popover is an overlay element positioned relative to a trigger.
+ */
+export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
   let domRef = useDOMRef(ref);
 
   return (
-    <_PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>
+    <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>
       <Dialog
         {...props}
         ref={domRef}
@@ -318,12 +251,6 @@ function Popover(props: PopoverDialogProps, ref: DOMRef) {
           </OverlayTriggerStateContext.Provider>
         ))}
       </Dialog>
-    </_PopoverBase>
+    </PopoverBase>
   );
-}
-
-/**
- * A popover is an overlay element positioned relative to a trigger.
- */
-let _Popover = forwardRef(Popover);
-export {_Popover as Popover};
+});

package/src/ProgressBar.tsx

@@ -41,7 +41,7 @@ interface ProgressBarStyleProps {
   /**
    * The static color style to apply. Useful when the button appears over a color background.
    */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /**
    * The label's overall position relative to the element it is labeling.
    * @default 'top'
@@ -55,7 +55,7 @@ export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children'
   label?: ReactNode
 }
 
-export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressBarContext = createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const indeterminateLTR = keyframes(`
   0% {
@@ -135,21 +135,13 @@ const trackStyles = style({
   }
 });
 
-const fill = style<ProgressBarStyleProps>({
+const fill = style<ProgressBarStyleProps & {isStaticColor: boolean}>({
   height: 'full',
   borderStyle: 'none',
   borderRadius: 'full',
   backgroundColor: {
     default: 'accent',
-    staticColor: {
-      white: {
-        default: 'transparent-white-900'
-      },
-      // TODO: Is there a black static color in S2?
-      black: {
-        default: 'transparent-black-900'
-      }
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'ButtonText'
   },
   width: {
@@ -174,7 +166,11 @@ const indeterminateAnimation = style({
   position: 'relative'
 });
 
-function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
+ * They can represent either determinate or indeterminate progress.
+ */
+export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);
   let {
     label, size = 'M',
@@ -186,32 +182,26 @@ function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
   } = props;
   let domRef = useDOMRef(ref);
   let {direction} = useLocale();
+  let isStaticColor = !!staticColor;
 
   return (
     <AriaProgressBar
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + wrapper({...props, size, labelPosition}, props.styles)}>
+      className={UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)}>
       {({percentage, valueText}) => (
         <>
           {label && <FieldLabel size={size} labelAlign="start" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}
-          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}
-          <div className={trackStyles({...props})}>
+          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</span>}
+          <div className={trackStyles({isStaticColor, size})}>
             <div
-              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}
+              className={mergeStyles(fill({...props, isStaticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}
               style={{width: isIndeterminate ? undefined : percentage + '%'}} />
           </div>
         </>
       )}
     </AriaProgressBar>
   );
-}
-
-/**
- * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
- * They can represent either determinate or indeterminate progress.
- */
-const _ProgressBar = /*#__PURE__*/ forwardRef(ProgressBar);
-export {_ProgressBar as ProgressBar};
+});
 

package/src/ProgressCircle.tsx

@@ -13,7 +13,7 @@
 import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -27,17 +27,18 @@ export interface ProgressCircleStyleProps {
    */
   size?: 'S' | 'M' | 'L',
   /** The static color style to apply. Useful when the button appears over a color background. */
-  staticColor?: 'black' | 'white',
+  staticColor?: 'black' | 'white' | 'auto',
   /**
    * Whether presentation is indeterminate when progress isn't known.
    */
   isIndeterminate?: boolean
 }
 
-export const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressCircleContext = createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 // Double check the types passed to each style, may not need all for each
 const wrapper = style<ProgressCircleStyleProps>({
+  ...staticColor(),
   size: {
     default: 32,
     size: {
@@ -48,24 +49,18 @@ const wrapper = style<ProgressCircleStyleProps>({
   aspectRatio: 'square'
 }, getAllowedOverrides({height: true}));
 
-const track = style<ProgressCircleStyleProps>({
+const track = style({
   stroke: {
     default: 'gray-300',
-    staticColor: {
-      white: 'transparent-white-300',
-      black: 'transparent-black-300'
-    },
+    isStaticColor: 'transparent-overlay-300',
     forcedColors: 'Background'
   }
 });
 
-const fill = style<ProgressCircleStyleProps>({
+const fill = style({
   stroke: {
     default: 'blue-900',
-    staticColor: {
-      white: 'transparent-white-900',
-      black: 'transparent-black-900'
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'Highlight'
   },
   rotate: -90,
@@ -98,7 +93,11 @@ const dashoffsetAnimation = keyframes(`
   }
 `);
 
-function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
+ * They can represent determinate or indeterminate progress.
+ */
+export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);
   let {
     size = 'M',
@@ -117,6 +116,7 @@ function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>)
 
   // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
   let radius = `calc(50% - ${strokeWidth / 2}px)`;
+  let isStaticColor = !!staticColor;
 
   return (
     <RACProgressBar
@@ -125,7 +125,8 @@ function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>)
       style={UNSAFE_style}
       className={renderProps => UNSAFE_className + wrapper({
         ...renderProps,
-        size
+        size,
+        staticColor
       }, props.styles)}>
       {({percentage, isIndeterminate}) => (
         <svg
@@ -137,13 +138,13 @@ function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>)
             cy="50%"
             r={radius}
             strokeWidth={strokeWidth}
-            className={track({staticColor})} />
+            className={track({isStaticColor})} />
           <circle
             cx="50%"
             cy="50%"
             r={radius}
             strokeWidth={strokeWidth}
-            className={fill({staticColor})}
+            className={fill({isStaticColor})}
             style={{
               // These cubic-bezier timing functions were derived from the previous animation keyframes
               // using a best fit algorithm, and then manually adjusted to approximate the original animation.
@@ -159,11 +160,4 @@ function ProgressCircle(props: ProgressCircleProps, ref: DOMRef<HTMLDivElement>)
       )}
     </RACProgressBar>
   );
-}
-
-/**
- * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
- * They can represent determinate or indeterminate progress.
- */
-let _ProgressCircle = /*#__PURE__*/ forwardRef(ProgressCircle);
-export {_ProgressCircle as ProgressCircle};
+});

package/src/Radio.tsx

@@ -102,7 +102,11 @@ const circle = style<RenderProps>({
   }
 });
 
-function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
+/**
+ * Radio buttons allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -138,11 +142,4 @@ function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
       )}
     </AriaRadio>
   );
-}
-
-/**
- * Radio buttons allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-let _Radio = /*#__PURE__*/ forwardRef(Radio);
-export {_Radio as Radio};
+});