@momo-kits/native-kits 0.168.1-beta.24-debug → 0.168.1-beta.25-debug

package/ios/Navigation/BottomTab/DuoTabBar.swift

@@ -20,12 +20,11 @@ private let floatingHeight = DuoMetrics.floatingTabBarHeight
 private let floatingPadding = Spacing.XS
 // the system bar sizes its pill to the tabs instead of stretching it across the display
 private let floatingItemWidth: CGFloat = 80
-// while pressed the selection bubble grows into a lens past the pill's edges
-private let lensScaleX: CGFloat = 1.2
-private let lensScaleY: CGFloat = 1.3
+// the rail's badge stays inside the capsule: its end sits XXS off the cell's end edge
+private let railBadgeMaxWidth = itemSize - Spacing.XXS * 2
+private let railBadgeEndOffset = (itemSize - iconSize) / 2 - Spacing.XXS
 // Figma Home-2026 tab bar "Selection": brand pink at 8%
 private let selectionTintOpacity: Double = 0x14 / 255
-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 {
@@ -91,16 +90,20 @@ struct DuoTabBar: View {
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
     var compression = DuoBarCompression()
+    var onTabLongPress: ((Int) -> Void)?
+    /// A tick per tab the lens enters while dragged.
+    var onTick: () -> 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, compression: compression)
+                          selectedIndex: selectedIndex, onTabSelected: onTabSelected, compression: compression,
+                          onTabLongPress: onTabLongPress, onTick: onTick)
         } else {
-            DuoFloatingTabBar(items: items, floatingButton: floatingButton,
-                              selectedIndex: selectedIndex, onTabSelected: onTabSelected)
+            DuoFloatingTabBar(items: items, floatingButton: floatingButton, selectedIndex: selectedIndex,
+                              onTabSelected: onTabSelected, onTabLongPress: onTabLongPress, onTick: onTick)
         }
     }
 }
