### Advanced Onboarding Tour Setup with OnboardingTour.Target (React)

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

An example showcasing a more complex onboarding tour setup. It utilizes `OnboardingTour.Target` for elements not directly nested within `OnboardingTour` and integrates Mantine hooks and components for managing tour state and UI elements. The `started` prop controls the tour's visibility.

```jsx
import { OnboardingTour, type OnboardingTourStep } from '@gfazioli/mantine-onboarding-tour';
import { Badge, Button, Divider, Stack } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function AnotherComponent({ open }: { open: () => void }) {
  return (
    <>
      <OnboardingTour.Target id="step-2">
        <Button onClick={open}>Step 2</Button>
      </OnboardingTour.Target>
      <OnboardingTour.Target id="step-3">
        <Button onClick={open}>Step 3</Button>
      </OnboardingTour.Target>
    </>
  );
}

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const onboardingSteps: OnboardingTourStep[] = [
    {
      id: 'step-1',
      title: 'Step-1',
      content: <Badge color="lime">I'm a direct child of OnboardingTour</Badge>,
    },
    {
      id: 'step-2',
      title: 'Step-2',
      content: <Badge color="yellow">I'm not a direct child of OnboardingTour</Badge>,
    },
    {
      id: 'step-3',
      title: 'Step-3',
      content: <Badge color="yellow">I'm not a direct child of OnboardingTour</Badge>,
    },
  ];

  return (
    <OnboardingTour
      tour={onboardingSteps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      title="The Title for all steps"
      withSkipButton={false}
      maw={400}
    >
      <Stack justify="center" align="center">
        <Button size="md" radius={256} variant="gradient" onClick={open}>
          👉 Click here to Start the Tour 👈
        </Button>

        <Divider my={32} />
        <Stack w={200} gap={32}>
          <Button data-onboarding-tour-id="step-1" onClick={open}>
            Step 1
          </Button>
          <AnotherComponent open={open} />
        </Stack>
      </Stack>
    </OnboardingTour>
  );
}

```

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

### Demo Usage Example

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

An example demonstrating how to implement and use the OnboardingTour component with defined steps and control elements.

```APIDOC
## Demo Usage Example

### Description
This example showcases the practical implementation of the `OnboardingTour` component using a list of `OnboardingTourStep` objects. It includes buttons to trigger the tour and buttons associated with specific tour steps.

### Code Snippet
```typescript
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Code, Divider, Stack, Text, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const onboardingSteps: OnboardingTourStep[] = [
    {
      id: 'step-1',
      title: 'Step 1 Title',
      content: 'Content for step 1',
      focusRevealProps: {
        popoverProps: {
          position: 'top',
        },
      },
    },
    {
      id: 'step-2',
      title: 'Step 2 Title',
      content: 'Content for step 2',
      focusRevealProps: (tourController: OnboardingTourController) => {
        return {
          overlayProps: {
            color: '#f00',
          },
          popoverProps: {
            position: 'bottom',
          },
        };
      },
    },
    {
      id: 'step-3',
      title: 'Step 3 Title',
      content: 'Content for step 3',
      focusRevealProps: {
        popoverProps: {
          position: 'top',
          shadow: '0 0 16px 8px rgba(0, 0, 255, 1)',
        },
      },
    },
  ];

  return (
    <OnboardingTour
      tour={onboardingSteps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      maw={400}
    >
      <Stack justify="center" align="center">
        <Button size="md" radius={256} variant="gradient" onClick={open}>
          👉 Click here to Start the Tour 👈
        </Button>

        <Divider my={32} />

        <Stack w={200} gap={32}>
          <Button data-onboarding-tour-id="step-1" onClick={open}>
            Title
          </Button>
          <Button data-onboarding-tour-id="step-2" onClick={open}>
            Description
          </Button>
          <Button data-onboarding-tour-id="step-3" onClick={open}>
            Content
          </Button>
        </Stack>
      </Stack>
    </OnboardingTour>
  );
}
```

### Component Props
- `tour`: An array of `OnboardingTourStep` objects defining the tour sequence.
- `started`: A boolean controlling whether the tour is currently active.
- `onOnboardingTourEnd`: Callback function executed when the tour ends.
- `onOnboardingTourClose`: Callback function executed when the tour is closed.
- `maw`: Maximum width of the tour component.
```

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

