@momo-kits/native-kits 0.167.1-duo.3-debug → 0.167.1-duo.4

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,194 +0,0 @@
-package vn.momo.kits.navigation.bottomtab
-
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.scaleIn
-import androidx.compose.animation.scaleOut
-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.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
-import androidx.navigation.compose.currentBackStackEntryAsState
-import androidx.navigation.compose.rememberNavController
-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.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.reportFloatingArrowBack
-import vn.momo.kits.layout.getScreenLayout
-
-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
-) {
-    val navigation = LocalNavigation.current
-    val navigator = LocalNavigator.current
-    val navController = rememberNavController()
-
-    bottomTabOptionItems = items.mapIndexed { index, item ->
-        item.options ?: NavigationOptions()
-    }.toMutableList()
-
-
-    LaunchedEffect(Unit){
-        navigation.markAsBottomTabRoot()
-        navigation.setOptions(
-            headerType = HeaderType.None,
-            keyboardOptions = KeyboardOptions(useAvoidKeyboard = false)
-        )
-    }
-
-    // Tab 0 keeps the seeked transition; other tabs go to the host's floating arrow. Matches RN.
-    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val isFirstTab = currentRoute == null || currentRoute == "option0"
-
-    DisposableEffect(isFirstTab) {
-        reportFloatingArrowBack(!isFirstTab)
-        navigator.tabBackHandler = if (isFirstTab) null else ({
-            navController.popBackStack(navController.graph.startDestinationRoute!!, false)
-        })
-        // both live outside this composition
-        onDispose {
-            reportFloatingArrowBack(false)
-            navigator.tabBackHandler = null
-        }
-    }
-
-    val layout = getScreenLayout()
-    val railHeight = if (layout.isIPhoneDuo && layout.sideBar != null) {
-        duoRailHeight(items.size, hasQr = floatingButton != null)
-    } else 0.dp
-    val onTabSelected: (Int) -> Unit = {
-        val targetRoute = "option$it"
-        if (currentRoute != targetRoute) {
-            navController.navigate(targetRoute)
-        }
-    }
-
-    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
-        Box(modifier = Modifier
-            .fillMaxSize()
-        ) {
-            CompositionLocalProvider(LocalDuoRailHeight provides railHeight) {
-                NavHost(
-                    navController = navController,
-                    startDestination = "option0"
-                ) {
-                    items.forEachIndexed { index, item ->
-                        composable(
-                            route = "option$index",
-                            enterTransition = {
-                                fadeIn(animationSpec = tween(200)) +
-                                        scaleIn(
-                                            initialScale = 0.97f,
-                                            animationSpec = tween(200)
-                                        )
-                            },
-                            exitTransition = {
-                                fadeOut(animationSpec = tween(200)) +
-                                        scaleOut(
-                                            targetScale = 0.97f,
-                                            animationSpec = tween(200)
-                                        )
-                            },
-                            popEnterTransition = {
-                                fadeIn(animationSpec = tween(200)) +
-                                        scaleIn(
-                                            initialScale = 0.97f,
-                                            animationSpec = tween(200)
-                                        )
-                            },
-                            popExitTransition = {
-                                fadeOut(animationSpec = tween(200)) +
-                                        scaleOut(
-                                            targetScale = 0.97f,
-                                            animationSpec = tween(200)
-                                        )
-                            }
-                        ) {
-                            val option = getBottomTabOption(index)
-
-                            StackScreen(
-                                content = item.screen,
-                                navigationOptions = option,
-                                bottomTabIndex = index,
-                                onBackHandler = {
-                                    if (index != 0) {
-                                        navController.popBackStack(
-                                            navController.graph.startDestinationRoute!!,
-                                            inclusive = false
-                                        )
-                                    } else {
-                                        navigator.pop()
-                                    }
-                                }
-                            )
-                        }
-                    }
-                }
-            }
-        }
-        if (layout.isIPhoneDuo) {
-            DuoTabBar(
-                layout = layout,
-                items = items,
-                floatingButton = floatingButton,
-                selectedIndex = items.indices.firstOrNull { "option$it" == currentRoute } ?: 0,
-                onTabSelected = onTabSelected,
-            )
-        } else {
-            Column {
-                BottomTabBar(
-                    items = items,
-                    floatingButton = floatingButton,
-                    navController = navController,
-                    onTabSelected = onTabSelected,
-                )
-                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,232 +0,0 @@
-package vn.momo.kits.navigation.bottomtab
-
-import androidx.compose.animation.core.FastOutSlowInEasing
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.tween
-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.getValue
-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.navigation.NavController
-import androidx.navigation.compose.currentBackStackEntryAsState
-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.noFeedbackClickable
-import vn.momo.kits.layout.getScreenLayout
-import vn.momo.kits.utils.horizontalSafeAreaPadding
-
-internal val floatingButtonWidth = 75.dp
-@InternalApi
-const val BOTTOM_TAB_BAR_HEIGHT = 64
-
-@Composable
-internal fun BottomTabBar(
-    items: List<BottomTabItem>,
-    floatingButton: BottomTabFloatingButton? = null,
-    navController: NavController,
-    onTabSelected: (Int) -> Unit,
-) {
-    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val selectedIndex = items.indexOfFirst { "option${items.indexOf(it)}" == currentRoute }
-
-    val layout = getScreenLayout()
-    val mid = items.size / 2
-
-    val tabWidth = if (floatingButton != null) {
-        (layout.contentWidth - floatingButtonWidth) / items.size
-    } else {
-        layout.contentWidth / items.size
-    }
-    val adjustSize = if(floatingButton != null && selectedIndex >= mid) floatingButtonWidth else 0.dp
-    // offsets are from the bar center; tabs live between the side safe areas
-    val targetOffset = layout.insetLeft + tabWidth * selectedIndex + tabWidth / 2 - layout.width / 2 + adjustSize
-
-    val indicatorOffsetX by animateDpAsState(
-        targetValue = targetOffset,
-        animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
-        label = "IndicatorX"
-    )
-
-    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 (floatingButton == null) {
-                RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
-            } else {
-                RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
-                Spacer(modifier = Modifier.width(floatingButtonWidth).padding(horizontal = Spacing.XXS))
-                RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
-            }
-        }
-
-        Box(modifier = Modifier
-            .offset(x = indicatorOffsetX, y = (-BOTTOM_TAB_BAR_HEIGHT + 2).dp)
-            .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))
-                )
-            )
-        )
-        floatingButton?.let {
-            Box(Modifier.offset(x = (layout.insetLeft - layout.insetRight) / 2)) {
-                FloatingButton(it)
-            }
-        }
-    }
-}
-
-@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) {
-    fun isNumber(label: String): Boolean {
-        val numberRegex = "^\\d+$".toRegex()
-        return numberRegex.matches(label)
-    }
-    fun formatLabel(label: String): String? {
-        if (isNumber(label) && label.toInt() == 0) {
-            return null
-        }
-        return label
-    }
-    val badgeLabel = item.badgeLabel?.let { formatLabel(it) }
-
-    Box(modifier = Modifier
-        .fillMaxSize()
-        .padding(horizontal = Spacing.XXS)
-        .conditional(IsShowBaseLineDebug) {
-            border(1.dp, Colors.blue_03)
-        }
-        .noFeedbackClickable {
-            onClick()
-        },
-        contentAlignment = Alignment.BottomStart
-    ){
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(horizontal = Spacing.S, vertical = Spacing.S)
-                .noFeedbackClickable {
-                    onClick()
-                },
-            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center
-        ) {
-            Icon(
-                source = item.icon,
-                size = 28.dp,
-                modifier = Modifier.padding(Spacing.XS),
-                color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
-            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
-            )
-        }
-        if (badgeLabel != null) {
-            if (badgeLabel.isEmpty())
-                BadgeDot(
-                    size = DotSize.Small,
-                    modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
-                )
-            else
-                Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
-        }
-    }
-}
-
-@Composable
-internal fun FloatingButton(data: BottomTabFloatingButton) {
-    Column(
-        modifier = Modifier
-            .width(floatingButtonWidth)
-            .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .noFeedbackClickable {
-                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()
-    }
-}