### BasicComponent with Start and End Actions

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/basiccomponent.md

Demonstrates how to use BasicComponent with start and end actions, such as icons and buttons, for media volume control.

```kotlin
BasicComponent(
    title = "Volume",
    summary = "Media Volume: 70%",
    startAction = {
        Icon(
            modifier = Modifier.padding(end = 16.dp),
            imageVector = MiuixIcons.Play,
            contentDescription = "Volume Icon",
            tint = MiuixTheme.colorScheme.onBackground
        )
    },
    endActions = {
        IconButton(onClick = { /* Decrease volume */ }) {
            Icon(
                imageVector = MiuixIcons.Remove,
                contentDescription = "Decrease Volume",
                tint = MiuixTheme.colorScheme.onBackground
            )
        }
        Text("70%")
        IconButton(onClick = { /* Increase volume */ }) {
            Icon(
                imageVector = MiuixIcons.Add,
                contentDescription = "Increase Volume",
                tint = MiuixTheme.colorScheme.onBackground
            )
        }
    }
)
```

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

### Basic WindowSpinnerPreference Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowspinnerpreference.md

Demonstrates the basic setup for a WindowSpinnerPreference with a title and a list of text-only options.

```kotlin
var selectedIndex by remember { mutableStateOf(0) }
val options = listOf(
    DropdownItem(text = "Option 1"),
    DropdownItem(text = "Option 2"),
    DropdownItem(text = "Option 3"),
)

WindowSpinnerPreference(
    title = "Dropdown Selector",
    items = options,
    selectedIndex = selectedIndex,
    onSelectedIndexChange = { selectedIndex = it }
)
```

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

### BasicComponent with Start Icon

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/basiccomponent.md

Integrates an icon on the start side of the BasicComponent. Useful for visual cues or actions.

```kotlin
BasicComponent(
    title = "Nickname",
    summary = "A brief introduction",
    startAction = {
        Icon(
            modifier = Modifier.padding(end = 16.dp),
            imageVector = MiuixIcons.Contacts,
            contentDescription = "Avatar Icon",
            tint = MiuixTheme.colorScheme.onBackground
        )
    },
    onClick = { /* Handle click event */ }
)
```

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

### Basic NumberPicker Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/numberpicker.md

Demonstrates the basic setup of a NumberPicker, allowing selection within a specified range.

```kotlin
var value by remember { mutableIntStateOf(5) }

NumberPicker(
    value = value,
    onValueChange = { value = it },
    range = 0..10
)
```

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

### Bitmap Icon Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/icon.md

Renders an icon from a Bitmap object using the `bitmap` parameter.

```kotlin
val bitmap = ImageBitmap(...)
Icon(
    bitmap = bitmap,
    contentDescription = "Bitmap Icon"
)
```

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

### Clickable Surface Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/surface.md

Create an interactive Surface that responds to user clicks, similar to a button. Define the onClick callback and customize its appearance.

```kotlin
Surface(
    onClick = { /* Handle click event */ },
    modifier = Modifier.size(200.dp).padding(16.dp),
    shape = RoundedCornerShape(16.dp),
    color = MiuixTheme.colorScheme.primaryContainer,
    shadowElevation = 4.dp
) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Clickable, like a button",
            modifier = Modifier.padding(16.dp).fillMaxSize(),
            textAlign = TextAlign.Center,
        )
    }
}
```

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

### Basic App Navigation Setup with NavDisplay

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/guide/navigation3.md

Demonstrates how to set up basic navigation in a Compose application using `NavDisplay`. This involves defining screens as `NavKey`, managing the back stack, and providing an `entryProvider` for screen content.

```kotlin
import androidx.navigation3.runtime.NavKey
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.rememberDecoratedNavEntries
import androidx.navigation3.ui.NavDisplay

sealed interface Screen : NavKey {
    data object Home : Screen
    data class Detail(val id: String) : Screen
}

@Composable
fun App() {
    val backStack = remember { mutableStateListOf<NavKey>(Screen.Home) }

    val entryProvider = remember(backStack) {
        entryProvider<NavKey> {
            entry(Screen.Home) {
                HomePage()
            }
            entry<Screen.Detail> { screen ->
                DetailPage(screen.id)
            }
        }
    }

    val entries = rememberDecoratedNavEntries(
        backStack = backStack,
        entryProvider = entryProvider
    )

    NavDisplay(
        entries = entries,
        onBack = { backStack.removeLast() }
    )
}
```

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

### Multi Select Dropdown Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlaydropdownpreference.md

Demonstrates how to implement a multi-select dropdown using OverlayDropdownPreference. Selection state is managed externally and toggled via onClick.

```kotlin
var selectedItems by remember { mutableStateOf(setOf("A1", "B2")) }
val entries = listOf(
    DropdownEntry(
        items = listOf("A1", "A2").map {
            DropdownItem(
                text = it,
                selected = it in selectedItems,
                onClick = {
                    selectedItems = if (it in selectedItems) selectedItems - it else selectedItems + it
                }
            )
        }
    ),
    DropdownEntry(
        items = listOf("B1", "B2", "B3").map {
            DropdownItem(
                text = it,
                selected = it in selectedItems,
                onClick = {
                    selectedItems = if (it in selectedItems) selectedItems - it else selectedItems + it
                }
            )
        }
    )
)

Scaffold {
    OverlayDropdownPreference(
        title = "Multi Select Dropdown",
        entries = entries,
        collapseOnSelection = false
    )
}
```

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

### Loading State Button

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/button.md

