Compose-Sushi

https://zomato.github.io/compose-sushi
Admin
Compose-Sushi is a sleek, modular Compose UI design system by Zomato, providing consistent and...
Tokens:24,596
Snippets:246
Trust Score:8.3
Update:3 months ago
Show doc for...
Tokens:
Raw
### Basic SushiTag Example

Source: https://zomato.github.io/compose-sushi/sushitag

Demonstrates the basic usage of the SushiTag component with text, type, and size properties.

```kotlin
SushiTag(
    props = SushiTagProps(
        text = "Capsule",
        type = SushiTagType.Capsule,
        size = SushiTagSize.Medium
    )
)
```

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

### Basic SushiCard Example

Source: https://zomato.github.io/compose-sushi/sushicard

Demonstrates a basic SushiCard with rounded corners and internal text content. Use this for standard card layouts.

```kotlin
SushiCard(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        SushiText(
            props = SushiTextProps(
                text = "Card Title",
                type = SushiTextType.SemiBold600
            )
        )

        SushiText(
            props = SushiTextProps(
                text = "Card content goes here with any composable content",
                type = SushiTextType.Regular400
            ),
            modifier = Modifier.padding(top = 8.dp)
        )
    }
}
```

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

### SushiRadioButton Example

Source: https://zomato.github.io/compose-sushi/sushiradiobutton

Demonstrates how to use SushiRadioButton to create a group of selectable options, such as delivery methods. The parent component manages the selected state.

```kotlin
var selectedOption by remember { mutableIntStateOf(1) }

SushiRadioButton(
    props = SushiRadioButtonProps(
        selected = selectedOption == 1,
        text = SushiTextProps(
            text = "Standard Delivery",
            type = SushiTextType.Medium500
        ),
        subText = SushiTextProps(
            text = "Free • 3-5 business days",
            type = SushiTextType.Regular300,
            color = SushiTheme.colors.text.secondary
        )
    ),
    onClick = { selectedOption = 1 },
    modifier = Modifier.padding(vertical = 4.dp)
)

SushiRadioButton(
    props = SushiRadioButtonProps(
        selected = selectedOption == 2,
        text = SushiTextProps(
            text = "Express Delivery",
            type = SushiTextType.Medium500
        ),
        subText = SushiTextProps(
            text = "$5.99 • 1-2 business days",
            type = SushiTextType.Regular300,
            color = SushiTheme.colors.text.secondary
        )
    ),
    onClick = { selectedOption = 2 },
    modifier = Modifier.padding(vertical = 4.dp)
)

```

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

### Basic SushiHorizontalPager Setup

Source: https://zomato.github.io/compose-sushi/sushihorizontalpager

Use this to create a basic horizontal pager with a specified number of pages. Content for each page is defined within the lambda.

```kotlin
val pagerState = rememberPagerState(pageCount = { 5 }) // 5 pages

SushiHorizontalPager(
    state = pagerState,
    modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
) {
    page ->
    // Content for each page
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        SushiText(
            props = SushiTextProps(
                text = "Page ${page + 1}",
                type = SushiTextType.Bold700
            )
        )
    }
}
```

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

### Default SushiLoader

Source: https://zomato.github.io/compose-sushi/sushiloader

Displays a default SushiLoader with its standard animation and colors. No specific setup is required beyond including the component.

```kotlin
SushiLoader(
    props = SushiLoaderProps()
)
```

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

### Auto-Play Animation from Asset

Source: https://zomato.github.io/compose-sushi/sushianimation

Displays a Lottie animation from the assets directory that auto-plays and loops infinitely. Use when an animation should start immediately and repeat.

```kotlin
// Auto-play animation from asset file
val autoPlayProps by rememberSushiAnimationProps(
    source = LottieAssetSource("animation.json"),
    playback = SushiAnimationPlayback.AutoPlay(
        isPlaying = true,
        restartOnPlay = true,
        reverseOnRepeat = false,
        speed = 1f,
        iterations = -1  // Infinite loop
    )
)

SushiAnimation(
    props = autoPlayProps,
    modifier = Modifier
        .width(200.dp)
        .height(200.dp)
)
```

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

### Displaying Snackbars with SushiSnackbarHostState

Source: https://zomato.github.io/compose-sushi/sushisnackbar

Use SushiSnackbarHostState within a Scaffold to manage and display snackbar messages. This example demonstrates showing a basic snackbar, one with an action button, and a custom-colored snackbar.

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

Scaffold(
    modifier = Modifier.fillMaxSize(),
    snackbarHost = {
        SushiSnackbarHost(
            hostState = snackbarHostState,
            modifier = Modifier.padding(16.dp)
        )
    }
) {
    // Your screen content

    SushiButton(
        props = SushiButtonProps(text = "Show Snackbar"),
        onClick = {
            scope.launch {
                // Basic snackbar
                val basicProps = SushiSnackbarProps(
                    message = SushiTextProps(
                        text = "This is a basic snackbar message",
                        type = SushiTextType.Regular400
                    ),
                    snackbarDuration = SushiSnackbarDuration.Short
                )
                snackbarHostState.showSnackbar(basicProps)

                // Snackbar with action
                val actionProps = SushiSnackbarProps(
                    message = SushiTextProps(text = "Item removed from cart"),
                    actionText = SushiTextProps(text = "UNDO"),
                    snackbarDuration = SushiSnackbarDuration.Long
                )
                snackbarHostState.showSnackbar(actionProps)

                // Custom colored snackbar
                val customProps = SushiSnackbarProps(
                    message = SushiTextProps(
                        text = "Payment successful!",
                        type = SushiTextType.Medium500,
                        color = SushiTheme.colors.white
                    ),
                    containerColor = SushiTheme.colors.surface.success,
                    contentColor = SushiTheme.colors.white,
                    snackbarDuration = SushiSnackbarDuration.Short
                )
                snackbarHostState.showSnackbar(customProps)
            }
        }
    )
}
```

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

### Programmatic Value Manipulation

Source: https://zomato.github.io/compose-sushi/sushiotpinput

Provides examples of programmatically entering digits, clearing values, and checking the completion status of the OTP input.

```kotlin
// Pre-fill values
otpState.onDigitEntered(0, '1')
otpState.onDigitEntered(1, '2')
otpState.onDigitEntered(2, '3')
otpState.onDigitEntered(3, '4')

// Clear values
for (i in 0 until otpState.length) {
    otpState.onDigitDeleted(i)
}

// Check if complete
val isComplete = otpState.isComplete()


```

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

### Define TextStyle with OkraFontFamily

Source: https://zomato.github.io/compose-sushi/foundations/typography

Use OkraFontFamily for the main UI typeface. This example shows how to set a TextStyle with a specific font family and weight.

```kotlin
TextStyle(fontFamily = OkraFontFamily, fontWeight = FontWeight.Normal)
```

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

### Displaying Image and Animation with SushiMedia

Source: https://zomato.github.io/compose-sushi/sushimedia

Demonstrates how to use SushiMedia to display both static images and Lottie animations. Ensure necessary resources and playback configurations are set up.

```kotlin
// Display an image
val imageProps = SushiImageProps(
    painter = painterResource(R.drawable.my_image),
    contentDescription = "My Image",
    width = 200.dp,
    height = 150.dp,
    contentScale = ContentScale.Crop
)

SushiMedia(
    props = SushiMediaProps.Image(imageProps),
    modifier = Modifier.padding(16.dp)
)

// Display an animation (Lottie)
val animationProps by rememberSushiAnimationProps(
    source = LottieAssetSource("animation.json"),
    playback = SushiAnimationPlayback.AutoPlay(
        isPlaying = true,
        restartOnPlay = true,
        iterations = 3
    )
)

SushiMedia(
    props = SushiMediaProps.Animation(animationProps),
    modifier = Modifier.size(200.dp)
)


```

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

### Basic SushiBottomSheet Usage

Source: https://zomato.github.io/compose-sushi/sushibottomsheet

Demonstrates how to implement a basic SushiBottomSheet with a button to trigger its display and content within. Requires state management for visibility and coroutine scope for hiding.

```kotlin
var showBottomSheet by remember { mutableStateOf(false) }
val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()

SushiButton(
    props = SushiButtonProps(text = "Show Bottom Sheet"),
    onClick = { showBottomSheet = true },
    modifier = Modifier.fillMaxWidth()
)

