@momo-kits/native-kits 0.163.1-beta.3-debug → 0.163.1-beta.5-debug

package/ios/Avatar/Avatar.swift

@@ -0,0 +1,193 @@
+import SwiftUI
+
+let LOGO_MOMO_URL =
+    "https://static.momocdn.net/app/img/kits/logo_momo_circle.png"
+let ICON_SUPPORT_DEFAULT_URL =
+    "https://static.momocdn.net/app/img/kits/_indicator.png"
+
+public enum AvatarSize {
+    case size24
+    case size32
+    case size40
+    case size48
+    case size56
+    case size72
+
+    var sizeDp: CGFloat {
+        switch self {
+        case .size24: return 24
+        case .size32: return 32
+        case .size40: return 40
+        case .size48: return 48
+        case .size56: return 56
+        case .size72: return 72
+        }
+    }
+
+    var iconSizeDp: CGFloat {
+        switch self {
+        case .size24: return 16
+        case .size32: return 16
+        case .size40: return 24
+        case .size48: return 32
+        case .size56: return 32
+        case .size72: return 40
+        }
+    }
+}
+
+public struct Avatar: View {
+    @Environment(\.appTheme) private var theme
+
+    // MARK: Lifecycle
+
+    public init(
+        size: AvatarSize = .size32,
+        rounded: Bool = true,
+        name: String? = nil,
+        image: String? = nil,
+        showIconMomo: Bool = false,
+        showIconSupport: Bool = false,
+        iconSupport: String = "https://static.momocdn.net/app/img/kits/_indicator.png",
+        accessibilityLabel: String? = nil
+    ) {
+        self.size = size
+        self.rounded = rounded
+        self.name = name
+        self.image = image
+        self.showIconMomo = showIconMomo
+        self.showIconSupport = showIconSupport
+        self.iconSupport = iconSupport
+        self.accessibilityLabel = accessibilityLabel
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        ZStack {
+            // Inner content clipped by shape with border
+            ZStack {
+                content
+            }
+            .frame(width: size.sizeDp, height: size.sizeDp)
+            .background(Colors.pink09)
+            .clipShape(RoundedRectangle(cornerRadius: cornerRadius))
+            .overlay(
+                RoundedRectangle(cornerRadius: cornerRadius)
+                    .stroke(theme.colors.border.default, lineWidth: 1)
+            )
+
+            // Badge icons — outside clip so they are not cut by border
+            if shouldShowIconTop {
+                ImageView(LOGO_MOMO_URL)
+                    .frame(width: badgeSizeDp, height: badgeSizeDp)
+                    .clipShape(RoundedRectangle(cornerRadius: badgeCornerRadius))
+                    .offset(x: 1, y: -1)
+                    .frame(
+                        width: size.sizeDp,
+                        height: size.sizeDp,
+                        alignment: .topTrailing
+                    )
+                    .zIndex(1)
+            }
+
+            if shouldShowIconBottom {
+                ImageView(iconSupport)
+                    .frame(width: badgeSizeDp, height: badgeSizeDp)
+                    .clipShape(RoundedRectangle(cornerRadius: badgeCornerRadius))
+                    .offset(x: 1, y: 1)
+                    .frame(
+                        width: size.sizeDp,
+                        height: size.sizeDp,
+                        alignment: .bottomTrailing
+                    )
+                    .zIndex(1)
+            }
+        }
+        .frame(width: size.sizeDp, height: size.sizeDp)
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel(automationId)
+    }
+
+    // MARK: Internal
+
+    let size: AvatarSize
+    let rounded: Bool
+    let name: String?
+    let image: String?
+    let showIconMomo: Bool
+    let showIconSupport: Bool
+    let iconSupport: String
+    let accessibilityLabel: String?
+
+    @ViewBuilder
+    private var content: some View {
+        if let image {
+            ImageView(image, contentMode: .fill)
+                .frame(width: size.sizeDp, height: size.sizeDp)
+                .clipShape(RoundedRectangle(cornerRadius: cornerRadius))
+        } else if let name {
+            MomoText(
+                Self.avatarInitials(name),
+                typography: .descriptionXsRegular,
+                color: Colors.pink03
+            )
+        } else {
+            Icon(
+                source: "basic_person",
+                size: size.iconSizeDp,
+                color: Colors.pink03
+            )
+        }
+    }
+
+    private var cornerRadius: CGFloat {
+        rounded ? size.sizeDp / 2 : Spacing.XS
+    }
+
+    private var badgeSizeDp: CGFloat {
+        size.iconSizeDp / 2
+    }
+
+    private var badgeCornerRadius: CGFloat {
+        size.iconSizeDp / 4
+    }
+
+    private var shouldShowIconTop: Bool {
+        showIconMomo && rounded
+    }
+
+    private var shouldShowIconBottom: Bool {
+        showIconSupport && rounded
+    }
+
+    private var automationId: String {
+        accessibilityLabel ?? "Avatar\(name != nil ? "/\(name!)" : "")"
+    }
+
+    private static func avatarInitials(_ name: String) -> String {
+        let words = name.trimmingCharacters(in: .whitespaces)
+            .split(separator: " ")
+            .filter { !$0.isEmpty }
+        return words.suffix(2)
+            .compactMap { $0.first?.uppercased() }
+            .joined()
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct Avatar_Previews: PreviewProvider {
+    static var previews: some View {
+        HStack(spacing: 12) {
+            Avatar(size: .size40)
+            Avatar(size: .size40, name: "Nguyen Van A")
+            Avatar(size: .size40, rounded: false, name: "John Doe")
+            Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=1", showIconMomo: true)
+            Avatar(size: .size56, showIconSupport: true)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif

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,7 +192,6 @@ public struct BadgeRibbon: View {
             placeholder: AnyView(Color.clear)
         )
         .frame(width: RibbonConstants.skewTailWidth, height: RibbonConstants.skewTailHeight)
-        .offset(x: -2)
         .clipped()
     }
 }
@@ -209,7 +201,7 @@ 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 +233,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
         }
     }
@@ -117,6 +129,7 @@ extension ButtonSize {
 }
 
 public struct Button: View {
+    @Environment(\.appTheme) private var theme
     var title: String
     var action: () -> Void
     var type: ButtonType
@@ -125,6 +138,7 @@ public struct Button: View {
     var iconRight: AnyView?
     var isFull: Bool
     var loading: Bool
+    var useTintColor: Bool
 
     public init(
         title: String = "",
@@ -134,7 +148,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 +159,7 @@ public struct Button: View {
         self.iconRight = iconRight
         self.isFull = isFull
         self.loading = loading
+        self.useTintColor = useTintColor
     }
 
     private func shouldLoadingOnLeft(_ left: AnyView?, _ right: AnyView?) -> Bool {
@@ -160,14 +176,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 +195,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,7 +208,7 @@ 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)
@@ -203,8 +220,30 @@ public struct Button: View {
                     .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))
+        .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)
+        }
+    }
+}
+
+private struct ButtonPressFeedbackStyle: ButtonStyle {
+    let isEnabled: Bool
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .opacity(configuration.isPressed && isEnabled ? 0.5 : 1)
+            .animation(.easeInOut(duration: 0.1), value: configuration.isPressed)
     }
 }