@momo-kits/native-kits 0.163.1-beta.3-debug → 0.163.1-beta.5-debug

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/success-primary.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x34",
+          "green": "0xC7",
+          "blue": "0x59",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x34",
+          "green": "0xC7",
+          "blue": "0x59",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/success-secondary.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0xAE",
+          "green": "0xE9",
+          "blue": "0xBD",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0xAE",
+          "green": "0xE9",
+          "blue": "0xBD",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/text-default.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x30",
+          "green": "0x32",
+          "blue": "0x33",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0xFF",
+          "green": "0xFF",
+          "blue": "0xFF",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/text-disable.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0xC6",
+          "green": "0xC6",
+          "blue": "0xC6",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x50",
+          "green": "0x50",
+          "blue": "0x50",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/text-hint.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x72",
+          "green": "0x72",
+          "blue": "0x72",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x72",
+          "green": "0x72",
+          "blue": "0x72",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/ThemeColors/text-secondary.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors": [
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0x48",
+          "green": "0x48",
+          "blue": "0x48",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal"
+    },
+    {
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "0xB0",
+          "green": "0xB0",
+          "blue": "0xB0",
+          "alpha": "1.000"
+        }
+      },
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}

package/ios/Resources/MoMoUIKitsColors.xcassets/Warning.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.086",
+          "green" : "0.549",
+          "red" : "0.980"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.086",
+          "green" : "0.549",
+          "red" : "0.980"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

package/ios/Skeleton/Skeleton.swift

@@ -0,0 +1,99 @@
+import Foundation
+import SwiftUI
+
+/// Native SwiftUI port of the Compose `Skeleton` component.
+///
+/// Fills the available space with a base placeholder color and overlays a
+/// horizontal shimmer gradient that animates left-to-right on an infinite loop.
+///
+/// Mirrors the Compose surface: `Skeleton()` takes no required arguments and
+/// fills its container. The shimmer animation parameters match the Compose
+/// defaults (`durationMillis = 1000`, shimmer band = 60% of container width).
+public struct Skeleton: View {
+    // Matches Compose `DEFAULT_DURATION_MILLIS = 1000`.
+    private let durationMillis: Int
+    // Matches Compose `angleOfAxisY = 0f` (horizontal gradient).
+    private let angleOfAxisY: CGFloat
+
+    public init(
+        durationMillis: Int = 1000,
+        angleOfAxisY: CGFloat = 0
+    ) {
+        self.durationMillis = durationMillis
+        self.angleOfAxisY = angleOfAxisY
+    }
+
+    public var body: some View {
+        GeometryReader { proxy in
+            ShimmerLoading(
+                size: proxy.size,
+                durationMillis: durationMillis,
+                angleOfAxisY: angleOfAxisY
+            )
+        }
+        // Compose base background (`Colors.black_05`).
+        .background(Colors.black05)
+    }
+}
+
+/// Internal shimmer overlay. Reproduces Compose's `Modifier.shimmerLoadingAnimation`:
+/// a linear gradient band (60% of the container width) translated across the
+/// surface on an infinite, restarting, linearly-eased loop.
+private struct ShimmerLoading: View {
+    let size: CGSize
+    let durationMillis: Int
+    let angleOfAxisY: CGFloat
+
+    @State private var phase: CGFloat = 0
+
+    // Matches Compose `SHADOW_BRUSH_PERCENTAGE = 0.6f`.
+    private static let shadowBrushPercentage: CGFloat = 0.6
+
+    // Pre-computed shimmer colors (Colors.black_05, black_03, black_05).
+    private static let shimmerColors: [Color] = [
+        Colors.black05,
+        Colors.black03,
+        Colors.black05,
+    ]
+
+    private var widthOfShadowBrush: CGFloat {
+        (size.width * Self.shadowBrushPercentage).rounded(.towardZero)
+    }
+
+    // Compose animates from 0 to (durationMillis + widthOfShadowBrush). Since the
+    // band is anchored at the animated value, the meaningful travel range spans
+    // from off-screen-left to off-screen-right: -widthOfShadowBrush ... maxWidth.
+    private var animationTarget: CGFloat {
+        size.width + widthOfShadowBrush
+    }
+
+    var body: some View {
+        let startX = phase - widthOfShadowBrush
+        let endX = phase
+
+        Rectangle()
+            .fill(
+                LinearGradient(
+                    gradient: Gradient(colors: Self.shimmerColors),
+                    startPoint: .init(
+                        x: size.width > 0 ? startX / size.width : 0,
+                        y: 0
+                    ),
+                    endPoint: .init(
+                        x: size.width > 0 ? endX / size.width : 0,
+                        y: size.height > 0 ? angleOfAxisY / size.height : 0
+                    )
+                )
+            )
+            .onAppear {
+                guard size.width > 0 else { return }
+                phase = 0
+                withAnimation(
+                    .linear(duration: Double(durationMillis) / 1000.0)
+                        .repeatForever(autoreverses: false)
+                ) {
+                    phase = animationTarget
+                }
+            }
+    }
+}

package/ios/Slider/Slider.swift

@@ -0,0 +1,237 @@
+import SwiftUI
+
+// ── Design constants ─────────────────────────────────────────────────────────
+
+private let THUMB_SIZE: CGFloat   = 20
+private let THUMB_BORDER: CGFloat = 3
+private let TRACK_HEIGHT: CGFloat = 4
+private let LABEL_GAP: CGFloat    = 4   // space between label and thumb top (Spacing.XS)
+
+// ── Pure helpers (mirrors Compose / RN helpers) ──────────────────────────────
+
+private func clampF(_ value: CGFloat, _ minV: CGFloat, _ maxV: CGFloat) -> CGFloat {
+    Swift.min(Swift.max(value, minV), maxV)
+}
+
+/// Converts a raw touch position into a snapped slider value.
+/// Direct port of Compose getValueForPosition().
+private func getValueForPosition(
+    positionInView: CGFloat,
+    containerWidth: CGFloat,
+    thumbWidth: CGFloat,
+    minV: CGFloat,
+    maxV: CGFloat,
+    step: CGFloat
+) -> CGFloat {
+    let availableSpace = containerWidth - thumbWidth
+    if availableSpace <= 0 { return minV }
+    let relStepUnit = step / (maxV - minV)
+    var relPosition = (positionInView - thumbWidth / 2) / availableSpace
+    let relOffset = relPosition.truncatingRemainder(dividingBy: relStepUnit)
+    relPosition -= relOffset
+    if relStepUnit != 0, relOffset / relStepUnit >= 0.5 { relPosition += relStepUnit }
+    let steps = (relPosition / relStepUnit).rounded()
+    return clampF(minV + steps * step, minV, maxV)
+}
+
+/// Direct port of Compose isLowCloser().
+private func isLowCloser(_ downX: CGFloat, _ lowPosition: CGFloat, _ highPosition: CGFloat) -> Bool {
+    if lowPosition == highPosition { return downX < lowPosition }
+    return abs(downX - lowPosition) < abs(downX - highPosition)
+}
+
+private func valueToFraction(_ value: CGFloat, _ minV: CGFloat, _ maxV: CGFloat) -> CGFloat {
+    if maxV == minV { return 0 }
+    return clampF((value - minV) / (maxV - minV), 0, 1)
+}
+
+private func formatLabel(_ value: CGFloat) -> String {
+    if value == value.rounded() {
+        return String(Int(value))
+    }
+    return String(format: "%.1f", value)
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+/// Range slider (or single-thumb when `disableRange` = true), ported from Compose.
+///
+/// SwiftUI ships a built-in `Slider`; this custom type is named `MomoSlider`
+/// (convention, like `MomoText`) to avoid module-wide shadowing.
+public struct MomoSlider: View {
+    @Environment(\.appTheme) private var theme
+
+    private let minV: CGFloat
+    private let maxV: CGFloat
+    private let step: CGFloat
+    private let initLow: CGFloat
+    private let initHigh: CGFloat
+    private let minRange: CGFloat
+    private let disableRange: Bool
+    private let floatingLabel: Bool
+    private let disabled: Bool
+    private let onValueChanged: (CGFloat, CGFloat, Bool) -> Void
+    private let onSliderTouchStart: (CGFloat, CGFloat) -> Void
+    private let onSliderTouchEnd: (CGFloat, CGFloat) -> Void
+
+    @State private var lowValue: CGFloat = 0
+    @State private var highValue: CGFloat = 0
+    @State private var draggingLow: Bool = true
+    @State private var isDragging: Bool = false
+    @State private var didInit: Bool = false
+
+    public init(
+        min: CGFloat,
+        max: CGFloat,
+        step: CGFloat,
+        low: CGFloat? = nil,
+        high: CGFloat? = nil,
+        minRange: CGFloat = 0,
+        disableRange: Bool = false,
+        floatingLabel: Bool = false,
+        disabled: Bool = false,
+        onValueChanged: @escaping (CGFloat, CGFloat, Bool) -> Void = { _, _, _ in },
+        onSliderTouchStart: @escaping (CGFloat, CGFloat) -> Void = { _, _ in },
+        onSliderTouchEnd: @escaping (CGFloat, CGFloat) -> Void = { _, _ in }
+    ) {
+        self.minV = min
+        self.maxV = max
+        self.step = step
+        self.minRange = minRange
+        self.disableRange = disableRange
+        self.floatingLabel = floatingLabel
+        self.disabled = disabled
+        self.onValueChanged = onValueChanged
+        self.onSliderTouchStart = onSliderTouchStart
+        self.onSliderTouchEnd = onSliderTouchEnd
+
+        self.initLow = clampF(low ?? min, min, max)
+        self.initHigh = disableRange ? max : clampF(high ?? max, min, max)
+    }
+
+    private var thumbColor: Color { disabled ? theme.colors.text.disable : theme.colors.primary }
+    private var trackActiveColor: Color { disabled ? theme.colors.text.disable : theme.colors.primary }
+    private var trackInactiveColor: Color { theme.colors.background.default }
+
+    public var body: some View {
+        GeometryReader { geo in
+            let trackWidth = geo.size.width
+            let availableWidth = max(trackWidth - THUMB_SIZE, 0)
+            let topPad: CGFloat = floatingLabel ? (THUMB_SIZE + LABEL_GAP) : 0
+
+            let lowFraction = valueToFraction(lowValue, minV, maxV)
+            let highFraction = valueToFraction(highValue, minV, maxV)
+
+            let activeStartFraction = disableRange ? 0 : lowFraction
+            let activeEndFraction = disableRange ? lowFraction : highFraction
+            let activeStartX = THUMB_SIZE / 2 + availableWidth * activeStartFraction
+            let activeWidth = availableWidth * (activeEndFraction - activeStartFraction)
+
+            ZStack(alignment: .topLeading) {
+                // ── Floating label ────────────────────────────────────────────
+                if floatingLabel && isDragging {
+                    let activeFraction = draggingLow ? lowFraction : highFraction
+                    let activeValue = draggingLow ? lowValue : highValue
+                    MomoText(formatLabel(activeValue), typography: .descriptionXsRegular, color: theme.colors.text.default)
+                        .padding(.horizontal, Spacing.XS)
+                        .padding(.vertical, Spacing.XXS)
+                        .background(Colors.black01)
+                        .clipShape(RoundedRectangle(cornerRadius: Radius.XS))
+                        .offset(x: availableWidth * activeFraction, y: 0)
+                }
+
+                // ── Inactive track (full width) ───────────────────────────────
+                Capsule()
+                    .fill(trackInactiveColor)
+                    .frame(width: max(trackWidth - THUMB_SIZE, 0), height: TRACK_HEIGHT)
+                    .offset(x: THUMB_SIZE / 2, y: topPad + (THUMB_SIZE - TRACK_HEIGHT) / 2)
+
+                // ── Active track (selected range / single value) ──────────────
+                if activeWidth > 0 {
+                    Capsule()
+                        .fill(trackActiveColor)
+                        .frame(width: activeWidth, height: TRACK_HEIGHT)
+                        .offset(x: activeStartX, y: topPad + (THUMB_SIZE - TRACK_HEIGHT) / 2)
+                }
+
+                // ── Low thumb ─────────────────────────────────────────────────
+                thumb
+                    .offset(x: availableWidth * lowFraction, y: topPad)
+
+                // ── High thumb (range mode only) ──────────────────────────────
+                if !disableRange {
+                    thumb
+                        .offset(x: availableWidth * highFraction, y: topPad)
+                }
+            }
+            .frame(width: trackWidth, height: topPad + THUMB_SIZE, alignment: .topLeading)
+            .contentShape(Rectangle())
+            .gesture(dragGesture(trackWidth: trackWidth))
+        }
+        .frame(height: (floatingLabel ? (THUMB_SIZE + LABEL_GAP) : 0) + THUMB_SIZE)
+        .onAppear {
+            if !didInit {
+                lowValue = initLow
+                highValue = initHigh
+                didInit = true
+            }
+        }
+    }
+
+    private var thumb: some View {
+        Circle()
+            .fill(thumbColor)
+            .frame(width: THUMB_SIZE, height: THUMB_SIZE)
+            .overlay(
+                Circle().strokeBorder(theme.colors.background.surface, lineWidth: THUMB_BORDER)
+            )
+    }
+
+    private func dragGesture(trackWidth: CGFloat) -> some Gesture {
+        DragGesture(minimumDistance: 0)
+            .onChanged { gesture in
+                if disabled { return }
+                let touchX = gesture.location.x
+
+                if !isDragging {
+                    // Finger down: pick the closer thumb
+                    let lowCenterX = THUMB_SIZE / 2 +
+                        valueToFraction(lowValue, minV, maxV) * (trackWidth - THUMB_SIZE)
+                    let highCenterX = THUMB_SIZE / 2 +
+                        valueToFraction(highValue, minV, maxV) * (trackWidth - THUMB_SIZE)
+                    draggingLow = disableRange || isLowCloser(touchX, lowCenterX, highCenterX)
+                    isDragging = true
+                    onSliderTouchStart(lowValue, highValue)
+                }
+
+                applyDrag(positionX: touchX, trackWidthPx: trackWidth)
+            }
+            .onEnded { _ in
+                if disabled { return }
+                isDragging = false
+                onSliderTouchEnd(lowValue, highValue)
+            }
+    }
+
+    private func applyDrag(positionX: CGFloat, trackWidthPx: CGFloat) {
+        let snapped = getValueForPosition(
+            positionInView: positionX,
+            containerWidth: trackWidthPx,
+            thumbWidth: THUMB_SIZE,
+            minV: minV, maxV: maxV, step: step
+        )
+        if draggingLow {
+            let newLow = clampF(snapped, minV, highValue - minRange)
+            if newLow != lowValue {
+                lowValue = newLow
+                onValueChanged(newLow, highValue, true)
+            }
+        } else {
+            let newHigh = clampF(snapped, lowValue + minRange, maxV)
+            if newHigh != highValue {
+                highValue = newHigh
+                onValueChanged(lowValue, newHigh, true)
+            }
+        }
+    }
+}