react-aria-components 1.13.0 → 1.15.0

package/src/ProgressBar.tsx

@@ -12,13 +12,28 @@
 
 import {AriaProgressBarProps, useProgressBar} from 'react-aria';
 import {clamp} from '@react-stately/utils';
-import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './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> {}
+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 {
   /**
@@ -77,10 +92,10 @@ export const ProgressBar = forwardRef(function ProgressBar(props: ProgressBarPro
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div {...mergeProps(DOMProps, renderProps, progressBarProps)} ref={ref} slot={props.slot || undefined}>
+    <dom.div {...mergeProps(DOMProps, renderProps, progressBarProps)} ref={ref} slot={props.slot || undefined}>
       <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
         {renderProps.children}
       </LabelContext.Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/RadioGroup.tsx

@@ -11,7 +11,20 @@
  */
 
 import {AriaRadioGroupProps, AriaRadioProps, HoverEvents, Orientation, useFocusRing, useHover, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
-import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+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';
@@ -23,8 +36,19 @@ 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> {}
-export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvents, RenderProps<RadioRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
+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.
    */
@@ -152,7 +176,7 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, renderProps, radioGroupProps)}
       ref={ref}
       slot={props.slot || undefined}
@@ -177,7 +201,7 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
           {renderProps.children}
         </SharedElementTransition>
       </Provider>
-    </div>
+    </dom.div>
   );
 });
 
@@ -226,7 +250,7 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
   delete DOMProps.onClick;
 
   return (
-    <label
+    <dom.label
       {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
       ref={ref}
       data-selected={isSelected || undefined}
@@ -244,6 +268,6 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
       <SelectionIndicatorContext.Provider value={{isSelected}}>
         {renderProps.children}
       </SelectionIndicatorContext.Provider>
-    </label>
+    </dom.label>
   );
 });

package/src/SearchField.tsx

@@ -12,7 +12,20 @@
 
 import {AriaSearchFieldProps, useSearchField} from 'react-aria';
 import {ButtonContext} from './Button';
-import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
 import {createHideableComponent} from '@react-aria/collections';
 import {FieldErrorContext} from './FieldError';
 import {FieldInputContext} from './RSPContexts';
@@ -42,13 +55,29 @@ export interface SearchFieldRenderProps {
    * @selector [data-invalid]
    */
   isInvalid: boolean,
+  /**
+   * Whether the search field is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the search field is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
   /**
    * State of the search field.
    */
   state: SearchFieldState
 }
 
-export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<SearchFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<SearchFieldRenderProps>, 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-SearchField'
+   */
+  className?: ClassNameOrFunction<SearchFieldRenderProps>
+}
 
 export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);
 
@@ -81,6 +110,8 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
       isEmpty: state.value === '',
       isDisabled: props.isDisabled || false,
       isInvalid: validation.isInvalid || false,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false,
       state
     },
     defaultClassName: 'react-aria-SearchField'
@@ -90,14 +121,16 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...DOMProps}
       {...renderProps}
       ref={ref}
       slot={props.slot || undefined}
       data-empty={state.value === '' || undefined}
       data-disabled={props.isDisabled || undefined}
-      data-invalid={validation.isInvalid || undefined}>
+      data-invalid={validation.isInvalid || undefined}
+      data-readonly={props.isReadOnly || undefined}
+      data-required={props.isRequired || undefined}>
       <Provider
         values={[
           [LabelContext, {...labelProps, ref: labelRef}],
@@ -114,6 +147,6 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/Select.tsx

@@ -12,9 +12,22 @@
 
 import {AriaSelectProps, HiddenSelect, useFocusRing, useListFormatter, useLocalizedStringFormatter, useSelect} from 'react-aria';
 import {ButtonContext} from './Button';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RACValidation,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
 import {Collection, Node, SelectState, useSelectState} from 'react-stately';
 import {CollectionBuilder, createHideableComponent} from '@react-aria/collections';
-import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils';
 import {FormContext} from './Form';
@@ -65,6 +78,11 @@ export interface SelectRenderProps {
 }
 
 export interface SelectProps<T extends object = {}, M extends SelectionMode = 'single'> extends Omit<AriaSelectProps<T, M>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps<SelectRenderProps>, 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-Select'
+   */
+  className?: ClassNameOrFunction<SelectRenderProps>,
   /**
    * Temporary text that occupies the select when it is empty.
    * @default 'Select an item' (localized)
@@ -205,7 +223,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
         }],
         [FieldErrorContext, validation]
       ]}>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}
@@ -219,7 +237,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
         <HiddenSelect
           {...hiddenSelectProps}
           autoComplete={props.autoComplete} />
-      </div>
+      </dom.div>
     </Provider>
   );
 }
@@ -243,7 +261,13 @@ export interface SelectValueRenderProps<T> {
   state: SelectState<T, 'single' | 'multiple'>
 }
 
-export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>> {}
+export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>, 'span'> {
+  /**
+   * 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-SelectValue'
+   */
+  className?: ClassNameOrFunction<SelectValueRenderProps<T>>
+}
 
 export const SelectValueContext = createContext<ContextValue<SelectValueProps<any>, HTMLSpanElement>>(null);
 
@@ -322,11 +346,11 @@ export const SelectValue = /*#__PURE__*/ createHideableComponent(function Select
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <span ref={ref} {...DOMProps} {...renderProps} data-placeholder={state.selectedItems.length === 0 || undefined}>
+    <dom.span ref={ref} {...DOMProps} {...renderProps} data-placeholder={state.selectedItems.length === 0 || undefined}>
       {/* clear description and error message slots */}
       <TextContext.Provider value={undefined}>
         {renderProps.children}
       </TextContext.Provider>
-    </span>
+    </dom.span>
   );
 });

