@expo/ui 55.0.2 → 55.0.3

package/CHANGELOG.md

@@ -10,12 +10,41 @@
 
 ### 💡 Others
 
+## 55.0.3 — 2026-03-17
+
+### 🛠 Breaking changes
+
+- [iOS] Renamed Stepper `defaultValue` to `value` and `onValueChanged` to `onValueChange`. ([#43954](https://github.com/expo/expo/pull/43954) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Replace `Picker` with `SingleChoiceSegmentedButtonRow`, `MultiChoiceSegmentedButtonRow`, and `SegmentedButton` components. Replace `RadioButton` `nativeClickable` prop with `onClick` event. ([#43809](https://github.com/expo/expo/pull/43809) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Split `ToggleButton` into separate M3 components: `ToggleButton`, `IconToggleButton`, `FilledIconToggleButton`, `OutlinedIconToggleButton`. Removed `variant`, `text`, `color`, `disabled` props. Added `colors` with checked/unchecked variants. ([#43974](https://github.com/expo/expo/pull/43974) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Match `Switch` API to native: removed `variant` prop and split into separate `Switch` and `Checkbox` components matching native M3 APIs. Renamed `elementColors` to `colors`, `onValueChange` to `onCheckedChange`, removed `color` convenience prop. ([#43887](https://github.com/expo/expo/pull/43887) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Refactored Progress Indicators to match native Compose API: split into `LinearProgressIndicator`, `CircularProgressIndicator`, `LinearWavyProgressIndicator`, `CircularWavyProgressIndicator`. Flattened `elementColors.trackColor` to `trackColor`. Added `strokeCap`, `gapSize`, `strokeWidth` props. ([#43907](https://github.com/expo/expo/pull/43907) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Refactored `Card` to match native Material3 API: split into `Card`/`ElevatedCard`/`OutlinedCard` with type-specific props (`elevation`, `border`). ([#43896](https://github.com/expo/expo/pull/43896) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Split `Button` into separate M3 components: `Button`, `FilledTonalButton`, `OutlinedButton`, `ElevatedButton`, `TextButton`. Removed `variant`, `text`, `leadingIcon`, `trailingIcon`, `color`, `elementColors`, `disabled` props. ([#43859](https://github.com/expo/expo/pull/43859) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Split `IconButton` into separate M3 components: `IconButton`, `FilledIconButton`, `FilledTonalIconButton`, `OutlinedIconButton`. Removed `variant`, `color`, `elementColors`, `disabled`, `onPress` props. ([#43859](https://github.com/expo/expo/pull/43859) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Refactored `Chip` to match native Material3 API: split into `AssistChip`/`FilterChip`/`InputChip`/`SuggestionChip` with slot-based content, added `colors`/`elevation`/`border` props. Merged `FilterChip` into `Chip` module. ([#43900](https://github.com/expo/expo/pull/43900) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] Refactored `Slider` to match native Material3 API: renamed `elementColors` to `colors`, removed `color` convenience prop. ([#43840](https://github.com/expo/expo/pull/43840) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] rename ContextMenu to DropdownMenu ([#43794](https://github.com/expo/expo/pull/43794) by [@Ubax](https://github.com/Ubax))
+- [android] configure ContextMenu by using native children ([#43792](https://github.com/expo/expo/pull/43792) by [@Ubax](https://github.com/Ubax))
+- [android] control ContextMenu expanded state from JS ([#43793](https://github.com/expo/expo/pull/43793) by [@Ubax](https://github.com/Ubax))
+
+### 🎉 New features
+
+- [iOS] Added `date`, `dateStyle`, `timerInterval`, `countsDown`, and `pauseTime` props to `Text` component for displaying auto-updating dates, timers, and countdowns using SwiftUI's `Text.DateStyle`. ([#43552](https://github.com/expo/expo/pull/43552) by [@LouisRaverdy](https://github.com/LouisRaverdy))
+- [android] Added `Checkbox` and `TriStateCheckbox` components. ([#43887](https://github.com/expo/expo/pull/43887) by [@nishan](https://github.com/intergalacticspacehighway))
+- [Android] Added `DatePickerDialog` and `TimePickerDialog` components, and `selectableDates` prop to `DateTimePicker`. ([#43895](https://github.com/expo/expo/pull/43895) by [@vonovak](https://github.com/vonovak))
+- [android] Added `FloatingActionButton` component. ([#43738](https://github.com/expo/expo/pull/43738) by [@benjaminkomen](https://github.com/benjaminkomen))
+- [android] Added `enabled`, `onValueChangeFinished`, and `Slider.Thumb`/`Slider.Track` slot support to `Slider` component. ([#43840](https://github.com/expo/expo/pull/43840) by [@nishan](https://github.com/intergalacticspacehighway))
+- [android] add AnimatedVisibility transition API ([#43632](https://github.com/expo/expo/pull/43632) by [@Ubax](https://github.com/Ubax))
+
 ## 55.0.2 — 2026-03-11
 
 ### 🎉 New features
 
 - [Android] Added `graphicsLayer` modifier and animation helpers for per-value animation in it. Added `indication` option to `clickable` modifier to control ripple effects. ([#43655](https://github.com/expo/expo/pull/43655) by [@vonovak](https://github.com/vonovak))
 - [Android] Added border color customization for `Switch` and `Checkbox` components. ([#43770](https://github.com/expo/expo/pull/43770) by [@liestig](https://github.com/liestig))
+- [iOS] Added `defaultScrollAnchor` modifier for controlling initial scroll position (iOS 17+). ([#43914](https://github.com/expo/expo/pull/43914) by [@ramonclaudio](https://github.com/ramonclaudio))
+- [iOS] Added `defaultScrollAnchorForRole` modifier for per-role scroll anchor control (iOS 18+). ([#43923](https://github.com/expo/expo/pull/43923) by [@ramonclaudio](https://github.com/ramonclaudio))
 - [iOS] Added `rotation3DEffect` modifier for 3D rotation transforms ([#43640](https://github.com/expo/expo/pull/43640) by [@vonovak](https://github.com/vonovak))
 - [iOS] Added `ControlGroup` component. ([#43581](https://github.com/expo/expo/pull/43581) by [@nishan](https://github.com/intergalacticspacehighway))
 - [android] detect FAB in HorizontalFloatingToolbar ([#43601](https://github.com/expo/expo/pull/43601) by [@Ubax](https://github.com/Ubax))
@@ -25,6 +54,8 @@
 
 ### 🐛 Bug fixes
 
+- [iOS] Fix initial prop values not being applied since `init` runs before `updateProps`. ([#43954](https://github.com/expo/expo/pull/43954) by [@nishan](https://github.com/intergalacticspacehighway))
+- [iOS] Fix prop syncing race condition where stale values override user interactions. Replace `onReceive(Sequence.publisher)` with `onAppear` + `onChange` across all SwiftUI views. ([#43954](https://github.com/expo/expo/pull/43954) by [@nishan](https://github.com/intergalacticspacehighway))
 - [iOS] Fix `Slider` thumb snapping back during drag by guarding `.onReceive` with `isEditing` state. ([#43701](https://github.com/expo/expo/issues/43701) by [@fedeciancaglini](https://github.com/fedeciancaglini)) ([#43797](https://github.com/expo/expo/pull/43797) by [@fedeciancaglini](https://github.com/fedeciancaglini))
 - [Android] Fix touch events for RN views inside Compose BottomSheet. ([#43716](https://github.com/expo/expo/pull/43716) by [@nishan](https://github.com/intergalacticspacehighway))
 - [Android] Fix `RNHostView` child parent related crash. ([#43691](https://github.com/expo/expo/pull/43691) by [@nishan](https://github.com/intergalacticspacehighway))

package/android/build.gradle

@@ -12,13 +12,13 @@ apply plugin: 'expo-module-gradle-plugin'
 apply plugin: 'org.jetbrains.kotlin.plugin.compose'
 
 group = 'expo.modules.ui'
-version = '55.0.2'
+version = '55.0.3'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "55.0.2"
+    versionName "55.0.3"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }
   buildFeatures {

package/android/src/main/java/expo/modules/ui/AnimatedVisibilityView.kt

@@ -0,0 +1,130 @@
+package expo.modules.ui
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
+import androidx.compose.animation.expandHorizontally
+import androidx.compose.animation.expandIn
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.shrinkHorizontally
+import androidx.compose.animation.shrinkOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutHorizontally
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.Enumerable
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+// region Transition types
+
+enum class EnterTransitionType(val value: String) : Enumerable {
+  FADE_IN("fadeIn"),
+  SLIDE_IN_HORIZONTALLY("slideInHorizontally"),
+  SLIDE_IN_VERTICALLY("slideInVertically"),
+  EXPAND_IN("expandIn"),
+  EXPAND_HORIZONTALLY("expandHorizontally"),
+  EXPAND_VERTICALLY("expandVertically"),
+  SCALE_IN("scaleIn")
+}
+
+enum class ExitTransitionType(val value: String) : Enumerable {
+  FADE_OUT("fadeOut"),
+  SLIDE_OUT_HORIZONTALLY("slideOutHorizontally"),
+  SLIDE_OUT_VERTICALLY("slideOutVertically"),
+  SHRINK_OUT("shrinkOut"),
+  SHRINK_HORIZONTALLY("shrinkHorizontally"),
+  SHRINK_VERTICALLY("shrinkVertically"),
+  SCALE_OUT("scaleOut")
+}
+
+data class EnterTransitionRecord(
+  @Field val type: EnterTransitionType = EnterTransitionType.FADE_IN,
+  @Field val initialAlpha: Float? = null,
+  @Field val initialOffsetX: Float? = null,
+  @Field val initialOffsetY: Float? = null,
+  @Field val initialScale: Float? = null
+) : Record
+
+data class ExitTransitionRecord(
+  @Field val type: ExitTransitionType = ExitTransitionType.FADE_OUT,
+  @Field val targetAlpha: Float? = null,
+  @Field val targetOffsetX: Float? = null,
+  @Field val targetOffsetY: Float? = null,
+  @Field val targetScale: Float? = null
+) : Record
+
+// endregion
+
+// region Transition conversion
+
+// TODO(@ubax): expose animationSpec parameter (tween, spring, duration) for all transitions
+private fun EnterTransitionRecord.toComposeTransition(): EnterTransition = when (type) {
+  EnterTransitionType.FADE_IN ->
+    if (initialAlpha != null) fadeIn(initialAlpha = initialAlpha) else fadeIn()
+  EnterTransitionType.SLIDE_IN_HORIZONTALLY ->
+    if (initialOffsetX != null) slideInHorizontally { (it * initialOffsetX).toInt() } else slideInHorizontally()
+  EnterTransitionType.SLIDE_IN_VERTICALLY ->
+    if (initialOffsetY != null) slideInVertically { (it * initialOffsetY).toInt() } else slideInVertically()
+  // TODO(@ubax): expose expandFrom (Alignment) and initialSize parameters for expand transitions
+  EnterTransitionType.EXPAND_IN -> expandIn()
+  EnterTransitionType.EXPAND_HORIZONTALLY -> expandHorizontally()
+  EnterTransitionType.EXPAND_VERTICALLY -> expandVertically()
+  EnterTransitionType.SCALE_IN ->
+    if (initialScale != null) scaleIn(initialScale = initialScale) else scaleIn()
+}
+
+private fun ExitTransitionRecord.toComposeTransition(): ExitTransition = when (type) {
+  ExitTransitionType.FADE_OUT ->
+    if (targetAlpha != null) fadeOut(targetAlpha = targetAlpha) else fadeOut()
+  ExitTransitionType.SLIDE_OUT_HORIZONTALLY ->
+    if (targetOffsetX != null) slideOutHorizontally { (it * targetOffsetX).toInt() } else slideOutHorizontally()
+  ExitTransitionType.SLIDE_OUT_VERTICALLY ->
+    if (targetOffsetY != null) slideOutVertically { (it * targetOffsetY).toInt() } else slideOutVertically()
+  // TODO(@ubax): expose shrinkTowards (Alignment) and targetSize parameters for shrink transitions
+  ExitTransitionType.SHRINK_OUT -> shrinkOut()
+  ExitTransitionType.SHRINK_HORIZONTALLY -> shrinkHorizontally()
+  ExitTransitionType.SHRINK_VERTICALLY -> shrinkVertically()
+  ExitTransitionType.SCALE_OUT ->
+    if (targetScale != null) scaleOut(targetScale = targetScale) else scaleOut()
+}
+
+private fun List<EnterTransitionRecord>.toComposedEnterTransition(): EnterTransition? =
+  map { it.toComposeTransition() }.reduceOrNull { acc, transition -> acc + transition }
+
+private fun List<ExitTransitionRecord>.toComposedExitTransition(): ExitTransition? =
+  map { it.toComposeTransition() }.reduceOrNull { acc, transition -> acc + transition }
+
+// endregion
+
+data class AnimatedVisibilityProps(
+  val visible: Boolean = true,
+  val enterTransition: List<EnterTransitionRecord>? = null,
+  val exitTransition: List<ExitTransitionRecord>? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.AnimatedVisibilityContent(props: AnimatedVisibilityProps) {
+  val enter = props.enterTransition?.takeIf { it.isNotEmpty() }?.toComposedEnterTransition()
+  val exit = props.exitTransition?.takeIf { it.isNotEmpty() }?.toComposedExitTransition()
+
+  AnimatedVisibility(
+    visible = props.visible,
+    enter = enter ?: (fadeIn() + expandIn()),
+    exit = exit ?: (fadeOut() + shrinkOut()),
+    modifier = ModifierRegistry
+      .applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope())
+  }
+}

package/android/src/main/java/expo/modules/ui/CardView.kt

@@ -1,12 +1,14 @@
 package expo.modules.ui
 
 import android.graphics.Color
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ElevatedCard
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.views.ComposableScope
@@ -14,15 +16,22 @@ import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 import expo.modules.kotlin.views.with
 
-data class CardElementColors(
+data class CardColors(
   @Field val containerColor: Color? = null,
   @Field val contentColor: Color? = null
 ) : Record
 
+data class CardBorder(
+  @Field val width: Float = 1f,
+  @Field val color: Color? = null
+) : Record
+
+// region Card
+
 data class CardProps(
-  val variant: String = "default",
-  val color: Color? = null,
-  val elementColors: CardElementColors? = null,
+  val colors: CardColors = CardColors(),
+  val elevation: Float? = null,
+  val border: CardBorder? = null,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
@@ -30,15 +39,29 @@ data class CardProps(
 fun FunctionalComposableScope.CardContent(props: CardProps) {
   val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
 
-  val colors = when {
-    props.elementColors != null -> CardDefaults.cardColors(
-      containerColor = props.elementColors.containerColor?.compose ?: androidx.compose.ui.graphics.Color.Unspecified,
-      contentColor = props.elementColors.contentColor?.compose ?: androidx.compose.ui.graphics.Color.Unspecified
-    )
-    props.color != null -> CardDefaults.cardColors(
-      containerColor = props.color.compose
-    )
-    else -> CardDefaults.cardColors()
+  val defaults = CardDefaults.cardColors()
+  val colors = CardDefaults.cardColors(
+    containerColor = props.colors.containerColor.composeOrNull
+      ?: defaults.containerColor,
+    contentColor = props.colors.contentColor.composeOrNull
+      ?: defaults.contentColor
+  )
+
+  val elevation = if (props.elevation != null) {
+    CardDefaults.cardElevation(defaultElevation = props.elevation.dp)
+  } else {
+    CardDefaults.cardElevation()
+  }
+
+  val border = if (props.border != null) {
+    val borderColor = props.border.color.composeOrNull
+    if (borderColor != null) {
+      BorderStroke(props.border.width.dp, borderColor)
+    } else {
+      BorderStroke(props.border.width.dp, CardDefaults.outlinedCardBorder().brush)
+    }
+  } else {
+    null
   }
 
   val content: @Composable ColumnScope.() -> Unit = {
@@ -46,27 +69,108 @@ fun FunctionalComposableScope.CardContent(props: CardProps) {
     Children(scope)
   }
 
-  when (props.variant) {
-    "elevated" -> {
-      ElevatedCard(
-        modifier = modifier,
-        colors = colors,
-        content = content
-      )
-    }
-    "outlined" -> {
-      OutlinedCard(
-        modifier = modifier,
-        colors = colors,
-        content = content
-      )
-    }
-    else -> {
-      Card(
-        modifier = modifier,
-        colors = colors,
-        content = content
-      )
+  Card(
+    modifier = modifier,
+    colors = colors,
+    elevation = elevation,
+    border = border,
+    content = content
+  )
+}
+
+// endregion
+
+// region ElevatedCard
+
+data class ElevatedCardProps(
+  val colors: CardColors = CardColors(),
+  val elevation: Float? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.ElevatedCardContent(props: ElevatedCardProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+
+  val defaults = CardDefaults.elevatedCardColors()
+  val colors = CardDefaults.elevatedCardColors(
+    containerColor = props.colors.containerColor.composeOrNull
+      ?: defaults.containerColor,
+    contentColor = props.colors.contentColor.composeOrNull
+      ?: defaults.contentColor
+  )
+
+  val elevation = if (props.elevation != null) {
+    CardDefaults.elevatedCardElevation(defaultElevation = props.elevation.dp)
+  } else {
+    CardDefaults.elevatedCardElevation()
+  }
+
+  val content: @Composable ColumnScope.() -> Unit = {
+    val scope = ComposableScope().with(columnScope = this)
+    Children(scope)
+  }
+
+  ElevatedCard(
+    modifier = modifier,
+    colors = colors,
+    elevation = elevation,
+    content = content
+  )
+}
+
+// endregion
+
+// region OutlinedCard
+
+data class OutlinedCardProps(
+  val colors: CardColors = CardColors(),
+  val elevation: Float? = null,
+  val border: CardBorder? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.OutlinedCardContent(props: OutlinedCardProps) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+
+  val defaults = CardDefaults.outlinedCardColors()
+  val colors = CardDefaults.outlinedCardColors(
+    containerColor = props.colors.containerColor.composeOrNull
+      ?: defaults.containerColor,
+    contentColor = props.colors.contentColor.composeOrNull
+      ?: defaults.contentColor
+  )
+
+  val elevation = if (props.elevation != null) {
+    CardDefaults.outlinedCardElevation(defaultElevation = props.elevation.dp)
+  } else {
+    CardDefaults.outlinedCardElevation()
+  }
+
+  val border = if (props.border != null) {
+    val borderColor = props.border.color.composeOrNull
+    if (borderColor != null) {
+      BorderStroke(props.border.width.dp, borderColor)
+    } else {
+      BorderStroke(props.border.width.dp, CardDefaults.outlinedCardBorder().brush)
     }
+  } else {
+    CardDefaults.outlinedCardBorder()
   }
+
+  val content: @Composable ColumnScope.() -> Unit = {
+    val scope = ComposableScope().with(columnScope = this)
+    Children(scope)
+  }
+
+  OutlinedCard(
+    modifier = modifier,
+    colors = colors,
+    elevation = elevation,
+    border = border,
+    content = content
+  )
 }
+
+// endregion

package/android/src/main/java/expo/modules/ui/CheckboxView.kt

@@ -0,0 +1,98 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.TriStateCheckbox
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.state.ToggleableState
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.Enumerable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class CheckboxColors(
+  @Field val checkedColor: Color? = null,
+  @Field val disabledCheckedColor: Color? = null,
+  @Field val uncheckedColor: Color? = null,
+  @Field val disabledUncheckedColor: Color? = null,
+  @Field val checkmarkColor: Color? = null,
+  @Field val disabledIndeterminateColor: Color? = null
+) : Record
+
+data class CheckboxProps(
+  val value: Boolean = false,
+  val enabled: Boolean = true,
+  val nativeClickable: Boolean = true,
+  val colors: CheckboxColors = CheckboxColors(),
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.CheckboxContent(
+  props: CheckboxProps,
+  onCheckedChange: (Boolean) -> Unit
+) {
+  Checkbox(
+    checked = props.value,
+    onCheckedChange = if (props.nativeClickable) {
+      onCheckedChange
+    } else {
+      null
+    },
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    enabled = props.enabled,
+    colors = CheckboxDefaults.colors(
+      checkedColor = props.colors.checkedColor.compose,
+      disabledCheckedColor = props.colors.disabledCheckedColor.compose,
+      uncheckedColor = props.colors.uncheckedColor.compose,
+      disabledUncheckedColor = props.colors.disabledUncheckedColor.compose,
+      checkmarkColor = props.colors.checkmarkColor.compose,
+      disabledIndeterminateColor = props.colors.disabledIndeterminateColor.compose
+    )
+  )
+}
+
+enum class ToggleableStateValue(val value: String) : Enumerable {
+  ON("on"),
+  OFF("off"),
+  INDETERMINATE("indeterminate")
+}
+
+data class TriStateCheckboxProps(
+  val state: ToggleableStateValue = ToggleableStateValue.OFF,
+  val enabled: Boolean = true,
+  val nativeClickable: Boolean = true,
+  val colors: CheckboxColors = CheckboxColors(),
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.TriStateCheckboxContent(
+  props: TriStateCheckboxProps,
+  onClick: () -> Unit
+) {
+  TriStateCheckbox(
+    state = when (props.state) {
+      ToggleableStateValue.ON -> ToggleableState.On
+      ToggleableStateValue.OFF -> ToggleableState.Off
+      ToggleableStateValue.INDETERMINATE -> ToggleableState.Indeterminate
+    },
+    onClick = if (props.nativeClickable) {
+      onClick
+    } else {
+      null
+    },
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    enabled = props.enabled,
+    colors = CheckboxDefaults.colors(
+      checkedColor = props.colors.checkedColor.compose,
+      disabledCheckedColor = props.colors.disabledCheckedColor.compose,
+      uncheckedColor = props.colors.uncheckedColor.compose,
+      disabledUncheckedColor = props.colors.disabledUncheckedColor.compose,
+      checkmarkColor = props.colors.checkmarkColor.compose,
+      disabledIndeterminateColor = props.colors.disabledIndeterminateColor.compose
+    )
+  )
+}