@momo-kits/native-kits 0.152.4-beta.9 → 0.152.4-scale.3

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

@@ -115,11 +115,11 @@ internal fun StackScreen(
                 HeaderBackground()
             }
 
-            Box(Modifier.zIndex(4f)) {
+            Box(Modifier.zIndex(5f)) {
                 Header()
             }
 
-            Column (Modifier.zIndex(5f)) {
+            Column (Modifier.zIndex(6f)) {
                 SearchAnimated(isScrollInProgress = scrollInProcess)
             }
 
@@ -127,14 +127,15 @@ internal fun StackScreen(
                 MainContent(content = content)
             }
 
-            Box(Modifier.zIndex(5f)){
-                FloatingContent()
+            Box(Modifier.zIndex(4f).align(Alignment.BottomCenter)) {
+                FooterContent()
             }
 
-            Box(Modifier.zIndex(6f).fillMaxSize()){
-                if (bottomTabIndex != -1) return@Box
-                OverplayComponentRegistry.OverlayComponent()
+            Box(Modifier.zIndex(7f)){
+                FloatingContent()
             }
+
+            OverplayView(bottomTabIndex = bottomTabIndex, id = id)
         }
     }
 }
@@ -191,9 +192,9 @@ fun ColumnScope.MainContent(content: @Composable ()-> Unit){
     }
 
     if (options.footerComponent != null){
-        val isKeyboardVisible = isKeyboardVisible()
-        val bottomPadding = min(AppNavigationBar.current, if (isKeyboardVisible) 0.dp else 21.dp)
-        Footer(footerComponent = options.footerComponent, bottomPadding = bottomPadding)
+        val footerHeight = LocalFooterHeightPx.current
+        val footerHeightDp = with(density) { footerHeight.value.toDp() }
+        Spacer(Modifier.height(footerHeightDp))
     }
 }
 
@@ -217,6 +218,29 @@ fun ScreenContent(content: @Composable () -> Unit){
     }
 }
 
+@Composable
+fun FooterContent(){
+    val options = LocalOptions.current
+    if (options.footerComponent != null){
+        val isKeyboardVisible = isKeyboardVisible()
+        val bottomPadding = min(AppNavigationBar.current, if (isKeyboardVisible) 0.dp else 21.dp)
+        Footer(footerComponent = options.footerComponent, bottomPadding = bottomPadding)
+    }
+}
+
+@Composable
+fun OverplayView(bottomTabIndex: Int, id: Int){
+    val overplayType = OverplayComponentRegistry.getOverplayType()
+
+    if (overplayType != null) {
+        Box(Modifier.zIndex(if (overplayType == OverplayComponentType.SNACK_BAR) 3f else 8f).fillMaxSize()){
+            if (bottomTabIndex != -1) return@Box
+            if (OverplayComponentRegistry.currentRootId() != id) return@Box
+            OverplayComponentRegistry.OverlayComponent()
+        }
+    }
+}
+
 @Composable
 fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {
     if (footerComponent == null) return

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

@@ -4,6 +4,7 @@ import androidx.compose.animation.core.FastOutSlowInEasing
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -39,6 +40,7 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
@@ -71,6 +73,7 @@ fun BottomTabBar(
         animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing),
         label = "IndicatorX"
     )
