🚀 Composive - Responsive & Adaptive UI Library¶

@Composable
fun App() {
    ComposiveTheme {
        val deviceConfig = rememberDeviceConfiguration()

        when (deviceConfig) {
            DeviceConfiguration.MOBILE_PORTRAIT -> MobileLayout()
            DeviceConfiguration.DESKTOP -> DesktopLayout()
            else -> TabletLayout()
        }
    }
}

val deviceConfig = rememberDeviceConfiguration()

// Check device type
deviceConfig.isMobile()    // Phone
deviceConfig.isTablet()    // Tablet
deviceConfig.isDesktop()   // Desktop

// Get layout recommendations
deviceConfig.getRecommendedColumns()  // 1-4 columns
deviceConfig.isPortrait()            // Portrait orientation
deviceConfig.isLandscape()           // Landscape orientation

// Access responsive values anywhere
Text(
    text = "Hello World",
    style = AppTheme.materialTypography.headlineSmall,
    fontWeight = AppTheme.fontWeights.heading,
    modifier = Modifier.padding(AppTheme.dimensions.cardPadding)
)

// Platform information
val platform = AppTheme.platform
when {
    platform.isAndroid() -> AndroidSpecificCode()
    platform.isIOS() -> IOSSpecificCode()
    platform.isDesktop() -> DesktopSpecificCode()
}

// Semantic weights (recommended)
Text("Headline", fontWeight = AppTheme.fontWeights.heading)
Text("Body text", fontWeight = AppTheme.fontWeights.body)
Text("Emphasized", fontWeight = AppTheme.fontWeights.emphasis)
Button(onClick = {}) {
    Text("Action", fontWeight = AppTheme.fontWeights.button)
}

// Basic weights
Text("Bold text", fontWeight = AppTheme.fontWeights.bold)
Text("Normal text", fontWeight = AppTheme.fontWeights.normal)
Text("Light text", fontWeight = AppTheme.fontWeights.light)

ComposiveTheme(
    configuration = responsiveConfiguration {
        // Theme selection
        withMaterialTheme()        // Force Material 3
        withCupertinoTheme()       // Force Cupertino
        withPlatformDefaultTheme() // Platform-appropriate

        // Custom fonts
        withCustomMaterialFonts(
            bodyFont = myFont
        )

        // Custom dimensions
        withCustomDimensions(
            small = myMobileDimensions,
            large = myDesktopDimensions
        )
    }
) {
    MyApp()
}

@Composable
fun AdaptiveNav() {
    val deviceConfig = rememberDeviceConfiguration()

    when (deviceConfig) {
        DeviceConfiguration.MOBILE_PORTRAIT -> {
            NavigationBar { /* bottom nav */ }
        }
        DeviceConfiguration.TABLET_PORTRAIT -> {
            NavigationRail { /* side nav */ }
        }
        else -> {
            NavigationDrawer { /* drawer nav */ }
        }
    }
}

@Composable
fun ResponsiveGrid() {
    val columns = rememberDeviceConfiguration().getRecommendedColumns()

    LazyVerticalGrid(
        columns = GridCells.Fixed(columns),
        horizontalArrangement = Arrangement.spacedBy(AppTheme.dimensions.cardSpacing)
    ) {
        items(data) { item ->
            GridItem(item)
        }
    }
}

@Composable
fun PlatformButton() {
    val platform = AppTheme.platform

    when {
        platform.isAndroid() -> {
            Button(onClick = {}) { Text("Material Button") }
        }
        platform.isIOS() -> {
            CupertinoButton(onClick = {}) { Text("Cupertino Button") }
        }
        else -> {
            OutlinedButton(onClick = {}) { Text("Default Button") }
        }
    }
}

// This just works! 🎉
ComposiveTheme {
    MyApp() // Automatically responsive & platform-appropriate
}

// Full control when you need it
ComposiveTheme(
    configuration = responsiveConfiguration {
        // Customize everything
    }
) {
    MyApp()
}