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

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?
@@ -53,14 +54,14 @@ public struct Chip: View {
         let dims = (size == .small) ? Self.Small : Self.Large
 
         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 {
@@ -77,7 +78,7 @@ public struct Chip: View {
             }
         }
         .padding(.horizontal, dims.horizontal)
-        .padding(.vertical, dims.vertical)
+        .frame(height: dims.height)
         .background(
             RoundedRectangle(cornerRadius: Radius.L, style: .continuous)
                 .fill(bg)
@@ -86,11 +87,24 @@ public struct Chip: View {
             Group {
                 if selected {
                     RoundedRectangle(cornerRadius: Radius.L, style: .continuous)
-                        .stroke(Colors.primary, lineWidth: 2)
+                        .stroke(theme.colors.secondary, lineWidth: 2)
                 }
             }
         )
         .contentShape(RoundedRectangle(cornerRadius: Radius.L, style: .continuous))
         .onTapGesture(perform: onClick)
+        .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,182 @@
+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 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,
+        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.onPress = onPress
+        self.content = content
+        _expanded = State(initialValue: expandDefault)
+    }
+
+    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))
+        .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(.plain)
+    }
+
+    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

@@ -9,7 +9,7 @@ public enum Colors {
     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 text = Color("ThemeColors/text-default")
     public static let textSecondary = Color("TextSecondary")
     public static let card = Color("Card")
     public static let error = Color("Error")

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

@@ -0,0 +1,295 @@
+//
+//  Theme.swift
+//  MoMoUIKits
+//
+//  Created by sophia on 25/2/26.
+//
+
+import Foundation
+import SwiftUI
+
+// MARK: - Background
+
+public struct Background {
+    public let `default`: Color
+    public let surface: Color
+    public let tonal: Color
+    public let pressed: Color
+    public let selected: Color
+    public let disable: Color
+
+    public init(
+        default defaultColor: Color,
+        surface: Color,
+        tonal: Color,
+        pressed: Color,
+        selected: Color,
+        disable: Color
+    ) {
+        self.default = defaultColor
+        self.surface = surface
+        self.tonal = tonal
+        self.pressed = pressed
+        self.selected = selected
+        self.disable = disable
+    }
+}
+
+// MARK: - TextColors
+
+public struct TextColors {
+    public let `default`: Color
+    public let secondary: Color
+    public let hint: Color
+    public let disable: Color
+
+    public init(
+        default defaultColor: Color,
+        secondary: Color,
+        hint: Color,
+        disable: Color
+    ) {
+        self.default = defaultColor
+        self.secondary = secondary
+        self.hint = hint
+        self.disable = disable
+    }
+}
+
+// MARK: - BorderColors
+
+public struct BorderColors {
+    public let `default`: Color
+    public let disable: Color
+
+    public init(default defaultColor: Color, disable: Color) {
+        self.default = defaultColor
+        self.disable = disable
+    }
+}
+
+// MARK: - ColorSet
+
+public struct ColorSet {
+    public let primary: Color
+    public let secondary: Color
+    public let container: Color
+
+    public init(primary: Color, secondary: Color, container: Color) {
+        self.primary = primary
+        self.secondary = secondary
+        self.container = container
+    }
+}
+
+// MARK: - ColorScheme
+
+public struct ColorScheme {
+    public let primary: Color
+    public let secondary: Color
+    public let gradient: Color
+    public let background: Background
+    public let text: TextColors
+    public let border: BorderColors
+    public let success: ColorSet
+    public let warning: ColorSet
+    public let error: ColorSet
+    public let highlight: ColorSet
+    public let interactive: ColorSet
+
+    public init(
+        primary: Color,
+        secondary: Color,
+        gradient: Color,
+        background: Background,
+        text: TextColors,
+        border: BorderColors,
+        success: ColorSet,
+        warning: ColorSet,
+        error: ColorSet,
+        highlight: ColorSet,
+        interactive: ColorSet
+    ) {
+        self.primary = primary
+        self.secondary = secondary
+        self.gradient = gradient
+        self.background = background
+        self.text = text
+        self.border = border
+        self.success = success
+        self.warning = warning
+        self.error = error
+        self.highlight = highlight
+        self.interactive = interactive
+    }
+}
+
+// MARK: - ThemeAssets
+
+public struct ThemeAssets {
+    public let headerBackground: String?
+
+    public init(headerBackground: String? = nil) {
+        self.headerBackground = headerBackground
+    }
+
+    public var isHeaderImage: Bool {
+        guard let url = headerBackground else { return false }
+        return !url.isEmpty
+    }
+}
+
+// MARK: - Theme
+
+public struct Theme {
+    public let dark: Bool
+    public let colors: ColorScheme
+    public let font: String
+    public let assets: ThemeAssets
+
+    public init(dark: Bool, colors: ColorScheme, font: String, assets: ThemeAssets) {
+        self.dark = dark
+        self.colors = colors
+        self.font = font
+        self.assets = assets
+    }
+
+    public func copy(
+        dark: Bool? = nil,
+        colors: ColorScheme? = nil,
+        font: String? = nil,
+        assets: ThemeAssets? = nil
+    ) -> Theme {
+        Theme(
+            dark: dark ?? self.dark,
+            colors: colors ?? self.colors,
+            font: font ?? self.font,
+            assets: assets ?? self.assets
+        )
+    }
+}
+
+// MARK: - Default Theme (Light)
+
+public let defaultTheme = Theme(
+    dark: false,
+    colors: ColorScheme(
+        primary: Color("ThemeColors/primary"),
+        secondary: Color("ThemeColors/secondary"),
+        gradient: Color("ThemeColors/gradient"),
+        background: Background(
+            default: Color("ThemeColors/background-default"),
+            surface: Color("ThemeColors/background-surface"),
+            tonal: Color("ThemeColors/background-tonal"),
+            pressed: Color("ThemeColors/background-pressed"),
+            selected: Color("ThemeColors/background-selected"),
+            disable: Color("ThemeColors/background-disable")
+        ),
+        text: TextColors(
+            default: Color("ThemeColors/text-default"),
+            secondary: Color("ThemeColors/text-secondary"),
+            hint: Color("ThemeColors/text-hint"),
+            disable: Color("ThemeColors/text-disable")
+        ),
+        border: BorderColors(
+            default: Color("ThemeColors/border-default"),
+            disable: Color("ThemeColors/border-disable")
+        ),
+        success: ColorSet(
+            primary: Colors.green03,
+            secondary: Colors.green07,
+            container: Colors.green08
+        ),
+        warning: ColorSet(
+            primary: Colors.orange03,
+            secondary: Colors.orange07,
+            container: Colors.orange08
+        ),
+        error: ColorSet(
+            primary: Colors.red03,
+            secondary: Colors.red07,
+            container: Colors.red08
+        ),
+        highlight: ColorSet(
+            primary: Colors.mint03,
+            secondary: Colors.mint07,
+            container: Colors.mint08
+        ),
+        interactive: ColorSet(
+            primary: Colors.blue03,
+            secondary: Colors.blue07,
+            container: Colors.blue08
+        )
+    ),
+    font: "SFProText",
+    assets: ThemeAssets(headerBackground: nil)
+)
+
+// MARK: - Dark Theme
+
+public let darkTheme = Theme(
+    dark: true,
+    colors: ColorScheme(
+        primary: Colors.pink04,
+        secondary: Colors.pink08,
+        gradient: Color(hex: "FDCADE"),
+        background: Background(
+            default: Color(hex: "121212"),
+            surface: Color(hex: "1E1E1E"),
+            tonal: Colors.pink10,
+            pressed: Color(hex: "1A1A1A"),
+            selected: Colors.pink11,
+            disable: Color(hex: "303030")
+        ),
+        text: TextColors(
+            default: Color.white,
+            secondary: Color(hex: "B0B0B0"),
+            hint: Color(hex: "727272"),
+            disable: Color(hex: "505050")
+        ),
+        border: BorderColors(
+            default: Color(hex: "2A2A2A"),
+            disable: Color(hex: "242424")
+        ),
+        success: ColorSet(
+            primary: Colors.green03,
+            secondary: Colors.green07,
+            container: Colors.green08
+        ),
+        warning: ColorSet(
+            primary: Colors.orange03,
+            secondary: Colors.orange07,
+            container: Colors.orange08
+        ),
+        error: ColorSet(
+            primary: Colors.red03,
+            secondary: Colors.red07,
+            container: Colors.red08
+        ),
+        highlight: ColorSet(
+            primary: Colors.mint03,
+            secondary: Colors.mint07,
+            container: Colors.mint08
+        ),
+        interactive: ColorSet(
+            primary: Colors.blue03,
+            secondary: Colors.blue07,
+            container: Colors.blue08
+        )
+    ),
+    font: "SFProText",
+    assets: ThemeAssets(headerBackground: nil)
+)
+
+// MARK: - AppTheme Environment Key
+
+private struct AppThemeKey: EnvironmentKey {
+    static let defaultValue: Theme = defaultTheme
+}
+
+public extension EnvironmentValues {
+    var appTheme: Theme {
+        get { self[AppThemeKey.self] }
+        set { self[AppThemeKey.self] = newValue }
+    }
+}