Kepko

https://github.com/yasanglass/kepko
Admin
Kepko is a work-in-progress design system for Compose Multiplatform, providing a set of UI...
Tokens:139,443
Snippets:812
Trust Score:8.1
License:Apache-2.0
Update:3 days ago
Show doc for...
Tokens:
Raw
### AlertDialog Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-layout.md

Example of implementing an AlertDialog with confirm and dismiss actions.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
if (showDelete) {
    AlertDialog(
        onDismissRequest = { showDelete = false },
        confirmButtonText = "Delete",
        onConfirmClick = { delete(); showDelete = false },
        dismissButtonText = "Cancel",
        title = "Confirm deletion",
        text = "This cannot be undone.",
        icon = { Icon(NamedIcon.DELETE.painter(), null, tint = KepkoTheme.colors.danger) },
    )
}
```

--------------------------------

### PaletteBadge Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/persistence.md

A composable example demonstrating how to read the active palette and persistence manager to toggle grayscale settings.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
@Composable
fun PaletteBadge() {
    // reads the active palette and the manager:
    val palette = LocalKepkoColorPalette.current
    val persistence = LocalKepkoPersistenceManager.current
    Text(palette.title())
    Button(
        text = if (persistence.isGrayscaleEnabled(null)) "Grayscale on" else "Grayscale off",
        onClick = { persistence.setGrayscaleEnabled(null, !persistence.isGrayscaleEnabled(null)) },
    )
}
```

--------------------------------

### PreviewPersistentKepkoTheme Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/persistence.md

Example of using PreviewPersistentKepkoTheme with a dark theme configuration and a button.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
PreviewPersistentKepkoTheme(
    isSystemInDarkTheme = true,
    configure = {
        paletteDark = ColorPalette.SOLARIZED_DARK
        setPalettePrimary(null, ColorPalette.SOLARIZED_DARK)
    },
) {
    PersistentPreferenceThemeButton(onClick = {})
}
```

--------------------------------

### PersistentPreferenceThemeScreen Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/persistence.md

Example showing how to conditionally display the theme screen with custom top content.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
if (showThemeScreen) {
    PersistentPreferenceThemeScreen(
        onBackClick = { showThemeScreen = false },
        activeProfile = activeProfile,
        targetProfile = editingProfile,
        topContent = { PreferenceAppIdentity(title = "My App", versionName = "1.0.0", icon = Icons.rocketLaunch) },
    )
}
```

--------------------------------

### PreferenceRadioGroup Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-preferences.md

A basic implementation showing how to define items and initialize a PreferenceRadioGroup.

```kotlin
val items = listOf(
    PreferenceRadioGroupItem(id = "a", segment = 0) { "Option A" },
    PreferenceRadioGroupItem(id = "b", segment = 1, badge = Badge.alpha) { "Option B" },
)
PreferenceRadioGroup(
    title = "Mode",
    selectedId = selectedMode,
    items = items,
    onSelectId = { selectedMode = it },
)
```

--------------------------------

### rememberListDetailSceneStrategy usage example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/navigation.md

An example showing how to integrate rememberListDetailSceneStrategy within a NavDisplay component.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
@Composable
fun AppNav(backStack: List<NavKey>) {
    NavDisplay(
        backStack = backStack,
        sceneStrategies = listOf(
            rememberListDetailSceneStrategy(
                isLargeWindow = isLargeWindow(),
                isTwoPane = isTwoPaneWindow(),
            ),
        ),
        entryProvider = { route ->
            val metadata =
                if (route == Home) ListDetailSceneStrategy.list()
                else ListDetailSceneStrategy.detail()
            NavEntry(route, metadata = metadata) { /* screen content */ }
        },
    )
}
```

--------------------------------

### Foreground Component Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-layout.md

Example of using the Foreground component with a custom shape and border.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
Foreground(shape = KepkoTheme.shapes.large, border = borderStroke()) {
    Text("Floating card")
}
```

--------------------------------

### ColorPalette usage example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-theme.md

Demonstrates retrieving a palette by ID or falling back to the system theme, then applying it to the KepkoTheme.

```kotlin
val palette = ColorPalette.fromIdOrNull("catppuccin-mocha") ?: ColorPalette.fromSystemDarkTheme()
KepkoTheme(palette = palette) { /* ... */ }
```

--------------------------------

### PersistentKepkoTheme Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/persistence.md

Demonstrates the basic implementation of PersistentKepkoTheme wrapping app content.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
PersistentKepkoTheme {
    Scaffold(title = "App", onBackClick = {}) { padding ->
        Button(
            text = "Open theme",
            onClick = { showThemeScreen = true },
            modifier = Modifier.padding(padding),
        )
    }
}
```

--------------------------------

### Counter example using TextTabular

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-inputs.md

Example usage of TextTabular in a counter composable. It increments a count every second and displays it with a font size of 32.sp. Requires opting in to the ExperimentalKepkoApi.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
@Composable
fun Counter() {
    val count by produceState(initialValue = 0) { while (true) { delay(1000); value++ } }
    TextTabular(text = count.toString(), fontSize = 32.sp)
}
```

--------------------------------

### IconPickerGrid usage example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/resource.md

