@momo-kits/native-kits 0.163.1-beta.3-debug → 0.163.1-beta.5-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?
@@ -38,8 +40,9 @@ public struct Input: View {
         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 +51,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 +68,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
@@ -107,14 +111,14 @@ 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)
+                    .background(theme.colors.background.surface)
                     .offset(x: Spacing.S, y: -8)
                     .zIndex(10)
                 }
@@ -123,7 +127,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,6 +148,7 @@ 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,
                                 onFocusChange: { focused in
@@ -160,7 +165,7 @@ public struct Input: View {
                             .ignoreBoldTextSetting()
                             .foregroundColor(getTextColor())
                             .disabled(disabled || readOnly)
-                            .applyPrimaryCursorColor()
+                            .applyCursorColor(theme.colors.primary)
                             .onChange(of: text) { newValue in
                                 let limited = limitText(newValue)
                                 if limited != newValue {
@@ -176,7 +181,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 +200,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 +216,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 +265,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,6 +309,7 @@ private struct SecureInputField: UIViewRepresentable {
     var fontSize: CGFloat
     var fontWeight: UIFont.Weight
     var textColor: UIColor
+    var cursorColor: UIColor
     var isDisabled: Bool
     var maxLength: Int?
     var onFocusChange: (Bool) -> Void
@@ -316,7 +330,7 @@ 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(_:)),
@@ -331,6 +345,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 +417,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,15 +7,17 @@
 
 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 rightIcon: String
-    public var rightIconColor: Color
+    public var rightIconColor: Color?
     public var autofocus: Bool
     public var onChangeText: ((String) -> Void)?
     public var onFocus: (() -> Void)?
@@ -31,10 +33,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,6 +50,7 @@ public struct InputPhoneNumber: View {
         self.size = size
         self.hintText = hintText
         self.error = error
+        self.errorSpacing = errorSpacing
         self.loading = loading
         self.rightIcon = rightIcon
         self.rightIconColor = rightIconColor
@@ -76,17 +80,17 @@ 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, typography: size == .small ? .headerSSemibold : .headerMBold, color: theme.colors.text.hint)
                     }
                     
                     TextField("", text: textBinding, onEditingChanged: { focused in
@@ -95,8 +99,8 @@ public struct InputPhoneNumber: View {
                     .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)
                     .accessibility(identifier: accessibilityLabel ?? "")
                     .accessibilityValue(textBinding.wrappedValue.isEmpty ? placeholder : textBinding.wrappedValue)
@@ -108,7 +112,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 +126,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 +135,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 +145,7 @@ public struct InputPhoneNumber: View {
             // Error or hint
             ErrorView(
                 errorMessage: error,
-                errorSpacing: false,
+                errorSpacing: errorSpacing,
                 hintText: hintText
             )
         }
@@ -159,21 +163,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
         }
     }
 }
-

package/ios/Input/InputSearch.swift

@@ -9,11 +9,12 @@ import SwiftUI
 // MARK: - RenderRightIconSearch
 
 struct RenderRightIconSearch: View {
+    @Environment(\.appTheme) private var theme
     let loading: Bool
     let icon: String
     let color: Color
     let onClick: () -> Void
-    
+
     var body: some View {
         HStack(spacing: 0) {
             if loading {
@@ -24,12 +25,10 @@ struct RenderRightIconSearch: View {
             if !icon.isEmpty {
                 Divider()
                     .frame(width: 1)
-                    .background(Colors.primary)
+                    .background(theme.colors.primary)
                     .padding(.leading, Spacing.S)
                 
-                Image(systemName: icon)
-                    .foregroundColor(color)
-                    .frame(width: 24, height: 24)
+                Icon(source: icon, size: 24, color: color)
                     .padding(.leading, Spacing.S)
                     .onTapGesture(perform: onClick)
             }
@@ -48,14 +47,18 @@ public struct InputSearchProps {
     var error: String = ""
     var disabled: Bool = false
     var icon: String = ""
-    var iconColor: Color = Colors.text
+    var iconColor: Color? = nil
     var onRightIconPressed: () -> Void = {}
     var onFocus: () -> Void = {}
     var onBlur: () -> Void = {}
     var loading: Bool = false
     var fontWeight: Font.Weight = .regular
     var keyboardType: UIKeyboardType = .default
-    
+    // Mirrors Compose's InputSearchProps.searchIcon — a custom leading icon view.
+    var searchIcon: (() -> AnyView)? = nil
+    // Mirrors Compose's InputSearchProps.placeholderCustomRender — a custom placeholder view.
+    var placeholderCustomRender: (() -> AnyView)? = nil
+
     public init(text: Binding<String>,
                 buttonText: String = "",
                 showButtonText: Bool = false,
@@ -66,13 +69,15 @@ public struct InputSearchProps {
                 error: String = "",
                 disabled: Bool = false,
                 icon: String = "",
-                iconColor: Color = Colors.text,
+                iconColor: Color? = nil,
                 onRightIconPressed: @escaping () -> Void = {},
                 onFocus: @escaping () -> Void = {},
                 onBlur: @escaping () -> Void = {},
                 loading: Bool = false,
                 fontWeight: Font.Weight = .regular,
-                keyboardType: UIKeyboardType = .default) {
+                keyboardType: UIKeyboardType = .default,
+                searchIcon: (() -> AnyView)? = nil,
+                placeholderCustomRender: (() -> AnyView)? = nil) {
         self._text = text
         self.buttonText = buttonText
         self.showButtonText = showButtonText
@@ -90,12 +95,15 @@ public struct InputSearchProps {
         self.loading = loading
         self.fontWeight = fontWeight
         self.keyboardType = keyboardType
+        self.searchIcon = searchIcon
+        self.placeholderCustomRender = placeholderCustomRender
         }
 }
 
 // MARK: - InputSearch
 
 public struct InputSearch: View {
+    @Environment(\.appTheme) private var theme
     @Binding var text: String
     var buttonText: String = ""
     var showButtonText: Bool = false
@@ -106,17 +114,19 @@ public struct InputSearch: View {
     var error: String = ""
     var disabled: Bool = false
     var icon: String = ""
-    var iconColor: Color = Colors.text
+    var iconColor: Color? = nil
     var onRightIconPressed: () -> Void = {}
     var onFocus: () -> Void = {}
     var onBlur: () -> Void = {}
     var loading: Bool = false
     var fontWeight: Font.Weight = .regular
     var keyboardType: UIKeyboardType = .default
-    
+    var searchIcon: (() -> AnyView)? = nil
+    var placeholderCustomRender: (() -> AnyView)? = nil
+
     @State private var isFocused = false
     @State private var isBlurred = false
-    
+
     public init(text: Binding<String>,
                 buttonText: String = "",
                 showButtonText: Bool = false,
@@ -127,13 +137,15 @@ public struct InputSearch: View {
                 error: String = "",
                 disabled: Bool = false,
                 icon: String = "",
-                iconColor: Color = Colors.text,
+                iconColor: Color? = nil,
                 onRightIconPressed: @escaping () -> Void = {},
                 onFocus: @escaping () -> Void = {},
                 onBlur: @escaping () -> Void = {},
                 loading: Bool = false,
                 fontWeight: Font.Weight = .regular,
-                keyboardType: UIKeyboardType = .default) {
+                keyboardType: UIKeyboardType = .default,
+                searchIcon: (() -> AnyView)? = nil,
+                placeholderCustomRender: (() -> AnyView)? = nil) {
         self._text = text
         self.buttonText = buttonText
         self.showButtonText = showButtonText
@@ -151,24 +163,60 @@ public struct InputSearch: View {
         self.loading = loading
         self.fontWeight = fontWeight
         self.keyboardType = keyboardType
+        self.searchIcon = searchIcon
+        self.placeholderCustomRender = placeholderCustomRender
         }
 
-    
+    /// Convenience initializer mirroring Compose's `InputSearch(inputSearchProps)`.
+    public init(props: InputSearchProps) {
+        self.init(
+            text: props.$text,
+            buttonText: props.buttonText,
+            showButtonText: props.showButtonText,
+            showBorder: props.showBorder,
+            placeholder: props.placeholder,
+            onChangeText: props.onChangeText,
+            onPressButtonText: props.onPressButtonText,
+            error: props.error,
+            disabled: props.disabled,
+            icon: props.icon,
+            iconColor: props.iconColor,
+            onRightIconPressed: props.onRightIconPressed,
+            onFocus: props.onFocus,
+            onBlur: props.onBlur,
+            loading: props.loading,
+            fontWeight: props.fontWeight,
+            keyboardType: props.keyboardType,
+            searchIcon: props.searchIcon,
+            placeholderCustomRender: props.placeholderCustomRender
+        )
+    }
+
+
     public var body: some View {
+        let iconColor: Color = disabled ? theme.colors.text.disable : (self.iconColor ?? theme.colors.text.default)
         VStack(alignment: .leading, spacing: 0) {
             HStack(spacing: 0) {
                 HStack {
-                    Image(systemName: "magnifyingglass")
-                        .foregroundColor(Colors.black12)
-                        .frame(width: 24, height: 24)
-                        .padding(.trailing, Spacing.XS)
-                    
+                    if let searchIcon = searchIcon {
+                        searchIcon()
+                    } else {
+                        Image(systemName: "magnifyingglass")
+                            .foregroundColor(theme.colors.text.hint)
+                            .frame(width: 24, height: 24)
+                            .padding(.trailing, Spacing.XS)
+                    }
+
                     ZStack(alignment: .leading) {
                         if text.isEmpty {
-                            Text(placeholder)
-                                .foregroundColor(disabled ? Colors.black08 : Colors.black12)
-                                .font(.system(size: 16, weight: fontWeight))
-                                .ignoreBoldTextSetting()
+                            if let placeholderCustomRender = placeholderCustomRender {
+                                placeholderCustomRender()
+                            } else {
+                                Text(placeholder)
+                                    .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
+                                    .font(.system(size: scaleSize(14), weight: fontWeight))
+                                    .ignoreBoldTextSetting()
+                            }
                         }
                         TextField("", text: $text, onEditingChanged: { editing in
                             isFocused = editing
@@ -182,26 +230,27 @@ public struct InputSearch: View {
                             }
                         }, onCommit: {})
                         .disabled(disabled)
-                        .foregroundColor(disabled ? Colors.black08 : Colors.black17)
-                        .font(.system(size: 15, weight: fontWeight))
+                        .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.default)
+                        .font(.system(size: scaleSize(14), weight: fontWeight))
                         .ignoreBoldTextSetting()
                         .keyboardType(keyboardType)
+                        .applyCursorColor(theme.colors.primary)
                     }
                     
                     if isFocused && !text.isEmpty {
                         SwiftButton(action: { text = "" }) {
                             Image(systemName: "xmark.circle.fill")
-                                .foregroundColor(Colors.black12)
+                                .foregroundColor(theme.colors.text.hint)
                                 .frame(width: 16, height: 16)
                         }
                         .padding(.leading, Spacing.S)
                     }
                     
-                    RenderRightIconSearch(loading: loading, icon: icon, color: disabled ? Colors.black08 : iconColor, onClick: onRightIconPressed)
+                    RenderRightIconSearch(loading: loading, icon: icon, color: iconColor, onClick: onRightIconPressed)
                 }
                 .padding(.horizontal, Spacing.M)
                 .padding(.vertical, Spacing.S)
-                .background(Colors.black01)
+                .background(theme.colors.background.surface)
                 .cornerRadius(Radius.XL)
                 .overlay(
                     RoundedRectangle(cornerRadius: Radius.XL)
@@ -211,31 +260,35 @@ public struct InputSearch: View {
                 
                 if showButtonText {
                     SwiftButton(action: onPressButtonText) {
-                        Text(buttonText)
-                            .foregroundColor(Colors.black17)
-                            .font(.system(size: 14, weight: .medium))
-                            .ignoreBoldTextSetting()
+                        MomoText(buttonText, typography: .actionDefaultBold, color: theme.colors.text.default)
                     }
                     .padding(.leading, Spacing.L)
                 }
             }
         }
     }
-}
 
-// MARK: - Helper Functions
-
-func getBorderColor(isFocused: Bool, error: String, disabled: Bool) -> Color {
-    if disabled {
-        return Colors.black08
-    } else if !error.isEmpty {
-        return Colors.red03
-    } else if isFocused {
-        return Colors.primary
-    } else {
-        return Colors.black04
+    // MARK: - Helper Functions
+
+    func getBorderColor(isFocused: Bool, error: String, disabled: Bool) -> Color {
+        if disabled {
+            return theme.colors.border.disable
+        } else if !error.isEmpty {
+            return theme.colors.error.primary
+        } else if isFocused {
+            return theme.colors.primary
+        } else {
+            return theme.colors.border.default
+        }
     }
 }
 
-
-
+private extension View {
+    func applyCursorColor(_ color: Color) -> some View {
+        if #available(iOS 15.0, *) {
+            return self.tint(color)
+        } else {
+            return self
+        }
+    }
+}