From 03d28fe84785e0152b81ccdd146521aa9c0cbda6 Mon Sep 17 00:00:00 2001
From: Mori-Atsushi <at.sushi.tb@gmail.com>
Date: Fri, 24 Nov 2023 21:04:53 +0900
Subject: [PATCH 1/4] Add a module for AppBar

---
 .../compose_stylesheet_appbar_desktop.xml     |  8 +++
 .idea/gradle.xml                              |  1 +
 .../build.gradle.kts                          | 52 +++++++++++++++++++
 .../gradle.properties                         |  4 ++
 compose-stylesheet/build.gradle.kts           |  1 +
 settings.gradle.kts                           |  1 +
 6 files changed, 67 insertions(+)
 create mode 100644 .idea/artifacts/compose_stylesheet_appbar_desktop.xml
 create mode 100644 component/compose-stylesheet-appbar/build.gradle.kts
 create mode 100644 component/compose-stylesheet-appbar/gradle.properties

diff --git a/.idea/artifacts/compose_stylesheet_appbar_desktop.xml b/.idea/artifacts/compose_stylesheet_appbar_desktop.xml
new file mode 100644
index 0000000..5ac2a18
--- /dev/null
+++ b/.idea/artifacts/compose_stylesheet_appbar_desktop.xml
@@ -0,0 +1,8 @@
+<component name="ArtifactManager">
+  <artifact type="jar" name="compose-stylesheet-appbar-desktop">
+    <output-path>$PROJECT_DIR$/component/compose-stylesheet-appbar/build/libs</output-path>
+    <root id="archive" name="compose-stylesheet-appbar-desktop.jar">
+      <element id="module-output" name="compose-style-sheet.component.compose-stylesheet-appbar.desktopMain" />
+    </root>
+  </artifact>
+</component>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 38a130d..3569d84 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -12,6 +12,7 @@
           <set>
             <option value="$PROJECT_DIR$" />
             <option value="$PROJECT_DIR$/component" />
+            <option value="$PROJECT_DIR$/component/compose-stylesheet-appbar" />
             <option value="$PROJECT_DIR$/component/compose-stylesheet-button" />
             <option value="$PROJECT_DIR$/component/compose-stylesheet-icon" />
             <option value="$PROJECT_DIR$/component/compose-stylesheet-surface" />
diff --git a/component/compose-stylesheet-appbar/build.gradle.kts b/component/compose-stylesheet-appbar/build.gradle.kts
new file mode 100644
index 0000000..a3bc474
--- /dev/null
+++ b/component/compose-stylesheet-appbar/build.gradle.kts
@@ -0,0 +1,52 @@
+plugins {
+    alias(libs.plugins.android.library)
+    alias(libs.plugins.compose.multiplatform)
+    alias(libs.plugins.kotlin.multiplatform)
+    alias(libs.plugins.maven.publish)
+}
+
+kotlin {
+    androidTarget {
+        publishLibraryVariants("release")
+    }
+    jvm("desktop")
+    iosX64("uikitX64")
+    iosArm64("uikitArm64")
+    iosSimulatorArm64("uikitSimArm64")
+    macosX64()
+    macosArm64()
+
+    sourceSets {
+        val commonMain by getting {
+            dependencies {
+                implementation(compose.foundation)
+                implementation(project(":compose-stylesheet-core"))
+            }
+        }
+
+        val commonTest by getting {
+            dependencies {
+                implementation(kotlin("test"))
+            }
+        }
+
+        all {
+            languageSettings.optIn(
+                "com.moriatsushi.compose.stylesheet.component.StyleSheetComponentApi",
+            )
+        }
+    }
+}
+
+android {
+    namespace = "com.moriatsushi.compose.stylesheet.appbar"
+    compileSdk = 34
+    defaultConfig {
+        minSdk = 21
+    }
+
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_17
+        targetCompatibility = JavaVersion.VERSION_17
+    }
+}
diff --git a/component/compose-stylesheet-appbar/gradle.properties b/component/compose-stylesheet-appbar/gradle.properties
new file mode 100644
index 0000000..6471a11
--- /dev/null
+++ b/component/compose-stylesheet-appbar/gradle.properties
@@ -0,0 +1,4 @@
+POM_ARTIFACT_ID=compose-stylesheet-appbar
+POM_NAME=Compose StyleSheet
+POM_DESCRIPTION=A flexible UI component library for Jetpack Compose
+POM_PACKAGING=aar
diff --git a/compose-stylesheet/build.gradle.kts b/compose-stylesheet/build.gradle.kts
index cab83bf..fa80b32 100644
--- a/compose-stylesheet/build.gradle.kts
+++ b/compose-stylesheet/build.gradle.kts
@@ -22,6 +22,7 @@ kotlin {
                 implementation(compose.runtime)
                 api(project(":compose-stylesheet-core"))
                 api(project(":compose-stylesheet-theme"))
+                api(project(":component:compose-stylesheet-appbar"))
                 api(project(":component:compose-stylesheet-button"))
                 api(project(":component:compose-stylesheet-icon"))
                 api(project(":component:compose-stylesheet-surface"))
diff --git a/settings.gradle.kts b/settings.gradle.kts
index 3c1a4ec..71b3970 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -17,6 +17,7 @@ rootProject.name = "compose-style-sheet"
 include(":compose-stylesheet")
 include(":compose-stylesheet-core")
 include(":compose-stylesheet-theme")
+include(":component:compose-stylesheet-appbar")
 include(":component:compose-stylesheet-button")
 include(":component:compose-stylesheet-icon")
 include(":component:compose-stylesheet-surface")

From 111c93a9e072b43a9a5aa76cf6d7224cb39ecfa1 Mon Sep 17 00:00:00 2001
From: Mori-Atsushi <at.sushi.tb@gmail.com>
Date: Fri, 24 Nov 2023 21:20:01 +0900
Subject: [PATCH 2/4] Add TopAppBar

---
 .../compose/stylesheet/appbar/TopAppBar.kt    | 50 +++++++++++++++++++
 .../stylesheet/appbar/TopAppBarStyle.kt       | 40 +++++++++++++++
 .../appbar/TopAppBarStyleBuilder.kt           | 24 +++++++++
 .../component/ComponentStyleBuilder.kt        |  2 +-
 .../compose/stylesheet/sample/SampleScreen.kt | 46 ++++++++++-------
 5 files changed, 142 insertions(+), 20 deletions(-)
 create mode 100644 component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
 create mode 100644 component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyle.kt
 create mode 100644 component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyleBuilder.kt

diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
new file mode 100644
index 0000000..21b752e
--- /dev/null
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
@@ -0,0 +1,50 @@
+package com.moriatsushi.compose.stylesheet.appbar
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.moriatsushi.compose.stylesheet.StyleSheet
+import com.moriatsushi.compose.stylesheet.component.Component
+import com.moriatsushi.compose.stylesheet.component.componentCommonStyle
+import com.moriatsushi.compose.stylesheet.content.ProvideContentStyle
+import com.moriatsushi.compose.stylesheet.tag.TagModifier
+
+@Composable
+fun TopAppBar(
+    title: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    navigationIcon: @Composable () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    tags: TagModifier<TopAppBarStyle> = TagModifier(),
+    topAppBarStyle: TopAppBarStyle = TopAppBarStyle.Default,
+) {
+    val localStyle = StyleSheet.getStyle(topAppBar, tags)
+    val mergedStyle = TopAppBarStyle {
+        this += localStyle
+        this += topAppBarStyle
+    }
+    Row(
+        modifier = modifier.componentCommonStyle(mergedStyle.commonStyle),
+    ) {
+        ProvideContentStyle(mergedStyle.contentStyle) {
+            navigationIcon()
+            title()
+            actions()
+        }
+    }
+}
+
+/**
+ * An object for [TopAppBar].
+ */
+object TopAppBar
+
+/**
+ * A symbol for [TopAppBar].
+ */
+val topAppBar = Component(
+    name = "TopAppBar",
+    defaultStyle = TopAppBarStyle.Default,
+    createBuilder = ::TopAppBarStyleBuilder,
+)
diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyle.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyle.kt
new file mode 100644
index 0000000..39491f9
--- /dev/null
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyle.kt
@@ -0,0 +1,40 @@
+package com.moriatsushi.compose.stylesheet.appbar
+
+import androidx.compose.runtime.Immutable
+import com.moriatsushi.compose.stylesheet.component.ComponentCommonStyle
+import com.moriatsushi.compose.stylesheet.component.ComponentStyle
+import com.moriatsushi.compose.stylesheet.content.ContentStyle
+
+/**
+ * A style for [TopAppBar].
+ */
+@Immutable
+sealed interface TopAppBarStyle : ComponentStyle {
+    val contentStyle: ContentStyle
+
+    companion object {
+        /**
+         * Constant for a default [TopAppBarStyle].
+         */
+        val Default: TopAppBarStyle = TopAppBarStyle()
+    }
+}
+
+/**
+ * Creates a [TopAppBarStyle] using the [builder].
+ */
+fun TopAppBarStyle(builder: TopAppBarStyleBuilder.() -> Unit): TopAppBarStyle =
+    TopAppBarStyleBuilder().apply(builder).build()
+
+internal fun TopAppBarStyle(
+    commonStyle: ComponentCommonStyle = ComponentCommonStyle.Default,
+    contentStyle: ContentStyle = ContentStyle.Default,
+): TopAppBarStyle = TopAppBarStyleImpl(
+    commonStyle = commonStyle,
+    contentStyle = contentStyle,
+)
+
+private data class TopAppBarStyleImpl(
+    override val commonStyle: ComponentCommonStyle,
+    override val contentStyle: ContentStyle,
+) : TopAppBarStyle
diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyleBuilder.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyleBuilder.kt
new file mode 100644
index 0000000..9794067
--- /dev/null
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyleBuilder.kt
@@ -0,0 +1,24 @@
+package com.moriatsushi.compose.stylesheet.appbar
+
+import com.moriatsushi.compose.stylesheet.component.ComponentStyleBuilder
+import com.moriatsushi.compose.stylesheet.content.ContentStyleBuilder
+
+/**
+ * A builder for [TopAppBarStyle].
+ */
+class TopAppBarStyleBuilder internal constructor() : ComponentStyleBuilder<TopAppBarStyle>() {
+    /**
+     * A content style.
+     */
+    val content: ContentStyleBuilder = ContentStyleBuilder()
+
+    override fun plusAssign(other: TopAppBarStyle) {
+        this += other.commonStyle
+        content += other.contentStyle
+    }
+
+    override fun build(): TopAppBarStyle = TopAppBarStyle(
+        commonStyle = buildCommonStyle(),
+        contentStyle = content.build(),
+    )
+}
diff --git a/compose-stylesheet-core/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/component/ComponentStyleBuilder.kt b/compose-stylesheet-core/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/component/ComponentStyleBuilder.kt
index 2db938c..c1dc9eb 100644
--- a/compose-stylesheet-core/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/component/ComponentStyleBuilder.kt
+++ b/compose-stylesheet-core/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/component/ComponentStyleBuilder.kt
@@ -278,7 +278,7 @@ abstract class ComponentStyleBuilder<T : ComponentStyle> : StyleBuilder<T> {
     }
 
     @StyleSheetComponentApi
-    fun buildCommonStyle(): ComponentCommonStyle = ComponentCommonStyle(
+    protected fun buildCommonStyle(): ComponentCommonStyle = ComponentCommonStyle(
         size = _size,
         padding = padding.value,
         background = background.token,
diff --git a/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleScreen.kt b/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleScreen.kt
index f69bc08..5c60172 100644
--- a/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleScreen.kt
+++ b/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleScreen.kt
@@ -11,6 +11,7 @@ import androidx.compose.material.icons.filled.Rocket
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.moriatsushi.compose.stylesheet.appbar.TopAppBar
 import com.moriatsushi.compose.stylesheet.button.Button
 import com.moriatsushi.compose.stylesheet.icon.Icon
 import com.moriatsushi.compose.stylesheet.surface.Surface
@@ -25,27 +26,34 @@ fun SampleScreen(
         tags = Surface.background,
         modifier = modifier.fillMaxSize(),
     ) {
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(16.dp),
-            verticalArrangement = Arrangement.Center,
-        ) {
-            Text(
-                text = "Compose StyleSheet",
-                tags = TextTags.primary,
+        Column(modifier = Modifier.fillMaxSize()) {
+            TopAppBar(
+                title = { Text("Compose StyleSheet") },
             )
-            Spacer(modifier = Modifier.height(8.dp))
-            Text(
-                text = "Let's try to change the theme!",
-                tags = TextTags.secondary,
-            )
-            Spacer(modifier = Modifier.height(32.dp))
-            Button(
-                onClick = {},
-                icon = { Icon(Icons.Default.Rocket, null) },
+            Column(
+                modifier = Modifier
+                    .weight(1F)
+                    .padding(16.dp),
+                verticalArrangement = Arrangement.Center,
             ) {
-                Text(text = "Start!")
+                Text(
+                    text = "Compose StyleSheet is a flexible UI component framework " +
+                        "for Jetpack Compose",
+                    tags = TextTags.primary,
+                )
+                Spacer(modifier = Modifier.height(8.dp))
+                Text(
+                    text = "This library is still under development. " +
+                        "All APIs may change in the future.",
+                    tags = TextTags.secondary,
+                )
+                Spacer(modifier = Modifier.height(32.dp))
+                Button(
+                    onClick = {},
+                    icon = { Icon(Icons.Default.Rocket, null) },
+                ) {
+                    Text(text = "Start!")
+                }
             }
         }
     }

From daacc9cc904726052e3d0c09862251bc2daeb53f Mon Sep 17 00:00:00 2001
From: Mori-Atsushi <at.sushi.tb@gmail.com>
Date: Fri, 24 Nov 2023 21:47:03 +0900
Subject: [PATCH 3/4] Add TopAppBarLayout

---
 .../compose/stylesheet/appbar/TopAppBar.kt    | 51 +++++++++++++++++--
 .../stylesheet/appbar/TopAppBarLayout.kt      | 44 ++++++++++++++++
 .../appbar/TopAppBarLayoutBuilder.kt          | 36 +++++++++++++
 .../stylesheet/appbar/TopAppBarStyle.kt       |  4 ++
 .../appbar/TopAppBarStyleBuilder.kt           |  7 +++
 compose-stylesheet-theme/build.gradle.kts     |  1 +
 .../stylesheet/theme/ThemeStyleSheet.kt       |  2 +
 .../theme/appbar/TopAppBarStyleSheet.kt       | 29 +++++++++++
 .../compose/stylesheet/sample/SampleScreen.kt |  7 +++
 9 files changed, 176 insertions(+), 5 deletions(-)
 create mode 100644 component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarLayout.kt
 create mode 100644 component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarLayoutBuilder.kt
 create mode 100644 compose-stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/appbar/TopAppBarStyleSheet.kt

diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
index 21b752e..1dd718f 100644
--- a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
@@ -2,20 +2,27 @@ package com.moriatsushi.compose.stylesheet.appbar
 
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.isSpecified
 import com.moriatsushi.compose.stylesheet.StyleSheet
 import com.moriatsushi.compose.stylesheet.component.Component
 import com.moriatsushi.compose.stylesheet.component.componentCommonStyle
 import com.moriatsushi.compose.stylesheet.content.ProvideContentStyle
 import com.moriatsushi.compose.stylesheet.tag.TagModifier
+import com.moriatsushi.compose.stylesheet.token.value
 
 @Composable
 fun TopAppBar(
     title: @Composable () -> Unit,
     modifier: Modifier = Modifier,
-    navigationIcon: @Composable () -> Unit = {},
-    actions: @Composable RowScope.() -> Unit = {},
+    navigationIcon: (@Composable () -> Unit)? = null,
+    actions: (@Composable RowScope.() -> Unit)? = null,
     tags: TagModifier<TopAppBarStyle> = TagModifier(),
     topAppBarStyle: TopAppBarStyle = TopAppBarStyle.Default,
 ) {
@@ -26,15 +33,49 @@ fun TopAppBar(
     }
     Row(
         modifier = modifier.componentCommonStyle(mergedStyle.commonStyle),
+        verticalAlignment = Alignment.CenterVertically,
     ) {
         ProvideContentStyle(mergedStyle.contentStyle) {
-            navigationIcon()
-            title()
-            actions()
+            if (navigationIcon != null) {
+                HorizontalSpacer(
+                    width = mergedStyle.layout.spaceBetweenNavigationIconAndContainer?.value,
+                )
+                navigationIcon()
+                HorizontalSpacer(
+                    width = mergedStyle.layout.spaceBetweenNavigationIconAndTitle?.value,
+                )
+            } else {
+                HorizontalSpacer(
+                    width = mergedStyle.layout.spaceBetweenTitleAndContainer?.value,
+                )
+            }
+            Row(modifier = Modifier.weight(1F)) {
+                title()
+            }
+            if (actions != null) {
+                HorizontalSpacer(
+                    width = mergedStyle.layout.spaceBetweenActionsAndContent?.value,
+                )
+                actions()
+                HorizontalSpacer(
+                    width = mergedStyle.layout.spaceBetweenActionsAndContainer?.value,
+                )
+            } else {
+                HorizontalSpacer(
+                    width = mergedStyle.layout.spaceBetweenTitleAndContainer?.value,
+                )
+            }
         }
     }
 }
 
+@Composable
+private fun HorizontalSpacer(width: Dp?) {
+    if (width != null && width.isSpecified && width > 0.dp) {
+        Spacer(modifier = Modifier.width(width))
+    }
+}
+
 /**
  * An object for [TopAppBar].
  */
diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarLayout.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarLayout.kt
new file mode 100644
index 0000000..2baeeea
--- /dev/null
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarLayout.kt
@@ -0,0 +1,44 @@
+package com.moriatsushi.compose.stylesheet.appbar
+
+import androidx.compose.ui.unit.Dp
+import com.moriatsushi.compose.stylesheet.token.Token
+
+/**
+ * A layout properties for [TopAppBar].
+ */
+sealed interface TopAppBarLayout {
+    val spaceBetweenNavigationIconAndContainer: Token<Dp>?
+    val spaceBetweenNavigationIconAndTitle: Token<Dp>?
+    val spaceBetweenTitleAndContainer: Token<Dp>?
+    val spaceBetweenActionsAndContent: Token<Dp>?
+    val spaceBetweenActionsAndContainer: Token<Dp>?
+
+    companion object {
+        /**
+         * Constant for a default [TopAppBarLayout].
+         */
+        val Default: TopAppBarLayout = TopAppBarLayout()
+    }
+}
+
+internal fun TopAppBarLayout(
+    spaceBetweenNavigationIconAndContainer: Token<Dp>? = null,
+    spaceBetweenNavigationIconAndTitle: Token<Dp>? = null,
+    spaceBetweenTitleAndContainer: Token<Dp>? = null,
+    spaceBetweenActionsAndContent: Token<Dp>? = null,
+    spaceBetweenActionsAndContainer: Token<Dp>? = null,
+): TopAppBarLayout = TopAppBarLayoutImpl(
+    spaceBetweenNavigationIconAndContainer = spaceBetweenNavigationIconAndContainer,
+    spaceBetweenNavigationIconAndTitle = spaceBetweenNavigationIconAndTitle,
+    spaceBetweenTitleAndContainer = spaceBetweenTitleAndContainer,
+    spaceBetweenActionsAndContent = spaceBetweenActionsAndContent,
+    spaceBetweenActionsAndContainer = spaceBetweenActionsAndContainer,
+)
+
+private data class TopAppBarLayoutImpl(
+    override val spaceBetweenNavigationIconAndContainer: Token<Dp>?,
+    override val spaceBetweenNavigationIconAndTitle: Token<Dp>?,
+    override val spaceBetweenTitleAndContainer: Token<Dp>?,
+    override val spaceBetweenActionsAndContent: Token<Dp>?,
+    override val spaceBetweenActionsAndContainer: Token<Dp>?,
+) : TopAppBarLayout
diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarLayoutBuilder.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarLayoutBuilder.kt
new file mode 100644
index 0000000..fe38bc3
--- /dev/null
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarLayoutBuilder.kt
@@ -0,0 +1,36 @@
+package com.moriatsushi.compose.stylesheet.appbar
+
+import androidx.compose.ui.unit.Dp
+import com.moriatsushi.compose.stylesheet.StyleBuilder
+import com.moriatsushi.compose.stylesheet.token.TokenSetter
+
+/**
+ * A builder for [TopAppBarLayout].
+ */
+class TopAppBarLayoutBuilder internal constructor() : StyleBuilder<TopAppBarLayout> {
+    val spaceBetweenNavigationIconAndContainer: TokenSetter<Dp> = TokenSetter()
+    val spaceBetweenNavigationIconAndTitle: TokenSetter<Dp> = TokenSetter()
+    val spaceBetweenTitleAndContainer: TokenSetter<Dp> = TokenSetter()
+    val spaceBetweenActionsAndContent: TokenSetter<Dp> = TokenSetter()
+    val spaceBetweenActionsAndContainer: TokenSetter<Dp> = TokenSetter()
+
+    override fun plusAssign(other: TopAppBarLayout) {
+        spaceBetweenNavigationIconAndContainer += other.spaceBetweenNavigationIconAndContainer
+        spaceBetweenNavigationIconAndTitle += other.spaceBetweenNavigationIconAndTitle
+        spaceBetweenTitleAndContainer += other.spaceBetweenTitleAndContainer
+        spaceBetweenActionsAndContent += other.spaceBetweenActionsAndContent
+        spaceBetweenActionsAndContainer += other.spaceBetweenActionsAndContainer
+    }
+
+    operator fun invoke(builder: TopAppBarLayoutBuilder.() -> Unit) {
+        builder()
+    }
+
+    override fun build(): TopAppBarLayout = TopAppBarLayout(
+        spaceBetweenNavigationIconAndContainer = spaceBetweenNavigationIconAndContainer.token,
+        spaceBetweenNavigationIconAndTitle = spaceBetweenNavigationIconAndTitle.token,
+        spaceBetweenTitleAndContainer = spaceBetweenTitleAndContainer.token,
+        spaceBetweenActionsAndContent = spaceBetweenActionsAndContent.token,
+        spaceBetweenActionsAndContainer = spaceBetweenActionsAndContainer.token,
+    )
+}
diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyle.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyle.kt
index 39491f9..2a37ccd 100644
--- a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyle.kt
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyle.kt
@@ -10,6 +10,7 @@ import com.moriatsushi.compose.stylesheet.content.ContentStyle
  */
 @Immutable
 sealed interface TopAppBarStyle : ComponentStyle {
+    val layout: TopAppBarLayout
     val contentStyle: ContentStyle
 
     companion object {
@@ -27,14 +28,17 @@ fun TopAppBarStyle(builder: TopAppBarStyleBuilder.() -> Unit): TopAppBarStyle =
     TopAppBarStyleBuilder().apply(builder).build()
 
 internal fun TopAppBarStyle(
+    layout: TopAppBarLayout = TopAppBarLayout.Default,
     commonStyle: ComponentCommonStyle = ComponentCommonStyle.Default,
     contentStyle: ContentStyle = ContentStyle.Default,
 ): TopAppBarStyle = TopAppBarStyleImpl(
+    layout = layout,
     commonStyle = commonStyle,
     contentStyle = contentStyle,
 )
 
 private data class TopAppBarStyleImpl(
+    override val layout: TopAppBarLayout,
     override val commonStyle: ComponentCommonStyle,
     override val contentStyle: ContentStyle,
 ) : TopAppBarStyle
diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyleBuilder.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyleBuilder.kt
index 9794067..d093672 100644
--- a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyleBuilder.kt
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBarStyleBuilder.kt
@@ -7,17 +7,24 @@ import com.moriatsushi.compose.stylesheet.content.ContentStyleBuilder
  * A builder for [TopAppBarStyle].
  */
 class TopAppBarStyleBuilder internal constructor() : ComponentStyleBuilder<TopAppBarStyle>() {
+    /**
+     * A layout of the top app bar.
+     */
+    val layout: TopAppBarLayoutBuilder = TopAppBarLayoutBuilder()
+
     /**
      * A content style.
      */
     val content: ContentStyleBuilder = ContentStyleBuilder()
 
     override fun plusAssign(other: TopAppBarStyle) {
+        layout += other.layout
         this += other.commonStyle
         content += other.contentStyle
     }
 
     override fun build(): TopAppBarStyle = TopAppBarStyle(
+        layout = layout.build(),
         commonStyle = buildCommonStyle(),
         contentStyle = content.build(),
     )
diff --git a/compose-stylesheet-theme/build.gradle.kts b/compose-stylesheet-theme/build.gradle.kts
index 7091aff..2553057 100644
--- a/compose-stylesheet-theme/build.gradle.kts
+++ b/compose-stylesheet-theme/build.gradle.kts
@@ -21,6 +21,7 @@ kotlin {
             dependencies {
                 implementation(compose.foundation)
                 implementation(project(":compose-stylesheet-core"))
+                api(project(":component:compose-stylesheet-appbar"))
                 api(project(":component:compose-stylesheet-button"))
                 api(project(":component:compose-stylesheet-text"))
                 api(project(":component:compose-stylesheet-surface"))
diff --git a/compose-stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/ThemeStyleSheet.kt b/compose-stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/ThemeStyleSheet.kt
index 9b6200c..6704dd3 100644
--- a/compose-stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/ThemeStyleSheet.kt
+++ b/compose-stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/ThemeStyleSheet.kt
@@ -4,6 +4,7 @@ import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import com.moriatsushi.compose.stylesheet.StyleSheet
+import com.moriatsushi.compose.stylesheet.theme.appbar.topAppBarStyleSheet
 import com.moriatsushi.compose.stylesheet.theme.button.buttonStyleSheet
 import com.moriatsushi.compose.stylesheet.theme.button.iconButtonStyleSheet
 import com.moriatsushi.compose.stylesheet.theme.surface.surfaceStyleSheet
@@ -40,6 +41,7 @@ fun themeStyleSheet(
             color += Colors.semantic.onBackground
         }
 
+        this += topAppBarStyleSheet
         this += buttonStyleSheet
         this += iconButtonStyleSheet
         this += surfaceStyleSheet
diff --git a/compose-stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/appbar/TopAppBarStyleSheet.kt b/compose-stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/appbar/TopAppBarStyleSheet.kt
new file mode 100644
index 0000000..a7626cd
--- /dev/null
+++ b/compose-stylesheet-theme/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/theme/appbar/TopAppBarStyleSheet.kt
@@ -0,0 +1,29 @@
+package com.moriatsushi.compose.stylesheet.theme.appbar
+
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.moriatsushi.compose.stylesheet.StyleSheet
+import com.moriatsushi.compose.stylesheet.appbar.topAppBar
+import com.moriatsushi.compose.stylesheet.theme.Colors
+
+val topAppBarStyleSheet = StyleSheet {
+    topAppBar {
+        width += fill
+        minHeight += 64.dp
+        padding += padding(vertical = 2.dp)
+        background += Colors.semantic.background
+
+        layout {
+            spaceBetweenTitleAndContainer += 16.dp
+            spaceBetweenNavigationIconAndContainer += 8.dp
+            spaceBetweenNavigationIconAndTitle += 8.dp
+            spaceBetweenActionsAndContent += 8.dp
+            spaceBetweenActionsAndContainer += 8.dp
+        }
+
+        content {
+            fontSize += 20.sp
+            color += Colors.semantic.onBackground
+        }
+    }
+}
diff --git a/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleScreen.kt b/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleScreen.kt
index 5c60172..9f776fe 100644
--- a/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleScreen.kt
+++ b/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleScreen.kt
@@ -8,11 +8,13 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Rocket
+import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.moriatsushi.compose.stylesheet.appbar.TopAppBar
 import com.moriatsushi.compose.stylesheet.button.Button
+import com.moriatsushi.compose.stylesheet.button.IconButton
 import com.moriatsushi.compose.stylesheet.icon.Icon
 import com.moriatsushi.compose.stylesheet.surface.Surface
 import com.moriatsushi.compose.stylesheet.text.Text
@@ -29,6 +31,11 @@ fun SampleScreen(
         Column(modifier = Modifier.fillMaxSize()) {
             TopAppBar(
                 title = { Text("Compose StyleSheet") },
+                actions = {
+                    IconButton(onClick = {}) {
+                        Icon(Icons.Outlined.Settings, null)
+                    }
+                },
             )
             Column(
                 modifier = Modifier

From 85c773f2db4166b401624ae306c31ba929b8b429 Mon Sep 17 00:00:00 2001
From: Mori-Atsushi <at.sushi.tb@gmail.com>
Date: Fri, 24 Nov 2023 21:54:58 +0900
Subject: [PATCH 4/4] Support window insets

---
 .../compose/stylesheet/appbar/TopAppBar.kt       | 16 +++++++++++++++-
 .../android/src/androidMain/AndroidManifest.xml  |  3 ++-
 .../compose/stylesheet/sample/SampleActivity.kt  |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
index 1dd718f..46cec0e 100644
--- a/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
+++ b/component/compose-stylesheet-appbar/src/commonMain/kotlin/com/moriatsushi/compose/stylesheet/appbar/TopAppBar.kt
@@ -3,6 +3,12 @@ package com.moriatsushi.compose.stylesheet.appbar
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -25,6 +31,7 @@ fun TopAppBar(
     actions: (@Composable RowScope.() -> Unit)? = null,
     tags: TagModifier<TopAppBarStyle> = TagModifier(),
     topAppBarStyle: TopAppBarStyle = TopAppBarStyle.Default,
+    windowInsets: WindowInsets = topAppBarWindowInsets,
 ) {
     val localStyle = StyleSheet.getStyle(topAppBar, tags)
     val mergedStyle = TopAppBarStyle {
@@ -32,7 +39,9 @@ fun TopAppBar(
         this += topAppBarStyle
     }
     Row(
-        modifier = modifier.componentCommonStyle(mergedStyle.commonStyle),
+        modifier = modifier
+            .componentCommonStyle(mergedStyle.commonStyle)
+            .padding(windowInsets.asPaddingValues()),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         ProvideContentStyle(mergedStyle.contentStyle) {
@@ -76,6 +85,11 @@ private fun HorizontalSpacer(width: Dp?) {
     }
 }
 
+private val topAppBarWindowInsets: WindowInsets
+    @Composable
+    get() = WindowInsets.systemBars
+        .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top)
+
 /**
  * An object for [TopAppBar].
  */
diff --git a/sample/android/src/androidMain/AndroidManifest.xml b/sample/android/src/androidMain/AndroidManifest.xml
index b79e0b6..9359d27 100644
--- a/sample/android/src/androidMain/AndroidManifest.xml
+++ b/sample/android/src/androidMain/AndroidManifest.xml
@@ -10,7 +10,8 @@
         <activity
             android:name=".SampleActivity"
             android:configChanges="orientation|screenSize|screenLayout|keyboardHidden|mnc|colorMode|density|fontScale|fontWeightAdjustment|keyboard|layoutDirection|locale|mcc|navigation|smallestScreenSize|touchscreen|uiMode"
-            android:exported="true">
+            android:exported="true"
+            android:windowSoftInputMode="adjustResize">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 
diff --git a/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleActivity.kt b/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleActivity.kt
index 7169cdc..afa6e2b 100644
--- a/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleActivity.kt
+++ b/sample/android/src/androidMain/kotlin/com/moriatsushi/compose/stylesheet/sample/SampleActivity.kt
@@ -3,10 +3,12 @@ package com.moriatsushi.compose.stylesheet.sample
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import com.moriatsushi.compose.stylesheet.ProvideStyleSheet
 
 class SampleActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
+        enableEdgeToEdge()
         super.onCreate(savedInstanceState)
 
         setContent {