Demonstrates how to use the getAllIcons() function within a LazyVerticalGrid to display icons in a UI.

```kotlin
@Composable
fun IconPickerGrid() {
    val icons = getAllIcons()
    LazyVerticalGrid(GridCells.Adaptive(48.dp)) {
        items(icons.size) { i ->
            val (name, painter) = icons.entries.elementAt(i)
            Icon(painter, contentDescription = name)
        }
    }
}
```

--------------------------------

### KepkoTheme usage example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-theme.md

Demonstrates using KepkoTheme to follow the system dark mode or applying a fixed palette with grayscale enabled.

```kotlin
@Composable
fun App() {
    // Follow system dark mode:
    KepkoTheme { Text("Hello") }

    // Fixed palette + grayscale:
    KepkoTheme(palette = ColorPalette.CATPPUCCIN_MOCHA, grayscale = true) {
        TextPill(text = "Yasan", containerColor = KepkoTheme.colors.information)
    }
}
```

--------------------------------

### FocusBorder usage example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-style.md

Demonstrates applying a focus border to a Surface component using the experimental API.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
@Composable
fun Card() {
    Surface(color = KepkoTheme.colors.foreground, modifier = Modifier.focusBorder(shape = KepkoTheme.shapes.large)) {
        Text("Focusable card")
    }
}
```

--------------------------------

### KepkoTheme usage example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-theme.md

Demonstrates applying a specific palette and grayscale mode using KepkoTheme, and accessing colors via KepkoTheme.colors.

```kotlin
@Composable
fun Demo() {
    KepkoTheme(palette = ColorPalette.BLACK, grayscale = true) {
        // All colors are now grayscale:
        val danger = KepkoTheme.colors.danger
        Button(
            text = "Delete",
            onClick = {},
            containerColor = danger,
            contentColor = KepkoTheme.colors.onDanger,
        )
    }
}
```

--------------------------------

### ExpandableColumn Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-buttons.md

Demonstrates how to implement an ExpandableColumn with a state variable to manage the expanded state.

```kotlin
var expanded by remember { mutableStateOf(false) }
ExpandableColumn(title = "Advanced", expanded = expanded, onExpandChange = { expanded = it }) {
    PreferenceSwitch(title = "Telemetry", checked = telemetry, onCheckedChange = { telemetry = it }, leadingContent = {})
}
```

--------------------------------

### Scaffold usage example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-layout.md

A basic implementation of the Scaffold component featuring a title, back navigation, a subtitle, and trailing content.

```kotlin
Scaffold(
    title = "Settings",
    onBackClick = { navController.popBackStack() },
    subtitle = { Subtitle(text = "General", icon = Icons.settings) },
    trailingContent = { IconButton(Icons.palette, "Palette", onClick = {}) },
) { padding ->
    Column(Modifier.padding(padding)) {
        PreferenceSwitch(title = "Dark", checked = dark, onCheckedChange = { dark = it }, leadingContent = {})
    }
}
```

--------------------------------

### PreferenceContainer Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-preferences.md

A basic implementation of a PreferenceContainer with a title, description, badge, and a trailing icon.

```kotlin
PreferenceContainer(
    title = "Storage",
    description = "Manages app data",
    badge = Badge.beta,
    trailingContent = { Icon(NamedIcon.FOLDER.painter(), null) },
) {
    // custom content
}
```

--------------------------------

### Example JSON component contract

Source: https://github.com/yasanglass/kepko/blob/main/README.md

A sample JSON string representing a button component contract.

```json
{
  "on_click": "on-click",
  "text": "Text Value",
  "leading_icon": "info"
}
```

--------------------------------

### TextField Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-inputs.md

A basic implementation of a TextField used within a login form, demonstrating state management and validation.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    TextField(
        value = email,
        onValueChange = { email = it },
        label = "Email",
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
        isError = email.isNotBlank() && !email.contains("@"),
        leadingIcon = { Icon(NamedIcon.PERSON.painter(), null) },
    )
}
```

--------------------------------

### PreferenceAppIdentity Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-preferences.md

A basic implementation of the PreferenceAppIdentity component showing how to pass the title, version, icon, extras, and badge.

```kotlin
PreferenceAppIdentity(
    title = "Yasan Launcher",
    versionName = "2.4.1",
    icon = NamedIcon.ROCKET_LAUNCH.painter(),
    extras = arrayOf("OSS"),
    badge = Badge.beta,
)
```

--------------------------------

### NamedIcon Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/resource.md

Demonstrates retrieving a painter from a NamedIcon and performing a round-trip lookup using fromIdOrNull.

```kotlin
val painter: Painter = NamedIcon.SEARCH.painter()
// round trip:
NamedIcon.fromIdOrNull("search")?.painter?.invoke()
```

--------------------------------

### Decoding KepkoThemeContract from JSON

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/serialization.md

