@momo-kits/native-kits 0.300.3-debug → 0.300.4-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Slider.kt

@@ -43,9 +43,11 @@ private fun getValueForPosition(
     step: Float,
 ): Float {
     val availableSpace = containerWidth - thumbWidth
-    if (availableSpace <= 0f) return min
-    val relStepUnit = step / (max - min)
+    if (availableSpace <= 0f || max <= min) return min
     var relPosition = (positionInView - thumbWidth / 2f) / availableSpace
+    // A zero step would make the snap math NaN, and NaN.roundToInt() throws.
+    if (step <= 0f) return clamp(min + relPosition * (max - min), min, max)
+    val relStepUnit = step / (max - min)
     val relOffset = relPosition % relStepUnit
     relPosition -= relOffset
     if (relOffset / relStepUnit >= 0.5f) relPosition += relStepUnit
@@ -131,6 +133,11 @@ fun Slider(
     var draggingLow by remember { mutableStateOf(true) }
     var isDragging  by remember { mutableStateOf(false) }
 
+    // pointerInput is not keyed on the callbacks, so read their latest values.
+    val currentOnValueChanged by rememberUpdatedState(onValueChanged)
+    val currentOnTouchStart by rememberUpdatedState(onSliderTouchStart)
+    val currentOnTouchEnd by rememberUpdatedState(onSliderTouchEnd)
+
     val thumbColor       = if (disabled) theme.colors.text.disable else theme.colors.primary
     val trackActiveColor = if (disabled) theme.colors.text.disable else theme.colors.primary
     val trackInactiveColor = theme.colors.background.default
@@ -167,7 +174,7 @@ fun Slider(
 
                             draggingLow = disableRange || isLowCloser(touchX, lowCenterX, highCenterX)
                             isDragging  = true
-                            onSliderTouchStart(lowValue, highValue)
+                            currentOnTouchStart(lowValue, highValue)
 
                             // Apply initial press
                             applyDrag(touchX, trackWidthPx, thumbSizePx,
@@ -175,7 +182,7 @@ fun Slider(
                                 lowValue, highValue) { nl, nh ->
                                 lowValue  = nl
                                 highValue = nh
-                                onValueChanged(nl, nh, true)
+                                currentOnValueChanged(nl, nh, true)
                             }
 
                             // Track move / release
@@ -186,7 +193,7 @@ fun Slider(
 
                                 if (!moveChange.pressed) {
                                     isDragging = false
-                                    onSliderTouchEnd(lowValue, highValue)
+                                    currentOnTouchEnd(lowValue, highValue)
                                     break
                                 }
 
@@ -195,7 +202,7 @@ fun Slider(
                                     lowValue, highValue) { nl, nh ->
                                     lowValue  = nl
                                     highValue = nh
-                                    onValueChanged(nl, nh, true)
+                                    currentOnValueChanged(nl, nh, true)
                                 }
                             }
                         }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Swipe.kt

@@ -8,8 +8,10 @@ import androidx.compose.foundation.gestures.detectHorizontalDragGestures
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -62,6 +64,12 @@ fun Swipe(
 
     val offsetX = remember { Animatable(0f) }
 
+    // pointerInput is keyed on the action counts only, so read the latest callbacks.
+    val currentOnOpen by rememberUpdatedState(onSwipeableOpen)
+    val currentOnClose by rememberUpdatedState(onSwipeableClose)
+    val currentOnLeftOpen by rememberUpdatedState(onSwipeableLeftOpen)
+    val currentOnRightOpen by rememberUpdatedState(onSwipeableRightOpen)
+
     val shape = remember(itemRadius) {
         if (itemRadius > 0.dp) RoundedCornerShape(itemRadius) else RoundedCornerShape(0.dp)
     }
@@ -71,17 +79,17 @@ fun Swipe(
             val current = offsetX.value
             val target = when {
                 current > leftWidthPx * 0.5f && left.isNotEmpty() -> {
-                    onSwipeableLeftOpen()
-                    onSwipeableOpen()
+                    currentOnLeftOpen()
+                    currentOnOpen()
                     leftWidthPx
                 }
                 current < -rightWidthPx * 0.5f && right.isNotEmpty() -> {
-                    onSwipeableRightOpen()
-                    onSwipeableOpen()
+                    currentOnRightOpen()
+                    currentOnOpen()
                     -rightWidthPx
                 }
                 else -> {
-                    onSwipeableClose()
+                    currentOnClose()
                     0f
                 }
             }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Switch.kt

@@ -43,9 +43,10 @@ fun Switch(
 
     val (circleBackgroundColor, backgroundColor) = colors
 
-    // Memoize automation ID to avoid string concatenation on every render
+    // Both params default to "", so blank must fall back too or the id is always empty.
     val automationIdValue = remember(accessibilityId, title, value) {
-        accessibilityId ?: "toggle_${title ?: "unknown"}_$value"
+        accessibilityId?.takeIf { it.isNotEmpty() }
+            ?: "toggle_${title?.takeIf { it.isNotEmpty() } ?: "unknown"}_$value"
     }
 
     // Memoize alignment calculation

package/compose/src/commonMain/kotlin/vn/momo/kits/components/TabView.kt

@@ -10,9 +10,10 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.drawscope.withTransform
-import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.Path
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.layout.positionInParent
@@ -73,6 +74,8 @@ fun TabView(
     } else null
 
     val coroutineScope = rememberCoroutineScope()
+    // The collector below outlives recompositions; read the latest callback, not the first one.
+    val currentOnPageSelected by rememberUpdatedState(onPageSelected)
 
     // Keep selectedIndex in sync when user swipes the pager
     if (pagerState != null) {
@@ -80,7 +83,7 @@ fun TabView(
             snapshotFlow { pagerState.currentPage }.collect { page ->
                 if (!lazyRendered.contains(page)) lazyRendered.add(page)
                 selectedIndex = page
-                onPageSelected(page)
+                currentOnPageSelected(page)
             }
         }
     }
@@ -362,7 +365,7 @@ private fun CardTabBar(
             }
         }
 
-        val active = tabs[selectedIndex]
+        val active = tabs.getOrNull(selectedIndex) ?: return@BoxWithConstraints
         Row(
             modifier = Modifier
                 // Pinned to the strip's BOTTOM edge so the two always end on the same
@@ -415,7 +418,8 @@ private val CARD_TAB_HEIGHT = 40.dp
 private val CARD_TAB_ACTIVE_HEIGHT = 44.dp
 @Composable
 private fun CardTabEar(width: Dp, mirrored: Boolean, color: Color, nudge: Dp) {
-    Canvas(modifier = Modifier.offset(x = nudge).width(width).height(CARD_TAB_ACTIVE_HEIGHT)) {
+    // Clipped like react-kits' Svg, whose 28-wide path is cut at a 22pt `pathWidth`.
+    Canvas(modifier = Modifier.offset(x = nudge).width(width).height(CARD_TAB_ACTIVE_HEIGHT).clipToBounds()) {
         val path = Path().apply {
             moveTo(0f, 0f)
             lineTo(0.60765f, 0f)
@@ -425,8 +429,12 @@ private fun CardTabEar(width: Dp, mirrored: Boolean, color: Color, nudge: Dp) {
             lineTo(0f, 44f)
             close()
         }
-        val draw: DrawScope.() -> Unit = { drawPath(path = path, color = color) }
-        if (mirrored) withTransform({ scale(-1f, 1f) }) { draw() } else draw()
+        // Path coordinates are dp (react-kits viewBox), but DrawScope draws in px.
+        val pxPerDp = density
+        withTransform({
+            if (mirrored) scale(-1f, 1f)
+            scale(pxPerDp, pxPerDp, pivot = Offset.Zero)
+        }) { drawPath(path = path, color = color) }
     }
 }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Tag.kt

@@ -30,6 +30,22 @@ enum class TagColor(val backgroundColor: Color, val textColor: Color) {
     Grey(Colors.black_04, Colors.black_12),
 }
 
+// RN only accepts the `_03` palette as a custom tag color.
+private val tagCustomColors = listOf(
+    Colors.black_03,
+    Colors.pink_03,
+    Colors.violet_03,
+    Colors.indigo_03,
+    Colors.blue_03,
+    Colors.mint_03,
+    Colors.green_03,
+    Colors.lime_03,
+    Colors.yellow_03,
+    Colors.gold_03,
+    Colors.orange_03,
+    Colors.red_03,
+)
+
 @Composable
 fun Tag(
     label: String = "Label",
@@ -38,27 +54,9 @@ fun Tag(
     size: TagSize = TagSize.Large,
     customColor: Color? = null,
 ) {
-    val primaryColors = listOf(
-        Color(0xFFF0F0F0),
-        Color(0xFFEB2F96),
-        Color(0xFF962AF0),
-        Color(0xFF4E4BFF),
-        Color(0xFF007AFF),
-        Color(0xFF13C2C2),
-        Color(0xFF34C759),
-        Color(0xFFA0D911),
-        Color(0xFFFFCC00),
-        Color(0xFFFA8C16),
-        Color(0xFFFA541C),
-        Color(0xFFF5222D)
-    )
-    var tagColor = color.backgroundColor
-    var labelColor = color.textColor
-
-    if (primaryColors.contains(customColor)) {
-        tagColor = color.backgroundColor
-        labelColor = color.textColor
-    }
+    val custom = customColor?.takeIf { it in tagCustomColors }
+    val tagColor = custom ?: color.backgroundColor
+    val labelColor = if (custom != null) Colors.black_01 else color.textColor
 
     Box(
         modifier = Modifier

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Text.kt

@@ -87,8 +87,8 @@ fun Text(
         color ?: theme.colors.text.default
     }
 
-    // Memoize style copy operation
-    val optimizedStyle = remember(style) {
+    // lineHeight is a key: it is scaled, so it changes with the font scale even when style doesn't.
+    val optimizedStyle = remember(style, lineHeight) {
         style.copy(
             fontWeight = null,
             lineHeight = if (lineHeight.value.isFinite() && lineHeight.value > 0) lineHeight else style.lineHeight

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Tooltip.kt

@@ -21,6 +21,7 @@ import androidx.compose.ui.unit.*
 import androidx.compose.ui.window.Popup
 import androidx.compose.ui.window.PopupPositionProvider
 import androidx.compose.ui.window.PopupProperties
+import kotlinx.coroutines.flow.drop
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.activeOpacityClickable
@@ -147,8 +148,10 @@ fun Tooltip(
     val density = LocalDensity.current
     val offsetPx = with(density) { (TOOLTIP_OFFSET + ARROW_SIZE).roundToPx() }
 
-    LaunchedEffect(state.isVisible) {
-        onVisibleChange?.invoke(state.isVisible)
+    val currentOnVisibleChange by rememberUpdatedState(onVisibleChange)
+    LaunchedEffect(state) {
+        // changes only, like RN: the initial value is not reported
+        snapshotFlow { state.isVisible }.drop(1).collect { currentOnVisibleChange?.invoke(it) }
     }
 
     Box(modifier = modifier) {

package/compose/src/commonMain/kotlin/vn/momo/kits/components/datetimepicker/DateTimePickerUtils.kt

@@ -128,11 +128,13 @@ fun getHours(hourMode: Int): List<String> {
  * Get a list of minutes
  */
 fun getMinutes(interval: Int): List<String> {
+    // A non-positive interval would never reach 60.
+    val step = interval.coerceAtLeast(1)
     val minutes = mutableListOf<String>()
     var min = 0
     while (min < 60) {
         minutes.add(paddingNum(min))
-        min += interval
+        min += step
     }
     return minutes
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/datetimepicker/WheelPicker.kt

@@ -154,22 +154,14 @@ internal fun WheelPickerItem(
             .fillMaxWidth()
             .height(itemHeight)
             .graphicsLayer {
-                val firstVisibleIndex = listState.firstVisibleItemIndex
-                val visibleItemOffset = listState.firstVisibleItemScrollOffset
-
-                val viewportHeight = 5 * itemHeight.value
-                val itemHeightValue = itemHeight.value
-
-                val absoluteOffset =
-                    (index - firstVisibleIndex) * itemHeightValue - (visibleItemOffset / itemHeightValue)
-                val relativePosition = absoluteOffset / viewportHeight
-
-                val distance = abs(2 - relativePosition)
-
+                // Rows away from the centre slot (two below the first visible row); RN fades 1 → 0.8 → 0.4.
+                val distance = abs(
+                    index - listState.firstVisibleItemIndex -
+                        listState.firstVisibleItemScrollOffset / itemHeight.toPx() - 2
+                )
                 alpha = when {
-                    distance <= 1 -> 1f
-                    distance <= 2 -> 0.8f
-                    distance <= 3 -> 0.4f
+                    distance <= 1f -> 1f - 0.2f * distance
+                    distance <= 2f -> 0.8f - 0.4f * (distance - 1f)
                     else -> 0.4f
                 }
             },

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

@@ -2,6 +2,7 @@ package vn.momo.kits.const
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
 
 /**
  * Nạp font từ tài nguyên native của app host thay vì đóng gói bản copy riêng trong SDK.
@@ -13,4 +14,4 @@ import androidx.compose.ui.text.font.FontFamily
  * Trả về `null` nếu host không có font đó — caller tự fallback [FontFamily.Default].
  */
 @Composable
-internal expect fun hostFontFamily(fileName: String): FontFamily?
+internal expect fun hostFontFamily(fileName: String, weight: FontWeight): FontFamily?

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

@@ -8,6 +8,7 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.*
+import vn.momo.kits.application.DesignSystemKits
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.platform.getScreenDimensions
 import kotlin.math.max
@@ -20,13 +21,13 @@ const val MAX_DEVICE_SCALE = 5
 @Composable
 fun scaleSize(size: Float): Float {
     val context = LocalContext.current
-    // Host-pushed context wins; otherwise fall back to the app-wide KitFontScale holder.
-    val useOsScale = context?.useOSScaleRate ?: KitFontScale.useOSScaleRate
+    val useOsScale = context?.useOSScaleRate ?: DesignSystemKits.getConfigs().useOSScaleRate
     if (!useOsScale) {
-        return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
+        return size * (context?.userScaleRate ?: DesignSystemKits.getConfigs().userScaleRate)
     }
     val scaleSizeMaxRate: Float = MAX_FONT_SCALE
-    val deviceWidth = getScreenDimensions().width
+    // Short side, not width: landscape must not inflate every font.
+    val deviceWidth = getScreenDimensions().let { minOf(it.width, it.height) }
     val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
 
     val density = LocalDensity.current
@@ -83,12 +84,6 @@ fun scaleSize(textStyle: TextStyle): TextStyle {
 }
 
 
-/**
- * Tên file font trong tài nguyên native của app host (xem [hostFontFamily]).
- *
- * SDK không đóng gói font riêng nữa: app host đã bundle sẵn toàn bộ font từ `font-source`
- * cho cả React Native lẫn native, nên bản copy trong `composeResources` chỉ làm phình app.
- */
 private const val LEGACY_DEFAULT_FONT_FILE = "SFProText-Regular.ttf"
 private const val NEW_DEFAULT_FONT_FILE = "MomoTrustSans-Regular.ttf"
 
@@ -123,17 +118,27 @@ private val hostFontFiles: Map<String, String> = mapOf(
 private const val NEW_DEFAULT_FONT_FAMILY = "MomoTrustSans"
 private const val LEGACY_DEFAULT_FONT_FAMILY = "SFProText"
 
+// Families that ship one file per weight; the others map every weight to a single file.
+private val weightedFontFamilies = setOf(NEW_DEFAULT_FONT_FAMILY, LEGACY_DEFAULT_FONT_FAMILY)
+
 internal val defaultFontFamily: String
-    get() = if (KitDesignSystem.isWhiteList) NEW_DEFAULT_FONT_FAMILY else LEGACY_DEFAULT_FONT_FAMILY
+    get() = if (DesignSystemKits.getConfigs().isWhiteList) NEW_DEFAULT_FONT_FAMILY else LEGACY_DEFAULT_FONT_FAMILY
 
 @Composable
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
-    val isWhiteList = KitDesignSystem.isWhiteList
+    val isWhiteList = DesignSystemKits.getConfigs().isWhiteList
     val defaultFile = if (isWhiteList) NEW_DEFAULT_FONT_FILE else LEGACY_DEFAULT_FONT_FILE
     val key = "$fontFamily-${fontWeight?.weight}"
-    val fileName = hostFontFiles[key] ?: defaultFile
-    return hostFontFamily(fileName)
-        ?: hostFontFamily(defaultFile)
+    val mappedFile = hostFontFiles[key]
+    val fileName = mappedFile ?: defaultFile
+    // Declaring the file's real weight keeps Compose from synthesizing bold on top of a bold file.
+    val fileWeight = if (mappedFile != null && fontFamily in weightedFontFamilies) {
+        fontWeight ?: FontWeight.Normal
+    } else {
+        FontWeight.Normal
+    }
+    return hostFontFamily(fileName, fileWeight)
+        ?: hostFontFamily(defaultFile, FontWeight.Normal)
         ?: FontFamily.Default
 }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -9,7 +9,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import vn.momo.kits.platform.getScreenDimensions
 import kotlin.math.floor
 
 internal data class GridContext(
@@ -24,7 +23,7 @@ internal data class GridContext(
 internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
 @Composable
-internal fun gridColumns(): Int = if (getScreenDimensions().width > 600) 24 else 12
+internal fun gridColumns(): Int = if (getScreenLayout().contentWidth > 600.dp) 24 else 12
 
 @Composable
 internal fun gridContext(maxWidthPx: Int, columns: Int, gap: Dp): GridContext {