Example illustrating how to implement a loading state for a TextButton, typically used to indicate an ongoing operation.

```APIDOC
## Loading State Button

```kotlin
var isLoading by remember { mutableStateOf(false) }
val scope = rememberCoroutineScope()

Button(
    onClick = {
        isLoading = true
        // Simulate operation
        scope.launch {
            delay(2000)
            isLoading = false
        }
    },
    enabled = !isLoading
) {
     AnimatedVisibility(
        visible = isLoading
    ) {
        CircularProgressIndicator(
            modifier = Modifier.padding(end = 8.dp),
            size = 20.dp,
            strokeWidth = 4.dp
        )
    }
    Text("Submit")
}
```
```

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

### Basic NavigationRail Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/navigationrail.md

Demonstrates the basic setup of a NavigationRail with multiple items. Each item can be selected, and the rail manages the selected state.

```kotlin
var selectedIndex by remember { mutableStateOf(0) }
val items = listOf("Home", "Profile", "Settings")
val icons = listOf(MiuixIcons.VerticalSplit, MiuixIcons.Contacts, MiuixIcons.Settings)

Row {
    NavigationRail {
        items.forEachIndexed { index, label ->
            NavigationRailItem(
                selected = selectedIndex == index,
                onClick = { selectedIndex = index },
                icon = icons[index],
                label = label
            )
        }
    }
    // Content area
}
```

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

### Example Usage of RichTooltip

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/tooltip.md

Demonstrates how to use RichTooltip within a TooltipBox. It shows how to manage tooltip state, display a title, action button, and content text. Ensure the TooltipBox has focusable set to true for dismiss functionality.

```kotlin
val tooltipState = rememberTooltipState(isPersistent = true)
val scope = rememberCoroutineScope()

TooltipBox(
    positionProvider = TooltipDefaults.rememberTooltipPositionProvider(),
    tooltip = {
        RichTooltip(
            title = { Text("What's new") },
            action = {
                TextButton(text = "Got it", onClick = { tooltipState.dismiss() })
            },
        ) { 
            Text("Rich tooltips support a title, supporting text, and an action.")
        }
    },
    state = tooltipState,
    focusable = true,
) {
    IconButton(onClick = { scope.launch { tooltipState.show() } }) {
        Icon(imageVector = MiuixIcons.Basic.Check, contentDescription = "What's new")
    }
}
```

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

### Creating a Dialog with Form Elements

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlaydialog.md

This example shows how to build a dialog containing form elements like a dropdown and a switch. It utilizes `OverlayDropdownPreference` and `SwitchPreference` within a `Card` for structured input.

```kotlin
var showDialog by remember { mutableStateOf(false) }
var dropdownSelectedOption by remember { mutableStateOf(0) }
var switchState by remember { mutableStateOf(false) }
val dropdownOptions = listOf("Option 1", "Option 2")

Scaffold {
    TextButton(
        text = "Show Form Dialog",
        onClick = { showDialog = true }
    )

    OverlayDialog(
        title = "Form Dialog",
        show = showDialog,
        onDismissRequest = { showDialog = false } // Close dialog
    ) {
        Card(
            colors = CardDefaults.defaultColors(
                color = MiuixTheme.colorScheme.secondaryContainer,
            ),
        ) {
            OverlayDropdownPreference(
                title = "Dropdown Selection",
                items = dropdownOptions,
                selectedIndex = dropdownSelectedOption,
                onSelectedIndexChange = { dropdownSelectedOption = it }
            )
            
            SwitchPreference(
                title = "Switch Option",
                checked = switchState,
                onCheckedChange = { switchState = it }
            )
        }
        
        Spacer(Modifier.height(12.dp))
        
        Row(
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            TextButton(
                text = "Cancel",
                onClick = { showDialog = false }, // Close dialog
                modifier = Modifier.weight(1f)
            )
            Spacer(Modifier.width(20.dp))
            TextButton(
                text = "Confirm",
                onClick = { showDialog = false }, // Close dialog
                modifier = Modifier.weight(1f),
                colors = ButtonDefaults.textButtonColorsPrimary() // Use theme color
            )
        }
    }
}
```

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

### Button with Icon

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/button.md

Example demonstrating how to create a TextButton that includes an icon alongside the text.

```APIDOC
## Button with Icon

```kotlin
Button(
    onClick = { /* Handle click event */ }
) {
    Icon(
        imageVector = MiuixIcons.Favorites,
        contentDescription = "Favorites"
    )
    Spacer(modifier = Modifier.width(8.dp))
    Text("Button with Icon")
}
```
```

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

### Interactive Card Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/card.md

Demonstrates creating an interactive card that responds to click and long press events. Configure press feedback and indication for a better user experience.

```kotlin
Card(
    modifier = Modifier.padding(16.dp),
    pressFeedbackType = PressFeedbackType.Sink, // Set press feedback to sink effect
    showIndication = true, // Show indication on click
    onClick = {/* Handle click event */ },
    onLongPress = {/* Handle long press event */ }
) {
    Text("Interactive Card")
}
```

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

### Content-Rich Card Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/card.md

Use this snippet to create a card with a title, detailed description, and action buttons. It demonstrates how to structure text and buttons within a card.

```kotlin
Card(
    modifier = Modifier.padding(16.dp),
    insideMargin = PaddingValues(16.dp)
) {
    Text(
        text = "Card Title",
        style = MiuixTheme.textStyles.title2
    )
    Spacer(modifier = Modifier.height(8.dp))
    Text(
        text = "This is a detailed description of the card, which can contain multiple lines of text."
    )
    Spacer(modifier = Modifier.height(16.dp))
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.End
    ) {
        TextButton(
            text = "Cancel",
            onClick = { /* Handle cancel event */ }
        )
        Spacer(modifier = Modifier.width(8.dp))
        TextButton(
            text = "Confirm",
            colors = ButtonDefaults.textButtonColorsPrimary(), // Use theme colors
            onClick = { /* Handle confirm event */ }
        )
    }
}
```

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

### Multi Select Dropdown Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowdropdownpreference.md

Demonstrates how to implement a multi-select dropdown using WindowDropdownPreference. The selection state is managed externally and toggled via onClick events on each DropdownItem.

```kotlin
var selectedItems by remember { mutableStateOf(setOf("A1", "B2")) }
val entries = listOf(
    DropdownEntry(
        items = listOf("A1", "A2").map {
            DropdownItem(
                text = it,
                selected = it in selectedItems,
                onClick = {
                    selectedItems = if (it in selectedItems) selectedItems - it else selectedItems + it
                }
            )
        }
    ),
    DropdownEntry(
        items = listOf("B1", "B2", "B3").map {
            DropdownItem(
                text = it,
                selected = it in selectedItems,
                onClick = {
                    selectedItems = if (it in selectedItems) selectedItems - it else selectedItems + it
                }
            )
        }
    )
)

WindowDropdownPreference(
    title = "Multi Select Dropdown",
    entries = entries,
    collapseOnSelection = false
)
```

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

### Basic Usage with TopAppBar

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowiconcascadingdropdownmenu.md

Demonstrates how to integrate WindowIconCascadingDropdownMenu within the actions slot of a SmallTopAppBar. This example shows nested submenus for view mode and filtering.

```kotlin
var sortIndex by remember { mutableStateOf(0) }
var viewIndex by remember { mutableStateOf(0) }
var filterIndex by remember { mutableStateOf(0) }

val sortLabels = listOf("Sort by capture date", "Sort by date added")
val viewLabels = listOf("Group by date", "Compact")
val filterLabels = listOf("All items", "Camera album")

val entries = listOf(
    DropdownEntry(
        items = sortLabels.mapIndexed {
            idx,
            label ->
            DropdownItem(
                text = label,
                selected = sortIndex == idx,
                onClick = { sortIndex = idx },
            )
        },
    ),
    DropdownEntry(
        items = listOf(
            DropdownItem(
                text = "View mode",
                children = viewLabels.mapIndexed {
                    idx,
                    label ->
                    DropdownItem(
                        text = label,
                        selected = viewIndex == idx,
                        onClick = { viewIndex = idx },
                    )
                },
            ),
            DropdownItem(
                text = "Filter",
                children = filterLabels.mapIndexed {
                    idx,
                    label ->
                    DropdownItem(
                        text = label,
                        selected = filterIndex == idx,
                        onClick = { filterIndex = idx },
                    )
                },
            ),
        ),
    ),
)

Scaffold(
    topBar = {
        SmallTopAppBar(
            title = "Library",
            actions = {
                WindowIconCascadingDropdownMenu(entries = entries) {
                    Icon(imageVector = MiuixIcons.Tune, contentDescription = "Adjust")
                }
            }
        )
    }
) { padding ->
    // page content
}
```

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

### Scaffold with Snackbar

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/scaffold.md

Illustrates a Scaffold setup that includes a SnackbarHost for displaying messages. A FloatingActionButton triggers the Snackbar to show a message when clicked. Requires Material components.

```kotlin
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
    topBar = {
        SmallTopAppBar(title = "Title")
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("This is a message!")
                }
            }
        ) {
            Icon(MiuixIcons.Info, contentDescription = "Show message")
        }
    },
    content = { paddingValues ->
        // The content area needs to consider padding
        Box(
            modifier = Modifier
                .padding(top = paddingValues.calculateTopPadding(), start = 26.dp)
                .fillMaxSize()
        ) {
            Text("Click the button to show Snackbar")
        }
    }
)
```

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

### SwitchPreference with Start Icon

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/switchpreference.md

Adds a custom icon to the start of the SwitchPreference component using the startAction parameter.

```kotlin
var enabled by remember { mutableStateOf(false) }

SwitchPreference(
    title = "Test",
    summary = "Enable to allow testing",
    checked = enabled,
    onCheckedChange = { enabled = it },
    startAction = {
        Icon(
            imageVector = MiuixIcons.Sort,
            contentDescription = "Command Icon",
            tint = MiuixTheme.colorScheme.onBackground,
            modifier = Modifier.padding(end = 12.dp)
        )
    }
)
```

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

### OverlayListPopup with Start Alignment

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlaylistpopup.md

Configures OverlayListPopup to align its content to the start. This is useful for standard dropdown behavior.

```kotlin
var showPopup by remember { mutableStateOf(false) }

OverlayListPopup(
    show = showPopup,
    onDismissRequest = { showPopup = false }, // Close the popup menu
    alignment = PopupPositionProvider.Align.Start
) {
    ListPopupColumn {
        // Custom content
    }
}
```

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

### CheckboxPreference with Start Checkbox Position

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/checkboxpreference.md

Configures the CheckboxPreference to display the checkbox on the start side, which is the default behavior.

```kotlin
var startChecked by remember { mutableStateOf(false) }

CheckboxPreference(
    title = "Start Checkbox",
    summary = "Checkbox is on the start side (default)",
    checked = startChecked,
    onCheckedChange = { startChecked = it },
    checkboxLocation = CheckboxLocation.Start // Default value
)
```

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

