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

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')
+)

package/ios/Pagination/PaginationDot.swift

@@ -0,0 +1,61 @@
+//
+//  PaginationDot.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationDot.
+//  An active dot is a 12x4 pill in `activeColor`; inactive dots are 4x4
+//  rounded squares in the pressed-background token.
+//
+
+import SwiftUI
+
+// MARK: - Dot
+
+/// A single pagination dot, mirroring Compose's `Dot` composable.
+public struct PaginationDotItem: View {
+    @Environment(\.appTheme) private var theme
+
+    private let active: Bool
+    private let activeColor: Color
+
+    public init(active: Bool = false, activeColor: Color) {
+        self.active = active
+        self.activeColor = activeColor
+    }
+
+    public var body: some View {
+        if active {
+            RoundedRectangle(cornerRadius: 4)
+                .fill(activeColor)
+                .frame(width: 12, height: 4)
+        } else {
+            RoundedRectangle(cornerRadius: 4)
+                .fill(theme.colors.background.pressed)
+                .frame(width: 4, height: 4)
+        }
+    }
+}
+
+// MARK: - PaginationDot
+
+/// Mirrors Compose's `PaginationDot(activeIndex, dataLength)`.
+public struct PaginationDot: View {
+    @Environment(\.appTheme) private var theme
+
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 3) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        HStack(spacing: 0) {
+            ForEach(0..<max(dataLength, 0), id: \.self) { i in
+                PaginationDotItem(active: i == activeIndex, activeColor: theme.colors.primary)
+                    .padding(.trailing, i != dataLength - 1 ? Spacing.XS : 0)
+            }
+        }
+    }
+}

package/ios/Pagination/PaginationNumber.swift

@@ -0,0 +1,35 @@
+//
+//  PaginationNumber.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationNumber.
+//  Renders "current/total" text on a translucent black rounded chip.
+//
+
+import SwiftUI
+
+// MARK: - PaginationNumber
+
+/// Mirrors Compose's `PaginationNumber(activeIndex, dataLength)`.
+public struct PaginationNumber: View {
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 2) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        MomoText(
+            "\(1 + activeIndex)/\(dataLength)",
+            typography: .labelDefaultMedium,
+            color: Colors.black01
+        )
+        .padding(.horizontal, Spacing.S)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.L)
+                .fill(Color.black.opacity(0.2)) // Color(0x33000000)
+        )
+    }
+}

package/ios/Pagination/PaginationScroll.swift

@@ -0,0 +1,101 @@
+//
+//  PaginationScroll.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationScroll.
+//  Wraps arbitrary horizontally-scrollable content and renders a
+//  progress-bar style indicator whose position tracks the scroll offset.
+//
+
+import SwiftUI
+
+// MARK: - Constants
+
+private let INDICATOR_WIDTH: CGFloat = 24
+private let PROGRESS_WIDTH: CGFloat = 72
+
+/// Memoized offset calculation, mirroring Compose's `calculateOffset`.
+private func calculateOffset(currentPosition: CGFloat, maxBound: CGFloat) -> CGFloat {
+    guard maxBound > 0 else { return 0 }
+    return (PROGRESS_WIDTH - INDICATOR_WIDTH) * (currentPosition / maxBound)
+}
+
+// MARK: - PaginationScroll
+
+/// Mirrors Compose's `PaginationScroll(modifier, content)`.
+///
+/// The trailing-closure `content` is laid out in a horizontal scroll view and
+/// the indicator below reflects the current scroll progress.
+public struct PaginationScroll<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+
+    private let content: Content
+
+    @State private var scrollOffset: CGFloat = 0
+    @State private var contentWidth: CGFloat = 0
+    @State private var viewportWidth: CGFloat = 0
+
+    public init(@ViewBuilder content: () -> Content) {
+        self.content = content()
+    }
+
+    private var maxBound: CGFloat {
+        max(contentWidth - viewportWidth, 0)
+    }
+
+    private var indicatorOffset: CGFloat {
+        calculateOffset(currentPosition: scrollOffset, maxBound: maxBound)
+    }
+
+    public var body: some View {
+        VStack(spacing: 0) {
+            ScrollView(.horizontal, showsIndicators: false) {
+                HStack(spacing: 0) {
+                    content
+                }
+                .background(
+                    GeometryReader { proxy in
+                        Color.clear
+                            .preference(
+                                key: ScrollOffsetKey.self,
+                                value: -proxy.frame(in: .named("paginationScroll")).minX
+                            )
+                            .onAppear { contentWidth = proxy.size.width }
+                            .onChange(of: proxy.size.width) { contentWidth = $0 }
+                    }
+                )
+            }
+            .coordinateSpace(name: "paginationScroll")
+            .background(
+                GeometryReader { viewport in
+                    Color.clear
+                        .onAppear { viewportWidth = viewport.size.width }
+                        .onChange(of: viewport.size.width) { viewportWidth = $0 }
+                }
+            )
+            .onPreferenceChange(ScrollOffsetKey.self) { scrollOffset = max($0, 0) }
+            .padding(.bottom, Spacing.L)
+
+            // Progress indicator
+            ZStack(alignment: .leading) {
+                RoundedRectangle(cornerRadius: Spacing.XS)
+                    .fill(theme.colors.background.pressed)
+                    .frame(width: PROGRESS_WIDTH, height: 4)
+
+                RoundedRectangle(cornerRadius: Spacing.XS)
+                    .fill(theme.colors.primary)
+                    .frame(width: INDICATOR_WIDTH, height: 4)
+                    .offset(x: indicatorOffset)
+            }
+        }
+    }
+}
+
+// MARK: - Preference key
+
+private struct ScrollOffsetKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = nextValue()
+    }
+}

