@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1

package/ios/Checkbox/Checkbox.swift

@@ -2,37 +2,76 @@ import Foundation
 import SwiftUI
 
 public struct Checkbox: View{
+    @Environment(\.appTheme) private var theme
     @Binding var checked: Bool
     var disabled: Bool
     var onChange: ((Bool)->Void)?
-    
-    public init(_ checked: Binding<Bool>,disabled: Bool = false, onChange: ((Bool)->Void)? = nil){
+    var indeterminate: Bool
+    var title: String
+
+
+    public init(_ checked: Binding<Bool>,disabled: Bool = false, onChange: ( (Bool) -> Void)? = nil,
+                indeterminate: Bool = false,
+                title: String = ""){
         self._checked = checked
-        self.onChange = onChange
         self.disabled = disabled
+        self.onChange = onChange
+        self.indeterminate = indeterminate
+        self.title = title
     }
-    
+
     func onCheck(){
         checked.toggle()
         onChange?(checked)
     }
-    
-    public var body: some View{
-        return SwiftUI.Button(action: onCheck) {
-            HStack {
-                if (checked) {
-                    Image(systemName: "checkmark.square.fill")
-                        .resizable()
-                        .foregroundColor(disabled ? Colors.black07 : Colors.primary)
-                        .frame(width: 24, height: 24)
+
+    public var body: some View {
+        HStack(spacing: Spacing.S) {
+            // Checkbox
+            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)
+                        )
+
+                    if checked {
+                        Icon(source: indeterminate ? "navigation_minus" : "ic_checked", size: 20, color: Colors.black01)
+                    }
                 }
-            }.frame(width: 24, height: 24)
-                .overlay(RoundedRectangle(cornerRadius: 4).stroke(Colors.black20,lineWidth: checked ? 0 : 1))
-            .background(Colors.black01)
-                
+            }
+            .buttonStyle(ActiveOpacityButtonStyle(activeOpacity: 0.8))
+            .disabled(disabled)
+
+            // Title
+            if !title.isEmpty {
+                MomoText(title, typography: .descriptionDefaultRegular)
+            }
+        }
+    }
+
+    private var borderColor: Color {
+        if disabled && checked {
+            return theme.colors.background.tonal
+        } else if disabled {
+            return theme.colors.border.disable
+        } else if checked {
+            return theme.colors.primary
+        } else {
+            return theme.colors.text.default
+        }
+    }
+
+    private var backgroundColor: Color {
+        if disabled && checked {
+            return theme.colors.background.tonal
+        } else if checked {
+            return theme.colors.primary
+        } else {
+            return Color.clear
         }
-        .opacity(disabled ? 0.4 : 1)
-        .disabled(disabled)
     }
-    
 }

package/ios/Chip/Chip.swift

@@ -0,0 +1,120 @@
+import SwiftUI
+import Foundation
+
+public struct Chip: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+    public enum ChipSize { case small, large }
+
+    public struct Dimensions {
+        let height: CGFloat
+        let horizontal: CGFloat
+        let iconSize: CGFloat
+        let iconSpacing: CGFloat
+    }
+
+    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?
+    private let iconRight: String?
+    private let selected: Bool
+    private let onClick: () -> Void
+    private let size: ChipSize
+    private let iconLeftTint: Color?
+    private let iconRightTint: Color?
+    private let backgroundColor: Color?
+    private let accessibilityLabel: String?
+
+    public init(
+        label: String? = "Label",
+        iconLeft: String? = nil,
+        iconRight: String? = nil,
+        selected: Bool = false,
+        onClick: @escaping () -> Void = {},
+        size: ChipSize = .large,
+        iconLeftTint: Color? = nil,
+        iconRightTint: Color? = nil,
+        backgroundColor: Color? = nil,
+        accessibilityLabel: String? = nil
+    ) {
+        self.label = label
+        self.iconLeft = iconLeft
+        self.iconRight = iconRight
+        self.selected = selected
+        self.onClick = onClick
+        self.size = size
+        self.iconLeftTint = iconLeftTint
+        self.iconRightTint = iconRightTint
+        self.backgroundColor = backgroundColor
+        self.accessibilityLabel = accessibilityLabel
+    }
+
+    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 = fontScale(dims.height)
+        let horizontal = fontScale(dims.horizontal)
+        let iconSize = fontScale(dims.iconSize)
+        let iconSpacing = fontScale(dims.iconSpacing)
+        let radius = fontScale(Radius.L)
+
+        let bg: Color = {
+            if selected { return theme.colors.background.selected }
+            if let explicit = backgroundColor { return explicit }
+            return Colors.black03
+        }()
+
+        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
+
+        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 iconRight {
+                    Icon(source: iconRight, size: iconSize, color: rightTint)
+                }
+            }
+            .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,40 +3,41 @@ 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 black20 = Color(hex: "08101d")
-    public static let black19 = Color(hex: "0f1c2f")
-    public static let black18 = Color(hex: "1c293d")
-    public static let black17 = Color(hex: "2b3748")
-    public static let black16 = Color(hex: "3a4454")
-    public static let black15 = Color(hex: "475160")
-    public static let black14 = Color(hex: "555e6c")
-    public static let black13 = Color(hex: "636b78")
-    public static let black12 = Color(hex: "6f7682")
-    public static let black11 = Color(hex: "7e8590")
-    public static let black10 = Color(hex: "8c929c")
-    public static let black09 = Color(hex: "9a9fa8")
-    public static let black08 = Color(hex: "a8adb4")
-    public static let black07 = Color(hex: "b5bac0")
-    public static let black06 = Color(hex: "c8cbcf")
-    public static let black05 = Color(hex: "e0e1e4")
-    public static let black04 = Color(hex: "ececee")
-    public static let black03 = Color(hex: "f4f5f6")
-    public static let black02 = Color(hex: "fafbfc")
+    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")
+    public static let black18 = Color(hex: "242424")
+    public static let black17 = Color(hex: "303233")
+    public static let black16 = Color(hex: "404040")
+    public static let black15 = Color(hex: "484848")
+    public static let black14 = Color(hex: "565656")
+    public static let black13 = Color(hex: "646464")
+    public static let black12 = Color(hex: "727272")
+    public static let black11 = Color(hex: "878787")
+    public static let black10 = Color(hex: "a0a0a0")
+    public static let black09 = Color(hex: "b9b9b9")
+    public static let black08 = Color(hex: "c6c6c6")
+    public static let black07 = Color(hex: "cccccc")
+    public static let black06 = Color(hex: "d8d8d8")
+    public static let black05 = Color(hex: "e5e5e5")
+    public static let black04 = Color(hex: "e8e8e8")
+    public static let black03 = Color(hex: "f0f0f0")
+    public static let black02 = Color(hex: "f9f9f9")
     public static let black01 = Color(hex: "ffffff")
 
+
     public static let pink11 = Color(hex: "fef8fc")
     public static let pink10 = Color(hex: "fef4fa")
     public static let pink09 = Color(hex: "fdeaf4")
@@ -48,14 +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
 }