@momo-kits/native-kits 0.167.1-beta.4 → 0.167.1-duo.1-debug

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt

@@ -0,0 +1,188 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Stable
+data class Background(
+    val default: Color,
+    val surface: Color,
+    val tonal: Color,
+    val pressed: Color,
+    val selected: Color,
+    val disable: Color
+)
+
+@Stable
+data class ColorScheme(
+    val primary: Color,
+    val secondary: Color,
+    val gradient: Color,
+    val background: Background,
+    val text: TextColors,
+    val border: BorderColors,
+    val success: ColorSet,
+    val warning: ColorSet,
+    val error: ColorSet,
+    val highlight: ColorSet,
+    val interactive: ColorSet
+)
+
+@Stable
+data class TextColors(
+    val default: Color,
+    val secondary: Color,
+    val hint: Color,
+    val disable: Color
+)
+
+@Stable
+data class BorderColors(
+    val default: Color,
+    val disable: Color
+)
+
+@Stable
+data class ColorSet(
+    val primary: Color,
+    val secondary: Color,
+    val container: Color
+)
+
+@Stable
+data class ThemeAssets(
+    val headerBackground: String? = null
+)
+
+@Stable
+data class Theme(
+    val dark: Boolean,
+    val colors: ColorScheme,
+    val font: String,
+    val assets: ThemeAssets
+) {
+    fun isHeaderImage(): Boolean {
+        return !assets.headerBackground.isNullOrEmpty()
+    }
+}
+val defaultTheme = Theme(
+    dark = false,
+    colors = ColorScheme(
+        primary = Colors.pink_03,
+        secondary = Colors.pink_07,
+        gradient = Color(0xFFFDCADE),
+        background = Background(
+            default = Color(0xFFF2F2F6),
+            surface = Colors.black_01,
+            tonal = Colors.pink_09,
+            pressed = Color(0xFFDFDFE6),
+            selected = Colors.pink_10,
+            disable = Color(0xFFEBEBF2)
+        ),
+        text = TextColors(
+            default = Colors.black_17,
+            secondary = Colors.black_15,
+            hint = Colors.black_12,
+            disable = Colors.black_08
+        ),
+        border = BorderColors(
+            default = Colors.black_04,
+            disable = Colors.black_02
+        ),
+        success = ColorSet(
+            primary = Colors.green_03,
+            secondary = Colors.green_07,
+            container = Colors.green_08
+        ),
+        warning = ColorSet(
+            primary = Colors.orange_03,
+            secondary = Colors.orange_07,
+            container = Colors.orange_08
+        ),
+        error = ColorSet(
+            primary = Colors.red_03,
+            secondary = Colors.red_07,
+            container = Colors.red_08,
+        ),
+        highlight = ColorSet(
+            primary = Colors.mint_03,
+            secondary = Colors.mint_07,
+            container = Colors.mint_08
+        ),
+        interactive = ColorSet(
+            primary = Colors.blue_03,
+            secondary = Colors.blue_07,
+            container = Colors.blue_08
+        )
+    ),
+    font = "MomoTrustSans",
+    assets = ThemeAssets(
+        headerBackground = null
+    )
+)
+
+
+val darkTheme = Theme(
+    dark = true,
+    colors = ColorScheme(
+        primary = Colors.pink_04,
+        secondary = Colors.pink_08,
+        gradient = Color(0xFFFDCADE),
+        background = Background(
+            default = Color(0xFF121212),
+            surface = Color(0xFF1E1E1E),
+            tonal = Colors.pink_10,
+            pressed = Color(0xFF1A1A1A),
+            selected = Colors.pink_11,
+            disable = Color(0xFF303030)
+        ),
+        text = TextColors(
+            default = Color.White,
+            secondary = Color(0xFFB0B0B0),
+            hint = Color(0xFF727272),
+            disable = Color(0xFF505050)
+        ),
+        border = BorderColors(
+            default = Color(0xFF2A2A2A),
+            disable = Color(0xFF242424)
+        ),
+        success = ColorSet(
+            primary = Colors.green_03,
+            secondary = Colors.green_07,
+            container = Colors.green_08
+        ),
+        warning = ColorSet(
+            primary = Colors.orange_03,
+            secondary = Colors.orange_07,
+            container = Colors.orange_08
+        ),
+        error = ColorSet(
+            primary = Colors.red_03,
+            secondary = Colors.red_07,
+            container = Colors.red_08,
+        ),
+        highlight = ColorSet(
+            primary = Colors.mint_03,
+            secondary = Colors.mint_07,
+            container = Colors.mint_08
+        ),
+        interactive = ColorSet(
+            primary = Colors.blue_03,
+            secondary = Colors.blue_07,
+            container = Colors.blue_08
+        )
+    ),
+    font = "MomoTrustSans",
+    assets = ThemeAssets(
+        headerBackground = null
+    )
+)
+
+
+val AppTheme = staticCompositionLocalOf { defaultTheme }
+
+val AppStatusBar = staticCompositionLocalOf { 0.dp }
+
+val AppNavigationBar = staticCompositionLocalOf { 0.dp }

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Typography.kt

