@momo-kits/native-kits 0.162.30 → 0.162.31-debug

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

@@ -0,0 +1,420 @@
+//
+//  DemoScreen.swift
+//  Example
+//
+//  SwiftUI port of Compose's `sample/shared/.../screens/DemoScreen.kt`: the demo
+//  shell every component uses. `DemoScreen(preview:playground:)` renders a two-tab
+//  `BottomTab` — a static "Preview" showcase and an interactive, data-driven
+//  "Playground" props editor (BasicColumnBox / PlaygroundParams / PlaygroundView /
+//  PlaygroundTab). Must be pushed inside the `NavigationContainer` (BottomTab reads
+//  the Navigator) with `headerType: .none, scrollable: false`.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - DemoScreen shell
+
+@available(iOS 16.0, *)
+struct DemoScreen<Preview: View, Playground: View>: View {
+    @ViewBuilder let preview: () -> Preview
+    @ViewBuilder let playground: () -> Playground
+
+    var body: some View {
+        BottomTab(items: [
+            BottomTabItem(
+                name: "Preview",
+                label: "Preview",
+                icon: "security_eye_open",
+                options: NavigationOptions(headerTitle: .default("Preview"), scrollable: true),
+                // StackScreen provides the scroll when scrollable == true.
+                screen: {
+                    VStack(alignment: .leading, spacing: 0) { preview() }
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                }
+            ),
+            BottomTabItem(
+                name: "Playground",
+                label: "Playground",
+                icon: "24_basic_chart",
+                // Playground owns its own scroll (Props list), so disable the outer one.
+                options: NavigationOptions(headerTitle: .default("Playground"), scrollable: false),
+                screen: { playground() }
+            ),
+        ])
+    }
+}
+
+// MARK: - BasicColumnBox (titled surface card)
+
+struct BasicColumnBox<Content: View>: View {
+    let title: String
+    let alignment: HorizontalAlignment
+    let background: Color?
+    @ViewBuilder let content: () -> Content
+
+    init(
+        _ title: String = "",
+        alignment: HorizontalAlignment = .center,
+        background: Color? = nil,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.title = title
+        self.alignment = alignment
+        self.background = background
+        self.content = content
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: Spacing.S) {
+            if !title.isEmpty {
+                MomoText(title, typography: .headerMBold)
+                    .padding(.top, Spacing.S)
+            }
+            VStack(alignment: alignment, spacing: Spacing.S) {
+                content()
+            }
+            .frame(maxWidth: .infinity, alignment: alignmentFrame)
+            .padding(Spacing.M)
+            .background(
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .fill(background ?? defaultTheme.colors.background.surface)
+            )
+        }
+        .padding(Spacing.M)
+    }
+
+    private var alignmentFrame: Alignment {
+        switch alignment {
+        case .leading: return .leading
+        case .trailing: return .trailing
+        default: return .center
+        }
+    }
+}
+
+// MARK: - Playground model (mirrors PlaygroundParams / PlaygroundDataType)
+
+enum PlaygroundDataType {
+    case string, number, option, color, radio, checkbox, slider
+}
+
+/// One selectable entry for OPTION / COLOR / RADIO params. Replaces Compose's
+/// `Map<String, Any>` + `Map.Entry`. Equality is by `key`.
+struct PlaygroundOption: Identifiable, Hashable {
+    var id: String { key }
+    let key: String
+    let value: AnyHashable
+
+    init(_ key: String, _ value: AnyHashable) {
+        self.key = key
+        self.value = value
+    }
+
+    static func == (lhs: PlaygroundOption, rhs: PlaygroundOption) -> Bool { lhs.key == rhs.key }
+    func hash(into hasher: inout Hasher) { hasher.combine(key) }
+}
+
+/// A single editable prop row. Build with the per-type factory methods so the
+/// call site stays type-safe (`.radio("Type", buttonTypeList, $type)`).
+struct PlaygroundParams: Identifiable {
+    // Identity is the title, never a fresh UUID: the array is rebuilt on every body
+    // pass, so a per-instance id would re-key the ForEach on each keystroke — tearing
+    // down the row (an editing TextField loses first responder) and wiping its @State.
+    var id: String { title }
+    let title: String
+    let type: PlaygroundDataType
+    let list: [PlaygroundOption]
+    let enable: Binding<Bool>
+    let required: Bool
+    let sliderMin: Double
+    let sliderMax: Double
+    let sliderStep: Double
+
+    // Only the binding matching `type` is non-nil.
+    let text: Binding<String>?
+    let selection: Binding<PlaygroundOption?>?
+    let flag: Binding<Bool>?
+    let number: Binding<Double>?
+
+    private init(
+        title: String,
+        type: PlaygroundDataType,
+        list: [PlaygroundOption] = [],
+        enable: Binding<Bool> = .constant(true),
+        required: Bool = false,
+        sliderMin: Double = 0,
+        sliderMax: Double = 100,
+        sliderStep: Double = 1,
+        text: Binding<String>? = nil,
+        selection: Binding<PlaygroundOption?>? = nil,
+        flag: Binding<Bool>? = nil,
+        number: Binding<Double>? = nil
+    ) {
+        self.title = title
+        self.type = type
+        self.list = list
+        self.enable = enable
+        self.required = required
+        self.sliderMin = sliderMin
+        self.sliderMax = sliderMax
+        self.sliderStep = sliderStep
+        self.text = text
+        self.selection = selection
+        self.flag = flag
+        self.number = number
+    }
+
+    static func string(_ title: String, _ text: Binding<String>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .string, enable: enable, required: required, text: text)
+    }
+
+    static func number(_ title: String, _ text: Binding<String>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .number, enable: enable, required: required, text: text)
+    }
+
+    static func option(_ title: String, _ list: [PlaygroundOption], _ selection: Binding<PlaygroundOption?>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .option, list: list, enable: enable, required: required, selection: selection)
+    }
+
+    static func color(_ title: String, _ list: [PlaygroundOption], _ selection: Binding<PlaygroundOption?>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .color, list: list, enable: enable, required: required, selection: selection)
+    }
+
+    static func radio(_ title: String, _ list: [PlaygroundOption], _ selection: Binding<PlaygroundOption?>, required: Bool = false, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .radio, list: list, enable: enable, required: required, selection: selection)
+    }
+
+    static func checkbox(_ title: String, _ flag: Binding<Bool>, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .checkbox, enable: enable, flag: flag)
+    }
+
+    static func slider(_ title: String, _ number: Binding<Double>, min: Double = 0, max: Double = 100, step: Double = 1, enable: Binding<Bool> = .constant(true)) -> PlaygroundParams {
+        PlaygroundParams(title: title, type: .slider, enable: enable, sliderMin: min, sliderMax: max, sliderStep: step, number: number)
+    }
+}
+
+// MARK: - PlaygroundTab (live component + scrollable props list)
+
+@available(iOS 16.0, *)
+struct PlaygroundTab<Component: View>: View {
+    @ViewBuilder let component: () -> Component
+    let params: [PlaygroundParams]
+    var isHideComponent: Bool = false
+
+    var body: some View {
+        VStack(spacing: 0) {
+            if !isHideComponent {
+                BasicColumnBox("Component", alignment: .leading) { component() }
+            }
+            ScrollView {
+                BasicColumnBox("Props", alignment: .leading) {
+                    ForEach(params) { param in
+                        MomoText(param.title, typography: .headerDefaultBold)
+                            .opacity(param.enable.wrappedValue ? 1 : 0.4)
+                        PlaygroundView(param: param)
+                        Spacer().frame(height: Spacing.L)
+                    }
+                }
+            }
+        }
+    }
+}
+
+// MARK: - PlaygroundView (per-type editor, mirrors PlayGroundView.kt)
+
+@available(iOS 16.0, *)
+struct PlaygroundView: View {
+    let param: PlaygroundParams
+    @EnvironmentObject private var navigator: Navigator
+    @State private var isUndefined = false
+    @State private var initialSelection: PlaygroundOption?
+    @State private var didCapture = false
+
+    var body: some View {
+        editor
+            .opacity(param.enable.wrappedValue ? 1 : 0.4)
+            .disabled(!param.enable.wrappedValue)
+            .allowsHitTesting(param.enable.wrappedValue)
+            .onAppear {
+                if !didCapture {
+                    initialSelection = param.selection?.wrappedValue
+                    didCapture = true
+                }
+            }
+    }
+
+    @ViewBuilder
+    private var editor: some View {
+        switch param.type {
+        case .string, .number: stringEditor
+        case .option, .color: optionEditor
+        case .radio: radioEditor
+        case .checkbox: checkboxEditor
+        case .slider: sliderEditor
+        }
+    }
+
+    // STRING / NUMBER
+    @ViewBuilder
+    private var stringEditor: some View {
+        if let text = param.text {
+            Input(
+                text: text,
+                keyboardType: param.type == .number ? .numberPad : .default,
+                onChangeText: { _ in isUndefined = false }
+            )
+            if !param.required {
+                undefinedCheckbox { text.wrappedValue = "" }
+            }
+        }
+    }
+
+    // OPTION / COLOR
+    @ViewBuilder
+    private var optionEditor: some View {
+        if let selection = param.selection {
+            HStack {
+                Spacer().frame(width: 30)
+                MomoText(selection.wrappedValue?.key ?? "", typography: .bodyDefaultRegular)
+                Spacer()
+                Icon(source: "arrow_chevron_down", size: 20)
+                    .padding(.trailing, Spacing.XS)
+            }
+            .frame(height: 40)
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.XS)
+                    .stroke(defaultTheme.colors.border.default, lineWidth: 1)
+            )
+            .contentShape(Rectangle())
+            .onTapGesture { openPicker(selection: selection) }
+
+            if !param.required {
+                // An OPTION/COLOR prop is genuinely nullable, so "undefined" clears it
+                // outright rather than restoring the seeded default.
+                undefinedCheckbox { selection.wrappedValue = nil }
+            }
+        }
+    }
+
+    // RADIO
+    @ViewBuilder
+    private var radioEditor: some View {
+        if let selection = param.selection {
+            ForEach(param.list) { option in
+                Radio(
+                    value: option.key,
+                    groupValue: Binding(
+                        get: { AnyHashable(selection.wrappedValue?.key ?? "") },
+                        set: { _ in }
+                    ),
+                    onChange: { isUndefined = false; selection.wrappedValue = option },
+                    label: option.key
+                )
+            }
+            if !param.required {
+                undefinedCheckbox { selection.wrappedValue = initialSelection }
+            }
+        }
+    }
+
+    // CHECKBOX
+    @ViewBuilder
+    private var checkboxEditor: some View {
+        if let flag = param.flag {
+            Checkbox(flag, title: flag.wrappedValue.description)
+        }
+    }
+
+    // SLIDER
+    @ViewBuilder
+    private var sliderEditor: some View {
+        if let number = param.number {
+            MomoText(formatSlider(number.wrappedValue), typography: .headerDefaultBold)
+            MomoSlider(
+                min: param.sliderMin,
+                max: param.sliderMax,
+                step: param.sliderStep,
+                low: number.wrappedValue,
+                disableRange: true,
+                onValueChanged: { low, _, _ in number.wrappedValue = low }
+            )
+            .frame(maxWidth: .infinity)
+        }
+    }
+
+    // "is undefined" toggle for optional params. RADIO restores the value captured on
+    // first render (Compose's `remember { data.value }`) since its prop is never null.
+    @ViewBuilder
+    private func undefinedCheckbox(_ onUndefined: @escaping () -> Void) -> some View {
+        Checkbox($isUndefined, onChange: { if $0 { onUndefined() } }, title: "is undefined")
+    }
+
+    private func openPicker(selection: Binding<PlaygroundOption?>) {
+        let isColor = param.type == .color
+        navigator.showBottomSheet({
+            PlaygroundOptionPicker(list: param.list, isColor: isColor) { picked in
+                isUndefined = false
+                selection.wrappedValue = picked
+                navigator.hideOverplay()
+            }
+        }, header: .title("Choose option"))
+    }
+
+    private func formatSlider(_ v: Double) -> String {
+        v == v.rounded() ? String(Int(v)) : String(format: "%.1f", v)
+    }
+}
+
+// MARK: - Option picker (searchable bottom-sheet list)
+
+@available(iOS 16.0, *)
+private struct PlaygroundOptionPicker: View {
+    let list: [PlaygroundOption]
+    let isColor: Bool
+    let onSelect: (PlaygroundOption) -> Void
+
+    @State private var query = ""
+
+    private var filtered: [PlaygroundOption] {
+        query.isEmpty ? list : list.filter { $0.key.localizedCaseInsensitiveContains(query) }
+    }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            InputSearch(props: InputSearchProps(
+                text: $query,
+                placeholder: "Search input",
+                onChangeText: { query = $0.replacingOccurrences(of: "\n", with: " ") }
+            ))
+            .padding(.horizontal, Spacing.L)
+
+            ScrollView {
+                LazyVStack(alignment: .leading, spacing: 0) {
+                    ForEach(filtered) { item in
+                        HStack(spacing: Spacing.S) {
+                            if isColor, let color = item.value.base as? Color {
+                                RoundedRectangle(cornerRadius: Radius.S)
+                                    .fill(color)
+                                    .frame(width: 36, height: 36)
+                                    .overlay(
+                                        RoundedRectangle(cornerRadius: Radius.S)
+                                            .stroke(defaultTheme.colors.border.default, lineWidth: 1)
+                                    )
+                            } else if let iconName = item.value.base as? String {
+                                Icon(source: iconName, size: 24)
+                            }
+                            MomoText(item.key, typography: .bodyDefaultRegular)
+                        }
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.vertical, Spacing.XS)
+                        .contentShape(Rectangle())
+                        .onTapGesture { onSelect(item) }
+                    }
+                }
+                .padding(Spacing.L)
+            }
+        }
+        .frame(height: 600)
+    }
+}

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

