@momo-kits/native-kits 0.300.4-debug → 0.300.4

package/compose/src/commonMain/kotlin/vn/momo/kits/application/LiteScreen.kt

@@ -1,1071 +0,0 @@
-package vn.momo.kits.application
-
-import androidx.annotation.FloatRange
-import androidx.compose.foundation.ScrollState
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.interaction.FocusInteraction
-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.fillMaxSize
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.text.BasicTextField
-import androidx.compose.foundation.text.KeyboardActions
-import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.Stable
-import androidx.compose.runtime.State
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberUpdatedState
-import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.composed
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.drawWithCache
-import androidx.compose.ui.draw.drawWithContent
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.SolidColor
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.layout.Layout
-import androidx.compose.ui.layout.Measurable
-import androidx.compose.ui.layout.MeasurePolicy
-import androidx.compose.ui.layout.MeasureResult
-import androidx.compose.ui.layout.MeasureScope
-import androidx.compose.ui.layout.Placeable
-import androidx.compose.ui.layout.layoutId
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.platform.LocalFocusManager
-import androidx.compose.ui.platform.LocalSoftwareKeyboardController
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.Constraints
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.lerp
-import androidx.compose.ui.unit.sp
-import kotlinx.coroutines.flow.collectLatest
-import kotlinx.coroutines.flow.mapNotNull
-import vn.momo.kits.components.Icon
-import vn.momo.kits.components.Text
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
-import vn.momo.kits.const.getFontFamily
-import vn.momo.kits.layout.DuoMetrics
-import vn.momo.kits.layout.ScreenLayout
-import vn.momo.kits.layout.SideBarEdge
-import vn.momo.kits.layout.getScreenLayout
-import vn.momo.kits.modifier.hideKeyboardOnTap
-import vn.momo.kits.utils.horizontalSafeAreaPadding
-import vn.momo.kits.modifier.kitsAutomationId
-import vn.momo.kits.modifier.noFeedbackClickable
-import vn.momo.kits.modifier.setAutomationId
-import vn.momo.kits.navigation.component.headerFontFamily
-import vn.momo.kits.navigation.component.HEADER_HEIGHT
-import vn.momo.kits.navigation.component.HeaderColor
-import vn.momo.kits.navigation.component.LocalHeaderColor
-import vn.momo.kits.navigation.component.HeaderRight
-import vn.momo.kits.navigation.component.SideBarButton
-import vn.momo.kits.navigation.component.TitlePosition
-import vn.momo.kits.navigation.component.ToolGroup
-import vn.momo.kits.navigation.component.Toolkit
-import vn.momo.kits.utils.getAppStatusBarHeight
-import kotlin.math.max
-import kotlin.math.roundToInt
-import vn.momo.kits.navigation.component.getHeaderColor as getNavigationHeaderColor
-
-
-data class AnimationOption(
-    val targetBounds: Rect,
-    val progress: State<Float>,
-    @param:FloatRange(from = 0.0, to = 1.0)
-    val opacityLimitFraction: Float = 0f,
-) {
-    val opacityCap: Float
-        get() = 1f - opacityLimitFraction
-
-    val animateOpacity: Float
-        get() {
-            if (progress.value < opacityLimitFraction) return 0f
-            return androidx.compose.ui.util.lerp(
-                0f,
-                1f,
-                (progress.value - opacityLimitFraction) / (opacityCap),
-            )
-        }
-}
-
-val LocalAnimationOption = staticCompositionLocalOf<AnimationOption?> { null }
-
-// LiteScreen's own header kinds; StackScreen uses the sealed navigation.component.HeaderType.
-enum class HeaderType {
-    DEFAULT,
-    EXTENDED,
-    NONE
-}
-
-@Stable
-data class HeaderRightData(
-    val useShortcut: Boolean = false,
-    val useMore: Boolean = false,
-    val useSystemTools: Boolean = true,
-    val tools: List<ToolGroup> = emptyList(),
-    val toolCallback: ((String) -> Unit)? = { _ -> }
-) {
-    internal fun toToolkit() = HeaderRight.Toolkit(
-        useShortcut = useShortcut,
-        useMore = useMore,
-        useSystemTools = useSystemTools,
-        tools = tools,
-        toolCallback = toolCallback,
-    )
-}
-
-@Composable
-fun LiteScreen(
-    scrollable: Boolean = true,
-    scrollState: ScrollState? = null,
-    headerType: HeaderType = HeaderType.DEFAULT,
-    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
-    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
-    backgroundColor: Color = AppTheme.current.colors.background.default,
-    /*  Begin of header props  */
-    title: String? = null,
-    inputSearchProps: LiteInputSearchProps? = null,
-    goBack: (() -> Unit)? = null,
-    headerRight: @Composable (() -> Unit)? = null,
-    useAnimationSearch: Boolean = true,
-    titlePosition: TitlePosition = TitlePosition.LEFT,
-    headerRightData: HeaderRightData? = null,
-    headerTintColor: Color? = null,
-    headerBackgroundColor: Color? = null,
-    headerSpaceBetween: Dp? = null,
-    /*  End of header props  */
-
-    screenContent: @Composable () -> Unit,
-) {
-    val content by rememberUpdatedState(screenContent)
-
-    val finalScrollState = scrollState ?: rememberScrollState()
-
-    val contentModifier = remember(
-        key1 = scrollable,
-        key2 = finalScrollState,
-    ) {
-        var res: Modifier = Modifier
-            .background(color = backgroundColor)
-        if (scrollable) {
-            res = res.verticalScroll(finalScrollState)
-        }
-        res
-    }
-
-    LiteScreenLayout(
-        scrollState = finalScrollState,
-        modifier = Modifier
-            .fillMaxSize()
-            .hideKeyboardOnTap(),
-        contentModifier = contentModifier,
-        verticalArrangement = verticalArrangement,
-        horizontalAlignment = horizontalAlignment,
-        title = title,
-        headerRight = headerRight,
-        headerType = headerType,
-        onGoBack = goBack,
-        inputSearchProps = inputSearchProps,
-        titlePosition = titlePosition,
-        useAnimationSearch = useAnimationSearch,
-        headerRightData = headerRightData,
-        tintColor = headerTintColor,
-        headerBackgroundColor = headerBackgroundColor,
-        headerSpaceBetween = headerSpaceBetween,
-    ) {
-        content()
-    }
-}
-
-private object HeaderId {
-    private const val PACKAGE_NAME = "vn.momo.compose.kits"
-    const val CONTENT_ID = "${PACKAGE_NAME}.content"
-    const val BACKGROUND_ID = "${PACKAGE_NAME}.background"
-    const val BACK_ID = "${PACKAGE_NAME}.back"
-    const val HEADER_RIGHT_ID = "${PACKAGE_NAME}.headerRight"
-    const val INPUT_SEARCH_ID = "${PACKAGE_NAME}.inputSearch"
-    const val TITLE_ID = "${PACKAGE_NAME}.title"
-
-    val EXTENDED_HEADER_HEIGHT = 154.dp
-}
-
-@Composable
-private fun LiteScreenLayout(
-    scrollState: ScrollState?,
-    modifier: Modifier = Modifier,
-    contentModifier: Modifier = Modifier,
-    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
-    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
-    title: String? = null,
-    tintColor: Color? = null,
-    headerRightData: HeaderRightData? = null,
-    headerType: HeaderType = HeaderType.DEFAULT,
-    titlePosition: TitlePosition = TitlePosition.LEFT,
-    useAnimationSearch: Boolean = true,
-    onGoBack: (() -> Unit)? = null,
-    headerBackgroundColor: Color? = null,
-    headerSpaceBetween: Dp? = null,
-    inputSearchProps: LiteInputSearchProps? = null,
-    headerRight: @Composable (() -> Unit)? = null,
-    content: @Composable () -> Unit,
-) {
-    val statusBarHeight = getAppStatusBarHeight()
-    val screenLayout = getScreenLayout()
-    val applySafeAreaPadding = screenLayout.sideBar != null
-    val isHeaderNone = remember(headerType) {
-        headerType == HeaderType.NONE
-    }
-    val theme = AppTheme.current
-    val density = LocalDensity.current
-
-    val isHeaderExtend = remember(headerType) {
-        headerType == HeaderType.EXTENDED
-    }
-    val backgroundHeight = remember(isHeaderNone, isHeaderExtend, statusBarHeight) {
-        when {
-            isHeaderNone -> statusBarHeight
-            !isHeaderExtend -> statusBarHeight + HEADER_HEIGHT.dp
-            else -> HeaderId.EXTENDED_HEADER_HEIGHT
-        }
-    }
-    val listGradientColors = remember {
-        listOf(
-            Color(0xFFFDCADE),
-            Color(0x00FDCADE),
-        )
-    }
-
-    val headerColor = remember(tintColor, theme) {
-        if (tintColor == Colors.black_01) HeaderColor(
-            tintIconColor = tintColor,
-            backgroundButton = Colors.black_20.copy(alpha = 0.6f),
-            borderColor = Colors.black_01.copy(alpha = 0.2f)
-        )
-        else HeaderColor(
-            tintIconColor = tintColor ?: theme.colors.text.default,
-            backgroundButton = Colors.black_01.copy(alpha = 0.6f),
-            borderColor = Colors.black_20.copy(alpha = 0.2f)
-        )
-    }
-    val toolkit = remember(headerRightData) { (headerRightData ?: HeaderRightData()).toToolkit() }
-
-    val scrollPercentage = remember(useAnimationSearch, scrollState, backgroundHeight, density) {
-        derivedStateOf {
-            if (!useAnimationSearch || scrollState == null) {
-                0f
-            } else {
-                val rangePx = with(density) { backgroundHeight.toPx() }
-                (scrollState.value / rangePx).coerceIn(0f, 1f)
-            }
-        }
-    }
-
-    val titleStyle = remember {
-        Typography.actionSBold.copy(
-            fontSize = 15.sp,
-            lineHeight = 22.sp,
-        )
-    }
-
-    val animationOption = LocalAnimationOption.current
-    val animationOpacityModifier = Modifier.graphicsLayer {
-        alpha = animationOption?.animateOpacity ?: 1f
-    }
-    val sideBarColor = getNavigationHeaderColor(
-        vn.momo.kits.navigation.component.HeaderType.Default(),
-        1f,
-        null,
-        Colors.black_17,
-    )
-    val titleModifier = Modifier
-        .kitsAutomationId("title_navigation_header")
-        .layoutId(HeaderId.TITLE_ID)
-        .graphicsLayer {
-            val titleAlpha = if (isHeaderExtend && inputSearchProps != null && useAnimationSearch)
-                (1 - scrollPercentage.value * 2).coerceIn(0f, 1f)
-            else 1f
-            alpha = titleAlpha * (animationOption?.progress?.value ?: 1f)
-        }
-
-    val policy = remember(
-        screenLayout,
-        applySafeAreaPadding,
-        useAnimationSearch,
-        isHeaderNone,
-        isHeaderExtend,
-        statusBarHeight,
-        titlePosition,
-        scrollPercentage,
-        headerSpaceBetween,
-        animationOption,
-        verticalArrangement,
-        horizontalAlignment,
-    ) {
-        LiteScreenLayoutPolicy(
-            screenLayout = screenLayout,
-            applySafeAreaPadding = applySafeAreaPadding,
-            useAnimationSearch = useAnimationSearch,
-            isHeaderNone = isHeaderNone,
-            isHeaderExtend = isHeaderExtend,
-            statusBarHeight = statusBarHeight,
-            titlePosition = titlePosition,
-            scrollPercentage = scrollPercentage,
-            headerSpaceBetween = headerSpaceBetween,
-            animationOption = animationOption,
-            verticalArrangement = verticalArrangement,
-            horizontalAlignment = horizontalAlignment,
-        )
-    }
-
-    Layout(
-        modifier = modifier,
-        content = {
-            Box(
-                modifier = animationOpacityModifier
-                    .layoutId(HeaderId.CONTENT_ID)
-                    .then(contentModifier)
-                    .then(if (applySafeAreaPadding) Modifier.horizontalSafeAreaPadding() else Modifier),
-                contentAlignment = Alignment.TopCenter,
-            ) {
-                content()
-            }
-
-            if (!isHeaderNone) {
-                Box(
-                    modifier = Modifier
-                        .layoutId(HeaderId.BACKGROUND_ID)
-                        .then(animationOpacityModifier)
-                        .drawWithCache {
-                            if (headerBackgroundColor != null) {
-                                val backgroundColor = headerBackgroundColor
-                                onDrawBehind { drawRect(color = backgroundColor) }
-                            } else {
-                                val headerHeight = max(
-                                    HeaderId.EXTENDED_HEADER_HEIGHT.toPx(),
-                                    size.height,
-                                )
-                                val gradientBrush = Brush.linearGradient(
-                                    colors = listGradientColors,
-                                    start = Offset.Zero,
-                                    end = Offset(
-                                        x = 0f,
-                                        y = headerHeight * (1 - scrollPercentage.value),
-                                    ),
-                                )
-                                onDrawBehind {
-                                    drawRect(color = Colors.black_01)
-                                    drawRect(brush = gradientBrush)
-                                }
-                            }
-                        },
-                )
-            }
-
-            if (!isHeaderNone && onGoBack != null) {
-                when {
-                    screenLayout.sideBar != null || screenLayout.statusBarClearance != null -> {
-                        Box(
-                            modifier = Modifier.layoutId(HeaderId.BACK_ID),
-                        ) {
-                            SideBarButton(
-                                icon = "arrow-back",
-                                headerColor = sideBarColor,
-                                onClick = onGoBack,
-                                automationId = "btn_navigation_back",
-                            )
-                        }
-                    }
-                    else -> {
-                        val coreModifier = Modifier
-                            .layoutId(HeaderId.BACK_ID)
-                            .then(animationOpacityModifier)
-                            .clip(CircleShape)
-                            .noFeedbackClickable(onClick = onGoBack)
-                            .setAutomationId("btn_navigation_back")
-                        inputSearchProps?.customBackIcon?.invoke(coreModifier) ?: Box(
-                            modifier = coreModifier
-                                .size(28.dp)
-                                .border(
-                                    width = 0.2.dp,
-                                    color = headerColor.borderColor,
-                                    shape = CircleShape,
-                                )
-                                .background(color = headerColor.backgroundButton)
-                                .padding(Spacing.XS),
-                        ) {
-                            Icon(
-                                source = "arrow-back",
-                                color = headerColor.tintIconColor,
-                                size = 20.dp,
-                            )
-                        }
-                    }
-                }
-            }
-
-            if (!isHeaderNone) {
-                Box(
-                    modifier = Modifier
-                        .layoutId(HeaderId.HEADER_RIGHT_ID)
-                        .then(animationOpacityModifier)
-                ) {
-                    if (headerRight != null) {
-                        CompositionLocalProvider(LocalHeaderColor provides headerColor) {
-                            headerRight()
-                        }
-                    } else {
-                        Toolkit(
-                            headerRight = toolkit,
-                            tintColor = tintColor,
-                            headerColor = headerColor,
-                        )
-                    }
-                }
-            }
-
-            if (!isHeaderNone && inputSearchProps != null) {
-                LiteInputSearch(
-                    modifier = Modifier.layoutId(HeaderId.INPUT_SEARCH_ID),
-                    inputSearchProps = inputSearchProps,
-                )
-            }
-            if (!isHeaderNone && title != null && (inputSearchProps == null || isHeaderExtend)) {
-                Text(
-                    text = title,
-                    color = headerColor.tintIconColor,
-                    style = titleStyle,
-                    fontFamily = headerFontFamily,
-                    modifier = titleModifier,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
-            }
-        },
-        measurePolicy = policy,
-    )
-}
-
-private interface LiteScreenGeometry {
-    fun MeasureScope.safeWidth(
-        screenLayout: ScreenLayout,
-        width: Int,
-        insetLeft: Int,
-        insetRight: Int,
-    ): Int
-
-    fun MeasureScope.searchStartX(
-        screenLayout: ScreenLayout,
-        insetLeft: Int,
-        spacing: Int,
-    ): Int
-
-    fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int
-    fun MeasureScope.headerRightStartX(
-        screenLayout: ScreenLayout,
-        width: Int,
-        insetRight: Int,
-        spacing: Int,
-        rightWidth: Int,
-    ): Int
-
-    fun MeasureScope.collapsedHeaderHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int
-
-    fun MeasureScope.searchStartY(
-        screenLayout: ScreenLayout,
-        headerY: Int,
-        statusBar: Int,
-        rowHeight: Int,
-    ): Int
-}
-
-private class StandardPhoneLiteScreenGeometry : LiteScreenGeometry {
-    override fun MeasureScope.safeWidth(
-        screenLayout: ScreenLayout,
-        width: Int,
-        insetLeft: Int,
-        insetRight: Int,
-    ) = (width - insetLeft - insetRight).coerceAtLeast(0)
-
-    override fun MeasureScope.searchStartX(screenLayout: ScreenLayout, insetLeft: Int, spacing: Int) =
-        insetLeft + spacing
-
-    override fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int) =
-        statusBar + rowHeight
-    override fun MeasureScope.collapsedHeaderHeight(
-        screenLayout: ScreenLayout,
-        statusBar: Int,
-        rowHeight: Int,
-    ) = statusBar + rowHeight
-    override fun MeasureScope.headerRightStartX(
-        screenLayout: ScreenLayout,
-        width: Int,
-        insetRight: Int,
-        spacing: Int,
-        rightWidth: Int,
-    ) = width - insetRight - spacing - rightWidth
-
-    override fun MeasureScope.searchStartY(
-        screenLayout: ScreenLayout,
-        headerY: Int,
-        statusBar: Int,
-        rowHeight: Int,
-    ) = headerY + statusBar
-}
-
-private class IPhoneDuoLiteScreenGeometry : LiteScreenGeometry {
-    override fun MeasureScope.safeWidth(
-        screenLayout: ScreenLayout,
-        width: Int,
-        insetLeft: Int,
-        insetRight: Int,
-    ): Int {
-        val clearance = screenLayout.statusBarClearance
-        return (
-            width - insetLeft - insetRight -
-                (clearance?.left?.roundToPx() ?: 0) -
-                (clearance?.right?.roundToPx() ?: 0)
-            ).coerceAtLeast(0)
-    }
-
-    override fun MeasureScope.searchStartX(screenLayout: ScreenLayout, insetLeft: Int, spacing: Int) =
-        insetLeft + (screenLayout.statusBarClearance?.left?.roundToPx() ?: 0) + spacing
-
-    override fun MeasureScope.headerHeight(screenLayout: ScreenLayout, statusBar: Int, rowHeight: Int): Int {
-        val rowTop = screenLayout.headerStatusBarHeight +
-            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
-        return max(screenLayout.headerHeight.roundToPx(), rowTop.roundToPx() + rowHeight)
-    }
-    override fun MeasureScope.collapsedHeaderHeight(
-        screenLayout: ScreenLayout,
-        statusBar: Int,
-        rowHeight: Int,
-    ) = (
-        screenLayout.headerStatusBarHeight +
-            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
-        ).roundToPx() + rowHeight
-    override fun MeasureScope.headerRightStartX(
-        screenLayout: ScreenLayout,
-        width: Int,
-        insetRight: Int,
-        spacing: Int,
-        rightWidth: Int,
-    ) = width - insetRight -
-        (screenLayout.statusBarClearance?.right?.roundToPx() ?: 0) -
-        spacing - rightWidth
-
-    override fun MeasureScope.searchStartY(
-        screenLayout: ScreenLayout,
-        headerY: Int,
-        statusBar: Int,
-        rowHeight: Int,
-    ) = headerY + (
-        screenLayout.headerStatusBarHeight +
-            (screenLayout.headerBarHeight - rowHeight.toDp()) / 2
-        ).roundToPx()
-}
-
-private class LiteScreenLayoutPolicy(
-    private val screenLayout: ScreenLayout,
-    private val applySafeAreaPadding: Boolean,
-    private val useAnimationSearch: Boolean,
-    private val isHeaderNone: Boolean,
-    private val isHeaderExtend: Boolean,
-    private val statusBarHeight: Dp,
-    private val scrollPercentage: State<Float>,
-    private val titlePosition: TitlePosition,
-    private val headerSpaceBetween: Dp? = null,
-    private val animationOption: AnimationOption?,
-    private val verticalArrangement: Arrangement.Vertical,
-    private val horizontalAlignment: Alignment.Horizontal,
-) : MeasurePolicy {
-    private val geometry = if (screenLayout.isIPhoneDuo) {
-        IPhoneDuoLiteScreenGeometry()
-    } else {
-        StandardPhoneLiteScreenGeometry()
-    }
-
-    val searchStartPosition: IntOffset by lazy {
-        if (animationOption == null) return@lazy IntOffset.Zero
-        val offset = animationOption.targetBounds.topLeft
-        IntOffset(
-            x = offset.x.roundToInt(),
-            y = offset.y.roundToInt(),
-        )
-    }
-
-    override fun MeasureScope.measure(
-        measurables: List<Measurable>,
-        constraints: Constraints
-    ): MeasureResult {
-        val spacing12 = Spacing.M.roundToPx()
-        val spaceBetween = headerSpaceBetween?.roundToPx() ?: spacing12
-        val statusBarPx = statusBarHeight.roundToPx()
-        val headerRowDefault = HEADER_HEIGHT.dp.roundToPx()
-        val scrollPercent = scrollPercentage.value
-
-        val contentMeasurable = measurables.find { it.layoutId == HeaderId.CONTENT_ID }
-
-        val insetLeft = if (applySafeAreaPadding) screenLayout.insetLeft.roundToPx() else 0
-        val insetRight = if (applySafeAreaPadding) screenLayout.insetRight.roundToPx() else 0
-        val safeLayoutWidth = with(geometry) {
-            safeWidth(screenLayout, constraints.maxWidth, insetLeft, insetRight)
-        }
-        val searchStartX = with(geometry) { searchStartX(screenLayout, insetLeft, spacing12) }
-        val realConstraints = constraints.copy(
-            minWidth = 0,
-            minHeight = 0,
-            maxWidth = (safeLayoutWidth - spacing12 * 2).coerceAtLeast(0),
-        )
-        val backIconPlaceable =
-            measurables.find { it.layoutId == HeaderId.BACK_ID }?.measure(realConstraints)
-        val headerRightPlaceable =
-            measurables.find { it.layoutId == HeaderId.HEADER_RIGHT_ID }?.measure(
-                realConstraints.copy(
-                    maxWidth = realConstraints.maxWidth / 2,
-                )
-            )
-        val headerBackWidth = if (screenLayout.sideBar == null) backIconPlaceable.safeWidth else 0
-        val baseInputSearchConstraints = if (isHeaderExtend) {
-            val minWidth =
-                if (useAnimationSearch) realConstraints.maxWidth - headerBackWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
-                else realConstraints.maxWidth
-            realConstraints.copy(
-                maxWidth = (realConstraints.maxWidth * (1 - scrollPercent)).toInt()
-                    .coerceAtLeast(minWidth)
-            )
-        } else {
-            var spaceConsumed = 0
-            if (headerBackWidth != 0) spaceConsumed += headerBackWidth + spaceBetween
-            if (headerRightPlaceable.safeWidth != 0) spaceConsumed += headerRightPlaceable.safeWidth + spaceBetween
-            realConstraints.copy(
-                maxWidth = realConstraints.maxWidth - spaceConsumed
-            )
-        }
-        val inputSearchConstraints = baseInputSearchConstraints.withAnimationTargetBounds()
-        val inputSearchPlaceable = measurables.find { it.layoutId == HeaderId.INPUT_SEARCH_ID }
-            ?.measure(inputSearchConstraints)
-        val titlePlaceable = measurables.find { it.layoutId == HeaderId.TITLE_ID }?.measure(
-            constraints = realConstraints.copy(
-                maxWidth = realConstraints.maxWidth - headerBackWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
-            )
-        )
-
-        /**
-         * replicate logic from [vn.momo.kits.navigation.component.HeaderBackground]
-         * */
-        var defaultHeight = with(geometry) { headerHeight(screenLayout, statusBarPx, headerRowDefault) }
-        if (isHeaderExtend) {
-            defaultHeight = if (screenLayout.isIPhoneDuo) {
-                max(defaultHeight, 154.dp.roundToPx())
-            } else {
-                154.dp.roundToPx()
-            }
-        }
-        val headerHeight = when {
-            isHeaderNone -> statusBarPx
-            !useAnimationSearch && !isHeaderExtend -> defaultHeight
-            else -> {
-                val collapsableSpace = defaultHeight -
-                    with(geometry) { collapsedHeaderHeight(screenLayout, statusBarPx, headerRowDefault) }
-                (defaultHeight - scrollPercent * collapsableSpace).toInt()
-            }
-        }
-
-        val layoutWidth = constraints.maxWidth
-        val layoutHeight = constraints.maxHeight
-        val backgroundInsetLeft = if (!applySafeAreaPadding && screenLayout.sideBar != null) screenLayout.insetLeft.roundToPx() else 0
-        val contentHeight = (layoutHeight - headerHeight).coerceAtLeast(0)
-        val contentPlaceable = contentMeasurable?.measure(
-            constraints.copy(
-                minWidth = 0,
-                minHeight = contentHeight,
-                maxHeight = contentHeight,
-            )
-        )
-        val backgroundPlaceable = measurables.find { it.layoutId == HeaderId.BACKGROUND_ID }
-            ?.measure(
-                Constraints.fixed(
-                    width = layoutWidth,
-                    height = headerHeight,
-                )
-            )
-        val childrenHeights = intArrayOf(
-            headerHeight,
-            contentPlaceable.safeHeight,
-        )
-        val childrenY = IntArray(childrenHeights.size)
-        with(verticalArrangement) {
-            arrange(
-                totalSize = layoutHeight,
-                sizes = childrenHeights,
-                outPositions = childrenY,
-            )
-        }
-        val headerY = childrenY[0]
-        val contentY = childrenY[1]
-
-        return layout(
-            width = layoutWidth,
-            height = layoutHeight,
-        ) {
-            val progress = animationOption?.progress?.value ?: 1f
-
-            val startX = searchStartX
-            val startY = with(geometry) {
-                searchStartY(screenLayout, headerY, statusBarPx, headerRowDefault)
-            }
-            var curX = startX
-            var curY = startY
-
-            contentPlaceable?.place(
-                x = horizontalAlignment.align(
-                    size = contentPlaceable.width,
-                    space = layoutWidth,
-                    layoutDirection = layoutDirection,
-                ),
-                y = contentY,
-            )
-
-            backgroundPlaceable?.place(
-                x = -backgroundInsetLeft,
-                y = headerY,
-            )
-
-            if (backIconPlaceable != null) {
-                val sideBar = screenLayout.sideBar
-                if (sideBar == null) {
-                    backIconPlaceable.place(
-                        x = startX,
-                        y = startY + backIconPlaceable.verticalCenterOffset(headerRowDefault),
-                    )
-                    curX += backIconPlaceable.safeWidth + spaceBetween
-                } else {
-                    val x = when (sideBar.edge) {
-                        SideBarEdge.LEFT -> insetLeft - screenLayout.insetLeft.roundToPx() + sideBar.width.roundToPx() - spacing12 - backIconPlaceable.width
-                        SideBarEdge.RIGHT -> layoutWidth + (if (applySafeAreaPadding) 0 else screenLayout.insetRight.roundToPx()) - sideBar.width.roundToPx() + spacing12
-                    }
-                    backIconPlaceable.place(
-                        x = x,
-                        y = sideBar.top.roundToPx() + (DuoMetrics.controlSize.roundToPx() - backIconPlaceable.height) / 2,
-                    )
-                }
-            }
-            headerRightPlaceable?.place(
-                x = with(geometry) {
-                    headerRightStartX(
-                        screenLayout,
-                        layoutWidth,
-                        insetRight,
-                        spacing12,
-                        headerRightPlaceable.safeWidth,
-                    )
-                },
-                y = startY + headerRightPlaceable.verticalCenterOffset(headerRowDefault),
-            )
-
-            val titleOffset = IntOffset(
-                x = if (titlePosition == TitlePosition.LEFT) curX
-                else searchStartX - spacing12 + titlePlaceable.horizontalCenterOffset(
-                    space = safeLayoutWidth - spacing12 * 2,
-                    layoutDirection = layoutDirection,
-                ),
-                y = startY + titlePlaceable.verticalCenterOffset(headerRowDefault),
-            )
-
-            titlePlaceable?.place(titleOffset)
-
-            if ((backIconPlaceable != null && screenLayout.sideBar == null) || headerRightPlaceable != null || titlePlaceable != null) {
-                curY += headerRowDefault
-            }
-
-            val inputSearchOffset = if (isHeaderExtend) {
-                val baseY = curY + inputSearchPlaceable.verticalCenterOffset(headerRowDefault)
-                val y = (baseY * (1 - scrollPercent)).toInt().coerceAtLeast(
-                    startY + inputSearchPlaceable.verticalCenterOffset(headerRowDefault)
-                )
-                IntOffset(
-                    x = startX + ((headerBackWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
-                        0f, 1f
-                    )).toInt(),
-                    y = y,
-                )
-            } else {
-                IntOffset(
-                    x = curX,
-                    y = startY + inputSearchPlaceable.verticalCenterOffset(headerRowDefault),
-                )
-            }
-            val finalPosition = lerp(
-                searchStartPosition,
-                inputSearchOffset,
-                progress,
-            )
-
-            inputSearchPlaceable?.place(
-                finalPosition
-            )
-        }
-    }
-
-    private val Placeable?.safeHeight
-        get() = this?.height ?: 0
-    private val Placeable?.safeWidth
-        get() = this?.width ?: 0
-
-    private fun Constraints.withAnimationTargetBounds(): Constraints {
-        val option = animationOption ?: return this
-        val progress = option.progress.value
-        if (progress >= 1f) return this
-
-        val targetWidth = option.targetBounds.width.roundToInt().coerceAtLeast(0)
-        val targetHeight = option.targetBounds.height.roundToInt().coerceAtLeast(0)
-        val animatedMinWidth = lerpPx(targetWidth, minWidth, progress)
-            .coerceInBounds(maxWidth)
-        val animatedMaxWidth = lerpMaxPx(targetWidth, maxWidth, progress)
-            .coerceAtLeast(animatedMinWidth)
-        val animatedMinHeight = lerpPx(targetHeight, minHeight, progress)
-            .coerceInBounds(maxHeight)
-        val animatedMaxHeight = lerpMaxPx(targetHeight, maxHeight, progress)
-            .coerceAtLeast(animatedMinHeight)
-
-        return copy(
-            minWidth = animatedMinWidth,
-            maxWidth = animatedMaxWidth,
-            minHeight = animatedMinHeight,
-            maxHeight = animatedMaxHeight,
-        )
-    }
-
-    private fun lerpPx(
-        start: Int,
-        stop: Int,
-        fraction: Float,
-    ): Int = androidx.compose.ui.util.lerp(
-        start.toFloat(),
-        stop.toFloat(),
-        fraction,
-    ).roundToInt()
-
-    private fun lerpMaxPx(
-        start: Int,
-        stop: Int,
-        fraction: Float,
-    ): Int {
-        if (stop == Constraints.Infinity) return Constraints.Infinity
-        return lerpPx(start, stop, fraction)
-    }
-
-    private fun Int.coerceInBounds(max: Int): Int {
-        if (max == Constraints.Infinity) return coerceAtLeast(0)
-        return coerceIn(0, max)
-    }
-
-    private fun Placeable?.verticalCenterOffset(space: Int): Int {
-        if (this == null) return 0
-        return Alignment.CenterVertically.align(safeHeight, space)
-    }
-
-    private fun Placeable?.horizontalCenterOffset(
-        space: Int,
-        layoutDirection: LayoutDirection
-    ): Int {
-        if (this == null) return 0
-        return Alignment.CenterHorizontally.align(safeWidth, space, layoutDirection)
-    }
-}
-
-private val EMPTY_FUNC = {}
-
-@Stable
-data class LiteInputSearchProps(
-    val textFieldState: MutableState<String>,
-    val onValueChange: (String) -> Unit,
-    val onClear: () -> Unit = EMPTY_FUNC,
-    val clearCondition: (() -> Boolean)? = null,
-    val modifier: Modifier = Modifier,
-    val onFocused: (() -> Unit) = EMPTY_FUNC,
-    val keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
-    val keyboardActions: KeyboardActions = KeyboardActions.Default,
-    val onKeyboardAction: (() -> Unit) = EMPTY_FUNC,
-
-    val btnText: String? = null,
-    val isShowBtnText: Boolean = !btnText.isNullOrEmpty(),
-    val onPressBtnText: (() -> Unit) = EMPTY_FUNC,
-
-    val disabled: Boolean = false,
-
-    val placeHolder: String? = null,
-
-    val cursorBrush: Brush? = null,
-    val customBackIcon: @Composable ((Modifier) -> Unit)? = null,
-    val customSearchIcon: @Composable (() -> Unit)? = null,
-    val customPlaceHolder: @Composable (() -> Unit)? = null,
-    val customTextStyle: TextStyle? = null,
-    val customIconClear: @Composable (() -> Unit)? = null,
-    val iconRightTextField: @Composable ((Modifier) -> Unit)? = null,
-)
-
-@Composable
-private fun LiteInputSearch(
-    modifier: Modifier = Modifier,
-    inputSearchProps: LiteInputSearchProps? = null,
-) {
-    inputSearchProps ?: return
-    val theme = AppTheme.current
-
-    val isFocused = remember { mutableStateOf(false) }
-    val interactionSource = remember { MutableInteractionSource() }
-    val textState by remember { inputSearchProps.textFieldState }
-
-    val isShowBtnText = inputSearchProps.isShowBtnText &&
-        !inputSearchProps.btnText.isNullOrEmpty()
-    val inputFieldFontFamily = getFontFamily(theme.font, Typography.bodyDefaultRegular.fontWeight)
-    val inputFieldStyle = remember(theme, inputFieldFontFamily) {
-        Typography.bodyDefaultRegular.copy(
-            color = theme.colors.text.default,
-            fontFamily = inputFieldFontFamily,
-        )
-    }
-
-    LaunchedEffect(inputSearchProps.onFocused) {
-        interactionSource.interactions.mapNotNull { it as? FocusInteraction }.collectLatest {
-            val isFocus = it is FocusInteraction.Focus
-            isFocused.value = isFocus
-            if (isFocus) inputSearchProps.onFocused()
-        }
-    }
-
-    Row(
-        modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        val textFieldModifier = remember(inputSearchProps.modifier) {
-            inputSearchProps.modifier
-                .weight(1f)
-        }
-        BasicTextField(
-            value = textState,
-            onValueChange = inputSearchProps.onValueChange,
-            enabled = !inputSearchProps.disabled,
-            keyboardOptions = inputSearchProps.keyboardOptions,
-            keyboardActions = inputSearchProps.keyboardActions,
-            modifier = textFieldModifier,
-            textStyle = inputSearchProps.customTextStyle ?: inputFieldStyle,
-            singleLine = true,
-            cursorBrush = inputSearchProps.cursorBrush ?: SolidColor(Color.Black),
-            interactionSource = interactionSource,
-            decorationBox = { innerTextField ->
-                val isShowClear by remember(inputSearchProps.clearCondition, isFocused.value) {
-                    derivedStateOf {
-                        inputSearchProps.clearCondition?.invoke() == true || (isFocused.value && textState.isNotEmpty())
-                    }
-                }
-                val placeHolder = inputSearchProps.placeHolder
-                    ?.takeIf { textState.isEmpty() }
-                val iconRightModifier = remember {
-                    Modifier
-                        .padding(start = Spacing.L)
-                        .drawWithContent {
-                            val offsetX = -Spacing.S.toPx()
-                            drawLine(
-                                start = Offset(
-                                    x = offsetX,
-                                    y = 0f,
-                                ),
-                                end = Offset(
-                                    x = offsetX,
-                                    y = size.height,
-                                ),
-                                color = theme.colors.primary,
-                                strokeWidth = 1.dp.toPx(),
-                            )
-                            drawContent()
-                        }
-                }
-
-                Row(
-                    modifier = Modifier
-                        .padding(
-                            horizontal = Spacing.M,
-                            vertical = Spacing.S,
-                        ),
-                    horizontalArrangement = Arrangement.Start,
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    inputSearchProps.customSearchIcon?.invoke() ?: Icon(
-                        source = "navigation_search",
-                        modifier = Modifier.padding(end = Spacing.XS),
-                        size = 24.dp,
-                        color = theme.colors.text.hint
-                    )
-                    Box(
-                        modifier = Modifier.weight(1f),
-                        contentAlignment = Alignment.CenterStart,
-                    ) {
-                        if (!placeHolder.isNullOrEmpty()) {
-                            inputSearchProps.customPlaceHolder?.invoke() ?: Text(
-                                text = placeHolder,
-                                style = inputSearchProps.customTextStyle
-                                    ?: Typography.bodyDefaultRegular,
-                                maxLines = 1,
-                                color = theme.colors.text.hint,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                        }
-                        innerTextField()
-                    }
-
-                    if (isShowClear) {
-                        inputSearchProps.customIconClear?.invoke() ?: Icon(
-                            source = "24_navigation_close_circle_full",
-                            size = 16.dp,
-                            color = theme.colors.text.hint,
-                            modifier = Modifier.padding(start = Spacing.XS)
-                                .noFeedbackClickable(onClick = inputSearchProps.onClear),
-                        )
-                    }
-
-                    inputSearchProps.iconRightTextField?.invoke(iconRightModifier)
-                }
-            }
-        )
-
-        if (isShowBtnText) {
-            Text(
-                text = inputSearchProps.btnText,
-                style = Typography.actionDefaultBold,
-                color = theme.colors.text.default,
-                modifier = Modifier.padding(start = Spacing.L)
-                    .noFeedbackClickable(onClick = inputSearchProps.onPressBtnText)
-            )
-        }
-    }
-}