@momo-kits/native-kits 0.122.0-beta.1 → 0.122.0-beta.2

package/compose/build.gradle.kts

@@ -48,6 +48,7 @@ kotlin {
             dependencies {
                 implementation(libs.ktor.client.okhttp)
                 implementation(libs.jetbrains.coroutines.android)
+                api("androidx.activity:activity-compose:1.8.2")
             }
         }
         val iosX64Main by getting
@@ -100,3 +101,11 @@ android {
         jvmToolchain(17)
     }
 }
+
+compose {
+    resources {
+        publicResClass = true
+        packageOfResClass = "vn.momo.uikits.resources"
+        generateResClass = always
+    }
+}

package/compose/src/androidMain/kotlin/vn/momo/kits/platform/Platform.android.kt

@@ -3,16 +3,20 @@ package vn.momo.kits.platform
 import android.annotation.SuppressLint
 import android.content.res.Resources
 import android.graphics.BlurMaskFilter
+import android.os.Build
+import android.view.WindowInsets
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.NativePaint
 import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.DialogWindowProvider
+import androidx.core.view.WindowInsetsControllerCompat
+import androidx.activity.compose.BackHandler as AndroidBackHandler
 
 actual fun getPlatformName(): String = "Android"
 
-actual fun disableOverscroll() {}
-
 @Composable
 actual fun getScreenDimensions(): ScreenDimension {
     val config = LocalConfiguration.current
@@ -34,4 +38,19 @@ actual fun getStatusBarHeight(): Dp {
         "android"
     )
     return if(resourceId > 0) Resources.getSystem().getDimensionPixelSize(resourceId).dp else 0.dp
+}
+
+@Composable
+actual fun BackHandler(enabled: Boolean, onBack: () -> Unit) {
+    AndroidBackHandler(enabled = enabled, onBack = onBack)
+}
+
+@SuppressLint("WrongConstant")
+@Composable
+actual fun ConfigureDialog() {
+    val dialogWindow = (LocalView.current.parent as? DialogWindowProvider)?.window
+
+    dialogWindow?.let {
+        dialogWindow.setDimAmount(0f)
+    }
 }

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

@@ -15,7 +15,6 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Theme
 import vn.momo.kits.const.ThemeAssets
 import vn.momo.kits.const.defaultTheme
-import vn.momo.kits.platform.disableOverscroll
 import vn.momo.kits.platform.getStatusBarHeight
 
 interface ComposeApi {
@@ -132,7 +131,6 @@ fun ApplicationContainer(
 
     val appStatusBarHeight = statusBarHeight ?: getStatusBarHeight()
 
-    disableOverscroll()
     CompositionLocalProvider(
         AppTheme provides appTheme,
         PlatformApi provides composeApi,

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt

@@ -3,6 +3,7 @@ package vn.momo.kits.const
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 
 data class Background(
     val default: Color,
@@ -169,4 +170,6 @@ val darkTheme = Theme(
 
 val AppTheme = staticCompositionLocalOf { defaultTheme }
 
-val AppStatusBar = staticCompositionLocalOf<Dp?> { null }
+val AppStatusBar = staticCompositionLocalOf { 0.dp }
+
+val AppNavigationBar = staticCompositionLocalOf { 0.dp }

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -11,11 +11,22 @@ import androidx.compose.ui.unit.sp
 import org.jetbrains.compose.resources.Font
 import org.jetbrains.compose.resources.FontResource
 import org.jetbrains.compose.resources.InternalResourceApi
-import org.jetbrains.compose.resources.ResourceItem
-import vn.momo.kits.application.DesignSystemWhiteList
 import vn.momo.kits.platform.getScreenDimensions
 import kotlin.math.max
 import kotlin.math.min
+import vn.momo.uikits.resources.Res
+import vn.momo.uikits.resources.momosignature
+import vn.momo.uikits.resources.momotrustdisplay
+import vn.momo.uikits.resources.sfprotext_black
+import vn.momo.uikits.resources.sfprotext_bold
+import vn.momo.uikits.resources.sfprotext_heavy
+import vn.momo.uikits.resources.sfprotext_light
+import vn.momo.uikits.resources.sfprotext_medium
+import vn.momo.uikits.resources.sfprotext_regular
+import vn.momo.uikits.resources.sfprotext_semibold
+import vn.momo.uikits.resources.sfprotext_thin
+import vn.momo.uikits.resources.sfprotext_ultralight
+import vn.momo.kits.application.DesignSystemWhiteList
 
 const val DEFAULT_SCREEN_SIZE = 375f
 const val MAX_FONT_SCALE = 1.5f
@@ -50,56 +61,45 @@ fun scaleSize(size: Float): Float {
 
 @OptIn(InternalResourceApi::class)
 @Composable
-fun getFont(font: String): FontFamily {
-    val fontResource = FontResource(
-        "font:${font.substringBeforeLast(".")}",
-        setOf(
-            ResourceItem(
-                setOf(),
-                "font/${font.substringBeforeLast(".")}.${font.substringAfterLast(".")}",
-                -1,
-                -1
-            )
-        )
-    )
-    return FontFamily(Font(fontResource))
+fun getFont(font: FontResource): FontFamily {
+    return FontFamily(Font(font))
 }
 
 @Composable
 fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
     val key = "$fontFamily-${fontWeight?.weight}"
     val fontMap = mapOf(
-        "SFProText-100" to "sfprotext_thin.ttf",
-        "SFProText-200" to "sfprotext_ultralight.ttf",
-        "SFProText-300" to "sfprotext_light.ttf",
-        "SFProText-400" to "sfprotext_regular.ttf",
-        "SFProText-500" to "sfprotext_medium.ttf",
-        "SFProText-600" to "sfprotext_semibold.ttf",
-        "SFProText-700" to "sfprotext_bold.ttf",
-        "SFProText-800" to "sfprotext_heavy.ttf",
-        "SFProText-900" to "sfprotext_black.ttf",
+        "SFProText-100" to Res.font.sfprotext_thin,
+        "SFProText-200" to Res.font.sfprotext_ultralight,
+        "SFProText-300" to Res.font.sfprotext_light,
+        "SFProText-400" to Res.font.sfprotext_regular,
+        "SFProText-500" to Res.font.sfprotext_medium,
+        "SFProText-600" to Res.font.sfprotext_semibold,
+        "SFProText-700" to Res.font.sfprotext_bold,
+        "SFProText-800" to Res.font.sfprotext_heavy,
+        "SFProText-900" to Res.font.sfprotext_black,
 
-        "MoMoSignature-100" to "momosignature.otf",
-        "MoMoSignature-200" to "momosignature.otf",
-        "MoMoSignature-300" to "momosignature.otf",
-        "MoMoSignature-400" to "momosignature.otf",
-        "MoMoSignature-500" to "momosignature.otf",
-        "MoMoSignature-600" to "momosignature.otf",
-        "MoMoSignature-700" to "momosignature.otf",
-        "MoMoSignature-800" to "momosignature.otf",
-        "MoMoSignature-900" to "momosignature.otf",
+        "MoMoSignature-100" to Res.font.momosignature,
+        "MoMoSignature-200" to Res.font.momosignature,
+        "MoMoSignature-300" to Res.font.momosignature,
+        "MoMoSignature-400" to Res.font.momosignature,
+        "MoMoSignature-500" to Res.font.momosignature,
+        "MoMoSignature-600" to Res.font.momosignature,
+        "MoMoSignature-700" to Res.font.momosignature,
+        "MoMoSignature-800" to Res.font.momosignature,
+        "MoMoSignature-900" to Res.font.momosignature,
 
-        "MoMoTrustDisplay-100" to "momotrustdisplay.otf",
-        "MoMoTrustDisplay-200" to "momotrustdisplay.otf",
-        "MoMoTrustDisplay-300" to "momotrustdisplay.otf",
-        "MoMoTrustDisplay-400" to "momotrustdisplay.otf",
-        "MoMoTrustDisplay-500" to "momotrustdisplay.otf",
-        "MoMoTrustDisplay-600" to "momotrustdisplay.otf",
-        "MoMoTrustDisplay-700" to "momotrustdisplay.otf",
-        "MoMoTrustDisplay-800" to "momotrustdisplay.otf",
-        "MoMoTrustDisplay-900" to "momotrustdisplay.otf",
+        "MoMoTrustDisplay-100" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-200" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-300" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-400" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-500" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-600" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-700" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-800" to Res.font.momotrustdisplay,
+        "MoMoTrustDisplay-900" to Res.font.momotrustdisplay,
     )
-    val font = fontMap[key] ?: "sfprotext_regular.ttf"
+    val font = fontMap[key] ?: Res.font.sfprotext_regular
     return getFont(font)
 }
 

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/BottomSheet.kt

@@ -0,0 +1,232 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectDragGestures
+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.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+import vn.momo.kits.components.Divider
+import vn.momo.kits.components.Icon
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.const.AppStatusBar
+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.noFeedbackClickable
+import vn.momo.kits.platform.BackHandler
+import vn.momo.kits.platform.getPlatformName
+import vn.momo.kits.platform.getScreenDimensions
+
+@Composable
+fun BottomSheet(
+    content: @Composable () -> Unit,
+    header: BottomHeader,
+    barrierDismissible: Boolean = true,
+    onDismiss: (() -> Unit)?
+) {
+    val navigator = LocalNavigator.current
+
+    val height = if(getPlatformName() == "iOS")
+        getScreenDimensions().height.dp
+    else getScreenDimensions().height.dp + AppStatusBar.current + AppNavigationBar.current
+    val screenHeight = with(LocalDensity.current) { height.toPx() }
+    val sheetOffset = remember { Animatable(screenHeight) }
+
+    val backgroundAlpha = remember { Animatable(0f) }
+    val dynamicAlpha = ((1f - (sheetOffset.value / screenHeight)).coerceIn(0f, 1f)) * 0.3f
+    val alpha = backgroundAlpha.value + dynamicAlpha
+
+    val coroutineScope = rememberCoroutineScope()
+
+    suspend fun openEvent(){
+        backgroundAlpha.animateTo(
+            targetValue = 0.3f,
+            animationSpec = tween(
+                durationMillis = 200,
+                easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
+            )
+        )
+        sheetOffset.animateTo(
+            targetValue = 0f,
+            animationSpec = tween(
+                durationMillis = 350,
+                easing = CubicBezierEasing(0.05f, 0.7f, 0.1f, 1f)
+            )
+        )
+    }
+
+    fun closeEvent(){
+        coroutineScope.launch {
+            sheetOffset.animateTo(
+                targetValue = screenHeight,
+                animationSpec = tween(
+                    durationMillis = 200,
+                    easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
+                )
+            )
+            backgroundAlpha.animateTo(
+                targetValue = 0f,
+                animationSpec = tween(
+                    durationMillis = 150,
+                    easing = CubicBezierEasing(0.3f, 0.0f, 0.8f, 0.15f)
+                )
+            )
+            navigator.pop()
+        }
+    }
+
+    LaunchedEffect(Unit) {
+        openEvent()
+    }
+
+    DisposableEffect(Unit) {
+        onDispose {
+            onDismiss?.invoke()
+        }
+    }
+
+    BackHandler(true){
+        closeEvent()
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Black.copy(alpha = alpha))
+            .conditional(barrierDismissible){
+                noFeedbackClickable {
+                    closeEvent()
+                }
+            }
+    ) {
+        Box(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .offset { IntOffset(x = 0, y = sheetOffset.value.toInt()) }
+                .fillMaxWidth()
+                .background(
+                    color = AppTheme.current.colors.background.default,
+                    shape = RoundedCornerShape(topStart = Radius.M, topEnd = Radius.M)
+                )
+                .noFeedbackClickable {  },
+            contentAlignment = Alignment.BottomCenter
+        ) {
+            Column {
+                Box(
+                    modifier = Modifier
+                        .height(72.dp)
+                        .fillMaxWidth()
+                        .pointerInput(Unit) {
+                            detectDragGestures(
+                                onDrag = { change, dragAmount ->
+                                    change.consume()
+                                    coroutineScope.launch {
+                                        val newOffset = (sheetOffset.value + dragAmount.y).coerceAtLeast(0f)
+                                        sheetOffset.snapTo(newOffset)
+                                    }
+                                },
+                                onDragEnd = {
+                                    coroutineScope.launch {
+                                        if (sheetOffset.value > 100f) {
+                                            closeEvent()
+                                        } else {
+                                            sheetOffset.animateTo(0f)
+                                        }
+                                    }
+                                }
+                            )
+                        }
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(horizontal = Spacing.M),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Spacer(Modifier.height(8.dp))
+                        Box(
+                            modifier = Modifier
+                                .height(4.dp)
+                                .width(40.dp)
+                                .background(
+                                    color = Colors.black_06,
+                                    shape = RoundedCornerShape(Radius.S)
+                                )
+                        )
+                        Spacer(Modifier.height(4.dp))
+                        Box(Modifier.fillMaxWidth().height(56.dp), contentAlignment = Alignment.Center){
+                            when (header) {
+                                is BottomHeader.Title -> {
+                                    Row(modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
+                                        Box(Modifier.size(24.dp))
+                                        Box(Modifier.fillMaxHeight().weight(1f), contentAlignment = Alignment.Center){
+                                            Text(
+                                                text = header.data,
+                                                color = Colors.black_17,
+                                                style = Typography.headerDefaultBold
+                                            )
+                                        }
+                                        Box(Modifier
+                                            .size(24.dp)
+                                            .noFeedbackClickable {
+                                                closeEvent()
+                                            },
+                                            contentAlignment = Alignment.Center
+                                        ){
+                                            Icon(source = "navigation_close")
+                                        }
+                                    }
+                                }
+                                is BottomHeader.Custom -> {
+                                    header.content()
+                                }
+                            }
+                        }
+                    }
+                }
+                Divider()
+                content()
+            }
+        }
+    }
+}
+
+sealed class BottomHeader {
+    data class Title(
+        val data: String = "Bottom Sheet Title",
+    ) : BottomHeader()
+
+    data class Custom(
+        val content: @Composable () -> Unit
+    ) : BottomHeader()
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/ModalScreen.kt

@@ -0,0 +1,121 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.CubicBezierEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import kotlinx.coroutines.launch
+import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.conditional
+import vn.momo.kits.modifier.noFeedbackClickable
+import vn.momo.kits.platform.BackHandler
+
+@Composable
+fun ModalScreen(
+    content: @Composable () -> Unit,
+    barrierDismissible: Boolean = true,
+    onDismiss: (() -> Unit)? = null
+) {
+    val navigator = LocalNavigator.current
+
+    val alpha = remember { Animatable(0f) }
+    val scale = remember { Animatable(0.8f) }
+
+    val coroutineScope = rememberCoroutineScope()
+
+    fun openEvent() {
+        coroutineScope.launch {
+            launch {
+                alpha.animateTo(
+                    targetValue = 1f,
+                    animationSpec = tween(durationMillis = 250)
+                )
+            }
+            launch {
+                scale.animateTo(
+                    targetValue = 1f,
+                    animationSpec = tween(
+                        durationMillis = 250,
+                        easing = CubicBezierEasing(0.2f, 0.0f, 0f, 1f)
+                    )
+                )
+            }
+        }
+    }
+
+    fun closeEvent() {
+        coroutineScope.launch {
+            launch {
+                alpha.animateTo(
+                    targetValue = 0f,
+                    animationSpec = tween(durationMillis = 200)
+                )
+            }
+            launch {
+                scale.animateTo(
+                    targetValue = 0.8f,
+                    animationSpec = tween(durationMillis = 200)
+                )
+            }.invokeOnCompletion {
+                navigator.pop()
+            }
+        }
+    }
+
+    LaunchedEffect(Unit) {
+        openEvent()
+    }
+
+    DisposableEffect(Unit) {
+        onDispose {
+            onDismiss?.invoke()
+        }
+    }
+
+    BackHandler(enabled = true) {
+        closeEvent()
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Black.copy(alpha = 0.6f * alpha.value))
+            .conditional(barrierDismissible){
+                noFeedbackClickable {
+                    closeEvent()
+                }
+            },
+        contentAlignment = Alignment.Center
+    ) {
+        Box(
+            modifier = Modifier
+                .scale(scale.value)
+                .alpha(alpha.value)
+                .padding(Spacing.M)
+                .wrapContentSize()
+                .clickable(
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() }
+                ) {},
+        contentAlignment = Alignment.Center
+        ) {
+            content()
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/Navigation.kt

@@ -0,0 +1,79 @@
+package vn.momo.kits.navigation
+
+import androidx.compose.foundation.ScrollState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
+import vn.momo.kits.navigation.bottomtab.setBottomTabOption
+import vn.momo.kits.navigation.header.HeaderRight
+import vn.momo.kits.navigation.header.HeaderTitle
+import vn.momo.kits.navigation.header.HeaderType
+
+class Navigation(
+    val id: Int = -1,
+    val bottomTabIndex: Int = -1,
+    val initOptions: NavigationOptions? = null
+) {
+    private val _options = mutableStateOf(initOptions ?: NavigationOptions())
+    val currentOptions: State<NavigationOptions> get() = _options
+    val options: NavigationOptions get() = _options.value
+
+    fun setOptions(
+        onBackHandler: (() -> Unit)? = null,
+        hiddenBack: Boolean? = null,
+        headerTitle: HeaderTitle? = null,
+        headerRight: HeaderRight? = null,
+        headerType: HeaderType? = null,
+        scrollData: ScrollData? = null,
+        backgroundColor: Color? = null,
+        tintColor: Color? = null,
+        footerComponent: (@Composable () -> Unit)? = null,
+    ) {
+        updateOptions(
+            options.copy(
+                onBackHandler = onBackHandler ?: options.onBackHandler,
+                hiddenBack = hiddenBack ?: options.hiddenBack,
+                headerTitle = headerTitle ?: options.headerTitle,
+                headerRight = headerRight ?: options.headerRight,
+                headerType = headerType ?: options.headerType,
+                scrollData = scrollData ?: options.scrollData,
+                backgroundColor = backgroundColor ?: options.backgroundColor,
+                tintColor = tintColor ?: options.tintColor,
+                footerComponent = footerComponent ?: options.footerComponent,
+            )
+        )
+    }
+
+    fun setOptions(newOptions: NavigationOptions) {
+        updateOptions(newOptions)
+    }
+
+    private fun updateOptions(updated: NavigationOptions) {
+        _options.value = updated
+        if (bottomTabIndex != -1) setBottomTabOption(bottomTabIndex, updated)
+        if (id != -1) DynamicScreenRegistry.setOptions(id, updated)
+    }
+}
+
+val LocalNavigation = staticCompositionLocalOf<Navigation> {
+    error("No NavigationStack provided")
+}
+
+data class NavigationOptions(
+    var onBackHandler: (() -> Unit)? = null,
+    val hiddenBack: Boolean = false,
+    val headerTitle: HeaderTitle = HeaderTitle.Default("Stack"),
+    val headerRight: HeaderRight = HeaderRight.Toolkit(),
+    val headerType: HeaderType = HeaderType.Default(),
+    val scrollData: ScrollData = ScrollData(),
+    val backgroundColor: Color? = null,
+    val tintColor: Color? = null,
+    val footerComponent: @Composable (() -> Unit)? = null,
+)
+
+data class ScrollData(
+    val scrollable: Boolean = true,
+    val scrollState: ScrollState? = null,
+)