if (showBottomSheet) {
    SushiBottomSheet(
        props = SushiBottomSheetProps(),  // Using default props
        onDismissRequest = { showBottomSheet = false },
        sheetState = sheetState
    ) {
        // Bottom sheet content
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(24.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            SushiText(
                props = SushiTextProps(
                    text = "Bottom Sheet Title",
                    type = SushiTextType.Bold700
                )
            )

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

            SushiText(
                props = SushiTextProps(
                    text = "This is the content of the bottom sheet.",
                    type = SushiTextType.Regular400
                )
            )

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

            SushiButton(
                props = SushiButtonProps(text = "Close"),
                onClick = {
                    scope.launch {
                        sheetState.hide()
                        showBottomSheet = false
                    }
                },
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}
```

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

### Basic SushiDropDown Usage

Source: https://zomato.github.io/compose-sushi/sushidropdown

Demonstrates how to set up and display a basic SushiDropDown with text, checkbox, and radio button items. Requires state management for visibility and event handling for item interactions.

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

SushiButton(
    props = SushiButtonProps(
        text = "Show Dropdown",
        prefixIcon = SushiIconProps(code = SushiIconCodes.IconChevronDown)
    ),
    onClick = { isExpanded = true }
)

val items = persistentListOf(
    DropDownItem.TextItem(SushiTextProps(text = "Option 1")),
    DropDownItem.TextItem(SushiTextProps(text = "Option 2")),

    DropDownItem.CheckBoxItem(SushiCheckBoxProps(
        text = SushiTextProps(text = "Checkbox Option"),
        checked = false
    )),

    DropDownItem.RadioButtonItem(SushiRadioButtonProps(
        text = SushiTextProps(text = "Radio Option"),
        selected = true
    ))
)

if (isExpanded) {
    SushiDropDown(
        props = SushiDropDownProps(
            expanded = true,
            items = items
        ),
        onDismissRequest = { isExpanded = false },
        onEvent = { index, event ->
            when (event) {
                is DropDownEvent.OnTextItemClicked -> {
                    isExpanded = false
                }
                is DropDownEvent.OnCheckChanged -> {
                }
                is DropDownEvent.OnRadioButtonCheckChanged -> {
                }
            }
        }
    )
}
```

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

### Basic SushiViewFlipper Usage

Source: https://zomato.github.io/compose-sushi/sushiviewflipper

Demonstrates basic usage of SushiViewFlipper with a list of search suggestions. Ensure you have defined the `searchSuggestions` list and `SushiText` component.

```kotlin
val searchSuggestions = listOf(
    "Search for \"Pizza\"",
    "Search for \"Burger\"",
    "Search for \"Pasta\"",
    "Search for \"Sushi\"",
    "Search for \"Salad\""
)

// Create a ViewFlipper that cycles through the suggestions
SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = searchSuggestions.size  // Number of items to display
    ),
    modifier = Modifier.fillMaxWidth()
) { index ->
    // Content for each item based on index
    SushiText(
        props = SushiTextProps(
            text = searchSuggestions[index],
            color = SushiTheme.colors.text.secondary
        ),
        modifier = Modifier.padding(16.dp)
    )
}
```

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

### Customizing SushiViewFlipper Animation Duration

Source: https://zomato.github.io/compose-sushi/sushiviewflipper

Adjusts the animation duration and flip interval for SushiViewFlipper. This example uses a slower animation and a longer interval between flips.

```kotlin
// Custom animation duration
SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = items.size,
        animationDuration = 1200,  // Slower animation (1.2 seconds)
        flipInterval = 4000L       // Show each item for 4 seconds
    )
) { index ->
    // Item content
}
```

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

### Create Custom SushiTypography Instance

Source: https://zomato.github.io/compose-sushi/foundations/typography

Create a custom SushiTypography instance to define your own text styles. Ensure all required styles are filled, referencing Type.kt for details.

```kotlin
val customTypography = SushiTypography(
    materialTypography = MaterialTypography,
    bold400 = TextStyle(fontWeight = FontWeight.Bold, fontSize = 24.sp, fontFamily = OkraFontFamily),
    // ...fill every required style (see Type.kt)
)
```

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

### Toggling Between Image and Animation with SushiMedia

Source: https://zomato.github.io/compose-sushi/sushimedia

Shows how to dynamically switch between displaying an image and an animation using SushiMedia by managing state. A button click toggles the media type.

```kotlin
// State to track current media type
var mediaProps by remember { 
    mutableStateOf<SushiMediaProps>(
        SushiMediaProps.Image(imageProps)
    ) 
}

// Button to toggle between image and animation
SushiButton(
    props = SushiButtonProps(text = "Toggle Media Type"),
    onClick = {
        mediaProps = if (mediaProps is SushiMediaProps.Image) {
            SushiMediaProps.Animation(animationProps)
        } else {
            SushiMediaProps.Image(imageProps)
        }
    }
)

// Display the current media
SushiMedia(
    props = mediaProps,
    modifier = Modifier.size(200.dp)
)


```

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

### Basic SushiTooltipBox with Text Tooltip

Source: https://zomato.github.io/compose-sushi/sushitooltip

Demonstrates how to use SushiTooltipBox to display a basic tooltip containing only text when hovering or clicking a SushiButton. Requires remembering a tooltip state and a coroutine scope.

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

SushiTooltipBox(
    positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
    tooltip = {
        SushiTooltip(
            props = SushiTooltipProps(
                text = SushiTextProps(
                    text = "This is a basic tooltip with text only",
                    color = SushiTheme.colors.text.inverse
                )
            )
        )
    },
    state = tooltipState
) {
    // Anchor element - the tooltip will be positioned relative to this
    SushiButton(
        props = SushiButtonProps(text = "Hover or Click Me"),
        onClick = {
            scope.launch {
                tooltipState.show()
            }
        }
    )
}
```

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

### Programmatically Show Tooltip

Source: https://zomato.github.io/compose-sushi/sushitooltip

Illustrates how to programmatically show a tooltip using the `show()` function on the tooltip state within a coroutine scope.

```kotlin
scope.launch {
    tooltipState.show()
}
```

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

### SushiTooltip with Custom Content

Source: https://zomato.github.io/compose-sushi/sushitooltip

Shows how to use the `content` lambda in SushiTooltip to provide completely custom UI elements, such as a Column with SushiText, instead of just text.

```kotlin
SushiTooltip(
    props = SushiTooltipProps(
        containerColor = SushiTheme.colors.blue.v700
    ),
    content = {
        Column(modifier = Modifier.padding(16.dp)) {
            SushiText(
                props = SushiTextProps(
                    text = "Custom Tooltip",
                    type = SushiTextType.Bold600,
                    color = Color.White
                )
            )

            // More custom content...
        }
    }
)
```

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

### Basic SushiAlertDialog Usage

Source: https://zomato.github.io/compose-sushi/sushidialog

Demonstrates how to show and dismiss a basic alert dialog with title, subtitle, and two action buttons. Use this for standard confirmation or cancellation flows.

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

SushiButton(
    props = SushiButtonProps(text = "Show Dialog"),
    onClick = { showDialog = true },
    modifier = Modifier.fillMaxWidth()
)

if (showDialog) {
    SushiAlertDialog(
        props = SushiAlertDialogProps(
            title = SushiTextProps(
                text = "Confirm Action",
                type = SushiTextType.Bold600,
                textAlign = TextAlign.Center
            ),
            subtitle = SushiTextProps(
                text = "Are you sure you want to proceed with this action?",
                type = SushiTextType.Regular400,
                textAlign = TextAlign.Center
            ),
            positiveButton = SushiButtonProps(
                text = "Confirm",
                type = SushiButtonType.Text,
                horizontalArrangement = Arrangement.Center
            ),
            negativeButton = SushiButtonProps(
                text = "Cancel",
                type = SushiButtonType.Text,
                horizontalArrangement = Arrangement.Center
            )
        ),
        onDismissRequest = { showDialog = false },
        onPositiveButtonClick = { 
            // Handle positive action
            showDialog = false 
        },
        onNegativeButtonClick = { showDialog = false }
    ) {
        // Optional additional content
        Spacer(modifier = Modifier.height(8.dp))
    }
}
```

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

### Basic SushiRatingBar Usage

Source: https://zomato.github.io/compose-sushi/sushiratingbar

Demonstrates the basic usage of SushiRatingBar with default settings. Use this to collect user ratings or display rating information.

```kotlin
var rating by remember { mutableFloatStateOf(3.5f) }

SushiRatingBar(
    props = SushiRatingBarProps(
        rating = rating
    ),
    onRatingChange = {
        rating = it
        // Handle the rating change
    }
)
```

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

### Basic SushiOTPTextField Usage

Source: https://zomato.github.io/compose-sushi/sushiotpinput

Demonstrates the default filled style and alternative outlined and underlined styles for OTP input. Automatically focuses the first field on load.

```kotlin
val otpState = rememberOtpState(6)

SushiOTPTextField(
    state = otpState,
    autoFocus = true, // Automatically focus the first field
    onComplete = { code ->
        // Handle the completed 6-digit code
        println("OTP completed: $code")
    }
)

// Or use the outlined style
SushiOutlinedOTPTextField(
    state = otpState,
    autoFocus = true,
    onComplete = { code ->
        // Handle the completed 6-digit code
    }
)

// Or use the underlined style
SushiUnderlinedOTPTextField(
    state = otpState,
    autoFocus = true,
    onComplete = { code ->
        // Handle the completed 6-digit code
    }
)


```

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

### Display Basic Image with SushiImage

Source: https://zomato.github.io/compose-sushi/sushiimage

Use this snippet to display a local image resource with fixed dimensions, a specific shape, and content scaling. Ensure the `painterResource` is correctly referenced.

```kotlin
SushiImage(
    props = SushiImageProps(
        painter = painterResource(id = R.drawable.food_image),
        width = 200.dp,
        height = 150.dp,
        contentDescription = "Food image",
        shape = RoundedCornerShape(8.dp),
        contentScale = ContentScale.Crop
    ),
    modifier = Modifier.padding(8.dp)
)
```

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

### Basic SushiTextField Usage

Source: https://zomato.github.io/compose-sushi/sushitextfield

Demonstrates the basic usage of SushiTextField with a label, prefix, keyboard options, and support text. This snippet shows how to manage the text state and handle value changes.

```kotlin
var text by remember { mutableStateOf("") }

SushiTextField(
    props = SushiTextFieldProps(
        text = text,
        label = SushiTextProps(text = "Phone Number"),
        prefixText = SushiTextProps(text = "+91"),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone),
        supportText = SushiTextProps(text = "Enter your mobile number")
    ),
    onValueChange = { text = it },
    modifier = Modifier.fillMaxWidth()
)

```

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

### Create a Solid SushiButton with Prefix Icon

Source: https://zomato.github.io/compose-sushi/sushibutton

This snippet demonstrates how to create a solid-styled SushiButton with a star icon as a prefix. It shows the basic structure for defining button text, type, and an icon.

```kotlin
SushiButton(
    props = SushiButtonProps(
        text = "Solid Button",
        type = SushiButtonType.Solid,
        prefixIcon = SushiIconProps(code = SushiIconCodes.IconStarFill)
    ),
    onClick = { /* Handle click */ },
    modifier = Modifier.fillMaxWidth()
)

```

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

### Basic SushiSwitch Usage

Source: https://zomato.github.io/compose-sushi/sushiswitch

Demonstrates how to use SushiSwitch to manage a boolean state for push notifications. The switch is configured with primary and secondary text labels and applied with vertical padding.

```kotlin
var notificationsEnabled by remember { mutableStateOf(true) }

SushiSwitch(
    props = SushiSwitchProps(
        isChecked = notificationsEnabled,
        text = SushiTextProps(
            text = "Push Notifications",
            type = SushiTextType.Medium500
        ),
        subText = SushiTextProps(
            text = "Receive alerts about new offers and updates",
            type = SushiTextType.Regular300,
            color = SushiTheme.colors.text.secondary
        )
    ),
    onCheckedChange = { notificationsEnabled = it },
    modifier = Modifier.padding(vertical = 4.dp)
)

```

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

### SushiTooltip with Prefix and Suffix Icons

Source: https://zomato.github.io/compose-sushi/sushitooltip

Shows a SushiTooltip configured with both a prefix and a suffix image alongside the text content. Useful for adding visual cues like info or warning icons.

```kotlin
SushiTooltip(
    props = SushiTooltipProps(
        text = SushiTextProps(
            text = "Important information",
            color = SushiTheme.colors.text.inverse
        ),
        prefixImage = SushiImageProps(
            painterResource(R.drawable.ic_info),
            width = 20.dp,
            contentDescription = "Info",
            colorFilter = ColorFilter.tint(SushiTheme.colors.yellow.v500.value)
        ),
        suffixImage = SushiImageProps(
            painterResource(R.drawable.ic_warning),
            width = 20.dp,
            contentDescription = "Warning"
        )
    )
)
```

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

### Create a Vertical Pager

Source: https://zomato.github.io/compose-sushi/sushiverticalpager

Initialize a PagerState for vertical paging and then create the SushiVerticalPager with specified dimensions and content for each page.

```kotlin
val pagerState = rememberPagerState(pageCount = { 5 })

SushiVerticalPager(
    state = pagerState,
    modifier = Modifier
        .fillMaxWidth()
        .height(400.dp)
) {
    page ->
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        SushiText(
            props = SushiTextProps(
                text = "Vertical Page ${page + 1}",
                type = SushiTextType.Bold700
            )
        )
    }
}
```

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

### Displaying an Icon with SushiIcon

Source: https://zomato.github.io/compose-sushi/sushiicon

This snippet shows how to use the SushiIcon component to render a specific icon with a defined size. Ensure SushiIconCodes and SushiIconSize are imported.

```kotlin
SushiIcon(
    SushiIconProps(
        code = SushiIconCodes.IconMStarfilled,
        size = SushiIconSize.Size900
    )
)

```

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

### Custom Colored SushiTooltip with Warning Icon

Source: https://zomato.github.io/compose-sushi/sushitooltip

Illustrates creating a SushiTooltip with a custom background color (red.v600) and a white warning icon. The text color is also set to white for contrast.

```kotlin
SushiTooltip(
    props = SushiTooltipProps(
        text = SushiTextProps(
            text = "Warning: This action cannot be undone",
            color = Color.White
        ),
        containerColor = SushiTheme.colors.red.v600,
        prefixImage = SushiImageProps(
            painterResource(R.drawable.ic_warning),
            width = 20.dp,
            contentDescription = "Warning",
            colorFilter = ColorFilter.tint(Color.White)
        )
    )
)
```

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

### Basic SushiCheckBox Usage

Source: https://zomato.github.io/compose-sushi/sushicheckbox

Demonstrates how to use the SushiCheckBox component with primary and secondary text labels, custom colors, and handling checked state changes. This is useful for creating standard agreement checkboxes.

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

SushiCheckBox(
    props = SushiCheckBoxProps(
        checked = checked,
        text = SushiTextProps(text = "I accept the terms and conditions"),
        subText = SushiTextProps(
            text = "By checking this box, you agree to our Terms of Service",
            type = SushiTextType.Regular300,
            color = SushiTheme.colors.text.secondary
        ),
        color = SushiTheme.colors.green.v600
    ),
    onCheckedChange = { checked = it },
    modifier = Modifier.fillMaxWidth()
)

```

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

### Creating a Custom AppTheme

Source: https://zomato.github.io/compose-sushi/foundations/theme

Create a reusable AppTheme composable to encapsulate global logic or enforce branding. This custom theme wraps SushiTheme with specific configurations.

```kotlin
@Composable
fun AppTheme(content: @Composable () -> Unit) {
    SushiTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes
    ) {
        content()
    }
}

```

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

### SushiRatingBar with Partial Stars

Source: https://zomato.github.io/compose-sushi/sushiratingbar

Demonstrates displaying partial stars by setting a fractional rating value. This allows for more granular representation of ratings.

```kotlin
SushiRatingBar(
    props = SushiRatingBarProps(
        rating = 3.7f  // Will show 3 full stars and 1 star at 70% filled
    ),
    onRatingChange = { rating = it }
)
```

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

### Render Clickable Links in Markdown

Source: https://zomato.github.io/compose-sushi/markdown/overview

Create clickable hyperlinks within SushiText by using standard Markdown link syntax. Ensure the URL is correctly formatted.

```kotlin
SushiText(
    props = SushiTextProps(
        text = "This is an [Clickable](https://google.com) text",
        color = SushiTheme.colors.text.success,
        type = SushiTextType.Regular200
    )
)

```

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

### Using Custom AppTheme

Source: https://zomato.github.io/compose-sushi/foundations/theme

Apply your custom AppTheme to your application content to utilize the defined global styling and logic.

```kotlin
AppTheme { MyAppContent() }

```

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

### Custom OTP Length and Styles

Source: https://zomato.github.io/compose-sushi/sushiotpinput

Shows how to configure the OTP input for a custom length (4 digits) and apply custom text styling.

```kotlin
// Custom length (4 digits)
val otpState4 = rememberOtpState(4)
SushiOTPTextField(
    state = otpState4,
    autoFocus = false,
    onComplete = { code -> /* Handle 4-digit code */ }
)

// Custom text style
SushiOTPTextField(
    state = otpState,
    textStyle = TextStyle(
        fontSize = 24.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center,
        color = SushiTheme.colors.blue.v700.value
    ),
    onComplete = { code -> /* Handle code */ }
)


```

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

### Read-only and Keyboard Type

Source: https://zomato.github.io/compose-sushi/sushiotpinput

Shows how to set the OTP input to a read-only state for displaying pre-filled codes and how to specify the keyboard type for input.

```kotlin
// Read-only state (for displaying a pre-filled code)
SushiOTPTextField(
    state = otpState,
    readOnly = true,
    onComplete = { code -> /* Handle code */ }
)

// Alphanumeric keyboard (accepts letters and numbers)
SushiOTPTextField(
    state = otpState,
    keyboardType = KeyboardType.Text,
    onComplete = { code -> /* Handle code */ }
)


```

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

### Basic SushiTheme Usage

Source: https://zomato.github.io/compose-sushi/foundations/theme

Wrap your app or screen content with SushiTheme to apply the unified design system. Ensure you import the necessary SushiTheme component.

```kotlin
import com.zomato.sushi.compose.theme.SushiTheme

SushiTheme {
    MyAppContent()
}

```

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

### Password Masking and Custom Colors

Source: https://zomato.github.io/compose-sushi/sushiotpinput

Illustrates how to mask OTP input using `PasswordVisualTransformation` and apply custom colors to the component.

```kotlin
// Password masking
SushiOTPTextField(
    state = otpState,
    visualTransformation = PasswordVisualTransformation(),
    onComplete = { code -> /* Handle code */ }
)

// Custom colors
val customColors = SushiOTPTextFieldDefaults.filledColors().copy(
    focusedContainerColor = SushiTheme.colors.blue.v100,
    unfocusedContainerColor = SushiTheme.colors.blue.v050,
    focusedTextColor = SushiTheme.colors.blue.v900,
    unfocusedTextColor = SushiTheme.colors.blue.v700,
    cursorColor = SushiTheme.colors.blue.v600
)

SushiOTPTextField(
    state = otpState,
    colors = customColors,
    onComplete = { code -> /* Handle code */ }
)


```

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

### Setting Background Color

Source: https://zomato.github.io/compose-sushi/foundations/color-scheme

Apply theme background colors to Compose elements like a `Box` using `SushiTheme.colors.background.primary`.

```kotlin
Box(
    modifier = Modifier.background(SushiTheme.colors.background.primary)
) {
   // Content
}

```

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

### Displaying Styled Text with Icons and Decorations

Source: https://zomato.github.io/compose-sushi/sushitext

Use this snippet to display text with custom styling, including prefix/suffix icons, colors, typography, horizontal arrangement, and text decorations like underlines. Ensure SushiIconProps and SushiColorData are correctly configured.

```kotlin
SushiText(
    props = SushiTextProps(
        text = "Hello World!",
        prefixIcon = SushiIconProps(code = SushiIconCodes.IconMoon),
        suffixIcon = SushiIconProps(code = SushiIconCodes.IconContactlessDining, color = SushiColorData(ColorName.Blue, ColorVariation.Variation500)),
        color = SushiColorData(ColorName.Red, ColorVariation.Variation500),
        type = SushiTextType.Regular300,
        horizontalArrangement = Arrangement.SpaceBetween,
        textDecoration = SushiTextDecoration.Underline()
    ),
    Modifier.fillMaxWidth()
)

```

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

### Display Network Image with Aspect Ratio using SushiImage

Source: https://zomato.github.io/compose-sushi/sushiimage

This snippet demonstrates displaying an image from a network URL using `rememberAsyncImagePainter` and maintaining a specific aspect ratio. It utilizes `fillMaxWidth()` for responsive width and applies a rounded corner shape.

```kotlin
val foodImagePainter = rememberAsyncImagePainter(
    model = "https://example.com/food.jpg"
)

SushiImage(
    props = SushiImageProps(
        painter = foodImagePainter,
        aspectRatio = 16f/9f,
        contentScale = ContentScale.Crop,
        shape = RoundedCornerShape(12.dp),
        contentDescription = "Food image with aspect ratio"
    ),
    modifier = Modifier.fillMaxWidth()
)
```

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

### SushiCard with Solid Border

Source: https://zomato.github.io/compose-sushi/sushicard

Illustrates creating a SushiCard with a solid border using the `border` parameter and a specified shape. Apply this for defined card boundaries.

```kotlin
SushiCard(
    border = BorderStroke(1.dp, SushiTheme.colors.grey.v300.value),
    shape = RoundedCornerShape(12.dp),
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    // Card content here
}
```

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

### Creating a Custom Color Scheme

Source: https://zomato.github.io/compose-sushi/foundations/color-scheme

Personalize your app by creating a custom `SushiColorScheme` using the `sushiLightColorScheme` function. This allows for customization of various color aspects like material, theme, base, text, and icon colors.

```kotlin
val CustomScheme = sushiLightColorScheme(
    materialColorScheme = ...,
    themeColorScheme = ...,
    baseColorScheme = ...,
    textColorScheme = ...,
    iconColorScheme = ...,
    ...
)

```

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

### SushiCard with Custom Background and Elevation

Source: https://zomato.github.io/compose-sushi/sushicard

Shows how to apply a custom background color and elevation to a SushiCard. Useful for visually distinguishing cards.

```kotlin
SushiCard(
    containerColor = SushiTheme.colors.blue.v100,
    elevation = 8.dp,
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    // Card content here
}
```

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

### Customized SushiRatingBar Configuration

Source: https://zomato.github.io/compose-sushi/sushiratingbar

Shows how to customize SushiRatingBar with a specific star count, spacing, and color. Adjust these properties to match your design system's requirements.

```kotlin
SushiRatingBar(
    props = SushiRatingBarProps(
        rating = rating,
        starCount = 4,                  // Show 4 stars instead of 5
        betweenSpacing = 12.dp,         // Custom spacing between stars
        tintColor = SushiTheme.colors.yellow.v600  // Custom star color
    ),
    onRatingChange = {
        rating = it
    },
    modifier = Modifier.height(32.dp)   // Custom height
)
```

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

### Dynamic SushiViewFlipper Content

Source: https://zomato.github.io/compose-sushi/sushiviewflipper

Demonstrates how to make the content of SushiViewFlipper dynamic by updating its `count` property. A `SushiButton` is provided to increment the item count.

```kotlin
// Create state for a dynamic item list
var itemCount by remember { mutableStateOf(3) }

// ViewFlipper with dynamic count
SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = itemCount  // Can be updated to change the number of items
    )
) { index ->
    // Content for the current index
}

