react-aria-components 3.0.0-nightly-ab9fd5c68-241125 → 3.0.0-nightly-10a43de88-241127

package/src/Form.tsx

@@ -27,7 +27,11 @@ export interface FormProps extends SharedFormProps, DOMProps {
 
 export const FormContext = createContext<ContextValue<FormProps, HTMLFormElement>>(null);
 
-function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
+/**
+ * A form is a group of inputs that allows users to submit data to a server,
+ * with support for providing field validation errors.
+ */
+export const Form = forwardRef(function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
   [props, ref] = useContextProps(props, ref, FormContext);
   let {validationErrors, validationBehavior = 'native', children, className, ...domProps} = props;
   return (
@@ -39,11 +43,4 @@ function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
       </FormContext.Provider>
     </form>
   );
-}
-
-/**
- * A form is a group of inputs that allows users to submit data to a server,
- * with support for providing field validation errors.
- */
-const _Form = forwardRef(Form);
-export {_Form as Form};
+});

package/src/GridList.tsx

@@ -73,7 +73,11 @@ export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>
 
 export const GridListContext = createContext<ContextValue<GridListProps<any>, HTMLDivElement>>(null);
 
-function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A grid list displays a list of interactive items, with support for keyboard navigation,
+ * single or multiple selection, and row actions.
+ */
+export const GridList = /*#__PURE__*/ (forwardRef as forwardRefType)(function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   // Render the portal first so that we have the collection by the time we render the DOM in SSR.
   [props, ref] = useContextProps(props, ref, GridListContext);
 
@@ -82,7 +86,7 @@ function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<H
       {collection => <GridListInner props={props} collection={collection} gridListRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface GridListInnerProps<T extends object> {
   props: GridListProps<T>,
@@ -243,13 +247,6 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   );
 }
 
-/**
- * A grid list displays a list of interactive items, with support for keyboard navigation,
- * single or multiple selection, and row actions.
- */
-const _GridList = /*#__PURE__*/ (forwardRef as forwardRefType)(GridList);
-export {_GridList as GridList};
-
 export interface GridListItemRenderProps extends ItemRenderProps {}
 
 export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents {

package/src/Group.tsx

@@ -60,7 +60,10 @@ export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLE
 
 export const GroupContext = createContext<ContextValue<GroupProps, HTMLDivElement>>({});
 
-function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A group represents a set of related UI controls, and supports interactive states for styling.
+ */
+export const Group = /*#__PURE__*/ (forwardRef as forwardRefType)(function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, GroupContext);
   let {isDisabled, isInvalid, onHoverStart, onHoverChange, onHoverEnd, ...otherProps} = props;
 
@@ -92,10 +95,4 @@ function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
       {renderProps.children}
     </div>
   );
-}
-
-/**
- * A group represents a set of related UI controls, and supports interactive states for styling.
- */
-const _Group = /*#__PURE__*/ (forwardRef as forwardRefType)(Group);
-export {_Group as Group};
+});

package/src/Heading.tsx

@@ -18,7 +18,7 @@ export interface HeadingProps extends HTMLAttributes<HTMLElement> {
   level?: number
 }
 
-function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
+export const Heading = forwardRef(function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
   [props, ref] = useContextProps(props, ref, HeadingContext);
   let {children, level = 3, className, ...domProps} = props;
   let Element = `h${level}` as ElementType;
@@ -28,7 +28,4 @@ function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
       {children}
     </Element>
   );
-}
-
-const _Heading = forwardRef(Heading);
-export {_Heading as Heading};
+});

package/src/Input.tsx

@@ -53,7 +53,10 @@ let filterHoverProps = (props: InputProps) => {
   return otherProps;
 };
 
-function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+/**
+ * An input allows a user to input text.
+ */
+export const Input = /*#__PURE__*/ createHideableComponent(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
   [props, ref] = useContextProps(props, ref, InputContext);
 
   let {hoverProps, isHovered} = useHover(props);
@@ -86,10 +89,4 @@ function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
       data-focus-visible={isFocusVisible || undefined}
       data-invalid={isInvalid || undefined} />
   );
-}
-
-/**
- * An input allows a user to input text.
- */
-const _Input = /*#__PURE__*/ createHideableComponent(Input);
-export {_Input as Input};
+});

package/src/Keyboard.tsx

@@ -15,10 +15,7 @@ import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 're
 
 export const KeyboardContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
 
