@momo-kits/native-kits 0.162.2-beta.1 → 0.162.2-sp.1-debug

package/ios/IconButton/IconButton.swift

@@ -0,0 +1,112 @@
+import Foundation
+import SwiftUI
+
+// MARK: - IconSize
+
+public enum IconSize {
+    case large
+    case small
+
+    /// Container width/height of the button.
+    var containerSize: CGFloat {
+        switch self {
+        case .large: return 48
+        case .small: return 40
+        }
+    }
+
+    /// Glyph size of the icon inside the button.
+    var iconSize: CGFloat {
+        switch self {
+        case .large: return 24
+        case .small: return 16
+        }
+    }
+
+    var radius: CGFloat {
+        Radius.XL
+    }
+}
+
+// MARK: - IconButton
+
+public struct IconButton: View {
+    @Environment(\.appTheme) private var theme
+
+    var icon: String
+    var onClick: () -> Void
+    var type: ButtonType
+    var size: IconSize
+    var color: Color?
+
+    public init(
+        icon: String = "",
+        onClick: @escaping () -> Void,
+        type: ButtonType = .primary,
+        size: IconSize = .small,
+        color: Color? = nil
+    ) {
+        self.icon = icon
+        self.onClick = onClick
+        self.type = type
+        self.size = size
+        self.color = color
+    }
+
+    private var isEnabled: Bool {
+        type != .disabled
+    }
+
+    public var body: some View {
+        let bg = backgroundColor
+        let fg = contentColor
+        // OUTLINE allows an override color for its border, mirroring Compose `color ?? theme.colors.primary`.
+        let border: Color? = type == .outline ? (color ?? theme.colors.primary) : borderColor
+        let borderWidth = type.borderWidth
+
+        SwiftUI.Button(action: {
+            if isEnabled {
+                onClick()
+            }
+        }) {
+            Icon(source: icon, size: size.iconSize, color: fg)
+                .frame(width: size.containerSize, height: size.containerSize)
+                .background(bg)
+                .clipShape(RoundedRectangle(cornerRadius: size.radius))
+                .overlay(
+                    RoundedRectangle(cornerRadius: size.radius)
+                        .stroke(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+                )
+        }
+        .buttonStyle(.plain)
+        .disabled(!isEnabled)
+    }
+
+    private var backgroundColor: Color {
+        switch type {
+        case .disabled: return theme.colors.background.disable
+        case .primary: return theme.colors.primary
+        case .secondary, .outline: return theme.colors.background.surface
+        case .tonal: return theme.colors.background.tonal
+        case .danger: return theme.colors.error.primary
+        case .text: return .clear
+        }
+    }
+
+    private var contentColor: Color {
+        switch type {
+        case .disabled: return theme.colors.text.disable
+        case .primary, .danger: return Colors.black01
+        case .secondary: return theme.colors.text.default
+        case .outline, .tonal, .text: return theme.colors.primary
+        }
+    }
+
+    private var borderColor: Color? {
+        switch type {
+        case .secondary: return theme.colors.border.default
+        case .outline: return color ?? theme.colors.primary
+        default: return nil
+        }
+    }
+}

package/ios/Information/Information.swift

@@ -0,0 +1,151 @@
+import SwiftUI
+
+public enum InformationState {
+    case `default`
+    case warning
+    case error
+}
+
+public struct Information: View {
+    private let title: String?
+    private let description: String
+    private let state: InformationState
+    private let image: String?
+    private let onPressAction: (() -> Void)?
+    private let showIcon: Bool
+    private let action: String?
+    private let showIconClose: Bool
+    private let onPressClose: (() -> Void)?
+
+    public init(
+        title: String? = nil,
+        description: String = "Description",
+        state: InformationState = .default,
+        image: String? = nil,
+        onPressAction: (() -> Void)? = nil,
+        showIcon: Bool = true,
+        action: String? = nil,
+        showIconClose: Bool = true,
+        onPressClose: (() -> Void)? = nil
+    ) {
+        self.title = title
+        self.description = description
+        self.state = state
+        self.image = image
+        self.onPressAction = onPressAction
+        self.showIcon = showIcon
+        self.action = action
+        self.showIconClose = showIconClose
+        self.onPressClose = onPressClose
+    }
+
+    private var borderColor: Color {
+        switch state {
+        case .default: return Colors.blue07
+        case .warning: return Colors.yellow06
+        case .error: return Colors.red07
+        }
+    }
+
+    private var backgroundColor: Color {
+        switch state {
+        case .default: return Colors.blue10
+        case .warning: return Colors.yellow09
+        case .error: return Colors.red10
+        }
+    }
+
+    private var accentColor: Color {
+        switch state {
+        case .default: return Colors.blue03
+        case .warning: return Colors.orange03
+        case .error: return Colors.red03
+        }
+    }
+
+    private var iconSource: String {
+        switch state {
+        case .default: return "notifications_info"
+        case .warning: return "24_notifications_alert_triangle"
+        case .error: return "24_notifications_alert_octagon"
+        }
+    }
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            HStack(alignment: .top, spacing: 0) {
+                if let image {
+                    ImageView(image)
+                        .frame(width: 40, height: 40)
+                        .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+                        .padding(.trailing, Spacing.S)
+                } else if showIcon {
+                    Icon(source: iconSource, size: 16, color: accentColor)
+                        .padding(.trailing, Spacing.S)
+                }
+
+                VStack(alignment: .leading, spacing: 0) {
+                    if let title {
+                        MomoText(title, typography: .labelDefaultMedium)
+                    }
+                    MomoText(description, typography: .descriptionDefaultRegular)
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+
+                if let onPressClose, showIconClose {
+                    Icon(source: "navigation_close", size: 16, color: Colors.black17)
+                        .contentShape(Rectangle())
+                        .onTapGesture(perform: onPressClose)
+                }
+            }
+
+            if let action, let onPressAction {
+                MomoText(action, typography: .actionXsBold, color: accentColor)
+                    .frame(maxWidth: .infinity, alignment: .trailing)
+                    .contentShape(Rectangle())
+                    .onTapGesture(perform: onPressAction)
+                    .padding(.top, Spacing.S)
+            }
+        }
+        .padding(Spacing.M)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .fill(backgroundColor)
+        )
+        .overlay(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .stroke(borderColor, lineWidth: 0.5)
+        )
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct Information_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 16) {
+            Information(
+                title: "Information",
+                description: "This is a default information message."
+            )
+            Information(
+                title: "Warning",
+                description: "This is a warning message.",
+                state: .warning
+            )
+            Information(
+                title: "Error",
+                description: "This is an error message.",
+                state: .error,
+                onPressAction: {}, action: "Retry"
+            )
+            Information(
+                description: "Dismissible information.",
+                onPressClose: {}
+            )
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif

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
@@ -157,9 +162,10 @@ public struct Input: View {
                             })
                             .keyboardType(keyboardType)
                             .font(fontWeight == .bold ? .action_s_bold : .body_default_regular)
+                            .ignoreBoldTextSetting()
                             .foregroundColor(getTextColor())
                             .disabled(disabled || readOnly)
-                            .applyPrimaryCursorColor()
+                            .applyCursorColor(theme.colors.primary)
                             .onChange(of: text) { newValue in
                                 let limited = limitText(newValue)
                                 if limited != newValue {
@@ -175,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")
                         }
                     }
@@ -194,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)
                         }
                     }
@@ -210,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)
@@ -259,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)
     }
 }
 
@@ -295,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
@@ -315,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(_:)),
@@ -330,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()
@@ -400,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
@@ -94,8 +98,9 @@ public struct InputPhoneNumber: View {
                     })
                     .keyboardType(.numberPad)
                     .font(size == .small ? .header_s_semibold : .header_m_bold)
-                    .foregroundColor(Colors.black17)
-                    .applyPrimaryCursorColor()
+                    .ignoreBoldTextSetting()
+                    .foregroundColor(theme.colors.text.default)
+                    .applyCursorColor(theme.colors.primary)
                     .lineLimit(1)
                     .accessibility(identifier: accessibilityLabel ?? "")
                     .accessibilityValue(textBinding.wrappedValue.isEmpty ? placeholder : textBinding.wrappedValue)
@@ -107,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")
                     }
                 }
@@ -121,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)
                     }
                 }
@@ -130,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)
@@ -140,7 +145,7 @@ public struct InputPhoneNumber: View {
             // Error or hint
             ErrorView(
                 errorMessage: error,
-                errorSpacing: false,
+                errorSpacing: errorSpacing,
                 hintText: hintText
             )
         }
@@ -158,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
         }
     }
 }
-