@momo-kits/native-kits 0.167.1-duo.21 → 0.167.1-duo.21-debug

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

@@ -0,0 +1,951 @@
+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.produceState
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.snapshotFlow
+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.drawBehind
+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.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 = produceState(
+        initialValue = 0f,
+        key1 = useAnimationSearch,
+        key2 = scrollState,
+        key3 = backgroundHeight,
+    ) {
+        if (!useAnimationSearch) return@produceState
+        scrollState ?: return@produceState
+        val rangePx = with(density) { backgroundHeight.toPx() }
+        snapshotFlow { scrollState.value }.collectLatest {
+            value = (it / 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)
+                        .drawBehind {
+                            val headerHeight = max(
+                                HeaderId.EXTENDED_HEADER_HEIGHT.toPx(),
+                                size.height,
+                            )
+                            headerBackgroundColor?.let {
+                                drawRect(color = it)
+                            } ?: run {
+                                drawRect(color = Colors.black_01)
+                                drawRect(
+                                    brush = Brush.linearGradient(
+                                        colors = listGradientColors,
+                                        start = Offset.Zero,
+                                        end = Offset(
+                                            x = 0f,
+                                            y = headerHeight * (1 - scrollPercentage.value),
+                                        ),
+                                    )
+                                )
+                            }
+                        },
+                )
+            }
+
+            if (!isHeaderNone && onGoBack != null) {
+                when {
+                    screenLayout.sideBar != 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 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 {
+
+    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 safeWidth = (constraints.maxWidth - insetLeft - insetRight).coerceAtLeast(0)
+        val realConstraints = constraints.copy(
+            minWidth = 0,
+            minHeight = 0,
+            maxWidth = (safeWidth - 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 = statusBarPx + headerRowDefault
+        if (isHeaderExtend) {
+            defaultHeight = 154.dp.roundToPx()
+        }
+        val headerHeight = when {
+            isHeaderNone -> statusBarPx
+            !useAnimationSearch && !isHeaderExtend -> defaultHeight
+            else -> {
+                val collapsableSpace = defaultHeight - 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 = insetLeft + spacing12
+            val startY = headerY + statusBarPx
+            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 = layoutWidth - insetRight - spacing12 - headerRightPlaceable.safeWidth,
+                y = startY + headerRightPlaceable.verticalCenterOffset(headerRowDefault),
+            )
+
+            val titleOffset = IntOffset(
+                x = if (titlePosition == TitlePosition.LEFT) curX
+                else insetLeft + titlePlaceable.horizontalCenterOffset(
+                    space = safeWidth - 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 by remember(inputSearchProps.isShowBtnText, inputSearchProps.btnText) {
+        derivedStateOf {
+            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 by produceState<String?>(null, inputSearchProps.placeHolder) {
+                    if (inputSearchProps.placeHolder.isNullOrEmpty()) return@produceState
+                    snapshotFlow { textState }.collectLatest {
+                        value = if (it.isEmpty()) inputSearchProps.placeHolder else null
+                    }
+                }
+                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)
+            )
+        }
+    }
+}
+
+fun Modifier.hideKeyboardOnTap() = composed {
+    val focusManager = LocalFocusManager.current
+    val keyboardManager = LocalSoftwareKeyboardController.current
+
+    pointerInput(Unit) {
+        detectTapGestures {
+            keyboardManager?.hide()
+            focusManager.clearFocus()
+        }
+    }
+}