@momo-kits/native-kits 0.114.2-pu.1 → 0.117.1-beta.2

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

@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.components.Text
 import vn.momo.kits.const.Typography
@@ -19,7 +20,10 @@ fun HeaderTitle(
         modifier = Modifier.then(modifier).zIndex(1f),
         text = title,
         textAlign = textAlign,
-        style = Typography.actionSBold,
+        style = Typography.actionSBold.copy(
+            fontSize = 15.sp,
+            lineHeight = 22.sp,
+        ),
         color = color,
         maxLines = 1
     )

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

@@ -11,6 +11,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
@@ -27,8 +28,8 @@ fun CheckBox(
     title: String = "",
 ) {
     var borderColor = AppTheme.current.colors.text.default
-    var backgroundColor = AppTheme.current.colors.background.surface
-    val iconSource = if (indeterminate) "minus" else "ic_checked"
+    var backgroundColor = Color.Transparent
+    val iconSource = if (indeterminate) "navigation_minus" else "ic_checked"
 
     if (checked) {
         borderColor = AppTheme.current.colors.primary
@@ -36,7 +37,7 @@ fun CheckBox(
     }
     if (disabled) {
         borderColor = AppTheme.current.colors.border.disable
-        backgroundColor = AppTheme.current.colors.background.surface
+        backgroundColor = Color.Transparent
         if (checked) {
             borderColor = AppTheme.current.colors.background.tonal
             backgroundColor = AppTheme.current.colors.background.tonal

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

@@ -20,6 +20,7 @@ import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -28,11 +29,13 @@ 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.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
-import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -151,7 +154,7 @@ fun ErrorView(errorMessage: String, errorSpacing: Boolean, hintText: String) {
 
 @Composable
 fun Input(
-    text: String = "",
+    text: MutableState<String> = remember { mutableStateOf("") },
     floatingValue: String = "",
     floatingValueColor: Color = AppTheme.current.colors.text.hint,
     floatingIcon: String = "",
@@ -178,10 +181,6 @@ fun Input(
     keyboardType: KeyboardType = KeyboardType.Text,
     modifier: Modifier = Modifier,
 ) {
-    var textFieldValueState by remember { mutableStateOf(TextFieldValue(text = text)) }
-    val textFieldValue = textFieldValueState.copy(text = text)
-    var lastTextValue by remember(text) { mutableStateOf(text) }
-
     var isFocused by remember { mutableStateOf(false) }
     var passHidden by remember { mutableStateOf(false) }
     var isBlurred = false
@@ -210,10 +209,10 @@ fun Input(
         modifier = modifier.setAutomationId(testId)
     ) {
         BasicTextField(
-            value = text,
             enabled = !disabled,
             readOnly = readOnly,
             singleLine = true,
+            value = text.value,
             textStyle = TextStyle(
                 color = textColor,
                 fontSize = 16.sp,
@@ -230,15 +229,7 @@ fun Input(
                 if (!it.isFocused && isBlurred) onBlur()
                 if (it.isFocused && !isBlurred) isBlurred = true
             },
-            onValueChange = { newValue ->
-                textFieldValueState.copy(text = newValue)
-                val stringChangedSinceLastInvocation = lastTextValue != newValue
-                lastTextValue = newValue
-
-                if (stringChangedSinceLastInvocation) {
-                    onChangeText(newValue)
-                }
-            },
+            onValueChange = onChangeText,
             decorationBox = { innerTextField ->
                 // Floating Icon
                 if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
@@ -300,7 +291,7 @@ fun Input(
                             )
                         }
                         Box(Modifier.weight(1f)) {
-                            if (textFieldValue.text.isEmpty()) {
+                            if (text.value.isEmpty()) {
                                 Text(
                                     text = placeholder,
                                     style = TextStyle(
@@ -313,7 +304,7 @@ fun Input(
                             }
                             innerTextField()
                         }
-                        if (isFocused && textFieldValue.text.isNotEmpty()) {
+                        if (isFocused && text.value.isNotEmpty()) {
                             Row {
                                 Spacer(Modifier.width(Spacing.XS))
                                 Icon(
@@ -321,10 +312,7 @@ fun Input(
                                     size = 16.dp,
                                     color = AppTheme.current.colors.text.hint,
                                     modifier = Modifier.clickable(
-                                        onClick = {
-                                            onChangeText("")
-                                            textFieldValueState = TextFieldValue(text = "")
-                                        },
+                                        onClick = { text.value = "" },
                                         interactionSource = remember { MutableInteractionSource() },
                                         indication = null
                                     )

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

@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -32,7 +33,7 @@ import vn.momo.kits.const.Typography
 
 @Composable
 fun InputDropDown(
-    text: String = "",
+    value: MutableState<String> = remember { mutableStateOf("") },
     floatingValue: String = "",
     floatingValueColor: Color = AppTheme.current.colors.text.hint,
     floatingIcon: String = "",
@@ -139,12 +140,12 @@ fun InputDropDown(
                     }
                     Box(Modifier.weight(1f)) {
                         Text(
-                            text = text.ifEmpty { placeholder },
+                            text = value.value.ifEmpty { placeholder },
                             style = TextStyle(
                                 fontSize = 16.sp,
                                 lineHeight = 24.sp
                             ),
-                            color = if (text.isEmpty()) placeholderColor else textColor
+                            color = if (value.value.isEmpty()) placeholderColor else textColor
                         )
                     }
                     RenderRightIcon(

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

@@ -18,6 +18,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -62,7 +63,7 @@ class CustomConverter : VisualTransformation {
 
 @Composable
 fun InputMoney(
-    text: String = "0",
+    text: MutableState<String> = remember { mutableStateOf("0") },
     floatingValue: String = "",
     floatingValueColor: Color = AppTheme.current.colors.text.hint,
     floatingIcon: String = "",
@@ -114,7 +115,7 @@ fun InputMoney(
         BasicTextField(
             enabled = !disabled,
             singleLine = true,
-            value = text,
+            value = text.value,
             textStyle = TextStyle(
                 color = textColor,
                 fontSize = 20.sp,
@@ -194,7 +195,7 @@ fun InputMoney(
                             )
                         }
                         Box(Modifier.weight(9f).padding(start = 0.dp)) {
-                            if (text.isEmpty()) {
+                            if (text.value.isEmpty()) {
                                 Text(
                                     text = placeholder,
                                     style = TextStyle(
@@ -208,7 +209,7 @@ fun InputMoney(
                                 innerTextField()
                             }
                         }
-                        if (isFocused && text.isNotEmpty()) {
+                        if (isFocused && text.value.isNotEmpty()) {
                             Row {
                                 Spacer(Modifier.width(Spacing.XS))
                                 Icon(
@@ -216,7 +217,7 @@ fun InputMoney(
                                     size = 16.dp,
                                     color = AppTheme.current.colors.text.hint,
                                     modifier = Modifier.clickable(
-                                        onClick = { onChangeText("") },
+                                        onClick = { text.value = "" },
                                         interactionSource = remember { MutableInteractionSource() },
                                         indication = null
                                     )

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

@@ -87,12 +87,12 @@ fun InputOTP(
     dataType: String = "number",
     modifier: Modifier = Modifier
 ) {
-    val MAX_LENGTH = 10
+    val maxLength = 10
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
 
     val handleChangeText: (String) -> Unit = { text ->
-        if (text.length <= MAX_LENGTH &&
+        if (text.length <= maxLength &&
             (dataType != "number" || !text.any { !it.isDigit() }) &&
             (text.length < value.length || value.length < text.length)
         ) {
@@ -115,7 +115,7 @@ fun InputOTP(
                 if (!it.isFocused && isBlurred) onBlur()
                 if (it.isFocused && !isBlurred) isBlurred = true
             },
-            decorationBox = { innerTextField ->
+            decorationBox = { _ ->
                 Box {
                     if (floatingValue.isNotEmpty()) {
                         Box(

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

@@ -19,6 +19,7 @@ import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -77,7 +78,7 @@ fun RenderRightIconSearch(
 }
 
 data class InputSearchProps(
-    val text: String = "",
+    val text: MutableState<String>,
     val buttonText: String = "",
     val showButtonText: Boolean = false,
     val placeholder: String = "",
@@ -105,7 +106,7 @@ data class InputSearchProps(
 @Composable
 fun InputSearch(
     inputSearchProps: InputSearchProps = InputSearchProps(
-        text = "",
+        text = remember { mutableStateOf("") },
         iconColor = AppTheme.current.colors.text.default
     ),
 ) {
@@ -126,7 +127,7 @@ fun InputSearch(
         BasicTextField(
             enabled = !inputSearchProps.disabled,
             singleLine = true,
-            value = inputSearchProps.text,
+            value = inputSearchProps.text.value,
             textStyle = TextStyle(
                 color = textColor,
                 fontSize = 14.sp,
@@ -174,7 +175,7 @@ fun InputSearch(
                                 color = AppTheme.current.colors.text.hint
                             )
                             Box(Modifier.weight(1f)) {
-                                if (inputSearchProps.text.isEmpty()) {
+                                if (inputSearchProps.text.value.isEmpty()) {
                                     Text(
                                         text = inputSearchProps.placeholder,
                                         style = TextStyle(
@@ -189,7 +190,7 @@ fun InputSearch(
                                 }
                                 innerTextField()
                             }
-                            if (inputSearchProps.clearCondition?.invoke() == true || (isFocused && inputSearchProps.text.isNotEmpty())) {
+                            if (inputSearchProps.clearCondition?.invoke() == true || (isFocused && inputSearchProps.text.value.isNotEmpty())) {
                                 Row {
                                     Spacer(Modifier.width(Spacing.XS))
                                     Icon(
@@ -198,7 +199,7 @@ fun InputSearch(
                                         color = AppTheme.current.colors.text.hint,
                                         modifier = Modifier.clickable(
                                             onClick = {
-                                                inputSearchProps.onChangeText("")
+                                                inputSearchProps.text.value = ""
                                                 inputSearchProps.onClearPress.invoke()
                                             },
                                             interactionSource = remember { MutableInteractionSource() },

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

@@ -18,6 +18,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -41,7 +42,7 @@ val DEFAULT_HEIGHT = 104.dp
 
 @Composable
 fun InputTextArea(
-    text: String = "",
+    text: MutableState<String> = remember { mutableStateOf("") },
     maxLength: Int = MAX_LENGTH,
     height: Dp = DEFAULT_HEIGHT,
     floatingValue: String = "",
@@ -91,7 +92,7 @@ fun InputTextArea(
         BasicTextField(
             enabled = !disabled,
             singleLine = false,
-            value = text,
+            value = text.value,
             textStyle = TextStyle(
                 color = textColor,
                 fontSize = 16.sp,
@@ -172,7 +173,7 @@ fun InputTextArea(
                             verticalAlignment = Alignment.Top
                         ) {
                             Box(Modifier.weight(1f)) {
-                                if (text.isEmpty()) {
+                                if (text.value.isEmpty()) {
                                     Text(
                                         text = placeholder,
                                         style = TextStyle(
@@ -185,7 +186,7 @@ fun InputTextArea(
                                 }
                                 innerTextField()
                             }
-                            if (isFocused && text.isNotEmpty()) {
+                            if (isFocused && text.value.isNotEmpty()) {
                                 Row {
                                     Spacer(Modifier.width(Spacing.XS))
                                     Icon(
@@ -193,7 +194,7 @@ fun InputTextArea(
                                         size = 16.dp,
                                         color = AppTheme.current.colors.text.hint,
                                         modifier = Modifier.clickable(
-                                            onClick = { onChangeText("") },
+                                            onClick = { text.value = "" },
                                             interactionSource = remember { MutableInteractionSource() },
                                             indication = null
                                         )
@@ -211,7 +212,7 @@ fun InputTextArea(
                             contentAlignment = Alignment.CenterEnd
                         ) {
                             Text(
-                                "${text.length}/$maxLength",
+                                "${text.value.length}/$maxLength",
                                 style = Typography.descriptionXsRegular,
                                 color = AppTheme.current.colors.text.hint
                             )

package/compose/src/commonMain/kotlin/vn/momo/kits/components/{PromotionPopup.kt → PopupPromotion.kt}

@@ -25,15 +25,22 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 
 @Composable
-fun PromotionPopup(
+fun PopupPromotion(
     source: String = "",
+    onPress: (() -> Unit) = {},
     onClose: (() -> Unit) = {},
 ) {
     Column(Modifier.semantics { testTag = "popup_notify" }) {
         if (source.isNotEmpty()) {
             Image(
                 source = source,
-                modifier = Modifier.fillMaxWidth().aspectRatio(0.72f),
+                modifier = Modifier.fillMaxWidth()
+                    .aspectRatio(0.72f)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null,
+                        onClick = onPress
+                    ),
             )
         }
         Box(

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/AutomationId.kt

@@ -1,11 +1,6 @@
 package vn.momo.kits.modifier
 
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
-import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag

package/ios/Application/Components.swift

@@ -45,13 +45,24 @@ func safeAreaTopInset() -> CGFloat {
 public struct HeaderBackground: View {
     var headerType: HeaderType = .default
     var scrollState: CGFloat
+    var isTransparent: Bool = false
+    
+    public init(
+        headerType: HeaderType = .default,
+        scrollState: CGFloat = 0,
+        isTransparent: Bool = false
+    ) {
+        self.headerType = headerType
+        self.scrollState = scrollState
+        self.isTransparent = isTransparent
+    }
     
     public var body: some View {
         
         let statusBarHeight = safeAreaTopInset()
         
         let opacity = 1 - CGFloat(scrollState) / 200
-        let backgroundColor = scrollState == 0 ? Color.clear : Colors.black01
+        let backgroundColor = isTransparent ? Color.clear : Colors.black01
         
         Group {
             if headerType == .default {
@@ -62,7 +73,9 @@ public struct HeaderBackground: View {
                         .fill(backgroundColor)
                         .frame(height: height)
                         .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
-                        .overlay(Rectangle()
+                        .overlay(
+                            isTransparent ? nil :
+                            Rectangle()
                             .fill(LinearGradient(
                                 gradient: Gradient(colors: [
                                     Color(red: 1, green: 0.8, blue: 0.87),
@@ -111,6 +124,7 @@ public struct Header: View {
     var animatedHeader: AnimatedHeader? = nil
     var scrollState: CGFloat = 0
     var inputSearchProps: InputSearchProps? = nil
+    var tintColor: Color? = nil
     
     @State private var colorFraction: CGFloat = 0
     
@@ -123,7 +137,8 @@ public struct Header: View {
         opacity: CGFloat? = nil,
         animatedHeader: AnimatedHeader? = nil,
         scrollState: CGFloat = 0,
-        inputSearchProps: InputSearchProps? = nil
+        inputSearchProps: InputSearchProps? = nil,
+        tintColor: Color? = nil
     ) {
         self.headerType = headerType
         self.titlePosition = titlePosition
@@ -134,27 +149,27 @@ public struct Header: View {
         self.animatedHeader = animatedHeader
         self.scrollState = scrollState
         self.inputSearchProps = inputSearchProps
+        self.tintColor = tintColor
     }
     
     public var body: some View {
         
-        let statusBarHeight = safeAreaTopInset()
-        let tintIconColor = Colors.black17
-        let backgroundButton = Colors.black01.opacity(0.6)
+//        let tintIconColor = Colors.black17
+        let backgroundButton = tintColor == Colors.black01 ? Color.white.opacity(0.2) : Colors.black01.opacity(0.6)
+        let borderColor: Color = tintColor == Colors.black01 ? Color.black.opacity(0.6) : Color.black.opacity(0.2)
 
         if headerType != .none {
-                VStack(spacing: 0) {
+            VStack(spacing: 0) {
                     ZStack {
                         HStack {
                             if let goBack = goBack {
                                 SwiftUI.Button(action: goBack) {
                                     Circle()
-                                        .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+                                        .stroke(borderColor, lineWidth: 0.2)
                                         .background(Circle().fill(backgroundButton))
                                         .frame(width: 28, height: 28)
                                         .overlay(
-                                            Image(systemName: "arrow.backward")
-                                                .foregroundColor(.black)
+                                            Icon(source: "arrow-back", size: 20, color: tintColor)
                                         )
                                 }
                                 
@@ -167,14 +182,11 @@ public struct Header: View {
                             }
                         
                         }
-                        .frame(height: 52)
-                        .padding(.horizontal)
-                        
-                        
+                        .padding(.horizontal, 12)
                         
                         HStack {
                             if titlePosition == .left, goBack != nil {
-                                Spacer().frame(width: 40)
+                                Spacer().frame(width: 38)
                             }
                             
                             if inputSearchProps != nil {
@@ -201,20 +213,22 @@ public struct Header: View {
                                 }
                             } else {
                                 Text(title)
-                                    .font(.headline)
-                                    .foregroundColor(tintIconColor)
-                                    .frame(maxWidth: titlePosition == .center ? .infinity : nil, alignment: titlePosition == .center ? .center : .leading)
+                                    .font(Font.system(size: 17).weight(.bold))          .lineSpacing(22)
+                                    .foregroundColor(Colors.black17)
+                                    .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
+                                    .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)
+                                    .lineLimit(1)
+                                
                             }
                             Spacer()
                         }
-                        .frame(height: 52)
                         .padding(.horizontal)
                     }
                     .background(Color.clear)
                 }
-            }
+                .frame(height: 52)
         }
-    
+    }
 }
 
 

package/ios/Application/Screen.swift

@@ -9,6 +9,8 @@ import SwiftUI
 
 public struct Screen<Content: View>: View {
     var backgroundColor: Color?
+    var headerTransparent: Bool = false
+    var tintColor: Color? = Colors.black17
     var isBack: Bool
     var headerType: HeaderType
     var verticalAlignment: VerticalAlignment
@@ -29,12 +31,14 @@ public struct Screen<Content: View>: View {
 
     public init(
         backgroundColor: Color? = nil,
+        headerTransparent: Bool = false,
+        tintColor: Color = Colors.black17,
         isBack: Bool = true,
         headerType: HeaderType = .default,
         verticalAlignment: VerticalAlignment = .top,
         horizontalAlignment: HorizontalAlignment = .leading,
         title: String = "Stack",
-        titlePosition: TitlePosition = .center,
+        titlePosition: TitlePosition = .left,
         goBack: (() -> Void)? = nil,
         scrollable: Bool = true,
         onContentLayout: ((CGRect) -> Void)? = nil,
@@ -48,6 +52,8 @@ public struct Screen<Content: View>: View {
         @ViewBuilder content: @escaping () -> Content
     ) {
         self.backgroundColor = backgroundColor
+        self.headerTransparent = headerTransparent
+        self.tintColor = tintColor
         self.isBack = isBack
         self.headerType = headerType
         self.verticalAlignment = verticalAlignment
@@ -71,23 +77,25 @@ public struct Screen<Content: View>: View {
 
     public var body: some View {
         GeometryReader { geometry in
-            let safeAreaInsets = geometry.safeAreaInsets
-            let statusBarHeight = safeAreaInsets.top
+            let topInset = geometry.safeAreaInsets.top
             let keyboardHeight: CGFloat = 0
             let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
+            let height = geometry.size.height
+            let bottomInset = geometry.safeAreaInsets.bottom
+            let screenHeight = height + topInset + bottomInset
 
             ZStack {
                 (backgroundColor ?? Color.white).edgesIgnoringSafeArea(.all)
 
                 VStack(spacing: 0) {
-                    ZStack {
-                        if animatedHeader == nil {
-                            HeaderBackground(headerType: headerType, scrollState: scrollOffset)
-                        } else {
-                            Color.white.opacity(Double(min(scrollOffset / 114, 1)))
-                                .overlay(HeaderBackground(headerType: headerType, scrollState: scrollOffset))
-
-                        }
+                    ZStack(alignment: .top) {
+//                        if animatedHeader == nil {
+//                            HeaderBackground(headerType: headerType, scrollState: scrollOffset)
+//                        } else {
+//                            Color.white.opacity(Double(min(scrollOffset / 114, 1)))
+//                                .overlay(HeaderBackground(headerType: headerType, scrollState: scrollOffset))
+//
+//                        }
 
                         Header(
                             headerType: headerType,
@@ -98,14 +106,19 @@ public struct Screen<Content: View>: View {
                             opacity: min(scrollOffset / 114, 1),
                             animatedHeader: animatedHeader,
                             scrollState: scrollOffset,
-                            inputSearchProps: inputSearchProps
-                        ).padding(.bottom, headerType == .extended ? 0 : -safeAreaTopInset())
-                    }.padding(.top, -safeAreaTopInset())
+                            inputSearchProps: inputSearchProps,
+                            tintColor: tintColor
+                        )
+                        .background(HeaderBackground(headerType: headerType, scrollState: scrollOffset, isTransparent: headerTransparent).edgesIgnoringSafeArea(.top))
+                        .offset(y: topInset)
+
+                    }
+                    .offset(y: -topInset)
 
 
                     VStack(alignment: horizontalAlignment, spacing: 0) {
                         if animatedHeader != nil {
-                            Spacer().frame(height: statusBarHeight + 52 + layoutOffset)
+                            Spacer().frame(height: topInset + 52 + layoutOffset)
                         }
 
                         if scrollable {

package/ios/Checkbox/Checkbox.swift

@@ -75,7 +75,7 @@ public struct Checkbox: View{
         } else if checked {
             return Colors.primary
         } else {
-            return Colors.black01
+            return Color.clear
         }
     }
 }

package/ios/Popup/PopupDisplay.swift

@@ -20,7 +20,7 @@ public enum PopupButtonType {
 public struct PopupDisplay: View {
     // MARK: Lifecycle
 
-    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}) {
+    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "") {
         self._isPresented = isPresented
         self.title = title
         self.description = description
@@ -32,6 +32,7 @@ public struct PopupDisplay: View {
         self.onClose = onClose
         self.closeButtonTitle = closeButtonTitle
         self.actionButtonTitle = actionButtonTitle
+        self.errorCode = errorCode
     }
 
     // MARK: Public
@@ -39,7 +40,7 @@ public struct PopupDisplay: View {
     public var body: some View {
         VStack(spacing: 12) {
             ZStack(alignment: .topTrailing) {
-                SwiftUI.Button(action: onPressClose) {
+                SwiftUI.Button(action: onClose) {
                     Image(systemName: "xmark.circle.fill")
                         .resizable()
                         .frame(width: 22, height: 22)
@@ -51,20 +52,20 @@ public struct PopupDisplay: View {
                     .zIndex(1)
                     .accessibility(identifier: "ic_popup_close")
 
-            VStack {
-                if(!url.isEmpty) {
-                    WebImage(url: URL(string: url), isAnimating: .constant(true))
-                        .resizable()
-                        .placeholder {
-                            Rectangle()
-                                .fill(Color.gray.opacity(0.3))
-                                .frame(maxWidth: .infinity, maxHeight: 184)
-                        }
-                        .scaledToFill()
-                        .frame(maxWidth: .infinity)
-                        .clipShape(RoundedCorner(radius: 8, corners: [.topLeft, .topRight]))
-                        .aspectRatio(2, contentMode: .fit)
-                }
+                VStack {
+                    if(!url.isEmpty) {
+                        WebImage(url: URL(string: url), isAnimating: .constant(true))
+                            .resizable()
+                            .placeholder {
+                                Rectangle()
+                                    .fill(Color.gray.opacity(0.3))
+                                    .frame(maxWidth: .infinity, maxHeight: 184)
+                            }
+                            .scaledToFill()
+                            .frame(maxWidth: .infinity)
+                            .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
+                            .aspectRatio(2, contentMode: .fit)
+                    }
                     VStack(alignment: .leading) {
                         Text(title)
                             .foregroundColor(.black)
@@ -79,10 +80,18 @@ public struct PopupDisplay: View {
                             .font(.paragraph)
                             .opacity(0.6)
                             .multilineTextAlignment(.leading)
-                            .padding(.bottom, 20)
+                            .padding(.bottom, 8)
+
+                        if(!errorCode.isEmpty) {
+                            Text(errorCode)
+                                .foregroundColor(Colors.black12)
+                                .font(.description_xs_regular)
+                                .lineLimit(1)
+                        }
                     }
                     .frame(maxWidth: .infinity, alignment: .leading)
                     .padding(.horizontal, 24)
+                    .padding(.bottom, 24)
 
                     if buttonDirection == .row {
                         if buttonType == .text {
@@ -120,7 +129,8 @@ public struct PopupDisplay: View {
     var onClose: () -> Void
     var actionButtonTitle: String
     var closeButtonTitle: String
-    
+    var errorCode: String
+
     var RowTextButtons: some View {
         HStack {
             SwiftUI.Button(action: onPressCloseButton) {
@@ -181,9 +191,4 @@ public struct PopupDisplay: View {
         .padding(.bottom, 24)
     }
 
-
-    func onPressClose(){
-        isPresented = false
-        onClose()
-    }
 }

package/ios/Popup/PopupPromotion.swift

@@ -1,52 +1,66 @@
-import SDWebImageSwiftUI
 import SwiftUI
+import SDWebImageSwiftUI
 
 public struct PopupPromotion: View {
-    // MARK: Lifecycle
-
-    public init(isPresented: Binding<Bool>, url: String = "", buttonTitle: String = "", onPressAction: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}) {
-        self._isPresented = isPresented
-        self.onPressAction = onPressAction
-        self.buttonTitle = buttonTitle
-        self.onClose = onClose
-        self.url = url
-    }
+    var imageUrl: String
+    var onIconClose: (() -> Void)?
+    var onAction: (() -> Void)?
 
-    // MARK: Public
+
+    public init(
+        imageUrl: String,
+        onIconClose: (() -> Void)? = nil,
+        onAction: (() -> Void)? = nil
+    ) {
+        self.imageUrl = imageUrl
+        self.onIconClose = onIconClose
+        self.onAction = onAction
+    }
 
     public var body: some View {
-        VStack(spacing: 12) {
-            ZStack(alignment: .bottom) {
-                WebImage(url: URL(string: url), isAnimating: .constant(true))
-                    .resizable()
-                    .placeholder {
-                        Circle().foregroundColor(.gray)
-                    }
-                    .scaledToFill()
-                    .frame(maxWidth: .infinity, maxHeight: .infinity)
-                    .cornerRadius(8)
-
-                Button(title: buttonTitle, action: onPressAction)
-                    .padding(.horizontal, 24)
-                    .padding(.bottom, 24)
-            }.clipped()
+        VStack(spacing: 8) {
+            WebImage(url: URL(string: imageUrl)!)
+                .resizable()
+                .placeholder {
+                    Color.gray
+                        .aspectRatio(0.72, contentMode: .fit)
+                        .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                        .clipped()
+                }
+                .aspectRatio(0.72, contentMode: .fit)
+                .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                .clipped()
+                .onTapGesture {
+                    onAction?()
+                }
+
+            buildCloseIcon()
         }
-        .frame(maxWidth: .infinity, maxHeight: 400)
-        .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
-        .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
-        .padding(.horizontal, 40)
+        .accessibility(identifier: "popup_promotion")
     }
 
-    // MARK: Internal
+    @ViewBuilder
+    private func buildCloseIcon() -> some View {
+        HStack {
+            Spacer()
+            SwiftUI.Button(action: {
+                onIconClose?()
+            }) {
+                ZStack {
+                    Circle()
+                        .strokeBorder(Colors.black01, lineWidth: 2)
+                        .background(Circle().fill(Colors.black17))
+                        .frame(width: 20, height: 20)
 
-    @Binding var isPresented: Bool
-    var onPressAction: () -> Void
-    var onClose: () -> Void
-    var buttonTitle: String
-    var url: String
-
-    func onPressClose(){
-        isPresented = false
-        onClose()
+                    Icon(source: "navigation_close", size: 14, color: Colors.black01)
+                }
+            }
+            .padding(8)
+            Spacer()
+        }
     }
+
 }
+
+
+

package/local.properties

@@ -4,5 +4,5 @@
 # Location of the SDK. This is only used by Gradle.
 # For customization when using a Version Control System, please read the
 # header note.
-#Thu Jan 09 10:43:10 ICT 2025
-sdk.dir=/Users/sophia/Library/Android/sdk
+#Wed Aug 21 14:20:12 ICT 2024
+sdk.dir=/Users/huynhdung/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.114.2-pu.1",
+  "version": "0.117.1-beta.2",
   "private": false,
   "dependencies": {},
   "devDependencies": {},