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

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

@@ -0,0 +1,73 @@
+//
+//  LoaderDemo.swift
+//  Example
+//
+//  Preview + Playground demo for Loader / DotLoader / SpinnerLoader / ProgressBar.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let loaderTypeList: [PlaygroundOption] = [
+    .init("dot", LoaderType.dot),
+    .init("spinner", LoaderType.spinner),
+]
+
+struct LoaderDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { LoaderPreview() }, playground: { LoaderPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct LoaderPreview: View {
+    var body: some View {
+        BasicColumnBox("DotLoader", alignment: .leading) {
+            DotLoader()
+            DotLoader(tintColor: Colors.pink03)
+        }
+        BasicColumnBox("SpinnerLoader", alignment: .leading) {
+            SpinnerLoader()
+            SpinnerLoader(tintColor: Colors.pink03)
+        }
+        BasicColumnBox("ProgressBar", alignment: .leading) {
+            ProgressBar(percent: 0)
+            ProgressBar(percent: 40)
+            ProgressBar(percent: 100)
+            ProgressBar(percent: 65, color: Colors.pink03)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct LoaderPlayground: View {
+    @State private var type: PlaygroundOption? = loaderTypeList.first { $0.key == "dot" }
+    @State private var tint: PlaygroundOption? = playgroundColors.first { $0.key == "pink03" }
+    @State private var percent: Double = 65
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.L) {
+                    Loader(
+                        type: (type?.value as? LoaderType) ?? .dot,
+                        tintColor: tint?.value as? Color
+                    )
+                    ProgressBar(percent: CGFloat(percent), color: tint?.value as? Color)
+                }
+            },
+            params: [
+                .radio("Type", loaderTypeList, $type),
+                .color("TintColor", playgroundColors, $tint),
+                .slider("ProgressBar percent", $percent, min: 0, max: 100, step: 1),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,235 @@
+//
+//  LocalizeDemo.swift
+//  MoMoUIKitsDemo
+//
+//  SwiftUI port of the Compose demo `sample/shared/.../screens/LocalizeUsage.kt`,
+//  showcasing the `Localize` i18n port (ios/Application/Localize.swift).
+//  Synced from sample/iosApp/iosApp/Demo/LocalizeDemo.swift.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// App-specific dictionary. Keys here do NOT exist in the kit defaults, so addTranslations
+// registers them cleanly (addTranslations keeps existing keys on clash, host-default wins).
+private let AppTranslations = LocalizationObject(
+    vi: [
+        "demo_greeting": "Xin chào MoMo!",
+        "demo_cart_title": "Giỏ hàng của bạn",
+    ],
+    en: [
+        "demo_greeting": "Hello MoMo!",
+        "demo_cart_title": "Your cart",
+    ]
+)
+
+struct LocalizeDemo: View {
+    // AI-GENERATED START: observe the app language and drive it through the real platform API
+    @Environment(\.localize) private var localize
+    @Environment(\.applicationEnvironment) private var applicationEnvironment
+    // AI-GENERATED END: observe the app language and drive it through the real platform API
+
+    private var isEnglish: Bool { localize.currentLanguage == Localize.EN }
+
+    // AI-GENERATED START: observe the app language and drive it through the real platform API
+    private var storedLanguage: String {
+        UserDefaults.standard.string(forKey: UserDefaultsLanguageSource.defaultKey) ?? "nil"
+    }
+
+    private func setLanguage(_ language: String) {
+        // Platform API -> KMP LanguageApi.SetLanguage -> LocalizationProvider.set, which also
+        // mirrors AppleLanguages. KVO then pushes the change back into Localize. The real wire.
+        if let composeApi = applicationEnvironment.composeApi {
+            _ = composeApi.request(funcName: "setLanguage", params: language)
+        } else {
+            localize.changeLanguage(language) // #Preview / sample app: no host bridge
+        }
+    }
+    // AI-GENERATED END: observe the app language and drive it through the real platform API
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 0) {
+
+                LocalizeSectionBox(title: "Đổi ngôn ngữ (toàn app)") {
+                    MomoText(
+                        "Switch gọi platform API setLanguage — đổi ngôn ngữ THẬT của app. Localize observe lại "
+                            + "qua UserDefaults nên mọi màn hình đang đọc translate() đều cập nhật.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    Switch(
+                        .constant(isEnglish),
+                        onChange: { _ in setLanguage(isEnglish ? Localize.VI : Localize.EN) },
+                        title: "English"
+                    )
+                    MomoText("currentLanguage = \(localize.currentLanguage)", typography: .labelDefaultMedium)
+                }
+
+                // AI-GENERATED START: prove the observation loop, not kit-local state, drives updates
+                LocalizeSectionBox(title: "Nguồn thật: UserDefaults") {
+                    MomoText(
+                        "Ghi thẳng vào UserDefaults, bỏ qua mọi API của kit — màn hình vẫn đổi, chứng minh "
+                            + "Localize đang observe ngôn ngữ app.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    TranslationRow(key: UserDefaultsLanguageSource.defaultKey, value: storedLanguage)
+                    Button(
+                        title: "Ghi thẳng UserDefaults = \"en\"",
+                        action: {
+                            // Quoted on purpose: proves normalize() strips the JSON quoting
+                            // RN and KMP persist.
+                            UserDefaults.standard.set(
+                                "\"en\"",
+                                forKey: UserDefaultsLanguageSource.defaultKey
+                            )
+                        },
+                        type: .outline,
+                        size: .medium,
+                        isFull: false
+                    )
+                }
+                // AI-GENERATED END: prove the observation loop, not kit-local state, drives updates
+
+                LocalizeSectionBox(title: "translate(key) — từ điển mặc định của kit") {
+                    TranslationRow(key: "confirm", value: localize.translate("confirm"))
+                    TranslationRow(key: "cancel", value: localize.translate("cancel"))
+                    TranslationRow(key: "done", value: localize.translate("done"))
+                    TranslationRow(key: "seeMore", value: localize.translate("seeMore"))
+                    TranslationRow(key: "balance", value: localize.translate("balance"))
+                }
+
+                LocalizeSectionBox(title: "Key thiếu → trả về chính key") {
+                    MomoText(
+                        "translate() với key không có (hoặc giá trị rỗng) sẽ trả lại đúng key để dễ phát hiện thiếu bản dịch.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    TranslationRow(key: "not_a_real_key", value: localize.translate("not_a_real_key"))
+                }
+
+                LocalizeSectionBox(title: "Chèn tham số vào bản dịch") {
+                    MomoText(
+                        "Bản port không tự nội suy {placeholder} — tự replace ở nơi dùng.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    TranslationRow(
+                        key: "voucherRemindHour",
+                        value: localize.translate("voucherRemindHour").replacingOccurrences(of: "{hours}", with: "3")
+                    )
+                }
+
+                LocalizeSectionBox(title: "translateData(vi:en:) — dịch nội tuyến") {
+                    MomoText(
+                        "Cho chuỗi dùng một lần, không cần khai báo key trong từ điển.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    MomoText(localize.translateData(vi: "Thanh toán ngay", en: "Pay now"), typography: .headerDefaultBold)
+                }
+
+                LocalizeSectionBox(title: "translateData(map) — chọn theo ngôn ngữ") {
+                    MomoText(
+                        localize.translateData([
+                            Localize.VI: "Lịch sử giao dịch",
+                            Localize.EN: "Transaction history",
+                        ]),
+                        typography: .headerDefaultBold
+                    )
+                }
+
+                LocalizeSectionBox(title: "addTranslations — từ điển riêng của app") {
+                    MomoText(
+                        "Host đăng ký key riêng (đã add khi màn hình xuất hiện), rồi dùng translate() như key mặc định.",
+                        typography: .descriptionDefaultRegular
+                    )
+                    TranslationRow(key: "demo_greeting", value: localize.translate("demo_greeting"))
+                    TranslationRow(key: "demo_cart_title", value: localize.translate("demo_cart_title"))
+                }
+
+                LocalizeSectionBox(title: "Ví dụ thực tế") {
+                    // errorCode already ends with a separator ("Mã lỗi: " / "Error code: ").
+                    MomoText(localize.translate("errorCode") + "E-4097", typography: .bodyDefaultRegular)
+                    HStack(spacing: Spacing.M) {
+                        Button(
+                            title: localize.translate("cancel"),
+                            action: {},
+                            type: .outline,
+                            size: .medium,
+                            isFull: false
+                        )
+                        Button(
+                            title: localize.translate("confirm"),
+                            action: {},
+                            type: .primary,
+                            size: .medium,
+                            isFull: false
+                        )
+                    }
+                }
+
+                Spacer(minLength: 32)
+            }
+        }
+        // Registers the app-specific dictionary once per appearance; addTranslations'
+        // merge is idempotent, so re-entry (e.g. re-navigating back to this screen) is safe.
+        .onAppear {
+            localize.addTranslations(AppTranslations)
+        }
+    }
+}
+
+// MARK: - LocalizeSectionBox
+
+/// Titled rounded-card section container, mirroring Compose's `BasicColumnBox`
+/// (title label above a `theme.colors.background.surface` card with `Radius.M` corners).
+private struct LocalizeSectionBox<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+    let title: String
+    @ViewBuilder let content: () -> Content
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            if !title.isEmpty {
+                MomoText(title, typography: .headerMBold)
+                    .padding(.top, 8)
+            }
+
+            VStack(alignment: .leading, spacing: 8) {
+                content()
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(12)
+            .background(theme.colors.background.surface)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+        }
+        .padding(12)
+    }
+}
+
+// MARK: - TranslationRow
+
+private struct TranslationRow: View {
+    @Environment(\.appTheme) private var theme
+    let key: String
+    let value: String
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 2) {
+            MomoText(key, typography: .labelDefaultMedium, color: theme.colors.text.secondary)
+            MomoText(value, typography: .bodyDefaultRegular)
+        }
+    }
+}
+
+// MARK: - Preview
+
+#Preview {
+    if #available(iOS 16.0, *) {
+        NavigationStack {
+            // AI-GENERATED START: preview needs the observing provider or the toggle will not update
+            LocalizeDemo()
+                .momoLocalize(Localize())
+            // AI-GENERATED END: preview needs the observing provider or the toggle will not update
+        }
+    } else {
+        // Fallback on earlier versions
+    }
+}

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

@@ -0,0 +1,241 @@
+//
+//  NavigationDemo.swift
+//  Example
+//
+//  Usage demo for the navigation flow. Mirrors Compose's `NavigationUsage`:
+//  exercises push / present / replace / reset, the modal & bottom-sheet
+//  overplays, the snack bar, the user header title and the bottom-tab layout.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct NavigationDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            NavigationDemoContent()
+        } else {
+            Text("Navigation demo requires iOS 16+").padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct NavigationDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+    @State private var textValue1 = ""
+
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 12) {
+                row("Push Screen") {
+                    navigator.push(
+                        { DemoLeafScreen(title: "Pushed Screen", color: Colors.blue09) },
+                        options: NavigationOptions(title: "Pushed Screen")
+                    )
+                }
+
+                row("Present Screen") {
+                    navigator.present(
+                        { PresentedScreen() },
+                        options: NavigationOptions(title: "Presented Screen")
+                    )
+                }
+
+                row("Replace Screen") {
+                    navigator.replace(
+                        { DemoLeafScreen(title: "Replaced Screen", color: Colors.pink09) },
+                        options: NavigationOptions(title: "Replaced Screen")
+                    )
+                }
+
+                row("Reset Screen") {
+                    // Clears the whole stack and installs a new root (no back).
+                    navigator.reset(
+                        { ResetTargetScreen() },
+                        options: NavigationOptions(title: "Reset Screen", hiddenBack: true)
+                    )
+                }
+
+                row("Show Modal") {
+                    navigator.showModal({
+                        VStack(spacing: 16) {
+                            MomoText("This is a modal", typography: .headerDefaultBold)
+                            MoMoUIKits.Button(title: "Close", action: { navigator.hideOverplay() }, type: .primary, size: .medium)
+                        }
+                        .padding(24)
+                        .frame(width: 300)
+                        .background(Colors.black01)
+                        .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+                    }, barrierDismissible: true, onDismiss: { print("Modal dismissed") })
+                }
+
+                row("Show Bottom Sheet") {
+                    navigator.showBottomSheet({
+                        VStack(spacing: 12) {
+                            Input(text: $textValue1, placeholder: "Test Bottom Sheet")
+                            ForEach(0..<4, id: \.self) { i in
+                                MomoText("Bottom sheet row \(i + 1)")
+                                    .frame(maxWidth: .infinity, alignment: .leading)
+                            }
+                            MoMoUIKits.Button(title: "Close", action: { navigator.hideOverplay() }, type: .primary, size: .large)
+                        }
+                        .padding(Spacing.L)
+                    }, isSurface: true, barrierDismissible: true, header: .title("Bottom Sheet"), onDismiss: { print("Bottom Sheet dismissed") })
+                }
+
+                row("Show Snack Bar") {
+                    navigator.showSnackBar(.custom(duration: 2.0) {
+                        HStack {
+                            MomoText("Snack bar !!!", color: Colors.black01)
+                            Spacer()
+                        }
+                        .padding(.horizontal, 20)
+                        .frame(height: 56)
+                        .frame(maxWidth: .infinity)
+                        .background(Colors.black17)
+                        .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+                        .padding(.horizontal, Spacing.M)
+                    })
+                }
+
+                Divider().padding(.vertical, 4)
+
+                row("Custom Back Handler") {
+                    // The screen owns back: the header button and the edge swipe both
+                    // run this instead of popping (mirrors Compose's onBackHandler).
+                    navigator.push(
+                        { DemoLeafScreen(title: "Back is intercepted — swipe from the edge", color: Colors.blue09) },
+                        options: NavigationOptions(
+                            title: "Custom Back",
+                            onBackHandler: { print("back intercepted") }
+                        )
+                    )
+                }
+
+                row("Prevent Back") {
+                    // The header back button and the edge swipe both show a confirm popup
+                    // before leaving (mirrors Compose's headerBackProps.preventBack).
+                    navigator.push(
+                        { DemoLeafScreen(title: "Tap the header back button", color: Colors.pink09) },
+                        options: NavigationOptions(
+                            title: "Prevent Back",
+                            headerBackProps: HeaderBackProps(
+                                preventBack: PreventBackProps(
+                                    title: "Leave this screen?",
+                                    description: "Your changes won't be saved.",
+                                    primary: PopupAction(title: "Leave", onPress: { print("left") }),
+                                    secondary: PopupAction(title: "Stay")
+                                )
+                            )
+                        )
+                    )
+                }
+
+                row("Header User Title") {
+                    navigator.push(
+                        { HeaderUserDemoContent() },
+                        options: NavigationOptions(
+                            headerTitle: .user(
+                                HeaderUserData(
+                                    title: "Nguyen Van A",
+                                    subTitle: "0900 000 000",
+                                    image: ["https://images.unsplash.com/photo-1599566150163-29194dcaad36"],
+                                    dotColor: Colors.primary,
+                                    icons: ["https://static.momocdn.net/app/img/kits/verified.png"]
+                                )
+                            )
+                        )
+                    )
+                }
+
+                row("Header Animated") {
+                    navigator.push(
+                        { AnimatedHeaderDemoContent() },
+                        options: NavigationOptions(title: "Animated Header")
+                    )
+                }
+
+                row("Bottom Tabs") {
+                    navigator.push(
+                        { BottomTabDemoContent() },
+                        // Parent screen has no chrome; each tab renders its own
+                        // header (mirrors Compose setting parent headerType = None).
+                        options: NavigationOptions(headerType: .none, scrollable: false)
+                    )
+                }
+            }
+            .padding(16)
+        }
+    }
+
+    @ViewBuilder
+    private func row(_ title: String, action: @escaping () -> Void) -> some View {
+        MoMoUIKits.Button(title: title, action: action, size: .large)
+    }
+}
+
+// MARK: - Leaf / presented screens
+
+@available(iOS 16.0, *)
+private struct DemoLeafScreen: View {
+    @EnvironmentObject private var navigator: Navigator
+    let title: String
+    let color: Color
+
+    var body: some View {
+        VStack(spacing: 16) {
+            MomoText(title, typography: .headerDefaultBold)
+            MoMoUIKits.Button(title: "Go back", action: { navigator.pop() }, type: .primary, size: .large)
+        }
+        .frame(maxWidth: .infinity)
+        .padding(24)
+        .background(color)
+        .clipShape(RoundedRectangle(cornerRadius: Radius.L))
+        .padding(16)
+    }
+}
+
+@available(iOS 16.0, *)
+private struct ResetTargetScreen: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    var body: some View {
+        VStack(spacing: 16) {
+            MomoText("Stack was reset — this is the new root.", typography: .headerDefaultBold)
+            // `reset` again to re-root back into the navigation demo.
+            MoMoUIKits.Button(
+                title: "Back to Navigation demo",
+                action: {
+                    navigator.reset(
+                        { NavigationDemoContent() },
+                        options: NavigationOptions(title: "Navigation")
+                    )
+                },
+                type: .primary,
+                size: .large
+            )
+        }
+        .frame(maxWidth: .infinity)
+        .padding(24)
+    }
+}
+
+@available(iOS 16.0, *)
+private struct PresentedScreen: View {
+    @EnvironmentObject private var navigator: Navigator
+
+    var body: some View {
+        VStack(spacing: 16) {
+            MomoText("Presented modally (slides up)", typography: .headerDefaultBold)
+            MoMoUIKits.Button(title: "Dismiss", action: { navigator.dismiss() }, type: .primary, size: .large)
+        }
+        .padding(24)
+    }
+}
+
+#if DEBUG
+struct NavigationDemo_Previews: PreviewProvider {
+    static var previews: some View { NavigationDemo() }
+}
+#endif

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

@@ -0,0 +1,68 @@
+//
+//  PaginationDemo.swift
+//  Example
+//
+//  Preview + Playground demo for the pagination variants.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct PaginationDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { PaginationPreview() }, playground: { PaginationPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct PaginationPreview: View {
+    var body: some View {
+        BasicColumnBox("PaginationScroll", alignment: .leading) {
+            PaginationScroll {
+                ForEach(0..<10, id: \.self) { i in
+                    MomoText("\(i)", typography: .bodyDefaultRegular)
+                        .frame(width: 120, height: 60)
+                        .background(Colors.blue08)
+                        .overlay(Rectangle().stroke(Colors.black06, lineWidth: 1))
+                }
+            }
+        }
+        BasicColumnBox("Number / Dot", alignment: .leading) {
+            PaginationNumber(activeIndex: 1, dataLength: 3)
+            PaginationDot(activeIndex: 1, dataLength: 3)
+        }
+        BasicColumnBox("WhiteDot", alignment: .leading, background: Colors.black17) {
+            PaginationWhiteDot(activeIndex: 1, dataLength: 3)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct PaginationPlayground: View {
+    @State private var dataLength = "5"
+    @State private var activeIndex: Double = 0
+
+    private var length: Int { max(Int(dataLength) ?? 1, 1) }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                VStack(alignment: .leading, spacing: Spacing.L) {
+                    PaginationNumber(activeIndex: Int(activeIndex), dataLength: length)
+                    PaginationDot(activeIndex: Int(activeIndex), dataLength: length)
+                }
+            },
+            params: [
+                .number("DataLength", $dataLength),
+                .slider("ActiveIndex", $activeIndex, min: 0, max: 9, step: 1),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,76 @@
+//
+//  PlaygroundData.swift
+//  Example
+//
+//  Swift equivalents of the option maps in Compose's DemoScreen.kt (buttonTypeList,
+//  sizeList, Icons, Colors.colorList, ...). Each list feeds an OPTION / RADIO / COLOR
+//  PlaygroundParams. Extend as more demos are converted.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - Enum option maps
+
+let buttonTypeList: [PlaygroundOption] = [
+    .init("primary", ButtonType.primary),
+    .init("secondary", ButtonType.secondary),
+    .init("tonal", ButtonType.tonal),
+    .init("outline", ButtonType.outline),
+    .init("danger", ButtonType.danger),
+    .init("text", ButtonType.text),
+    .init("disabled", ButtonType.disabled),
+]
+
+let buttonSizeList: [PlaygroundOption] = [
+    .init("large", ButtonSize.large),
+    .init("medium", ButtonSize.medium),
+    .init("small", ButtonSize.small),
+]
+
+let inputSizeList: [PlaygroundOption] = [
+    .init("large", InputSize.large),
+    .init("small", InputSize.small),
+]
+
+let inputFontWeightList: [PlaygroundOption] = [
+    .init("regular", InputFontWeight.regular),
+    .init("bold", InputFontWeight.bold),
+]
+
+let keyboardTypeList: [PlaygroundOption] = [
+    .init("default", UIKeyboardType.default),
+    .init("asciiCapable", UIKeyboardType.asciiCapable),
+    .init("numberPad", UIKeyboardType.numberPad),
+    .init("phonePad", UIKeyboardType.phonePad),
+    .init("URL", UIKeyboardType.URL),
+    .init("emailAddress", UIKeyboardType.emailAddress),
+    .init("decimalPad", UIKeyboardType.decimalPad),
+]
+
+// MARK: - Icons (curated from icon.json; Compose `Icons`)
+
+let playgroundIcons: [PlaygroundOption] = [
+    "basic_home", "basic_flag", "basic_filter", "basic_delete", "basic_copy",
+    "basic_account", "basic_chart", "basic_setting", "basic_sun", "basic_person",
+    "basic_person_add", "basic_person_group", "basic_options", "basic_sorting",
+    "arrow_chevron_down", "arrow_chevron_up", "arrow_chevron_left", "arrow_chevron_right",
+    "arrow_arrow_forward", "arrow_redo", "arrow_undo", "arrow_refresh_ccw",
+    "security_eye_open", "notifications_check_circle", "help_center", "pin_star",
+    "navigation_more_icon",
+].map { PlaygroundOption($0, $0) }
+
+// MARK: - Colors (Compose `Colors.colorList`)
+
+let playgroundColors: [PlaygroundOption] = [
+    .init("primary", Colors.primary),
+    .init("black17", Colors.black17),
+    .init("black13", Colors.black13),
+    .init("black10", Colors.black10),
+    .init("black05", Colors.black05),
+    .init("black01", Colors.black01),
+    .init("pink06", Colors.pink06),
+    .init("pink03", Colors.pink03),
+    .init("blue09", Colors.blue09),
+    .init("blue05", Colors.blue05),
+]