Orbit Compose Multiplatform

https://github.com/yasanglass/orbit-compose-multiplatform
Admin
Orbit Compose Multiplatform is a Compose Multiplatform port of Kiwi.com's Orbit design system...
Tokens:12,951
Snippets:143
Trust Score:8.1
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Basic Slider Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/slider.md

Demonstrates how to use the Slider composable with state management and value change callbacks. Setup steps, start, and end labels are optional.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.material3.Text
import kiwi.orbit.compose.ui.controls.Slider

@Composable
fun Example() {
    val volumeValue by rememberSaveable {
        mutableStateOf(0.0f)
    }
    Slider(
        value = volumeValue,
        onValueChange = { volumeValue = it },
        onValueChangeFinished = { /* process volumeValue */ },
        steps = 20,
        startLabel = { Text("0") },
        endLabel = { Text("100") },
    )
}
```

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

### Coupon Usage Example

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/08-visuals/coupon.md

Demonstrates how to use the Coupon component with and without the onCopied callback. The onCopied callback provides user feedback when the code is copied.

```kotlin
Column {
    Row(
        horizontalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        Text(
            text = "Your coupon:",
            modifier = Modifier.alignByBaseline(),
        )
        Coupon(
            code = "hxt3b81f",
            onCopied = null,
            modifier = Modifier.alignByBaseline(),
        )
    }
    Row(
        horizontalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        Text(
            text = "Copy your coupon:",
            modifier = Modifier.alignByBaseline(),
        )
        Coupon(
            code = "hxt3b81f",
            onCopied = {
                coroutineScope.launch {
                    toastHostState.showToast("Copied to clipboard!") { Icons.Copy }
                }
            },
            modifier = Modifier.alignByBaseline(),
        )
    }
}
```

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

### Button UI Testing Example

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/01-action/button.md

Shows how to perform UI tests on a ButtonPrimary component using `testTag`. It verifies the button's text and simulates a click event.

```kotlin
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performClick
import androidx.compose.ui.test.assertTextContains
import androidx.compose.ui.test.testTag
import androidx.compose.material3.Text
import kiwi.orbit.compose.ui.controls.ButtonPrimary
import androidx.compose.ui.Modifier
import org.junit.Assert
import org.junit.Test

class ButtonTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun buttonTest() {
        var clicked = false
        composeTestRule.setContent {
            ButtonPrimary(onClick = { clicked = true }, Modifier.testTag("Button")) {
                Text("Update")
            }
        }

        composeTestRule.onNodeWithTag("Button").assertTextContains("Update")
        composeTestRule.onNodeWithTag("Button").performClick()
        Assert.assertEquals(true, clicked)
    }
}
```

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

### Tile Component Usage Examples

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/tile.md

Demonstrates the two main variants of the Tile component: one with predefined slots for title, icon, and description, and another allowing custom content. The trailingContent slot is shown with custom text and alignment.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import kiwi.orbit.compose.ui.OrbitTheme
import kiwi.orbit.compose.ui.controls.Tile
import androidx.compose.material.icons.Icons

@Composable
fun Example() {
    Column {
        Tile(
            title = { Text("Title") },
            onClick = {},
            icon = { Icon(Icons.Airplane, contentDescription = null) },
            description = { Text("Description") },
            trailingContent = {
                Text(
                    text = "Action",
                    modifier = Modifier.align(Alignment.Top),
                    color = OrbitTheme.colors.primary.normal,
                    style = OrbitTheme.typography.bodyNormalMedium,
                )
            },
        )
        Tile(
            onClick = {},
        ) {
            Text(
                text = "Custom content",
                modifier = Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center,
            )
        }
    }
}
```

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

### ButtonPrimary Usage Example

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/01-action/button.md

Demonstrates how to use the ButtonPrimary composable with a text content. It fills the maximum width available.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import kiwi.orbit.compose.ui.controls.ButtonPrimary
import androidx.compose.ui.Modifier

@Composable
fun Example() {
    Column {
        ButtonPrimary(onClick = { /* ... */ }, modifier = Modifier.fillMaxWidth()) {
            Text("Click here")
        }
    }
}
```

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

### Material 2 Theming Setup for Orbit Compose

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/02-foundation/04-color/theming.md

Use this composable to set up Material 2 theme alongside Orbit Compose. It includes conversion functions for colors, typography, and shapes to ensure compatibility.

```kotlin
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import kiwi.orbit.compose.ui.OrbitTheme
import kiwi.orbit.compose.ui.foundation.Colors
import kiwi.orbit.compose.ui.foundation.Shapes
import kiwi.orbit.compose.ui.foundation.Typography
import kiwi.orbit.compose.ui.foundation.createTypography
import kiwi.orbit.compose.ui.foundation.lightColors

@Composable
fun App() {
    // your Orbit Theme setup
    val colors = lightColors()
    val typography = remember { createTypography() }
    val shapes = remember { Shapes() }

    MaterialTheme(
        colors = colors.toMaterial2(),
        typography = typography.toMaterial2(),
        shapes = shapes.toMaterial2(),
    ) {
        OrbitTheme(
            colors = colors,
            typography = typography,
            shapes = shapes,
        ) {
            // ...
        }
    }
}

