0
# Component Libraries
1

2
Compose Multiplatform component libraries provide cross-platform UI components and utilities with consistent APIs across all supported platforms. These libraries include resources management, layout components, media support, and development tooling.
3

4
## Capabilities
5

6
### Resources Library
7

8
Cross-platform resource management with localization support, automatic resource generation, and type-safe access to strings, images, fonts, and other assets.
9

10
```kotlin { .api }
11
/**
12
 * String resources with localization support
13
 */
14
@Immutable
15
class StringResource internal constructor(
16
    id: String, 
17
    val key: String, 
18
    items: Set<ResourceItem>
19
) : Resource(id, items)
20

21
/**
22
 * Load localized string resources
23
 */
24
@Composable fun stringResource(resource: StringResource): String
25
@Composable fun stringResource(resource: StringResource, vararg formatArgs: Any): String
26

27
/**
28
 * Suspend functions for non-Composable contexts
29
 */
30
suspend fun getString(resource: StringResource): String
31
suspend fun getString(
32
    environment: ResourceEnvironment, 
33
    resource: StringResource
34
): String
35
suspend fun getString(
36
    resource: StringResource, 
37
    vararg formatArgs: Any
38
): String
39

40
/**
41
 * Drawable resources (images, vectors, SVGs)
42
 */
43
@Immutable
44
class DrawableResource internal constructor(
45
    id: String, 
46
    items: Set<ResourceItem>
47
) : Resource(id, items)
48

49
/**
50
 * Load drawable resources as Compose painters and bitmaps
51
 */
52
@Composable fun painterResource(resource: DrawableResource): Painter
53
@Composable fun imageResource(resource: DrawableResource): ImageBitmap
54
@Composable fun vectorResource(resource: DrawableResource): ImageVector
55

56
/**
57
 * Font resources with variation settings
58
 */
59
@Immutable
60
class FontResource internal constructor(
61
    id: String, 
62
    items: Set<ResourceItem>
63
) : Resource(id, items)
64

65
/**
66
 * Load font resources (expect/actual implementation)
67
 */
68
@Composable expect fun Font(
69
    resource: FontResource,
70
    weight: FontWeight = FontWeight.Normal,
71
    style: FontStyle = FontStyle.Normal,
72
    variationSettings: FontVariation.Settings = FontVariation.Settings(weight, style)
73
): Font
74
```
75

76
**Usage Examples:**
77

78
```kotlin
79
// Basic resource usage
80
@Composable
81
fun MyScreen() {
82
    val appName = stringResource(Res.string.app_name)
83
    val welcomeMessage = stringResource(Res.string.welcome_message, "User")
84
    val icon = painterResource(Res.drawable.app_icon)
85
    val customFont = Font(Res.font.custom_font, FontWeight.Bold)
86
    
87
    Column {
88
        Text(appName, fontFamily = FontFamily(customFont))
89
        Text(welcomeMessage)
90
        Image(painter = icon, contentDescription = "App Icon")
91
    }
92
}
93

94
// Resource configuration in build.gradle.kts
95
compose {
96
    resources {
97
        publicResClass = false
98
        nameOfResClass = "Res"
99
        generateResClass = auto
100
        packageOfResClass = "com.example.resources"
101
    }
102
}
103
```
104

105
### Plural and Array Resources
106

107
Handle quantity-based string resources and string arrays.
108

109
```kotlin { .api }
110
/**
111
 * Plural string resources following CLDR rules
112
 */
113
@Immutable
114
class PluralStringResource internal constructor(
115
    id: String,
116
    val key: String,
117
    items: Set<ResourceItem>
118
) : Resource(id, items)
119

120
/**
121
 * Load plural strings based on quantity
122
 */
123
@Composable fun pluralStringResource(
124
    resource: PluralStringResource, 
125
    quantity: Int
126
): String
127
@Composable fun pluralStringResource(
128
    resource: PluralStringResource, 
129
    quantity: Int, 
130
    vararg formatArgs: Any
131
): String
132

133
/**
134
 * String array resources
135
 */
136
@Immutable  
137
class StringArrayResource internal constructor(
138
    id: String,
139
    val key: String,
140
    items: Set<ResourceItem>
141
) : Resource(id, items)
142

143
/**
144
 * Load string arrays
145
 */
146
@Composable fun stringArrayResource(resource: StringArrayResource): List<String>
147
suspend fun getStringArray(resource: StringArrayResource): List<String>
148
```
149

150
### Resource Environment
151

152
Control resource resolution based on locale, theme, and device characteristics.
153

