@base-ui/react 1.0.0 → 1.2.0

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

@@ -0,0 +1,276 @@
+import * as React from 'react';
+import { ReactStore } from '@base-ui/utils/store';
+import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js";
+import { type PreviewCardRoot } from "../root/PreviewCardRoot.js";
+export type State<Payload> = PopupStoreState<Payload> & {
+  instantType: 'dismiss' | 'focus' | undefined;
+  hasViewport: boolean;
+};
+export type Context = PopupStoreContext<PreviewCardRoot.ChangeEventDetails> & {
+  closeDelayRef: React.RefObject<number>;
+};
+declare const selectors: {
+  instantType: (state: State<unknown>) => "focus" | "dismiss" | undefined;
+  hasViewport: (state: State<unknown>) => boolean;
+  open: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => boolean;
+  mounted: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => boolean;
+  transitionStatus: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  floatingRootContext: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  preventUnmountingOnClose: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => boolean;
+  payload: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => unknown;
+  activeTriggerId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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 | null;
+  activeTriggerElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => Element | null;
+  isTriggerActive: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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) => boolean;
+  isOpenedByTrigger: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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) => boolean;
+  isMountedByTrigger: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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) => boolean;
+  triggerProps: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }, isActive: boolean) => import("../../index.js").HTMLProps;
+  popupProps: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => import("../../index.js").HTMLProps;
+  popupElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => HTMLElement | null;
+  positionerElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    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;
+  }) => HTMLElement | null;
+};
+export declare class PreviewCardStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
+  constructor(initialState?: Partial<State<Payload>>);
+  setOpen: (nextOpen: boolean, eventDetails: Omit<PreviewCardRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
+  static useStore<Payload>(externalStore: PreviewCardStore<Payload> | undefined, initialState?: Partial<State<Payload>>): PreviewCardStore<Payload>;
+}
+export {};

package/preview-card/store/PreviewCardStore.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCardStore = void 0;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _store = require("@base-ui/utils/store");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
+var _popups = require("../../utils/popups");
+var _floatingUiReact = require("../../floating-ui-react");
+var _reasons = require("../../utils/reasons");
+var _constants = require("../utils/constants");
+const selectors = {
+  ..._popups.popupStoreSelectors,
+  instantType: (0, _store.createSelector)(state => state.instantType),
+  hasViewport: (0, _store.createSelector)(state => state.hasViewport)
+};
+class PreviewCardStore extends _store.ReactStore {
+  constructor(initialState) {
+    super({
+      ...createInitialState(),
+      ...initialState
+    }, {
+      popupRef: /*#__PURE__*/React.createRef(),
+      onOpenChange: undefined,
+      onOpenChangeComplete: undefined,
+      triggerElements: new _popups.PopupTriggerMap(),
+      closeDelayRef: {
+        current: _constants.CLOSE_DELAY
+      }
+    }, selectors);
+  }
+  setOpen = (nextOpen, eventDetails) => {
+    const reason = eventDetails.reason;
+    const isHover = reason === _reasons.REASONS.triggerHover;
+    const isFocusOpen = nextOpen && reason === _reasons.REASONS.triggerFocus;
+    const isDismissClose = !nextOpen && (reason === _reasons.REASONS.triggerPress || reason === _reasons.REASONS.escapeKey);
+    eventDetails.preventUnmountOnClose = () => {
+      this.set('preventUnmountingOnClose', true);
+    };
+    this.context.onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    const changeState = () => {
+      const updatedState = {
+        open: nextOpen
+      };
+      if (isFocusOpen) {
+        updatedState.instantType = 'focus';
+      } else if (isDismissClose) {
+        updatedState.instantType = 'dismiss';
+      } else if (reason === _reasons.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;
+      }
+      this.update(updatedState);
+    };
+    if (isHover) {
+      // If a hover reason is provided, we need to flush the state synchronously. This ensures
+      // `node.getAnimations()` knows about the new state.
+      ReactDOM.flushSync(changeState);
+    } else {
+      changeState();
+    }
+  };
+  static useStore(externalStore, initialState) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const internalStore = (0, _useRefWithInit.useRefWithInit)(() => {
+      return new PreviewCardStore(initialState);
+    }).current;
+    const store = externalStore ?? internalStore;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
+      popupStore: store,
+      onOpenChange: store.setOpen
+    });
+
+    // 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;
+  }
+}
+exports.PreviewCardStore = PreviewCardStore;
+function createInitialState() {
+  return {
+    ...(0, _popups.createInitialPopupStoreState)(),
+    instantType: undefined,
+    hasViewport: false
+  };
+}

package/preview-card/trigger/PreviewCardTrigger.d.ts

@@ -1,31 +1,43 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
+import { PreviewCardHandle } from "../store/PreviewCardHandle.js";
 /**
  * A link that opens the preview card.
  * Renders an `<a>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export declare const PreviewCardTrigger: React.ForwardRefExoticComponent<PreviewCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const PreviewCardTrigger: PreviewCardTrigger;
+export interface PreviewCardTrigger {
+  <Payload>(componentProps: PreviewCardTrigger.Props<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+}
 export interface PreviewCardTriggerState {
   /**
    * Whether the preview card is currently open.
    */
   open: boolean;
 }
-export interface PreviewCardTriggerProps extends BaseUIComponentProps<'a', PreviewCardTrigger.State> {
+export interface PreviewCardTriggerProps<Payload = unknown> extends BaseUIComponentProps<'a', PreviewCardTrigger.State> {
+  /**
+   * A handle to associate the trigger with a preview card.
+   */
+  handle?: PreviewCardHandle<Payload> | undefined;
+  /**
+   * A payload to pass to the preview card when it is opened.
+   */
+  payload?: Payload | undefined;
   /**
    * How long to wait before the preview card opens. Specified in milliseconds.
    * @default 600
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the preview card. Specified in milliseconds.
    * @default 300
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
 }
 export declare namespace PreviewCardTrigger {
   type State = PreviewCardTriggerState;
-  type Props = PreviewCardTriggerProps;
+  type Props<Payload = unknown> = PreviewCardTriggerProps<Payload>;
 }

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 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]);
+  const state = {
+    open: 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,27 @@
+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 | undefined;
+    /**
+     * Whether the viewport is currently transitioning between contents.
+     */
+    transitioning: boolean;
+    instant: 'dismiss' | 'focus' | undefined;
+  }
+}

package/preview-card/viewport/PreviewCardViewport.js

@@ -0,0 +1,62 @@
+"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 _PreviewCardContext = require("../root/PreviewCardContext");
+var _PreviewCardPositionerContext = require("../positioner/PreviewCardPositionerContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _PreviewCardViewportCssVars = require("./PreviewCardViewportCssVars");
+var _usePopupViewport = require("../../utils/usePopupViewport");
+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 instantType = store.useState('instantType');
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = (0, _usePopupViewport.usePopupViewport)({
+    store,
+    side: positioner.side,
+    cssVars: _PreviewCardViewportCssVars.PreviewCardViewportCssVars,
+    children
+  });
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [elementProps, {
+      children: childrenToRender
+    }],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") PreviewCardViewport.displayName = "PreviewCardViewport";

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;
+}({});