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

package/ios/DateTimePicker/DateTimePickerUtils.swift

@@ -0,0 +1,167 @@
+import Foundation
+
+// MARK: - DateTimePickerUtils
+
+/// Pure helper functions mirroring Compose `DateTimePickerUtils.kt`.
+public enum DateTimePickerUtils {
+
+    /// Time mode list for 12-hour clock (only-hour format).
+    public static let timeMode: [String] = ["AM", "PM"]
+
+    /// Pad a number with a leading zero if it's less than 10.
+    public static func paddingNum(_ num: Int) -> String {
+        return num > 9 ? String(num) : "0\(num)"
+    }
+
+    /// Format a `Date` into a string, matching Compose `formatLocalDateTime`.
+    public static func formatDate(
+        _ date: Date,
+        format: String = "yyyy-MM-dd HH:mm",
+        calendar: Calendar = Calendar.current
+    ) -> String {
+        let c = calendar.dateComponents([.year, .month, .day, .hour, .minute], from: date)
+        let year = c.year ?? 0
+        let month = c.month ?? 1
+        let day = c.day ?? 1
+        let hour = c.hour ?? 0
+        let minute = c.minute ?? 0
+
+        switch format {
+        case "yyyy-MM-dd HH:mm":
+            return "\(year)-\(paddingNum(month))-\(paddingNum(day)) \(paddingNum(hour)):\(paddingNum(minute))"
+        case "dd-MM-yyyy":
+            return "\(paddingNum(day))-\(paddingNum(month))-\(year)"
+        case "HH:mm":
+            return "\(paddingNum(hour)):\(paddingNum(minute))"
+        default:
+            return "\(year)-\(paddingNum(month))-\(paddingNum(day)) \(paddingNum(hour)):\(paddingNum(minute))"
+        }
+    }
+
+    /// Number of days in a given month/year.
+    private static func daysInMonth(year: Int, month: Int) -> Int {
+        switch month {
+        case 1, 3, 5, 7, 8, 10, 12: return 31
+        case 4, 6, 9, 11: return 30
+        case 2: return (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) ? 29 : 28
+        default: return 31
+        }
+    }
+
+    /// Get a list of day strings constrained by min/max date.
+    public static func getDaysInMonth(
+        year: Int,
+        month: Int,
+        minDate: DateComponents,
+        maxDate: DateComponents
+    ) -> [String] {
+        let maxDay = daysInMonth(year: year, month: month)
+        var startDay = 1
+        var endDay = maxDay
+
+        if year == minDate.year && month == minDate.month {
+            startDay = minDate.day ?? 1
+        }
+        if year == maxDate.year && month == maxDate.month {
+            endDay = maxDate.day ?? maxDay
+        }
+
+        guard startDay <= endDay else { return [paddingNum(startDay)] }
+        return (startDay...endDay).map { paddingNum($0) }
+    }
+
+    /// Get a list of month strings constrained by min/max date for a year.
+    public static func getMonths(
+        minDate: DateComponents,
+        maxDate: DateComponents,
+        currentYear: Int
+    ) -> [String] {
+        var startMonth = 1
+        var endMonth = 12
+
+        if currentYear == minDate.year {
+            startMonth = minDate.month ?? 1
+        }
+        if currentYear == maxDate.year {
+            endMonth = maxDate.month ?? 12
+        }
+
+        guard startMonth <= endMonth else { return [paddingNum(startMonth)] }
+        return (startMonth...endMonth).map { paddingNum($0) }
+    }
+
+    /// Get a list of year strings between min and max date.
+    public static func getYears(minDate: DateComponents, maxDate: DateComponents) -> [String] {
+        let startYear = minDate.year ?? 0
+        let endYear = maxDate.year ?? 0
+        guard startYear <= endYear else { return [String(startYear)] }
+        return (startYear...endYear).map { String($0) }
+    }
+
+    /// Get a list of hours for either a 12-hour or 24-hour clock.
+    public static func getHours(hourMode: Int) -> [String] {
+        var hours: [String] = []
+        for i in 0..<hourMode {
+            let hour = hourMode == 12 ? i + 1 : i
+            hours.append(paddingNum(hour))
+        }
+        return hours
+    }
+
+    /// Get a list of minutes stepped by `interval`.
+    public static func getMinutes(interval: Int) -> [String] {
+        let step = max(1, interval)
+        var minutes: [String] = []
+        var min = 0
+        while min < 60 {
+            minutes.append(paddingNum(min))
+            min += step
+        }
+        return minutes
+    }
+
+    /// Today's date.
+    public static func getCurrentDateTime() -> Date {
+        return Date()
+    }
+
+    /// Create a date a certain number of years before/after now.
+    public static func createRelativeDate(years: Int, calendar: Calendar = Calendar.current) -> Date {
+        let now = Date()
+        return calendar.date(byAdding: .year, value: years, to: now) ?? now
+    }
+
+    /// Resolve the wheel columns from a format string. Mirrors Compose `getDateComponents`.
+    public static func getDateComponents(
+        format: String,
+        currentData: DateTimePickerData,
+        minDate: DateComponents,
+        maxDate: DateComponents,
+        minuteInterval: Int
+    ) -> [DateTimePickerComponent] {
+        let formatParts = format.split(whereSeparator: { !$0.isLetter }).map { String($0) }
+        let isOnlyHour = formatParts.count == 1 && formatParts[0] == "HH"
+
+        let dayData = getDaysInMonth(year: currentData.year, month: currentData.month, minDate: minDate, maxDate: maxDate)
+        let monthData = getMonths(minDate: minDate, maxDate: maxDate, currentYear: currentData.year)
+        let yearData = getYears(minDate: minDate, maxDate: maxDate)
+        let hourData = getHours(hourMode: isOnlyHour ? 12 : 24)
+        let minData = getMinutes(interval: minuteInterval)
+
+        var components: [DateTimePickerComponent] = []
+        for part in formatParts {
+            switch part {
+            case "DD": components.append(DateTimePickerComponent(name: "day", data: dayData))
+            case "MM": components.append(DateTimePickerComponent(name: "month", data: monthData))
+            case "YYYY": components.append(DateTimePickerComponent(name: "year", data: yearData))
+            case "HH": components.append(DateTimePickerComponent(name: "hour", data: hourData))
+            case "mm": components.append(DateTimePickerComponent(name: "minute", data: minData))
+            default: break
+            }
+        }
+        if isOnlyHour {
+            components.append(DateTimePickerComponent(name: "timeMode", data: timeMode))
+        }
+        return components
+    }
+}

