Updated on 2026-08-14

core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBar.kt

@@ -1,55 +0,0 @@
-package com.tangem.core.ui.components.appbar
-
-import android.content.res.Configuration
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
-import com.tangem.core.ui.extensions.TextReference
-import com.tangem.core.ui.extensions.resolveReference
-import com.tangem.core.ui.extensions.stringReference
-import com.tangem.core.ui.res.TangemTheme
-import com.tangem.core.ui.res.TangemThemePreview
-
-/**
- * App bar without buttons
- *
- * @param text        title
- * @param modifier    modifier
- *
- * @see <a href = "https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=123%3A287&t=WdN5XpixzZLlQAZO-4"
- * >Figma component</a>
- */
-@Composable
-fun AppBar(text: TextReference, modifier: Modifier = Modifier) {
-    Box(modifier = modifier.fillMaxWidth()) {
-        Text(
-            text = text.resolveReference(),
-            color = TangemTheme.colors.text.primary1,
-            maxLines = 1,
-            style = TangemTheme.typography.subtitle1,
-            modifier = Modifier
-                .align(Alignment.Center)
-                .padding(vertical = TangemTheme.dimens.spacing10),
-        )
-    }
-}
-
-// region Preview
-@Preview(showBackground = true, widthDp = 360)
-@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun AppBar_Preview() {
-    TangemThemePreview {
-        AppBar(
-            text = stringReference("Tangem"),
-            modifier = Modifier.background(TangemTheme.colors.background.primary),
-        )
-    }
-}
-// endregion

core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithAdditionalButtons.kt

@@ -1,179 +0,0 @@
-package com.tangem.core.ui.components.appbar
-
-import android.content.res.Configuration
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.tooling.preview.Preview
-import com.tangem.core.ui.R
-import com.tangem.core.ui.components.appbar.models.AdditionalButton
-import com.tangem.core.ui.extensions.TextReference
-import com.tangem.core.ui.extensions.resolveReference
-import com.tangem.core.ui.res.TangemTheme
-import com.tangem.core.ui.res.TangemThemePreview
-
-/**
- * App bar with title and two additional buttons
- *
- * @param startButton button information attached to the left edge
- * @param endButton   button information attached to the right edge
- *
- * @see <a href = "https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=50%3A403&t=tRQ4KlzkjV7TCLZl-4">
- * Figma Component</a>
- */
-@Composable
-fun AppBarWithAdditionalButtons(
-    text: TextReference,
-    modifier: Modifier = Modifier,
-    startButton: AdditionalButton? = null,
-    endButton: AdditionalButton? = null,
-    textColor: Color = TangemTheme.colors.text.primary1,
-    iconColor: Color = TangemTheme.colors.icon.primary1,
-) {
-    AppBarWithAdditionalButtons(
-        text = text.resolveReference(),
-        startButton = startButton,
-        endButton = endButton,
-        modifier = modifier,
-        textColor = textColor,
-        iconColor = iconColor,
-    )
-}
-
-/**
- * App bar with title and two additional buttons
- *
- * @param startButton button information attached to the left edge
- * @param endButton   button information attached to the right edge
- *
- * @see <a href = "https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?node-id=50%3A403&t=tRQ4KlzkjV7TCLZl-4">
- * Figma Component</a>
- */
-@Composable
-fun AppBarWithAdditionalButtons(
-    text: String,
-    modifier: Modifier = Modifier,
-    startButton: AdditionalButton? = null,
-    endButton: AdditionalButton? = null,
-    textColor: Color = TangemTheme.colors.text.primary1,
-    iconColor: Color = TangemTheme.colors.icon.primary1,
-) {
-    Box(
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(all = TangemTheme.dimens.spacing16),
-    ) {
-        if (startButton != null) {
-            Icon(
-                painter = painterResource(id = startButton.iconRes),
-                contentDescription = null,
-                tint = iconColor,
-                modifier = Modifier
-                    .size(TangemTheme.dimens.size24)
-                    .align(Alignment.CenterStart)
-                    .clickable(
-                        onClick = startButton.onIconClicked,
-                        role = Role.Button,
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = androidx.compose.material.ripple.rememberRipple(
-                            bounded = false,
-                            radius = TangemTheme.dimens.size24 / 2,
-                        ),
-                    ),
-            )
-        }
-
-        Text(
-            text = text,
-            modifier = Modifier.align(Alignment.Center),
-            color = textColor,
-            maxLines = 1,
-            style = TangemTheme.typography.subtitle1,
-        )
-
-        if (endButton != null) {
-            Icon(
-                painter = painterResource(id = endButton.iconRes),
-                contentDescription = null,
-                tint = iconColor,
-                modifier = Modifier
-                    .size(TangemTheme.dimens.size24)
-                    .align(Alignment.CenterEnd)
-                    .clickable(
-                        onClick = endButton.onIconClicked,
-                        role = Role.Button,
-                        interactionSource = remember { MutableInteractionSource() },
-                        indication = androidx.compose.material.ripple.rememberRipple(
-                            bounded = false,
-                            radius = TangemTheme.dimens.size24 / 2,
-                        ),
-                    ),
-            )
-        }
-    }
-}
-
-@Preview(widthDp = 360, heightDp = 56, showBackground = true)
-@Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun Preview_AppBarWithAdditionalButtons() {
-    TangemThemePreview {
-        AppBarWithAdditionalButtons(
-            text = "Tangem",
-            startButton = AdditionalButton(
-                iconRes = R.drawable.ic_scan_24,
-                onIconClicked = {},
-            ),
-            endButton = AdditionalButton(
-                iconRes = R.drawable.ic_more_vertical_24,
-                onIconClicked = {},
-            ),
-            modifier = Modifier.background(TangemTheme.colors.background.secondary),
-        )
-    }
-}
-
-@Preview(widthDp = 360, heightDp = 56, showBackground = true)
-@Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun Preview_AppBarWithOnlyStartButtons() {
-    TangemThemePreview {
-        AppBarWithAdditionalButtons(
-            text = "Tangem",
-            startButton = AdditionalButton(
-                iconRes = R.drawable.ic_scan_24,
-                onIconClicked = {},
-            ),
-            modifier = Modifier.background(TangemTheme.colors.background.secondary),
-        )
-    }
-}
-
-@Preview(widthDp = 360, heightDp = 56, showBackground = true)
-@Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun Preview_AppBarWithOnlyEndButtons() {
-    TangemThemePreview {
-        AppBarWithAdditionalButtons(
-            text = "Tangem",
-            endButton = AdditionalButton(
-                iconRes = R.drawable.ic_more_vertical_24,
-                onIconClicked = {},
-            ),
-            modifier = Modifier.background(TangemTheme.colors.background.secondary),
-        )
-    }
-}

