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

package/ios/Button/Button.swift

@@ -1,15 +1,16 @@
-
 import Foundation
+import Lottie
 import SwiftUI
 
 // MARK: - ButtonType
 
 public enum ButtonType {
     case primary
-    case danger
-    case tonal
     case secondary
+    case tonal
     case outline
+    case danger
+    case text
     case disabled
 }
 
@@ -21,111 +22,258 @@ public enum ButtonSize {
     case small
 }
 
-// MARK: - Button
+public struct ButtonStyleData {
+    let background: Color
+    let content: Color
+    let border: Color?
+    let borderWidth: CGFloat
+}
+
+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 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 theme.colors.text.disable.opacity(loading ? 0.75 : 1)
+        case .primary: return Colors.black01
+        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 theme.colors.primary
+        }
+    }
+
+    var borderColor: Color? {
+        borderColor(theme: defaultTheme)
+    }
+
+    func borderColor(theme: Theme) -> Color? {
+        switch self {
+        case .outline: return theme.colors.primary
+        case .secondary: return theme.colors.border.default
+        default: return nil
+        }
+    }
+
+    var borderWidth: CGFloat {
+        switch self {
+        case .outline: return 1
+        case .secondary: return 1
+        default: return 0
+        }
+    }
+}
+
+extension ButtonSize {
+    var height: CGFloat {
+        switch self {
+        case .large: return 48
+        case .medium: return 36
+        case .small: return 28
+        }
+    }
+
+    var padding: CGFloat {
+        switch self {
+        case .large: return Spacing.L
+        case .medium: return Spacing.M
+        case .small: return Spacing.S
+        }
+    }
+
+    var radius: CGFloat {
+        Radius.S
+    }
+
+    var iconSize: CGFloat {
+        switch self {
+        case .large: return 24
+        case .medium, .small: return 16
+        }
+    }
+
+    var iconSpacing: CGFloat {
+        switch self {
+        case .small: return Spacing.XS
+        case .medium, .large: return Spacing.S
+        }
+    }
+
+    var typographyStyle: TypographyStyle {
+        switch self {
+        case .large: return .actionDefaultBold
+        case .medium: return .actionSBold
+        case .small: return .actionXsBold
+        }
+    }
+}
 
 public struct Button: View {
-    // MARK: Lifecycle
+    @Environment(\.appTheme) private var theme
+    var title: String
+    var action: () -> Void
+    var type: ButtonType
+    var size: ButtonSize
+    var iconLeft: String
+    var iconRight: String
+    var isFull: Bool
+    var loading: Bool
+    var useTintColor: Bool
 
-    public init(title: String = "", action: @escaping () -> Void, type: ButtonType = .primary, size: ButtonSize = .large, iconLeft: AnyView? = nil, iconRight: AnyView? = nil) {
+    public init(
+        title: String = "Button",
+        action: @escaping () -> Void,
+        type: ButtonType = .primary,
+        size: ButtonSize = .large,
+        iconLeft: String = "",
+        iconRight: String = "",
+        isFull: Bool = true,
+        loading: Bool = false,
+        useTintColor: Bool = true
+    ) {
         self.title = title
         self.action = action
         self.type = type
         self.size = size
         self.iconLeft = iconLeft
         self.iconRight = iconRight
+        self.isFull = isFull
+        self.loading = loading
+        self.useTintColor = useTintColor
     }
 
-    // MARK: Public
+    private func shouldLoadingOnLeft(_ left: String, _ right: String) -> Bool {
+        let hasLeft = !left.isEmpty
+        let hasRight = !right.isEmpty
+
+        switch (hasLeft, hasRight) {
+        case (false, false): return true
+        case (true, false): return true
+        case (false, true): return false
+        case (true, true): return false
+        }
+    }
 
     public var body: some View {
-        SwiftUI.Button(action: action) {
-            HStack {
-                iconLeft
-                renderTitle(title: title, type: type, size: size)
-                iconRight
+        let loadingOnLeft = shouldLoadingOnLeft(iconLeft, iconRight)
+        let isEnabled = type != .disabled && !loading
+
+        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 isEnabled {
+                action()
             }
-            .buttonSize(size)
-            .buttonType(type)
-        }.disabled(type == .disabled)
+        }) {
+            HStack(spacing: size.iconSpacing) {
+                renderIcon(icon: iconLeft, forceLoading: loading && loadingOnLeft, textColor: fg)
+
+                MomoText(title, typography: size.typographyStyle, color: fg)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
+
+                renderIcon(icon: iconRight, forceLoading: loading && !loadingOnLeft, textColor: fg)
+            }
+            .frame(maxWidth: isFull ? .infinity : nil)
+            .padding(.horizontal, size.padding)
+            .frame(height: size.height)
+        }
+        .buttonStyle(ButtonPressFeedbackStyle(
+            isEnabled: isEnabled,
+            background: bg,
+            border: border,
+            borderWidth: borderWidth,
+            radius: size.radius,
+            height: size.height,
+            isFull: isFull
+        ))
+        .disabled(!isEnabled)
     }
 
-    // MARK: Internal
+    /// Mirrors Kotlin `RenderIcon`: the loader replaces the icon slot entirely, and
+    /// `useTintColor == false` leaves the icon at its own colors.
+    @ViewBuilder
+    private func renderIcon(icon: String, forceLoading: Bool, textColor: Color) -> some View {
+        let color: Color? = useTintColor ? textColor : nil
 
-    var title: String
-    var action: () -> Void = {}
-    var type: ButtonType = .primary
-    var size: ButtonSize = .large
-    var iconLeft: AnyView?
-    var iconRight: AnyView?
-
-    func renderTitle(title: String, type: ButtonType, size: ButtonSize) -> Text {
-        switch size {
-        case .large:
-            return Text(title).font(.system(size: 16, weight: Font.Weight.bold))
-        case .medium:
-            return Text(title).font(.system(size: 14, weight: Font.Weight.bold))
-        case .small:
-            return Text(title).font(.system(size: 12, weight: Font.Weight.bold))
+        if forceLoading {
+            LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                .frame(width: size.iconSize, height: size.iconSize)
+                .colorMultiply(color ?? Colors.black01)
+        } else if !icon.isEmpty {
+            Icon(source: icon, size: size.iconSize, color: color)
         }
     }
 }
 
-private extension View {
-    func buttonType(_ type: ButtonType) -> some View {
-        switch type {
-        case .primary:
-            return AnyView(self
-                .background(Colors.primary)
-                .foregroundColor(Colors.black01)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.S)))
-        case .danger:
-            return AnyView(self
-                .background(Colors.error)
-                .foregroundColor(Colors.black01)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.S)))
-        case .tonal:
-            return AnyView(self
-                .background(Colors.primaryLight)
-                .foregroundColor(Colors.primary)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.S)))
-        case .secondary:
-            return AnyView(self
-                .background(Colors.card)
-                .foregroundColor(Colors.text)
-                .cornerRadius(8)
-                .overlay(RoundedRectangle(cornerRadius: Radius.S).stroke(Colors.black06, lineWidth: 1))
-                .padding(2)
-            )
-        case .outline:
-            return AnyView(self
-                .background(Colors.card)
-                .foregroundColor(Colors.primary)
-                .cornerRadius(8)
-                .overlay(RoundedRectangle(cornerRadius: Radius.S).stroke(Colors.primary, lineWidth: 1))
-                .padding(2)
+/// Mirrors Compose's press feedback: the background shrinks via an animated
+/// horizontal inset while the content fades, rather than a plain opacity dim on
+/// the whole button (matching `animatedPadding`/`alpha` in Button.kt).
+private struct ButtonPressFeedbackStyle: ButtonStyle {
+    let isEnabled: Bool
+    let background: Color
+    let border: Color?
+    let borderWidth: CGFloat
+    let radius: CGFloat
+    let height: CGFloat
+    let isFull: Bool
+
+    func makeBody(configuration: Configuration) -> some View {
+        let pressed = configuration.isPressed && isEnabled
+
+        configuration.label
+            .modifier(HugContentOnLegacyOS(isFull: isFull))
+            .opacity(pressed ? 0.5 : 1)
+            .background(
+                RoundedRectangle(cornerRadius: radius)
+                    .fill(background)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: radius)
+                            .strokeBorder(border ?? .clear, lineWidth: border != nil ? borderWidth : 0)
+                    )
+                    .padding(.horizontal, pressed ? 2 : 0)
             )
-        case .disabled:
-            return AnyView(self
-                .background(Colors.black05)
-                .foregroundColor(Colors.black06)
-                .clipShape(RoundedRectangle(cornerRadius: Radius.S)))
-        }
+            .frame(height: height)
+            .clipShape(RoundedRectangle(cornerRadius: radius))
+            .animation(.easeInOut(duration: 0.1), value: pressed)
     }
