npm package: @kevinpatel/tour-guide
Description: ## Overview
Latest version: 0.0.1

# @kevinpatel/tour-guide

## Overview

`@kevinpatel/tour-guide` is a powerful and easy-to-use library for creating interactive guided tours for web applications. It helps you enhance user onboarding, highlight new features, and improve overall user experience.

---

## Installation

To install the library, use npm:

```bash
npm install @kevinpatel/tour-guide
```

---

## Basic Usage

Here is how you can use the `@kevinpatel/tour-guide` library in your application:

### Step 1: Import the Library

```javascript
import TourGuide from '@kevinpatel/tour-guide';
```

### Step 2: Define Your Tour Steps

Define the steps you want to include in your guided tour:

```javascript
const steps = [
  {
    element: '#step1',
    title: 'Welcome',
    content: 'This is the first step of the tour. Welcome!',
  },
  {
    element: '#step2',
    title: 'Feature Highlight',
    content: 'This is where you can find feature XYZ.',
  },
  {
    element: '#step3',
    title: 'Get Started',
    content: 'Click here to begin using the application.',
  },
];
```

### Step 3: Initialize the Tour

Initialize the guided tour using the defined steps:

```javascript
const tour = new TourGuide({
  steps,
  options: {
    highlight: true, // Highlights the element being focused
    overlay: true, // Adds an overlay during the tour
  },
});
```

### Step 4: Start the Tour

Start the tour when needed:

```javascript
document.querySelector('#startTourButton').addEventListener('click', () => {
  tour.start();
});
```

---

## Features

- **Interactive Tours**: Guide users through key elements of your app.
- **Customizable**: Tailor titles, content, and styles to match your app's design.
- **Highlighting**: Draw attention to specific elements during the tour.
- **Event Listeners**: Add callbacks to monitor user progress.
- **Responsive Design**: Works seamlessly on both desktop and mobile devices.

---

## Options

You can customize the behavior of the tour using the following options:

| Option      | Type    | Default | Description                          |
| ----------- | ------- | ------- | ------------------------------------ |
| `highlight` | Boolean | `false` | Highlights the focused element.      |
| `overlay`   | Boolean | `false` | Adds an overlay during the tour.     |
| `stepDelay` | Number  | `500`   | Delay between steps in milliseconds. |

---

## Events

The library emits the following events:

| Event         | Description                                  |
| ------------- | -------------------------------------------- |
| `onStart`     | Fired when the tour starts.                  |
| `onStepEnter` | Fired when a new step is entered.            |
| `onComplete`  | Fired when the tour is completed.            |
| `onCancel`    | Fired when the tour is canceled by the user. |

Example:

```javascript
tour.on('onComplete', () => {
  console.log('Tour completed successfully!');
});
```

---

## Styling

The library provides default styles, but you can customize them by overriding the CSS classes:

```css
.tour-highlight {
  border: 2px solid #ff5733;
}

.tour-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}
```

---

## Contributing

If you'd like to contribute to this project, feel free to submit a pull request or open an issue on GitHub.

---

## License

`@kevinpatel/tour-guide` is licensed under the MIT License.

---

## Support

If you have any issues or questions, feel free to contact the developer or check the [documentation](https://github.com/kevinpatel/tour-guide).