@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-tooltip-tour/index.es.js

@@ -0,0 +1,346 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ChevronLeft as n, ChevronRight as r, SkipForward as i, X as a } from "lucide-react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/waka-tooltip-tour/index.tsx
+var l = "waka-tour-completed-", u = 8, d = 12;
+function f(e) {
+	return `${l}${e}`;
+}
+function p(e) {
+	if (typeof window > "u") return !1;
+	try {
+		return localStorage.getItem(f(e)) === "true";
+	} catch {
+		return !1;
+	}
+}
+function m(e) {
+	if (!(typeof window > "u")) try {
+		localStorage.setItem(f(e), "true");
+	} catch {}
+}
+function h(e) {
+	if (!(typeof window > "u")) try {
+		localStorage.removeItem(f(e));
+	} catch {}
+}
+function g(e) {
+	return typeof e == "string" ? document.querySelector(e) : e.current;
+}
+function _(e) {
+	return e.getBoundingClientRect();
+}
+function v(e, t, n, r, i) {
+	let a = d + u, o = 0, s = 0, c = 0, l = 0, f = 0, p = n, m = {
+		top: () => {
+			o = e.top - t.height - a, s = e.left + (e.width - t.width) / 2, c = t.height, l = t.width / 2 - u, f = 180;
+		},
+		"top-start": () => {
+			o = e.top - t.height - a, s = e.left, c = t.height, l = Math.min(e.width / 2, t.width / 4), f = 180;
+		},
+		"top-end": () => {
+			o = e.top - t.height - a, s = e.right - t.width, c = t.height, l = t.width - Math.min(e.width / 2, t.width / 4) - u * 2, f = 180;
+		},
+		bottom: () => {
+			o = e.bottom + a, s = e.left + (e.width - t.width) / 2, c = -u * 2, l = t.width / 2 - u, f = 0;
+		},
+		"bottom-start": () => {
+			o = e.bottom + a, s = e.left, c = -u * 2, l = Math.min(e.width / 2, t.width / 4), f = 0;
+		},
+		"bottom-end": () => {
+			o = e.bottom + a, s = e.right - t.width, c = -u * 2, l = t.width - Math.min(e.width / 2, t.width / 4) - u * 2, f = 0;
+		},
+		left: () => {
+			o = e.top + (e.height - t.height) / 2, s = e.left - t.width - a, c = t.height / 2 - u, l = t.width, f = 90;
+		},
+		"left-start": () => {
+			o = e.top, s = e.left - t.width - a, c = Math.min(e.height / 2, t.height / 4), l = t.width, f = 90;
+		},
+		"left-end": () => {
+			o = e.bottom - t.height, s = e.left - t.width - a, c = t.height - Math.min(e.height / 2, t.height / 4) - u * 2, l = t.width, f = 90;
+		},
+		right: () => {
+			o = e.top + (e.height - t.height) / 2, s = e.right + a, c = t.height / 2 - u, l = -u * 2, f = -90;
+		},
+		"right-start": () => {
+			o = e.top, s = e.right + a, c = Math.min(e.height / 2, t.height / 4), l = -u * 2, f = -90;
+		},
+		"right-end": () => {
+			o = e.bottom - t.height, s = e.right + a, c = t.height - Math.min(e.height / 2, t.height / 4) - u * 2, l = -u * 2, f = -90;
+		}
+	};
+	return m[n](), s < 16 ? s = 16 : s + t.width > r - 16 && (s = r - t.width - 16), o < 16 && n.startsWith("top") ? (p = n.replace("top", "bottom"), m[p]()) : o + t.height > i - 16 && n.startsWith("bottom") && (p = n.replace("bottom", "top"), m[p]()), {
+		top: o,
+		left: s,
+		arrowTop: c,
+		arrowLeft: l,
+		arrowRotation: f,
+		actualPlacement: p
+	};
+}
+function y({ tourId: e, persistCompletion: n = !0, autoStart: r = !1, autoStartDelay: i = 500 }) {
+	let [a, o] = t.useState(!1), [s, c] = t.useState(0), [l, u] = t.useState(!1);
+	t.useEffect(() => {
+		n && u(p(e));
+	}, [e, n]), t.useEffect(() => {
+		if (r && !l && !a) {
+			let e = setTimeout(() => {
+				o(!0);
+			}, i);
+			return () => clearTimeout(e);
+		}
+	}, [
+		r,
+		l,
+		a,
+		i
+	]);
+	let d = t.useCallback((e = 0) => {
+		c(e), o(!0);
+	}, []), f = t.useCallback(() => {
+		o(!1);
+	}, []), g = t.useCallback(() => {
+		c((e) => e + 1);
+	}, []), _ = t.useCallback(() => {
+		c((e) => Math.max(0, e - 1));
+	}, []), v = t.useCallback((e) => {
+		c(e);
+	}, []), y = t.useCallback(() => {
+		o(!1), n && (m(e), u(!0));
+	}, [e, n]), b = t.useCallback(() => {
+		o(!1);
+	}, []);
+	return {
+		isActive: a,
+		currentStep: s,
+		start: d,
+		stop: f,
+		next: g,
+		prev: _,
+		goTo: v,
+		complete: y,
+		skip: b,
+		reset: t.useCallback(() => {
+			h(e), u(!1), c(0);
+		}, [e]),
+		hasCompleted: l,
+		tourProps: {
+			isActive: a,
+			onActiveChange: t.useCallback((e) => {
+				o(e), e || c(0);
+			}, []),
+			onComplete: y,
+			onSkip: b,
+			onStepChange: c,
+			startAt: s
+		}
+	};
+}
+function b({ targetRect: t, padding: n, onClick: r, className: i }) {
+	if (!t) return /* @__PURE__ */ s("div", {
+		className: e("fixed inset-0 z-[9998] bg-black/60 transition-opacity duration-300", i),
+		onClick: r
+	});
+	let a = {
+		position: "fixed",
+		inset: 0,
+		zIndex: 9998,
+		background: `
+      linear-gradient(to right, rgba(0,0,0,0.6) ${t.left - n}px, transparent ${t.left - n}px),
+      linear-gradient(to left, rgba(0,0,0,0.6) ${window.innerWidth - t.right - n}px, transparent ${window.innerWidth - t.right - n}px),
+      linear-gradient(to bottom, rgba(0,0,0,0.6) ${t.top - n}px, transparent ${t.top - n}px),
+      linear-gradient(to top, rgba(0,0,0,0.6) ${window.innerHeight - t.bottom - n}px, transparent ${window.innerHeight - t.bottom - n}px)
+    `
+	};
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		className: e("transition-all duration-300", i),
+		style: a,
+		onClick: r
+	}), /* @__PURE__ */ s("div", {
+		className: "fixed z-[9999] pointer-events-none rounded-md ring-2 ring-primary ring-offset-2 ring-offset-transparent transition-all duration-300",
+		style: {
+			top: t.top - n,
+			left: t.left - n,
+			width: t.width + n * 2,
+			height: t.height + n * 2
+		}
+	})] });
+}
+function x({ top: e, left: t, rotation: n }) {
+	return /* @__PURE__ */ s("div", {
+		className: "absolute w-0 h-0",
+		style: {
+			top: e,
+			left: t,
+			transform: `rotate(${n}deg)`,
+			borderLeft: `${u}px solid transparent`,
+			borderRight: `${u}px solid transparent`,
+			borderBottom: `${u}px solid hsl(var(--popover))`
+		}
+	});
+}
+function S({ tourId: l, steps: u, isActive: d, onActiveChange: f, onComplete: p, onSkip: h, onStepChange: y, startAt: S = 0, autoAdvance: C, showSkip: w = !0, showProgress: T = !0, showNavigation: E = !0, persistCompletion: D = !0, className: O, overlayClassName: k, scrollToTarget: A = !0, scrollBehavior: j = "smooth", closeOnOverlayClick: M = !1, closeOnEscape: N = !0, skipText: P = "Skip tour", nextText: F = "Next", prevText: I = "Back", finishText: L = "Finish" }) {
+	let [R, z] = t.useState(S), [B, V] = t.useState(null), [H, U] = t.useState(null), [W, G] = t.useState(!1), K = t.useRef(null), q = t.useRef(void 0), J = u[R], Y = R === 0, X = R === u.length - 1;
+	t.useEffect(() => {
+		z(S);
+	}, [S]), t.useEffect(() => {
+		if (!d || !N) return;
+		let e = (e) => {
+			e.key === "Escape" && $();
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [d, N]), t.useEffect(() => {
+		if (!d || !J) return;
+		let e = () => {
+			let e = g(J.target);
+			if (e) {
+				let t = _(e);
+				V(t), A && (t.top >= 0 && t.left >= 0 && t.bottom <= window.innerHeight && t.right <= window.innerWidth || (e.scrollIntoView({
+					behavior: j,
+					block: "center",
+					inline: "center"
+				}), requestAnimationFrame(() => {
+					V(_(e));
+				})));
+			} else V(null);
+		};
+		G(!0), e();
+		let t = setTimeout(() => {
+			G(!1);
+		}, 300);
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+			clearTimeout(t), window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+		};
+	}, [
+		d,
+		J,
+		R,
+		A,
+		j
+	]), t.useEffect(() => {
+		!B || !K.current || !J || U(v(B, K.current.getBoundingClientRect(), J.placement || "bottom", window.innerWidth, window.innerHeight));
+	}, [B, J]), t.useEffect(() => {
+		if (!(!d || !C || X)) return q.current = setTimeout(() => {
+			Z();
+		}, C), () => {
+			q.current && clearTimeout(q.current);
+		};
+	}, [
+		d,
+		C,
+		R,
+		X
+	]);
+	let Z = () => {
+		if (X) ee();
+		else {
+			let e = R + 1;
+			z(e), y?.(e);
+		}
+	}, Q = () => {
+		if (!Y) {
+			let e = R - 1;
+			z(e), y?.(e);
+		}
+	}, ee = () => {
+		D && m(l), f?.(!1), p?.();
+	}, $ = () => {
+		f?.(!1), h?.();
+	}, te = () => {
+		M && $();
+	}, ne = () => {
+		J?.onAction?.(), Z();
+	};
+	if (!d || !J) return null;
+	let re = J.spotlightPadding ?? 8;
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(b, {
+		targetRect: J.highlight === !1 ? null : B,
+		padding: re,
+		onClick: te,
+		className: k
+	}), /* @__PURE__ */ c("div", {
+		ref: K,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": `tour-step-${J.id}-title`,
+		"aria-describedby": `tour-step-${J.id}-content`,
+		className: e("fixed z-[10000] w-80 max-w-[calc(100vw-32px)] rounded-lg border bg-popover p-4 shadow-xl", "transition-all duration-300", W ? "opacity-0 scale-95" : "opacity-100 scale-100", O),
+		style: {
+			top: H?.top ?? 0,
+			left: H?.left ?? 0
+		},
+		children: [
+			H && /* @__PURE__ */ s(x, {
+				top: H.arrowTop,
+				left: H.arrowLeft,
+				rotation: H.arrowRotation
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex items-start justify-between gap-2 mb-2",
+				children: [/* @__PURE__ */ s("h3", {
+					id: `tour-step-${J.id}-title`,
+					className: "font-semibold text-foreground",
+					children: J.title
+				}), w && /* @__PURE__ */ s("button", {
+					onClick: $,
+					className: "p-1 -m-1 rounded-md hover:bg-accent transition-colors",
+					"aria-label": "Close tour",
+					children: /* @__PURE__ */ s(a, { className: "h-4 w-4 text-muted-foreground" })
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				id: `tour-step-${J.id}-content`,
+				className: "text-sm text-muted-foreground mb-4",
+				children: J.content
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-2",
+					children: [T && /* @__PURE__ */ c("span", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							R + 1,
+							" of ",
+							u.length
+						]
+					}), w && !X && /* @__PURE__ */ c("button", {
+						onClick: $,
+						className: "text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1",
+						children: [/* @__PURE__ */ s(i, { className: "h-3 w-3" }), P]
+					})]
+				}), /* @__PURE__ */ c("div", {
+					className: "flex items-center gap-2",
+					children: [E && !Y && /* @__PURE__ */ c("button", {
+						onClick: Q,
+						className: "flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md hover:bg-accent transition-colors",
+						children: [/* @__PURE__ */ s(n, { className: "h-4 w-4" }), I]
+					}), J.actionText ? /* @__PURE__ */ s("button", {
+						onClick: ne,
+						className: "px-3 py-1.5 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+						children: J.actionText
+					}) : /* @__PURE__ */ c("button", {
+						onClick: Z,
+						className: "flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+						children: [X ? L : F, !X && /* @__PURE__ */ s(r, { className: "h-4 w-4" })]
+					})]
+				})]
+			}),
+			C && !X && /* @__PURE__ */ c("div", {
+				className: "absolute bottom-0 left-0 right-0 h-1 bg-muted rounded-b-lg overflow-hidden",
+				children: [/* @__PURE__ */ s("div", {
+					className: "h-full bg-primary",
+					style: {
+						width: "100%",
+						animation: `waka-tour-progress ${C}ms linear forwards`
+					}
+				}), /* @__PURE__ */ s("style", { dangerouslySetInnerHTML: { __html: "\n                  @keyframes waka-tour-progress {\n                    from { width: 0%; }\n                    to { width: 100%; }\n                  }\n                " } })]
+			})
+		]
+	})] });
+}
+//#endregion
+export { S as default, y as useTooltipTour };

