@momo-kits/native-kits 0.89.30 → 0.89.31-beta.22

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

@@ -3,9 +3,12 @@ package vn.momo.kits.platform
 import android.annotation.SuppressLint
 import android.content.res.Resources
 import android.graphics.BlurMaskFilter
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
@@ -34,4 +37,11 @@ actual fun getStatusBarHeight(): Dp {
         "android"
     )
     return if(resourceId > 0) Resources.getSystem().getDimensionPixelSize(resourceId).dp else 0.dp
+}
+
+@Composable
+actual fun getNavigationBarHeight(): Dp {
+    val density = LocalDensity.current
+    val navigationBarHeight = WindowInsets.navigationBars.getBottom(density)
+    return navigationBarHeight.dp
 }

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

@@ -1,10 +1,10 @@
 package vn.momo.kits.application
 
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
@@ -16,7 +16,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -26,9 +25,13 @@ import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
@@ -39,6 +42,8 @@ import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.map
 import vn.momo.kits.components.Icon
 import vn.momo.kits.components.Image
+import vn.momo.kits.components.InputSearch
+import vn.momo.kits.components.InputSearchProps
 import vn.momo.kits.components.Options
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.AppStatusBar
@@ -46,6 +51,7 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.shadow
 import vn.momo.kits.platform.getStatusBarHeight
 import vn.momo.kits.utils.bottomBorder
 
@@ -60,41 +66,88 @@ data class AnimatedHeader(
 )
 
 @Composable
