Tour Management

/**
 * Create a new Tour instance
 * @param elementOrSelector - Optional target element or CSS selector to start the Tour on
 * @param options - Optional Tour configuration options
 */
new Tour(elementOrSelector?: string | HTMLElement, options?: Partial<TourOptions>): Tour;

/**
 * Create Tour instance via static method (recommended)
 * @param elementOrSelector - Optional target element or CSS selector
 */
introJs.tour(elementOrSelector?: string | HTMLElement): Tour;

import introJs from "intro.js";

// Create tour for entire document
const tour = introJs.tour();

// Create tour for specific element
const tour = introJs.tour("#main-content");

// Create tour with initial options
const tour = introJs.tour(document.body, {
  exitOnEsc: false,
  showStepNumbers: true,
  tooltipPosition: "top"
});

/**
 * Start the tour and show the first step
 */
start(): Promise<Tour>;

/**
 * Exit the tour
 * @param force - Whether to force exit without confirmation
 */
exit(force?: boolean): Promise<Tour>;

/**
 * Go to the next step of the tour
 */
nextStep(): Promise<Tour>;

/**
 * Go to the previous step of the tour
 */
previousStep(): Promise<Tour>;

/**
 * Go to a specific step by index (1-based)
 * @param step - Step number to navigate to
 */
goToStep(step: number): Promise<Tour>;

/**
 * Go to a step with specific data-step attribute value
 * @param stepNumber - The [data-step] value of the target step
 */
goToStepNumber(stepNumber: number): Promise<Tour>;

import introJs from "intro.js";

const tour = introJs.tour()
  .addStep({
    title: "Welcome",
    intro: "Let's get started!",
    element: "#welcome"
  })
  .addStep({
    title: "Features", 
    intro: "Here are the main features",
    element: "#features"
  });

// Start the tour
await tour.start();

// Navigate programmatically
await tour.nextStep();
await tour.goToStep(1);
await tour.exit();

/**
 * Add a single step to the tour
 * @param step - Step configuration object
 */
addStep(step: Partial<TourStep>): Tour;

/**
 * Add multiple steps to the tour
 * @param steps - Array of step configuration objects
 */
addSteps(steps: Partial<TourStep>[]): Tour;

/**
 * Set all tour steps, replacing existing ones
 * @param steps - Complete array of tour steps
 */
setSteps(steps: TourStep[]): Tour;

/**
 * Get all available tour steps
 */
getSteps(): TourStep[];

/**
 * Get a specific step by index
 * @param step - Step index (0-based)
 */
getStep(step: number): TourStep;

import introJs from "intro.js";

const tour = introJs.tour();

// Add individual steps
tour.addStep({
  title: "Dashboard",
  intro: "This is your main dashboard",
  element: "#dashboard",
  position: "bottom"
});

// Add multiple steps at once
tour.addSteps([
  {
    title: "Navigation",
    intro: "Use this menu to navigate",
    element: ".nav-menu"
  },
  {
    title: "Profile",
    intro: "Access your profile here",
    element: "#profile-link"
  }
]);

// Start the tour
await tour.start();

/**
 * Get the current step index
 */
getCurrentStep(): number | undefined;

/**
 * @deprecated Use getCurrentStep() instead
 * Get the current step index
 */
currentStep(): number | undefined;

/**
 * Set the current step and navigation direction
 * @param step - Step index to set as current
 */
setCurrentStep(step: number): Tour;

/**
 * Reset current step to undefined
 */
resetCurrentStep(): void;

/**
 * Increment the current step index
 */
incrementCurrentStep(): Tour;

/**
 * Decrement the current step index
 */
decrementCurrentStep(): Tour;

/**
 * Get the navigation direction
 */
getDirection(): "forward" | "backward";

/**
 * Check if the tour has ended
 */
isEnd(): boolean;

/**
 * Check if current step is the last step
 */
isLastStep(): boolean;

/**
 * Check if the tour instance is active
 */
isActive(): boolean;

/**
 * Check if the tour has started
 */
hasStarted(): boolean;

import introJs from "intro.js";

const tour = introJs.tour();

// Check tour state
if (!tour.hasStarted()) {
  await tour.start();
}

// Track progress
console.log(`Current step: ${tour.getCurrentStep()}`);
console.log(`Direction: ${tour.getDirection()}`);
console.log(`Is last step: ${tour.isLastStep()}`);

// Conditional navigation
if (!tour.isEnd()) {
  await tour.nextStep();
}

/**
 * Set multiple tour options
 * @param partialOptions - Object containing option key-value pairs
 */
setOptions(partialOptions: Partial<TourOptions>): Tour;

/**
 * Set a single tour option
 * @param key - Option key
 * @param value - Option value
 */
setOption<K extends keyof TourOptions>(key: K, value: TourOptions[K]): Tour;

/**
 * Get a specific tour option value
 * @param key - Option key
 */
getOption<K extends keyof TourOptions>(key: K): TourOptions[K];

import introJs from "intro.js";

const tour = introJs.tour();

// Set multiple options
tour.setOptions({
  exitOnEsc: false,
  showStepNumbers: true,
  tooltipPosition: "top",
  overlayOpacity: 0.8
});

// Set individual option
tour.setOption("nextLabel", "Continue");

// Get option value
const position = tour.getOption("tooltipPosition");

/**
 * Clone the current tour instance
 */
clone(): Tour;

/**
 * Get the target element for the tour
 */
getTargetElement(): HTMLElement;

/**
 * Refresh the tour, optionally refetching steps
 * @param refreshSteps - Whether to refetch steps from DOM/options
 */
refresh(refreshSteps?: boolean): Tour;

/**
 * Set persistent "don't show again" flag
 * @param dontShowAgain - Boolean value for the flag
 */
setDontShowAgain(dontShowAgain: boolean): Tour;

/**
 * Enable keyboard navigation for the tour
 */
enableKeyboardNavigation(): Tour;

/**
 * Disable keyboard navigation for the tour
 */
disableKeyboardNavigation(): Tour;

/**
 * Enable refresh on window resize
 */
enableRefreshOnResize(): void;

/**
 * Disable refresh on window resize
 */
disableRefreshOnResize(): void;

interface TourStep {
  /** Step index number */
  step: number;
  /** Step title displayed in tooltip header */
  title: string;
  /** Step content/description */
  intro: string;
  /** Target element for this step */
  element?: Element | HTMLElement | string | null;
  /** Tooltip position for this step */
  position: TooltipPosition;
  /** Scroll behavior for this step */
  scrollTo: ScrollTo;
  /** Whether to disable interaction with the target element */
  disableInteraction?: boolean;
  /** Custom CSS class for this step's tooltip */
  tooltipClass?: string;
  /** Custom CSS class for this step's highlight */
  highlightClass?: string;
}

import introJs from "intro.js";

const tour = introJs.tour();

// Complete step definition
tour.addStep({
  step: 1,
  title: "Welcome to the Dashboard",
  intro: "This is where you'll find all your important metrics and controls.",
  element: "#main-dashboard",
  position: "bottom-middle-aligned",
  scrollTo: "element",
  disableInteraction: true,
  tooltipClass: "custom-tooltip",
  highlightClass: "custom-highlight"
});

/**
 * @deprecated Use onBeforeChange instead
 */
onbeforechange(callback: introBeforeChangeCallback): Tour;

/**
 * @deprecated Use onChange instead
 */
onchange(callback: introChangeCallback): Tour;

/**
 * @deprecated Use onAfterChange instead
 */
onafterchange(callback: introAfterChangeCallback): Tour;

/**
 * @deprecated Use onComplete instead  
 */
oncomplete(callback: introCompleteCallback): Tour;

/**
 * @deprecated Use onStart instead
 */
onstart(callback: introStartCallback): Tour;

/**
 * @deprecated Use onExit instead
 */
onexit(callback: introExitCallback): Tour;

/**
 * @deprecated Use onSkip instead
 */
onskip(callback: introSkipCallback): Tour;

/**
 * @deprecated Use onBeforeExit instead
 */
onbeforeexit(callback: introBeforeExitCallback): Tour;