@octanejs/base-ui 0.1.30 → 0.1.32

package/dist/cjs/preview-card.cjs

@@ -0,0 +1,632 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var preview_card_exports = {};
+__export(preview_card_exports, {
+  CLOSE_DELAY: () => CLOSE_DELAY,
+  OPEN_DELAY: () => OPEN_DELAY,
+  PreviewCard: () => PreviewCard,
+  PreviewCardHandle: () => PreviewCardHandle,
+  PreviewCardStore: () => PreviewCardStore,
+  PreviewCardViewportCssVars: () => PreviewCardViewportCssVars,
+  createPreviewCardHandle: () => createPreviewCardHandle,
+  usePreviewCardPositionerContext: () => usePreviewCardPositionerContext,
+  usePreviewCardRootContext: () => usePreviewCardRootContext
+});
+module.exports = __toCommonJS(preview_card_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_mergeProps = require("./utils/mergeProps.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_empty = require("./utils/empty.cjs");
+var import_ReactStore = require("./utils/store/ReactStore.cjs");
+var import_createSelector = require("./utils/store/createSelector.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_useDismiss = require("./utils/floating/useDismiss.cjs");
+var import_useFocus = require("./utils/floating/useFocus.cjs");
+var import_useHoverReferenceInteraction = require("./utils/floating/useHoverReferenceInteraction.cjs");
+var import_useHoverFloatingInteraction = require("./utils/floating/useHoverFloatingInteraction.cjs");
+var import_FloatingTree = require("./utils/floating/FloatingTree.cjs");
+var import_FloatingPortalLite = require("./utils/FloatingPortalLite.cjs");
+var import_useAnchorPositioning = require("./utils/useAnchorPositioning.cjs");
+var import_usePositioner = require("./utils/usePositioner.cjs");
+var import_usePopupViewport = require("./utils/usePopupViewport.cjs");
+var import_adaptiveOriginMiddleware = require("./utils/adaptiveOriginMiddleware.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_getDisabledMountTransitionStyles = require("./utils/getDisabledMountTransitionStyles.cjs");
+var import_constants = require("./utils/constants.cjs");
+var import_popupStateMapping = require("./utils/popupStateMapping.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_popups = require("./utils/popups/index.cjs");
+var import_popupTriggerMap = require("./utils/popups/popupTriggerMap.cjs");
+const OPEN_DELAY = 600;
+const CLOSE_DELAY = 300;
+const PreviewCardViewportCssVars = {
+  popupWidth: "--popup-width",
+  popupHeight: "--popup-height"
+};
+const previewCardSelectors = {
+  ...import_popups.popupStoreSelectors,
+  instantType: (0, import_createSelector.createSelector)((state) => state.instantType),
+  hasViewport: (0, import_createSelector.createSelector)((state) => state.hasViewport)
+};
+function createInitialPreviewCardState() {
+  return {
+    ...(0, import_popups.createInitialPopupStoreState)(),
+    instantType: void 0,
+    hasViewport: false
+  };
+}
+class PreviewCardStore extends import_ReactStore.ReactStore {
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new import_popupTriggerMap.PopupTriggerMap();
+    const state = { ...createInitialPreviewCardState(), ...initialState };
+    state.floatingRootContext = (0, import_popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
+    super(
+      state,
+      {
+        popupRef: { current: null },
+        onOpenChange: void 0,
+        onOpenChangeComplete: void 0,
+        triggerElements,
+        closeDelayRef: { current: CLOSE_DELAY },
+        inlineRectCoordsRef: { current: void 0 }
+      },
+      previewCardSelectors
+    );
+  }
+  setOpen = (nextOpen, eventDetails) => {
+    const { inlineRectCoordsRef } = this.context;
+    (0, import_popups.applyPopupOpenChange)(this, nextOpen, eventDetails, {
+      onBeforeDispatch() {
+        const event = eventDetails.event;
+        if (nextOpen && eventDetails.reason === import_createChangeEventDetails.REASONS.triggerHover && eventDetails.trigger && event && "clientX" in event && "clientY" in event && inlineRectCoordsRef.current?.element !== eventDetails.trigger) {
+          (0, import_popups.updateInlineRectCoords)(
+            inlineRectCoordsRef,
+            eventDetails.trigger,
+            event.clientX,
+            event.clientY
+          );
+        }
+      }
+    });
+  };
+  static useStore(externalStore, initialState, slot) {
+    return (0, import_popups.usePopupStore)(
+      externalStore,
+      (floatingId, nested) => new PreviewCardStore(initialState, floatingId, nested),
+      true,
+      slot
+    ).store;
+  }
+}
+class PreviewCardHandle {
+  store;
+  constructor(store) {
+    this.store = store ?? new PreviewCardStore();
+  }
+  open(triggerId) {
+    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : void 0;
+    if (triggerId && !triggerElement) {
+      throw new Error(`Base UI: PreviewCardHandle.open: No trigger found with id "${triggerId}".`);
+    }
+    this.store.setOpen(
+      true,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction, void 0, triggerElement)
+    );
+  }
+  close() {
+    this.store.setOpen(
+      false,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction, void 0, void 0)
+    );
+  }
+  get isOpen() {
+    return this.store.select("open");
+  }
+}
+function createPreviewCardHandle() {
+  return new PreviewCardHandle();
+}
+const PreviewCardRootContext = (0, import_octane.createContext)(void 0);
+function usePreviewCardRootContext(optional) {
+  const context = (0, import_octane.useContext)(PreviewCardRootContext);
+  if (context === void 0 && !optional) {
+    throw new Error(
+      "Base UI: PreviewCardRootContext is missing. PreviewCard parts must be placed within <PreviewCard.Root>."
+    );
+  }
+  return context;
+}
+const PreviewCardPortalContext = (0, import_octane.createContext)(void 0);
+function usePreviewCardPortalContext() {
+  const value = (0, import_octane.useContext)(PreviewCardPortalContext);
+  if (value === void 0) {
+    throw new Error("Base UI: <PreviewCard.Portal> is missing.");
+  }
+  return value;
+}
+const PreviewCardPositionerContext = (0, import_octane.createContext)(
+  void 0
+);
+function usePreviewCardPositionerContext() {
+  const context = (0, import_octane.useContext)(PreviewCardPositionerContext);
+  if (!context) {
+    throw new Error(
+      "Base UI: PreviewCardPositionerContext is missing. PreviewCardPositioner parts must be placed within <PreviewCard.Positioner>."
+    );
+  }
+  return context;
+}
+function PreviewCardInteractions(props) {
+  const slot = (0, import_internal.S)("PreviewCardInteractions");
+  const { store } = props;
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const dismiss = (0, import_useDismiss.useDismiss)(floatingRootContext, {}, (0, import_internal.subSlot)(slot, "dismiss"));
+  const activeTriggerProps = dismiss.reference ?? import_empty.EMPTY_OBJECT;
+  const inactiveTriggerProps = dismiss.trigger ?? import_empty.EMPTY_OBJECT;
+  const popupProps = (0, import_octane.useMemo)(
+    () => (0, import_mergeProps.mergeProps)(import_popups.FOCUSABLE_POPUP_PROPS, dismiss.floating),
+    [dismiss.floating],
+    (0, import_internal.subSlot)(slot, "pp")
+  );
+  (0, import_popups.usePopupInteractionProps)(
+    store,
+    { activeTriggerProps, inactiveTriggerProps, popupProps },
+    (0, import_internal.subSlot)(slot, "pip")
+  );
+  return null;
+}
+function PreviewCardRootComponent(props) {
+  const slot = (0, import_internal.S)("PreviewCardRoot");
+  const {
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null,
+    children
+  } = props;
+  const store = PreviewCardStore.useStore(
+    handle?.store,
+    {
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp
+    },
+    (0, import_internal.subSlot)(slot, "store")
+  );
+  (0, import_popups.useInitialOpenSync)(store, openProp, defaultOpen, defaultTriggerIdProp, (0, import_internal.subSlot)(slot, "ios"));
+  store.useControlledProp("openProp", openProp, (0, import_internal.subSlot)(slot, "cp:open"));
+  store.useControlledProp("triggerIdProp", triggerIdProp, (0, import_internal.subSlot)(slot, "cp:trigger"));
+  store.useContextCallback("onOpenChange", onOpenChange, (0, import_internal.subSlot)(slot, "cb:open"));
+  store.useContextCallback(
+    "onOpenChangeComplete",
+    onOpenChangeComplete,
+    (0, import_internal.subSlot)(slot, "cb:complete")
+  );
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const activeTriggerId = store.useState("activeTriggerId", (0, import_internal.subSlot)(slot, "atid"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const payload = store.useState("payload", (0, import_internal.subSlot)(slot, "payload"));
+  (0, import_popups.useImplicitActiveTrigger)(store, { closeOnActiveTriggerUnmount: true }, (0, import_internal.subSlot)(slot, "implicit"));
+  const { forceUnmount } = (0, import_popups.useOpenStateTransitions)(
+    open,
+    store,
+    () => {
+      store.context.inlineRectCoordsRef.current = void 0;
+    },
+    (0, import_internal.subSlot)(slot, "transitions")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (open && activeTriggerId == null) {
+        store.set("payload", void 0);
+      }
+    },
+    [store, activeTriggerId, open],
+    (0, import_internal.subSlot)(slot, "l:payload")
+  );
+  const handleImperativeClose = (0, import_octane.useCallback)(
+    () => {
+      store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction));
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "close")
+  );
+  (0, import_octane.useImperativeHandle)(
+    actionsRef,
+    () => ({ unmount: forceUnmount, close: handleImperativeClose }),
+    [forceUnmount, handleImperativeClose],
+    (0, import_internal.subSlot)(slot, "imp")
+  );
+  const shouldRenderInteractions = open || mounted;
+  const resolvedChildren = typeof children === "function" && !(0, import_octane.isChildrenBlock)(children) ? children({ payload }) : children;
+  const content = [
+    shouldRenderInteractions ? (0, import_octane.createElement)(PreviewCardInteractions, { key: "interactions", store }) : null,
+    (0, import_octane.createElement)(import_octane.Fragment, { key: "children", children: resolvedChildren })
+  ];
+  return (0, import_octane.createElement)(PreviewCardRootContext.Provider, { value: store, children: content });
+}
+function PreviewCardRoot(props) {
+  if (usePreviewCardRootContext(true)) {
+    return (0, import_octane.createElement)(PreviewCardRootComponent, props);
+  }
+  return (0, import_octane.createElement)(import_FloatingTree.FloatingTree, {
+    children: (0, import_octane.createElement)(PreviewCardRootComponent, props)
+  });
+}
+function PreviewCardTrigger(componentProps) {
+  const slot = (0, import_internal.S)("PreviewCardTrigger");
+  const {
+    render,
+    className,
+    delay,
+    closeDelay,
+    id: idProp,
+    payload,
+    handle,
+    style,
+    ref,
+    ...elementProps
+  } = componentProps;
+  const rootContext = usePreviewCardRootContext(true);
+  const store = handle?.store ?? rootContext;
+  if (!store) {
+    throw new Error(
+      "Base UI: <PreviewCard.Trigger> must be either used within a <PreviewCard.Root> component or provided with a handle."
+    );
+  }
+  const thisTriggerId = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const isTriggerActive = store.useState("isTriggerActive", (0, import_internal.subSlot)(slot, "ita"), thisTriggerId);
+  const isOpenedByThisTrigger = store.useState(
+    "isOpenedByTrigger",
+    (0, import_internal.subSlot)(slot, "obt"),
+    thisTriggerId
+  );
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
+  const triggerElementRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "trigEl"));
+  const delayWithDefault = delay ?? OPEN_DELAY;
+  const closeDelayWithDefault = closeDelay ?? CLOSE_DELAY;
+  const { registerTrigger, isMountedByThisTrigger } = (0, import_popups.useTriggerDataForwarding)(
+    thisTriggerId,
+    triggerElementRef,
+    store,
+    { payload },
+    (0, import_internal.subSlot)(slot, "tdf")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (isMountedByThisTrigger) {
+        store.context.closeDelayRef.current = closeDelayWithDefault;
+      }
+    },
+    [store, isMountedByThisTrigger, closeDelayWithDefault],
+    (0, import_internal.subSlot)(slot, "l:closeDelay")
+  );
+  const hoverProps = (0, import_useHoverReferenceInteraction.useHoverReferenceInteraction)(
+    floatingRootContext,
+    {
+      mouseOnly: true,
+      move: false,
+      handleClose: (0, import_useHoverReferenceInteraction.safePolygon)(),
+      delay: () => ({ open: delayWithDefault, close: closeDelayWithDefault }),
+      triggerElementRef,
+      isActiveTrigger: isTriggerActive,
+      isClosing: () => store.select("transitionStatus") === "ending"
+    },
+    (0, import_internal.subSlot)(slot, "hover")
+  );
+  const focusProps = (0, import_useFocus.useFocus)(
+    floatingRootContext,
+    { delay: delayWithDefault },
+    (0, import_internal.subSlot)(slot, "focus")
+  );
+  const state = { open: isOpenedByThisTrigger };
+  const rootTriggerProps = store.useState(
+    "triggerProps",
+    (0, import_internal.subSlot)(slot, "tp"),
+    isMountedByThisTrigger
+  );
+  const inlineRectTriggerProps = (0, import_popups.getInlineRectTriggerProps)(
+    inlineRectCoordsRef,
+    isOpenedByThisTrigger
+  );
+  return (0, import_useRenderElement.useRenderElement)(
+    "a",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, registerTrigger, triggerElementRef],
+      props: [
+        hoverProps,
+        focusProps.reference,
+        rootTriggerProps,
+        inlineRectTriggerProps,
+        { id: thisTriggerId },
+        elementProps
+      ],
+      stateAttributesMapping: import_popupStateMapping.triggerOpenStateMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function PreviewCardPortal(props) {
+  const slot = (0, import_internal.S)("PreviewCardPortal");
+  const { keepMounted = false, ref, ...portalProps } = props;
+  const store = usePreviewCardRootContext();
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  if (!(mounted || keepMounted)) {
+    return null;
+  }
+  return (0, import_octane.createElement)(PreviewCardPortalContext.Provider, {
+    value: keepMounted,
+    children: (0, import_octane.createElement)(import_FloatingPortalLite.FloatingPortalLite, { ref, ...portalProps })
+  });
+}
+function PreviewCardPositioner(componentProps) {
+  const slot = (0, import_internal.S)("PreviewCardPositioner");
+  const {
+    render,
+    className,
+    style,
+    anchor,
+    positionMethod = "absolute",
+    side = "bottom",
+    align = "center",
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionBoundary = "clipping-ancestors",
+    collisionPadding = 5,
+    arrowPadding = 5,
+    sticky = false,
+    disableAnchorTracking = false,
+    collisionAvoidance = import_constants.POPUP_COLLISION_AVOIDANCE,
+    ref,
+    ...elementProps
+  } = componentProps;
+  const store = usePreviewCardRootContext();
+  const keepMounted = usePreviewCardPortalContext();
+  const nodeId = (0, import_FloatingTree.useFloatingNodeId)(void 0, (0, import_internal.subSlot)(slot, "nodeId"));
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const hasViewport = store.useState("hasViewport", (0, import_internal.subSlot)(slot, "viewport"));
+  const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
+  const inlineMiddleware = (0, import_octane.useMemo)(
+    () => (0, import_popups.createInlineMiddleware)(inlineRectCoordsRef),
+    [inlineRectCoordsRef],
+    (0, import_internal.subSlot)(slot, "inline")
+  );
+  const positioning = (0, import_useAnchorPositioning.useAnchorPositioning)(
+    {
+      anchor,
+      floatingRootContext,
+      positionMethod,
+      mounted,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      arrowPadding,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      disableAnchorTracking,
+      keepMounted,
+      nodeId,
+      collisionAvoidance,
+      adaptiveOrigin: hasViewport ? import_adaptiveOriginMiddleware.adaptiveOrigin : void 0,
+      inline: inlineMiddleware
+    },
+    (0, import_internal.subSlot)(slot, "pos")
+  );
+  const updatePosition = positioning.update;
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (open && mounted) {
+        updatePosition();
+      }
+    },
+    [open, mounted, updatePosition],
+    (0, import_internal.subSlot)(slot, "l:update")
+  );
+  const state = {
+    open,
+    side: positioning.side,
+    align: positioning.align,
+    anchorHidden: positioning.anchorHidden,
+    instant: instantType
+  };
+  const setPositionerElement = store.useStateSetter("positionerElement", (0, import_internal.subSlot)(slot, "spe"));
+  const element = (0, import_usePositioner.usePositioner)(
+    { render, className, style },
+    state,
+    {
+      styles: positioning.positionerStyles,
+      transitionStatus,
+      props: elementProps,
+      refs: [ref, setPositionerElement],
+      hidden: !mounted,
+      inert: !open
+    },
+    (0, import_internal.subSlot)(slot, "positioner")
+  );
+  return (0, import_octane.createElement)(PreviewCardPositionerContext.Provider, {
+    value: positioning,
+    children: (0, import_octane.createElement)(import_FloatingTree.FloatingNode, { id: nodeId, children: element })
+  });
+}
+const popupStateAttributesMapping = {
+  ...import_popupStateMapping.popupStateMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+function PreviewCardPopup(componentProps) {
+  const slot = (0, import_internal.S)("PreviewCardPopup");
+  const { className, render, style, ref, ...elementProps } = componentProps;
+  const store = usePreviewCardRootContext();
+  const { side, align } = usePreviewCardPositionerContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const popupProps = store.useState("popupProps", (0, import_internal.subSlot)(slot, "pp"));
+  const floatingContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open,
+      ref: store.context.popupRef,
+      onComplete() {
+        if (open) {
+          store.context.onOpenChangeComplete?.(true);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  const getCloseDelay = (0, import_useStableCallback.useStableCallback)(
+    () => store.context.closeDelayRef.current,
+    (0, import_internal.subSlot)(slot, "gcd")
+  );
+  (0, import_useHoverFloatingInteraction.useHoverFloatingInteraction)(
+    floatingContext,
+    { closeDelay: getCloseDelay },
+    (0, import_internal.subSlot)(slot, "hoverPopup")
+  );
+  const setPopupElement = store.useStateSetter("popupElement", (0, import_internal.subSlot)(slot, "spe"));
+  const state = { open, side, align, instant: instantType, transitionStatus };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, store.context.popupRef, setPopupElement],
+      props: [popupProps, (0, import_getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
+      stateAttributesMapping: popupStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function PreviewCardBackdrop(componentProps) {
+  const slot = (0, import_internal.S)("PreviewCardBackdrop");
+  const { render, className, style, ref, ...elementProps } = componentProps;
+  const store = usePreviewCardRootContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const state = { open, transitionStatus };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref: [ref],
+      props: [
+        {
+          role: "presentation",
+          hidden: !mounted,
+          style: { pointerEvents: "none", userSelect: "none", WebkitUserSelect: "none" }
+        },
+        elementProps
+      ],
+      stateAttributesMapping: popupStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function PreviewCardArrow(componentProps) {
+  const slot = (0, import_internal.S)("PreviewCardArrow");
+  const { render, className, style, ref, ...elementProps } = componentProps;
+  const store = usePreviewCardRootContext();
+  const { arrowRef, side, align, arrowUncentered, arrowStyles } = usePreviewCardPositionerContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const state = { open, side, align, uncentered: arrowUncentered };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref: [arrowRef, ref],
+      props: [{ style: arrowStyles, "aria-hidden": true }, elementProps],
+      stateAttributesMapping: import_popupStateMapping.popupStateMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const viewportStateAttributesMapping = {
+  activationDirection: (value) => value ? { "data-activation-direction": value } : null
+};
+function PreviewCardViewport(componentProps) {
+  const slot = (0, import_internal.S)("PreviewCardViewport");
+  const { render, className, style, children, ref, ...elementProps } = componentProps;
+  const store = usePreviewCardRootContext();
+  const positioner = usePreviewCardPositionerContext();
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const { children: childrenToRender, state: viewportState } = (0, import_usePopupViewport.usePopupViewport)(
+    { store, side: positioner.side, cssVars: PreviewCardViewportCssVars, children },
+    (0, import_internal.subSlot)(slot, "vp")
+  );
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [elementProps, { children: childrenToRender }],
+      stateAttributesMapping: viewportStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const PreviewCard = {
+  Root: PreviewCardRoot,
+  Trigger: PreviewCardTrigger,
+  Portal: PreviewCardPortal,
+  Positioner: PreviewCardPositioner,
+  Popup: PreviewCardPopup,
+  Backdrop: PreviewCardBackdrop,
+  Arrow: PreviewCardArrow,
+  Viewport: PreviewCardViewport,
+  createHandle: createPreviewCardHandle,
+  Handle: PreviewCardHandle
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CLOSE_DELAY,
+  OPEN_DELAY,
+  PreviewCard,
+  PreviewCardHandle,
+  PreviewCardStore,
+  PreviewCardViewportCssVars,
+  createPreviewCardHandle,
+  usePreviewCardPositionerContext,
+  usePreviewCardRootContext
+});