### Horizontal Step Example in KotStep

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Demonstrates creating a horizontal stepper using KotStep. This example includes steps with titles, icons, custom content, and labels, along with horizontal scrolling.

```kotlin
@Composable
fun HorizontalStepExample() {

    val kotStepStyle = KotStepStyle(
        ...
        stepLayoutStyle = StepLayoutStyle.Horizontal
        ...
    )

    // Note: `horizontalScroll` is used in order to allow scrolling. Use it when the steps are not visible.
    KotStep(
        modifier = Modifier.horizontalScroll(rememberScrollState()),
        currentStep = { 0f },
        style = kotStepStyle
    ) {
        step(title = "1")
        step(icon = Icons.Default.Star)
        step(
            content = {
                Image(
                    painter = painterResource(R.drawable.kotlin),
                    contentDescription = null,
                    modifier = Modifier.size(16.dp)
                )
            },
            label = {
                Box() {
                    Text("Hello world.")
                }
            },
            isCollapsible = true
        )
        step()
    }
}
```

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

### Vertical Step Example in KotStep

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Illustrates creating a vertical stepper using KotStep. This example shows how to add steps with titles, icons, custom content, and labels, while enabling vertical scrolling.

```kotlin
@Composable
fun VerticalStepExample() {
    KotStep(
        modifier = Modifier.verticalScroll(rememberScrollState()),
        currentStep = { 0f },
        style = getKotStepStyle()
    ) {
        step(title = "1")
        step(icon = Icons.Default.Star)
        step(
            content = {
                Image(
                    painter = painterResource(R.drawable.kotlin),
                    contentDescription = null,
                    modifier = Modifier.size(16.dp)
                )
            },
            label = {
                Box() {
                    Text("Hello world.")
                }
            },
            isCollapsible = true
        )
        step()
    }
}
```

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

### Custom KotStep Style Example

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Provides an example of creating a custom KotStepStyle to modify line and progress colors, as well as line and progress types (e.g., dashed, dotted). This allows for detailed visual customization of the stepper.

```kotlin
val customStyle = KotStepStyle(
    lineColor = Color.Blue,
    progressColor = Color.Red,
    lineType = LineType.Dashed(dashLength = 8.dp, gapLength = 8.dp),
    progressType = LineType.Dotted(gapLength = 4.dp)
)

KotStep(
    modifier = Modifier.fillMaxWidth(),
    currentStep = { 0f },
    style = customStyle
) {
    step(title = "Custom Step")
}
```

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

### Vertical Step Example with Custom Style

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Shows a vertical stepper implementation with a custom KotStepStyle, specifically setting the step layout to vertical and enabling vertical scrolling. This allows for fine-grained control over the stepper's appearance and behavior.

```kotlin
@Composable
fun VerticalStepExample() {

    val kotStepStyle = KotStepStyle(
        ...
        stepLayoutStyle = StepLayoutStyle.Vertical
        ...
    )

    // Note: `verticalScroll` is used in order to allow scrolling. Use it when the steps are not visible.
    KotStep(
        modifier = Modifier.verticalScroll(rememberScrollState()),
        currentStep = { 0f },
        style = kotStepStyle
    ) {
        step(title = "1")
        step(icon = Icons.Default.Star)
        step(
            content = {
                Image(
                    painter = painterResource(R.drawable.kotlin),
                    contentDescription = null,
                    modifier = Modifier.size(16.dp)
                )
            },
            label = {
                Box() {
                    Text("Hello world.")
                }
            },
            isCollapsible = true
        )
        step()
    }
}
```

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

### Custom Step Styles for KotStep

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Define custom StepStyle instances for 'onTodo', 'onCurrent', and 'onDone' states to control step appearance. This example shows how to set colors, sizes, shapes, text styles, and borders.

```kotlin
@OptIn(ExperimentalKotStep::class)
val customStepStyles = StepStyles(
    onTodo = StepStyle(
        stepColor = Color(0xFFE0E0E0),
        stepSize = 40.dp,
        stepShape = RoundedCornerShape(8.dp),
        textStyle = TextStyle(color = Color.DarkGray, fontSize = 14.sp),
        borderStyle = BorderStyle(width = 1.dp, color = Color.Gray)
    ),
    onCurrent = StepStyle(
        stepColor = Color(0xFF6200EE),
        stepSize = 44.dp,
        stepShape = CircleShape,
        textStyle = TextStyle(color = Color.White, fontSize = 14.sp),
        borderStyle = BorderStyle(width = 2.dp, color = Color(0xFF3700B3))
    ),
    onDone = StepStyle(
        stepColor = Color(0xFF03DAC5),
        stepSize = 40.dp,
        stepShape = CircleShape,
        textStyle = TextStyle(color = Color.Black, fontSize = 14.sp),
        iconStyle = IconStyle(iconTint = Color.White, iconSize = 20.dp)
    )
)

@OptIn(ExperimentalKotStep::class)
@Composable
fun CustomStyledStepper() {
    KotStep(
        currentStep = { 1f },
        style = KotStepStyle(stepStyle = customStepStyles)
    ) {
        step(title = "A")
        step(title = "B")
        step(title = "C")
    }
}
```

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