### Mantine Onboarding Tour: Responsive Behavior Configuration (React)

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This example demonstrates how to configure the responsive behavior of the OnboardingTour component. It allows enabling or disabling responsive features, setting a custom breakpoint for mobile detection, and defining the position of the tour guide on mobile devices ('top' or 'bottom').

```jsx
<OnboardingTour
  tour={onboardingSteps}
  started={started}
  responsive={true}
  mobileBreakpoint="(max-width: 768px)"
  mobilePosition="bottom"
>
  {/* Your content */}
</OnboardingTour>
```

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

### Mantine Onboarding Tour React Example

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

A comprehensive example demonstrating the usage of the OnboardingTour component in a React application. It showcases how to define tour steps, manage tour state, and integrate with other Mantine components.

```jsx
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Center, Code, Divider, Group, Stack, Text, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

// Assuming Testimonials and OnboardingTourStep, OnboardingTourController types are defined elsewhere
// type OnboardingTourStep = { id: string; title: string; content: React.ReactNode };
// type OnboardingTourController = { currentStepIndex: number };

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const onboardingSteps = [
    {
      id: 'welcome',
      title: 'Welcome to the Onboarding Tour Component',
      content:
        'This is a demo of the Onboarding Tour component, which allows to create onboarding experiences for your users.',
    },
    {
      id: 'subtitle',
      title: 'Subtitle',
      content:
        <Text>
          You can select any component by using the <Code>data-onboarding-tour-id</Code> attribute
        </Text>,
    },
    {
      id: 'button-see-all',
      title: 'New Features',
      content: 'Now you can click on the button "See all" to display all the testimonials',
    },
    {
      id: 'testimonial-2',
      title: 'New Testimonial Layout',
      content: 'We have improved the Testimonial layout',
    },
  ];

  return (
    <OnboardingTour
      tour={onboardingSteps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      maw={400}
      header={(tourController) => (
        <Image // Assuming Image component is imported from '@mantine/core'
          mah={150}
          radius="md"
          src={`https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-${tourController.currentStepIndex + 1}.png`}
        />
      )}
    >
      <Stack justify="center" align="center">
        <Title data-onboarding-tour-id="welcome" order={4}>
          A simple example of the Onboarding Tour component
        </Title>
        <Text data-onboarding-tour-id="subtitle">👉 New amazing Mantine extension component</Text>

        <Center>
          <Button data-onboarding-tour-id="button-see-all">
            See all testimonials
          </Button>
        </Center>

        <Group justify="center">
          <Testimonials testimonial={0} /> {/* Assuming Testimonials component is defined elsewhere */} 
          <Testimonials data-onboarding-tour-id="testimonial-2" testimonial={1} />
        </Group>
      </Stack>
    </OnboardingTour>
  );
}

```

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

### Install @gfazioli/mantine-onboarding-tour with Yarn

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

Installs the Mantine Onboarding Tour package using the Yarn package manager. This is the first step to integrate the component into your project.

```bash
yarn add @gfazioli/mantine-onboarding-tour
```

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

### Full Mantine Onboarding Tour Example with Custom Footer (TypeScript)

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This comprehensive example integrates custom step data (`price`) with the `OnboardingTour` component. The `footer` prop is used to display the price for steps that have it, or a 'Included in all plans' badge otherwise, showcasing dynamic footer content.

```typescript
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Code, Divider, Stack, Text, Title, Center, Badge, Group } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const onboardingSteps: OnboardingTourStep[] = [
    {
      id: 'step-1',
      title: 'Step-1',
      content: 'Description of the Step 1',
      price: 12,
    },
    {
      id: 'step-2',
      title: 'Step-2',
      content: 'Description of the Step 2',
    },
    {
      id: 'step-3',
      title: 'Step-3',
      content: 'Description of the Step 3',
      price: 32,
    },
  ];

  return (
    <OnboardingTour
      tour={onboardingSteps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      footer={(onboardingTour: OnboardingTourController) => {
        if (onboardingTour.currentStep?.price) {
          return (
            <Center>
              <Text size="xs">
                Price: <Badge color="orange">${onboardingTour.currentStep?.price}</Badge>
              </Text>
            </Center>
          );
        }
        return (
          <Group grow>
            <Badge color="green">Included in all plans</Badge>
          </Group>
        );
      }}
      maw={400}
    >
      <Stack justify="center" align="center">
        <Button size="md" radius={256} variant="gradient" onClick={open}>
          👉 Click here to Start the Tour 👈
        </Button>

        <Divider my={32} />

        <Stack w={200} gap={32}>
          <Button data-onboarding-tour-id="step-1" onClick={open}>
            Step 1
          </Button>
          <Button data-onboarding-tour-id="step-2" onClick={open}>
            Step 2
          </Button>
          <Button data-onboarding-tour-id="step-3" onClick={open}>
            Step 3
          </Button>
        </Stack>
      </Stack>
    </OnboardingTour>
  );
}
```

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

