@momo-kits/native-kits 0.167.1-duo.3-debug → 0.167.1-duo.4

package/ios/Application/Navigation/BottomTab/DuoTabBar.swift

@@ -1,275 +0,0 @@
-//
-//  DuoTabBar.swift
-//  MoMoUIKits
-//
-//  iPhone Duo tab bar, port of RN `BottomTab/DuoTabBar.tsx` (Figma Fold-Design-System MT1/MT2):
-//  a glass rail in the side bar, or a floating glass bar when unfolded portrait.
-//
-
-import SwiftUI
-
-private let itemSize = DuoMetrics.controlSize
-private let iconSize: CGFloat = 28
-private let qrIconSize: CGFloat = 24
-private let railPadding: CGFloat = 6
-private let railGap = Spacing.XXS
-// selection bubble overflows the 48 rail cell by 5 above and below (Figma MT2)
-private let railBubbleWidth: CGFloat = 44
-private let railBubbleHeight: CGFloat = 58
-let duoFloatingTabBarHeight: CGFloat = 62
-private let floatingPadding = Spacing.XS
-private let floatingQrSize: CGFloat = 44
-// floating bar spans 6 of the 8 portrait grid columns, like the content
-private let gridColumns: CGFloat = 8
-private let gridSpan: CGFloat = 6
-private let tabSpring = Animation.interpolatingSpring(mass: 0.8, stiffness: 220, damping: 18)
-
-/// Room tab screens leave for the Duo tab bar, provided by BottomTab to its tab StackScreens.
-struct DuoTabBarInsets: Equatable {
-    /// Floating bar overlays the content: scroll content, footer and FAB keep clear of it.
-    var overlay: CGFloat = 0
-    /// Rail sits at the bottom of the side strip: the header side bar stays above it.
-    var sideBarReserve: CGFloat = 0
-}
-
-private struct DuoTabBarInsetsKey: EnvironmentKey {
-    static let defaultValue = DuoTabBarInsets()
-}
-
-extension EnvironmentValues {
-    var duoTabBarInsets: DuoTabBarInsets {
-        get { self[DuoTabBarInsetsKey.self] }
-        set { self[DuoTabBarInsetsKey.self] = newValue }
-    }
-}
-
-extension ScreenLayout {
-    func duoTabBarInsets(itemCount: Int, hasFloatingButton: Bool) -> DuoTabBarInsets {
-        guard isIPhoneDuo else { return DuoTabBarInsets() }
-        guard sideBar != nil else {
-            return DuoTabBarInsets(overlay: duoFloatingTabBarHeight + Spacing.M)
-        }
-        let count = CGFloat(itemCount)
-        let rail = railPadding * 2 + count * itemSize + max(count - 1, 0) * railGap
-        let qr = hasFloatingButton ? Spacing.M + itemSize : 0
-        return DuoTabBarInsets(sideBarReserve: rail + qr + Spacing.XL)
-    }
-}
-
-/// Glass on iOS 26, a system blur before it (RN GlassView's fallback).
-struct DuoBarMaterial<S: Shape>: ViewModifier {
-    let shape: S
-    var visible: Bool = true
-
-    func body(content: Content) -> some View {
-        content.background(material.allowsHitTesting(false))
-    }
-
-    @ViewBuilder
-    private var material: some View {
-        #if compiler(>=6.2)
-        if #available(iOS 26.0, *) {
-            // glass materializes by toggling its effect, it does not fade with opacity
-            Color.clear
-                .glassEffect(visible ? .regular : .identity, in: shape)
-                .shadow(color: Color.black.opacity(visible ? 0.16 : 0), radius: 16, x: 0, y: 6)
-                .animation(.easeInOut(duration: 0.25), value: visible)
-        } else {
-            blur
-        }
-        #else
-        blur
-        #endif
-    }
-
-    private var blur: some View {
-        shape.fill(.regularMaterial)
-            .shadow(color: Color.black.opacity(0.16), radius: 16, x: 0, y: 6)
-            .opacity(visible ? 1 : 0)
-            .animation(.easeInOut(duration: 0.25), value: visible)
-    }
-}
-
-struct DuoTabBar: View {
-    let items: [BottomTabItem]
-    let floatingButton: BottomTabFloatingButton?
-    let selectedIndex: Int
-    let onTabSelected: (Int) -> Void
-
-    @Environment(\.screenLayout) private var layout
-
-    var body: some View {
-        if let sideBar = layout.sideBar {
-            DuoRailTabBar(sideBar: sideBar, items: items, floatingButton: floatingButton,
-                          selectedIndex: selectedIndex, onTabSelected: onTabSelected)
-        } else {
-            DuoFloatingTabBar(items: items, floatingButton: floatingButton,
-                              selectedIndex: selectedIndex, onTabSelected: onTabSelected)
-        }
-    }
-}
-
-/// Vertical bar anchored to the bottom of the side bar, QR button below it (Figma MT1-C/E).
-private struct DuoRailTabBar: View {
-    let sideBar: SideBarLayout
-    let items: [BottomTabItem]
-    let floatingButton: BottomTabFloatingButton?
-    let selectedIndex: Int
-    let onTabSelected: (Int) -> Void
-
-    @Environment(\.appTheme) private var theme
-
-    private var isRight: Bool { sideBar.edge == .right }
-
-    var body: some View {
-        VStack(spacing: Spacing.M) {
-            ZStack(alignment: .top) {
-                Capsule()
-                    .fill(theme.colors.background.selected)
-                    .frame(width: railBubbleWidth, height: railBubbleHeight)
-                    .offset(y: railPadding - (railBubbleHeight - itemSize) / 2
-                        + CGFloat(selectedIndex) * (itemSize + railGap))
-                    .animation(tabSpring, value: selectedIndex)
-
-                VStack(spacing: railGap) {
-                    ForEach(items.indices, id: \.self) { index in
-                        SwiftUI.Button { onTabSelected(index) } label: {
-                            DuoTabIcon(item: items[index], selected: index == selectedIndex)
-                                .frame(width: itemSize, height: itemSize)
-                                .contentShape(Rectangle())
-                        }
-                        .buttonStyle(.plain)
-                        .accessibilityLabel(items[index].label)
-                    }
-                }
-                .padding(.vertical, railPadding)
-            }
-            .frame(width: itemSize)
-            .modifier(DuoBarMaterial(shape: RoundedRectangle(cornerRadius: Radius.XL)))
-            .accessibilityIdentifier("bottom_tab_bar")
-
-            if let floatingButton {
-                DuoQrButton(data: floatingButton, size: itemSize)
-            }
-        }
-        .padding(isRight ? .leading : .trailing, Spacing.M)
-        .frame(width: sideBar.width, alignment: isRight ? .leading : .trailing)
-        .padding(.bottom, Spacing.XL)
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .bottomTrailing : .bottomLeading)
-        .ignoresSafeArea()
-    }
-}
-
-/// Floating labelled bar for the unfolded portrait display, QR in the middle cell (Figma MT1-M).
-private struct DuoFloatingTabBar: View {
-    let items: [BottomTabItem]
-    let floatingButton: BottomTabFloatingButton?
-    let selectedIndex: Int
-    let onTabSelected: (Int) -> Void
-
-    @Environment(\.screenLayout) private var layout
-    @Environment(\.appTheme) private var theme
-
-    private var barWidth: CGFloat {
-        let columnWidth = (layout.width - 2 * Spacing.M - (gridColumns - 1) * Spacing.M) / gridColumns
-        return columnWidth * gridSpan + (gridSpan - 1) * Spacing.M
-    }
-
-    private var useQr: Bool { floatingButton != nil && items.count % 2 == 0 }
-    private var middle: Int { items.count / 2 }
-    private var cellCount: Int { items.count + (useQr ? 1 : 0) }
-    private var cellWidth: CGFloat { (barWidth - floatingPadding * 2) / CGFloat(max(cellCount, 1)) }
-    private var visualIndex: Int { useQr && selectedIndex >= middle ? selectedIndex + 1 : selectedIndex }
-
-    var body: some View {
-        ZStack(alignment: .leading) {
-            Capsule()
-                .fill(theme.colors.background.selected)
-                .frame(width: cellWidth)
-                .offset(x: CGFloat(visualIndex) * cellWidth)
-                .animation(tabSpring, value: visualIndex)
-
-            HStack(spacing: 0) {
-                ForEach(0..<cellCount, id: \.self) { cell in
-                    if useQr && cell == middle, let floatingButton {
-                        DuoQrButton(data: floatingButton, size: floatingQrSize)
-                            .frame(width: cellWidth)
-                    } else {
-                        let index = useQr && cell > middle ? cell - 1 : cell
-                        tabCell(index)
-                    }
-                }
-            }
-        }
-        .padding(floatingPadding)
-        .frame(width: barWidth, height: duoFloatingTabBarHeight)
-        .modifier(DuoBarMaterial(shape: Capsule()))
-        .accessibilityIdentifier("bottom_tab_bar")
-        .padding(.bottom, layout.insets.bottom + Spacing.M)
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
-        .ignoresSafeArea()
-    }
-
-    private func tabCell(_ index: Int) -> some View {
-        let selected = index == selectedIndex
-        return SwiftUI.Button { onTabSelected(index) } label: {
-            VStack(spacing: Spacing.XXS) {
-                DuoTabIcon(item: items[index], selected: selected)
-                MomoText(
-                    items[index].label,
-                    typography: .labelXsMedium,
-                    color: selected ? theme.colors.primary : theme.colors.text.default,
-                    textAlign: .center,
-                    maxLines: 1
-                )
-            }
-            .frame(width: cellWidth)
-            .frame(maxHeight: .infinity)
-            .contentShape(Rectangle())
-        }
-        .buttonStyle(.plain)
-        .accessibilityLabel(items[index].label)
-    }
-}
-
-private struct DuoTabIcon: View {
-    let item: BottomTabItem
-    let selected: Bool
-
-    @Environment(\.appTheme) private var theme
-
-    private var badgeLabel: String? {
-        guard let label = item.badgeLabel else { return nil }
-        if let n = Int(label), n == 0 { return nil }
-        return label
-    }
-
-    var body: some View {
-        Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.default)
-            .overlay(alignment: .topTrailing) {
-                if let badgeLabel, !badgeLabel.isEmpty {
-                    Badge(label: badgeLabel).offset(x: Spacing.S, y: -Spacing.XS)
-                } else if badgeLabel != nil || item.showDot {
-                    BadgeDot(size: .small)
-                }
-            }
-    }
-}
-
-private struct DuoQrButton: View {
-    let data: BottomTabFloatingButton
-    let size: CGFloat
-
-    @Environment(\.appTheme) private var theme
-
-    var body: some View {
-        SwiftUI.Button(action: data.onPress) {
-            Circle()
-                .fill(theme.colors.primary)
-                .frame(width: size, height: size)
-                .overlay(Icon(source: data.icon, size: qrIconSize, color: Colors.black01))
-        }
-        .buttonStyle(.plain)
-        .accessibilityLabel(data.label)
-    }
-}

