### Integrate TourProvider at application root

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/tour/quickstart/page.mdx

Illustrates the foundational setup for `@reactour/tour` by wrapping the root of a React application with `TourProvider`. This component requires a `steps` prop, an array of objects defining each tour step's target selector and content, enabling a guided user experience.

```js
import { TourProvider } from '@reactour/tour'

ReactDOM.render(
  <TourProvider steps={steps}>
    <App />
  </TourProvider>,
  document.getElementById('root')
)

const steps = [
  {
    selector: '.first-step',
    content: 'This is my first Step',
  },
  // ...
]
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/web/README.md

This command initiates the Next.js development server, allowing you to access the application locally in your browser. It's the standard first step to start developing or testing the application.

```bash
yarn dev
```

--------------------------------

### Install Reactour Library

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Instructions for installing the `@reactour/tour` package using npm or yarn.

```zsh
npm i -S @reactour/tour
# or
yarn add @reactour/tour
```

--------------------------------

### Install @reactour/tour package

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/tour/quickstart/page.mdx

Provides the command to install the `@reactour/tour` package using npm, a prerequisite for integrating the tour functionality into a React application.

```sh
npm i @reactour/tour
```

--------------------------------

### Install @reactour/tour npm package

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/quickstart/page.mdx

Instructions to install the @reactour/tour package using npm. This package provides the core components for building interactive tours.

```sh
npm i @reactour/tour
```

--------------------------------

### Install @reactour/utils Package

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/utils/README.md

Instructions to install the `@reactour/utils` package using npm or yarn, adding it as a dependency to your project.

```zsh
npm i -S @reactour/utils
# or
yarn add @reacmask/utils
```

--------------------------------

### Install @reactour/popover npm package

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/popover/quickstart/page.mdx

Command to install the @reactour/popover library using npm, which provides a popover component for React applications.

```sh
npm i @reactour/popover
```

--------------------------------

### Install Reactour Popover Package

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/popover/README.md

Instructions for installing the `@reactour/popover` package using npm or yarn.

```zsh
npm i -S @reactour/popover
# or
yarn add @reacmask/popover
```

--------------------------------

### Install @reactour/mask package

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/mask/quickstart/page.mdx

Demonstrates how to install the @reactour/mask package using npm, which provides an SVG mask component for React applications.

```sh
npm i @reactour/mask
```

--------------------------------

### Example: Applying Global Styles to Reactour Components in JavaScript

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Demonstrates how to define and apply global styles to different parts of the Reactour component, such as the mask wrapper, highlighted area, and badge, using a style object.

```js
const styles = {
  maskWrapper: (base) => ({
    ...base,
    color: 'red',
  }),
  highlightedArea: (base, { x, y }) => ({
    ...base,
    x: x + 10,
    y: y + 10,
  }),
  badge: (base) => ({ ...base, color: 'blue' }),
}
```

--------------------------------

### Control Tour visibility using useTour hook

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/tour/quickstart/page.mdx

Demonstrates how to programmatically control the tour's visibility within any child component of `TourProvider` using the `useTour` hook. By destructuring `setIsOpen` from the hook, developers can trigger the tour's display, for example, via a button click, providing dynamic control over the user's guided experience.

```js
import { useTour } from '@reactour/tour'

function App() {
  const { setIsOpen } = useTour()
  return (
    <>
      <p className="first-step">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
        finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
        metus nec, porta luctus orci
      </p>
      <button onClick={() => setIsOpen(true)}>Open Tour</button>
    </>
  )
}
```

--------------------------------

### Using the getWindow Function

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/utils/README.md

Example of importing and using the `getWindow` function to destructure and access the current browser window's width and height.

```js
import { getWindow } from '@reactour/utils'

const { w, h } = getWindow()
```

--------------------------------

### Example: Custom ContentComponent for Reactour

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/tour/props/page.mdx

Demonstrates how to implement a custom `ContentComponent` for the Reactour Popover. This example shows how to render dynamic content based on the current step, handle navigation (next/close), and integrate with the `TourProvider`.

```javascript
function ContentComponent(props) {
  const isLastStep = props.currentStep === props.steps.length - 1
  const content = props.steps[props.currentStep].content
  return (
    <div style={{ border: '5px solid red', padding: 10, background: 'white' }}>
      {/* Check if the step.content is a function or a string */}
      {typeof content === 'function'
        ? content({ ...props, someOtherStuff: 'Custom Text' })
        : content}
      <button
        onClick={() => {
          if (isLastStep) {
            props.setIsOpen(false)
          } else {
            props.setCurrentStep((s) => s + 1)
          }
        }}
      >
        {isLastStep ? 'x' : '>'}
      </button>
    </div>
  )
}

