@momo-kits/native-kits 0.300.3 → 0.300.4-debug

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

@@ -0,0 +1,306 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.platform.LocalWindowInfo
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.navigation.component.HEADER_HEIGHT
+import vn.momo.kits.platform.ReservedRegion
+import vn.momo.kits.platform.isPhoneIdiom
+import vn.momo.kits.platform.rememberReservedRegions
+import vn.momo.kits.utils.getAppStatusBarHeight
+import vn.momo.kits.utils.horizontalSafeAreaInsets
+
+enum class SideBarEdge { LEFT, RIGHT }
+
+@Immutable
+data class SideBarLayout(
+    val edge: SideBarEdge,
+    val width: Dp,
+    // Preferred window y of the first control; the column is still kept above footer and bottom bars.
+    val top: Dp,
+    // Room kept free above the window bottom, clear of a camera at the bottom end of the strip.
+    val bottom: Dp,
+)
+
+// Room the header row keeps from each side for the status bar clock and battery clusters.
+@Immutable
+data class StatusBarClearance(val left: Dp, val right: Dp)
+
+@Immutable
+data class ScreenLayout(
+    val width: Dp,
+    val height: Dp,
+    val isIPhoneDuo: Boolean,
+    // Raw top / bottom safe area; overlays and the Duo floating tab bar keep clear of them.
+    val insetTop: Dp,
+    val insetBottom: Dp,
+    val insetLeft: Dp,
+    val insetRight: Dp,
+    val contentWidth: Dp,
+    val headerHeight: Dp,
+    // 0 when the status bar is off the top edge, so the bar row fills the header and keeps the title centered.
+    val headerStatusBarHeight: Dp,
+    // iPhone Duo moves back and toolkit into a column in the side safe area; null while they stay in the bar.
+    val sideBar: SideBarLayout? = null,
+    // The device has a hinge, folded or not, whatever the window size; drives popups, modal and bottom sheet.
+    val isIPhoneDuoDevice: Boolean = isIPhoneDuo,
+    // Portrait iPhone Duo puts the status bar in the side strip, about twice as tall as the strip is wide.
+    // Stored so it survives consumeHorizontalInsets().
+    val duoTopInset: Dp = insetTop,
+    // iPhone Duo inner display in portrait: the header row shares the status bar band, between its clusters.
+    val statusBarClearance: StatusBarClearance? = null,
+) {
+    val headerBarHeight: Dp get() = headerHeight - headerStatusBarHeight
+}
+
+// Measured by momo-kits RN (Layout/utils.ts) on the iOS 27.1 iPhone Duo simulator; keep both in sync.
+internal object DuoMetrics {
+    // Inner display is ~1.42, outer ~1.45; every slab iPhone is 1.77 or taller.
+    const val MAX_ASPECT_RATIO = 1.6f
+    val controlSize = 48.dp
+    val itemPitch = 50.dp
+    // Portrait: below the camera/clock cluster in the strip (ends near y 151).
+    val firstItemTop = 170.dp
+    // Inner display in landscape: below its status cluster (ends near y 98).
+    val firstItemTopLandscape = 120.dp
+    // Window height from which the inner display is in use (outer is 466pt tall in landscape, inner 669pt).
+    val innerMinHeight = 600.dp
+    // Outer display in portrait: the header is 4pt taller than the iPhone floor and its title
+    // lines up with the camera punchout (y 24–66 at the top of the strip).
+    val outerHeaderHeight = 76.dp
+    val outerCameraCenterY = 45.dp
+    // Outer display in landscape has no status bar in the strip: controls keep this far from
+    // both ends unless a reserved region (the camera at either end) asks for more.
+    val edgeInset = 24.dp
+    // Inner display in portrait: the clock and connectivity cluster sits at the top right corner
+    // (x 550–643 of 669, clock digits centered on y 47); its reserved region is taller than the glyphs.
+    val innerStatusBarCenterY = 47.dp
+    val innerStatusBarWidth = 120.dp
+    // Host app's iOS 26 tab bar on the inner display in portrait: a 62pt glass pill sized to its tabs,
+    // QR as a 62pt platter beside it, ≥ 20pt from the sides, 13pt into the home indicator inset.
+    val floatingTabBarHeight = 62.dp
+    val floatingTabBarMargin = 20.dp
+    val floatingTabBarInsetOverlap = 13.dp
+}
+
+private val IPHONE_HEADER_MIN_HEIGHT = 72.dp
+
+// A smaller top inset means the status bar is not on the top edge.
+private val STATUS_BAR_MIN_INSET = 20.dp
+
+internal val LocalScreenLayout = compositionLocalOf<ScreenLayout?> { null }
+
+// Port of RN `useScreenLayout`; follows fold/unfold and rotation through the window size and safe area.
+@Composable
+fun getScreenLayout(): ScreenLayout =
+    LocalScreenLayout.current ?: calculateScreenLayout(getAppStatusBarHeight())
+
+@Composable
+internal fun calculateScreenLayout(topInset: Dp, parent: ScreenLayout? = null): ScreenLayout {
+    val isPhone = isPhoneIdiom()
+    if (parent != null) {
+        // the parent's row center reproduces its own centered geometry
+        val titleCenterY = parent.headerStatusBarHeight + parent.headerBarHeight / 2
+        val statusBarClearance = parent.statusBarClearance?.takeIf { topInset >= STATUS_BAR_MIN_INSET }
+        val (headerHeight, headerStatusBarHeight) = if (statusBarClearance != null) {
+            statusBarRowGeometry()
+        } else {
+            headerGeometry(topInset, isPhone, parent.width, parent.height, parent.sideBar != null, titleCenterY)
+        }
+        return parent.copy(
+            headerHeight = headerHeight,
+            headerStatusBarHeight = headerStatusBarHeight,
+            statusBarClearance = statusBarClearance,
+        )
+    }
+
+    val density = LocalDensity.current
+    val layoutDirection = LocalLayoutDirection.current
+    val size = LocalWindowInfo.current.containerSize
+    val insets = horizontalSafeAreaInsets
+    val leftPx = insets.getLeft(density, layoutDirection)
+    val rightPx = insets.getRight(density, layoutDirection)
+    val bottomPx = WindowInsets.systemBars.getBottom(density)
+    val reservedRegions = rememberReservedRegions()
+
+    return remember(size, leftPx, rightPx, bottomPx, topInset, density, reservedRegions) {
+        with(density) {
+            val width = size.width.toDp()
+            val height = size.height.toDp()
+            screenLayoutOf(
+                width = width,
+                height = height,
+                insetLeft = leftPx.toDp(),
+                insetRight = rightPx.toDp(),
+                topInset = topInset,
+                bottomInset = bottomPx.toDp(),
+                isPhone = isPhone,
+                asymmetricInsets = leftPx != rightPx,
+                isDuoDevice = isPhone && reservedRegions.isFoldable,
+                reservedRegions = reservedRegions.occlusion,
+            )
+        }
+    }
+}
+
+// Content inside the safe-area padding: the insets are spent and the side bar belongs to the screen.
+internal fun ScreenLayout.consumeHorizontalInsets(): ScreenLayout =
+    copy(width = contentWidth, insetLeft = 0.dp, insetRight = 0.dp, sideBar = null)
+
+// titleCenterY: window y the title row centers on for the outer display in landscape.
+private fun headerGeometry(
+    topInset: Dp,
+    isPhone: Boolean,
+    width: Dp,
+    height: Dp,
+    hasSideBar: Boolean,
+    titleCenterY: Dp,
+): Pair<Dp, Dp> {
+    val headerHeight = topInset + HEADER_HEIGHT.dp
+    if (!isPhone) return headerHeight to topInset
+    if (hasSideBar && topInset < STATUS_BAR_MIN_INSET) {
+        if (height > width && width < DuoMetrics.innerMinHeight) {
+            // outer display: the row starts below the top so the title centers on the camera
+            return DuoMetrics.outerHeaderHeight to DuoMetrics.outerCameraCenterY * 2 - DuoMetrics.outerHeaderHeight
+        }
+        if (width > height && height < DuoMetrics.innerMinHeight) {
+            // reaches 8pt below a side bar control centered on the row
+            val centered = maxOf(IPHONE_HEADER_MIN_HEIGHT, titleCenterY + DuoMetrics.controlSize / 2 + Spacing.S)
+            return centered to maxOf(0.dp, titleCenterY * 2 - centered)
+        }
+    }
+    return maxOf(headerHeight, IPHONE_HEADER_MIN_HEIGHT) to if (topInset < STATUS_BAR_MIN_INSET) 0.dp else topInset
+}
+
+// Centered on the clock digits; the cluster's region center sits above them.
+private fun statusBarRowGeometry(): Pair<Dp, Dp> = DuoMetrics.innerStatusBarCenterY * 2 to 0.dp
+
+private data class StripOcclusion(val top: Dp, val topCenter: Dp, val bottom: Dp)
+
+// How far system regions reach into a side strip from its top and from its bottom end
+// (e.g. the camera, which sits at either end depending on the rotation), and the center y
+// of the region reaching furthest from the top.
+private fun stripOcclusion(regions: List<ReservedRegion>, stripLeft: Dp, stripRight: Dp, windowHeight: Dp): StripOcclusion {
+    var top = 0.dp
+    var topCenter = 0.dp
+    var bottom = 0.dp
+    regions.forEach { region ->
+        if (region.x >= stripRight || region.x + region.width <= stripLeft) return@forEach
+        val centerY = region.y + region.height / 2
+        if (centerY < windowHeight / 2) {
+            if (region.y + region.height > top) {
+                top = region.y + region.height
+                topCenter = centerY
+            }
+        } else {
+            bottom = maxOf(bottom, windowHeight - region.y)
+        }
+    }
+    return StripOcclusion(top, topCenter, bottom)
+}
+
+// How far the clock and battery clusters of a status bar on the top edge reach in from each side;
+// null without reserved regions there.
+private fun statusBarClusters(regions: List<ReservedRegion>, windowWidth: Dp, topInset: Dp): StatusBarClearance? {
+    val midX = windowWidth / 2
+    val clusters = regions.filter {
+        it.y < topInset && it.y + it.height <= topInset && (it.x + it.width <= midX || it.x >= midX)
+    }
+    if (clusters.isEmpty()) return null
+    var left = 0.dp
+    var right = 0.dp
+    clusters.forEach {
+        if (it.x < midX) left = maxOf(left, it.x + it.width) else right = maxOf(right, windowWidth - it.x)
+    }
+    return StatusBarClearance(left, right)
+}
+
+// Slab iPhones report equal side insets in landscape; iPhone Duo moves the status bar to one side.
+private fun isIPhoneDuoWindow(width: Dp, height: Dp, asymmetricInsets: Boolean): Boolean {
+    val shortSide = minOf(width, height)
+    if (shortSide <= 0.dp) return asymmetricInsets
+    return maxOf(width, height) / shortSide < DuoMetrics.MAX_ASPECT_RATIO || asymmetricInsets
+}
+
+private fun screenLayoutOf(
+    width: Dp,
+    height: Dp,
+    insetLeft: Dp,
+    insetRight: Dp,
+    topInset: Dp,
+    bottomInset: Dp,
+    isPhone: Boolean,
+    asymmetricInsets: Boolean,
+    isDuoDevice: Boolean,
+    reservedRegions: List<ReservedRegion>,
+): ScreenLayout {
+    val isIPhoneDuo = isPhone && isIPhoneDuoWindow(width, height, asymmetricInsets)
+    val isInnerPortrait = height > width && width >= DuoMetrics.innerMinHeight
+    val statusBarClearance = if (isIPhoneDuo && isInnerPortrait && topInset >= STATUS_BAR_MIN_INSET) {
+        statusBarClusters(reservedRegions, width, topInset)
+            ?: StatusBarClearance(left = 0.dp, right = DuoMetrics.innerStatusBarWidth + Spacing.S)
+    } else {
+        null
+    }
+
+    var sideBar: SideBarLayout? = null
+    var titleCenterY = 0.dp
+    val sideInset = maxOf(insetLeft, insetRight)
+    // narrower strips cannot host a control 12pt from the inner edge
+    if (isIPhoneDuo && sideInset >= DuoMetrics.controlSize + Spacing.M) {
+        val edge = if (insetRight >= insetLeft) SideBarEdge.RIGHT else SideBarEdge.LEFT
+        val stripLeft = if (edge == SideBarEdge.RIGHT) width - sideInset else 0.dp
+        // clear of the camera and of the status bar cluster, which grows for calls and Live
+        // Activities; region frames already include the system's margin
+        val occlusion = stripOcclusion(reservedRegions, stripLeft, stripLeft + sideInset, height)
+        // UIKit reports no usable status bar frame here (a 2pt top strip), so the spot is inferred like RN
+        val top = when {
+            statusBarClearance != null -> statusBarRowGeometry().first + Spacing.M
+            topInset >= STATUS_BAR_MIN_INSET -> topInset + HEADER_HEIGHT.dp + Spacing.M
+            width <= height -> DuoMetrics.firstItemTop
+            height >= DuoMetrics.innerMinHeight -> DuoMetrics.firstItemTopLandscape
+            // outer display in landscape: no status bar in the strip
+            else -> DuoMetrics.edgeInset
+        }
+        // outer display in landscape: the title row centers on the camera when it sits at the
+        // top end, otherwise on the back button
+        titleCenterY = if (occlusion.top > top) occlusion.topCenter else top + DuoMetrics.controlSize / 2
+        sideBar = SideBarLayout(
+            edge = edge,
+            width = sideInset,
+            top = maxOf(top, occlusion.top),
+            bottom = maxOf(DuoMetrics.edgeInset, occlusion.bottom),
+        )
+    }
+    val (headerHeight, headerStatusBarHeight) = if (statusBarClearance != null) {
+        statusBarRowGeometry()
+    } else {
+        headerGeometry(topInset, isPhone, width, height, sideBar != null, titleCenterY)
+    }
+
+    return ScreenLayout(
+        width = width,
+        height = height,
+        isIPhoneDuo = isIPhoneDuo,
+        insetTop = topInset,
+        insetBottom = bottomInset,
+        insetLeft = insetLeft,
+        insetRight = insetRight,
+        contentWidth = width - insetLeft - insetRight,
+        headerHeight = headerHeight,
+        headerStatusBarHeight = headerStatusBarHeight,
+        sideBar = sideBar,
+        isIPhoneDuoDevice = isDuoDevice,
+        duoTopInset = maxOf(topInset, if (height > width) sideInset * 2 else 0.dp),
+        statusBarClearance = statusBarClearance,
+    )
+}

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