package/ios/Pagination/PaginationWhiteDot.swift

@@ -0,0 +1,37 @@
+//
+//  PaginationWhiteDot.swift
+//  MoMoUIKits
+//
+//  Native SwiftUI port of Compose's PaginationWhiteDot.
+//  Same dot layout as PaginationDot, but the active color is white
+//  (black_01) and the row sits on a translucent black rounded surface.
+//
+
+import SwiftUI
+
+// MARK: - PaginationWhiteDot
+
+/// Mirrors Compose's `PaginationWhiteDot(activeIndex, dataLength)`.
+public struct PaginationWhiteDot: View {
+    private let activeIndex: Int
+    private let dataLength: Int
+
+    public init(activeIndex: Int = 0, dataLength: Int = 3) {
+        self.activeIndex = activeIndex
+        self.dataLength = dataLength
+    }
+
+    public var body: some View {
+        HStack(spacing: 0) {
+            ForEach(0..<max(dataLength, 0), id: \.self) { i in
+                PaginationDotItem(active: i == activeIndex, activeColor: Colors.black01)
+                    .padding(.trailing, i != dataLength - 1 ? Spacing.XS : 0)
+            }
+        }
+        .padding(Spacing.XS)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .fill(Color.black.opacity(0.2)) // Color(0x33000000)
+        )
+    }
+}

package/ios/Popup/PopupDisplay.swift

@@ -221,17 +221,13 @@ public struct PopupDisplay: View {
     var RowTextButtons: some View {
         HStack {
             SwiftUI.Button(action: onPressCloseButton) {
-                Text(closeButtonTitle)
-                    .font(.action2)
-                    .ignoreBoldTextSetting()
-            }.foregroundColor(Colors.black09)
+                MomoText(closeButtonTitle, typography: .actionSBold, color: Colors.black09)
+            }
                 .padding(.trailing, 12)
 
             SwiftUI.Button(action: onPressAction) {
-                Text(actionButtonTitle)
-                    .font(.action2)
-                    .ignoreBoldTextSetting()
-            }.foregroundColor(Colors.primary)
+                MomoText(actionButtonTitle, typography: .actionSBold, color: Colors.primary)
+            }
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
         .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))
@@ -240,17 +236,13 @@ public struct PopupDisplay: View {
     var ColumnTextButtons: some View {
         VStack(alignment: .trailing) {
             SwiftUI.Button(action: onPressAction) {
-                Text(actionButtonTitle)
-                    .font(.action2)
-                    .ignoreBoldTextSetting()
-            }.foregroundColor(Colors.primary)
+                MomoText(actionButtonTitle, typography: .actionSBold, color: Colors.primary)
+            }
                 .padding(.bottom, 6)
 
             SwiftUI.Button(action: onPressCloseButton) {
-                Text(closeButtonTitle)
-                    .font(.action2)
-                    .ignoreBoldTextSetting()
-            }.foregroundColor(Colors.black09)
+                MomoText(closeButtonTitle, typography: .actionSBold, color: Colors.black09)
+            }
         }
         .frame(maxWidth: .infinity, alignment: .trailing)
         .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))

package/ios/Popup/PopupInput.swift

@@ -35,17 +35,11 @@ public struct PopupInput: View {
 
                 VStack {
                     VStack(alignment: .leading) {
-                        Text(title)
-                            .foregroundColor(.black)
-                            .font(.headerText1)
-                            .ignoreBoldTextSetting()
+                        MomoText(title, typography: .headerDefaultBold, color: .black)
                             .padding(.top, 12)
                             .padding(.bottom, 24)
 
-                        Text(description)
-                            .foregroundColor(.black)
-                            .font(.paragraph)
-                            .ignoreBoldTextSetting()
+                        MomoText(description, typography: .bodyDefaultRegular, color: .black)
                             .opacity(0.6)
                             .multilineTextAlignment(.leading)
                             .padding(.bottom, 20)