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

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

@@ -101,7 +101,6 @@ fun InputOTP(
 ) {
     val maxLength = length ?: 10
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
 
     val handleChangeText: (String) -> Unit = { text ->
         if (text.length <= maxLength &&
@@ -127,13 +126,9 @@ fun InputOTP(
             onValueChange = handleChangeText,
             singleLine = true,
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = if (dataType == "number") KeyboardType.Number else KeyboardType.Ascii),
-            modifier = modifier.height(56.dp).onFocusChanged {
+            modifier = Modifier.height(56.dp).onFocusChanged {
+                if (it.isFocused) onFocus() else if (isFocused) onBlur()
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    onFocus()
-                }
-                if (!it.isFocused && isBlurred) onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
             },
             decorationBox = { innerTextField ->
                 Box {
@@ -207,11 +202,11 @@ fun InputOTP(
                                             style = Typography.headerDefaultBold,
                                             text = value[i].toString()
                                         )
-                                        if (i != value.length - 1 || (isFocused && value.length != MAX_LENGTH)) {
+                                        if (i != value.length - 1 || (isFocused && value.length != maxLength)) {
                                             Spacer(Modifier.width(Spacing.L))
                                         }
                                     }
-                                    if (isFocused && value.length != MAX_LENGTH) OTPCaret()
+                                    if (isFocused && value.length != maxLength) OTPCaret()
                                 }
                             }
                         }

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

@@ -89,7 +89,7 @@ fun InputPhoneNumber(
 
     // Memoized color calculations
     val theme = AppTheme.current
-    val colors = remember( theme) {
+    val colors = remember(theme, iconColor) {
             Triple(
                 theme.colors.text.default,      // textColor
                 theme.colors.text.hint,         // placeholderColor
@@ -173,7 +173,7 @@ fun InputPhoneNumber(
                             Box(
                                 modifier = Modifier.width(1.dp)
                                     .height(size.values.dividerHeight)
-                                    .background(Colors.black_04)
+                                    .background(theme.colors.border.default)
                             )
                         }
 

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

@@ -29,6 +29,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.takeOrElse
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
@@ -99,7 +100,8 @@ data class InputSearchProps(
     val loading: Boolean = false,
     val fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     val keyboardType: KeyboardType = KeyboardType.Text,
-    val backgroundColor: Color = Colors.black_01,
+    // Unspecified resolves to the theme surface (white in the light theme).
+    val backgroundColor: Color = Color.Unspecified,
     val clearCondition: (() -> Boolean)? = null,
     val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
     val keyboardActions: KeyboardActions = KeyboardActions.Default,
@@ -118,7 +120,6 @@ fun InputSearch(
     ),
 ) {
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
     val disabledColor = AppTheme.current.colors.text.disable
     var textColor = AppTheme.current.colors.text.default
     var placeholderColor = AppTheme.current.colors.text.hint
@@ -134,7 +135,7 @@ fun InputSearch(
 
     val fontFamily = getFontFamily(AppTheme.current.font, inputSearchProps.fontWeight.value)
 
-    val textStyle = remember(textColor, inputSearchProps.fontWeight.value, fontFamily) {
+    val textStyle = remember(textColor, inputSearchProps.fontWeight.value, fontFamily, scaleFontSize) {
         TextStyle(
             color = textColor,
             fontSize = scaleFontSize,
@@ -167,13 +168,13 @@ fun InputSearch(
             textStyle = textStyle,
             keyboardOptions = inputSearchProps.keyboardOptions.copy(keyboardType = inputSearchProps.keyboardType),
             keyboardActions = inputSearchProps.keyboardActions,
+            cursorBrush = SolidColor(AppTheme.current.colors.primary),
+            // Transitions only: onFocusChanged also runs once on attach with isFocused = false.
             modifier = inputSearchProps.modifier.weight(1f).fillMaxHeight().onFocusChanged {
+                val wasFocused = isFocused
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    inputSearchProps.onFocus()
-                }
-                if (!it.isFocused && isBlurred) inputSearchProps.onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
+                if (it.isFocused && !wasFocused) inputSearchProps.onFocus()
+                if (!it.isFocused && wasFocused) inputSearchProps.onBlur()
             },
             onValueChange = inputSearchProps.onChangeText,
             decorationBox = { innerTextField ->
@@ -186,7 +187,7 @@ fun InputSearch(
                             )
                         ).fillMaxHeight()
                             .background(
-                                inputSearchProps.backgroundColor,
+                                inputSearchProps.backgroundColor.takeOrElse { AppTheme.current.colors.background.surface },
                                 RoundedCornerShape(Radius.XL)
                             ),
                         horizontalArrangement = Arrangement.Start,

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

@@ -13,6 +13,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.Dp
@@ -56,7 +57,6 @@ fun InputTextArea(
     keyboardType: KeyboardType = KeyboardType.Text,
 ) {
     var isFocused by remember { mutableStateOf(false) }
-    var isBlurred = false
     val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
         getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
 
@@ -81,13 +81,13 @@ fun InputTextArea(
                 fontFamily = getFontFamily(AppTheme.current.font, fontWeight.value)
             ),
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = keyboardType),
+            cursorBrush = SolidColor(AppTheme.current.colors.primary),
+            // Transitions only: onFocusChanged also runs once on attach with isFocused = false.
             modifier = Modifier.height(scaleHeight).onFocusChanged {
+                val wasFocused = isFocused
                 isFocused = it.isFocused
-                if (it.isFocused) {
-                    onFocus()
-                }
-                if (!it.isFocused && isBlurred) onBlur()
-                if (it.isFocused && !isBlurred) isBlurred = true
+                if (it.isFocused && !wasFocused) onFocus()
+                if (!it.isFocused && wasFocused) onBlur()
             },
             onValueChange = {
                 if (it.length <= maxLength) {

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

@@ -254,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/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/navigation/bottomtab/BottomTab.kt

@@ -11,6 +11,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
@@ -54,10 +55,10 @@ fun BottomTab(
     val navigator = LocalNavigator.current
     val navController = rememberNavController()
 
-    bottomTabOptionItems = items.mapIndexed { index, item ->
-        item.options ?: NavigationOptions()
-    }.toMutableList()
-
+    // Only on new items: this recomposes on every tab switch and would drop options a tab set at runtime.
+    remember(items) {
+        bottomTabOptionItems = items.map { it.options ?: NavigationOptions() }.toMutableList()
+    }
 
     LaunchedEffect(Unit){
         navigation.markAsBottomTabRoot()
@@ -92,7 +93,12 @@ fun BottomTab(
     val onTabSelected: (Int) -> Unit = {
         val targetRoute = "option$it"
         if (currentRoute != targetRoute) {
-            navController.navigate(targetRoute)
+            // one entry per tab above the first, so switching never grows the back stack
+            navController.navigate(targetRoute) {
+                popUpTo("option0") { saveState = true }
+                launchSingleTop = true
+                restoreState = true
+            }
         }
     }
 

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

@@ -41,7 +41,7 @@ internal fun BottomTabBar(
     onTabSelected: (Int) -> Unit,
 ) {
     val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
-    val selectedIndex = items.indexOfFirst { "option${items.indexOf(it)}" == currentRoute }
+    val selectedIndex = items.indices.firstOrNull { "option$it" == currentRoute } ?: 0
 
     val layout = getScreenLayout()
     val mid = items.size / 2
@@ -179,14 +179,13 @@ 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))
+        if (badgeLabel != null && badgeLabel.isNotEmpty()) {
+            Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
+        } else if (badgeLabel != null || item.showDot) {
+            BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
+            )
         }
     }
 }

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

@@ -97,7 +97,8 @@ internal fun parseHeaderTint(value: String?): Color? {
     val hex = when (raw.length) {
         3 -> "FF" + raw.map { "$it$it" }.joinToString("")
         6 -> "FF$raw"
-        8 -> raw
+        // CSS #RRGGBBAA, as RN passes it; Compose wants AARRGGBB
+        8 -> raw.substring(6) + raw.substring(0, 6)
         else -> return null
     }
     val v = hex.toLongOrNull(16) ?: return null

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

@@ -83,7 +83,8 @@ internal fun SnackBar(
                     durationMillis = 200,
                 )
             )
-            navigator.hideSnackBar()
+            // hideSnackBar() would call clear() -> this close again while still bound
+            OverplayComponentRegistry.hardClearAfterDismiss()
         }
     }
 

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-duo-search.1
+version=0.167.1-duo-search.2
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven