@base-ui/react 1.0.0-rc.2 → 1.1.0

package/preview-card/trigger/PreviewCardTrigger.js

@@ -2,15 +2,21 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PreviewCardTrigger = void 0;
+var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
+var _useBaseUiId = require("../../utils/useBaseUiId");
+var _popups = require("../../utils/popups");
+var _constants = require("../utils/constants");
+var _floatingUiReact = require("../../floating-ui-react");
 /**
  * A link that opens the preview card.
  * Renders an `<a>` element.
@@ -23,27 +29,58 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = /*#__PURE__*/React.forwa
     className,
     delay,
     closeDelay,
+    id: idProp,
+    payload,
+    handle,
     ...elementProps
   } = componentProps;
+  const rootContext = (0, _PreviewCardContext.usePreviewCardRootContext)(true);
+  const store = handle?.store ?? rootContext;
+  if (!store) {
+    throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <PreviewCard.Trigger> must be either used within a <PreviewCard.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(89));
+  }
+  const thisTriggerId = (0, _useBaseUiId.useBaseUiId)(idProp);
+  const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
+  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const floatingRootContext = store.useState('floatingRootContext');
+  const triggerElementRef = React.useRef(null);
+  const delayWithDefault = delay ?? _constants.OPEN_DELAY;
+  const closeDelayWithDefault = closeDelay ?? _constants.CLOSE_DELAY;
   const {
-    open,
-    triggerProps,
-    setTriggerElement,
-    writeDelayRefs
-  } = (0, _PreviewCardContext.usePreviewCardRootContext)();
+    registerTrigger,
+    isMountedByThisTrigger
+  } = (0, _popups.useTriggerDataForwarding)(thisTriggerId, triggerElementRef, store, {
+    payload
+  });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    writeDelayRefs({
-      delay,
-      closeDelay
-    });
+    if (isMountedByThisTrigger) {
+      store.context.closeDelayRef.current = closeDelayWithDefault;
+    }
+  }, [store, isMountedByThisTrigger, closeDelayWithDefault]);
+  const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(floatingRootContext, {
+    mouseOnly: true,
+    move: false,
+    handleClose: (0, _floatingUiReact.safePolygon)(),
+    delay: () => ({
+      open: delayWithDefault,
+      close: closeDelayWithDefault
+    }),
+    triggerElementRef,
+    isActiveTrigger: isTriggerActive
+  });
+  const focusProps = (0, _floatingUiReact.useFocus)(floatingRootContext, {
+    delay: delayWithDefault
   });
   const state = React.useMemo(() => ({
-    open
-  }), [open]);
+    open: isOpenedByThisTrigger
+  }), [isOpenedByThisTrigger]);
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const element = (0, _useRenderElement.useRenderElement)('a', componentProps, {
-    ref: [setTriggerElement, forwardedRef],
     state,
-    props: [triggerProps, elementProps],
+    ref: [forwardedRef, registerTrigger, triggerElementRef],
+    props: [hoverProps, focusProps.reference, rootTriggerProps, {
+      id: thisTriggerId
+    }, elementProps],
     stateAttributesMapping: _popupStateMapping.triggerOpenStateMapping
   });
   return element;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * 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.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+export declare const PreviewCardViewport: React.ForwardRefExoticComponent<Omit<PreviewCardViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare namespace PreviewCardViewport {
+  interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * The content to render inside the transition container.
+     */
+    children?: React.ReactNode;
+  }
+  interface State {
+    activationDirection?: string;
+  }
+}

package/preview-card/viewport/PreviewCardViewport.js