core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButton.kt

@@ -2,22 +2,12 @@ package com.tangem.core.ui.components.appbar
 
 import android.content.res.Configuration
 import androidx.annotation.DrawableRes
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.Icon
-import androidx.compose.material.Text
-import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.tangem.core.ui.R
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
 import com.tangem.core.ui.res.TangemThemePreview
-import com.tangem.core.ui.res.TangemTheme
 
 /**
  * App bar with back button and optional title
@@ -37,37 +27,17 @@ fun AppBarWithBackButton(
     text: String? = null,
     @DrawableRes iconRes: Int? = null,
 ) {
-    Row(
-        modifier = modifier
-            .background(color = TangemTheme.colors.background.secondary)
-            .fillMaxWidth()
-            .padding(all = TangemTheme.dimens.spacing16),
-        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Icon(
-            painter = painterResource(iconRes ?: R.drawable.ic_back_24),
-            contentDescription = null,
-            modifier = Modifier
-                .size(size = TangemTheme.dimens.size24)
-                .clickable(
-                    indication = rememberRipple(bounded = false),
-                    interactionSource = remember { MutableInteractionSource() },
-                    onClick = onBackClick,
-                ),
-            tint = TangemTheme.colors.icon.primary1,
-        )
-        if (!text.isNullOrBlank()) {
-            Text(
-                text = text,
-                color = TangemTheme.colors.text.primary1,
-                maxLines = 1,
-                style = TangemTheme.typography.subtitle1,
-            )
-        }
-    }
+    TangemTopAppBar(
+        modifier = modifier,
+        title = text,
+        startButton = TopAppBarButtonUM(
+            iconRes = iconRes ?: R.drawable.ic_back_24,
+            onIconClicked = onBackClick,
+        ),
+    )
 }
 
+// region Preview
 @Preview(widthDp = 360, heightDp = 56, showBackground = true)
 @Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
@@ -75,4 +45,5 @@ private fun PreviewAppBarWithBackButton() {
     TangemThemePreview {
         AppBarWithBackButton(text = "Title", onBackClick = {})
     }
-}
+}
+// endregion

core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIcon.kt

@@ -2,18 +2,14 @@ package com.tangem.core.ui.components.appbar
 
 import android.content.res.Configuration
 import androidx.annotation.DrawableRes
-import androidx.compose.animation.*
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.size
-import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.tangem.core.ui.R
-import com.tangem.core.ui.res.TangemThemePreview
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
 
 @Composable
 fun AppBarWithBackButtonAndIcon(
@@ -26,30 +22,22 @@ fun AppBarWithBackButtonAndIcon(
     onIconClick: (() -> Unit)? = null,
     backgroundColor: Color = TangemTheme.colors.background.secondary,
 ) {
-    AppBarWithBackButtonAndIconContent(
-        onBackClick = onBackClick,
+    TangemTopAppBar(
         modifier = modifier,
-        text = text,
+        title = text,
         subtitle = subtitle,
-        backIconRes = backIconRes,
-        backgroundColor = backgroundColor,
-        iconContent = {
-            AnimatedContent(
-                targetState = iconRes,
-                transitionSpec = { (fadeIn() + scaleIn()).togetherWith(fadeOut() + scaleOut()) },
-                label = "Toolbar icon change",
-            ) {
-                if (onIconClick != null && it != null) {
-                    Icon(
-                        painter = painterResource(it),
-                        contentDescription = null,
-                        modifier = Modifier
-                            .size(size = TangemTheme.dimens.size24)
-                            .clickable { onIconClick() },
-                        tint = TangemTheme.colors.icon.primary1,
-                    )
-                }
-            }
+        containerColor = backgroundColor,
+        startButton = TopAppBarButtonUM(
+            iconRes = backIconRes ?: R.drawable.ic_back_24,
+            onIconClicked = onBackClick,
+        ),
+        endButton = if (iconRes != null && onIconClick != null) {
+            TopAppBarButtonUM(
+                iconRes = iconRes,
+                onIconClicked = onIconClick,
+            )
+        } else {
+            null
         },
     )
 }

core/ui/src/main/java/com/tangem/core/ui/components/appbar/AppBarWithBackButtonAndIconContent.kt

@@ -1,127 +0,0 @@
-package com.tangem.core.ui.components.appbar
-
-import android.content.res.Configuration
-import androidx.annotation.DrawableRes
-import androidx.compose.animation.*
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.Icon
-import androidx.compose.material.Text
-import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
-import com.tangem.core.ui.R
-import com.tangem.core.ui.res.TangemThemePreview
-import com.tangem.core.ui.res.TangemTheme
-
-/**
- * App bar with back button and icon content for any possible number/style of icons
- *
- * @param onBackClick callback for back button
- * @param modifier modifier
- * @param text appbar title
- * @param backIconRes icon for back button
- * @param backgroundColor background color
- * @param iconContent icon content
- */
-@Composable
-fun AppBarWithBackButtonAndIconContent(
-    onBackClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    text: String? = null,
-    subtitle: String? = null,
-    @DrawableRes backIconRes: Int? = null,
-    backIconTint: Color = TangemTheme.colors.icon.primary1,
-    backgroundColor: Color = TangemTheme.colors.background.secondary,
-    iconContent: @Composable () -> Unit,
-) {
-    Row(
-        modifier = modifier
-            .height(TangemTheme.dimens.size56)
-            .background(color = backgroundColor)
-            .fillMaxWidth()
-            .padding(horizontal = TangemTheme.dimens.spacing16),
-        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Icon(
-            painter = painterResource(backIconRes ?: R.drawable.ic_back_24),
-            contentDescription = null,
-            modifier = Modifier
-                .padding(vertical = TangemTheme.dimens.spacing16)
-                .size(size = TangemTheme.dimens.size24)
-                .clickable(
-                    interactionSource = remember { MutableInteractionSource() },
-                    indication = rememberRipple(bounded = false),
-                ) { onBackClick() },
-            tint = backIconTint,
-        )
-        Column(
-            verticalArrangement = Arrangement.Center,
-            modifier = Modifier.weight(1f)
-                .animateContentSize(),
-        ) {
-            AnimatedVisibility(
-                visible = !text.isNullOrBlank(),
-                enter = fadeIn(),
-                exit = fadeOut(),
-                label = "Toolbar title change",
-            ) {
-                Text(
-                    text = text.orEmpty(),
-                    color = TangemTheme.colors.text.primary1,
-                    maxLines = 1,
-                    style = TangemTheme.typography.subtitle1,
-                )
-            }
-            AnimatedVisibility(
-                visible = !subtitle.isNullOrBlank(),
-                enter = fadeIn().plus(expandVertically()),
-                exit = fadeOut().plus(shrinkVertically()),
-                label = "Toolbar subtitle change",
-            ) {
-                Text(
-                    text = subtitle.orEmpty(),
-                    color = TangemTheme.colors.text.secondary,
-                    maxLines = 1,
-                    style = TangemTheme.typography.caption2,
-                )
-            }
-        }
-        iconContent()
-    }
-}
-
-@Preview(widthDp = 360, heightDp = 56, showBackground = true)
-@Preview(widthDp = 360, heightDp = 56, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun PreviewAppBarWithBackButtonAndIcon() {
-    TangemThemePreview {
-        AppBarWithBackButtonAndIconContent(
-            text = "Title",
-            subtitle = "Subtitle",
-            onBackClick = {},
-            iconContent = {
-                Row {
-                    Icon(
-                        painter = painterResource(id = R.drawable.ic_qrcode_scan_24),
-                        tint = TangemTheme.colors.icon.primary1,
-                        contentDescription = null,
-                    )
-                    Icon(
-                        painter = painterResource(id = R.drawable.ic_flash_on_24),
-                        tint = TangemTheme.colors.icon.primary1,
-                        contentDescription = null,
-                    )
-                }
-            },
-        )
-    }
-}

core/ui/src/main/java/com/tangem/core/ui/components/appbar/TangemTopAppBar.kt

@@ -0,0 +1,336 @@
+package com.tangem.core.ui.components.appbar
+
+import android.content.res.Configuration
+import androidx.compose.animation.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import com.tangem.core.ui.R
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
+import com.tangem.core.ui.extensions.TextReference
+import com.tangem.core.ui.extensions.resolveReference
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
+
+/**
+ * [TangemTopAppBar] height options.
+ * */
+enum class TangemTopAppBarHeight {
+    BOTTOM_SHEET, DEFAULT,
+}
+
+/**
+ * Top app bar with two optional buttons: [startButton] and [endButton].
+ *
+ * @see <a href = "https://www.figma.com/design/14ISV23YB1yVW1uNVwqrKv/Android?node-id=122-47&m=dev">
+ * Figma Component</a>
+ */
+@Composable
+fun TangemTopAppBar(
+    modifier: Modifier = Modifier,
+    startButton: TopAppBarButtonUM? = null,
+    endButton: TopAppBarButtonUM? = null,
+    textColor: Color = TangemTheme.colors.text.primary1,
+    iconTint: Color = TangemTheme.colors.icon.primary1,
+    containerColor: Color = Color.Transparent,
+    height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT,
+) {
+    TangemTopAppBar(
+        modifier = modifier,
+        title = null,
+        startButton = startButton,
+        endButton = endButton,
+        textColor = textColor,
+        iconTint = iconTint,
+        containerColor = containerColor,
+        height = height,
+    )
+}
+
+/**
+ * Top app bar with [title], optional [subtitle] and two optional buttons: [startButton] and [endButton].
+ *
+ * Where [title] and [subtitle] are [TextReference].
+ *
+ * @see <a href = "https://www.figma.com/design/14ISV23YB1yVW1uNVwqrKv/Android?node-id=122-47&m=dev">
+ * Figma Component</a>
+ */
+@Composable
+fun TangemTopAppBar(
+    title: TextReference,
+    modifier: Modifier = Modifier,
+    subtitle: TextReference? = null,
+    startButton: TopAppBarButtonUM? = null,
+    endButton: TopAppBarButtonUM? = null,
+    textColor: Color = TangemTheme.colors.text.primary1,
+    iconTint: Color = TangemTheme.colors.icon.primary1,
+    titleAlignment: Alignment.Horizontal = Alignment.Start,
+    containerColor: Color = Color.Transparent,
+    height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT,
+) {
+    TangemTopAppBar(
+        modifier = modifier,
+        title = title.resolveReference(),
+        subtitle = subtitle?.resolveReference(),
+        startButton = startButton,
+        endButton = endButton,
+        textColor = textColor,
+        iconTint = iconTint,
+        titleAlignment = titleAlignment,
+        containerColor = containerColor,
+        height = height,
+    )
+}
+
+/**
+ * Top app bar with [title], optional [subtitle] and two optional buttons: [startButton] and [endButton].
+ *
+ * Where [title] and [subtitle] are [String].
+ *
+ * @see <a href = "https://www.figma.com/design/14ISV23YB1yVW1uNVwqrKv/Android?node-id=122-47&m=dev">
+ * Figma Component</a>
+ */
+@Composable
+fun TangemTopAppBar(
+    title: String?,
+    modifier: Modifier = Modifier,
+    subtitle: String? = null,
+    startButton: TopAppBarButtonUM? = null,
+    endButton: TopAppBarButtonUM? = null,
+    textColor: Color = TangemTheme.colors.text.primary1,
+    iconTint: Color = TangemTheme.colors.icon.primary1,
+    titleAlignment: Alignment.Horizontal = Alignment.Start,
+    containerColor: Color = Color.Transparent,
+    height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT,
+) {
+    TangemTopAppBar(
+        title = title,
+        modifier = modifier,
+        subtitle = subtitle,
+        startButton = startButton,
+        textColor = textColor,
+        iconTint = iconTint,
+        titleAlignment = titleAlignment,
+        containerColor = containerColor,
+        height = height,
+        endContent = {
+            if (endButton != null) {
+                TopAppBarButton(
+                    button = endButton,
+                    tint = iconTint,
+                )
+            }
+        },
+    )
+}
+
+/**
+ * Top app bar with [title], optional [subtitle], optional [startButton] and [endContent].
+ *
+ * Where [title] and [subtitle] are [String] and [endContent] is a lambda that provides a [RowScope] to build
+ * the end content.
+ *
+ * @see <a href = "https://www.figma.com/design/14ISV23YB1yVW1uNVwqrKv/Android?node-id=122-47&m=dev">
+ * Figma Component</a>
+ */
+@Composable
+fun TangemTopAppBar(
+    title: String?,
+    modifier: Modifier = Modifier,
+    subtitle: String? = null,
+    startButton: TopAppBarButtonUM? = null,
+    textColor: Color = TangemTheme.colors.text.primary1,
+    iconTint: Color = TangemTheme.colors.icon.primary1,
+    titleAlignment: Alignment.Horizontal = Alignment.Start,
+    containerColor: Color = Color.Transparent,
+    height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT,
+    endContent: @Composable RowScope.() -> Unit,
+) {
+    Row(
+        modifier = modifier
+            .background(color = containerColor)
+            .fillMaxWidth()
+            .heightIn(min = height.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier = Modifier
+                .padding(horizontal = TangemTheme.dimens.spacing12)
+                .size(TangemTheme.dimens.size32),
+            contentAlignment = Alignment.Center,
+        ) {
+            if (startButton != null) {
+                TopAppBarButton(
+                    button = startButton,
+                    tint = iconTint,
+                )
+            }
+        }
+
+        TopAppBarTitle(
+            modifier = Modifier.weight(1f),
+            title = title,
+            subtitle = subtitle,
+            textColor = textColor,
+            titleAlignment = titleAlignment,
+        )
+
+        Row(
+            modifier = Modifier
+                .padding(horizontal = TangemTheme.dimens.spacing12)
+                .widthIn(min = TangemTheme.dimens.size32)
+                .height(TangemTheme.dimens.size32),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12, Alignment.End),
+            content = endContent,
+        )
+    }
+}
+
+@Composable
+private fun TopAppBarTitle(
+    title: String?,
+    subtitle: String?,
+    textColor: Color,
+    titleAlignment: Alignment.Horizontal,
+    modifier: Modifier = Modifier,
+) {
+    Box(modifier = modifier) {
+        AnimatedVisibility(
+            modifier = Modifier.fillMaxWidth(),
+            visible = !title.isNullOrBlank(),
+            enter = fadeIn() + expandVertically(),
+            exit = fadeOut() + shrinkVertically(),
+        ) {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = titleAlignment,
+            ) {
+                Text(
+                    text = title.orEmpty(),
+                    style = TangemTheme.typography.subtitle1,
+                    color = textColor,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                )
+
+                AnimatedVisibility(
+                    visible = !subtitle.isNullOrBlank(),
+                    enter = fadeIn() + expandVertically(),
+                    exit = fadeOut() + shrinkVertically(),
+                    label = "Toolbar subtitle visibility",
+                ) {
+                    Text(
+                        text = subtitle.orEmpty(),
+                        style = TangemTheme.typography.caption2,
+                        color = TangemTheme.colors.text.secondary,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                }
+            }
+        }
+    }
+}
+
+private val TangemTopAppBarHeight.dp
+    @Composable
+    @ReadOnlyComposable
+    get() = when (this) {
+        TangemTopAppBarHeight.BOTTOM_SHEET -> TangemTheme.dimens.size44
+        TangemTopAppBarHeight.DEFAULT -> TangemTheme.dimens.size56
+    }
+
+// region Preview
+@Composable
+@Preview(showBackground = true, widthDp = 360)
+@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun Preview_BasicTopAppBar(
+    @PreviewParameter(BasicTopAppBarPMPreviewProvider::class) params: BasicTopAppBarPM,
+) {
+    TangemThemePreview {
+        TangemTopAppBar(
+            title = params.title,
+            subtitle = params.subtitle,
+            startButton = params.startButton,
+            endButton = params.endButton,
+            titleAlignment = params.titleAlignment,
+            containerColor = TangemTheme.colors.background.secondary,
+            height = params.height,
+        )
+    }
+}
+
+private data class BasicTopAppBarPM(
+    val title: String? = "Tangem",
+    val subtitle: String? = null,
+    val startButton: TopAppBarButtonUM? = null,
+    val endButton: TopAppBarButtonUM? = null,
+    val titleAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
+    val height: TangemTopAppBarHeight = TangemTopAppBarHeight.DEFAULT,
+)
+
+private class BasicTopAppBarPMPreviewProvider : PreviewParameterProvider<BasicTopAppBarPM> {
+    override val values: Sequence<BasicTopAppBarPM>
+        get() = sequenceOf(
+            BasicTopAppBarPM(
+                subtitle = "Subtitle",
+                titleAlignment = Alignment.Start,
+                startButton = TopAppBarButtonUM.Back { },
+            ),
+            BasicTopAppBarPM(
+                title = null,
+                startButton = TopAppBarButtonUM.Back { },
+            ),
+            BasicTopAppBarPM(
+                height = TangemTopAppBarHeight.BOTTOM_SHEET,
+            ),
+            BasicTopAppBarPM(
+                startButton = TopAppBarButtonUM(
+                    iconRes = R.drawable.ic_scan_24,
+                    onIconClicked = {},
+                ),
+                endButton = TopAppBarButtonUM(
+                    iconRes = R.drawable.ic_more_vertical_24,
+                    onIconClicked = {},
+                ),
+            ),
+            BasicTopAppBarPM(
+                startButton = TopAppBarButtonUM(
+                    iconRes = R.drawable.ic_scan_24,
+                    onIconClicked = {},
+                ),
+            ),
+            BasicTopAppBarPM(
+                endButton = TopAppBarButtonUM(
+                    iconRes = R.drawable.ic_more_vertical_24,
+                    onIconClicked = {},
+                ),
+                height = TangemTopAppBarHeight.BOTTOM_SHEET,
+            ),
+            BasicTopAppBarPM(
+                title = "1234567891011121314151617181920",
+                subtitle = "12345678910111213141516171819202122232425",
+                titleAlignment = Alignment.Start,
+                startButton = TopAppBarButtonUM(
+                    iconRes = R.drawable.ic_scan_24,
+                    onIconClicked = {},
+                ),
+                endButton = TopAppBarButtonUM(
+                    iconRes = R.drawable.ic_more_vertical_24,
+                    onIconClicked = {},
+                ),
+            ),
+        )
+}
+// endregion Preview

