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

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

@@ -1,269 +0,0 @@
-//
-//  BadgeDemo.swift
-//  Example
-//
-//  Created by sophia on 12/5/25.
-//
-
-import Foundation
-import MoMoUIKits
-import SwiftUI
-
-// MARK: - BadgeDemo
-
-struct BadgeDemo: View {
-    // MARK: Internal
-
-    var body: some View {
-        ScrollView {
-            VStack(alignment: .leading, spacing: 24) {
-                // MARK: - Basic Badges
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Basic Badges")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 16) {
-                        HStack(spacing: 16) {
-                            VStack(spacing: 8) {
-                                Badge()
-                                Text("Default")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "9")
-                                Text("Single Digit")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "99")
-                                Text("Two Digits")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "999")
-                                Text("99+ Format")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                        
-                        HStack(spacing: 16) {
-                            VStack(spacing: 8) {
-                                Badge(label: "New")
-                                Text("Text Label")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "Hot", backgroundColor: Colors.pink03)
-                                Text("Custom Color")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                Badge(label: "5", backgroundColor: Colors.green03)
-                                Text("Green Badge")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge Dots
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Badge Dots")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    HStack(spacing: 32) {
-                        VStack(spacing: 8) {
-                            BadgeDot(size: .small)
-                            Text("Small")
-                                .font(.caption)
-                                .foregroundColor(.gray)
-                        }
-                        
-                        VStack(spacing: 8) {
-                            BadgeDot(size: .large)
-                            Text("Large")
-                                .font(.caption)
-                                .foregroundColor(.gray)
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge Ribbons
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Badge Ribbons")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 20) {
-                        HStack(spacing: 20) {
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .topLeft, label: "Top Left", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Top Left")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .topRight, label: "Top Right", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Top Right")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                        
-                        HStack(spacing: 20) {
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .bottomLeft, label: "Bottom Left", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Bottom Left")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                            
-                            VStack(spacing: 8) {
-                                BadgeRibbon(position: .bottomRight, label: "Bottom Right", isRound: true)
-                                    .frame(width: 150, height: 30)
-                                Text("Bottom Right")
-                                    .font(.caption)
-                                    .foregroundColor(.gray)
-                            }
-                        }
-                    }
-                    .padding(.horizontal, 16)
-                }
-                
-                Divider()
-                
-                // MARK: - Badge in Context (Real Usage Examples)
-                
-                VStack(alignment: .leading, spacing: 12) {
-                    Text("Real Usage Examples")
-                        .font(.headline)
-                        .padding(.horizontal, 16)
-                    
-                    VStack(spacing: 16) {
-                        // Notification with badge
-                        HStack {
-                            Image(systemName: "bell.fill")
-                                .font(.system(size: 24))
-                                .foregroundColor(Colors.primary)
-                            
-                            Text("Notifications")
-                                .font(.body)
-                            
-                            Spacer()
-                            
-                            Badge(label: "23")
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                        
-                        // Message with badge
-                        HStack {
-                            Image(systemName: "message.fill")
-                                .font(.system(size: 24))
-                                .foregroundColor(Colors.primary)
-                            
-                            Text("Messages")
-                                .font(.body)
-                            
-                            Spacer()
-                            
-                            Badge(label: "5")
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                        
-                        // Product card with ribbon
-                        ZStack(alignment: .topTrailing) {
-                            VStack(alignment: .leading, spacing: 8) {
-                                Rectangle()
-                                    .fill(Color(.systemGray5))
-                                    .frame(height: 120)
-                                    .cornerRadius(8)
-                                
-                                Text("Product Name")
-                                    .font(.headline)
-                                
-                                Text("$99.99")
-                                    .font(.subheadline)
-                                    .foregroundColor(.gray)
-                            }
-                            .padding()
-                            .background(Color(.systemGray6))
-                            .cornerRadius(12)
-                            
-                            BadgeRibbon(position: .topRight, label: "NEW")
-                                .frame(width: 60, height: 40)
-                                .offset(x: 5, y: 0)
-                        }
-                        
-                        // Profile with dot indicator
-                        HStack {
-                            ZStack(alignment: .topTrailing) {
-                                Circle()
-                                    .fill(Color(.systemGray5))
-                                    .frame(width: 50, height: 50)
-                                
-                                BadgeDot(size: .small)
-                                    .offset(x: 2, y: 2)
-                            }
-                            
-                            VStack(alignment: .leading) {
-                                Text("User Name")
-                                    .font(.headline)
-                                Text("Online")
-                                    .font(.caption)
-                                    .foregroundColor(Colors.green03)
-                            }
-                            
-                            Spacer()
-                        }
-                        .padding()
-                        .background(Color(.systemGray6))
-                        .cornerRadius(12)
-                    }
-                    .padding(.horizontal, 16)
-                }
-            }
-            .padding(.vertical, 16)
-        }
-    }
-}
-
-// MARK: - Preview
-
-#if DEBUG
-struct BadgeDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        BadgeDemo()
-    }
-}
-#endif

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

