@momo-kits/native-kits 0.161.1-beta.15-debug → 0.161.2-beta.1

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

@@ -1,194 +0,0 @@
-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 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/Button.kt

@@ -1,357 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.tween
-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.interaction.collectIsPressedAsState
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-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.modifier.conditional
-import vn.momo.kits.platform.LottieAnimation
-
-enum class ButtonType {
-    PRIMARY,
-    SECONDARY,
-    TONAL,
-    OUTLINE,
-    DANGER,
-    TEXT,
-    DISABLED
-}
-
-data class ButtonSpecs(
-    val height: Dp,
-    val radius: Dp,
-    val padding: Dp,
-    val width: Dp,
-)
-
-enum class Size(val value: ButtonSpecs) {
-    LARGE(
-        ButtonSpecs(
-            height = 48.dp,
-            radius = Radius.S,
-            padding = Spacing.L,
-            width = 128.dp
-        )
-    ),
-    MEDIUM(
-        ButtonSpecs(
-            height = 36.dp,
-            radius = Radius.S,
-            padding = Spacing.M,
-            width = 80.dp
-        )
-    ),
-    SMALL(
-        ButtonSpecs(
-            height = 28.dp,
-            radius = Radius.S,
-            padding = Spacing.S,
-            width = 60.dp
-        )
-    )
-}
-
-private val styleCache = mapOf(
-    Size.LARGE to Typography.actionDefaultBold,
-    Size.MEDIUM to Typography.actionSBold,
-    Size.SMALL to Typography.actionXsBold
-)
-
-private val iconSizeCache = mapOf(
-    Size.LARGE to 24.dp,
-    Size.MEDIUM to 16.dp,
-    Size.SMALL to 16.dp
-)
-
-private val iconSpaceCache = mapOf(
-    Size.SMALL to Spacing.XS,
-    Size.MEDIUM to Spacing.S,
-    Size.LARGE to Spacing.S
-)
-
-fun getStyle(size: Size): TextStyle {
-    return styleCache[size] ?: Typography.actionDefaultBold
-}
-
-fun getIconSize(size: Size): Dp = iconSizeCache[size] ?: 24.dp
-fun getIconSpace(size: Size): Dp = iconSpaceCache[size] ?: Spacing.S
-
-@Composable
-fun getTextColor(loading: Boolean, type: ButtonType): Color {
-    val theme = AppTheme.current
-
-    return remember(type, theme, loading) {
-        when (type) {
-            ButtonType.DISABLED -> theme.colors.text.disable
-            ButtonType.PRIMARY -> Colors.black_01
-            ButtonType.SECONDARY -> theme.colors.text.default
-            ButtonType.OUTLINE -> theme.colors.primary
-            ButtonType.TONAL -> theme.colors.primary
-            ButtonType.DANGER -> Colors.black_01
-            ButtonType.TEXT -> theme.colors.primary
-        }.withLoading(loading)
-    }
-}
-
-@Composable
-fun RenderTitle(size: Size, title: String = "", textColor: Color) {
-    val style = remember(size) { getStyle(size) }
-    Text(
-        style = style,
-        text = title,
-        color = textColor,
-        overflow = TextOverflow.Ellipsis,
-        maxLines = 1
-    )
-}
-
-@Composable
-fun RenderIcon(
-    size: Size,
-    isIconLeft: Boolean,
-    useTintColor: Boolean = true,
-    icon: String = "",
-    forceLoading: Boolean = false,
-    bgColor: Color? = null,
-    textColor: Color? = null,
-) {
-    val iconSize = remember(size) { getIconSize(size) }
-    val margin = remember(size) { getIconSpace(size) }
-    val color = if (useTintColor) textColor else Color.Unspecified
-
-    val modifier = Modifier.padding(
-        start = if (isIconLeft) 0.dp else margin,
-        end = if (isIconLeft) margin else 0.dp
-    )
-
-    if (forceLoading) {
-        Box(modifier) {
-            LottieAnimation(
-                modifier = Modifier.size(iconSize),
-                bgColor = bgColor,
-                tintColor = color,
-                path = "files/lottie_circle_loader"
-            )
-        }
-    } else if (icon.isNotEmpty()) {
-        Icon(
-            source = icon,
-            color = color,
-            size = iconSize,
-            modifier = modifier
-        )
-    }
-}
-
-private fun shouldLoadingOnLeft(iconLeft: String, iconRight: String): Boolean {
-    val hasLeft = iconLeft.isNotEmpty()
-    val hasRight = iconRight.isNotEmpty()
-    return when {
-        !hasLeft && !hasRight -> true
-        hasLeft && !hasRight -> true
-        !hasLeft && hasRight -> false
-        hasLeft && hasRight -> false
-        else -> true
-    }
-}
-
-@Composable
-fun getTypeStyle(
-    type: ButtonType,
-    color: Color? = AppTheme.current.colors.primary,
-    size: Size,
-    bgColor: Color,
-): Modifier {
-    val theme = AppTheme.current
-    val radius = remember(size) { size.value.radius }
-    val modifier = Modifier.background(bgColor)
-
-    return remember(type, color, theme, radius, bgColor) {
-        when (type) {
-            ButtonType.DISABLED -> modifier
-                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
-
-            ButtonType.PRIMARY -> modifier
-                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
-
-            ButtonType.SECONDARY -> modifier
-                .border(1.dp, theme.colors.border.default, RoundedCornerShape(radius))
-
-            ButtonType.OUTLINE -> modifier
-                .border(1.dp, color ?: theme.colors.primary, RoundedCornerShape(radius))
-
-            ButtonType.TONAL -> modifier
-                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
-
-            ButtonType.DANGER -> modifier
-                .border(0.dp, Color.Unspecified, RoundedCornerShape(radius))
-
-            ButtonType.TEXT -> modifier
-        }
-    }
-}
-
-@Composable
-fun getButtonBackgroundColor(
-    loading: Boolean,
-    type: ButtonType
-): Color {
-    val theme = AppTheme.current
-
-    return remember(loading, type, theme) {
-        when (type) {
-            ButtonType.DISABLED -> theme.colors.background.disable.withLoading(loading)
-            ButtonType.PRIMARY -> theme.colors.primary.withLoading(loading)
-            ButtonType.SECONDARY -> theme.colors.background.surface.withLoading(loading)
-            ButtonType.OUTLINE -> theme.colors.background.surface.withLoading(loading)
-            ButtonType.TONAL -> theme.colors.background.tonal.withLoading(loading)
-            ButtonType.DANGER -> theme.colors.error.primary.withLoading(loading)
-            ButtonType.TEXT -> Color.Unspecified
-        }
-    }
-}
-
-fun Color.withLoading(loading: Boolean): Color =
-    this.copy(alpha = if (loading) 0.75f else 1f)
-
-@Composable
-fun Button(
-    onClick: () -> Unit,
-    type: ButtonType = ButtonType.PRIMARY,
-    size: Size = Size.LARGE,
-    iconRight: String = "",
-    iconLeft: String = "",
-    title: String = "Button",
-    loading: Boolean = false,
-    useTintColor: Boolean = true,
-    isFull: Boolean = true,
-    modifier: Modifier = Modifier,
-) {
-    val radius = remember(size) { size.value.radius }
-    val isEnabled = remember(type) { type != ButtonType.DISABLED }
-    val loadingOnLeft = remember(iconLeft, iconRight) {
-        shouldLoadingOnLeft(iconLeft, iconRight)
-    }
-
-    val sizeSpecs = remember(size) { size.value }
-
-    val interactionSource = remember { MutableInteractionSource() }
-    val isPressed by interactionSource.collectIsPressedAsState()
-
-    val animatedPadding by animateDpAsState(
-        targetValue = if (isPressed && isEnabled && !loading) 2.dp else 0.dp,
-        animationSpec = tween(100),
-        label = "pressPadding"
-    )
-
-    val targetAlpha = if (isPressed && isEnabled && !loading) 0.5f else 1f
-    val alpha by animateFloatAsState(
-        targetValue = targetAlpha,
-        animationSpec = tween(100),
-        label = "buttonPressAlpha"
-    )
-
-    val clickableModifier =
-        if (isEnabled && !loading) {
-            modifier
-                .clip(RoundedCornerShape(radius))
-                .clickable(
-                    enabled = isEnabled && !loading,
-                    interactionSource = interactionSource,
-                    indication = null,
-                    onClick = onClick
-                )
-                .alpha(alpha)
-        } else {
-            modifier
-                .clip(RoundedCornerShape(radius))
-        }
-
-    val bgColor = getButtonBackgroundColor(loading, type)
-    val textColor = getTextColor(loading, type)
-
-    val rootModifier = if (isFull) {
-        Modifier
-            .fillMaxWidth()
-            .wrapContentHeight()
-    } else {
-        Modifier
-    }
-
-    Box(
-        modifier = rootModifier.then(clickableModifier),
-        contentAlignment = Alignment.Center
-    ) {
-        // Visual background (shrinks on press)
-        Box(
-            modifier = Modifier
-                .matchParentSize()
-                .padding(horizontal = animatedPadding)
-                .clip(RoundedCornerShape(radius))
-                .then(getTypeStyle(type, size = size, bgColor = bgColor))
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-        )
-
-        // Content
-        Row(
-            modifier = Modifier
-                .padding(horizontal = sizeSpecs.padding)
-                .height(sizeSpecs.height),
-            horizontalArrangement = Arrangement.Center,
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            RenderIcon(
-                size = size,
-                isIconLeft = true,
-                useTintColor = useTintColor,
-                icon = iconLeft,
-                forceLoading = loading && loadingOnLeft,
-                bgColor = bgColor,
-                textColor = textColor
-            )
-            RenderTitle(size, title, textColor = textColor)
-            RenderIcon(
-                size = size,
-                isIconLeft = false,
-                useTintColor = useTintColor,
-                icon = iconRight,
-                forceLoading = loading && !loadingOnLeft,
-                bgColor = bgColor,
-                textColor = textColor
-            )
-        }
-    }
-}

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

@@ -1,123 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.pager.HorizontalPager
-import androidx.compose.foundation.pager.rememberPagerState
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.snapshotFlow
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.isActive
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.Colors
-import vn.momo.kits.modifier.conditional
-import kotlin.math.absoluteValue
-
-@Composable
-fun Carousel(
-    itemCount: Int,
-    modifier: Modifier = Modifier,
-    loop: Boolean = false,
-    autoplay: Boolean = false,
-    autoplayInterval: Long = 3000L,
-    enableSnap: Boolean = true,
-    scrollEnabled: Boolean = true,
-    inactiveSlideOpacity: Float = 1f,
-    inactiveSlideScale: Float = 1f,
-    contentPadding: PaddingValues = PaddingValues(0.dp),
-    onSnapToItem: (Int) -> Unit = {},
-    onScrollIndexChanged: (Int) -> Unit = {},
-    content: @Composable (index: Int) -> Unit,
-) {
-    if (itemCount <= 0) return
-
-    val virtualPageCount = if (loop) itemCount * 1000 else itemCount
-    val startPage = if (loop) (virtualPageCount / 2) - ((virtualPageCount / 2) % itemCount) else 0
-
-    val pagerState = rememberPagerState(initialPage = startPage) { virtualPageCount }
-
-    // Map virtual page to real index
-    val realIndex: (Int) -> Int = { page -> page % itemCount }
-
-    // Track user interaction for autoplay pause
-    var isUserScrolling by remember { mutableStateOf(false) }
-
-    // Autoplay
-    if (autoplay && itemCount > 1) {
-        LaunchedEffect(autoplayInterval, isUserScrolling) {
-            if (isUserScrolling) return@LaunchedEffect
-            while (isActive) {
-                delay(autoplayInterval)
-                if (!isUserScrolling) {
-                    val nextPage = pagerState.currentPage + 1
-                    if (nextPage < virtualPageCount) {
-                        pagerState.animateScrollToPage(nextPage)
-                    }
-                }
-            }
-        }
-    }
-
-    // Track scroll state for callbacks
-    LaunchedEffect(pagerState) {
-        snapshotFlow { pagerState.isScrollInProgress }.collect { scrolling ->
-            isUserScrolling = scrolling
-        }
-    }
-
-    LaunchedEffect(pagerState) {
-        snapshotFlow { pagerState.currentPage }.collect { page ->
-            val real = realIndex(page)
-            onSnapToItem(real)
-            onScrollIndexChanged(real)
-        }
-    }
-
-    HorizontalPager(
-        state = pagerState,
-        modifier = modifier
-            .fillMaxWidth()
-            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
-        contentPadding = contentPadding,
-        userScrollEnabled = scrollEnabled,
-        beyondViewportPageCount = if (loop) 1 else 0,
-    ) { page ->
-        val real = realIndex(page)
-
-        val pageOffset = ((pagerState.currentPage - page) + pagerState.currentPageOffsetFraction).absoluteValue
-
-        val scale by animateFloatAsState(
-            targetValue = if (pageOffset < 0.5f) 1f else inactiveSlideScale,
-            animationSpec = tween(150),
-            label = "carouselScale"
-        )
-        val alpha by animateFloatAsState(
-            targetValue = if (pageOffset < 0.5f) 1f else inactiveSlideOpacity,
-            animationSpec = tween(150),
-            label = "carouselAlpha"
-        )
-
-        Box(
-            modifier = Modifier
-                .graphicsLayer {
-                    scaleX = scale
-                    scaleY = scale
-                    this.alpha = alpha
-                }
-        ) {
-            content(real)
-        }
-    }
-}