-function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
+export const Keyboard = forwardRef(function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, KeyboardContext);
   return <kbd dir="ltr" {...props} ref={ref} />;
-}
-
-const _Keyboard = forwardRef(Keyboard);
-export {_Keyboard as Keyboard};
+});

package/src/Label.tsx

@@ -20,12 +20,9 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 
 export const LabelContext = createContext<ContextValue<LabelProps, HTMLLabelElement>>({});
 
-function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
+export const Label = /*#__PURE__*/ createHideableComponent(function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
   [props, ref] = useContextProps(props, ref, LabelContext);
   let {elementType: ElementType = 'label', ...labelProps} = props;
   // @ts-ignore
   return <ElementType className="react-aria-Label" {...labelProps} ref={ref} />;
-}
-
-const _Label = /*#__PURE__*/ createHideableComponent(Label);
-export {_Label as Label};
+});

package/src/Link.tsx

@@ -52,7 +52,11 @@ export interface LinkRenderProps {
 
 export const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(null);
 
-function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
+/**
+ * A link allows a user to navigate to another page or resource within a web page
+ * or application.
+ */
+export const Link = /*#__PURE__*/ (forwardRef as forwardRefType)(function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
   [props, ref] = useContextProps(props, ref, LinkContext);
 
   let ElementType: ElementType = props.href && !props.isDisabled ? 'a' : 'span';
@@ -88,11 +92,4 @@ function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
       {renderProps.children}
     </ElementType>
   );
-}
-
-/**
- * A link allows a user to navigate to another page or resource within a web page
- * or application.
- */
-const _Link = /*#__PURE__*/ (forwardRef as forwardRefType)(Link);
-export {_Link as Link};
+});

package/src/ListBox.tsx

@@ -79,7 +79,10 @@ export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' |
 export const ListBoxContext = createContext<ContextValue<ListBoxProps<any>, HTMLDivElement>>(null);
 export const ListStateContext = createContext<ListState<any> | null>(null);
 
-function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A listbox displays a list of options and allows a user to select one or more of them.
+ */
+export const ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ListBoxContext);
   let state = useContext(ListStateContext);
 
@@ -98,7 +101,7 @@ function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTM
       {collection => <StandaloneListBox props={props} listBoxRef={ref} collection={collection} />}
     </CollectionBuilder>
   );
-}
+});
 
 function StandaloneListBox({props, listBoxRef, collection}) {
   props = {...props, collection, children: null, items: null};
@@ -107,12 +110,6 @@ function StandaloneListBox({props, listBoxRef, collection}) {
   return <ListBoxInner state={state} props={props} listBoxRef={listBoxRef} />;
 }
 
-/**
- * A listbox displays a list of options and allows a user to select one or more of them.
- */
-const _ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ListBox);
-export {_ListBox as ListBox};
-
 interface ListBoxInnerProps<T> {
   state: ListState<T>,
   props: ListBoxProps<T> & AriaListBoxOptions<T>,
@@ -246,7 +243,7 @@ function ListBoxInner<T extends object>({state, props, listBoxRef}: ListBoxInner
             [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
             [SeparatorContext, {elementType: 'div'}],
             [DropIndicatorContext, {render: ListBoxDropIndicatorWrapper}],
-            [SectionContext, {name: 'ListBoxSection', render: ListBoxSection}]
+            [SectionContext, {name: 'ListBoxSection', render: ListBoxSectionInner}]
           ]}>
           <CollectionRoot
             collection={collection}
@@ -263,7 +260,7 @@ function ListBoxInner<T extends object>({state, props, listBoxRef}: ListBoxInner
 
 export interface ListBoxSectionProps<T> extends SectionProps<T> {}
 
-function ListBoxSection<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-ListBoxSection') {
+function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-ListBoxSection') {
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
@@ -298,8 +295,7 @@ function ListBoxSection<T extends object>(props: ListBoxSectionProps<T>, ref: Fo
 /**
  * A ListBoxSection represents a section within a ListBox.
  */
-const _ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSection);
-export {_ListBoxSection as ListBoxSection};
+export const ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSectionInner);
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 

package/src/Menu.tsx

@@ -151,7 +151,10 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
 
 export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleProps, SlotProps, ScrollableProps<HTMLDivElement> {}
 
-function Menu<T extends object>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A menu displays a list of actions or options that a user can choose.
+ */
+export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, MenuContext);
 
   // Delay rendering the actual menu until we have the collection so that auto focus works properly.