### CheckoutStepper Composable

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

A vertical stepper example using the KotStep composable. It demonstrates how to manage the current step state and navigate between steps using buttons.

```kotlin
@OptIn(ExperimentalKotStep::class)
@Composable
fun CheckoutStepper() {
    var currentStep by remember { mutableFloatStateOf(0f) }

    Column {
        KotStep(
            modifier = Modifier
                .fillMaxWidth()
                .verticalScroll(rememberScrollState()),
            currentStep = { currentStep },
            style = KotStepStyle(
                stepLayoutStyle = StepLayoutStyle.Vertical,
                showCheckMarkOnDone = true,
                ignoreCurrentState = false
            )
        ) {
            step(title = "Cart",    onClick = { currentStep = 0f })
            step(title = "Address", onClick = { currentStep = 1f })
            step(title = "Payment", onClick = { currentStep = 2f })
            step(title = "Review",  onClick = { currentStep = 3f })
        }

        Button(onClick = { if (currentStep < 3f) currentStep++ }) { Text("Next") }
        Button(onClick = { if (currentStep > 0f) currentStep-- }) { Text("Back") }
    }
}
```

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

### Step with Title, Label, and Callbacks

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Add a step to KotStep using the step() composable. This example shows how to provide a title, an optional label composable, onClick and onDone callbacks, and enable collapsible behavior.

```kotlin
@OptIn(ExperimentalKotStep::class)
@Composable
fun NumberedSteps() {
    var step by remember { mutableFloatStateOf(0f) }
    KotStep(currentStep = { step }) {
        step(
            title = "1",
            onClick = { Log.d("KotStep", "Step 1 clicked") },
            onDone = { Log.d("KotStep", "Step 1 done") },
            label = { Text("Personal Info", style = MaterialTheme.typography.bodySmall) },
            isCollapsible = true
        )
        step(
            title = "2",
            label = { Text("Shipping Address") }
        )
        step(
            title = "3",
            label = { Text("Payment") }
        )
    }
}
```

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

### Custom Line Styles for KotStep

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Define custom LineStyle instances for 'onTodo', 'onCurrent', and 'onDone' states to control the appearance of connecting lines. This example demonstrates setting colors, thickness, length, and line types (Solid, Dashed).

```kotlin
@OptIn(ExperimentalKotStep::class)
val customLineStyles = LineStyles(
    onTodo = LineStyle(
        lineColor = Color.LightGray,
        progressColor = Color.LightGray,
        lineLength = 60.dp,
        lineThickness = 3.dp
    ),
    onCurrent = LineStyle(
        lineColor = Color.LightGray,
        progressColor = Color(0xFF6200EE),
        lineLength = 60.dp,
        lineThickness = 3.dp,
        lineType = LineType.Dashed(dashLength = 8.dp, gapLength = 6.dp),
        progressType = LineType.Dashed(dashLength = 8.dp, gapLength = 6.dp),
        lineStrokeCap = StrokeCap.Round,
        progressStrokeCap = StrokeCap.Round
    ),
    onDone = LineStyle(
        lineColor = Color(0xFF03DAC5),
        progressColor = Color(0xFF03DAC5),
        lineLength = 60.dp,
        lineThickness = 3.dp,
        lineType = LineType.Solid,
        progressType = LineType.Solid
    )
)

@OptIn(ExperimentalKotStep::class)
@Composable
fun DashedLineStepper() {
    KotStep(
        currentStep = { 1f },
        style = KotStepStyle(lineStyle = customLineStyles)
    ) {
        step(title = "1")
        step(title = "2")
        step(title = "3")
    }
}
```

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

### Add Jitpack Repository (Kotlin)

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Configure your root build.gradle.kts file to include the Jitpack repository for dependency resolution.

```kotlin
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}
```

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

### Build Fully Customized KotStepStyle

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

This function demonstrates how to combine all customization options for `KotStepStyle`, including layout, step appearance, and line styling, to create a unique stepper UI.

```kotlin
@OptIn(ExperimentalKotStep::class)
fun buildFullCustomStyle(): KotStepStyle = KotStepStyle(
    stepLayoutStyle = StepLayoutStyle.Vertical,
    showCheckMarkOnDone = true,
    ignoreCurrentState = false,
    stepStyle = StepStyles.default().copy(
        onTodo = StepStyle.defaultTodo().copy(
            stepSize = 48.dp,
            stepColor = Color(0xFFF5F5F5),
            borderStyle = BorderStyle(width = 2.dp, color = Color.LightGray)
        ),
        onCurrent = StepStyle.defaultCurrent().copy(
            stepSize = 52.dp,
            stepColor = Color(0xFF6200EE),
            iconStyle = IconStyle(iconTint = Color.White, iconSize = 24.dp)
        ),
        onDone = StepStyle.defaultDone().copy(
            stepSize = 48.dp,
            stepColor = Color(0xFF00C853),
            borderStyle = BorderStyle(width = 0.dp, color = Color.Transparent)
        )
    ),
    lineStyle = LineStyles.default().copy(
        onTodo = LineStyle.defaultTodo().copy(
            lineThickness = 4.dp,
            lineLength = 80.dp,
            linePadding = PaddingValues(top = 4.dp, bottom = 4.dp)
        ),
        onCurrent = LineStyle.defaultCurrent().copy(
            lineThickness = 4.dp,
            lineLength = 80.dp,
            lineType = LineType.Dashed(dashLength = 12.dp, gapLength = 8.dp),
            progressType = LineType.Dashed(dashLength = 12.dp, gapLength = 8.dp),
            progressColor = Color(0xFF6200EE)
        ),
        onDone = LineStyle.defaultDone().copy(
            lineThickness = 4.dp,
            lineLength = 80.dp,
            lineType = LineType.Solid,
            progressColor = Color(0xFF00C853)
        )
    )
)

@OptIn(ExperimentalKotStep::class)
@Composable
fun FullyCustomizedStepper() {
    KotStep(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(rememberScrollState()),
        currentStep = { 1f },
        style = buildFullCustomStyle()
    ) {
        step(title = "Start",    label = { Text("Kick off") })
        step(title = "Progress", label = { Text("In flight") })
        step(title = "Done",     label = { Text("Complete") })
    }
}
```

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

### Add KotStep Dependency to build.gradle

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Add the JitPack repository to your root build.gradle file. Then, add the KotStep dependency to your app's build.gradle.kts or build.gradle file.

```gradle
allprojects {
	repositories {
		... 
	    maven { url 'https://jitpack.io' }
    }
}
```

```kotlin
dependencies {
    implementation("com.github.binayshaw7777:KotStep:$currentVersion")
}
```

```groovy
dependencies {
    implementation 'com.github.binayshaw7777:KotStep:$currentVersion'
}
```

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

### Add Jitpack Repository (Groovy)

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Configure your root build.gradle file to include the Jitpack repository for dependency resolution.

```gradle
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}
```

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

### Add Step with Custom Composable Content

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Demonstrates adding a step with custom composable content, utilizing default Step properties. This is useful when you need to embed specific UI elements within a step.

```kotlin
step(
    onClick = {
        // Do something
    },
    isCollapsible = true
)
```

```kotlin
step(
    onClick = {
        // Do something
    },
    label = {
        // Your Composable...
        Box() {
            Text("Hello world.")
        }
    },
    isCollapsible = true
)
```

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

### Customize KotStep Style

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Demonstrates how to create a fully customized KotStepStyle by modifying various layout, step, and line styles. This allows for fine-grained control over the visual appearance of the step indicator.

```kotlin
// Wrap this in a util function code gets messy.
val kotStepStyle = KotStepStyle(
    stepLayoutStyle = StepLayoutStyle.Vertical,
    showCheckMarkOnDone = false,
    ignoreCurrentState = false,
    stepStyle = StepStyles.default().copy(
        onTodo = StepStyle.defaultTodo().copy(
            stepSize = 50.dp,
            stepColor = Color.Gray,
            borderStyle = BorderStyle(width = 2.dp, color = Color.Red)
        ),
        onCurrent = StepStyle.defaultTodo().copy(
            stepSize = 60.dp,
            stepColor = Color.DarkGray,
            borderStyle = BorderStyle(width = 2.dp, color = Color.Gray)
        ),
        onDone = StepStyle.defaultTodo().copy(
            stepSize = 50.dp,
            stepColor = Color.Green,
            borderStyle = BorderStyle(width = 2.dp, color = Color.DarkGray)
        )
    ),
    lineStyle = LineStyles.default().copy(
        onTodo = LineStyle.defaultTodo().copy(
            lineThickness = 10.dp,
            lineLength = 100.dp,
            linePadding = PaddingValues(2.dp)
        ),
        onCurrent = LineStyle.defaultCurrent().copy(
            lineThickness = 4.dp,
            lineLength = 100.dp,
            linePadding = PaddingValues(2.dp),
            lineType = LineType.Dashed(dashLength = 20.dp, gapLength = 10.dp),
            progressType = LineType.Dashed(dashLength = 20.dp, gapLength = 10.dp)
        ),
        onDone = LineStyle.defaultDone().copy(
            lineThickness = 5.dp,
            lineLength = 100.dp,
            linePadding = PaddingValues(2.dp),
            lineType = LineType.Dotted(gapLength = 10.dp),
            progressType = LineType.Dotted(gapLength = 10.dp)
        )
    )
)

```

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

### StepStyles

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Encapsulates a set of StepStyles for different states of a step: todo, current, and done.

```APIDOC
## StepStyles

### Description
Encapsulates styles for step states (todo, current, done).

### Properties
- `onTodo` (StepStyle) - Style configuration for the 'todo' state of a step.
- `onCurrent` (StepStyle) - Style configuration for the 'current' state of a step.
- `onDone` (StepStyle) - Style configuration for the 'done' state of a step.

### Companion Method
- `default()`: Returns a `StepStyles` object with default styles for all three states (todo, current, done).
```

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