private fun Colors.toMaterial2(): androidx.compose.material.Colors =
    androidx.compose.material.Colors(
        primary = primary.normal,
        primaryVariant = primary.strong,
        secondary = info.normal,
        secondaryVariant = info.strong,
        background = surface.subtle,
        surface = surface.main,
        error = critical.normal,
        onPrimary = primary.onNormal,
        onSecondary = info.onNormal,
        onBackground = content.normal,
        onSurface = content.normal,
        onError = critical.onNormal,
        isLight = isLight,
    )

private fun Typography.toMaterial2(): androidx.compose.material.Typography =
    androidx.compose.material.Typography(
        defaultFontFamily = title1.fontFamily ?: FontFamily.Default,
        h1 = title1.copy(fontSize = 96.sp, lineHeight = TextUnit.Unspecified),
        h2 = title1.copy(fontSize = 60.sp, lineHeight = TextUnit.Unspecified),
        h3 = title1.copy(fontSize = 38.sp, lineHeight = TextUnit.Unspecified),
        h4 = title1,
        h5 = title2,
        h6 = title3,
        subtitle1 = title4,
        subtitle2 = title5,
        overline = title6,
        body1 = bodyNormal,
        body2 = bodySmall,
        button = title5,
        caption = bodySmall,
    )

private fun Shapes.toMaterial2(): androidx.compose.material.Shapes =
    androidx.compose.material.Shapes(
        small = small,
        medium = normal,
        large = large,
    )
```

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

### Record Paparazzi Screenshots

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/contributing.md

Run this Gradle task to generate new screenshots for component testing. Ensure Git LFS is installed for proper handling of screenshot files.

```gradle
./gradlew :ui:recordPaparazziDebug
```

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

### Basic BadgeList Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/03-information/badgelist.md

Demonstrates how to use the BadgeList composable to wrap various badge list items with icons and text content.

```kotlin
Column {
    BadgeList {
        BadgeListSuccess(Icons.Check) { Text("Your order is being processed right now.") }
        BadgeListInfo(Icons.Info) { Text("We will email you when there will be a progress.") }
        BadgeListInfo(Icons.Money) { Text("Additional credits were added to your account.") }
    }
}
```

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

### Basic Stepper Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/stepper.md

Demonstrates how to use the Stepper composable with min and max value constraints. The `active` parameter can highlight the stepper when its value is greater than 0.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import kiwi.orbit.compose.ui.controls.Stepper

@Composable
fun Example() {
    var value by remember { mutableIntStateOf(0) }
    Stepper(
        modifier = Modifier.testTag("stepper"),
        value = value,
        onValueChange = { value = it },
        active = value > 0,
        minValue = 0,
        maxValue = 10,
    )
}
```

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

### Basic Textarea Configuration

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/textarea.md

Demonstrates how to configure a TextField as a textarea by setting `singleLine` to false and optionally specifying `maxLines` for a maximum of 4 rendered lines.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.foundation.text.BasicTextField

@Composable
fun Example() {
    TextField(
        value = "...",
        onValueChange = { },
        singleLine = false,
        maxLines = 4,
    )
}
```

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

### Basic Card Usage with Title and Action

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/card.md

Demonstrates how to use the Card component with a title and an action slot. The content slot displays simple text.

```kotlin
Card(
            title = { Text("Card title") },
            action = { ButtonTextLinkPrimary("Action", onClick = {}) },
        ) {
            Text("Content")
        }
```

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

### Badge Component Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/03-information/badge.md

Demonstrates how to use different Badge variants with text content and icons. Ensure necessary imports for Composable functions and Icons.

```kotlin
Column {
    BadgeInfo {
        Text("Text")
    }
    BadgeSuccessSubtle(
        icon = { Icon(Icons.Check, "Ok") },
        content = { Text("Added") }
    )
}
```

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

### Basic TileGroup Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/tilegroup.md

Demonstrates how to use the TileGroup to wrap multiple Tile components. This is useful for grouping related interactive elements.

```kotlin
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Airplane
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kiwi.orbit.compose.ui.controls.Tile
import kiwi.orbit.compose.ui.controls.TileGroup

@Composable
fun Example() {
    TileGroup(
        modifier = Modifier.padding(16.dp),
    ) {
        Tile(
            title = { Text("Title") },
            onClick = {},
        )
        Tile(
            title = { Text("Title") },
            onClick = {},
            icon = { Icon(Icons.Airplane, contentDescription = null) },
            description = { Text("Description") },
        )
    }
}
```

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

### Basic SelectField Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/select.md

Demonstrates the basic usage of SelectField with a list of options and a label. The selected value is managed using remember and mutableStateOf.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.material.Text

@Composable
fun Example() {
    var selected by remeber { mutableStateOf("A") }
    SelectField(
        value = selected,
        options = remember { listOf("A", "B", "C") },
        onOptionSelect = { selected = it },
        label = { Text("Pick a letter") }
    ) { letter ->
        Text(letter)
    }
}
```

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

### UI Testing Alert Component

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/03-information/alert.md

