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

package/src/Checkbox.tsx

@@ -112,7 +112,10 @@ export interface CheckboxRenderProps {
 export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);
 export const CheckboxGroupStateContext = createContext<CheckboxGroupState | null>(null);
 
-function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A checkbox group allows a user to select multiple items from a list of options.
+ */
+export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -165,9 +168,13 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivEleme
       </Provider>
     </div>
   );
-}
+});
 
-function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
+/**
+ * A checkbox allows a user to select multiple items from a list of individual items, or
+ * to mark one individual item as selected.
+ */
+export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
     inputRef: userProvidedInputRef = null,
     ...otherProps
@@ -244,17 +251,4 @@ function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
       {renderProps.children}
     </label>
   );
-}
-
-/**
- * A checkbox allows a user to select multiple items from a list of individual items, or
- * to mark one individual item as selected.
- */
-const _Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(Checkbox);
-
-/**
- * A checkbox group allows a user to select multiple items from a list of options.
- */
-const _CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(CheckboxGroup);
-
-export {_Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup};
+});

package/src/ColorArea.tsx

@@ -23,7 +23,10 @@ export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAre
 
 export const ColorAreaStateContext = createContext<ColorAreaState | null>(null);
 
-function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ */
+export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorAreaContext);
   let inputXRef = useRef(null);
   let inputYRef = useRef(null);
@@ -71,10 +74,4 @@ function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
       </Provider>
     </div>
   );
-}
-
-/**
- * A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */
-const _ColorArea = forwardRef(ColorArea);
-export {_ColorArea as ColorArea};
+});

package/src/ColorField.tsx

@@ -61,20 +61,17 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'pl
 
 export const ColorFieldStateContext = createContext<ColorFieldState | null>(null);
 
-function ColorField(props: ColorFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+export const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorFieldContext);
   if (props.channel) {
     return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;
   } else {
     return <HexColorField {...props} forwardedRef={ref} />;
   }
-}
-
-/**
- * A color field allows users to edit a hex color or individual color channel value.
- */
-const _ColorField = forwardRef(ColorField);
-export {_ColorField as ColorField};
+});
 
 interface ColorChannelFieldProps extends Omit<ColorFieldProps, 'channel'> {
   channel: ColorChannel,

package/src/ColorSlider.tsx

@@ -31,7 +31,10 @@ export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, R
 
 export const ColorSliderStateContext = createContext<ColorSliderState | null>(null);
 
-function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A color slider allows users to adjust an individual channel of a color value.
+ */
+export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorSliderContext);
   let {locale} = useLocale();
   let state = useColorSliderState({...props, locale});
@@ -88,10 +91,4 @@ function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>)
         data-disabled={state.isDisabled || undefined} />
     </Provider>
   );
-}
-
-/**
- * A color slider allows users to adjust an individual channel of a color value.
- */
-const _ColorSlider = forwardRef(ColorSlider);
-export {_ColorSlider as ColorSlider};
+});

package/src/ColorSwatch.tsx

@@ -12,7 +12,10 @@ export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps
 
 export const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);
 
-function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorSwatchContext);
   let {colorSwatchProps, color} = useColorSwatch(props);
   let renderProps = useRenderProps({
@@ -31,10 +34,4 @@ function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>)
       slot={props.slot || undefined}
       ref={ref} />
   );
-}
-
-/**
- * A ColorSwatch displays a preview of a selected color.
- */
-const _ColorSwatch = forwardRef(ColorSwatch);
-export {_ColorSwatch as ColorSwatch};
+});

package/src/ColorSwatchPicker.tsx

@@ -23,7 +23,10 @@ export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>
 export const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);
 const ColorMapContext = createContext<Map<string, Color> | null>(null);
 
-function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);
   let state = useColorPickerState(props);
   let colorMap = useMemo(() => new Map(), []);
@@ -51,13 +54,7 @@ function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTML
       </ColorMapContext.Provider>
     </ListBox>
   );
-}
-
-/**
- * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- */
-let _ColorSwatchPicker = forwardRef(ColorSwatchPicker);
-export {_ColorSwatchPicker as ColorSwatchPicker};
+});
 
 export interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, 'selectionMode' | 'selectionBehavior'> {
   /** The color of the swatch. */
@@ -71,7 +68,7 @@ export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPicke
   isDisabled?: boolean
 }
 
-function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {
   let propColor = props.color || '#0000';
   let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);
   let {locale} = useLocale();
