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

package/ios-demo/Resources/lottie_circle_loader.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":30,"ip":0,"op":20,"w":100,"h":100,"nm":"Spinner3.1_Refine","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":12,"ty":4,"nm":"loading 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"base pink 2","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.972549019608,0.988235294118,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0}],"markers":[]}

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

@@ -0,0 +1,48 @@
+import SwiftUI
+import MoMoUIKits
+
+struct DemoScaffold<Content: View>: View {
+    let title: String
+    let content: Content
+
+    init(title: String, @ViewBuilder content: () -> Content) {
+        self.title = title
+        self.content = content()
+    }
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 16) {
+                MomoText(title, typography: .headlineDefaultBold)
+                content
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(16)
+        }
+        .background(defaultTheme.colors.background.default.ignoresSafeArea())
+        .navigationTitle(title)
+        .navigationBarTitleDisplayMode(.inline)
+    }
+}
+
+struct DemoSection<Content: View>: View {
+    let title: String
+    let content: Content
+
+    init(_ title: String, @ViewBuilder content: () -> Content) {
+        self.title = title
+        self.content = content()
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 12) {
+            MomoText(title, typography: .headerDefaultBold)
+            content
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(16)
+        .background(defaultTheme.colors.background.surface)
+        .clipShape(RoundedRectangle(cornerRadius: Radius.S, style: .continuous))
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/Demos/UIKitsBadgeDemoView.swift

@@ -0,0 +1,25 @@
+import SwiftUI
+import MoMoUIKits
+
+struct UIKitsBadgeDemoView: View {
+    var body: some View {
+        DemoScaffold(title: "Badge") {
+            DemoSection("Numeric") {
+                HStack(spacing: 12) {
+                    Badge(label: "1")
+                    Badge(label: "12")
+                    Badge(label: "100")
+                }
+            }
+
+            DemoSection("Labels") {
+                HStack(spacing: 12) {
+                    Badge(label: "New")
+                    Badge(label: "Hot", backgroundColor: Colors.pink03)
+                    Badge(label: "Sale", backgroundColor: Colors.orange03)
+                }
+            }
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/Demos/UIKitsButtonDemoView.swift

@@ -0,0 +1,26 @@
+import SwiftUI
+import MoMoUIKits
+
+struct UIKitsButtonDemoView: View {
+    var body: some View {
+        DemoScaffold(title: "Button") {
+            DemoSection("Types") {
+                MoMoUIKits.Button(title: "Primary Button", action: {})
+                MoMoUIKits.Button(title: "Secondary Button", action: {}, type: .secondary)
+                MoMoUIKits.Button(title: "Tonal Button", action: {}, type: .tonal)
+                MoMoUIKits.Button(title: "Outline Button", action: {}, type: .outline)
+                MoMoUIKits.Button(title: "Danger Button", action: {}, type: .danger)
+                MoMoUIKits.Button(title: "Text Button", action: {}, type: .text)
+                MoMoUIKits.Button(title: "Disabled Button", action: {}, type: .disabled)
+            }
+
+            DemoSection("Sizes and Loading") {
+                MoMoUIKits.Button(title: "Large", action: {}, size: .large)
+                MoMoUIKits.Button(title: "Medium", action: {}, size: .medium)
+                MoMoUIKits.Button(title: "Small", action: {}, size: .small)
+                MoMoUIKits.Button(title: "Loading", action: {}, loading: true)
+            }
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/Demos/UIKitsCheckboxDemoView.swift

@@ -0,0 +1,19 @@
+import SwiftUI
+import MoMoUIKits
+
+struct UIKitsCheckboxDemoView: View {
+    @State private var checked = true
+    @State private var unchecked = false
+
+    var body: some View {
+        DemoScaffold(title: "Checkbox") {
+            DemoSection("States") {
+                Checkbox($checked, title: "Checked")
+                Checkbox($unchecked, title: "Unchecked")
+                Checkbox(.constant(true), disabled: true, title: "Disabled checked")
+                Checkbox(.constant(true), indeterminate: true, title: "Indeterminate")
+            }
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/Demos/UIKitsChipDemoView.swift

@@ -0,0 +1,33 @@
+import SwiftUI
+import MoMoUIKits
+
+struct UIKitsChipDemoView: View {
+    @State private var selected = "All"
+
+    var body: some View {
+        DemoScaffold(title: "Chip") {
+            DemoSection("Selectable") {
+                HStack(spacing: 8) {
+                    chip("All")
+                    chip("Active")
+                    chip("Done")
+                }
+            }
+
+            DemoSection("Sizes") {
+                HStack(spacing: 8) {
+                    Chip(label: "Large", size: .large)
+                    Chip(label: "Small", size: .small)
+                    Chip(label: "Selected", selected: true, size: .large)
+                }
+            }
+        }
+    }
+
+    private func chip(_ label: String) -> some View {
+        Chip(label: label, selected: selected == label) {
+            selected = label
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/Demos/UIKitsInputDemoView.swift

@@ -0,0 +1,48 @@
+import SwiftUI
+import MoMoUIKits
+
+struct UIKitsInputDemoView: View {
+    @State private var text = ""
+    @State private var phone = "0987654321"
+    @State private var password = "momokits"
+
+    var body: some View {
+        DemoScaffold(title: "Input") {
+            DemoSection("Text Input") {
+                Input(
+                    text: $text,
+                    placeholder: "Enter text",
+                    hintText: "Hint text",
+                    onChangeText: { text = $0 }
+                )
+                Input(
+                    text: $phone,
+                    placeholder: "Phone number",
+                    floatingValue: "Phone",
+                    keyboardType: .phonePad,
+                    onChangeText: { phone = $0 }
+                )
+            }
+
+            DemoSection("States") {
+                Input(
+                    text: $password,
+                    placeholder: "Password",
+                    secureTextEntry: true,
+                    onChangeText: { password = $0 }
+                )
+                Input(
+                    text: .constant("Invalid value"),
+                    placeholder: "Error",
+                    error: "This field has an error"
+                )
+                Input(
+                    text: .constant("Disabled value"),
+                    placeholder: "Disabled",
+                    disabled: true
+                )
+            }
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/Demos/UIKitsPopupDemoView.swift

@@ -0,0 +1,21 @@
+import SwiftUI
+import MoMoUIKits
+
+struct UIKitsPopupDemoView: View {
+    var body: some View {
+        DemoScaffold(title: "Popup Notify") {
+            DemoSection("Default") {
+                PopupNotify(
+                    props: PopupNotifyProps(
+                        title: "Payment successful",
+                        description: "This popup demonstrates the native SwiftUI notification component.",
+                        primary: PopupAction(title: "Done", onPress: {}),
+                        secondary: PopupAction(title: "Later", onPress: {}),
+                        onIconClose: {}
+                    )
+                )
+            }
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/Demos/UIKitsRadioDemoView.swift

@@ -0,0 +1,17 @@
+import SwiftUI
+import MoMoUIKits
+
+struct UIKitsRadioDemoView: View {
+    @State private var selected: AnyHashable = "compose"
+
+    var body: some View {
+        DemoScaffold(title: "Radio") {
+            DemoSection("Options") {
+                Radio(value: "compose", groupValue: $selected, label: "Compose")
+                Radio(value: "swiftui", groupValue: $selected, label: "SwiftUI")
+                Radio(value: "disabled", groupValue: $selected, disabled: true, label: "Disabled")
+            }
+        }
+    }
+}
+

package/ios-demo/Sources/MoMoUIKitsDemo/Demos/UIKitsTypographyDemoView.swift

@@ -0,0 +1,28 @@
+import SwiftUI
+import MoMoUIKits
+
+struct UIKitsTypographyDemoView: View {
+    var body: some View {
+        DemoScaffold(title: "Typography") {
+            DemoSection("Headings") {
+                MomoText("Headline default bold", typography: .headlineDefaultBold)
+                MomoText("Header medium bold", typography: .headerMBold)
+                MomoText("Header default bold", typography: .headerDefaultBold)
+            }
+
+            DemoSection("Body") {
+                MomoText("Body default regular", typography: .bodyDefaultRegular)
+                MomoText("Description default regular", typography: .descriptionDefaultRegular)
+                MomoText("Label default medium", typography: .labelDefaultMedium)
+            }
+
+            DemoSection("Colors") {
+                MomoText("Primary text", typography: .bodyDefaultRegular, color: defaultTheme.colors.primary)
+                MomoText("Success text", typography: .bodyDefaultRegular, color: defaultTheme.colors.success.primary)
+                MomoText("Warning text", typography: .bodyDefaultRegular, color: defaultTheme.colors.warning.primary)
+                MomoText("Error text", typography: .bodyDefaultRegular, color: defaultTheme.colors.error.primary)
+            }
+        }
+    }
+}
+

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

@@ -0,0 +1,31 @@
+import Foundation
+import MoMoUIKits
+
+public struct MoMoUIKitsDemoContext {
+    public let appId: String
+    public let appCode: String
+    public let appName: String?
+    public let appIcon: String
+
+    public init(
+        appId: String = "",
+        appCode: String = "",
+        appName: String? = nil,
+        appIcon: String = ""
+    ) {
+        self.appId = appId
+        self.appCode = appCode
+        self.appName = appName
+        self.appIcon = appIcon
+    }
+
+    var miniAppContext: MiniAppContext {
+        MiniAppContext(
+            appId: appId,
+            appCode: appCode,
+            appName: appName,
+            appIcon: appIcon
+        )
+    }
+}
+

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

@@ -0,0 +1,24 @@
+import SwiftUI
+import UIKit
+import MoMoUIKits
+
+public enum MoMoUIKitsDemoViewControllerFactory {
+    public static func make(
+        context: MoMoUIKitsDemoContext = MoMoUIKitsDemoContext(),
+        composeViewController: (() -> UIViewController)? = nil
+    ) -> UIViewController {
+        composeViewController?() ?? makeSwiftUI(context: context)
+    }
+
+    public static func makeSwiftUI(
+        context: MoMoUIKitsDemoContext = MoMoUIKitsDemoContext(),
+        onOpenCompose: @escaping () -> Void = {}
+    ) -> UIViewController {
+        UIHostingController(
+            rootView: SwiftUIDemoBrowserView(
+                context: context,
+                onOpenCompose: onOpenCompose
+            )
+        )
+    }
+}

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

@@ -0,0 +1,110 @@
+//
+//  AnimatedHeaderDemo.swift
+//  Example
+//
+//  Usage demo for the animated (image) header. Mirrors Compose's
+//  `AnimatedHeaderUsage`: an image header configured with an aspect ratio +
+//  surface flag, over tall scrollable content that collapses the header.
+//
+//  On iOS the header is supplied through the pushed screen's NavigationOptions
+//  (`animatedHeader:`) — options are fixed at push time (no live setOptions like
+//  Compose) — so the ratio/surface are chosen here and applied on "Show".
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct AnimatedHeaderDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            AnimatedHeaderDemoContent()
+        } else {
+            Text("Animated header demo requires iOS 16+").padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+struct AnimatedHeaderDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    @State private var ratio: AnimatedHeaderRatio = .ratio16_9
+    @State private var isSurface = true
+
+    private let imageUrl = "https://static.momocdn.net/app/img/booking/holiday/mid_atumn_dldl.jpeg"
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 20) {
+            MomoText("Aspect ratio", typography: .headerDefaultBold)
+            Picker("Ratio", selection: $ratio) {
+                Text("16:9").tag(AnimatedHeaderRatio.ratio16_9)
+                Text("1:1").tag(AnimatedHeaderRatio.ratio1_1)
+                Text("3:2").tag(AnimatedHeaderRatio.ratio3_2)
+            }
+            .pickerStyle(.segmented)
+
+            Toggle(isOn: $isSurface) {
+                MomoText("Surface")
+            }
+
+            MoMoUIKits.Button(
+                title: "Show Animated Header",
+                action: show,
+                type: .primary,
+                size: .large
+            )
+
+            Spacer()
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(16)
+    }
+
+    private func show() {
+        let ratio = ratio
+        let isSurface = isSurface
+        let url = imageUrl
+        navigator.push(
+            { AnimatedHeaderTargetScreen(ratio: ratio) },
+            options: NavigationOptions(
+                title: "Animated Header",
+                animatedHeader: AnimatedHeader(
+                    aspectRatio: ratio,
+                    isSurface: isSurface,
+                    composable: { _ in
+                        AnyView(
+                            ImageView(url)
+                                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                                .clipped()
+                        )
+                    }
+                )
+            )
+        )
+    }
+}
+
+// MARK: - Target screen (tall content under the image header)
+
+@available(iOS 16.0, *)
+private struct AnimatedHeaderTargetScreen: View {
+    @EnvironmentObject private var navigator: Navigator
+    let ratio: AnimatedHeaderRatio
+
+    var body: some View {
+        // A white rounded card that overlaps the hero image's lower part; the top
+        // inset under the image header is handled by StackScreen.
+        VStack(alignment: .leading, spacing: 16) {
+            MomoText("Scroll up to collapse the header", typography: .headerDefaultBold)
+            ForEach(0..<24, id: \.self) { i in
+                MomoText("Content row \(i + 1)")
+                    .frame(maxWidth: .infinity, alignment: .leading)
+            }
+            MoMoUIKits.Button(title: "Go back", action: { navigator.pop() }, type: .secondary, size: .large)
+        }
+        .frame(maxWidth: .infinity, minHeight: UIScreen.main.bounds.height, alignment: .topLeading)
+        .padding(16)
+        .background(Colors.black01)
+        .clipShape(UnevenRoundedRectangle(topLeadingRadius: 16, topTrailingRadius: 16))
+    }
+}

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

@@ -0,0 +1,107 @@
+//
+//  AvatarDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct AvatarDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { AvatarPreview() }, playground: { AvatarPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+private let avatarSizeList: [PlaygroundOption] = [
+    .init("size24", AvatarSize.size24),
+    .init("size32", AvatarSize.size32),
+    .init("size40", AvatarSize.size40),
+    .init("size48", AvatarSize.size48),
+    .init("size56", AvatarSize.size56),
+    .init("size72", AvatarSize.size72),
+]
+
+// MARK: - Preview
+
+private struct AvatarPreview: View {
+    var body: some View {
+        BasicColumnBox("Size", alignment: .leading) {
+            HStack(alignment: .center, spacing: Spacing.S) {
+                Avatar(size: .size24)
+                Avatar(size: .size32)
+                Avatar(size: .size40)
+                Avatar(size: .size48)
+                Avatar(size: .size56)
+                Avatar(size: .size72)
+            }
+        }
+        BasicColumnBox("Rounded vs Square", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, rounded: true)
+                Avatar(size: .size40, rounded: false)
+            }
+        }
+        BasicColumnBox("Name (initials)", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, name: "Nguyen Van A")
+                Avatar(size: .size40, name: "John Doe")
+                Avatar(size: .size40, name: "MoMo")
+            }
+        }
+        BasicColumnBox("Image", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size40, image: "https://i.pravatar.cc/150?img=1")
+                Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=2")
+                Avatar(size: .size72, image: "https://i.pravatar.cc/150?img=3")
+            }
+        }
+        BasicColumnBox("Icon badges", alignment: .leading) {
+            HStack(spacing: Spacing.S) {
+                Avatar(size: .size48, showIconMomo: true)
+                Avatar(size: .size48, showIconSupport: true)
+                Avatar(size: .size56, showIconMomo: true, showIconSupport: true)
+            }
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct AvatarPlayground: View {
+    @State private var size: PlaygroundOption? = avatarSizeList.first { $0.key == "size48" }
+    @State private var rounded = true
+    @State private var name = ""
+    @State private var image = ""
+    @State private var showIconMomo = false
+    @State private var showIconSupport = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Avatar(
+                    size: (size?.value as? AvatarSize) ?? .size48,
+                    rounded: rounded,
+                    name: name.isEmpty ? nil : name,
+                    image: image.isEmpty ? nil : image,
+                    showIconMomo: showIconMomo,
+                    showIconSupport: showIconSupport
+                )
+            },
+            params: [
+                .radio("Size", avatarSizeList, $size),
+                .checkbox("Rounded", $rounded),
+                .string("Name", $name),
+                .string("Image", $image),
+                .checkbox("ShowIconMomo", $showIconMomo),
+                .checkbox("ShowIconSupport", $showIconSupport),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,75 @@
+//
+//  BadgeDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Badge / BadgeDot / BadgeRibbon.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct BadgeDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { BadgePreview() }, playground: { BadgePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct BadgePreview: View {
+    var body: some View {
+        BasicColumnBox("Basic Badges", alignment: .leading) {
+            HStack(spacing: Spacing.L) {
+                Badge()
+                Badge(label: "9")
+                Badge(label: "99")
+                Badge(label: "999")
+            }
+            HStack(spacing: Spacing.L) {
+                Badge(label: "New")
+                Badge(label: "Hot", backgroundColor: Colors.pink03)
+                Badge(label: "5", backgroundColor: Colors.green03)
+            }
+        }
+
+        BasicColumnBox("Badge Dots", alignment: .leading) {
+            HStack(spacing: Spacing.XL) {
+                BadgeDot(size: .small)
+                BadgeDot(size: .large)
+            }
+        }
+
+        BasicColumnBox("Badge Ribbons", alignment: .leading) {
+            HStack(spacing: Spacing.L) {
+                BadgeRibbon(position: .topLeft, label: "Top Left", isRound: true)
+                    .frame(width: 150, height: 30)
+                BadgeRibbon(position: .topRight, label: "Top Right", isRound: true)
+                    .frame(width: 150, height: 30)
+            }
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct BadgePlayground: View {
+    @State private var label = "New"
+    @State private var color: PlaygroundOption? = playgroundColors.first { $0.key == "pink03" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Badge(label: label, backgroundColor: color?.value as? Color)
+            },
+            params: [
+                .string("Label", $label),
+                .color("BackgroundColor", playgroundColors, $color),
+            ]
+        )
+    }
+}