@momo-kits/native-kits 0.112.1-beta.9 → 0.113.1-beta.0

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

@@ -242,12 +242,10 @@ fun Header(
                     }
                 }
 
-                if (inputSearchProps == null) {
-                    Box(Modifier.graphicsLayer {
-                        alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
-                    }) {
-                        headerRight?.invoke()
-                    }
+                Box(Modifier.graphicsLayer {
+                    alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                }) {
+                    headerRight?.invoke()
                 }
             }
 

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

@@ -22,44 +22,49 @@ import vn.momo.kits.const.defaultTheme
 import vn.momo.kits.platform.disableOverscroll
 import vn.momo.kits.platform.getStatusBarHeight
 
+val PlatformApi = staticCompositionLocalOf<Any?> { null }
+
 interface ComposeApi {
-    fun request(funcName: String, params: Any?): String
-    fun request(funcName: String, params: Any?, onResponse: ((String) -> Unit)?): String
-    fun requestCallback(funcName: String, params: Any?, onResponse: ((String) -> Unit)?)
+    fun request(funcName: String, params: String?): String
+    fun request(funcName: String, params: String?, onResponse: ((String) -> Unit)?): String
+    fun requestCallback(funcName: String, params: String?, onResponse: ((String) -> Unit)?)
     fun removeCallback(id: String)
 }
 
+val AppNavigator = staticCompositionLocalOf<Navigator> {
+    error("no navigator provided!")
+}
+
 class Navigator {
-    fun push(content: @Composable () -> Unit) {}
-    fun present(content: @Composable () -> Unit) {}
-    fun reset(content: @Composable () -> Unit) {}
-    fun pop() {}
-    fun replace(content: @Composable () -> Unit) {}
-    fun popToTop() {}
+    fun push(content: @Composable () -> Unit) {
+    }
+
+    fun present(content: @Composable () -> Unit) {
+
+    }
+
+    fun reset(content: @Composable () -> Unit) {
+
+    }
+
+    fun pop() {
+    }
+
+    fun replace(content: @Composable () -> Unit) {
+    }
+
+    fun popToTop() {
+    }
+
     fun showModal(
         onClose: () -> Unit = {},
         canBackgroundClose: Boolean = true,
         content: @Composable () -> Unit,
-    ) {}
-    fun showBottomSheet(content: @Composable () -> Unit) {}
-}
-
-data class MiniAppContext(
-    val icon: String = "",
-    val name: String = "",
-    val appId: String = "",
-    val code: String = "",
-    val description: String? = "",
-)
-
-val PlatformApi = staticCompositionLocalOf<Any?> { null }
-
-val AppNavigator = staticCompositionLocalOf<Navigator> {
-    error("no navigator provided!")
-}
+    ) {
+    }
 
-val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
-    error("no context provided!")
+    fun showBottomSheet(content: @Composable () -> Unit) {
+    }
 }
 
 @Composable
@@ -67,8 +72,7 @@ fun ApplicationContainer(
     theme: Theme = defaultTheme,
     composeApi: ComposeApi? = null,
     statusBarHeight: Dp? = AppStatusBar.current ?: getStatusBarHeight(),
-    applicationContext: MiniAppContext? = null,
-    content: @Composable () -> Unit,
+    content: @Composable () -> Unit
 ) {
     var appTheme by remember { mutableStateOf(theme) }
     val coroutineScope = rememberCoroutineScope()
@@ -93,7 +97,8 @@ fun ApplicationContainer(
                     }
                 }
             }
-        } catch (e: Exception) {
+        }
+        catch (e: Exception) {
             print("@@ == NavigationContainer fetch config error $e")
         }
     }
@@ -104,7 +109,6 @@ fun ApplicationContainer(
         PlatformApi provides composeApi,
         AppNavigator provides Navigator(),
         AppStatusBar provides statusBarHeight,
-        ApplicationContext provides applicationContext,
     ) {
         content()
     }

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

@@ -62,7 +62,7 @@ fun Screen(
     onContentLayout: ((LayoutCoordinates) -> Unit)? = null,
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
-    headerRight: @Composable (() -> Unit)? = { HeaderRight() },
+    headerRight: @Composable (() -> Unit)? = null,
     fabProps: FabProps? = null,
     animatedHeader: AnimatedHeader? = null,
     layoutOffset: Dp = 56.dp,

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

@@ -17,9 +17,9 @@ enum class DotSize(val size: Int) {
 }
 
 @Composable
-fun BadgeDot(size: DotSize = DotSize.Large, modifier: Modifier = Modifier) {
+fun BadgeDot(size: DotSize = DotSize.Large) {
     Box(
-        modifier = modifier
+        modifier = Modifier
             .size(size.size.dp)
             .border(width = 1.dp, color = Colors.black_01, shape = RoundedCornerShape(Radius.S))
             .background(color = Colors.red_03, shape = RoundedCornerShape(Radius.S))

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

@@ -22,10 +22,10 @@ fun Icon(
     color: Color? = AppTheme.current.colors.text.default,
     modifier: Modifier = Modifier,
 ) {
-    val icon = when {
-        source.startsWith("data:") -> source
-        source.contains("https") -> source
-        else -> Icons[source] ?: ""
+    val icon = if (source.contains("https")) {
+        source
+    } else {
+        Icons[source] ?: ""
     }
     Box(modifier = modifier.size(size).semantics {contentDescription = "img|$icon"}) {
         AsyncImage(

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

@@ -75,6 +75,7 @@ fun OTPCaret() {
 
 @Composable
 fun InputOTP(
+    value: String = "",
     length: Int? = null,
     errorMessage: String = "",
     errorSpacing: Boolean = false,
@@ -85,9 +86,9 @@ fun InputOTP(
     onBlur: () -> Unit = {},
     dataType: String = "number",
     accessibilityLabel: String? = null,
+    modifier: Modifier = Modifier
 ) {
     val MAX_LENGTH = 10
-    var value by remember { mutableStateOf("") }
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
 
@@ -96,7 +97,6 @@ fun InputOTP(
             (dataType != "number" || !text.any { !it.isDigit() }) &&
             (text.length < value.length || value.length < text.length)
         ) {
-            value = text
             onChangeText(text)
         }
     }
@@ -108,7 +108,7 @@ fun InputOTP(
             onValueChange = handleChangeText,
             singleLine = true,
             keyboardOptions = KeyboardOptions.Default.copy(keyboardType = if (dataType == "number") KeyboardType.Number else KeyboardType.Ascii),
-            modifier = Modifier.height(56.dp).onFocusChanged {
+            modifier = modifier.height(56.dp).onFocusChanged {
                 isFocused = it.isFocused
                 if (it.isFocused) {
                     onFocus()

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

@@ -39,15 +39,15 @@ fun getFont(font: String): FontFamily {
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
     val key = "$fontFamily-${fontWeight?.weight}"
     val fontMap = mapOf(
-        "SFProText-100" to "sfprotext_thin.ttf",
-        "SFProText-200" to "sfprotext_ultralight.ttf",
+        "SFProText-100" to "sfprotext_thin.otf",
+        "SFProText-200" to "sfprotext_ultralight.otf",
         "SFProText-300" to "sfprotext_light.ttf",
         "SFProText-400" to "sfprotext_regular.ttf",
         "SFProText-500" to "sfprotext_medium.ttf",
-        "SFProText-600" to "sfprotext_medium.ttf",
-        "SFProText-700" to "sfprotext_semibold.ttf",
-        "SFProText-800" to "sfprotext_bold.ttf",
-        "SFProText-900" to "sfprotext_heavy.ttf",
+        "SFProText-600" to "sfprotext_semibold.ttf",
+        "SFProText-700" to "sfprotext_bold.ttf",
+        "SFProText-800" to "sfprotext_heavy.ttf",
+        "SFProText-900" to "sfprotext_black.otf",
 
         "MoMoSignature-100" to "momosignature.otf",
         "MoMoSignature-200" to "momosignature.otf",

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Icons.kt

@@ -1318,10 +1318,5 @@ val Icons = mapOf(
     "ic_checked" to "https://img.mservice.com.vn/app/img/kits/checked_ic.png",
     "ic_minus" to "https://img.mservice.com.vn/app/img/kits/minus.png",
     "ic_navigation" to "https://static.momocdn.net/app/img/kits/ic_navigation.png",
-    "ic_money_bag" to "https://static.momocdn.net/app/img/kits/ic_money_bag.png",
-    "ic_support" to "https://static.momocdn.net/app/img/kits/ic_support.png",
-    "navigation_more_icon" to "https://static.momocdn.net/app/img/kits/navigation_more_icon.png",
-    "help_center" to "https://static.momocdn.net/app/img/kits/help-center.png",
-    "pin_star" to "https://static.momocdn.net/app/img/kits/pin_star.png",
-    "pin_star_checked" to "https://static.momocdn.net/app/img/kits/pin_star_checked.png"
+    "ic_money_bag" to "https://static.momocdn.net/app/img/kits/ic_money_bag.png"
 )

package/ios/Application/Components.swift

@@ -0,0 +1,223 @@
+//
+//  Components.swift
+//  Pods
+//
+//  Created by sophia on 24/1/25.
+//
+
+import SwiftUI
+
+public enum TitlePosition {
+    case left, center
+}
+
+public enum HeaderType {
+    case `default`, extended, none
+}
+
+
+public struct AnimatedHeader {
+    public var type: HeaderType = .default
+    public var composable: (_ scrollState: Int) -> AnyView = { _ in AnyView(EmptyView()) }
+    
+    public init(
+        type: HeaderType = .default,
+        composable: @escaping (_ scrollState: Int) -> AnyView = { _ in AnyView(EmptyView()) }
+    ) {
+        self.type = type
+        self.composable = composable
+    }
+}
+
+func safeAreaTopInset() -> CGFloat {
+    if #available(iOS 15.0, *) {
+        return UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.top }
+            .first ?? 0
+    } else {
+        return UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.windows.first?.safeAreaInsets.top }
+            .first ?? 0
+    }
+}
+
+
+public struct HeaderBackground: View {
+    var headerType: HeaderType = .default
+    var scrollState: CGFloat
+    
+    public var body: some View {
+        
+        let statusBarHeight = safeAreaTopInset()
+        
+        let opacity = 1 - CGFloat(scrollState) / 200
+        let backgroundColor = scrollState == 0 ? Color.clear : Colors.black01
+        
+        Group {
+            if headerType == .default {
+                let height = statusBarHeight + 52
+                ZStack {
+                    
+                    Rectangle()
+                        .fill(backgroundColor)
+                        .frame(height: height)
+                        .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
+                        .overlay(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))
+                        .overlay(Rectangle()
+                            .fill(Colors.black04)
+                            .frame(height: 1)
+                            .frame(maxWidth: .infinity)
+                            .alignmentGuide(.bottom) { _ in 0 }, alignment: .bottom
+                        )
+                }
+                .frame(maxWidth: .infinity)
+                
+            } else if headerType == .extended {
+                ZStack {
+                    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)
+                            ]),
+                            startPoint: .top,
+                            endPoint: .bottom))
+                        .opacity(opacity)
+                        .frame(height: 154)
+                    
+                }
+            }
+        }
+    }
+    
+}
+
+public struct Header: View {
+    var headerType: HeaderType = .default
+    var titlePosition: TitlePosition
+    var title: String
+    var headerRight: (() -> AnyView)?
+    var goBack: (() -> Void)?
+    var opacity: CGFloat? = nil
+    var animatedHeader: AnimatedHeader? = nil
+    var scrollState: CGFloat = 0
+    var inputSearchProps: InputSearchProps? = nil
+    
+    @State private var colorFraction: CGFloat = 0
+    
+    public init(
+        headerType: HeaderType = .default,
+        titlePosition: TitlePosition,
+        title: String,
+        headerRight: (() -> AnyView)? = nil,
+        goBack: (() -> Void)? = nil,
+        opacity: CGFloat? = nil,
+        animatedHeader: AnimatedHeader? = nil,
+        scrollState: CGFloat = 0,
+        inputSearchProps: InputSearchProps? = nil
+    ) {
+        self.headerType = headerType
+        self.titlePosition = titlePosition
+        self.title = title
+        self.headerRight = headerRight
+        self.goBack = goBack
+        self.opacity = opacity
+        self.animatedHeader = animatedHeader
+        self.scrollState = scrollState
+        self.inputSearchProps = inputSearchProps
+    }
+    
+    public var body: some View {
+        
+        let statusBarHeight = safeAreaTopInset()
+        let tintIconColor = Colors.black17
+        let backgroundButton = Colors.black01.opacity(0.6)
+
+        if headerType != .none {
+                VStack(spacing: 0) {
+                    ZStack {
+                        HStack {
+                            if let goBack = goBack {
+                                SwiftUI.Button(action: goBack) {
+                                    Circle()
+                                        .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+                                        .background(Circle().fill(backgroundButton))
+                                        .frame(width: 28, height: 28)
+                                        .overlay(
+                                            Image(systemName: "arrow.backward")
+                                                .foregroundColor(.black)
+                                        )
+                                }
+                                
+                            }
+                            
+                            Spacer() // Pushes headerRight to the right
+                            
+                            if let headerRight = headerRight {
+                                headerRight()
+                            }
+                        }
+                        .frame(height: 52)
+                        .padding(.horizontal)
+                        
+                        
+                        
+                        HStack {
+                            if titlePosition == .left, goBack != nil {
+                                Spacer().frame(width: 40)
+                            }
+                            
+                            if inputSearchProps != nil {
+                                if let inputProps = inputSearchProps {
+                                    InputSearch(
+                                        text: inputProps.$text,
+                                        buttonText: inputProps.buttonText,
+                                        showButtonText: inputProps.showButtonText,
+                                        showBorder: inputProps.showBorder,
+                                        placeholder: inputProps.placeholder,
+                                        onChangeText: inputProps.onChangeText,
+                                        onPressButtonText: inputProps.onPressButtonText,
+                                        error: inputProps.error,
+                                        disabled: inputProps.disabled,
+                                        icon: inputProps.icon,
+                                        iconColor: inputProps.iconColor,
+                                        onRightIconPressed: inputProps.onRightIconPressed,
+                                        onFocus: inputProps.onFocus,
+                                        onBlur: inputProps.onBlur,
+                                        loading: inputProps.loading,
+                                        fontWeight: inputProps.fontWeight,
+                                        keyboardType: inputProps.keyboardType
+                                    )
+                                }
+                            } else {
+                                Text(title)
+                                    .font(.headline)
+                                    .foregroundColor(tintIconColor)
+                                    .frame(maxWidth: titlePosition == .center ? .infinity : nil, alignment: titlePosition == .center ? .center : .leading)
+                            }
+                            
+                            Spacer()
+                        }
+                        .frame(height: 52)
+                        .padding(.horizontal)
+                        
+                    }
+                    .background(Color.clear)
+                }
+            }
+        }
+    
+}
+
+
+
+

package/ios/Application/FloatingButton.swift

@@ -0,0 +1,148 @@
+//
+//  FloatingButton.swift
+//  Pods
+//
+//  Created by sophia on 6/2/25.
+//
+
+import SwiftUI
+import Combine
+
+public enum FABSize {
+    case small
+    case `default`
+}
+
+public enum FABPosition {
+    case end
+    case center
+}
+
+public struct FabProps {
+    let icon: String
+    let iconColor: Color?
+    let label: String?
+    let onClick: () -> Void
+    let size: FABSize
+    let bottom: CGFloat?
+    let scrollOffset: CGFloat?
+    let position: FABPosition?
+    
+    public init(
+            icon: String,
+            iconColor: Color? = nil,
+            label: String? = nil,
+            onClick: @escaping () -> Void,
+            size: FABSize = .default,
+            bottom: CGFloat? = nil,
+            scrollOffset: CGFloat? = nil,
+            position: FABPosition? = .end
+        ) {
+            self.icon = icon
+            self.iconColor = iconColor
+            self.label = label
+            self.onClick = onClick
+            self.size = size
+            self.bottom = bottom
+            self.scrollOffset = scrollOffset
+            self.position = position
+        }
+}
+
+public struct FloatingButton: View {
+    @State private var lastScrollOffset: CGFloat = 0
+    @State private var isExpanded: Bool = false
+    let scrollOffset: CGFloat
+    let bottomPadding: CGFloat
+    let onClick: () -> Void
+    let containerColor: Color
+    let contentColor: Color
+    let icon: String
+    let iconColor: Color?
+    let text: String?
+    let size: FABSize
+    let position: FABPosition
+    let keyboardOffset: CGFloat
+    
+    public init(
+            scrollOffset: CGFloat = 0,
+            bottomPadding: CGFloat = 0,
+            onClick: @escaping () -> Void,
+            containerColor: Color = .blue,
+            contentColor: Color = .white,
+            icon: String,
+            iconColor: Color? = nil,
+            text: String? = nil,
+            size: FABSize = .default,
+            position: FABPosition = .end,
+            keyboardOffset: CGFloat = 0
+        ) {
+            self.scrollOffset = scrollOffset
+            self.bottomPadding = bottomPadding
+            self.onClick = onClick
+            self.containerColor = containerColor
+            self.contentColor = contentColor
+            self.icon = icon
+            self.iconColor = iconColor
+            self.text = text
+            self.size = size
+            self.position = position
+            self.keyboardOffset = keyboardOffset
+        }
+
+    public var body: some View {
+        VStack {
+            Spacer()
+            HStack {
+                if position == .center {
+                    Spacer()
+                }
+                FloatingButtonContent()
+                    .padding(.trailing, position == .end ? 12 : 0)
+                    .padding(.bottom, bottomPadding)
+                    .offset(y: -keyboardOffset)
+                if position == .end {
+                    Spacer()
+                }
+            }
+        }
+        .onReceive(Just(scrollOffset)) { newValue in
+            withAnimation(.easeInOut(duration: 0.3)) {
+                isExpanded = newValue > lastScrollOffset
+                lastScrollOffset = newValue
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func FloatingButtonContent() -> some View {
+        SwiftUI.Button(action: onClick) {
+            HStack {
+                Image(systemName: icon)
+                    .foregroundColor(iconColor ?? .white)
+                    .font(size == .small ? .system(size: 12) : .system(size: 24))
+
+                if isExpanded, let text = text {
+                    Text(text)
+                        .foregroundColor(.white)
+                        .transition(.asymmetric(insertion: expandAnimation, removal: collapseAnimation))
+                }
+            }
+            .padding(.horizontal, isExpanded ? 12 : 0)
+            .frame(width: isExpanded ? 80 : (size == .small ? 36 : 48), height: size == .small ? 36 : 48)
+            .background(containerColor)
+            .cornerRadius(24)
+            .shadow(radius: 4)
+        }
+    }
+
+    private var expandAnimation: AnyTransition {
+        AnyTransition.opacity.animation(.easeIn(duration: 0.2))
+            .combined(with: .move(edge: .leading))
+    }
+
+    private var collapseAnimation: AnyTransition {
+        AnyTransition.opacity.animation(.easeOut(duration: 0.5))
+            .combined(with: .move(edge: .trailing))
+    }
+}

package/ios/Application/Screen.swift

@@ -0,0 +1,175 @@
+//
+//  Screen.swift
+//  Pods
+//
+//  Created by sophia on 5/2/25.
+//
+
+import SwiftUI
+
+public struct Screen<Content: View>: View {
+    var backgroundColor: Color?
+    var isBack: Bool
+    var headerType: HeaderType
+    var verticalAlignment: VerticalAlignment
+    var horizontalAlignment: HorizontalAlignment
+    var title: String
+    var titlePosition: TitlePosition
+    var goBack: (() -> Void)?
+    var scrollable: Bool
+    var onContentLayout: ((CGRect) -> Void)?
+    var useAvoidKeyboard: Bool
+    var footer: (() -> AnyView)?
+    var headerRight: (() -> AnyView)?
+    var animatedHeader: AnimatedHeader? = nil
+    var layoutOffset: CGFloat
+    var inputSearchProps: InputSearchProps? = nil
+    var fabProps: FabProps? = nil
+    var content: () -> Content
+    
+    public init(
+        backgroundColor: Color? = nil,
+        isBack: Bool = true,
+        headerType: HeaderType = .default,
+        verticalAlignment: VerticalAlignment = .top,
+        horizontalAlignment: HorizontalAlignment = .leading,
+        title: String = "Stack",
+        titlePosition: TitlePosition = .center,
+        goBack: (() -> Void)? = nil,
+        scrollable: Bool = true,
+        onContentLayout: ((CGRect) -> Void)? = nil,
+        useAvoidKeyboard: Bool = true,
+        footer: (() -> AnyView)? = nil,
+        headerRight: (() -> AnyView)? = nil,
+        animatedHeader: AnimatedHeader? = nil,
+        layoutOffset: CGFloat = 56,
+        inputSearchProps: InputSearchProps? = nil,
+        fabProps: FabProps? = nil,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.backgroundColor = backgroundColor
+        self.isBack = isBack
+        self.headerType = headerType
+        self.verticalAlignment = verticalAlignment
+        self.horizontalAlignment = horizontalAlignment
+        self.title = title
+        self.titlePosition = titlePosition
+        self.goBack = goBack
+        self.scrollable = scrollable
+        self.onContentLayout = onContentLayout
+        self.useAvoidKeyboard = useAvoidKeyboard
+        self.footer = footer
+        self.headerRight = headerRight
+        self.animatedHeader = animatedHeader
+        self.layoutOffset = layoutOffset
+        self.inputSearchProps = inputSearchProps
+        self.fabProps = fabProps
+        self.content = content
+    }
+    
+    @State private var scrollOffset: CGFloat = 0
+    
+    public var body: some View {
+        GeometryReader { geometry in
+            let safeAreaInsets = geometry.safeAreaInsets
+            let statusBarHeight = safeAreaInsets.top
+            let keyboardHeight: CGFloat = 0
+            let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
+            
+            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))
+                            
+                        }
+                        
+                        Header(
+                            headerType: headerType,
+                            titlePosition: titlePosition,
+                            title: title,
+                            headerRight: headerRight,
+                            goBack: goBack,
+                            opacity: min(scrollOffset / 114, 1),
+                            animatedHeader: animatedHeader,
+                            scrollState: scrollOffset,
+                            inputSearchProps: inputSearchProps
+                        ).padding(.bottom, headerType == .extended ? 0 : -safeAreaTopInset())
+                    }.padding(.top, -safeAreaTopInset())
+                    
+                    
+                    VStack(alignment: horizontalAlignment, spacing: 0) {
+                        if animatedHeader != nil {
+                            Spacer().frame(height: statusBarHeight + 52 + layoutOffset)
+                        }
+                        
+                        if scrollable {
+                            ScrollView(.vertical, showsIndicators: false) {
+                                VStack {
+                                    content()
+                                }
+                                .background(GeometryReader { geo -> Color in
+                                    DispatchQueue.main.async {
+                                        self.scrollOffset = -geo.frame(in: .global).origin.y
+                                    }
+                                    return Color.clear
+                                })
+                            }
+                        } else {
+                            content()
+                        }
+                    }
+                    .padding(.bottom, keyboardSize)
+                    
+                    
+                    if let footerView = footer?() {
+                        ZStack(alignment: .top) {
+                            Rectangle()
+                                .fill(Colors.black20)
+                                .frame(height: 4)
+                                .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
+                            
+                            Footer(footerView: footerView, keyboardSize: keyboardSize)
+                        }
+                    }
+                    
+                    if let fabProps = fabProps {
+                        FloatingButton(
+                            scrollOffset: scrollOffset,
+                            bottomPadding: fabProps.bottom ?? 16,
+                            onClick: fabProps.onClick,
+                            containerColor: .blue,
+                            contentColor: .white,
+                            icon: fabProps.icon,
+                            iconColor: fabProps.iconColor,
+                            text: fabProps.label,
+                            size: fabProps.size,
+                            position: fabProps.position ?? .end,
+                            keyboardOffset: keyboardSize
+                        )
+                    }
+                }
+                
+            }
+        }
+    }
+}
+
+struct Footer: View {
+    var footerView: AnyView
+    var keyboardSize: CGFloat
+    
+    var body: some View {
+        VStack {
+            footerView
+        }
+        .padding(.bottom, keyboardSize)
+        .background(Colors.black01)
+    }
+}
+

package/ios/Input/InputSearch.swift

@@ -37,6 +37,62 @@ struct RenderRightIconSearch: View {
     }
 }
 
+public struct InputSearchProps {
+    @Binding var text: String
+    var buttonText: String = ""
+    var showButtonText: Bool = false
+    var showBorder: Bool = true
+    var placeholder: String = ""
+    var onChangeText: (String) -> Void = { _ in }
+    var onPressButtonText: () -> Void = {}
+    var error: String = ""
+    var disabled: Bool = false
+    var icon: String = ""
+    var iconColor: Color = Colors.text
+    var onRightIconPressed: () -> Void = {}
+    var onFocus: () -> Void = {}
+    var onBlur: () -> Void = {}
+    var loading: Bool = false
+    var fontWeight: Font.Weight = .regular
+    var keyboardType: UIKeyboardType = .default
+    
+    public init(text: Binding<String>,
+                buttonText: String = "",
+                showButtonText: Bool = false,
+                showBorder: Bool = true,
+                placeholder: String = "",
+                onChangeText: @escaping (String) -> Void = { _ in },
+                onPressButtonText: @escaping () -> Void = {},
+                error: String = "",
+                disabled: Bool = false,
+                icon: String = "",
+                iconColor: Color = Colors.text,
+                onRightIconPressed: @escaping () -> Void = {},
+                onFocus: @escaping () -> Void = {},
+                onBlur: @escaping () -> Void = {},
+                loading: Bool = false,
+                fontWeight: Font.Weight = .regular,
+                keyboardType: UIKeyboardType = .default) {
+        self._text = text
+        self.buttonText = buttonText
+        self.showButtonText = showButtonText
+        self.showBorder = showBorder
+        self.placeholder = placeholder
+        self.onChangeText = onChangeText
+        self.onPressButtonText = onPressButtonText
+        self.error = error
+        self.disabled = disabled
+        self.icon = icon
+        self.iconColor = iconColor
+        self.onRightIconPressed = onRightIconPressed
+        self.onFocus = onFocus
+        self.onBlur = onBlur
+        self.loading = loading
+        self.fontWeight = fontWeight
+        self.keyboardType = keyboardType
+        }
+}
+
 // MARK: - InputSearch
 
 public struct InputSearch: View {

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.
-#Tue Apr 23 16:40:15 ICT 2024
-sdk.dir=/Users/hung.dao1/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.112.1-beta.9",
+  "version": "0.113.1-beta.0",
   "private": false,
   "dependencies": {},
   "devDependencies": {},

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

@@ -1,234 +0,0 @@
-package vn.momo.kits.application
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.components.BadgeDot
-import vn.momo.kits.components.DotSize
-import vn.momo.kits.components.Icon
-import vn.momo.kits.const.Colors
-
-data class HeaderRightData(
-    val useOnBoarding: Boolean = false,
-    val buttonOnBoarding: String? = null,
-    val onPress: (() -> Unit)? = null,
-    val tintColor: Color = Colors.black_20,
-    val preventClose: Any? = null,
-    val useShortcut: Boolean = false,
-    val useMore: Boolean = false,
-    val tools: List<ToolGroup> = emptyList(),
-    val appId: String = ""
-)
-
-data class Tool(
-    val key: String,
-    val icon: String,
-    val onPress: () -> Unit,
-    val showBadge: Boolean = false
-)
-
-data class ToolGroup(
-    val items: List<Tool>
-)
-
-data class NavigationButtonConfig(
-    val icon: String,
-    val onPress: () -> Unit
-)
-
-object Spacing {
-    val M = 16.dp
-    val S = 8.dp
-    val XXS = 2.dp
-}
-
-@Composable
-fun HeaderRight(
-    headerRight: HeaderRightData? = null,
-) {
-    Row(
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        ToolkitHeaderRight(headerRight = headerRight)
-    }
-}
-
-@Composable
-fun ToolkitHeaderRight(headerRight: HeaderRightData? = null) {
-    var isFavorite by remember { mutableStateOf(false) }
-    val isLoading by remember { mutableStateOf(false) }
-    val api = PlatformApi.current as? ComposeApi
-    val context = ApplicationContext.current
-
-    fun onPressShortcut() {
-        api?.request("onToolAction", mapOf("item" to mapOf("key" to "onFavorite"))) {
-            isFavorite = !isFavorite
-        }
-    }
-
-    fun onPressHelpCenter() {
-        val paramMap = mapOf(
-            "appId" to context?.appId,
-            "code" to context?.code,
-            "name" to context?.name,
-            "icon" to context?.icon,
-            "description" to context?.description
-        )
-        api?.request("showHelpCenter", paramMap, { _ -> })
-    }
-
-    fun onPressClose() {
-        api?.request("dismiss", "")
-    }
-
-    fun onPressMore() {
-        val params = listOf(
-            headerRight?.tools ?: emptyList<ToolGroup>(),
-            mapOf(
-                "appId" to context?.appId,
-                "code" to context?.code,
-                "name" to context?.name,
-                "icon" to context?.icon,
-                "description" to context?.description
-            )
-        )
-
-        api?.request("showTools", params, { _ -> })
-    }
-
-    fun getNavigationButtonConfig(
-        tools: List<ToolGroup>? = emptyList(),
-        useMore: Boolean? = false,
-        isFavorite: Boolean = false,
-        onPressShortcut: () -> Unit,
-        onPressMore: () -> Unit
-    ): NavigationButtonConfig {
-        val totalTools = tools?.sumOf { it.items.size } ?: 0
-        var icon = if (isFavorite) "pin_star_checked" else "pin_star"
-        var onClickHandler = onPressShortcut
-        if (totalTools > 1 || useMore == true) {
-            icon = "navigation_more_icon"
-            onClickHandler = onPressMore
-        } else if (totalTools == 1 && !tools.isNullOrEmpty()) {
-            val singleTool = tools.first().items.firstOrNull()
-            if (singleTool != null) {
-                icon = singleTool.icon
-                onClickHandler = {
-                    singleTool.onPress()
-                }
-            }
-        }
-        return NavigationButtonConfig(icon, onClickHandler)
-    }
-
-    val navButtonConfig = getNavigationButtonConfig(
-        headerRight?.tools,
-        headerRight?.useMore,
-        isFavorite,
-        ::onPressShortcut,
-        ::onPressMore
-    )
-
-    val showBadge = headerRight?.tools?.any { group ->
-        group.items.any { it.showBadge }
-    }
-
-    Row(
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        if (headerRight?.useShortcut == true) {
-            NavigationButton(
-                disabled = isLoading,
-                icon = navButtonConfig.icon,
-                showBadge = showBadge,
-                onClick = navButtonConfig.onPress
-            )
-        }
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.Center,
-            modifier = Modifier
-                .padding(start = Spacing.S)
-                .border(0.2.dp, Color(0x33000000), shape = RoundedCornerShape(14.dp))
-                .width(65.dp)
-                .height(28.dp)
-                .clip(shape = RoundedCornerShape(14.dp))
-                .background(Color(0x99FFFFFF))
-        ) {
-            Icon(source = "help_center", size = 20.dp, modifier = Modifier.padding(4.dp).clickable {
-                onPressHelpCenter()
-            })
-            Box(
-                modifier = Modifier
-                    .width(0.5.dp)
-                    .height(12.dp)
-                    .background(Colors.black_20)
-            )
-            Icon(
-                source = "16_navigation_close_circle",
-                size = 20.dp,
-                modifier = Modifier.padding(4.dp).clickable { onPressClose() }
-            )
-        }
-    }
-}
-
-@Composable
-fun NavigationButton(
-    disabled: Boolean,
-    icon: String,
-    showBadge: Boolean? = false,
-    onClick: () -> Unit
-) {
-    Box(
-        modifier = Modifier
-            .size(28.dp)
-            .clickable(enabled = !disabled, onClick = onClick)
-    ) {
-        Box(
-            modifier = Modifier
-                .matchParentSize()
-                .clip(CircleShape)
-                .background(Color(0x99FFFFFF))
-                .border(0.2.dp, Color(0x33000000), CircleShape)
-        )
-        Box(
-            modifier = Modifier.matchParentSize(),
-            contentAlignment = Alignment.Center
-        ) {
-            Icon(
-                source = icon,
-                size = 16.dp
-            )
-        }
-
-        if (showBadge != true) {
-            BadgeDot(
-                size = DotSize.Small,
-                modifier = Modifier
-                    .align(Alignment.TopEnd)
-                    .offset(x = -Spacing.XXS, y = -Spacing.XXS)
-            )
-        }
-    }
-}