Example of decoding a JSON string into a KepkoThemeContract instance.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
val theme = Json(from = kepkoJson).decodeFromString<KepkoThemeContract>("""{
    "palette_id": "catppuccin-mocha",
    "grayscale": false,
    "outline_dp": 1.0,
    "roundness": 1.0
}""")
```

--------------------------------

### Animated determinate CircularProgressIndicator example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-inputs.md

Example of animating a determinate CircularProgressIndicator from 0f to 1f over 2000 milliseconds using Animatable and LaunchedEffect, passing the animated value as the progress lambda.

```kotlin
val progress = remember { Animatable(0f) }
LaunchedEffect(Unit) { progress.animateTo(1f, tween(2000)) }
CircularProgressIndicator(progress = { progress.value })
```

--------------------------------

### Using Icons in a Composable

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/resource.md

Example of using an Icon from the Icons object within a Composable function.

```kotlin
@Composable
fun IconDemo() {
    KepkoTheme {
        Icon(painter = Icons.info, contentDescription = "Info", tint = KepkoTheme.colors.information)
    }
}
```

--------------------------------

### ServerRenderedButton Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/serialization.md

Demonstrates how to decode a JSON string into a ButtonContract and pass it to the ContractButton composable.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
@Composable
fun ServerRenderedButton(json: String) {
    val contract = remember(json) {
        Json(from = kepkoJson).decodeFromString<ButtonContract>(json)
    }
    ContractButton(
        contract = contract,
        onClick = { action -> handleAction(action) },
        onLongClick = { action -> handleAction(action) },
    )
}

// JSON:
// { "on_click": "on-click", "text": "Text Value", "leading_icon": "info" }
```

--------------------------------

### NamedColor resolution example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-theme.md

Demonstrates how to resolve a NamedColor to a concrete Color within a Composable function using the current theme colors.

```kotlin
@Composable
fun NamedColorDemo() {
    KepkoTheme {
        val c = NamedColor.INFORMATION.resolve(KepkoTheme.colors)   // Color
        // or via serialization: Json.decodeFromString<ButtonContract>(...)
    }
}
```

--------------------------------

### SegmentedPicker Usage Example

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-layout.md

A basic implementation of the SegmentedPicker component using state to manage the selected view mode.

```kotlin
var mode by remember { mutableStateOf(ViewMode.LIST) }
SegmentedPicker(
    items = listOf(
        SegmentedPickerItem(value = ViewMode.LIST, icon = Icons.menu, contentDescription = "List"),
        SegmentedPickerItem(value = ViewMode.GRID, icon = Icons.shapes, text = "Grid"),
    ),
    selected = mode,
    onSelect = { mode = it },
    displayMode = SegmentedPickerDisplayMode.ICON_WITH_TEXT,
)
```

--------------------------------

### Customizing dimensions in KepkoTheme

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-style.md

Example of overriding default dimensions within the KepkoTheme.

```kotlin
KepkoTheme(
    dimensions = dimensions(borderThickness = 2.dp, iconSize = 28.dp),
) { Text("thicker borders") }
```

--------------------------------

### Implement ListDetailSceneStrategy

Source: https://github.com/yasanglass/kepko/blob/main/README.md

Configure NavDisplay with ListDetailSceneStrategy to show list and detail entries side-by-side on large windows. Wrap content in PersistentKepkoTheme to persist divider positions.

```kotlin
NavDisplay(
    backStack = backStack,
    sceneStrategies = listOf(
        rememberListDetailSceneStrategy(
            isLargeWindow = isLargeWindow(),
            isTwoPane = isTwoPaneWindow(),
        ),
    ),
    entryProvider = { route ->
        val metadata = if (route == Home) ListDetailSceneStrategy.list() else ListDetailSceneStrategy.detail()
        NavEntry(route, metadata = metadata) { /* screen */ }
    },
)
```

--------------------------------

### Apply Transition Specification in SceneStrategy

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/navigation.md

Demonstrates how to use the layout transition helpers within a SceneStrategy transitionSpec block.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
transitionSpec = {
    if (isLayoutChange()) layoutChangeTransform() else fadeIn() togetherWith fadeOut()
}
```

--------------------------------

### Accessing KepkoTheme values

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-theme.md

Example of retrieving shape and color tokens from the current KepkoTheme within a Composable function.

```kotlin
@Composable
fun RowOfButtons() {
    val shape = KepkoTheme.shapes.medium          // Shape from current theme
    val outline = KepkoTheme.colors.outline       // Color
    Button(text = "Hi", onClick = {}, shape = shape, containerColor = KepkoTheme.colors.foreground)
}
```

--------------------------------

### Window-size helper functions

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/navigation.md

Utility functions to determine window size categories, including composable overloads that read from LocalWindowInfo.

```kotlin
@ExperimentalKepkoApi
@Composable
public fun isLargeWindow(): Boolean = isLargeWindow(LocalWindowInfo.current.containerDpSize)

@ExperimentalKepkoApi
public fun isLargeWindow(size: DpSize): Boolean = minOf(size.width, size.height) >= 600.dp

@ExperimentalKepkoApi
@Composable
public fun isTwoPaneWindow(): Boolean = isTwoPaneWindow(LocalWindowInfo.current.containerDpSize)

@ExperimentalKepkoApi
public fun isTwoPaneWindow(size: DpSize): Boolean = isLargeWindow(size) && size.width >= 840.dp
```

--------------------------------

### getAllIcons() implementation

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/resource.md

Retrieves all drawable resources starting with 'ic_' and converts them into a map of humanized names to Painter objects.

```kotlin
/**
 * @return a map of all icon painters with their names as keys.
 */