package/src/SelectionIndicator.tsx

@@ -10,11 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, useContextProps} from './utils';
+import {ClassNameOrFunction, ContextValue, useContextProps} from './utils';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
-import {SharedElement, SharedElementPropsBase} from './SharedElementTransition';
+import {SharedElement, SharedElementPropsBase, SharedElementRenderProps} from './SharedElementTransition';
 
 export interface SelectionIndicatorProps extends SharedElementPropsBase {
+  /**
+   * 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-SelectionIndicator'
+   */
+  className?: ClassNameOrFunction<SharedElementRenderProps>,
+  /** Whether the SelectionIndicator is visible. This is usually set automatically by the parent component. */
   isSelected?: boolean
 }
 

package/src/Separator.tsx

@@ -12,12 +12,18 @@
 
 import {SeparatorProps as AriaSeparatorProps, useSeparator} from 'react-aria';
 import {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';
-import {ContextValue, SlotProps, StyleProps, useContextProps} from './utils';
+import {ContextValue, dom, DOMRenderProps, SlotProps, StyleProps, useContextProps} from './utils';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {GlobalDOMAttributes} from '@react-types/shared';
-import React, {createContext, ElementType, ForwardedRef} from 'react';
+import React, {createContext, ForwardedRef} from 'react';
 
-export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLElement> {}
+export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps, DOMRenderProps<'hr' | 'div', undefined>, GlobalDOMAttributes<HTMLElement> {
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
+   * @default 'react-aria-Separator'
+   */
+  className?: string
+}
 
 export const SeparatorContext = createContext<ContextValue<SeparatorProps, HTMLElement>>({});
 
@@ -36,15 +42,20 @@ export class SeparatorNode extends CollectionNode<any> {
   }
 }
 
+/**
+ * A separator is a visual divider between two groups of content, e.g. groups of menu items or sections of a page.
+ */
 export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, SeparatorContext);
 
   let {elementType, orientation, style, className, slot, ...otherProps} = props;
-  let Element = (elementType as ElementType) || 'hr';
+  let Element = elementType || 'hr';
   if (Element === 'hr' && orientation === 'vertical') {
     Element = 'div';
   }
 
