@base-ui/react 1.4.0 → 1.5.0

package/preview-card/viewport/PreviewCardViewport.js

@@ -9,7 +9,7 @@ exports.PreviewCardViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _PreviewCardPositionerContext = require("../positioner/PreviewCardPositionerContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _PreviewCardViewportCssVars = require("./PreviewCardViewportCssVars");
 var _usePopupViewport = require("../../utils/usePopupViewport");
 const stateAttributesMapping = {
@@ -20,8 +20,8 @@ const stateAttributesMapping = {
 
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)

package/preview-card/viewport/PreviewCardViewportDataAttributes.d.ts

@@ -11,7 +11,7 @@ export declare enum PreviewCardViewportDataAttributes {
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   activationDirection = "data-activation-direction",
   /**
@@ -20,7 +20,7 @@ export declare enum PreviewCardViewportDataAttributes {
   transitioning = "data-transitioning",
   /**
    * Present if animations should be instant.
-   * @type {'delay' | 'dismiss' | 'focus'}
+   * @type {'dismiss' | 'focus'}
    */
   instant = "data-instant",
 }

package/preview-card/viewport/PreviewCardViewportDataAttributes.js

@@ -17,7 +17,7 @@ let PreviewCardViewportDataAttributes = exports.PreviewCardViewportDataAttribute
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   PreviewCardViewportDataAttributes["activationDirection"] = "data-activation-direction";
   /**
@@ -26,7 +26,7 @@ let PreviewCardViewportDataAttributes = exports.PreviewCardViewportDataAttribute
   PreviewCardViewportDataAttributes["transitioning"] = "data-transitioning";
   /**
    * Present if animations should be instant.
-   * @type {'delay' | 'dismiss' | 'focus'}
+   * @type {'dismiss' | 'focus'}
    */
   PreviewCardViewportDataAttributes["instant"] = "data-instant";
   return PreviewCardViewportDataAttributes;

package/progress/indicator/ProgressIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ProgressRootState } from "../root/ProgressRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Visualizes the completion status of the task.
  * Renders a `<div>` element.

package/progress/indicator/ProgressIndicator.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _valueToPercent = require("../../utils/valueToPercent");
 var _ProgressRootContext = require("../root/ProgressRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
@@ -31,21 +31,16 @@ const ProgressIndicator = exports.ProgressIndicator = /*#__PURE__*/React.forward
     state
   } = (0, _ProgressRootContext.useProgressRootContext)();
   const percentageValue = Number.isFinite(value) && value !== null ? (0, _valueToPercent.valueToPercent)(value, min, max) : null;
-  const getStyles = React.useCallback(() => {
-    if (percentageValue == null) {
-      return {};
-    }
-    return {
-      insetInlineStart: 0,
-      height: 'inherit',
-      width: `${percentageValue}%`
-    };
-  }, [percentageValue]);
+  const indicatorStyle = percentageValue == null ? {} : {
+    insetInlineStart: 0,
+    height: 'inherit',
+    width: `${percentageValue}%`
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,
     props: [{
-      style: getStyles()
+      style: indicatorStyle
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.progressStateAttributesMapping
   });

package/progress/label/ProgressLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ProgressRootState } from "../root/ProgressRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An accessible label for the progress bar.
  * Renders a `<span>` element.

package/progress/label/ProgressLabel.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _useRegisteredLabelId = require("../../utils/useRegisteredLabelId");
 var _ProgressRootContext = require("../root/ProgressRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");

package/progress/root/ProgressRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups all parts of the progress bar and provides the task completion status to screen readers.
  * Renders a `<div>` element.
@@ -16,7 +16,7 @@ export interface ProgressRootState {
 }
 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.
+   * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar.
    */
   'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
   /**

package/progress/root/ProgressRoot.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _formatNumber = require("../../utils/formatNumber");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ProgressRootContext = require("./ProgressRootContext");
 var _stateAttributesMapping = require("./stateAttributesMapping");
 var _jsxRuntime = require("react/jsx-runtime");

package/progress/root/stateAttributesMapping.d.ts

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

package/progress/track/ProgressTrack.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ProgressRootState } from "../root/ProgressRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Contains the progress bar indicator.
  * Renders a `<div>` element.

package/progress/track/ProgressTrack.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressTrack = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ProgressRootContext = require("../root/ProgressRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 /**

package/progress/value/ProgressValue.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ProgressRootState } from "../root/ProgressRoot.js";
 /**
  * A text label displaying the current value.

package/progress/value/ProgressValue.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressValue = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ProgressRootContext = require("../root/ProgressRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 /**

package/radio/indicator/RadioIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * Indicates whether the radio button is selected.
  * Renders a `<span>` element.

package/radio/indicator/RadioIndicator.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RadioIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _RadioRootContext = require("../root/RadioRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
 /**
  * Indicates whether the radio button is selected.
  * Renders a `<span>` element.

package/radio/indicator/RadioIndicatorDataAttributes.d.ts

@@ -28,11 +28,11 @@ export declare enum RadioIndicatorDataAttributes {
    */
   endingStyle = "data-ending-style",
   /**
-   * Present when the radio is in valid state (when wrapped in Field.Root).
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the radio is in invalid state (when wrapped in Field.Root).
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/radio/indicator/RadioIndicatorDataAttributes.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadioIndicatorDataAttributes = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let RadioIndicatorDataAttributes = exports.RadioIndicatorDataAttributes = function (RadioIndicatorDataAttributes) {
   /**
    * Present when the radio is checked.
@@ -35,11 +35,11 @@ let RadioIndicatorDataAttributes = exports.RadioIndicatorDataAttributes = functi
    */
   RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   /**
-   * Present when the radio is in valid state (when wrapped in Field.Root).
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
    */
   RadioIndicatorDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the radio is in invalid state (when wrapped in Field.Root).
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
    */
   RadioIndicatorDataAttributes["invalid"] = "data-invalid";
   /**

package/radio/root/RadioRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
 /**
  * Represents the radio button itself.

package/radio/root/RadioRoot.js

@@ -11,23 +11,24 @@ var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _constants = require("../../utils/constants");
-var _noop = require("../../utils/noop");
+var _empty = require("@base-ui/utils/empty");
+var _owner = require("@base-ui/utils/owner");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _noop = require("../../internals/noop");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useButton = require("../../use-button");
-var _constants2 = require("../../composite/constants");
-var _CompositeItem = require("../../composite/item/CompositeItem");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useButton = require("../../internals/use-button");
+var _constants = require("../../internals/composite/constants");
+var _CompositeItem = require("../../internals/composite/item/CompositeItem");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
 var _FieldItemContext = require("../../field/item/FieldItemContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
-var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../internals/labelable-provider/useAriaLabelledBy");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _RadioGroupContext = require("../../radio-group/RadioGroupContext");
-var _serializeValue = require("../../utils/serializeValue");
+var _serializeValue = require("../../internals/serializeValue");
 var _RadioRootContext = require("./RadioRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -84,7 +85,6 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   const required = requiredGroup || requiredProp;
   const form = formGroup;
   const checked = groupContext ? checkedValue === value : value === '';
-  const serializedValue = React.useMemo(() => (0, _serializeValue.serializeValue)(value), [value]);
   const radioRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const handleControlRef = (0, _useStableCallback.useStableCallback)(element => {
@@ -126,7 +126,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     'aria-required': required || undefined,
     'aria-readonly': readOnly || undefined,
     'aria-labelledby': ariaLabelledBy,
-    [_constants2.ACTIVE_COMPOSITE_ITEM]: checked ? '' : undefined,
+    [_constants.ACTIVE_COMPOSITE_ITEM]: checked ? '' : undefined,
     id: nativeButton ? inputId : id,
     onKeyDown(event) {
       if (event.key === 'Enter') {
@@ -138,7 +138,11 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
         return;
       }
       event.preventDefault();
-      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.dispatchEvent(new ((0, _owner.ownerWindow)(input).PointerEvent)('click', {
         bubbles: true,
         shiftKey: event.shiftKey,
         ctrlKey: event.ctrlKey,
@@ -171,8 +175,8 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     'aria-hidden': true,
     ...(value !== undefined ? {
-      value: serializedValue
-    } : _constants.EMPTY_OBJECT),
+      value: (0, _serializeValue.serializeValue)(value)
+    } : _empty.EMPTY_OBJECT),
     disabled,
     checked,
     required,
@@ -208,7 +212,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   const contextValue = state;
   const isRadioGroup = groupContext !== undefined;
   const refs = [forwardedRef, radioRef, buttonRef, handleControlRef];
-  const props = [rootProps, getDescriptionProps, validation?.getValidationProps ?? _constants.EMPTY_OBJECT, elementProps, getButtonProps];
+  const props = [rootProps, getDescriptionProps, validation?.getValidationProps ?? _empty.EMPTY_OBJECT, elementProps, getButtonProps];
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     enabled: !isRadioGroup,
     state,

package/radio/root/RadioRootDataAttributes.d.ts

@@ -20,11 +20,11 @@ export declare enum RadioRootDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the radio is in valid state (when wrapped in Field.Root).
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the radio is in invalid state (when wrapped in Field.Root).
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/radio/root/RadioRootDataAttributes.js

@@ -26,11 +26,11 @@ let RadioRootDataAttributes = exports.RadioRootDataAttributes = /*#__PURE__*/fun
    */
   RadioRootDataAttributes["required"] = "data-required";
   /**
-   * Present when the radio is in valid state (when wrapped in Field.Root).
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
    */
   RadioRootDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the radio is in invalid state (when wrapped in Field.Root).
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
    */
   RadioRootDataAttributes["invalid"] = "data-invalid";
   /**

package/radio/utils/stateAttributesMapping.d.ts

@@ -1,4 +1,4 @@
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 export declare const stateAttributesMapping: {
   valid(value: boolean | null): Record<string, string> | null;
   transitionStatus(value: TransitionStatus): Record<string, string> | null;

package/radio/utils/stateAttributesMapping.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stateAttributesMapping = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _constants = require("../../field/utils/constants");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _constants = require("../../internals/field-constants/constants");
 var _RadioRootDataAttributes = require("../root/RadioRootDataAttributes");
 const stateAttributesMapping = exports.stateAttributesMapping = {
   checked(value) {

package/radio-group/RadioGroup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../utils/types.js";
+import type { BaseUIComponentProps } from "../internals/types.js";
 import type { FieldRootState } from "../field/root/FieldRoot.js";
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../utils/reasons.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../internals/reasons.js";
 /**
  * Provides a shared state to a series of radio buttons.
  * Renders a `<div>` element.

package/radio-group/RadioGroup.js

@@ -9,17 +9,17 @@ exports.RadioGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useBaseUiId = require("../utils/useBaseUiId");
+var _useBaseUiId = require("../internals/useBaseUiId");
 var _utils = require("../floating-ui-react/utils");
-var _composite = require("../composite/composite");
-var _CompositeRoot = require("../composite/root/CompositeRoot");
-var _FieldRootContext = require("../field/root/FieldRootContext");
-var _useRegisterFieldControl = require("../field/root/useRegisterFieldControl");
-var _constants = require("../field/utils/constants");
+var _composite = require("../internals/composite/composite");
+var _CompositeRoot = require("../internals/composite/root/CompositeRoot");
+var _FieldRootContext = require("../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../internals/field-register-control/useRegisterFieldControl");
+var _constants = require("../internals/field-constants/constants");
 var _FieldsetRootContext = require("../fieldset/root/FieldsetRootContext");
-var _FormContext = require("../form/FormContext");
-var _LabelableContext = require("../labelable-provider/LabelableContext");
-var _useValueChanged = require("../utils/useValueChanged");
+var _FormContext = require("../internals/form-context/FormContext");
+var _LabelableContext = require("../internals/labelable-provider/LabelableContext");
+var _useValueChanged = require("../internals/useValueChanged");
 var _RadioGroupContext = require("./RadioGroupContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const MODIFIER_KEYS = [_composite.SHIFT];
@@ -76,9 +76,9 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     name: 'RadioGroup',
     state: 'value'
   });
-  const onValueChange = (0, _useStableCallback.useStableCallback)(onValueChangeProp);
+  const [touched, setTouched] = React.useState(false);
   const setCheckedValue = (0, _useStableCallback.useStableCallback)((value, eventDetails) => {
-    onValueChange(value, eventDetails);
+    onValueChangeProp?.(value, eventDetails);
     if (eventDetails.isCanceled) {
       return;
     }
@@ -127,12 +127,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     }
     return undefined;
   });
-  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => checkedValue ?? null);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
-    id,
-    value: checkedValue,
-    getValue: getFieldValue
-  });
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, id, checkedValue ?? null);
   (0, _useValueChanged.useValueChanged)(checkedValue, () => {
     clearErrors(name);
     setDirty(checkedValue !== validityData.initialValue);
@@ -147,7 +142,6 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
       setInputRef(fallbackInput);
     }
   });
-  const [touched, setTouched] = React.useState(false);
   const ariaLabelledby = elementProps['aria-labelledby'] ?? labelId ?? fieldsetContext?.legendId;
   const state = {
     ...fieldState,
@@ -162,7 +156,6 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     form,
     validation,
     name,
-    onValueChange,
     readOnly,
     registerControlRef,
     registerInputRef,
@@ -170,7 +163,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     setCheckedValue,
     setTouched,
     touched
-  }), [checkedValue, disabled, form, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
+  }), [checkedValue, disabled, form, validation, fieldState, name, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
   const defaultProps = {
     role: 'radiogroup',
     'aria-required': required || undefined,

package/radio-group/RadioGroupContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { UseFieldValidationReturnValue } from "../field/root/useFieldValidation.js";
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import type { BaseUIEventReasons } from "../utils/reasons.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import type { BaseUIEventReasons } from "../internals/reasons.js";
 export interface RadioGroupContext<Value> {
   disabled: boolean | undefined;
   readOnly: boolean | undefined;
@@ -10,7 +10,6 @@ export interface RadioGroupContext<Value> {
   name: string | undefined;
   checkedValue: Value | undefined;
   setCheckedValue: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
-  onValueChange: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   touched: boolean;
   setTouched: React.Dispatch<React.SetStateAction<boolean>>;
   validation?: UseFieldValidationReturnValue | undefined;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ScrollAreaRootState } from "../root/ScrollAreaRoot.js";
 /**
  * A container for the content of the scroll area.

package/scroll-area/content/ScrollAreaContent.js

@@ -9,7 +9,7 @@ exports.ScrollAreaContent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _ScrollAreaViewportContext = require("../viewport/ScrollAreaViewportContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
 var _stateAttributes = require("../root/stateAttributes");
 /**
@@ -25,19 +25,19 @@ const ScrollAreaContent = exports.ScrollAreaContent = /*#__PURE__*/React.forward
     style,
     ...elementProps
   } = componentProps;
-  const contentWrapperRef = React.useRef(null);
   const {
     computeThumbPosition
   } = (0, _ScrollAreaViewportContext.useScrollAreaViewportContext)();
   const {
     viewportState
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
+  const contentWrapperRef = React.useRef(null);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
     let hasInitialized = false;
-    const ro = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(() => {
       // ResizeObserver fires once upon observing, so we skip the initial call
       // to avoid double-calculating the thumb position on mount.
       if (!hasInitialized) {
@@ -47,10 +47,10 @@ const ScrollAreaContent = exports.ScrollAreaContent = /*#__PURE__*/React.forward
       computeThumbPosition();
     });
     if (contentWrapperRef.current) {
-      ro.observe(contentWrapperRef.current);
+      resizeObserver.observe(contentWrapperRef.current);
     }
     return () => {
-      ro.disconnect();
+      resizeObserver.disconnect();
     };
   }, [computeThumbPosition]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
  * Renders a `<div>` element.

package/scroll-area/corner/ScrollAreaCorner.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ScrollAreaCorner = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _ScrollAreaRootContext = require("../root/ScrollAreaRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
  * Renders a `<div>` element.

package/scroll-area/root/ScrollAreaRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 declare const DEFAULT_COORDS: {
   x: number;
   y: number;

package/scroll-area/root/ScrollAreaRoot.js

@@ -10,16 +10,16 @@ var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _ScrollAreaRootContext = require("./ScrollAreaRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ScrollAreaRootCssVars = require("./ScrollAreaRootCssVars");
 var _constants = require("../constants");
 var _getOffset = require("../utils/getOffset");
 var _ScrollAreaScrollbarDataAttributes = require("../scrollbar/ScrollAreaScrollbarDataAttributes");
 var _styles = require("../../utils/styles");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _stateAttributes = require("./stateAttributes");
 var _utils = require("../../floating-ui-react/utils");
-var _CSPContext = require("../../csp-provider/CSPContext");
+var _CSPContext = require("../../internals/csp-context/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_COORDS = {
   x: 0,

package/scroll-area/root/stateAttributes.d.ts

@@ -1,3 +1,3 @@
-import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
 import type { ScrollAreaRootState } from "./ScrollAreaRoot.js";
 export declare const scrollAreaStateAttributesMapping: StateAttributesMapping<ScrollAreaRootState>;