@momo-kits/native-kits 0.300.5 → 0.300.6-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderTitle.kt

@@ -0,0 +1,39 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
+import vn.momo.kits.application.DesignSystemKits
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.setAutomationId
+
+internal val headerFontFamily: String?
+    get() = if (DesignSystemKits.getConfigs().isWhiteList) "MoMoTrustDisplay" else null
+
+@Composable
+internal fun HeaderTitle(
+    title: String = "",
+    color: Color? = null,
+    modifier: Modifier = Modifier.fillMaxWidth(),
+    textAlign: TextAlign = TextAlign.Start,
+) {
+    Text(
+        modifier = modifier.zIndex(1f).setAutomationId("title_navigation_header"),
+        text = title,
+        textAlign = textAlign,
+        style = Typography.actionSBold.copy(
+            fontSize = 15.sp,
+            lineHeight = 22.sp,
+        ),
+        fontFamily = headerFontFamily,
+        color = color,
+        maxLines = 1,
+        overflow = TextOverflow.Ellipsis
+    )
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderUser.kt

@@ -0,0 +1,363 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicText
+import androidx.compose.foundation.text.TextAutoSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import vn.momo.kits.components.Image
+import vn.momo.kits.components.Options
+import vn.momo.kits.components.Skeleton
+import vn.momo.kits.components.Text
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.const.Typography
+import vn.momo.kits.const.getFontFamily
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.navigation.component.HeaderTitle.User
+
+@Composable
+internal fun HeaderUser(
+    data: HeaderTitle
+) {
+    if (data !is User) return
+
+    if (data.isLoading) {
+        return TitleUserShimmer()
+    }
+
+    val maxWidth = headerTitleMaxWidth()
+
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = Spacing.XS)
+            .activeOpacityClickable(enabled = data.onPress != null, onClick = { data.onPress?.invoke() }),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Row(
+            modifier = Modifier.widthIn(max = maxWidth),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Box(modifier = Modifier.size(Spacing.XXL)) {
+                AvatarGroup(urls = AvatarUrls(data.image ?: listOf()), title = data.title)
+                if (data.dotColor != null) {
+                    Box(
+                        modifier = Modifier
+                            .align(Alignment.BottomEnd)
+                            .size(10.dp)
+                            .clip(CircleShape)
+                            .background(data.dotColor)
+                    )
+                }
+            }
+
+            Spacer(Modifier.width(6.dp))
+
+            Column(modifier = Modifier.weight(1f, fill = false)) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Text(
+                        text = data.title,
+                        color = data.tintColor,
+                        style = Typography.actionXsBold,
+                        fontFamily = headerFontFamily,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                    if (data.icons.isNotEmpty()) {
+                        Spacer(Modifier.width(6.dp))
+                        Row(verticalAlignment = Alignment.CenterVertically) {
+                            data.icons.forEach { icon ->
+                                RemoteIcon16(url = icon)
+                            }
+                        }
+                    }
+                }
+
+                if (!data.subTitle.isNullOrEmpty()) {
+                    Spacer(Modifier.height(2.dp))
+                    Text(
+                        text = data.subTitle,
+                        color = data.tintColor,
+                        style = Typography.descriptionXsRegular,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun TitleUserShimmer() {
+    val theme = AppTheme.current
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = Spacing.XS),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(Spacing.XXL)
+                .clip(CircleShape)
+                .background(theme.colors.border.default)
+        ) {
+            Skeleton()
+        }
+        Spacer(Modifier.width(Spacing.M / 2))
+        Column(modifier = Modifier.fillMaxWidth()) {
+            Box(
+                modifier = Modifier
+                    .height(18.dp)
+                    .width(120.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            ) { Skeleton() }
+            Spacer(Modifier.height(Spacing.XXS))
+            Box(
+                modifier = Modifier
+                    .height(12.dp)
+                    .width(120.dp)
+                    .clip(RoundedCornerShape(8.dp))
+            ) { Skeleton() }
+        }
+    }
+}
+
+@Composable
+private fun AvatarGroup(
+    urls: AvatarUrls?,
+    title: String? = null,
+    size: Dp = Spacing.XXL
+) {
+    val theme = AppTheme.current
+    val modifierBorder = remember {
+        Modifier.clip(CircleShape).border(width = (0.5).dp, color = theme.colors.border.default, shape = CircleShape)
+    }
+    val options = Options(
+        contentScale = ContentScale.Crop,
+        alignment = Alignment.Center
+    )
+
+    when (urls?.items?.size) {
+        0 -> InitialsAvatar(
+            modifier = modifierBorder,
+            name = title ?: "",
+            fallbackInitials = null,
+            size = size
+        )
+        1 -> SingleAvatar(options = options, modifier = modifierBorder, urls.items[0], size)
+        2 -> TwoAvatar(options = options, modifier = modifierBorder, urls, size)
+        3 -> ThreeAvatar(options = options, modifier = modifierBorder, urls, size)
+        4 -> FourAvatar(options = options, modifier = modifierBorder, urls, size)
+        else -> ManyAvatar(options = options, modifier = modifierBorder, urls!!, size)
+    }
+}
+
+@Composable
+private fun SingleAvatar(options: Options, modifier: Modifier = Modifier, url: String, size: Dp) {
+    Image(
+        source = url,
+        options = options,
+        modifier = modifier
+            .size(size)
+    )
+}
+
+@Composable
+private fun TwoAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 24.dp
+    Box(modifier = Modifier.size(size)) {
+        Image(
+            source = urls.items[0],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[1],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+    }
+}
+
+@Composable
+private fun ThreeAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    Box(modifier = Modifier.size(size).padding(2.dp)) {
+        Image(
+            source = urls.items[0],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+        )
+        Image(
+            source = urls.items[1],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopCenter)
+        )
+        Image(
+            source = urls.items[2],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+    }
+}
+
+@Composable
+private fun FourAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    Box(modifier = Modifier.size(size).padding(1.dp)) {
+        Image(
+            source = urls.items[0],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+        Image(
+            source = urls.items[1],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+        )
+        Image(
+            source = urls.items[2],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[3],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopStart)
+        )
+    }
+}
+
+@Composable
+private fun ManyAvatar(options: Options, modifier: Modifier = Modifier, urls: AvatarUrls, size: Dp) {
+    val child = 16.dp
+    val more = urls.items.size - 3
+    Box(modifier = Modifier.size(size).padding(1.dp)) {
+        Image(
+            source = urls.items[0],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomStart)
+        )
+        Image(
+            source = urls.items[1],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopEnd)
+        )
+        Image(
+            source = urls.items[2],
+            options = options,
+            modifier = modifier
+                .size(child)
+                .align(Alignment.TopStart)
+        )
+        Box(
+            modifier = modifier
+                .size(child)
+                .align(Alignment.BottomEnd)
+                .background(Colors.pink_09)
+                .padding(1.dp)
+                .clipToBounds(),
+            contentAlignment = Alignment.Center
+        ) {
+            BasicText(
+                text = "+$more",
+                style = TextStyle(
+                    color = Colors.pink_03,
+                    fontFamily = getFontFamily(AppTheme.current.font, FontWeight.Normal)
+                ),
+                maxLines = 1,
+                autoSize = TextAutoSize.StepBased(
+                    minFontSize = 1.sp,
+                    maxFontSize = 10.sp,
+                    stepSize = 1.sp
+                )
+            )
+        }
+    }
+}
+
+@Composable
+private fun InitialsAvatar(
+    modifier: Modifier = Modifier,
+    name: String,
+    fallbackInitials: String? = null,
+    size: Dp = Spacing.XXL
+) {
+    val initials = remember(name, fallbackInitials) {
+        fallbackInitials ?: run {
+            val words = name.trim().split(Regex("\\s+")).takeLast(2)
+            words.joinToString("") { it.firstOrNull()?.uppercase() ?: "" }
+        }
+    }
+    Box(
+        modifier = modifier
+            .size(size)
+            .background(Colors.pink_09),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = initials,
+            color = Colors.pink_03,
+            style = Typography.descriptionXsRegular
+        )
+    }
+}
+
+@Composable
+private fun RemoteIcon16(url: String) {
+    Image(
+        source = url,
+        options = Options(
+            contentScale = ContentScale.Crop
+        ),
+        modifier = Modifier
+            .size(16.dp)
+            .clip(RoundedCornerShape(4.dp)),
+    )
+}
+
+@Immutable
+private data class AvatarUrls(val items: List<String>)

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HelpCenterRequest.kt