const steps = [
  /* ... */
]

function App() {
  return (
    <TourProvider
      steps={steps}
      ContentComponent={ContentComponent}
      styles={{ popover: (base) => ({ ...base, padding: 0 }) }}
    >
      {/* ... */}
    </TourProvider>
  )
}
```

--------------------------------

### Customizing Tour Components Example (React)

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/tour/props/page.mdx

This example demonstrates how to provide custom React components for the `Badge` and `Close` elements within the `TourProvider`, allowing for complete control over their appearance and behavior.

```javascript
import { components } from '@reactour/tour'

function Badge({ children }) {
  return (
    <components.Badge
      styles={{ badge: (base) => ({ ...base, backgroundColor: 'red' }) }}
    >
      👉 {children} 👈
    </components.Badge>
  )
}

function Close({ onClick }) {
  return (
    <button
      onClick={onClick}
      style={{ position: 'absolute', right: 0, top: 0 }}
    >
      x
    </button>
  )
}

const steps = [
  /* ... */
]

export default function App() {
  return (
    <TourProvider steps={steps} components={{ Badge, Close }}>
      {/* ... */}
    </TourProvider>
  )
}
```

--------------------------------

### Install Reactour Mask Component

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/mask/README.md

Instructions for installing the `@reactour/mask` package using either npm or yarn package managers.

```zsh
npm i -S @reactour/mask
```

```zsh
yarn add @reactour/mask
```

--------------------------------

### Example: Customizing Reactour Popover Components in JavaScript

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Illustrates how to override default Reactour Popover components (e.g., Badge, Close) using the `components` prop in a React application. This example shows functional components for custom rendering.

```js
import { components } from '@reactour/tour'

function Badge({ children }) {
  return (
    <components.Badge
      styles={{ badge: (base) => ({ ...base, backgroundColor: 'red' }) }}
    >
      👉 {children} 👈
    </components.Badge>
  )
}

function Close({ onClick }) {
  return (
    <button
      onClick={onClick}
      style={{ position: 'absolute', right: 0, top: 0 }}
    >
      x
    </button>
  )
}

const steps = [
  /* ... */
]

export default function App() {
  return (
    <TourProvider steps={steps} components={{ Badge, Close }}>
      {/* ... */}
    </TourProvider>
  )
}
```

--------------------------------

### Integrate TourProvider at Application Root

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Demonstrates how to wrap your React application with `TourProvider` at the root, passing an array of `steps` to define the tour's progression.

```js
// ...
import { TourProvider } from '@reactour/tour'

ReactDOM.render(
  <TourProvider steps={steps}>
    <App />
  </TourProvider>,
  document.getElementById('root')
)

const steps = [
  {
    selector: '.first-step',
    content: 'This is my first Step',
  },
  // ...
]
```

--------------------------------

### Customize Reactour Popover Content with ContentComponent

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Demonstrates how to provide a custom React component to render inside the Reactour popover, allowing for dynamic content and custom actions. Includes the TypeScript definition for `PopoverContentProps` and a JavaScript example of its implementation.

```typescript
type PopoverContentProps = {
  styles?: StylesObj & PopoverStylesObj & MaskStylesObj
  badgeContent?: (badgeProps: BadgeProps) => any
  components?: PopoverComponentsType
  accessibilityOptions?: A11yOptions
  disabledActions?: boolean
  onClickClose?: (clickProps: ClickProps) => void
  setCurrentStep: Dispatch<React.SetStateAction<number>>
  currentStep: number
  transition?: boolean
  isHighlightingObserved?: boolean
  setIsOpen: Dispatch<React.SetStateAction<boolean>>
  steps: StepType[]
  showNavigation?: boolean
  showPrevNextButtons?: boolean
  showCloseButton?: boolean
  showBadge?: boolean
  nextButton?: (props: BtnFnProps) => void
  prevButton?: (props: BtnFnProps) => void
  disableDotsNavigation?: boolean
  rtl?: boolean
}
```

```javascript
function ContentComponent(props) {
  const isLastStep = props.currentStep === props.steps.length - 1
  const content = props.steps[props.currentStep].content
  return (
    <div style={{ border: '5px solid red', padding: 10, background: 'white' }}>
      {/* Check if the step.content is a function or a string */}
      {typeof content === 'function'
        ? content({ ...props, someOtherStuff: 'Custom Text' })
        : content}
      <button
        onClick={() => {
          if (isLastStep) {
            props.setIsOpen(false)
          } else {
            props.setCurrentStep((s) => s + 1)
          }
        }}
      >
        {isLastStep ? 'x' : '>'}
      </button>
    </div>
  )
}

