@momo-kits/native-kits 0.163.1-beta.3-debug → 0.163.1-beta.5-debug

package/ios/InputMoney/InputMoney.swift

@@ -0,0 +1,335 @@
+//
+//  InputMoney.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI reimplementation of Compose `InputMoney`.
+//  The bound `text` holds RAW DIGITS only (mirrors Compose, where the
+//  field stores the numeric string and a VisualTransformation renders the
+//  thousands-separated currency). Display formatting is applied live.
+//
+
+import Foundation
+import SwiftUI
+import UIKit
+
+// MARK: - Currency formatting
+
+/// Mirrors Compose `formatNumberToMoney` exactly (group separator ".").
+/// Input is a raw-digit string; output has thousands separators + currency.
+public func formatNumberToMoney(_ digits: String, currency: String = "đ") -> String {
+    let numeric = digits.filter { $0.isNumber }
+    if numeric.isEmpty || numeric == "0" {
+        return "0" + currency
+    }
+    // Strip leading zeros to match Long parsing semantics.
+    var trimmed = String(numeric.drop(while: { $0 == "0" }))
+    if trimmed.isEmpty { trimmed = "0" }
+    if trimmed == "0" {
+        return "0" + currency
+    }
+    if trimmed.count < 3 {
+        return trimmed + currency
+    }
+    var chars: [Character] = []
+    var count = 0
+    let reversed = Array(trimmed.reversed())
+    for i in 0..<reversed.count {
+        count += 1
+        chars.append(reversed[i])
+        // i counts from the least significant digit; original index = len-1-i.
+        let originalIndex = reversed.count - 1 - i
+        if count == 3 && originalIndex >= 1 {
+            chars.append(".")
+            count = 0
+        }
+    }
+    return String(chars.reversed()) + currency
+}
+
+// MARK: - InputMoney
+
+public struct InputMoney: View {
+    @Environment(\.appTheme) private var theme
+    @Binding public var text: String
+
+    public var floatingValue: String
+    public var floatingValueColor: Color?
+    public var floatingIcon: String
+    public var floatingIconColor: Color?
+    public var placeholder: String
+    public var size: InputSize
+    public var error: String
+    public var errorSpacing: Bool
+    public var disabled: Bool
+    public var icon: String
+    public var iconColor: Color?
+    public var leadingIcon: String
+    public var leadingIconColor: Color?
+    public var loading: Bool
+    public var required: Bool
+    public var fontWeight: InputFontWeight
+    public var keyboardType: UIKeyboardType
+    public var onChangeText: ((String) -> Void)?
+    public var onPressIcon: (() -> Void)?
+    public var onFocus: (() -> Void)?
+    public var onBlur: (() -> Void)?
+
+    @State private var isFocused: Bool = false
+
+    public init(
+        text: Binding<String>,
+        floatingValue: String = "",
+        floatingValueColor: Color? = nil,
+        floatingIcon: String = "",
+        floatingIconColor: Color? = nil,
+        placeholder: String = "0đ",
+        size: InputSize = .small,
+        error: String = "",
+        errorSpacing: Bool = false,
+        disabled: Bool = false,
+        icon: String = "",
+        iconColor: Color? = nil,
+        leadingIcon: String = "",
+        leadingIconColor: Color? = nil,
+        loading: Bool = false,
+        required: Bool = false,
+        fontWeight: InputFontWeight = .bold,
+        keyboardType: UIKeyboardType = .numberPad,
+        onChangeText: ((String) -> Void)? = nil,
+        onPressIcon: (() -> Void)? = nil,
+        onFocus: (() -> Void)? = nil,
+        onBlur: (() -> Void)? = nil
+    ) {
+        self._text = text
+        self.floatingValue = floatingValue
+        self.floatingValueColor = floatingValueColor
+        self.floatingIcon = floatingIcon
+        self.floatingIconColor = floatingIconColor
+        self.placeholder = placeholder
+        self.size = size
+        self.error = error
+        self.errorSpacing = errorSpacing
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.leadingIcon = leadingIcon
+        self.leadingIconColor = leadingIconColor
+        self.loading = loading
+        self.required = required
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+        self.onChangeText = onChangeText
+        self.onPressIcon = onPressIcon
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 4) {
+            ZStack(alignment: .topLeading) {
+                // Floating label
+                if !floatingValue.isEmpty || !floatingIcon.isEmpty {
+                    HStack(spacing: Spacing.XS) {
+                        MomoText(floatingValue, typography: .labelSMedium, color: floatingTitleColor)
+                        if required {
+                            MomoText("*", typography: .labelSMedium, color: theme.colors.error.primary)
+                        }
+                        if !floatingIcon.isEmpty {
+                            Icon(source: floatingIcon, size: 16, color: floatingIconTintColor)
+                        }
+                    }
+                    .padding(.horizontal, Spacing.S)
+                    .background(theme.colors.background.surface)
+                    .offset(x: Spacing.S, y: -8)
+                    .zIndex(10)
+                }
+
+                // Input container
+                HStack(alignment: .center, spacing: 0) {
+                    // Leading icon
+                    if !leadingIcon.isEmpty {
+                        Icon(source: leadingIcon, size: size == .small ? 24 : 32, color: leadingIconTintColor)
+                            .padding(.trailing, Spacing.XS)
+                    }
+
+                    // Money field
+                    ZStack(alignment: .leading) {
+                        if text.filter({ $0.isNumber }).isEmpty {
+                            MomoText(
+                                placeholder,
+                                typography: fontWeight == .bold ? .actionSBold : .bodyDefaultRegular,
+                                color: placeholderColor
+                            )
+                        }
+                        MoneyTextField(
+                            digits: $text,
+                            keyboardType: keyboardType,
+                            fontWeight: fontWeight == .bold ? .bold : .regular,
+                            textColor: UIColor(textColor),
+                            cursorColor: UIColor(theme.colors.primary),
+                            isDisabled: disabled,
+                            onFocusChange: { focused in handleFocusChange(focused) },
+                            onChangeText: onChangeText
+                        )
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                    // Clear button (focused + has value)
+                    if isFocused && !text.filter({ $0.isNumber }).isEmpty {
+                        SwiftUI.Button(action: {
+                            text = ""
+                            onChangeText?("")
+                        }) {
+                            Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
+                                .padding(.leading, Spacing.XS)
+                                .accessibility(identifier: "ic_clear")
+                        }
+                    }
+
+                    // Loading indicator
+                    if loading {
+                        ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                            .frame(width: 16, height: 16)
+                            .padding(.leading, Spacing.S)
+                    } else if !icon.isEmpty {
+                        // Right icon
+                        SwiftUI.Button(action: { onPressIcon?() }) {
+                            Icon(source: icon, size: 24, color: iconTintColor)
+                                .padding(.leading, Spacing.S)
+                        }
+                    }
+                }
+                .padding(.horizontal, Spacing.M)
+                .frame(height: scaleSize(size == .small ? 48 : 56, 1.1))
+                .background(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .fill(theme.colors.background.surface)
+                )
+                .overlay(
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .stroke(borderColor, lineWidth: 1)
+                )
+            }
+
+            ErrorView(errorMessage: error, errorSpacing: errorSpacing, hintText: "")
+        }
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
+            if isFocused {
+                DispatchQueue.main.async { handleFocusChange(false) }
+            }
+        }
+    }
+
+    // MARK: - Helpers
+
+    private func handleFocusChange(_ focused: Bool) {
+        guard isFocused != focused else { return }
+        isFocused = focused
+        if focused { onFocus?() } else { onBlur?() }
+    }
+
+    private var borderColor: Color {
+        if disabled { return theme.colors.border.disable }
+        if !error.isEmpty { return theme.colors.error.primary }
+        if isFocused { return theme.colors.primary }
+        return theme.colors.border.default
+    }
+
+    private var textColor: Color { disabled ? theme.colors.text.disable : theme.colors.text.default }
+    private var placeholderColor: Color { disabled ? theme.colors.text.disable : theme.colors.text.hint }
+    private var iconTintColor: Color { disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default) }
+    private var leadingIconTintColor: Color { disabled ? theme.colors.text.disable : (leadingIconColor ?? theme.colors.text.hint) }
+    private var floatingTitleColor: Color { disabled ? theme.colors.text.disable : (floatingValueColor ?? theme.colors.text.hint) }
+    private var floatingIconTintColor: Color { disabled ? theme.colors.text.disable : (floatingIconColor ?? theme.colors.text.default) }
+}
+
+// MARK: - MoneyTextField (UIViewRepresentable)
+
+/// A UITextField that shows live thousands-separated currency while the bound
+/// `digits` string holds only the raw numeric value. Caret is pinned before
+/// the trailing currency symbol.
+private struct MoneyTextField: UIViewRepresentable {
+    @Binding var digits: String
+    var keyboardType: UIKeyboardType
+    var fontWeight: UIFont.Weight
+    var textColor: UIColor
+    var cursorColor: UIColor
+    var isDisabled: Bool
+    var onFocusChange: (Bool) -> Void
+    var onChangeText: ((String) -> Void)?
+
+    func makeCoordinator() -> Coordinator { Coordinator(self) }
+
+    func makeUIView(context: Context) -> UITextField {
+        let field = UITextField()
+        field.delegate = context.coordinator
+        field.keyboardType = keyboardType
+        field.font = UIFont.systemFont(ofSize: scaleSize(20), weight: fontWeight)
+        field.textColor = textColor
+        field.isEnabled = !isDisabled
+        field.tintColor = cursorColor
+        field.setContentHuggingPriority(.defaultLow, for: .horizontal)
+        field.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        field.text = displayValue(digits)
+        field.addTarget(
+            context.coordinator,
+            action: #selector(Coordinator.editingChanged(_:)),
+            for: .editingChanged
+        )
+        return field
+    }
+
+    func updateUIView(_ field: UITextField, context: Context) {
+        context.coordinator.parent = self
+        field.isEnabled = !isDisabled
+        field.textColor = textColor
+        field.tintColor = cursorColor
+        let expected = displayValue(digits)
+        if !field.isFirstResponder && field.text != expected {
+            field.text = expected
+        }
+    }
+
+    private func displayValue(_ raw: String) -> String {
+        let numeric = raw.filter { $0.isNumber }
+        return numeric.isEmpty ? "" : formatNumberToMoney(numeric)
+    }
+
+    final class Coordinator: NSObject, UITextFieldDelegate {
+        var parent: MoneyTextField
+
+        init(_ parent: MoneyTextField) { self.parent = parent }
+
+        func textFieldDidBeginEditing(_ textField: UITextField) {
+            parent.onFocusChange(true)
+        }
+
+        func textFieldDidEndEditing(_ textField: UITextField) {
+            parent.onFocusChange(false)
+        }
+
+        func textFieldShouldReturn(_ textField: UITextField) -> Bool {
+            textField.resignFirstResponder()
+            return true
+        }
+
+        @objc func editingChanged(_ textField: UITextField) {
+            // Extract digits from whatever the user typed/deleted.
+            let numeric = (textField.text ?? "").filter { $0.isNumber }
+            let formatted = numeric.isEmpty ? "" : formatNumberToMoney(numeric)
+            if textField.text != formatted {
+                textField.text = formatted
+                // Keep caret before the currency suffix ("đ").
+                if let end = textField.position(from: textField.endOfDocument, offset: -1) {
+                    textField.selectedTextRange = textField.textRange(from: end, to: end)
+                }
+            }
+            if parent.digits != numeric {
+                parent.digits = numeric
+            }
+            parent.onChangeText?(numeric)
+        }
+    }
+}

