@momo-kits/native-kits 0.162.2-test.2-debug → 0.162.2-test.21-debug

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

@@ -2,43 +2,16 @@ package vn.momo.kits.application
 
 import androidx.annotation.FloatRange
 import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
+import androidx.compose.foundation.*
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.FocusInteraction
 import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.ime
-import androidx.compose.foundation.layout.navigationBars
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.Stable
-import androidx.compose.runtime.State
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.produceState
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberUpdatedState
-import androidx.compose.runtime.snapshotFlow
-import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
@@ -52,25 +25,13 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.layout.Layout
-import androidx.compose.ui.layout.Measurable
-import androidx.compose.ui.layout.MeasurePolicy
-import androidx.compose.ui.layout.MeasureResult
-import androidx.compose.ui.layout.MeasureScope
-import androidx.compose.ui.layout.Placeable
-import androidx.compose.ui.layout.layoutId
+import androidx.compose.ui.layout.*
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Constraints
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.lerp
-import androidx.compose.ui.unit.sp
+import androidx.compose.ui.unit.*
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.flow.mapNotNull
 import vn.momo.kits.components.Icon
@@ -82,7 +43,6 @@ import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.kitsAutomationId
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.modifier.shadow
 import vn.momo.kits.navigation.component.HEADER_HEIGHT
 import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
@@ -123,7 +83,7 @@ fun LiteScreen(
     title: String? = null,
     inputSearchProps: LiteInputSearchProps? = null,
     goBack: (() -> Unit)? = null,
-    headerRight: @Composable() (() -> Unit)? = null,
+    headerRight: @Composable (() -> Unit)? = null,
     useAnimationSearch: Boolean = true,
     titlePosition: TitlePosition = TitlePosition.LEFT,
     headerRightData: HeaderRightData? = null,
@@ -853,61 +813,6 @@ private fun LiteInputSearch(
     }
 }
 
-@Composable
-private fun footerOffset(
-    useAvoidKeyboard: Boolean = true,
-): State<IntOffset> {
-    if (!useAvoidKeyboard) return remember { mutableStateOf(IntOffset.Zero) }
-    val density = LocalDensity.current
-    val navPaddingValue = WindowInsets.navigationBars.asPaddingValues()
-    val keyboardSize = keyboardSizeState()
-
-    return produceState(IntOffset.Zero, density, navPaddingValue) {
-        val navSystemOffset = with(density) { navPaddingValue.calculateBottomPadding().roundToPx() }
-        snapshotFlow { keyboardSize.value }.collectLatest {
-            value = if (it == 0.dp) IntOffset.Zero
-            else IntOffset(
-                x = 0, y = with(density) {
-                    navSystemOffset - it.roundToPx()
-                })
-        }
-    }
-}
-
-@Composable
-fun keyboardSizeState(): State<Dp> {
-    val bottom = WindowInsets.ime.asPaddingValues()
-    return rememberUpdatedState(bottom.calculateBottomPadding())
-}
-
-@Composable
-private fun Footer(
-    useAvoidKeyboard: Boolean,
-    footerContent: (@Composable () -> Unit)?,
-) {
-    footerContent ?: return
-    val theme = AppTheme.current
-    val navPaddingValue = WindowInsets.navigationBars.asPaddingValues()
-    val offsetMove = footerOffset(useAvoidKeyboard)
-
-    Box(
-        modifier = Modifier.padding(navPaddingValue).fillMaxWidth().offset {
-            offsetMove.value
-        }.shadow(
-            color = Colors.black_20.copy(alpha = 0.05f),
-            blurRadius = 24f,
-            offsetX = 0.dp,
-            offsetY = (-4).dp
-        ).background(theme.colors.background.surface).padding(
-            start = Spacing.M,
-            top = Spacing.M,
-            end = Spacing.M,
-        )
-    ) {
-        footerContent()
-    }
-}
-
 fun Modifier.hideKeyboardOnTap() = composed {
     val focusManager = LocalFocusManager.current
     val keyboardManager = LocalSoftwareKeyboardController.current

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

@@ -0,0 +1,269 @@
+package vn.momo.kits.application
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.staticCompositionLocalOf
+
+/** Translation dictionary keyed by language; both `vi` and `en` are required. */
+@Immutable
+data class LocalizationObject(
+    val vi: Map<String, String> = emptyMap(),
+    val en: Map<String, String> = emptyMap(),
+)
+
+/**
+ * Translation gateway, ported from momo-kits React Native (`Application/Localize.ts`).
+ * Holds the merged dictionary (kit defaults + host overrides) and the active language,
+ * switched at runtime via [changeLanguage]. Language is snapshot-backed, so a switch
+ * recomposes consumers of [translate]/[translateData].
+ */
+@Stable
+class Localize(translations: LocalizationObject = LocalizationObject()) {
+
+    private var assets by mutableStateOf(merge(defaultLanguage, translations))
+
+    private var language by mutableStateOf(VI)
+
+    val currentLanguage: String get() = language
+
+    fun changeLanguage(language: String?) {
+        this.language = if (language == EN) EN else VI
+    }
+
+    fun translate(key: String): String {
+        val dictionary = if (language == EN) assets.en else assets.vi
+        return dictionary[key]?.takeIf { it.isNotEmpty() } ?: key
+    }
+
+    fun translateData(data: Map<String, String>): String =
+        data[language] ?: data.entries.joinToString(prefix = "{", postfix = "}") {
+            "\"${it.key}\":\"${it.value}\""
+        }
+
+    fun translateData(vi: String, en: String): String = if (language == EN) en else vi
+
+    fun addTranslations(translations: LocalizationObject) {
+        assets = merge(translations, assets)
+    }
+
+    companion object {
+        const val VI = "vi"
+        const val EN = "en"
+
+        private fun merge(base: LocalizationObject, override: LocalizationObject) = LocalizationObject(vi = base.vi + override.vi, en = base.en + override.en)
+
+        private val defaultLanguage = LocalizationObject(
+            vi = mapOf(
+                "errorCode" to "Mã lỗi: ",
+                "seeMore" to "Xem thêm",
+                "cancel" to "Huỷ",
+                "done" to "Xong",
+                "confirm" to "Xác nhận",
+                "month" to "tháng",
+                "day" to "ngày",
+                "choose" to "Chọn",
+                "sent" to "Đã gửi",
+                "received" to "Đã tiếp nhận",
+                "processing" to "Đang xử lý",
+                "processed" to "Đã xử lý",
+                "addImg" to "Thêm hình",
+                "chooseBtn" to "Chọn button",
+                "imgEg" to "Hình ảnh tham khảo",
+                "filter" to "Sắp xếp",
+                "shipping" to "Đang giao hàng",
+                "men" to "Nam",
+                "women" to "Nữ",
+                "more" to "Khác",
+                "expDate" to "Ngày hết hạn",
+                "exp" to "HSD",
+                "inActive" to "Chưa kích hoạt",
+                "voucherRemindHour" to "Hết hạn sau {hours} giờ",
+                "voucherRemindMinute" to "Hết hạn sau {minutes} phút",
+                "voucherRemindSecond" to "Hết hạn sau {seconds} giây",
+                "voucherRemindDay" to "Hết hạn sau {days} ngày",
+                "chooseRoundtrip" to "Chọn vé khứ hồi",
+                "depart" to "Ngày đi",
+                "return" to "Ngày về",
+                "departing" to "Đi",
+                "returning" to "Về",
+                "jan" to "Tháng 1",
+                "feb" to "Tháng 2",
+                "mar" to "Tháng 3",
+                "apr" to "Tháng 4",
+                "may" to "Tháng 5",
+                "jun" to "Tháng 6",
+                "jul" to "Tháng 7",
+                "aug" to "Tháng 8",
+                "sep" to "Tháng 9",
+                "oct" to "Tháng 10",
+                "nov" to "Tháng 11",
+                "dec" to "Tháng 12",
+                "mon" to "T2",
+                "tue" to "T3",
+                "wed" to "T4",
+                "thu" to "T5",
+                "fri" to "T6",
+                "sat" to "T7",
+                "sun" to "CN",
+                "showLunar" to "Hiển thị lịch âm",
+                "newYear" to "Tết Dương lịch",
+                "valentine" to "Ngày Lễ Tình nhân",
+                "womenDay" to "Ngày Quốc tế Phụ nữ",
+                "liberationDay" to "Ngày giải phóng Miền Nam thống nhất đất nước",
+                "laborDay" to "Ngày Quốc tế Lao động",
+                "childrenDay" to "Ngày Quốc tế Thiếu nhi",
+                "nationalDay" to "Quốc khánh nước CHXHCN Việt Nam",
+                "womenDayVN" to "Ngày Phụ nữ Việt Nam",
+                "teacherDay" to "Ngày Nhà giáo Việt Nam",
+                "christmasEve" to "Ngày Lễ Giáng Sinh",
+                "christmas" to "Ngày Lễ Giáng Sinh",
+                "lunarNewYear" to "Tết Nguyên Đán",
+                "hungKingDay" to "Giỗ Tổ Hùng Vương",
+                "balance" to "Số dư trong ví",
+                "chooseDate" to "Chọn ngày tháng năm",
+                "year" to "năm",
+                "hour" to "giờ",
+                "minute" to "phút",
+                "from" to "Từ",
+                "to" to "Đến",
+                "connected" to "Đã kết nối",
+                "disconnected" to "Mất kết nối",
+                "hide" to "Ẩn",
+                "viewAllTitle" to "Xem tất cả",
+                "headerTitle" to "Lịch sử thanh toán",
+                "SHORTEN" to "THU GỌN",
+                "viewMoreBank" to "XEM THÊM (\${otherItemCount} ngân hàng)",
+                "transaction_success" to "Thành công",
+                "transaction_fail" to "Thất bại",
+                "transaction_processing" to "Đang xử lý",
+                "viewMore" to "Xem thêm",
+                "shorten" to "Thu gọn",
+                "Payment" to "Thanh toán \${serviceName}",
+                "currencyUnit" to "đ",
+                "Month" to "Tháng",
+                "save" to "Lưu",
+                "favoriteIn" to "Thêm dịch vụ yêu thích",
+                "favoriteOut" to "Xóa dịch vụ yêu thích",
+                "deviceIn" to "Thêm vào thiết bị",
+                "setting" to "Cài đặt",
+                "transaction" to "Lịch sử giao dịch",
+                "share" to "Chia sẽ dịch vụ",
+                "information" to "Thông tin chung",
+                "tutorial" to "Hướng dẫn sử dụng",
+                "question" to "Câu hỏi thường gặp",
+                "support" to "Trung tâm hỗ trợ",
+                "skip" to "Bỏ qua",
+                "enterPhoneNumber" to "Vui lòng nhập số điện thoại",
+                "invalidPhoneNumber" to "Số điện thoại không đúng",
+            ),
+            en = mapOf(
+                "seeMore" to "See more",
+                "cancel" to "Cancel",
+                "done" to "Done",
+                "confirm" to "Confirm",
+                "month" to "month",
+                "day" to "day",
+                "choose" to "Choose",
+                "sent" to "Sent",
+                "received" to "Received",
+                "processing" to "Processing",
+                "processed" to "Done",
+                "addImg" to "Add image",
+                "chooseBtn" to "Choose button",
+                "imgEg" to "Example images",
+                "filter" to "Filter",
+                "shipping" to "Shipping",
+                "men" to "Men",
+                "women" to "Women",
+                "more" to "More",
+                "expDate" to "Expiration date",
+                "exp" to "EXP",
+                "inActive" to "Not Activated",
+                "voucherRemindHour" to "Revoke after {hours} hours",
+                "voucherRemindMinute" to "Revoke after {minutes} minutes",
+                "voucherRemindSecond" to "Revoke after {seconds} seconds",
+                "voucherRemindDay" to "Revoke after {days} days",
+                "chooseRoundtrip" to "Choose roundtrip ticket",
+                "depart" to "Departing",
+                "return" to "Returning",
+                "departing" to "De",
+                "returning" to "Re",
+                "jan" to "January",
+                "feb" to "February",
+                "mar" to "March",
+                "apr" to "April",
+                "may" to "May",
+                "jun" to "June",
+                "jul" to "July",
+                "aug" to "August",
+                "sep" to "September",
+                "oct" to "October",
+                "nov" to "November",
+                "dec" to "December",
+                "mon" to "Mon",
+                "tue" to "Tue",
+                "wed" to "Wed",
+                "thu" to "Thu",
+                "fri" to "Fri",
+                "sat" to "Sat",
+                "sun" to "Sun",
+                "showLunar" to "Show Lunar Calendar",
+                "newYear" to "New Year's Day",
+                "valentine" to "Valentine's Day",
+                "womenDay" to "International Women's Day",
+                "liberationDay" to "Liberation Day",
+                "laborDay" to "Internation Labor's Day",
+                "childrenDay" to "International Labor's Day",
+                "nationalDay" to "National Day",
+                "womenDayVN" to "Vietnamese Women's Day",
+                "teacherDay" to "Teacher's Day",
+                "christmasEve" to "Christmas Eve",
+                "christmas" to "Christmas Day",
+                "lunarNewYear" to "Lunar New Year",
+                "hungKingDay" to "Hung Kings' Festival",
+                "balance" to "Wallet Balance",
+                "chooseDate" to "Choose date",
+                "year" to "year",
+                "hour" to "hour",
+                "minute" to "minute",
+                "from" to "From",
+                "to" to "To",
+                "connected" to "Connected",
+                "disconnected" to "Disconnected",
+                "hide" to "Hide",
+                "viewAllTitle" to "View all",
+                "headerTitle" to "Transaction history",
+                "SHORTEN" to "SHORTEN",
+                "viewMoreBank" to "VIEW MORE (\${otherItemCount} banks)",
+                "transaction_success" to "Success",
+                "transaction_fail" to "Fail",
+                "transaction_processing" to "Processing",
+                "viewMore" to "View more",
+                "shorten" to "Shorten",
+                "Payment" to "\${serviceName} payment",
+                "currencyUnit" to "VND",
+                "Month" to "Month",
+                "save" to "Save",
+                "favoriteIn" to "Add to favorite services",
+                "favoriteOut" to "Remove to favorite services",
+                "deviceIn" to "Add to device",
+                "setting" to "Settings",
+                "transaction" to "Transaction History",
+                "share" to "Share",
+                "information" to "Information",
+                "tutorial" to "Instruction",
+                "question" to "FAQ",
+                "support" to "Support center",
+                "errorCode" to "Error code: ",
+                "skip" to "Skip",
+                "enterPhoneNumber" to "Please enter your phone number",
+                "invalidPhoneNumber" to "Invalid phone number",
+            ),
+        )
+    }
+}
+
+val LocalLocalize = staticCompositionLocalOf { Localize() }

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

@@ -1,23 +1,11 @@
 package vn.momo.kits.application
 
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.wrapContentSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
-import vn.momo.kits.const.AppStatusBar
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Theme
-import vn.momo.kits.const.ThemeAssets
-import vn.momo.kits.const.defaultTheme
+import vn.momo.kits.const.*
 import vn.momo.kits.modifier.DeprecatedModifier
 import vn.momo.kits.platform.getStatusBarHeight
 
@@ -81,7 +69,7 @@ fun ApplicationContainer(
     composeApi: ComposeApi? = null,
     statusBarHeight: Dp? = AppStatusBar.current,
     applicationContext: MiniAppContext? = null,
-    config: KitConfig? = null,
+    config: DesignSystemConfig? = null,
     language: String? = null,
     isWhiteList: Boolean = false,
     content: @Composable () -> Unit,
@@ -109,13 +97,11 @@ fun ApplicationContainer(
         AppTheme provides appTheme,
         PlatformApi provides composeApi,
         AppStatusBar provides appStatusBarHeight,
-        ApplicationContext provides applicationContext,
-        AppConfig provides config,
-        AppLanguage provides language,
+        LocalContext provides applicationContext,
     ) {
         Box(Modifier.wrapContentSize().then(DeprecatedModifier())) {
             content()
         }
     }
 
-}
+}

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

@@ -6,32 +6,10 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.ime
-import androidx.compose.foundation.layout.imePadding
-import androidx.compose.foundation.layout.navigationBars
-import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.DisposableEffect
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -44,24 +22,20 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.SupervisorJob
-import kotlinx.coroutines.cancel
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
+import kotlinx.coroutines.*
 import vn.momo.kits.components.InputSearchProps
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
-import vn.momo.kits.modifier.DeprecatedModifier
 import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.DeprecatedModifier
 import vn.momo.kits.modifier.shadow
 import vn.momo.kits.navigation.component.SnackBar
 import vn.momo.kits.platform.supportsImePadding
 import vn.momo.kits.utils.getAppStatusBarHeight
 import vn.momo.kits.utils.getNavigationBarHeight
+import kotlin.time.Duration.Companion.milliseconds
 
 enum class HeaderType {
     DEFAULT,
@@ -281,6 +255,7 @@ fun Footer(
             .onGloballyPositioned {
                 onFooterMeasured?.invoke(it.size.height)
             }
+            
     ) {
         Box(
             Modifier.fillMaxWidth()
@@ -333,7 +308,7 @@ val LocalScreenHelper = staticCompositionLocalOf<ScreenHelper> {
 }
 
 @Composable
-fun ScreenSnackBarHost(footerHeightPx: Int) {
+internal fun ScreenSnackBarHost(footerHeightPx: Int) {
     val helper = LocalScreenHelper.current
     val snackBarData = helper.snackBarState ?: return
     val density = LocalDensity.current
@@ -370,7 +345,7 @@ fun ScreenSnackBarHost(footerHeightPx: Int) {
     LaunchedEffect(snackBarData.type.duration) {
         val duration = snackBarData.type.duration
         if (duration != null) {
-            delay(duration)
+            delay(duration.milliseconds)
             helper.hideSnackBar()
         }
     }

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

@@ -24,7 +24,7 @@ private const val BACK_WIDTH = 28
 
 @Deprecated("Use vn.momo.kits.navigation.component.Header instead", ReplaceWith("vn.momo.kits.navigation.component.Header"))
 @Composable
-fun useHeaderSearchAnimation(
+internal fun useHeaderSearchAnimation(
     opacityAni: Float,
     scrollState: Int,
     headerRightWidth: Dp,

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

@@ -11,19 +11,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.scaleSize
+import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 
 
 @Composable
-fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier? = null) {
+fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier = Modifier) {
     val primaryColors = listOf(
         Color(0xFFF0F0F0),
         Color(0xFFEB2F96),
@@ -63,23 +59,24 @@ fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Mod
     }
     val scaleSize = scaleSize(16f)
 
-    if (modifier != null) {
-        Box(
-            modifier = modifier
-                .height(scaleSize.dp)
-                .widthIn(min = scaleSize.dp)
-                .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
-                .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(horizontal = Spacing.XS), contentAlignment = Alignment.Center
-        ) {
-            Text(
-                text = formatTitle(label),
-                color = Colors.black_01,
-                style = Typography.actionXxsBold
-            )
-        }
+    Box(
+        modifier = modifier
+            .height(scaleSize.dp)
+            .widthIn(min = scaleSize.dp)
+            .background(color = badgeColor, shape = RoundedCornerShape(Radius.M))
+            .border(width = 1.dp, shape = RoundedCornerShape(Radius.M), color = Colors.black_01)
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(horizontal = Spacing.XS),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = formatTitle(label),
+            color = Colors.black_01,
+            style = Typography.actionXxsBold,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis
+        )
     }
 }