@momo-kits/native-kits 0.162.30 → 0.162.31

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)
     }
 }
 

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

@@ -1,58 +1,93 @@
+//
+//  IconButtonDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
 import MoMoUIKits
 import SwiftUI
 
-// MARK: - IconButtonDemo
+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 {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                Group {
-                    Text("Source")
-                        .font(.headline)
-                    HStack(spacing: 12) {
-                        IconButton(icon: url, onClick: onPress, type: .primary)
-                        IconButton(icon: url2, onClick: onPress, type: .primary)
-                        IconButton(icon: url3, onClick: onPress, type: .primary)
-                        IconButton(icon: url4, onClick: onPress, type: .primary)
-                    }
-                }
-
-                Group {
-                    Text("Type")
-                        .font(.headline)
-                    HStack(spacing: 12) {
-                        IconButton(icon: url, onClick: onPress, type: .primary)
-                        IconButton(icon: url, onClick: onPress, type: .secondary)
-                        IconButton(icon: url, onClick: onPress, type: .tonal)
-                        IconButton(icon: url, onClick: onPress, type: .outline)
-                        IconButton(icon: url, onClick: onPress, type: .disabled)
-                        IconButton(icon: url, onClick: onPress, type: .danger)
-                    }
-                }
-
-                Group {
-                    Text("Size")
-                        .font(.headline)
-                    HStack(spacing: 12) {
-                        IconButton(icon: url, onClick: onPress, type: .primary, size: .large)
-                        IconButton(icon: url, onClick: onPress, type: .primary, size: .small)
-                    }
-                }
-            }
-            .padding(16)
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { IconButtonPreview() }, playground: { IconButtonPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
-        .padding(.top)
     }
+}
+
+// MARK: - Preview
 
-    func onPress() {
-        print("IconButton")
+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
 
-    // MARK: Private
+@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" }
 
-    private let url = "travel_plane"
-    private let url2 = "shopping_coupon"
-    private let url3 = "shopping_store"
-    private let url4 = "time_alarm_check"
+    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

@@ -2,77 +2,64 @@
 //  ImageDemo.swift
 //  Example
 //
-//  Created by dung.pham2 on 2/12/24.
+//  Preview + Playground demo for ImageView.
 //
 
-import SwiftUI
 import MoMoUIKits
+import SwiftUI
 
 struct ImageDemo: View {
-    // MARK: - Properties
-    @State private var time = 1000
-    
-    // MARK: - Body
     var body: some View {
-        NavigationView {
-            ScrollView {
-                VStack(spacing: 16) { // Equivalent to Spacing.M
-                    HStack {
-                        ImageView("https://source.unsplash.com/random/\(time)")
-                            .frame(width: 100, height: 100)
-                        
-                        Spacer()
-                        
-                        ImageView("https://abc.com")
-                            .frame(width: 100, height: 100)
-                    }
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fill)
-                        .clipped()
-                    
-                    ImageView("https://images.unsplash.com/photo-1509395062183-67c5ad6faff9")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fill)
-                        .clipped()
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fill)
-                        .clipped()
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fit)
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fit)
-                    
-                    ImageView("https://source.unsplash.com/random/\(time)")
-                        .frame(maxWidth: .infinity)
-                        .frame(height: 100)
-                        .aspectRatio(contentMode: .fit)
-                }
-                .padding()
-            }
-        }
-        .onAppear {
-            startTimer()
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { ImagePreview() }, playground: { ImagePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
         }
     }
-    
-    // MARK: - Methods
-    private func startTimer() {
-        Timer.scheduledTimer(withTimeInterval: 5, repeats: true) { _ in
-            time = Int.random(in: 1...1000)
+}
+
+// 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),
+            ]
+        )
+    }
+}