@@ -1,117 +0,0 @@
-import MoMoUIKits
-import SwiftUI
-
-struct BaselineViewDemo: View {
-    @State private var enabled = true
-
-    var body: some View {
-        GeometryReader { geometry in
-            ZStack(alignment: .top) {
-                demoContent(
-                    topInset: geometry.safeAreaInsets.top,
-                    bottomInset: geometry.safeAreaInsets.bottom
-                )
-
-                MoMoUIKits.BaselineView(enabled: enabled)
-            }
-            .background(Colors.black02)
-            .ignoresSafeArea(.container, edges: [.top, .bottom])
-        }
-    }
-
-    private func demoContent(topInset: CGFloat, bottomInset: CGFloat) -> some View {
-        VStack(spacing: 0) {
-            header(topInset: topInset)
-
-            ScrollView {
-                VStack(alignment: .leading, spacing: 16) {
-                    Toggle(isOn: $enabled) {
-                        MomoText("Show baseline overlay", typography: .headerDefaultBold)
-                    }
-                    .padding(16)
-                    .background(Colors.black01)
-                    .cornerRadius(Radius.M)
-
-                    MomoText(
-                        "Use this screen to inspect the safe area, header, horizontal spacing, bottom tab, and button baseline guides.",
-                        typography: .bodyDefaultRegular,
-                        color: Colors.textSecondary
-                    )
-
-                    ForEach(1...8, id: \.self) { index in
-                        sampleRow(index)
-                    }
-                }
-                .padding(.horizontal, 16)
-                .padding(.top, 16)
-                .padding(.bottom, 88)
-            }
-
-            bottomAction(bottomInset: bottomInset)
-        }
-    }
-
-    private func header(topInset: CGFloat) -> some View {
-        VStack(spacing: 0) {
-            Color.clear
-                .frame(height: topInset)
-
-            HStack(spacing: 12) {
-                Image(systemName: "chevron.left")
-                    .font(.system(size: 18, weight: .semibold))
-                    .frame(width: 40, height: 52)
-
-                MomoText("Baseline View", typography: .headerDefaultBold)
-
-                Spacer(minLength: 0)
-            }
-            .frame(height: 52)
-            .padding(.horizontal, 12)
-            .background(Colors.black01)
-        }
-    }
-
-    private func sampleRow(_ index: Int) -> some View {
-        HStack(spacing: 12) {
-            Circle()
-                .fill(Colors.primaryLight)
-                .frame(width: 36, height: 36)
-                .overlay(
-                    MomoText("\(index)", typography: .labelSMedium, color: Colors.primary)
-                )
-
-            VStack(alignment: .leading, spacing: 4) {
-                MomoText("Content row \(index)", typography: .headerSSemibold)
-                MomoText("Scrollable content under the debug overlay.", color: Colors.textSecondary)
-            }
-
-            Spacer(minLength: 0)
-        }
-        .padding(16)
-        .background(Colors.black01)
-        .cornerRadius(Radius.M)
-    }
-
-    private func bottomAction(bottomInset: CGFloat) -> some View {
-        VStack(spacing: 8) {
-            MoMoUIKits.Button(
-                title: "Primary action",
-                action: {},
-                type: .primary,
-                size: .large
-            )
-        }
-        .padding(.horizontal, 16)
-        .padding(.top, 8)
-        .padding(.bottom, bottomInset)
-        .background(Colors.black01)
-    }
-}
-
-#if DEBUG
-struct BaselineViewDemo_Previews: PreviewProvider {
-    static var previews: some View {
-        BaselineViewDemo()
-    }
-}
-#endif

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

