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

package/ios/Tooltip/Tooltip.swift

@@ -0,0 +1,486 @@
+import SwiftUI
+
+// MARK: - Types
+
+/// Tooltip placement relative to the anchor element.
+public enum TooltipPlacement {
+    case top
+    case bottom
+    case left
+    case right
+}
+
+/// Cross-axis alignment of the tooltip relative to the anchor.
+public enum TooltipAlign {
+    case start
+    case center
+    case end
+}
+
+/// Describes a single action button displayed in the tooltip.
+public struct TooltipButton {
+    public let title: String?
+    public let icon: String?
+    public let onPress: (() -> Void)?
+
+    public init(
+        title: String? = nil,
+        icon: String? = nil,
+        onPress: (() -> Void)? = nil
+    ) {
+        self.title = title
+        self.icon = icon
+        self.onPress = onPress
+    }
+}
+
+/// State holder for controlling tooltip visibility imperatively.
+/// Mirrors the Compose `TooltipState` / `rememberTooltipState()` pattern.
+public final class TooltipState: ObservableObject {
+    @Published public private(set) var isVisible: Bool = false
+
+    public init() {}
+
+    /// Shows the tooltip.
+    public func show() {
+        isVisible = true
+    }
+
+    /// Hides the tooltip.
+    public func hide() {
+        isVisible = false
+    }
+
+    /// Toggles the tooltip visibility.
+    public func toggle() {
+        isVisible.toggle()
+    }
+}
+
+// MARK: - Constants
+
+private enum TooltipConst {
+    static let offset = Spacing.S          // TOOLTIP_OFFSET
+    static let arrowSize: CGFloat = 6      // ARROW_SIZE
+    static let maxWidth: CGFloat = 300
+    static let cornerRadius = Radius.S
+    static let arrowCornerRadius: CGFloat = 2
+    static let arrowEdgeMargin = Spacing.M
+    static let arrowOverlap: CGFloat = 1
+}
+
+// MARK: - Arrow Shape
+
+/// Triangular arrow pointing away from the anchor in the given placement direction.
+struct TooltipArrowShape: Shape {
+    let placement: TooltipPlacement
+
+    func path(in rect: CGRect) -> Path {
+        let w = rect.width
+        let h = rect.height
+        var path = Path()
+        switch placement {
+        case .top:
+            path.move(to: CGPoint(x: 0, y: 0))
+            path.addLine(to: CGPoint(x: w, y: 0))
+            path.addLine(to: CGPoint(x: w / 2, y: h))
+        case .bottom:
+            path.move(to: CGPoint(x: 0, y: h))
+            path.addLine(to: CGPoint(x: w, y: h))
+            path.addLine(to: CGPoint(x: w / 2, y: 0))
+        case .left:
+            path.move(to: CGPoint(x: 0, y: 0))
+            path.addLine(to: CGPoint(x: 0, y: h))
+            path.addLine(to: CGPoint(x: w, y: h / 2))
+        case .right:
+            path.move(to: CGPoint(x: w, y: 0))
+            path.addLine(to: CGPoint(x: w, y: h))
+            path.addLine(to: CGPoint(x: 0, y: h / 2))
+        }
+        path.closeSubpath()
+        return path
+    }
+}
+
+// MARK: - Anchor bounds preference
+
+private struct TooltipAnchorBoundsKey: PreferenceKey {
+    static var defaultValue: Anchor<CGRect>? = nil
+    static func reduce(value: inout Anchor<CGRect>?, nextValue: () -> Anchor<CGRect>?) {
+        value = nextValue() ?? value
+    }
+}
+
+// MARK: - Tooltip
+
+/// A tooltip component that wraps `content` (the anchor) and shows a positioned
+/// tooltip popup with title, description, close button, and action buttons.
+///
+/// Port of the Compose / React Native `Tooltip` component.
+public struct Tooltip<Content: View>: View {
+    @ObservedObject private var state: TooltipState
+    private let title: String?
+    private let description: String
+    private let buttons: [TooltipButton]
+    private let placement: TooltipPlacement
+    private let align: TooltipAlign
+    private let onVisibleChange: ((Bool) -> Void)?
+    private let onPressClose: (() -> Void)?
+    private let content: Content
+
+    public init(
+        state: TooltipState,
+        title: String? = nil,
+        description: String,
+        buttons: [TooltipButton] = [],
+        placement: TooltipPlacement = .top,
+        align: TooltipAlign = .center,
+        onVisibleChange: ((Bool) -> Void)? = nil,
+        onPressClose: (() -> Void)? = nil,
+        @ViewBuilder content: () -> Content
+    ) {
+        self.state = state
+        self.title = title
+        self.description = description
+        self.buttons = buttons
+        self.placement = placement
+        self.align = align
+        self.onVisibleChange = onVisibleChange
+        self.onPressClose = onPressClose
+        self.content = content()
+    }
+
+    public var body: some View {
+        content
+            .anchorPreference(key: TooltipAnchorBoundsKey.self, value: .bounds) { $0 }
+            .overlayPreferenceValue(TooltipAnchorBoundsKey.self) { anchor in
+                GeometryReader { proxy in
+                    if state.isVisible, let anchor = anchor {
+                        let anchorRect = proxy[anchor]
+                        TooltipPopupContent(
+                            title: title,
+                            description: description,
+                            buttons: buttons,
+                            placement: placement,
+                            align: align,
+                            onPressClose: onPressClose
+                        )
+                        .fixedSize()
+                        .modifier(
+                            TooltipPositionModifier(
+                                anchorRect: anchorRect,
+                                containerSize: proxy.size,
+                                placement: placement,
+                                align: align
+                            )
+                        )
+                    }
+                }
+            }
+            .onChange(of: state.isVisible) { newValue in
+                onVisibleChange?(newValue)
+            }
+    }
+}
+
+// MARK: - Positioning
+
+/// Positions the tooltip (already sized via `.fixedSize()`) relative to the anchor,
+/// mirroring `TooltipPositionProvider.calculatePosition`.
+private struct TooltipPositionModifier: ViewModifier {
+    let anchorRect: CGRect
+    let containerSize: CGSize
+    let placement: TooltipPlacement
+    let align: TooltipAlign
+
+    @State private var popupSize: CGSize = .zero
+
+    private var offsetPx: CGFloat {
+        TooltipConst.offset + TooltipConst.arrowSize
+    }
+
+    func body(content: Content) -> some View {
+        content
+            .background(
+                GeometryReader { p in
+                    Color.clear
+                        .onAppear { popupSize = p.size }
+                        .onChange(of: p.size) { popupSize = $0 }
+                }
+            )
+            .offset(x: originX, y: originY)
+    }
+
+    private var originX: CGFloat {
+        let popW = popupSize.width
+        switch placement {
+        case .top, .bottom:
+            return alignHorizontal(anchorRect.minX, anchorRect.width, popW)
+        case .left:
+            return anchorRect.minX - popW - offsetPx
+        case .right:
+            return anchorRect.maxX + offsetPx
+        }
+    }
+
+    private var originY: CGFloat {
+        let popH = popupSize.height
+        switch placement {
+        case .top:
+            return anchorRect.minY - popH - offsetPx
+        case .bottom:
+            return anchorRect.maxY + offsetPx
+        case .left, .right:
+            return alignVertical(anchorRect.minY, anchorRect.height, popH)
+        }
+    }
+
+    private func alignHorizontal(_ anchorX: CGFloat, _ anchorW: CGFloat, _ popW: CGFloat) -> CGFloat {
+        switch align {
+        case .start: return anchorX
+        case .end: return anchorX + anchorW - popW
+        case .center: return anchorX + (anchorW - popW) / 2
+        }
+    }
+
+    private func alignVertical(_ anchorY: CGFloat, _ anchorH: CGFloat, _ popH: CGFloat) -> CGFloat {
+        switch align {
+        case .start: return anchorY
+        case .end: return anchorY + anchorH - popH
+        case .center: return anchorY + (anchorH - popH) / 2
+        }
+    }
+}
+
+// MARK: - Popup content
+
+private struct TooltipPopupContent: View {
+    let title: String?
+    let description: String?
+    let buttons: [TooltipButton]
+    let placement: TooltipPlacement
+    let align: TooltipAlign
+    let onPressClose: (() -> Void)?
+
+    var body: some View {
+        ZStack {
+            VStack(alignment: .leading, spacing: 0) {
+                HStack(alignment: .top, spacing: 0) {
+                    VStack(alignment: .leading, spacing: 0) {
+                        if let title = title, !title.isEmpty {
+                            MomoText(title, typography: .headerSSemibold, color: Colors.black01)
+                                .lineLimit(1)
+                                .truncationMode(.tail)
+                                .padding(.bottom, Spacing.XS)
+                        }
+                        if let description = description, !description.isEmpty {
+                            MomoText(description, typography: .descriptionDefaultRegular, color: Colors.black01)
+                                .lineLimit(2)
+                                .truncationMode(.tail)
+                        }
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                    if let onPressClose = onPressClose {
+                        Spacer().frame(width: Spacing.M)
+                        SwiftUI.Button(action: onPressClose) {
+                            Icon(source: "navigation_close", size: 20, color: Colors.black01)
+                                .frame(width: 20, height: 20)
+                        }
+                        .buttonStyle(.plain)
+                    }
+                }
+
+                if !buttons.isEmpty {
+                    Spacer().frame(height: Spacing.M)
+                    TooltipButtons(buttons: buttons)
+                        .frame(maxWidth: .infinity, alignment: .trailing)
+                }
+            }
+            .padding(Spacing.M)
+            .frame(maxWidth: TooltipConst.maxWidth, alignment: .leading)
+            .background(Colors.black17)
+            .clipShape(RoundedRectangle(cornerRadius: TooltipConst.cornerRadius))
+        }
+        .overlay(arrow, alignment: arrowAlignment)
+    }
+
+    // MARK: Arrow
+
+    @ViewBuilder
+    private var arrow: some View {
+        let arrowWidth = TooltipConst.arrowSize * 2
+        let arrowHeight = TooltipConst.arrowSize
+        let isVertical = placement == .top || placement == .bottom
+        TooltipArrowShape(placement: placement)
+            .fill(Colors.black17)
+            .frame(
+                width: isVertical ? arrowWidth : arrowHeight,
+                height: isVertical ? arrowHeight : arrowWidth
+            )
+            .offset(x: arrowOffsetX, y: arrowOffsetY)
+    }
+
+    private var arrowAlignment: Alignment {
+        switch placement {
+        case .top:
+            switch align {
+            case .start: return .bottomLeading
+            case .center: return .bottom
+            case .end: return .bottomTrailing
+            }
+        case .bottom:
+            switch align {
+            case .start: return .topLeading
+            case .center: return .top
+            case .end: return .topTrailing
+            }
+        case .left:
+            switch align {
+            case .start: return .topTrailing
+            case .center: return .trailing
+            case .end: return .bottomTrailing
+            }
+        case .right:
+            switch align {
+            case .start: return .topLeading
+            case .center: return .leading
+            case .end: return .bottomLeading
+            }
+        }
+    }
+
+    private var arrowOffsetX: CGFloat {
+        let arrowHeight = TooltipConst.arrowSize
+        switch placement {
+        case .left: return arrowHeight - TooltipConst.arrowOverlap
+        case .right: return -arrowHeight + TooltipConst.arrowOverlap
+        default:
+            switch align {
+            case .start: return TooltipConst.arrowEdgeMargin
+            case .end: return -TooltipConst.arrowEdgeMargin
+            case .center: return 0
+            }
+        }
+    }
+
+    private var arrowOffsetY: CGFloat {
+        let arrowHeight = TooltipConst.arrowSize
+        switch placement {
+        case .top: return arrowHeight - TooltipConst.arrowOverlap
+        case .bottom: return -arrowHeight + TooltipConst.arrowOverlap
+        default:
+            switch align {
+            case .start: return TooltipConst.arrowEdgeMargin
+            case .end: return -TooltipConst.arrowEdgeMargin
+            case .center: return 0
+            }
+        }
+    }
+}
+
+// MARK: - Buttons row
+
+private struct TooltipButtons: View {
+    let buttons: [TooltipButton]
+
+    var body: some View {
+        HStack(spacing: 0) {
+            content
+        }
+    }
+
+    @ViewBuilder
+    private var content: some View {
+        if buttons.count == 1 {
+            TooltipSingleButton(btn: buttons[0])
+        } else if buttons.count == 2 {
+            let primary = buttons[0]
+            let secondary = buttons[1]
+            let bothIcons = primary.icon != nil && secondary.icon != nil
+            if bothIcons {
+                TooltipIconButton(icon: secondary.icon ?? "", onPress: secondary.onPress ?? {})
+                Spacer().frame(width: Spacing.S)
+                TooltipIconButton(icon: primary.icon ?? "", onPress: primary.onPress ?? {})
+            } else {
+                TooltipSecondaryButton(title: secondary.title ?? "", onPress: secondary.onPress ?? {})
+                Spacer().frame(width: Spacing.S)
+                TooltipPrimaryButton(title: primary.title ?? "", onPress: primary.onPress ?? {})
+            }
+        } else {
+            ForEach(Array(buttons.enumerated()), id: \.offset) { index, btn in
+                if index > 0 {
+                    Spacer().frame(width: Spacing.XXS)
+                }
+                TooltipSingleButton(btn: btn)
+            }
+        }
+    }
+}
+
+private func tooltipLimitWithEllipsis(_ value: String, max: Int = 16) -> String {
+    value.count > max ? String(value.prefix(max)) + "…" : value
+}
+
+private struct TooltipSingleButton: View {
+    let btn: TooltipButton
+
+    var body: some View {
+        if let icon = btn.icon {
+            TooltipIconButton(icon: icon, onPress: btn.onPress ?? {})
+        } else {
+            TooltipPrimaryButton(title: btn.title ?? "", onPress: btn.onPress ?? {})
+        }
+    }
+}
+
+private struct TooltipPrimaryButton: View {
+    let title: String
+    let onPress: () -> Void
+
+    var body: some View {
+        Button(
+            title: tooltipLimitWithEllipsis(title),
+            action: onPress,
+            type: .secondary,
+            size: .medium,
+            isFull: false
+        )
+    }
+}
+
+private struct TooltipSecondaryButton: View {
+    let title: String
+    let onPress: () -> Void
+
+    var body: some View {
+        SwiftUI.Button(action: onPress) {
+            MomoText(tooltipLimitWithEllipsis(title), typography: .actionSBold, color: Colors.black01)
+                .lineLimit(1)
+                .truncationMode(.tail)
+                .padding(.horizontal, Spacing.M)
+                .padding(.vertical, Spacing.S)
+        }
+        .buttonStyle(.plain)
+        // Mirrors Compose's `Modifier.weight(1f, fill = false)` on the secondary button:
+        // it yields space to the primary button first under width pressure.
+        .layoutPriority(-1)
+    }
+}
+
+private struct TooltipIconButton: View {
+    @Environment(\.momoFontScale) private var fontScale
+    let icon: String
+    let onPress: () -> Void
+
+    var body: some View {
+        let iconButtonSize = fontScale(36)
+        SwiftUI.Button(action: onPress) {
+            Icon(source: icon, size: 24)
+                .frame(width: iconButtonSize, height: iconButtonSize)
+                .background(Colors.black01)
+                .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
+        }
+        .buttonStyle(.plain)
+    }
+}

package/ios/Typography/FontScale.swift

@@ -0,0 +1,103 @@
+// File: ios/Typography/FontScale.swift
+// Created At: 2026-08-06 10:00:00 +07:00
+// Created By: AI
+// AI Agent: Claude Code
+// Model: claude-opus-5
+
+// AI-GENERATED START: reactive font-scale snapshot injected through the environment
+import SwiftUI
+
+/// Immutable snapshot of the kit's font-scale inputs. The formula is a 1:1 port of Compose's
+/// `scaleSize()` (`const/Typography.kt`): the device-width scale and the OS Dynamic Type scale are
+/// computed independently and the larger one wins.
+public struct FontScale: Equatable {
+    private static let defaultScreenSize: CGFloat = 375
+    private static let maxFontScale: CGFloat = 1.5
+    private static let maxDeviceScale: CGFloat = 5
+
+    public let userScaleRate: CGFloat
+    public let useOSScaleRate: Bool
+    /// OS Dynamic Type factor at the time the snapshot was taken.
+    public let osFontScale: CGFloat
+
+    public init(userScaleRate: CGFloat = 1, useOSScaleRate: Bool = true, osFontScale: CGFloat = 1) {
+        self.userScaleRate = userScaleRate
+        self.useOSScaleRate = useOSScaleRate
+        self.osFontScale = osFontScale
+    }
+
+    /// `callAsFunction` so call sites keep reading like Compose's `scaleSize(16)`.
+    public func callAsFunction(_ size: CGFloat) -> CGFloat {
+        guard useOSScaleRate else { return size * userScaleRate }
+
+        // Device width is read live rather than snapshotted, matching Compose's
+        // getScreenDimensions() read inside scaleSize(), so a rotation or split-view resize counts.
+        let deviceScale = UIScreen.main.bounds.width / Self.defaultScreenSize
+
+        var deviceScaled = size
+        var osScaled = size
+        if deviceScale > 1 {
+            deviceScaled = min(size * deviceScale, size + Self.maxDeviceScale)
+        }
+        if osFontScale > 1 {
+            osScaled = min(size * osFontScale, size * Self.maxFontScale)
+        }
+        return max(deviceScaled, osScaled)
+    }
+
+    /// `.system(size:)` is a fixed-size font — SwiftUI does not Dynamic-Type it — so the scale has to
+    /// be baked into the point size here, and there is no double-scaling to undo.
+    public func font(size: CGFloat, weight: Font.Weight = .regular) -> Font {
+        .system(size: self(size), weight: weight)
+    }
+
+    /// A host-pushed mini-app context wins per field, matching Compose's
+    /// `context?.useOSScaleRate ?: KitFontScale.useOSScaleRate`.
+    public func overriding(userScaleRate: CGFloat?, useOSScaleRate: Bool?) -> FontScale {
+        guard userScaleRate != nil || useOSScaleRate != nil else { return self }
+        return FontScale(
+            userScaleRate: userScaleRate ?? self.userScaleRate,
+            useOSScaleRate: useOSScaleRate ?? self.useOSScaleRate,
+            osFontScale: osFontScale
+        )
+    }
+}
+
+private struct FontScaleKey: EnvironmentKey {
+    /// Computed, never stored: a bare `UIHostingController` root that never got `.momoFontScale()`
+    /// still reads the live store instead of a value frozen at first access.
+    static var defaultValue: FontScale { FontScaleStore.shared.snapshot }
+}
+
+public extension EnvironmentValues {
+    var momoFontScale: FontScale {
+        get { self[FontScaleKey.self] }
+        set { self[FontScaleKey.self] = newValue }
+    }
+}
+
+public extension View {
+    /// Injects a Dynamic-Type-observing font scale and re-renders this subtree on change.
+    /// Use at every `UIHostingController` root that is not inside a `NavigationContainer`.
+    func momoFontScale(_ store: FontScaleStore = .shared, context: MiniAppContext? = nil) -> some View {
+        modifier(MomoFontScaleModifier(store: store, context: context))
+    }
+}
+
+/// `@ObservedObject` is load-bearing, same as `MomoLocalizeModifier`: `@Environment(\.momoFontScale)`
+/// only invalidates when the boxed snapshot changes, which requires *this* body to re-run on publish.
+private struct MomoFontScaleModifier: ViewModifier {
+    @ObservedObject var store: FontScaleStore
+    let context: MiniAppContext?
+
+    func body(content: Content) -> some View {
+        content.environment(
+            \.momoFontScale,
+            store.snapshot.overriding(
+                userScaleRate: context?.userScaleRate,
+                useOSScaleRate: context?.useOSScaleRate
+            )
+        )
+    }
+}
+// AI-GENERATED END: reactive font-scale snapshot injected through the environment

package/ios/Typography/FontScaleStore.swift

@@ -0,0 +1,58 @@
+import SwiftUI
+
+/// App-wide font-scale inputs for the SwiftUI kit, and the single place they publish from.
+/// The host writes `update(...)` at startup (from the cache-backed `FontScaleProvider`) and again
+/// whenever the in-app font-size preference changes; the OS Dynamic Type factor is tracked here.
+/// Mirrors Compose's `KitFontScale` + `ProvideOsFontScale` pair, including its live behaviour —
+/// views re-render on change as long as the subtree got `.momoFontScale()` (`NavigationContainer`
+/// applies it). When `useOSScaleRate` is false the kit applies `userScaleRate` instead of the OS factor.
+public final class FontScaleStore: ObservableObject {
+    public static let shared = FontScaleStore()
+
+    @Published public private(set) var userScaleRate: CGFloat = 1
+    @Published public private(set) var useOSScaleRate: Bool = true
+    @Published public private(set) var osFontScale: CGFloat = FontScaleStore.currentOsFontScale()
+
+    private init() {
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(contentSizeCategoryDidChange),
+            name: UIContentSizeCategory.didChangeNotification,
+            object: nil
+        )
+    }
+
+    public var snapshot: FontScale {
+        FontScale(
+            userScaleRate: userScaleRate,
+            useOSScaleRate: useOSScaleRate,
+            osFontScale: osFontScale
+        )
+    }
+
+    public func update(userScaleRate: CGFloat, useOSScaleRate: Bool) {
+        onMain {
+            // Re-assigning an unchanged value would still publish and invalidate every kit subtree.
+            if self.userScaleRate != userScaleRate { self.userScaleRate = userScaleRate }
+            if self.useOSScaleRate != useOSScaleRate { self.useOSScaleRate = useOSScaleRate }
+        }
+    }
+
+    @objc private func contentSizeCategoryDidChange() {
+        let next = Self.currentOsFontScale()
+        guard next != osFontScale else { return }
+        osFontScale = next
+    }
+
+    /// Same factor Compose's iOS `ProvideOsFontScale` derives from
+    /// `UIFont.preferredFont(forTextStyle: .body).pointSize / 17`, so both iOS surfaces scale alike.
+    static func currentOsFontScale() -> CGFloat {
+        let base = UIFont.systemFont(ofSize: UIFont.labelFontSize)
+        return UIFontMetrics.default.scaledFont(for: base).pointSize / base.pointSize
+    }
+
+    /// Synchronous when already on main — an async hop would defer the change by a frame.
+    private func onMain(_ work: @escaping () -> Void) {
+        if Thread.isMainThread { work() } else { DispatchQueue.main.async(execute: work) }
+    }
+}

package/ios/Typography/KitDesignSystem.swift

@@ -0,0 +1,17 @@
+import Foundation
+
+/// Design-system rollout flag for the SwiftUI kit, mirroring Compose's `KitDesignSystem`.
+/// The kit is sandboxed and can't read the host config, so the host writes `update(_:)` once at
+/// startup from `DesignSystemConfig`. Startup-only and non-reactive, like `FontScaleStore` was
+/// before it gained live updates: there is no SwiftUI navigation container to re-render from.
+public final class KitDesignSystem {
+    public static let shared = KitDesignSystem()
+
+    public private(set) var isWhiteList: Bool = false
+
+    private init() {}
+
+    public func update(isWhiteList: Bool) {
+        self.isWhiteList = isWhiteList
+    }
+}