@@ -0,0 +1,297 @@
+package vn.momo.kits.const
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.*
+import vn.momo.kits.application.LocalContext
+import vn.momo.kits.platform.getScreenDimensions
+import kotlin.math.max
+import kotlin.math.min
+
+const val DEFAULT_SCREEN_SIZE = 375f
+const val MAX_FONT_SCALE = 1.5f
+const val MAX_DEVICE_SCALE = 5
+
+@Composable
+fun scaleSize(size: Float): Float {
+    val context = LocalContext.current
+    // Host-pushed context wins; otherwise fall back to the app-wide KitFontScale holder.
+    val useOsScale = context?.useOSScaleRate ?: KitFontScale.useOSScaleRate
+    if (!useOsScale) {
+        return size * (context?.userScaleRate ?: KitFontScale.userScaleRate)
+    }
+    val scaleSizeMaxRate: Float = MAX_FONT_SCALE
+    // Short side, not width: landscape must not inflate every font.
+    val deviceWidth = getScreenDimensions().let { minOf(it.width, it.height) }
+    val deviceScale = deviceWidth / DEFAULT_SCREEN_SIZE
+
+    val density = LocalDensity.current
+    val fontScale = density.fontScale
+
+    var fontSizeScaleDevice = size
+    var fontSizeScaleOS = size
+
+    if (deviceScale > 1) {
+        fontSizeScaleDevice =
+            min(deviceScale * fontSizeScaleDevice, fontSizeScaleDevice + MAX_DEVICE_SCALE)
+    }
+
+    if (fontScale > 1) {
+        fontSizeScaleOS = min(fontScale * fontSizeScaleOS, fontSizeScaleOS * scaleSizeMaxRate)
+    }
+
+    return max(
+        fontSizeScaleDevice,
+        fontSizeScaleOS
+    )
+}
+
+@Composable
+fun scaleSize(size: TextUnit): TextUnit {
+    if (!size.isSp) return size
+
+    val density = LocalDensity.current
+
+    val scaled = scaleSize(size.value)
+    val spValue = scaled / density.fontScale
+
+    return TextUnit(value = spValue, type = TextUnitType.Sp)
+}
+
+@Composable
+fun scaleSize(size: Dp): Dp {
+    return scaleSize(size.value).dp
+}
+
+@Composable
+fun scaleSize(textStyle: TextStyle): TextStyle {
+    return textStyle.copy(
+        fontSize = if (textStyle.fontSize != TextUnit.Unspecified)
+            scaleSize(textStyle.fontSize)
+        else
+            TextUnit.Unspecified,
+
+        lineHeight = if (textStyle.lineHeight != TextUnit.Unspecified)
+            scaleSize(textStyle.lineHeight)
+        else
+            TextUnit.Unspecified,
+    )
+}
+
+
+/**
+ * Tên file font trong tài nguyên native của app host (xem [hostFontFamily]).
+ *
+ * SDK không đóng gói font riêng nữa: app host đã bundle sẵn toàn bộ font từ `font-source`
+ * cho cả React Native lẫn native, nên bản copy trong `composeResources` chỉ làm phình app.
+ */
+private const val LEGACY_DEFAULT_FONT_FILE = "SFProText-Regular.ttf"
+private const val NEW_DEFAULT_FONT_FILE = "MomoTrustSans-Regular.ttf"
+
+private val hostFontFiles: Map<String, String> = mapOf(
+    "SFProText-100" to "SFProText-Thin.ttf",
+    "SFProText-200" to "SFProText-Ultralight.ttf",
+    "SFProText-300" to "SFProText-Light.ttf",
+    "SFProText-400" to LEGACY_DEFAULT_FONT_FILE,
+    "SFProText-500" to "SFProText-Medium.ttf",
+    "SFProText-600" to "SFProText-Semibold.ttf",
+    "SFProText-700" to "SFProText-Bold.ttf",
+    "SFProText-800" to "SFProText-Heavy.ttf",
+    "SFProText-900" to "SFProText-Black.ttf",
+
+    "MomoTrustSans-100" to "MomoTrustSans-ExtraLight.ttf",
+    "MomoTrustSans-200" to "MomoTrustSans-ExtraLight.ttf",
+    "MomoTrustSans-300" to "MomoTrustSans-Light.ttf",
+    "MomoTrustSans-400" to "MomoTrustSans-Regular.ttf",
+    "MomoTrustSans-500" to "MomoTrustSans-Medium.ttf",
+    "MomoTrustSans-600" to "MomoTrustSans-SemiBold.ttf",
+    "MomoTrustSans-700" to "MomoTrustSans-Bold.ttf",
+    "MomoTrustSans-800" to "MomoTrustSans-ExtraBold.ttf",
+    "MomoTrustSans-900" to "MomoTrustSans-ExtraBold.ttf",
+) + (1..9).flatMap { step ->
+    val weight = step * 100
+    listOf(
+        "MoMoSignature-$weight" to "MoMoSignature.otf",
+        "MoMoTrustDisplay-$weight" to "MoMoTrustDisplay.otf",
+    )
+}
+
+/**
+ * Font mặc định mới, chỉ áp cho user nằm trong whitelist design system ([KitDesignSystem]).
+ * Ngoài whitelist thì quay về [LEGACY_DEFAULT_FONT_FAMILY] như trước.
+ */
+private const val NEW_DEFAULT_FONT_FAMILY = "MomoTrustSans"
+private const val LEGACY_DEFAULT_FONT_FAMILY = "SFProText"
+
+/**
+ * Font thuoc bo design system moi. MoMoTrustDisplay chi duoc header dung tu DS-791
+ * (commit header title 5bfde6251); truoc do header lay font theo theme, nen ngoai
+ * whitelist ca hai deu ha ve [LEGACY_DEFAULT_FONT_FAMILY].
+ */
+private val newFontFamilies = setOf(NEW_DEFAULT_FONT_FAMILY, "MoMoTrustDisplay")
+
+@Composable
+fun getFontFamily(fontFamily: String, fontWeight: FontWeight? = FontWeight.Normal): FontFamily {
+    val isWhiteList = KitDesignSystem.isWhiteList
+    val resolvedFamily =
+        if (fontFamily in newFontFamilies && !isWhiteList) {
+            LEGACY_DEFAULT_FONT_FAMILY
+        } else {
+            fontFamily
+        }
+    val defaultFile = if (isWhiteList) NEW_DEFAULT_FONT_FILE else LEGACY_DEFAULT_FONT_FILE
+    val key = "$resolvedFamily-${fontWeight?.weight}"
+    val fileName = hostFontFiles[key] ?: defaultFile
+    return hostFontFamily(fileName)
+        ?: hostFontFamily(defaultFile)
+        ?: FontFamily.Default
+}
+
+@Immutable
+class AppTypography internal constructor(
+    val headlineDefaultBold: TextStyle,
+    val headerMBold: TextStyle,
+    val headerDefaultBold: TextStyle,
+    val headerSSemibold: TextStyle,
+    val headerXsSemibold: TextStyle,
+    val bodyDefaultRegular: TextStyle,
+    val bodyDefaultRegularStrikethrough: TextStyle,
+    val descriptionDefaultRegular: TextStyle,
+    val descriptionDefaultRegularStrikethrough: TextStyle,
+    val descriptionXsRegular: TextStyle,
+    val descriptionXsRegularStrikethrough: TextStyle,
+    val labelDefaultMedium: TextStyle,
+    val labelSMedium: TextStyle,
+    val labelXsMedium: TextStyle,
+    val actionDefaultBold: TextStyle,
+    val actionSBold: TextStyle,
+    val actionXsBold: TextStyle,
+    val actionXxsBold: TextStyle,
+) {
+    constructor(
+        default: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        headlineDefaultBold: TextStyle = TextStyle(
+            fontSize = 24.sp,
+            lineHeight = 34.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerMBold: TextStyle = TextStyle(
+            fontSize = 18.sp,
+            lineHeight = 26.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerDefaultBold: TextStyle = TextStyle(
+            fontSize = 16.sp,
+            lineHeight = 22.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        headerSSemibold: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.SemiBold
+        ),
+        headerXsSemibold: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.SemiBold
+        ),
+        bodyDefaultRegular: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        bodyDefaultRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        descriptionDefaultRegular: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        descriptionDefaultRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        descriptionXsRegular: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Normal
+        ),
+        descriptionXsRegularStrikethrough: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Normal,
+            textDecoration = TextDecoration.LineThrough
+        ),
+        labelDefaultMedium: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        labelSMedium: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        labelXsMedium: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Medium
+        ),
+        actionDefaultBold: TextStyle = TextStyle(
+            fontSize = 16.sp,
+            lineHeight = 22.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionSBold: TextStyle = TextStyle(
+            fontSize = 14.sp,
+            lineHeight = 20.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionXsBold: TextStyle = TextStyle(
+            fontSize = 12.sp,
+            lineHeight = 18.sp,
+            fontWeight = FontWeight.Bold
+        ),
+        actionXxsBold: TextStyle = TextStyle(
+            fontSize = 10.sp,
+            lineHeight = 14.sp,
+            fontWeight = FontWeight.Bold
+        ),
+    ) : this(
+        headlineDefaultBold = headlineDefaultBold,
+        headerMBold = headerMBold,
+        headerDefaultBold = headerDefaultBold,
+        headerSSemibold = headerSSemibold,
+        headerXsSemibold = headerXsSemibold,
+        bodyDefaultRegular = bodyDefaultRegular,
+        bodyDefaultRegularStrikethrough = bodyDefaultRegularStrikethrough,
+        descriptionDefaultRegular = descriptionDefaultRegular,
+        descriptionDefaultRegularStrikethrough = descriptionDefaultRegularStrikethrough,
+        descriptionXsRegular = descriptionXsRegular,
+        descriptionXsRegularStrikethrough = descriptionXsRegularStrikethrough,
+        labelDefaultMedium = labelDefaultMedium,
+        labelSMedium = labelSMedium,
+        labelXsMedium = labelXsMedium,
+        actionDefaultBold = actionDefaultBold,
+        actionSBold = actionSBold,
+        actionXsBold = actionXsBold,
+        actionXxsBold = actionXxsBold
+    )
+}
+
+val Typography = AppTypography()

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Card.kt

@@ -0,0 +1,52 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+import vn.momo.kits.const.AppTheme
+import vn.momo.kits.const.Radius
+import vn.momo.kits.const.Spacing
+
+@Composable
+internal fun Card(
+    useShadow: Boolean = false,
+    backgroundImage: String? = null,
+    contentPadding: PaddingValues = PaddingValues(Spacing.M),
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 8.dp
+    val shape = RoundedCornerShape(Radius.M)
+    var surface = modifier.fillMaxWidth().padding(horizontal = 12.dp)
+    if (useShadow) surface = surface.shadow(4.dp, shape)
+    surface = surface.clip(shape)
+    if (backgroundImage == null) surface = surface.background(AppTheme.current.colors.background.surface)
+    Box(modifier = surface) {
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth().padding(contentPadding)) {
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Item.kt

@@ -0,0 +1,38 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.compositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+internal data class GridContext(
+    val numberOfColumns: Int = 12,
+    val gutter: Dp = 12.dp,
+    val sizePerSpan: Dp = 0.dp,
+) {
+    fun sizeForSpan(span: Int): Dp = sizePerSpan * span + gutter * (span - 1)
+}
+
+internal val LocalGridContext = compositionLocalOf<GridContext?> { null }
+
+@Composable
+internal fun Item(
+    widthSpan: Int = 12,
+    heightSpan: Int = 0,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val grid = LocalGridContext.current
+    var m = modifier
+    if (grid != null) {
+        m = m.width(grid.sizeForSpan(widthSpan))
+        if (heightSpan > 0) m = m.height(grid.sizeForSpan(heightSpan))
+    }
+    // A Column (not a Box) so multiple children flow VERTICALLY instead of stacking
+    // on top of each other — matches the React Item's flex-column content.
+    Column(modifier = m) { content() }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/layout/Section.kt

@@ -0,0 +1,39 @@
+package vn.momo.kits.layout
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.Image
+
+@Composable
+internal fun Section(
+    useMargin: Boolean = true,
+    backgroundImage: String? = null,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    val columns = 12
+    val gutter = 12.dp
+    val margin = if (useMargin) 12.dp else 0.dp
+    Box(modifier = modifier.fillMaxWidth().padding(horizontal = margin)) {
+        if (backgroundImage != null) {
+            Image(source = backgroundImage, modifier = Modifier.matchParentSize())
+        }
+        BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+            val sizePerSpan = (maxWidth - gutter * (columns - 1)) / columns - 1.dp / columns
+            CompositionLocalProvider(LocalGridContext provides GridContext(columns, gutter, sizePerSpan)) {
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(gutter),
+                    verticalArrangement = Arrangement.spacedBy(gutter),
+                ) { content() }
+            }
+        }
+    }
+}

package/compose/src/commonMain/kotlin/vn/momo/kits/modifier/AutomationId.kt

@@ -0,0 +1,52 @@
+package vn.momo.kits.modifier
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.node.ModifierNodeElement
+import androidx.compose.ui.node.SemanticsModifierNode
+import androidx.compose.ui.semantics.SemanticsPropertyReceiver
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTag
+import vn.momo.kits.platform.getPlatformName
+
+fun Modifier.setAutomationId(accessibilityId: String, mergeDescendants: Boolean = false): Modifier {
+    return if (getPlatformName() == "Android") {
+        semantics {
+            contentDescription = accessibilityId
+        }
+    } else {
+        semantics(mergeDescendants = mergeDescendants) {
+            testTag = accessibilityId
+        }
+    }}
+
+fun Modifier.kitsAutomationId(accessibilityId: String, label: String? = null) =
+    this then KitsAutomationIdElement(accessibilityId, label)
+
+private data class KitsAutomationIdElement(
+    private val accessibilityId: String,
+    private val label: String? = null,
+) : ModifierNodeElement<KitsAutomationIdNode>() {
+    override fun create(): KitsAutomationIdNode {
+        return KitsAutomationIdNode(accessibilityId, label)
+    }
+
+    override fun update(node: KitsAutomationIdNode) {
+        node.accessibilityId = accessibilityId
+        node.label = label
+    }
+}
+
+private class KitsAutomationIdNode(
+    var accessibilityId: String,
+    var label: String?,
+) : Modifier.Node(), SemanticsModifierNode {
+    override fun SemanticsPropertyReceiver.applySemantics() {
+        if (getPlatformName() == "Android") {
+            contentDescription = accessibilityId
+        } else {
+            testTag = accessibilityId
+            contentDescription = label ?: accessibilityId
+        }
+    }
+}