@momo-kits/native-kits 0.151.2-test.1 → 0.151.2-test.10

package/compose/build.gradle.kts

@@ -47,6 +47,8 @@ kotlin {
                 implementation(libs.coil.multiplatform.network.ktor)
                 implementation(libs.jetbrains.serialization.json)
                 implementation(libs.kotlinx.datetime)
+                implementation(libs.compottie)
+                implementation(libs.compottie.res)
                 api(project(":NativeMaxApi"))
             }
         }

package/compose/src/commonMain/composeResources/files/lottie_circle_loader.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":30,"ip":0,"op":50,"w":100,"h":100,"nm":"Spinner3_white","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"loading","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0],"e":[200]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":25,"s":[200],"e":[360]},{"t":35}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.392],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0],"e":[100]},{"t":50}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[100]},{"t":28}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":50,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":15,"s":[0],"e":[200]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":27,"s":[200],"e":[360]},{"t":37}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.392],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":20,"s":[0],"e":[100]},{"t":49}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[100]},{"t":30}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":30,"op":50,"st":2,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"base","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":50,"st":0,"ct":1,"bm":0}],"markers":[]}

package/compose/src/commonMain/kotlin/vn/momo/kits/application/FloatingButton.kt

@@ -67,6 +67,7 @@ data class FabProps(
     val position: FABPosition? = FABPosition.END,
 )
 
+@Deprecated("Use vn.momo.kits.navigation.FloatingButton instead", ReplaceWith("vn.momo.kits.navigation.FloatingButton"))
 @Composable
 fun FloatingButton(
     scrollPosition: Int,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Header.kt

@@ -9,13 +9,10 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -38,13 +35,12 @@ import kotlinx.coroutines.flow.map
 import vn.momo.kits.components.Icon
 import vn.momo.kits.components.InputSearch
 import vn.momo.kits.components.InputSearchProps
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.platform.getStatusBarHeight
+import vn.momo.kits.utils.getAppStatusBarHeight
 
 data class HeaderColor(val tintIconColor: Color, val backgroundButton: Color, val borderColor: Color)
 fun getHeaderColor(animatedHeader: AnimatedHeader?, opacity: Float, tintColor: Color?, defaultColor: Color): HeaderColor{
@@ -76,6 +72,7 @@ fun getHeaderColor(animatedHeader: AnimatedHeader?, opacity: Float, tintColor: C
             )
 }
 
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
 @Composable
 fun Header(
     headerType: HeaderType = HeaderType.DEFAULT,
@@ -222,13 +219,4 @@ fun Header(
             }
         }
     }