package/ios/DateTimePicker/WheelPicker.swift

@@ -0,0 +1,165 @@
+import SwiftUI
+
+// MARK: - Constants
+
+private let wheelItemHeight: CGFloat = 42
+private let wheelVisibleCount: Int = 5
+private let wheelPickerBorderWidth: CGFloat = 1
+
+// MARK: - WheelPicker
+
+/// A reusable single-column wheel picker, mirroring Compose `WheelPicker.kt`.
+///
+/// The data is padded with two empty rows at the top and bottom so the first/last
+/// real value can be centered. The currently centered row is reported back via
+/// `onChange(name, value)`.
+public struct WheelPicker: View {
+    @Environment(\.appTheme) private var theme
+
+    // MARK: Lifecycle
+
+    public init(
+        name: String,
+        data: [String],
+        selectedData: String,
+        onChange: @escaping (String, String) -> Void
+    ) {
+        self.name = name
+        self.data = data
+        self.selectedData = selectedData
+        self.onChange = onChange
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        let paddedData = ["", ""] + data + ["", ""]
+
+        return GeometryReader { geo in
+            let height = geo.size.height
+            ScrollViewReader { proxy in
+                ScrollView(.vertical, showsIndicators: false) {
+                    LazyVStack(spacing: 0) {
+                        ForEach(Array(paddedData.enumerated()), id: \.offset) { index, text in
+                            WheelPickerItem(
+                                text: text,
+                                isSelected: index == selectedIndex,
+                                index: index,
+                                scrollOffset: scrollOffset,
+                                viewportHeight: height
+                            )
+                            .frame(height: wheelItemHeight)
+                            .id(index)
+                        }
+                    }
+                    .background(
+                        GeometryReader { inner in
+                            Color.clear.preference(
+                                key: WheelOffsetKey.self,
+                                value: inner.frame(in: .named(scrollSpace)).minY
+                            )
+                        }
+                    )
+                }
+                .coordinateSpace(name: scrollSpace)
+                .onPreferenceChange(WheelOffsetKey.self) { value in
+                    scrollOffset = value
+                    updateSelection(paddedData: paddedData, viewportHeight: height)
+                }
+                .onAppear {
+                    let initial = max(paddedData.firstIndex(of: selectedData) ?? 2, 2)
+                    selectedIndex = initial
+                    DispatchQueue.main.async {
+                        proxy.scrollTo(initial, anchor: .center)
+                    }
+                }
+            }
+        }
+        .frame(height: wheelItemHeight * CGFloat(wheelVisibleCount))
+        .overlay(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .stroke(theme.colors.border.default, lineWidth: wheelPickerBorderWidth)
+        )
+        .background(theme.colors.background.surface.clipShape(RoundedRectangle(cornerRadius: Radius.S)))
+        .overlay(
+            // Centered translucent selection band.
+            Rectangle()
+                .fill(Colors.blue10)
+                .opacity(0.2)
+                .frame(height: wheelItemHeight)
+                .allowsHitTesting(false)
+        )
+        .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+    }
+
+    // MARK: Internal
+
+    let name: String
+    let data: [String]
+    let selectedData: String
+    let onChange: (String, String) -> Void
+
+    @State private var selectedIndex: Int = 0
+    @State private var scrollOffset: CGFloat = 0
+
+    private let scrollSpace = "wheelScroll"
+
+    /// Map the current scroll offset to the centered index and report changes.
+    private func updateSelection(paddedData: [String], viewportHeight: CGFloat) {
+        // `scrollOffset` is the top of the content relative to the viewport (<= 0 when scrolled).
+        let centerY = viewportHeight / 2
+        let contentCenter = -scrollOffset + centerY
+        let rawIndex = Int((contentCenter / wheelItemHeight).rounded()) - 1
+        let clamped = max(2, min(rawIndex, paddedData.count - 3))
+        guard clamped != selectedIndex else { return }
+        selectedIndex = clamped
+        let value = paddedData[clamped]
+        if !value.isEmpty {
+            onChange(name, value)
+        }
+    }
+}
+
+// MARK: - WheelPickerItem
+
+private struct WheelPickerItem: View {
+    @Environment(\.appTheme) private var theme
+
+    let text: String
+    let isSelected: Bool
+    let index: Int
+    let scrollOffset: CGFloat
+    let viewportHeight: CGFloat
+
+    var body: some View {
+        let itemCenterInContent = CGFloat(index) * wheelItemHeight + wheelItemHeight / 2
+        let itemCenterInViewport = itemCenterInContent + scrollOffset
+        let distanceFromCenter = abs(itemCenterInViewport - viewportHeight / 2) / wheelItemHeight
+
+        let alpha: Double
+        switch distanceFromCenter {
+        case ..<1: alpha = 1.0
+        case ..<2: alpha = 0.8
+        default: alpha = 0.4
+        }
+
+        let scale: CGFloat = isSelected ? 1.0 : 0.87
+
+        return ZStack {
+            MomoText(text, typography: .actionSBold, color: theme.colors.text.default)
+                .scaleEffect(scale)
+        }
+        .frame(maxWidth: .infinity)
+        .frame(height: wheelItemHeight)
+        .opacity(alpha)
+    }
+}
+
+// MARK: - WheelOffsetKey
+
+private struct WheelOffsetKey: PreferenceKey {
+    static var defaultValue: CGFloat = 0
+    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = nextValue()
+    }
+}