154
```kotlin { .api }
155
/**
156
 * Environment context for resource resolution
157
 */
158
class ResourceEnvironment internal constructor(
159
    internal val language: LanguageQualifier,
160
    internal val region: RegionQualifier,
161
    internal val theme: ThemeQualifier,
162
    internal val density: DensityQualifier
163
)
164

165
/**
166
 * Get current resource environment
167
 */
168
@Composable fun rememberResourceEnvironment(): ResourceEnvironment
169
fun getSystemResourceEnvironment(): ResourceEnvironment
170

171
/**
172
 * Resource qualifiers for environment-specific selection
173
 */
174
interface Qualifier
175

176
class LanguageQualifier(val language: String) : Qualifier
177
class RegionQualifier(val region: String) : Qualifier
178

179
enum class ThemeQualifier : Qualifier {
180
    LIGHT, DARK;
181
    companion object {
182
        fun selectByValue(isDark: Boolean): ThemeQualifier
183
    }
184
}
185

186
enum class DensityQualifier(val dpi: Int) : Qualifier {
187
    LDPI(120), MDPI(160), HDPI(240), 
188
    XHDPI(320), XXHDPI(480), XXXHDPI(640);
189
    
190
    companion object {
191
        fun selectByValue(dpi: Int): DensityQualifier
192
        fun selectByDensity(density: Float): DensityQualifier
193
    }
194
}
195
```
196

197
### SplitPane Library
198

199
Resizable split pane layouts with customizable splitters and drag handling.
200

201
```kotlin { .api }
202
/**
203
 * Vertical split pane with resizable divider
204
 */
205
@ExperimentalSplitPaneApi
206
@Composable fun VerticalSplitPane(
207
    modifier: Modifier = Modifier,
208
    splitPaneState: SplitPaneState = rememberSplitPaneState(),
209
    content: SplitPaneScope.() -> Unit
210
)
211

212
/**
213
 * Horizontal split pane with resizable divider
214
 */
215
@ExperimentalSplitPaneApi
216
@Composable fun HorizontalSplitPane(
217
    modifier: Modifier = Modifier,
218
    splitPaneState: SplitPaneState = rememberSplitPaneState(),
219
    content: SplitPaneScope.() -> Unit
220
)
221

222
/**
223
 * State management for split panes
224
 */
225
@ExperimentalSplitPaneApi
226
class SplitPaneState(
227
    initialPositionPercentage: Float,
228
    moveEnabled: Boolean
229
) {
230
    /** Whether the splitter can be moved */
231
    var moveEnabled: Boolean
232
    
233
    /** Current position as percentage (0.0 to 1.0) */
234
    var positionPercentage: Float
235
    
236
    /** Handle raw movement input */
237
    fun dispatchRawMovement(delta: Float)
238
}
239

240
/**
241
 * Remember split pane state
242
 */
243
@ExperimentalSplitPaneApi
244
@Composable fun rememberSplitPaneState(
245
    initialPositionPercentage: Float = 0f,
246
    moveEnabled: Boolean = true
247
): SplitPaneState
248
```
249

250
**Usage Example:**
251

252
```kotlin
253
@OptIn(ExperimentalSplitPaneApi::class)
254
@Composable
255
fun SplitPaneExample() {
256
    val splitPaneState = rememberSplitPaneState(initialPositionPercentage = 0.3f)
257
    
258
    VerticalSplitPane(
259
        splitPaneState = splitPaneState
260
    ) {
261
        first(minSize = 200.dp) {
262
            // Left pane content
263
            LazyColumn {
264
                items(100) { index ->
265
                    Text("Item $index")
266
                }
267
            }
268
        }
269
        
270
        second(minSize = 300.dp) {
271
            // Right pane content
272
            Text("Detail view")
273
        }
274
        
275
        splitter {
276
            visiblePart {
277
                Box(
278
                    Modifier
279
                        .width(4.dp)
280
                        .fillMaxHeight()
281
                        .background(Color.Gray)
282
                )
283
            }
284
            
285
            handle {
286
                Box(
287
                    Modifier
288
                        .markAsHandle()
289
                        .width(16.dp)
290
                        .fillMaxHeight()
291
                        .background(Color.Transparent)
292
                )
293
            }
294
        }
295
    }
296
}
297
```
298

299
### SplitPane DSL
300

301
Domain-specific language for configuring split pane content and behavior.
302