@@ -106,7 +103,4 @@ function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: Forwarded
       ))}
     </ListBoxItem>
   );
-}
-
-let _ColorSwatchPickerItem = forwardRef(ColorSwatchPickerItem);
-export {_ColorSwatchPickerItem as ColorSwatchPickerItem};
+});

package/src/ColorThumb.tsx

@@ -58,7 +58,10 @@ export interface ColorThumbRenderProps {
 
 export interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps> {}
 
-function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
+ */
+export const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {
   let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover(props);
@@ -98,10 +101,4 @@ function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {
       {renderProps.children}
     </div>
   );
-}
-
-/**
- * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
- */
-const _ColorThumb = forwardRef(ColorThumb);
-export {_ColorThumb as ColorThumb};
+});

package/src/ColorWheel.tsx

@@ -22,7 +22,10 @@ export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<Colo
 
 export const ColorWheelStateContext = createContext<ColorWheelState | null>(null);
 
-function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorWheelContext);
   let state = useColorWheelState(props);
   let inputRef = useRef(null);
@@ -60,13 +63,7 @@ function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {
       </Provider>
     </div>
   );
-}
-
-/**
- * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
- */
-const _ColorWheel = forwardRef(ColorWheel);
-export {_ColorWheel as ColorWheel};
+});
 
 export interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}
 export interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}
@@ -74,7 +71,10 @@ interface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>,
 
 export const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);
 
-function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A color wheel track renders a circular gradient track.
+ */
+export const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);
   let state = useContext(ColorWheelStateContext)!;
 
@@ -94,10 +94,4 @@ function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivE
       ref={ref}
       data-disabled={state.isDisabled || undefined} />
   );
-}
-
-/**
- * A color wheel track renders a circular gradient track.
- */
-const _ColorWheelTrack = forwardRef(ColorWheelTrack);
-export {_ColorWheelTrack as ColorWheelTrack};
+});

package/src/ComboBox.tsx

@@ -66,7 +66,10 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
 export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);
 export const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);
 
-function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
+ */
+export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ComboBoxContext);
   let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
   let content = useMemo(() => (
@@ -88,7 +91,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<H
       {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}
     </CollectionBuilder>
   );
-}
+});
 
 interface ComboBoxInnerProps<T extends object> {
   props: ComboBoxProps<T>,
@@ -219,9 +222,3 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
     </Provider>
   );
 }
-
-/**
- * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
- */
-const _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);
-export {_ComboBox as ComboBox};

package/src/DateField.tsx

@@ -47,7 +47,11 @@ export const TimeFieldContext = createContext<ContextValue<TimeFieldProps<any>,
 export const DateFieldStateContext = createContext<DateFieldState | null>(null);
 export const TimeFieldStateContext = createContext<TimeFieldState | null>(null);
 
-function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A date field allows users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
+export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DateFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -105,16 +109,13 @@ function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: Forwarded
         data-invalid={state.isInvalid || undefined} />
     </Provider>
   );
-}
+});
 
 /**
- * A date field allows users to enter and edit date and time values using a keyboard.
- * Each part of a date value is displayed in an individually editable segment.
+ * A time field allows users to enter and edit time values using a keyboard.
+ * Each part of a time value is displayed in an individually editable segment.
  */
-const _DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(DateField);
-export {_DateField as DateField};
-
-function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TimeFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -171,14 +172,7 @@ function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: Forwarded
         data-invalid={state.isInvalid || undefined} />
     </Provider>
   );
-}
-
-/**
- * A time field allows users to enter and edit time values using a keyboard.
- * Each part of a time value is displayed in an individually editable segment.
- */
-const _TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(TimeField);
-export {_TimeField as TimeField};
+});
 
 export interface DateInputRenderProps {
   /**
@@ -213,7 +207,10 @@ export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRen
   children: (segment: IDateSegment) => ReactElement
 }
 
-function DateInput(props: DateInputProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
+/**
+ * A date input groups the editable date segments within a date field.
+ */
+export const DateInput = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateInput(props: DateInputProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
   // If state is provided by DateField/TimeField, just render.
   // Otherwise (e.g. in DatePicker), we need to call hooks and create state ourselves.
   let dateFieldState = useContext(DateFieldStateContext);
@@ -221,7 +218,7 @@ function DateInput(props: DateInputProps, ref: ForwardedRef<HTMLDivElement>): JS
   return dateFieldState || timeFieldState
     ? <DateInputInner {...props} ref={ref} />
     : <DateInputStandalone {...props} ref={ref} />;
-}
+});
 
 const DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef<HTMLDivElement>) => {
   let [dateFieldProps, fieldRef] = useContextProps({slot: props.slot} as DateFieldProps<any>, ref, DateFieldContext);
@@ -268,12 +265,6 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTML
   );
 });
 
