@gfazioli/mantine-onboarding-tour
Version:
A Mantine 9 onboarding tour component with focus-reveal overlays, cutout highlights, step-by-step popover navigation, and compound components for guided user experiences.
17 lines (16 loc) • 734 B
TypeScript
export interface CutoutRect {
x: number;
y: number;
width: number;
height: number;
}
export interface CutoutState {
rect: CutoutRect;
vw: number;
vh: number;
}
/** Build an SVG path string with an evenodd hole for the cutout overlay.
* The outer rect covers the full viewport; the inner rounded rect defines the hole region when rendered with fill-rule="evenodd". */
export declare function buildCutoutPath(vw: number, vh: number, rect: CutoutRect, padding: number, radius: number): string;
/** Track the bounding rect of the focused tour element and viewport size via DOM query + polling/events. */
export declare function useCutoutRect(active: boolean, stepId: string | undefined): CutoutState | null;