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

package/ios/Skeleton/Skeleton.swift

@@ -44,8 +44,6 @@ private struct ShimmerLoading: View {
     let durationMillis: Int
     let angleOfAxisY: CGFloat
 
-    @State private var phase: CGFloat = 0
-
     // Matches Compose `SHADOW_BRUSH_PERCENTAGE = 0.6f`.
     private static let shadowBrushPercentage: CGFloat = 0.6
 
@@ -67,33 +65,30 @@ private struct ShimmerLoading: View {
         size.width + widthOfShadowBrush
     }
 
+    // Clock-driven rather than an onAppear animation: gradient points aren't reliably animatable,
+    // and a view first laid out at zero width (or resized later) would never (re)start.
     var body: some View {
-        let startX = phase - widthOfShadowBrush
-        let endX = phase
+        TimelineView(.animation) { timeline in
+            Rectangle().fill(gradient(at: timeline.date))
+        }
+    }
+
+    private func gradient(at date: Date) -> LinearGradient {
+        let duration = Double(max(durationMillis, 1)) / 1000
+        let progress = date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: duration) / duration
+        let endX = CGFloat(progress) * animationTarget
+        let startX = endX - widthOfShadowBrush
 
-        Rectangle()
-            .fill(
-                LinearGradient(
-                    gradient: Gradient(colors: Self.shimmerColors),
-                    startPoint: .init(
-                        x: size.width > 0 ? startX / size.width : 0,
-                        y: 0
-                    ),
-                    endPoint: .init(
-                        x: size.width > 0 ? endX / size.width : 0,
-                        y: size.height > 0 ? angleOfAxisY / size.height : 0
-                    )
-                )
+        return LinearGradient(
+            gradient: Gradient(colors: Self.shimmerColors),
+            startPoint: .init(
+                x: size.width > 0 ? startX / size.width : 0,
+                y: 0
+            ),
+            endPoint: .init(
+                x: size.width > 0 ? endX / size.width : 0,
+                y: size.height > 0 ? angleOfAxisY / size.height : 0
             )
-            .onAppear {
-                guard size.width > 0 else { return }
-                phase = 0
-                withAnimation(
-                    .linear(duration: Double(durationMillis) / 1000.0)
-                        .repeatForever(autoreverses: false)
-                ) {
-                    phase = animationTarget
-                }
-            }
+        )
     }
 }

package/ios/Slider/Slider.swift

@@ -24,12 +24,14 @@ private func getValueForPosition(
     step: CGFloat
 ) -> CGFloat {
     let availableSpace = containerWidth - thumbWidth
-    if availableSpace <= 0 { return minV }
-    let relStepUnit = step / (maxV - minV)
+    if availableSpace <= 0 || maxV <= minV { return minV }
     var relPosition = (positionInView - thumbWidth / 2) / availableSpace
+    // A zero step would make the snap math NaN, which later traps in `Int(_:)`.
+    if step <= 0 { return clampF(minV + relPosition * (maxV - minV), minV, maxV) }
+    let relStepUnit = step / (maxV - minV)
     let relOffset = relPosition.truncatingRemainder(dividingBy: relStepUnit)
     relPosition -= relOffset
-    if relStepUnit != 0, relOffset / relStepUnit >= 0.5 { relPosition += relStepUnit }
+    if relOffset / relStepUnit >= 0.5 { relPosition += relStepUnit }
     let steps = (relPosition / relStepUnit).rounded()
     return clampF(minV + steps * step, minV, maxV)
 }
@@ -49,7 +51,8 @@ private func formatLabel(_ value: CGFloat) -> String {
     if value == value.rounded() {
         return String(Int(value))
     }
-    return String(format: "%.1f", value)
+    // Truncates to one decimal like Compose's `(value * 10).toLong() / 10.0`.
+    return String(Double((value * 10).rounded(.towardZero)) / 10)
 }
 
 // ── Component ─────────────────────────────────────────────────────────────────