### Install @gfazioli/mantine-onboarding-tour with NPM

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

Installs the Mantine Onboarding Tour package using the npm package manager. This command is an alternative to Yarn for adding the component to your project.

```bash
npm install @gfazioli/mantine-onboarding-tour
```

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

### Implement Onboarding Tour with Custom Step Content and Titles

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

Demonstrates the `OnboardingTour` component usage with custom React elements for step titles and content. It utilizes the `useDisclosure` hook for managing the tour's `started` state and passes an array of `OnboardingTourStep` objects to the `tour` prop. The example showcases dynamic content based on `tourController` and custom `data-onboarding-tour-id` attributes for triggering specific steps.

```typescript
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Code, Divider, Stack, Text, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const onboardingSteps: OnboardingTourStep[] = [
    {
      id: 'step-1',
      title: (
        <Title order={4} c="lime">
          Title in a <Code>Title</Code> component
        </Title>
      ),
      content: (
        <Text c="red">
          Description in a <Code>Text</Code> component with color red
        </Text>
      ),
    },
    {
      id: 'step-2',
      title: 'Simple Title String',
      content: (tourController: OnboardingTourController) => (
        <Text>
          Description by using the function <Code>(tourController: OnboardingTourController)</Code> so we can get some more information such as the step: {tourController.currentStepIndex}
        </Text>
      ),
    },
    {
      id: 'step-3',
      content: <LoginForm />,
    },
  ];

  return (
    <OnboardingTour
      tour={onboardingSteps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      maw={400}
    >
      <Stack justify="center" align="center">
        <Button size="md" radius={256} variant="gradient" onClick={open}>
          👉 Click here to Start the Tour 👈
        </Button>

        <Divider my={32} />

        <Stack w={200} gap={32}>
          <Button data-onboarding-tour-id="step-1" onClick={open}>
            Title
          </Button>
          <Button data-onboarding-tour-id="step-2" onClick={open}>
            Description
          </Button>
          <Button data-onboarding-tour-id="step-3" onClick={open}>
            Content
          </Button>
        </Stack>
      </Stack>
    </OnboardingTour>
  );
}

```

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

### Mantine Onboarding Tour Setup with Multiple Steps

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This snippet shows how to set up the OnboardingTour component with a series of steps. It defines tour steps with IDs, titles, and content, and integrates with other components to act as tour targets. The tour is initiated by a button click and managed using the useDisclosure hook for its open/close state.

```jsx
import { Badge, Button, Divider, Stack } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

// Assuming OnboardingTour and OnboardingTourStep are imported correctly
// import { OnboardingTour, type OnboardingTourStep } from '@gfazioli/mantine-onboarding-tour';

function AnotherComponent({ open }: { open: () => void }) {
  return (
    <>
      <OnboardingTour.Target
        id="step-2"
        focusRevealProps={{ popoverProps: { position: 'top-end' } }}
      >
        <Button onClick={open}>Step 2</Button>
      </OnboardingTour.Target>
      <OnboardingTour.Target
        id="step-3"
        focusRevealProps={{ popoverProps: { position: 'right-end' }, overlayProps: { blur: 16 } }}
      >
        <Button onClick={open}>Step 3</Button>
      </OnboardingTour.Target>
    </>
  );
}

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const onboardingSteps: OnboardingTourStep[] = [
    {
      id: 'step-1',
      title: 'Step-1',
      content: <Badge color="lime">I'm a direct child of OnboardingTour</Badge>,
    },
    {
      id: 'step-2',
      title: 'Step-2',
      content: <Badge color="yellow">I'm not a direct child of OnboardingTour</Badge>,
    },
    {
      id: 'step-3',
      title: 'Step-3',
      content: <Badge color="yellow">I'm not a direct child of OnboardingTour</Badge>,
    },
  ];

  return (
    <OnboardingTour
      tour={onboardingSteps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      title="The Title for all steps"
      withSkipButton={false}
      maw={400}
    >
      <Stack justify="center" align="center">
        <Button size="md" radius={256} variant="gradient" onClick={open}>
          👉 Click here to Start the Tour 👈
        </Button>

        <Divider my={32} />
        <Stack w={200} gap={32}>
          <Button data-onboarding-tour-id="step-1" onClick={open}>
            Step 1
          </Button>
          <AnotherComponent open={open} />
        </Stack>
      </Stack>
    </OnboardingTour>
  );
}

```

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

