@momo-kits/native-kits 0.163.1-beta.8-debug → 0.163.1-beta.9-debug

package/ios/Badge/Badge.swift

@@ -1,6 +1,7 @@
 import SwiftUI
 
 public struct Badge: View {
+    @Environment(\.appTheme) private var theme
     let label: String
     let backgroundColor: Color?
     
@@ -38,24 +39,21 @@ public struct Badge: View {
     }
     
     private var badgeColor: Color {
-        // If a custom background color is provided, use it
-        if let bgColor = backgroundColor {
+        // Default colors based on label type
+        let defaultColor: Color = isNumber(label)
+            ? theme.colors.error.primary
+            : theme.colors.warning.primary
+
+        // Mirror Compose: only apply backgroundColor when it is one of the
+        // allowed primaryColors; otherwise fall back to the label-based default.
+        if let bgColor = backgroundColor, primaryColors.contains(bgColor) {
             return bgColor
         }
-        
-        // Otherwise, use default colors based on label type
-        if isNumber(label) {
-            return Colors.red03 // error.primary
-        } else {
-            return Colors.orange03 // warning.primary
-        }
+        return defaultColor
     }
     
     public var body: some View {
-        Text(formatTitle(label))
-            .font(.system(size: scaleSize(10), weight: .bold))
-            .ignoreBoldTextSetting()
-            .foregroundColor(Colors.black01)
+        MomoText(formatTitle(label), typography: .actionXxsBold, color: Colors.black01)
             .padding(.horizontal, Spacing.XS)
             .frame(minWidth: scaleSize(16), minHeight: scaleSize(16))
             .background(badgeColor)
@@ -83,4 +81,3 @@ struct Badge_Previews: PreviewProvider {
     }
 }
 #endif
-

package/ios/Badge/BadgeRibbon.swift

@@ -77,10 +77,11 @@ public enum RibbonPosition {
 }
 
 public struct BadgeRibbon: View {
+    @Environment(\.appTheme) private var theme
     let position: RibbonPosition
     let label: String
     let isRound: Bool
-    let backgroundColor: Color
+    let backgroundColor: Color?
     
     public init(
         position: RibbonPosition = .topRight,
@@ -91,7 +92,7 @@ public struct BadgeRibbon: View {
         self.position = position
         self.label = label
         self.isRound = isRound
-        self.backgroundColor = backgroundColor ?? Colors.orange03
+        self.backgroundColor = backgroundColor
     }
     
     private var rotation: Angle {
@@ -117,6 +118,8 @@ public struct BadgeRibbon: View {
     }
     
     public var body: some View {
+        let bgColor = backgroundColor ?? theme.colors.warning.primary
+
         HStack(alignment: verticalAlignment, spacing: 0) {
             if useUpTail {
                 upTail
@@ -125,22 +128,18 @@ public struct BadgeRibbon: View {
             }
             
             if isRound {
-                roundContent
+                roundContent(backgroundColor: bgColor)
             } else {
-                skewContent
+                skewContent(backgroundColor: bgColor)
             }
         }
         .frame(height: RibbonConstants.ribbonHeight)
         .rotationEffect(rotation)
     }
     
-    private var roundContent: some View {
+    private func roundContent(backgroundColor: Color) -> some View {
         HStack(spacing: 0) {
-            Text(label)
-                .font(.system(size: scaleSize(12), weight: .medium))
-                .ignoreBoldTextSetting()
-                .foregroundColor(Colors.black01)
-                .lineLimit(1)
+            MomoText(label, typography: .labelXsMedium, color: Colors.black01, maxLines: 1)
                 .rotationEffect(rotation)
         }
         .frame(height: RibbonConstants.roundHeight)
@@ -156,13 +155,9 @@ public struct BadgeRibbon: View {
         )
     }
     
-    private var skewContent: some View {
+    private func skewContent(backgroundColor: Color) -> some View {
         HStack(spacing: 0) {
-            Text(label)
-                .font(.system(size: scaleSize(12), weight: .medium))
-                .ignoreBoldTextSetting()
-                .foregroundColor(Colors.black01)
-                .lineLimit(1)
+            MomoText(label, typography: .labelXsMedium, color: Colors.black01, maxLines: 1)
                 .rotationEffect(rotation)
                 .frame(height: RibbonConstants.skewBodyHeight)
                 .padding(.horizontal, 8)
@@ -179,7 +174,6 @@ public struct BadgeRibbon: View {
         )
         .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
         .rotationEffect(.degrees(180))
-        .offset(x: 1)
         .clipped()
     }
     
@@ -189,7 +183,6 @@ public struct BadgeRibbon: View {
             placeholder: AnyView(Color.clear)
         )
         .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
-        .offset(x: 1)
         .clipped()
     }
     
@@ -199,17 +192,96 @@ public struct BadgeRibbon: View {
             placeholder: AnyView(Color.clear)
         )
         .frame(width: RibbonConstants.skewTailWidth, height: RibbonConstants.skewTailHeight)
-        .offset(x: -2)
         .clipped()
     }
 }
 
+/// 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
     static let roundHeight: CGFloat = 16
     static let skewBodyHeight: CGFloat = 16
-    static let roundRightRadius: CGFloat = 8
+    static let roundRightRadius: CGFloat = 12
     static let roundPaddingEnd: CGFloat = 6
     static let skewTailWidth: CGFloat = 8
     static let skewTailHeight: CGFloat = 16
@@ -241,4 +313,3 @@ struct BadgeRibbon_Previews: PreviewProvider {
     }
 }
 #endif
-

package/ios/BaselineView/BaselineView.swift

@@ -0,0 +1,163 @@
+import SwiftUI
+
+public struct BaselineView: View {
+    private let enabled: Bool
+
+    public init(enabled: Bool = true) {
+        self.enabled = enabled
+    }
+
+    public var body: some View {
+        if enabled {
+            GeometryReader { geometry in
+                let topInset = geometry.safeAreaInsets.top
+                let bottomInset = min(geometry.safeAreaInsets.bottom, 21)
+
+                ZStack(alignment: .topLeading) {
+                    dangerZones(topInset: topInset, bottomInset: bottomInset)
+                    guideLines(
+                        topInset: topInset,
+                        bottomInset: bottomInset,
+                        width: geometry.size.width
+                    )
+                }
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .ignoresSafeArea()
+                .allowsHitTesting(false)
+                .accessibilityHidden(true)
+            }
+        }
+    }
+
+    private func dangerZones(topInset: CGFloat, bottomInset: CGFloat) -> some View {
+        let safeBackground = Color.red.opacity(0.15)
+
+        return ZStack(alignment: .topLeading) {
+            safeBackground
+                .frame(maxWidth: .infinity)
+                .frame(height: topInset)
+
+            HStack(spacing: 0) {
+                safeBackground
+                    .frame(width: 12)
+                Spacer(minLength: 0)
+                safeBackground
+                    .frame(width: 12)
+            }
+            .padding(.top, topInset)
+            .padding(.bottom, bottomInset)
+
+            VStack(spacing: 0) {
+                Spacer(minLength: 0)
+                safeBackground
+                    .frame(maxWidth: .infinity)
+                    .frame(height: bottomInset)
+            }
+        }
+    }
+
+    private func guideLines(topInset: CGFloat, bottomInset: CGFloat, width: CGFloat) -> some View {
+        ZStack(alignment: .topLeading) {
+            baselineLine(isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(y: topInset)
+
+            baselineLine(color: Color(hex: 0xE400FF))
+                .offset(y: topInset + 52)
+
+            baselineLine(color: Color(hex: 0xE400FF))
+                .offset(y: topInset + 104)
+
+            bottomLine(bottomInset: bottomInset + 64, color: Color(hex: 0xE400FF))
+
+            bottomLine(bottomInset: bottomInset, isDotted: false, color: Color(hex: 0xE400FF))
+
+            baselineLine(orientation: .vertical, isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(x: 12)
+
+            baselineLine(orientation: .vertical, isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(x: width - 12)
+
+            baselineLine(color: Color(hex: 0xFF7A00))
+                .offset(y: topInset + 26)
+
+            bottomLine(bottomInset: bottomInset + 56, color: Color(hex: 0xFFCC00))
+
+            bottomLine(bottomInset: bottomInset + 8, color: Color(hex: 0xFFCC00))
+
+            baselineLine(orientation: .vertical, color: Color(hex: 0x00C520))
+                .frame(height: 52)
+                .offset(x: 40, y: topInset)
+
+            baselineLine(orientation: .vertical, color: Color(hex: 0x00C520))
+                .frame(height: 52)
+                .offset(x: 48, y: topInset)
+        }
+    }
+
+    private func bottomLine(
+        bottomInset: CGFloat,
+        isDotted: Bool = true,
+        color: Color
+    ) -> some View {
+        VStack(spacing: 0) {
+            Spacer(minLength: 0)
+            baselineLine(isDotted: isDotted, color: color)
+                .padding(.bottom, bottomInset)
+        }
+    }
+
+    private func baselineLine(
+        orientation: BaselineOrientation = .horizontal,
+        isDotted: Bool = true,
+        color: Color
+    ) -> some View {
+        BaselineLineShape(orientation: orientation)
+            .stroke(
+                color,
+                style: StrokeStyle(
+                    lineWidth: 1,
+                    lineCap: .round,
+                    dash: isDotted ? [8, 8] : []
+                )
+            )
+            .frame(
+                maxWidth: orientation == .horizontal ? .infinity : 1,
+                maxHeight: orientation == .vertical ? .infinity : 1
+            )
+    }
+}
+
+public enum BaselineOrientation: Sendable {
+    case horizontal
+    case vertical
+}
+
+private struct BaselineLineShape: Shape {
+    let orientation: BaselineOrientation
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+
+        switch orientation {
+        case .horizontal:
+            path.move(to: CGPoint(x: rect.minX, y: rect.midY))
+            path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
+        case .vertical:
+            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
+            path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
+        }
+
+        return path
+    }
+}
+
+#if DEBUG
+struct BaselineView_Previews: PreviewProvider {
+    static var previews: some View {
+        ZStack {
+            Colors.black01
+            BaselineView()
+        }
+    }
+}
+#endif

package/ios/Button/Button.swift

@@ -31,33 +31,45 @@ public struct ButtonStyleData {
 
 public extension ButtonType {
     func backgroundColor(loading: Bool) -> Color {
+        backgroundColor(loading: loading, theme: defaultTheme)
+    }
+
+    func backgroundColor(loading: Bool, theme: Theme) -> Color {
         switch self {
-        case .disabled: return Colors.black05.opacity(loading ? 0.75 : 1)
-        case .primary: return Colors.primary.opacity(loading ? 0.75 : 1)
-        case .secondary: return Colors.card.opacity(loading ? 0.75 : 1)
-        case .outline: return Colors.card.opacity(loading ? 0.75 : 1)
-        case .tonal: return Colors.primaryLight.opacity(loading ? 0.75 : 1)
-        case .danger: return Colors.error.opacity(loading ? 0.75 : 1)
+        case .disabled: return theme.colors.background.disable.opacity(loading ? 0.75 : 1)
+        case .primary: return theme.colors.primary.opacity(loading ? 0.75 : 1)
+        case .secondary: return theme.colors.background.surface.opacity(loading ? 0.75 : 1)
+        case .outline: return theme.colors.background.surface.opacity(loading ? 0.75 : 1)
+        case .tonal: return theme.colors.background.tonal.opacity(loading ? 0.75 : 1)
+        case .danger: return theme.colors.error.primary.opacity(loading ? 0.75 : 1)
         case .text: return .clear
         }
     }
 
     func contentColor(loading: Bool) -> Color {
+        contentColor(loading: loading, theme: defaultTheme)
+    }
+
+    func contentColor(loading: Bool, theme: Theme) -> Color {
         switch self {
-        case .disabled: return Colors.black06.opacity(loading ? 0.75 : 1)
+        case .disabled: return theme.colors.text.disable.opacity(loading ? 0.75 : 1)
         case .primary: return Colors.black01
-        case .secondary: return Colors.black17
-        case .outline: return Colors.primary
-        case .tonal: return Colors.primary
+        case .secondary: return theme.colors.text.default
+        case .outline: return theme.colors.primary
+        case .tonal: return theme.colors.primary
         case .danger: return Colors.black01
-        case .text: return Colors.primary
+        case .text: return theme.colors.primary
         }
     }
 
     var borderColor: Color? {
+        borderColor(theme: defaultTheme)
+    }
+
+    func borderColor(theme: Theme) -> Color? {
         switch self {
-        case .outline: return Colors.primary
-        case .secondary: return Colors.black04
+        case .outline: return theme.colors.primary
+        case .secondary: return theme.colors.border.default
         default: return nil
         }
     }
@@ -111,12 +123,12 @@ extension ButtonSize {
         case .large: return .actionDefaultBold
         case .medium: return .actionSBold
         case .small: return .actionXsBold
-        default : return .actionDefaultBold
         }
     }
 }
 
 public struct Button: View {
+    @Environment(\.appTheme) private var theme
     var title: String
     var action: () -> Void
     var type: ButtonType
@@ -125,6 +137,7 @@ public struct Button: View {
     var iconRight: AnyView?
     var isFull: Bool
     var loading: Bool
+    var useTintColor: Bool
 
     public init(
         title: String = "",
@@ -134,7 +147,8 @@ public struct Button: View {
         iconLeft: AnyView? = nil,
         iconRight: AnyView? = nil,
         isFull: Bool = true,
-        loading: Bool = false
+        loading: Bool = false,
+        useTintColor: Bool = true
     ) {
         self.title = title
         self.action = action
@@ -144,6 +158,36 @@ public struct Button: View {
         self.iconRight = iconRight
         self.isFull = isFull
         self.loading = loading
+        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 {
@@ -160,14 +204,15 @@ public struct Button: View {
 
     public var body: some View {
         let loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight)
+        let isEnabled = type != .disabled && !loading
 
-        let bg = type.backgroundColor(loading: loading)
-        let fg = type.contentColor(loading: loading)
-        let border = type.borderColor
+        let bg = type.backgroundColor(loading: loading, theme: theme)
+        let fg = type.contentColor(loading: loading, theme: theme)
+        let border = type.borderColor(theme: theme)
         let borderWidth = type.borderWidth
 
         SwiftUI.Button(action: {
-            if !loading, type != .disabled {
+            if isEnabled {
                 action()
             }
         }) {
@@ -178,7 +223,7 @@ public struct Button: View {
                         .colorMultiply(fg)
 
                 } else if let iconLeft = iconLeft {
-                    iconLeft.frame(width: size.iconSize, height: size.iconSize)
+                    tintedIcon(iconLeft, color: fg)
                 }
 
                 MomoText(title, typography: size.typographyStyle, color: fg)
@@ -191,20 +236,70 @@ public struct Button: View {
                         .colorMultiply(fg)
 
                 } else if let iconRight = iconRight {
-                    iconRight.frame(width: size.iconSize, height: size.iconSize)
+                    tintedIcon(iconRight, color: fg)
                 }
             }
             .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))
-            .opacity(loading ? 0.75 : 1)
         }
-        .disabled(type == .disabled || loading)
+        .buttonStyle(ButtonPressFeedbackStyle(
+            isEnabled: isEnabled,
+            background: bg,
+            border: border,
+            borderWidth: borderWidth,
+            radius: size.radius,
+            height: size.height
+        ))
+        .disabled(!isEnabled)
+    }
+
+    @ViewBuilder
+    private func tintedIcon(_ icon: AnyView, color: Color) -> some View {
+        if useTintColor {
+            icon
+                .frame(width: size.iconSize, height: size.iconSize)
+                .colorMultiply(color)
+        } else {
+            icon
+                .frame(width: size.iconSize, height: size.iconSize)
+        }
+    }
+}
+
+/// 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 {
+        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)
     }
 }