@@ -1,14 +1,56 @@
-import SwiftUI
+//
+//  DividerDemo.swift
+//  Example
+//
+//  Preview + Playground demo for MomoDivider.
+//
+
 import MoMoUIKits
+import SwiftUI
 
 struct DividerDemo: View {
     var body: some View {
-        VStack(alignment: .leading, spacing: 8) {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { DividerPreview() }, playground: { DividerPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct DividerPreview: View {
+    var body: some View {
+        BasicColumnBox("Between items", alignment: .leading) {
             ForEach(0..<5, id: \.self) { index in
-                Text("Item\(index)")
+                MomoText("Item \(index)", typography: .bodyDefaultRegular)
                 MomoDivider()
             }
         }
-        .padding()
+    }
+}
+
+// MARK: - Playground
+
+// MomoDivider takes no props; the playground varies how many are rendered.
+@available(iOS 16.0, *)
+private struct DividerPlayground: View {
+    @State private var count: Double = 3
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.S) {
+                    ForEach(0..<Int(count), id: \.self) { index in
+                        MomoText("Item \(index)", typography: .bodyDefaultRegular)
+                        MomoDivider()
+                    }
+                }
+            },
+            params: [
+                .slider("Count", $count, min: 1, max: 6, step: 1),
+            ]
+        )
     }
 }

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

