@momo-kits/native-kits 0.163.1-beta.1-debug → 0.163.1-beta.10-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/components/datetimepicker/DateTimePickerUtils.kt

@@ -2,15 +2,10 @@ package vn.momo.kits.components.datetimepicker
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import kotlinx.datetime.*
+import kotlinx.datetime.number
 import kotlin.time.Clock
 import kotlin.time.ExperimentalTime
-import kotlinx.datetime.DatePeriod
-import kotlinx.datetime.LocalDateTime
-import kotlinx.datetime.TimeZone
-import kotlinx.datetime.minus
-import kotlinx.datetime.number
-import kotlinx.datetime.plus
-import kotlinx.datetime.toLocalDateTime
 
 /**
  * Format a LocalDateTime object into a string
@@ -19,13 +14,13 @@ fun formatLocalDateTime(dateTime: LocalDateTime, format: String = "yyyy-MM-dd HH
     return when (format) {
         "yyyy-MM-dd HH:mm" -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${
             paddingNum(
-                dateTime.dayOfMonth
+                dateTime.day
             )
         } ${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
 
-        "dd-MM-yyyy" -> "${paddingNum(dateTime.dayOfMonth)}-${paddingNum(dateTime.month.number)}-${dateTime.year}"
+        "dd-MM-yyyy" -> "${paddingNum(dateTime.day)}-${paddingNum(dateTime.month.number)}-${dateTime.year}"
         "HH:mm" -> "${paddingNum(dateTime.hour)}:${paddingNum(dateTime.minute)}"
-        else -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${paddingNum(dateTime.dayOfMonth)} ${
+        else -> "${dateTime.year}-${paddingNum(dateTime.month.number)}-${paddingNum(dateTime.day)} ${
             paddingNum(
                 dateTime.hour
             )
@@ -60,11 +55,11 @@ fun getDaysInMonth(
     var endDay = daysInMonth
 
     if (year == minDate.year && month == minDate.month.number) {
-        startDay = minDate.dayOfMonth
+        startDay = minDate.day
     }
 
     if (year == maxDate.year && month == maxDate.month.number) {
-        endDay = maxDate.dayOfMonth
+        endDay = maxDate.day
     }
 
     val days = mutableListOf<String>()
@@ -170,8 +165,8 @@ fun createRelativeDate(years: Int): LocalDateTime {
 
     return LocalDateTime(
         adjustedDate.year,
-        adjustedDate.monthNumber,
-        adjustedDate.dayOfMonth,
+        adjustedDate.month.number,
+        adjustedDate.day,
         currentDateTime.hour,
         currentDateTime.minute
     )

package/compose/src/commonMain/kotlin/vn/momo/kits/components/datetimepicker/WheelPicker.kt

@@ -10,13 +10,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.rememberLazyListState
 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.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.snapshotFlow
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -25,6 +19,7 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
+import kotlinx.coroutines.FlowPreview
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.collect
 import kotlinx.coroutines.flow.debounce
@@ -36,12 +31,14 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Typography
 import kotlin.math.abs
+import kotlin.time.Duration.Companion.milliseconds
 
 private val wheelItemHeight = 42.dp
 private val wheelPickerBorderWidth = 1.dp
 
+@OptIn(FlowPreview::class)
 @Composable
-fun WheelPicker(
+internal fun WheelPicker(
     name: String,
     data: List<String>,
     selectedData: String,
@@ -68,7 +65,7 @@ fun WheelPicker(
     LaunchedEffect(paddedData) {
         snapshotFlow { selectedIndex }
             .distinctUntilChanged()
-            .debounce(50)
+            .debounce(50.milliseconds)
             .onEach {
                 val value = paddedData.getOrNull(it)
                 if (!value.isNullOrEmpty()) {
@@ -95,7 +92,7 @@ fun WheelPicker(
                 } else {
                     -abs(firstItemOffset)
                 }
-                delay(50)
+                delay(50.milliseconds)
                 listState.animateScrollBy(offset.toFloat())
                 val centeredIndex = firstItemIdx + (if (isScrollUp) 1 else 0) + 2
                 if (centeredIndex in 2 until paddedData.size - 2) {
@@ -145,7 +142,7 @@ fun WheelPicker(
 }
 
 @Composable
-fun WheelPickerItem(
+internal fun WheelPickerItem(
     text: String,
     isSelected: Boolean,
     index: Int,

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Colors.kt

@@ -147,6 +147,17 @@ object Colors {
     val red_10 = Color(0xFFFEF4F4)
     val red_11 = Color(0xFFFEF8F8)
 
+    // Translucent overlays, ported from the React kit's Consts (the reference
+    // palette). React spells them `#RRGGBBAA`; Compose's Color takes `0xAARRGGBB`.
+    val opacity_black_20 = Color(0x33000000)
+    val opacity_black_40 = Color(0x66000000)
+    val opacity_black_60 = Color(0x99000000)
+    val opacity_black_80 = Color(0xCC000000)
+    val opacity_white_20 = Color(0x33FFFFFF)
+    val opacity_white_40 = Color(0x66FFFFFF)
+    val opacity_white_60 = Color(0x99FFFFFF)
+    val opacity_white_80 = Color(0xCCFFFFFF)
+
     val colorList: Map<String, Color> = mapOf(
         "black_01" to black_01,
         "black_02" to black_02,
@@ -302,5 +313,13 @@ object Colors {
         "red_09" to red_09,
         "red_10" to red_10,
         "red_11" to red_11,
+        "opacity_black_20" to opacity_black_20,
+        "opacity_black_40" to opacity_black_40,
+        "opacity_black_60" to opacity_black_60,
+        "opacity_black_80" to opacity_black_80,
+        "opacity_white_20" to opacity_white_20,
+        "opacity_white_40" to opacity_white_40,
+        "opacity_white_60" to opacity_white_60,
+        "opacity_white_80" to opacity_white_80,
     )
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/const/KitFontScale.kt

@@ -0,0 +1,22 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+
+// App-wide font-scale holder. The kit is sandboxed and can't read the host cache directly, so the
+// host (which sees both core and this kit) seeds this once at startup and pushes runtime updates into
+// it. scaleSize() reads it as the fallback, so every screen — including direct NavigationContainer
+// screens with no host-pushed MiniAppContext — scales with no per-render prop and no async flicker.
+// Backed by snapshot state: writes recompose text automatically.
+object KitFontScale {
+    var userScaleRate by mutableStateOf(1f)
+        private set
+    var useOSScaleRate by mutableStateOf(true)
+        private set
+
+    fun update(userScaleRate: Float, useOSScaleRate: Boolean) {
+        this.userScaleRate = userScaleRate
+        this.useOSScaleRate = useOSScaleRate
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt

@@ -64,7 +64,7 @@ data class Theme(
     val assets: ThemeAssets
 ) {
     fun isHeaderImage(): Boolean {
-        return assets.headerBackground != null && assets.headerBackground.isNotEmpty()
+        return !assets.headerBackground.isNullOrEmpty()
     }
 }
 val defaultTheme = Theme(

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -7,28 +7,13 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.TextUnit
-import androidx.compose.ui.unit.TextUnitType
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import androidx.compose.ui.unit.*
 import org.jetbrains.compose.resources.Font
 import org.jetbrains.compose.resources.FontResource
 import org.jetbrains.compose.resources.InternalResourceApi
-import vn.momo.kits.application.ScaleSizeMaxRate
+import vn.momo.kits.application.LocalContext
 import vn.momo.kits.platform.getScreenDimensions
-import vn.momo.uikits.resources.Res
-import vn.momo.uikits.resources.momosignature
-import vn.momo.uikits.resources.momotrustdisplay
-import vn.momo.uikits.resources.sfprotext_black
-import vn.momo.uikits.resources.sfprotext_bold
-import vn.momo.uikits.resources.sfprotext_heavy
-import vn.momo.uikits.resources.sfprotext_light
-import vn.momo.uikits.resources.sfprotext_medium
-import vn.momo.uikits.resources.sfprotext_regular
-import vn.momo.uikits.resources.sfprotext_semibold
-import vn.momo.uikits.resources.sfprotext_thin
-import vn.momo.uikits.resources.sfprotext_ultralight
+import vn.momo.uikits.resources.*
 import kotlin.math.max
 import kotlin.math.min
 
@@ -38,7 +23,13 @@ const val MAX_DEVICE_SCALE = 5
 
 @Composable
 fun scaleSize(size: Float): Float {
-    val scaleSizeMaxRate: Float = ScaleSizeMaxRate.current ?: MAX_FONT_SCALE
+    val context = LocalContext.current
+    // Host-pushed context wins; otherwise fall back to the app-wide KitFontScale holder.
+    val useOsScale = context?.useOSScaleRate ?: KitFontScale.useOSScaleRate
+    if (!useOsScale) {
+        return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
+    }
+    val scaleSizeMaxRate: Float = MAX_FONT_SCALE
     val deviceWidth = getScreenDimensions().width
     val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
 
@@ -98,7 +89,7 @@ fun scaleSize(textStyle: TextStyle): TextStyle {
 
 @OptIn(InternalResourceApi::class)
 @Composable
-fun getFont(font: FontResource): FontFamily {
+internal fun getFont(font: FontResource): FontFamily {
     return FontFamily(Font(font))
 }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Card.kt

@@ -1,2 +1,52 @@
 package vn.momo.kits.layout
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+
+@Composable
+internal fun Card(
+    useShadow: Boolean = false,
+    backgroundImage: String? = null,
+    contentPadding: PaddingValues = PaddingValues(Spacing.M),
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 8.dp
+    val shape = RoundedCornerShape(Radius.M)
+    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
+    if (useShadow) surface = surface.shadow(4.dp, shape)
+    surface = surface.clip(shape)
+    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    Box(modifier = surface) {
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(contentPadding)) {
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -4,32 +4,33 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 
-data class GridContext(
-    val numberOfColumns: Number,
-    val gutterSize: Number,
-    val sizePerSpan: Number,
-    val getSizeSpan: (Number) -> Number
-)
+internal data class GridContext(
+    val numberOfColumns: Int = 12,
+    val gutter: Dp = 12.dp,
+    val sizePerSpan: Dp = 0.dp,
+) {
+    fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
+}
+
+internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
 @Composable
-fun Item(
-    heightSpan: Number = 1,
-    widthSpan: Number = 1,
-    content: @Composable() () -> Unit,
+internal fun Item(
+    widthSpan: Int = 12,
+    heightSpan: Int = 0,
     modifier: Modifier = Modifier,
-    grid: GridContext
+    content: @Composable () -> Unit,
 ) {
-
-    val widthItem = grid.getSizeSpan(widthSpan)
-    val heightItem = grid.getSizeSpan(heightSpan)
-
-    Box(
-        modifier = modifier.width(width = Dp(widthItem.toFloat()))
-            .height(height = Dp(heightItem.toFloat()))
-    ) {
-        content()
+    val grid = LocalGridContext.current
+    var m = modifier
+    if (grid != null) {
+        m = m.width(grid.sizeForSpan(widthSpan))
+        if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
     }
-}
+    Box(modifier = m) { content() }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -1,2 +1,39 @@
 package vn.momo.kits.layout
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+
+@Composable
+internal fun Section(
+    useMargin: Boolean = true,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 12.dp
+    val margin = if (useMargin) 12.dp else 0.dp
+    Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/AutomationId.kt

@@ -20,11 +20,6 @@ fun Modifier.setAutomationId(accessibilityId: String, mergeDescendants: Boolean
         }
     }}
 
-/**
- * Alternative for [setAutomationId]
- *
- * reason: [link](https://developer.android.com/develop/ui/compose/custom-modifiers#composable_function_modifiers_are_never_skipped)
- * */
 fun Modifier.kitsAutomationId(accessibilityId: String, label: String? = null) =
     this then KitsAutomationIdElement(accessibilityId, label)
 

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Clickable.kt

@@ -53,8 +53,6 @@ fun Modifier.activeOpacityClickable(
             onClick
         )
 }
-
-
 fun Modifier.hideKeyboardOnTap() = composed {
     val focusManager = LocalFocusManager.current
     val keyboardManager = LocalSoftwareKeyboardController.current

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/DeprecatedModifier.kt

@@ -1,14 +1,104 @@
 package vn.momo.kits.modifier
 
-import androidx.compose.foundation.background
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.clipRect
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.drawText
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.rememberTextMeasurer
+import androidx.compose.ui.unit.sp
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
 
+@Suppress("ExperimentalAnnotationRetention")
+@RequiresOptIn(
+    message = "This is internal API of native-kits, become internal in next sprint",
+    level = RequiresOptIn.Level.WARNING,
+)
+@Retention(AnnotationRetention.BINARY)
+@Target(
+    AnnotationTarget.CLASS,
+    AnnotationTarget.FUNCTION,
+    AnnotationTarget.PROPERTY,
+)
+annotation class InternalApi
+
+@Composable
+fun DeprecatedModifier(text: String = "Deprecated component"): Modifier = debugMarker(
+    label = text,
+    background = Colors.red_04.copy(alpha = 0.7f),
+    textColor = Colors.red_01,
+    animationLabel = "deprecatedMarquee",
+)
+
 @Composable
-fun DeprecatedModifier(): Modifier {
-    return Modifier.conditional(IsShowBaseLineDebug) {
-        background(Colors.red_01.copy(alpha = 0.5f))
+private fun debugMarker(
+    label: String,
+    background: Color,
+    textColor: Color,
+    animationLabel: String,
+): Modifier {
+    if (!IsShowBaseLineDebug) return Modifier
+
+    val textMeasurer = rememberTextMeasurer()
+    val marquee = rememberInfiniteTransition(label = animationLabel)
+    val progress by marquee.animateFloat(
+        initialValue = 0f,
+        targetValue = 1f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(durationMillis = 4000, easing = LinearEasing),
+            repeatMode = RepeatMode.Restart,
+        ),
+        label = "${animationLabel}Progress",
+    )
+
+    return Modifier.drawWithContent {
+        drawContent()
+        drawRect(color = background)
+
+        if (size.width <= 0f || size.height <= 0f) return@drawWithContent
+
+        val fontPx = (size.width * 0.1f).coerceIn(12.sp.toPx(), 20.sp.toPx())
+        val style = TextStyle(
+            color = textColor,
+            fontSize = fontPx.toSp(),
+            fontWeight = FontWeight.Bold,
+        )
+
+        val intrinsic = textMeasurer.measure(
+            text = label,
+            style = style,
+            maxLines = 1,
+            softWrap = false,
+        )
+        val textW = intrinsic.size.width
+        val textH = intrinsic.size.height
+        val y = (size.height - textH) / 2f
+
+        if (textW <= size.width) {
+            drawText(
+                textLayoutResult = intrinsic,
+                topLeft = Offset((size.width - textW) / 2f, y),
+            )
+        } else {
+            clipRect(right = size.width, bottom = size.height) {
+                val gap = textW * 0.5f
+                val travel = textW + gap
+                val x = -progress * travel
+                drawText(textLayoutResult = intrinsic, topLeft = Offset(x, y))
+                drawText(textLayoutResult = intrinsic, topLeft = Offset(x + travel, y))
+            }
+        }
     }
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Shadow.kt

@@ -9,8 +9,6 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.platform.setColor
 import vn.momo.kits.platform.setMaskFilter
-
-
 fun Modifier.shadow(
     color: Color = Color.Black,
     borderRadius: Dp = 0.dp,

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

@@ -41,8 +41,9 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
-import vn.momo.kits.application.ApplicationContext
+import vn.momo.kits.application.LocalContext
 import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.Typography
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.modifier.conditional
@@ -58,8 +59,6 @@ internal fun BottomSheet(
     barrierDismissible: Boolean = true,
     onDismiss: (() -> Unit)?
 ) {
-    val navigator = LocalNavigator.current
-
     val screenHeightDp = getScreenHeight()
     val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
     val sheetOffset = remember { Animatable(screenHeightPx) }
@@ -73,7 +72,7 @@ internal fun BottomSheet(
     val coroutineScope = rememberCoroutineScope()
 
     val maxApi = LocalMaxApi.current
-    val context = ApplicationContext.current
+    val context = LocalContext.current
 
     DisposableEffect(Unit) {
         ScreenTracker.trackPopupDisplayed(
@@ -117,7 +116,7 @@ internal fun BottomSheet(
                     easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
                 )
             )
-            navigator.pop()
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 
@@ -162,7 +161,7 @@ internal fun BottomSheet(
                 .noFeedbackClickable {  },
             contentAlignment = Alignment.BottomCenter
         ) {
-            Column {
+            Column(Modifier.padding(bottom = AppNavigationBar.current)) {
                 Box(
                     modifier = Modifier
                         .height(72.dp)

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

@@ -10,11 +10,7 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -22,7 +18,7 @@ import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
-import vn.momo.kits.application.ApplicationContext
+import vn.momo.kits.application.LocalContext
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
 import vn.momo.kits.modifier.conditional
@@ -44,7 +40,7 @@ internal fun ModalScreen(
     val coroutineScope = rememberCoroutineScope()
 
     val maxApi = LocalMaxApi.current
-    val context = ApplicationContext.current
+    val context = LocalContext.current
 
     DisposableEffect(Unit) {
         ScreenTracker.trackPopupDisplayed(
@@ -85,7 +81,7 @@ internal fun ModalScreen(
                 targetValue = 0.8f,
                 animationSpec = tween(durationMillis = 200)
             )
-            navigator.pop()
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }