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

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

@@ -0,0 +1,148 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.EnterExitState
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateMapOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavBackStackEntry
+import androidx.navigation.NavDestination.Companion.hasRoute
+import vn.momo.kits.const.Colors
+import kotlin.math.roundToInt
+
+internal const val STACK_TRANSITION_DURATION = 300
+
+// Ported 1:1 from the RN kit's `forStackTransitionWithOverlay` so both kits look identical.
+private const val PARALLAX_RATIO = 0.3f
+private const val SCRIM_MAX_ALPHA = 0.6f
+private const val EDGE_SHADOW_MAX_ALPHA = 0.3f
+private val EDGE_SHADOW_WIDTH = 8.dp
+
+/** Kill switch: `false` restores pre-DS-760 back handling without a kit release. Transitions
+ *  stay on the new curve either way. */
+object SwipeBackConfig {
+    var enabled: Boolean = true
+}
+
+// LinearEasing is mandatory: seekTo() maps drag fraction onto the timeline, so a curve would
+// decouple the card from the finger.
+private val stackSpec = tween<IntOffset>(STACK_TRANSITION_DURATION, easing = LinearEasing)
+
+internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackEnter(): EnterTransition =
+    slideInHorizontally(stackSpec) { it }
+
+internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackExit(): ExitTransition =
+    if (targetState.destination.hasRoute<DynamicDialogRoute>()) ExitTransition.None
+    else slideOutHorizontally(stackSpec) { -(it * PARALLAX_RATIO).roundToInt() }
+
+internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackPopEnter(): EnterTransition =
+    if (initialState.destination.hasRoute<DynamicDialogRoute>()) EnterTransition.None
+    else slideInHorizontally(stackSpec) { -(it * PARALLAX_RATIO).roundToInt() }
+
+internal fun AnimatedContentTransitionScope<NavBackStackEntry>.stackPopExit(): ExitTransition =
+    slideOutHorizontally(stackSpec) { it }
+
+/**
+ * Which composed screen is the top card. Ids are monotonic and NavHost keeps both entries composed
+ * for the whole segment, so "highest id" is stable both ways. `currentBackStackEntry` is not: it
+ * flips at frame 0 of a pop and the scrim would vanish instead of fading.
+ */
+@Stable
+internal class StackTransitionCoordinator {
+    private val composedRoutes = mutableStateMapOf<Int, Boolean>()
+
+    val topStackId: Int by derivedStateOf {
+        composedRoutes.entries.filter { it.value }.maxOfOrNull { it.key } ?: -1
+    }
+
+    fun attach(id: Int, isStackRoute: Boolean) {
+        composedRoutes[id] = isStackRoute
+    }
+
+    fun detach(id: Int) {
+        composedRoutes.remove(id)
+    }
+}
+
+internal val LocalStackTransition = staticCompositionLocalOf { StackTransitionCoordinator() }
+
+/** Draws the covered-screen scrim and the top card's left-edge shadow around a stack destination. */
+@Composable
+internal fun AnimatedVisibilityScope.StackTransitionDecor(
+    id: Int,
+    isStackRoute: Boolean,
+    content: @Composable () -> Unit,
+) {
+    val coordinator = LocalStackTransition.current
+    coordinator.attach(id, isStackRoute)
+    DisposableEffect(coordinator, id) {
+        onDispose { coordinator.detach(id) }
+    }
+
+    val isTopCard = isStackRoute && id == coordinator.topStackId
+    val isCovered = isStackRoute && !isTopCard
+
+    val scrimAlpha = transition.animateFloat(
+        transitionSpec = { tween(STACK_TRANSITION_DURATION, easing = LinearEasing) },
+        label = "stackScrimAlpha",
+    ) { state -> if (isCovered && state != EnterExitState.Visible) SCRIM_MAX_ALPHA else 0f }
+
+    val shadowAlpha = transition.animateFloat(
+        transitionSpec = { tween(STACK_TRANSITION_DURATION, easing = LinearEasing) },
+        label = "stackEdgeShadowAlpha",
+    ) { state -> if (isTopCard && state == EnterExitState.Visible) EDGE_SHADOW_MAX_ALPHA else 0f }
+
+    val shadowWidthPx = with(LocalDensity.current) { EDGE_SHADOW_WIDTH.toPx() }
+    val shadowBrush = remember(shadowWidthPx) {
+        Brush.horizontalGradient(
+            colors = listOf(Color.Transparent, Colors.black_20),
+            startX = -shadowWidthPx,
+            endX = 0f,
+        )
+    }
+
+    Box(Modifier.fillMaxSize()) {
+        content()
+
+        if (isStackRoute) {
+            Box(
+                Modifier
+                    .matchParentSize()
+                    // read inside drawBehind: in the body this would recompose every gesture frame
+                    .drawBehind {
+                        drawRect(
+                            brush = shadowBrush,
+                            topLeft = Offset(-shadowWidthPx, 0f),
+                            size = Size(shadowWidthPx, size.height),
+                            alpha = shadowAlpha.value,
+                        )
+                        drawRect(Colors.pink_09, alpha = scrimAlpha.value)
+                    }
+            )
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.snapshotFlow
+import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.platform.rememberBackGestureProgress
+import vn.momo.maxapi.IMaxApi
+
+// Unscaled, so the tick lands at the same physical distance on every device.
+private const val SWIPE_BACK_HAPTIC_THRESHOLD_DP = 50f
+
+/** One light tick per crossing, re-armed below the threshold. iOS only. */
+@Composable
+internal fun SwipeBackHaptic(maxApi: IMaxApi?) {
+    if (maxApi == null) return
+
+    val progress = rememberBackGestureProgress()
+    val screenWidth = getScreenDimensions().width.toFloat()
+
+    LaunchedEffect(maxApi, screenWidth) {
+        if (screenWidth <= 0f) return@LaunchedEffect
+        val threshold = SWIPE_BACK_HAPTIC_THRESHOLD_DP / screenWidth
+        var isSendHaptic = false
+        snapshotFlow { progress.value }.collect { fraction ->
+            val travelled = fraction ?: 0f
+            if (travelled >= threshold && !isSendHaptic) {
+                runCatching { maxApi.triggerEventVibration("light", callback = null) }
+                isSendHaptic = true
+            } else if (travelled < threshold && isSendHaptic) {
+                isSendHaptic = false
+            }
+        }
+    }
+}

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

@@ -0,0 +1,232 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationVector1D
+import androidx.compose.animation.core.Easing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.saveable.rememberSaveableStateHolder
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.navigation.KeyboardOptions
+import vn.momo.kits.navigation.LocalMaxApi
+import vn.momo.kits.navigation.LocalNavigation
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.NavigationOptions
+import vn.momo.kits.navigation.StackScreen
+import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.platform.reportFloatingArrowBack
+import vn.momo.kits.layout.getScreenLayout
+import kotlinx.coroutines.launch
+
+private val inOutQuad = Easing { t -> if (t < 0.5f) 2 * t * t else 1 - 2 * (1 - t) * (1 - t) }
+internal val tabTimingSpec = tween<Float>(durationMillis = 200, easing = inOutQuad)
+
+internal val LocalBottomTabFocused = staticCompositionLocalOf { true }
+
+private val Hidden = Modifier.layout { measurable, constraints ->
+    val placeable = measurable.measure(constraints)
+    layout(placeable.width, placeable.height) {}
+}
+
+private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
+internal fun setBottomTabOption(index: Int, options: NavigationOptions){
+    if (index in bottomTabOptionItems.indices) {
+        bottomTabOptionItems[index] = options
+    }
+}
+internal fun getBottomTabOption(index: Int): NavigationOptions? {
+    return if (index in bottomTabOptionItems.indices) {
+        bottomTabOptionItems[index]
+    } else null
+}
+
+@Composable
+fun BottomTab(
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton? = null,
+    // iPhone Duo: when the side bar can't hold both bars, which one starts compressed;
+    // tapping the compressed one swaps them
+    compressionBehavior: DuoBarCompressionBehavior = DuoBarCompressionBehavior.TOOLBAR,
+    initialRouteName: String? = null,
+    onTabPress: ((index: Int, switchTab: () -> Unit) -> Unit)? = null,
+    backToInitialTab: Boolean = true,
+    // RN tabLongPress; on iPhone Duo the held tab is still selected on release
+    onTabLongPress: ((index: Int) -> Unit)? = null,
+) {
+    val navigation = LocalNavigation.current
+    val navigator = LocalNavigator.current
+    val maxApi = LocalMaxApi.current
+    val startIndex = remember { items.indexOfFirst { it.name == initialRouteName }.coerceAtLeast(0) }
+
+    remember(items) {
+        bottomTabOptionItems = items.map { it.options ?: NavigationOptions() }.toMutableList()
+    }
+
+    LaunchedEffect(Unit){
+        navigation.markAsBottomTabRoot()
+        navigation.setOptions(
+            headerType = HeaderType.None,
+            keyboardOptions = KeyboardOptions(useAvoidKeyboard = false)
+        )
+    }
+
+    var selectedIndex by rememberSaveable { mutableIntStateOf(startIndex) }
+    var loadedTabs by rememberSaveable { mutableStateOf(listOf(startIndex)) }
+    val tabStateHolder = rememberSaveableStateHolder()
+    val selectTab: (Int) -> Unit = { index ->
+        if (index !in loadedTabs) loadedTabs = loadedTabs + index
+        selectedIndex = index
+    }
+
+    val onFirstTab = selectedIndex == 0
+    val isFirstTab = onFirstTab || !backToInitialTab
+    val backToFirstTab = { selectTab(0) }
+
+    var lastFocusedIndex by rememberSaveable { mutableStateOf<Int?>(null) }
+    val tabProgress = remember { mutableMapOf<Int, Animatable<Float, AnimationVector1D>>() }
+    fun progressOf(index: Int) = tabProgress.getOrPut(index) {
+        Animatable(if (index == lastFocusedIndex) 1f else 0f)
+    }
+    LaunchedEffect(selectedIndex) {
+        lastFocusedIndex = selectedIndex
+        tabProgress.forEach { (index, progress) ->
+            if (index != selectedIndex) launch { progress.animateTo(0f, tabTimingSpec) }
+        }
+        progressOf(selectedIndex).animateTo(1f, tabTimingSpec)
+    }
+
+    DisposableEffect(isFirstTab) {
+        reportFloatingArrowBack(!isFirstTab)
+        navigator.tabBackHandler = if (isFirstTab) null else ({ backToFirstTab() })
+
+        onDispose {
+            reportFloatingArrowBack(false)
+            navigator.tabBackHandler = null
+        }
+    }
+
+    val layout = getScreenLayout()
+    val hasQr = floatingButton != null
+    val compression = rememberDuoBarCompression(compressionBehavior, items.size, hasQr, layout)
+    val railReserve = layout.sideBar?.takeIf { layout.isIPhoneDuo }?.let {
+        it.bottom + duoRailHeight(items.size, hasQr, compressed = compression.tabBarCompressed) + DUO_GROUP_GAP
+    } ?: 0.dp
+    val onTabSelected: (Int) -> Unit = { index ->
+        runCatching { maxApi?.triggerEventVibration("light", callback = null) }
+        val switchTab = {
+            if (index != selectedIndex) selectTab(index)
+        }
+        onTabPress?.invoke(index, switchTab) ?: switchTab()
+    }
+
+    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
+        Box(modifier = Modifier
+            .fillMaxSize()
+            .background(AppTheme.current.colors.background.default)
+        ) {
+            CompositionLocalProvider(
+                LocalDuoRailReserve provides railReserve,
+                LocalDuoBarCompression provides compression,
+            ) {
+                loadedTabs.forEach { index ->
+                    val item = items.getOrNull(index) ?: return@forEach
+                    val focused = index == selectedIndex
+                    val progress = progressOf(index)
+                    key(index) {
+                        Box(
+                            Modifier
+                                .fillMaxSize()
+                                .zIndex(if (focused) 0f else -1f)
+                                .then(if (focused) Modifier.graphicsLayer {
+                                    alpha = 0.3f + 0.7f * progress.value
+                                    scaleX = 0.97f + 0.03f * progress.value
+                                    scaleY = scaleX
+                                } else Hidden)
+                        ) {
+                            CompositionLocalProvider(LocalBottomTabFocused provides focused) {
+                                tabStateHolder.SaveableStateProvider(index) {
+                                    StackScreen(
+                                        content = item.screen,
+                                        navigationOptions = getBottomTabOption(index),
+                                        bottomTabIndex = index,
+                                        onBackHandler = {
+                                            if (backToInitialTab && index != 0) {
+                                                backToFirstTab()
+                                            } else {
+                                                navigator.pop()
+                                            }
+                                        }
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        BackHandler(enabled = !onFirstTab) {
+            if (backToInitialTab) backToFirstTab() else navigator.pop()
+        }
+        if (layout.isIPhoneDuo) {
+            DuoTabBar(
+                layout = layout,
+                items = items,
+                floatingButton = floatingButton,
+                selectedIndex = selectedIndex,
+                onTabSelected = onTabSelected,
+                compression = compression,
+                onTabLongPress = onTabLongPress,
+            )
+        } else {
+            Column {
+                BottomTabBar(
+                    items = items,
+                    floatingButton = floatingButton,
+                    selectedIndex = selectedIndex,
+                    onTabSelected = onTabSelected,
+                    onTabLongPress = onTabLongPress,
+                )
+                Spacer(modifier = Modifier.fillMaxWidth().height(AppNavigationBar.current + Spacing.S).background(AppTheme.current.colors.background.surface))
+            }
+        }
+    }
+}
+
+data class BottomTabItem(
+    val name: String,
+    val label: String,
+    val icon: String,
+    val showDot: Boolean = false,
+    val badgeLabel: String? = null,
+    val screen: @Composable () -> Unit,
+    val options: NavigationOptions? = null,
+    val initialParams: Any? = null
+)
+
+data class BottomTabFloatingButton(
+    val icon: String,
+    val label: String,
+    val onPress: () -> Unit,
+)

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

@@ -0,0 +1,237 @@
+package vn.momo.kits.navigation.bottomtab
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.components.*
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.InternalApi
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.utils.horizontalSafeAreaPadding
+
+@InternalApi
+const val BOTTOM_TAB_BAR_HEIGHT = 64
+
+@Composable
+internal fun BottomTabBar(
+    items: List<BottomTabItem>,
+    floatingButton: BottomTabFloatingButton? = null,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    onTabLongPress: ((Int) -> Unit)? = null,
+) {
+
+    val layout = getScreenLayout()
+    val mid = items.size / 2
+
+    val floating = floatingButton?.takeIf { items.size % 2 == 0 }
+    val slotWidth = layout.contentWidth / (items.size + if (floating != null) 1 else 0)
+    fun slotOf(index: Int) = if (floating != null && index >= mid) index + 1 else index
+
+    var indicatorSlot by rememberSaveable { mutableIntStateOf(0) }
+    val indicatorX = remember { Animatable(indicatorSlot.toFloat()) }
+    LaunchedEffect(selectedIndex) {
+        val target = slotOf(selectedIndex)
+        indicatorSlot = target
+        indicatorX.animateTo(target.toFloat(), tabTimingSpec)
+    }
+
+    Box(
+        contentAlignment = Alignment.BottomCenter
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(BOTTOM_TAB_BAR_HEIGHT.dp)
+                .background(AppTheme.current.colors.background.surface)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .horizontalSafeAreaPadding(),
+            horizontalArrangement = Arrangement.SpaceAround,
+        ) {
+            if (floating == null) {
+                RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected, onTabLongPress)
+            } else {
+                RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected, onTabLongPress)
+                Spacer(modifier = Modifier.width(slotWidth))
+                RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected, onTabLongPress)
+            }
+        }
+
+        Box(modifier = Modifier
+            .offset { IntOffset((layout.insetLeft + slotWidth * (indicatorX.value + 0.5f) - layout.width / 2).roundToPx(), (-BOTTOM_TAB_BAR_HEIGHT + 2).dp.roundToPx()) }
+            .height(2.dp)
+            .width(44.dp)
+            .background(
+                color = AppTheme.current.colors.primary ,
+                shape = RoundedCornerShape(bottomStart = 2.dp, bottomEnd = 2.dp)
+            )
+        )
+
+        Box(modifier = Modifier
+            .fillMaxWidth()
+            .height(6.dp)
+            .offset(x = 0.dp, y = (-BOTTOM_TAB_BAR_HEIGHT).dp)
+            .background(
+                brush = Brush.verticalGradient(
+                    colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
+                )
+            )
+        )
+        floating?.let {
+            Box(Modifier.offset(x = (layout.insetLeft - layout.insetRight) / 2)) {
+                FloatingButton(it, slotWidth)
+            }
+        }
+    }
+}
+
+@Composable
+internal fun RowScope.RenderTabBarItem(
+    items: List<BottomTabItem>,
+    fromIndex: Int,
+    toIndex: Int,
+    selectedIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    onTabLongPress: ((Int) -> Unit)? = null,
+){
+    for (index in fromIndex until toIndex) {
+        Box(modifier = Modifier.weight(1f)) {
+            TabBarItem(
+                item = items[index],
+                selected = index == selectedIndex,
+                onClick = { onTabSelected(index) },
+                onLongClick = onTabLongPress?.let { { it(index) } },
+            )
+        }
+    }
+}
+
+@Composable
+internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit, onLongClick: (() -> Unit)? = null) {
+    // RN parity: "0" hides the badge, "" renders a dot.
+    val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
+    val showDot = badgeLabel?.isEmpty() ?: item.showDot
+    val interactionSource = remember { MutableInteractionSource() }
+    val pressed by interactionSource.collectIsPressedAsState()
+    val alpha by animateFloatAsState(if (pressed) 0.2f else 1f, label = "TabBarItemOpacity")
+
+    BoxWithConstraints(modifier = Modifier
+        .fillMaxSize()
+        .padding(horizontal = Spacing.XXS)
+        .conditional(IsShowBaseLineDebug) {
+            border(1.dp, Colors.blue_03)
+        }
+        .graphicsLayer { this.alpha = alpha }
+        .combinedClickable(
+            interactionSource = interactionSource,
+            indication = null,
+            role = Role.Tab,
+            onLongClick = onLongClick,
+            onClick = onClick,
+        ),
+        contentAlignment = Alignment.BottomStart
+    ){
+        // from the icon's center to the cell's end edge
+        val badgeMaxWidth = (maxWidth / 2 - Spacing.XXS).coerceAtLeast(0.dp)
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = Spacing.S, vertical = Spacing.S),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(modifier = Modifier.padding(Spacing.XS)) {
+                Icon(
+                    source = item.icon,
+                    size = 28.dp,
+                    color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
+                if (showDot) {
+                    val dotAnchor = Modifier.matchParentSize().wrapContentSize(Alignment.TopEnd, unbounded = true)
+                    BadgeDot(size = DotSize.Small, modifier = dotAnchor.offset(x = 4.dp, y = (-4).dp))
+                } else if (!badgeLabel.isNullOrEmpty()) {
+                    // starts at the icon's center and grows toward the cell's end edge, ellipsized past it
+                    val badgeAnchor = Modifier.matchParentSize().wrapContentSize(Alignment.TopStart, unbounded = true)
+                    Badge(badgeLabel, modifier = badgeAnchor.offset(x = 14.dp, y = (-8).dp).widthIn(max = badgeMaxWidth))
+                }
+            }
+            Text(
+                text = item.label,
+                color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
+                style = if (selected) Typography.labelXsMedium else Typography.descriptionXsRegular,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+    }
+}
+
+@Composable
+internal fun FloatingButton(data: BottomTabFloatingButton, width: Dp) {
+    Column(
+        modifier = Modifier
+            .width(width)
+            .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .activeOpacityClickable {
+                data.onPress()
+            },
+        verticalArrangement = Arrangement.Bottom,
+        horizontalAlignment = Alignment.CenterHorizontally
+
+    ){
+        CurvedContainer()
+        Box(
+            modifier = Modifier
+                .size(48.dp)
+                .clip(CircleShape)
+                .background(AppTheme.current.colors.primary),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(source = data.icon, color = Color.White, size = 28.dp)
+        }
+        Spacer(modifier = Modifier.height(4.dp))
+        Text(
+            text = data.label,
+            style = Typography.labelXsMedium,
+            color = Colors.black_01,
+            textAlign = TextAlign.Center,
+            modifier = Modifier
+                .height(14.dp)
+                .fillMaxWidth()
+                .background(AppTheme.current.colors.primary, shape = RoundedCornerShape(size = Radius.XL))
+        )
+    }
+}