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

package/ios/Stepper/Stepper.swift

@@ -0,0 +1,221 @@
+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: onPress) {
+            ZStack {
+                Circle().fill(theme.colors.background.disable)
+                Icon(source: iconName, size: specs.iconSize, color: iconColor)
+            }
+            .frame(width: specs.buttonSize, height: specs.buttonSize)
+        }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .disabled(disabled)
+    }
+}
+
+private struct StepperNumberView: View {
+    @Environment(\.appTheme) private var theme
+    @Environment(\.momoFontScale) private var fontScale
+
+    @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: fontScale(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)
+        }
+    }
+}

package/ios/Steps/Steps.swift

@@ -0,0 +1,467 @@
+import SwiftUI
+
+// ─── Data model ────────────────────────────────────────────────────────────────
+
+/// A single step rendered inside a ``Steps`` indicator.
+public struct StepItem: Identifiable {
+    public let id = UUID()
+    public let title: String
+    public let description: String?
+    public let error: Bool
+    public let time: String?
+
+    public init(
+        title: String,
+        description: String? = nil,
+        error: Bool = false,
+        time: String? = nil
+    ) {
+        self.title = title
+        self.description = description
+        self.error = error
+        self.time = time
+    }
+}
+
+// ─── Enumerations ──────────────────────────────────────────────────────────────
+
+public enum StepsSize {
+    case small
+    case large
+}
+
+public enum StepsAlign {
+    case left
+    case right
+    case center
+    case stretch
+}
+
+// ─── Internal status ───────────────────────────────────────────────────────────
+
+private enum StepStatus {
+    case incomplete
+    case current
+    case completed
+    case error
+    case disabled
+}
+
+private func resolveStatus(
+    activeIndex: Int,
+    currentIndex: Int,
+    error: Bool,
+    disabled: Bool
+) -> StepStatus {
+    if disabled { return .disabled }
+    if error { return .error }
+    if activeIndex == currentIndex { return .current }
+    if activeIndex > currentIndex { return .completed }
+    return .incomplete
+}
+
+// ─── Color helpers ─────────────────────────────────────────────────────────────
+
+private func resolveIconBgAndBorder(_ status: StepStatus, theme: Theme) -> (bg: Color, border: Color) {
+    switch status {
+    case .current, .completed:
+        return (theme.colors.primary, theme.colors.background.tonal)
+    case .error:
+        return (theme.colors.error.primary, theme.colors.error.container)
+    case .disabled:
+        return (Colors.pink08, Colors.pink10)
+    case .incomplete:
+        return (Colors.black06, theme.colors.border.default)
+    }
+}
+
+private func resolveTitleColor(_ status: StepStatus, theme: Theme) -> Color {
+    switch status {
+    case .current:
+        return theme.colors.primary
+    case .error:
+        return theme.colors.error.primary
+    case .disabled:
+        return theme.colors.text.disable
+    default:
+        return theme.colors.text.default
+    }
+}
+
+// ─── Step bubble ───────────────────────────────────────────────────────────────
+
+private struct StepBubble: View {
+    @Environment(\.appTheme) private var theme
+
+    let index: Int
+    let isActive: Bool
+    let error: Bool
+    let size: StepsSize
+    let status: StepStatus
+    let useNumber: Bool
+    let customIcon: String?
+
+    private var bubbleSize: CGFloat { size == .small ? 16 : 24 }
+    private var innerSize: CGFloat { size == .small ? 12 : 16 }
+    private var dotSize: CGFloat { size == .small ? 6 : 8 }
+
+    var body: some View {
+        let colors = resolveIconBgAndBorder(status, theme: theme)
+        ZStack {
+            Circle()
+                .fill(colors.bg)
+                .overlay(Circle().strokeBorder(colors.border, lineWidth: 2))
+
+            bubbleContent
+        }
+        .frame(width: bubbleSize, height: bubbleSize)
+    }
+
+    @ViewBuilder
+    private var bubbleContent: some View {
+        if useNumber {
+            MomoText(
+                "\(index + 1)",
+                typography: .headerXsSemibold,
+                color: Colors.black01
+            )
+        } else if isActive {
+            if let customIcon = customIcon, !customIcon.isEmpty {
+                Icon(source: customIcon, size: innerSize, color: Colors.black01)
+            } else {
+                Circle()
+                    .fill(Colors.black01)
+                    .frame(width: dotSize, height: dotSize)
+            }
+        } else {
+            Icon(
+                source: error ? "navigation_close" : "notifications_check",
+                size: innerSize,
+                color: Colors.black01
+            )
+        }
+    }
+}
+
+// ─── Horizontal layout ─────────────────────────────────────────────────────────
+
+private struct StepsHorizontal: View {
+    @Environment(\.appTheme) private var theme
+
+    let steps: [StepItem]
+    let activeIndex: Int
+    let size: StepsSize
+    let useNumber: Bool
+    let align: StepsAlign
+    let customIcon: String?
+    let disabled: Bool
+    let onPress: ((StepItem, Int) -> Void)?
+
+    private var completedLine: Color { theme.colors.primary.opacity(0.2) }
+    private var defaultLine: Color { theme.colors.background.default }
+
+    var body: some View {
+        HStack(alignment: .top, spacing: 0) {
+            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+                column(index: index, item: item)
+                    .frame(maxWidth: .infinity)
+            }
+        }
+        .frame(maxWidth: .infinity)
+    }
+
+    @ViewBuilder
+    private func column(index: Int, item: StepItem) -> some View {
+        let status = resolveStatus(
+            activeIndex: activeIndex,
+            currentIndex: index,
+            error: item.error,
+            disabled: disabled
+        )
+        let isActiveOrError = status == .current || status == .error
+        let titleStyle: TypographyStyle = isActiveOrError
+            ? .headerXsSemibold : .descriptionDefaultRegular
+        let descStyle: TypographyStyle = size == .small
+            ? .descriptionXsRegular : .descriptionDefaultRegular
+        let titleColor = resolveTitleColor(status, theme: theme)
+        let subColor = disabled ? theme.colors.text.disable : theme.colors.text.hint
+
+        let colAlignment = horizontalAlignment(for: index)
+        let textAlignment = textAlign(for: index)
+
+        let hideLineLeft = align == .left || (align == .stretch && index == 0)
+        let hideLineRight = align == .right || (align == .stretch && index == steps.count - 1)
+
+        let lineLeft: Color = index == 0
+            ? Color.clear
+            : (activeIndex >= index ? completedLine : defaultLine)
+        let lineRight: Color = index == steps.count - 1
+            ? Color.clear
+            : (activeIndex > index ? completedLine : defaultLine)
+
+        let clickable = status == .completed && onPress != nil && !disabled
+
+        let columnBody = VStack(alignment: colAlignment, spacing: 0) {
+            if let time = item.time, !time.isEmpty {
+                MomoText(time, typography: .descriptionXsRegular, color: subColor)
+                    .multilineTextAlignment(textAlignment)
+                    .frame(maxWidth: .infinity, alignment: frameAlignment(colAlignment))
+            }
+
+            HStack(spacing: 0) {
+                if !hideLineLeft {
+                    lineLeft
+                        .frame(height: 2)
+                        .frame(maxWidth: .infinity)
+                        .clipShape(RoundedCorner(radius: Radius.XS, corners: [.topRight, .bottomRight]))
+                }
+                StepBubble(
+                    index: index,
+                    isActive: activeIndex == index,
+                    error: item.error,
+                    size: size,
+                    status: status,
+                    useNumber: useNumber,
+                    customIcon: customIcon
+                )
+                .padding(.leading, hideLineLeft ? 0 : Spacing.XS)
+                .padding(.trailing, hideLineRight ? 0 : Spacing.XS)
+                .padding(.vertical, Spacing.XS)
+                if !hideLineRight {
+                    lineRight
+                        .frame(height: 2)
+                        .frame(maxWidth: .infinity)
+                        .clipShape(RoundedCorner(radius: Radius.XS, corners: [.topLeft, .bottomLeft]))
+                }
+            }
+            .frame(maxWidth: .infinity)
+
+            if !item.title.isEmpty {
+                MomoText(item.title, typography: titleStyle, color: titleColor)
+                    .multilineTextAlignment(textAlignment)
+                    .frame(maxWidth: .infinity, alignment: frameAlignment(colAlignment))
+                    .padding(.bottom, Spacing.XXS)
+            }
+
+            if let desc = item.description, !desc.isEmpty {
+                MomoText(desc, typography: descStyle, color: subColor)
+                    .multilineTextAlignment(textAlignment)
+                    .frame(maxWidth: .infinity, alignment: frameAlignment(colAlignment))
+            }
+        }
+        .contentShape(Rectangle())
+
+        if clickable {
+            // Mirrors Compose's `activeOpacityClickable` press feedback; non-clickable
+            // steps render with no press interaction at all.
+            SwiftUI.Button(action: { onPress?(item, index) }) {
+                columnBody
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            columnBody
+        }
+    }
+
+    private func horizontalAlignment(for index: Int) -> HorizontalAlignment {
+        switch align {
+        case .left: return .leading
+        case .right: return .trailing
+        case .center: return .center
+        case .stretch:
+            if index == 0 { return .leading }
+            if index == steps.count - 1 { return .trailing }
+            return .center
+        }
+    }
+
+    private func textAlign(for index: Int) -> TextAlignment {
+        switch align {
+        case .left: return .leading
+        case .right: return .trailing
+        case .center: return .center
+        case .stretch:
+            if index == 0 { return .leading }
+            if index == steps.count - 1 { return .trailing }
+            return .center
+        }
+    }
+
+    private func frameAlignment(_ h: HorizontalAlignment) -> Alignment {
+        switch h {
+        case .leading: return .leading
+        case .trailing: return .trailing
+        default: return .center
+        }
+    }
+}
+
+// ─── Vertical layout ───────────────────────────────────────────────────────────
+
+private struct StepsVertical: View {
+    @Environment(\.appTheme) private var theme
+
+    let steps: [StepItem]
+    let activeIndex: Int
+    let size: StepsSize
+    let useNumber: Bool
+    let customIcon: String?
+    let disabled: Bool
+    let onPress: ((StepItem, Int) -> Void)?
+
+    private var completedLine: Color { theme.colors.primary.opacity(0.2) }
+    private var defaultLine: Color { theme.colors.background.default }
+    private var useSmall: Bool { size == .small }
+    private var connectorHeight: CGFloat { useSmall ? 24 : 32 }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            ForEach(Array(steps.enumerated()), id: \.element.id) { index, item in
+                row(index: index, item: item)
+            }
+        }
+        .frame(maxWidth: .infinity)
+    }
+
+    @ViewBuilder
+    private func row(index: Int, item: StepItem) -> some View {
+        let status = resolveStatus(
+            activeIndex: activeIndex,
+            currentIndex: index,
+            error: item.error,
+            disabled: disabled
+        )
+        let isActiveOrError = status == .current || status == .error
+        let isLast = index == steps.count - 1
+
+        let titleStyle: TypographyStyle = isActiveOrError
+            ? (useSmall ? .headerXsSemibold : .headerSSemibold)
+            : (useSmall ? .descriptionDefaultRegular : .bodyDefaultRegular)
+        let descStyle: TypographyStyle = useSmall
+            ? .descriptionXsRegular : .descriptionDefaultRegular
+
+        let titleColor = resolveTitleColor(status, theme: theme)
+        let subColor = disabled ? theme.colors.text.disable : theme.colors.text.hint
+        let lineColor = activeIndex > index ? completedLine : defaultLine
+
+        let clickable = status == .completed && onPress != nil && !disabled
+
+        let rowBody = HStack(alignment: .top, spacing: 0) {
+            VStack(spacing: 0) {
+                StepBubble(
+                    index: index,
+                    isActive: activeIndex == index,
+                    error: item.error,
+                    size: size,
+                    status: status,
+                    useNumber: useNumber,
+                    customIcon: customIcon
+                )
+                if !isLast {
+                    lineColor
+                        .frame(width: 2, height: connectorHeight)
+                        .padding(.vertical, Spacing.XS)
+                }
+            }
+            .padding(.trailing, Spacing.M)
+
+            VStack(alignment: .leading, spacing: 0) {
+                HStack(alignment: .top, spacing: 0) {
+                    MomoText(item.title, typography: titleStyle, color: titleColor)
+                        .lineLimit(2)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.trailing, Spacing.S)
+                    if let time = item.time, !time.isEmpty {
+                        MomoText(time, typography: .descriptionXsRegular, color: subColor)
+                    }
+                }
+                .frame(maxWidth: .infinity)
+
+                if let desc = item.description, !desc.isEmpty {
+                    MomoText(desc, typography: descStyle, color: subColor)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.top, Spacing.XXS)
+                }
+            }
+            .frame(maxWidth: .infinity)
+            .padding(.bottom, isLast ? 0 : Spacing.S)
+        }
+        .frame(maxWidth: .infinity)
+        .contentShape(Rectangle())
+
+        if clickable {
+            // Mirrors Compose's `activeOpacityClickable` press feedback; non-clickable
+            // steps render with no press interaction at all.
+            SwiftUI.Button(action: { onPress?(item, index) }) {
+                rowBody
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            rowBody
+        }
+    }
+}
+
+// ─── Public API ────────────────────────────────────────────────────────────────
+
+/// Steps — guided progress indicator through a sequence of procedural steps.
+///
+/// Mirrors the Compose `Steps` component.
+public struct Steps: View {
+    private let steps: [StepItem]
+    private let activeIndex: Int
+    private let horizontal: Bool
+    private let size: StepsSize
+    private let useNumber: Bool
+    private let align: StepsAlign
+    private let customIcon: String?
+    private let disabled: Bool
+    private let onPress: ((StepItem, Int) -> Void)?
+
+    public init(
+        steps: [StepItem],
+        activeIndex: Int,
+        horizontal: Bool = false,
+        size: StepsSize = .large,
+        useNumber: Bool = false,
+        align: StepsAlign = .center,
+        customIcon: String? = nil,
+        disabled: Bool = false,
+        onPress: ((StepItem, Int) -> Void)? = nil
+    ) {
+        self.steps = steps
+        self.activeIndex = activeIndex
+        self.horizontal = horizontal
+        self.size = size
+        self.useNumber = useNumber
+        self.align = align
+        self.customIcon = customIcon
+        self.disabled = disabled
+        self.onPress = onPress
+    }
+
+    public var body: some View {
+        if horizontal {
+            StepsHorizontal(
+                steps: steps,
+                activeIndex: activeIndex,
+                size: size,
+                useNumber: useNumber,
+                align: align,
+                customIcon: customIcon,
+                disabled: disabled,
+                onPress: onPress
+            )
+        } else {
+            StepsVertical(
+                steps: steps,
+                activeIndex: activeIndex,
+                size: size,
+                useNumber: useNumber,
+                customIcon: customIcon,
+                disabled: disabled,
+                onPress: onPress
+            )
+        }
+    }
+}