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

package/.claude/settings.local.json

@@ -0,0 +1,55 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.144.6/skiko-android-0.144.6.pom\")",
+      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/maven-metadata.xml\")",
+      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko/maven-metadata.xml\")",
+      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko/0.144.6/skiko-0.144.6.module\")",
+      "Bash(curl -s -o /dev/null -w '%{http_code}' https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.144.6/skiko-android-0.144.6.__TRACKED_VAR__)",
+      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.144.6/\")",
+      "Bash(curl -s \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/\")",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.148.1/skiko-android-0.148.1.pom\")",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"https://repo.maven.apache.org/maven2/org/jetbrains/skiko/skiko-android/0.144.5/skiko-android-0.144.5.pom\")",
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\\\\n\" \"https://dl.google.com/dl/android/maven2/org/jetbrains/skiko/skiko-android/0.144.6/skiko-android-0.144.6.pom\")",
+      "Bash(curl -s \"https://search.maven.org/solrsearch/select?q=a:skiko-android&rows=5&wt=json\")",
+      "Bash(curl -sL -o /dev/null -w \"%{http_code} %{url_effective}\\\\n\" \"https://repo1.maven.org/maven2/org/jetbrains/skiko/skiko-android/0.144.6/skiko-android-0.144.6.pom\")",
+      "Bash(curl *)",
+      "Bash(./gradlew :sample:androidApp:dependencies --configuration debugRuntimeClasspath)",
+      "Bash(./gradlew :sample:shared:compileDebugKotlinAndroid)",
+      "Bash(./gradlew :sample:androidApp:compileDebugKotlin)",
+      "Bash(ls -d *.xcodeproj)",
+      "Bash(grep -c ChipDemo.swift __TRACKED_VAR__/project.pbxproj)",
+      "Bash(grep -c PBXFileSystemSynchronizedRootGroup __TRACKED_VAR__/project.pbxproj)",
+      "Bash(grep -c InformationDemo.swift __TRACKED_VAR__/project.pbxproj)",
+      "Bash(plutil -lint project.pbxproj)",
+      "Bash(xcode-select -p)",
+      "Bash(/usr/bin/xcrun xcodebuild *)",
+      "Bash(echo \"exit: $?\")",
+      "Bash(/Applications/Xcode26.app/Contents/Developer/usr/bin/xcodebuild -version)",
+      "Bash(./gradlew :compose:tasks --all)",
+      "Bash(grep -n \"vanniktech\\\\|mavenPublishing\\\\|^publishing\\\\|version = gitlabVersion\\\\|namespace =\\\\|compileSdk =\\\\|minSdk =\\\\|GitLabPackages\\\\|name = \\\\\"\\\\${gitlabRepo}Packages\\\\\"\")",
+      "Bash(git checkout *)",
+      "Bash(./gradlew :compose:publishAllPublicationsToGitLabPackagesRepository --dry-run)",
+      "Bash(git fetch *)",
+      "Bash(git pull *)",
+      "Bash(git push *)",
+      "Bash(git branch *)",
+      "Bash(xcodebuild -workspace iosApp.xcworkspace -list)",
+      "Bash(xcrun simctl *)",
+      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme iosApp -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 14 Pro' -configuration Debug build CODE_SIGNING_ALLOWED=NO)",
+      "Bash(pod install *)",
+      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme iosApp -sdk iphonesimulator -destination 'id=1E6F9A79-5E64-4590-BEA2-828D75D99393' -configuration Debug build CODE_SIGNING_ALLOWED=NO)",
+      "Bash(xcrun swiftc *)",
+      "Bash(echo \"=== exit: $? \\(1=none found\\) ===\")",
+      "Bash(cat Radius.swift)",
+      "Bash(cat Spacing.swift)",
+      "Bash(echo \"exit=$?\")",
+      "Bash(ruby *)",
+      "Bash(xcodebuild -list -workspace iosApp.xcworkspace)",
+      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme MoMoUIKits -sdk iphonesimulator -destination 'platform=iOS Simulator,name=iPhone 14 Pro' build)",
+      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme MoMoUIKits -sdk iphonesimulator -destination 'platform=iOS Simulator,id=E6A899C0-098E-473A-95B8-A2BBD2D42A92' build)",
+      "Bash(xcodebuild -workspace iosApp.xcworkspace -scheme iosApp -sdk iphonesimulator -destination 'platform=iOS Simulator,id=E6A899C0-098E-473A-95B8-A2BBD2D42A92' build)",
+      "Bash(xcodebuild build *)"
+    ]
+  }
+}

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.162.2-debug"
+        version = "0.162.2-sp.1-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.161.2-beta.15'
+    spec.version                  = '0.162.2-sp.1-debug'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.162.2
+version=0.162.2-sp.1
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Application/Components.swift

