@momo-kits/native-kits 0.162.2-beta.1 → 0.162.2-sp.1-debug

package/ios/TabView/TabView.swift

@@ -0,0 +1,530 @@
+import SwiftUI
+
+// ---------------------------------------------------------------------------
+// Style enums (prefixed with `Tab` to avoid collisions with existing public
+// types like ButtonSize / InputSize / TagColor)
+// ---------------------------------------------------------------------------
+
+public enum TabViewType {
+    case `default`
+    case card
+}
+
+public enum TabViewDirection {
+    case row
+    case column
+}
+
+// ---------------------------------------------------------------------------
+// Data model — mirrors Compose `TabViewItem`
+// ---------------------------------------------------------------------------
+
+public struct TabViewItem {
+    public let title: String
+    public let icon: String?
+    public let renderIcon: ((Bool) -> AnyView)?
+    public let showDot: Bool
+    public let dotSize: DotSize
+    public let badgeValue: String?
+    public let accessibilityLabel: String?
+    public let content: AnyView
+
+    public init(
+        title: String,
+        icon: String? = nil,
+        renderIcon: ((Bool) -> AnyView)? = nil,
+        showDot: Bool = false,
+        dotSize: DotSize = .small,
+        badgeValue: String? = nil,
+        accessibilityLabel: String? = nil,
+        @ViewBuilder content: () -> some View
+    ) {
+        self.title = title
+        self.icon = icon
+        self.renderIcon = renderIcon
+        self.showDot = showDot
+        self.dotSize = dotSize
+        self.badgeValue = badgeValue
+        self.accessibilityLabel = accessibilityLabel
+        self.content = AnyView(content())
+    }
+
+    /// Convenience init for tabs without slot content (Compose default `content = {}`).
+    public init(
+        title: String,
+        icon: String? = nil,
+        renderIcon: ((Bool) -> AnyView)? = nil,
+        showDot: Bool = false,
+        dotSize: DotSize = .small,
+        badgeValue: String? = nil,
+        accessibilityLabel: String? = nil
+    ) {
+        self.init(
+            title: title,
+            icon: icon,
+            renderIcon: renderIcon,
+            showDot: showDot,
+            dotSize: dotSize,
+            badgeValue: badgeValue,
+            accessibilityLabel: accessibilityLabel,
+            content: { EmptyView() }
+        )
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Public component — named `MomoTabView` to avoid shadowing SwiftUI.TabView
+// ---------------------------------------------------------------------------
+
+public struct MomoTabView: View {
+    @Environment(\.appTheme) private var theme
+
+    private let tabs: [TabViewItem]
+    private let type: TabViewType
+    private let scrollable: Bool
+    private let fitContent: Bool
+    private let selectedColor: Color?
+    private let unselectedColor: Color?
+    private let direction: TabViewDirection
+    private let userScrollEnabled: Bool
+    private let onPressTabItem: (Int) -> Void
+    private let onPageSelected: (Int) -> Void
+
+    @State private var selectedIndex: Int
+
+    public init(
+        tabs: [TabViewItem],
+        initialPage: Int = 0,
+        type: TabViewType = .default,
+        scrollable: Bool = false,
+        fitContent: Bool = false,
+        selectedColor: Color? = nil,
+        unselectedColor: Color? = nil,
+        direction: TabViewDirection = .row,
+        userScrollEnabled: Bool = true,
+        onPressTabItem: @escaping (Int) -> Void = { _ in },
+        onPageSelected: @escaping (Int) -> Void = { _ in }
+    ) {
+        self.tabs = tabs
+        self.type = type
+        self.scrollable = scrollable
+        self.fitContent = fitContent
+        self.selectedColor = selectedColor
+        self.unselectedColor = unselectedColor
+        self.direction = direction
+        self.userScrollEnabled = userScrollEnabled
+        self.onPressTabItem = onPressTabItem
+        self.onPageSelected = onPageSelected
+        let start = tabs.isEmpty ? 0 : min(max(initialPage, 0), tabs.count - 1)
+        _selectedIndex = State(initialValue: start)
+    }
+
+    private var resolvedSelectedColor: Color { selectedColor ?? theme.colors.primary }
+    private var resolvedUnselectedColor: Color { unselectedColor ?? theme.colors.text.default }
+
+    public var body: some View {
+        if tabs.isEmpty {
+            EmptyView()
+        } else {
+            VStack(spacing: 0) {
+                tabBar
+
+                if fitContent {
+                    tabs[safe: selectedIndex]?.content
+                        .frame(maxWidth: .infinity)
+                } else {
+                    pager
+                }
+            }
+            .frame(maxWidth: .infinity)
+        }
+    }
+
+    // MARK: - Tab bar dispatch
+
+    @ViewBuilder
+    private var tabBar: some View {
+        switch type {
+        case .card:
+            CardTabBar(
+                tabs: tabs,
+                selectedIndex: selectedIndex,
+                selectedColor: resolvedSelectedColor,
+                unselectedColor: resolvedUnselectedColor,
+                direction: direction,
+                onPress: onTabPressed
+            )
+        case .default:
+            if scrollable {
+                ScrollableTabBar(
+                    tabs: tabs,
+                    selectedIndex: selectedIndex,
+                    selectedColor: resolvedSelectedColor,
+                    unselectedColor: resolvedUnselectedColor,
+                    direction: direction,
+                    onPress: onTabPressed
+                )
+            } else {
+                DefaultTabBar(
+                    tabs: tabs,
+                    selectedIndex: selectedIndex,
+                    selectedColor: resolvedSelectedColor,
+                    unselectedColor: resolvedUnselectedColor,
+                    direction: direction,
+                    onPress: onTabPressed
+                )
+            }
+        }
+    }
+
+    // MARK: - Pager content
+
+    @ViewBuilder
+    private var pager: some View {
+        if userScrollEnabled {
+            SwiftUI.TabView(selection: $selectedIndex) {
+                ForEach(tabs.indices, id: \.self) { index in
+                    tabs[index].content
+                        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+                        .tag(index)
+                }
+            }
+            .tabViewStyle(.page(indexDisplayMode: .never))
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
+            .onChange(of: selectedIndex) { newValue in
+                onPageSelected(newValue)
+            }
+        } else {
+            tabs[safe: selectedIndex]?.content
+                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+        }
+    }
+
+    // MARK: - Selection
+
+    private func onTabPressed(_ index: Int) {
+        onPressTabItem(index)
+        withAnimation(.easeInOut(duration: 0.2)) {
+            selectedIndex = index
+        }
+        if fitContent || !userScrollEnabled {
+            onPageSelected(index)
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Default fixed-width tab bar (equal-width items + animated underline)
+// ---------------------------------------------------------------------------
+
+private struct DefaultTabBar: View {
+    @Environment(\.appTheme) private var theme
+
+    let tabs: [TabViewItem]
+    let selectedIndex: Int
+    let selectedColor: Color
+    let unselectedColor: Color
+    let direction: TabViewDirection
+    let onPress: (Int) -> Void
+
+    var body: some View {
+        GeometryReader { geo in
+            let itemWidth = tabs.isEmpty ? 0 : geo.size.width / CGFloat(tabs.count)
+            let indicatorWidth = max(itemWidth - Spacing.XS * 2, 0)
+            let indicatorX = itemWidth * CGFloat(selectedIndex) + Spacing.XS
+
+            ZStack(alignment: .bottomLeading) {
+                HStack(spacing: 0) {
+                    ForEach(tabs.indices, id: \.self) { index in
+                        TabItemView(
+                            tab: tabs[index],
+                            active: selectedIndex == index,
+                            selectedColor: selectedColor,
+                            unselectedColor: unselectedColor,
+                            direction: direction,
+                            scrollable: false,
+                            onPress: { onPress(index) }
+                        )
+                        .frame(maxWidth: .infinity)
+                    }
+                }
+
+                UnstyledRoundedRectangle(topLeft: Radius.XXS, topRight: Radius.XXS)
+                    .fill(selectedColor)
+                    .frame(width: indicatorWidth, height: 2)
+                    .offset(x: indicatorX)
+                    .animation(.easeInOut(duration: 0.2), value: selectedIndex)
+            }
+            .frame(maxWidth: .infinity)
+            .background(theme.colors.background.surface)
+            .overlay(
+                Rectangle()
+                    .stroke(theme.colors.border.default, lineWidth: 0.5)
+            )
+        }
+        .frame(height: barHeight(direction))
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Scrollable tab bar (wrap-width items, horizontal scroll, animated underline)
+// ---------------------------------------------------------------------------
+
+private struct ScrollableTabBar: View {
+    @Environment(\.appTheme) private var theme
+
+    let tabs: [TabViewItem]
+    let selectedIndex: Int
+    let selectedColor: Color
+    let unselectedColor: Color
+    let direction: TabViewDirection
+    let onPress: (Int) -> Void
+
+    @State private var frames: [Int: CGRect] = [:]
+
+    var body: some View {
+        ScrollViewReader { proxy in
+            ScrollView(.horizontal, showsIndicators: false) {
+                ZStack(alignment: .bottomLeading) {
+                    HStack(spacing: 0) {
+                        ForEach(tabs.indices, id: \.self) { index in
+                            TabItemView(
+                                tab: tabs[index],
+                                active: selectedIndex == index,
+                                selectedColor: selectedColor,
+                                unselectedColor: unselectedColor,
+                                direction: direction,
+                                scrollable: true,
+                                onPress: { onPress(index) }
+                            )
+                            .background(
+                                GeometryReader { g in
+                                    Color.clear.preference(
+                                        key: TabFramePreferenceKey.self,
+                                        value: [index: g.frame(in: .named("scrollableTabBar"))]
+                                    )
+                                }
+                            )
+                            .id(index)
+                        }
+                    }
+
+                    if let frame = frames[selectedIndex] {
+                        UnstyledRoundedRectangle(topLeft: Radius.XXS, topRight: Radius.XXS)
+                            .fill(selectedColor)
+                            .frame(width: max(frame.width - Spacing.XS * 2, 0), height: 2)
+                            .offset(x: frame.minX + Spacing.XS)
+                            .animation(.easeInOut(duration: 0.25), value: selectedIndex)
+                    }
+                }
+                .coordinateSpace(name: "scrollableTabBar")
+                .onPreferenceChange(TabFramePreferenceKey.self) { value in
+                    frames.merge(value) { _, new in new }
+                }
+            }
+            .frame(height: barHeight(direction))
+            .background(theme.colors.background.surface)
+            .overlay(
+                Rectangle()
+                    .stroke(theme.colors.border.default, lineWidth: 0.5)
+            )
+            .onChange(of: selectedIndex) { index in
+                withAnimation { proxy.scrollTo(index, anchor: .center) }
+            }
+        }
+    }
+}
+
+private struct TabFramePreferenceKey: PreferenceKey {
+    static var defaultValue: [Int: CGRect] = [:]
+    static func reduce(value: inout [Int: CGRect], nextValue: () -> [Int: CGRect]) {
+        value.merge(nextValue()) { _, new in new }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Card tab bar
+// ---------------------------------------------------------------------------
+
+private struct CardTabBar: View {
+    @Environment(\.appTheme) private var theme
+
+    let tabs: [TabViewItem]
+    let selectedIndex: Int
+    let selectedColor: Color
+    let unselectedColor: Color
+    let direction: TabViewDirection
+    let onPress: (Int) -> Void
+
+    var body: some View {
+        HStack(alignment: .bottom, spacing: 0) {
+            ForEach(tabs.indices, id: \.self) { index in
+                let tab = tabs[index]
+                let isActive = selectedIndex == index
+                let iconColor = isActive ? selectedColor : unselectedColor
+
+                cardItem(tab: tab, isActive: isActive, iconColor: iconColor)
+                    .frame(maxWidth: .infinity)
+                    .frame(height: isActive ? 44 : 40)
+                    .background(isActive ? theme.colors.background.surface : theme.colors.background.tonal)
+                    .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
+                    .contentShape(Rectangle())
+                    .onTapGesture { onPress(index) }
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .padding(.top, Spacing.XS)
+    }
+
+    @ViewBuilder
+    private func cardItem(tab: TabViewItem, isActive: Bool, iconColor: Color) -> some View {
+        HStack(spacing: 0) {
+            if let renderIcon = tab.renderIcon {
+                renderIcon(isActive)
+                Spacer().frame(width: Spacing.XS)
+            } else if let icon = tab.icon {
+                Icon(source: icon, size: 18, color: iconColor)
+                Spacer().frame(width: Spacing.XS)
+            }
+            MomoText(
+                tab.title,
+                typography: isActive ? .headerSSemibold : .bodyDefaultRegular,
+                color: isActive ? selectedColor : unselectedColor
+            )
+            .lineLimit(1)
+
+            tabBadge(tab)
+        }
+        .padding(.horizontal, Spacing.S)
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Shared tab item (Default + Scrollable bars)
+// ---------------------------------------------------------------------------
+
+private struct TabItemView: View {
+    let tab: TabViewItem
+    let active: Bool
+    let selectedColor: Color
+    let unselectedColor: Color
+    let direction: TabViewDirection
+    let scrollable: Bool
+    let onPress: () -> Void
+
+    private var textColor: Color { active ? selectedColor : unselectedColor }
+    private var textStyle: TypographyStyle { active ? .headerSSemibold : .bodyDefaultRegular }
+
+    var body: some View {
+        Group {
+            if direction == .column {
+                columnBody
+            } else {
+                rowBody
+            }
+        }
+        .contentShape(Rectangle())
+        .onTapGesture { onPress() }
+    }
+
+    @ViewBuilder
+    private var columnBody: some View {
+        VStack(spacing: 0) {
+            ZStack(alignment: .topTrailing) {
+                if let renderIcon = tab.renderIcon {
+                    renderIcon(active)
+                } else if let icon = tab.icon {
+                    Icon(source: icon, size: 24, color: textColor)
+                }
+                badgeOverlay
+            }
+            if tab.icon != nil || tab.renderIcon != nil {
+                Spacer().frame(height: Spacing.XXS)
+            }
+            MomoText(tab.title, typography: textStyle, color: textColor)
+                .lineLimit(1)
+        }
+        .frame(height: 68)
+        .padding(.horizontal, Spacing.S)
+    }
+
+    @ViewBuilder
+    private var rowBody: some View {
+        HStack(spacing: 0) {
+            if let renderIcon = tab.renderIcon {
+                renderIcon(active)
+                Spacer().frame(width: Spacing.XS)
+            } else if let icon = tab.icon {
+                Icon(source: icon, size: 18, color: textColor)
+                Spacer().frame(width: Spacing.XS)
+            }
+            MomoText(tab.title, typography: textStyle, color: textColor)
+                .lineLimit(1)
+            tabBadge(tab)
+        }
+        .frame(height: 48)
+        .padding(.horizontal, Spacing.M)
+    }
+
+    @ViewBuilder
+    private var badgeOverlay: some View {
+        if tab.showDot {
+            BadgeDot(size: tab.dotSize)
+                .offset(x: 4, y: -4)
+        } else if let badge = tab.badgeValue, !badge.isEmpty {
+            Badge(label: badge)
+                .offset(x: 4, y: -4)
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
+private func barHeight(_ direction: TabViewDirection) -> CGFloat {
+    direction == .column ? 68 : 48
+}
+
+@ViewBuilder
+private func tabBadge(_ tab: TabViewItem) -> some View {
+    if tab.showDot {
+        Spacer().frame(width: Spacing.XS)
+        BadgeDot(size: tab.dotSize)
+    } else if let badge = tab.badgeValue, !badge.isEmpty {
+        Spacer().frame(width: Spacing.XS)
+        Badge(label: badge)
+    }
+}
+
+/// A rectangle rounded only on the top corners (mirrors Compose top-only radius).
+private struct UnstyledRoundedRectangle: Shape {
+    let topLeft: CGFloat
+    let topRight: CGFloat
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        let tl = min(topLeft, min(rect.width, rect.height) / 2)
+        let tr = min(topRight, min(rect.width, rect.height) / 2)
+        path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
+        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + tl))
+        path.addArc(
+            center: CGPoint(x: rect.minX + tl, y: rect.minY + tl),
+            radius: tl, startAngle: .degrees(180), endAngle: .degrees(270), clockwise: false
+        )
+        path.addLine(to: CGPoint(x: rect.maxX - tr, y: rect.minY))
+        path.addArc(
+            center: CGPoint(x: rect.maxX - tr, y: rect.minY + tr),
+            radius: tr, startAngle: .degrees(270), endAngle: .degrees(0), clockwise: false
+        )
+        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
+        path.closeSubpath()
+        return path
+    }
+}
+
+private extension Array {
+    subscript(safe index: Int) -> Element? {
+        indices.contains(index) ? self[index] : nil
+    }
+}

package/ios/Tag/Tag.swift

@@ -0,0 +1,98 @@
+import SwiftUI
+
+public struct Tag: View {
+    public enum TagSize {
+        case large
+        case medium
+
+        var height: CGFloat {
+            switch self {
+            case .large: return 24
+            case .medium: return 18
+            }
+        }
+    }
+
+    public enum TagColor {
+        case `default`
+        case orange
+        case green
+        case red
+        case blue
+        case grey
+
+        var backgroundColor: Color {
+            switch self {
+            case .default: return Colors.black04
+            case .orange: return Colors.orange08
+            case .green: return Colors.green08
+            case .red: return Colors.red08
+            case .blue: return Colors.blue08
+            case .grey: return Colors.black04
+            }
+        }
+
+        var textColor: Color {
+            switch self {
+            case .default: return Colors.black17
+            case .orange: return Colors.orange03
+            case .green: return Colors.green03
+            case .red: return Colors.red03
+            case .blue: return Colors.blue03
+            case .grey: return Colors.black12
+            }
+        }
+    }
+
+    private let label: String
+    private let icon: String?
+    private let color: TagColor
+    private let size: TagSize
+
+    public init(
+        label: String = "Label",
+        icon: String? = nil,
+        color: TagColor = .default,
+        size: TagSize = .large
+    ) {
+        self.label = label
+        self.icon = icon
+        self.color = color
+        self.size = size
+    }
+
+    public var body: some View {
+        let tagColor = color.backgroundColor
+        let labelColor = color.textColor
+
+        HStack(spacing: 0) {
+            if let icon {
+                Icon(source: icon, size: 16, color: labelColor)
+            }
+            MomoText(label, typography: .labelSMedium, color: labelColor)
+        }
+        .frame(height: scaleSize(size.height))
+        .padding(.horizontal, Spacing.S)
+        .background(
+            RoundedRectangle(cornerRadius: Radius.S, style: .continuous)
+                .fill(tagColor)
+        )
+    }
+}
+
+// MARK: - Preview
+#if DEBUG
+struct Tag_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(spacing: 12) {
+            Tag()
+            Tag(color: .red)
+            Tag(color: .blue)
+            Tag(icon: "ic_momo", color: .grey)
+            Tag(label: "Medium", color: .green, size: .medium)
+        }
+        .padding()
+        .previewLayout(.sizeThatFits)
+    }
+}
+#endif

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -79,6 +79,7 @@ public struct TrustBanner: View {
                     .foregroundColor(Color(hex: "484848"))
                     .lineLimit(2)
                     .font(.system(size: 13, weight: Font.Weight.regular))
+                    .ignoreBoldTextSetting()
                     .lineSpacing(3)
                     .padding(.bottom, 8)
                 HStack {
@@ -86,6 +87,7 @@ public struct TrustBanner: View {
                         Text(applicationEnvironment.config?.trustBanner?.subContent[language ?? "vi"] as? String ?? defaultBanner.subContent[language ?? "vi"])
                             .foregroundColor(Colors.pink03)
                             .font(.system(size: 13, weight: .bold))
+                            .ignoreBoldTextSetting()
                             .padding(.trailing, 4)
                         
                         Icon(source: "arrow_chevron_right_small", color: Colors.pink03)