or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-components.mdicons.mdindex.mdinput-components.mdios-integration.mdnavigation.mdtheming.md
tile.json

tessl/maven-org-jetbrains-compose-material--material-uikitarm64

Material Design components for Compose Multiplatform, specifically optimized for iOS devices running on ARM64 architecture

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
mavenpkg:maven/org.jetbrains.compose.material/material-uikitarm64@1.8.x

To install, run

npx @tessl/cli install tessl/maven-org-jetbrains-compose-material--material-uikitarm64@1.8.0

index.mddocs/

Compose Material Design for iOS UIKit ARM64

Compose Material Design provides comprehensive Material Design components for Compose Multiplatform applications, specifically optimized for iOS devices running on ARM64 architecture. This package enables developers to build native iOS applications using declarative Compose APIs while maintaining Material Design consistency across platforms.

Package Information

  • Package Name: org.jetbrains.compose.material:material-uikitarm64
  • Package Type: maven
  • Language: Kotlin
  • Platform: iOS UIKit ARM64
  • Installation: Add to your build.gradle.kts:
repositories {
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}

dependencies {
    implementation("org.jetbrains.compose.material:material-uikitarm64:1.8.2")
}

Core Imports

import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material3.*  // For Material 3 components

Basic Usage

import androidx.compose.material.*
import androidx.compose.runtime.*

@Composable
fun MyApp() {
    MaterialTheme(
        colors = lightColors(
            primary = Color(0xFF1976D2),
            secondary = Color(0xFF03DAC6)
        )
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("My App") }
                )
            },
            floatingActionButton = {
                FloatingActionButton(
                    onClick = { /* Handle click */ }
                ) {
                    Icon(Icons.Default.Add, contentDescription = "Add")
                }
            }
        ) { paddingValues ->
            Column(
                modifier = Modifier.padding(paddingValues).padding(16.dp)
            ) {
                Button(
                    onClick = { /* Handle click */ }
                ) {
                    Text("Material Button")
                }
                
                TextField(
                    value = "Example text",
                    onValueChange = { },
                    label = { Text("Label") }
                )
            }
        }
    }
}

Architecture

Compose Material Design is built around several key components:

  • Material Theme System: Comprehensive theming with colors, typography, and shapes that adapt to iOS visual guidelines
  • UI Components: Complete set of Material Design components optimized for iOS performance and native behavior
  • Icon System: Extensive Material icon library with automatic RTL support and iOS-specific adaptations
  • Layout Components: Scaffold, Surface, and container components that integrate seamlessly with iOS navigation patterns
  • Platform Integration: Deep integration with UIKit components and native iOS APIs through UIKitView and UIKitViewController

Capabilities

Core UI Components

Essential Material Design components for building iOS interfaces with consistent Material Design styling.

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    style: TextStyle = LocalTextStyle.current
)

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

Core Components

Progress Indicators

Material Design progress indicators for showing loading states with iOS-optimized animations.

@Composable
fun CircularProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
)

@Composable
fun LinearProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    backgroundColor: Color = color.copy(alpha = ProgressIndicatorDefaults.IndicatorBackgroundOpacity)
)

Feedback Components

Snackbars and other feedback components with iOS safe area integration.

@Composable
fun Snackbar(
    snackbarData: SnackbarData,
    modifier: Modifier = Modifier,
    actionOnNewLine: Boolean = false,
    shape: Shape = MaterialTheme.shapes.small,
    backgroundColor: Color = SnackbarDefaults.backgroundColor,
    contentColor: Color = MaterialTheme.colors.surface,
    actionColor: Color = SnackbarDefaults.primaryActionColor,
    elevation: Dp = 6.dp
)

@Composable
fun SnackbarHost(
    hostState: SnackbarHostState,
    modifier: Modifier = Modifier,
    snackbar: @Composable (SnackbarData) -> Unit = { Snackbar(it) }
)

Material Theming

Comprehensive theming system that adapts Material Design principles to iOS platform conventions.

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    content: @Composable () -> Unit
)

@Stable
class Colors(
    primary: Color,
    primaryVariant: Color,
    secondary: Color,
    secondaryVariant: Color,
    background: Color,
    surface: Color,
    error: Color,
    onPrimary: Color,
    onSecondary: Color,
    onBackground: Color,
    onSurface: Color,
    onError: Color,
    isLight: Boolean
)