### Horizontal Stepper - Dashed Style

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Create a horizontal stepper with a dashed line connecting the steps. Specify the total steps and the current active step.

```kotlin
HorizontalStepper(
  style = dashed(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}
```

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

### LineStyles

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Encapsulates line styles for different states (todo, current, done). Provides a convenient way to manage distinct styles for each step state.

```APIDOC
## LineStyles

### Description
Encapsulates line styles for different states (todo, current, done). Provides a convenient way to manage distinct styles for each step state.

### Properties
- `onTodo` (LineStyle) - Style for "todo" state.
- `onCurrent` (LineStyle) - Style for current state.
- `onDone` (LineStyle) - Style for "done" state.

### Companion Method
- `default()`: Returns default styles.
```

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

### Horizontal Stepper - Numbered Style

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Implement a horizontal stepper with numbered steps. Configure the total number of steps and the currently active step.

```kotlin
HorizontalStepper(
  style = numberedHorizontal(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}
```

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

### IconStyle

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the style properties for an icon, including its tint color and size.

```APIDOC
## IconStyle

### Description
Defines an icon's style.

### Properties
- `iconTint` (Color) - Default: `Color.Unspecified` - The tint color of the icon.
- `iconSize` (Dp) - Default: `16.dp` - The size of the icon. Recommended to be less than or equal to 75% of `stepSize`.
```

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

### Add Step with Title

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Use this method to add a step with a simple text title. Optional callbacks and a label composable can be included.

```kotlin
step(
    title = "1",
    onClick = {
        // Do something
    },
    isCollapsible = true
)
```

```kotlin
step(
    title = "1",
    onClick = {
        // Do something
    },
    label = {
        // Your Composable...
        Box() {
            Text("Hello world.")
        }
    },
    isCollapsible = true
)
```

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

### Horizontal Stepper with Custom Style

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Demonstrates a horizontal stepper with a custom KotStepStyle. The style is configured to use horizontal layout, show checkmarks on done steps, and uses default step and line styles.

```kotlin
@OptIn(ExperimentalKotStep::class)
val myStyle = KotStepStyle(
    stepLayoutStyle = StepLayoutStyle.Horizontal, // Vertical (default) or Horizontal
    itemPadding = 12.dp,
    showCheckMarkOnDone = true,   // show ✓ on completed steps
    ignoreCurrentState = false,   // when true, no "Current" highlight — only Todo/Done
    stepStyle = StepStyles.default(),
    lineStyle = LineStyles.default()
)
```

```kotlin
@OptIn(ExperimentalKotStep::class)
@Composable
fun StyledHorizontalStepper() {
    KotStep(
        modifier = Modifier.horizontalScroll(rememberScrollState()),
        currentStep = { 1f },
        style = myStyle
    ) {
        step(icon = Icons.Default.Home)
        step(icon = Icons.Default.ShoppingCart)
        step(icon = Icons.Default.Done)
    }
}
```

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

### Define Styles for Step States

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Encapsulates the visual styles for different step states: todo, current, and done. Includes a default method to create a set of standard styles.

```kotlin
@ExperimentalKotStep
@Immutable
data class StepStyles(
    val onTodo: StepStyle,
    val onCurrent: StepStyle,
    val onDone: StepStyle
) {
    companion object {
        fun default() = StepStyles(
            onTodo = StepStyle.defaultTodo(),
            onCurrent = StepStyle.defaultCurrent(),
            onDone = StepStyle.defaultDone()
        )
    }
}
```

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

### Add Step with Custom Composable Content

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Incorporate custom composable content directly into a step. This provides maximum flexibility for step appearance and functionality. Labels and callbacks are supported.

```kotlin
step(
    content = {
        Image(
            painter = painterResource(R.drawable.kotlin),
            contentDescription = null,
            modifier = Modifier.size(16.dp)
        )
    },
    onClick = {
        // Do something
    },
    isCollapsible = true
)
```

```kotlin
step(
    content = {
        Image(
            painter = painterResource(R.drawable.kotlin),
            contentDescription = null,
            modifier = Modifier.size(16.dp)
        )
    },
    onClick = {
        // Do something
    },
    label = {
        // Your Composable...
        Box() {
            Text("Hello world.")
        }
    },
    isCollapsible = true
)
```

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

### Horizontal Stepper with Icons

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Use this snippet to create a horizontal stepper that displays icons for each step. Ensure ImageVectors are provided for the icons.

```kotlin
HorizontalStepper(
  icons = listOf(Icons.Default.Star, Icons.Default.Favorite),
  currentStep = 1
) {
  // Do something...
}
```

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

### Define Line Styling with LineStyle

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Use LineStyle to configure the appearance of lines in progress indicators. Customize colors, lengths, thicknesses, padding, and stroke caps.

