@base-ui/react 1.2.0 → 1.3.0

package/esm/number-field/root/NumberFieldRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { ChangeEventCustomProperties } from "../utils/types.js";
 import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -43,7 +43,7 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
    * Specify `step="any"` to always disable step validation.
    * @default 1
    */
-  step?: (number | 'any') | undefined;
+  step?: number | 'any' | undefined;
   /**
    * The large step value of the input element when incrementing while the shift key is held. Snaps
    * to multiples of this value.
@@ -72,7 +72,7 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
   /**
    * The raw numeric value of the field.
    */
-  value?: (number | null) | undefined;
+  value?: number | null | undefined;
   /**
    * The uncontrolled value of the field when it’s initially rendered.
    *
@@ -129,7 +129,7 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
    */
   inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
-export interface NumberFieldRootState extends FieldRoot.State {
+export interface NumberFieldRootState extends FieldRootState {
   /**
    * The raw numeric value of the field.
    */

package/esm/number-field/root/NumberFieldRoot.js

@@ -259,7 +259,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       isPressedRef.current = false;
       stopAutoChange();
       const committed = lastChangedValueRef.current ?? valueRef.current;
-      const commitReason = isIncrement ? 'increment' : 'decrement';
+      const commitReason = isIncrement ? REASONS.incrementPress : REASONS.decrementPress;
       onValueCommitted(committed, createGenericEventDetails(commitReason, event));
     }, {
       once: true

package/esm/number-field/root/NumberFieldRootContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Timeout } from '@base-ui/utils/useTimeout';
-import type { NumberFieldRoot } from "./NumberFieldRoot.js";
+import type { NumberFieldRoot, NumberFieldRootState } from "./NumberFieldRoot.js";
 import { EventWithOptionalKeyState } from "../utils/types.js";
 import type { IncrementValueParameters } from "../utils/types.js";
 export type InputMode = 'numeric' | 'decimal' | 'text';
@@ -37,7 +37,7 @@ export interface NumberFieldRootContext {
   locale: Intl.LocalesArgument;
   isScrubbing: boolean;
   setIsScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
-  state: NumberFieldRoot.State;
+  state: NumberFieldRootState;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
 }
 export declare const NumberFieldRootContext: React.Context<NumberFieldRootContext | undefined>;

package/esm/number-field/root/useNumberFieldButton.d.ts

@@ -3,7 +3,7 @@ import type { Timeout } from '@base-ui/utils/useTimeout';
 import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.js";
 import type { NumberFieldRoot } from "./NumberFieldRoot.js";
 import type { HTMLProps } from "../../utils/types.js";
-export declare function useNumberFieldButton(params: useNumberFieldButton.Parameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export declare function useNumberFieldButton(params: UseNumberFieldButtonParameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export interface UseNumberFieldButtonParameters {
   allowInputSyncRef: React.RefObject<boolean | null>;
   disabled: boolean;
@@ -29,7 +29,4 @@ export interface UseNumberFieldButtonParameters {
 export interface UseNumberFieldButtonReturnValue {
   props: HTMLProps;
 }
-export declare namespace useNumberFieldButton {
-  type Parameters = UseNumberFieldButtonParameters;
-  type ReturnValue = UseNumberFieldButtonReturnValue;
-}
+export interface UseNumberFieldButtonState {}

package/esm/number-field/scrub-area/NumberFieldScrubArea.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * An interactive area where the user can click and drag to change the field value.
  * Renders a `<span>` element.
@@ -8,13 +8,13 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldScrubArea: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface NumberFieldScrubAreaState extends NumberFieldRoot.State {}
-export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubArea.State> {
+export interface NumberFieldScrubAreaState extends NumberFieldRootState {}
+export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaState> {
   /**
    * Cursor movement direction in the scrub area.
    * @default 'horizontal'
    */
-  direction?: ('horizontal' | 'vertical') | undefined;
+  direction?: 'horizontal' | 'vertical' | undefined;
   /**
    * Determines how many pixels the cursor must move before the value changes.
    * A higher value will make scrubbing less sensitive.

package/esm/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
  * Renders a `<span>` element.
@@ -11,8 +11,8 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface NumberFieldScrubAreaCursorState extends NumberFieldRoot.State {}
-export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursor.State> {}
+export interface NumberFieldScrubAreaCursorState extends NumberFieldRootState {}
+export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursorState> {}
 export declare namespace NumberFieldScrubAreaCursor {
   type State = NumberFieldScrubAreaCursorState;
   type Props = NumberFieldScrubAreaCursorProps;

package/esm/number-field/utils/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
-export declare const stateAttributesMapping: StateAttributesMapping<NumberFieldRoot.State>;
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
+export declare const stateAttributesMapping: StateAttributesMapping<NumberFieldRootState>;

package/esm/number-field/utils/types.d.ts

@@ -5,9 +5,9 @@ export interface ChangeEventCustomProperties {
 }
 export interface IncrementValueParameters {
   direction: Direction;
-  event?: (Event | React.SyntheticEvent) | undefined;
+  event?: Event | React.SyntheticEvent | undefined;
   reason: DirectionalChangeReason;
-  currentValue?: (number | null) | undefined;
+  currentValue?: number | null | undefined;
 }
 export interface EventWithOptionalKeyState {
   altKey?: boolean | undefined;

package/esm/popover/arrow/PopoverArrow.d.ts

@@ -13,11 +13,20 @@ export interface PopoverArrowState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface PopoverArrowProps extends BaseUIComponentProps<'div', PopoverArrow.State> {}
+export interface PopoverArrowProps extends BaseUIComponentProps<'div', PopoverArrowState> {}
 export declare namespace PopoverArrow {
   type State = PopoverArrowState;
   type Props = PopoverArrowProps;

package/esm/popover/backdrop/PopoverBackdrop.d.ts

@@ -13,9 +13,12 @@ export interface PopoverBackdropState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PopoverBackdropProps extends BaseUIComponentProps<'div', PopoverBackdrop.State> {}
+export interface PopoverBackdropProps extends BaseUIComponentProps<'div', PopoverBackdropState> {}
 export declare namespace PopoverBackdrop {
   type State = PopoverBackdropState;
   type Props = PopoverBackdropProps;

package/esm/popover/close/PopoverClose.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  */
 export declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface PopoverCloseState {}
-export interface PopoverCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', PopoverClose.State> {}
+export interface PopoverCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', PopoverCloseState> {}
 export declare namespace PopoverClose {
   type State = PopoverCloseState;
   type Props = PopoverCloseProps;

package/esm/popover/close/PopoverClose.js

@@ -6,6 +6,7 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useButton } from "../../use-button/index.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
+import { useClosePartRegistration } from "../../utils/closePart.js";
 
 /**
  * A button that closes the popover.
@@ -13,14 +14,14 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(props, forwardedRef) {
+export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(componentProps, forwardedRef) {
   const {
     render,
     className,
     disabled = false,
     nativeButton = true,
     ...elementProps
-  } = props;
+  } = componentProps;
   const {
     buttonRef,
     getButtonProps
@@ -32,7 +33,8 @@ export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(
   const {
     store
   } = usePopoverRootContext();
-  const element = useRenderElement('button', props, {
+  useClosePartRegistration();
+  const element = useRenderElement('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     props: [{
       onClick(event) {

package/esm/popover/description/PopoverDescription.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export interface PopoverDescriptionState {}
-export interface PopoverDescriptionProps extends BaseUIComponentProps<'p', PopoverDescription.State> {}
+export interface PopoverDescriptionProps extends BaseUIComponentProps<'p', PopoverDescriptionState> {}
 export declare namespace PopoverDescription {
   type State = PopoverDescriptionState;
   type Props = PopoverDescriptionProps;

package/esm/popover/popup/PopoverPopup.d.ts

@@ -15,12 +15,24 @@ export interface PopoverPopupState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'click' | undefined;
 }
-export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPopup.State> {
+export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPopupState> {
   /**
    * Determines the element to focus when the popover is opened.
    *
@@ -30,7 +42,7 @@ export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPo
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null) | undefined;
   /**
    * Determines the element to focus when the popover is closed.
    *
@@ -40,7 +52,7 @@ export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPo
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null)) | undefined;
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null) | undefined;
 }
 export declare namespace PopoverPopup {
   type State = PopoverPopupState;

package/esm/popover/popup/PopoverPopup.js

@@ -13,6 +13,7 @@ import { REASONS } from "../../utils/reasons.js";
 import { COMPOSITE_KEYS } from "../../composite/composite.js";
 import { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+import { ClosePartProvider, useClosePartCount } from "../../utils/closePart.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...baseMapping,
@@ -38,6 +39,10 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
   } = usePopoverRootContext();
   const positioner = usePopoverPositionerContext();
   const insideToolbar = useToolbarRootContext(true) != null;
+  const {
+    context: closePartContext,
+    hasClosePart
+  } = useClosePartCount();
   const open = store.useState('open');
   const openMethod = store.useState('openMethod');
   const instantType = store.useState('instantType');
@@ -84,6 +89,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     instant: instantType,
     transitionStatus
   };
+  const focusManagerModal = modal !== false && hasClosePart;
   const setPopupElement = React.useCallback(element => {
     store.set('popupElement', element);
   }, [store]);
@@ -104,7 +110,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
   return /*#__PURE__*/_jsx(FloatingFocusManager, {
     context: floatingContext,
     openInteractionType: openMethod,
-    modal: modal === 'trap-focus',
+    modal: focusManagerModal,
     disabled: !mounted || openReason === REASONS.triggerHover,
     initialFocus: resolvedInitialFocus,
     returnFocus: finalFocus,
@@ -112,7 +118,10 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     previousFocusableElement: isHTMLElement(activeTriggerElement) ? activeTriggerElement : undefined,
     nextFocusableElement: store.context.triggerFocusTargetRef,
     beforeContentFocusGuardRef: store.context.beforeContentFocusGuardRef,
-    children: element
+    children: /*#__PURE__*/_jsx(ClosePartProvider, {
+      value: closePartContext,
+      children: element
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") PopoverPopup.displayName = "PopoverPopup";

package/esm/popover/portal/PopoverPortal.d.ts

@@ -8,10 +8,8 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
 export declare const PopoverPortal: React.ForwardRefExoticComponent<Omit<PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace PopoverPortal {
-  interface State {}
-}
-export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortal.State> {
+export interface PopoverPortalState {}
+export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -19,5 +17,6 @@ export interface PopoverPortalProps extends FloatingPortal.Props<PopoverPortal.S
   keepMounted?: boolean | undefined;
 }
 export declare namespace PopoverPortal {
+  type State = PopoverPortalState;
   type Props = PopoverPortalProps;
 }

package/esm/popover/positioner/PopoverPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAnchorPositioning, type Side, type Align } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popover against the trigger.
@@ -13,15 +13,24 @@ export interface PopoverPositionerState {
    * Whether the popover is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
   /**
    * Whether CSS transitions should be disabled.
    */
   instant: string | undefined;
 }
-export interface PopoverPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', PopoverPositioner.State> {}
+export interface PopoverPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', PopoverPositionerState> {}
 export declare namespace PopoverPositioner {
   type State = PopoverPositionerState;
   type Props = PopoverPositionerProps;

package/esm/popover/root/PopoverRoot.d.ts

@@ -44,20 +44,27 @@ export interface PopoverRootProps<Payload = unknown> {
    * - `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * - `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+   *
+   * When `modal` is `true`, focus trapping is enabled only if `<Popover.Close>` is rendered
+   * inside `<Popover.Popup>`. It can be visually hidden with your own CSS if needed, such as
+   * Tailwind's `sr-only` utility.
+   *
+   * When `modal` is `'trap-focus'`, render `<Popover.Close>` inside `<Popover.Popup>` so touch
+   * screen readers can escape the popup.
    * @default false
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * ID of the trigger that the popover is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled popover.
    * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
    */
-  triggerId?: (string | null) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the popover is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
   /**
    * A handle to associate the popover with a trigger.
    * If specified, allows external triggers to control the popover's open state.

package/esm/popover/root/PopoverRoot.js

@@ -52,8 +52,7 @@ function PopoverRootComponent({
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const {
     openMethod,
-    triggerProps: interactionTypeTriggerProps,
-    reset: resetOpenInteractionType
+    triggerProps: interactionTypeTriggerProps
   } = useOpenInteractionType(open);
   useImplicitActiveTrigger(store);
   const {
@@ -63,7 +62,6 @@ function PopoverRootComponent({
       stickIfOpen: true,
       openChangeReason: null
     });
-    resetOpenInteractionType();
   });
   useScrollLock(open && modal === true && openReason !== REASONS.triggerHover && openMethod !== 'touch', positionerElement);
   React.useEffect(() => {

package/esm/popover/title/PopoverTitle.d.ts

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export interface PopoverTitleState {}
-export interface PopoverTitleProps extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', PopoverTitle.State> {}
+export interface PopoverTitleProps extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', PopoverTitleState> {}
 export declare namespace PopoverTitle {
   type State = PopoverTitleState;
   type Props = PopoverTitleProps;

package/esm/popover/viewport/PopoverViewport.d.ts

@@ -9,22 +9,26 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
 export declare const PopoverViewport: React.ForwardRefExoticComponent<Omit<PopoverViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+  /**
+   * Present if animations should be instant.
+   */
+  instant: 'dismiss' | 'click' | undefined;
+}
 export declare namespace PopoverViewport {
-  interface Props extends BaseUIComponentProps<'div', State> {
+  interface Props extends BaseUIComponentProps<'div', PopoverViewportState> {
     /**
      * The content to render inside the transition container.
      */
     children?: React.ReactNode;
   }
-  interface State {
-    activationDirection: string | undefined;
-    /**
-     * Whether the viewport is currently transitioning between contents.
-     */
-    transitioning: boolean;
-    /**
-     * Present if animations should be instant.
-     */
-    instant: 'dismiss' | 'click' | undefined;
-  }
+  type State = PopoverViewportState;
 }

package/esm/preview-card/arrow/PreviewCardArrow.d.ts

@@ -13,11 +13,20 @@ export interface PreviewCardArrowState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface PreviewCardArrowProps extends BaseUIComponentProps<'div', PreviewCardArrow.State> {}
+export interface PreviewCardArrowProps extends BaseUIComponentProps<'div', PreviewCardArrowState> {}
 export declare namespace PreviewCardArrow {
   type State = PreviewCardArrowState;
   type Props = PreviewCardArrowProps;

package/esm/preview-card/backdrop/PreviewCardBackdrop.d.ts

@@ -13,9 +13,12 @@ export interface PreviewCardBackdropState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PreviewCardBackdropProps extends BaseUIComponentProps<'div', PreviewCardBackdrop.State> {}
+export interface PreviewCardBackdropProps extends BaseUIComponentProps<'div', PreviewCardBackdropState> {}
 export declare namespace PreviewCardBackdrop {
   type State = PreviewCardBackdropState;
   type Props = PreviewCardBackdropProps;

package/esm/preview-card/popup/PreviewCardPopup.d.ts

@@ -14,12 +14,24 @@ export interface PreviewCardPopupState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'focus' | undefined;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopup.State> {}
+export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopupState> {}
 export declare namespace PreviewCardPopup {
   type State = PreviewCardPopupState;
   type Props = PreviewCardPopupProps;

package/esm/preview-card/portal/PreviewCardPortal.d.ts

@@ -8,10 +8,8 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
 export declare const PreviewCardPortal: React.ForwardRefExoticComponent<Omit<PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace PreviewCardPortal {
-  interface State {}
-}
-export interface PreviewCardPortalProps extends FloatingPortalLite.Props<PreviewCardPortal.State> {
+export interface PreviewCardPortalState {}
+export interface PreviewCardPortalProps extends FloatingPortalLite.Props<PreviewCardPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -19,5 +17,6 @@ export interface PreviewCardPortalProps extends FloatingPortalLite.Props<Preview
   keepMounted?: boolean | undefined;
 }
 export declare namespace PreviewCardPortal {
+  type State = PreviewCardPortalState;
   type Props = PreviewCardPortalProps;
 }

package/esm/preview-card/positioner/PreviewCardPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popup against the trigger.
@@ -13,12 +13,24 @@ export interface PreviewCardPositionerState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'focus' | undefined;
 }
-export interface PreviewCardPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', PreviewCardPositioner.State> {}
+export interface PreviewCardPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', PreviewCardPositionerState> {}
 export declare namespace PreviewCardPositioner {
   type State = PreviewCardPositionerState;
   type Props = PreviewCardPositionerProps;

package/esm/preview-card/positioner/PreviewCardPositioner.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { PreviewCardPositionerContext } from "./PreviewCardPositionerContext.js";
+import { FloatingNode, useFloatingNodeId } from "../../floating-ui-react/index.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { usePreviewCardPortalContext } from "../portal/PreviewCardPortalContext.js";
@@ -38,6 +39,7 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
   } = componentProps;
   const store = usePreviewCardRootContext();
   const keepMounted = usePreviewCardPortalContext();
+  const nodeId = useFloatingNodeId();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const floatingRootContext = store.useState('floatingRootContext');
@@ -59,6 +61,7 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
     sticky,
     disableAnchorTracking,
     keepMounted,
+    nodeId,
     collisionAvoidance,
     adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
   });
@@ -98,7 +101,10 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
   });
   return /*#__PURE__*/_jsx(PreviewCardPositionerContext.Provider, {
     value: contextValue,
-    children: element
+    children: /*#__PURE__*/_jsx(FloatingNode, {
+      id: nodeId,
+      children: element
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") PreviewCardPositioner.displayName = "PreviewCardPositioner";