### Basic SearchBar Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/searchbar.md

Demonstrates the fundamental implementation of a SearchBar with state management for search text and expansion. Includes a placeholder for search results or suggestions.

```kotlin
var searchText by remember { mutableStateStateOf("") }
var expanded by remember { mutableStateOf(false) }

SearchBar(
    inputField = {
        InputField(
            query = searchText,
            onQueryChange = { searchText = it },
            onSearch = { /* Handle search action */ },
            expanded = expanded,
            onExpandedChange = { expanded = it }
        )
    },
    expanded = expanded,
    onExpandedChange = { expanded = it }
) {
    // Search results content
    Column {
        // Add search suggestions or results here
    }
}
```

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

### OverlayCascadingListPopup with Start Alignment

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlaycascadinglistpopup.md

Configures the OverlayCascadingListPopup to align to the start of its anchor. This is useful for controlling the popup's position relative to the trigger.

```kotlin
OverlayCascadingListPopup(
    show = showPopup,
    entries = entries,
    onDismissRequest = { showPopup = false },
    alignment = PopupPositionProvider.Align.Start,
)
```

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

### Import OverlayBottomSheet

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlaybottomsheet.md

Import the necessary components for using OverlayBottomSheet. Ensure Scaffold provides MiuixPopupHost.

```kotlin
import top.yukonga.miuix.kmp.overlay.OverlayBottomSheet
import top.yukonga.miuix.kmp.theme.LocalDismissState
```

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

### Basic WindowDropdownPreference Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowdropdownpreference.md

Demonstrates the basic usage of WindowDropdownPreference with a title and a list of string options.

```kotlin
var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("Option 1", "Option 2", "Option 3")

WindowDropdownPreference(
    title = "Dropdown Menu",
    items = options,
    selectedIndex = selectedIndex,
    onSelectedIndexChange = { selectedIndex = it }
)
```

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

### ArrowPreference with Start Icon

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/arrowpreference.md

Use this snippet to display an ArrowPreference with an icon on the start side. The icon is typically used to represent an action or category.

```kotlin
ArrowPreference(
    title = "Personal Information",
    summary = "View and edit your profile",
    startAction = {
        Icon(
            imageVector = MiuixIcons.Contacts,
            contentDescription = "Personal Icon",
            tint = MiuixTheme.colorScheme.onBackground,
            modifier = Modifier.padding(end = 16.dp)
        )
    },
    onClick = { /* Handle click event */ }
)
```

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

### Basic WindowDialog Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowdialog.md

Demonstrates how to open and display a basic WindowDialog. It includes a button to trigger the dialog and a confirm button within the dialog content that uses LocalDismissState to dismiss itself.

```kotlin
var showDialog by remember { mutableStateOf(false) }

TextButton(
    text = "Open",
    onClick = { showDialog = true }
)

WindowDialog(
    title = "WindowDialog",
    summary = "A basic window-level dialog",
    show = showDialog,
    onDismissRequest = { showDialog = false }
) {
    val dismiss = LocalDismissState.current
    TextButton(
        text = "Confirm",
        onClick = { dismiss?.invoke() },
        modifier = Modifier.fillMaxWidth()
    )
}
```

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

### SliderPreference with Start Icon

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/sliderpreference.md

Integrate a start icon within the SliderPreference to visually represent its function, such as a volume icon. The value range is set from 0 to 1.

```kotlin
var volume by remember { mutableFloatStateOf(0.7f) }

SliderPreference(
    value = volume,
    onValueChange = { volume = it },
    title = "Volume",
    summary = "${(volume * 100).roundToInt()}%",
    startAction = {
        Icon(
            imageVector = MiuixIcons.Basic.Audio,
            contentDescription = "Volume Icon",
            tint = MiuixTheme.colorScheme.onBackground,
            modifier = Modifier.padding(end = 16.dp)
        )
    },
    valueRange = 0f..1f
)
```

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

### RangeSliderPreference with Start Icon and Key Points

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/rangesliderpreference.md

Shows how to add a custom start icon and define key points for a frequency range slider. The summary displays the frequency in Hz.

```kotlin
var frequencyRange by remember { mutableStateOf(20f..20000f) }

RangeSliderPreference(
    value = frequencyRange,
    onValueChange = { frequencyRange = it },
    title = "Frequency Range",
    summary = "${frequencyRange.start.roundToInt()}Hz - ${frequencyRange.endInclusive.roundToInt()}Hz",
    startAction = {
        Icon(
            imageVector = MiuixIcons.Basic.Audio,
            contentDescription = "Frequency Icon",
            tint = MiuixTheme.colorScheme.onBackground,
            modifier = Modifier.padding(end = 16.dp)
        )
    },
    valueRange = 20f..20000f,
    showKeyPoints = true,
    keyPoints = listOf(20f, 100f, 1000f, 5000f, 10000f, 20000f)
)
```

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

### Basic OverlayDialog Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlaydialog.md

Demonstrates how to show and dismiss a basic OverlayDialog with a title, summary, and a confirm button. Ensure the component is used within a Scaffold to provide MiuixPopupHost.

```kotlin
var showDialog by remember { mutableStateOf(false) }

Scaffold {
    TextButton(
        text = "Show Dialog",
        onClick = { showDialog = true }
    )

    OverlayDialog(
        title = "Dialog Title",
        summary = "This is a basic dialog example that can contain various content.",
        show = showDialog,
        onDismissRequest = { showDialog = false } // Close dialog
    ) {
        TextButton(
            text = "Confirm",
            onClick = { showDialog = false }, // Close dialog
            modifier = Modifier.fillMaxWidth()
        )
    }
}
```

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