@Composable
public fun getAllIcons(): Map<String, Painter> = Res.allDrawableResources
    .filterKeys { it.startsWith("ic_") }
    .entries
    .sortedBy { it.key }
    .associate { (key, resource) ->
        val name = key.removePrefix("ic_")
            .split("_")
            .joinToString(" ") { word -> word.replaceFirstChar { it.uppercase() } }
        name to painterResource(resource)
    }
```

--------------------------------

### Standard Button usage

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-buttons.md

A basic implementation of the Button component with text, an icon, and a badge.

```kotlin
Button(
    text = "Save changes",
    onClick = { save() },
    leadingIcon = NamedIcon.SAVE.painter(),
    description = "Writes all pending edits",
    badge = Badge.new,
)
```

--------------------------------

### ListDetailSceneStrategy.list()

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/navigation.md

Companion factory method that returns a metadata map to tag a navigation entry as a list entry. Use this value when creating a NavEntry with metadata.

```APIDOC
## ListDetailSceneStrategy.list()

### Description
Returns a metadata map to tag a navigation entry as a list entry. This is used with Navigation 3's metadata parameter in NavEntry.

### Method
Factory method (companion object)

### Parameters
None

### Returns
- **Map<String, Any>** - Metadata map containing the list key.

### Example
```kotlin
val metadata = ListDetailSceneStrategy.list()
```
```

--------------------------------

### Direct Button usage equivalent

Source: https://github.com/yasanglass/kepko/blob/main/README.md

The standard way to implement the button component without using serialization.

```kotlin
Button(
    text = "Text Value",
    onClick = { println("on-click") },
    leadingIcon = NamedIcon.INFO.painter(),
)
```

--------------------------------

### Button disabled state and icon-only configuration

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-buttons.md

An example of an icon-only button that handles network availability via the enabled property.

```kotlin
Button(
    text = null,                          // icon-only
    onClick = { retry() },
    leadingIcon = NamedIcon.REFRESH.painter(),
    enabled = isNetworkAvailable,
    fillWidth = false,
    onClickLabel = "Retry",
)
```

--------------------------------

### ListDetailSceneStrategy.detail()

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/navigation.md

Companion factory method that returns a metadata map to tag a navigation entry as a detail entry. Use this value when creating a NavEntry with metadata.

```APIDOC
## ListDetailSceneStrategy.detail()

### Description
Returns a metadata map to tag a navigation entry as a detail entry. This is used with Navigation 3's metadata parameter in NavEntry.

### Method
Factory method (companion object)

### Parameters
None

### Returns
- **Map<String, Any>** - Metadata map containing the detail key.

### Example
```kotlin
val metadata = ListDetailSceneStrategy.detail()
```
```

--------------------------------

### ListDetailSceneStrategy companion factory methods

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/navigation.md

Factory methods used to tag NavEntry metadata as list or detail entries.

```kotlin
public fun list(): Map<String, Any> = metadata { put(ListKey, true) }
public fun detail(): Map<String, Any> = metadata { put(DetailKey, true) }
```

--------------------------------

### Usage skeleton with PersistentKepkoTheme

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/README.md

A basic implementation showing the use of PersistentKepkoTheme, Scaffold, and PreferenceCheckbox components.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
@Composable
fun App() {
    PersistentKepkoTheme {            // or plain KepkoTheme
        Scaffold(title = "My App", onBackClick = {}) { padding ->
            Button(text = "Save", onClick = { /* ... */ })
            PreferenceCheckbox(
                title = "Notifications",
                checked = true,
                onCheckedChange = {},
                leadingIcon = NamedIcon.INFO.painter(),
            )
        }
    }
}
```

--------------------------------

### Define List-Detail Transition Helpers

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/navigation.md

Defines isLayoutChange to detect layout-only changes and layoutChangeTransform to provide a cross-fade animation for those transitions.

```kotlin
@ExperimentalKepkoApi
public fun <T : Any> AnimatedContentTransitionScope<Scene<T>>.isLayoutChange(): Boolean =
    initialState.entries.lastOrNull()?.contentKey == targetState.entries.lastOrNull()?.contentKey

@ExperimentalKepkoApi
public fun layoutChangeTransform(): ContentTransform {
    val spec = tween<Float>(durationMillis = ListDetailDefaults.LAYOUT_CHANGE_MILLIS)  // 250
    return fadeIn(spec) togetherWith fadeOut(spec)
}
```

--------------------------------

### ProfilePersistenceManager

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/persistence.md

Interface for managing per-profile theme overrides. Methods allow getting and setting palette and grayscale values for a given profile ID. Null values remove overrides.

