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

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 {

package/ios/Input/Input.swift

@@ -35,6 +35,8 @@ public struct Input: View {
     
     @State private var isFocused: Bool = false
     @State private var isPasswordHidden: Bool = true
+    @FocusState private var isFieldFocused: Bool
+    @State private var floatingLabelHeight: CGFloat = 16
     
     public init(
         text: Binding<String>,
@@ -99,8 +101,13 @@ public struct Input: View {
         let textBinding = Binding<String>(
             get: { self.text },
             set: { newValue in
-                self.text = newValue
-                self.onChangeText?(limitText(newValue))
+                // Trim atomically before publishing, mirroring Kotlin's `onValueChange`
+                // (`newText.take(maxLength)` before the state ever updates) — avoids a
+                // render with the untrimmed value that a separate `.onChange` correction
+                // would otherwise briefly show.
+                let limited = limitText(newValue)
+                self.text = limited
+                self.onChangeText?(limited)
             }
         )
 
@@ -118,8 +125,19 @@ public struct Input: View {
                         }
                     }
                     .padding(.horizontal, Spacing.S)
+                    .background(
+                        GeometryReader { geo in
+                            Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                        }
+                    )
                     .background(theme.colors.background.surface)
-                    .offset(x: Spacing.S, y: -8)
+                    // Kotlin centers the label within the (box-height-tall) decorationBox
+                    // by default, then applies `offsetY = -size.values.height / 2` — net
+                    // effect: the label ends up centered exactly on the box's top border
+                    // (spanning -labelHeight/2 ... +labelHeight/2 around y=0). Our ZStack
+                    // anchors top-leading instead, so reproducing that requires offsetting
+                    // by half the label's OWN measured height, not half the box height.
+                    .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
                     .zIndex(10)
                 }
                 
@@ -151,6 +169,7 @@ public struct Input: View {
                                 cursorColor: UIColor(theme.colors.primary),
                                 isDisabled: disabled || readOnly,
                                 maxLength: maxLength,
+                                autofocus: autofocus,
                                 onFocusChange: { focused in
                                     handleFocusChange(focused)
                                 },
@@ -166,11 +185,9 @@ public struct Input: View {
                             .foregroundColor(getTextColor())
                             .disabled(disabled || readOnly)
                             .applyCursorColor(theme.colors.primary)
-                            .onChange(of: text) { newValue in
-                                let limited = limitText(newValue)
-                                if limited != newValue {
-                                    text = limited
-                                }
+                            .focused($isFieldFocused)
+                            .onAppear {
+                                if autofocus { isFieldFocused = true }
                             }
                         }
                     }
@@ -312,6 +329,7 @@ private struct SecureInputField: UIViewRepresentable {
     var cursorColor: UIColor
     var isDisabled: Bool
     var maxLength: Int?
+    var autofocus: Bool = false
     var onFocusChange: (Bool) -> Void
     var onChangeText: ((String) -> Void)?
 
@@ -336,6 +354,11 @@ private struct SecureInputField: UIViewRepresentable {
             action: #selector(Coordinator.textFieldDidChange(_:)),
             for: .editingChanged
         )
+        if autofocus {
+            DispatchQueue.main.async {
+                textField.becomeFirstResponder()
+            }
+        }
         return textField
     }
 

package/ios/Input/InputPhoneNumber.swift

@@ -16,6 +16,7 @@ public struct InputPhoneNumber: View {
     public var error: String
     public var errorSpacing: Bool
     public var loading: Bool
+    public var required: Bool
     public var rightIcon: String
     public var rightIconColor: Color?
     public var autofocus: Bool
@@ -24,8 +25,9 @@ public struct InputPhoneNumber: View {
     public var onBlur: (() -> Void)?
     public var onRightIconPressed: (() -> Void)?
     public var accessibilityLabel: String?
-    
+
     @State private var isFocused: Bool = false
+    @FocusState private var isFieldFocused: Bool
     
     public init(
         text: Binding<String>,
@@ -52,6 +54,7 @@ public struct InputPhoneNumber: View {
         self.error = error
         self.errorSpacing = errorSpacing
         self.loading = loading
+        self.required = required
         self.rightIcon = rightIcon
         self.rightIconColor = rightIconColor
         self.autofocus = autofocus
@@ -90,9 +93,13 @@ public struct InputPhoneNumber: View {
                 // Text input
                 ZStack(alignment: .leading) {
                     if text.isEmpty {
-                        MomoText(placeholder, typography: size == .small ? .headerSSemibold : .headerMBold, color: theme.colors.text.hint)
+                        MomoText(
+                            placeholder + (required ? " *" : ""),
+                            typography: size == .small ? .headerSSemibold : .headerMBold,
+                            color: theme.colors.text.hint
+                        )
                     }
-                    
+
                     TextField("", text: textBinding, onEditingChanged: { focused in
                         handleFocusChange(focused)
                     })
@@ -102,6 +109,10 @@ public struct InputPhoneNumber: View {
                     .foregroundColor(theme.colors.text.default)
                     .applyCursorColor(theme.colors.primary)
                     .lineLimit(1)
+                    .focused($isFieldFocused)
+                    .onAppear {
+                        if autofocus { isFieldFocused = true }
+                    }
                     .accessibility(identifier: accessibilityLabel ?? "")
                     .accessibilityValue(textBinding.wrappedValue.isEmpty ? placeholder : textBinding.wrappedValue)
                 }

package/ios/Input/InputSearch.swift

@@ -238,7 +238,13 @@ public struct InputSearch: View {
                     }
                     
                     if isFocused && !text.isEmpty {
-                        SwiftButton(action: { text = "" }) {
+                        SwiftButton(action: {
+                            text = ""
+                            // Kotlin's clear icon fires a callback distinct from
+                            // onChangeText (`onClearPress`, not ported here); route
+                            // through onChangeText so clearing isn't a silent no-op.
+                            onChangeText("")
+                        }) {
                             Image(systemName: "xmark.circle.fill")
                                 .foregroundColor(theme.colors.text.hint)
                                 .frame(width: 16, height: 16)

package/ios/Input/InputTextArea.swift

@@ -109,6 +109,7 @@ public struct InputTextArea: View {
     
     @State private var isFocused = false
     @State private var isBlurred = false
+    @State private var floatingLabelHeight: CGFloat = 16
     
     // Make the initializer public
     public init(
@@ -182,45 +183,88 @@ public struct InputTextArea: View {
                                 }
                             }
                             .padding(.horizontal, Spacing.S)
+                            .background(
+                                GeometryReader { geo in
+                                    Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                                }
+                            )
                             .background(theme.colors.background.surface)
-                            .offset(x: Spacing.S, y: -height / 10)
+                            // Kotlin centers the label within the box-height-tall decorationBox
+                            // by default, then applies `offsetY = -scaleHeight / 2` — net effect:
+                            // the label ends up centered exactly on the box's top border. Our
+                            // ZStack anchors top-leading instead, so matching that requires
+                            // offsetting by half the label's OWN measured height, not half the
+                            // (104pt-tall) text-area box height.
+                            .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
                             .zIndex(10)
                         }
-                        
+
                         VStack {
-                            ZStack(alignment: .topLeading) {
-                                if text.isEmpty {
-                                    Text(placeholder)
-                                        .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
-                                        .font(.system(size: 16, weight: fontWeight))
-                                        .padding(.horizontal, 16)
-                                        .padding(.vertical, 12)
+                            HStack(alignment: .top, spacing: 0) {
+                                ZStack(alignment: .topLeading) {
+                                    if text.isEmpty {
+                                        Text(placeholder)
+                                            .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
+                                            .font(.system(size: 16, weight: fontWeight))
+                                            .padding(.horizontal, 16)
+                                            .padding(.vertical, 12)
+                                    }
+
+                                    UITextViewWrapper(
+                                        text: $text,
+                                        maxLength: maxLength,
+                                        textColor: disabled ? theme.colors.text.disable : theme.colors.text.default,
+                                        cursorColor: theme.colors.primary,
+                                        fontWeight: fontWeight,
+                                        disabled: disabled,
+                                        onChangeText: onChangeText,
+                                        onDone: {
+                                        // Handle done action if needed
+                                    },
+                                    onFocus: {
+                                        isFocused = true
+                                        onFocus()
+                                    }, onBlur: {
+                                        isFocused = false
+                                        isBlurred = true
+                                        onBlur()
+                                    })
+                                    .frame(height: height)
+                                    .padding(.horizontal, 12)
+                                    .padding(.vertical, 8)
+                                    .disabled(disabled)
                                 }
-                                
-                                UITextViewWrapper(
-                                    text: $text,
-                                    maxLength: maxLength,
-                                    textColor: disabled ? theme.colors.text.disable : theme.colors.text.default,
-                                    cursorColor: theme.colors.primary,
-                                    fontWeight: fontWeight,
-                                    disabled: disabled,
-                                    onChangeText: onChangeText,
-                                    onDone: {
-                                    // Handle done action if needed
-                                },
-                                onFocus: {
-                                    isFocused = true
-                                    onFocus()
-                                }, onBlur: {
-                                    isFocused = false
-                                    isBlurred = true
-                                    onBlur()
-                                })
-                                .frame(height: height)
-                                .padding(.horizontal, 12)
-                                .padding(.vertical, 8)
-                                .disabled(disabled)                            }
-                            
+                                .frame(maxWidth: .infinity)
+
+                                // Clear button (mirrors Compose: focused + non-empty).
+                                if isFocused && !text.isEmpty {
+                                    SwiftUI.Button(action: {
+                                        text = ""
+                                        onChangeText("")
+                                    }) {
+                                        Icon(source: "24_navigation_close_circle_full", size: 16, color: theme.colors.text.hint)
+                                    }
+                                    .padding(.leading, Spacing.XS)
+                                    .padding(.top, 12)
+                                }
+
+                                // Loading indicator and right icon (independent, mirrors
+                                // Compose's RenderRightIcon: both can render at once).
+                                if loading {
+                                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                                        .frame(width: 16, height: 16)
+                                        .padding(.leading, Spacing.XS)
+                                        .padding(.top, 12)
+                                }
+                                if !icon.isEmpty {
+                                    SwiftUI.Button(action: onRightIconPressed) {
+                                        Icon(source: icon, size: 24, color: disabled ? theme.colors.text.disable : (iconColor ?? theme.colors.text.default))
+                                    }
+                                    .padding(.leading, Spacing.XS)
+                                    .padding(.top, 12)
+                                }
+                            }
+
                             HStack {
                                 Spacer()
                                 MomoText("\(text.count)/\(maxLength)", typography: .descriptionXsRegular, color: theme.colors.text.hint)

package/ios/InputDropDown/InputDropDown.swift

@@ -16,10 +16,13 @@ private struct RenderRightIcon: View {
     let onPressed: () -> Void
 
     var body: some View {
+        // Mirrors Compose's two independent `if` blocks: loading spinner and icon
+        // can both render at once, not exclusively (not an if/else).
         if loading {
             ActivityIndicator(isAnimating: .constant(true), style: .medium)
                 .frame(width: 16, height: 16)
-        } else if !icon.isEmpty {
+        }
+        if !icon.isEmpty {
             SwiftUI.Button(action: onPressed) {
                 Icon(source: icon, size: 24, color: color)
             }

package/ios/InputMoney/InputMoney.swift

@@ -75,6 +75,7 @@ public struct InputMoney: View {
     public var onBlur: (() -> Void)?
 
     @State private var isFocused: Bool = false
+    @State private var floatingLabelHeight: CGFloat = 16
 
     public init(
         text: Binding<String>,
@@ -141,8 +142,18 @@ public struct InputMoney: View {
                         }
                     }
                     .padding(.horizontal, Spacing.S)
+                    .background(
+                        GeometryReader { geo in
+                            Color.clear.onAppear { floatingLabelHeight = geo.size.height }
+                        }
+                    )
                     .background(theme.colors.background.surface)
-                    .offset(x: Spacing.S, y: -8)
+                    // Kotlin centers the label within the box-height-tall decorationBox by
+                    // default, then applies `offsetY = -size.values.height / 2` — net effect:
+                    // the label ends up centered exactly on the box's top border. Our ZStack
+                    // anchors top-leading instead, so matching that requires offsetting by
+                    // half the label's OWN measured height, not half the box height.
+                    .offset(x: Spacing.S, y: -floatingLabelHeight / 2)
                     .zIndex(10)
                 }
 
@@ -188,13 +199,14 @@ public struct InputMoney: View {
                         }
                     }
 
-                    // Loading indicator
+                    // Loading indicator and right icon can both render (mirrors
+                    // Compose's two independent `if` blocks, not if/else).
                     if loading {
                         ActivityIndicator(isAnimating: .constant(true), style: .medium)
                             .frame(width: 16, height: 16)
                             .padding(.leading, Spacing.S)
-                    } else if !icon.isEmpty {
-                        // Right icon
+                    }
+                    if !icon.isEmpty {
                         SwiftUI.Button(action: { onPressIcon?() }) {
                             Icon(source: icon, size: 24, color: iconTintColor)
                                 .padding(.leading, Spacing.S)

package/ios/Popup/PopupDisplay.swift

@@ -54,6 +54,8 @@ extension View {
 // MARK: - PopupDisplay
 
 public struct PopupDisplay: View {
+    @EnvironmentObject private var localize: Localize
+
     // MARK: Lifecycle
 
     public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "", isShowCloseIcon: Bool = true) {
@@ -91,9 +93,6 @@ public struct PopupDisplay: View {
     @State private var isScrollable = false
     
     public var body: some View {
-        let language = UserDefaults.standard.string(forKey: "language")?.replacingOccurrences(of: "\"", with: "") ?? "vi"
-        let errorCodeLabels: [String: String] = ["vi": "Mã lỗi: ", "en": "Error code: "]
-        
         var shouldUseColumn: Bool {
             buttonDirection == .column || (buttonDirection == .auto && (closeButtonTitle.count > 12 || actionButtonTitle.count > 12))
         }
@@ -170,7 +169,7 @@ public struct PopupDisplay: View {
                         .padding(.bottom, 8)
                         
                         if(!errorCode.isEmpty) {
-                            MomoText((errorCodeLabels[language] ?? "Mã lỗi: ") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
+                            MomoText(localize.translate("errorCode") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
                                 .lineLimit(1)
                                 .padding(.bottom, 8)
                         }

package/ios/Popup/PopupNotify.swift

@@ -38,15 +38,14 @@ public struct PopupNotifyProps {
 }
 
 public struct PopupNotify: View {
+    @EnvironmentObject private var localize: Localize
+
     public let props: PopupNotifyProps
 
     @State private var descriptionHeight: CGFloat = 0
 
     private var errorCodePrefix: String {
-        let language = UserDefaults.standard
-            .string(forKey: "language")?
-            .replacingOccurrences(of: "\"", with: "") ?? "vi"
-        return language == "en" ? "Error code: " : "Mã lỗi: "
+        localize.translate("errorCode")
     }
 
     private var maxDescriptionHeight: CGFloat {

package/ios/Popup/PopupPromotion.swift

@@ -2,6 +2,8 @@ import SwiftUI
 import SDWebImageSwiftUI
 
 public struct PopupPromotion: View {
+    @Environment(\.appTheme) private var theme
+
     var imageUrl: String
     var onIconClose: (() -> Void)?
     var onAction: (() -> Void)?
@@ -18,21 +20,26 @@ public struct PopupPromotion: View {
     }
 
     public var body: some View {
+        // Mirrors Kotlin's `Modifier.fillMaxWidth().aspectRatio(0.72f)` box with
+        // `ContentScale.FillBounds` inside it: a fixed-ratio frame the image stretches
+        // to exactly fill (no `.aspectRatio` modifier on the image itself, unlike the
+        // previous `.fit`, which letterboxed instead of stretching).
+        let boxWidth = UIScreen.main.bounds.width - Spacing.XL * 2
+        let boxHeight = boxWidth / 0.72
+
         VStack(spacing: 8) {
             if(imageUrl.isEmpty) {
-                Icon(source: "media_fail", size: UIScreen.main.bounds.width - Spacing.XL * 2)
+                Icon(source: "media_fail", size: boxWidth)
             }
             else {
                 WebImage(url: URL(string: imageUrl)!)
                     .resizable()
                     .placeholder {
                         Color.gray
-                            .aspectRatio(0.72, contentMode: .fit)
-                            .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                            .frame(width: boxWidth, height: boxHeight)
                             .clipped()
                     }
-                    .aspectRatio(0.72, contentMode: .fit)
-                    .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
+                    .frame(width: boxWidth, height: boxHeight, alignment: .center)
                     .clipped()
                     .onTapGesture {
                         onAction?()
@@ -53,16 +60,17 @@ public struct PopupPromotion: View {
             }) {
                 ZStack {
                     Circle()
-                        .strokeBorder(Colors.black01, lineWidth: 2)
-                        .background(Circle().fill(Colors.black17))
+                        .strokeBorder(theme.colors.background.surface, lineWidth: 2)
+                        .background(Circle().fill(theme.colors.text.default))
                         .frame(width: 22, height: 22)
 
-                    Icon(source: "navigation_close", size: 16,  color: Colors.black01)
+                    Icon(source: "navigation_close", size: 16, color: theme.colors.background.surface)
                 }
                 .frame(width: 40, height: 40)
                 .padding(8)
                 .zIndex(1)
             }
+            .buttonStyle(.plain)
         }
     }
 

package/ios/ProgressInfo/ProgressInfo.swift

@@ -97,7 +97,7 @@ public struct ProgressInfo: View {
 // MARK: - Tokens
 
 private let progressInfoLineColor = Colors.pink08
-private let progressInfoAccentColor = Color(hex: "a50064") // pink_MoMo_Branding
+private let progressInfoAccentColor = Colors.pinkMoMoBranding
 
 // MARK: - Horizontal variant
 
@@ -196,6 +196,8 @@ private struct ProgressInfoHorizontal: View {
 // MARK: - Vertical variant
 
 private struct ProgressInfoVertical: View {
+    @Environment(\.appTheme) private var theme
+
     let steps: [ProgressInfoItem]
     let size: ProgressInfoSize
     let useNumber: Bool
@@ -218,7 +220,7 @@ private struct ProgressInfoVertical: View {
                         )
                         if !isLast {
                             Rectangle()
-                                .fill(Colors.primary.opacity(0.2))
+                                .fill(theme.colors.primary.opacity(0.2))
                                 .frame(width: 2)
                                 .frame(maxHeight: .infinity)
                         }

package/ios/Radio/Radio.swift

@@ -34,22 +34,21 @@ public struct Radio: View {
     }
 
     public var body: some View {
-        HStack(spacing: 0) {
-            RoundedRectangle(cornerRadius: Radius.M)
-                .stroke(borderColor, lineWidth: borderWidth)
-                .frame(width: 20, height: 20)
-                .padding(.trailing, label.isEmpty ? 0 : Spacing.XS)
+        SwiftUI.Button(action: onTap) {
+            HStack(spacing: 0) {
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .stroke(borderColor, lineWidth: borderWidth)
+                    .frame(width: 20, height: 20)
+                    .padding(.trailing, label.isEmpty ? 0 : Spacing.XS)
 
-            if !label.isEmpty {
-                MomoText(label, typography: .descriptionDefaultRegular)
-            }
-        }
-        .contentShape(Rectangle())
-        .onTapGesture {
-            if !disabled {
-                onTap()
+                if !label.isEmpty {
+                    MomoText(label, typography: .descriptionDefaultRegular)
+                }
             }
+            .contentShape(Rectangle())
         }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .disabled(disabled)
     }
 
     private var borderWidth: CGFloat {

package/ios/Rating/Rating.swift

@@ -52,7 +52,7 @@ public struct Rating: View {
             SwiftUI.Button(action: { onRatingChange(index + 1) }) {
                 icon
             }
-            .buttonStyle(.plain)
+            .buttonStyle(ActiveOpacityButtonStyle())
         } else {
             icon
         }

package/ios/Stepper/Stepper.swift

@@ -70,14 +70,14 @@ private struct StepperButton: View {
         let iconColor: Color = disabled ? theme.colors.text.disable : theme.colors.primary
         let iconName = sign == "-" ? "24_navigation_minus_circle" : "24_navigation_plus_circle"
 
-        SwiftUI.Button(action: { if !disabled { onPress() } }) {
+        SwiftUI.Button(action: onPress) {
             ZStack {
                 Circle().fill(theme.colors.background.disable)
                 Icon(source: iconName, size: specs.iconSize, color: iconColor)
             }
             .frame(width: specs.buttonSize, height: specs.buttonSize)
         }
-        .buttonStyle(.plain)
+        .buttonStyle(ActiveOpacityButtonStyle())
         .disabled(disabled)
     }
 }

package/ios/Steps/Steps.swift

@@ -201,7 +201,7 @@ private struct StepsHorizontal: View {
 
         let clickable = status == .completed && onPress != nil && !disabled
 
-        VStack(alignment: colAlignment, spacing: 0) {
+        let columnBody = VStack(alignment: colAlignment, spacing: 0) {
             if let time = item.time, !time.isEmpty {
                 MomoText(time, typography: .descriptionXsRegular, color: subColor)
                     .multilineTextAlignment(textAlignment)
@@ -250,8 +250,16 @@ private struct StepsHorizontal: View {
             }
         }
         .contentShape(Rectangle())
-        .onTapGesture {
-            if clickable { onPress?(item, index) }
+
+        if clickable {
+            // Mirrors Compose's `activeOpacityClickable` press feedback; non-clickable
+            // steps render with no press interaction at all.
+            SwiftUI.Button(action: { onPress?(item, index) }) {
+                columnBody
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            columnBody
         }
     }
 
@@ -338,7 +346,7 @@ private struct StepsVertical: View {
 
         let clickable = status == .completed && onPress != nil && !disabled
 
-        HStack(alignment: .top, spacing: 0) {
+        let rowBody = HStack(alignment: .top, spacing: 0) {
             VStack(spacing: 0) {
                 StepBubble(
                     index: index,
@@ -380,8 +388,16 @@ private struct StepsVertical: View {
         }
         .frame(maxWidth: .infinity)
         .contentShape(Rectangle())
-        .onTapGesture {
-            if clickable { onPress?(item, index) }
+
+        if clickable {
+            // Mirrors Compose's `activeOpacityClickable` press feedback; non-clickable
+            // steps render with no press interaction at all.
+            SwiftUI.Button(action: { onPress?(item, index) }) {
+                rowBody
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            rowBody
         }
     }
 }