@momo-kits/native-kits 0.163.1-beta.2-debug → 0.163.1-beta.20-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/InputSearch.kt

@@ -29,6 +29,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.takeOrElse
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextOverflow
@@ -49,7 +50,7 @@ import vn.momo.kits.utils.ifTrue
 internal fun RenderRightIconSearch(
     loading: Boolean,
     icon: String,
-    color: Color,
+    color: Color?,
     onClick: () -> Unit,
     iconModifier: Modifier = Modifier
 ) {
@@ -57,7 +58,7 @@ internal fun RenderRightIconSearch(
         Box(Modifier.padding(horizontal = Spacing.S)) {
             CircularProgressIndicator(
                 modifier = Modifier.size(16.dp),
-                color = color,
+                color = color ?: AppTheme.current.colors.text.default,
                 trackColor = Color.Transparent,
                 strokeWidth = 2.dp
             )
@@ -90,7 +91,7 @@ data class InputSearchProps(
     val onPressButtonText: () -> Unit = {},
     val disabled: Boolean = false,
     val icon: String = "",
-    val iconColor: Color = Color(0xff),
+    val iconColor: Color? = Color.Unspecified,
     val onRightIconPressed: () -> Unit = {},
     val onFocus: () -> Unit = {},
     val onBlur: () -> Unit = {},
@@ -113,7 +114,6 @@ data class InputSearchProps(
 fun InputSearch(
     inputSearchProps: InputSearchProps = InputSearchProps(
         text = remember { mutableStateOf("") },
-        iconColor = AppTheme.current.colors.text.default
     ),
 ) {
     var isFocused by remember { mutableStateOf(false) }
@@ -121,7 +121,7 @@ fun InputSearch(
     val disabledColor = AppTheme.current.colors.text.disable
     var textColor = AppTheme.current.colors.text.default
     var placeholderColor = AppTheme.current.colors.text.hint
-    var iconTintColor = inputSearchProps.iconColor
+    var iconTintColor = inputSearchProps.iconColor?.takeOrElse { AppTheme.current.colors.text.default }
 
     if (inputSearchProps.disabled) {
         textColor = disabledColor

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

@@ -21,9 +21,11 @@ import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
+import vn.momo.kits.modifier.InternalApi
 import vn.momo.kits.modifier.conditional
 
-internal const val MAX_LENGTH = 300
+@InternalApi
+const val MAX_LENGTH = 300
 internal val DEFAULT_HEIGHT = 104.dp
 
 @Composable

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

@@ -0,0 +1,21 @@
+package vn.momo.kits.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import vn.momo.kits.application.ScaleSizeMaxRate
+
+@Deprecated(
+    "Max font scale is fixed at MAX_FONT_SCALE (1.5); this override is no longer applied. Remove the wrapper.",
+    ReplaceWith("content()"),
+)
+@Composable
+fun ScaleSizeScope(
+    scaleSizeMaxRate: Float? = null,
+    content: @Composable () -> Unit
+) {
+    CompositionLocalProvider(
+        ScaleSizeMaxRate provides scaleSizeMaxRate,
+    ) {
+        content()
+    }
+}

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

@@ -36,7 +36,6 @@ fun Text(
     softWrap: Boolean = true,
     accessibilityId: String? = null,
     inlineContent: Map<String, InlineTextContent> = mapOf(),
-    userScaleRate: Float? = null,
     ) {
     Text(
         text = AnnotatedString(text),
@@ -53,8 +52,7 @@ fun Text(
         letterSpacing = letterSpacing,
         softWrap = softWrap,
         accessibilityId = accessibilityId,
-        inlineContent = inlineContent,
-        userScaleRate = userScaleRate
+        inlineContent = inlineContent
     )
 }
 
@@ -76,14 +74,13 @@ fun Text(
     softWrap: Boolean = true,
     accessibilityId: String? = null,
     inlineContent: Map<String, InlineTextContent> = mapOf(),
-    userScaleRate: Float? = null,
 ) {
     // Cache theme access to avoid repeated lookups
     val theme = AppTheme.current
 
     // Call @Composable functions directly in composable context
-    val scaledFontSize = scaleSize(style.fontSize, userScaleRate)
-    val scaledLineHeight = scaleSize(style.lineHeight, userScaleRate)
+    val scaledFontSize = scaleSize(style.fontSize)
+    val scaledLineHeight = scaleSize(style.lineHeight)
     val fontFamilyResult = getFontFamily(fontFamily ?: theme.font, style.fontWeight)
 
     // Now memoize the results

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

@@ -147,6 +147,17 @@ object Colors {
     val red_10 = Color(0xFFFEF4F4)
     val red_11 = Color(0xFFFEF8F8)
 
+    // Translucent overlays, ported from the React kit's Consts (the reference
+    // palette). React spells them `#RRGGBBAA`; Compose's Color takes `0xAARRGGBB`.
+    val opacity_black_20 = Color(0x33000000)
+    val opacity_black_40 = Color(0x66000000)
+    val opacity_black_60 = Color(0x99000000)
+    val opacity_black_80 = Color(0xCC000000)
+    val opacity_white_20 = Color(0x33FFFFFF)
+    val opacity_white_40 = Color(0x66FFFFFF)
+    val opacity_white_60 = Color(0x99FFFFFF)
+    val opacity_white_80 = Color(0xCCFFFFFF)
+
     val colorList: Map<String, Color> = mapOf(
         "black_01" to black_01,
         "black_02" to black_02,
@@ -302,5 +313,13 @@ object Colors {
         "red_09" to red_09,
         "red_10" to red_10,
         "red_11" to red_11,
+        "opacity_black_20" to opacity_black_20,
+        "opacity_black_40" to opacity_black_40,
+        "opacity_black_60" to opacity_black_60,
+        "opacity_black_80" to opacity_black_80,
+        "opacity_white_20" to opacity_white_20,
+        "opacity_white_40" to opacity_white_40,
+        "opacity_white_60" to opacity_white_60,
+        "opacity_white_80" to opacity_white_80,
     )
 }

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

@@ -0,0 +1,22 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+
+// App-wide font-scale holder. The kit is sandboxed and can't read the host cache directly, so the
+// host (which sees both core and this kit) seeds this once at startup and pushes runtime updates into
+// it. scaleSize() reads it as the fallback, so every screen — including direct NavigationContainer
+// screens with no host-pushed MiniAppContext — scales with no per-render prop and no async flicker.
+// Backed by snapshot state: writes recompose text automatically.
+object KitFontScale {
+    var userScaleRate by mutableStateOf(1f)
+        private set
+    var useOSScaleRate by mutableStateOf(true)
+        private set
+
+    fun update(userScaleRate: Float, useOSScaleRate: Boolean) {
+        this.userScaleRate = userScaleRate
+        this.useOSScaleRate = useOSScaleRate
+    }
+}

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

@@ -11,7 +11,7 @@ import androidx.compose.ui.unit.*
 import org.jetbrains.compose.resources.Font
 import org.jetbrains.compose.resources.FontResource
 import org.jetbrains.compose.resources.InternalResourceApi
-import vn.momo.kits.application.LocalFontScaleConfig
+import vn.momo.kits.application.LocalContext
 import vn.momo.kits.platform.getScreenDimensions
 import vn.momo.uikits.resources.*
 import kotlin.math.max
@@ -22,58 +22,65 @@ const val MAX_FONT_SCALE = 1.5f
 const val MAX_DEVICE_SCALE = 5
 
 @Composable
-fun scaleSize(size: Float, userScaleRate: Float? = null): Float {
-    val fontScaleConfig = LocalFontScaleConfig.current
-    val useOSFontScale = fontScaleConfig.useOSFontScale
-    val customRate = userScaleRate ?: fontScaleConfig.userScaleRate ?: 1f
-
-    val deviceScale = getScreenDimensions().width / DEFAULT_SCREEN_SIZE
-    val fontScale = fontScaleConfig.osFontScale ?: LocalDensity.current.fontScale
-
-    if (!useOSFontScale) {
-        return if (customRate > 1f) customRate * size else size
+fun scaleSize(size: Float): Float {
+    val context = LocalContext.current
+    // Host-pushed context wins; otherwise fall back to the app-wide KitFontScale holder.
+    val useOsScale = context?.useOSScaleRate ?: KitFontScale.useOSScaleRate
+    if (!useOsScale) {
+        return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
     }
+    val scaleSizeMaxRate: Float = MAX_FONT_SCALE
+    val deviceWidth = getScreenDimensions().width
+    val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
+
+    val density = LocalDensity.current
+    val fontScale = density.fontScale
 
     var fontSizeScaleDevice = size
     var fontSizeScaleOS = size
+
     if (deviceScale > 1) {
         fontSizeScaleDevice =
             min(deviceScale * fontSizeScaleDevice, fontSizeScaleDevice + MAX_DEVICE_SCALE)
     }
-    if (fontScale > 1f) {
-        fontSizeScaleOS = min(fontScale * fontSizeScaleOS, fontSizeScaleOS * MAX_FONT_SCALE)
+
+    if (fontScale > 1) {
+        fontSizeScaleOS = min(fontScale * fontSizeScaleOS, fontSizeScaleOS * scaleSizeMaxRate)
     }
 
-    return max(fontSizeScaleDevice, fontSizeScaleOS)
+    return max(
+        fontSizeScaleDevice,
+        fontSizeScaleOS
+    )
 }
 
 @Composable
-fun scaleSize(size: TextUnit, userScaleRate: Float? = null): TextUnit {
+fun scaleSize(size: TextUnit): TextUnit {
     if (!size.isSp) return size
 
     val density = LocalDensity.current
 
-    val scaled = scaleSize(size.value, userScaleRate)
+    val scaled = scaleSize(size.value)
     val spValue = scaled / density.fontScale
 
     return TextUnit(value = spValue, type = TextUnitType.Sp)
 }
 
 @Composable
-fun scaleSize(size: Dp, userScaleRate: Float? = null): Dp {
-    return scaleSize(size.value, userScaleRate).dp
+fun scaleSize(size: Dp): Dp {
+    return scaleSize(size.value).dp
 }
 
 @Composable
-fun scaleSize(textStyle: TextStyle, userScaleRate: Float? = null): TextStyle {
+fun scaleSize(textStyle: TextStyle): TextStyle {
     return textStyle.copy(
         fontSize = if (textStyle.fontSize != TextUnit.Unspecified)
-            scaleSize(textStyle.fontSize, userScaleRate)
+            scaleSize(textStyle.fontSize)
         else
             TextUnit.Unspecified,
 
         lineHeight = if (textStyle.lineHeight != TextUnit.Unspecified)
-            scaleSize(textStyle.lineHeight, userScaleRate)
+            scaleSize(textStyle.lineHeight)
         else
             TextUnit.Unspecified,
     )

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Card.kt

@@ -1,2 +1,52 @@
 package vn.momo.kits.layout
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+
+@Composable
+internal fun Card(
+    useShadow: Boolean = false,
+    backgroundImage: String? = null,
+    contentPadding: PaddingValues = PaddingValues(Spacing.M),
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 8.dp
+    val shape = RoundedCornerShape(Radius.M)
+    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
+    if (useShadow) surface = surface.shadow(4.dp, shape)
+    surface = surface.clip(shape)
+    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    Box(modifier = surface) {
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(contentPadding)) {
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -1,35 +1,38 @@
 package vn.momo.kits.layout
 
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 
-data class GridContext(
-    val numberOfColumns: Number,
-    val gutterSize: Number,
-    val sizePerSpan: Number,
-    val getSizeSpan: (Number) -> Number
-)
+internal data class GridContext(
+    val numberOfColumns: Int = 12,
+    val gutter: Dp = 12.dp,
+    val sizePerSpan: Dp = 0.dp,
+) {
+    fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
+}
+
+internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
 
 @Composable
-fun Item(
-    heightSpan: Number = 1,
-    widthSpan: Number = 1,
-    content: @Composable () -> Unit,
+internal fun Item(
+    widthSpan: Int = 12,
+    heightSpan: Int = 0,
     modifier: Modifier = Modifier,
-    grid: GridContext
+    content: @Composable () -> Unit,
 ) {
-
-    val widthItem = grid.getSizeSpan(widthSpan)
-    val heightItem = grid.getSizeSpan(heightSpan)
-
-    Box(
-        modifier = modifier.width(width = Dp(widthItem.toFloat()))
-            .height(height = Dp(heightItem.toFloat()))
-    ) {
-        content()
+    val grid = LocalGridContext.current
+    var m = modifier
+    if (grid != null) {
+        m = m.width(grid.sizeForSpan(widthSpan))
+        if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
     }
-}
+    // A Column (not a Box) so multiple children flow VERTICALLY instead of stacking
+    // on top of each other — matches the React Item's flex-column content.
+    Column(modifier = m) { content() }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -1,2 +1,39 @@
 package vn.momo.kits.layout
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+
+@Composable
+internal fun Section(
+    useMargin: Boolean = true,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 12.dp
+    val margin = if (useMargin) 12.dp else 0.dp
+    Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}