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

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

@@ -1,7 +1,9 @@
 package vn.momo.kits.components
 
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -17,10 +19,12 @@ import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import coil3.compose.AsyncImage
+import coil3.compose.AsyncImage as CoilAsyncImage
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
+import vn.momo.kits.gifimage.GifImage
+import vn.momo.kits.gifimage.GifImageState
 import vn.momo.kits.modifier.conditional
 
 data class Options(
@@ -73,6 +77,19 @@ private fun getHostFromUrl(url: String): String? {
     }
 }
 
+private fun isGifUrl(url: String): Boolean {
+    val path = url.substringBefore('#').substringBefore('?')
+    return path.endsWith(".gif", ignoreCase = true)
+}
+
+private fun GifImageState.toImageState(): ImageState {
+    return when (this) {
+        GifImageState.Success -> ImageState.Success
+        GifImageState.Error -> ImageState.Error
+        GifImageState.Loading -> ImageState.Loading
+    }
+}
+
 // Optimized query parameter appending
 private fun appendSizeQueryParam(url: String, value: String): String {
     val fragmentIndex = url.indexOf('#')
@@ -95,12 +112,12 @@ fun Image(
     modifier: Modifier = Modifier,
     options: Options? = null,
     loading: Boolean = true,
+    onStateChanged: (ImageState) -> Unit = {},
 ) {
     val imageOptions = remember(options) {
         options ?: Options()
     }
 
-    var imageState by remember { mutableStateOf(ImageState.Loading) }
     val density = LocalDensity.current
 
     BoxWithConstraints(
@@ -121,34 +138,46 @@ fun Image(
                         processedUrl
                     }
                 }
-                else -> source
+                else -> source.toString()
             }
         }
 
-        AsyncImage(
-            modifier = Modifier.matchParentSize(),
-            model = urlToLoad,
-            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 },
-        )
+        var imageState by remember(urlToLoad) { mutableStateOf(ImageState.Loading) }
+        fun updateImageState(state: ImageState) {
+            imageState = state
+            onStateChanged(state)
+        }
+
+        if (isGifUrl(urlToLoad)) {
+            GifImage(
+                modifier = Modifier.matchParentSize(),
+                url = urlToLoad,
+                contentDescription = null,
+                contentScale = imageOptions.contentScale,
+                alignment = imageOptions.alignment,
+                colorFilter = imageOptions.colorFilter,
+                alpha = imageOptions.alpha,
+                onStateChanged = { updateImageState(it.toImageState()) },
+            )
+        } else {
+            CoilAsyncImage(
+                modifier = Modifier.matchParentSize(),
+                model = urlToLoad,
+                contentDescription = null,
+                contentScale = imageOptions.contentScale,
+                alignment = imageOptions.alignment,
+                colorFilter = imageOptions.colorFilter,
+                alpha = imageOptions.alpha,
+                onLoading = { updateImageState(ImageState.Loading) },
+                onSuccess = { updateImageState(ImageState.Success) },
+                onError = { updateImageState(ImageState.Error) },
+            )
+        }
 
         when (imageState) {
-            ImageState.Loading -> if (loading) Skeleton()
-            ImageState.Error -> {
-                val theme = AppTheme.current
-                Icon(
-                    source = "media_fail",
-                    color = theme.colors.text.disable,
-                    modifier = Modifier.align(Alignment.Center)
-                )
-            }
             ImageState.Success -> {}
+            ImageState.Error -> ImageError()
+            ImageState.Loading -> if (loading) Skeleton()
         }
     }
 }
@@ -156,7 +185,7 @@ fun Image(
 // Extracted URL processing logic for better performance
 private fun processImageUrl(url: String, maxWidth: androidx.compose.ui.unit.Dp, density: androidx.compose.ui.unit.Density): String {
     val host = getHostFromUrl(url)
-    return if (host != null && supportedDomains.contains(host)) {
+    return if (!isGifUrl(url) && host != null && supportedDomains.contains(host)) {
         val widthPx = with(density) { maxWidth.roundToPx() }
         val pixelRatio = density.density
         val pixelFitForWidth = widthPx * pixelRatio
@@ -167,6 +196,20 @@ private fun processImageUrl(url: String, maxWidth: androidx.compose.ui.unit.Dp,
     }
 }
 
+@Composable
+private fun ImageError() {
+    val theme = AppTheme.current
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            source = "media_fail",
+            color = theme.colors.text.disable,
+        )
+    }
+}
+
 @Composable
 fun Image(
     source: Painter,
@@ -185,4 +228,4 @@ fun Image(
         colorFilter = colorFilter,
         alpha = alpha,
     )
-}
+}

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

@@ -3,11 +3,7 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier

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

@@ -1,29 +1,17 @@
 package vn.momo.kits.components
 
+import vn.momo.kits.modifier.InternalApi
+
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
@@ -44,13 +32,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.application.IsShowBaseLineDebug
-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.const.getFont
-import vn.momo.kits.const.scaleSize
+import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 import vn.momo.uikits.resources.Res
@@ -88,7 +70,6 @@ enum class InputFontWeight(val value: FontWeight) {
     )
 }
 
-// Consolidated input state for better performance
 data class InputState(
     val isFocused: Boolean = false,
     val passHidden: Boolean = false,
@@ -128,6 +109,7 @@ private class PasswordVisualTransformation(
 }
 
 @Composable
+@InternalApi
 fun getBorderColor(isFocused: Boolean, error: String, disabled: Boolean): Color {
     val theme = AppTheme.current
     return remember(isFocused, error, disabled, theme) {
@@ -141,6 +123,7 @@ fun getBorderColor(isFocused: Boolean, error: String, disabled: Boolean): Color
 }
 
 @Composable
+@InternalApi
 fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () -> Unit, modifier: Modifier = Modifier) {
     if (loading) {
         Box {
@@ -167,6 +150,7 @@ fun RenderRightIcon(loading: Boolean, icon: String, color: Color, onClick: () ->
 }
 
 @Composable
+@InternalApi
 fun ErrorView(errorMessage: String, errorSpacing: Boolean, hintText: String) {
     val theme = AppTheme.current
     val errorColor = remember(theme) { theme.colors.error.primary }
@@ -326,41 +310,14 @@ fun Input(
             },
             decorationBox = { innerTextField ->
                 // Floating label
-                if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
-                    Box(
-                        modifier = Modifier
-                            .wrapContentSize()
-                            .offset(y = (-size.values.height / 2), x = Spacing.S)
-                            .background(theme.colors.background.surface)
-                            .zIndex(10f),
-                    ) {
-                        Row(
-                            modifier = Modifier.padding(horizontal = Spacing.S),
-                            verticalAlignment = Alignment.CenterVertically
-                        ) {
-                            Text(
-                                floatingValue,
-                                style = Typography.labelSMedium,
-                                color = floatingTitleColor
-                            )
-                            if (required) {
-                                Text(
-                                    "*",
-                                    style = Typography.labelSMedium,
-                                    color = theme.colors.error.primary,
-                                )
-                            }
-                            if (floatingIcon.isNotEmpty()) {
-                                Icon(
-                                    source = floatingIcon,
-                                    modifier = Modifier.padding(start = Spacing.XS),
-                                    size = 16.dp,
-                                    color = floatingIconTintColor
-                                )
-                            }
-                        }
-                    }
-                }
+                FloatingLabel(
+                    floatingValue = floatingValue,
+                    floatingIcon = floatingIcon,
+                    titleColor = floatingTitleColor,
+                    iconColor = floatingIconTintColor,
+                    offsetY = -size.values.height / 2,
+                    required = required,
+                )
 
                 // Input container
                 Box(
@@ -450,3 +407,71 @@ fun Input(
         ErrorView(error, errorSpacing, hintText)
     }
 }
+
+internal data class InputColors(
+    val text: Color,
+    val placeholder: Color,
+    val iconTint: Color,
+    val floatingTitle: Color,
+    val floatingIcon: Color,
+)
+
+@Composable
+internal fun getInputColors(
+    disabled: Boolean,
+    iconColor: Color,
+    floatingValueColor: Color,
+    floatingIconColor: Color,
+): InputColors {
+    val theme = AppTheme.current
+    val disabledColor = theme.colors.text.disable
+    return InputColors(
+        text = if (disabled) disabledColor else theme.colors.text.default,
+        placeholder = if (disabled) disabledColor else theme.colors.text.hint,
+        iconTint = if (disabled) disabledColor else iconColor,
+        floatingTitle = if (disabled) disabledColor else floatingValueColor,
+        floatingIcon = if (disabled) disabledColor else floatingIconColor,
+    )
+}
+
+@Composable
+internal fun FloatingLabel(
+    floatingValue: String,
+    floatingIcon: String,
+    titleColor: Color,
+    iconColor: Color,
+    offsetY: Dp,
+    offsetX: Dp = Spacing.S,
+    required: Boolean = false,
+) {
+    if (floatingValue.isEmpty() && floatingIcon.isEmpty()) return
+    Box(
+        modifier = Modifier
+            .wrapContentSize()
+            .offset(y = offsetY, x = offsetX)
+            .background(AppTheme.current.colors.background.surface)
+            .zIndex(10f),
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = Spacing.S),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(floatingValue, style = Typography.labelSMedium, color = titleColor)
+            if (required) {
+                Text(
+                    "*",
+                    style = Typography.labelSMedium,
+                    color = AppTheme.current.colors.error.primary,
+                )
+            }
+            if (floatingIcon.isNotEmpty()) {
+                Icon(
+                    source = floatingIcon,
+                    modifier = Modifier.padding(start = Spacing.XS),
+                    size = 16.dp,
+                    color = iconColor,
+                )
+            }
+        }
+    }
+}

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

@@ -3,20 +3,9 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -27,12 +16,8 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.scaleSize
+import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 
 @Composable
@@ -59,24 +44,8 @@ fun InputDropDown(
 ) {
     val isFocused by remember { mutableStateOf(false) }
 
-    val disabledColor = AppTheme.current.colors.text.disable
-    var textColor = AppTheme.current.colors.text.default
-    var placeholderColor = AppTheme.current.colors.text.hint
-    var iconTintColor = iconColor
-    val floatingTitleColor = when {
-        disabled -> AppTheme.current.colors.text.disable
-        else -> floatingValueColor
-    }
-    val floatingIconTintColor = when {
-        disabled -> AppTheme.current.colors.text.disable
-        else -> floatingIconColor
-    }
-
-    if (disabled) {
-        textColor = disabledColor
-        placeholderColor = disabledColor
-        iconTintColor = disabledColor
-    }
+    val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
+        getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
 
     val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
@@ -92,41 +61,14 @@ fun InputDropDown(
             contentDescription = floatingValue; testTag = testId
         }) {
         Box {
-            if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
-                Box(
-                    modifier = Modifier.wrapContentSize()
-                        .offset(y = -Spacing.S, x = Spacing.S)
-                        .background(AppTheme.current.colors.background.surface)
-                        .zIndex(10f),
-                ) {
-                    Row(
-                        modifier = Modifier
-                            .padding(horizontal = Spacing.S),
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Text(
-                            floatingValue,
-                            style = Typography.labelSMedium,
-                            color = floatingTitleColor
-                        )
-                        if (required) {
-                            Text(
-                                "*",
-                                style = Typography.labelSMedium,
-                                color = AppTheme.current.colors.error.primary,
-                            )
-                        }
-                        if (floatingIcon.isNotEmpty()) {
-                            Icon(
-                                source = floatingIcon,
-                                modifier = Modifier.padding(start = Spacing.XS),
-                                size = 16.dp,
-                                color = floatingIconTintColor
-                            )
-                        }
-                    }
-                }
-            }
+            FloatingLabel(
+                floatingValue = floatingValue,
+                floatingIcon = floatingIcon,
+                titleColor = floatingTitleColor,
+                iconColor = floatingIconTintColor,
+                offsetY = -Spacing.S,
+                required = required,
+            )
             Box(
                 modifier = Modifier.fillMaxWidth()
                     .height(if (size == InputSize.SMALL) 48.dp else 56.dp)

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

@@ -102,24 +102,8 @@ fun InputMoney(
 ) {
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
-    val disabledColor = AppTheme.current.colors.text.disable
-    var textColor = AppTheme.current.colors.text.default
-    var placeholderColor = AppTheme.current.colors.text.hint
-    var iconTintColor = iconColor
-    val floatingTitleColor = when {
-        disabled -> AppTheme.current.colors.text.disable
-        else -> floatingValueColor
-    }
-    val floatingIconTintColor = when {
-        disabled -> AppTheme.current.colors.text.disable
-        else -> floatingIconColor
-    }
-
-    if (disabled) {
-        textColor = disabledColor
-        placeholderColor = disabledColor
-        iconTintColor = disabledColor
-    }
+    val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
+        getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
 
     val testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
@@ -156,39 +140,14 @@ fun InputMoney(
             },
             decorationBox = { innerTextField ->
                 // Floating Icon
-                if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
-                    Box(
-                        modifier = Modifier.wrapContentSize()
-                            .offset(y = (-size.values.height / 2), x = (Spacing.S))
-                            .background(AppTheme.current.colors.background.surface)
-                            .zIndex(10f),
-                    ) {
-                        Row(
-                            modifier = Modifier.padding(horizontal = Spacing.S),
-                        ) {
-                            Text(
-                                floatingValue,
-                                style = Typography.labelSMedium,
-                                color = floatingTitleColor
-                            )
-                            if (required) {
-                                Text(
-                                    "*",
-                                    style = Typography.labelSMedium,
-                                    color = AppTheme.current.colors.error.primary,
-                                )
-                            }
-                            if (floatingIcon.isNotEmpty()) {
-                                Icon(
-                                    source = floatingIcon,
-                                    modifier = Modifier.padding(start = Spacing.XS),
-                                    size = 16.dp,
-                                    color = floatingIconTintColor
-                                )
-                            }
-                        }
-                    }
-                }
+                FloatingLabel(
+                    floatingValue = floatingValue,
+                    floatingIcon = floatingIcon,
+                    titleColor = floatingTitleColor,
+                    iconColor = floatingIconTintColor,
+                    offsetY = -size.values.height / 2,
+                    required = required,
+                )
                 //input box wrapper
                 Box(
                     modifier = Modifier.fillMaxWidth()

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

@@ -1,5 +1,7 @@
 package vn.momo.kits.components
 
+import vn.momo.kits.modifier.InternalApi
+
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.RepeatMode
 import androidx.compose.animation.core.animateFloat
@@ -48,6 +50,7 @@ import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
 
 @Composable
+@InternalApi
 fun OTPCaret() {
     val duration = 500
     val backgroundColor = AppTheme.current.colors.primary
@@ -66,7 +69,9 @@ fun OTPCaret() {
         )
     )
 
-    Row(verticalAlignment = Alignment.CenterVertically) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically
+    ) {
         Box(
             modifier = Modifier
                 .size(1.dp, scaleSize(12f).dp)

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

@@ -4,23 +4,11 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
@@ -32,12 +20,7 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
-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.const.scaleSize
+import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 
@@ -71,7 +54,7 @@ enum class InputPhoneNumberSize(val values: InputPhoneNumberSizeDetail) {
 }
 
 @Composable
-fun getBorderColor(isFocused: Boolean, error: String): Color {
+private fun getBorderColor(isFocused: Boolean, error: String): Color {
     val theme = AppTheme.current
     return remember(isFocused, error, theme) {
         when {

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

@@ -46,7 +46,7 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.utils.ifTrue
 
 @Composable
-fun RenderRightIconSearch(
+internal fun RenderRightIconSearch(
     loading: Boolean,
     icon: String,
     color: Color,