package/ios/Divider/Divider.swift

@@ -0,0 +1,16 @@
+import Foundation
+import SwiftUI
+
+public struct MomoDivider: View {
+    @Environment(\.appTheme) private var theme
+
+    public init() {}
+
+    public var body: some View {
+        Rectangle()
+            .fill(theme.colors.border.default)
+            .frame(maxWidth: .infinity)
+            .frame(height: 1)
+            .padding(.vertical, Spacing.XS)
+    }
+}

package/ios/Extensions/ActiveOpacityButtonStyle.swift

@@ -0,0 +1,14 @@
+import SwiftUI
+
+/// Mirrors Compose's `Modifier.activeOpacityClickable(activeOpacity:)` (modifier/Clickable.kt):
+/// fades the whole tappable subtree to `activeOpacity` while pressed, animated, instead of
+/// relying on a platform-default press indication.
+struct ActiveOpacityButtonStyle: ButtonStyle {
+    var activeOpacity: Double = 0.2
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .opacity(configuration.isPressed ? activeOpacity : 1)
+            .animation(.default, value: configuration.isPressed)
+    }
+}

package/ios/Extensions/Color++.swift

@@ -1,6 +1,38 @@
 import SwiftUI
+import Foundation
+
+private final class MoMoUIKitsBundleToken {}
+
+enum MoMoUIKitsResources {
+    static let bundle: Bundle = {
+        let bundleName = "MoMoUIKitsResources"
+        let tokenBundle = Bundle(for: MoMoUIKitsBundleToken.self)
+        let frameworkBundle = Bundle(identifier: "org.cocoapods.MoMoUIKits")
+        let candidates = [
+            Bundle.main.resourceURL,
+            tokenBundle.resourceURL,
+            tokenBundle.bundleURL,
+            frameworkBundle?.resourceURL,
+            frameworkBundle?.bundleURL
+        ]
+
+        for candidate in candidates {
+            guard let bundleURL = candidate?.appendingPathComponent("\(bundleName).bundle"),
+                  let bundle = Bundle(url: bundleURL) else {
+                continue
+            }
+            return bundle
+        }
+
+        return Bundle.main
+    }()
+}
 
 public extension Color {
+    static func momoAsset(_ name: String) -> Color {
+        Color(name, bundle: MoMoUIKitsResources.bundle)
+    }
+
     init(hex: UInt, alpha: Double = 1) {
         self.init(
             .sRGB,

package/ios/Icon/Icon.swift

@@ -23,6 +23,9 @@ func loadIconSources() -> [String: IconSource] {
 // Load the JSON data into a global variable
 let iconSources: [String: IconSource] = loadIconSources()
 
+// Icons that must never be tinted (mirror Compose `noThemeIcons`)
+let noThemeIcons: [String] = ["ic_round_momo_tiny"]
+
 // Icon ViewModel
 public struct Icon: View {
     var source: String
@@ -44,7 +47,13 @@ public struct Icon: View {
 
     public var body: some View {
         if let uri = iconSources[source]?.uri {
-            ImageView(uri, color: color).frame(width: size, height: size)
+            // Mirror Compose: certain icons (e.g. branded glyphs) are never tinted
+            let resolvedColor = noThemeIcons.contains(source) ? nil : color
+            ImageView(uri, color: resolvedColor)
+                .frame(width: size, height: size)
+                // Mirrors Compose's auto-generated `contentDescription = "img|$iconUrl"`
+                // when no explicit label is provided.
+                .accessibilityLabel(accessibilityLabel ?? "img|\(uri)")
         }
     }
 }

package/ios/IconButton/IconButton.swift

@@ -0,0 +1,140 @@
+import Foundation
+import SwiftUI
+
+// MARK: - IconSize
+
+public enum IconSize {
+    case large
+    case medium
+    case small
+
+    /// Container width/height of the button.
+    var containerSize: CGFloat {
+        switch self {
+        case .large: return 48
+        case .medium: return 36
+        case .small: return 28
+        }
+    }
+
+    /// Glyph size of the icon inside the button.
+    var iconSize: CGFloat {
+        switch self {
+        case .large: return 24
+        case .medium, .small: return 16
+        }
+    }
+}
+
+// MARK: - IconShape
+
+public enum IconShape {
+    case circle
+    case square
+}
+
+// MARK: - IconButton
+
+public struct IconButton: View {
+    @Environment(\.appTheme) private var theme
+
+    var icon: String
+    var onClick: () -> Void
+    var type: ButtonType
+    var size: IconSize
+    var shape: IconShape
+    var color: Color?
+
+    public init(
+        icon: String = "",
+        onClick: @escaping () -> Void,
+        type: ButtonType = .primary,
+        size: IconSize = .small,
+        shape: IconShape = .circle,
+        color: Color? = nil
+    ) {
+        self.icon = icon
+        self.onClick = onClick
+        self.type = type
+        self.size = size
+        self.shape = shape
+        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(IconButtonShape(shape))
+                .overlay(
+                    IconButtonShape(shape)
+                        .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
+        }
+    }
+}
+
+/// Type-erased shape switch (`Circle` vs a fixed `Radius.S` rounded rect) — mirrors
+/// Compose's `IconShape.toShape()`. `AnyShape` needs iOS 17+, so this hand-rolls the same
+/// erasure at the deployment target's iOS 15 floor.
+private struct IconButtonShape: Shape {
+    let shape: IconShape
+
+    init(_ shape: IconShape) {
+        self.shape = shape
+    }
+
+    func path(in rect: CGRect) -> Path {
+        switch shape {
+        case .circle:
+            return Circle().path(in: rect)
+        case .square:
+            return RoundedRectangle(cornerRadius: Radius.S).path(in: rect)
+        }
+    }
+}

package/ios/Image/Image.swift

@@ -5,15 +5,23 @@ import SDWebImageSwiftUI
 import SkeletonUI
 import SwiftUI
 
+public enum ImageState {
+    case loading, success, error
+}
+
 public struct ImageView: View {
+    @Environment(\.appTheme) private var theme
+
     // MARK: Lifecycle
 
-    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil, color: Color? = nil) {
+    public init(_ url: String, aspectRatio: CGFloat? = nil, contentMode: ContentMode = ContentMode.fit, placeholder: AnyView? = nil, color: Color? = nil, loading: Bool = true, onStateChanged: ((ImageState) -> Void)? = nil) {
         self.url = url
         self.aspectRatio = aspectRatio
         self.contentMode = contentMode
         self.placeholder = placeholder
         self.color = color
+        self.loading = loading
+        self.onStateChanged = onStateChanged
     }
 
     // MARK: Public
@@ -22,9 +30,11 @@ public struct ImageView: View {
         return WebImage(url: URL(string: url), isAnimating: .constant(true))
             .onFailure { _ in
                 error = true
+                onStateChanged?(.error)
             }
             .onSuccess { _, _, _ in
                 error = false
+                onStateChanged?(.success)
             }
             .resizable()
             .renderingMode(color != nil ? .template : .original)
@@ -34,20 +44,21 @@ public struct ImageView: View {
                         Image("media_fail")
                             .resizable()
                             .renderingMode(.template)
-                            .foregroundColor(Colors.black08)
+                            .foregroundColor(theme.colors.text.disable)
                             .frame(width: 24, height: 24)
                     } else if placeholder != nil {
                         placeholder
                     }
                 })
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
-                .skeleton(with: !error && placeholder == nil)
+                .skeleton(with: loading && !error && placeholder == nil)
                 .shape(type: .rectangle)
             }
             .scaledToFit()
             .transition(.fade)
             .aspectRatio(aspectRatio, contentMode: contentMode)
             .foregroundColor(color)
+            .onAppear { onStateChanged?(.loading) }
     }
 
     // MARK: Internal
@@ -56,6 +67,8 @@ public struct ImageView: View {
     var contentMode: ContentMode
     var placeholder: AnyView?
     var color: Color?
+    var loading: Bool
+    var onStateChanged: ((ImageState) -> Void)?
 
     @State var error: Bool = false
     var url: String

package/ios/Information/Information.swift

@@ -7,6 +7,8 @@ public enum InformationState {
 }
 
 public struct Information: View {
+    @Environment(\.appTheme) private var theme
+
     private let title: String?
     private let description: String
     private let state: InformationState
@@ -93,7 +95,7 @@ public struct Information: View {
                 .frame(maxWidth: .infinity, alignment: .leading)
 
                 if let onPressClose, showIconClose {
-                    Icon(source: "navigation_close", size: 16, color: Colors.black17)
+                    Icon(source: "navigation_close", size: 16, color: theme.colors.text.default)
                         .contentShape(Rectangle())
                         .onTapGesture(perform: onPressClose)
                 }

package/ios/Input/ErrorView.swift

@@ -8,6 +8,8 @@
 import SwiftUI
 
 public struct ErrorView: View {
+    @Environment(\.appTheme) private var theme
+
     public var errorMessage: String
     public var errorSpacing: Bool
     public var hintText: String
@@ -43,7 +45,7 @@ public struct ErrorView: View {
     // MARK: - Helpers
     
     private func displayColor() -> Color {
-        !errorMessage.isEmpty ? Colors.red03 : Colors.black12
+        !errorMessage.isEmpty ? theme.colors.error.primary : theme.colors.text.hint
     }
     
     private func displayText() -> String {