+    val bottomTabBarHeight = scaleSize(BOTTOM_TAB_BAR_HEIGHT.toFloat())
 
     Box(
         contentAlignment = Alignment.BottomCenter
@@ -156,17 +159,15 @@ fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
         ) {
             Icon(
                 source = item.icon,
+                modifier = Modifier.weight(1f),
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
-            Spacer(modifier = Modifier.height(6.dp))
-            Box(modifier = Modifier.height(14.dp), contentAlignment = Alignment.Center){
-                Text(
-                    text = item.label,
-                    color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
-                    style = Typography.labelXsMedium,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
-            }
+            Text(
+                text = item.label,
+                color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
+                style = Typography.labelXsMedium,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
         }
         if(item.badgeLabel != null){
             Box(modifier = Modifier

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

@@ -50,7 +50,7 @@ fun HeaderUser(
         return TitleUserShimmer()
     }
 
-    val maxWidth = getScreenDimensions().width.dp - scaleSize(172.dp)- (data.icons.size * 16).dp
+    val maxWidth = getScreenDimensions().width.dp - 172.dp
 
     Row(
         modifier = Modifier

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

@@ -0,0 +1,125 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.offset
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.navigation.LocalFooterHeightPx
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.LocalOptions
+import vn.momo.kits.navigation.OverplayComponentRegistry
+
+sealed class SnackBar(open val duration: Long? = null) {
+    data class Custom(
+        val content: @Composable () -> Unit,
+        override val duration: Long? = 3000L
+    ) : SnackBar(duration)
+
+    data class Toast(
+        override val duration: Long? = 3000L
+    ) : SnackBar(duration)
+}
+
+@Composable
+fun SnackBar(
+    data: SnackBar,
+    onDismiss: (() -> Unit)?
+) {
+    val navigator = LocalNavigator.current
+    val options = LocalOptions.current
+    val density = LocalDensity.current
+    val footerHeightPxState = LocalFooterHeightPx.current
+    val navigationBar = AppNavigationBar.current
+
+    val footerHeight = if (options.footerComponent != null) {
+        footerHeightPxState.value
+    } else {
+        with(density){ min(navigationBar, 21.dp).toPx() }
+    }.toInt()
+
+    var startPosition by remember { mutableStateOf(Float.MAX_VALUE) }
+    val targetPosition = 0f
+
+    var offsetY by remember { mutableStateOf(Animatable(startPosition)) }
+    val coroutineScope = rememberCoroutineScope()
+
+    suspend fun openEvent() {
+        offsetY.snapTo(startPosition)
+        offsetY.animateTo(
+            targetValue = targetPosition,
+            animationSpec = tween(
+                durationMillis = 350,
+            )
+        )
+    }
+
+    fun closeEvent() {
+        coroutineScope.launch {
+            offsetY.animateTo(
+                targetValue = startPosition,
+                animationSpec = tween(
+                    durationMillis = 200,
+                )
+            )
+            navigator.hideSnackBar()
+        }
+    }
+
+    LaunchedEffect(startPosition) {
+        if (startPosition != Float.MAX_VALUE){
+            openEvent()
+        }
+    }
+
+    LaunchedEffect(data.duration) {
+        val duration = data.duration
+        if (duration != null) {
+            delay(duration)
+            navigator.hideSnackBar()
+        }
+    }
+
+    DisposableEffect(Unit) {
+        OverplayComponentRegistry.bindClose {
+            closeEvent()
+        }
+        onDispose {
+            onDismiss?.invoke()
+        }
+    }
+
+    Box(
+        modifier = Modifier
+            .offset { IntOffset(0, offsetY.value.toInt() - footerHeight) }
+            .onGloballyPositioned {
+                if (startPosition != it.size.height.toFloat()) {
+                    startPosition = it.size.height.toFloat()
+                    offsetY = Animatable(startPosition)
+                }
+            }
+            .fillMaxWidth()
+    ) {
+        when (data) {
+            is SnackBar.Custom -> data.content()
+            is SnackBar.Toast -> {}
+        }
+    }
+}

package/ios/Badge/Badge.swift

@@ -64,12 +64,6 @@ public struct Badge: View {
                     .stroke(Colors.black01, lineWidth: 1)
             )
     }
-    
-    // Helper function for scaling sizes
-    // TODO: Implement proper scaling logic based on your design system
-    private func scaleSize(_ size: CGFloat) -> CGFloat {
-        return size
-    }
 }
 
 // MARK: - Preview

package/ios/Badge/BadgeRibbon.swift

@@ -1,5 +1,74 @@
 import SwiftUI
 
+// MARK: - Custom Shape for Rounded Corners
+struct RoundedCorners: Shape {
+    var topLeft: CGFloat = 0.0
+    var topRight: CGFloat = 0.0
+    var bottomLeft: CGFloat = 0.0
+    var bottomRight: CGFloat = 0.0
+    
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        
+        let width = rect.size.width
+        let height = rect.size.height
+        
+        // Start from top left
+        path.move(to: CGPoint(x: topLeft, y: 0))
+        
+        // Top edge and top right corner
+        path.addLine(to: CGPoint(x: width - topRight, y: 0))
+        if topRight > 0 {
+            path.addArc(
+                center: CGPoint(x: width - topRight, y: topRight),
+                radius: topRight,
+                startAngle: Angle(degrees: -90),
+                endAngle: Angle(degrees: 0),
+                clockwise: false
+            )
+        }
+        
+        // Right edge and bottom right corner
+        path.addLine(to: CGPoint(x: width, y: height - bottomRight))
+        if bottomRight > 0 {
+            path.addArc(
+                center: CGPoint(x: width - bottomRight, y: height - bottomRight),
+                radius: bottomRight,
+                startAngle: Angle(degrees: 0),
+                endAngle: Angle(degrees: 90),
+                clockwise: false
+            )
+        }
+        
+        // Bottom edge and bottom left corner
+        path.addLine(to: CGPoint(x: bottomLeft, y: height))
+        if bottomLeft > 0 {
+            path.addArc(
+                center: CGPoint(x: bottomLeft, y: height - bottomLeft),
+                radius: bottomLeft,
+                startAngle: Angle(degrees: 90),
+                endAngle: Angle(degrees: 180),
+                clockwise: false
+            )
+        }
+        
+        // Left edge and top left corner
+        path.addLine(to: CGPoint(x: 0, y: topLeft))
+        if topLeft > 0 {
+            path.addArc(
+                center: CGPoint(x: topLeft, y: topLeft),
+                radius: topLeft,
+                startAngle: Angle(degrees: 180),
+                endAngle: Angle(degrees: 270),
+                clockwise: false
+            )
+        }
+        
+        path.closeSubpath()
+        return path
+    }
+}
+
 public enum RibbonPosition {
     case topLeft
     case topRight
@@ -76,14 +145,13 @@ public struct BadgeRibbon: View {
         .frame(height: RibbonConstants.roundHeight)
         .padding(.trailing, RibbonConstants.roundPaddingEnd)
         .background(
-            RoundedRectangle(cornerRadius: Radius.M)
-                .fill(backgroundColor)
-                .mask(
-                    HStack(spacing: 0) {
-                        Rectangle()
-                        RoundedRectangle(cornerRadius: Radius.M)
-                    }
-                )
+            RoundedCorners(
+                topLeft: 0,
+                topRight: RibbonConstants.roundRightRadius,
+                bottomLeft: 0,
+                bottomRight: RibbonConstants.roundRightRadius
+            )
+            .fill(backgroundColor)
         )
     }
     
@@ -139,7 +207,7 @@ private struct RibbonConstants {
     static let ribbonHeight: CGFloat = 20
     static let roundHeight: CGFloat = 16
     static let skewBodyHeight: CGFloat = 16
-    static let roundRightRadius: CGFloat = 12
+    static let roundRightRadius: CGFloat = 8
     static let roundPaddingEnd: CGFloat = 6
     static let skewTailWidth: CGFloat = 8
     static let skewTailHeight: CGFloat = 16

package/ios/Button/Button.swift

@@ -1,6 +1,6 @@
 import Foundation
-import SwiftUI
 import Lottie
+import SwiftUI
 
 // MARK: - ButtonType
 
@@ -33,7 +33,7 @@ public extension ButtonType {
     func backgroundColor(loading: Bool) -> Color {
         switch self {
         case .disabled: return Colors.black05.opacity(loading ? 0.75 : 1)
-        case .primary:  return Colors.primary.opacity(loading ? 0.75 : 1)
+        case .primary: return Colors.primary.opacity(loading ? 0.75 : 1)
         case .secondary: return Colors.card.opacity(loading ? 0.75 : 1)
         case .outline: return Colors.card.opacity(loading ? 0.75 : 1)
         case .tonal: return Colors.primaryLight.opacity(loading ? 0.75 : 1)
@@ -116,13 +116,13 @@ extension ButtonSize {
 }
 
 public struct Button: View {
-
     var title: String
     var action: () -> Void
     var type: ButtonType
     var size: ButtonSize
     var iconLeft: AnyView?
     var iconRight: AnyView?
+    var isFull: Bool
     var loading: Bool
 
     public init(
@@ -132,6 +132,7 @@ public struct Button: View {
         size: ButtonSize = .large,
         iconLeft: AnyView? = nil,
         iconRight: AnyView? = nil,
+        isFull: Bool = true,
         loading: Bool = false
     ) {
         self.title = title
@@ -140,6 +141,7 @@ public struct Button: View {
         self.size = size
         self.iconLeft = iconLeft
         self.iconRight = iconRight
+        self.isFull = isFull
         self.loading = loading
     }
 
@@ -156,7 +158,6 @@ public struct Button: View {
     }
 
     public var body: some View {
-
         let loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight)
 
         let bg = type.backgroundColor(loading: loading)
@@ -165,12 +166,11 @@ public struct Button: View {
         let borderWidth = type.borderWidth
 
         SwiftUI.Button(action: {
-            if !loading && type != .disabled {
+            if !loading, type != .disabled {
                 action()
             }
         }) {
             HStack(spacing: size.iconSpacing) {
-
                 if loading && loadingOnLeft {
                     LottieView(name: "lottie_circle_loader", loopMode: .loop)
                         .frame(width: size.iconSize, height: size.iconSize)
@@ -195,7 +195,7 @@ public struct Button: View {
                     iconRight.frame(width: size.iconSize, height: size.iconSize)
                 }
             }
-            .frame(maxWidth: .infinity)
+            .frame(maxWidth: isFull ? .infinity : nil)
             .padding(.horizontal, size.padding)
             .frame(height: size.height)
             .background(bg)

package/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Wed Sep 10 18:28:25 ICT 2025
+sdk.dir=/Users/phuc/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.152.4-beta.9",
+  "version": "0.152.4-scale.3",
   "private": false,
   "dependencies": {
     "@momo-platform/native-max-api": "1.0.18"