@momo-kits/native-kits 0.167.1-beta.10-debug → 0.167.1-beta.11

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

@@ -1,473 +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.CircleShape
-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.text.style.TextAlign
-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.activeOpacityClickable
-import vn.momo.kits.modifier.conditional
-
-
-data class StepItem(
-    val title: String,
-    val description: String? = null,
-    val error: Boolean = false,
-    val time: String? = null,
-)
-
-
-enum class StepsSize { SMALL, LARGE }
-
-enum class StepsAlign { LEFT, RIGHT, CENTER, STRETCH }
-
-
-private enum class StepStatus { INCOMPLETE, CURRENT, COMPLETED, ERROR, DISABLED }
-
-private fun resolveStatus(
-    activeIndex: Int,
-    currentIndex: Int,
-    error: Boolean,
-    disabled: Boolean,
-): StepStatus = when {
-    disabled -> StepStatus.DISABLED
-    error -> StepStatus.ERROR
-    activeIndex == currentIndex -> StepStatus.CURRENT
-    activeIndex > currentIndex -> StepStatus.COMPLETED
-    else -> StepStatus.INCOMPLETE
-}
-
-
-@Composable
-private fun resolveIconBgAndBorder(status: StepStatus): Pair<Color, Color> {
-    val theme = AppTheme.current
-    return when (status) {
-        StepStatus.CURRENT, StepStatus.COMPLETED ->
-            theme.colors.primary to theme.colors.background.tonal
-        StepStatus.ERROR ->
-            theme.colors.error.primary to theme.colors.error.container
-        StepStatus.DISABLED ->
-            Colors.pink_08 to Colors.pink_10
-        StepStatus.INCOMPLETE ->
-            Colors.black_06 to theme.colors.border.default
-    }
-}
-
-@Composable
-private fun resolveTitleColor(status: StepStatus): Color {
-    val theme = AppTheme.current
-    return when (status) {
-        StepStatus.CURRENT -> theme.colors.primary
-        StepStatus.ERROR -> theme.colors.error.primary
-        StepStatus.DISABLED -> theme.colors.text.disable
-        else -> theme.colors.text.default
-    }
-}
-
-@Composable
-private fun StepBubble(
-    index: Int,
-    isActive: Boolean,
-    error: Boolean,
-    size: StepsSize,
-    status: StepStatus,
-    useNumber: Boolean,
-    customIcon: String?,
-    modifier: Modifier = Modifier,
-) {
-    val bubbleSize: Dp = if (size == StepsSize.SMALL) 16.dp else 24.dp
-    val innerSize: Dp = if (size == StepsSize.SMALL) 12.dp else 16.dp
-    val dotSize: Dp = if (size == StepsSize.SMALL) 6.dp else 8.dp
-
-    val (bgColor, borderColor) = resolveIconBgAndBorder(status)
-
-    Box(
-        modifier = modifier
-            .size(bubbleSize)
-            .background(color = bgColor, shape = CircleShape)
-            .border(width = 2.dp, color = borderColor, shape = CircleShape)
-            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
-        contentAlignment = Alignment.Center,
-    ) {
-        when {
-            useNumber -> {
-                Text(
-                    text = (index + 1).toString(),
-                    style = Typography.headerXsSemibold,
-                    color = Colors.black_01,
-                )
-            }
-            isActive -> {
-                if (!customIcon.isNullOrEmpty()) {
-                    Icon(
-                        source = customIcon,
-                        size = innerSize,
-                        color = Colors.black_01,
-                    )
-                } else {
-                    // current-step dot (white circle matching RN currIcon style)
-                    Box(
-                        modifier = Modifier
-                            .size(dotSize)
-                            .background(color = Colors.black_01, shape = CircleShape),
-                    )
-                }
-            }
-            else -> {
-                Icon(
-                    source = if (error) "navigation_close" else "notifications_check",
-                    size = innerSize,
-                    color = Colors.black_01,
-                )
-            }
-        }
-    }
-}
-
-
-@Composable
-private fun StepsHorizontal(
-    steps: List<StepItem>,
-    activeIndex: Int,
-    size: StepsSize,
-    useNumber: Boolean,
-    align: StepsAlign,
-    customIcon: String?,
-    disabled: Boolean,
-    onPress: ((StepItem, Int) -> Unit)?,
-) {
-    val theme = AppTheme.current
-    // completed-line colour is primary at 20 % opacity (mirrors RN primary + '33')
-    val completedLine = remember(theme.colors.primary) { theme.colors.primary.copy(alpha = 0.2f) }
-    val defaultLine = theme.colors.background.default
-
-    Row(modifier = Modifier.fillMaxWidth()) {
-        steps.forEachIndexed { index, item ->
-            val status = resolveStatus(activeIndex, index, item.error, disabled)
-            val isActiveOrError = status == StepStatus.CURRENT || status == StepStatus.ERROR
-
-            // Horizontal always uses the xs/description typography scale (checkSizeAndStepType=true)
-            val currentTitleStyle = if (isActiveOrError)
-                Typography.headerXsSemibold else Typography.descriptionDefaultRegular
-            val currentDescStyle = if (size == StepsSize.SMALL)
-                Typography.descriptionXsRegular else Typography.descriptionDefaultRegular
-
-            val titleColor = resolveTitleColor(status)
-            val subColor = if (disabled) theme.colors.text.disable else theme.colors.text.hint
-
-            val colAlign = when (align) {
-                StepsAlign.LEFT -> Alignment.Start
-                StepsAlign.RIGHT -> Alignment.End
-                StepsAlign.STRETCH -> when (index) {
-                    0 -> Alignment.Start
-                    steps.size - 1 -> Alignment.End
-                    else -> Alignment.CenterHorizontally
-                }
-                StepsAlign.CENTER -> Alignment.CenterHorizontally
-            }
-            val textAlign = when (align) {
-                StepsAlign.LEFT -> TextAlign.Start
-                StepsAlign.RIGHT -> TextAlign.End
-                StepsAlign.STRETCH -> when (index) {
-                    0 -> TextAlign.Start
-                    steps.size - 1 -> TextAlign.End
-                    else -> TextAlign.Center
-                }
-                StepsAlign.CENTER -> TextAlign.Center
-            }
-
-            val hideLineLeft = align == StepsAlign.LEFT ||
-                    (align == StepsAlign.STRETCH && index == 0)
-            val hideLineRight = align == StepsAlign.RIGHT ||
-                    (align == StepsAlign.STRETCH && index == steps.size - 1)
-
-            val lineLeft = when {
-                index == 0 -> Color.Transparent
-                activeIndex >= index -> completedLine
-                else -> defaultLine
-            }
-            val lineRight = when {
-                index == steps.size - 1 -> Color.Transparent
-                activeIndex > index -> completedLine
-                else -> defaultLine
-            }
-
-            val clickable = status == StepStatus.COMPLETED && onPress != null && !disabled
-
-            Column(
-                modifier = Modifier
-                    .weight(1f)
-                    .then(
-                        if (clickable) Modifier.activeOpacityClickable { onPress.invoke(item, index) }
-                        else Modifier
-                    ),
-                horizontalAlignment = colAlign,
-            ) {
-                // time label shown above the icon row
-                if (!item.time.isNullOrEmpty()) {
-                    Text(
-                        text = item.time,
-                        style = Typography.descriptionXsRegular,
-                        color = subColor,
-                        textAlign = textAlign,
-                    )
-                } else {
-                    Spacer(modifier = Modifier.height(0.dp))
-                }
-
-                // icon row with horizontal connector lines
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                    modifier = Modifier.fillMaxWidth(),
-                ) {
-                    if (!hideLineLeft) {
-                        Box(
-                            modifier = Modifier
-                                .weight(1f)
-                                .height(2.dp)
-                                .background(
-                                    color = lineLeft,
-                                    shape = RoundedCornerShape(
-                                        topEnd = Radius.XS,
-                                        bottomEnd = Radius.XS,
-                                    ),
-                                ),
-                        )
-                    }
-                    StepBubble(
-                        index = index,
-                        isActive = activeIndex == index,
-                        error = item.error,
-                        size = size,
-                        status = status,
-                        useNumber = useNumber,
-                        customIcon = customIcon,
-                        modifier = Modifier.padding(
-                            start = if (!hideLineLeft) Spacing.XS else 0.dp,
-                            end = if (!hideLineRight) Spacing.XS else 0.dp,
-                            top = Spacing.XS,
-                            bottom = Spacing.XS,
-                        ),
-                    )
-                    if (!hideLineRight) {
-                        Box(
-                            modifier = Modifier
-                                .weight(1f)
-                                .height(2.dp)
-                                .background(
-                                    color = lineRight,
-                                    shape = RoundedCornerShape(
-                                        topStart = Radius.XS,
-                                        bottomStart = Radius.XS,
-                                    ),
-                                ),
-                        )
-                    }
-                }
-
-                if (item.title.isNotEmpty()) {
-                    Text(
-                        text = item.title,
-                        style = currentTitleStyle,
-                        color = titleColor,
-                        textAlign = textAlign,
-                        modifier = Modifier.padding(bottom = Spacing.XXS),
-                    )
-                }
-
-                if (!item.description.isNullOrEmpty()) {
-                    Text(
-                        text = item.description,
-                        style = currentDescStyle,
-                        color = subColor,
-                        textAlign = textAlign,
-                    )
-                }
-            }
-        }
-    }
-}
-
-
-@Composable
-private fun StepsVertical(
-    steps: List<StepItem>,
-    activeIndex: Int,
-    size: StepsSize,
-    useNumber: Boolean,
-    customIcon: String?,
-    disabled: Boolean,
-    onPress: ((StepItem, Int) -> Unit)?,
-) {
-    val theme = AppTheme.current
-    val completedLine = remember(theme.colors.primary) { theme.colors.primary.copy(alpha = 0.2f) }
-    val defaultLine = theme.colors.background.default
-    val useSmall = size == StepsSize.SMALL
-    // Fixed connector height; grows proportionally with content in practice
-    val connectorHeight: Dp = if (useSmall) 24.dp else 32.dp
-
-    Column(modifier = Modifier.fillMaxWidth()) {
-        steps.forEachIndexed { index, item ->
-            val status = resolveStatus(activeIndex, index, item.error, disabled)
-            val isActiveOrError = status == StepStatus.CURRENT || status == StepStatus.ERROR
-            val isLast = index == steps.size - 1
-
-            // Vertical large: header_s / body; vertical small: header_xs / description
-            val currentTitleStyle = if (isActiveOrError) {
-                if (useSmall) Typography.headerXsSemibold else Typography.headerSSemibold
-            } else {
-                if (useSmall) Typography.descriptionDefaultRegular else Typography.bodyDefaultRegular
-            }
-            val currentDescStyle = if (useSmall)
-                Typography.descriptionXsRegular else Typography.descriptionDefaultRegular
-
-            val titleColor = resolveTitleColor(status)
-            val subColor = if (disabled) theme.colors.text.disable else theme.colors.text.hint
-            val lineColor = if (activeIndex > index) completedLine else defaultLine
-
-            val clickable = status == StepStatus.COMPLETED && onPress != null && !disabled
-
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .then(
-                        if (clickable) Modifier.activeOpacityClickable { onPress.invoke(item, index) }
-                        else Modifier
-                    ),
-            ) {
-                // Left column: bubble + vertical connector line
-                Column(
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    modifier = Modifier.padding(end = Spacing.M),
-                ) {
-                    StepBubble(
-                        index = index,
-                        isActive = activeIndex == index,
-                        error = item.error,
-                        size = size,
-                        status = status,
-                        useNumber = useNumber,
-                        customIcon = customIcon,
-                    )
-                    if (!isLast) {
-                        Box(
-                            modifier = Modifier
-                                .width(2.dp)
-                                .height(connectorHeight)
-                                .padding(vertical = Spacing.XS)
-                                .background(color = lineColor),
-                        )
-                    }
-                }
-
-                // Right column: title + time on the same row, description below
-                Column(
-                    modifier = Modifier
-                        .weight(1f)
-                        .padding(bottom = if (isLast) 0.dp else Spacing.S),
-                ) {
-                    Row(
-                        modifier = Modifier.fillMaxWidth(),
-                        horizontalArrangement = Arrangement.SpaceBetween,
-                        verticalAlignment = Alignment.Top,
-                    ) {
-                        Text(
-                            text = item.title,
-                            style = currentTitleStyle,
-                            color = titleColor,
-                            maxLines = 2,
-                            modifier = Modifier
-                                .weight(1f)
-                                .padding(end = Spacing.S),
-                        )
-                        if (!item.time.isNullOrEmpty()) {
-                            Text(
-                                text = item.time,
-                                style = Typography.descriptionXsRegular,
-                                color = subColor,
-                            )
-                        }
-                    }
-                    if (!item.description.isNullOrEmpty()) {
-                        Spacer(modifier = Modifier.height(Spacing.XXS))
-                        Text(
-                            text = item.description,
-                            style = currentDescStyle,
-                            color = subColor,
-                        )
-                    }
-                }
-            }
-        }
-    }
-}
-
-// ─── Public API ────────────────────────────────────────────────────────────────
-
-/**
- * Steps — guided progress indicator through a sequence of procedural steps.
- *
- * Mirrors the React Native `Steps` component from `@momo-kits/step`.
- *
- * @param steps       Ordered list of [StepItem] values to display.
- * @param activeIndex Zero-based index of the currently active step.
- * @param modifier    Modifier applied to the outermost container.
- * @param horizontal  `true` renders a horizontal layout; defaults to vertical.
- * @param size        [StepsSize.SMALL] or [StepsSize.LARGE] — affects bubble and typography scale.
- * @param useNumber   Shows the 1-based step number inside the bubble instead of a check/dot icon.
- * @param align       Text and icon alignment in horizontal mode: LEFT, RIGHT, CENTER, or STRETCH.
- * @param customIcon  Icon source name rendered inside the active-step bubble (replaces the dot).
- * @param disabled    Dims all steps and suppresses all press callbacks.
- * @param onPress     Invoked with the tapped [StepItem] and its index; only fires for completed steps.
- */
-@Composable
-fun Steps(
-    steps: List<StepItem>,
-    activeIndex: Int,
-    modifier: Modifier = Modifier,
-    horizontal: Boolean = false,
-    size: StepsSize = StepsSize.LARGE,
-    useNumber: Boolean = false,
-    align: StepsAlign = StepsAlign.CENTER,
-    customIcon: String? = null,
-    disabled: Boolean = false,
-    onPress: ((StepItem, Int) -> Unit)? = null,
-) {
-    Box(
-        modifier = modifier
-            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
-    ) {
-        if (horizontal) {
-            StepsHorizontal(
-                steps = steps,
-                activeIndex = activeIndex,
-                size = size,
-                useNumber = useNumber,
-                align = align,
-                customIcon = customIcon,
-                disabled = disabled,
-                onPress = onPress,
-            )
-        } else {
-            StepsVertical(
-                steps = steps,
-                activeIndex = activeIndex,
-                size = size,
-                useNumber = useNumber,
-                customIcon = customIcon,
-                disabled = disabled,
-                onPress = onPress,
-            )
-        }
-    }
-}

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

@@ -1,122 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-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.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.withStyle
-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.shadow
-
-@Composable
-fun SuggestAction(
-    message: String,
-    buttonTitle: String,
-    boldMessage: String = "",
-    image: String = "",
-    visible: Boolean = false,
-    onClose: () -> Unit = {},
-    onPressButton: () -> Unit = {},
-    modifier: Modifier = Modifier,
-) {
-    val theme = AppTheme.current
-
-    AnimatedVisibility(
-        visible = visible,
-        enter = fadeIn(),
-        exit = fadeOut(),
-        modifier = modifier,
-    ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .shadow(
-                    color = theme.colors.text.default.copy(alpha = 0.12f),
-                    borderRadius = Radius.S,
-                    blurRadius = 16f,
-                    offsetY = 4.dp,
-                )
-                .clip(RoundedCornerShape(Radius.S))
-                .background(
-                    color = theme.colors.background.surface,
-                    shape = RoundedCornerShape(Radius.S),
-                )
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .padding(Spacing.M),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            if (image.isNotEmpty()) {
-                Image(
-                    source = image,
-                    modifier = Modifier
-                        .size(32.dp)
-                        .clip(RoundedCornerShape(Radius.XS)),
-                )
-                Spacer(modifier = Modifier.width(Spacing.S))
-            }
-
-            val annotatedMessage = remember(message, boldMessage) {
-                if (boldMessage.isNotEmpty()) {
-                    val index = message.lowercase().indexOf(boldMessage.lowercase())
-                    if (index != -1) {
-                        buildAnnotatedString {
-                            append(message.substring(0, index))
-                            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
-                                append(message.substring(index, index + boldMessage.length))
-                            }
-                            append(message.substring(index + boldMessage.length))
-                        }
-                    } else {
-                        buildAnnotatedString { append(message) }
-                    }
-                } else {
-                    buildAnnotatedString { append(message) }
-                }
-            }
-
-            Text(
-                text = annotatedMessage,
-                style = Typography.bodyDefaultRegular,
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(end = Spacing.M),
-            )
-
-            Button(
-                title = buttonTitle,
-                type = ButtonType.TONAL,
-                size = Size.SMALL,
-                isFull = false,
-                onClick = {
-                    onPressButton()
-                },
-            )
-
-            Spacer(modifier = Modifier.width(Spacing.S))
-
-            Icon(
-                source = "navigation_close",
-                size = 24.dp,
-                color = theme.colors.text.default,
-                modifier = Modifier.activeOpacityClickable { onClose() },
-            )
-        }
-    }
-}