core/ui/src/main/java/com/tangem/core/ui/components/appbar/TopAppBarButton.kt

@@ -0,0 +1,26 @@
+package com.tangem.core.ui.components.appbar
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import com.tangem.core.ui.components.appbar.models.TopAppBarButtonUM
+import com.tangem.core.ui.res.TangemTheme
+
+@Composable
+fun TopAppBarButton(button: TopAppBarButtonUM, tint: Color, modifier: Modifier = Modifier) {
+    IconButton(
+        modifier = modifier.size(TangemTheme.dimens.size32),
+        onClick = button.onIconClicked,
+    ) {
+        Icon(
+            modifier = Modifier.size(TangemTheme.dimens.size24),
+            painter = painterResource(id = button.iconRes),
+            tint = tint,
+            contentDescription = null,
+        )
+    }
+}

core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/AdditionalButton.kt

@@ -1,8 +0,0 @@
-package com.tangem.core.ui.components.appbar.models
-
-import androidx.annotation.DrawableRes
-
-data class AdditionalButton(
-    @DrawableRes val iconRes: Int,
-    val onIconClicked: () -> Unit,
-)

core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/TopAppBarButtonUM.kt

@@ -0,0 +1,19 @@
+package com.tangem.core.ui.components.appbar.models
+
+import androidx.annotation.DrawableRes
+import com.tangem.core.ui.R
+
+data class TopAppBarButtonUM(
+    @DrawableRes val iconRes: Int,
+    val onIconClicked: () -> Unit,
+) {
+
+    @Suppress("FunctionName")
+    companion object {
+
+        fun Back(onBackClicked: () -> Unit) = TopAppBarButtonUM(
+            iconRes = R.drawable.ic_back_24,
+            onIconClicked = onBackClicked,
+        )
+    }
+}

