@momo-kits/native-kits 0.162.6-debug → 0.163.1-beta.1-debug

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

@@ -3,9 +3,20 @@ 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.*
+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.shape.RoundedCornerShape
-import androidx.compose.runtime.*
+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.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -16,8 +27,12 @@ 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.*
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
 
 @Composable
@@ -44,8 +59,24 @@ fun InputDropDown(
 ) {
     val isFocused by remember { mutableStateOf(false) }
 
-    val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
-        getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
+    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 testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
@@ -61,14 +92,41 @@ fun InputDropDown(
             contentDescription = floatingValue; testTag = testId
         }) {
         Box {
-            FloatingLabel(
-                floatingValue = floatingValue,
-                floatingIcon = floatingIcon,
-                titleColor = floatingTitleColor,
-                iconColor = floatingIconTintColor,
-                offsetY = -Spacing.S,
-                required = required,
-            )
+            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
+                            )
+                        }
+                    }
+                }
+            }
             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,8 +102,24 @@ fun InputMoney(
 ) {
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
-    val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
-        getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
+    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 testId = if (disabled) "input_${floatingValue}_disabled" else "input_$floatingValue"
 
@@ -140,14 +156,39 @@ fun InputMoney(
             },
             decorationBox = { innerTextField ->
                 // Floating Icon
-                FloatingLabel(
-                    floatingValue = floatingValue,
-                    floatingIcon = floatingIcon,
-                    titleColor = floatingTitleColor,
-                    iconColor = floatingIconTintColor,
-                    offsetY = -size.values.height / 2,
-                    required = required,
-                )
+                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
+                                )
+                            }
+                        }
+                    }
+                }
                 //input box wrapper
                 Box(
                     modifier = Modifier.fillMaxWidth()

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

@@ -1,7 +1,5 @@
 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
@@ -50,7 +48,6 @@ 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
@@ -69,9 +66,7 @@ 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,11 +4,23 @@ 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.*
+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.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.runtime.*
+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.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
@@ -20,7 +32,12 @@ 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.*
+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.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 
@@ -54,7 +71,7 @@ enum class InputPhoneNumberSize(val values: InputPhoneNumberSizeDetail) {
 }
 
 @Composable
-private fun getBorderColor(isFocused: Boolean, error: String): Color {
+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
-internal fun RenderRightIconSearch(
+fun RenderRightIconSearch(
     loading: Boolean,
     icon: String,
     color: Color,

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

@@ -4,11 +4,25 @@ 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.*
+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.width
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.runtime.*
+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.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
@@ -19,14 +33,16 @@ import androidx.compose.ui.unit.Dp
 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.*
-import vn.momo.kits.modifier.InternalApi
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.scaleSize
 import vn.momo.kits.modifier.conditional
 
-@InternalApi
 const val MAX_LENGTH = 300
-internal val DEFAULT_HEIGHT = 104.dp
+val DEFAULT_HEIGHT = 104.dp
 
 @Composable
 fun InputTextArea(
@@ -55,8 +71,24 @@ fun InputTextArea(
 ) {
     var isFocused by remember { mutableStateOf(false) }
     var isBlurred = false
-    val (textColor, placeholderColor, iconTintColor, floatingTitleColor, floatingIconTintColor) =
-        getInputColors(disabled, iconColor, floatingValueColor, floatingIconColor)
+    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 fontSize = 16.sp
     val lineHeight = 24.sp
@@ -93,14 +125,41 @@ fun InputTextArea(
             },
             decorationBox = { innerTextField ->
                 // Floating Icon
-                FloatingLabel(
-                    floatingValue = floatingValue,
-                    floatingIcon = floatingIcon,
-                    titleColor = floatingTitleColor,
-                    iconColor = floatingIconTintColor,
-                    offsetY = -scaleHeight / 2,
-                    required = required,
-                )
+                if (floatingValue.isNotEmpty() || floatingIcon.isNotEmpty()) {
+                    Box(
+                        modifier = Modifier.wrapContentSize()
+                            .offset(y = (-scaleHeight / 2), 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
+                                )
+                            }
+                        }
+                    }
+                }
                 //input box wrapper
                 Box(
                     modifier = Modifier.fillMaxWidth()

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

@@ -1,18 +1,39 @@
 package vn.momo.kits.components
 
-import androidx.compose.animation.core.*
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.OverscrollEffect
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.FlingBehavior
 import androidx.compose.foundation.gestures.ScrollableDefaults
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListLayoutInfo
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
@@ -43,7 +64,7 @@ private const val BOX_KEY = "LazyColumnWithBouncing_BOX_KEY"
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
-internal fun overScrollWithPullToRefresh(
+fun overScrollWithPullToRefresh(
     pullRefreshState: PullToRefreshCustomState?,
 ): OverscrollEffect {
     val density = LocalDensity.current

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

@@ -18,7 +18,7 @@ import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 
 @Composable
-internal fun Dot(active: Boolean = false, activeColor: Color, modifier: Modifier = Modifier) {
+fun Dot(active: Boolean = false, activeColor: Color, modifier: Modifier = Modifier) {
     return if (active) {
         Box(
             modifier = modifier.size(width = 12.dp, height = 4.dp).background(

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

@@ -3,7 +3,14 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.horizontalScroll
-import androidx.compose.foundation.layout.*
+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.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -21,9 +28,10 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 
-private val INDICATOR_WIDTH = 24.dp
-private val PROGRESS_WIDTH = 72.dp
+val INDICATOR_WIDTH = 24.dp
+val PROGRESS_WIDTH = 72.dp
 
+// Memoized offset calculation to avoid repeated computations during scroll
 private fun calculateOffset(currentPosition: Int, maxBound: Int): Dp {
     return if (maxBound == 0) 0.dp else {
         (PROGRESS_WIDTH - INDICATOR_WIDTH) * (currentPosition / maxBound.toFloat())

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

@@ -4,22 +4,42 @@ 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.*
+import androidx.compose.foundation.layout.Arrangement
+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.aspectRatio
+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.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.TextLayoutResult
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.AppLanguage
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.*
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import vn.momo.kits.application.AppLanguage
 import kotlin.math.min
 
 data class PopupAction(
@@ -35,8 +55,9 @@ enum class PopupActionDirection {
 
 private fun heightForLines(
     layout: TextLayoutResult,
+    targetLines: Float
 ): Float {
-    val clampedLines = (8.5f).coerceAtLeast(1f)
+    val clampedLines = targetLines.coerceAtLeast(1f)
     val wholeLines = kotlin.math.floor(clampedLines).toInt()
     val fractionalPart = clampedLines - wholeLines
 
@@ -90,7 +111,7 @@ fun PopupNotify(
         layoutResult.value?.let { v ->
             // cap visible height at ~8.5 lines
             val textPx = v.size.height.toFloat()
-            val capPx  = heightForLines(v)
+            val capPx  = heightForLines(v, 8.5f)
 
             isScroll = textPx >= capPx
             scrollHeight = with(density) { min(textPx, capPx).toDp() }
@@ -215,7 +236,7 @@ fun PopupNotify(
 }
 
 @Composable
-internal fun BuildAction(
+fun BuildAction(
     primary: PopupAction?,
     secondary: PopupAction?,
     buttonDirection: PopupActionDirection = PopupActionDirection.ROW,
@@ -225,14 +246,14 @@ internal fun BuildAction(
     when (buttonDirection) {
         PopupActionDirection.AUTO -> {
             if (secondary != null && (secondary.title.length > 12 || primary?.title?.length!! > 12)) {
-                RenderColumn(
+                renderColumn(
                     secondary = secondary,
                     onAction = onAction,
                     closeAction = closeAction,
                     primary = primary
                 )
             } else {
-                RenderRow(
+                renderRow(
                     secondary = secondary,
                     onAction = onAction,
                     closeAction = closeAction,
@@ -241,14 +262,14 @@ internal fun BuildAction(
             }
         }
 
-        PopupActionDirection.ROW -> RenderRow(
+        PopupActionDirection.ROW -> renderRow(
             secondary = secondary,
             onAction = onAction,
             closeAction = closeAction,
             primary = primary
         )
 
-        else -> RenderColumn(
+        else -> renderColumn(
             secondary = secondary,
             onAction = onAction,
             closeAction = closeAction,
@@ -258,7 +279,7 @@ internal fun BuildAction(
 }
 
 @Composable
-internal fun RenderRow(
+fun renderRow(
     secondary: PopupAction?,
     closeAction: MutableState<String>,
     primary: PopupAction?,
@@ -295,7 +316,7 @@ internal fun RenderRow(
 }
 
 @Composable
-internal fun RenderColumn(
+fun renderColumn(
     secondary: PopupAction?,
     closeAction: MutableState<String>,
     primary: PopupAction?,

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

@@ -4,7 +4,13 @@ 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.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -13,10 +19,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
 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.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId