@momo-kits/native-kits 0.167.1-sizescale.2-debug → 0.168.1-beta.1-debug

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

@@ -5,13 +5,10 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
@@ -180,7 +177,6 @@ private fun ProgressInfoVertical(
 ) {
     val theme = AppTheme.current
     val lineColor = remember(theme) { theme.colors.primary.copy(alpha = 0.2f) }
-    val density = LocalDensity.current
 
     Column(
         modifier = modifier
@@ -189,16 +185,18 @@ private fun ProgressInfoVertical(
     ) {
         steps.forEachIndexed { index, item ->
             val isLast = index == steps.lastIndex
-            val rowHeightPx = remember { mutableFloatStateOf(0f) }
-            val rowHeightDp = with(density) { rowHeightPx.value.toDp() }
 
+            // Intrinsic height lets the connector fill the row in one pass; measuring the row and
+            // feeding it back lagged a frame and never let the line shrink with its text.
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .onGloballyPositioned { coords -> rowHeightPx.value = coords.size.height.toFloat() },
+                    .height(IntrinsicSize.Min),
             ) {
                 Column(
-                    modifier = Modifier.heightIn(min = if (isLast) 40.dp else 48.dp),
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .heightIn(min = if (isLast) 40.dp else 48.dp),
                     horizontalAlignment = Alignment.CenterHorizontally,
                 ) {
                     ProgressInfoStepIcon(
@@ -211,7 +209,7 @@ private fun ProgressInfoVertical(
                         Spacer(
                             modifier = Modifier
                                 .width(2.dp)
-                                .height(rowHeightDp-if(size == ProgressInfoSize.Large) scaleSize(24f).dp else scaleSize(16f).dp)
+                                .weight(1f)
                                 .background(lineColor),
                         )
                     }

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

@@ -40,7 +40,7 @@ fun Radio(
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Box(
-            modifier = modifier
+            modifier = Modifier
                 .padding(end = if (label.isEmpty()) 0.dp else Spacing.XS)
                 .border(borderWidth, borderColor, RoundedCornerShape(Radius.M))
                 .conditional(IsShowBaseLineDebug) {

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

@@ -26,9 +26,9 @@ import kotlin.math.roundToInt
 private val THUMB_SIZE         = 20.dp
 private val THUMB_BORDER       = 3.dp
 private val TRACK_HEIGHT       = 4.dp
-private val LABEL_PAD_H get()        = Spacing.XS
-private val LABEL_PAD_V get()        = Spacing.XXS
-private val LABEL_GAP get()          = Spacing.XS   // space between label and thumb top
+private val LABEL_PAD_H        = Spacing.XS
+private val LABEL_PAD_V        = Spacing.XXS
+private val LABEL_GAP          = Spacing.XS   // space between label and thumb top
 
 
 private fun clamp(value: Float, min: Float, max: Float): Float =
@@ -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
@@ -67,7 +68,7 @@ class TooltipState {
 fun rememberTooltipState(): TooltipState {
     return remember { TooltipState() }
 }
-private val TOOLTIP_OFFSET get() = Spacing.S
+private val TOOLTIP_OFFSET = Spacing.S
 private val ARROW_SIZE = 6.dp
 private class TooltipPositionProvider(
     private val placement: TooltipPlacement,
@@ -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/Spacing.kt

@@ -1,20 +1,16 @@
 package vn.momo.kits.const
 
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-// Divided by KitSizeScale.rate: containers scale LocalDensity for sizes, spacing must stay unscaled.
-private fun spacing(value: Int): Dp = (value / KitSizeScale.rate).dp
-
 object Spacing {
-    val XXS: Dp get() = spacing(2)
-    val XS: Dp get() = spacing(4)
-    val S: Dp get() = spacing(8)
-    val M: Dp get() = spacing(12)
-    val L: Dp get() = spacing(16)
-    val XL: Dp get() = spacing(24)
-    val XXL: Dp get() = spacing(32)
-    val Size3XL: Dp get() = spacing(48)
-    val Size4XL: Dp get() = spacing(56)
-    val Size5XL: Dp get() = spacing(64)
-}
+    val XXS = 2.dp
+    val XS = 4.dp
+    val S = 8.dp
+    val M = 12.dp
+    val L = 16.dp
+    val XL = 24.dp
+    val XXL = 32.dp
+    val Size3XL = 48.dp
+    val Size4XL = 56.dp
+    val Size5XL = 64.dp
+}

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

@@ -67,7 +67,7 @@ data class Theme(
         return !assets.headerBackground.isNullOrEmpty()
     }
 }
-val defaultTheme = Theme(
+private val lightBaseTheme = Theme(
     dark = false,
     colors = ColorScheme(
         primary = Colors.pink_03,
@@ -117,14 +117,14 @@ val defaultTheme = Theme(
             container = Colors.blue_08
         )
     ),
-    font = "MomoTrustSans",
+    font = "SFProText",
     assets = ThemeAssets(
         headerBackground = null
     )
 )
 
 
-val darkTheme = Theme(
+private val darkBaseTheme = Theme(
     dark = true,
     colors = ColorScheme(
         primary = Colors.pink_04,
@@ -174,13 +174,19 @@ val darkTheme = Theme(
             container = Colors.blue_08
         )
     ),
-    font = "MomoTrustSans",
+    font = "SFProText",
     assets = ThemeAssets(
         headerBackground = null
     )
 )
 
 
+val defaultTheme: Theme
+    get() = lightBaseTheme.copy(font = defaultFontFamily)
+
+val darkTheme: Theme
+    get() = darkBaseTheme.copy(font = defaultFontFamily)
+
 val AppTheme = staticCompositionLocalOf { defaultTheme }
 
 val AppStatusBar = staticCompositionLocalOf { 0.dp }

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

@@ -26,13 +26,12 @@ fun scaleSize(size: Float): Float {
         return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
     }
     val scaleSizeMaxRate: Float = MAX_FONT_SCALE
-    // Real screen width / OS font scale: undo the container size scale.
-    val sizeScale = LocalSizeScale.current
-    val deviceWidth = getScreenDimensions().width * sizeScale
+    // 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
-    val fontScale = density.fontScale * sizeScale
+    val fontScale = density.fontScale
 
     var fontSizeScaleDevice = size
     var fontSizeScaleOS = size
@@ -59,8 +58,7 @@ fun scaleSize(size: TextUnit): TextUnit {
     val density = LocalDensity.current
 
     val scaled = scaleSize(size.value)
-    // Real OS font scale (density.fontScale is divided by the size scale inside containers).
-    val spValue = scaled / (density.fontScale * LocalSizeScale.current)
+    val spValue = scaled / density.fontScale
 
     return TextUnit(value = spValue, type = TextUnitType.Sp)
 }
@@ -123,31 +121,17 @@ private val hostFontFiles: Map<String, String> = mapOf(
     )
 }
 
-/**
- * Font mặc định mới, chỉ áp cho user nằm trong whitelist design system ([KitDesignSystem]).
- * Ngoài whitelist thì quay về [LEGACY_DEFAULT_FONT_FAMILY] như trước.
- */
 private const val NEW_DEFAULT_FONT_FAMILY = "MomoTrustSans"
 private const val LEGACY_DEFAULT_FONT_FAMILY = "SFProText"
 
-/**
- * Font thuoc bo design system moi. MoMoTrustDisplay chi duoc header dung tu DS-791
- * (commit header title 5bfde6251); truoc do header lay font theo theme, nen ngoai
- * whitelist ca hai deu ha ve [LEGACY_DEFAULT_FONT_FAMILY].
- */
-private val newFontFamilies = setOf(NEW_DEFAULT_FONT_FAMILY, "MoMoTrustDisplay")
+internal val defaultFontFamily: String
+    get() = if (KitDesignSystem.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 resolvedFamily =
-        if (fontFamily in newFontFamilies && !isWhiteList) {
-            LEGACY_DEFAULT_FONT_FAMILY
-        } else {
-            fontFamily
-        }
     val defaultFile = if (isWhiteList) NEW_DEFAULT_FONT_FILE else LEGACY_DEFAULT_FONT_FILE
-    val key = "$resolvedFamily-${fontWeight?.weight}"
+    val key = "$fontFamily-${fontWeight?.weight}"
     val fileName = hostFontFiles[key] ?: defaultFile
     return hostFontFamily(fileName)
         ?: hostFontFamily(defaultFile)

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

@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -14,6 +15,7 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
 import vn.momo.kits.const.AppTheme
@@ -21,30 +23,30 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 
 @Composable
-internal fun Card(
+@OptIn(ExperimentalLayoutApi::class)
+fun Card(
     useShadow: Boolean = false,
     backgroundImage: String? = null,
+    backgroundColor: Color? = null,
     contentPadding: PaddingValues = PaddingValues(Spacing.M),
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
-    val columns = 12
-    val gutter = 8.dp
+    val columns = gridColumns()
+    val gap = Spacing.S
     val shape = RoundedCornerShape(Radius.M)
-    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
-    if (useShadow) surface = surface.shadow(4.dp, shape)
-    surface = surface.clip(shape)
-    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    var surface = modifier.fillMaxWidth().padding(horizontal = Spacing.M)
+    if (useShadow) surface = surface.shadow(6.dp, shape)
+    surface = surface.clip(shape).background(backgroundColor ?: AppTheme.current.colors.background.surface)
     Box(modifier = surface) {
         if (backgroundImage != null) {
             Image(source = backgroundImage, modifier = Modifier.matchParentSize())
         }
         BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(contentPadding)) {
-            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
-            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+            CompositionLocalProvider(LocalGridContext provides gridContext(constraints.maxWidth, columns, gap)) {
                 FlowRow(
-                    horizontalArrangement = Arrangement.spacedBy(gutter),
-                    verticalArrangement = Arrangement.spacedBy(gutter),
+                    horizontalArrangement = Arrangement.spacedBy(gap),
+                    verticalArrangement = Arrangement.spacedBy(gap),
                 ) { content() }
             }
         }

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

@@ -6,33 +6,45 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import kotlin.math.floor
 
 internal data class GridContext(
     val numberOfColumns: Int = 12,
-    val gutter: Dp = 12.dp,
-    val sizePerSpan: Dp = 0.dp,
+    val gutterPx: Int = 0,
+    val columnPx: Float = 0f,
+    val density: Float = 1f,
 ) {
-    fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
+    fun sizeForSpan(span: Int): Dp = (floor(columnPx * span + gutterPx * (span - 1)) / density).dp
 }
 
 internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
 @Composable
-internal fun Item(
-    widthSpan: Int = 12,
+internal fun gridColumns(): Int = if (getScreenLayout().contentWidth > 600.dp) 24 else 12
+
+@Composable
+internal fun gridContext(maxWidthPx: Int, columns: Int, gap: Dp): GridContext {
+    val density = LocalDensity.current
+    val gutterPx = with(density) { gap.roundToPx() }
+    return GridContext(columns, gutterPx, (maxWidthPx - gutterPx * (columns - 1)).toFloat() / columns, density.density)
+}
+
+@Composable
+fun Item(
+    widthSpan: Int? = null,
     heightSpan: Int = 0,
     modifier: Modifier = Modifier,
+    contentModifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
     val grid = LocalGridContext.current
     var m = modifier
     if (grid != null) {
-        m = m.width(grid.sizeForSpan(widthSpan))
+        m = m.width(grid.sizeForSpan(widthSpan ?: grid.numberOfColumns))
         if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
     }
-    // A Column (not a Box) so multiple children flow VERTICALLY instead of stacking
-    // on top of each other — matches the React Item's flex-column content.
-    Column(modifier = m) { content() }
+    Column(modifier = m.then(contentModifier)) { content() }
 }