@momo-kits/native-kits 0.163.1-beta.2 → 0.163.1-beta.20-debug

package/ios/Carousel/Carousel.swift

@@ -0,0 +1,196 @@
+import Combine
+import SwiftUI
+
+/// Native SwiftUI port of the Compose `Carousel` component.
+///
+/// Mirrors the Compose API: a paging horizontal carousel driven by an
+/// `itemCount` and a `content` builder that receives the real (modulo) index.
+/// Supports infinite `loop`, `autoplay` with a configurable interval,
+/// inactive-slide `opacity`/`scale` effects, optional `contentPadding`,
+/// snap behavior, and scroll enable/disable. Snap / scroll-index callbacks
+/// report the real item index.
+///
+/// Available iOS 14+ (uses a custom paging ScrollView so behavior is identical
+/// across versions and supports the loop virtualization + transform effects
+/// that `TabView(.page)` cannot express).
+public struct Carousel<Content: View>: View {
+    // MARK: Lifecycle
+
+    public init(
+        itemCount: Int,
+        loop: Bool = false,
+        autoplay: Bool = false,
+        autoplayInterval: TimeInterval = 3.0,
+        enableSnap: Bool = true,
+        scrollEnabled: Bool = true,
+        inactiveSlideOpacity: Double = 1.0,
+        inactiveSlideScale: Double = 1.0,
+        contentPadding: CGFloat = 0,
+        onSnapToItem: @escaping (Int) -> Void = { _ in },
+        onScrollIndexChanged: @escaping (Int) -> Void = { _ in },
+        @ViewBuilder content: @escaping (_ index: Int) -> Content
+    ) {
+        self.itemCount = itemCount
+        self.loop = loop
+        self.autoplay = autoplay
+        self.autoplayInterval = autoplayInterval
+        self.enableSnap = enableSnap
+        self.scrollEnabled = scrollEnabled
+        self.inactiveSlideOpacity = inactiveSlideOpacity
+        self.inactiveSlideScale = inactiveSlideScale
+        self.contentPadding = contentPadding
+        self.onSnapToItem = onSnapToItem
+        self.onScrollIndexChanged = onScrollIndexChanged
+        self.content = content
+
+        let virtual = loop ? itemCount * 1000 : itemCount
+        let start = loop ? (virtual / 2) - ((virtual / 2) % max(itemCount, 1)) : 0
+        self.virtualPageCount = virtual
+        _currentPage = State(initialValue: start)
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        if itemCount <= 0 {
+            EmptyView()
+        } else {
+            GeometryReader { geo in
+                let pageWidth = max(geo.size.width - contentPadding * 2, 1)
+                carouselContent(pageWidth: pageWidth, viewportWidth: geo.size.width)
+            }
+        }
+    }
+
+    // MARK: Private
+
+    private let itemCount: Int
+    private let loop: Bool
+    private let autoplay: Bool
+    private let autoplayInterval: TimeInterval
+    private let enableSnap: Bool
+    private let scrollEnabled: Bool
+    private let inactiveSlideOpacity: Double
+    private let inactiveSlideScale: Double
+    private let contentPadding: CGFloat
+    private let onSnapToItem: (Int) -> Void
+    private let onScrollIndexChanged: (Int) -> Void
+    private let content: (Int) -> Content
+
+    private let virtualPageCount: Int
+
+    @State private var currentPage: Int
+    @State private var dragOffset: CGFloat = 0
+    @State private var isDragging: Bool = false
+    @State private var autoplayTick: Int = 0
+
+    private func realIndex(_ page: Int) -> Int {
+        ((page % itemCount) + itemCount) % itemCount
+    }
+
+    @ViewBuilder
+    private func carouselContent(pageWidth: CGFloat, viewportWidth: CGFloat) -> some View {
+        let step = pageWidth
+        // Offset so the current page is centered within the viewport padding.
+        let baseOffset = -CGFloat(currentPage) * step + contentPadding
+
+        // Windows the rendered range around `currentPage` instead of instantiating all
+        // `virtualPageCount` slides up front — with `loop=true`, that's `itemCount * 1000`
+        // eager views, a real memory/perf regression versus Compose's lazy `HorizontalPager`.
+        // Clear spacers of the skipped width keep the HStack's total layout size (and thus
+        // the existing `baseOffset` math) unchanged.
+        let windowRadius = 3
+        let windowStart = max(0, currentPage - windowRadius)
+        let windowEnd = min(virtualPageCount - 1, currentPage + windowRadius)
+
+        ZStack {
+            HStack(spacing: 0) {
+                if windowStart > 0 {
+                    Color.clear.frame(width: CGFloat(windowStart) * step)
+                }
+                ForEach(windowStart...windowEnd, id: \.self) { page in
+                    slide(page: page, step: step, viewportWidth: viewportWidth)
+                        .frame(width: pageWidth)
+                }
+                if windowEnd < virtualPageCount - 1 {
+                    Color.clear.frame(width: CGFloat(virtualPageCount - 1 - windowEnd) * step)
+                }
+            }
+            .offset(x: baseOffset + dragOffset)
+            .animation(isDragging ? nil : .easeInOut(duration: 0.25), value: currentPage)
+            .frame(width: viewportWidth, alignment: .leading)
+            .contentShape(Rectangle())
+            .gesture(scrollEnabled ? dragGesture(step: step) : nil)
+        }
+        .frame(width: viewportWidth)
+        .clipped()
+        .onReceive(autoplayTimer) { _ in
+            guard autoplay, itemCount > 1, !isDragging else { return }
+            advance()
+        }
+    }
+
+    @ViewBuilder
+    private func slide(page: Int, step: CGFloat, viewportWidth: CGFloat) -> some View {
+        // Fractional offset of this page from the current page (incl. drag).
+        let dragFraction = step > 0 ? -dragOffset / step : 0
+        let pageOffset = abs(CGFloat(currentPage - page) + dragFraction)
+        let isActive = pageOffset < 0.5
+        let scale = isActive ? 1.0 : inactiveSlideScale
+        let alpha = isActive ? 1.0 : inactiveSlideOpacity
+
+        content(realIndex(page))
+            .scaleEffect(scale)
+            .opacity(alpha)
+            .animation(.easeInOut(duration: 0.15), value: isActive)
+    }
+
+    private func dragGesture(step: CGFloat) -> some Gesture {
+        DragGesture(minimumDistance: 5)
+            .onChanged { value in
+                isDragging = true
+                dragOffset = value.translation.width
+            }
+            .onEnded { value in
+                isDragging = false
+                let predicted = value.predictedEndTranslation.width
+                let threshold = step / 4
+                var target = currentPage
+                if enableSnap {
+                    if predicted < -threshold {
+                        target = min(currentPage + 1, virtualPageCount - 1)
+                    } else if predicted > threshold {
+                        target = max(currentPage - 1, 0)
+                    }
+                } else {
+                    // Free scroll still settles to nearest page boundary.
+                    let moved = step > 0 ? Int((-dragOffset / step).rounded()) : 0
+                    target = min(max(currentPage + moved, 0), virtualPageCount - 1)
+                }
+                dragOffset = 0
+                setPage(target)
+            }
+    }
+
+    private func advance() {
+        let next = currentPage + 1
+        if next < virtualPageCount {
+            setPage(next)
+        }
+    }
+
+    private func setPage(_ page: Int) {
+        let clamped = min(max(page, 0), virtualPageCount - 1)
+        let changed = clamped != currentPage
+        currentPage = clamped
+        if changed {
+            let real = realIndex(clamped)
+            onSnapToItem(real)
+            onScrollIndexChanged(real)
+        }
+    }
+
+    private var autoplayTimer: Publishers.Autoconnect<Timer.TimerPublisher> {
+        Timer.publish(every: autoplayInterval, on: .main, in: .common).autoconnect()
+    }
+}