@@ -1,89 +0,0 @@
-//
-//  BottomTabDemo.swift
-//  Example
-//
-//  Usage demo for the bottom-tab navigation. Mirrors Compose's `BottomTabUsage`:
-//  four tabs (each with its own header title + badge) and a center floating
-//  button. Must be hosted inside a `NavigationContainer` (uses the Navigator).
-//
-
-import MoMoUIKits
-import SwiftUI
-
-@available(iOS 16.0, *)
-struct BottomTabDemoContent: View {
-    @EnvironmentObject private var navigator: Navigator
-
-    var body: some View {
-        BottomTab(
-            items: [
-                BottomTabItem(
-                    name: "Tab1",
-                    label: "Option 1",
-                    icon: "16_basic_home",
-                    badgeLabel: "",
-                    options: NavigationOptions(headerTitle: .default("Option 1"), hiddenBack: false),
-                    screen: { tabBody("Option 1", Colors.blue09) }
-                ),
-                BottomTabItem(
-                    name: "Tab2",
-                    label: "Option 2",
-                    icon: "help_center",
-                    badgeLabel: "0", // hidden (mirrors Compose's "0" → no badge)
-                    options: NavigationOptions(headerTitle: .default("Option 2")),
-                    screen: { tabBody("Option 2", Colors.pink09) }
-                ),
-                BottomTabItem(
-                    name: "Tab3",
-                    label: "Option 3 with a very long label",
-                    icon: "pin_star",
-                    badgeLabel: "New",
-                    options: NavigationOptions(headerTitle: .default("Option 3")),
-                    screen: { tabBody("Option 3", Colors.yellow09) }
-                ),
-                BottomTabItem(
-                    name: "Tab4",
-                    label: "Option 4 also quite long here",
-                    icon: "navigation_more_icon",
-                    badgeLabel: "9999",
-                    options: NavigationOptions(headerTitle: .default("Option 4")),
-                    screen: { tabBody("Option 4", Colors.blue10) }
-                )
-            ],
-            floatingButton: BottomTabFloatingButton(
-                icon: "16_basic_home",
-                label: "Quét QR",
-                onPress: { navigator.push({ qrScreen }, options: NavigationOptions(title: "QR")) }
-            )
-        )
-    }
-
-    @ViewBuilder
-    private func tabBody(_ title: String, _ color: Color) -> some View {
-        VStack {
-            MomoText(title, typography: .headerDefaultBold)
-                .padding(.top, 24)
-            Spacer()
-        }
-        .frame(maxWidth: .infinity, maxHeight: .infinity)
-        .background(color)
-    }
-
-    private var qrScreen: some View {
-        VStack { MomoText("QR scanner placeholder") }
-            .frame(maxWidth: .infinity)
-            .padding(24)
-    }
-}
-
-// MARK: - Standalone wrapper (so it can be opened directly from Home too)
-
-struct BottomTabDemo: View {
-    var body: some View {
-        if #available(iOS 16.0, *) {
-            BottomTabDemoContent()
-        } else {
-            Text("Bottom tab demo requires iOS 16+").padding()
-        }
-    }
-}

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

