@momo-kits/native-kits 0.160.1-beta.4-debug → 0.160.1-beta.4

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

@@ -1,94 +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
-
-// Pre-computed shape for performance
-private val checkboxShape = RoundedCornerShape(Radius.XS)
-
-@Composable
-fun CheckBox(
-    disabled: Boolean = false,
-    checked: Boolean = false,
-    onCheckedChange: (Boolean) -> Unit,
-    indeterminate: Boolean = false,
-    title: String = "",
-) {
-    // Cache theme access
-    val theme = AppTheme.current
-
-    // Memoize color calculations to avoid repeated conditional logic
-    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
-
-    // Memoize icon source to avoid repeated conditional check
-    val iconSource = remember(indeterminate) {
-        if (indeterminate) "navigation_minus" else "ic_checked"
-    }
-
-    // Memoize click handler to avoid lambda recreation
-    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,136 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentWidth
-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.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Typography
-import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.scaleSize
-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 = dims.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 }
-
-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,
-    )
-}

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

@@ -1,224 +0,0 @@
-package vn.momo.kits.components
-
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.tween
-import androidx.compose.animation.expandVertically
-import androidx.compose.animation.shrinkVertically
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.rotate
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.TextStyle
-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
-import vn.momo.kits.modifier.setAutomationId
-
-enum class CollapseTitleSize {
-    Small, Medium, Large
-}
-
-@Composable
-fun Collapse(
-    title: String,
-    modifier: Modifier = Modifier,
-    description: String? = null,
-    image: String? = null,
-    imageSize: Int = 24,
-    subTitle: String? = null,
-    tagLabel: String? = null,
-    tagColor: TagColor = TagColor.Default,
-    showBorder: Boolean = false,
-    expandDefault: Boolean = false,
-    titleSize: CollapseTitleSize = CollapseTitleSize.Medium,
-    useBackgroundCollapseButton: Boolean = false,
-    backgroundColor: Color? = null,
-    titleColor: Color? = null,
-    onPress: ((isExpanded: Boolean) -> Unit)? = null,
-    accessibilityId: String? = null,
-    content: (@Composable () -> Unit)? = null,
-) {
-    val theme = AppTheme.current
-
-    var expanded by remember { mutableStateOf(expandDefault) }
-
-    val chevronRotation by animateFloatAsState(
-        targetValue = if (expanded) 180f else 0f,
-        animationSpec = tween(durationMillis = 300),
-        label = "chevronRotation"
-    )
-
-    val resolvedBackgroundColor = remember(backgroundColor, theme) {
-        backgroundColor ?: theme.colors.background.surface
-    }
-
-    val resolvedTitleStyle: TextStyle = remember(titleSize) {
-        when (titleSize) {
-            CollapseTitleSize.Small -> Typography.headerSSemibold
-            CollapseTitleSize.Medium -> Typography.headerDefaultBold
-            CollapseTitleSize.Large -> Typography.headerMBold
-        }
-    }
-
-    val borderShape = remember { RoundedCornerShape(Radius.S) }
-
-    val automationId = remember(accessibilityId, title) {
-        accessibilityId ?: "Collapse/$title"
-    }
-
-    Column(
-        modifier = modifier
-            .fillMaxWidth()
-            .clip(borderShape)
-            .background(resolvedBackgroundColor, shape = borderShape)
-            .conditional(showBorder) {
-                border(
-                    width = 1.dp,
-                    color = theme.colors.border.default,
-                    shape = borderShape
-                )
-            }
-            .conditional(IsShowBaseLineDebug) {
-                border(1.dp, Colors.blue_03)
-            }
-            .setAutomationId(automationId)
-    ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .activeOpacityClickable {
-                    onPress?.invoke(expanded)
-                    expanded = !expanded
-                }
-                .padding(horizontal = Spacing.M, vertical = Spacing.S)
-                .setAutomationId("$automationId|touch"),
-            verticalAlignment = Alignment.Top
-        ) {
-            if (image != null) {
-                Image(
-                    source = image,
-                    modifier = Modifier
-                        .size(imageSize.dp)
-                        .clip(RoundedCornerShape(Radius.XS))
-                        .setAutomationId("$automationId|img")
-                )
-                Spacer(modifier = Modifier.width(Spacing.S))
-            }
-
-            Column(modifier = Modifier.weight(1f)) {
-                Text(
-                    text = title,
-                    style = resolvedTitleStyle,
-                    color = titleColor ?: theme.colors.text.default,
-                    accessibilityId = "$automationId|text"
-                )
-                if (description != null) {
-                    Text(
-                        text = description,
-                        style = Typography.bodyDefaultRegular,
-                        color = theme.colors.text.secondary,
-                        maxLines = 2,
-                        accessibilityId = "$automationId|description-text"
-                    )
-                }
-            }
-
-            val hasInfo = subTitle != null || tagLabel != null
-            if (hasInfo) {
-                Spacer(modifier = Modifier.width(Spacing.S))
-                Box(contentAlignment = Alignment.CenterEnd) {
-                    if (subTitle != null) {
-                        Text(
-                            text = subTitle,
-                            style = Typography.bodyDefaultRegular,
-                            color = theme.colors.text.secondary,
-                            maxLines = 1,
-                            accessibilityId = "$automationId|sub-title-text"
-                        )
-                    } else if (tagLabel != null) {
-                        Tag(
-                            label = tagLabel,
-                            color = tagColor
-                        )
-                    }
-                }
-            }
-
-            Spacer(modifier = Modifier.width(Spacing.S))
-            if (useBackgroundCollapseButton) {
-                Box(
-                    modifier = Modifier
-                        .size(24.dp)
-                        .background(
-                            color = theme.colors.background.tonal,
-                            shape = RoundedCornerShape(Radius.M)
-                        ),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Icon(
-                        source = "arrow_chevron_down_small",
-                        size = 16.dp,
-                        color = theme.colors.primary,
-                        modifier = Modifier
-                            .rotate(chevronRotation)
-                            .setAutomationId("$automationId|icon")
-                    )
-                }
-            } else {
-                Icon(
-                    source = "arrow_chevron_down_small",
-                    size = 24.dp,
-                    color = theme.colors.text.default,
-                    modifier = Modifier
-                        .rotate(chevronRotation)
-                        .setAutomationId("$automationId|icon")
-                )
-            }
-        }
-
-        if (content != null) {
-            AnimatedVisibility(
-                visible = expanded,
-                enter = expandVertically(animationSpec = tween(durationMillis = 300)),
-                exit = shrinkVertically(animationSpec = tween(durationMillis = 300))
-            ) {
-                Column(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .conditional(showBorder) {
-                            border(
-                                width = 1.dp,
-                                color = theme.colors.border.default
-                            )
-                        }
-                ) {
-                    content()
-                }
-            }
-        }
-    }
-}