@momo-kits/native-kits 0.167.1-beta.4 → 0.167.1-beta.5-debug

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

@@ -0,0 +1,552 @@
+package vn.momo.kits.components
+
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.*
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.withTransform
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.layout.positionInParent
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.activeOpacityClickable
+import vn.momo.kits.modifier.conditional
+
+data class TabViewItem(
+    val title: String,
+    val icon: String? = null,
+    val renderIcon: (@Composable (active: Boolean) -> Unit)? = null,
+    val showDot: Boolean = false,
+    val dotSize: DotSize = DotSize.Small,
+    val badgeValue: String? = null,
+    val accessibilityLabel: String? = null,
+    val content: @Composable () -> Unit = {},
+)
+
+enum class TabViewType { DEFAULT, CARD }
+
+enum class TabViewDirection { ROW, COLUMN }
+
+@Composable
+fun TabView(
+    modifier: Modifier = Modifier,
+    tabs: List<TabViewItem>,
+    initialPage: Int = 0,
+    type: TabViewType = TabViewType.DEFAULT,
+    scrollable: Boolean = false,
+    fitContent: Boolean = false,
+    selectedColor: Color? = null,
+    unselectedColor: Color? = null,
+    direction: TabViewDirection = TabViewDirection.ROW,
+    userScrollEnabled: Boolean = true,
+    onPressTabItem: (Int) -> Unit = {},
+    onPageSelected: (Int) -> Unit = {},
+) {
+    if (tabs.isEmpty()) return
+
+    val theme = AppTheme.current
+    val resolvedSelectedColor = selectedColor ?: theme.colors.primary
+    val resolvedUnselectedColor = unselectedColor ?: theme.colors.text.default
+
+    val startPage = initialPage.coerceIn(0, tabs.lastIndex)
+    var selectedIndex by remember { mutableStateOf(startPage) }
+
+    // Track which pages have already been visited for lazy rendering
+    val lazyRendered = remember { mutableStateListOf(startPage) }
+
+    val pagerState = if (!fitContent) {
+        rememberPagerState(initialPage = startPage) { tabs.size }
+    } else null
+
+    val coroutineScope = rememberCoroutineScope()
+
+    // Keep selectedIndex in sync when user swipes the pager
+    if (pagerState != null) {
+        LaunchedEffect(pagerState) {
+            snapshotFlow { pagerState.currentPage }.collect { page ->
+                if (!lazyRendered.contains(page)) lazyRendered.add(page)
+                selectedIndex = page
+                onPageSelected(page)
+            }
+        }
+    }
+
+    val onTabPressed: (Int) -> Unit = { index ->
+        onPressTabItem(index)
+        if (!lazyRendered.contains(index)) lazyRendered.add(index)
+        selectedIndex = index
+        if (pagerState != null) {
+            coroutineScope.launch { pagerState.animateScrollToPage(index) }
+        }
+        if (fitContent) {
+            onPageSelected(index)
+        }
+    }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
+    ) {
+        // Tab bar
+        when {
+            type == TabViewType.CARD -> CardTabBar(
+                tabs = tabs,
+                selectedIndex = selectedIndex,
+                selectedColor = resolvedSelectedColor,
+                unselectedColor = resolvedUnselectedColor,
+                direction = direction,
+                onPressTabItem = onTabPressed,
+            )
+
+            scrollable -> ScrollableTabBar(
+                tabs = tabs,
+                selectedIndex = selectedIndex,
+                selectedColor = resolvedSelectedColor,
+                unselectedColor = resolvedUnselectedColor,
+                direction = direction,
+                onPressTabItem = onTabPressed,
+            )
+
+            else -> DefaultTabBar(
+                tabs = tabs,
+                selectedIndex = selectedIndex,
+                selectedColor = resolvedSelectedColor,
+                unselectedColor = resolvedUnselectedColor,
+                direction = direction,
+                onPressTabItem = onTabPressed,
+            )
+        }
+
+        // Content area
+        if (fitContent) {
+            Box(modifier = Modifier.fillMaxWidth()) {
+                tabs.getOrNull(selectedIndex)?.content?.invoke()
+            }
+        } else if (pagerState != null) {
+            HorizontalPager(
+                state = pagerState,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f),
+                userScrollEnabled = userScrollEnabled,
+            ) { page ->
+                Box(modifier = Modifier.fillMaxWidth()) {
+                    if (lazyRendered.contains(page)) {
+                        tabs[page].content()
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun DefaultTabBar(
+    tabs: List<TabViewItem>,
+    selectedIndex: Int,
+    selectedColor: Color,
+    unselectedColor: Color,
+    direction: TabViewDirection,
+    onPressTabItem: (Int) -> Unit,
+) {
+    val theme = AppTheme.current
+    val density = LocalDensity.current
+    var totalWidthPx by remember { mutableStateOf(0) }
+
+    val itemWidth: Dp = if (totalWidthPx > 0 && tabs.isNotEmpty()) {
+        with(density) { (totalWidthPx / tabs.size).toDp() }
+    } else 0.dp
+
+    val indicatorOffsetX: Dp by animateDpAsState(
+        targetValue = itemWidth * selectedIndex + Spacing.XS,
+        animationSpec = tween(durationMillis = 200),
+        label = "DefaultIndicatorX",
+    )
+    val indicatorWidth: Dp = (itemWidth - Spacing.XS * 2).coerceAtLeast(0.dp)
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .onGloballyPositioned { totalWidthPx = it.size.width }
+            .background(theme.colors.background.surface)
+            .border(
+                width = 0.5.dp,
+                color = theme.colors.border.default,
+                shape = RoundedCornerShape(0.dp),
+            ),
+    ) {
+        Row(modifier = Modifier.fillMaxWidth()) {
+            tabs.forEachIndexed { index, tab ->
+                TabItemView(
+                    modifier = Modifier.weight(1f),
+                    tab = tab,
+                    active = selectedIndex == index,
+                    selectedColor = selectedColor,
+                    unselectedColor = unselectedColor,
+                    direction = direction,
+                    onPress = { onPressTabItem(index) },
+                )
+            }
+        }
+
+        // Animated underline indicator
+        TabUnderlineIndicator(offsetX = indicatorOffsetX, width = indicatorWidth, color = selectedColor)
+    }
+}
+
+@Composable
+private fun ScrollableTabBar(
+    tabs: List<TabViewItem>,
+    selectedIndex: Int,
+    selectedColor: Color,
+    unselectedColor: Color,
+    direction: TabViewDirection,
+    onPressTabItem: (Int) -> Unit,
+) {
+    val theme = AppTheme.current
+    val density = LocalDensity.current
+    val scrollState: ScrollState = rememberScrollState()
+    val coroutineScope = rememberCoroutineScope()
+
+    // Per-item (widthPx, xPx) measured relative to the scrollable row
+    val itemMeasures = remember { mutableStateListOf<Pair<Float, Float>>() }
+
+    val rawWidth = itemMeasures.getOrNull(selectedIndex)?.first ?: 0f
+    val rawX = itemMeasures.getOrNull(selectedIndex)?.second ?: 0f
+
+    val animatedWidth: Dp by animateDpAsState(
+        targetValue = with(density) { rawWidth.toDp() },
+        animationSpec = tween(250),
+        label = "ScrollableIndicatorWidth",
+    )
+    val animatedX: Dp by animateDpAsState(
+        targetValue = with(density) { rawX.toDp() },
+        animationSpec = tween(250),
+        label = "ScrollableIndicatorX",
+    )
+
+    // Auto-scroll bar to keep selected item visible
+    LaunchedEffect(selectedIndex, itemMeasures.size) {
+        val x = itemMeasures.getOrNull(selectedIndex)?.second ?: return@LaunchedEffect
+        val target = (x - with(density) { Spacing.S.toPx() }).coerceAtLeast(0f).toInt()
+        coroutineScope.launch { scrollState.animateScrollTo(target) }
+    }
+
+    val scrollOffsetDp = with(density) { scrollState.value.toDp() }
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(theme.colors.background.surface)
+            .border(
+                width = 0.5.dp,
+                color = theme.colors.border.default,
+                shape = RoundedCornerShape(0.dp),
+            ),
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .horizontalScroll(scrollState),
+        ) {
+            tabs.forEachIndexed { index, tab ->
+                Box(
+                    modifier = Modifier
+                        .wrapContentWidth()
+                        .onGloballyPositioned { coords ->
+                            val w = coords.size.width.toFloat()
+                            val x = coords.positionInParent().x
+                            while (itemMeasures.size <= index) itemMeasures.add(0f to 0f)
+                            itemMeasures[index] = w to x
+                        },
+                ) {
+                    TabItemView(
+                        tab = tab,
+                        active = selectedIndex == index,
+                        selectedColor = selectedColor,
+                        unselectedColor = unselectedColor,
+                        direction = direction,
+                        scrollable = true,
+                        onPress = { onPressTabItem(index) },
+                    )
+                }
+            }
+        }
+
+        // Animated underline indicator aligned to bottom of the bar
+        TabUnderlineIndicator(
+            offsetX = animatedX - scrollOffsetDp + Spacing.XS,
+            width = (animatedWidth - Spacing.XS * 2).coerceAtLeast(0.dp),
+            color = selectedColor,
+        )
+    }
+}
+
+@Composable
+private fun CardTabBar(
+    tabs: List<TabViewItem>,
+    selectedIndex: Int,
+    selectedColor: Color,
+    unselectedColor: Color,
+    direction: TabViewDirection,
+    onPressTabItem: (Int) -> Unit,
+) {
+    val theme = AppTheme.current
+    val surface = theme.colors.background.surface
+
+    // react-kits `CardTabBar` draws the bar in TWO layers: a flat strip where every
+    // tab looks unselected, and one raised card laid OVER it for the active tab.
+    // The card is 4dp taller, sits `Spacing.XS` higher, and is joined to the strip
+    // on each side by a curved "ear" — the browser-tab silhouette that gives this
+    // variant its name. Rendering the active tab in place (just taller) loses both
+    // the overlap and the ears, and the strip used the theme's `tonal` pink where
+    // react-kits uses `Colors.black_02`, so the bar came out pink and flat.
+    val pathWidth = if (tabs.size > 2) 22.dp else 28.dp
+    val isFirst = selectedIndex == 0
+    val isLast = selectedIndex == tabs.lastIndex
+
+    // The bar is exactly as tall as the FLAT strip — react-kits' raised card is
+    // `position: absolute`, so it never adds height; it just overflows upward into
+    // the 4dp margin. Letting the 44dp card size this box instead left a 4dp band of
+    // background showing between the tabs and the panel they sit on.
+    BoxWithConstraints(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = Spacing.XS)
+            .height(CARD_TAB_HEIGHT),
+    ) {
+        val itemWidth = maxWidth / tabs.size
+
+        Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.Bottom) {
+            tabs.forEachIndexed { index, tab ->
+                Box(
+                    modifier = Modifier
+                        .width(itemWidth)
+                        .height(CARD_TAB_HEIGHT)
+                        .background(
+                            color = Colors.black_02,
+                            shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M),
+                        )
+                        .activeOpacityClickable { onPressTabItem(index) }
+                        .padding(horizontal = Spacing.S),
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        TabLeadingIcon(tab = tab, active = false, color = unselectedColor)
+                        Text(
+                            text = tab.title,
+                            style = Typography.bodyDefaultRegular,
+                            color = unselectedColor,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            modifier = Modifier.weight(1f, fill = false),
+                        )
+                        TabTrailingBadge(tab)
+                    }
+                }
+            }
+        }
+
+        val active = tabs[selectedIndex]
+        Row(
+            modifier = Modifier
+                // Pinned to the strip's BOTTOM edge so the two always end on the same
+                // pixel; `requiredHeight` then grows it upward into the 4dp margin.
+                // Offsetting it up by hand instead left a sub-dp sliver of strip
+                // showing under the card once rounding got involved.
+                .align(Alignment.BottomStart)
+                .offset(x = itemWidth * selectedIndex - (if (isFirst) 0.dp else pathWidth))
+                // `requiredHeight`, not `height`: the bar box is only as tall as the
+                // flat strip, so a plain height would be coerced down to 40 and the
+                // raised card would stop 4dp short of the panel below, leaving a grey
+                // sliver. react-kits gets this free — its card is absolutely
+                // positioned and ignores the parent box entirely.
+                .requiredHeight(CARD_TAB_ACTIVE_HEIGHT),
+            verticalAlignment = Alignment.Bottom,
+        ) {
+            // react-kits nudges each ear 8pt UNDER the card so the join has no seam.
+            if (!isFirst) CardTabEar(pathWidth, mirrored = true, color = surface, nudge = 8.dp)
+            Box(
+                modifier = Modifier
+                    .width(itemWidth)
+                    .fillMaxHeight()
+                    .background(
+                        color = surface,
+                        shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M),
+                    )
+                    .activeOpacityClickable { onPressTabItem(selectedIndex) }
+                    .padding(horizontal = if (tabs.size == 3) Spacing.S else Spacing.M),
+                contentAlignment = Alignment.Center,
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    TabLeadingIcon(tab = active, active = true, color = selectedColor)
+                    Text(
+                        text = active.title,
+                        style = Typography.headerSSemibold,
+                        color = selectedColor,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.weight(1f, fill = false),
+                    )
+                    TabTrailingBadge(active)
+                }
+            }
+            if (!isLast) CardTabEar(pathWidth, mirrored = false, color = surface, nudge = -8.dp)
+        }
+    }
+}
+
+private val CARD_TAB_HEIGHT = 40.dp
+private val CARD_TAB_ACTIVE_HEIGHT = 44.dp
+@Composable
+private fun CardTabEar(width: Dp, mirrored: Boolean, color: Color, nudge: Dp) {
+    Canvas(modifier = Modifier.offset(x = nudge).width(width).height(CARD_TAB_ACTIVE_HEIGHT)) {
+        val path = Path().apply {
+            moveTo(0f, 0f)
+            lineTo(0.60765f, 0f)
+            cubicTo(6.47582f, 0f, 11.4819f, 4.23831f, 12.4602f, 10.0244f)
+            cubicTo(13.9248f, 18.6872f, 15.9294f, 30.37f, 16.6925f, 34f)
+            cubicTo(17.9536f, 40f, 22.259f, 44f, 27.9996f, 44f)
+            lineTo(0f, 44f)
+            close()
+        }
+        val draw: DrawScope.() -> Unit = { drawPath(path = path, color = color) }
+        if (mirrored) withTransform({ scale(-1f, 1f) }) { draw() } else draw()
+    }
+}
+
+@Composable
+private fun TabItemView(
+    modifier: Modifier = Modifier,
+    tab: TabViewItem,
+    active: Boolean,
+    selectedColor: Color,
+    unselectedColor: Color,
+    direction: TabViewDirection,
+    scrollable: Boolean = false,
+    onPress: () -> Unit,
+) {
+    val textColor = if (active) selectedColor else unselectedColor
+    val textStyle = if (active) Typography.headerSSemibold else Typography.bodyDefaultRegular
+
+    if (direction == TabViewDirection.COLUMN) {
+        Column(
+            modifier = modifier
+                .height(68.dp)
+                .activeOpacityClickable { onPress() }
+                .padding(horizontal = Spacing.S),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) {
+            // Icon area with badge/dot overlay
+            Box(contentAlignment = Alignment.TopEnd) {
+                if (tab.renderIcon != null) {
+                    tab.renderIcon.invoke(active)
+                } else if (tab.icon != null) {
+                    Icon(
+                        source = tab.icon,
+                        size = 24.dp,
+                        color = textColor,
+                    )
+                }
+                if (tab.showDot) {
+                    BadgeDot(
+                        size = tab.dotSize,
+                        modifier = Modifier
+                            .align(Alignment.TopEnd)
+                            .offset(x = 4.dp, y = (-4).dp),
+                    )
+                } else if (!tab.badgeValue.isNullOrEmpty()) {
+                    Badge(
+                        label = tab.badgeValue,
+                        modifier = Modifier
+                            .align(Alignment.TopEnd)
+                            .offset(x = 4.dp, y = (-4).dp),
+                    )
+                }
+            }
+            if (tab.icon != null || tab.renderIcon != null) {
+                Spacer(modifier = Modifier.height(Spacing.XXS))
+            }
+            Text(
+                text = tab.title,
+                style = textStyle,
+                color = textColor,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    } else {
+        Row(
+            modifier = modifier
+                .height(48.dp)
+                .activeOpacityClickable { onPress() }
+                .padding(horizontal = Spacing.M),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            TabLeadingIcon(tab = tab, active = active, color = textColor)
+            Text(
+                text = tab.title,
+                style = textStyle,
+                color = textColor,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                modifier = if (scrollable) Modifier else Modifier.weight(1f, fill = false),
+            )
+            TabTrailingBadge(tab)
+        }
+    }
+}
+
+@Composable
+private fun BoxScope.TabUnderlineIndicator(offsetX: Dp, width: Dp, color: Color) {
+    Box(
+        modifier = Modifier
+            .align(Alignment.BottomStart)
+            .offset(x = offsetX)
+            .width(width)
+            .height(2.dp)
+            .background(
+                color = color,
+                shape = RoundedCornerShape(topStart = Radius.XXS, topEnd = Radius.XXS),
+            ),
+    )
+}
+
+@Composable
+private fun TabLeadingIcon(tab: TabViewItem, active: Boolean, color: Color) {
+    if (tab.renderIcon != null) {
+        tab.renderIcon.invoke(active)
+        Spacer(modifier = Modifier.width(Spacing.XS))
+    } else if (tab.icon != null) {
+        Icon(source = tab.icon, size = 18.dp, color = color)
+        Spacer(modifier = Modifier.width(Spacing.XS))
+    }
+}
+
+@Composable
+private fun TabTrailingBadge(tab: TabViewItem) {
+    if (tab.showDot) {
+        Spacer(modifier = Modifier.width(Spacing.XS))
+        BadgeDot(size = tab.dotSize)
+    } else if (!tab.badgeValue.isNullOrEmpty()) {
+        Spacer(modifier = Modifier.width(Spacing.XS))
+        Badge(label = tab.badgeValue, modifier = Modifier)
+    }
+}

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

@@ -0,0 +1,88 @@
+package vn.momo.kits.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.application.IsShowBaseLineDebug
+import vn.momo.kits.const.*
+import vn.momo.kits.modifier.conditional
+
+enum class TagSize(val height: Float) {
+    Large(24.toFloat()),
+    Medium(18.toFloat())
+}
+
+enum class TagColor(val backgroundColor: Color, val textColor: Color) {
+    Default(Colors.black_04, Colors.black_17),
+    Orange(Colors.orange_08, Colors.orange_03),
+    Green(Colors.green_08, Colors.green_03),
+    Red(Colors.red_08, Colors.red_03),
+    Blue(Colors.blue_08, Colors.blue_03),
+    Grey(Colors.black_04, Colors.black_12),
+}
+
+@Composable
+fun Tag(
+    label: String = "Label",
+    icon: String? = null,
+    color: TagColor = TagColor.Default,
+    size: TagSize = TagSize.Large,
+    customColor: Color? = null,
+) {
+    val primaryColors = listOf(
+        Color(0xFFF0F0F0),
+        Color(0xFFEB2F96),
+        Color(0xFF962AF0),
+        Color(0xFF4E4BFF),
+        Color(0xFF007AFF),
+        Color(0xFF13C2C2),
+        Color(0xFF34C759),
+        Color(0xFFA0D911),
+        Color(0xFFFFCC00),
+        Color(0xFFFA8C16),
+        Color(0xFFFA541C),
+        Color(0xFFF5222D)
+    )
+    var tagColor = color.backgroundColor
+    var labelColor = color.textColor
+
+    if (primaryColors.contains(customColor)) {
+        tagColor = color.backgroundColor
+        labelColor = color.textColor
+    }
+
+    Box(
+        modifier = Modifier
+            .height(scaleSize(size.height).dp)
+            .background(tagColor, shape = RoundedCornerShape(Radius.S))
+            .conditional(IsShowBaseLineDebug) {
+                border(1.dp, Colors.blue_03)
+            }
+            .padding(horizontal = Spacing.S),
+        contentAlignment = Alignment.Center
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            if (icon != null) {
+                Icon(
+                    source = icon,
+                    size = 16.dp,
+                    color = labelColor
+                )
+            }
+            Text(
+                text = label,
+                color = labelColor,
+                style = Typography.labelSMedium
+            )
+        }
+    }
+}