```kotlin
@ExperimentalKotStep
@Immutable
data class LineStyle(
    val lineColor: Color = Color.Gray,
    val progressColor: Color = Color.Green,
    val lineLength: Dp = 16.dp,
    val lineThickness: Dp = 2.dp,
    val linePadding: PaddingValues = PaddingValues(0.dp),
    val lineStrokeCap: StrokeCap = StrokeCap.Square,
    val progressStrokeCap: StrokeCap = StrokeCap.Square,
    val lineType: LineType = LineType.Solid,
    val progressType: LineType = LineType.Solid,
) {
    companion object {
        fun defaultTodo() = LineStyle(lineColor = Color.Gray.copy(alpha = 0.3f), progressColor = Color.Gray.copy(alpha = 0.3f))
        fun defaultCurrent() = LineStyle(lineColor = Color.Gray.copy(alpha = 0.3f), progressColor = Color.Blue)
        fun defaultDone() = LineStyle(lineColor = Color.Gray.copy(alpha = 0.3f), progressColor = Color.Green)
    }
}
```

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

### Vertical Stepper with Icon and Label Style

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Create a vertical stepper combining icons and text labels using `iconVerticalWithLabel`. This style requires a list of icons and a list of composable functions for the trailing labels.

```kotlin
VerticalStepper(
  style = iconVerticalWithLabel(
    currentStep = 1,
    icons = listOf(
      Icons.Default.AccountCircle,
      Icons.Default.DateRange
    ),
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}
```

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

### Vertical Stepper - Numbered

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Use this to create a vertical stepper with numbered steps. Configure the total number of steps and the currently active step.

```kotlin
VerticalStepper(
  style = numberedVertical(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}

```

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

### Vertical Stepper - Tab Style

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Use this to create a vertical stepper where each step is represented as a tab. Define the total number of steps and the active step.

```kotlin
VerticalStepper(
  style = tabVertical(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}
```

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

### Vertical Stepper - Numbered with Label

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Create a vertical stepper with numbered steps that also display custom labels. Provide a list of composables for the trailing labels.

```kotlin
VerticalStepper(
  style = numberedVerticalWithLabel(
    totalSteps = 2,
    currentStep = 1,
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}

```

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

### Define Individual Step Visual Style

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the visual properties for a single step, such as color, size, shape, text, icon, and border. Provides default styles for todo, current, and done states.

```kotlin
@ExperimentalKotStep
@Immutable
data class StepStyle(
    val stepColor: Color = Color.Gray,
    val stepSize: Dp = 24.dp,
    val stepShape: Shape = CircleShape,
    val textStyle: TextStyle = TextStyle(color = Color.Black, fontSize = 16.sp),
    val iconStyle: IconStyle = IconStyle(),
    val borderStyle: BorderStyle = BorderStyle()
) {
    companion object {
        fun defaultTodo() = StepStyle(stepColor = Color.Gray.copy(alpha = 0.3f))
        fun defaultCurrent() = StepStyle(stepColor = Color.Blue)
        fun defaultDone() = StepStyle(stepColor = Color.Green)
    }
}
```

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

### Define Composite Line Styles with LineStyles

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Use LineStyles to group LineStyle configurations for different step states (todo, current, done). Provides a default composite style.

```kotlin
@ExperimentalKotStep
@Immutable
data class LineStyles(
    val onTodo: LineStyle,
    val onCurrent: LineStyle,
    val onDone: LineStyle
) {
    companion object {
        fun default() = LineStyles(
            onTodo = LineStyle.defaultTodo(),
            onCurrent = LineStyle.defaultCurrent(),
            onDone = LineStyle.defaultDone()
        )
    }
}
```

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

### Implement Horizontal Icon Stepper

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Use the HorizontalStepper composable with the iconHorizontal style to create an icon-based stepper. Provide a list of icons and specify the current active step.

```kotlin
HorizontalStepper(
    style = iconHorizontal(
	currentStep = 1,
        icons = listOf(
            Icons.Default.AccountCircle,
	    ...
            Icons.Default.DateRange
        )
    )
) {
	// Do something...
}
```

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

### Vertical Stepper with Icon Style

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Implement a vertical stepper using icons with the `iconVertical` style. Provide a list of `ImageVector`s for the icons and specify the `currentStep`.

```kotlin
VerticalStepper(
  style = iconVertical(
    currentStep = 1,
    icons = listOf(
      Icons.Default.AccountCircle,
      ...
      Icons.Default.DateRange
    )
  )
) {
	// Do something...
}
```

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

### Add KotStep Dependency

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Add JitPack to your dependency resolution and include the KotStep dependency in your app's build.gradle.kts file.

```kotlin
// settings.gradle.kts
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}

// app/build.gradle.kts
dependencies {
    implementation("com.github.binayshaw7777:KotStep:<version>")
}
```

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

### Add KotStep Dependency (Groovy)

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Include the KotStep library dependency in your app's build.gradle file.

```groovy
dependencies {
    implementation 'com.github.binayshaw7777:KotStep:$currentVersion'
}
```

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

### Vertical Stepper with Tab Style

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Use `tabVertical` to create a vertical stepper with a tab-like appearance. Configure total steps and the current active step.

```kotlin
VerticalStepper(
  style = tabVertical(
    totalSteps = 2,
    currentStep = 1
  )
) {
	// Do something...
}
```

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

### Add Custom Composable Content Steps to KotStep

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Utilize the `step` function with a `content` lambda to display custom composable elements within the step indicator. If `content` is null or the no-arg overload is used, a default bullet indicator appears.

```kotlin
@OptIn(ExperimentalKotStep::class)
@Composable
fun CustomContentSteps() {
    KotStep(
        modifier = Modifier.verticalScroll(rememberScrollState()),
        currentStep = { 1f }
    ) {
        // Custom drawable inside step indicator
        step(
            content = {
                Image(
                    painter = painterResource(R.drawable.ic_logo),
                    contentDescription = "Logo",
                    modifier = Modifier.size(18.dp)
                )
            },
            label = { Text("Company onboarding") },
            isCollapsible = true
        )
        // Default bullet step (no title, icon, or content)
        step(
            onClick = { /* handle */ },
            label = { Text("Default step") }
        )
    }
}
```

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

### VerticalStepper Basic Tab Style

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

A basic VerticalStepper configured with a tab-like style. Specify the total steps and the current step.

```kotlin
VerticalStepper(
    style = tabVertical(totalSteps = 3, currentStep = 1)
)
```

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

### Implement Horizontal Tab Stepper

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Use the HorizontalStepper composable with the tabHorizontal style to create a tab-based stepper. Specify the total number of steps and the current active step.

```kotlin
HorizontalStepper(
    style = tabHorizontal(
        totalSteps = 3,
        currentStep = 1
    )
) {
	// Do something...
}
```

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

### Define Icon Style

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the style for an icon, specifying its tint color and size. It is recommended that the icon size be no more than 75% of the step size.

```kotlin
@ExperimentalKotStep
data class IconStyle(
    val iconTint: Color = Color.Unspecified,
    val iconSize: Dp = 16.dp
)
```

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

### VerticalStepper Tab with Labels

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

VerticalStepper with a tab style and trailing text labels. Useful for multi-step processes where descriptive text is needed.

```kotlin
VerticalStepper(
    style = tabVerticalWithLabel(
        totalSteps = 2,
        currentStep = 0,
        trailingLabels = listOf(
            { Text("Step One", fontWeight = FontWeight.Bold) },
            { Text("Step Two") }
        )
    ),
    onStepClick = { index -> /* handle */ }
)
```

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

### Add Icon Steps to KotStep

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Use the `step` function with an `icon` parameter to add icon-based steps. The icon is displayed in the step indicator and styled according to `StepStyle.iconStyle`.

```kotlin
@OptIn(ExperimentalKotStep::class)
@Composable
fun IconSteps() {
    KotStep(
        modifier = Modifier.fillMaxWidth(),
        currentStep = { 2f },
        style = KotStepStyle(stepLayoutStyle = StepLayoutStyle.Horizontal)
    ) {
        step(icon = Icons.Default.AccountCircle, onClick = { /* navigate */ })
        step(icon = Icons.Default.Home,          onClick = { /* navigate */ })
        step(icon = Icons.Default.ShoppingCart,  onClick = { /* navigate */ })
        step(icon = Icons.Default.Done,          onClick = { /* navigate */ })
    }
}
```

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

### LineStyle

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines line styling for progress indicators. Allows customization of colors, lengths, thicknesses, paddings, and stroke caps for both the base line and the progress line, as well as line types.

```APIDOC
## LineStyle

### Description
Defines line styling for progress indicators. Allows customization of colors, lengths, thicknesses, paddings, and stroke caps for both the base line and the progress line, as well as line types.

### Properties
- `lineColor` (Color) - Default: `Color.Gray` - Base/Track line color.
- `progressColor` (Color) - Default: `Color.Green` - Progress color.
- `lineLength` (Dp) - Default: `16.dp` - Segment length. (taken as **Height** for Vertical and **Width** for Horizontal)
- `lineThickness` (Dp) - Default: `2.dp` - Line thickness.
- `linePadding` (PaddingValues) - Default: `PaddingValues(0.dp)` - Line padding (only **start** + **end** taken for Horizontal & **top** + **bottom** taken for Vertical).
- `lineStrokeCap` (StrokeCap) - Default: `StrokeCap.Square` - Base/Tracl line cap.
- `progressStrokeCap` (StrokeCap) - Default: `StrokeCap.Square` - Progress cap.
- `lineType` (LineType) - Default: `LineType.Solid` - Base/Track line type.
- `progressType` (LineType) - Default: `LineType.Solid` - Progress type.

### Companion Methods
- `defaultTodo()`: Returns semi-transparent gray style.
- `defaultCurrent()`: Returns gray line with blue progress.
- `defaultDone()`: Returns gray line with green progress.
```

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

### HorizontalStepper Icon Style

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Implements a HorizontalStepper using icons for each step. Provide a list of icons corresponding to the steps.

```kotlin
HorizontalStepper(
    style = iconHorizontal(
        currentStep = 1,
        icons = listOf(
            Icons.Default.Home,
            Icons.Default.ShoppingCart,
            Icons.Default.Done
        )
    )
)
```

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

### Add KotStep Dependency (Kotlin)

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Include the KotStep library dependency in your app's build.gradle.kts file.

```kotlin
dependencies {
    implementation("com.github.binayshaw7777:KotStep:$currentVersion")
}
```

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

### HorizontalStepper Tab Style

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Configures a HorizontalStepper with a tab-like appearance. Specify the total number of steps and the current step.

```kotlin
HorizontalStepper(
    style = tabHorizontal(totalSteps = 4, currentStep = 2),
    onStepClick = { index -> Log.d("step", "Clicked $index") }
)
```

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

### HorizontalStepper Numbered Style

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Creates a HorizontalStepper with numbered steps and custom appearance settings. Allows for step size and checkmark visibility configuration.

```kotlin
HorizontalStepper(
    style = numberedHorizontal(
        totalSteps = 5,
        currentStep = 3,
        stepStyle = StepStyle(
            stepSize = 32.dp,
            showCheckMarkOnDone = true,
            colors = StepDefaults.defaultColors()
        )
    )
)
```

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

### StepStyle

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the visual appearance of an individual step, including its color, size, shape, and associated text, icon, and border styles.

```APIDOC
## StepStyle

### Description
Defines an individual step's visual style.

### Properties
- `stepColor` (Color) - Default: `Color.Gray` - Background color of the step.
- `stepSize` (Dp) - Default: `24.dp` - The size of the step.
- `stepShape` (Shape) - Default: `CircleShape` - The shape of the step.
- `textStyle` (TextStyle) - Default: `TextStyle(color = Color.Black, fontSize = 16.sp)` - Text style for the step title.
- `iconStyle` (IconStyle) - Default: `IconStyle()` - Style for an icon within the step.
- `borderStyle` (BorderStyle) - Default: `BorderStyle()` - Style for the border around the step.

### Recommendations
- Font size and icon size should be less than or equal to 75% of `stepSize`.

### Companion Methods
- `defaultTodo()`: Returns a `StepStyle` with a semi-transparent gray color, suitable for a todo state.
- `defaultCurrent()`: Returns a `StepStyle` with a blue color, suitable for the current step.
- `defaultDone()`: Returns a `StepStyle` with a green color, suitable for a completed step.
```

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

### Vertical Stepper with Tab and Label Style

Source: https://github.com/binayshaw7777/kotstep/blob/master/README.md

Configure `tabVerticalWithLabel` for a vertical stepper that includes text labels alongside the tabs. The `trailingLabels` parameter accepts composable functions for each step's label.

```kotlin
VerticalStepper(
  style = tabVerticalWithLabel(
    totalSteps = 2,
    currentStep = 1,
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}
```

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

### VerticalStepper Numbered with Labels

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

VerticalStepper with numbered steps and trailing text labels. Provide a list of composables for the labels.

```kotlin
VerticalStepper(
    style = numberedVerticalWithLabel(
        currentStep = 1,
        trailingLabels = listOf(
            { Text("Create account") },
            { Text("Verify email") },
            { Text("Complete profile") }
        )
    )
)
```

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

### Add Step with Image Vector Icon

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Add a step using an ImageVector icon. This is useful for visual representation. Labels and callbacks are also supported.

```kotlin
step(
    icon = Icons.Default.Star,
    onClick = {
        // Do something
    },
    isCollapsible = true
)
```

```kotlin
step(
    icon = Icons.Default.Star,
    onClick = {
        // Do something
    },
    label = {
        // Your Composable...
        Box() {
            Text("Hello world.")
        }
    },
    isCollapsible = true
)
```

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

### VerticalStepper Icon with Labels

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

VerticalStepper using icons and trailing text labels. Customize step appearance and provide composables for labels.

```kotlin
VerticalStepper(
    style = iconVerticalWithLabel(
        currentStep = 0,
        icons = listOf(
            Icons.Default.Person,
            Icons.Default.Email,
            Icons.Default.CheckCircle
        ),
        trailingLabels = listOf(
            { Text("Account") },
            { Text("Email") },
            { Text("Done") }
        ),
        stepStyle = StepStyle(stepSize = 36.dp, showCheckMarkOnDone = true)
    )
)
```

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

### StepLayoutStyle

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the layout orientation for steps, allowing arrangement in either a vertical or horizontal manner.

```APIDOC
## StepLayoutStyle

### Description
Defines the layout orientation for steps, allowing arrangement in either a vertical or horizontal manner.

### Values
- `Vertical`: Steps arranged vertically, indicator at the top.
- `Horizontal`: Steps arranged horizontally, indicator at the start.
```

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

### Define Line Patterns with LineType

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Use LineType sealed class to define different line patterns: Solid, Dashed, or Dotted. Customize dash and gap lengths for Dashed and Dotted types.

```kotlin
@ExperimentalKotStep
@Immutable
sealed class LineType {
    @Immutable
    data object Solid : LineType()

    @Immutable
    data class Dashed(
        val dashLength: Dp = 10.dp,
        val gapLength: Dp = 15.dp
    ) : LineType()

    @Immutable
    data class Dotted(
        val gapLength: Dp = 8.dp
    ) : LineType()
}
```

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

### Define Border Style

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the style for a border, including its width, color, and shape. Defaults to a 1.dp width, unspecified color, and circular shape.

```kotlin
@ExperimentalKotStep
data class BorderStyle(
    val width: Dp = 1.dp,
    val color: Color = Color.Unspecified,
    val shape: Shape = CircleShape
)
```

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

### BorderStyle

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the style properties for a border, including its width, color, and shape.

```APIDOC
## BorderStyle

### Description
Defines a border's style.

### Properties
- `width` (Dp) - Default: `1.dp` - The width of the border.
- `color` (Color) - Default: `Color.Unspecified` - The color of the border.
- `shape` (Shape) - Default: `CircleShape` - The shape of the border.
```

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

### Define Stepper Layout Orientation with StepLayoutStyle

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Use StepLayoutStyle enum to specify the orientation of the stepper. Choose between Vertical or Horizontal arrangement.

```kotlin
@ExperimentalKotStep
@Immutable
enum class StepLayoutStyle {
    Vertical,
    Horizontal,
}
```

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

### HorizontalStepper Fleet Style

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Uses the 'fleet' style for HorizontalStepper, creating an animated progress bar. Configure step durations, playback, and completion callbacks.

```kotlin
HorizontalStepper(
    style = fleet(
        totalSteps = 3,
        currentStep = 0,
        duration = listOf(3000L, 5000L, 2000L),
        isPlaying = true,
        onStepComplete = { Log.d("fleet", "All steps done") }
    )
)
```

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

### Define Step States with StepState

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Use StepState sealed class to represent the different states of a step: Todo, Current, or Done.

```kotlin
@ExperimentalKotStep
sealed class StepState {
    data object Todo : StepState()
    data object Current : StepState()
    data object Done : StepState()
}
```

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

### LineType

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines different types of lines that can be used for progress indicators, including solid, dashed, and dotted lines.

```APIDOC
## LineType

### Description
Defines different types of lines that can be used for progress indicators, including solid, dashed, and dotted lines.

### Variants
- `Solid`: Continuous, unbroken line.
- `Dashed(dashLength: Dp = 10.dp, gapLength: Dp = 15.dp)`: Alternating dashes and gaps (e.g., `Dashed(dashLength = 5.dp, gapLength = 5.dp)`).
- `Dotted(gapLength: Dp = 8.dp)`: Dots with gaps (e.g., `Dotted(gapLength = 8.dp)`).
```

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

### HorizontalStepper Dashed Style

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Applies a dashed line style to the HorizontalStepper. Define the total number of steps and the current step.

```kotlin
HorizontalStepper(
    style = dashed(totalSteps = 5, currentStep = 2)
)
```

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

### StepState

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the possible states for a step within a stepper component, indicating whether it is a todo, current, or done step.

```APIDOC
## StepState

### Description
Defines the possible states for a step within a stepper component, indicating whether it is a todo, current, or done step.

### Variants
- `Todo`: Step not yet started.
- `Current`: Step currently active.
- `Done`: Step completed.
```

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

### LineType for Dashed and Dotted Lines

Source: https://context7.com/binayshaw7777/kotstep/llms.txt

Utilize the LineType sealed class to specify rendering styles for lines and progress overlays. Supports Solid, Dashed, and Dotted patterns with configurable parameters.

```kotlin
@OptIn(ExperimentalKotStep::class)
val lineStyle = LineStyle(
    lineColor = Color.Gray,
    progressColor = Color.Blue,
    lineLength = 50.dp,
    lineThickness = 4.dp,
    lineType = LineType.Solid,                            // continuous line
    progressType = LineType.Dashed(                       // dashed progress overlay
        dashLength = 10.dp,
        gapLength = 6.dp
    )
)

// Alternatively use Dotted:
val dottedLine = LineStyle(
    lineType = LineType.Dotted(gapLength = 8.dp),
    progressType = LineType.Dotted(gapLength = 8.dp)
)
```

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

### KotStepStyle Data Class

Source: https://github.com/binayshaw7777/kotstep/wiki/KotStep-Docs-(v3)

Defines the overall styling for the KotStep Stepper, including layout, padding, and visual properties for steps and lines.

```kotlin
@ExperimentalKotStep
@Immutable
data class KotStepStyle(
    val stepLayoutStyle: StepLayoutStyle = StepLayoutStyle.Vertical,
    val itemPadding: Dp = 8.dp,
    val showCheckMarkOnDone: Boolean = true,
    val ignoreCurrentState: Boolean = false,
    val stepStyle: StepStyles = StepStyles.default(),
    val lineStyle: LineStyles = LineStyles.default()
)
```

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