@momo-kits/native-kits 0.168.1-beta.1 → 0.168.1-beta.10-debug

package/ios/Navigation/BottomTab/DuoTabBar.swift

@@ -3,7 +3,7 @@
 //  MoMoUIKits
 //
 //  iPhone Duo tab bar, port of RN `BottomTab/DuoTabBar.tsx` (Figma Fold-Design-System MT1/MT2):
-//  a glass rail in the side bar, or a floating glass bar when unfolded portrait.
+//  a rail in the side bar, or a floating bar when unfolded portrait.
 //
 
 import SwiftUI
@@ -16,12 +16,15 @@ private let railGap = Spacing.XXS
 // selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
 private let railBubbleWidth: CGFloat = 44
 private let railBubbleHeight: CGFloat = 58
-let duoFloatingTabBarHeight: CGFloat = 62
+private let floatingHeight = DuoMetrics.floatingTabBarHeight
 private let floatingPadding = Spacing.XS
-private let floatingQrSize: CGFloat = 44
-// floating bar spans 6 of the 8 portrait grid columns, like the content
-private let gridColumns: CGFloat = 8
-private let gridSpan: CGFloat = 6
+// the system bar sizes its pill to the tabs instead of stretching it across the display
+private let floatingItemWidth: CGFloat = 80
+// while pressed the selection bubble grows into a lens past the pill's edges
+private let lensScaleX: CGFloat = 1.2
+private let lensScaleY: CGFloat = 1.3
+// Figma Home-2026 tab bar "Selection": brand pink at 8%
+private let selectionTintOpacity: Double = 0x14 / 255
 private let tabSpring = Animation.interpolatingSpring(mass: 0.8, stiffness: 220, damping: 18)
 
 /// Room tab screens leave for the Duo tab bar, provided by BottomTab to its tab StackScreens.
@@ -51,47 +54,34 @@ func duoRailHeight(itemCount: Int, hasQr: Bool, compressed: Bool = false) -> CGF
 }
 
 extension ScreenLayout {
+    /// Overlaps the home indicator inset like the system tab bar (21pt above the bottom with a 34pt inset).
+    var duoFloatingTabBarBottom: CGFloat {
+        max(insets.bottom - DuoMetrics.floatingTabBarInsetOverlap, Spacing.S)
+    }
+
     func duoTabBarInsets(itemCount: Int, hasFloatingButton: Bool, tabBarCompressed: Bool = false) -> DuoTabBarInsets {
         guard isIPhoneDuo else { return DuoTabBarInsets() }
         guard let sideBar else {
-            return DuoTabBarInsets(overlay: duoFloatingTabBarHeight + Spacing.M)
+            // overlay is measured from the bottom safe area, the bar reaches into it
+            return DuoTabBarInsets(overlay: floatingHeight + duoFloatingTabBarBottom - insets.bottom)
         }
         let rail = duoRailHeight(itemCount: itemCount, hasQr: hasFloatingButton, compressed: tabBarCompressed)
         return DuoTabBarInsets(sideBarReserve: sideBar.bottom + rail + DuoBarCompression.groupGap)
     }
 }
 
-/// Glass on iOS 26, a system blur before it (RN GlassView's fallback).
-struct DuoBarMaterial<S: Shape>: ViewModifier {
+/// RN `BarMaterial`: surface with a 1pt border.
+struct DuoBarMaterial<S: InsettableShape>: ViewModifier {
     let shape: S
-    var visible: Bool = true
-
-    func body(content: Content) -> some View {
-        content.background(material.allowsHitTesting(false))
-    }
 
-    @ViewBuilder
-    private var material: some View {
-        #if compiler(>=6.2)
-        if #available(iOS 26.0, *) {
-            // glass materializes by toggling its effect, it does not fade with opacity
-            Color.clear
-                .glassEffect(visible ? .regular : .identity, in: shape)
-                .shadow(color: Color.black.opacity(visible ? 0.16 : 0), radius: 16, x: 0, y: 6)
-                .animation(.easeInOut(duration: 0.25), value: visible)
-        } else {
-            blur
-        }
-        #else
-        blur
-        #endif
-    }
+    @Environment(\.appTheme) private var theme
 
-    private var blur: some View {
-        shape.fill(.regularMaterial)
-            .shadow(color: Color.black.opacity(0.16), radius: 16, x: 0, y: 6)
-            .opacity(visible ? 1 : 0)
-            .animation(.easeInOut(duration: 0.25), value: visible)
+    func body(content: Content) -> some View {
+        content.background(
+            shape.fill(theme.colors.background.surface)
+                .overlay(shape.strokeBorder(theme.colors.border.default, lineWidth: 1))
+                .allowsHitTesting(false)
+        )
     }
 }
 
@@ -126,7 +116,7 @@ private struct DuoRailTabBar: View {
     let onTabSelected: (Int) -> Void
     let compression: DuoBarCompression
 
-    @Environment(\.appTheme) private var theme
+    @State private var pressedIndex: Int?
 
     private var isRight: Bool { sideBar.edge == .right }
 
@@ -157,15 +147,15 @@ private struct DuoRailTabBar: View {
         .ignoresSafeArea()
     }
 
-    /// Glass column of tab items with the sliding selection bubble.
+    /// Column of icon-only tab items with the sliding selection bubble.
     private var rail: some View {
         ZStack(alignment: .top) {
-            Capsule()
-                .fill(theme.colors.background.selected)
+            DuoSelectionMaterial(lens: pressedIndex != nil)
                 .frame(width: railBubbleWidth, height: railBubbleHeight)
                 .offset(y: railPadding - (railBubbleHeight - itemSize) / 2
-                    + CGFloat(selectedIndex) * (itemSize + railGap))
+                    + CGFloat(pressedIndex ?? selectedIndex) * (itemSize + railGap))
                 .animation(tabSpring, value: selectedIndex)
+                .animation(tabSpring, value: pressedIndex)
 
             VStack(spacing: railGap) {
                 ForEach(items.indices, id: \.self) { index in
@@ -177,19 +167,19 @@ private struct DuoRailTabBar: View {
                             .frame(width: itemSize, height: itemSize)
                             .contentShape(Rectangle())
                     }
-                    .buttonStyle(.plain)
+                    .buttonStyle(DuoLensPressStyle(index: index, pressedIndex: $pressedIndex))
                     .accessibilityLabel(items[index].label)
                 }
             }
             .padding(.vertical, railPadding)
         }
         .frame(width: itemSize)
-        .modifier(DuoBarMaterial(shape: RoundedRectangle(cornerRadius: Radius.XL)))
+        .modifier(DuoBarMaterial(shape: Capsule()))
         .accessibilityIdentifier("bottom_tab_bar")
     }
 }
 
