@momo-kits/native-kits 0.162.21 → 0.162.22-debug

package/ios/Application/Navigation/Tracking/ScreenTracker.swift

@@ -0,0 +1,117 @@
+//
+//  ScreenTracker.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `navigation/tracking/ScreenTracker.kt`. Pure
+//  logic, no platform dependency beyond the `MaxApi` bridge.
+//
+
+import Foundation
+
+public final class ScreenTrackingState {
+    public var time: Double = Date().timeIntervalSince1970 * 1000
+    public var releaseNavigated: Bool = false
+    public var releaseLoad: Bool = false
+    public var releaseInteraction: Bool = false
+    public var previousScreenName: String?
+    public var action: String = "push"
+
+    public init() {}
+}
+
+public enum ScreenTracker {
+    private static var lastScreenName: String?
+
+    public static func trackScreenNavigated(
+        maxApi: MaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        action: String,
+        state: ScreenTrackingState
+    ) {
+        guard !state.releaseNavigated else { return }
+
+        let previousScreen = lastScreenName
+        lastScreenName = screenName
+
+        var params = buildBaseParams(context: context, screenName: screenName)
+        params["pre_screen_name"] = previousScreen
+        params["state"] = "navigated"
+        params["action"] = action
+        maxApi?.track(eventName: "auto_screen_navigated", params: params)
+
+        state.releaseNavigated = true
+        state.previousScreenName = previousScreen
+    }
+
+    public static func trackScreenDisplayed(
+        maxApi: MaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        duration: Double,
+        state: ScreenTrackingState
+    ) {
+        guard !state.releaseLoad else { return }
+
+        var params = buildBaseParams(context: context, screenName: screenName)
+        params["state"] = "load"
+        params["duration"] = duration
+        maxApi?.track(eventName: "auto_screen_displayed", params: params)
+
+        state.releaseLoad = true
+    }
+
+    public static func trackScreenInteracted(
+        maxApi: MaxApi?,
+        context: MiniAppContext?,
+        screenName: String,
+        duration: Double,
+        totalDuration: Double,
+        state: ScreenTrackingState
+    ) {
+        guard !state.releaseInteraction else { return }
+
+        var params = buildBaseParams(context: context, screenName: screenName)
+        params["state"] = "interaction"
+        params["duration"] = duration
+        params["total_duration"] = totalDuration
+        maxApi?.track(eventName: "auto_screen_interacted", params: params)
+
+        state.releaseInteraction = true
+    }
+
+    public static func trackPopupDisplayed(
+        maxApi: MaxApi?,
+        context: MiniAppContext?,
+        parentScreenName: String?
+    ) {
+        maxApi?.track(eventName: "auto_popup_displayed", params: [
+            "screen_name": parentScreenName,
+            "tracking_source": 1,
+            "app_id": context?.appId,
+            "feature_code": context?.appCode,
+            "kits_version": nil,
+            "component_name": "Modal"
+        ])
+    }
+
+    private static func buildBaseParams(
+        context: MiniAppContext?,
+        screenName: String,
+        componentName: String = "Screen"
+    ) -> [String: Any?] {
+        [
+            "app_id": context?.appId,
+            "feature_code": context?.appCode,
+            "screen_name": screenName,
+            "component_name": componentName,
+            "tracking_source": 1
+        ]
+    }
+
+    public static func getLastScreenName() -> String? { lastScreenName }
+
+    public static func reset() {
+        lastScreenName = nil
+    }
+}

package/ios/Application/StackScreen.swift