package/ios/Application/Navigation/component/DuoScrollGradient.swift

@@ -1,55 +0,0 @@
-//
-//  DuoScrollGradient.swift
-//  MoMoUIKits
-//
-//  Port of RN `DuoScrollGradient` (Components/DuoGlassBackground.tsx): with the iPhone Duo
-//  glass header the content scrolls under the bar, so the header gradient is drawn under it.
-//
-
-import SwiftUI
-
-// extended headers run their gradient this far below the header, as off Duo
-private let extendedGradientExtra: CGFloat = 52
-// scroll distance over which the extended gradient collapses to the header
-private let extendedCollapseDistance: CGFloat = 100
-
-struct DuoScrollGradient: View {
-    let scrollOffset: CGFloat
-    let headerHeight: CGFloat
-    let extended: Bool
-
-    @Environment(\.appTheme) private var theme
-    @Environment(\.screenLayout) private var layout
-
-    private var scroll: CGFloat { max(scrollOffset, 0) }
-
-    private var gradient: LinearGradient {
-        LinearGradient(
-            colors: [theme.colors.gradient, theme.colors.gradient.opacity(0)],
-            startPoint: .top,
-            endPoint: .bottom
-        )
-    }
-
-    var body: some View {
-        Group {
-            if extended {
-                // extended squeezes the whole fade into its box and fades out
-                let progress = min(scroll / extendedCollapseDistance, 1)
-                gradient
-                    .frame(height: headerHeight + extendedGradientExtra * (1 - progress))
-                    .opacity(1 - min(scroll / extendedGradientExtra, 1))
-            } else {
-                // default keeps the off-Duo 375:154 shape, the header clips it, and scrolls away
-                gradient
-                    .frame(height: layout.width * 154 / 375)
-                    .frame(height: headerHeight, alignment: .top)
-                    .clipped()
-                    .offset(y: -scroll)
-            }
-        }
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
-        .ignoresSafeArea()
-        .allowsHitTesting(false)
-    }
-}

