@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1

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

@@ -0,0 +1,49 @@
+//
+//  HeaderUserDemo.swift
+//  Example
+//
+//  Usage demo for the `HeaderTitle.user` header. Mirrors Compose's
+//  `HeaderUserUsage`: the avatar-group user title is supplied via the screen's
+//  NavigationOptions (see NavigationDemo's "Header User Title" entry), and this
+//  body explains the variations the title supports.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+@available(iOS 16.0, *)
+struct HeaderUserDemoContent: View {
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            MomoText("The header above renders a HeaderTitle.user:", typography: .headerDefaultBold)
+            bullet("Avatar group (1–4 avatars, then a “+n” overflow tile)")
+            bullet("Initials fallback when no avatar URLs are provided")
+            bullet("Title + optional inline verified icons")
+            bullet("Optional subtitle and status dot")
+            bullet("Skeleton shimmer while isLoading")
+            Spacer()
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(16)
+    }
+
+    @ViewBuilder
+    private func bullet(_ text: String) -> some View {
+        HStack(alignment: .top, spacing: 8) {
+            MomoText("•")
+            MomoText(text)
+        }
+    }
+}
+
+// MARK: - Standalone wrapper (header title is only visible when pushed via NavigationDemo)
+
+struct HeaderUserDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            HeaderUserDemoContent()
+        } else {
+            Text("Header user demo requires iOS 16+").padding()
+        }
+    }
+}

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