@@ -39,6 +39,7 @@ public struct StackScreen<Content: View>: View {
     var layoutOffset: CGFloat
     var inputSearchProps: InputSearchProps?
     var fabProps: FabProps?
+    var screenName: String = ""
     var content: () -> Content
 
     public init(
@@ -66,6 +67,7 @@ public struct StackScreen<Content: View>: View {
         layoutOffset: CGFloat = 56,
         inputSearchProps: InputSearchProps? = nil,
         fabProps: FabProps? = nil,
+        screenName: String = "",
         @ViewBuilder content: @escaping () -> Content
     ) {
         self.backgroundColor = backgroundColor
@@ -92,6 +94,7 @@ public struct StackScreen<Content: View>: View {
         self.layoutOffset = layoutOffset
         self.inputSearchProps = inputSearchProps
         self.fabProps = fabProps
+        self.screenName = screenName
         self.content = content
     }
 
@@ -100,6 +103,13 @@ public struct StackScreen<Content: View>: View {
     @State private var headerRightWidth: CGFloat = 0
     @State private var isBottomTabRoot: Bool = false
 
+    @Environment(\.applicationEnvironment) private var appEnv
+
+    // Auto-tracking state (mirrors Compose's `remember { ScreenTrackingState() }` +
+    // the once-computed push/back `action`).
+    @State private var trackingState = ScreenTrackingState()
+    @State private var trackingAction: String = ScreenTracker.getLastScreenName() != nil ? "push" : "back"
+
     /// Header background fade tied to scroll: 0 → transparent (over a hero image
     /// or transparent header), 1 → opaque surface with the drop shadow.
     private var scrollOpacity: CGFloat { min(scrollOffset / 114, 1) }
@@ -193,6 +203,37 @@ public struct StackScreen<Content: View>: View {
             // taps still reach buttons/fields while also dismissing the keyboard.
             .modifier(HideKeyboardOnTap(enabled: keyboardShouldPersistTaps))
         }
+        .task(id: screenName) {
+            ScreenTracker.trackScreenNavigated(
+                maxApi: appEnv.maxApi,
+                context: appEnv.applicationContext,
+                screenName: screenName,
+                action: trackingAction,
+                state: trackingState
+            )
+            do {
+                try await Task.sleep(nanoseconds: 2_000_000_000)
+            } catch {
+                return
+            }
+            let loadTime = Date().timeIntervalSince1970 * 1000 - trackingState.time
+            ScreenTracker.trackScreenDisplayed(
+                maxApi: appEnv.maxApi,
+                context: appEnv.applicationContext,
+                screenName: screenName,
+                duration: loadTime,
+                state: trackingState
+            )
+            let interactionTime = Date().timeIntervalSince1970 * 1000 - trackingState.time
+            ScreenTracker.trackScreenInteracted(
+                maxApi: appEnv.maxApi,
+                context: appEnv.applicationContext,
+                screenName: screenName,
+                duration: interactionTime - loadTime,
+                totalDuration: interactionTime,
+                state: trackingState
+            )
+        }
     }
 
     // MARK: - Header + content layer

package/ios/Badge/BadgeRibbon.swift

@@ -196,6 +196,86 @@ public struct BadgeRibbon: View {
     }
 }
 
+/// Ported from Compose's `RoundedBadgeRibbon` (BadgeRibbon.kt:164-326): a canvas-drawn
+/// ribbon shape sized to its text, mirrored per corner via scaleX/scaleY (never an actual
+/// rotation) — the label gets the same scale applied a second time so it stays right-reading
+/// while only the ribbon shape flips.
+public struct RoundedBadgeRibbon: View {
+    let text: String
+    let position: RibbonPosition
+
+    public init(text: String = "Label", position: RibbonPosition = .topLeft) {
+        self.text = text
+        self.position = position
+    }
+
+    private var scale: (x: CGFloat, y: CGFloat) {
+        switch position {
+        case .topLeft: return (-1, 1)
+        case .topRight: return (1, 1)
+        case .bottomRight: return (1, -1)
+        case .bottomLeft: return (-1, -1)
+        }
+    }
+
+    private var measuredTextSize: CGSize {
+        let fontSize = scaleSize(TypographyStyle.labelXsMedium.fontSize)
+        let font = UIFont.systemFont(ofSize: fontSize, weight: .medium)
+        return text.size(withAttributes: [.font: font])
+    }
+
+    public var body: some View {
+        let textSize = measuredTextSize
+        let minRibbonHeight = max(textSize.height * 1.2, 16)
+        let padding = minRibbonHeight / 4
+        let badgeHeight = minRibbonHeight + padding
+        let badgeWidth = max(textSize.width + padding * 2, 28)
+
+        ZStack {
+            Canvas { context, size in
+                let ribbonHeight = size.height - padding
+                let cornerRadius = (badgeHeight - padding) / 2
+                let mainColor = Colors.orange03
+                let tailColor = Colors.red01
+
+                let headWidth: CGFloat = 4
+                // Kotlin computes `leftSectionWidth` + `middleSectionWidth` here, but those
+                // cancel algebraically to `width - headWidth` — kept as the direct result.
+                let rightX = size.width - headWidth
+
+                let leftMiddlePath = RoundedCorners(topLeft: cornerRadius, topRight: 0, bottomLeft: cornerRadius, bottomRight: 0)
+                    .path(in: CGRect(x: 0, y: 0, width: rightX + 1, height: ribbonHeight))
+                context.fill(leftMiddlePath, with: .color(mainColor))
+
+                let headPath = RoundedCorners(topLeft: 0, topRight: cornerRadius, bottomLeft: 0, bottomRight: 0)
+                    .path(in: CGRect(x: rightX, y: 0, width: headWidth, height: ribbonHeight))
+                context.fill(headPath, with: .color(mainColor))
+
+                let halfHeadWidth = headWidth / 2
+                let tailStartX = rightX + headWidth - halfHeadWidth
+                let tailY = ribbonHeight
+                let tailHeight = padding
+
+                context.fill(
+                    Path(CGRect(x: tailStartX, y: tailY, width: halfHeadWidth, height: halfHeadWidth)),
+                    with: .color(mainColor)
+                )
+
+                let tailRightPath = RoundedCorners(topLeft: 0, topRight: tailHeight, bottomLeft: 0, bottomRight: tailHeight)
+                    .path(in: CGRect(x: tailStartX, y: tailY, width: halfHeadWidth, height: tailHeight))
+                context.fill(tailRightPath, with: .color(tailColor))
+            }
+
+            MomoText(text, typography: .labelXsMedium, color: Colors.black01, maxLines: 1)
+                .padding(.bottom, padding)
+                .padding(.horizontal, padding / 2)
+                .scaleEffect(x: scale.x, y: scale.y)
+        }
+        .frame(width: badgeWidth, height: badgeHeight)
+        .scaleEffect(x: scale.x, y: scale.y)
+    }
+}
+
 // MARK: - Constants
 private struct RibbonConstants {
     static let ribbonHeight: CGFloat = 20

package/ios/Button/Button.swift

@@ -123,7 +123,6 @@ extension ButtonSize {
         case .large: return .actionDefaultBold
         case .medium: return .actionSBold
         case .small: return .actionXsBold
-        default : return .actionDefaultBold
         }
     }
 }
@@ -162,6 +161,35 @@ public struct Button: View {
         self.useTintColor = useTintColor
     }
 
+    /// Mirrors Kotlin's `Button(iconLeft: String, iconRight: String, ...)`, which resolves
+    /// icons by design-system source name through the shared `Icon` component rather than
+    /// a caller-supplied view. `iconLeft` is required here (unlike Kotlin's `= ""` default)
+    /// solely to keep this initializer unambiguous alongside the `AnyView`-based one above —
+    /// pass `""` explicitly for an icon-right-only button.
+    public init(
+        title: String = "Button",
+        action: @escaping () -> Void,
+        type: ButtonType = .primary,
+        size: ButtonSize = .large,
+        iconLeft: String,
+        iconRight: String = "",
+        isFull: Bool = true,
+        loading: Bool = false,
+        useTintColor: Bool = true
+    ) {
+        self.init(
+            title: title,
+            action: action,
+            type: type,
+            size: size,
+            iconLeft: iconLeft.isEmpty ? nil : AnyView(Icon(source: iconLeft)),
+            iconRight: iconRight.isEmpty ? nil : AnyView(Icon(source: iconRight)),
+            isFull: isFull,
+            loading: loading,
+            useTintColor: useTintColor
+        )
+    }
+
     private func shouldLoadingOnLeft(_ left: AnyView?, _ right: AnyView?) -> Bool {
         let hasLeft = left != nil
         let hasRight = right != nil
@@ -214,14 +242,15 @@ public struct Button: View {
             .frame(maxWidth: isFull ? .infinity : nil)
             .padding(.horizontal, size.padding)
             .frame(height: size.height)
-            .background(bg)
-            .overlay(
-                RoundedRectangle(cornerRadius: size.radius)
-                    .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
-            )
-            .clipShape(RoundedRectangle(cornerRadius: size.radius))
         }
-        .buttonStyle(ButtonPressFeedbackStyle(isEnabled: isEnabled))
+        .buttonStyle(ButtonPressFeedbackStyle(
+            isEnabled: isEnabled,
+            background: bg,
+            border: border,
+            borderWidth: borderWidth,
+            radius: size.radius,
+            height: size.height
+        ))
         .disabled(!isEnabled)
     }
 
@@ -238,12 +267,39 @@ public struct Button: View {
     }
 }
 
