Fix DateCell elevation

Author: chouaibMo

rowKalendar/src/commonMain/kotlin/io/github/chouaibmo/rowkalendar/RowKalendar.kt

@@ -25,7 +25,7 @@ fun RowKalendar(
     maxDays: Int = 365,
     content: @Composable (date: LocalDate, isSelected: Boolean, onClick: (LocalDate) -> Unit) -> Unit
 ) {
-    val viewModel: RowKalendarViewModel = viewModel()
+    val viewModel: RowKalendarViewModel = viewModel { RowKalendarViewModel() }
     val uiState = viewModel.uiState.value
     val scrollState = rememberLazyListState(
         initialFirstVisibleItemIndex = (uiState.dates.size / 2) - 1,
@@ -38,7 +38,7 @@ fun RowKalendar(
     LazyRow(
         state = scrollState,
         modifier = modifier,
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(6.dp),
     ) {
         itemsIndexed(uiState.dates) { index, date ->
 

rowKalendar/src/commonMain/kotlin/io/github/chouaibmo/rowkalendar/components/DateCell.kt

@@ -5,17 +5,20 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import io.github.chouaibmo.rowkalendar.extensions.isBefore
 import io.github.chouaibmo.rowkalendar.extensions.now
 import kotlinx.datetime.LocalDate
@@ -63,27 +66,38 @@ fun DateCell(
         }
     }
 
+    val cellElevation = when {
+        isSelected -> elevation.selectedElevation
+        date.isBefore(LocalDate.now()) -> elevation.pastElevation
+        else -> elevation.futureElevation
+    }
+
     Card(
-        modifier = modifier.clickable { onDateSelected(date) },
-        shape = shape,
+        modifier = modifier
+            .shadow(elevation = cellElevation, shape = shape)
+            .clip(shape = shape)
+            .clickable { onDateSelected(date) },
         border = cellBorder,
         colors = CardDefaults.cardColors(containerColor = cellColor),
-        elevation = CardDefaults.cardElevation(defaultElevation = elevation.defaultElevation)
     ) {
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center,
-            modifier = Modifier.fillMaxSize()
+            modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp)
         ) {
             Text(
-                text = date.dayOfWeek.name.subSequence(0, 3).toString().uppercase(),
-                color = textColor
+                text = date.dayOfWeek.name.subSequence(0, 3).toString()
+                    .lowercase()
+                    .replaceFirstChar { it.uppercase() },
+                color = textColor,
+                fontWeight = FontWeight.Bold,
             )
             Spacer(modifier = Modifier.height(6.dp))
             Text(
                 text = date.dayOfMonth.toString(),
-                fontWeight = FontWeight.ExtraBold,
-                color = textColor
+                fontWeight = FontWeight.Black,
+                color = textColor,
+                fontSize = 24.sp
             )
         }
     }

rowKalendar/src/commonMain/kotlin/io/github/chouaibmo/rowkalendar/components/DateCellDefaults.kt

@@ -53,9 +53,15 @@ object DateCellDefaults {
         )
     }
 
-    fun elevation(defaultElevation: Dp = 0.dp): DateCellElevation {
+    fun elevation(
+        selectedElevation: Dp = 0.dp,
+        pastElevation: Dp = 0.dp,
+        futureElevation: Dp = 0.dp
+    ): DateCellElevation {
         return DateCellElevation(
-            defaultElevation = defaultElevation,
+            selectedElevation = selectedElevation,
+            pastElevation = pastElevation,
+            futureElevation = futureElevation
         )
     }
 
@@ -126,8 +132,23 @@ object DateCellDefaults {
 
     /**
      * Represents the elevation used in the DateCell.
+     * Handles the elevation for the selected, past and future states of the DateCell.
      */
-    data class DateCellElevation(
-        val defaultElevation: Dp
-    )
+    class DateCellElevation(
+        val selectedElevation: Dp,
+        val pastElevation: Dp,
+        val futureElevation: Dp,
+    ) {
+        fun copy(
+            selectedElevation: Dp = this.selectedElevation,
+            pastElevation: Dp = this.pastElevation,
+            futureElevation: Dp = this.futureElevation
+        ): DateCellElevation {
+            return DateCellElevation(
+                selectedElevation = selectedElevation.takeOrElse { this.selectedElevation },
+                pastElevation = pastElevation.takeOrElse { this.pastElevation },
+                futureElevation = futureElevation.takeOrElse { this.futureElevation }
+            )
+        }
+    }
 }