@momo-kits/native-kits 0.111.1-rc.3 → 0.112.1-beta.10

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

@@ -178,6 +178,7 @@ fun Header(
     val statusBarHeight = AppStatusBar.current ?: getStatusBarHeight()
     val tintIconColor = AppTheme.current.colors.text.default
     val backgroundButton = Colors.black_01.copy(alpha = 0.6f)
+    val miniAppContext = ApplicationContext.current
 
     var colorFraction by remember { mutableStateOf(0f) }
 
@@ -242,10 +243,12 @@ fun Header(
                     }
                 }
 
-                Box(Modifier.graphicsLayer {
-                    alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
-                }) {
-                    headerRight?.invoke()
+                if (inputSearchProps == null && miniAppContext != null) {
+                    Box(Modifier.graphicsLayer {
+                        alpha = if (animatedHeader !== null) opacity ?: 1f else 1f
+                    }) {
+                        headerRight?.invoke()
+                    }
                 }
             }
 

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

@@ -0,0 +1,250 @@
+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 useShortcut: Boolean = false,
+    val useMore: Boolean = false,
+    val tools: List<ToolGroup> = emptyList(),
+    val toolCallback: ((String) -> Unit)? = { _ -> }
+)
+
+data class Tool(
+    val key: String,
+    val icon: String,
+    val showBadge: Boolean = false,
+    val name: Map<String, String> = emptyMap()
+) {
+    fun toMap(): Map<String, Any> {
+        return mapOf(
+            "key" to key,
+            "icon" to icon,
+            "showBadge" to showBadge,
+            "name" to name
+        )
+    }
+}
+
+data class ToolGroup(
+    val title: Map<String, String> = emptyMap(),
+    val items: List<Tool>
+) {
+    fun toMap(): Map<String, Any> {
+        return mapOf(
+            "title" to title,
+            "items" to items.map { it.toMap() }
+        )
+    }
+}
+
+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?.appCode,
+            "name" to context?.appName,
+            "icon" to context?.appIcon,
+            "description" to context?.description
+        )
+        api?.request("showHelpCenter", paramMap) {
+
+        }
+    }
+
+    fun onPressClose() {
+        api?.request("dismiss", "")
+    }
+
+    fun onPressMore() {
+        api?.request("showTools",
+            mapOf(
+                "tools" to headerRight?.tools?.map { it.toMap() },
+                "context" to mapOf(
+                    "appId" to context?.appId,
+                    "code" to context?.appCode,
+                    "name" to context?.appName,
+                    "icon" to context?.appIcon,
+                    "description" to context?.description
+                )
+            )
+        ) {
+
+        }
+    }
+
+    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 = {
+                    headerRight?.toolCallback?.invoke(singleTool.key)
+                }
+            }
+        }
+        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)
+            )
+        }
+    }
+}

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

@@ -22,40 +22,20 @@ 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: String?): String
-    fun request(funcName: String, params: String?, onResponse: ((String) -> Unit)?): String
-    fun requestCallback(funcName: String, params: String?, onResponse: ((String) -> Unit)?)
+    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 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,
@@ -63,8 +43,25 @@ class Navigator {
     ) {
     }
 
-    fun showBottomSheet(content: @Composable () -> Unit) {
-    }
+    fun showBottomSheet(content: @Composable () -> Unit) {}
+}
+
+data class MiniAppContext(
+    val appIcon: String = "",
+    val appName: Any? = null,
+    val appId: String = "",
+    val appCode: String = "",
+    val description: Any? = null,
+)
+
+val PlatformApi = staticCompositionLocalOf<Any?> { null }
+
+val AppNavigator = staticCompositionLocalOf<Navigator> {
+    error("no navigator provided!")
+}
+
+val ApplicationContext = staticCompositionLocalOf<MiniAppContext?> {
+    error("no context provided!")
 }
 
 @Composable