+/// Mirrors Compose's press feedback: the background shrinks via an animated
+/// horizontal inset while the content fades, rather than a plain opacity dim on
+/// the whole button (matching `animatedPadding`/`alpha` in Button.kt).
 private struct ButtonPressFeedbackStyle: ButtonStyle {
     let isEnabled: Bool
+    let background: Color
+    let border: Color?
+    let borderWidth: CGFloat
+    let radius: CGFloat
+    let height: CGFloat
 
     func makeBody(configuration: Configuration) -> some View {
-        configuration.label
-            .opacity(configuration.isPressed && isEnabled ? 0.5 : 1)
-            .animation(.easeInOut(duration: 0.1), value: configuration.isPressed)
+        let pressed = configuration.isPressed && isEnabled
+
+        ZStack {
+            RoundedRectangle(cornerRadius: radius)
+                .fill(background)
+                .overlay(
+                    RoundedRectangle(cornerRadius: radius)
+                        .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+                )
+                .padding(.horizontal, pressed ? 2 : 0)
+
+            configuration.label
+                .opacity(pressed ? 0.5 : 1)
+        }
+        // Pin the whole button to its intended height explicitly: the bare
+        // RoundedRectangle background has no intrinsic size of its own, so left
+        // unconstrained in a ZStack inside a non-height-constraining container
+        // (e.g. a footer VStack) it can report an oversized ideal height and
+        // stretch the button — and its container — far taller than intended.
+        .frame(height: height)
+        .clipShape(RoundedRectangle(cornerRadius: radius))
+        .animation(.easeInOut(duration: 0.1), value: pressed)
     }
 }

