tour

1"use client";
2 
3import { useDirection } from "@base-ui/react/direction-provider";
4import { mergeProps } from "@base-ui/react/merge-props";
5import { useRender } from "@base-ui/react/use-render";
6import {
7  autoUpdate,
8  flip,
9  hide,
10  limitShift,
11  type Middleware,
12  offset,
13  arrow as onArrow,
14  type Placement,
15  shift,
16  useFloating,
17} from "@floating-ui/react-dom";
18import { ChevronLeft, ChevronRight, X } from "lucide-react";
19import * as React from "react";
20import * as ReactDOM from "react-dom";
21import { useComposedRefs } from "@/lib/compose-refs";
22import { cn } from "@/lib/utils";
23import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
24import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
25import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
26import { Button } from "@/registry/bases/base/ui/button";
27 
28const ROOT_NAME = "Tour";
29const PORTAL_NAME = "TourPortal";
30const STEP_NAME = "TourStep";
31const ARROW_NAME = "TourArrow";
32const HEADER_NAME = "TourHeader";
33const TITLE_NAME = "TourTitle";
34const DESCRIPTION_NAME = "TourDescription";
35const CLOSE_NAME = "TourClose";
36const PREV_NAME = "TourPrev";
37const NEXT_NAME = "TourNext";
38const SKIP_NAME = "TourSkip";
39const FOOTER_NAME = "TourFooter";
40 
41const POINTER_DOWN_OUTSIDE = "tour.pointerDownOutside";
42const INTERACT_OUTSIDE = "tour.interactOutside";
43const OPEN_AUTO_FOCUS = "tour.openAutoFocus";
44const CLOSE_AUTO_FOCUS = "tour.closeAutoFocus";
45const EVENT_OPTIONS = { bubbles: false, cancelable: true };
46 
47const SIDE_OPTIONS = ["top", "right", "bottom", "left"] as const;
48const ALIGN_OPTIONS = ["start", "center", "end"] as const;
49 
50const DEFAULT_ALIGN_OFFSET = 0;
51const DEFAULT_SIDE_OFFSET = 16;
52const DEFAULT_SPOTLIGHT_PADDING = 4;
53 
54type Side = (typeof SIDE_OPTIONS)[number];
55type Align = (typeof ALIGN_OPTIONS)[number];
56type Direction = "ltr" | "rtl";
57 
58interface ScrollOffset {
59  top?: number;
60  bottom?: number;
61  left?: number;
62  right?: number;
63}
64 
65type Boundary = Element | null;
66 
67interface DivProps
68  extends Omit<React.ComponentProps<"div">, "children">,
69    useRender.ComponentProps<"div"> {}
70 
71type StepElement = HTMLDivElement;
72type CloseElement = HTMLButtonElement;
73type PrevElement = HTMLButtonElement;
74type NextElement = HTMLButtonElement;
75type SkipElement = HTMLButtonElement;
76type FooterElement = HTMLDivElement;
77 
78const OPPOSITE_SIDE: Record<Side, Side> = {
79  top: "bottom",
80  right: "left",
81  bottom: "top",
82  left: "right",
83};
84 
85/**
86// … truncated