Illustrates how to set up UI testing for an AlertSuccess component using Jetpack Compose testing APIs. It demonstrates setting content and performing a click action on a button within the alert.

```kotlin
composeTestRule.setContent {
    AlertSuccess(
        title = {},
        content = { Text("Thank you for subscribing") },
        actions = {
            ButtonPrimary(onClick = {}, Modifier.testTag("action")) {
                Text("Show content")
            }
        },
    )
}

composeTestRule.onNodeWithTag("action").performClick()
```

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

### ScrollableTabRow with UI Testing

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/tabs.md

Shows how to use ScrollableTabRow and includes UI testing configurations. For ScrollableTabRow, use `performScrollTo()` before `performClick()` to ensure visibility.

```kotlin
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.test.assertIsSelected
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performClick
import androidx.compose.ui.test.performScrollTo
import androidx.compose.material.Text
import kiwi.orbit.compose.ui.controls.ScrollableTabRow
import kiwi.orbit.compose.ui.controls.Tab

// Assume composeTestRule is initialized
// val composeTestRule = createComposeRule()

composeTestRule.setContent {
    var selectedPage by remember { mutableStateOf(0) }
    ScrollableTabRow(selectedTabIndex = selectedPage) {
        Tab(
            modifier = Modifier.testTag("variantA"),
            selected = selectedPage == 0,
            onClick = { selectedPage = 0 },
            text = { Text("Variant A") },
        )
        Tab(
            modifier = Modifier.testTag("variantB"),
            selected = selectedPage == 1,
            onClick = { selectedPage = 1 },
            text = { Text("Variant B") },
        )
        Tab(
            modifier = Modifier.testTag("variantC"),
            selected = selectedPage == 2,
            onClick = { selectedPage = 2 },
            text = { Text("Variant C") },
        )
    }
}
composeTestRule.onNodeWithTag("variantC").performScrollTo().performClick().assertIsSelected()
```

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

### Basic Collapse Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/collapse.md

Use the Collapse composable with a boolean state for `expanded` and handle state changes in `onExpandClick`. The `title` slot is for visible content, and `content` is for the collapsible part.

```kotlin
import androidx.compose.runtime.* 
import androidx.compose.material.Text
import kiwi.orbit.compose.ui.controls.Collapse

@Composable
fun Example() {
    var expanded by remember { mutableStateOf(false) }

    Collapse(
        expanded = expanded,
        onExpandClick = { expanded = it },
        title = {
            Text(text = "Collapse title")
        },
        content = {
            Text(text = "This is the collapsible content")
        },
     )
}
```

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

### Basic Checkbox Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/checkbox.md

Demonstrates the basic usage of the Checkbox component. It accepts a Boolean state and a callback for changes.

```kotlin
package test

import androidx.compose.runtime.Composable

@Composable
fun Example() {
    Checkbox(
        checked = false,
        onCheckedChange = {},
    )
}
```

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

### UI Testing for Tile Component

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/tile.md

Shows how to use test tags to identify and interact with different parts of the Tile component during UI testing. This includes asserting text content and performing click actions.

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.test.assertTextEquals
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performClick
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import kiwi.orbit.compose.ui.controls.Tile

// Assume composeTestRule is available
// composeTestRule.setContent { ... }

composeTestRule.setContent {
    Tile(
        title = { Text("Title", Modifier.testTag("title")) },
        onClick = {},
        modifier = Modifier.testTag("tile"),
        description = { Text("Description", Modifier.testTag("description")) },
    )
}

composeTestRule.onNodeWithTag("title").assertTextEquals("Title")
composeTestRule.onNodeWithTag("description").assertTextEquals("Description")
composeTestRule.onNodeWithTag("tile").performClick()
```

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

### Coupon UI Testing

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/08-visuals/coupon.md

Shows how to add a test tag to the Coupon component for UI testing and assert its displayed text.

```kotlin
composeTestRule.setContent {
    Coupon(
        code = "hxt3b81f",
        onCopied = null,
        modifier = Modifier.testTag("coupon"),
    )
}
composeTestRule.onNodeWithTag("coupon").assertTextEquals("HXT3B81F")
```

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

### Basic Radio Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/radio.md

Demonstrates the basic usage of the Radio component, accepting a boolean state and an onClick callback.

```kotlin
@Composable
fun Example() {
    Radio(
        selected = false,
        onClick = { /*...*/ },
    )
}
```

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

### CheckboxField with Label and Description

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/checkbox.md

Shows how to use CheckboxField, which includes slots for a label and a description, in addition to the checkbox itself.

```kotlin
@Composable
fun Example() {
    CheckboxField(
        checked = false,
        onCheckedChange = {},
        description = { Text("If selected, you will get the latest updates.") }
    ) {
        Text("Autoupdate")
    }
}
```

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

### UI Testing TextField with Test Tags

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/inputfield.md

Demonstrates how to use test tags for UI testing of the TextField component. Includes assertions for empty text, text content, and performing text replacements.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.test.assert
import androidx.compose.ui.test.hasEditTextExactly
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performTextReplacement
import androidx.compose.ui.test.SemanticsMatcher
import androidx.compose.ui.test.SemanticsProperties
import kiwi.orbit.compose.ui.controls.TextField
import androidx.compose.material.Text

// Assume composeTestRule is initialized
// val composeTestRule = createComposeRule()

@Composable
fun TestableTextField() {
    var value by remember { mutableStateOf("") }
    TextField(
        modifier = Modifier.testTag("textfield"),
        value = value,
        onValueChange = { value = it },
        info = { Text("Info") },
        error = if (value.length > 3) {
            @Composable { Text("Error") }
        } else {
            null
        },
        label = { Text("Label") },
        placeholder = { Text("Placeholder") },
    )
}

// In your test:
// composeTestRule.setContent { TestableTextField() }
// val textField = composeTestRule.onNodeWithTag("textfield")
// textField.assert(hasEditTextExactly(""))
// textField.assertTextEquals("Label", "Placeholder", includeEditableText = false)
// textField.performTextReplacement("text")
// textField.assert(hasEditTextExactly("text"))

private fun hasEditTextExactly(expected: String): SemanticsMatcher {
    val propertyName = SemanticsProperties.EditableText.name
    return SemanticsMatcher(
        "$propertyName = [$expected]",
    ) { node ->
        val actual = node.config.getOrNull(SemanticsProperties.EditableText)
        actual?.text == expected
    }
}
```

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