-fun HeaderImage(
+fun HeaderBackground(
     headerType: HeaderType = HeaderType.DEFAULT,
-    headerBackground: String?,
+    useShadow: Boolean? = true,
+    scrollState: Int
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
+    val opacityAni by animateFloatAsState(
+        targetValue = (1 - (scrollState / 200f)).coerceIn(0f, 1f),
+    )
+
     when (headerType) {
         HeaderType.DEFAULT -> {
             val height = statusBarHeight + 52.dp
-            Image(
-                source = headerBackground ?: "",
-                modifier = Modifier.fillMaxWidth().height(height),
-                options = Options(
-                    contentScale = ContentScale.FillWidth
+            Box(
+                modifier = Modifier.fillMaxWidth().height(height)
+                    .bottomBorder(
+                        strokeWidth = 1.dp,
+                        color = AppTheme.current.colors.border.default
+                    )
+            ) {
+                Box(
+                    modifier = Modifier
+                        .height(height)
+                        .fillMaxWidth()
+                        .background(
+                            Brush.linearGradient(
+                                colors = listOf(
+                                    Color(0xFFFDCACE),
+                                    Color(0x00FDCACE)
+                                ),
+                                start = Offset(0f, 0f),
+                                end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
+                            )
+                        )
                 )
-            )
-        }
+                if (AppTheme.current.assets.headerBackground != null) {
+                    Image(
+                        source = AppTheme.current.assets.headerBackground!!,
+                        modifier = Modifier.fillMaxWidth().height(height),
+                        options = Options(
+                            contentScale = ContentScale.FillWidth
+                        )
+                    )
+                }
+            }
 
-        HeaderType.EXTENDED -> {
-            Image(
-                source = headerBackground ?: "",
-                modifier = Modifier.fillMaxWidth(),
-                options = Options(
-                    contentScale = ContentScale.FillWidth
-                )
-            )
         }
 
-        HeaderType.SURFACE -> {
-            val height = statusBarHeight + 52.dp
+        HeaderType.EXTENDED -> {
             Box(
-                modifier = Modifier.fillMaxWidth().height(height)
-                    .background(AppTheme.current.colors.background.surface)
-                    .bottomBorder(
-                        strokeWidth = 2.dp,
-                        color = AppTheme.current.colors.border.default
+                modifier = Modifier.fillMaxWidth().height(154.dp)
+                    .alpha(opacityAni)
+                    .background(
+                        Brush.linearGradient(
+                            colors = listOf(
+                                Color(0xFFFDCACE),
+                                Color(0x00FDCACE)
+                            ),
+                            start = Offset(0f, 0f),
+                            end = Offset(0f, with(LocalDensity.current) { 154.dp.toPx() })
+                        )
+                    )
+            ) {
+                if (AppTheme.current.assets.headerBackground != null) {
+                    Image(
+                        source = AppTheme.current.assets.headerBackground!!,
+                        modifier = Modifier.fillMaxWidth().height(154.dp),
+                        options = Options(
+                            contentScale = ContentScale.FillWidth
+                        )
+                    )
+                }
+            }
+            Box(
+                modifier = Modifier.fillMaxWidth().height(statusBarHeight + 52.dp)
+                    .alpha(1 - opacityAni)
+                    .background(Colors.black_01)
+                    .then(
+                        if (useShadow == true) Modifier.shadow() else Modifier.bottomBorder(
+                            1.dp,
+                            Colors.black_04
+                        )
                     )
             )
         }
@@ -115,25 +168,21 @@ fun Header(
     goBack: (() -> Unit) = { },
     opacity: Float? = null,
     animatedHeader: AnimatedHeader? = null,
-    scrollState: Int = 0
+    useSearchInput: Boolean? = false,
+    scrollState: Int = 0,
+    inputSearchProps: InputSearchProps?
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
-    var tintIconColor = Colors.black_01
-    var backgroundButton = Colors.black_20.copy(alpha = 0.4f)
-    if (headerType == HeaderType.SURFACE) {
-        tintIconColor = AppTheme.current.colors.text.default
-        backgroundButton = Color.Transparent
-    }
+    val tintIconColor = AppTheme.current.colors.text.default
+    val backgroundButton = Colors.black_01.copy(alpha = 0.2f)
 
     var colorFraction by remember { mutableStateOf(0f) }
 
     LaunchedEffect(scrollState) {
-        if (headerType == HeaderType.SURFACE) {
-            snapshotFlow { scrollState }
-                .map { (it / 50f).coerceIn(0f, 1f) }
-                .distinctUntilChanged()
-                .collect { fraction -> colorFraction = fraction }
-        }
+        snapshotFlow { scrollState }
+            .map { (it / 50f).coerceIn(0f, 1f) }
+            .distinctUntilChanged()
+            .collect { fraction -> colorFraction = fraction }
     }
 
     val tintIconColorAnim by animateColorAsState(
@@ -144,6 +193,14 @@ fun Header(
         )
     )
 
+    val backgroundSearch by animateColorAsState(
+        targetValue = animateColor(
+            Colors.black_01,
+            AppTheme.current.colors.background.default,
+            colorFraction
+        )
+    )
+
     if (headerType != HeaderType.NONE) {
         BoxWithConstraints(
             Modifier.height(statusBarHeight + 52.dp)
@@ -164,15 +221,11 @@ fun Header(
                             modifier = Modifier
                                 .size(28.dp)
                                 .then(
-                                    if (headerType == HeaderType.SURFACE) {
-                                        Modifier.border(
-                                            0.5.dp,
-                                            Colors.black_20.copy(alpha = 0.4f),
-                                            RoundedCornerShape(100)
-                                        )
-                                    } else {
-                                        Modifier
-                                    }
+                                    Modifier.border(
+                                        0.5.dp,
+                                        Colors.black_20.copy(alpha = 0.4f),
+                                        RoundedCornerShape(100)
+                                    )
                                 )
                                 .background(
                                     backgroundButton,
@@ -183,23 +236,24 @@ fun Header(
                                 )
                                 .padding(Spacing.XS)
                                 .semantics {
-                                    contentDescription = "btn_navigation_back"; testTag =
-                                    "btn_navigation_back"
+                                    testTag = "btn_navigation_back"
                                 },
                             contentAlignment = Alignment.Center
                         ) {
                             Icon(
                                 source = "ic_back_ios",
-                                color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
+                                color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
                                 size = 20.dp,
                             )
                         }
                     }
                 }
-                Box(Modifier.graphicsLayer {
-                    alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
-                }) {
-                    headerRight?.invoke()
+                if (useSearchInput == false) {
+                    Box(Modifier.graphicsLayer {
+                        alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                    }) {
+                        headerRight?.invoke()
+                    }
                 }
             }
 
@@ -213,23 +267,25 @@ fun Header(
                 if (isBack) {
                     Spacer(Modifier.width(40.dp))
                 }
-                Box(
-                    Modifier.weight(1f).graphicsLayer {
-                        alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
-                    },
-                    contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
-                ) {
-                    HeaderTitle(
-                        title = title,
-                        color = if (headerType == HeaderType.SURFACE && animatedHeader !== null) tintIconColorAnim else tintIconColor,
-                        modifier = Modifier.semantics {
-                            contentDescription = "title_navigation_header"
-                            testTag = "title_navigation_header"
-                        }
-                    )
+                if (useSearchInput == true && inputSearchProps != null) {
+                    InputSearch(inputSearchProps = inputSearchProps.copy(backgroundColor = backgroundSearch))
                 }
-                if (isBack) {
-                    Spacer(Modifier.width(40.dp))
+                else{
+                    Box(
+                        Modifier.weight(1f).graphicsLayer {
+                            alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                        },
+                        contentAlignment = if (titlePosition == TitlePosition.LEFT) Alignment.TopStart else Alignment.Center
+                    ) {
+                        HeaderTitle(
+                            title = title,
+                            color = if (animatedHeader !== null) tintIconColorAnim else tintIconColor,
+                            modifier = Modifier.semantics {
+                                contentDescription = title
+                                testTag = "title_navigation_header"
+                            }
+                        )
+                    }
                 }
             }
         }

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

@@ -1,6 +1,7 @@
 package vn.momo.kits.application
 
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
@@ -24,21 +25,24 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.LayoutCoordinates
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
 import androidx.compose.ui.zIndex
+import vn.momo.kits.components.InputSearchProps
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.shadow
 import vn.momo.kits.platform.getStatusBarHeight
 
 enum class HeaderType {
     DEFAULT,
-    SURFACE,
     EXTENDED,
     NONE
 }
@@ -46,7 +50,6 @@ enum class HeaderType {
 @Composable
 fun Screen(
     backgroundColor: Color? = null,
-    headerBackground: String? = null,
     isBack: Boolean = true,
     headerType: HeaderType = HeaderType.DEFAULT,
     verticalArrangement: Arrangement.Vertical = Arrangement.Top,
@@ -55,12 +58,17 @@ fun Screen(
     titlePosition: TitlePosition = TitlePosition.LEFT,
     goBack: (() -> Unit) = { },
     scrollable: Boolean = true,
+    scrollState: ScrollState = rememberScrollState(),
+    onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
     headerRight: @Composable (() -> Unit)? = null,
     fabProps: FabProps? = null,
     animatedHeader: AnimatedHeader? = null,
     layoutOffset: Dp = 56.dp,
+    useShadow: Boolean? = true,
+    useSearchInput: Boolean? = false,
+    inputSearchProps: InputSearchProps? = null,
     content: @Composable () -> Unit,
 ) {
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
@@ -75,7 +83,6 @@ fun Screen(
 
     val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
     val bottomPadding = min(indicator, 21.dp)
-    val scrollState = rememberScrollState()
 
     val opacity by animateFloatAsState(
         targetValue = ((scrollState.value / 114f)).coerceIn(0f, 1f)
@@ -90,17 +97,17 @@ fun Screen(
     ) {
 
         if (animatedHeader === null) {
-            HeaderImage(
-                headerType,
-                headerBackground ?: AppTheme.current.assets.headerBackground
-            )
+            HeaderBackground(headerType = headerType, scrollState = scrollState.value)
         } else {
             Box(
-                Modifier.zIndex(5f).background(Color.White.copy(alpha = opacity))
-                    .graphicsLayer { alpha = opacity }) {
-                HeaderImage(
-                    headerType,
-                    headerBackground ?: AppTheme.current.assets.headerBackground
+                Modifier.zIndex(5f)
+                    .background(Color.White.copy(alpha = opacity))
+                    .graphicsLayer { alpha = opacity }
+            ) {
+                HeaderBackground(
+                    headerType = headerType,
+                    useShadow = useShadow,
+                    scrollState = scrollState.value
                 )
             }
         }
@@ -114,6 +121,8 @@ fun Screen(
             goBack = goBack,
             opacity = opacity,
             animatedHeader = animatedHeader,
+            useSearchInput = useSearchInput,
+            inputSearchProps = inputSearchProps,
             scrollState = scrollState.value
         )
 
@@ -129,9 +138,13 @@ fun Screen(
         ) {
 
             Column(
-                modifier = if (scrollable) Modifier.weight(1f).padding(bottom = keyboardSize)
-                    .verticalScroll(scrollState) else
-                    Modifier.padding(bottom = keyboardSize),
+                modifier = Modifier
+                    .conditional(scrollable) { weight(1f) }
+                    .padding(bottom = keyboardSize)
+                    .conditional(onContentLayout != null) {
+                        onGloballyPositioned(onContentLayout ?: {})
+                    }
+                    .conditional(scrollable) { verticalScroll(scrollState) },
                 verticalArrangement = verticalArrangement,
                 horizontalAlignment = horizontalAlignment
             ) {
@@ -186,11 +199,8 @@ fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bo
             .background(AppTheme.current.colors.background.surface)
     ) {
         Box(
-            Modifier
-                .fillMaxWidth()
-                .padding(vertical = Spacing.S, horizontal = Spacing.M)
-        )
-        {
+            Modifier.fillMaxWidth().padding(vertical = Spacing.S, horizontal = Spacing.M)
+        ) {
             footer?.invoke()
         }
     }

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

@@ -3,7 +3,6 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
@@ -13,14 +12,15 @@ 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.material.ripple.rememberRipple
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
@@ -221,9 +221,6 @@ fun getTypeStyle(
  * @param iconLeft [String] the icon at the left of title
  * @param title [String] title of button
  * @param loading [Boolean] used when you want to use loading animation
- * @param enabled controls the enabled state of this button. When `false`,
- *     this component will not respond to user input, and it will appear
- *     visually disabled and disabled to accessibility services.
  * @param useTintColor [Boolean] controls color of the icon.
  */
 @Composable
@@ -235,23 +232,23 @@ fun Button(
     iconLeft: String = "",
     title: String = "Button",
     loading: Boolean = false,
-    enabled: Boolean = true,
     useTintColor: Boolean = true,
     isFull: Boolean = true,
     modifier: Modifier = Modifier,
 ) {
+    val testId = "btn_${type.toString().lowercase()}_$title"
     val customModifier = if (isFull) {
         modifier
             .fillMaxWidth()
             .clip(RoundedCornerShape(size.value.radius)).clickable(
-                enabled = enabled,
+                enabled = type != ButtonType.DISABLED,
                 onClick = onClick
             )
 
     } else {
         modifier
             .clip(RoundedCornerShape(size.value.radius)).clickable(
-                enabled = enabled,
+                enabled = type != ButtonType.DISABLED,
                 onClick = onClick
             )
     }
@@ -261,7 +258,10 @@ fun Button(
             .padding(horizontal = size.value.padding)
             .defaultMinSize(
                 minWidth = size.value.width
-            ).height(size.value.height),
+            ).height(size.value.height)
+            .semantics {
+                contentDescription = title; testTag = testId
+            },
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,
     ) {

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

@@ -33,7 +33,6 @@ fun CheckBox(
     var backgroundColor = AppTheme.current.colors.background.surface
     val iconSource = if (indeterminate) "minus" else "ic_checked"
 
-
     if (checked) {
         borderColor = AppTheme.current.colors.primary
         backgroundColor = AppTheme.current.colors.primary

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

@@ -1,17 +1,13 @@
 package vn.momo.kits.components
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 
@@ -25,16 +21,16 @@ fun Icon(
     val icon = if (source.contains("https")) {
         source
     } else {
-        Icons[source]
+        Icons[source] ?: ""
     }
-    Box(modifier.size(size), contentAlignment = Alignment.Center) {
-        AsyncImage(
-            modifier = Modifier.fillMaxSize(),
-            model = icon,
-            contentDescription = null,
+    Image(
+        modifier = modifier.size(size),
+        source = icon,
+        loading = false,
+        options = Options(
             contentScale = ContentScale.Fit,
             colorFilter = color?.let { ColorFilter.tint(it) }
-        )
-    }
+        ),
+    )
 }
 

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

@@ -110,7 +110,7 @@ fun IconButton(
             .then(getIconStyle(type))
             .clip(RoundedCornerShape(size.value.radius))
             .clickable(
-                enabled = type == ButtonType.DISABLED,
+                enabled = type != ButtonType.DISABLED,
                 onClick = onClick
             ),
         contentAlignment = Alignment.Center

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

@@ -15,7 +15,6 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
-import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 
@@ -37,7 +36,6 @@ fun Image(
     options: Options? = null,
     loading: Boolean = true,
 ) {
-    modifier.semantics {contentDescription = "img|$source"; testTag = "img|$source"}
     var imageOptions = Options()
     var imageState by remember { mutableStateOf(ImageState.Loading) }
 
@@ -52,7 +50,7 @@ fun Image(
 
     Box(modifier = modifier) {
         AsyncImage(
-            modifier = modifier,
+            modifier = Modifier.matchParentSize().semantics {contentDescription = "img|$source"; testTag = "img|$source"},
             model = source,
             contentDescription = null,
             contentScale = imageOptions.contentScale,

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

@@ -29,6 +29,9 @@ 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.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
@@ -198,7 +201,11 @@ fun Input(
         iconTintColor = disabledColor
     }
 
-    Column {
+    val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
+
+    Column(modifier = Modifier.semantics {
+        contentDescription = floatingValue; testTag = testId
+    }) {
         BasicTextField(
             enabled = !disabled,
             readOnly = readOnly,

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

@@ -17,10 +17,12 @@ import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -51,7 +53,7 @@ fun InputDropDown(
     loading: Boolean = false,
     required: Boolean = false,
 ) {
-    var isFocused by remember { mutableStateOf(false) }
+    val isFocused by remember { mutableStateOf(false) }
 
     val disabledColor = AppTheme.current.colors.text.disable
     var textColor = AppTheme.current.colors.text.default
@@ -72,8 +74,11 @@ fun InputDropDown(
         iconTintColor = disabledColor
     }
 
+    val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
-    Column(modifier = Modifier.clickable(enabled = !disabled, onClick = onPress)) {
+    Column(modifier = Modifier.clickable(enabled = !disabled, onClick = onPress).semantics {
+        contentDescription = floatingValue; testTag = testId
+    }) {
         Box {
             if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
                 Box(

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

@@ -27,6 +27,9 @@ 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.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
@@ -104,8 +107,11 @@ fun InputMoney(
         iconTintColor = disabledColor
     }
 
+    val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
-    Column {
+    Column(modifier =  Modifier.semantics {
+        contentDescription = floatingValue; testTag = testId
+    }) {
         BasicTextField(
             enabled = !disabled,
             singleLine = true,

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

@@ -1,7 +1,6 @@
 package vn.momo.kits.components
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -33,13 +32,19 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.utils.ifTrue
 
 @Composable
-fun RenderRightIconSearch(loading: Boolean, icon: String, color: Color, onClick: () -> Unit) {
+fun RenderRightIconSearch(
+    loading: Boolean,
+    icon: String,
+    color: Color,
+    onClick: () -> Unit,
+) {
     if (loading) {
         Box(Modifier.padding(horizontal = Spacing.S)) {
             CircularProgressIndicator(
@@ -68,34 +73,41 @@ fun RenderRightIconSearch(loading: Boolean, icon: String, color: Color, onClick:
     }
 }
 
+data class InputSearchProps(
+    val text: MutableState<String>,
+    val buttonText: String = "",
+    val showButtonText: Boolean = false,
+    val placeholder: String = "",
+    val onChangeText: (String) -> Unit = {},
+    val onPressButtonText: () -> Unit = {},
+    val disabled: Boolean = false,
+    val icon: String = "",
+    val iconColor: Color = Color(0xff),
+    val onRightIconPressed: () -> Unit = {},
+    val onFocus: () -> Unit = {},
+    val onBlur: () -> Unit = {},
+    val loading: Boolean = false,
+    val fontWeight: InputFontWeight = InputFontWeight.REGULAR,
+    val keyboardType: KeyboardType = KeyboardType.Text,
+    val backgroundColor: Color = Colors.black_01,
+)
+
 @Composable
 fun InputSearch(
-    text: MutableState<String> = remember { mutableStateOf("") },
-    buttonText: String = "",
-    showButtonText: Boolean = false,
-    showBorder: Boolean = true,
-    placeholder: String = "",
-    onChangeText: (String) -> Unit = {},
-    onPressButtonText: () -> Unit = {},
-    error: String = "",
-    disabled: Boolean = false,
-    icon: String = "",
-    iconColor: Color = AppTheme.current.colors.text.default,
-    onRightIconPressed: () -> Unit = {},
-    onFocus: () -> Unit = {},
-    onBlur: () -> Unit = {},
-    loading: Boolean = false,
-    fontWeight: InputFontWeight = InputFontWeight.REGULAR,
-    keyboardType: KeyboardType = KeyboardType.Text,
+    inputSearchProps: InputSearchProps = InputSearchProps(
+        text = remember { mutableStateOf("") },
+        iconColor = AppTheme.current.colors.text.default
+    ),
+
 ) {
     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
-    var iconTintColor = iconColor
+    var iconTintColor = inputSearchProps.iconColor
 
-    if (disabled) {
+    if (inputSearchProps.disabled) {
         textColor = disabledColor
         placeholderColor = disabledColor
         iconTintColor = disabledColor
@@ -103,37 +115,31 @@ fun InputSearch(
 
     Column {
         BasicTextField(
-            enabled = !disabled,
+            enabled = !inputSearchProps.disabled,
             singleLine = true,
-            value = text.value,
+            value = inputSearchProps.text.value,
             textStyle = TextStyle(
                 color = textColor,
-                fontSize = 15.sp,
-                lineHeight = 24.sp,
-                fontWeight = fontWeight.value
+                fontSize = 14.sp,
+                lineHeight = 20.sp,
+                fontWeight = inputSearchProps.fontWeight.value
             ),
-            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
+            keyboardOptions = KeyboardOptions.Default.copy(keyboardType = inputSearchProps.keyboardType),
             modifier = Modifier.height(36.dp).onFocusChanged {
                 isFocused = it.isFocused
                 if (it.isFocused) {
-                    onFocus()
+                    inputSearchProps.onFocus()
                 }
-                if (!it.isFocused && isBlurred) onBlur()
+                if (!it.isFocused && isBlurred) inputSearchProps.onBlur()
                 if (it.isFocused && !isBlurred) isBlurred = true
             },
-            onValueChange = onChangeText,
+            onValueChange = inputSearchProps.onChangeText,
             decorationBox = { innerTextField ->
-                //input box wrapper
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Row(
-                        modifier = Modifier.weight(showButtonText.ifTrue(8f, 1f))
+                        modifier = Modifier.weight(inputSearchProps.showButtonText.ifTrue(8f, 1f))
                             .background(
-                                AppTheme.current.colors.background.surface,
-                                RoundedCornerShape(Radius.XL)
-                            )
-                            .border(
-                                showBorder.ifTrue(1.dp, 0.dp),
-                                getBorderColor(isFocused, error, disabled),
+                                inputSearchProps.backgroundColor,
                                 RoundedCornerShape(Radius.XL)
                             ),
                         horizontalArrangement = Arrangement.Start,
@@ -154,20 +160,20 @@ fun InputSearch(
                                 color = AppTheme.current.colors.text.hint
                             )
                             Box(Modifier.weight(1f)) {
-                                if (text.value.isEmpty()) {
+                                if (inputSearchProps.text.value.isEmpty()) {
                                     Text(
-                                        text = placeholder,
+                                        text = inputSearchProps.placeholder,
                                         style = TextStyle(
                                             fontSize = 16.sp,
                                             lineHeight = 24.sp,
-                                            fontWeight = fontWeight.value
+                                            fontWeight = inputSearchProps.fontWeight.value
                                         ),
                                         color = placeholderColor
                                     )
                                 }
                                 innerTextField()
                             }
-                            if (isFocused && text.value.isNotEmpty()) {
+                            if (isFocused && inputSearchProps.text.value.isNotEmpty()) {
                                 Row {
                                     Spacer(Modifier.width(Spacing.XS))
                                     Icon(
@@ -175,25 +181,30 @@ fun InputSearch(
                                         size = 16.dp,
                                         color = AppTheme.current.colors.text.hint,
                                         modifier = Modifier.clickable(
-                                            onClick = { text.value = "" },
+                                            onClick = { inputSearchProps.text.value = "" },
                                             interactionSource = remember { MutableInteractionSource() },
                                             indication = null
                                         )
                                     )
                                 }
                             }
-                            RenderRightIconSearch(loading, icon, iconTintColor, onRightIconPressed)
+                            RenderRightIconSearch(
+                                inputSearchProps.loading,
+                                inputSearchProps.icon,
+                                iconTintColor,
+                                inputSearchProps.onRightIconPressed
+                            )
                         }
                     }
-                    if (showButtonText) {
+                    if (inputSearchProps.showButtonText) {
                         Text(
-                            text = buttonText,
+                            text = inputSearchProps.buttonText,
                             style = Typography.actionDefault,
                             color = AppTheme.current.colors.text.default,
                             modifier = Modifier.padding(start = Spacing.L).clickable(
                                 interactionSource = remember { MutableInteractionSource() },
                                 indication = null,
-                                onClick = onPressButtonText
+                                onClick = inputSearchProps.onPressButtonText
                             )
                         )
                     }

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

@@ -97,7 +97,7 @@ fun PopupNotify(
     }
 
     Box(Modifier.semantics {
-        contentDescription = "popup_notify"; testTag = "popup_notify"
+        contentDescription = title; testTag = "popup_notify"
     }, contentAlignment = Alignment.TopEnd) {
         Column(
             modifier = Modifier
@@ -166,7 +166,7 @@ fun PopupNotify(
                 color = AppTheme.current.colors.background.surface,
                 size = 14.dp,
                 modifier = Modifier.semantics {
-                    contentDescription = "ic_popup_close"; testTag = "ic_popup_close"
+                    testTag = "ic_popup_close"
                 }
             )
         }
@@ -235,7 +235,7 @@ fun renderRow(
                     title = it.title,
                     type = ButtonType.TEXT,
                     modifier = Modifier.semantics {
-                        contentDescription = "btn_popup_cancel"; testTag = "btn_popup_cancel"
+                        contentDescription = it.title; testTag = "btn_popup_cancel"
                     }
                 )
             }
@@ -250,7 +250,7 @@ fun renderRow(
                 },
                 title = primary?.title ?: "",
                 modifier = Modifier.semantics {
-                    contentDescription = "btn_popup_allow"; testTag = "btn_popup_allow"
+                    contentDescription = primary?.title ?: ""; testTag = "btn_popup_allow"
                 }
             )
         }
@@ -273,7 +273,7 @@ fun renderColumn(
             },
             title = primary?.title ?: "",
             modifier = Modifier.semantics {
-                contentDescription = "btn_popup_allow"; testTag = "btn_popup_allow"
+                contentDescription = primary?.title ?: ""; testTag = "btn_popup_allow"
             }
         )
         secondary?.let {
@@ -288,7 +288,7 @@ fun renderColumn(
                     title = it.title,
                     type = ButtonType.TEXT,
                     modifier = Modifier.semantics {
-                        contentDescription = "btn_popup_cancel"; testTag = "btn_popup_cancel"
+                        contentDescription = it.title; testTag = "btn_popup_cancel"
                     }
                 )
             }

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

@@ -17,7 +17,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.unit.dp
@@ -30,7 +29,7 @@ fun PromotionPopup(
     source: String = "",
     onClose: (() -> Unit) = {},
 ) {
-    Column(Modifier.semantics { contentDescription = "popup_notify"; testTag = "popup_notify" }) {
+    Column(Modifier.semantics { testTag = "popup_notify" }) {
         if (source.isNotEmpty()) {
             Image(
                 source = source,
@@ -69,7 +68,7 @@ fun PromotionPopup(
                     color = AppTheme.current.colors.background.surface,
                     size = 14.dp,
                     modifier = Modifier.semantics {
-                        contentDescription = "ic_popup_close"; testTag = "ic_popup_close"
+                        testTag = "ic_popup_close"
                     }
                 )
             }

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

@@ -123,7 +123,10 @@ fun TrustBanner(
             modifier = Modifier
                 .width(64.dp)
                 .height(64.dp)
-                .padding(end = 8.dp)
+                .padding(end = 8.dp),
+            options = Options(
+                contentScale = ContentScale.Fit,
+            )
         )
         Column {
             Text(
@@ -141,11 +144,17 @@ fun TrustBanner(
                             .padding(end = 4.dp)
                             .width(52.dp)
                             .height(20.dp)
+                        ,options = Options(
+                            contentScale = ContentScale.Fit,
+                        )
                     )
                     Image(
                         source = trustBanner.sslImage, modifier = Modifier
                             .width(52.dp)
-                            .height(20.dp)
+                            .height(20.dp),
+                        options = Options(
+                            contentScale = ContentScale.Fit,
+                        )
                     )
                 }
                 Row(

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

@@ -106,7 +106,7 @@ val defaultTheme = Theme(
     ),
     font = "SFProText",
     assets = ThemeAssets(
-        headerBackground = "https://static.momocdn.net/app/img/app/img/header-background.png"
+        headerBackground = null
     )
 )
 
@@ -168,6 +168,5 @@ val darkTheme = Theme(
 
 
 val AppTheme = staticCompositionLocalOf { defaultTheme }
-val AppStatusBar = staticCompositionLocalOf<Dp?> {
-   null
-}
+
+val AppStatusBar = staticCompositionLocalOf<Dp?> { null }

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

@@ -27,10 +27,10 @@ fun scaleSize(size: Float): Float {
 
 @OptIn(InternalResourceApi::class)
 @Composable
-fun getFont(font: String, ext: String = "ttf"): FontFamily {
+fun getFont(font: String): FontFamily {
     val fontResource = FontResource(
-        "font:${font}",
-        setOf(ResourceItem(setOf(), "font/${font}.${ext}", -1, -1))
+        "font:${font.substringBeforeLast(".")}",
+        setOf(ResourceItem(setOf(), "font/${font.substringBeforeLast(".")}.${font.substringAfterLast(".")}", -1, -1))
     )
     return FontFamily(Font(fontResource))
 }
@@ -39,27 +39,38 @@ fun getFont(font: String, ext: String = "ttf"): FontFamily {
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
     val key = "$fontFamily-${fontWeight?.weight}"
     val fontMap = mapOf(
-        "SFProText-100" to getFont("sfprotext_thin"),
-        "SFProText-200" to getFont("sfprotext_ultralight"),
-        "SFProText-300" to getFont("sfprotext_light"),
-        "SFProText-400" to getFont("sfprotext_regular"),
-        "SFProText-500" to getFont("sfprotext_medium"),
-        "SFProText-600" to getFont("sfprotext_medium"),
-        "SFProText-700" to getFont("sfprotext_semibold"),
-        "SFProText-800" to getFont("sfprotext_bold"),
-        "SFProText-900" to getFont("sfprotext_heavy"),
+        "SFProText-100" to "sfprotext_thin.ttf",
+        "SFProText-200" to "sfprotext_ultralight.ttf",
+        "SFProText-300" to "sfprotext_light.ttf",
+        "SFProText-400" to "sfprotext_regular.ttf",
+        "SFProText-500" to "sfprotext_medium.ttf",
+        "SFProText-600" to "sfprotext_medium.ttf",
+        "SFProText-700" to "sfprotext_semibold.ttf",
+        "SFProText-800" to "sfprotext_bold.ttf",
+        "SFProText-900" to "sfprotext_heavy.ttf",
 
-        "MoMoSignature-100" to getFont("momosignature", "otf"),
-        "MoMoSignature-200" to getFont("momosignature", "otf"),
-        "MoMoSignature-300" to getFont("momosignature", "otf"),
-        "MoMoSignature-400" to getFont("momosignature", "otf"),
-        "MoMoSignature-500" to getFont("momosignature", "otf"),
-        "MoMoSignature-600" to getFont("momosignature", "otf"),
-        "MoMoSignature-700" to getFont("momosignature", "otf"),
-        "MoMoSignature-800" to getFont("momosignature", "otf"),
-        "MoMoSignature-900" to getFont("momosignature", "otf"),
+        "MoMoSignature-100" to "momosignature.otf",
+        "MoMoSignature-200" to "momosignature.otf",
+        "MoMoSignature-300" to "momosignature.otf",
+        "MoMoSignature-400" to "momosignature.otf",
+        "MoMoSignature-500" to "momosignature.otf",
+        "MoMoSignature-600" to "momosignature.otf",
+        "MoMoSignature-700" to "momosignature.otf",
+        "MoMoSignature-800" to "momosignature.otf",
+        "MoMoSignature-900" to "momosignature.otf",
+
+        "MoMoTrustDisplay-100" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-200" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-300" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-400" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-500" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-600" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-700" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-800" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-900" to "momotrustdisplay.otf",
     )
-    return fontMap[key] ?: getFont("sfprotext_regular")
+    val font = fontMap[key] ?: "sfprotext_regular.ttf"
+    return getFont(font)
 }
 
 @Immutable

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Conditional.kt

@@ -0,0 +1,11 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+
+fun Modifier.conditional(condition : Boolean, modifier : Modifier.() -> Modifier) : Modifier {
+    return if (condition) {
+        then(modifier(Modifier))
+    } else {
+        this
+    }
+}

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

@@ -19,4 +19,7 @@ expect fun getScreenDimensions(): ScreenDimension
 expect fun NativePaint.setMaskFilter(blurRadius: Float)
 
 @Composable
-expect fun getStatusBarHeight(): Dp
+expect fun getStatusBarHeight(): Dp
+
+@Composable
+expect fun getNavigationBarHeight(): Dp

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

@@ -4,6 +4,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.gestures.optOutOfCupertinoOverscroll
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.NativePaint
@@ -42,4 +43,9 @@ actual fun NativePaint.setMaskFilter(blurRadius: Float) {
 @Composable
 actual fun getStatusBarHeight(): Dp {
     return WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
+}
+
+@Composable
+actual fun getNavigationBarHeight(): Dp {
+    return WindowInsets.navigationBars.asPaddingValues().calculateTopPadding()
 }

package/local.properties

@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Wed Aug 21 14:20:12 ICT 2024
-sdk.dir=/Users/huynhdung/Library/Android/sdk
+#Tue Apr 23 16:40:15 ICT 2024
+sdk.dir=/Users/hung.dao1/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.89.30",
+  "version": "0.89.31-beta.22",
   "private": false,
   "dependencies": {},
   "devDependencies": {},