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

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -11,15 +11,15 @@ import SDWebImageSwiftUI
 
 let jsonUrl = "https://static.momocdn.net/app/json/component-kits/design_system.json"
 
-public struct TrustBannerData: Decodable {
-    let content: [String: String]
-    let subContent: [String: String]
-    let pciImage: String
-    let sslImage: String
-    let urlConfig: String
-    let icons: [String]
-    let momoImage: String
-    
+public struct TrustBannerData: Decodable, Equatable {
+    public let content: [String: String]
+    public let subContent: [String: String]
+    public let pciImage: String?
+    public let momoImage: String?
+    public let sslImage: String?
+    public let icons: [String]?
+    public let urlConfig: String
+
     enum CodingKeys: String, CodingKey {
         case content
         case subContent
@@ -29,6 +29,38 @@ public struct TrustBannerData: Decodable {
         case momoImage
         case urlConfig = "url_config"
     }
+
+    public init(
+        content: [String: String] = ["vi": "", "en": ""],
+        subContent: [String: String] = ["vi": "", "en": ""],
+        pciImage: String? = nil,
+        momoImage: String? = nil,
+        sslImage: String? = nil,
+        icons: [String]? = nil,
+        urlConfig: String = ""
+    ) {
+        self.content = content
+        self.subContent = subContent
+        self.pciImage = pciImage
+        self.momoImage = momoImage
+        self.sslImage = sslImage
+        self.icons = icons
+        self.urlConfig = urlConfig
+    }
+
+    // Missing keys fall back to the init defaults, like the Compose data class.
+    public init(from decoder: Decoder) throws {
+        let container = try decoder.container(keyedBy: CodingKeys.self)
+        self.init(
+            content: try container.decodeIfPresent([String: String].self, forKey: .content) ?? ["vi": "", "en": ""],
+            subContent: try container.decodeIfPresent([String: String].self, forKey: .subContent) ?? ["vi": "", "en": ""],
+            pciImage: try container.decodeIfPresent(String.self, forKey: .pciImage),
+            momoImage: try container.decodeIfPresent(String.self, forKey: .momoImage),
+            sslImage: try container.decodeIfPresent(String.self, forKey: .sslImage),
+            icons: try container.decodeIfPresent([String].self, forKey: .icons),
+            urlConfig: try container.decodeIfPresent(String.self, forKey: .urlConfig) ?? ""
+        )
+    }
 }
 
 let defaultBanner = TrustBannerData(
@@ -38,83 +70,105 @@ let defaultBanner = TrustBannerData(
         "vi": "Tìm hiểu thêm",
         "en": "Learn more"
     ],
-    pciImage: "https://static.momocdn.net/app/img/kits/trustBanner/pci.png",
+    pciImage: "https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png",
+    momoImage: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png",
     sslImage: "https://static.momocdn.net/app/img/kits/trustBanner/ssl.png",
-    urlConfig: "login_and_security",
     icons: [
         "https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png",
         "https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png",
         "https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png",
         "https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png"
     ],
-    momoImage: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png"
+    urlConfig: "login_and_security"
 )
 
 public struct TrustBanner: View {
     @Environment(\.applicationEnvironment) var applicationEnvironment
     @Environment(\.localize) private var localize
+    @Environment(\.designSystemKitsConfigs) private var designSystemKitsConfigs
 
     var onPress: ((String)->Void)?
+    private let serviceName: String
+    private let screenName: String
+    private let trackEvent: ((String, [String: String]) -> Void)?
 
-    public init(onPress: ((String)->Void)?) {
+    public init(
+        onPress: ((String)->Void)?,
+        serviceName: String = "",
+        screenName: String = "",
+        trackEvent: ((String, [String: String]) -> Void)? = nil
+    ) {
         self.onPress = onPress
+        self.serviceName = serviceName
+        self.screenName = screenName
+        self.trackEvent = trackEvent
+    }
+
+    private var banner: TrustBannerData {
+        // Container config wins, else the host-pushed DesignSystemKits config (Compose parity).
+        (applicationEnvironment.config ?? designSystemKitsConfigs.designSystemConfig)?.trustBanner ?? defaultBanner
     }
 
     func onPressSecurity() {
-        if (onPress != nil) {
-            onPress!(applicationEnvironment.config?.trustBanner?.urlConfig ?? defaultBanner.urlConfig)
-        }
+        trackEvent?("service_component_clicked", [
+            "service_name": serviceName,
+            "screen_name": screenName,
+            "component_name": "logo_trust",
+            "url_config": banner.urlConfig
+        ])
+        onPress?(banner.urlConfig)
     }
-    
-    
+
     public var body: some View {
-        HStack(alignment: .center, spacing: 8) {
-            WebImage(url: URL(string: applicationEnvironment.config?.trustBanner?.momoImage ?? defaultBanner.momoImage))
-                .resizable()
-                .scaledToFit()
-                .frame(width: 64, height: 64)
-            VStack(alignment: .leading){
-                Text(applicationEnvironment.config?.trustBanner?.content[localize.currentLanguage]
-                     ?? localize.translateData(defaultBanner.content))
-                    .foregroundColor(Color(hex: "484848"))
-                    .lineLimit(2)
-                    .font(.system(size: 13, weight: Font.Weight.regular))
-                    .ignoreBoldTextSetting()
-                    .lineSpacing(3)
-                    .padding(.bottom, 8)
-                HStack {
+        HStack(alignment: .top, spacing: 10) {
+            if let momoImage = banner.momoImage {
+                WebImage(url: URL(string: momoImage))
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: 64, height: 64)
+            }
+            VStack(alignment: .leading, spacing: 0) {
+                MomoText(
+                    localize.translateData(banner.content),
+                    typography: .descriptionDefaultRegular,
+                    color: Color(hex: "484848"),
+                    maxLines: 2
+                )
+                .padding(.bottom, 8)
+                HStack(alignment: .top, spacing: 0) {
                     HStack(spacing: 0) {
-                        Text(applicationEnvironment.config?.trustBanner?.subContent[localize.currentLanguage]
-                             ?? localize.translateData(defaultBanner.subContent))
-                            .foregroundColor(Colors.pink03)
-                            .font(.system(size: 13, weight: .bold))
-                            .ignoreBoldTextSetting()
-                            .padding(.trailing, 4)
-                        
+                        MomoText(
+                            localize.translateData(banner.subContent),
+                            typography: .actionXsBold,
+                            color: Colors.pink03,
+                            maxLines: 2
+                        )
                         Icon(source: "arrow_chevron_right_small", color: Colors.pink03)
-                    }.onTapGesture {
-                        onPressSecurity()
                     }
-                    
-                    Spacer()
-                    HStack{
-                        WebImage(url:  URL(string: applicationEnvironment.config?.trustBanner?.pciImage ?? defaultBanner.pciImage))
-                            .resizable()
-                            .scaledToFit()
-                            .frame(width: 24, height: 20)
-                        WebImage(url:  URL(string: applicationEnvironment.config?.trustBanner?.sslImage ?? defaultBanner.sslImage))
-                            .resizable()
-                            .scaledToFit()
-                            .frame(width: 52, height: 20)
+
+                    Spacer(minLength: 0)
+                    HStack(spacing: 0) {
+                        if let pciImage = banner.pciImage {
+                            WebImage(url: URL(string: pciImage))
+                                .resizable()
+                                .scaledToFit()
+                                .frame(width: 27, height: 20)
+                                .padding(.trailing, 4)
+                        }
+                        if let sslImage = banner.sslImage {
+                            WebImage(url: URL(string: sslImage))
+                                .resizable()
+                                .scaledToFit()
+                                .frame(width: 52, height: 20)
+                        }
                     }
                 }
-                
             }
-            
         }
         .padding(.all, 12)
         .background(Color(hex: "F2F8FF"))
         .cornerRadius(12)
+        .contentShape(Rectangle())
         .onTapGesture {
             onPressSecurity()
         }

package/ios/Title/Title.swift

@@ -28,7 +28,6 @@ public enum TitleButtonSize {
 
 public struct Title: View {
     @Environment(\.appTheme) private var theme
-    @Environment(\.momoFontScale) private var fontScale
 
     private let title: String
     private let type: TitleType
@@ -116,15 +115,9 @@ public struct Title: View {
         }
     }
 
-    private var titleFontWeight: Font.Weight {
-        switch type {
-        case .card: return .regular
-        case .section: return .bold
-        }
-    }
-
     private var titleMaxLines: Int {
-        (showTrailingAction || badgeLabel != nil) ? 1 : 2
+        if textOnly { return Int.max }
+        return (showTrailingAction || badgeLabel != nil) ? 1 : 2
     }
 
     private var iconVerticalAlignment: VerticalAlignment {
@@ -151,14 +144,10 @@ public struct Title: View {
         }
     }
 
+    // Every Title variant is bold in the theme font; `headerDefaultBold` only supplies the weight.
     private var titleText: some View {
-        SwiftUI.Text(title)
-            .font(.system(size: fontScale(titleFontSize), weight: titleFontWeight))
-            .ignoreBoldTextSetting()
-            .foregroundColor(theme.colors.text.default)
-            .lineSpacing(fontScale(titleLineHeight) - fontScale(titleFontSize))
-            .lineLimit(titleMaxLines)
-            .truncationMode(.tail)
+        MomoText(title, typography: .headerDefaultBold, maxLines: titleMaxLines)
+            .fontSize(titleFontSize, lineHeight: titleLineHeight)
     }
 
     private var fullLayout: some View {
@@ -237,7 +226,7 @@ public struct Title: View {
             }
         }
         .frame(maxWidth: .infinity, alignment: .leading)
-        .padding(8)
+        .padding(.top, type == .section ? Spacing.S : 0)
     }
 }
 

package/ios/Tooltip/Tooltip.swift

@@ -3,7 +3,7 @@ import SwiftUI
 // MARK: - Types
 
 /// Tooltip placement relative to the anchor element.
-public enum TooltipPlacement {
+public enum TooltipPlacement: Sendable {
     case top
     case bottom
     case left
@@ -78,24 +78,37 @@ struct TooltipArrowShape: Shape {
     func path(in rect: CGRect) -> Path {
         let w = rect.width
         let h = rect.height
-        var path = Path()
+        let points: [CGPoint]
         switch placement {
         case .top:
-            path.move(to: CGPoint(x: 0, y: 0))
-            path.addLine(to: CGPoint(x: w, y: 0))
-            path.addLine(to: CGPoint(x: w / 2, y: h))
+            points = [CGPoint(x: 0, y: 0), CGPoint(x: w, y: 0), CGPoint(x: w / 2, y: h)]
         case .bottom:
-            path.move(to: CGPoint(x: 0, y: h))
-            path.addLine(to: CGPoint(x: w, y: h))
-            path.addLine(to: CGPoint(x: w / 2, y: 0))
+            points = [CGPoint(x: 0, y: h), CGPoint(x: w, y: h), CGPoint(x: w / 2, y: 0)]
         case .left:
-            path.move(to: CGPoint(x: 0, y: 0))
-            path.addLine(to: CGPoint(x: 0, y: h))
-            path.addLine(to: CGPoint(x: w, y: h / 2))
+            points = [CGPoint(x: 0, y: 0), CGPoint(x: 0, y: h), CGPoint(x: w, y: h / 2)]
         case .right:
-            path.move(to: CGPoint(x: w, y: 0))
-            path.addLine(to: CGPoint(x: w, y: h))
-            path.addLine(to: CGPoint(x: 0, y: h / 2))
+            points = [CGPoint(x: w, y: 0), CGPoint(x: w, y: h), CGPoint(x: 0, y: h / 2)]
+        }
+        // rounded like Compose's cornerPathEffect: each corner is cut `radius` along both edges
+        let radius = TooltipConst.arrowCornerRadius
+        func toward(_ from: CGPoint, _ to: CGPoint) -> CGPoint {
+            let dx = to.x - from.x
+            let dy = to.y - from.y
+            let length = (dx * dx + dy * dy).squareRoot()
+            guard length > 0 else { return from }
+            let distance = min(radius, length / 2)
+            return CGPoint(x: from.x + dx / length * distance, y: from.y + dy / length * distance)
+        }
+        var path = Path()
+        for index in 0..<points.count {
+            let corner = points[index]
+            let start = toward(corner, points[(index + points.count - 1) % points.count])
+            if index == 0 {
+                path.move(to: start)
+            } else {
+                path.addLine(to: start)
+            }
+            path.addQuadCurve(to: toward(corner, points[(index + 1) % points.count]), control: corner)
         }
         path.closeSubpath()
         return path
@@ -209,6 +222,8 @@ private struct TooltipPositionModifier: ViewModifier {
                 }
             )
             .offset(x: originX, y: originY)
+            // the first pass has no size yet and would flash at the wrong spot
+            .opacity(popupSize == .zero ? 0 : 1)
     }
 
     private var originX: CGFloat {

package/ios/Typography/FontScale.swift

@@ -30,9 +30,9 @@ public struct FontScale: Equatable {
     public func callAsFunction(_ size: CGFloat) -> CGFloat {
         guard useOSScaleRate else { return size * userScaleRate }
 
-        // Device width is read live rather than snapshotted, matching Compose's
-        // getScreenDimensions() read inside scaleSize(), so a rotation or split-view resize counts.
-        let deviceScale = UIScreen.main.bounds.width / Self.defaultScreenSize
+        // Short side, not width: landscape must not inflate every font (and so every popup's height).
+        let bounds = UIScreen.main.bounds.size
+        let deviceScale = min(bounds.width, bounds.height) / Self.defaultScreenSize
 
         var deviceScaled = size
         var osScaled = size
@@ -52,7 +52,7 @@ public struct FontScale: Equatable {
     }
 
     /// A host-pushed mini-app context wins per field, matching Compose's
-    /// `context?.useOSScaleRate ?: KitFontScale.useOSScaleRate`.
+    /// `context?.useOSScaleRate ?: DesignSystemKits.getConfigs().useOSScaleRate`.
     public func overriding(userScaleRate: CGFloat?, useOSScaleRate: Bool?) -> FontScale {
         guard userScaleRate != nil || useOSScaleRate != nil else { return self }
         return FontScale(
@@ -66,7 +66,7 @@ public struct FontScale: Equatable {
 private struct FontScaleKey: EnvironmentKey {
     /// Computed, never stored: a bare `UIHostingController` root that never got `.momoFontScale()`
     /// still reads the live store instead of a value frozen at first access.
-    static var defaultValue: FontScale { FontScaleStore.shared.snapshot }
+    static var defaultValue: FontScale { DesignSystemKits.shared.fontScale }
 }
 
 public extension EnvironmentValues {
@@ -77,9 +77,10 @@ public extension EnvironmentValues {
 }
 
 public extension View {
-    /// Injects a Dynamic-Type-observing font scale and re-renders this subtree on change.
+    /// Injects a Dynamic-Type-observing font scale plus `\.designSystemKitsConfigs` (whitelist, remote config)
+    /// and re-renders this subtree on change.
     /// Use at every `UIHostingController` root that is not inside a `NavigationContainer`.
-    func momoFontScale(_ store: FontScaleStore = .shared, context: MiniAppContext? = nil) -> some View {
+    func momoFontScale(_ store: DesignSystemKits = .shared, context: MiniAppContext? = nil) -> some View {
         modifier(MomoFontScaleModifier(store: store, context: context))
     }
 }
@@ -87,17 +88,19 @@ public extension View {
 /// `@ObservedObject` is load-bearing, same as `MomoLocalizeModifier`: `@Environment(\.momoFontScale)`
 /// only invalidates when the boxed snapshot changes, which requires *this* body to re-run on publish.
 private struct MomoFontScaleModifier: ViewModifier {
-    @ObservedObject var store: FontScaleStore
+    @ObservedObject var store: DesignSystemKits
     let context: MiniAppContext?
 
     func body(content: Content) -> some View {
-        content.environment(
-            \.momoFontScale,
-            store.snapshot.overriding(
-                userScaleRate: context?.userScaleRate,
-                useOSScaleRate: context?.useOSScaleRate
+        content
+            .environment(
+                \.momoFontScale,
+                store.fontScale.overriding(
+                    userScaleRate: context?.userScaleRate,
+                    useOSScaleRate: context?.useOSScaleRate
+                )
             )
-        )
+            .environment(\.designSystemKitsConfigs, store.getConfigs())
     }
 }
 // AI-GENERATED END: reactive font-scale snapshot injected through the environment

package/ios/Typography/Text.swift

@@ -4,7 +4,7 @@ import SwiftUI
 /// free functions). Inside a SwiftUI view prefer `@Environment(\.momoFontScale)` so the view
 /// re-renders when Dynamic Type or the host preference changes.
 public func scaleSize(_ size: CGFloat) -> CGFloat {
-    FontScaleStore.shared.snapshot(size)
+    DesignSystemKits.shared.fontScale(size)
 }
 
 @available(*, deprecated, message: "Max font scale is fixed at 1.5; this override is no longer applied. Drop the second argument.")
@@ -99,33 +99,130 @@ public extension TypographyStyle {
     }
 }
 
-private func momoFontName(family: String, weight: Font.Weight) -> String? {
-    // Ngoai whitelist thi tra nil de momoFont() roi ve .system(...), dung nhu truoc DS-791.
-    guard KitDesignSystem.shared.isWhiteList else { return nil }
+private enum MomoFontFace {
+    case system
+    case named(String)
+}
+
+/// Port of Compose `getFontFamily`; SF Pro Text is the iOS system font, so the legacy family is `.system`.
+private func momoFontFace(family: String, weight: Font.Weight, isWhiteList: Bool) -> MomoFontFace? {
+    let isNewFamily = family == "MomoTrustSans" || family == headerFontFamily
+    // Outside the whitelist the new DS families drop to the legacy font, as before DS-791.
+    if family == "SFProText" || (isNewFamily && !isWhiteList) { return .system }
+    // single-file families (Compose maps every weight to the same .otf)
+    if family == headerFontFamily || family == "MoMoSignature" { return .named(family) }
     guard family == "MomoTrustSans" else { return nil }
     switch weight {
-    case .ultraLight, .thin: return "MomoTrustSans-ExtraLight"
-    case .light: return "MomoTrustSans-Light"
-    case .regular: return "MomoTrustSans-Regular"
-    case .medium: return "MomoTrustSans-Medium"
-    case .semibold: return "MomoTrustSans-SemiBold"
-    case .bold: return "MomoTrustSans-Bold"
-    case .heavy, .black: return "MomoTrustSans-ExtraBold"
-    default: return "MomoTrustSans-Regular"
+    case .ultraLight, .thin: return .named("MomoTrustSans-ExtraLight")
+    case .light: return .named("MomoTrustSans-Light")
+    case .regular: return .named("MomoTrustSans-Regular")
+    case .medium: return .named("MomoTrustSans-Medium")
+    case .semibold: return .named("MomoTrustSans-SemiBold")
+    case .bold: return .named("MomoTrustSans-Bold")
+    case .heavy, .black: return .named("MomoTrustSans-ExtraBold")
+    default: return .named("MomoTrustSans-Regular")
     }
 }
 
-private func momoFont(size: CGFloat, weight: Font.Weight, family: String) -> Font {
-    guard let name = momoFontName(family: family, weight: weight),
-          UIFont(name: name, size: size) != nil else {
+/// Header title family (Compose `HEADER_FONT_FAMILY`), whitelist only like the default font.
+let headerFontFamily = "MoMoTrustDisplay"
+
+private func momoFont(
+    size: CGFloat,
+    weight: Font.Weight,
+    family: String,
+    fallbackFamily: String? = nil,
+    isWhiteList: Bool
+) -> Font {
+    switch momoFontFace(family: family, weight: weight, isWhiteList: isWhiteList) {
+    case .system:
+        return .system(size: size, weight: weight)
+    case .named(let name) where UIFont(name: name, size: size) != nil:
+        return .custom(name, fixedSize: size)
+    default:
+        // Compose falls back to the default font file when a family is missing
+        if let fallbackFamily, fallbackFamily != family {
+            return momoFont(size: size, weight: weight, family: fallbackFamily, isWhiteList: isWhiteList)
+        }
         return .system(size: size, weight: weight)
     }
-    return .custom(name, fixedSize: size)
+}
+
+// lineHeight is identical across weights of a family, so the regular face is enough.
+private func momoLineHeight(size: CGFloat, family: String, fallbackFamily: String? = nil, isWhiteList: Bool) -> CGFloat {
+    switch momoFontFace(family: family, weight: .regular, isWhiteList: isWhiteList) {
+    case .system:
+        break
+    case .named(let name):
+        if let font = UIFont(name: name, size: size) { return font.lineHeight }
+        fallthrough
+    case nil:
+        if let fallbackFamily, fallbackFamily != family {
+            return momoLineHeight(size: size, family: fallbackFamily, isWhiteList: isWhiteList)
+        }
+    }
+    return UIFont.systemFont(ofSize: size).lineHeight
+}
+
+/// UIKit counterpart of `momoFont`, for text that is not a `MomoText` (UITextField/UITextView, text measuring).
+func momoUIFont(size: CGFloat, weight: UIFont.Weight, family: String, isWhiteList: Bool) -> UIFont {
+    guard case .named(let name) = momoFontFace(family: family, weight: Font.Weight(weight), isWhiteList: isWhiteList),
+          let font = UIFont(name: name, size: size) else {
+        return .systemFont(ofSize: size, weight: weight)
+    }
+    return font
+}
+
+private extension Font.Weight {
+    init(_ weight: UIFont.Weight) {
+        switch weight {
+        case .ultraLight: self = .ultraLight
+        case .thin: self = .thin
+        case .light: self = .light
+        case .medium: self = .medium
+        case .semibold: self = .semibold
+        case .bold: self = .bold
+        case .heavy: self = .heavy
+        case .black: self = .black
+        default: self = .regular
+        }
+    }
+}
+
+/// Gives input text the same family as `MomoText` (Compose's `getFontFamily`), e.g. a TextField
+/// next to a `MomoText` placeholder. `size` is unscaled; the environment font scale is applied here.
+private struct KitFontModifier: ViewModifier {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+    @Environment(\.designSystemKitsConfigs) private var designSystemKitsConfigs
+    let size: CGFloat
+    let weight: Font.Weight
+
+    func body(content: Content) -> some View {
+        content.font(momoFont(
+            size: fontScale(size),
+            weight: weight,
+            family: theme.font,
+            isWhiteList: designSystemKitsConfigs.isWhiteList
+        ))
+    }
+}
+
+extension View {
+    func kitFont(_ typography: TypographyStyle) -> some View {
+        modifier(KitFontModifier(size: typography.fontSize, weight: typography.fontWeight))
+    }
+
+    func kitFont(size: CGFloat, weight: Font.Weight = .regular) -> some View {
+        modifier(KitFontModifier(size: size, weight: weight))
+    }
 }
 
 public struct MomoText: View {
     @Environment(\.appTheme) private var theme
     @Environment(\.momoFontScale) private var fontScale
+    // From the environment, not DesignSystemKits.shared, so a whitelist flip re-renders the text.
+    @Environment(\.designSystemKitsConfigs) private var designSystemKitsConfigs
     private let content: String
     private let typography: TypographyStyle
     private let color: Color?
@@ -139,7 +236,12 @@ public struct MomoText: View {
     private let letterSpacing: CGFloat?
     private let softWrap: Bool
     private let accessibilityId: String?
+    private let fontFamily: String?
     private var highlightText: [String] = []
+    private var sizeOverride: (fontSize: CGFloat, lineHeight: CGFloat)?
+
+    private var fontSize: CGFloat { sizeOverride?.fontSize ?? typography.fontSize }
+    private var lineHeight: CGFloat { sizeOverride?.lineHeight ?? typography.lineHeight }
 
     public init(
         _ content: String,
@@ -153,7 +255,8 @@ public struct MomoText: View {
         underline: Bool = false,
         letterSpacing: CGFloat? = nil,
         softWrap: Bool = true,
-        accessibilityId: String? = nil
+        accessibilityId: String? = nil,
+        fontFamily: String? = nil
     ) {
         self.content = content
         self.typography = typography
@@ -175,6 +278,7 @@ public struct MomoText: View {
         self.letterSpacing = letterSpacing
         self.softWrap = softWrap
         self.accessibilityId = accessibilityId
+        self.fontFamily = fontFamily
     }
 
     init(_ content: String, typography: TypographyStyle, highlightText: [String]) {
@@ -182,11 +286,34 @@ public struct MomoText: View {
         self.highlightText = highlightText
     }
 
+    /// Compose's `style.copy(fontSize, lineHeight)`; the weight still comes from `typography`.
+    func fontSize(_ fontSize: CGFloat, lineHeight: CGFloat) -> MomoText {
+        var text = self
+        text.sizeOverride = (fontSize, lineHeight)
+        return text
+    }
+
+    private var font: Font {
+        momoFont(
+            size: fontScale(fontSize),
+            weight: typography.fontWeight,
+            family: fontFamily ?? theme.font,
+            fallbackFamily: theme.font,
+            isWhiteList: designSystemKitsConfigs.isWhiteList
+        )
+    }
+
     // Whole-word matches of `highlightText` render semibold; the longest keyword wins (RN parity).
     private var baseText: SwiftUI.Text {
         let keywords = highlightText.filter { !$0.isEmpty }.sorted { $0.count > $1.count }
         guard !keywords.isEmpty else { return SwiftUI.Text(content) }
-        let highlightFont = momoFont(size: fontScale(typography.fontSize), weight: TypographyStyle.headerXsSemibold.fontWeight, family: theme.font)
+        let highlightFont = momoFont(
+            size: fontScale(fontSize),
+            weight: TypographyStyle.headerXsSemibold.fontWeight,
+            family: fontFamily ?? theme.font,
+            fallbackFamily: theme.font,
+            isWhiteList: designSystemKitsConfigs.isWhiteList
+        )
         func isWordChar(_ character: Character?) -> Bool {
             guard let character else { return false }
             return character.isLetter || character.isNumber || character == "_"
@@ -222,8 +349,17 @@ public struct MomoText: View {
         // *Strikethrough styles) or the explicit `strikethrough` flag.
         let isStrikethrough = strikethrough || typography.isStrikethrough
 
+        // lineSpacing is added on top of the font's natural line height, not on top of fontSize.
+        let lineSpacing = max(0, fontScale(lineHeight)
+            - momoLineHeight(
+                size: fontScale(fontSize),
+                family: fontFamily ?? theme.font,
+                fallbackFamily: theme.font,
+                isWhiteList: designSystemKitsConfigs.isWhiteList
+            ))
+
         var text = baseText
-            .font(momoFont(size: fontScale(typography.fontSize), weight: typography.fontWeight, family: theme.font))
+            .font(font)
             .foregroundColor(textColor)
             .strikethrough(isStrikethrough, color: textColor)
             .underline(underline, color: textColor)
@@ -234,7 +370,7 @@ public struct MomoText: View {
 
         return text
             .multilineTextAlignment(textAlign)
-            .lineSpacing(fontScale(typography.lineHeight) - fontScale(typography.fontSize))
+            .lineSpacing(lineSpacing)
             .modifier(LineLimitModifier(range: lineLimitRange))
             .truncationMode(truncationMode)
             .fixedSize(horizontal: !softWrap, vertical: false)