@korsolutions/guidon 1.0.1 → 1.0.3

package/dist/module/components/GuidonProvider.js

@@ -0,0 +1,152 @@
+"use strict";
+
+import { useEffect, useCallback, useRef, createContext, useContext } from 'react';
+import { useGuidonStore, useWaitingState } from "../store.js";
+import { useGuidonPersistence } from "../persistence/hooks.js";
+import { GuidonOverlay } from "./GuidonOverlay.js";
+import { GuidonTooltip } from "./GuidonTooltip.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const GuidonContext = /*#__PURE__*/createContext(null);
+export function useGuidonContext() {
+  const context = useContext(GuidonContext);
+  if (!context) {
+    throw new Error('useGuidonContext must be used within a GuidonProvider');
+  }
+  return context;
+}
+export function GuidonProvider({
+  children,
+  config,
+  autoStart = true,
+  shouldStart,
+  persistenceAdapter,
+  portalComponent: Portal,
+  renderTooltip,
+  tooltipLabels,
+  onBackdropPress
+}) {
+  const hasInitialized = useRef(false);
+  const isActive = useGuidonStore(state => state.isActive);
+  const storeIsCompleted = useGuidonStore(state => state.isCompleted);
+  const currentStepIndex = useGuidonStore(state => state.currentStepIndex);
+  const configure = useGuidonStore(state => state.configure);
+  const start = useGuidonStore(state => state.start);
+  const next = useGuidonStore(state => state.next);
+  const skip = useGuidonStore(state => state.skip);
+  const reset = useGuidonStore(state => state.reset);
+
+  // Check for waiting state (target element not mounted)
+  const waitingState = useWaitingState();
+  const {
+    isLoading,
+    isCompleted: persistedCompleted,
+    markCompleted,
+    markStepViewed,
+    clearProgress
+  } = useGuidonPersistence(persistenceAdapter, config.id);
+  const isCompleted = storeIsCompleted || persistedCompleted;
+  useEffect(() => {
+    const enhancedConfig = {
+      ...config,
+      onComplete: async () => {
+        config.onComplete?.();
+        if (persistenceAdapter) {
+          await markCompleted();
+        }
+      },
+      onSkip: async () => {
+        config.onSkip?.();
+        if (persistenceAdapter) {
+          await markStepViewed(currentStepIndex);
+        }
+      },
+      onStepChange: async (stepIndex, step) => {
+        config.onStepChange?.(stepIndex, step);
+        if (persistenceAdapter) {
+          await markStepViewed(stepIndex);
+        }
+      }
+    };
+    configure(enhancedConfig);
+  }, [config, configure, persistenceAdapter, markCompleted, markStepViewed, currentStepIndex]);
+  useEffect(() => {
+    if (!autoStart || hasInitialized.current || isLoading) return;
+    const checkAndStart = async () => {
+      hasInitialized.current = true;
+      if (persistedCompleted) return;
+      if (shouldStart) {
+        const should = await shouldStart();
+        if (!should) return;
+      }
+      setTimeout(() => {
+        start();
+      }, 500);
+    };
+    checkAndStart();
+  }, [autoStart, isLoading, persistedCompleted, shouldStart, start]);
+
+  // Handle wait timeout - auto-skip to next step if waiting too long
+  useEffect(() => {
+    const currentStep = config.steps[currentStepIndex];
+    const waitTimeout = currentStep?.waitTimeout;
+
+    // Only set timeout if:
+    // - We have a timeout configured
+    // - The timeout is greater than 0
+    // - We are currently waiting for a target
+    if (!waitTimeout || waitTimeout <= 0 || !waitingState?.isWaiting) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      // Check if we're still waiting when the timeout fires
+      const stillWaiting = useGuidonStore.getState().targetMeasurements[currentStep.targetId] === undefined;
+      if (stillWaiting) {
+        next(); // Skip to next step
+      }
+    }, waitTimeout);
+    return () => clearTimeout(timer);
+  }, [currentStepIndex, config.steps, waitingState?.isWaiting, next]);
+  const replay = useCallback(async () => {
+    if (persistenceAdapter) {
+      await clearProgress();
+    }
+    reset();
+    hasInitialized.current = false;
+    setTimeout(() => {
+      start();
+    }, 100);
+  }, [persistenceAdapter, clearProgress, reset, start]);
+  const manualStart = useCallback(() => {
+    if (!isActive && !isLoading) {
+      start();
+    }
+  }, [isActive, isLoading, start]);
+  const contextValue = {
+    start: manualStart,
+    skip,
+    reset,
+    replay,
+    isActive,
+    isCompleted,
+    isLoading
+  };
+  const overlayContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(GuidonOverlay, {
+      theme: config.theme,
+      animationDuration: config.animationDuration,
+      onBackdropPress: onBackdropPress
+    }), /*#__PURE__*/_jsx(GuidonTooltip, {
+      theme: config.theme,
+      animationDuration: config.animationDuration,
+      renderCustomTooltip: renderTooltip,
+      labels: tooltipLabels
+    })]
+  });
+  return /*#__PURE__*/_jsxs(GuidonContext.Provider, {
+    value: contextValue,
+    children: [children, Portal ? /*#__PURE__*/_jsx(Portal, {
+      children: overlayContent
+    }) : overlayContent]
+  });
+}
+//# sourceMappingURL=GuidonProvider.js.map

