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

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

@@ -0,0 +1,114 @@
+//
+//  TabViewDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's TabViewUsage.kt.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+@ViewBuilder
+private func tvContent(_ label: String, _ background: Color) -> some View {
+    ZStack {
+        background
+        MomoText(label, typography: .headerSSemibold, color: Colors.text)
+    }
+    .frame(maxWidth: .infinity)
+    .frame(height: 120)
+}
+
+private let tabViewTypeList: [PlaygroundOption] = [
+    .init("default", TabViewType.default),
+    .init("card", TabViewType.card),
+]
+
+private let tabViewDirectionList: [PlaygroundOption] = [
+    .init("row", TabViewDirection.row),
+    .init("column", TabViewDirection.column),
+]
+
+struct TabViewDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TabViewPreview() }, playground: { TabViewPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct TabViewPreview: View {
+    var body: some View {
+        BasicColumnBox("Default (2 tabs)", alignment: .leading) {
+            MomoTabView(tabs: [
+                TabViewItem(title: "Tab 1") { tvContent("Content 1", Colors.pink09) },
+                TabViewItem(title: "Tab 2") { tvContent("Content 2", Colors.blue08) },
+            ])
+            .frame(height: 160)
+        }
+        BasicColumnBox("With badge & dot", alignment: .leading) {
+            MomoTabView(tabs: [
+                TabViewItem(title: "Inbox", badgeValue: "5") { tvContent("Inbox", Colors.orange08) },
+                TabViewItem(title: "Alerts", showDot: true, dotSize: .small) { tvContent("Alerts", Colors.red08) },
+                TabViewItem(title: "Done") { tvContent("Done", Colors.green08) },
+            ])
+            .frame(height: 160)
+        }
+        BasicColumnBox("Card type", alignment: .leading) {
+            MomoTabView(tabs: [
+                TabViewItem(title: "Personal") { tvContent("Personal", Colors.pink09) },
+                TabViewItem(title: "Business") { tvContent("Business", Colors.blue08) },
+            ], type: .card)
+            .frame(height: 160)
+        }
+        BasicColumnBox("Scrollable (many tabs)", alignment: .leading) {
+            MomoTabView(tabs: [
+                TabViewItem(title: "Monday") { tvContent("Monday", Colors.pink09) },
+                TabViewItem(title: "Tuesday") { tvContent("Tuesday", Colors.blue08) },
+                TabViewItem(title: "Wednesday") { tvContent("Wednesday", Colors.green08) },
+                TabViewItem(title: "Thursday") { tvContent("Thursday", Colors.orange08) },
+                TabViewItem(title: "Friday") { tvContent("Friday", Colors.mint08) },
+            ], scrollable: true)
+            .frame(height: 160)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TabViewPlayground: View {
+    @State private var type: PlaygroundOption? = tabViewTypeList.first { $0.key == "default" }
+    @State private var direction: PlaygroundOption? = tabViewDirectionList.first { $0.key == "row" }
+    @State private var scrollable = false
+    @State private var fitContent = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MomoTabView(
+                    tabs: [
+                        TabViewItem(title: "Home", icon: "basic_home") { tvContent("Home", Colors.pink09) },
+                        TabViewItem(title: "Search", icon: "basic_search") { tvContent("Search", Colors.blue08) },
+                        TabViewItem(title: "Profile") { tvContent("Profile", Colors.green08) },
+                    ],
+                    type: (type?.value as? TabViewType) ?? .default,
+                    scrollable: scrollable,
+                    fitContent: fitContent,
+                    direction: (direction?.value as? TabViewDirection) ?? .row
+                )
+                .frame(height: fitContent ? nil : 200)
+                .id("\(type?.key ?? "")-\(direction?.key ?? "")-\(scrollable)-\(fitContent)")
+            },
+            params: [
+                .radio("Type", tabViewTypeList, $type),
+                .radio("Direction", tabViewDirectionList, $direction),
+                .checkbox("Scrollable", $scrollable),
+                .checkbox("FitContent", $fitContent),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,86 @@
+//
+//  TagDemo.swift
+//  Example
+//
+//  Preview + Playground demo, mirroring Compose's TagUsage.kt.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let tagColorList: [PlaygroundOption] = [
+    .init("default", Tag.TagColor.default),
+    .init("orange", Tag.TagColor.orange),
+    .init("green", Tag.TagColor.green),
+    .init("red", Tag.TagColor.red),
+    .init("blue", Tag.TagColor.blue),
+    .init("grey", Tag.TagColor.grey),
+]
+
+private let tagSizeList: [PlaygroundOption] = [
+    .init("large", Tag.TagSize.large),
+    .init("medium", Tag.TagSize.medium),
+]
+
+struct TagDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TagPreview() }, playground: { TagPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct TagPreview: View {
+    var body: some View {
+        BasicColumnBox("Color", alignment: .leading) {
+            Tag()
+            Tag(color: .red)
+            Tag(color: .blue)
+            Tag(color: .green)
+            Tag(color: .orange)
+            Tag(color: .grey)
+        }
+        BasicColumnBox("Size", alignment: .leading) {
+            Tag(size: .large)
+            Tag(size: .medium)
+        }
+        BasicColumnBox("With Icon", alignment: .leading) {
+            Tag(icon: "ic_momo", color: .grey)
+            Tag(icon: "ic_momo", color: .red, size: .medium)
+            Tag(icon: "ic_momo", color: .blue, size: .medium)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TagPlayground: View {
+    @State private var label = "Label"
+    @State private var color: PlaygroundOption? = tagColorList.first { $0.key == "default" }
+    @State private var size: PlaygroundOption? = tagSizeList.first { $0.key == "large" }
+    @State private var icon: PlaygroundOption?
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Tag(
+                    label: label,
+                    icon: icon?.value as? String,
+                    color: (color?.value as? Tag.TagColor) ?? .default,
+                    size: (size?.value as? Tag.TagSize) ?? .large
+                )
+            },
+            params: [
+                .string("Label", $label),
+                .radio("Color", tagColorList, $color),
+                .radio("Size", tagSizeList, $size),
+                .option("Icon", playgroundIcons, $icon),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,181 @@
+//
+//  ThemeDemo.swift
+//  iosApp
+//
+//  Created by sophia on 25/2/26.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+// MARK: - ThemeDemo
+
+struct ThemeDemo: View {
+    @Environment(\.appTheme) private var theme
+    @State private var isDarkMode: Bool = false
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 0) {
+
+                // MARK: Dark Mode Toggle
+                Toggle(isOn: $isDarkMode) {
+                    Text("Dark Mode")
+                        .font(.headline)
+                }
+                .padding(.horizontal, 16)
+                .padding(.vertical, 12)
+                .onChange(of: isDarkMode) { _ in
+                    // Theme switching is handled via parent environment
+                }
+
+                Divider()
+
+                // MARK: Primary / Secondary
+                SectionHeader("Primary & Secondary")
+                ThemeColorRow(label: "primary", color: theme.colors.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.secondary)
+
+                // MARK: Background
+                SectionHeader("Background")
+                ThemeColorRow(label: "default", color: theme.colors.background.default)
+                ThemeColorRow(label: "surface", color: theme.colors.background.surface)
+                ThemeColorRow(label: "tonal", color: theme.colors.background.tonal)
+                ThemeColorRow(label: "pressed", color: theme.colors.background.pressed)
+                ThemeColorRow(label: "selected", color: theme.colors.background.selected)
+                ThemeColorRow(label: "disable", color: theme.colors.background.disable)
+
+                // MARK: Text
+                SectionHeader("Text")
+                ThemeColorRow(label: "default", color: theme.colors.text.default)
+                ThemeColorRow(label: "secondary", color: theme.colors.text.secondary)
+                ThemeColorRow(label: "hint", color: theme.colors.text.hint)
+                ThemeColorRow(label: "disable", color: theme.colors.text.disable)
+
+                // MARK: Border
+                SectionHeader("Border")
+                ThemeColorRow(label: "default", color: theme.colors.border.default)
+                ThemeColorRow(label: "disable", color: theme.colors.border.disable)
+
+                // MARK: Success
+                SectionHeader("Success")
+                ThemeColorRow(label: "primary", color: theme.colors.success.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.success.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.success.container)
+
+                // MARK: Warning
+                SectionHeader("Warning")
+                ThemeColorRow(label: "primary", color: theme.colors.warning.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.warning.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.warning.container)
+
+                // MARK: Error
+                SectionHeader("Error")
+                ThemeColorRow(label: "primary", color: theme.colors.error.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.error.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.error.container)
+
+                // MARK: Highlight
+                SectionHeader("Highlight")
+                ThemeColorRow(label: "primary", color: theme.colors.highlight.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.highlight.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.highlight.container)
+
+                // MARK: Interactive
+                SectionHeader("Interactive")
+                ThemeColorRow(label: "primary", color: theme.colors.interactive.primary)
+                ThemeColorRow(label: "secondary", color: theme.colors.interactive.secondary)
+                ThemeColorRow(label: "container", color: theme.colors.interactive.container)
+
+                Spacer(minLength: 32)
+            }
+        }
+        .background(isDarkMode ? Colors.black10.ignoresSafeArea() : theme.colors.background.default.ignoresSafeArea())
+        .environment(\.appTheme, isDarkMode ? darkTheme : defaultTheme)
+    }
+}
+
+// MARK: - SectionHeader
+
+private struct SectionHeader: View {
+    let title: String
+
+    init(_ title: String) {
+        self.title = title
+    }
+
+    var body: some View {
+        Text(title)
+            .font(.headline)
+            .fontWeight(.bold)
+            .padding(.horizontal, 16)
+            .padding(.top, 20)
+            .padding(.bottom, 8)
+    }
+}
+
+// MARK: - ThemeColorRow
+
+private struct ThemeColorRow: View {
+    @Environment(\.appTheme) private var theme
+    let label: String
+    let color: Color
+
+    var body: some View {
+        HStack(spacing: 12) {
+            RoundedRectangle(cornerRadius: 8)
+                .fill(color)
+                .frame(width: 36, height: 36)
+                .overlay(
+                    RoundedRectangle(cornerRadius: 8)
+                        .stroke(theme.colors.border.default, lineWidth: 1)
+                )
+
+            Text(label)
+                .font(.body)
+                .foregroundColor(theme.colors.text.default)
+
+            Spacer()
+
+            Text(color.toHexString())
+                .font(.caption)
+                .foregroundColor(theme.colors.text.hint)
+                .padding(.horizontal, 8)
+                .padding(.vertical, 4)
+                .background(theme.colors.background.tonal)
+                .clipShape(Capsule())
+        }
+        .padding(.horizontal, 16)
+        .padding(.vertical, 4)
+    }
+}
+
+// MARK: - Color+Hex helper
+
+extension Color {
+    /// Returns a hex string like "#EB2F96" from a SwiftUI Color.
+    func toHexString() -> String {
+        guard let cgColor = UIColor(self).cgColor.converted(
+            to: CGColorSpaceCreateDeviceRGB(),
+            intent: .defaultIntent,
+            options: nil
+        ) else { return "#??????" }
+        guard let components = cgColor.components, components.count >= 3 else { return "#??????" }
+        let r = Int((components[0] * 255).rounded())
+        let g = Int((components[1] * 255).rounded())
+        let b = Int((components[2] * 255).rounded())
+        return String(format: "#%02X%02X%02X", r, g, b)
+    }
+}
+
+// MARK: - Preview
+
+#Preview {
+    if #available(iOS 16.0, *) {
+        NavigationStack {
+            ThemeDemo()
+        }
+    } else {
+        // Fallback on earlier versions
+    }
+}

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

@@ -0,0 +1,104 @@
+//
+//  TitleDemo.swift
+//  Example
+//
+//  Preview + Playground demo (DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let titleTypeList: [PlaygroundOption] = [
+    .init("card", TitleType.card),
+    .init("section", TitleType.section),
+]
+
+private let titleSizeList: [PlaygroundOption] = [
+    .init("small", TitleSize.small),
+    .init("medium", TitleSize.medium),
+    .init("large", TitleSize.large),
+]
+
+private let iconAlignList: [PlaygroundOption] = [
+    .init("top", IconAlign.top),
+    .init("center", IconAlign.center),
+    .init("bottom", IconAlign.bottom),
+]
+
+struct TitleDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TitlePreview() }, playground: { TitlePlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct TitlePreview: View {
+    var body: some View {
+        BasicColumnBox("Section Type", alignment: .leading) {
+            Title(title: "Section Small", type: .section, size: .small)
+            Title(title: "Section Medium", type: .section, size: .medium, icon: "basic_home",
+                  description: "This is a medium section with icon.")
+            Title(title: "Section Large", type: .section, size: .large,
+                  showTrailingAction: true, badgeLabel: "NEW", onPressTrailingAction: {})
+        }
+        BasicColumnBox("Card Type", alignment: .leading) {
+            Title(title: "Card Small Text Only", type: .card, size: .small, textOnly: true)
+            Title(title: "Card Medium with Right Action", type: .card, size: .medium, icon: "basic_home",
+                  showRightAction: true, buttonTitle: "Action", onPressRightAction: {})
+        }
+        BasicColumnBox("Icon Alignment", alignment: .leading) {
+            Title(title: "Icon Top", type: .section, icon: "basic_home", iconAlign: .top, description: "Aligned top")
+            Title(title: "Icon Center", type: .section, icon: "basic_home", iconAlign: .center, description: "Aligned center")
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TitlePlayground: View {
+    @State private var title = "Title"
+    @State private var type: PlaygroundOption? = titleTypeList.first { $0.key == "section" }
+    @State private var size: PlaygroundOption? = titleSizeList.first { $0.key == "medium" }
+    @State private var icon: PlaygroundOption?
+    @State private var iconAlign: PlaygroundOption? = iconAlignList.first { $0.key == "top" }
+    @State private var description = ""
+    @State private var badgeLabel = ""
+    @State private var showRightAction = false
+    @State private var textOnly = false
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Title(
+                    title: title,
+                    type: (type?.value as? TitleType) ?? .section,
+                    size: (size?.value as? TitleSize) ?? .medium,
+                    icon: (icon?.value as? String),
+                    iconAlign: (iconAlign?.value as? IconAlign) ?? .top,
+                    showRightAction: showRightAction,
+                    badgeLabel: badgeLabel.isEmpty ? nil : badgeLabel,
+                    onPressRightAction: {},
+                    textOnly: textOnly,
+                    description: description.isEmpty ? nil : description
+                )
+            },
+            params: [
+                .string("Title", $title),
+                .radio("Type", titleTypeList, $type),
+                .radio("Size", titleSizeList, $size),
+                .option("Icon", playgroundIcons, $icon),
+                .radio("IconAlign", iconAlignList, $iconAlign),
+                .string("Description", $description),
+                .string("BadgeLabel", $badgeLabel),
+                .checkbox("ShowRightAction", $showRightAction),
+                .checkbox("TextOnly", $textOnly),
+            ]
+        )
+    }
+}

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

@@ -0,0 +1,118 @@
+//
+//  TooltipDemo.swift
+//  Example
+//
+//  Preview + Playground demo (mirrors the Compose DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+struct TooltipDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TooltipPreview() }, playground: { TooltipPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct TooltipPreview: View {
+    @StateObject private var topState = TooltipState()
+    @StateObject private var bottomState = TooltipState()
+    @StateObject private var btnState = TooltipState()
+    @StateObject private var descState = TooltipState()
+
+    var body: some View {
+        BasicColumnBox("Placement", alignment: .leading) {
+            Tooltip(state: topState, title: "Top", description: "Tooltip on top of the anchor.",
+                    placement: .top, onPressClose: { topState.hide() }) {
+                MoMoUIKits.Button(title: "Top", action: { topState.toggle() }, size: .small, isFull: false)
+            }
+            Tooltip(state: bottomState, title: "Bottom", description: "Tooltip below the anchor.",
+                    placement: .bottom, onPressClose: { bottomState.hide() }) {
+                MoMoUIKits.Button(title: "Bottom", action: { bottomState.toggle() }, size: .small, isFull: false)
+            }
+        }
+        BasicColumnBox("With Buttons", alignment: .leading) {
+            Tooltip(state: btnState, title: "Two Buttons",
+                    description: "Tooltip with primary and secondary actions.",
+                    buttons: [
+                        TooltipButton(title: "Confirm", onPress: { btnState.hide() }),
+                        TooltipButton(title: "Cancel", onPress: { btnState.hide() }),
+                    ],
+                    placement: .bottom, onPressClose: { btnState.hide() }) {
+                MoMoUIKits.Button(title: "2 Buttons", action: { btnState.toggle() }, size: .small, isFull: false)
+            }
+        }
+        BasicColumnBox("Description Only", alignment: .leading) {
+            Tooltip(state: descState, description: "This tooltip has no title, just a description.",
+                    placement: .top, onPressClose: { descState.hide() }) {
+                MoMoUIKits.Button(title: "No Title", action: { descState.toggle() }, size: .small, isFull: false)
+            }
+        }
+    }
+}
+
+// MARK: - Playground
+
+// String-keyed so the demo doesn't depend on the exact enum type name;
+// the literal cases below are resolved against Tooltip's own parameter types.
+private let tooltipPlacementList: [PlaygroundOption] = [
+    .init("top", "top"), .init("bottom", "bottom"), .init("left", "left"), .init("right", "right"),
+]
+private let tooltipAlignList: [PlaygroundOption] = [
+    .init("start", "start"), .init("center", "center"), .init("end", "end"),
+]
+
+@available(iOS 16.0, *)
+private struct TooltipPlayground: View {
+    @StateObject private var state = TooltipState()
+    @State private var title = "Tooltip"
+    @State private var desc = "This is a tooltip description."
+    @State private var placement: PlaygroundOption? = tooltipPlacementList.first { $0.key == "bottom" }
+    @State private var align: PlaygroundOption? = tooltipAlignList.first { $0.key == "center" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                Tooltip(
+                    state: state,
+                    title: title,
+                    description: desc,
+                    placement: placementCase,
+                    align: alignCase,
+                    onPressClose: { state.hide() }
+                ) {
+                    MoMoUIKits.Button(title: "Show tooltip", action: { state.toggle() }, size: .small, isFull: false)
+                }
+            },
+            params: [
+                .string("Title", $title),
+                .string("Description", $desc),
+                .radio("Placement", tooltipPlacementList, $placement),
+                .radio("Align", tooltipAlignList, $align),
+            ]
+        )
+    }
+
+    private var placementCase: TooltipPlacement {
+        switch placement?.key {
+        case "top": return .top
+        case "left": return .left
+        case "right": return .right
+        default: return .bottom
+        }
+    }
+
+    private var alignCase: TooltipAlign {
+        switch align?.key {
+        case "start": return .start
+        case "end": return .end
+        default: return .center
+        }
+    }
+}

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

@@ -0,0 +1,87 @@
+//
+//  TypographyDemo.swift
+//  Example
+//
+//  Preview + Playground demo for the Text (MomoText) component (DemoScreen pattern).
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let typographyList: [PlaygroundOption] = [
+    .init("headlineDefaultBold", TypographyStyle.headlineDefaultBold),
+    .init("headerMBold", TypographyStyle.headerMBold),
+    .init("headerDefaultBold", TypographyStyle.headerDefaultBold),
+    .init("headerSSemibold", TypographyStyle.headerSSemibold),
+    .init("headerXsSemibold", TypographyStyle.headerXsSemibold),
+    .init("bodyDefaultRegular", TypographyStyle.bodyDefaultRegular),
+    .init("descriptionDefaultRegular", TypographyStyle.descriptionDefaultRegular),
+    .init("descriptionXsRegular", TypographyStyle.descriptionXsRegular),
+    .init("labelDefaultMedium", TypographyStyle.labelDefaultMedium),
+    .init("labelSMedium", TypographyStyle.labelSMedium),
+    .init("labelXsMedium", TypographyStyle.labelXsMedium),
+    .init("actionDefaultBold", TypographyStyle.actionDefaultBold),
+    .init("actionSBold", TypographyStyle.actionSBold),
+    .init("actionXsBold", TypographyStyle.actionXsBold),
+    .init("actionXxsBold", TypographyStyle.actionXxsBold),
+]
+
+struct TypographyDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DemoScreen(preview: { TypographyPreview() }, playground: { TypographyPlayground() })
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+// MARK: - Preview
+
+private struct TypographyPreview: View {
+    var body: some View {
+        BasicColumnBox("Headers", alignment: .leading) {
+            MomoText("Headline Default Bold", typography: .headlineDefaultBold)
+            MomoText("Header M Bold", typography: .headerMBold)
+            MomoText("Header Default Bold", typography: .headerDefaultBold)
+            MomoText("Header S Semibold", typography: .headerSSemibold)
+            MomoText("Header XS Semibold", typography: .headerXsSemibold)
+        }
+        BasicColumnBox("Body & Description", alignment: .leading) {
+            MomoText("Body Default Regular", typography: .bodyDefaultRegular)
+            MomoText("Description Default Regular", typography: .descriptionDefaultRegular)
+            MomoText("Description XS Regular", typography: .descriptionXsRegular)
+        }
+        BasicColumnBox("Labels", alignment: .leading) {
+            MomoText("Label Default Medium", typography: .labelDefaultMedium)
+            MomoText("Label S Medium", typography: .labelSMedium)
+            MomoText("Label XS Medium", typography: .labelXsMedium)
+        }
+        BasicColumnBox("Actions", alignment: .leading) {
+            MomoText("Action Default Bold", typography: .actionDefaultBold)
+            MomoText("Action S Bold", typography: .actionSBold)
+            MomoText("Action XS Bold", typography: .actionXsBold)
+            MomoText("Action XXS Bold", typography: .actionXxsBold)
+        }
+    }
+}
+
+// MARK: - Playground
+
+@available(iOS 16.0, *)
+private struct TypographyPlayground: View {
+    @State private var text = "The quick brown fox"
+    @State private var typography: PlaygroundOption? = typographyList.first { $0.key == "bodyDefaultRegular" }
+
+    var body: some View {
+        PlaygroundTab(
+            component: {
+                MomoText(text, typography: (typography?.value as? TypographyStyle) ?? .bodyDefaultRegular)
+            },
+            params: [
+                .string("Text", $text),
+                .radio("Typography", typographyList, $typography),
+            ]
+        )
+    }
+}