@momo-kits/native-kits 0.152.4-maxapi → 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

@@ -0,0 +1,85 @@
+import SwiftUI
+
+public struct Badge: View {
+    let label: String
+    let backgroundColor: Color?
+    
+    private var primaryColors: [Color] {
+        [
+            Colors.black03,
+            Colors.pink03,
+            Colors.violet03,
+            Colors.indigo03,
+            Colors.blue03,
+            Colors.mint03,
+            Colors.green03,
+            Colors.lime03,
+            Colors.yellow03,
+            Colors.gold03,
+            Colors.orange03,
+            Colors.red03
+        ]
+    }
+    
+    public init(label: String = "Label", backgroundColor: Color? = nil) {
+        self.label = label
+        self.backgroundColor = backgroundColor
+    }
+    
+    private func isNumber(_ text: String) -> Bool {
+        return text.range(of: "^\\d+$", options: .regularExpression) != nil
+    }
+    
+    private func formatTitle(_ text: String) -> String {
+        if isNumber(text), let number = Int(text), number > 99 {
+            return "99+"
+        }
+        return text
+    }
+    
+    private var badgeColor: Color {
+        // If a custom background color is provided, use it
+        if let bgColor = backgroundColor {
+            return bgColor
+        }
+        
+        // Otherwise, use default colors based on label type
+        if isNumber(label) {
+            return Colors.red03 // error.primary
+        } else {
+            return Colors.orange03 // warning.primary
+        }
+    }
+    
+    public var body: some View {
+        Text(formatTitle(label))
+            .font(.system(size: scaleSize(10), weight: .bold))
+            .foregroundColor(Colors.black01)
+            .padding(.horizontal, Spacing.XS)
+            .frame(minWidth: scaleSize(16), minHeight: scaleSize(16))
+            .background(badgeColor)
+            .cornerRadius(Radius.M)
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .stroke(Colors.black01, lineWidth: 1)
+            )
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct Badge_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 20) {
+            Badge(label: "5")
+            Badge(label: "99")
+            Badge(label: "100")
+            Badge(label: "New")
+            Badge(label: "Hot", backgroundColor: Colors.pink03)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif
+

package/ios/Badge/BadgeRibbon.swift

@@ -0,0 +1,242 @@
+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
+    case bottomLeft
+    case bottomRight
+}
+
+public struct BadgeRibbon: View {
+    let position: RibbonPosition
+    let label: String
+    let isRound: Bool
+    let backgroundColor: Color
+    
+    public init(
+        position: RibbonPosition = .topRight,
+        label: String = "Label",
+        isRound: Bool = false,
+        backgroundColor: Color? = nil
+    ) {
+        self.position = position
+        self.label = label
+        self.isRound = isRound
+        self.backgroundColor = backgroundColor ?? Colors.orange03
+    }
+    
+    private var rotation: Angle {
+        switch position {
+        case .topRight, .bottomRight:
+            return .degrees(180)
+        case .topLeft, .bottomLeft:
+            return .zero
+        }
+    }
+    
+    private var useUpTail: Bool {
+        position == .bottomLeft || position == .topRight
+    }
+    
+    private var verticalAlignment: VerticalAlignment {
+        switch position {
+        case .topLeft, .bottomRight:
+            return .top
+        case .bottomLeft, .topRight:
+            return .bottom
+        }
+    }
+    
+    public var body: some View {
+        HStack(alignment: verticalAlignment, spacing: 0) {
+            if useUpTail {
+                upTail
+            } else {
+                downTail
+            }
+            
+            if isRound {
+                roundContent
+            } else {
+                skewContent
+            }
+        }
+        .frame(height: RibbonConstants.ribbonHeight)
+        .rotationEffect(rotation)
+    }
+    
+    private var roundContent: some View {
+        HStack(spacing: 0) {
+            Text(label)
+                .font(.system(size: 12, weight: .medium))
+                .foregroundColor(Colors.black01)
+                .lineLimit(1)
+                .rotationEffect(rotation)
+        }
+        .frame(height: RibbonConstants.roundHeight)
+        .padding(.trailing, RibbonConstants.roundPaddingEnd)
+        .background(
+            RoundedCorners(
+                topLeft: 0,
+                topRight: RibbonConstants.roundRightRadius,
+                bottomLeft: 0,
+                bottomRight: RibbonConstants.roundRightRadius
+            )
+            .fill(backgroundColor)
+        )
+    }
+    
+    private var skewContent: some View {
+        HStack(spacing: 0) {
+            Text(label)
+                .font(.system(size: 12, weight: .medium))
+                .foregroundColor(Colors.black01)
+                .lineLimit(1)
+                .rotationEffect(rotation)
+                .frame(height: RibbonConstants.skewBodyHeight)
+                .padding(.horizontal, 8)
+                .background(backgroundColor)
+            
+            rightTail
+        }
+    }
+    
+    private var upTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
+        .rotationEffect(.degrees(180))
+        .offset(x: 1)
+        .clipped()
+    }
+    
+    private var downTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Head_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
+        .offset(x: 1)
+        .clipped()
+    }
+    
+    private var rightTail: some View {
+        ImageView(
+            "https://static.momocdn.net/app/img/kits/utils/Tail_4x.png",
+            placeholder: AnyView(Color.clear)
+        )
+        .frame(width: RibbonConstants.skewTailWidth, height: RibbonConstants.skewTailHeight)
+        .offset(x: -2)
+        .clipped()
+    }
+}
+
+// MARK: - Constants
+private struct RibbonConstants {
+    static let ribbonHeight: CGFloat = 20
+    static let roundHeight: CGFloat = 16
+    static let skewBodyHeight: CGFloat = 16
+    static let roundRightRadius: CGFloat = 8
+    static let roundPaddingEnd: CGFloat = 6
+    static let skewTailWidth: CGFloat = 8
+    static let skewTailHeight: CGFloat = 16
+    static let headTailWidth: CGFloat = 5
+    static let headTailHeight: CGFloat = 20
+}
+
+// MARK: - String Extension for Text Size
+extension String {
+    func size(withAttributes attributes: [NSAttributedString.Key: Any]?) -> CGSize {
+        let size = (self as NSString).size(withAttributes: attributes)
+        return size
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct BadgeRibbon_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 30) {
+            // Basic ribbon examples
+            BadgeRibbon(position: .topRight, label: "New")
+            BadgeRibbon(position: .topLeft, label: "Hot", isRound: true)
+            BadgeRibbon(position: .bottomLeft, label: "Sale")
+            BadgeRibbon(position: .bottomRight, label: "50% OFF", isRound: true)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif
+

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-maxapi",
+  "version": "0.152.4-scale.3",
   "private": false,
   "dependencies": {
     "@momo-platform/native-max-api": "1.0.18"