react-headless-tour 0.1.0

package/dist/index.cjs

@@ -0,0 +1,701 @@
+"use client";
+"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);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DefaultCard: () => DefaultCard,
+  TourProvider: () => TourProvider,
+  useTour: () => useTour
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/TourContext.tsx
+var import_react5 = require("react");
+var import_react_dom2 = require("react-dom");
+
+// src/motion.ts
+var import_react = require("react");
+var EASE_SPRING = "cubic-bezier(0.22, 1, 0.36, 1)";
+function useEntered() {
+  const [entered, setEntered] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    let inner = 0;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => setEntered(true));
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
+    };
+  }, []);
+  return entered;
+}
+function useIsScrolling(idleMs = 150) {
+  const [scrolling, setScrolling] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    let timer = null;
+    const onScroll = () => {
+      setScrolling(true);
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => setScrolling(false), idleMs);
+    };
+    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      if (timer) clearTimeout(timer);
+    };
+  }, [idleMs]);
+  return scrolling;
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = (e) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+
+// src/useTargetRect.ts
+var import_react2 = require("react");
+function resolveTarget(step) {
+  if (!step?.target) return null;
+  if (typeof step.target === "function") return step.target();
+  if (typeof document === "undefined") return null;
+  return document.querySelector(step.target);
+}
+function readRect(el) {
+  const r = el.getBoundingClientRect();
+  return { x: r.left, y: r.top, width: r.width, height: r.height };
+}
+function rectsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function useTargetRect(step, active) {
+  const [rect, setRect] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!active || !step) {
+      setRect(null);
+      return;
+    }
+    let el = resolveTarget(step);
+    let frame = 0;
+    let current = null;
+    const update = () => {
+      if (!el || !el.isConnected) el = resolveTarget(step);
+      const next = el ? readRect(el) : null;
+      if (!rectsEqual(current, next)) {
+        current = next;
+        setRect(next);
+      }
+    };
+    const tick = () => {
+      update();
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    update();
+    return () => cancelAnimationFrame(frame);
+  }, [step, active]);
+  return rect;
+}
+
+// src/TourOverlay.tsx
+var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function TourOverlay({
+  rect,
+  step,
+  interactive,
+  padding,
+  radius,
+  color,
+  blur,
+  className,
+  onMaskClick
+}) {
+  const maskId = (0, import_react3.useId)();
+  const reducedMotion = useReducedMotion();
+  const scrolling = useIsScrolling();
+  const hole = rect ? {
+    x: rect.x - padding,
+    y: rect.y - padding,
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2
+  } : null;
+  const fill = color ?? "var(--tour-overlay-color, rgba(0, 0, 0, 0.55))";
+  const interactable = Boolean(step.interactable && hole);
+  const holeTransition = reducedMotion || scrolling ? void 0 : ["x", "y", "width", "height", "rx"].map((p) => `${p} 350ms ${EASE_SPRING}`).join(", ");
+  const blockerStyle = {
+    position: "absolute",
+    pointerEvents: interactive ? "auto" : "none",
+    cursor: onMaskClick ? "pointer" : "default"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-tour-overlay": "",
+      className,
+      style: { position: "absolute", inset: 0, pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            style: {
+              position: "absolute",
+              inset: 0,
+              backdropFilter: blur ? `blur(${blur}px)` : void 0,
+              WebkitBackdropFilter: blur ? `blur(${blur}px)` : void 0
+            },
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("mask", { id: maskId, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "#fff" }),
+                hole && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "rect",
+                  {
+                    x: hole.x,
+                    y: hole.y,
+                    width: hole.width,
+                    height: hole.height,
+                    rx: radius,
+                    fill: "#000",
+                    style: { transition: holeTransition }
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "0", y: "0", width: "100%", height: "100%", fill, mask: `url(#${maskId})` })
+            ]
+          }
+        ),
+        interactable && hole ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...blockerStyle, left: 0, top: 0, right: 0, height: Math.max(0, hole.y) }, onClick: onMaskClick }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...blockerStyle, left: 0, top: hole.y + hole.height, right: 0, bottom: 0 }, onClick: onMaskClick }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...blockerStyle, left: 0, top: hole.y, width: Math.max(0, hole.x), height: hole.height }, onClick: onMaskClick }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...blockerStyle, left: hole.x + hole.width, top: hole.y, right: 0, height: hole.height }, onClick: onMaskClick })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...blockerStyle, inset: 0 }, onClick: onMaskClick })
+      ]
+    }
+  );
+}
+
+// src/TourPopover.tsx
+var import_react4 = require("react");
+var import_react_dom = require("@floating-ui/react-dom");
+
+// src/DefaultCard.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DefaultCard(props) {
+  const { step, stepIndex, totalSteps, isFirst, isLast, next, prev, stop, arrow: arrow2, labels, classNames } = props;
+  const buttonBase = {
+    font: "inherit",
+    fontSize: "0.875em",
+    fontWeight: 500,
+    border: "var(--tour-border, 1px solid rgba(0,0,0,0.12))",
+    borderRadius: "calc(var(--tour-radius, 12px) * 0.6)",
+    padding: "0.45em 0.9em",
+    cursor: "pointer",
+    background: "transparent",
+    color: "inherit"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      "data-tour-card": "",
+      className: classNames?.card,
+      style: {
+        position: "relative",
+        background: "var(--tour-bg, #ffffff)",
+        color: "var(--tour-fg, #1a1a1a)",
+        fontFamily: "var(--tour-font, inherit)",
+        borderRadius: "var(--tour-radius, 12px)",
+        boxShadow: "var(--tour-shadow, 0 10px 38px -10px rgba(0,0,0,0.35), 0 10px 20px -15px rgba(0,0,0,0.2))",
+        padding: "var(--tour-padding, 16px)",
+        width: "max-content",
+        maxWidth: "min(var(--tour-max-width, 320px), 100%)",
+        boxSizing: "border-box"
+      },
+      children: [
+        arrow2,
+        step.title != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            "data-tour-title": "",
+            className: classNames?.title,
+            style: { fontWeight: 600, fontSize: "1em", marginBottom: 6 },
+            children: step.title
+          }
+        ),
+        step.content != null && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            "data-tour-content": "",
+            className: classNames?.content,
+            style: { fontSize: "0.9em", lineHeight: 1.5, color: "var(--tour-muted, #555)" },
+            children: step.content
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            "data-tour-footer": "",
+            className: classNames?.footer,
+            style: { display: "flex", alignItems: "center", gap: 8, marginTop: 14 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  "data-tour-progress": "",
+                  className: classNames?.progress,
+                  style: { fontSize: "0.8em", color: "var(--tour-muted, #888)", marginRight: "auto" },
+                  children: labels?.progress ? labels.progress(stepIndex, totalSteps) : `${stepIndex + 1} / ${totalSteps}`
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-tour-skip": "",
+                  className: classNames?.skipButton,
+                  onClick: () => stop("skipped"),
+                  style: { ...buttonBase, border: "none", color: "var(--tour-muted, #888)" },
+                  children: labels?.skip ?? "Skip"
+                }
+              ),
+              !isFirst && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-tour-prev": "",
+                  className: classNames?.navButton,
+                  onClick: prev,
+                  style: buttonBase,
+                  children: labels?.prev ?? "Back"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-tour-next": "",
+                  className: classNames?.primaryButton,
+                  onClick: next,
+                  style: {
+                    ...buttonBase,
+                    border: "none",
+                    background: "var(--tour-accent, #1a1a1a)",
+                    color: "var(--tour-accent-fg, #ffffff)"
+                  },
+                  children: isLast ? labels?.finish ?? "Finish" : labels?.next ?? "Next"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/TourPopover.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TourPopover({
+  rect,
+  step,
+  controls,
+  interactive,
+  offset: offsetDistance,
+  padding,
+  components,
+  classNames,
+  labels
+}) {
+  const arrowRef = (0, import_react4.useRef)(null);
+  const popoverRef = (0, import_react4.useRef)(null);
+  const hasTarget = Boolean(rect);
+  const entered = useEntered();
+  const reducedMotion = useReducedMotion();
+  (0, import_react4.useEffect)(() => {
+    if (interactive) popoverRef.current?.focus({ preventScroll: true });
+  }, [interactive]);
+  const [maxSize, setMaxSize] = (0, import_react4.useState)(null);
+  const maxSizeRef = (0, import_react4.useRef)(maxSize);
+  maxSizeRef.current = maxSize;
+  const { refs, floatingStyles, middlewareData, placement, update, isPositioned } = (0, import_react_dom.useFloating)({
+    placement: step.placement ?? "bottom",
+    strategy: "fixed",
+    whileElementsMounted: import_react_dom.autoUpdate,
+    middleware: [
+      (0, import_react_dom.offset)(offsetDistance + padding),
+      // If neither side of the preferred axis fits (e.g. a full-width target
+      // with placement "right"), try the other axis too.
+      (0, import_react_dom.flip)({ padding: 12, fallbackAxisSideDirection: "start" }),
+      // crossAxis lets shift pull the popover back into view even when that
+      // means overlapping a large target.
+      (0, import_react_dom.shift)({ padding: 12, crossAxis: true }),
+      (0, import_react_dom.size)({
+        padding: 12,
+        apply({ availableWidth, availableHeight }) {
+          const next = {
+            width: Math.max(120, Math.floor(availableWidth)),
+            height: Math.max(80, Math.floor(availableHeight))
+          };
+          const current = maxSizeRef.current;
+          if (!current || Math.abs(current.width - next.width) > 1 || Math.abs(current.height - next.height) > 1) {
+            setMaxSize(next);
+          }
+        }
+      }),
+      (0, import_react_dom.arrow)({ element: arrowRef, padding: 12 })
+    ]
+  });
+  (0, import_react4.useEffect)(() => {
+    if (!rect) return;
+    refs.setReference({
+      getBoundingClientRect: () => ({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        top: rect.y,
+        left: rect.x,
+        right: rect.x + rect.width,
+        bottom: rect.y + rect.height
+      })
+    });
+    update();
+  }, [rect, refs, update]);
+  const side = placement.split("-")[0];
+  const arrowNode = (0, import_react4.useMemo)(() => {
+    if (!hasTarget) return null;
+    const { x, y } = middlewareData.arrow ?? {};
+    const staticSide = { top: "bottom", bottom: "top", left: "right", right: "left" }[side];
+    const ArrowComponent = components?.Arrow;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref: arrowRef,
+        "data-tour-arrow": "",
+        className: classNames?.arrow,
+        style: {
+          position: "absolute",
+          left: x != null ? x : void 0,
+          top: y != null ? y : void 0,
+          [staticSide]: "calc(var(--tour-arrow-size, 12px) / -2)",
+          pointerEvents: "none"
+        },
+        children: ArrowComponent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowComponent, { side }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              width: "var(--tour-arrow-size, 12px)",
+              height: "var(--tour-arrow-size, 12px)",
+              transform: "rotate(45deg)",
+              background: "var(--tour-bg, #ffffff)",
+              borderRadius: 2
+            }
+          }
+        )
+      }
+    );
+  }, [hasTarget, middlewareData.arrow, side, components?.Arrow, classNames?.arrow]);
+  const CustomCard = components?.Card;
+  const cardProps = { ...controls, step, arrow: arrowNode };
+  const positionStyles = hasTarget ? floatingStyles : {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      ref: (node) => {
+        refs.setFloating(node);
+        popoverRef.current = node;
+      },
+      tabIndex: -1,
+      "data-tour-popover": "",
+      className: classNames?.popover,
+      style: {
+        ...positionStyles,
+        // Never paint before Floating UI has computed a real position — a
+        // freshly mounted popover would otherwise flash at a stale spot.
+        visibility: hasTarget && !isPositioned ? "hidden" : void 0,
+        pointerEvents: interactive ? "auto" : "none",
+        maxWidth: hasTarget && maxSize ? Math.min(maxSize.width, window.innerWidth - 24) : "calc(100vw - 24px)",
+        maxHeight: hasTarget && maxSize ? maxSize.height : "calc(100vh - 24px)",
+        overflowY: "auto"
+      },
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-label": `Tour step ${controls.stepIndex + 1} of ${controls.totalSteps}${typeof step.title === "string" ? `: ${step.title}` : ""}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          style: {
+            opacity: entered ? 1 : 0,
+            transform: entered ? "none" : `scale(0.96) translateY(${side === "top" ? 6 : -6}px)`,
+            transition: reducedMotion ? void 0 : `opacity 200ms ease, transform 250ms ${EASE_SPRING}`
+          },
+          children: CustomCard ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CustomCard, { ...cardProps }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DefaultCard, { ...cardProps, labels, classNames })
+        }
+      )
+    }
+  );
+}
+
+// src/TourContext.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TourContext = (0, import_react5.createContext)(null);
+var EXIT_DURATION_MS = 220;
+function useTour() {
+  const ctx = (0, import_react5.useContext)(TourContext);
+  if (!ctx) throw new Error("useTour must be used within a <TourProvider>");
+  return ctx;
+}
+function TourLayer({
+  closing,
+  zIndex,
+  className,
+  theme,
+  children
+}) {
+  const entered = useEntered();
+  const reducedMotion = useReducedMotion();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-tour-root": "",
+      className,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: `var(--tour-z-index, ${zIndex})`,
+        pointerEvents: "none",
+        opacity: entered && !closing ? 1 : 0,
+        transition: reducedMotion ? void 0 : `opacity ${EXIT_DURATION_MS}ms ease`,
+        ...theme
+      },
+      children
+    }
+  );
+}
+function TourProvider(props) {
+  const {
+    children,
+    steps,
+    autoStart = false,
+    stepIndex: controlledIndex,
+    onStepChange,
+    onStart,
+    onStop,
+    keyboard = true,
+    lockScroll = false,
+    scrollIntoViewOptions = { behavior: "smooth", block: "center", inline: "nearest" },
+    portalContainer
+  } = props;
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  const [phase, setPhase] = (0, import_react5.useState)("idle");
+  const [internalIndex, setInternalIndex] = (0, import_react5.useState)(0);
+  const isControlled = controlledIndex !== void 0;
+  const isActive = phase === "active";
+  const stepIndex = isActive ? isControlled ? controlledIndex : internalIndex : -1;
+  const step = stepIndex >= 0 && stepIndex < steps.length ? steps[stepIndex] : null;
+  const closingSnapshot = (0, import_react5.useRef)(null);
+  const exitTimer = (0, import_react5.useRef)(null);
+  const stateRef = (0, import_react5.useRef)({ steps, stepIndex, step, phase, onStepChange, onStart, onStop });
+  stateRef.current = { steps, stepIndex, step, phase, onStepChange, onStart, onStop };
+  (0, import_react5.useEffect)(() => setMounted(true), []);
+  (0, import_react5.useEffect)(
+    () => () => {
+      if (exitTimer.current) clearTimeout(exitTimer.current);
+    },
+    []
+  );
+  const setIndex = (0, import_react5.useCallback)(
+    (index) => {
+      const s = stateRef.current;
+      const clamped = Math.max(0, Math.min(index, s.steps.length - 1));
+      if (clamped === s.stepIndex) return;
+      s.step?.onExit?.(s.step, s.stepIndex);
+      if (!isControlled) setInternalIndex(clamped);
+      s.onStepChange?.(clamped, s.steps[clamped]);
+    },
+    [isControlled]
+  );
+  const start = (0, import_react5.useCallback)(
+    (atIndex = 0) => {
+      const s = stateRef.current;
+      if (s.phase === "active" || s.steps.length === 0) return;
+      if (exitTimer.current) clearTimeout(exitTimer.current);
+      const clamped = Math.max(0, Math.min(atIndex, s.steps.length - 1));
+      if (!isControlled) setInternalIndex(clamped);
+      else s.onStepChange?.(clamped, s.steps[clamped]);
+      setPhase("active");
+      s.onStart?.();
+    },
+    [isControlled]
+  );
+  const stop = (0, import_react5.useCallback)((reason = "programmatic") => {
+    const s = stateRef.current;
+    if (s.phase !== "active") return;
+    s.step?.onExit?.(s.step, s.stepIndex);
+    if (s.step) closingSnapshot.current = { step: s.step, stepIndex: s.stepIndex };
+    setPhase("closing");
+    if (exitTimer.current) clearTimeout(exitTimer.current);
+    exitTimer.current = setTimeout(() => {
+      closingSnapshot.current = null;
+      setPhase("idle");
+    }, EXIT_DURATION_MS);
+    s.onStop?.(reason, s.stepIndex);
+  }, []);
+  const next = (0, import_react5.useCallback)(() => {
+    const s = stateRef.current;
+    if (s.phase !== "active") return;
+    if (s.stepIndex >= s.steps.length - 1) stop("finished");
+    else setIndex(s.stepIndex + 1);
+  }, [setIndex, stop]);
+  const prev = (0, import_react5.useCallback)(() => {
+    const s = stateRef.current;
+    if (s.phase !== "active" || s.stepIndex <= 0) return;
+    setIndex(s.stepIndex - 1);
+  }, [setIndex]);
+  const goTo = (0, import_react5.useCallback)((index) => setIndex(index), [setIndex]);
+  const autoStartedRef = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    if (autoStart && mounted && !autoStartedRef.current) {
+      autoStartedRef.current = true;
+      start(0);
+    }
+  }, [autoStart, mounted, start]);
+  (0, import_react5.useEffect)(() => {
+    if (!isActive || !step) return;
+    step.onEnter?.(step, stepIndex);
+    if (!step.disableScroll) {
+      const el = resolveTarget(step);
+      const reducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      el?.scrollIntoView(
+        reducedMotion ? { ...scrollIntoViewOptions, behavior: "auto" } : scrollIntoViewOptions
+      );
+    }
+  }, [isActive, stepIndex]);
+  (0, import_react5.useEffect)(() => {
+    if (!isActive || !keyboard) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") stop("escape");
+      else if (e.key === "ArrowRight" || e.key === "Enter") next();
+      else if (e.key === "ArrowLeft") prev();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isActive, keyboard, next, prev, stop]);
+  (0, import_react5.useEffect)(() => {
+    if (!isActive || !lockScroll) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [isActive, lockScroll]);
+  const renderStep = step ?? closingSnapshot.current?.step ?? null;
+  const renderIndex = step ? stepIndex : closingSnapshot.current?.stepIndex ?? -1;
+  const targetRect = useTargetRect(renderStep, phase !== "idle");
+  const controls = (0, import_react5.useMemo)(
+    () => ({
+      isActive,
+      stepIndex,
+      totalSteps: steps.length,
+      step,
+      isFirst: stepIndex <= 0,
+      isLast: stepIndex === steps.length - 1,
+      start,
+      stop,
+      next,
+      prev,
+      goTo
+    }),
+    [isActive, stepIndex, steps.length, step, start, stop, next, prev, goTo]
+  );
+  const container = portalContainer ?? (typeof document !== "undefined" ? document.body : null);
+  const zIndex = props.zIndex ?? 1e4;
+  const closing = phase === "closing";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(TourContext.Provider, { value: controls, children: [
+    children,
+    mounted && container && phase !== "idle" && renderStep && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        TourLayer,
+        {
+          closing,
+          zIndex,
+          className: props.classNames?.root,
+          theme: props.theme,
+          children: [
+            (props.showOverlay ?? true) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              TourOverlay,
+              {
+                rect: targetRect,
+                step: renderStep,
+                interactive: !closing,
+                padding: renderStep.spotlightPadding ?? props.spotlightPadding ?? 8,
+                radius: renderStep.spotlightRadius ?? props.spotlightRadius ?? 8,
+                color: props.overlayColor,
+                blur: props.overlayBlur ?? 0,
+                className: props.classNames?.overlay,
+                onMaskClick: props.closeOnMaskClick ? () => stop("mask") : void 0
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              TourPopover,
+              {
+                rect: targetRect,
+                controls,
+                step: renderStep,
+                interactive: !closing,
+                offset: props.offset ?? 12,
+                padding: renderStep.spotlightPadding ?? props.spotlightPadding ?? 8,
+                components: props.components,
+                classNames: props.classNames,
+                labels: props.labels
+              },
+              renderIndex
+            )
+          ]
+        }
+      ),
+      container
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DefaultCard,
+  TourProvider,
+  useTour
+});
+//# sourceMappingURL=index.cjs.map