@momo-kits/native-kits 0.167.1-beta.20-debug → 0.167.1-beta.20

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

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

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

@@ -1,201 +0,0 @@
-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.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 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,
-    initialRouteName: String? = null,
-    onTabPress: ((index: Int, switchTab: () -> Unit) -> Unit)? = null,
-    backToInitialTab: Boolean = true,
-) {
-    val navigation = LocalNavigation.current
-    val navigator = LocalNavigator.current
-    val maxApi = LocalMaxApi.current
-    val startIndex = remember { items.indexOfFirst { it.name == initialRouteName }.coerceAtLeast(0) }
-
-    bottomTabOptionItems = items.mapIndexed { index, item ->
-        item.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() })
-        // both live outside this composition
-        onDispose {
-            reportFloatingArrowBack(false)
-            navigator.tabBackHandler = null
-        }
-    }
-
-    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
-        Box(modifier = Modifier
-            .fillMaxSize()
-            .background(AppTheme.current.colors.background.default)
-        ) {
-            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()
-        }
-        Column {
-            BottomTabBar(
-                items = items,
-                floatingButton = floatingButton,
-                selectedIndex = selectedIndex,
-                onTabSelected = { index ->
-                    // RN parity: every tab press (focused one included) ticks a light haptic.
-                    runCatching { maxApi?.triggerEventVibration("light", callback = null) }
-                    val switchTab = {
-                        if (index != selectedIndex) selectTab(index)
-                    }
-                    onTabPress?.invoke(index, switchTab) ?: switchTab()
-                }
-            )
-            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

@@ -1,212 +0,0 @@
-package vn.momo.kits.navigation.bottomtab
-
-import androidx.compose.animation.core.Animatable
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-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.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.platform.getScreenDimensions
-
-@InternalApi
-const val BOTTOM_TAB_BAR_HEIGHT = 64
-
-@Composable
-internal fun BottomTabBar(
-    items: List<BottomTabItem>,
-    floatingButton: BottomTabFloatingButton? = null,
-    selectedIndex: Int,
-    onTabSelected: (Int) -> Unit,
-) {
-
-    val screenWidth = getScreenDimensions().width.dp
-    val mid = items.size / 2
-
-    val floating = floatingButton?.takeIf { items.size % 2 == 0 }
-    val slotWidth = screenWidth / (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)
-                },
-            horizontalArrangement = Arrangement.SpaceAround,
-        ) {
-            if (floating == null) {
-                RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
-            } else {
-                RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
-                Spacer(modifier = Modifier.width(slotWidth))
-                RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
-            }
-        }
-
-        Box(modifier = Modifier
-            .offset { IntOffset(((slotWidth * (indicatorX.value + 0.5f)) - screenWidth / 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 { FloatingButton(it, slotWidth) }
-    }
-}
-
-@Composable
-internal fun RowScope.RenderTabBarItem(
-    items: List<BottomTabItem>,
-    fromIndex: Int,
-    toIndex: Int,
-    selectedIndex: Int,
-    onTabSelected: (Int) -> Unit
-){
-    for (index in fromIndex until toIndex) {
-        Box(modifier = Modifier.weight(1f)) {
-            TabBarItem(
-                item = items[index],
-                selected = index == selectedIndex,
-                onClick = { onTabSelected(index) }
-            )
-        }
-    }
-}
-
-@Composable
-internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
-    // RN parity: "0" hides the badge, "" renders a dot.
-    val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
-    val isNumber = badgeLabel?.toIntOrNull() != null
-    val showDot = badgeLabel?.isEmpty() ?: item.showDot
-
-    Box(modifier = Modifier
-        .fillMaxSize()
-        .padding(horizontal = Spacing.XXS)
-        .conditional(IsShowBaseLineDebug) {
-            border(1.dp, Colors.blue_03)
-        }
-        .activeOpacityClickable {
-            onClick()
-        },
-        contentAlignment = Alignment.BottomStart
-    ){
-        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)
-                // Anchored to the icon (not the tab cell) so it stays put whatever the tab width; matchParentSize + unbounded wrap keeps it from resizing the icon slot.
-                val badgeAnchor = Modifier.matchParentSize().wrapContentSize(Alignment.TopEnd, unbounded = true)
-                if (showDot) {
-                    BadgeDot(size = DotSize.Small, modifier = badgeAnchor.offset(x = 4.dp, y = (-4).dp))
-                } else if (!badgeLabel.isNullOrEmpty()) {
-                    Badge(badgeLabel, modifier = badgeAnchor.offset(x = if (isNumber) 8.dp else 12.dp, y = (-8).dp))
-                }
-            }
-            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))
-        )
-    }
-}

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

@@ -1,86 +0,0 @@
-package vn.momo.kits.navigation.bottomtab
-
-import androidx.compose.foundation.Canvas
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.width
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Path
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
-import vn.momo.kits.const.AppTheme
-
-@Composable
-internal fun CurvedContainer(
-    circleSize: Dp = 48.dp,
-    tabBarItemIconSize: Dp = 28.dp,
-    circleOverSize: Dp = 2.dp,
-    width: Dp = 71.dp,
-    height: Dp = 16.dp
-) {
-    val theme = AppTheme.current
-    val density = LocalDensity.current
-    val widthPx = with(density) { width.toPx()}
-
-    val circleSizePx = with(density) { circleSize.toPx() }
-    val tabBarItemIconSizePx = with(density) { tabBarItemIconSize.toPx() }
-    val circleOverSizePx = with(density) { circleOverSize.toPx() }
-
-    val circlePositionTop = circleSizePx - tabBarItemIconSizePx - 10f
-    val circleOverTop = circlePositionTop + circleOverSizePx
-    val circleR = circleSizePx / 2
-    val circleOverR = circleR + circleOverSizePx
-
-    val centerX = widthPx / 2
-
-    val curvedPath = getPath(
-        circleOverTop = circleOverTop,
-        centerX = centerX,
-        circleOverR = circleOverR,
-        widthPx = widthPx
-    )
-
-    Box(
-        contentAlignment = Alignment.BottomCenter
-    ){
-        Canvas(
-            modifier = Modifier
-                .width(width)
-                .height(height)
-                .offset{ IntOffset(x = 0, y = 24) }
-                .zIndex(-1f)
-        ) {
-            drawPath(path = curvedPath, color = theme.colors.background.surface)
-        }
-    }
-}
-
-private fun getPath(circleOverTop: Float, centerX: Float, circleOverR: Float, widthPx: Float): Path{
-    return Path().apply {
-        moveTo(0f, circleOverTop)
-        lineTo(centerX - circleOverR - 40f, circleOverTop)
-
-        cubicTo(
-            centerX - circleOverR, circleOverTop,
-            centerX - circleOverR, 0f,
-            centerX, 0f
-        )
-
-        cubicTo(
-            centerX + circleOverR, 0f,
-            centerX + circleOverR, circleOverTop,
-            centerX + circleOverR + 40f, circleOverTop
-        )
-
-        lineTo(widthPx, circleOverTop)
-        lineTo(widthPx, 60f)
-        lineTo(0f, 60f)
-        close()
-    }
-}