@@ -0,0 +1,41 @@
+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
+import vn.momo.kits.const.Spacing
+
+@Composable
+@OptIn(ExperimentalLayoutApi::class)
+fun Section(
+    useMargin: Boolean = true,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = gridColumns()
+    val gap = Spacing.M
+    val margin = if (useMargin) Spacing.M else 0.dp
+    Box(modifier = Modifier.fillMaxWidth().padding(horizontal = margin).then(modifier)) {
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            CompositionLocalProvider(LocalGridContext provides gridContext(constraints.maxWidth, columns, gap)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gap),
+                    verticalArrangement = Arrangement.spacedBy(gap),
+                ) { 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))
+            }
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.platform.setColor
+import vn.momo.kits.platform.setMaskFilter
+fun Modifier.shadow(
+    color: Color = Color.Black,
+    borderRadius: Dp = 0.dp,
+    blurRadius: Float = 0f,
+    offsetY: Dp = 0.dp,
+    offsetX: Dp = 0.dp,
+    spread: Dp = 0f.dp,
+    modifier: Modifier = Modifier
+) = this.then(
+    modifier.drawBehind {
+        this.drawIntoCanvas {
+            val paint = Paint()
+            val frameworkPaint = paint.asFrameworkPaint()
+            val spreadPixel = spread.toPx()
+            val leftPixel = (0f - spreadPixel) + offsetX.toPx()
+            val topPixel = (0f - spreadPixel) + offsetY.toPx()
+            val rightPixel = (this.size.width + spreadPixel)
+            val bottomPixel = (0f + spreadPixel) - offsetY.toPx()
+
+            if (blurRadius != 0f) {
+                frameworkPaint.setMaskFilter(blurRadius)
+            }
+
+            frameworkPaint.setColor(color)
+
+            it.drawRoundRect(
+                left = leftPixel,
+                top = topPixel,
+                right = rightPixel,
+                bottom = bottomPixel,
+                radiusX = borderRadius.toPx(),
+                radiusY = borderRadius.toPx(),
+                paint
+            )
+        }
+    }
+)

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

