@base-ui/react 1.1.0 → 1.3.0

package/esm/progress/label/ProgressLabel.js

@@ -1,9 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRegisteredLabelId } from "../../utils/useRegisteredLabelId.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";
 /**
@@ -19,20 +18,17 @@ export const ProgressLabel = /*#__PURE__*/React.forwardRef(function ProgressLabe
     id: idProp,
     ...elementProps
   } = componentProps;
-  const id = useBaseUiId(idProp);
   const {
     setLabelId,
     state
   } = useProgressRootContext();
-  useIsoLayoutEffect(() => {
-    setLabelId(id);
-    return () => setLabelId(undefined);
-  }, [id, setLabelId]);
+  const id = useRegisteredLabelId(idProp, setLabelId);
   const element = useRenderElement('span', componentProps, {
     state,
     ref: forwardedRef,
     props: [{
-      id
+      id,
+      role: 'presentation'
     }, elementProps],
     stateAttributesMapping: progressStateAttributesMapping
   });

package/esm/progress/root/ProgressRoot.d.ts

@@ -9,36 +9,39 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 export declare const ProgressRoot: React.ForwardRefExoticComponent<Omit<ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
 export interface ProgressRootState {
+  /**
+   * The current status.
+   */
   status: ProgressStatus;
 }
-export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressRoot.State> {
+export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressRootState> {
   /**
    * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
    */
-  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'];
+  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
   /**
    * Options to format the value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
    */
-  getAriaValueText?: (formattedValue: string | null, value: number | null) => string;
+  getAriaValueText?: ((formattedValue: string | null, value: number | null) => string) | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum value.
    * @default 100
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * The minimum value.
    * @default 0
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The current value. The component is indeterminate when value is `null`.
    * @default null

package/esm/progress/root/ProgressRoot.js

@@ -2,22 +2,12 @@
 
 import * as React from 'react';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { formatNumber } from "../../utils/formatNumber.js";
+import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { formatNumberValue } from "../../utils/formatNumber.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { ProgressRootContext } from "./ProgressRootContext.js";
 import { progressStateAttributesMapping } from "./stateAttributesMapping.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-function formatValue(value, locale, format) {
-  if (value == null) {
-    return '';
-  }
-  if (!format) {
-    return formatNumber(value / 100, locale, {
-      style: 'percent'
-    });
-  }
-  return formatNumber(value, locale, format);
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getDefaultAriaValueText(formattedValue, value) {
   if (value == null) {
     return 'indeterminate progress';
@@ -41,6 +31,7 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
     value,
     render,
     className,
+    children,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
@@ -49,7 +40,7 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
   if (Number.isFinite(value)) {
     status = value === max ? 'complete' : 'progressing';
   }
-  const formattedValue = formatValue(value, locale, formatOptionsRef.current);
+  const formattedValue = formatNumberValue(value, locale, formatOptionsRef.current);
   const state = React.useMemo(() => ({
     status
   }), [status]);
@@ -59,7 +50,14 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
     'aria-valuemin': min,
     'aria-valuenow': value ?? undefined,
     'aria-valuetext': getAriaValueText(formattedValue, value),
-    role: 'progressbar'
+    role: 'progressbar',
+    children: /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [children, /*#__PURE__*/_jsx("span", {
+        role: "presentation",
+        style: visuallyHidden,
+        children: "x"
+      })]
+    })
   };
   const contextValue = React.useMemo(() => ({
     formattedValue,

package/esm/progress/root/ProgressRootContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ProgressRoot, ProgressStatus } from "./ProgressRoot.js";
+import type { ProgressStatus, ProgressRootState } from "./ProgressRoot.js";
 export type ProgressRootContext = {
   /**
    * Formatted value of the component.
@@ -18,7 +18,7 @@ export type ProgressRootContext = {
    */
   value: number | null;
   setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  state: ProgressRoot.State;
+  state: ProgressRootState;
   status: ProgressStatus;
 };
 /**

package/esm/progress/root/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { ProgressRoot } from "./ProgressRoot.js";
-export declare const progressStateAttributesMapping: StateAttributesMapping<ProgressRoot.State>;
+import type { ProgressRootState } from "./ProgressRoot.js";
+export declare const progressStateAttributesMapping: StateAttributesMapping<ProgressRootState>;

package/esm/progress/track/ProgressTrack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ProgressRoot } from "../root/ProgressRoot.js";
+import type { ProgressRootState } from "../root/ProgressRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Contains the progress bar indicator.
@@ -8,7 +8,9 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
 export declare const ProgressTrack: React.ForwardRefExoticComponent<Omit<ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ProgressTrackProps extends BaseUIComponentProps<'div', ProgressRoot.State> {}
+export interface ProgressTrackState extends ProgressRootState {}
+export interface ProgressTrackProps extends BaseUIComponentProps<'div', ProgressTrackState> {}
 export declare namespace ProgressTrack {
+  type State = ProgressTrackState;
   type Props = ProgressTrackProps;
 }

package/esm/progress/value/ProgressValue.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ProgressRoot } from "../root/ProgressRoot.js";
+import type { ProgressRootState } from "../root/ProgressRoot.js";
 /**
  * A text label displaying the current value.
  * Renders a `<span>` element.
@@ -8,9 +8,11 @@ import type { ProgressRoot } from "../root/ProgressRoot.js";
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
 export declare const ProgressValue: React.ForwardRefExoticComponent<Omit<ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface ProgressValueProps extends Omit<BaseUIComponentProps<'span', ProgressRoot.State>, 'children'> {
-  children?: null | ((formattedValue: string | null, value: number | null) => React.ReactNode);
+export interface ProgressValueState extends ProgressRootState {}
+export interface ProgressValueProps extends Omit<BaseUIComponentProps<'span', ProgressValueState>, 'children'> {
+  children?: null | ((formattedValue: string | null, value: number | null) => React.ReactNode) | undefined;
 }
 export declare namespace ProgressValue {
+  type State = ProgressValueState;
   type Props = ProgressValueProps;
 }

package/esm/radio/indicator/RadioIndicator.d.ts

@@ -8,18 +8,21 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
  */
 export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioIndicator.State> {
+export interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioIndicatorState> {
   /**
    * Whether to keep the HTML element in the DOM when the radio button is inactive.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface RadioIndicatorState {
   /**
    * Whether the radio button is currently selected.
    */
   checked: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace RadioIndicator {

package/esm/radio/indicator/RadioIndicator.js

@@ -23,17 +23,17 @@ export const RadioIndicator = /*#__PURE__*/React.forwardRef(function RadioIndica
   const rootState = useRadioRootContext();
   const rendered = rootState.checked;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = useTransitionStatus(rendered);
-  const state = React.useMemo(() => ({
+  const state = {
     ...rootState,
     transitionStatus
-  }), [rootState, transitionStatus]);
+  };
   const indicatorRef = React.useRef(null);
-  const shouldRender = keepMounted || rendered;
+  const shouldRender = keepMounted || mounted;
   const element = useRenderElement('span', componentProps, {
-    enabled: shouldRender,
     ref: [forwardedRef, indicatorRef],
     state,
     props: elementProps,

package/esm/radio/indicator/RadioIndicatorDataAttributes.d.ts

@@ -19,6 +19,14 @@ export declare enum RadioIndicatorDataAttributes {
    * Present when the radio is required.
    */
   required = "data-required",
+  /**
+   * Present when the radio indicator is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the radio indicator is animating out.
+   */
+  endingStyle = "data-ending-style",
   /**
    * Present when the radio is in valid state (when wrapped in Field.Root).
    */

package/esm/radio/indicator/RadioIndicatorDataAttributes.js

@@ -1,4 +1,5 @@
-export let RadioIndicatorDataAttributes = /*#__PURE__*/function (RadioIndicatorDataAttributes) {
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let RadioIndicatorDataAttributes = function (RadioIndicatorDataAttributes) {
   /**
    * Present when the radio is checked.
    */
@@ -19,6 +20,14 @@ export let RadioIndicatorDataAttributes = /*#__PURE__*/function (RadioIndicatorD
    * Present when the radio is required.
    */
   RadioIndicatorDataAttributes["required"] = "data-required";
+  /**
+   * Present when the radio indicator is animating in.
+   */
+  RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the radio indicator is animating out.
+   */
+  RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the radio is in valid state (when wrapped in Field.Root).
    */

package/esm/radio/root/RadioRoot.d.ts

@@ -1,36 +1,56 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 /**
  * Represents the radio button itself.
  * Renders a `<span>` element and a hidden `<input>` beside.
  *
  * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
  */
-export declare const RadioRoot: React.ForwardRefExoticComponent<Omit<RadioRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface RadioRootState extends FieldRoot.State {
-  /** Whether the radio button is currently selected. */
+export declare const RadioRoot: {
+  <Value>(props: RadioRoot.Props<Value>): React.JSX.Element;
+};
+export interface RadioRootState extends FieldRootState {
+  /**
+   * Whether the radio button is currently selected.
+   */
   checked: boolean;
-  /** Whether the component should ignore user interaction. */
+  /**
+   * Whether the component should ignore user interaction.
+   */
   disabled: boolean;
-  /** Whether the user should be unable to select the radio button. */
+  /**
+   * Whether the user should be unable to select the radio button.
+   */
   readOnly: boolean;
-  /** Whether the user must choose a value before submitting a form. */
+  /**
+   * Whether the user must choose a value before submitting a form.
+   */
   required: boolean;
 }
-export interface RadioRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRoot.State>, 'value'> {
-  /** The unique identifying value of the radio in a group. */
-  value: any;
-  /** Whether the component should ignore user interaction. */
-  disabled?: boolean;
-  /** Whether the user must choose a value before submitting a form. */
-  required?: boolean;
-  /** Whether the user should be unable to select the radio button. */
-  readOnly?: boolean;
-  /** A ref to access the hidden input element. */
-  inputRef?: React.Ref<HTMLInputElement>;
+export interface RadioRootProps<Value = any> extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRootState>, 'value'> {
+  /**
+   * The unique identifying value of the radio in a group.
+   */
+  value: Value;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Whether the user must choose a value before submitting a form.
+   */
+  required?: boolean | undefined;
+  /**
+   * Whether the user should be unable to select the radio button.
+   */
+  readOnly?: boolean | undefined;
+  /**
+   * A ref to access the hidden input element.
+   */
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
 export declare namespace RadioRoot {
   type State = RadioRootState;
-  type Props = RadioRootProps;
+  type Props<TValue = any> = RadioRootProps<TValue>;
 }

package/esm/radio/root/RadioRoot.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
@@ -17,8 +18,10 @@ import { CompositeItem } from "../../composite/item/CompositeItem.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
 import { useFieldItemContext } from "../../field/item/FieldItemContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
 import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
 import { useRadioGroupContext } from "../../radio-group/RadioGroupContext.js";
+import { serializeValue } from "../../utils/serializeValue.js";
 import { RadioRootContext } from "./RadioRootContext.js";
 
 /**
@@ -35,24 +38,27 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
     disabled: disabledProp = false,
     readOnly: readOnlyProp = false,
     required: requiredProp = false,
+    'aria-labelledby': ariaLabelledByProp,
     value,
     inputRef: inputRefProp,
     nativeButton = false,
     id: idProp,
     ...elementProps
   } = componentProps;
+  const groupContext = useRadioGroupContext();
   const {
     disabled: disabledGroup,
     readOnly: readOnlyGroup,
     required: requiredGroup,
     checkedValue,
-    setCheckedValue,
-    touched,
-    setTouched,
+    touched = false,
     validation,
-    registerControlRef,
     name
-  } = useRadioGroupContext();
+  } = groupContext ?? {};
+  const setCheckedValue = groupContext?.setCheckedValue ?? NOOP;
+  const setTouched = groupContext?.setTouched ?? NOOP;
+  const registerControlRef = groupContext?.registerControlRef ?? NOOP;
+  const registerInputRef = groupContext?.registerInputRef ?? NOOP;
   const {
     setDirty,
     validityData,
@@ -69,15 +75,35 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
   const disabled = fieldDisabled || fieldItemContext.disabled || disabledGroup || disabledProp;
   const readOnly = readOnlyGroup || readOnlyProp;
   const required = requiredGroup || requiredProp;
-  const checked = checkedValue === value;
+  const checked = groupContext ? checkedValue === value : value === '';
+  const serializedValue = React.useMemo(() => serializeValue(value), [value]);
   const radioRef = React.useRef(null);
   const inputRef = React.useRef(null);
-  const mergedInputRef = useMergedRefs(inputRefProp, inputRef);
+  const handleControlRef = useStableCallback(element => {
+    if (!element) {
+      return;
+    }
+    registerControlRef(element, disabled);
+  });
+  const mergedInputRef = useMergedRefs(inputRefProp, inputRef, registerInputRef);
   useIsoLayoutEffect(() => {
     if (inputRef.current?.checked) {
       setFilled(true);
     }
   }, [setFilled]);
+  useIsoLayoutEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    if (disabled && checked) {
+      registerInputRef(null);
+      return;
+    }
+    if (radioRef.current) {
+      registerControlRef(radioRef.current, disabled);
+    }
+    registerInputRef(inputRef.current);
+  }, [checked, disabled, registerControlRef, registerInputRef]);
   const id = useBaseUiId();
   const inputId = useLabelableId({
     id: idProp,
@@ -85,12 +111,13 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
     controlRef: radioRef
   });
   const hiddenInputId = nativeButton ? undefined : inputId;
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, hiddenInputId);
   const rootProps = {
     role: 'radio',
     'aria-checked': checked,
     'aria-required': required || undefined,
     'aria-readonly': readOnly || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledBy,
     [ACTIVE_COMPOSITE_ITEM]: checked ? '' : undefined,
     id: nativeButton ? inputId : id,
     onKeyDown(event) {
@@ -103,7 +130,13 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
         return;
       }
       event.preventDefault();
-      inputRef.current?.click();
+      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey
+      }));
     },
     onFocus(event) {
       if (event.defaultPrevented || disabled || readOnly || !touched) {
@@ -124,9 +157,13 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
     type: 'radio',
     ref: mergedInputRef,
     id: hiddenInputId,
+    name,
     tabIndex: -1,
     style: name ? visuallyHiddenInput : visuallyHidden,
     'aria-hidden': true,
+    ...(value !== undefined ? {
+      value: serializedValue
+    } : EMPTY_OBJECT),
     disabled,
     checked,
     required,
@@ -159,9 +196,9 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
     readOnly,
     checked
   }), [fieldState, disabled, readOnly, checked, required]);
-  const contextValue = React.useMemo(() => state, [state]);
-  const isRadioGroup = setCheckedValue !== NOOP;
-  const refs = [forwardedRef, registerControlRef, radioRef, buttonRef];
+  const contextValue = state;
+  const isRadioGroup = groupContext !== undefined;
+  const refs = [forwardedRef, radioRef, buttonRef, handleControlRef];
   const props = [rootProps, getDescriptionProps, validation?.getValidationProps ?? EMPTY_OBJECT, elementProps, getButtonProps];
   const element = useRenderElement('span', componentProps, {
     enabled: !isRadioGroup,

package/esm/radio-group/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../utils/types.js";
-import type { FieldRoot } from "../field/root/FieldRoot.js";
+import type { FieldRootState } from "../field/root/FieldRoot.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../utils/reasons.js";
 /**
@@ -9,59 +9,65 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Radio Group](https://base-ui.com/react/components/radio)
  */
-export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface RadioGroupState extends FieldRoot.State {
+export declare const RadioGroup: {
+  <Value>(props: RadioGroup.Props<Value>): React.JSX.Element;
+};
+export interface RadioGroupState extends FieldRootState {
   /**
    * Whether the user should be unable to select a different radio button in the group.
    */
-  readOnly: boolean | undefined;
+  readOnly: boolean;
+  /**
+   * Whether the user must tick a radio button within the group before submitting a form.
+   */
+  required: boolean;
 }
-export interface RadioGroupProps extends Omit<BaseUIComponentProps<'div', RadioGroup.State>, 'value'> {
+export interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<'div', RadioGroupState>, 'value'> {
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the user should be unable to select a different radio button in the group.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the user must choose a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The controlled value of the radio item that should be currently selected.
    *
    * To render an uncontrolled radio group, use the `defaultValue` prop instead.
    */
-  value?: any;
+  value?: Value | undefined;
   /**
    * The uncontrolled value of the radio button that should be initially selected.
    *
    * To render a controlled radio group, use the `value` prop instead.
    */
-  defaultValue?: any;
+  defaultValue?: Value | undefined;
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: (value: any, eventDetails: RadioGroup.ChangeEventDetails) => void;
+  onValueChange?: ((value: Value, eventDetails: RadioGroup.ChangeEventDetails) => void) | undefined;
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
 export type RadioGroupChangeEventReason = typeof REASONS.none;
 export type RadioGroupChangeEventDetails = BaseUIChangeEventDetails<RadioGroup.ChangeEventReason>;
 export declare namespace RadioGroup {
   type State = RadioGroupState;
-  type Props = RadioGroupProps;
+  type Props<TValue = any> = RadioGroupProps<TValue>;
   type ChangeEventReason = RadioGroupChangeEventReason;
   type ChangeEventDetails = RadioGroupChangeEventDetails;
 }