### Mantine FocusReveal: Overlay Props Example

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

Demonstrates using `OnboardingTour.FocusReveal` with custom `overlayProps` to apply a red, blurred overlay with specific styling. This highlights a component by dimming the rest of the page with the defined overlay properties.

```jsx
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Center, Divider, Group, Stack, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [focused, { close, open }] = useDisclosure(false);

  return (
    <Stack justify="center" align="center">
      <Title order={4}>Overlay Example</Title>

      <Center>
        <Button onClick={open}>Set the Focus to the below component</Button>
      </Center>

      <Divider my={200} />

      <Group justify="center">
        <OnboardingTour.FocusReveal
          focused={focused}
          onBlur={close}
          overlayProps={{
            color: 'rgba(255,0,0,1)',
            blur: 0,
          }}>
          <Testimonials testimonial={1} />
        </OnboardingTour.FocusReveal>
      </Group>

      <Divider my={200} />
    </Stack>
  );
}
```

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

### Render Custom Data in Onboarding Tour Footer (TypeScript)

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This example demonstrates how to use the `footer` prop of the `OnboardingTour` component to conditionally render custom data from tour steps. It checks for a `price` property and displays it, or shows a default message if the property is not present.

```typescript
<OnboardingTour
  footer={(onboardingTour: OnboardingTourController) => {
    if (onboardingTour.currentStep?.price) {
      return onboardingTour.currentStep?.price;
    }
    return null;
  }}
/>
```

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

### Basic Focus Reveal with Default Focus

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

Demonstrates a simple uncontrolled example of `OnboardingTour.FocusReveal`. The `defaultFocused` prop is set to `true`, causing the card to be focused by default. Scrolling down reveals additional content.

```tsx
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Center, Code, Divider, Stack, Text, Title } from '@mantine/core';

function Demo() {

  return (
    <Stack justify="center" align="center">
      <Title order={4}>Simple (uncontrolled) Example</Title>

      <Center>
        <Text>
          The <Code>defaultFocused</Code> props is set to <Code>true</Code>, card below is focused
          by default
        </Text>
      </Center>

      <Divider mb={600}
        label={
          <>
            <Text fz={48}>👇</Text>
            <Text>Scroll down</Text>
          </>
        }
      />

      <Center>
        <OnboardingTour.FocusReveal defaultFocused={true} withReveal={false}>
          <Testimonials testimonial={0} />
        </OnboardingTour.FocusReveal>
      </Center>

      <Divider my={200} />
    </Stack>
  );
}

```

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

### Mantine Onboarding Tour: Multiple Components with Arrow Key Navigation (React)

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This example shows how to integrate the OnboardingTour.FocusReveal component to create a multi-step tour where users can navigate through different sections using arrow keys. It utilizes React hooks for state management and hotkey handling. The component focuses on specific elements, allowing interaction via 'Next' buttons and ending the tour with a 'Stop' button.