core/ui/src/main/java/com/tangem/core/ui/components/appbar/models/TopAppBarMedium.kt

@@ -1,75 +0,0 @@
-package com.tangem.core.ui.components.appbar.models
-
-import androidx.compose.foundation.layout.size
-import androidx.compose.material3.*
-import androidx.compose.runtime.*
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.style.TextOverflow
-import com.tangem.core.ui.R
-import com.tangem.core.ui.extensions.TextReference
-import com.tangem.core.ui.extensions.resolveReference
-import com.tangem.core.ui.res.TangemTheme
-
-private const val COLLAPSED_APP_BAR_THRESHOLD = 0.4f
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun TopAppBarMedium(
-    title: TextReference,
-    scrollBehavior: TopAppBarScrollBehavior,
-    onBackClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    navigationIconResId: Int = R.drawable.ic_back_24,
-    colors: TopAppBarColors = TangemTopAppBarColors,
-) {
-    MediumTopAppBar(
-        modifier = modifier,
-        scrollBehavior = scrollBehavior,
-        colors = colors,
-        title = {
-            val collapsedStyle = TangemTheme.typography.subtitle1
-            val expandedStyle = TangemTheme.typography.h1
-            val style by remember(scrollBehavior.state.collapsedFraction) {
-                derivedStateOf {
-                    if (scrollBehavior.state.collapsedFraction >= COLLAPSED_APP_BAR_THRESHOLD) {
-                        collapsedStyle
-                    } else {
-                        expandedStyle
-                    }
-                }
-            }
-
-            Text(
-                text = title.resolveReference(),
-                style = style,
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-            )
-        },
-        navigationIcon = {
-            IconButton(
-                modifier = Modifier.size(TangemTheme.dimens.size32),
-                onClick = onBackClick,
-            ) {
-                Icon(
-                    modifier = Modifier.size(TangemTheme.dimens.size24),
-                    painter = painterResource(id = navigationIconResId),
-                    contentDescription = null,
-                )
-            }
-        },
-    )
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-internal val TangemTopAppBarColors: TopAppBarColors
-    @Composable
-    @ReadOnlyComposable
-    get() = TopAppBarColors(
-        containerColor = TangemTheme.colors.background.secondary,
-        scrolledContainerColor = TangemTheme.colors.background.secondary,
-        navigationIconContentColor = TangemTheme.colors.icon.primary1,
-        titleContentColor = TangemTheme.colors.text.primary1,
-        actionIconContentColor = TangemTheme.colors.icon.primary1,
-    )