@@ -64,8 +67,6 @@ public struct MomoSlider: View {
     private let minV: CGFloat
     private let maxV: CGFloat
     private let step: CGFloat
-    private let initLow: CGFloat
-    private let initHigh: CGFloat
     private let minRange: CGFloat
     private let disableRange: Bool
     private let floatingLabel: Bool
@@ -74,11 +75,10 @@ public struct MomoSlider: View {
     private let onSliderTouchStart: (CGFloat, CGFloat) -> Void
     private let onSliderTouchEnd: (CGFloat, CGFloat) -> Void
 
-    @State private var lowValue: CGFloat = 0
-    @State private var highValue: CGFloat = 0
+    @State private var lowValue: CGFloat
+    @State private var highValue: CGFloat
     @State private var draggingLow: Bool = true
     @State private var isDragging: Bool = false
-    @State private var didInit: Bool = false
 
     public init(
         min: CGFloat,
@@ -105,8 +105,10 @@ public struct MomoSlider: View {
         self.onSliderTouchStart = onSliderTouchStart
         self.onSliderTouchEnd = onSliderTouchEnd
 
-        self.initLow = clampF(low ?? min, min, max)
-        self.initHigh = disableRange ? max : clampF(high ?? max, min, max)
+        let startLow = clampF(low ?? min, min, max)
+        let startHigh = disableRange ? max : clampF(high ?? max, min, max)
+        _lowValue = State(initialValue: startLow)
+        _highValue = State(initialValue: startHigh)
     }
 
     private var thumbColor: Color { disabled ? theme.colors.text.disable : theme.colors.primary }
@@ -165,17 +167,13 @@ public struct MomoSlider: View {
                 }
             }
             .frame(width: trackWidth, height: topPad + THUMB_SIZE, alignment: .topLeading)
+            // Compose's spring(stiffness = 1200) is critically damped.
+            .animation(.interpolatingSpring(stiffness: 1200, damping: 2 * sqrt(1200)), value: lowValue)
+            .animation(.interpolatingSpring(stiffness: 1200, damping: 2 * sqrt(1200)), value: highValue)
             .contentShape(Rectangle())
             .gesture(dragGesture(trackWidth: trackWidth))
         }
         .frame(height: (floatingLabel ? (THUMB_SIZE + LABEL_GAP) : 0) + THUMB_SIZE)
-        .onAppear {
-            if !didInit {
-                lowValue = initLow
-                highValue = initHigh
-                didInit = true
-            }
-        }
     }
 
     private var thumb: some View {

package/ios/Stepper/Stepper.swift

@@ -84,7 +84,6 @@ private struct StepperButton: View {
 
 private struct StepperNumberView: View {
     @Environment(\.appTheme) private var theme
-    @Environment(\.momoFontScale) private var fontScale
 
     @Binding var text: String
     var size: StepperSize
@@ -106,12 +105,13 @@ private struct StepperNumberView: View {
                 MomoText(text, typography: .descriptionDefaultRegular, color: textColor)
             }
         }
-        .font(.system(size: fontScale(12)))
+        .kitFont(size: 12)
         .ignoreBoldTextSetting()
         .foregroundColor(textColor)
+        // Compose's min width includes the horizontal padding.
+        .padding(.horizontal, Spacing.XS)
         .frame(minWidth: specs.numberMinWidth)
         .frame(height: specs.numberHeight)
-        .padding(.horizontal, Spacing.XS)
         .overlay(
             RoundedRectangle(cornerRadius: Radius.S)
                 .stroke(borderColor, lineWidth: 1)
@@ -217,5 +217,9 @@ public struct MomoStepper: View {
             if clamped != value { value = clamped }
             editingText = String(clamped)
         }
+        // Keeps the editable field in step with values set by the owner of the binding.
+        .onChange(of: value) { newValue in
+            editingText = String(newValue)
+        }
     }
 }

package/ios/Steps/Steps.swift

@@ -162,8 +162,9 @@ private struct StepsHorizontal: View {
 
     var body: some View {
         HStack(alignment: .top, spacing: 0) {
-            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
-                column(index: index, item: item)
+            // Keyed by position like Compose: `StepItem.id` is a fresh UUID per instance.
+            ForEach(steps.indices, id: \.self) { index in
+                column(index: index, item: steps[index])
                     .frame(maxWidth: .infinity)
             }
         }
@@ -234,7 +235,7 @@ private struct StepsHorizontal: View {
                         .clipShape(RoundedCorner(radius: Radius.XS, corners: [.topLeft, .bottomLeft]))
                 }
             }
-            .frame(maxWidth: .infinity)
+            .frame(maxWidth: .infinity, alignment: .leading)
 
             if !item.title.isEmpty {
                 MomoText(item.title, typography: titleStyle, color: titleColor)
@@ -316,8 +317,8 @@ private struct StepsVertical: View {
 
     var body: some View {
         VStack(spacing: 0) {
-            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
-                row(index: index, item: item)
+            ForEach(steps.indices, id: \.self) { index in
+                row(index: index, item: steps[index])
             }
         }
         .frame(maxWidth: .infinity)
@@ -358,8 +359,9 @@ private struct StepsVertical: View {
                     customIcon: customIcon
                 )
                 if !isLast {
+                    // Compose pads inside the fixed height, so the drawn line is 8pt shorter.
                     lineColor
-                        .frame(width: 2, height: connectorHeight)
+                        .frame(width: 2, height: connectorHeight - Spacing.XS * 2)
                         .padding(.vertical, Spacing.XS)
                 }
             }

package/ios/SuggestAction/SuggestAction.swift

@@ -65,6 +65,11 @@ public struct SuggestAction: View {
 
                     Text(annotatedMessage)
                         .foregroundColor(theme.colors.text.default)
+                        .lineSpacing(
+                            fontScale(TypographyStyle.bodyDefaultRegular.lineHeight)
+                                - fontScale(TypographyStyle.bodyDefaultRegular.fontSize)
+                        )
+                        .ignoreBoldTextSetting()
                         .frame(maxWidth: .infinity, alignment: .leading)
                         .padding(.trailing, Spacing.M)
 

package/ios/Swipeable/SwipeCell.swift

@@ -20,6 +20,7 @@ public struct Swipe<Content: View>: View {
 
     @State private var offsetX: CGFloat = 0
     @State private var dragStartOffsetX: CGFloat?
+    @GestureState private var isDragging = false
 
     public init(
         leftActions: [SwipeAction] = [],
@@ -87,14 +88,17 @@ public struct Swipe<Content: View>: View {
             .offset(x: offsetX)
             .gesture(
                 DragGesture(minimumDistance: 8, coordinateSpace: .local)
+                    .updating($isDragging) { _, dragging, _ in dragging = true }
                     .onChanged { value in
                         dragOnChanged(value: value, leftWidth: leftWidth, rightWidth: rightWidth)
                     }
-                    .onEnded { _ in
-                        dragStartOffsetX = nil
-                        snapToClosest(leftWidth: leftWidth, rightWidth: rightWidth)
-                    }
             )
+            // Gesture state also resets on cancel, so a stolen drag still snaps (Compose `onDragCancel`).
+            .onChange(of: isDragging) { dragging in
+                guard !dragging else { return }
+                dragStartOffsetX = nil
+                snapToClosest(leftWidth: leftWidth, rightWidth: rightWidth)
+            }
         }
         .frame(maxWidth: .infinity)
         .frame(height: height)
@@ -166,7 +170,7 @@ private struct SwipeActionButton: View {
 
     var body: some View {
         SwiftUI.Button(action: action.onPress) {
-            VStack(spacing: Spacing.XXS) {
+            VStack(spacing: 0) {
                 if !action.icon.isEmpty {
                     Icon(source: action.icon, size: 20, color: Colors.black01)
                 }
@@ -184,7 +188,7 @@ private struct SwipeActionButton: View {
             .background(action.backgroundColor ?? defaultBackgroundColor)
             .clipShape(RoundedRectangle(cornerRadius: itemRadius))
         }
-        .buttonStyle(.plain)
+        .buttonStyle(ActiveOpacityButtonStyle())
     }
 }
 

package/ios/Switch/Switch.swift

@@ -41,29 +41,31 @@ public struct Switch: View {
         accessibilityId?.isEmpty == false ? accessibilityId! : "toggle_\(title?.isEmpty == false ? title! : "unknown")_\(value)"
     }
 
+    private func toggle() {
+        // Not re-read from the binding: a `.constant` / one-way binding would report the stale value.
+        let newValue = !value
+        value = newValue
+        onChange?(newValue)
+    }
+
     public var body: some View {
-        SwiftUI.Button(action: {
-            withAnimation {
-                value.toggle()
-                onChange?(value)
-            }
-        }) {
-            HStack {
-                HStack {}
-                    .frame(width: 6, height: 6)
-                    .background(backgroundColor)
-                    .clipShape(Circle())
-            }
-            .frame(width: 14, height: 14)
-            .background(circleColor)
-            .clipShape(Circle())
-            .padding(.leading, Spacing.XS)
-            .padding(.trailing, Spacing.XS)
+        // The whole track is the label so all of it is tappable, as in Compose.
+        SwiftUI.Button(action: toggle) {
+            Circle()
+                .fill(backgroundColor)
+                .frame(width: 6, height: 6)
+                .frame(width: 14, height: 14)
+                .background(Circle().fill(circleColor))
+                .padding(.horizontal, Spacing.XS)
+                .frame(width: 38, height: 20, alignment: value ? .trailing : .leading)
+                .background(backgroundColor)
+                .clipShape(Capsule())
+                .contentShape(Capsule())
+                .animation(.default, value: value)
         }
+        // Custom style so `.disabled` doesn't add a system dim on top of the disabled colors.
+        .buttonStyle(ActiveOpacityButtonStyle())
         .disabled(disabled)
-        .frame(width: 38, height: 20, alignment: value ? .trailing : .leading)
-        .background(backgroundColor)
-        .clipShape(Capsule())
         .accessibilityIdentifier(automationId)
     }
 }

package/ios/TabView/TabView.swift

@@ -328,8 +328,13 @@ private struct ScrollableTabBar: View {
                 Rectangle()
                     .stroke(theme.colors.border.default, lineWidth: 0.5)
             )
+            // Compose scrolls the selected tab to the leading edge, initial page included.
             .onChange(of: selectedIndex) { index in
-                withAnimation { proxy.scrollTo(index, anchor: .center) }
+                withAnimation { proxy.scrollTo(index, anchor: .leading) }
+            }
+            .onAppear {
+                guard selectedIndex > 0 else { return }
+                DispatchQueue.main.async { proxy.scrollTo(selectedIndex, anchor: .leading) }
             }
         }
     }
@@ -346,6 +351,11 @@ private struct TabFramePreferenceKey: PreferenceKey {
 // Card tab bar
 // ---------------------------------------------------------------------------
 
+private let cardTabHeight: CGFloat = 40
+private let cardTabActiveHeight: CGFloat = 44
+
+/// Two layers, as in Compose / react-kits: a flat strip where every tab looks unselected,
+/// and one raised card for the active tab, 4pt taller and joined to the strip by curved ears.
 private struct CardTabBar: View {
     @Environment(\.appTheme) private var theme
 
@@ -357,47 +367,116 @@ private struct CardTabBar: View {
     let onPress: (Int) -> Void
 
     var body: some View {
-        HStack(alignment: .bottom, spacing: 0) {
-            ForEach(tabs.indices, id: \.self) { index in
-                let tab = tabs[index]
-                let isActive = selectedIndex == index
-                let iconColor = isActive ? selectedColor : unselectedColor
-
-                SwiftUI.Button(action: { onPress(index) }) {
-                    cardItem(tab: tab, isActive: isActive, iconColor: iconColor)
-                        .frame(maxWidth: .infinity)
-                        .frame(height: isActive ? 44 : 40)
-                        .background(isActive ? theme.colors.background.surface : theme.colors.background.tonal)
-                        .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
-                        .contentShape(Rectangle())
+        GeometryReader { geo in
+            let itemWidth = geo.size.width / CGFloat(Swift.max(tabs.count, 1))
+
+            ZStack(alignment: .bottomLeading) {
+                HStack(spacing: 0) {
+                    ForEach(tabs.indices, id: \.self) { index in
+                        SwiftUI.Button(action: { onPress(index) }) {
+                            cardItem(tab: tabs[index], isActive: false)
+                                .padding(.horizontal, Spacing.S)
+                                .frame(width: itemWidth, height: cardTabHeight)
+                                .background(Colors.black02)
+                                .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
+                                .contentShape(Rectangle())
+                        }
+                        .buttonStyle(ActiveOpacityButtonStyle())
+                    }
+                }
+
+                if let active = tabs[safe: selectedIndex] {
+                    activeCard(active, itemWidth: itemWidth)
                 }
-                .buttonStyle(ActiveOpacityButtonStyle())
             }
+            .frame(width: geo.size.width, height: cardTabActiveHeight, alignment: .bottomLeading)
         }
-        .frame(maxWidth: .infinity)
-        .padding(.top, Spacing.XS)
+        // The raised card overflows the strip into the top `Spacing.XS` margin.
+        .frame(height: cardTabActiveHeight)
+    }
+
+    private func activeCard(_ tab: TabViewItem, itemWidth: CGFloat) -> some View {
+        let surface = theme.colors.background.surface
+        let pathWidth: CGFloat = tabs.count > 2 ? 22 : 28
+        let isFirst = selectedIndex == 0
+        let isLast = selectedIndex == tabs.count - 1
+
+        return HStack(alignment: .bottom, spacing: 0) {
+            // Each ear is nudged 8pt under the card so the join has no seam.
+            if !isFirst { cardEar(mirrored: true, width: pathWidth, color: surface).offset(x: 8) }
+            SwiftUI.Button(action: { onPress(selectedIndex) }) {
+                cardItem(tab: tab, isActive: true)
+                    .padding(.horizontal, tabs.count == 3 ? Spacing.S : Spacing.M)
+                    .frame(width: itemWidth, height: cardTabActiveHeight)
+                    .background(surface)
+                    .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
+                    .contentShape(Rectangle())
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+            if !isLast { cardEar(mirrored: false, width: pathWidth, color: surface).offset(x: -8) }
+        }
+        .offset(x: itemWidth * CGFloat(selectedIndex) - (isFirst ? 0 : pathWidth))
+    }
+
+    private func cardEar(mirrored: Bool, width: CGFloat, color: Color) -> some View {
+        CardTabEarShape(mirrored: mirrored)
+            .fill(color)
+            .frame(width: width, height: cardTabActiveHeight)
+            .clipped()
+            .allowsHitTesting(false)
     }
 
     @ViewBuilder
-    private func cardItem(tab: TabViewItem, isActive: Bool, iconColor: Color) -> some View {
+    private func cardItem(tab: TabViewItem, isActive: Bool) -> some View {
+        let color = isActive ? selectedColor : unselectedColor
         HStack(spacing: 0) {
             if let renderIcon = tab.renderIcon {
                 renderIcon(isActive)
                 Spacer().frame(width: Spacing.XS)
             } else if let icon = tab.icon {
-                Icon(source: icon, size: 18, color: iconColor)
+                Icon(source: icon, size: 18, color: color)
                 Spacer().frame(width: Spacing.XS)
             }
             MomoText(
                 tab.title,
                 typography: isActive ? .headerSSemibold : .bodyDefaultRegular,
-                color: isActive ? selectedColor : unselectedColor
+                color: color
             )
             .lineLimit(1)
 
             tabBadge(tab)
         }
-        .padding(.horizontal, Spacing.S)
+    }
+}
+
+/// react-kits' 28x44 ear path, in points; not scaled to the frame, which clips it at a 22pt width.
+private struct CardTabEarShape: Shape {
+    let mirrored: Bool
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.move(to: CGPoint(x: 0, y: 0))
+        path.addLine(to: CGPoint(x: 0.60765, y: 0))
+        path.addCurve(
+            to: CGPoint(x: 12.4602, y: 10.0244),
+            control1: CGPoint(x: 6.47582, y: 0),
+            control2: CGPoint(x: 11.4819, y: 4.23831)
+        )
+        path.addCurve(
+            to: CGPoint(x: 16.6925, y: 34),
+            control1: CGPoint(x: 13.9248, y: 18.6872),
+            control2: CGPoint(x: 15.9294, y: 30.37)
+        )
+        path.addCurve(
+            to: CGPoint(x: 27.9996, y: 44),
+            control1: CGPoint(x: 17.9536, y: 40),
+            control2: CGPoint(x: 22.259, y: 44)
+        )
+        path.addLine(to: CGPoint(x: 0, y: 44))
+        path.closeSubpath()
+        return mirrored
+            ? path.applying(CGAffineTransform(a: -1, b: 0, c: 0, d: 1, tx: rect.width, ty: 0))
+            : path
     }
 }
 
@@ -426,6 +505,8 @@ private struct TabItemView: View {
                     rowBody
                 }
             }
+            // Equal-width bars hit-test the whole cell, like Compose's weighted clickable.
+            .frame(maxWidth: scrollable ? nil : .infinity)
             .contentShape(Rectangle())
         }
         .buttonStyle(ActiveOpacityButtonStyle())

package/ios/Tag/Tag.swift

@@ -45,26 +45,37 @@ public struct Tag: View {
         }
     }
 
+    // RN only accepts the `_03` palette as a custom tag color.
+    private static let customColors: [Color] = [
+        Colors.black03, Colors.pink03, Colors.violet03, Colors.indigo03,
+        Colors.blue03, Colors.mint03, Colors.green03, Colors.lime03,
+        Colors.yellow03, Colors.gold03, Colors.orange03, Colors.red03
+    ]
+
     private let label: String
     private let icon: String?
     private let color: TagColor
     private let size: TagSize
+    private let customColor: Color?
 
     public init(
         label: String = "Label",
         icon: String? = nil,
         color: TagColor = .default,
-        size: TagSize = .large
+        size: TagSize = .large,
+        customColor: Color? = nil
     ) {
         self.label = label
         self.icon = icon
         self.color = color
         self.size = size
+        self.customColor = customColor
     }
 
     public var body: some View {
-        let tagColor = color.backgroundColor
-        let labelColor = color.textColor
+        let custom = customColor.flatMap { Self.customColors.contains($0) ? $0 : nil }
+        let tagColor = custom ?? color.backgroundColor
+        let labelColor = custom != nil ? Colors.black01 : color.textColor
 
         HStack(spacing: 0) {
             if let icon {
@@ -75,7 +86,7 @@ public struct Tag: View {
         .frame(height: fontScale(size.height))
         .padding(.horizontal, Spacing.S)
         .background(
-            RoundedRectangle(cornerRadius: Radius.S, style: .continuous)
+            RoundedRectangle(cornerRadius: Radius.S)
                 .fill(tagColor)
         )
     }

package/ios/Template/Logo/Logo.swift

@@ -57,7 +57,8 @@ private extension View {
     func containerBackground (_ type: String, _ useBackground: Bool, _ backgroundColor: Color) -> some View {
         Group {
             if (useBackground && type != "icon") {
-                self.background(backgroundColor)
+                // Same shape as the border, or the square corners (and the shadow) show around it.
+                self.background(RoundedRectangle(cornerRadius: 8).fill(backgroundColor))
             } else {
                 self
             }