@momo-kits/native-kits 0.156.6-beta.22-debug → 0.156.6-beta.23-debug

package/compose/build.gradle.kts

@@ -40,7 +40,7 @@ kotlin {
     }
 
     cocoapods {
-        version = "0.156.6-beta.22-debug"
+        version = "0.156.6-beta.23-debug"
         summary = "IOS Shared module"
         homepage = "https://momo.vn"
         ios.deploymentTarget = "15.0"

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

@@ -23,7 +23,7 @@ import vn.momo.kits.modifier.conditional
 
 
 @Composable
-fun Badge(label: String = "Label", backgroundColor: Color? = null) {
+fun Badge(label: String = "Label", backgroundColor: Color? = null, modifier: Modifier? = null) {
     val primaryColors = listOf(
         Color(0xFFF0F0F0),
         Color(0xFFEB2F96),
@@ -63,21 +63,23 @@ fun Badge(label: String = "Label", backgroundColor: Color? = null) {
     }
     val scaleSize = scaleSize(16f)
 
-    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
-        )
+    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
+            )
+        }
     }
 }

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

@@ -0,0 +1,198 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.unit.dp
+import io.ktor.util.Platform
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.Colors
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.platform.getPlatformName
+import vn.momo.kits.platform.getStatusBarHeight
+
+/**
+ * A debug overlay that draws danger/warning baseline guides on top of the screen.
+ *
+ * Highlights safe-area boundaries, header regions, and bottom navigation zones
+ * using colored solid or dotted lines and semi-transparent red zones.
+ *
+ * @param enabled When `false` the composable renders nothing. Pass `false` when
+ *                your QC automation flag is active to suppress the overlay.
+ */
+@Composable
+fun BaselineView(enabled: Boolean = true) {
+    if (!enabled) return
+
+    val bottomInsetHeight = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
+    val topInset = if (getPlatformName() == "Android") getStatusBarHeight() - 14.dp else getStatusBarHeight()
+    val bottomInset = if (getPlatformName() == "iOS") minOf(bottomInsetHeight, 21.dp) else bottomInsetHeight
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        // Danger zones
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(topInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+        )
+        Box(
+            modifier = Modifier
+                .width(12.dp)
+                .fillMaxHeight()
+                .padding(top = topInset, bottom = bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+        )
+        Box(
+            modifier = Modifier
+                .width(12.dp)
+                .fillMaxHeight()
+                .padding(top = topInset, bottom = bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+                .align(Alignment.TopEnd)
+        )
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(bottomInset)
+                .background(Color.Red.copy(alpha = 0.15f))
+                .align(Alignment.BottomCenter)
+        )
+
+        // Danger lines
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset)
+                .fillMaxWidth(),
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 52.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 104.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 64.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 12.dp)
+                .fillMaxHeight(),
+            orientation = BaselineOrientation.Vertical,
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(end = 12.dp)
+                .fillMaxHeight()
+                .align(Alignment.BottomEnd),
+            orientation = BaselineOrientation.Vertical,
+            isDotted = false,
+            color = Color(0xFFE400FF)
+        )
+
+        // Warning lines
+        BaselineDottedLine(
+            Modifier
+                .padding(top = topInset + 26.dp)
+                .fillMaxWidth(),
+            color = Color(0xFFFF7A00)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 56.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFFFCC00)
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(bottom = bottomInset + 8.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            color = Color(0xFFFFCC00)
+        )
+
+        // Header background warning lines
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 40.dp, top = topInset)
+                .height(52.dp),
+            color = Color(0xFF00C520),
+            orientation = BaselineOrientation.Vertical
+        )
+        BaselineDottedLine(
+            Modifier
+                .padding(start = 48.dp, top = topInset)
+                .height(52.dp),
+            color = Color(0xFF00C520),
+            orientation = BaselineOrientation.Vertical
+        )
+    }
+}
+
+enum class BaselineOrientation { Horizontal, Vertical }
+
+@Composable
+fun BaselineDottedLine(
+    modifier: Modifier = Modifier,
+    color: Color = Color.Red,
+    orientation: BaselineOrientation = BaselineOrientation.Horizontal,
+    isDotted: Boolean = true
+) {
+    Canvas(modifier = modifier) {
+        val pathEffect = if (isDotted) PathEffect.dashPathEffect(floatArrayOf(8f, 8f)) else null
+        drawLine(
+            color = color,
+            start = if (orientation == BaselineOrientation.Horizontal) Offset(
+                0f,
+                size.height / 2
+            ) else Offset(size.width / 2, 0f),
+            end = if (orientation == BaselineOrientation.Horizontal) Offset(
+                size.width,
+                size.height / 2
+            ) else Offset(size.width / 2, size.height),
+            strokeWidth = 1.dp.toPx(),
+            pathEffect = pathEffect,
+            cap = StrokeCap.Round,
+        )
+    }
+}

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

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

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

@@ -0,0 +1,576 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.Canvas
+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.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.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.Stable
+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.graphics.Paint
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.IntRect
+import androidx.compose.ui.unit.IntSize
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupPositionProvider
+import androidx.compose.ui.window.PopupProperties
+import vn.momo.kits.application.IsShowBaseLineDebug
+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.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+
+// region Types
+
+/**
+ * Tooltip placement relative to the anchor element.
+ */
+enum class TooltipPlacement {
+    TOP,
+    BOTTOM,
+    LEFT,
+    RIGHT,
+}
+
+/**
+ * Cross-axis alignment of the tooltip relative to the anchor.
+ */
+enum class TooltipAlign {
+    START,
+    CENTER,
+    END,
+}
+
+/**
+ * Describes a single action button displayed in the tooltip.
+ *
+ * @param title Text label for the button (used for text buttons).
+ * @param icon  Icon source for the button (used for icon buttons).
+ * @param onPress Callback invoked when the button is pressed.
+ */
+data class TooltipButton(
+    val title: String? = null,
+    val icon: String? = null,
+    val onPress: (() -> Unit)? = null,
+)
+
+
+/**
+ * State holder for controlling tooltip visibility imperatively.
+ * Equivalent to the React Native `useImperativeHandle` ref pattern.
+ */
+@Stable
+class TooltipState {
+    var isVisible by mutableStateOf(false)
+        private set
+
+    /** Shows the tooltip. */
+    fun show() {
+        isVisible = true
+    }
+
+    /** Hides the tooltip. */
+    fun hide() {
+        isVisible = false
+    }
+
+    /** Toggles the tooltip visibility. */
+    fun toggle() {
+        isVisible = !isVisible
+    }
+}
+
+/**
+ * Creates and remembers a [TooltipState].
+ */
+@Composable
+fun rememberTooltipState(): TooltipState {
+    return remember { TooltipState() }
+}
+private val TOOLTIP_OFFSET = Spacing.S
+private val ARROW_SIZE = 6.dp
+/**
+ * Custom [PopupPositionProvider] that positions the tooltip relative to the anchor.
+ *
+ * Mirrors the React Native `placementStyle` calculation:
+ * - TOP:    tooltip bottom edge sits at `anchorTop - TOOLTIP_OFFSET`
+ * - BOTTOM: tooltip top edge sits at `anchorBottom + TOOLTIP_OFFSET`
+ * - LEFT:   tooltip right edge sits at `anchorLeft - TOOLTIP_OFFSET`
+ * - RIGHT:  tooltip left edge sits at `anchorRight + TOOLTIP_OFFSET`
+ *
+ * Cross-axis alignment:
+ * - start:  tooltip aligns to anchor start edge
+ * - center: tooltip centers on anchor
+ * - end:    tooltip aligns to anchor end edge
+ */
+private class TooltipPositionProvider(
+    private val placement: TooltipPlacement,
+    private val align: TooltipAlign,
+    private val offsetPx: Int,
+) : PopupPositionProvider {
+
+    override fun calculatePosition(
+        anchorBounds: IntRect,
+        windowSize: IntSize,
+        layoutDirection: LayoutDirection,
+        popupContentSize: IntSize,
+    ): IntOffset {
+        val anchorX = anchorBounds.left
+        val anchorY = anchorBounds.top
+        val anchorW = anchorBounds.width
+        val anchorH = anchorBounds.height
+        val popW = popupContentSize.width
+        val popH = popupContentSize.height
+
+        var x: Int
+        var y: Int
+
+        when (placement) {
+            TooltipPlacement.TOP -> {
+                y = anchorY - popH - offsetPx
+                x = alignHorizontal(anchorX, anchorW, popW)
+            }
+
+            TooltipPlacement.BOTTOM -> {
+                y = anchorY + anchorH + offsetPx
+                x = alignHorizontal(anchorX, anchorW, popW)
+            }
+
+            TooltipPlacement.LEFT -> {
+                x = anchorX - popW - offsetPx
+                y = alignVertical(anchorY, anchorH, popH)
+            }
+
+            TooltipPlacement.RIGHT -> {
+                x = anchorX + anchorW + offsetPx
+                y = alignVertical(anchorY, anchorH, popH)
+            }
+        }
+
+        return IntOffset(x, y)
+    }
+    private fun alignHorizontal(anchorX: Int, anchorW: Int, popW: Int): Int {
+        return when (align) {
+            TooltipAlign.START -> anchorX
+            TooltipAlign.END -> anchorX + anchorW - popW
+            TooltipAlign.CENTER -> anchorX + (anchorW - popW) / 2
+        }
+    }
+    private fun alignVertical(anchorY: Int, anchorH: Int, popH: Int): Int {
+        return when (align) {
+            TooltipAlign.START -> anchorY
+            TooltipAlign.END -> anchorY + anchorH - popH
+            TooltipAlign.CENTER -> anchorY + (anchorH - popH) / 2
+        }
+    }
+}
+
+// endregion
+
+// region Tooltip Composable
+
+/**
+ * A tooltip component that wraps [content] (the anchor) and shows a positioned
+ * tooltip popup with title, description, close button, and action buttons.
+ *
+ * Port of the React Native `Tooltip` component.
+ *
+ * @param state            Controls visibility (use [rememberTooltipState]).
+ * @param title            Title text displayed in the tooltip header.
+ * @param description      Description text shown under the title.
+ * @param buttons          Action buttons rendered at the bottom.
+ * @param placement        Tooltip position relative to the anchor (default TOP).
+ * @param align            Cross-axis alignment (default CENTER).
+ * @param onVisibleChange  Callback when visibility changes.
+ * @param onPressClose     Callback when the close button (X) is pressed.
+ * @param modifier         Modifier for the anchor wrapper.
+ * @param content          The anchor element that the tooltip is attached to.
+ */
+@Composable
+fun Tooltip(
+    state: TooltipState,
+    title: String? = null,
+    description: String? = null,
+    buttons: List<TooltipButton> = emptyList(),
+    placement: TooltipPlacement = TooltipPlacement.TOP,
+    align: TooltipAlign = TooltipAlign.CENTER,
+    onVisibleChange: ((Boolean) -> Unit)? = null,
+    onPressClose: (() -> Unit)? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val density = LocalDensity.current
+    val offsetPx = with(density) { (TOOLTIP_OFFSET + ARROW_SIZE).roundToPx() }
+
+    LaunchedEffect(state.isVisible) {
+        onVisibleChange?.invoke(state.isVisible)
+    }
+
+    Box(modifier = modifier) {
+        content()
+
+        if (state.isVisible) {
+            val positionProvider = remember(placement, align, offsetPx) {
+                TooltipPositionProvider(
+                    placement = placement,
+                    align = align,
+                    offsetPx = offsetPx,
+                )
+            }
+
+            Popup(
+                popupPositionProvider = positionProvider,
+                onDismissRequest = { state.hide() },
+                properties = PopupProperties(clippingEnabled = false),
+            ) {
+                TooltipPopupContent(
+                    title = title,
+                    description = description,
+                    buttons = buttons,
+                    placement = placement,
+                    align = align,
+                    onPressClose = onPressClose ?: { state.hide() },
+                )
+            }
+        }
+    }
+}
+@Composable
+private fun TooltipPopupContent(
+    title: String?,
+    description: String?,
+    buttons: List<TooltipButton>,
+    placement: TooltipPlacement,
+    align: TooltipAlign,
+    onPressClose: () -> Unit,
+) {
+    val tooltipMaxWidth = 300.dp
+    val tooltipShape = remember { RoundedCornerShape(Radius.S) }
+
+    Box(modifier = Modifier.wrapContentSize()) {
+        Column(
+            modifier = Modifier
+                .widthIn(max = tooltipMaxWidth)
+                .background(Colors.black_17, tooltipShape)
+                .clip(tooltipShape)
+                .conditional(IsShowBaseLineDebug) {
+                    border(1.dp, Colors.blue_03)
+                }
+                .padding(Spacing.M)
+        ) {
+            Row {
+                Column(modifier = Modifier.weight(1f, fill = false)) {
+                    if (!title.isNullOrEmpty()) {
+                        Text(
+                            text = title,
+                            style = Typography.headerSSemibold,
+                            color = Colors.black_01,
+                            maxLines = 1,
+                            modifier = Modifier.padding(bottom = Spacing.XS),
+                            overflow = TextOverflow.Ellipsis,
+                        )
+                    }
+                    if (!description.isNullOrEmpty()) {
+                        Text(
+                            text = description,
+                            style = Typography.descriptionDefaultRegular,
+                            color = Colors.black_01,
+                            maxLines = 2,
+                            modifier = Modifier.padding(bottom = Spacing.M),
+                            overflow = TextOverflow.Ellipsis,
+                        )
+                    }
+                }
+                Spacer(Modifier.width(Spacing.M))
+                Box(
+                    modifier = Modifier
+                        .size(20.dp)
+                        .activeOpacityClickable {
+                            onPressClose.invoke()
+                        }
+                ) {
+                    Icon(
+                        source = "navigation_close",
+                        size = 20.dp,
+                        color = Colors.black_01,
+                    )
+                }
+            }
+            if (buttons.isNotEmpty()) {
+                TooltipButtons(
+                    buttons = buttons,
+                    modifier = Modifier.align(Alignment.End),
+                )
+            }
+        }
+
+        TooltipArrow(
+            placement = placement,
+            align = align,
+            modifier = Modifier.matchParentSize(),
+        )
+    }
+}
+@Composable
+private fun TooltipArrow(
+    placement: TooltipPlacement,
+    align: TooltipAlign,
+    modifier: Modifier = Modifier,
+) {
+    val arrowWidth = ARROW_SIZE * 2
+    val arrowHeight = ARROW_SIZE
+    val arrowEdgeMargin = Spacing.M
+
+    val boxAlignment = when (placement) {
+        TooltipPlacement.TOP -> when (align) {
+            TooltipAlign.START -> Alignment.BottomStart
+            TooltipAlign.CENTER -> Alignment.BottomCenter
+            TooltipAlign.END -> Alignment.BottomEnd
+        }
+
+        TooltipPlacement.BOTTOM -> when (align) {
+            TooltipAlign.START -> Alignment.TopStart
+            TooltipAlign.CENTER -> Alignment.TopCenter
+            TooltipAlign.END -> Alignment.TopEnd
+        }
+
+        TooltipPlacement.LEFT -> when (align) {
+            TooltipAlign.START -> Alignment.TopEnd
+            TooltipAlign.CENTER -> Alignment.CenterEnd
+            TooltipAlign.END -> Alignment.BottomEnd
+        }
+
+        TooltipPlacement.RIGHT -> when (align) {
+            TooltipAlign.START -> Alignment.TopStart
+            TooltipAlign.CENTER -> Alignment.CenterStart
+            TooltipAlign.END -> Alignment.BottomStart
+        }
+    }
+
+    val canvasWidth = when (placement) {
+        TooltipPlacement.TOP, TooltipPlacement.BOTTOM -> arrowWidth
+        TooltipPlacement.LEFT, TooltipPlacement.RIGHT -> arrowHeight
+    }
+    val canvasHeight = when (placement) {
+        TooltipPlacement.TOP, TooltipPlacement.BOTTOM -> arrowHeight
+        TooltipPlacement.LEFT, TooltipPlacement.RIGHT -> arrowWidth
+    }
+
+    val arrowOverlap = 1.dp
+    val offsetX = when (placement) {
+        TooltipPlacement.LEFT -> arrowHeight - arrowOverlap
+        TooltipPlacement.RIGHT -> -arrowHeight + arrowOverlap
+        else -> when (align) {
+            TooltipAlign.START -> arrowEdgeMargin
+            TooltipAlign.END -> -arrowEdgeMargin
+            TooltipAlign.CENTER -> 0.dp
+        }
+    }
+    val offsetY = when (placement) {
+        TooltipPlacement.TOP -> arrowHeight - arrowOverlap
+        TooltipPlacement.BOTTOM -> -arrowHeight + arrowOverlap
+        else -> when (align) {
+            TooltipAlign.START -> arrowEdgeMargin
+            TooltipAlign.END -> -arrowEdgeMargin
+            TooltipAlign.CENTER -> 0.dp
+        }
+    }
+
+    val arrowColor = Colors.black_17
+
+    Box(modifier = modifier) {
+        Canvas(
+            modifier = Modifier
+                .align(boxAlignment)
+                .offset(x = offsetX, y = offsetY)
+                .size(width = canvasWidth, height = canvasHeight)
+        ) {
+            val w = size.width
+            val h = size.height
+            val path = Path().apply {
+                when (placement) {
+                    TooltipPlacement.TOP -> {
+                        moveTo(0f, 0f)
+                        lineTo(w, 0f)
+                        lineTo(w / 2f, h)
+                        close()
+                    }
+                    TooltipPlacement.BOTTOM -> {
+                        moveTo(0f, h)
+                        lineTo(w, h)
+                        lineTo(w / 2f, 0f)
+                        close()
+                    }
+                    TooltipPlacement.LEFT -> {
+                        moveTo(0f, 0f)
+                        lineTo(0f, h)
+                        lineTo(w, h / 2f)
+                        close()
+                    }
+                    TooltipPlacement.RIGHT -> {
+                        moveTo(w, 0f)
+                        lineTo(w, h)
+                        lineTo(0f, h / 2f)
+                        close()
+                    }
+                }
+            }
+            drawIntoCanvas { canvas ->
+                val paint = Paint().apply {
+                    color = arrowColor
+                    pathEffect = PathEffect.cornerPathEffect(2.dp.toPx())
+                }
+                canvas.drawPath(path, paint)
+            }
+        }
+    }
+}
+@Composable
+private fun TooltipButtons(buttons: List<TooltipButton>, modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.End,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+
+        if (buttons.size == 1) {
+            val btn = buttons[0]
+            TooltipSingleButton(btn)
+        } else if (buttons.size == 2) {
+            val primary = buttons[0]
+            val secondary = buttons[1]
+            val bothIcons = primary.icon != null && secondary.icon != null
+
+            if (bothIcons) {
+                TooltipIconButton(
+                    icon = secondary.icon,
+                    onPress = secondary.onPress ?: {},
+                )
+                Spacer(modifier = Modifier.width(Spacing.S))
+                TooltipIconButton(
+                    icon = primary.icon,
+                    onPress = primary.onPress ?: {},
+                )
+            } else {
+                TooltipSecondaryButton(
+                    title = secondary.title ?: "",
+                    onPress = secondary.onPress ?: {},
+                )
+                Spacer(modifier = Modifier.width(Spacing.S))
+                TooltipPrimaryButton(
+                    title = primary.title ?: "",
+                    onPress = primary.onPress ?: {},
+                )
+            }
+        } else {
+            buttons.forEachIndexed { index, btn ->
+                if (index > 0) {
+                    Spacer(modifier = Modifier.width(Spacing.XXS))
+                }
+                TooltipSingleButton(btn)
+            }
+        }
+    }
+}
+
+@Composable
+private fun TooltipSingleButton(btn: TooltipButton) {
+    if (btn.icon != null) {
+        TooltipIconButton(
+            icon = btn.icon,
+            onPress = btn.onPress ?: {},
+        )
+    } else {
+        TooltipPrimaryButton(
+            title = btn.title ?: "",
+            onPress = btn.onPress ?: {},
+        )
+    }
+}
+@Composable
+private fun TooltipPrimaryButton(
+    title: String,
+    onPress: () -> Unit,
+) {
+    Button(
+        onClick = onPress,
+        title = title,
+        type = ButtonType.SECONDARY,
+        size = Size.MEDIUM,
+        isFull = false,
+    )
+}
+@Composable
+private fun TooltipSecondaryButton(
+    title: String,
+    onPress: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null,
+                onClick = onPress,
+            )
+            .padding(horizontal = Spacing.M, vertical = Spacing.S),
+    ) {
+        Text(
+            text = title,
+            color = Colors.black_01,
+            style = Typography.actionSBold,
+        )
+    }
+}
+@Composable
+private fun TooltipIconButton(
+    icon: String,
+    onPress: () -> Unit,
+) {
+    val iconButtonSize = scaleSize(36f).dp
+
+    Box(
+        modifier = Modifier
+            .size(iconButtonSize)
+            .background(Colors.black_01, RoundedCornerShape(Radius.XL))
+            .clip(RoundedCornerShape(Radius.XL))
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null,
+                onClick = onPress,
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(source = icon)
+    }
+}

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