+}
+
+/// `ButtonStyleConfiguration.Label` is greedy on iOS 16 and earlier — it accepts
+/// the full proposed width, so the background drawn in `makeBody` stretches past
+/// the content even when `isFull == false`. iOS 17 fixed the label to hug its
+/// content, so only legacy OSes need the `fixedSize` clamp (kept off on 17+ to
+/// preserve tail truncation of long titles).
+private struct HugContentOnLegacyOS: ViewModifier {
+    let isFull: Bool
 
-    func buttonSize(_ size: ButtonSize) -> some View {
-        switch size {
-        case .large:
-            return self
-                .frame(maxWidth: .infinity, minHeight: 48, maxHeight: 48)
-                .padding([.leading, .trailing], Spacing.XS)
-        case .medium:
-            return self
-                .frame(minWidth: 80, maxWidth: 96, minHeight: 36, maxHeight: 36)
-                .padding([.leading, .trailing], Spacing.XS)
-        case .small:
-            return self
-                .frame(minWidth: 56, maxWidth: 76, minHeight: 28, maxHeight: 28)
-                .padding([.leading, .trailing], Spacing.XS)
+    func body(content: Content) -> some View {
+        if #available(iOS 17.0, *) {
+            content
+        } else {
+            content.fixedSize(horizontal: !isFull, vertical: false)
         }
     }
 }

package/ios/CalculatorKeyboard/CalculatorKeyboard.swift

@@ -0,0 +1,126 @@
+
+import Foundation
+import SwiftUI
+
+// MARK: - CalculatorKeyboard
+
+
+extension String {
+    var isNumber: Bool {
+        let digitsCharacters = CharacterSet(charactersIn: "0123456789")
+        return CharacterSet(charactersIn: self).isSubset(of: digitsCharacters)
+    }
+}
+
+
+public struct CalculatorKeyboard: View {
+    // MARK: Lifecycle
+    @Binding var value: String
+    @State var tempValue: String = ""
+    
+    public init(_ value: Binding<String>) {
+        self._value = value
+    }
+    
+    func onPressBack(){
+        if (value.count > 0 ){
+            value.removeLast()
+        }
+        
+    }
+    
+    func onPressClear(key: String){
+        value = ""
+        tempValue = ""
+    }
+    
+    func onPressEqual(key: String){
+        if (tempValue == "") {
+            return
+        }
+        if (tempValue.last?.isNumber == false){
+            tempValue.removeLast()
+        }
+        let expression = NSExpression(format: tempValue)
+        
+        value = String(expression.expressionValue(with: nil, context: nil) as! Int)
+        if (Int(value) ?? 0 < 0){
+            value = ""
+        }
+    }
+    
+    func onPressKey(key:String){
+        if (tempValue.last?.isNumber == false){
+            if (key.isNumber == false){
+                return
+            }
+        }
+        var convertedKey = key
+        if (key == "x") {convertedKey = "*"}
+        if (key == "÷") {convertedKey = "/"}
+        if (value == "" && (key == "0" || key == "000" || key.isNumber == false)) {
+            return
+        }
+        else {
+            value.append(key)
+            tempValue.append(convertedKey)
+        }
+    }
+    
+    // MARK: Public
+    
+    public var body: some View {
+        return GeometryReader { geo in
+            VStack {
+                HStack {
+                    KeyboardButton("AC", action: self.onPressClear, color: Colors.pink07, textColor: Colors.black01)
+                    KeyboardButton("÷", action: self.onPressKey, color: Colors.pink07, textColor: Colors.black01)
+                    KeyboardButton("x", action: self.onPressKey, color: Colors.pink07, textColor: Colors.black01)
+                    
+                    SwiftUI.Button(action: onPressBack) {
+                        HStack {
+                            Image(
+                                systemName: "delete.backward"
+                            ).foregroundColor(Colors.black01)
+                        }.frame(maxWidth: .infinity, minHeight: 48)
+                            .background(Colors.pink07)
+                            .foregroundColor(Colors.black01)
+                            .clipShape(RoundedRectangle(cornerRadius: 8))
+                    }
+                }
+                
+                HStack {
+                    KeyboardButton("7", action: self.onPressKey)
+                    KeyboardButton("8", action: self.onPressKey)
+                    KeyboardButton("9", action: self.onPressKey)
+                    KeyboardButton("-", action: self.onPressKey, color: Colors.pink07, textColor: Colors.black01)
+                }
+                
+                HStack {
+                    KeyboardButton("4", action: self.onPressKey)
+                    KeyboardButton("5", action: self.onPressKey)
+                    KeyboardButton("6", action: self.onPressKey)
+                    KeyboardButton("+", action: self.onPressKey, color: Colors.pink07, textColor: Colors.black01)
+                }
+                
+                HStack{
+                    VStack{
+                        HStack {
+                            KeyboardButton("1", action: self.onPressKey)
+                            KeyboardButton("2", action: self.onPressKey)
+                            KeyboardButton("3", action: self.onPressKey)
+                        }
+                        
+                        HStack{
+                            KeyboardButton("000", action: self.onPressKey)
+                            KeyboardButton("0", action: self.onPressKey, width: CGFloat(geo.size.width * 0.25 - 5))
+                        }
+                    }
+                    
+                    KeyboardButton("=", action: self.onPressEqual, width: CGFloat(geo.size.width * 0.25 - 5), height: 102, color: Colors.primary, textColor: Colors.black01)
+                    
+                }
+            }.background(Colors.background)
+        }
+    }
+}

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()
+    }
+}