@hub-kit/core 0.3.5 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,7 +6,6 @@ import { TourCard } from "./tour-card.js";
|
|
|
6
6
|
import { useTour } from "./use-tour.js";
|
|
7
7
|
const SPOTLIGHT_PADDING = 6;
|
|
8
8
|
const MOVE_DURATION = "220ms";
|
|
9
|
-
const CARD_LAYER = "60";
|
|
10
9
|
const TALL_TARGET_GAP = 0.45;
|
|
11
10
|
const MAX_CARD_WIDTH = 352;
|
|
12
11
|
const SCREEN_MARGIN = 32;
|
|
@@ -123,7 +122,7 @@ export function TourOverlay() {
|
|
|
123
122
|
"0 0 0 3px var(--tour-ring-gap, var(--background))",
|
|
124
123
|
"0 0 0 5px var(--tour-accent, var(--primary))",
|
|
125
124
|
].join(", "),
|
|
126
|
-
} }), _jsxs(Popover, { open: true, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx("div", { className: "absolute", style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height } }) }), _jsxs(PopoverContent, { ref: liftCardAboveBackdrop, side: sideForScreen(step.placement, rect, viewport), align: "center", sideOffset: 12, arrowPadding: 16, collisionPadding: 16, className: "w-[min(var(--tour-card-width,22rem),calc(100vw-2rem))] rounded-2xl border-0 px-4 pt-4 pb-2.5 shadow-xl sm:px-5 sm:pt-5 sm:pb-3.5", onOpenAutoFocus: (event) => event.preventDefault(), onEscapeKeyDown: (event) => event.preventDefault(), onPointerDownOutside: (event) => event.preventDefault(), onInteractOutside: (event) => event.preventDefault(), "aria-label": tour.labels.cardTitle, children: [_jsx(TourCard, { step: step, stepIndex: tour.stepIndex, stepCount: tour.stepCount, labels: tour.labels, onNext: tour.next, onSkip: tour.skip }), _jsx(PopoverArrow, { width: 18, height: 9, style: { fill: "var(--popover)" } })] })] })] }));
|
|
125
|
+
} }), _jsxs(Popover, { open: true, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx("div", { className: "absolute", style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height } }) }), _jsxs(PopoverContent, { ref: liftCardAboveBackdrop, side: sideForScreen(step.placement, rect, viewport), align: "center", sideOffset: 12, arrowPadding: 16, collisionPadding: 16, className: "z-[60] w-[min(var(--tour-card-width,22rem),calc(100vw-2rem))] rounded-2xl border-0 px-4 pt-4 pb-2.5 shadow-xl sm:px-5 sm:pt-5 sm:pb-3.5", onOpenAutoFocus: (event) => event.preventDefault(), onEscapeKeyDown: (event) => event.preventDefault(), onPointerDownOutside: (event) => event.preventDefault(), onInteractOutside: (event) => event.preventDefault(), "aria-label": tour.labels.cardTitle, children: [_jsx(TourCard, { step: step, stepIndex: tour.stepIndex, stepCount: tour.stepCount, labels: tour.labels, onNext: tour.next, onSkip: tour.skip }), _jsx(PopoverArrow, { width: 18, height: 9, style: { fill: "var(--popover)" } })] })] })] }));
|
|
127
126
|
}
|
|
128
127
|
function sideForScreen(placement, rect, viewport) {
|
|
129
128
|
if (viewport.width === 0) {
|
|
@@ -179,6 +178,5 @@ function liftCardAboveBackdrop(node) {
|
|
|
179
178
|
if (!wrapper) {
|
|
180
179
|
return;
|
|
181
180
|
}
|
|
182
|
-
wrapper.style.zIndex = CARD_LAYER;
|
|
183
181
|
wrapper.style.transition = `transform ${MOVE_DURATION} ease`;
|
|
184
182
|
}
|