@momo-kits/native-kits 0.162.30 → 0.162.31

package/ios/Typography/Text.swift

@@ -1,33 +1,15 @@
 import SwiftUI
 
-public func scaleSize(_ size: CGFloat, _ scaleRate: CGFloat? = nil) -> CGFloat {
-    if !FontScaleStore.shared.useOSScaleRate {
-        return size * FontScaleStore.shared.userScaleRate
-    }
-    let defaultScreenSize: CGFloat = 375
-    let maxFontScale: CGFloat = scaleRate ?? 1.5
-    let maxDeviceScale: CGFloat = 5
-
-    let deviceWidth = UIScreen.main.bounds.width
-    let deviceScale = deviceWidth / defaultScreenSize
-
-    let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
-    let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
-    let fontScale = scaledFont.pointSize / defaultFont.pointSize
-
-    var fontSizeDeviceScale = size
-    var fontSizeOSScale = size
-
-
-    if deviceScale > 1 {
-        fontSizeDeviceScale = min(fontSizeDeviceScale * deviceScale, fontSizeDeviceScale + maxDeviceScale)
-    }
-
-    if fontScale > 1 {
-        fontSizeOSScale = min(fontSizeOSScale * fontScale, fontSizeOSScale * maxFontScale)
-    }
+/// Non-reactive entry point, for call sites that cannot read the environment (UIKit bridges,
+/// 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)
+}
 
-    return max(fontSizeDeviceScale, fontSizeOSScale)
+@available(*, deprecated, message: "Max font scale is fixed at 1.5; this override is no longer applied. Drop the second argument.")
+public func scaleSize(_ size: CGFloat, _ scaleRate: CGFloat?) -> CGFloat {
+    scaleSize(size)
 }
 
 public enum TypographyStyle {
@@ -119,6 +101,7 @@ public extension TypographyStyle {
 
 public struct MomoText: View {
     @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
     private let content: String
     private let typography: TypographyStyle
     private let color: Color?
@@ -176,7 +159,7 @@ public struct MomoText: View {
         let isStrikethrough = strikethrough || typography.isStrikethrough
 
         var text = SwiftUI.Text(content)
-            .font(.system(size: scaleSize(typography.fontSize), weight: typography.fontWeight))
+            .font(fontScale.font(size: typography.fontSize, weight: typography.fontWeight))
             .foregroundColor(textColor)
             .strikethrough(isStrikethrough, color: textColor)
             .underline(underline, color: textColor)
@@ -187,7 +170,7 @@ public struct MomoText: View {
 
         return text
             .multilineTextAlignment(textAlign)
-            .lineSpacing(scaleSize(typography.lineHeight) - scaleSize(typography.fontSize))
+            .lineSpacing(fontScale(typography.lineHeight) - fontScale(typography.fontSize))
             .modifier(LineLimitModifier(range: lineLimitRange))
             .truncationMode(truncationMode)
             .fixedSize(horizontal: !softWrap, vertical: false)

package/ios/Typography/Typography.swift

@@ -10,98 +10,78 @@ public extension View {
 }
 
 public extension Font {
+    /// Non-reactive: resolves against the current `FontScaleStore` snapshot 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 {
-        if !FontScaleStore.shared.useOSScaleRate {
-            return Font.system(size: size * FontScaleStore.shared.userScaleRate)
-        }
-        let defaultScreenSize: CGFloat = 375
-        let maxFontScale: CGFloat = 1.5
-        let maxDeviceScale: CGFloat = 5
-
-        let deviceWidth = UIScreen.main.bounds.width
-        let deviceScale = deviceWidth / defaultScreenSize
-
-        let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
-        let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
-        let fontScale = scaledFont.pointSize / defaultFont.pointSize
-
-        var fontSize = size
-
-        if deviceScale > 1 {
-            fontSize = min(fontSize * deviceScale, fontSize + maxDeviceScale)
-        }
-
-        if fontScale > 1 {
-            fontSize = min(fontSize * fontScale, fontSize * maxFontScale)
-        }
-
-        return Font.system(size: fontSize)
+        FontScaleStore.shared.snapshot.font(size: size)
     }
 
     // New supported typography styles
-    static let headline_default_bold = appFont(size: 24).weight(.bold)
-    static let header_m_bold = appFont(size: 18).weight(.bold)
-    static let header_default_bold = appFont(size: 16).weight(.bold)
-    static let header_default_semibold = appFont(size: 16).weight(.semibold)
-    static let header_s_semibold = appFont(size: 14).weight(.semibold)
-    static let header_xs_semibold = appFont(size: 12).weight(.semibold)
-    static let body_default_regular = appFont(size: 14).weight(.regular)
-    static let description_default_regular = appFont(size: 12).weight(.regular)
-    static let description_xs_regular = appFont(size: 10).weight(.regular)
-    static let label_default_medium = appFont(size: 14).weight(.medium)
-    static let label_s_medium = appFont(size: 12).weight(.medium)
-    static let label_xs_medium = appFont(size: 10).weight(.medium)
-    static let action_default_bold = appFont(size: 16).weight(.bold)
-    static let action_s_bold = appFont(size: 14).weight(.bold)
-    static let action_xs_bold = appFont(size: 12).weight(.bold)
-    static let action_xxs_bold = appFont(size: 10).weight(.bold)
+    static var headline_default_bold: Font { appFont(size: 24).weight(.bold) }
+    static var header_m_bold: Font { appFont(size: 18).weight(.bold) }
+    static var header_default_bold: Font { appFont(size: 16).weight(.bold) }
+    static var header_default_semibold: Font { appFont(size: 16).weight(.semibold) }
+    static var header_s_semibold: Font { appFont(size: 14).weight(.semibold) }
+    static var header_xs_semibold: Font { appFont(size: 12).weight(.semibold) }
+    static var body_default_regular: Font { appFont(size: 14).weight(.regular) }
+    static var description_default_regular: Font { appFont(size: 12).weight(.regular) }
+    static var description_xs_regular: Font { appFont(size: 10).weight(.regular) }
+    static var label_default_medium: Font { appFont(size: 14).weight(.medium) }
+    static var label_s_medium: Font { appFont(size: 12).weight(.medium) }
+    static var label_xs_medium: Font { appFont(size: 10).weight(.medium) }
+    static var action_default_bold: Font { appFont(size: 16).weight(.bold) }
+    static var action_s_bold: Font { appFont(size: 14).weight(.bold) }
+    static var action_xs_bold: Font { appFont(size: 12).weight(.bold) }
+    static var action_xxs_bold: Font { appFont(size: 10).weight(.bold) }
 
     // Legacy styles
-    static let headline_default = appFont(size: 28).weight(.semibold)
-    static let headline_s = appFont(size: 24).weight(.semibold)
-    static let headline_l = appFont(size: 32).weight(.semibold)
-    static let headline_xl = appFont(size: 36).weight(.semibold)
-    static let title_default = appFont(size: 20).weight(.bold)
-    static let title_xs = appFont(size: 16).weight(.bold)
-    static let title_s = appFont(size: 18).weight(.bold)
-    static let header_default = appFont(size: 15).weight(.semibold)
-    static let header_xs = appFont(size: 12).weight(.semibold)
-    static let header_s = appFont(size: 14).weight(.semibold)
-    static let paragraph_default = appFont(size: 15).weight(.regular)
-    static let paragraph_bold = appFont(size: 15).weight(.bold)
-    static let description_default = appFont(size: 14).weight(.regular)
-    static let description_xs = appFont(size: 10).weight(.regular)
-    static let description_s = appFont(size: 12).weight(.regular)
-    static let label_default = appFont(size: 14).weight(.medium)
-    static let label_xxs = appFont(size: 8).weight(.medium)
-    static let label_xs = appFont(size: 10).weight(.medium)
-    static let label_s = appFont(size: 12).weight(.medium)
-    static let action_default = appFont(size: 16).weight(.bold)
-    static let action_xxs = appFont(size: 10).weight(.bold)
-    static let action_xs = appFont(size: 12).weight(.bold)
-    static let action_s = appFont(size: 15).weight(.bold)
+    static var headline_default: Font { appFont(size: 28).weight(.semibold) }
+    static var headline_s: Font { appFont(size: 24).weight(.semibold) }
+    static var headline_l: Font { appFont(size: 32).weight(.semibold) }
+    static var headline_xl: Font { appFont(size: 36).weight(.semibold) }
+    static var title_default: Font { appFont(size: 20).weight(.bold) }
+    static var title_xs: Font { appFont(size: 16).weight(.bold) }
+    static var title_s: Font { appFont(size: 18).weight(.bold) }
+    static var header_default: Font { appFont(size: 15).weight(.semibold) }
+    static var header_xs: Font { appFont(size: 12).weight(.semibold) }
+    static var header_s: Font { appFont(size: 14).weight(.semibold) }
+    static var paragraph_default: Font { appFont(size: 15).weight(.regular) }
+    static var paragraph_bold: Font { appFont(size: 15).weight(.bold) }
+    static var description_default: Font { appFont(size: 14).weight(.regular) }
+    static var description_xs: Font { appFont(size: 10).weight(.regular) }
+    static var description_s: Font { appFont(size: 12).weight(.regular) }
+    static var label_default: Font { appFont(size: 14).weight(.medium) }
+    static var label_xxs: Font { appFont(size: 8).weight(.medium) }
+    static var label_xs: Font { appFont(size: 10).weight(.medium) }
+    static var label_s: Font { appFont(size: 12).weight(.medium) }
+    static var action_default: Font { appFont(size: 16).weight(.bold) }
+    static var action_xxs: Font { appFont(size: 10).weight(.bold) }
+    static var action_xs: Font { appFont(size: 12).weight(.bold) }
+    static var action_s: Font { appFont(size: 15).weight(.bold) }
 
     // deprecated
-    static let h1 = appFont(size: 36).weight(.semibold) //headline_xl
-    static let h2 = appFont(size: 32).weight(.semibold)
-    static let h3 = appFont(size: 28).weight(.semibold)
-    static let h4 = appFont(size: 24).weight(.semibold)
-    static let title1 = appFont(size: 20).weight(.bold)
-    static let title2 = appFont(size: 18).weight(.bold)
-    static let title3 = appFont(size: 16).weight(.bold)
-    static let headerText1 = appFont(size: 15).weight(.semibold) //header_default
-    static let headerText2 = appFont(size: 14).weight(.semibold)
-    static let headerText3 = appFont(size: 12).weight(.semibold)
-    static let paragraph = appFont(size: 15).weight(.regular) //paragraph_default
-    static let description1 = appFont(size: 14).weight(.regular)
-    static let description2 = appFont(size: 12).weight(.regular)
-    static let description3 = appFont(size: 10).weight(.regular)
-    static let label1 = appFont(size: 14).weight(.medium)
-    static let label2 = appFont(size: 12).weight(.medium)
-    static let label3 = appFont(size: 10).weight(.medium)
-    static let label4 = appFont(size: 8).weight(.medium)
-    static let action1 = appFont(size: 16).weight(.bold)
-    static let action2 = appFont(size: 15).weight(.bold)
-    static let action3 = appFont(size: 12).weight(.bold)
-    static let action4 = appFont(size: 10).weight(.bold)
+    static var h1: Font { appFont(size: 36).weight(.semibold) } //headline_xl
+    static var h2: Font { appFont(size: 32).weight(.semibold) }
+    static var h3: Font { appFont(size: 28).weight(.semibold) }
+    static var h4: Font { appFont(size: 24).weight(.semibold) }
+    static var title1: Font { appFont(size: 20).weight(.bold) }
+    static var title2: Font { appFont(size: 18).weight(.bold) }
+    static var title3: Font { appFont(size: 16).weight(.bold) }
+    static var headerText1: Font { appFont(size: 15).weight(.semibold) } //header_default
+    static var headerText2: Font { appFont(size: 14).weight(.semibold) }
+    static var headerText3: Font { appFont(size: 12).weight(.semibold) }
+    static var paragraph: Font { appFont(size: 15).weight(.regular) } //paragraph_default
+    static var description1: Font { appFont(size: 14).weight(.regular) }
+    static var description2: Font { appFont(size: 12).weight(.regular) }
+    static var description3: Font { appFont(size: 10).weight(.regular) }
+    static var label1: Font { appFont(size: 14).weight(.medium) }
+    static var label2: Font { appFont(size: 12).weight(.medium) }
+    static var label3: Font { appFont(size: 10).weight(.medium) }
+    static var label4: Font { appFont(size: 8).weight(.medium) }
+    static var action1: Font { appFont(size: 16).weight(.bold) }
+    static var action2: Font { appFont(size: 15).weight(.bold) }
+    static var action3: Font { appFont(size: 12).weight(.bold) }
+    static var action4: Font { appFont(size: 10).weight(.bold) }
 }

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.163.1-beta.16'
+  s.version          = '0.163.1-sp.10'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }
@@ -34,6 +34,7 @@ Pod::Spec.new do |s|
     "InputDropDown/**/*.{swift,m,h}",
     "InputMoney/**/*.{swift,m,h}",
     "InputOTP/**/*.{swift,m,h}",
+    "Layout/**/*.{swift,m,h}",
     "Loader/**/*.{swift,m,h}",
     "Lottie/**/*.{swift,m,h}",
     "OTPKeyboard/**/*.{swift,m,h}",

package/ios-demo/MoMoUIKitsDemo.podspec

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

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/AvatarDemo.swift

@@ -2,92 +2,106 @@
 //  AvatarDemo.swift
 //  Example
 //
+//  Preview + Playground demo (DemoScreen pattern).
+//
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 struct AvatarDemo: View {
     var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Size") {
-                    HStack(alignment: .center, spacing: 8) {
-                        Avatar(size: .size24)
-                        Avatar(size: .size32)
-                        Avatar(size: .size40)
-                        Avatar(size: .size48)
-                        Avatar(size: .size56)
-                        Avatar(size: .size72)
-                    }
-                }
-
-                section("Rounded vs Square") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, rounded: true)
-                        Avatar(size: .size40, rounded: false)
-                    }
-                }
-
-                section("Name (initials)") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, name: "Nguyen Van A")
-                        Avatar(size: .size40, name: "John Doe")
-                        Avatar(size: .size40, name: "MoMo")
-                    }
-                }
-
-                section("Image") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, image: "https://i.pravatar.cc/150?img=1")
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=2")
-                        Avatar(size: .size72, image: "https://i.pravatar.cc/150?img=3")
-                    }
-                }
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { AvatarPreview() }, playground: { AvatarPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
 
-                section("showIconMomo") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, showIconMomo: true)
-                        Avatar(size: .size48, name: "MN", showIconMomo: true)
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=4", showIconMomo: true)
-                    }
-                }
+private let avatarSizeList: [PlaygroundOption] = [
+    .init("size24", AvatarSize.size24),
+    .init("size32", AvatarSize.size32),
+    .init("size40", AvatarSize.size40),
+    .init("size48", AvatarSize.size48),
+    .init("size56", AvatarSize.size56),
+    .init("size72", AvatarSize.size72),
+]
 
