@momo-kits/native-kits 0.163.1-beta.16-debug → 0.163.1-beta.17-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.163.1-beta.16-debug"
+        version = "0.163.1-beta.17-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.163.1-beta.16-debug'
+    spec.version                  = '0.163.1-beta.10'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -1,6 +1,6 @@
 package vn.momo.kits.layout
 
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
@@ -32,5 +32,7 @@ internal fun Item(
         m = m.width(grid.sizeForSpan(widthSpan))
         if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
     }
-    Box(modifier = m) { content() }
+    // A Column (not a Box) so multiple children flow VERTICALLY instead of stacking
+    // on top of each other — matches the React Item's flex-column content.
+    Column(modifier = m) { content() }
 }

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

@@ -28,6 +28,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalDensity
@@ -57,6 +58,9 @@ internal fun BottomSheet(
     header: BottomHeader,
     isSurface: Boolean = false,
     barrierDismissible: Boolean = true,
+    draggable: Boolean = true,
+    useBottomInset: Boolean = true,
+    footerComponent: (@Composable () -> Unit)? = null,
     onDismiss: (() -> Unit)?
 ) {
     val screenHeightDp = getScreenHeight()
@@ -161,30 +165,35 @@ internal fun BottomSheet(
                 .noFeedbackClickable {  },
             contentAlignment = Alignment.BottomCenter
         ) {
-            Column(Modifier.padding(bottom = AppNavigationBar.current)) {
+            val bottomInset = if (useBottomInset) {
+                (AppNavigationBar.current - keyboardSizeState().value).coerceAtLeast(0.dp)
+            } else 0.dp
+            Column(Modifier.padding(bottom = bottomInset)) {
                 Box(
                     modifier = Modifier
                         .height(72.dp)
                         .fillMaxWidth()
-                        .pointerInput(Unit) {
-                            detectDragGestures(
-                                onDrag = { change, dragAmount ->
-                                    change.consume()
-                                    coroutineScope.launch {
-                                        val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
-                                        sheetOffset.snapTo(newOffset)
-                                    }
-                                },
-                                onDragEnd = {
-                                    coroutineScope.launch {
-                                        if (sheetOffset.value > sheetCloseOffset) {
-                                            closeEvent()
-                                        } else {
-                                            sheetOffset.animateTo(0f)
+                        .conditional(draggable) {
+                            pointerInput(Unit) {
+                                detectDragGestures(
+                                    onDrag = { change, dragAmount ->
+                                        change.consume()
+                                        coroutineScope.launch {
+                                            val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
+                                            sheetOffset.snapTo(newOffset)
+                                        }
+                                    },
+                                    onDragEnd = {
+                                        coroutineScope.launch {
+                                            if (sheetOffset.value > sheetCloseOffset) {
+                                                closeEvent()
+                                            } else {
+                                                sheetOffset.animateTo(0f)
+                                            }
                                         }
                                     }
-                                }
-                            )
+                                )
+                            }
                         }
                 ) {
                     Column(
@@ -235,12 +244,50 @@ internal fun BottomSheet(
                     }
                 }
                 Divider()
-                content()
+                if (footerComponent != null) {
+                    Box(Modifier.weight(1f, fill = false)) {
+                        content()
+                    }
+                    BottomSheetFooter(footerComponent)
+                } else {
+                    content()
+                }
             }
         }
     }
 }
 
+@Composable
+private fun BottomSheetFooter(footerComponent: @Composable () -> Unit) {
+    val shadowBrush = remember {
+        Brush.verticalGradient(
+            colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
+        )
+    }
+
+    Box {
+        Box(
+            Modifier
+                .fillMaxWidth()
+                .background(AppTheme.current.colors.background.surface)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(vertical = Spacing.S)
+        ) {
+            footerComponent()
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(6.dp)
+                .offset(x = 0.dp, y = (-6).dp)
+                .background(shadowBrush)
+        )
+    }
+}
+
 sealed class BottomHeader {
     data class Title(
         val data: String = "Bottom Sheet Title",

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

@@ -139,10 +139,13 @@ class Navigator(
         isSurface: Boolean = false,
         barrierDismissible: Boolean = true,
         onDismiss: (() -> Unit)? = null,
-        bottomSheetHeader: BottomHeader? = null
+        bottomSheetHeader: BottomHeader? = null,
+        draggable: Boolean = true,
+        useBottomInset: Boolean = true,
+        footerComponent: (@Composable () -> Unit)? = null
     ){
         val id = currentScreen()?.id ?: -1
-        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.BOTTOM_SHEET, isSurface, barrierDismissible, onDismiss, bottomSheetHeader)
+        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.BOTTOM_SHEET, isSurface, barrierDismissible, onDismiss, bottomSheetHeader, draggable, useBottomInset, footerComponent)
     }
 
     fun showSnackBar(snackBar: SnackBar, onDismiss: (() -> Unit)? = null) {
@@ -257,6 +260,9 @@ sealed class OverplayComponentParams {
         val onDismiss: (() -> Unit)? = null,
         val barrierDismissible: Boolean = true,
         val bottomSheetHeader: BottomHeader? = null,
+        val draggable: Boolean = true,
+        val useBottomInset: Boolean = true,
+        val footerComponent: (@Composable () -> Unit)? = null,
     ) : OverplayComponentParams()
 
     class SnackBar : OverplayComponentParams()
@@ -288,10 +294,13 @@ object OverplayComponentRegistry {
         barrierDismissible: Boolean = true,
         onDismiss: (() -> Unit)?,
         bottomSheetHeader: BottomHeader? = null,
+        draggable: Boolean = true,
+        useBottomInset: Boolean = true,
+        footerComponent: (@Composable () -> Unit)? = null,
     ){
         val params = when(type){
             OverplayComponentType.MODAL -> OverplayComponentParams.Modal(onDismiss, barrierDismissible)
-            OverplayComponentType.BOTTOM_SHEET -> OverplayComponentParams.BottomSheet(isSurface, onDismiss, barrierDismissible, bottomSheetHeader)
+            OverplayComponentType.BOTTOM_SHEET -> OverplayComponentParams.BottomSheet(isSurface, onDismiss, barrierDismissible, bottomSheetHeader, draggable, useBottomInset, footerComponent)
             OverplayComponentType.SNACK_BAR -> OverplayComponentParams.SnackBar()
         }
 
@@ -333,6 +342,9 @@ object OverplayComponentRegistry {
                     header = params.bottomSheetHeader ?: Title(),
                     isSurface = params.isSurface,
                     barrierDismissible = params.barrierDismissible,
+                    draggable = params.draggable,
+                    useBottomInset = params.useBottomInset,
+                    footerComponent = params.footerComponent,
                     onDismiss = params.onDismiss
                 )
             }

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.163.1-beta.16
+version=0.163.1-sp.3
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Application/Components.swift

@@ -100,20 +100,6 @@ public struct HeaderBackground: View {
                         .frame(height: height)
                         .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
                         .background(backgroundColor)
-                        .overlay(
-                            headerTransparent ? AnyView(EmptyView()) :
-                            AnyView(
-                                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))
-                        )
                     if !headerTransparent {
                         Rectangle()
                             .fill(Color.black.opacity(0.1))
@@ -146,6 +132,17 @@ public struct HeaderBackground: View {
     }
 }
 
+// MARK: - Header right width preference
+
+/// Reports the measured width of the header-right area so the animated search
+/// header can compute its trailing inset (mirrors Compose's headerRightWidthPx).
+public struct HeaderRightWidthKey: PreferenceKey {
+    public static var defaultValue: CGFloat = 0
+    public static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = max(value, nextValue())
+    }
+}
+
 // MARK: - Bottom-tab root preference
 
 /// Set by `BottomTab` on appear so its enclosing `StackScreen` can detect that
@@ -235,6 +232,9 @@ public struct Header: View {
 
                         if let headerRight = headerRight {
                             AnyView(headerRight())
+                                .background(GeometryReader { geo in
+                                    Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
+                                })
                         }
                     }
                     .padding(.horizontal, 12)

package/ios/Application/HeaderRight.swift

@@ -101,69 +101,98 @@ struct ToolkitHeaderRight: View {
     var tintColor: Color?
     @State private var isFavorite: Bool = false
     @State private var isLoading: Bool = false
-    @EnvironmentObject private var environment: ApplicationEnvironment
+    @Environment(\.applicationEnvironment) private var environment
+
+    private func apiValue(_ value: Any?) -> Any {
+        value ?? NSNull()
+    }
+
+    private var contextMap: [String: Any] {
+        let context = environment.applicationContext
+        return [
+            "appId": apiValue(context?.appId),
+            "code": apiValue(context?.appCode),
+            "name": apiValue(context?.appName),
+            "icon": apiValue(context?.appIcon),
+            "description": apiValue(context?.description),
+            "support": apiValue(context?.support),
+            "toolkitConfig": apiValue(context?.toolkitConfig),
+            "providerId": apiValue(context?.providerId),
+            "permissions": apiValue(context?.permissions)
+        ]
+    }
+
+    private var shouldShowShortcut: Bool {
+        headerRight?.useShortcut == true && !(headerRight?.useMore == true && environment.applicationContext == nil)
+    }
+
+    private func parseResponse(_ response: String) -> Any? {
+        guard let jsonData = response.data(using: .utf8),
+              let json = try? JSONSerialization.jsonObject(with: jsonData) as? [String: Any] else {
+            return nil
+        }
+        return json["response"]
+    }
     
     // MARK: - Actions
+    private func loadFavoriteState() {
+        environment.composeApi?.request(
+            funcName: "isFavoriteApp",
+            params: ["code": apiValue(environment.applicationContext?.appCode)]
+        ) { response in
+            if let isFavorite = parseResponse(response) as? Bool {
+                self.isFavorite = isFavorite
+            }
+        }
+    }
+
     private func onPressShortcut() {
         environment.composeApi?.request(
             funcName: "onToolAction",
-            params: ["item": ["key": "onFavorite"]]
-        ) { _ in
-            isFavorite.toggle()
+            params: [
+                "item": ["key": "onFavorite"],
+                "context": contextMap
+            ]
+        ) { response in
+            if let result = parseResponse(response) as? [String: Any],
+               result["success"] as? Bool == true {
+                isFavorite.toggle()
+            }
         }
     }
     
     private func onPressHelpCenter() {
-        let context = environment.applicationContext
-        let paramMap: [String: Any] = [
-            "appId": context?.appId,
-            "code": context?.appCode,
-            "name": context?.appName,
-            "icon": context?.appIcon,
-            "description": context?.description
-        ]
         environment.composeApi?.request(
             funcName: "showHelpCenter",
-            params: paramMap
+            params: [
+                "appId": apiValue(environment.applicationContext?.appId),
+                "code": apiValue(environment.applicationContext?.appCode),
+                "name": apiValue(environment.applicationContext?.appName),
+                "icon": apiValue(environment.applicationContext?.appIcon),
+                "description": apiValue(environment.applicationContext?.description)
+            ]
         ) { _ in }
     }
     
     private func onPressClose() {
         environment.composeApi?.request(
             funcName: "dismissAll",
-            params: ""
+            params: nil
         ) { _ in }
     }
     
     private func onPressMore() {
-        let context = environment.applicationContext
         let params: [String: Any] = [
-            "useSystemTools": headerRight?.useSystemTools,
+            "useSystemTools": headerRight?.useSystemTools ?? true,
             "tools": headerRight?.tools.map { $0.toMap() } ?? [],
-            "context": [
-                "appId": context?.appId,
-                "code": context?.appCode,
-                "name": context?.appName,
-                "icon": context?.appIcon,
-                "description": context?.description,
-                "support": context?.support,
-                "toolkitConfig": context?.toolkitConfig,
-                "providerId": context?.providerId,
-                "permissions": context?.permissions
-            ]
+            "context": contextMap
         ]
         environment.composeApi?.request(
             funcName: "showTools",
             params: params
         ) { response in
-            do {
-                if let jsonData = response.data(using: .utf8),
-                   let json = try JSONSerialization.jsonObject(with: jsonData) as? [String: Any],
-                   let toolResponse = json["response"] as? String {
-                    headerRight?.toolCallback?(toolResponse)
-                }
-            } catch {
-                print("Error parsing response:", error)
+            if let toolResponse = parseResponse(response) as? String {
+                headerRight?.toolCallback?(toolResponse)
             }
         }
     }
@@ -195,7 +224,7 @@ struct ToolkitHeaderRight: View {
         } ?? false
         
         HStack(alignment: .center, spacing: 0) {
-            if headerRight?.useShortcut == true {
+            if shouldShowShortcut {
                 NavigationButton(
                     disabled: isLoading,
                     icon: navButtonConfig.icon,
@@ -206,15 +235,17 @@ struct ToolkitHeaderRight: View {
             }
             
             HStack(alignment: .center, spacing: 0) {
-                Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
-                    .padding(4)
-                    .onTapGesture {
-                        onPressHelpCenter()
-                    }
-                
-                Rectangle()
-                    .fill(tintColor ?? Colors.black20)
-                    .frame(width: 0.5, height: 12)
+                if environment.applicationContext != nil {
+                    Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
+                        .padding(4)
+                        .onTapGesture {
+                            onPressHelpCenter()
+                        }
+                    
+                    Rectangle()
+                        .fill(tintColor ?? Colors.black20)
+                        .frame(width: 0.5, height: 12)
+                }
                 
                 Icon(source: "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
                     .padding(4)
@@ -231,6 +262,9 @@ struct ToolkitHeaderRight: View {
             )
             .padding(.leading, Spacing.S)
         }
+        .onAppear {
+            loadFavoriteState()
+        }
     }
 }
 

package/ios/Application/Navigation/component/Header.swift

@@ -22,7 +22,7 @@ public struct NavigationHeader: View {
     /// Optional rich title (mirrors Compose's `HeaderTitle`); `.user` renders an
     /// avatar group, `.default`/nil renders plain `title`.
     var headerTitle: HeaderTitle?
-    var headerRight: (() -> any View)? = { NavigationHeaderRight() }
+    var headerRight: (() -> any View)? = { HeaderRight() }
     var goBack: (() -> Void)?
     var opacity: CGFloat = 1
     var animatedHeader: AnimatedHeader?

package/ios/Button/Button.swift

@@ -281,19 +281,25 @@ private struct ButtonPressFeedbackStyle: ButtonStyle {
     func makeBody(configuration: Configuration) -> some View {
         let pressed = configuration.isPressed && isEnabled
 
-        configuration.label
-            .opacity(pressed ? 0.5 : 1)
-            .background(
-                RoundedRectangle(cornerRadius: radius)
-                    .fill(background)
-                    .overlay(
-                        RoundedRectangle(cornerRadius: radius)
-                            .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
-                    )
-                    .padding(.horizontal, pressed ? 2 : 0)
-            )
-            .frame(height: height)
-            .clipShape(RoundedRectangle(cornerRadius: radius))
-            .animation(.easeInOut(duration: 0.1), value: pressed)
+        ZStack {
+            RoundedRectangle(cornerRadius: radius)
+                .fill(background)
+                .overlay(
+                    RoundedRectangle(cornerRadius: radius)
+                        .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+                )
+                .padding(.horizontal, pressed ? 2 : 0)
+
+            configuration.label
+                .opacity(pressed ? 0.5 : 1)
+        }
+        // Pin the whole button to its intended height explicitly: the bare
+        // RoundedRectangle background has no intrinsic size of its own, so left
+        // unconstrained in a ZStack inside a non-height-constraining container
+        // (e.g. a footer VStack) it can report an oversized ideal height and
+        // stretch the button — and its container — far taller than intended.
+        .frame(height: height)
+        .clipShape(RoundedRectangle(cornerRadius: radius))
+        .animation(.easeInOut(duration: 0.1), value: pressed)
     }
 }

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.163.1-beta.16'
+  s.version          = '0.163.1-sp.3'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.163.1-beta.16'
+  s.version          = '0.163.1-sp.3'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/ButtonDemo.swift

@@ -1,245 +1,100 @@
 //
-//  ButtonDemo.swift
-//  MoMoUIKitsDemo
+//  Foundation.swift
+//  Example
 //
-//  SwiftUI port of the Compose demo `sample/shared/.../screens/ButtonUsage.kt`:
-//  Preview tab mirrors `PreviewButton`, Playground tab mirrors `PlaygroundButton`.
+//  Created by Wem on 13/12/2022.
 //
 
 import Foundation
+import Lottie
 import MoMoUIKits
 import SwiftUI
 
-// Mirror the option lists in Compose `DemoScreen.kt`.
-private let buttonTypeList: [(key: String, value: ButtonType)] = [
-    ("primary", .primary),
-    ("secondary", .secondary),
-    ("tonal", .tonal),
-    ("outline", .outline),
-    ("danger", .danger),
-    ("text", .text),
-    ("disabled", .disabled),
-]
-
-private let sizeList: [(key: String, value: ButtonSize)] = [
-    ("large", .large),
-    ("medium", .medium),
-    ("small", .small),
-]
-
-// Subset of the Compose `Icons` map — names resolved via `Icon(source:)` / icon.json.
-private let iconOptionList: [String] = [
-    "none",
-    "arrow_arrow-back",
-    "arrow_arrow-next",
-    "Phonebook",
-]
-
 // MARK: - ButtonDemo
 
 struct ButtonDemo: View {
-    @State private var tab = 0
-
-    var body: some View {
-        VStack(spacing: 0) {
-            // Stand-in for Compose `DemoScreen`'s Preview/Playground bottom tabs.
-            Picker("", selection: $tab) {
-                Text("Preview").tag(0)
-                Text("Playground").tag(1)
-            }
-            .pickerStyle(.segmented)
-            .padding(.horizontal, 12)
-            .padding(.top, 8)
-
-            if tab == 0 {
-                PreviewButton()
-            } else {
-                PlaygroundButton()
-            }
-        }
-    }
-}
-
-// MARK: - PreviewButton
-
-private struct PreviewButton: View {
-    private let url = "https://static-00.iconduck.com/assets.00/external-link-icon-512x512-h2zzryfc.png"
+    // MARK: Internal
 
     var body: some View {
         ScrollView {
-            VStack(spacing: 0) {
-                ButtonSectionBox(title: "Title") {
-                    Button(title: "Open", action: {})
-                }
+            VStack {
+                Toggle("Disabled", isOn: $disabled)
 
-                ButtonSectionBox(title: "Type") {
-                    Button(title: "PRIMARY", action: {}, type: .primary)
-                    Button(title: "DANGER", action: {}, type: .danger)
-                    Button(title: "SECONDARY", action: {}, type: .secondary)
-                    Button(title: "TONAL", action: {}, type: .tonal)
-                    Button(title: "OUTLINE", action: {}, type: .outline)
-                    Button(title: "TEXT", action: {}, type: .text)
-                    Button(title: "DISABLED", action: {}, type: .disabled)
+                Group {
+                    Button(title: "Button", action: onPress, type: disabled ? .disabled : .primary, size: .large,
+                           iconRight: AnyView(Image(systemName: "checkmark.circle")))
+                    Button(title: "Button", action: onPress, size: .small)
                 }
 
-                ButtonSectionBox(title: "Size") {
-                    Button(title: "LARGE", action: {}, size: .large)
-                    Button(title: "MEDIUM", action: {}, size: .medium)
-                    Button(title: "SMALL", action: {}, size: .small)
+                Group {
+                    Button(title: "Button", action: onPress, type: .danger,
+                           iconLeft: AnyView(Image(systemName: "checkmark.circle")))
+                    Button(title: "Button", action: onPress, type: .danger, size: .medium)
+                    Button(title: "Button", action: onPress, type: .danger, size: .small)
                 }
-
-                ButtonSectionBox(title: "Loading") {
-                    Button(title: "PRIMARY", action: {}, type: .primary, loading: true)
-                    Button(title: "DANGER", action: {}, type: .danger, loading: true)
-                    Button(title: "SECONDARY", action: {}, type: .secondary, loading: true)
-                    Button(title: "TONAL", action: {}, type: .tonal, loading: true)
-                    Button(title: "OUTLINE", action: {}, type: .outline, loading: true)
-                    Button(title: "TEXT", action: {}, type: .text, loading: true)
-                    Button(title: "DISABLED", action: {}, type: .disabled, loading: true)
+                
+                Group {
+                    Button(title: "Button", action: onPress, type: .danger, iconLeft: AnyView(Image(systemName: "checkmark.circle")), isFull: false)
+                    Button(title: "Button", action: onPress, type: .danger, size: .medium, isFull: false)
+                    Button(title: "Button", action: onPress, type: .danger, size: .small, isFull: false)
                 }
 
-                ButtonSectionBox(title: "Icon Right") {
-                    Button(title: "Icon", action: {}, iconRight: AnyView(ImageView(url, loading: false)))
-                }
 
-                ButtonSectionBox(title: "Icon Left") {
-                    Button(title: "Icon", action: {}, iconLeft: AnyView(ImageView(url, loading: false)))
+                Group {
+                    Button(title: "Button", action: onPress, type: .tonal, size: .large)
+                    Button(title: "Button", action: onPress, type: .tonal, size: .medium)
+                    Button(title: "Button", action: onPress, type: .tonal, size: .small)
                 }
-            }
-        }
-    }
-}
-
-// MARK: - PlaygroundButton
 
-private struct PlaygroundButton: View {
-    @State private var title: String = "Button"
-    @State private var type: AnyHashable = "primary"
-    @State private var size: AnyHashable = "large"
-    @State private var iconRight: AnyHashable = "none"
-    @State private var iconLeft: AnyHashable = "none"
-    @State private var full = true
-    @State private var loading = false
-    @State private var useTintColor = true
-
-    var body: some View {
-        VStack(spacing: 0) {
-            ButtonSectionBox(title: "Component", alignment: .leading) {
-                Button(
-                    title: title,
-                    action: {},
-                    type: buttonTypeList.first { $0.key == type }?.value ?? .primary,
-                    size: sizeList.first { $0.key == size }?.value ?? .large,
-                    iconLeft: iconView(iconLeft),
-                    iconRight: iconView(iconRight),
-                    isFull: full,
-                    loading: loading,
-                    useTintColor: useTintColor
-                )
-            }
-
-            ScrollView {
-                ButtonSectionBox(title: "Props", alignment: .leading) {
-                    PropTitle("Children")
-                    Input(text: $title)
-                    PropGap()
-
-                    PropTitle("Type")
-                    RadioGroup(options: buttonTypeList.map(\.key), selection: $type)
-                    PropGap()
-
-                    PropTitle("Size")
-                    RadioGroup(options: sizeList.map(\.key), selection: $size)
-                    PropGap()
-
-                    PropTitle("Full")
-                    Checkbox($full, title: "\(full)")
-                    PropGap()
-
-                    PropTitle("Iconright")
-                    RadioGroup(options: iconOptionList, selection: $iconRight)
-                    PropGap()
-
-                    PropTitle("Iconleft")
-                    RadioGroup(options: iconOptionList, selection: $iconLeft)
-                    PropGap()
-
-                    PropTitle("Loading")
-                    Checkbox($loading, title: "\(loading)")
-                    PropGap()
-
-                    PropTitle("Usetinecolor")
-                    Checkbox($useTintColor, title: "\(useTintColor)")
+                Group {
+                    Button(title: "Tinted icon", action: onPress, type: .primary,
+                           iconLeft: AnyView(Image(systemName: "checkmark.circle")), useTintColor: true)
+                    Button(title: "Original icon", action: onPress, type: .primary,
+                           iconLeft: AnyView(Image(systemName: "checkmark.circle")), useTintColor: false)
                 }
-            }
-        }
-    }
-
-    private func iconView(_ selection: AnyHashable) -> AnyView? {
-        guard let name = selection as? String, name != "none" else { return nil }
-        return AnyView(Icon(source: name))
-    }
-}
-
-// MARK: - Playground helpers
 
-private struct PropTitle: View {
-    let title: String
-
-    init(_ title: String) { self.title = title }
-
-    var body: some View {
-        MomoText(title, typography: .headerDefaultBold)
-    }
-}
+                Group {
+                    Button(title: "Button", action: onPress, type: .secondary, size: .large)
+                    Button(title: "Button", action: onPress, type: .secondary, size: .medium)
+                    Button(title: "Button", action: onPress, type: .secondary, size: .small)
+                }
 
-private struct PropGap: View {
-    var body: some View {
-        Spacer().frame(height: Spacing.L)
-    }
-}
+                Group {
+                    Button(title: "Button", action: onPress, type: .text, size: .large)
+                    Button(title: "Button", action: onPress, type: .text, size: .medium)
+                    Button(title: "Button", action: onPress, type: .text, size: .small)
+                }
 
-private struct RadioGroup: View {
-    let options: [String]
-    @Binding var selection: AnyHashable
+                Group {
+                    Button(title: "Button", action: onPress, type: .outline, size: .large)
+                    Button(title: "Button", action: onPress, type: .outline, size: .medium)
+                    Button(title: "Button", action: onPress, type: .outline, size: .small)
+                }
 
-    var body: some View {
-        ForEach(options, id: \.self) { key in
-            Radio(value: key, groupValue: $selection, label: key)
-        }
+                Group {
+                    Button(title: "Button", action: onPress, type: .disabled, size: .large)
+                    Button(title: "Button", action: onPress, type: .disabled, size: .medium)
+                    Button(title: "Button", action: onPress, type: .disabled, size: .small)
+                }
+                Group {
+                    Button(title: "Button", action: onPress, type: .primary, size: .medium, loading: true)
+                    Button(title: "Button", action: onPress, type: .danger, size: .medium, iconLeft: AnyView(Image(systemName: "checkmark.circle")), loading: true)
+                    Button(title: "Button", action: onPress, type: .disabled, size: .medium, iconRight: AnyView(Image(systemName: "checkmark.circle")), loading: true)
+                    Button(title: "Button", action: onPress, type: .outline, size: .medium, iconLeft: AnyView(Image(systemName: "checkmark.circle")), iconRight: AnyView(Image(systemName: "checkmark.circle")), loading: true)
+                    Button(title: "Button", action: onPress, type: .secondary, size: .medium, loading: true)
+                    Button(title: "Button", action: onPress, type: .text, size: .medium, loading: true)
+                    Button(title: "Button", action: onPress, type: .tonal, size: .medium, loading: true)
+                }
+            }.padding(16)
+        }.padding(.top)
     }
-}
 
-// MARK: - ButtonSectionBox
-
-/// Titled rounded-card section container, mirroring Compose's `BasicColumnBox`.
-private struct ButtonSectionBox<Content: View>: View {
-    @Environment(\.appTheme) private var theme
-    let title: String
-    var alignment: HorizontalAlignment = .center
-    @ViewBuilder let content: () -> Content
-
-    var body: some View {
-        VStack(alignment: .leading, spacing: 8) {
-            if !title.isEmpty {
-                MomoText(title, typography: .headerMBold)
-                    .padding(.top, 8)
-            }
-
-            VStack(alignment: alignment, spacing: 8) {
-                content()
-            }
-            .frame(maxWidth: .infinity, alignment: alignment == .leading ? .leading : .center)
-            .padding(12)
-            .background(theme.colors.background.surface)
-            .clipShape(RoundedRectangle(cornerRadius: Radius.M))
-        }
-        .padding(12)
+    func onPress() {
+        print("Button")
     }
-}
 
-// MARK: - Preview
+    // MARK: Private
 
-#Preview {
-    ButtonDemo()
+    @State private var value: String = ""
+    @State private var disabled: Bool = false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.163.1-beta.16-debug",
+  "version": "0.163.1-beta.17-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},

package/.claude/settings.local.json

@@ -1,85 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(curl -s -o /dev/null -w \"%{http_code}\" \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.144.6/skiko-android-0.144.6.pom\")",
-      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/maven-metadata.xml\")",
-      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko/maven-metadata.xml\")",
-      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko/0.144.6/skiko-0.144.6.module\")",
-      "Bash(curl -s -o /dev/null -w '%{http_code}' https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.144.6/skiko-android-0.144.6.__TRACKED_VAR__)",
-      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.144.6/\")",
-      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/\")",
-      "Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.148.1/skiko-android-0.148.1.pom\")",
-      "Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.144.5/skiko-android-0.144.5.pom\")",
-      "Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"https://dl.google.com/dl/android/maven2/org/jetbrains/skiko/skiko-android/0.144.6/skiko-android-0.144.6.pom\")",
-      "Bash(curl -s \"https://search.maven.org/solrsearch/select?q=a:skiko-android&rows=5&wt=json\")",
-      "Bash(curl -sL -o /dev/null -w \"%{http_code} %{url_effective}\\\\n\" \"https://repo1.maven.org/maven2/org/jetbrains/skiko/skiko-android/0.144.6/skiko-android-0.144.6.pom\")",
-      "Bash(curl *)",
-      "Bash(./gradlew :sample:androidApp:dependencies --configuration debugRuntimeClasspath)",
-      "Bash(./gradlew :sample:shared:compileDebugKotlinAndroid)",
-      "Bash(./gradlew :sample:androidApp:compileDebugKotlin)",
-      "Bash(ls -d *.xcodeproj)",
-      "Bash(grep -c ChipDemo.swift __TRACKED_VAR__/project.pbxproj)",
-      "Bash(grep -c PBXFileSystemSynchronizedRootGroup __TRACKED_VAR__/project.pbxproj)",
-      "Bash(grep -c InformationDemo.swift __TRACKED_VAR__/project.pbxproj)",
-      "Bash(plutil -lint project.pbxproj)",
-      "Bash(xcode-select -p)",
-      "Bash(/usr/bin/xcrun xcodebuild *)",
-      "Bash(echo \"exit: $?\")",
-      "Bash(/Applications/Xcode26.app/Contents/Developer/usr/bin/xcodebuild -version)",
-      "Bash(./gradlew :compose:tasks --all)",
-      "Bash(grep -n \"vanniktech\\\\|mavenPublishing\\\\|^publishing\\\\|version = gitlabVersion\\\\|namespace =\\\\|compileSdk =\\\\|minSdk =\\\\|GitLabPackages\\\\|name = \\\\\"\\\\${gitlabRepo}Packages\\\\\"\")",
-      "Bash(git checkout *)",
-      "Bash(./gradlew :compose:publishAllPublicationsToGitLabPackagesRepository --dry-run)",
-      "Bash(git fetch *)",
-      "Bash(git pull *)",
-      "Bash(git push *)",
-      "Bash(git branch *)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -list)",
-      "Bash(xcrun simctl *)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme iosApp -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 14 Pro' -configuration Debug build CODE_SIGNING_ALLOWED=NO)",
-      "Bash(pod install *)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme iosApp -sdk iphonesimulator -destination 'id=1E6F9A79-5E64-4590-BEA2-828D75D99393' -configuration Debug build CODE_SIGNING_ALLOWED=NO)",
-      "Bash(xcrun swiftc *)",
-      "Bash(echo \"=== exit: $? \\(1=none found\\) ===\")",
-      "Bash(cat Radius.swift)",
-      "Bash(cat Spacing.swift)",
-      "Bash(echo \"exit=$?\")",
-      "Bash(ruby *)",
-      "Bash(xcodebuild -list -workspace iosApp.xcworkspace)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme MoMoUIKits -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 14 Pro' build)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme MoMoUIKits -sdk iphonesimulator -destination 'platform=iOS Simulator,id=E6A899C0-098E-473A-95B8-A2BBD2D42A92' build)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme iosApp -sdk iphonesimulator -destination 'platform=iOS Simulator,id=E6A899C0-098E-473A-95B8-A2BBD2D42A92' build)",
-      "Bash(xcodebuild build *)",
-      "Bash(git stash *)",
-      "Bash(plutil -lint sample/iosApp/iosApp.xcodeproj/project.pbxproj)",
-      "Bash(git add *)",
-      "Bash(git commit -m 'feat: DS-646 [ci build] *)",
-      "Bash(git commit -q -m 'fix:  DS-656 [ci build] *)",
-      "Bash(xargs git log --oneline -1)",
-      "Bash(git rev-list *)",
-      "Bash(git status *)",
-      "Bash(git rebase *)",
-      "Bash(git merge *)",
-      "Bash(git reset *)",
-      "Bash(awk '/^ *)",
-      "Bash(git ls-tree *)",
-      "Bash(awk *)",
-      "Read(//Users/sophia/Workspace/momo/momo-app/**)",
-      "Bash(git log *)",
-      "Bash(xcodebuild -version)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme iosApp -sdk iphonesimulator -destination 'generic/platform=iOS Simulator' -configuration Debug build CODE_SIGNING_ALLOWED=NO)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme MoMoUIKits -sdk iphonesimulator -destination 'generic/platform=iOS Simulator' -configuration Debug build CODE_SIGNING_ALLOWED=NO)",
-      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme MoMoUIKits -sdk iphonesimulator -destination 'generic/platform=iOS Simulator' -configuration Debug clean build CODE_SIGNING_ALLOWED=NO)",
-      "Bash(git commit *)",
-      "Bash(npm view *)",
-      "Bash(echo \"EXIT=$? -> not resolvable\")",
-      "Bash(yarn install *)",
-      "Bash(RCT_NEW_ARCH_ENABLED=1 pod install)",
-      "Bash(xcodebuild -workspace MoMoPlatform.xcworkspace -list)",
-      "Bash(git --no-pager diff --stat ios/Application/Localize.swift ios/Application/Navigation/NavigationContainer.swift ios/Popup/PopupDisplay.swift ios/Popup/PopupNotify.swift ios/Template/TrustBanner/TrustBanner.swift)",
-      "Bash(git rm *)",
-      "Bash(echo \"EXIT=$?\")",
-      "Bash(git -C /Users/sophia/Workspace/momo/momo-native-kits diff sample/iosApp/iosApp/Demo/ButtonDemo.swift)"
-    ]
-  }
-}

package/ios/Application/Navigation/component/HeaderRightWidthKey.swift

@@ -1,11 +0,0 @@
-import SwiftUI
-
-/// Reports the measured width of the header-right area so the animated search
-/// header can compute its trailing inset (mirrors Compose's headerRightWidthPx).
-/// Written by the header views (`NavigationHeader`) and read by `StackScreen`.
-public struct HeaderRightWidthKey: PreferenceKey {
-    public static var defaultValue: CGFloat = 0
-    public static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
-        value = max(value, nextValue())
-    }
-}

package/ios/Application/Navigation/component/NavigationHeaderRight.swift

@@ -1,196 +0,0 @@
-import SwiftUI
-import Foundation
-
-/// Keyed (`@Environment(\.applicationEnvironment)`) variant of `HeaderRight`, for hosts
-/// wired through `NavigationContainer`/`KitContainer` (the injection style introduced by
-/// MR 227 / DS-637). Reuses the shared data types (`HeaderRightData`, `Tool`, `ToolGroup`)
-/// and `NavigationButton` from `HeaderRight.swift`. The legacy `HeaderRight` there stays on
-/// `@EnvironmentObject` for hosts that render `Screen` directly with
-/// `.environmentObject(ApplicationEnvironment(...))`. Opt in per screen with
-/// `headerRight: { NavigationHeaderRight() }`.
-public struct NavigationHeaderRight: View {
-    public init(headerRight: HeaderRightData? = nil, tintColor: Color? = nil) {
-        self.headerRight = headerRight
-        self.tintColor = tintColor
-    }
-    var headerRight: HeaderRightData?
-    var tintColor: Color? = nil
-
-    public var body: some View {
-        HStack(alignment: .center) {
-            ToolkitNavigationHeaderRight(headerRight: headerRight, tintColor: tintColor)
-        }
-    }
-}
-
-struct ToolkitNavigationHeaderRight: View {
-    var headerRight: HeaderRightData?
-    var tintColor: Color?
-    @State private var isFavorite: Bool = false
-    @State private var isLoading: Bool = false
-    @Environment(\.applicationEnvironment) private var environment
-
-    private func apiValue(_ value: Any?) -> Any {
-        value ?? NSNull()
-    }
-
-    private var contextMap: [String: Any] {
-        let context = environment.applicationContext
-        return [
-            "appId": apiValue(context?.appId),
-            "code": apiValue(context?.appCode),
-            "name": apiValue(context?.appName),
-            "icon": apiValue(context?.appIcon),
-            "description": apiValue(context?.description),
-            "support": apiValue(context?.support),
-            "toolkitConfig": apiValue(context?.toolkitConfig),
-            "providerId": apiValue(context?.providerId),
-            "permissions": apiValue(context?.permissions)
-        ]
-    }
-
-    private var shouldShowShortcut: Bool {
-        headerRight?.useShortcut == true && !(headerRight?.useMore == true && environment.applicationContext == nil)
-    }
-
-    private func parseResponse(_ response: String) -> Any? {
-        guard let jsonData = response.data(using: .utf8),
-              let json = try? JSONSerialization.jsonObject(with: jsonData) as? [String: Any] else {
-            return nil
-        }
-        return json["response"]
-    }
-
-    // MARK: - Actions
-    private func loadFavoriteState() {
-        environment.composeApi?.request(
-            funcName: "isFavoriteApp",
-            params: ["code": apiValue(environment.applicationContext?.appCode)]
-        ) { response in
-            if let isFavorite = parseResponse(response) as? Bool {
-                self.isFavorite = isFavorite
-            }
-        }
-    }
-
-    private func onPressShortcut() {
-        environment.composeApi?.request(
-            funcName: "onToolAction",
-            params: [
-                "item": ["key": "onFavorite"],
-                "context": contextMap
-            ]
-        ) { response in
-            if let result = parseResponse(response) as? [String: Any],
-               result["success"] as? Bool == true {
-                isFavorite.toggle()
-            }
-        }
-    }
-
-    private func onPressHelpCenter() {
-        environment.composeApi?.request(
-            funcName: "showHelpCenter",
-            params: [
-                "appId": apiValue(environment.applicationContext?.appId),
-                "code": apiValue(environment.applicationContext?.appCode),
-                "name": apiValue(environment.applicationContext?.appName),
-                "icon": apiValue(environment.applicationContext?.appIcon),
-                "description": apiValue(environment.applicationContext?.description)
-            ]
-        ) { _ in }
-    }
-
-    private func onPressClose() {
-        environment.composeApi?.request(
-            funcName: "dismissAll",
-            params: nil
-        ) { _ in }
-    }
-
-    private func onPressMore() {
-        let params: [String: Any] = [
-            "useSystemTools": headerRight?.useSystemTools ?? true,
-            "tools": headerRight?.tools.map { $0.toMap() } ?? [],
-            "context": contextMap
-        ]
-        environment.composeApi?.request(
-            funcName: "showTools",
-            params: params
-        ) { response in
-            if let toolResponse = parseResponse(response) as? String {
-                headerRight?.toolCallback?(toolResponse)
-            }
-        }
-    }
-
-    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 backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
-        let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
-        let navButtonConfig = getNavigationButtonConfig()
-        let showBadge = headerRight?.tools.contains { group in
-            group.items.contains { $0.showBadge }
-        } ?? false
-
-        HStack(alignment: .center, spacing: 0) {
-            if shouldShowShortcut {
-                NavigationButton(
-                    disabled: isLoading,
-                    icon: navButtonConfig.icon,
-                    showBadge: showBadge,
-                    onClick: navButtonConfig.onPress,
-                    tintColor: tintColor
-                )
-            }
-
-            HStack(alignment: .center, spacing: 0) {
-                if environment.applicationContext != nil {
-                    Icon(source: "help_center", size: 20, color: tintColor ?? Colors.black17)
-                        .padding(4)
-                        .onTapGesture {
-                            onPressHelpCenter()
-                        }
-
-                    Rectangle()
-                        .fill(tintColor ?? Colors.black20)
-                        .frame(width: 0.5, height: 12)
-                }
-
-                Icon(source: "16_basic_home", size: 20, color: tintColor ?? Colors.black17)
-                    .padding(4)
-                    .onTapGesture {
-                        onPressClose()
-                    }
-            }
-            .frame(width: 65, height: 28)
-            .background(backgroundButtonColor)
-            .cornerRadius(14)
-            .overlay(
-                RoundedRectangle(cornerRadius: 14)
-                    .stroke(borderColor, lineWidth: 0.2)
-            )
-            .padding(.leading, Spacing.S)
-        }
-        .onAppear {
-            loadFavoriteState()
-        }
-    }
-}

package/local.properties

@@ -1,8 +0,0 @@
-## This file must *NOT* be checked into Version Control Systems,
-# as it contains information specific to your local configuration.
-#
-# Location of the SDK. This is only used by Gradle.
-# For customization when using a Version Control System, please read the
-# header note.
-#Tue Jun 02 17:05:32 ICT 2026
-sdk.dir=/Users/sophia/Library/Android/sdk