@momo-kits/native-kits 0.167.1-duo.8 → 0.167.1-duo.9-debug

package/ios/Input/Input.swift

@@ -37,8 +37,7 @@ 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>,
         placeholder: String = "",
@@ -112,142 +111,115 @@ public struct Input: View {
             }
         )
 
-        VStack(alignment: .leading, spacing: 4) {
-            ZStack(alignment: .topLeading) {
-                // Floating label
-                if !floatingValue.isEmpty || !floatingIcon.isEmpty {
-                    HStack(spacing: Spacing.XS) {
-                        MomoText(floatingValue, typography: .labelSMedium, color: getFloatingColor())
-                        if required {
-                            MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
-                        }
-                        if !floatingIcon.isEmpty {
-                            Icon(source: floatingIcon, size: 16, color: getFloatingIconColor())
-                        }
-                    }
-                    .padding(.horizontal, Spacing.S)
-                    .background(
-                        GeometryReader { geo in
-                            Color.clear.onAppear { floatingLabelHeight = geo.size.height }
-                        }
-                    )
-                    .background(theme.colors.background.surface)
-                    // 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)
+        VStack(alignment: .leading, spacing: 0) {
+            // Input container
+            HStack(alignment: .center, spacing: 0) {
+                // Leading icon
+                if !leadingIcon.isEmpty {
+                    Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: leadingIconColor ?? theme.colors.text.hint)
+                        .padding(.trailing, Spacing.M)
                 }
-                
-                // Input container
-                HStack(alignment: .center, spacing: 0) {
-                    // Leading icon
-                    if !leadingIcon.isEmpty {
-                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: getLeadingIconColor())
-                            .padding(.trailing, Spacing.M)
+
+                // Text input field
+                ZStack(alignment: .leading) {
+                    if text.isEmpty {
+                        MomoText(
+                            placeholder + (required && floatingValue.isEmpty ? " *" : ""),
+                            typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
+                            color: getPlaceholderColor()
+                        )
                     }
-                    
-                    // Text input field
-                    ZStack(alignment: .leading) {
-                        if text.isEmpty {
-                            MomoText(
-                                placeholder + (required && floatingValue.isEmpty ? " *" : ""),
-                                typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
-                                color: getPlaceholderColor()
-                            )
-                        }
-                        
-                        if secureTextEntry && isPasswordHidden {
-                            SecureInputField(
-                                text: $text,
-                                keyboardType: keyboardType,
-                                fontSize: fontScale(14),
-                                fontWeight: fontWeight == .bold ? .bold : .regular,
-                                textColor: UIColor(getTextColor()),
-                                cursorColor: UIColor(theme.colors.primary),
-                                isDisabled: disabled || readOnly,
-                                maxLength: maxLength,
-                                autofocus: autofocus,
-                                onFocusChange: { focused in
-                                    handleFocusChange(focused)
-                                },
-                                onChangeText: onChangeText
-                            )
-                        } else {
-                            TextField("", text: textBinding, onEditingChanged: { focused in
+
+                    // One UITextField for both states: swapping views on the eye toggle would drop focus.
+                    if secureTextEntry {
+                        SecureInputField(
+                            text: $text,
+                            isSecure: isPasswordHidden,
+                            keyboardType: keyboardType,
+                            fontSize: fontScale(14),
+                            fontWeight: fontWeight == .bold ? .bold : .regular,
+                            textColor: UIColor(getTextColor()),
+                            cursorColor: UIColor(theme.colors.primary),
+                            isDisabled: disabled || readOnly,
+                            maxLength: maxLength,
+                            autofocus: autofocus,
+                            onFocusChange: { focused in
                                 handleFocusChange(focused)
-                            })
-                            .keyboardType(keyboardType)
-                            .font(fontWeight == .bold ? .action_s_bold : .body_default_regular)
-                            .ignoreBoldTextSetting()
-                            .foregroundColor(getTextColor())
-                            .disabled(disabled || readOnly)
-                            .applyCursorColor(theme.colors.primary)
-                            .focused($isFieldFocused)
-                            .onAppear {
-                                if autofocus { isFieldFocused = true }
-                            }
-                            // SwiftUI reads a TextField's UIKit input traits only when it
-                            // builds the backing UITextField, so a later `keyboardType`
-                            // change is silently dropped. The secure path can call
-                            // `reloadInputViews()` in `updateUIView`; here the only lever
-                            // is to force a rebuild.
-                            .id(keyboardType.rawValue)
+                            },
+                            onChangeText: onChangeText
+                        )
+                    } else {
+                        TextField("", text: textBinding, onEditingChanged: { focused in
+                            handleFocusChange(focused)
+                        })
+                        .keyboardType(keyboardType)
+                        .font(fontScale.font(size: 14, weight: fontWeight == .bold ? .bold : .regular))
+                        .ignoreBoldTextSetting()
+                        .foregroundColor(getTextColor())
+                        .disabled(disabled || readOnly)
+                        .applyCursorColor(theme.colors.primary)
+                        .focused($isFieldFocused)
+                        .onAppear {
+                            if autofocus { isFieldFocused = true }
                         }
+                        // SwiftUI reads a TextField's UIKit input traits only when it
+                        // builds the backing UITextField, so a later `keyboardType`
+                        // change is silently dropped. The secure path can call
+                        // `reloadInputViews()` in `updateUIView`; here the only lever
+                        // is to force a rebuild.
+                        .id(keyboardType.rawValue)
                     }
-                    
-                    // Clear button (only show when focused and has text)
-                    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.S).accessibility(identifier: "ic_clear")
-                        }
+                }
+
+                // Clear button (only show when focused and has text)
+                if isFocused && !text.isEmpty {
+                    SwiftUI.Button(action: {
+                        text = ""
+                        onChangeText?("")
+                    }) {
+                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
+                            .padding(.horizontal, Spacing.XS)
                     }
-                    
-                    // Loading indicator
-                    if loading {
-                        ActivityIndicator(isAnimating: .constant(true), style: .medium)
-                            .frame(width: 16, height: 16)
-                            .padding(.leading, Spacing.S)
+                    .accessibilityIdentifier("ic_clear")
+                }
+
+                // Loading indicator
+                if loading {
+                    ActivityIndicator(isAnimating: .constant(true), style: .medium, color: getRightIconColor())
+                        .frame(width: 16, height: 16)
+                        .padding(.leading, Spacing.S)
+                }
+
+                // Right icon: password toggle once there is text, otherwise the custom icon (as Compose)
+                if secureTextEntry && !text.isEmpty {
+                    SwiftUI.Button(action: togglePasswordVisibility) {
+                        Icon(
+                            source: isPasswordHidden ? "24_security_eye_off" : "24_security_eye_open",
+                            size: 24,
+                            color: getRightIconColor()
+                        )
+                        .padding(.leading, Spacing.S)
                     }
-                    
-                    // Right icon (password toggle or custom icon)
-                    if secureTextEntry {
-                        if !text.isEmpty {
-                            SwiftUI.Button(action: togglePasswordVisibility) {
-                                Icon(
-                                    source: isPasswordHidden ? "24_security_eye_off" : "24_security_eye_open",
-                                    size: 24,
-                                    color: getRightIconColor()
-                                )
-                                .padding(.leading, Spacing.S).accessibility(identifier: "ic_show_hide")
-                            }
-                        }
-                    } else if !rightIcon.isEmpty {
-                        SwiftUI.Button(action: { onRightIconPressed?() }) {
-                            Icon(source: rightIcon, size: 24, color: getRightIconColor())
-                                .padding(.leading, Spacing.S)
-                        }
+                    .accessibilityIdentifier("ic_show_hide")
+                } else if !rightIcon.isEmpty {
+                    SwiftUI.Button(action: { onRightIconPressed?() }) {
+                        Icon(source: rightIcon, size: 24, color: getRightIconColor())
+                            .padding(.leading, Spacing.S)
                     }
                 }
-                .padding(.horizontal, Spacing.M)
-                .frame(height: fontScale(size == .small ? 48 : 56))
-                .background(
-                    RoundedRectangle(cornerRadius: Radius.S)
-                        .fill(theme.colors.background.surface)
-                )
-                .overlay(
-                    RoundedRectangle(cornerRadius: Radius.S)
-                        .stroke(borderColor(), lineWidth: 1)
-                )
             }
-            
+            .padding(.horizontal, Spacing.M)
+            .frame(height: fontScale(size == .small ? 48 : 56))
+            .background(
+                RoundedRectangle(cornerRadius: Radius.S)
+                    .fill(theme.colors.background.surface)
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.S)
+                    .stroke(borderColor(), lineWidth: 1)
+            )
+            .overlay(alignment: .topLeading) { floatingLabel }
+
             // Error or hint
             ErrorView(
                 errorMessage: error,
@@ -263,10 +235,33 @@ public struct Input: View {
             }
         }
     }
-    
+
+    /// Centered on the box's top border, like Compose's `FloatingLabel` (offset by -height / 2).
+    @ViewBuilder
+    private var floatingLabel: some View {
+        if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+            HStack(spacing: 0) {
+                MomoText(floatingValue, typography: .labelSMedium, color: getFloatingColor())
+                if required {
+                    MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                }
+                if !floatingIcon.isEmpty {
+                    Icon(source: floatingIcon, size: 16, color: getFloatingIconColor())
+                        .padding(.leading, Spacing.XS)
+                }
+            }
+            .padding(.horizontal, Spacing.S)
+            .background(theme.colors.background.surface)
+            .alignmentGuide(.top) { $0[VerticalAlignment.center] }
+            .offset(x: Spacing.S)
+        }
+    }
+
     // MARK: - Helpers
-    
+
     private func handleFocusChange(_ focused: Bool) {
+        // The keyboard-hide fallback can report a blur the field already reported.
+        guard focused != isFocused else { return }
         isFocused = focused
         if focused {
             onFocus?()
@@ -316,10 +311,6 @@ public struct Input: View {
         return disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
     }
 
-    private func getLeadingIconColor() -> Color {
-        return disabled ? theme.colors.text.disable : (leadingIconColor ?? theme.colors.text.hint)
-    }
-
     private func getRightIconColor() -> Color {
         return disabled ? theme.colors.text.disable : (rightIconColor ?? theme.colors.text.default)
     }
@@ -329,6 +320,7 @@ public struct Input: View {
 // MARK: - Secure Input Field (UIViewRepresentable)
 private struct SecureInputField: UIViewRepresentable {
     @Binding var text: String
+    var isSecure: Bool
     var keyboardType: UIKeyboardType
     var fontSize: CGFloat
     var fontWeight: UIFont.Weight
@@ -346,7 +338,11 @@ private struct SecureInputField: UIViewRepresentable {
 
     func makeUIView(context: Context) -> UITextField {
         let textField = UITextField()
-        textField.isSecureTextEntry = true
+        textField.isSecureTextEntry = isSecure
+        // Stays a password field while revealed: keep it out of autocorrect / QuickType learning.
+        textField.autocorrectionType = .no
+        textField.autocapitalizationType = .none
+        textField.spellCheckingType = .no
         textField.delegate = context.coordinator
         textField.keyboardType = keyboardType
         textField.font = UIFont.systemFont(ofSize: fontSize, weight: fontWeight)
@@ -374,6 +370,10 @@ private struct SecureInputField: UIViewRepresentable {
         if textField.text != text {
             textField.text = text
         }
+        let font = UIFont.systemFont(ofSize: fontSize, weight: fontWeight)
+        if textField.font != font {
+            textField.font = font
+        }
         textField.isEnabled = !isDisabled
         textField.textColor = textColor
         textField.tintColor = cursorColor
@@ -381,6 +381,12 @@ private struct SecureInputField: UIViewRepresentable {
             textField.keyboardType = keyboardType
             textField.reloadInputViews()
         }
+        if textField.isSecureTextEntry != isSecure {
+            textField.isSecureTextEntry = isSecure
+            if textField.isFirstResponder {
+                context.coordinator.reinsertText(in: textField)
+            }
+        }
     }
 
     class Coordinator: NSObject, UITextFieldDelegate {
@@ -391,19 +397,21 @@ private struct SecureInputField: UIViewRepresentable {
             self.parent = parent
         }
 
-        func textFieldDidBeginEditing(_ textField: UITextField) {
+        // When a secure text field regains focus (or turns secure while editing),
+        // iOS marks the existing text as "committed" and the next keystroke would
+        // replace ALL of it. Re-inserting via insertText() puts it back into an
+        // "active editing" state (and moves the caret to the end).
+        func reinsertText(in textField: UITextField) {
             let existingText = textField.text ?? ""
-            if !existingText.isEmpty {
-                // When a secure text field regains focus, iOS marks the
-                // existing text as "committed". The next keystroke would
-                // replace ALL committed text with the new character.
-                // Prevent this by clearing and re-inserting via insertText(),
-                // which puts the text into an "active editing" state.
-                isResettingText = true
-                textField.text = ""
-                textField.insertText(existingText)
-                isResettingText = false
-            }
+            guard !existingText.isEmpty else { return }
+            isResettingText = true
+            textField.text = ""
+            textField.insertText(existingText)
+            isResettingText = false
+        }
+
+        func textFieldDidBeginEditing(_ textField: UITextField) {
+            reinsertText(in: textField)
             parent.onFocusChange(true)
         }
 
@@ -460,12 +468,17 @@ private extension View {
 struct ActivityIndicator: UIViewRepresentable {
     @Binding var isAnimating: Bool
     let style: UIActivityIndicatorView.Style
+    /// Compose tints the spinner with the right-icon color; nil keeps the system gray.
+    var color: Color? = nil
 
     func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
         return UIActivityIndicatorView(style: style)
     }
 
     func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
+        if let color {
+            uiView.color = UIColor(color)
+        }
         isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
     }
 }

package/ios/Input/InputPhoneNumber.swift

@@ -76,16 +76,15 @@ public struct InputPhoneNumber: View {
             }
         )
         
-        VStack(alignment: .leading, spacing: 4) {
+        VStack(alignment: .leading, spacing: 0) {
             HStack(spacing: 0) {
                 // 🇻🇳 Flag
                 ImageView("https://static.momocdn.net/app/img/icon/ic-qrcode-package/ic_vn_flag.png")
                     .frame(width: 24, height: 24)
                     .padding(.trailing, Spacing.XS)
-                
-                MomoText("+84", typography: size == .small ? .headerSSemibold : .headerMBold)
-                    .foregroundColor(theme.colors.text.default)
-                
+
+                MomoText("+84", typography: size == .small ? .headerSSemibold : .headerMBold, color: theme.colors.text.default)
+
                 Rectangle()
                     .fill(theme.colors.border.default)
                     .frame(width: 1, height: size == .small ? 24 : 32)
@@ -105,7 +104,9 @@ public struct InputPhoneNumber: View {
                         handleFocusChange(focused)
                     })
                     .keyboardType(.numberPad)
-                    .font(size == .small ? .header_s_semibold : .header_m_bold)
+                    .font(size == .small
+                          ? fontScale.font(size: 14, weight: .semibold)
+                          : fontScale.font(size: 18, weight: .bold))
                     .ignoreBoldTextSetting()
                     .foregroundColor(theme.colors.text.default)
                     .applyCursorColor(theme.colors.primary)
@@ -125,13 +126,14 @@ public struct InputPhoneNumber: View {
                         onChangeText?("")
                     }) {
                         Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
-                            .padding(.leading, Spacing.S).accessibility(identifier: "ic_clear")
+                            .padding(.horizontal, Spacing.S)
                     }
+                    .accessibilityIdentifier("ic_clear")
                 }
-                
+
                 // Loading indicator
                 if loading {
-                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                    ActivityIndicator(isAnimating: .constant(true), style: .medium, color: rightIconColor ?? theme.colors.text.default)
                         .frame(width: 16, height: 16)
                 }
                 
@@ -166,6 +168,7 @@ public struct InputPhoneNumber: View {
     // MARK: - Helpers
     
     private func handleFocusChange(_ focused: Bool) {
+        guard focused != isFocused else { return }
         isFocused = focused
         if focused {
             onFocus?()