package/ios/Application/Navigation/component/SideBar.swift

@@ -1,155 +0,0 @@
-//
-//  SideBar.swift
-//  MoMoUIKits
-//
-//  iPhone Duo: back and toolkit leave the header bar for a column in the side safe area,
-//  as the system bars do. Port of RN `SideBarButton.tsx` + `useSideBarItemStyle`.
-//
-
-import SwiftUI
-
-private let sideBarIconSize: CGFloat = 24
-
-/// Toolkit data when `headerRight` renders the kit toolkit; nil for a custom header right.
-func toolkitHeaderRight(_ headerRight: (() -> any View)?) -> (data: HeaderRightData?, tintColor: Color?)? {
-    guard let view = headerRight?() else { return nil }
-    if let toolkit = view as? HeaderRight { return (toolkit.headerRight, toolkit.tintColor) }
-    if let toolkit = view as? NavigationHeaderRight { return (toolkit.headerRight, toolkit.tintColor) }
-    return nil
-}
-
-/// The back button and toolkit column, placed in window coordinates over the side strip.
-struct HeaderSideBar: View {
-    let sideBar: SideBarLayout
-    let goBack: (() -> Void)?
-    let toolkit: (data: HeaderRightData?, tintColor: Color?)?
-    let headerColor: HeaderColor
-    /// What footer / tab bar / home indicator take from the bottom; the column stays above it.
-    let bottomInset: CGFloat
-
-    @Environment(\.screenLayout) private var layout
-    @State private var columnHeight: CGFloat = 0
-
-    private var isRight: Bool { sideBar.edge == .right }
-
-    private var top: CGFloat {
-        let maxY = layout.height - bottomInset - Spacing.XL - columnHeight
-        return max(min(sideBar.top, maxY), 0)
-    }
-
-    var body: some View {
-        VStack(alignment: isRight ? .leading : .trailing, spacing: Spacing.M) {
-            if let goBack {
-                SideBarButton(
-                    icon: "arrow-back",
-                    tintColor: headerColor.tintIconColor,
-                    accessibilityId: "btn_navigation_back",
-                    action: goBack
-                )
-            } else {
-                // keep the slot so the toolkit does not jump between root and pushed screens
-                Color.clear.frame(width: DuoMetrics.controlSize, height: DuoMetrics.controlSize)
-            }
-            if let toolkit {
-                ToolkitNavigationHeaderRight(
-                    headerRight: toolkit.data,
-                    tintColor: toolkit.tintColor ?? headerColor.tintIconColor,
-                    vertical: true
-                )
-            }
-        }
-        .padding(isRight ? .leading : .trailing, Spacing.M)
-        .frame(width: sideBar.width, alignment: isRight ? .leading : .trailing)
-        .background(
-            GeometryReader { proxy in
-                Color.clear
-                    .onAppear { columnHeight = proxy.size.height }
-                    .onChange(of: proxy.size.height) { columnHeight = $0 }
-            }
-        )
-        .padding(.top, top)
-        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: isRight ? .topTrailing : .topLeading)
-        .ignoresSafeArea()
-    }
-}
-
-/// Dark glass under light icons (banner headers), light glass otherwise.
-private struct SideBarGlass<S: Shape>: ViewModifier {
-    let tintColor: Color?
-    let shape: S
-
-    private var isDark: Bool { tintColor == Colors.black01 || tintColor == .white }
-
-    func body(content: Content) -> some View {
-        if isDark {
-            content
-                .background(shape.fill(Colors.black20.opacity(0.5)))
-                .overlay(shape.stroke(Colors.black01.opacity(0.2), lineWidth: 0.5))
-        } else {
-            content
-                .background(
-                    shape.fill(Colors.black01.opacity(0.85))
-                        .shadow(color: Color.black.opacity(0.12), radius: 4, x: 0, y: 2)
-                )
-                .overlay(shape.stroke(Colors.black20.opacity(0.08), lineWidth: 0.5))
-        }
-    }
-}
-
-/// 48pt glass circle for a single side bar control.
-struct SideBarButton: View {
-    let icon: String
-    var tintColor: Color?
-    var showBadge: Bool = false
-    var disabled: Bool = false
-    var accessibilityId: String?
-    let action: () -> Void
-
-    var body: some View {
-        SwiftUI.Button(action: { if !disabled { action() } }) {
-            Icon(source: icon, size: sideBarIconSize, color: tintColor ?? Colors.black17)
-                .frame(width: DuoMetrics.controlSize, height: DuoMetrics.controlSize)
-                .modifier(SideBarGlass(tintColor: tintColor, shape: Circle()))
-                .overlay(alignment: .topTrailing) {
-                    if showBadge {
-                        BadgeDot(size: .small).offset(x: -Spacing.XXS, y: Spacing.XXS)
-                    }
-                }
-        }
-        .buttonStyle(.plain)
-        .accessibilityIdentifier(accessibilityId ?? "")
-    }
-}
-
-/// 48pt wide glass capsule grouping related controls, one item per 50pt.
-struct SideBarGroup<Content: View>: View {
-    var tintColor: Color?
-    let itemCount: Int
-    @ViewBuilder let content: () -> Content
-
-    var body: some View {
-        VStack(spacing: 0) { content() }
-            .frame(
-                width: DuoMetrics.controlSize,
-                height: itemCount > 1 ? DuoMetrics.itemPitch * CGFloat(itemCount) : DuoMetrics.controlSize
-            )
-            .modifier(SideBarGlass(tintColor: tintColor, shape: RoundedRectangle(cornerRadius: Radius.XL)))
-    }
-}
-
-struct SideBarGroupItem: View {
-    let icon: String
-    var tintColor: Color?
-    let accessibilityId: String
-    let action: () -> Void
-
-    var body: some View {
-        SwiftUI.Button(action: action) {
-            Icon(source: icon, size: sideBarIconSize, color: tintColor ?? Colors.black17)
-                .frame(maxWidth: .infinity, maxHeight: .infinity)
-                .contentShape(Rectangle())
-        }
-        .buttonStyle(.plain)
-        .accessibilityIdentifier(accessibilityId)
-    }
-}

