### Run Development Server

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/README.md

Commands to start the Next.js development server using either npm or yarn.

```bash
npm run dev
# or
yarn dev
```

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

### Install Headless Stepper

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/README.md

Instructions for installing the headless-stepper library using npm, yarn, or pnpm package managers.

```bash
npm install headless-stepper
# or using yarn
yarn add headless-stepper
# or using pnpm
pnpm install headless-stepper
```

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

### Next.js API Route Example

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/README.md

An example of an API route in a Next.js application, typically located in the `pages/api` directory.

```typescript
pages/api/hello.ts
```

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

### Install Headless Stepper

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/packages/headless-stepper/README.md

Instructions for installing the headless-stepper library using npm, yarn, or pnpm package managers.

```bash
npm install headless-stepper
# or using yarn
yarn add headless-stepper
# or using pnpm
pnpm install headless-stepper
```

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

### Install Headless Stepper

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/getting-started/installation.mdx

Install the headless-stepper package using your preferred package manager (npm, yarn, or pnpm). This package is compatible with React 16.8.0 and higher.

```bash
npm install headless-stepper
```

```bash
yarn add headless-stepper
```

```bash
pnpm add headless-stepper
```

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

### Development Server and Testing

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/packages/headless-stepper/README.md

Commands for starting the development server and running unit tests for the headless-stepper project using Nx and Vitest.

```bash
npm run dev
nx test headless-stepper
```

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

### Development Server and Testing

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/README.md

Commands for starting the development server and running unit tests for the headless-stepper project using Nx and Vitest.

```bash
npm run dev
nx test headless-stepper
```

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

### Mantine Stepper Integration Example

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/examples/stepper-component.mdx

This snippet shows how to import and use a Stepper component that is styled and potentially extended using Mantine UI. It highlights the integration of custom components within a React application context.

```jsx
import ExampleComponentMantine from '../../components/examples/StepperComponentMantine';

# Example using the Stepper component + Mantine

<ExampleComponentMantine />
```

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

### Using Stepper and Step Components

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/README.md

Example of using the `Stepper` and `Step` components from the `headless-stepper` library to build a stepper UI in React.

```tsx
import { Stepper, Step } from 'headless-stepper/components';

const MyAwesomeStepper = () => {
  return (
    <Stepper currentStep={0}>
      <Step label="Step 1">Step 1 content</Step>

      <Step label="Step 2">Step 2 content</Step>

      <Step label="Step 3">Step 3 content</Step>
    </Stepper>
  );
};

export default MyAwesomeStepper;
```

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

### Build Stepper UI

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/getting-started/using.mdx

Provides a React JSX example for rendering a stepper component using the props returned by the `useStepper` hook, including navigation buttons and progress indicators.

```tsx
return (
  <div>
    <div>
      <nav style={{ display: 'flex' }} {...stepperProps}>
        {stepsProps?.map((step, index) => (
          <ol
            key={index}
            style={{
              opacity: steps[index].disabled ? 0.6 : 1,
              fontWeight: state.currentStep === index ? 'bold' : 'unset',
            }}
          >
            <a {...step}>{steps[index].label}</a>
          </ol>
        ))}
      </nav>
    </div>
    <p>Current step: {state.currentStep}</p>
    <button onClick={prevStep} disabled={!state.hasPreviousStep}>
      Prev
    </button>
    <button onClick={nextStep}>Next</button>
    <div {...progressProps} />
  </div>
);
```

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

### Using Stepper and Step Components

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/packages/headless-stepper/README.md

Example of using the `Stepper` and `Step` components from the `headless-stepper` library to build a stepper UI in React.

```tsx
import { Stepper, Step } from 'headless-stepper/components';

const MyAwesomeStepper = () => {
  return (
    <Stepper currentStep={0}>
      <Step label="Step 1">Step 1 content</Step>

      <Step label="Step 2">Step 2 content</Step>

      <Step label="Step 3">Step 3 content</Step>
    </Stepper>
  );
};

export default MyAwesomeStepper;
```

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

### Using the useStepper Hook

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/README.md

Example demonstrating how to use the `useStepper` hook from `headless-stepper` to manage stepper state and create a custom stepper component in React.

