@momo-kits/native-kits 0.163.1-beta.8 → 0.163.1-beta.9-debug

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

@@ -0,0 +1,276 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.*
+import org.jetbrains.compose.resources.Font
+import org.jetbrains.compose.resources.FontResource
+import org.jetbrains.compose.resources.InternalResourceApi
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.platform.getScreenDimensions
+import vn.momo.uikits.resources.*
+import kotlin.math.max
+import kotlin.math.min
+
+const val DEFAULT_SCREEN_SIZE = 375f
+const val MAX_FONT_SCALE = 1.5f
+const val MAX_DEVICE_SCALE = 5
+
+@Composable
+fun scaleSize(size: Float): Float {
+    val context = LocalContext.current
+    // Host-pushed context wins; otherwise fall back to the app-wide KitFontScale holder.
+    val useOsScale = context?.useOSScaleRate ?: KitFontScale.useOSScaleRate
+    if (!useOsScale) {
+        return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
+    }
+    val scaleSizeMaxRate: Float = MAX_FONT_SCALE
+    val deviceWidth = getScreenDimensions().width
+    val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
+
+    val density = LocalDensity.current
+    val fontScale = density.fontScale
+
+    var fontSizeScaleDevice = size
+    var fontSizeScaleOS = size
+
+    if (deviceScale > 1) {
+        fontSizeScaleDevice =
+            min(deviceScale * fontSizeScaleDevice, fontSizeScaleDevice + MAX_DEVICE_SCALE)
+    }
+
+    if (fontScale > 1) {
+        fontSizeScaleOS = min(fontScale * fontSizeScaleOS, fontSizeScaleOS * scaleSizeMaxRate)
+    }
+
+    return max(
+        fontSizeScaleDevice,
+        fontSizeScaleOS
+    )
+}
+
+@Composable
+fun scaleSize(size: TextUnit): TextUnit {
+    if (!size.isSp) return size
+
+    val density = LocalDensity.current
+
+    val scaled = scaleSize(size.value)
+    val spValue = scaled / density.fontScale
+
+    return TextUnit(value = spValue, type = TextUnitType.Sp)
+}
+
+@Composable
+fun scaleSize(size: Dp): Dp {
+    return scaleSize(size.value).dp
+}
+
+@Composable
+fun scaleSize(textStyle: TextStyle): TextStyle {
+    return textStyle.copy(
+        fontSize = if (textStyle.fontSize != TextUnit.Unspecified)
+            scaleSize(textStyle.fontSize)
+        else
+            TextUnit.Unspecified,
+
+        lineHeight = if (textStyle.lineHeight != TextUnit.Unspecified)
+            scaleSize(textStyle.lineHeight)
+        else
+            TextUnit.Unspecified,
+    )
+}
+
+
+@OptIn(InternalResourceApi::class)
+@Composable
+internal fun getFont(font: FontResource): FontFamily {
+    return FontFamily(Font(font))
+}
+
+@Composable
+fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
+    val key = "$fontFamily-${fontWeight?.weight}"
+    val fontMap = mapOf(
+        "SFProText-100" to Res.font.sfprotext_thin,
+        "SFProText-200" to Res.font.sfprotext_ultralight,
+        "SFProText-300" to Res.font.sfprotext_light,
+        "SFProText-400" to Res.font.sfprotext_regular,
+        "SFProText-500" to Res.font.sfprotext_medium,
+        "SFProText-600" to Res.font.sfprotext_semibold,
+        "SFProText-700" to Res.font.sfprotext_bold,
+        "SFProText-800" to Res.font.sfprotext_heavy,
+        "SFProText-900" to Res.font.sfprotext_black,
+
+        "MoMoSignature-100" to Res.font.momosignature,
+        "MoMoSignature-200" to Res.font.momosignature,
+        "MoMoSignature-300" to Res.font.momosignature,
+        "MoMoSignature-400" to Res.font.momosignature,
+        "MoMoSignature-500" to Res.font.momosignature,
+        "MoMoSignature-600" to Res.font.momosignature,
+        "MoMoSignature-700" to Res.font.momosignature,
+        "MoMoSignature-800" to Res.font.momosignature,
+        "MoMoSignature-900" to Res.font.momosignature,
+
+        "MoMoTrustDisplay-100" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-200" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-300" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-400" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-500" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-600" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-700" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-800" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-900" to Res.font.momotrustdisplay,
+    )
+    val font = fontMap[key] ?: Res.font.sfprotext_regular
+    return getFont(font)
+}
+
+@Immutable
+class AppTypography internal constructor(
+    val headlineDefaultBold: TextStyle,
+    val headerMBold: TextStyle,
+    val headerDefaultBold: TextStyle,
+    val headerSSemibold: TextStyle,
+    val headerXsSemibold: TextStyle,
+    val bodyDefaultRegular: TextStyle,
+    val bodyDefaultRegularStrikethrough: TextStyle,
+    val descriptionDefaultRegular: TextStyle,
+    val descriptionDefaultRegularStrikethrough: TextStyle,
+    val descriptionXsRegular: TextStyle,
+    val descriptionXsRegularStrikethrough: TextStyle,
+    val labelDefaultMedium: TextStyle,
+    val labelSMedium: TextStyle,
+    val labelXsMedium: TextStyle,
+    val actionDefaultBold: TextStyle,
+    val actionSBold: TextStyle,
+    val actionXsBold: TextStyle,
+    val actionXxsBold: TextStyle,
+) {
+    constructor(
+        default: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        headlineDefaultBold: TextStyle = TextStyle(
+            fontSize = 24.sp,
+            lineHeight = 34.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerMBold: TextStyle = TextStyle(
+            fontSize = 18.sp,
+            lineHeight = 26.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerDefaultBold: TextStyle = TextStyle(
+            fontSize = 16.sp,
+            lineHeight = 22.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerSSemibold: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.SemiBold
+        ),
+        headerXsSemibold: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.SemiBold
+        ),
+        bodyDefaultRegular: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        bodyDefaultRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        descriptionDefaultRegular: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        descriptionDefaultRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        descriptionXsRegular: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        descriptionXsRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        labelDefaultMedium: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        labelSMedium: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        labelXsMedium: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        actionDefaultBold: TextStyle = TextStyle(
+            fontSize = 16.sp,
+            lineHeight = 22.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionSBold: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionXsBold: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionXxsBold: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Bold
+        ),
+    ) : this(
+        headlineDefaultBold = headlineDefaultBold,
+        headerMBold = headerMBold,
+        headerDefaultBold = headerDefaultBold,
+        headerSSemibold = headerSSemibold,
+        headerXsSemibold = headerXsSemibold,
+        bodyDefaultRegular = bodyDefaultRegular,
+        bodyDefaultRegularStrikethrough = bodyDefaultRegularStrikethrough,
+        descriptionDefaultRegular = descriptionDefaultRegular,
+        descriptionDefaultRegularStrikethrough = descriptionDefaultRegularStrikethrough,
+        descriptionXsRegular = descriptionXsRegular,
+        descriptionXsRegularStrikethrough = descriptionXsRegularStrikethrough,
+        labelDefaultMedium = labelDefaultMedium,
+        labelSMedium = labelSMedium,
+        labelXsMedium = labelXsMedium,
+        actionDefaultBold = actionDefaultBold,
+        actionSBold = actionSBold,
+        actionXsBold = actionXsBold,
+        actionXxsBold = actionXxsBold
+    )
+}
+
+val Typography = AppTypography()

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

@@ -0,0 +1,65 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+
+/**
+ * A white rounded surface card that lays its [Item]s on a 12-column grid
+ * (React kit foundations/Layout/Card). 8dp gutter, 12dp padding, 12dp
+ * horizontal margin, Radius.M corners, background = theme surface, optional
+ * shadow or [backgroundImage]. Items flow left-to-right and wrap.
+ */
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun Card(
+    useShadow: Boolean = false,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 8.dp
+    val shape = RoundedCornerShape(Radius.M)
+    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
+    if (useShadow) surface = surface.shadow(4.dp, shape)
+    surface = surface.clip(shape)
+    // The React kit drops the surface colour when a backgroundImage is supplied
+    // (`!!backgroundImage && { backgroundColor: undefined }`).
+    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    Box(modifier = surface) {
+        // React renders this as an absolutely-filled child BEHIND the content
+        // (styles.imageBackground: position absolute, inset 0) — matchParentSize
+        // fills the card without contributing to its measured size.
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(12.dp)) {
+            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
+            // nudge: it keeps a full 12-span Item ~1dp narrower than the content
+            // box so sub-pixel rounding can never overflow and wrap the FlowRow.
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * Grid context supplied by [Section] / [Card]: the per-span cell size + gutter,
+ * so an [Item] can resolve its pixel width from a 1-12 `widthSpan`. Mirrors the
+ * React kit's GridContext (foundations/Layout/GridSystem).
+ */
+data class GridContext(
+    val numberOfColumns: Int = 12,
+    val gutter: Dp = 12.dp,
+    val sizePerSpan: Dp = 0.dp,
+) {
+    /** Width covering `span` columns + the (span-1) gutters between them. */
+    fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
+}
+
+/** Provided by Section/Card; null when an Item is rendered outside a grid. */
+val LocalGridContext = compositionLocalOf<GridContext?> { null }
+
+/**
+ * A grid cell. `widthSpan` (1-12) sets the width as a fraction of the parent
+ * Section/Card; the parent's flex-wrap flows the cells into rows. Rendered
+ * outside a grid it just wraps its content at its natural size.
+ */
+@Composable
+fun Item(
+    widthSpan: Int = 12,
+    heightSpan: Int = 0,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val grid = LocalGridContext.current
+    var m = modifier
+    if (grid != null) {
+        m = m.width(grid.sizeForSpan(widthSpan))
+        if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
+    }
+    Box(modifier = m) { content() }
+}

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

@@ -0,0 +1,51 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+
+/**
+ * A transparent 12-column grid row that wraps its [Item]s (React kit
+ * foundations/Layout/Section). 12dp gutter; 12dp horizontal margin when
+ * `useMargin`; optional [backgroundImage]. Items flow left-to-right and wrap.
+ */
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun Section(
+    useMargin: Boolean = true,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 12.dp
+    val margin = if (useMargin) 12.dp else 0.dp
+    Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
+        // React renders this as an absolutely-filled child behind the content
+        // (styles.imageBackground: position absolute, inset 0).
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            // `- 1.dp / columns` mirrors the React kit's `- 1 / numberOfColumns`
+            // nudge — keeps a full 12-span Item ~1dp inside the content box so
+            // sub-pixel rounding can never overflow and wrap the FlowRow.
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/AutomationId.kt

@@ -0,0 +1,52 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.node.SemanticsModifierNode
+import androidx.compose.ui.semantics.SemanticsPropertyReceiver
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
+import vn.momo.kits.platform.getPlatformName
+
+fun Modifier.setAutomationId(accessibilityId: String, mergeDescendants: Boolean = false): Modifier {
+    return if (getPlatformName() == "Android") {
+        semantics {
+            contentDescription = accessibilityId
+        }
+    } else {
+        semantics(mergeDescendants = mergeDescendants) {
+            testTag = accessibilityId
+        }
+    }}
+
+fun Modifier.kitsAutomationId(accessibilityId: String, label: String? = null) =
+    this then KitsAutomationIdElement(accessibilityId, label)
+
+private data class KitsAutomationIdElement(
+    private val accessibilityId: String,
+    private val label: String? = null,
+) : ModifierNodeElement<KitsAutomationIdNode>() {
+    override fun create(): KitsAutomationIdNode {
+        return KitsAutomationIdNode(accessibilityId, label)
+    }
+
+    override fun update(node: KitsAutomationIdNode) {
+        node.accessibilityId = accessibilityId
+        node.label = label
+    }
+}
+
+private class KitsAutomationIdNode(
+    var accessibilityId: String,
+    var label: String?,
+) : Modifier.Node(), SemanticsModifierNode {
+    override fun SemanticsPropertyReceiver.applySemantics() {
+        if (getPlatformName() == "Android") {
+            contentDescription = accessibilityId
+        } else {
+            testTag = accessibilityId
+            contentDescription = label ?: accessibilityId
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Clickable.kt

@@ -0,0 +1,66 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.semantics.Role
+
+fun Modifier.noFeedbackClickable(
+    enabled: Boolean = true, onClickLabel: String? = null, role: Role? = null, onClick: () -> Unit
+): Modifier = composed {
+    clickable(
+        interactionSource = remember { MutableInteractionSource() },
+        indication = null,
+        enabled,
+        onClickLabel,
+        role,
+        onClick
+    )
+}
+
+fun Modifier.activeOpacityClickable(
+    activeOpacity: Float = 0.2f,
+    enabled: Boolean = true,
+    onClickLabel: String? = null,
+    role: Role? = null,
+    onClick: () -> Unit
+): Modifier = composed {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val animatedAlpha by animateFloatAsState(
+        targetValue = if (isPressed) activeOpacity else 1f,
+        label = "ActiveOpacity"
+    )
+
+    this
+        .graphicsLayer { alpha = animatedAlpha }
+        .clickable(
+            interactionSource = interactionSource,
+            indication = null,
+            enabled,
+            onClickLabel,
+            role,
+            onClick
+        )
+}
+fun Modifier.hideKeyboardOnTap() = composed {
+    val focusManager = LocalFocusManager.current
+    val keyboardManager = LocalSoftwareKeyboardController.current
+
+    pointerInput(Unit) {
+        detectTapGestures {
+            keyboardManager?.hide()
+            focusManager.clearFocus()
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/Conditional.kt

@@ -0,0 +1,11 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+
+fun Modifier.conditional(condition: Boolean, modifier: Modifier.() -> Modifier): Modifier {
+    return if (condition) {
+        then(modifier(Modifier))
+    } else {
+        this
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/DeprecatedModifier.kt

@@ -0,0 +1,104 @@
+package vn.momo.kits.modifier
+
+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.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.clipRect
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.drawText
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.rememberTextMeasurer
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+
+@Suppress("ExperimentalAnnotationRetention")
+@RequiresOptIn(
+    message = "This is internal API of native-kits, become internal in next sprint",
+    level = RequiresOptIn.Level.WARNING,
+)
+@Retention(AnnotationRetention.BINARY)
+@Target(
+    AnnotationTarget.CLASS,
+    AnnotationTarget.FUNCTION,
+    AnnotationTarget.PROPERTY,
+)
+annotation class InternalApi
+
+@Composable
+fun DeprecatedModifier(text: String = "Deprecated component"): Modifier = debugMarker(
+    label = text,
+    background = Colors.red_04.copy(alpha = 0.7f),
+    textColor = Colors.red_01,
+    animationLabel = "deprecatedMarquee",
+)
+
+@Composable
+private fun debugMarker(
+    label: String,
+    background: Color,
+    textColor: Color,
+    animationLabel: String,
+): Modifier {
+    if (!IsShowBaseLineDebug) return Modifier
+
+    val textMeasurer = rememberTextMeasurer()
+    val marquee = rememberInfiniteTransition(label = animationLabel)
+    val progress by marquee.animateFloat(
+        initialValue = 0f,
+        targetValue = 1f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(durationMillis = 4000, easing = LinearEasing),
+            repeatMode = RepeatMode.Restart,
+        ),
+        label = "${animationLabel}Progress",
+    )
+
+    return Modifier.drawWithContent {
+        drawContent()
+        drawRect(color = background)
+
+        if (size.width <= 0f || size.height <= 0f) return@drawWithContent
+
+        val fontPx = (size.width * 0.1f).coerceIn(12.sp.toPx(), 20.sp.toPx())
+        val style = TextStyle(
+            color = textColor,
+            fontSize = fontPx.toSp(),
+            fontWeight = FontWeight.Bold,
+        )
+
+        val intrinsic = textMeasurer.measure(
+            text = label,
+            style = style,
+            maxLines = 1,
+            softWrap = false,
+        )
+        val textW = intrinsic.size.width
+        val textH = intrinsic.size.height
+        val y = (size.height - textH) / 2f
+
+        if (textW <= size.width) {
+            drawText(
+                textLayoutResult = intrinsic,
+                topLeft = Offset((size.width - textW) / 2f, y),
+            )
+        } else {
+            clipRect(right = size.width, bottom = size.height) {
+                val gap = textW * 0.5f
+                val travel = textW + gap
+                val x = -progress * travel
+                drawText(textLayoutResult = intrinsic, topLeft = Offset(x, y))
+                drawText(textLayoutResult = intrinsic, topLeft = Offset(x + travel, y))
+            }
+        }
+    }
+}