@momo-kits/native-kits 0.167.1-duo-search.1-debug → 0.167.1-duo-search.2-debug

package/CLAUDE.md

@@ -56,7 +56,10 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 
 ## SwiftUI kit (`ios/`)
 
-- The pod's minimum is **iOS 15**, but the navigation shell (`NavigationContainer`, `Navigator`, `NavigatorManager`, `BottomTab`, overplay views) is **iOS 16+** (`@available(iOS 16.0, *)`) because it is built on `NavigationStack`. Keep components outside that shell iOS 15-compatible.
+- **Layout mirrors Compose:** `ios/Navigation/` follows `navigation/` file for file (`NavigationContainer`, `Navigator`, `Navigation` (options + per-screen `Navigation`), `StackScreen` (incl. `NavigationFooter`), `BottomSheet`, `ModalScreen`, `HostBackGestureBridge`, `BottomTab/`, `Component/`, `Tracking/`); `ios/Layout/ScreenLayout.swift` mirrors `layout/`. `ios/Application/` keeps only context (`ApplicationEnvironment`), `Localize*`, `MaxApi` and the deprecated `Screen` / `LegacyHeader` (Compose `application/`). Change a navigation piece on both sides together.
+- **File basenames must be unique across the pod** — Swift fails with "filename used twice" even in different folders (hence `LegacyHeader.swift` next to `Navigation/Component/Header.swift`). New folders under `ios/` must be added to `source_files` in `ios/native-kits.podspec`.
+- Screens update their own chrome at runtime through `@EnvironmentObject var navigation: Navigation` → `setOptions { $0.title = … }` (Compose `LocalNavigation`); bottom tabs keep one `Navigation` per tab. The host back bridge is `HostBackGestureBridge.shared` (`NavigatorManager` is a deprecated alias); a bottom tab off its first tab routes back to the first tab (`Navigator.tabBackHandler`, keyed by the hosting screen).
+- The pod's minimum is **iOS 15**, but the navigation shell (`NavigationContainer`, `Navigator`, `HostBackGestureBridge`, `BottomTab`, overplay views) is **iOS 16+** (`@available(iOS 16.0, *)`) because it is built on `NavigationStack`. Keep components outside that shell iOS 15-compatible.
 - `present` opens one `fullScreenCover` that hosts its own `NavigationStack` (`Navigator.presentedPath`): pushes and pops act on the presented flow while it is up, and each overplay (modal / bottom sheet / snackbar) renders in the context it was shown over (`OverplayItem.presentedId`).
 - Icons are compiled in: `ios/Icon/Icons.swift` is generated from Compose `utils/Icons.kt` by `node scripts/gen-ios-icons.mjs` — don't hand-edit it. A host `icon.json` in the main bundle only adds keys the kit lacks.
 - Bundled assets (colors, Lottie JSON) live in `ios/Resources` and ship in the `MoMoUIKitsResources` bundle; load them through `MoMoUIKitsResources.bundle`, never `Bundle.main`.

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-duo-search.1-debug"
+        version = "0.167.1-duo-search.2-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.167.1-duo-search.1-debug'
+    spec.version                  = '0.167.1-duo-search.2-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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

@@ -1,17 +1,37 @@
 package vn.momo.kits.application
 
 import androidx.annotation.FloatRange
-import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.*
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.FocusInteraction
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.runtime.*
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.produceState
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
@@ -25,13 +45,25 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.layout.*
+import androidx.compose.ui.layout.Layout
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasurePolicy
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.layout.Placeable
+import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.*
+import androidx.compose.ui.unit.Constraints
+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.lerp
+import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.mapNotNull
 import vn.momo.kits.components.Icon
@@ -41,15 +73,21 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.ScreenLayout
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.utils.horizontalSafeAreaPadding
 import vn.momo.kits.modifier.kitsAutomationId
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.navigation.component.HEADER_FONT_FAMILY
 import vn.momo.kits.navigation.component.HEADER_HEIGHT
+import vn.momo.kits.navigation.component.SideBarButton
 import vn.momo.kits.utils.getAppStatusBarHeight
-import vn.momo.kits.utils.horizontalSafeAreaPadding
 import kotlin.math.max
 import kotlin.math.roundToInt