// Button to update the content
SushiButton(
    props = SushiButtonProps(text = "Add Item"),
    onClick = {
        itemCount++
    }
)
```

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

### Render Colored and Bold Text in Markdown

Source: https://zomato.github.io/compose-sushi/markdown/overview

Use custom Markdown syntax within SushiText to apply color and weight. Ensure the text format matches the expected pattern for styling.

```kotlin
SushiText(
    props = SushiTextProps(
        text = "Hi <bold-700|{red-700|Kotlin User}>",
        color = SushiTheme.colors.text.success,
        type = SushiTextType.Regular200
    )
)

```

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

### SushiHorizontalPager with Custom Styling

Source: https://zomato.github.io/compose-sushi/sushihorizontalpager

Configure the pager with custom padding, spacing, page size, and offscreen page loading. User scrolling is enabled by default.

```kotlin
SushiHorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(horizontal = 32.dp), // Padding on sides
    pageSpacing = 16.dp, // Space between pages
    pageSize = PageSize.Fixed(180.dp), // Fixed page width
    beyondViewportPageCount = 2, // Keep 2 offscreen pages loaded
    userScrollEnabled = true // Allow user scrolling
) {
    page ->
    // Page content goes here
}
```

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

### SushiTag with Icon and Custom Colors

Source: https://zomato.github.io/compose-sushi/sushitag

Shows how to use SushiTag with a prefix icon and custom border and font colors for status indication.

```kotlin
SushiTag(
    props = SushiTagProps(
        text = "Vegetarian",
        type = SushiTagType.RoundedOutline,
        size = SushiTagSize.Small,
        prefixIcon = SushiIconProps(
            code = SushiIconCodes.IconCheck,
            color = SushiTheme.colors.green.v600
        ),
        borderColor = SushiTheme.colors.green.v600,
        fontColor = SushiTheme.colors.green.v600
    )
)
```

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

### SushiViewFlipper Component API

Source: https://zomato.github.io/compose-sushi/sushiviewflipper

Documentation for the SushiViewFlipper component and its customizable properties.

```APIDOC
## SushiViewFlipperProps

