Tabotabo UI

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
    }
}

// build.gradle.kts of your shared module
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.tabotabodev:tabotabo-ui:0.2.1")
        }
    }
}

// app/build.gradle.kts
dependencies {
    implementation("io.github.tabotabodev:tabotabo-ui:0.2.1")
}

enum class AppearanceChoice { Light, Dark, System }

@Composable
fun App() {
    var appearance by rememberSaveable { mutableStateOf(AppearanceChoice.System) } // persist it your way
    val hueState = rememberHueState() // a fresh random hue on every launch / page load

    TabotaboTheme(
        darkTheme = when (appearance) {
            AppearanceChoice.Light -> false
            AppearanceChoice.Dark -> true
            AppearanceChoice.System -> isSystemInDarkTheme()
        },
        hueState = hueState,
        systemBars = null, // see "Platform hooks"
    ) {
        HomeScreen()
    }
}

TabotaboTheme.colors      // TabotaboColors
TabotaboTheme.typography  // Material Typography
TabotaboTheme.dimensions  // spacing, corners, strokes, margins
TabotaboTheme.motion      // animation tokens

val colors = tabotaboColors(Hue(210f), isDark = true)
colors.background; colors.surface; colors.primary; colors.accent; colors.muted
colors.outline; colors.outlineStrong; colors.disabled

colors.distinct(index = 2)          // a distinct, readable color for people / series / tags (golden-angle steps)

hueState.shuffle()                  // "Shuffle colors"
hueState.hue = Hue(120f)            // set a specific hue, e.g. from a slider
Hue.random()                        // a random hue
Hue(-30f).degrees                   // 330.0: any angle is normalised

// Material3 ColorSchemes, if you only want the colors
// (M3 outline = outlineStrong, outlineVariant = outline; error colors stay Material's own)
tabotaboDarkColorScheme(hue); tabotaboLightColorScheme(hue)
randomDarkColorScheme(); randomLightColorScheme()  // each picks its own hue

// Contrast helpers
contrastRatio(foreground, background)
color.ensureContrast(ContrastTargets.Text, listOf(background, surface))

TabotaboTheme(
    darkTheme = dark,
    typography = tabotaboTypography(
        displayFamily = myDisplayFont, // hero, headline, screen title
        bodyFamily = myBodyFont,       // body, caption, footnote
        labelFamily = myLabelFont,     // buttons, labels, tags
    ),
) { … }

TypewriterText {              // types in once, letter by letter
    UnfocusedText("Hello")
    FocusedText("User")       // starts after "Hello" finishes
}

EmphasisText {                // the same, without animation
    UnfocusedText("Where to")
    FocusedText("next")
    UnfocusedText("?")        // no space is added before punctuation
}

// Translations: keep the focused phrase separate
TypewriterText { Formatted(stringResource(Res.string.plan_title), "trip") } // "Plan the %s"

// Spacing control
EmphasisText { UnfocusedText("Note"); NoSpace(); FocusedText("book") }

val state = rememberTypewriterState(
    key = statusId,                     // a new key restarts the reveal
    startDelay = 400.milliseconds,      // e.g. chain after a title
    onFinished = { /* … */ },
)
TypewriterText(state = state, minLines = 2) { … } // reserve lines so the layout never shifts
state.skip(); state.restart(); state.isFinished

ActionStack {                                   // full width, stacked, centred
    PrimaryButton("Get started", onClick = ::start)
    SecondaryButton("Settings", onClick = ::openSettings, enabled = canOpen)
}

PrimaryButton(onClick = ::share, leadingIcon = { MyShareIcon() }, text = "Share") // icons are tinted automatically

PrimaryButton(onClick = ::start) {              // slot API
    Text("Custom content")
}

IconAction(onClick = ::back, contentDescription = "Back") { MyArrowIcon() }       // bare icon, 48dp target

GlowCard(highlighted = isSelected, onClick = { select() }) {   // outline turns primary and glows when highlighted
    Text("Card content")
}

SelectablePillRow(                                  // selected: primary outline; others: outlineStrong
    options = listOf("Daily", "Weekly", "Monthly"),
    selected = period,
    onSelect = { period = it },
    label = { it },
)

Tag("Beta")                                        // tiny display-only pill
Modifier.glowOutline(color, 2.dp, shape, glowRadius = 16.dp)

TabotaboDialog(
    onDismissRequest = { show = false },
    confirmText = "Got it",
    onConfirm = { show = false },
    title = { UnfocusedText("Changes"); FocusedText("saved") },
) { Subtitle("Your list is up to date.") }

ScreenScaffold(
    webLayout = isBrowser,
    header = {
        ScreenHeader(
            onBack = ::back, backContentDescription = "Back",
            subtitle = "Pick a destination and dates.",
        ) { UnfocusedText("Plan the"); FocusedText("trip") }
    },
    actions = { PrimaryButton("Continue", onClick = ::next) },
) {
    CardList(items = destinations, key = { it.id }) { place -> DestinationCard(place) } // scrolling column; a grid on web
}

PopInContent(targetState = count) { Text("$it") }   // fade + scale-in when the value changes
Text("Thinking…", Modifier.pulse(active = isThinking))
Box(Modifier.celebrate(trigger = milestone))          // bouncy scale-up when the trigger changes

TabotaboTheme(darkTheme = dark, motion = TabotaboMotion.Reduced) { … } // honour reduce-motion

AppearanceSetting(
    options = AppearanceChoice.entries,
    selected = appearance,
    onSelect = { appearance = it /* and persist */ },
    label = { it.name },
    title = "Appearance",
    description = "Pick light or dark, or follow your device.",
)
SettingsSection(title = "Colors", description = "Every launch picks a new color.") {
    ShuffleColorsButton(hueState)
}
SettingsSection(title = "About") { Fact("App version", "1.0.0") }

// androidMain: light/dark system-bar icons for an edge-to-edge activity
@Composable
fun rememberSystemBarsAppearance(): SystemBarsAppearance {
    val view = LocalView.current
    return remember(view) {
        SystemBarsAppearance { colors ->
            val window = (view.context as Activity).window
            WindowCompat.getInsetsController(window, view).apply {
                isAppearanceLightStatusBars = !colors.isDark
                isAppearanceLightNavigationBars = !colors.isDark
            }
        }
    }
}