@base-ui/react 1.1.0 → 1.2.0

package/progress/root/ProgressRoot.js

@@ -13,17 +13,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _ProgressRootContext = require("./ProgressRootContext");
 var _stateAttributesMapping = require("./stateAttributesMapping");
 var _jsxRuntime = require("react/jsx-runtime");
-function formatValue(value, locale, format) {
-  if (value == null) {
-    return '';
-  }
-  if (!format) {
-    return (0, _formatNumber.formatNumber)(value / 100, locale, {
-      style: 'percent'
-    });
-  }
-  return (0, _formatNumber.formatNumber)(value, locale, format);
-}
 function getDefaultAriaValueText(formattedValue, value) {
   if (value == null) {
     return 'indeterminate progress';
@@ -55,7 +44,7 @@ const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(functi
   if (Number.isFinite(value)) {
     status = value === max ? 'complete' : 'progressing';
   }
-  const formattedValue = formatValue(value, locale, formatOptionsRef.current);
+  const formattedValue = (0, _formatNumber.formatNumberValue)(value, locale, formatOptionsRef.current);
   const state = React.useMemo(() => ({
     status
   }), [status]);

package/progress/value/ProgressValue.d.ts

@@ -9,7 +9,7 @@ import type { ProgressRoot } from "../root/ProgressRoot.js";
  */
 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);
+  children?: (null | ((formattedValue: string | null, value: number | null) => React.ReactNode)) | undefined;
 }
 export declare namespace ProgressValue {
   type Props = ProgressValueProps;

package/radio/indicator/RadioIndicator.d.ts

@@ -13,7 +13,7 @@ export interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioI
    * 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 {
   /**

package/radio/indicator/RadioIndicator.js

@@ -28,17 +28,17 @@ const RadioIndicator = exports.RadioIndicator = /*#__PURE__*/React.forwardRef(fu
   const rootState = (0, _RadioRootContext.useRadioRootContext)();
   const rendered = rootState.checked;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.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 = (0, _useRenderElement.useRenderElement)('span', componentProps, {
-    enabled: shouldRender,
     ref: [forwardedRef, indicatorRef],
     state,
     props: elementProps,

package/radio/root/RadioRoot.d.ts

@@ -7,30 +7,50 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
  *
  * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
  */
-export declare const RadioRoot: React.ForwardRefExoticComponent<Omit<RadioRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const RadioRoot: {
+  <Value>(props: RadioRoot.Props<Value>): React.JSX.Element;
+};
 export interface RadioRootState extends FieldRoot.State {
-  /** Whether the radio button is currently selected. */
+  /**
+   * 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', RadioRoot.State>, '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/radio/root/RadioRoot.js

@@ -9,6 +9,7 @@ exports.RadioRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 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");
@@ -25,6 +26,7 @@ var _FieldItemContext = require("../../field/item/FieldItemContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _RadioGroupContext = require("../../radio-group/RadioGroupContext");
+var _serializeValue = require("../../utils/serializeValue");
 var _RadioRootContext = require("./RadioRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -46,18 +48,20 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     id: idProp,
     ...elementProps
   } = componentProps;
+  const groupContext = (0, _RadioGroupContext.useRadioGroupContext)();
   const {
     disabled: disabledGroup,
     readOnly: readOnlyGroup,
     required: requiredGroup,
     checkedValue,
-    setCheckedValue,
-    touched,
-    setTouched,
+    touched = false,
     validation,
-    registerControlRef,
     name
-  } = (0, _RadioGroupContext.useRadioGroupContext)();
+  } = groupContext ?? {};
+  const setCheckedValue = groupContext?.setCheckedValue ?? _noop.NOOP;
+  const setTouched = groupContext?.setTouched ?? _noop.NOOP;
+  const registerControlRef = groupContext?.registerControlRef ?? _noop.NOOP;
+  const registerInputRef = groupContext?.registerInputRef ?? _noop.NOOP;
   const {
     setDirty,
     validityData,
@@ -74,15 +78,35 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   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(() => (0, _serializeValue.serializeValue)(value), [value]);
   const radioRef = React.useRef(null);
   const inputRef = React.useRef(null);
-  const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, inputRef);
+  const handleControlRef = (0, _useStableCallback.useStableCallback)(element => {
+    if (!element) {
+      return;
+    }
+    registerControlRef(element, disabled);
+  });
+  const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, inputRef, registerInputRef);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (inputRef.current?.checked) {
       setFilled(true);
     }
   }, [setFilled]);
+  (0, _useIsoLayoutEffect.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 = (0, _useBaseUiId.useBaseUiId)();
   const inputId = (0, _useLabelableId.useLabelableId)({
     id: idProp,
@@ -108,7 +132,13 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
         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) {
@@ -129,9 +159,13 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     type: 'radio',
     ref: mergedInputRef,
     id: hiddenInputId,
+    name,
     tabIndex: -1,
     style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     'aria-hidden': true,
+    ...(value !== undefined ? {
+      value: serializedValue
+    } : _constants.EMPTY_OBJECT),
     disabled,
     checked,
     required,
@@ -164,9 +198,9 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     readOnly,
     checked
   }), [fieldState, disabled, readOnly, checked, required]);
-  const contextValue = React.useMemo(() => state, [state]);
-  const isRadioGroup = setCheckedValue !== _noop.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 ?? _constants.EMPTY_OBJECT, elementProps, getButtonProps];
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     enabled: !isRadioGroup,

package/radio-group/RadioGroup.d.ts

@@ -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 declare const RadioGroup: {
+  <Value>(props: RadioGroup.Props<Value>): React.JSX.Element;
+};
 export interface RadioGroupState extends FieldRoot.State {
   /**
    * 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', RadioGroup.State>, '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;
 }

package/radio-group/RadioGroup.js

@@ -8,10 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
-var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
-var _noop = require("../utils/noop");
 var _useBaseUiId = require("../utils/useBaseUiId");
 var _utils = require("../floating-ui-react/utils");
 var _composite = require("../composite/composite");
@@ -22,7 +19,6 @@ var _constants = require("../field/utils/constants");
 var _FieldsetRootContext = require("../fieldset/root/FieldsetRootContext");
 var _FormContext = require("../form/FormContext");
 var _LabelableContext = require("../labelable-provider/LabelableContext");
-var _mergeProps = require("../merge-props");
 var _useValueChanged = require("../utils/useValueChanged");
 var _RadioGroupContext = require("./RadioGroupContext");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -87,11 +83,48 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     setCheckedValueUnwrapped(value);
   });
   const controlRef = React.useRef(null);
-  const registerControlRef = (0, _useStableCallback.useStableCallback)(element => {
-    if (controlRef.current == null && element != null) {
+  const groupInputRef = React.useRef(null);
+  const firstEnabledInputRef = React.useRef(null);
+  function setInputRef(hiddenInput) {
+    let cleanup = undefined;
+    if (inputRefProp) {
+      if (typeof inputRefProp === 'function') {
+        cleanup = inputRefProp(hiddenInput);
+      } else {
+        inputRefProp.current = hiddenInput;
+      }
+    }
+    groupInputRef.current = hiddenInput;
+    validation.inputRef.current = hiddenInput;
+    return cleanup;
+  }
+  const registerControlRef = (0, _useStableCallback.useStableCallback)((element, isDisabled = false) => {
+    if (!element) {
+      return;
+    }
+    if (isDisabled) {
+      if (controlRef.current === element) {
+        controlRef.current = null;
+      }
+      return;
+    }
+    if (controlRef.current == null) {
       controlRef.current = element;
     }
   });
+  const registerInputRef = (0, _useStableCallback.useStableCallback)(input => {
+    if (!input || input.disabled) {
+      return undefined;
+    }
+    if (!firstEnabledInputRef.current) {
+      firstEnabledInputRef.current = input;
+    }
+    const currentInput = groupInputRef.current;
+    if (input.checked || currentInput == null || currentInput.disabled) {
+      return setInputRef(input);
+    }
+    return undefined;
+  });
   (0, _useField.useField)({
     id,
     commit: validation.commit,
@@ -109,58 +142,19 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     } else {
       validation.commit(checkedValue, true);
     }
-  });
-  const [touched, setTouched] = React.useState(false);
-  const onBlur = (0, _useStableCallback.useStableCallback)(event => {
-    if (!(0, _utils.contains)(event.currentTarget, event.relatedTarget)) {
-      setFieldTouched(true);
-      setFocused(false);
-      if (validationMode === 'onBlur') {
-        validation.commit(checkedValue);
-      }
+    const fallbackInput = firstEnabledInputRef.current;
+    if (checkedValue == null && fallbackInput && !fallbackInput.disabled) {
+      setInputRef(fallbackInput);
     }
   });
-  const onKeyDownCapture = (0, _useStableCallback.useStableCallback)(event => {
-    if (event.key.startsWith('Arrow')) {
-      setFieldTouched(true);
-      setTouched(true);
-      setFocused(true);
-    }
-  });
-  const serializedCheckedValue = React.useMemo(() => {
-    if (checkedValue == null) {
-      return ''; // avoid uncontrolled -> controlled error
-    }
-    if (typeof checkedValue === 'string') {
-      return checkedValue;
-    }
-    return JSON.stringify(checkedValue);
-  }, [checkedValue]);
-  const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(validation.inputRef, inputRefProp);
-  const inputProps = (0, _mergeProps.mergeProps)({
-    value: serializedCheckedValue,
-    ref: mergedInputRef,
-    id,
-    name: serializedCheckedValue ? name : undefined,
-    disabled,
-    readOnly,
-    required,
-    'aria-labelledby': elementProps['aria-labelledby'] ?? fieldsetContext?.legendId,
-    'aria-hidden': true,
-    tabIndex: -1,
-    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
-    onChange: _noop.NOOP,
-    // suppress a Next.js error
-    onFocus() {
-      controlRef.current?.focus();
-    }
-  }, validation.getInputValidationProps);
-  const state = React.useMemo(() => ({
+  const [touched, setTouched] = React.useState(false);
+  const ariaLabelledby = elementProps['aria-labelledby'] ?? labelId ?? fieldsetContext?.legendId;
+  const state = {
     ...fieldState,
     disabled: disabled ?? false,
     required: required ?? false,
     readOnly: readOnly ?? false
-  }), [fieldState, disabled, readOnly, required]);
+  };
   const contextValue = React.useMemo(() => ({
     ...fieldState,
     checkedValue,
@@ -170,26 +164,41 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     onValueChange,
     readOnly,
     registerControlRef,
+    registerInputRef,
     required,
     setCheckedValue,
     setTouched,
     touched
-  }), [checkedValue, disabled, validation, fieldState, name, onValueChange, readOnly, registerControlRef, required, setCheckedValue, setTouched, touched]);
+  }), [checkedValue, disabled, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
   const defaultProps = {
     role: 'radiogroup',
     'aria-required': required || undefined,
     'aria-disabled': disabled || undefined,
     'aria-readonly': readOnly || undefined,
-    'aria-labelledby': labelId,
+    'aria-labelledby': ariaLabelledby,
     onFocus() {
       setFocused(true);
     },
-    onBlur,
-    onKeyDownCapture
+    onBlur(event) {
+      if (!(0, _utils.contains)(event.currentTarget, event.relatedTarget)) {
+        setFieldTouched(true);
+        setFocused(false);
+        if (validationMode === 'onBlur') {
+          validation.commit(checkedValue);
+        }
+      }
+    },
+    onKeyDownCapture(event) {
+      if (event.key.startsWith('Arrow')) {
+        setFieldTouched(true);
+        setTouched(true);
+        setFocused(true);
+      }
+    }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_RadioGroupContext.RadioGroupContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.RadioGroupContext.Provider, {
     value: contextValue,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
       state: state,
@@ -198,9 +207,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
       stateAttributesMapping: _constants.fieldValidityMapping,
       enableHomeAndEndKeys: false,
       modifierKeys: MODIFIER_KEYS
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...inputProps
-    })]
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") RadioGroup.displayName = "RadioGroup";

package/radio-group/RadioGroupContext.d.ts

@@ -2,18 +2,19 @@ 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";
-export interface RadioGroupContext {
+export interface RadioGroupContext<Value> {
   disabled: boolean | undefined;
   readOnly: boolean | undefined;
   required: boolean | undefined;
   name: string | undefined;
-  checkedValue: unknown;
-  setCheckedValue: (value: unknown, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
-  onValueChange: (value: unknown, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
+  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;
-  registerControlRef: (element: HTMLElement | null) => void;
+  validation?: UseFieldValidationReturnValue | undefined;
+  registerControlRef: (element: HTMLElement | null, disabled?: boolean) => void;
+  registerInputRef: (element: HTMLInputElement | null) => void;
 }
-export declare const RadioGroupContext: React.Context<RadioGroupContext>;
-export declare function useRadioGroupContext(): RadioGroupContext;
+export declare const RadioGroupContext: React.Context<RadioGroupContext<any> | undefined>;
+export declare function useRadioGroupContext(): RadioGroupContext<any> | undefined;

package/radio-group/RadioGroupContext.js

@@ -8,19 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadioGroupContext = void 0;
 exports.useRadioGroupContext = useRadioGroupContext;
 var React = _interopRequireWildcard(require("react"));
-var _noop = require("../utils/noop");
-const RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/React.createContext({
-  disabled: undefined,
-  readOnly: undefined,
-  required: undefined,
-  name: undefined,
-  checkedValue: '',
-  setCheckedValue: _noop.NOOP,
-  onValueChange: _noop.NOOP,
-  touched: false,
-  setTouched: _noop.NOOP,
-  registerControlRef: _noop.NOOP
-});
+const RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") RadioGroupContext.displayName = "RadioGroupContext";
 function useRadioGroupContext() {
   return React.useContext(RadioGroupContext);

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

@@ -31,6 +31,8 @@ export type Coords = typeof DEFAULT_COORDS;
  */
 export declare const ScrollAreaRoot: React.ForwardRefExoticComponent<Omit<ScrollAreaRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ScrollAreaRootState {
+  /** Whether the scroll area is being scrolled. */
+  scrolling: boolean;
   /** Whether horizontal overflow is present. */
   hasOverflowX: boolean;
   /** Whether vertical overflow is present. */
@@ -52,12 +54,12 @@ export interface ScrollAreaRootProps extends BaseUIComponentProps<'div', ScrollA
    * Accepts a single number for all edges or an object to configure them individually.
    * @default 0
    */
-  overflowEdgeThreshold?: number | Partial<{
+  overflowEdgeThreshold?: (number | Partial<{
     xStart: number;
     xEnd: number;
     yStart: number;
     yEnd: number;
-  }>;
+  }>) | undefined;
 }
 export declare namespace ScrollAreaRoot {
   type State = ScrollAreaRootState;

package/scroll-area/root/ScrollAreaRoot.js

@@ -178,6 +178,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     }
   }
   const state = React.useMemo(() => ({
+    scrolling: scrollingX || scrollingY,
     hasOverflowX: !hiddenState.x,
     hasOverflowY: !hiddenState.y,
     overflowXStart: overflowEdges.xStart,
@@ -185,7 +186,7 @@ const ScrollAreaRoot = exports.ScrollAreaRoot = /*#__PURE__*/React.forwardRef(fu
     overflowYStart: overflowEdges.yStart,
     overflowYEnd: overflowEdges.yEnd,
     cornerHidden: hiddenState.corner
-  }), [hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
+  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
   const props = {
     role: 'presentation',
     onPointerEnter: handlePointerEnterOrMove,

package/scroll-area/root/ScrollAreaRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

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

@@ -1,4 +1,8 @@
 export declare enum ScrollAreaRootDataAttributes {
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  scrolling = "data-scrolling",
   /**
    * Present when the scroll area content is wider than the viewport.
    */

package/scroll-area/root/ScrollAreaRootDataAttributes.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScrollAreaRootDataAttributes = void 0;
 let ScrollAreaRootDataAttributes = exports.ScrollAreaRootDataAttributes = /*#__PURE__*/function (ScrollAreaRootDataAttributes) {
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  ScrollAreaRootDataAttributes["scrolling"] = "data-scrolling";
   /**
    * Present when the scroll area content is wider than the viewport.
    */