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

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.167.1-beta.20-debug"
+        version = "0.167.1-beta.21-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"
@@ -188,11 +188,3 @@ compose {
 //         }
 //     }
 // }
-
-// Xcode 27 rejects iOS < 15; KGP's synthetic Podfile only raises pods to 12 (KT-57741), leaving lottie-ios at 13.
-tasks.named("podGenIos") {
-    doLast {
-        val podfile = layout.buildDirectory.file("cocoapods/synthetic/ios/Podfile").get().asFile
-        podfile.writeText(podfile.readText().replace("major < 12 ||", "major < 15 ||").replace("#{12}", "#{15}"))
-    }
-}

package/compose/build.gradle.kts.backup

@@ -188,11 +188,3 @@ mavenPublishing {
         }
     }
 }
-
-// Xcode 27 rejects iOS < 15; KGP's synthetic Podfile only raises pods to 12 (KT-57741), leaving lottie-ios at 13.
-tasks.named("podGenIos") {
-    doLast {
-        val podfile = layout.buildDirectory.file("cocoapods/synthetic/ios/Podfile").get().asFile
-        podfile.writeText(podfile.readText().replace("major < 12 ||", "major < 15 ||").replace("#{12}", "#{15}"))
-    }
-}

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.167.1-beta.20-debug'
+    spec.version                  = '0.167.1-beta.21-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -67,7 +67,6 @@ import vn.momo.kits.navigation.component.HeaderBackground
 import vn.momo.kits.navigation.component.HeaderRight
 import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.navigation.component.InputSearchType
-import vn.momo.kits.navigation.bottomtab.LocalBottomTabFocused
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.supportsImePadding
 import vn.momo.kits.navigation.tracking.ScreenTracker
