nfsfu234-tour-guide/dist/index.d.mts

A plug-and-play React component for creating customizable onboarding tours with tooltips, modals, and smooth user guidance. Built with Tailwind CSS and supports dark mode, Framer Motion animations, and full control over step logic.

import * as react from 'react';

interface PredefinedWelcomeConfig {
    title: string;
    message: string;
    startButtonText?: string;
    position?: {
        top?: number | string;
        left?: number | string;
        transform?: string;
    };
    mobilePosition?: {
        top?: number | string;
        left?: number | string;
        transform?: string;
    };
}
interface TourStep {
    target: string;
    content: string;
    contentDesktop?: string;
    contentMobile?: string;
    position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'center-left' | 'right' | 'center-right' | 'center';
    customPosition?: {
        top?: number | string;
        left?: number | string;
        transform?: string;
    };
    offset?: {
        x?: number;
        y?: number;
    };
    device?: 'desktop' | 'mobile' | 'both';
}
interface TourProps {
    tourId: string;
    steps: TourStep[];
    theme: 'light' | 'dark';
    deviceMode?: 'desktop' | 'tablet' | 'mobile';
    isActive?: boolean;
    onComplete?: () => void;
    onSkip?: () => void;
    onStart?: () => void;
    onStepChange?: (stepIndex: number) => void;
    welcomeScreen?: {
        enabled: boolean;
        content?: React.ReactNode | PredefinedWelcomeConfig;
    };
    buttonLabels?: {
        next?: string;
        previous?: string;
        skip?: string;
        finish?: string;
        start?: string;
    };
    showProgressDots?: boolean;
}
declare function Tour({ tourId, steps, theme, deviceMode, isActive, onComplete, onSkip, onStart, onStepChange, welcomeScreen, buttonLabels, showProgressDots, }: TourProps): react.ReactPortal | null;

export { type PredefinedWelcomeConfig, Tour, type TourProps, type TourStep, Tour as default };