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

package/ios/Badge/Badge.swift

@@ -1,6 +1,7 @@
 import SwiftUI
 
 public struct Badge: View {
+    @Environment(\.appTheme) private var theme
     let label: String
     let backgroundColor: Color?
     
@@ -38,23 +39,21 @@ public struct Badge: View {
     }
     
     private var badgeColor: Color {
-        // If a custom background color is provided, use it
-        if let bgColor = backgroundColor {
+        // Default colors based on label type
+        let defaultColor: Color = isNumber(label)
+            ? theme.colors.error.primary
+            : theme.colors.warning.primary
+
+        // Mirror Compose: only apply backgroundColor when it is one of the
+        // allowed primaryColors; otherwise fall back to the label-based default.
+        if let bgColor = backgroundColor, primaryColors.contains(bgColor) {
             return bgColor
         }
-        
-        // Otherwise, use default colors based on label type
-        if isNumber(label) {
-            return Colors.red03 // error.primary
-        } else {
-            return Colors.orange03 // warning.primary
-        }
+        return defaultColor
     }
     
     public var body: some View {
-        Text(formatTitle(label))
-            .font(.system(size: scaleSize(10), weight: .bold))
-            .foregroundColor(Colors.black01)
+        MomoText(formatTitle(label), typography: .actionXxsBold, color: Colors.black01)
             .padding(.horizontal, Spacing.XS)
             .frame(minWidth: scaleSize(16), minHeight: scaleSize(16))
             .background(badgeColor)
@@ -82,4 +81,3 @@ struct Badge_Previews: PreviewProvider {
     }
 }
 #endif
-

package/ios/Badge/BadgeRibbon.swift

@@ -77,10 +77,11 @@ public enum RibbonPosition {
 }
 
 public struct BadgeRibbon: View {
+    @Environment(\.appTheme) private var theme
     let position: RibbonPosition
     let label: String
     let isRound: Bool
-    let backgroundColor: Color
+    let backgroundColor: Color?
     
     public init(
         position: RibbonPosition = .topRight,
@@ -91,7 +92,7 @@ public struct BadgeRibbon: View {
         self.position = position
         self.label = label
         self.isRound = isRound
-        self.backgroundColor = backgroundColor ?? Colors.orange03
+        self.backgroundColor = backgroundColor
     }
     
     private var rotation: Angle {
@@ -117,6 +118,8 @@ public struct BadgeRibbon: View {
     }
     
     public var body: some View {
+        let bgColor = backgroundColor ?? theme.colors.warning.primary
+
         HStack(alignment: verticalAlignment, spacing: 0) {
             if useUpTail {
                 upTail
@@ -125,21 +128,18 @@ public struct BadgeRibbon: View {
             }
             
             if isRound {
-                roundContent
+                roundContent(backgroundColor: bgColor)
             } else {
-                skewContent
+                skewContent(backgroundColor: bgColor)
             }
         }
         .frame(height: RibbonConstants.ribbonHeight)
         .rotationEffect(rotation)
     }
     
-    private var roundContent: some View {
+    private func roundContent(backgroundColor: Color) -> some View {
         HStack(spacing: 0) {
-            Text(label)
-                .font(.system(size: scaleSize(12), weight: .medium))
-                .foregroundColor(Colors.black01)
-                .lineLimit(1)
+            MomoText(label, typography: .labelXsMedium, color: Colors.black01, maxLines: 1)
                 .rotationEffect(rotation)
         }
         .frame(height: RibbonConstants.roundHeight)
@@ -155,12 +155,9 @@ public struct BadgeRibbon: View {
         )
     }
     
-    private var skewContent: some View {
+    private func skewContent(backgroundColor: Color) -> some View {
         HStack(spacing: 0) {
-            Text(label)
-                .font(.system(size: scaleSize(12), weight: .medium))
-                .foregroundColor(Colors.black01)
-                .lineLimit(1)
+            MomoText(label, typography: .labelXsMedium, color: Colors.black01, maxLines: 1)
                 .rotationEffect(rotation)
                 .frame(height: RibbonConstants.skewBodyHeight)
                 .padding(.horizontal, 8)
@@ -177,7 +174,6 @@ public struct BadgeRibbon: View {
         )
         .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
         .rotationEffect(.degrees(180))
-        .offset(x: 1)
         .clipped()
     }
     
@@ -187,7 +183,6 @@ public struct BadgeRibbon: View {
             placeholder: AnyView(Color.clear)
         )
         .frame(width: RibbonConstants.headTailWidth, height: RibbonConstants.headTailHeight)
-        .offset(x: 1)
         .clipped()
     }
     
@@ -197,7 +192,6 @@ public struct BadgeRibbon: View {
             placeholder: AnyView(Color.clear)
         )
         .frame(width: RibbonConstants.skewTailWidth, height: RibbonConstants.skewTailHeight)
-        .offset(x: -2)
         .clipped()
     }
 }
@@ -207,7 +201,7 @@ private struct RibbonConstants {
     static let ribbonHeight: CGFloat = 20
     static let roundHeight: CGFloat = 16
     static let skewBodyHeight: CGFloat = 16
-    static let roundRightRadius: CGFloat = 8
+    static let roundRightRadius: CGFloat = 12
     static let roundPaddingEnd: CGFloat = 6
     static let skewTailWidth: CGFloat = 8
     static let skewTailHeight: CGFloat = 16
@@ -239,4 +233,3 @@ struct BadgeRibbon_Previews: PreviewProvider {
     }
 }
 #endif
-

package/ios/BaselineView/BaselineView.swift

@@ -0,0 +1,163 @@
+import SwiftUI
+
+public struct BaselineView: View {
+    private let enabled: Bool
+
+    public init(enabled: Bool = true) {
+        self.enabled = enabled
+    }
+
+    public var body: some View {
+        if enabled {
+            GeometryReader { geometry in
+                let topInset = geometry.safeAreaInsets.top
+                let bottomInset = min(geometry.safeAreaInsets.bottom, 21)
+
+                ZStack(alignment: .topLeading) {
+                    dangerZones(topInset: topInset, bottomInset: bottomInset)
+                    guideLines(
+                        topInset: topInset,
+                        bottomInset: bottomInset,
+                        width: geometry.size.width
+                    )
+                }
+                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .ignoresSafeArea()
+                .allowsHitTesting(false)
+                .accessibilityHidden(true)
+            }
+        }
+    }
+
+    private func dangerZones(topInset: CGFloat, bottomInset: CGFloat) -> some View {
+        let safeBackground = Color.red.opacity(0.15)
+
+        return ZStack(alignment: .topLeading) {
+            safeBackground
+                .frame(maxWidth: .infinity)
+                .frame(height: topInset)
+
+            HStack(spacing: 0) {
+                safeBackground
+                    .frame(width: 12)
+                Spacer(minLength: 0)
+                safeBackground
+                    .frame(width: 12)
+            }
+            .padding(.top, topInset)
+            .padding(.bottom, bottomInset)
+
+            VStack(spacing: 0) {
+                Spacer(minLength: 0)
+                safeBackground
+                    .frame(maxWidth: .infinity)
+                    .frame(height: bottomInset)
+            }
+        }
+    }
+
+    private func guideLines(topInset: CGFloat, bottomInset: CGFloat, width: CGFloat) -> some View {
+        ZStack(alignment: .topLeading) {
+            baselineLine(isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(y: topInset)
+
+            baselineLine(color: Color(hex: 0xE400FF))
+                .offset(y: topInset + 52)
+
+            baselineLine(color: Color(hex: 0xE400FF))
+                .offset(y: topInset + 104)
+
+            bottomLine(bottomInset: bottomInset + 64, color: Color(hex: 0xE400FF))
+
+            bottomLine(bottomInset: bottomInset, isDotted: false, color: Color(hex: 0xE400FF))
+
+            baselineLine(orientation: .vertical, isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(x: 12)
+
+            baselineLine(orientation: .vertical, isDotted: false, color: Color(hex: 0xE400FF))
+                .offset(x: width - 12)
+
+            baselineLine(color: Color(hex: 0xFF7A00))
+                .offset(y: topInset + 26)
+
+            bottomLine(bottomInset: bottomInset + 56, color: Color(hex: 0xFFCC00))
+
+            bottomLine(bottomInset: bottomInset + 8, color: Color(hex: 0xFFCC00))
+
+            baselineLine(orientation: .vertical, color: Color(hex: 0x00C520))
+                .frame(height: 52)
+                .offset(x: 40, y: topInset)
+
+            baselineLine(orientation: .vertical, color: Color(hex: 0x00C520))
+                .frame(height: 52)
+                .offset(x: 48, y: topInset)
+        }
+    }
+
+    private func bottomLine(
+        bottomInset: CGFloat,
+        isDotted: Bool = true,
+        color: Color
+    ) -> some View {
+        VStack(spacing: 0) {
+            Spacer(minLength: 0)
+            baselineLine(isDotted: isDotted, color: color)
+                .padding(.bottom, bottomInset)
+        }
+    }
+
+    private func baselineLine(
+        orientation: BaselineOrientation = .horizontal,
+        isDotted: Bool = true,
+        color: Color
+    ) -> some View {
+        BaselineLineShape(orientation: orientation)
+            .stroke(
+                color,
+                style: StrokeStyle(
+                    lineWidth: 1,
+                    lineCap: .round,
+                    dash: isDotted ? [8, 8] : []
+                )
+            )
+            .frame(
+                maxWidth: orientation == .horizontal ? .infinity : 1,
+                maxHeight: orientation == .vertical ? .infinity : 1
+            )
+    }
+}
+
+public enum BaselineOrientation: Sendable {
+    case horizontal
+    case vertical
+}
+
+private struct BaselineLineShape: Shape {
+    let orientation: BaselineOrientation
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+
+        switch orientation {
+        case .horizontal:
+            path.move(to: CGPoint(x: rect.minX, y: rect.midY))
+            path.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
+        case .vertical:
+            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
+            path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
+        }
+
+        return path
+    }
+}
+
+#if DEBUG
+struct BaselineView_Previews: PreviewProvider {
+    static var previews: some View {
+        ZStack {
+            Colors.black01
+            BaselineView()
+        }
+    }
+}
+#endif

package/ios/Button/Button.swift

@@ -31,33 +31,45 @@ public struct ButtonStyleData {
 
 public extension ButtonType {
     func backgroundColor(loading: Bool) -> Color {
+        backgroundColor(loading: loading, theme: defaultTheme)
+    }
+
+    func backgroundColor(loading: Bool, theme: Theme) -> Color {
         switch self {
-        case .disabled: return Colors.black05.opacity(loading ? 0.75 : 1)
-        case .primary: return Colors.primary.opacity(loading ? 0.75 : 1)
-        case .secondary: return Colors.card.opacity(loading ? 0.75 : 1)
-        case .outline: return Colors.card.opacity(loading ? 0.75 : 1)
-        case .tonal: return Colors.primaryLight.opacity(loading ? 0.75 : 1)
-        case .danger: return Colors.error.opacity(loading ? 0.75 : 1)
+        case .disabled: return theme.colors.background.disable.opacity(loading ? 0.75 : 1)
+        case .primary: return theme.colors.primary.opacity(loading ? 0.75 : 1)
+        case .secondary: return theme.colors.background.surface.opacity(loading ? 0.75 : 1)
+        case .outline: return theme.colors.background.surface.opacity(loading ? 0.75 : 1)
+        case .tonal: return theme.colors.background.tonal.opacity(loading ? 0.75 : 1)
+        case .danger: return theme.colors.error.primary.opacity(loading ? 0.75 : 1)
         case .text: return .clear
         }
     }
 
     func contentColor(loading: Bool) -> Color {
+        contentColor(loading: loading, theme: defaultTheme)
+    }
+
+    func contentColor(loading: Bool, theme: Theme) -> Color {
         switch self {
-        case .disabled: return Colors.black06.opacity(loading ? 0.75 : 1)
+        case .disabled: return theme.colors.text.disable.opacity(loading ? 0.75 : 1)
         case .primary: return Colors.black01
-        case .secondary: return Colors.black17
-        case .outline: return Colors.primary
-        case .tonal: return Colors.primary
+        case .secondary: return theme.colors.text.default
+        case .outline: return theme.colors.primary
+        case .tonal: return theme.colors.primary
         case .danger: return Colors.black01
-        case .text: return Colors.primary
+        case .text: return theme.colors.primary
         }
     }
 
     var borderColor: Color? {
+        borderColor(theme: defaultTheme)
+    }
+
+    func borderColor(theme: Theme) -> Color? {
         switch self {
-        case .outline: return Colors.primary
-        case .secondary: return Colors.black04
+        case .outline: return theme.colors.primary
+        case .secondary: return theme.colors.border.default
         default: return nil
         }
     }
@@ -117,6 +129,7 @@ extension ButtonSize {
 }
 
 public struct Button: View {
+    @Environment(\.appTheme) private var theme
     var title: String
     var action: () -> Void
     var type: ButtonType
@@ -125,6 +138,7 @@ public struct Button: View {
     var iconRight: AnyView?
     var isFull: Bool
     var loading: Bool
+    var useTintColor: Bool
 
     public init(
         title: String = "",
@@ -134,7 +148,8 @@ public struct Button: View {
         iconLeft: AnyView? = nil,
         iconRight: AnyView? = nil,
         isFull: Bool = true,
-        loading: Bool = false
+        loading: Bool = false,
+        useTintColor: Bool = true
     ) {
         self.title = title
         self.action = action
@@ -144,6 +159,7 @@ public struct Button: View {
         self.iconRight = iconRight
         self.isFull = isFull
         self.loading = loading
+        self.useTintColor = useTintColor
     }
 
     private func shouldLoadingOnLeft(_ left: AnyView?, _ right: AnyView?) -> Bool {
@@ -160,14 +176,15 @@ public struct Button: View {
 
     public var body: some View {
         let loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight)
+        let isEnabled = type != .disabled && !loading
 
-        let bg = type.backgroundColor(loading: loading)
-        let fg = type.contentColor(loading: loading)
-        let border = type.borderColor
+        let bg = type.backgroundColor(loading: loading, theme: theme)
+        let fg = type.contentColor(loading: loading, theme: theme)
+        let border = type.borderColor(theme: theme)
         let borderWidth = type.borderWidth
 
         SwiftUI.Button(action: {
-            if !loading, type != .disabled {
+            if isEnabled {
                 action()
             }
         }) {
@@ -178,7 +195,7 @@ public struct Button: View {
                         .colorMultiply(fg)
 
                 } else if let iconLeft = iconLeft {
-                    iconLeft.frame(width: size.iconSize, height: size.iconSize)
+                    tintedIcon(iconLeft, color: fg)
                 }
 
                 MomoText(title, typography: size.typographyStyle, color: fg)
@@ -191,7 +208,7 @@ public struct Button: View {
                         .colorMultiply(fg)
 
                 } else if let iconRight = iconRight {
-                    iconRight.frame(width: size.iconSize, height: size.iconSize)
+                    tintedIcon(iconRight, color: fg)
                 }
             }
             .frame(maxWidth: isFull ? .infinity : nil)
@@ -200,11 +217,33 @@ public struct Button: View {
             .background(bg)
             .overlay(
                 RoundedRectangle(cornerRadius: size.radius)
-                    .stroke(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+                    .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
             )
             .clipShape(RoundedRectangle(cornerRadius: size.radius))
-            .opacity(loading ? 0.75 : 1)
         }
-        .disabled(type == .disabled || loading)
+        .buttonStyle(ButtonPressFeedbackStyle(isEnabled: isEnabled))
+        .disabled(!isEnabled)
+    }
+
+    @ViewBuilder
+    private func tintedIcon(_ icon: AnyView, color: Color) -> some View {
+        if useTintColor {
+            icon
+                .frame(width: size.iconSize, height: size.iconSize)
+                .colorMultiply(color)
+        } else {
+            icon
+                .frame(width: size.iconSize, height: size.iconSize)
+        }
+    }
+}
+
+private struct ButtonPressFeedbackStyle: ButtonStyle {
+    let isEnabled: Bool
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .opacity(configuration.isPressed && isEnabled ? 0.5 : 1)
+            .animation(.easeInOut(duration: 0.1), value: configuration.isPressed)
     }
 }

package/ios/Carousel/Carousel.swift

@@ -0,0 +1,181 @@
+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
+
+        ZStack {
+            HStack(spacing: 0) {
+                ForEach(0 ..< virtualPageCount, id: \.self) { page in
+                    slide(page: page, step: step, viewportWidth: viewportWidth)
+                        .frame(width: pageWidth)
+                }
+            }
+            .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()
+    }
+}