fun lightColors(
    primary: Color = Color(0xFF6200EE),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    // ... other color parameters
): Colors

fun darkColors(
    primary: Color = Color(0xFFBB86FC),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    // ... other color parameters
): Colors

Material Theming

Input Components

Material Design input components optimized for iOS touch interactions and keyboard behavior.

@Composable
fun TextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
)

Input Components

Navigation Components

Material Design navigation components that integrate with iOS navigation patterns and UIKit.

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    isFloatingActionButtonDocked: Boolean = false,
    drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerDefaults.scrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable (PaddingValues) -> Unit
)

Navigation Components

Material Icons

Comprehensive icon system with iOS-specific optimizations and automatic RTL support.

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)

object Icons {
    object Default {
        val Add: ImageVector
        val ArrowBack: ImageVector
        val Close: ImageVector
        val Delete: ImageVector
        val Edit: ImageVector
        val Home: ImageVector
        val Menu: ImageVector
        val MoreHoriz: ImageVector
        val Search: ImageVector
        val Settings: ImageVector
        // ... additional icons
    }
    
    object Outlined {
        // Outlined variants of icons
    }
    
    object AutoMirrored {
        // RTL-aware icons
    }
}

Material Icons

iOS Platform Integration

Seamless integration with native iOS UIKit components and platform-specific behaviors.

@Composable
fun UIKitView<T : UIView>(
    factory: () -> T,
    modifier: Modifier = Modifier,
    update: (T) -> Unit = {}
)

@Composable
fun UIKitViewController<T : UIViewController>(
    factory: () -> T,
    modifier: Modifier = Modifier,
    update: (T) -> Unit = {}
)

iOS Integration

Types

// Core modifier for all components
interface Modifier

// Composable function type
@Target(AnnotationTarget.FUNCTION)
@Retention(AnnotationRetention.BINARY)
@MustBeDocumented
annotation class Composable

// Material theme colors
@Stable
class Colors(
    val primary: Color,
    val primaryVariant: Color,
    val secondary: Color,
    val secondaryVariant: Color,
    val background: Color,
    val surface: Color,
    val error: Color,
    val onPrimary: Color,
    val onSecondary: Color,
    val onBackground: Color,
    val onSurface: Color,
    val onError: Color,
    val isLight: Boolean
)

// Typography system
@Immutable
class Typography(
    val h1: TextStyle,
    val h2: TextStyle,
    val h3: TextStyle,
    val h4: TextStyle,
    val h5: TextStyle,
    val h6: TextStyle,
    val subtitle1: TextStyle,
    val subtitle2: TextStyle,
    val body1: TextStyle,
    val body2: TextStyle,
    val button: TextStyle,
    val caption: TextStyle,
    val overline: TextStyle
)

// Shape system
@Immutable
class Shapes(
    val small: CornerBasedShape,
    val medium: CornerBasedShape,
    val large: CornerBasedShape
)

// Layout and container types
@Stable
interface RowScope

@Stable  
interface ColumnScope

@Immutable
data class PaddingValues(
    val start: Dp = 0.dp,
    val top: Dp = 0.dp,
    val end: Dp = 0.dp,
    val bottom: Dp = 0.dp
)

// Shape and border types
interface Shape

interface CornerBasedShape : Shape

@Immutable
data class BorderStroke(
    val width: Dp,
    val brush: Brush
)

// Interaction types
interface InteractionSource

@Stable
interface State<out T> {
    val value: T
}

// Progress indicator types
object ProgressIndicatorDefaults {
    val StrokeWidth: Dp = 4.dp
    const val IndicatorBackgroundOpacity: Float = 0.24f
}

// Snackbar types
@Stable
class SnackbarHostState {
    suspend fun showSnackbar(
        message: String,
        actionLabel: String? = null,
        duration: SnackbarDuration = SnackbarDuration.Short
    ): SnackbarResult
}

interface SnackbarData {
    val message: String
    val actionLabel: String?
    fun performAction()
    fun dismiss()
}

enum class SnackbarDuration { Short, Long, Indefinite }
enum class SnackbarResult { Dismissed, ActionPerformed }