@@ -0,0 +1,276 @@
+//
+//  Home.swift
+//  Example
+//
+//  Created by sophia on 7/2/25.
+//
+
+import SwiftUI
+import MoMoUIKits
+
+public struct ScreenUsage: Hashable, Identifiable {
+    public let id = UUID()
+    public let title: String
+    public let destination: AnyView
+    public let 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 {
+        lhs.id == rhs.id
+    }
+    
+    public func hash(into hasher: inout Hasher) {
+        hasher.combine(id)
+    }
+}
+
+public func getIcon(icon: String) -> String {
+    return "https://static.momocdn.net/app/img/kits/UIKIT/\(icon).png"
+}
+
+public let ScreenUsages: [ScreenUsage] = [
+    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"), 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"), 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")),
+]
+
+@available(iOS 16.0, *)
+public struct HomeView: View {
+    // Mirrors Compose's `inputSearch` state: bound into the header search and
+    // forwarded into the content for filtering.
+    @State private var searchText = ""
+    private let onOpenCompose: () -> Void
+    private let applicationContext: MiniAppContext?
+    private let composeApi: KitComposeApi?
+    private let config: KitConfig?
+
+    public init(
+        onOpenCompose: @escaping () -> Void = {},
+        applicationContext: MiniAppContext? = nil,
+        composeApi: KitComposeApi? = nil,
+        config: KitConfig? = nil
+    ) {
+        self.onOpenCompose = onOpenCompose
+        self.applicationContext = applicationContext
+        self.composeApi = composeApi
+        self.config = config
+    }
+
+    public var body: some View {
+        NavigationContainer(
+            initialScreen: { HomeContentView(searchText: $searchText) },
+            options: NavigationOptions(
+                // headerTitle = HeaderTitle.Default("Design System")
+                title: "Design System",
+                titlePosition: .left,
+                // headerType = HeaderType.Extended(useAnimated = true, ...)
+                headerType: .extended,
+                useAnimated: true,
+                // hiddenBack = false
+                hiddenBack: false,
+                scrollable: true,
+                useAvoidKeyboard: true,
+                // keyboardOptions = KeyboardOptions(keyboardShouldPersistTaps = true)
+                keyboardShouldPersistTaps: true,
+                // headerRight = HeaderRight.Toolkit(useShortcut = true)
+                headerRight: {
+                    HeaderRight(headerRight: HeaderRightData(useShortcut: true))
+                },
+                // footerComponent = { Button("Open SwiftUI (iOS only)") }
+                footer: {
+                    AnyView(
+                        MoMoUIKits.Button(
+                            title: "Open Compose",
+                            action: onOpenCompose,
+                            type: .primary,
+                            size: .large
+                        )
+                    )
+                },
+                // inputSearchProps = InputSearchProps(text = inputSearch, placeholder = "Search input",
+                //   searchIcon = { Image("...search_ai.png") }, placeholderCustomRender = { gradient Text }, ...)
+                inputSearchProps: InputSearchProps(
+                    text: $searchText,
+                    placeholder: "Search input",
+                    onChangeText: { newText in
+                        searchText = newText.replacingOccurrences(of: "\n", with: " ")
+                    },
+                    searchIcon: {
+                        AnyView(
+                            ImageView("https://static.momocdn.net/app/app/appx/search_ai.png")
+                                .frame(width: 24, height: 24)
+                                .padding(.trailing, Spacing.S)
+                        )
+                    },
+                    placeholderCustomRender: {
+                        AnyView(
+                            Text("Search input")
+                                .font(.header_xs_semibold)
+                                .lineLimit(1)
+                                .foregroundStyle(
+                                    LinearGradient(
+                                        colors: [
+                                            Color(hex: 0x18A0FB),
+                                            Color(hex: 0xA851FF),
+                                            Color(hex: 0xFD5FA9),
+                                            Color(hex: 0xFF9040)
+                                        ],
+                                        startPoint: .topLeading,
+                                        endPoint: .bottomTrailing
+                                    )
+                                )
+                        )
+                    }
+                ),
+                // floatingButtonProps = FloatingButtonProps(icon = "ic_warning", iconColor = White,
+                //   label = "Warning", size = DEFAULT, position = END)
+                // Note: "ic_warning" is an Android asset key; the closest rendering iOS icon URL is used here.
+                fabProps: FabProps(
+                    icon: "https://static.momocdn.net/app/img/authentication/floating_helper.png",
+                    iconColor: .white,
+                    label: "Warning",
+                    onClick: { print("Warning") },
+                    containerColor: Colors.primary,
+                    size: .large,
+                    scrollOffset: nil,
+                    position: .right,
+                    bottomPadding: nil
+                )
+            ),
+            applicationContext: applicationContext,
+            composeApi: composeApi,
+            config: config
+        )
+    }
+}
+
+@available(iOS 16.0, *)
+public struct HomeContentView: View {
+    // Search lives in the header (inputSearchProps); the bound value flows here
+    // for filtering, mirroring Compose's `UIKitHome(searchQuery = inputSearch.value)`.
+    @Binding var searchText: String
+
+    public init(searchText: Binding<String>) {
+        self._searchText = searchText
+    }
+
+    private var filteredScreenUsages: [ScreenUsage] {
+        if searchText.isEmpty {
+            return ScreenUsages
+        }
+        return ScreenUsages.filter { $0.title.localizedCaseInsensitiveContains(searchText) }
+    }
+
+    public var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 16) {
+                HomeItemView(screenUsages: filteredScreenUsages)
+            }
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+public struct HomeItemView: View {
+    @EnvironmentObject var navigator: Navigator
+    let screenUsages: [ScreenUsage]
+
+    public init(screenUsages: [ScreenUsage]) {
+        self.screenUsages = screenUsages
+    }
+
+    public var body: some View {
+        ForEach(screenUsages) { screenUsage in
+            SwiftUI.Button {
+                let options = screenUsage.hostsOwnChrome
+                    ? NavigationOptions(
+                        title: screenUsage.title,
+                        headerType: .none,
+                        scrollable: false
+                    )
+                    : NavigationOptions(title: screenUsage.title)
+                navigator.push(
+                    { screenUsage.destination },
+                    options: options
+                )
+            } label: {
+                itemRow(screenUsage)
+            }
+        }
+    }
+    
+    @ViewBuilder
+    private func itemRow(_ screenUsage: ScreenUsage) -> some View {
+        VStack(alignment: .leading) {
+            HStack {
+                ImageView(screenUsage.icon).frame(width: 26, height: 26)
+                MomoText(screenUsage.title)
+            }
+            Divider()
+        }
+        .padding(.horizontal, 16)
+        .padding(.vertical, 16)
+    }
+}
+
+@available(iOS 16.0, *)
+public struct HomeView_Previews: PreviewProvider {
+    public static var previews: some View {
+        HomeView()
+    }
+}

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