-/**
- * A date input groups the editable date segments within a date field.
- */
-const _DateInput = /*#__PURE__*/ (forwardRef as forwardRefType)(DateInput);
-export {_DateInput as DateInput};
-
 export interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'> {
   /**
    * Whether the segment is currently hovered with a mouse.
@@ -321,7 +312,11 @@ export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps>, H
   segment: IDateSegment
 }
 
-function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A date segment displays an individual unit of a date and time, and allows users to edit
+ * the value by typing or using the arrow keys to increment and decrement.
+ */
+export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLDivElement>) {
   let dateFieldState = useContext(DateFieldStateContext);
   let timeFieldState = useContext(TimeFieldStateContext);
   let state = dateFieldState ?? timeFieldState!;
@@ -359,11 +354,4 @@ function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedR
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined} />
   );
-}
-
-/**
- * A date segment displays an individual unit of a date and time, and allows users to edit
- * the value by typing or using the arrow keys to increment and decrement.
- */
-const _DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(DateSegment);
-export {_DateSegment as DateSegment};
+});

package/src/DatePicker.tsx

@@ -72,7 +72,10 @@ export const DateRangePickerContext = createContext<ContextValue<DateRangePicker
 export const DatePickerStateContext = createContext<DatePickerState | null>(null);
 export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);
 
-function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
+export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DatePickerContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -167,15 +170,13 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
         data-open={state.isOpen || undefined} />
     </Provider>
   );
-}
+});
 
 /**
- * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ * A date range picker combines two DateFields and a RangeCalendar popover to allow
+ * users to enter or select a date and time range.
  */
-const _DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(DatePicker);
-export {_DatePicker as DatePicker};
-
-function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DateRangePickerContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -276,11 +277,4 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
         data-open={state.isOpen || undefined} />
     </Provider>
   );
-}
-
-/**
- * A date range picker combines two DateFields and a RangeCalendar popover to allow
- * users to enter or select a date and time range.
- */
-const _DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(DateRangePicker);
-export {_DateRangePicker as DateRangePicker};
+});

package/src/Dialog.tsx

@@ -70,7 +70,10 @@ export function DialogTrigger(props: DialogTriggerProps) {
   );
 }
 
-function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
+/**
+ * A dialog is an overlay shown above other content in an application.
+ */
+export const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
   let originalAriaLabelledby = props['aria-labelledby'];
   [props, ref] = useContextProps(props, ref, DialogContext);
   let {dialogProps, titleProps} = useDialog({
@@ -129,10 +132,4 @@ function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
       </Provider>
     </section>
   );
-}
-
-/**
- * A dialog is an overlay shown above other content in an application.
- */
-const _Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(Dialog);
-export {_Dialog as Dialog};
+});

package/src/Disclosure.tsx

@@ -35,7 +35,11 @@ export interface DisclosureGroupRenderProps {
 
 export const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
 
-function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
+ * It supports both single and multiple expanded items.
+ */
+export const DisclosureGroup = forwardRef(function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   let state = useDisclosureGroupState(props);
 
   let renderProps = useRenderProps({
@@ -60,14 +64,7 @@ function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivE
       </DisclosureGroupStateContext.Provider>
     </div>
   );
-}
-
-/**
- * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
- * It supports both single and multiple expanded items.
- */
-const _DisclosureGroup = forwardRef(DisclosureGroup);
-export {_DisclosureGroup as DisclosureGroup};
+});
 
 export interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'>, RenderProps<DisclosureRenderProps>, SlotProps {
   /** An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. */
@@ -106,7 +103,10 @@ interface InternalDisclosureContextValue {
 
 const InternalDisclosureContext = createContext<InternalDisclosureContextValue | null>(null);
 
-function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
+ */
+export const Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DisclosureContext);
   let groupState = useContext(DisclosureGroupStateContext)!;
   let {id, ...otherProps} = props;
@@ -179,7 +179,7 @@ function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
       </div>
     </Provider>
   );