### Vector Icon Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/icon.md

Displays a vector icon using the `imageVector` parameter.

```kotlin
Icon(
    imageVector = MiuixIcons.Settings,
    contentDescription = "Settings Icon"
)
```

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

### Import BasicComponent

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/basiccomponent.md

Import the BasicComponent class from the Miuix library.

```kotlin
import top.yukonga.miuix.kmp.basic.BasicComponent
```

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

### Basic Icon Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/icon.md

Demonstrates the basic usage of the Icon component with a vector image.

```kotlin
Icon(
    imageVector = MiuixIcons.Favorites,
    contentDescription = "Favorites"
)
```

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

### Basic Small TopAppBar Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/topappbar.md

Demonstrates the basic implementation of a SmallTopAppBar within a Scaffold. Includes navigation and action icons.

```kotlin
Scaffold(
    topBar = {
        SmallTopAppBar(
            title = "Title",
            navigationIcon = {
                IconButton(onClick = { /* Handle click event */ }) {
                    Icon(MiuixIcons.Back, contentDescription = "Back")
                }
            },
            actions = {
                IconButton(onClick = { /* Handle click event */ }) {
                    Icon(MiuixIcons.More, contentDescription = "More")
                }
            }
        )
    }
)
```

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

### Custom Style Button

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/button.md

Example showcasing how to customize the appearance of a TextButton, including its color and corner radius.

```APIDOC
## Custom Style Button

```kotlin
Button(
    onClick = { /* Handle click event */ },
    colors = ButtonDefaults.buttonColors(
        color = Color.Red.copy(alpha = 0.7f)
    ),
    cornerRadius = 8.dp
) {
    Text("Custom Button")
}
```
```

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

### Basic Usage of BasicComponent

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/basiccomponent.md

Demonstrates the basic usage of BasicComponent to display a title and summary. Suitable for simple list or setting items.

```kotlin
BasicComponent(
    title = "Setting Item Title",
    summary = "This is the description text for the setting item"
)
```

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

### Custom Painter Icon Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/icon.md

Uses a custom Painter, such as one loaded from resources, to display an icon.

```kotlin
Icon(
    painter = painterResource(Res.drawable.ic_custom),
    contentDescription = "Custom Icon"
)
```

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

### License Header for Kotlin Files

Source: https://github.com/compose-miuix-ui/miuix/blob/main/CLAUDE.md

All .kt and .kts files require a license header. Spotless automatically fills in the current year.

```kotlin
// Copyright $YEAR, compose-miuix-ui contributors
// SPDX-License-Identifier: Apache-2.0
```

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

### Disabled Dropdown Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowdropdownpreference.md

Shows how to render a disabled WindowDropdownPreference. This is useful for indicating that an option is currently unavailable or not applicable.

```kotlin
WindowDropdownPreference(
    title = "Disabled Dropdown",
    summary = "This dropdown menu is currently unavailable",
    items = listOf("Option 1"),
    selectedIndex = 0,
    onSelectedIndexChange = {},
    enabled = false
)
```

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

### Slider with Haptic Feedback

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/slider.md

Enable haptic feedback for the Slider by providing a `hapticEffect`. This example uses `SliderHapticEffect.Step` for step-based feedback.

```kotlin
var value by remember { mutableFloatStateOf(0.5f) }

Slider(
    value = value,
    onValueChange = { value = it },
    hapticEffect = SliderHapticEffect.Step
)
```

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

### Disabled Dropdown Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlaydropdownpreference.md

Shows how to create a disabled OverlayDropdownPreference. The component will be non-interactive and typically displays a summary indicating its unavailability.

```kotlin
OverlayDropdownPreference(
    title = "Disabled Dropdown",
    summary = "This dropdown menu is currently unavailable",
    items = listOf("Option 1"),
    selectedIndex = 0,
    onSelectedIndexChange = {},
    enabled = false
)
```

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

### Import Surface Component

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/surface.md

Import the Surface component from the Miuix basic library.

```kotlin
import top.yukonga.miuix.kmp.basic.Surface
```

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

### Using BasicComponent in a List

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/basiccomponent.md

Demonstrates how to iterate over a list of options and render a BasicComponent for each one. This is useful for creating dynamic lists of selectable items.

```kotlin
val options = listOf("Option 1", "Option 2", "Option 3", "Option 4")

Column {
    options.forEach { option ->
        BasicComponent(
            title = option,
            onClick = { /* Handle option click */ }
        )
    }
}
```

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

### TooltipColors for Rich Tooltips

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/tooltip.md

Example of configuring colors for a RichTooltip using TooltipDefaults.richTooltipColors. Customizes container, content, title, and action colors.

```kotlin
val richColors = TooltipDefaults.richTooltipColors(
    containerColor = MiuixTheme.colorScheme.surfaceContainer,
    contentColor = MiuixTheme.colorScheme.onSurfaceContainerVariant,
    titleContentColor = MiuixTheme.colorScheme.onSurfaceContainer,
    actionContentColor = MiuixTheme.colorScheme.primary,
)
```

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

### Basic Text Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/text.md

Demonstrates the simplest way to display a string of text using the Text component.

```kotlin
Text("This is a basic text")
```

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

### Explicitly Use MiuixOverscrollEffect

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/guide/utils.md

Manually obtain and use an `MiuixOverscrollEffect` instance, for example, to share it with a custom `Modifier.overscroll()` or for specific component configurations.

```kotlin
val overscrollEffect = rememberOverscrollEffect()

LazyColumn(
    modifier = Modifier.overscroll(overscrollEffect),
    overscrollEffect = overscrollEffect,
) {
    items(list) { item -> ItemRow(item) }
}
```

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

### NumberPicker with Custom Label Format

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/numberpicker.md

Customize the displayed label for each number using a lambda. This example formats numbers with leading zeros.

```kotlin
var hour by remember { mutableIntStateOf(9) }

NumberPicker(
    value = hour,
    onValueChange = { hour = it },
    range = 0..23,
    label = { it.toString().padStart(2, '0') }  // "00", "01", ... "23"
)
```

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

### Basic SwitchPreference Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/switchpreference.md

Demonstrates the basic implementation of SwitchPreference with a title and a toggleable switch.

```kotlin
var isChecked by remember { mutableStateOf(false) }

SwitchPreference(
    title = "Switch Option",
    checked = isChecked,
    onCheckedChange = { isChecked = it }
)
```

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

### Dynamic Icon based on State

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/icon.md

Example of a dynamic Icon within an IconButton that changes its appearance based on a boolean state variable.

```kotlin
var isSelected by remember { mutableStateOf(false) }

IconButton(onClick = { isSelected = !isSelected }) {
    Icon(
        imageVector = if (isSelected) MiuixIcons.FavoritesFill else MiuixIcons.Favorites,
        contentDescription = "Favorites",
    )
}
```

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

### Basic OverlayDropdownPreference Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlaydropdownpreference.md

Demonstrates the basic usage of OverlayDropdownPreference with a title and a list of string options.

```kotlin
var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("Option 1", "Option 2", "Option 3")

Scaffold {
    OverlayDropdownPreference(
        title = "Dropdown Menu",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it }
    )
}
```

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

### Basic Usage of WindowCascadingListPopup

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowcascadinglistpopup.md

Demonstrates how to use WindowCascadingListPopup with a two-level cascading menu. This example shows a sort group and a view mode submenu.

```kotlin
var showPopup by remember { mutableStateOf(false) }
var sortIndex by remember { mutableStateOf(0) }
var viewIndex by remember { mutableStateOf(0) }

val sortLabels = listOf("Sort by capture date", "Sort by date added")
val viewLabels = listOf("Group by date", "Compact")
val entries = listOf(
    DropdownEntry(
        items = sortLabels.mapIndexed { idx, label ->
            DropdownItem(
                text = label,
                selected = sortIndex == idx,
                onClick = { sortIndex = idx },
            )
        },
    ),
    DropdownEntry(
        items = listOf(
            DropdownItem(
                text = "View mode",
                children = viewLabels.mapIndexed { idx, label ->
                    DropdownItem(
                        text = label,
                        selected = viewIndex == idx,
                        onClick = { viewIndex = idx },
                    )
                },
            ),
        ),
    ),
)

Box {
    TextButton(
        text = "Click to show menu",
        onClick = { showPopup = true },
    )
    WindowCascadingListPopup(
        show = showPopup,
        entries = entries,
        onDismissRequest = { showPopup = false },
    )
}
```

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

### WindowDropdownPreference with Summary

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowdropdownpreference.md

Shows how to add a summary to the WindowDropdownPreference to provide additional context.

```kotlin
var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("中文", "English", "日本語")

WindowDropdownPreference(
    title = "Language Settings",
    summary = "Choose your preferred language",
    items = options,
    selectedIndex = selectedIndex,
    onSelectedIndexChange = { selectedIndex = it }
)
```

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

### IconButton with Custom Background Color

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/iconbutton.md

Customizes the background color of an IconButton using the 'backgroundColor' parameter. The example uses a semi-transparent light gray.

```kotlin
IconButton(
    onClick = { /* Handle click event */ },
    backgroundColor = Color.LightGray.copy(alpha = 0.3f)
) {
    Icon(
        imageVector = MiuixIcons.Favorites,
        contentDescription = "Favorites"
    )
}
```

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

### Basic ArrowPreference Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/arrowpreference.md

Demonstrates the basic usage of ArrowPreference with a title and a click handler for navigation.

```kotlin
ArrowPreference(
    title = "Setting Item",
    onClick = { /* Handle click event */ }
)
```

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

### Import WindowSpinnerPreference

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowspinnerpreference.md

Import the necessary components for using WindowSpinnerPreference.

```kotlin
import top.yukonga.miuix.kmp.preference.WindowSpinnerPreference
import top.yukonga.miuix.kmp.basic.DropdownEntry
import top.yukonga.miuix.kmp.basic.DropdownItem
```

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

### Colors Data Class Example (ButtonColors)

Source: https://github.com/compose-miuix-ui/miuix/blob/main/CLAUDE.md

An immutable data class to hold color values for a component. Use @Immutable annotation for such data classes.

```kotlin
@Immutable
data class ButtonColors(
    val color: Color,
    val disabledColor: Color,
    val contentColor: Color,
    val disabledContentColor: Color,
)
```

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

### Disabled State Example

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowiconcascadingdropdownmenu.md

Shows how to render the WindowIconCascadingDropdownMenu in a disabled state using the 'enabled' parameter. The menu is also implicitly disabled if no items are present.

```kotlin
WindowIconCascadingDropdownMenu(
    entry = DropdownEntry(items = listOf(DropdownItem(text = "Option 1"))),
    enabled = false,
) {
    Icon(imageVector = MiuixIcons.MoreCircle, contentDescription = "More")
}
```

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

### ArrowPreference with Summary

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/arrowpreference.md

Shows how to use ArrowPreference with both a title and a summary for more detailed information.

```kotlin
ArrowPreference(
    title = "Wireless Network",
    summary = "Connected to WIFI-HOME",
    onClick = { /* Handle click event */ }
)
```

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

### SwitchPreference with Summary

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/switchpreference.md

Shows how to add a summary text below the title for SwitchPreference to provide more context.

```kotlin
var wifiEnabled by remember { mutableStateOf(false) }

SwitchPreference(
    title = "WiFi",
    summary = "Turn on to connect to wireless networks",
    checked = wifiEnabled,
    onCheckedChange = { wifiEnabled = it }
)
```

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

### NumberPicker with Custom Colors

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/numberpicker.md

Customize the text colors for selected and unselected items in the NumberPicker. This example sets the selected text to red and unselected to gray.

```kotlin
var value by remember { mutableIntStateOf(5) }

NumberPicker(
    value = value,
    onValueChange = { value = it },
    range = 0..10,
    colors = NumberPickerDefaults.colors(
        selectedTextColor = Color.Red,
        unselectedTextColor = Color.Gray
    )
)
```

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

### Basic WindowListPopup Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowlistpopup.md

Demonstrates how to use WindowListPopup to create a dropdown menu that does not require a Scaffold. Ensure the `show` state is managed to control visibility and `onDismissRequest` is handled to close the popup.

```kotlin
var showPopup by remember { mutableStateOf(false) }
var selectedIndex by remember { mutableStateOf(0) }
val items = listOf("Option 1", "Option 2", "Option 3")

Box {
    TextButton(
        text = "Click to show menu",
        onClick = { showPopup = true }
    )
    WindowListPopup(
        show = showPopup,
        alignment = PopupPositionProvider.Align.Start,
        onDismissRequest = { showPopup = false }
    ) {
        val dismiss = LocalDismissState.current
        ListPopupColumn {
            items.forEachIndexed {
                index,
                string ->
                DropdownImpl(
                    text = string,
                    optionSize = items.size,
                    isSelected = selectedIndex == index,
                    index = index,
                    onSelectedIndexChange = {
                        selectedIndex = index
                        dismiss?.invoke()
                    }
                )
            }
        }
    }
}
```

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

### NumberPicker with Custom Visible Item Count

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/numberpicker.md

Control the number of items visible in the NumberPicker at any given time. This example shows 3 visible items.

```kotlin
var value by remember { mutableIntStateOf(5) }

NumberPicker(
    value = value,
    onValueChange = { value = it },
    range = 1..100,
    visibleItemCount = 3
)
```

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

### Import WindowIconDropdownMenu

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowicondropdownmenu.md

Import the necessary components for using WindowIconDropdownMenu and its related data structures.

```kotlin
import top.yukonga.miuix.kmp.menu.WindowIconDropdownMenu
import top.yukonga.miuix.kmp.basic.DropdownEntry
import top.yukonga.miuix.kmp.basic.DropdownItem
```

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

### CheckboxPreference within a Dialog

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/checkboxpreference.md

Integrate CheckboxPreferences into a dialog for settings or confirmations. This example shows how to use ArrowPreference to trigger a dialog containing multiple CheckboxPreferences.

```kotlin
var showDialog by remember { mutableStateOf(false) }
var privacyOption by remember { mutableStateOf(false) }
var analyticsOption by remember { mutableStateOf(false) }

Scaffold {
    ArrowPreference(
        title = "Privacy Settings",
        onClick = { showDialog = true },
        holdDownState = showDialog
    )

    OverlayDialog(
        title = "Privacy Settings",
        show = showDialog,
        onDismissRequest = { showDialog = false } // Close dialog
    ) {
        Card {
            CheckboxPreference(
                title = "Privacy Policy",
                summary = "Agree to the privacy policy terms",
                checked = privacyOption,
                onCheckedChange = { privacyOption = it }
            )

            CheckboxPreference(
                title = "Analytics Data",
                summary = "Allow collection of anonymous usage data to improve services",
                checked = analyticsOption,
                onCheckedChange = { analyticsOption = it }
            )
        }

        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier.padding(top = 12.dp)
        ) {
            TextButton(
                text = "Cancel",
                onClick = { showDialog = false }, // Close dialog
                modifier = Modifier.weight(1f)
            )
            Spacer(Modifier.width(16.dp))
            TextButton(
                text = "Confirm",
                onClick = { showDialog = false }, // Close dialog
                modifier = Modifier.weight(1f),
                colors = ButtonDefaults.textButtonColorsPrimary() // Use theme colors
            )
        }
    }
}
```

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

### ArrowPreference with Dialog for Selection

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/arrowpreference.md

This example shows how to use ArrowPreference in conjunction with a dialog for making selections. It manages dialog state and updates a selected value.

```kotlin
var showDialog by remember { mutableStateOf(false) }
var language by remember { mutableStateOf("Simplified Chinese") }

Scaffold {
ArrowPreference(
    title = "Language Settings",
    summary = "Select app display language",
    endActions = {
        Text(language)
    },
    onClick = { showDialog = true },
    holdDownState = showDialog
)
    OverlayDialog(
        title = "Select Language",
        show = showDialog,
        onDismissRequest = { showDialog = false }
    ) {
        // Dialog content
        Card {
            ArrowPreference(
                title = "Simplified Chinese",
                onClick = {
                    language = "Simplified Chinese"
                    showDialog = false
                }
            )
            ArrowPreference(
                title = "English",
                onClick = {
                    language = "English"
                    showDialog = false
                }
            )
        }
        Row(
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            TextButton(
                text = "Cancel",
                onClick = { showDialog = false },
                modifier = Modifier.weight(1f).padding(top = 8.dp)
            )
        }
    }
}
```

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

