@momo-kits/native-kits 0.162.49 → 0.162.50-debug

package/ios/Layout/ScreenLayout.swift

@@ -32,7 +32,8 @@ public struct ScreenLayout: Equatable {
     public let width: CGFloat
     public let height: CGFloat
     public let isIPhoneDuo: Bool
-    /// The device has a hinge, folded or not, whatever the window size; drives popups, modal and bottom sheet.
+    /// iPhone Duo folded or not, whatever the window size (its hinge, or the outer display's one-sided strip);
+    /// drives popups, modal and bottom sheet.
     public let isDuoDevice: Bool
     public let insets: EdgeInsets
     public let insetLeft: CGFloat
@@ -75,6 +76,11 @@ enum DuoMetrics {
     static let floatingTabBarHeight: CGFloat = 62
     static let floatingTabBarMargin: CGFloat = 20
     static let floatingTabBarInsetOverlap: CGFloat = 13
+    // Width of a system alert on the inner display, in both orientations.
+    static let modalMaxWidth: CGFloat = 440
+    // Fits a PopupNotify with image, scrolled description and actions at the max width (RN
+    // Application/device.ts); taller content scrolls instead of filling the inner display.
+    static let modalMaxHeight: CGFloat = 640
 }
 
 enum HeaderMetrics {
@@ -178,8 +184,10 @@ extension ScreenLayout {
             )
         }
 
+        // the outer display reports no hinge; its one-sided strip still gives it away
         return ScreenLayout(
-            width: width, height: height, isIPhoneDuo: true, isDuoDevice: isDuoDevice, insets: insets,
+            width: width, height: height, isIPhoneDuo: true,
+            isDuoDevice: isDuoDevice || insets.leading != insets.trailing, insets: insets,
             insetLeft: insets.leading, insetRight: insets.trailing,
             contentWidth: width - insets.leading - insets.trailing,
             headerHeight: headerHeight, headerStatusBarHeight: headerStatusBarHeight, sideBar: sideBar,
@@ -256,12 +264,24 @@ extension ScreenLayout {
     public var duoTopInset: CGFloat {
         max(insets.top, height > width ? max(insets.leading, insets.trailing) * 2 : 0)
     }
+
+    /// Room for a dialog on iPhone Duo: inside the safe area, so clear of the side toolbar strip, and
+    /// capped so it stays a dialog on the inner display.
+    var duoModalMaxWidth: CGFloat {
+        min(width - insets.leading - insets.trailing - Spacing.XL * 2, DuoMetrics.modalMaxWidth)
+    }
+
+    var duoModalMaxHeight: CGFloat {
+        min(height - insets.top - insets.bottom - Spacing.XL * 2, DuoMetrics.modalMaxHeight)
+    }
 }
 
 /// Snapshot for call sites without `\.screenLayout`; not reactive. `windowSize` is ignored,
 /// kept for host call sites.
 public func isIPhoneDuoDevice(windowSize: CGSize? = nil) -> Bool {
-    isPhoneIdiom && FoldableDevice.isFoldable(measuredIn: keyWindow)
+    guard isPhoneIdiom else { return false }
+    let insets = keyWindow?.safeAreaInsets
+    return FoldableDevice.isFoldable(measuredIn: keyWindow) || insets.map { $0.left != $0.right } == true
 }
 
 /// Apple's foldable check (as the host's `SideTabRailView.isFoldableDevice`): only a device with a

package/ios/Navigation/BottomSheet.swift

@@ -15,16 +15,25 @@ import SwiftUI
 
 /// Mirrors Compose's `sealed class BottomHeader` (Title / Custom).
 public struct BottomSheetHeader {
+    struct Back {
+        let icon: String
+        let action: () -> Void
+    }
+
     enum Style {
-        case title(String)
+        case title(String, back: Back?)
         case custom(() -> AnyView)
     }
 
     let style: Style
 
-    /// Mirrors `BottomHeader.Title`.
-    public static func title(_ text: String = "Bottom Sheet Title") -> BottomSheetHeader {
-        BottomSheetHeader(style: .title(text))
+    /// Mirrors `BottomHeader.Title`. `onBack` shows a back button; the sheet closes, then it runs.
+    public static func title(
+        _ text: String = "Bottom Sheet Title",
+        backIcon: String = "arrow-back",
+        onBack: (() -> Void)? = nil
+    ) -> BottomSheetHeader {
+        BottomSheetHeader(style: .title(text, back: onBack.map { Back(icon: backIcon, action: $0) }))
     }
 
     /// Mirrors `BottomHeader.Custom`.
@@ -68,6 +77,9 @@ struct BottomSheetView<Content: View>: View {
     /// Mirrors Compose's `sheetCloseOffset` (100dp drag threshold to dismiss).
     private let closeThreshold: CGFloat = 100
 
+    private let indicatorHeight: CGFloat = 16
+    private let headerRowHeight: CGFloat = 56
+
     /// 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
@@ -78,6 +90,21 @@ struct BottomSheetView<Content: View>: View {
     private var isDuo: Bool { layout.isDuoDevice }
     // iPhone Duo inner display: center the sheet instead of spanning the width
     private var isDuoCentered: Bool { isDuo && layout.width >= 600 }
+    /// Outer display: the sheet floats Spacing.M off the side edges like system sheets, its content
+    /// stays in the safe area and its buttons move to the side bar column (HIG).
+    private var isDuoFloating: Bool { isDuo && !isDuoCentered }
+
+    private var titleBack: BottomSheetHeader.Back? {
+        if case .title(_, let back) = header.style { return back }
+        return nil
+    }
+
+    private var sideColumn: SideBarLayout? {
+        guard isDuoFloating, case .title = header.style, let sideBar = layout.sideBar,
+              sideBar.width - Spacing.M >= DuoMetrics.controlSize + Spacing.M
+        else { return nil }
+        return sideBar
+    }
 
     /// Keeps the portrait width in landscape, like system sheets.
     private var duoCenteredWidth: CGFloat {
@@ -87,18 +114,19 @@ struct BottomSheetView<Content: View>: View {
         )
     }
 
-    /// Landscape side buttons span the full height, so the content is inset; in portrait the
-    /// side status bar only covers the top corner.
+    /// The floating sheet spans the side safe area, its content stays clear of it.
     private var sideInsetLeading: CGFloat {
-        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.leading : 0
+        isDuoFloating ? max(layout.insets.leading - Spacing.M, 0) : 0
     }
 
     private var sideInsetTrailing: CGFloat {
-        isDuo && !isDuoCentered && layout.width > layout.height ? layout.insets.trailing : 0
+        isDuoFloating ? max(layout.insets.trailing - Spacing.M, 0) : 0
     }
 
     private var maxHeight: CGFloat {
-        isDuo ? layout.height - max(layout.duoTopInset, Spacing.XL) : screenHeight - 90
+        guard isDuo else { return screenHeight - 90 }
+        // with its buttons in the side column the sheet can pass the side status bar
+        return layout.height - max(sideColumn != nil ? layout.insets.top : layout.duoTopInset, Spacing.XL)
     }
     private var bottomInset: CGFloat { useBottomInset ? safeAreaBottomInset() : 0 }
     /// While the keyboard is up, it already covers the home-indicator area, so it
@@ -170,19 +198,21 @@ struct BottomSheetView<Content: View>: View {
                         .frame(width: 40, height: 4)
                     Spacer().frame(height: 4)
                     headerView
-                        .frame(height: 56)
+                        .frame(height: headerRowHeight)
                         .padding(.horizontal, Spacing.M)
-                        .padding(.leading, sideInsetLeading)
-                        .padding(.trailing, sideInsetTrailing)
                 }
+                .padding(.leading, sideInsetLeading)
+                .padding(.trailing, sideInsetTrailing)
                 .frame(maxWidth: .infinity)
-                .frame(height: 72)
+                .frame(height: indicatorHeight + headerRowHeight)
                 .contentShape(Rectangle())
                 .gesture(dragGesture, including: draggable ? .all : .subviews)
 
                 Rectangle()
                     .fill(theme.colors.border.default)
                     .frame(height: 1)
+                    .padding(.leading, sideInsetLeading)
+                    .padding(.trailing, sideInsetTrailing)
 
                 content()
                     .padding(.leading, sideInsetLeading)
@@ -191,7 +221,7 @@ struct BottomSheetView<Content: View>: View {
                     .layoutPriority(-1)
 
                 if let footer {
-                    BottomSheetFooter(content: footer)
+                    BottomSheetFooter(content: footer, leadingInset: sideInsetLeading, trailingInset: sideInsetTrailing)
                 }
             }
             // The filler stays outside the cap, which shrinks by it instead: the sheet still ends at
@@ -209,27 +239,61 @@ struct BottomSheetView<Content: View>: View {
             }
         )
         .background(backgroundColor)
-        .clipShape(RoundedCorner(radius: Radius.M, corners: [.topLeft, .topRight]))
+        .overlay {
+            if let sideColumn {
+                BottomSheetSideColumn(
+                    sideBar: sideColumn,
+                    windowHeight: layout.height,
+                    topOffset: indicatorHeight + (headerRowHeight - DuoMetrics.controlSize) / 2,
+                    back: titleBack,
+                    onBack: goBack,
+                    onClose: { close() }
+                )
+            }
+        }
+        .clipShape(RoundedCorner(radius: isDuo ? Radius.XL : Radius.M, corners: [.topLeft, .topRight]))
+        .padding(.horizontal, isDuoFloating ? Spacing.M : 0)
     }
 
     @ViewBuilder
     private var headerView: some View {
         switch header.style {
-        case .title(let text):
+        case .title(let text, let back):
+            // the side column holds back and close, the row keeps only the title
+            let showsButtons = sideColumn == nil
             HStack(spacing: 0) {
-                Color.clear.frame(width: 24, height: 24)
+                if showsButtons {
+                    if let back {
+                        headerButton(icon: back.icon, accessibilityId: "btn_bottom_sheet_back") { goBack(back) }
+                    } else {
+                        Color.clear.frame(width: 24, height: 24)
+                    }
+                }
                 MomoText(text, typography: .headerDefaultBold, color: Colors.black17)
                     .frame(maxWidth: .infinity, alignment: .center)
-                Icon(source: "navigation_close", size: 24, color: Colors.black17)
-                    .frame(width: 24, height: 24)
-                    .contentShape(Rectangle())
-                    .onTapGesture { close() }
+                    .padding(.horizontal, showsButtons ? 0 : Spacing.M)
+                if showsButtons {
+                    headerButton(icon: "navigation_close", accessibilityId: "btn_bottom_sheet_close") { close() }
+                }
             }
         case .custom(let builder):
             builder()
         }
     }
 
+    private func headerButton(icon: String, accessibilityId: String, action: @escaping () -> Void) -> some View {
+        Icon(source: icon, size: 24, color: Colors.black17)
+            .frame(width: 24, height: 24)
+            .contentShape(Rectangle())
+            .onTapGesture(perform: action)
+            .accessibilityIdentifier(accessibilityId)
+    }
+
+    /// RN `leftOptions.onPressIconLeft`: the sheet closes first, then the back runs.
+    private func goBack(_ back: BottomSheetHeader.Back) {
+        close(then: back.action)
+    }
+
     // MARK: - Drag handling (mirrors Compose's detectDragGestures)
 
     private var dragGesture: some Gesture {
@@ -282,7 +346,7 @@ struct BottomSheetView<Content: View>: View {
 
     /// 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() {
+    private func close(then onClosed: (() -> Void)? = nil) {
         guard !isClosing else { return }
         isClosing = true
         withAnimation(.timingCurve(0.3, 0, 0.8, 0.15, duration: 0.2)) {
@@ -294,7 +358,67 @@ struct BottomSheetView<Content: View>: View {
             }
         }
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
+            // a newer overlay replaced this one: it stays, and this sheet's back is dropped
+            guard navigator.overplay?.id == overplayId else { return }
             navigator.finishOverplayDismiss(id: overplayId)
+            onClosed?()
+        }
+    }
+}
+
+/// iPhone Duo outer display: back and close sit on the part of the sheet under the side safe area,
+/// 12pt from the strip's inner edge like the screen side bar. They follow the header row while the
+/// sheet is short and stay below the status bar cluster while it is tall.
+private struct BottomSheetSideColumn: View {
+    let sideBar: SideBarLayout
+    let windowHeight: CGFloat
+    /// Lines the controls up with the header row.
+    let topOffset: CGFloat
+    let back: BottomSheetHeader.Back?
+    let onBack: (BottomSheetHeader.Back) -> Void
+    let onClose: () -> Void
+
+    @Environment(\.appTheme) private var theme
+
+    private var isRight: Bool { sideBar.edge == .right }
+
+    private var columnHeight: CGFloat {
+        let count: CGFloat = back != nil ? 2 : 1
+        return count * DuoMetrics.controlSize + (count - 1) * Spacing.M
+    }
+
+    private var headerColor: HeaderColor {
+        getHeaderColor(isAnimated: false, isSurface: true, opacity: 1, tintColor: nil, defaultColor: theme.colors.text.default)
+    }
+
+    var body: some View {
+        GeometryReader { proxy in
+            let sheetHeight = proxy.size.height
+            // the sheet rests on the window bottom; its slide is an offset outside this layout
+            let sheetTop = windowHeight - sheetHeight
+            // clear of a camera at the bottom end of the strip when it can
+            let lowest = sheetHeight - sideBar.bottom - columnHeight
+            let top = max(min(max(sideBar.top - sheetTop, topOffset), lowest), 0)
+            VStack(alignment: isRight ? .leading : .trailing, spacing: Spacing.M) {
+                if let back {
+                    SideBarButton(
+                        icon: back.icon,
+                        headerColor: headerColor,
+                        accessibilityId: "btn_bottom_sheet_back",
+                        action: { onBack(back) }
+                    )
+                }
+                SideBarButton(
+                    icon: "navigation_close",
+                    headerColor: headerColor,
+                    accessibilityId: "btn_bottom_sheet_close",
+                    action: onClose
+                )
+            }
+            .padding(isRight ? .leading : .trailing, Spacing.M)
+            .frame(width: sideBar.width - Spacing.M, alignment: isRight ? .leading : .trailing)
+            .padding(.top, top)
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .topTrailing : .topLeading)
         }
     }
 }
@@ -371,12 +495,16 @@ private struct CapHeightLayout: Layout {
 /// Mirrors Compose's `BottomSheetFooter`: a surface band with a soft shadow cast on the content.
 private struct BottomSheetFooter: View {
     let content: () -> AnyView
+    var leadingInset: CGFloat = 0
+    var trailingInset: CGFloat = 0
 
     @Environment(\.appTheme) private var theme
 
     var body: some View {
         content()
             .frame(maxWidth: .infinity)
+            .padding(.leading, leadingInset)
+            .padding(.trailing, trailingInset)
             .padding(.vertical, Spacing.S)
             .background(theme.colors.background.surface)
             .overlay(alignment: .top) {

package/ios/Navigation/Component/SnackBar.swift

@@ -57,6 +57,7 @@ struct SnackBarView: View {
     let bottomInset: CGFloat
 
     @EnvironmentObject private var navigator: Navigator
+    @Environment(\.screenLayout) private var layout
 
     @State private var contentHeight: CGFloat = 0
     @State private var offsetY: CGFloat = 0
@@ -75,6 +76,9 @@ struct SnackBarView: View {
                 )
                 .offset(y: offsetY)
                 .padding(.bottom, bottomInset)
+                // iPhone Duo: clear of the side toolbar strip, like the screen content (0 elsewhere)
+                .padding(.leading, layout.insetLeft)
+                .padding(.trailing, layout.insetRight)
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         .ignoresSafeArea()

package/ios/Navigation/ModalScreen.swift

@@ -34,11 +34,15 @@ struct ModalScreen<Content: View>: View {
                 }
 
             content()
+                // iPhone Duo: capped so it stays a dialog on the inner display; nil leaves the size alone
+                .frame(
+                    maxWidth: layout.isDuoDevice ? layout.duoModalMaxWidth : nil,
+                    maxHeight: layout.isDuoDevice ? layout.duoModalMaxHeight : nil
+                )
                 .scaleEffect(contentScale)
                 .opacity(contentOpacity)
-                // iPhone Duo: center below the side status bar and above the home indicator
-                .padding(.top, layout.isDuoDevice ? layout.duoTopInset : 0)
-                .padding(.bottom, layout.isDuoDevice ? layout.insets.bottom : 0)
+                // iPhone Duo: center in the safe area, clear of the side toolbar strip and the home indicator
+                .padding(layout.isDuoDevice ? layout.insets : EdgeInsets())
         }
         // Full screen like RN's Modal, so asymmetric landscape insets don't shift the content sideways.
         .frame(maxWidth: .infinity, maxHeight: .infinity)

package/ios/Popup/PopupDisplay.swift

@@ -107,7 +107,7 @@ public struct PopupDisplay: View {
             }
             .fixedSize(horizontal: false, vertical: true)
             .background(theme.colors.background.surface)
-            .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+            .clipShape(RoundedRectangle(cornerRadius: layout.popupRadius()))
 
             if isShowCloseIcon {
                 PopupCloseButton(action: onClose)
@@ -115,7 +115,7 @@ public struct PopupDisplay: View {
             }
         }
         .frame(maxWidth: layout.popupMaxWidth)
-        .padding(.horizontal, 12)
+        .padding(.horizontal, layout.popupHorizontalPadding(12))
         .accessibilityElement(children: .contain)
         .accessibilityIdentifier("popup_notify")
     }

package/ios/Popup/PopupInput.swift

@@ -59,11 +59,11 @@ public struct PopupInput: View {
                     .offset(x: 11, y: -11)
             }
         }
-        .background(theme.colors.background.surface.cornerRadius(8))
+        .background(theme.colors.background.surface.cornerRadius(layout.popupRadius(8)))
         .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
         .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
         .frame(maxWidth: layout.popupMaxWidth)
-        .padding(.horizontal, 40)
+        .padding(.horizontal, layout.popupHorizontalPadding(40))
     }
 
     // MARK: Internal

package/ios/Popup/PopupLayout.swift

@@ -1,19 +1,26 @@
 import SDWebImageSwiftUI
 import SwiftUI
 
-// Width of a system alert on the iPhone Duo inner display, in both orientations (RN Popup/utils.ts).
-private let duoPopupMaxWidth: CGFloat = 440
-
 extension ScreenLayout {
-    /// Card width cap (Compose `popupMaxWidth`); unbounded off iPhone Duo, where the popup's own padding sets the width.
+    /// Card width cap on iPhone Duo (the modal bounds, Compose `popupMaxWidth`); unbounded elsewhere,
+    /// where the popup's own padding sets the width.
     var popupMaxWidth: CGFloat {
-        isDuoDevice ? duoPopupMaxWidth : .infinity
+        isDuoDevice ? duoModalMaxWidth : .infinity
+    }
+
+    /// The modal bounds already keep iPhone Duo popups off the edges, so their own side padding goes.
+    func popupHorizontalPadding(_ padding: CGFloat) -> CGFloat {
+        isDuoDevice ? 0 : padding
     }
 
-    /// Room left for a popup on iPhone Duo, where landscape is too short for it; nil elsewhere.
+    /// Tallest a popup gets on iPhone Duo, landscape and the inner display included; nil elsewhere.
     var popupMaxHeight: CGFloat? {
-        guard isDuoDevice else { return nil }
-        return height - duoTopInset - insets.bottom - Spacing.XL * 2
+        isDuoDevice ? duoModalMaxHeight : nil
+    }
+
+    /// Rounder on iPhone Duo, closer to its system alerts.
+    func popupRadius(_ regular: CGFloat = Radius.L) -> CGFloat {
+        isDuoDevice ? Radius.XL : regular
     }
 }
 

package/ios/Popup/PopupNotify.swift

@@ -105,7 +105,7 @@ public struct PopupNotify: View {
                     .popupReadHeight($actionsHeight)
             }
             .background(theme.colors.background.surface)
-            .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+            .clipShape(RoundedRectangle(cornerRadius: layout.popupRadius()))
 
             if props.isShowCloseIcon {
                 PopupCloseButton(action: props.onIconClose)
@@ -113,7 +113,7 @@ public struct PopupNotify: View {
             }
         }
         .frame(maxWidth: layout.popupMaxWidth)
-        .padding(.horizontal, Spacing.M)
+        .padding(.horizontal, layout.popupHorizontalPadding(Spacing.M))
         .accessibilityElement(children: .contain)
         .accessibilityIdentifier("popup_notify")
     }

package/ios/Typography/FontScale.swift

@@ -19,11 +19,19 @@ public struct FontScale: Equatable {
     public let useOSScaleRate: Bool
     /// OS Dynamic Type factor at the time the snapshot was taken.
     public let osFontScale: CGFloat
+    // AI-GENERATED START: device scale from the app window, not UIScreen.main (fixed to one display on iPhone Duo)
+    public let windowShortSide: CGFloat
 
-    public init(userScaleRate: CGFloat = 1, useOSScaleRate: Bool = true, osFontScale: CGFloat = 1) {
+    public init(
+        userScaleRate: CGFloat = 1,
+        useOSScaleRate: Bool = true,
+        osFontScale: CGFloat = 1,
+        windowShortSide: CGFloat? = nil
+    ) {
         self.userScaleRate = userScaleRate
         self.useOSScaleRate = useOSScaleRate
         self.osFontScale = osFontScale
+        self.windowShortSide = windowShortSide ?? DesignSystemKits.currentWindowShortSide()
     }
 
     /// `callAsFunction` so call sites keep reading like Compose's `scaleSize(16)`.
@@ -31,8 +39,8 @@ public struct FontScale: Equatable {
         guard useOSScaleRate else { return size * userScaleRate }
 
         // Short side, not width: landscape must not inflate every font (and so every popup's height).
-        let bounds = UIScreen.main.bounds.size
-        let deviceScale = min(bounds.width, bounds.height) / Self.defaultScreenSize
+        let deviceScale = windowShortSide / Self.defaultScreenSize
+    // AI-GENERATED END: device scale from the app window, not UIScreen.main (fixed to one display on iPhone Duo)
 
         var deviceScaled = size
         var osScaled = size
@@ -58,7 +66,10 @@ public struct FontScale: Equatable {
         return FontScale(
             userScaleRate: userScaleRate ?? self.userScaleRate,
             useOSScaleRate: useOSScaleRate ?? self.useOSScaleRate,
-            osFontScale: osFontScale
+            osFontScale: osFontScale,
+            // AI-GENERATED START: keep the window size through context overrides
+            windowShortSide: windowShortSide
+            // AI-GENERATED END: keep the window size through context overrides
         )
     }
 }

package/ios/native-kits.podspec

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

package/ios-demo/README.md

@@ -0,0 +1,120 @@
+# MoMoUIKitsDemo
+
+SwiftUI demo browser for `MoMoUIKits`.
+
+The package can optionally host a Compose UIKits screen by receiving a
+`UIViewController` factory from the host app. It does not import the KMP
+`shared` module directly.
+
+SwiftUI mode reuses the full demo screen set from
+`sample/iosApp/iosApp/Demo`, including the sample `HomeView` registry and demo
+screens for all currently available components.
+
+## CocoaPods
+
+In the host app `Podfile`, include both local pods:
+
+```ruby
+pod 'MoMoUIKits', :path => '../momo-native-kits/ios/native-kits.podspec'
+pod 'MoMoUIKitsDemo', :path => '../momo-native-kits/ios-demo'
+```
+
+Adjust the relative paths to match the host app checkout.
+
+## Host App Usage
+
+```swift
+import MoMoUIKitsDemo
+import shared
+
+class UIKitsViewController: BaseComposeAppViewController {
+  override func getViewController() -> UIViewController? {
+    let params = self.application.data as? [String: Any]
+
+    return MoMoUIKitsDemoViewControllerFactory.make(
+      context: MoMoUIKitsDemoContext(
+        appId: params?["appId"] as? String ?? "",
+        appCode: params?["code"] as? String ?? "",
+        appName: params?["name"] as? String,
+        appIcon: params?["icon"] as? String ?? ""
+      ),
+      composeViewController: {
+        UIKitsScreenComposeViewControllerKt.UIKitsScreenComposeViewController(
+          params: params
+        )
+      }
+    )
+  }
+
+  override func viewDidDisappear(_ animated: Bool) {
+    super.viewDidDisappear(animated)
+    composeViewController = nil
+  }
+}
+```
+
+If the host does not pass `composeViewController`, the demo opens directly in
+SwiftUI mode.
+
+## Included SwiftUI Demos
+
+The pod includes the sample demo screens for:
+
+- Animated Header
+- Avatar
+- Badge
+- Baseline View
+- Bottom Tab
+- Button
+- Carousel
+- Checkbox
+- Chip
+- Collapse
+- DateTimePicker
+- Divider
+- Header User
+- Icon Button
+- Image
+- Information
+- Input
+- Input DropDown
+- Input Money
+- Input OTP
+- Input Phone Number
+- Input Search
+- Input TextArea
+- Loader
+- Navigation
+- Pagination
+- Popup Display
+- Popup Notify
+- Popup Promotion
+- Progress Info
+- Radio
+- Rating
+- Skeleton
+- Slider
+- SnackBar
+- Stepper
+- Steps
+- Suggest Action
+- Swipe
+- Switch
+- TabView
+- Tag
+- Theme
+- Title
+- Tooltip
+- Typography
+- Uploader
+
+## Validation Notes
+
+Validated locally with:
+
+```sh
+pod ipc spec ios/MoMoUIKits.podspec
+pod ipc spec ios-demo/MoMoUIKitsDemo.podspec
+pod lib lint ios/MoMoUIKits.podspec --allow-warnings --skip-import-validation
+pod lib lint ios-demo/MoMoUIKitsDemo.podspec --allow-warnings --skip-import-validation --include-podspecs=ios/MoMoUIKits.podspec
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.49",
+  "version": "0.162.50-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},