@momo-kits/native-kits 0.151.2-test.11 → 0.151.2-test.13

package/compose/MoMoComposeKits.podspec

@@ -0,0 +1,54 @@
+Pod::Spec.new do |spec|
+    spec.name                     = 'MoMoComposeKits'
+    spec.version                  = '0.0.1'
+    spec.homepage                 = 'MoMoComposeKits'
+    spec.source                   = { :http=> ''}
+    spec.authors                  = 'M_SERVICE'
+    spec.license                  = ''
+    spec.summary                  = 'MoMoComposeKits'
+    spec.vendored_frameworks      = 'build/cocoapods/framework/compose.framework'
+    spec.libraries                = 'c++'
+    spec.ios.deployment_target    = '13.0'
+    spec.dependency 'lottie-ios', '4.4.3'
+                
+    if !Dir.exist?('build/cocoapods/framework/compose.framework') || Dir.empty?('build/cocoapods/framework/compose.framework')
+        raise "
+
+        Kotlin framework 'compose' doesn't exist yet, so a proper Xcode project can't be generated.
+        'pod install' should be executed after running ':generateDummyFramework' Gradle task:
+
+            ./gradlew :compose:generateDummyFramework
+
+        Alternatively, proper pod installation is performed during Gradle sync in the IDE (if Podfile location is set)"
+    end
+                
+    spec.xcconfig = {
+        'ENABLE_USER_SCRIPT_SANDBOXING' => 'NO',
+    }
+                
+    spec.pod_target_xcconfig = {
+        'KOTLIN_PROJECT_PATH' => ':compose',
+        'PRODUCT_MODULE_NAME' => 'compose',
+    }
+                
+    spec.script_phases = [
+        {
+            :name => 'Build MoMoComposeKits',
+            :execution_position => :before_compile,
+            :shell_path => '/bin/sh',
+            :script => <<-SCRIPT
+                if [ "YES" = "$OVERRIDE_KOTLIN_BUILD_IDE_SUPPORTED" ]; then
+                  echo "Skipping Gradle build task invocation due to OVERRIDE_KOTLIN_BUILD_IDE_SUPPORTED environment variable set to \"YES\""
+                  exit 0
+                fi
+                set -ev
+                REPO_ROOT="$PODS_TARGET_SRCROOT"
+                "$REPO_ROOT/../gradlew" -p "$REPO_ROOT" $KOTLIN_PROJECT_PATH:syncFramework \
+                    -Pkotlin.native.cocoapods.platform=$PLATFORM_NAME \
+                    -Pkotlin.native.cocoapods.archs="$ARCHS" \
+                    -Pkotlin.native.cocoapods.configuration="$CONFIGURATION"
+            SCRIPT
+        }
+    ]
+    spec.resources = ['build/compose/cocoapods/compose-resources']
+end

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,28 @@ 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.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 +62,36 @@ 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 composition by rememberLottieComposition(
+        LottieCompositionSpec.JsonString(readJson(path))
+    )
+
+    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/kotlin/vn/momo/kits/components/Button.kt

