@momo-kits/native-kits 0.0.1-beta.4 → 0.0.2-alpha.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/ScrollIndicator/ScrollIndicator.swift

@@ -0,0 +1,110 @@
+import Foundation
+import SwiftUI
+
+public struct ScrollViewWithScrollBar<Content: View>: View {
+    let INDICATOR_HEIGHT: CGFloat = 4
+    @State var position = CGPoint(x: 0, y: 2)  //2 is INDICATOR_HEIGHT/2
+    @State var contentSize: CGFloat = 0
+    @State var scrollViewWidth: CGFloat = 0
+    var indicatorWidth: CGFloat
+    var indicatorContainerWidth: CGFloat
+    var indicatorColor: Color
+    var indicatorContainerColor: Color
+    var spacing: CGFloat = 4
+    @ViewBuilder var content: () -> Content
+
+    public init(
+        indicatorWidth: CGFloat = 12, indicatorContainerWidth: CGFloat = 36,
+        indicatorColor: Color = Colors.primary, indicatorContainerColor: Color = Colors.black06,
+        spacing: CGFloat = 4,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.indicatorWidth = indicatorWidth
+        self.indicatorContainerWidth = indicatorContainerWidth
+        self.indicatorColor = indicatorColor
+        self.indicatorContainerColor = indicatorContainerColor
+        self.content = content
+        self.spacing = spacing
+    }
+
+  // MARK: Public
+
+    public var body: some View {
+        return VStack(spacing: spacing) {
+        ScrollView(.horizontal, showsIndicators: false) {
+            HStack {
+            content()
+            }
+            .fixedSize(horizontal: true, vertical: false)
+            .overlay(
+            GeometryReader { proxy in
+                Color.clear
+                .preference(
+                    key: ViewOffsetKey.self,
+                    value: -proxy.frame(in: .named("scroll")).origin.x
+                )
+                .preference(
+                    key: ContentSizeKey.self,
+                    value: proxy.size.width)
+            },
+            alignment: .topLeading
+            )
+            .onPreferenceChange(ContentSizeKey.self) { newContentSize in
+            if newContentSize > 0 {
+                self.contentSize = newContentSize
+                if self.position == CGPoint(x: 0, y: 2) {
+                self.position = CGPoint(x: indicatorWidth / 2, y: INDICATOR_HEIGHT / 2)
+                }
+            }
+            }
+            .onPreferenceChange(ViewOffsetKey.self) { offset in
+            let newPosition =
+                (offset * ((indicatorContainerWidth - indicatorWidth) / (contentSize - scrollViewWidth)))
+                + indicatorWidth / 2
+
+            if !newPosition.isNaN {
+                self.position = CGPoint(x: newPosition, y: INDICATOR_HEIGHT / 2)
+            }
+            }
+        }.background(
+            GeometryReader { proxy in
+            Color.clear.onAppear {
+                self.scrollViewWidth = proxy.size.width
+            }
+            }
+        ).coordinateSpace(name: "scroll")
+
+        HStack(spacing: 0) {
+            HStack(spacing: 0) {}.frame(width: indicatorWidth, height: INDICATOR_HEIGHT)
+            .background(indicatorColor)
+            .cornerRadius(8)
+            .position(self.position)
+        }.frame(width: indicatorContainerWidth, height: INDICATOR_HEIGHT, alignment: .leading)
+            .background(indicatorContainerColor).cornerRadius(8)
+        }
+    }
+}
+
+// MARK: - ViewOffsetKey
+
+struct ViewOffsetKey: PreferenceKey {
+    typealias Value = CGFloat
+
+    static var defaultValue = CGFloat.zero
+
+    static func reduce(value: inout Value, nextValue: () -> Value) {
+        value += nextValue()
+    }
+}
+
+// MARK: - ContentSizeKey
+
+struct ContentSizeKey: PreferenceKey {
+    typealias Value = CGFloat
+
+    static var defaultValue = CGFloat.zero
+
+    static func reduce(value: inout Value, nextValue: () -> Value) {
+        value = nextValue()
+    }
+}

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

package/ios/StatusBarTap/StatusBarTap.h

@@ -0,0 +1,13 @@
+#import <Foundation/Foundation.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// Posts `MoMoStatusBarTap.notificationName` on every status-bar tap.
+/// The swizzle installs automatically at framework load (`+load`) — calling
+/// `install` is a no-op kept for explicit/manual triggering.
+@interface MoMoStatusBarTap : NSObject
+@property (class, nonatomic, readonly) NSNotificationName notificationName;
++ (void)install;
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/StatusBarTap/StatusBarTap.m

@@ -0,0 +1,75 @@
+#import <UIKit/UIKit.h>
+#import <objc/message.h>
+#import <objc/runtime.h>
+#import "StatusBarTap.h"
+
+// Performs the actual swizzle once per process. Safe to call multiple times.
+static void mm_installStatusBarTapSwizzleOnce(void) {
+    static dispatch_once_t onceToken;
+    dispatch_once(&onceToken, ^{
+        Class cls = [UIStatusBarManager class];
+        SEL originalSelector = NSSelectorFromString(@"handleTapAction:");
+        SEL swizzledSelector = NSSelectorFromString(@"mm_handleTapAction:");
+
+        Method originalMethod = class_getInstanceMethod(cls, originalSelector);
+        Method swizzledMethod = class_getInstanceMethod(cls, swizzledSelector);
+        if (!originalMethod || !swizzledMethod) return;
+
+        // Verify the original method matches the (id) -> void shape we expect.
+        // Encoding may include byte offsets (e.g. "v32@0:8@16") so we filter
+        // digits out before comparing.
+        const char *encPtr = method_getTypeEncoding(originalMethod);
+        if (encPtr) {
+            NSMutableString *enc = [NSMutableString string];
+            for (const char *p = encPtr; *p; p++) {
+                if (!(*p >= '0' && *p <= '9')) [enc appendFormat:@"%c", *p];
+            }
+            if (![enc isEqualToString:@"v@:@"]) return;
+        }
+
+        BOOL didAdd = class_addMethod(cls,
+                                      originalSelector,
+                                      method_getImplementation(swizzledMethod),
+                                      method_getTypeEncoding(swizzledMethod));
+        if (didAdd) {
+            class_replaceMethod(cls,
+                                swizzledSelector,
+                                method_getImplementation(originalMethod),
+                                method_getTypeEncoding(originalMethod));
+        } else {
+            method_exchangeImplementations(originalMethod, swizzledMethod);
+        }
+    });
+}
+
+@implementation MoMoStatusBarTap
++ (NSNotificationName)notificationName { return @"statusBarSelected"; }
++ (void)install { mm_installStatusBarTapSwizzleOnce(); }
+@end
+
+// MARK: - Swizzle target on UIStatusBarManager
+// `mm_handleTapAction:` is the replacement IMP. After the add/exchange,
+// this selector points at the original UIKit IMP — calling it inside
+// the body invokes UIKit's real handler so UIScrollView.scrollsToTop
+// and any other side effects continue to work.
+
+@interface UIStatusBarManager (MoMoStatusBarTap)
+@end
+
+@implementation UIStatusBarManager (MoMoStatusBarTap)
+
+// Auto-install at framework load. Commented out so the swizzle stays
+// opt-in via `[MoMoStatusBarTap install]`. Uncomment to revert to
+// auto-installation before main().
+//
+// + (void)load {
+//     mm_installStatusBarTapSwizzleOnce();
+// }
+
+- (void)mm_handleTapAction:(id)action {
+    [self mm_handleTapAction:action];
+    [[NSNotificationCenter defaultCenter] postNotificationName:MoMoStatusBarTap.notificationName
+                                                        object:nil];
+}
+
+@end