@momo-kits/native-kits 0.161.1-beta.15-debug → 0.161.2-beta.1-debug

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

@@ -59,8 +59,9 @@ import vn.momo.kits.modifier.DeprecatedModifier
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.shadow
 import vn.momo.kits.navigation.component.SnackBar
-import vn.momo.kits.platform.getOSVersion
+import vn.momo.kits.platform.supportsImePadding
 import vn.momo.kits.utils.getAppStatusBarHeight
+import vn.momo.kits.utils.getNavigationBarHeight
 
 enum class HeaderType {
     DEFAULT,
@@ -102,7 +103,7 @@ fun Screen(
     val keyboardController = LocalSoftwareKeyboardController.current
 
     val isKeyboardVisible = isKeyboardVisible()
-    val indicator = getAppStatusBarHeight()
+    val indicator = getNavigationBarHeight()
     val bottomPadding = if (isKeyboardVisible) 0.dp else indicator
 
     val headerHeight = if (animatedHeader !== null)
@@ -134,7 +135,7 @@ fun Screen(
         Box(
             Modifier.fillMaxSize()
                 .background(backgroundColor ?: AppTheme.current.colors.background.default)
-                .conditional(useAvoidKeyboard && getOSVersion() > 29) {
+                .conditional(useAvoidKeyboard && supportsImePadding()) {
                     imePadding()
                 }.then(DeprecatedModifier())
         ) {

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

@@ -21,6 +21,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.PathEffect
 import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.unit.dp
+import io.ktor.util.Platform
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
 import vn.momo.kits.platform.getPlatformName
 import vn.momo.kits.platform.getStatusBarHeight
 

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

@@ -221,6 +221,7 @@ fun Input(
     onBlur: () -> Unit = {},
     loading: Boolean = false,
     required: Boolean = false,
+    maxLength: Int? = null,
     fontWeight: InputFontWeight = InputFontWeight.REGULAR,
     keyboardType: KeyboardType = KeyboardType.Text,
     modifier: Modifier = Modifier,
@@ -319,7 +320,10 @@ fun Input(
                         onBlur()
                     }
                 },
-            onValueChange = onChangeText,
+            onValueChange = { newText ->
+                val limitedText = maxLength?.let { newText.take(it) } ?: newText
+                onChangeText(limitedText)
+            },
             decorationBox = { innerTextField ->
                 // Floating label
                 if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {

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

@@ -8,6 +8,7 @@ import androidx.compose.animation.core.rememberInfiniteTransition
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.ui.draw.alpha
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -129,8 +130,11 @@ fun InputOTP(
                 if (!it.isFocused && isBlurred) onBlur()
                 if (it.isFocused && !isBlurred) isBlurred = true
             },
-            decorationBox = { _ ->
+            decorationBox = { innerTextField ->
                 Box {
+                    Box(
+                        modifier = Modifier.fillMaxWidth().height(56.dp).alpha(0f)
+                    ) { innerTextField() }
                     if (floatingValue.isNotEmpty()) {
                         Box(
                             modifier = Modifier.wrapContentSize()

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

@@ -105,6 +105,8 @@ data class InputSearchProps(
     val iconModifier: Modifier = Modifier,
     val onClearPress: () -> Unit = {},
     val leftPosition: Dp? = null,
+    val placeholderCustomRender: (@Composable () -> Unit)? = null,
+    val searchIcon: (@Composable () -> Unit)? = null
 )
 
 @Composable
@@ -145,12 +147,13 @@ fun InputSearch(
         )
     }
 
-    Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier
-        .fillMaxWidth()
-        .height(36.dp)
-        .conditional(IsShowBaseLineDebug) {
-            border(1.dp, Colors.blue_03)
-        }
+    Row(
+        verticalAlignment = Alignment.CenterVertically, modifier = Modifier
+            .fillMaxWidth()
+            .height(36.dp)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
     ) {
         BasicTextField(
             enabled = !inputSearchProps.disabled,
@@ -184,13 +187,14 @@ fun InputSearch(
                         horizontalArrangement = Arrangement.Start,
                         verticalAlignment = Alignment.CenterVertically
                     ) {
+
                         Row(
                             modifier = Modifier.padding(
                                 horizontal = Spacing.M
                             ),
                             verticalAlignment = Alignment.CenterVertically
                         ) {
-                            Icon(
+                            inputSearchProps.searchIcon?.invoke() ?: Icon(
                                 source = "navigation_search",
                                 modifier = Modifier.padding(end = Spacing.XS),
                                 size = 24.dp,
@@ -198,13 +202,14 @@ fun InputSearch(
                             )
                             Box(Modifier.weight(1f)) {
                                 if (inputSearchProps.text.value.isEmpty()) {
-                                    Text(
-                                        text = inputSearchProps.placeholder,
-                                        style = placeHolderStyle,
-                                        maxLines = 1,
-                                        color = placeholderColor,
-                                        overflow = TextOverflow.Ellipsis
-                                    )
+                                    inputSearchProps.placeholderCustomRender?.invoke()
+                                        ?: Text(
+                                            text = inputSearchProps.placeholder,
+                                            style = placeHolderStyle,
+                                            maxLines = 1,
+                                            color = placeholderColor,
+                                            overflow = TextOverflow.Ellipsis
+                                        )
                                 }
                                 innerTextField()
                             }

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

@@ -0,0 +1,17 @@
+package vn.momo.kits.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import vn.momo.kits.application.ScaleSizeMaxRate
+
+@Composable
+fun ScaleSizeScope(
+    scaleSizeMaxRate: Float? = null,
+    content: @Composable () -> Unit
+) {
+    CompositionLocalProvider(
+        ScaleSizeMaxRate provides scaleSizeMaxRate,
+    ) {
+        content()
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -7,11 +7,15 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
-import androidx.compose.ui.unit.*
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.TextUnitType
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import org.jetbrains.compose.resources.Font
 import org.jetbrains.compose.resources.FontResource
 import org.jetbrains.compose.resources.InternalResourceApi
-import vn.momo.kits.application.UseFontScaleSystem
+import vn.momo.kits.application.ScaleSizeMaxRate
 import vn.momo.kits.platform.getScreenDimensions
 import vn.momo.uikits.resources.Res
 import vn.momo.uikits.resources.momosignature
@@ -29,23 +33,34 @@ import kotlin.math.max
 import kotlin.math.min
 
 const val DEFAULT_SCREEN_SIZE = 375f
-const val MAX_FONT_SCALE = 1.2f
+const val MAX_FONT_SCALE = 1.5f
+const val MAX_DEVICE_SCALE = 5
 
 @Composable
 fun scaleSize(size: Float): Float {
-    if (UseFontScaleSystem) {
-        val deviceWidth = getScreenDimensions().width
-        val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
-        val fontScale = LocalDensity.current.fontScale
+    val scaleSizeMaxRate: Float = ScaleSizeMaxRate.current ?: MAX_FONT_SCALE
+    val deviceWidth = getScreenDimensions().width
+    val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
 
-        val maxSize = size * MAX_FONT_SCALE
-        val fontSizeScaleDevice = if (deviceScale > 1) deviceScale * size else size
-        val fontSizeScaleOS = if (fontScale > 1) fontScale * size else size
+    val density = LocalDensity.current
+    val fontScale = density.fontScale
+
+    var fontSizeScaleDevice = size
+    var fontSizeScaleOS = size
 
-        return min(max(fontSizeScaleDevice, fontSizeScaleOS), maxSize)
+    if (deviceScale > 1) {
+        fontSizeScaleDevice =
+            min(deviceScale * fontSizeScaleDevice, fontSizeScaleDevice + MAX_DEVICE_SCALE)
     }
 
-    return size
+    if (fontScale > 1) {
+        fontSizeScaleOS = min(fontScale * fontSizeScaleOS, fontSizeScaleOS * scaleSizeMaxRate)
+    }
+
+    return max(
+        fontSizeScaleDevice,
+        fontSizeScaleOS
+    )
 }
 
 @Composable

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/Navigation.kt

@@ -96,4 +96,5 @@ data class KeyboardOptions(
 data class ScrollData(
     val scrollable: Boolean = true,
     val scrollState: ScrollableState? = null,
+    val scrollToTopCallback: (() -> Unit)? = null,
 )

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

@@ -8,9 +8,6 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.toRoute
-import kotlinx.coroutines.flow.catch
-import kotlinx.coroutines.flow.distinctUntilChanged
-import kotlinx.coroutines.flow.map
 import vn.momo.kits.application.*
 import vn.momo.kits.const.*
 import vn.momo.kits.platform.ProvideNavigationEventDispatcherOwner
@@ -52,19 +49,6 @@ fun NavigationContainer(
         }
     }
 
-    LaunchedEffect(maxApi) {
-        val api = maxApi ?: return@LaunchedEffect
-        runCatching {
-            api.observer("use_font_scale")
-                .map { parseUseFontScale(it) }
-                .distinctUntilChanged()
-                .catch { /* ignore observer errors, keep current value */ }
-                .collect { enabled ->
-                    UseFontScaleSystem = enabled
-                }
-        }
-    }
-
     val startDestination = DynamicScreenRegistry.register(initialScreenName, initialScreen, options)
 
     ProvideNavigationEventDispatcherOwner {
@@ -77,6 +61,7 @@ fun NavigationContainer(
             ApplicationContext provides mergedContext,
             AppConfig provides config,
             AppLanguage provides language,
+            ScaleSizeMaxRate provides mergedContext?.scaleSizeMaxRate,
         ) {
             LaunchedEffect(Unit) {
                 setNavigator?.invoke(navigator)
@@ -154,15 +139,3 @@ fun NavigationContainer(
 val LocalMaxApi = staticCompositionLocalOf<IMaxApi?> {
     error("No MaxApi provided")
 }
-
-private fun parseUseFontScale(raw: Any?): Boolean = when (raw) {
-    null -> true
-    is Boolean -> raw
-    is String -> raw.isBlank() || !raw.equals("false", ignoreCase = true)
-    is Number -> raw.toInt() != 0
-    is Map<*, *> -> {
-        val nested = raw["response"] ?: raw["value"] ?: raw["data"]
-        if (nested === raw) true else parseUseFontScale(nested)
-    }
-    else -> true
-}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/ScrollToTop.kt

@@ -0,0 +1,8 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.runtime.Composable
+
+@Composable
+internal expect fun RegisterScrollToTop(callback: (() -> Unit)?)
+
+

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -62,7 +62,7 @@ import vn.momo.kits.navigation.component.HeaderRight
 import vn.momo.kits.navigation.component.HeaderType
 import vn.momo.kits.navigation.component.InputSearchType
 import vn.momo.kits.platform.BackHandler
-import vn.momo.kits.platform.getOSVersion
+import vn.momo.kits.platform.supportsImePadding
 import vn.momo.kits.navigation.tracking.ScreenTracker
 import vn.momo.kits.navigation.tracking.ScreenTrackingState
 import kotlinx.coroutines.delay
@@ -150,6 +150,10 @@ internal fun StackScreen(
     val footerHeightPx = remember { mutableIntStateOf(0) }
     val headerRightWidthPx = remember { mutableIntStateOf(0) }
 
+    if (navigation.options.scrollData.scrollToTopCallback != null) {
+        RegisterScrollToTop(navigation.options.scrollData.scrollToTopCallback)
+    }
+
     BackHandler(true) { navigator.onBackSafe() }
 
     CompositionLocalProvider(
@@ -160,15 +164,16 @@ internal fun StackScreen(
         LocalFooterHeightPx provides footerHeightPx,
         LocalHeaderRightWidthPx provides headerRightWidthPx
     ) {
-        Box(Modifier
-            .fillMaxSize()
-            .background(options.backgroundColor ?: AppTheme.current.colors.background.default)
-            .conditional(options.keyboardOptions.keyboardShouldPersistTaps) {
-                hideKeyboardOnTap()
-            }
-            .conditional(options.keyboardOptions.useAvoidKeyboard && getOSVersion() > 29) {
-                imePadding()
-            }
+        Box(
+            Modifier
+                .fillMaxSize()
+                .background(options.backgroundColor ?: AppTheme.current.colors.background.default)
+                .conditional(options.keyboardOptions.keyboardShouldPersistTaps) {
+                    hideKeyboardOnTap()
+                }
+                .conditional(options.keyboardOptions.useAvoidKeyboard && supportsImePadding()) {
+                    imePadding()
+                }
         ) {
             Box(Modifier.zIndex(1f)) {
                 HeaderBackground()
@@ -178,7 +183,7 @@ internal fun StackScreen(
                 Header(onBackHandler)
             }
 
-            Column (Modifier.zIndex(6f)) {
+            Column(Modifier.zIndex(6f)) {
                 SearchAnimated(isScrollInProgress = scrollInProcess)
             }
 
@@ -190,7 +195,7 @@ internal fun StackScreen(
                 FooterContent()
             }
 
-            Box(Modifier.zIndex(7f)){
+            Box(Modifier.zIndex(7f)) {
                 FloatingContent()
             }
 
@@ -200,15 +205,15 @@ internal fun StackScreen(
 }
 
 @Composable
-fun FloatingContent(){
+fun FloatingContent() {
     val options = LocalOptions.current
     val density = LocalDensity.current
     val footerHeightPx = LocalFooterHeightPx.current
     val scrollState = LocalScrollState.current
 
     val fabProps = options.floatingButtonProps ?: return
-    val bottomPadding = fabProps.bottom ?:
-    (Spacing.M + if (options.footerComponent != null) with(density){ footerHeightPx.intValue.toDp() } else 0.dp)
+    val bottomPadding = fabProps.bottom
+        ?: (Spacing.M + if (options.footerComponent != null) with(density) { footerHeightPx.intValue.toDp() } else 0.dp)
 
     FloatingButton(
         scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
@@ -224,17 +229,19 @@ fun FloatingContent(){
 }
 
 @Composable
-fun ColumnScope.MainContent(content: @Composable ()-> Unit){
+fun ColumnScope.MainContent(content: @Composable () -> Unit) {
     val options = LocalOptions.current
     val inputSearchType = getInputSearchType(options)
     val density = LocalDensity.current
     val scrollState = LocalScrollState.current
 
-    Spacer(Modifier.height(
-        if (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent))
-            AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp)
+    Spacer(
+        Modifier.height(
+            if (options.headerType is HeaderType.DefaultOrExtended || (options.headerType is HeaderType.Transparent && !options.headerType.isFullScreenContent))
+                AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp
+        )
     )
-    if (inputSearchType == InputSearchType.Animated){
+    if (inputSearchType == InputSearchType.Animated) {
         val scrollDp = with(density) { scrollState.value.toDp() }
 
         val animatedTopPadding by animateDpAsState(
@@ -243,17 +250,18 @@ fun ColumnScope.MainContent(content: @Composable ()-> Unit){
         )
         Spacer(Modifier.height(animatedTopPadding))
     }
-    Column (Modifier
-        .fillMaxWidth()
-        .weight(1f)
-        .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
-            verticalScroll(scrollState)
-        }
+    Column(
+        Modifier
+            .fillMaxWidth()
+            .weight(1f)
+            .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
+                verticalScroll(scrollState)
+            }
     ) {
         ScreenContent(content = content)
     }
 
-    if (options.footerComponent != null){
+    if (options.footerComponent != null) {
         val footerHeight = LocalFooterHeightPx.current
         val footerHeightDp = with(density) { footerHeight.value.toDp() }
         Spacer(Modifier.height(footerHeightDp))
@@ -261,17 +269,17 @@ fun ColumnScope.MainContent(content: @Composable ()-> Unit){
 }
 
 @Composable
-fun ScreenContent(content: @Composable () -> Unit){
+fun ScreenContent(content: @Composable () -> Unit) {
     val scrollState = LocalScrollState.current
     val options = LocalOptions.current
 
-    if (options.headerType is HeaderType.Animated){
+    if (options.headerType is HeaderType.Animated) {
         val animatedHeader = options.headerType
         Box {
-            Box(Modifier.fillMaxWidth().aspectRatio(animatedHeader.aspectRatio.value)){
+            Box(Modifier.fillMaxWidth().aspectRatio(animatedHeader.aspectRatio.value)) {
                 animatedHeader.composable.invoke(scrollState.value)
             }
-            Box(Modifier.offset(x = 0.dp, y = AppStatusBar.current + HEADER_HEIGHT.dp + animatedHeader.layoutOffSet)){
+            Box(Modifier.offset(x = 0.dp, y = AppStatusBar.current + HEADER_HEIGHT.dp + animatedHeader.layoutOffSet)) {
                 content()
             }
         }
@@ -281,9 +289,9 @@ fun ScreenContent(content: @Composable () -> Unit){
 }
 
 @Composable
-fun FooterContent(){
+fun FooterContent() {
     val options = LocalOptions.current
-    if (options.footerComponent != null){
+    if (options.footerComponent != null) {
         val ime = WindowInsets.ime
         val density = LocalDensity.current
         val imeBottom = ime.getBottom(density)
@@ -295,11 +303,11 @@ fun FooterContent(){
 }
 
 @Composable
-fun OverplayView(bottomTabIndex: Int, id: Int){
+fun OverplayView(bottomTabIndex: Int, id: Int) {
     val overplayType = OverplayComponentRegistry.getOverplayType()
 
     if (overplayType != null) {
-        Box(Modifier.zIndex(if (overplayType == OverplayComponentType.SNACK_BAR) 3f else 8f).fillMaxSize()){
+        Box(Modifier.zIndex(if (overplayType == OverplayComponentType.SNACK_BAR) 3f else 8f).fillMaxSize()) {
             if (bottomTabIndex != -1) return@Box
             if (OverplayComponentRegistry.currentRootId() != id) return@Box
             OverplayComponentRegistry.OverlayComponent()
@@ -322,22 +330,24 @@ fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {
     Box(Modifier.onGloballyPositioned {
         if (footerHeightPx.intValue != it.size.height) footerHeightPx.intValue = it.size.height
     }) {
-        Box(Modifier
-            .fillMaxWidth()
-            .background(AppTheme.current.colors.background.surface)
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .padding(top = Spacing.S, start = Spacing.M, end = Spacing.M, bottom = bottomPadding + Spacing.S)
-        ){
+        Box(
+            Modifier
+                .fillMaxWidth()
+                .background(AppTheme.current.colors.background.surface)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(top = Spacing.S, start = Spacing.M, end = Spacing.M, bottom = bottomPadding + Spacing.S)
+        ) {
             footerComponent.invoke()
         }
 
-        Box(modifier = Modifier
-            .fillMaxWidth()
-            .height(6.dp)
-            .offset(x = 0.dp, y = (-6).dp)
-            .background(shadowBrush)
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(6.dp)
+                .offset(x = 0.dp, y = (-6).dp)
+                .background(shadowBrush)
         )
     }
 }
@@ -347,6 +357,7 @@ data class InputSearchLayoutParams(
     val startPadding: Dp,
     val endPadding: Dp
 )
+
 @Composable
 fun SearchAnimated(
     isScrollInProgress: Boolean
@@ -461,6 +472,7 @@ internal fun isKeyboardVisible(): Boolean {
     val density = LocalDensity.current
     return ime.getBottom(density) > 0
 }
+
 private fun quantize(value: Int, stepPx: Int): Int {
     if (stepPx <= 1) return value
     return (value / stepPx) * stepPx
@@ -540,13 +552,15 @@ internal val LocalOptions = staticCompositionLocalOf<NavigationOptions> { error(
 
 val StackScreenScrollableState = staticCompositionLocalOf<ScrollableState?> { null }
 
-internal fun getInputSearchType(options: NavigationOptions): InputSearchType{
+internal fun getInputSearchType(options: NavigationOptions): InputSearchType {
     return when (val headerType = options.headerType) {
         is HeaderType.DefaultOrExtended -> when {
             headerType.inputSearchProps == null -> InputSearchType.None
             headerType.useAnimated -> InputSearchType.Animated
             else -> InputSearchType.Header
         }
+
         else -> InputSearchType.None
     }
 }
+

package/compose/src/commonMain/kotlin/vn/momo/kits/platform/ComposeLottieAnimation.kt

@@ -0,0 +1,62 @@
+package vn.momo.kits.platform
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import io.github.alexzhirkevich.compottie.Compottie
+import io.github.alexzhirkevich.compottie.ExperimentalCompottieApi
+import io.github.alexzhirkevich.compottie.LottieCompositionSpec
+import io.github.alexzhirkevich.compottie.dynamic.rememberLottieDynamicProperties
+import io.github.alexzhirkevich.compottie.rememberLottieComposition
+import io.github.alexzhirkevich.compottie.rememberLottiePainter
+import vn.momo.kits.utils.readJson
+
+@OptIn(ExperimentalCompottieApi::class)
+@Composable
+internal fun ComposeLottieAnimation(
+    path: String,
+    tintColor: Color?,
+    bgColor: Color?,
+    modifier: Modifier,
+) {
+    val json = readJson(path)
+
+    if (json.isEmpty()) {
+        Box(modifier.background(bgColor ?: Color.Transparent))
+        return
+    }
+
+    val composition by rememberLottieComposition(json) {
+        LottieCompositionSpec.JsonString(json)
+    }
+
+    // Recolor only the fill/stroke color slots (matching the native lottie-ios per-keypath tint)
+    // instead of a global ColorFilter.tint, which would flatten a multicolor animation to a silhouette.
+    val dynamicProperties = if (tintColor != null) {
+        rememberLottieDynamicProperties(tintColor) {
+            shapeLayer("**") {
+                fill("**") { color { tintColor } }
+                stroke("**") { color { tintColor } }
+            }
+        }
+    } else {
+        null
+    }
+
+    Box(modifier.background(bgColor ?: Color.Transparent)) {
+        Image(
+            painter = rememberLottiePainter(
+                composition = composition,
+                iterations = Compottie.IterateForever,
+                dynamicProperties = dynamicProperties,
+            ),
+            contentDescription = null,
+            modifier = Modifier.fillMaxSize(),
+        )
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/platform/Platform.kt

@@ -30,14 +30,35 @@ expect fun ProvideNavigationEventDispatcherOwner(content: @Composable () -> Unit
 @Composable
 expect fun getScreenHeight(): Dp
 
-expect fun getOSVersion(): Int
+sealed interface OSVersion {
+    val value: Int
+    data class Android(val sdk: Int) : OSVersion { override val value: Int get() = sdk }
+    data class IOS(val major: Int) : OSVersion { override val value: Int get() = major }
 
+    operator fun compareTo(other: Int): Int = value.compareTo(other)
+}
+expect fun getOSVersion(): OSVersion
+
+fun supportsImePadding(): Boolean = when (val v = getOSVersion()) {
+    is OSVersion.Android -> v.sdk > 29
+    is OSVersion.IOS -> true
+}
+
+/**
+ * @param useCompose when `true`, renders via the pure-Compose Compottie engine instead of the
+ * platform-native engine (airbnb-lottie on Android, lottie-ios on iOS). Defaults to `false` for
+ * backward compatibility. Note: when `useCompose = true`, `tintColor` recolors only the fill/stroke
+ * color slots (matching the native lottie-ios per-keypath tint), so gradient and text-layer colors
+ * are left untinted; `placedAsOverlay` is a no-op.
+ */
 @Composable
 expect fun LottieAnimation(
     path: String,
     tintColor: Color? = null,
     bgColor: Color? = null,
-    modifier: Modifier = Modifier
+    placedAsOverlay: Boolean = false,
+    modifier: Modifier = Modifier,
+    useCompose: Boolean = false
 )
 
 expect fun NativePaint.setColor(