@@ -0,0 +1,51 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.Measurable
+import androidx.compose.ui.layout.MeasureResult
+import androidx.compose.ui.layout.MeasureScope
+import androidx.compose.ui.node.LayoutModifierNode
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.unit.IntOffset
+
+@Composable
+fun Modifier.dynamicSize(
+    widthState: State<Int>? = null,
+    heightState: State<Int>? = null,
+) = this then DynamicSizeElement(widthState, heightState)
+
+private data class DynamicSizeElement(
+    val widthState: State<Int>?,
+    val heightState: State<Int>?,
+) : ModifierNodeElement<DynamicSizeNode>() {
+    override fun create(): DynamicSizeNode {
+        return DynamicSizeNode(widthState, heightState)
+    }
+
+    override fun update(node: DynamicSizeNode) {
+        node.widthState = widthState
+        node.heightState = heightState
+    }
+
+}
+
+private class DynamicSizeNode(
+    var widthState: State<Int>?,
+    var heightState: State<Int>?,
+) : Modifier.Node(), LayoutModifierNode {
+    override fun MeasureScope.measure(
+        measurable: Measurable,
+        constraints: Constraints
+    ): MeasureResult {
+        val p = measurable.measure(constraints)
+        return layout(
+            width = widthState?.value ?: p.width,
+            height = heightState?.value ?: p.height,
+        ) {
+            p.place(IntOffset.Zero)
+        }
+    }
+}