@@ -160,7 +163,7 @@ function Menu<T extends object>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivEl
       {collection => collection.size > 0 && <MenuInner props={props} collection={collection} menuRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface MenuInnerProps<T> {
   props: MenuProps<T>,
@@ -197,7 +200,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
           values={[
             [MenuStateContext, state],
             [SeparatorContext, {elementType: 'div'}],
-            [SectionContext, {name: 'MenuSection', render: MenuSection}],
+            [SectionContext, {name: 'MenuSection', render: MenuSectionInner}],
             [SubmenuTriggerContext, {parentMenuRef: ref}],
             [MenuItemContext, null],
             [SelectionManagerContext, state.selectionManager]
@@ -212,12 +215,6 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
   );
 }
 
-/**
- * A menu displays a list of actions or options that a user can choose.
- */
-const _Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(Menu);
-export {_Menu as Menu};
-
 export interface MenuSectionProps<T> extends SectionProps<T>, MultipleSelection {}
 
 // A subclass of SelectionManager that forwards focus-related properties to the parent,
@@ -251,7 +248,7 @@ class GroupSelectionManager extends SelectionManager {
   }
 }
 
-function MenuSection<T extends object>(props: MenuSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-MenuSection') {
+function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-MenuSection') {
   let state = useContext(MenuStateContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
   let [headingRef, heading] = useSlot();
@@ -290,8 +287,7 @@ function MenuSection<T extends object>(props: MenuSectionProps<T>, ref: Forwarde
 /**
  * A MenuSection represents a section within a Menu.
  */
-const _MenuSection = /*#__PURE__*/ createBranchComponent('section', MenuSection);
-export {_MenuSection as MenuSection};
+export const MenuSection = /*#__PURE__*/ createBranchComponent('section', MenuSectionInner);
 
 export interface MenuItemRenderProps extends ItemRenderProps {
   /**

package/src/Meter.tsx

@@ -33,7 +33,10 @@ export interface MeterRenderProps {
 
 export const MeterContext = createContext<ContextValue<MeterProps, HTMLDivElement>>(null);
 
-function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A meter represents a quantity within a known range, or a fractional value.
+ */
+export const Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, MeterContext);
   let {
     value = 0,
@@ -67,10 +70,4 @@ function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
       </LabelContext.Provider>
     </div>
   );
-}
-
-/**
- * A meter represents a quantity within a known range, or a fractional value.
- */
-const _Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(Meter);
-export {_Meter as Meter};
+});

package/src/Modal.tsx

@@ -61,7 +61,10 @@ export interface ModalRenderProps {
   state: OverlayTriggerState
 }
 
-function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A modal is an overlay element which blocks interaction with elements outside it.
+ */
+export const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
   let ctx = useContext(InternalModalContext);
 
   if (ctx) {
@@ -98,7 +101,7 @@ function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
       </ModalContent>
     </ModalOverlay>
   );
-}
+});
 
 interface ModalOverlayInnerProps extends ModalOverlayProps {
   overlayRef: RefObject<HTMLDivElement | null>,
@@ -107,12 +110,6 @@ interface ModalOverlayInnerProps extends ModalOverlayProps {
   isExiting: boolean
 }
 
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */
-const _Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(Modal);
-export {_Modal as Modal};
-
 function ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ModalContext);
   let contextState = useContext(OverlayTriggerStateContext);

package/src/NumberField.tsx

@@ -46,7 +46,10 @@ export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | '
 export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);
 export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
 
-function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
+ */
+export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, NumberFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -118,10 +121,4 @@ function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>)
       {props.name && <input type="hidden" name={props.name} value={isNaN(state.numberValue) ? '' : state.numberValue} />}
     </Provider>
   );
-}
-
-/**
- * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
- */
-const _NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(NumberField);
-export {_NumberField as NumberField};
+});

package/src/OverlayArrow.tsx

@@ -33,7 +33,11 @@ export interface OverlayArrowRenderProps {
   placement: PlacementAxis | null
 }
 
-function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * An OverlayArrow renders a custom arrow element relative to an overlay element
+ * such as a popover or tooltip such that it aligns with a trigger element.
+ */
+export const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, OverlayArrowContext);
   let placement = (props as OverlayArrowContextValue).placement;
   let style: CSSProperties = {
@@ -68,11 +72,4 @@ function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement
       ref={ref}
       data-placement={placement} />
   );
-}
-
-/**
- * An OverlayArrow renders a custom arrow element relative to an overlay element
- * such as a popover or tooltip such that it aligns with a trigger element.
- */
-const _OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(OverlayArrow);
-export {_OverlayArrow as OverlayArrow};
+});

package/src/Popover.tsx

@@ -80,7 +80,10 @@ export interface PopoverRenderProps {
 
 export const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);
 
-function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
+/**
+ * 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);
@@ -116,13 +119,7 @@ function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
       popoverRef={ref}
       isExiting={isExiting} />
   );
-}
-
-/**
- * A popover is an overlay element positioned relative to a trigger.
- */
-const _Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(Popover);
-export {_Popover as Popover};
+});
 
 interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {
   state: OverlayTriggerState,

package/src/ProgressBar.tsx

@@ -37,7 +37,11 @@ export interface ProgressBarRenderProps {
 
 export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, HTMLDivElement>>(null);
 
-function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * 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,
@@ -73,11 +77,4 @@ function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>)
       </LabelContext.Provider>
     </div>
   );
-}
-
-/**
- * Progress bars show either determinate or indeterminate progress of an operation
- * over time.
- */
-const _ProgressBar = forwardRef(ProgressBar);
-export {_ProgressBar as ProgressBar};
+});

package/src/RadioGroup.tsx

@@ -113,7 +113,10 @@ export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTM
 export const RadioContext = createContext<ContextValue<Partial<RadioProps>, HTMLLabelElement>>(null);
 export const RadioGroupStateContext = createContext<RadioGroupState | null>(null);
 
-function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * 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';
@@ -169,9 +172,12 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
       </Provider>
     </div>
   );
-}
+});
 
-function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
+/**
+ * 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
@@ -230,16 +236,4 @@ function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
       {renderProps.children}
     </label>
   );
-}
-
-/**
- * A radio group allows a user to select a single item from a list of mutually exclusive options.
- */
-const _RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(RadioGroup);
-
-/**
- * A radio represents an individual option within a radio group.
- */
-const _Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(Radio);
-
-export {_RadioGroup as RadioGroup, _Radio as Radio};
+});

package/src/SearchField.tsx

@@ -50,7 +50,10 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | '
 
 export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);
 
-function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A search field allows a user to enter and clear a search query.
+ */
+export const SearchField = /*#__PURE__*/ (forwardRef as forwardRefType)(function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SearchFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -108,10 +111,4 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
       </Provider>
     </div>
   );
-}
-
-/**
- * A search field allows a user to enter and clear a search query.
- */
-const _SearchField = /*#__PURE__*/ (forwardRef as forwardRefType)(SearchField);
-export {_SearchField as SearchField};
+});

package/src/Select.tsx

@@ -67,7 +67,10 @@ export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps
 export const SelectContext = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
 export const SelectStateContext = createContext<SelectState<unknown> | null>(null);
 
-function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A select displays a collapsible list of options and allows a user to select one of them.
+ */
+export const Select = /*#__PURE__*/ (forwardRef as forwardRefType)(function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SelectContext);
   let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
   let content = useMemo(() => (
@@ -89,7 +92,7 @@ function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<
       {collection => <SelectInner props={props} collection={collection} selectRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface SelectInnerProps<T extends object> {
   props: SelectProps<T>,
@@ -208,12 +211,6 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
   );
 }
 
-/**
- * A select displays a collapsible list of options and allows a user to select one of them.
- */
-const _Select = /*#__PURE__*/ (forwardRef as forwardRefType)(Select);
-export {_Select as Select};
-
 export interface SelectValueRenderProps<T> {
   /**
    * Whether the value is a placeholder.
@@ -230,7 +227,11 @@ export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<
 
 export const SelectValueContext = createContext<ContextValue<SelectValueProps<any>, HTMLSpanElement>>(null);
 
-function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
+/**
+ * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
+ * It is usually placed within the button element.
+ */
+export const SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
   [props, ref] = useContextProps(props, ref, SelectValueContext);
   let state = useContext(SelectStateContext)!;
   let {placeholder} = useSlottedContext(SelectContext)!;
@@ -276,11 +277,4 @@ function SelectValue<T extends object>(props: SelectValueProps<T>, ref: Forwarde
       </TextContext.Provider>
     </span>
   );
-}
-
-/**
- * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
- * It is usually placed within the button element.
- */
-const _SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(SelectValue);
-export {_SelectValue as SelectValue};
+});