### Basic IntroShowcase Setup in Jetpack Compose

Source: https://context7.com/canopas/compose-intro-showcase/llms.txt

Demonstrates how to set up a basic IntroShowcase in a Jetpack Compose screen. This example shows sequential highlighting of UI elements with custom styles and content, managing the showcase visibility with state.

```kotlin
@Composable
fun ShowcaseSample() {
    var showAppIntro by remember { mutableStateOf(true) }
    val introShowcaseState = rememberIntroShowcaseState()

    IntroShowcase(
        showIntroShowCase = showAppIntro,
        dismissOnClickOutside = false,
        onShowCaseCompleted = {
            // All showcase items completed
            showAppIntro = false
        },
        state = introShowcaseState
    ) {
        Scaffold(
            modifier = Modifier.fillMaxSize(),
            topBar = {
                TopAppBar(
                    title = { Text("My App") },
                    actions = {
                        IconButton(
                            onClick = { /* search action */ },
                            modifier = Modifier.introShowCaseTarget(
                                index = 0,
                                style = ShowcaseStyle.Default.copy(
                                    backgroundColor = Color(0xFF9AD0EC),
                                    backgroundAlpha = 0.98f,
                                    targetCircleColor = Color.White
                                ),
                                content = {
                                    Column {
                                        Text(
                                            text = "Search Feature",
                                            color = Color.White,
                                            fontSize = 24.sp,
                                            fontWeight = FontWeight.Bold
                                        )
                                        Text(
                                            text = "Tap here to search through content",
                                            color = Color.White,
                                            fontSize = 16.sp
                                        )
                                    }
                                }
                            )
                        ) {
                            Icon(Icons.Filled.Search, contentDescription = "Search")
                        }
                    }
                )
            }
        ) {
            Content(Modifier.padding(paddingValues))
        }
    }
}
```

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

### Compose Showcase State Management

Source: https://context7.com/canopas/compose-intro-showcase/llms.txt

Manages and controls the state of the showcase programmatically. It initializes the showcase state with a starting index and provides functions to reset or advance through the showcase targets. This function is a Composable function that uses Jetpack Compose's state management.

```kotlin
import androidx.compose.foundation.layout.* 
import androidx.compose.material.* 
import androidx.compose.runtime.* 
import androidx.compose.ui.Modifier 
import androidx.compose.ui.unit.dp 
import androidx.compose.ui.graphics.Color 
import androidx.compose.ui.text.font.FontWeight 
import androidx.compose.ui.tooling.preview.Preview 
import com.canopas.lib.showcase.ShowcaseStyle 
import com.canopas.lib.showcase.introShowCaseTarget 
import com.canopas.lib.showcase.model.IntroShowcaseState 
import com.canopas.lib.showcase.rememberIntroShowcaseState 
import com.canopas.lib.showcase.IntroShowcase 
import androidx.compose.material.icons.Icons 
import androidx.compose.material.icons.filled.ArrowBack 

@Composable
fun ShowcaseStateManagement() {
    // Initialize state with starting index
    val showcaseState = rememberIntroShowcaseState(initialIndex = 0)
    var showIntro by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxSize()) {
        // Display current state information
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text(
                    text = "Showcase State Info",
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold
                )
                Spacer(modifier = Modifier.height(8.dp))
                Text("Current Index: ${showcaseState.currentTargetIndex}")
                Text("Current Target: ${showcaseState.currentTarget?.index ?: "None"}")
            }
        }

        // Control buttons
        Button(
            onClick = { showIntro = true },
            modifier = Modifier.padding(horizontal = 16.dp)
        ) {
            Text("Start Showcase")
        }

        Button(
            onClick = {
                // Reset to beginning
                showcaseState.reset()
                showIntro = true
            },
            modifier = Modifier.padding(horizontal = 16.dp)
        ) {
            Text("Restart from Beginning")
        }

        // Define showcase targets
        Text(
            text = "Feature 1",
            modifier = Modifier
                .padding(16.dp)
                .introShowCaseTarget(
                    index = 0,
                    style = ShowcaseStyle.Default,
                    content = {
                        Text(
                            text = "First feature in the tour",
                            color = Color.White,
                            fontSize = 18.sp
                        )
                    }
                )
        )

        Text(
            text = "Feature 2",
            modifier = Modifier
                .padding(16.dp)
                .introShowCaseTarget(
                    index = 1,
                    style = ShowcaseStyle.Default,
                    content = {
                        Text(
                            text = "Second feature in the tour",
                            color = Color.White,
                            fontSize = 18.sp
                        )
                    }
                )
        )
    }

    // Showcase wrapper
    IntroShowcase(
        showIntroShowCase = showIntro,
        dismissOnClickOutside = true,
        onShowCaseCompleted = {
            showIntro = false
            // Optional: Save completion state to preferences
            // saveShowcaseCompleted()
        },
        state = showcaseState
    ) {
        // Content already defined above
    }
}

```

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

### Control Showcase State with Kotlin Compose

Source: https://context7.com/canopas/compose-intro-showcase/llms.txt

This snippet demonstrates how to control the state of an introductory showcase in Kotlin using Jetpack Compose. It includes buttons to start and reset the tour, and displays the current showcase index. The showcase itself is managed by the `IntroShowcase` composable, with targets defined using the `introShowCaseTarget` modifier.

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.canopas.lib.showcase.IntroShowcase
import com.canopas.lib.showcase.ShowcaseStyle
import com.canopas.lib.showcase.introShowCaseTarget
import com.canopas.lib.showcase.rememberIntroShowcaseState

@Composable
fun IntroShowcaseScope.ControlledShowcase() {
    val showcaseState = rememberIntroShowcaseState(initialIndex = 0)
    var showIntro by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxSize()) {
        // Control buttons
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Button(onClick = { showIntro = true }) {
                Text("Start Tour")
            }

            Button(
                onClick = { showcaseState.reset() },
                modifier = Modifier.introShowCaseTarget(
                    index = 0,
                    style = ShowcaseStyle.Default,
                    content = {
                        Text(
                            text = "Restart the showcase tour from beginning",
                            color = Color.White,
                            fontSize = 18.sp
                        )
                    }
                )
            ) {
                Text("Reset Tour")
            }
        }

        // Access current state
        Text(
            text = "Current showcase index: ${showcaseState.currentTargetIndex}",
            modifier = Modifier.padding(16.dp)
        )

        // Showcase target
        Card(
            modifier = Modifier
                .padding(16.dp)
                .introShowCaseTarget(
                    index = 1,
                    style = ShowcaseStyle.Default.copy(
                        backgroundColor = Color.DarkGray,
                        backgroundAlpha = 0.9f,
                        targetCircleColor = Color.Yellow
                    ),
                    content = {
                        Column {
                            Text(
                                text = "Important Feature",
                                color = Color.Yellow,
                                fontSize = 24.sp,
                                fontWeight = FontWeight.Bold
                            )
                            Text(
                                text = "This is a key feature you should know about",
                                color = Color.White,
                                fontSize = 16.sp
                            )
                        }
                    }
                )
        ) {
            Text("Feature Content", modifier = Modifier.padding(24.dp))
        }
    }

    IntroShowcase(
        showIntroShowCase = showIntro,
        dismissOnClickOutside = true,
        onShowCaseCompleted = { showIntro = false },
        state = showcaseState
    ) {
        // Your composable content here
    }
}
```

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

### Implement App Feature Showcase with Jetpack Compose

Source: https://github.com/canopas/compose-intro-showcase/blob/master/docs/index.md

This Kotlin code demonstrates how to use the IntroShowcase composable to highlight app features. It shows how to configure the showcase, including dismissal options, completion callbacks, and styling for target elements like a FloatingActionButton.

```kotlin
@Composable
fun ShowcaseSample() {
    var showAppIntro by remember {
        mutableStateOf(true)
    }
    
    IntroShowcase(
        showIntroShowCase = showAppIntro,
        dismissOnClickOutside = false,
        onShowCaseCompleted = {
            //App Intro finished!!
            showAppIntro = false
        },
    ) {
        FloatingActionButton(
            onClick = {},
            modifier = Modifier.introShowCaseTarget(
                index = 0,
                style = ShowcaseStyle.Default.copy(
                    backgroundColor = Color(0xFF1C0A00), // specify color of background
                    backgroundAlpha = 0.98f, // specify transparency of background
                    targetCircleColor = Color.White // specify color of target circle
                ),
                // specify the content to show to introduce app feature
                content = {
                    Column {
                        Text(
                            text = "Check emails",
                            color = Color.White,
                            fontSize = 24.sp,
                            fontWeight = FontWeight.Bold
                        )
                        Text(
                            text = "Click here to check/send emails",
                            color = Color.White,
                            fontSize = 16.sp
                        )
                        Spacer(modifier = Modifier.height(10.dp))
                        Icon(
                            painterResource(id = R.drawable.right_arrow),
                            contentDescription = null,
                            modifier = Modifier
                                .size(80.dp)
                                .align(Alignment.End),
                            tint = Color.White
                        )
                    }
                }
            ),
            backgroundColor = ThemeColor,
            contentColor = Color.White,
            elevation = FloatingActionButtonDefaults.elevation(6.dp)
        ) {
            Icon(
                Icons.Filled.Email,
                contentDescription = "Email"
            )
        }
    }
}
```

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

### Jetpack Compose Rich Showcase with Custom IntroShowcase

Source: https://context7.com/canopas/compose-intro-showcase/llms.txt

This snippet demonstrates creating a rich content showcase using Jetpack Compose and the introShowCase library. It shows how to customize the showcase's appearance and content, including adding images, text, and icons to highlight specific UI elements like a FloatingActionButton and an IconButton. The functionality is tied to state management for controlling the showcase's visibility.

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.* 
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material3.* 
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.canopas.introShowCase.ShowcaseStyle
import com.canopas.introShowCase.introShowCaseTarget

@Composable
fun RichContentShowcase() {
    var showIntro by remember { mutableStateOf(true) }

    IntroShowcase(
        showIntroShowCase = showIntro,
        dismissOnClickOutside = true,
        onShowCaseCompleted = { showIntro = false } 
    ) {
        Scaffold(
            floatingActionButton = {
                FloatingActionButton(
                    onClick = { /* email action */ },
                    modifier = Modifier.introShowCaseTarget(
                        index = 0,
                        style = ShowcaseStyle.Default.copy(
                            backgroundColor = Color(0xFF1976D2),
                            backgroundAlpha = 0.98f,
                            targetCircleColor = Color.White
                        ),
                        content = {
                            Column(
                                modifier = Modifier.padding(16.dp),
                                horizontalAlignment = Alignment.CenterHorizontally
                            ) {
                                // Custom image illustration
                                Image(
                                    painter = painterResource(id = R.drawable.email_illustration),
                                    contentDescription = null,
                                    modifier = Modifier
                                        .size(120.dp)
                                        .padding(bottom = 16.dp)
                                )

                                Text(
                                    text = "Send Messages",
                                    color = Color.White,
                                    fontSize = 26.sp,
                                    fontWeight = FontWeight.Bold,
                                    textAlign = TextAlign.Center
                                )

                                Spacer(modifier = Modifier.height(8.dp))

                                Text(
                                    text = "Tap this button to compose and send messages to your contacts",
                                    color = Color.White.copy(alpha = 0.9f),
                                    fontSize = 16.sp,
                                    textAlign = TextAlign.Center,
                                    modifier = Modifier.padding(horizontal = 8.dp)
                                )

                                Spacer(modifier = Modifier.height(16.dp))

                                // Directional arrow
                                Icon(
                                    painter = painterResource(id = R.drawable.arrow_down),
                                    contentDescription = null,
                                    tint = Color.White,
                                    modifier = Modifier.size(48.dp)
                                )
                            }
                        }
                    )
                ) { 
                    Icon(Icons.Filled.Email, contentDescription = "Email")
                }
            }
        ) {
            paddingValues ->
            Box(modifier = Modifier.padding(paddingValues)) {
                // Main content
                IconButton(
                    onClick = { /* back action */ },
                    modifier = Modifier.introShowCaseTarget(
                        index = 1,
                        style = ShowcaseStyle.Default.copy(
                            backgroundColor = Color(0xFF388E3C),
                            backgroundAlpha = 0.98f,
                            targetCircleColor = Color.White
                        ),
                        content = {
                            Row(
                                modifier = Modifier.padding(16.dp),
                                verticalAlignment = Alignment.CenterVertically
                            ) {
                                Image(
                                    painter = painterResource(id = R.drawable.navigation_guide),
                                    contentDescription = null,
                                    modifier = Modifier
                                        .size(80.dp)
                                        .padding(end = 16.dp)
                                )

                                Column {
                                    Text(
                                        text = "Navigation",
                                        color = Color.White,
                                        fontSize = 24.sp,
                                        fontWeight = FontWeight.Bold
                                    )
                                    Text(
                                        text = "Go back to the previous screen",
                                        color = Color.White,
                                        fontSize = 16.sp
                                    )
                                }
                            }
                        }
                    )
                ) {
                    Icon(painter = painterResource(id = R.drawable.back_arrow), contentDescription = "Back")
                }
            }
        }
    }
}

// Dummy R.drawable and IntroShowcase for compilation
object R {
    object drawable {
        val email_illustration = 0
        val arrow_down = 1
        val navigation_guide = 2
        val back_arrow = 3
    }
}

@Composable
fun IntroShowcase( 
    showIntroShowCase: Boolean,
    dismissOnClickOutside: Boolean,
    onShowCaseCompleted: () -> Unit,
    content: @Composable () -> Unit
) {
    // Placeholder implementation
    if (showIntroShowCase) {
        // Show showcase overlay
    }
    content()
}

```

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

### Jetpack Compose Multiple UI Element Showcase with IntroShowcase

Source: https://context7.com/canopas/compose-intro-showcase/llms.txt

This Kotlin code snippet demonstrates how to use the `IntroShowcase` composable to highlight multiple UI elements in sequence. It defines targets for a profile picture, a settings button, and a FloatingActionButton, each with custom styles and content. The showcase is managed by `rememberIntroShowcaseState` and can be dismissed by clicking outside.

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.canopas.introshowcase.compose.introShowCaseTarget
import com.canopas.introshowcase.compose.rememberIntroShowcaseState
import com.canopas.introshowcase.intro.IntroShowcase
import com.canopas.introshowcase.intro.ShowcaseStyle
import com.canopas.introshowcase.R // Assuming R is available for drawables

@Composable
fun MultipleTargetsExample() {
    var showIntro by remember { mutableStateOf(true) }
    val showcaseState = rememberIntroShowcaseState()

    IntroShowcase(
        showIntroShowCase = showIntro,
        dismissOnClickOutside = true,
        onShowCaseCompleted = { showIntro = false },
        state = showcaseState
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            // First target - Profile picture
            Image(
                painter = painterResource(id = R.drawable.profile_pic), // Replace with your drawable resource
                contentDescription = "Profile",
                modifier = Modifier
                    .size(80.dp)
                    .introShowCaseTarget(
                        index = 0,
                        style = ShowcaseStyle.Default.copy(
                            backgroundColor = Color(0xFFFFCC80),
                            backgroundAlpha = 0.95f,
                            targetCircleColor = Color.White
                        ),
                        content = {
                            Column {
                                Text(
                                    text = "Your Profile",
                                    color = Color.White,
                                    fontSize = 22.sp,
                                    fontWeight = FontWeight.Bold
                                )
                                Text(
                                    text = "Tap to view and edit your profile details",
                                    color = Color.White,
                                    fontSize = 16.sp
                                )
                            }
                        }
                    )
            )

            // Second target - Settings button
            Button(
                onClick = { /* settings */ },
                modifier = Modifier
                    .padding(16.dp)
                    .introShowCaseTarget(
                        index = 1,
                        style = ShowcaseStyle.Default.copy(
                            backgroundColor = Color(0xFF7C99AC),
                            backgroundAlpha = 0.98f,
                            targetCircleColor = Color.White
                        ),
                        content = {
                            Column {
                                Text(
                                    text = "App Settings",
                                    color = Color.White,
                                    fontSize = 22.sp,
                                    fontWeight = FontWeight.Bold
                                )
                                Text(
                                    text = "Configure your preferences here",
                                    color = Color.White,
                                    fontSize = 16.sp
                                )
                            }
                        }
                    )
            ) {
                Text("Settings")
            }

            // Third target - FAB
            FloatingActionButton(
                onClick = { /* compose action */ },
                modifier = Modifier
                    .align(Alignment.End)
                    .padding(16.dp)
                    .introShowCaseTarget(
                        index = 2,
                        style = ShowcaseStyle.Default.copy(
                            backgroundColor = Color(0xFF1C0A00),
                            backgroundAlpha = 0.98f,
                            targetCircleColor = Color.White
                        ),
                        content = {
                            Column {
                                Text(
                                    text = "Create New",
                                    color = Color.White,
                                    fontSize = 22.sp,
                                    fontWeight = FontWeight.Bold
                                )
                                Text(
                                    text = "Start creating something new",
                                    color = Color.White,
                                    fontSize = 16.sp
                                )
                            }
                        }
                    )
            ) {
                Icon(Icons.Filled.Add, contentDescription = "Add")
            }
        }
    }
}
```

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

### Add Intro Showcase View Dependency (Gradle)

Source: https://github.com/canopas/compose-intro-showcase/blob/master/README.md

This snippet shows how to add the Intro Showcase View library to your Android project using Gradle. Ensure you have the latest version for the most up-to-date features and bug fixes.

```gradle
implementation 'com.canopas.intro-showcase-view:introshowcaseview:2.0.1'
```

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

### Add Intro Showcase View Dependency

Source: https://github.com/canopas/compose-intro-showcase/blob/master/docs/index.md

This snippet shows how to add the Intro Showcase View library to your Android project's Gradle dependencies. Ensure you replace '<latest-version>' with the actual latest version available on Maven Central.

```gradle
implementation 'com.canopas.intro-showcase-view:introshowcaseview:<latest-version>'
```

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

### Define Custom Showcase Styles in Kotlin

Source: https://context7.com/canopas/compose-intro-showcase/llms.txt

This snippet shows how to define custom styles for showcases using the ShowcaseStyle composable in Jetpack Compose. It covers setting background color, alpha, and target circle color for different themes like dark, light, and accent colors. The custom styles are then applied to different UI elements like IconButton, Button, and FloatingActionButton.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Info
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.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// Assuming IntroShowcase, ShowcaseStyle, and introShowCaseTarget are defined elsewhere
// import com.your_app_package.IntroShowcase
// import com.your_app_package.ShowcaseStyle
// import com.your_app_package.introShowCaseTarget

@Composable
fun CustomStyledShowcase() {
    var showIntro by remember { mutableStateOf(true) }

    // Define custom styles
    val darkStyle = ShowcaseStyle(
        backgroundColor = Color.Black,
        backgroundAlpha = 0.95f,
        targetCircleColor = Color.Cyan
    )

    val lightStyle = ShowcaseStyle(
        backgroundColor = Color.White,
        backgroundAlpha = 0.92f,
        targetCircleColor = Color.Blue
    )

    val accentStyle = ShowcaseStyle.Default.copy(
        backgroundColor = Color(0xFF6200EE),
        backgroundAlpha = 0.98f,
        targetCircleColor = Color(0xFFBB86FC)
    )

    IntroShowcase(
        showIntroShowCase = showIntro,
        dismissOnClickOutside = false,
        onShowCaseCompleted = { showIntro = false }
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            // Dark themed showcase
            IconButton(
                onClick = { /* action */ },
                modifier = Modifier.introShowCaseTarget(
                    index = 0,
                    style = darkStyle,
                    content = {
                        Column(
                            modifier = Modifier.padding(16.dp),
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Icon(
                                painter = painterResource(R.drawable.ic_info), // Replace with actual drawable resource
                                contentDescription = null,
                                tint = Color.Cyan,
                                modifier = Modifier.size(48.dp)
                            )
                            Spacer(modifier = Modifier.height(8.dp))
                            Text(
                                text = "Dark Theme Feature",
                                color = Color.White,
                                fontSize = 20.sp,
                                fontWeight = FontWeight.Bold
                            )
                        }
                    }
                )
            ) {
                Icon(Icons.Filled.Info, contentDescription = "Info")
            }

            // Light themed showcase
            Button(
                onClick = { /* action */ },
                modifier = Modifier
                    .padding(16.dp)
                    .introShowCaseTarget(
                        index = 1,
                        style = lightStyle,
                        content = {
                            Text(
                                text = "Light colored background with contrasting text",
                                color = Color.Black,
                                fontSize = 18.sp,
                                modifier = Modifier.padding(16.dp)
                            )
                        }
                    )
            ) {
                Text("Action Button")
            }

            // Accent colored showcase
            FloatingActionButton(
                onClick = { /* action */ },
                modifier = Modifier
                    .padding(16.dp)
                    .introShowCaseTarget(
                        index = 2,
                        style = accentStyle,
                        content = {
                            Column(modifier = Modifier.padding(16.dp)) {
                                Text(
                                    text = "Primary Action",
                                    color = Color(0xFFBB86FC),
                                    fontSize = 22.sp,
                                    fontWeight = FontWeight.Bold
                                )
                                Text(
                                    text = "Uses app\'s accent colors for branding consistency",
                                    color = Color.White,
                                    fontSize = 16.sp
                                )
                            }
                        }
                    )
            ) {
                Icon(Icons.Filled.Add, contentDescription = "Add")
            }
        }
    }
}
```

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