-}
-
-@Composable
-fun getAppStatusBarHeight(): Dp {
-    return if (AppStatusBar.current == 0.dp) {
-        WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
-    } else {
-        AppStatusBar.current
-    }
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderAnimated.kt

@@ -11,6 +11,7 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
 
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
 @Composable
 fun HeaderAnimated(image: String, scrollState: Int = 0) {
     // Scale animation

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderBackground.kt

@@ -8,9 +8,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.platform.getStatusBarHeight
+import vn.momo.kits.utils.getAppStatusBarHeight
 
 enum class TitlePosition {
     LEFT, CENTER,
@@ -37,6 +36,7 @@ fun animateColor(start: Color, stop: Color, fraction: Float): Color {
     )
 }
 
+@Deprecated("Use vn.momo.kits.navigation.component.HeaderBackground instead", ReplaceWith("vn.momo.kits.navigation.component.HeaderBackground"))
 @Composable
 fun HeaderBackground(
     headerType: HeaderType = HeaderType.DEFAULT,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderDefault.kt

@@ -19,6 +19,7 @@ import vn.momo.kits.components.Options
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.bottomBorder
 
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
 @Composable
 fun HeaderDefault(
     opacityAni: Float,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderExtended.kt

@@ -19,6 +19,7 @@ import vn.momo.kits.components.Options
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.bottomBorder
 
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
 @Composable
 fun HeaderExtended(
     opacityAni: Float,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderRight.kt

@@ -81,6 +81,7 @@ object Spacing {
     val XXS = 2.dp
 }
 
+@Deprecated("Use vn.momo.kits.navigation.component.HeaderRight instead", ReplaceWith("vn.momo.kits.navigation.component.HeaderRight"))
 @Composable
 fun HeaderRight(
     headerRight: HeaderRightData? = null,
@@ -258,6 +259,7 @@ private fun ToolkitHeaderRight(
     }
 }
 
+@Deprecated("Use vn.momo.kits.navigation.component instead", ReplaceWith("vn.momo.kits.navigation.component"))
 @Composable
 fun NavigationButton(
     disabled: Boolean,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderTitle.kt

@@ -10,6 +10,7 @@ import androidx.compose.ui.zIndex
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.Typography
 
+@Deprecated("Use vn.momo.kits.navigation.component instead", ReplaceWith("vn.momo.kits.navigation.component"))
 @Composable
 fun HeaderTitle(
     title: String = "",

package/compose/src/commonMain/kotlin/vn/momo/kits/application/LiteScreen.kt

@@ -68,7 +68,6 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.max
 import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.mapNotNull
@@ -83,8 +82,10 @@ import vn.momo.kits.modifier.kitsAutomationId
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.modifier.shadow
+import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
 
+@Deprecated("Use NavigationContainer(StackScreen) instead", ReplaceWith("NavigationContainer(StackScreen)"))
 @Composable
 fun LiteScreen(
     scrollable: Boolean = true,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt

@@ -2,6 +2,7 @@ package vn.momo.kits.application
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -17,6 +18,7 @@ import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
 import vn.momo.kits.platform.getStatusBarHeight
 
+@Deprecated("Use IMaxApi instead", ReplaceWith("IMaxApi"))
 interface ComposeApi {
     fun request(funcName: String, params: Any?): String
     fun request(funcName: String, params: Any?, onResponse: ((String) -> Unit)?): String
@@ -62,6 +64,7 @@ class Navigator {
     }
 }
 
+@Immutable
 data class MiniAppContext(
     val appIcon: String = "",
     val appName: Any? = null,
@@ -135,9 +138,10 @@ private fun Map<String, Any?>?.mapStringAny(key: String): Map<String, Any?> =
 private fun Map<String, Any?>?.listOfMapStringAny(key: String): List<Map<String, Any>> =
     (this?.get(key) as? List<Map<String, Any>>) ?: emptyList()
 
-
+@Deprecated("Use LocalApi instead", ReplaceWith("LocalApi"))
 val PlatformApi = staticCompositionLocalOf<Any?> { null }
 
+@Deprecated("Use LocalNavigator instead", ReplaceWith("LocalNavigator"))
 val AppNavigator = staticCompositionLocalOf<Navigator?> {
     null
 }
@@ -154,6 +158,7 @@ val AppLanguage = staticCompositionLocalOf<String?> {
     null
 }
 
+@Immutable
 data class KitConfig(
     val trustBanner: TrustBannerData? = null,
     val headerBar: String? = null,
@@ -162,6 +167,7 @@ data class KitConfig(
 
 internal var DesignSystemWhiteList: Boolean? = null
 
+@Deprecated("Use NavigationContainer instead", ReplaceWith("NavigationContainer"))
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt

@@ -40,6 +40,7 @@ import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.shadow
 import vn.momo.kits.platform.getAndroidBuildVersion
+import vn.momo.kits.utils.getAppStatusBarHeight
 
 enum class HeaderType {
     DEFAULT,
@@ -49,6 +50,7 @@ enum class HeaderType {
 
 const val HEADER_HEIGHT = 52
 
+@Deprecated("Use NavigationContainer(StackScreen) instead", ReplaceWith("NavigationContainer(StackScreen)"))
 @Composable
 fun Screen(
     backgroundColor: Color? = null,

package/compose/src/commonMain/kotlin/vn/momo/kits/application/useHeaderSearchAnimation.kt

@@ -22,6 +22,7 @@ data class HeaderAnimations(
 private const val SCREEN_PADDING = 12
 private const val BACK_WIDTH = 28
 
+@Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
 @Composable
 fun useHeaderSearchAnimation(
     opacityAni: Float,

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

@@ -11,23 +11,30 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import io.github.alexzhirkevich.compottie.Compottie
+import io.github.alexzhirkevich.compottie.LottieCompositionSpec
+import io.github.alexzhirkevich.compottie.animateLottieCompositionAsState
+import io.github.alexzhirkevich.compottie.rememberLottieComposition
+import io.github.alexzhirkevich.compottie.rememberLottiePainter
 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.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.uikits.resources.Res
 
 enum class ButtonType {
     PRIMARY,
@@ -145,22 +152,35 @@ fun RenderLeading(
     ) {
         if (loading) {
             Box(Modifier.padding(end = marginRight)) {
-                CircularProgressIndicator(
-                    modifier = Modifier.size(iconSize - 4.dp),
+                val composition by rememberLottieComposition {
+                    LottieCompositionSpec.JsonString(
+                        Res.readBytes("files/lottie_circle_loader.json").decodeToString()
+                    )
+                }
+
+                val progress by animateLottieCompositionAsState(
+                    composition = composition,
+                    iterations = Compottie.IterateForever
+                )
+
+                Image(
+                    source = rememberLottiePainter(
+                        composition = composition,
+                        progress = { progress }
+                    ),
+                    modifier = Modifier.size(iconSize),
+                )
+            }
+        } else {
+            if (iconLeft.isNotEmpty()) {
+                Icon(
+                    source = iconLeft,
                     color = color,
-                    trackColor = Color.Transparent,
-                    strokeWidth = 2.dp
+                    size = iconSize,
+                    modifier = Modifier.padding(end = marginRight)
                 )
             }
         }
-        if (iconLeft.isNotEmpty()) {
-            Icon(
-                source = iconLeft,
-                color = color,
-                size = iconSize,
-                modifier = Modifier.padding(end = marginRight)
-            )
-        }
     }
 }
 
@@ -261,7 +281,7 @@ fun Button(
         }
     }.activeOpacityClickable(
         activeOpacity = 0.5f,
-        enabled = isEnabled,
+        enabled = isEnabled && !loading,
         onClick = onClick
     )
 
@@ -272,7 +292,8 @@ fun Button(
             .then(getTypeStyle(type, size = size))
             .padding(horizontal = sizeSpecs.padding)
             .defaultMinSize(minWidth = sizeSpecs.width)
-            .height(sizeSpecs.height),
+            .height(sizeSpecs.height)
+            .alpha(if(loading) 0.75f else 1f),
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,
     ) {

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

@@ -72,7 +72,7 @@ private fun getHostFromUrl(url: String): String? {
 private fun appendSizeQueryParam(url: String, value: String): String {
     val fragmentIndex = url.indexOf('#')
     val (baseUrl, fragment) = if (fragmentIndex != -1) {
-        url.substring(0, fragmentIndex) to url.substring(fragmentIndex)
+        url.take(fragmentIndex) to url.substring(fragmentIndex)
     } else {
         url to ""
     }

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

@@ -2,7 +2,6 @@ package vn.momo.kits.components.datetimepicker
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
-import kotlinx.datetime.Clock
 import kotlinx.datetime.DatePeriod
 import kotlinx.datetime.LocalDateTime
 import kotlinx.datetime.TimeZone
@@ -10,6 +9,8 @@ import kotlinx.datetime.minus
 import kotlinx.datetime.number
 import kotlinx.datetime.plus
 import kotlinx.datetime.toLocalDateTime
+import kotlin.time.Clock.System.now
+import kotlin.time.ExperimentalTime
 
 /**
  * Format a LocalDateTime object into a string
@@ -149,8 +150,9 @@ val timeMode = listOf("AM", "PM")
 /**
  * Get today's date
  */
+@OptIn(ExperimentalTime::class)
 fun getCurrentDateTime(): LocalDateTime {
-    return Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
+    return now().toLocalDateTime(TimeZone.currentSystemDefault())
 }
 
 /**

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

@@ -20,7 +20,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
@@ -36,6 +35,7 @@ import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import vn.momo.kits.components.Divider
 import vn.momo.kits.components.Icon
+import vn.momo.kits.components.Text
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius

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

@@ -2,6 +2,7 @@ package vn.momo.kits.navigation
 
 import androidx.compose.foundation.gestures.ScrollableState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.staticCompositionLocalOf
@@ -66,8 +67,9 @@ val LocalNavigation = staticCompositionLocalOf<Navigation> {
     error("No NavigationStack provided")
 }
 
+@Stable
 data class NavigationOptions(
-    var onBackHandler: (() -> Unit)? = null,
+    val onBackHandler: (() -> Unit)? = null,
     val hiddenBack: Boolean = false,
     val headerTitle: HeaderTitle = HeaderTitle.Default("Stack"),
     val headerRight: HeaderRight = HeaderRight.Toolkit(),
@@ -87,6 +89,6 @@ data class KeyboardOptions(
 
 
 data class ScrollData(
-    val scrollable: Boolean = false,
+    val scrollable: Boolean = true,
     val scrollState: ScrollableState? = null,
 )

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

@@ -16,19 +16,25 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.toRoute
+import vn.momo.kits.application.AppConfig
+import vn.momo.kits.application.AppLanguage
 import vn.momo.kits.application.ApplicationContext
+import vn.momo.kits.application.KitConfig
 import vn.momo.kits.application.MiniAppContext
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.AppThemeController
 import vn.momo.kits.const.Theme
+import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.utils.getAppStatusBarHeight
 import vn.momo.maxapi.IMaxApi
 
 @Composable
@@ -39,14 +45,13 @@ fun NavigationContainer(
     applicationContext: MiniAppContext? = null,
     maxApi: IMaxApi? = null,
     setNavigator: ((Navigator) -> Unit)? = null,
+    statusBarHeight: Dp? = null,
+    config: KitConfig? = null,
+    language: String? = null,
 ){
     val navController = rememberNavController()
     val navigator = remember { Navigator(navController = navController, maxApi = maxApi) }
-    val statusBarHeight = if (AppStatusBar.current == 0.dp) {
-        WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
-    } else {
-        AppStatusBar.current
-    }
+    val statusBarHeight = statusBarHeight ?: getAppStatusBarHeight()
     val navigationBarHeight = if (AppNavigationBar.current == 0.dp) {
         WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
     } else {
@@ -55,6 +60,17 @@ fun NavigationContainer(
 
     val theme = remember { mutableStateOf(initialTheme) }
 
+    LaunchedEffect(Unit) {
+        val headerBar = config?.headerBar
+        if (headerBar != null && theme.value.assets.headerBackground == null) {
+            theme.value = theme.value.copy(
+                assets = ThemeAssets(
+                    headerBackground = headerBar
+                )
+            )
+        }
+    }
+
     val startDestination = DynamicScreenRegistry.register(initialScreen, options)
 
     CompositionLocalProvider(
@@ -65,6 +81,8 @@ fun NavigationContainer(
         AppStatusBar provides statusBarHeight,
         AppNavigationBar provides navigationBarHeight,
         ApplicationContext provides applicationContext,
+        AppConfig provides config,
+        AppLanguage provides language
     ) {
         LaunchedEffect(Unit) {
             setNavigator?.invoke(navigator)

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

@@ -208,9 +208,8 @@ object OverplayComponentRegistry {
     }
 
     @Composable
-    fun showOverlayComponent(){
-        val overplay = currentOverlayComponent.value
-        if (overplay == null) return
+    fun OverlayComponent(){
+        val overplay = currentOverlayComponent.value ?: return
 
         if (overplay.params is OverplayComponentParams.BottomSheet) {
             val param = overplay.params
@@ -218,14 +217,14 @@ object OverplayComponentRegistry {
                 content = overplay.content,
                 header = param.bottomSheetHeader ?: BottomHeader.Title(),
                 isSurface = param.isSurface,
-                barrierDismissible = param.barrierDismissible == true,
+                barrierDismissible = param.barrierDismissible,
                 onDismiss = param.onDismiss
             )
         } else if (overplay.params is OverplayComponentParams.Modal) {
             val param = overplay.params
             ModalScreen(
                 content = overplay.content,
-                barrierDismissible = param.barrierDismissible == true,
+                barrierDismissible = param.barrierDismissible,
                 onDismiss = param.onDismiss
             )
         }