@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Tour/Tour.js

@@ -0,0 +1,948 @@
+import { jsx as C, jsxs as de, Fragment as Te } from "react/jsx-runtime";
+import { useComposedRefs as ye, Slot as I, cn as L } from "@dsui/ui/index";
+import { offset as je, shift as qe, flip as Je, arrow as Qe, hide as Ze, limitShift as et, useFloating as tt, autoUpdate as nt } from "@floating-ui/react-dom";
+import { ChevronRight as ot, ChevronLeft as rt, X as st } from "lucide-react";
+import * as i from "react";
+import * as it from "react-dom";
+import fe from "../Button/Button.js";
+const pe = "Tour", ct = "TourPortal", le = "TourStep", ut = "TourArrow", at = "TourHeader", lt = "TourTitle", dt = "TourDescription", ft = "TourClose", pt = "TourPrev", mt = "TourNext", ht = "TourSkip", Pe = "TourFooter", vt = "tour.pointerDownOutside", Se = "tour.interactOutside", xe = "tour.openAutoFocus", Q = "tour.closeAutoFocus", X = { bubbles: !1, cancelable: !0 }, gt = 0, Et = 16, Re = 4, Ct = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+}, j = typeof window > "u" ? i.useEffect : i.useLayoutEffect;
+function Y(e) {
+  const t = i.useRef(e);
+  return j(() => {
+    t.current = e;
+  }), t;
+}
+function re(e) {
+  const t = i.useRef(null);
+  return t.current === null && (t.current = e()), t;
+}
+let ue = 0;
+function be() {
+  const e = document.createElement("span");
+  return e.setAttribute("data-tour-focus-guard", ""), e.tabIndex = 0, e.style.outline = "none", e.style.opacity = "0", e.style.position = "fixed", e.style.pointerEvents = "none", e;
+}
+function wt() {
+  i.useEffect(() => {
+    const e = document.querySelectorAll("[data-tour-focus-guard]");
+    return document.body.insertAdjacentElement(
+      "afterbegin",
+      e[0] ?? be()
+    ), document.body.insertAdjacentElement(
+      "beforeend",
+      e[1] ?? be()
+    ), ue++, () => {
+      if (ue === 1) {
+        const t = document.querySelectorAll("[data-tour-focus-guard]");
+        for (const n of t)
+          n.remove();
+      }
+      ue--;
+    };
+  }, []);
+}
+function Pt(e, t, n, c, r) {
+  const u = i.useRef(null), a = Y(c), o = Y(r), p = Y(n);
+  i.useEffect(() => {
+    if (!t) return;
+    const s = e.current;
+    if (!s) return;
+    const S = document.activeElement;
+    function F() {
+      if (!s) return [];
+      const l = [], d = document.createTreeWalker(
+        s,
+        NodeFilter.SHOW_ELEMENT,
+        {
+          acceptNode: (g) => {
+            const m = g, h = m.tagName === "INPUT" && m.type === "hidden";
+            return m.hidden || h ? NodeFilter.FILTER_SKIP : m.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+          }
+        }
+      );
+      for (; d.nextNode(); )
+        l.push(d.currentNode);
+      return l;
+    }
+    function _() {
+      const l = F(), d = l[0], g = l[l.length - 1];
+      return [d, g];
+    }
+    function v(l) {
+      if (!s) return;
+      const d = l.target;
+      s.contains(d) ? u.current = d : (u.current ?? F()[0])?.focus({ preventScroll: !0 });
+    }
+    function N(l) {
+      if (l.key !== "Tab" || l.altKey || l.ctrlKey || l.metaKey)
+        return;
+      const [d, g] = _();
+      if (!(d && g)) {
+        document.activeElement === s && l.preventDefault();
+        return;
+      }
+      !l.shiftKey && document.activeElement === g ? (l.preventDefault(), d?.focus({ preventScroll: !0 })) : l.shiftKey && document.activeElement === d && (l.preventDefault(), g?.focus({ preventScroll: !0 }));
+    }
+    const x = new CustomEvent(xe, X);
+    if (a.current && s.addEventListener(
+      xe,
+      a.current,
+      { once: !0 }
+    ), s.dispatchEvent(x), !x.defaultPrevented) {
+      const l = F();
+      l.length > 0 ? l[0]?.focus({ preventScroll: !0 }) : s.focus({ preventScroll: !0 });
+    }
+    return document.addEventListener("focusin", v), s.addEventListener("keydown", N), () => {
+      document.removeEventListener("focusin", v), s.removeEventListener("keydown", N), p.current || setTimeout(() => {
+        const l = new CustomEvent(
+          Q,
+          X
+        );
+        o.current && s.addEventListener(
+          Q,
+          o.current,
+          { once: !0 }
+        ), s.dispatchEvent(l), l.defaultPrevented || S && document.body.contains(S) && S.focus({ preventScroll: !0 }), o.current && s.removeEventListener(
+          Q,
+          o.current
+        );
+      }, 0);
+    };
+  }, [
+    e,
+    t,
+    a,
+    o,
+    p
+  ]);
+}
+const St = i.createContext(void 0);
+function xt(e) {
+  const t = i.useContext(St);
+  return e ?? t ?? "ltr";
+}
+function Oe(e) {
+  return e ? "open" : "closed";
+}
+function A(e) {
+  const t = U("useStore"), n = i.useCallback(
+    () => e(t.getState()),
+    [t, e]
+  );
+  return i.useSyncExternalStore(t.subscribe, n, n);
+}
+function Ae(e) {
+  return typeof e == "string" ? document.querySelector(e) : e && "current" in e ? e.current : e instanceof HTMLElement ? e : null;
+}
+function Fe() {
+  return typeof window > "u" ? "smooth" : window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+}
+function bt(e, t = Fe(), n) {
+  const c = {
+    top: 100,
+    bottom: 100,
+    left: 0,
+    right: 0,
+    ...n
+  }, r = e.getBoundingClientRect(), u = window.innerHeight, a = window.innerWidth;
+  if (!(r.top >= c.top && r.bottom <= u - c.bottom && r.left >= c.left && r.right <= a - c.right)) {
+    const s = r.top + window.scrollY - c.top;
+    window.scrollTo({
+      top: Math.max(0, s),
+      behavior: t
+    });
+  }
+}
+function Tt(e) {
+  const [t, n = "center"] = e.split("-");
+  return [t, n];
+}
+function yt(e, t) {
+  return t === "center" ? e : `${e}-${t}`;
+}
+function ae(e, t, n = Re) {
+  const c = t.getBoundingClientRect(), r = window.innerWidth, u = window.innerHeight, a = Math.max(0, c.left - n), o = Math.max(0, c.top - n), p = Math.min(r - a, c.width + n * 2), s = Math.min(u - o, c.height + n * 2), S = `polygon(0% 0%, 0% 100%, ${a}px 100%, ${a}px ${o}px, ${a + p}px ${o}px, ${a + p}px ${o + s}px, ${a}px ${o + s}px, ${a}px 100%, 100% 100%, 100% 0%)`;
+  e.setState("maskPath", S), e.setState("spotlightRect", { x: a, y: o, width: p, height: s });
+}
+const Ne = i.createContext(null);
+function U(e) {
+  const t = i.useContext(Ne);
+  if (!t)
+    throw new Error(`\`${e}\` must be used within \`${pe}\``);
+  return t;
+}
+const ke = i.createContext(null);
+function Z(e) {
+  const t = i.useContext(ke);
+  if (!t)
+    throw new Error(`\`${e}\` must be used within \`${pe}\``);
+  return t;
+}
+const De = i.createContext(null);
+function Ie(e) {
+  const t = i.useContext(De);
+  if (!t)
+    throw new Error(`\`${e}\` must be used within \`${le}\``);
+  return t;
+}
+const Le = i.createContext(!1), _e = i.createContext(null);
+function Rt(e) {
+  const t = i.useContext(_e);
+  if (!t)
+    throw new Error(`\`${e}\` must be used within \`${pe}\``);
+  return t;
+}
+function Ot(e) {
+  i.useEffect(() => {
+    if (!e) return;
+    const t = window.getComputedStyle(document.body).overflow, n = window.innerWidth - document.documentElement.clientWidth;
+    return document.body.style.overflow = "hidden", n > 0 && (document.body.style.paddingRight = `${n}px`), () => {
+      document.body.style.overflow = t, document.body.style.paddingRight = "";
+    };
+  }, [e]);
+}
+function Lt(e) {
+  const {
+    open: t,
+    defaultOpen: n = !1,
+    onOpenChange: c,
+    value: r,
+    defaultValue: u = 0,
+    onValueChange: a,
+    onComplete: o,
+    onSkip: p,
+    autoScroll: s = !0,
+    scrollBehavior: S = Fe(),
+    scrollOffset: F,
+    ..._
+  } = e, v = re(() => ({
+    open: t ?? n,
+    value: r ?? u,
+    steps: [],
+    maskPath: "",
+    spotlightRect: null
+  })), N = re(() => /* @__PURE__ */ new Set()), x = re(() => /* @__PURE__ */ new Map()), l = re(() => ({ current: 0 })), d = Y({
+    valueProp: r,
+    onOpenChange: c,
+    onValueChange: a,
+    onComplete: o,
+    onSkip: p,
+    autoScroll: s,
+    scrollBehavior: S,
+    scrollOffset: F
+  }), g = i.useMemo(
+    () => ({
+      subscribe: (m) => (N.current.add(m), () => N.current.delete(m)),
+      getState: () => v.current,
+      setState: (m, h) => {
+        if (!Object.is(v.current[m], h)) {
+          if (v.current[m] = h, m === "open" && typeof h == "boolean")
+            d.current.onOpenChange?.(h), h ? v.current.steps.length > 0 && v.current.value >= v.current.steps.length && g.setState("value", 0) : v.current.value < (v.current.steps.length || 0) - 1 && d.current.onSkip?.();
+          else if (m === "value" && typeof h == "number") {
+            const R = v.current.steps[v.current.value], b = v.current.steps[h];
+            if (R?.onStepLeave?.(), b?.onStepEnter?.(), h >= v.current.steps.length) {
+              d.current.onComplete?.(), d.current.valueProp !== void 0 && d.current.onValueChange?.(h), g.setState("open", !1);
+              return;
+            }
+            if (d.current.valueProp !== void 0) {
+              d.current.onValueChange?.(h);
+              return;
+            }
+            if (d.current.onValueChange?.(h), b && d.current.autoScroll) {
+              const K = Ae(b.target);
+              K && bt(
+                K,
+                d.current.scrollBehavior,
+                d.current.scrollOffset
+              );
+            }
+          }
+          g.notify();
+        }
+      },
+      notify: () => {
+        N.current.forEach((m) => {
+          m();
+        });
+      },
+      addStep: (m) => {
+        const h = `step-${l.current.current++}`, R = v.current.steps.length;
+        return x.current.set(h, R), v.current.steps = [...v.current.steps, m], g.notify(), { id: h, index: R };
+      },
+      removeStep: (m) => {
+        const h = x.current.get(m);
+        if (h !== void 0) {
+          v.current.steps = v.current.steps.filter(
+            (R, b) => b !== h
+          ), x.current.delete(m);
+          for (const [R, b] of x.current.entries())
+            b > h && x.current.set(R, b - 1);
+          g.notify();
+        }
+      }
+    }),
+    [v, N, x, l, d]
+  );
+  return j(() => {
+    t !== void 0 && g.setState("open", t);
+  }, [t, g]), j(() => {
+    r !== void 0 && g.setState("value", r);
+  }, [r, g]), /* @__PURE__ */ C(Ne.Provider, { value: g, children: /* @__PURE__ */ C(At, { ..._ }) });
+}
+function At(e) {
+  const {
+    onEscapeKeyDown: t,
+    onPointerDownOutside: n,
+    onInteractOutside: c,
+    onOpenAutoFocus: r,
+    onCloseAutoFocus: u,
+    dir: a,
+    alignOffset: o = gt,
+    sideOffset: p = Et,
+    spotlightPadding: s = Re,
+    dismissible: S = !0,
+    modal: F = !0,
+    stepFooter: _,
+    asChild: v,
+    ...N
+  } = e, x = U("TourRootImpl"), l = xt(a), [d, g] = i.useState(null), m = i.useRef(null), h = Y(t), R = Y(u);
+  i.useEffect(() => {
+    function M($) {
+      if (x.getState().open && $.key === "Escape") {
+        if (h.current && (h.current($), $.defaultPrevented))
+          return;
+        x.setState("open", !1);
+      }
+    }
+    return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
+  }, [x, h]);
+  const b = A((M) => M.open), K = i.useRef(void 0);
+  j(() => {
+    const M = K.current;
+    b && !M ? m.current = document.activeElement : !b && M && setTimeout(() => {
+      const $ = d ?? document.body, V = new CustomEvent(
+        Q,
+        X
+      );
+      if (R.current && $.addEventListener(
+        Q,
+        R.current,
+        { once: !0 }
+      ), $.dispatchEvent(V), !V.defaultPrevented) {
+        const z = m.current;
+        z && document.body.contains(z) && z.focus({ preventScroll: !0 });
+      }
+      m.current = null;
+    }, 0), K.current = b;
+  }, [b, d, R]);
+  const O = i.useMemo(
+    () => ({
+      dir: l,
+      alignOffset: o,
+      sideOffset: p,
+      spotlightPadding: s,
+      dismissible: S,
+      modal: F,
+      stepFooter: _,
+      onPointerDownOutside: n,
+      onInteractOutside: c,
+      onOpenAutoFocus: r,
+      onCloseAutoFocus: u
+    }),
+    [
+      l,
+      o,
+      p,
+      s,
+      S,
+      F,
+      _,
+      n,
+      c,
+      r,
+      u
+    ]
+  ), q = i.useMemo(
+    () => ({
+      portal: d,
+      onPortalChange: g
+    }),
+    [d]
+  );
+  Ot(b && F);
+  const se = v ? I : "div";
+  return /* @__PURE__ */ C(ke.Provider, { value: O, children: /* @__PURE__ */ C(_e.Provider, { value: q, children: /* @__PURE__ */ C(se, { "data-slot": "tour", dir: l, ...N }) }) });
+}
+function _t(e) {
+  const {
+    target: t,
+    side: n = "bottom",
+    sideOffset: c,
+    align: r = "center",
+    alignOffset: u,
+    collisionBoundary: a = [],
+    collisionPadding: o = 0,
+    arrowPadding: p = 0,
+    sticky: s = "partial",
+    hideWhenDetached: S = !1,
+    avoidCollisions: F = !0,
+    required: _ = !1,
+    forceMount: v = !1,
+    onStepEnter: N,
+    onStepLeave: x,
+    onPointerDownCapture: l,
+    onFocusCapture: d,
+    onBlurCapture: g,
+    children: m,
+    className: h,
+    style: R,
+    asChild: b,
+    ...K
+  } = e, O = U(le), [q, se] = i.useState(null), [M, $] = i.useState(null), V = i.useRef(null), z = i.useRef(""), me = i.useRef(-1), ee = i.useRef(!1), J = i.useRef(!1), k = A((f) => f.open), he = A((f) => f.value), Me = A((f) => f.steps), P = Z(le), te = c ?? P.sideOffset, ne = u ?? P.alignOffset;
+  j(() => {
+    const { id: f, index: y } = O.addStep({
+      target: t,
+      align: r,
+      alignOffset: ne,
+      side: n,
+      sideOffset: te,
+      collisionBoundary: a,
+      collisionPadding: o,
+      arrowPadding: p,
+      sticky: s,
+      hideWhenDetached: S,
+      avoidCollisions: F,
+      onStepEnter: N,
+      onStepLeave: x,
+      required: _
+    });
+    return z.current = f, me.current = y, () => {
+      O.removeStep(z.current);
+    };
+  }, [
+    t,
+    n,
+    te,
+    r,
+    ne,
+    o,
+    p,
+    s,
+    S,
+    F,
+    _,
+    N,
+    x,
+    O
+  ]);
+  const E = Me[he], w = E ? Ae(E.target) : null, D = me.current === he, $e = i.useMemo(() => {
+    if (!E) return [];
+    const f = E.sideOffset ?? te, y = E.alignOffset ?? ne, T = typeof E.collisionPadding == "number" ? E.collisionPadding : {
+      top: E.collisionPadding?.top ?? 0,
+      right: E.collisionPadding?.right ?? 0,
+      bottom: E.collisionPadding?.bottom ?? 0,
+      left: E.collisionPadding?.left ?? 0
+    }, B = Array.isArray(E.collisionBoundary) ? E.collisionBoundary : E.collisionBoundary ? [E.collisionBoundary] : [], H = B.length > 0, W = {
+      padding: T,
+      boundary: B.filter((G) => G !== null),
+      altBoundary: H
+    };
+    return [
+      je({
+        mainAxis: f,
+        alignmentAxis: y
+      }),
+      E.avoidCollisions && qe({
+        mainAxis: !0,
+        crossAxis: !1,
+        limiter: E.sticky === "partial" ? et() : void 0,
+        ...W
+      }),
+      E.avoidCollisions && Je({ ...W }),
+      q && Qe({ element: q, padding: E.arrowPadding }),
+      E.hideWhenDetached && Ze({
+        strategy: "referenceHidden",
+        ...W
+      })
+    ].filter(Boolean);
+  }, [E, te, ne, q]), Be = yt(
+    E?.side ?? n,
+    E?.align ?? r
+  ), {
+    refs: He,
+    floatingStyles: We,
+    placement: Ke,
+    middlewareData: oe
+  } = tt({
+    placement: Be,
+    middleware: $e,
+    strategy: "fixed",
+    whileElementsMounted: nt,
+    elements: {
+      reference: w
+    }
+  }), Ve = ye(He.setFloating, V), [ie, ce] = Tt(Ke), ve = oe.arrow?.x, ge = oe.arrow?.y, Ee = oe.arrow?.centerOffset !== 0, Ce = S && oe.hide?.referenceHidden, Ue = i.useMemo(
+    () => ({
+      arrowX: ve,
+      arrowY: ge,
+      placedAlign: ce,
+      placedSide: ie,
+      shouldHideArrow: Ee,
+      onArrowChange: se,
+      onFooterChange: $
+    }),
+    [ve, ge, ie, ce, Ee]
+  );
+  i.useEffect(() => {
+    if (k && w && D) {
+      let f = function() {
+        w && ae(O, w, P.spotlightPadding);
+      }, y = function() {
+        T === null && (T = requestAnimationFrame(() => {
+          w && ae(O, w, P.spotlightPadding), T = null;
+        }));
+      };
+      ae(O, w, P.spotlightPadding);
+      let T = null;
+      return window.addEventListener("resize", f), window.addEventListener("scroll", y, { passive: !0 }), () => {
+        window.removeEventListener("resize", f), window.removeEventListener("scroll", y), T !== null && cancelAnimationFrame(T);
+      };
+    }
+  }, [k, w, D, O, P.spotlightPadding]), i.useEffect(() => {
+    if (!k || !D) return;
+    const f = V.current;
+    if (!f) return;
+    const y = f.ownerDocument;
+    function T(H) {
+      if (H.target && !ee.current) {
+        const W = new CustomEvent(vt, {
+          ...X,
+          detail: { originalEvent: H }
+        });
+        P.onPointerDownOutside?.(W);
+        const G = new CustomEvent(Se, {
+          ...X,
+          detail: { originalEvent: H }
+        });
+        P.onInteractOutside?.(G), !W.defaultPrevented && !G.defaultPrevented && P.dismissible && O.setState("open", !1);
+      }
+      ee.current = !1;
+    }
+    const B = window.setTimeout(() => {
+      y.addEventListener("pointerdown", T);
+    }, 0);
+    return () => {
+      window.clearTimeout(B), y.removeEventListener("pointerdown", T);
+    };
+  }, [k, D, O, P]), i.useEffect(() => {
+    if (!k || !D) return;
+    const f = V.current;
+    if (!f) return;
+    const y = f.ownerDocument;
+    function T(B) {
+      const H = B.target, W = f?.contains(H), G = w?.contains(H);
+      if (B.target && !J.current && !W && !G) {
+        const we = new CustomEvent(Se, {
+          ...X,
+          detail: { originalEvent: B }
+        });
+        P.onInteractOutside?.(we), !we.defaultPrevented && P.dismissible && O.setState("open", !1);
+      }
+    }
+    return y.addEventListener("focusin", T), () => {
+      y.removeEventListener("focusin", T);
+    };
+  }, [k, D, O, P, w]);
+  const ze = i.useCallback(
+    (f) => {
+      l?.(f), ee.current = !0;
+    },
+    [l]
+  ), Ge = i.useCallback(
+    (f) => {
+      d?.(f), J.current = !0;
+    },
+    [d]
+  ), Xe = i.useCallback(
+    (f) => {
+      g?.(f), J.current = !1;
+    },
+    [g]
+  );
+  if (i.useEffect(() => {
+    if (!k || !D || !w) return;
+    function f() {
+      ee.current = !0;
+    }
+    function y() {
+      J.current = !0;
+    }
+    function T() {
+      J.current = !1;
+    }
+    return w.addEventListener(
+      "pointerdown",
+      f,
+      !0
+    ), w.addEventListener("focus", y, !0), w.addEventListener("blur", T, !0), () => {
+      w.removeEventListener(
+        "pointerdown",
+        f,
+        !0
+      ), w.removeEventListener("focus", y, !0), w.removeEventListener("blur", T, !0);
+    };
+  }, [k, D, w]), wt(), Pt(
+    V,
+    k && D,
+    k,
+    P.onOpenAutoFocus,
+    P.onCloseAutoFocus
+  ), !k || !E || !w && !v || !D)
+    return null;
+  const Ye = b ? I : "div";
+  return /* @__PURE__ */ C(De.Provider, { value: Ue, children: /* @__PURE__ */ de(
+    Ye,
+    {
+      ref: Ve,
+      "data-slot": "tour-step",
+      "data-side": ie,
+      "data-align": ce,
+      dir: P.dir,
+      tabIndex: -1,
+      ...K,
+      onPointerDownCapture: ze,
+      onFocusCapture: Ge,
+      onBlurCapture: Xe,
+      className: L(
+        "fixed z-50 flex w-80 flex-col gap-4 rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+        h
+      ),
+      style: {
+        ...R,
+        ...We,
+        visibility: Ce ? "hidden" : void 0,
+        pointerEvents: Ce ? "none" : void 0
+      },
+      children: [
+        m,
+        !M && /* @__PURE__ */ C(Le.Provider, { value: !0, children: P.stepFooter })
+      ]
+    }
+  ) });
+}
+function Mt(e) {
+  const {
+    asChild: t,
+    className: n,
+    style: c,
+    forceMount: r = !1,
+    ...u
+  } = e, a = A((s) => s.open), o = A((s) => s.maskPath);
+  return !a && !r ? null : /* @__PURE__ */ C(
+    t ? I : "div",
+    {
+      "data-slot": "tour-spotlight",
+      "data-state": Oe(a),
+      ...u,
+      className: L(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
+        n
+      ),
+      style: {
+        clipPath: o,
+        ...c
+      }
+    }
+  );
+}
+function $t(e) {
+  const { asChild: t, className: n, style: c, forceMount: r = !1, ...u } = e, a = A((s) => s.open), o = A((s) => s.spotlightRect);
+  return !a && !r || !o ? null : /* @__PURE__ */ C(
+    t ? I : "div",
+    {
+      "data-slot": "tour-spotlight-ring",
+      "data-state": Oe(a),
+      ...u,
+      className: L(
+        "pointer-events-none fixed z-40 border-ring ring-[3px] ring-ring/50",
+        n
+      ),
+      style: {
+        left: o.x,
+        top: o.y,
+        width: o.width,
+        height: o.height,
+        ...c
+      }
+    }
+  );
+}
+function Bt(e) {
+  const { children: t, container: n } = e, c = Rt(ct), [r, u] = i.useState(!1);
+  if (j(() => {
+    u(!0);
+    const o = n ?? document.body;
+    return c?.onPortalChange(o), () => {
+      c?.onPortalChange(null);
+    };
+  }, [n, c]), !r) return null;
+  const a = n ?? c?.portal ?? document.body;
+  return it.createPortal(t, a);
+}
+function Ht(e) {
+  const {
+    width: t = 10,
+    height: n = 5,
+    className: c,
+    children: r,
+    asChild: u,
+    ...a
+  } = e, o = Ie(ut), p = Ct[o.placedSide];
+  return /* @__PURE__ */ C(
+    "span",
+    {
+      ref: o.onArrowChange,
+      "data-slot": "tour-arrow",
+      style: {
+        position: "absolute",
+        left: o.arrowX != null ? `${o.arrowX}px` : void 0,
+        top: o.arrowY != null ? `${o.arrowY}px` : void 0,
+        [p]: 0,
+        transformOrigin: {
+          top: "",
+          right: "0 0",
+          bottom: "center 0",
+          left: "100% 0"
+        }[o.placedSide],
+        transform: {
+          top: "translateY(100%)",
+          right: "translateY(50%) rotate(90deg) translateX(-50%)",
+          bottom: "rotate(180deg)",
+          left: "translateY(50%) rotate(-90deg) translateX(50%)"
+        }[o.placedSide],
+        visibility: o.shouldHideArrow ? "hidden" : void 0
+      },
+      children: /* @__PURE__ */ C(
+        "svg",
+        {
+          viewBox: "0 0 30 10",
+          preserveAspectRatio: "none",
+          width: t,
+          height: n,
+          ...a,
+          className: L("block fill-popover stroke-border", c),
+          children: u ? r : /* @__PURE__ */ C("polygon", { points: "0,0 30,0 15,10" })
+        }
+      )
+    }
+  );
+}
+function Wt(e) {
+  const { asChild: t, className: n, ...c } = e, r = Z(at);
+  return /* @__PURE__ */ C(
+    t ? I : "div",
+    {
+      "data-slot": "tour-header",
+      dir: r.dir,
+      ...c,
+      className: L(
+        "flex flex-col gap-1.5 text-center sm:text-left",
+        n
+      )
+    }
+  );
+}
+function Kt(e) {
+  const { asChild: t, className: n, ...c } = e, r = Z(lt);
+  return /* @__PURE__ */ C(
+    t ? I : "div",
+    {
+      "data-slot": "tour-title",
+      dir: r.dir,
+      ...c,
+      className: L(
+        "font-semibold text-lg leading-none tracking-tight",
+        n
+      )
+    }
+  );
+}
+function Vt(e) {
+  const { asChild: t, className: n, ...c } = e, r = Z(dt);
+  return /* @__PURE__ */ C(
+    t ? I : "div",
+    {
+      "data-slot": "tour-description",
+      dir: r.dir,
+      ...c,
+      className: L("text-muted-foreground text-sm", n)
+    }
+  );
+}
+function Ut(e) {
+  const {
+    asChild: t,
+    className: n,
+    onClick: c,
+    ...r
+  } = e, u = U(ft), a = i.useCallback(
+    (p) => {
+      c?.(p), !p.defaultPrevented && u.setState("open", !1);
+    },
+    [u, c]
+  );
+  return /* @__PURE__ */ C(
+    t ? I : "button",
+    {
+      type: "button",
+      "aria-label": "Close tour",
+      className: L(
+        "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        n
+      ),
+      onClick: a,
+      ...r,
+      children: /* @__PURE__ */ C(st, { className: "size-4" })
+    }
+  );
+}
+function zt(e) {
+  const { children: t, onClick: n, ...c } = e, r = U(pt), u = A((o) => o.value), a = i.useCallback(
+    (o) => {
+      n?.(o), !o.defaultPrevented && u > 0 && r.setState("value", u - 1);
+    },
+    [u, r, n]
+  );
+  return /* @__PURE__ */ C(
+    fe,
+    {
+      type: "button",
+      "aria-label": "Previous step",
+      "data-slot": "tour-prev",
+      variant: "outline",
+      ...c,
+      onClick: a,
+      disabled: u === 0,
+      children: t ?? /* @__PURE__ */ de(Te, { children: [
+        /* @__PURE__ */ C(rt, {}),
+        "Previous"
+      ] })
+    }
+  );
+}
+function Gt(e) {
+  const { children: t, onClick: n, ...c } = e, r = U(mt), u = A((s) => s.value), a = A((s) => s.steps), o = u === a.length - 1, p = i.useCallback(
+    (s) => {
+      n?.(s), !s.defaultPrevented && r.setState("value", u + 1);
+    },
+    [u, r, n]
+  );
+  return /* @__PURE__ */ C(
+    fe,
+    {
+      type: "button",
+      "aria-label": "Next step",
+      "data-slot": "tour-next",
+      ...c,
+      onClick: p,
+      children: t ?? /* @__PURE__ */ de(Te, { children: [
+        o ? "Finish" : "Next",
+        !o && /* @__PURE__ */ C(ot, {})
+      ] })
+    }
+  );
+}
+function Xt(e) {
+  const { children: t, onClick: n, ...c } = e, r = U(ht), u = i.useCallback(
+    (a) => {
+      n?.(a), !a.defaultPrevented && r.setState("open", !1);
+    },
+    [r, n]
+  );
+  return /* @__PURE__ */ C(
+    fe,
+    {
+      type: "button",
+      "aria-label": "Skip tour",
+      "data-slot": "tour-skip",
+      variant: "outline",
+      ...c,
+      onClick: u,
+      children: t ?? "Skip"
+    }
+  );
+}
+function Yt(e) {
+  const {
+    format: t = (s, S) => `${s} / ${S}`,
+    asChild: n,
+    className: c,
+    children: r,
+    ...u
+  } = e, a = A((s) => s.value), o = A((s) => s.steps);
+  return /* @__PURE__ */ C(
+    n ? I : "div",
+    {
+      "data-slot": "tour-step-counter",
+      ...u,
+      className: L("text-muted-foreground text-sm", c),
+      children: r ?? t(a + 1, o.length)
+    }
+  );
+}
+function jt(e) {
+  const { asChild: t, className: n, ref: c, ...r } = e, u = Ie(Pe), a = i.useContext(Le), o = Z(Pe), p = ye(
+    c,
+    a ? void 0 : u.onFooterChange
+  );
+  return /* @__PURE__ */ C(
+    t ? I : "div",
+    {
+      "data-slot": "tour-footer",
+      dir: o.dir,
+      ...r,
+      ref: p,
+      className: L(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        n
+      )
+    }
+  );
+}
+export {
+  Ht as Arrow,
+  Ut as Close,
+  Vt as Description,
+  jt as Footer,
+  Wt as Header,
+  Gt as Next,
+  Bt as Portal,
+  zt as Prev,
+  Lt as Root,
+  Xt as Skip,
+  Mt as Spotlight,
+  $t as SpotlightRing,
+  _t as Step,
+  Yt as StepCounter,
+  Kt as Title,
+  Lt as Tour,
+  Ht as TourArrow,
+  Ut as TourClose,
+  Vt as TourDescription,
+  jt as TourFooter,
+  Wt as TourHeader,
+  Gt as TourNext,
+  Bt as TourPortal,
+  zt as TourPrev,
+  Xt as TourSkip,
+  Mt as TourSpotlight,
+  $t as TourSpotlightRing,
+  _t as TourStep,
+  Yt as TourStepCounter,
+  Kt as TourTitle
+};
+//# sourceMappingURL=Tour.js.map