@momo-kits/native-kits 0.162.21 → 0.162.22-debug

package/ios/Icon/Icon.swift

@@ -49,7 +49,11 @@ public struct Icon: View {
         if let uri = iconSources[source]?.uri {
             // Mirror Compose: certain icons (e.g. branded glyphs) are never tinted
             let resolvedColor = noThemeIcons.contains(source) ? nil : color
-            ImageView(uri, color: resolvedColor).frame(width: size, height: size)
+            ImageView(uri, color: resolvedColor)
+                .frame(width: size, height: size)
+                // Mirrors Compose's auto-generated `contentDescription = "img|$iconUrl"`
+                // when no explicit label is provided.
+                .accessibilityLabel(accessibilityLabel ?? "img|\(uri)")
         }
     }
 }

package/ios/IconButton/IconButton.swift

@@ -5,13 +5,15 @@ import SwiftUI
 
 public enum IconSize {
     case large
+    case medium
     case small
 
     /// Container width/height of the button.
     var containerSize: CGFloat {
         switch self {
         case .large: return 48
-        case .small: return 40
+        case .medium: return 36
+        case .small: return 28
         }
     }
 
@@ -19,13 +21,16 @@ public enum IconSize {
     var iconSize: CGFloat {
         switch self {
         case .large: return 24
-        case .small: return 16
+        case .medium, .small: return 16
         }
     }
+}
 
-    var radius: CGFloat {
-        Radius.XL
-    }
+// MARK: - IconShape
+
+public enum IconShape {
+    case circle
+    case square
 }
 
 // MARK: - IconButton
@@ -37,6 +42,7 @@ public struct IconButton: View {
     var onClick: () -> Void
     var type: ButtonType
     var size: IconSize
+    var shape: IconShape
     var color: Color?
 
     public init(
@@ -44,12 +50,14 @@ public struct IconButton: View {
         onClick: @escaping () -> Void,
         type: ButtonType = .primary,
         size: IconSize = .small,
+        shape: IconShape = .circle,
         color: Color? = nil
     ) {
         self.icon = icon
         self.onClick = onClick
         self.type = type
         self.size = size
+        self.shape = shape
         self.color = color
     }
 
@@ -72,9 +80,9 @@ public struct IconButton: View {
             Icon(source: icon, size: size.iconSize, color: fg)
                 .frame(width: size.containerSize, height: size.containerSize)
                 .background(bg)
-                .clipShape(RoundedRectangle(cornerRadius: size.radius))
+                .clipShape(IconButtonShape(shape))
                 .overlay(
-                    RoundedRectangle(cornerRadius: size.radius)
+                    IconButtonShape(shape)
                         .stroke(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
                 )
         }
@@ -110,3 +118,23 @@ public struct IconButton: View {
         }
     }
 }
+
+/// Type-erased shape switch (`Circle` vs a fixed `Radius.S` rounded rect) — mirrors
+/// Compose's `IconShape.toShape()`. `AnyShape` needs iOS 17+, so this hand-rolls the same
+/// erasure at the deployment target's iOS 15 floor.
+private struct IconButtonShape: Shape {
+    let shape: IconShape
+
+    init(_ shape: IconShape) {
+        self.shape = shape
+    }
+
+    func path(in rect: CGRect) -> Path {
+        switch shape {
+        case .circle:
+            return Circle().path(in: rect)
+        case .square:
+            return RoundedRectangle(cornerRadius: Radius.S).path(in: rect)
+        }
+    }
+}

package/ios/Image/Image.swift

@@ -5,15 +5,23 @@ import SDWebImageSwiftUI
 import SkeletonUI
 import SwiftUI
 
+public enum ImageState {
+    case loading, success, error
+}
+
 public struct ImageView: View {
+    @Environment(\.appTheme) private var theme
+
     // MARK: Lifecycle
 
-    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil, color: Color? = nil) {
+    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil, color: Color? = nil, loading: Bool = true, onStateChanged: ((ImageState) -> Void)? = nil) {
         self.url = url
         self.aspectRatio = aspectRatio
         self.contentMode = contentMode
         self.placeholder = placeholder
         self.color = color
+        self.loading = loading
+        self.onStateChanged = onStateChanged
     }
 
     // MARK: Public
@@ -22,9 +30,11 @@ public struct ImageView: View {
         return WebImage(url: URL(string: url), isAnimating: .constant(true))
             .onFailure { _ in
                 error = true
+                onStateChanged?(.error)
             }
             .onSuccess { _, _, _ in
                 error = false
+                onStateChanged?(.success)
             }
             .resizable()
             .renderingMode(color != nil ? .template : .original)
@@ -34,20 +44,21 @@ public struct ImageView: View {
                         Image("media_fail")
                             .resizable()
                             .renderingMode(.template)
-                            .foregroundColor(Colors.black08)
+                            .foregroundColor(theme.colors.text.disable)
                             .frame(width: 24, height: 24)
                     } else if placeholder != nil {
                         placeholder
                     }
                 })
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
-                .skeleton(with: !error && placeholder == nil)
+                .skeleton(with: loading && !error && placeholder == nil)
                 .shape(type: .rectangle)
             }
             .scaledToFit()
             .transition(.fade)
             .aspectRatio(aspectRatio, contentMode: contentMode)
             .foregroundColor(color)
