@momo-kits/native-kits 0.300.3-debug → 0.300.4-debug

package/ios/DateTimePicker/DateTimePicker.swift

@@ -36,33 +36,21 @@ public struct DateTimePicker: View {
         self.onChange = onChange
 
         let calendar = Calendar.current
-        let effectiveSelected = selectedValue ?? DateTimePickerUtils.getCurrentDateTime()
         let effectiveMin = minDate ?? DateTimePickerUtils.createRelativeDate(years: -10)
         let effectiveMax = maxDate ?? DateTimePickerUtils.createRelativeDate(years: 10)
 
         // needCheckRange is true only when the caller supplied no bounds.
         let needCheckRange = (minDate == nil && maxDate == nil)
 
-        let initialValue: Date
-        if !needCheckRange {
-            initialValue = effectiveSelected
-        } else if effectiveSelected < effectiveMin {
-            initialValue = effectiveMin
-        } else if effectiveSelected > effectiveMax {
-            initialValue = effectiveMax
-        } else {
-            initialValue = effectiveSelected
-        }
-
-        let comps = calendar.dateComponents([.year, .month, .day, .hour, .minute], from: initialValue)
-        self._currentData = State(initialValue: DateTimePickerData(
-            day: comps.day ?? 1,
-            month: comps.month ?? 1,
-            year: comps.year ?? 2000,
-            hour: comps.hour ?? 0,
-            minute: comps.minute ?? 0
+        self._currentData = State(initialValue: Self.pickerData(
+            selectedValue: selectedValue,
+            effectiveMin: effectiveMin,
+            effectiveMax: effectiveMax,
+            needCheckRange: needCheckRange
         ))
 
+        self.effectiveMin = effectiveMin
+        self.effectiveMax = effectiveMax
         self.effectiveMinComponents = calendar.dateComponents([.year, .month, .day, .hour, .minute], from: effectiveMin)
         self.effectiveMaxComponents = calendar.dateComponents([.year, .month, .day, .hour, .minute], from: effectiveMax)
         self.needCheckRange = needCheckRange
@@ -102,9 +90,10 @@ public struct DateTimePicker: View {
         }
         .frame(maxWidth: .infinity)
         .frame(height: pickerHeight)
-        .background(theme.colors.background.surface)
         .padding(.horizontal, Spacing.M)
+        .background(theme.colors.background.surface)
         .onAppear { emitIfValid() }
+        .onChange(of: selectedValue) { value in resetSelection(to: value) }
     }
 
     // MARK: Internal
@@ -119,10 +108,55 @@ public struct DateTimePicker: View {
 
     @State private var currentData: DateTimePickerData
 
+    private let effectiveMin: Date
+    private let effectiveMax: Date
     private let effectiveMinComponents: DateComponents
     private let effectiveMaxComponents: DateComponents
     private let needCheckRange: Bool
 
+    /// Mirrors Compose `initialValue`: the selection is clamped only when no bounds were supplied.
+    private static func pickerData(
+        selectedValue: Date?,
+        effectiveMin: Date,
+        effectiveMax: Date,
+        needCheckRange: Bool
+    ) -> DateTimePickerData {
+        let effectiveSelected = selectedValue ?? DateTimePickerUtils.getCurrentDateTime()
+        let initialValue: Date
+        if !needCheckRange {
+            initialValue = effectiveSelected
+        } else if effectiveSelected < effectiveMin {
+            initialValue = effectiveMin
+        } else if effectiveSelected > effectiveMax {
+            initialValue = effectiveMax
+        } else {
+            initialValue = effectiveSelected
+        }
+
+        let comps = Calendar.current.dateComponents([.year, .month, .day, .hour, .minute], from: initialValue)
+        return DateTimePickerData(
+            day: comps.day ?? 1,
+            month: comps.month ?? 1,
+            year: comps.year ?? 2000,
+            hour: comps.hour ?? 0,
+            minute: comps.minute ?? 0
+        )
+    }
+
+    /// Compose re-seeds the wheels when `selectedValue` changes (`remember(initialValue)`).
+    /// A caller echoing `onChange` back lands on the current selection and is a no-op.
+    private func resetSelection(to value: Date?) {
+        var next = Self.pickerData(
+            selectedValue: value,
+            effectiveMin: effectiveMin,
+            effectiveMax: effectiveMax,
+            needCheckRange: needCheckRange
+        )
+        // The date carries no AM/PM, so keep the wheel's choice.
+        next.timeMode = currentData.timeMode
+        if next != currentData { currentData = next }
+    }
+
     private func selectedDataFor(_ name: String) -> String {
         switch name {
         case "day": return DateTimePickerUtils.paddingNum(currentData.day)

package/ios/DateTimePicker/WheelPicker.swift

@@ -10,9 +10,8 @@ private let wheelPickerBorderWidth: CGFloat = 1
 
 /// 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)`.
+/// Five rows tall with the selection in the middle row. A drag always settles on a row
+/// (Compose snaps once the scroll stops) and then reports it via `onChange(name, value)`.
 public struct WheelPicker: View {
     @Environment(\.appTheme) private var theme
 
@@ -28,68 +27,50 @@ public struct WheelPicker: View {
         self.data = data
         self.selectedData = selectedData
         self.onChange = onChange
+        _restIndex = State(initialValue: Self.index(of: selectedData, in: data))
     }
 
     // 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)
+        let position = self.position
+        let centerSlot = CGFloat(wheelVisibleCount / 2)
+
+        return Rectangle()
+            .fill(theme.colors.background.surface)
+            .overlay(
+                // Compose draws the selection band behind the rows.
+                Rectangle()
+                    .fill(Colors.blue10)
+                    .opacity(0.2)
+                    .frame(height: wheelItemHeight)
+            )
+            .overlay(
+                VStack(spacing: 0) {
+                    ForEach(Array(data.enumerated()), id: \.offset) { index, text in
+                        WheelPickerItem(text: text, distance: abs(CGFloat(index) - position))
                     }
                 }
+                .offset(y: (centerSlot - position) * wheelItemHeight),
+                alignment: .top
+            )
+            .frame(maxWidth: .infinity)
+            .frame(height: wheelItemHeight * CGFloat(wheelVisibleCount))
+            .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.S)
+                    .strokeBorder(theme.colors.border.default, lineWidth: wheelPickerBorderWidth)
+            )
+            .contentShape(Rectangle())
+            .gesture(dragGesture)
+            .onAppear { reportIfUnlisted() }
+            .onChange(of: selectedData) { _ in syncToSelection() }
+            .onChange(of: data) { _ in syncToSelection() }
+            .accessibilityElement()
+            .accessibilityValue(data.indices.contains(restIndex) ? data[restIndex] : "")
+            .accessibilityAdjustableAction { direction in
+                settle(at: restIndex + (direction == .increment ? 1 : -1))
             }
-        }
-        .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
@@ -99,24 +80,60 @@ public struct WheelPicker: View {
     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: Private
+
+    @State private var restIndex: Int
+    @State private var dragTranslation: CGFloat = 0
+
+    /// Fractional row index under the band; past either end the drag meets resistance.
+    private var position: CGFloat {
+        let raw = CGFloat(restIndex) - dragTranslation / wheelItemHeight
+        let last = CGFloat(max(0, data.count - 1))
+        if raw < 0 { return raw * 0.3 }
+        if raw > last { return last + (raw - last) * 0.3 }
+        return raw
+    }
+
+    private var dragGesture: some Gesture {
+        DragGesture(minimumDistance: 4)
+            .onChanged { value in
+                dragTranslation = value.translation.height
+            }
+            .onEnded { value in
+                let predicted = CGFloat(restIndex) - value.predictedEndTranslation.height / wheelItemHeight
+                settle(at: Int(predicted.rounded()))
+            }
+    }
+
+    /// Like Compose `paddedData.indexOf(selectedData).coerceAtLeast(2)`: an unknown value shows the first row.
+    private static func index(of value: String, in data: [String]) -> Int {
+        data.firstIndex(of: value) ?? 0
+    }
+
+    private func settle(at index: Int) {
+        let target = min(max(index, 0), max(0, data.count - 1))
+        let rows = Double(abs(CGFloat(target) - position))
+        withAnimation(.easeOut(duration: min(0.5, 0.2 + 0.03 * rows))) {
+            restIndex = target
+            dragTranslation = 0
         }
+        guard data.indices.contains(target), data[target] != selectedData else { return }
+        onChange(name, data[target])
+    }
+
+    /// The parent may coerce the value (e.g. day 31 → 28) or swap the list; jump without animation
+    /// like Compose `scrollToItem`.
+    private func syncToSelection() {
+        restIndex = Self.index(of: selectedData, in: data)
+        dragTranslation = 0
+        reportIfUnlisted()
+    }
+
+    /// Compose reports the row the wheel lands on, so a value missing from `data` (minute 07 with a
+    /// 5-minute interval, an unset AM/PM) takes the shown row's value instead of drifting from it.
+    private func reportIfUnlisted() {
+        guard data.indices.contains(restIndex), !data.contains(selectedData) else { return }
+        onChange(name, data[restIndex])
     }
 }
 
@@ -126,40 +143,21 @@ private struct WheelPickerItem: View {
     @Environment(\.appTheme) private var theme
 
     let text: String
-    let isSelected: Bool
-    let index: Int
-    let scrollOffset: CGFloat
-    let viewportHeight: CGFloat
+    /// Rows between this one and the band.
+    let distance: 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)
+        MomoText(text, typography: .actionSBold, color: theme.colors.text.default)
+            .scaleEffect(1 - 0.13 * min(distance, 1))
+            .frame(maxWidth: .infinity)
+            .frame(height: wheelItemHeight)
+            .opacity(Self.opacity(distance))
     }
-}
-
-// MARK: - WheelOffsetKey
 
-private struct WheelOffsetKey: PreferenceKey {
-    static var defaultValue: CGFloat = 0
-    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
-        value = nextValue()
+    // RN parity: 1 on the band, 0.8 one row away, 0.4 from two rows on.
+    private static func opacity(_ distance: CGFloat) -> Double {
+        if distance <= 1 { return Double(1 - 0.2 * distance) }
+        if distance <= 2 { return Double(0.8 - 0.4 * (distance - 1)) }
+        return 0.4
     }
 }

package/ios/Divider/Divider.swift

@@ -1,16 +1,49 @@
 import Foundation
 import SwiftUI
 
+public enum DividerType {
+    case `default`
+    case dash
+}
+
 public struct MomoDivider: View {
     @Environment(\.appTheme) private var theme
 
-    public init() {}
+    private let useMargin: Bool
+    private let type: DividerType
+
+    public init(useMargin: Bool = false, type: DividerType = .default) {
+        self.useMargin = useMargin
+        self.type = type
+    }
 
     public var body: some View {
-        Rectangle()
-            .fill(theme.colors.border.default)
+        line
             .frame(maxWidth: .infinity)
             .frame(height: 1)
-            .padding(.vertical, Spacing.XS)
+            .padding(.vertical, useMargin ? Spacing.XS : 0)
+    }
+
+    @ViewBuilder
+    private var line: some View {
+        switch type {
+        case .default:
+            Rectangle().fill(theme.colors.border.default)
+        case .dash:
+            DividerDashLine()
+                .stroke(
+                    theme.colors.border.default,
+                    style: StrokeStyle(lineWidth: 1, lineCap: .round, dash: [4, 4])
+                )
+        }
+    }
+}
+
+private struct DividerDashLine: Shape {
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.move(to: CGPoint(x: rect.minX, y: rect.midY))
+        path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
+        return path
     }
 }