+  let ElementType = dom[Element];
+
   let {separatorProps} = useSeparator({
     ...otherProps,
     elementType,
@@ -54,7 +65,8 @@ export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, functi
   let DOMProps = filterDOMProps(props, {global: true});
 
   return (
-    <Element
+    <ElementType
+      render={props.render}
       {...mergeProps(DOMProps, separatorProps)}
       style={style}
       className={className ?? 'react-aria-Separator'}

package/src/SharedElementTransition.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {dom, RenderProps, useRenderProps} from './utils';
 import {flushSync} from 'react-dom';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, RefObject, useContext, useRef, useState} from 'react';
-import {RenderProps, useRenderProps} from './utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useObjectRef} from 'react-aria';
 
@@ -63,7 +63,7 @@ export interface SharedElementProps extends SharedElementPropsBase {
  * An element that animates between its old and new position when moving between parents.
  */
 export const SharedElement = forwardRef(function SharedElement(props: SharedElementProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {name, isVisible = true, children, className, style, ...divProps} = props;
+  let {name, isVisible = true, children, className, style, render, ...divProps} = props;
   let [state, setState] = useState(isVisible ? 'visible' : 'hidden');
   let scopeRef = useContext(SharedElementContext);
   if (!scopeRef) {
@@ -164,6 +164,7 @@ export const SharedElement = forwardRef(function SharedElement(props: SharedElem
     children,
     className,
     style,
+    render,
     values: {
       isEntering: state === 'entering',
       isExiting: state === 'exiting'
@@ -175,7 +176,7 @@ export const SharedElement = forwardRef(function SharedElement(props: SharedElem
   }
 
   return (
-    <div
+    <dom.div
       {...divProps}
       {...renderProps}
       ref={ref}

package/src/Slider.tsx

@@ -11,7 +11,18 @@
  */
 
 import {AriaSliderProps, AriaSliderThumbProps, HoverEvents, mergeProps, Orientation, useFocusRing, useHover, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
-import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  Provider,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps,
+  useSlot,
+  useSlottedContext
+} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
@@ -19,6 +30,11 @@ import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, OutputHT
 import {SliderState, useSliderState} from 'react-stately';
 
 export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, 'label'>, RenderProps<SliderRenderProps>, 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-Slider'
+   */
+  className?: ClassNameOrFunction<SliderRenderProps>,
   /**
    * The display format of the value label.
    */
@@ -86,7 +102,7 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid
         [SliderOutputContext, outputProps],
         [LabelContext, {...labelProps, ref: labelRef}]
       ]}>
-      <div
+      <dom.div
         {...mergeProps(DOMProps, renderProps, groupProps)}
         ref={ref}
         slot={props.slot || undefined}
@@ -96,7 +112,13 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid
   );
 });
 
-export interface SliderOutputProps extends RenderProps<SliderRenderProps>, GlobalDOMAttributes<HTMLOutputElement> {}
+export interface SliderOutputProps extends RenderProps<SliderRenderProps, 'output'>, GlobalDOMAttributes<HTMLOutputElement> {
+  /**
+   * 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-SliderOutput'
+   */
+  className?: ClassNameOrFunction<SliderRenderProps>
+}
 interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'className' | 'style'>, SliderOutputProps {}
 
 /**
@@ -104,12 +126,13 @@ interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputE
  */
 export const SliderOutput = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderOutput(props: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
   [props, ref] = useContextProps(props, ref, SliderOutputContext);
-  let {children, style, className, ...otherProps} = props;
+  let {children, style, className, render, ...otherProps} = props;
   let state = useContext(SliderStateContext)!;
   let renderProps = useRenderProps({
     className,
     style,
     children,
+    render,
     defaultChildren: state.getThumbValueLabel(0),
     defaultClassName: 'react-aria-SliderOutput',
     values: {
@@ -120,7 +143,7 @@ export const SliderOutput = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
   });
 
   return (
-    <output
+    <dom.output
       {...otherProps}
       {...renderProps}
       ref={ref}
@@ -137,7 +160,13 @@ export interface SliderTrackRenderProps extends SliderRenderProps {
   isHovered: boolean
 }
 
-export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {}
+export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps>, 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-SliderTrack'
+   */
+  className?: ClassNameOrFunction<SliderTrackRenderProps>
+}
 interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>, SliderTrackProps {}
 
 /**
@@ -160,7 +189,7 @@ export const SliderTrack = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   });
 
   return (
-    <div
+    <dom.div
       {...mergeProps(otherProps, hoverProps)}
       {...renderProps}
       ref={ref}
@@ -203,6 +232,11 @@ export interface SliderThumbRenderProps {
 }
 
 export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | 'validationState'>, HoverEvents, RenderProps<SliderThumbRenderProps>, 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-SliderThumb'
+   */
+  className?: ClassNameOrFunction<SliderThumbRenderProps>,
   /**
    * A ref for the HTML input element.
    */
@@ -252,7 +286,7 @@ export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   delete DOMProps.id;
 
   return (
-    <div
+    <dom.div
       {...mergeProps(DOMProps, thumbProps, hoverProps)}
       {...renderProps}
       ref={ref}
@@ -271,6 +305,6 @@ export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         ]}>
         {renderProps.children}
       </Provider>
-    </div>
+    </dom.div>
   );
 });

package/src/Switch.tsx

@@ -11,17 +11,31 @@
  */
 
 import {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, useSwitch, VisuallyHidden} from 'react-aria';
-import {ContextValue, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
+import {
+  ClassNameOrFunction,
+  ContextValue,
+  dom,
+  removeDataAttributes,
+  RenderProps,
+  SlotProps,
+  useContextProps,
+  useRenderProps
+} from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {ToggleState, useToggleState} from 'react-stately';
 
-export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, 'onClick'> {
-  /**
-   * A ref for the HTML input element.
-   */
-  inputRef?: RefObject<HTMLInputElement | null>
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps, '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-Switch'
+  */
+ className?: ClassNameOrFunction<SwitchRenderProps>,
+ /**
+  * A ref for the HTML input element.
+  */
+ inputRef?: RefObject<HTMLInputElement | null>
 }
 
 export interface SwitchRenderProps {
@@ -112,7 +126,7 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
   delete DOMProps.onClick;
 
   return (
-    <label
+    <dom.label
       {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
       ref={ref}
       slot={props.slot || undefined}
@@ -127,6 +141,6 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
         <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
       </VisuallyHidden>
       {renderProps.children}
-    </label>
+    </dom.label>
   );
 });