+import vn.momo.kits.navigation.component.getHeaderColor as getNavigationHeaderColor
 
 
 data class AnimationOption(
@@ -117,8 +155,7 @@ fun LiteScreen(
         scrollState = finalScrollState,
         modifier = Modifier
             .fillMaxSize()
-            .hideKeyboardOnTap()
-            .horizontalSafeAreaPadding(),
+            .hideKeyboardOnTap(),
         contentModifier = contentModifier,
         verticalArrangement = verticalArrangement,
         horizontalAlignment = horizontalAlignment,
@@ -171,6 +208,8 @@ private fun LiteScreenLayout(
     content: @Composable () -> Unit,
 ) {
     val statusBarHeight = getAppStatusBarHeight()
+    val screenLayout = getScreenLayout()
+    val applySafeAreaPadding = screenLayout.sideBar != null
     val isHeaderNone = remember(headerType) {
         headerType == HeaderType.NONE
     }
@@ -232,6 +271,12 @@ private fun LiteScreenLayout(
     val animationOpacityModifier = Modifier.graphicsLayer {
         alpha = animationOption?.animateOpacity ?: 1f
     }
+    val sideBarColor = getNavigationHeaderColor(
+        vn.momo.kits.navigation.component.HeaderType.Default(),
+        1f,
+        null,
+        Colors.black_17,
+    )
     val titleModifier = Modifier
         .kitsAutomationId("title_navigation_header")
         .layoutId(HeaderId.TITLE_ID)
@@ -243,6 +288,8 @@ private fun LiteScreenLayout(
         }
 
     val policy = remember(
+        screenLayout,
+        applySafeAreaPadding,
         useAnimationSearch,
         isHeaderNone,
         isHeaderExtend,
@@ -255,6 +302,8 @@ private fun LiteScreenLayout(
         horizontalAlignment,
     ) {
         LiteScreenLayoutPolicy(
+            screenLayout = screenLayout,
+            applySafeAreaPadding = applySafeAreaPadding,
             useAnimationSearch = useAnimationSearch,
             isHeaderNone = isHeaderNone,
             isHeaderExtend = isHeaderExtend,
@@ -269,13 +318,13 @@ private fun LiteScreenLayout(
     }
 
     Layout(
-        modifier = modifier
-            .animateContentSize(),
+        modifier = modifier,
         content = {
             Box(
                 modifier = animationOpacityModifier
                     .layoutId(HeaderId.CONTENT_ID)
-                    .then(contentModifier),
+                    .then(contentModifier)
+                    .then(if (applySafeAreaPadding) Modifier.horizontalSafeAreaPadding() else Modifier),
                 contentAlignment = Alignment.TopCenter,
             ) {
                 content()
@@ -311,28 +360,44 @@ private fun LiteScreenLayout(
             }
 
             if (!isHeaderNone && onGoBack != null) {
-                val coreModifier = Modifier
-                    .layoutId(HeaderId.BACK_ID)
-                    .then(animationOpacityModifier)
-                    .clip(CircleShape)
-                    .noFeedbackClickable(onClick = onGoBack)
-                    .setAutomationId("btn_navigation_back")
-                inputSearchProps?.customBackIcon?.invoke(coreModifier) ?: Box(
-                    modifier = coreModifier
-                        .size(28.dp)
-                        .border(
-                            width = 0.2.dp,
-                            color = headerColor.borderColor,
-                            shape = CircleShape,
-                        )
-                        .background(color = headerColor.backgroundButton)
-                        .padding(Spacing.XS),
-                ) {
-                    Icon(
-                        source = "arrow-back",
-                        color = headerColor.tintIconColor,
-                        size = 20.dp,
-                    )
+                when {
+                    screenLayout.sideBar != null -> {
+                        Box(
+                            modifier = Modifier.layoutId(HeaderId.BACK_ID),
+                        ) {
+                            SideBarButton(
+                                icon = "arrow-back",
+                                headerColor = sideBarColor,
+                                onClick = onGoBack,
+                                automationId = "btn_navigation_back",
+                            )
+                        }
+                    }
+                    else -> {
+                        val coreModifier = Modifier
+                            .layoutId(HeaderId.BACK_ID)
+                            .then(animationOpacityModifier)
+                            .clip(CircleShape)
+                            .noFeedbackClickable(onClick = onGoBack)
+                            .setAutomationId("btn_navigation_back")
+                        inputSearchProps?.customBackIcon?.invoke(coreModifier) ?: Box(
+                            modifier = coreModifier
+                                .size(28.dp)
+                                .border(
+                                    width = 0.2.dp,
+                                    color = headerColor.borderColor,
+                                    shape = CircleShape,
+                                )
+                                .background(color = headerColor.backgroundButton)
+                                .padding(Spacing.XS),
+                        ) {
+                            Icon(
+                                source = "arrow-back",
+                                color = headerColor.tintIconColor,
+                                size = 20.dp,
+                            )
+                        }
+                    }
                 }
             }
 
@@ -376,6 +441,8 @@ private fun LiteScreenLayout(
 }
 
 private class LiteScreenLayoutPolicy(
+    private val screenLayout: ScreenLayout,
+    private val applySafeAreaPadding: Boolean,
     private val useAnimationSearch: Boolean,
     private val isHeaderNone: Boolean,
     private val isHeaderExtend: Boolean,
@@ -409,10 +476,13 @@ private class LiteScreenLayoutPolicy(
 
         val contentMeasurable = measurables.find { it.layoutId == HeaderId.CONTENT_ID }
 
+        val insetLeft = if (applySafeAreaPadding) screenLayout.insetLeft.roundToPx() else 0
+        val insetRight = if (applySafeAreaPadding) screenLayout.insetRight.roundToPx() else 0
+        val safeWidth = (constraints.maxWidth - insetLeft - insetRight).coerceAtLeast(0)
         val realConstraints = constraints.copy(
             minWidth = 0,
             minHeight = 0,
-            maxWidth = (constraints.maxWidth - spacing12 * 2)
+            maxWidth = (safeWidth - spacing12 * 2)
                 .coerceAtLeast(0),
         )
         val backIconPlaceable =
@@ -423,9 +493,10 @@ private class LiteScreenLayoutPolicy(
                     maxWidth = realConstraints.maxWidth / 2,
                 )
             )
+        val headerBackWidth = if (screenLayout.sideBar == null) backIconPlaceable.safeWidth else 0
         val baseInputSearchConstraints = if (isHeaderExtend) {
             val minWidth =
-                if (useAnimationSearch) realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
+                if (useAnimationSearch) realConstraints.maxWidth - headerBackWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
                 else realConstraints.maxWidth
             realConstraints.copy(
                 maxWidth = (realConstraints.maxWidth * (1 - scrollPercent)).toInt()
@@ -433,7 +504,7 @@ private class LiteScreenLayoutPolicy(
             )
         } else {
             var spaceConsumed = 0
-            if (backIconPlaceable.safeWidth != 0) spaceConsumed += backIconPlaceable.safeWidth + spaceBetween
+            if (headerBackWidth != 0) spaceConsumed += headerBackWidth + spaceBetween
             if (headerRightPlaceable.safeWidth != 0) spaceConsumed += headerRightPlaceable.safeWidth + spaceBetween
             realConstraints.copy(
                 maxWidth = realConstraints.maxWidth - spaceConsumed
@@ -444,7 +515,7 @@ private class LiteScreenLayoutPolicy(
             ?.measure(inputSearchConstraints)
         val titlePlaceable = measurables.find { it.layoutId == HeaderId.TITLE_ID }?.measure(
             constraints = realConstraints.copy(
-                maxWidth = realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
+                maxWidth = realConstraints.maxWidth - headerBackWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
             )
         )
 
@@ -466,6 +537,7 @@ private class LiteScreenLayoutPolicy(
 
         val layoutWidth = constraints.maxWidth
         val layoutHeight = constraints.maxHeight
+        val backgroundInsetLeft = if (!applySafeAreaPadding && screenLayout.sideBar != null) screenLayout.insetLeft.roundToPx() else 0
         val contentHeight = (layoutHeight - headerHeight).coerceAtLeast(0)
         val contentPlaceable = contentMeasurable?.measure(
             constraints.copy(
@@ -502,7 +574,7 @@ private class LiteScreenLayoutPolicy(
         ) {
             val progress = animationOption?.progress?.value ?: 1f
 
-            val startX = spacing12
+            val startX = insetLeft + spacing12
             val startY = headerY + statusBarPx
             var curX = startX
             var curY = startY
@@ -517,27 +589,38 @@ private class LiteScreenLayoutPolicy(
             )
 
             backgroundPlaceable?.place(
-                x = 0,
+                x = -backgroundInsetLeft,
                 y = headerY,
             )
 
             if (backIconPlaceable != null) {
-                backIconPlaceable.place(
-                    x = startX,
-                    y = startY + backIconPlaceable.verticalCenterOffset(headerRowDefault),
-                )
-                curX += backIconPlaceable.safeWidth + spaceBetween
+                val sideBar = screenLayout.sideBar
+                if (sideBar == null) {
+                    backIconPlaceable.place(
+                        x = startX,
+                        y = startY + backIconPlaceable.verticalCenterOffset(headerRowDefault),
+                    )
+                    curX += backIconPlaceable.safeWidth + spaceBetween
+                } else {
+                    val x = when (sideBar.edge) {
+                        SideBarEdge.LEFT -> insetLeft - screenLayout.insetLeft.roundToPx() + sideBar.width.roundToPx() - spacing12 - backIconPlaceable.width
+                        SideBarEdge.RIGHT -> layoutWidth + (if (applySafeAreaPadding) 0 else screenLayout.insetRight.roundToPx()) - sideBar.width.roundToPx() + spacing12
+                    }
+                    backIconPlaceable.place(
+                        x = x,
+                        y = sideBar.top.roundToPx() + (DuoMetrics.controlSize.roundToPx() - backIconPlaceable.height) / 2,
+                    )
+                }
             }
-
             headerRightPlaceable?.place(
-                x = layoutWidth - spacing12 - headerRightPlaceable.safeWidth,
+                x = layoutWidth - insetRight - spacing12 - headerRightPlaceable.safeWidth,
                 y = startY + headerRightPlaceable.verticalCenterOffset(headerRowDefault),
             )
 
             val titleOffset = IntOffset(
                 x = if (titlePosition == TitlePosition.LEFT) curX
-                else titlePlaceable.horizontalCenterOffset(
-                    space = layoutWidth,
+                else insetLeft + titlePlaceable.horizontalCenterOffset(
+                    space = safeWidth - spacing12 * 2,
                     layoutDirection = layoutDirection,
                 ),
                 y = startY + titlePlaceable.verticalCenterOffset(headerRowDefault),
@@ -545,7 +628,7 @@ private class LiteScreenLayoutPolicy(
 
             titlePlaceable?.place(titleOffset)
 
-            if (backIconPlaceable != null || headerRightPlaceable != null || titlePlaceable != null) {
+            if ((backIconPlaceable != null && screenLayout.sideBar == null) || headerRightPlaceable != null || titlePlaceable != null) {
                 curY += headerRowDefault
             }
 
@@ -555,7 +638,7 @@ private class LiteScreenLayoutPolicy(
                     startY + inputSearchPlaceable.verticalCenterOffset(headerRowDefault)
                 )
                 IntOffset(
-                    x = startX + ((backIconPlaceable.safeWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
+                    x = startX + ((headerBackWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
                         0f, 1f
                     )).toInt(),
                     y = y,

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

@@ -17,31 +17,30 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 
+private val badgePrimaryColors = listOf(
+    Color(0xFFF0F0F0),
+    Color(0xFFEB2F96),
+    Color(0xFF962AF0),
+    Color(0xFF4E4BFF),
+    Color(0xFF007AFF),
+    Color(0xFF13C2C2),
+    Color(0xFF34C759),
+    Color(0xFFA0D911),
+    Color(0xFFFFCC00),
+    Color(0xFFFA8C16),
+    Color(0xFFFA541C),
+    Color(0xFFF5222D)
+)
+
+private val badgeNumberRegex = "^\\d+$".toRegex()
 
 @Composable
 fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier = Modifier) {
-    val primaryColors = listOf(
-        Color(0xFFF0F0F0),
-        Color(0xFFEB2F96),
-        Color(0xFF962AF0),
-        Color(0xFF4E4BFF),
-        Color(0xFF007AFF),
-        Color(0xFF13C2C2),
-        Color(0xFF34C759),
-        Color(0xFFA0D911),
-        Color(0xFFFFCC00),
-        Color(0xFFFA8C16),
-        Color(0xFFFA541C),
-        Color(0xFFF5222D)
-    )
-
-    fun isNumber(label: String): Boolean {
-        val numberRegex = "^\\d+$".toRegex()
-        return numberRegex.matches(label)
-    }
+    fun isNumber(label: String): Boolean = badgeNumberRegex.matches(label)
 
     fun formatTitle(label: String): String {
-        if (isNumber(label) && label.toInt() > 99) {
+        // Digits too long for Int are well over 99; toInt() would throw.
+        if (isNumber(label) && (label.toIntOrNull() ?: Int.MAX_VALUE) > 99) {
             return "99+"
         }
         return label
@@ -54,7 +53,7 @@ fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Mod
             AppTheme.current.colors.warning.primary
         }
 
-    if (backgroundColor != null && primaryColors.contains(backgroundColor)) {
+    if (backgroundColor != null && badgePrimaryColors.contains(backgroundColor)) {
         badgeColor = backgroundColor
     }
     val scaleSize = scaleSize(16f)

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

@@ -146,7 +146,8 @@ fun RenderIcon(
 ) {
     val iconSize = remember(size) { getIconSize(size) }
     val margin = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) textColor else Color.Unspecified
+    // null = untinted; Color.Unspecified would tint with a transparent color and hide the icon.
+    val color = if (useTintColor) textColor else null
 
     val modifier = Modifier.padding(
         start = if (isIconLeft) 0.dp else margin,

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

@@ -43,6 +43,8 @@ fun Carousel(
     val pagerState = rememberPagerState(initialPage = startPage) { virtualPageCount }
 
     val realIndex: (Int) -> Int = { page -> page % itemCount }
+    val currentOnSnapToItem by rememberUpdatedState(onSnapToItem)
+    val currentOnScrollIndexChanged by rememberUpdatedState(onScrollIndexChanged)
 
     var isUserScrolling by remember { mutableStateOf(false) }
 
@@ -70,8 +72,8 @@ fun Carousel(
     LaunchedEffect(pagerState) {
         snapshotFlow { pagerState.currentPage }.collect { page ->
             val real = realIndex(page)
-            onSnapToItem(real)
-            onScrollIndexChanged(real)
+            currentOnSnapToItem(real)
+            currentOnScrollIndexChanged(real)
         }
     }
 

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

@@ -77,7 +77,7 @@ fun Chip(
         horizontalArrangement = Arrangement.spacedBy(iconSpacing.dp)
     ) {
         if (iconLeft != null) {
-            Icon(source = iconLeft, size = dims.iconSize.dp, color = leftTint)
+            Icon(source = iconLeft, size = iconSize.dp, color = leftTint)
         }
 
         if (!label.isNullOrEmpty()) {

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

@@ -41,7 +41,7 @@ fun Icon(
         }
     }
 
-    val iconColor = remember(color) {
+    val iconColor = remember(source, color) {
         if (noThemeIcons.contains(source)) null else color
     }
 

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

@@ -90,7 +90,7 @@ fun Information(
             width = 0.5.dp,
             shape = RoundedCornerShape(Radius.S),
             color = borderColor
-        ).background(color = backgroundColor)
+        ).background(color = backgroundColor, shape = RoundedCornerShape(Radius.S))
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }

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

@@ -16,6 +16,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextStyle
@@ -214,7 +215,7 @@ fun Input(
 
     // Memoized color calculations
     val theme = AppTheme.current
-    val colors = remember(disabled, theme) {
+    val colors = remember(disabled, theme, iconColor) {
         if (disabled) {
             val disabledColor = theme.colors.text.disable
             Triple(disabledColor, disabledColor, disabledColor)
@@ -241,8 +242,9 @@ fun Input(
     val lineHeight = 24.sp
     val scaleFontSize = scaleSize(fontSize)
     val scaleLineHeight = scaleSize(lineHeight)
+    val scaledHeight = scaleSize(size.values.height)
 
-    val textStyle = remember(textColor, fontWeight) {
+    val textStyle = remember(textColor, fontWeight, scaleFontSize, scaleLineHeight) {
         TextStyle(
             color = textColor,
             fontSize = scaleFontSize,
@@ -268,7 +270,7 @@ fun Input(
 
     val passwordFontFamily = getFontFamily(AppTheme.current.font, FontWeight.Normal)
     val passwordFontSize = scaleSize(24.sp)
-    val visualTransformation = remember(secureTextEntry, inputState.passHidden, passwordFontFamily) {
+    val visualTransformation = remember(secureTextEntry, inputState.passHidden, passwordFontFamily, passwordFontSize) {
         if (secureTextEntry && !inputState.passHidden)
             PasswordVisualTransformation(fontFamily = passwordFontFamily, fontSize = passwordFontSize)
         else
@@ -287,8 +289,9 @@ fun Input(
             textStyle = textStyle,
             visualTransformation = visualTransformation,
             keyboardOptions = keyboardOptionsConfig,
+            cursorBrush = SolidColor(theme.colors.primary),
             modifier = inputModifier
-                .height(scaleSize(size.values.height.value).dp)
+                .height(scaledHeight)
                 .onFocusChanged { focusState ->
                     val wasFocused = inputState.isFocused
                     inputState = inputState.copy(
@@ -313,7 +316,7 @@ fun Input(
                     floatingIcon = floatingIcon,
                     titleColor = floatingTitleColor,
                     iconColor = floatingIconTintColor,
-                    offsetY = -size.values.height / 2,
+                    offsetY = -scaledHeight / 2,
                     required = required,
                 )
 
@@ -359,7 +362,7 @@ fun Input(
                         }
 
                         // Clear button
-                        if (inputState.isFocused && text.value.isNotEmpty()) {
+                        if (!readOnly && inputState.isFocused && text.value.isNotEmpty()) {
                             Row(Modifier.padding(horizontal = Spacing.XS)) {
                                 Icon(
                                     source = "24_navigation_close_circle_full",

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

@@ -27,6 +27,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
@@ -43,7 +44,9 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFontFamily
+import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
 
 private const val MONEY_CURRENCY = "đ"
 
@@ -134,7 +137,6 @@ fun InputMoney(
     val current = if (digitsOf(field.text) == digits) field else moneyDisplay(digits).let {
         TextFieldValue(it, TextRange(caretFromDigitIndex(it, digits.length)))
     }
-    var isBlurred = false
     val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
         getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
 
@@ -153,19 +155,16 @@ fun InputMoney(
             value = current,
             textStyle = TextStyle(
                 color = textColor,
-                fontSize = 20.sp,
-                lineHeight = 24.sp,
+                fontSize = scaleSize(20.sp),
+                lineHeight = scaleSize(24.sp),
                 fontWeight = fontWeight.value,
                 fontFamily = getFontFamily(AppTheme.current.font, fontWeight.value)
             ),
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
+            cursorBrush = SolidColor(AppTheme.current.colors.primary),
             modifier = Modifier.height(size.values.height).onFocusChanged {
+                if (it.isFocused) onFocus() else if (isFocused) onBlur()
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    onFocus()
-                }
-                if (!it.isFocused && isBlurred) onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
             },
             onValueChange = { value ->
                 if (value.text == current.text) {
@@ -223,7 +222,7 @@ fun InputMoney(
                                 color = leadingIconColor
                             )
                         }
-                        Box(Modifier.weight(9f).padding(start = 0.dp)) {
+                        Box(Modifier.weight(9f), contentAlignment = Alignment.CenterStart) {
                             if (text.value.isEmpty()) {
                                 Text(
                                     text = placeholder,
@@ -234,9 +233,9 @@ fun InputMoney(
                                     ),
                                     color = placeholderColor
                                 )
-                            } else {
-                                innerTextField()
                             }
+                            // Composed even when empty so the caret shows over the placeholder.
+                            innerTextField()
                         }
                         if (isFocused && text.value.isNotEmpty()) {
                             Row {
@@ -252,7 +251,7 @@ fun InputMoney(
                                         },
                                         interactionSource = remember { MutableInteractionSource() },
                                         indication = null
-                                    )
+                                    ).setAutomationId("ic_clear")
                                 )
                             }
                         }