@@ -12,10 +12,11 @@ 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.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
@@ -28,6 +29,7 @@ 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.kits.platform.LottieAnimation
 
 enum class ButtonType {
     PRIMARY,
@@ -105,8 +107,9 @@ 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) {
         when (type) {
             ButtonType.DISABLED -> theme.colors.text.disable
@@ -116,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,
@@ -145,10 +148,11 @@ fun RenderLeading(
     ) {
         if (loading) {
             Box(Modifier.padding(end = marginRight)) {
-                LottieView(
-                    path = "files/lottie_circle_loader.json",
-                    tintColor = color,
+                LottieAnimation(
                     modifier = Modifier.size(iconSize),
+                    bgColor = bgColor,
+                    tintColor = color,
+                    path = "files/lottie_circle_loader"
                 )
             }
         } else {
@@ -169,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()) {
@@ -192,39 +195,60 @@ 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) {
         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 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.
@@ -266,30 +290,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/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())
 }
 
 /**

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

@@ -1,6 +1,8 @@
 package vn.momo.kits.platform
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.unit.Dp
 
@@ -25,4 +27,12 @@ expect fun BackHandler(enabled: Boolean, onBack: () -> Unit)
 @Composable
 expect fun getScreenHeight(): Dp
 
-expect fun getAndroidBuildVersion(): Int
+expect fun getAndroidBuildVersion(): Int
+
+@Composable
+expect fun LottieAnimation(
+    path: String,
+    tintColor: Color? = null,
+    bgColor: Color? = null,
+    modifier: Modifier = Modifier
+)

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Resources.kt

@@ -1,9 +1,15 @@
 package vn.momo.kits.utils
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import org.jetbrains.compose.resources.DrawableResource
 import org.jetbrains.compose.resources.InternalResourceApi
 import org.jetbrains.compose.resources.ResourceItem
+import org.jetbrains.compose.resources.readResourceBytes
 
 @OptIn(InternalResourceApi::class)
 @Composable
@@ -12,4 +18,40 @@ fun getResource(name: String): DrawableResource {
         "drawable:$name",
         setOf(ResourceItem(setOf(), "drawable/$name", -1, -1))
     )
+}
+
+@OptIn(InternalResourceApi::class)
+@Composable
+fun readJson(name: String): String {
+    val path = name.plus(".json")
+
+    val jsonContent by rememberState(path, { "" }) {
+        val cached = resourceCache.getOrPut(path) {
+            ResourceCache.JSON(
+                readResourceBytes(path).decodeToString()
+            )
+        } as ResourceCache.JSON
+        cached.json
+    }
+
+    return jsonContent
+}
+
+private val resourceCache = mutableMapOf<String, ResourceCache>()
+
+private sealed interface ResourceCache {
+    class JSON(val json: String) : ResourceCache
+}
+
+@Composable
+fun <T> rememberState(
+    key: Any,
+    getDefault: () -> T,
+    block: suspend () -> T
+): MutableState<T> {
+    val state = remember(key) { mutableStateOf(getDefault()) }
+    LaunchedEffect(key) {
+        state.value = block()
+    }
+    return state
 }

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

@@ -1,18 +1,33 @@
 package vn.momo.kits.platform
 
-import androidx.compose.foundation.ExperimentalFoundationApi
+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.systemBars
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+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.interop.UIKitView
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import cocoapods.lottie_ios.CompatibleAnimation
+import cocoapods.lottie_ios.CompatibleAnimationView
+import cocoapods.lottie_ios.CompatibleAnimationKeypath
 import kotlinx.cinterop.ExperimentalForeignApi
 import kotlinx.cinterop.get
 import kotlinx.cinterop.memScoped
 import org.jetbrains.skia.FilterBlurMode
 import org.jetbrains.skia.MaskFilter
+import platform.Foundation.NSBundle
+import platform.UIKit.UIColor
 import platform.UIKit.UIScreen
 
 
@@ -46,4 +61,91 @@ actual fun getScreenHeight(): Dp {
     return getScreenDimensions().height.dp
 }
 
-actual fun getAndroidBuildVersion(): Int = 999
+actual fun getAndroidBuildVersion(): Int = 999
+
+@OptIn(ExperimentalForeignApi::class)
+@Composable
+actual fun LottieAnimation(
+    path: String,
+    tintColor: Color?,
+    bgColor: Color?,
+    modifier: Modifier
+) {
+    var animation by remember { mutableStateOf<CompatibleAnimation?>(null) }
+
+    LaunchedEffect(Unit) {
+        animation = CompatibleAnimation(name = "compose-resources/composeResources/vn.momo.compose.resources/".plus(path), subdirectory = null, NSBundle.mainBundle)
+    }
+
+    when (val value = animation) {
+        null -> {
+            Box(modifier)
+        }
+
+        else -> {
+            val factory = remember {
+                {
+                    CompatibleAnimationView(value).also {
+                        it.translatesAutoresizingMaskIntoConstraints = true
+                        it.setBackgroundColor(bgColor?.toUIColor() ?: UIColor.whiteColor)
+                        it.setLoopAnimationCount(-1.0)
+                        it.setAnimationSpeed(1.0)
+
+                        if (tintColor != null) {
+                            val uiColor = tintColor.toUIColor()
+
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Fill 1.Color")
+                            )
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Fill.Color")
+                            )
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Color")
+                            )
+
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Stroke 1.Color")
+                            )
+                            it.setColorValue(
+                                uiColor,
+                                CompatibleAnimationKeypath("**.Stroke.Color")
+                            )
+                        }
+
+
+
+                        it.play()
+                    }
+                }
+            }
+
+            Box(modifier) {
+                UIKitView(
+                    modifier = Modifier.fillMaxSize(),
+                    factory = factory,
+                )
+            }
+        }
+    }
+}
+
+fun Color.toUIColor(): UIColor {
+    val argb = this.toArgb()
+
+    val a = ((argb shr 24) and 0xFF) / 255.0
+    val r = ((argb shr 16) and 0xFF) / 255.0
+    val g = ((argb shr 8) and 0xFF) / 255.0
+    val b = (argb and 0xFF) / 255.0
+
+    return UIColor(
+        red = r,
+        green = g,
+        blue = b,
+        alpha = a
+    )
+}

package/ios/Button/Button.swift

@@ -1,4 +1,3 @@
-
 import Foundation
 import SwiftUI
 import Lottie
@@ -23,12 +22,85 @@ public enum ButtonSize {
     case small
 }
 
-// MARK: - Button
+public struct ButtonStyleData {
+    let background: Color
+    let content: Color
+    let border: Color?
+    let borderWidth: CGFloat
+
+    public init(
+        background: Color,
+        content: Color,
+        border: Color? = nil,
+        borderWidth: CGFloat = 1
+    ) {
+        self.background = background
+        self.content = content
+        self.border = border
+        self.borderWidth = borderWidth
+    }
+}
+
+// MARK: - ButtonType Extension (Style mapping)
+
+public extension ButtonType {
+    var style: ButtonStyleData {
+        switch self {
+        case .primary:
+            return ButtonStyleData(
+                background: Colors.primary,
+                content: Colors.black01
+            )
+        case .danger:
+            return ButtonStyleData(
+                background: Colors.error,
+                content: Colors.black01
+            )
+        case .tonal:
+            return ButtonStyleData(
+                background: Colors.primaryLight,
+                content: Colors.primary
+            )
+        case .text:
+            return ButtonStyleData(
+                background: .clear,
+                content: Colors.primary
+            )
+        case .secondary:
+            return ButtonStyleData(
+                background: Colors.black01,
+                content: Colors.black17,
+                border: Colors.black04
+            )
+        case .outline:
+            return ButtonStyleData(
+                background: Colors.card,
+                content: Colors.primary,
+                border: Colors.primary
+            )
+        case .disabled:
+            return ButtonStyleData(
+                background: Colors.black05,
+                content: Colors.black06
+            )
+        }
+    }
+}
+
+// MARK: - Button View
 
 public struct Button: View {
     // MARK: Lifecycle
 
-    public init(title: String = "", action: @escaping () -> Void, type: ButtonType = .primary, size: ButtonSize = .large, iconLeft: AnyView? = nil, iconRight: AnyView? = nil, loading: Bool = false) {
+    public init(
+        title: String = "",
+        action: @escaping () -> Void,
+        type: ButtonType = .primary,
+        size: ButtonSize = .large,
+        iconLeft: AnyView? = nil,
+        iconRight: AnyView? = nil,
+        loading: Bool = false
+    ) {
         self.title = title
         self.action = action
         self.type = type
@@ -38,117 +110,87 @@ public struct Button: View {
         self.loading = loading
     }
 
-    // MARK: Public
-
-    public var body: some View {
-        SwiftUI.Button(action: action) {
-            HStack {
-                if loading {
-                    LottieView2(name: "lottie_circle_loader", loopMode: .loop)
-                        .frame(width: iconSize, height: iconSize)
-                        .colorMultiply(.white)
-                } else if let iconLeft = iconLeft {
-                    iconLeft.frame(width: iconSize, height: iconSize)
-                }
-                renderTitle(title: title, type: type, size: size).lineLimit(1).truncationMode(.tail)
-                if let iconRight = iconRight {
-                    iconRight.frame(width: iconSize, height: iconSize)
-                }
-            }
-            .buttonSize(size)
-            .buttonType(type)
-            .opacity(loading ? 0.75 : 1.0)
-        }
-        .disabled(type == .disabled || loading)
-        .clipShape(RoundedRectangle(cornerRadius: Radius.S))
-    }
-
     // MARK: Internal
 
     var title: String
-    var action: () -> Void = {}
-    var type: ButtonType = .primary
-    var size: ButtonSize = .large
+    var action: () -> Void
+    var type: ButtonType
+    var size: ButtonSize
     var iconLeft: AnyView?
     var iconRight: AnyView?
     var loading: Bool
-    
+
+    // MARK: Private Helpers
+
     private var iconSize: CGFloat {
         switch size {
-            case .large: return 24
-            case .medium: return 16
-            case .small: return 16
+        case .large: return 24
+        case .medium, .small: return 16
         }
     }
 
-    func renderTitle(title: String, type: ButtonType, size: ButtonSize) -> Text {
+    private func height(for size: ButtonSize) -> CGFloat {
         switch size {
-        case .large:
-            return Text(title).font(.system(size: 16, weight: Font.Weight.bold))
-        case .medium:
-            return Text(title).font(.system(size: 14, weight: Font.Weight.bold))
-        case .small:
-            return Text(title).font(.system(size: 12, weight: Font.Weight.bold))
+        case .large: return 48
+        case .medium: return 36
+        case .small: return 28
         }
     }
-}
 
-private extension View {
-    func buttonType(_ type: ButtonType) -> some View {
-        switch type {
-        case .primary:
-            return AnyView(self
-                .background(Colors.primary)
-                .foregroundColor(Colors.black01)
-            )
-        case .danger:
-            return AnyView(self
-                .background(Colors.error)
-                .foregroundColor(Colors.black01)
-            )
-        case .tonal:
-            return AnyView(self
-                .background(Colors.primaryLight)
-                .foregroundColor(Colors.primary)
-            )
-        case .text:
-            return AnyView(self
-                .foregroundColor(Colors.primary)
-            )
-        case .secondary:
-            return AnyView(self
-                .background(Colors.black01)
-                .foregroundColor(Colors.black17)
-                .overlay(RoundedRectangle(cornerRadius: Radius.S).stroke(Colors.black04, lineWidth: 1))
-            )
-        case .outline:
-            return AnyView(self
-                .background(Colors.card)
-                .foregroundColor(Colors.primary)
-                .overlay(RoundedRectangle(cornerRadius: Radius.S).stroke(Colors.primary, lineWidth: 1))
-            )
-        case .disabled:
-            return AnyView(self
-                .background(Colors.black05)
-                .foregroundColor(Colors.black06)
-            )
+    private func padding(for size: ButtonSize) -> CGFloat {
+        switch size {
+        case .large: return Spacing.L
+        case .medium: return Spacing.M
+        case .small: return Spacing.S
         }
     }
 
-    func buttonSize(_ size: ButtonSize) -> some View {
+    private func renderTitle(title: String, size: ButtonSize) -> Text {
         switch size {
         case .large:
-            return self
-                .frame(maxWidth: .infinity, minHeight: 48, maxHeight: 48)
-                .padding([.leading, .trailing], Spacing.L)
+            return Text(title).font(.system(size: 16, weight: .bold))
         case .medium:
-            return self
-                .frame(minWidth: 80, maxWidth: .infinity, minHeight: 36, maxHeight: 36)
-                .padding([.leading, .trailing], Spacing.M)
+            return Text(title).font(.system(size: 14, weight: .bold))
         case .small:
-            return self
-                .frame(minWidth: 56, maxWidth: 76, minHeight: 28, maxHeight: 28)
-                .padding([.leading, .trailing], Spacing.S)
+            return Text(title).font(.system(size: 12, weight: .bold))
         }
     }
+
+    // MARK: View
+
+    public var body: some View {
+        let style = type.style
+
+        SwiftUI.Button(action: action) {
+            HStack(spacing: 8) {
+                if loading {
+                    LottieView(name: "lottie_circle_loader", loopMode: .loop)
+                        .frame(width: iconSize, height: iconSize)
+                        .colorMultiply(style.content)
+                } else if let iconLeft = iconLeft {
+                    iconLeft.frame(width: iconSize, height: iconSize)
+                }
+
+                renderTitle(title: title, size: size)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
+
+                if let iconRight = iconRight {
+                    iconRight.frame(width: iconSize, height: iconSize)
+                }
+            }
+            .frame(maxWidth: .infinity)
+            .padding(.horizontal, padding(for: size))
+            .frame(height: height(for: size))
+            .background(style.background)
+            .foregroundColor(style.content)
+            .overlay(
+                RoundedRectangle(cornerRadius: Radius.S)
+                    .stroke(style.border ?? .clear, lineWidth: style.border != nil ? style.borderWidth : 0)
+            )
+            .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+            .opacity(loading ? 0.75 : 1.0)
+        }
+        .disabled(type == .disabled || loading)
+    }
 }

package/ios/Lottie/LottieView.swift

@@ -9,7 +9,7 @@
 import SwiftUI
 import Lottie
 
-struct LottieView2: UIViewRepresentable {
+struct LottieView: UIViewRepresentable {
   var name: String = ""
   var url: String?
   var loopMode: LottieLoopMode = .playOnce
@@ -19,7 +19,7 @@ struct LottieView2: UIViewRepresentable {
   // Add static cache for animations
   private static var animationCache = NSCache<NSString, LottieAnimation>()
 
-  func makeUIView(context: UIViewRepresentableContext<LottieView2>) -> UIView {
+  func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
     let view = UIView(frame: .zero)
 
     // Configure Lottie with optimized settings
@@ -82,5 +82,5 @@ struct LottieView2: UIViewRepresentable {
     }
   }
 
-  func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView2>) {}
+  func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.151.2-test.11",
+  "version": "0.151.2-test.13",
   "private": false,
   "dependencies": {
     "@momo-platform/native-max-api": "1.0.18"

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

@@ -1,39 +0,0 @@
-package vn.momo.kits.components
-
-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.ColorFilter
-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.uikits.resources.Res
-
-@Composable
-fun LottieView(
-    path: String,
-    tintColor: Color? = null,
-    modifier: Modifier = Modifier) {
-    val composition by rememberLottieComposition {
-        LottieCompositionSpec.JsonString(
-            Res.readBytes(path).decodeToString()
-        )
-    }
-
-    val progress by animateLottieCompositionAsState(
-        composition = composition,
-        iterations = Compottie.IterateForever
-    )
-
-    Image(
-        source = rememberLottiePainter(
-            composition = composition,
-            progress = { progress }
-        ),
-        colorFilter = tintColor?.let { ColorFilter.tint(it) },
-        modifier = modifier,
-    )
-}