@momo-kits/native-kits 0.157.1-com.1-debug → 0.157.1-com.1

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

@@ -1,96 +0,0 @@
-package vn.momo.kits.components
-
-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
-import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.unit.dp
-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(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(Colors.black_05)
-                .conditional(IsShowBaseLineDebug) {
-                    border(1.dp, Colors.blue_03)
-                }
-                .shimmerLoadingAnimation(maxWidth = maxWidthValue)
-        )
-    }
-}
-
-@Composable
-fun Modifier.shimmerLoadingAnimation(
-    maxWidth: Int,
-    angleOfAxisY: Float = 0f,
-    durationMillis: Int = DEFAULT_DURATION_MILLIS,
-): Modifier {
-    // Memoize calculations to avoid repeated computations
-    val widthOfShadowBrush = remember(maxWidth) {
-        (maxWidth * SHADOW_BRUSH_PERCENTAGE).toInt()
-    }
-
-    val animationTarget = remember(durationMillis, widthOfShadowBrush) {
-        (durationMillis + widthOfShadowBrush).toFloat()
-    }
-
-    val transition = rememberInfiniteTransition(label = "shimmer")
-    val translateAnimation = transition.animateFloat(
-        initialValue = 0f,
-        targetValue = animationTarget,
-        animationSpec = infiniteRepeatable(
-            animation = tween(
-                durationMillis = durationMillis,
-                easing = LinearEasing,
-            ),
-            repeatMode = RepeatMode.Restart,
-        ),
-        label = "shimmerTranslate"
-    )
-
-    return drawBehind {
-        // Memoize brush creation by using remember in the calling composable
-        val startX = translateAnimation.value - widthOfShadowBrush
-        val endX = translateAnimation.value
-
-        drawRect(
-            brush = Brush.linearGradient(
-                colors = shimmerColors,
-                start = Offset(x = startX, y = 0f),
-                end = Offset(x = endX, y = angleOfAxisY)
-            )
-        )
-    }
-}

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

