"use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { motion } from "motion/react"; import { cn, useMounted } from "@kineticui/core"; export type TourStep = { /** CSS selector of the element to highlight. */ target: string; title: string; body: React.ReactNode; placement?: "top" | "bottom" | "left" | "right"; }; export type TourProps = { steps: TourStep[]; open: boolean; onOpenChange: (open: boolean) => void; onFinish?: () => void; }; type Rect = { top: number; left: number; width: number; height: number }; const PAD = 6; /** Product tour: spotlights an element and explains it, step by step. */ export function Tour({ steps, open, onOpenChange, onFinish }: TourProps) { const mounted = useMounted(); const [index, setIndex] = React.useState(0); const [rect, setRect] = React.useState(null); const step = steps[index]; React.useEffect(() => { if (open) setIndex(0); }, [open]); React.useLayoutEffect(() => { if (!open || !step) return; const el = document.querySelector(step.target); if (!el) return setRect(null); el.scrollIntoView({ block: "center", behavior: "smooth" }); const measure = () => { const r = el.getBoundingClientRect(); setRect({ top: r.top - PAD, left: r.left - PAD, width: r.width + PAD * 2, height: r.height + PAD * 2 }); }; measure(); const t = window.setTimeout(measure, 350); window.addEventListener("resize", measure); window.addEventListener("scroll", measure, true); return () => { window.clearTimeout(t); window.removeEventListener("resize", measure); window.removeEventListener("scroll", measure, true); }; }, [open, step]); React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onOpenChange(false); if (e.key === "ArrowRight") next(); if (e.key === "ArrowLeft") setIndex((i) => Math.max(0, i - 1)); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }); function next() { if (index < steps.length - 1) setIndex(index + 1); else { onOpenChange(false); onFinish?.(); } } if (!mounted || !open || !step) return null; const placement = step.placement ?? "bottom"; const pop: React.CSSProperties = rect ? placement === "bottom" ? { top: rect.top + rect.height + 12, left: rect.left } : placement === "top" ? { top: rect.top - 12, left: rect.left, transform: "translateY(-100%)" } : placement === "right" ? { top: rect.top, left: rect.left + rect.width + 12 } : { top: rect.top, left: rect.left - 12, transform: "translateX(-100%)" } : { top: "50%", left: "50%", transform: "translate(-50%,-50%)" }; return createPortal( , document.body, ); }

Product Tour

Installation

Exports