@comitor/ui 2.0.0 → 3.0.0

package/dist/components/ui/tour.js

@@ -0,0 +1,1207 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  autoUpdate,
+  flip,
+  hide,
+  limitShift,
+  offset,
+  arrow as onArrow,
+  shift,
+  useFloating
+} from "@floating-ui/react-dom";
+import { useDirection } from "@radix-ui/react-direction";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { useComitorLabels } from "../../i18n/locale-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useAsRef } from "../../lib/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../lib/use-lazy-ref.js";
+import { Button } from "./button.js";
+const ROOT_NAME = "Tour";
+const PORTAL_NAME = "TourPortal";
+const STEP_NAME = "TourStep";
+const ARROW_NAME = "TourArrow";
+const HEADER_NAME = "TourHeader";
+const TITLE_NAME = "TourTitle";
+const DESCRIPTION_NAME = "TourDescription";
+const CLOSE_NAME = "TourClose";
+const PREV_NAME = "TourPrev";
+const NEXT_NAME = "TourNext";
+const SKIP_NAME = "TourSkip";
+const STEP_COUNTER_NAME = "TourStepCounter";
+const FOOTER_NAME = "TourFooter";
+const POINTER_DOWN_OUTSIDE = "tour.pointerDownOutside";
+const INTERACT_OUTSIDE = "tour.interactOutside";
+const OPEN_AUTO_FOCUS = "tour.openAutoFocus";
+const CLOSE_AUTO_FOCUS = "tour.closeAutoFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
+const ALIGN_OPTIONS = ["start", "center", "end"];
+const DEFAULT_ALIGN_OFFSET = 0;
+const DEFAULT_SIDE_OFFSET = 16;
+const DEFAULT_SPOTLIGHT_PADDING = 4;
+const EMPTY_BOUNDARY = [];
+const OPPOSITE_SIDE = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+let focusGuardCount = 0;
+function createFocusGuard() {
+  const element = document.createElement("span");
+  element.setAttribute("data-tour-focus-guard", "");
+  element.tabIndex = 0;
+  element.style.outline = "none";
+  element.style.opacity = "0";
+  element.style.position = "fixed";
+  element.style.pointerEvents = "none";
+  return element;
+}
+function useFocusGuards(enabled) {
+  React.useEffect(() => {
+    if (!enabled) return;
+    const edgeGuards = document.querySelectorAll("[data-tour-focus-guard]");
+    document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
+    document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
+    focusGuardCount++;
+    return () => {
+      if (focusGuardCount === 1) {
+        const guards = document.querySelectorAll("[data-tour-focus-guard]");
+        for (const node of guards) {
+          node.remove();
+        }
+      }
+      focusGuardCount--;
+    };
+  }, [enabled]);
+}
+function useFocusTrap(containerRef, enabled, tourOpen, onOpenAutoFocus, onCloseAutoFocus) {
+  const lastFocusedElementRef = React.useRef(null);
+  const onOpenAutoFocusRef = useAsRef(onOpenAutoFocus);
+  const onCloseAutoFocusRef = useAsRef(onCloseAutoFocus);
+  const tourOpenRef = useAsRef(tourOpen);
+  React.useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const previouslyFocusedElement = document.activeElement;
+    function getTabbableCandidates() {
+      if (!container) return [];
+      const nodes = [];
+      const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: (node) => {
+          const element = node;
+          const isHiddenInput = element.tagName === "INPUT" && element.type === "hidden";
+          const isDisabled = element.disabled === true;
+          if (element.hidden || isHiddenInput || isDisabled) return NodeFilter.FILTER_SKIP;
+          return element.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        }
+      });
+      while (walker.nextNode()) {
+        nodes.push(walker.currentNode);
+      }
+      return nodes;
+    }
+    function getTabbableEdges() {
+      const candidates = getTabbableCandidates();
+      const first = candidates[0];
+      const last = candidates[candidates.length - 1];
+      return [first, last];
+    }
+    function onFocusIn(event) {
+      if (!container) return;
+      const target = event.target;
+      if (container.contains(target)) {
+        lastFocusedElementRef.current = target;
+      } else {
+        const elementToFocus = lastFocusedElementRef.current ?? getTabbableCandidates()[0];
+        elementToFocus?.focus({ preventScroll: true });
+      }
+    }
+    function onKeyDown(event) {
+      if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+      const [first, last] = getTabbableEdges();
+      const hasTabbableElements = first && last;
+      if (!hasTabbableElements) {
+        if (document.activeElement === container) event.preventDefault();
+        return;
+      }
+      if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first?.focus({ preventScroll: true });
+      } else if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus({ preventScroll: true });
+      }
+    }
+    const openAutoFocusEvent = new CustomEvent(OPEN_AUTO_FOCUS, EVENT_OPTIONS);
+    if (onOpenAutoFocusRef.current) {
+      container.addEventListener(OPEN_AUTO_FOCUS, onOpenAutoFocusRef.current, { once: true });
+    }
+    container.dispatchEvent(openAutoFocusEvent);
+    if (!openAutoFocusEvent.defaultPrevented) {
+      const tabbableCandidates = getTabbableCandidates();
+      if (tabbableCandidates.length > 0) {
+        tabbableCandidates[0]?.focus({ preventScroll: true });
+      } else {
+        container.focus({ preventScroll: true });
+      }
+    }
+    document.addEventListener("focusin", onFocusIn);
+    container.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("focusin", onFocusIn);
+      container.removeEventListener("keydown", onKeyDown);
+      if (!tourOpenRef.current) {
+        setTimeout(() => {
+          const closeAutoFocusEvent = new CustomEvent(CLOSE_AUTO_FOCUS, EVENT_OPTIONS);
+          if (onCloseAutoFocusRef.current) {
+            container.addEventListener(CLOSE_AUTO_FOCUS, onCloseAutoFocusRef.current, {
+              once: true
+            });
+          }
+          container.dispatchEvent(closeAutoFocusEvent);
+          if (!closeAutoFocusEvent.defaultPrevented) {
+            if (previouslyFocusedElement && document.body.contains(previouslyFocusedElement)) {
+              previouslyFocusedElement.focus({ preventScroll: true });
+            }
+          }
+          if (onCloseAutoFocusRef.current) {
+            container.removeEventListener(CLOSE_AUTO_FOCUS, onCloseAutoFocusRef.current);
+          }
+        }, 0);
+      }
+    };
+  }, [containerRef, enabled, onOpenAutoFocusRef, onCloseAutoFocusRef, tourOpenRef]);
+}
+function getDataState(open) {
+  return open ? "open" : "closed";
+}
+function useStore(selector, ogStore) {
+  const contextStore = React.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`useStore\` ph\u1EA3i \u0111\u01B0\u1EE3c g\u1ECDi b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function getTargetElement(target) {
+  if (typeof target === "string") {
+    return document.querySelector(target);
+  }
+  if (target && "current" in target) {
+    return target.current;
+  }
+  if (target instanceof HTMLElement) {
+    return target;
+  }
+  return null;
+}
+function getDefaultScrollBehavior() {
+  if (typeof window === "undefined") return "smooth";
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+}
+function getScrollParent(element) {
+  let parent = element.parentElement;
+  while (parent && parent !== document.body && parent !== document.documentElement) {
+    const { overflowY } = window.getComputedStyle(parent);
+    const isScrollable = overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+    if (isScrollable && parent.scrollHeight > parent.clientHeight) return parent;
+    parent = parent.parentElement;
+  }
+  return null;
+}
+function onScrollToElement(element, scrollBehavior = getDefaultScrollBehavior(), scrollOffset) {
+  const offset2 = {
+    top: 100,
+    bottom: 100,
+    left: 0,
+    right: 0,
+    ...scrollOffset
+  };
+  const rect = element.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+  const isInViewport = rect.top >= offset2.top && rect.bottom <= viewportHeight - offset2.bottom && rect.left >= offset2.left && rect.right <= viewportWidth - offset2.right;
+  if (!isInViewport) {
+    const scrollParent = getScrollParent(element);
+    if (scrollParent) {
+      scrollParent.scrollBy({ top: rect.top - offset2.top, behavior: scrollBehavior });
+      return;
+    }
+    const elementTop = rect.top + window.scrollY;
+    const scrollTop = elementTop - offset2.top;
+    window.scrollTo({
+      top: Math.max(0, scrollTop),
+      behavior: scrollBehavior
+    });
+  }
+}
+function getSideAndAlignFromPlacement(placement) {
+  const [side, align = "center"] = placement.split("-");
+  return [side, align];
+}
+function getPlacement(side, align) {
+  if (align === "center") {
+    return side;
+  }
+  return `${side}-${align}`;
+}
+function updateMask(store, targetElement, padding = DEFAULT_SPOTLIGHT_PADDING) {
+  const clientRect = targetElement.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const x = Math.max(0, clientRect.left - padding);
+  const y = Math.max(0, clientRect.top - padding);
+  const width = Math.min(viewportWidth - x, clientRect.width + padding * 2);
+  const height = Math.min(viewportHeight - y, clientRect.height + padding * 2);
+  const path = `polygon(0% 0%, 0% 100%, ${x}px 100%, ${x}px ${y}px, ${x + width}px ${y}px, ${x + width}px ${y + height}px, ${x}px ${y + height}px, ${x}px 100%, 100% 100%, 100% 0%)`;
+  store.setState("maskPath", path);
+  store.setState("spotlightRect", { x, y, width, height });
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+const TourContext = React.createContext(null);
+function useTourContext(consumerName) {
+  const context = React.useContext(TourContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+const StepContext = React.createContext(null);
+function useStepContext(consumerName) {
+  const context = React.useContext(StepContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${STEP_NAME}\``);
+  }
+  return context;
+}
+const DefaultFooterContext = React.createContext(false);
+const PortalContext = React.createContext(null);
+function usePortalContext(consumerName) {
+  const context = React.useContext(PortalContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useScrollLock(enabled) {
+  React.useEffect(() => {
+    if (!enabled) return;
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    return () => {
+      document.body.style.overflow = originalStyle;
+      document.body.style.paddingRight = "";
+    };
+  }, [enabled]);
+}
+function Tour(props) {
+  const {
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    value: valueProp,
+    defaultValue = 0,
+    onValueChange,
+    onComplete,
+    onSkip,
+    autoScroll = true,
+    /*
+     * ⚠ Khác thượng nguồn: KHÔNG có giá trị mặc định ở đây. Bản gốc viết
+     * `scrollBehavior = getDefaultScrollBehavior()`, tức đọc `window.matchMedia` NGAY TRONG
+     * render. Để `undefined` thì tham số mặc định của `onScrollToElement` tính đúng giá trị đó
+     * vào lúc CUỘN — ngoài render, và theo cài đặt reduced-motion ở thời điểm ấy.
+     */
+    scrollBehavior,
+    scrollOffset,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onInteractOutside,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    dir: dirProp,
+    alignOffset = DEFAULT_ALIGN_OFFSET,
+    sideOffset = DEFAULT_SIDE_OFFSET,
+    spotlightPadding = DEFAULT_SPOTLIGHT_PADDING,
+    dismissible = true,
+    modal = true,
+    stepFooter,
+    labels: labelsProp,
+    asChild,
+    ...rootProps
+  } = props;
+  const dir = useDirection(dirProp);
+  const [portal, setPortal] = React.useState(null);
+  const prevOpenRef = React.useRef(void 0);
+  const previouslyFocusedElementRef = React.useRef(null);
+  const stateRef = useLazyRef(() => ({
+    open: openProp ?? defaultOpen,
+    value: valueProp ?? defaultValue,
+    steps: [],
+    maskPath: "",
+    spotlightRect: null
+  }));
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stepIdsMapRef = useLazyRef(() => /* @__PURE__ */ new Map());
+  const stepIdCounterRef = useLazyRef(() => ({ current: 0 }));
+  const propsRef = useAsRef({
+    valueProp,
+    onOpenChange,
+    onValueChange,
+    onComplete,
+    onSkip,
+    onEscapeKeyDown,
+    onCloseAutoFocus,
+    autoScroll,
+    scrollBehavior,
+    scrollOffset
+  });
+  const store = React.useMemo(
+    () => ({
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => {
+        return stateRef.current;
+      },
+      setState: (key, value) => {
+        if (Object.is(stateRef.current[key], value)) return;
+        stateRef.current[key] = value;
+        if (key === "open" && typeof value === "boolean") {
+          propsRef.current.onOpenChange?.(value);
+          if (value) {
+            if (stateRef.current.steps.length > 0) {
+              if (stateRef.current.value >= stateRef.current.steps.length) {
+                store.setState("value", 0);
+              }
+            }
+          } else {
+            if (stateRef.current.value < (stateRef.current.steps.length || 0) - 1) {
+              propsRef.current.onSkip?.();
+            }
+          }
+        } else if (key === "value" && typeof value === "number") {
+          const prevStep = stateRef.current.steps[stateRef.current.value];
+          const nextStep = stateRef.current.steps[value];
+          prevStep?.onStepLeave?.();
+          nextStep?.onStepEnter?.();
+          if (value >= stateRef.current.steps.length) {
+            propsRef.current.onComplete?.();
+            if (propsRef.current.valueProp !== void 0) {
+              propsRef.current.onValueChange?.(value);
+            }
+            store.setState("open", false);
+            return;
+          }
+          if (propsRef.current.valueProp !== void 0) {
+            propsRef.current.onValueChange?.(value);
+            return;
+          }
+          propsRef.current.onValueChange?.(value);
+          if (nextStep && propsRef.current.autoScroll) {
+            const targetElement = getTargetElement(nextStep.target);
+            if (targetElement) {
+              onScrollToElement(targetElement, propsRef.current.scrollBehavior, propsRef.current.scrollOffset);
+            }
+          }
+        }
+        store.notify();
+      },
+      notify: () => {
+        for (const listener of listenersRef.current) {
+          listener();
+        }
+      },
+      addStep: (stepData) => {
+        const id = `step-${stepIdCounterRef.current.current++}`;
+        const index = stateRef.current.steps.length;
+        stepIdsMapRef.current.set(id, index);
+        stateRef.current.steps = [...stateRef.current.steps, stepData];
+        store.notify();
+        return { id, index };
+      },
+      removeStep: (id) => {
+        const index = stepIdsMapRef.current.get(id);
+        if (index === void 0) return;
+        stateRef.current.steps = stateRef.current.steps.filter((_, i) => i !== index);
+        stepIdsMapRef.current.delete(id);
+        for (const [stepId, stepIndex] of stepIdsMapRef.current.entries()) {
+          if (stepIndex > index) {
+            stepIdsMapRef.current.set(stepId, stepIndex - 1);
+          }
+        }
+        store.notify();
+      },
+      updateStep: (id, stepData) => {
+        const index = stepIdsMapRef.current.get(id);
+        if (index === void 0) return;
+        if (stateRef.current.steps[index] === stepData) return;
+        const steps = [...stateRef.current.steps];
+        steps[index] = stepData;
+        stateRef.current.steps = steps;
+        store.notify();
+      },
+      getStepIndex: (id) => stepIdsMapRef.current.get(id) ?? -1
+    }),
+    [stateRef, listenersRef, stepIdsMapRef, stepIdCounterRef, propsRef]
+  );
+  const open = useStore((state) => state.open, store);
+  React.useEffect(() => {
+    function onKeyDown(event) {
+      if (!open || event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+      if (propsRef.current.onEscapeKeyDown) {
+        propsRef.current.onEscapeKeyDown(event);
+        if (event.defaultPrevented) return;
+      }
+      event.preventDefault();
+      store.setState("open", false);
+    }
+    document.addEventListener("keydown", onKeyDown, { capture: true });
+    return () => document.removeEventListener("keydown", onKeyDown, { capture: true });
+  }, [store, open, propsRef]);
+  useIsomorphicLayoutEffect(() => {
+    const wasOpen = prevOpenRef.current;
+    if (open && !wasOpen) {
+      previouslyFocusedElementRef.current = document.activeElement;
+    } else if (!open && wasOpen) {
+      setTimeout(() => {
+        const container = portal ?? document.body;
+        const closeAutoFocusEvent = new CustomEvent(CLOSE_AUTO_FOCUS, EVENT_OPTIONS);
+        if (propsRef.current.onCloseAutoFocus) {
+          container.addEventListener(CLOSE_AUTO_FOCUS, propsRef.current.onCloseAutoFocus, {
+            once: true
+          });
+        }
+        container.dispatchEvent(closeAutoFocusEvent);
+        if (!closeAutoFocusEvent.defaultPrevented) {
+          const elementToFocus = previouslyFocusedElementRef.current;
+          if (elementToFocus && document.body.contains(elementToFocus)) {
+            elementToFocus.focus({ preventScroll: true });
+          }
+        }
+        previouslyFocusedElementRef.current = null;
+      }, 0);
+    }
+    prevOpenRef.current = open;
+  }, [open, portal, propsRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (openProp !== void 0) {
+      store.setState("open", openProp);
+    }
+  }, [openProp, store]);
+  useIsomorphicLayoutEffect(() => {
+    if (valueProp !== void 0) {
+      store.setState("value", valueProp);
+    }
+  }, [valueProp, store]);
+  const labels = useComitorLabels("tour", labelsProp);
+  const contextValue = React.useMemo(
+    () => ({
+      dir,
+      alignOffset,
+      sideOffset,
+      spotlightPadding,
+      dismissible,
+      modal,
+      stepFooter,
+      labels,
+      onPointerDownOutside,
+      onInteractOutside,
+      onOpenAutoFocus,
+      onCloseAutoFocus
+    }),
+    [
+      dir,
+      alignOffset,
+      sideOffset,
+      spotlightPadding,
+      dismissible,
+      modal,
+      stepFooter,
+      labels,
+      onPointerDownOutside,
+      onInteractOutside,
+      onOpenAutoFocus,
+      onCloseAutoFocus
+    ]
+  );
+  const portalContextValue = React.useMemo(
+    () => ({
+      portal,
+      onPortalChange: setPortal
+    }),
+    [portal]
+  );
+  useScrollLock(open && modal);
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(TourContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContextValue, children: /* @__PURE__ */ jsx(RootPrimitive, { "data-slot": "tour", dir, ...rootProps }) }) }) });
+}
+function TourStep(props) {
+  const {
+    target,
+    side = "bottom",
+    sideOffset,
+    align = "center",
+    alignOffset,
+    collisionBoundary = EMPTY_BOUNDARY,
+    collisionPadding = 0,
+    arrowPadding = 0,
+    sticky = "partial",
+    hideWhenDetached = false,
+    avoidCollisions = true,
+    required = false,
+    forceMount = false,
+    onStepEnter,
+    onStepLeave,
+    onPointerDownCapture: onPointerDownCaptureProp,
+    onFocusCapture: onFocusCaptureProp,
+    onBlurCapture: onBlurCaptureProp,
+    children,
+    className,
+    style,
+    asChild,
+    ...stepProps
+  } = props;
+  const store = useStoreContext(STEP_NAME);
+  const [arrow, setArrow] = React.useState(null);
+  const [footer, setFooter] = React.useState(null);
+  const [targetElement, setTargetElement] = React.useState(null);
+  const stepRef = React.useRef(null);
+  const stepIdRef = React.useRef("");
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+  const open = useStore((state) => state.open);
+  const value = useStore((state) => state.value);
+  const steps = useStore((state) => state.steps);
+  const context = useTourContext(STEP_NAME);
+  const resolvedSideOffset = sideOffset ?? context.sideOffset;
+  const resolvedAlignOffset = alignOffset ?? context.alignOffset;
+  const callbacksRef = useAsRef({ onStepEnter, onStepLeave });
+  const ownStepData = React.useMemo(
+    () => ({
+      target,
+      align,
+      alignOffset: resolvedAlignOffset,
+      side,
+      sideOffset: resolvedSideOffset,
+      collisionBoundary,
+      collisionPadding,
+      arrowPadding,
+      sticky,
+      hideWhenDetached,
+      avoidCollisions,
+      onStepEnter: () => callbacksRef.current.onStepEnter?.(),
+      onStepLeave: () => callbacksRef.current.onStepLeave?.(),
+      required
+    }),
+    [
+      target,
+      align,
+      resolvedAlignOffset,
+      side,
+      resolvedSideOffset,
+      collisionBoundary,
+      collisionPadding,
+      arrowPadding,
+      sticky,
+      hideWhenDetached,
+      avoidCollisions,
+      required,
+      callbacksRef
+    ]
+  );
+  const ownStepDataRef = useAsRef(ownStepData);
+  useIsomorphicLayoutEffect(() => {
+    const { id } = store.addStep(ownStepDataRef.current);
+    stepIdRef.current = id;
+    return () => {
+      store.removeStep(id);
+    };
+  }, [store, ownStepDataRef]);
+  useIsomorphicLayoutEffect(() => {
+    store.updateStep(stepIdRef.current, ownStepData);
+  }, [store, ownStepData]);
+  const stepData = steps[value];
+  const isCurrentStep = store.getStepIndex(stepIdRef.current) === value;
+  useIsomorphicLayoutEffect(() => {
+    setTargetElement(open && isCurrentStep && stepData ? getTargetElement(stepData.target) : null);
+  });
+  const isStepRendered = open && isCurrentStep && !!stepData && (!!targetElement || forceMount);
+  const middleware = React.useMemo(() => {
+    if (!stepData) return [];
+    const mainAxisOffset = stepData.sideOffset ?? resolvedSideOffset;
+    const crossAxisOffset = stepData.alignOffset ?? resolvedAlignOffset;
+    const padding = typeof stepData.collisionPadding === "number" ? stepData.collisionPadding : {
+      top: stepData.collisionPadding?.top ?? 0,
+      right: stepData.collisionPadding?.right ?? 0,
+      bottom: stepData.collisionPadding?.bottom ?? 0,
+      left: stepData.collisionPadding?.left ?? 0
+    };
+    const boundary = Array.isArray(stepData.collisionBoundary) ? stepData.collisionBoundary : stepData.collisionBoundary ? [stepData.collisionBoundary] : [];
+    const hasExplicitBoundaries = boundary.length > 0;
+    const detectOverflowOptions = {
+      padding,
+      boundary: boundary.filter((b) => b !== null),
+      altBoundary: hasExplicitBoundaries
+    };
+    return [
+      offset({
+        mainAxis: mainAxisOffset,
+        alignmentAxis: crossAxisOffset
+      }),
+      stepData.avoidCollisions && shift({
+        mainAxis: true,
+        crossAxis: false,
+        limiter: stepData.sticky === "partial" ? limitShift() : void 0,
+        ...detectOverflowOptions
+      }),
+      stepData.avoidCollisions && flip({ ...detectOverflowOptions }),
+      arrow && onArrow({ element: arrow, padding: stepData.arrowPadding }),
+      stepData.hideWhenDetached && hide({
+        strategy: "referenceHidden",
+        ...detectOverflowOptions
+      })
+    ].filter(Boolean);
+  }, [stepData, resolvedSideOffset, resolvedAlignOffset, arrow]);
+  const placement = getPlacement(stepData?.side ?? side, stepData?.align ?? align);
+  const {
+    refs,
+    floatingStyles,
+    placement: finalPlacement,
+    middlewareData
+  } = useFloating({
+    placement,
+    middleware,
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    elements: {
+      reference: targetElement
+    }
+  });
+  const composedRef = useComposedRefs(refs.setFloating, stepRef);
+  const [placedSide, placedAlign] = getSideAndAlignFromPlacement(finalPlacement);
+  const arrowX = middlewareData.arrow?.x;
+  const arrowY = middlewareData.arrow?.y;
+  const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+  const isHidden = hideWhenDetached && middlewareData.hide?.referenceHidden;
+  const stepContextValue = React.useMemo(
+    () => ({
+      arrowX,
+      arrowY,
+      placedAlign,
+      placedSide,
+      shouldHideArrow: cannotCenterArrow,
+      titleId,
+      descriptionId,
+      onArrowChange: setArrow,
+      onFooterChange: setFooter
+    }),
+    [arrowX, arrowY, placedSide, placedAlign, cannotCenterArrow, titleId, descriptionId]
+  );
+  React.useEffect(() => {
+    if (open && targetElement && isCurrentStep) {
+      let onResize2 = function() {
+        if (targetElement) {
+          updateMask(store, targetElement, context.spotlightPadding);
+        }
+      }, onScroll2 = function() {
+        if (rafId !== null) return;
+        rafId = requestAnimationFrame(() => {
+          if (targetElement) {
+            updateMask(store, targetElement, context.spotlightPadding);
+          }
+          rafId = null;
+        });
+      };
+      var onResize = onResize2, onScroll = onScroll2;
+      updateMask(store, targetElement, context.spotlightPadding);
+      let rafId = null;
+      window.addEventListener("resize", onResize2);
+      window.addEventListener("scroll", onScroll2, { capture: true, passive: true });
+      return () => {
+        window.removeEventListener("resize", onResize2);
+        window.removeEventListener("scroll", onScroll2, { capture: true });
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+      };
+    }
+  }, [open, targetElement, isCurrentStep, store, context.spotlightPadding]);
+  React.useEffect(() => {
+    if (!isStepRendered) return;
+    const stepElement = stepRef.current;
+    if (!stepElement) return;
+    const ownerDocument = stepElement.ownerDocument;
+    function onPointerDown(event) {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        const pointerDownOutsideEvent = new CustomEvent(POINTER_DOWN_OUTSIDE, {
+          ...EVENT_OPTIONS,
+          detail: { originalEvent: event }
+        });
+        context.onPointerDownOutside?.(pointerDownOutsideEvent);
+        const interactOutsideEvent = new CustomEvent(INTERACT_OUTSIDE, {
+          ...EVENT_OPTIONS,
+          detail: { originalEvent: event }
+        });
+        context.onInteractOutside?.(interactOutsideEvent);
+        if (!pointerDownOutsideEvent.defaultPrevented && !interactOutsideEvent.defaultPrevented && context.dismissible) {
+          store.setState("open", false);
+        }
+      }
+      isPointerInsideReactTreeRef.current = false;
+    }
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", onPointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [isStepRendered, store, context]);
+  React.useEffect(() => {
+    if (!isStepRendered) return;
+    const stepElement = stepRef.current;
+    if (!stepElement) return;
+    const ownerDocument = stepElement.ownerDocument;
+    function onFocusIn(event) {
+      const target2 = event.target;
+      const isFocusInStep = stepElement?.contains(target2);
+      const isFocusInTarget = targetElement?.contains(target2);
+      if (event.target && !isFocusInsideReactTreeRef.current && !isFocusInStep && !isFocusInTarget) {
+        const interactOutsideEvent = new CustomEvent(INTERACT_OUTSIDE, {
+          ...EVENT_OPTIONS,
+          detail: { originalEvent: event }
+        });
+        context.onInteractOutside?.(interactOutsideEvent);
+        if (!interactOutsideEvent.defaultPrevented && context.dismissible) {
+          store.setState("open", false);
+        }
+      }
+    }
+    ownerDocument.addEventListener("focusin", onFocusIn);
+    return () => {
+      ownerDocument.removeEventListener("focusin", onFocusIn);
+    };
+  }, [isStepRendered, store, context, targetElement]);
+  const onPointerDownCapture = React.useCallback(
+    (event) => {
+      onPointerDownCaptureProp?.(event);
+      isPointerInsideReactTreeRef.current = true;
+    },
+    [onPointerDownCaptureProp]
+  );
+  const onFocusCapture = React.useCallback(
+    (event) => {
+      onFocusCaptureProp?.(event);
+      isFocusInsideReactTreeRef.current = true;
+    },
+    [onFocusCaptureProp]
+  );
+  const onBlurCapture = React.useCallback(
+    (event) => {
+      onBlurCaptureProp?.(event);
+      isFocusInsideReactTreeRef.current = false;
+    },
+    [onBlurCaptureProp]
+  );
+  React.useEffect(() => {
+    if (!open || !isCurrentStep || !targetElement) return;
+    function onTargetPointerDownCapture() {
+      isPointerInsideReactTreeRef.current = true;
+    }
+    function onTargetFocusCapture() {
+      isFocusInsideReactTreeRef.current = true;
+    }
+    function onTargetBlurCapture() {
+      isFocusInsideReactTreeRef.current = false;
+    }
+    targetElement.addEventListener("pointerdown", onTargetPointerDownCapture, true);
+    targetElement.addEventListener("focus", onTargetFocusCapture, true);
+    targetElement.addEventListener("blur", onTargetBlurCapture, true);
+    return () => {
+      targetElement.removeEventListener("pointerdown", onTargetPointerDownCapture, true);
+      targetElement.removeEventListener("focus", onTargetFocusCapture, true);
+      targetElement.removeEventListener("blur", onTargetBlurCapture, true);
+    };
+  }, [open, isCurrentStep, targetElement]);
+  useFocusGuards(isStepRendered);
+  useFocusTrap(stepRef, isStepRendered, open, context.onOpenAutoFocus, context.onCloseAutoFocus);
+  if (!isStepRendered) {
+    return null;
+  }
+  const StepPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StepContext.Provider, { value: stepContextValue, children: /* @__PURE__ */ jsxs(
+    StepPrimitive,
+    {
+      ref: composedRef,
+      role: "dialog",
+      "aria-labelledby": titleId,
+      "aria-describedby": descriptionId,
+      "data-slot": "tour-step",
+      "data-side": placedSide,
+      "data-align": placedAlign,
+      dir: context.dir,
+      tabIndex: -1,
+      ...stepProps,
+      onPointerDownCapture,
+      onFocusCapture,
+      onBlurCapture,
+      className: cn(
+        // Bề mặt cùng khuôn với `PopoverContent`: nền/chữ popover, viền token, bóng tầng nổi.
+        "fixed z-50 flex w-80 flex-col gap-4 rounded-lg border bg-popover p-4 text-popover-foreground shadow-overlay outline-none",
+        className
+      ),
+      style: {
+        ...style,
+        ...floatingStyles,
+        visibility: isHidden ? "hidden" : void 0,
+        pointerEvents: isHidden ? "none" : void 0
+      },
+      children: [
+        children,
+        !footer && /* @__PURE__ */ jsx(DefaultFooterContext.Provider, { value: true, children: context.stepFooter })
+      ]
+    }
+  ) });
+}
+function TourSpotlight(props) {
+  const { asChild, className, style, forceMount = false, ...backdropProps } = props;
+  const open = useStore((state) => state.open);
+  const maskPath = useStore((state) => state.maskPath);
+  if (!open && !forceMount) return null;
+  const SpotlightPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    SpotlightPrimitive,
+    {
+      "data-slot": "tour-spotlight",
+      "data-state": getDataState(open),
+      ...backdropProps,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: `bg-black/80` (bảng màu mặc định Tailwind) → đúng màu lớp phủ của
+         * `DialogOverlay`, để lớp tối của tour và của hộp thoại là MỘT thứ trong mắt người dùng.
+         * Không lấy `backdrop-blur-sm` của nó: tour cần người dùng còn đọc được ngữ cảnh quanh đích.
+         */
+        "fixed inset-0 z-50 bg-ink/60 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 dark:bg-ink/80",
+        className
+      ),
+      style: {
+        clipPath: maskPath,
+        ...style
+      }
+    }
+  );
+}
+function TourSpotlightRing(props) {
+  const { asChild, className, style, forceMount = false, ...ringProps } = props;
+  const open = useStore((state) => state.open);
+  const spotlightRect = useStore((state) => state.spotlightRect);
+  if (!open && !forceMount) return null;
+  if (!spotlightRect) return null;
+  const RingPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    RingPrimitive,
+    {
+      "data-slot": "tour-spotlight-ring",
+      "data-state": getDataState(open),
+      ...ringProps,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: bỏ `border-ring`. Không có độ dày viền đi kèm nên nó không vẽ gì —
+         * chỉ là một màu viền treo sẵn. App muốn viền thì truyền đủ cả độ dày lẫn màu
+         * (`border-2 border-primary-ink`), như chính các ví dụ của thượng nguồn vẫn làm.
+         */
+        "pointer-events-none fixed z-50 ring-[3px] ring-ring/50",
+        className
+      ),
+      style: {
+        left: spotlightRect.x,
+        top: spotlightRect.y,
+        width: spotlightRect.width,
+        height: spotlightRect.height,
+        ...style
+      }
+    }
+  );
+}
+function TourPortal(props) {
+  const { children, container } = props;
+  const portalContext = usePortalContext(PORTAL_NAME);
+  const [mountNode, setMountNode] = React.useState(null);
+  useIsomorphicLayoutEffect(() => {
+    const node = container ?? document.body;
+    setMountNode(node);
+    portalContext?.onPortalChange(node);
+    return () => {
+      portalContext?.onPortalChange(null);
+    };
+  }, [container, portalContext]);
+  if (!mountNode) return null;
+  const portalContainer = container ?? portalContext?.portal ?? mountNode;
+  return ReactDOM.createPortal(children, portalContainer);
+}
+function TourArrow(props) {
+  const { width = 10, height = 5, className, children, asChild, ...arrowProps } = props;
+  const stepContext = useStepContext(ARROW_NAME);
+  const baseSide = OPPOSITE_SIDE[stepContext.placedSide];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: stepContext.onArrowChange,
+      "data-slot": "tour-arrow",
+      style: {
+        position: "absolute",
+        left: stepContext.arrowX != null ? `${stepContext.arrowX}px` : void 0,
+        top: stepContext.arrowY != null ? `${stepContext.arrowY}px` : void 0,
+        [baseSide]: 0,
+        transformOrigin: {
+          top: "",
+          right: "0 0",
+          bottom: "center 0",
+          left: "100% 0"
+        }[stepContext.placedSide],
+        transform: {
+          top: "translateY(100%)",
+          right: "translateY(50%) rotate(90deg) translateX(-50%)",
+          bottom: "rotate(180deg)",
+          left: "translateY(50%) rotate(-90deg) translateX(50%)"
+        }[stepContext.placedSide],
+        visibility: stepContext.shouldHideArrow ? "hidden" : void 0
+      },
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 30 10",
+          preserveAspectRatio: "none",
+          width,
+          height,
+          "aria-hidden": "true",
+          ...arrowProps,
+          className: cn("block fill-popover stroke-border", className),
+          children: asChild ? children : /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" })
+        }
+      )
+    }
+  );
+}
+function TourHeader(props) {
+  const { asChild, className, ...headerProps } = props;
+  const context = useTourContext(HEADER_NAME);
+  const HeaderPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    HeaderPrimitive,
+    {
+      "data-slot": "tour-header",
+      dir: context.dir,
+      ...headerProps,
+      className: cn("flex flex-col gap-1.5 text-center sm:text-left", className)
+    }
+  );
+}
+function TourTitle(props) {
+  const { asChild, className, ...titleProps } = props;
+  const context = useTourContext(TITLE_NAME);
+  const stepContext = React.useContext(StepContext);
+  const TitlePrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    TitlePrimitive,
+    {
+      id: stepContext?.titleId,
+      "data-slot": "tour-title",
+      dir: context.dir,
+      ...titleProps,
+      className: cn("text-lg leading-none font-semibold tracking-tight", className)
+    }
+  );
+}
+function TourDescription(props) {
+  const { asChild, className, ...descriptionProps } = props;
+  const context = useTourContext(DESCRIPTION_NAME);
+  const stepContext = React.useContext(StepContext);
+  const DescriptionPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    DescriptionPrimitive,
+    {
+      id: stepContext?.descriptionId,
+      "data-slot": "tour-description",
+      dir: context.dir,
+      ...descriptionProps,
+      className: cn("text-sm text-muted-foreground", className)
+    }
+  );
+}
+function TourClose(props) {
+  const { asChild, className, children, onClick: onClickProp, ...closeButtonProps } = props;
+  const store = useStoreContext(CLOSE_NAME);
+  const context = useTourContext(CLOSE_NAME);
+  const onClick = React.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      store.setState("open", false);
+    },
+    [store, onClickProp]
+  );
+  const ClosePrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    ClosePrimitive,
+    {
+      type: "button",
+      "aria-label": context.labels.close,
+      "data-slot": "tour-close",
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: khuôn nút đóng của `DialogContent` (màu chữ muted, hover nền muted,
+         * vòng focus của gói) thay cho `opacity-70` — `opacity` không miễn ngưỡng tương phản cho
+         * thứ còn bấm được (docs/hop-dong-mau.md). `top-3 right-3 p-1` đặt icon đúng chỗ
+         * `top-4 right-4` cũ nhưng vùng bấm lên ~24px thay vì 16px (WCAG 2.5.8).
+         */
+        "absolute top-3 right-3 rounded-md p-1 text-muted-foreground transition-colors duration-150 ease-out hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      onClick,
+      ...closeButtonProps,
+      children: children ?? /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+    }
+  );
+}
+function TourPrev(props) {
+  const { children, onClick: onClickProp, ...prevButtonProps } = props;
+  const store = useStoreContext(PREV_NAME);
+  const context = useTourContext(PREV_NAME);
+  const value = useStore((state) => state.value);
+  const onClick = React.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      if (value > 0) {
+        store.setState("value", value - 1);
+      }
+    },
+    [value, store, onClickProp]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "data-slot": "tour-prev",
+      variant: "outline",
+      ...prevButtonProps,
+      onClick,
+      disabled: value === 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }),
+        context.labels.prev
+      ] })
+    }
+  );
+}
+function TourNext(props) {
+  const { children, onClick: onClickProp, ...nextButtonProps } = props;
+  const store = useStoreContext(NEXT_NAME);
+  const context = useTourContext(NEXT_NAME);
+  const value = useStore((state) => state.value);
+  const steps = useStore((state) => state.steps);
+  const isLastStep = value === steps.length - 1;
+  const onClick = React.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      store.setState("value", value + 1);
+    },
+    [value, store, onClickProp]
+  );
+  return /* @__PURE__ */ jsx(Button, { type: "button", "data-slot": "tour-next", ...nextButtonProps, onClick, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLastStep ? context.labels.finish : context.labels.next,
+    !isLastStep && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" })
+  ] }) });
+}
+function TourSkip(props) {
+  const { children, onClick: onClickProp, ...skipButtonProps } = props;
+  const store = useStoreContext(SKIP_NAME);
+  const context = useTourContext(SKIP_NAME);
+  const onClick = React.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      store.setState("open", false);
+    },
+    [store, onClickProp]
+  );
+  return /* @__PURE__ */ jsx(Button, { type: "button", "data-slot": "tour-skip", variant: "outline", ...skipButtonProps, onClick, children: children ?? context.labels.skip });
+}
+function TourStepCounter(props) {
+  const { format: formatProp, asChild, className, children, ...stepCounterProps } = props;
+  const context = useTourContext(STEP_COUNTER_NAME);
+  const format = formatProp ?? context.labels.stepCounter;
+  const value = useStore((state) => state.value);
+  const steps = useStore((state) => state.steps);
+  const StepCounterPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    StepCounterPrimitive,
+    {
+      "data-slot": "tour-step-counter",
+      ...stepCounterProps,
+      className: cn("whitespace-nowrap text-sm text-muted-foreground", className),
+      children: children ?? format(value + 1, steps.length)
+    }
+  );
+}
+function TourFooter(props) {
+  const { asChild, className, ref, ...footerProps } = props;
+  const stepContext = useStepContext(FOOTER_NAME);
+  const hasDefaultFooter = React.useContext(DefaultFooterContext);
+  const context = useTourContext(FOOTER_NAME);
+  const composedRef = useComposedRefs(ref, hasDefaultFooter ? void 0 : stepContext.onFooterChange);
+  const FooterPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    FooterPrimitive,
+    {
+      "data-slot": "tour-footer",
+      dir: context.dir,
+      ...footerProps,
+      ref: composedRef,
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)
+    }
+  );
+}
+export {
+  Tour,
+  TourArrow,
+  TourClose,
+  TourDescription,
+  TourFooter,
+  TourHeader,
+  TourNext,
+  TourPortal,
+  TourPrev,
+  TourSkip,
+  TourSpotlight,
+  TourSpotlightRing,
+  TourStep,
+  TourStepCounter,
+  TourTitle
+};
+//# sourceMappingURL=tour.js.map