@@ -83,9 +83,8 @@ public struct HeaderBackground: View {
         self.headerTransparent = headerTransparent
         self.fullScreenContent = fullScreenContent
     }
-    
+
     public var body: some View {
-        
         let statusBarHeight = safeAreaTopInset()
         let opacity = max(0, 1 - scrollState / 200)
         let height = fullScreenContent ? 0 :  statusBarHeight + 52
@@ -101,21 +100,6 @@ public struct HeaderBackground: View {
                         .frame(height: height)
                         .shadow(color: Colors.black20.opacity(0.2), radius: 10, x: 0, y: -2)
                         .background(backgroundColor)
-                        .overlay(
-                            headerTransparent ? AnyView(EmptyView()) :
-                            AnyView(
-                                Rectangle()
-                                    .fill(LinearGradient(
-                                        gradient: Gradient(colors: [
-                                            Color(red: 1, green: 0.8, blue: 0.87),
-                                            Color(red: 1, green: 0.8, blue: 0.87).opacity(0.5)
-                                        ]),
-                                        startPoint: .top,
-                                        endPoint: .bottom))
-                                    .opacity(opacity)
-                                    .frame(height: height))
-                        )
-
                     if !headerTransparent {
                         Rectangle()
                             .fill(Color.black.opacity(0.1))
@@ -148,12 +132,26 @@ public struct HeaderBackground: View {
     }
 }
 
+// MARK: - Header right width preference
+
+/// Reports the measured width of the header-right area so the animated search
+/// header can compute its trailing inset (mirrors Compose's headerRightWidthPx).
+public struct HeaderRightWidthKey: PreferenceKey {
+    public static var defaultValue: CGFloat = 0
+    public static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
+        value = max(value, nextValue())
+    }
+}
+
 // MARK: - Header View
 
 public struct Header: View {
     var headerType: HeaderType = .default
     var titlePosition: TitlePosition
     var title: String
+    /// Optional rich title (mirrors Compose's `HeaderTitle`); `.user` renders an
+    /// avatar group instead of `title`. Defaults to nil → plain `title` text.
+    var headerTitle: HeaderTitle?
     var headerRight:  (()->any View)? = {HeaderRight()}
     var goBack: (() -> Void)?
     var opacity: CGFloat = 1
@@ -161,22 +159,27 @@ public struct Header: View {
     var scrollState: CGFloat = 0
     var inputSearchProps: InputSearchProps?
     var tintColor: Color?
+    /// Title opacity; used by the animated search header to fade the title out on scroll.
+    var titleOpacity: CGFloat = 1
 
     public init(
         headerType: HeaderType = .default,
         titlePosition: TitlePosition,
         title: String,
+        headerTitle: HeaderTitle? = nil,
         headerRight:  (()->any View)? = {HeaderRight()},
         goBack: (() -> Void)? = nil,
         opacity: CGFloat = 1,
         animatedHeader: AnimatedHeader? = nil,
         scrollState: CGFloat = 0,
         inputSearchProps: InputSearchProps? = nil,
-        tintColor: Color? = nil
+        tintColor: Color? = nil,
+        titleOpacity: CGFloat = 1
     ) {
         self.headerType = headerType
         self.titlePosition = titlePosition
         self.title = title
+        self.headerTitle = headerTitle
         self.headerRight = headerRight
         self.goBack = goBack
         self.opacity = opacity
@@ -184,10 +187,11 @@ public struct Header: View {
         self.scrollState = scrollState
         self.inputSearchProps = inputSearchProps
         self.tintColor = tintColor
+        self.titleOpacity = titleOpacity
     }
-    
+
     public var body: some View {
-        
+
         let backgroundButtonColor: Color = tintColor == Colors.black01 ? Colors.black20.opacity(0.6) : Colors.black01.opacity(0.6)
         let borderColor: Color = tintColor == Colors.black01 ? Colors.black01.opacity(0.2) : Colors.black20.opacity(0.2)
 
@@ -212,6 +216,9 @@ public struct Header: View {
 
                         if let headerRight = headerRight {
                             AnyView(headerRight())
+                                .background(GeometryReader { geo in
+                                    Color.clear.preference(key: HeaderRightWidthKey.self, value: geo.size.width)
+                                })
                         }
                     }
                     .padding(.horizontal, 12)
@@ -223,32 +230,16 @@ public struct Header: View {
                         }
 
                         if let inputProps = inputSearchProps {
-                            InputSearch(
-                                text: inputProps.$text,
-                                buttonText: inputProps.buttonText,
-                                showButtonText: inputProps.showButtonText,
-                                showBorder: inputProps.showBorder,
-                                placeholder: inputProps.placeholder,
-                                onChangeText: inputProps.onChangeText,
-                                onPressButtonText: inputProps.onPressButtonText,
-                                error: inputProps.error,
-                                disabled: inputProps.disabled,
-                                icon: inputProps.icon,
-                                iconColor: inputProps.iconColor,
-                                onRightIconPressed: inputProps.onRightIconPressed,
-                                onFocus: inputProps.onFocus,
-                                onBlur: inputProps.onBlur,
-                                loading: inputProps.loading,
-                                fontWeight: inputProps.fontWeight,
-                                keyboardType: inputProps.keyboardType
-                            )
+                            InputSearch(props: inputProps)
+                        } else if case let .user(userData)? = headerTitle {
+                            if #available(iOS 16.0, *) {
+                                HeaderUserView(userData)
+                            }
                         } else {
-                            Text(title)
-                                .font(.system(size: 17, weight: .bold))
-                                .foregroundColor(tintColor ?? Colors.black17)
+                            MomoText(headerTitle?.defaultTitle ?? title, typography: .headerDefaultBold, color: tintColor ?? Colors.black17, maxLines: 1)
+                                .opacity(titleOpacity)
                                 .frame(maxWidth: titlePosition == .center ? UIScreen.main.bounds.width - 252 : nil)
                                 .frame(maxWidth: titlePosition == .center ? .infinity : UIScreen.main.bounds.width - 172, alignment: titlePosition == .center ? .center : .leading)
-                                .lineLimit(1)
                         }
 
                         Spacer()

package/ios/Application/FloatingButton.swift

@@ -3,11 +3,16 @@ import Combine
 
 public enum FABSize {
     case small
+    case `default`
+    /// Backward-compatible alias for older iOS call sites. Compose names this
+    /// size `DEFAULT`.
     case large
-    
 }
 
 public enum FABPosition {
+    case end
+    /// Backward-compatible alias for older iOS call sites. Compose names this
+    /// position `END`.
     case right
     case center
 }
@@ -31,10 +36,10 @@ public struct FabProps {
         label: String? = nil,
         onClick: (() -> Void)? = nil,
         containerColor: Color? = Colors.primary,
-        size: FABSize? = .small,
+        size: FABSize? = .default,
         iconSize: CGFloat? = nil,
         scrollOffset: CGFloat? = nil,
-        position: FABPosition? = .right,
+        position: FABPosition? = .end,
         bottomPadding: CGFloat? = nil,
         renderComponent: (() -> AnyView)? = nil
     ) {
@@ -65,7 +70,7 @@ public struct FloatingButton: View {
     private var keyboardOffset: CGFloat
     private var scrollOffset: CGFloat
     private var bottomPadding: CGFloat { props.bottomPadding ?? 12 + keyboardOffset}
-    private var position: FABPosition? { props.position ?? .right }
+    private var position: FABPosition? { props.position ?? .end }
     private var containerColor: Color? { props.containerColor ?? Colors.primary }
     private var iconColor: Color? { props.iconColor ?? .white }
     private var label: String? { props.label }
@@ -152,10 +157,7 @@ public struct FloatingButton: View {
             if let label = label {
                 if showText {
                     Spacer().frame(width: 8)
-                    Text(label)
-                        .foregroundColor(.white)
-                        .font(.system(size: scaleSize(16), weight: .bold))
-                        .lineLimit(1)
+                    MomoText(label, typography: .actionDefaultBold, color: .white, maxLines: 1)
                         .background(
                             GeometryReader { geo in
                                 Color.clear.onAppear {

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

@@ -0,0 +1,102 @@
+//
+//  BottomTab.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomTab` (navigation/bottomtab/BottomTab.kt).
+//  Hosts a set of tabbed screens, each wrapped in `StackScreen` chrome built
+//  from that tab's `NavigationOptions`, with a `BottomTabBar` pinned to the
+//  bottom. Switching tabs cross-fades + scales the content (parity with Compose).
+//
+
+import SwiftUI
+
+@available(iOS 16.0, *)
+public struct BottomTab: View {
+    private let items: [BottomTabItem]
+    private let floatingButton: BottomTabFloatingButton?
+
+    @EnvironmentObject private var navigator: Navigator
+    @State private var selectedIndex: Int = 0
+
+    public init(items: [BottomTabItem], floatingButton: BottomTabFloatingButton? = nil) {
+        self.items = items
+        self.floatingButton = floatingButton
+    }
+
+    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    private var reservedBottom: CGFloat { BOTTOM_TAB_BAR_HEIGHT + bottomInset + Spacing.S }
+
+    public var body: some View {
+        ZStack(alignment: .bottom) {
+            // Tab content area, inset above the bar.
+            ZStack {
+                ForEach(items.indices, id: \.self) { index in
+                    if index == selectedIndex {
+                        tabScreen(for: index)
+                            .transition(.scale(scale: 0.97).combined(with: .opacity))
+                    }
+                }
+            }
+            .padding(.bottom, reservedBottom)
+            .animation(.easeInOut(duration: 0.2), value: selectedIndex)
+
+            // Tab bar + home-indicator filler.
+            VStack(spacing: 0) {
+                BottomTabBar(
+                    items: items,
+                    floatingButton: floatingButton,
+                    selectedIndex: selectedIndex,
+                    onTabSelected: { index in
+                        if index != selectedIndex { selectedIndex = index }
+                    }
+                )
+                Colors.black01
+                    .frame(height: bottomInset + Spacing.S)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .ignoresSafeArea(edges: .bottom)
+    }
+
+    @ViewBuilder
+    private func tabScreen(for index: Int) -> some View {
+        let item = items[index]
+        let options = item.options ?? NavigationOptions()
+        StackScreen(
+            backgroundColor: options.backgroundColor,
+            headerTransparent: options.headerTransparent,
+            fullScreenContent: options.fullScreenContent,
+            tintColor: options.tintColor ?? Colors.black17,
+            isBack: !options.hiddenBack,
+            headerType: options.headerType,
+            useAnimated: options.useAnimated,
+            title: options.title,
+            headerTitle: options.headerTitle,
+            titlePosition: options.titlePosition,
+            // Tab back: non-first tab returns to the first tab, first tab
+            // delegates to the navigator (mirrors Compose's onBackHandler).
+            goBack: options.hiddenBack ? nil : {
+                if index != 0 { selectedIndex = 0 } else { navigator.onBackSafe() }
+            },
+            scrollable: options.scrollable,
+            scrollToTopCallback: options.scrollToTopCallback,
+            useAvoidKeyboard: options.useAvoidKeyboard,
+            keyboardShouldPersistTaps: options.keyboardShouldPersistTaps,
+            footer: options.footer,
+            headerRight: options.resolvedHeaderRight,
+            animatedHeader: options.animatedHeader,
+            layoutOffset: options.layoutOffset,
+            inputSearchProps: options.inputSearchProps,
+            fabProps: options.fabProps,
+            content: { item.screen() }
+        )
+    }
+}
+
+/// Bottom safe-area inset (home indicator).
+@available(iOS 16.0, *)
+private func safeAreaBottomInset() -> CGFloat {
+    UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+        .first ?? 0
+}

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

@@ -0,0 +1,215 @@
+//
+//  BottomTabBar.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomTabBar` (navigation/bottomtab/BottomTabBar.kt).
+//  Renders the row of tab items, an animated selection indicator, a top shadow,
+//  badges/dots, and an optional center floating button (with the curved notch).
+//
+
+import SwiftUI
+
+// MARK: - Models
+
+/// Mirrors Compose's `BottomTabItem`.
+public struct BottomTabItem: Identifiable {
+    public let id = UUID()
+    public let name: String
+    public let label: String
+    public let icon: String
+    public let showDot: Bool
+    public let badgeLabel: String?
+    public let options: NavigationOptions?
+    public let screen: () -> AnyView
+
+    public init(
+        name: String,
+        label: String,
+        icon: String,
+        showDot: Bool = false,
+        badgeLabel: String? = nil,
+        options: NavigationOptions? = nil,
+        @ViewBuilder screen: @escaping () -> some View
+    ) {
+        self.name = name
+        self.label = label
+        self.icon = icon
+        self.showDot = showDot
+        self.badgeLabel = badgeLabel
+        self.options = options
+        self.screen = { AnyView(screen()) }
+    }
+}
+
+/// Mirrors Compose's `BottomTabFloatingButton`.
+public struct BottomTabFloatingButton {
+    public let icon: String
+    public let label: String
+    public let onPress: () -> Void
+
+    public init(icon: String, label: String, onPress: @escaping () -> Void) {
+        self.icon = icon
+        self.label = label
+        self.onPress = onPress
+    }
+}
+
+let bottomTabFloatingButtonWidth: CGFloat = 75
+let BOTTOM_TAB_BAR_HEIGHT: CGFloat = 64
+
+// MARK: - Tab bar
+
+struct BottomTabBar: View {
+    let items: [BottomTabItem]
+    let floatingButton: BottomTabFloatingButton?
+    let selectedIndex: Int
+    let onTabSelected: (Int) -> Void
+
+    private var screenWidth: CGFloat { UIScreen.main.bounds.width }
+    private var mid: Int { items.count / 2 }
+
+    private var tabWidth: CGFloat {
+        if floatingButton != nil {
+            return (screenWidth - bottomTabFloatingButtonWidth) / CGFloat(items.count)
+        }
+        return screenWidth / CGFloat(items.count)
+    }
+
+    private var indicatorOffset: CGFloat {
+        let adjust: CGFloat = (floatingButton != nil && selectedIndex >= mid) ? bottomTabFloatingButtonWidth : 0
+        return tabWidth * CGFloat(selectedIndex) + tabWidth / 2 - screenWidth / 2 + adjust
+    }
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            HStack(spacing: 0) {
+                if floatingButton == nil {
+                    tabItems(from: 0, to: items.count)
+                } else {
+                    tabItems(from: 0, to: mid)
+                    Spacer()
+                        .frame(width: bottomTabFloatingButtonWidth)
+                        .padding(.horizontal, Spacing.XXS)
+                    tabItems(from: mid, to: items.count)
+                }
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: BOTTOM_TAB_BAR_HEIGHT)
+            .background(Colors.black01)
+
+            // Animated selection indicator.
+            RoundedRectangle(cornerRadius: 2)
+                .fill(Colors.primary)
+                .frame(width: 44, height: 2)
+                .offset(x: indicatorOffset, y: -BOTTOM_TAB_BAR_HEIGHT + 2)
+                .animation(.easeInOut(duration: 0.25), value: selectedIndex)
+
+            // Top shadow.
+            LinearGradient(
+                colors: [Color.black.opacity(0.05), .clear],
+                startPoint: .bottom,
+                endPoint: .top
+            )
+            .frame(height: 6)
+            .frame(maxWidth: .infinity)
+            .offset(y: -BOTTOM_TAB_BAR_HEIGHT)
+
+            if let floatingButton {
+                CenterFloatingButton(data: floatingButton)
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func tabItems(from: Int, to: Int) -> some View {
+        ForEach(from..<to, id: \.self) { index in
+            TabBarItem(
+                item: items[index],
+                selected: index == selectedIndex,
+                onClick: { onTabSelected(index) }
+            )
+            .frame(maxWidth: .infinity)
+        }
+    }
+}
+
+// MARK: - Tab item
+
+private struct TabBarItem: View {
+    let item: BottomTabItem
+    let selected: Bool
+    let onClick: () -> Void
+
+    private var tintColor: Color { selected ? Colors.primary : Colors.black10 }
+
+    /// Mirrors Compose's `formatLabel`: hide a badge that is the number "0".
+    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 {
+        ZStack(alignment: .topTrailing) {
+            VStack(spacing: 0) {
+                Icon(source: item.icon, size: 28, color: tintColor)
+                    .padding(Spacing.XS)
+                MomoText(
+                    item.label,
+                    typography: selected ? .labelXsMedium : .descriptionXsRegular,
+                    color: tintColor,
+                    textAlign: .center,
+                    maxLines: 1
+                )
+                    .truncationMode(.tail)
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
+            .padding(.horizontal, Spacing.S)
+            .padding(.vertical, Spacing.S)
+
+            if let badgeLabel {
+                if badgeLabel.isEmpty {
+                    BadgeDot(size: .small)
+                        .offset(x: -Spacing.S, y: Spacing.XS)
+                } else {
+                    Badge(label: badgeLabel)
+                        .offset(x: -Spacing.XS, y: 0)
+                }
+            } else if item.showDot {
+                BadgeDot(size: .small)
+                    .offset(x: -Spacing.S, y: Spacing.XS)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.horizontal, Spacing.XXS)
+        .contentShape(Rectangle())
+        .onTapGesture { onClick() }
+    }
+}
+
+// MARK: - Center floating button
+
+private struct CenterFloatingButton: View {
+    let data: BottomTabFloatingButton
+
+    var body: some View {
+        VStack(spacing: 0) {
+            CurvedContainer()
+            Circle()
+                .fill(Colors.primary)
+                .frame(width: 48, height: 48)
+                .overlay(Icon(source: data.icon, size: 28, color: .white))
+            Spacer().frame(height: 4)
+            MomoText(data.label, typography: .labelXsMedium, color: Colors.black01, textAlign: .center, maxLines: 1)
+                .frame(maxWidth: .infinity)
+                .frame(height: 14)
+                .background(Colors.primary)
+                .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
+        }
+        .frame(width: bottomTabFloatingButtonWidth)
+        .padding(.horizontal, Spacing.XXS)
+        .padding(.vertical, Spacing.S)
+        .contentShape(Rectangle())
+        .onTapGesture { data.onPress() }
+    }
+}

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

@@ -0,0 +1,65 @@
+//
+//  CurvedContainer.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `CurvedContainer` (navigation/bottomtab/CurvedContainer.kt).
+//  Draws the surface-colored notch that sits behind the center floating button,
+//  carving a circular cut-out into the tab bar's top edge.
+//
+
+import SwiftUI
+
+struct CurvedContainer: View {
+    var circleSize: CGFloat = 48
+    var tabBarItemIconSize: CGFloat = 28
+    var circleOverSize: CGFloat = 2
+    var width: CGFloat = 71
+    var height: CGFloat = 16
+    var color: Color = Colors.black01
+
+    var body: some View {
+        let circlePositionTop = circleSize - tabBarItemIconSize - 10
+        let circleOverTop = circlePositionTop + circleOverSize
+        let circleR = circleSize / 2
+        let circleOverR = circleR + circleOverSize
+        let centerX = width / 2
+
+        CurvedShape(circleOverTop: circleOverTop, centerX: centerX, circleOverR: circleOverR, width: width)
+            .fill(color)
+            .frame(width: width, height: height)
+            .offset(y: 24)
+            .zIndex(-1)
+    }
+}
+
+/// Mirrors Compose's `getPath`: a flat bar with a smooth circular dip in the
+/// middle, sized to cradle the floating button.
+private struct CurvedShape: Shape {
+    let circleOverTop: CGFloat
+    let centerX: CGFloat
+    let circleOverR: CGFloat
+    let width: CGFloat
+
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        path.move(to: CGPoint(x: 0, y: circleOverTop))
+        path.addLine(to: CGPoint(x: centerX - circleOverR - 40, y: circleOverTop))
+
+        path.addCurve(
+            to: CGPoint(x: centerX, y: 0),
+            control1: CGPoint(x: centerX - circleOverR, y: circleOverTop),
+            control2: CGPoint(x: centerX - circleOverR, y: 0)
+        )
+        path.addCurve(
+            to: CGPoint(x: centerX + circleOverR + 40, y: circleOverTop),
+            control1: CGPoint(x: centerX + circleOverR, y: 0),
+            control2: CGPoint(x: centerX + circleOverR, y: circleOverTop)
+        )
+
+        path.addLine(to: CGPoint(x: width, y: circleOverTop))
+        path.addLine(to: CGPoint(x: width, y: 60))
+        path.addLine(to: CGPoint(x: 0, y: 60))
+        path.closeSubpath()
+        return path
+    }
+}