@@ -0,0 +1,93 @@
+//
+//  IconButtonDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let iconButtonSizeList: [PlaygroundOption] = [
+    .init("large", IconSize.large),
+    .init("medium", IconSize.medium),
+    .init("small", IconSize.small),
+]
+
+private let iconShapeList: [PlaygroundOption] = [
+    .init("circle", IconShape.circle),
+    .init("square", IconShape.square),
+]
+
+struct IconButtonDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { IconButtonPreview() }, playground: { IconButtonPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct IconButtonPreview: View {
+    private let icon = "travel_plane"
+
+    var body: some View {
+        BasicColumnBox("Source", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                IconButton(icon: "travel_plane", onClick: {})
+                IconButton(icon: "shopping_coupon", onClick: {})
+                IconButton(icon: "shopping_store", onClick: {})
+                IconButton(icon: "time_alarm_check", onClick: {})
+            }
+        }
+        BasicColumnBox("Type", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                IconButton(icon: icon, onClick: {}, type: .primary)
+                IconButton(icon: icon, onClick: {}, type: .secondary)
+                IconButton(icon: icon, onClick: {}, type: .tonal)
+                IconButton(icon: icon, onClick: {}, type: .outline)
+                IconButton(icon: icon, onClick: {}, type: .disabled)
+                IconButton(icon: icon, onClick: {}, type: .danger)
+            }
+        }
+        BasicColumnBox("Size", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                IconButton(icon: icon, onClick: {}, type: .primary, size: .large)
+                IconButton(icon: icon, onClick: {}, type: .primary, size: .small)
+            }
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct IconButtonPlayground: View {
+    @State private var icon: PlaygroundOption? = playgroundIcons.first { $0.key == "basic_home" }
+    @State private var type: PlaygroundOption? = buttonTypeList.first { $0.key == "primary" }
+    @State private var size: PlaygroundOption? = iconButtonSizeList.first { $0.key == "small" }
+    @State private var shape: PlaygroundOption? = iconShapeList.first { $0.key == "circle" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                IconButton(
+                    icon: (icon?.value as? String) ?? "basic_home",
+                    onClick: {},
+                    type: (type?.value as? ButtonType) ?? .primary,
+                    size: (size?.value as? IconSize) ?? .small,
+                    shape: (shape?.value as? IconShape) ?? .circle
+                )
+            },
+            params: [
+                .option("Icon", playgroundIcons, $icon),
+                .radio("Type", buttonTypeList, $type),
+                .radio("Size", iconButtonSizeList, $size),
+                .radio("Shape", iconShapeList, $shape),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,81 @@
+//
+//  IconDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's IconUsage.kt.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct IconDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { IconPreview() }, playground: { IconPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct IconPreview: View {
+    var body: some View {
+        BasicColumnBox("Source", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                Icon(source: "basic_home", size: 24)
+                Icon(source: "basic_flag", size: 24)
+                Icon(source: "basic_filter", size: 24)
+                Icon(source: "basic_delete", size: 24)
+            }
+        }
+        BasicColumnBox("Size", alignment: .leading) {
+            HStack(alignment: .center, spacing: Spacing.M) {
+                Icon(source: "basic_home", size: 16)
+                Icon(source: "basic_flag", size: 20)
+                Icon(source: "basic_filter", size: 24)
+                Icon(source: "basic_delete", size: 28)
+            }
+        }
+        BasicColumnBox("Color", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                Icon(source: "basic_home", size: 24, color: Colors.red03)
+                Icon(source: "basic_flag", size: 24, color: Colors.green04)
+                Icon(source: "basic_filter", size: 24, color: Colors.pink06)
+                Icon(source: "basic_delete", size: 24, color: Colors.yellow02)
+            }
+        }
+        BasicColumnBox("No theme icon", alignment: .leading) {
+            HStack(spacing: Spacing.M) {
+                Icon(source: "ic_round_momo_tiny", size: 24)
+            }
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct IconPlayground: View {
+    @State private var source: PlaygroundOption? = playgroundIcons.first { $0.key == "basic_home" }
+    @State private var color: PlaygroundOption? = playgroundColors.first { $0.key == "black17" }
+    @State private var size = "24"
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Icon(
+                    source: (source?.value as? String) ?? "basic_home",
+                    size: CGFloat(Int(size) ?? 24),
+                    color: color?.value as? Color
+                )
+            },
+            params: [
+                .option("Source", playgroundIcons, $source),
+                .color("Color", playgroundColors, $color),
+                .number("Size (dp)", $size),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,65 @@
+//
+//  ImageDemo.swift
+//  Example
+//
+//  Preview + Playground demo for ImageView.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct ImageDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ImagePreview() }, playground: { ImagePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct ImagePreview: View {
+    private let sample = "https://images.unsplash.com/photo-1509395062183-67c5ad6faff9"
+
+    var body: some View {
+        BasicColumnBox("Fixed size", alignment: .leading) {
+            ImageView(sample).frame(width: 100, height: 100)
+        }
+        BasicColumnBox("Fill width", alignment: .leading) {
+            ImageView(sample)
+                .frame(maxWidth: .infinity)
+                .frame(height: 120)
+                .aspectRatio(contentMode: .fill)
+                .clipped()
+        }
+        BasicColumnBox("Invalid URL (fallback)", alignment: .leading) {
+            ImageView("https://abc.com").frame(width: 100, height: 100)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct ImagePlayground: View {
+    @State private var url = "https://images.unsplash.com/photo-1509395062183-67c5ad6faff9"
+    @State private var height: Double = 120
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                ImageView(url)
+                    .frame(maxWidth: .infinity)
+                    .frame(height: CGFloat(height))
+                    .aspectRatio(contentMode: .fill)
+                    .clipped()
+            },
+            params: [
+                .string("URL", $url),
+                .slider("Height", $height, min: 60, max: 240, step: 10),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,96 @@
+//
+//  InformationDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let informationStateList: [PlaygroundOption] = [
+    .init("default", InformationState.default),
+    .init("warning", InformationState.warning),
+    .init("error", InformationState.error),
+]
+
+struct InformationDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { InformationPreview() }, playground: { InformationPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct InformationPreview: View {
+    var body: some View {
+        BasicColumnBox("States", alignment: .leading) {
+            Information(title: "Default", description: "This is a default information message.",
+                        showIconClose: true, onPressClose: {})
+            Information(title: "Warning", description: "This is a warning information message.", state: .warning)
+            Information(title: "Error", description: "This is an error information message.", state: .error)
+        }
+        BasicColumnBox("Description only", alignment: .leading) {
+            Information(description: "Information without a title, only a description.")
+            Information(description: "Warning without a title.", state: .warning)
+        }
+        BasicColumnBox("With action", alignment: .leading) {
+            Information(title: "Update available", description: "A new version is ready to install.",
+                        onPressAction: {}, action: "Update now")
+            Information(title: "Payment failed", description: "We couldn't process your payment.",
+                        state: .error, onPressAction: {}, action: "Retry")
+        }
+        BasicColumnBox("Highlight text", alignment: .leading) {
+            Information(description: "Bạn được hoàn 50.000đ, áp dụng đến hết 31/12/2026",
+                        highlightText: ["50.000đ", "31/12/2026"])
+        }
+        BasicColumnBox("Without icon", alignment: .leading) {
+            Information(title: "No icon", description: "showIcon is set to false.", showIcon: false)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct InformationPlayground: View {
+    @State private var title = "Title"
+    @State private var description = "Information description."
+    @State private var state: PlaygroundOption? = informationStateList.first { $0.key == "default" }
+    @State private var showIcon = true
+    @State private var showIconClose = false
+    @State private var action = ""
+    @State private var highlightText = "description"
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Information(
+                    title: title.isEmpty ? nil : title,
+                    description: description,
+                    state: (state?.value as? InformationState) ?? .default,
+                    onPressAction: {},
+                    showIcon: showIcon,
+                    action: action.isEmpty ? nil : action,
+                    showIconClose: showIconClose,
+                    onPressClose: {},
+                    highlightText: highlightText.components(separatedBy: ",")
+                        .map { $0.trimmingCharacters(in: .whitespaces) }
+                )
+            },
+            params: [
+                .string("Title", $title),
+                .string("Description", $description),
+                .string("HighlightText: [String] (comma-separated)", $highlightText),
+                .radio("State", informationStateList, $state),
+                .checkbox("ShowIcon", $showIcon),
+                .checkbox("ShowIconClose", $showIconClose),
+                .string("Action", $action),
+            ]
+        )
+    }
+}