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

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

@@ -1,5 +1,6 @@
 package vn.momo.kits.application
 
+import androidx.annotation.FloatRange
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.background
@@ -9,22 +10,18 @@ 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.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.ime
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -48,6 +45,7 @@ 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.graphicsLayer
@@ -63,27 +61,57 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.text.TextStyle
 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.sp
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color.Companion
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.unit.lerp
+import kotlinx.coroutines.flow.StateFlow
 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.Radius
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.const.Typography
+import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.kitsAutomationId
 import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.modifier.setAutomationId
 import vn.momo.kits.modifier.shadow
 import vn.momo.kits.utils.getAppStatusBarHeight
 import kotlin.math.max
+import kotlin.math.roundToInt
+
+
+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 }
 
 @Composable
 fun LiteScreen(
@@ -101,6 +129,9 @@ fun LiteScreen(
     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,
@@ -109,45 +140,46 @@ fun LiteScreen(
 
     val finalScrollState = scrollState ?: rememberScrollState()
 
-    Column(
+    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()
-            .background(color = backgroundColor)
             .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,
     ) {
-        val contentModifier = remember(scrollable, finalScrollState) {
-            var res = Modifier.weight(1f)
-            if (scrollable) {
-                res = res.verticalScroll(finalScrollState)
-            }
-            res
-        }
-
-        LiteScreenHeader(
-            scrollState = finalScrollState,
-            title = title,
-            headerRight = headerRight,
-            headerType = headerType,
-            onGoBack = goBack,
-            inputSearchProps = inputSearchProps,
-            titlePosition = titlePosition,
-            useAnimationSearch = useAnimationSearch,
-            headerRightData = headerRightData,
-        )
-
-        Box(
-            modifier = contentModifier,
-            contentAlignment = Alignment.TopCenter,
-        ) {
-            content()
-        }
+        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"
@@ -157,8 +189,12 @@ private object HeaderId {
 }
 
 @Composable
-private fun LiteScreenHeader(
+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,
@@ -166,13 +202,15 @@ private fun LiteScreenHeader(
     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()
-    if (headerType == HeaderType.NONE) {
-        Box(modifier = Modifier.height(statusBarHeight))
-        return
+    val isHeaderNone = remember(headerType) {
+        headerType == HeaderType.NONE
     }
     val theme = AppTheme.current
     val density = LocalDensity.current
@@ -180,9 +218,12 @@ private fun LiteScreenHeader(
     val isHeaderExtend = remember(headerType) {
         headerType == HeaderType.EXTENDED
     }
-    val backgroundHeight = remember(isHeaderExtend, statusBarHeight) {
-        if (!isHeaderExtend) statusBarHeight + HEADER_HEIGHT.dp
-        else HeaderId.EXTENDED_HEADER_HEIGHT
+    val backgroundHeight = remember(isHeaderNone, isHeaderExtend, statusBarHeight) {
+        when {
+            isHeaderNone -> statusBarHeight
+            !isHeaderExtend -> statusBarHeight + HEADER_HEIGHT.dp
+            else -> HeaderId.EXTENDED_HEADER_HEIGHT
+        }
     }
     val listGradientColors = remember {
         listOf(
@@ -225,68 +266,104 @@ private fun LiteScreenHeader(
         )
     }
 
-    val titleModifier = remember {
-        Modifier
-            .kitsAutomationId("title_navigation_header")
-            .layoutId(HeaderId.TITLE_ID)
-            .graphicsLayer {
-                alpha = if (isHeaderExtend && inputSearchProps != null && useAnimationSearch)
-                    (1 - scrollPercentage.value * 2).coerceIn(0f, 1f)
-                else 1f
-            }
+    val animationOption = LocalAnimationOption.current
+    val animationOpacityModifier = Modifier.graphicsLayer {
+        alpha = animationOption?.animateOpacity ?: 1f
     }
+    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(
         useAnimationSearch,
+        isHeaderNone,
         isHeaderExtend,
         statusBarHeight,
         titlePosition,
         scrollPercentage,
+        headerSpaceBetween,
+        animationOption,
+        verticalArrangement,
+        horizontalAlignment,
     ) {
-        LiteScreenHeaderPolicy(
+        LiteScreenLayoutPolicy(
             useAnimationSearch = useAnimationSearch,
+            isHeaderNone = isHeaderNone,
             isHeaderExtend = isHeaderExtend,
             statusBarHeight = statusBarHeight,
             titlePosition = titlePosition,
             scrollPercentage = scrollPercentage,
+            headerSpaceBetween = headerSpaceBetween,
+            animationOption = animationOption,
+            verticalArrangement = verticalArrangement,
+            horizontalAlignment = horizontalAlignment,
         )
     }
 
     Layout(
-        modifier = Modifier
-            .animateContentSize()
-            .drawBehind {
-                val headerHeight = max(
-                    HeaderId.EXTENDED_HEADER_HEIGHT.toPx(),
-                    size.height,
-                )
-                drawRect(color = Colors.black_01)
-                drawRect(
-                    brush = Brush.linearGradient(
-                        colors = listGradientColors,
-                        start = Offset.Zero,
-                        end = Offset(
-                            x = 0f,
-                            y = headerHeight * (1 - scrollPercentage.value),
-                        ),
-                    )
-                )
-            },
+        modifier = modifier
+            .animateContentSize(),
         content = {
-            if (onGoBack != null) {
+            Box(
+                modifier = animationOpacityModifier
+                    .layoutId(HeaderId.CONTENT_ID)
+                    .then(contentModifier),
+                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) {
+                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)
-                        .layoutId(HeaderId.BACK_ID)
-                        .clip(CircleShape)
                         .border(
                             width = 0.2.dp,
                             color = headerColor.borderColor,
                             shape = CircleShape,
                         )
                         .background(color = headerColor.backgroundButton)
-                        .noFeedbackClickable(onClick = onGoBack)
-                        .setAutomationId("btn_navigation_back")
                         .padding(Spacing.XS),
                 ) {
                     Icon(
@@ -297,27 +374,30 @@ private fun LiteScreenHeader(
                 }
             }
 
-            Box(
-                modifier = Modifier
-                    .layoutId(HeaderId.HEADER_RIGHT_ID)
-            ) {
-                if (headerRight != null) {
-                    headerRight()
-                } else {
-                    HeaderRight(
-                        headerRight = headerRightData,
-                        tintColor = tintColor,
-                    )
+            if (!isHeaderNone) {
+                Box(
+                    modifier = Modifier
+                        .layoutId(HeaderId.HEADER_RIGHT_ID)
+                        .then(animationOpacityModifier)
+                ) {
+                    if (headerRight != null) {
+                        headerRight()
+                    } else {
+                        HeaderRight(
+                            headerRight = headerRightData,
+                            tintColor = tintColor,
+                        )
+                    }
                 }
             }
 
-            if (inputSearchProps != null) {
+            if (!isHeaderNone && inputSearchProps != null) {
                 LiteInputSearch(
                     modifier = Modifier.layoutId(HeaderId.INPUT_SEARCH_ID),
                     inputSearchProps = inputSearchProps,
                 )
             }
-            if (title != null && (inputSearchProps == null || isHeaderExtend)) {
+            if (!isHeaderNone && title != null && (inputSearchProps == null || isHeaderExtend)) {
                 Text(
                     text = title,
                     color = headerColor.tintIconColor,
@@ -332,22 +412,39 @@ private fun LiteScreenHeader(
     )
 }
 
-private class LiteScreenHeaderPolicy(
+private class LiteScreenLayoutPolicy(
     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 scrollPercent = scrollPercentage.value
 
+        val contentMeasurable = measurables.find { it.layoutId == HeaderId.CONTENT_ID }
+
         val realConstraints = constraints.copy(
             minWidth = 0,
             minHeight = 0,
@@ -362,9 +459,9 @@ private class LiteScreenHeaderPolicy(
                     maxWidth = realConstraints.maxWidth / 2,
                 )
             )
-        val inputSearchConstraints = if (isHeaderExtend) {
+        val baseInputSearchConstraints = if (isHeaderExtend) {
             val minWidth =
-                if (useAnimationSearch) realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spacing12 * 2
+                if (useAnimationSearch) realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
                 else realConstraints.maxWidth
             realConstraints.copy(
                 maxWidth = (realConstraints.maxWidth * (1 - scrollPercent)).toInt()
@@ -372,17 +469,18 @@ private class LiteScreenHeaderPolicy(
             )
         } else {
             var spaceConsumed = 0
-            if (backIconPlaceable.safeWidth != 0) spaceConsumed += backIconPlaceable.safeWidth + spacing12
-            if (headerRightPlaceable.safeWidth != 0) spaceConsumed += headerRightPlaceable.safeWidth + spacing12
+            if (backIconPlaceable.safeWidth != 0) spaceConsumed += backIconPlaceable.safeWidth + 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 - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spacing12 * 2
+                maxWidth = realConstraints.maxWidth - backIconPlaceable.safeWidth - headerRightPlaceable.safeWidth - spaceBetween * 2
             )
         )
 
@@ -392,6 +490,7 @@ private class LiteScreenHeaderPolicy(
             if (!isHeaderExtend) {
                 add(inputSearchPlaceable.safeHeight)
             }
+            add(HEADER_HEIGHT.dp.roundToPx())
             if (isHeaderExtend) {
                 add(titlePlaceable.safeHeight)
             }
@@ -401,37 +500,86 @@ private class LiteScreenHeaderPolicy(
         if (isHeaderExtend) {
             defaultHeight += inputSearchPlaceable.safeHeight + spacing12
         }
-        val height = when {
+        val headerHeight = when {
+            isHeaderNone -> statusBarPx
             !useAnimationSearch && !isHeaderExtend -> defaultHeight
             else -> (defaultHeight - scrollPercent * (defaultHeight - statusBarPx - HEADER_HEIGHT.dp.roundToPx())).toInt()
         }
 
+        val layoutWidth = constraints.maxWidth
+        val layoutHeight = constraints.maxHeight
+        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 = constraints.maxWidth,
-            height = height,
+            width = layoutWidth,
+            height = layoutHeight,
         ) {
+            val progress = animationOption?.progress?.value ?: 1f
+
             val startX = spacing12
-            val startY = statusBarPx + 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 = 0,
+                y = headerY,
+            )
+
             if (backIconPlaceable != null) {
                 backIconPlaceable.place(
                     x = startX,
                     y = startY + backIconPlaceable.verticalCenterOffset(firstRowMaxHeight),
                 )
-                curX += backIconPlaceable.safeWidth + spacing12
+                curX += backIconPlaceable.safeWidth + spaceBetween
             }
 
             headerRightPlaceable?.place(
-                x = constraints.maxWidth - spacing12 - headerRightPlaceable.safeWidth,
+                x = layoutWidth - spacing12 - headerRightPlaceable.safeWidth,
                 y = startY + headerRightPlaceable.verticalCenterOffset(firstRowMaxHeight),
             )
 
             val titleOffset = IntOffset(
                 x = if (titlePosition == TitlePosition.LEFT) curX
                 else titlePlaceable.horizontalCenterOffset(
-                    space = constraints.maxWidth,
+                    space = layoutWidth,
                     layoutDirection = layoutDirection,
                 ),
                 y = startY + titlePlaceable.verticalCenterOffset(firstRowMaxHeight),
@@ -440,17 +588,19 @@ private class LiteScreenHeaderPolicy(
             titlePlaceable?.place(titleOffset)
 
             if (backIconPlaceable != null || headerRightPlaceable != null || titlePlaceable != null) {
-                curY += firstRowMaxHeight + spacing12
+                curY += firstRowMaxHeight
             }
 
             val inputSearchOffset = if (isHeaderExtend) {
+                val baseY = curY + inputSearchPlaceable.verticalCenterOffset(firstRowMaxHeight)
+                val y = (baseY * (1 - scrollPercent)).toInt().coerceAtLeast(
+                    startY + inputSearchPlaceable.verticalCenterOffset(firstRowMaxHeight)
+                )
                 IntOffset(
-                    x = startX + ((backIconPlaceable.safeWidth + spacing12) * (scrollPercent * 2f).coerceIn(
+                    x = startX + ((backIconPlaceable.safeWidth + spaceBetween) * (scrollPercent * 2f).coerceIn(
                         0f, 1f
                     )).toInt(),
-                    y = (curY * (1 - scrollPercent)).toInt().coerceAtLeast(
-                        startY + inputSearchPlaceable.verticalCenterOffset(firstRowMaxHeight)
-                    ),
+                    y = y,
                 )
             } else {
                 IntOffset(
@@ -458,8 +608,15 @@ private class LiteScreenHeaderPolicy(
                     y = startY + inputSearchPlaceable.verticalCenterOffset(firstRowMaxHeight),
                 )
             }
+            val finalPosition = lerp(
+                searchStartPosition,
+                inputSearchOffset,
+                progress,
+            )
 
-            inputSearchPlaceable?.place(inputSearchOffset)
+            inputSearchPlaceable?.place(
+                finalPosition
+            )
         }
     }
 
@@ -468,6 +625,54 @@ private class LiteScreenHeaderPolicy(
     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)
@@ -504,6 +709,12 @@ data class LiteInputSearchProps(
 
     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,
 )
 
@@ -545,7 +756,6 @@ private fun LiteInputSearch(
         val textFieldModifier = remember(inputSearchProps.modifier) {
             inputSearchProps.modifier
                 .weight(1f)
-                .sizeIn(minHeight = 36.dp)
         }
         BasicTextField(
             value = textState,
@@ -554,8 +764,9 @@ private fun LiteInputSearch(
             keyboardOptions = inputSearchProps.keyboardOptions,
             keyboardActions = inputSearchProps.keyboardActions,
             modifier = textFieldModifier,
-            textStyle = inputFieldStyle,
+            textStyle = inputSearchProps.customTextStyle ?: inputFieldStyle,
             singleLine = true,
+            cursorBrush = inputSearchProps.cursorBrush ?: SolidColor(Color.Black),
             interactionSource = interactionSource,
             decorationBox = { innerTextField ->
                 val isShowClear by remember(inputSearchProps.clearCondition, isFocused.value) {
@@ -592,10 +803,6 @@ private fun LiteInputSearch(
 
                 Row(
                     modifier = Modifier
-                        .background(
-                            color = theme.colors.background.surface,
-                            shape = RoundedCornerShape(Radius.XL),
-                        )
                         .padding(
                             horizontal = Spacing.M,
                             vertical = Spacing.S,
@@ -603,7 +810,7 @@ private fun LiteInputSearch(
                     horizontalArrangement = Arrangement.Start,
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
-                    Icon(
+                    inputSearchProps.customSearchIcon?.invoke() ?: Icon(
                         source = "navigation_search",
                         modifier = Modifier.padding(end = Spacing.XS),
                         size = 24.dp,
@@ -614,9 +821,9 @@ private fun LiteInputSearch(
                         contentAlignment = Alignment.CenterStart,
                     ) {
                         if (!placeHolder.isNullOrEmpty()) {
-                            Text(
+                            inputSearchProps.customPlaceHolder?.invoke() ?: Text(
                                 text = placeHolder ?: "",
-                                style = Typography.bodyDefaultRegular,
+                                style = inputSearchProps.customTextStyle ?: Typography.bodyDefaultRegular,
                                 maxLines = 1,
                                 color = theme.colors.text.hint,
                                 overflow = TextOverflow.Ellipsis
@@ -626,7 +833,7 @@ private fun LiteInputSearch(
                     }
 
                     if (isShowClear) {
-                        Icon(
+                        inputSearchProps.customIconClear?.invoke() ?: Icon(
                             source = "24_navigation_close_circle_full",
                             size = 16.dp,
                             color = theme.colors.text.hint,
@@ -717,4 +924,4 @@ fun Modifier.hideKeyboardOnTap() = composed {
             focusManager.clearFocus()
         }
     }
-}
+}