@momo-kits/native-kits 0.0.1-beta.4 → 0.2.0-kt22

package/README.md

@@ -1,6 +1,177 @@
-## 🛠 Installation
-### Using Cocoapods
-Add it inside your `Podfile`.
-```ruby
-pod 'MoMoUIKits', '../node_modules/@momo-platform/native-kits/ios'
+## ComposeKit (Kotlin Multiplatform)
+
+ComposeKit là bộ UI Kit đa nền tảng phục vụ Mini App/SDK của MoMo. Toàn bộ giao diện, điều hướng, token thiết kế và layer tích hợp với MaxAPI đều được viết bằng Kotlin Multiplatform để tái sử dụng cho Android, iOS (qua Compose Multiplatform) cũng như các host native.
+
+### Mục tiêu & phạm vi
+- Chuẩn hoá visual language của MoMo với kho component Compose đã mang sẵn màu sắc, typography, spacing, radius trong `vn.momo.compose.kit.const`.
+- Cung cấp navigation stack thống nhất (`NavigationContainer`, `Navigator`, bottom tabs, modal/bottom sheet) hỗ trợ dynamic screen registry và MaxAPI dismiss/present.
+- Cho phép host nhận context Mini App (`MiniAppContext`, `KitConfig`, `ApplicationContext`, `AppLanguage`) để tự động render Trust Banner, header assets, tracking.
+- Đồng bộ hoá với native SwiftUI kit (`nativeSDK/ios`) nhằm cover các màn đang viết Swift/Objective‑C.
+
+---
+
+### Cấu trúc thư mục
+- `shared/`: module KMP chính. Chứa toàn bộ source `vn.momo.compose.kit.*`, compose resources (font SF Pro), logic publish Maven và podspec.
+- `composeApp/`: sample Compose Multiplatform Android dùng để thử nhanh component, navigator, trust banner.
+- `iosApp/`: project SwiftUI + CocoaPods để test framework iOS sinh ra từ `shared`.
+- `nativeSDK/ios/`: Swift package + podspec `MoMoUIKits` (phụ thuộc `SDWebImageSwiftUI`, `SkeletonUI`) cho các màn hoàn toàn native.
+- `publish_release.sh`, `.gitlab-ci.yml`: script tự bump patch version, chạy `:compose:publish...` khi commit có `[ci build]`.
+- `build-output/`, `build/`: output tạm thời (không commit).
+
+---
+
+### Thành phần chính trong `shared`
+
+**Design tokens & theming**
+- `const/Colors.kt`, `Radius.kt`, `Spacing.kt`, `Typography.kt` định nghĩa token thống nhất.
+- `const/Theme.kt` cung cấp `Theme`, `ColorScheme`, `AppTheme`, `AppThemeController`. Có sẵn `defaultTheme` & `darkTheme`, hỗ trợ inject assets (vd. header background từ `KitConfig`).
+
+**Layout primitives & modifier**
+- `layout/Card.kt`, `Section.kt`, `Item.kt` chứa khung section theo guideline Super App.
+- `modifier/AutomationId`, `Conditional`, `Shadow`, `Size` giúp thêm accessibility id, điều kiện hoá modifier, shadow blur tuỳ nền.
+
+**UI components**
+- Buttons (`Button.kt`, `IconButton.kt`), typography helper (`Text.kt`, `Title.kt`), badge/tag (`Badge*`, `Tag.kt`), chip & switch (`Chip.kt`, `Switch.kt`), checkbox/radio.
+- Input stack: `Input*` (OTP, PhoneNumber, Money, Search, DropDown, TextArea) với keyboard helpers.
+- Pagination indicator (`PaginationDot/Number/Scroll/WhiteDot.kt`), skeleton loading (`Skeleton.kt`), trust UI (`TrustBanner.kt`).
+- Popup/notify (`PopupNotify`, `PopupPromotion`), floating button, `LazyColumnWithBouncing`, Cupertino overscroll, `DateTimePicker` (Wheel UI + utils).
+- Lottie animation (`components/animation/LottieAnimation`) dựng trên [Compottie](https://github.com/alexzhirkevich/compottie) để chạy animation JSON đồng nhất trên Android/iOS/Desktop.
+
+**Navigation & application layer**
+- `navigation/NavigationContainer`, `Navigation.kt`, `Navigator.kt`, `StackScreen.kt`, `BottomSheet.kt`, bottom tab helpers.
+- `Navigator` hỗ trợ `push`, `replace`, `present`, `reset`, `pop(count)`, `showModal`, `showBottomSheet` với overlay registry (`OverplayComponentRegistry`).
+- `application/NavigationContainer.kt`, `MiniAppContext`, `KitConfig`, `ApplicationContext`, `AppConfig`, `AppLanguage` cung cấp context cho header/trust banner, mapping sang map để gửi qua MaxAPI.
+- `application/Screen.kt`, `Header*`, `Footer`, `FloatingButton` tạo template screen (đang deprecate, khuyến nghị dùng `NavigationContainer + StackScreen`).
+
+**Platform utilities**
+- `platform/Platform.kt` định nghĩa expect/actual cho `getPlatformName`, `BackHandler`, `getScreenHeight`, `NativePaint` mask filter. Android actual đi kèm `getAndroidBuildVersion`.
+- `utils/Icons.kt`, `Resources.kt`, `getAppStatusBarHeight()` giúp truy xuất resource Compose đa nền tảng.
+
+**Native bridge**
+- `shared/shared.podspec` và `nativeSDK/ios/MoMoUIKits.podspec` cho phép embed vào iOS app via CocoaPods (deployment target 15.0, Swift 5). Phần native duy trì các SwiftUI component tương đương Compose (Button, Input, Popup, Trust Banner, Badge...).
+
+---
+
+### Yêu cầu môi trường
+- JDK 17+, Gradle 8, Android Studio Hedgehog+ với Android SDK (compileSdk xem `libs.versions.toml`).
+- Kotlin Multiplatform plugin + Compose Multiplatform (JetBrains 1.6.1+).
+- Xcode 15, CocoaPods 1.12+ để build `iosApp` hoặc publish Pod.
+- Truy cập mạng nội bộ GitLab Packages nếu cần publish/consume Maven repo `https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven`.
+
+---
+
+### Build & kiểm thử nhanh
+
+| Tác vụ | Lệnh |
+| --- | --- |
+| Build thư viện KMP (AAR + klib + framework) | `./gradlew :compose:assembleRelease` |
+| Publish local maven (nếu cần thử) | `./gradlew :compose:publishAllPublicationsToMavenLocal` |
+| Sample Android | `./gradlew :composeApp:assembleDebug` |
+| Sample iOS | mở `iosApp/iosApp.xcworkspace` rồi build trên Xcode |
+
+Output Compose nằm trong `shared/build/outputs` và `shared/build/publications/*`. Debug fonts/resources ở `shared/src/commonMain/composeResources`.
+
+---
+
+### Publish nội bộ (GitLab Packages)
+1. Cập nhật `gradle.properties` nếu thay đổi group/artifact/version. Mặc định:
+   ```
+   name=ComposeKit
+   group=vn.momo.kits
+   artifact.id=kits
+   version=0.1.2
+   url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven
+   gitlab.user=upload_packages
+   gitlab.password=<token>
+   ```
+2. Chạy `./publish_release.sh`. Script sẽ:
+   - Đọc version hiện tại, query các version đã publish qua GitLab API.
+   - Bump patch (`X.Y.Z+1`) đến khi không trùng.
+   - Ghi lại `gradle.properties`, export `VERSION`, chạy `./gradlew clean` + `:compose:publishAllPublicationsToGitLabPackagesRepository`.
+3. CI (`.gitlab-ci.yml`) tự động thực thi script này khi push với commit message chứa `[ci build]` (trừ khi branch khớp `engine/w*`).
+
+---
+
+### Tích hợp ComposeKit trong dự án KMP/Android
+
+**Thêm dependency**
+```kotlin
+repositories {
+    maven { url = uri("https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven") }
+}
+
+commonMain.dependencies {
+    implementation("vn.momo.kits:kits:<version>")
+}
 ```
+
+**Khởi tạo navigation container**
+```kotlin
+val miniAppContext = MiniAppContext(appId = "...", appCode = "...", appIcon = "...", toolkitConfig = ...)
+
+NavigationContainer(
+    initialScreen = { StackScreenExample() },
+    options = NavigationOptions(headerTitle = HeaderTitle.Default("Home")),
+    applicationContext = miniAppContext,
+    config = KitConfig(trustBanner = defaultBanner),
+    maxApi = maxApi, // IMaxApi implementation từ host
+    setNavigator = { navigator = it }
+)
+```
+
+Bên trong screen, truy cập `LocalNavigator.current` để:
+```kotlin
+val navigator = LocalNavigator.current
+navigator.push { DetailScreen() }
+navigator.showBottomSheet(content = { BottomSheetContent() })
+```
+
+Tuỳ biến theme bằng `AppThemeController`:
+```kotlin
+val themeController = AppThemeController.current
+themeController(defaultTheme.copy(colors = defaultTheme.colors.copy(primary = Colors.pink_04)))
+```
+
+`ApplicationContext.current`, `AppConfig.current`, `AppLanguage.current` giúp component (ví dụ `TrustBanner`) tự lấy dữ liệu trust banner và tracking `service_component_clicked`.
+
+---
+
+### Tích hợp iOS / Native SDK
+- `shared/shared.podspec` sinh framework Compose (static) mang tên theo `artifact.id` (`kits`). Add vào Podfile:
+  ```ruby
+  pod 'kits', :path => '../shared'
+  ```
+- Với màn SwiftUI thuần native, dùng `nativeSDK/ios`:
+  ```ruby
+  pod 'MoMoUIKits', :path => 'nativeSDK/ios'
+  ```
+  Bộ này mirror hầu hết component Compose (Button, Input, Popup, TrustBanner...). `ApplicationEnvironment` chấp nhận `MiniAppContext`, `KitConfig` tương tự Kotlin.
+
+---
+
+### Lưu ý khác
+- `Screen` composable cũ được đánh dấu `@Deprecated`; sử dụng `NavigationContainer + StackScreen` để hưởng lợi dynamic route và animation.
+- `DesignSystemWhiteList` trong `application/ApplicationContainer.kt` hỗ trợ fallback cho host cũ; đừng kích hoạt nếu không cần.
+- Khi thêm tài nguyên mới, đặt trong `shared/src/commonMain/composeResources` để Compose Multiplatform plugin sinh accessor tự động.
+- Repo không bundle SDK bên thứ ba ngoại trừ `vn.momo.corex.maxapi`, Compose/Coil/Ktor **và Compottie** cho animation.
+
+---
+
+### Animation Lottie đa nền tảng với Compottie
+
+```kotlin
+import io.github.alexzhirkevich.compottie.LottieCompositionSpec
+import vn.momo.kits.components.animation.LottieAnimation
+
+@Composable
+fun SuccessState() {
+    LottieAnimation(
+        spec = LottieCompositionSpec.Url(
+            "https://assets10.lottiefiles.com/packages/lf20_jcikwtux.json"
+        )
+    )
+}
+```
+
+- `shared/build.gradle.kts` đã bật `coreLibraryDesugaringEnabled` để tương thích `compottie-dot`/`compottie-network` với `minSdk = 24`.
+- Nếu animation dùng asset/font nội bộ, kết hợp `compottie-resources` (`rememberResourcesAssetsManager`, `rememberResourcesFontManager`) để trỏ về `composeResources`.

package/ios/Application/ApplicationEnvironment.swift

@@ -0,0 +1,50 @@
+import SwiftUI
+
+public protocol KitComposeApi {
+    func request(funcName: String, params: Any?) -> String
+    func request(funcName: String, params: Any?, onResponse: ((String) -> Void)?) -> String
+    func requestCallback(funcName: String, params: Any?, onResponse: ((String) -> Void)?)
+    func removeCallback(id: String)
+}
+
+public class MiniAppContext {
+    public var appId: String = ""
+    public var appCode: String = ""
+    public var appName: Any? = nil
+    public var appIcon: String = ""
+    public var description: Any? = nil
+    public var support: [String: Any] = [:]
+    public var toolkitConfig: [String: Any] = [:]
+    public var providerId: String = "momo"
+    public var permissions: [[String: Any]] = []
+    
+    public init(appId: String, appCode: String, appName: Any? = nil, appIcon: String, description: Any? = nil, support: [String: Any] = [:], toolkitConfig: [String: Any] = [:], providerId: String = "momo", permissions: [[String: Any]] = []) {
+        self.appId = appId
+        self.appCode = appCode
+        self.appName = appName
+        self.appIcon = appIcon
+        self.description = description
+        self.support = support
+        self.toolkitConfig = toolkitConfig
+        self.providerId = providerId
+        self.permissions = permissions
+    }
+}
+
+public class KitConfig {
+    public var trustBanner: TrustBannerData? = nil
+    public var headerBar: String? = nil
+    public var headerGradient: String? = nil
+}
+
+public class ApplicationEnvironment: ObservableObject {
+    let applicationContext: MiniAppContext?
+    let composeApi: KitComposeApi?
+    let config: KitConfig?
+    
+    public init(applicationContext: MiniAppContext? = nil, composeApi: KitComposeApi? = nil, config: KitConfig? = nil) {
+        self.applicationContext = applicationContext
+        self.composeApi = composeApi
+        self.config = config
+    }
+}

package/ios/Application/Components.swift

@@ -0,0 +1,263 @@
+//
+//  Components.swift
+//  Pods
+//
+//  Created by sophia on 24/1/25.
+//
+
+import SwiftUI
+
+// MARK: - Enums
+
+public enum TitlePosition {
+    case left, center
+}
+
+public enum HeaderType {
+    case `default`, extended, none
+}
+
+public enum AnimatedHeaderRatio {
+    case ratio16_9
+    case ratio1_1
+    case ratio3_2
+
+    var value: CGFloat {
+        switch self {
+        case .ratio16_9: return 16.0 / 9.0
+        case .ratio1_1:  return 1.0
+        case .ratio3_2:  return 3.0 / 2.0
+        }
+    }
+}
+
+
+// MARK: - Animated Header Config
+
+public struct AnimatedHeader {
+    public var aspectRatio: AnimatedHeaderRatio = .ratio16_9
+    public var isSurface: Bool = true
+    public var composable: (_ scrollState: CGFloat) -> AnyView = { _ in AnyView(EmptyView()) }
+
+    public init(
+        aspectRatio: AnimatedHeaderRatio = .ratio16_9,
+        isSurface: Bool = true,
+        composable: @escaping (_ scrollState: CGFloat) -> AnyView = { _ in AnyView(EmptyView()) }
+    ) {
+        self.aspectRatio = aspectRatio
+        self.isSurface = isSurface
+        self.composable = composable
+    }
+}
+
+// MARK: - Utils
+
+func safeAreaTopInset() -> CGFloat {
+    if #available(iOS 15.0, *) {
+        return UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.top }
+            .first ?? 0
+    } else {
+        return UIApplication.shared.connectedScenes
+            .compactMap { ($0 as? UIWindowScene)?.windows.first?.safeAreaInsets.top }
+            .first ?? 0
+    }
+}
+
+// MARK: - Header Background
+
+public struct HeaderBackground: View {
+    var headerType: HeaderType = .default
+    var scrollState: CGFloat
+    var headerTransparent: Bool = false
+    var fullScreenContent: Bool = false
+
+    public init(
+        headerType: HeaderType = .default,
+        scrollState: CGFloat = 0,
+        headerTransparent: Bool = false,
+        fullScreenContent: Bool = false
+    ) {
+        self.headerType = headerType
+        self.scrollState = scrollState
+        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
+        let backgroundColor = headerTransparent ? Color.clear : Colors.black01
+
+        Group {
+            switch headerType {
+            case .default:
+                ZStack(alignment: .bottom) {
+                    Rectangle()
+                        .fill(backgroundColor)
+                        .opacity(headerTransparent ? 0 : opacity)
+                        .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))
+                            .frame(height: 1)
+                            .frame(maxWidth: .infinity)
+                    }
+                }
+
+            case .extended:
+                ZStack {
+                    if !headerTransparent {
+                        Colors.black01
+                        LinearGradient(
+                            gradient: Gradient(colors: [
+                                Color(red: 1, green: 0.8, blue: 0.87),
+                                Color(red: 1, green: 0.8, blue: 0.87).opacity(0)
+                            ]),
+                            startPoint: .top,
+                            endPoint: .bottom
+                        )
+                        .opacity(opacity)
+                        .frame(height: 154)
+                    }
+                }
+
+            case .none:
+                EmptyView()
+            }
+        }
+    }
+}
+
+// MARK: - Header View
+
+public struct Header: View {
+    var headerType: HeaderType = .default
+    var titlePosition: TitlePosition
+    var title: String
+    var headerRight:  (()->any View)? = {HeaderRight()}
+    var goBack: (() -> Void)?
+    var opacity: CGFloat = 1
+    var animatedHeader: AnimatedHeader?
+    var scrollState: CGFloat = 0
+    var inputSearchProps: InputSearchProps?
+    var tintColor: Color?
+
+    public init(
+        headerType: HeaderType = .default,
+        titlePosition: TitlePosition,
+        title: String,
+        headerRight:  (()->any View)? = {HeaderRight()},
+        goBack: (() -> Void)? = nil,
+        opacity: CGFloat = 1,
+        animatedHeader: AnimatedHeader? = nil,
+        scrollState: CGFloat = 0,
+        inputSearchProps: InputSearchProps? = nil,
+        tintColor: Color? = nil
+    ) {
+        self.headerType = headerType
+        self.titlePosition = titlePosition
+        self.title = title
+        self.headerRight = headerRight
+        self.goBack = goBack
+        self.opacity = opacity
+        self.animatedHeader = animatedHeader
+        self.scrollState = scrollState
+        self.inputSearchProps = inputSearchProps
+        self.tintColor = tintColor
+    }
+    
+    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)
+
+        if headerType != .none {
+            VStack(spacing: 0) {
+                ZStack {
+                    // MARK: - Left and Right Controls
+                    HStack {
+                        if let goBack = goBack {
+                            SwiftUI.Button(action: goBack) {
+                                Circle()
+                                    .stroke(borderColor, lineWidth: 0.2)
+                                    .background(Circle().fill(backgroundButtonColor))
+                                    .frame(width: 28, height: 28)
+                                    .overlay(
+                                            Icon(source: "arrow-back", size: 20, color: tintColor ?? Colors.black17)
+                                    )
+                            }
+                        }
+
+                        Spacer()
+
+                        if let headerRight = headerRight {
+                            AnyView(headerRight())
+                        }
+                    }
+                    .padding(.horizontal, 12)
+
+                    // MARK: - Title or Search
+                    HStack {
+                        if titlePosition == .left && goBack != nil {
+                            Spacer().frame(width: 38)
+                        }
+
+                        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
+                            )
+                        } else {
+                            Text(title)
+                                .font(.system(size: 17, weight: .bold))
+                                .foregroundColor(tintColor ?? Colors.black17)
+                                .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()
+                    }
+                    .padding(.horizontal)
+                }
+                .background(Color.clear)
+                .frame(height: 52)
+            }
+        }
+    }
+}

package/ios/Application/ComposeApi.swift

@@ -0,0 +1,22 @@
+import Foundation
+
+public protocol ComposeApi {
+    func request(funcName: String, params: Any, _ completion: ((String) -> Void)?)
+    func request(funcName: String, params: Any) -> String
+}
+
+// Default implementation
+public class ComposeApiImpl: ComposeApi {
+    public static let shared = ComposeApiImpl()
+    
+    private init() {}
+    
+    public func request(funcName: String, params: Any, _ completion: ((String) -> Void)?) {
+        // Implement your API request logic here
+    }
+    
+    public func request(funcName: String, params: Any) -> String {
+        // Implement your API request logic here
+        return ""
+    }
+} 

package/ios/Application/FloatingButton.swift

@@ -0,0 +1,172 @@
+import SwiftUI
+import Combine
+
+public enum FABSize {
+    case small
+    case large
+    
+}
+
+public enum FABPosition {
+    case right
+    case center
+}
+
+public struct FabProps {
+    public let icon: String?
+    public let iconColor: Color?
+    public let label: String?
+    public let onClick: (() -> Void)?
+    public let containerColor: Color?
+    public let size: FABSize?
+    public let iconSize: CGFloat?
+    public let scrollOffset: CGFloat?
+    public let position: FABPosition?
+    public let bottomPadding: CGFloat?
+    public let renderComponent: (() -> AnyView)?
+    
+    public init(
+        icon: String? = nil,
+        iconColor: Color? = .white,
+        label: String? = nil,
+        onClick: (() -> Void)? = nil,
+        containerColor: Color? = Colors.primary,
+        size: FABSize? = .small,
+        iconSize: CGFloat? = nil,
+        scrollOffset: CGFloat? = nil,
+        position: FABPosition? = .right,
+        bottomPadding: CGFloat? = nil,
+        renderComponent: (() -> AnyView)? = nil
+    ) {
+        self.icon = icon
+        self.iconColor = iconColor
+        self.label = label
+        self.onClick = onClick
+        self.containerColor = containerColor
+        self.size = size
+        self.iconSize = iconSize
+        self.scrollOffset = scrollOffset
+        self.position = position
+        self.bottomPadding = bottomPadding
+        self.renderComponent = renderComponent
+    }
+}
+
+public struct FloatingButton: View {
+    @State private var lastScrollOffset: CGFloat = 0
+    @State private var isExpanded: Bool = false
+    @State private var internalScrollOffset: CGFloat = 0
+    @State private var showText: Bool = true
+    @State private var fullWidth: CGFloat? = nil
+    @State private var currentWidth: CGFloat = 0
+    @State private var lastDirection: String? = nil
+    
+    private let props: FabProps
+    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 containerColor: Color? { props.containerColor ?? Colors.primary }
+    private var iconColor: Color? { props.iconColor ?? .white }
+    private var label: String? { props.label }
+    private var icon: String? { props.icon }
+    private var size: FABSize? { props.size }
+    private var iconSize: CGFloat? { props.iconSize ?? defaultIconSize}
+    private var onClick: (() -> Void)? { props.onClick }
+    private var renderComponent: (() -> AnyView)? { props.renderComponent }
+    
+    public init(props: FabProps, keyboardOffset: CGFloat = 0, scrollOffset: CGFloat = 0) {
+        self.props = props
+        self.keyboardOffset = keyboardOffset
+        self.scrollOffset = scrollOffset
+    }
+    
+    private var height: CGFloat {
+        if(iconSize == nil) {
+            size == .small ? 36 : 48
+        }
+        else {
+            iconSize!
+        }
+    }
+    
+    private var minWidth: CGFloat {
+        size == .small ? 36 : 48
+    }
+    
+    private var defaultIconSize: CGFloat {
+        size == .small ? 12 : 24
+    }
+    
+    public var body: some View {
+        Group {
+            if ((icon?.isEmpty) == nil), let render = renderComponent {
+                render()
+            } else {
+                content
+            }
+        }
+        .onTapGesture {
+            onClick?()
+        }
+        .padding(Spacing.M)
+        .frame(height: height + (Spacing.M * 2))
+        .background(containerColor)
+        .cornerRadius(100)
+        .padding(.bottom, bottomPadding)
+        .frame(alignment: position == .center ? .center : .trailing)
+        .onAppear {
+            internalScrollOffset = scrollOffset
+            isExpanded = label != nil
+        }
+        .onReceive(Just(scrollOffset)) { newValue in
+            let direction = newValue > internalScrollOffset ? "down" : "up"
+
+            if direction != lastDirection {
+                lastDirection = direction
+                if direction == "down" {
+                    withAnimation(.easeOut(duration: 0.1)) {
+                        isExpanded = false
+                    }
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                        showText = false
+                    }
+                } else {
+                    showText = true
+                    withAnimation(.easeIn(duration: 0.1)) {
+                        isExpanded = true
+                    }
+                    
+                }
+            }
+        }
+    }
+    
+    private var content: some View {
+        HStack(spacing: 0) {
+            ImageView(icon ?? "")
+                .scaledToFit()
+                .frame(width: iconSize, height: iconSize)
+                .foregroundColor(iconColor)
+            
+            if let label = label {
+                if showText {
+                    Spacer().frame(width: 8)
+                    Text(label)
+                        .foregroundColor(.white)
+                        .font(.system(size: 16, weight: .bold))
+                        .lineLimit(1)
+                        .background(
+                            GeometryReader { geo in
+                                Color.clear.onAppear {
+                                    fullWidth = geo.size.width
+                                }
+                            }
+                        )
+                        .opacity(isExpanded ? 1 : 0)
+                }
+            }
+
+        }
+    }
+}