-}
+});
 
 export interface DisclosurePanelRenderProps {
   /**
@@ -201,7 +201,10 @@ export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderP
   children: ReactNode
 }
 
-function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A DisclosurePanel provides the content for a disclosure.
+ */
+export const DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivElement>) {
   let {role = 'group'} = props;
   let {panelProps, panelRef} = useContext(InternalDisclosureContext)!;
   let {
@@ -232,16 +235,4 @@ function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivE
       </Provider>
     </div>
   );
-}
-
-/**
- * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
- */
-const _Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(Disclosure);
-export {_Disclosure as Disclosure};
-
-/**
- * A DisclosurePanel provides the content for a disclosure.
- */
-const _DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosurePanel);
-export {_DisclosurePanel as DisclosurePanel};
+});

package/src/DragAndDrop.tsx

@@ -37,16 +37,13 @@ interface DropIndicatorContextValue {
   render: (props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) => ReactNode
 }
 
-function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
-  let {render} = useContext(DropIndicatorContext)!;
-  return <>{render(props, ref)}</>;
-}
-
 /**
  * A DropIndicator is rendered between items in a collection to indicate where dropped data will be inserted.
  */
-const _DropIndicator = forwardRef(DropIndicator);
-export {_DropIndicator as DropIndicator};
+export const DropIndicator = forwardRef(function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
+  let {render} = useContext(DropIndicatorContext)!;
+  return <>{render(props, ref)}</>;
+});
 
 export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, dropState?: DroppableCollectionState) {
   let renderDropIndicator = dragAndDropHooks?.renderDropIndicator;
@@ -54,7 +51,7 @@ export function useRenderDropIndicator(dragAndDropHooks?: DragAndDropHooks, drop
   let fn = useCallback((target: ItemDropTarget) => {
     // Only show drop indicators when virtual dragging or this is the current drop target.
     if (isVirtualDragging || dropState?.isDropTarget(target)) {
-      return renderDropIndicator ? renderDropIndicator(target) : <_DropIndicator target={target} />;
+      return renderDropIndicator ? renderDropIndicator(target) : <DropIndicator target={target} />;
     }
     // We invalidate whenever the target changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/DropZone.tsx

@@ -52,7 +52,10 @@ export interface DropZoneProps extends Omit<DropOptions, 'getDropOperationForPoi
 
 export const DropZoneContext = createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);
 
-function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A drop zone is an area into which one or multiple objects can be dragged and dropped.
+ */
+export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
   let {isDisabled = false} = props;
   [props, ref] = useContextProps(props, ref, DropZoneContext);
   let dropzoneRef = useObjectRef(ref);
@@ -127,10 +130,4 @@ function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
       </div>
     </Provider>
   );
-}
-
-/**
- * A drop zone is an area into which one or multiple objects can be dragged and dropped.
- */
-const _DropZone = forwardRef(DropZone);
-export {_DropZone as DropZone};
+});

package/src/FieldError.tsx

@@ -21,20 +21,17 @@ export const FieldErrorContext = createContext<ValidationResult | null>(null);
 export interface FieldErrorRenderProps extends ValidationResult {}
 export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOMProps {}
 
-function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
+/**
+ * A FieldError displays validation errors for a form field.
+ */
+export const FieldError = forwardRef(function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
   let validation = useContext(FieldErrorContext);
   if (!validation?.isInvalid) {
     return null;
   }
 
   return <FieldErrorInner {...props} ref={ref} />;
-}
-
-/**
- * A FieldError displays validation errors for a form field.
- */
-const _FieldError = forwardRef(FieldError);
-export {_FieldError as FieldError};
+});
 
 const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) => {
   let validation = useContext(FieldErrorContext)!;

package/src/FileTrigger.tsx

@@ -42,7 +42,10 @@ export interface FileTriggerProps {
   acceptDirectory?: boolean
 }
 
-function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
+/**
+ * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
+ */
+export const FileTrigger = forwardRef(function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
   let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ...rest} = props;
   let inputRef = useObjectRef(ref);
   let domProps = filterDOMProps(rest);
@@ -71,10 +74,4 @@ function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement
         webkitdirectory={acceptDirectory ? '' : undefined} />
     </>
   );
-}
-
-/**
- * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
- */
-const _FileTrigger = forwardRef(FileTrigger);
-export {_FileTrigger  as FileTrigger};
+});