```APIDOC
## ProfilePersistenceManager (interface)

### Description
Interface for managing per-profile theme overrides. Methods allow getting and setting palette and grayscale values for a given profile ID. Null values remove overrides.

### Methods

#### getProfilePalette(profileId: String): ColorPalette?
- **profileId** (String) - Required - The profile ID to look up.
- Returns the ColorPalette override for the profile, or null if not set.

#### setProfilePalette(profileId: String, value: ColorPalette?)
- **profileId** (String) - Required - The profile ID to set the override for.
- **value** (ColorPalette?) - Required - The palette to set, or null to remove the override.

#### getProfileGrayscale(profileId: String): Boolean?
- **profileId** (String) - Required - The profile ID to look up.
- Returns the grayscale override for the profile, or null if not set.

#### setProfileGrayscale(profileId: String, value: Boolean?)
- **profileId** (String) - Required - The profile ID to set the override for.
- **value** (Boolean?) - Required - The grayscale flag to set, or null to remove the override.

### Notes
- The default implementation persists under keys `glass.yasan.kepko.style.primary.profile.<id>` and `glass.yasan.kepko.grayscale.profile.<id>`.
- Uses a session `mutableStateMapOf` overlay for Compose recomposition.
```

--------------------------------

### ListDetailSceneStrategy class definition

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/navigation.md

The internal constructor for ListDetailSceneStrategy. Instances should be obtained via rememberListDetailSceneStrategy.

```kotlin
@ExperimentalKepkoApi
public class ListDetailSceneStrategy<T : Any> internal constructor(
    private val isLargeWindow: Boolean,
    private val isTwoPane: Boolean,
    private val paneState: ListDetailPaneState,
) : SceneStrategy<T> {
    public companion object {
        public fun list(): Map<String, Any>
        public fun detail(): Map<String, Any>
    }

    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>?
}
```

--------------------------------

### Wrap application content with KepkoTheme

Source: https://github.com/yasanglass/kepko/blob/main/README.md

Use the KepkoTheme to wrap your application content, enabling the use of Kepko-specific colors and components like TextPill.

```kotlin
KepkoTheme {
    Text("Hello, Kepko!")
    TextPill(
        text = "Yasan Glass",
        containerColor = KepkoTheme.colors.information,
    )
}
```

--------------------------------

### Layer custom configuration on kepkoJson

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/serialization.md

Use the Json constructor with the 'from' parameter to layer additional configuration, such as enabling default value encoding, onto the base kepkoJson instance.

```kotlin
val json = Json(from = kepkoJson) { encodeDefaults = true }
```

--------------------------------

### isSystemInDarkTheme() implementation

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-theme.md

A replacement for androidx.compose.foundation.isSystemInDarkTheme that functions reliably on desktop by utilizing io.github.kdroidfilter.platformtools.darkmodedetector.isSystemInDarkMode.

```kotlin
@Composable
public fun isSystemInDarkTheme(): Boolean = isSystemInDarkMode()
```

--------------------------------

### KepkoTheme(palette, grayscale, dimensions, shapes, content)

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-theme.md

First overload of KepkoTheme that accepts a ColorPalette to build the theme. It constructs Colors from the palette and delegates to the third overload.

```APIDOC
## KepkoTheme(palette, grayscale, dimensions, shapes, content)

### Description
Composes the Kepko theme using a ColorPalette. Builds Colors from the palette and delegates to the overload that accepts a Colors object.

### Signature
```kotlin
@Composable
public fun KepkoTheme(
    palette: ColorPalette,
    grayscale: Boolean = false,
    dimensions: Dimensions = KepkoTheme.dimensions,
    shapes: Shapes = KepkoTheme.shapes,
    content: @Composable () -> Unit,
)
```

### Parameters
- **palette** (ColorPalette) - Required - Palette whose tokens back Colors
- **grayscale** (Boolean) - Optional, default false - Desaturates every resolved color to its luminance
- **dimensions** (Dimensions) - Optional, default KepkoTheme.dimensions - Border thickness & icon size
- **shapes** (Shapes) - Optional, default KepkoTheme.shapes - Corner-radius shape set
- **content** (@Composable () -> Unit) - Required - App content composed inside the theme

### Behavior
Builds Colors(palette = palette, grayscale = grayscale) and delegates to the overload that accepts a Colors object.

### Return
Unit (composable). No return value.

### Example
```kotlin
@Composable
fun App() {
    KepkoTheme(palette = ColorPalette.CATPPUCCIN_MOCHA, grayscale = true) {
        TextPill(text = "Yasan", containerColor = KepkoTheme.colors.information)
    }
}
```
```

--------------------------------

### Configure KepkoJson instance

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/configuration.md

Defines the default Json configuration for Kepko, which ignores unknown keys during deserialization.

```kotlin
public val kepkoJson: Json = Json { ignoreUnknownKeys = true }
```

--------------------------------

### Implement PersistentKepkoTheme

Source: https://github.com/yasanglass/kepko/blob/main/README.md

Use PersistentKepkoTheme instead of the standard KepkoTheme to enable automatic persistence of theme preferences.

```kotlin
@OptIn(ExperimentalKepkoApi::class)
PersistentKepkoTheme {
    // your app content
}
```

--------------------------------

### Add Kepko dependencies with Gradle Kotlin DSL

Source: https://github.com/yasanglass/kepko/blob/main/README.md

Declare the component and foundation artifacts from Maven Central in your build.gradle.kts. Replace <version> with the current release.

```kotlin
implementation("glass.yasan.kepko:component:<version>")
implementation("glass.yasan.kepko:foundation:<version>")
```

--------------------------------

### TextButton, TextButtonColors, and TextButtonDefaults implementation

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-buttons.md

Provides the API for the TextButton component, its associated color data class, and default color configurations.

```kotlin
@Composable
public fun TextButton(
    onClick: () -> Unit,
    content: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    colors: TextButtonColors = TextButtonDefaults.colors(),
    enabled: Boolean = true,
    shape: Shape = KepkoTheme.shapes.extraLarge,
    border: BorderStroke? = null,
    elevation: ButtonElevation? = null,
    contentPadding: PaddingValues = TextButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
)

@Immutable
public data class TextButtonColors(
    val containerColor: Color,
    val contentColor: Color,
    val disabledContainerColor: Color,
    val disabledContentColor: Color,
)

public object TextButtonDefaults {
    public val ContentPadding: PaddingValues = Material3ButtonDefaults.TextButtonContentPadding

    @Composable
    public fun colors(
        containerColor: Color = Color.Transparent,
        contentColor: Color = KepkoTheme.colors.content,
        disabledContainerColor: Color = Color.Transparent,
        disabledContentColor: Color = KepkoTheme.colors.contentDisabled,
    ): TextButtonColors
}
```

--------------------------------

### PreviewPersistentKepkoTheme

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/persistence.md

Preview-oriented variant backed by PreviewPersistenceManager (in-memory, session-only). The active palette is always derived from the isSystemInDarkTheme parameter. configure mutates the manager before content composes.

```APIDOC
## PreviewPersistentKepkoTheme

### Description
Preview-oriented variant backed by PreviewPersistenceManager (in-memory, session-only). The active palette is always derived from the isSystemInDarkTheme parameter. configure mutates the manager before content composes.

### Signature
```kotlin
@OptIn(ExperimentalKepkoApi::class)
@Composable
public fun PreviewPersistentKepkoTheme(
    isSystemInDarkTheme: Boolean = false,
    configure: PreviewPersistenceManager.() -> Unit = {},
    content: @Composable () -> Unit,
)
```

### Parameters
- **isSystemInDarkTheme** (Boolean) - Optional - Determines the active palette (dark or light).
- **configure** (PreviewPersistenceManager.() -> Unit) - Optional - Mutates the manager before content composes.
- **content** (@Composable () -> Unit) - Required - The composable content to display.

### Example
```kotlin
@OptIn(ExperimentalKepkoApi::class)
PreviewPersistentKepkoTheme(
    isSystemInDarkTheme = true,
    configure = {
        paletteDark = ColorPalette.SOLARIZED_DARK
        setPalettePrimary(null, ColorPalette.SOLARIZED_DARK)
    },
) {
    PersistentPreferenceThemeButton(onClick = {})
}
```
```

--------------------------------

### Scaffold(title, modifier, leadingContent, trailingContent, bottomBar, snackbarHost, floatingActionButton, floatingActionButtonPosition, containerColor, contentColor, contentWindowInsets, badge, subtitle, textAlign, reverse, content)

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-layout.md

First overload of the Scaffold composable. Creates a page scaffold with a title bar, optional leading/trailing content, bottom bar, snackbar host, floating action button, and a content area with insets padding.

```APIDOC
## [Composable] Scaffold(title, modifier, leadingContent, trailingContent, bottomBar, snackbarHost, floatingActionButton, floatingActionButtonPosition, containerColor, contentColor, contentWindowInsets, badge, subtitle, textAlign, reverse, content)

### Description
Creates a page scaffold with a title bar, optional leading/trailing content, bottom bar, snackbar host, floating action button, and a content area with insets padding.

### Method
Composable function

### Parameters
- **title** (String) - Required - Passed to TitleBar
- **modifier** (Modifier) - Optional - Default: Modifier
- **leadingContent** (@Composable (RowScope.() -> Unit)?) - Optional - Default: null - Title bar slot
- **trailingContent** (@Composable (RowScope.() -> Unit)?) - Optional - Default: null - Title bar slot
- **bottomBar** (@Composable RowScope.() -> Unit) - Optional - Default: {}
- **snackbarHost** (@Composable () -> Unit) - Optional - Default: {}
- **floatingActionButton** (@Composable () -> Unit) - Optional - Default: {}
- **floatingActionButtonPosition** (FabPosition) - Optional - Default: FabPosition.End
- **containerColor** (Color) - Optional - Default: KepkoTheme.colors.midground - Page background
- **contentColor** (Color) - Optional - Default: contentColorFor(containerColor) - Page content color
- **contentWindowInsets** (WindowInsets) - Optional - Default: ScaffoldDefaults.contentWindowInsets
- **badge** (Badge?) - Optional - Default: null - Title bar badge
- **subtitle** (@Composable () -> Subtitle)?) - Optional - Default: null - Renders HorizontalDivider + SubtitleBar under the title bar
- **textAlign** (TextAlign) - Optional - Default: TextAlign.Unspecified - Title bar option
- **reverse** (Boolean) - Optional - Default: false - Title bar option
- **content** (@Composable (contentPadding: PaddingValues) -> Unit) - Required - Page body with insets padding

### Example
```kotlin
Scaffold(
    title = "Settings",
    onBackClick = { navController.popBackStack() },
    subtitle = { Subtitle(text = "General", icon = Icons.settings) },
    trailingContent = { IconButton(Icons.palette, "Palette", onClick = {}) },
) { padding ->
    Column(Modifier.padding(padding)) {
        PreferenceSwitch(title = "Dark", checked = dark, onCheckedChange = { dark = it }, leadingContent = {})
    }
}
```
```

