@momo-kits/native-kits 0.120.0-beta.3 → 0.120.0-beta.9

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

@@ -27,7 +27,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
@@ -168,11 +167,9 @@ fun Header(
                         HeaderTitle(
                             title = title,
                             color = tintIconColor,
-                            modifier = Modifier
-                                .setAutomationId("title_navigation_header")
-                                .fillMaxWidth(fraction = if(titlePosition == TitlePosition.LEFT) 0.7f else 0.5f)
-                            ,
-                            textAlign = if(titlePosition == TitlePosition.LEFT) TextAlign.Start else TextAlign.Center
+                            modifier = Modifier.semantics {
+                                testTag = "title_navigation_header"
+                            }
                         )
                     }
                 }

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

@@ -4,7 +4,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.components.Text
@@ -26,7 +25,6 @@ fun HeaderTitle(
             lineHeight = 22.sp,
         ),
         color = color,
-        maxLines = 1,
-        overflow = TextOverflow.Ellipsis
+        maxLines = 1
     )
 }

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

@@ -200,8 +200,9 @@ fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bo
     Box(
         Modifier
             .offset(y = -keyboardSize)
+            .padding(bottom = bottom)
             .shadow(
-                Colors.black_20.copy(alpha = 0.2f),
+                Colors.black_20.copy(alpha = 0.1f),
                 borderRadius = 0.dp,
                 10f,
                 offsetX = 0.dp,
@@ -211,9 +212,7 @@ fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bo
             .background(AppTheme.current.colors.background.surface)
     ) {
         Box(
-            Modifier.fillMaxWidth()
-                .padding(bottom = bottom)
-                .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/Image.kt

@@ -2,6 +2,10 @@ package vn.momo.kits.components
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
+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.ColorFilter
@@ -10,6 +14,8 @@ import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
+import coil3.compose.AsyncImage
+import vn.momo.kits.const.AppTheme
 
 data class Options(
     val alignment: Alignment = Alignment.TopStart,
@@ -22,47 +28,6 @@ enum class ImageState {
     Loading, Success, Error
 }
 
-private val supportedDomains = setOf(
-    "static.momocdn.net",
-    "img.mservice.com.vn",
-    "cdn.mservice.com.vn",
-    "img.mservice.io",
-    "image.momocdn.net"
-)
-
-private val sizeChart = mapOf(
-    "XXS" to 64,
-    "XS" to 128,
-    "S" to 256,
-    "M" to 512,
-    "L" to 768,
-    "XL" to 1024,
-    "XXL" to 2048
-)
-
-private fun closestSizeForWidth(width: Float): String {
-    return sizeChart.minByOrNull { (_, value) ->
-        kotlin.math.abs(value - width)
-    }?.key ?: "M"
-}
-
-private fun getHostFromUrl(url: String): String? {
-    return try {
-        val noProtocol = url.substringAfter("//")
-        noProtocol.substringBefore("/").substringBefore(":")
-    } catch (_: Exception) {
-        null
-    }
-}
-
-private fun appendQueryParam(url: String, key: String, value: String): String {
-    val parts = url.split("#", limit = 2)
-    val base = parts[0]
-    val fragment = if (parts.size > 1) "#" + parts[1] else ""
-    val sep = if (base.contains("?")) "&" else "?"
-    return "$base$sep$key=$value$fragment"
-}
-
 @Composable
 fun Image(
     source: Any,
@@ -70,59 +35,41 @@ fun Image(
     options: Options? = null,
     loading: Boolean = true,
 ) {
-//    var imageOptions = Options()
-//    var imageState by remember { mutableStateOf(ImageState.Loading) }
-//    var urlToLoad by remember(source) { mutableStateOf(source) }
-//    val density = LocalDensity.current
+    var imageOptions = Options()
+    var imageState by remember { mutableStateOf(ImageState.Loading) }
 
     options?.let {
-//        imageOptions = Options(
-//            alignment = options.alignment,
-//            contentScale = options.contentScale,
-//            colorFilter = options.colorFilter,
-//            alpha = DefaultAlpha,
-//        )
+        imageOptions = Options(
+            alignment = options.alignment,
+            contentScale = options.contentScale,
+            colorFilter = options.colorFilter,
+            alpha = DefaultAlpha,
+        )
     }
 
-    Box(
-        modifier = modifier
-            .semantics { contentDescription = "img|$source" }
-//            .onSizeChanged { size ->
-//                val src = source as? String ?: return@onSizeChanged
-//                val host = getHostFromUrl(src)
-//                if (host != null && supportedDomains.contains(host)) {
-//                    val widthPx = size.width.toFloat()
-//                    val pixelRatio = density.density
-//                    val pixelFitForWidth = widthPx * pixelRatio
-//                    val sizeKey = closestSizeForWidth(pixelFitForWidth)
-//                    urlToLoad = appendQueryParam(src, "size", sizeKey)
-//                } else {
-//                    urlToLoad = src
-//                }
-//            }
-    ) {
-//        AsyncImage(
-//            modifier = Modifier.matchParentSize(),
-//            model = urlToLoad,
-//            contentDescription = null,
-//            contentScale = imageOptions.contentScale,
-//            alignment = imageOptions.alignment,
-//            colorFilter = imageOptions.colorFilter,
-//            alpha = imageOptions.alpha,
-//            onLoading = { imageState = ImageState.Loading },
-//            onSuccess = { imageState = ImageState.Success },
-//            onError = { imageState = ImageState.Error },
-//        )
-//        when (imageState) {
-//            ImageState.Loading -> if (loading) Skeleton()
-//            ImageState.Error -> Icon(
-//                source = "media_fail",
-//                color = AppTheme.current.colors.text.disable,
-//                modifier = modifier
-//            )
-//
-//            ImageState.Success -> {}
-//        }
+    Box(modifier = modifier.semantics { contentDescription = "img|$source" }) {
+        AsyncImage(
+            modifier = Modifier.matchParentSize(),
+            model = source,
+            contentDescription = null,
+            contentScale = imageOptions.contentScale,
+            alignment = imageOptions.alignment,
+            colorFilter = imageOptions.colorFilter,
+            alpha = imageOptions.alpha,
+            onLoading = { imageState = ImageState.Loading },
+            onSuccess = { imageState = ImageState.Success },
+            onError = { imageState = ImageState.Error },
+        )
+        when (imageState) {
+            ImageState.Loading -> if (loading) Skeleton()
+            ImageState.Error -> Icon(
+                source = "media_fail",
+                color = AppTheme.current.colors.text.disable,
+                modifier = modifier
+            )
+
+            ImageState.Success -> {}
+        }
     }
 
 }

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

@@ -57,7 +57,6 @@ fun PopupNotify(
     secondary: PopupAction? = null,
     buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
     onIconClose: () -> Unit,
-    isShowCloseIcon: Boolean = true,
 ) {
     var isScroll by remember { mutableStateOf(false) }
     val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
@@ -108,13 +107,13 @@ fun PopupNotify(
                     RoundedCornerShape(Radius.L)
                 )
         ) {
-            if(image.isNotEmpty()) {
+            image.ifNotNull(
                 Image(
                     source = image,
                     modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
-                    options = Options(alignment = Alignment.Center)
-                )
-            }
+                    options = Options(alignment =  Alignment.Center)
+                ), null
+            )
 
             Column(modifier = Modifier.padding(Spacing.XL)) {
                 Text(
@@ -126,7 +125,7 @@ fun PopupNotify(
                 content(Modifier.padding(top = Spacing.S))
                 if (error.isNotEmpty()) {
                     Text(
-                        text = "Mã lỗi: " + error,
+                        text = error,
                         style = Typography.descriptionXsRegular,
                         color = AppTheme.current.colors.text.hint,
                         maxLines = 1,
@@ -145,36 +144,34 @@ fun PopupNotify(
             }
         }
 
-        if(isShowCloseIcon) {
-            Box(
-                Modifier
-                    .width(22.dp)
-                    .height(22.dp)
-                    .offset(x = -(1).dp, y = (-11).dp)
-                    .background(
-                        color = AppTheme.current.colors.text.default,
-                        shape = RoundedCornerShape(Radius.M)
-                    )
-                    .border(
-                        width = 2.dp,
-                        color = AppTheme.current.colors.background.surface,
-                        shape = RoundedCornerShape(Radius.M)
-                    )
-                    .clip(RoundedCornerShape(100))
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = { onClose { onIconClose() } }
-                    ),
-                contentAlignment = Alignment.Center
-            ) {
-                Icon(
-                    source = "navigation_close",
+        Box(
+            Modifier
+                .width(22.dp)
+                .height(22.dp)
+                .offset(x = -(1).dp, y = (-11).dp)
+                .background(
+                    color = AppTheme.current.colors.text.default,
+                    shape = RoundedCornerShape(Radius.M)
+                )
+                .border(
+                    width = 2.dp,
                     color = AppTheme.current.colors.background.surface,
-                    size = 16.dp,
-                    modifier = Modifier.setAutomationId("ic_popup_close")
+                    shape = RoundedCornerShape(Radius.M)
                 )
-            }
+                .clip(RoundedCornerShape(100))
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null,
+                    onClick = { onClose { onIconClose() } }
+                ),
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                source = "navigation_close",
+                color = AppTheme.current.colors.background.surface,
+                size = 16.dp,
+                modifier = Modifier.setAutomationId("ic_popup_close")
+            )
         }
     }
 }

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

@@ -24,7 +24,6 @@ import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
-import vn.momo.kits.utils.ifNotNull
 
 @Composable
 fun PopupPromotion(
@@ -33,7 +32,7 @@ fun PopupPromotion(
     onClose: (() -> Unit) = {},
 ) {
     Column(Modifier.semantics { testTag = "popup_notify" }) {
-        source.ifNotNull(
+        if (source.isNotEmpty()) {
             Image(
                 source = source,
                 modifier = Modifier.fillMaxWidth()
@@ -44,8 +43,8 @@ fun PopupPromotion(
                         onClick = onPress
                     ),
                 options = Options(alignment =  Alignment.Center, contentScale = ContentScale.Crop)
-            ), null
-        )
+            )
+        }
         Box(
             modifier = Modifier
                 .padding(top = Spacing.S)

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

@@ -17,7 +17,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.utils.ifTrue
 
 @Composable
@@ -25,8 +24,6 @@ fun Switch(
     value: Boolean = false,
     onChange: (Boolean) -> Unit = {},
     disabled: Boolean = false,
-    title: String? = "",
-    accessibilityId: String? = ""
 ) {
     val circleBackgroundColor = value.ifTrue(Colors.black_01, Colors.black_03)
     var backgroundColor = value.ifTrue(Colors.green_03, Colors.black_07)
@@ -35,35 +32,27 @@ fun Switch(
     }
 
     Box(
-        modifier = Modifier.setAutomationId( accessibilityId ?: "toggle_${title ?: "unknown"}_${value}")
+        modifier = Modifier.then(
+            Modifier.width(38.dp).height(20.dp).border(
+                0.dp, Color.Unspecified,
+                RoundedCornerShape(20.dp)
+            ).background(backgroundColor, RoundedCornerShape(20.dp)).clip(RoundedCornerShape(20.dp))
+                .clickable(
+                    enabled = !disabled,
+                    onClick = { onChange(!value) }
+                )
+                .padding(horizontal = Spacing.XS)
+        ),
+        contentAlignment = value.ifTrue(Alignment.CenterEnd, Alignment.CenterStart)
     ) {
         Box(
-            modifier = Modifier.then(
-                Modifier.width(38.dp).height(20.dp).border(
-                    0.dp, Color.Unspecified,
-                    RoundedCornerShape(20.dp)
-                ).background(backgroundColor, RoundedCornerShape(20.dp))
-                    .clip(RoundedCornerShape(20.dp))
-                    .clickable(
-                        enabled = !disabled,
-                        onClick = { onChange(!value) }
-                    )
-                    .padding(horizontal = Spacing.XS)
-            ),
-            contentAlignment = value.ifTrue(Alignment.CenterEnd, Alignment.CenterStart)
-        ) {
-            Box(
-                modifier = Modifier.size(14.dp)
-                    .border(0.dp, Color.Unspecified, RoundedCornerShape(percent = 100))
-                    .background(circleBackgroundColor, RoundedCornerShape(percent = 100)),
-                contentAlignment = Alignment.Center
-            )
-            {
-                Box(
-                    Modifier.size(6.dp)
-                        .background(backgroundColor, RoundedCornerShape(percent = 100))
-                )
-            }
+            modifier = Modifier.size(14.dp)
+                .border(0.dp, Color.Unspecified, RoundedCornerShape(percent = 100))
+                .background(circleBackgroundColor, RoundedCornerShape(percent = 100)),
+            contentAlignment = Alignment.Center
+        )
+        {
+            Box(Modifier.size(6.dp).background(backgroundColor, RoundedCornerShape(percent = 100)))
         }
     }
 }

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

@@ -8,7 +8,6 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Typography
@@ -28,9 +27,6 @@ fun Text(
     textDecoration: TextDecoration? = null,
     onTextLayout: ((TextLayoutResult) -> Unit)? = null,
     fontFamily: String = "SFProText",
-    minLines: Int = 1,
-    letterSpacing: TextUnit = TextUnit.Unspecified,
-    softWrap: Boolean = true,
     accessibilityId: String? = null
 ) {
     val fontSize = scaleSize(style.fontSize.value).sp
@@ -45,11 +41,8 @@ fun Text(
         fontSize = fontSize,
         fontFamily = font,
         maxLines = maxLines,
-        softWrap = softWrap,
-        letterSpacing = letterSpacing,
-        minLines = minLines,
         textDecoration = textDecoration,
         onTextLayout = onTextLayout,
         overflow = overflow
     )
-}
+}

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

@@ -2,6 +2,7 @@ package vn.momo.kits.const
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -12,17 +13,35 @@ import org.jetbrains.compose.resources.FontResource
 import org.jetbrains.compose.resources.InternalResourceApi
 import org.jetbrains.compose.resources.ResourceItem
 import vn.momo.kits.platform.getScreenDimensions
+import kotlin.math.max
+import kotlin.math.min
 
 const val DEFAULT_SCREEN_SIZE = 375f
+const val MAX_FONT_SCALE = 1.5f
+const val MAX_DEVICE_SCALE = 5
 
 @Composable
 fun scaleSize(size: Float): Float {
     val deviceWidth = getScreenDimensions().width
-    val scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE
-    if (scaleRate > 1) {
-        return if ((scaleRate * size) > (size + 5)) size + 5 else scaleRate * size
+    val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
+
+    val density = LocalDensity.current
+    val fontScale = density.fontScale
+
+    val defaultFontSize = size / fontScale //To ignore OS scale
+    var fontSizeScaleDevice = defaultFontSize
+    var fontSizeScaleOS = defaultFontSize
+
+    if (deviceScale > 1) {
+        fontSizeScaleDevice =
+            min(deviceScale * fontSizeScaleDevice, fontSizeScaleDevice + MAX_DEVICE_SCALE)
     }
-    return size
+
+    if (fontScale > 1) {
+        fontSizeScaleOS = min(fontScale * fontSizeScaleOS, fontSizeScaleOS * MAX_FONT_SCALE)
+    }
+
+    return max(fontSizeScaleDevice, fontSizeScaleOS)
 }
 
 @OptIn(InternalResourceApi::class)

package/ios/Application/Components.swift

@@ -214,8 +214,8 @@ public struct Header: View {
                                 }
                             } else {
                                 Text(title)
-                                    .font(Font.system(size: 17).weight(.bold))
-                                    .lineSpacing(22)
+                                    .font(Font.system(size: scaleSize(17)).weight(.bold))
+                                    .lineSpacing(scaleSize(22))
                                     .foregroundColor(tintColor)
                                     .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
                                     .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)

package/ios/Application/Screen.swift

@@ -88,8 +88,7 @@ public struct Screen<Content: View>: View {
             let screenHeight = height + topInset + bottomInset
 
             ZStack {
-                (backgroundColor ?? Color.white)
-                    .edgesIgnoringSafeArea(.top)
+                (backgroundColor ?? Color.white).edgesIgnoringSafeArea(.all)
 
                 VStack(spacing: 0) {
                     ZStack(alignment: .top) {
@@ -185,8 +184,6 @@ struct Footer: View {
         VStack {
             footerView
         }
-        .padding(.vertical, Spacing.S)
-        .padding(.horizontal, Spacing.M)
         .padding(.bottom, keyboardSize)
         .background(Colors.black01)
     }

package/ios/Button/Button.swift

@@ -42,7 +42,7 @@ public struct Button: View {
         SwiftUI.Button(action: action) {
             HStack {
                 iconLeft
-                renderTitle(title: title, type: type, size: size).lineLimit(1).truncationMode(.tail)
+                renderTitle(title: title, type: type, size: size)
                 iconRight
             }
             .buttonSize(size)
@@ -62,11 +62,11 @@ public struct Button: View {
     func renderTitle(title: String, type: ButtonType, size: ButtonSize) -> Text {
         switch size {
         case .large:
-            return Text(title).font(.system(size: 16, weight: Font.Weight.bold))
+            return Text(title).font(.system(size: scaleSize(16), weight: Font.Weight.bold))
         case .medium:
-            return Text(title).font(.system(size: 14, weight: Font.Weight.bold))
+            return Text(title).font(.system(size: scaleSize(14), weight: Font.Weight.bold))
         case .small:
-            return Text(title).font(.system(size: 12, weight: Font.Weight.bold))
+            return Text(title).font(.system(size: scaleSize(12), weight: Font.Weight.bold))
         }
     }
 }
@@ -123,15 +123,15 @@ private extension View {
         case .large:
             return self
                 .frame(maxWidth: .infinity, minHeight: 48, maxHeight: 48)
-                .padding([.leading, .trailing], Spacing.L)
+                .padding([.leading, .trailing], Spacing.XS)
         case .medium:
             return self
                 .frame(minWidth: 80, maxWidth: .infinity, minHeight: 36, maxHeight: 36)
-                .padding([.leading, .trailing], Spacing.M)
+                .padding([.leading, .trailing], Spacing.XS)
         case .small:
             return self
                 .frame(minWidth: 56, maxWidth: 76, minHeight: 28, maxHeight: 28)
-                .padding([.leading, .trailing], Spacing.S)
+                .padding([.leading, .trailing], Spacing.XS)
         }
     }
 }

package/ios/Checkbox/Checkbox.swift

@@ -53,8 +53,7 @@ public struct Checkbox: View{
 
             // Title
             if !title.isEmpty {
-                Text(title)
-                    .font(.description1)
+                MomoText(title, typography: .bodyDefaultRegular)
             }
         }
     }

package/ios/Input/Input.swift

@@ -5,6 +5,7 @@ import SwiftUI
 fileprivate struct FloatingComponent: View {
     var floatingValue: String
     var floatingIcon: AnyView?
+    var disabled: Bool = false
     
     public init (_ floatingValue: String = "", floatingIcon: AnyView? = nil){
         self.floatingValue = floatingValue
@@ -13,12 +14,9 @@ fileprivate struct FloatingComponent: View {
     
     public var body: some View {
         return HStack {
-            Text(floatingValue)
-                .font(.paragraph)
-                .foregroundColor(Colors.black09)
-                .font(.system(size: 12))
-                .padding(.leading, 8)
-                .padding(.trailing, 8)
+            MomoText(floatingValue, typography: .labelSMedium, color: self.disabled ? Colors.black12 : Colors.black08)
+                .padding(.leading, Spacing.XS)
+                .padding(.trailing, Spacing.XS)
             floatingIcon
         }
         .background(Colors.black01)
@@ -113,84 +111,83 @@ public struct Input: View {
     }
     
     public var body: some View {
-            VStack(alignment: .leading, spacing: 4) {
-                ZStack(alignment: .topLeading) {
-                    HStack(alignment: .center) {
-                        if let leadingIcon = leadingIcon {
-                            Icon(source: leadingIcon, size: 16, color: leadingIconColor)
-                        }
-                        
-                        if !isSecure {
-                            TextField("", text: $value, onEditingChanged: { isChange in
-                                self.focused = isChange
-                            })
-                            .disabled(disabled)
-                            .font(fontWeight == .bold ? .headline : .body)
-                        } else {
-                            DotTextField(value: $value)
-                                .disabled(disabled)
-                        }
-                        
-                        if loading {
-                            ActivityIndicator(isAnimating: .constant(true), style: .medium)
-                                .frame(width: 20, height: 20)
-                        } else if !value.isEmpty {
-                            SwiftButton(action: onCancel){
-                                Image(systemName: "x.circle.fill")
-                                    .foregroundColor(Colors.text)
-                                    .frame(width: 16, height: 16)
-                                    .padding(.leading, -4)
-                                    .padding(.trailing, 8)
-                            }
-                        }
-
-                        rightIcon
+        VStack(alignment: .leading, spacing: 4) {
+            ZStack(alignment: .topLeading) {
+                HStack(alignment: .center) {
+                    if let leadingIcon = leadingIcon {
+                        Icon(source: leadingIcon, size: 16, color: leadingIconColor)
                     }
-                    .padding(.horizontal, 12)
-                    .frame(height: size == .small ? 40 : 48)
-                    .background(disabled ? Colors.black01 : Color.white)
-                    .overlay(RoundedRectangle(cornerRadius: 8).stroke(focused ? Colors.pink03 : Colors.border, lineWidth: 1))
                     
-                    if value.isEmpty {
-                        Text(placeholder + (required ? " *" : ""))
-                            .foregroundColor(Colors.black09)
-                            .padding(.horizontal, leadingIcon == nil ? 12 : 32)
-                            .padding(.top, 12)
-                            .allowsHitTesting(false)
+                    if !isSecure {
+                        TextField("", text: $value ,onEditingChanged: { isChange in
+                            self.focused = isChange
+                        })
+                        .disabled(disabled)
+                        .frame(maxHeight: .infinity)
+                        .multilineTextAlignment(.leading)
+                        .font(.system(size: scaleSize(14)))
+                    } else {
+                        DotTextField(value: $value)
+                            .disabled(disabled)
                     }
                     
-                    if !floatingValue.isEmpty {
-                        FloatingComponent(floatingValue, floatingIcon: floatingIconURL.map { url in
-                            AnyView(
-                                Icon(source: url, size: 16, color: floatingIconColor)
-                                )
-                        })
-                            
+                    if loading {
+                        ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                            .frame(width: 20, height: 20)
+                    } else if !value.isEmpty {
+                        SwiftButton(action: onCancel){
+                            Image(systemName: "x.circle.fill")
+                                .foregroundColor(Colors.text)
+                                .frame(width: 16, height: 16)
+                                .padding(.leading, -4)
+                                .padding(.trailing, 8)
+                        }
                     }
+                    
+                    rightIcon
                 }
+                .padding(.horizontal, 12)
+                .frame(height: size == .small ? scaleSize(40) : scaleSize(48))
+                .background(disabled ? Colors.black01 : Color.white)
+                .overlay(RoundedRectangle(cornerRadius: 8).stroke(focused ? Colors.pink03 : Colors.border, lineWidth: 1))
                 
-                if !errorMessage.isEmpty {
-                    Text(errorMessage)
-                        .foregroundColor(.red)
-                        .font(.caption)
-                } else if let hint = hintText {
-                    Text(hint)
+                if value.isEmpty {
+                    Text(placeholder + (required ? " *" : ""))
+                        .font(.system(size: scaleSize(14)))
                         .foregroundColor(Colors.black09)
-                        .font(.caption)
+                        .padding(.horizontal, leadingIcon == nil ? 12 : 32)
+                        .padding(.top, 12)
+                        .allowsHitTesting(false)
                 }
+                
+                if !floatingValue.isEmpty {
+                    FloatingComponent(floatingValue, floatingIcon: floatingIconURL.map { url in
+                        AnyView(
+                            Icon(source: url, size: 16, color: floatingIconColor)
+                        )
+                    })
+                    
+                }
+            }
+            
+            if !errorMessage.isEmpty {
+                MomoText(errorMessage, typography: .descriptionDefaultRegular, color: Colors.red03)
+            } else if hintText != nil {
+                MomoText(errorMessage, typography: .descriptionDefaultRegular, color: Colors.black12)
             }
         }
+    }
 }
 
 
 struct ActivityIndicator: UIViewRepresentable {
     @Binding var isAnimating: Bool
     let style: UIActivityIndicatorView.Style
-
+    
     func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
         return UIActivityIndicatorView(style: style)
     }
-
+    
     func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
         isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
     }

package/ios/Popup/PopupDisplay.swift

@@ -21,7 +21,7 @@ public enum PopupButtonType {
 public struct PopupDisplay: View {
     // MARK: Lifecycle
 
-    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "", isShowCloseIcon: Bool = true) {
+    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "") {
         self._isPresented = isPresented
         self.title = title
         self.description = description
@@ -34,7 +34,6 @@ public struct PopupDisplay: View {
         self.closeButtonTitle = closeButtonTitle
         self.actionButtonTitle = actionButtonTitle
         self.errorCode = errorCode
-        self.isShowCloseIcon = isShowCloseIcon
     }
 
     // MARK: Public
@@ -49,19 +48,17 @@ public struct PopupDisplay: View {
 
         VStack(spacing: 12) {
             ZStack(alignment: .topTrailing) {
-                if(isShowCloseIcon) {
-                    SwiftUI.Button(action: onClose) {
-                        Image(systemName: "xmark.circle.fill")
-                            .resizable()
-                            .frame(width: 22, height: 22)
-                            .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 2))
-                    }.foregroundColor(Colors.black20)
-                        .background(Colors.black01.cornerRadius(15))
-                        .padding(.trailing, -11)
-                        .padding(.top, -11)
-                        .zIndex(1)
-                        .accessibility(identifier: "ic_popup_close")
-                }
+                SwiftUI.Button(action: onClose) {
+                    Image(systemName: "xmark.circle.fill")
+                        .resizable()
+                        .frame(width: 22, height: 22)
+                        .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 2))
+                }.foregroundColor(Colors.black20)
+                    .background(Colors.black01.cornerRadius(15))
+                    .padding(.trailing, -11)
+                    .padding(.top, -11)
+                    .zIndex(1)
+                    .accessibility(identifier: "ic_popup_close")
 
                 VStack {
                     if(!url.isEmpty) {
@@ -91,7 +88,8 @@ public struct PopupDisplay: View {
                                 ScrollView(showsIndicators: false) {
                                     Text(description)
                                         .font(.paragraph)
-                                        .foregroundColor(Colors.black17)
+                                        .foregroundColor(.black)
+                                        .opacity(0.6)
                                         .multilineTextAlignment(.leading)
                                         .background(GeometryReader { geo in
                                             Color.clear
@@ -104,7 +102,8 @@ public struct PopupDisplay: View {
                             } else {
                                 Text(description)
                                     .font(.paragraph)
-                                    .foregroundColor(Colors.black17)
+                                    .foregroundColor(.black)
+                                    .opacity(0.6)
                                     .multilineTextAlignment(.leading)
                                     .background(GeometryReader { geo in
                                         Color.clear
@@ -117,7 +116,7 @@ public struct PopupDisplay: View {
                         }.padding(.bottom, 8)
 
                         if(!errorCode.isEmpty) {
-                            Text("Mã lỗi: " + errorCode)
+                            Text(errorCode)
                                 .foregroundColor(Colors.black12)
                                 .font(.description_xs_regular)
                                 .lineLimit(1)
@@ -165,7 +164,6 @@ public struct PopupDisplay: View {
     var actionButtonTitle: String
     var closeButtonTitle: String
     var errorCode: String
-    var isShowCloseIcon: Bool
 
     var RowTextButtons: some View {
         HStack {
@@ -203,9 +201,7 @@ public struct PopupDisplay: View {
 
     var RowButtons: some View {
         HStack {
-            if(!closeButtonTitle.isEmpty) {
-                Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
-            }
+            Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
             Button(title: actionButtonTitle, action: onPressAction, size: .medium)
                 .accessibility(identifier: "btn_popup_allow")
         }
@@ -221,9 +217,8 @@ public struct PopupDisplay: View {
                 action: onPressAction,
                 size: .medium
             ).accessibility(identifier: "btn_popup_allow")
-            if(!closeButtonTitle.isEmpty) {
-                Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
-            }
+            Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
+
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
         .padding(.horizontal, 24)

package/ios/Popup/PopupPromotion.swift

@@ -19,26 +19,22 @@ public struct PopupPromotion: View {
 
     public var body: some View {
         VStack(spacing: 8) {
-            if(imageUrl.isEmpty) {
-                Icon(source: "media_fail", size: UIScreen.main.bounds.width - Spacing.XL * 2)
-            }
-            else {
-                WebImage(url: URL(string: imageUrl)!)
-                    .resizable()
-                    .placeholder {
-                        Color.gray
-                            .aspectRatio(0.72, contentMode: .fit)
-                            .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
-                            .clipped()
-                    }
-                    .scaledToFill()
-                    .aspectRatio(0.72, contentMode: .fit)
-                    .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
-                    .clipped()
-                    .onTapGesture {
-                        onAction?()
-                    }
-            }
+            WebImage(url: URL(string: imageUrl)!)
+                .resizable()
+                .placeholder {
+                    Color.gray
+                        .aspectRatio(0.72, contentMode: .fit)
+                        .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                        .clipped()
+                }
+                .scaledToFill()
+                .aspectRatio(0.72, contentMode: .fit)
+                .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
+                .clipped()
+                .onTapGesture {
+                    onAction?()
+                }
+
             buildCloseIcon()
         }
         .accessibility(identifier: "popup_promotion")

package/ios/Typography/Text.swift

@@ -1,5 +1,32 @@
 import SwiftUI
 
+public func scaleSize(_ size: CGFloat) -> CGFloat {
+    let defaultScreenSize: CGFloat = 375
+    let maxFontScale: CGFloat = 1.5
+    let maxDeviceScale: CGFloat = 5
+    
+    let deviceWidth = UIScreen.main.bounds.width
+    let deviceScale = deviceWidth / defaultScreenSize
+    
+    let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
+    let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
+    let fontScale = scaledFont.pointSize / defaultFont.pointSize
+    
+    var fontSizeDeviceScale = size
+    var fontSizeOSScale = size
+    
+    
+    if deviceScale > 1 {
+        fontSizeDeviceScale = min(fontSizeDeviceScale * deviceScale, fontSizeDeviceScale + maxDeviceScale)
+    }
+    
+    if fontScale > 1 {
+        fontSizeOSScale = min(fontSizeOSScale * fontScale, fontSizeOSScale * maxFontScale)
+    }
+    
+    return max(fontSizeDeviceScale, fontSizeOSScale)
+}
+
 public enum TypographyStyle {
     case headlineDefaultBold
     case headerMBold
@@ -63,13 +90,13 @@ public extension TypographyStyle {
     var fontWeight: Font.Weight {
         switch self {
         case .headlineDefaultBold, .headerMBold, .headerDefaultBold,
-             .actionDefaultBold, .actionSBold, .actionXsBold, .actionXxsBold:
+                .actionDefaultBold, .actionSBold, .actionXsBold, .actionXxsBold:
             return .bold
         case .headerSSemibold, .headerXsSemibold:
             return .semibold
         case .bodyDefaultRegular, .bodyDefaultRegularStrikethrough,
-             .descriptionDefaultRegular, .descriptionDefaultRegularStrikethrough,
-             .descriptionXsRegular, .descriptionXsRegularStrikethrough:
+                .descriptionDefaultRegular, .descriptionDefaultRegularStrikethrough,
+                .descriptionXsRegular, .descriptionXsRegularStrikethrough:
             return .regular
         case .labelDefaultMedium, .labelSMedium, .labelXsMedium:
             return .medium
@@ -78,8 +105,8 @@ public extension TypographyStyle {
     var isStrikethrough: Bool {
         switch self {
         case .bodyDefaultRegularStrikethrough,
-             .descriptionDefaultRegularStrikethrough,
-             .descriptionXsRegularStrikethrough:
+                .descriptionDefaultRegularStrikethrough,
+                .descriptionXsRegularStrikethrough:
             return true
         default:
             return false
@@ -89,25 +116,25 @@ public extension TypographyStyle {
 
 public struct MomoText: View {
     private let content: String
-    private let style: TypographyStyle
+    private let typography: TypographyStyle
     private let color: Color
-
+    
     public init(
         _ content: String,
-        style: TypographyStyle = .bodyDefaultRegular,
+        typography: TypographyStyle = .bodyDefaultRegular,
         color: Color = Colors.text
     ) {
         self.content = content
-        self.style = style
+        self.typography = typography
         self.color = color
     }
-
+    
     public var body: some View {
-        var text = SwiftUI.Text(content)
-            .font(.system(size: style.fontSize, weight: style.fontWeight))
+        let text = SwiftUI.Text(content)
+            .font(.system(size: scaleSize(typography.fontSize), weight: typography.fontWeight))
             .foregroundColor(color)
-            .lineSpacing(style.lineHeight - style.fontSize)
-
+            .lineSpacing(scaleSize(typography.lineHeight) - scaleSize(typography.fontSize))
+        
         return text
     }
-} 
+}

package/ios/Typography/Typography.swift

@@ -2,7 +2,28 @@ import SwiftUI
 
 public extension Font {
     static func appFont(size: CGFloat) -> Font {
-        return Font.system(size: size)
+        let defaultScreenSize: CGFloat = 375
+        let maxFontScale: CGFloat = 1.2
+        let maxDeviceScale: CGFloat = 5
+        
+        let deviceWidth = UIScreen.main.bounds.width
+        let deviceScale = deviceWidth / defaultScreenSize
+        
+        let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
+        let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
+        let fontScale = scaledFont.pointSize / defaultFont.pointSize
+
+        var fontSize = size
+
+        if deviceScale > 1 {
+            fontSize = min(fontSize * deviceScale, fontSize + maxDeviceScale)
+        }
+
+        if fontScale > 1 {
+            fontSize = min(fontSize * fontScale, fontSize * maxFontScale)
+        }
+
+        return Font.system(size: fontSize)
     }
     
     // New supported typography styles

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 08 11:13:31 ICT 2025
+sdk.dir=/Users/sonnguyen/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.120.0-beta.3",
+  "version": "0.120.0-beta.9",
   "private": false,
   "dependencies": {},
   "devDependencies": {},