# Stepper Documentation

## Installation

```bash
jsrepo add stepper
```

## Components

### Root

The root component of the stepper. Manages the current step state.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| step | number | - | false | true | The current active step number (1-indexed). |
| children | Snippet | - | false | false | The content of the stepper (usually Stepper.Nav). |

### Nav

The navigation container for the stepper. Controls the orientation of the stepper.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| orientation | "horizontal" | "vertical" | horizontal | false | false | The orientation of the stepper navigation. |

### Item

A single step item in the stepper. Each item represents one step in the process.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| id | string | - | false | false | A unique identifier for the step. Auto-generated if not provided. |

### Trigger

The clickable trigger button for a step. Allows users to navigate to a specific step.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLButtonElement | null | false | true | A reference to the button element. |
| onclick | (e: MouseEvent) => void | - | false | false | An optional click handler that runs in addition to the default step selection behavior. |
| onkeydown | (e: KeyboardEvent) => void | - | false | false | An optional keyboard handler that runs in addition to the default keyboard navigation. |
| children | Snippet | - | false | false | The content of the trigger (usually Stepper.Indicator, Stepper.Title, Stepper.Description). |

### Indicator

The visual indicator for a step (usually displays the step number or an icon).

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| children | Snippet | - | false | false | The content of the indicator (usually a number or icon). |

### Separator

The visual separator between steps. Automatically hidden for the last step.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| children | Snippet | - | false | false | Optional content for the separator. |

### Title

The title text for a step.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| children | Snippet | - | false | false | The title content. |

### Description

The description text for a step.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| children | Snippet | - | false | false | The description content. |

### Next

A button component that navigates to the next step. Automatically disabled when on the last step.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| disabled | boolean | false | false | false | Whether the button is disabled. |
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | default | false | false | The visual style of the button. |
| size | "default" | "sm" | "lg" | "icon" | default | false | false | The size of the button. |
| child | Snippet<[{ props: Record<string, unknown> }]> | - | false | false | A custom component to render instead of the default Button. Receives merged props. |
| children | Snippet | - | false | false | The content of the button. |

### Previous

A button component that navigates to the previous step. Automatically disabled when on the first step.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| disabled | boolean | false | false | false | Whether the button is disabled. |
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | outline | false | false | The visual style of the button. |
| size | "default" | "sm" | "lg" | "icon" | default | false | false | The size of the button. |
| child | Snippet<[{ props: Record<string, unknown> }]> | - | false | false | A custom component to render instead of the default Button. Receives merged props. |
| children | Snippet | - | false | false | The content of the button. |