@@ -0,0 +1,278 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCardViewport = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _inertValue = require("@base-ui/utils/inertValue");
+var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
+var _usePreviousValue = require("@base-ui/utils/usePreviousValue");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _PreviewCardContext = require("../root/PreviewCardContext");
+var _PreviewCardPositionerContext = require("../positioner/PreviewCardPositionerContext");
+var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _PreviewCardViewportCssVars = require("./PreviewCardViewportCssVars");
+var _directionProvider = require("../../direction-provider");
+var _jsxRuntime = require("react/jsx-runtime");
+const stateAttributesMapping = {
+  activationDirection: value => value ? {
+    'data-activation-direction': value
+  } : null
+};
+
+/**
+ * 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.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+const PreviewCardViewport = exports.PreviewCardViewport = /*#__PURE__*/React.forwardRef(function PreviewCardViewport(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    children,
+    ...elementProps
+  } = componentProps;
+  const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
+  const positioner = (0, _PreviewCardPositionerContext.usePreviewCardPositionerContext)();
+  const direction = (0, _directionProvider.useDirection)();
+  const activeTrigger = store.useState('activeTriggerElement');
+  const activeTriggerId = store.useState('activeTriggerId');
+  const payload = store.useState('payload');
+  const open = store.useState('open');
+  const instantType = store.useState('instantType');
+  const mounted = store.useState('mounted');
+  const popupElement = store.useState('popupElement');
+  const positionerElement = store.useState('positionerElement');
+  const previousActiveTrigger = (0, _usePreviousValue.usePreviousValue)(open ? activeTrigger : null);
+  // Remount current content on trigger changes (and once more when payload lags) to avoid DOM reuse flashes.
+  // The key bumps immediately on trigger switches, then again if the payload arrives on a later render.
+  const currentContentKey = usePopupContentKey(activeTriggerId, payload);
+  const capturedNodeRef = React.useRef(null);
+  const [previousContentNode, setPreviousContentNode] = React.useState(null);
+  const [newTriggerOffset, setNewTriggerOffset] = React.useState(null);
+  const currentContainerRef = React.useRef(null);
+  const previousContainerRef = React.useRef(null);
+  const onAnimationsFinished = (0, _useAnimationsFinished.useAnimationsFinished)(currentContainerRef, true, false);
+  const cleanupFrame = (0, _useAnimationFrame.useAnimationFrame)();
+  const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
+  const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    store.set('hasViewport', true);
+    return () => {
+      store.set('hasViewport', false);
+    };
+  }, [store]);
+  const handleMeasureLayout = (0, _useStableCallback.useStableCallback)(() => {
+    currentContainerRef.current?.style.setProperty('animation', 'none');
+    currentContainerRef.current?.style.setProperty('transition', 'none');
+    previousContainerRef.current?.style.setProperty('display', 'none');
+  });
+  const handleMeasureLayoutComplete = (0, _useStableCallback.useStableCallback)(previousDimensions => {
+    currentContainerRef.current?.style.removeProperty('animation');
+    currentContainerRef.current?.style.removeProperty('transition');
+    previousContainerRef.current?.style.removeProperty('display');
+    if (previousDimensions) {
+      setPreviousContentDimensions(previousDimensions);
+    }
+  });
+  const lastHandledTriggerRef = React.useRef(null);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    // When a trigger changes, set the captured children HTML to state,
+    // so we can render both new and old content.
+    if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
+      setPreviousContentNode(capturedNodeRef.current);
+      setShowStartingStyleAttribute(true);
+
+      // Calculate the relative position between the previous and new trigger,
+      // so we can pass it to the style hook for animation purposes.
+      const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
+      setNewTriggerOffset(offset);
+      cleanupFrame.request(() => {
+        cleanupFrame.request(() => {
+          setShowStartingStyleAttribute(false);
+          onAnimationsFinished(() => {
+            setPreviousContentNode(null);
+            setPreviousContentDimensions(null);
+            capturedNodeRef.current = null;
+          });
+        });
+      });
+      lastHandledTriggerRef.current = activeTrigger;
+    }
+  }, [activeTrigger, previousActiveTrigger, previousContentNode, onAnimationsFinished, cleanupFrame]);
+
+  // Capture a clone of the current content DOM subtree when not transitioning.
+  // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    // When a transition is in progress, we store the next content in capturedNodeRef.
+    // This handles the case where the trigger changes multiple times before the transition finishes.
+    // We want to always capture the latest content for the previous snapshot.
+    // So clicking quickly on T1, T2, T3 will result in the following sequence:
+    // 1. T1 -> T2: previousContent = T1, currentContent = T2
+    // 2. T2 -> T3: previousContent = T2, currentContent = T3
+    const source = currentContainerRef.current;
+    if (!source) {
+      return;
+    }
+    const wrapper = document.createElement('div');
+    for (const child of Array.from(source.childNodes)) {
+      wrapper.appendChild(child.cloneNode(true));
+    }
+    capturedNodeRef.current = wrapper;
+  });
+  const isTransitioning = previousContentNode != null;
+  let childrenToRender;
+  if (!isTransitioning) {
+    childrenToRender = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-current": true,
+      ref: currentContainerRef,
+      children: children
+    }, currentContentKey);
+  } else {
+    childrenToRender = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-previous": true,
+        inert: (0, _inertValue.inertValue)(true),
+        ref: previousContainerRef,
+        style: {
+          [_PreviewCardViewportCssVars.PreviewCardViewportCssVars.popupWidth]: `${previousContentDimensions?.width}px`,
+          [_PreviewCardViewportCssVars.PreviewCardViewportCssVars.popupHeight]: `${previousContentDimensions?.height}px`,
+          position: 'absolute'
+        },
+        "data-ending-style": showStartingStyleAttribute ? undefined : ''
+      }, 'previous'), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        "data-current": true,
+        ref: currentContainerRef,
+        "data-starting-style": showStartingStyleAttribute ? '' : undefined,
+        children: children
+      }, currentContentKey)]
+    });
+  }
+
+  // When previousContentNode is present, imperatively populate the previous container with the cloned children.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const container = previousContainerRef.current;
+    if (!container || !previousContentNode) {
+      return;
+    }
+    container.replaceChildren(...Array.from(previousContentNode.childNodes));
+  }, [previousContentNode]);
+  (0, _usePopupAutoResize.usePopupAutoResize)({
+    popupElement,
+    positionerElement,
+    mounted,
+    content: payload,
+    onMeasureLayout: handleMeasureLayout,
+    onMeasureLayoutComplete: handleMeasureLayoutComplete,
+    side: positioner.side,
+    direction
+  });
+  const state = React.useMemo(() => {
+    return {
+      activationDirection: getActivationDirection(newTriggerOffset),
+      transitioning: isTransitioning,
+      instant: instantType
+    };
+  }, [newTriggerOffset, isTransitioning, instantType]);
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [elementProps, {
+      children: childrenToRender
+    }],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") PreviewCardViewport.displayName = "PreviewCardViewport";
+/**
+ * Returns a string describing the provided offset.
+ * It describes both the horizontal and vertical offset, separated by a space.
+ *
+ * @param offset
+ */
+function getActivationDirection(offset) {
+  if (!offset) {
+    return undefined;
+  }
+  return `${getValueWithTolerance(offset.horizontal, 5, 'right', 'left')} ${getValueWithTolerance(offset.vertical, 5, 'down', 'up')}`;
+}
+
+/**
+ * Returns a label describing the value (positive/negative) treating values
+ * within tolerance as zero.
+ *
+ * @param value Value to check
+ * @param tolerance Tolerance to treat the value as zero.
+ * @param positiveLabel
+ * @param negativeLabel
+ * @returns If 0 < abs(value) < tolerance, returns an empty string. Otherwise returns positiveLabel or negativeLabel.
+ */
+function getValueWithTolerance(value, tolerance, positiveLabel, negativeLabel) {
+  if (value > tolerance) {
+    return positiveLabel;
+  }
+  if (value < -tolerance) {
+    return negativeLabel;
+  }
+  return '';
+}
+
+/**
+ * Calculates the relative position between centers of two elements.
+ */
+function calculateRelativePosition(from, to) {
+  const fromRect = from.getBoundingClientRect();
+  const toRect = to.getBoundingClientRect();
+  const fromCenter = {
+    x: fromRect.left + fromRect.width / 2,
+    y: fromRect.top + fromRect.height / 2
+  };
+  const toCenter = {
+    x: toRect.left + toRect.width / 2,
+    y: toRect.top + toRect.height / 2
+  };
+  return {
+    horizontal: toCenter.x - fromCenter.x,
+    vertical: toCenter.y - fromCenter.y
+  };
+}
+
+/**
+ * Returns a key that forces remounting content when triggers change or a payload is updated.
+ */
+function usePopupContentKey(activeTriggerId, payload) {
+  const [contentKey, setContentKey] = React.useState(0);
+  const previousActiveTriggerIdRef = React.useRef(activeTriggerId);
+  const previousPayloadRef = React.useRef(payload);
+  const pendingPayloadUpdateRef = React.useRef(false);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    // Compare against the last committed values to decide whether we need a new DOM subtree.
+    const previousActiveTriggerId = previousActiveTriggerIdRef.current;
+    const previousPayload = previousPayloadRef.current;
+    const triggerIdChanged = activeTriggerId !== previousActiveTriggerId;
+    const payloadChanged = payload !== previousPayload;
+    if (triggerIdChanged) {
+      // Remount immediately on trigger change; remember if payload hasn't caught up yet.
+      setContentKey(value => value + 1);
+      pendingPayloadUpdateRef.current = !payloadChanged;
+    } else if (pendingPayloadUpdateRef.current && payloadChanged) {
+      // Payload arrived a render later, so remount once more to avoid reusing the old <img>.
+      setContentKey(value => value + 1);
+      pendingPayloadUpdateRef.current = false;
+    }
+
+    // Persist current values for the next render's comparison.
+    previousActiveTriggerIdRef.current = activeTriggerId;
+    previousPayloadRef.current = payload;
+  }, [activeTriggerId, payload]);
+  return `${activeTriggerId ?? 'current'}-${contentKey}`;
+}

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