const steps = [
  /* ... */
]

function App() {
  return (
    <TourProvider
      steps={steps}
      ContentComponent={ContentComponent}
      styles={{ popover: (base) => ({ ...base, padding: 0 }) }}
    >
      {/* ... */}
    </TourProvider>
  )
}
```

--------------------------------

### Integrate TourProvider at Application Root

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/quickstart/page.mdx

Demonstrates how to wrap your entire application with the `TourProvider` component. This component requires an array of `steps` defining the tour's sequence and content, and should be placed at the root of your React application to make the tour context available globally.

```js
import { TourProvider } from '@reactour/tour'

ReactDOM.render(
  <TourProvider steps={steps}>
    <App />
  </TourProvider>,
  document.getElementById('root')
)

const steps = [
  {
    selector: '.first-step',
    content: 'This is my first Step',
  },
  // ...
]
```

--------------------------------

### Callback After Tour Opens

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Action fired immediately after the Tour has successfully opened.

```APIDOC
afterOpen?: (target: Element | null) => void
```

--------------------------------

### Basic usage of Mask component in React

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/mask/quickstart/page.mdx

Illustrates how to import and integrate the Mask component from @reactour/mask into a React functional component, demonstrating how to pass size properties to control the mask's appearance.

```js
import { Mask } from '@reactour/mask'

function App() {
  const sizes = {
    width: 100,
    height: 100,
    top: 100,
    left: 100,
  }

  return (
    <>
      {/* ... */}
      <Mask sizes={sizes} />
    </>
  )
}
```

--------------------------------

### Example Customizing Popover Styles

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/popover/props/page.mdx

An example demonstrating how to define and apply custom styles to the Popover component using the `styles` prop, which accepts a function to dynamically adjust styles based on component state like `position`.

```javascript
const styles = {
  popover: (base, { position }) => ({
    ...base,
    boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)',
    backgroundColor: position === 'top' ? 'red' : '#dedede',
  }),
}

function App() {
  return <Popover styles={styles} />
}
```

--------------------------------

### Example of Custom Styles for Mask Component

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/mask/props/page.mdx

Illustrates how to apply custom styles to the Mask component using the `styles` prop. This example demonstrates modifying the `maskWrapper` and `highlightedArea` with dynamic values.

```javascript
const styles = {
  maskWrapper: (base) => ({
    ...base,
    color: 'red',
  }),
  highlightedArea: (base, { x, y }) => ({
    ...base,
    x: x + 10,
    y: y + 10,
  }),
}

function App() {
return <Mask styles={styles} />
}
```

--------------------------------

### TourProvider `steps` Prop and `StepType` API Reference

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Detailed API documentation for the `steps` prop of the `TourProvider` component, which defines the sequence of elements to highlight during the tour, and the structure of `StepType`.

```APIDOC
TourProvider
  steps?: StepType[]
    Description: Array of elements to highlight with special info and props.

StepType
  selector: string | Element
    Description: A string containing one CSS Selector to match and highlight the element at the time of this step.
  content: string | ({ setCurrentStep, transition, isHighlightingObserved, currentStep, setIsOpen }) => void
    Description: The content to show inside the Popover at the time of this step. Using a function have parameters to use inside content.
  position?: 'top' | 'right' | 'bottom' | 'left' | 'center' | [number, number]
    Description: The preferred postion to position the Popover in relation with the highlighted element. Will be automatically calculated in case of unavailable space.
  highlightedSelectors?: string[]
    Description: Array of CSS Selector to be included (by union) in the highlighted region of the Mask.
  mutationObservables?: string[]
    Description: Array of CSS Selector that addition or removal will triggered a rerender of the Mask shape.
  resizeObservables?: string[]
    Description: Array of CSS Selector that when resizeing each will triggered a rerender of the Mask shape.
  navDotAriaLabel?: string
    Description: String to assign to aria-label attribute of the Dot of this step.
  stepInteraction?: boolean
    Description: Allow to reenable the interaction for this specific step, when disableInteraction (from TourProvider) is true.
  action?: (elem: Element | null) => void
    Description: Action fired when the Tour arrives in this step.
  actionAfter?: (elem: Element | null) => void
    Description: Action fired when the Tour leaves this step.
```

--------------------------------

### Customizing Popover Styles

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/popover/README.md

An example demonstrating how to customize the `popover` style using the `styles` prop, applying a box shadow and background color.

```js
const styles = {
  popover: (base) => ({
    ...base,
    boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)',
    backgroundColor: '#dedede',
  }),
}
```

--------------------------------

### Reactour Step-Specific Configuration Properties

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Documents properties that can be applied to individual steps within a Reactour tour, allowing fine-grained control over behavior, appearance, and interaction for each step.

```APIDOC
disableActions: boolean
  Description: Allow to disable all possible actions (interaction with Mask, Navigation Arrows, Navigation Dots, Close button and keyboard events) when the Tour is in this step.
padding: Padding
  Description: Control padding spaces for this specific step.
bypassElem: boolean
  Description: Excludes the main selector when calculating highlited area if present highlightedSelectors.
styles: StylesObj & PopoverStylesObj & MaskStylesObj
  Description: Customize styles fro this specific step.
```

--------------------------------

### Using the Observables Component

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/utils/README.md

Example of integrating the `Observables` component to monitor specific DOM elements for mutations and resize events, triggering a custom `refresh` function upon detection.

```js
import { Portal } from '@reactour/utils'
function App() {
  function refresh() {
    console.log('mutated!')
  }
  return (
    <>
      <p className="mutation-elem">Vestibulum maximus vitae </p>
      <textarea
        className="resize-elem"
        defaultValue="Vestibulum maximus vitae"
      />
      <Observables
        resizeObservables={['.resize-elem']}
        mutationObservables={['.mutation-elem']}
        refresh={refresh}
      />
      {/* ...*/}
    </>
  )
}
```

--------------------------------

### Reactour useTour Hook API Reference

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Detailed API documentation for the `useTour` hook, outlining its available properties and their types, which allow programmatic control and access to the tour's state.

```APIDOC
useTour Hook Properties:
  isOpen: boolean
    Description: Indicates if the Tour is currently open or closed.
  currentStep: number
    Description: The current step index of the Tour (zero-based).
  steps: StepType[]
    Description: The array of steps currently set for the Tour.
  setIsOpen: Dispatch<React.SetStateAction<boolean>>
    Description: A state setter function to open or close the Tour.
  setSteps: Dispatch<React.SetStateAction<StepType[]>>
    Description: A state setter function to update the array of steps for the Tour.
  meta: string
    Description: Global meta information that can be useful in complex Tour situations.
  setMeta: Dispatch<React.SetStateAction<string>>
    Description: A state setter function to update the global meta information.
```

--------------------------------

### Using the smoothScroll Function

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/utils/README.md

Example of using the `smoothScroll` function to programmatically scroll a specific DOM element into the user's view, with a promise-based callback for completion.

```js
const elem = documet.querySelector('.elem')

smoothScroll(elem).then(() => {
  console.log('Scrolled!')
})
```

--------------------------------

### Using the useElemRect Hook

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/utils/README.md

Example of using the `useElemRect` hook to calculate the bounding client rectangle of a DOM element obtained directly via `document.querySelector`.

```js
import { useElemRect } from '@reactour/utils'
function App() {
  const elem = document.querySelector('.elem')
  const sizes = useElemRect(elem)
  return (
    <>
      <p class="elem">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      {/* ...*/}
    </>
  )
}
```

--------------------------------

### Callback Before Tour Closes

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Action fired just before the Tour is about to close.

```APIDOC
beforeClose?: (target: Element | null) => void
```

--------------------------------

### Control Tour with useTour Hook

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Shows how to use the `useTour` hook within a functional component to programmatically open or close the tour, typically triggered by a user action.

```js
import { useTour } from '@reactour/tour'

function App() {
  const { setIsOpen } = useTour()
  return (
    <>
      <p className="first-step">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
        finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
        metus nec, porta luctus orci
      </p>
      <button onClick={() => setIsOpen(true)}>Open Tour</button>
    </>
  )
}
```

--------------------------------

### Reactour Global Styles Configuration API

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Describes the `styles` prop for customizing the appearance of the Mask, Popover, and Tour components globally. It outlines the available style keys and their corresponding props for various tour elements.

```APIDOC
styles: StylesObj & PopoverStylesObj & MaskStylesObj
  Description: Prop to customize styles for the different parts of the Mask, Popover and Tour using a function that allows to extend the base styles an take advantage of some state props.
  Tour Components Style Keys and Props:
    badge:
      props: (none)
    controls:
      props: (none)
    button:
      props: disabled
    arrow:
      props: disabled
    dot:
      props: current, disabled, showNumber
    close:
      props: disabled
```

--------------------------------

### BtnFnProps and NavButtonProps Type Definitions

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Defines the types for `BtnFnProps` (parameters for button customization functions) and `NavButtonProps` (properties for the base `Button` component).

```typescript
type BtnFnProps = {
  Button: React.FC<NavButtonProps>
  setCurrentStep: Dispatch<React.SetStateAction<number>>
  stepsLength: number
  currentStep: number
  setIsOpen: Dispatch<React.SetStateAction<boolean>>
}

type NavButtonProps = {
  onClick?: () => void
  kind?: 'next' | 'prev'
  hideArrow?: boolean
}
```

--------------------------------

### Basic usage of Popover component in React

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/popover/quickstart/page.mdx

Demonstrates how to import and use the Popover component from @reactour/popover within a React functional component. It shows how to pass custom 'sizes' props to control the popover's positioning.

```js
import { Popover } from '@reactour/popover'

function App() {
  const sizes = {
    bottom: 0,
    left: 0,
  }

  return (
    <>
      {/* ... */}
      <Popover sizes={sizes}>
    </>
  )
}
```

--------------------------------

### Popover CSS Class Name

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Assigns a CSS class to the Tour's Popover element. Defaults to `reactour__popover`.

```APIDOC
className?: string
```

--------------------------------

### Control Tour Visibility with useTour Hook

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/quickstart/page.mdx

Illustrates how to use the `useTour` hook within any component down the application tree to programmatically control the tour's visibility. The `setIsOpen` function returned by the hook can be used to open or close the tour based on user interactions or other logic.

```js
import { useTour } from '@reactour/tour'

function App() {
  const { setIsOpen } = useTour()
  return (
    <>
      <p className="first-step">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at
        finibus nulla, quis varius justo. Vestibulum lorem lorem, viverra porta
        metus nec, porta luctus orci
      </p>
      <button onClick={() => setIsOpen(true)}>Open Tour</button>
    </>
  )
}
```

--------------------------------

### Mask CSS Class Name

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Assigns a CSS class to the Tour's Mask element. Defaults to `reactour__mask`.

```APIDOC
maskClassName?: string
```

--------------------------------

### Control Reactour Programmatically with useTour Hook

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Illustrates how to use the `useTour` hook to access and manipulate the tour's state (open/close, current step, steps array) from any component within the `TourProvider` tree.

```jsx
import { useTour } from '@reactour/tour'

function MyComponent() {
  const { isOpen, currentStep, steps, setIsOpen, setCurrentStep, setSteps } = useTour()
  return (
    <>
      <h1>{isOpen ? 'Welcome to the tour!' : 'Thank you for participate!'}</h1>
      <p>
        Now you are visiting the place {currentStep + 1} of {steps.length}
      </p>
      <nav>
        <button onClick={() => setIsOpen(o => !o)}>Toggle Tour</button>
        <button onClick={() => setCurrentStep(3)}>
          Take a fast way to 4th place
        </button>
        <button
          onClick={() =>
            setSteps([
              { selector: '.new-place-1', content: 'New place 1' },
              { selector: '.new-place-2', content: 'New place 2' },
            ])
            setCurrentStep(1)
          }
        >
          Switch to a new set of places, starting from the last one!
        </button>
      </nav>
    </>
  )
}
```

--------------------------------

### Reactour Popover Component Customization API

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Defines the `components` prop for Reactour, enabling granular customization of internal Popover components like Badge, Close, Content, Navigation, and Arrow. It lists available keys and their respective props.

```APIDOC
components: PopoverComponentsType
  Description: Prop to customize granurally each Component inside the Popover.
  Components available:
    Badge:
      props: styles
    Close:
      props: styles, onClick, disabled
    Content:
      props: content, setCurrentStep, transition, isHighlightingObserved, currentStep, setIsOpen
    Navigation:
      props: styles, setCurrentStep, steps, currentStep, disableDots, nextButton, prevButton, setIsOpen, hideButtons, hideDots, disableAll, rtl, Arrow
    Arrow:
      props: styles, inverted, disabled
```

--------------------------------

### Customize Next Button

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Helper function to customize the Next button inside the Popover, with useful parameters. It is possible to use the base `Button` and customize its props.

```APIDOC
nextButton?: (props: BtnFnProps) => void
```

--------------------------------

### Toggle Dots Navigation Visibility (showDots)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Controls the visibility of the dots navigation within the Popover. These dots typically represent each step in the tour and allow direct navigation between them.

```APIDOC
showDots?: boolean
```

--------------------------------

### ClickProps Type Definition

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Defines the `ClickProps` type, providing parameters for functions that handle click events on the Tour Mask or Close icon.

```typescript
type ClickProps = {
  setIsOpen: Dispatch<React.SetStateAction<boolean>>
  setCurrentStep: Dispatch<React.SetStateAction<number>>
  setSteps: Dispatch<React.SetStateAction<StepType[]>>
  setMeta: Dispatch<React.SetStateAction<string>>
  currentStep: number
  steps: StepType[]
  meta: string
}
```

--------------------------------

### Control Reactour Current Step State

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Function to control the Tour's current step state, allowing external manipulation of the active step.

```APIDOC
setCurrentStep: Dispatch<React.SetStateAction<number>>
```

--------------------------------

### Enhance Components with Tour Functionality using withTour HOC

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Shows how to use the `withTour` Higher-Order Component to inject tour control props into a class component, providing an alternative to the `useTour` hook for managing tour state.

```jsx
import { Component } from 'react'
import { withTour } from '@reactour/tour'

class MyComponent extends Component {
  render() {
    return (
      <>
        <button onClick={() => this.props.setIsOpen(true)}>Start Tour</button>
        <div>{/* ... */}</div>
      </>
    )
  }
}

export default withTour(MyCompnent)
```

--------------------------------

### Customizing Mask Component Styles

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/mask/README.md

An example demonstrating how to use the `styles` prop to apply custom styling to different parts of the `Mask` component, such as the `maskWrapper` and `highlightedArea`, using a function-based approach that provides base styles and state props.

```js
const styles = {
  maskWrapper: (base) => ({
    ...base,
    color: 'red',
  }),
  highlightedArea: (base, { x, y }) => ({
    ...base,
    x: x + 10,
    y: y + 10,
  }),
}
```

--------------------------------

### Customize Previous Button

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Helper function to customize the Previous button inside the Popover, with useful parameters. It is possible to use the base `Button` and customize its props.

```APIDOC
prevButton?: (props: BtnFnProps) => void
```

--------------------------------

### Disable Keyboard Navigation

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Controls keyboard navigation events. Setting to `true` disables all events, while an array allows disabling only selected keys. Defaults to `false`.

```APIDOC
disableKeyboardNavigation?: boolean | KeyboardParts[]
```

--------------------------------

### Reactour withTour Higher-Order Component Example

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/tour/hooks/page.mdx

Illustrates the usage of the `withTour` Higher-Order Component (HOC) to inject tour control props into a React class component, allowing it to interact with the tour state.

```javascript
import { Component } from 'react'
import { withTour } from '@reactour/tour'

class MyComponent extends Component {
  render() {
    return (
      <>
        <button onClick={() => this.props.setIsOpen(true)}>Start Tour</button>
        <div>{/* ... */}</div>
      </>
    )
  }
}

export default withTour(MyCompnent)
```

--------------------------------

### Configure Accessibility Options for Tour (accessibilityOptions)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Provides a set of options to configure generic accessibility-related attributes for the tour components. This includes setting `aria-labelledby` for the tour, `aria-label` for the close button, and controlling the visibility of dot navigation for screen readers, enhancing usability for assistive technologies.

```APIDOC
accessibilityOptions?: A11yOptions
```

```ts
type A11yOptions = {
  ariaLabelledBy: string;
  closeButtonAriaLabel: string;
  showNavigationScreenReaders: boolean;
}
```

--------------------------------

### Reactour useTour Hook Example

Source: https://github.com/elrumordelaluz/reactour/blob/main/apps/docs/app/tour/hooks/page.mdx

Demonstrates how to use the `useTour` hook within a functional React component to access and manipulate the tour's state, including opening/closing the tour, navigating steps, and dynamically updating the tour's steps array.

```javascript
import { useTour } from '@reactour/tour'