-                section("showIconSupport") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size40, showIconSupport: true)
-                        Avatar(size: .size48, name: "CS", showIconSupport: true)
-                        Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=5", showIconSupport: true)
-                    }
-                }
+// MARK: - Preview
 
-                section("showIconMomo + showIconSupport") {
-                    HStack(spacing: 8) {
-                        Avatar(size: .size56, showIconMomo: true, showIconSupport: true)
-                        Avatar(size: .size72, name: "NV", showIconMomo: true, showIconSupport: true)
-                    }
-                }
+private struct AvatarPreview: View {
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            HStack(alignment: .center, spacing: Spacing.S) {
+                Avatar(size: .size24)
+                Avatar(size: .size32)
+                Avatar(size: .size40)
+                Avatar(size: .size48)
+                Avatar(size: .size56)
+                Avatar(size: .size72)
             }
-            .padding()
         }
-    }
-
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.headline)
-            content()
+        BasicColumnBox("Rounded vs Square", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, rounded: true)
+                Avatar(size: .size40, rounded: false)
+            }
+        }
+        BasicColumnBox("Name (initials)", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, name: "Nguyen Van A")
+                Avatar(size: .size40, name: "John Doe")
+                Avatar(size: .size40, name: "MoMo")
+            }
+        }
+        BasicColumnBox("Image", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, image: "https://i.pravatar.cc/150?img=1")
+                Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=2")
+                Avatar(size: .size72, image: "https://i.pravatar.cc/150?img=3")
+            }
+        }
+        BasicColumnBox("Icon badges", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size48, showIconMomo: true)
+                Avatar(size: .size48, showIconSupport: true)
+                Avatar(size: .size56, showIconMomo: true, showIconSupport: true)
+            }
         }
     }
 }
 
-#if DEBUG
-struct AvatarDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        AvatarDemo()
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct AvatarPlayground: View {
+    @State private var size: PlaygroundOption? = avatarSizeList.first { $0.key == "size48" }
+    @State private var rounded = true
+    @State private var name = ""
+    @State private var image = ""
+    @State private var showIconMomo = false
+    @State private var showIconSupport = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Avatar(
+                    size: (size?.value as? AvatarSize) ?? .size48,
+                    rounded: rounded,
+                    name: name.isEmpty ? nil : name,
+                    image: image.isEmpty ? nil : image,
+                    showIconMomo: showIconMomo,
+                    showIconSupport: showIconSupport
+                )
+            },
+            params: [
+                .radio("Size", avatarSizeList, $size),
+                .checkbox("Rounded", $rounded),
+                .string("Name", $name),
+                .string("Image", $image),
+                .checkbox("ShowIconMomo", $showIconMomo),
+                .checkbox("ShowIconSupport", $showIconSupport),
+            ]
+        )
     }
 }
-#endif