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

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

@@ -1,357 +0,0 @@
-package vn.momo.kits.components
-
-import vn.momo.kits.modifier.InternalApi
-
-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.*
-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.*
-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
-)
-
-private fun getStyle(size: Size): TextStyle {
-    return styleCache[size] ?: Typography.actionDefaultBold
-}
-
-@InternalApi
-fun getIconSize(size: Size): Dp = iconSizeCache[size] ?: 24.dp
-private fun getIconSpace(size: Size): Dp = iconSpaceCache[size] ?: Spacing.S
-
-@InternalApi
-@Composable
-fun getTextColor(loading: Boolean, type: ButtonType): Color {
-    val theme = AppTheme.current
-
-    return remember(type, theme, loading) {
-        getButtonColor(type, theme).withLoading(loading)
-    }
-}
-
-internal fun getButtonColor(type: ButtonType, theme: Theme): Color {
-    return 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
-    }
-}
-
-
-@Composable
-internal 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
-@InternalApi
-fun RenderIcon(
-    size: Size,
-    isIconLeft: Boolean,
-    useTintColor: Boolean = true,
-    icon: String = "",
-    forceLoading: Boolean = false,
-    textColor: Color? = null,
-) {
-    val iconSize = remember(size) { getIconSize(size) }
-    val margin = remember(size) { getIconSpace(size) }
-    // null = untinted; Color.Unspecified would tint with a transparent color and hide the icon.
-    val color = if (useTintColor) textColor else null
-
-    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 = null,
-                tintColor = color,
-                path = "files/lottie_circle_loader",
-                useCompose = true
-            )
-        }
-    } 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
-    }
-}
-
-@InternalApi
-@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
-        }
-    }
-}
-
-@InternalApi
-@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
-        }
-    }
-}
-
-private 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,
-                textColor = textColor
-            )
-            RenderTitle(size, title, textColor = textColor)
-            RenderIcon(
-                size = size,
-                isIconLeft = false,
-                useTintColor = useTintColor,
-                icon = iconRight,
-                forceLoading = loading && !loadingOnLeft,
-                textColor = textColor
-            )
-        }
-    }
-}

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

@@ -1,115 +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.*
-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
-import kotlin.time.Duration.Companion.milliseconds
-
-@Composable
-fun Carousel(
-    itemCount: Int,
-    modifier: Modifier = Modifier,
-    loop: Boolean = false,
-    autoplay: Boolean = false,
-    autoplayInterval: Long = 3000L,
-    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 }
-
-    val realIndex: (Int) -> Int = { page -> page % itemCount }
-    val currentOnSnapToItem by rememberUpdatedState(onSnapToItem)
-    val currentOnScrollIndexChanged by rememberUpdatedState(onScrollIndexChanged)
-
-    var isUserScrolling by remember { mutableStateOf(false) }
-
-    if (autoplay && itemCount > 1) {
-        LaunchedEffect(autoplayInterval, isUserScrolling) {
-            if (isUserScrolling) return@LaunchedEffect
-            while (isActive) {
-                delay(autoplayInterval.milliseconds)
-                if (!isUserScrolling) {
-                    val nextPage = pagerState.currentPage + 1
-                    if (nextPage < virtualPageCount) {
-                        pagerState.animateScrollToPage(nextPage)
-                    }
-                }
-            }
-        }
-    }
-
-    LaunchedEffect(pagerState) {
-        snapshotFlow { pagerState.isScrollInProgress }.collect { scrolling ->
-            isUserScrolling = scrolling
-        }
-    }
-
-    LaunchedEffect(pagerState) {
-        snapshotFlow { pagerState.currentPage }.collect { page ->
-            val real = realIndex(page)
-            currentOnSnapToItem(real)
-            currentOnScrollIndexChanged(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)
-        }
-    }
-}

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