package/ios/Extensions/Color++.swift

@@ -43,15 +43,44 @@ public extension Color {
         )
     }
 
+    /// CSS-style `RGB`, `RGBA`, `RRGGBB` or `RRGGBBAA`, `#` optional; anything else is black.
     init(hex: String) {
-        let scanner = Scanner(string: hex)
-        var rgbValue: UInt64 = 0
-        scanner.scanHexInt64(&rgbValue)
-        
-        let r = (rgbValue & 0xff0000) >> 16
-        let g = (rgbValue & 0xff00) >> 8
-        let b = rgbValue & 0xff
-        
-        self.init(red: Double(r) / 0xff, green: Double(g) / 0xff, blue: Double(b) / 0xff)
+        var digits = hex.trimmingCharacters(in: .whitespacesAndNewlines)
+        if digits.hasPrefix("#") { digits.removeFirst() }
+        if digits.count == 3 || digits.count == 4 {
+            digits = String(digits.flatMap { [$0, $0] })
+        }
+        guard digits.count == 6 || digits.count == 8,
+              digits.allSatisfy(\.isHexDigit),
+              let value = UInt64(digits, radix: 16) else {
+            self.init(red: 0, green: 0, blue: 0)
+            return
+        }
+        let rgba = digits.count == 8 ? value : value << 8 | 0xFF
+        self.init(
+            .sRGB,
+            red: Double((rgba >> 24) & 0xFF) / 255,
+            green: Double((rgba >> 16) & 0xFF) / 255,
+            blue: Double((rgba >> 8) & 0xFF) / 255,
+            opacity: Double(rgba & 0xFF) / 255
+        )
+    }
+}
+
+extension Color {
+    /// Compose's `lerp(start, stop, fraction)`, in sRGB; `Color.mix` needs iOS 18.
+    func lerp(to other: Color, _ fraction: CGFloat) -> Color {
+        let t = min(max(fraction, 0), 1)
+        var (r1, g1, b1, a1): (CGFloat, CGFloat, CGFloat, CGFloat) = (0, 0, 0, 0)
+        var (r2, g2, b2, a2): (CGFloat, CGFloat, CGFloat, CGFloat) = (0, 0, 0, 0)
+        UIColor(self).getRed(&r1, green: &g1, blue: &b1, alpha: &a1)
+        UIColor(other).getRed(&r2, green: &g2, blue: &b2, alpha: &a2)
+        return Color(
+            .sRGB,
+            red: r1 + (r2 - r1) * t,
+            green: g1 + (g2 - g1) * t,
+            blue: b1 + (b2 - b1) * t,
+            opacity: a1 + (a2 - a1) * t
+        )
     }
 }

