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

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' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.168.1-beta.1-debug",
+  "version": "0.168.1-beta.10-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},

package/compose/src/commonMain/kotlin/vn/momo/kits/const/KitDesignSystem.kt

@@ -1,18 +0,0 @@
-package vn.momo.kits.const
-
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
-
-// Design-system rollout holder, same shape as KitFontScale: the kit is sandboxed and can't read the
-// host config, so the host seeds this once at startup from DesignSystemConfig. getFontFamily() reads
-// it to decide whether the new default font applies, so every screen follows the flag with no prop
-// threading. Backed by snapshot state: writes recompose text automatically.
-object KitDesignSystem {
-    var isWhiteList by mutableStateOf(false)
-        private set
-
-    fun update(isWhiteList: Boolean) {
-        this.isWhiteList = isWhiteList
-    }
-}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/KitFontScale.kt

@@ -1,22 +0,0 @@
-package vn.momo.kits.const
-
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
-
-// App-wide font-scale holder. The kit is sandboxed and can't read the host cache directly, so the
-// host (which sees both core and this kit) seeds this once at startup and pushes runtime updates into
-// it. scaleSize() reads it as the fallback, so every screen — including direct NavigationContainer
-// screens with no host-pushed MiniAppContext — scales with no per-render prop and no async flicker.
-// Backed by snapshot state: writes recompose text automatically.
-object KitFontScale {
-    var userScaleRate by mutableStateOf(1f)
-        private set
-    var useOSScaleRate by mutableStateOf(true)
-        private set
-
-    fun update(userScaleRate: Float, useOSScaleRate: Boolean) {
-        this.userScaleRate = userScaleRate
-        this.useOSScaleRate = useOSScaleRate
-    }
-}

package/ios/Typography/FontScaleStore.swift

@@ -1,58 +0,0 @@
-import SwiftUI
-
-/// App-wide font-scale inputs for the SwiftUI kit, and the single place they publish from.
-/// The host writes `update(...)` at startup (from the cache-backed `FontScaleProvider`) and again
-/// whenever the in-app font-size preference changes; the OS Dynamic Type factor is tracked here.
-/// Mirrors Compose's `KitFontScale` + `ProvideOsFontScale` pair, including its live behaviour —
-/// views re-render on change as long as the subtree got `.momoFontScale()` (`NavigationContainer`
-/// applies it). When `useOSScaleRate` is false the kit applies `userScaleRate` instead of the OS factor.
-public final class FontScaleStore: ObservableObject {
-    public static let shared = FontScaleStore()
-
-    @Published public private(set) var userScaleRate: CGFloat = 1
-    @Published public private(set) var useOSScaleRate: Bool = true
-    @Published public private(set) var osFontScale: CGFloat = FontScaleStore.currentOsFontScale()
-
-    private init() {
-        NotificationCenter.default.addObserver(
-            self,
-            selector: #selector(contentSizeCategoryDidChange),
-            name: UIContentSizeCategory.didChangeNotification,
-            object: nil
-        )
-    }
-
-    public var snapshot: FontScale {
-        FontScale(
-            userScaleRate: userScaleRate,
-            useOSScaleRate: useOSScaleRate,
-            osFontScale: osFontScale
-        )
-    }
-
-    public func update(userScaleRate: CGFloat, useOSScaleRate: Bool) {
-        onMain {
-            // Re-assigning an unchanged value would still publish and invalidate every kit subtree.
-            if self.userScaleRate != userScaleRate { self.userScaleRate = userScaleRate }
-            if self.useOSScaleRate != useOSScaleRate { self.useOSScaleRate = useOSScaleRate }
-        }
-    }
-
-    @objc private func contentSizeCategoryDidChange() {
-        let next = Self.currentOsFontScale()
-        guard next != osFontScale else { return }
-        osFontScale = next
-    }
-
-    /// Same factor Compose's iOS `ProvideOsFontScale` derives from
-    /// `UIFont.preferredFont(forTextStyle: .body).pointSize / 17`, so both iOS surfaces scale alike.
-    static func currentOsFontScale() -> CGFloat {
-        let base = UIFont.systemFont(ofSize: UIFont.labelFontSize)
-        return UIFontMetrics.default.scaledFont(for: base).pointSize / base.pointSize
-    }
-
-    /// Synchronous when already on main — an async hop would defer the change by a frame.
-    private func onMain(_ work: @escaping () -> Void) {
-        if Thread.isMainThread { work() } else { DispatchQueue.main.async(execute: work) }
-    }
-}

package/ios/Typography/KitDesignSystem.swift

@@ -1,17 +0,0 @@
-import Foundation
-
-/// Design-system rollout flag for the SwiftUI kit, mirroring Compose's `KitDesignSystem`.
-/// The kit is sandboxed and can't read the host config, so the host writes `update(_:)` once at
-/// startup from `DesignSystemConfig`. Startup-only and non-reactive, like `FontScaleStore` was
-/// before it gained live updates: there is no SwiftUI navigation container to re-render from.
-public final class KitDesignSystem {
-    public static let shared = KitDesignSystem()
-
-    public private(set) var isWhiteList: Bool = false
-
-    private init() {}
-
-    public func update(isWhiteList: Bool) {
-        self.isWhiteList = isWhiteList
-    }
-}

package/local.properties

@@ -1,8 +0,0 @@
-## This file must *NOT* be checked into Version Control Systems,
-# as it contains information specific to your local configuration.
-#
-# Location of the SDK. This is only used by Gradle.
-# For customization when using a Version Control System, please read the
-# header note.
-#Wed Aug 21 14:20:12 ICT 2024
-sdk.dir=/Users/huynhdung/Library/Android/sdk