@@ -0,0 +1,14 @@
+export declare enum PreviewCardViewportCssVars {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupWidth = "--popup-width",
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupHeight = "--popup-height",
+}

package/preview-card/viewport/PreviewCardViewportCssVars.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCardViewportCssVars = void 0;
+let PreviewCardViewportCssVars = exports.PreviewCardViewportCssVars = /*#__PURE__*/function (PreviewCardViewportCssVars) {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  PreviewCardViewportCssVars["popupWidth"] = "--popup-width";
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  PreviewCardViewportCssVars["popupHeight"] = "--popup-height";
+  return PreviewCardViewportCssVars;
+}({});

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

@@ -0,0 +1,26 @@
+export declare enum PreviewCardViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = "data-current",
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = "data-previous",
+  /**
+   * 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'}`}
+   */
+  activationDirection = "data-activation-direction",
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  transitioning = "data-transitioning",
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  instant = "data-instant",
+}

package/preview-card/viewport/PreviewCardViewportDataAttributes.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCardViewportDataAttributes = void 0;
+let PreviewCardViewportDataAttributes = exports.PreviewCardViewportDataAttributes = /*#__PURE__*/function (PreviewCardViewportDataAttributes) {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  PreviewCardViewportDataAttributes["current"] = "data-current";
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  PreviewCardViewportDataAttributes["previous"] = "data-previous";
+  /**
+   * 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'}`}
+   */
+  PreviewCardViewportDataAttributes["activationDirection"] = "data-activation-direction";
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  PreviewCardViewportDataAttributes["transitioning"] = "data-transitioning";
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  PreviewCardViewportDataAttributes["instant"] = "data-instant";
+  return PreviewCardViewportDataAttributes;
+}({});

