@momo-kits/native-kits 0.162.6-debug → 0.163.1-beta.1-debug

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

@@ -18,6 +18,8 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.*
 import vn.momo.kits.modifier.conditional
 
+// ─── Data model ───────────────────────────────────────────────────────────────
+
 data class ProgressInfoItem(
     val title: String,
     val description: String? = null,
@@ -27,6 +29,25 @@ enum class ProgressInfoSize { Small, Large }
 
 enum class ProgressInfoAlign { Left, Right, Center, Stretch }
 
+// ─── Public entry-point ───────────────────────────────────────────────────────
+
+/**
+ * Display-only step progress indicator migrated from the React Native ProgressInfo component.
+ *
+ * @param steps           Ordered list of steps; each has a [ProgressInfoItem.title] and an
+ *                        optional [ProgressInfoItem.description].
+ * @param horizontal      When `true` renders steps in a horizontal row with connector lines;
+ *                        when `false` (default) renders a vertical column.
+ * @param size            Icon diameter: [ProgressInfoSize.Small] = 16 dp,
+ *                        [ProgressInfoSize.Large] = 24 dp (default).
+ * @param useNumber       Show the 1-based step index inside the icon instead of the default dot.
+ * @param align           Alignment of icon + text for the horizontal variant.
+ * @param showTitle       Whether step titles are rendered (default `true`).
+ * @param showDescription Whether step descriptions are rendered (default `true`).
+ * @param customIcon      Icon source key rendered inside each step circle (overrides the dot;
+ *                        itself overridden by [useNumber]).
+ * @param modifier        Modifier applied to the root layout.
+ */
 @Composable
 fun ProgressInfo(
     steps: List<ProgressInfoItem>,
@@ -63,6 +84,8 @@ fun ProgressInfo(
     }
 }
 
+// ─── Horizontal variant ───────────────────────────────────────────────────────
+
 @Composable
 private fun ProgressInfoHorizontal(
     steps: List<ProgressInfoItem>,
@@ -167,6 +190,7 @@ private fun ProgressInfoHorizontal(
     }
 }
 
+// ─── Vertical variant ─────────────────────────────────────────────────────────
 
 @Composable
 private fun ProgressInfoVertical(
@@ -251,6 +275,8 @@ private fun ProgressInfoVertical(
     }
 }
 
+// ─── Step icon ────────────────────────────────────────────────────────────────
+
 @Composable
 private fun ProgressInfoStepIcon(
     index: Int,
@@ -300,6 +326,8 @@ private fun ProgressInfoStepIcon(
     }
 }
 
+// ─── Horizontal connector line ────────────────────────────────────────────────
+
 @Composable
 private fun ProgressInfoHorizontalLine(modifier: Modifier = Modifier) {
     Box(

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

@@ -1,15 +1,26 @@
 package vn.momo.kits.components
 
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+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.draw.clip
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.*
+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
 

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

@@ -0,0 +1,17 @@
+package vn.momo.kits.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import vn.momo.kits.application.ScaleSizeMaxRate
+
+@Composable
+fun ScaleSizeScope(
+    scaleSizeMaxRate: Float? = null,
+    content: @Composable () -> Unit
+) {
+    CompositionLocalProvider(
+        ScaleSizeMaxRate provides scaleSizeMaxRate,
+    ) {
+        content()
+    }
+}

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

@@ -1,8 +1,11 @@
 package vn.momo.kits.components
 
-import vn.momo.kits.modifier.InternalApi
-
-import androidx.compose.animation.core.*
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
@@ -19,17 +22,21 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
 import vn.momo.kits.modifier.conditional
 
+// Pre-computed shimmer colors to avoid repeated list creation
 private val shimmerColors = listOf(
     Colors.black_05,
     Colors.black_03,
     Colors.black_05,
 )
+
+// Constants for better performance
 private const val SHADOW_BRUSH_PERCENTAGE = 0.6f
 private const val DEFAULT_DURATION_MILLIS = 1000
 
 @Composable
 fun Skeleton() {
     BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
+        // Memoize width calculation
         val maxWidthValue = remember(maxWidth) { maxWidth.value.toInt() }
 
         Box(
@@ -45,7 +52,6 @@ fun Skeleton() {
 }
 
 @Composable
-@InternalApi
 fun Modifier.shimmerLoadingAnimation(
     maxWidth: Int,
     angleOfAxisY: Float = 0f,

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

@@ -4,12 +4,25 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+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.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+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.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
@@ -17,12 +30,19 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.*
+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.modifier.shadow
 import kotlin.math.abs
 import kotlin.math.min
 import kotlin.math.roundToInt
 
+// ── Design constants ─────────────────────────────────────────────────────────
+
 private val THUMB_SIZE         = 20.dp
 private val THUMB_BORDER       = 3.dp
 private val TRACK_HEIGHT       = 4.dp
@@ -30,10 +50,15 @@ private val LABEL_PAD_H        = Spacing.XS
 private val LABEL_PAD_V        = Spacing.XXS
 private val LABEL_GAP          = Spacing.XS   // space between label and thumb top
 
+// ── Pure helpers (mirrors RN helpers.ts) ─────────────────────────────────────
 
 private fun clamp(value: Float, min: Float, max: Float): Float =
     min(kotlin.math.max(value, min), max)
 
+/**
+ * Converts a raw touch position into a snapped slider value.
+ * Direct port of RN getValueForPosition().
+ */
 private fun getValueForPosition(
     positionInView: Float,
     containerWidth: Float,

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

@@ -2,12 +2,21 @@ package vn.momo.kits.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.runtime.*
+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.graphics.Color
@@ -18,10 +27,18 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.*
+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.scaleSize
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
 
+// ---------------------------------------------------------------------------
+// Size variant
+// ---------------------------------------------------------------------------
+
 enum class StepperSize {
     LARGE,
     SMALL
@@ -49,6 +66,10 @@ private val stepperSizeSpecs: Map<StepperSize, StepperSizeSpec> = mapOf(
     ),
 )
 
+// ---------------------------------------------------------------------------
+// Private sub-composables
+// ---------------------------------------------------------------------------
+
 @Composable
 private fun StepperButton(
     sign: String = "+",
@@ -136,6 +157,26 @@ private fun StepperNumberView(
     }
 }
 
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Stepper — migrated from React Native Stepper.
+ *
+ * Layout: [− button] [value display] [+ button]
+ *
+ * @param defaultValue  Initial value (default 0). Clamped to [min]..[max] on first composition.
+ * @param min           Minimum allowed value (default 0). Minus button is auto-disabled at this bound.
+ * @param max           Maximum allowed value (default 100). Plus button is auto-disabled at this bound.
+ * @param step          Amount added/subtracted per button press (default 1).
+ * @param disabled      Disable state. Pass `true` to disable everything, or a [BooleanArray] of
+ *                      size >= 2 where index 0 = minus button, index 1 = plus button.
+ * @param size          Visual size variant: [StepperSize.LARGE] (default) or [StepperSize.SMALL].
+ * @param editable      When `true` the number display becomes a direct keyboard input (default false).
+ * @param onValueChange Callback invoked with the new [Int] value on every change.
+ * @param modifier      Modifier applied to the root [Row].
+ */
 @Composable
 fun Stepper(
     defaultValue: Int = 0,
@@ -162,19 +203,17 @@ fun Stepper(
     val disabledPlus: Boolean
     val disabledNumber: Boolean
 
-    when (disabled) {
-        is BooleanArray if disabled.size >= 2 -> {
+    when {
+        disabled is BooleanArray && disabled.size >= 2 -> {
             disabledMinus = disabled[0]
             disabledPlus = disabled[1]
             disabledNumber = disabled[0] && disabled[1]
         }
-
-        is Boolean if disabled -> {
+        disabled is Boolean && disabled -> {
             disabledMinus = true
             disabledPlus = true
             disabledNumber = true
         }
-
         else -> {
             disabledMinus = false
             disabledPlus = false

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

@@ -2,7 +2,16 @@ package vn.momo.kits.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -14,10 +23,15 @@ 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.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
 
+// ─── Data model ────────────────────────────────────────────────────────────────
 
 data class StepItem(
     val title: String,
@@ -26,11 +40,13 @@ data class StepItem(
     val time: String? = null,
 )
 
+// ─── Enumerations ──────────────────────────────────────────────────────────────
 
 enum class StepsSize { SMALL, LARGE }
 
 enum class StepsAlign { LEFT, RIGHT, CENTER, STRETCH }
 
+// ─── Internal status ───────────────────────────────────────────────────────────
 
 private enum class StepStatus { INCOMPLETE, CURRENT, COMPLETED, ERROR, DISABLED }
 
@@ -47,6 +63,7 @@ private fun resolveStatus(
     else -> StepStatus.INCOMPLETE
 }
 
+// ─── Color helpers ─────────────────────────────────────────────────────────────
 
 @Composable
 private fun resolveIconBgAndBorder(status: StepStatus): Pair<Color, Color> {
@@ -74,6 +91,8 @@ private fun resolveTitleColor(status: StepStatus): Color {
     }
 }
 
+// ─── Step bubble ───────────────────────────────────────────────────────────────
+
 @Composable
 private fun StepBubble(
     index: Int,
@@ -134,6 +153,7 @@ private fun StepBubble(
     }
 }
 
+// ─── Horizontal layout ─────────────────────────────────────────────────────────
 
 @Composable
 private fun StepsHorizontal(
@@ -208,7 +228,7 @@ private fun StepsHorizontal(
                 modifier = Modifier
                     .weight(1f)
                     .then(
-                        if (clickable) Modifier.activeOpacityClickable { onPress.invoke(item, index) }
+                        if (clickable) Modifier.activeOpacityClickable { onPress?.invoke(item, index) }
                         else Modifier
                     ),
                 horizontalAlignment = colAlign,
@@ -298,6 +318,7 @@ private fun StepsHorizontal(
     }
 }
 
+// ─── Vertical layout ───────────────────────────────────────────────────────────
 
 @Composable
 private fun StepsVertical(
@@ -341,7 +362,7 @@ private fun StepsVertical(
                 modifier = Modifier
                     .fillMaxWidth()
                     .then(
-                        if (clickable) Modifier.activeOpacityClickable { onPress.invoke(item, index) }
+                        if (clickable) Modifier.activeOpacityClickable { onPress?.invoke(item, index) }
                         else Modifier
                     ),
             ) {

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

@@ -5,7 +5,12 @@ 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.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.remember
@@ -18,7 +23,11 @@ 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.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.shadow

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

@@ -5,7 +5,14 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.gestures.detectHorizontalDragGestures
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -23,6 +30,8 @@ import kotlinx.coroutines.launch
 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
@@ -89,6 +98,13 @@ fun Swipe(
         }
     }
 
+    fun close() {
+        scope.launch {
+            offsetX.animateTo(0f, tween(200))
+            onSwipeableClose()
+        }
+    }
+
     Box(
         modifier = modifier
             .fillMaxWidth()

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

@@ -3,7 +3,11 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+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.remember
@@ -18,6 +22,7 @@ import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
 
+// Pre-computed shapes to avoid repeated creation
 private val switchShape = RoundedCornerShape(20.dp)
 private val circleShape = RoundedCornerShape(percent = 100)