+            .onAppear { onStateChanged?(.loading) }
     }
 
     // MARK: Internal
@@ -56,6 +67,8 @@ public struct ImageView: View {
     var contentMode: ContentMode
     var placeholder: AnyView?
     var color: Color?
+    var loading: Bool
+    var onStateChanged: ((ImageState) -> Void)?
 
     @State var error: Bool = false
     var url: String

package/ios/Information/Information.swift

@@ -7,6 +7,8 @@ public enum InformationState {
 }
 
 public struct Information: View {
+    @Environment(\.appTheme) private var theme
+
     private let title: String?
     private let description: String
     private let state: InformationState
@@ -93,7 +95,7 @@ public struct Information: View {
                 .frame(maxWidth: .infinity, alignment: .leading)
 
                 if let onPressClose, showIconClose {
-                    Icon(source: "navigation_close", size: 16, color: Colors.black17)
+                    Icon(source: "navigation_close", size: 16, color: theme.colors.text.default)
                         .contentShape(Rectangle())
                         .onTapGesture(perform: onPressClose)
                 }

package/ios/Input/ErrorView.swift

@@ -8,6 +8,8 @@
 import SwiftUI
 
 public struct ErrorView: View {
+    @Environment(\.appTheme) private var theme
+
     public var errorMessage: String
     public var errorSpacing: Bool
     public var hintText: String
@@ -43,7 +45,7 @@ public struct ErrorView: View {
     // MARK: - Helpers
     
     private func displayColor() -> Color {
-        !errorMessage.isEmpty ? Colors.red03 : Colors.black12
+        !errorMessage.isEmpty ? theme.colors.error.primary : theme.colors.text.hint
     }
     
     private func displayText() -> String {

package/ios/Input/Input.swift

@@ -35,6 +35,8 @@ public struct Input: View {
     
     @State private var isFocused: Bool = false
     @State private var isPasswordHidden: Bool = true
+    @FocusState private var isFieldFocused: Bool
+    @State private var floatingLabelHeight: CGFloat = 16
     
     public init(
         text: Binding<String>,
@@ -99,8 +101,13 @@ public struct Input: View {
         let textBinding = Binding<String>(
             get: { self.text },
             set: { newValue in
-                self.text = newValue
-                self.onChangeText?(limitText(newValue))
+                // Trim atomically before publishing, mirroring Kotlin's `onValueChange`
+                // (`newText.take(maxLength)` before the state ever updates) — avoids a
+                // render with the untrimmed value that a separate `.onChange` correction
+                // would otherwise briefly show.
+                let limited = limitText(newValue)
+                self.text = limited
+                self.onChangeText?(limited)
             }
         )
 
@@ -118,8 +125,19 @@ public struct Input: View {
                         }
                     }
                     .padding(.horizontal, Spacing.S)
+                    .background(
+                        GeometryReader { geo in
+                            Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                        }
+                    )
                     .background(theme.colors.background.surface)
-                    .offset(x: Spacing.S, y: -8)
+                    // Kotlin centers the label within the (box-height-tall) decorationBox
+                    // by default, then applies `offsetY = -size.values.height / 2` — net
+                    // effect: the label ends up centered exactly on the box's top border
+                    // (spanning -labelHeight/2 ... +labelHeight/2 around y=0). Our ZStack
+                    // anchors top-leading instead, so reproducing that requires offsetting
+                    // by half the label's OWN measured height, not half the box height.
+                    .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
                     .zIndex(10)
                 }
                 
@@ -151,6 +169,7 @@ public struct Input: View {
                                 cursorColor: UIColor(theme.colors.primary),
                                 isDisabled: disabled || readOnly,
                                 maxLength: maxLength,
+                                autofocus: autofocus,
                                 onFocusChange: { focused in
                                     handleFocusChange(focused)
                                 },
@@ -166,11 +185,9 @@ public struct Input: View {
                             .foregroundColor(getTextColor())
                             .disabled(disabled || readOnly)
                             .applyCursorColor(theme.colors.primary)
-                            .onChange(of: text) { newValue in
-                                let limited = limitText(newValue)
-                                if limited != newValue {
-                                    text = limited
-                                }
+                            .focused($isFieldFocused)
+                            .onAppear {
+                                if autofocus { isFieldFocused = true }
                             }
                         }
                     }
@@ -312,6 +329,7 @@ private struct SecureInputField: UIViewRepresentable {
     var cursorColor: UIColor
     var isDisabled: Bool
     var maxLength: Int?
+    var autofocus: Bool = false
     var onFocusChange: (Bool) -> Void
     var onChangeText: ((String) -> Void)?
 
@@ -336,6 +354,11 @@ private struct SecureInputField: UIViewRepresentable {
             action: #selector(Coordinator.textFieldDidChange(_:)),
             for: .editingChanged
         )
+        if autofocus {
+            DispatchQueue.main.async {
+                textField.becomeFirstResponder()
+            }
+        }
         return textField
     }
 

package/ios/Input/InputPhoneNumber.swift

@@ -16,6 +16,7 @@ public struct InputPhoneNumber: View {
     public var error: String
     public var errorSpacing: Bool
     public var loading: Bool
+    public var required: Bool
     public var rightIcon: String
     public var rightIconColor: Color?
     public var autofocus: Bool
@@ -24,8 +25,9 @@ public struct InputPhoneNumber: View {
     public var onBlur: (() -> Void)?
     public var onRightIconPressed: (() -> Void)?
     public var accessibilityLabel: String?
-    
+
     @State private var isFocused: Bool = false
+    @FocusState private var isFieldFocused: Bool
     
     public init(
         text: Binding<String>,
@@ -52,6 +54,7 @@ public struct InputPhoneNumber: View {
         self.error = error
         self.errorSpacing = errorSpacing
         self.loading = loading
+        self.required = required
         self.rightIcon = rightIcon
         self.rightIconColor = rightIconColor
         self.autofocus = autofocus
@@ -90,9 +93,13 @@ public struct InputPhoneNumber: View {
                 // Text input
                 ZStack(alignment: .leading) {
                     if text.isEmpty {
-                        MomoText(placeholder, typography: size == .small ? .headerSSemibold : .headerMBold, color: theme.colors.text.hint)
+                        MomoText(
+                            placeholder + (required ? " *" : ""),
+                            typography: size == .small ? .headerSSemibold : .headerMBold,
+                            color: theme.colors.text.hint
+                        )
                     }
-                    
+
                     TextField("", text: textBinding, onEditingChanged: { focused in
                         handleFocusChange(focused)
                     })
@@ -102,6 +109,10 @@ public struct InputPhoneNumber: View {
                     .foregroundColor(theme.colors.text.default)
                     .applyCursorColor(theme.colors.primary)
                     .lineLimit(1)
+                    .focused($isFieldFocused)
+                    .onAppear {
+                        if autofocus { isFieldFocused = true }
+                    }
                     .accessibility(identifier: accessibilityLabel ?? "")
                     .accessibilityValue(textBinding.wrappedValue.isEmpty ? placeholder : textBinding.wrappedValue)
                 }

package/ios/Input/InputSearch.swift

@@ -238,7 +238,13 @@ public struct InputSearch: View {
                     }
                     
                     if isFocused && !text.isEmpty {
-                        SwiftButton(action: { text = "" }) {
+                        SwiftButton(action: {
+                            text = ""
+                            // Kotlin's clear icon fires a callback distinct from
+                            // onChangeText (`onClearPress`, not ported here); route
+                            // through onChangeText so clearing isn't a silent no-op.
+                            onChangeText("")
+                        }) {
                             Image(systemName: "xmark.circle.fill")
                                 .foregroundColor(theme.colors.text.hint)
                                 .frame(width: 16, height: 16)

package/ios/Input/InputTextArea.swift

@@ -109,6 +109,7 @@ public struct InputTextArea: View {
     
     @State private var isFocused = false
     @State private var isBlurred = false
+    @State private var floatingLabelHeight: CGFloat = 16
     
     // Make the initializer public
     public init(
@@ -182,45 +183,88 @@ public struct InputTextArea: View {
                                 }
                             }
                             .padding(.horizontal, Spacing.S)
+                            .background(
+                                GeometryReader { geo in
+                                    Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                                }
+                            )
                             .background(theme.colors.background.surface)
-                            .offset(x: Spacing.S, y: -height / 10)
+                            // Kotlin centers the label within the box-height-tall decorationBox
+                            // by default, then applies `offsetY = -scaleHeight / 2` — net effect:
+                            // the label ends up centered exactly on the box's top border. Our
+                            // ZStack anchors top-leading instead, so matching that requires
+                            // offsetting by half the label's OWN measured height, not half the
+                            // (104pt-tall) text-area box height.
+                            .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
                             .zIndex(10)
                         }
-                        
+
                         VStack {
-                            ZStack(alignment: .topLeading) {
-                                if text.isEmpty {
-                                    Text(placeholder)
-                                        .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
-                                        .font(.system(size: 16, weight: fontWeight))
-                                        .padding(.horizontal, 16)
-                                        .padding(.vertical, 12)
+                            HStack(alignment: .top, spacing: 0) {
+                                ZStack(alignment: .topLeading) {
+                                    if text.isEmpty {
+                                        Text(placeholder)
+                                            .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
+                                            .font(.system(size: 16, weight: fontWeight))
+                                            .padding(.horizontal, 16)
+                                            .padding(.vertical, 12)
+                                    }
+
+                                    UITextViewWrapper(
+                                        text: $text,
+                                        maxLength: maxLength,
+                                        textColor: disabled ? theme.colors.text.disable : theme.colors.text.default,
+                                        cursorColor: theme.colors.primary,
+                                        fontWeight: fontWeight,
+                                        disabled: disabled,
+                                        onChangeText: onChangeText,
+                                        onDone: {
+                                        // Handle done action if needed
+                                    },
+                                    onFocus: {
+                                        isFocused = true
+                                        onFocus()
+                                    }, onBlur: {
+                                        isFocused = false
+                                        isBlurred = true
+                                        onBlur()
+                                    })
+                                    .frame(height: height)
+                                    .padding(.horizontal, 12)
+                                    .padding(.vertical, 8)
+                                    .disabled(disabled)
                                 }
-                                
-                                UITextViewWrapper(
-                                    text: $text,
-                                    maxLength: maxLength,
-                                    textColor: disabled ? theme.colors.text.disable : theme.colors.text.default,
-                                    cursorColor: theme.colors.primary,
-                                    fontWeight: fontWeight,
-                                    disabled: disabled,
-                                    onChangeText: onChangeText,
-                                    onDone: {
-                                    // Handle done action if needed
-                                },
-                                onFocus: {
-                                    isFocused = true
-                                    onFocus()
-                                }, onBlur: {
-                                    isFocused = false
-                                    isBlurred = true
-                                    onBlur()
-                                })
-                                .frame(height: height)
-                                .padding(.horizontal, 12)
-                                .padding(.vertical, 8)
-                                .disabled(disabled)                            }
-                            
+                                .frame(maxWidth: .infinity)
+
+                                // Clear button (mirrors Compose: focused + non-empty).
+                                if isFocused && !text.isEmpty {
+                                    SwiftUI.Button(action: {
+                                        text = ""
+                                        onChangeText("")
+                                    }) {
+                                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
+                                    }
+                                    .padding(.leading, Spacing.XS)
+                                    .padding(.top, 12)
+                                }
+
+                                // Loading indicator and right icon (independent, mirrors
+                                // Compose's RenderRightIcon: both can render at once).
+                                if loading {
+                                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                                        .frame(width: 16, height: 16)
+                                        .padding(.leading, Spacing.XS)
+                                        .padding(.top, 12)
+                                }
+                                if !icon.isEmpty {
+                                    SwiftUI.Button(action: onRightIconPressed) {
+                                        Icon(source: icon, size: 24, color: disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default))
+                                    }
+                                    .padding(.leading, Spacing.XS)
+                                    .padding(.top, 12)
+                                }
+                            }
+
                             HStack {
                                 Spacer()
                                 MomoText("\(text.count)/\(maxLength)", typography: .descriptionXsRegular, color: theme.colors.text.hint)

package/ios/InputDropDown/InputDropDown.swift

@@ -16,10 +16,13 @@ private struct RenderRightIcon: View {
     let onPressed: () -> Void
 
     var body: some View {
+        // Mirrors Compose's two independent `if` blocks: loading spinner and icon
+        // can both render at once, not exclusively (not an if/else).
         if loading {
             ActivityIndicator(isAnimating: .constant(true), style: .medium)
                 .frame(width: 16, height: 16)
-        } else if !icon.isEmpty {
+        }
+        if !icon.isEmpty {
             SwiftUI.Button(action: onPressed) {
                 Icon(source: icon, size: 24, color: color)
             }

package/ios/InputMoney/InputMoney.swift

@@ -75,6 +75,7 @@ public struct InputMoney: View {
     public var onBlur: (() -> Void)?
 
     @State private var isFocused: Bool = false
+    @State private var floatingLabelHeight: CGFloat = 16
 
     public init(
         text: Binding<String>,
@@ -141,8 +142,18 @@ public struct InputMoney: View {
                         }
                     }
                     .padding(.horizontal, Spacing.S)
+                    .background(
+                        GeometryReader { geo in
+                            Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                        }
+                    )
                     .background(theme.colors.background.surface)
-                    .offset(x: Spacing.S, y: -8)
+                    // Kotlin centers the label within the box-height-tall decorationBox by
+                    // default, then applies `offsetY = -size.values.height / 2` — net effect:
+                    // the label ends up centered exactly on the box's top border. Our ZStack
+                    // anchors top-leading instead, so matching that requires offsetting by
+                    // half the label's OWN measured height, not half the box height.
+                    .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
                     .zIndex(10)
                 }
 
@@ -188,13 +199,14 @@ public struct InputMoney: View {
                         }
                     }
 
-                    // Loading indicator
+                    // Loading indicator and right icon can both render (mirrors
+                    // Compose's two independent `if` blocks, not if/else).
                     if loading {
                         ActivityIndicator(isAnimating: .constant(true), style: .medium)
                             .frame(width: 16, height: 16)
                             .padding(.leading, Spacing.S)
-                    } else if !icon.isEmpty {
-                        // Right icon
+                    }
+                    if !icon.isEmpty {
                         SwiftUI.Button(action: { onPressIcon?() }) {
                             Icon(source: icon, size: 24, color: iconTintColor)
                                 .padding(.leading, Spacing.S)

package/ios/Popup/PopupDisplay.swift

@@ -54,6 +54,8 @@ extension View {
 // MARK: - PopupDisplay
 
 public struct PopupDisplay: View {
+    @EnvironmentObject private var localize: Localize
+
     // 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) {
@@ -91,9 +93,6 @@ public struct PopupDisplay: View {
     @State private var isScrollable = false
     
     public var body: some View {
-        let language = UserDefaults.standard.string(forKey: "language")?.replacingOccurrences(of: "\"", with: "") ?? "vi"
-        let errorCodeLabels: [String: String] = ["vi": "Mã lỗi: ", "en": "Error code: "]
-        
         var shouldUseColumn: Bool {
             buttonDirection == .column || (buttonDirection == .auto && (closeButtonTitle.count > 12 || actionButtonTitle.count > 12))
         }
@@ -170,7 +169,7 @@ public struct PopupDisplay: View {
                         .padding(.bottom, 8)
                         
                         if(!errorCode.isEmpty) {
-                            MomoText((errorCodeLabels[language] ?? "Mã lỗi: ") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
+                            MomoText(localize.translate("errorCode") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
                                 .lineLimit(1)
                                 .padding(.bottom, 8)
                         }

package/ios/Popup/PopupNotify.swift

@@ -38,15 +38,14 @@ public struct PopupNotifyProps {
 }
 
 public struct PopupNotify: View {
+    @EnvironmentObject private var localize: Localize
+
     public let props: PopupNotifyProps
 
     @State private var descriptionHeight: CGFloat = 0
 
     private var errorCodePrefix: String {
-        let language = UserDefaults.standard
-            .string(forKey: "language")?
-            .replacingOccurrences(of: "\"", with: "") ?? "vi"
-        return language == "en" ? "Error code: " : "Mã lỗi: "
+        localize.translate("errorCode")
     }
 
     private var maxDescriptionHeight: CGFloat {