function MyComponent() {
  const { isOpen, currentStep, steps, setIsOpen, setCurrentStep, setSteps } = useTour()
  return (
    <>
      <h1>{isOpen ? 'Welcome to the tour!' : 'Thank you for participate!'}</h1>
      <p>
        Now you are visiting the place {currentStep + 1} of {steps.length}
      </p>
      <nav>
        <button onClick={() => setIsOpen(o => !o)}>Toggle Tour</button>
        <button onClick={() => setCurrentStep(3)}>
          Take a fast way to 4th place
        </button>
        <button
          onClick={() =>
            setSteps([
              { selector: '.new-place-1', content: 'New place 1' },
              { selector: '.new-place-2', content: 'New place 2' },
            ])
            setCurrentStep(1)
          }
        >
          Switch to a new set of places, starting from the last one!
        </button>
      </nav>
    </>
  )
}
```

--------------------------------

### Customize Tour Badge Content (badgeContent)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

A function that allows customization of the content displayed within the tour's badge. It provides helper parameters such as the total number of steps, the current step index, and a boolean indicating if the tour is currently transitioning between steps, enabling dynamic badge content.

```APIDOC
badgeContent?: (badgeProps: BadgeProps) => any
```

```ts
type BadgeProps = {
  totalSteps: number;
  currentStep: number;
  transition: boolean;
}
```

--------------------------------

### Toggle Tour Badge Visibility (showBadge)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Manages the visibility of the tour's badge element inside the Popover. The badge typically displays information like current step and total steps, and this prop allows it to be hidden if not needed.

```APIDOC
showBadge?: boolean
```

--------------------------------

### Toggle Previous/Next Buttons Visibility (showPrevNextButtons)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Determines whether the 'Prev' and 'Next' navigation buttons are displayed inside the Popover. This allows for granular control over navigation elements, independent of the dots navigation.

```APIDOC
showPrevNextButtons?: boolean
```

--------------------------------

### Enable Right-to-Left Mode for Tour (rtl)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Activates right-to-left (RTL) mode for tour navigation and display. When enabled, the tour's layout and navigation direction will adapt to RTL conventions, suitable for languages like Arabic or Hebrew.

```APIDOC
rtl?: boolean
```

--------------------------------

### Configure Viewport Tolerance for Scrolling (inViewThreshold)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Specifies a tolerance in pixels to be added when calculating if a step's element is outside the viewport, triggering a scroll. This allows for a buffer zone around the element before a scroll action is initiated, improving the visual flow.

```APIDOC
inViewThreshold?: { x?: number, y?: number } | number
```

--------------------------------

### Reactour Padding Type Definition

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Provides the TypeScript type definition for the `Padding` prop, which controls spacing around the Mask, Popover, and highlighted elements. It supports both a single number and an object for component-specific padding.

```ts
type Padding =
  | number
  | {
      mask?: ComponentPadding
      popover?: ComponentPadding
      wrapper?: ComponentPadding
    }

// x and y same value or [x, y] or [top, x, bottom] or [top, right, bottom, left]
type ComponentPadding = number | number[]
```

--------------------------------

### Customize Keyboard Event Handling in Reactour (keyboardHandler)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Provides a function to override the default keyboard event handling behavior within the tour. This allows developers to implement custom navigation, close actions, or other interactions based on specific key presses, offering fine-grained control over user input.

```APIDOC
keyboardHandler?: KeyboardHandler
```

```ts
type KeyboardHandler = {
  keyboardHandler?: (
    e: KeyboardEvent,
    clickProps?: ClickProps,
    status?: {
      isEscDisabled?: boolean;
      isRightDisabled?: boolean;
      isLeftDisabled?: boolean;
    }
  ) => void;
}
```

```jsx
<TourProvider
  steps={steps}
  disableInteraction
  keyboardHandler={(e, clickProps) => {
    if (e.key === 'ArrowRight') {
      clickProps.setCurrentStep(
        Math.min(clickProps.currentStep + 1, clickProps.steps.length - 1)
      );
    }
    if (e.key === 'ArrowLeft') {
      clickProps.setCurrentStep(Math.max(clickProps.currentStep - 1, 0));
    }
    if (e.key === 'Escape') {
      const nextStep = Math.floor(Math.random() * clickProps.steps.length);
      clickProps.setCurrentStep(nextStep);
    }
  }}
