@momo-kits/native-kits 0.167.1-duo.8 → 0.167.1-duo.9-debug

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

@@ -66,3 +66,21 @@ public extension Color {
         )
     }
 }
+
+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/Icon/Icon.swift

@@ -1,3 +1,4 @@
+import SDWebImageSwiftUI
 import SwiftUI
 
 struct IconSource: Codable {
@@ -47,7 +48,12 @@ public struct Icon: View {
             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.

package/ios/IconButton/IconButton.swift

@@ -28,7 +28,7 @@ public enum IconSize {
 
 // MARK: - IconShape
 
-public enum IconShape {
+public enum IconShape: Sendable {
     case circle
     case square
 }
@@ -68,8 +68,7 @@ public struct IconButton: View {
     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 border = borderColor
         let borderWidth = type.borderWidth
 
         SwiftUI.Button(action: {
@@ -82,9 +81,11 @@ public struct IconButton: View {
                 .background(bg)
                 .clipShape(IconButtonShape(shape))
                 .overlay(
+                    // Inside the bounds, like Compose `border`.
                     IconButtonShape(shape)
-                        .stroke(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+                        .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
                 )
+                .contentShape(IconButtonShape(shape))
         }
         .buttonStyle(.plain)
         .disabled(!isEnabled)
@@ -122,8 +123,9 @@ public struct IconButton: View {
 /// 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 {
+private struct IconButtonShape: InsettableShape {
     let shape: IconShape
+    var insetAmount: CGFloat = 0
 
     init(_ shape: IconShape) {
         self.shape = shape
@@ -132,9 +134,15 @@ private struct IconButtonShape: Shape {
     func path(in rect: CGRect) -> Path {
         switch shape {
         case .circle:
-            return Circle().path(in: rect)
+            return Circle().inset(by: insetAmount).path(in: rect)
         case .square:
-            return RoundedRectangle(cornerRadius: Radius.S).path(in: rect)
+            return RoundedRectangle(cornerRadius: Radius.S).inset(by: insetAmount).path(in: rect)
         }
     }
+
+    func inset(by amount: CGFloat) -> IconButtonShape {
+        var shape = self
+        shape.insetAmount += amount
+        return shape
+    }
 }

package/ios/Image/Image.swift

@@ -2,7 +2,6 @@
 
 import Foundation
 import SDWebImageSwiftUI
-import SkeletonUI
 import SwiftUI
 
 public enum ImageState {
@@ -39,22 +38,23 @@ public struct ImageView: View {
             .resizable()
             .renderingMode(color != nil ? .template : .original)
             .placeholder {
-                VStack(alignment: .center, content: {
+                VStack(alignment: .center) {
                     if error {
-                        ImageErrorIcon(color: theme.colors.text.disable)
-                    } else if placeholder != nil {
+                        Icon(source: "media_fail", color: theme.colors.text.disable)
+                    } else if let placeholder {
                         placeholder
+                    } else if loading {
+                        Skeleton()
                     }
-                })
+                }
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
-                .skeleton(with: loading && !error && placeholder == nil)
-                .shape(type: .rectangle)
             }
             .scaledToFit()
             .transition(.fade)
             .aspectRatio(aspectRatio, contentMode: contentMode)
             .foregroundColor(color)
             .onAppear { onStateChanged?(.loading) }
+            .onChange(of: url) { _ in error = false }
     }
 
     // MARK: Internal
@@ -69,30 +69,3 @@ public struct ImageView: View {
     @State var error: Bool = false
     var url: String
 }
-
-// A bare WebImage on purpose: going through `Icon` nests another `ImageView`, whose own
-// failure would render this placeholder again, without end while offline.
-private struct ImageErrorIcon: View {
-    let color: Color
-
-    var body: some View {
-        WebImage(url: URL(string: iconSources["media_fail"] ?? ""))
-            .resizable()
-            .renderingMode(.template)
-            .scaledToFit()
-            .foregroundColor(color)
-            .frame(width: 24, height: 24)
-    }
-}
-
-private struct ColorMultiplyModifier: ViewModifier {
-    let color: Color?
-
-    func body(content: Content) -> some View {
-        if let color {
-            content.colorMultiply(color)
-        } else {
-            content
-        }
-    }
-}

package/ios/Information/Information.swift

@@ -19,6 +19,7 @@ public struct Information: View {
     private let showIconClose: Bool
     private let onPressClose: (() -> Void)?
     private let highlightText: [String]
+    private let accessibilityLabel: String?
 
     public init(
         title: String? = nil,
@@ -30,7 +31,8 @@ public struct Information: View {
         action: String? = nil,
         showIconClose: Bool = true,
         onPressClose: (() -> Void)? = nil,
-        highlightText: [String] = []
+        highlightText: [String] = [],
+        accessibilityLabel: String? = nil
     ) {
         self.title = title
         self.description = description
@@ -42,6 +44,11 @@ public struct Information: View {
         self.showIconClose = showIconClose
         self.onPressClose = onPressClose
         self.highlightText = highlightText
+        self.accessibilityLabel = accessibilityLabel
+    }
+
+    private var automationId: String {
+        accessibilityLabel ?? "Information\(title.map { "/\($0)" } ?? "")"
     }
 
     private var borderColor: Color {
@@ -80,20 +87,23 @@ public struct Information: View {
         VStack(alignment: .leading, spacing: 0) {
             HStack(alignment: .top, spacing: 0) {
                 if let image {
-                    ImageView(image)
+                    ImageView(image, contentMode: .fill)
                         .frame(width: 40, height: 40)
                         .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+                        .accessibilityIdentifier("\(automationId)|img")
                         .padding(.trailing, Spacing.S)
                 } else if showIcon {
                     Icon(source: iconSource, size: 16, color: accentColor)
+                        .accessibilityIdentifier("\(automationId)|icon")
                         .padding(.trailing, Spacing.S)
                 }
 
                 VStack(alignment: .leading, spacing: 0) {
                     if let title {
-                        MomoText(title, typography: .labelDefaultMedium)
+                        MomoText(title, typography: .labelDefaultMedium, accessibilityId: "\(automationId)|title-text")
                     }
                     MomoText(description, typography: .descriptionDefaultRegular, highlightText: highlightText)
+                        .accessibilityIdentifier("\(automationId)|description-text")
                 }
                 .frame(maxWidth: .infinity, alignment: .leading)
 
@@ -101,15 +111,21 @@ public struct Information: View {
                     Icon(source: "navigation_close", size: 16, color: theme.colors.text.default)
                         .contentShape(Rectangle())
                         .onTapGesture(perform: onPressClose)
+                        .accessibilityAddTraits(.isButton)
+                        .accessibilityIdentifier("\(automationId)|close-icon-touch")
                 }
             }
 
             if let action, let onPressAction {
-                MomoText(action, typography: .actionXsBold, color: accentColor)
-                    .frame(maxWidth: .infinity, alignment: .trailing)
-                    .contentShape(Rectangle())
-                    .onTapGesture(perform: onPressAction)
-                    .padding(.top, Spacing.S)
+                HStack(spacing: 0) {
+                    MomoText(action, typography: .actionXsBold, color: accentColor, accessibilityId: "\(automationId)|cta-text")
+                }
+                .frame(maxWidth: .infinity, alignment: .trailing)
+                .contentShape(Rectangle())
+                .onTapGesture(perform: onPressAction)
+                .accessibilityElement(children: .contain)
+                .accessibilityIdentifier("\(automationId)|cta-touch")
+                .padding(.top, Spacing.S)
             }
         }
         .padding(Spacing.M)
@@ -119,8 +135,10 @@ public struct Information: View {
         )
         .overlay(
             RoundedRectangle(cornerRadius: Radius.S)
-                .stroke(borderColor, lineWidth: 0.5)
+                .strokeBorder(borderColor, lineWidth: 0.5)
         )
+        .accessibilityElement(children: .contain)
+        .accessibilityIdentifier(automationId)
     }
 }
 

package/ios/Input/ErrorView.swift

@@ -37,9 +37,9 @@ public struct ErrorView: View {
             }
             .padding(.top, Spacing.XS)
         } else if errorSpacing {
-            Spacer()
-                .padding(.top, Spacing.XS)
+            Color.clear
                 .frame(height: 18)
+                .padding(.top, Spacing.XS)
         }
     }