@gfazioli/mantine-onboarding-tour/dist/types/OnboardingTour.d.ts

A Mantine 9 onboarding tour component with focus-reveal overlays, cutout highlights, step-by-step popover navigation, and compound components for guided user experiences.

import { BoxProps, Factory, StylesApiProps } from '@mantine/core';
import React from 'react';
import { OnboardingTourController, type OnboardingTourOptions, type OnboardingTourStep } from './hooks/use-onboarding-tour/use-onboarding-tour';
import { OnboardingTourFocusReveal, OnboardingTourFocusRevealProps } from './OnboardingTourFocusReveal/OnboardingTourFocusReveal';
import { OnboardingTourPopoverContent, type OnboardingTourPopoverContentBaseProps } from './OnboardingTourPopoverContent';
import { OnboardingTourPopoverContentStylesNames } from './OnboardingTourPopoverContent/OnboardingTourPopoverContent';
import { OnboardingTourTarget } from './OnboardingTourTarget/OnboardingTourTarget';
export type OnboardingTourStylesNames = OnboardingTourPopoverContentStylesNames;
export interface OnboardingTourBaseProps extends OnboardingTourOptions, Omit<OnboardingTourPopoverContentBaseProps, 'tourController'> {
    tour: OnboardingTourStep[];
    /** Controlled started state */
    started: boolean;
    /** Props passed to FocusReveal */
    focusRevealProps?: OnboardingTourFocusRevealProps | ((tourController: OnboardingTourController) => OnboardingTourFocusRevealProps);
    /** Padding around the cutout highlight area in pixels. Default: `8` */
    cutoutPadding?: number;
    /** Border radius of the cutout highlight area in pixels. Use a large value (e.g. `9999`) for circular elements. Default: `8` */
    cutoutRadius?: number;
    /** Child elements */
    children: React.ReactNode;
}
export interface OnboardingTourProps extends BoxProps, OnboardingTourBaseProps, StylesApiProps<OnboardingTourFactory> {
}
export type OnboardingTourFactory = Factory<{
    props: OnboardingTourProps;
    ref: HTMLDivElement;
    stylesNames: OnboardingTourStylesNames;
    staticComponents: {
        FocusReveal: typeof OnboardingTourFocusReveal;
        PopoverContent: typeof OnboardingTourPopoverContent;
        Target: typeof OnboardingTourTarget;
    };
}>;
export declare const defaultProps: Partial<OnboardingTourProps>;
export declare const OnboardingTour: import("@mantine/core").MantineComponent<{
    props: OnboardingTourProps;
    ref: HTMLDivElement;
    stylesNames: OnboardingTourStylesNames;
    staticComponents: {
        FocusReveal: typeof OnboardingTourFocusReveal;
        PopoverContent: typeof OnboardingTourPopoverContent;
        Target: typeof OnboardingTourTarget;
    };
}>;