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

package/CLAUDE.md

@@ -35,6 +35,13 @@ No unit-test suite is configured. Validate changes by compiling the relevant tar
 ./gradlew :sample:androidApp:installDebug                 # run demo on device/emulator
 ```
 
+The SwiftUI kit (`ios/`, pod `MoMoUIKits`) compiles on its own through the sample's Pods project (`pod install` in `sample/iosApp` first when files are added):
+
+```bash
+xcodebuild -project sample/iosApp/Pods/Pods.xcodeproj -scheme MoMoUIKits -sdk iphonesimulator \
+  -destination 'generic/platform=iOS Simulator' build
+```
+
 Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do not publish manually unless asked: `sh publish.sh beta` / `sh publish.sh release` (Maven→GitLab + NPM).
 
 ## Architecture essentials
@@ -47,6 +54,31 @@ Publishing is automated (`publish.sh` + GitLab CI on `[ci build]` / `main`). Do
 - Navigation uses a runtime `DynamicScreenRegistry`; overlays (modal/bottom-sheet/snackbar) go through `Navigator` + `OverplayComponentRegistry`.
 - **iOS swipe-back:** the host owns the only edge-pan recogniser and replays it through `HostBackGestureBridge` (`navigation/HostBackGestureBridge.kt`; the kit framework is never exported, so the host reaches it through its own Koin-provided facade): `checkCanPop` / `canPopInner` / `pop` route the back into the kit stack, `started` / `progressed` / `completed` / `cancelled` seek the NavHost transition, `shouldUseFloatingArrowBack` is set by bottom tabs. `NavigationContainer` attaches itself automatically (`AttachHostBackGesture`, iOS only, detached by identity on dispose) — hosts need no wrapper and no `setNavigator`. `maxApi` is a required parameter of `NavigationContainer` — every container, nested or root, is handed its host bridge explicitly.
 
+## SwiftUI kit (`ios/`)
+
+- **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`.
+
+## Screen layout / iPhone Duo (port of RN `useScreenLayout`, momo-kits !664)
+
+- `layout/ScreenLayout.kt`: `getScreenLayout()` returns window size, raw top/bottom + side insets, `contentWidth`, header geometry, the iPhone Duo `sideBar` and `duoTopInset`. `NavigationContainer` computes it once and provides `LocalScreenLayout`; reactive to fold/unfold and rotation (window size + `WindowInsets`). Metrics (`DuoMetrics`, 72pt iPhone header floor, 20pt status-bar threshold) mirror RN `Layout/utils.ts` — change both together.
+- iPhone-only: everything gates on `isPhoneIdiom()` (`platform/`), never on "iOS", so iPad windows keep the regular layout. Two detectors, as in RN: `isIPhoneDuo` (window aspect < 1.6 or asymmetric side insets) drives layout; `isIPhoneDuoDevice` (short side of screen or window > 440, RN `device.ts`) drives popups, modal and bottom sheet.
+- Header height is `headerHeight` (not `AppStatusBar + HEADER_HEIGHT`); the bar row is `headerBarHeight` and starts `headerStatusBarHeight` below the window top. When the status bar is off the top edge (iPhone landscape, iPhone Duo) `headerStatusBarHeight` is 0 so the title stays centered — except on the Duo outer display in portrait, where the header is 76pt and the row starts at 14pt so the title centers on the camera punchout.
+- iPhone Duo with a side strip ≥ 60pt: back + toolkit leave the bar for `HeaderSideBar` (`navigation/component/SideBar.kt`, 48pt glass controls); custom header-right stays in the bar. `sideBar.top` is 170pt in portrait, 120pt on the inner display in landscape (height ≥ 600), 24pt on the outer display in landscape, or below the header when the status bar is on top; UIKit's `statusBarFrame` is useless on Duo. Unlike RN the column is clamped above footer (24pt gap) / rail (12pt gap).
+- Reserved regions (iOS 27.1 `reservedRegionsOfKind:`, reached through the ObjC runtime so older SDKs still build): a probe `UIView` (`platform/ReservedRegions.ios.kt` on the Compose root view; `ReservedRegionsProbe` inside SwiftUI `momoScreenLayout()`) re-reads them in `layoutSubviews`, which UIKit re-runs when they change. They push `sideBar.top` below the status cluster as it grows for calls / Live Activities, and `sideBar.bottom` (≥ 24pt) above a camera at the bottom end of the strip.
+- Tab bar on Duo is `bottomtab/DuoTabBar.kt`: a rail in the side strip (`sideBar.bottom` above the window bottom, QR below it) or, without a side bar, a floating bar spanning 6/8 grid columns. Both overlay the content; `duoFloatingTabBarInset` pads tab content, footer and FAB.
+- Bar compression (`bottomtab/DuoBarCompression.kt`, HIG "Vertical controls"): when toolbar + rail don't fit in the strip, one is compressed — the toolkit into a `navigation_menu` button, the rail into one button showing the current tab — and tapping it swaps them; `BottomTab(compressionBehavior)` picks which starts compressed. If neither fits beside the other compressed, both rest compressed and a tap opens one for a moment. Side bar columns report their full height so the decision follows each screen's toolkit.
+- Glass header: on Duo with a side bar, Default/Extended headers without search and with a `ScrollState` let content scroll under the bar (`usesDuoGlassHeader`); the bar fades in a translucent surface + hairline over 16pt (Compose has no backdrop blur — RN's fallback look), the gradient leaves with the content.
+- Quick return header: glass headers and Animated headers (with a `ScrollState`) on the Duo side bar layout slide out with the content and back in on a reverse scroll; a half-shown header settles in or out once the scroll stops. The side bar is drawn apart from the header, so it stays put.
+- Overlays on Duo: popups cap at 440pt wide and the room between `duoTopInset` and the bottom inset (body scrolls, actions stay); modal centers inside that room; bottom sheet uses the window height, centers at width ≥ 600 and pads by side insets in landscape.
+- Font scale deliberately uses the short side (`min(w, h)`), unlike RN which reads the window width — landscape must not inflate every font.
+- `StackScreen` pads content/footer/search/FAB by the side insets and provides an inset-consumed layout to its content; a bottom-tab root stays full width (tab bar + each tab's StackScreen handle insets). Grid columns use `contentWidth`.
+
 ## i18n / Localize (port of RN `Localize`)
 
 - `application/Localize.kt`: everything i18n. `LocalizationObject` is a data class with required `vi` / `en` maps (`LocalizationObject(vi = mapOf(…), en = mapOf(…))`). `Localize` constructors take a `LocalizationObject` or a `(vi, en)` map pair; the constructor **merges** the kit defaults with the host data (host wins on key clash). Methods: `translate(key)` (missing/empty → returns the key), `translateData(map)` / `translateData(vi, en)`, `addTranslations` (existing keys win), `changeLanguage(lang)`. Default language `"vi"`, `"en"` only on exact match; language is snapshot state so a switch recomposes consumers.

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-duo.1-debug"
+        version = "0.167.1-duo.10-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"
@@ -188,3 +188,17 @@ compose {
 //         }
 //     }
 // }
+
+// Xcode 27 rejects pods below iOS 15 (lottie-ios 4.4.3 declares 13.0), and the synthetic Podfile has no post_install hook.
+val syntheticPodsProject = layout.buildDirectory.file("cocoapods/synthetic/ios/Pods/Pods.xcodeproj/project.pbxproj")
+tasks.matching { it.name.startsWith("podInstallSynthetic") }.configureEach {
+    doLast {
+        val pbxproj = syntheticPodsProject.get().asFile
+        if (!pbxproj.exists()) return@doLast
+        val target = Regex("IPHONEOS_DEPLOYMENT_TARGET = ([0-9.]+);")
+        pbxproj.writeText(pbxproj.readText().replace(target) { match ->
+            val major = match.groupValues[1].substringBefore('.').toIntOrNull() ?: 0
+            if (major < 15) "IPHONEOS_DEPLOYMENT_TARGET = 15.0;" else match.value
+        })
+    }
+}

package/compose/build.gradle.kts.backup

@@ -188,3 +188,17 @@ mavenPublishing {
         }
     }
 }
+
+// Xcode 27 rejects pods below iOS 15 (lottie-ios 4.4.3 declares 13.0), and the synthetic Podfile has no post_install hook.
+val syntheticPodsProject = layout.buildDirectory.file("cocoapods/synthetic/ios/Pods/Pods.xcodeproj/project.pbxproj")
+tasks.matching { it.name.startsWith("podInstallSynthetic") }.configureEach {
+    doLast {
+        val pbxproj = syntheticPodsProject.get().asFile
+        if (!pbxproj.exists()) return@doLast
+        val target = Regex("IPHONEOS_DEPLOYMENT_TARGET = ([0-9.]+);")
+        pbxproj.writeText(pbxproj.readText().replace(target) { match ->
+            val major = match.groupValues[1].substringBefore('.').toIntOrNull() ?: 0
+            if (major < 15) "IPHONEOS_DEPLOYMENT_TARGET = 15.0;" else match.value
+        })
+    }
+}

package/compose/compose.podspec

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

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/Platform.android.kt

@@ -36,6 +36,8 @@ import androidx.activity.compose.BackHandler as AndroidBackHandler
 
 actual fun getPlatformName(): String = "Android"
 
+actual fun isPhoneIdiom(): Boolean = false
+
 @Composable
 actual fun getScreenDimensions(): ScreenDimension {
     val config = LocalConfiguration.current

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/ReservedRegions.android.kt

@@ -0,0 +1,6 @@
+package vn.momo.kits.platform
+
+import androidx.compose.runtime.Composable
+
+@Composable
+internal actual fun rememberReservedRegions(): List<ReservedRegion> = emptyList()

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/Divider.kt

@@ -18,7 +18,7 @@ import vn.momo.kits.const.Spacing
 enum class DividerType { DEFAULT, DASH }
 
 @Composable
-fun Divider(useMargin: Boolean = true, type: DividerType = DividerType.DEFAULT) {
+fun Divider(useMargin: Boolean = false, type: DividerType = DividerType.DEFAULT) {
     val color = AppTheme.current.colors.border.default
     val margin = if (useMargin) Spacing.XS else 0.dp
     if (type == DividerType.DASH) {

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")
                                 )
                             }
                         }

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

@@ -101,7 +101,6 @@ fun InputOTP(
 ) {
     val maxLength = length ?: 10
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
 
     val handleChangeText: (String) -> Unit = { text ->
         if (text.length <= maxLength &&
@@ -127,13 +126,9 @@ fun InputOTP(
             onValueChange = handleChangeText,
             singleLine = true,
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = if (dataType == "number") KeyboardType.Number else KeyboardType.Ascii),
-            modifier = modifier.height(56.dp).onFocusChanged {
+            modifier = Modifier.height(56.dp).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
             },
             decorationBox = { innerTextField ->
                 Box {
@@ -207,11 +202,11 @@ fun InputOTP(
                                             style = Typography.headerDefaultBold,
                                             text = value[i].toString()
                                         )
-                                        if (i != value.length - 1 || (isFocused && value.length != MAX_LENGTH)) {
+                                        if (i != value.length - 1 || (isFocused && value.length != maxLength)) {
                                             Spacer(Modifier.width(Spacing.L))
                                         }
                                     }
-                                    if (isFocused && value.length != MAX_LENGTH) OTPCaret()
+                                    if (isFocused && value.length != maxLength) OTPCaret()
                                 }
                             }
                         }

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

@@ -89,7 +89,7 @@ fun InputPhoneNumber(
 
     // Memoized color calculations
     val theme = AppTheme.current
-    val colors = remember( theme) {
+    val colors = remember(theme, iconColor) {
             Triple(
                 theme.colors.text.default,      // textColor
                 theme.colors.text.hint,         // placeholderColor
@@ -173,7 +173,7 @@ fun InputPhoneNumber(
                             Box(
                                 modifier = Modifier.width(1.dp)
                                     .height(size.values.dividerHeight)
-                                    .background(Colors.black_04)
+                                    .background(theme.colors.border.default)
                             )
                         }
 

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

@@ -29,6 +29,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.graphics.takeOrElse
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
@@ -99,7 +100,8 @@ data class InputSearchProps(
     val loading: Boolean = false,
     val fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     val keyboardType: KeyboardType = KeyboardType.Text,
-    val backgroundColor: Color = Colors.black_01,
+    // Unspecified resolves to the theme surface (white in the light theme).
+    val backgroundColor: Color = Color.Unspecified,
     val clearCondition: (() -> Boolean)? = null,
     val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
     val keyboardActions: KeyboardActions = KeyboardActions.Default,
@@ -118,7 +120,6 @@ fun InputSearch(
     ),
 ) {
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
     val disabledColor = AppTheme.current.colors.text.disable
     var textColor = AppTheme.current.colors.text.default
     var placeholderColor = AppTheme.current.colors.text.hint
@@ -134,7 +135,7 @@ fun InputSearch(
 
     val fontFamily = getFontFamily(AppTheme.current.font, inputSearchProps.fontWeight.value)
 
-    val textStyle = remember(textColor, inputSearchProps.fontWeight.value, fontFamily) {
+    val textStyle = remember(textColor, inputSearchProps.fontWeight.value, fontFamily, scaleFontSize) {
         TextStyle(
             color = textColor,
             fontSize = scaleFontSize,
@@ -167,13 +168,13 @@ fun InputSearch(
             textStyle = textStyle,
             keyboardOptions = inputSearchProps.keyboardOptions.copy(keyboardType = inputSearchProps.keyboardType),
             keyboardActions = inputSearchProps.keyboardActions,
+            cursorBrush = SolidColor(AppTheme.current.colors.primary),
+            // Transitions only: onFocusChanged also runs once on attach with isFocused = false.
             modifier = inputSearchProps.modifier.weight(1f).fillMaxHeight().onFocusChanged {
+                val wasFocused = isFocused
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    inputSearchProps.onFocus()
-                }
-                if (!it.isFocused && isBlurred) inputSearchProps.onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
+                if (it.isFocused && !wasFocused) inputSearchProps.onFocus()
+                if (!it.isFocused && wasFocused) inputSearchProps.onBlur()
             },
             onValueChange = inputSearchProps.onChangeText,
             decorationBox = { innerTextField ->
@@ -186,7 +187,7 @@ fun InputSearch(
                             )
                         ).fillMaxHeight()
                             .background(
-                                inputSearchProps.backgroundColor,
+                                inputSearchProps.backgroundColor.takeOrElse { AppTheme.current.colors.background.surface },
                                 RoundedCornerShape(Radius.XL)
                             ),
                         horizontalArrangement = Arrangement.Start,

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

@@ -13,6 +13,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.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.Dp
@@ -56,7 +57,6 @@ fun InputTextArea(
     keyboardType: KeyboardType = KeyboardType.Text,
 ) {
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
     val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
         getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
 
@@ -81,13 +81,13 @@ fun InputTextArea(
                 fontFamily = getFontFamily(AppTheme.current.font, fontWeight.value)
             ),
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
+            cursorBrush = SolidColor(AppTheme.current.colors.primary),
+            // Transitions only: onFocusChanged also runs once on attach with isFocused = false.
             modifier = Modifier.height(scaleHeight).onFocusChanged {
+                val wasFocused = isFocused
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    onFocus()
-                }
-                if (!it.isFocused && isBlurred) onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
+                if (it.isFocused && !wasFocused) onFocus()
+                if (!it.isFocused && wasFocused) onBlur()
             },
             onValueChange = {
                 if (it.length <= maxLength) {