package/ios/Extensions/OptionalEnvironmentObject.swift

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// `@EnvironmentObject` that reads nil instead of trapping when nothing was injected.
+/// `_store` is the backing field of the `@frozen` `EnvironmentObject`, so its layout is ABI-stable.
+@propertyWrapper
+struct OptionalEnvironmentObject<Object: ObservableObject>: DynamicProperty {
+    @EnvironmentObject private var object: Object
+
+    var wrappedValue: Object? {
+        Mirror(reflecting: _object).descendant("_store") as? Object
+    }
+}

package/ios/Extensions/SkeletonUICompat.swift

@@ -0,0 +1,11 @@
+// File: ios/Extensions/SkeletonUICompat.swift
+// Created At: 2026-10-07 12:03:28 +07:00
+// Created By: AI
+// AI Agent: Claude Code
+// Model: claude-opus-5-5
+
+// AI-GENERATED START: keep SkeletonUI extensions visible to MoMoUIKits clients
+// Unused here on purpose: Swift 5 exposes extension members of every module a dependency imports, so clients
+// that only `import MoMoUIKits` rely on SkeletonUI's (e.g. `Text(String?)` in NativeWidget). Removing it breaks them.
+import SkeletonUI
+// AI-GENERATED END: keep SkeletonUI extensions visible to MoMoUIKits clients

