react-spotlight-tour-cct
Version:
A lightweight and customizable React component for creating guided tours in your web applications. Highlight elements and display step-by-step instructions to guide users through your app's features.
805 lines (802 loc) • 32.3 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".popup-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:50px;gap:6px}.left-buttons,.right-buttons{display:flex;gap:5px}.left-buttons{justify-content:flex-start}.right-buttons{justify-content:flex-end}.button-close{position:absolute;top:0;right:0;background:transparent;border:none;font-size:20px;color:#d42d2d;cursor:pointer}.button-skip,.button-next,.button-previous{padding:6px;font-size:12px;cursor:pointer;border-radius:10px;transition:background-color .2s}.button-previous{background-color:#000;color:#fff}.button-previous:disabled{background-color:#708090}.button-next{background-color:#00f;border:none;outline:none;color:#ffff86}.button-skip{background-color:#fff;color:green}.count-button{padding:6px;font-size:12px;cursor:pointer;color:#fff;background-color:#0da505;transition:background-color .2s;margin-bottom:2px;bottom:0}.button-restart{position:fixed;top:10px;right:10px;background-color:#007bff;color:#fff;border:none;border-radius:5px;padding:5px 10px;font-size:12px;cursor:pointer;z-index:1002;box-shadow:0 2px 5px #0003;transition:background-color .3s ease,transform .2s ease}.button-restart:hover{background-color:#0056b3;transform:scale(1.05)}.button-restart:active{transform:scale(.95)}.button-restart{position:fixed;top:20px;right:20px;padding:10px 20px;background-color:#28a745;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;z-index:1050;transition:background-color .3s ease}.button-restart:hover{background-color:#218838}.button-restart:focus{outline:none}@media (max-width: 600px){.button-restart,.button-next,.button-prev{padding:12px 20px;font-size:14px;border-radius:25px;background-color:#4caf50;color:#fff;border:none;cursor:pointer;transition:background-color .3s,transform .2s;display:inline-block;margin:8px 0;text-align:center;width:100%;box-sizing:border-box}.button-restart:hover,.button-next:hover,.button-prev:hover{background-color:#45a049;transform:translateY(-2px)}.button-restart:active,.button-next:active,.button-prev:active{background-color:#388e3c;transform:translateY(0)}.button-restart:focus,.button-next:focus,.button-prev:focus{outline:none;box-shadow:0 0 4px #48c76099}.button-restart{background-color:#ff9800}.button-restart:hover{background-color:#fb8c00}.button-restart:active{background-color:#f57c00}.button-prev{background-color:#2196f3}.button-prev:hover{background-color:#1976d2}.button-prev:active{background-color:#1565c0}.button-next{background-color:#4caf50}.button-next:hover{background-color:#388e3c}.button-next:active{background-color:#2e7d32}}.highlighted{position:relative;z-index:1001;border:4px solid #e6c74c;border-radius:8px;box-shadow:0 0 10px 3px #ffcc00b3;animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 10px 3px #ffffffb3}50%{box-shadow:0 0 20px 6px #fff}to{box-shadow:0 0 10px 3px #ffffffb3}}.tour-guide-popup{position:absolute;background:#57677f;border:1px solid #000000;border-radius:11px;box-shadow:0 4px 12px #00000026;height:auto;width:50%;max-width:410px;z-index:1001;padding:12px;box-sizing:border-box;transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease;min-height:100px;word-wrap:break-word;display:flex;flex-direction:column;justify-content:flex-start;transition:top .5s ease,left .5s ease,height .5s ease,opacity .3s ease}.tour-guide-popup.bottom{margin-top:10px}.tour-guide-popup.top{margin-bottom:10px}.tour-guide-popup.left,.tour-guide-popup.right{margin-left:10px;margin-right:10px}.popup-arrow{position:absolute;width:0;height:0;border-style:solid;transition:top .3s ease,left .3s ease,transform .3s ease}.progress-container{position:fixed;top:0;left:0;width:100%;height:6px;background-color:#f0f0f0;border-radius:3px;z-index:1050;margin-top:0}.progress-bar{height:100%;background-color:#4caf50;border-radius:3px;transition:width .3s ease}.tour-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#01000099;z-index:1000;pointer-events:all}----------------------------------------- .popup-arrow{position:absolute;width:0;height:0;border-style:solid}.popup-arrow.top{bottom:-9px;left:50%;transform:translate(-50%);border-width:10px 10px 0 10px;border-color:white transparent transparent transparent}.popup-arrow.bottom{top:-9px;left:50%;transform:translate(-50%);border-width:0 10px 10px 10px;border-color:transparent transparent white transparent}.popup-arrow.left{top:var(--arrow-offset, 50%);right:-9px;transform:translateY(-50%);border-width:10px 0 10px 10px;border-color:transparent transparent transparent white}.popup-arrow.right{top:var(--arrow-offset, 50%);left:-9px;transform:translateY(-50%);border-width:10px 10px 10px 0;border-color:transparent white transparent transparent}----------------------------- */ .popup-content{text-align:center;font-size:14px;color:#000000d6;line-height:1.2;margin-bottom:0}@media (max-width: 600px){.tour-guide-popup{width:85%;padding:10px;min-width:280px;max-width:90%;font-size:12px}.tooltip-arrow{border-width:8px}.popup-content{font-size:12px;color:#000;line-height:1.4;margin-bottom:15px}.tour-guide-popup.top{margin-bottom:20px}.tour-guide-popup.bottom{margin-top:20px}.tour-guide-popup.left,.tour-guide-popup.right{margin-left:10px;margin-right:10px}.progress-container{height:4px}.progress-bar{background-color:#4caf50;border-radius:2px}.button-close{font-size:18px}.button-restart,.button-next,.button-prev{padding:8px 16px;font-size:12px}}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import Le, { useEffect as te, useState as de, useCallback as pe } from "react";
var re = { exports: {} }, H = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var $e;
function vr() {
if ($e) return H;
$e = 1;
var l = Le, E = Symbol.for("react.element"), x = Symbol.for("react.fragment"), g = Object.prototype.hasOwnProperty, S = l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, j = { key: !0, ref: !0, __self: !0, __source: !0 };
function W(k, b, D) {
var m, w = {}, F = null, I = null;
D !== void 0 && (F = "" + D), b.key !== void 0 && (F = "" + b.key), b.ref !== void 0 && (I = b.ref);
for (m in b) g.call(b, m) && !j.hasOwnProperty(m) && (w[m] = b[m]);
if (k && k.defaultProps) for (m in b = k.defaultProps, b) w[m] === void 0 && (w[m] = b[m]);
return { $$typeof: E, type: k, key: F, ref: I, props: w, _owner: S.current };
}
return H.Fragment = x, H.jsx = W, H.jsxs = W, H;
}
var J = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var We;
function hr() {
return We || (We = 1, process.env.NODE_ENV !== "production" && function() {
var l = Le, E = Symbol.for("react.element"), x = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), j = Symbol.for("react.profiler"), W = Symbol.for("react.provider"), k = Symbol.for("react.context"), b = Symbol.for("react.forward_ref"), D = Symbol.for("react.suspense"), m = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), I = Symbol.for("react.offscreen"), q = Symbol.iterator, K = "@@iterator";
function G(e) {
if (e === null || typeof e != "object")
return null;
var r = q && e[q] || e[K];
return typeof r == "function" ? r : null;
}
var c = l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function s(e) {
{
for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
t[n - 1] = arguments[n];
d("error", e, t);
}
}
function d(e, r, t) {
{
var n = c.ReactDebugCurrentFrame, i = n.getStackAddendum();
i !== "" && (r += "%s", t = t.concat([i]));
var u = t.map(function(o) {
return String(o);
});
u.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, u);
}
}
var h = !1, y = !1, N = !1, A = !1, T = !1, C;
C = Symbol.for("react.module.reference");
function O(e) {
return !!(typeof e == "string" || typeof e == "function" || e === g || e === j || T || e === S || e === D || e === m || A || e === I || h || y || N || typeof e == "object" && e !== null && (e.$$typeof === F || e.$$typeof === w || e.$$typeof === W || e.$$typeof === k || e.$$typeof === b || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === C || e.getModuleId !== void 0));
}
function ne(e, r, t) {
var n = e.displayName;
if (n)
return n;
var i = r.displayName || r.name || "";
return i !== "" ? t + "(" + i + ")" : t;
}
function z(e) {
return e.displayName || "Context";
}
function $(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && s("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case g:
return "Fragment";
case x:
return "Portal";
case j:
return "Profiler";
case S:
return "StrictMode";
case D:
return "Suspense";
case m:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case k:
var r = e;
return z(r) + ".Consumer";
case W:
var t = e;
return z(t._context) + ".Provider";
case b:
return ne(e, e.render, "ForwardRef");
case w:
var n = e.displayName || null;
return n !== null ? n : $(e.type) || "Memo";
case F: {
var i = e, u = i._payload, o = i._init;
try {
return $(o(u));
} catch {
return null;
}
}
}
return null;
}
var Y = Object.assign, U = 0, ve, he, ge, be, me, ye, Ee;
function Re() {
}
Re.__reactDisabledLog = !0;
function Ve() {
{
if (U === 0) {
ve = console.log, he = console.info, ge = console.warn, be = console.error, me = console.group, ye = console.groupCollapsed, Ee = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: Re,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
U++;
}
}
function Me() {
{
if (U--, U === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: Y({}, e, {
value: ve
}),
info: Y({}, e, {
value: he
}),
warn: Y({}, e, {
value: ge
}),
error: Y({}, e, {
value: be
}),
group: Y({}, e, {
value: me
}),
groupCollapsed: Y({}, e, {
value: ye
}),
groupEnd: Y({}, e, {
value: Ee
})
});
}
U < 0 && s("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var ae = c.ReactCurrentDispatcher, oe;
function X(e, r, t) {
{
if (oe === void 0)
try {
throw Error();
} catch (i) {
var n = i.stack.trim().match(/\n( *(at )?)/);
oe = n && n[1] || "";
}
return `
` + oe + e;
}
}
var ie = !1, Z;
{
var Ue = typeof WeakMap == "function" ? WeakMap : Map;
Z = new Ue();
}
function _e(e, r) {
if (!e || ie)
return "";
{
var t = Z.get(e);
if (t !== void 0)
return t;
}
var n;
ie = !0;
var i = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var u;
u = ae.current, ae.current = null, Ve();
try {
if (r) {
var o = function() {
throw Error();
};
if (Object.defineProperty(o.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(o, []);
} catch (_) {
n = _;
}
Reflect.construct(e, [], o);
} else {
try {
o.call();
} catch (_) {
n = _;
}
e.call(o.prototype);
}
} else {
try {
throw Error();
} catch (_) {
n = _;
}
e();
}
} catch (_) {
if (_ && n && typeof _.stack == "string") {
for (var a = _.stack.split(`
`), R = n.stack.split(`
`), f = a.length - 1, p = R.length - 1; f >= 1 && p >= 0 && a[f] !== R[p]; )
p--;
for (; f >= 1 && p >= 0; f--, p--)
if (a[f] !== R[p]) {
if (f !== 1 || p !== 1)
do
if (f--, p--, p < 0 || a[f] !== R[p]) {
var P = `
` + a[f].replace(" at new ", " at ");
return e.displayName && P.includes("<anonymous>") && (P = P.replace("<anonymous>", e.displayName)), typeof e == "function" && Z.set(e, P), P;
}
while (f >= 1 && p >= 0);
break;
}
}
} finally {
ie = !1, ae.current = u, Me(), Error.prepareStackTrace = i;
}
var M = e ? e.displayName || e.name : "", L = M ? X(M) : "";
return typeof e == "function" && Z.set(e, L), L;
}
function Be(e, r, t) {
return _e(e, !1);
}
function He(e) {
var r = e.prototype;
return !!(r && r.isReactComponent);
}
function Q(e, r, t) {
if (e == null)
return "";
if (typeof e == "function")
return _e(e, He(e));
if (typeof e == "string")
return X(e);
switch (e) {
case D:
return X("Suspense");
case m:
return X("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case b:
return Be(e.render);
case w:
return Q(e.type, r, t);
case F: {
var n = e, i = n._payload, u = n._init;
try {
return Q(u(i), r, t);
} catch {
}
}
}
return "";
}
var B = Object.prototype.hasOwnProperty, we = {}, xe = c.ReactDebugCurrentFrame;
function ee(e) {
if (e) {
var r = e._owner, t = Q(e.type, e._source, r ? r.type : null);
xe.setExtraStackFrame(t);
} else
xe.setExtraStackFrame(null);
}
function Je(e, r, t, n, i) {
{
var u = Function.call.bind(B);
for (var o in e)
if (u(e, o)) {
var a = void 0;
try {
if (typeof e[o] != "function") {
var R = Error((n || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw R.name = "Invariant Violation", R;
}
a = e[o](r, o, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (f) {
a = f;
}
a && !(a instanceof Error) && (ee(i), s("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, o, typeof a), ee(null)), a instanceof Error && !(a.message in we) && (we[a.message] = !0, ee(i), s("Failed %s type: %s", t, a.message), ee(null));
}
}
}
var qe = Array.isArray;
function se(e) {
return qe(e);
}
function Ke(e) {
{
var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t;
}
}
function Ge(e) {
try {
return Te(e), !1;
} catch {
return !0;
}
}
function Te(e) {
return "" + e;
}
function Pe(e) {
if (Ge(e))
return s("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ke(e)), Te(e);
}
var je = c.ReactCurrentOwner, ze = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Ce, Oe;
function Xe(e) {
if (B.call(e, "ref")) {
var r = Object.getOwnPropertyDescriptor(e, "ref").get;
if (r && r.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function Ze(e) {
if (B.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function Qe(e, r) {
typeof e.ref == "string" && je.current;
}
function er(e, r) {
{
var t = function() {
Ce || (Ce = !0, s("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
}
function rr(e, r) {
{
var t = function() {
Oe || (Oe = !0, s("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: t,
configurable: !0
});
}
}
var tr = function(e, r, t, n, i, u, o) {
var a = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: E,
// Built-in properties that belong on the element
type: e,
key: r,
ref: t,
props: o,
// Record the component responsible for creating this element.
_owner: u
};
return a._store = {}, Object.defineProperty(a._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(a, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: n
}), Object.defineProperty(a, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: i
}), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
};
function nr(e, r, t, n, i) {
{
var u, o = {}, a = null, R = null;
t !== void 0 && (Pe(t), a = "" + t), Ze(r) && (Pe(r.key), a = "" + r.key), Xe(r) && (R = r.ref, Qe(r, i));
for (u in r)
B.call(r, u) && !ze.hasOwnProperty(u) && (o[u] = r[u]);
if (e && e.defaultProps) {
var f = e.defaultProps;
for (u in f)
o[u] === void 0 && (o[u] = f[u]);
}
if (a || R) {
var p = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
a && er(o, p), R && rr(o, p);
}
return tr(e, a, R, i, n, je.current, o);
}
}
var ue = c.ReactCurrentOwner, Se = c.ReactDebugCurrentFrame;
function V(e) {
if (e) {
var r = e._owner, t = Q(e.type, e._source, r ? r.type : null);
Se.setExtraStackFrame(t);
} else
Se.setExtraStackFrame(null);
}
var le;
le = !1;
function ce(e) {
return typeof e == "object" && e !== null && e.$$typeof === E;
}
function ke() {
{
if (ue.current) {
var e = $(ue.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function ar(e) {
return "";
}
var De = {};
function or(e) {
{
var r = ke();
if (!r) {
var t = typeof e == "string" ? e : e.displayName || e.name;
t && (r = `
Check the top-level render call using <` + t + ">.");
}
return r;
}
}
function Fe(e, r) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var t = or(r);
if (De[t])
return;
De[t] = !0;
var n = "";
e && e._owner && e._owner !== ue.current && (n = " It was passed a child from " + $(e._owner.type) + "."), V(e), s('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), V(null);
}
}
function Ae(e, r) {
{
if (typeof e != "object")
return;
if (se(e))
for (var t = 0; t < e.length; t++) {
var n = e[t];
ce(n) && Fe(n, r);
}
else if (ce(e))
e._store && (e._store.validated = !0);
else if (e) {
var i = G(e);
if (typeof i == "function" && i !== e.entries)
for (var u = i.call(e), o; !(o = u.next()).done; )
ce(o.value) && Fe(o.value, r);
}
}
}
function ir(e) {
{
var r = e.type;
if (r == null || typeof r == "string")
return;
var t;
if (typeof r == "function")
t = r.propTypes;
else if (typeof r == "object" && (r.$$typeof === b || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
r.$$typeof === w))
t = r.propTypes;
else
return;
if (t) {
var n = $(r);
Je(t, e.props, "prop", n, e);
} else if (r.PropTypes !== void 0 && !le) {
le = !0;
var i = $(r);
s("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", i || "Unknown");
}
typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && s("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function sr(e) {
{
for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
var n = r[t];
if (n !== "children" && n !== "key") {
V(e), s("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), V(null);
break;
}
}
e.ref !== null && (V(e), s("Invalid attribute `ref` supplied to `React.Fragment`."), V(null));
}
}
var Ie = {};
function Ne(e, r, t, n, i, u) {
{
var o = O(e);
if (!o) {
var a = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var R = ar();
R ? a += R : a += ke();
var f;
e === null ? f = "null" : se(e) ? f = "array" : e !== void 0 && e.$$typeof === E ? (f = "<" + ($(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : f = typeof e, s("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", f, a);
}
var p = nr(e, r, t, i, u);
if (p == null)
return p;
if (o) {
var P = r.children;
if (P !== void 0)
if (n)
if (se(P)) {
for (var M = 0; M < P.length; M++)
Ae(P[M], e);
Object.freeze && Object.freeze(P);
} else
s("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Ae(P, e);
}
if (B.call(r, "key")) {
var L = $(e), _ = Object.keys(r).filter(function(pr) {
return pr !== "key";
}), fe = _.length > 0 ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Ie[L + fe]) {
var dr = _.length > 0 ? "{" + _.join(": ..., ") + ": ...}" : "{}";
s(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, fe, L, dr, L), Ie[L + fe] = !0;
}
}
return e === g ? sr(p) : ir(p), p;
}
}
function ur(e, r, t) {
return Ne(e, r, t, !0);
}
function lr(e, r, t) {
return Ne(e, r, t, !1);
}
var cr = lr, fr = ur;
J.Fragment = g, J.jsx = cr, J.jsxs = fr;
}()), J;
}
var Ye;
function gr() {
return Ye || (Ye = 1, process.env.NODE_ENV === "production" ? re.exports = vr() : re.exports = hr()), re.exports;
}
var v = gr();
const br = ({
currentStep: l,
totalSteps: E,
onPrevious: x,
onNext: g,
onClose: S
}) => /* @__PURE__ */ v.jsxs("div", { className: "popup-buttons", children: [
/* @__PURE__ */ v.jsxs("div", { className: "left-buttons", children: [
/* @__PURE__ */ v.jsx(
"button",
{
onClick: x,
disabled: l === 0,
className: "button-previous",
children: "Previous"
}
),
/* @__PURE__ */ v.jsx("button", { onClick: S, className: "button-skip", children: "Skip" })
] }),
/* @__PURE__ */ v.jsxs("div", { className: "right-buttons", children: [
/* @__PURE__ */ v.jsx("button", { className: "count-button", disabled: !0, children: `${l + 1} of ${E}` }),
/* @__PURE__ */ v.jsx(
"button",
{
onClick: g,
className: "button-next",
children: l === E - 1 ? "Finish" : "Next"
}
)
] })
] }), mr = ({ targetId: l }) => (te(() => {
const E = document.getElementById(l);
return E && E.classList.add("highlighted"), () => {
const x = document.getElementById(l);
x && x.classList.remove("highlighted");
};
}, [l]), null), Er = ({ steps: l }) => {
var K, G;
const [E, x] = de(!1), [g, S] = de(0), [j, W] = de(null);
te(() => {
l.length > 0 && x(!0);
}, [l]);
const k = pe(
({ top: c, left: s, bottom: d, right: h }) => {
const y = window.innerWidth;
return [
{ position: "bottom", space: window.innerHeight - d },
{ position: "top", space: c },
{ position: "right", space: y - h },
{ position: "left", space: s }
].sort((A, T) => T.space - A.space);
},
[]
), b = pe(
(c, { top: s, left: d, width: h, height: y }) => {
let T = 0, C = 0, O = 0;
switch (c) {
case "bottom":
C = s + y + 15, O = d + h / 2 - 300 / 2, T = d + h / 2 - O;
break;
case "top":
C = s - 150 - 15, O = d + h / 2 - 300 / 2, T = d + h / 2 - O;
break;
case "right":
C = s + y / 2 - 150 / 2, O = d + h + 15, T = s + y / 2 - C;
break;
case "left":
C = s + y / 2 - 150 / 2, O = d - 300 - 15, T = s + y / 2 - C;
break;
}
return {
top: Math.max(C + window.scrollY, 0),
left: Math.max(O + window.scrollX, 0),
width: 300,
height: 150,
position: c,
arrowOffset: T
// Return the arrow offset
};
},
[]
);
te(() => {
var c, s;
if (E && ((c = l[g]) != null && c.id)) {
const d = document.getElementById(l[g].id);
if (d) {
d.scrollIntoView({ behavior: "smooth", block: "center" });
const { top: h, left: y, width: N, height: A } = d.getBoundingClientRect(), T = {
top: h,
left: y,
width: N,
height: A,
x: y,
y: h,
bottom: h + A,
right: y + N,
toJSON: () => ({
top: h,
left: y,
width: N,
height: A,
x: y,
y: h,
bottom: h + A,
right: y + N
})
}, O = ((s = k(T).find((z) => z.space >= 150)) == null ? void 0 : s.position) || "bottom", ne = b(O, T);
W(ne), d.style.zIndex = "1001", d.style.position = "relative";
}
}
return () => {
var h;
const d = document.getElementById((h = l[g]) == null ? void 0 : h.id);
d && (d.style.zIndex = "", d.style.position = "");
};
}, [E, g, l, k, b]);
const D = () => S((c) => Math.max(c - 1, 0)), m = () => x(!1), w = () => {
g === l.length - 1 ? m() : S((c) => c + 1);
}, F = () => {
S(0), x(!0);
}, I = pe((c) => {
c.key === "ArrowLeft" ? D() : c.key === "ArrowRight" && w();
}, [D, w]);
if (te(() => (window.addEventListener("keydown", I), () => {
window.removeEventListener("keydown", I);
}), [I]), !E || !j)
return /* @__PURE__ */ v.jsx("button", { onClick: F, className: "button-restart", children: "Restart Tour" });
const q = (g + 1) / l.length * 100;
return /* @__PURE__ */ v.jsxs(v.Fragment, { children: [
/* @__PURE__ */ v.jsx("div", { className: "progress-container", children: /* @__PURE__ */ v.jsx("div", { className: "progress-bar", style: { width: `${q}%` } }) }),
/* @__PURE__ */ v.jsx("div", { className: "tour-overlay", onClick: m }),
/* @__PURE__ */ v.jsx(mr, { targetId: (K = l[g]) == null ? void 0 : K.id }),
/* @__PURE__ */ v.jsxs(
"div",
{
className: `tour-guide-popup ${j.position}`,
style: {
top: j.top,
left: j.left
},
children: [
/* @__PURE__ */ v.jsx(
"div",
{
className: `popup-arrow ${j.position}`,
style: {
"--arrow-offset": `${j.arrowOffset}px`
}
}
),
/* @__PURE__ */ v.jsx("button", { onClick: m, className: "button-close", "aria-label": "Close", children: "×" }),
/* @__PURE__ */ v.jsxs("div", { className: "popup-content", children: [
/* @__PURE__ */ v.jsx("p", { children: (G = l[g]) == null ? void 0 : G.content }),
/* @__PURE__ */ v.jsx(
br,
{
currentStep: g,
totalSteps: l.length,
onPrevious: D,
onNext: w,
onClose: m
}
)
] })
]
}
)
] });
};
export {
Er as TourGuidePopup
};