@momo-kits/native-kits 0.117.1-beta.9 → 0.117.2-beta.1

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

@@ -29,10 +29,10 @@ fun HeaderDefault(
     val height = statusBarHeight + HEADER_HEIGHT.dp
     Box(
         modifier = Modifier.fillMaxWidth().height(height)
-            .background(backgroundColor ?: AppTheme.current.colors.background.surface)
+            .background(if(headerTransparent && backgroundColor != null) backgroundColor else AppTheme.current.colors.background.surface)
             .bottomBorder(
                 strokeWidth = 1.dp,
-                color = backgroundColor?: AppTheme.current.colors.border.default
+                color = if(headerTransparent && backgroundColor != null) backgroundColor else AppTheme.current.colors.border.default
             )
     ) {
         Box(

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

@@ -4,6 +4,7 @@ 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
@@ -25,6 +26,7 @@ fun HeaderTitle(
             lineHeight = 22.sp,
         ),
         color = color,
-        maxLines = 1
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis,
     )
 }

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

@@ -200,9 +200,8 @@ 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.1f),
+                Colors.black_20.copy(alpha = 0.2f),
                 borderRadius = 0.dp,
                 10f,
                 offsetX = 0.dp,
@@ -212,7 +211,9 @@ 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(bottom = bottom)
+                .padding(vertical = Spacing.S, horizontal = Spacing.M)
         ) {
             footer?.invoke()
         }

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

@@ -57,6 +57,7 @@ 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) }
@@ -107,12 +108,13 @@ fun PopupNotify(
                     RoundedCornerShape(Radius.L)
                 )
         ) {
-            image.ifNotNull(
+            if(image.isNotEmpty()) {
                 Image(
                     source = image,
-                    modifier = Modifier.fillMaxWidth().aspectRatio(1.777f)
-                ), null
-            )
+                    modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
+                    options = Options(alignment = Alignment.Center)
+                )
+            }
 
             Column(modifier = Modifier.padding(Spacing.XL)) {
                 Text(
@@ -143,34 +145,36 @@ fun PopupNotify(
             }
         }
 
-        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,
+        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",
                     color = AppTheme.current.colors.background.surface,
-                    shape = RoundedCornerShape(Radius.M)
+                    size = 16.dp,
+                    modifier = Modifier.setAutomationId("ic_popup_close")
                 )
-                .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,6 +24,7 @@ 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(
@@ -32,7 +33,7 @@ fun PopupPromotion(
     onClose: (() -> Unit) = {},
 ) {
     Column(Modifier.semantics { testTag = "popup_notify" }) {
-        if (source.isNotEmpty()) {
+        source.ifNotNull(
             Image(
                 source = source,
                 modifier = Modifier.fillMaxWidth()
@@ -42,9 +43,9 @@ fun PopupPromotion(
                         indication = null,
                         onClick = onPress
                     ),
-                options = Options(alignment =  Alignment.Center, contentScale = ContentScale.Fit)
-            )
-        }
+                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,6 +17,7 @@ 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
@@ -24,6 +25,8 @@ 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)
@@ -32,27 +35,35 @@ fun Switch(
     }
 
     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)
+        modifier = Modifier.setAutomationId( accessibilityId ?: "toggle_${title ?: "unknown"}_${value}")
     ) {
         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.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))
+                )
+            }
         }
     }
 }

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