303
```kotlin { .api }
304
/**
305
 * DSL scope for configuring split pane contents
306
 */
307
@ExperimentalSplitPaneApi
308
interface SplitPaneScope {
309
    /** Configure first pane with minimum size */
310
    fun first(minSize: Dp = 0.dp, content: @Composable () -> Unit)
311
    
312
    /** Configure second pane with minimum size */
313
    fun second(minSize: Dp = 0.dp, content: @Composable () -> Unit)
314
    
315
    /** Configure splitter appearance and behavior */
316
    fun splitter(block: SplitterScope.() -> Unit)
317
}
318

319
/**
320
 * DSL scope for configuring splitter
321
 */
322
@ExperimentalSplitPaneApi
323
interface SplitterScope {
324
    /** Configure visible part of splitter */
325
    fun visiblePart(content: @Composable () -> Unit)
326
    
327
    /** Configure drag handle */
328
    fun handle(
329
        alignment: SplitterHandleAlignment = SplitterHandleAlignment.ABOVE,
330
        content: @Composable HandleScope.() -> Unit
331
    )
332
}
333

334
/**
335
 * DSL scope for drag handles
336
 */
337
@ExperimentalSplitPaneApi
338
interface HandleScope {
339
    /** Mark composable as draggable handle */
340
    fun Modifier.markAsHandle(): Modifier
341
}
342

343
/**
344
 * Handle alignment options
345
 */
346
@ExperimentalSplitPaneApi
347
enum class SplitterHandleAlignment {
348
    BEFORE, ABOVE, AFTER
349
}
350
```
351

352
### AnimatedImage Library
353

354
Cross-platform animated image support for GIF, WebP, and other animated formats.
355

356
```kotlin { .api }
357
/**
358
 * Animated image container (expect/actual implementation)
359
 */
360
expect class AnimatedImage
361

362
/**
363
 * Load animated image from file path
364
 */
365
expect suspend fun loadAnimatedImage(path: String): AnimatedImage
366

367
/**
368
 * Load animated image from application resources
369
 */
370
expect suspend fun loadResourceAnimatedImage(path: String): AnimatedImage
371

372
/**
373
 * Animate image and return current frame
374
 */
375
@Composable
376
expect fun AnimatedImage.animate(): ImageBitmap
377

378
/**
379
 * Blank image bitmap constant
380
 */
381
val ImageBitmap.Companion.Blank: ImageBitmap
382
```
383

384
**Usage Example:**
385

386
```kotlin
387
@Composable
388
fun AnimatedImageExample() {
389
    var animatedImage by remember { mutableStateOf<AnimatedImage?>(null) }
390
    
391
    LaunchedEffect(Unit) {
392
        animatedImage = loadResourceAnimatedImage("animations/loading.gif")
393
    }
394
    
395
    animatedImage?.let { image ->
396
        val currentFrame = image.animate()
397
        Image(
398
            bitmap = currentFrame,
399
            contentDescription = "Loading animation"
400
        )
401
    }
402
}
403
```
404

405
### UI Tooling Preview
406

407
IDE preview support with parameter injection for development and design workflows.
408

409
```kotlin { .api }
410
/**
411
 * Mark Composable functions for IDE preview
412
 */
413
@MustBeDocumented
414
@Retention(AnnotationRetention.BINARY)
415
@Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION)
416
@Repeatable
417
annotation class Preview
418

419
/**
420
 * Inject sample data into Preview function parameters
421
 */
422
annotation class PreviewParameter(
423
    val provider: KClass<out PreviewParameterProvider<*>>,
424
    val limit: Int = Int.MAX_VALUE
425
)
426

427
/**
428
 * Provide sample data for preview parameters (expect/actual)
429
 */
430
expect interface PreviewParameterProvider<T> {
431
    val values: Sequence<T>
432
    val count: Int
433
}
434
```
435

436
**Usage Example:**
437

438
```kotlin
439
// Sample data provider
440
class UserProvider : PreviewParameterProvider<User> {
441
    override val values = sequenceOf(
442
        User("Alice", 25),
443
        User("Bob", 30),
444
        User("Charlie", 35)
445
    )
446
}
447

448
// Preview with parameter injection
449
@Preview
450
@Composable
451
fun UserCardPreview(@PreviewParameter(UserProvider::class) user: User) {
452
    UserCard(user = user)
453
}
454

455
// Multiple preview configurations
456
@Preview(name = "Light Theme")
457
@Preview(name = "Dark Theme")
458
@Composable
459
fun ProfileScreenPreview() {
460
    ProfileScreen()
461
}
462
```
463

464
## Experimental APIs
465

466
```kotlin { .api }
467
/**
468
 * Marks experimental resource APIs
469
 */
470
@RequiresOptIn("This API is experimental and is likely to change in the future.")
471
annotation class ExperimentalResourceApi
472

473
/**
474
 * Marks experimental split pane APIs
475
 */
476
@RequiresOptIn(level = RequiresOptIn.Level.WARNING)
477
annotation class ExperimentalSplitPaneApi
478

479
/**
480
 * Marks internal resource APIs
481
 */
482
@RequiresOptIn("This is internal API of the Compose gradle plugin.")
483
annotation class InternalResourceApi
484
```