@momo-kits/native-kits 0.156.6-debug → 0.156.6-dialog.1-debug

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 'SDWebImage', '>= 5.19.1'
+                
+    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

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.156.6-debug"
+        version = "0.156.6-dialog.1-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"
@@ -54,6 +54,9 @@ kotlin {
             moduleName = "Lottie"
             version = "4.4.3"
             extraOpts += listOf("-compiler-option", "-fmodules")
+        }
+		pod("SDWebImage") {
+            version = ">= 5.19.1"
         }
     }
 

package/compose/build.gradle.kts.backup

@@ -54,6 +54,9 @@ kotlin {
             moduleName = "Lottie"
             version = "4.4.3"
             extraOpts += listOf("-compiler-option", "-fmodules")
+        }
+		pod("SDWebImage") {
+            version = ">= 5.19.1"
         }
     }
 

package/compose/compose.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |spec|
     spec.name                     = 'compose'
-    spec.version                  = '0.156.1-beta.2'
+    spec.version                  = '0.156.1-test.6'
     spec.homepage                 = 'https://momo.vn'
     spec.source                   = { :http=> ''}
     spec.authors                  = ''
@@ -9,28 +9,22 @@ Pod::Spec.new do |spec|
     spec.vendored_frameworks      = 'build/cocoapods/framework/kits.framework'
     spec.libraries                = 'c++'
     spec.ios.deployment_target    = '15.0'
+    spec.dependency 'SDWebImage', '>= 5.19.1'
     spec.dependency 'lottie-ios', '4.4.3'
-                
     if !Dir.exist?('build/cocoapods/framework/kits.framework') || Dir.empty?('build/cocoapods/framework/kits.framework')
         raise "
-
         Kotlin framework 'kits' 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' => 'kits',
     }
-                
     spec.script_phases = [
         {
             :name => 'Build compose',
@@ -38,8 +32,8 @@ Pod::Spec.new do |spec|
             :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
+                    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"
@@ -51,4 +45,4 @@ Pod::Spec.new do |spec|
         }
     ]
     spec.resources = ['build/compose/cocoapods/compose-resources']
-end
+end

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

@@ -9,12 +9,10 @@ import android.os.Build
 import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
-import androidx.compose.ui.graphics.Paint
-import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.Dp
@@ -26,6 +24,23 @@ 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 android.graphics.Matrix
+import android.widget.ImageView
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.core.view.doOnLayout
+import coil3.load
+import coil3.request.crossfade
+import coil3.size.ViewSizeResolver
+import android.view.ViewGroup
+import android.view.WindowManager
+import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.window.DialogWindowProvider
+import androidx.core.view.WindowCompat
+import vn.momo.kits.components.Options
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.utils.readJson
@@ -66,8 +81,6 @@ 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
-
 @Composable
 actual fun LottieAnimation(
     path: String,
@@ -111,3 +124,147 @@ actual fun NativePaint.setColor(color: Color){
     this.color = color.toArgb()
 }
 
+actual fun getAndroidBuildVersion(): Int = Build.VERSION.SDK_INT
+
+@Composable
+actual fun NativeImage(
+    source: Any,
+    options: Options,
+    loading: Boolean,
+    onLoading: () -> Unit,
+    onSuccess: () -> Unit,
+    onError: () -> Unit,
+) {
+    val currentOptions by rememberUpdatedState(options)
+
+    AndroidView(
+        modifier = Modifier.fillMaxSize(),
+        factory = { ctx ->
+            ImageView(ctx).apply {
+                adjustViewBounds = false
+
+                addOnLayoutChangeListener { v, _, _, _, _, _, _, _, _ ->
+                    (v as ImageView).apply {
+                        applyOrDefer(currentOptions.contentScale, currentOptions.alignment)
+                        colorFilter = currentOptions.tintColor?.let {
+                            PorterDuffColorFilter(it.toArgb(), PorterDuff.Mode.SRC_ATOP)
+                        }
+                    }
+                }
+            }
+        },
+        update = { imageView ->
+            imageView.alpha = currentOptions.alpha.coerceIn(0f, 1f)
+            imageView.applyOrDefer(currentOptions.contentScale, currentOptions.alignment)
+            imageView.colorFilter = currentOptions.tintColor?.let {
+                PorterDuffColorFilter(it.toArgb(), PorterDuff.Mode.SRC_ATOP)
+            }
+
+            imageView.load(source) {
+                crossfade(loading)
+                size(ViewSizeResolver(imageView))
+                listener(
+                    onStart = { onLoading() },
+                    onSuccess = { _, _ ->
+                        imageView.applyOrDefer(currentOptions.contentScale, currentOptions.alignment)
+                        imageView.colorFilter = currentOptions.tintColor?.let {
+                            PorterDuffColorFilter(it.toArgb(), PorterDuff.Mode.SRC_ATOP)
+                        }
+                        onSuccess()
+                    },
+                    onError = { _, _ -> onError() }
+                )
+            }
+        }
+    )
+}
+private fun ImageView.applyMatrixInternal(
+    contentScale: ContentScale,
+    alignment: Alignment
+): Boolean {
+    val d = drawable ?: return false
+
+    val vw = width - paddingLeft - paddingRight
+    val vh = height - paddingTop - paddingBottom
+    if (vw <= 0 || vh <= 0) return false
+
+    val dw = (d.intrinsicWidth).takeIf { it > 0 } ?: return false
+    val dh = (d.intrinsicHeight).takeIf { it > 0 } ?: return false
+
+    val sxFit = vw.toFloat() / dw.toFloat()
+    val syFit = vh.toFloat() / dh.toFloat()
+
+    val (sx, sy) = when (contentScale) {
+        ContentScale.Crop       -> maxOf(sxFit, syFit).let { it to it }
+        ContentScale.Fit        -> minOf(sxFit, syFit).let { it to it }
+        ContentScale.FillWidth  -> sxFit to sxFit
+        ContentScale.FillHeight -> syFit to syFit
+        ContentScale.FillBounds -> sxFit to syFit
+        ContentScale.Inside     -> minOf(1f, minOf(sxFit, syFit)).let { it to it }
+        ContentScale.None       -> 1f to 1f
+        else                    -> maxOf(sxFit, syFit).let { it to it }
+    }
+
+    val (bx, by) = when (alignment) {
+        Alignment.TopStart     -> -1f to -1f
+        Alignment.TopCenter    ->  0f to -1f
+        Alignment.TopEnd       ->  1f to -1f
+        Alignment.CenterStart  -> -1f to  0f
+        Alignment.Center       ->  0f to  0f
+        Alignment.CenterEnd    ->  1f to  0f
+        Alignment.BottomStart  -> -1f to  1f
+        Alignment.BottomCenter ->  0f to  1f
+        Alignment.BottomEnd    ->  1f to  1f
+        else                   ->  0f to  0f
+    }
+
+    val scaledW = dw * sx
+    val scaledH = dh * sy
+
+    val tx = (vw - scaledW) * (bx + 1f) / 2f
+    val ty = (vh - scaledH) * (by + 1f) / 2f
+
+    if (scaleType != ImageView.ScaleType.MATRIX) {
+        scaleType = ImageView.ScaleType.MATRIX
+    }
+
+    val m = imageMatrix ?: Matrix()
+    m.reset()
+    m.setScale(sx, sy)
+    m.postTranslate(tx, ty)
+    imageMatrix = m
+    return true
+}
+
+private fun ImageView.applyOrDefer(contentScale: ContentScale, alignment: Alignment) {
+    if (!applyMatrixInternal(contentScale, alignment)) {
+        doOnLayout { if (!applyMatrixInternal(contentScale, alignment)) post { applyMatrixInternal(contentScale, alignment) } }
+    }
+}
+
+@Composable
+actual fun ConfigureDialogWindow(decorFitsSystemWindows: Boolean) {
+    val view = LocalView.current
+    if (!view.isInEditMode) {
+        SideEffect {
+            // In Compose, LocalView.current inside a Dialog is the DialogLayout
+            // which itself implements DialogWindowProvider.
+            val window = (view as? DialogWindowProvider)?.window
+                ?: (view.parent as? DialogWindowProvider)?.window
+                ?: return@SideEffect
+
+            WindowCompat.setDecorFitsSystemWindows(window, decorFitsSystemWindows)
+
+            if (!decorFitsSystemWindows) {
+                // Extend layout behind the status bar and navigation bar so the
+                // dialog scrim covers the full screen uniformly.
+                window.setLayout(
+                    ViewGroup.LayoutParams.MATCH_PARENT,
+                    ViewGroup.LayoutParams.MATCH_PARENT
+                )
+                window.statusBarColor = android.graphics.Color.TRANSPARENT
+                window.navigationBarColor = android.graphics.Color.TRANSPARENT
+            }
+        }
+    }
+}

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

@@ -370,9 +370,14 @@ private class LiteScreenHeaderPolicy(
                 maxWidth = (realConstraints.maxWidth * (1 - scrollPercent)).toInt()
                     .coerceAtLeast(minWidth)
             )
-        } else realConstraints.copy(
-            maxWidth = realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spacing12 * 2
-        )
+        } else {
+            var spaceConsumed = 0
+            if (backIconPlaceable.safeWidth != 0) spaceConsumed += backIconPlaceable.safeWidth + spacing12
+            if (headerRightPlaceable.safeWidth != 0) spaceConsumed += headerRightPlaceable.safeWidth + spacing12
+            realConstraints.copy(
+                maxWidth = realConstraints.maxWidth - spaceConsumed
+            )
+        }
         val inputSearchPlaceable = measurables.find { it.layoutId == HeaderId.INPUT_SEARCH_ID }
             ?.measure(inputSearchConstraints)
         val titlePlaceable = measurables.find { it.layoutId == HeaderId.TITLE_ID }?.measure(
@@ -516,7 +521,7 @@ private fun LiteInputSearch(
 
     val isShowBtnText by remember(inputSearchProps.isShowBtnText, inputSearchProps.btnText) {
         derivedStateOf {
-            inputSearchProps.isShowBtnText && inputSearchProps.btnText.isNullOrEmpty()
+            inputSearchProps.isShowBtnText && !inputSearchProps.btnText.isNullOrEmpty()
         }
     }
     val inputFieldStyle = remember(theme) {

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

@@ -5,17 +5,14 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import coil3.compose.AsyncImage
-import coil3.compose.LocalPlatformContext
-import coil3.request.ImageRequest
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
@@ -30,9 +27,6 @@ fun Icon(
     color: Color? = AppTheme.current.colors.text.default,
     modifier: Modifier = Modifier,
 ) {
-    // decode image without downscaling it
-    val context = LocalPlatformContext.current
-
     val iconUrl = remember(source) {
         if (source.contains("https")) {
             source
@@ -41,14 +35,10 @@ fun Icon(
         }
     }
 
-    val iconColor = remember(color) {
+    val iconColor = remember(source, color) {
         if (noThemeIcons.contains(source)) null else color
     }
 
-    val colorFilter = remember(iconColor) {
-        iconColor?.let { ColorFilter.tint(it) }
-    }
-
     val contentDesc = remember(iconUrl) { "img|$iconUrl" }
 
     Box(
@@ -59,18 +49,15 @@ fun Icon(
             }
             .semantics { contentDescription = contentDesc }
     ) {
-        AsyncImage(
+        Image(
+            source = iconUrl,
             modifier = Modifier.matchParentSize(),
-            model = ImageRequest.Builder(context)
-                .data(iconUrl)
-                .size(
-                    coil3.size.Dimension.Undefined,
-                    coil3.size.Dimension.Undefined
-                )
-                .build(),
-            contentDescription = null,
-            contentScale = ContentScale.Fit,
-            colorFilter = colorFilter,
+            options = Options(
+                contentScale = ContentScale.Fit,
+                tintColor = iconColor,
+                alignment = Alignment.Center,
+            ),
+            loading = false,
         )
     }
 }

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

@@ -9,6 +9,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.DefaultAlpha
 import androidx.compose.ui.graphics.painter.Painter
@@ -22,11 +24,12 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.modifier.conditional
+import vn.momo.kits.platform.NativeImage
 
 data class Options(
     val alignment: Alignment = Alignment.TopStart,
     val contentScale: ContentScale = ContentScale.Crop,
-    val colorFilter: ColorFilter? = null,
+    val tintColor: Color? = null,
     val alpha: Float = DefaultAlpha,
 )
 
@@ -96,15 +99,14 @@ fun Image(
     options: Options? = null,
     loading: Boolean = true,
 ) {
-    val imageOptions = remember(options) {
-        options ?: Options()
-    }
+    val imageOptions = remember(options) { options ?: Options() }
 
     var imageState by remember { mutableStateOf(ImageState.Loading) }
     val density = LocalDensity.current
 
     BoxWithConstraints(
         modifier = modifier
+            .clipToBounds()
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }
@@ -113,7 +115,6 @@ fun Image(
         val urlToLoad = remember(source, maxWidth, maxHeight, density) {
             when (source) {
                 is String -> {
-                    // Check cache first
                     val cacheKey = "$source|${maxWidth}|${density.density}"
                     urlCache[cacheKey] ?: run {
                         val processedUrl = processImageUrl(source, maxWidth, density)
@@ -125,17 +126,13 @@ fun Image(
             }
         }
 
-        AsyncImage(
-            modifier = Modifier.matchParentSize(),
-            model = urlToLoad,
-            contentDescription = null,
-            contentScale = imageOptions.contentScale,
-            alignment = imageOptions.alignment,
-            colorFilter = imageOptions.colorFilter,
-            alpha = imageOptions.alpha,
+        NativeImage(
+            source = urlToLoad,
+            options = imageOptions,
+            loading = loading,
             onLoading = { imageState = ImageState.Loading },
             onSuccess = { imageState = ImageState.Success },
-            onError = { imageState = ImageState.Error },
+            onError   = { imageState = ImageState.Error },
         )
 
         when (imageState) {
@@ -148,7 +145,7 @@ fun Image(
                     modifier = Modifier.align(Alignment.Center)
                 )
             }
-            ImageState.Success -> {}
+            ImageState.Success -> Unit
         }
     }
 }

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

@@ -49,9 +49,20 @@ import vn.momo.kits.utils.formatNumberToMoney
 
 class CustomConverter : VisualTransformation {
     override fun filter(text: AnnotatedString): TransformedText {
-        if (text.text.isEmpty() || text.text == "0") {
+        if (text.text.isEmpty()) {
+            return TransformedText(
+                AnnotatedString("0"),
+                object : OffsetMapping {
+                    override fun originalToTransformed(offset: Int): Int = 0
+                    override fun transformedToOriginal(offset: Int): Int = 0
+                }
+            )
+        }
+        
+        if (text.text == "0") {
             return TransformedText(AnnotatedString("0"), OffsetMapping.Identity)
         }
+        
         val formattedText = formatNumberToMoney(text.text.toLong())
 
         return TransformedText(

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

@@ -112,7 +112,6 @@ internal fun BottomSheet(
     }
 
     DisposableEffect(Unit) {
-        OverplayComponentRegistry.bindClose { closeEvent() }
         onDispose {
             onDismiss?.invoke()
         }

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

@@ -80,7 +80,6 @@ internal fun ModalScreen(
     }
 
     DisposableEffect(Unit) {
-        OverplayComponentRegistry.bindClose { closeEvent() }
         onDispose {
             onDismiss?.invoke()
         }

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

@@ -18,8 +18,10 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.DialogProperties
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
+import androidx.navigation.compose.dialog
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.toRoute
 import vn.momo.kits.application.AppConfig
@@ -34,6 +36,7 @@ import vn.momo.kits.const.AppThemeController
 import vn.momo.kits.const.Theme
 import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.platform.ConfigureDialogWindow
 import vn.momo.kits.utils.getAppStatusBarHeight
 import vn.momo.maxapi.IMaxApi
 
@@ -92,6 +95,7 @@ fun NavigationContainer(
         }
 
         NavHost(navController, startDestination = startDestination) {
+            // ── Stack screens (push/replace/reset) ──────────────────────────
             composable<DynamicScreenRoute>(
                 enterTransition = {
                     slideInHorizontally(
@@ -120,6 +124,7 @@ fun NavigationContainer(
                 }
             }
 
+            // ── Present screens (vertical slide dialog) ──────────────────────
             composable<DynamicDialogRoute>(
                 enterTransition = {
                     slideInVertically (
@@ -147,6 +152,48 @@ fun NavigationContainer(
                     )
                 }
             }
+
+            // ── Bottom Sheet dialog ──────────────────────────────────────────
+            dialog<DynamicBottomSheetRoute>(
+                dialogProperties = DialogProperties(
+                    dismissOnBackPress = false,
+                    dismissOnClickOutside = false,
+                    usePlatformDefaultWidth = false
+                )
+            ) { backStackEntry ->
+                val route = backStackEntry.toRoute<DynamicBottomSheetRoute>()
+                val screen = DynamicScreenRegistry.getScreen(route.id)
+                ConfigureDialogWindow()
+                screen?.content?.invoke()
+            }
+
+            // ── Modal dialog ─────────────────────────────────────────────────
+            dialog<DynamicModalRoute>(
+                dialogProperties = DialogProperties(
+                    dismissOnBackPress = false,
+                    dismissOnClickOutside = false,
+                    usePlatformDefaultWidth = false,
+                )
+            ) { backStackEntry ->
+                val route = backStackEntry.toRoute<DynamicModalRoute>()
+                val screen = DynamicScreenRegistry.getScreen(route.id)
+                ConfigureDialogWindow()
+                screen?.content?.invoke()
+            }
+
+            // ── Snack Bar dialog ─────────────────────────────────────────────
+            dialog<DynamicSnackBarRoute>(
+                dialogProperties = DialogProperties(
+                    dismissOnBackPress = false,
+                    dismissOnClickOutside = false,
+                    usePlatformDefaultWidth = false
+                )
+            ) { backStackEntry ->
+                val route = backStackEntry.toRoute<DynamicSnackBarRoute>()
+                val screen = DynamicScreenRegistry.getScreen(route.id)
+                ConfigureDialogWindow()
+                screen?.content?.invoke()
+            }
         }
     }
 
@@ -160,4 +207,3 @@ fun NavigationContainer(
 val LocalMaxApi = staticCompositionLocalOf<IMaxApi?> {
     error("No MaxApi provided")
 }
-

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

@@ -3,8 +3,6 @@ package vn.momo.kits.navigation
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -72,31 +70,18 @@ class Navigator(
     fun pop(count: Int = 1, callBack: (() -> Unit)? = null) {
         scope.launch {
             repeat(count) {
-                if (OverplayComponentRegistry.getOverplayType() == OverplayComponentType.SNACK_BAR){
-                    dismissScreen()
-                    OverplayComponentRegistry.hardClearAfterDismiss()
-                }
-                else if (OverplayComponentRegistry.isOverplayShowing()){
-                    dismissOverplay()
-                } else {
-                    dismissScreen()
-                }
+                dismissEntry()
             }
             callBack?.invoke()
         }
     }
-    private suspend fun dismissOverplay(isDelay: Boolean = true) {
-        OverplayComponentRegistry.clear()
-        if (isDelay) delay(300L)
-        OverplayComponentRegistry.hardClearAfterDismiss()
-    }
 
-    private suspend fun dismissScreen() {
-        if (navController.previousBackStackEntry != null){
+    private suspend fun dismissEntry() {
+        if (navController.previousBackStackEntry != null) {
             navController.popBackStack()
             delay(300L)
-            DynamicScreenRegistry.getLatestScreen()?.let { it1 ->
-                DynamicScreenRegistry.unregisterScreen(it1.id)
+            DynamicScreenRegistry.getLatestScreen()?.let {
+                DynamicScreenRegistry.unregisterScreen(it.id)
             }
         } else {
             maxApi?.dismiss {  }
@@ -122,8 +107,14 @@ class Navigator(
         barrierDismissible: Boolean = true,
         onDismiss: (() -> Unit)? = null
     ){
-        val id = DynamicScreenRegistry.getLatestScreen()?.id ?: -1
-        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.MODAL, false, barrierDismissible, onDismiss)
+        val route = DynamicScreenRegistry.register({
+            ModalScreen(
+                content = content,
+                barrierDismissible = barrierDismissible,
+                onDismiss = onDismiss
+            )
+        }, null)
+        navController.navigate(DynamicModalRoute(route.id))
     }
 
     fun showBottomSheet(
@@ -133,32 +124,42 @@ class Navigator(
         onDismiss: (() -> Unit)? = null,
         bottomSheetHeader: BottomHeader? = null
     ){
-        val id = DynamicScreenRegistry.getLatestScreen()?.id ?: -1
-        OverplayComponentRegistry.registerOverplay(id, content, OverplayComponentType.BOTTOM_SHEET, isSurface, barrierDismissible, onDismiss, bottomSheetHeader)
+        val route = DynamicScreenRegistry.register({
+            BottomSheet(
+                content = content,
+                header = bottomSheetHeader ?: Title(),
+                isSurface = isSurface,
+                barrierDismissible = barrierDismissible,
+                onDismiss = onDismiss
+            )
+        }, null)
+        navController.navigate(DynamicBottomSheetRoute(route.id))
     }
 
     fun showSnackBar(snackBar: SnackBar, onDismiss: (() -> Unit)? = null) {
-        val id = DynamicScreenRegistry.getLatestScreen()?.id ?: -1
-        scope.launch {
-            OverplayComponentRegistry.registerOverplay(
-                id = id,
-                content = {
-                    SnackBar(snackBar, onDismiss)
-                },
-                type = OverplayComponentType.SNACK_BAR,
-                onDismiss = onDismiss
-            )
-        }
+        val capturedSnackBar = snackBar
+        val capturedOnDismiss = onDismiss
+        val route = DynamicScreenRegistry.register({
+            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
+                SnackBar(capturedSnackBar, capturedOnDismiss)
+            }
+        }, null)
+        navController.navigate(DynamicSnackBarRoute(route.id))
     }
 
     fun hideSnackBar() {
         scope.launch {
-            OverplayComponentRegistry.clear()
-            delay(250L)
-            OverplayComponentRegistry.hardClearAfterDismiss()
+            if (navController.previousBackStackEntry != null) {
+                navController.popBackStack()
+                delay(250L)
+                DynamicScreenRegistry.getLatestScreen()?.let {
+                    DynamicScreenRegistry.unregisterScreen(it.id)
+                }
+            }
         }
     }
 
+
     fun dispose(){
         scope.cancel()
     }
@@ -174,6 +175,15 @@ data class DynamicScreenRoute(val id: Int)
 @Serializable
 data class DynamicDialogRoute(val id: Int)
 
+@Serializable
+data class DynamicBottomSheetRoute(val id: Int)
+
+@Serializable
+data class DynamicModalRoute(val id: Int)
+
+@Serializable
+data class DynamicSnackBarRoute(val id: Int)
+
 data class DynamicScreen(
     val id: Int,
     val content: @Composable () -> Unit,
@@ -215,117 +225,3 @@ object DynamicScreenRegistry {
         screens[id]?.options = options
     }
 }
-
-
-sealed class OverplayComponentParams {
-    class Modal(
-        val onDismiss: (() -> Unit)? = null,
-        val barrierDismissible: Boolean = true
-    ) : OverplayComponentParams()
-
-    class BottomSheet(
-        val isSurface: Boolean = false,
-        val onDismiss: (() -> Unit)? = null,
-        val barrierDismissible: Boolean = true,
-        val bottomSheetHeader: BottomHeader? = null,
-    ) : OverplayComponentParams()
-
-    class SnackBar() : OverplayComponentParams()
-}
-
-data class OverplayComponent(
-    val id: Int,
-    val type: OverplayComponentType? = null,
-    val content: @Composable () -> Unit,
-    val params: OverplayComponentParams? = null
-)
-
-enum class OverplayComponentType {
-    MODAL, BOTTOM_SHEET, SNACK_BAR
-}
-
-object OverplayComponentRegistry {
-    private var currentOverlayComponent : MutableState<OverplayComponent?> = mutableStateOf(null)
-    private var requestClose: (() -> Unit)? = null
-    internal fun bindClose(handler: (() -> Unit)?) {
-        requestClose = handler
-    }
-
-    fun registerOverplay(
-        id: Int,
-        content: @Composable () -> Unit,
-        type: OverplayComponentType,
-        isSurface: Boolean = false,
-        barrierDismissible: Boolean = true,
-        onDismiss: (() -> Unit)?,
-        bottomSheetHeader: BottomHeader? = null,
-    ){
-        val params = when(type){
-            OverplayComponentType.MODAL -> OverplayComponentParams.Modal(onDismiss, barrierDismissible)
-            OverplayComponentType.BOTTOM_SHEET -> OverplayComponentParams.BottomSheet(isSurface, onDismiss, barrierDismissible, bottomSheetHeader)
-            OverplayComponentType.SNACK_BAR -> OverplayComponentParams.SnackBar()
-        }
-
-        currentOverlayComponent.value = OverplayComponent(
-            id = id,
-            type = type,
-            content = content,
-            params = params
-        )
-    }
-
-    fun isOverplayShowing(): Boolean = currentOverlayComponent.value != null
-
-    fun getOverplayType(): OverplayComponentType? = currentOverlayComponent.value?.type
-
-    fun currentRootId(): Int? = currentOverlayComponent.value?.id
-
-    fun clear(){
-        if (requestClose != null) {
-            requestClose?.invoke()
-        } else {
-            currentOverlayComponent.value = null
-        }
-    }
-
-    internal fun hardClearAfterDismiss() {
-        currentOverlayComponent.value = null
-        requestClose = null
-    }
-
-    @Composable
-    fun OverlayComponent(){
-        val overplay = currentOverlayComponent.value ?: return
-
-        when (val params = overplay.params) {
-            is OverplayComponentParams.BottomSheet -> {
-                BottomSheet(
-                    content = overplay.content,
-                    header = params.bottomSheetHeader ?: Title(),
-                    isSurface = params.isSurface,
-                    barrierDismissible = params.barrierDismissible,
-                    onDismiss = params.onDismiss
-                )
-            }
-
-            is OverplayComponentParams.Modal -> {
-                ModalScreen(
-                    content = overplay.content,
-                    barrierDismissible = params.barrierDismissible,
-                    onDismiss = params.onDismiss
-                )
-            }
-
-            is OverplayComponentParams.SnackBar -> {
-                Box(
-                    modifier = Modifier.fillMaxSize(),
-                    contentAlignment = Alignment.BottomCenter
-                ) {
-                    overplay.content()
-                }
-            }
-
-            null -> {}
-        }
-    }
-}

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

@@ -138,8 +138,6 @@ internal fun StackScreen(
             Box(Modifier.zIndex(7f)){
                 FloatingContent()
             }
-
-            OverplayView(bottomTabIndex = bottomTabIndex, id = id)
         }
     }
 }
@@ -239,18 +237,7 @@ fun FooterContent(){
     }
 }
 
-@Composable
-fun OverplayView(bottomTabIndex: Int, id: Int){
-    val overplayType = OverplayComponentRegistry.getOverplayType()
-
-    if (overplayType != null) {
-        Box(Modifier.zIndex(if (overplayType == OverplayComponentType.SNACK_BAR) 3f else 8f).fillMaxSize()){
-            if (bottomTabIndex != -1) return@Box
-            if (OverplayComponentRegistry.currentRootId() != id) return@Box
-            OverplayComponentRegistry.OverlayComponent()
-        }
-    }
-}
+
 
 @Composable
 fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {

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

@@ -29,7 +29,7 @@ import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.navigation.LocalFooterHeightPx
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
-import vn.momo.kits.navigation.OverplayComponentRegistry
+
 
 sealed class SnackBar(open val duration: Long? = null) {
     data class Custom(
@@ -102,9 +102,6 @@ fun SnackBar(
     }
 
     DisposableEffect(Unit) {
-        OverplayComponentRegistry.bindClose {
-            closeEvent()
-        }
         onDispose {
             onDismiss?.invoke()
         }

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

@@ -5,6 +5,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.unit.Dp
+import vn.momo.kits.components.Options
 
 data class ScreenDimension(
     val width: Int,
@@ -39,4 +40,24 @@ expect fun LottieAnimation(
 
 expect fun NativePaint.setColor(
     color: Color = Color.Black
-)
+)
+@Composable
+expect fun NativeImage(
+    source: Any,
+    options: Options,
+    loading: Boolean,
+    onLoading: () -> Unit = {},
+    onSuccess: () -> Unit = {},
+    onError: () -> Unit = {},
+)
+
+/**
+ * Configures the current Dialog window's system-bar behaviour.
+ *
+ * @param decorFitsSystemWindows When `false` (the default) the dialog window
+ *   extends behind the status bar and navigation bar so that a full-screen
+ *   scrim/background covers the entire display uniformly.
+ *   Pass `true` to restore the default platform inset handling.
+ */
+@Composable
+expect fun ConfigureDialogWindow(decorFitsSystemWindows: Boolean = false)

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

@@ -12,26 +12,36 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.NativePaint
-import androidx.compose.ui.graphics.Paint
-import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
 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.CompatibleAnimationKeypath
 import cocoapods.lottie_ios.CompatibleAnimationView
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.viewinterop.UIKitInteropProperties
+import androidx.compose.ui.viewinterop.UIKitView
+import cocoapods.SDWebImage.sd_setImageWithURL
 import kotlinx.cinterop.ExperimentalForeignApi
 import kotlinx.cinterop.get
 import kotlinx.cinterop.memScoped
+import kotlinx.cinterop.useContents
 import org.jetbrains.skia.FilterBlurMode
 import org.jetbrains.skia.MaskFilter
+import platform.CoreGraphics.CGRectMake
 import platform.Foundation.NSBundle
 import platform.UIKit.UIColor
+import platform.UIKit.UIImageRenderingMode
 import platform.UIKit.UIScreen
+import platform.Foundation.NSURL
+import platform.UIKit.UIImageView
+import platform.UIKit.UIViewContentMode
+import platform.UIKit.UIView
+import vn.momo.kits.components.Options
 
 actual fun getPlatformName(): String = "iOS"
 
@@ -149,4 +159,167 @@ fun Color.toUIColor(): UIColor {
 
 actual fun NativePaint.setColor(color: Color){
     this.color = color.toArgb()
-}
+}
+/**
+ * A container UIView that positions an inner UIImageView using the same
+ * scale + alignment math as the Android Matrix implementation.
+ */
+@OptIn(ExperimentalForeignApi::class)
+class ScaledAlignedImageView(
+    var contentScale: ContentScale,
+    var alignment: Alignment,
+    var imageTintColor: UIColor? = null,
+) : UIView(frame = CGRectMake(0.0, 0.0, 0.0, 0.0)) {
+
+    val imageView = UIImageView().apply {
+        backgroundColor = UIColor.clearColor()
+        clipsToBounds = false
+        contentMode = UIViewContentMode.UIViewContentModeScaleToFill
+    }
+
+    init {
+        clipsToBounds = true
+        addSubview(imageView)
+    }
+
+    fun applyTint() {
+        val img = imageView.image ?: return
+        val color = imageTintColor
+        if (color != null) {
+            imageView.tintColor = color
+            imageView.image = img.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysTemplate)
+        } else {
+            imageView.tintColor = super.tintColor
+            imageView.image = img.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysOriginal)
+        }
+    }
+
+    override fun layoutSubviews() {
+        super.layoutSubviews()
+        applyImageFrame()
+    }
+
+    @OptIn(ExperimentalForeignApi::class)
+    fun applyImageFrame() {
+        memScoped {
+            val img = imageView.image ?: return
+            val rect = this@ScaledAlignedImageView.bounds.ptr[0]
+            val vw: Double = rect.size.width
+            val vh: Double = rect.size.height
+            if (vw <= 0.0 || vh <= 0.0) return
+
+            val imgSize = img.size
+            val imgScale: Double = img.scale
+            val deviceScale: Double = UIScreen.mainScreen.scale
+            // Normalize: UIImage.size is in pts at img.scale, convert to dp-equivalent pts
+            // (img pixel count = img.size × img.scale → dp = pixels / deviceScale)
+            val dw: Double = (imgSize.useContents { width } * imgScale / deviceScale).takeIf { it > 0.0 } ?: return
+            val dh: Double = (imgSize.useContents { height } * imgScale / deviceScale).takeIf { it > 0.0 } ?: return
+
+            val sxFit: Double = vw / dw
+            val syFit: Double = vh / dh
+
+            val (sx: Double, sy: Double) = when (contentScale) {
+                ContentScale.Crop       -> maxOf(sxFit, syFit).let { it to it }
+                ContentScale.Fit        -> minOf(sxFit, syFit).let { it to it }
+                ContentScale.FillWidth  -> sxFit to sxFit
+                ContentScale.FillHeight -> syFit to syFit
+                ContentScale.FillBounds -> sxFit to syFit
+                ContentScale.Inside     -> minOf(1.0, minOf(sxFit, syFit)).let { it to it }
+                ContentScale.None       -> 1.0 to 1.0
+                else                    -> maxOf(sxFit, syFit).let { it to it }
+            }
+
+            val (bx: Double, by: Double) = when (alignment) {
+                Alignment.TopStart     -> -1.0 to -1.0
+                Alignment.TopCenter    ->  0.0 to -1.0
+                Alignment.TopEnd       ->  1.0 to -1.0
+                Alignment.CenterStart  -> -1.0 to  0.0
+                Alignment.Center       ->  0.0 to  0.0
+                Alignment.CenterEnd    ->  1.0 to  0.0
+                Alignment.BottomStart  -> -1.0 to  1.0
+                Alignment.BottomCenter ->  0.0 to  1.0
+                Alignment.BottomEnd    ->  1.0 to  1.0
+                else                   ->  0.0 to  0.0
+            }
+
+            val scaledW: Double = dw * sx
+            val scaledH: Double = dh * sy
+            val tx: Double = (vw - scaledW) * (bx + 1.0) / 2.0
+            val ty: Double = (vh - scaledH) * (by + 1.0) / 2.0
+
+            imageView.setFrame(CGRectMake(tx, ty, scaledW, scaledH))
+        }
+    }
+}
+
+@OptIn(ExperimentalForeignApi::class, ExperimentalComposeUiApi::class)
+@Composable
+actual fun NativeImage(
+    source: Any,
+    options: Options,
+    loading: Boolean,
+    onLoading: () -> Unit,
+    onSuccess: () -> Unit,
+    onError: () -> Unit,
+) {
+    UIKitView(
+        modifier = Modifier.fillMaxSize(),
+        factory = {
+            ScaledAlignedImageView(
+                contentScale = options.contentScale,
+                alignment = options.alignment,
+                imageTintColor = options.tintColor?.toUIColor(),
+            ).apply {
+                backgroundColor = UIColor.clearColor()
+                alpha = options.alpha.toDouble().coerceIn(0.0, 1.0)
+            }
+        },
+        update = { container ->
+            container.contentScale = options.contentScale
+            container.alignment = options.alignment
+            container.imageTintColor = options.tintColor?.toUIColor()
+            container.alpha = options.alpha.toDouble().coerceIn(0.0, 1.0)
+            container.applyImageFrame()
+
+            val url = (source as? String)?.let { NSURL(string = it) } ?: run {
+                container.imageView.image = null
+                onError()
+                return@UIKitView
+            }
+
+            try {
+                onLoading()
+                container.imageView.sd_setImageWithURL(
+                    url = url,
+                    placeholderImage = null,
+                    options = 0u,
+                    completed = { _, error, _, _ ->
+                        if (error == null) {
+                            container.applyTint()
+                            container.applyImageFrame()
+                            onSuccess()
+                        } else {
+                            onError()
+                        }
+                    }
+                )
+                true
+            } catch (_: Throwable) {
+                onError()
+            }
+        },
+        properties = UIKitInteropProperties(
+            placedAsOverlay = true,
+            // Disable all touch handling on the interop host view so that
+            // Compose click handlers on parent composables (e.g. Icon, BackButton)
+            // receive touches correctly on iOS.
+            interactionMode = null,
+        )
+    )
+}
+
+@Composable
+actual fun ConfigureDialogWindow(decorFitsSystemWindows: Boolean) {
+    // iOS: dialogs already render behind system bars — no additional setup needed.
+}

package/gradle/libs.versions.toml

@@ -4,13 +4,13 @@ android-minSdk = "24"
 android-targetSdk = "35"
 ktor-version = "3.0.0-rc-1"
 coroutines = "1.8.1"
-kotlin = "2.1.21"
+kotlin = "2.3.0"
 kSerialize = "1.7.1"
-compose = "1.8.1"
-navigation-multiplatform = "2.9.0-beta02"
+compose = "1.10.1"
+navigation-multiplatform = "2.9.1"
 coil3-multiplatform = "3.0.0-alpha10"
 androidGradlePlugin = "8.6.0"
-r8 = "8.9.35"
+r8 = "8.13.19"
 kotlinx-datetime = "0.7.1"
 airbnb-lottie = "5.2.0"
 androidx-activity = "1.9.1"

package/gradle.properties

@@ -18,7 +18,7 @@ kotlin.apple.xcodeCompatibility.nowarn=true
 name="ComposeKits"
 group=vn.momo.kits
 artifact.id=kits
-version=0.156.6
+version=0.156.6-dialog.1
 
 repo=GitLab
 url=https://gitlab.mservice.com.vn/api/v4/projects/5400/packages/maven

package/ios/Popup/PopupDisplay.swift

@@ -113,11 +113,7 @@ public struct PopupDisplay: View {
                 }
                 
                 VStack(spacing: 0) {
-                    if(url.isEmpty) {
-                        Icon(source: "media_fail")
-                            .frame(width: .infinity, height: 184)
-                    }
-                    else {
+                    if(!url.isEmpty) {
                         WebImage(url: URL(string: url), isAnimating: .constant(true))
                             .resizable()
                             .placeholder {

package/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Thu Oct 02 17:53:13 ICT 2025
+sdk.dir=/Users/phuc/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.156.6-debug",
+  "version": "0.156.6-dialog.1-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},