@momo-kits/native-kits 0.162.0-debug → 0.162.1-beta.1-debug

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

@@ -45,8 +45,8 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.min
 import androidx.compose.ui.zIndex
+import kotlinx.coroutines.flow.Flow
 import vn.momo.kits.components.InputSearch
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
@@ -71,6 +71,7 @@ import vn.momo.kits.navigation.tracking.ScreenTrackingState
 import kotlinx.coroutines.delay
 import vn.momo.kits.application.ApplicationContext
 import kotlin.time.Clock
+import kotlin.time.Duration.Companion.milliseconds
 import kotlin.time.ExperimentalTime
 
 internal val LocalFooterHeightPx = staticCompositionLocalOf { mutableIntStateOf(0) }
@@ -98,7 +99,7 @@ internal fun StackScreen(
     // Auto tracking state
     val trackingState = remember {
         ScreenTrackingState().apply {
-            startTime = Clock.System.now().toEpochMilliseconds()
+            time = Clock.System.now().toEpochMilliseconds()
         }
     }
 
@@ -119,8 +120,8 @@ internal fun StackScreen(
         )
 
         // Track screen displayed after 2 seconds (debounce)
-        delay(2000)
-        val loadTime = Clock.System.now().toEpochMilliseconds() - trackingState.startTime
+        delay(2000.milliseconds)
+        val loadTime = Clock.System.now().toEpochMilliseconds() - trackingState.time
         ScreenTracker.trackScreenDisplayed(
             maxApi = maxApi,
             context = context,
@@ -130,7 +131,7 @@ internal fun StackScreen(
         )
 
         // Track screen interacted after displayed
-        val interactionTime = Clock.System.now().toEpochMilliseconds() - trackingState.startTime
+        val interactionTime = Clock.System.now().toEpochMilliseconds() - trackingState.time
         ScreenTracker.trackScreenInteracted(
             maxApi = maxApi,
             context = context,
@@ -204,8 +205,9 @@ internal fun StackScreen(
     }
 }
 
+@Suppress("FrequentlyChangingValue")
 @Composable
-fun FloatingContent() {
+internal fun FloatingContent() {
     val options = LocalOptions.current
     val density = LocalDensity.current
     val footerHeightPx = LocalFooterHeightPx.current
@@ -229,7 +231,7 @@ fun FloatingContent() {
 }
 
 @Composable
-fun ColumnScope.MainContent(content: @Composable () -> Unit) {
+internal fun ColumnScope.MainContent(content: @Composable () -> Unit) {
     val options = LocalOptions.current
     val inputSearchType = getInputSearchType(options)
     val density = LocalDensity.current
@@ -264,7 +266,7 @@ fun ColumnScope.MainContent(content: @Composable () -> Unit) {
 }
 
 @Composable
-fun ScreenContent(content: @Composable () -> Unit) {
+internal fun ScreenContent(content: @Composable () -> Unit) {
     val scrollState = LocalScrollState.current
     val options = LocalOptions.current
 
@@ -284,7 +286,7 @@ fun ScreenContent(content: @Composable () -> Unit) {
 }
 
 @Composable
-fun FooterContent() {
+internal fun FooterContent() {
     val options = LocalOptions.current
     if (options.footerComponent != null) {
         val keyboardSize = keyboardSizeState()
@@ -294,13 +296,13 @@ fun FooterContent() {
 }
 
 @Composable
-fun keyboardSizeState(): State<Dp> {
+internal fun keyboardSizeState(): State<Dp> {
     val bottom = WindowInsets.ime.asPaddingValues()
     return rememberUpdatedState(bottom.calculateBottomPadding())
 }
 
 @Composable
-fun OverplayView(bottomTabIndex: Int, id: Int) {
+internal fun OverplayView(bottomTabIndex: Int, id: Int) {
     val overplayType = OverplayComponentRegistry.getOverplayType()
 
     if (overplayType != null) {
@@ -355,8 +357,9 @@ data class InputSearchLayoutParams(
     val endPadding: Dp
 )
 
+@Suppress("FrequentlyChangingValue")
 @Composable
-fun SearchAnimated(
+internal fun SearchAnimated(
     isScrollInProgress: Boolean
 ) {
     val scrollState = LocalScrollState.current
@@ -376,7 +379,7 @@ fun SearchAnimated(
     val minTopPadding = AppStatusBar.current
     val maxTopPadding = AppStatusBar.current + HEADER_HEIGHT.dp
     val minStartPadding = Spacing.M
-    val maxStartPadding = if (options.hiddenBack) Spacing.M else 52.dp
+    val maxStartPadding = if (options.hiddenBack) Spacing.M else 48.dp // button back: size + left +right = 28 + 12 + 8 = 48
     val minEndPadding = Spacing.M
     val maxEndPadding = headerRightWidthDp + if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
 
@@ -469,64 +472,61 @@ private fun quantize(value: Int, stepPx: Int): Int {
 }
 
 @Composable
-fun LazyListState.proxyScrollState(
+internal fun LazyListState.proxyScrollState(
     thresholdPx: Int = 200,
     stepPx: Int = 4
-): Pair<ScrollState, Boolean> {
-    val scrollState = rememberScrollState()
-    val locked = remember { mutableStateOf(false) }
-
-    LaunchedEffect(this, scrollState, thresholdPx, stepPx) {
-        snapshotFlow { firstVisibleItemIndex to firstVisibleItemScrollOffset }
-            .collect { (index, offset) ->
-                val rawTarget = if (index == 0) offset else SCROLLED_PAST_FIRST_ITEM_THRESHOLD
-                val shouldLock = rawTarget > thresholdPx
-                if (locked.value != shouldLock) locked.value = shouldLock
-
-                val desired = if (shouldLock) thresholdPx else quantize(rawTarget, stepPx)
-
-                if (scrollState.value != desired) {
-                    scrollState.scrollTo(desired.coerceAtLeast(0))
-                }
-            }
-    }
-
-    val inProgress = remember { mutableStateOf(false) }
-    LaunchedEffect(this, thresholdPx) {
-        snapshotFlow { isScrollInProgress }
-            .collect { progressing ->
-                inProgress.value = if (locked.value) false else progressing
-            }
-    }
-
-    return scrollState to inProgress.value
-}
+): Pair<ScrollState, Boolean> = proxyScroll(
+    source = this,
+    thresholdPx = thresholdPx,
+    stepPx = stepPx,
+    isScrollInProgress = { isScrollInProgress },
+    rawTargetFlow = {
+        snapshotFlow {
+            if (firstVisibleItemIndex == 0) firstVisibleItemScrollOffset
+            else SCROLLED_PAST_FIRST_ITEM_THRESHOLD
+        }
+    },
+)
 
 @Composable
-fun ScrollState.proxyLimitedScrollState(
+internal fun ScrollState.proxyLimitedScrollState(
     thresholdPx: Int = 200,
     stepPx: Int = 4
+): Pair<ScrollState, Boolean> = proxyScroll(
+    source = this,
+    thresholdPx = thresholdPx,
+    stepPx = stepPx,
+    isScrollInProgress = { isScrollInProgress },
+    rawTargetFlow = { snapshotFlow { value } },
+)
+
+@Composable
+private fun proxyScroll(
+    source: Any,
+    thresholdPx: Int,
+    stepPx: Int,
+    isScrollInProgress: () -> Boolean,
+    rawTargetFlow: () -> Flow<Int>,
 ): Pair<ScrollState, Boolean> {
     val proxy = rememberScrollState()
     val locked = remember { mutableStateOf(false) }
 
-    LaunchedEffect(this, proxy, thresholdPx, stepPx) {
-        snapshotFlow { value }
-            .collect { rawTarget ->
-                val shouldLock = rawTarget > thresholdPx
-                if (locked.value != shouldLock) locked.value = shouldLock
+    LaunchedEffect(source, proxy, thresholdPx, stepPx) {
+        rawTargetFlow().collect { rawTarget ->
+            val shouldLock = rawTarget > thresholdPx
+            if (locked.value != shouldLock) locked.value = shouldLock
 
-                val desired = if (shouldLock) thresholdPx else quantize(rawTarget, stepPx)
+            val desired = if (shouldLock) thresholdPx else quantize(rawTarget, stepPx)
 
-                if (proxy.value != desired) {
-                    proxy.scrollTo(desired.coerceAtLeast(0))
-                }
+            if (proxy.value != desired) {
+                proxy.scrollTo(desired.coerceAtLeast(0))
             }
+        }
     }
 
     val inProgress = remember { mutableStateOf(false) }
-    LaunchedEffect(this, thresholdPx) {
-        snapshotFlow { isScrollInProgress }
+    LaunchedEffect(source, thresholdPx) {
+        snapshotFlow { isScrollInProgress() }
             .collect { progressing ->
                 inProgress.value = if (locked.value) false else progressing
             }

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

@@ -6,13 +6,7 @@ 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.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
@@ -32,12 +26,12 @@ import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.platform.getScreenHeight
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
-fun setBottomTabOption(index: Int, options: NavigationOptions){
+internal fun setBottomTabOption(index: Int, options: NavigationOptions){
     if (index in bottomTabOptionItems.indices) {
         bottomTabOptionItems[index] = options
     }
 }
-fun getBottomTabOption(index: Int): NavigationOptions? {
+internal fun getBottomTabOption(index: Int): NavigationOptions? {
     return if (index in bottomTabOptionItems.indices) {
         bottomTabOptionItems[index]
     } else null

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

@@ -5,19 +5,7 @@ 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.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -32,26 +20,18 @@ 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.components.Badge
-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
-import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.components.BadgeDot
-import vn.momo.kits.components.DotSize
-import vn.momo.kits.const.Typography
+import vn.momo.kits.components.*
+import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
-val floatingButtonWidth = 75.dp
-const val BOTTOM_TAB_BAR_HEIGHT = 64
+internal val floatingButtonWidth = 75.dp
+internal const val BOTTOM_TAB_BAR_HEIGHT = 64
 
 @Composable
-fun BottomTabBar(
+internal fun BottomTabBar(
     items: List<BottomTabItem>,
     floatingButton: BottomTabFloatingButton? = null,
     navController: NavController,
@@ -91,11 +71,11 @@ fun BottomTabBar(
             horizontalArrangement = Arrangement.SpaceAround,
         ) {
             if (floatingButton == null) {
-                renderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
+                RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
             } else {
-                renderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
+                RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
                 Spacer(modifier = Modifier.width(floatingButtonWidth).padding(horizontal = Spacing.XXS))
-                renderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
+                RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
             }
         }
 
@@ -124,7 +104,7 @@ fun BottomTabBar(
 }
 
 @Composable
-fun RowScope.renderTabBarItem(
+internal fun RowScope.RenderTabBarItem(
     items: List<BottomTabItem>,
     fromIndex: Int,
     toIndex: Int,
@@ -143,7 +123,7 @@ fun RowScope.renderTabBarItem(
 }
 
 @Composable
-fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
     fun isNumber(label: String): Boolean {
         val numberRegex = "^\\d+$".toRegex()
         return numberRegex.matches(label)
@@ -203,7 +183,7 @@ fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
 }
 
 @Composable
-fun FloatingButton(data: BottomTabFloatingButton) {
+internal fun FloatingButton(data: BottomTabFloatingButton) {
     Column(
         modifier = Modifier
             .width(floatingButtonWidth)

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

@@ -17,7 +17,7 @@ import androidx.compose.ui.zIndex
 import vn.momo.kits.const.AppTheme
 
 @Composable
-fun CurvedContainer(
+internal fun CurvedContainer(
     circleSize: Dp = 48.dp,
     tabBarItemIconSize: Dp = 28.dp,
     circleOverSize: Dp = 2.dp,

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

@@ -1,40 +1,21 @@
 package vn.momo.kits.navigation.component
 
-import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.*
 import androidx.compose.animation.core.CubicBezierEasing
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.tween
-import androidx.compose.animation.expandHorizontally
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.shrinkHorizontally
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.sizeIn
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.*
 import androidx.compose.material3.AlertDialogDefaults
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.FloatingActionButtonElevation
-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.rememberCoroutineScope
+import androidx.compose.runtime.*
 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.graphics.Color
@@ -50,6 +31,7 @@ import vn.momo.kits.components.Text
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.conditional
+import kotlin.time.Duration.Companion.milliseconds
 
 enum class FABSize { SMALL, DEFAULT }
 enum class FABPosition { END, CENTER }
@@ -73,7 +55,7 @@ private val FabIconSizeDefault = 24.dp
 private val FabPaddingHorizontal = 12.dp
 
 @Composable
-fun FloatingButton(
+internal fun FloatingButton(
     scrollPosition: Int,
     bottom: Dp,
     onClick: () -> Unit,
@@ -106,7 +88,7 @@ fun FloatingButton(
             coroutineScope.launch {
                 scrollStateFlow.collectLatest { newScroll ->
                     isExpanded = newScroll <= lastScrollPosition
-                    delay(100)
+                    delay(100.milliseconds)
                     lastScrollPosition = newScroll
                 }
             }

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

@@ -1,12 +1,13 @@
 package vn.momo.kits.navigation.component
 
+import vn.momo.kits.utils.Deprecated.InternalApi
+
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -23,6 +24,7 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Icon
@@ -42,11 +44,13 @@ import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
 import vn.momo.kits.navigation.getInputSearchType
 
-const val HEADER_HEIGHT = 52
-enum class InputSearchType { None, Header, Animated }
+internal const val HEADER_HEIGHT = 52
+internal enum class InputSearchType { None, Header, Animated }
+enum class TitlePosition { LEFT, CENTER }
 
+@Suppress("FrequentlyChangingValue")
 @Composable
-fun Header(onBackHandler: (() -> Unit)? = null) {
+internal fun Header(onBackHandler: (() -> Unit)? = null) {
     val options = LocalOptions.current
     val navigator = LocalNavigator.current
     val scrollState = LocalScrollState.current
@@ -76,6 +80,13 @@ fun Header(onBackHandler: (() -> Unit)? = null) {
         AppTheme.current.colors.background.surface
 
     if (options.headerType == HeaderType.None) return
+
+    val titlePosition = options.titlePosition
+    val titleColor = headerColor.tintIconColor
+        .copy(alpha = if (inputSearchType == InputSearchType.Animated) 1f - animatedAlpha else 1f)
+    // Centered title needs a full-width overlay to stay screen-centered, not boxed between back button and header right.
+    val centerTitle = titlePosition == TitlePosition.CENTER && options.headerTitle is HeaderTitle.Default
+
     Box(
         Modifier.height(AppStatusBar.current + HEADER_HEIGHT.dp)
             .fillMaxWidth()
@@ -101,20 +112,40 @@ fun Header(onBackHandler: (() -> Unit)? = null) {
                         onBackHandler?.invoke() ?: navigator.onBackSafe {  }
                     }
                 )
-                Spacer(Modifier.width(Spacing.M))
+                Spacer(Modifier.width(Spacing.S))
             }
 
-            HeaderContent(
-                options.headerTitle,
-                headerColor.tintIconColor
-                    .copy(alpha = if (inputSearchType == InputSearchType.Animated) 1f - animatedAlpha else 1f)
-            )
+            if (centerTitle) {
+                Spacer(Modifier.weight(1f))
+            } else {
+                HeaderContent(
+                    headerTitle = options.headerTitle,
+                    tintIconColor = titleColor,
+                    titlePosition = titlePosition,
+                    modifier = Modifier.weight(1f)
+                )
+            }
             Box(Modifier.onGloballyPositioned {
                 if(headerRightWidthPx.intValue != it.size.width) headerRightWidthPx.intValue = it.size.width
             }){
                 HeaderRight(options.headerRight, options.tintColor, headerColor)
             }
         }
+        if (centerTitle) {
+            Box(
+                modifier = Modifier.height(HEADER_HEIGHT.dp)
+                    .fillMaxWidth()
+                    .padding(horizontal = Spacing.M),
+                contentAlignment = Alignment.Center
+            ) {
+                HeaderContent(
+                    headerTitle = options.headerTitle,
+                    tintIconColor = titleColor,
+                    titlePosition = titlePosition,
+                    modifier = Modifier.fillMaxWidth()
+                )
+            }
+        }
         VerticalShadow(opacity)
     }
 }
@@ -140,15 +171,23 @@ private fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColo
 }
 
 @Composable
-fun RowScope.HeaderContent(headerTitle: HeaderTitle, tintIconColor: Color){
+internal fun HeaderContent(
+    headerTitle: HeaderTitle,
+    tintIconColor: Color,
+    titlePosition: TitlePosition = TitlePosition.LEFT,
+    modifier: Modifier = Modifier,
+){
     Box(
-        Modifier.weight(1f)
+        modifier = modifier,
+        contentAlignment = if (titlePosition == TitlePosition.CENTER) Alignment.Center else Alignment.CenterStart
     ) {
         when (headerTitle){
             is HeaderTitle.Default -> {
                 HeaderTitle(
                     title = headerTitle.title,
-                    color = tintIconColor
+                    color = tintIconColor,
+                    modifier = Modifier.fillMaxWidth(fraction = if (titlePosition == TitlePosition.CENTER) 0.5f else 1f),
+                    textAlign = if (titlePosition == TitlePosition.CENTER) TextAlign.Center else TextAlign.Start
                 )
             }
             is HeaderTitle.Journey -> {}
@@ -163,7 +202,7 @@ fun RowScope.HeaderContent(headerTitle: HeaderTitle, tintIconColor: Color){
 }
 
 @Composable
-fun VerticalShadow(opacity: Float){
+internal fun VerticalShadow(opacity: Float){
     if(opacity == 1f){
         Box(modifier = Modifier
             .fillMaxWidth()
@@ -246,8 +285,9 @@ data class HeaderBackProps(
     val preventBack: PopupNotifyProps? = null,
 )
 
+@InternalApi
 data class HeaderColor(val tintIconColor: Color, val backgroundButton: Color, val borderColor: Color)
-fun getHeaderColor(headerType: HeaderType, opacity: Float, tintColor: Color?, defaultColor: Color): HeaderColor{
+internal fun getHeaderColor(headerType: HeaderType, opacity: Float, tintColor: Color?, defaultColor: Color): HeaderColor{
     return if(headerType is HeaderType.Animated) {
         if (opacity == 1f || !headerType.isSurface)
             HeaderColor(

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

@@ -27,8 +27,9 @@ enum class AnimatedHeaderRatio(val value: Float){
     RATIO_3_2(3f / 2f)
 }
 
+@Suppress("FrequentlyChangingValue")
 @Composable
-fun HeaderBackground() {
+internal fun HeaderBackground() {
     val density = LocalDensity.current
     val theme = AppTheme.current
     val options = LocalOptions.current

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

@@ -1,5 +1,7 @@
 package vn.momo.kits.navigation.component
 
+import vn.momo.kits.utils.Deprecated.InternalApi
+
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
@@ -35,6 +37,7 @@ import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.navigation.LocalMaxApi
 
 @Composable
+@InternalApi
 fun HeaderRight(
     headerRight: HeaderRight,
     tintColor: Color? = null,
@@ -57,7 +60,7 @@ fun HeaderRight(
 }
 
 @Composable
-fun Toolkit(
+internal fun Toolkit(
     headerRight: HeaderRight.Toolkit,
     tintColor: Color? = null,
     headerColor: HeaderColor
@@ -186,7 +189,7 @@ fun Toolkit(
 
 
 @Composable
-fun NavigationButton(
+internal fun NavigationButton(
     disabled: Boolean,
     icon: String,
     showBadge: Boolean? = false,
@@ -300,7 +303,7 @@ data class Tool(
     }
 }
 
-data class NavigationButtonConfig(
+private data class NavigationButtonConfig(
     val icon: String,
     val onPress: () -> Unit
 )

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

@@ -13,14 +13,16 @@ import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.setAutomationId
 
 @Composable
-fun HeaderTitle(
+internal fun HeaderTitle(
     title: String = "",
     color: Color? = null,
+    modifier: Modifier = Modifier.fillMaxWidth(),
+    textAlign: TextAlign = TextAlign.Start,
 ) {
     Text(
-        modifier = Modifier.fillMaxWidth().zIndex(1f).setAutomationId("title_navigation_header"),
+        modifier = modifier.zIndex(1f).setAutomationId("title_navigation_header"),
         text = title,
-        textAlign = TextAlign.Start,
+        textAlign = textAlign,
         style = Typography.actionSBold.copy(
             fontSize = 15.sp,
             lineHeight = 22.sp,

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

@@ -2,17 +2,7 @@ package vn.momo.kits.navigation.component
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-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.width
-import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicText
@@ -43,7 +33,7 @@ import vn.momo.kits.navigation.component.HeaderTitle.User
 import vn.momo.kits.platform.getScreenDimensions
 
 @Composable
-fun HeaderUser(
+internal fun HeaderUser(
     data: HeaderTitle
 ) {
     if (data !is User) return
@@ -367,4 +357,4 @@ private fun RemoteIcon16(url: String) {
 }
 
 @Immutable
-data class AvatarUrls(val items: List<String>)
+private data class AvatarUrls(val items: List<String>)