Parameter | Description  
---|---
`flipInterval` | Time in milliseconds between content flips (default: 3000ms)
`animationDuration` | Duration of the flip animation in milliseconds (default: 600ms)
`animationDirection` | Direction for the flip animation (FlipToTop or FlipToBottom)
`isPlaying` | Whether the flipper should be actively cycling (default: true)
`count` | Number of items to display in the flipper (default: 1)

## FlipAnimationDirection

Value | Description  
---|---
`FlipToTop` | New content slides in from bottom, current content slides out to top
`FlipToBottom` | New content slides in from top, current content slides out to bottom
```

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

### Add Sushi Compose UI Dependency

Source: https://zomato.github.io/compose-sushi/installation

Include this dependency in your project's build.gradle file to use Sushi Compose UI. Ensure mavenCentral() is listed in your repositories.

```gradle
repositories {
    mavenCentral()
}

dependencies {
    implementation("com.eternal.kits:sushi-compose:0.0.1")
}
```

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

### SushiAlertDialog with Image and Custom Content

Source: https://zomato.github.io/compose-sushi/sushidialog

Configures an alert dialog to display an image, title, subtitle, and a single action button. Suitable for success or informational messages.

```kotlin
// Dialog with image
SushiAlertDialog(
    props = SushiAlertDialogProps(
        image = SushiImageProps(
            painter = painterResource(R.drawable.success_icon),
            contentScale = ContentScale.Fit,
            bgColor = SushiTheme.colors.green.v100,
            width = 80.dp,
            height = 80.dp,
            shape = CircleShape
        ),
        title = SushiTextProps(text = "Success!"),
        subtitle = SushiTextProps(text = "Your order has been placed successfully."),
        positiveButton = SushiButtonProps(text = "OK")
    ),
    onDismissRequest = { /* handler */ },
    onPositiveButtonClick = { /* handler */ }
) {
    // Optional content
}
```

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

### SushiTooltip with Custom Shape and No Caret

Source: https://zomato.github.io/compose-sushi/sushitooltip

Demonstrates how to customize the shape of a SushiTooltip to have more rounded corners and remove the caret by setting `caretSize` to `DpSize.Unspecified`.

```kotlin
SushiTooltip(
    props = SushiTooltipProps(
        text = SushiTextProps(
            text = "This tooltip has a custom shape with no caret",
            color = SushiTheme.colors.text.inverse
        ),
        caretSize = DpSize.Unspecified,  // No caret
        shape = RoundedCornerShape(16.dp)  // More rounded corners
    )
)
```

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

### Basic SushiShimmer Usage

Source: https://zomato.github.io/compose-sushi/sushishimmer

Use this snippet for a standard shimmer effect with default properties. It's suitable for placeholder content like images and text.

```kotlin
SushiShimmer(
    props = SushiShimmerProps(),
    modifier = Modifier.fillMaxWidth()
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        // Header with circle and text
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            ShimmerItem(
                Modifier
                    .size(50.dp)
                    .clip(CircleShape)
            )
            Column {
                ShimmerItem(
                    Modifier
                        .height(16.dp)
                        .width(150.dp)
                        .clip(RoundedCornerShape(4.dp))
                )
                Spacer(modifier = Modifier.height(8.dp))
                ShimmerItem(
                    Modifier
                        .height(12.dp)
                        .width(100.dp)
                        .clip(RoundedCornerShape(4.dp))
                )
            }
        }

        // Content
        ShimmerItem(
            Modifier
                .fillMaxWidth()
                .height(120.dp)
                .clip(RoundedCornerShape(8.dp))
        )
    }
}
```

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

### SushiRadioButton Component API

Source: https://zomato.github.io/compose-sushi/sushiradiobutton

API documentation for the SushiRadioButton component, detailing its parameters and their descriptions.

```APIDOC
## SushiRadioButton

