@flowsterix/react 0.14.0 → 0.14.2

package/dist/index.d.ts

@@ -35,7 +35,7 @@ export { TourPopoverPortal } from './components/TourPopoverPortal';
 export type { TourPopoverLayoutMode, TourPopoverPortalProps, TourPopoverPortalRenderProps, } from './components/TourPopoverPortal';
 export { TourFocusManager } from './components/TourFocusManager';
 export type { TourFocusManagerProps } from './components/TourFocusManager';
-export { AnimationAdapterProvider, defaultAnimationAdapter, reducedMotionAnimationAdapter, useAnimationAdapter, usePreferredAnimationAdapter, } from './motion/animationAdapter';
+export { AnimationAdapterProvider, defaultAnimationAdapter, reducedMotionAnimationAdapter, tweenAnimationAdapter, useAnimationAdapter, usePreferredAnimationAdapter, } from './motion/animationAdapter';
 export type { AnimationAdapter, AnimationAdapterComponents, AnimationAdapterProviderProps, AnimationAdapterTransitions, UseAnimationAdapterOptions, } from './motion/animationAdapter';
 export { useHudMotion } from './motion/useHudMotion';
 export type { UseHudMotionResult } from './motion/useHudMotion';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import {
-  DevToolsContext
-} from "./chunk-AJZMUYBN.mjs";
+  DevToolsContext,
+  setUseSpringAnimations
+} from "./chunk-ZE3LNV4N.mjs";
 import "./chunk-Y5EAQSU3.mjs";
 import {
   createPathString,
@@ -276,6 +277,21 @@ var useAnimationAdapter = () => {
   return useContext3(AnimationAdapterContext);
 };
 var defaultAnimationAdapter = defaultAdapter;
+var tweenAnimationAdapter = {
+  components: defaultAdapter.components,
+  transitions: {
+    overlayHighlight: {
+      type: "tween",
+      duration: 0.35,
+      ease: [0.25, 1, 0.5, 1]
+    },
+    overlayFade: defaultAdapter.transitions.overlayFade,
+    popoverEntrance: defaultAdapter.transitions.popoverEntrance,
+    popoverExit: defaultAdapter.transitions.popoverExit,
+    popoverContent: defaultAdapter.transitions.popoverContent,
+    delayIndicator: defaultAdapter.transitions.delayIndicator
+  }
+};
 var reducedMotionAnimationAdapter = {
   components: defaultAdapter.components,
   transitions: {
@@ -361,6 +377,7 @@ var TourProvider = ({
   backdropInteraction: backdropInteractionProp = "passthrough",
   lockBodyScroll: lockBodyScrollProp = false,
   labels: labelsProp,
+  useSpringAnimations: useSpringAnimationsProp = true,
   onVersionMismatch
 }) => {
   const mergedLabels = useMemo3(
@@ -848,8 +865,12 @@ var TourProvider = ({
       updateFlowStorage
     ]
   );
+  useEffect3(() => {
+    setUseSpringAnimations(useSpringAnimationsProp);
+  }, [useSpringAnimationsProp]);
+  const effectiveDefaultAdapter = useSpringAnimationsProp ? animationAdapterProp : tweenAnimationAdapter;
   const resolvedAnimationAdapter = usePreferredAnimationAdapter({
-    defaultAdapter: animationAdapterProp,
+    defaultAdapter: effectiveDefaultAdapter,
     reducedMotionAdapter,
     enabled: autoDetectReducedMotion
   });
@@ -1152,13 +1173,69 @@ var computeVisibilityState = (element, rect, isScreen) => {
   }
   return "visible";
 };
-var scrollContainerBy = (container, topDelta, leftDelta, behavior) => {
+var clamp01 = (value) => Math.max(0, Math.min(1, value));
+var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+var windowScrollAnimationToken = 0;
+var getWindowScrollY = () => {
+  if (!isBrowser) return 0;
+  const scrollingElement = document.scrollingElement;
+  return scrollingElement?.scrollTop ?? window.scrollY ?? 0;
+};
+var setWindowScrollY = (value) => {
+  if (!isBrowser) return;
+  const scrollingElement = document.scrollingElement;
+  if (scrollingElement) {
+    scrollingElement.scrollTop = value;
+    return;
+  }
+  document.documentElement.scrollTop = value;
+  document.body.scrollTop = value;
+};
+var animateWindowScrollBy = (topDelta, durationMs) => {
+  if (!isBrowser) return;
+  if (!Number.isFinite(topDelta) || Math.abs(topDelta) < 0.5) return;
+  const startY = getWindowScrollY();
+  const targetY = startY + topDelta;
+  const scrollingElement = document.scrollingElement ?? document.documentElement;
+  const maxScrollY = Math.max(
+    0,
+    scrollingElement.scrollHeight - scrollingElement.clientHeight
+  );
+  const clampedTargetY = Math.max(0, Math.min(targetY, maxScrollY));
+  const distance = clampedTargetY - startY;
+  if (Math.abs(distance) < 0.5) return;
+  const duration = Math.max(0, durationMs);
+  const startTime = performance.now();
+  const token = windowScrollAnimationToken += 1;
+  const tick = (now) => {
+    if (token !== windowScrollAnimationToken) return;
+    const elapsed = now - startTime;
+    const progress = duration === 0 ? 1 : clamp01(elapsed / duration);
+    const eased = easeInOutCubic(progress);
+    const nextY = startY + distance * eased;
+    setWindowScrollY(nextY);
+    if (progress < 1) {
+      window.requestAnimationFrame(tick);
+    }
+  };
+  window.requestAnimationFrame(tick);
+};
+var scrollContainerBy = (container, topDelta, leftDelta, options) => {
   if (!isBrowser) return;
   if (Math.abs(topDelta) < 0.5 && Math.abs(leftDelta) < 0.5) {
     return;
   }
+  const behavior = options?.behavior;
+  const durationMs = options?.durationMs;
   const isRootContainer = container === document.body || container === document.documentElement || container === document.scrollingElement;
   if (isRootContainer) {
+    if (typeof durationMs === "number" && durationMs >= 0) {
+      animateWindowScrollBy(topDelta, durationMs);
+      if (Math.abs(leftDelta) >= 0.5) {
+        window.scrollBy({ left: leftDelta, behavior: behavior ?? "auto" });
+      }
+      return;
+    }
     window.scrollBy({
       top: topDelta,
       left: leftDelta,
@@ -1178,7 +1255,7 @@ var scrollContainerBy = (container, topDelta, leftDelta, behavior) => {
   elementContainer.scrollTop += topDelta;
   elementContainer.scrollLeft += leftDelta;
 };
-var alignWithinViewport = (element, margin, behavior, mode) => {
+var alignWithinViewport = (element, margin, behavior, durationMs, mode) => {
   if (mode === "preserve") return;
   const viewportRect = getViewportRect();
   const finalRect = getClientRect(element);
@@ -1187,6 +1264,10 @@ var alignWithinViewport = (element, margin, behavior, mode) => {
   const desiredTop = mode === "center" ? margin.top + (availableHeight - finalRect.height) / 2 : margin.top;
   const delta = finalRect.top - desiredTop;
   if (Math.abs(delta) < 0.5) return;
+  if (typeof durationMs === "number" && durationMs >= 0) {
+    animateWindowScrollBy(delta, durationMs);
+    return;
+  }
   window.scrollBy({
     top: delta,
     behavior: behavior ?? "auto"
@@ -1194,6 +1275,7 @@ var alignWithinViewport = (element, margin, behavior, mode) => {
 };
 var ensureElementInView = (element, margin, options) => {
   const behavior = options?.behavior ?? "auto";
+  const durationMs = options?.durationMs;
   const mode = options?.mode ?? "preserve";
   if (!isBrowser) return;
   const scrollParents = getScrollParents(element);
@@ -1217,7 +1299,10 @@ var ensureElementInView = (element, margin, options) => {
       leftDelta = targetRect.right - (containerRect.right - margin.right);
     }
     if (topDelta !== 0 || leftDelta !== 0) {
-      scrollContainerBy(container, topDelta, leftDelta, behavior);
+      scrollContainerBy(container, topDelta, leftDelta, {
+        behavior,
+        durationMs
+      });
     }
   }
   const viewportRect = getViewportRect();
@@ -1235,13 +1320,20 @@ var ensureElementInView = (element, margin, options) => {
     viewportLeftDelta = finalRect.right - (viewportRect.right - margin.right);
   }
   if (viewportTopDelta !== 0 || viewportLeftDelta !== 0) {
-    window.scrollBy({
-      top: viewportTopDelta,
-      left: viewportLeftDelta,
-      behavior
-    });
+    if (typeof durationMs === "number" && durationMs >= 0) {
+      animateWindowScrollBy(viewportTopDelta, durationMs);
+      if (Math.abs(viewportLeftDelta) >= 0.5) {
+        window.scrollBy({ left: viewportLeftDelta, behavior: behavior ?? "auto" });
+      }
+    } else {
+      window.scrollBy({
+        top: viewportTopDelta,
+        left: viewportLeftDelta,
+        behavior
+      });
+    }
   }
-  alignWithinViewport(element, margin, behavior, mode);
+  alignWithinViewport(element, margin, behavior, durationMs, mode);
 };
 var resolveStepTarget = (target) => {
   if (!isBrowser) return null;
@@ -1269,7 +1361,13 @@ var resolveStepTarget = (target) => {
 var useTourTarget = () => {
   const { activeStep, state, activeFlowId, flows } = useTour();
   const [targetInfo, setTargetInfo] = useState3(INITIAL_TARGET_INFO);
-  const autoScrollStateRef = useRef4({ stepId: null, checks: 0, stalledChecks: 0, done: false, lastRect: null });
+  const autoScrollStateRef = useRef4({
+    stepId: null,
+    checks: 0,
+    stalledChecks: 0,
+    done: false,
+    lastRect: null
+  });
   const autoScrollRafRef = useRef4(null);
   const autoScrollTimeoutRef = useRef4(null);
   const lastRectRef = useRef4(null);
@@ -1293,6 +1391,21 @@ var useTourTarget = () => {
       initialScrollStepRef.current = null;
     };
   }, [activeStep?.id]);
+  useEffect4(() => {
+    if (!isBrowser) return;
+    if (!activeStep || !state || state.status !== "running") return;
+    if (typeof activeStep.targetBehavior?.scrollDurationMs !== "number") return;
+    const html = document.documentElement;
+    const body = document.body;
+    const previousHtmlScrollBehavior = html.style.scrollBehavior;
+    const previousBodyScrollBehavior = body.style.scrollBehavior;
+    html.style.scrollBehavior = "auto";
+    body.style.scrollBehavior = "auto";
+    return () => {
+      html.style.scrollBehavior = previousHtmlScrollBehavior;
+      body.style.scrollBehavior = previousBodyScrollBehavior;
+    };
+  }, [activeStep?.id, activeStep?.targetBehavior?.scrollDurationMs, state?.status]);
   useLayoutEffect(() => {
     if (!isBrowser) return;
     if (!activeStep) return;
@@ -1308,16 +1421,19 @@ var useTourTarget = () => {
       DEFAULT_SCROLL_MARGIN
     );
     const scrollMode = activeStep.targetBehavior?.scrollMode ?? DEFAULT_SCROLL_MODE;
+    const scrollDurationMs = activeStep.targetBehavior?.scrollDurationMs;
     const hasLiveRect = targetInfo.rectSource === "live";
     const scrollBehavior = hasLiveRect ? "smooth" : "auto";
     ensureElementInView(targetInfo.element, margin, {
       behavior: scrollBehavior,
+      durationMs: scrollBehavior === "smooth" ? scrollDurationMs : void 0,
       mode: scrollMode
     });
   }, [
     activeStep?.id,
     activeStep?.targetBehavior?.scrollMargin,
     activeStep?.targetBehavior?.scrollMode,
+    activeStep?.targetBehavior?.scrollDurationMs,
     targetInfo.rect,
     targetInfo.lastResolvedRect,
     targetInfo.element,
@@ -1680,6 +1796,7 @@ var useTourTarget = () => {
     }
     const { element } = targetInfo;
     const scrollMode = activeStep.targetBehavior?.scrollMode ?? "center";
+    const scrollDurationMs = activeStep.targetBehavior?.scrollDurationMs;
     const runCheck = () => {
       autoScrollRafRef.current = null;
       if (!isBrowser) return;
@@ -1713,10 +1830,14 @@ var useTourTarget = () => {
         autoState.stalledChecks += 1;
       }
       const behavior = autoState.stalledChecks >= STALLED_CHECKS_BEFORE_AUTO ? "auto" : "smooth";
-      ensureElementInView(element, margin, {
-        behavior,
-        mode: scrollMode
-      });
+      const shouldDispatchScroll = behavior === "auto" || !hasProgress || autoState.checks <= 1;
+      if (shouldDispatchScroll) {
+        ensureElementInView(element, margin, {
+          behavior,
+          durationMs: behavior === "smooth" ? scrollDurationMs : void 0,
+          mode: scrollMode
+        });
+      }
       autoScrollTimeoutRef.current = globalThis.setTimeout(() => {
         autoScrollRafRef.current = window.requestAnimationFrame(runCheck);
       }, 120);
@@ -1724,7 +1845,12 @@ var useTourTarget = () => {
     cancelAutoScrollLoop();
     autoScrollRafRef.current = window.requestAnimationFrame(runCheck);
     return cancelAutoScrollLoop;
-  }, [activeStep, activeStep?.targetBehavior?.scrollMode, targetInfo]);
+  }, [
+    activeStep,
+    activeStep?.targetBehavior?.scrollMode,
+    activeStep?.targetBehavior?.scrollDurationMs,
+    targetInfo
+  ]);
   return targetInfo;
 };
 
@@ -2696,6 +2822,7 @@ import { useEffect as useEffect13, useMemo as useMemo10, useRef as useRef9 } fro
 var DEFAULT_PADDING = 12;
 var DEFAULT_RADIUS = 12;
 var DEFAULT_EDGE_BUFFER = 0;
+var rectIntersectsViewport = (rect, viewport) => rect.bottom > 0 && rect.right > 0 && rect.top < viewport.height && rect.left < viewport.width;
 var useTourOverlay = (options) => {
   const {
     target,
@@ -2707,9 +2834,13 @@ var useTourOverlay = (options) => {
   } = options;
   const hasShownRef = useRef9(false);
   const lastReadyTargetRef = useRef9(null);
+  const viewport = getViewportRect();
+  const liveRectIsInViewport = Boolean(
+    target.isScreen || target.rect && rectIntersectsViewport(target.rect, viewport)
+  );
   useEffect13(() => {
     if (!isBrowser) return;
-    if (target.status === "ready") {
+    if (target.status === "ready" && liveRectIsInViewport) {
       hasShownRef.current = true;
       lastReadyTargetRef.current = {
         ...target,
@@ -2721,11 +2852,10 @@ var useTourOverlay = (options) => {
       hasShownRef.current = false;
       lastReadyTargetRef.current = null;
     }
-  }, [target, isInGracePeriod]);
-  const viewport = getViewportRect();
+  }, [target, isInGracePeriod, liveRectIsInViewport]);
   const cachedTarget = lastReadyTargetRef.current;
-  const highlightTarget = target.status === "ready" ? target : cachedTarget;
-  const resolvedRect = highlightTarget?.rect ?? target.rect;
+  const highlightTarget = target.status === "ready" && liveRectIsInViewport ? target : cachedTarget;
+  const resolvedRect = highlightTarget?.rect ?? (cachedTarget ? null : target.rect ?? null);
   const resolvedIsScreen = highlightTarget?.isScreen ?? target.isScreen;
   const expandedRect = resolvedIsScreen || !resolvedRect ? viewport : expandRect(resolvedRect, padding);
   const safeBuffer = Math.max(0, edgeBuffer);
@@ -3571,6 +3701,7 @@ var DEFAULT_POPOVER_CONTENT_TRANSITION = {
   ease: "easeOut"
 };
 var floatingPositionCache = /* @__PURE__ */ new Map();
+var rectIntersectsViewport2 = (rect, viewport) => rect.bottom > 0 && rect.right > 0 && rect.top < viewport.height && rect.left < viewport.width;
 var getFloatingCacheKey = (target) => {
   if (target.stepId) {
     return `step:${target.stepId}`;
@@ -3599,7 +3730,8 @@ var TourPopoverPortal = ({
   containerComponent,
   contentComponent,
   transitionsOverride,
-  isInGracePeriod = false
+  isInGracePeriod = false,
+  onHeightChange
 }) => {
   if (!isBrowser) return null;
   const host = portalHost();
@@ -3612,13 +3744,16 @@ var TourPopoverPortal = ({
   const popoverContentTransition = transitionsOverride?.popoverContent ?? adapter.transitions.popoverContent ?? DEFAULT_POPOVER_CONTENT_TRANSITION;
   const viewport = useViewportRect();
   const prefersMobileLayout = viewport.width <= MOBILE_BREAKPOINT || viewport.height <= MOBILE_HEIGHT_BREAKPOINT;
+  const liveTargetUsable = Boolean(
+    target.status === "ready" && (target.isScreen || target.rect && rectIntersectsViewport2(target.rect, viewport))
+  );
   const prefersMobileRef = useRef12(prefersMobileLayout);
   useEffect17(() => {
     prefersMobileRef.current = prefersMobileLayout;
   }, [prefersMobileLayout]);
   const lastReadyTargetRef = useRef12(null);
   useEffect17(() => {
-    if (target.status === "ready" && target.rect) {
+    if (liveTargetUsable && target.rect) {
       lastReadyTargetRef.current = {
         rect: { ...target.rect },
         isScreen: target.isScreen
@@ -3626,11 +3761,11 @@ var TourPopoverPortal = ({
     } else if (target.status === "idle" && !isInGracePeriod) {
       lastReadyTargetRef.current = null;
     }
-  }, [target.isScreen, target.rect, target.status, isInGracePeriod]);
+  }, [target.isScreen, target.rect, target.status, isInGracePeriod, liveTargetUsable]);
   const cachedTarget = lastReadyTargetRef.current;
-  const resolvedRect = target.rect ?? target.lastResolvedRect ?? cachedTarget?.rect ?? null;
-  const resolvedIsScreen = target.status === "ready" ? target.isScreen : cachedTarget?.isScreen ?? target.isScreen;
-  const shouldHidePopover = !resolvedRect && !target.isScreen;
+  const resolvedRect = liveTargetUsable ? target.rect ?? target.lastResolvedRect ?? cachedTarget?.rect ?? null : cachedTarget?.rect ?? (cachedTarget ? null : target.rect ?? target.lastResolvedRect ?? null);
+  const resolvedIsScreen = liveTargetUsable ? target.isScreen : cachedTarget?.isScreen ?? target.isScreen;
+  const shouldHidePopover = !resolvedRect && !resolvedIsScreen;
   const fallbackRect = resolvedRect ?? viewport;
   const fallbackIsScreen = resolvedIsScreen;
   const [floatingSize, setFloatingSize] = useState12(null);
@@ -3713,14 +3848,20 @@ var TourPopoverPortal = ({
       floatingPositionCache.set(cacheKey, floatingPosition);
     }
   }, [floatingPosition, target.isScreen, target.stepId]);
-  const dockedPosition = useMemo13(
-    () => ({
+  const dockedPosition = useMemo13(() => {
+    if (floatingSize) {
+      return {
+        top: viewport.height - DOCKED_MARGIN - floatingSize.height,
+        left: viewport.width - DOCKED_MARGIN - floatingSize.width,
+        transform: "translate3d(0px, 0px, 0px)"
+      };
+    }
+    return {
       top: viewport.height - DOCKED_MARGIN,
       left: viewport.width - DOCKED_MARGIN,
       transform: "translate3d(-100%, -100%, 0px)"
-    }),
-    [viewport.height, viewport.width]
-  );
+    };
+  }, [viewport.height, viewport.width, floatingSize]);
   const mobilePosition = useMemo13(
     () => ({
       top: viewport.height - MOBILE_HORIZONTAL_GUTTER,
@@ -3734,6 +3875,10 @@ var TourPopoverPortal = ({
       setFloatingPosition(dockedPosition);
     }
   }, [dockedPosition, layoutMode]);
+  useEffect17(() => {
+    if (!onHeightChange) return;
+    onHeightChange(floatingSize ? floatingSize.height + DOCKED_MARGIN : 0);
+  }, [floatingSize, onHeightChange]);
   useEffect17(() => {
     if (layoutMode === "mobile") {
       setFloatingPosition(mobilePosition);
@@ -3833,10 +3978,11 @@ var TourPopoverPortal = ({
   useLayoutEffect2(() => {
     if (!isBrowser) return;
     const floatingEl = floatingRef.current;
-    const rectInfo = target.rect;
+    const rectInfo = liveTargetUsable ? target.rect ?? target.lastResolvedRect ?? null : null;
     if (!floatingEl) return;
+    if (!liveTargetUsable) return;
     if (target.status !== "ready") return;
-    if (!rectInfo || target.isScreen) return;
+    if (!rectInfo || resolvedIsScreen) return;
     if (layoutMode === "mobile" || layoutMode === "manual") return;
     const cancelState = { cancelled: false };
     const retryState = overflowRetryRef.current;
@@ -3852,7 +3998,7 @@ var TourPopoverPortal = ({
       }
     };
     const virtualReference = {
-      contextElement: target.element ?? void 0,
+      contextElement: liveTargetUsable ? target.element ?? void 0 : void 0,
       getBoundingClientRect: () => DOMRectReadOnly.fromRect({
         width: rectInfo.width,
         height: rectInfo.height,
@@ -3964,10 +4110,13 @@ var TourPopoverPortal = ({
     dockedPosition,
     isAutoPlacement,
     layoutMode,
+    liveTargetUsable,
     offset,
+    resolvedIsScreen,
     resolvedPlacement,
     target.element,
     target.isScreen,
+    target.lastResolvedRect,
     target.lastUpdated,
     target.status,
     target.stepId
@@ -4602,6 +4751,7 @@ export {
   notifyRouteChange,
   reducedMotionAnimationAdapter,
   subscribeToRouteChanges,
+  tweenAnimationAdapter,
   useAdvanceRules,
   useAnimationAdapter,
   useBodyScrollLock,

package/dist/motion/animationAdapter.d.ts

@@ -30,6 +30,7 @@ export interface AnimationAdapterProviderProps {
 export declare const AnimationAdapterProvider: ({ adapter, children, }: AnimationAdapterProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useAnimationAdapter: () => AnimationAdapter;
 export declare const defaultAnimationAdapter: AnimationAdapter;
+export declare const tweenAnimationAdapter: AnimationAdapter;
 export declare const reducedMotionAnimationAdapter: AnimationAdapter;
 export interface UseAnimationAdapterOptions {
     defaultAdapter?: AnimationAdapter;

package/dist/motion/animationAdapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animationAdapter.d.ts","sourceRoot":"","sources":["../../src/motion/animationAdapter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,OAAO,MAAM,CAAC,GAAG,CAAA;IAC5B,aAAa,EAAE,OAAO,MAAM,CAAC,OAAO,CAAA;IACpC,SAAS,EAAE,OAAO,MAAM,CAAC,GAAG,CAAA;IAC5B,UAAU,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;IAC9B,UAAU,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;IAC9B,UAAU,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;IAC9B,UAAU,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;IAC9B,YAAY,EAAE,OAAO,MAAM,CAAC,MAAM,CAAA;CACnC;AAED,MAAM,WAAW,2BAA2B;IAC1C,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B,cAAc,CAAC,EAAE,UAAU,CAAA;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,0BAA0B,CAAA;IACtC,WAAW,EAAE,2BAA2B,CAAA;CACzC;AA+CD,MAAM,WAAW,6BAA6B;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,wBAAwB,GAAI,wBAGtC,6BAA6B,4CAO/B,CAAA;AAED,eAAO,MAAM,mBAAmB,QAAO,gBAEtC,CAAA;AAED,eAAO,MAAM,uBAAuB,kBAAiB,CAAA;AAErD,eAAO,MAAM,6BAA6B,EAAE,gBA6B3C,CAAA;AAID,MAAM,WAAW,0BAA0B;IACzC,cAAc,CAAC,EAAE,gBAAgB,CAAA;IACjC,oBAAoB,CAAC,EAAE,gBAAgB,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,4BAA4B,GACvC,UAAU,0BAA0B,KACnC,gBA6BF,CAAA"}
+{"version":3,"file":"animationAdapter.d.ts","sourceRoot":"","sources":["../../src/motion/animationAdapter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,OAAO,MAAM,CAAC,GAAG,CAAA;IAC5B,aAAa,EAAE,OAAO,MAAM,CAAC,OAAO,CAAA;IACpC,SAAS,EAAE,OAAO,MAAM,CAAC,GAAG,CAAA;IAC5B,UAAU,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;IAC9B,UAAU,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;IAC9B,UAAU,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;IAC9B,UAAU,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;IAC9B,YAAY,EAAE,OAAO,MAAM,CAAC,MAAM,CAAA;CACnC;AAED,MAAM,WAAW,2BAA2B;IAC1C,gBAAgB,CAAC,EAAE,UAAU,CAAA;IAC7B,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B,cAAc,CAAC,EAAE,UAAU,CAAA;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,0BAA0B,CAAA;IACtC,WAAW,EAAE,2BAA2B,CAAA;CACzC;AA+CD,MAAM,WAAW,6BAA6B;IAC5C,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,eAAO,MAAM,wBAAwB,GAAI,wBAGtC,6BAA6B,4CAO/B,CAAA;AAED,eAAO,MAAM,mBAAmB,QAAO,gBAEtC,CAAA;AAED,eAAO,MAAM,uBAAuB,kBAAiB,CAAA;AAErD,eAAO,MAAM,qBAAqB,EAAE,gBAcnC,CAAA;AAED,eAAO,MAAM,6BAA6B,EAAE,gBA6B3C,CAAA;AAID,MAAM,WAAW,0BAA0B;IACzC,cAAc,CAAC,EAAE,gBAAgB,CAAA;IACjC,oBAAoB,CAAC,EAAE,gBAAgB,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,4BAA4B,GACvC,UAAU,0BAA0B,KACnC,gBA6BF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsterix/react",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "React bindings for Flowsterix - guided tours and onboarding flows",
   "license": "MIT",
   "repository": {
@@ -73,7 +73,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/dom": "^1.7.4",
-    "@flowsterix/core": "0.10.0"
+    "@flowsterix/core": "0.10.1"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/chunk-AJZMUYBN.mjs

@@ -1,21 +0,0 @@
-// src/devtools/DevToolsContext.tsx
-import { createContext, useContext } from "react";
-var DevToolsContext = createContext(null);
-function useDevToolsContext() {
-  return useContext(DevToolsContext);
-}
-function useDevToolsContextRequired() {
-  const context = useContext(DevToolsContext);
-  if (!context) {
-    throw new Error(
-      "useDevToolsContext must be used within a TourProvider with devtools enabled"
-    );
-  }
-  return context;
-}
-
-export {
-  DevToolsContext,
-  useDevToolsContext,
-  useDevToolsContextRequired
-};

package/dist/chunk-FCOKCGV3.cjs

@@ -1,21 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/devtools/DevToolsContext.tsx
-var _react = require('react');
-var DevToolsContext = _react.createContext.call(void 0, null);
-function useDevToolsContext() {
-  return _react.useContext.call(void 0, DevToolsContext);
-}
-function useDevToolsContextRequired() {
-  const context = _react.useContext.call(void 0, DevToolsContext);
-  if (!context) {
-    throw new Error(
-      "useDevToolsContext must be used within a TourProvider with devtools enabled"
-    );
-  }
-  return context;
-}
-
-
-
-
-
-exports.DevToolsContext = DevToolsContext; exports.useDevToolsContext = useDevToolsContext; exports.useDevToolsContextRequired = useDevToolsContextRequired;