@momo-kits/native-kits 0.163.1-beta.9-debug → 0.163.1-footer.1-debug

package/.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "WebSearch",
+      "Bash(./gradlew assembleDebug 2>&1)",
+      "Bash(./gradlew :sample:androidApp:installDebug 2>&1)",
+      "Bash(./gradlew :compose:compileCommonMainKotlinMetadata -q)",
+      "Bash(mkdir -p compose/src/commonMain/composeResources/files)",
+      "Bash(cp sample/shared/src/commonMain/composeResources/files/anim_processing_transaction.json sample/shared/src/commonMain/composeResources/files/dot_loading.json sample/shared/src/commonMain/composeResources/files/face_loading.json sample/shared/src/commonMain/composeResources/files/lottie_circle_loader.json compose/src/commonMain/composeResources/files/)",
+      "Bash(git rm *)",
+      "Bash(./gradlew :sample:androidApp:compileDebugKotlin -q)"
+    ]
+  }
+}

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.163.1-beta.9-debug"
+        version = "0.163.1-footer.1-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

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

package/compose/src/commonMain/kotlin/vn/momo/kits/application/HeaderRight.kt

@@ -167,8 +167,7 @@ private fun ToolkitHeaderRight(
                 if (toolResponse != null) {
                     headerRight?.toolCallback?.invoke(toolResponse)
                 }
-            } catch (e: Exception) {
-                println("Error parsing response: $e")
+            } catch (_: Exception) {
             }
         }
     }

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

@@ -209,7 +209,6 @@ internal class CupertinoOverscrollEffect(
     private fun availableDelta(delta: Offset, source: CupertinoScrollSource): Offset {
         val (x, overscrollX) = availableDelta(delta.x, overscrollOffset.x, source)
         val (y, overscrollY) = availableDelta(delta.y, overscrollOffset.y, source)
-        println("availableDelta delta=${delta.y} consumed y=$y overscrollY=$overscrollY source=${source}")
         overscrollOffset = Offset(overscrollX, overscrollY)
 
         return Offset(x, y)

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.takeOrElse
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextOverflow
@@ -49,7 +50,7 @@ import vn.momo.kits.utils.ifTrue
 internal fun RenderRightIconSearch(
     loading: Boolean,
     icon: String,
-    color: Color,
+    color: Color?,
     onClick: () -> Unit,
     iconModifier: Modifier = Modifier
 ) {
@@ -57,7 +58,7 @@ internal fun RenderRightIconSearch(
         Box(Modifier.padding(horizontal = Spacing.S)) {
             CircularProgressIndicator(
                 modifier = Modifier.size(16.dp),
-                color = color,
+                color = color ?: AppTheme.current.colors.text.default,
                 trackColor = Color.Transparent,
                 strokeWidth = 2.dp
             )
@@ -90,7 +91,7 @@ data class InputSearchProps(
     val onPressButtonText: () -> Unit = {},
     val disabled: Boolean = false,
     val icon: String = "",
-    val iconColor: Color = Color(0xff),
+    val iconColor: Color? = Color.Unspecified,
     val onRightIconPressed: () -> Unit = {},
     val onFocus: () -> Unit = {},
     val onBlur: () -> Unit = {},
@@ -113,7 +114,6 @@ data class InputSearchProps(
 fun InputSearch(
     inputSearchProps: InputSearchProps = InputSearchProps(
         text = remember { mutableStateOf("") },
-        iconColor = AppTheme.current.colors.text.default
     ),
 ) {
     var isFocused by remember { mutableStateOf(false) }
@@ -121,7 +121,7 @@ fun InputSearch(
     val disabledColor = AppTheme.current.colors.text.disable
     var textColor = AppTheme.current.colors.text.default
     var placeholderColor = AppTheme.current.colors.text.hint
-    var iconTintColor = inputSearchProps.iconColor
+    var iconTintColor = inputSearchProps.iconColor?.takeOrElse { AppTheme.current.colors.text.default }
 
     if (inputSearchProps.disabled) {
         textColor = disabledColor

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

@@ -147,6 +147,17 @@ object Colors {
     val red_10 = Color(0xFFFEF4F4)
     val red_11 = Color(0xFFFEF8F8)
 
+    // Translucent overlays, ported from the React kit's Consts (the reference
+    // palette). React spells them `#RRGGBBAA`; Compose's Color takes `0xAARRGGBB`.
+    val opacity_black_20 = Color(0x33000000)
+    val opacity_black_40 = Color(0x66000000)
+    val opacity_black_60 = Color(0x99000000)
+    val opacity_black_80 = Color(0xCC000000)
+    val opacity_white_20 = Color(0x33FFFFFF)
+    val opacity_white_40 = Color(0x66FFFFFF)
+    val opacity_white_60 = Color(0x99FFFFFF)
+    val opacity_white_80 = Color(0xCCFFFFFF)
+
     val colorList: Map<String, Color> = mapOf(
         "black_01" to black_01,
         "black_02" to black_02,
@@ -302,5 +313,13 @@ object Colors {
         "red_09" to red_09,
         "red_10" to red_10,
         "red_11" to red_11,
+        "opacity_black_20" to opacity_black_20,
+        "opacity_black_40" to opacity_black_40,
+        "opacity_black_60" to opacity_black_60,
+        "opacity_black_80" to opacity_black_80,
+        "opacity_white_20" to opacity_white_20,
+        "opacity_white_40" to opacity_white_40,
+        "opacity_white_60" to opacity_white_60,
+        "opacity_white_80" to opacity_white_80,
     )
 }

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

@@ -4,8 +4,8 @@ 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
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -18,18 +18,13 @@ import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
 
-/**
- * A white rounded surface card that lays its [Item]s on a 12-column grid
- * (React kit foundations/Layout/Card). 8dp gutter, 12dp padding, 12dp
- * horizontal margin, Radius.M corners, background = theme surface, optional
- * shadow or [backgroundImage]. Items flow left-to-right and wrap.
- */
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
-fun Card(
+internal fun Card(
     useShadow: Boolean = false,
     backgroundImage: String? = null,
+    contentPadding: PaddingValues = PaddingValues(Spacing.M),
     modifier: Modifier = Modifier,
     content: @Composable () -> Unit,
 ) {
@@ -39,20 +34,12 @@ fun Card(
     var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
     if (useShadow) surface = surface.shadow(4.dp, shape)
     surface = surface.clip(shape)
-    // The React kit drops the surface colour when a backgroundImage is supplied
-    // (`!!backgroundImage && { backgroundColor: undefined }`).
     if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
     Box(modifier = surface) {
-        // React renders this as an absolutely-filled child BEHIND the content
-        // (styles.imageBackground: position absolute, inset 0) — matchParentSize
-        // fills the card without contributing to its measured size.
         if (backgroundImage != null) {
             Image(source = backgroundImage, modifier = Modifier.matchParentSize())
         }
-        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(12.dp)) {
-            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
-            // nudge: it keeps a full 12-span Item ~1dp narrower than the content
-            // box so sub-pixel rounding can never overflow and wrap the FlowRow.
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(contentPadding)) {
             val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
             CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
                 FlowRow(

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

@@ -1,6 +1,6 @@
 package vn.momo.kits.layout
 
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
@@ -9,30 +9,18 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
-/**
- * Grid context supplied by [Section] / [Card]: the per-span cell size + gutter,
- * so an [Item] can resolve its pixel width from a 1-12 `widthSpan`. Mirrors the
- * React kit's GridContext (foundations/Layout/GridSystem).
- */
-data class GridContext(
+internal data class GridContext(
     val numberOfColumns: Int = 12,
     val gutter: Dp = 12.dp,
     val sizePerSpan: Dp = 0.dp,
 ) {
-    /** Width covering `span` columns + the (span-1) gutters between them. */
     fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
 }
 
-/** Provided by Section/Card; null when an Item is rendered outside a grid. */
-val LocalGridContext = compositionLocalOf<GridContext?> { null }
+internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
-/**
- * A grid cell. `widthSpan` (1-12) sets the width as a fraction of the parent
- * Section/Card; the parent's flex-wrap flows the cells into rows. Rendered
- * outside a grid it just wraps its content at its natural size.
- */
 @Composable
-fun Item(
+internal fun Item(
     widthSpan: Int = 12,
     heightSpan: Int = 0,
     modifier: Modifier = Modifier,
@@ -44,5 +32,7 @@ fun Item(
         m = m.width(grid.sizeForSpan(widthSpan))
         if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
     }
-    Box(modifier = m) { content() }
+    // 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() }
 }

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

@@ -3,7 +3,6 @@ package vn.momo.kits.layout
 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.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -13,14 +12,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.components.Image
 
-/**
- * A transparent 12-column grid row that wraps its [Item]s (React kit
- * foundations/Layout/Section). 12dp gutter; 12dp horizontal margin when
- * `useMargin`; optional [backgroundImage]. Items flow left-to-right and wrap.
- */
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
-fun Section(
+internal fun Section(
     useMargin: Boolean = true,
     backgroundImage: String? = null,
     modifier: Modifier = Modifier,
@@ -30,15 +23,10 @@ fun Section(
     val gutter = 12.dp
     val margin = if (useMargin) 12.dp else 0.dp
     Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
-        // React renders this as an absolutely-filled child behind the content
-        // (styles.imageBackground: position absolute, inset 0).
         if (backgroundImage != null) {
             Image(source = backgroundImage, modifier = Modifier.matchParentSize())
         }
         BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
-            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
-            // nudge — keeps a full 12-span Item ~1dp inside the content box so
-            // sub-pixel rounding can never overflow and wrap the FlowRow.
             val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
             CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
                 FlowRow(

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

@@ -28,6 +28,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalDensity
@@ -43,6 +44,7 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.LocalContext
 import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.Typography
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.modifier.conditional
@@ -56,10 +58,11 @@ internal fun BottomSheet(
     header: BottomHeader,
     isSurface: Boolean = false,
     barrierDismissible: Boolean = true,
+    draggable: Boolean = true,
+    useBottomInset: Boolean = true,
+    footerComponent: (@Composable () -> Unit)? = null,
     onDismiss: (() -> Unit)?
 ) {
-    val navigator = LocalNavigator.current
-
     val screenHeightDp = getScreenHeight()
     val screenHeightPx = with(LocalDensity.current) { screenHeightDp.toPx() }
     val sheetOffset = remember { Animatable(screenHeightPx) }
@@ -162,30 +165,35 @@ internal fun BottomSheet(
                 .noFeedbackClickable {  },
             contentAlignment = Alignment.BottomCenter
         ) {
-            Column {
+            val bottomInset = if (useBottomInset) {
+                (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
+            } else 0.dp
+            Column(Modifier.padding(bottom = bottomInset)) {
                 Box(
                     modifier = Modifier
                         .height(72.dp)
                         .fillMaxWidth()
-                        .pointerInput(Unit) {
-                            detectDragGestures(
-                                onDrag = { change, dragAmount ->
-                                    change.consume()
-                                    coroutineScope.launch {
-                                        val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
-                                        sheetOffset.snapTo(newOffset)
-                                    }
-                                },
-                                onDragEnd = {
-                                    coroutineScope.launch {
-                                        if (sheetOffset.value > sheetCloseOffset) {
-                                            closeEvent()
-                                        } else {
-                                            sheetOffset.animateTo(0f)
+                        .conditional(draggable) {
+                            pointerInput(Unit) {
+                                detectDragGestures(
+                                    onDrag = { change, dragAmount ->
+                                        change.consume()
+                                        coroutineScope.launch {
+                                            val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
+                                            sheetOffset.snapTo(newOffset)
+                                        }
+                                    },
+                                    onDragEnd = {
+                                        coroutineScope.launch {
+                                            if (sheetOffset.value > sheetCloseOffset) {
+                                                closeEvent()
+                                            } else {
+                                                sheetOffset.animateTo(0f)
+                                            }
                                         }
                                     }
-                                }
-                            )
+                                )
+                            }
                         }
                 ) {
                     Column(
@@ -236,12 +244,50 @@ internal fun BottomSheet(
                     }
                 }
                 Divider()
-                content()
+                if (footerComponent != null) {
+                    Box(Modifier.weight(1f, fill = false)) {
+                        content()
+                    }
+                    BottomSheetFooter(footerComponent)
+                } else {
+                    content()
+                }
             }
         }
     }
 }
 
+@Composable
+private fun BottomSheetFooter(footerComponent: @Composable () -> Unit) {
+    val shadowBrush = remember {
+        Brush.verticalGradient(
+            colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
+        )
+    }
+
+    Box {
+        Box(
+            Modifier
+                .fillMaxWidth()
+                .background(AppTheme.current.colors.background.surface)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(vertical = Spacing.S)
+        ) {
+            footerComponent()
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(6.dp)
+                .offset(x = 0.dp, y = (-6).dp)
+                .background(shadowBrush)
+        )
+    }
+}
+
 sealed class BottomHeader {
     data class Title(
         val data: String = "Bottom Sheet Title",

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

@@ -32,6 +32,7 @@ class Navigation(
         backgroundColor: Color? = null,
         tintColor: Color? = null,
         footerComponent: (@Composable () -> Unit)? = null,
+        footerTransparent: Boolean? = null,
         floatingButtonProps: FloatingButtonProps? = null,
         keyboardOptions: KeyboardOptions? = null
     ) {
@@ -48,6 +49,7 @@ class Navigation(
                 backgroundColor = backgroundColor ?: options.backgroundColor,
                 tintColor = tintColor ?: options.tintColor,
                 footerComponent = footerComponent ?: options.footerComponent,
+                footerTransparent = footerTransparent ?: options.footerTransparent,
                 floatingButtonProps = floatingButtonProps ?: options.floatingButtonProps,
                 keyboardOptions = keyboardOptions ?: options.keyboardOptions,
             )
@@ -83,6 +85,9 @@ data class NavigationOptions(
     val backgroundColor: Color? = null,
     val tintColor: Color? = null,
     val footerComponent: @Composable (() -> Unit)? = null,
+    // Transparent footer drops the surface background + shadow and floats over the content
+    // instead of taking a layout slot, so the content scrolls underneath it.
+    val footerTransparent: Boolean = false,
     val floatingButtonProps: FloatingButtonProps? = null,
     val keyboardOptions: KeyboardOptions = KeyboardOptions()
 ) {

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

@@ -139,10 +139,13 @@ class Navigator(
         isSurface: Boolean = false,
         barrierDismissible: Boolean = true,
         onDismiss: (() -> Unit)? = null,
-        bottomSheetHeader: BottomHeader? = null
+        bottomSheetHeader: BottomHeader? = null,
+        draggable: Boolean = true,
+        useBottomInset: Boolean = true,
+        footerComponent: (@Composable () -> Unit)? = null
     ){
         val id = currentScreen()?.id ?: -1
-        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.BOTTOM_SHEET, isSurface, barrierDismissible, onDismiss, bottomSheetHeader)
+        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.BOTTOM_SHEET, isSurface, barrierDismissible, onDismiss, bottomSheetHeader, draggable, useBottomInset, footerComponent)
     }
 
     fun showSnackBar(snackBar: SnackBar, onDismiss: (() -> Unit)? = null) {
@@ -257,6 +260,9 @@ sealed class OverplayComponentParams {
         val onDismiss: (() -> Unit)? = null,
         val barrierDismissible: Boolean = true,
         val bottomSheetHeader: BottomHeader? = null,
+        val draggable: Boolean = true,
+        val useBottomInset: Boolean = true,
+        val footerComponent: (@Composable () -> Unit)? = null,
     ) : OverplayComponentParams()
 
     class SnackBar : OverplayComponentParams()
@@ -288,10 +294,13 @@ object OverplayComponentRegistry {
         barrierDismissible: Boolean = true,
         onDismiss: (() -> Unit)?,
         bottomSheetHeader: BottomHeader? = null,
+        draggable: Boolean = true,
+        useBottomInset: Boolean = true,
+        footerComponent: (@Composable () -> Unit)? = null,
     ){
         val params = when(type){
             OverplayComponentType.MODAL -> OverplayComponentParams.Modal(onDismiss, barrierDismissible)
-            OverplayComponentType.BOTTOM_SHEET -> OverplayComponentParams.BottomSheet(isSurface, onDismiss, barrierDismissible, bottomSheetHeader)
+            OverplayComponentType.BOTTOM_SHEET -> OverplayComponentParams.BottomSheet(isSurface, onDismiss, barrierDismissible, bottomSheetHeader, draggable, useBottomInset, footerComponent)
             OverplayComponentType.SNACK_BAR -> OverplayComponentParams.SnackBar()
         }
 
@@ -333,6 +342,9 @@ object OverplayComponentRegistry {
                     header = params.bottomSheetHeader ?: Title(),
                     isSurface = params.isSurface,
                     barrierDismissible = params.barrierDismissible,
+                    draggable = params.draggable,
+                    useBottomInset = params.useBottomInset,
+                    footerComponent = params.footerComponent,
                     onDismiss = params.onDismiss
                 )
             }

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

@@ -204,7 +204,14 @@ internal fun StackScreen(
 
             Column(Modifier.zIndex(2f).fillMaxSize()) {
                 MainContent(content = content, isBottomTabRoot = isBottomTabRoot, isBottomTabChild = isBottomTabChild)
-                FooterContent()
+                if (!options.footerTransparent) FooterContent()
+            }
+
+            // Transparent footer floats over the content so the content bleeds underneath it.
+            if (options.footerTransparent) {
+                Box(Modifier.zIndex(3f).align(Alignment.BottomCenter)) {
+                    FooterContent()
+                }
             }
 
             Box(Modifier.zIndex(6f)) {
@@ -280,7 +287,7 @@ internal fun ColumnScope.MainContent(content: @Composable () -> Unit, isBottomTa
                 bottom = when {
                     options.hasFooter() || isBottomTabRoot -> 0.dp
                     isBottomTabChild -> bottomTabBarInset() + (navigationBar - keyboardSizeState().value).coerceAtLeast(0.dp)
-                    !options.scrollData.scrollable -> 0.dp
+                    !options.scrollData.scrollable && options.scrollData.scrollState == null -> 0.dp
                     else -> navigationBar
                 }
             )
@@ -316,7 +323,11 @@ internal fun FooterContent() {
     if (options.hasFooter()) {
         val keyboardSize = keyboardSizeState()
         val bottomPadding = (AppNavigationBar.current - keyboardSize.value).coerceAtLeast(0.dp)
-        Footer(footerComponent = options.footerComponent, bottomPadding = bottomPadding)
+        Footer(
+            footerComponent = options.footerComponent,
+            bottomPadding = bottomPadding,
+            transparent = options.footerTransparent
+        )
     }
 }
 
@@ -340,7 +351,7 @@ internal fun OverplayView(isBottomTabChild: Boolean, id: Int) {
 }
 
 @Composable
-fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {
+fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp, transparent: Boolean = false) {
     if (footerComponent == null) return
 
     val footerHeightPx = LocalFooterHeightPx.current
@@ -351,13 +362,15 @@ fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {
         )
     }
 
+    val backgroundColor = if (transparent) Color.Transparent else AppTheme.current.colors.background.surface
+
     Box(Modifier.onGloballyPositioned {
         if (footerHeightPx.intValue != it.size.height) footerHeightPx.intValue = it.size.height
     }) {
         Box(
             Modifier
                 .fillMaxWidth()
-                .background(AppTheme.current.colors.background.surface)
+                .background(backgroundColor)
                 .conditional(IsShowBaseLineDebug) {
                     border(1.dp, Colors.blue_03)
                 }
@@ -366,13 +379,15 @@ fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {
             footerComponent.invoke()
         }
 
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(6.dp)
-                .offset(x = 0.dp, y = (-6).dp)
-                .background(shadowBrush)
-        )
+        if (!transparent) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(6.dp)
+                    .offset(x = 0.dp, y = (-6).dp)
+                    .background(shadowBrush)
+            )
+        }
     }
 }
 

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

@@ -31,7 +31,6 @@ object ScreenTracker {
         val previousScreen = lastScreenName
         lastScreenName = screenName
 
-        println("Tracking screen navigated native kit: $screenName")
         maxApi?.track(
             eventName = "auto_screen_navigated",
             params = buildBaseParams(context, screenName).apply {

package/gradle.properties

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

package/ios/Application/Components.swift

@@ -100,6 +100,20 @@ public struct HeaderBackground: View {
                         .frame(height: height)
                         .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
                         .background(backgroundColor)
+                        .overlay(
+                            headerTransparent ? AnyView(EmptyView()) :
+                            AnyView(
+                                Rectangle()
+                                    .fill(LinearGradient(
+                                        gradient: Gradient(colors: [
+                                            Color(red: 1, green: 0.8, blue: 0.87),
+                                            Color(red: 1, green: 0.8, blue: 0.87).opacity(0.5)
+                                        ]),
+                                        startPoint: .top,
+                                        endPoint: .bottom))
+                                    .opacity(opacity)
+                                    .frame(height: height))
+                        )
                     if !headerTransparent {
                         Rectangle()
                             .fill(Color.black.opacity(0.1))
@@ -132,17 +146,6 @@ public struct HeaderBackground: View {
     }
 }
 
-// MARK: - Header right width preference
-
-/// Reports the measured width of the header-right area so the animated search
-/// header can compute its trailing inset (mirrors Compose's headerRightWidthPx).
-public struct HeaderRightWidthKey: PreferenceKey {
-    public static var defaultValue: CGFloat = 0
-    public static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
-        value = max(value, nextValue())
-    }
-}
-
 // MARK: - Bottom-tab root preference
 
 /// Set by `BottomTab` on appear so its enclosing `StackScreen` can detect that
@@ -232,9 +235,6 @@ public struct Header: View {
 
                         if let headerRight = headerRight {
                             AnyView(headerRight())
-                                .background(GeometryReader { geo in
-                                    Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
-                                })
                         }
                     }
                     .padding(.horizontal, 12)