### Use Orbit Icons and Illustrations

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/readme.md

Access and display Orbit icons and illustrations using the respective Icons and Illustrations objects.

```kotlin
Image(painter = Illustrations.AppKiwi, contentDescription = "app_kiwi")
```

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

### Verify Paparazzi Screenshots

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/contributing.md

Execute this Gradle task to compare current component implementations against recorded screenshots. This verifies that changes do not introduce visual regressions.

```gradle
./gradlew :ui:verifyPaparazziDebug
```

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

### Stepper UI Testing

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/stepper.md

Shows how to test the Stepper component using Compose UI testing. It verifies the presence of increase/decrease actions and asserts the value changes after performing these actions.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.test.assertTextEquals
import androidx.compose.ui.test.fetchSemanticsNode
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.performSemanticsAction
import androidx.test.ext.junit.runners.AndroidJUnit4
import kiwi.orbit.compose.ui.controls.Stepper
import kiwi.orbit.compose.ui.controls.StepperSemanticsActions
import org.junit.Assert.assertTrue
import org.junit.Test
import org.junit.runner.RunWith

import org.junit.Assert.assertFalse

@RunWith(AndroidJUnit4::class)
class StepperTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun stepperIncreasesAndDecreasesValue() {
        composeTestRule.setContent {
            var value by remember { mutableIntStateOf(0) }
            Stepper(
                modifier = Modifier.testTag("stepper"),
                value = value,
                onValueChange = { value = it })
        }
        val stepper = composeTestRule.onNodeWithTag("stepper")

        assertFalse(stepper.fetchSemanticsNode().config.contains(StepperSemanticsActions.DecreaseValue))
        assertTrue(stepper.fetchSemanticsNode().config.contains(StepperSemanticsActions.IncreaseValue))

        stepper
            .assertTextEquals("0")
            .performSemanticsAction(StepperSemanticsActions.IncreaseValue)
            .assertTextEquals("1")
            .performSemanticsAction(StepperSemanticsActions.IncreaseValue)
            .assertTextEquals("2")
            .performSemanticsAction(StepperSemanticsActions.DecreaseValue)
            .assertTextEquals("1")

        assertTrue(stepper.fetchSemanticsNode().config.contains(StepperSemanticsActions.DecreaseValue))
        assertTrue(stepper.fetchSemanticsNode().config.contains(StepperSemanticsActions.IncreaseValue))
    }
}
```

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

### Basic ClickableField Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/inputfile.md

Demonstrates how to define the text value and click action for the ClickableField component. This is useful for creating file input fields.

```kotlin
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Attachment
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import kiwi.orbit.compose.ui.controls.ClickableField
import kiwi.orbit.compose.ui.controls.Icon
import kiwi.orbit.compose.ui.controls.Text

@Composable
fun Example() {
    ClickableField(
        value = "Attach filed",
        onClick = { /* ... */ },
        label = { Text("Attachment") },
        info = { Text("Attach JPEG.") },
        leadingIcon = { Icon(Icons.Attachment, contentDescription = null) },
    )
}
```

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

### TileGroup UI Testing with Slotting API

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/tilegroup.md

Shows how to use the slotting API with testTags for UI testing of Tile components within a TileGroup. This allows for specific tile identification and assertion.

```kotlin
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Airplane
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.test.assertTextEquals
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.unit.dp
import kiwi.orbit.compose.ui.controls.Tile
import kiwi.orbit.compose.ui.controls.TileGroup

composeTestRule.setContent {
    TileGroup(
        modifier = Modifier.padding(16.dp),
    ) {
        Tile(
            modifier = Modifier.testTag("title")
            title = { Text("Title") },
            onClick = {},
        )
        Tile(
            title = { Text("Title") },
            onClick = {},
            icon = { Icon(Icons.Airplane, contentDescription = null) },
            description = { Text("Description") },
        )
    }
}

composeTestRule.onNodeWithTag("title").assertTextEquals("Title")
```

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

### Basic TextField Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/inputfield.md

Use TextField for standard text input. Provide a value and an onValueChange callback. A label is required.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import kiwi.orbit.compose.ui.controls.TextField
import androidx.compose.material.Text

@Composable
fun Example() {
    TextField(
        value = "...",
        onValueChange = { /* ... */ },
        label = { Text("Full name") },
    )
}
```

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

### Basic RangeSlider Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/slider.md

Shows how to implement a RangeSlider for selecting a range of values. It uses similar state management and callbacks as the basic Slider.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.material3.Text
import kiwi.orbit.compose.ui.controls.RangeSlider

@Composable
fun Example() {
    val volumeValue by remember {
        mutableStateOf(0.0f..1.0f)
    }
    RangeSlider(
        value = volumeValue,
        onValueChange = { volumeValue = it },
        onValueChangeFinished = { /* process volumeValue */ },
        steps = 20,
        startLabel = { Text("0") },
        endLabel = { Text("100") },
    )
}
```

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

### Basic TabRow Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/tabs.md

Demonstrates how to use TabRow within a TopAppBar to manage selected tab state. Ensure the TabRow is placed in the `extraContent` slot of the TopAppBar.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import kiwi.orbit.compose.ui.controls.Tab
import kiwi.orbit.compose.ui.controls.TabRow

@Composable
fun Example() {
    var selectedPage by rememberSaveable { mutableStateOf(0) }
    TopAppBar(
        title = { /* ... */ },
        onNavigateUp = { /* ... */ },
        extraContent = {
            TabRow(selectedTabIndex = selectedPage) {
                Tab(
                    selected = selectedPage == 0,
                    onClick = { selectedPage = 0 },
                    text = { Text("Variant A") },
                )
                Tab(
                    selected = selectedPage == 1,
                    onClick = { selectedPage = 1 },
                    text = { Text("Variant B") },
                )
            }
        }
    )
}
```

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

### UI Testing SelectField Options

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/select.md

Shows how to UI test the SelectField component, including setting test tags for options and asserting the selected value. It utilizes `useUnmergedTree` for clicking specific options.

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performClick
import androidx.compose.ui.test.SemanticsMatcher
import androidx.compose.ui.semantics.SemanticsProperties
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.material.Text

// Assume SelectField and Modifier.testTag are imported

// Inside a test class:
// @get:Rule
// val composeTestRule = createComposeRule()

composeTestRule.setContent {
    var selected by remember { mutableStateOf("A") }
    SelectField(
        modifier = Modifier.testTag("select"),
        value = selected,
        options = listOf("A", "B", "C"),
        onOptionSelect = { selected = it },
        label = { Text("Pick letter") },
    ) { letter ->
        Text(letter, modifier = Modifier.testTag("option$letter"))
    }
}

val select = composeTestRule.onNodeWithTag("select")
select.assert(hasEditTextExactly("A"))
select.performClick()
composeTestRule.onNodeWithTag("optionB", useUnmergedTree = true).performClick()
select.assert(hasEditTextExactly("B"))

private fun hasEditTextExactly(expected: String): SemanticsMatcher {
    val propertyName = SemanticsProperties.EditableText.name
    return SemanticsMatcher(
        "$propertyName = [$expected]",
    ) { node ->
        val actual = node.config.getOrNull(SemanticsProperties.EditableText)
        actual?.text == expected
    }
}
```

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

### Alert Variants with Actions

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/03-information/alert.md

Demonstrates the usage of AlertSuccess and AlertInfo components with titles, content, and actions. The AlertSuccess includes primary and secondary buttons, while AlertInfo shows a custom icon and content.

```kotlin
Column {
    AlertSuccess(
        title = { Text("Thank you for subscribing") },
        content = { Text("Your subscription was successfully activated. All premium content is now available in your account.") },
        actions = {
            ButtonPrimary(onClick = {}) { Text("Show content") }
            ButtonSecondary(onClick = {}) { Text("Manage subscription") }
        },
    )
    AlertInfo(
        icon = Icons.Check,
        content = { Text("You information is up-to-date.") },
    )
}
```

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

### BadgeListSmall with Customization

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/03-information/badgelist.md

Shows how to use BadgeListSmall with custom vertical arrangement and content emphasis. This variant is useful for more compact layouts.

```kotlin
Column {
    BadgeListSmall(
        verticalArrangement = Arrangement.spacedBy(10.dp),
        contentEmphasis = ContentEmphasis.Minor,
    ) {
        BadgeListSuccess(Icons.Check) { Text("Your order is being processed right now.") }
        BadgeListInfo(Icons.Info) { Text("We will email you when there will be a progress.") }
        BadgeListInfo(Icons.Money) { Text("Additional credits were added to your account.") }
    }
}
```

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

### Badge UI Testing

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/03-information/badge.md

Shows how to use the slotting API for UI testing by adding test tags to Badge components. This allows for specific element identification and assertion in tests.

```kotlin
composeTestRule.setContent {
    BadgeInfo {
        Text("Latest Update", Modifier.testTag("Badge"))
    }
}

composeTestRule.onNodeWithTag("Badge").assertTextContains("Latest Update")
```

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

### UI Testing for Card Component

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/card.md

Illustrates how to use `testTag` with the Card component's slots (title, action, content) for UI testing purposes.

```kotlin
composeTestRule.setContent {
    Card(
        title = { Text("Card title", Modifier.testTag("title")) },
        action = { ButtonTextLinkPrimary("Action", onClick = {}, Modifier.testTag("action")) },
    ) {
        Text("Content", Modifier.testTag("content"))
    }
}

composeTestRule.onNodeWithTag("title").assertTextEquals("Card title")
composeTestRule.onNodeWithTag("action").assertTextEquals("Action")
composeTestRule.onNodeWithTag("content").assertTextEquals("Content")
```

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

### Card with Custom Content Padding and ListChoice

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/02-structure/card.md

Shows how to customize the content padding of a Card and integrate it with ListChoice components. This is useful when ListChoice handles its own padding.

```kotlin
Card(
            title = { Text("Card title") },
            contentPadding = PaddingValues(vertical = 12.dp),
        ) {
            Column {
                ListChoice(
                    onClick = {},
                    icon = { Icon(Icons.AirplaneTakeoff, contentDescription = null) },
                    trailingIcon = { Icon(Icons.ChevronForward, contentDescription = null) },
                ) {
                    Text("Takeoff")
                }
                ListChoice(
                    onClick = {},
                    icon = { Icon(Icons.AirplaneLanding, contentDescription = null) },
                    trailingIcon = { Icon(Icons.ChevronForward, contentDescription = null) },
                ) {
                    Text("Landing")
                }
            }
        }
```

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

### AlertInline Success with Action

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/03-information/alert.md

Shows how to use the AlertInlineSuccess component for short messages, including a title and a primary text link button as the action.

```kotlin
Column {
    AlertInlineSuccess(
        title = { Text("Password changed") },
        action = { ButtonTextLinkPrimary("Account", onClick = { /* ... */ }) },
    )
}
```

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

### Access Orbit Theme Colors and Typography

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/readme.md

Utilize the OrbitTheme object to access predefined colors and typography styles for consistent theming.

```kotlin
Text("Title 1", emphasis = ContentEmphasis.Minor)
Text("Big title in Title 1 style", style = OrbitTheme.typography.title1)
Text("Check your typography styles!", color = OrbitTheme.colors.warning.normal)
```

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

### RadioField with Label and Description

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/radio.md

Shows how to use RadioField with a label and a description. This component is suitable for scenarios where more context is needed for each radio option.

```kotlin
@Composable
enum class TvShow { StarTrek, StarWars }

fun Example() {
    var tvshow by remember { mutableStateOf(TvShow.StarTrek) }
    Column {
        RadioField(
            selected = tvshow == TvShow.StarTrek,
            onClick = { tvshow = TvShow.StarTrek },
            description = { Text("Engage.") }
        ) {
            Text("StarTrek")
        }
        RadioField(
            selected = tvshow == TvShow.StarWars,
            onClick = { tvshow = TvShow.StarWars },
            description = { Text("May the force be with you.") }
        ) {
            Text("StarWars")
        }
    }
}
```

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

### UI Testing CheckboxField

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/checkbox.md

Illustrates how to perform UI testing on a CheckboxField using test tags and assertion methods like assertIsOff and assertIsOn.

```kotlin
composeTestRule.setContent {
    var checked by remember { mutableStateOf(false) }
    CheckboxField(
        modifier = Modifier.testTag("checkbox"),
        checked = checked,
        onCheckedChange = { checked = !checked },
    ) {
        Text("Label")
    }
}

val checkbox = composeTestRule.onNodeWithTag("checkbox")
checkbox.assertIsOff()
checkbox.performClick()
checkbox.assertIsOn()
```

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

### Add Orbit Compose Dependencies to Gradle

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/readme.md

Include these dependencies in your Gradle file to use the Orbit library. Replace `<version>` with the desired version.

```gradle
implementation("glass.yasan.orbit:ui:<version>")
implementation("glass.yasan.orbit:icons:<version>")
implementation("glass.yasan.orbit:illustrations:<version>")
```

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

### UI Testing RangeSlider

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/slider.md

Illustrates testing the RangeSlider component by interacting with its individual thumbs. It involves fetching thumbs, performing actions on them, and asserting their progress values.

```kotlin
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.SemanticsActions
import androidx.compose.ui.semantics.SemanticsProperties
import androidx.compose.ui.semantics.hasParent
import androidx.compose.ui.semantics.hasTestTag
import androidx.compose.ui.semantics.keyIsDefined
import androidx.compose.ui.test.fetchSemanticsNode
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onAllNodes
import androidx.compose.ui.test.performSemanticsAction
import androidx.compose.ui.test.SemanticsMatcher
import kiwi.orbit.compose.ui.controls.RangeSlider
import org.junit.Assert.assertEquals
import org.junit.Test

class RangeSliderTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun rangeSliderTest() {
        composeTestRule.setContent {
            var currentValue by rememberSaveable {
                mutableStateOf(0.0f)
            }
            RangeSlider(
                value = currentValue,
                onValueChange = { currentValue = it },
                modifier = Modifier.testTag("slider"),
                startLabel = { },
                endLabel = { },
            )
        }

        val sliderThumbs = composeTestRule.onAllNodes(
            hasParent(hasTestTag("slider")) and
                SemanticsMatcher.keyIsDefined(SemanticsActions.SetProgress),
        )
        val start = sliderThumbs[0]
        val end = sliderThumbs[1]

        start.performSemanticsAction(SemanticsActions.SetProgress) { it.invoke(0.5f) }
        end.performSemanticsAction(SemanticsActions.SetProgress) { it.invoke(0.8f) }

        val startProgressBarInfo = start
            .fetchSemanticsNode()
            .config[SemanticsProperties.ProgressBarRangeInfo]

        assertEquals(0.5f, startProgressBarInfo.current)

        val endProgressBarInfo = end
            .fetchSemanticsNode()
            .config[SemanticsProperties.ProgressBarRangeInfo]

        assertEquals(0.8f, endProgressBarInfo.current)
    }
}
```

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

### UI Testing Collapse Component

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/collapse.md

Use `testTag` with slotting API to add test tags to specific parts of the Collapse component for UI testing. You can then perform actions like Expand and Collapse and assert visibility.

```kotlin
import androidx.compose.runtime.* 
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.test.assertIsDisplayed
import androidx.compose.ui.test.assertDoesNotExist
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performSemanticsAction
import androidx.compose.ui.test.SemanticsActions
import androidx.compose.material.Text
import kiwi.orbit.compose.ui.controls.Collapse

// Assume composeTestRule is available
// composeTestRule.setContent { ... }

composeTestRule.setContent {
    var expanded by remember { mutableStateOf(false) }
    Collapse(
        expanded = expanded,
        onExpandClick = { expanded = it },
        title = {
            Text(text = "Collapse title", modifier = Modifier.testTag("title"))
        },
        content = {
            Text(text = "This is the collapsible content", modifier = Modifier.testTag("content"))
        },
        modifier = Modifier.testTag("collapse"),
    )
}

composeTestRule.onNodeWithTag("title", useUnmergedTree = true).assertIsDisplayed()
composeTestRule.onNodeWithTag("content").assertDoesNotExist()

composeTestRule.onNodeWithTag("collapse").performSemanticsAction(SemanticsActions.Expand)
composeTestRule.onNodeWithTag("content").assertIsDisplayed()

composeTestRule.onNodeWithTag("collapse").performSemanticsAction(SemanticsActions.Collapse)
composeTestRule.onNodeWithTag("content").assertDoesNotExist()
```

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

### UI Testing Slider

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/slider.md

Demonstrates how to test the Slider component using Jetpack Compose testing APIs. It involves setting progress via semantics actions and asserting the current progress value.

```kotlin
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.semantics.SemanticsActions
import androidx.compose.ui.semantics.SemanticsProperties
import androidx.compose.ui.test.fetchSemanticsNode
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.performSemanticsAction
import kiwi.orbit.compose.ui.controls.Slider
import org.junit.Assert.assertEquals
import org.junit.Test

class SliderTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun sliderTest() {
        composeTestRule.setContent {
            var currentValue by rememberSaveable {
                mutableStateOf(0.0f)
            }
            Slider(
                value = currentValue,
                onValueChange = { currentValue = it },
                modifier = Modifier.testTag("slider"),
                startLabel = { },
                endLabel = { },
            )
        }

        composeTestRule.onNodeWithTag("slider")
            .performSemanticsAction(SemanticsActions.SetProgress) { it.invoke(0.5f) }

        val progressBarInfo = composeTestRule.onNodeWithTag("slider")
            .fetchSemanticsNode()
            .config[SemanticsProperties.ProgressBarRangeInfo]

        assertEquals(0.5f, progressBarInfo.current)
    }
}
```

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

### UI Testing BadgeListItem

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/03-information/badgelist.md

Illustrates how to add a test tag to a BadgeListItemNeutral for UI testing purposes, allowing assertions on its content.

```kotlin
composeTestRule.setContent {
    BadgeList {
        BadgeListItemNeutral(Icons.Email) {
            Text("Email up to date!", Modifier.testTag("Email"))
        }
    }
}
composeTestRule.onNodeWithTag("Email").assertTextContains("Email up to date!")
```

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

### LinearProgressIndicator UI Testing

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/10-progress-indicators/loading.md

Test LinearProgressIndicator by setting its progress and using semantic properties to assert its state. The `ProgressBarRangeInfo` can be fetched to verify the current progress value.

```kotlin
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.semantics.SemanticsProperties
import androidx.compose.ui.test.fetchSemanticsNode
import androidx.compose.ui.test.onNodeWithTag
import androidx.compose.ui.test.junit4.createComposeRule
import org.junit.Assert
import androidx.compose.material.LinearProgressIndicator
import androidx.compose.runtime.Composable

// Assume composeTestRule is initialized
// val composeTestRule = createComposeRule()

composeTestRule.setContent {
    LinearProgressIndicator(
        progress = 0.4f,
        modifier = Modifier.testTag("loader"),
    )
}

val progressBarInfo = composeTestRule
    .onNodeWithTag("loader")
    .fetchSemanticsNode()
    .config[SemanticsProperties.ProgressBarRangeInfo]

Assert.assertEquals(0.4f, progressBarInfo.current)
```

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

### LinearProgressIndicator Usage

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/10-progress-indicators/loading.md

Use the LinearProgressIndicator composable to display progress. Progress changes are animated by default. Customize animation with `progressAnimationSpec` or disable with `snap()`.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.material.LinearProgressIndicator

@Composable
fun Example(progress: Float) {
    LinearProgressIndicator(
        progress = progress,
    )
}
```

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

### UI Testing RadioField State

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/radio.md

Illustrates how to perform UI tests on the RadioField component using test tags and assertion methods like assertIsSelected and assertIsNotSelected.

```kotlin
composeTestRule.setContent {
    var selected by remember { mutableStateOf(false) }
    RadioField(
        modifier = Modifier.testTag("radio"),
        selected = selected,
        onClick = { selected = !selected },
        description = { Text("Description") },
    ) {
        Text("Label")
    }
}

val radio = composeTestRule.onNodeWithTag("radio")
radio.assertIsNotSelected()
radio.performClick()
radio.assertIsSelected()
```

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

### PasswordTextField with Strength Indicator

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/inputfield.md

Use PasswordTextField for password input. Integrate PasswordStrengthIndicator using the 'strengthContent' slot. Customize colors and labels based on the calculated strength.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.test.testTag
import kiwi.orbit.compose.ui.controls.PasswordStrengthColor
import kiwi.orbit.compose.ui.controls.PasswordStrengthIndicator
import kiwi.orbit.compose.ui.controls.PasswordTextField
import androidx.compose.material.Text

@Composable
fun Example() {
    var value by remember { mutableStateOf("") }
    PasswordTextField(
        value = value,
        onValueChange = { value = it },
        strengthContent = {
            val strength = calcStrength(value) // Assume calcStrength is defined elsewhere
            PasswordStrengthIndicator(
                modifier = Modifier.testTag("passwordStrength"),
                value = strength,
                color = when {
                    strength < 0.2f -> PasswordStrengthColor.Weak
                    strength < 0.6f -> PasswordStrengthColor.Weak
                    strength < 0.8f -> PasswordStrengthColor.Medium
                    else -> PasswordStrengthColor.Strong
                },
                label = { Text("Strength: $strength") },
            )
        },
    )
}
```

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

### Use Orbit Components in a Composable Function

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/readme.md

Add Orbit components like ButtonPrimary and AlertCritical directly within your Composable functions. Ensure proper arrangement and modifiers are applied.

```kotlin
@Composable
fun MyScreen() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.padding(16.dp)
    ) {
        val maxWidth = Modifier.fillMaxWidth()
      
        ButtonPrimary(onClick = {}, maxWidth) {
            Text("This is an Orbit primary button")
        }
  
        Spacer(modifier = Modifier.padding(4.dp))
  
        AlertCritical(
            title = { Text("Alert title") },
            content = { Text("Content description") },
            actions = {
                ButtonPrimary(onClick = {}) { Text("Primary") }
                ButtonSecondary(onClick = {}) { Text("Secondary") }
            },
        )
    }
}
```

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

### Aligning Multiple TextFields

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/inputfield.md

Use LabelLastBaseLine alignment line to ensure vertical alignment of multiple TextFields when they contain labels.

```kotlin
import androidx.compose.foundation.layout.Row
import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import kiwi.orbit.compose.ui.controls.TextField
import kiwi.orbit.compose.ui.controls.field.LabelLastBaseLine

fun Example() {
    Row {
        TextField(Modifier.alignBy(LabelLastBaseLine), value = "", onValueChange = {}, label = { Text("Label 1") })
        TextField(Modifier.alignBy(LabelLastBaseLine), value = "", onValueChange = {}, label = { Text("Label 2") })
    }
}
```

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

### TextField with Error State

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/05-input/inputfield.md

Display an error message by providing a composable lambda to the 'error' parameter. The error is shown when the condition is met.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import kiwi.orbit.compose.ui.controls.TextField
import androidx.compose.material.Text

@Composable
fun Example() {
    var value by remember { mutableStateOf("") }
    TextField(
        value = value,
        onValueChange = { value = it },
        error = if (value.length > 3) {
            @Composable { Text("Error") }
        } else {
            null
        },
    )
}
```

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

### Collapse Without Separator

Source: https://github.com/yasanglass/orbit-compose-multiplatform/blob/main/docs/03-components/07-interaction/collapse.md

Optionally hide the separator between the title and content by setting `withSeparator` to `false`. The default value is `true`.

```kotlin
import androidx.compose.runtime.* 
import androidx.compose.material.Text
import kiwi.orbit.compose.ui.controls.Collapse

@Composable
fun Example() {
    var expanded by remember { mutableStateOf(false) }

    Collapse(
        expanded = expanded,
        onExpandClick = { expanded = it },
        title = {
            Text(text = "Collapse title")
        },
        content = {
            Text(text = "This is the collapsible content")
        },
        withSeparator = false,
     )
}
```
Tokens:
Raw