package/ios/Carousel/Carousel.swift

@@ -94,12 +94,27 @@ public struct Carousel<Content: View>: View {
         // Offset so the current page is centered within the viewport padding.
         let baseOffset = -CGFloat(currentPage) * step + contentPadding
 
+        // Windows the rendered range around `currentPage` instead of instantiating all
+        // `virtualPageCount` slides up front — with `loop=true`, that's `itemCount * 1000`
+        // eager views, a real memory/perf regression versus Compose's lazy `HorizontalPager`.
+        // Clear spacers of the skipped width keep the HStack's total layout size (and thus
+        // the existing `baseOffset` math) unchanged.
+        let windowRadius = 3
+        let windowStart = max(0, currentPage - windowRadius)
+        let windowEnd = min(virtualPageCount - 1, currentPage + windowRadius)
+
         ZStack {
             HStack(spacing: 0) {
-                ForEach(0 ..< virtualPageCount, id: \.self) { page in
+                if windowStart > 0 {
+                    Color.clear.frame(width: CGFloat(windowStart) * step)
+                }
+                ForEach(windowStart...windowEnd, id: \.self) { page in
                     slide(page: page, step: step, viewportWidth: viewportWidth)
                         .frame(width: pageWidth)
                 }
+                if windowEnd < virtualPageCount - 1 {
+                    Color.clear.frame(width: CGFloat(virtualPageCount - 1 - windowEnd) * step)
+                }
             }
             .offset(x: baseOffset + dragOffset)
             .animation(isDragging ? nil : .easeInOut(duration: 0.25), value: currentPage)

package/ios/Checkbox/Checkbox.swift

@@ -28,29 +28,23 @@ public struct Checkbox: View{
     public var body: some View {
         HStack(spacing: Spacing.S) {
             // Checkbox
-            ZStack {
-                RoundedRectangle(cornerRadius: Radius.XS)
-                    .fill(backgroundColor)
-                    .frame(width: 20, height: 20)
-                    .overlay(
-                        RoundedRectangle(cornerRadius: Radius.XS)
-                            .stroke(borderColor, lineWidth: Spacing.XXS)
-                    )
+            SwiftUI.Button(action: onCheck) {
+                ZStack {
+                    RoundedRectangle(cornerRadius: Radius.XS)
+                        .fill(backgroundColor)
+                        .frame(width: 20, height: 20)
+                        .overlay(
+                            RoundedRectangle(cornerRadius: Radius.XS)
+                                .stroke(borderColor, lineWidth: Spacing.XXS)
+                        )
 
-                if checked {
-                    Image(systemName: indeterminate ? "minus" : "checkmark")
-                        .resizable()
-                        .scaledToFit()
-                        .foregroundColor(Colors.black01)
-                        .frame(width: 12, height: 12)
-                }
-            }
-
-            .onTapGesture {
-                if !disabled {
-                    onCheck()
+                    if checked {
+                        Icon(source: indeterminate ? "navigation_minus" : "ic_checked", size: 20, color: Colors.black01)
+                    }
                 }
             }
+            .buttonStyle(ActiveOpacityButtonStyle(activeOpacity: 0.8))
+            .disabled(disabled)
 
             // Title
             if !title.isEmpty {

package/ios/Chip/Chip.swift

@@ -52,6 +52,13 @@ public struct Chip: View {
 
     public var body: some View {
         let dims = (size == .small) ? Self.Small : Self.Large
+        // Mirrors Compose's `scaleSize(...)` on every chip dimension so it responds
+        // to Dynamic Type scaling the same way the rest of the kit does.
+        let height = scaleSize(dims.height)
+        let horizontal = scaleSize(dims.horizontal)
+        let iconSize = scaleSize(dims.iconSize)
+        let iconSpacing = scaleSize(dims.iconSpacing)
+        let radius = scaleSize(Radius.L)
 
         let bg: Color = {
             if selected { return theme.colors.background.selected }
@@ -63,36 +70,38 @@ public struct Chip: View {
         let leftTint: Color = selected ? theme.colors.primary : iconLeftTint ?? theme.colors.text.default
         let rightTint: Color = selected ? theme.colors.primary : iconRightTint ?? theme.colors.text.default
 
-        HStack(spacing: dims.iconSpacing) {
-            if let iconLeft {
-                Icon(source: iconLeft, size: dims.iconSize, color: leftTint)
-            }
+        SwiftUI.Button(action: onClick) {
+            HStack(spacing: iconSpacing) {
+                if let iconLeft {
+                    Icon(source: iconLeft, size: iconSize, color: leftTint)
+                }
 
-            if let text = label, !text.isEmpty {
-                MomoText(text, typography: (size == .large) ? .labelDefaultMedium : .labelSMedium, color: textColor)
-                    .lineLimit(1)
-            }
+                if let text = label, !text.isEmpty {
+                    MomoText(text, typography: (size == .large) ? .labelDefaultMedium : .labelSMedium, color: textColor)
+                        .lineLimit(1)
+                }
 
-            if let iconRight {
-                Icon(source: iconRight, size: dims.iconSize, color: rightTint)
-            }
-        }
-        .padding(.horizontal, dims.horizontal)
-        .frame(height: dims.height)
-        .background(
-            RoundedRectangle(cornerRadius: Radius.L, style: .continuous)
-                .fill(bg)
-        )
-        .overlay(
-            Group {
-                if selected {
-                    RoundedRectangle(cornerRadius: Radius.L, style: .continuous)
-                        .stroke(theme.colors.secondary, lineWidth: 2)
+                if let iconRight {
+                    Icon(source: iconRight, size: iconSize, color: rightTint)
                 }
             }
-        )
-        .contentShape(RoundedRectangle(cornerRadius: Radius.L, style: .continuous))
-        .onTapGesture(perform: onClick)
+            .padding(.horizontal, horizontal)
+            .frame(height: height)
+            .background(
+                RoundedRectangle(cornerRadius: radius, style: .continuous)
+                    .fill(bg)
+            )
+            .overlay(
+                Group {
+                    if selected {
+                        RoundedRectangle(cornerRadius: radius, style: .continuous)
+                            .stroke(theme.colors.secondary, lineWidth: 2)
+                    }
+                }
+            )
+            .contentShape(RoundedRectangle(cornerRadius: radius, style: .continuous))
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
         .modifier(ChipAccessibilityModifier(accessibilityLabel: accessibilityLabel))
     }
 }

package/ios/Collapse/Collapse.swift

@@ -30,6 +30,7 @@ public struct Collapse<Content: View>: View {
     private let useBackgroundCollapseButton: Bool
     private let backgroundColor: Color?
     private let titleColor: Color?
+    private let accessibilityId: String?
     private let onPress: ((Bool) -> Void)?
     private let content: (() -> Content)?
 
@@ -49,6 +50,7 @@ public struct Collapse<Content: View>: View {
         useBackgroundCollapseButton: Bool = false,
         backgroundColor: Color? = nil,
         titleColor: Color? = nil,
+        accessibilityId: String? = nil,
         onPress: ((Bool) -> Void)? = nil,
         @ViewBuilder content: @escaping () -> Content
     ) {
@@ -65,11 +67,17 @@ public struct Collapse<Content: View>: View {
         self.useBackgroundCollapseButton = useBackgroundCollapseButton
         self.backgroundColor = backgroundColor
         self.titleColor = titleColor
+        self.accessibilityId = accessibilityId
         self.onPress = onPress
         self.content = content
         _expanded = State(initialValue: expandDefault)
     }
 
+    // Mirrors Kotlin's `accessibilityId ?: "Collapse/$title"`.
+    private var automationId: String {
+        accessibilityId ?? "Collapse/\(title)"
+    }
+
     private var resolvedBackgroundColor: Color {
         backgroundColor ?? theme.colors.background.surface
     }
@@ -97,6 +105,7 @@ public struct Collapse<Content: View>: View {
         .frame(maxWidth: .infinity)
         .background(resolvedBackgroundColor)
         .clipShape(RoundedRectangle(cornerRadius: Radius.S, style: .continuous))
+        .accessibilityIdentifier(automationId)
         .overlay(
             showBorder
                 ? RoundedRectangle(cornerRadius: Radius.S, style: .continuous)
@@ -159,7 +168,8 @@ public struct Collapse<Content: View>: View {
             .frame(maxWidth: .infinity)
             .contentShape(Rectangle())
         }
-        .buttonStyle(.plain)
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .accessibilityIdentifier("\(automationId)|touch")
     }
 
     private var chevron: some View {

package/ios/DateTimePicker/DateTimePicker.swift

@@ -14,6 +14,8 @@ private let datePickerWithLabelsHeight: CGFloat = 238
 /// - `"HH:mm"` shows hour + minute; a lone `"HH"` switches the hour wheel to a
 ///   12-hour clock with an AM/PM column.
 public struct DateTimePicker: View {
+    @Environment(\.appTheme) private var theme
+
     // MARK: Lifecycle
 
     public init(
@@ -84,7 +86,7 @@ public struct DateTimePicker: View {
 
                 VStack(spacing: 0) {
                     if hasLabel {
-                        MomoText(arrayLabelTime[index], typography: .actionSBold, color: Colors.text)
+                        MomoText(arrayLabelTime[index], typography: .actionSBold, color: theme.colors.text.default)
                             .padding(.bottom, Spacing.S)
                     }
 
@@ -100,7 +102,7 @@ public struct DateTimePicker: View {
         }
         .frame(maxWidth: .infinity)
         .frame(height: pickerHeight)
-        .background(Colors.background)
+        .background(theme.colors.background.surface)
         .padding(.horizontal, Spacing.M)
         .onAppear { emitIfValid() }
     }

package/ios/DateTimePicker/WheelPicker.swift

@@ -14,6 +14,8 @@ private let wheelPickerBorderWidth: CGFloat = 1
 /// 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(
@@ -76,9 +78,9 @@ public struct WheelPicker: View {
         .frame(height: wheelItemHeight * CGFloat(wheelVisibleCount))
         .overlay(
             RoundedRectangle(cornerRadius: Radius.S)
-                .stroke(Colors.border, lineWidth: wheelPickerBorderWidth)
+                .stroke(theme.colors.border.default, lineWidth: wheelPickerBorderWidth)
         )
-        .background(Colors.background.clipShape(RoundedRectangle(cornerRadius: Radius.S)))
+        .background(theme.colors.background.surface.clipShape(RoundedRectangle(cornerRadius: Radius.S)))
         .overlay(
             // Centered translucent selection band.
             Rectangle()
@@ -121,6 +123,8 @@ public struct WheelPicker: View {
 // MARK: - WheelPickerItem
 
 private struct WheelPickerItem: View {
+    @Environment(\.appTheme) private var theme
+
     let text: String
     let isSelected: Bool
     let index: Int
@@ -142,7 +146,7 @@ private struct WheelPickerItem: View {
         let scale: CGFloat = isSelected ? 1.0 : 0.87
 
         return ZStack {
-            MomoText(text, typography: .actionSBold, color: Colors.text)
+            MomoText(text, typography: .actionSBold, color: theme.colors.text.default)
                 .scaleEffect(scale)
         }
         .frame(maxWidth: .infinity)

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