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

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_jsx_runtime from 'react/jsx-runtime';

interface TourStep {
    target: string;
    content: string;
    contentMobile?: string;
    position?: 'top' | 'bottom' | 'left' | 'right';
    offset?: {
        x?: number;
        y?: number;
    };
    device?: 'desktop' | 'mobile' | 'both';
}
interface WelcomeScreenConfig {
    enabled: boolean;
    title?: string;
    message?: string;
    startButtonText?: string;
}
interface ButtonLabels {
    next?: string;
    previous?: string;
    skip?: string;
    finish?: string;
    start?: string;
}
interface ThemeConfig {
    backdrop?: string;
    tooltipBg?: string;
    tooltipText?: string;
    tooltipBorder?: string;
    buttonBg?: string;
    buttonText?: string;
    progressBar?: string;
    highlightRing?: string;
}
interface TourProps {
    tourId?: string;
    steps: TourStep[];
    isActive?: boolean;
    theme?: 'light' | 'dark' | 'custom';
    customTheme?: ThemeConfig;
    accentColor?: string;
    onComplete?: () => void;
    onSkip?: () => void;
    onStart?: () => void;
    onStepChange?: (index: number) => void;
    welcomeScreen?: WelcomeScreenConfig;
    buttonLabels?: ButtonLabels;
    showProgress?: boolean;
    /** Show "Built with NFSFU234TourGuide" badge on the welcome screen. Defaults to true. */
    showBranding?: boolean;
    highlightClassName?: string;
    overlayClassName?: string;
    tooltipClassName?: string;
    className?: string;
}

type index_ButtonLabels = ButtonLabels;
type index_ThemeConfig = ThemeConfig;
type index_TourProps = TourProps;
type index_TourStep = TourStep;
type index_WelcomeScreenConfig = WelcomeScreenConfig;
declare namespace index {
  export type { index_ButtonLabels as ButtonLabels, index_ThemeConfig as ThemeConfig, index_TourProps as TourProps, index_TourStep as TourStep, index_WelcomeScreenConfig as WelcomeScreenConfig };
}

/**
 * Lightweight, zero-dependency React product tour / onboarding component.
 *
 * Features:
 * - Optional welcome screen with scroll lock
 * - Step-by-step tooltips with target highlighting & progress bar
 * - Device-specific steps (mobile / desktop / both)
 * - Smart adaptive tooltip positioning (auto-flips when space is limited)
 * - Reactive to browser resize and orientation changes
 * - Clean unmount: removes backdrop & unlocks body scroll when finished
 * - Optional "Built with NFSFU234TourGuide" branding badge (showBranding prop)
 *
 * @example
 * <Tour
 *   steps={[{ target: '#hero', content: 'Welcome!' }]}
 *   isActive={true}
 *   welcomeScreen={{ enabled: true, title: 'Hello!' }}
 *   showBranding={false} // opt out of the badge
 * />
 */
declare function Tour({ tourId, steps, isActive, theme, customTheme, accentColor, onComplete, onSkip, onStart, onStepChange, welcomeScreen, buttonLabels, showProgress, showBranding, className, overlayClassName, tooltipClassName, highlightClassName, }: TourProps): react_jsx_runtime.JSX.Element | null;

export { Tour, index as Types };