@expo/ui 55.0.1 → 55.0.3

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

@@ -0,0 +1,115 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import android.util.Log
+import android.view.ViewGroup
+import androidx.compose.material3.MultiChoiceSegmentedButtonRowScope
+import androidx.compose.material3.SegmentedButton
+import androidx.compose.material3.SegmentedButtonDefaults
+import androidx.compose.material3.SingleChoiceSegmentedButtonRowScope
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposableScope
+
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+
+data class SegmentedButtonColors(
+  @Field val activeBorderColor: Color? = null,
+  @Field val activeContentColor: Color? = null,
+  @Field val inactiveBorderColor: Color? = null,
+  @Field val inactiveContentColor: Color? = null,
+  @Field val disabledActiveBorderColor: Color? = null,
+  @Field val disabledActiveContentColor: Color? = null,
+  @Field val disabledInactiveBorderColor: Color? = null,
+  @Field val disabledInactiveContentColor: Color? = null,
+  @Field val activeContainerColor: Color? = null,
+  @Field val inactiveContainerColor: Color? = null,
+  @Field val disabledActiveContainerColor: Color? = null,
+  @Field val disabledInactiveContainerColor: Color? = null
+) : Record
+
+data class SegmentedButtonProps(
+  val selected: Boolean = false,
+  val checked: Boolean = false,
+  val enabled: Boolean = true,
+  val colors: SegmentedButtonColors = SegmentedButtonColors(),
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.SegmentedButtonContent(
+  props: SegmentedButtonProps,
+  onClick: () -> Unit,
+  onCheckedChange: (GenericEventPayload1<Boolean>) -> Unit
+) {
+  val colors = props.colors
+  val labelSlotView = findChildSlotView(view, "label")
+  val parent = view.parent as? ViewGroup
+  val index = parent?.indexOfChild(view) ?: 0
+  val count = parent?.childCount ?: 1
+
+  val segmentedColors = SegmentedButtonDefaults.colors(
+    activeBorderColor = colors.activeBorderColor.compose,
+    activeContentColor = colors.activeContentColor.compose,
+    inactiveBorderColor = colors.inactiveBorderColor.compose,
+    inactiveContentColor = colors.inactiveContentColor.compose,
+    disabledActiveBorderColor = colors.disabledActiveBorderColor.compose,
+    disabledActiveContentColor = colors.disabledActiveContentColor.compose,
+    disabledInactiveBorderColor = colors.disabledInactiveBorderColor.compose,
+    disabledInactiveContentColor = colors.disabledInactiveContentColor.compose,
+    activeContainerColor = colors.activeContainerColor.compose,
+    inactiveContainerColor = colors.inactiveContainerColor.compose,
+    disabledActiveContainerColor = colors.disabledActiveContainerColor.compose,
+    disabledInactiveContainerColor = colors.disabledInactiveContainerColor.compose
+  )
+
+  val shape = SegmentedButtonDefaults.itemShape(index = index, count = count)
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  val label: @Composable () -> Unit = labelSlotView?.let {
+    {
+      with(ComposableScope()) {
+        with(it) {
+          Content()
+        }
+      }
+    }
+  } ?: {}
+
+  val singleScope = composableScope.rowScope as? SingleChoiceSegmentedButtonRowScope
+  val multiScope = composableScope.rowScope as? MultiChoiceSegmentedButtonRowScope
+
+  if (singleScope == null && multiScope == null) {
+    if (BuildConfig.DEBUG) {
+      Log.w("ExpoUI", "SegmentedButton must be used within a SingleChoiceSegmentedButtonRow or MultiChoiceSegmentedButtonRow. It will not render on its own.")
+    }
+    return
+  }
+
+  if (singleScope != null) {
+    with(singleScope) {
+      SegmentedButton(
+        selected = props.selected,
+        onClick = onClick,
+        shape = shape,
+        enabled = props.enabled,
+        colors = segmentedColors,
+        modifier = modifier,
+        label = label
+      )
+    }
+  } else if (multiScope != null) {
+    with(multiScope) {
+      SegmentedButton(
+        checked = props.checked,
+        onCheckedChange = { onCheckedChange(GenericEventPayload1(it)) },
+        shape = shape,
+        enabled = props.enabled,
+        colors = segmentedColors,
+        modifier = modifier,
+        label = label
+      )
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+package expo.modules.ui
+
+import androidx.compose.material3.MultiChoiceSegmentedButtonRow
+import androidx.compose.material3.SingleChoiceSegmentedButtonRow
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.kotlin.views.with
+
+data class SingleChoiceSegmentedButtonRowProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.SingleChoiceSegmentedButtonRowContent(props: SingleChoiceSegmentedButtonRowProps) {
+  SingleChoiceSegmentedButtonRow(
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope().with(rowScope = this@SingleChoiceSegmentedButtonRow))
+  }
+}
+
+data class MultiChoiceSegmentedButtonRowProps(
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.MultiChoiceSegmentedButtonRowContent(props: MultiChoiceSegmentedButtonRowProps) {
+  MultiChoiceSegmentedButtonRow(
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope().with(rowScope = this@MultiChoiceSegmentedButtonRow))
+  }
+}

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

@@ -1,13 +1,20 @@
 package expo.modules.ui
 
 import android.graphics.Color
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.viewevent.getValue
+import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 
@@ -33,7 +40,8 @@ data class SliderProps(
   val min: Float = 0.0f,
   val max: Float = 1.0f,
   val steps: Int = 0,
-  val elementColors: SliderColors = SliderColors(),
+  val enabled: Boolean = true,
+  val colors: SliderColors = SliderColors(),
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
@@ -41,24 +49,74 @@ data class SliderValueChangedEvent(
   @Field val value: Float
 ) : Record
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun FunctionalComposableScope.SliderContent(props: SliderProps) {
-  val onValueChanged by remember { this@SliderContent.EventDispatcher<SliderValueChangedEvent>() }
-  val colors = props.elementColors
+  val onValueChange by remember { this@SliderContent.EventDispatcher<SliderValueChangedEvent>() }
+  val onValueChangeFinished by remember { this@SliderContent.EventDispatcher<Unit>() }
+  val interactionSource = remember { MutableInteractionSource() }
+
+  var localValue by remember { mutableFloatStateOf(props.value.coerceIn(props.min, props.max)) }
+  var isDragging by remember { mutableStateOf(false) }
+  val clampedPropsValue = props.value.coerceIn(props.min, props.max)
+  var prevPropsValue by remember { mutableFloatStateOf(clampedPropsValue) }
+
+  if (clampedPropsValue != prevPropsValue) {
+    prevPropsValue = clampedPropsValue
+    if (!isDragging) {
+      localValue = clampedPropsValue
+    }
+  }
+
+  val thumbSlotView = findChildSlotView(view, "thumb")
+  val trackSlotView = findChildSlotView(view, "track")
+
+  val sliderColors = SliderDefaults.colors(
+    thumbColor = props.colors.thumbColor.compose,
+    activeTrackColor = props.colors.activeTrackColor.compose,
+    inactiveTrackColor = props.colors.inactiveTrackColor.compose,
+    activeTickColor = props.colors.activeTickColor.compose,
+    inactiveTickColor = props.colors.inactiveTickColor.compose
+  )
+
   Slider(
-    value = props.value.coerceAtLeast(props.min).coerceAtMost(props.max),
+    value = localValue,
     valueRange = props.min..props.max,
     steps = props.steps,
+    enabled = props.enabled,
+    interactionSource = interactionSource,
     onValueChange = {
-      onValueChanged(SliderValueChangedEvent(it))
+      isDragging = true
+      localValue = it
+      onValueChange(SliderValueChangedEvent(it))
+    },
+    onValueChangeFinished = {
+      isDragging = false
+      onValueChangeFinished(Unit)
+    },
+    colors = sliderColors,
+    thumb = { sliderState ->
+      if (thumbSlotView != null) {
+        with(ComposableScope()) { with(thumbSlotView) { Content() } }
+      } else {
+        SliderDefaults.Thumb(
+          interactionSource = interactionSource,
+          colors = sliderColors,
+          enabled = props.enabled
+        )
+      }
+    },
+    track = { sliderState ->
+      if (trackSlotView != null) {
+        with(ComposableScope()) { with(trackSlotView) { Content() } }
+      } else {
+        SliderDefaults.Track(
+          sliderState = sliderState,
+          colors = sliderColors,
+          enabled = props.enabled
+        )
+      }
     },
-    colors = SliderDefaults.colors(
-      thumbColor = colors.thumbColor.compose,
-      activeTrackColor = colors.activeTrackColor.compose,
-      inactiveTrackColor = colors.inactiveTrackColor.compose,
-      activeTickColor = colors.activeTickColor.compose,
-      inactiveTickColor = colors.inactiveTickColor.compose
-    ),
     modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
   )
 }

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

@@ -1,12 +1,9 @@
 package expo.modules.ui
 
 import android.graphics.Color
-import androidx.compose.material3.Checkbox
-import androidx.compose.material3.CheckboxDefaults
 import androidx.compose.material3.Switch
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
 import expo.modules.kotlin.views.ComposableScope
@@ -14,121 +11,48 @@ import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 import java.io.Serializable
 
-open class ValueChangeEvent(
+open class CheckedChangeEvent(
   @Field open val value: Boolean = false
 ) : Record, Serializable
 
-class SwitchColors : Record {
-  @Field
-  val checkedThumbColor: Color? = null
-
-  @Field
-  val checkedTrackColor: Color? = null
-
-  @Field
-  val uncheckedThumbColor: Color? = null
-
-  @Field
-  val uncheckedTrackColor: Color? = null
-
-  @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
-}
+data class SwitchColors(
+  @Field val checkedThumbColor: Color? = null,
+  @Field val checkedTrackColor: Color? = null,
+  @Field val checkedBorderColor: Color? = null,
+  @Field val checkedIconColor: Color? = null,
+  @Field val uncheckedThumbColor: Color? = null,
+  @Field val uncheckedTrackColor: Color? = null,
+  @Field val uncheckedBorderColor: Color? = null,
+  @Field val uncheckedIconColor: Color? = null,
+  @Field val disabledCheckedThumbColor: Color? = null,
+  @Field val disabledCheckedTrackColor: Color? = null,
+  @Field val disabledCheckedBorderColor: Color? = null,
+  @Field val disabledCheckedIconColor: Color? = null,
+  @Field val disabledUncheckedThumbColor: Color? = null,
+  @Field val disabledUncheckedTrackColor: Color? = null,
+  @Field val disabledUncheckedBorderColor: Color? = null,
+  @Field val disabledUncheckedIconColor: Color? = null
+) : Record
 
 data class SwitchProps(
   val value: Boolean = false,
-  val variant: String = "switch",
-  val elementColors: SwitchColors = SwitchColors(),
+  val enabled: Boolean = true,
+  val colors: SwitchColors = SwitchColors(),
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
-@Composable
-fun SwitchComposable(
-  checked: Boolean,
-  onCheckedChange: ((Boolean) -> Unit)?,
-  colors: SwitchColors,
-  modifier: Modifier = Modifier,
-  thumbContent: (@Composable () -> Unit)? = null
-) {
-  Switch(
-    checked = checked,
-    onCheckedChange = onCheckedChange,
-    modifier = modifier,
-    thumbContent = thumbContent,
-    colors = SwitchDefaults.colors(
-      // For some reason the default way of passing colors using `compose` results in a transparent view
-      checkedThumbColor = colors.checkedThumbColor.composeOrNull
-        ?: SwitchDefaults.colors().checkedThumbColor,
-      checkedTrackColor = colors.checkedTrackColor.composeOrNull
-        ?: SwitchDefaults.colors().checkedTrackColor,
-      uncheckedThumbColor = colors.uncheckedThumbColor.composeOrNull
-        ?: SwitchDefaults.colors().uncheckedThumbColor,
-      uncheckedTrackColor = colors.uncheckedTrackColor.composeOrNull
-        ?: SwitchDefaults.colors().uncheckedTrackColor
-    )
-  )
-}
-
-@Composable
-fun CheckboxComposable(checked: Boolean, onCheckedChange: ((Boolean) -> Unit)?, colors: SwitchColors, modifier: Modifier) {
-  Checkbox(
-    checked = checked,
-    onCheckedChange = onCheckedChange,
-    modifier = modifier,
-    colors = CheckboxDefaults.colors(
-      checkedColor = colors.checkedColor.compose,
-      disabledCheckedColor = colors.disabledCheckedColor.compose,
-      uncheckedColor = colors.uncheckedColor.compose,
-      disabledUncheckedColor = colors.disabledUncheckedColor.compose,
-      checkmarkColor = colors.checkmarkColor.compose,
-      disabledIndeterminateColor = colors.disabledIndeterminateColor.compose
-    )
-  )
-}
-
-@Composable
-fun ThemedHybridSwitch(
-  variant: String,
-  checked: Boolean,
-  onCheckedChange: ((Boolean) -> Unit)?,
-  colors: SwitchColors,
-  modifier: Modifier = Modifier,
-  thumbContent: (@Composable () -> Unit)? = null
-) {
-  when (variant) {
-    "switch" -> SwitchComposable(checked, onCheckedChange, colors, modifier, thumbContent)
-    else -> CheckboxComposable(checked, onCheckedChange, colors, modifier)
-  }
-}
-
 @Composable
 fun FunctionalComposableScope.SwitchContent(
   props: SwitchProps,
-  onValueChange: (ValueChangeEvent) -> Unit
+  onCheckedChange: (Boolean) -> Unit
 ) {
   val thumbContentSlotView = findChildSlotView(view, "thumbContent")
 
-  ThemedHybridSwitch(
-    props.variant,
-    props.value,
-    { newChecked -> onValueChange(ValueChangeEvent(newChecked)) },
-    props.elementColors,
-    ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+  Switch(
+    checked = props.value,
+    onCheckedChange = onCheckedChange,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
+    enabled = props.enabled,
     thumbContent = thumbContentSlotView?.let {
       {
         with(ComposableScope()) {
@@ -137,6 +61,40 @@ fun FunctionalComposableScope.SwitchContent(
           }
         }
       }
-    }
+    },
+    colors = SwitchDefaults.colors(
+      checkedThumbColor = props.colors.checkedThumbColor.composeOrNull
+        ?: SwitchDefaults.colors().checkedThumbColor,
+      checkedTrackColor = props.colors.checkedTrackColor.composeOrNull
+        ?: SwitchDefaults.colors().checkedTrackColor,
+      checkedBorderColor = props.colors.checkedBorderColor.composeOrNull
+        ?: SwitchDefaults.colors().checkedBorderColor,
+      checkedIconColor = props.colors.checkedIconColor.composeOrNull
+        ?: SwitchDefaults.colors().checkedIconColor,
+      uncheckedThumbColor = props.colors.uncheckedThumbColor.composeOrNull
+        ?: SwitchDefaults.colors().uncheckedThumbColor,
+      uncheckedTrackColor = props.colors.uncheckedTrackColor.composeOrNull
+        ?: SwitchDefaults.colors().uncheckedTrackColor,
+      uncheckedBorderColor = props.colors.uncheckedBorderColor.composeOrNull
+        ?: SwitchDefaults.colors().uncheckedBorderColor,
+      uncheckedIconColor = props.colors.uncheckedIconColor.composeOrNull
+        ?: SwitchDefaults.colors().uncheckedIconColor,
+      disabledCheckedBorderColor = props.colors.disabledCheckedBorderColor.composeOrNull
+        ?: SwitchDefaults.colors().disabledCheckedBorderColor,
+      disabledCheckedThumbColor = props.colors.disabledCheckedThumbColor.composeOrNull
+        ?: SwitchDefaults.colors().disabledCheckedThumbColor,
+      disabledCheckedTrackColor = props.colors.disabledCheckedTrackColor.composeOrNull
+        ?: SwitchDefaults.colors().disabledCheckedTrackColor,
+      disabledCheckedIconColor = props.colors.disabledCheckedIconColor.composeOrNull
+        ?: SwitchDefaults.colors().disabledCheckedIconColor,
+      disabledUncheckedBorderColor = props.colors.disabledUncheckedBorderColor.composeOrNull
+        ?: SwitchDefaults.colors().disabledUncheckedBorderColor,
+      disabledUncheckedThumbColor = props.colors.disabledUncheckedThumbColor.composeOrNull
+        ?: SwitchDefaults.colors().disabledUncheckedThumbColor,
+      disabledUncheckedTrackColor = props.colors.disabledUncheckedTrackColor.composeOrNull
+        ?: SwitchDefaults.colors().disabledUncheckedTrackColor,
+      disabledUncheckedIconColor = props.colors.disabledUncheckedIconColor.composeOrNull
+        ?: SwitchDefaults.colors().disabledUncheckedIconColor
+    )
   )
 }

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

@@ -3,26 +3,33 @@
 package expo.modules.ui
 
 import android.graphics.Color
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.FilledIconToggleButton
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.IconToggleButton
 import androidx.compose.material3.OutlinedIconToggleButton
-import androidx.compose.material3.Text
 import androidx.compose.material3.ToggleButton
 import androidx.compose.material3.ToggleButtonDefaults
 import androidx.compose.runtime.Composable
 import expo.modules.kotlin.records.Field
 import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposableScope
 import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
 
+data class ToggleButtonColors(
+  @Field val containerColor: Color? = null,
+  @Field val contentColor: Color? = null,
+  @Field val checkedContainerColor: Color? = null,
+  @Field val checkedContentColor: Color? = null,
+  @Field val disabledContainerColor: Color? = null,
+  @Field val disabledContentColor: Color? = null
+) : Record
+
 data class ToggleButtonProps(
   val checked: Boolean = false,
-  val text: String? = null,
-  val variant: String = "default",
-  val color: Color? = null,
-  val disabled: Boolean = false,
+  val enabled: Boolean = true,
+  val colors: ToggleButtonColors = ToggleButtonColors(),
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
@@ -36,61 +43,92 @@ fun FunctionalComposableScope.ToggleButtonContent(
   onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
 ) {
   val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ToggleButton(
+    checked = props.checked,
+    onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+    enabled = props.enabled,
+    modifier = modifier,
+    colors = ToggleButtonDefaults.toggleButtonColors(
+      checkedContainerColor = props.colors.checkedContainerColor.compose,
+      checkedContentColor = props.colors.checkedContentColor.compose,
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    )
+  ) {
+    Children(ComposableScope(rowScope = this))
+  }
+}
 
-  val scope = this
-
-  val content: @Composable () -> Unit = {
-    when {
-      props.text != null -> Text(text = props.text)
-      else -> scope.Children(composableScope)
-    }
+@Composable
+fun FunctionalComposableScope.IconToggleButtonContent(
+  props: ToggleButtonProps,
+  onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
+) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  IconToggleButton(
+    checked = props.checked,
+    onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+    enabled = props.enabled,
+    modifier = modifier,
+    colors = IconButtonDefaults.iconToggleButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      checkedContainerColor = props.colors.checkedContainerColor.compose,
+      checkedContentColor = props.colors.checkedContentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    )
+  ) {
+    Children(ComposableScope())
   }
+}
 
-  // RowScope content for ToggleButton
-  val rowContent: @Composable RowScope.() -> Unit = {
-    when {
-      props.text != null -> Text(text = props.text)
-      else -> scope.Children(composableScope)
-    }
+@Composable
+fun FunctionalComposableScope.FilledIconToggleButtonContent(
+  props: ToggleButtonProps,
+  onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
+) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  FilledIconToggleButton(
+    checked = props.checked,
+    onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+    enabled = props.enabled,
+    modifier = modifier,
+    colors = IconButtonDefaults.filledIconToggleButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      checkedContainerColor = props.colors.checkedContainerColor.compose,
+      checkedContentColor = props.colors.checkedContentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    )
+  ) {
+    Children(ComposableScope())
   }
+}
 
-  when (props.variant) {
-    "icon" -> {
-      IconToggleButton(
-        checked = props.checked,
-        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
-        enabled = !props.disabled,
-        modifier = modifier,
-        content = content
-      )
-    }
-    "filledIcon" -> {
-      FilledIconToggleButton(
-        checked = props.checked,
-        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
-        enabled = !props.disabled,
-        modifier = modifier,
-        content = content
-      )
-    }
-    "outlinedIcon" -> {
-      OutlinedIconToggleButton(
-        checked = props.checked,
-        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
-        enabled = !props.disabled,
-        modifier = modifier,
-        content = content
-      )
-    }
-    else -> {
-      ToggleButton(
-        checked = props.checked,
-        onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
-        enabled = !props.disabled,
-        modifier = modifier,
-        colors = ToggleButtonDefaults.toggleButtonColors(),
-        content = rowContent
-      )
-    }
+@Composable
+fun FunctionalComposableScope.OutlinedIconToggleButtonContent(
+  props: ToggleButtonProps,
+  onCheckedChange: (ToggleButtonValueChangeEvent) -> Unit
+) {
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  OutlinedIconToggleButton(
+    checked = props.checked,
+    onCheckedChange = { onCheckedChange(ToggleButtonValueChangeEvent(it)) },
+    enabled = props.enabled,
+    modifier = modifier,
+    colors = IconButtonDefaults.outlinedIconToggleButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      checkedContainerColor = props.colors.checkedContainerColor.compose,
+      checkedContentColor = props.colors.checkedContentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    )
+  ) {
+    Children(ComposableScope())
   }
 }