### Description
A customizable radio button component for the Sushi design system.

### Parameters
#### Path Parameters
- **id** (string) - Optional - Identifier for the radio button.
- **selected** (boolean) - Required - Whether the radio button is selected (true) or unselected (false).
- **text** (SushiTextProps) - Required - Primary text properties to display alongside the radio button.
- **subText** (SushiTextProps) - Optional - Secondary text properties to display below the primary text.
- **enabled** (boolean) - Optional - Whether the radio button is interactive (true) or disabled (false).
- **unselectedColor** (Color) - Optional - The color for the radio button when unselected.
- **selectedColor** (Color) - Optional - The color for the radio button when selected.
- **padding** (PaddingValues) - Optional - The padding around the radio button component.
- **verticalAlignment** (Alignment.Vertical) - Optional - The vertical alignment of the radio button relative to its text.
- **direction** (RadioButtonDirection) - Optional - The position of the radio button relative to its text (Start or End).
```

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

### Programmatic Navigation with SushiHorizontalPager

Source: https://zomato.github.io/compose-sushi/sushihorizontalpager

Navigate to specific pages programmatically using `animateScrollToPage`. This requires a `CoroutineScope` to launch the coroutine.

```kotlin
val scope = rememberCoroutineScope()
val pagerState = rememberPagerState(pageCount = { 5 })