```tsx
import { useState } from 'react';
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';

function Demo() {
  const [focusIndex, setFocusIndex] = useState(-1);
  const MAX_TESTIMONIALS = 3;

  useHotkeys([
    [
      'ArrowRight',
      () =>
        focusIndex >= 0 && setFocusIndex(focusIndex + 1 < MAX_TESTIMONIALS ? focusIndex + 1 : 0),
    ],
    [
      'ArrowLeft',
      () =>
        focusIndex >= 0 &&
        setFocusIndex(focusIndex - 1 >= 0 ? focusIndex - 1 : MAX_TESTIMONIALS - 1),
    ],
  ]);

  const descriptions = [
    'This is the first description.',
    'This is the second description.',
    'This is the third description.',
    'This is the fourth description.',
  ];

  // Assuming 'testimonials' is defined elsewhere or is a placeholder for actual testimonial data
  const testimonials = Array(MAX_TESTIMONIALS).fill(null); // Placeholder

  return (
    <Stack justify="center" align="center">
      <Title order={1}>Multiple components Example</Title>
      <Text fs="italic">Use the arrow keys to cycle through the testimonials</Text>
      <Button onClick={() => setFocusIndex(0)}>Start</Button>

      <Group justify="center">
        {testimonials.map(
          (_, index) =>
            index < MAX_TESTIMONIALS && (
              <OnboardingTour.FocusReveal
                key={`focus-reveal-${index}`}
                focused={focusIndex === index}
                transitionProps={{ duration: 0, exitDuration: 0 }}
                onBlur={() => setFocusIndex(-1)}
                focusedMode="zoom"
              >
                {/* Assuming Testimonials component is defined elsewhere */}
                <div key={`box-${index}`} testimonial={0}> {/* Placeholder for Testimonials component */}
                  <Group justify="center">
                    <Button
                      size="xs"
                      variant="gradient"
                      onClick={() => setFocusIndex(index + 1 < MAX_TESTIMONIALS ? index + 1 : 0)}
                    >
                      Next
                    </Button>
                  </Group>
                </div>
              </OnboardingTour.FocusReveal>
            )
        )}
      </Group>
      {focusIndex >= 0 && (
        <OnboardingTour.FocusReveal defaultFocused={true} withReveal={false}>
          <Paper withBorder shadow="sm" p={16} mt={32}>
            <Group>
              <Text>{descriptions[focusIndex]}</Text>
              <Button size="xs" onClick={() => setFocusIndex(-1)}>
                Stop
              </Button>
            </Group>
          </Paper>
        </OnboardingTour.FocusReveal>
      )}
    </Stack>
  );
}

```

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

### Custom Focus Mode with OnboardingTour.FocusReveal in React

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

Illustrates creating a custom focus mode using OnboardingTour.FocusReveal and applying custom styles via CSS modules. This example requires Mantine UI components and the useDisclosure hook. The `classes.custom` prop applies the custom styling.

```tsx
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Center, Divider, Group, Stack, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import classes from './CustomMode.module.css';

function Demo() {
  const [focused, { close, open }] = useDisclosure(false);

  return (
    <Stack justify="center" align="center">
      <Title order={4}>Custom Focused Mode Example</Title>

      <Center>
        <Button onClick={open}>Set the Focus to the below component</Button>
      </Center>

      <Divider my={100} label="Divider" />

      <Group justify="center">
        <OnboardingTour.FocusReveal focused={focused} onBlur={close} className={classes.custom}>
          <Testimonials testimonial={1} />
        </OnboardingTour.FocusReveal>
      </Group>
    </Stack>
  );
}
```

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

### Customize Tour Popover Content with Custom Component (TypeScript)

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This TypeScript code snippet shows how to use the `content` prop of the `OnboardingTour` component to display custom content within the tour's popovers. It imports necessary components from Mantine and the onboarding tour library, defines tour steps, and passes a custom content function to the tour. The example customizes popover props and includes example buttons that trigger the tour steps.

```typescript
import { OnboardingTour, type OnboardingTourStep } from '@gfazioli/mantine-onboarding-tour';
import { Button, Code, Divider, Stack, Text, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

/** Your custom popover content */
import { customPopoverContent } from './customPopoverContent';

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const onboardingSteps: OnboardingTourStep[] = [
    {
      id: 'step-1',
      title: 'Step-1',
      content: 'Description of the Step 1',
      image: 'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png',
    },
    {
      id: 'step-2',
      title: 'Step-2',
      content: 'Description of the Step 2',
      freeTrialBadge: (
        <Center>
          <Badge color="lime">Free trial available</Badge>
        </Center>
      ),
      image: 'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png',
    },
    {
      id: 'step-3',
      title: 'Step-3',
      content: 'Description of the Step 3',
      image: 'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png',
    },
  ];  

  /** Since we are using the FocusReveal component, here we can interact and set all its props. */
  const focusRevealProps: FocusRevealProps = {
    popoverProps: {
      arrowSize: 20,
      position: 'right',
      styles: {
        dropdown: {
          padding: 0,
        },
      },
    },
  };

  return (
    <OnboardingTour
      tour={onboardingSteps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      title={() => null}
      content={customPopoverContent}
      withStepper={false}
      withSkipButton={false}
      withPrevButton={false}
      withNextButton={false}
      focusRevealProps={focusRevealProps}
      maw={400}
    >
      <Stack justify="center" align="center">
        <Button size="md" radius={256} variant="gradient" onClick={open}>
          👉 Click here to Start the Tour 👈
        </Button>

        <Divider my={32} />

        <Stack w={200} gap={32}>
          <Button data-onboarding-tour-id="step-1">Title</Button>
          <Button data-onboarding-tour-id="step-2">Description</Button>
          <Button data-onboarding-tour-id="step-3">Content</Button>
        </Stack>
      </Stack>
    </OnboardingTour>
  );
}

```

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