-/// Floating labelled bar for the unfolded portrait display, QR in the middle cell (Figma MT1-M).
+/// Floating labelled bar for the unfolded portrait display, QR pinned in its own platter beside it.
 private struct DuoFloatingTabBar: View {
     let items: [BottomTabItem]
     let floatingButton: BottomTabFloatingButton?
@@ -198,45 +188,48 @@ private struct DuoFloatingTabBar: View {
 
     @Environment(\.screenLayout) private var layout
     @Environment(\.appTheme) private var theme
+    @State private var pressedIndex: Int?
 
     private var barWidth: CGFloat {
-        let columnWidth = (layout.width - 2 * Spacing.M - (gridColumns - 1) * Spacing.M) / gridColumns
-        return columnWidth * gridSpan + (gridSpan - 1) * Spacing.M
+        let margins = layout.insets.leading + layout.insets.trailing + 2 * DuoMetrics.floatingTabBarMargin
+        let qr = floatingButton == nil ? 0 : floatingHeight + Spacing.S
+        let preferred = CGFloat(items.count) * floatingItemWidth + 2 * floatingPadding
+        return max(min(preferred, layout.width - margins - qr), 0)
     }
 
-    private var useQr: Bool { floatingButton != nil && items.count % 2 == 0 }
-    private var middle: Int { items.count / 2 }
-    private var cellCount: Int { items.count + (useQr ? 1 : 0) }
-    private var cellWidth: CGFloat { (barWidth - floatingPadding * 2) / CGFloat(max(cellCount, 1)) }
-    private var visualIndex: Int { useQr && selectedIndex >= middle ? selectedIndex + 1 : selectedIndex }
+    private var cellWidth: CGFloat { (barWidth - floatingPadding * 2) / CGFloat(max(items.count, 1)) }
 
     var body: some View {
+        HStack(spacing: Spacing.S) {
+            bar
+            if let floatingButton {
+                DuoQrButton(data: floatingButton, size: floatingHeight)
+                    .shadow(color: Color.black.opacity(0.16), radius: 16, x: 0, y: 6)
+            }
+        }
+        .padding(.bottom, layout.duoFloatingTabBarBottom)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
+        .ignoresSafeArea()
+    }
+
+    private var bar: some View {
         ZStack(alignment: .leading) {
-            Capsule()
-                .fill(theme.colors.background.selected)
+            DuoSelectionMaterial(lens: pressedIndex != nil)
                 .frame(width: cellWidth)
-                .offset(x: CGFloat(visualIndex) * cellWidth)
-                .animation(tabSpring, value: visualIndex)
+                .offset(x: CGFloat(pressedIndex ?? selectedIndex) * cellWidth)
+                .animation(tabSpring, value: selectedIndex)
+                .animation(tabSpring, value: pressedIndex)
 
             HStack(spacing: 0) {
-                ForEach(0..<cellCount, id: \.self) { cell in
-                    if useQr && cell == middle, let floatingButton {
-                        DuoQrButton(data: floatingButton, size: floatingQrSize)
-                            .frame(width: cellWidth)
-                    } else {
-                        let index = useQr && cell > middle ? cell - 1 : cell
-                        tabCell(index)
-                    }
+                ForEach(items.indices, id: \.self) { index in
+                    tabCell(index)
                 }
             }
         }
         .padding(floatingPadding)
-        .frame(width: barWidth, height: duoFloatingTabBarHeight)
+        .frame(width: barWidth, height: floatingHeight)
         .modifier(DuoBarMaterial(shape: Capsule()))
         .accessibilityIdentifier("bottom_tab_bar")
-        .padding(.bottom, layout.insets.bottom + Spacing.M)
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
-        .ignoresSafeArea()
     }
 
     private func tabCell(_ index: Int) -> some View {
@@ -247,20 +240,52 @@ private struct DuoFloatingTabBar: View {
                 MomoText(
                     items[index].label,
                     typography: .labelXsMedium,
-                    color: selected ? theme.colors.primary : theme.colors.text.default,
+                    color: selected ? theme.colors.primary : theme.colors.text.hint,
                     textAlign: .center,
                     maxLines: 1
                 )
+                // like the system tab bar the label keeps its design size; a constant snapshot, nothing to observe
+                .environment(\.momoFontScale, FontScale(userScaleRate: 1, useOSScaleRate: false))
             }
             .frame(width: cellWidth)
             .frame(maxHeight: .infinity)
             .contentShape(Rectangle())
         }
-        .buttonStyle(.plain)
+        .buttonStyle(DuoLensPressStyle(index: index, pressedIndex: $pressedIndex))
         .accessibilityLabel(items[index].label)
     }
 }
 
+/// Pink tinted capsule under the selected tab; while pressed it grows into a lens (80x54 to about 96x70).
+private struct DuoSelectionMaterial: View {
+    let lens: Bool
+
+    @Environment(\.appTheme) private var theme
+
+    var body: some View {
+        Capsule()
+            .fill(theme.colors.primary.opacity(selectionTintOpacity))
+            .scaleEffect(x: lens ? lensScaleX : 1, y: lens ? lensScaleY : 1)
+            .allowsHitTesting(false)
+    }
+}
+
+/// Tracks the finger so the selection lens jumps to the pressed tab before it is selected.
+private struct DuoLensPressStyle: ButtonStyle {
+    let index: Int
+    @Binding var pressedIndex: Int?
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label.onChange(of: configuration.isPressed) { pressed in
+            if pressed {
+                pressedIndex = index
+            } else if pressedIndex == index {
+                pressedIndex = nil
+            }
+        }
+    }
+}
+
 private struct DuoTabIcon: View {
     let item: BottomTabItem
     let selected: Bool
@@ -274,7 +299,7 @@ private struct DuoTabIcon: View {
     }
 
     var body: some View {
-        Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.default)
+        Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.hint)
             .overlay(alignment: .topTrailing) {
                 if let badgeLabel, !badgeLabel.isEmpty {
                     Badge(label: badgeLabel).offset(x: Spacing.S, y: -Spacing.XS)

package/ios/Navigation/Component/HeaderBackground.swift

@@ -90,6 +90,27 @@ private let duoGradientExtra: CGFloat = 52
 // scroll distance over which the extended gradient collapses to the header
 private let duoExtendedCollapseDistance: CGFloat = 100
 
+// scroll distance over which the bar fades in
+private let duoBarFadeDistance: CGFloat = 16
+
+/// Port of RN `DuoGlassBackground`: translucent surface with a hairline, shown once the content
+/// scrolls `fadeStart` under the header.
+struct DuoHeaderBar: View {
+    let scrollOffset: CGFloat
+    var fadeStart: CGFloat = 0
+
+    @Environment(\.appTheme) private var theme
+
+    var body: some View {
+        theme.colors.background.surface.opacity(0.8)
+            .overlay(alignment: .bottom) {
+                theme.colors.border.default.frame(height: 0.5)
+            }
+            .opacity(min(max((scrollOffset - fadeStart) / duoBarFadeDistance, 0), 1))
+            .allowsHitTesting(false)
+    }
+}
+
 /// Port of RN `DuoScrollGradient`: with the glass header the content scrolls under the bar, so the
 /// header gradient is drawn under it. Compose draws this inside `HeaderBackground`.
 struct DuoScrollGradient: View {
@@ -114,7 +135,7 @@ struct DuoScrollGradient: View {
                 let progress = min(scroll / duoExtendedCollapseDistance, 1)
                 gradient
                     .frame(height: headerHeight + (extended ? duoGradientExtra * (1 - progress) : 0))
-                    .opacity(1 - min(scroll / duoGradientExtra, 1))
+                    .opacity(Double(1 - min(scroll / duoGradientExtra, 1)))
             }
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)

package/ios/Navigation/StackScreen.swift

@@ -403,11 +403,8 @@ public struct StackScreen<Content: View>: View {
                     .background(alignment: .top) {
                         Group {
                             if layout.sideBar != nil {
-                                // glass shows once the banner has scrolled under the header
-                                Color.clear.modifier(DuoBarMaterial(
-                                    shape: Rectangle(),
-                                    visible: scrollOffset > heroGlassStart(animatedHeader)
-                                ))
+                                // the bar shows once the banner has scrolled under the header
+                                DuoHeaderBar(scrollOffset: scrollOffset, fadeStart: heroGlassStart(animatedHeader))
                             } else {
                                 HeaderBarBackground(opacity: opacity)
                             }
@@ -457,8 +454,7 @@ public struct StackScreen<Content: View>: View {
 
                 header
                     .background(
-                        Color.clear
-                            .modifier(DuoBarMaterial(shape: Rectangle(), visible: scrollOffset > 0))
+                        DuoHeaderBar(scrollOffset: scrollOffset)
                             .edgesIgnoringSafeArea([.top, .horizontal])
                     )
                     .offset(y: -headerHide)

package/ios/Popup/PopupLayout.swift

@@ -5,8 +5,6 @@ import SwiftUI
 private let duoPopupMaxWidth: CGFloat = 440
 
 extension ScreenLayout {
-    var isDuoDevice: Bool { isIPhoneDuoDevice(windowSize: CGSize(width: width, height: height)) }
-
     /// Card width cap (Compose `popupMaxWidth`); unbounded off iPhone Duo, where the popup's own padding sets the width.
     var popupMaxWidth: CGFloat {
         isDuoDevice ? duoPopupMaxWidth : .infinity

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,7 +105,7 @@ 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.

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -11,7 +11,7 @@ import SDWebImageSwiftUI
 
 let jsonUrl = "https://static.momocdn.net/app/json/component-kits/design_system.json"
 
-public struct TrustBannerData: Decodable {
+public struct TrustBannerData: Decodable, Equatable {
     public let content: [String: String]
     public let subContent: [String: String]
     public let pciImage: String?
@@ -85,6 +85,7 @@ let defaultBanner = TrustBannerData(
 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
@@ -104,7 +105,8 @@ public struct TrustBanner: View {
     }
 
     private var banner: TrustBannerData {
-        applicationEnvironment.config?.trustBanner ?? defaultBanner
+        // Container config wins, else the host-pushed DesignSystemKits config (Compose parity).
+        (applicationEnvironment.config ?? designSystemKitsConfigs.designSystemConfig)?.trustBanner ?? defaultBanner
     }
 
     func onPressSecurity() {

package/ios/Typography/FontScale.swift

@@ -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.")
@@ -105,10 +105,10 @@ private enum MomoFontFace {
 }
 
 /// 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) -> MomoFontFace? {
+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 && !KitDesignSystem.shared.isWhiteList) { return .system }
+    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 }
@@ -127,8 +127,14 @@ private func momoFontFace(family: String, weight: Font.Weight) -> MomoFontFace?
 /// 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) -> Font {
-    switch momoFontFace(family: family, weight: weight) {
+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:
@@ -136,15 +142,15 @@ private func momoFont(size: CGFloat, weight: Font.Weight, family: String, fallba
     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)
+            return momoFont(size: size, weight: weight, family: fallbackFamily, isWhiteList: isWhiteList)
         }
         return .system(size: size, weight: weight)
     }
 }
 
 // lineHeight is identical across weights of a family, so the regular face is enough.
-private func momoLineHeight(size: CGFloat, family: String, fallbackFamily: String? = nil) -> CGFloat {
-    switch momoFontFace(family: family, weight: .regular) {
+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):
@@ -152,15 +158,71 @@ private func momoLineHeight(size: CGFloat, family: String, fallbackFamily: Strin
         fallthrough
     case nil:
         if let fallbackFamily, fallbackFamily != family {
-            return momoLineHeight(size: size, family: fallbackFamily)
+            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?
@@ -236,7 +298,8 @@ public struct MomoText: View {
             size: fontScale(fontSize),
             weight: typography.fontWeight,
             family: fontFamily ?? theme.font,
-            fallbackFamily: theme.font
+            fallbackFamily: theme.font,
+            isWhiteList: designSystemKitsConfigs.isWhiteList
         )
     }
 
@@ -244,7 +307,13 @@ public struct MomoText: View {
     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(fontSize), weight: TypographyStyle.headerXsSemibold.fontWeight, family: fontFamily ?? theme.font, fallbackFamily: 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 == "_"
@@ -282,7 +351,12 @@ public struct MomoText: View {
 
         // 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))
+            - momoLineHeight(
+                size: fontScale(fontSize),
+                family: fontFamily ?? theme.font,
+                fallbackFamily: theme.font,
+                isWhiteList: designSystemKitsConfigs.isWhiteList
+            ))
 
         var text = baseText
             .font(font)

package/ios/Typography/Typography.swift

@@ -10,12 +10,12 @@ public extension View {
 }
 
 public extension Font {
-    /// Non-reactive: resolves against the current `FontScaleStore` snapshot at each access. The
+    /// Non-reactive: resolves against the current `DesignSystemKits` font scale at each access. The
     /// styles below are computed properties for that reason — as stored `static let`s they would
     /// freeze the scale at first access and never pick up a Dynamic Type change.
     /// Inside a view, `@Environment(\.momoFontScale)` + `fontScale.font(size:weight:)` also re-renders.
     static func appFont(size: CGFloat) -> Font {
-        FontScaleStore.shared.snapshot.font(size: size)
+        DesignSystemKits.shared.fontScale.font(size: size)
     }
 
     // New supported typography styles

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.168.1-beta.1'
+  s.version          = '0.167.1-beta.22'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.168.1-beta.1'
+  s.version          = '0.167.1-beta.22'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }