@momo-kits/native-kits 0.161.1-beta.15-debug → 0.161.2-beta.1

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

@@ -1,348 +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 = Colors.black_01,
-                                shape = RoundedCornerShape(Radius.XS)
-                            )
-                            .padding(horizontal = LABEL_PAD_H, vertical = LABEL_PAD_V)
-                    ) {
-                        Text(
-                            text = formatLabel(activeValue),
-                            style = Typography.descriptionXsRegular,
-                            color = theme.colors.text.default,
-                            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)
-                    .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)
-                        .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)
-    }
-}

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

@@ -1,256 +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.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.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
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.text.style.TextAlign
-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.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
-}
-
-private data class StepperSizeSpec(
-    val buttonSize: Dp,
-    val iconSize: Dp,
-    val numberMinWidth: Dp,
-    val numberHeight: Dp,
-)
-
-private val stepperSizeSpecs: Map<StepperSize, StepperSizeSpec> = mapOf(
-    StepperSize.LARGE to StepperSizeSpec(
-        buttonSize = 36.dp,
-        iconSize = 22.dp,
-        numberMinWidth = 32.dp,
-        numberHeight = 28.dp,
-    ),
-    StepperSize.SMALL to StepperSizeSpec(
-        buttonSize = 28.dp,
-        iconSize = 18.dp,
-        numberMinWidth = 28.dp,
-        numberHeight = 24.dp,
-    ),
-)
-
-// ---------------------------------------------------------------------------
-// Private sub-composables
-// ---------------------------------------------------------------------------
-
-@Composable
-private fun StepperButton(
-    sign: String = "+",
-    size: StepperSize = StepperSize.LARGE,
-    disabled: Boolean = false,
-    onPress: () -> Unit = {},
-    modifier: Modifier = Modifier,
-) {
-    val theme = AppTheme.current
-    val specs = remember(size) { stepperSizeSpecs[size] ?: stepperSizeSpecs[StepperSize.LARGE]!! }
-
-    val iconColor: Color = if (disabled) theme.colors.text.disable else theme.colors.primary
-    val iconName: String =
-        if (sign == "-") "24_navigation_minus_circle" else "24_navigation_plus_circle"
-
-    val clickableModifier: Modifier = if (!disabled) {
-        Modifier.activeOpacityClickable(onClick = onPress)
-    } else {
-        Modifier
-    }
-
-    Box(
-        modifier = modifier
-            .size(specs.buttonSize)
-            .background(color = theme.colors.background.disable, shape = CircleShape)
-            .then(clickableModifier)
-            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
-        contentAlignment = Alignment.Center,
-    ) {
-        Icon(
-            source = iconName,
-            size = specs.iconSize,
-            color = iconColor,
-        )
-    }
-}
-
-@Composable
-private fun StepperNumberView(
-    value: Int,
-    size: StepperSize = StepperSize.LARGE,
-    disabled: Boolean = false,
-    editable: Boolean = false,
-    onValueChange: (String) -> Unit = {},
-    modifier: Modifier = Modifier,
-) {
-    val theme = AppTheme.current
-    val specs = remember(size) { stepperSizeSpecs[size] ?: stepperSizeSpecs[StepperSize.LARGE]!! }
-
-    val textColor: Color = if (disabled) theme.colors.text.disable else theme.colors.text.default
-    val borderColor: Color =
-        if (disabled) theme.colors.border.disable else theme.colors.border.default
-
-    val scaledFontSize = scaleSize(12.sp)
-
-    val textStyle = TextStyle(
-        color = textColor,
-        fontSize = scaledFontSize,
-        textAlign = TextAlign.Center,
-    )
-
-    Box(
-        modifier = modifier
-            .defaultMinSize(minWidth = specs.numberMinWidth)
-            .height(specs.numberHeight)
-            .border(
-                width = 1.dp,
-                color = borderColor,
-                shape = RoundedCornerShape(Radius.S),
-            )
-            .padding(horizontal = Spacing.XS)
-            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
-        contentAlignment = Alignment.Center,
-    ) {
-        BasicTextField(
-            value = value.toString(),
-            onValueChange = { if (editable) onValueChange(it) },
-            enabled = editable && !disabled,
-            readOnly = !editable,
-            singleLine = true,
-            textStyle = textStyle,
-            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
-            decorationBox = { innerTextField -> innerTextField() },
-        )
-    }
-}
-
-// ---------------------------------------------------------------------------
-// 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,
-    min: Int = 0,
-    max: Int = 100,
-    step: Int = 1,
-    disabled: Any = false,
-    size: StepperSize = StepperSize.LARGE,
-    editable: Boolean = false,
-    onValueChange: (Int) -> Unit = {},
-    modifier: Modifier = Modifier,
-) {
-    var value by remember(defaultValue) { mutableStateOf(defaultValue.coerceIn(min, max)) }
-
-    fun applyValue(raw: String) {
-        var parsed = raw.toIntOrNull() ?: 0
-        parsed = parsed.coerceIn(min, max)
-        value = parsed
-        onValueChange(parsed)
-    }
-
-    // Resolve per-part disabled state — mirrors RN getViewDisabledStatus()
-    val disabledMinus: Boolean
-    val disabledPlus: Boolean
-    val disabledNumber: Boolean
-
-    when {
-        disabled is BooleanArray && disabled.size >= 2 -> {
-            disabledMinus = disabled[0]
-            disabledPlus = disabled[1]
-            disabledNumber = disabled[0] && disabled[1]
-        }
-        disabled is Boolean && disabled -> {
-            disabledMinus = true
-            disabledPlus = true
-            disabledNumber = true
-        }
-        else -> {
-            disabledMinus = false
-            disabledPlus = false
-            disabledNumber = false
-        }
-    }
-
-    // Auto-disable buttons when the value is already at a bound
-    val effectiveMinusDisabled = disabledMinus || value <= min
-    val effectivePlusDisabled = disabledPlus || value >= max
-
-    Row(
-        modifier = modifier
-            .conditional(IsShowBaseLineDebug) { border(1.dp, Colors.blue_03) },
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        StepperButton(
-            sign = "-",
-            size = size,
-            disabled = effectiveMinusDisabled,
-            onPress = { applyValue((value - step).toString()) },
-        )
-
-        StepperNumberView(
-            value = value,
-            size = size,
-            disabled = disabledNumber,
-            editable = editable,
-            onValueChange = { applyValue(it) },
-            modifier = Modifier.padding(horizontal = Spacing.S),
-        )
-
-        StepperButton(
-            sign = "+",
-            size = size,
-            disabled = effectivePlusDisabled,
-            onPress = { applyValue((value + step).toString()) },
-        )
-    }
-}