### Mantine Onboarding Tour Focus Reveal Group with Selectable Modes

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This example showcases the OnboardingTour.FocusReveal.Group component with a dynamic 'focusedMode' selected via a Mantine Select component. It also demonstrates setting 'defaultFocused' to false for specific reveal elements. The code imports necessary components from '@mantine/core' and '@gfazioli/mantine-onboarding-tour'.

```tsx
import { useState } from 'react';
import { FocusRevealFocusedMode, focusRevealModes } from '@gfazioli/mantine-focus-reveal';
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Center, Code, Divider, Group, Select, Stack, Text, Title } from '@mantine/core';

function Demo() {
  const [focusedMode, setFocusedMode] = useState<string | null>('scale');

  return (
    <>
      <Stack justify="center" align="center">
        <Title order={4}>Group Example</Title>

        <Group justify="left">
          <Select
            data={[
              'border',
              'elastic',
              'glow',
              'glow-blue',
              'glow-green',
              'glow-red',
              'none',
              'pulse',
              'rotate',
              'scale',
              'shake',
              'zoom',
            ]}
            value={focusedMode}
            onChange={setFocusedMode}
            label="Focused mode"
          />
        </Group>

        <Center>
          <Text>
            The <Code>defaultFocused</Code> props is set to <Code>true</Code>, card below is focused
            by default
          </Text>
        </Center>

        <Divider
          mb={600}
          label={
            <>
              <Text fz={48}>👇</Text>
              <Text>Scroll down</Text>
            </>
          }
        />
      </Stack>

      <OnboardingTour.FocusReveal.Group focusedMode={focusedMode as FocusRevealFocusedMode}>
        <Stack>
          <Center>
            <OnboardingTour.FocusReveal>
              <Testimonials testimonial={0} />
            </OnboardingTour.FocusReveal>
          </Center>

          <Divider my={100} />

          <Center>
            <OnboardingTour.FocusReveal defaultFocused={false}>
              <Testimonials testimonial={1} />
            </OnboardingTour.FocusReveal>
          </Center>

          <Divider my={100} />

          <Center>
            <OnboardingTour.FocusReveal>
              <Testimonials testimonial={2} />
            </OnboardingTour.FocusReveal>
          </Center>

          <Divider my={100} />
        </Stack>
      </OnboardingTour.FocusReveal.Group>
    </>
  );
}

```

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

### Mantine Onboarding Tour Focus Reveal Group with Scale Mode

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This example demonstrates the OnboardingTour.FocusReveal.Group component with the 'scale' focusedMode. It sets the defaultFocused prop to true, making the first card focused by default. Users can scroll down to reveal more content.

```tsx
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Center, Code, Divider, Stack, Text, Title } from '@mantine/core';

function Demo() {
  return (
    <>
      <Stack justify="center" align="center">
        <Title order={4}>Group Example</Title>

        <Center>
          <Text>
            The <Code>defaultFocused</Code> props is set to <Code>true</Code>, card below is focused
            by default
          </Text>
        </Center>

        <Divider mb={600}
          label={
            <>
              <Text fz={48}>👇</Text>
              <Text>Scroll down</Text>
            </>
          }
        />
      </Stack>

      <OnboardingTour.FocusReveal.Group focusedMode="scale">
        <Stack>
          <Center>
            <OnboardingTour.FocusReveal>
              <Testimonials testimonial={0} />
            </OnboardingTour.FocusReveal>
          </Center>

          <Divider my={200} />

          <Center>
            <OnboardingTour.FocusReveal>
              <Testimonials testimonial={1} />
            </OnboardingTour.FocusReveal>
          </Center>

          <Divider my={200} />

          <Center>
            <OnboardingTour.FocusReveal>
              <Testimonials testimonial={2} />
            </OnboardingTour.FocusReveal>
          </Center>

          <Divider my={200} />
        </Stack>
      </OnboardingTour.FocusReveal.Group>
    </>
  );
}

```

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

