@momo-kits/native-kits 0.156.10-debug → 0.156.11-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.156.10-debug"
+        version = "0.156.11-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.156.1-beta.2'
+    spec.version                  = '0.156.6-beta.16'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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

@@ -10,11 +10,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
-import androidx.compose.ui.graphics.Paint
-import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.Dp

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

@@ -78,6 +78,14 @@ data class MiniAppContext(
     }
 }
 
+@Immutable
+data class ComponentInformation(
+    val componentName: String? = null,
+    val componentId: String? = null,
+    val params: Map<String,Any?>? = null,
+    val action: String? = null
+)
+
 var IsShowBaseLineDebug = false
 
 val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
@@ -92,4 +100,8 @@ val AppLanguage = staticCompositionLocalOf<String?> {
     null
 }
 
+val LocalComponentInformation = staticCompositionLocalOf<ComponentInformation?> {
+    null
+}
+
 internal val ScaleSizeMaxRate  = staticCompositionLocalOf<Float?> { null }

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

@@ -23,7 +23,7 @@ import vn.momo.kits.modifier.conditional
 
 
 @Composable
-fun Badge(label: String = "Label", backgroundColor: Color? = null) {
+fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier? = null) {
     val primaryColors = listOf(
         Color(0xFFF0F0F0),
         Color(0xFFEB2F96),
@@ -63,21 +63,23 @@ fun Badge(label: String = "Label", backgroundColor: Color? = null) {
     }
     val scaleSize = scaleSize(16f)
 
-    Box(
-        modifier = Modifier
-            .height(scaleSize.dp)
-            .widthIn(min = scaleSize.dp)
-            .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
-            .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center
-    ) {
-        Text(
-            text = formatTitle(label),
-            color = Colors.black_01,
-            style = Typography.actionXxsBold
-        )
+    if (modifier != null) {
+        Box(
+            modifier = modifier
+                .height(scaleSize.dp)
+                .widthIn(min = scaleSize.dp)
+                .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
+                .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = formatTitle(label),
+                color = Colors.black_01,
+                style = Typography.actionXxsBold
+            )
+        }
     }
 }

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

@@ -0,0 +1,198 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.unit.dp
+import io.ktor.util.Platform
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.platform.getPlatformName
+import vn.momo.kits.platform.getStatusBarHeight
+
+/**
+ * A debug overlay that draws danger/warning baseline guides on top of the screen.
+ *
+ * Highlights safe-area boundaries, header regions, and bottom navigation zones
+ * using colored solid or dotted lines and semi-transparent red zones.
+ *
+ * @param enabled When `false` the composable renders nothing. Pass `false` when
+ *                your QC automation flag is active to suppress the overlay.
+ */
+@Composable
+fun BaselineView(enabled: Boolean = true) {
+    if (!enabled) return
+
+    val bottomInsetHeight = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
+    val topInset = if (getPlatformName() == "Android") getStatusBarHeight() - 14.dp else getStatusBarHeight()
+    val bottomInset = if (getPlatformName() == "iOS") minOf(bottomInsetHeight, 21.dp) else bottomInsetHeight
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        // Danger zones
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(topInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+        )
+        Box(
+            modifier = Modifier
+                .width(12.dp)
+                .fillMaxHeight()
+                .padding(top = topInset, bottom = bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+        )
+        Box(
+            modifier = Modifier
+                .width(12.dp)
+                .fillMaxHeight()
+                .padding(top = topInset, bottom = bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+                .align(Alignment.TopEnd)
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+                .align(Alignment.BottomCenter)
+        )
+
+        // Danger lines
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset)
+                .fillMaxWidth(),
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 52.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 104.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 64.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 12.dp)
+                .fillMaxHeight(),
+            orientation = BaselineOrientation.Vertical,
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(end = 12.dp)
+                .fillMaxHeight()
+                .align(Alignment.BottomEnd),
+            orientation = BaselineOrientation.Vertical,
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+
+        // Warning lines
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 26.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFFF7A00)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 56.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFFFCC00)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 8.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFFFCC00)
+        )
+
+        // Header background warning lines
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 40.dp, top = topInset)
+                .height(52.dp),
+            color = Color(0xFF00C520),
+            orientation = BaselineOrientation.Vertical
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 48.dp, top = topInset)
+                .height(52.dp),
+            color = Color(0xFF00C520),
+            orientation = BaselineOrientation.Vertical
+        )
+    }
+}
+
+enum class BaselineOrientation { Horizontal, Vertical }
+
+@Composable
+fun BaselineDottedLine(
+    modifier: Modifier = Modifier,
+    color: Color = Color.Red,
+    orientation: BaselineOrientation = BaselineOrientation.Horizontal,
+    isDotted: Boolean = true
+) {
+    Canvas(modifier = modifier) {
+        val pathEffect = if (isDotted) PathEffect.dashPathEffect(floatArrayOf(8f, 8f)) else null
+        drawLine(
+            color = color,
+            start = if (orientation == BaselineOrientation.Horizontal) Offset(
+                0f,
+                size.height / 2
+            ) else Offset(size.width / 2, 0f),
+            end = if (orientation == BaselineOrientation.Horizontal) Offset(
+                size.width,
+                size.height / 2
+            ) else Offset(size.width / 2, size.height),
+            strokeWidth = 1.dp.toPx(),
+            pathEffect = pathEffect,
+            cap = StrokeCap.Round,
+        )
+    }
+}

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

