@momo-kits/native-kits 0.162.2-beta.1 → 0.162.2-sp.1-debug

package/ios/Application/Navigation/component/HeaderColor.swift

@@ -0,0 +1,65 @@
+//
+//  HeaderColor.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `HeaderColor` + `getHeaderColor`
+//  (navigation/component/Header.kt). Resolves the back-button / control colors
+//  for the header based on whether it sits over an animated (image) header and
+//  how far the screen has scrolled.
+//
+
+import SwiftUI
+
+/// Header band height, mirrors Compose's `HEADER_HEIGHT`.
+public let HEADER_HEIGHT: CGFloat = 52
+
+/// Mirrors Compose's `enum InputSearchType`.
+enum NavInputSearchType {
+    case none, header, animated
+}
+
+/// Mirrors Compose's `HeaderColor`.
+public struct HeaderColor {
+    public let tintIconColor: Color
+    public let backgroundButton: Color
+    public let borderColor: Color
+}
+
+/// Mirrors Compose's `getHeaderColor`. On iOS the "animated" header is expressed
+/// via a non-nil `animatedHeader`, so we pass `isAnimated`/`isSurface` instead of
+/// the Compose `HeaderType.Animated` case.
+func getHeaderColor(
+    isAnimated: Bool,
+    isSurface: Bool,
+    opacity: CGFloat,
+    tintColor: Color?,
+    defaultColor: Color = Colors.black17
+) -> HeaderColor {
+    if isAnimated {
+        if opacity >= 1 || !isSurface {
+            return HeaderColor(
+                tintIconColor: Colors.black17,
+                backgroundButton: Colors.black01.opacity(0.6),
+                borderColor: Colors.black20.opacity(0.2)
+            )
+        }
+        return HeaderColor(
+            tintIconColor: Colors.black01,
+            backgroundButton: Colors.black20.opacity(0.6),
+            borderColor: .clear
+        )
+    }
+
+    if tintColor == Colors.black01 {
+        return HeaderColor(
+            tintIconColor: Colors.black01,
+            backgroundButton: Colors.black20.opacity(0.6),
+            borderColor: Colors.black01.opacity(0.2)
+        )
+    }
+    return HeaderColor(
+        tintIconColor: tintColor ?? defaultColor,
+        backgroundButton: Colors.black01.opacity(0.6),
+        borderColor: Colors.black20.opacity(0.2)
+    )
+}

package/ios/Application/StackScreen.swift

@@ -0,0 +1,449 @@
+//
+//  StackScreen.swift
+//  Pods
+//
+//  SwiftUI mirror of Compose's `StackScreen`. This is a refactor of `Screen`:
+//  the body is decomposed into the same focused pieces Compose uses — header
+//  layer, scrollable content (`StackScreenContent`), floating button
+//  (`FloatingContent`) and footer (`FooterContent`) — instead of one
+//  monolithic, partially-duplicated view. The public init matches `Screen`
+//  so call sites (e.g. NavigationContainer's ScreenHost) can swap over.
+//
+
+import SwiftUI
+
+public struct StackScreen<Content: View>: View {
+    // MARK: - Properties
+
+    var backgroundColor: Color?
+    var headerTransparent: Bool = false
+    var fullScreenContent: Bool = false
+    var tintColor: Color? = Colors.black17
+    var isBack: Bool
+    var headerType: HeaderType
+    var useAnimated: Bool = false
+    var verticalAlignment: VerticalAlignment
+    var horizontalAlignment: HorizontalAlignment
+    var title: String
+    var headerTitle: HeaderTitle?
+    var titlePosition: TitlePosition
+    var goBack: (() -> Void)?
+    var scrollable: Bool
+    var scrollToTopCallback: (() -> Void)?
+    var onContentLayout: ((CGRect) -> Void)?
+    var useAvoidKeyboard: Bool
+    var keyboardShouldPersistTaps: Bool
+    var footer: (() -> AnyView)?
+    var headerRight: (()->any View)? = {HeaderRight()}
+    var animatedHeader: AnimatedHeader? = nil
+    var layoutOffset: CGFloat
+    var inputSearchProps: InputSearchProps?
+    var fabProps: FabProps?
+    var content: () -> Content
+
+    public init(
+        backgroundColor: Color? = nil,
+        headerTransparent: Bool = false,
+        fullScreenContent: Bool = false,
+        tintColor: Color = Colors.black17,
+        isBack: Bool = true,
+        headerType: HeaderType = .default,
+        useAnimated: Bool = false,
+        verticalAlignment: VerticalAlignment = .top,
+        horizontalAlignment: HorizontalAlignment = .leading,
+        title: String = "Stack",
+        headerTitle: HeaderTitle? = nil,
+        titlePosition: TitlePosition = .left,
+        goBack: (() -> Void)? = nil,
+        scrollable: Bool = true,
+        scrollToTopCallback: (() -> Void)? = nil,
+        onContentLayout: ((CGRect) -> Void)? = nil,
+        useAvoidKeyboard: Bool = true,
+        keyboardShouldPersistTaps: Bool = false,
+        footer: (() -> AnyView)? = nil,
+        headerRight:  (()->any View)? = {HeaderRight()},
+        animatedHeader: AnimatedHeader? = nil,
+        layoutOffset: CGFloat = 56,
+        inputSearchProps: InputSearchProps? = nil,
+        fabProps: FabProps? = nil,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.backgroundColor = backgroundColor
+        self.headerTransparent = headerTransparent
+        self.fullScreenContent = fullScreenContent
+        self.tintColor = tintColor
+        self.isBack = isBack
+        self.headerType = headerType
+        self.useAnimated = useAnimated
+        self.verticalAlignment = verticalAlignment
+        self.horizontalAlignment = horizontalAlignment
+        self.title = title
+        self.headerTitle = headerTitle
+        self.titlePosition = titlePosition
+        self.goBack = goBack
+        self.scrollable = scrollable
+        self.scrollToTopCallback = scrollToTopCallback
+        self.onContentLayout = onContentLayout
+        self.useAvoidKeyboard = useAvoidKeyboard
+        self.keyboardShouldPersistTaps = keyboardShouldPersistTaps
+        self.footer = footer
+        self.headerRight = headerRight
+        self.animatedHeader = animatedHeader
+        self.layoutOffset = layoutOffset
+        self.inputSearchProps = inputSearchProps
+        self.fabProps = fabProps
+        self.content = content
+    }
+
+    @State private var scrollOffset: CGFloat = 0
+    @State private var keyboardHeight: CGFloat = 0
+    @State private var headerRightWidth: CGFloat = 0
+
+    /// Header background fade tied to scroll: 0 → transparent (over a hero image
+    /// or transparent header), 1 → opaque surface with the drop shadow.
+    private var scrollOpacity: CGFloat { min(scrollOffset / 114, 1) }
+
+    // MARK: - Search header (mirrors Compose's getInputSearchType / SearchAnimated)
+
+    private enum InputSearchType { case none, header, animated }
+
+    private var inputSearchType: InputSearchType {
+        guard inputSearchProps != nil else { return .none }
+        return useAnimated ? .animated : .header
+    }
+
+    private static var headerHeight: CGFloat { 52 }
+
+    /// Extra top space reserved inside the content so the animated search bar has
+    /// room below the header at scroll 0; it shrinks to 0 as the bar slides up.
+    private var animatedSearchInset: CGFloat {
+        guard inputSearchType == .animated else { return 0 }
+        let scroll = max(scrollOffset, 0)
+        return min(max(Self.headerHeight - scroll, 0), Self.headerHeight)
+    }
+
+    /// Title fades out as the animated search bar rises into the header.
+    private var titleOpacity: CGFloat {
+        guard inputSearchType == .animated else { return 1 }
+        let scroll = max(scrollOffset, 0)
+        return 1 - min(max(scroll / Self.headerHeight, 0), 1)
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        GeometryReader { _ in
+            let keyboardSize: CGFloat = useAvoidKeyboard ? max(keyboardHeight, 0) : 0
+
+            ZStack(alignment: .top) {
+                // Background color
+                (backgroundColor ?? Color.white)
+                    .edgesIgnoringSafeArea(.all)
+
+                VStack(spacing: 0) {
+                    ZStack(alignment: fabProps?.position == .center ? .bottom : .bottomTrailing) {
+                        VStack(alignment: horizontalAlignment, spacing: 0) {
+                            headerAndContent
+                        }
+
+                        FloatingContent(
+                            fabProps: fabProps,
+                            keyboardOffset: 0,
+                            scrollOffset: scrollOffset
+                        )
+                    }
+
+                    FooterContent(footer: footer, keyboardSize: keyboardSize)
+                }
+
+                // Animated search bar overlay (mirrors Compose's SearchAnimated layer).
+                if inputSearchType == .animated, let props = inputSearchProps {
+                    SearchAnimatedHeader(
+                        props: props,
+                        scrollOffset: scrollOffset,
+                        hiddenBack: !isBack,
+                        hasHeaderRight: headerRight != nil,
+                        headerRightWidth: headerRightWidth,
+                        headerHeight: Self.headerHeight
+                    )
+                }
+            }
+            .ignoresSafeArea(.keyboard, edges: .bottom)
+            .onPreferenceChange(HeaderRightWidthKey.self) { width in
+                if headerRightWidth != width { headerRightWidth = width }
+            }
+            .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)) { notification in
+                guard useAvoidKeyboard,
+                      let endFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
+                withAnimation(.easeOut(duration: 0.25)) {
+                    keyboardHeight = UIScreen.main.bounds.height - endFrame.origin.y
+                }
+            }
+            // Mirrors Compose's `hideKeyboardOnTap()`: a simultaneous gesture so
+            // taps still reach buttons/fields while also dismissing the keyboard.
+            .modifier(HideKeyboardOnTap(enabled: keyboardShouldPersistTaps))
+        }
+    }
+
+    // MARK: - Header + content layer
+
+    @ViewBuilder
+    private var headerAndContent: some View {
+        if let animatedHeader = animatedHeader {
+            // Animated (hero) header: the image is the top of the scroll content
+            // and the body overlaps its lower part; the header bar background
+            // fades in over the image as the screen scrolls (mirrors Compose's
+            // ScreenContent for HeaderType.Animated).
+            ZStack(alignment: .top) {
+                StackScreenContent(
+                    scrollable: scrollable,
+                    scrollOffset: $scrollOffset,
+                    scrollToTopCallback: scrollToTopCallback,
+                    animatedSearchInset: animatedSearchInset,
+                    content: { animatedHeroBody(animatedHeader) }
+                )
+                .edgesIgnoringSafeArea(.all)
+
+                header
+                    .background(
+                        Colors.black01
+                            .opacity(scrollOpacity)
+                            .edgesIgnoringSafeArea(.top)
+                    )
+                    .zIndex(100)
+            }
+        } else if headerTransparent && fullScreenContent {
+            ZStack(alignment: .top) {
+                header
+                    .background(
+                        NavigationHeaderBackground(
+                            headerType: headerType,
+                            scrollState: scrollOffset,
+                            headerTransparent: headerTransparent,
+                            fullScreenContent: fullScreenContent
+                        )
+                    )
+                    .zIndex(100)
+
+                StackScreenContent(scrollable: scrollable, scrollOffset: $scrollOffset, scrollToTopCallback: scrollToTopCallback, animatedSearchInset: animatedSearchInset, content: content)
+                    .edgesIgnoringSafeArea(.all)
+            }
+        } else {
+            header
+                .background(
+                    NavigationHeaderBackground(
+                        headerType: headerType,
+                        scrollState: scrollOffset,
+                        headerTransparent: headerTransparent,
+                        fullScreenContent: fullScreenContent
+                    )
+                    .edgesIgnoringSafeArea(.top)
+                )
+
+            StackScreenContent(scrollable: scrollable, scrollOffset: $scrollOffset, scrollToTopCallback: scrollToTopCallback, animatedSearchInset: animatedSearchInset, content: content)
+        }
+    }
+
+    /// Hero image + body for an animated header. The image fills the width at its
+    /// aspect-ratio height; the body is offset below the header band so it overlaps
+    /// the lower part of the image (mirrors Compose's image box + padded content).
+    @ViewBuilder
+    private func animatedHeroBody(_ animatedHeader: AnimatedHeader) -> some View {
+        let width = UIScreen.main.bounds.width
+        let imageHeight = width / animatedHeader.aspectRatio.value
+        let contentTopInset = safeAreaTopInset() + HEADER_HEIGHT + layoutOffset
+
+        ZStack(alignment: .top) {
+            animatedHeader.composable(scrollOffset)
+                .frame(width: width, height: imageHeight)
+                .clipped()
+
+            content()
+                .padding(.top, contentTopInset)
+        }
+        .frame(maxWidth: .infinity, alignment: .top)
+    }
+
+    private var header: NavigationHeader {
+        NavigationHeader(
+            headerType: headerType,
+            titlePosition: titlePosition,
+            title: title,
+            headerTitle: headerTitle,
+            headerRight: headerRight,
+            goBack: goBack,
+            opacity: scrollOpacity,
+            animatedHeader: animatedHeader,
+            scrollState: scrollOffset,
+            // For the animated search the bar is rendered by the overlay, so the
+            // header shows the (fading) title instead of an inline search field.
+            inputSearchProps: inputSearchType == .header ? inputSearchProps : nil,
+            tintColor: tintColor,
+            titleOpacity: titleOpacity
+        )
+    }
+}
+
+// MARK: - Screen content (scrollable body)
+
+/// Mirrors Compose's `ScreenContent`/`MainContent`: renders the screen body and,
+/// when scrollable, tracks the scroll offset so the header/FAB can react to it.
+private struct StackScreenContent<Content: View>: View {
+    let scrollable: Bool
+    @Binding var scrollOffset: CGFloat
+    /// Mirrors Compose's `ScrollData.scrollToTopCallback`; fired alongside the
+    /// scroll-to-top triggered by a status-bar tap.
+    let scrollToTopCallback: (() -> Void)?
+    /// Extra top space reserved for the animated search bar (mirrors Compose's
+    /// MainContent animated top spacer). Zero for non-animated screens.
+    var animatedSearchInset: CGFloat = 0
+    let content: () -> Content
+
+    private let topAnchorID = "stack_screen_top_anchor"
+    private let scrollSpace = "stack_screen_scroll_space"
+
+    var body: some View {
+        if scrollable {
+            ScrollViewReader { proxy in
+                ScrollView(.vertical, showsIndicators: false) {
+                    VStack(spacing: 0) {
+                        // Top probe + scroll-to-top anchor. Measured in the scroll's
+                        // own coordinate space so the offset is a clean 0-based
+                        // "pixels scrolled" value, independent of the inset below.
+                        Color.clear
+                            .frame(height: 0)
+                            .id(topAnchorID)
+                            .background(GeometryReader { geo in
+                                Color.clear
+                                    .onAppear {
+                                        scrollOffset = -geo.frame(in: .named(scrollSpace)).minY
+                                    }
+                                    .onChange(of: geo.frame(in: .named(scrollSpace)).minY) { minY in
+                                        scrollOffset = -minY
+                                    }
+                            })
+
+                        if animatedSearchInset > 0 {
+                            Spacer().frame(height: animatedSearchInset)
+                        }
+
+                        VStack {
+                            content()
+                        }
+                    }
+                }
+                .coordinateSpace(name: scrollSpace)
+                // Status-bar tap (via MoMoStatusBarTap swizzle) scrolls to top and
+                // notifies the consumer, mirroring Compose's scrollToTopCallback.
+                .onReceive(NotificationCenter.default.publisher(for: MoMoStatusBarTap.notificationName)) { _ in
+                    withAnimation {
+                        proxy.scrollTo(topAnchorID, anchor: .top)
+                    }
+                    scrollToTopCallback?()
+                }
+            }
+        } else {
+            content()
+        }
+    }
+}
+
+// MARK: - Animated search header
+
+/// Mirrors Compose's `SearchAnimated`: the search bar slides from below the
+/// header (scroll 0) up into the header band as the user scrolls, while its
+/// horizontal insets grow to make room for the back button and header-right.
+/// Note: Compose's scroll-end snap and background-color lerp are not ported.
+private struct SearchAnimatedHeader: View {
+    let props: InputSearchProps
+    let scrollOffset: CGFloat
+    let hiddenBack: Bool
+    let hasHeaderRight: Bool
+    let headerRightWidth: CGFloat
+    let headerHeight: CGFloat
+
+    var body: some View {
+        let scroll = max(scrollOffset, 0)
+
+        // Insets are measured from the safe-area top (status bar handled by layout).
+        let minTop: CGFloat = 0
+        let maxTop = headerHeight
+        let minSide = Spacing.M
+        let maxStart: CGFloat = hiddenBack ? Spacing.M : 48
+        let maxEnd = headerRightWidth + (hasHeaderRight ? Spacing.M * 2 : Spacing.M)
+
+        let top = min(max(maxTop - scroll, minTop), maxTop)
+        let start = min(max(minSide + scroll, minSide), maxStart)
+        let end = min(max(minSide + scroll, minSide), maxEnd)
+
+        VStack(spacing: 0) {
+            Spacer().frame(height: top)
+            InputSearch(props: props)
+                .frame(height: headerHeight)
+                .padding(.leading, start)
+                .padding(.trailing, end)
+            Spacer(minLength: 0)
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
+    }
+}
+
+// MARK: - Floating content
+
+/// Mirrors Compose's `FloatingContent`: no FAB props means nothing renders.
+private struct FloatingContent: View {
+    let fabProps: FabProps?
+    let keyboardOffset: CGFloat
+    let scrollOffset: CGFloat
+
+    var body: some View {
+        if let fabProps = fabProps {
+            FloatingButton(
+                props: fabProps,
+                keyboardOffset: keyboardOffset,
+                scrollOffset: scrollOffset
+            )
+            .padding(.horizontal, Spacing.M)
+            .ignoresSafeArea(.keyboard, edges: .bottom)
+        }
+    }
+}
+
+// MARK: - Hide keyboard on tap
+
+/// Mirrors Compose's `Modifier.hideKeyboardOnTap()`. When enabled, a tap
+/// anywhere resigns the first responder. Uses `simultaneousGesture` so the tap
+/// is not consumed — buttons and text fields keep working.
+private struct HideKeyboardOnTap: ViewModifier {
+    let enabled: Bool
+
+    func body(content: Content) -> some View {
+        if enabled {
+            content.simultaneousGesture(
+                TapGesture().onEnded {
+                    UIApplication.shared.sendAction(
+                        #selector(UIResponder.resignFirstResponder),
+                        to: nil, from: nil, for: nil
+                    )
+                }
+            )
+        } else {
+            content
+        }
+    }
+}
+
+// MARK: - Footer content
+
+/// Mirrors Compose's `FooterContent`: renders the footer chrome only when a
+/// footer component is supplied. Reuses the existing `Footer` view from Screen.swift.
+private struct FooterContent: View {
+    let footer: (() -> AnyView)?
+    let keyboardSize: CGFloat
+
+    var body: some View {
+        if let footerView = footer?() {
+            Footer(footerView: footerView, keyboardSize: keyboardSize)
+        }
+    }
+}

package/ios/Avatar/Avatar.swift

@@ -0,0 +1,193 @@
+import SwiftUI
+
+let LOGO_MOMO_URL =
+    "https://static.momocdn.net/app/img/kits/logo_momo_circle.png"
+let ICON_SUPPORT_DEFAULT_URL =
+    "https://static.momocdn.net/app/img/kits/_indicator.png"
+
+public enum AvatarSize {
+    case size24
+    case size32
+    case size40
+    case size48
+    case size56
+    case size72
+
+    var sizeDp: CGFloat {
+        switch self {
+        case .size24: return 24
+        case .size32: return 32
+        case .size40: return 40
+        case .size48: return 48
+        case .size56: return 56
+        case .size72: return 72
+        }
+    }
+
+    var iconSizeDp: CGFloat {
+        switch self {
+        case .size24: return 16
+        case .size32: return 16
+        case .size40: return 24
+        case .size48: return 32
+        case .size56: return 32
+        case .size72: return 40
+        }
+    }
+}
+
+public struct Avatar: View {
+    @Environment(\.appTheme) private var theme
+
+    // MARK: Lifecycle
+
+    public init(
+        size: AvatarSize = .size32,
+        rounded: Bool = true,
+        name: String? = nil,
+        image: String? = nil,
+        showIconMomo: Bool = false,
+        showIconSupport: Bool = false,
+        iconSupport: String = "https://static.momocdn.net/app/img/kits/_indicator.png",
+        accessibilityLabel: String? = nil
+    ) {
+        self.size = size
+        self.rounded = rounded
+        self.name = name
+        self.image = image
+        self.showIconMomo = showIconMomo
+        self.showIconSupport = showIconSupport
+        self.iconSupport = iconSupport
+        self.accessibilityLabel = accessibilityLabel
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        ZStack {
+            // Inner content clipped by shape with border
+            ZStack {
+                content
+            }
+            .frame(width: size.sizeDp, height: size.sizeDp)
+            .background(Colors.pink09)
+            .clipShape(RoundedRectangle(cornerRadius: cornerRadius))
+            .overlay(
+                RoundedRectangle(cornerRadius: cornerRadius)
+                    .stroke(theme.colors.border.default, lineWidth: 1)
+            )
+
+            // Badge icons — outside clip so they are not cut by border
+            if shouldShowIconTop {
+                ImageView(LOGO_MOMO_URL)
+                    .frame(width: badgeSizeDp, height: badgeSizeDp)
+                    .clipShape(RoundedRectangle(cornerRadius: badgeCornerRadius))
+                    .offset(x: 1, y: -1)
+                    .frame(
+                        width: size.sizeDp,
+                        height: size.sizeDp,
+                        alignment: .topTrailing
+                    )
+                    .zIndex(1)
+            }
+
+            if shouldShowIconBottom {
+                ImageView(iconSupport)
+                    .frame(width: badgeSizeDp, height: badgeSizeDp)
+                    .clipShape(RoundedRectangle(cornerRadius: badgeCornerRadius))
+                    .offset(x: 1, y: 1)
+                    .frame(
+                        width: size.sizeDp,
+                        height: size.sizeDp,
+                        alignment: .bottomTrailing
+                    )
+                    .zIndex(1)
+            }
+        }
+        .frame(width: size.sizeDp, height: size.sizeDp)
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel(automationId)
+    }
+
+    // MARK: Internal
+
+    let size: AvatarSize
+    let rounded: Bool
+    let name: String?
+    let image: String?
+    let showIconMomo: Bool
+    let showIconSupport: Bool
+    let iconSupport: String
+    let accessibilityLabel: String?
+
+    @ViewBuilder
+    private var content: some View {
+        if let image {
+            ImageView(image, contentMode: .fill)
+                .frame(width: size.sizeDp, height: size.sizeDp)
+                .clipShape(RoundedRectangle(cornerRadius: cornerRadius))
+        } else if let name {
+            MomoText(
+                Self.avatarInitials(name),
+                typography: .descriptionXsRegular,
+                color: Colors.pink03
+            )
+        } else {
+            Icon(
+                source: "basic_person",
+                size: size.iconSizeDp,
+                color: Colors.pink03
+            )
+        }
+    }
+
+    private var cornerRadius: CGFloat {
+        rounded ? size.sizeDp / 2 : Spacing.XS
+    }
+
+    private var badgeSizeDp: CGFloat {
+        size.iconSizeDp / 2
+    }
+
+    private var badgeCornerRadius: CGFloat {
+        size.iconSizeDp / 4
+    }
+
+    private var shouldShowIconTop: Bool {
+        showIconMomo && rounded
+    }
+
+    private var shouldShowIconBottom: Bool {
+        showIconSupport && rounded
+    }
+
+    private var automationId: String {
+        accessibilityLabel ?? "Avatar\(name != nil ? "/\(name!)" : "")"
+    }
+
+    private static func avatarInitials(_ name: String) -> String {
+        let words = name.trimmingCharacters(in: .whitespaces)
+            .split(separator: " ")
+            .filter { !$0.isEmpty }
+        return words.suffix(2)
+            .compactMap { $0.first?.uppercased() }
+            .joined()
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct Avatar_Previews: PreviewProvider {
+    static var previews: some View {
+        HStack(spacing: 12) {
+            Avatar(size: .size40)
+            Avatar(size: .size40, name: "Nguyen Van A")
+            Avatar(size: .size40, rounded: false, name: "John Doe")
+            Avatar(size: .size56, image: "https://i.pravatar.cc/150?img=1", showIconMomo: true)
+            Avatar(size: .size56, showIconSupport: true)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif