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

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,33 @@ 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 = "" }) {
+                        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(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 +266,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
+        }
+    }
+}

package/ios/Input/InputTextArea.swift

@@ -12,6 +12,12 @@ public let DEFAULT_HEIGHT: CGFloat = 104
 
 struct UITextViewWrapper: UIViewRepresentable {
     @Binding var text: String
+    var maxLength: Int
+    var textColor: Color
+    var cursorColor: Color
+    var fontWeight: Font.Weight
+    var disabled: Bool
+    var onChangeText: (String) -> Void
     var onDone: (() -> Void)?
     var onFocus: (() -> Void)?
     var onBlur: (() -> Void)?
@@ -19,11 +25,20 @@ struct UITextViewWrapper: UIViewRepresentable {
     func makeUIView(context: Context) -> UITextView {
         let textView = UITextView()
         textView.delegate = context.coordinator
+        textView.backgroundColor = .clear
+        textView.textContainerInset = .zero
+        textView.textContainer.lineFragmentPadding = 0
         return textView
     }
     
     func updateUIView(_ uiView: UITextView, context: Context) {
-        uiView.text = text
+        if uiView.text != text {
+            uiView.text = text
+        }
+        uiView.textColor = UIColor(textColor)
+        uiView.tintColor = UIColor(cursorColor)
+        uiView.font = UIFont.systemFont(ofSize: scaleSize(16), weight: fontWeight == .bold ? .bold : .regular)
+        uiView.isEditable = !disabled
     }
     
     func makeCoordinator() -> Coordinator {
@@ -38,7 +53,12 @@ struct UITextViewWrapper: UIViewRepresentable {
         }
         
         func textViewDidChange(_ textView: UITextView) {
-            parent.text = textView.text
+            let limited = String(textView.text.prefix(parent.maxLength))
+            if textView.text != limited {
+                textView.text = limited
+            }
+            parent.text = limited
+            parent.onChangeText(limited)
         }
         
         func textViewDidBeginEditing(_ textView: UITextView) {
@@ -54,27 +74,31 @@ struct UITextViewWrapper: UIViewRepresentable {
                 parent.onDone?()
                 return false
             }
-            return true
+            let current = textView.text ?? ""
+            guard let range = Range(range, in: current) else { return false }
+            let proposed = current.replacingCharacters(in: range, with: text)
+            return proposed.count <= parent.maxLength
         }
     }
 }
 
 // Make the struct public
 public struct InputTextArea: View {
+    @Environment(\.appTheme) private var theme
     @Binding var text: String
     var maxLength: Int = MAX_LENGTH
     var height: CGFloat = DEFAULT_HEIGHT
     var floatingValue: String = ""
-    var floatingValueColor: Color = .gray
+    var floatingValueColor: Color?
     var floatingIcon: String = ""
-    var floatingIconColor: Color = .black
+    var floatingIconColor: Color?
     var placeholder: String = ""
     var onChangeText: (String) -> Void = { _ in }
     var error: String = ""
     var errorSpacing: Bool = false
     var disabled: Bool = false
     var icon: String = ""
-    var iconColor: Color = .black
+    var iconColor: Color?
     var onRightIconPressed: () -> Void = {}
     var onFocus: () -> Void = {}
     var onBlur: () -> Void = {}
@@ -85,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(
@@ -92,16 +117,16 @@ public struct InputTextArea: View {
         maxLength: Int = MAX_LENGTH,
         height: CGFloat = DEFAULT_HEIGHT,
         floatingValue: String = "",
-        floatingValueColor: Color = .gray,
+        floatingValueColor: Color? = nil,
         floatingIcon: String = "",
-        floatingIconColor: Color = .black,
+        floatingIconColor: Color? = nil,
         placeholder: String = "",
         onChangeText: @escaping (String) -> Void = { _ in },
         error: String = "",
         errorSpacing: Bool = false,
         disabled: Bool = false,
         icon: String = "",
-        iconColor: Color = Colors.pink03,
+        iconColor: Color? = nil,
         onRightIconPressed: @escaping () -> Void = {},
         onFocus: @escaping () -> Void = {},
         onBlur: @escaping () -> Void = {},
@@ -138,77 +163,124 @@ public struct InputTextArea: View {
                     ZStack(alignment: .topLeading) {
                         if !floatingValue.isEmpty || !floatingIcon.isEmpty {
                             HStack(spacing: 4) {
-                                Text(floatingValue)
-                                    .font(.caption)
-                                    .foregroundColor(disabled ? .gray : floatingValueColor)
+                                MomoText(
+                                    floatingValue,
+                                    typography: .labelSMedium,
+                                    color: disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint)
+                                )
                                 
                                 if required {
-                                    Text("*")
-                                        .font(.caption)
-                                        .foregroundColor(.red)
+                                    MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
                                 }
                                 
                                 if !floatingIcon.isEmpty {
-                                    Image(systemName: floatingIcon)
-                                        .font(.caption)
-                                        .foregroundColor(disabled ? .gray : floatingIconColor)
+                                    Icon(
+                                        source: floatingIcon,
+                                        size: 16,
+                                        color: disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default)
+                                    )
+                                    .padding(.leading, Spacing.XS)
                                 }
                             }
-                            .padding(.horizontal, 8)
-                            .background(Colors.black01)
-                            .offset(x: Spacing.S, y: -height / 10)
+                            .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 = -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 ? .gray : .gray)
-                                        .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, 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()
-                                Text("\(text.count)/\(maxLength)")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
+                                MomoText("\(text.count)/\(maxLength)", typography: .descriptionXsRegular, color: theme.colors.text.hint)
                             }
                             .padding(.horizontal, 16)
                             .padding(.bottom, 12)
                         }
-                        .background(Color.white)
-                        .cornerRadius(8)
+                        .background(theme.colors.background.surface)
+                        .cornerRadius(Radius.S)
                         .overlay(
-                            RoundedRectangle(cornerRadius: 8)
+                            RoundedRectangle(cornerRadius: Radius.S)
                                 .stroke(borderColor, lineWidth: 1)
                         )
                     }
                     
-                    if !error.isEmpty {
-                        Text(error)
-                            .font(.caption)
-                            .foregroundColor(.red)
-                            .padding(.top, errorSpacing ? 8 : 4)
-                    }
+                    ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
                 }
                 .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
                     if !isBlurred {
@@ -228,16 +300,14 @@ public struct InputTextArea: View {
     
     private var borderColor: Color {
         if disabled {
-            return Colors.black03
+            return theme.colors.border.disable
         } else if !error.isEmpty {
-            return .red
+            return theme.colors.error.primary
         } else if isFocused {
-            return Colors.pink03
+            return theme.colors.primary
         } else {
-            return Colors.border
+            return theme.colors.border.default
         }
 
     }
 }
-
-