package/dist/module/components/GuidonProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useCallback","useRef","createContext","useContext","useGuidonStore","useWaitingState","useGuidonPersistence","GuidonOverlay","GuidonTooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","GuidonContext","useGuidonContext","context","Error","GuidonProvider","children","config","autoStart","shouldStart","persistenceAdapter","portalComponent","Portal","renderTooltip","tooltipLabels","onBackdropPress","hasInitialized","isActive","state","storeIsCompleted","isCompleted","currentStepIndex","configure","start","next","skip","reset","waitingState","isLoading","persistedCompleted","markCompleted","markStepViewed","clearProgress","id","enhancedConfig","onComplete","onSkip","onStepChange","stepIndex","step","current","checkAndStart","should","setTimeout","currentStep","steps","waitTimeout","isWaiting","timer","stillWaiting","getState","targetMeasurements","targetId","undefined","clearTimeout","replay","manualStart","contextValue","overlayContent","theme","animationDuration","renderCustomTooltip","labels","Provider","value"],"sourceRoot":"../../../src","sources":["components/GuidonProvider.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/GuidonTarget.js

@@ -0,0 +1,106 @@
+"use strict";
+
+import { useCallback, useEffect, useRef } from "react";
+import { View, Platform } from "react-native";
+import { useGuidonStore } from "../store.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Wrapper component that marks an element as a walkthrough target
+ * Automatically measures and reports its position to the walkthrough store
+ */
+export function GuidonTarget({
+  children,
+  targetId,
+  active = true
+}) {
+  const viewRef = useRef(null);
+  const registerTarget = useGuidonStore(state => state.registerTarget);
+  const unregisterTarget = useGuidonStore(state => state.unregisterTarget);
+  const isActive = useGuidonStore(state => state.isActive);
+  const config = useGuidonStore(state => state.config);
+
+  // Check if this target is needed for the current walkthrough
+  const isTargetNeeded = isActive && config?.steps.some(step => step.targetId === targetId);
+  const measureElement = useCallback(() => {
+    if (!viewRef.current || !active || !isTargetNeeded) return;
+    if (Platform.OS === "web") {
+      // Web measurement using getBoundingClientRect
+      const element = viewRef.current;
+      if (element && typeof element.getBoundingClientRect === "function") {
+        const rect = element.getBoundingClientRect();
+        const measurements = {
+          x: rect.left + window.scrollX,
+          y: rect.top + window.scrollY,
+          width: rect.width,
+          height: rect.height
+        };
+        registerTarget(targetId, measurements);
+      }
+    } else {
+      // Native measurement using measureInWindow
+      // Cast to access the native measureInWindow method
+      const nativeRef = viewRef.current;
+      nativeRef.measureInWindow((x, y, width, height) => {
+        if (width > 0 && height > 0) {
+          const measurements = {
+            x,
+            y,
+            width,
+            height
+          };
+          registerTarget(targetId, measurements);
+        }
+      });
+    }
+  }, [targetId, active, isTargetNeeded, registerTarget]);
+
+  // Measure on layout change
+  const handleLayout = useCallback(_event => {
+    // Small delay to ensure layout is complete
+    requestAnimationFrame(() => {
+      measureElement();
+    });
+  }, [measureElement]);
+
+  // Re-measure when walkthrough becomes active or when this target becomes relevant
+  useEffect(() => {
+    if (!isTargetNeeded) return;
+
+    // Delay to ensure the element is rendered
+    const timer = setTimeout(() => {
+      measureElement();
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [isTargetNeeded, measureElement]);
+
+  // Re-measure on scroll (web only)
+  useEffect(() => {
+    if (Platform.OS !== "web" || !isTargetNeeded) return;
+    const handleScroll = () => {
+      measureElement();
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, [isTargetNeeded, measureElement]);
+
+  // Unregister on unmount
+  useEffect(() => {
+    return () => {
+      unregisterTarget(targetId);
+    };
+  }, [targetId, unregisterTarget]);
+  return /*#__PURE__*/_jsx(View, {
+    ref: viewRef,
+    onLayout: handleLayout,
+    collapsable: false,
+    style: {
+      alignSelf: "flex-start"
+    },
+    children: children
+  });
+}
+//# sourceMappingURL=GuidonTarget.js.map

package/dist/module/components/GuidonTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","View","Platform","useGuidonStore","jsx","_jsx","GuidonTarget","children","targetId","active","viewRef","registerTarget","state","unregisterTarget","isActive","config","isTargetNeeded","steps","some","step","measureElement","current","OS","element","getBoundingClientRect","rect","measurements","x","left","window","scrollX","y","top","scrollY","width","height","nativeRef","measureInWindow","handleLayout","_event","requestAnimationFrame","timer","setTimeout","clearTimeout","handleScroll","addEventListener","removeEventListener","ref","onLayout","collapsable","style","alignSelf"],"sourceRoot":"../../../src","sources":["components/GuidonTarget.tsx"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAA2B,OAAO;AACzE,SAASC,IAAI,EAAEC,QAAQ,QAAgC,cAAc;AACrE,SAASC,cAAc,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQ1C;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAC;EAC3BC,QAAQ;EACRC,QAAQ;EACRC,MAAM,GAAG;AACQ,CAAC,EAAE;EACpB,MAAMC,OAAO,GAAGV,MAAM,CAA4B,IAAI,CAAC;EACvD,MAAMW,cAAc,GAAGR,cAAc,CAClCS,KAAkB,IAAKA,KAAK,CAACD,cAChC,CAAC;EACD,MAAME,gBAAgB,GAAGV,cAAc,CACpCS,KAAkB,IAAKA,KAAK,CAACC,gBAChC,CAAC;EACD,MAAMC,QAAQ,GAAGX,cAAc,CAAES,KAAkB,IAAKA,KAAK,CAACE,QAAQ,CAAC;EACvE,MAAMC,MAAM,GAAGZ,cAAc,CAAES,KAAkB,IAAKA,KAAK,CAACG,MAAM,CAAC;;EAEnE;EACA,MAAMC,cAAc,GAClBF,QAAQ,IACRC,MAAM,EAAEE,KAAK,CAACC,IAAI,CAAEC,IAAgB,IAAKA,IAAI,CAACX,QAAQ,KAAKA,QAAQ,CAAC;EAEtE,MAAMY,cAAc,GAAGtB,WAAW,CAAC,MAAM;IACvC,IAAI,CAACY,OAAO,CAACW,OAAO,IAAI,CAACZ,MAAM,IAAI,CAACO,cAAc,EAAE;IAEpD,IAAId,QAAQ,CAACoB,EAAE,KAAK,KAAK,EAAE;MACzB;MACA,MAAMC,OAAO,GAAGb,OAAO,CAACW,OAAiC;MACzD,IAAIE,OAAO,IAAI,OAAOA,OAAO,CAACC,qBAAqB,KAAK,UAAU,EAAE;QAClE,MAAMC,IAAI,GAAGF,OAAO,CAACC,qBAAqB,CAAC,CAAC;QAC5C,MAAME,YAAgC,GAAG;UACvCC,CAAC,EAAEF,IAAI,CAACG,IAAI,GAAGC,MAAM,CAACC,OAAO;UAC7BC,CAAC,EAAEN,IAAI,CAACO,GAAG,GAAGH,MAAM,CAACI,OAAO;UAC5BC,KAAK,EAAET,IAAI,CAACS,KAAK;UACjBC,MAAM,EAAEV,IAAI,CAACU;QACf,CAAC;QACDxB,cAAc,CAACH,QAAQ,EAAEkB,YAAY,CAAC;MACxC;IACF,CAAC,MAAM;MACL;MACA;MACA,MAAMU,SAAS,GAAG1B,OAAO,CAACW,OAIzB;MACDe,SAAS,CAACC,eAAe,CAAC,CAACV,CAAC,EAAEI,CAAC,EAAEG,KAAK,EAAEC,MAAM,KAAK;QACjD,IAAID,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,EAAE;UAC3B,MAAMT,YAAgC,GAAG;YAAEC,CAAC;YAAEI,CAAC;YAAEG,KAAK;YAAEC;UAAO,CAAC;UAChExB,cAAc,CAACH,QAAQ,EAAEkB,YAAY,CAAC;QACxC;MACF,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAAClB,QAAQ,EAAEC,MAAM,EAAEO,cAAc,EAAEL,cAAc,CAAC,CAAC;;EAEtD;EACA,MAAM2B,YAAY,GAAGxC,WAAW,CAC7ByC,MAAyB,IAAK;IAC7B;IACAC,qBAAqB,CAAC,MAAM;MAC1BpB,cAAc,CAAC,CAAC;IAClB,CAAC,CAAC;EACJ,CAAC,EACD,CAACA,cAAc,CACjB,CAAC;;EAED;EACArB,SAAS,CAAC,MAAM;IACd,IAAI,CAACiB,cAAc,EAAE;;IAErB;IACA,MAAMyB,KAAK,GAAGC,UAAU,CAAC,MAAM;MAC7BtB,cAAc,CAAC,CAAC;IAClB,CAAC,EAAE,GAAG,CAAC;IACP,OAAO,MAAMuB,YAAY,CAACF,KAAK,CAAC;EAClC,CAAC,EAAE,CAACzB,cAAc,EAAEI,cAAc,CAAC,CAAC;;EAEpC;EACArB,SAAS,CAAC,MAAM;IACd,IAAIG,QAAQ,CAACoB,EAAE,KAAK,KAAK,IAAI,CAACN,cAAc,EAAE;IAE9C,MAAM4B,YAAY,GAAGA,CAAA,KAAM;MACzBxB,cAAc,CAAC,CAAC;IAClB,CAAC;IAEDS,MAAM,CAACgB,gBAAgB,CAAC,QAAQ,EAAED,YAAY,EAAE,IAAI,CAAC;IACrDf,MAAM,CAACgB,gBAAgB,CAAC,QAAQ,EAAED,YAAY,CAAC;IAE/C,OAAO,MAAM;MACXf,MAAM,CAACiB,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,EAAE,IAAI,CAAC;MACxDf,MAAM,CAACiB,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IACpD,CAAC;EACH,CAAC,EAAE,CAAC5B,cAAc,EAAEI,cAAc,CAAC,CAAC;;EAEpC;EACArB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXc,gBAAgB,CAACL,QAAQ,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,EAAEK,gBAAgB,CAAC,CAAC;EAEhC,oBACER,IAAA,CAACJ,IAAI;IACH8C,GAAG,EAAErC,OAAQ;IACbsC,QAAQ,EAAEV,YAAa;IACvBW,WAAW,EAAE,KAAM;IACnBC,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAa,CAAE;IAAA5C,QAAA,EAElCA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}

package/dist/module/components/GuidonTooltip.js

@@ -0,0 +1,417 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { View, Text, StyleSheet, Dimensions, TouchableOpacity, Platform, ActivityIndicator } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming, withSpring, Easing } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useGuidonStore, useWaitingState, useIsFloatingStep } from "../store.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_THEME = {
+  tooltipBackgroundColor: '#ffffff',
+  tooltipBorderColor: '#e5e5e5',
+  tooltipBorderRadius: 12,
+  titleColor: '#1a1a1a',
+  descriptionColor: '#666666',
+  primaryColor: '#007AFF',
+  mutedColor: '#999999',
+  spotlightPadding: 8
+};
+const TOOLTIP_MARGIN = 16;
+const TOOLTIP_WIDTH = 300;
+const ESTIMATED_TOOLTIP_HEIGHT = 200;
+
+/**
+ * Calculate position for floating tooltips (steps without a target element)
+ */
+function calculateFloatingPosition(floatingPosition, screenWidth, screenHeight, tooltipWidth, insets) {
+  const MARGIN = 32;
+  const centerX = (screenWidth - tooltipWidth) / 2;
+  const centerY = (screenHeight - ESTIMATED_TOOLTIP_HEIGHT) / 2;
+  switch (floatingPosition) {
+    case 'center':
+      return {
+        top: centerY,
+        left: centerX
+      };
+    case 'top':
+      return {
+        top: insets.top + MARGIN,
+        left: centerX
+      };
+    case 'bottom':
+      return {
+        top: screenHeight - ESTIMATED_TOOLTIP_HEIGHT - insets.bottom - MARGIN,
+        left: centerX
+      };
+    case 'top-left':
+      return {
+        top: insets.top + MARGIN,
+        left: MARGIN
+      };
+    case 'top-right':
+      return {
+        top: insets.top + MARGIN,
+        left: screenWidth - tooltipWidth - MARGIN
+      };
+    case 'bottom-left':
+      return {
+        top: screenHeight - ESTIMATED_TOOLTIP_HEIGHT - insets.bottom - MARGIN,
+        left: MARGIN
+      };
+    case 'bottom-right':
+      return {
+        top: screenHeight - ESTIMATED_TOOLTIP_HEIGHT - insets.bottom - MARGIN,
+        left: screenWidth - tooltipWidth - MARGIN
+      };
+    default:
+      return {
+        top: centerY,
+        left: centerX
+      };
+  }
+}
+export function GuidonTooltip({
+  theme = {},
+  animationDuration = 300,
+  renderCustomTooltip,
+  labels = {}
+}) {
+  const insets = useSafeAreaInsets();
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = Dimensions.get('window');
+  const isActive = useGuidonStore(state => state.isActive);
+  const config = useGuidonStore(state => state.config);
+  const currentStepIndex = useGuidonStore(state => state.currentStepIndex);
+  const targetMeasurements = useGuidonStore(state => state.targetMeasurements);
+  const next = useGuidonStore(state => state.next);
+  const previous = useGuidonStore(state => state.previous);
+  const skip = useGuidonStore(state => state.skip);
+
+  // Check for floating or waiting states
+  const isFloatingStep = useIsFloatingStep();
+  const waitingState = useWaitingState();
+  const isWaiting = waitingState?.isWaiting ?? false;
+  const mergedTheme = {
+    ...DEFAULT_THEME,
+    ...theme
+  };
+  const mergedLabels = {
+    next: labels.next ?? 'Next',
+    previous: labels.previous ?? 'Back',
+    skip: labels.skip ?? 'Skip',
+    finish: labels.finish ?? 'Finish',
+    stepOf: labels.stepOf ?? ((c, t) => `${c} of ${t}`),
+    waitingDefault: labels.waitingDefault ?? 'Navigate to continue...'
+  };
+  const currentStep = config?.steps[currentStepIndex];
+  const totalSteps = config?.steps.length ?? 0;
+  const isFirstStep = currentStepIndex === 0;
+  const isLastStep = currentStepIndex === totalSteps - 1;
+  const measurements = currentStep?.targetId ? targetMeasurements[currentStep.targetId] : undefined;
+
+  // Calculate tooltip position
+  const tooltipPosition = useMemo(() => {
+    // Handle floating steps (no target element)
+    if (isFloatingStep) {
+      const floatingPos = currentStep?.floatingPosition ?? 'center';
+      return calculateFloatingPosition(floatingPos, screenWidth, screenHeight, TOOLTIP_WIDTH, insets);
+    }
+
+    // Handle waiting state or no measurements - center the tooltip
+    if (!measurements) {
+      return {
+        top: screenHeight / 2 - ESTIMATED_TOOLTIP_HEIGHT / 2,
+        left: screenWidth / 2 - TOOLTIP_WIDTH / 2
+      };
+    }
+    const targetBottom = measurements.y + measurements.height + mergedTheme.spotlightPadding;
+    const targetTop = measurements.y - mergedTheme.spotlightPadding;
+
+    // Determine preferred position
+    let position = currentStep?.tooltipPosition ?? 'auto';
+    if (position === 'auto') {
+      // Auto-detect best position
+      const spaceAbove = targetTop - insets.top;
+      const spaceBelow = screenHeight - targetBottom - insets.bottom;
+      position = spaceBelow >= 200 ? 'bottom' : spaceAbove >= 200 ? 'top' : 'bottom';
+    }
+    let top;
+    let left = Math.max(TOOLTIP_MARGIN, Math.min(measurements.x + measurements.width / 2 - TOOLTIP_WIDTH / 2, screenWidth - TOOLTIP_WIDTH - TOOLTIP_MARGIN));
+    if (position === 'top') {
+      top = targetTop - TOOLTIP_MARGIN - 150; // Approximate tooltip height
+    } else {
+      top = targetBottom + TOOLTIP_MARGIN;
+    }
+
+    // Ensure tooltip is within screen bounds
+    top = Math.max(insets.top + TOOLTIP_MARGIN, Math.min(top, screenHeight - 200 - insets.bottom));
+    return {
+      top,
+      left,
+      position
+    };
+  }, [measurements, screenWidth, screenHeight, insets, currentStep?.tooltipPosition, currentStep?.floatingPosition, mergedTheme.spotlightPadding, isFloatingStep]);
+
+  // Determine if tooltip should be visible
+  // Show for: normal steps with measurements, floating steps, or waiting states
+  const shouldShowTooltip = isActive && currentStep && (measurements || isFloatingStep || isWaiting);
+
+  // Animated styles
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: withTiming(shouldShowTooltip ? 1 : 0, {
+        duration: animationDuration,
+        easing: Easing.inOut(Easing.ease)
+      }),
+      transform: [{
+        translateY: withSpring(shouldShowTooltip ? 0 : 20, {
+          damping: 15,
+          stiffness: 150
+        })
+      }]
+    };
+  }, [shouldShowTooltip, animationDuration]);
+  if (!isActive || !currentStep) {
+    return null;
+  }
+
+  // Show waiting indicator when target element isn't mounted yet
+  if (isWaiting) {
+    return /*#__PURE__*/_jsxs(Animated.View, {
+      style: [styles.tooltipContainer, {
+        top: tooltipPosition.top,
+        left: tooltipPosition.left,
+        width: TOOLTIP_WIDTH,
+        backgroundColor: mergedTheme.tooltipBackgroundColor,
+        borderColor: mergedTheme.tooltipBorderColor,
+        borderRadius: mergedTheme.tooltipBorderRadius
+      }, animatedStyle],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.waitingContainer,
+        children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+          color: mergedTheme.primaryColor
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.waitingText, {
+            color: mergedTheme.descriptionColor
+          }],
+          children: waitingState?.message || mergedLabels.waitingDefault
+        })]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: skip,
+        style: styles.skipButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.skipText, {
+            color: mergedTheme.mutedColor
+          }],
+          children: mergedLabels.skip
+        })
+      })]
+    });
+  }
+
+  // For non-floating steps, we need measurements
+  if (!isFloatingStep && !measurements) {
+    return null;
+  }
+
+  // Render custom tooltip if provided
+  if (renderCustomTooltip) {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.tooltipContainer, {
+        top: tooltipPosition.top,
+        left: tooltipPosition.left,
+        width: TOOLTIP_WIDTH
+      }, animatedStyle],
+      children: renderCustomTooltip({
+        step: currentStep,
+        currentIndex: currentStepIndex,
+        totalSteps,
+        onNext: next,
+        onPrevious: previous,
+        onSkip: skip
+      })
+    });
+  }
+
+  // Default tooltip UI
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.tooltipContainer, {
+      top: tooltipPosition.top,
+      left: tooltipPosition.left,
+      width: TOOLTIP_WIDTH,
+      backgroundColor: mergedTheme.tooltipBackgroundColor,
+      borderColor: mergedTheme.tooltipBorderColor,
+      borderRadius: mergedTheme.tooltipBorderRadius
+    }, animatedStyle],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.progressContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.progressText, {
+          color: mergedTheme.mutedColor
+        }],
+        children: mergedLabels.stepOf(currentStepIndex + 1, totalSteps)
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.progressDots,
+        children: Array.from({
+          length: totalSteps
+        }).map((_, i) => /*#__PURE__*/_jsx(View, {
+          style: [styles.progressDot, {
+            backgroundColor: i === currentStepIndex ? mergedTheme.primaryColor : mergedTheme.mutedColor,
+            opacity: i === currentStepIndex ? 1 : 0.3
+          }]
+        }, i))
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: mergedTheme.titleColor
+        }],
+        children: currentStep.title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.description, {
+          color: mergedTheme.descriptionColor
+        }],
+        children: currentStep.description
+      }), currentStep.customContent]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.buttonContainer,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: skip,
+        style: styles.skipButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.skipText, {
+            color: mergedTheme.mutedColor
+          }],
+          children: mergedLabels.skip
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.navButtons,
+        children: [!isFirstStep && /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: previous,
+          style: [styles.navButton, styles.backButton],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.backButtonText, {
+              color: mergedTheme.primaryColor
+            }],
+            children: mergedLabels.previous
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: next,
+          style: [styles.navButton, styles.nextButton, {
+            backgroundColor: mergedTheme.primaryColor
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.nextButtonText,
+            children: isLastStep ? mergedLabels.finish : mergedLabels.next
+          })
+        })]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  tooltipContainer: {
+    position: 'absolute',
+    zIndex: 1000,
+    borderWidth: 1,
+    padding: 16,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 4
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 12
+      },
+      android: {
+        elevation: 8
+      },
+      web: {
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
+      }
+    })
+  },
+  progressContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 12
+  },
+  progressText: {
+    fontSize: 12,
+    fontWeight: '500'
+  },
+  progressDots: {
+    flexDirection: 'row',
+    gap: 4
+  },
+  progressDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  content: {
+    marginBottom: 16
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 8
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  skipButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 4
+  },
+  skipText: {
+    fontSize: 14
+  },
+  navButtons: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  navButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8
+  },
+  backButton: {
+    backgroundColor: 'transparent'
+  },
+  backButtonText: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  nextButton: {},
+  nextButtonText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  waitingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    paddingVertical: 8,
+    marginBottom: 12
+  },
+  waitingText: {
+    fontSize: 14,
+    lineHeight: 20
+  }
+});
+//# sourceMappingURL=GuidonTooltip.js.map