package/ios/Checkbox/Checkbox.swift

@@ -2,6 +2,7 @@ import Foundation
 import SwiftUI
 
 public struct Checkbox: View{
+    @Environment(\.appTheme) private var theme
     @Binding var checked: Bool
     var disabled: Bool
     var onChange: ((Bool)->Void)?
@@ -27,54 +28,48 @@ public struct Checkbox: View{
     public var body: some View {
         HStack(spacing: Spacing.S) {
             // Checkbox
-            ZStack {
-                RoundedRectangle(cornerRadius: Radius.XS)
-                    .fill(backgroundColor)
-                    .frame(width: 20, height: 20)
-                    .overlay(
-                        RoundedRectangle(cornerRadius: Radius.XS)
-                            .stroke(borderColor, lineWidth: Spacing.XXS)
-                    )
-
-                if checked {
-                    Image(systemName: indeterminate ? "minus.square.fill" : "checkmark.square.fill")
-                        .resizable()
-                        .foregroundColor(backgroundColor)
-                        .background(Colors.black01)
+            SwiftUI.Button(action: onCheck) {
+                ZStack {
+                    RoundedRectangle(cornerRadius: Radius.XS)
+                        .fill(backgroundColor)
                         .frame(width: 20, height: 20)
-                }
-            }
+                        .overlay(
+                            RoundedRectangle(cornerRadius: Radius.XS)
+                                .stroke(borderColor, lineWidth: Spacing.XXS)
+                        )
 
-            .onTapGesture {
-                if !disabled {
-                    onCheck()
+                    if checked {
+                        Icon(source: indeterminate ? "navigation_minus" : "ic_checked", size: 20, color: Colors.black01)
+                    }
                 }
             }
+            .buttonStyle(ActiveOpacityButtonStyle(activeOpacity: 0.8))
+            .disabled(disabled)
 
             // Title
             if !title.isEmpty {
-                Text(title)
-                    .font(.description1)
-                    .ignoreBoldTextSetting()
+                MomoText(title, typography: .descriptionDefaultRegular)
             }
         }
     }
 
     private var borderColor: Color {
-        if disabled {
-            return Colors.black03
+        if disabled && checked {
+            return theme.colors.background.tonal
+        } else if disabled {
+            return theme.colors.border.disable
         } else if checked {
-            return Colors.primary
+            return theme.colors.primary
         } else {
-            return Colors.text
+            return theme.colors.text.default
         }
     }
 
     private var backgroundColor: Color {
         if disabled && checked {
-            return Colors.pink08
+            return theme.colors.background.tonal
         } else if checked {
-            return Colors.primary
+            return theme.colors.primary
         } else {
             return Color.clear
         }

package/ios/Chip/Chip.swift

@@ -2,17 +2,18 @@ import SwiftUI
 import Foundation
 
 public struct Chip: View {
+    @Environment(\.appTheme) private var theme
     public enum ChipSize { case small, large }
 
     public struct Dimensions {
+        let height: CGFloat
         let horizontal: CGFloat
-        let vertical: CGFloat
         let iconSize: CGFloat
         let iconSpacing: CGFloat
     }
 
-    public static let Large = Dimensions(horizontal: 12, vertical: 8, iconSize: 20, iconSpacing: 8)
-    public static let Small = Dimensions(horizontal: 10, vertical: 6, iconSize: 16, iconSpacing: 6)
+    public static let Large = Dimensions(height: 32, horizontal: 12, iconSize: 20, iconSpacing: 4)
+    public static let Small = Dimensions(height: 24, horizontal: 10, iconSize: 16, iconSpacing: 4)
 
     private let label: String?
     private let iconLeft: String?
@@ -51,46 +52,68 @@ public struct Chip: View {
 
     public var body: some View {
         let dims = (size == .small) ? Self.Small : Self.Large
+        // Mirrors Compose's `scaleSize(...)` on every chip dimension so it responds
+        // to Dynamic Type scaling the same way the rest of the kit does.
+        let height = scaleSize(dims.height)
+        let horizontal = scaleSize(dims.horizontal)
+        let iconSize = scaleSize(dims.iconSize)
+        let iconSpacing = scaleSize(dims.iconSpacing)
+        let radius = scaleSize(Radius.L)
 
         let bg: Color = {
-            if selected { return Colors.pink10 }
+            if selected { return theme.colors.background.selected }
             if let explicit = backgroundColor { return explicit }
             return Colors.black03
         }()
 
-        let textColor: Color = selected ? Colors.primary : Colors.text
-        let leftTint: Color = selected ? Colors.primary : iconLeftTint ?? Colors.text
-        let rightTint: Color = selected ? Colors.primary : iconRightTint ?? Colors.text
+        let textColor: Color = selected ? theme.colors.primary : theme.colors.text.default
+        let leftTint: Color = selected ? theme.colors.primary : iconLeftTint ?? theme.colors.text.default
+        let rightTint: Color = selected ? theme.colors.primary : iconRightTint ?? theme.colors.text.default
 
-        HStack(spacing: dims.iconSpacing) {
-            if let iconLeft {
-                Icon(source: iconLeft, size: dims.iconSize, color: leftTint)
-            }
+        SwiftUI.Button(action: onClick) {
+            HStack(spacing: iconSpacing) {
+                if let iconLeft {
+                    Icon(source: iconLeft, size: iconSize, color: leftTint)
+                }
 
-            if let text = label, !text.isEmpty {
-                MomoText(text, typography: (size == .large) ? .labelDefaultMedium : .labelSMedium, color: textColor)
-                    .lineLimit(1)
-            }
+                if let text = label, !text.isEmpty {
+                    MomoText(text, typography: (size == .large) ? .labelDefaultMedium : .labelSMedium, color: textColor)
+                        .lineLimit(1)
+                }
 
-            if let iconRight {
-                Icon(source: iconRight, size: dims.iconSize, color: rightTint)
-            }
-        }
-        .padding(.horizontal, dims.horizontal)
-        .padding(.vertical, dims.vertical)
-        .background(
-            RoundedRectangle(cornerRadius: Radius.L, style: .continuous)
-                .fill(bg)
-        )
-        .overlay(
-            Group {
-                if selected {
-                    RoundedRectangle(cornerRadius: Radius.L, style: .continuous)
-                        .stroke(Colors.primary, lineWidth: 2)
+                if let iconRight {
+                    Icon(source: iconRight, size: iconSize, color: rightTint)
                 }
             }
-        )
-        .contentShape(RoundedRectangle(cornerRadius: Radius.L, style: .continuous))
-        .onTapGesture(perform: onClick)
+            .padding(.horizontal, horizontal)
+            .frame(height: height)
+            .background(
+                RoundedRectangle(cornerRadius: radius, style: .continuous)
+                    .fill(bg)
+            )
+            .overlay(
+                Group {
+                    if selected {
+                        RoundedRectangle(cornerRadius: radius, style: .continuous)
+                            .stroke(theme.colors.secondary, lineWidth: 2)
+                    }
+                }
+            )
+            .contentShape(RoundedRectangle(cornerRadius: radius, style: .continuous))
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .modifier(ChipAccessibilityModifier(accessibilityLabel: accessibilityLabel))
+    }
+}
+
+private struct ChipAccessibilityModifier: ViewModifier {
+    let accessibilityLabel: String?
+
+    func body(content: Content) -> some View {
+        if let id = accessibilityLabel {
+            content.accessibilityIdentifier(id)
+        } else {
+            content
+        }
     }
 }

package/ios/Collapse/Collapse.swift

@@ -0,0 +1,192 @@
+import SwiftUI
+
+public enum CollapseTitleSize {
+    case small
+    case medium
+    case large
+
+    var typography: TypographyStyle {
+        switch self {
+        case .small: return .headerSSemibold
+        case .medium: return .headerDefaultBold
+        case .large: return .headerMBold
+        }
+    }
+}
+
+public struct Collapse<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+
+    private let title: String
+    private let description: String?
+    private let image: String?
+    private let imageSize: CGFloat
+    private let subTitle: String?
+    private let tagLabel: String?
+    private let tagColor: Tag.TagColor
+    private let showBorder: Bool
+    private let expandDefault: Bool
+    private let titleSize: CollapseTitleSize
+    private let useBackgroundCollapseButton: Bool
+    private let backgroundColor: Color?
+    private let titleColor: Color?
+    private let accessibilityId: String?
+    private let onPress: ((Bool) -> Void)?
+    private let content: (() -> Content)?
+
+    @State private var expanded: Bool
+
+    public init(
+        title: String,
+        description: String? = nil,
+        image: String? = nil,
+        imageSize: CGFloat = 24,
+        subTitle: String? = nil,
+        tagLabel: String? = nil,
+        tagColor: Tag.TagColor = .default,
+        showBorder: Bool = false,
+        expandDefault: Bool = false,
+        titleSize: CollapseTitleSize = .medium,
+        useBackgroundCollapseButton: Bool = false,
+        backgroundColor: Color? = nil,
+        titleColor: Color? = nil,
+        accessibilityId: String? = nil,
+        onPress: ((Bool) -> Void)? = nil,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.title = title
+        self.description = description
+        self.image = image
+        self.imageSize = imageSize
+        self.subTitle = subTitle
+        self.tagLabel = tagLabel
+        self.tagColor = tagColor
+        self.showBorder = showBorder
+        self.expandDefault = expandDefault
+        self.titleSize = titleSize
+        self.useBackgroundCollapseButton = useBackgroundCollapseButton
+        self.backgroundColor = backgroundColor
+        self.titleColor = titleColor
+        self.accessibilityId = accessibilityId
+        self.onPress = onPress
+        self.content = content
+        _expanded = State(initialValue: expandDefault)
+    }
+
+    // Mirrors Kotlin's `accessibilityId ?: "Collapse/$title"`.
+    private var automationId: String {
+        accessibilityId ?? "Collapse/\(title)"
+    }
+
+    private var resolvedBackgroundColor: Color {
+        backgroundColor ?? theme.colors.background.surface
+    }
+
+    public var body: some View {
+        VStack(spacing: 0) {
+            header
+
+            if let content {
+                if expanded {
+                    VStack(spacing: 0) {
+                        content()
+                    }
+                    .frame(maxWidth: .infinity)
+                    .overlay(
+                        showBorder
+                            ? RoundedRectangle(cornerRadius: 0)
+                                .stroke(theme.colors.border.default, lineWidth: 1)
+                            : nil
+                    )
+                    .transition(.move(edge: .top).combined(with: .opacity))
+                }
+            }
+        }
+        .frame(maxWidth: .infinity)
+        .background(resolvedBackgroundColor)
+        .clipShape(RoundedRectangle(cornerRadius: Radius.S, style: .continuous))
+        .accessibilityIdentifier(automationId)
+        .overlay(
+            showBorder
+                ? RoundedRectangle(cornerRadius: Radius.S, style: .continuous)
+                    .stroke(theme.colors.border.default, lineWidth: 1)
+                : nil
+        )
+    }
+
+    private var header: some View {
+        SwiftUI.Button(action: {
+            onPress?(expanded)
+            withAnimation(.easeInOut(duration: 0.3)) {
+                expanded.toggle()
+            }
+        }) {
+            HStack(alignment: .top, spacing: 0) {
+                if let image {
+                    ImageView(image, contentMode: .fill)
+                        .frame(width: imageSize, height: imageSize)
+                        .clipShape(RoundedRectangle(cornerRadius: Radius.XS, style: .continuous))
+                    Spacer().frame(width: Spacing.S)
+                }
+
+                VStack(alignment: .leading, spacing: 0) {
+                    MomoText(
+                        title,
+                        typography: titleSize.typography,
+                        color: titleColor ?? theme.colors.text.default
+                    )
+                    if let description {
+                        MomoText(
+                            description,
+                            typography: .bodyDefaultRegular,
+                            color: theme.colors.text.secondary
+                        )
+                        .lineLimit(2)
+                    }
+                }
+                .frame(maxWidth: .infinity, alignment: .leading)
+
+                if subTitle != nil || tagLabel != nil {
+                    Spacer().frame(width: Spacing.S)
+                    if let subTitle {
+                        MomoText(
+                            subTitle,
+                            typography: .bodyDefaultRegular,
+                            color: theme.colors.text.secondary
+                        )
+                        .lineLimit(1)
+                    } else if let tagLabel {
+                        Tag(label: tagLabel, color: tagColor)
+                    }
+                }
+
+                Spacer().frame(width: Spacing.S)
+                chevron
+            }
+            .padding(.horizontal, Spacing.M)
+            .padding(.vertical, Spacing.S)
+            .frame(maxWidth: .infinity)
+            .contentShape(Rectangle())
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .accessibilityIdentifier("\(automationId)|touch")
+    }
+
+    private var chevron: some View {
+        Group {
+            if useBackgroundCollapseButton {
+                Icon(source: "arrow_chevron_down_small", size: 16, color: theme.colors.primary)
+                    .rotationEffect(.degrees(expanded ? 180 : 0))
+                    .frame(width: 24, height: 24)
+                    .background(
+                        RoundedRectangle(cornerRadius: Radius.M, style: .continuous)
+                            .fill(theme.colors.background.tonal)
+                    )
+            } else {
+                Icon(source: "arrow_chevron_down_small", size: 24, color: theme.colors.text.default)
+                    .rotationEffect(.degrees(expanded ? 180 : 0))
+            }
+        }
+        .animation(.easeInOut(duration: 0.3), value: expanded)
+    }
+}

package/ios/Colors+Radius+Spacing/Colors.swift

@@ -3,18 +3,18 @@ import Foundation
 import SwiftUI
 
 public enum Colors {
-    public static let primary = Color("Primary")
-    public static let primaryDark = Color("PrimaryDark")
-    public static let primaryLight = Color("PrimaryLight")
-    public static let secondary = Color("Secondary")
-    public static let background = Color("Background")
-    public static let border = Color("Border")
-    public static let text = Color("Text")
-    public static let textSecondary = Color("TextSecondary")
-    public static let card = Color("Card")
-    public static let error = Color("Error")
-    public static let info = Color("Info")
-    public static let success = Color("Success")
+    public static let primary = Color.momoAsset("Primary")
+    public static let primaryDark = Color.momoAsset("PrimaryDark")
+    public static let primaryLight = Color.momoAsset("PrimaryLight")
+    public static let secondary = Color.momoAsset("Secondary")
+    public static let background = Color.momoAsset("Background")
+    public static let border = Color.momoAsset("Border")
+    public static let text = Color.momoAsset("ThemeColors/text-default")
+    public static let textSecondary = Color.momoAsset("TextSecondary")
+    public static let card = Color.momoAsset("Card")
+    public static let error = Color.momoAsset("Error")
+    public static let info = blue03
+    public static let success = Color.momoAsset("Success")
 
     public static let black20 = Color(hex: "000000")
     public static let black19 = Color(hex: "18191a")
@@ -49,15 +49,18 @@ public enum Colors {
     public static let pink03 = Color(hex: "eb2f96")
     public static let pink02 = Color(hex: "d42a87")
     public static let pink01 = Color(hex: "bc2678")
+    public static let pinkMoMoBranding = Color(hex: "a50064")
 
 
-    public static let violet10 = Color(hex: "fcf8fe")
-    public static let violet09 = Color(hex: "faf4fe")
+    public static let violet11 = Color(hex: "fcf8fe")
+    public static let violet11Stroke = Color(hex: "dfe1e5")
+    public static let violet10 = Color(hex: "faf4fe")
+    public static let violet09 = Color(hex: "f4e9fd")
     public static let violet08 = Color(hex: "ead4fc")
     public static let violet07 = Color(hex: "d5aaf9")
-    public static let violet06 = Color(hex: "f4e9fd")
-    public static let violet05 = Color(hex: "c07ff6")
-    public static let violet04 = Color(hex: "ab55f3")
+    public static let violet06 = Color(hex: "c07ff6")
+    public static let violet05 = Color(hex: "ab55f3")
+    public static let violet04 = Color(hex: "a03ff1")
     public static let violet03 = Color(hex: "962af0")
     public static let violet02 = Color(hex: "8726d8")
     public static let violet01 = Color(hex: "7822c0")

package/ios/Colors+Radius+Spacing/Spacing.swift

@@ -8,5 +8,7 @@ public enum Spacing {
     public static let L: CGFloat = 16
     public static let XL: CGFloat = 24
     public static let XXL: CGFloat = 32
-    public static let XXXL: CGFloat = 48
+    public static let Size3XL: CGFloat = 48
+    public static let Size4XL: CGFloat = 56
+    public static let Size5XL: CGFloat = 64
 }