feat(Demo): Update demo application

README.md

@@ -6,7 +6,7 @@
 </p>
 
 <p align="center" style="font-size: 15px;">
-  <strong>Mosaic</strong> is acollection of Jetpack Compose UI components and utilities. It is designed to accelerate the development process by providing a rich set of tools and components that are ready to use out of the box. These components are highly customizable ensuring to fit in your use case. 
+  <strong>Mosaic</strong> is a collection of Jetpack Compose UI components and utilities. It is designed to accelerate the development process by providing a rich set of tools and components that are ready to use out of the box. These components are highly customizable ensuring to fit in your use case. 
 </p>
 
 
@@ -15,6 +15,7 @@
 ### 🎛️ [Mosaic Slider](./slider/)
 Mosaic Slider is a highly customizable slider component that allows precise customization of values distribution and disabled ranges. Its API is similar to Material sliders, making it easy to integrate into existing projects.
 
+![Disabled range](./docs/assets/example_disabled_range.gif)
 
 
 ## Contributing

demo/build.gradle.kts

@@ -48,6 +48,7 @@ dependencies {
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.activity.compose)
     implementation(platform(libs.compose.bom))
+    implementation(libs.androidx.navigation.compose)
     implementation(libs.compose.material3)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)

demo/src/main/java/io/monstarlab/mosaic/HomeScreen.kt

@@ -0,0 +1,125 @@
+package io.monstarlab.mosaic
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun HomeScreen(
+    onSliderClick: () -> Unit,
+    onCarouselClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) = Scaffold(
+    modifier = modifier,
+    topBar = { TopAppBar(title = { Text(text = "Mosaic Demo") }) },
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(32.dp),
+        modifier = Modifier
+            .padding(it)
+            .fillMaxSize()
+            .padding(16.dp),
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.ic_mosaic_log),
+            contentDescription = "logo",
+            modifier = Modifier
+                .size(150.dp)
+                .align(Alignment.CenterHorizontally),
+        )
+
+        Text(
+            text = "Collection of Jetpack Compose UI components and utilities.",
+            modifier = Modifier.align(Alignment.CenterHorizontally),
+            textAlign = TextAlign.Center,
+        )
+
+        Column {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                modifier = Modifier,
+            ) {
+                DemoButton(
+                    resource = R.drawable.ic_slider,
+                    text = "Slider",
+                    modifier = Modifier.weight(0.3f),
+                    onClick = onSliderClick,
+                )
+
+                DemoButton(
+                    resource = R.drawable.ic_carousel,
+                    text = "Carousel",
+                    modifier = Modifier.weight(0.3f),
+                    onClick = onCarouselClick,
+                )
+
+                Spacer(modifier = Modifier.weight(0.3f))
+            }
+        }
+    }
+}
+
+@Composable
+private fun DemoButton(
+    resource: Int,
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Surface(
+        modifier = modifier.aspectRatio(1f),
+        shape = RoundedCornerShape(16.dp),
+        shadowElevation = 16.dp,
+        tonalElevation = 2.dp,
+        onClick = onClick,
+    ) {
+        Column(verticalArrangement = Arrangement.SpaceBetween) {
+            Spacer(modifier = Modifier)
+
+            Icon(
+                painter = painterResource(id = resource),
+                contentDescription = text,
+                tint = MaterialTheme.colorScheme.primary,
+                modifier = Modifier
+                    .size(60.dp)
+                    .align(Alignment.CenterHorizontally),
+            )
+
+            Text(
+                text = text,
+                modifier = Modifier
+                    .align(Alignment.CenterHorizontally)
+                    .padding(bottom = 16.dp),
+                style = MaterialTheme.typography.titleMedium,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PreviewHomeScreen() {
+    HomeScreen({}, {})
+}

demo/src/main/java/io/monstarlab/mosaic/MainActivity.kt

@@ -8,7 +8,10 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
-import io.monstarlab.mosaic.features.SliderDemo
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import io.monstarlab.mosaic.demos.SliderDemo
 import io.monstarlab.mosaic.ui.theme.MosaicTheme
 
 class MainActivity : ComponentActivity() {
@@ -17,7 +20,25 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             MosaicTheme {
-                SliderDemo()
+                val navController = rememberNavController()
+                NavHost(
+                    navController = navController,
+                    startDestination = Routes.Home.value,
+                ) {
+                    composable(Routes.Home.value) {
+                        HomeScreen(
+                            onSliderClick = {
+                                navController.navigate(Routes.SliderDemo.value)
+                            },
+                            onCarouselClick = {
+                            },
+                        )
+                    }
+
+                    composable(Routes.SliderDemo.value) {
+                        SliderDemo()
+                    }
+                }
             }
         }
     }

demo/src/main/java/io/monstarlab/mosaic/Routes.kt

@@ -0,0 +1,6 @@
+package io.monstarlab.mosaic
+
+enum class Routes(val value: String) {
+    Home("home"),
+    SliderDemo("slider-demo"),
+}