package/progress/indicator/ProgressIndicator.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ProgressIndicatorProps extends BaseUIComponentProps<'div', ProgressRoot.State> {}
 export declare namespace ProgressIndicator {
   type Props = ProgressIndicatorProps;

package/progress/label/ProgressLabel.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressLabel: React.ForwardRefExoticComponent<ProgressLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ProgressLabel: React.ForwardRefExoticComponent<Omit<ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ProgressLabelProps extends BaseUIComponentProps<'span', ProgressRoot.State> {}
 export declare namespace ProgressLabel {
   type Props = ProgressLabelProps;

package/progress/root/ProgressRoot.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressRoot: React.ForwardRefExoticComponent<ProgressRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressRoot: React.ForwardRefExoticComponent<Omit<ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
 export interface ProgressRootState {
   status: ProgressStatus;

package/progress/track/ProgressTrack.d.ts

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

package/progress/value/ProgressValue.d.ts

@@ -7,7 +7,7 @@ import type { ProgressRoot } from "../root/ProgressRoot.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressValue: React.ForwardRefExoticComponent<ProgressValueProps & React.RefAttributes<HTMLSpanElement>>;
+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);
 }

package/radio/indicator/RadioIndicator.d.ts

@@ -7,7 +7,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<RadioIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioIndicator.State> {
   /**
    * Whether to keep the HTML element in the DOM when the radio button is inactive.

package/radio/root/RadioRoot.d.ts

@@ -7,7 +7,7 @@ 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<RadioRootProps & React.RefAttributes<HTMLElement>>;
+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. */
   checked: boolean;

package/radio/root/RadioRoot.js

@@ -55,7 +55,8 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     touched,
     setTouched,
     validation,
-    registerControlRef
+    registerControlRef,
+    name
   } = (0, _RadioGroupContext.useRadioGroupContext)();
   const {
     setDirty,
@@ -88,16 +89,15 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     implicit: false,
     controlRef: radioRef
   });
