@momo-kits/native-kits 0.117.1-beta.1 → 0.117.1-beta.10

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

@@ -8,6 +8,7 @@ import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -35,6 +36,7 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 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
@@ -87,7 +89,7 @@ fun InputOTP(
     dataType: String = "number",
     modifier: Modifier = Modifier
 ) {
-    val maxLength = 10
+    val maxLength = length ?: 10
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
 
@@ -100,6 +102,10 @@ fun InputOTP(
         }
     }
 
+    fun onClearText(){
+        handleChangeText("")
+    }
+
 
     Column {
         BasicTextField(
@@ -193,6 +199,22 @@ fun InputOTP(
                             }
                         }
                     }
+                    Box(
+                        modifier = Modifier.align(Alignment.Center).zIndex(10f)
+                    ) {
+                        Row(
+                            horizontalArrangement = Arrangement.End,
+                            modifier = Modifier.fillMaxWidth()
+                        ) {
+                            Icon(
+                                "24_navigation_close_circle_full",
+                                size = 12.dp,
+                                modifier = Modifier.padding(end = 12.dp).clickable {
+                                    onClearText()
+                                }
+                            )
+                        }
+                    }
                 }
             }
         )

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

@@ -17,6 +17,7 @@ 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.layout.ContentScale
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.unit.dp
@@ -41,6 +42,7 @@ fun PopupPromotion(
                         indication = null,
                         onClick = onPress
                     ),
+                options = Options(alignment =  Alignment.Center, contentScale = ContentScale.Fit)
             )
         }
         Box(

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

@@ -0,0 +1,208 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+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.Spacing
+import vn.momo.kits.const.Typography
+
+enum class TitleType { Card, Section }
+enum class TitleSize { Small, Medium, Large }
+enum class IconAlign { Top, Center, Bottom }
+enum class ButtonSize { Small, Large }
+
+@Composable
+fun Title(
+    title: String,
+    type: TitleType = TitleType.Section,
+    size: TitleSize = TitleSize.Medium,
+    icon: String? = null,
+    iconColor: Color? = null,
+    iconAlign: IconAlign = IconAlign.Top,
+    showRightAction: Boolean = false,
+    showTrailingAction: Boolean = false,
+    badgeLabel: String? = null,
+    buttonTitle: String? = null,
+    buttonSize: ButtonSize = ButtonSize.Small,
+    onPressRightAction: () -> Unit = {},
+    onPressTrailingAction: () -> Unit = {},
+    textOnly: Boolean = false,
+    description: String? = null,
+    modifier: Modifier = Modifier
+) {
+    val theme = AppTheme.current
+    val textStyle: TextStyle = when (type) {
+        TitleType.Card -> when (size) {
+            TitleSize.Small -> TextStyle(fontSize = 14.sp, lineHeight = 20.sp)
+            TitleSize.Medium -> TextStyle(fontSize = 16.sp, lineHeight = 22.sp)
+            TitleSize.Large -> TextStyle(fontSize = 18.sp, lineHeight = 26.sp)
+        }
+
+        TitleType.Section -> when (size) {
+            TitleSize.Small -> TextStyle(
+                fontSize = 16.sp,
+                lineHeight = 24.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            TitleSize.Medium -> TextStyle(
+                fontSize = 18.sp,
+                lineHeight = 26.sp,
+                fontWeight = FontWeight.Bold
+            )
+
+            TitleSize.Large -> TextStyle(
+                fontSize = 20.sp,
+                lineHeight = 28.sp,
+                fontWeight = FontWeight.Bold
+            )
+        }
+    }
+
+    if (textOnly) {
+        Text(
+            text = title,
+            style = textStyle,
+            modifier = modifier
+        )
+        return
+    }
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(IntrinsicSize.Min)
+            .padding(8.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        icon?.let {
+            Column(
+                modifier = Modifier.fillMaxHeight().padding(end = Spacing.S),
+                verticalArrangement = when (iconAlign) {
+                    IconAlign.Top -> Arrangement.Top
+                    IconAlign.Center -> Arrangement.Center
+                    IconAlign.Bottom -> Arrangement.Bottom
+                },
+            ) {
+                // Icon
+                Icon(
+                    source = it,
+                    color = iconColor ?: theme.colors.text.default,
+                    modifier = Modifier.size(24.dp)
+                )
+            }
+        }
+
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = if (showTrailingAction) Modifier else Modifier.weight(1f),
+                ) {
+                    Text(
+                        text = title,
+                        style = textStyle,
+                        maxLines = if (showTrailingAction || badgeLabel != null) 1 else 2,
+                    )
+
+                    // Badge
+                    badgeLabel?.let {
+                        Spacer(modifier = Modifier.width(4.dp))
+                        Badge(
+                            label = it
+                        )
+                    }
+
+                }
+
+                // Trailing action (icon)
+                if (showTrailingAction && !showRightAction) {
+                    Spacer(modifier = Modifier.width(8.dp))
+                    Box(
+                        modifier = Modifier
+                            .size(24.dp)
+                            .background(
+                                color = if (type == TitleType.Section) Colors.black_06.copy(0.6f) else Colors.black_06.copy(
+                                    0.3f
+                                ),
+                                shape = RoundedCornerShape(12.dp)
+                            )
+                            .clickable { onPressTrailingAction() },
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Icon(
+                            source = "arrow_chevron_right_small",
+                            size = 18.dp
+                        )
+                    }
+                }
+            }
+
+            // Description
+            description?.let {
+                Spacer(modifier = Modifier.height(4.dp))
+                Text(
+                    text = it,
+                    style = Typography.descriptionDefaultRegular,
+                    color = theme.colors.text.secondary
+                )
+            }
+        }
+
+        // Right action (button or icon)
+        if (showRightAction && !showTrailingAction) {
+            Spacer(modifier = Modifier.width(8.dp))
+            if (buttonTitle != null) {
+                Text(
+                    text = buttonTitle,
+                    style = if (buttonSize === ButtonSize.Small) Typography.actionXsBold else Typography.actionSBold,
+                    color = theme.colors.primary,
+                    modifier = Modifier.clickable { onPressRightAction() }
+                )
+            } else {
+                Box(
+                    modifier = Modifier
+                        .size(24.dp)
+                        .background(
+                            color = Colors.pink_03.copy(alpha = 0.1f),
+                            shape = RoundedCornerShape(12.dp)
+                        )
+                        .clickable { onPressRightAction() },
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        source = "arrow_chevron_right_small",
+                        modifier = Modifier.size(22.dp),
+                        color = theme.colors.primary
+                    )
+                }
+            }
+        }
+    }
+}

package/ios/Popup/PopupDisplay.swift

@@ -34,21 +34,17 @@ public struct PopupDisplay: View {
         self.actionButtonTitle = actionButtonTitle
         self.errorCode = errorCode
     }
-    
-    var placeholder: AnyView?
-
-    @State var error: Bool = false
 
     // MARK: Public
 
     public var body: some View {
         VStack(spacing: 12) {
             ZStack(alignment: .topTrailing) {
-                SwiftUI.Button(action: onPressClose) {
+                SwiftUI.Button(action: onClose) {
                     Image(systemName: "xmark.circle.fill")
                         .resizable()
                         .frame(width: 22, height: 22)
-                        .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 1))
+                        .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 2))
                 }.foregroundColor(Colors.black20)
                     .background(Colors.black01.cornerRadius(15))
                     .padding(.trailing, -11)
@@ -56,25 +52,25 @@ public struct PopupDisplay: View {
                     .zIndex(1)
                     .accessibility(identifier: "ic_popup_close")
 
-            VStack {
-                if(!url.isEmpty) {
-                    WebImage(url: URL(string: url), isAnimating: .constant(true))
-                        .resizable()
-                        .placeholder {
-                            Rectangle()
-                                .fill(Color.gray.opacity(0.3))
-                                .frame(maxWidth: .infinity, maxHeight: 184)
-                        }
-                        .scaledToFill()
-                        .frame(maxWidth: .infinity)
-                        .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
-                        .aspectRatio(2, contentMode: .fit)
-                }
+                VStack {
+                    if(!url.isEmpty) {
+                        WebImage(url: URL(string: url), isAnimating: .constant(true))
+                            .resizable()
+                            .placeholder {
+                                Rectangle()
+                                    .fill(Color.gray.opacity(0.3))
+                                    .frame(maxWidth: .infinity, maxHeight: 184)
+                            }
+                            .aspectRatio(2, contentMode: .fit)
+                            .frame(maxWidth: .infinity, alignment: .center)
+                            .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
+                            .clipped()
+                    }
                     VStack(alignment: .leading) {
                         Text(title)
                             .foregroundColor(.black)
                             .font(.header_default_semibold)
-                            .padding(.top, 16)
+                            .padding(.top, 24)
                             .padding(.bottom, 8)
                             .lineLimit(2)
                             .accessibility(identifier: "title_popup_permission")
@@ -85,17 +81,18 @@ public struct PopupDisplay: View {
                             .opacity(0.6)
                             .multilineTextAlignment(.leading)
                             .padding(.bottom, 8)
-                        
+
                         if(!errorCode.isEmpty) {
                             Text(errorCode)
                                 .foregroundColor(Colors.black12)
                                 .font(.description_xs_regular)
                                 .lineLimit(1)
+                                .padding(.bottom, 8)
                         }
                     }
                     .frame(maxWidth: .infinity, alignment: .leading)
                     .padding(.horizontal, 24)
-                    .padding(.bottom, 24)
+                    .padding(.bottom, 16)
 
                     if buttonDirection == .row {
                         if buttonType == .text {
@@ -134,7 +131,7 @@ public struct PopupDisplay: View {
     var actionButtonTitle: String
     var closeButtonTitle: String
     var errorCode: String
-    
+
     var RowTextButtons: some View {
         HStack {
             SwiftUI.Button(action: onPressCloseButton) {
@@ -195,9 +192,4 @@ public struct PopupDisplay: View {
         .padding(.bottom, 24)
     }
 
-
-    func onPressClose(){
-        isPresented = false
-        onClose()
-    }
 }

package/ios/Popup/PopupPromotion.swift

@@ -4,20 +4,19 @@ import SDWebImageSwiftUI
 public struct PopupPromotion: View {
     var imageUrl: String
     var onIconClose: (() -> Void)?
-    var onRequestClose: (((() -> Void)?) -> Void)? = nil
+    var onAction: (() -> Void)?
+
 
-    
     public init(
         imageUrl: String,
         onIconClose: (() -> Void)? = nil,
-        onRequestClose: (((() -> Void)?) -> Void)? = nil
-
+        onAction: (() -> Void)? = nil
     ) {
         self.imageUrl = imageUrl
         self.onIconClose = onIconClose
-        self.onRequestClose = onRequestClose
+        self.onAction = onAction
     }
-    
+
     public var body: some View {
         VStack(spacing: 8) {
             WebImage(url: URL(string: imageUrl)!)
@@ -31,25 +30,28 @@ public struct PopupPromotion: View {
                 .aspectRatio(0.72, contentMode: .fit)
                 .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
                 .clipped()
-                
+                .onTapGesture {
+                    onAction?()
+                }
+
             buildCloseIcon()
         }
         .accessibility(identifier: "popup_promotion")
     }
-    
+
     @ViewBuilder
     private func buildCloseIcon() -> some View {
         HStack {
             Spacer()
             SwiftUI.Button(action: {
-                onAction(callback: onIconClose)
+                onIconClose?()
             }) {
                 ZStack {
                     Circle()
                         .strokeBorder(Colors.black01, lineWidth: 2)
                         .background(Circle().fill(Colors.black17))
                         .frame(width: 20, height: 20)
-                    
+
                     Icon(source: "navigation_close", size: 14, color: Colors.black01)
                 }
             }
@@ -57,14 +59,7 @@ public struct PopupPromotion: View {
             Spacer()
         }
     }
-    
-    private func onAction(callback: (() -> Void)?) {
-        if let onRequestClose = onRequestClose {
-            onRequestClose(callback)
-        } else {
-            callback?()
-        }
-    }
+
 }
 
 

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.117.1-beta.1",
+  "version": "0.117.1-beta.10",
   "private": false,
   "dependencies": {},
   "devDependencies": {},