--------------------------------

### Surface and Foreground Component Definitions

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-layout.md

Definitions for the experimental Surface and Foreground composables, which provide layer-fixed variants for layout.

```kotlin
@ExperimentalKepkoApi
@Composable
public fun Surface(
    color: Color,
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    contentColor: Color = contentColorFor(containerColor = color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit,
)

@ExperimentalKepkoApi
@Composable
public fun Foreground(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    contentColor: Color = contentColorFor(containerColor = KepkoTheme.colors.foreground),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit,
)
```

--------------------------------

### Icons.newWindow

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/resource.md

A @Composable getter that returns a Painter for the 'newWindow' icon, loaded from the bundled drawable resource ic_newWindow.

```APIDOC
## Icons.newWindow

### Description
A @Composable getter that returns a Painter for the 'newWindow' icon, loaded from the bundled drawable resource ic_newWindow.

### Property
- **name**: newWindow
- **type**: Painter
- **modifier**: @Composable get

### Source
`resource/src/commonMain/kotlin/glass/yasan/kepko/resource/Icons.kt`
```

--------------------------------

### TextTabularDefaults object

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-inputs.md

Provides the default character candidates for auto-measuring charWidth and a spring-based animation spec with configurable damping ratio and stiffness.

```kotlin
@ExperimentalKepkoApi
public object TextTabularDefaults {
    public val defaultCandidates: List<Char> =
        ('0'..'9') + ('A'..'Z') + ('a'..'z') + listOf('.', '-', '+', ',', ':', ' ')

    public fun animationSpec(
        dampingRatio: Float = Spring.DampingRatioLowBouncy,
        stiffness: Float = Spring.StiffnessMedium,
    ): AnimationSpec<Float> = spring(dampingRatio = dampingRatio, stiffness = stiffness)
}
```

--------------------------------

### PreferenceRadioButton (overload 1)

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-preferences.md

Creates a single selectable row with a radio dot placed trailing by default. Accepts a leading icon as a Painter and optional description, badge, and reverse layout.

```APIDOC
## PreferenceRadioButton (overload 1)

### Description
Creates a single selectable row with a radio dot placed trailing by default. The inner RadioButton uses minimumInteractiveComponentSize = 0.dp and is not directly focusable.

### Signature
@Composable
public fun PreferenceRadioButton(
    title: String,
    selected: Boolean,
    onClick: () -> Unit,
    leadingIcon: Painter,
    modifier: Modifier = Modifier,
    description: String? = null,
    enabled: Boolean = true,
    badge: Badge? = null,
    reverse: Boolean = false,
)

### Parameters
- **title** (String) - Required - The title text of the row.
- **selected** (Boolean) - Required - Whether the radio button is selected.
- **onClick** (() -> Unit) - Required - Callback invoked when the row is clicked.
- **leadingIcon** (Painter) - Required - The leading icon painter.
- **modifier** (Modifier) - Optional - Modifier to apply to the row.
- **description** (String?) - Optional - Optional description text.
- **enabled** (Boolean) - Optional - Whether the row is enabled.
- **badge** (Badge?) - Optional - Optional badge to display.
- **reverse** (Boolean) - Optional - If true, moves the radio dot to the leading slot.

```

--------------------------------

### borderStroke utility

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/foundation-style.md

Creates a BorderStroke using theme-defined outline colors and border thickness.

```kotlin
@Composable
public fun borderStroke(
    color: Color = KepkoTheme.colors.outline,
    thickness: Dp = KepkoTheme.dimensions.borderThickness,
): MaterialBorderStroke
```

--------------------------------

### Icons.experiment

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/resource.md

A @Composable getter that returns a Painter for the 'experiment' icon, loaded from the bundled drawable resource ic_experiment.

```APIDOC
## Icons.experiment

### Description
A @Composable getter that returns a Painter for the 'experiment' icon, loaded from the bundled drawable resource ic_experiment.

### Property
- **name**: experiment
- **type**: Painter
- **modifier**: @Composable get

### Source
`resource/src/commonMain/kotlin/glass/yasan/kepko/resource/Icons.kt`
```

--------------------------------

### PreferenceAppIdentity

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-preferences.md

A composable function that renders a centered 'About' header with app icon, title, version name, optional extras pill, and optional badge. The extras are joined with spaces into a single TextPill, and the badge is displayed after it.

