@momo-kits/native-kits 0.89.19 → 0.89.21

package/compose/src/commonMain/kotlin/vn/momo/kits/application/NavigationContainer.kt

@@ -1,48 +1,23 @@
 package vn.momo.kits.application
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
-import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import cafe.adriel.voyager.core.screen.Screen
-import cafe.adriel.voyager.navigator.LocalNavigator
-import cafe.adriel.voyager.navigator.bottomSheet.BottomSheetNavigator
-import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
-import cafe.adriel.voyager.navigator.currentOrThrow
-import cafe.adriel.voyager.transitions.SlideTransition
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Theme
 import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.platform.disableOverscroll
 
 val AppNavigator = staticCompositionLocalOf<Navigator> {
     error("no navigator provided!")
 }
 
-class Navigator(
-    private val stack: cafe.adriel.voyager.navigator.Navigator,
-    private val sheet: BottomSheetNavigator,
-) {
+class Navigator {
     fun push(content: @Composable () -> Unit) {
-        stack.push(StackScreen {
-            content()
-        })
     }
 
     fun present(content: @Composable () -> Unit) {
@@ -54,21 +29,12 @@ class Navigator(
     }
 
     fun pop() {
-        if (sheet.isVisible) {
-            sheet.hide()
-        } else {
-            stack.pop()
-        }
     }
 
     fun replace(content: @Composable () -> Unit) {
-        stack.replace(StackScreen {
-            content()
-        })
     }
 
     fun popToTop() {
-        stack.popUntilRoot()
     }
 
     fun showModal(
@@ -76,122 +42,24 @@ class Navigator(
         canBackgroundClose: Boolean = true,
         content: @Composable () -> Unit,
     ) {
-        sheet.show(ModalScreen(onClose = onClose, barrierDismissible = canBackgroundClose) {
-            content()
-        })
     }
 
     fun showBottomSheet(content: @Composable () -> Unit) {
-        sheet.show(SheetScreen {
-            content()
-        })
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun ApplicationContainer(
     theme: Theme = defaultTheme,
-    statusBarHeight: Dp = WindowInsets.systemBars.asPaddingValues().calculateTopPadding(),
     content: @Composable () -> Unit,
 ) {
+    disableOverscroll()
     CompositionLocalProvider(
         AppTheme provides theme,
-        AppStatusBar provides statusBarHeight,
+        AppNavigator provides Navigator(),
+        AppStatusBar provides WindowInsets.systemBars.asPaddingValues().calculateTopPadding(),
     ) {
-        BottomSheetNavigator(sheetBackgroundColor = Color.Transparent, sheetElevation = 0.dp) {
-            cafe.adriel.voyager.navigator.Navigator(MainScreen {
-                content()
-            }) {
-                SlideTransition(it)
-            }
-        }
-    }
-
-}
-
-class MainScreen(private val content: @Composable () -> Unit) : Screen {
-    @Composable
-    override fun Content() {
-        CompositionLocalProvider(
-            AppNavigator provides Navigator(
-                LocalNavigator.currentOrThrow,
-                LocalBottomSheetNavigator.current
-            ),
-        ) {
-            content()
-        }
-    }
-}
-
-class StackScreen(private val content: @Composable () -> Unit) : Screen {
-    @Composable
-    override fun Content() {
-        CompositionLocalProvider(
-            AppNavigator provides Navigator(
-                LocalNavigator.currentOrThrow,
-                LocalBottomSheetNavigator.current
-            ),
-        ) {
-            content()
-        }
+        content()
     }
-}
 
-class SheetScreen(private val content: @Composable () -> Unit) : Screen {
-    @Composable
-    override fun Content() {
-        CompositionLocalProvider(
-            AppNavigator provides Navigator(
-                LocalNavigator.currentOrThrow,
-                LocalBottomSheetNavigator.current
-            ),
-        ) {
-            content()
-        }
-    }
-}
-
-class ModalScreen(
-    private val onClose: () -> Unit,
-    private val barrierDismissible: Boolean = true,
-    private val content: @Composable () -> Unit,
-) :
-    Screen {
-    @Composable
-    override fun Content() {
-        val navigator = Navigator(
-            LocalNavigator.currentOrThrow,
-            LocalBottomSheetNavigator.current
-        )
-        CompositionLocalProvider(
-            AppNavigator provides navigator,
-        ) {
-            Box(
-                modifier = Modifier.fillMaxSize().padding(horizontal = Spacing.XL)
-                    .background(Color.Transparent)
-                    .clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null,
-                        onClick = {
-                            if (barrierDismissible) {
-                                navigator.pop()
-                                onClose()
-                            }
-                        }
-                    ),
-                contentAlignment = Alignment.Center
-            ) {
-                Box(
-                    modifier = Modifier.clickable(
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = null
-                    ) {},
-                    contentAlignment = Alignment.Center
-                ) {
-                    content()
-                }
-            }
-        }
-    }
-}
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/application/Screen.kt

@@ -1,10 +1,12 @@
 package vn.momo.kits.application
 
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@@ -16,14 +18,18 @@ import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
+import androidx.compose.ui.zIndex
+import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
@@ -51,6 +57,9 @@ fun Screen(
     useAvoidKeyboard: Boolean = true,
     footer: @Composable (() -> Unit)? = null,
     headerRight: @Composable (() -> Unit)? = null,
+    fabProps: FabProps? = null,
+    animatedHeader: AnimatedHeader? = null,
+    layoutOffset: Dp = 56.dp,
     content: @Composable () -> Unit,
 ) {
     val keyboardController = LocalSoftwareKeyboardController.current
@@ -62,50 +71,108 @@ fun Screen(
         else -> 0.dp
     }
 
+    val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
+    val bottomPadding = min(indicator, 21.dp)
+    val scrollState = rememberScrollState()
+
+    val opacity by animateFloatAsState(
+        targetValue = ((scrollState.value / 114f)).coerceIn(0f, 1f)
+    )
+
+    val headerAnimated =
+        @Composable { animatedHeader?.composable?.invoke(scrollState.value) }
+
     Box(
-        Modifier.fillMaxSize().background(backgroundColor ?: AppTheme.current.colors.background.default)
+        Modifier.fillMaxSize()
+            .background(backgroundColor ?: AppTheme.current.colors.background.default)
     ) {
-        HeaderImage(headerType, headerBackground ?: AppTheme.current.assets.headerBackground)
+
+        if (animatedHeader === null) {
+            HeaderImage(
+                headerType,
+                headerBackground ?: AppTheme.current.assets.headerBackground
+            )
+        } else {
+            Box(
+                Modifier.zIndex(5f).background(Color.White.copy(alpha = opacity))
+                    .graphicsLayer { alpha = opacity }) {
+                HeaderImage(
+                    headerType,
+                    headerBackground ?: AppTheme.current.assets.headerBackground
+                )
+            }
+        }
+
+        Header(
+            headerType = headerType,
+            title = title,
+            titlePosition = titlePosition,
+            headerRight = headerRight,
+            isBack = isBack,
+            goBack = goBack,
+            opacity = opacity,
+            animatedHeader = animatedHeader,
+            scrollState = scrollState.value
+        )
+
         Column(
-            modifier = Modifier.fillMaxSize().pointerInput(Unit) {
-                detectTapGestures(onTap = {
-                    keyboardController?.hide()
-                })
-            },
+            modifier = Modifier.fillMaxSize()
+                .padding(top = if (animatedHeader === null && headerType !== HeaderType.NONE) AppStatusBar.current + 52.dp else 0.dp)
+                .pointerInput(Unit) {
+                    detectTapGestures(onTap = {
+                        keyboardController?.hide()
+                    })
+                }
+                .zIndex(1f),
         ) {
-            Header(
-                headerType = headerType,
-                title = title,
-                titlePosition = titlePosition,
-                headerRight = headerRight,
-                isBack = isBack,
-                goBack = goBack,
-            )
 
             Column(
                 modifier = if (scrollable) Modifier.weight(1f).padding(bottom = keyboardSize)
-                    .verticalScroll(rememberScrollState()) else
+                    .verticalScroll(scrollState) else
                     Modifier.padding(bottom = keyboardSize),
                 verticalArrangement = verticalArrangement,
                 horizontalAlignment = horizontalAlignment
             ) {
-                content()
+                Box {
+                    headerAnimated()
+                    Column {
+                        if (animatedHeader !== null) {
+                            Spacer(modifier = Modifier.padding(top = AppStatusBar.current + 52.dp + layoutOffset))
+                        }
+                        content()
+                    }
+                }
             }
 
             footer?.let {
-                Footer(footer, keyboardSize)
+                Footer(footer, keyboardSize, bottomPadding)
             }
         }
+
+        if (fabProps != null) {
+            FloatingButton(
+                scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
+                onClick = fabProps.onClick,
+                containerColor = AppTheme.current.colors.primary,
+                bottom = fabProps.bottom
+                    ?: if (footer != null) bottomPadding + 76.dp else bottomPadding + 12.dp,
+                icon = fabProps.icon,
+                iconColor = fabProps.iconColor,
+                text = fabProps.label,
+                size = fabProps.size,
+                position = fabProps.position ?: FABPosition.END,
+                keyboardSize = keyboardSize
+            )
+        }
     }
 }
 
 @Composable
-fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp) {
-    val indicator = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
+fun Footer(footer: @Composable (() -> Unit)? = null, keyboardSize: Dp = 0.dp, bottom: Dp = 0.dp) {
     Box(
         Modifier
-            .offset(y = - keyboardSize)
-            .padding(bottom = min(indicator, 21.dp))
+            .offset(y = -keyboardSize)
+            .padding(bottom = bottom)
             .shadow(
                 Colors.black_20.copy(alpha = 0.1f),
                 borderRadius = 0.dp,

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Badge.kt

@@ -18,10 +18,26 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.const.scaleSize
-import vn.momo.kits.utils.primaryColors
+
+
 
 @Composable
 fun Badge(label: String = "Label", backgroundColor: Color? = null) {
+    val primaryColors = listOf(
+        Color(0xFFF0F0F0),
+        Color(0xFFEB2F96),
+        Color(0xFF962AF0),
+        Color(0xFF4E4BFF),
+        Color(0xFF007AFF),
+        Color(0xFF13C2C2),
+        Color(0xFF34C759),
+        Color(0xFFA0D911),
+        Color(0xFFFFCC00),
+        Color(0xFFFA8C16),
+        Color(0xFFFA541C),
+        Color(0xFFF5222D)
+    )
+
     fun isNumber(label: String): Boolean {
         val numberRegex = "^\\d+$".toRegex()
         return numberRegex.matches(label)

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Button.kt

@@ -224,8 +224,6 @@ fun getTypeStyle(
  * @param enabled controls the enabled state of this button. When `false`,
  *     this component will not respond to user input, and it will appear
  *     visually disabled and disabled to accessibility services.
- * @param isRipple [Boolean] controls the ripple animation of button. When
- *     `false`, the button won't have ripple animation.
  * @param useTintColor [Boolean] controls color of the icon.
  */
 @Composable
@@ -238,7 +236,6 @@ fun Button(
     title: String = "Button",
     loading: Boolean = false,
     enabled: Boolean = true,
-    isRipple: Boolean = true,
     useTintColor: Boolean = true,
     isFull: Boolean = true,
     modifier: Modifier = Modifier,
@@ -247,8 +244,6 @@ fun Button(
         modifier
             .fillMaxWidth()
             .clip(RoundedCornerShape(size.value.radius)).clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = if (isRipple) rememberRipple() else null,
                 enabled = enabled,
                 onClick = onClick
             )
@@ -256,8 +251,6 @@ fun Button(
     } else {
         modifier
             .clip(RoundedCornerShape(size.value.radius)).clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = if (isRipple) rememberRipple() else null,
                 enabled = enabled,
                 onClick = onClick
             )

package/compose/src/commonMain/kotlin/vn/momo/kits/components/CheckBox.kt

@@ -56,8 +56,6 @@ fun CheckBox(
                 .clickable(
                     onClick = onCheckedChange,
                     enabled = !disabled,
-                    indication = rememberRipple(),
-                    interactionSource = remember { MutableInteractionSource() }
                 ),
         ) {
             if (checked) {

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Icon.kt

@@ -11,8 +11,7 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.skydoves.landscapist.ImageOptions
-import com.skydoves.landscapist.coil3.CoilImage
+import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.utils.Icons
 
@@ -29,13 +28,12 @@ fun Icon(
         Icons[source]
     }
     Box(modifier.size(size), contentAlignment = Alignment.Center) {
-        CoilImage(
+        AsyncImage(
             modifier = Modifier.fillMaxSize(),
-            imageOptions = ImageOptions(
-                contentScale = ContentScale.Fit,
-                colorFilter = color?.let { ColorFilter.tint(it) }
-            ),
-            imageModel = { icon },
+            model = icon,
+            contentDescription = null,
+            contentScale = ContentScale.Fit,
+            colorFilter = color?.let { ColorFilter.tint(it) }
         )
     }
 }

package/compose/src/commonMain/kotlin/vn/momo/kits/components/IconButton.kt

@@ -110,8 +110,6 @@ fun IconButton(
             .then(getIconStyle(type))
             .clip(RoundedCornerShape(size.value.radius))
             .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(),
                 enabled = type == ButtonType.DISABLED,
                 onClick = onClick
             ),

package/compose/src/commonMain/kotlin/vn/momo/kits/components/Image.kt

@@ -1,6 +1,11 @@
 package vn.momo.kits.components
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
@@ -10,9 +15,8 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
-import com.skydoves.landscapist.ImageOptions
-import com.skydoves.landscapist.coil3.CoilImage
-import org.jetbrains.compose.resources.ExperimentalResourceApi
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
 import vn.momo.kits.const.AppTheme
 
 data class Options(
@@ -22,38 +26,54 @@ data class Options(
     val alpha: Float = DefaultAlpha,
 )
 
-@OptIn(ExperimentalResourceApi::class)
+enum class ImageState {
+    Loading, Success, Error
+}
+
 @Composable
 fun Image(
-    source: String,
+    source: Any,
     modifier: Modifier = Modifier,
     options: Options? = null,
     loading: Boolean = true,
 ) {
     modifier.semantics {contentDescription = "img|$source"; testTag = "img|$source"}
-    var imageOptions = ImageOptions()
+    var imageOptions = Options()
+    var imageState by remember { mutableStateOf(ImageState.Loading) }
+
     options?.let {
-        imageOptions = ImageOptions(
+        imageOptions = Options(
             alignment = options.alignment,
             contentScale = options.contentScale,
             colorFilter = options.colorFilter,
             alpha = DefaultAlpha,
         )
     }
-    CoilImage(
-        modifier = modifier,
-        imageOptions = imageOptions,
-        imageModel = { source },
-        loading = {
-            if (loading) Skeleton()
-        },
-        failure = {
-            Icon(
+
+    Box(modifier = modifier) {
+        AsyncImage(
+            modifier = modifier,
+            model = source,
+            contentDescription = null,
+            contentScale = imageOptions.contentScale,
+            alignment = imageOptions.alignment,
+            colorFilter = imageOptions.colorFilter,
+            alpha = imageOptions.alpha,
+            onLoading = { imageState = ImageState.Loading },
+            onSuccess = { imageState = ImageState.Success },
+            onError = { imageState = ImageState.Error },
+        )
+        when (imageState) {
+            ImageState.Loading -> if (loading) Skeleton()
+            ImageState.Error -> Icon(
                 source = "media_fail",
                 color = AppTheme.current.colors.text.disable,
+                modifier = modifier
             )
+            ImageState.Success -> {}
         }
-    )
+    }
+
 }
 
 @Composable