@momo-kits/native-kits 0.167.1-beta.20 → 0.167.1-beta.21

package/ios/Badge/BadgeRibbon.swift

@@ -204,6 +204,7 @@ public struct BadgeRibbon: View {
 /// rotation) — the label gets the same scale applied a second time so it stays right-reading
 /// while only the ribbon shape flips.
 public struct RoundedBadgeRibbon: View {
+    @Environment(\.appTheme) private var theme
     @Environment(\.momoFontScale) private var fontScale
     let text: String
     let position: RibbonPosition
@@ -224,7 +225,7 @@ public struct RoundedBadgeRibbon: View {
 
     private var measuredTextSize: CGSize {
         let fontSize = fontScale(TypographyStyle.labelXsMedium.fontSize)
-        let font = UIFont.systemFont(ofSize: fontSize, weight: .medium)
+        let font = momoUIFont(size: fontSize, weight: .medium, family: theme.font)
         return text.size(withAttributes: [.font: font])
     }
 

package/ios/Input/Input.swift

@@ -181,7 +181,7 @@ public struct Input: View {
                                 handleFocusChange(focused)
                             })
                             .keyboardType(keyboardType)
-                            .font(fontWeight == .bold ? .action_s_bold : .body_default_regular)
+                            .kitFont(fontWeight == .bold ? .actionSBold : .bodyDefaultRegular)
                             .ignoreBoldTextSetting()
                             .foregroundColor(getTextColor())
                             .disabled(disabled || readOnly)
@@ -349,7 +349,7 @@ private struct SecureInputField: UIViewRepresentable {
         textField.isSecureTextEntry = true
         textField.delegate = context.coordinator
         textField.keyboardType = keyboardType
-        textField.font = UIFont.systemFont(ofSize: fontSize, weight: fontWeight)
+        textField.font = momoUIFont(size: fontSize, weight: fontWeight, family: context.environment.appTheme.font)
         textField.textColor = textColor
         textField.isEnabled = !isDisabled
         textField.setContentHuggingPriority(.defaultLow, for: .horizontal)

package/ios/Input/InputPhoneNumber.swift

@@ -105,7 +105,7 @@ public struct InputPhoneNumber: View {
                         handleFocusChange(focused)
                     })
                     .keyboardType(.numberPad)
-                    .font(size == .small ? .header_s_semibold : .header_m_bold)
+                    .kitFont(size == .small ? .headerSSemibold : .headerMBold)
                     .ignoreBoldTextSetting()
                     .foregroundColor(theme.colors.text.default)
                     .applyCursorColor(theme.colors.primary)

package/ios/Input/InputSearch.swift

@@ -104,7 +104,6 @@ public struct InputSearchProps {
 
 public struct InputSearch: View {
     @Environment(\.appTheme) private var theme
-    @Environment(\.momoFontScale) private var fontScale
     @Binding var text: String
     var buttonText: String = ""
     var showButtonText: Bool = false
@@ -215,7 +214,7 @@ public struct InputSearch: View {
                             } else {
                                 Text(placeholder)
                                     .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
-                                    .font(.system(size: fontScale(14), weight: fontWeight))
+                                    .kitFont(size: 14, weight: fontWeight)
                                     .ignoreBoldTextSetting()
                             }
                         }
@@ -232,7 +231,7 @@ public struct InputSearch: View {
                         }, onCommit: {})
                         .disabled(disabled)
                         .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.default)
-                        .font(.system(size: fontScale(14), weight: fontWeight))
+                        .kitFont(size: 14, weight: fontWeight)
                         .ignoreBoldTextSetting()
                         .keyboardType(keyboardType)
                         .applyCursorColor(theme.colors.primary)

package/ios/Input/InputTextArea.swift

@@ -39,9 +39,10 @@ struct UITextViewWrapper: UIViewRepresentable {
         uiView.tintColor = UIColor(cursorColor)
         // Read through `context.environment` rather than the global `scaleSize`: that is what makes
         // SwiftUI re-run updateUIView when the font scale changes.
-        uiView.font = UIFont.systemFont(
-            ofSize: context.environment.momoFontScale(16),
-            weight: fontWeight == .bold ? .bold : .regular
+        uiView.font = momoUIFont(
+            size: context.environment.momoFontScale(16),
+            weight: fontWeight == .bold ? .bold : .regular,
+            family: context.environment.appTheme.font
         )
         uiView.isEditable = !disabled
     }
@@ -210,7 +211,7 @@ public struct InputTextArea: View {
                                     if text.isEmpty {
                                         Text(placeholder)
                                             .foregroundColor(disabled ? theme.colors.text.disable : theme.colors.text.hint)
-                                            .font(.system(size: 16, weight: fontWeight))
+                                            .kitFont(size: 16, weight: fontWeight)
                                             .padding(.horizontal, 16)
                                             .padding(.vertical, 12)
                                     }

package/ios/InputMoney/InputMoney.swift

@@ -315,7 +315,11 @@ private struct MoneyTextField: UIViewRepresentable {
         let field = UITextField()
         field.delegate = context.coordinator
         field.keyboardType = keyboardType
-        field.font = UIFont.systemFont(ofSize: context.environment.momoFontScale(20), weight: fontWeight)
+        field.font = momoUIFont(
+            size: context.environment.momoFontScale(20),
+            weight: fontWeight,
+            family: context.environment.appTheme.font
+        )
         field.textColor = textColor
         field.isEnabled = !isDisabled
         field.tintColor = cursorColor
@@ -328,7 +332,11 @@ private struct MoneyTextField: UIViewRepresentable {
     func updateUIView(_ field: UITextField, context: Context) {
         context.coordinator.parent = self
         // Re-applied here, not just in makeUIView, so a font-scale change reaches an existing field.
-        field.font = UIFont.systemFont(ofSize: context.environment.momoFontScale(20), weight: fontWeight)
+        field.font = momoUIFont(
+            size: context.environment.momoFontScale(20),
+            weight: fontWeight,
+            family: context.environment.appTheme.font
+        )
         field.isEnabled = !isDisabled
         field.textColor = textColor
         field.tintColor = cursorColor

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)
         .frame(minWidth: specs.numberMinWidth)

package/ios/Typography/Text.swift

@@ -123,6 +123,54 @@ private func momoFont(size: CGFloat, weight: Font.Weight, family: String) -> Fon
     return .custom(name, fixedSize: size)
 }
 
+/// UIKit counterpart of `momoFont`, for text that is not a `MomoText` (UITextField/UITextView, text measuring).
+func momoUIFont(size: CGFloat, weight: UIFont.Weight, family: String) -> UIFont {
+    guard let name = momoFontName(family: family, weight: Font.Weight(weight)),
+          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
+    let size: CGFloat
+    let weight: Font.Weight
+
+    func body(content: Content) -> some View {
+        content.font(momoFont(size: fontScale(size), weight: weight, family: theme.font))
+    }
+}
+
+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

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.167.1-beta.20'
+  s.version          = '0.167.1-beta.21'
   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.167.1-beta.20'
+  s.version          = '0.167.1-beta.21'
   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.167.1-beta.20",
+  "version": "0.167.1-beta.21",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},