@@ -13,11 +13,16 @@ public struct ScreenUsage: Hashable, Identifiable {
     public let title: String
     public let destination: AnyView
     public let icon: String
-    
-    public init(title: String, destination: AnyView, icon: String) {
+    /// True when the destination hosts its own chrome (e.g. a `BottomTab` — the
+    /// Preview/Playground `DemoScreen` or `BottomTabDemo`); such screens are pushed
+    /// with `headerType: .none, scrollable: false`.
+    public let hostsOwnChrome: Bool
+
+    public init(title: String, destination: AnyView, icon: String, hostsOwnChrome: Bool = false) {
         self.title = title
         self.destination = destination
         self.icon = icon
+        self.hostsOwnChrome = hostsOwnChrome
     }
     
     public static func == (lhs: ScreenUsage, rhs: ScreenUsage) -> Bool {
@@ -34,59 +39,51 @@ public func getIcon(icon: String) -> String {
 }
 
 public let ScreenUsages: [ScreenUsage] = [
-//    ScreenUsage(title: "ScreenUsage", destination: AnyView(ContentView()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "Badge", destination: AnyView(BadgeDemo()), icon: getIcon(icon: "Badge")),
-    ScreenUsage(title: "Button", destination: AnyView(ButtonDemo()), icon: getIcon(icon: "Button")),
-    ScreenUsage(title: "CheckBox", destination: AnyView(CheckboxDemo()), icon: getIcon(icon: "Checkbox")),
-    ScreenUsage(title: "Chip", destination: AnyView(ChipDemo()), icon: getIcon(icon: "Chip")),
-//    ScreenUsage(title: "IconButton", destination: AnyView(ContentView()), icon: getIcon(icon: "Button")),
-//    ScreenUsage(title: "Icon", destination: AnyView(ContentView()), icon: getIcon(icon: "Icon")),
-    ScreenUsage(title: "Image", destination: AnyView(ImageDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "Baseline View", destination: AnyView(BaselineViewDemo()), icon: getIcon(icon: "Layout")),
-//    ScreenUsage(title: "InputMoney", destination: AnyView(ContentView()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "Input", destination: AnyView(InputDemo()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "Input Phone Number", destination: AnyView(InputPhoneNumberDemo()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "InputTextArea", destination: AnyView(InputTextAreaDemo()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "InputSearch", destination: AnyView(InputSearchDemo()), icon: getIcon(icon: "FormInput")),
-//    ScreenUsage(title: "Pagination", destination: AnyView(ContentView()), icon: getIcon(icon: "Badge")),
-//    ScreenUsage(title: "InputDropdown", destination: AnyView(ContentView()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "PopupNotify", destination: AnyView(PopupNotifyDemo()), icon: getIcon(icon: "Popup")),
-    ScreenUsage(title: "PopupPromotion", destination: AnyView(PopupPromotionDemo()), icon: getIcon(icon: "Popup")),
-    ScreenUsage(title: "SnackBar", destination: AnyView(SnackBarDemo()), icon: getIcon(icon: "Popup")),
-//    ScreenUsage(title: "Radio", destination: AnyView(ContentView()), icon: getIcon(icon: "Radio")),
-//    ScreenUsage(title: "Skeleton", destination: AnyView(ContentView()), icon: getIcon(icon: "Skeleton")),
-    ScreenUsage(title: "Switch", destination: AnyView(SwitchDemo()), icon: getIcon(icon: "Toggle")),
-//    ScreenUsage(title: "Tag", destination: AnyView(ContentView()), icon: getIcon(icon: "Skeleton")),
-    ScreenUsage(title: "Text", destination: AnyView(TypographyDemo()), icon: getIcon(icon: "Typography")),
+    ScreenUsage(title: "Badge", destination: AnyView(BadgeDemo()), icon: getIcon(icon: "Badge"), hostsOwnChrome: true),
+    ScreenUsage(title: "Button", destination: AnyView(ButtonDemo()), icon: getIcon(icon: "Button"), hostsOwnChrome: true),
+    ScreenUsage(title: "CheckBox", destination: AnyView(CheckboxDemo()), icon: getIcon(icon: "Checkbox"), hostsOwnChrome: true),
+    ScreenUsage(title: "Chip", destination: AnyView(ChipDemo()), icon: getIcon(icon: "Chip"), hostsOwnChrome: true),
+    ScreenUsage(title: "Icon", destination: AnyView(IconDemo()), icon: getIcon(icon: "Icon"), hostsOwnChrome: true),
+    ScreenUsage(title: "Image", destination: AnyView(ImageDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "Section", destination: AnyView(SectionDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "Input", destination: AnyView(InputDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
+    ScreenUsage(title: "Input Phone Number", destination: AnyView(InputPhoneNumberDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
+    ScreenUsage(title: "InputTextArea", destination: AnyView(InputTextAreaDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
+    ScreenUsage(title: "InputSearch", destination: AnyView(InputSearchDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
+    ScreenUsage(title: "PopupNotify", destination: AnyView(PopupNotifyDemo()), icon: getIcon(icon: "Popup"), hostsOwnChrome: true),
+    ScreenUsage(title: "PopupPromotion", destination: AnyView(PopupPromotionDemo()), icon: getIcon(icon: "Popup"), hostsOwnChrome: true),
+    ScreenUsage(title: "SnackBar", destination: AnyView(SnackBarDemo()), icon: getIcon(icon: "Popup"), hostsOwnChrome: true),
+    ScreenUsage(title: "Switch", destination: AnyView(SwitchDemo()), icon: getIcon(icon: "Toggle"), hostsOwnChrome: true),
+    ScreenUsage(title: "Text", destination: AnyView(TypographyDemo()), icon: getIcon(icon: "Typography"), hostsOwnChrome: true),
 //    ScreenUsage(title: "TrustBanner", destination: AnyView(TrustBanner(onPress: {_ in })), icon: getIcon(icon: "Typography")),
-    ScreenUsage(title: "Information", destination: AnyView(InformationDemo()), icon: getIcon(icon: "Typography")),
-    ScreenUsage(title: "Avatar", destination: AnyView(AvatarDemo()), icon: getIcon(icon: "Avatar")),
-    ScreenUsage(title: "Carousel", destination: AnyView(CarouselDemo()), icon: getIcon(icon: "Carousel")),
-    ScreenUsage(title: "Divider", destination: AnyView(DividerDemo()), icon: getIcon(icon: "Divider")),
-    ScreenUsage(title: "IconButton", destination: AnyView(IconButtonDemo()), icon: getIcon(icon: "Button")),
-    ScreenUsage(title: "Loader", destination: AnyView(LoaderDemo()), icon: getIcon(icon: "Loader")),
-    ScreenUsage(title: "Pagination", destination: AnyView(PaginationDemo()), icon: getIcon(icon: "Badge")),
-    ScreenUsage(title: "Radio", destination: AnyView(RadioDemo()), icon: getIcon(icon: "Radio")),
-    ScreenUsage(title: "Rating", destination: AnyView(RatingDemo()), icon: getIcon(icon: "Rating")),
-    ScreenUsage(title: "Skeleton", destination: AnyView(SkeletonDemo()), icon: getIcon(icon: "Skeleton")),
-    ScreenUsage(title: "SuggestAction", destination: AnyView(SuggestActionDemo()), icon: getIcon(icon: "Information")),
-    ScreenUsage(title: "Tag", destination: AnyView(TagDemo()), icon: getIcon(icon: "Tag")),
-    ScreenUsage(title: "Title", destination: AnyView(TitleDemo()), icon: getIcon(icon: "Typography")),
-    ScreenUsage(title: "Collapse", destination: AnyView(CollapseDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "Stepper", destination: AnyView(StepperDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "Uploader", destination: AnyView(UploaderDemo()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "Swipe", destination: AnyView(SwipeDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "InputDropDown", destination: AnyView(InputDropDownDemo()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "InputMoney", destination: AnyView(InputMoneyDemo()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "InputOTP", destination: AnyView(InputOTPDemo()), icon: getIcon(icon: "FormInput")),
-    ScreenUsage(title: "ProgressInfo", destination: AnyView(ProgressInfoDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "Steps", destination: AnyView(StepsDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "Slider", destination: AnyView(SliderDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "TabView", destination: AnyView(TabViewDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "Tooltip", destination: AnyView(TooltipDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "DateTimePicker", destination: AnyView(DateTimePickerDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Information", destination: AnyView(InformationDemo()), icon: getIcon(icon: "Typography"), hostsOwnChrome: true),
+    ScreenUsage(title: "Avatar", destination: AnyView(AvatarDemo()), icon: getIcon(icon: "Avatar"), hostsOwnChrome: true),
+    ScreenUsage(title: "Carousel", destination: AnyView(CarouselDemo()), icon: getIcon(icon: "Carousel"), hostsOwnChrome: true),
+    ScreenUsage(title: "Divider", destination: AnyView(DividerDemo()), icon: getIcon(icon: "Divider"), hostsOwnChrome: true),
+    ScreenUsage(title: "IconButton", destination: AnyView(IconButtonDemo()), icon: getIcon(icon: "Button"), hostsOwnChrome: true),
+    ScreenUsage(title: "Loader", destination: AnyView(LoaderDemo()), icon: getIcon(icon: "Loader"), hostsOwnChrome: true),
+    ScreenUsage(title: "Pagination", destination: AnyView(PaginationDemo()), icon: getIcon(icon: "Badge"), hostsOwnChrome: true),
+    ScreenUsage(title: "Radio", destination: AnyView(RadioDemo()), icon: getIcon(icon: "Radio"), hostsOwnChrome: true),
+    ScreenUsage(title: "Rating", destination: AnyView(RatingDemo()), icon: getIcon(icon: "Rating"), hostsOwnChrome: true),
+    ScreenUsage(title: "Skeleton", destination: AnyView(SkeletonDemo()), icon: getIcon(icon: "Skeleton"), hostsOwnChrome: true),
+    ScreenUsage(title: "SuggestAction", destination: AnyView(SuggestActionDemo()), icon: getIcon(icon: "Information"), hostsOwnChrome: true),
+    ScreenUsage(title: "Tag", destination: AnyView(TagDemo()), icon: getIcon(icon: "Tag"), hostsOwnChrome: true),
+    ScreenUsage(title: "Title", destination: AnyView(TitleDemo()), icon: getIcon(icon: "Typography"), hostsOwnChrome: true),
+    ScreenUsage(title: "Collapse", destination: AnyView(CollapseDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "Stepper", destination: AnyView(StepperDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "Uploader", destination: AnyView(UploaderDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
+    ScreenUsage(title: "Swipe", destination: AnyView(SwipeDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "InputDropDown", destination: AnyView(InputDropDownDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
+    ScreenUsage(title: "InputMoney", destination: AnyView(InputMoneyDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
+    ScreenUsage(title: "InputOTP", destination: AnyView(InputOTPDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
+    ScreenUsage(title: "ProgressInfo", destination: AnyView(ProgressInfoDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "Steps", destination: AnyView(StepsDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "Slider", destination: AnyView(SliderDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "TabView", destination: AnyView(TabViewDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "Tooltip", destination: AnyView(TooltipDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "DateTimePicker", destination: AnyView(DateTimePickerDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
     ScreenUsage(title: "Navigation", destination: AnyView(NavigationDemo()), icon: getIcon(icon: "Layout")),
-    ScreenUsage(title: "Bottom Tab", destination: AnyView(BottomTabDemo()), icon: getIcon(icon: "Layout")),
+    ScreenUsage(title: "Bottom Tab", destination: AnyView(BottomTabDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
     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")),
@@ -134,11 +131,11 @@ public struct HomeView: View {
                 headerRight: {
                     HeaderRight(headerRight: HeaderRightData(useShortcut: true))
                 },
-                // footerComponent = { Button("Footer Button") }
+                // footerComponent = { Button("Open SwiftUI (iOS only)") }
                 footer: {
                     AnyView(
                         MoMoUIKits.Button(
-                            title: "Footer Button",
+                            title: "Open Compose",
                             action: onOpenCompose,
                             type: .primary,
                             size: .large
@@ -240,7 +237,7 @@ public struct HomeItemView: View {
     public var body: some View {
         ForEach(screenUsages) { screenUsage in
             SwiftUI.Button {
-                let options = screenUsage.title == "Bottom Tab"
+                let options = screenUsage.hostsOwnChrome
                     ? NavigationOptions(
                         title: screenUsage.title,
                         headerType: .none,
@@ -267,7 +264,7 @@ public struct HomeItemView: View {
             Divider()
         }
         .padding(.horizontal, 16)
-        .padding(.vertical, 8)
+        .padding(.vertical, 16)
     }
 }