@@ -1,360 +0,0 @@
-package vn.momo.kits.components
-
-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.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.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
-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.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
-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,
-    thumbWidth: Float,
-    min: Float,
-    max: Float,
-    step: Float,
-): Float {
-    val availableSpace = containerWidth - thumbWidth
-    if (availableSpace <= 0f) return min
-    val relStepUnit = step / (max - min)
-    var relPosition = (positionInView - thumbWidth / 2f) / availableSpace
-    val relOffset = relPosition % relStepUnit
-    relPosition -= relOffset
-    if (relOffset / relStepUnit >= 0.5f) relPosition += relStepUnit
-    return clamp(min + (relPosition / relStepUnit).roundToInt() * step, min, max)
-}
-
-/** Direct port of RN isLowCloser(). */
-private fun isLowCloser(downX: Float, lowPosition: Float, highPosition: Float): Boolean {
-    if (lowPosition == highPosition) return downX < lowPosition
-    return abs(downX - lowPosition) < abs(downX - highPosition)
-}
-
-private fun valueToFraction(value: Float, min: Float, max: Float): Float {
-    if (max == min) return 0f
-    return clamp((value - min) / (max - min), 0f, 1f)
-}
-
-private fun formatLabel(value: Float): String =
-    if (value == value.toLong().toFloat()) value.toLong().toString()
-    else ((value * 10).toLong() / 10.0).toString()
-
-// ── Component ─────────────────────────────────────────────────────────────────
-
-/**
- * Range slider (or single-thumb when [disableRange] = true), migrated from React Native.
- *
- * @param min               Minimum selectable value.
- * @param max               Maximum selectable value.
- * @param step              Snap increment between values.
- * @param modifier          Modifier applied to the root container.
- * @param low               Initial lower-thumb value (defaults to [min]).
- * @param high              Initial upper-thumb value (defaults to [max]).
- * @param minRange          Minimum required gap between low and high (default 0).
- * @param disableRange      When true only the low thumb is shown (single-value mode).
- * @param floatingLabel     When true a value label floats above the active thumb during drag.
- * @param disabled          Non-interactive; rendered in the disabled colour.
- * @param onValueChanged    Invoked with (low, high, byUser) on every value change.
- * @param onSliderTouchStart Invoked when a drag gesture begins.
- * @param onSliderTouchEnd   Invoked when a drag gesture ends.
- */
-@Composable
-fun Slider(
-    min: Float,
-    max: Float,
-    step: Float,
-    modifier: Modifier = Modifier,
-    low: Float? = null,
-    high: Float? = null,
-    minRange: Float = 0f,
-    disableRange: Boolean = false,
-    floatingLabel: Boolean = false,
-    disabled: Boolean = false,
-    onValueChanged: (low: Float, high: Float, byUser: Boolean) -> Unit = { _, _, _ -> },
-    onSliderTouchStart: (low: Float, high: Float) -> Unit = { _, _ -> },
-    onSliderTouchEnd: (low: Float, high: Float) -> Unit = { _, _ -> },
-) {
-    val theme = AppTheme.current
-    val density = LocalDensity.current
-
-    // Validated, step-snapped initial values
-    val initLow = remember(low, min, max, step) {
-        clamp(low ?: min, min, max)
-    }
-    val initHigh = remember(high, min, max, step, disableRange) {
-        if (disableRange) max else clamp(high ?: max, min, max)
-    }
-
-    var lowValue  by remember { mutableFloatStateOf(initLow) }
-    var highValue by remember { mutableFloatStateOf(initHigh) }
-
-    // Smoothly animated display fractions
-    val lowFraction by animateFloatAsState(
-        targetValue = valueToFraction(lowValue, min, max),
-        animationSpec = spring(stiffness = 1200f),
-        label = "lowFraction"
-    )
-    val highFraction by animateFloatAsState(
-        targetValue = valueToFraction(highValue, min, max),
-        animationSpec = spring(stiffness = 1200f),
-        label = "highFraction"
-    )
-
-    var draggingLow by remember { mutableStateOf(true) }
-    var isDragging  by remember { mutableStateOf(false) }
-
-    val thumbColor       = if (disabled) theme.colors.text.disable else theme.colors.primary
-    val trackActiveColor = if (disabled) theme.colors.text.disable else theme.colors.primary
-    val trackInactiveColor = theme.colors.background.default
-
-    // trackWidthPx is the full pixel width of the BoxWithConstraints (incl. thumb padding)
-    var trackWidthPx by remember { mutableFloatStateOf(0f) }
-    val thumbSizePx   = with(density) { THUMB_SIZE.toPx() }
-
-    Box(
-        modifier = modifier
-            .fillMaxWidth()
-            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) }
-    ) {
-        BoxWithConstraints(
-            modifier = Modifier
-                .fillMaxWidth()
-                .onGloballyPositioned { coords -> trackWidthPx = coords.size.width.toFloat() }
-                // ── Gesture handling ──────────────────────────────────────────
-                .pointerInput(disabled, min, max, step, minRange, disableRange) {
-                    if (disabled) return@pointerInput
-
-                    awaitPointerEventScope {
-                        while (true) {
-                            // Finger down
-                            val downEvent  = awaitPointerEvent()
-                            val downChange = downEvent.changes.firstOrNull() ?: continue
-                            val touchX     = downChange.position.x
-
-                            // Pick the closer thumb
-                            val lowCenterX  = thumbSizePx / 2f +
-                                    valueToFraction(lowValue,  min, max) * (trackWidthPx - thumbSizePx)
-                            val highCenterX = thumbSizePx / 2f +
-                                    valueToFraction(highValue, min, max) * (trackWidthPx - thumbSizePx)
-
-                            draggingLow = disableRange || isLowCloser(touchX, lowCenterX, highCenterX)
-                            isDragging  = true
-                            onSliderTouchStart(lowValue, highValue)
-
-                            // Apply initial press
-                            applyDrag(touchX, trackWidthPx, thumbSizePx,
-                                min, max, step, minRange, draggingLow,
-                                lowValue, highValue) { nl, nh ->
-                                lowValue  = nl
-                                highValue = nh
-                                onValueChanged(nl, nh, true)
-                            }
-
-                            // Track move / release
-                            while (true) {
-                                val moveEvent  = awaitPointerEvent()
-                                val moveChange = moveEvent.changes.firstOrNull() ?: break
-                                moveChange.consume()
-
-                                if (!moveChange.pressed) {
-                                    isDragging = false
-                                    onSliderTouchEnd(lowValue, highValue)
-                                    break
-                                }
-
-                                applyDrag(moveChange.position.x, trackWidthPx, thumbSizePx,
-                                    min, max, step, minRange, draggingLow,
-                                    lowValue, highValue) { nl, nh ->
-                                    lowValue  = nl
-                                    highValue = nh
-                                    onValueChanged(nl, nh, true)
-                                }
-                            }
-                        }
-                    }
-                }
-        ) {
-            val trackWidth    = maxWidth
-            val availableWidth = trackWidth - THUMB_SIZE
-
-            // ── Floating label ────────────────────────────────────────────────
-            if (floatingLabel && isDragging) {
-                val activeFraction = if (draggingLow) lowFraction else highFraction
-                val activeValue    = if (draggingLow) lowValue    else highValue
-                val labelOffsetDp  = availableWidth * activeFraction
-
-                Box(
-                    modifier = Modifier
-                        .align(Alignment.TopStart)
-                        .offset { IntOffset(x = with(density) { labelOffsetDp.toPx().roundToInt() }, y = 0) }
-                ) {
-                    Box(
-                        modifier = Modifier
-                            .background(
-                                color = theme.colors.text.default,
-                                shape = RoundedCornerShape(Radius.XS)
-                            )
-                            .padding(horizontal = LABEL_PAD_H, vertical = LABEL_PAD_V)
-                    ) {
-                        Text(
-                            text = formatLabel(activeValue),
-                            style = Typography.descriptionXsRegular,
-                            color = Colors.black_01,
-                            textAlign = TextAlign.Center
-                        )
-                    }
-                }
-            }
-
-            // Top padding pushes track + thumbs below the label when floatingLabel is on
-            val topPad = if (floatingLabel) THUMB_SIZE + LABEL_GAP else 0.dp
-
-            // ── Inactive track (full width) ───────────────────────────────────
-            Box(
-                modifier = Modifier
-                    .align(Alignment.TopStart)
-                    .padding(top = topPad + (THUMB_SIZE - TRACK_HEIGHT) / 2)
-                    .padding(horizontal = THUMB_SIZE / 2)
-                    .fillMaxWidth()
-                    .height(TRACK_HEIGHT)
-                    .clip(RoundedCornerShape(percent = 50))
-                    .background(trackInactiveColor)
-            )
-
-            // ── Active track (selected range / single value) ──────────────────
-            val activeStartFraction = if (disableRange) 0f else lowFraction
-            val activeEndFraction   = if (disableRange) lowFraction else highFraction
-            val activeStartDp  = THUMB_SIZE / 2 + availableWidth * activeStartFraction
-            val activeWidthDp  = availableWidth * (activeEndFraction - activeStartFraction)
-
-            if (activeWidthDp > 0.dp) {
-                Box(
-                    modifier = Modifier
-                        .align(Alignment.TopStart)
-                        .padding(top = topPad + (THUMB_SIZE - TRACK_HEIGHT) / 2)
-                        .offset(x = activeStartDp)
-                        .width(activeWidthDp)
-                        .height(TRACK_HEIGHT)
-                        .clip(RoundedCornerShape(percent = 50))
-                        .background(trackActiveColor)
-                )
-            }
-
-            // ── Low thumb ─────────────────────────────────────────────────────
-            Box(
-                modifier = Modifier
-                    .align(Alignment.TopStart)
-                    .padding(top = topPad)
-                    .offset(x = availableWidth * lowFraction)
-                    .shadow(
-                        color       = Color(0x33000000),
-                        borderRadius = 50.dp,
-                        blurRadius  = 6f,
-                        offsetY     = 2.dp
-                    )
-                    .size(THUMB_SIZE)
-                    .clip(RoundedCornerShape(percent = 100))
-                    .background(thumbColor)
-                    .border(THUMB_BORDER, theme.colors.background.surface, RoundedCornerShape(percent = 100))
-            )
-
-            // ── High thumb (range mode only) ──────────────────────────────────
-            if (!disableRange) {
-                Box(
-                    modifier = Modifier
-                        .align(Alignment.TopStart)
-                        .padding(top = topPad)
-                        .offset(x = availableWidth * highFraction)
-                        .shadow(
-                            color       = Color(0x33000000),
-                            borderRadius = 50.dp,
-                            blurRadius  = 6f,
-                            offsetY     = 2.dp
-                        )
-                        .size(THUMB_SIZE)
-                        .clip(RoundedCornerShape(percent = 100))
-                        .background(thumbColor)
-                        .border(THUMB_BORDER, theme.colors.background.surface, RoundedCornerShape(percent = 100))
-                )
-            }
-        }
-    }
-}
-
-// ── Private drag helper ───────────────────────────────────────────────────────
-
-private fun applyDrag(
-    positionX: Float,
-    trackWidthPx: Float,
-    thumbSizePx: Float,
-    min: Float,
-    max: Float,
-    step: Float,
-    minRange: Float,
-    isLow: Boolean,
-    currentLow: Float,
-    currentHigh: Float,
-    onUpdate: (Float, Float) -> Unit,
-) {
-    val snapped = getValueForPosition(positionX, trackWidthPx, thumbSizePx, min, max, step)
-    if (isLow) {
-        val newLow = clamp(snapped, min, currentHigh - minRange)
-        if (newLow != currentLow) onUpdate(newLow, currentHigh)
-    } else {
-        val newHigh = clamp(snapped, currentLow + minRange, max)
-        if (newHigh != currentHigh) onUpdate(currentLow, newHigh)
-    }
-}