### Add Scroll End Haptic Feedback

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/guide/utils.md

Apply the `scrollEndHaptic` modifier to a scrollable container to trigger haptic feedback when the user flings to the start or end boundaries.

```kotlin
LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        // Add scroll end haptic feedback
        .scrollEndHaptic(
            hapticFeedbackType = HapticFeedbackType.TextHandleMove // Default value
        )
) {
    // List content
}
```

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

### Component Defaults Object Example (ButtonDefaults)

Source: https://github.com/compose-miuix-ui/miuix/blob/main/CLAUDE.md

Defines default values for component dimensions and provides a composable factory for colors. Color factories must be @Composable.

```kotlin
object ButtonDefaults {
    val MinWidth = 58.dp                    // Constant dimensions as val
    val MinHeight = 40.dp
    val CornerRadius = 16.dp
    val InsideMargin = PaddingValues(horizontal = 16.dp, vertical = 13.dp)

    @Composable
    fun buttonColors (
        color: Color = MiuixTheme.colorScheme.secondaryVariant,
        disabledColor: Color = MiuixTheme.colorScheme.disabledSecondaryVariant,
        contentColor: Color = MiuixTheme.colorScheme.onSecondaryVariant,
        disabledContentColor: Color = MiuixTheme.colorScheme.disabledOnSecondaryVariant,
    ): ButtonColors = remember(color, disabledColor, contentColor, disabledContentColor) {
        ButtonColors(
            color = color,
            disabledColor = disabledColor,
            contentColor = contentColor,
            disabledContentColor = disabledContentColor,
        )
    }
}
```

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

### Basic OverlaySpinnerPreference Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/overlayspinnerpreference.md

Demonstrates the basic usage of OverlaySpinnerPreference with a simple list of options.

```kotlin
var selectedIndex by remember { mutableStateOf(0) }
val options = listOf(
    DropdownItem(text = "Option 1"),
    DropdownItem(text = "Option 2"),
    DropdownItem(text = "Option 3")
)

Scaffold {
    OverlaySpinnerPreference(
        title = "Dropdown Selector",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it }
    )
}
```

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

### Import WindowListPopup and ListPopupColumn

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowlistpopup.md

Import the necessary components for using WindowListPopup and its content.

```kotlin
import top.yukonga.miuix.kmp.window.WindowListPopup
import top.yukonga.miuix.kmp.basic.ListPopupColumn
```

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

### Basic Scaffold Usage with Top Bar

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/scaffold.md

Demonstrates how to use the Scaffold component to create a basic page layout that includes a top bar. The content area should account for the padding provided by the Scaffold.

```kotlin
Scaffold(
    topBar = {
        SmallTopAppBar(title = "Title" )
    },
    content = { paddingValues ->
        // The content area needs to consider padding
        Box(
            modifier = Modifier
                .padding(top = paddingValues.calculateTopPadding(), start = 26.dp)
                .fillMaxSize()
        ) {
            Text("Content Area")
        }
    }
)
```

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

### Basic Snackbar Usage with Scaffold

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/snackbar.md

Demonstrates how to display a basic Snackbar message using Scaffold and SnackbarHostState. Ensure SnackbarHostState and a CoroutineScope are initialized.

```kotlin
val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(
    snackbarHost = {
        SnackbarHost(state = snackbarHostState)
    },
) {
    Box(
        modifier = Modifier
            .padding(paddingValues),
    ) {
        TextButton(
            text = "Show message",
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("This is a short message")
                }
            },
        )
    }
}
```

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

### Get Default Dialog Background Color

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/windowdialog.md

Retrieves the default background color for dialogs. This function is part of the window dialog component's utility functions.

```kotlin
val dialogBackgroundColor = backgroundColor()
```

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

### Tooltip Imports

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/tooltip.md

Import necessary Tooltip components and related utilities from the Miuix library.

```kotlin
import top.yukonga.miuix.kmp.basic.TooltipBox
import top.yukonga.miuix.kmp.basic.RichTooltipBox
import top.yukonga.miuix.kmp.basic.PlainTooltip
import top.yukonga.miuix.kmp.basic.RichTooltip
import top.yukonga.miuix.kmp.basic.TooltipState
import top.yukonga.miuix.kmp.basic.rememberTooltipState
import top.yukonga.miuix.kmp.basic.TooltipDefaults
import top.yukonga.miuix.kmp.basic.TooltipAnchorPosition
```

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

### Basic NavigationBar Usage

Source: https://github.com/compose-miuix-ui/miuix/blob/main/docs/components/navigationbar.md

Implement a basic NavigationBar with text labels and icons. Ensure Scaffold is used for proper layout.

```kotlin
var selectedIndex by remember { mutableStateOf(0) }
val items = listOf("Home", "Profile", "Settings")
val icons = listOf(MiuixIcons.VerticalSplit, MiuixIcons.Contacts, MiuixIcons.Settings)

Scaffold(
    bottomBar = {
        NavigationBar {
            items.forEachIndexed {
 index, label ->
                NavigationBarItem(
                    selected = selectedIndex == index,
                    onClick = { selectedIndex = index },
                    icon = icons[index],
                    label = label
                )
            }
        }
    }
)
```