@@ -110,24 +109,20 @@ internal fun StackScreen(
     val isBottomTabChild = bottomTabIndex != -1
     val isBottomTabRoot = navigation.isBottomTabRoot
 
-    // A mounted-but-hidden bottom tab tracks again each time it is focused (RN useFocusEffect).
-    val tabFocused = LocalBottomTabFocused.current
-
     // Auto tracking state
-    val trackingState = remember(tabFocused) {
+    val trackingState = remember {
         ScreenTrackingState().apply {
             time = Clock.System.now().toEpochMilliseconds()
         }
     }
 
     // Determine action: push or back
-    val action = remember(tabFocused) {
+    val action = remember {
         if (ScreenTracker.getLastScreenName() != null) "push" else "back"
     }
 
     // Auto tracking effects
-    LaunchedEffect(name, tabFocused) {
-        if (!tabFocused) return@LaunchedEffect
+    LaunchedEffect(name) {
         // Track screen navigated immediately
         ScreenTracker.trackScreenNavigated(
             maxApi = maxApi,
@@ -174,7 +169,7 @@ internal fun StackScreen(
     val footerHeightPx = remember { mutableIntStateOf(0) }
     val headerRightWidthPx = remember { mutableIntStateOf(0) }
 
-    if (tabFocused && navigation.options.scrollData.scrollToTopCallback != null) {
+    if (navigation.options.scrollData.scrollToTopCallback != null) {
         RegisterScrollToTop(navigation.options.scrollData.scrollToTopCallback)
     }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTab.kt

@@ -1,34 +1,27 @@
 package vn.momo.kits.navigation.bottomtab
 
-import androidx.compose.animation.core.Animatable
-import androidx.compose.animation.core.AnimationVector1D
-import androidx.compose.animation.core.Easing
 import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.key
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.saveable.rememberSaveableStateHolder
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.layout.layout
-import androidx.compose.ui.zIndex
+import androidx.compose.ui.unit.dp
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.navigation.KeyboardOptions
-import vn.momo.kits.navigation.LocalMaxApi
 import vn.momo.kits.navigation.LocalNavigation
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
@@ -36,17 +29,6 @@ import vn.momo.kits.navigation.StackScreen
 import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.reportFloatingArrowBack
-import kotlinx.coroutines.launch
-
-private val inOutQuad = Easing { t -> if (t < 0.5f) 2 * t * t else 1 - 2 * (1 - t) * (1 - t) }
-internal val tabTimingSpec = tween<Float>(durationMillis = 200, easing = inOutQuad)
-
-internal val LocalBottomTabFocused = staticCompositionLocalOf { true }
-
-private val Hidden = Modifier.layout { measurable, constraints ->
-    val placeable = measurable.measure(constraints)
-    layout(placeable.width, placeable.height) {}
-}
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
 internal fun setBottomTabOption(index: Int, options: NavigationOptions){
@@ -70,8 +52,10 @@ fun BottomTab(
 ) {
     val navigation = LocalNavigation.current
     val navigator = LocalNavigator.current
-    val maxApi = LocalMaxApi.current
-    val startIndex = remember { items.indexOfFirst { it.name == initialRouteName }.coerceAtLeast(0) }
+    val navController = rememberNavController()
+    val startRoute = remember {
+        "option${items.indexOfFirst { it.name == initialRouteName }.coerceAtLeast(0)}"
+    }
 
     bottomTabOptionItems = items.mapIndexed { index, item ->
         item.options ?: NavigationOptions()
@@ -86,34 +70,14 @@ fun BottomTab(
         )
     }
 
-    var selectedIndex by rememberSaveable { mutableIntStateOf(startIndex) }
-    var loadedTabs by rememberSaveable { mutableStateOf(listOf(startIndex)) }
-    val tabStateHolder = rememberSaveableStateHolder()
-    val selectTab: (Int) -> Unit = { index ->
-        if (index !in loadedTabs) loadedTabs = loadedTabs + index
-        selectedIndex = index
-    }
-
-    val onFirstTab = selectedIndex == 0
-    val isFirstTab = onFirstTab || !backToInitialTab
-    val backToFirstTab = { selectTab(0) }
-
-    var lastFocusedIndex by rememberSaveable { mutableStateOf<Int?>(null) }
-    val tabProgress = remember { mutableMapOf<Int, Animatable<Float, AnimationVector1D>>() }
-    fun progressOf(index: Int) = tabProgress.getOrPut(index) {
-        Animatable(if (index == lastFocusedIndex) 1f else 0f)
-    }
-    LaunchedEffect(selectedIndex) {
-        lastFocusedIndex = selectedIndex
-        tabProgress.forEach { (index, progress) ->
-            if (index != selectedIndex) launch { progress.animateTo(0f, tabTimingSpec) }
-        }
-        progressOf(selectedIndex).animateTo(1f, tabTimingSpec)
-    }
+    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
+    val onStartTab = currentRoute == null || currentRoute == startRoute
+    val isFirstTab = onStartTab || !backToInitialTab
+    val backToStartTab = { navController.popBackStack(startRoute, inclusive = false) }
 
     DisposableEffect(isFirstTab) {
         reportFloatingArrowBack(!isFirstTab)
-        navigator.tabBackHandler = if (isFirstTab) null else ({ backToFirstTab() })
+        navigator.tabBackHandler = if (isFirstTab) null else ({ backToStartTab() })
         // both live outside this composition
         onDispose {
             reportFloatingArrowBack(false)
@@ -124,56 +88,75 @@ fun BottomTab(
     Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
             .fillMaxSize()
-            .background(AppTheme.current.colors.background.default)
         ) {
-            loadedTabs.forEach { index ->
-                val item = items.getOrNull(index) ?: return@forEach
-                val focused = index == selectedIndex
-                val progress = progressOf(index)
-                key(index) {
-                    Box(
-                        Modifier
-                            .fillMaxSize()
-                            .zIndex(if (focused) 0f else -1f)
-                            .then(if (focused) Modifier.graphicsLayer {
-                                alpha = 0.3f + 0.7f * progress.value
-                                scaleX = 0.97f + 0.03f * progress.value
-                                scaleY = scaleX
-                            } else Hidden)
+            NavHost(
+                navController = navController,
+                startDestination = startRoute
+            ) {
+                items.forEachIndexed { index, item ->
+                    composable(
+                        route = "option$index",
+                        enterTransition = {
+                            fadeIn(animationSpec = tween(200)) +
+                                    scaleIn(
+                                        initialScale = 0.97f,
+                                        animationSpec = tween(200)
+                                    )
+                        },
+                        exitTransition = {
+                            fadeOut(animationSpec = tween(200)) +
+                                    scaleOut(
+                                        targetScale = 0.97f,
+                                        animationSpec = tween(200)
+                                    )
+                        },
+                        popEnterTransition = {
+                            fadeIn(animationSpec = tween(200)) +
+                                    scaleIn(
+                                        initialScale = 0.97f,
+                                        animationSpec = tween(200)
+                                    )
+                        },
+                        popExitTransition = {
+                            fadeOut(animationSpec = tween(200)) +
+                                    scaleOut(
+                                        targetScale = 0.97f,
+                                        animationSpec = tween(200)
+                                    )
+                        }
                     ) {
-                        CompositionLocalProvider(LocalBottomTabFocused provides focused) {
-                            tabStateHolder.SaveableStateProvider(index) {
-                                StackScreen(
-                                    content = item.screen,
-                                    navigationOptions = getBottomTabOption(index),
-                                    bottomTabIndex = index,
-                                    onBackHandler = {
-                                        if (backToInitialTab && index != 0) {
-                                            backToFirstTab()
-                                        } else {
-                                            navigator.pop()
-                                        }
-                                    }
-                                )
+                        val option = getBottomTabOption(index)
+
+                        StackScreen(
+                            content = item.screen,
+                            navigationOptions = option,
+                            bottomTabIndex = index,
+                            onBackHandler = {
+                                if (backToInitialTab && "option$index" != startRoute) {
+                                    backToStartTab()
+                                } else {
+                                    navigator.pop()
+                                }
                             }
-                        }
+                        )
                     }
                 }
             }
         }
-        BackHandler(enabled = !onFirstTab) {
-            if (backToInitialTab) backToFirstTab() else navigator.pop()
+        BackHandler(enabled = !onStartTab) {
+            if (backToInitialTab) backToStartTab() else navigator.pop()
         }
         Column {
             BottomTabBar(
                 items = items,
                 floatingButton = floatingButton,
-                selectedIndex = selectedIndex,
+                navController = navController,
                 onTabSelected = { index ->
-                    // RN parity: every tab press (focused one included) ticks a light haptic.
-                    runCatching { maxApi?.triggerEventVibration("light", callback = null) }
                     val switchTab = {
-                        if (index != selectedIndex) selectTab(index)
+                        val targetRoute = "option$index"
+                        if (navController.currentBackStackEntry?.destination?.route != targetRoute) {
+                            navController.navigate(targetRoute)
+                        }
                     }
                     onTabPress?.invoke(index, switchTab) ?: switchTab()
                 }

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTabBar.kt

@@ -1,18 +1,15 @@
 package vn.momo.kits.navigation.bottomtab
 
-import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -20,17 +17,18 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.navigation.compose.currentBackStackEntryAsState
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.components.*
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.InternalApi
 import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
+internal val floatingButtonWidth = 75.dp
 @InternalApi
 const val BOTTOM_TAB_BAR_HEIGHT = 64
 
@@ -38,24 +36,28 @@ const val BOTTOM_TAB_BAR_HEIGHT = 64
 internal fun BottomTabBar(
     items: List<BottomTabItem>,
     floatingButton: BottomTabFloatingButton? = null,
-    selectedIndex: Int,
+    navController: NavController,
     onTabSelected: (Int) -> Unit,
 ) {
+    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
+    val selectedIndex = items.indexOfFirst { "option${items.indexOf(it)}" == currentRoute }
 
     val screenWidth = getScreenDimensions().width.dp
     val mid = items.size / 2
 
-    val floating = floatingButton?.takeIf { items.size % 2 == 0 }
-    val slotWidth = screenWidth / (items.size + if (floating != null) 1 else 0)
-    fun slotOf(index: Int) = if (floating != null && index >= mid) index + 1 else index
-
-    var indicatorSlot by rememberSaveable { mutableIntStateOf(0) }
-    val indicatorX = remember { Animatable(indicatorSlot.toFloat()) }
-    LaunchedEffect(selectedIndex) {
-        val target = slotOf(selectedIndex)
-        indicatorSlot = target
-        indicatorX.animateTo(target.toFloat(), tabTimingSpec)
+    val tabWidth = if (floatingButton != null) {
+        (screenWidth - floatingButtonWidth) / items.size
+    } else {
+        screenWidth / items.size
     }
+    val adjustSize = if(floatingButton != null && selectedIndex >= mid) floatingButtonWidth else 0.dp
+    val targetOffset = tabWidth * selectedIndex + tabWidth / 2 - screenWidth / 2 + adjustSize
+
+    val indicatorOffsetX by animateDpAsState(
+        targetValue = targetOffset,
+        animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
+        label = "IndicatorX"
+    )
 
     Box(
         contentAlignment = Alignment.BottomCenter
@@ -70,17 +72,17 @@ internal fun BottomTabBar(
                 },
             horizontalArrangement = Arrangement.SpaceAround,
         ) {
-            if (floating == null) {
+            if (floatingButton == null) {
                 RenderTabBarItem(items, 0, items.size, selectedIndex, onTabSelected)
             } else {
                 RenderTabBarItem(items, 0, mid, selectedIndex, onTabSelected)
-                Spacer(modifier = Modifier.width(slotWidth))
+                Spacer(modifier = Modifier.width(floatingButtonWidth).padding(horizontal = Spacing.XXS))
                 RenderTabBarItem(items, mid, items.size, selectedIndex, onTabSelected)
             }
         }
 
         Box(modifier = Modifier
-            .offset { IntOffset(((slotWidth * (indicatorX.value + 0.5f)) - screenWidth / 2).roundToPx(), (-BOTTOM_TAB_BAR_HEIGHT + 2).dp.roundToPx()) }
+            .offset(x = indicatorOffsetX, y = (-BOTTOM_TAB_BAR_HEIGHT + 2).dp)
             .height(2.dp)
             .width(44.dp)
             .background(
@@ -99,7 +101,7 @@ internal fun BottomTabBar(
                 )
             )
         )
-        floating?.let { FloatingButton(it, slotWidth) }
+        floatingButton?.let { FloatingButton(it) }
     }
 }
 
@@ -124,10 +126,17 @@ internal fun RowScope.RenderTabBarItem(
 
 @Composable
 internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
-    // RN parity: "0" hides the badge, "" renders a dot.
-    val badgeLabel = item.badgeLabel?.takeUnless { it.toIntOrNull() == 0 }
-    val isNumber = badgeLabel?.toIntOrNull() != null
-    val showDot = badgeLabel?.isEmpty() ?: item.showDot
+    fun isNumber(label: String): Boolean {
+        val numberRegex = "^\\d+$".toRegex()
+        return numberRegex.matches(label)
+    }
+    fun formatLabel(label: String): String? {
+        if (isNumber(label) && label.toInt() == 0) {
+            return null
+        }
+        return label
+    }
+    val badgeLabel = item.badgeLabel?.let { formatLabel(it) }
 
     Box(modifier = Modifier
         .fillMaxSize()
@@ -135,7 +144,7 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
         }
-        .activeOpacityClickable {
+        .noFeedbackClickable {
             onClick()
         },
         contentAlignment = Alignment.BottomStart
@@ -143,23 +152,18 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = Spacing.S, vertical = Spacing.S),
+                .padding(horizontal = Spacing.S, vertical = Spacing.S)
+                .noFeedbackClickable {
+                    onClick()
+                },
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
-            Box(modifier = Modifier.padding(Spacing.XS)) {
-                Icon(
-                    source = item.icon,
-                    size = 28.dp,
-                    color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
-                // Anchored to the icon (not the tab cell) so it stays put whatever the tab width; matchParentSize + unbounded wrap keeps it from resizing the icon slot.
-                val badgeAnchor = Modifier.matchParentSize().wrapContentSize(Alignment.TopEnd, unbounded = true)
-                if (showDot) {
-                    BadgeDot(size = DotSize.Small, modifier = badgeAnchor.offset(x = 4.dp, y = (-4).dp))
-                } else if (!badgeLabel.isNullOrEmpty()) {
-                    Badge(badgeLabel, modifier = badgeAnchor.offset(x = if (isNumber) 8.dp else 12.dp, y = (-8).dp))
-                }
-            }
+            Icon(
+                source = item.icon,
+                size = 28.dp,
+                modifier = Modifier.padding(Spacing.XS),
+                color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
             Text(
                 text = item.label,
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
@@ -168,19 +172,28 @@ internal fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> U
                 overflow = TextOverflow.Ellipsis
             )
         }
+        if (badgeLabel != null) {
+            if (badgeLabel.isEmpty())
+                BadgeDot(
+                    size = DotSize.Small,
+                    modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
+                )
+            else
+                Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
+        }
     }
 }
 
 @Composable
-internal fun FloatingButton(data: BottomTabFloatingButton, width: Dp) {
+internal fun FloatingButton(data: BottomTabFloatingButton) {
     Column(
         modifier = Modifier
-            .width(width)
+            .width(floatingButtonWidth)
             .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }
-            .activeOpacityClickable {
+            .noFeedbackClickable {
                 data.onPress()
             },
         verticalArrangement = Arrangement.Bottom,

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.167.1-beta.20
+version=0.167.1-beta.21
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

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/local.properties

@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Thu Jun 04 17:11:56 ICT 2026
-sdk.dir=/Users/open.design/Library/Android/sdk
+#Tue Apr 08 11:13:31 ICT 2025
+sdk.dir=/Users/sonnguyen/Library/Android/sdk

package/package.json

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