@@ -40,13 +40,15 @@ import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
 import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
 val floatingButtonWidth = 75.dp
-const val BOTTOM_TAB_BAR_HEIGHT = 56
+const val BOTTOM_TAB_BAR_HEIGHT = 64
 
 @Composable
 fun BottomTabBar(
@@ -142,6 +144,18 @@ fun RowScope.renderTabBarItem(
 
 @Composable
 fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
+    fun isNumber(label: String): Boolean {
+        val numberRegex = "^\\d+$".toRegex()
+        return numberRegex.matches(label)
+    }
+    fun formatLabel(label: String): String? {
+        if (isNumber(label) && label.toInt() == 0) {
+            return null
+        }
+        return label
+    }
+    val badgeLabel = item.badgeLabel?.let { formatLabel(it) }
+
     Box(modifier = Modifier
         .fillMaxSize()
         .padding(horizontal = Spacing.XXS)
@@ -156,31 +170,34 @@ fun TabBarItem(item: BottomTabItem, selected: Boolean, onClick: () -> Unit) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = Spacing.XXS)
+                .padding(horizontal = Spacing.S, vertical = Spacing.S)
                 .noFeedbackClickable {
                     onClick()
                 },
             horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Bottom
+            verticalArrangement = Arrangement.Center
         ) {
             Icon(
                 source = item.icon,
-                modifier = Modifier.weight(1f),
+                size = 28.dp,
+                modifier = Modifier.padding(Spacing.XS),
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint)
             Text(
                 text = item.label,
                 color = if (selected) AppTheme.current.colors.primary else AppTheme.current.colors.text.hint,
-                style = Typography.labelXsMedium,
+                style = if (selected) Typography.labelXsMedium else Typography.descriptionXsRegular,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )
         }
-        if(item.badgeLabel != null){
-            Box(modifier = Modifier
-                .offset(x = 44.dp, y = (-32).dp)
-            ){
-                Badge(item.badgeLabel)
-            }
+        if (badgeLabel != null) {
+            if (badgeLabel.isEmpty())
+                BadgeDot(
+                    size = DotSize.Small,
+                    modifier = Modifier.offset(x = 50.dp, y = (-48).dp)
+                )
+            else
+                Badge(badgeLabel, modifier = Modifier.offset(x = 44.dp, y = (-42).dp))
         }
     }
 }
@@ -190,7 +207,7 @@ fun FloatingButton(data: BottomTabFloatingButton) {
     Column(
         modifier = Modifier
             .width(floatingButtonWidth)
-            .padding(horizontal = Spacing.XXS)
+            .padding(horizontal = Spacing.XXS, vertical = Spacing.S)
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }

package/gradle.properties

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

package/ios/Application/FloatingButton.swift

@@ -154,7 +154,7 @@ public struct FloatingButton: View {
                     Spacer().frame(width: 8)
                     Text(label)
                         .foregroundColor(.white)
-                        .font(.system(size: 16, weight: .bold))
+                        .font(.system(size: scaleSize(16), weight: .bold))
                         .lineLimit(1)
                         .background(
                             GeometryReader { geo in

package/ios/Badge/BadgeRibbon.swift

@@ -137,7 +137,7 @@ public struct BadgeRibbon: View {
     private var roundContent: some View {
         HStack(spacing: 0) {
             Text(label)
-                .font(.system(size: 12, weight: .medium))
+                .font(.system(size: scaleSize(12), weight: .medium))
                 .foregroundColor(Colors.black01)
                 .lineLimit(1)
                 .rotationEffect(rotation)
@@ -158,7 +158,7 @@ public struct BadgeRibbon: View {
     private var skewContent: some View {
         HStack(spacing: 0) {
             Text(label)
-                .font(.system(size: 12, weight: .medium))
+                .font(.system(size: scaleSize(12), weight: .medium))
                 .foregroundColor(Colors.black01)
                 .lineLimit(1)
                 .rotationEffect(rotation)

package/ios/Image/Image.swift

@@ -31,7 +31,11 @@ public struct ImageView: View {
             .placeholder {
                 VStack(alignment: .center, content: {
                     if error {
-                        Image(systemName: "photo.badge.exclamationmark").frame(width: 24, height: 24)
+                        Image("media_fail")
+                            .resizable()
+                            .renderingMode(.template)
+                            .foregroundColor(Colors.black08)
+                            .frame(width: 24, height: 24)
                     } else if placeholder != nil {
                         placeholder
                     }

package/ios/Popup/PopupDisplay.swift

@@ -113,11 +113,7 @@ public struct PopupDisplay: View {
                 }
                 
                 VStack(spacing: 0) {
-                    if(url.isEmpty) {
-                        Icon(source: "media_fail")
-                            .frame(width: .infinity, height: 184)
-                    }
-                    else {
+                    if(!url.isEmpty) {
                         WebImage(url: URL(string: url), isAnimating: .constant(true))
                             .resizable()
                             .placeholder {
@@ -132,9 +128,7 @@ public struct PopupDisplay: View {
                             .clipped()
                     }
                     VStack(alignment: .leading, spacing: 0) {
-                        Text(title)
-                            .foregroundColor(.black)
-                            .font(.header_default_semibold)
+                        MomoText(title, typography: .headerDefaultBold)
                             .padding(.top, 24)
                             .padding(.bottom, 8)
                             .lineLimit(2)
@@ -143,9 +137,7 @@ public struct PopupDisplay: View {
                         Group {
                             if isScrollable {
                                 ScrollView(showsIndicators: false) {
-                                    Text(description)
-                                        .font(.body_default_regular)
-                                        .foregroundColor(Colors.black17)
+                                    MomoText(description, typography: .bodyDefaultRegular)
                                         .multilineTextAlignment(.leading)
                                         .background(GeometryReader { geo in
                                             Color.clear.onAppear { textHeight = geo.size.height }
@@ -153,13 +145,12 @@ public struct PopupDisplay: View {
                                         .measureLineHeights(font: .body_default_regular,
                                                             oneLine: $oneLineH,
                                                             twoLines: $twoLineH)
+                                        .accessibility(identifier: "description_popup_permission")
                                 }
                                 // Cap the visible height to ~8.5 lines
                                 .frame(height: min(maxHeight8_5, textHeight))
                             } else {
-                                Text(description)
-                                    .font(.body_default_regular)
-                                    .foregroundColor(Colors.black17)
+                                MomoText(description, typography: .bodyDefaultRegular)
                                     .multilineTextAlignment(.leading)
                                     .background(GeometryReader { geo in
                                         Color.clear.onAppear {
@@ -171,14 +162,13 @@ public struct PopupDisplay: View {
                                     .measureLineHeights(font: .body_default_regular,
                                                         oneLine: $oneLineH,
                                                         twoLines: $twoLineH)
+                                    .accessibility(identifier: "description_popup_permission")
                             }
                         }
                         .padding(.bottom, 8)
                         
                         if(!errorCode.isEmpty) {
-                            Text((errorCodeLabels[language] ?? "Mã lỗi: ") + errorCode)
-                                .foregroundColor(Colors.black12)
-                                .font(.description_xs_regular)
+                            MomoText((errorCodeLabels[language] ?? "Mã lỗi: ") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
                                 .lineLimit(1)
                                 .padding(.bottom, 8)
                         }

package/local.properties

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

package/package.json

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

package/publish.sh

@@ -185,7 +185,32 @@ phase_publish_maven() {
     
     ./gradlew :compose:publishAllPublicationsToGitLabPackagesRepository
     
-    echo "✅ Maven publishing completed successfully!"
+    echo "✅ compose Maven publishing completed successfully!"
+    
+    echo "📦 Publishing sample/shared KMP artifacts to Maven (version ${VERSION})..."
+    
+    # Temporarily remove composeResources and compose { resources { ... } } block
+    echo "📦 Backing up sample/shared composeResources and build.gradle.kts..."
+    if [ -d "sample/shared/src/commonMain/composeResources" ]; then
+        mv sample/shared/src/commonMain/composeResources sample/shared/src/commonMain/composeResources.backup
+    fi
+    cp sample/shared/build.gradle.kts sample/shared/build.gradle.kts.backup
+    if [[ "$OSTYPE" == "darwin"* ]]; then
+        sed -i '' '/^compose {$/,/^}$/d' sample/shared/build.gradle.kts
+    else
+        sed -i '/^compose {$/,/^}$/d' sample/shared/build.gradle.kts
+    fi
+    
+    ./gradlew :sample:shared:publishAllPublicationsToGitLabPackagesRepository
+    
+    # Restore composeResources and build.gradle.kts
+    echo "📦 Restoring sample/shared composeResources and build.gradle.kts..."
+    mv sample/shared/build.gradle.kts.backup sample/shared/build.gradle.kts
+    if [ -d "sample/shared/src/commonMain/composeResources.backup" ]; then
+        mv sample/shared/src/commonMain/composeResources.backup sample/shared/src/commonMain/composeResources
+    fi
+    
+    echo "✅ sample/shared Maven publishing completed successfully!"
     echo "✅ PHASE 2 COMPLETED"
     echo ""
 }