@momo-kits/native-kits 0.151.2-test.8 → 0.152.1-beta.1

package/compose/build.gradle.kts

@@ -3,13 +3,23 @@ plugins {
     alias(libs.plugins.jetbrains.kotlin.multiplatform)
     alias(libs.plugins.compose)
     alias(libs.plugins.kotlin.compose.compiler)
+    id(libs.plugins.jetbrains.kotlin.cocoapods.get().pluginId)
     kotlin("plugin.serialization")
     id("maven-publish")
 }
+fun getVersionFromPackageJson(): String {
+    val packageJsonFile = file("../package.json")
+    val packageJsonText = packageJsonFile.readText()
+    val versionRegex = "\"version\"\\s*:\\s*\"([^\"]*)\"".toRegex()
+    val matchResult = versionRegex.find(packageJsonText)
+    return matchResult?.groupValues?.get(1) ?: throw IllegalStateException("Version not found in package.json")
+}
 
+val libName = "MoMoComposeKits"
 val libGroup = "vn.momo.kits"
 val libVersion = "0.0.1"
 
+version = getVersionFromPackageJson()
 kotlin {
     androidTarget {
         publishLibraryVariants("release")
@@ -26,11 +36,30 @@ kotlin {
 
     iosTargets.forEach { iosTarget ->
         iosTarget.binaries.framework {
-            baseName = "lib"
+            baseName = libName
             isStatic = true
         }
     }
 
+    cocoapods {
+        name = libName
+        summary = libName
+        homepage = libName
+        authors = "M_SERVICE"
+        ios.deploymentTarget = "13.0"
+
+        framework {
+            isStatic = true
+        }
+
+        pod("lottie-ios") {
+            moduleName = "Lottie"
+            version = "4.4.3"
+            extraOpts += listOf("-compiler-option", "-fmodules")
+        }
+    }
+
+
     sourceSets {
         val commonMain by getting {
             dependencies {
@@ -47,8 +76,6 @@ kotlin {
                 implementation(libs.coil.multiplatform.network.ktor)
                 implementation(libs.jetbrains.serialization.json)
                 implementation(libs.kotlinx.datetime)
-                implementation(libs.compottie)
-                implementation(libs.compottie.res)
                 api(project(":NativeMaxApi"))
             }
         }
@@ -57,6 +84,7 @@ kotlin {
                 implementation(libs.ktor.client.okhttp)
                 implementation(libs.jetbrains.coroutines.android)
                 api("androidx.activity:activity-compose:1.8.2")
+                implementation(libs.airbnb.lottie)
             }
         }
         if (isDebug) {

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

@@ -3,16 +3,29 @@ package vn.momo.kits.platform
 import android.annotation.SuppressLint
 import android.content.res.Resources
 import android.graphics.BlurMaskFilter
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffColorFilter
 import android.os.Build
+import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.DialogWindowProvider
+import com.airbnb.lottie.LottieProperty
+import com.airbnb.lottie.compose.LottieAnimation
+import com.airbnb.lottie.compose.LottieCompositionSpec
+import com.airbnb.lottie.compose.LottieConstants
+import com.airbnb.lottie.compose.rememberLottieComposition
+import com.airbnb.lottie.compose.rememberLottieDynamicProperties
+import com.airbnb.lottie.compose.rememberLottieDynamicProperty
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
+import vn.momo.kits.utils.readJson
 import androidx.activity.compose.BackHandler as AndroidBackHandler
 
 actual fun getPlatformName(): String = "Android"
@@ -50,4 +63,43 @@ actual fun getScreenHeight(): Dp {
     return getScreenDimensions().height.dp + if (getAndroidBuildVersion() >= 35) 0.dp else AppStatusBar.current + AppNavigationBar.current
 }
 
-actual fun getAndroidBuildVersion(): Int = Build.VERSION.SDK_INT
+actual fun getAndroidBuildVersion(): Int = Build.VERSION.SDK_INT
+
+@Composable
+actual fun LottieAnimation(
+    path: String,
+    tintColor: Color?,
+    bgColor: Color?,
+    modifier: Modifier
+) {
+    val json = readJson(path)
+
+    if (json.isEmpty()) {
+        Box(modifier)
+        return
+    }
+
+    val composition by rememberLottieComposition(
+        LottieCompositionSpec.JsonString(json)
+    )
+
+    val colorFilter = PorterDuffColorFilter(
+        tintColor?.toArgb() ?: Color.White.toArgb(),
+        PorterDuff.Mode.SRC_ATOP
+    )
+
+    val dynamicProperties = rememberLottieDynamicProperties(
+        rememberLottieDynamicProperty(
+            property = LottieProperty.COLOR_FILTER,
+            value = colorFilter,
+            keyPath = arrayOf("**")
+        )
+    )
+
+    LottieAnimation(
+        composition = composition,
+        iterations = LottieConstants.IterateForever,
+        dynamicProperties = if (tintColor != null) dynamicProperties else null,
+        modifier = modifier
+    )
+}

package/compose/src/commonMain/composeResources/files/lottie_circle_loader.json

@@ -1 +1 @@
-{"v":"5.10.2","fr":30,"ip":0,"op":50,"w":100,"h":100,"nm":"Spinner3_white","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"loading","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0],"e":[200]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":25,"s":[200],"e":[360]},{"t":35}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.392],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0],"e":[100]},{"t":50}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[100]},{"t":28}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":50,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":15,"s":[0],"e":[200]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":27,"s":[200],"e":[360]},{"t":37}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.392],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":20,"s":[0],"e":[100]},{"t":49}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[100]},{"t":30}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":30,"op":50,"st":2,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"base","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":50,"st":0,"ct":1,"bm":0}],"markers":[]}
+{"v":"5.10.2","fr":30,"ip":0,"op":20,"w":100,"h":100,"nm":"Spinner3.1_Refine","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":12,"ty":4,"nm":"loading 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[360]},{"t":20}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[50],"e":[35]},{"t":20}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"base pink 2","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.996078431373,0.972549019608,0.988235294118,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":20,"st":0,"ct":1,"bm":0}],"markers":[]}

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

@@ -135,7 +135,12 @@ fun Screen(
 
         Column(
             modifier = Modifier.fillMaxSize()
-                .padding(top = if (animatedHeader === null && headerType !== HeaderType.NONE) statusBarHeight + HEADER_HEIGHT.dp else 0.dp)
+                .padding( top = when {
+                    animatedHeader != null -> 0.dp
+                    headerType == HeaderType.NONE -> 0.dp
+                    headerTransparent -> 0.dp
+                    else -> statusBarHeight + HEADER_HEIGHT.dp
+                })
                 .pointerInput(Unit) {
                     detectTapGestures(onTap = {
                         keyboardController?.hide()

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

@@ -12,29 +12,24 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
+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.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import io.github.alexzhirkevich.compottie.Compottie
-import io.github.alexzhirkevich.compottie.LottieCompositionSpec
-import io.github.alexzhirkevich.compottie.animateLottieCompositionAsState
-import io.github.alexzhirkevich.compottie.rememberLottieComposition
-import io.github.alexzhirkevich.compottie.rememberLottiePainter
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.uikits.resources.Res
+import vn.momo.kits.platform.LottieAnimation
 
 enum class ButtonType {
     PRIMARY,
@@ -112,9 +107,10 @@ fun getIconSpace(size: Size): Dp {
 }
 
 @Composable
-fun getTextColor(type: ButtonType): Color {
+fun getTextColor(loading: Boolean, type: ButtonType): Color {
     val theme = AppTheme.current
-    return remember(type, theme) {
+
+    return remember(type, theme, loading) {
         when (type) {
             ButtonType.DISABLED -> theme.colors.text.disable
             ButtonType.PRIMARY -> Colors.black_01
@@ -123,28 +119,28 @@ fun getTextColor(type: ButtonType): Color {
             ButtonType.TONAL -> theme.colors.primary
             ButtonType.DANGER -> Colors.black_01
             ButtonType.TEXT -> theme.colors.primary
-        }
+        }.withLoading(loading)
     }
 }
 
 @Composable
 fun RenderTitle(size: Size, title: String = "", type: ButtonType) {
     val style = remember(size) { getStyle(size) }
-    val color = getTextColor(type)
+    val color = TextColor.current
     Text(style = style, text = title, color = color, overflow = TextOverflow.Ellipsis, maxLines = 1)
 }
 
 @Composable
 fun RenderLeading(
-    loading: Boolean,
     size: Size,
     useTintColor: Boolean = true,
-    type: ButtonType,
     iconLeft: String = "",
 ) {
+    val loading = IsLoading.current
+    val bgColor = BackgroundColor.current
     val iconSize = remember(size) { getIconSize(size) }
     val marginRight = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) getTextColor(type) else Color.Unspecified
+    val color = if (useTintColor) TextColor.current else Color.Unspecified
 
     Row(
         verticalAlignment = Alignment.CenterVertically,
@@ -152,23 +148,11 @@ fun RenderLeading(
     ) {
         if (loading) {
             Box(Modifier.padding(end = marginRight)) {
-                val composition by rememberLottieComposition {
-                    LottieCompositionSpec.JsonString(
-                        Res.readBytes("files/lottie_circle_loader.json").decodeToString()
-                    )
-                }
-
-                val progress by animateLottieCompositionAsState(
-                    composition = composition,
-                    iterations = Compottie.IterateForever
-                )
-
-                Image(
-                    source = rememberLottiePainter(
-                        composition = composition,
-                        progress = { progress }
-                    ),
+                LottieAnimation(
                     modifier = Modifier.size(iconSize),
+                    bgColor = bgColor,
+                    tintColor = color,
+                    path = "files/lottie_circle_loader"
                 )
             }
         } else {
@@ -189,9 +173,8 @@ fun RenderTrailing(
     iconRight: String,
     size: Size,
     useTintColor: Boolean,
-    type: ButtonType,
 ) {
-    val color = if (useTintColor) getTextColor(type) else Color.Unspecified
+    val color = if (useTintColor) TextColor.current else Color.Unspecified
     val marginLeft = remember(size) { getIconSpace(size) }
 
     if (iconRight.isNotEmpty()) {
@@ -212,39 +195,62 @@ fun getTypeStyle(
     size: Size,
 ): Modifier {
     val theme = AppTheme.current
+    val bgColor = BackgroundColor.current
     val radius = remember(size) { size.value.radius }
+    val modifier = Modifier.background(bgColor)
 
-    return remember(type, color, theme, radius) {
+    return remember(type, color, theme, radius, bgColor) {
         when (type) {
-            ButtonType.DISABLED -> Modifier.background(theme.colors.background.disable)
+            ButtonType.DISABLED -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-            ButtonType.PRIMARY -> Modifier.background(theme.colors.primary)
+            ButtonType.PRIMARY -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-            ButtonType.SECONDARY -> Modifier
-                .background(theme.colors.background.surface)
+            ButtonType.SECONDARY -> modifier
                 .border(1.dp, theme.colors.border.default, RoundedCornerShape(radius))
 
-            ButtonType.OUTLINE -> Modifier
-                .background(theme.colors.background.surface)
+            ButtonType.OUTLINE -> modifier
                 .border(
                     1.dp,
                     color ?: theme.colors.primary,
                     RoundedCornerShape(radius)
                 )
 
-            ButtonType.TONAL -> Modifier.background(theme.colors.background.tonal)
+            ButtonType.TONAL -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-            ButtonType.DANGER -> Modifier.background(theme.colors.error.primary)
+            ButtonType.DANGER -> modifier
                 .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
 
-            ButtonType.TEXT -> Modifier
+            ButtonType.TEXT -> modifier
+        }
+    }
+}
+
+@Composable
+fun getButtonBackgroundColor(
+    loading: Boolean,
+    type: ButtonType
+): Color {
+    val theme = AppTheme.current
+
+    return remember(loading, type, theme) {
+        when (type) {
+            ButtonType.DISABLED -> theme.colors.background.disable.withLoading(loading)
+            ButtonType.PRIMARY -> theme.colors.primary.withLoading(loading)
+            ButtonType.SECONDARY -> theme.colors.background.surface.withLoading(loading)
+            ButtonType.OUTLINE -> theme.colors.background.surface.withLoading(loading)
+            ButtonType.TONAL -> theme.colors.background.tonal.withLoading(loading)
+            ButtonType.DANGER -> theme.colors.error.primary.withLoading(loading)
+            ButtonType.TEXT -> Color.Unspecified
         }
     }
 }
 
+fun Color.withLoading(loading: Boolean): Color =
+    this.copy(alpha = if (loading) 0.75f else 1f)
+
 /**
  * @param onClick called when this button is clicked
  * @param type [ButtonType] that define the type of button.
@@ -286,30 +292,36 @@ fun Button(
     )
 
     val sizeSpecs = remember(size) { size.value }
-
-    Row(
-        modifier = customModifier
-            .then(getTypeStyle(type, size = size))
-            .padding(horizontal = sizeSpecs.padding)
-            .defaultMinSize(minWidth = sizeSpecs.width)
-            .height(sizeSpecs.height)
-            .alpha(if(loading) 0.75f else 1f),
-        horizontalArrangement = Arrangement.Center,
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        RenderLeading(
-            loading,
-            size,
-            useTintColor,
-            type,
-            iconLeft = iconLeft
-        )
-        RenderTitle(size, title, type = type)
-        RenderTrailing(
-            size = size,
-            useTintColor = useTintColor,
-            type = type,
-            iconRight = iconRight
-        )
+    CompositionLocalProvider(
+        IsLoading provides loading,
+        BackgroundColor provides getButtonBackgroundColor(loading, type),
+        TextColor provides getTextColor(loading, type)
+    ){
+        Row(
+            modifier = customModifier
+                .then(getTypeStyle(type, size = size))
+                .padding(horizontal = sizeSpecs.padding)
+                .defaultMinSize(minWidth = sizeSpecs.width)
+                .height(sizeSpecs.height),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            RenderLeading(
+                size = size,
+                useTintColor = useTintColor,
+                iconLeft = iconLeft
+            )
+            RenderTitle(size, title, type = type)
+            RenderTrailing(
+                size = size,
+                useTintColor = useTintColor,
+                iconRight = iconRight
+            )
+        }
     }
 }
+
+private val IsLoading = staticCompositionLocalOf<Boolean> { false }
+private val BackgroundColor = staticCompositionLocalOf<Color> { Color.Transparent }
+private val TextColor = staticCompositionLocalOf<Color> { Color.Transparent }
+

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

@@ -94,6 +94,7 @@ fun Chip(
                 },
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.weight(1f, fill = false),
             )
         }
 

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

@@ -2,6 +2,7 @@ package vn.momo.kits.components.datetimepicker
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import kotlinx.datetime.Clock
 import kotlinx.datetime.DatePeriod
 import kotlinx.datetime.LocalDateTime
 import kotlinx.datetime.TimeZone
@@ -9,8 +10,6 @@ import kotlinx.datetime.minus
 import kotlinx.datetime.number
 import kotlinx.datetime.plus
 import kotlinx.datetime.toLocalDateTime
-import kotlin.time.Clock.System.now
-import kotlin.time.ExperimentalTime
 
 /**
  * Format a LocalDateTime object into a string
@@ -150,9 +149,8 @@ val timeMode = listOf("AM", "PM")
 /**
  * Get today's date
  */
-@OptIn(ExperimentalTime::class)
 fun getCurrentDateTime(): LocalDateTime {
-    return now().toLocalDateTime(TimeZone.currentSystemDefault())
+    return Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
 }
 
 /**