@momo-kits/native-kits 0.162.2-sp.1-debug → 0.162.2-sp.10-debug

package/ios/Switch/Switch.swift

@@ -1,44 +1,69 @@
 import Foundation
 import SwiftUI
 
-public struct Switch: View{
+public struct Switch: View {
     @Binding var value: Bool
     var disabled: Bool
-    var onChange: ((Bool)->Void)?
-    
-    public init(_ value: Binding<Bool>,disabled: Bool = false, onChange: ((Bool)->Void)? = nil){
+    var onChange: ((Bool) -> Void)?
+    var title: String?
+    var accessibilityId: String?
+
+    public init(
+        _ value: Binding<Bool>,
+        disabled: Bool = false,
+        onChange: ((Bool) -> Void)? = nil,
+        title: String? = "",
+        accessibilityId: String? = ""
+    ) {
         self._value = value
         self.disabled = disabled
         self.onChange = onChange
+        self.title = title
+        self.accessibilityId = accessibilityId
+    }
+
+    // Mirrors Kotlin's `backgroundColor`: shared by the track AND the inner dot.
+    private var backgroundColor: Color {
+        switch (disabled, value) {
+        case (true, true): return Colors.green09
+        case (true, false): return Colors.black05
+        case (false, true): return Colors.green03
+        case (false, false): return Colors.black07
+        }
+    }
+
+    // Mirrors Kotlin's `circleBackgroundColor` (the outer 14pt thumb circle).
+    private var circleColor: Color {
+        value ? Colors.black01 : Colors.black03
     }
-    
-    
+
+    private var automationId: String {
+        accessibilityId?.isEmpty == false ? accessibilityId! : "toggle_\(title?.isEmpty == false ? title! : "unknown")_\(value)"
+    }
+
     public var body: some View {
         SwiftUI.Button(action: {
-            withAnimation{
+            withAnimation {
                 value.toggle()
                 onChange?(value)
             }
-        }){
-              HStack{
-                  HStack {
-                  }
-                  .frame(width: 6, height: 6)
-                  .background(value ? Colors.pink03 : Colors.black07)
-                  .clipShape(Circle())
-                  .opacity(disabled ? 0.4 : 1)
-              }
-              .frame(width: 14, height: 14)
-              .background(Colors.black01)
-              .clipShape(Circle())
-              .padding(.leading,5)
-              .padding(.trailing,5)
-              
-          }
-          .disabled(disabled)
-          .frame(width: 40, height: 24, alignment: value == true ? .trailing : .leading)
-          .background(value ? Colors.pink03 : Colors.black07)
-          .clipShape(Capsule())
-          .opacity(disabled ? 0.4 : 1)
+        }) {
+            HStack {
+                HStack {}
+                    .frame(width: 6, height: 6)
+                    .background(backgroundColor)
+                    .clipShape(Circle())
+            }
+            .frame(width: 14, height: 14)
+            .background(circleColor)
+            .clipShape(Circle())
+            .padding(.leading, Spacing.XS)
+            .padding(.trailing, Spacing.XS)
+        }
+        .disabled(disabled)
+        .frame(width: 38, height: 20, alignment: value ? .trailing : .leading)
+        .background(backgroundColor)
+        .clipShape(Capsule())
+        .accessibilityIdentifier(automationId)
     }
 }

package/ios/TabView/TabView.swift

@@ -363,13 +363,15 @@ private struct CardTabBar: View {
                 let isActive = selectedIndex == index
                 let iconColor = isActive ? selectedColor : unselectedColor
 
-                cardItem(tab: tab, isActive: isActive, iconColor: iconColor)
-                    .frame(maxWidth: .infinity)
-                    .frame(height: isActive ? 44 : 40)
-                    .background(isActive ? theme.colors.background.surface : theme.colors.background.tonal)
-                    .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
-                    .contentShape(Rectangle())
-                    .onTapGesture { onPress(index) }
+                SwiftUI.Button(action: { onPress(index) }) {
+                    cardItem(tab: tab, isActive: isActive, iconColor: iconColor)
+                        .frame(maxWidth: .infinity)
+                        .frame(height: isActive ? 44 : 40)
+                        .background(isActive ? theme.colors.background.surface : theme.colors.background.tonal)
+                        .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
+                        .contentShape(Rectangle())
+                }
+                .buttonStyle(ActiveOpacityButtonStyle())
             }
         }
         .frame(maxWidth: .infinity)
@@ -416,15 +418,17 @@ private struct TabItemView: View {
     private var textStyle: TypographyStyle { active ? .headerSSemibold : .bodyDefaultRegular }
 
     var body: some View {
-        Group {
-            if direction == .column {
-                columnBody
-            } else {
-                rowBody
+        SwiftUI.Button(action: onPress) {
+            Group {
+                if direction == .column {
+                    columnBody
+                } else {
+                    rowBody
+                }
             }
+            .contentShape(Rectangle())
         }
-        .contentShape(Rectangle())
-        .onTapGesture { onPress() }
+        .buttonStyle(ActiveOpacityButtonStyle())
     }
 
     @ViewBuilder

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -52,15 +52,14 @@ let defaultBanner = TrustBannerData(
 
 public struct TrustBanner: View {
     @EnvironmentObject var applicationEnvironment: ApplicationEnvironment
-    
+    @EnvironmentObject private var localize: Localize
+
     var onPress: ((String)->Void)?
-     
+
     public init(onPress: ((String)->Void)?) {
         self.onPress = onPress
     }
-    
-    var language: String? = "vi"
-    
+
     func onPressSecurity() {
         if (onPress != nil) {
             onPress!(applicationEnvironment.config?.trustBanner?.urlConfig ?? defaultBanner.urlConfig)
@@ -75,7 +74,7 @@ public struct TrustBanner: View {
                 .scaledToFit()
                 .frame(width: 64, height: 64)
             VStack(alignment: .leading){
-                Text(applicationEnvironment.config?.trustBanner?.content[language ?? "vi"] as? String ?? defaultBanner.content[language ?? "vi"])
+                Text(applicationEnvironment.config?.trustBanner?.content[localize.currentLanguage] ?? defaultBanner.content[localize.currentLanguage])
                     .foregroundColor(Color(hex: "484848"))
                     .lineLimit(2)
                     .font(.system(size: 13, weight: Font.Weight.regular))
@@ -84,7 +83,7 @@ public struct TrustBanner: View {
                     .padding(.bottom, 8)
                 HStack {
                     HStack(spacing: 0) {
-                        Text(applicationEnvironment.config?.trustBanner?.subContent[language ?? "vi"] as? String ?? defaultBanner.subContent[language ?? "vi"])
+                        Text(applicationEnvironment.config?.trustBanner?.subContent[localize.currentLanguage] ?? defaultBanner.subContent[localize.currentLanguage])
                             .foregroundColor(Colors.pink03)
                             .font(.system(size: 13, weight: .bold))
                             .ignoreBoldTextSetting()

package/ios/Tooltip/Tooltip.swift

@@ -462,6 +462,9 @@ private struct TooltipSecondaryButton: View {
                 .padding(.vertical, Spacing.S)
         }
         .buttonStyle(.plain)
+        // Mirrors Compose's `Modifier.weight(1f, fill = false)` on the secondary button:
+        // it yields space to the primary button first under width pressure.
+        .layoutPriority(-1)
     }
 }
 

package/ios/Typography/FontScaleStore.swift

@@ -0,0 +1,19 @@
+import CoreGraphics
+
+/// App-wide font-scale preference for the SwiftUI kit. An exported holder the host writes once at
+/// app startup (from the cache-backed `FontScaleProvider`); `scaleSize`/`appFont` read the snapshot.
+/// No realtime: the SwiftUI kit has no navigation container to scope reactive updates, so a startup
+/// snapshot is enough. When `useOSScaleRate` is false the kit applies `userScaleRate` instead of the
+/// OS Dynamic Type factor.
+public final class FontScaleStore {
+    public static let shared = FontScaleStore()
+    private init() {}
+
+    public private(set) var userScaleRate: CGFloat = 1
+    public private(set) var useOSScaleRate: Bool = true
+
+    public func update(userScaleRate: CGFloat, useOSScaleRate: Bool) {
+        self.userScaleRate = userScaleRate
+        self.useOSScaleRate = useOSScaleRate
+    }
+}

package/ios/Typography/Text.swift

@@ -1,6 +1,9 @@
 import SwiftUI
 
 public func scaleSize(_ size: CGFloat, _ scaleRate: CGFloat? = nil) -> CGFloat {
+    if !FontScaleStore.shared.useOSScaleRate {
+        return size * FontScaleStore.shared.userScaleRate
+    }
     let defaultScreenSize: CGFloat = 375
     let maxFontScale: CGFloat = scaleRate ?? 1.5
     let maxDeviceScale: CGFloat = 5

package/ios/Typography/Typography.swift

@@ -11,13 +11,16 @@ public extension View {
 
 public extension Font {
     static func appFont(size: CGFloat) -> Font {
+        if !FontScaleStore.shared.useOSScaleRate {
+            return Font.system(size: size * FontScaleStore.shared.userScaleRate)
+        }
         let defaultScreenSize: CGFloat = 375
         let maxFontScale: CGFloat = 1.5
         let maxDeviceScale: CGFloat = 5
-        
+
         let deviceWidth = UIScreen.main.bounds.width
         let deviceScale = deviceWidth / defaultScreenSize
-        
+
         let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
         let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
         let fontScale = scaledFont.pointSize / defaultFont.pointSize
@@ -34,7 +37,7 @@ public extension Font {
 
         return Font.system(size: fontSize)
     }
-    
+
     // New supported typography styles
     static let headline_default_bold = appFont(size: 24).weight(.bold)
     static let header_m_bold = appFont(size: 18).weight(.bold)
@@ -52,7 +55,7 @@ public extension Font {
     static let action_s_bold = appFont(size: 14).weight(.bold)
     static let action_xs_bold = appFont(size: 12).weight(.bold)
     static let action_xxs_bold = appFont(size: 10).weight(.bold)
-    
+
     // Legacy styles
     static let headline_default = appFont(size: 28).weight(.semibold)
     static let headline_s = appFont(size: 24).weight(.semibold)
@@ -77,7 +80,7 @@ public extension Font {
     static let action_xxs = appFont(size: 10).weight(.bold)
     static let action_xs = appFont(size: 12).weight(.bold)
     static let action_s = appFont(size: 15).weight(.bold)
-    
+
     // deprecated
     static let h1 = appFont(size: 36).weight(.semibold) //headline_xl
     static let h2 = appFont(size: 32).weight(.semibold)

package/ios/Uploader/Uploader.swift

@@ -172,12 +172,3 @@ private struct UploaderImageItem: View {
         .buttonStyle(ActiveOpacityButtonStyle())
     }
 }
-
-// MARK: - Active opacity button style
-
-private struct ActiveOpacityButtonStyle: ButtonStyle {
-    func makeBody(configuration: Configuration) -> some View {
-        configuration.label
-            .opacity(configuration.isPressed ? 0.5 : 1)
-    }
-}

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.162.2-sp.1'
+  s.version          = '0.162.2-sp.10'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }
@@ -60,12 +60,15 @@ Pod::Spec.new do |s|
     "Typography/**/*.{swift,m,h}",
     "Uploader/**/*.{swift,m,h}"
   ]
+  s.resource_bundles = {
+    'MoMoUIKitsResources' => ['Resources/**/*']
+  }
   s.public_header_files = "StatusBarTap/*.h"
   s.frameworks             = 'SwiftUI', 'Combine'
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES'
   }
-  s.dependency  'SDWebImageSwiftUI', '2.2.3'
-  s.dependency       'lottie-ios', '4.5.2'
+  s.dependency  'SDWebImageSwiftUI', '2.2.1'
+  s.dependency       'lottie-ios', '4.6.0'
   s.dependency  'SkeletonUI', '1.0.11'
 end

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.162.2-sp.1'
+  s.version          = '0.162.2-sp.10'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }
@@ -11,8 +11,10 @@ Pod::Spec.new do |s|
   s.swift_version         = '5.0'
 
   s.source_files = 'Sources/**/*.{swift}'
-  s.resources    = 'Resources/**/*'
+  s.resource_bundles = {
+    'MoMoUIKitsDemoResources' => ['Resources/**/*']
+  }
   s.frameworks   = 'SwiftUI', 'UIKit'
   s.dependency 'MoMoUIKits'
-  s.dependency 'lottie-ios', '4.5.2'
+  s.dependency 'lottie-ios', '4.6.0'
 end

package/ios-demo/Sources/MoMoUIKitsDemo/MoMoUIKitsDemoFactory.swift

@@ -6,67 +6,19 @@ public enum MoMoUIKitsDemoViewControllerFactory {
     public static func make(
         context: MoMoUIKitsDemoContext = MoMoUIKitsDemoContext(),
         composeViewController: (() -> UIViewController)? = nil
+    ) -> UIViewController {
+        composeViewController?() ?? makeSwiftUI(context: context)
+    }
+
+    public static func makeSwiftUI(
+        context: MoMoUIKitsDemoContext = MoMoUIKitsDemoContext(),
+        onOpenCompose: @escaping () -> Void = {}
     ) -> UIViewController {
         UIHostingController(
-            rootView: MoMoUIKitsDemoView(
+            rootView: SwiftUIDemoBrowserView(
                 context: context,
-                composeViewController: composeViewController
+                onOpenCompose: onOpenCompose
             )
         )
     }
 }
-
-public struct MoMoUIKitsDemoView: View {
-    private let context: MoMoUIKitsDemoContext
-    private let composeViewController: (() -> UIViewController)?
-    @State private var mode: MoMoUIKitsDemoMode
-
-    public init(
-        context: MoMoUIKitsDemoContext = MoMoUIKitsDemoContext(),
-        composeViewController: (() -> UIViewController)? = nil
-    ) {
-        self.context = context
-        self.composeViewController = composeViewController
-        _mode = State(initialValue: composeViewController == nil ? .swiftUI : .compose)
-    }
-
-    public var body: some View {
-        VStack(spacing: 0) {
-            Picker("", selection: $mode) {
-                if composeViewController != nil {
-                    Text("Compose").tag(MoMoUIKitsDemoMode.compose)
-                }
-                Text("SwiftUI").tag(MoMoUIKitsDemoMode.swiftUI)
-            }
-            .pickerStyle(.segmented)
-            .padding(.horizontal, 16)
-            .padding(.vertical, 12)
-            .background(Color(.systemBackground))
-
-            Group {
-                if mode == .compose, let composeViewController {
-                    ComposeDemoHostView(makeViewController: composeViewController)
-                } else {
-                    SwiftUIDemoBrowserView(context: context)
-                }
-            }
-            .frame(maxWidth: .infinity, maxHeight: .infinity)
-        }
-    }
-}
-
-private enum MoMoUIKitsDemoMode: String {
-    case compose
-    case swiftUI
-}
-
-private struct ComposeDemoHostView: UIViewControllerRepresentable {
-    let makeViewController: () -> UIViewController
-
-    func makeUIViewController(context: Context) -> UIViewController {
-        makeViewController()
-    }
-
-    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
-}
-

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

@@ -89,6 +89,7 @@ public let ScreenUsages: [ScreenUsage] = [
     ScreenUsage(title: "Bottom Tab", destination: AnyView(BottomTabDemo()), icon: getIcon(icon: "Layout")),
     ScreenUsage(title: "Animated Header", destination: AnyView(AnimatedHeaderDemo()), icon: getIcon(icon: "Layout")),
     ScreenUsage(title: "Theme", destination: AnyView(ThemeDemo()), icon: getIcon(icon: "Typography")),
+    ScreenUsage(title: "Localize", destination: AnyView(LocalizeDemo()), icon: getIcon(icon: "Typography")),
 ]
 
 @available(iOS 16.0, *)
@@ -96,8 +97,22 @@ public struct HomeView: View {
     // Mirrors Compose's `inputSearch` state: bound into the header search and
     // forwarded into the content for filtering.
     @State private var searchText = ""
+    private let onOpenCompose: () -> Void
+    private let applicationContext: MiniAppContext?
+    private let composeApi: KitComposeApi?
+    private let config: KitConfig?
 
-    public init() {}
+    public init(
+        onOpenCompose: @escaping () -> Void = {},
+        applicationContext: MiniAppContext? = nil,
+        composeApi: KitComposeApi? = nil,
+        config: KitConfig? = nil
+    ) {
+        self.onOpenCompose = onOpenCompose
+        self.applicationContext = applicationContext
+        self.composeApi = composeApi
+        self.config = config
+    }
 
     public var body: some View {
         NavigationContainer(
@@ -124,7 +139,7 @@ public struct HomeView: View {
                     AnyView(
                         MoMoUIKits.Button(
                             title: "Footer Button",
-                            action: { print("Footer Button") },
+                            action: onOpenCompose,
                             type: .primary,
                             size: .large
                         )
@@ -179,7 +194,10 @@ public struct HomeView: View {
                     position: .right,
                     bottomPadding: nil
                 )
-            )
+            ),
+            applicationContext: applicationContext,
+            composeApi: composeApi,
+            config: config
         )
     }
 }

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

@@ -0,0 +1,188 @@
+//
+//  LocalizeDemo.swift
+//  MoMoUIKitsDemo
+//
+//  SwiftUI port of the Compose demo `sample/shared/.../screens/LocalizeUsage.kt`,
+//  showcasing the `Localize` i18n port (ios/Application/Localize.swift).
+//  Synced from sample/iosApp/iosApp/Demo/LocalizeDemo.swift.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// App-specific dictionary. Keys here do NOT exist in the kit defaults, so addTranslations
+// registers them cleanly (addTranslations keeps existing keys on clash, host-default wins).
+private let AppTranslations = LocalizationObject(
+    vi: [
+        "demo_greeting": "Xin chào MoMo!",
+        "demo_cart_title": "Giỏ hàng của bạn",
+    ],
+    en: [
+        "demo_greeting": "Hello MoMo!",
+        "demo_cart_title": "Your cart",
+    ]
+)
+
+struct LocalizeDemo: View {
+    @EnvironmentObject private var localize: Localize
+
+    private var isEnglish: Bool { localize.currentLanguage == Localize.EN }
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 0) {
+
+                LocalizeSectionBox(title: "Đổi ngôn ngữ (toàn app)") {
+                    MomoText(
+                        "localize.changeLanguage(...) đổi ngôn ngữ cho cả NavigationContainer — mọi màn hình đang đọc translate() sẽ cập nhật theo.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    Switch(
+                        .constant(isEnglish),
+                        onChange: { _ in localize.changeLanguage(isEnglish ? Localize.VI : Localize.EN) },
+                        title: "English"
+                    )
+                    MomoText("currentLanguage = \(localize.currentLanguage)", typography: .labelDefaultMedium)
+                }
+
+                LocalizeSectionBox(title: "translate(key) — từ điển mặc định của kit") {
+                    TranslationRow(key: "confirm", value: localize.translate("confirm"))
+                    TranslationRow(key: "cancel", value: localize.translate("cancel"))
+                    TranslationRow(key: "done", value: localize.translate("done"))
+                    TranslationRow(key: "seeMore", value: localize.translate("seeMore"))
+                    TranslationRow(key: "balance", value: localize.translate("balance"))
+                }
+
+                LocalizeSectionBox(title: "Key thiếu → trả về chính key") {
+                    MomoText(
+                        "translate() với key không có (hoặc giá trị rỗng) sẽ trả lại đúng key để dễ phát hiện thiếu bản dịch.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    TranslationRow(key: "not_a_real_key", value: localize.translate("not_a_real_key"))
+                }
+
+                LocalizeSectionBox(title: "Chèn tham số vào bản dịch") {
+                    MomoText(
+                        "Bản port không tự nội suy {placeholder} — tự replace ở nơi dùng.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    TranslationRow(
+                        key: "voucherRemindHour",
+                        value: localize.translate("voucherRemindHour").replacingOccurrences(of: "{hours}", with: "3")
+                    )
+                }
+
+                LocalizeSectionBox(title: "translateData(vi:en:) — dịch nội tuyến") {
+                    MomoText(
+                        "Cho chuỗi dùng một lần, không cần khai báo key trong từ điển.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    MomoText(localize.translateData(vi: "Thanh toán ngay", en: "Pay now"), typography: .headerDefaultBold)
+                }
+
+                LocalizeSectionBox(title: "translateData(map) — chọn theo ngôn ngữ") {
+                    MomoText(
+                        localize.translateData([
+                            Localize.VI: "Lịch sử giao dịch",
+                            Localize.EN: "Transaction history",
+                        ]),
+                        typography: .headerDefaultBold
+                    )
+                }
+
+                LocalizeSectionBox(title: "addTranslations — từ điển riêng của app") {
+                    MomoText(
+                        "Host đăng ký key riêng (đã add khi màn hình xuất hiện), rồi dùng translate() như key mặc định.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    TranslationRow(key: "demo_greeting", value: localize.translate("demo_greeting"))
+                    TranslationRow(key: "demo_cart_title", value: localize.translate("demo_cart_title"))
+                }
+
+                LocalizeSectionBox(title: "Ví dụ thực tế") {
+                    // errorCode already ends with a separator ("Mã lỗi: " / "Error code: ").
+                    MomoText(localize.translate("errorCode") + "E-4097", typography: .bodyDefaultRegular)
+                    HStack(spacing: Spacing.M) {
+                        Button(
+                            title: localize.translate("cancel"),
+                            action: {},
+                            type: .outline,
+                            size: .medium,
+                            isFull: false
+                        )
+                        Button(
+                            title: localize.translate("confirm"),
+                            action: {},
+                            type: .primary,
+                            size: .medium,
+                            isFull: false
+                        )
+                    }
+                }
+
+                Spacer(minLength: 32)
+            }
+        }
+        // Registers the app-specific dictionary once per appearance; addTranslations'
+        // merge is idempotent, so re-entry (e.g. re-navigating back to this screen) is safe.
+        .onAppear {
+            localize.addTranslations(AppTranslations)
+        }
+    }
+}
+
+// MARK: - LocalizeSectionBox
+
+/// Titled rounded-card section container, mirroring Compose's `BasicColumnBox`
+/// (title label above a `theme.colors.background.surface` card with `Radius.M` corners).
+private struct LocalizeSectionBox<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+    let title: String
+    @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: .leading, spacing: 8) {
+                content()
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(12)
+            .background(theme.colors.background.surface)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+        }
+        .padding(12)
+    }
+}
+
+// MARK: - TranslationRow
+
+private struct TranslationRow: View {
+    @Environment(\.appTheme) private var theme
+    let key: String
+    let value: String
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 2) {
+            MomoText(key, typography: .labelDefaultMedium, color: theme.colors.text.secondary)
+            MomoText(value, typography: .bodyDefaultRegular)
+        }
+    }
+}
+
+// MARK: - Preview
+
+#Preview {
+    if #available(iOS 16.0, *) {
+        NavigationStack {
+            LocalizeDemo()
+                .environmentObject(Localize())
+        }
+    } else {
+        // Fallback on earlier versions
+    }
+}

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

@@ -23,6 +23,7 @@ struct NavigationDemo: View {
 @available(iOS 16.0, *)
 private struct NavigationDemoContent: View {
     @EnvironmentObject private var navigator: Navigator
+    @State private var textValue1 = ""
 
     var body: some View {
         ScrollView {
@@ -72,6 +73,7 @@ private struct NavigationDemoContent: View {
                 row("Show Bottom Sheet") {
                     navigator.showBottomSheet({
                         VStack(spacing: 12) {
+                            Input(text: $textValue1, placeholder: "Test Bottom Sheet")
                             ForEach(0..<4, id: \.self) { i in
                                 MomoText("Bottom sheet row \(i + 1)")
                                     .frame(maxWidth: .infinity, alignment: .leading)