@momo-kits/native-kits 0.163.1-beta.1-debug → 0.163.1-beta.10-debug

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

@@ -8,13 +8,7 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.snapshotFlow
+import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.unit.dp
@@ -24,6 +18,7 @@ import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.Colors
 import vn.momo.kits.modifier.conditional
 import kotlin.math.absoluteValue
+import kotlin.time.Duration.Companion.milliseconds
 
 @Composable
 fun Carousel(
@@ -32,7 +27,6 @@ fun Carousel(
     loop: Boolean = false,
     autoplay: Boolean = false,
     autoplayInterval: Long = 3000L,
-    enableSnap: Boolean = true,
     scrollEnabled: Boolean = true,
     inactiveSlideOpacity: Float = 1f,
     inactiveSlideScale: Float = 1f,
@@ -48,18 +42,15 @@ fun Carousel(
 
     val pagerState = rememberPagerState(initialPage = startPage) { virtualPageCount }
 
-    // Map virtual page to real index
     val realIndex: (Int) -> Int = { page -> page % itemCount }
 
-    // Track user interaction for autoplay pause
     var isUserScrolling by remember { mutableStateOf(false) }
 
-    // Autoplay
     if (autoplay && itemCount > 1) {
         LaunchedEffect(autoplayInterval, isUserScrolling) {
             if (isUserScrolling) return@LaunchedEffect
             while (isActive) {
-                delay(autoplayInterval)
+                delay(autoplayInterval.milliseconds)
                 if (!isUserScrolling) {
                     val nextPage = pagerState.currentPage + 1
                     if (nextPage < virtualPageCount) {
@@ -70,7 +61,6 @@ fun Carousel(
         }
     }
 
-    // Track scroll state for callbacks
     LaunchedEffect(pagerState) {
         snapshotFlow { pagerState.isScrollInProgress }.collect { scrolling ->
             isUserScrolling = scrolling

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

@@ -22,7 +22,6 @@ import vn.momo.kits.const.Typography
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
 
-// Pre-computed shape for performance
 private val checkboxShape = RoundedCornerShape(Radius.XS)
 
 @Composable
@@ -33,10 +32,8 @@ fun CheckBox(
     indeterminate: Boolean = false,
     title: String = "",
 ) {
-    // Cache theme access
     val theme = AppTheme.current
 
-    // Memoize color calculations to avoid repeated conditional logic
     val colors = remember(checked, disabled, theme) {
         when {
             disabled && checked -> Pair(theme.colors.background.tonal, theme.colors.background.tonal)
@@ -48,12 +45,10 @@ fun CheckBox(
 
     val (borderColor, backgroundColor) = colors
 
-    // Memoize icon source to avoid repeated conditional check
     val iconSource = remember(indeterminate) {
         if (indeterminate) "navigation_minus" else "ic_checked"
     }
 
-    // Memoize click handler to avoid lambda recreation
     val onClickHandler = remember(onCheckedChange, checked) {
         { onCheckedChange(!checked) }
     }

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

@@ -2,11 +2,7 @@ package vn.momo.kits.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
@@ -17,12 +13,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Typography
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.scaleSize
+import vn.momo.kits.const.*
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId
@@ -111,7 +103,7 @@ fun Chip(
 
 enum class ChipSize { SMALL, LARGE }
 
-object ChipDefaults {
+private object ChipDefaults {
     @Immutable
     data class Dimensions(
         val height: Float,

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

@@ -7,20 +7,9 @@ import androidx.compose.animation.expandVertically
 import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -29,11 +18,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
-import vn.momo.kits.const.AppTheme
-import vn.momo.kits.const.Colors
-import vn.momo.kits.const.Radius
-import vn.momo.kits.const.Spacing
-import vn.momo.kits.const.Typography
+import vn.momo.kits.const.*
 import vn.momo.kits.modifier.activeOpacityClickable
 import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.setAutomationId

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

@@ -42,8 +42,8 @@ import androidx.compose.ui.unit.toOffset
 import androidx.compose.ui.unit.toSize
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.cancel
+import kotlinx.coroutines.currentCoroutineContext
 import kotlinx.coroutines.isActive
-import kotlin.coroutines.coroutineContext
 import kotlin.math.abs
 import kotlin.math.sign
 
@@ -103,7 +103,7 @@ internal class CupertinoOverscrollEffect(
      * end at the same time, which is not the case:
      * Spring->Fling->Spring, Fling->Spring, Spring->Fling effects can have different timing per dimension
      * (see Notes of https://github.com/JetBrains/compose-multiplatform-core/pull/609),
-     * which is not possible to express without changing API. Hence this effect will be fixed to latest
+     * which is not possible to express without changing API. Hence, this effect will be fixed to latest
      * received delta.
      */
     private var direction: CupertinoOverscrollDirection = CupertinoOverscrollDirection.UNKNOWN
@@ -151,7 +151,7 @@ internal class CupertinoOverscrollEffect(
     override val node: DelegatableNode get() = overscrollNode
 
     private fun onDraw() {
-        // Fix an issue where scrolling was cancelled but the overscroll effect was not completed.
+        // Fix an issue where scrolling was canceled but the overscroll effect was not completed.
         // Reset the overscroll effect when no ongoing animation or interaction is applied.
         if (!drawCallScheduledByOffsetChange && isInProgress && overscrollNode.pointersDown == 0) {
             overscrollOffsetState.value = Offset.Zero
@@ -289,7 +289,7 @@ internal class CupertinoOverscrollEffect(
     }
 
     private fun applyPullToRefresh() {
-        val (isRefresh, refresh, threshHold, _, sendHaptic) = pullRefreshState ?: return
+        val (isRefresh, refresh, threshHold, _, _) = pullRefreshState ?: return
         val overscrollY = overscrollOffset.y
         if (isRefresh.value || overscrollY < threshHold.value * density) return
         refresh.invoke()
@@ -398,7 +398,7 @@ internal class CupertinoOverscrollEffect(
         }
 
         springAnimationScope?.cancel()
-        springAnimationScope = CoroutineScope(coroutineContext)
+        springAnimationScope = CoroutineScope(currentCoroutineContext())
         springAnimationScope?.run {
             AnimationState(
                 Float.VectorConverter,
@@ -414,7 +414,7 @@ internal class CupertinoOverscrollEffect(
                 } ?: (value * density).toOffset()
                 currentVelocity = velocity * density
 
-                // If it was fling from overscroll, cancel animation and return velocity
+                // If it was flung from overscroll, cancel animation and return velocity
                 if (reason == CupertinoSpringAnimationReason.FLING_FROM_OVERSCROLL &&
                     initialSign != 0f &&
                     sign(value) != initialSign
@@ -425,7 +425,7 @@ internal class CupertinoOverscrollEffect(
             springAnimationScope = null
         }
 
-        if (coroutineContext.isActive) {
+        if (currentCoroutineContext().isActive) {
             // The spring is critically damped, so in case spring-fling-spring sequence is slightly
             // offset and velocity is of the opposite sign, it will end up with no animation
             overscrollOffset = Offset.Zero
@@ -447,8 +447,8 @@ internal class CupertinoOverscrollEffect(
         val dpSize = scrollSize / density
 
         return Offset(
-            rubberBandedValue(dpOffset.x, dpSize.width, RUBBER_BAND_COEFFICIENT),
-            rubberBandedValue(dpOffset.y, dpSize.height, RUBBER_BAND_COEFFICIENT)
+            rubberBandedValue(dpOffset.x, dpSize.width),
+            rubberBandedValue(dpOffset.y, dpSize.height)
         ) * density
     }
 
@@ -456,8 +456,8 @@ internal class CupertinoOverscrollEffect(
      * Maps raw delta offset [value] on an axis within scroll container with [dimension]
      * to actual visible offset
      */
-    private fun rubberBandedValue(value: Float, dimension: Float, coefficient: Float) =
-        sign(value) * (1f - (1f / (abs(value) * coefficient / dimension + 1f))) * dimension
+    private fun rubberBandedValue(value: Float, dimension: Float) =
+        sign(value) * (1f - (1f / (abs(value) * RUBBER_BAND_COEFFICIENT / dimension + 1f))) * dimension
 
     companion object Companion {
         private const val RUBBER_BAND_COEFFICIENT = 0.55f

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

@@ -5,6 +5,7 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -12,6 +13,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.IsShowBaseLineDebug
@@ -21,69 +23,58 @@ import vn.momo.kits.const.Radius
 import vn.momo.kits.modifier.conditional
 
 data class IconSpecs(
-    val width: Dp,
-    val height: Dp,
-    val radius: Dp,
-    val size: Dp
+    val box: Dp,
+    val icon: Dp,
 )
 
 enum class IconSize(val value: IconSpecs) {
-    LARGE(
-        IconSpecs(
-            height = 48.dp,
-            radius = Radius.XL,
-            width = 48.dp,
-            size = 48.dp
-        )
-    ),
-    SMALL(
-        IconSpecs(
-            height = 40.dp,
-            radius = Radius.XL,
-            width = 40.dp,
-            size = 40.dp
-        )
-    )
+    LARGE(IconSpecs(box = 48.dp, icon = 24.dp)),
+    MEDIUM(IconSpecs(box = 36.dp, icon = 16.dp)),
+    SMALL(IconSpecs(box = 28.dp, icon = 16.dp)),
+}
+
+enum class IconShape {
+    CIRCLE,
+    SQUARE,
 }
 
-// Pre-computed shape to avoid repeated creation
-private val iconButtonShape = RoundedCornerShape(Radius.XL)
+// Square keeps an 8dp rounded corner; circle is fully rounded regardless of size.
+private val squareShape = RoundedCornerShape(Radius.S)
 
-// Cache for icon sizes to avoid repeated calculations
-private val iconSizeMap = mapOf(
-    IconSize.SMALL to 16.dp,
-    IconSize.LARGE to 24.dp
-)
+private fun IconShape.toShape(): Shape = when (this) {
+    IconShape.CIRCLE -> CircleShape
+    IconShape.SQUARE -> squareShape
+}
 
 @Composable
-fun getIconStyle(type: ButtonType, color: Color? = null): Modifier {
+internal fun getIconStyle(type: ButtonType, shape: Shape, color: Color? = null): Modifier {
     val theme = AppTheme.current
 
-    return remember(type, color, theme) {
+    return remember(type, shape, color, theme) {
         when (type) {
             ButtonType.DISABLED -> Modifier
-                .background(theme.colors.background.disable, iconButtonShape)
-                .border(0.dp, Color.Unspecified, iconButtonShape)
+                .background(theme.colors.background.disable, shape)
+                .border(0.dp, Color.Unspecified, shape)
 
             ButtonType.PRIMARY -> Modifier
-                .background(theme.colors.primary, iconButtonShape)
-                .border(0.dp, Color.Unspecified, iconButtonShape)
+                .background(theme.colors.primary, shape)
+                .border(0.dp, Color.Unspecified, shape)
 
             ButtonType.SECONDARY -> Modifier
-                .background(theme.colors.background.surface, iconButtonShape)
-                .border(1.dp, theme.colors.border.default, iconButtonShape)
+                .background(theme.colors.background.surface, shape)
+                .border(1.dp, theme.colors.border.default, shape)
 
             ButtonType.OUTLINE -> Modifier
-                .background(theme.colors.background.surface, iconButtonShape)
-                .border(1.dp, color ?: theme.colors.primary, iconButtonShape)
+                .background(theme.colors.background.surface, shape)
+                .border(1.dp, color ?: theme.colors.primary, shape)
 
             ButtonType.TONAL -> Modifier
-                .background(theme.colors.background.tonal, iconButtonShape)
-                .border(0.dp, Color.Unspecified, iconButtonShape)
+                .background(theme.colors.background.tonal, shape)
+                .border(0.dp, Color.Unspecified, shape)
 
             ButtonType.DANGER -> Modifier
-                .background(theme.colors.error.primary, iconButtonShape)
-                .border(0.dp, Color.Unspecified, iconButtonShape)
+                .background(theme.colors.error.primary, shape)
+                .border(0.dp, Color.Unspecified, shape)
 
             ButtonType.TEXT -> Modifier
         }
@@ -91,18 +82,10 @@ fun getIconStyle(type: ButtonType, color: Color? = null): Modifier {
 }
 
 @Composable
-fun getIconColor(type: ButtonType): Color {
+internal fun getIconColor(type: ButtonType): Color {
     val theme = AppTheme.current
     return remember(type, theme) {
-        when (type) {
-            ButtonType.DISABLED -> theme.colors.text.disable
-            ButtonType.PRIMARY -> Colors.black_01
-            ButtonType.SECONDARY -> theme.colors.text.default
-            ButtonType.OUTLINE -> theme.colors.primary
-            ButtonType.TONAL -> theme.colors.primary
-            ButtonType.DANGER -> Colors.black_01
-            ButtonType.TEXT -> theme.colors.primary
-        }
+        getButtonColor(type, theme)
     }
 }
 
@@ -111,38 +94,32 @@ fun IconButton(
     onClick: () -> Unit,
     type: ButtonType = ButtonType.PRIMARY,
     size: IconSize = IconSize.SMALL,
+    shape: IconShape = IconShape.CIRCLE,
     icon: String = "",
 ) {
-    // Memoize icon size calculation
-    val iconSize = remember(size) {
-        iconSizeMap[size] ?: 16.dp
-    }
+    val specs = size.value
 
-    // Memoize enabled state
     val isEnabled = remember(type) {
         type != ButtonType.DISABLED
     }
 
-    // Memoize radius for clipping
-    val radius = remember(size) {
-        size.value.radius
-    }
+    val boxShape = remember(shape) { shape.toShape() }
 
     Box(
         modifier = Modifier
-            .size(size.value.size)
-            .then(getIconStyle(type))
+            .size(specs.box)
+            .then(getIconStyle(type, boxShape))
             .conditional(IsShowBaseLineDebug) {
                 border(1.dp, Colors.blue_03)
             }
-            .clip(RoundedCornerShape(radius))
+            .clip(boxShape)
             .clickable(enabled = isEnabled, onClick = onClick),
         contentAlignment = Alignment.Center
     ) {
         Icon(
             source = icon,
             color = getIconColor(type),
-            size = iconSize,
+            size = specs.icon,
         )
     }
-}
+}

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

@@ -1,7 +1,9 @@
 package vn.momo.kits.components
 
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -17,10 +19,12 @@ import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import coil3.compose.AsyncImage
+import coil3.compose.AsyncImage as CoilAsyncImage
 import vn.momo.kits.application.IsShowBaseLineDebug
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
+import vn.momo.kits.gifimage.GifImage
+import vn.momo.kits.gifimage.GifImageState
 import vn.momo.kits.modifier.conditional
 
 data class Options(
@@ -73,6 +77,19 @@ private fun getHostFromUrl(url: String): String? {
     }
 }
 
+private fun isGifUrl(url: String): Boolean {
+    val path = url.substringBefore('#').substringBefore('?')
+    return path.endsWith(".gif", ignoreCase = true)
+}
+
+private fun GifImageState.toImageState(): ImageState {
+    return when (this) {
+        GifImageState.Success -> ImageState.Success
+        GifImageState.Error -> ImageState.Error
+        GifImageState.Loading -> ImageState.Loading
+    }
+}
+
 // Optimized query parameter appending
 private fun appendSizeQueryParam(url: String, value: String): String {
     val fragmentIndex = url.indexOf('#')
@@ -95,12 +112,12 @@ fun Image(
     modifier: Modifier = Modifier,
     options: Options? = null,
     loading: Boolean = true,
+    onStateChanged: (ImageState) -> Unit = {},
 ) {
     val imageOptions = remember(options) {
         options ?: Options()
     }
 
-    var imageState by remember { mutableStateOf(ImageState.Loading) }
     val density = LocalDensity.current
 
     BoxWithConstraints(
@@ -121,34 +138,46 @@ fun Image(
                         processedUrl
                     }
                 }
-                else -> source
+                else -> source.toString()
             }
         }
 
-        AsyncImage(
-            modifier = Modifier.matchParentSize(),
-            model = urlToLoad,
-            contentDescription = null,
-            contentScale = imageOptions.contentScale,
-            alignment = imageOptions.alignment,
-            colorFilter = imageOptions.colorFilter,
-            alpha = imageOptions.alpha,
-            onLoading = { imageState = ImageState.Loading },
-            onSuccess = { imageState = ImageState.Success },
-            onError = { imageState = ImageState.Error },
-        )
+        var imageState by remember(urlToLoad) { mutableStateOf(ImageState.Loading) }
+        fun updateImageState(state: ImageState) {
+            imageState = state
+            onStateChanged(state)
+        }
+
+        if (isGifUrl(urlToLoad)) {
+            GifImage(
+                modifier = Modifier.matchParentSize(),
+                url = urlToLoad,
+                contentDescription = null,
+                contentScale = imageOptions.contentScale,
+                alignment = imageOptions.alignment,
+                colorFilter = imageOptions.colorFilter,
+                alpha = imageOptions.alpha,
+                onStateChanged = { updateImageState(it.toImageState()) },
+            )
+        } else {
+            CoilAsyncImage(
+                modifier = Modifier.matchParentSize(),
+                model = urlToLoad,
+                contentDescription = null,
+                contentScale = imageOptions.contentScale,
+                alignment = imageOptions.alignment,
+                colorFilter = imageOptions.colorFilter,
+                alpha = imageOptions.alpha,
+                onLoading = { updateImageState(ImageState.Loading) },
+                onSuccess = { updateImageState(ImageState.Success) },
+                onError = { updateImageState(ImageState.Error) },
+            )
+        }
 
         when (imageState) {
-            ImageState.Loading -> if (loading) Skeleton()
-            ImageState.Error -> {
-                val theme = AppTheme.current
-                Icon(
-                    source = "media_fail",
-                    color = theme.colors.text.disable,
-                    modifier = Modifier.align(Alignment.Center)
-                )
-            }
             ImageState.Success -> {}
+            ImageState.Error -> ImageError()
+            ImageState.Loading -> if (loading) Skeleton()
         }
     }
 }
@@ -156,7 +185,7 @@ fun Image(
 // Extracted URL processing logic for better performance
 private fun processImageUrl(url: String, maxWidth: androidx.compose.ui.unit.Dp, density: androidx.compose.ui.unit.Density): String {
     val host = getHostFromUrl(url)
-    return if (host != null && supportedDomains.contains(host)) {
+    return if (!isGifUrl(url) && host != null && supportedDomains.contains(host)) {
         val widthPx = with(density) { maxWidth.roundToPx() }
         val pixelRatio = density.density
         val pixelFitForWidth = widthPx * pixelRatio
@@ -167,6 +196,20 @@ private fun processImageUrl(url: String, maxWidth: androidx.compose.ui.unit.Dp,
     }
 }
 
+@Composable
+private fun ImageError() {
+    val theme = AppTheme.current
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            source = "media_fail",
+            color = theme.colors.text.disable,
+        )
+    }
+}
+
 @Composable
 fun Image(
     source: Painter,
@@ -185,4 +228,4 @@ fun Image(
         colorFilter = colorFilter,
         alpha = alpha,
     )
-}
+}

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

@@ -3,11 +3,7 @@ package vn.momo.kits.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier