@base-ui/react 1.4.0 → 1.5.0

package/esm/preview-card/store/PreviewCardStore.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
-import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js";
+import { InlineRectCoords, PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js";
 import { type PreviewCardRoot } from "../root/PreviewCardRoot.js";
 export type State<Payload> = PopupStoreState<Payload> & {
   instantType: 'dismiss' | 'focus' | undefined;
@@ -8,6 +8,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
 };
 export type Context = PopupStoreContext<PreviewCardRoot.ChangeEventDetails> & {
   closeDelayRef: React.RefObject<number>;
+  inlineRectCoordsRef: React.MutableRefObject<InlineRectCoords | undefined>;
 };
 declare const selectors: {
   instantType: (state: State<unknown>) => "focus" | "dismiss" | undefined;
@@ -16,8 +17,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -33,8 +36,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -50,8 +55,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -62,13 +69,15 @@ declare const selectors: {
     activeTriggerProps: import("../../index.js").HTMLProps;
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
-  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  }) => import("../../internals/useTransitionStatus.js").TransitionStatus;
   floatingRootContext: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -80,12 +89,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  triggerCount: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => number;
   preventUnmountingOnClose: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -101,8 +131,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -118,8 +150,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -135,8 +169,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -148,12 +184,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => Element | null;
+  popupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => string | undefined;
   isTriggerActive: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -169,8 +226,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -186,8 +245,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -203,8 +264,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -216,12 +279,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }, isActive: boolean) => import("../../index.js").HTMLProps;
+  triggerPopupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => string | undefined;
   popupProps: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -237,8 +321,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -254,8 +340,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -269,7 +357,7 @@ declare const selectors: {
   }) => HTMLElement | null;
 };
 export declare class PreviewCardStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
-  constructor(initialState?: Partial<State<Payload>>);
+  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
   setOpen: (nextOpen: boolean, eventDetails: Omit<PreviewCardRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
   static useStore<Payload>(externalStore: PreviewCardStore<Payload> | undefined, initialState?: Partial<State<Payload>>): PreviewCardStore<Payload>;
 }

package/esm/preview-card/store/PreviewCardStore.js

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createSelector, ReactStore } from '@base-ui/utils/store';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
-import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
-import { useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setOpenTriggerState, updateInlineRectCoords, usePopupStore } from "../../utils/popups/index.js";
+import { REASONS } from "../../internals/reasons.js";
 import { CLOSE_DELAY } from "../utils/constants.js";
 const selectors = {
   ...popupStoreSelectors,
@@ -12,17 +10,23 @@ const selectors = {
   hasViewport: createSelector(state => state.hasViewport)
 };
 export class PreviewCardStore extends ReactStore {
-  constructor(initialState) {
-    super({
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new PopupTriggerMap();
+    const state = {
       ...createInitialState(),
       ...initialState
-    }, {
+    };
+    state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+    super(state, {
       popupRef: /*#__PURE__*/React.createRef(),
       onOpenChange: undefined,
       onOpenChangeComplete: undefined,
-      triggerElements: new PopupTriggerMap(),
+      triggerElements,
       closeDelayRef: {
         current: CLOSE_DELAY
+      },
+      inlineRectCoordsRef: {
+        current: undefined
       }
     }, selectors);
   }
@@ -38,6 +42,10 @@ export class PreviewCardStore extends ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
+    const event = eventDetails.event;
+    if (nextOpen && isHover && eventDetails.trigger && 'clientX' in event && 'clientY' in event && this.context.inlineRectCoordsRef.current?.element !== eventDetails.trigger) {
+      updateInlineRectCoords(this.context.inlineRectCoordsRef, eventDetails.trigger, event.clientX, event.clientY);
+    }
     this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const changeState = () => {
       const updatedState = {
@@ -50,14 +58,7 @@ export class PreviewCardStore extends ReactStore {
       } else if (reason === REASONS.triggerHover) {
         updatedState.instantType = undefined;
       }
-
-      // If a popup is closing, the `trigger` may be null.
-      // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-      const newTriggerId = eventDetails.trigger?.id ?? null;
-      if (newTriggerId || nextOpen) {
-        updatedState.activeTriggerId = newTriggerId;
-        updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-      }
+      setOpenTriggerState(updatedState, nextOpen, eventDetails.trigger);
       this.update(updatedState);
     };
     if (isHover) {
@@ -69,23 +70,10 @@ export class PreviewCardStore extends ReactStore {
     }
   };
   static useStore(externalStore, initialState) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const internalStore = useRefWithInit(() => {
-      return new PreviewCardStore(initialState);
-    }).current;
-    const store = externalStore ?? internalStore;
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const floatingRootContext = useSyncedFloatingRootContext({
-      popupStore: store,
-      onOpenChange: store.setOpen
-    });
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const store = usePopupStore(externalStore, (floatingId, nested) => new PreviewCardStore(initialState, floatingId, nested)).store;
+    /* eslint-enable react-hooks/rules-of-hooks */
 
-    // It's safe to set this here because when this code runs for the first time,
-    // nothing has had a chance to subscribe to the `store` yet.
-    // For subsequent renders, the `floatingRootContext` reference remains the same,
-    // so it's basically a no-op.
-    store.state.floatingRootContext = floatingRootContext;
     return store;
   }
 }

package/esm/preview-card/trigger/PreviewCardTrigger.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 { PreviewCardHandle } from "../store/PreviewCardHandle.js";
 /**
  * A link that opens the preview card.

package/esm/preview-card/trigger/PreviewCardTrigger.js

@@ -2,12 +2,13 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
+import { fastComponentRef } from '@base-ui/utils/fastHooks';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useTriggerDataForwarding } from "../../utils/popups/index.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { getInlineRectTriggerProps, useTriggerDataForwarding } from "../../utils/popups/index.js";
 import { CLOSE_DELAY, OPEN_DELAY } from "../utils/constants.js";
 import { safePolygon, useFocus, useHoverReferenceInteraction } from "../../floating-ui-react/index.js";
 
@@ -17,7 +18,7 @@ import { safePolygon, useFocus, useHoverReferenceInteraction } from "../../float
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function PreviewCardTrigger(componentProps, forwardedRef) {
+export const PreviewCardTrigger = fastComponentRef(function PreviewCardTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -38,6 +39,7 @@ export const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function Preview
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
+  const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
   const triggerElementRef = React.useRef(null);
   const delayWithDefault = delay ?? OPEN_DELAY;
   const closeDelayWithDefault = closeDelay ?? CLOSE_DELAY;
@@ -71,10 +73,11 @@ export const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function Preview
     open: isOpenedByThisTrigger
   };
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const inlineRectTriggerProps = getInlineRectTriggerProps(inlineRectCoordsRef, isOpenedByThisTrigger);
   const element = useRenderElement('a', componentProps, {
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
-    props: [hoverProps, focusProps.reference, rootTriggerProps, {
+    props: [hoverProps, focusProps.reference, rootTriggerProps, inlineRectTriggerProps, {
       id: thisTriggerId
     }, elementProps],
     stateAttributesMapping: triggerOpenStateMapping

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/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.
+ * 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/esm/preview-card/viewport/PreviewCardViewport.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { usePreviewCardPositionerContext } from "../positioner/PreviewCardPositionerContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { PreviewCardViewportCssVars } from "./PreviewCardViewportCssVars.js";
 import { usePopupViewport } from "../../utils/usePopupViewport.js";
 const stateAttributesMapping = {
@@ -14,8 +14,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/esm/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/esm/preview-card/viewport/PreviewCardViewportDataAttributes.js

@@ -11,7 +11,7 @@ export let PreviewCardViewportDataAttributes = /*#__PURE__*/function (PreviewCar
    * 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";
   /**
@@ -20,7 +20,7 @@ export let PreviewCardViewportDataAttributes = /*#__PURE__*/function (PreviewCar
   PreviewCardViewportDataAttributes["transitioning"] = "data-transitioning";
   /**
    * Present if animations should be instant.
-   * @type {'delay' | 'dismiss' | 'focus'}
+   * @type {'dismiss' | 'focus'}
    */
   PreviewCardViewportDataAttributes["instant"] = "data-instant";
   return PreviewCardViewportDataAttributes;

package/esm/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/esm/progress/indicator/ProgressIndicator.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { valueToPercent } from "../../utils/valueToPercent.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";
@@ -25,21 +25,16 @@ export const ProgressIndicator = /*#__PURE__*/React.forwardRef(function Progress
     state
   } = useProgressRootContext();
   const percentageValue = Number.isFinite(value) && value !== null ? 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 = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
     props: [{
-      style: getStyles()
+      style: indicatorStyle
     }, elementProps],
     stateAttributesMapping: progressStateAttributesMapping
   });

package/esm/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/esm/progress/label/ProgressLabel.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useRegisteredLabelId } from "../../utils/useRegisteredLabelId.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";

package/esm/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/esm/progress/root/ProgressRoot.js

@@ -4,7 +4,7 @@ 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 { useRenderElement } from "../../internals/useRenderElement.js";
 import { ProgressRootContext } from "./ProgressRootContext.js";
 import { progressStateAttributesMapping } from "./stateAttributesMapping.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";
 /**

package/esm/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/esm/progress/value/ProgressValue.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";
 /**

package/esm/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.