@tale-ui/react 0.0.3

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Align, Side } from "../../utils/useAnchorPositioning.js";
+import type { TaleUIComponentProps } from "../../utils/types.js";
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+/**
+ * A container for the preview card contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+export declare const PreviewCardPopup: React.ForwardRefExoticComponent<Omit<PreviewCardPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PreviewCardPopupState {
+  /**
+   * Whether the preview card is currently open.
+   */
+  open: boolean;
+  side: Side;
+  align: Align;
+  instant: 'dismiss' | 'focus' | undefined;
+  transitionStatus: TransitionStatus;
+}
+export interface PreviewCardPopupProps extends TaleUIComponentProps<'div', PreviewCardPopup.State> {}
+export declare namespace PreviewCardPopup {
+  type State = PreviewCardPopupState;
+  type Props = PreviewCardPopupProps;
+}

package/esm/preview-card/popup/PreviewCardPopup.js

@@ -0,0 +1,68 @@
+'use client';
+
+import * as React from 'react';
+import { useStableCallback } from '@tale-ui/utils/useStableCallback';
+import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
+import { usePreviewCardPositionerContext } from "../positioner/PreviewCardPositionerContext.js";
+import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+import { useHoverFloatingInteraction } from "../../floating-ui-react/index.js";
+const stateAttributesMapping = {
+  ...baseMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * A container for the preview card contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+export const PreviewCardPopup = /*#__PURE__*/React.forwardRef(function PreviewCardPopup(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const store = usePreviewCardRootContext();
+  const {
+    side,
+    align
+  } = usePreviewCardPositionerContext();
+  const open = store.useState('open');
+  const instantType = store.useState('instantType');
+  const transitionStatus = store.useState('transitionStatus');
+  const popupProps = store.useState('popupProps');
+  const floatingContext = store.useState('floatingRootContext');
+  useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
+      }
+    }
+  });
+  const getCloseDelay = useStableCallback(() => store.context.closeDelayRef.current);
+  useHoverFloatingInteraction(floatingContext, {
+    closeDelay: getCloseDelay
+  });
+  const state = {
+    open,
+    side,
+    align,
+    instant: instantType,
+    transitionStatus
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    props: [popupProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
+    stateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") PreviewCardPopup.displayName = "PreviewCardPopup";

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

@@ -0,0 +1,28 @@
+export declare enum PreviewCardPopupDataAttributes {
+  /**
+   * Present when the preview card is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the preview card is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the preview card is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the preview card is animating out.
+   */
+  endingStyle = "data-ending-style",
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  side = "data-side",
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  align = "data-align",
+}

package/esm/preview-card/popup/PreviewCardPopupDataAttributes.js

@@ -0,0 +1,30 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let PreviewCardPopupDataAttributes = function (PreviewCardPopupDataAttributes) {
+  /**
+   * Present when the preview card is open.
+   */
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the preview card is closed.
+   */
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the preview card is animating in.
+   */
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the preview card is animating out.
+   */
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  PreviewCardPopupDataAttributes[PreviewCardPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
+  return PreviewCardPopupDataAttributes;
+}({});

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale 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> {
+  /**
+   * Whether to keep the portal mounted in the DOM while the popup is hidden.
+   * @default false
+   */
+  keepMounted?: boolean | undefined;
+}
+export declare namespace PreviewCardPortal {
+  type Props = PreviewCardPortalProps;
+}

package/esm/preview-card/portal/PreviewCardPortal.js

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
+import { PreviewCardPortalContext } from "./PreviewCardPortalContext.js";
+import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
+
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PreviewCardPortal = /*#__PURE__*/React.forwardRef(function PreviewCardPortal(props, forwardedRef) {
+  const {
+    keepMounted = false,
+    ...portalProps
+  } = props;
+  const store = usePreviewCardRootContext();
+  const mounted = store.useState('mounted');
+  const shouldRender = mounted || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(PreviewCardPortalContext.Provider, {
+    value: keepMounted,
+    children: /*#__PURE__*/_jsx(FloatingPortalLite, {
+      ref: forwardedRef,
+      ...portalProps
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") PreviewCardPortal.displayName = "PreviewCardPortal";

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const PreviewCardPortalContext: React.Context<boolean | undefined>;
+export declare function usePreviewCardPortalContext(): boolean;

package/esm/preview-card/portal/PreviewCardPortalContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+export const PreviewCardPortalContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") PreviewCardPortalContext.displayName = "PreviewCardPortalContext";
+export function usePreviewCardPortalContext() {
+  const value = React.useContext(PreviewCardPortalContext);
+  if (value === undefined) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Tale UI: <PreviewCard.Portal> is missing.');
+  }
+  return value;
+}

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type Side, type Align, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
+import type { TaleUIComponentProps } from "../../utils/types.js";
+/**
+ * Positions the popup against the trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+export declare const PreviewCardPositioner: React.ForwardRefExoticComponent<Omit<PreviewCardPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PreviewCardPositionerState {
+  /**
+   * Whether the preview card is currently open.
+   */
+  open: boolean;
+  side: Side;
+  align: Align;
+  anchorHidden: boolean;
+  instant: 'dismiss' | 'focus' | undefined;
+}
+export interface PreviewCardPositionerProps extends useAnchorPositioning.SharedParameters, TaleUIComponentProps<'div', PreviewCardPositioner.State> {}
+export declare namespace PreviewCardPositioner {
+  type State = PreviewCardPositionerState;
+  type Props = PreviewCardPositionerProps;
+}

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

@@ -0,0 +1,110 @@
+'use client';
+
+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";
+import { POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
+import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+
+/**
+ * Positions the popup against the trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function PreviewCardPositioner(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    anchor,
+    positionMethod = 'absolute',
+    side = 'bottom',
+    align = 'center',
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionBoundary = 'clipping-ancestors',
+    collisionPadding = 5,
+    arrowPadding = 5,
+    sticky = false,
+    disableAnchorTracking = false,
+    collisionAvoidance = POPUP_COLLISION_AVOIDANCE,
+    ...elementProps
+  } = 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');
+  const instantType = store.useState('instantType');
+  const transitionStatus = store.useState('transitionStatus');
+  const hasViewport = store.useState('hasViewport');
+  const positioning = useAnchorPositioning({
+    anchor,
+    floatingRootContext,
+    positionMethod,
+    mounted,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    arrowPadding,
+    collisionBoundary,
+    collisionPadding,
+    sticky,
+    disableAnchorTracking,
+    keepMounted,
+    nodeId,
+    collisionAvoidance,
+    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
+  });
+  const defaultProps = React.useMemo(() => {
+    const hiddenStyles = {};
+    if (!open) {
+      hiddenStyles.pointerEvents = 'none';
+    }
+    return {
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        ...positioning.positionerStyles,
+        ...hiddenStyles
+      }
+    };
+  }, [open, mounted, positioning.positionerStyles]);
+  const state = {
+    open,
+    side: positioning.side,
+    align: positioning.align,
+    anchorHidden: positioning.anchorHidden,
+    instant: instantType
+  };
+  const contextValue = React.useMemo(() => ({
+    side: positioning.side,
+    align: positioning.align,
+    arrowRef: positioning.arrowRef,
+    arrowUncentered: positioning.arrowUncentered,
+    arrowStyles: positioning.arrowStyles
+  }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles]);
+  const element = useRenderElement('div', componentProps, {
+    state,
+    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
+    ref: [forwardedRef, store.useStateSetter('positionerElement')],
+    stateAttributesMapping: popupStateMapping
+  });
+  return /*#__PURE__*/_jsx(PreviewCardPositionerContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(FloatingNode, {
+      id: nodeId,
+      children: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") PreviewCardPositioner.displayName = "PreviewCardPositioner";

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { Side, Align } from "../../utils/useAnchorPositioning.js";
+export interface PreviewCardPositionerContext {
+  side: Side;
+  align: Align;
+  arrowRef: React.RefObject<Element | null>;
+  arrowUncentered: boolean;
+  arrowStyles: React.CSSProperties;
+}
+export declare const PreviewCardPositionerContext: React.Context<PreviewCardPositionerContext | undefined>;
+export declare function usePreviewCardPositionerContext(): PreviewCardPositionerContext;

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

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+export const PreviewCardPositionerContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") PreviewCardPositionerContext.displayName = "PreviewCardPositionerContext";
+export function usePreviewCardPositionerContext() {
+  const context = React.useContext(PreviewCardPositionerContext);
+  if (context === undefined) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Tale UI: <PreviewCard.Popup> and <PreviewCard.Arrow> must be used within the <PreviewCard.Positioner> component');
+  }
+  return context;
+}

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

@@ -0,0 +1,27 @@
+export declare enum PreviewCardPositionerCssVars {
+  /**
+   * The available width between the trigger and the edge of the viewport.
+   * @type {number}
+   */
+  availableWidth = "--available-width",
+  /**
+   * The available height between the trigger and the edge of the viewport.
+   * @type {number}
+   */
+  availableHeight = "--available-height",
+  /**
+   * The anchor's width.
+   * @type {number}
+   */
+  anchorWidth = "--anchor-width",
+  /**
+   * The anchor's height.
+   * @type {number}
+   */
+  anchorHeight = "--anchor-height",
+  /**
+   * The coordinates that this element is anchored to. Used for animations and transitions.
+   * @type {string}
+   */
+  transformOrigin = "--transform-origin",
+}

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

@@ -0,0 +1,28 @@
+export let PreviewCardPositionerCssVars = /*#__PURE__*/function (PreviewCardPositionerCssVars) {
+  /**
+   * The available width between the trigger and the edge of the viewport.
+   * @type {number}
+   */
+  PreviewCardPositionerCssVars["availableWidth"] = "--available-width";
+  /**
+   * The available height between the trigger and the edge of the viewport.
+   * @type {number}
+   */
+  PreviewCardPositionerCssVars["availableHeight"] = "--available-height";
+  /**
+   * The anchor's width.
+   * @type {number}
+   */
+  PreviewCardPositionerCssVars["anchorWidth"] = "--anchor-width";
+  /**
+   * The anchor's height.
+   * @type {number}
+   */
+  PreviewCardPositionerCssVars["anchorHeight"] = "--anchor-height";
+  /**
+   * The coordinates that this element is anchored to. Used for animations and transitions.
+   * @type {string}
+   */
+  PreviewCardPositionerCssVars["transformOrigin"] = "--transform-origin";
+  return PreviewCardPositionerCssVars;
+}({});

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

@@ -0,0 +1,24 @@
+export declare enum PreviewCardPositionerDataAttributes {
+  /**
+   * Present when the preview card is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the preview card is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the anchor is hidden.
+   */
+  anchorHidden = "data-anchor-hidden",
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  side = "data-side",
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  align = "data-align",
+}

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

@@ -0,0 +1,26 @@
+import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.js";
+export let PreviewCardPositionerDataAttributes = function (PreviewCardPositionerDataAttributes) {
+  /**
+   * Present when the preview card is open.
+   */
+  PreviewCardPositionerDataAttributes[PreviewCardPositionerDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the preview card is closed.
+   */
+  PreviewCardPositionerDataAttributes[PreviewCardPositionerDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the anchor is hidden.
+   */
+  PreviewCardPositionerDataAttributes[PreviewCardPositionerDataAttributes["anchorHidden"] = CommonPopupDataAttributes.anchorHidden] = "anchorHidden";
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  PreviewCardPositionerDataAttributes[PreviewCardPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  PreviewCardPositionerDataAttributes[PreviewCardPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
+  return PreviewCardPositionerDataAttributes;
+}({});

package/esm/preview-card/root/PreviewCardContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PreviewCardStore } from "../store/PreviewCardStore.js";
+export type PreviewCardRootContext<Payload = unknown> = PreviewCardStore<Payload>;
+export declare const PreviewCardRootContext: React.Context<PreviewCardRootContext<unknown> | undefined>;
+export declare function usePreviewCardRootContext(optional?: false): PreviewCardRootContext;
+export declare function usePreviewCardRootContext(optional: true): PreviewCardRootContext | undefined;

package/esm/preview-card/root/PreviewCardContext.js

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+export const PreviewCardRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") PreviewCardRootContext.displayName = "PreviewCardRootContext";
+export function usePreviewCardRootContext(optional) {
+  const context = React.useContext(PreviewCardRootContext);
+  if (context === undefined && !optional) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Tale UI: PreviewCardRootContext is missing. PreviewCard parts must be placed within <PreviewCard.Root>.');
+  }
+  return context;
+}

package/esm/preview-card/root/PreviewCardRoot.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { type TaleUIChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { PayloadChildRenderFunction } from "../../utils/popups/index.js";
+import { PreviewCardHandle } from "../store/PreviewCardHandle.js";
+/**
+ * Groups all parts of the preview card.
+ * Doesn’t render its own HTML element.
+ *
+ * Documentation: [Tale UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+export declare function PreviewCardRoot<Payload>(props: PreviewCardRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface PreviewCardRootState {}
+export interface PreviewCardRootProps<Payload = unknown> {
+  /**
+   * Whether the preview card is initially open.
+   *
+   * To render a controlled preview card, use the `open` prop instead.
+   * @default false
+   */
+  defaultOpen?: boolean | undefined;
+  /**
+   * Whether the preview card is currently open.
+   */
+  open?: boolean | undefined;
+  /**
+   * Event handler called when the preview card is opened or closed.
+   */
+  onOpenChange?: ((open: boolean, eventDetails: PreviewCardRoot.ChangeEventDetails) => void) | undefined;
+  /**
+   * Event handler called after any animations complete when the preview card is opened or closed.
+   */
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+  /**
+   * A ref to imperative actions.
+   * - `unmount`: Unmounts the preview card popup.
+   * - `close`: Closes the preview card imperatively when called.
+   */
+  actionsRef?: React.RefObject<PreviewCardRoot.Actions | null> | undefined;
+  /**
+   * A handle to associate the preview card with a trigger.
+   * If specified, allows external triggers to control the card's open state.
+   * Can be created with the PreviewCard.createHandle() method.
+   */
+  handle?: PreviewCardHandle<Payload> | undefined;
+  /**
+   * The content of the preview card.
+   * This can be a regular React node or a render function that receives the `payload` of the active trigger.
+   */
+  children?: React.ReactNode | PayloadChildRenderFunction<Payload>;
+  /**
+   * ID of the trigger that the preview card is associated with.
+   * This is useful in conjuntion with the `open` prop to create a controlled preview card.
+   * There's no need to specify this prop when the preview card is uncontrolled (i.e. when the `open` prop is not set).
+   */
+  triggerId?: string | null | undefined;
+  /**
+   * ID of the trigger that the preview card is associated with.
+   * This is useful in conjunction with the `defaultOpen` prop to create an initially open preview card.
+   */
+  defaultTriggerId?: string | null | undefined;
+}
+export interface PreviewCardRootActions {
+  unmount: () => void;
+  close: () => void;
+}
+export type PreviewCardRootChangeEventReason = typeof REASONS.triggerHover | typeof REASONS.triggerFocus | typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.escapeKey | typeof REASONS.imperativeAction | typeof REASONS.none;
+export type PreviewCardRootChangeEventDetails = TaleUIChangeEventDetails<PreviewCardRoot.ChangeEventReason> & {
+  preventUnmountOnClose(): void;
+};
+export declare namespace PreviewCardRoot {
+  type State = PreviewCardRootState;
+  type Props<Payload = unknown> = PreviewCardRootProps<Payload>;
+  type Actions = PreviewCardRootActions;
+  type ChangeEventReason = PreviewCardRootChangeEventReason;
+  type ChangeEventDetails = PreviewCardRootChangeEventDetails;
+}