@momo-kits/native-kits 0.162.2-beta.26 → 0.162.2-beta.27

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

@@ -1,109 +0,0 @@
-//
-//  TitleDemo.swift
-//  Example
-//
-import SwiftUI
-import MoMoUIKits
-
-struct TitleDemo: View {
-    var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Section Type") {
-                    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: { }
-                    )
-                }
-
-                section("Card Type") {
-                    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: { }
-                    )
-                    Title(
-                        title: "Card Large Full",
-                        type: .card,
-                        size: .large,
-                        icon: "basic_home",
-                        showRightAction: true,
-                        badgeLabel: "99+",
-                        onPressRightAction: { },
-                        description: "A large card title with description, badge and right arrow."
-                    )
-                }
-
-                section("Icon Alignment") {
-                    Title(
-                        title: "Icon Top",
-                        type: .section,
-                        icon: "basic_home",
-                        iconAlign: .top,
-                        description: "Icon aligned to top"
-                    )
-                    Title(
-                        title: "Icon Center",
-                        type: .section,
-                        icon: "basic_home",
-                        iconAlign: .center,
-                        description: "Icon aligned to center"
-                    )
-                    Title(
-                        title: "Icon Bottom",
-                        type: .section,
-                        icon: "basic_home",
-                        iconAlign: .bottom,
-                        description: "Icon aligned to bottom"
-                    )
-                }
-            }
-            .padding(16)
-        }
-    }
-
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            MomoText(title, typography: .headerSSemibold, color: Colors.textSecondary)
-            content()
-        }
-    }
-}
-
-struct TitleDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        NavigationView {
-            TitleDemo()
-        }
-    }
-}

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

@@ -1,187 +0,0 @@
-//
-//  TooltipDemo.swift
-//  Example
-//
-
-import Foundation
-import MoMoUIKits
-import SwiftUI
-
-// MARK: - TooltipDemo
-
-struct TooltipDemo: View {
-    // Placement
-    @StateObject private var topState = TooltipState()
-    @StateObject private var bottomState = TooltipState()
-    @StateObject private var leftState = TooltipState()
-    @StateObject private var rightState = TooltipState()
-
-    // Alignment
-    @StateObject private var startState = TooltipState()
-    @StateObject private var centerState = TooltipState()
-    @StateObject private var endState = TooltipState()
-
-    // With Buttons
-    @StateObject private var singleBtnState = TooltipState()
-    @StateObject private var twoBtnState = TooltipState()
-
-    // Description Only
-    @StateObject private var descState = TooltipState()
-
-    var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 48) {
-                // MARK: - Placement
-
-                section("Placement") {
-                    Tooltip(
-                        state: topState,
-                        title: "Top",
-                        description: "Tooltip on top of the anchor.",
-                        placement: .top,
-                        onPressClose: { topState.hide() }
-                    ) {
-                        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() }
-                    ) {
-                        Button(title: "Bottom", action: { bottomState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    HStack {
-                        Tooltip(
-                            state: rightState,
-                            title: "Right",
-                            description: "Tooltip on the right.",
-                            placement: .right,
-                            onPressClose: { rightState.hide() }
-                        ) {
-                            Button(title: "Right", action: { rightState.toggle() }, size: .small, isFull: false)
-                        }
-                        Spacer().frame(width: 12)
-                        Tooltip(
-                            state: leftState,
-                            title: "Left",
-                            description: "Tooltip on the left.",
-                            placement: .left,
-                            onPressClose: { leftState.hide() }
-                        ) {
-                            Button(title: "Left", action: { leftState.toggle() }, size: .small, isFull: false)
-                        }
-                    }
-                }
-
-                // MARK: - Alignment
-
-                section("Alignment") {
-                    Tooltip(
-                        state: startState,
-                        title: "Start",
-                        description: "Aligned to start.",
-                        placement: .bottom,
-                        align: .start,
-                        onPressClose: { startState.hide() }
-                    ) {
-                        Button(title: "Start", action: { startState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: centerState,
-                        title: "Center",
-                        description: "Aligned to center.",
-                        placement: .bottom,
-                        align: .center,
-                        onPressClose: { centerState.hide() }
-                    ) {
-                        Button(title: "Center", action: { centerState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: endState,
-                        title: "End",
-                        description: "Aligned to end.",
-                        placement: .bottom,
-                        align: .end,
-                        onPressClose: { endState.hide() }
-                    ) {
-                        Button(title: "End", action: { endState.toggle() }, size: .small, isFull: false)
-                    }
-                }
-
-                // MARK: - With Buttons
-
-                section("With Buttons") {
-                    Tooltip(
-                        state: singleBtnState,
-                        title: "Single Button",
-                        description: "Tooltip with one action button.",
-                        buttons: [
-                            TooltipButton(title: "Got it", onPress: { singleBtnState.hide() })
-                        ],
-                        placement: .bottom,
-                        onPressClose: { singleBtnState.hide() }
-                    ) {
-                        Button(title: "1 Button", action: { singleBtnState.toggle() }, size: .small, isFull: false)
-                    }
-
-                    Tooltip(
-                        state: twoBtnState,
-                        title: "Two Buttons",
-                        description: "Tooltip with primary and secondary actions.",
-                        buttons: [
-                            TooltipButton(title: "Confirm", onPress: { twoBtnState.hide() }),
-                            TooltipButton(title: "Cancel", onPress: { twoBtnState.hide() })
-                        ],
-                        placement: .bottom,
-                        onPressClose: { twoBtnState.hide() }
-                    ) {
-                        Button(title: "2 Buttons", action: { twoBtnState.toggle() }, size: .small, isFull: false)
-                    }
-                }
-
-                // MARK: - Description Only
-
-                section("Description Only") {
-                    Tooltip(
-                        state: descState,
-                        description: "This tooltip has no title, just a description.",
-                        placement: .top,
-                        onPressClose: { descState.hide() }
-                    ) {
-                        Button(title: "No Title", action: { descState.toggle() }, size: .small, isFull: false)
-                    }
-                }
-            }
-            .padding(.vertical, 48)
-            .padding(.horizontal, 16)
-        }
-    }
-
-    // MARK: - Helpers
-
-    @ViewBuilder
-    private func section<Content: View>(
-        _ title: String,
-        @ViewBuilder content: () -> Content
-    ) -> some View {
-        VStack(alignment: .leading, spacing: 24) {
-            Text(title)
-                .font(.headline)
-            content()
-        }
-    }
-}
-
-#if DEBUG
-struct TooltipDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        TooltipDemo()
-    }
-}
-#endif

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

@@ -1,87 +0,0 @@
-//
-//  TypographyDemo.swift
-//  Example
-//
-//  Created by dung.pham2 on 29/11/24.
-//
-import SwiftUI
-import MoMoUIKits
-
-struct TypographyDemo: View {
-    var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 12) {
-                // New supported typography styles
-                MomoText("Headline Default Bold", typography: .headlineDefaultBold)
-                    .background(Color.red.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Header M Bold", typography: .headerMBold)
-                    .background(Color.orange.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Header Default Bold", typography: .headerDefaultBold)
-                    .background(Color.yellow.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Header S Semibold", typography: .headerSSemibold)
-                    .background(Color.green.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Header XS Semibold", typography: .headerXsSemibold)
-                    .background(Color.blue.opacity(0.3))
-                    .cornerRadius(4)
-
-                Divider().padding(.vertical, 8)
-
-                // Body Default Regular
-                MomoText("Body Default Regular", typography: .bodyDefaultRegular)
-                    .background(Color.purple.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Description Default Regular", typography: .descriptionDefaultRegular)
-                    .background(Color.pink.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Description XS Regular", typography: .descriptionXsRegular)
-                    .background(Color.gray.opacity(0.3))
-                    .cornerRadius(4)
-
-                Divider().padding(.vertical, 8)
-
-                // Label Default Medium
-                MomoText("Label Default Medium", typography: .labelDefaultMedium)
-                    .background(Color.red.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Label S Medium", typography: .labelSMedium)
-                    .background(Color.orange.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Label XS Medium", typography: .labelXsMedium)
-                    .background(Color.yellow.opacity(0.3))
-                    .cornerRadius(4)
-
-                Divider().padding(.vertical, 8)
-
-                // Action Default Bold
-                MomoText("Action Default Bold", typography: .actionDefaultBold)
-                    .background(Color.green.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Action S Bold", typography: .actionSBold)
-                    .background(Color.blue.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Action XS Bold", typography: .actionXsBold)
-                    .background(Color.purple.opacity(0.3))
-                    .cornerRadius(4)
-                MomoText("Action XXS Bold", typography: .actionXxsBold)
-                    .background(Color.pink.opacity(0.3))
-                    .cornerRadius(4)
-
-                Divider().padding(.vertical, 16)
-            }
-            .padding(16)
-        }
-    }
-}
-
-struct TypographyDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        NavigationView {
-            TypographyDemo()
-        }
-    }
-}
-

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

@@ -1,131 +0,0 @@
-//
-//  UploaderDemo.swift
-//  Example
-//
-
-import SwiftUI
-import MoMoUIKits
-
-struct UploaderDemo: View {
-    private let mockURL = "https://static.momocdn.net/app/img/kits/navigation-bar.png"
-
-    // Playground state
-    @State private var playgroundImages: [UploadImage] = []
-    @State private var numberOfImages: Double = 3
-    @State private var disabled = false
-    @State private var width: Double = 64
-    @State private var height: Double = 64
-
-    var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                section("Default — single slot, no images") {
-                    Uploader(
-                        images: [],
-                        numberOfImages: 1,
-                        onAdd: {}
-                    )
-                }
-
-                section("With image + cancel button") {
-                    Uploader(
-                        images: [UploadImage(uri: mockURL)],
-                        numberOfImages: 3,
-                        onAdd: {},
-                        onCancel: { _, _ in }
-                    )
-                }
-
-                section("Multiple images (slot full — picker hidden)") {
-                    Uploader(
-                        images: [
-                            UploadImage(uri: mockURL),
-                            UploadImage(uri: mockURL),
-                            UploadImage(uri: mockURL),
-                        ],
-                        numberOfImages: 3,
-                        onAdd: {},
-                        onCancel: { _, _ in }
-                    )
-                }
-
-                section("Loading state") {
-                    Uploader(
-                        images: [UploadImage(uri: mockURL, loading: true)],
-                        numberOfImages: 3,
-                        onAdd: {},
-                        onCancel: { _, _ in }
-                    )
-                }
-
-                section("Disabled") {
-                    Uploader(
-                        images: [],
-                        numberOfImages: 1,
-                        disabled: true,
-                        onAdd: {}
-                    )
-                }
-
-                section("Custom size (80 x 80)") {
-                    Uploader(
-                        images: [UploadImage(uri: mockURL)],
-                        numberOfImages: 3,
-                        width: 80,
-                        height: 80,
-                        onAdd: {},
-                        onCancel: { _, _ in }
-                    )
-                }
-
-                Divider()
-
-                section("Playground") {
-                    VStack(alignment: .leading, spacing: 12) {
-                        Uploader(
-                            images: playgroundImages,
-                            numberOfImages: Int(numberOfImages),
-                            disabled: disabled,
-                            width: CGFloat(width),
-                            height: CGFloat(height),
-                            onAdd: {
-                                playgroundImages.append(UploadImage(uri: mockURL))
-                            },
-                            onCancel: { _, index in
-                                if playgroundImages.indices.contains(index) {
-                                    playgroundImages.remove(at: index)
-                                }
-                            },
-                            onPressImage: { _, _ in }
-                        )
-
-                        VStack(alignment: .leading, spacing: 4) {
-                            Text("numberOfImages: \(Int(numberOfImages))")
-                            Slider(value: $numberOfImages, in: 1...6, step: 1)
-
-                            Toggle("disabled", isOn: $disabled)
-
-                            Text("width: \(Int(width))")
-                            Slider(value: $width, in: 48...120, step: 1)
-
-                            Text("height: \(Int(height))")
-                            Slider(value: $height, in: 48...120, step: 1)
-                        }
-                        .font(.footnote)
-                    }
-                }
-            }
-            .padding()
-        }
-    }
-
-    @ViewBuilder
-    private func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
-        VStack(alignment: .leading, spacing: 8) {
-            Text(title)
-                .font(.subheadline)
-                .foregroundColor(.secondary)
-            content()
-        }
-    }
-}

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

@@ -1,51 +0,0 @@
-import SwiftUI
-import MoMoUIKits
-
-struct SwiftUIDemoBrowserView: View {
-    let context: MoMoUIKitsDemoContext
-    let onOpenCompose: () -> Void
-    @State private var searchText = ""
-
-    var body: some View {
-        Group {
-            if #available(iOS 16.0, *) {
-                HomeView(
-                    onOpenCompose: onOpenCompose,
-                    applicationContext: context.miniAppContext
-                )
-            } else {
-                fallbackBrowser
-            }
-        }
-        .environment(\.appTheme, defaultTheme)
-    }
-
-    private var fallbackBrowser: some View {
-        NavigationView {
-            List {
-                ForEach(ScreenUsages) { item in
-                    NavigationLink(destination: item.destination) {
-                        MomoText(item.title, typography: .headerDefaultBold)
-                            .padding(.vertical, 8)
-                    }
-                }
-            }
-            .listStyle(.insetGrouped)
-            .navigationTitle("UI Kits SwiftUI")
-        }
-        .navigationViewStyle(.stack)
-    }
-
-    private var filteredSections: [UIKitsDemoSection] {
-        guard !searchText.isEmpty else { return UIKitsDemoRegistry.sections }
-
-        return UIKitsDemoRegistry.sections.compactMap { section in
-            let items = section.items.filter { item in
-                item.title.localizedCaseInsensitiveContains(searchText)
-                    || item.subtitle.localizedCaseInsensitiveContains(searchText)
-            }
-            guard !items.isEmpty else { return nil }
-            return UIKitsDemoSection(id: section.id, title: section.title, items: items)
-        }
-    }
-}

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

@@ -1,15 +0,0 @@
-import SwiftUI
-
-struct UIKitsDemoItem: Identifiable {
-    let id: String
-    let title: String
-    let subtitle: String
-    let destination: AnyView
-}
-
-struct UIKitsDemoSection: Identifiable {
-    let id: String
-    let title: String
-    let items: [UIKitsDemoItem]
-}
-

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

@@ -1,73 +0,0 @@
-import SwiftUI
-
-enum UIKitsDemoRegistry {
-    static let sections: [UIKitsDemoSection] = [
-        UIKitsDemoSection(
-            id: "components",
-            title: "Components",
-            items: [
-                UIKitsDemoItem(
-                    id: "typography",
-                    title: "Typography",
-                    subtitle: "Text styles and semantic colors",
-                    destination: AnyView(UIKitsTypographyDemoView())
-                ),
-                UIKitsDemoItem(
-                    id: "button",
-                    title: "Button",
-                    subtitle: "Primary, secondary, outline, loading",
-                    destination: AnyView(UIKitsButtonDemoView())
-                ),
-                UIKitsDemoItem(
-                    id: "badge",
-                    title: "Badge",
-                    subtitle: "Numeric and label badges",
-                    destination: AnyView(UIKitsBadgeDemoView())
-                ),
-                UIKitsDemoItem(
-                    id: "chip",
-                    title: "Chip",
-                    subtitle: "Selectable labels and compact filters",
-                    destination: AnyView(UIKitsChipDemoView())
-                )
-            ]
-        ),
-        UIKitsDemoSection(
-            id: "inputs",
-            title: "Inputs",
-            items: [
-                UIKitsDemoItem(
-                    id: "input",
-                    title: "Input",
-                    subtitle: "Text, error, password, disabled states",
-                    destination: AnyView(UIKitsInputDemoView())
-                ),
-                UIKitsDemoItem(
-                    id: "checkbox",
-                    title: "Checkbox",
-                    subtitle: "Checked, indeterminate, disabled",
-                    destination: AnyView(UIKitsCheckboxDemoView())
-                ),
-                UIKitsDemoItem(
-                    id: "radio",
-                    title: "Radio",
-                    subtitle: "Single choice controls",
-                    destination: AnyView(UIKitsRadioDemoView())
-                )
-            ]
-        ),
-        UIKitsDemoSection(
-            id: "feedback",
-            title: "Feedback",
-            items: [
-                UIKitsDemoItem(
-                    id: "popup",
-                    title: "Popup Notify",
-                    subtitle: "Notification popup content and actions",
-                    destination: AnyView(UIKitsPopupDemoView())
-                )
-            ]
-        )
-    ]
-}
-