@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

package/ios/Input/Input.swift

@@ -3,12 +3,14 @@ import SwiftUI
 import Combine
 
 public struct Input: View {
+    @Environment(\.appTheme) private var theme
     @Binding public var text: String
     
     public var placeholder: String
     public var floatingValue: String
+    public var floatingValueColor: Color?
     public var floatingIcon: String
-    public var floatingIconColor: Color
+    public var floatingIconColor: Color?
     public var size: InputSize
     public var hintText: String
     public var error: String
@@ -17,9 +19,9 @@ public struct Input: View {
     public var readOnly: Bool
     public var secureTextEntry: Bool
     public var rightIcon: String
-    public var rightIconColor: Color
+    public var rightIconColor: Color?
     public var leadingIcon: String
-    public var leadingIconColor: Color
+    public var leadingIconColor: Color?
     public var loading: Bool
     public var required: Bool
     public var maxLength: Int?
@@ -33,13 +35,16 @@ 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 = "",
         floatingValue: String = "",
+        floatingValueColor: Color? = nil,
         floatingIcon: String = "",
-        floatingIconColor: Color = Colors.primary,
+        floatingIconColor: Color? = nil,
         size: InputSize = .small,
         hintText: String = "",
         error: String = "",
@@ -48,9 +53,9 @@ public struct Input: View {
         readOnly: Bool = false,
         secureTextEntry: Bool = false,
         rightIcon: String = "",
-        rightIconColor: Color = Colors.black17,
+        rightIconColor: Color? = nil,
         leadingIcon: String = "",
-        leadingIconColor: Color = Colors.black12,
+        leadingIconColor: Color? = nil,
         loading: Bool = false,
         required: Bool = false,
         maxLength: Int? = nil,
@@ -65,6 +70,7 @@ public struct Input: View {
         self._text = text
         self.placeholder = placeholder
         self.floatingValue = floatingValue
+        self.floatingValueColor = floatingValueColor
         self.floatingIcon = floatingIcon
         self.floatingIconColor = floatingIconColor
         self.size = size
@@ -95,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)
             }
         )
 
@@ -107,15 +118,26 @@ public struct Input: View {
                     HStack(spacing: Spacing.XS) {
                         MomoText(floatingValue, typography: .labelSMedium, color: getFloatingColor())
                         if required {
-                            MomoText("*", typography: .labelSMedium, color: Colors.red03)
+                            MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
                         }
                         if !floatingIcon.isEmpty {
                             Icon(source: floatingIcon, size: 16, color: getFloatingIconColor())
                         }
                     }
                     .padding(.horizontal, Spacing.S)
-                    .background(Colors.black01)
-                    .offset(x: Spacing.S, y: -8)
+                    .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)
                 }
                 
@@ -123,7 +145,7 @@ public struct Input: View {
                 HStack(alignment: .center, spacing: 0) {
                     // Leading icon
                     if !leadingIcon.isEmpty {
-                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: leadingIconColor)
+                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: getLeadingIconColor())
                             .padding(.trailing, Spacing.M)
                     }
                     
@@ -144,8 +166,10 @@ public struct Input: View {
                                 fontSize: scaleSize(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)
                                 },
@@ -160,12 +184,10 @@ public struct Input: View {
                             .ignoreBoldTextSetting()
                             .foregroundColor(getTextColor())
                             .disabled(disabled || readOnly)
-                            .applyPrimaryCursorColor()
-                            .onChange(of: text) { newValue in
-                                let limited = limitText(newValue)
-                                if limited != newValue {
-                                    text = limited
-                                }
+                            .applyCursorColor(theme.colors.primary)
+                            .focused($isFieldFocused)
+                            .onAppear {
+                                if autofocus { isFieldFocused = true }
                             }
                         }
                     }
@@ -176,7 +198,7 @@ public struct Input: View {
                             text = ""
                             onChangeText?("")
                         }) {
-                            Icon(source: "24_navigation_close_circle_full", size: 16, color: Colors.black12)
+                            Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
                                 .padding(.leading, Spacing.S).accessibility(identifier: "ic_clear")
                         }
                     }