>
  {/* ... */}
</TourProvider>
```

--------------------------------

### Reactour Popover Position Type Definition

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Defines the TypeScript type for the `Position` prop, used to set the global position of the Popover. It supports predefined strings, fixed coordinates, or a dynamic function based on element and window dimensions.

```ts
type Position =
  | 'top'
  | 'right'
  | 'bottom'
  | 'left'
  | 'center'
  | [number, number]
  | ((postionsProps: PositionProps) => Position)

type PositionProps = {
  bottom: number
  height: number
  left: number
  right: number
  top: number
  width: number
  windowWidth: number
  windowHeight: number
}
```

--------------------------------

### Control Popover Behavior During Transition (onTransition)

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

A function that allows custom control over the Popover's behavior when it is transitioning or scrolling from one step to another. It provides the Popover's next and previous positions, enabling dynamic adjustments or animations during step changes.

```APIDOC
onTransition?: PositionType
```

```ts
type PositionType = (
  postionsProps: PositionProps,
  prev: RectResult
) => 'top' | 'right' | 'bottom' | 'left' | 'center' | [number, number];
```

--------------------------------

### Basic Usage of Reactour Popover Component

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/popover/README.md

Demonstrates how to import and use the `Popover` component in a React application, passing a `sizes` prop.

```js
import { Popover } from '@reactour/popover'

function App() {
  const sizes = {
    bottom: 0,
    left: 0,
  }

  return (
    <>
      {/* ... */}
      <Popover sizes={sizes}>
    </>
  )
}
```

--------------------------------

### Disable Popover Dot Navigation

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/tour/README.md

Disables interactivity with the dot navigation elements located inside the Popover.

```APIDOC
disableDotsNavigation?: boolean
```

--------------------------------

### Popover Component API Reference

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/popover/README.md

Detailed API documentation for the `Popover` component, including its props, their types, and descriptions.

```APIDOC
Popover Component API:
  Prop: sizes
    Type: RectResult
    Description: Object containing size and position informations of where to position the Popover.
    Type Definition:
      type RectResult = {
        width?: number
        height?: number
        top?: number
        left?: number
        bottom?: number
        right?: number
      }
  Prop: position
    Type: Position
    Description: The position for the Popover, fixed in case of [number, number], calculated prefered position in case of string.
    Type Definition:
      type Position =
        | 'top'
        | 'right'
        | 'bottom'
        | 'left'
        | 'center'
        | [number, number]
        | ((postionsProps: PositionProps, prevRect: RectResult) => Position)

      type PositionProps = {
        bottom: number
        height: number
        left: number
        right: number
        top: number
        width: number
        windowWidth: number
        windowHeight: number
      }
  Prop: padding
    Type: number | number[]
    Description: Extra space to add in Popover position calculations. Useful when calculating space from Element bounding rect and want to add more space. Single number sets same space for all sides, otherwise an Array sets [x, y] or [top, x, bottom] or [top, right, bottom, left].
  Prop: styles
    Type: StylesObj
    Description: Prop to customize styles for the different parts of the Mask using a function that allows to extend the base styles an take advantage of some state props.
    Available Style Keys and Props:
      - key: popover
        props: position, verticalAlign, horizontalAlign, helperRect, targetRect
  Prop: className
    Type: string
    Description: Class to apply to the Popover.
  Prop: refresher
    Type: any
    Description: Any value that if changed, updates rect calculations.
```

--------------------------------

### Observables Component API Reference

Source: https://github.com/elrumordelaluz/reactour/blob/main/packages/utils/README.md

API documentation for the `Observables` component, outlining its props for tracking DOM mutations and element resizing, and providing a refresh callback.

```APIDOC
Observables:
  mutationObservables?: string[]
    description: Array of CSS Selector to track mutations
  resizeObservables?: string[]
    description: Array of CSS Selector to track resizing
  refresh?: any
    description: Function to fire on each mutation update
```