react-guide-step 0.1.0

package/dist/react-guide-step.js

@@ -0,0 +1,863 @@
+import { jsx as y, jsxs as R, Fragment as q } from "react/jsx-runtime";
+import { createContext as Q, useState as A, useRef as E, useEffect as L, useCallback as S, useContext as D, useLayoutEffect as tt, useMemo as H, useReducer as et } from "react";
+import { createPortal as rt } from "react-dom";
+const B = Q(null);
+function U(t) {
+  return t instanceof HTMLElement ? t : document.querySelector(t);
+}
+function M(t) {
+  return t.getBoundingClientRect();
+}
+function X(...t) {
+  return t.filter(Boolean).join(" ");
+}
+const nt = ({
+  targetElement: t,
+  highlightPadding: e = 4,
+  allowInteraction: n = !1,
+  onMaskClick: r,
+  placement: s
+}) => {
+  if (s === "center")
+    return /* @__PURE__ */ y(
+      "div",
+      {
+        className: "rgs-spotlight",
+        style: { top: 0, left: 0, width: 0, height: 0 },
+        onClick: r
+      }
+    );
+  const l = t ? (() => {
+    const c = M(t);
+    return {
+      top: c.top - e,
+      left: c.left - e,
+      width: c.width + e * 2,
+      height: c.height + e * 2
+    };
+  })() : { top: 0, left: 0, width: 0, height: 0 };
+  return /* @__PURE__ */ R(q, { children: [
+    /* @__PURE__ */ y("div", { className: "rgs-overlay", onClick: r }),
+    /* @__PURE__ */ y(
+      "div",
+      {
+        className: X("rgs-spotlight", n && "rgs-spotlight--interactive"),
+        style: l
+      }
+    )
+  ] });
+}, Y = 10, ot = 8, st = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function it(t) {
+  const e = t.split("-")[0];
+  return {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left",
+    center: "top"
+  }[e] || "top";
+}
+function ct(t, e) {
+  const n = it(e), r = ot, s = {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    borderStyle: "solid",
+    borderTopWidth: r,
+    borderBottomWidth: r,
+    borderLeftWidth: r,
+    borderRightWidth: r,
+    borderTopColor: "transparent",
+    borderBottomColor: "transparent",
+    borderLeftColor: "transparent",
+    borderRightColor: "transparent"
+  };
+  switch (n) {
+    case "bottom":
+      return {
+        ...s,
+        left: t.x - r,
+        bottom: -r,
+        borderBottomWidth: 0,
+        borderTopColor: "var(--rgs-bg)"
+      };
+    case "top":
+      return {
+        ...s,
+        left: t.x - r,
+        top: -r,
+        borderTopWidth: 0,
+        borderBottomColor: "var(--rgs-bg)"
+      };
+    case "right":
+      return {
+        ...s,
+        top: t.y - r,
+        right: -r,
+        borderRightWidth: 0,
+        borderLeftColor: "var(--rgs-bg)"
+      };
+    case "left":
+      return {
+        ...s,
+        top: t.y - r,
+        left: -r,
+        borderLeftWidth: 0,
+        borderRightColor: "var(--rgs-bg)"
+      };
+  }
+}
+const at = ({ arrowPos: t, placement: e }) => {
+  const n = ct(t, e);
+  return /* @__PURE__ */ y("div", { className: "rgs-arrow", style: n });
+}, lt = {
+  next: "Next",
+  prev: "Previous",
+  skip: "Skip",
+  finish: "Finish",
+  stepOf: "{current} of {total}"
+};
+function ut(t) {
+  return { ...lt, ...t };
+}
+const dt = ({
+  step: t,
+  stepIndex: e,
+  totalSteps: n,
+  position: r,
+  tooltipRef: s,
+  labels: o,
+  showSkip: l = !0,
+  onNext: c,
+  onPrev: d,
+  onSkip: i
+}) => {
+  const [a, f] = A(!1), [p, x] = A(r), [m, u] = A(t), [w, T] = A(e), P = E(e), _ = E();
+  L(() => {
+    const v = P.current !== e;
+    if (P.current = e, _.current && clearTimeout(_.current), !v) {
+      r && (x(r), u(t), T(e), a || requestAnimationFrame(() => f(!0)));
+      return;
+    }
+    return f(!1), _.current = setTimeout(() => {
+      u(t), T(e), x(r), requestAnimationFrame(() => f(!0));
+    }, 200), () => {
+      _.current && clearTimeout(_.current);
+    };
+  }, [e, r, t]);
+  const I = w === 0, k = w === n - 1, W = m.showArrow !== !1 && (p == null ? void 0 : p.resolvedPlacement) !== "center", F = p ? { left: p.x, top: p.y } : { left: -9999, top: -9999 }, g = o.stepOf.replace("{current}", String(w + 1)).replace("{total}", String(n)), h = W && p && /* @__PURE__ */ y(at, { arrowPos: p.arrow, placement: p.resolvedPlacement }), b = {
+    ref: s,
+    className: X("rgs-tooltip", a && "rgs-tooltip--visible"),
+    style: F,
+    role: "dialog",
+    "aria-modal": !0,
+    "aria-label": m.title || "Guide step",
+    tabIndex: -1
+  };
+  if (m.customRender) {
+    const v = {
+      step: m,
+      stepIndex: w,
+      totalSteps: n,
+      next: c,
+      prev: d,
+      skip: i,
+      finish: c
+    };
+    return /* @__PURE__ */ R("div", { ...b, children: [
+      m.customRender(v),
+      h
+    ] });
+  }
+  return /* @__PURE__ */ R("div", { ...b, children: [
+    m.title && /* @__PURE__ */ y("div", { className: "rgs-tooltip__title", children: m.title }),
+    m.content && /* @__PURE__ */ y("div", { className: "rgs-tooltip__content", children: m.content }),
+    /* @__PURE__ */ R("div", { className: "rgs-tooltip__footer", children: [
+      /* @__PURE__ */ y("span", { className: "rgs-tooltip__counter", children: g }),
+      /* @__PURE__ */ R("div", { className: "rgs-tooltip__actions", children: [
+        l && !k && /* @__PURE__ */ y("button", { className: "rgs-btn rgs-btn--text", onClick: i, type: "button", children: o.skip }),
+        !I && /* @__PURE__ */ y("button", { className: "rgs-btn rgs-btn--default", onClick: d, type: "button", children: o.prev }),
+        /* @__PURE__ */ y("button", { className: "rgs-btn rgs-btn--primary", onClick: c, type: "button", children: k ? o.finish : o.next })
+      ] })
+    ] }),
+    h
+  ] });
+};
+function $(t) {
+  return t.split("-")[0];
+}
+function K(t) {
+  return t.split("-")[1] || "center";
+}
+function G(t, e, n, r) {
+  const s = $(n), o = K(n);
+  let l = 0, c = 0;
+  switch (s) {
+    case "top":
+      c = t.y - e.height - r;
+      break;
+    case "bottom":
+      c = t.y + t.height + r;
+      break;
+    case "left":
+      l = t.x - e.width - r;
+      break;
+    case "right":
+      l = t.x + t.width + r;
+      break;
+  }
+  if (s === "top" || s === "bottom")
+    switch (o) {
+      case "start":
+        l = t.x;
+        break;
+      case "end":
+        l = t.x + t.width - e.width;
+        break;
+      default:
+        l = t.x + t.width / 2 - e.width / 2;
+        break;
+    }
+  else
+    switch (o) {
+      case "start":
+        c = t.y;
+        break;
+      case "end":
+        c = t.y + t.height - e.height;
+        break;
+      default:
+        c = t.y + t.height / 2 - e.height / 2;
+        break;
+    }
+  return { x: l, y: c };
+}
+function V(t, e, n) {
+  const r = window.innerWidth, s = window.innerHeight;
+  switch (n) {
+    case "top":
+      return t.y < 0;
+    case "bottom":
+      return t.y + e.height > s;
+    case "left":
+      return t.x < 0;
+    case "right":
+      return t.x + e.width > r;
+    default:
+      return !1;
+  }
+}
+function ft(t) {
+  const e = $(t), n = K(t), r = st[e] || e;
+  return n === "center" ? r : `${r}-${n}`;
+}
+function j(t, e, n = 8) {
+  const r = window.innerWidth, s = window.innerHeight;
+  return {
+    x: Math.max(n, Math.min(t.x, r - e.width - n)),
+    y: Math.max(n, Math.min(t.y, s - e.height - n))
+  };
+}
+function pt(t, e, n) {
+  const r = $(n);
+  if (r === "top" || r === "bottom") {
+    const s = t.x + t.width / 2 - e.x;
+    return {
+      x: Math.max(12, Math.min(s, e.width - 12)),
+      y: r === "top" ? e.height : 0
+    };
+  } else {
+    const s = t.y + t.height / 2 - e.y, o = Math.max(12, Math.min(s, e.height - 12));
+    return {
+      x: r === "left" ? e.width : 0,
+      y: o
+    };
+  }
+}
+function ht(t, e, n = "bottom", r = Y) {
+  if (n === "center") {
+    const i = {
+      x: t.x + t.width / 2 - e.width / 2,
+      y: t.y + t.height / 2 - e.height / 2
+    }, a = j(i, e);
+    return {
+      x: a.x,
+      y: a.y,
+      resolvedPlacement: "center",
+      arrow: { x: 0, y: 0 }
+    };
+  }
+  const s = $(n);
+  let o = G(t, e, n, r), l = n;
+  if (V(o, e, s)) {
+    const i = ft(n), a = $(i), f = G(t, e, i, r);
+    V(f, e, a) || (o = f, l = i);
+  }
+  const c = j(o, e), d = pt(
+    t,
+    { ...c, width: e.width, height: e.height },
+    l
+  );
+  return {
+    x: c.x,
+    y: c.y,
+    resolvedPlacement: l,
+    arrow: d
+  };
+}
+function gt({ targetElement: t, placement: e, enabled: n, highlightPadding: r = 0 }) {
+  const [s, o] = A(null), l = E(null), c = E(0), d = S(() => {
+    if (!t || !l.current) return;
+    const i = M(t), a = M(l.current), f = ht(i, a, e, Y + r);
+    o(f);
+  }, [t, e, r]);
+  return L(() => {
+    if (!n) {
+      o(null);
+      return;
+    }
+    if (!t)
+      return;
+    d(), c.current = requestAnimationFrame(d);
+    const i = () => {
+      cancelAnimationFrame(c.current), c.current = requestAnimationFrame(d);
+    };
+    window.addEventListener("scroll", i, !0), window.addEventListener("resize", i);
+    let a;
+    return a = new ResizeObserver(i), l.current && a.observe(l.current), a.observe(t), () => {
+      cancelAnimationFrame(c.current), window.removeEventListener("scroll", i, !0), window.removeEventListener("resize", i), a == null || a.disconnect();
+    };
+  }, [n, t, d]), { position: s, tooltipRef: l, updatePosition: d };
+}
+function mt({ enabled: t, onNext: e, onPrev: n, onSkip: r }) {
+  L(() => {
+    if (!t) return;
+    const s = (o) => {
+      switch (o.key) {
+        case "ArrowRight":
+        case "Enter":
+          o.preventDefault(), e();
+          break;
+        case "ArrowLeft":
+          o.preventDefault(), n();
+          break;
+        case "Escape":
+          o.preventDefault(), r();
+          break;
+      }
+    };
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [t, e, n, r]);
+}
+function bt(t, e) {
+  const [n, r] = A(null), [s, o] = A(!1);
+  return L(() => {
+    if (!e || !t) {
+      r(null), o(!1);
+      return;
+    }
+    const l = U(t);
+    if (l) {
+      r(l), o(!1);
+      return;
+    }
+    if (o(!0), typeof t != "string") {
+      o(!1);
+      return;
+    }
+    const c = new MutationObserver(() => {
+      const d = document.querySelector(t);
+      d && (r(d), o(!1), c.disconnect());
+    });
+    return c.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    }), () => c.disconnect();
+  }, [t, e]), { element: n, isWaiting: s };
+}
+function vt(t = "smooth") {
+  return S(
+    (n) => {
+      if (!n) return;
+      const r = n.getBoundingClientRect();
+      r.top >= 0 && r.left >= 0 && r.bottom <= window.innerHeight && r.right <= window.innerWidth || n.scrollIntoView({ behavior: t, block: "center", inline: "center" });
+    },
+    [t]
+  );
+}
+function yt(t, e, n) {
+  const r = E(/* @__PURE__ */ new Map()), [s, o] = A(!0), l = E(e), c = E(t);
+  l.current = e, c.current = t;
+  const d = S(() => {
+    var f;
+    const i = (f = c.current[l.current]) == null ? void 0 : f.preloadImages;
+    if (!i || i.length === 0) {
+      o(!0);
+      return;
+    }
+    const a = i.every((p) => r.current.get(p) === !0);
+    o(a);
+  }, []);
+  return L(() => {
+    var a;
+    if (!n) {
+      r.current.clear();
+      return;
+    }
+    const i = /* @__PURE__ */ new Set();
+    for (const f of t)
+      (a = f.preloadImages) == null || a.forEach((p) => i.add(p));
+    for (const f of i) {
+      if (r.current.has(f)) continue;
+      r.current.set(f, !1);
+      const p = new Image();
+      p.src = f;
+      const x = () => {
+        r.current.set(f, !0), d();
+      };
+      p.onload = x, p.onerror = x;
+    }
+    d();
+  }, [n, t, d]), L(() => {
+    d();
+  }, [e, d]), s;
+}
+const xt = {
+  primaryColor: "#1677ff",
+  textColor: "#333333",
+  bgColor: "#ffffff",
+  overlayColor: "rgba(0, 0, 0, 0.5)",
+  borderRadius: 8,
+  zIndex: 99999,
+  animationDuration: 150
+};
+function Z(t) {
+  return { ...xt, ...t };
+}
+function wt(t) {
+  return `
+    --rgs-primary: ${t.primaryColor};
+    --rgs-text: ${t.textColor};
+    --rgs-bg: ${t.bgColor};
+    --rgs-overlay: ${t.overlayColor};
+    --rgs-radius: ${t.borderRadius}px;
+    --rgs-z: ${t.zIndex};
+    --rgs-duration: ${t.animationDuration}ms;
+  `;
+}
+const St = () => {
+  const t = D(B), { controller: e, options: n } = t, {
+    steps: r,
+    maskClosable: s = !1,
+    showSkip: o = !0,
+    keyboardNavigation: l = !0,
+    scrollBehavior: c = "smooth",
+    labels: d
+  } = n, { isActive: i, currentStep: a, next: f, prev: p, stop: x } = e, m = ut(d), u = r[a], w = !!(u != null && u.waitForElement), { element: T, isWaiting: P } = bt(
+    u == null ? void 0 : u.target,
+    i && w
+  ), [_, I] = A(null);
+  L(() => {
+    if (!i || !u || w) {
+      I(null);
+      return;
+    }
+    const C = U(u.target);
+    I(C || null);
+  }, [i, a, u, w]);
+  const k = w ? T : _, W = yt(r, a, i), F = vt(c);
+  L(() => {
+    k && F(k);
+  }, [k, F]);
+  const { position: g, tooltipRef: h } = gt({
+    targetElement: k,
+    placement: (u == null ? void 0 : u.placement) || "bottom",
+    enabled: i && !!k,
+    highlightPadding: u == null ? void 0 : u.highlightPadding
+  });
+  L(() => {
+    i && g && h.current && h.current.focus();
+  }, [i, a, g, h]);
+  const b = S(() => {
+    var C;
+    (C = n.onSkip) == null || C.call(n, a), x();
+  }, [n, a, x]);
+  mt({
+    enabled: i && l,
+    onNext: f,
+    onPrev: p,
+    onSkip: b
+  });
+  const v = S(() => {
+    s && b();
+  }, [s, b]), z = E(null), [N, O] = A(!1);
+  return tt(() => {
+    if (i) {
+      const C = document.createElement("div");
+      return C.className = "rgs-portal", C.setAttribute("aria-live", "polite"), C.style.zIndex = String(Z(n.theme).zIndex), document.body.appendChild(C), z.current = C, O(!0), () => {
+        C.remove(), z.current = null, O(!1);
+      };
+    } else
+      O(!1);
+  }, [i, n.theme]), !i || !u || !N || !z.current ? null : rt(
+    /* @__PURE__ */ R(q, { children: [
+      /* @__PURE__ */ y(
+        nt,
+        {
+          targetElement: k,
+          highlightPadding: u.highlightPadding,
+          allowInteraction: u.allowInteraction,
+          onMaskClick: v,
+          placement: u.placement
+        }
+      ),
+      P || !W ? /* @__PURE__ */ y("div", { className: "rgs-waiting", children: "Loading..." }) : /* @__PURE__ */ y(
+        dt,
+        {
+          step: u,
+          stepIndex: a,
+          totalSteps: r.length,
+          position: g,
+          tooltipRef: h,
+          labels: m,
+          showSkip: o,
+          onNext: f,
+          onPrev: p,
+          onSkip: b
+        }
+      )
+    ] }),
+    z.current
+  );
+}, Et = () => D(B) ? /* @__PURE__ */ y(St, {}) : null, J = "rgs";
+function kt(t, e) {
+  const n = `${J}-${t}`;
+  let r = document.getElementById(n);
+  r || (r = document.createElement("style"), r.id = n, r.setAttribute("data-rgs", ""), document.head.appendChild(r)), r.textContent = e;
+}
+function Ct(t) {
+  const e = `${J}-${t}`, n = document.getElementById(e);
+  n && n.remove();
+}
+const Tt = `
+  .rgs-portal {
+    position: fixed;
+    inset: 0;
+    z-index: var(--rgs-z);
+    pointer-events: none;
+  }
+
+  .rgs-portal > * {
+    pointer-events: auto;
+  }
+
+  /* Spotlight overlay — uses box-shadow for the mask */
+  .rgs-spotlight {
+    position: fixed;
+    box-shadow: 0 0 0 9999px var(--rgs-overlay);
+    border-radius: 4px;
+    z-index: var(--rgs-z);
+    pointer-events: none;
+  }
+
+  .rgs-spotlight--interactive {
+    pointer-events: auto;
+  }
+
+  /* Clickable overlay behind everything to detect mask clicks */
+  .rgs-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--rgs-z) - 1);
+    cursor: default;
+  }
+
+  /* Tooltip container */
+  .rgs-tooltip {
+    position: fixed;
+    z-index: calc(var(--rgs-z) + 1);
+    background: var(--rgs-bg);
+    color: var(--rgs-text);
+    border-radius: var(--rgs-radius);
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+                0 3px 6px -4px rgba(0, 0, 0, 0.12),
+                0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    padding: 16px;
+    min-width: 280px;
+    max-width: 420px;
+    opacity: 0;
+    transition: opacity var(--rgs-duration) ease;
+    outline: none;
+  }
+
+  .rgs-tooltip--visible {
+    opacity: 1;
+  }
+
+  .rgs-tooltip__title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    line-height: 1.4;
+  }
+
+  .rgs-tooltip__content {
+    font-size: 14px;
+    line-height: 1.6;
+    margin: 0 0 16px 0;
+    color: var(--rgs-text);
+    opacity: 0.85;
+  }
+
+  .rgs-tooltip__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .rgs-tooltip__counter {
+    font-size: 12px;
+    color: var(--rgs-text);
+    opacity: 0.45;
+    flex-shrink: 0;
+  }
+
+  .rgs-tooltip__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+  }
+
+  /* Buttons */
+  .rgs-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 16px;
+    font-size: 14px;
+    line-height: 1.5;
+    border-radius: calc(var(--rgs-radius) - 2px);
+    cursor: pointer;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    font-family: inherit;
+  }
+
+  .rgs-btn:focus-visible {
+    outline: 2px solid var(--rgs-primary);
+    outline-offset: 2px;
+  }
+
+  .rgs-btn--primary {
+    background: var(--rgs-primary);
+    color: #fff;
+    border-color: var(--rgs-primary);
+  }
+
+  .rgs-btn--primary:hover {
+    opacity: 0.85;
+  }
+
+  .rgs-btn--default {
+    background: transparent;
+    color: var(--rgs-text);
+    border-color: #d9d9d9;
+  }
+
+  .rgs-btn--default:hover {
+    color: var(--rgs-primary);
+    border-color: var(--rgs-primary);
+  }
+
+  .rgs-btn--text {
+    background: transparent;
+    color: var(--rgs-text);
+    opacity: 0.65;
+    padding: 4px 8px;
+  }
+
+  .rgs-btn--text:hover {
+    opacity: 1;
+  }
+
+  /* Arrow (styles applied inline, this is a fallback) */
+  .rgs-arrow {
+    position: absolute;
+  }
+
+  /* Waiting state */
+  .rgs-waiting {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: calc(var(--rgs-z) + 1);
+    color: var(--rgs-bg);
+    font-size: 14px;
+  }
+`, Ft = ({ guide: t, options: e, children: n }) => {
+  L(() => {
+    const s = Z(e.theme), l = `
+      .rgs-portal { ${wt(s)} }
+      ${Tt}
+    `;
+    return kt("base", l), () => Ct("base");
+  }, [e.theme]);
+  const r = H(
+    () => ({ controller: t, options: e }),
+    [t, e]
+  );
+  return /* @__PURE__ */ R(B.Provider, { value: r, children: [
+    n,
+    /* @__PURE__ */ y(Et, {})
+  ] });
+}, At = "rgs:";
+function Lt(t) {
+  if (!t) return !1;
+  try {
+    return localStorage.getItem(t) === "done";
+  } catch {
+    return !1;
+  }
+}
+function _t(t) {
+  const e = t ? `${At}${t}` : null, [n, r] = A(() => Lt(e)), s = S(() => {
+    if (e) {
+      try {
+        localStorage.setItem(e, "done");
+      } catch {
+      }
+      r(!0);
+    }
+  }, [e]), o = S(() => {
+    if (e) {
+      try {
+        localStorage.removeItem(e);
+      } catch {
+      }
+      r(!1);
+    }
+  }, [e]);
+  return { isCompleted: n, markCompleted: s, reset: o };
+}
+function It(t, e) {
+  switch (e.type) {
+    case "START":
+      return { ...t, isActive: !0, currentStep: e.step, targetElement: null, isWaiting: !1 };
+    case "STOP":
+      return { isActive: !1, currentStep: 0, targetElement: null, isWaiting: !1 };
+    case "GO_TO":
+      return { ...t, currentStep: e.step, targetElement: null, isWaiting: !1 };
+    default:
+      return t;
+  }
+}
+const Pt = {
+  isActive: !1,
+  currentStep: 0,
+  targetElement: null,
+  isWaiting: !1
+};
+function Ot(t) {
+  const {
+    steps: e,
+    onComplete: n,
+    onSkip: r,
+    onStepChange: s,
+    initialStep: o = 0,
+    persistKey: l,
+    autoStart: c = !1
+  } = t, [d, i] = et(It, Pt), { isCompleted: a, markCompleted: f } = _t(l), p = E(!1), x = E(d);
+  x.current = d;
+  const m = E(e);
+  m.current = e;
+  const u = E(s);
+  u.current = s;
+  const w = E(n);
+  w.current = n, L(() => {
+    c && !a && e.length > 0 && i({ type: "START", step: o });
+  }, [c, a, e.length, o]);
+  const T = S(
+    async (g) => {
+      var h;
+      if (!p.current) {
+        p.current = !0;
+        try {
+          const b = m.current[x.current.currentStep], v = m.current[g];
+          b != null && b.afterLeave && await b.afterLeave(), v != null && v.beforeEnter && await v.beforeEnter(), i({ type: "GO_TO", step: g }), (h = u.current) == null || h.call(u, g);
+        } catch (b) {
+          console.error("[react-guide-step] Error during step transition:", b);
+        } finally {
+          p.current = !1;
+        }
+      }
+    },
+    []
+    // stable — reads from refs
+  ), P = S(() => {
+    if (a) return;
+    const g = o, h = m.current[g];
+    (async () => {
+      var v;
+      try {
+        h != null && h.beforeEnter && await h.beforeEnter(), i({ type: "START", step: g }), (v = u.current) == null || v.call(u, g);
+      } catch (z) {
+        console.error("[react-guide-step] Error in beforeEnter:", z);
+      }
+    })();
+  }, [a, o]), _ = S(() => {
+    i({ type: "STOP" });
+  }, []), I = S(() => {
+    const { isActive: g, currentStep: h } = x.current;
+    if (!g) return;
+    const b = h + 1;
+    if (b >= m.current.length) {
+      const v = m.current[h];
+      (async () => {
+        var N;
+        try {
+          v != null && v.afterLeave && await v.afterLeave(), i({ type: "STOP" }), f(), (N = w.current) == null || N.call(w);
+        } catch (O) {
+          console.error("[react-guide-step] Error in afterLeave:", O), i({ type: "STOP" });
+        }
+      })();
+    } else
+      T(b);
+  }, [T, f]), k = S(() => {
+    const { isActive: g, currentStep: h } = x.current;
+    !g || h <= 0 || T(h - 1);
+  }, [T]), W = S(
+    (g) => {
+      const { isActive: h } = x.current;
+      !h || g < 0 || g >= m.current.length || T(g);
+    },
+    [T]
+  );
+  return H(
+    () => ({
+      start: P,
+      stop: _,
+      next: I,
+      prev: k,
+      goTo: W,
+      isActive: d.isActive,
+      currentStep: d.currentStep,
+      totalSteps: e.length,
+      isCompleted: a
+    }),
+    [P, _, I, k, W, d.isActive, d.currentStep, e.length, a]
+  );
+}
+export {
+  xt as DEFAULT_THEME,
+  Ft as GuideProvider,
+  Ot as useGuide
+};