@momo-kits/native-kits 0.163.1-beta.5-debug → 0.163.1-beta.6-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.163.1-beta.5-debug"
+        version = "0.163.1-beta.6-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.5-debug'
+    spec.version                  = '0.163.1-beta.6-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

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.5
+version=0.163.1-beta.6
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Application/Components.swift

@@ -143,6 +143,22 @@ public struct HeaderRightWidthKey: PreferenceKey {
     }
 }
 
+// MARK: - Bottom-tab root preference
+
+/// Set by `BottomTab` on appear so its enclosing `StackScreen` can detect that
+/// it's hosting a self-contained bottom-tab surface and skip its own bottom
+/// safe-area reservation — mirrors Compose's `Navigation.markAsBottomTabRoot()`
+/// (`navigation.isBottomTabRoot`, read by `StackScreen.kt`'s `MainContent`).
+/// Without this, `BottomTab`'s own internal safe-area handling gets an extra,
+/// unwanted inset stacked on top of it by the outer `StackScreen`, pushing the
+/// tab bar up higher than the true bottom inset.
+public struct IsBottomTabRootKey: PreferenceKey {
+    public static var defaultValue: Bool = false
+    public static func reduce(value: inout Bool, nextValue: () -> Bool) {
+        value = value || nextValue()
+    }
+}
+
 // MARK: - Header View
 
 public struct Header: View {

package/ios/Application/Localize.swift

@@ -0,0 +1,277 @@
+//
+//  Localize.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `application/Localize.kt`, itself a port of
+//  momo-kits React Native's `Application/Localize.ts`. Holds the merged
+//  dictionary (kit defaults + host overrides) and the active language,
+//  switched at runtime via `changeLanguage`. `Localize` is an `ObservableObject`
+//  so a language switch republishes to consumers of `translate`/`translateData`,
+//  mirroring Compose's snapshot-state-backed `language`.
+//
+
+import Foundation
+
+/// Translation dictionary keyed by language; both `vi` and `en` are required.
+public struct LocalizationObject {
+    public var vi: [String: String]
+    public var en: [String: String]
+
+    public init(vi: [String: String] = [:], en: [String: String] = [:]) {
+        self.vi = vi
+        self.en = en
+    }
+}
+
+public final class Localize: ObservableObject {
+    public static let VI = "vi"
+    public static let EN = "en"
+
+    private var assets: LocalizationObject
+    @Published public private(set) var currentLanguage: String = Localize.VI
+
+    public init(_ translations: LocalizationObject = LocalizationObject()) {
+        self.assets = Localize.merge(base: Localize.defaultLanguage, override: translations)
+    }
+
+    public func changeLanguage(_ language: String?) {
+        currentLanguage = (language == Localize.EN) ? Localize.EN : Localize.VI
+    }
+
+    public func translate(_ key: String) -> String {
+        let dictionary = currentLanguage == Localize.EN ? assets.en : assets.vi
+        if let value = dictionary[key], !value.isEmpty { return value }
+        return key
+    }
+
+    public func translateData(_ data: [String: String]) -> String {
+        if let value = data[currentLanguage] { return value }
+        let body = data.map { "\"\($0.key)\":\"\($0.value)\"" }.joined(separator: ",")
+        return "{\(body)}"
+    }
+
+    public func translateData(vi: String, en: String) -> String {
+        currentLanguage == Localize.EN ? en : vi
+    }
+
+    /// Existing keys win (mirrors Compose: `merge(translations, assets)`).
+    public func addTranslations(_ translations: LocalizationObject) {
+        assets = Localize.merge(base: translations, override: assets)
+    }
+
+    private static func merge(base: LocalizationObject, override: LocalizationObject) -> LocalizationObject {
+        LocalizationObject(
+            vi: base.vi.merging(override.vi) { _, new in new },
+            en: base.en.merging(override.en) { _, new in new }
+        )
+    }
+
+    private static let defaultLanguage = LocalizationObject(
+        vi: [
+            "errorCode": "Mã lỗi: ",
+            "seeMore": "Xem thêm",
+            "cancel": "Huỷ",
+            "done": "Xong",
+            "confirm": "Xác nhận",
+            "month": "tháng",
+            "day": "ngày",
+            "choose": "Chọn",
+            "sent": "Đã gửi",
+            "received": "Đã tiếp nhận",
+            "processing": "Đang xử lý",
+            "processed": "Đã xử lý",
+            "addImg": "Thêm hình",
+            "chooseBtn": "Chọn button",
+            "imgEg": "Hình ảnh tham khảo",
+            "filter": "Sắp xếp",
+            "shipping": "Đang giao hàng",
+            "men": "Nam",
+            "women": "Nữ",
+            "more": "Khác",
+            "expDate": "Ngày hết hạn",
+            "exp": "HSD",
+            "inActive": "Chưa kích hoạt",
+            "voucherRemindHour": "Hết hạn sau {hours} giờ",
+            "voucherRemindMinute": "Hết hạn sau {minutes} phút",
+            "voucherRemindSecond": "Hết hạn sau {seconds} giây",
+            "voucherRemindDay": "Hết hạn sau {days} ngày",
+            "chooseRoundtrip": "Chọn vé khứ hồi",
+            "depart": "Ngày đi",
+            "return": "Ngày về",
+            "departing": "Đi",
+            "returning": "Về",
+            "jan": "Tháng 1",
+            "feb": "Tháng 2",
+            "mar": "Tháng 3",
+            "apr": "Tháng 4",
+            "may": "Tháng 5",
+            "jun": "Tháng 6",
+            "jul": "Tháng 7",
+            "aug": "Tháng 8",
+            "sep": "Tháng 9",
+            "oct": "Tháng 10",
+            "nov": "Tháng 11",
+            "dec": "Tháng 12",
+            "mon": "T2",
+            "tue": "T3",
+            "wed": "T4",
+            "thu": "T5",
+            "fri": "T6",
+            "sat": "T7",
+            "sun": "CN",
+            "showLunar": "Hiển thị lịch âm",
+            "newYear": "Tết Dương lịch",
+            "valentine": "Ngày Lễ Tình nhân",
+            "womenDay": "Ngày Quốc tế Phụ nữ",
+            "liberationDay": "Ngày giải phóng Miền Nam thống nhất đất nước",
+            "laborDay": "Ngày Quốc tế Lao động",
+            "childrenDay": "Ngày Quốc tế Thiếu nhi",
+            "nationalDay": "Quốc khánh nước CHXHCN Việt Nam",
+            "womenDayVN": "Ngày Phụ nữ Việt Nam",
+            "teacherDay": "Ngày Nhà giáo Việt Nam",
+            "christmasEve": "Ngày Lễ Giáng Sinh",
+            "christmas": "Ngày Lễ Giáng Sinh",
+            "lunarNewYear": "Tết Nguyên Đán",
+            "hungKingDay": "Giỗ Tổ Hùng Vương",
+            "balance": "Số dư trong ví",
+            "chooseDate": "Chọn ngày tháng năm",
+            "year": "năm",
+            "hour": "giờ",
+            "minute": "phút",
+            "from": "Từ",
+            "to": "Đến",
+            "connected": "Đã kết nối",
+            "disconnected": "Mất kết nối",
+            "hide": "Ẩn",
+            "viewAllTitle": "Xem tất cả",
+            "headerTitle": "Lịch sử thanh toán",
+            "SHORTEN": "THU GỌN",
+            "viewMoreBank": "XEM THÊM (${otherItemCount} ngân hàng)",
+            "transaction_success": "Thành công",
+            "transaction_fail": "Thất bại",
+            "transaction_processing": "Đang xử lý",
+            "viewMore": "Xem thêm",
+            "shorten": "Thu gọn",
+            "Payment": "Thanh toán ${serviceName}",
+            "currencyUnit": "đ",
+            "Month": "Tháng",
+            "save": "Lưu",
+            "favoriteIn": "Thêm dịch vụ yêu thích",
+            "favoriteOut": "Xóa dịch vụ yêu thích",
+            "deviceIn": "Thêm vào thiết bị",
+            "setting": "Cài đặt",
+            "transaction": "Lịch sử giao dịch",
+            "share": "Chia sẽ dịch vụ",
+            "information": "Thông tin chung",
+            "tutorial": "Hướng dẫn sử dụng",
+            "question": "Câu hỏi thường gặp",
+            "support": "Trung tâm hỗ trợ",
+            "skip": "Bỏ qua",
+            "enterPhoneNumber": "Vui lòng nhập số điện thoại",
+            "invalidPhoneNumber": "Số điện thoại không đúng",
+        ],
+        en: [
+            "seeMore": "See more",
+            "cancel": "Cancel",
+            "done": "Done",
+            "confirm": "Confirm",
+            "month": "month",
+            "day": "day",
+            "choose": "Choose",
+            "sent": "Sent",
+            "received": "Received",
+            "processing": "Processing",
+            "processed": "Done",
+            "addImg": "Add image",
+            "chooseBtn": "Choose button",
+            "imgEg": "Example images",
+            "filter": "Filter",
+            "shipping": "Shipping",
+            "men": "Men",
+            "women": "Women",
+            "more": "More",
+            "expDate": "Expiration date",
+            "exp": "EXP",
+            "inActive": "Not Activated",
+            "voucherRemindHour": "Revoke after {hours} hours",
+            "voucherRemindMinute": "Revoke after {minutes} minutes",
+            "voucherRemindSecond": "Revoke after {seconds} seconds",
+            "voucherRemindDay": "Revoke after {days} days",
+            "chooseRoundtrip": "Choose roundtrip ticket",
+            "depart": "Departing",
+            "return": "Returning",
+            "departing": "De",
+            "returning": "Re",
+            "jan": "January",
+            "feb": "February",
+            "mar": "March",
+            "apr": "April",
+            "may": "May",
+            "jun": "June",
+            "jul": "July",
+            "aug": "August",
+            "sep": "September",
+            "oct": "October",
+            "nov": "November",
+            "dec": "December",
+            "mon": "Mon",
+            "tue": "Tue",
+            "wed": "Wed",
+            "thu": "Thu",
+            "fri": "Fri",
+            "sat": "Sat",
+            "sun": "Sun",
+            "showLunar": "Show Lunar Calendar",
+            "newYear": "New Year's Day",
+            "valentine": "Valentine's Day",
+            "womenDay": "International Women's Day",
+            "liberationDay": "Liberation Day",
+            "laborDay": "Internation Labor's Day",
+            "childrenDay": "International Labor's Day",
+            "nationalDay": "National Day",
+            "womenDayVN": "Vietnamese Women's Day",
+            "teacherDay": "Teacher's Day",
+            "christmasEve": "Christmas Eve",
+            "christmas": "Christmas Day",
+            "lunarNewYear": "Lunar New Year",
+            "hungKingDay": "Hung Kings' Festival",
+            "balance": "Wallet Balance",
+            "chooseDate": "Choose date",
+            "year": "year",
+            "hour": "hour",
+            "minute": "minute",
+            "from": "From",
+            "to": "To",
+            "connected": "Connected",
+            "disconnected": "Disconnected",
+            "hide": "Hide",
+            "viewAllTitle": "View all",
+            "headerTitle": "Transaction history",
+            "SHORTEN": "SHORTEN",
+            "viewMoreBank": "VIEW MORE (${otherItemCount} banks)",
+            "transaction_success": "Success",
+            "transaction_fail": "Fail",
+            "transaction_processing": "Processing",
+            "viewMore": "View more",
+            "shorten": "Shorten",
+            "Payment": "${serviceName} payment",
+            "currencyUnit": "VND",
+            "Month": "Month",
+            "save": "Save",
+            "favoriteIn": "Add to favorite services",
+            "favoriteOut": "Remove to favorite services",
+            "deviceIn": "Add to device",
+            "setting": "Settings",
+            "transaction": "Transaction History",
+            "share": "Share",
+            "information": "Information",
+            "tutorial": "Instruction",
+            "question": "FAQ",
+            "support": "Support center",
+            "errorCode": "Error code: ",
+            "skip": "Skip",
+            "enterPhoneNumber": "Please enter your phone number",
+            "invalidPhoneNumber": "Invalid phone number",
+        ]
+    )
+}

package/ios/Application/Navigation/BottomTab/BottomTab.swift

@@ -56,6 +56,7 @@ public struct BottomTab: View {
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .ignoresSafeArea(edges: .bottom)
+        .preference(key: IsBottomTabRootKey.self, value: true)
     }
 
     @ViewBuilder

package/ios/Application/Navigation/NavigationContainer.swift

@@ -14,6 +14,7 @@ import SwiftUI
 public struct NavigationContainer<Initial: View>: View {
     @StateObject private var navigator: Navigator
     @StateObject private var applicationEnvironment: ApplicationEnvironment
+    @StateObject private var localize: Localize
 
     private let setNavigator: ((Navigator) -> Void)?
     private let composeApi: KitComposeApi?
@@ -25,6 +26,7 @@ public struct NavigationContainer<Initial: View>: View {
         applicationContext: MiniAppContext? = nil,
         composeApi: KitComposeApi? = nil,
         config: KitConfig? = nil,
+        localize: Localize? = nil,
         setNavigator: ((Navigator) -> Void)? = nil
     ) {
         let nav = Navigator(
@@ -41,6 +43,7 @@ public struct NavigationContainer<Initial: View>: View {
                 config: config
             )
         )
+        _localize = StateObject(wrappedValue: localize ?? Localize())
         self.composeApi = composeApi
         self.setNavigator = setNavigator
     }
@@ -55,11 +58,13 @@ public struct NavigationContainer<Initial: View>: View {
         .environmentObject(navigator)
         .environmentObject(applicationEnvironment)
         .environment(\.applicationEnvironment, applicationEnvironment)
+        .environmentObject(localize)
         .fullScreenCover(item: $navigator.presented) { route in
             screenView(forDialog: route)
                 .environmentObject(navigator)
                 .environmentObject(applicationEnvironment)
                 .environment(\.applicationEnvironment, applicationEnvironment)
+                .environmentObject(localize)
         }
         .overlay {
             if let item = navigator.overplay {
@@ -67,6 +72,7 @@ public struct NavigationContainer<Initial: View>: View {
                     .environmentObject(navigator)
                     .environmentObject(applicationEnvironment)
                     .environment(\.applicationEnvironment, applicationEnvironment)
+                    .environmentObject(localize)
             }
         }
         .onAppear {

package/ios/Application/Navigation/Overplay/BottomSheet.swift

@@ -43,42 +43,84 @@ struct BottomSheetView<Content: View>: View {
     let content: () -> Content
 
     @EnvironmentObject private var navigator: Navigator
+    @Environment(\.appTheme) private var theme
+    @Environment(\.applicationEnvironment) private var appEnv
 
     /// Vertical translation of the sheet; starts off-screen and animates to 0.
     @State private var sheetOffset: CGFloat = UIScreen.main.bounds.height
-    @State private var scrimAlpha: CGFloat = 0
+    /// Mirrors Compose's `backgroundAlpha`: only touched by open()/close(), never by drag.
+    @State private var backgroundAlpha: CGFloat = 0
     @State private var sheetHeight: CGFloat = 0
     @State private var didAppear = false
+    @State private var keyboardHeight: CGFloat = 0
+    /// Live drag offset, isolated from `sheetOffset` so a touch-move only invalidates
+    /// this gesture-scoped value instead of forcing the whole body (including
+    /// `content()`) to reconstruct every frame — mirrors the pattern already used in
+    /// `ios/PopupView/PopupView.swift` for smooth drag-to-dismiss.
+    @GestureState private var dragTranslation: CGFloat = 0
 
     /// Mirrors Compose's `sheetCloseOffset` (100dp drag threshold to dismiss).
     private let closeThreshold: CGFloat = 100
 
+    /// Mirrors Compose's per-term peak (0.3f). Combined with `backgroundAlpha` the
+    /// steady-state (fully open) scrim peaks at 0.6, matching ModalScreen's peak.
+    private let maxDynamicAlpha: CGFloat = 0.3
+
     private var screenHeight: CGFloat { UIScreen.main.bounds.height }
     private var bottomInset: CGFloat { safeAreaBottomInset() }
+    /// While the keyboard is up, it already covers the home-indicator area, so it
+    /// replaces (rather than adds to) the usual bottom-inset filler.
+    private var effectiveBottomInset: CGFloat { keyboardHeight > 0 ? keyboardHeight : bottomInset }
 
     private var backgroundColor: Color {
-        // Compose uses background.surface (white) for `isSurface`, otherwise
-        // background.default. Both resolve to white in the current iOS palette.
-        isSurface ? Colors.black01 : Colors.black01
+        isSurface ? theme.colors.background.surface : theme.colors.background.default
+    }
+
+    private var effectiveOffset: CGFloat { sheetOffset + dragTranslation }
+
+    /// Mirrors Compose's `dynamicAlpha`: a plain derived value (not itself animated)
+    /// that tracks the current offset live, shrinking toward 0 as the sheet is
+    /// dragged down.
+    private var dynamicAlpha: CGFloat {
+        let denom = sheetHeight > 0 ? sheetHeight : screenHeight
+        guard denom > 0 else { return maxDynamicAlpha }
+        let progress = min(max(1 - effectiveOffset / denom, 0), 1)
+        return progress * maxDynamicAlpha
     }
 
+    /// Mirrors Compose's `alpha = backgroundAlpha + dynamicAlpha`: additive, so the
+    /// scrim peaks at 0.6 at rest and only fades to a 0.3 floor while dragging
+    /// (backgroundAlpha holds steady until an explicit close()).
+    private var totalScrimAlpha: CGFloat { backgroundAlpha + dynamicAlpha }
+
     var body: some View {
         ZStack(alignment: .bottom) {
-            // Dimmed scrim (max 0.3 alpha, mirrors Compose).
-            Color.black.opacity(scrimAlpha)
-                .ignoresSafeArea()
+            // Dimmed scrim — additive backgroundAlpha + dynamicAlpha (see above).
+            Color.black.opacity(totalScrimAlpha)
                 .contentShape(Rectangle())
                 .onTapGesture {
                     if barrierDismissible { close() }
                 }
 
             sheet
-                .offset(y: sheetOffset)
+                .offset(y: effectiveOffset)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .ignoresSafeArea()
+        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { notification in
+            guard let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
+            withAnimation(.easeOut(duration: 0.25)) {
+                keyboardHeight = UIScreen.main.bounds.height - endFrame.origin.y
+            }
+        }
         .onAppear {
             guard !didAppear else { return }
             didAppear = true
+            ScreenTracker.trackPopupDisplayed(
+                maxApi: appEnv.maxApi,
+                context: appEnv.applicationContext,
+                parentScreenName: ScreenTracker.getLastScreenName()
+            )
             navigator.registerOverplayDismiss { close() }
             open()
         }
@@ -103,16 +145,16 @@ struct BottomSheetView<Content: View>: View {
             .gesture(dragGesture)
 
             Rectangle()
-                .fill(Colors.black04)
+                .fill(theme.colors.border.default)
                 .frame(height: 1)
 
             content()
 
             backgroundColor
-                .frame(height: bottomInset)
+                .frame(height: effectiveBottomInset)
         }
         .frame(maxWidth: .infinity)
-        .frame(maxHeight: screenHeight - safeAreaTopInset() - 90, alignment: .bottom)
+        .frame(alignment: .bottom)
         .background(
             GeometryReader { geo in
                 Color.clear.onAppear { sheetHeight = geo.size.height }
@@ -143,13 +185,33 @@ struct BottomSheetView<Content: View>: View {
     // MARK: - Drag handling (mirrors Compose's detectDragGestures)
 
     private var dragGesture: some Gesture {
-        DragGesture()
-            .onChanged { value in
-                let newOffset = max(value.translation.height, 0)
-                sheetOffset = newOffset
+        // `.global` (not the default `.local`) so the gesture tracks against the
+        // window rather than the handle's own view, which is itself repositioned
+        // every frame by this same gesture's output (`sheet.offset(y: effectiveOffset)`
+        // in `body`) — the local coordinate space chasing its own moving reference
+        // frame is a plausible source of a continuous drag-time jitter.
+        DragGesture(coordinateSpace: .global)
+            .onChanged { _ in
+                // Touching the handle should immediately settle `sheetOffset` to its
+                // resting value (0) with no animation, so a drag that starts while the
+                // open animation — or the keyboard-driven resize, which shifts this
+                // same bottom-anchored top edge — is still in flight doesn't fight a
+                // moving target. Without this, the live drag value chases an animated
+                // one, producing a couple of corrective jumps before it settles.
+                if sheetOffset != 0 {
+                    sheetOffset = 0
+                }
+            }
+            .updating($dragTranslation) { value, state, _ in
+                state = max(value.translation.height, 0)
             }
-            .onEnded { _ in
-                if sheetOffset > closeThreshold {
+            .onEnded { value in
+                let finalOffset = max(value.translation.height, 0)
+                // Capture into persisted state BEFORE @GestureState resets to 0,
+                // avoiding a one-frame snap back to rest before close()'s own
+                // slide-out animation starts (mirrors PopupView's `lastDragPosition`).
+                sheetOffset = finalOffset
+                if finalOffset > closeThreshold {
                     close()
                 } else {
                     withAnimation(.spring(response: 0.3, dampingFraction: 0.9)) {
@@ -163,17 +225,23 @@ struct BottomSheetView<Content: View>: View {
 
     private func open() {
         DispatchQueue.main.async {
-            withAnimation(.easeOut(duration: 0.1)) { scrimAlpha = 0.3 }
+            withAnimation(.timingCurve(0.05, 0.7, 0.1, 1, duration: 0.1)) { backgroundAlpha = maxDynamicAlpha }
             withAnimation(.timingCurve(0.05, 0.7, 0.1, 1, duration: 0.35)) { sheetOffset = 0 }
         }
     }
 
+    /// Mirrors Compose's `closeEvent`: slide out over 200ms, then fade the scrim
+    /// out over 100ms only after the slide finishes, then dismiss.
     private func close() {
         withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.2)) {
             sheetOffset = max(sheetHeight, screenHeight)
-            scrimAlpha = 0
         }
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+            withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.1)) {
+                backgroundAlpha = 0
+            }
+        }
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
             navigator.finishOverplayDismiss()
         }
     }

package/ios/Application/StackScreen.swift

@@ -98,6 +98,7 @@ public struct StackScreen<Content: View>: View {
     @State private var scrollOffset: CGFloat = 0
     @State private var keyboardHeight: CGFloat = 0
     @State private var headerRightWidth: CGFloat = 0
+    @State private var isBottomTabRoot: Bool = false
 
     /// Header background fade tied to scroll: 0 → transparent (over a hero image
     /// or transparent header), 1 → opaque surface with the drop shadow.
@@ -135,7 +136,10 @@ public struct StackScreen<Content: View>: View {
         GeometryReader { geometry in
             let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
             let bottomInset = min(geometry.safeAreaInsets.bottom, 21)
-            let contentBottomInset = footer == nil ? bottomInset : 0
+            // Skip this screen's own bottom-inset reservation when hosting a footer
+            // OR a self-contained BottomTab surface (mirrors Compose's
+            // `if (options.footerComponent != null || isBottomTab) 0.dp else navigationBar`).
+            let contentBottomInset = (footer == nil && !isBottomTabRoot) ? bottomInset : 0
 
             ZStack(alignment: .top) {
                 // Background color
@@ -175,6 +179,9 @@ public struct StackScreen<Content: View>: View {
             .onPreferenceChange(HeaderRightWidthKey.self) { width in
                 if headerRightWidth != width { headerRightWidth = width }
             }
+            .onPreferenceChange(IsBottomTabRootKey.self) { isRoot in
+                if isBottomTabRoot != isRoot { isBottomTabRoot = isRoot }
+            }
             .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { notification in
                 guard useAvoidKeyboard,
                       let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }

package/ios/Colors+Radius+Spacing/Colors.swift

@@ -13,7 +13,7 @@ public enum Colors {
     public static let textSecondary = Color.momoAsset("TextSecondary")
     public static let card = Color.momoAsset("Card")
     public static let error = Color.momoAsset("Error")
-    public static let info = Color(hex: "007aff")
+    public static let info = blue03
     public static let success = Color.momoAsset("Success")
 
     public static let black20 = Color(hex: "000000")
@@ -49,15 +49,18 @@ public enum Colors {
     public static let pink03 = Color(hex: "eb2f96")
     public static let pink02 = Color(hex: "d42a87")
     public static let pink01 = Color(hex: "bc2678")
+    public static let pinkMoMoBranding = Color(hex: "a50064")
 
 
-    public static let violet10 = Color(hex: "fcf8fe")
-    public static let violet09 = Color(hex: "faf4fe")
+    public static let violet11 = Color(hex: "fcf8fe")
+    public static let violet11Stroke = Color(hex: "dfe1e5")
+    public static let violet10 = Color(hex: "faf4fe")
+    public static let violet09 = Color(hex: "f4e9fd")
     public static let violet08 = Color(hex: "ead4fc")
     public static let violet07 = Color(hex: "d5aaf9")
-    public static let violet06 = Color(hex: "f4e9fd")
-    public static let violet05 = Color(hex: "c07ff6")
-    public static let violet04 = Color(hex: "ab55f3")
+    public static let violet06 = Color(hex: "c07ff6")
+    public static let violet05 = Color(hex: "ab55f3")
+    public static let violet04 = Color(hex: "a03ff1")
     public static let violet03 = Color(hex: "962af0")
     public static let violet02 = Color(hex: "8726d8")
     public static let violet01 = Color(hex: "7822c0")

package/ios/Colors+Radius+Spacing/Spacing.swift

@@ -8,5 +8,7 @@ public enum Spacing {
     public static let L: CGFloat = 16
     public static let XL: CGFloat = 24
     public static let XXL: CGFloat = 32
-    public static let XXXL: CGFloat = 48
+    public static let Size3XL: CGFloat = 48
+    public static let Size4XL: CGFloat = 56
+    public static let Size5XL: CGFloat = 64
 }

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.163.1-beta.5'
+  s.version          = '0.163.1-beta.6'
   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.5'
+  s.version          = '0.163.1-beta.6'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

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, *)

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)

package/package.json

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