package/ios/InputOTP/InputOTP.swift

@@ -0,0 +1,210 @@
+import Foundation
+import SwiftUI
+
+// MARK: - OTPCaret
+
+/// Blinking caret shown at the active OTP cell, mirroring Compose `OTPCaret`.
+private struct OTPCaret: View {
+    @Environment(\.appTheme) private var theme
+    @State private var visible: Bool = true
+
+    var body: some View {
+        HStack(spacing: 0) {
+            Rectangle()
+                .fill(theme.colors.primary)
+                .frame(width: 1, height: scaleSize(12))
+                .opacity(visible ? 1 : 0)
+                .animation(
+                    .linear(duration: 0.5).repeatForever(autoreverses: true),
+                    value: visible
+                )
+            MomoText("-", typography: .descriptionDefaultRegular, color: theme.colors.text.hint)
+        }
+        .onAppear { visible = false }
+    }
+}
+
+// MARK: - InputOTP
+
+/// Native SwiftUI port of Compose `InputOTP`.
+///
+/// A row of OTP cells driven by a hidden `TextField`. When `length` is provided
+/// it renders fixed-count slots (`-` placeholders + blinking caret); otherwise it
+/// renders the typed characters followed by a trailing caret while focused.
+public struct InputOTP: View {
+    @Environment(\.appTheme) private var theme
+    @Binding public var value: String
+
+    public var length: Int?
+    public var errorMessage: String
+    public var errorSpacing: Bool
+    public var floatingValue: String
+    public var placeholder: String
+    public var dataType: String
+    public var onChangeText: ((String) -> Void)?
+    public var onFocus: (() -> Void)?
+    public var onBlur: (() -> Void)?
+
+    @FocusState private var isFocused: Bool
+    @State private var hasBeenFocused: Bool = false
+
+    private var maxLength: Int { length ?? 10 }
+
+    public init(
+        value: Binding<String>,
+        length: Int? = nil,
+        errorMessage: String = "",
+        errorSpacing: Bool = false,
+        floatingValue: String = "Label",
+        placeholder: String = "",
+        dataType: String = "number",
+        onChangeText: ((String) -> Void)? = nil,
+        onFocus: (() -> Void)? = nil,
+        onBlur: (() -> Void)? = nil
+    ) {
+        self._value = value
+        self.length = length
+        self.errorMessage = errorMessage
+        self.errorSpacing = errorSpacing
+        self.floatingValue = floatingValue
+        self.placeholder = placeholder
+        self.dataType = dataType
+        self.onChangeText = onChangeText
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+    }
+
+    public var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            ZStack {
+                // Hidden text field that owns the keyboard / cursor.
+                hiddenField
+
+                // Floating label over the border.
+                if !floatingValue.isEmpty {
+                    HStack {
+                        MomoText(floatingValue, typography: .labelSMedium, color: theme.colors.text.hint)
+                    }
+                    .padding(.horizontal, Spacing.S)
+                    .background(theme.colors.background.surface)
+                    .offset(y: -28)
+                    .zIndex(10)
+                }
+
+                // Bordered container with cells.
+                cells
+                    .frame(maxWidth: .infinity)
+                    .frame(height: 56)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: Radius.S)
+                            .stroke(borderColor, lineWidth: 1)
+                    )
+
+                // Trailing clear button.
+                HStack {
+                    Spacer()
+                    SwiftUI.Button(action: clearText) {
+                        Icon(source: "24_navigation_close_circle_full", size: 12, color: theme.colors.text.hint)
+                            .padding(.trailing, 12)
+                    }
+                }
+                .zIndex(10)
+            }
+            .frame(height: 56)
+            .contentShape(Rectangle())
+            .onTapGesture { isFocused = true }
+
+            ErrorView(errorMessage: errorMessage, errorSpacing: errorSpacing, hintText: "")
+        }
+    }
+
+    // MARK: Subviews
+
+    private var hiddenField: some View {
+        TextField("", text: Binding(
+            get: { value },
+            set: { handleChangeText($0) }
+        ))
+        .keyboardType(dataType == "number" ? .numberPad : .asciiCapable)
+        .focused($isFocused)
+        .foregroundColor(.clear)
+        .accentColor(.clear)
+        .frame(maxWidth: .infinity)
+        .frame(height: 56)
+        .opacity(0.01)
+        .onChange(of: isFocused) { focused in
+            if focused {
+                onFocus?()
+                hasBeenFocused = true
+            } else if hasBeenFocused {
+                onBlur?()
+            }
+        }
+    }
+
+    @ViewBuilder
+    private var cells: some View {
+        if let length = length {
+            HStack(spacing: Spacing.L) {
+                ForEach(0 ..< length, id: \.self) { i in
+                    cell(at: i)
+                }
+            }
+            .padding(.vertical, 8)
+        } else {
+            HStack(spacing: Spacing.L) {
+                if value.isEmpty && !isFocused && !placeholder.isEmpty {
+                    MomoText(placeholder, typography: .descriptionDefaultRegular, color: theme.colors.text.hint)
+                } else {
+                    ForEach(Array(value.enumerated()), id: \.offset) { _, ch in
+                        MomoText(String(ch), typography: .headerDefaultBold, color: theme.colors.text.default)
+                    }
+                    if isFocused && value.count != maxLength {
+                        OTPCaret()
+                    }
+                }
+            }
+            .padding(.vertical, 8)
+        }
+    }
+
+    @ViewBuilder
+    private func cell(at index: Int) -> some View {
+        if isFocused && value.count == index {
+            OTPCaret()
+        } else {
+            let chars = Array(value)
+            let filled = index < chars.count
+            MomoText(
+                filled ? String(chars[index]) : "-",
+                typography: filled ? .headerDefaultBold : .descriptionDefaultRegular,
+                color: filled ? theme.colors.text.default : theme.colors.text.hint
+            )
+        }
+    }
+
+    // MARK: Logic
+
+    private func handleChangeText(_ text: String) {
+        let validData = dataType != "number" || text.allSatisfy { $0.isNumber }
+        let changed = text.count != value.count
+        if text.count <= maxLength && validData && changed {
+            value = text
+            onChangeText?(text)
+        }
+    }
+
+    private func clearText() {
+        handleChangeText("")
+    }
+
+    private var borderColor: Color {
+        if !errorMessage.isEmpty {
+            return theme.colors.error.primary
+        }
+        if isFocused {
+            return theme.colors.primary
+        }
+        return theme.colors.border.default
+    }
+}

package/ios/Loader/Loader.swift

@@ -0,0 +1,113 @@
+import Foundation
+import SwiftUI
+
+/// Loader variants, mirroring Compose `LoaderType`.
+public enum LoaderType {
+    case dot
+    case spinner
+}
+
+/// Native SwiftUI port of the Compose `Loader` component.
+///
+/// Mirrors Compose `Loader(type:, tintColor:, modifier:)` which delegates to
+/// `DotLoader` / `SpinnerLoader`. Both variants render Lottie animations
+/// (`files/dot_loading` and `files/lottie_circle_loader`) and optionally tint
+/// the fill/stroke. The tint is reproduced here by masking a solid color rect
+/// with the (monochrome) Lottie animation.
+public struct Loader: View {
+    private let type: LoaderType
+    private let tintColor: Color?
+
+    public init(type: LoaderType = .dot, tintColor: Color? = nil) {
+        self.type = type
+        self.tintColor = tintColor
+    }
+
+    public var body: some View {
+        switch type {
+        case .dot:
+            DotLoader(tintColor: tintColor)
+        case .spinner:
+            SpinnerLoader(tintColor: tintColor)
+        }
+    }
+}
+
+/// Looping dot animation. Compose size: 52 x 18.
+public struct DotLoader: View {
+    private let tintColor: Color?
+
+    public init(tintColor: Color? = nil) {
+        self.tintColor = tintColor
+    }
+
+    public var body: some View {
+        TintedLottie(name: "dot_loading", tintColor: tintColor)
+            .frame(width: 52, height: 18)
+    }
+}
+
+/// Looping circular spinner. Compose size: 24 x 24.
+public struct SpinnerLoader: View {
+    private let tintColor: Color?
+
+    public init(tintColor: Color? = nil) {
+        self.tintColor = tintColor
+    }
+
+    public var body: some View {
+        TintedLottie(name: "lottie_circle_loader", tintColor: tintColor)
+            .frame(width: 24, height: 24)
+    }
+}
+
+/// Horizontal determinate progress bar.
+///
+/// Mirrors Compose `ProgressBar(percent:, color:, modifier:)`:
+/// - `percent` clamped to 0...100, animated with a 200ms ease.
+/// - track = theme background default (`0xFFF2F2F6`), fill = `color` or primary (pink_03).
+/// - height 4, corner radius `Radius.XXS`, fills max width.
+public struct ProgressBar: View {
+    @Environment(\.appTheme) private var theme
+
+    private let percent: CGFloat
+    private let color: Color?
+
+    public init(percent: CGFloat = 0, color: Color? = nil) {
+        self.percent = percent
+        self.color = color
+    }
+
+    private var clampedFraction: CGFloat {
+        min(max(percent, 0), 100) / 100
+    }
+
+    public var body: some View {
+        GeometryReader { proxy in
+            ZStack(alignment: .leading) {
+                RoundedRectangle(cornerRadius: Radius.XXS)
+                    .fill(theme.colors.background.default)
+                RoundedRectangle(cornerRadius: Radius.XXS)
+                    .fill(color ?? theme.colors.primary)
+                    .frame(width: proxy.size.width * clampedFraction)
+            }
+        }
+        .frame(height: 4)
+        .animation(.easeInOut(duration: 0.2), value: clampedFraction)
+    }
+}
+
+/// Renders a looping Lottie animation, optionally recolored via a mask.
+private struct TintedLottie: View {
+    let name: String
+    let tintColor: Color?
+
+    var body: some View {
+        if let tintColor = tintColor {
+            tintColor
+                .mask(LottieView(name: name, loopMode: .loop))
+        } else {
+            LottieView(name: name, loopMode: .loop)
+        }
+    }
+}

package/ios/MoMoUIKits.podspec

@@ -0,0 +1,5 @@
+eval(
+  File.read(File.join(__dir__, 'native-kits.podspec')),
+  binding,
+  File.join(__dir__, 'native-kits.podspec')
+)