@@ -195,14 +217,14 @@ public struct Input: View {
                                 Icon(
                                     source: isPasswordHidden ? "24_security_eye_off" : "24_security_eye_open",
                                     size: 24,
-                                    color: rightIconColor
+                                    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: rightIconColor)
+                            Icon(source: rightIcon, size: 24, color: getRightIconColor())
                                 .padding(.leading, Spacing.S)
                         }
                     }
@@ -211,7 +233,7 @@ public struct Input: View {
                 .frame(height: scaleSize(size == .small ? 48 : 56, 1.1))
                 .background(
                     RoundedRectangle(cornerRadius: Radius.S)
-                        .fill(Colors.black01)
+                        .fill(theme.colors.background.surface)
                 )
                 .overlay(
                     RoundedRectangle(cornerRadius: Radius.S)
@@ -260,31 +282,39 @@ public struct Input: View {
     
     private func borderColor() -> Color {
         if disabled {
-            return Colors.black04 // border.disable
+            return theme.colors.border.disable
         }
         if !error.isEmpty {
-            return Colors.red03 // error.primary
+            return theme.colors.error.primary
         }
         if isFocused {
-            return Colors.primary
+            return theme.colors.primary
         }
-        return Colors.black04 // border.default
+        return theme.colors.border.default
     }
     
     private func getTextColor() -> Color {
-        return disabled ? Colors.black09 : Colors.black17
+        return disabled ? theme.colors.text.disable : theme.colors.text.default
     }
     
     private func getPlaceholderColor() -> Color {
-        return disabled ? Colors.black09 : Colors.black12
+        return disabled ? theme.colors.text.disable : theme.colors.text.hint
     }
     
     private func getFloatingColor() -> Color {
-        return disabled ? Colors.black09 : Colors.black12
+        return disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
     }
     
     private func getFloatingIconColor() -> Color {
-        return disabled ? Colors.black09 : floatingIconColor
+        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)
     }
 }
 
@@ -296,8 +326,10 @@ private struct SecureInputField: UIViewRepresentable {
     var fontSize: CGFloat
     var fontWeight: UIFont.Weight
     var textColor: UIColor
+    var cursorColor: UIColor
     var isDisabled: Bool
     var maxLength: Int?
+    var autofocus: Bool = false
     var onFocusChange: (Bool) -> Void
     var onChangeText: ((String) -> Void)?
 
@@ -316,12 +348,17 @@ private struct SecureInputField: UIViewRepresentable {
         textField.setContentHuggingPriority(.defaultLow, for: .horizontal)
         textField.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
         textField.text = text
-        textField.tintColor = UIColor(Colors.primary)
+        textField.tintColor = cursorColor
         textField.addTarget(
             context.coordinator,
             action: #selector(Coordinator.textFieldDidChange(_:)),
             for: .editingChanged
         )
+        if autofocus {
+            DispatchQueue.main.async {
+                textField.becomeFirstResponder()
+            }
+        }
         return textField
     }
 
@@ -331,6 +368,8 @@ private struct SecureInputField: UIViewRepresentable {
             textField.text = text
         }
         textField.isEnabled = !isDisabled
+        textField.textColor = textColor
+        textField.tintColor = cursorColor
         if textField.keyboardType != keyboardType {
             textField.keyboardType = keyboardType
             textField.reloadInputViews()
@@ -401,9 +440,9 @@ private struct SecureInputField: UIViewRepresentable {
 
 // MARK: - Helper Extension
 private extension View {
-    func applyPrimaryCursorColor() -> some View {
+    func applyCursorColor(_ color: Color) -> some View {
         if #available(iOS 15.0, *) {
-            return self.tint(Colors.primary)
+            return self.tint(color)
         } else {
             return self
         }

package/ios/Input/InputPhoneNumber.swift

@@ -7,23 +7,27 @@
 
 import SwiftUI
 public struct InputPhoneNumber: View {
+    @Environment(\.appTheme) private var theme
     @Binding public var text: String
     
     public var placeholder: String
     public var size: InputSize
     public var hintText: String
     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 rightIconColor: Color?
     public var autofocus: Bool
     public var onChangeText: ((String) -> Void)?
     public var onFocus: (() -> Void)?
     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>,
@@ -31,10 +35,11 @@ public struct InputPhoneNumber: View {
         size: InputSize = .small,
         hintText: String = "",
         error: String = "",
+        errorSpacing: Bool = false,
         loading: Bool = false,
         required: Bool = false,
         rightIcon: String = "",
-        rightIconColor: Color = Colors.black12,
+        rightIconColor: Color? = nil,
         autofocus: Bool = false,
         onChangeText: ((String) -> Void)? = nil,
         onFocus: (() -> Void)? = nil,
@@ -47,7 +52,9 @@ public struct InputPhoneNumber: View {
         self.size = size
         self.hintText = hintText
         self.error = error
+        self.errorSpacing = errorSpacing
         self.loading = loading
+        self.required = required
         self.rightIcon = rightIcon
         self.rightIconColor = rightIconColor
         self.autofocus = autofocus
@@ -76,28 +83,36 @@ public struct InputPhoneNumber: View {
                     .padding(.trailing, Spacing.XS)
                 
                 MomoText("+84", typography: size == .small ? .headerSSemibold : .headerMBold)
-                    .foregroundColor(Colors.black17)
+                    .foregroundColor(theme.colors.text.default)
                 
                 Rectangle()
-                    .fill(Colors.black04)
+                    .fill(theme.colors.border.default)
                     .frame(width: 1, height: size == .small ? 24 : 32)
                     .padding(.horizontal, Spacing.M)
                 
                 // Text input
                 ZStack(alignment: .leading) {
                     if text.isEmpty {
-                        MomoText(placeholder, typography: size == .small ? .headerSSemibold : .headerMBold, color: Colors.black12)
+                        MomoText(
+                            placeholder + (required ? " *" : ""),
+                            typography: size == .small ? .headerSSemibold : .headerMBold,
+                            color: theme.colors.text.hint
+                        )
                     }
-                    
+
                     TextField("", text: textBinding, onEditingChanged: { focused in
                         handleFocusChange(focused)
                     })
                     .keyboardType(.numberPad)
                     .font(size == .small ? .header_s_semibold : .header_m_bold)
                     .ignoreBoldTextSetting()
-                    .foregroundColor(Colors.black17)
-                    .applyPrimaryCursorColor()
+                    .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)
                 }
@@ -108,7 +123,7 @@ public struct InputPhoneNumber: View {
                         text = ""
                         onChangeText?("")
                     }) {
-                        Icon(source: "24_navigation_close_circle_full", size: 16, color: Colors.black12)
+                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
                             .padding(.leading, Spacing.S).accessibility(identifier: "ic_clear")
                     }
                 }
@@ -122,7 +137,7 @@ public struct InputPhoneNumber: View {
                 // ✅ Right icon
                 if !rightIcon.isEmpty {
                     SwiftUI.Button(action: { onRightIconPressed?() }) {
-                        Icon(source: rightIcon, size: 24, color: rightIconColor)
+                        Icon(source: rightIcon, size: 24, color: rightIconColor ?? theme.colors.text.default)
                             .padding(.leading, Spacing.S)
                     }
                 }
@@ -131,7 +146,7 @@ public struct InputPhoneNumber: View {
             .frame(height: scaleSize(size == .small ? 48 : 56, 1.1))
             .background(
                 RoundedRectangle(cornerRadius: Radius.S)
-                    .fill(Colors.black01)
+                    .fill(theme.colors.background.surface)
             )
             .overlay(
                 RoundedRectangle(cornerRadius: Radius.S)
@@ -141,7 +156,7 @@ public struct InputPhoneNumber: View {
             // Error or hint
             ErrorView(
                 errorMessage: error,
-                errorSpacing: false,
+                errorSpacing: errorSpacing,
                 hintText: hintText
             )
         }
@@ -159,21 +174,18 @@ public struct InputPhoneNumber: View {
     }
     
     private func borderColor() -> Color {
-        if !error.isEmpty { return Colors.red03 }
-        if isFocused { return Colors.primary }
-        return Colors.black04
+        if !error.isEmpty { return theme.colors.error.primary }
+        if isFocused { return theme.colors.primary }
+        return theme.colors.border.default
     }
 }
 
 private extension View {
-    func applyPrimaryCursorColor() -> some View {
+    func applyCursorColor(_ color: Color) -> some View {
         if #available(iOS 15.0, *) {
-            // Modern SwiftUI: use .tint() for cursor
-            return self.tint(Colors.primary)
+            return self.tint(color)
         } else {
-            // iOS 13–14: return unchanged (no tint support)
             return self
         }
     }
 }
-