@momo-kits/native-kits 0.168.1-beta.25-debug → 0.168.1-beta.25

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

@@ -1,560 +0,0 @@
-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.draw.clipToBounds
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.drawscope.withTransform
-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()
-    // The collector below outlives recompositions; read the latest callback, not the first one.
-    val currentOnPageSelected by rememberUpdatedState(onPageSelected)
-
-    // 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
-                currentOnPageSelected(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.getOrNull(selectedIndex) ?: return@BoxWithConstraints
-        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) {
-    // Clipped like react-kits' Svg, whose 28-wide path is cut at a 22pt `pathWidth`.
-    Canvas(modifier = Modifier.offset(x = nudge).width(width).height(CARD_TAB_ACTIVE_HEIGHT).clipToBounds()) {
-        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()
-        }
-        // Path coordinates are dp (react-kits viewBox), but DrawScope draws in px.
-        val pxPerDp = density
-        withTransform({
-            if (mirrored) scale(-1f, 1f)
-            scale(pxPerDp, pxPerDp, pivot = Offset.Zero)
-        }) { drawPath(path = path, color = color) }
-    }
-}
-
-@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

@@ -1,86 +0,0 @@
-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),
-}
-
-// RN only accepts the `_03` palette as a custom tag color.
-private val tagCustomColors = listOf(
-    Colors.black_03,
-    Colors.pink_03,
-    Colors.violet_03,
-    Colors.indigo_03,
-    Colors.blue_03,
-    Colors.mint_03,
-    Colors.green_03,
-    Colors.lime_03,
-    Colors.yellow_03,
-    Colors.gold_03,
-    Colors.orange_03,
-    Colors.red_03,
-)
-
-@Composable
-fun Tag(
-    label: String = "Label",
-    icon: String? = null,
-    color: TagColor = TagColor.Default,
-    size: TagSize = TagSize.Large,
-    customColor: Color? = null,
-) {
-    val custom = customColor?.takeIf { it in tagCustomColors }
-    val tagColor = custom ?: color.backgroundColor
-    val labelColor = if (custom != null) Colors.black_01 else 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
-            )
-        }
-    }
-}