SushiButton(
    props = SushiButtonProps(text = "Next Page"),
    onClick = {
        scope.launch {
            val nextPage = (pagerState.currentPage + 1) % pagerState.pageCount
            pagerState.animateScrollToPage(nextPage)
        }
    }
)
```

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

### Custom Colored SushiBottomSheet

Source: https://zomato.github.io/compose-sushi/sushibottomsheet

Applies custom background and content colors to the SushiBottomSheet using `containerColor` and `contentColor` props.

```kotlin
SushiBottomSheet(
    props = SushiBottomSheetProps(
        containerColor = SushiTheme.colors.blue.v050,  // Light blue background
        contentColor = SushiTheme.colors.blue.v900     // Dark blue text
    ),
    onDismissRequest = { /* handler */ }
) {
    // Content
}
```

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

### Apply Squircle Shape to a Box

Source: https://zomato.github.io/compose-sushi/shapes

Demonstrates how to clip a Box composable with a SquircleShape. Ensure SushiTheme is available for accessing dimensions.

```kotlin
Box(
    Modifier
        .clip(SquircleShape(radius = SushiTheme.dimens.spacing.base))
) {
    // Content
}

```

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

### Auto-Scrolling Carousel with SushiHorizontalPager

Source: https://zomato.github.io/compose-sushi/sushihorizontalpager

Implement an auto-scrolling carousel by using `LaunchedEffect` to repeatedly scroll to the next page at a defined interval. Ensure `autoScrollEnabled` is managed.

```kotlin
var autoScrollEnabled by remember { mutableStateOf(true) }
val pagerState = rememberPagerState(pageCount = { items.size })

