@momo-kits/native-kits 0.167.1-duo.1-debug → 0.167.1-duo.10-debug

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

@@ -4,6 +4,8 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -20,7 +22,7 @@ import vn.momo.kits.application.LocalLocalize
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.kits.layout.getScreenLayout
 import kotlin.math.min
 
 data class PopupAction(
@@ -34,9 +36,21 @@ enum class PopupActionDirection {
     AUTO
 }
 
-// Portrait width in landscape too, so aspect-ratio images don't push popups past the screen height.
+// Width of a system alert on the iPhone Duo inner display, in both orientations (RN Popup/utils.ts).
+private val DUO_POPUP_MAX_WIDTH = 440.dp
+
+// Card width cap plus the popup's own side padding; unbounded off iPhone Duo.
+@Composable
+internal fun popupMaxWidth(horizontalPadding: Dp): Dp =
+    if (getScreenLayout().isIPhoneDuoDevice) DUO_POPUP_MAX_WIDTH + horizontalPadding * 2 else Dp.Unspecified
+
+// Room left for a popup on iPhone Duo, where landscape is too short for it; null elsewhere.
 @Composable
-internal fun popupMaxWidth(): Dp = getScreenDimensions().let { minOf(it.width, it.height) }.dp
+internal fun popupMaxHeight(): Dp? {
+    val layout = getScreenLayout()
+    if (!layout.isIPhoneDuoDevice) return null
+    return layout.height - layout.duoTopInset - layout.insetBottom - Spacing.XL * 2
+}
 
 private fun heightForLines(
     layout: TextLayoutResult,
@@ -129,12 +143,15 @@ fun PopupNotify(
         callback?.invoke()
     }
 
+    val maxHeight = popupMaxHeight()
+    val bodyScrollState = rememberScrollState()
+
     Box(
         Modifier.setAutomationId("popup_notify"), contentAlignment = Alignment.TopEnd
     ) {
         Column(
             modifier = Modifier
-                .widthIn(max = popupMaxWidth())
+                .widthIn(max = popupMaxWidth(horizontalPadding = 12.dp))
                 .fillMaxWidth()
                 .padding(horizontal = 12.dp)
                 .clip(RoundedCornerShape(Radius.L))
@@ -145,31 +162,41 @@ fun PopupNotify(
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
+                .conditional(maxHeight != null) {
+                    heightIn(max = maxHeight ?: Dp.Unspecified)
+                }
         ) {
-            if(props.image.isNotEmpty()) {
-                Image(
-                    source = props.image,
-                    modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
-                    options = Options(alignment = Alignment.Center)
-                )
-            }
+            // scrolls when iPhone Duo landscape is too short; actions stay visible
+            Column(
+                Modifier.conditional(maxHeight != null) {
+                    weight(1f, fill = false).verticalScroll(bodyScrollState)
+                }
+            ) {
+                if(props.image.isNotEmpty()) {
+                    Image(
+                        source = props.image,
+                        modifier = Modifier.fillMaxWidth().aspectRatio(1.777f),
+                        options = Options(alignment = Alignment.Center)
+                    )
+                }
 
-            Column(modifier = Modifier.padding(Spacing.XL)) {
-                Text(
-                    style = Typography.headerDefaultBold,
-                    maxLines = 2,
-                    text = props.title,
-                    modifier = Modifier.setAutomationId("title_popup_permission")
-                )
-                content(Modifier.padding(top = Spacing.S))
-                if (props.error.isNotEmpty()) {
+                Column(modifier = Modifier.padding(Spacing.XL)) {
                     Text(
-                        text = LocalLocalize.current.translate("errorCode") + props.error,
-                        style = Typography.descriptionXsRegular,
-                        color = AppTheme.current.colors.text.hint,
-                        maxLines = 1,
-                        modifier = Modifier.padding(top = Spacing.S)
+                        style = Typography.headerDefaultBold,
+                        maxLines = 2,
+                        text = props.title,
+                        modifier = Modifier.setAutomationId("title_popup_permission")
                     )
+                    content(Modifier.padding(top = Spacing.S))
+                    if (props.error.isNotEmpty()) {
+                        Text(
+                            text = LocalLocalize.current.translate("errorCode") + props.error,
+                            style = Typography.descriptionXsRegular,
+                            color = AppTheme.current.colors.text.hint,
+                            maxLines = 1,
+                            modifier = Modifier.padding(top = Spacing.S)
+                        )
+                    }
                 }
             }
 
@@ -227,7 +254,7 @@ internal fun BuildAction(
     val closeAction = remember { mutableStateOf("button_action") }
     when (buttonDirection) {
         PopupActionDirection.AUTO -> {
-            if (secondary != null && (secondary.title.length > 12 || primary?.title?.length!! > 12)) {
+            if (secondary != null && (secondary.title.length > 12 || (primary?.title?.length ?: 0) > 12)) {
                 RenderColumn(
                     secondary = secondary,
                     onAction = onAction,

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

@@ -22,14 +22,24 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.utils.ifNotNull
 
+private const val ASPECT_RATIO = 0.72f
+private val CLOSE_ROW_HEIGHT = Spacing.S + 40.dp
+
 @Composable
 fun PopupPromotion(
     source: String = "",
     onPress: (() -> Unit) = {},
     onClose: (() -> Unit) = {},
 ) {
+    val maxHeight = popupMaxHeight()
+    var maxWidth = popupMaxWidth(horizontalPadding = Spacing.M)
+    if (maxHeight != null) {
+        // fit the portrait image by height when iPhone Duo leaves too little room
+        maxWidth = minOf(maxWidth, (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO + Spacing.M * 2)
+    }
+
     Column(Modifier
-        .widthIn(max = popupMaxWidth())
+        .widthIn(max = maxWidth)
         .padding(horizontal = Spacing.M)
         .conditional(IsShowBaseLineDebug) {
             border(1.dp, Colors.blue_03)
@@ -39,7 +49,7 @@ fun PopupPromotion(
             Image(
                 source = source,
                 modifier = Modifier.fillMaxWidth()
-                    .aspectRatio(0.72f)
+                    .aspectRatio(ASPECT_RATIO)
                     .clickable(
                         interactionSource = remember { MutableInteractionSource() },
                         indication = null,

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

@@ -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/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() }
 }