@@ -1,89 +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.Spacer
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-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.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.activeOpacityClickable
-import vn.momo.kits.modifier.conditional
-
-private val checkboxShape = RoundedCornerShape(Radius.XS)
-
-@Composable
-fun CheckBox(
-    disabled: Boolean = false,
-    checked: Boolean = false,
-    onCheckedChange: (Boolean) -> Unit,
-    indeterminate: Boolean = false,
-    title: String = "",
-) {
-    val theme = AppTheme.current
-
-    val colors = remember(checked, disabled, theme) {
-        when {
-            disabled && checked -> Pair(theme.colors.background.tonal, theme.colors.background.tonal)
-            disabled -> Pair(theme.colors.border.disable, Color.Transparent)
-            checked -> Pair(theme.colors.primary, theme.colors.primary)
-            else -> Pair(theme.colors.text.default, Color.Transparent)
-        }
-    }
-
-    val (borderColor, backgroundColor) = colors
-
-    val iconSource = remember(indeterminate) {
-        if (indeterminate) "navigation_minus" else "ic_checked"
-    }
-
-    val onClickHandler = remember(onCheckedChange, checked) {
-        { onCheckedChange(!checked) }
-    }
-
-    Row(verticalAlignment = Alignment.CenterVertically) {
-        Box(
-            modifier = Modifier
-                .size(20.dp)
-                .background(backgroundColor, checkboxShape)
-                .border(Spacing.XXS, borderColor, checkboxShape)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .activeOpacityClickable(
-                    activeOpacity = 0.8f,
-                    onClick = onClickHandler,
-                    enabled = !disabled,
-                ),
-        ) {
-            if (checked) {
-                Icon(
-                    source = iconSource,
-                    size = 20.dp,
-                    color = Colors.black_01
-                )
-            }
-        }
-
-        if (title.isNotEmpty()) {
-            Spacer(Modifier.size(Spacing.S))
-            Text(
-                style = Typography.descriptionDefaultRegular,
-                text = title,
-            )
-        }
-    }
-
-}

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

@@ -1,128 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.Immutable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-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.dp
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.*
-import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.modifier.conditional
-import vn.momo.kits.modifier.setAutomationId
-
-@Composable
-fun Chip(
-    modifier: Modifier = Modifier,
-    label: String? = "Label",
-    iconLeft: String? = null,
-    iconRight: String? = null,
-    selected: Boolean = false,
-    onClick: () -> Unit = {},
-    size: ChipSize = ChipSize.LARGE,
-    iconLeftTint: Color? = null,
-    iconRightTint: Color? = null,
-    backgroundColor: Color? = null,
-    accessibilityLabel: String? = null,
-) {
-    val theme = AppTheme.current
-    val bg = when {
-        selected -> theme.colors.background.selected
-        backgroundColor != null -> backgroundColor
-        else -> Colors.black_03
-    }
-
-    val textColor = if (selected) theme.colors.primary else theme.colors.text.default
-    val leftTint =  if (selected) theme.colors.primary else iconLeftTint ?: theme.colors.text.default
-    val rightTint = if (selected) theme.colors.primary else iconRightTint ?: theme.colors.text.default
-
-    val dims = when (size) {
-        ChipSize.SMALL -> ChipDefaults.Small
-        ChipSize.LARGE -> ChipDefaults.Large
-    }
-
-    val (height, horizontal, iconSize, iconSpacing) =
-        listOf(scaleSize(dims.height), scaleSize(dims.horizontal), scaleSize(dims.iconSize), scaleSize(dims.iconSpacing))
-
-    val radius = scaleSize(Radius.L)
-
-    Row(
-        modifier
-            .wrapContentWidth()
-            .height(height.dp)
-            .clip(RoundedCornerShape(radius))
-            .background(bg)
-            .conditional(selected) {
-                Modifier.border(width = 2.dp, color = theme.colors.secondary, shape = RoundedCornerShape(radius))
-            }
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .activeOpacityClickable {
-                onClick()
-            }
-            .padding(horizontal = horizontal.dp)
-            .conditional(accessibilityLabel != null) {
-                setAutomationId(accessibilityLabel.toString())
-            },
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(iconSpacing.dp)
-    ) {
-        if (iconLeft != null) {
-            Icon(source = iconLeft, size = iconSize.dp, color = leftTint)
-        }
-
-        if (!label.isNullOrEmpty()) {
-            Text(
-                text = label,
-                textAlign = TextAlign.Center,
-                color = textColor,
-                style = when (size) {
-                    ChipSize.SMALL -> Typography.labelSMedium
-                    ChipSize.LARGE -> Typography.labelDefaultMedium
-                },
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-                modifier = Modifier.weight(1f, fill = false),
-            )
-        }
-
-        if (iconRight != null) {
-            Icon(source = iconRight, size = iconSize.dp, color = rightTint)
-        }
-    }
-}
-
-enum class ChipSize { SMALL, LARGE }
-
-private object ChipDefaults {
-    @Immutable
-    data class Dimensions(
-        val height: Float,
-        val horizontal: Float,
-        val iconSize: Float,
-        val iconSpacing: Float,
-    )
-
-    val Large = Dimensions(
-        height = 32f,
-        horizontal = 12f,
-        iconSize = 20f,
-        iconSpacing = 4f,
-    )
-
-    val Small = Dimensions(
-        height = 24f,
-        horizontal = 10f,
-        iconSize = 16f,
-        iconSpacing = 4f,
-    )
-}