package/dist/components/waka-tour-guide/index.cjs.js

@@ -0,0 +1,24 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`lucide-react`),i=require(`react/jsx-runtime`);function a(e,t={}){let{initialStep:r=0,autoStart:i=!1,storageKey:a,onComplete:o}=t,[s,c]=n.useState(i),[l,u]=n.useState(r),[d,f]=n.useState(!1);n.useEffect(()=>{if(a&&typeof window<`u`){let e=localStorage.getItem(a)===`true`;f(e),i&&!e&&c(!0)}},[a,i]);let p=n.useCallback(()=>{u(0),c(!0)},[]),m=n.useCallback(()=>{c(!1)},[]),h=n.useCallback(()=>{l<e.length-1&&u(e=>e+1)},[l,e.length]),g=n.useCallback(()=>{l>0&&u(e=>e-1)},[l]),_=n.useCallback(t=>{t>=0&&t<e.length&&u(t)},[e.length]),v=n.useCallback(()=>{c(!1)},[]),y=n.useCallback(()=>{c(!1),f(!0),a&&typeof window<`u`&&localStorage.setItem(a,`true`),o?.()},[a,o]),b=n.useCallback(()=>{u(0),f(!1),a&&typeof window<`u`&&localStorage.removeItem(a)},[a]),x=n.useCallback(e=>{c(e)},[]),S=n.useCallback(e=>{u(e)},[]);return{isOpen:s,currentStep:l,totalSteps:e.length,start:p,stop:m,next:h,previous:g,goToStep:_,skip:v,complete:y,reset:b,hasCompleted:d,tourProps:{isOpen:s,onOpenChange:x,currentStep:l,onStepChange:S,onComplete:y,onSkip:v}}}function o(e){return typeof e==`string`?document.querySelector(e):e.current}function s(e,t,n,r){let i=window.innerWidth,a=window.innerHeight,o=window.scrollY,s=window.scrollX,c=n,l=0,u=0;if(n===`auto`){let t=e.top,n=a-e.bottom,r=e.left,o=i-e.right;c=[{placement:`bottom`,space:n},{placement:`top`,space:t},{placement:`right`,space:o},{placement:`left`,space:r}].sort((e,t)=>t.space-e.space)[0].placement}switch(c){case`top`:l=e.top+o-t.height-r-12,u=e.left+s+e.width/2-t.width/2;break;case`bottom`:l=e.bottom+o+r+12,u=e.left+s+e.width/2-t.width/2;break;case`left`:l=e.top+o+e.height/2-t.height/2,u=e.left+s-t.width-r-12;break;case`right`:l=e.top+o+e.height/2-t.height/2,u=e.right+s+r+12;break}return u=Math.max(16,Math.min(u,i-t.width-16)),l=Math.max(o+16,Math.min(l,o+a-t.height-16)),{top:l,left:u,actualPlacement:c}}function c({targetRect:e,padding:n,color:r,opacity:a,pulseAnimation:o}){if(!e)return(0,i.jsx)(`div`,{className:`fixed inset-0 z-[9998] pointer-events-auto`,style:{backgroundColor:r,opacity:a}});let s=window.scrollY,c=window.scrollX,l={top:e.top+s-n,left:e.left+c-n,width:e.width+n*2,height:e.height+n*2};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:`fixed inset-0 z-[9998] pointer-events-auto transition-all duration-300`,style:{backgroundColor:r,opacity:a,clipPath:`polygon(
+            0% 0%,
+            0% 100%,
+            ${l.left}px 100%,
+            ${l.left}px ${l.top}px,
+            ${l.left+l.width}px ${l.top}px,
+            ${l.left+l.width}px ${l.top+l.height}px,
+            ${l.left}px ${l.top+l.height}px,
+            ${l.left}px 100%,
+            100% 100%,
+            100% 0%
+          )`}}),(0,i.jsx)(`div`,{className:t.cn(`absolute z-[9999] rounded-lg border-2 border-primary pointer-events-none transition-all duration-300`,o&&`animate-tour-pulse`),style:{top:l.top,left:l.left,width:l.width,height:l.height,boxShadow:`0 0 0 4px rgba(var(--primary), 0.2), 0 0 20px rgba(var(--primary), 0.3)`}}),(0,i.jsx)(`style`,{children:`
+        @keyframes tour-pulse {
+          0%, 100% {
+            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.3);
+          }
+          50% {
+            box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1), 0 0 30px rgba(59, 130, 246, 0.4);
+          }
+        }
+        .animate-tour-pulse {
+          animation: tour-pulse 2s ease-in-out infinite;
+        }
+      `})]})}var l=n.forwardRef(({step:e,stepIndex:n,totalSteps:a,position:o,placement:s,onNext:c,onPrevious:l,onSkip:u,onClose:d,showSkip:f,showProgress:p,showStepCounter:m,isFirstStep:h,isLastStep:g,labels:_,className:v},y)=>(0,i.jsxs)(`div`,{ref:y,className:t.cn(`absolute z-[10000] w-80 max-w-[calc(100vw-32px)]`,`bg-popover text-popover-foreground rounded-xl shadow-2xl border`,`animate-in fade-in-0 zoom-in-95 duration-200`,v),style:{top:o.top,left:o.left},role:`dialog`,"aria-modal":`true`,"aria-labelledby":`tour-step-${e.id}-title`,"aria-describedby":`tour-step-${e.id}-content`,children:[(0,i.jsx)(`div`,{className:t.cn(`absolute w-0 h-0 border-8`,{top:`bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-popover`,bottom:`top-0 left-1/2 -translate-x-1/2 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-popover`,left:`right-0 top-1/2 -translate-y-1/2 translate-x-full border-t-transparent border-b-transparent border-r-transparent border-l-popover`,right:`left-0 top-1/2 -translate-y-1/2 -translate-x-full border-t-transparent border-b-transparent border-l-transparent border-r-popover`,auto:`hidden`}[s])}),(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-2 p-4 pb-2`,children:[(0,i.jsx)(`h3`,{id:`tour-step-${e.id}-title`,className:`font-semibold text-base leading-tight`,children:e.title}),(0,i.jsx)(`button`,{onClick:d,className:`shrink-0 rounded-md p-1 hover:bg-muted transition-colors -mt-1 -mr-1`,"aria-label":`Close tour`,children:(0,i.jsx)(r.X,{className:`h-4 w-4 text-muted-foreground`})})]}),(0,i.jsx)(`div`,{id:`tour-step-${e.id}-content`,className:`px-4 pb-4 text-sm text-muted-foreground`,children:e.content}),p&&a>1&&(0,i.jsx)(`div`,{className:`flex items-center justify-center gap-1.5 px-4 pb-3`,children:Array.from({length:a}).map((e,a)=>(0,i.jsx)(r.Circle,{className:t.cn(`h-2 w-2 transition-colors`,a===n?`fill-primary text-primary`:a<n?`fill-primary/50 text-primary/50`:`fill-muted text-muted`)},a))}),(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-2 p-4 pt-2 border-t bg-muted/30 rounded-b-xl`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[f&&!g&&(0,i.jsx)(`button`,{onClick:u,className:`text-sm text-muted-foreground hover:text-foreground transition-colors`,children:_.skip}),m&&(0,i.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[n+1,` / `,a]})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[!h&&(0,i.jsxs)(`button`,{onClick:l,className:t.cn(`flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg`,`border hover:bg-muted transition-colors`),children:[(0,i.jsx)(r.ChevronLeft,{className:`h-4 w-4`}),_.previous]}),e.action?(0,i.jsx)(`button`,{onClick:e.action.onClick,className:t.cn(`flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg`,`bg-primary text-primary-foreground hover:bg-primary/90 transition-colors`),children:e.action.label}):(0,i.jsxs)(`button`,{onClick:c,className:t.cn(`flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg`,`bg-primary text-primary-foreground hover:bg-primary/90 transition-colors`),children:[g?_.finish:_.next,!g&&(0,i.jsx)(r.ChevronRight,{className:`h-4 w-4`})]})]})]})]}));l.displayName=`TourTooltip`;function u({steps:e,isOpen:t,onOpenChange:r,variant:a=`modal`,currentStep:u,onStepChange:d,onComplete:f,onSkip:p,showSkip:m=!0,showProgress:h=!0,showStepCounter:g=!1,keyboardNavigation:_=!0,scrollBehavior:v=`smooth`,scrollOffset:y=100,overlayColor:b=`rgba(0, 0, 0, 0.75)`,overlayOpacity:x=1,pulseAnimation:S=!0,tooltipClassName:C,labels:w={}}){let T=a===`modal`,[E,D]=n.useState(0),[O,k]=n.useState(null),[A,j]=n.useState({top:0,left:0}),[M,N]=n.useState(`bottom`),P=n.useRef(null),F=u??E,I=e[F],L=F===0,R=F===e.length-1,z={next:w.next??`Next`,previous:w.previous??`Back`,skip:w.skip??`Skip`,finish:w.finish??`Done`},B=n.useCallback(()=>{if(!t||!I)return;let e=o(I.target);if(!e){k(null);return}let n=e.getBoundingClientRect();k(n),requestAnimationFrame(()=>{if(P.current){let e=P.current.getBoundingClientRect(),t=I.spotlightPadding??8,{top:r,left:i,actualPlacement:a}=s(n,e,I.placement??`auto`,t);j({top:r,left:i}),N(a)}})},[t,I]),V=n.useCallback(async()=>{if(!I)return;let e=o(I.target);if(!e)return;let t=e.getBoundingClientRect();t.top>=y&&t.bottom<=window.innerHeight-y||(e.scrollIntoView({behavior:v,block:`center`}),await new Promise(e=>setTimeout(e,300)))},[I,v,y]),H=n.useCallback(()=>{let t=(u??E)+1;if(t>=e.length)f?.(),r(!1);else{let n=e[u??E];n?.beforeLeave&&n.beforeLeave(),e[t]?.beforeEnter&&e[t].beforeEnter(),d?d(t):D(t)}},[u,E,e,f,r,d]),U=n.useCallback(()=>{let t=(u??E)-1;if(t<0)return;let n=e[u??E];n?.beforeLeave&&n.beforeLeave(),e[t]?.beforeEnter&&e[t].beforeEnter(),d?d(t):D(t)},[u,E,e,d]),W=n.useCallback(()=>{p?.(),r(!1)},[p,r]),G=n.useCallback(()=>{r(!1)},[r]);if(n.useEffect(()=>{t&&(async()=>{I?.beforeEnter&&await I.beforeEnter(),await V(),B()})()},[t]),n.useEffect(()=>{t&&(async()=>{await V(),requestAnimationFrame(()=>{B()})})()},[F]),n.useEffect(()=>{if(!t)return;let e=()=>{B()};return window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[t,B]),n.useEffect(()=>{if(!t||!_)return;let e=e=>{switch(e.key){case`ArrowRight`:case`Enter`:e.preventDefault(),H();break;case`ArrowLeft`:e.preventDefault(),U();break;case`Escape`:e.preventDefault(),G();break}};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[t,_,H,U,G]),n.useEffect(()=>{if(t&&T){let e=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=e}}},[t,T]),!t||!I)return null;let K=I.spotlightPadding??8;return(0,i.jsxs)(`div`,{className:`tour-guide-container`,children:[T&&(0,i.jsx)(c,{targetRect:O,padding:K,color:b,opacity:x,pulseAnimation:S}),T&&I.disableInteraction&&O&&(0,i.jsx)(`div`,{className:`fixed z-[9999] pointer-events-auto`,style:{top:O.top+window.scrollY-K,left:O.left+window.scrollX-K,width:O.width+K*2,height:O.height+K*2}}),(0,i.jsx)(l,{ref:P,step:I,stepIndex:F,totalSteps:e.length,position:A,placement:M,onNext:H,onPrevious:U,onSkip:W,onClose:G,showSkip:m,showProgress:h,showStepCounter:g,isFirstStep:L,isLastStep:R,labels:z,className:C})]})}exports.default=u,exports.useTourGuide=a;

package/dist/components/waka-tour-guide/index.d.ts

@@ -123,5 +123,5 @@ export declare function useTourGuide(steps: TourStep[], options?: UseTourGuideOp
  * Use `WakaTour` compound (with `Tour.Step`, `Tour.Tooltip`) instead (futur).
  * See `docs/audit/remove-relocate.md` §2.4.
  */
-export declare function WakaTourGuide({ steps, isOpen, onOpenChange, variant, currentStep: controlledStep, onStepChange, onComplete, onSkip, showSkip, showProgress, showStepCounter, keyboardNavigation, scrollBehavior, scrollOffset, overlayColor, overlayOpacity, pulseAnimation, tooltipClassName, labels, }: WakaTourGuideProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaTourGuide({ steps, isOpen, onOpenChange, variant, currentStep: controlledStep, onStepChange, onComplete, onSkip, showSkip, showProgress, showStepCounter, keyboardNavigation, scrollBehavior, scrollOffset, overlayColor, overlayOpacity, pulseAnimation, tooltipClassName, labels, }: WakaTourGuideProps): import("react/jsx-runtime").JSX.Element | null;
 export default WakaTourGuide;