@@ -115,8 +118,11 @@ private struct DuoRailTabBar: View {
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
     let compression: DuoBarCompression
+    let onTabLongPress: ((Int) -> Void)?
+    let onTick: () -> Void
 
-    @State private var pressedIndex: Int?
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+    @StateObject private var selection = DuoLiquidSelection()
 
     private var isRight: Bool { sideBar.edge == .right }
 
@@ -124,11 +130,11 @@ private struct DuoRailTabBar: View {
         VStack(spacing: Spacing.M) {
             if compression.tabBarCompressed, items.indices.contains(selectedIndex) {
                 SwiftUI.Button(action: compression.expandTabBar) {
-                    DuoTabIcon(item: items[selectedIndex], selected: true)
+                    DuoTabIcon(item: items[selectedIndex], selected: true, badgeMaxWidth: railBadgeMaxWidth, inRail: true)
                         .frame(width: itemSize, height: itemSize)
                         .contentShape(Circle())
                 }
-                .buttonStyle(.plain)
+                .buttonStyle(DuoPressLiftStyle())
                 .modifier(DuoBarMaterial(shape: Circle()))
                 .accessibilityLabel(items[selectedIndex].label)
                 .accessibilityIdentifier("bottom_tab_bar")
@@ -147,35 +153,51 @@ private struct DuoRailTabBar: View {
         .ignoresSafeArea()
     }
 
-    /// Column of icon-only tab items with the sliding selection bubble.
+    private func select(_ index: Int) {
+        onTabSelected(index)
+        compression.onTabSelected()
+    }
+
+    /// Column of icon-only tab items with the sliding selection lens.
     private var rail: some View {
-        ZStack(alignment: .top) {
-            DuoSelectionMaterial(lens: pressedIndex != nil)
+        let selection = configured()
+        let lens = selection.lensScale
+        return ZStack(alignment: .top) {
+            DuoSelectionMaterial()
                 .frame(width: railBubbleWidth, height: railBubbleHeight)
-                .offset(y: railPadding - (railBubbleHeight - itemSize) / 2
-                    + CGFloat(pressedIndex ?? selectedIndex) * (itemSize + railGap))
-                .animation(tabSpring, value: selectedIndex)
-                .animation(tabSpring, value: pressedIndex)
+                .scaleEffect(x: lens.x * lens.across, y: lens.y * lens.along)
+                .offset(y: railPadding - (railBubbleHeight - itemSize) / 2 + selection.offset)
 
             VStack(spacing: railGap) {
                 ForEach(items.indices, id: \.self) { index in
-                    SwiftUI.Button {
-                        onTabSelected(index)
-                        compression.onTabSelected()
-                    } label: {
-                        DuoTabIcon(item: items[index], selected: index == selectedIndex)
+                    DuoLiquidTab(selection: selection, index: index, label: items[index].label,
+                                 selected: index == selectedIndex, onSelect: { select(index) }) { active in
+                        DuoTabIcon(item: items[index], selected: active, badgeMaxWidth: railBadgeMaxWidth, inRail: true)
                             .frame(width: itemSize, height: itemSize)
-                            .contentShape(Rectangle())
                     }
-                    .buttonStyle(DuoLensPressStyle(index: index, pressedIndex: $pressedIndex))
-                    .accessibilityLabel(items[index].label)
                 }
             }
             .padding(.vertical, railPadding)
         }
         .frame(width: itemSize)
+        .modifier(DuoLiquidInput(selection: selection, space: "DuoRail"))
         .modifier(DuoBarMaterial(shape: Capsule()))
+        .scaleEffect(selection.barScale)
         .accessibilityIdentifier("bottom_tab_bar")
+        .onAppear { selection.sync(index: selectedIndex) }
+        .onChange(of: selectedIndex) { selection.sync(index: $0) }
+    }
+
+    private func configured() -> DuoLiquidSelection {
+        selection.axis = .y
+        selection.count = items.count
+        selection.pitch = itemSize + railGap
+        selection.firstCenter = railPadding + itemSize / 2
+        selection.reduceMotion = reduceMotion
+        selection.onSelect = select
+        selection.onLongPress = onTabLongPress
+        selection.onTick = onTick
+        return selection
     }
 }
 
@@ -185,10 +207,13 @@ private struct DuoFloatingTabBar: View {
     let floatingButton: BottomTabFloatingButton?
     let selectedIndex: Int
     let onTabSelected: (Int) -> Void
+    let onTabLongPress: ((Int) -> Void)?
+    let onTick: () -> Void
 
     @Environment(\.screenLayout) private var layout
     @Environment(\.appTheme) private var theme
-    @State private var pressedIndex: Int?
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
+    @StateObject private var selection = DuoLiquidSelection()
 
     private var barWidth: CGFloat {
         let margins = layout.insets.leading + layout.insets.trailing + 2 * DuoMetrics.floatingTabBarMargin
@@ -213,82 +238,139 @@ private struct DuoFloatingTabBar: View {
     }
 
     private var bar: some View {
-        ZStack(alignment: .leading) {
-            DuoSelectionMaterial(lens: pressedIndex != nil)
+        let selection = configured()
+        let lens = selection.lensScale
+        return ZStack(alignment: .leading) {
+            DuoSelectionMaterial()
                 .frame(width: cellWidth)
-                .offset(x: CGFloat(pressedIndex ?? selectedIndex) * cellWidth)
-                .animation(tabSpring, value: selectedIndex)
-                .animation(tabSpring, value: pressedIndex)
+                .scaleEffect(x: lens.x * lens.along, y: lens.y * lens.across)
+                .offset(x: selection.offset)
 
             HStack(spacing: 0) {
                 ForEach(items.indices, id: \.self) { index in
-                    tabCell(index)
+                    DuoLiquidTab(selection: selection, index: index, label: items[index].label,
+                                 selected: index == selectedIndex, onSelect: { onTabSelected(index) }) { active in
+                        tabCell(index, active: active)
+                    }
                 }
             }
         }
+        .modifier(DuoLiquidInput(selection: selection, space: "DuoFloatingBar"))
         .padding(floatingPadding)
         .frame(width: barWidth, height: floatingHeight)
         .modifier(DuoBarMaterial(shape: Capsule()))
+        .scaleEffect(selection.barScale)
         .accessibilityIdentifier("bottom_tab_bar")
+        .onAppear { selection.sync(index: selectedIndex) }
+        .onChange(of: selectedIndex) { selection.sync(index: $0) }
+        .onChange(of: cellWidth) { _ in selection.sync(index: selectedIndex) }
     }
 
-    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.hint,
-                    textAlign: .center,
-                    maxLines: 1
-                )
-                // like the system tab bar the label keeps its design size; a constant snapshot, nothing to observe
-                .environment(\.momoFontScale, FontScale(userScaleRate: 1, useOSScaleRate: false))
-            }
-            .frame(width: cellWidth)
-            .frame(maxHeight: .infinity)
+    private func configured() -> DuoLiquidSelection {
+        selection.axis = .x
+        selection.count = items.count
+        selection.pitch = cellWidth
+        selection.firstCenter = cellWidth / 2
+        selection.reduceMotion = reduceMotion
+        selection.onSelect = onTabSelected
+        selection.onLongPress = onTabLongPress
+        selection.onTick = onTick
+        return selection
+    }
+
+    private func tabCell(_ index: Int, active: Bool) -> some View {
+        VStack(spacing: Spacing.XXS) {
+            DuoTabIcon(item: items[index], selected: active, badgeMaxWidth: cellWidth / 2 - Spacing.XXS)
+            MomoText(
+                items[index].label,
+                typography: .labelXsMedium,
+                color: active ? theme.colors.primary : theme.colors.text.hint,
+                textAlign: .center,
+                maxLines: 1
+            )
+            // like the system tab bar the label keeps its design size; a constant snapshot, nothing to observe
+            .environment(\.momoFontScale, FontScale(userScaleRate: 1, useOSScaleRate: false))
+        }
+        .frame(width: cellWidth)
+        .frame(maxHeight: .infinity)
+    }
+}
+
+/// One gesture over the whole bar drives the selection; SwiftUI drops `onEnded` when the system
+/// cancels a touch, so the reset of the gesture state ends it instead.
+private struct DuoLiquidInput: ViewModifier {
+    let selection: DuoLiquidSelection
+    let space: String
+
+    @GestureState private var touching = false
+
+    func body(content: Content) -> some View {
+        content
+            .coordinateSpace(name: space)
             .contentShape(Rectangle())
+            .gesture(
+                DragGesture(minimumDistance: 0, coordinateSpace: .named(space))
+                    .updating($touching) { _, state, _ in state = true }
+                    .onChanged { selection.touchChanged(location: $0.location, translation: $0.translation, time: $0.time) }
+                    .onEnded { selection.touchEnded(location: $0.location) }
+            )
+            .onChange(of: touching) { if !$0 { selection.touchCancelled() } }
+    }
+}
+
+/// A tab drawn twice, inactive with the active layer over it fading in as the lens passes;
+/// the tab the lens lands on pops.
+private struct DuoLiquidTab<Content: View>: View {
+    @ObservedObject var selection: DuoLiquidSelection
+    let index: Int
+    let label: String
+    let selected: Bool
+    let onSelect: () -> Void
+    @ViewBuilder let content: (_ active: Bool) -> Content
+
+    var body: some View {
+        ZStack {
+            content(false)
+            content(true).opacity(selection.activeOpacity(index))
         }
-        .buttonStyle(DuoLensPressStyle(index: index, pressedIndex: $pressedIndex))
-        .accessibilityLabel(items[index].label)
+        .scaleEffect(selection.popIndex == index ? selection.pop : 1)
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel(label)
+        .accessibilityAddTraits(selected ? [.isButton, .isSelected] : .isButton)
+        .accessibilityAction { onSelect() }
     }
 }
 
-/// Pink tinted capsule under the selected tab; while pressed it grows into a lens (80x54 to about 96x70).
+/// Pink tinted capsule under the selected tab.
 private struct DuoSelectionMaterial: View {
-    let lens: Bool
-
     @Environment(\.appTheme) private var theme
 
     var body: some View {
         Capsule()
             .fill(theme.colors.primary.opacity(selectionTintOpacity))
-            .scaleEffect(x: lens ? lensScaleX : 1, y: lens ? lensScaleY : 1)
             .allowsHitTesting(false)
     }
 }
 
-/// Tracks the finger so the selection lens jumps to the pressed tab before it is selected.
-private struct DuoLensPressStyle: ButtonStyle {
-    let index: Int
-    @Binding var pressedIndex: Int?
+/// Lift of a single button, e.g. the compressed rail (RN `usePressLift`).
+private struct DuoPressLiftStyle: ButtonStyle {
+    @Environment(\.accessibilityReduceMotion) private var reduceMotion
 
     func makeBody(configuration: Configuration) -> some View {
-        configuration.label.onChange(of: configuration.isPressed) { pressed in
-            if pressed {
-                pressedIndex = index
-            } else if pressedIndex == index {
-                pressedIndex = nil
-            }
-        }
+        configuration.label
+            .scaleEffect(configuration.isPressed && !reduceMotion ? 1 + (liquidLensScaleX - 1) * 0.5 : 1)
+            .animation(liquidSpring, value: configuration.isPressed)
     }
 }
 
+/// Floating bar: the badge starts at the icon's center and grows toward the cell's end edge.
+/// Rail: it ends just inside the capsule and grows back over the icon (RN TabBarIcon `end: -3`).
+/// Capped at `badgeMaxWidth` (an overlay alone would only offer it the icon's 28pt).
 private struct DuoTabIcon: View {
     let item: BottomTabItem
     let selected: Bool
+    let badgeMaxWidth: CGFloat
+    var inRail = false
 
     @Environment(\.appTheme) private var theme
 
@@ -300,10 +382,15 @@ private struct DuoTabIcon: View {
 
     var body: some View {
         Icon(source: item.icon, size: iconSize, color: selected ? theme.colors.primary : theme.colors.text.hint)
-            .overlay(alignment: .topTrailing) {
+            .overlay(alignment: inRail ? .topTrailing : .topLeading) {
                 if let badgeLabel, !badgeLabel.isEmpty {
-                    Badge(label: badgeLabel).offset(x: Spacing.S, y: -Spacing.XS)
-                } else if badgeLabel != nil || item.showDot {
+                    Badge(label: badgeLabel)
+                        .frame(width: max(badgeMaxWidth, 0), alignment: inRail ? .trailing : .leading)
+                        .offset(x: inRail ? railBadgeEndOffset : iconSize / 2, y: -Spacing.XS)
+                }
+            }
+            .overlay(alignment: .topTrailing) {
+                if badgeLabel?.isEmpty == true || (badgeLabel == nil && item.showDot) {
                     BadgeDot(size: .small)
                 }
             }

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.168.1-beta.24'
+  s.version          = '0.168.1-beta.8'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.168.1-beta.24'
+  s.version          = '0.168.1-beta.8'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.168.1-beta.24-debug",
+  "version": "0.168.1-beta.25-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},

package/local.properties

@@ -1,8 +0,0 @@
-## This file must *NOT* be checked into Version Control Systems,
-# as it contains information specific to your local configuration.
-#
-# Location of the SDK. This is only used by Gradle.
-# For customization when using a Version Control System, please read the
-# header note.
-#Wed Aug 21 14:20:12 ICT 2024
-sdk.dir=/Users/huynhdung/Library/Android/sdk