@@ -0,0 +1,37 @@
+// File: HelpCenterRequest.kt
+// Created At: 2026-10-19 +07:00
+// Created By: AI | AI Agent: Codex | Model: GPT-6
+// AI-GENERATED START: preserve the toolkit Help Center payload in the typed request
+package vn.momo.kits.navigation.component
+
+import kotlinx.serialization.json.JsonArray
+import kotlinx.serialization.json.JsonElement
+import kotlinx.serialization.json.JsonNull
+import kotlinx.serialization.json.JsonObject
+import kotlinx.serialization.json.JsonPrimitive
+import vn.momo.kits.application.MiniAppContext
+import vn.momo.maxapi.contract.navigation.model.BottomSheetRequest
+import vn.momo.maxapi.contract.navigation.model.HelpCenterContext
+
+internal fun MiniAppContext.helpCenterRequest() = BottomSheetRequest.HelpCenter(
+    HelpCenterContext(
+        appId = appId,
+        code = appCode,
+        name = appName?.helpCenterJson(),
+        icon = appIcon,
+        description = description?.helpCenterJson(),
+    ),
+)
+
+private fun Any?.helpCenterJson(): JsonElement = when (this) {
+    null -> JsonNull
+    is JsonElement -> this
+    is String -> JsonPrimitive(this)
+    is Boolean -> JsonPrimitive(this)
+    is Number -> JsonPrimitive(this)
+    is Map<*, *> -> JsonObject(entries.associate { (key, value) -> key.toString() to value.helpCenterJson() })
+    is Iterable<*> -> JsonArray(map { it.helpCenterJson() })
+    is Array<*> -> JsonArray(map { it.helpCenterJson() })
+    else -> JsonPrimitive(toString())
+}
+// AI-GENERATED END: preserve the toolkit Help Center payload in the typed request

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/SideBar.kt