```APIDOC
## PreferenceAppIdentity

### Description
Centered "About" header: app icon (tinted, 24.dp tall) + "$title $versionName"; extras are joined with spaces into a single TextPill (containerColor = background), followed by the optional badge pill. remember { extras.joinToString(" ") } means extras are only re-joined when the array instance changes.

### Signature
```kotlin
@Composable
public fun PreferenceAppIdentity(
    title: String,
    versionName: String,
    modifier: Modifier = Modifier,
    icon: Painter? = null,
    iconTint: Color? = KepkoTheme.colors.content,
    extras: Array<String> = emptyArray(),
    badge: Badge? = null,
    contentPadding: PaddingValues = PaddingValues(all = 16.dp),
)
```

### Parameters
- **title** (String) - Required - The app title to display.
- **versionName** (String) - Required - The version name to display alongside the title.
- **modifier** (Modifier) - Optional - Modifier for the composable.
- **icon** (Painter?) - Optional - The app icon painter. If null, no icon is shown.
- **iconTint** (Color?) - Optional - The tint color for the icon. Defaults to KepkoTheme.colors.content.
- **extras** (Array<String>) - Optional - Additional strings to display as a text pill, joined with spaces.
- **badge** (Badge?) - Optional - An optional badge to display after the extras pill.
- **contentPadding** (PaddingValues) - Optional - Padding around the content. Defaults to 16.dp on all sides.

### Example
```kotlin
PreferenceAppIdentity(
    title = "Yasan Launcher",
    versionName = "2.4.1",
    icon = NamedIcon.ROCKET_LAUNCH.painter(),
    extras = arrayOf("OSS"),
    badge = Badge.beta,
)
```
```

--------------------------------

### Icon(bitmap, contentDescription, ...)

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/component-buttons.md

Composable function that displays an icon using an ImageBitmap. The icon is sized to the theme's icon size.

```APIDOC
## Icon(bitmap, contentDescription, ...)

### Description
Displays an icon using an ImageBitmap. The icon is sized to KepkoTheme.dimensions.iconSize (default 24.dp).

### Method
Composable function

### Signature
```kotlin
@Composable
public fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    tint: Color = LocalContentColor.current,
    modifier: Modifier = Modifier,
    size: Dp = KepkoTheme.dimensions.iconSize,
)
```

### Parameters
- **bitmap** (ImageBitmap) - Required - The image bitmap to draw as the icon.
- **contentDescription** (String?) - Required - The content description for accessibility.
- **tint** (Color) - Optional - The tint color for the icon. Defaults to LocalContentColor.current.
- **modifier** (Modifier) - Optional - Modifier to be applied to the icon.
- **size** (Dp) - Optional - The size of the icon. Defaults to KepkoTheme.dimensions.iconSize.
```

--------------------------------

### Icons.modelTraining

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/resource.md

A @Composable getter that returns a Painter for the 'modelTraining' icon, loaded from the bundled drawable resource ic_modelTraining.

```APIDOC
## Icons.modelTraining

### Description
A @Composable getter that returns a Painter for the 'modelTraining' icon, loaded from the bundled drawable resource ic_modelTraining.

### Property
- **name**: modelTraining
- **type**: Painter
- **modifier**: @Composable get

### Source
`resource/src/commonMain/kotlin/glass/yasan/kepko/resource/Icons.kt`
```

--------------------------------

### Handling Serialization Exceptions

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/serialization.md

Shows how to wrap the decoding process in a try-catch block to handle malformed JSON or missing fields gracefully.

```kotlin
val contract = try {
    Json(from = kepkoJson).decodeFromString<ButtonContract>(jsonString)
} catch (e: SerializationException) {
    // fall back to a safe default
    null
}
```

--------------------------------

### PersistentKepkoTheme (overload 1)

Source: https://github.com/yasanglass/kepko/blob/main/_autodocs/api-reference/persistence.md

Composable that applies persisted theme settings using the default persistence manager. Resolves palette, shapes, and dimensions from persistence.

```APIDOC
## PersistentKepkoTheme (overload 1)

### Description
Composable that applies persisted theme settings using the default persistence manager. Resolves palette, shapes, and dimensions from persistence.

### Signature
```kotlin
@ExperimentalKepkoApi
@Composable
public fun PersistentKepkoTheme(
    dimensions: Dimensions = KepkoTheme.dimensions,
    isSystemInDarkTheme: Boolean = isSystemInDarkTheme(),
    profileId: String? = null,
    content: @Composable () -> Unit,
)
```

### Parameters
- **dimensions** (Dimensions) - Optional - Default: `KepkoTheme.dimensions` - Base dimensions; `borderThickness` is overridden with `persistenceManager.outline`.
- **isSystemInDarkTheme** (Boolean) - Optional - Default: `isSystemInDarkTheme()` - System dark flag for palette resolution.
- **profileId** (String?) - Optional - Default: `null` - Active profile for override lookups.
- **content** (@Composable () -> Unit) - Required - App content.

### Behavior
- Resolves `palette = persistenceManager.getActivePalette(profileId, isSystemInDarkTheme)`.
- Computes `Shapes` from `roundness` multiplier (each `RoundedCornerShape(ShapeTokens.x * roundness)`).
- Calls `KepkoTheme(palette, grayscale = persistenceManager.isGrayscaleEnabled(profileId), dimensions = resolvedDimensions, shapes = resolvedShapes)`.
- Provides `LocalKepkoPersistenceManager` and `LocalKepkoColorPalette`.

### Example
```kotlin
@OptIn(ExperimentalKepkoApi::class)
PersistentKepkoTheme {
    Scaffold(title = "App", onBackClick = {}) { padding ->
        Button(
            text = "Open theme",
            onClick = { showThemeScreen = true },
            modifier = Modifier.padding(padding),
        )
    }
}
```
```
Tokens:
Raw