+  const hiddenInputId = nativeButton ? undefined : inputId;
   const rootProps = {
     role: 'radio',
     'aria-checked': checked,
     'aria-required': required || undefined,
-    'aria-disabled': disabled || undefined,
     'aria-readonly': readOnly || undefined,
     'aria-labelledby': labelId,
     [_constants2.ACTIVE_COMPOSITE_ITEM]: checked ? '' : undefined,
-    id,
-    disabled,
+    id: nativeButton ? inputId : id,
     onKeyDown(event) {
       if (event.key === 'Enter') {
         event.preventDefault();
@@ -125,12 +125,12 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     disabled,
     native: nativeButton
   });
-  const inputProps = React.useMemo(() => ({
+  const inputProps = {
     type: 'radio',
     ref: mergedInputRef,
-    id: inputId,
+    id: hiddenInputId,
     tabIndex: -1,
-    style: _visuallyHidden.visuallyHidden,
+    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     'aria-hidden': true,
     disabled,
     checked,
@@ -156,7 +156,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     onFocus() {
       radioRef.current?.focus();
     }
-  }), [checked, disabled, inputId, mergedInputRef, readOnly, required, setCheckedValue, setDirty, setFieldTouched, setFilled, validityData.initialValue, value]);
+  };
   const state = React.useMemo(() => ({
     ...fieldState,
     required,

package/radio-group/RadioGroup.d.ts

@@ -9,7 +9,7 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Radio Group](https://base-ui.com/react/components/radio)
  */
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface RadioGroupState extends FieldRoot.State {
   /**
    * Whether the user should be unable to select a different radio button in the group.
@@ -41,17 +41,17 @@ export interface RadioGroupProps extends Omit<BaseUIComponentProps<'div', RadioG
    *
    * To render an uncontrolled radio group, use the `defaultValue` prop instead.
    */
-  value?: unknown;
+  value?: any;
   /**
    * The uncontrolled value of the radio button that should be initially selected.
    *
    * To render a controlled radio group, use the `value` prop instead.
    */
-  defaultValue?: unknown;
+  defaultValue?: any;
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: (value: unknown, eventDetails: RadioGroup.ChangeEventDetails) => void;
+  onValueChange?: (value: any, eventDetails: RadioGroup.ChangeEventDetails) => void;
   /**
    * A ref to access the hidden input element.
    */

package/radio-group/RadioGroup.js

@@ -148,7 +148,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     'aria-labelledby': elementProps['aria-labelledby'] ?? fieldsetContext?.legendId,
     'aria-hidden': true,
     tabIndex: -1,
-    style: _visuallyHidden.visuallyHidden,
+    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     onChange: _noop.NOOP,
     // suppress a Next.js error
     onFocus() {