@momo-kits/native-kits 0.168.1-beta.24 → 0.168.1-beta.25-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/DuoTabBar.kt

@@ -0,0 +1,436 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.absolutePadding
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.AbsoluteAlignment
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.application.MiniAppContext
+import vn.momo.kits.components.Badge
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.ScreenLayout
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.LocalMaxApi
+
+// Figma Fold-Design-System MT1/MT2, mirrored from RN DuoTabBar.tsx.
+private val ITEM_SIZE = DuoMetrics.controlSize
+private val ICON_SIZE = 28.dp
+private val QR_ICON_SIZE = 24.dp
+private val RAIL_PADDING = 6.dp
+private val RAIL_GAP = Spacing.XXS
+// selection bubble overflows the 48 rail cell by 5 above and below
+private val RAIL_BUBBLE_WIDTH = 44.dp
+private val RAIL_BUBBLE_HEIGHT = 58.dp
+private val FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight
+private val FLOATING_PADDING = Spacing.XS
+// the system bar sizes its pill to the tabs instead of stretching it across the display
+private val FLOATING_ITEM_WIDTH = 80.dp
+// the rail's badge stays inside the capsule: its end sits XXS off the cell's end edge
+private val RAIL_BADGE_MAX_WIDTH = ITEM_SIZE - Spacing.XXS * 2
+private val RAIL_BADGE_END_OFFSET = (ITEM_SIZE - ICON_SIZE) / 2 - Spacing.XXS
+// Figma Home-2026 tab bar "Selection": brand pink at 8%
+private const val SELECTION_TINT_ALPHA = 0x14 / 255f
+
+// Space from the window bottom the rail stack and its gap take, so the header side bar stays above it.
+internal val LocalDuoRailReserve = compositionLocalOf { 0.dp }
+
+// Rail plus the QR button under it; compressed, the rail is a single button.
+internal fun duoRailHeight(itemCount: Int, hasQr: Boolean, compressed: Boolean = false): Dp {
+    val rail = if (compressed) ITEM_SIZE
+    else RAIL_PADDING * 2 + ITEM_SIZE * itemCount + RAIL_GAP * (itemCount - 1).coerceAtLeast(0)
+    return rail + if (hasQr) Spacing.M + ITEM_SIZE else 0.dp
+}
+
+// Overlaps the home indicator inset like the system tab bar (21pt above the bottom with a 34pt inset).
+private fun floatingTabBarBottom(insetBottom: Dp): Dp =
+    maxOf(insetBottom - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S)
+
+// Space tab content leaves under the floating bar; 0 when the rail sits in the side strip or off Duo.
+internal fun duoFloatingTabBarInset(layout: ScreenLayout): Dp =
+    if (layout.isIPhoneDuo && layout.sideBar == null) FLOATING_HEIGHT + floatingTabBarBottom(layout.insetBottom) else 0.dp
+
+// iPhone Duo tab bar: rail in the side bar, or a floating bar when unfolded portrait.
+@Composable
+internal fun BoxScope.DuoTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    compression: DuoBarCompression = DuoBarCompression(),
+    onTabLongPress: ((Int) -> Unit)? = null,
+) {
+    val maxApi = LocalMaxApi.current
+    // a tick per tab the lens enters while dragged
+    val onTick = remember(maxApi) { { runCatching { maxApi?.triggerEventVibration("light", callback = null) }; Unit } }
+    if (layout.sideBar != null) {
+        DuoRailTabBar(layout, items, floatingButton, selectedIndex, onTabSelected, compression, onTabLongPress, onTick)
+    } else {
+        DuoFloatingTabBar(layout, items, floatingButton, selectedIndex, onTabSelected, onTabLongPress, onTick)
+    }
+}
+
+// Vertical bar anchored to the bottom of the side bar, QR button below it (Figma MT1-C/E). When the
+// side bar is short it can shrink to one button showing the current tab (HIG "Tab bar compressed");
+// tapping it expands the rail and compresses the toolbar.
+@Composable
+private fun BoxScope.DuoRailTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    compression: DuoBarCompression,
+    onTabLongPress: ((Int) -> Unit)?,
+    onTick: () -> Unit,
+) {
+    val sideBar = layout.sideBar ?: return
+    val isRight = sideBar.edge == SideBarEdge.RIGHT
+
+    Column(
+        modifier = Modifier
+            .align(if (isRight) AbsoluteAlignment.BottomRight else AbsoluteAlignment.BottomLeft)
+            .width(sideBar.width)
+            .padding(bottom = sideBar.bottom)
+            .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
+        horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
+        verticalArrangement = Arrangement.spacedBy(Spacing.M),
+    ) {
+        val current = items.getOrNull(selectedIndex)
+        if (compression.tabBarCompressed && current != null) {
+            val interactionSource = remember { MutableInteractionSource() }
+            Box(
+                modifier = Modifier
+                    .pressLift(interactionSource)
+                    .size(ITEM_SIZE)
+                    .tabBarMaterial(CircleShape)
+                    .clickable(interactionSource = interactionSource, indication = null, onClick = compression.expandTabBar)
+                    .setAutomationId("bottom_tab_bar"),
+                contentAlignment = Alignment.Center,
+            ) {
+                DuoTabIcon(current, selected = true, badgeMaxWidth = RAIL_BADGE_MAX_WIDTH, inRail = true)
+            }
+        } else {
+            Rail(items, selectedIndex, onTabLongPress, onTick) {
+                onTabSelected(it)
+                compression.onTabSelected()
+            }
+        }
+        if (floatingButton != null) {
+            QrButton(floatingButton, size = ITEM_SIZE)
+        }
+    }
+}
+
+// Column of icon-only tab items with the sliding selection lens.
+@Composable
+private fun Rail(
+    items: List<BottomTabItem>,
+    selectedIndex: Int,
+    onTabLongPress: ((Int) -> Unit)?,
+    onTick: () -> Unit,
+    onItemClick: (Int) -> Unit,
+) {
+    val selection = rememberDuoLiquidSelection(
+        count = items.size,
+        pitch = ITEM_SIZE + RAIL_GAP,
+        firstCenter = RAIL_PADDING + ITEM_SIZE / 2,
+        axis = LiquidAxis.Y,
+        index = selectedIndex,
+        onSelect = onItemClick,
+        onTick = onTick,
+    )
+    Box(
+        Modifier
+            .then(selection.barTransform)
+            .width(ITEM_SIZE)
+            .tabBarMaterial(CircleShape)
+            .setAutomationId("bottom_tab_bar")
+            .then(selection.dragGesture)
+    ) {
+        Box(
+            Modifier
+                .offset(
+                    x = (ITEM_SIZE - RAIL_BUBBLE_WIDTH) / 2,
+                    y = RAIL_PADDING - (RAIL_BUBBLE_HEIGHT - ITEM_SIZE) / 2,
+                )
+                .then(selection.bubbleTransform)
+                .size(RAIL_BUBBLE_WIDTH, RAIL_BUBBLE_HEIGHT)
+                .selectionTint()
+        )
+        Column(
+            modifier = Modifier.padding(vertical = RAIL_PADDING),
+            verticalArrangement = Arrangement.spacedBy(RAIL_GAP),
+        ) {
+            items.forEachIndexed { index, item ->
+                LiquidTab(
+                    selection = selection,
+                    index = index,
+                    onSelect = { onItemClick(index) },
+                    onLongPress = onTabLongPress?.let { { it(index) } },
+                    modifier = Modifier.size(ITEM_SIZE),
+                ) { active ->
+                    DuoTabIcon(item, active, badgeMaxWidth = RAIL_BADGE_MAX_WIDTH, inRail = true)
+                }
+            }
+        }
+    }
+}
+
+// Floating labelled bar for the unfolded portrait display, QR pinned in its own platter beside it.
+@Composable
+private fun BoxScope.DuoFloatingTabBar(
+    layout: ScreenLayout,
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton?,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    onTabLongPress: ((Int) -> Unit)?,
+    onTick: () -> Unit,
+) {
+    val density = LocalDensity.current
+    var rowWidth by remember { mutableStateOf(0.dp) }
+    val cellWidth = rowWidth / items.size.coerceAtLeast(1)
+    val selection = rememberDuoLiquidSelection(
+        count = items.size,
+        pitch = cellWidth,
+        firstCenter = cellWidth / 2,
+        axis = LiquidAxis.X,
+        index = selectedIndex,
+        onSelect = onTabSelected,
+        onTick = onTick,
+    )
+
+    Row(
+        modifier = Modifier
+            .align(Alignment.BottomCenter)
+            .fillMaxWidth()
+            .absolutePadding(
+                left = layout.insetLeft + DuoMetrics.floatingTabBarMargin,
+                right = layout.insetRight + DuoMetrics.floatingTabBarMargin,
+            )
+            .padding(bottom = floatingTabBarBottom(layout.insetBottom)),
+        horizontalArrangement = Arrangement.spacedBy(Spacing.S, Alignment.CenterHorizontally),
+    ) {
+        Box(
+            modifier = Modifier
+                .weight(1f, fill = false)
+                .width(FLOATING_ITEM_WIDTH * items.size + FLOATING_PADDING * 2)
+                .height(FLOATING_HEIGHT)
+                .then(selection.barTransform)
+                .tabBarMaterial(RoundedCornerShape(FLOATING_HEIGHT / 2))
+                .padding(FLOATING_PADDING)
+                .setAutomationId("bottom_tab_bar")
+        ) {
+            Box(
+                Modifier
+                    .fillMaxSize()
+                    .onSizeChanged { rowWidth = with(density) { it.width.toDp() } }
+                    .then(selection.dragGesture)
+            ) {
+                if (rowWidth > 0.dp) {
+                    Box(
+                        Modifier
+                            .then(selection.bubbleTransform)
+                            .width(cellWidth)
+                            .fillMaxHeight()
+                            .selectionTint()
+                    )
+                }
+                Row(Modifier.fillMaxSize()) {
+                    items.forEachIndexed { index, item ->
+                        LiquidTab(
+                            selection = selection,
+                            index = index,
+                            onSelect = { onTabSelected(index) },
+                            onLongPress = onTabLongPress?.let { { it(index) } },
+                            modifier = Modifier.weight(1f).fillMaxHeight(),
+                        ) { active ->
+                            FloatingCellContent(item, active, badgeMaxWidth = cellWidth / 2 - Spacing.XXS)
+                        }
+                    }
+                }
+            }
+        }
+        if (floatingButton != null) {
+            QrButton(floatingButton, size = FLOATING_HEIGHT, Modifier.shadow(3.dp, CircleShape))
+        }
+    }
+}
+
+// A tab drawn twice, inactive with the active layer over it fading in as the lens passes; the tab
+// the lens lands on pops. A tap is the clickable's, a drag over the bar is the bar's.
+@Composable
+private fun LiquidTab(
+    selection: DuoLiquidSelection,
+    index: Int,
+    onSelect: () -> Unit,
+    onLongPress: (() -> Unit)?,
+    modifier: Modifier = Modifier,
+    content: @Composable (active: Boolean) -> Unit,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val onLongClick = selection.rememberPressTracking(index, interactionSource, onSelect, onLongPress)
+    val pop = selection.rememberIconPop(index)
+    Box(
+        modifier = modifier
+            .combinedClickable(
+                interactionSource = interactionSource,
+                indication = null,
+                role = Role.Tab,
+                onLongClick = onLongClick,
+                onClick = onSelect,
+            )
+            .graphicsLayer {
+                scaleX = pop.value
+                scaleY = pop.value
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        content(false)
+        Box(
+            Modifier
+                .matchParentSize()
+                .graphicsLayer { alpha = selection.activeAlpha(index) }
+                .clearAndSetSemantics {},
+            contentAlignment = Alignment.Center,
+        ) {
+            content(true)
+        }
+    }
+}
+
+@Composable
+private fun FloatingCellContent(item: BottomTabItem, active: Boolean, badgeMaxWidth: Dp) {
+    val colors = AppTheme.current.colors
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(Spacing.XXS),
+    ) {
+        DuoTabIcon(item, active, badgeMaxWidth)
+        // like the system tab bar the label keeps its design size; Text grows it up to 5pt on the wide Duo displays
+        val context = LocalContext.current
+        val fixedScale = remember(context) {
+            (context ?: MiniAppContext()).copy(userScaleRate = 1f, useOSScaleRate = false)
+        }
+        CompositionLocalProvider(LocalContext provides fixedScale) {
+            Text(
+                text = item.label,
+                style = Typography.labelXsMedium,
+                color = if (active) colors.primary else colors.text.hint,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+private fun Modifier.selectionTint(): Modifier = composed {
+    background(AppTheme.current.colors.primary.copy(alpha = SELECTION_TINT_ALPHA), CircleShape)
+}
+
+// Floating bar: the badge starts at the icon's center and grows toward the cell's end edge.
+// Rail: the material clips to the capsule, so the badge ends just inside the rail and grows back
+// over the icon (RN TabBarIcon `end: -3`). Either way it never resizes the icon box.
+@Composable
+private fun DuoTabIcon(item: BottomTabItem, selected: Boolean, badgeMaxWidth: Dp, inRail: Boolean = false) {
+    val colors = AppTheme.current.colors
+    val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
+    Box {
+        Icon(
+            source = item.icon,
+            size = ICON_SIZE,
+            color = if (selected) colors.primary else colors.text.hint,
+        )
+        when {
+            badgeLabel == null && !item.showDot -> Unit
+            badgeLabel.isNullOrEmpty() -> BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier.align(Alignment.TopEnd),
+            )
+            else -> Badge(
+                badgeLabel,
+                modifier = Modifier
+                    .matchParentSize()
+                    .wrapContentSize(if (inRail) Alignment.TopEnd else Alignment.TopStart, unbounded = true)
+                    .offset(x = if (inRail) RAIL_BADGE_END_OFFSET else ICON_SIZE / 2, y = -Spacing.XS)
+                    .widthIn(max = badgeMaxWidth.coerceAtLeast(0.dp)),
+            )
+        }
+    }
+}
+
+@Composable
+private fun QrButton(data: BottomTabFloatingButton, size: Dp, modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .size(size)
+            .clip(CircleShape)
+            .background(AppTheme.current.colors.primary)
+            .noFeedbackClickable(onClick = data.onPress)
+            .setAutomationId(data.label),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(source = data.icon, color = Color.White, size = QR_ICON_SIZE)
+    }
+}
+
+// RN BarMaterial: surface with a 1dp border.
+@Composable
+private fun Modifier.tabBarMaterial(shape: Shape): Modifier {
+    val colors = AppTheme.current.colors
+    return shadow(3.dp, shape)
+        .background(colors.background.surface)
+        .border(1.dp, colors.border.default, shape)
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/FloatingButton.kt

@@ -0,0 +1,169 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.animation.*
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.AlertDialogDefaults
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.material3.FloatingActionButtonElevation
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.collectLatest
+import kotlinx.coroutines.launch
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
+import kotlin.time.Duration.Companion.milliseconds
+
+enum class FABSize { SMALL, DEFAULT }
+enum class FABPosition { END, CENTER }
+
+data class FloatingButtonProps(
+    val icon: String,
+    val iconColor: Color? = null,
+    val label: String? = null,
+    val onClick: () -> Unit,
+    val size: FABSize = FABSize.DEFAULT,
+    val bottom: Dp? = null,
+    val scrollState: ScrollState? = null,
+    val position: FABPosition? = FABPosition.END,
+)
+
+private val FabSmallSize = 36.dp
+private val FabDefaultSize = 48.dp
+private val FabExpandedWidth = 80.dp
+private val FabIconSizeSmall = 12.dp
+private val FabIconSizeDefault = 24.dp
+private val FabPaddingHorizontal = 12.dp
+
+@Composable
+internal fun FloatingButton(
+    scrollPosition: Int,
+    bottom: Dp,
+    onClick: () -> Unit,
+    containerColor: Color,
+    contentColor: Color = containerColor,
+    icon: String,
+    iconColor: Color? = null,
+    text: String? = null,
+    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(4.dp),
+    size: FABSize = FABSize.DEFAULT,
+    position: FABPosition = FABPosition.END,
+    keyboardSize: Dp = 0.dp,
+) {
+    val scrollStateFlow = remember { MutableStateFlow(scrollPosition) }
+    var lastScrollPosition by rememberSaveable { mutableStateOf(0) }
+    var isExpanded by rememberSaveable { mutableStateOf(false) }
+
+    val coroutineScope = rememberCoroutineScope()
+
+    // Animations
+    val baseSize = if (size == FABSize.SMALL) FabSmallSize else FabDefaultSize
+    val width by animateDpAsState(
+        targetValue = if (isExpanded && text != null) FabExpandedWidth else baseSize,
+        animationSpec = tween(100, easing = CubicBezierEasing(0.2f, 0.2f, 0.2f, 0.2f))
+    )
+
+    // Scroll listener
+    LaunchedEffect(text) {
+        if (text != null) {
+            coroutineScope.launch {
+                scrollStateFlow.collectLatest { newScroll ->
+                    isExpanded = newScroll <= lastScrollPosition
+                    delay(100.milliseconds)
+                    lastScrollPosition = newScroll
+                }
+            }
+        }
+    }
+
+    LaunchedEffect(scrollPosition) {
+        scrollStateFlow.value = scrollPosition
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(end = 12.dp, bottom = bottom)
+            .offset(y = -keyboardSize)
+            .background(Color.Transparent),
+        contentAlignment = if (position == FABPosition.END) Alignment.BottomEnd else Alignment.BottomCenter,
+    ) {
+        FloatingActionButton(
+            onClick = onClick,
+            shape = AlertDialogDefaults.shape,
+            containerColor = containerColor,
+            contentColor = contentColor,
+            elevation = elevation,
+            interactionSource = remember { MutableInteractionSource() },
+            modifier = Modifier
+                .sizeIn(minWidth = width)
+                .height(baseSize)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+        ) {
+            Row(
+                modifier = Modifier.padding(
+                    start = if (isExpanded) FabPaddingHorizontal else 0.dp,
+                    end = if (isExpanded) FabPaddingHorizontal else 0.dp,
+                ),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = if (isExpanded) Arrangement.Start else Arrangement.Center
+            ) {
+                Icon(
+                    source = icon,
+                    size = if (size == FABSize.SMALL) FabIconSizeSmall else FabIconSizeDefault,
+                    color = iconColor ?: Color.White
+                )
+
+                AnimatedVisibility(
+                    visible = isExpanded,
+                    enter = fadeInExpandAnimation,
+                    exit = fadeOutShrinkAnimation,
+                ) {
+                    Row {
+                        Spacer(Modifier.width(12.dp))
+                        Text(
+                            text = text ?: "",
+                            color = Color.White,
+                            style = Typography.actionDefaultBold
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+private val fadeOutShrinkAnimation = fadeOut(
+    animationSpec = tween(100, easing = LinearEasing)
+) + shrinkHorizontally(
+    animationSpec = tween(100, easing = LinearEasing),
+    shrinkTowards = Alignment.Start
+)
+
+private val fadeInExpandAnimation = fadeIn(
+    animationSpec = tween(100, easing = LinearEasing)
+) + expandHorizontally(
+    animationSpec = tween(100, easing = LinearEasing),
+    expandFrom = Alignment.Start
+)