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

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/Stepper/Stepper.swift

@@ -0,0 +1,220 @@
+import SwiftUI
+
+// ---------------------------------------------------------------------------
+// Size variant
+// ---------------------------------------------------------------------------
+
+public enum StepperSize {
+    case large
+    case small
+}
+
+private struct StepperSizeSpec {
+    let buttonSize: CGFloat
+    let iconSize: CGFloat
+    let numberMinWidth: CGFloat
+    let numberHeight: CGFloat
+}
+
+private func stepperSizeSpec(_ size: StepperSize) -> StepperSizeSpec {
+    switch size {
+    case .large:
+        return StepperSizeSpec(buttonSize: 36, iconSize: 22, numberMinWidth: 32, numberHeight: 28)
+    case .small:
+        return StepperSizeSpec(buttonSize: 28, iconSize: 18, numberMinWidth: 28, numberHeight: 24)
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Disabled spec — mirrors Compose `disabled: Any` (Bool or per-part array)
+// ---------------------------------------------------------------------------
+
+public struct StepperDisabled {
+    let minus: Bool
+    let plus: Bool
+
+    fileprivate var number: Bool { minus && plus }
+
+    public init(minus: Bool, plus: Bool) {
+        self.minus = minus
+        self.plus = plus
+    }
+
+    /// All parts share the same disabled state.
+    public init(_ all: Bool) {
+        self.minus = all
+        self.plus = all
+    }
+}
+
+extension StepperDisabled: ExpressibleByBooleanLiteral {
+    public init(booleanLiteral value: Bool) {
+        self.init(value)
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Private sub-views
+// ---------------------------------------------------------------------------
+
+private struct StepperButton: View {
+    @Environment(\.appTheme) private var theme
+
+    var sign: String
+    var size: StepperSize
+    var disabled: Bool
+    var onPress: () -> Void
+
+    var body: some View {
+        let specs = stepperSizeSpec(size)
+        let iconColor: Color = disabled ? theme.colors.text.disable : theme.colors.primary
+        let iconName = sign == "-" ? "24_navigation_minus_circle" : "24_navigation_plus_circle"
+
+        SwiftUI.Button(action: { if !disabled { onPress() } }) {
+            ZStack {
+                Circle().fill(theme.colors.background.disable)
+                Icon(source: iconName, size: specs.iconSize, color: iconColor)
+            }
+            .frame(width: specs.buttonSize, height: specs.buttonSize)
+        }
+        .buttonStyle(.plain)
+        .disabled(disabled)
+    }
+}
+
+private struct StepperNumberView: View {
+    @Environment(\.appTheme) private var theme
+
+    @Binding var text: String
+    var size: StepperSize
+    var disabled: Bool
+    var editable: Bool
+
+    var body: some View {
+        let specs = stepperSizeSpec(size)
+        let textColor: Color = disabled ? theme.colors.text.disable : theme.colors.text.default
+        let borderColor: Color = disabled ? theme.colors.border.disable : theme.colors.border.default
+
+        Group {
+            if editable {
+                TextField("", text: $text)
+                    .keyboardType(.numberPad)
+                    .multilineTextAlignment(.center)
+                    .disabled(disabled)
+            } else {
+                MomoText(text, typography: .descriptionDefaultRegular, color: textColor)
+            }
+        }
+        .font(.system(size: scaleSize(12)))
+        .ignoreBoldTextSetting()
+        .foregroundColor(textColor)
+        .frame(minWidth: specs.numberMinWidth)
+        .frame(height: specs.numberHeight)
+        .padding(.horizontal, Spacing.XS)
+        .overlay(
+            RoundedRectangle(cornerRadius: Radius.S)
+                .stroke(borderColor, lineWidth: 1)
+        )
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Public API — MomoStepper
+// ---------------------------------------------------------------------------
+
+/// MomoStepper — quantity +/- control. Layout: [- button] [value] [+ button].
+///
+/// Named `MomoStepper` to avoid shadowing SwiftUI's built-in `Stepper`.
+///
+/// - Parameters:
+///   - value: Binding to the current value. Clamped to `min...max`.
+///   - min: Minimum allowed value (default 0). Minus auto-disables at this bound.
+///   - max: Maximum allowed value (default 100). Plus auto-disables at this bound.
+///   - step: Amount added/subtracted per press (default 1).
+///   - size: Visual size variant (default `.large`).
+///   - disabled: Disable state — `true` for everything, or `StepperDisabled(minus:plus:)`.
+///   - editable: When `true` the number display becomes a keyboard input (default false).
+///   - onValueChange: Callback invoked with the new value on every change.
+public struct MomoStepper: View {
+    @Binding private var value: Int
+    private let min: Int
+    private let max: Int
+    private let step: Int
+    private let size: StepperSize
+    private let disabled: StepperDisabled
+    private let editable: Bool
+    private let onValueChange: (Int) -> Void
+
+    @State private var editingText: String = ""
+
+    public init(
+        value: Binding<Int>,
+        min: Int = 0,
+        max: Int = 100,
+        step: Int = 1,
+        size: StepperSize = .large,
+        disabled: StepperDisabled = false,
+        editable: Bool = false,
+        onValueChange: @escaping (Int) -> Void = { _ in }
+    ) {
+        self._value = value
+        self.min = min
+        self.max = max
+        self.step = step
+        self.size = size
+        self.disabled = disabled
+        self.editable = editable
+        self.onValueChange = onValueChange
+    }
+
+    private func clamp(_ raw: Int) -> Int {
+        Swift.max(min, Swift.min(max, raw))
+    }
+
+    private func applyValue(_ raw: Int) {
+        let parsed = clamp(raw)
+        value = parsed
+        editingText = String(parsed)
+        onValueChange(parsed)
+    }
+
+    public var body: some View {
+        let effectiveMinusDisabled = disabled.minus || value <= min
+        let effectivePlusDisabled = disabled.plus || value >= max
+
+        HStack(spacing: Spacing.S) {
+            StepperButton(
+                sign: "-",
+                size: size,
+                disabled: effectiveMinusDisabled,
+                onPress: { applyValue(value - step) }
+            )
+
+            StepperNumberView(
+                text: Binding(
+                    get: { editable ? editingText : String(value) },
+                    set: { newText in
+                        editingText = newText
+                        let parsed = Int(newText.filter { $0.isNumber }) ?? 0
+                        applyValue(parsed)
+                    }
+                ),
+                size: size,
+                disabled: disabled.number,
+                editable: editable
+            )
+
+            StepperButton(
+                sign: "+",
+                size: size,
+                disabled: effectivePlusDisabled,
+                onPress: { applyValue(value + step) }
+            )
+        }
+        .onAppear {
+            let clamped = clamp(value)
+            if clamped != value { value = clamped }
+            editingText = String(clamped)
+        }
+    }
+}