@@ -72,7 +69,8 @@ fun ApplicationContainer(
     theme: Theme = defaultTheme,
     composeApi: ComposeApi? = null,
     statusBarHeight: Dp? = AppStatusBar.current ?: getStatusBarHeight(),
-    content: @Composable () -> Unit
+    applicationContext: MiniAppContext? = null,
+    content: @Composable () -> Unit,
 ) {
     var appTheme by remember { mutableStateOf(theme) }
     val coroutineScope = rememberCoroutineScope()
@@ -97,8 +95,7 @@ fun ApplicationContainer(
                     }
                 }
             }
-        }
-        catch (e: Exception) {
+        } catch (e: Exception) {
             print("@@ == NavigationContainer fetch config error $e")
         }
     }
@@ -109,6 +106,7 @@ 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)? = null,
+    headerRight: @Composable (() -> Unit)? = { HeaderRight() },
     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) {
+fun BadgeDot(size: DotSize = DotSize.Large, modifier: Modifier = Modifier) {
     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/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,5 +1318,10 @@ 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_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"
 )

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/HeaderRight.swift

@@ -0,0 +1,231 @@
+import SwiftUI
+
+public struct HeaderRightData {
+    var useShortcut: Bool
+    var useMore: Bool
+    var tools: [ToolGroup]
+    var toolCallback: ((String) -> Void)?
+    
+    public init(
+        useShortcut: Bool = false,
+        useMore: Bool = false,
+        tools: [ToolGroup] = [],
+        toolCallback: ((String) -> Void)? = nil
+    ) {
+        self.useShortcut = useShortcut
+        self.useMore = useMore
+        self.tools = tools
+        self.toolCallback = toolCallback
+    }
+}
+
+public struct Tool {
+    var key: String
+    var icon: String
+    var showBadge: Bool
+    var name: [String: String]
+    
+    public init(
+        key: String,
+        icon: String,
+        showBadge: Bool = false,
+        name: [String: String] = [:]
+    ) {
+        self.key = key
+        self.icon = icon
+        self.showBadge = showBadge
+        self.name = name
+    }
+    
+    func toMap() -> [String: Any] {
+        return [
+            "key": key,
+            "icon": icon,
+            "showBadge": showBadge,
+            "name": name
+        ]
+    }
+}
+
+public struct ToolGroup {
+    var title: [String: String]
+    var items: [Tool]
+    
+    public init(
+        title: [String: String] = [:],
+        items: [Tool]
+    ) {
+        self.title = title
+        self.items = items
+    }
+    
+    func toMap() -> [String: Any] {
+        return [
+            "title": title,
+            "items": items.map { $0.toMap() }
+        ]
+    }
+}
+
+struct NavigationButtonConfig {
+    let icon: String
+    let onPress: () -> Void
+}
+
+// MARK: - Components
+struct HeaderRight: View {
+    var headerRight: HeaderRightData?
+    
+    var body: some View {
+        HStack(alignment: .center) {
+            ToolkitHeaderRight(headerRight: headerRight)
+        }
+    }
+}
+
+struct ToolkitHeaderRight: View {
+    var headerRight: HeaderRightData?
+    @State private var isFavorite: Bool = false
+    @State private var isLoading: Bool = false
+    
+    // MARK: - Actions
+    private func onPressShortcut() {
+        ComposeApi.shared.request(
+            funcName: "onToolAction",
+            params: ["item": ["key": "onFavorite"]]
+        ) { _ in
+            isFavorite.toggle()
+        }
+    }
+    
+    private func onPressHelpCenter() {
+        let context = ApplicationContext.shared
+        let paramMap: [String: Any] = [
+            "appId": context.appId,
+            "code": context.appCode,
+            "name": context.appName,
+            "icon": context.appIcon,
+            "description": context.description
+        ]
+        ComposeApi.shared.request(
+            funcName: "showHelpCenter",
+            params: paramMap
+        ) { _ in }
+    }
+    
+    private func onPressClose() {
+        ComposeApi.shared.request(funcName: "dismiss", params: "")
+    }
+    
+    private func onPressMore() {
+        let context = ApplicationContext.shared
+        let params: [String: Any] = [
+            "tools": headerRight?.tools.map { $0.toMap() } ?? [],
+            "context": [
+                "appId": context.appId,
+                "code": context.appCode,
+                "name": context.appName,
+                "icon": context.appIcon,
+                "description": context.description
+            ]
+        ]
+        ComposeApi.shared.request(
+            funcName: "showTools",
+            params: params
+        ) { _ in }
+    }
+    
+    private func getNavigationButtonConfig() -> NavigationButtonConfig {
+        let totalTools = headerRight?.tools.reduce(0) { $0 + $1.items.count } ?? 0
+        var icon = isFavorite ? "pin_star_checked" : "pin_star"
+        var onClickHandler: () -> Void = onPressShortcut
+        
+        if totalTools > 1 || headerRight?.useMore == true {
+            icon = "navigation_more_icon"
+            onClickHandler = onPressMore
+        } else if totalTools == 1, let singleTool = headerRight?.tools.first?.items.first {
+            icon = singleTool.icon
+            onClickHandler = {
+                headerRight?.toolCallback?(singleTool.key)
+            }
+        }
+        
+        return NavigationButtonConfig(icon: icon, onPress: onClickHandler)
+    }
+    
+    var body: some View {
+        let navButtonConfig = getNavigationButtonConfig()
+        let showBadge = headerRight?.tools.contains { group in
+            group.items.contains { $0.showBadge }
+        } ?? false
+        
+        HStack(alignment: .center) {
+            if headerRight?.useShortcut == true {
+                NavigationButton(
+                    disabled: isLoading,
+                    icon: navButtonConfig.icon,
+                    showBadge: showBadge,
+                    onClick: navButtonConfig.onPress
+                )
+            }
+            
+            HStack(alignment: .center, spacing: 0) {
+                Icon(source: "help_center", size: 20)
+                    .padding(4)
+                    .onTapGesture {
+                        onPressHelpCenter()
+                    }
+                
+                Rectangle()
+                    .fill(Colors.black20)
+                    .frame(width: 0.5, height: 12)
+                
+                Icon(source: "16_navigation_close_circle", size: 20)
+                    .padding(4)
+                    .onTapGesture {
+                        onPressClose()
+                    }
+            }
+            .frame(width: 65, height: 28)
+            .background(Color.white.opacity(0.6))
+            .cornerRadius(14)
+            .overlay(
+                RoundedRectangle(cornerRadius: 14)
+                    .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+            )
+            .padding(.leading, 8)
+        }
+    }
+}
+
+struct NavigationButton: View {
+    var disabled: Bool
+    var icon: String
+    var showBadge: Bool
+    var onClick: () -> Void
+    
+    var body: some View {
+        ZStack {
+            Circle()
+                .fill(Color.white.opacity(0.6))
+                .overlay(
+                    Circle()
+                        .stroke(Color.black.opacity(0.2), lineWidth: 0.2)
+                )
+            
+            Icon(source: icon, size: 16)
+            
+            if showBadge {
+                BadgeDot(size: .small)
+                    .offset(x: -2, y: -2)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
+            }
+        }
+        .frame(width: 28, height: 28)
+        .onTapGesture {
+            if !disabled {
+                onClick()
+            }
+        }
+    }
+} 

package/ios/Application/Screen.swift

@@ -0,0 +1,228 @@
+//
+//  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: HeaderRightData?
+    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: HeaderRightData? = 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)
+    }
+}
+
+public struct Header: View {
+    var headerType: HeaderType = .default
+    var titlePosition: TitlePosition
+    var title: String
+    var headerRight: HeaderRightData?
+    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: HeaderRightData? = 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 {
+        HStack {
+            if let goBack = goBack {
+                Button(action: goBack) {
+                    Text("Back")
+                }
+            }
+            
+            Spacer()
+            
+            if headerRight != nil {
+                HeaderRight(headerRight: headerRight)
+                    .opacity(animatedHeader != nil ? opacity ?? 1 : 1)
+            }
+        }
+    }
+}
+

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.
-#Wed Aug 21 14:20:12 ICT 2024
-sdk.dir=/Users/huynhdung/Library/Android/sdk
+#Tue Apr 23 16:40:15 ICT 2024
+sdk.dir=/Users/hung.dao1/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.111.1-rc.3",
+  "version": "0.112.1-beta.10",
   "private": false,
   "dependencies": {},
   "devDependencies": {},