npm package: @licuido-ui/ui_stepper
Description: The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where seque
Latest version: 0.0.2

# Stepper

The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequential navigation is required.

### Author

- @author Akila Kalaiyarasan <akila@crayond.co>

## Link

[Story Book Link stepper](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_stepper
```

## Import component

```jsx
import { Stepper } from '@licuido-ui/ui_stepper';
```

## Usage

```jsx
<Stepper steps={[]} buttons={[]} />
```
## Image

![alt text](./stepper.png)

## Sample Code

```jsx
<Stepper
    steps={[
      {
        label: 'akila',
        icon: <StepperIcon />,
        status: 'completed',
        content: 'fefyguyrgf',
        color: 'green',
        completeBadge: <CheckMark />,
        stepperStyle: {
          stepWrapStyle: {},
          stepActiveStyle: {},
          stepInActiveStyle: {},
          iconCompletedStyle: {},
          iconActiveStyle: {},
          iconInActiveStyle: {},
          anchorOrigin: {
            vertical: 'top',
            horizontal: 'right',
          },
          labelStyle: {},
          statusStyle: {},
          textAreaStyle: {},
        },
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        color: 'green',
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        color: 'green',
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        color: 'green',
      },
    ]}
    styles={{
      buttonsContainer: {},
      btnStyle: { width: '30px' },
      rootStyle: {},
      contentStyle: {},
    }}
    buttons={[
      {
        label: 'Back',
        onClick: () => {
          console.log('jhchiuhiuhidc');
        },
      },
      {
        label: 'Next',
        disabled: false,
        onClick: () => {
          console.log('jhcdc');
        },
      },
      {
        label: 'Reset',
        disabled: false,
        onClick: () => {
          console.log('jhcdc');
        },
      },
    ]}
    activeStep={1}
  />
```

## Props

| Name       | Description                                                                                                                                   | Default | Control               |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- |
| stepperId  | string                                                                                                                                        | string  | string                |
| steps      | StepData[]                                                                                                                                    | []      | [RAW](#) {...} 7 keys |
| styles     | { buttonsContainer?: SxProps<{}>; btnStyle?: SxProps<{}>; rootStyle?: SxProps<{}>; contentStyle?: SxProps<{}>; stepperParent?: SxProps<{}>; } | { }     | [RAW](#) {...} 4 keys |
| buttons    | ButtonProps[]                                                                                                                                 | []      | [RAW](#) {...} 3 keys |
| activeStep | number                                                                                                                                        | 0       | [input](#)            |
| className  | string                                                                                                                                        | -       | [button](#)           |
| sx         | SxProps<Theme>                                                                                                                                | -       | [button](#)           |
| resetBtn   | ButtonProps[]                                                                                                                                 | -       | [button](#)           |