package/ios/Popup/PopupLayout.swift

@@ -1,45 +0,0 @@
-import SwiftUI
-
-// Width of a system alert on the iPhone Duo inner display, in both orientations (RN Popup/utils.ts).
-private let duoPopupMaxWidth: CGFloat = 440
-
-extension ScreenLayout {
-    var isDuoDevice: Bool { isIPhoneDuoDevice(windowSize: CGSize(width: width, height: height)) }
-
-    /// Card width cap; other devices keep the full window width minus the popup's own padding.
-    var popupMaxWidth: CGFloat {
-        isDuoDevice ? min(width - Spacing.XL * 2, duoPopupMaxWidth) : .infinity
-    }
-
-    /// Room left for a popup on iPhone Duo, where landscape is too short for it; nil elsewhere.
-    var popupMaxHeight: CGFloat? {
-        guard isDuoDevice else { return nil }
-        return height - duoTopInset - insets.bottom - Spacing.XL * 2
-    }
-}
-
-/// Scrolls `content` once it is taller than `maxHeight`; otherwise sizes to it.
-struct PopupScrollBody<Content: View>: View {
-    let maxHeight: CGFloat?
-    @ViewBuilder let content: () -> Content
-
-    @State private var contentHeight: CGFloat = 0
-
-    var body: some View {
-        if let maxHeight {
-            ScrollView(.vertical, showsIndicators: false) {
-                content()
-                    .background(
-                        GeometryReader { proxy in
-                            Color.clear
-                                .onAppear { contentHeight = proxy.size.height }
-                                .onChange(of: proxy.size.height) { contentHeight = $0 }
-                        }
-                    )
-            }
-            .frame(height: min(contentHeight, max(maxHeight, 0)))
-        } else {
-            content()
-        }
-    }
-}