@@ -1,100 +0,0 @@
-//
-//  Foundation.swift
-//  Example
-//
-//  Created by Wem on 13/12/2022.
-//
-
-import Foundation
-import Lottie
-import MoMoUIKits
-import SwiftUI
-
-// MARK: - ButtonDemo
-
-struct ButtonDemo: View {
-    // MARK: Internal
-
-    var body: some View {
-        ScrollView {
-            VStack {
-                Toggle("Disabled", isOn: $disabled)
-
-                Group {
-                    Button(title: "Button", action: onPress, type: disabled ? .disabled : .primary, size: .large,
-                           iconRight: AnyView(Image(systemName: "checkmark.circle")))
-                    Button(title: "Button", action: onPress, size: .small)
-                }
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .danger,
-                           iconLeft: AnyView(Image(systemName: "checkmark.circle")))
-                    Button(title: "Button", action: onPress, type: .danger, size: .medium)
-                    Button(title: "Button", action: onPress, type: .danger, size: .small)
-                }
-                
-                Group {
-                    Button(title: "Button", action: onPress, type: .danger, iconLeft: AnyView(Image(systemName: "checkmark.circle")), isFull: false)
-                    Button(title: "Button", action: onPress, type: .danger, size: .medium, isFull: false)
-                    Button(title: "Button", action: onPress, type: .danger, size: .small, isFull: false)
-                }
-
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .tonal, size: .large)
-                    Button(title: "Button", action: onPress, type: .tonal, size: .medium)
-                    Button(title: "Button", action: onPress, type: .tonal, size: .small)
-                }
-
-                Group {
-                    Button(title: "Tinted icon", action: onPress, type: .primary,
-                           iconLeft: AnyView(Image(systemName: "checkmark.circle")), useTintColor: true)
-                    Button(title: "Original icon", action: onPress, type: .primary,
-                           iconLeft: AnyView(Image(systemName: "checkmark.circle")), useTintColor: false)
-                }
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .secondary, size: .large)
-                    Button(title: "Button", action: onPress, type: .secondary, size: .medium)
-                    Button(title: "Button", action: onPress, type: .secondary, size: .small)
-                }
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .text, size: .large)
-                    Button(title: "Button", action: onPress, type: .text, size: .medium)
-                    Button(title: "Button", action: onPress, type: .text, size: .small)
-                }
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .outline, size: .large)
-                    Button(title: "Button", action: onPress, type: .outline, size: .medium)
-                    Button(title: "Button", action: onPress, type: .outline, size: .small)
-                }
-
-                Group {
-                    Button(title: "Button", action: onPress, type: .disabled, size: .large)
-                    Button(title: "Button", action: onPress, type: .disabled, size: .medium)
-                    Button(title: "Button", action: onPress, type: .disabled, size: .small)
-                }
-                Group {
-                    Button(title: "Button", action: onPress, type: .primary, size: .medium, loading: true)
-                    Button(title: "Button", action: onPress, type: .danger, size: .medium, iconLeft: AnyView(Image(systemName: "checkmark.circle")), loading: true)
-                    Button(title: "Button", action: onPress, type: .disabled, size: .medium, iconRight: AnyView(Image(systemName: "checkmark.circle")), loading: true)
-                    Button(title: "Button", action: onPress, type: .outline, size: .medium, iconLeft: AnyView(Image(systemName: "checkmark.circle")), iconRight: AnyView(Image(systemName: "checkmark.circle")), loading: true)
-                    Button(title: "Button", action: onPress, type: .secondary, size: .medium, loading: true)
-                    Button(title: "Button", action: onPress, type: .text, size: .medium, loading: true)
-                    Button(title: "Button", action: onPress, type: .tonal, size: .medium, loading: true)
-                }
-            }.padding(16)
-        }.padding(.top)
-    }
-
-    func onPress() {
-        print("Button")
-    }
-
-    // MARK: Private
-
-    @State private var value: String = ""
-    @State private var disabled: Bool = false
-}