LaunchedEffect(autoScrollEnabled) {
    if (autoScrollEnabled) {
        while(true) {
            delay(3000) // Scroll every 3 seconds
            val nextPage = (pagerState.currentPage + 1) % pagerState.pageCount
            pagerState.animateScrollToPage(nextPage)
        }
    }
}

SushiHorizontalPager(
    state = pagerState,
    // other properties
) {
    page ->
    // Page content
}
```

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

### SushiLoader with Custom Colors

Source: https://zomato.github.io/compose-sushi/sushiloader

Configures the SushiLoader to use custom colors for its inner and outer arcs. Requires specifying SushiColorData for both outerColor and innerColor props.

```kotlin
SushiLoader(
    props = SushiLoaderProps(
        outerColor = SushiColorData(ColorName.Blue, ColorVariation.Variation500),
        innerColor = SushiColorData(ColorName.Green, ColorVariation.Variation500)
    )
)
```

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

### Accessing Theme Tokens

Source: https://zomato.github.io/compose-sushi/foundations/theme

Inside any composable within a SushiTheme context, you can access design tokens like primary background colors and typography styles.

```kotlin
val primaryBackground = SushiTheme.colors.background.primary
val headingStyle = SushiTheme.typography.bold900

```

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

### DashedBorderConfig API

Source: https://zomato.github.io/compose-sushi/sushicard

API documentation for the DashedBorderConfig, used for configuring dashed borders on SushiCard.

```APIDOC
## DashedBorderConfig

### Description
Configuration object for creating dashed borders on a SushiCard.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **color** (Color) - The color of the border.
- **width** (Dp) - The thickness of the border line.
- **dashWidth** (Dp) - The width of each dash in the pattern.
- **dashGap** (Dp) - The gap between each dash in the pattern.
- **shape** (Shape) - The shape to apply the border to (e.g., rectangle, rounded corner).
```

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

### SushiLoader with Custom Size

Source: https://zomato.github.io/compose-sushi/sushiloader

Renders a SushiLoader with a specified size using a Modifier. This is useful for controlling the loader's dimensions within a layout.

```kotlin
SushiLoader(
    props = SushiLoaderProps(),
    modifier = Modifier.size(48.dp)
)
```

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

### Access SushiTypography Styles

Source: https://zomato.github.io/compose-sushi/foundations/typography

Access predefined typography styles like heading and body text from the SushiTheme.typography object. These styles combine specific font weights and sizes.

```kotlin
val heading = SushiTheme.typography.bold700
val body = SushiTheme.typography.regular400
```

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

### Shift Indicator with Custom Color

Source: https://zomato.github.io/compose-sushi/sushiindicator

Configures a Shift-style indicator with custom dot colors using SushiTheme. Requires a PagerState.

```kotlin
val pagerState = rememberPagerState { 5 }

SushiIndicator(
    dotCount = 5,
    type = SushiIndicatorType.Shift(
        dotsGraphic = DotGraphic(
            color = SushiTheme.colors.blue.v500.value
        )
    ),
    pagerState = pagerState,
    modifier = Modifier.padding(16.dp)
)
```

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

### Render Bold Text in Markdown

Source: https://zomato.github.io/compose-sushi/markdown/overview

Apply bold formatting to text using double asterisks (**) within SushiText. This snippet also demonstrates applying an underline decoration.

```kotlin
SushiText(
    props = SushiTextProps(
        text = "This is an **bold** text",
        color = SushiTheme.colors.text.success,
        type = SushiTextType.Regular900,
        textDecoration = SushiTextDecoration.Underline()
    )
)

```

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

### SushiAlertDialogProps

Source: https://zomato.github.io/compose-sushi/sushidialog

Props for configuring the SushiAlertDialog component.

```APIDOC
## SushiAlertDialogProps

### Description
Props for configuring the SushiAlertDialog component.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **id** (string) - Optional identifier for the dialog
- **image** (string) - Optional image to display at the top of the dialog
- **title** (string) - Optional title text displayed at the top of the dialog
- **subtitle** (string) - Optional subtitle text displayed below the title
- **positiveButton** (object) - Optional properties for the primary action button
- **negativeButton** (object) - Optional properties for the secondary action button
- **neutralButton** (object) - Optional properties for the tertiary action button
- **alignment** (ButtonAlignment) - How the buttons should be arranged (vertically or horizontally)
- **dismissOnBackPress** (boolean) - Whether the dialog should dismiss when the back button is pressed
- **dismissOnClickOutside** (boolean) - Whether the dialog should dismiss when clicked outside its bounds
```
Tokens:
Raw