```typescript
import React from 'react';
import { useStepper } from 'headless-stepper';

export interface HeadlessStepperProps {}

export function HeadlessStepper(props: HeadlessStepperProps) {
  const steps = React.useMemo(
    () => [
      {
        label: 'Step 1',
      },
      { label: 'Step 2' },
      { label: 'Step 3' },
      { label: 'Step 4', disabled: true },
      { label: 'Step 5' },
      { label: 'Step 6' },
    ],
    []
  );
  const { state, nextStep, prevStep, progressProps, stepsProps } = useStepper({
    steps,
  });
  return (
    <div className={styles['container']}>
      <div>
        <nav style={{ display: 'flex' }}>
          {stepsProps?.map((step, index) => (
            <ol key={index}>
              <a {...step}>{steps[index].label}</a>
            </ol>
          ))}
        </nav>
      </div>
      <p>Current step: {state.currentStep}</p>
      <button
        className="py-4 px-3 bg-blue-300"
        onClick={prevStep}
        disabled={!state.hasPreviousStep}
      >
        Prev
      </button>
      <button className="py-4 px-3 bg-blue-300" onClick={nextStep}>
        Next
      </button>
      <div className="bg-gray-400 w-100% h-1/2" {...progressProps} />
    </div>
  );
}

export default HeadlessStepper;
```

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

### Using the useStepper Hook

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/packages/headless-stepper/README.md

Example demonstrating how to use the `useStepper` hook from `headless-stepper` to manage stepper state and create a custom stepper component in React.

```typescript
import React from 'react';
import { useStepper } from 'headless-stepper';

export interface HeadlessStepperProps {}

export function HeadlessStepper(props: HeadlessStepperProps) {
  const steps = React.useMemo(
    () => [
      {
        label: 'Step 1',
      },
      { label: 'Step 2' },
      { label: 'Step 3' },
      { label: 'Step 4', disabled: true },
      { label: 'Step 5' },
      { label: 'Step 6' },
    ],
    []
  );
  const { state, nextStep, prevStep, progressProps, stepsProps } = useStepper({
    steps,
  });
  return (
    <div className={styles['container']}>
      <div>
        <nav style={{ display: 'flex' }}>
          {stepsProps?.map((step, index) => (
            <ol key={index}>
              <a {...step}>{steps[index].label}</a>
            </ol>
          ))}
        </nav>
      </div>
      <p>Current step: {state.currentStep}</p>
      <button
        className="py-4 px-3 bg-blue-300"
        onClick={prevStep}
        disabled={!state.hasPreviousStep}
      >
        Prev
      </button>
      <button className="py-4 px-3 bg-blue-300" onClick={nextStep}>
        Next
      </button>
      <div className="bg-gray-400 w-100% h-1/2" {...progressProps} />
    </div>
  );
}

export default HeadlessStepper;
```

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

### Initialize useStepper Hook

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/getting-started/using.mdx

Illustrates two ways to initialize the `useStepper` hook: creating an instance or destructuring its returned properties.

```tsx
const stepperInstance = useStepper({ steps });
```

```tsx
const { state, nextStep, prevStep, progressProps, stepsProps, stepperProps } =
  useStepper({ steps });
```

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

### Basic Stepper Implementation

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/getting-started/using-stepper.mdx

Demonstrates the basic usage of the Stepper and Step components to create a simple 3-step stepper. The Stepper component wraps the useStepper hook and accepts an 'as' prop for custom rendering.

```jsx
import { Stepper, Step } from 'headless-stepper/components';

const MyAwesomeStepper = () => {
  return (
    <Stepper currentStep={0}>
      <Step label="Step 1">Step 1 content</Step>

      <Step label="Step 2">Step 2 content</Step>

      <Step label="Step 3">Step 3 content</Step>
    </Stepper>
  );
};

export default MyAwesomeStepper;
```

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

### Import useStepper Hook

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/getting-started/using.mdx

Demonstrates how to import the `useStepper` hook from the 'headless-stepper' library.

```tsx
import { useStepper } from 'headless-stepper';
```

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

### Custom Stepper with Mantine UI and 'as' Prop

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/getting-started/using-stepper.mdx

Illustrates advanced customization of the Stepper and Step components using the 'as' prop with Mantine UI components (Group and Button). This allows for flexible styling and integration with UI libraries.

```jsx
import { Stepper, Step } from 'headless-stepper/components';
import { MantineProvider, Button, Group, Container, Box } from '@mantine/core';

const MyAwesomeStepper = () => {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Container mt="lg">
        <Stepper as={Group} currentStep={0} className="example">
          <Step as={Button} label="Step 1">
            <Box>Step 1 content</Box>
          </Step>

          <Step as={Button} label="Step 2" disabled>
            Step 2 content
          </Step>

          <Step as={Button} label="Step 3">
            Step 3 content
          </Step>
        </Stepper>
      </Container>
    </MantineProvider>
  );
};

export default MyAwesomeStepper;
```

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

