@base-ui/react 1.2.0 → 1.4.0

package/esm/progress/indicator/ProgressIndicator.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";
 /**
  * Visualizes the completion status of the task.
@@ -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 ProgressIndicator: React.ForwardRefExoticComponent<Omit<ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ProgressIndicatorProps extends BaseUIComponentProps<'div', ProgressRoot.State> {}
+export interface ProgressIndicatorState extends ProgressRootState {}
+export interface ProgressIndicatorProps extends BaseUIComponentProps<'div', ProgressIndicatorState> {}
 export declare namespace ProgressIndicator {
+  type State = ProgressIndicatorState;
   type Props = ProgressIndicatorProps;
 }

package/esm/progress/indicator/ProgressIndicator.js

@@ -15,6 +15,7 @@ export const ProgressIndicator = /*#__PURE__*/React.forwardRef(function Progress
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/progress/indicator/ProgressIndicatorDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressIndicatorDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/indicator/ProgressIndicatorDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressIndicatorDataAttributes = /*#__PURE__*/function (ProgressIndi
    */
   ProgressIndicatorDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressIndicatorDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/esm/progress/label/ProgressLabel.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";
 /**
  * An accessible label for the progress bar.
@@ -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 ProgressLabel: React.ForwardRefExoticComponent<Omit<ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface ProgressLabelProps extends BaseUIComponentProps<'span', ProgressRoot.State> {}
+export interface ProgressLabelState extends ProgressRootState {}
+export interface ProgressLabelProps extends BaseUIComponentProps<'span', ProgressLabelState> {}
 export declare namespace ProgressLabel {
+  type State = ProgressLabelState;
   type Props = ProgressLabelProps;
 }

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";
 /**
@@ -16,23 +15,21 @@ export const ProgressLabel = /*#__PURE__*/React.forwardRef(function ProgressLabe
   const {
     render,
     className,
+    style,
     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/label/ProgressLabelDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressLabelDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/label/ProgressLabelDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressLabelDataAttributes = /*#__PURE__*/function (ProgressLabelDat
    */
   ProgressLabelDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressLabelDataAttributes["indeterminate"] = "data-indeterminate";
   /**

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

@@ -9,9 +9,12 @@ 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.
    */

package/esm/progress/root/ProgressRoot.js

@@ -2,11 +2,12 @@
 
 import * as React from 'react';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
+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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getDefaultAriaValueText(formattedValue, value) {
   if (value == null) {
     return 'indeterminate progress';
@@ -30,6 +31,8 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
     value,
     render,
     className,
+    children,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
@@ -48,7 +51,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/ProgressRootDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressRootDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/root/ProgressRootDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressRootDataAttributes = /*#__PURE__*/function (ProgressRootDataA
    */
   ProgressRootDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressRootDataAttributes["indeterminate"] = "data-indeterminate";
   /**

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/track/ProgressTrack.js

@@ -14,6 +14,7 @@ export const ProgressTrack = /*#__PURE__*/React.forwardRef(function ProgressTrac
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -4,7 +4,7 @@ export declare enum ProgressTrackDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/track/ProgressTrackDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressTrackDataAttributes = /*#__PURE__*/function (ProgressTrackDat
    */
   ProgressTrackDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressTrackDataAttributes["indeterminate"] = "data-indeterminate";
   /**

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)) | undefined;
+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/progress/value/ProgressValue.js

@@ -15,6 +15,7 @@ export const ProgressValue = /*#__PURE__*/React.forwardRef(function ProgressValu
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -4,7 +4,7 @@ export declare enum ProgressValueDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/value/ProgressValueDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressValueDataAttributes = /*#__PURE__*/function (ProgressValueDat
    */
   ProgressValueDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressValueDataAttributes["indeterminate"] = "data-indeterminate";
   /**

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

@@ -8,7 +8,7 @@ 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
@@ -20,6 +20,9 @@ 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

@@ -17,6 +17,7 @@ export const RadioIndicator = /*#__PURE__*/React.forwardRef(function RadioIndica
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

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,6 +1,6 @@
 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.
@@ -10,7 +10,7 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
 export declare const RadioRoot: {
   <Value>(props: RadioRoot.Props<Value>): React.JSX.Element;
 };
-export interface RadioRootState extends FieldRoot.State {
+export interface RadioRootState extends FieldRootState {
   /**
    * Whether the radio button is currently selected.
    */
@@ -28,7 +28,7 @@ export interface RadioRootState extends FieldRoot.State {
    */
   required: boolean;
 }
-export interface RadioRootProps<Value = any> extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRoot.State>, 'value'> {
+export interface RadioRootProps<Value = any> extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRootState>, 'value'> {
   /**
    * The unique identifying value of the radio in a group.
    */

package/esm/radio/root/RadioRoot.js

@@ -18,6 +18,7 @@ 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";
@@ -37,10 +38,12 @@ 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,
+    style,
     ...elementProps
   } = componentProps;
   const groupContext = useRadioGroupContext();
@@ -48,6 +51,7 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
     disabled: disabledGroup,
     readOnly: readOnlyGroup,
     required: requiredGroup,
+    form: formGroup,
     checkedValue,
     touched = false,
     validation,
@@ -73,6 +77,7 @@ 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 form = formGroup;
   const checked = groupContext ? checkedValue === value : value === '';
   const serializedValue = React.useMemo(() => serializeValue(value), [value]);
   const radioRef = React.useRef(null);
@@ -109,12 +114,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) {
@@ -153,6 +159,7 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
   const inputProps = {
     type: 'radio',
     ref: mergedInputRef,
+    form,
     id: hiddenInputId,
     name,
     tabIndex: -1,
@@ -210,12 +217,14 @@ export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(compon
       tag: "span",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: refs,
       props: props,
       stateAttributesMapping: stateAttributesMapping
     }) : element, /*#__PURE__*/_jsx("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

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";
 /**
@@ -12,7 +12,7 @@ import { REASONS } from "../utils/reasons.js";
 export declare const RadioGroup: {
   <Value>(props: RadioGroup.Props<Value>): React.JSX.Element;
 };
-export interface RadioGroupState extends FieldRoot.State {
+export interface RadioGroupState extends FieldRootState {
   /**
    * Whether the user should be unable to select a different radio button in the group.
    */
@@ -22,7 +22,7 @@ export interface RadioGroupState extends FieldRoot.State {
    */
   required: boolean;
 }
-export interface RadioGroupProps<Value = any> 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
@@ -42,6 +42,11 @@ export interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the radio inputs.
+   * Useful when the radio group is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The controlled value of the radio item that should be currently selected.
    *

package/esm/radio-group/RadioGroup.js

@@ -7,8 +7,8 @@ import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { contains } from "../floating-ui-react/utils.js";
 import { SHIFT } from "../composite/composite.js";
 import { CompositeRoot } from "../composite/root/CompositeRoot.js";
-import { useField } from "../field/useField.js";
 import { useFieldRootContext } from "../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../field/root/useRegisterFieldControl.js";
 import { fieldValidityMapping } from "../field/utils/constants.js";
 import { useFieldsetRootContext } from "../fieldset/root/FieldsetRootContext.js";
 import { useFormContext } from "../form/FormContext.js";
@@ -34,9 +34,11 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     onValueChange: onValueChangeProp,
     value: externalValue,
     defaultValue,
+    form,
     name: nameProp,
     inputRef: inputRefProp,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -119,13 +121,11 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     }
     return undefined;
   });
-  useField({
+  const getFieldValue = useStableCallback(() => checkedValue ?? null);
+  useRegisterFieldControl(controlRef, {
     id,
-    commit: validation.commit,
     value: checkedValue,
-    controlRef,
-    name,
-    getValue: () => checkedValue ?? null
+    getValue: getFieldValue
   });
   useValueChanged(checkedValue, () => {
     clearErrors(name);
@@ -153,6 +153,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     ...fieldState,
     checkedValue,
     disabled,
+    form,
     validation,
     name,
     onValueChange,
@@ -163,7 +164,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     setCheckedValue,
     setTouched,
     touched
-  }), [checkedValue, disabled, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
+  }), [checkedValue, disabled, form, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
   const defaultProps = {
     role: 'radiogroup',
     'aria-required': required || undefined,
@@ -195,6 +196,7 @@ export const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(comp
     children: /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       props: [defaultProps, validation.getValidationProps, elementProps],
       refs: [forwardedRef],

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

@@ -6,6 +6,7 @@ export interface RadioGroupContext<Value> {
   disabled: boolean | undefined;
   readOnly: boolean | undefined;
   required: boolean | undefined;
+  form: string | undefined;
   name: string | undefined;
   checkedValue: Value | undefined;
   setCheckedValue: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;

package/esm/scroll-area/content/ScrollAreaContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
+import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A container for the content of the scroll area.
  * Renders a `<div>` element.
@@ -8,8 +8,8 @@ import type { ScrollAreaRoot } from "../root/ScrollAreaRoot.js";
  * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
  */
 export declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface ScrollAreaContentState extends ScrollAreaRoot.State {}
-export interface ScrollAreaContentProps extends BaseUIComponentProps<'div', ScrollAreaContent.State> {}
+export interface ScrollAreaContentState extends ScrollAreaRootState {}
+export interface ScrollAreaContentProps extends BaseUIComponentProps<'div', ScrollAreaContentState> {}
 export declare namespace ScrollAreaContent {
   type State = ScrollAreaContentState;
   type Props = ScrollAreaContentProps;

package/esm/scroll-area/content/ScrollAreaContent.js

@@ -16,6 +16,7 @@ export const ScrollAreaContent = /*#__PURE__*/React.forwardRef(function ScrollAr
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const contentWrapperRef = React.useRef(null);

package/esm/scroll-area/corner/ScrollAreaCorner.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaCornerState {}
-export interface ScrollAreaCornerProps extends BaseUIComponentProps<'div', ScrollAreaCorner.State> {}
+export interface ScrollAreaCornerProps extends BaseUIComponentProps<'div', ScrollAreaCornerState> {}
 export declare namespace ScrollAreaCorner {
   type State = ScrollAreaCornerState;
   type Props = ScrollAreaCornerProps;