@@ -0,0 +1,192 @@
+package vn.momo.kits.navigation.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.absolutePadding
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.AbsoluteAlignment
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.constrainHeight
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.BadgeDot
+import vn.momo.kits.components.DotSize
+import vn.momo.kits.components.Icon
+import vn.momo.kits.const.Colors
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.layout.DuoMetrics
+import vn.momo.kits.layout.SideBarEdge
+import vn.momo.kits.layout.getScreenLayout
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.setAutomationId
+import vn.momo.kits.navigation.LocalNavigator
+import vn.momo.kits.navigation.LocalOptions
+import vn.momo.kits.navigation.bottomtab.LocalDuoBarCompression
+
+private val SIDE_BAR_ICON_SIZE = 24.dp
+
+// iPhone Duo: back and toolkit leave the bar for a column in the side safe area, as the system bars do.
+// bottomInset is what footer / tab bar / home indicator take from the bottom, gap included; the column stays above it.
+@Composable
+internal fun BoxScope.HeaderSideBar(bottomInset: Dp, modifier: Modifier = Modifier) {
+    val options = LocalOptions.current
+    val navigator = LocalNavigator.current
+    val screenLayout = getScreenLayout()
+    val sideBar = screenLayout.sideBar ?: return
+    val toolkit = options.headerRight as? HeaderRight.Toolkit
+    val empty = options.headerType == HeaderType.None || (options.hiddenBack && toolkit == null)
+    val compression = LocalDuoBarCompression.current
+    val fullHeight = if (empty) 0.dp else DuoMetrics.controlSize + (toolkit?.let { Spacing.M + toolkitColumnHeight(it) } ?: 0.dp)
+    LaunchedEffect(fullHeight, compression.setToolbarHeight) { compression.setToolbarHeight(fullHeight) }
+    if (empty) return
+
+    val headerColor = getHeaderColor(options.headerType, headerOpacity(), options.tintColor, Colors.black_17)
+    val isRight = sideBar.edge == SideBarEdge.RIGHT
+
+    Column(
+        modifier = modifier
+            .align(if (isRight) AbsoluteAlignment.TopRight else AbsoluteAlignment.TopLeft)
+            .width(sideBar.width)
+            .layout { measurable, constraints ->
+                val placeable = measurable.measure(constraints.copy(minHeight = 0))
+                val maxY = screenLayout.height.roundToPx() - bottomInset.roundToPx() - placeable.height
+                val y = minOf(sideBar.top.roundToPx(), maxY).coerceAtLeast(0)
+                layout(placeable.width, constraints.constrainHeight(y + placeable.height)) {
+                    placeable.place(0, y)
+                }
+            }
+            .absolutePadding(left = if (isRight) Spacing.M else 0.dp, right = if (isRight) 0.dp else Spacing.M),
+        horizontalAlignment = if (isRight) AbsoluteAlignment.Left else AbsoluteAlignment.Right,
+        verticalArrangement = Arrangement.spacedBy(Spacing.M),
+    ) {
+        if (options.hiddenBack) {
+            // keep the slot so the toolkit does not jump between root and pushed screens
+            Spacer(Modifier.size(DuoMetrics.controlSize))
+        } else {
+            SideBarButton(
+                icon = "arrow-back",
+                headerColor = headerColor,
+                automationId = "btn_navigation_back",
+                onClick = { navigator.onBackSafe { } },
+            )
+        }
+        when {
+            toolkit == null || compression.toolbarHidden -> Unit
+            // HIG "Toolbar compressed": tools fold into one button, distinct from the useMore icon
+            compression.toolbarCompressed -> SideBarButton(
+                icon = "navigation_menu",
+                headerColor = headerColor,
+                showBadge = toolkit.tools.any { group -> group.items.any { it.showBadge } },
+                automationId = "btn_navigation_toolbar",
+                onClick = compression.expandToolbar,
+            )
+            else -> Toolkit(
+                headerRight = toolkit,
+                tintColor = options.tintColor,
+                headerColor = headerColor,
+                layout = ToolkitLayout.SideBarColumn,
+            )
+        }
+    }
+}
+
+@Composable
+internal fun SideBarButton(
+    icon: String,
+    headerColor: HeaderColor,
+    onClick: () -> Unit,
+    enabled: Boolean = true,
+    showBadge: Boolean = false,
+    automationId: String? = null,
+) {
+    Box {
+        Box(
+            modifier = Modifier
+                .size(DuoMetrics.controlSize)
+                .sideBarGlass(headerColor, CircleShape)
+                .activeOpacityClickable(enabled = enabled, onClick = onClick)
+                .conditional(automationId != null) { setAutomationId(automationId.orEmpty()) },
+            contentAlignment = Alignment.Center,
+        ) {
+            Icon(source = icon, size = SIDE_BAR_ICON_SIZE, color = headerColor.tintIconColor)
+        }
+        if (showBadge) {
+            BadgeDot(
+                size = DotSize.Small,
+                modifier = Modifier.align(Alignment.TopEnd).offset(x = -Spacing.XXS, y = Spacing.XXS),
+            )
+        }
+    }
+}
+
+// Capsule grouping related controls, one item per 50pt: vertical in the side bar, horizontal on a header row.
+@Composable
+internal fun SideBarGroup(
+    headerColor: HeaderColor,
+    itemCount: Int,
+    horizontal: Boolean = false,
+    content: @Composable (itemModifier: Modifier) -> Unit,
+) {
+    val length = if (itemCount > 1) DuoMetrics.itemPitch * itemCount else DuoMetrics.controlSize
+    val item = length / itemCount.coerceAtLeast(1)
+    val glass = Modifier.sideBarGlass(headerColor, RoundedCornerShape(Radius.XL))
+    if (horizontal) {
+        Row(Modifier.size(width = length, height = DuoMetrics.controlSize).then(glass)) {
+            content(Modifier.size(width = item, height = DuoMetrics.controlSize))
+        }
+    } else {
+        Column(Modifier.size(width = DuoMetrics.controlSize, height = length).then(glass)) {
+            content(Modifier.size(width = DuoMetrics.controlSize, height = item))
+        }
+    }
+}
+
+@Composable
+internal fun SideBarGroupItem(
+    icon: String,
+    headerColor: HeaderColor,
+    automationId: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .activeOpacityClickable(onClick = onClick)
+            .setAutomationId(automationId),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(source = icon, size = SIDE_BAR_ICON_SIZE, color = headerColor.tintIconColor)
+    }
+}
+
+// Dark glass under light icons (banner headers), light glass otherwise. The light one is opaque:
+// Compose has no backdrop blur and a translucent fill shows its own shadow through (RN uses 85% white).
+private fun Modifier.sideBarGlass(headerColor: HeaderColor, shape: Shape): Modifier =
+    if (headerColor.tintIconColor == Colors.black_01) {
+        clip(shape)
+            .background(Colors.black_20.copy(alpha = 0.5f))
+            .border(0.5.dp, Colors.black_01.copy(alpha = 0.2f), shape)
+    } else {
+        shadow(3.dp, shape)
+            .background(Colors.black_01)
+            .border(0.5.dp, Colors.black_20.copy(alpha = 0.08f), shape)
+    }