### FocusReveal with Customized Popover Props - React

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

Shows how to customize the appearance and behavior of the popover in the FocusReveal component using `popoverProps`. This example sets the popover position to 'top', hides the arrow, applies a 'md' shadow, and sets a radius of 256.

```tsx
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Center, Divider, Stack, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [focused, { close, open }] = useDisclosure(false);

  return (
    <Stack justify="center" align="center">
      <Title order={4}>Popover example</Title>

      <Center>
        <Button onClick={open}>Reveal the Bottom Card</Button>
      </Center>

      <Divider my={200} label="Divider" />

      <Center>
        <OnboardingTour.FocusReveal
          focused={focused}
          onBlur={close}
          popoverContent={<h1>Hello, World!</h1>}
          popoverProps={{
            position: 'top',
            withArrow: false,
            shadow: 'md',
            radius: 256,
          }}>
          <Testimonials testimonial={0} />
        </OnboardingTour.FocusReveal>
      </Center>
    </Stack>
  );
}
```

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

### Cycle FocusReveal Components with Keyboard Navigation - React

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

Implements a cycling feature for multiple FocusReveal components using keyboard arrow keys. Users can navigate through testimonials using 'ArrowRight' and 'ArrowLeft'. The component also includes a 'Start' button to initiate the cycle and a 'Next' button within each testimonial for manual progression.

```tsx
import { useState } from 'react';
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Group, Stack, Text, Title } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';

function Demo() {
  const [focusIndex, setFocusIndex] = useState(-1);
  const MAX_TESTIMONIALS = 3;

  useHotkeys([
    [
      'ArrowRight',
      () =>
        focusIndex >= 0 && setFocusIndex(focusIndex + 1 < MAX_TESTIMONIALS ? focusIndex + 1 : 0),
    ],
    [
      'ArrowLeft',
      () =>
        focusIndex >= 0 &&
        setFocusIndex(focusIndex - 1 >= 0 ? focusIndex - 1 : MAX_TESTIMONIALS - 1),
    ],
  ]);

  return (
    <Stack justify="center" align="center">
      <Title order={1}>Cycle Example</Title>
      <Text fs="italic">Use the arrow keys to cycle through the testimonials</Text>
      <Button onClick={() => setFocusIndex(0)}>Start</Button>

      <Group justify="center">
        {testimonials.map(
          (_, index) =>
            index < MAX_TESTIMONIALS && (
              <OnboardingTour.FocusReveal
                key={`focus-reveal-${index}`}
                focused={focusIndex === index}
                transitionProps={{ duration: 0, exitDuration: 0 }}
                onBlur={() => setFocusIndex(-1)}
                focusedMode="zoom">
                <Testimonials key={`box-${index}`} testimonial={0}>
                  <Group justify="center">
                    <Button
                      size="xs"
                      variant="gradient"
                      onClick={() => setFocusIndex(index + 1 < MAX_TESTIMONIALS ? index + 1 : 0)}>
                      Next
                    </Button>
                  </Group>
                </Testimonials>
              </OnboardingTour.FocusReveal>
            )
        )}
      </Group>
    </Stack>
  );
}
```

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

### Define Onboarding Tour Controller Interface (TypeScript)

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

The OnboardingTourController interface defines the current state and available actions for managing an onboarding tour. It provides access to the tour steps, current step, current index, and methods to control the tour flow like starting, ending, moving to the next or previous step, and setting the current step index.

```typescript
export type OnboardingTourController = Readonly <{
  /** List of tour steps */
  tour: OnboardingTourStep[];

  /** Current step */
  currentStep: OnboardingTourStep | undefined;

  /** Current step index of the tour. Zero-based index */
  currentStepIndex: number | undefined;

  /** ID of the selected tour */
  selectedStepId: string | undefined;

  /** Set the current index */
  setCurrentStepIndex: (index: number) => void;

  /** Start the tour */
  startTour: () => void;

  /** End the tour */
  endTour: () => void;

  /** Go to the next tour */
  nextStep: () => void;

  /** Go to the previous tour */
  prevStep: () => void;

  /** Options of the tour */
  options: OnboardingTourOptions;
}>;

```

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

