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

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

@@ -1,436 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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
-)