@@ -46,15 +46,15 @@ fun getFont(font: String): FontFamily {
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
     val key = "$fontFamily-${fontWeight?.weight}"
     val fontMap = mapOf(
-        "SFProText-100" to "sfprotext_thin.otf",
-        "SFProText-200" to "sfprotext_ultralight.otf",
+        "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_semibold.ttf",
         "SFProText-700" to "sfprotext_bold.ttf",
         "SFProText-800" to "sfprotext_heavy.ttf",
-        "SFProText-900" to "sfprotext_black.otf",
+        "SFProText-900" to "sfprotext_black.ttf",
 
         "MoMoSignature-100" to "momosignature.otf",
         "MoMoSignature-200" to "momosignature.otf",

package/ios/Application/HeaderRight.swift

@@ -179,14 +179,14 @@ struct ToolkitHeaderRight: View {
     }
     
     var body: some View {
-        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Color.black.opacity(0.6) : Colors.black01.opacity(0.6)
-        let borderColor: Color = tintColor == Colors.black01 ? Color.white.opacity(0.2) : Color.black.opacity(0.2)
+        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
+        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
         let navButtonConfig = getNavigationButtonConfig()
         let showBadge = headerRight?.tools.contains { group in
             group.items.contains { $0.showBadge }
         } ?? false
         
-        HStack(alignment: .center) {
+        HStack(alignment: .center, spacing: 0) {
             if headerRight?.useShortcut == true {
                 NavigationButton(
                     disabled: isLoading,
@@ -234,8 +234,8 @@ struct NavigationButton: View {
     var tintColor: Color?
     
     var body: some View {
-        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Color.black.opacity(0.6) : Colors.black01.opacity(0.6)
-        let borderColor: Color = tintColor == Colors.black01 ? Color.white.opacity(0.2) : Color.black.opacity(0.2)
+        let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
+        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
         
         ZStack {
             Circle()

package/ios/Application/Screen.swift

@@ -88,7 +88,8 @@ public struct Screen<Content: View>: View {
             let screenHeight = height + topInset + bottomInset
 
             ZStack {
-                (backgroundColor ?? Color.white).edgesIgnoringSafeArea(.all)
+                (backgroundColor ?? Color.white)
+                    .edgesIgnoringSafeArea(.top)
 
                 VStack(spacing: 0) {
                     ZStack(alignment: .top) {
@@ -184,6 +185,8 @@ 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)
+                renderTitle(title: title, type: type, size: size).lineLimit(1).truncationMode(.tail)
                 iconRight
             }
             .buttonSize(size)
@@ -123,15 +123,15 @@ private extension View {
         case .large:
             return self
                 .frame(maxWidth: .infinity, minHeight: 48, maxHeight: 48)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.L)
         case .medium:
             return self
                 .frame(minWidth: 80, maxWidth: .infinity, minHeight: 36, maxHeight: 36)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.M)
         case .small:
             return self
                 .frame(minWidth: 56, maxWidth: 76, minHeight: 28, maxHeight: 28)
-                .padding([.leading, .trailing], Spacing.XS)
+                .padding([.leading, .trailing], Spacing.S)
         }
     }
 }

package/ios/Popup/PopupDisplay.swift

@@ -6,6 +6,7 @@ import SwiftUI
 public enum PopupButtonDirection {
     case row
     case column
+    case auto
 }
 
 // MARK: - PopupButtonType
@@ -20,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 = "") {
+    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) {
         self._isPresented = isPresented
         self.title = title
         self.description = description
@@ -33,24 +34,34 @@ public struct PopupDisplay: View {
         self.closeButtonTitle = closeButtonTitle
         self.actionButtonTitle = actionButtonTitle
         self.errorCode = errorCode
+        self.isShowCloseIcon = isShowCloseIcon
     }
 
     // MARK: Public
 
+    @State private var textHeight: CGFloat = .zero
+    @State private var isScrollable = false
+    
     public var body: some View {
+        var shouldUseColumn: Bool {
+            buttonDirection == .column || (buttonDirection == .auto && (closeButtonTitle.count > 12 || actionButtonTitle.count > 12))
+        }
+
         VStack(spacing: 12) {
             ZStack(alignment: .topTrailing) {
-                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")
+                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")
+                }
 
                 VStack {
                     if(!url.isEmpty) {
@@ -75,15 +86,38 @@ public struct PopupDisplay: View {
                             .lineLimit(2)
                             .accessibility(identifier: "title_popup_permission")
 
-                        Text(description)
-                            .foregroundColor(.black)
-                            .font(.paragraph)
-                            .opacity(0.6)
-                            .multilineTextAlignment(.leading)
-                            .padding(.bottom, 8)
+                        Group {
+                            if isScrollable {
+                                ScrollView(showsIndicators: false) {
+                                    Text(description)
+                                        .font(.paragraph)
+                                        .foregroundColor(Colors.black17)
+                                        .multilineTextAlignment(.leading)
+                                        .background(GeometryReader { geo in
+                                            Color.clear
+                                                .onAppear {
+                                                    textHeight = geo.size.height
+                                                }
+                                        })
+                                }
+                                .frame(height: 60)
+                            } else {
+                                Text(description)
+                                    .font(.paragraph)
+                                    .foregroundColor(Colors.black17)
+                                    .multilineTextAlignment(.leading)
+                                    .background(GeometryReader { geo in
+                                        Color.clear
+                                            .onAppear {
+                                                textHeight = geo.size.height
+                                                isScrollable = textHeight > 60 // adjust threshold to ~3 lines
+                                            }
+                                    })
+                            }
+                        }.padding(.bottom, 8)
 
                         if(!errorCode.isEmpty) {
-                            Text(errorCode)
+                            Text("Mã lỗi: " + errorCode)
                                 .foregroundColor(Colors.black12)
                                 .font(.description_xs_regular)
                                 .lineLimit(1)
@@ -94,17 +128,17 @@ public struct PopupDisplay: View {
                     .padding(.horizontal, 24)
                     .padding(.bottom, 16)
 
-                    if buttonDirection == .row {
+                    if shouldUseColumn {
                         if buttonType == .text {
-                            RowTextButtons
+                            ColumnTextButtons
                         } else {
-                            RowButtons
+                            ColumnButtons
                         }
                     } else {
                         if buttonType == .text {
-                            ColumnTextButtons
+                            RowTextButtons
                         } else {
-                            ColumnButtons
+                            RowButtons
                         }
                     }
 
@@ -131,6 +165,7 @@ public struct PopupDisplay: View {
     var actionButtonTitle: String
     var closeButtonTitle: String
     var errorCode: String
+    var isShowCloseIcon: Bool
 
     var RowTextButtons: some View {
         HStack {
@@ -168,7 +203,9 @@ public struct PopupDisplay: View {
 
     var RowButtons: some View {
         HStack {
-            Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
+            if(!closeButtonTitle.isEmpty) {
+                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")
         }
@@ -184,8 +221,9 @@ public struct PopupDisplay: View {
                 action: onPressAction,
                 size: .medium
             ).accessibility(identifier: "btn_popup_allow")
-            Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary, size: .medium).accessibility(identifier: "btn_popup_cancel")
-
+            if(!closeButtonTitle.isEmpty) {
+                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,21 +19,26 @@ public struct PopupPromotion: View {
 
     public var body: some View {
         VStack(spacing: 8) {
-            WebImage(url: URL(string: imageUrl)!)
-                .resizable()
-                .placeholder {
-                    Color.gray
-                        .aspectRatio(0.72, contentMode: .fit)
-                        .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
-                        .clipped()
-                }
-                .aspectRatio(0.72, contentMode: .fit)
-                .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
-                .clipped()
-                .onTapGesture {
-                    onAction?()
-                }
-
+            if(imageUrl.isEmpty) {
+                Icon(source: "media_fail")
+            }
+            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?()
+                    }
+            }
             buildCloseIcon()
         }
         .accessibility(identifier: "popup_promotion")

package/package.json

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