### Customize Mantine Onboarding Tour Stepper with Rating Component

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This TypeScript code defines an example of using the `stepper` prop in the `OnboardingTour` component. It replaces the default stepper with a Mantine `Rating` component, allowing users to navigate tour steps by selecting a rating value. Dependencies include Mantine core components and hooks, as well as `@gfazioli/mantine-onboarding-tour`.

```typescript
import { FocusRevealProps } from '@gfazioli/mantine-focus-reveal';
import {
  OnboardingTour,
  OnboardingTourController,
  type OnboardingTourStep,
} from '@gfazioli/mantine-onboarding-tour';
import { Badge, Button, Center, Divider, Group, Rating, Stack } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const focusRevealProps: FocusRevealProps = {
    popoverProps: {
      position: 'top',
    },
  };

  const onboardingSteps: OnboardingTourStep[] = [
    {
      id: 'step-1',
      title: 'Step-1',
      content: 'Content of the Step 1',
    },
    {
      id: 'step-2',
      title: 'Step-2',
      content: 'Content of the Step 2',
      freeTrialBadge: (
        <Center>
          <Badge color="lime">Free trial available</Badge>
        </Center>
      ),
    },
    {
      id: 'step-3',
      title: 'Step-3',
      content: 'Content of the Step 3',
    },
  ];

  const customStepper = (tourController: OnboardingTourController) => (
    <Center>
      <Rating
        count={tourController.tour.length}
        value={(tourController.currentStepIndex ?? 0) + 1}
        onChange={(value) => tourController.setCurrentStepIndex(value - 1)}
      />
    </Center>
  );

  return (
    <OnboardingTour
      tour={onboardingSteps}
      focusRevealProps={focusRevealProps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      stepper={customStepper}
      maw={400}
    >
      <Stack justify="center" align="center">
        <Button size="md" radius={256} variant="gradient" onClick={open}>
          👉 Click here to Start the Tour 👈
        </Button>

        <Divider my={32} />

        <Group>
          <Button data-onboarding-tour-id="step-1" onClick={open}>
            Step 1
          </Button>
          <Button data-onboarding-tour-id="step-2" onClick={open}>
            Step 2
          </Button>
          <Button data-onboarding-tour-id="step-3" onClick={open}>
            Step 3
          </Button>
        </Group>
      </Stack>
    </OnboardingTour>
  );
}

```

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

### Override Step Content with OnboardingTour Component Props

Source: https://gfazioli.github.io/mantine-onboarding-tour/index

This example demonstrates how to override the `title`, `content`, `header`, and `footer` of individual tour steps by using the props of the `OnboardingTour` component itself. When these props are used, the `OnboardingTourStep` definitions for these properties are ignored. The `onboardingSteps` array still defines unique content for each step, but a global title is applied.

```typescript
import { OnboardingTour } from '@gfazioli/mantine-onboarding-tour';
import { Button, Code, Divider, Stack, Text, Title, Badge } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [started, { open, close }] = useDisclosure(false);

  const onboardingSteps: OnboardingTourStep[] = [
    {
      id: 'step-1',
      title: 'Step-1',
      content: 'Content of the Step 1',
    },
    {
      id: 'step-2',
      title: 'Step-2',
      content: 'Content of the Step 2',
      myCustomInfo: <Badge>Free trial available</Badge>,
    },
    {
      id: 'step-3',
      title: 'Step-3',
      content: 'Content of the Step 3',
    },
  ];

  return (
    <OnboardingTour
      tour={onboardingSteps}
      started={started}
      onOnboardingTourEnd={close}
      onOnboardingTourClose={close}
      title="The Title for all steps"
      maw={400}
    >
      <Stack justify="center" align="center">
        <Button size="md" radius={256} variant="gradient" onClick={open}>
          👉 Click here to Start the Tour 👈
        </Button>

        <Divider my={32} />

        <Stack w={200} gap={32}>
          <Button data-onboarding-tour-id="step-1" onClick={open}>
            Step 1
          </Button>
          <Button data-onboarding-tour-id="step-2" onClick={open}>
            Step 2
          </Button>
          <Button data-onboarding-tour-id="step-3" onClick={open}>
            Step 3
          </Button>
        </Stack>
      </Stack>
    </OnboardingTour>
  );
}

```