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

package/ios/Collapse/Collapse.swift

@@ -32,7 +32,7 @@ public struct Collapse<Content: View>: View {
     private let titleColor: Color?
     private let accessibilityId: String?
     private let onPress: ((Bool) -> Void)?
-    private let content: (() -> Content)?
+    private var content: (() -> Content)?
 
     @State private var expanded: Bool
 
@@ -87,31 +87,36 @@ public struct Collapse<Content: View>: View {
             header
 
             if let content {
-                if expanded {
-                    VStack(spacing: 0) {
-                        content()
+                // Compose's expandVertically: the clip grows with the panel while it slides in from the top.
+                VStack(spacing: 0) {
+                    if expanded {
+                        VStack(spacing: 0) {
+                            content()
+                        }
+                        .frame(maxWidth: .infinity)
+                        .overlay(
+                            showBorder
+                                ? Rectangle().strokeBorder(theme.colors.border.default, lineWidth: 1)
+                                : nil
+                        )
+                        .transition(.move(edge: .top))
                     }
-                    .frame(maxWidth: .infinity)
-                    .overlay(
-                        showBorder
-                            ? RoundedRectangle(cornerRadius: 0)
-                                .stroke(theme.colors.border.default, lineWidth: 1)
-                            : nil
-                    )
-                    .transition(.move(edge: .top).combined(with: .opacity))
                 }
+                .clipped()
             }
         }
         .frame(maxWidth: .infinity)
         .background(resolvedBackgroundColor)
         .clipShape(RoundedRectangle(cornerRadius: Radius.S, style: .continuous))
-        .accessibilityIdentifier(automationId)
         .overlay(
             showBorder
                 ? RoundedRectangle(cornerRadius: Radius.S, style: .continuous)
-                    .stroke(theme.colors.border.default, lineWidth: 1)
+                    .strokeBorder(theme.colors.border.default, lineWidth: 1)
                 : nil
         )
+        // `.contain` keeps the children's own identifiers instead of overriding them.
+        .accessibilityElement(children: .contain)
+        .accessibilityIdentifier(automationId)
     }
 
     private var header: some View {
@@ -126,6 +131,7 @@ public struct Collapse<Content: View>: View {
                     ImageView(image, contentMode: .fill)
                         .frame(width: imageSize, height: imageSize)
                         .clipShape(RoundedRectangle(cornerRadius: Radius.XS, style: .continuous))
+                        .accessibilityIdentifier("\(automationId)|img")
                     Spacer().frame(width: Spacing.S)
                 }
 
@@ -133,15 +139,17 @@ public struct Collapse<Content: View>: View {
                     MomoText(
                         title,
                         typography: titleSize.typography,
-                        color: titleColor ?? theme.colors.text.default
+                        color: titleColor ?? theme.colors.text.default,
+                        accessibilityId: "\(automationId)|text"
                     )
                     if let description {
                         MomoText(
                             description,
                             typography: .bodyDefaultRegular,
-                            color: theme.colors.text.secondary
+                            color: theme.colors.text.secondary,
+                            maxLines: 2,
+                            accessibilityId: "\(automationId)|description-text"
                         )
-                        .lineLimit(2)
                     }
                 }
                 .frame(maxWidth: .infinity, alignment: .leading)
@@ -152,9 +160,10 @@ public struct Collapse<Content: View>: View {
                         MomoText(
                             subTitle,
                             typography: .bodyDefaultRegular,
-                            color: theme.colors.text.secondary
+                            color: theme.colors.text.secondary,
+                            maxLines: 1,
+                            accessibilityId: "\(automationId)|sub-title-text"
                         )
-                        .lineLimit(1)
                     } else if let tagLabel {
                         Tag(label: tagLabel, color: tagColor)
                     }
@@ -187,6 +196,48 @@ public struct Collapse<Content: View>: View {
                     .rotationEffect(.degrees(expanded ? 180 : 0))
             }
         }
+        .accessibilityIdentifier("\(automationId)|icon")
         .animation(.easeInOut(duration: 0.3), value: expanded)
     }
 }
+
+public extension Collapse where Content == EmptyView {
+    /// Header-only collapse, mirroring Compose's `content = null`.
+    init(
+        title: String,
+        description: String? = nil,
+        image: String? = nil,
+        imageSize: CGFloat = 24,
+        subTitle: String? = nil,
+        tagLabel: String? = nil,
+        tagColor: Tag.TagColor = .default,
+        showBorder: Bool = false,
+        expandDefault: Bool = false,
+        titleSize: CollapseTitleSize = .medium,
+        useBackgroundCollapseButton: Bool = false,
+        backgroundColor: Color? = nil,
+        titleColor: Color? = nil,
+        accessibilityId: String? = nil,
+        onPress: ((Bool) -> Void)? = nil
+    ) {
+        self.init(
+            title: title,
+            description: description,
+            image: image,
+            imageSize: imageSize,
+            subTitle: subTitle,
+            tagLabel: tagLabel,
+            tagColor: tagColor,
+            showBorder: showBorder,
+            expandDefault: expandDefault,
+            titleSize: titleSize,
+            useBackgroundCollapseButton: useBackgroundCollapseButton,
+            backgroundColor: backgroundColor,
+            titleColor: titleColor,
+            accessibilityId: accessibilityId,
+            onPress: onPress,
+            content: { EmptyView() }
+        )
+        self.content = nil
+    }
+}

package/ios/Colors+Radius+Spacing/Colors.swift

@@ -172,4 +172,13 @@ public enum Colors {
     public static let red03 = Color(hex: "f5222d")
     public static let red02 = Color(hex: "dd1f29")
     public static let red01 = Color(hex: "c41b24")
+
+    public static let opacityBlack20 = Color(hex: "00000033")
+    public static let opacityBlack40 = Color(hex: "00000066")
+    public static let opacityBlack60 = Color(hex: "00000099")
+    public static let opacityBlack80 = Color(hex: "000000cc")
+    public static let opacityWhite20 = Color(hex: "ffffff33")
+    public static let opacityWhite40 = Color(hex: "ffffff66")
+    public static let opacityWhite60 = Color(hex: "ffffff99")
+    public static let opacityWhite80 = Color(hex: "ffffffcc")
 }

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

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