package/ios-demo/README.md

@@ -1,120 +0,0 @@
-# MoMoUIKitsDemo
-
-SwiftUI demo browser for `MoMoUIKits`.
-
-The package can optionally host a Compose UIKits screen by receiving a
-`UIViewController` factory from the host app. It does not import the KMP
-`shared` module directly.
-
-SwiftUI mode reuses the full demo screen set from
-`sample/iosApp/iosApp/Demo`, including the sample `HomeView` registry and demo
-screens for all currently available components.
-
-## CocoaPods
-
-In the host app `Podfile`, include both local pods:
-
-```ruby
-pod 'MoMoUIKits', :path => '../momo-native-kits/ios/native-kits.podspec'
-pod 'MoMoUIKitsDemo', :path => '../momo-native-kits/ios-demo'
-```
-
-Adjust the relative paths to match the host app checkout.
-
-## Host App Usage
-
-```swift
-import MoMoUIKitsDemo
-import shared
-
-class UIKitsViewController: BaseComposeAppViewController {
-  override func getViewController() -> UIViewController? {
-    let params = self.application.data as? [String: Any]
-
-    return MoMoUIKitsDemoViewControllerFactory.make(
-      context: MoMoUIKitsDemoContext(
-        appId: params?["appId"] as? String ?? "",
-        appCode: params?["code"] as? String ?? "",
-        appName: params?["name"] as? String,
-        appIcon: params?["icon"] as? String ?? ""
-      ),
-      composeViewController: {
-        UIKitsScreenComposeViewControllerKt.UIKitsScreenComposeViewController(
-          params: params
-        )
-      }
-    )
-  }
-
-  override func viewDidDisappear(_ animated: Bool) {
-    super.viewDidDisappear(animated)
-    composeViewController = nil
-  }
-}
-```
-
-If the host does not pass `composeViewController`, the demo opens directly in
-SwiftUI mode.
-
-## Included SwiftUI Demos
-
-The pod includes the sample demo screens for:
-
-- Animated Header
-- Avatar
-- Badge
-- Baseline View
-- Bottom Tab
-- Button
-- Carousel
-- Checkbox
-- Chip
-- Collapse
-- DateTimePicker
-- Divider
-- Header User
-- Icon Button
-- Image
-- Information
-- Input
-- Input DropDown
-- Input Money
-- Input OTP
-- Input Phone Number
-- Input Search
-- Input TextArea
-- Loader
-- Navigation
-- Pagination
-- Popup Display
-- Popup Notify
-- Popup Promotion
-- Progress Info
-- Radio
-- Rating
-- Skeleton
-- Slider
-- SnackBar
-- Stepper
-- Steps
-- Suggest Action
-- Swipe
-- Switch
-- TabView
-- Tag
-- Theme
-- Title
-- Tooltip
-- Typography
-- Uploader
-
-## Validation Notes
-
-Validated locally with:
-
-```sh
-pod ipc spec ios/MoMoUIKits.podspec
-pod ipc spec ios-demo/MoMoUIKitsDemo.podspec
-pod lib lint ios/MoMoUIKits.podspec --allow-warnings --skip-import-validation
-pod lib lint ios-demo/MoMoUIKitsDemo.podspec --allow-warnings --skip-import-validation --include-podspecs=ios/MoMoUIKits.podspec
-```