react-product-tour-guide 0.2.0

package/dist/index.mjs

@@ -0,0 +1,1311 @@
+import React5, { createContext, memo, useMemo, useState, useRef, useEffect, useCallback, Component, useContext } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { offset, flip, shift, useFloating, autoUpdate } from '@floating-ui/react';
+import { clsx } from 'clsx';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/styles/inject.ts
+var __tourStyles__ = `@layer react-product-tour {
+
+:root {
+  /* Tour Component Colors */
+  --tour--overlay--background: rgba(0, 0, 0, 0.5);
+  --tour--tooltip--background: white;
+  --tour--tooltip--border: #e5e7eb;
+  --tour--tooltip--text: black;
+  --tour--tooltip--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+  /* Tour Component Spacing */
+  --tour--tooltip--padding: 1rem;
+  --tour--tooltip--gap: 0.5rem;
+
+  /* Tour Component Border */
+  --tour--tooltip--radius: 0.5rem;
+  --tour--tooltip--border-width: 1px;
+
+  /* Tour Component Animation */
+  --tour--tooltip--transition: all 0.2s ease-in-out;
+
+  /* Tour Highlight */
+  --tour--highlight--padding: 8px;
+  --tour--highlight--radius: 10px;
+
+  /* Tour Button Colors */
+  --tour--button--primary--background: #646cff;
+  --tour--button--primary--text: white;
+  --tour--button--secondary--background: #e5e7eb;
+  --tour--button--secondary--text: #374151;
+
+  /* Tour Tooltip Size */
+  --tour--tooltip--max-width: 300px;
+
+  /* Tour Progress Bar */
+  --tour--progress--background: #e5e7eb;
+  --tour--progress--fill: #f43f5e;
+}
+
+/* Dark mode variables */
+.dark {
+  --tour--tooltip--background: #1f2937;
+  --tour--tooltip--border: #374151;
+  --tour--tooltip--text: #f9fafb;
+}
+
+/* Screen reader utilities */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Focus styles */
+.tour-button:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.tour-button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .tour-button {
+    border: 2px solid currentColor;
+  }
+
+  .tour-tooltip {
+    border: 2px solid currentColor;
+  }
+
+  .tour-highlight {
+    border: 2px solid currentColor;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .tour-tooltip,
+  .tour-highlight,
+  .tour-overlay,
+  .tour-button {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* Base tooltip styles */
+.tour-tooltip {
+  position: absolute;
+  background-color: var(--tour--tooltip--background);
+  color: var(--tour--tooltip--text);
+  padding: var(--tour--tooltip--padding);
+  border-radius: var(--tour--tooltip--radius);
+  box-shadow: var(--tour--tooltip--shadow);
+  max-width: var(--tour--tooltip--max-width);
+  z-index: 1001;
+  opacity: 0;
+  border: var(--tour--tooltip--border-width) solid var(--tour--tooltip--border);
+}
+
+/* Allow Tailwind classes to override base styles */
+.tour-tooltip[class*="bg-"] {
+  background-color: inherit;
+}
+
+.tour-tooltip[class*="text-"] {
+  color: inherit;
+}
+
+.tour-tooltip[class*="border-"] {
+  border-color: inherit;
+}
+
+.tour-tooltip[class*="rounded-"] {
+  border-radius: inherit;
+}
+
+.tour-tooltip[class*="shadow-"] {
+  box-shadow: inherit;
+}
+
+.tour-tooltip[class*="p-"] {
+  padding: inherit;
+}
+
+/* Animation variants */
+.tour-tooltip[data-animation="slide"] {
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transform-origin: center;
+  transform: scale(0.95);
+}
+
+.tour-tooltip[data-animation="slide"][data-placement="top"] {
+  transform: translateY(10px) scale(0.95);
+}
+
+.tour-tooltip[data-animation="slide"][data-placement="bottom"] {
+  transform: translateY(-10px) scale(0.95);
+}
+
+.tour-tooltip[data-animation="slide"][data-placement="left"] {
+  transform: translateX(10px) scale(0.95);
+}
+
+.tour-tooltip[data-animation="slide"][data-placement="right"] {
+  transform: translateX(-10px) scale(0.95);
+}
+
+.tour-tooltip[data-animation="slide"].visible {
+  opacity: 1;
+  transform: scale(1) translate(0, 0);
+}
+
+.tour-tooltip[data-animation="bounce"] {
+  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease-in-out;
+  transform-origin: center;
+  transform: scale(0.3);
+}
+
+.tour-tooltip[data-animation="bounce"][data-placement="top"] {
+  transform: translateY(20px) scale(0.3);
+}
+
+.tour-tooltip[data-animation="bounce"][data-placement="bottom"] {
+  transform: translateY(-20px) scale(0.3);
+}
+
+.tour-tooltip[data-animation="bounce"][data-placement="left"] {
+  transform: translateX(20px) scale(0.3);
+}
+
+.tour-tooltip[data-animation="bounce"][data-placement="right"] {
+  transform: translateX(-20px) scale(0.3);
+}
+
+.tour-tooltip[data-animation="bounce"].visible {
+  opacity: 1;
+  transform: scale(1) translate(0, 0);
+}
+
+.tour-tooltip[data-animation="fade"] {
+  transition: all 0.4s ease-out;
+  transform: translateY(10px);
+  opacity: 0;
+}
+
+.tour-tooltip[data-animation="fade"].visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.tour-tooltip-title {
+  margin: 0 0 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--tour--tooltip--text);
+  line-height: 1.3;
+}
+
+.tour-tooltip-content {
+  margin-bottom: 1rem;
+}
+
+.tour-buttons {
+  display: flex;
+  gap: var(--tour--tooltip--gap);
+  justify-content: flex-end;
+}
+
+/* Tooltip arrow */
+.tour-tooltip::before {
+  content: '';
+  position: absolute;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: var(--tour--tooltip--background);
+  border: var(--tour--tooltip--border-width) solid var(--tour--tooltip--border);
+  transform: rotate(45deg);
+}
+
+/* Tooltip arrow positions */
+.tour-tooltip[data-placement="top"]::before {
+  bottom: -0.375rem;
+  border-right: none;
+  border-bottom: none;
+}
+
+.tour-tooltip[data-placement="bottom"]::before {
+  top: -0.375rem;
+  border-left: none;
+  border-top: none;
+}
+
+.tour-tooltip[data-placement="left"]::before {
+  right: -0.375rem;
+  border-top: none;
+  border-right: none;
+}
+
+.tour-tooltip[data-placement="right"]::before {
+  left: -0.375rem;
+  border-bottom: none;
+  border-left: none;
+}
+
+/* Button styles */
+.tour-button {
+  border-radius: var(--tour--tooltip--radius);
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border: none;
+  transition: var(--tour--tooltip--transition);
+}
+
+.tour-button-primary {
+  background-color: var(--tour--button--primary--background);
+  color: var(--tour--button--primary--text);
+}
+
+.tour-button-secondary {
+  background-color: var(--tour--button--secondary--background);
+  color: var(--tour--button--secondary--text);
+}
+
+/* Allow Tailwind classes to override button styles */
+.tour-button[class*="bg-"] {
+  background-color: inherit;
+}
+
+.tour-button[class*="text-"] {
+  color: inherit;
+}
+
+.tour-button[class*="rounded-"] {
+  border-radius: inherit;
+}
+
+.tour-button[class*="p-"] {
+  padding: inherit;
+}
+
+.tour-button[class*="font-"] {
+  font-weight: inherit;
+}
+
+.tour-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dark .tour-button-secondary {
+  background-color: #4b5563;
+}
+
+/* Overlay styles */
+.tour-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--tour--overlay--background);
+  z-index: 1000;
+}
+
+.tour-overlay[class*="bg-"] {
+  background-color: inherit;
+}
+
+.tour-overlay-blur {
+  backdrop-filter: blur(2px);
+}
+
+/* Highlight styles */
+.tour-highlight {
+  position: absolute;
+  border-radius: var(--tour--highlight--radius);
+  box-shadow: 0 0 0 9999px var(--tour--overlay--background);
+  z-index: 1001;
+  opacity: 0;
+}
+
+.tour-highlight[class*="rounded-"] {
+  border-radius: inherit;
+}
+
+.tour-highlight[class*="shadow-"] {
+  box-shadow: inherit;
+}
+
+.tour-highlight[data-animation="slide"] {
+  transition: all 0.3s ease-in-out;
+  transform: scale(0.98);
+}
+
+.tour-highlight[data-animation="slide"].visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.tour-highlight[data-animation="bounce"] {
+  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: translateY(20px) scale(0.95);
+  opacity: 0;
+}
+
+.tour-highlight[data-animation="bounce"].visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.tour-highlight[data-animation="fade"] {
+  transition: all 0.4s ease-out;
+  transform: translateY(10px);
+  opacity: 0;
+}
+
+.tour-highlight[data-animation="fade"].visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.dark .tour-highlight {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+} /* end @layer react-product-tour */
+`;
+if (typeof document !== "undefined") {
+  const id = "__react_product_tour_styles__";
+  if (!document.getElementById(id)) {
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = __tourStyles__;
+    document.head.insertBefore(style, document.head.firstChild);
+  }
+}
+
+// src/manager/TourManager.ts
+var _TourManager = class _TourManager {
+  constructor() {
+    __publicField(this, "state");
+    __publicField(this, "listeners");
+    this.state = {
+      steps: [],
+      currentStep: 0,
+      isActive: false
+    };
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  static getInstance() {
+    if (!_TourManager.instance) {
+      _TourManager.instance = new _TourManager();
+    }
+    return _TourManager.instance;
+  }
+  getState() {
+    return { ...this.state, steps: [...this.state.steps] };
+  }
+  initialize(steps) {
+    this.state.steps = steps;
+    this.state.currentStep = 0;
+    this.state.isActive = false;
+    this.notifyListeners();
+  }
+  start() {
+    if (this.state.steps.length === 0) return;
+    this.state.isActive = true;
+    this.state.currentStep = 0;
+    this.notifyListeners();
+  }
+  stop() {
+    this.state.isActive = false;
+    this.notifyListeners();
+  }
+  next() {
+    if (!this.state.isActive || this.state.currentStep >= this.state.steps.length - 1) {
+      this.stop();
+      return;
+    }
+    this.state.currentStep += 1;
+    this.notifyListeners();
+  }
+  back() {
+    if (!this.state.isActive || this.state.currentStep <= 0) return;
+    this.state.currentStep -= 1;
+    this.notifyListeners();
+  }
+  skip() {
+    this.stop();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notifyListeners() {
+    this.listeners.forEach((listener) => listener({ ...this.state }));
+  }
+};
+__publicField(_TourManager, "instance");
+var TourManager = _TourManager;
+var tourManager = TourManager.getInstance();
+var TourContext = createContext(null);
+var TourProvider = ({
+  steps,
+  children,
+  defaultActive = false,
+  onComplete,
+  onSkip,
+  onStepChange,
+  onStepEnter,
+  onStepExit
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isActive, setIsActive] = useState(defaultActive);
+  useEffect(() => {
+    tourManager.initialize(steps);
+  }, [steps]);
+  const start = useCallback(() => {
+    setIsActive(true);
+    setCurrentStep(0);
+    onStepEnter?.(0, steps[0]);
+  }, [steps, onStepEnter]);
+  const stop = useCallback(() => {
+    if (isActive) {
+      onStepExit?.(currentStep, steps[currentStep]);
+    }
+    setIsActive(false);
+  }, [isActive, currentStep, steps, onStepExit]);
+  const next = useCallback(async () => {
+    const currentStepData = steps[currentStep];
+    if (currentStepData?.waitFor) {
+      await currentStepData.waitFor();
+    }
+    if (currentStep < steps.length - 1) {
+      onStepExit?.(currentStep, currentStepData);
+      const nextStepIndex = currentStep + 1;
+      setCurrentStep(nextStepIndex);
+      onStepChange?.(nextStepIndex, steps[nextStepIndex]);
+      onStepEnter?.(nextStepIndex, steps[nextStepIndex]);
+    } else {
+      stop();
+      onComplete?.();
+    }
+  }, [currentStep, steps, stop, onComplete, onStepExit, onStepChange, onStepEnter]);
+  const back = useCallback(() => {
+    if (currentStep > 0) {
+      const currentStepData = steps[currentStep];
+      onStepExit?.(currentStep, currentStepData);
+      const prevStepIndex = currentStep - 1;
+      setCurrentStep(prevStepIndex);
+      onStepChange?.(prevStepIndex, steps[prevStepIndex]);
+      onStepEnter?.(prevStepIndex, steps[prevStepIndex]);
+    }
+  }, [currentStep, steps, onStepExit, onStepChange, onStepEnter]);
+  const skip = useCallback(() => {
+    stop();
+    onSkip?.();
+  }, [stop, onSkip]);
+  const value = useMemo(() => ({
+    steps,
+    currentStep,
+    isActive,
+    start,
+    stop,
+    next,
+    back,
+    skip
+  }), [steps, currentStep, isActive, start, stop, next, back, skip]);
+  return /* @__PURE__ */ jsx(TourContext.Provider, { value, children });
+};
+var useTour = () => {
+  const context = useContext(TourContext);
+  if (!context) {
+    throw new Error("useTour must be used within a TourProvider");
+  }
+  return context;
+};
+var useTour2 = () => {
+  const context = useContext(TourContext);
+  const [globalState, setGlobalState] = useState(tourManager.getState());
+  useEffect(() => {
+    return tourManager.subscribe(setGlobalState);
+  }, []);
+  if (context) {
+    return context;
+  }
+  return {
+    steps: globalState.steps,
+    currentStep: globalState.currentStep,
+    isActive: globalState.isActive,
+    start: tourManager.start.bind(tourManager),
+    stop: tourManager.stop.bind(tourManager),
+    next: tourManager.next.bind(tourManager),
+    back: tourManager.back.bind(tourManager),
+    skip: tourManager.skip.bind(tourManager)
+  };
+};
+var ProgressBar = ({
+  currentStep,
+  totalSteps,
+  className = ""
+}) => {
+  const progress = (currentStep + 1) / totalSteps * 100;
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-1 rounded-full ${className}`, style: { background: "var(--tour--progress--background)" }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full rounded-full transition-all duration-300 ease-in-out",
+      style: { width: `${progress}%`, background: "var(--tour--progress--fill)" },
+      role: "progressbar",
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }
+  ) });
+};
+var MediaFallback = ({ type, className = "" }) => {
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center p-4 bg-gray-100 rounded-lg ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-gray-400 mb-2", children: type === "image" ? "\u{1F5BC}\uFE0F" : "\u{1F3A5}" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: type === "image" ? "Image failed to load" : "Video failed to load" })
+  ] }) });
+};
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null
+    };
+  }
+  /**
+   * Updates state when an error occurs
+   * @param error - The error that occurred
+   * @returns New state
+   */
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error
+    };
+  }
+  /**
+   * Called when an error occurs
+   * @param error - The error that occurred
+   * @param errorInfo - Additional error information
+   */
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-red-600 mb-2", children: "Something went wrong" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-red-500", children: this.state.error?.message || "An unexpected error occurred" })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+var getMediaSource = (value) => {
+  if (typeof value === "string") return value;
+  if (typeof value === "object" && value !== null && "type" in value && "src" in value) {
+    const mediaSource = value;
+    return mediaSource.src;
+  }
+  return String(value);
+};
+var SAFE_IMG_ATTRS = /* @__PURE__ */ new Set(["alt", "width", "height", "loading", "decoding", "crossOrigin", "referrerPolicy", "sizes", "srcSet", "className", "style"]);
+var SAFE_VIDEO_ATTRS = /* @__PURE__ */ new Set(["width", "height", "loop", "muted", "autoPlay", "playsInline", "preload", "poster", "crossOrigin", "className", "style"]);
+var filterProps = (props, allowList) => {
+  if (!props) return {};
+  return Object.fromEntries(Object.entries(props).filter(([k]) => allowList.has(k)));
+};
+var ImageContent = ({ src, alt = "Tour content", props }) => {
+  const [hasError, setHasError] = useState(false);
+  if (hasError) return /* @__PURE__ */ jsx(MediaFallback, { type: "image", className: "w-full h-auto" });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className: "w-full h-auto rounded-lg",
+      onError: () => setHasError(true),
+      ...filterProps(props, SAFE_IMG_ATTRS)
+    }
+  );
+};
+var VideoContent = ({ src, props }) => {
+  const [hasError, setHasError] = useState(false);
+  if (hasError) return /* @__PURE__ */ jsx(MediaFallback, { type: "video", className: "w-full h-auto" });
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      src,
+      controls: true,
+      className: "w-full h-auto rounded-lg",
+      role: "presentation",
+      "aria-label": "Tour video content",
+      onError: () => setHasError(true),
+      ...filterProps(props, SAFE_VIDEO_ATTRS)
+    }
+  );
+};
+var renderContent = (content) => {
+  if (!content) return null;
+  if (typeof content === "string" || React5.isValidElement(content)) {
+    return content;
+  }
+  const contentObj = content;
+  if (typeof contentObj === "object" && contentObj !== null && "type" in contentObj && "value" in contentObj) {
+    const typedContent = contentObj;
+    switch (typedContent.type) {
+      case "image":
+        return /* @__PURE__ */ jsx(ImageContent, { src: getMediaSource(typedContent.value), alt: typedContent.alt, props: typedContent.props });
+      case "video":
+        return /* @__PURE__ */ jsx(VideoContent, { src: getMediaSource(typedContent.value), props: typedContent.props });
+      case "custom":
+        return typedContent.value;
+      case "text":
+      default:
+        return typedContent.value;
+    }
+  }
+  return content;
+};
+var renderButtons = (props, config) => {
+  const {
+    onNext,
+    onBack,
+    onSkip,
+    onComplete,
+    isFirstStep,
+    isLastStep,
+    skip
+  } = props;
+  if (config?.container?.render) {
+    return config.container.render(props);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex justify-between items-center gap-2",
+        config?.container?.className
+      ),
+      style: {
+        flexDirection: config?.container?.direction || "row",
+        alignItems: config?.container?.align || "center",
+        gap: config?.container?.gap || "0.5rem",
+        ...config?.container?.style
+      },
+      role: "toolbar",
+      "aria-label": "Tour navigation",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          !isFirstStep && (config?.secondary?.render ? config.secondary.render(props) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onBack,
+              className: clsx("tour-button tour-button-secondary", config?.secondary?.className),
+              style: config?.secondary?.style,
+              "aria-label": "Go to previous step",
+              children: config?.secondary?.content || "Back"
+            }
+          )),
+          skip && (config?.secondary?.render ? config.secondary.render(props) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onSkip,
+              className: clsx("tour-button tour-button-secondary", config?.secondary?.className),
+              style: config?.secondary?.style,
+              "aria-label": "Skip tour",
+              children: config?.secondary?.content || "Skip"
+            }
+          ))
+        ] }),
+        config?.primary?.render ? config.primary.render(props) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: isLastStep ? onComplete : onNext,
+            className: clsx("tour-button tour-button-primary", config?.primary?.className),
+            style: config?.primary?.style,
+            "aria-label": isLastStep ? "Complete tour" : "Go to next step",
+            children: config?.primary?.content || (isLastStep ? "Done" : "Next")
+          }
+        )
+      ]
+    }
+  );
+};
+var TourTooltip = ({
+  content,
+  placement,
+  animation = "slide",
+  isFirstStep,
+  isLastStep,
+  skip,
+  onNext,
+  onBack,
+  onSkip,
+  onComplete,
+  tooltipClassName,
+  buttonClassName,
+  buttonContainerClassName,
+  targetLabel,
+  title,
+  floatingStyles,
+  setFloating,
+  showProgress = false,
+  currentStep,
+  totalSteps,
+  buttonConfig
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+      setIsVisible(false);
+    };
+  }, [placement]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setFloating,
+      style: floatingStyles,
+      className: clsx("tour-tooltip z-50", tooltipClassName, { visible: isVisible }),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "tour-step-title",
+      "aria-describedby": "tour-step-content",
+      "data-placement": placement,
+      "data-animation": animation,
+      children: [
+        title ? /* @__PURE__ */ jsx("h3", { id: "tour-step-title", className: "tour-tooltip-title", children: title }) : /* @__PURE__ */ jsx("div", { id: "tour-step-title", className: "sr-only", children: `Tour Step: ${targetLabel}` }),
+        showProgress && currentStep !== void 0 && totalSteps !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center mb-1", children: /* @__PURE__ */ jsx("span", { className: "text-xs", style: { opacity: 0.6 }, "aria-hidden": "true", children: `Step ${currentStep + 1} of ${totalSteps}` }) }),
+          /* @__PURE__ */ jsx(ProgressBar, { currentStep, totalSteps })
+        ] }),
+        /* @__PURE__ */ jsx("div", { id: "tour-step-content", className: "mb-4", children: /* @__PURE__ */ jsx(
+          ErrorBoundary,
+          {
+            fallback: /* @__PURE__ */ jsxs("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-lg", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-gray-600 mb-2", children: "Content Error" }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: "Failed to render tour content" })
+            ] }),
+            children: renderContent(content)
+          }
+        ) }),
+        renderButtons(
+          {
+            onNext,
+            onBack,
+            onSkip,
+            onComplete,
+            isFirstStep,
+            isLastStep,
+            currentStep,
+            totalSteps,
+            skip
+          },
+          buttonConfig || {
+            primary: { className: buttonClassName },
+            secondary: { className: buttonClassName },
+            container: { className: buttonContainerClassName }
+          }
+        )
+      ]
+    }
+  );
+};
+var TourOverlay = ({
+  overlayClassName,
+  isPartialBlur,
+  hasHighlight,
+  onDismiss
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isPartialBlur && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-40 backdrop-blur-sm bg-black/40",
+        style: {
+          mixBlendMode: "multiply"
+        },
+        onClick: onDismiss,
+        role: "presentation",
+        "aria-hidden": "true"
+      }
+    ),
+    !hasHighlight && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("tour-overlay fixed inset-0 z-40", overlayClassName),
+        onClick: onDismiss,
+        role: "presentation",
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+};
+var TourHighlight = ({
+  targetRect,
+  highlightConfig,
+  animation = "slide"
+}) => {
+  const padding = parseFloat(
+    getComputedStyle(document.documentElement).getPropertyValue("--tour--highlight--padding") || "8"
+  );
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 50);
+    return () => {
+      clearTimeout(timer);
+      setIsVisible(false);
+    };
+  }, [targetRect]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: targetRect.top - padding,
+        left: targetRect.left - padding,
+        width: targetRect.width + padding * 2,
+        height: targetRect.height + padding * 2,
+        ...highlightConfig.style
+      },
+      className: clsx(
+        "tour-highlight z-50",
+        highlightConfig.className,
+        { visible: isVisible }
+      ),
+      "data-animation": animation,
+      role: "presentation",
+      "aria-hidden": "true"
+    }
+  );
+};
+var LiveRegion = ({
+  currentStep,
+  totalSteps,
+  targetLabel,
+  content,
+  isActive,
+  announcements
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!isActive || !ref.current) return;
+    const contentText = typeof content === "string" ? content : "";
+    const defaultStepAnnouncement = `Step ${currentStep + 1} of ${totalSteps}: ${targetLabel}.${contentText ? ` ${contentText}` : ""}`;
+    const stepAnnouncement = announcements?.step ? announcements.step.replace("{step}", String(currentStep + 1)).replace("{total}", String(totalSteps)).replace("{content}", contentText) : defaultStepAnnouncement;
+    ref.current.textContent = stepAnnouncement;
+  }, [currentStep, totalSteps, targetLabel, content, isActive, announcements]);
+  return React5.createElement("div", {
+    ref,
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "sr-only"
+  });
+};
+var useTourAccessibility = ({
+  currentStep,
+  totalSteps,
+  targetLabel,
+  content,
+  isActive,
+  enableScreenReader = false,
+  announcements,
+  focusManagement = "auto",
+  focusTrap = true
+}) => {
+  const previousFocusRef = useRef(null);
+  useEffect(() => {
+    if (focusManagement === "manual") return;
+    previousFocusRef.current = document.activeElement;
+    const focusableElements = document.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+    return () => {
+      if (previousFocusRef.current && document.contains(previousFocusRef.current)) {
+        previousFocusRef.current.focus();
+      }
+    };
+  }, [isActive, focusManagement]);
+  useEffect(() => {
+    if (!focusTrap) return;
+    const handleTabKey = (e) => {
+      const focusableElements = document.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusableElements.length === 0) return;
+      const firstFocusableElement = focusableElements[0];
+      const lastFocusableElement = focusableElements[focusableElements.length - 1];
+      if (e.key === "Tab") {
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusableElement) {
+            e.preventDefault();
+            lastFocusableElement.focus();
+          }
+        } else {
+          if (document.activeElement === lastFocusableElement) {
+            e.preventDefault();
+            firstFocusableElement.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleTabKey);
+    return () => document.removeEventListener("keydown", handleTabKey);
+  }, [isActive, focusTrap]);
+  return {
+    LiveRegion: () => React5.createElement(LiveRegion, {
+      currentStep,
+      totalSteps,
+      targetLabel,
+      content,
+      isActive,
+      announcements
+    }),
+    targetLabel
+  };
+};
+function useDebounce(callback, delay) {
+  const timeoutRef = useRef();
+  return useCallback(
+    (...args) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+}
+var Spotlight = memo(({
+  targetElement,
+  placement,
+  content,
+  onNext,
+  onBack,
+  onSkip,
+  onComplete,
+  isFirstStep,
+  isLastStep,
+  skip = true,
+  overlayClassName,
+  tooltipClassName,
+  buttonClassName,
+  buttonContainerClassName,
+  highlightTarget = true,
+  currentStep,
+  totalSteps,
+  showProgress = false,
+  accessibility = {},
+  animation = "slide",
+  tooltipOffset = 10,
+  buttonConfig,
+  dismissOnOverlayClick = true,
+  title
+}) => {
+  const middleware = useMemo(
+    () => [offset(tooltipOffset), flip(), shift()],
+    [tooltipOffset]
+  );
+  const { refs: tooltipRefs, floatingStyles, update } = useFloating({
+    placement,
+    middleware,
+    whileElementsMounted: autoUpdate
+  });
+  const { LiveRegion: LiveRegion2, targetLabel } = useTourAccessibility({
+    currentStep: currentStep ?? 0,
+    totalSteps: totalSteps ?? 0,
+    targetLabel: targetElement?.getAttribute("aria-label") || "target element",
+    content,
+    isActive: true,
+    enableScreenReader: accessibility.enableScreenReader,
+    announcements: accessibility.announcements,
+    focusManagement: accessibility.focusManagement,
+    focusTrap: accessibility.focusTrap
+  });
+  const highlightConfig = typeof highlightTarget === "object" ? highlightTarget : { className: "tour-highlight" };
+  const isPartialBlur = overlayClassName?.includes("tour-overlay-partial-blur");
+  const [rect, setRect] = useState(
+    () => targetElement ? targetElement.getBoundingClientRect() : null
+  );
+  const debouncedUpdate = useDebounce(update, 100);
+  const debouncedUpdateRef = useRef(debouncedUpdate);
+  useEffect(() => {
+    debouncedUpdateRef.current = debouncedUpdate;
+  });
+  useEffect(() => {
+    if (!targetElement) return;
+    tooltipRefs.setReference(targetElement);
+    targetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+    setRect(targetElement.getBoundingClientRect());
+  }, [targetElement, tooltipRefs]);
+  useEffect(() => {
+    if (!targetElement) return;
+    const updateRect = () => {
+      setRect(targetElement.getBoundingClientRect());
+      debouncedUpdateRef.current();
+    };
+    window.addEventListener("scroll", updateRect, { passive: true });
+    window.addEventListener("resize", updateRect, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", updateRect);
+      window.removeEventListener("resize", updateRect);
+    };
+  }, [targetElement]);
+  if (!targetElement || !rect) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    accessibility.enableScreenReader !== false && /* @__PURE__ */ jsx(LiveRegion2, {}),
+    /* @__PURE__ */ jsx(
+      TourOverlay,
+      {
+        overlayClassName,
+        isPartialBlur,
+        hasHighlight: !!highlightTarget,
+        onDismiss: dismissOnOverlayClick ? onSkip : void 0
+      }
+    ),
+    highlightTarget && /* @__PURE__ */ jsx(
+      TourHighlight,
+      {
+        targetRect: rect,
+        highlightConfig,
+        animation
+      }
+    ),
+    isPartialBlur && targetElement.id && /* @__PURE__ */ jsx("style", { children: `
+            #${CSS.escape(targetElement.id)} {
+              isolation: isolate;
+              position: relative;
+              z-index: 50;
+              transform: translateZ(0);
+              will-change: transform;
+            }
+          ` }),
+    /* @__PURE__ */ jsx(
+      TourTooltip,
+      {
+        content,
+        placement,
+        isFirstStep,
+        isLastStep,
+        skip,
+        onNext,
+        onBack,
+        onSkip,
+        onComplete,
+        tooltipClassName,
+        buttonClassName,
+        buttonContainerClassName,
+        targetLabel,
+        floatingStyles,
+        setFloating: tooltipRefs.setFloating,
+        showProgress,
+        currentStep,
+        totalSteps,
+        animation,
+        buttonConfig,
+        title
+      }
+    )
+  ] });
+});
+var Tour = ({
+  overlayClassName,
+  tooltipClassName,
+  buttonClassName,
+  buttonContainerClassName,
+  highlightTarget,
+  skip = true,
+  showProgress = false,
+  accessibility = {},
+  animation = "slide",
+  tooltipOffset,
+  buttonConfig,
+  dismissOnOverlayClick = true
+}) => {
+  const { steps, currentStep, isActive, next, back, skip: skipTour } = useTour();
+  const [targetElement, setTargetElement] = useState(null);
+  const enableScreenReader = accessibility.enableScreenReader;
+  const startAnnouncement = accessibility.announcements?.start ?? "Tour started. Use arrow keys to navigate between steps.";
+  const endAnnouncement = accessibility.announcements?.end ?? "Tour ended.";
+  useEffect(() => {
+    if (!isActive) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        skipTour();
+        return;
+      }
+      const target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        next();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        back();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isActive, skipTour, next, back]);
+  useEffect(() => {
+    if (!isActive || enableScreenReader === false) return;
+    const announcement = document.createElement("div");
+    announcement.setAttribute("role", "status");
+    announcement.setAttribute("aria-live", "polite");
+    announcement.setAttribute("aria-atomic", "true");
+    announcement.className = "sr-only";
+    announcement.textContent = startAnnouncement;
+    document.body.appendChild(announcement);
+    const startTimerId = setTimeout(() => {
+      if (announcement.isConnected) document.body.removeChild(announcement);
+    }, 3e3);
+    return () => {
+      clearTimeout(startTimerId);
+      if (announcement.isConnected) document.body.removeChild(announcement);
+      const endEl = document.createElement("div");
+      endEl.setAttribute("role", "status");
+      endEl.setAttribute("aria-live", "polite");
+      endEl.setAttribute("aria-atomic", "true");
+      endEl.className = "sr-only";
+      endEl.textContent = endAnnouncement;
+      document.body.appendChild(endEl);
+      setTimeout(() => {
+        if (endEl.isConnected) document.body.removeChild(endEl);
+      }, 3e3);
+    };
+  }, [isActive, enableScreenReader, startAnnouncement, endAnnouncement]);
+  useEffect(() => {
+    if (!isActive) return;
+    let mounted = true;
+    const currentStepData2 = steps[currentStep];
+    if (!currentStepData2) return;
+    setTargetElement(null);
+    let element = null;
+    try {
+      element = document.querySelector(currentStepData2.selector);
+    } catch {
+      return;
+    }
+    if (element) {
+      setTargetElement(element);
+    } else if (currentStepData2.waitFor) {
+      currentStepData2.waitFor().then(() => {
+        if (!mounted) return;
+        try {
+          const el = document.querySelector(currentStepData2.selector);
+          setTargetElement(el);
+        } catch {
+        }
+      }).catch(() => {
+      });
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [isActive, currentStep, steps]);
+  const currentStepData = steps[currentStep];
+  if (!isActive || !currentStepData) return null;
+  if (!targetElement) {
+    const isLastStep = currentStep === steps.length - 1;
+    return createPortal(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "tour-overlay fixed inset-0 z-40",
+            onClick: dismissOnOverlayClick ? skipTour : void 0,
+            role: "presentation",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "tour-tooltip pointer-events-auto",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Tour step unavailable",
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm", style: { opacity: 0.7 }, children: "This step is currently unavailable." }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+                /* @__PURE__ */ jsx("button", { onClick: skipTour, className: "tour-button tour-button-secondary", "aria-label": "Skip tour", children: "Skip" }),
+                !isLastStep && /* @__PURE__ */ jsx("button", { onClick: next, className: "tour-button tour-button-primary", "aria-label": "Go to next step", children: "Next" })
+              ] })
+            ]
+          }
+        ) })
+      ] }),
+      document.body
+    );
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      Spotlight,
+      {
+        targetElement,
+        placement: currentStepData.placement || "bottom",
+        title: currentStepData.title,
+        content: currentStepData.content,
+        onNext: next,
+        onBack: back,
+        onSkip: skipTour,
+        onComplete: next,
+        isFirstStep: currentStep === 0,
+        isLastStep: currentStep === steps.length - 1,
+        overlayClassName,
+        tooltipClassName,
+        buttonClassName,
+        buttonContainerClassName,
+        highlightTarget,
+        skip,
+        showProgress,
+        currentStep,
+        totalSteps: steps.length,
+        accessibility,
+        animation,
+        tooltipOffset,
+        buttonConfig,
+        dismissOnOverlayClick
+      }
+    ),
+    document.body
+  );
+};
+
+export { Tour, TourProvider, tourManager, useTour2 as useTour };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map