@@ -11,17 +11,14 @@ import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.defaultMinSize
 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.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -127,13 +124,12 @@ fun getTextColor(loading: Boolean, type: ButtonType): Color {
 }
 
 @Composable
-fun RenderTitle(size: Size, title: String = "", type: ButtonType) {
+fun RenderTitle(size: Size, title: String = "", textColor: Color) {
     val style = remember(size) { getStyle(size) }
-    val color = TextColor.current
     Text(
         style = style,
         text = title,
-        color = color,
+        color = textColor,
         overflow = TextOverflow.Ellipsis,
         maxLines = 1
     )
@@ -145,21 +141,20 @@ fun RenderIcon(
     isIconLeft: Boolean,
     useTintColor: Boolean = true,
     icon: String = "",
-    forceLoading: Boolean = false
+    forceLoading: Boolean = false,
+    bgColor: Color? = null,
+    textColor: Color? = null,
 ) {
-    val bgColor = BackgroundColor.current
     val iconSize = remember(size) { getIconSize(size) }
     val margin = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) TextColor.current else Color.Unspecified
-
-    val showLoading = forceLoading
+    val color = if (useTintColor) textColor else Color.Unspecified
 
     val modifier = Modifier.padding(
         start = if (isIconLeft) 0.dp else margin,
         end = if (isIconLeft) margin else 0.dp
     )
 
-    if (showLoading) {
+    if (forceLoading) {
         Box(modifier) {
             LottieAnimation(
                 modifier = Modifier.size(iconSize),
@@ -195,9 +190,9 @@ fun getTypeStyle(
     type: ButtonType,
     color: Color? = AppTheme.current.colors.primary,
     size: Size,
+    bgColor: Color,
 ): Modifier {
     val theme = AppTheme.current
-    val bgColor = BackgroundColor.current
     val radius = remember(size) { size.value.radius }
     val modifier = Modifier.background(bgColor)
 
@@ -304,45 +299,41 @@ fun Button(
                 .clip(RoundedCornerShape(radius))
         }
 
-    CompositionLocalProvider(
-        IsLoading provides loading,
-        BackgroundColor provides getButtonBackgroundColor(loading, type),
-        TextColor provides getTextColor(loading, type)
+    val bgColor = getButtonBackgroundColor(loading, type)
+    val textColor = getTextColor(loading, type)
+
+    Row(
+        modifier = clickableModifier
+            .padding(horizontal = animatedPadding)
+            .clip(RoundedCornerShape(radius))
+            .then(getTypeStyle(type, size = size, bgColor = bgColor))
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(horizontal = sizeSpecs.padding)
+            .height(sizeSpecs.height),
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically,
     ) {
-        Row(
-            modifier = clickableModifier
-                .padding(horizontal = animatedPadding)
-                .clip(RoundedCornerShape(radius))
-                .then(getTypeStyle(type, size = size))
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(horizontal = sizeSpecs.padding)
-                .height(sizeSpecs.height),
-            horizontalArrangement = Arrangement.Center,
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            RenderIcon(
-                size = size,
-                isIconLeft = true,
-                useTintColor = useTintColor,
-                icon = iconLeft,
-                forceLoading = loading && loadingOnLeft
-            )
-            RenderTitle(size, title, type = type)
-            RenderIcon(
-                size = size,
-                isIconLeft = false,
-                useTintColor = useTintColor,
-                icon = iconRight,
-                forceLoading = loading && !loadingOnLeft
-            )
-        }
+        RenderIcon(
+            size = size,
+            isIconLeft = true,
+            useTintColor = useTintColor,
+            icon = iconLeft,
+            forceLoading = loading && loadingOnLeft,
+            bgColor = bgColor,
+            textColor = textColor
+        )
+        RenderTitle(size, title, textColor = textColor)
+        RenderIcon(
+            size = size,
+            isIconLeft = false,
+            useTintColor = useTintColor,
+            icon = iconRight,
+            forceLoading = loading && !loadingOnLeft,
+            bgColor = bgColor,
+            textColor = textColor
+        )
     }
 }
 
-
-private val IsLoading = staticCompositionLocalOf<Boolean> { false }
-private val BackgroundColor = staticCompositionLocalOf<Color> { Color.Transparent }
-private val TextColor = staticCompositionLocalOf<Color> { Color.Transparent }
-

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

@@ -43,11 +43,11 @@ import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
+import vn.momo.kits.application.IsShowBaseLineDebug
 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.const.Colors
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.getFont
 import vn.momo.kits.const.scaleSize
@@ -141,7 +141,7 @@ fun getBorderColor(isFocused: Boolean, error: String, disabled: Boolean): Color
 }
 
 @Composable
-fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () -> Unit) {
+fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () -> Unit, modifier: Modifier = Modifier) {
     if (loading) {
         Box {
             CircularProgressIndicator(
@@ -157,7 +157,7 @@ fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () ->
             source = icon,
             color = color,
             size = 24.dp,
-            modifier = Modifier.clickable(
+            modifier = modifier.clickable(
                 onClick = onClick,
                 interactionSource = remember { MutableInteractionSource() },
                 indication = null
@@ -224,6 +224,7 @@ fun Input(
     fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     keyboardType: KeyboardType = KeyboardType.Text,
     modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
 ) {
     // Consolidated state management
     var inputState by remember { mutableStateOf(InputState()) }
@@ -253,10 +254,6 @@ fun Input(
         if (disabled) theme.colors.text.disable else floatingIconColor
     }
 
-    val testId = remember(disabled, floatingValue) {
-        if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
-    }
-
     val fontSize = 14.sp
     val lineHeight = 24.sp
     val scaleFontSize = scaleSize(fontSize)
@@ -298,8 +295,7 @@ fun Input(
     Column(modifier = modifier
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
-        }
-        .setAutomationId(testId)) {
+        }) {
         BasicTextField(
             enabled = !disabled,
             readOnly = readOnly,
@@ -308,7 +304,7 @@ fun Input(
             textStyle = textStyle,
             visualTransformation = visualTransformation,
             keyboardOptions = keyboardOptionsConfig,
-            modifier = Modifier
+            modifier = inputModifier
                 .height(scaleSize(size.values.height.value, 1.1f).dp)
                 .onFocusChanged { focusState ->
                     val wasFocused = inputState.isFocused
@@ -417,7 +413,7 @@ fun Input(
                                         },
                                         interactionSource = remember { MutableInteractionSource() },
                                         indication = null
-                                    )
+                                    ).setAutomationId("ic_clear")
                                 )
                             }
                         }
@@ -430,7 +426,12 @@ fun Input(
                                     onRightIconPressed()
                                     inputState = inputState.copy(passHidden = !inputState.passHidden)
                                 }
-                                RenderRightIcon(loading, iconName, iconTintColor, togglePassword)
+                                RenderRightIcon(
+                                    loading = loading,
+                                    icon = iconName,
+                                    color = iconTintColor,
+                                    onClick = togglePassword,
+                                    modifier = Modifier.setAutomationId("ic_show_hide"))
                             }
                             else -> {
                                 RenderRightIcon(loading, icon, iconTintColor, onRightIconPressed)

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

@@ -31,11 +31,11 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
 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.const.Typography
 import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
@@ -98,6 +98,7 @@ fun InputPhoneNumber(
     onBlur: () -> Unit = {},
     loading: Boolean = false,
     modifier: Modifier = Modifier,
+    inputModifier: Modifier = Modifier,
 ) {
     // Consolidated state management
     var inputState by remember { mutableStateOf(InputState()) }
@@ -113,23 +114,20 @@ fun InputPhoneNumber(
     }
 
     val (textColor, placeholderColor, iconTintColor) = colors
-
-    val testId = "input_phone_number"
-
     val textStyle = scaleSize(size.values.textStyle.copy(color = textColor))
 
+
     Column(modifier = modifier
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
-        }
-        .setAutomationId(testId)) {
+        }) {
         BasicTextField(
             singleLine = true,
             value = text.value,
             textStyle = textStyle,
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
             cursorBrush = SolidColor(AppTheme.current.colors.primary),
-            modifier = Modifier
+            modifier = inputModifier
                 .height(scaleSize(size.values.height.value, 1.1f).dp)
                 .onFocusChanged { focusState ->
                     val wasFocused = inputState.isFocused
@@ -218,6 +216,7 @@ fun InputPhoneNumber(
                                         indication = null
                                     )
                                         .padding(horizontal = Spacing.S)
+                                        .setAutomationId("ic_clear")
                                 )
                             }
                         }

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

@@ -180,10 +180,6 @@ val darkTheme = Theme(
 
 val AppTheme = staticCompositionLocalOf { defaultTheme }
 
-val AppThemeController = staticCompositionLocalOf<(Theme) -> Unit> {
-    error("No AppTheme controller provided")
-}
-
 val AppStatusBar = staticCompositionLocalOf { 0.dp }
 
 val AppNavigationBar = staticCompositionLocalOf { 0.dp }

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

@@ -30,7 +30,6 @@ 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
@@ -80,7 +79,6 @@ fun NavigationContainer(
         LocalNavigator provides navigator,
         LocalMaxApi provides maxApi,
         AppTheme provides theme.value,
-        AppThemeController provides { theme.value = it },
         AppStatusBar provides statusBarHeight,
         AppNavigationBar provides navigationBarHeight,
         ApplicationContext provides mergedContext,

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

@@ -40,13 +40,15 @@ 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.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
 val floatingButtonWidth = 75.dp
-const val BOTTOM_TAB_BAR_HEIGHT = 56
+const val BOTTOM_TAB_BAR_HEIGHT = 64
 
 @Composable
 fun BottomTabBar(
@@ -142,6 +144,18 @@ fun RowScope.renderTabBarItem(
 
 @Composable
 fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+    fun isNumber(label: String): Boolean {
+        val numberRegex = "^\\d+$".toRegex()
+        return numberRegex.matches(label)
+    }
+    fun formatLabel(label: String): String? {
+        if (isNumber(label) && label.toInt() == 0) {
+            return null
+        }
+        return label
+    }
+    val badgeLabel = item.badgeLabel?.let { formatLabel(it) }
+
     Box(modifier = Modifier
         .fillMaxSize()
         .padding(horizontal = Spacing.XXS)
@@ -156,31 +170,34 @@ fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = Spacing.XXS)
+                .padding(horizontal = Spacing.S, vertical = Spacing.S)
                 .noFeedbackClickable {
                     onClick()
                 },
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Bottom
+            verticalArrangement = Arrangement.Center
         ) {
             Icon(
                 source = item.icon,
-                modifier = Modifier.weight(1f),
+                size = 28.dp,
+                modifier = Modifier.padding(Spacing.XS),
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
             Text(
                 text = item.label,
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
-                style = Typography.labelXsMedium,
+                style = if (selected) Typography.labelXsMedium else Typography.descriptionXsRegular,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )
         }
-        if(item.badgeLabel != null){
-            Box(modifier = Modifier
-                .offset(x = 44.dp, y = (-32).dp)
-            ){
-                Badge(item.badgeLabel)
-            }
+        if (badgeLabel != null) {
+            if (badgeLabel.isEmpty())
+                BadgeDot(
+                    size = DotSize.Small,
+                    modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
+                )
+            else
+                Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
         }
     }
 }
@@ -190,7 +207,7 @@ fun FloatingButton(data: BottomTabFloatingButton) {
     Column(
         modifier = Modifier
             .width(floatingButtonWidth)
-            .padding(horizontal = Spacing.XXS)
+            .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }

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

@@ -35,6 +35,7 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.navigation.LocalHeaderRightWidthPx
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
@@ -119,14 +120,15 @@ fun Header(onBackHandler: (() -> Unit)? = null) {
 }
 
 @Composable
-fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
+private fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
     Box(
         modifier = Modifier
             .size(28.dp)
             .background(backgroundButton, RoundedCornerShape(100))
             .border(width = 0.2.dp, color = borderColor, shape = RoundedCornerShape(100))
             .activeOpacityClickable(onClick = onBackHandler)
-            .padding(Spacing.XS),
+            .padding(Spacing.XS)
+            .setAutomationId("btn_navigation_back"),
         contentAlignment = Alignment.Center
     ) {
         Icon(

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

@@ -10,6 +10,7 @@ import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.setAutomationId
 
 @Composable
 fun HeaderTitle(
@@ -17,7 +18,7 @@ fun HeaderTitle(
     color: Color? = null,
 ) {
     Text(
-        modifier = Modifier.fillMaxWidth().zIndex(1f),
+        modifier = Modifier.fillMaxWidth().zIndex(1f).setAutomationId("title_navigation_header"),
         text = title,
         textAlign = TextAlign.Start,
         style = Typography.actionSBold.copy(

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Tracking.kt

@@ -0,0 +1,15 @@
+package vn.momo.kits.utils
+
+import androidx.compose.runtime.Composable
+import vn.momo.kits.application.LocalComponentInformation
+
+@Composable
+fun getComponentId(
+    componentName: String? = null,
+    accessibilityLabel: String? = null,
+): String {
+    val componentInformation = LocalComponentInformation.current
+    if (accessibilityLabel != null) return accessibilityLabel
+    if (componentInformation?.componentId != null) return componentInformation.componentId
+    return ""
+}

package/compose/src/iosMain/kotlin/vn/momo/kits/platform/Platform.ios.kt

@@ -12,11 +12,8 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
-import androidx.compose.ui.graphics.Paint
-import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.interop.UIKitView
 import androidx.compose.ui.unit.Dp

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.156.10
+version=0.156.11
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Image/Image.swift

@@ -31,7 +31,11 @@ public struct ImageView: View {
             .placeholder {
                 VStack(alignment: .center, content: {
                     if error {
-                        Image(systemName: "photo.badge.exclamationmark").frame(width: 24, height: 24)
+                        Image("media_fail")
+                            .resizable()
+                            .renderingMode(.template)
+                            .foregroundColor(Colors.black08)
+                            .frame(width: 24, height: 24)
                     } else if placeholder != nil {
                         placeholder
                     }

package/ios/Input/Input.swift

@@ -174,7 +174,7 @@ public struct Input: View {
                             onChangeText?("")
                         }) {
                             Icon(source: "24_navigation_close_circle_full", size: 16, color: Colors.black12)
-                                .padding(.leading, Spacing.S)
+                                .padding(.leading, Spacing.S).accessibility(identifier: "ic_clear")
                         }
                     }
                     
@@ -194,7 +194,7 @@ public struct Input: View {
                                     size: 24,
                                     color: rightIconColor
                                 )
-                                .padding(.leading, Spacing.S)
+                                .padding(.leading, Spacing.S).accessibility(identifier: "ic_show_hide")
                             }
                         }
                     } else if !rightIcon.isEmpty {

package/ios/Input/InputPhoneNumber.swift

@@ -21,6 +21,7 @@ public struct InputPhoneNumber: View {
     public var onFocus: (() -> Void)?
     public var onBlur: (() -> Void)?
     public var onRightIconPressed: (() -> Void)?
+    public var accessibilityLabel: String?
     
     @State private var isFocused: Bool = false
     
@@ -38,7 +39,8 @@ public struct InputPhoneNumber: View {
         onChangeText: ((String) -> Void)? = nil,
         onFocus: (() -> Void)? = nil,
         onBlur: (() -> Void)? = nil,
-        onRightIconPressed: (() -> Void)? = nil
+        onRightIconPressed: (() -> Void)? = nil,
+        accessibilityLabel: String? = nil
     ) {
         self._text = text
         self.placeholder = placeholder
@@ -53,6 +55,7 @@ public struct InputPhoneNumber: View {
         self.onFocus = onFocus
         self.onBlur = onBlur
         self.onRightIconPressed = onRightIconPressed
+        self.accessibilityLabel = accessibilityLabel
     }
     
     // MARK: - Body
@@ -86,7 +89,7 @@ public struct InputPhoneNumber: View {
                         MomoText(placeholder, typography: size == .small ? .headerSSemibold : .headerMBold, color: Colors.black12)
                     }
                     
-                    TextField("", text: textBinding, onEditingChanged: { focused in
+                    TextField(placeholder, text: textBinding, onEditingChanged: { focused in
                         handleFocusChange(focused)
                     })
                     .keyboardType(.numberPad)
@@ -94,6 +97,7 @@ public struct InputPhoneNumber: View {
                     .foregroundColor(Colors.black17)
                     .applyPrimaryCursorColor()
                     .lineLimit(1)
+                    .accessibility(identifier: accessibilityLabel ?? "")
                 }
                 
                 // Clear button
@@ -103,7 +107,7 @@ public struct InputPhoneNumber: View {
                         onChangeText?("")
                     }) {
                         Icon(source: "24_navigation_close_circle_full", size: 16, color: Colors.black12)
-                            .padding(.leading, Spacing.S)
+                            .padding(.leading, Spacing.S).accessibility(identifier: "ic_clear")
                     }
                 }
                 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.156.10-debug",
+  "version": "0.156.11-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},