package/ios/Icon/Icon.swift

@@ -1,30 +1,20 @@
+import SDWebImageSwiftUI
 import SwiftUI
 
 struct IconSource: Codable {
     let uri: String
 }
 
-func loadIconSources() -> [String: IconSource] {
-    guard let url = Bundle.main.url(forResource: "icon", withExtension: "json") else {
-        print("Error: icon.json not found")
-        return [:]
+// The compiled-in map (Icons.swift) wins; a host `icon.json` in the main bundle only adds keys
+// the kit doesn't know, so hosts that shipped one keep their extra icons.
+let iconSources: [String: String] = {
+    guard let url = Bundle.main.url(forResource: "icon", withExtension: "json"),
+          let data = try? Data(contentsOf: url),
+          let hostIcons = try? JSONDecoder().decode([String: IconSource].self, from: data) else {
+        return kitIcons
     }
-    
-    do {
-        let data = try Data(contentsOf: url)
-        let decoded = try JSONDecoder().decode([String: IconSource].self, from: data)
-        return decoded
-    } catch {
-        print("Error decoding icon.json: \(error)")
-        return [:]
-    }
-}
-
-// 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"]
+    return kitIcons.merging(hostIcons.mapValues(\.uri)) { kit, _ in kit }
+}()
 
 // Compose defaults `color` to the theme text color while `color = null` means "no tint".
 // Swift can't tell an omitted argument from an explicit `nil`, so the default is this
@@ -53,16 +43,24 @@ public struct Icon: View {
         }
 
     public var body: some View {
-        // Mirror Compose: an https source is used as-is, anything else is a key into icon.json
-        if let uri = source.contains("https") ? source : iconSources[source]?.uri {
+        // Mirror Compose: an https source is used as-is, anything else is a key into the icon map
+        if let uri = source.contains("https") ? source : iconSources[source] {
             let requestedColor = color == iconThemeColor ? theme.colors.text.default : color
             // Mirror Compose: certain icons (e.g. branded glyphs) are never tinted
             let resolvedColor = noThemeIcons.contains(source) ? nil : requestedColor
-            ImageView(uri, color: resolvedColor)
+            // Bare WebImage like Compose's AsyncImage: no skeleton while loading, nothing on failure.
+            WebImage(url: URL(string: uri), isAnimating: .constant(true))
+                .resizable()
+                .renderingMode(resolvedColor != nil ? .template : .original)
+                .scaledToFit()
+                .foregroundColor(resolvedColor)
                 .frame(width: size, height: size)
                 // Mirrors Compose's auto-generated `contentDescription = "img|$iconUrl"`
                 // when no explicit label is provided.
                 .accessibilityLabel(accessibilityLabel ?? "img|\(uri)")
+        } else {
+            // Compose keeps the sized box for an unknown key, so layouts don't collapse.
+            Color.clear.frame(width: size, height: size)
         }
     }
 }