### useStepper() Hook API

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/api-reference/useStepper.mdx

Documentation for the `useStepper` hook, including its input props (`StepperProps`) and the structure of its returned values (`UseStepper`). It also details the available methods for controlling the stepper's state.

```APIDOC
useStepper(StepperProps): UseStepper

StepperProps:
  steps: Steps[] - Steps that compound the stepper.
  currentStep: number - Current step of the stepper. (Optional, Default: 0)
  orientation: StepperOrientation - Stepper orientation (used only for the ARIA-ORIENTATION). (Optional, Default: horizontal)

UseStepper:
  stepperProps: React.HTMLAttributes<HTMLElement> - Props to use into any React element to represent the stepper.
  stepsProps: React.HTMLAttributes<HTMLElement>[] - Props to use into any React Element to represent the steps.
  progressProps: React.HTMLAttributes<HTMLElement> - props to use into a HTMLElement to represents a progress bar.
  state: StepperState - the stepper state with current step, disabled steps and other props.
  nextStep(): () => void - Trigger the next step.
  prevStep(): () => void - Trigger the previous step.
  setStep(step: number): () => void - Go to a step directly.
```

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

### Define Stepper Steps

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/getting-started/using.mdx

Shows how to define an array of step objects, including labels and optional disabled states, using `React.useMemo` for optimization.

```tsx
const steps = React.useMemo(
  () => [
    {
      label: 'Step 1',
    },
    { label: 'Step 2' },
    { label: 'Step 3' },
    { label: 'Step 4', disabled: true },
    { label: 'Step 5' },
    { label: 'Step 6' },
  ],
  []
);
```

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

### Import Features Component

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/index.mdx

Imports the Features component from a local '../components/Features' path, likely used for displaying library features.

```jsx
import Features from '../components/Features';
```

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

### StepComponentProps API

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/api-reference/step.mdx

Defines the properties for the Step component, extending the Steps type alias. It includes parameters for content, rendering element, label, disabled state, and validity.

```APIDOC
StepComponentProps:
  children: React.ReactNode | The content of the component.
  as: React.ElementType | The HTML tag or React component to render as. (Default: button)
  label: string | Label to display. Ex.: Step 04 (Required)
  disabled: boolean | Enable/disable step.
  isValid: boolean | Check if a step is valid.
```

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

### Stepper Component Props

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/api-reference/stepper.mdx

Defines the properties for the Stepper component. It accepts children as Step components, an optional currentStep number, an orientation for ARIA attributes, and an optional 'as' prop to define the rendered HTML element.

```APIDOC
StepperComponentProps:
  children: React.ReactNode - The steps to be render. It should be a `Step` component.
  currentStep: number - Current step of the stepper. (Optional, defaults to 0)
  orientation: StepperOrientation - Stepper orientation (used only for the `ARIA-ORIENTATION`). (Optional, defaults to horizontal)
  as: React.ElementType - The HTML tag or React component to render as. (Optional, defaults to nav)
```

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

### Stepper with Disabled Step

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/getting-started/using-stepper.mdx

Shows how to include a disabled step within the Stepper component. The Stepper component automatically handles the disabling logic for unreachable steps.

```jsx
import { Stepper, Step } from 'headless-stepper/components';

const MyAwesomeStepper = () => {
  return (
    <Stepper currentStep={0}>
      <Step label="Step 1">Step 1 content</Step>

      <Step label="Step 2" disabled>
        Step 2 content
      </Step>

      <Step label="Step 3">Step 3 content</Step>
    </Stepper>
  );
};

export default MyAwesomeStepper;
```

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

### Stepper Related Types

Source: https://github.com/raisiqueira/headless-stepper-monorepo/blob/main/docs/pages/api-reference/useStepper.mdx

Defines the auxiliary types used within the `useStepper` hook, including `Steps` for defining individual steps, `StepperState` for the stepper's current status, and `StepperOrientation` for layout.

```APIDOC
Steps:
  label: string - Label to display. Ex.: Step 04
  disabled: boolean - Enable/disable step. (Optional)
  isValid: boolean - Check if a step is valid. (Optional)

StepperState:
  currentStep: number - The current step selected
  progressId: string - Unique ID to the progress bar.
  labelId: string - These ID you can use with a span element to represent the progress bar label.
  hasPreviousStep: boolean - Check if has previuos step.
  hasNextStep: boolean - Check if has next step.
  totalSteps: number - Returns the total steps..

StepperOrientation:
  This type represents the orientation of the stepper and is only used to tell to the ARIA-ORIENTATION value.
  Can be horizontal or vertical.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.