@expo/ui 55.0.1 → 55.0.3

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

@@ -12,14 +12,22 @@ import expo.modules.kotlin.viewevent.getValue
 import expo.modules.ui.button.ButtonContent
 import expo.modules.ui.button.ButtonPressedEvent
 import expo.modules.ui.button.ButtonProps
+import expo.modules.ui.button.ElevatedButtonContent
+import expo.modules.ui.button.FilledTonalButtonContent
+import expo.modules.ui.button.OutlinedButtonContent
+import expo.modules.ui.button.TextButtonContent
+import expo.modules.ui.button.FloatingActionButtonContent
+import expo.modules.ui.button.FloatingActionButtonProps
 import expo.modules.ui.button.IconButtonContent
-import expo.modules.ui.button.IconButtonProps
+import expo.modules.ui.button.FilledIconButtonContent
+import expo.modules.ui.button.FilledTonalIconButtonContent
+import expo.modules.ui.button.OutlinedIconButtonContent
 import expo.modules.ui.icon.IconView
-import expo.modules.ui.menu.ContextMenuButtonPressedEvent
-import expo.modules.ui.menu.ContextMenuContent
-import expo.modules.ui.menu.ContextMenuProps
-import expo.modules.ui.menu.ContextMenuSwitchValueChangeEvent
-import expo.modules.ui.menu.ExpandedChangedEvent
+import expo.modules.ui.menu.DropdownMenuContent
+import expo.modules.ui.menu.DropdownMenuProps
+import expo.modules.ui.menu.DropdownMenuItemContent
+import expo.modules.ui.menu.DropdownMenuItemProps
+import expo.modules.ui.menu.ItemPressedEvent
 import okhttp3.OkHttpClient
 
 class ExpoUIModule : Module() {
@@ -91,19 +99,41 @@ class ExpoUIModule : Module() {
       ModalBottomSheetContent(props) { onDismissRequest(Unit) }
     }
 
-    // Defines a single view for now – a single choice segmented control
-    ExpoUIView("PickerView", events = {
-      Events("onOptionSelected")
-    }) { props: PickerProps ->
-      val onOptionSelected by remember { EventDispatcher<PickerOptionSelectedEvent>() }
-      PickerContent(props) { onOptionSelected(it) }
+    ExpoUIView("SingleChoiceSegmentedButtonRowView") { props: SingleChoiceSegmentedButtonRowProps ->
+      SingleChoiceSegmentedButtonRowContent(props)
+    }
+
+    ExpoUIView("MultiChoiceSegmentedButtonRowView") { props: MultiChoiceSegmentedButtonRowProps ->
+      MultiChoiceSegmentedButtonRowContent(props)
+    }
+
+    ExpoUIView("SegmentedButtonView", events = {
+      Events("onButtonPressed", "onCheckedChange")
+    }) { props: SegmentedButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<Unit>() }
+      val onCheckedChange by remember { EventDispatcher<GenericEventPayload1<Boolean>>() }
+      SegmentedButtonContent(props, { onButtonPressed(Unit) }, { onCheckedChange(it) })
     }
 
     ExpoUIView("SwitchView", events = {
-      Events("onValueChange")
+      Events("onCheckedChange")
     }) { props: SwitchProps ->
-      val onValueChange by remember { EventDispatcher<ValueChangeEvent>() }
-      SwitchContent(props) { onValueChange(it) }
+      val onCheckedChange by remember { EventDispatcher<CheckedChangeEvent>() }
+      SwitchContent(props) { value -> onCheckedChange(CheckedChangeEvent(value)) }
+    }
+
+    ExpoUIView("CheckboxView", events = {
+      Events("onCheckedChange")
+    }) { props: CheckboxProps ->
+      val onCheckedChange by remember { EventDispatcher<CheckedChangeEvent>() }
+      CheckboxContent(props) { value -> onCheckedChange(CheckedChangeEvent(value)) }
+    }
+
+    ExpoUIView("TriStateCheckboxView", events = {
+      Events("onNativeClick")
+    }) { props: TriStateCheckboxProps ->
+      val onNativeClick by remember { EventDispatcher<Unit>() }
+      TriStateCheckboxContent(props) { onNativeClick(Unit) }
     }
 
     ExpoUIView("Button", events = {
@@ -113,15 +143,64 @@ class ExpoUIModule : Module() {
       ButtonContent(props) { onButtonPressed(it) }
     }
 
+    ExpoUIView("FilledTonalButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      FilledTonalButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("OutlinedButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      OutlinedButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("ElevatedButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      ElevatedButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("TextButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      TextButtonContent(props) { onButtonPressed(it) }
+    }
+
     ExpoUIView("IconButton", events = {
       Events("onButtonPressed")
-    }) { props: IconButtonProps ->
+    }) { props: ButtonProps ->
       val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
       IconButtonContent(props) { onButtonPressed(it) }
     }
 
+    ExpoUIView("FilledIconButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      FilledIconButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("FilledTonalIconButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      FilledTonalIconButtonContent(props) { onButtonPressed(it) }
+    }
+
+    ExpoUIView("OutlinedIconButton", events = {
+      Events("onButtonPressed")
+    }) { props: ButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<ButtonPressedEvent>() }
+      OutlinedIconButtonContent(props) { onButtonPressed(it) }
+    }
+
     ExpoUIView("SliderView", events = {
-      Events("onValueChanged")
+      Events("onValueChange", "onValueChangeFinished")
     }) { props: SliderProps ->
       SliderContent(props)
     }
@@ -141,26 +220,50 @@ class ExpoUIModule : Module() {
       DateTimePickerContent(props) { onDateSelected(it) }
     }
 
-    ExpoUIView("ContextMenuView", events = {
-      Events(
-        "onContextMenuButtonPressed",
-        "onContextMenuSwitchValueChanged",
-        "onExpandedChanged"
-      )
-    }) { props: ContextMenuProps ->
-      val onContextMenuButtonPressed by remember { EventDispatcher<ContextMenuButtonPressedEvent>() }
-      val onContextMenuSwitchValueChanged by remember { EventDispatcher<ContextMenuSwitchValueChangeEvent>() }
-      val onExpandedChanged by remember { EventDispatcher<ExpandedChangedEvent>() }
-      ContextMenuContent(
-        props,
-        { onContextMenuButtonPressed(it) },
-        { onContextMenuSwitchValueChanged(it) },
-        { onExpandedChanged(it) }
-      )
+    ExpoUIView("DatePickerDialogView", events = {
+      Events("onDateSelected", "onDismissRequest")
+    }) { props: DatePickerDialogProps ->
+      val onDateSelected by remember { EventDispatcher<DatePickerResult>() }
+      val onDismissRequest by remember { EventDispatcher<Unit>() }
+      ExpoDatePickerDialogContent(props, { onDateSelected(it) }, { onDismissRequest(Unit) })
     }
 
-    ExpoUIView("ProgressView") { props: ProgressProps ->
-      ProgressContent(props)
+    ExpoUIView("TimePickerDialogView", events = {
+      Events("onDateSelected", "onDismissRequest")
+    }) { props: TimePickerDialogProps ->
+      val onDateSelected by remember { EventDispatcher<DatePickerResult>() }
+      val onDismissRequest by remember { EventDispatcher<Unit>() }
+      ExpoTimePickerDialogContent(props, { onDateSelected(it) }, { onDismissRequest(Unit) })
+    }
+
+    ExpoUIView("DropdownMenuView", events = {
+      Events("onDismissRequest")
+    }) { props: DropdownMenuProps ->
+      val onDismissRequest by remember { EventDispatcher<Unit>() }
+      DropdownMenuContent(props) { onDismissRequest(Unit) }
+    }
+
+    ExpoUIView("DropdownMenuItemView", events = {
+      Events("onItemPressed")
+    }) { props: DropdownMenuItemProps ->
+      val onItemPressed by remember { EventDispatcher<ItemPressedEvent>() }
+      DropdownMenuItemContent(props) { onItemPressed(it) }
+    }
+
+    ExpoUIView("LinearProgressIndicatorView") { props: LinearProgressIndicatorProps ->
+      LinearProgressIndicatorContent(props)
+    }
+
+    ExpoUIView("CircularProgressIndicatorView") { props: CircularProgressIndicatorProps ->
+      CircularProgressIndicatorContent(props)
+    }
+
+    ExpoUIView("LinearWavyProgressIndicatorView") { props: LinearWavyProgressIndicatorProps ->
+      LinearWavyProgressIndicatorContent(props)
+    }
+
+    ExpoUIView("CircularWavyProgressIndicatorView") { props: CircularWavyProgressIndicatorProps ->
+      CircularWavyProgressIndicatorContent(props)
     }
 
     ExpoUIView("BoxView") { props: LayoutProps ->
@@ -227,42 +330,74 @@ class ExpoUIModule : Module() {
       )
     }
 
-    ExpoUIView("ChipView", events = {
-      Events(
-        "onPress",
-        "onDismiss"
-      )
-    }) { props: ChipProps ->
-      val onPress by remember { EventDispatcher<ChipPressedEvent>() }
-      val onDismiss by remember { EventDispatcher<ChipPressedEvent>() }
-      ChipContent(props, { onPress(it) }, { onDismiss(it) })
+    ExpoUIView("AssistChipView", events = {
+      Events("onNativeClick")
+    }) { props: AssistChipProps ->
+      val onNativeClick by remember { EventDispatcher<ChipPressedEvent>() }
+      AssistChipContent(props) { onNativeClick(it) }
+    }
+
+    ExpoUIView("InputChipView", events = {
+      Events("onNativeClick")
+    }) { props: InputChipProps ->
+      val onNativeClick by remember { EventDispatcher<ChipPressedEvent>() }
+      InputChipContent(props) { onNativeClick(it) }
+    }
+
+    ExpoUIView("SuggestionChipView", events = {
+      Events("onNativeClick")
+    }) { props: SuggestionChipProps ->
+      val onNativeClick by remember { EventDispatcher<ChipPressedEvent>() }
+      SuggestionChipContent(props) { onNativeClick(it) }
     }
 
     ExpoUIView("FilterChipView", events = {
-      Events("onPress")
+      Events("onNativeClick")
     }) { props: FilterChipProps ->
-      val onPress by remember { EventDispatcher<FilterChipPressedEvent>() }
-      FilterChipContent(props) { onPress(it) }
+      val onNativeClick by remember { EventDispatcher<ChipPressedEvent>() }
+      FilterChipContent(props) { onNativeClick(it) }
     }
 
-    ExpoUIView("TextButtonView", events = {
-      Events("onButtonPressed")
-    }) { props: TextButtonProps ->
-      val onButtonPressed by remember { EventDispatcher<expo.modules.ui.button.ButtonPressedEvent>() }
-      TextButtonContent(props) { onButtonPressed(it) }
+    ExpoUIView("ToggleButton", events = {
+      Events("onCheckedChange")
+    }) { props: ToggleButtonProps ->
+      val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
+      ToggleButtonContent(props) { onCheckedChange(it) }
     }
 
-    ExpoUIView("ToggleButtonView", events = {
+    ExpoUIView("IconToggleButton", events = {
       Events("onCheckedChange")
     }) { props: ToggleButtonProps ->
       val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
-      ToggleButtonContent(props) { onCheckedChange(it) }
+      IconToggleButtonContent(props) { onCheckedChange(it) }
+    }
+
+    ExpoUIView("FilledIconToggleButton", events = {
+      Events("onCheckedChange")
+    }) { props: ToggleButtonProps ->
+      val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
+      FilledIconToggleButtonContent(props) { onCheckedChange(it) }
+    }
+
+    ExpoUIView("OutlinedIconToggleButton", events = {
+      Events("onCheckedChange")
+    }) { props: ToggleButtonProps ->
+      val onCheckedChange by remember { EventDispatcher<ToggleButtonValueChangeEvent>() }
+      OutlinedIconToggleButtonContent(props) { onCheckedChange(it) }
     }
 
     ExpoUIView("CardView") { props: CardProps ->
       CardContent(props)
     }
 
+    ExpoUIView("ElevatedCardView") { props: ElevatedCardProps ->
+      ElevatedCardContent(props)
+    }
+
+    ExpoUIView("OutlinedCardView") { props: OutlinedCardProps ->
+      OutlinedCardContent(props)
+    }
+
     ExpoUIView("ListItemView") { props: ListItemProps ->
       ListItemContent(props)
     }
@@ -282,11 +417,23 @@ class ExpoUIModule : Module() {
       SurfaceContent(props)
     }
 
+    ExpoUIView("AnimatedVisibilityView") { props: AnimatedVisibilityProps ->
+      AnimatedVisibilityContent(props)
+    }
+
     ExpoUIView("RadioButtonView", events = {
-      Events("onNativeClick")
+      Events("onButtonPressed")
     }) { props: RadioButtonProps ->
-      val onNativeClick by remember { EventDispatcher<Unit>() }
-      RadioButtonContent(props) { onNativeClick(Unit) }
+      val onButtonPressed by remember { EventDispatcher<Unit>() }
+      val clickHandler = if (props.clickable) { { onButtonPressed(Unit) } } else null
+      RadioButtonContent(props, clickHandler)
+    }
+
+    ExpoUIView("FloatingActionButtonView", events = {
+      Events("onButtonPressed")
+    }) { props: FloatingActionButtonProps ->
+      val onButtonPressed by remember { EventDispatcher<Unit>() }
+      FloatingActionButtonContent(props) { onButtonPressed(Unit) }
     }
 
     //endregion Expo UI views

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

@@ -51,13 +51,26 @@ fun FunctionalComposableScope.HorizontalFloatingToolbarContent(props: Horizontal
   }
 
   val scrollBehavior = composableScope.nestedScrollConnection as? FloatingToolbarScrollBehavior
-  HorizontalFloatingToolbar(
-    expanded = true,
-    colors = colors,
-    scrollBehavior = scrollBehavior,
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
-    floatingActionButton = floatingActionButton
-  ) {
-    Children(ComposableScope(), filter = { !isSlotView(it) })
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+
+  if (fabSlotView != null) {
+    HorizontalFloatingToolbar(
+      expanded = true,
+      floatingActionButton = floatingActionButton,
+      colors = colors,
+      scrollBehavior = scrollBehavior,
+      modifier = modifier,
+    ) {
+      Children(ComposableScope(), filter = { !isSlotView(it) })
+    }
+  } else {
+    HorizontalFloatingToolbar(
+      expanded = true,
+      colors = colors,
+      scrollBehavior = scrollBehavior,
+      modifier = modifier,
+    ) {
+      Children(ComposableScope(), filter = { !isSlotView(it) })
+    }
   }
 }

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

@@ -21,20 +21,29 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.selection.selectable
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.ui.semantics.Role
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.CutCornerShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.toShape
 import androidx.compose.runtime.Composable
+import expo.modules.ui.convertibles.resolveAnimatable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.blur
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.CompositingStrategy
 import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.TransformOrigin
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.zIndex
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.records.Field
@@ -43,6 +52,8 @@ import expo.modules.kotlin.records.recordFromMap
 import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposableScope
 import expo.modules.ui.convertibles.AlignmentType
+import expo.modules.ui.convertibles.CompositingStrategyType
+import expo.modules.ui.convertibles.GraphicsLayerParams
 
 typealias ModifierType = Map<String, Any?>
 typealias ModifierList = List<ModifierType>
@@ -169,7 +180,24 @@ internal data class ClipParams(
 ) : Record
 
 internal data class SelectableParams(
-  @Field val selected: Boolean = false
+  @Field val selected: Boolean = false,
+  @Field val role: String? = null
+) : Record
+
+internal data class ClickableParams(
+  @Field val indication: Boolean = true
+) : Record
+
+internal enum class SemanticRoleType(val value: String) : Enumerable {
+  CHECKBOX("checkbox"),
+  RADIO_BUTTON("radioButton"),
+  SWITCH("switch"),
+  TAB("tab")
+}
+
+internal data class ToggleableParams(
+  @Field val value: Boolean = false,
+  @Field val role: SemanticRoleType? = null
 ) : Record
 
 // endregion
@@ -191,6 +219,43 @@ object ModifierRegistry {
 
   private val modifierFactories: MutableMap<String, ModifierFactory> = mutableMapOf()
 
+  @Composable
+  private fun resolveShape(shape: BuiltinShapeRecord): Shape? {
+    return when (shape.type) {
+      BuiltinShapeType.RECTANGLE -> RectangleShape
+      BuiltinShapeType.CIRCLE -> CircleShape
+      BuiltinShapeType.ROUNDED_CORNER -> {
+        val hasPerCorner = shape.topStart != null || shape.topEnd != null || shape.bottomStart != null || shape.bottomEnd != null
+        if (hasPerCorner) {
+          RoundedCornerShape(
+            topStart = (shape.topStart ?: 0f).dp,
+            topEnd = (shape.topEnd ?: 0f).dp,
+            bottomStart = (shape.bottomStart ?: 0f).dp,
+            bottomEnd = (shape.bottomEnd ?: 0f).dp
+          )
+        } else {
+          RoundedCornerShape((shape.radius ?: 0f).dp)
+        }
+      }
+      BuiltinShapeType.CUT_CORNER -> {
+        val hasPerCorner = shape.topStart != null || shape.topEnd != null || shape.bottomStart != null || shape.bottomEnd != null
+        if (hasPerCorner) {
+          CutCornerShape(
+            topStart = (shape.topStart ?: 0f).dp,
+            topEnd = (shape.topEnd ?: 0f).dp,
+            bottomStart = (shape.bottomStart ?: 0f).dp,
+            bottomEnd = (shape.bottomEnd ?: 0f).dp
+          )
+        } else {
+          CutCornerShape((shape.radius ?: 0f).dp)
+        }
+      }
+      BuiltinShapeType.MATERIAL -> {
+        shape.name?.toRoundedPolygon()?.toShape()
+      }
+    }
+  }
+
   init {
     registerBuiltInModifiers()
   }
@@ -342,6 +407,48 @@ object ModifierRegistry {
       Modifier.rotate(params.degrees)
     }
 
+    register("graphicsLayer") { map, _, _, _ ->
+      val rotationX = resolveAnimatable(map, "rotationX", 0f)
+      val rotationY = resolveAnimatable(map, "rotationY", 0f)
+      val rotationZ = resolveAnimatable(map, "rotationZ", 0f)
+      val scaleX = resolveAnimatable(map, "scaleX", 1f)
+      val scaleY = resolveAnimatable(map, "scaleY", 1f)
+      val alphaVal = resolveAnimatable(map, "alpha", 1f)
+      val translationX = resolveAnimatable(map, "translationX", 0f)
+      val translationY = resolveAnimatable(map, "translationY", 0f)
+      val shadowElevation = resolveAnimatable(map, "shadowElevation", 0f)
+
+      // Non-animatable params parsed via Record
+      val params = recordFromMap<GraphicsLayerParams>(map)
+      val composeShape = params.shape?.let { resolveShape(it) } ?: RectangleShape
+      val compositingStrategy = when (params.compositingStrategy) {
+        CompositingStrategyType.OFFSCREEN -> CompositingStrategy.Offscreen
+        CompositingStrategyType.MODULATE -> CompositingStrategy.ModulateAlpha
+        else -> CompositingStrategy.Auto
+      }
+
+      val density = LocalDensity.current.density
+
+      Modifier.graphicsLayer {
+        this.rotationX = rotationX
+        this.rotationY = rotationY
+        this.rotationZ = rotationZ
+        this.scaleX = scaleX
+        this.scaleY = scaleY
+        this.alpha = alphaVal
+        this.translationX = translationX * density
+        this.translationY = translationY * density
+        this.cameraDistance = params.cameraDistance * density
+        this.shadowElevation = shadowElevation * density
+        this.transformOrigin = TransformOrigin(params.transformOriginX, params.transformOriginY)
+        this.clip = params.clip
+        this.shape = composeShape
+        this.compositingStrategy = compositingStrategy
+        params.ambientShadowColor?.let { this.ambientShadowColor = it.compose }
+        params.spotShadowColor?.let { this.spotShadowColor = it.compose }
+      }
+    }
+
     register("zIndex") { map, _, _, _ ->
       val params = recordFromMap<ZIndexParams>(map)
       Modifier.zIndex(params.index)
@@ -393,48 +500,23 @@ object ModifierRegistry {
     register("clip") { map, _, _, _ ->
       val params = recordFromMap<ClipParams>(map)
       params.shape?.let { shape ->
-        val composeShape = when (shape.type) {
-          BuiltinShapeType.RECTANGLE -> RectangleShape
-          BuiltinShapeType.CIRCLE -> CircleShape
-          BuiltinShapeType.ROUNDED_CORNER -> {
-            val hasPerCorner = shape.topStart != null || shape.topEnd != null || shape.bottomStart != null || shape.bottomEnd != null
-            if (hasPerCorner) {
-              RoundedCornerShape(
-                topStart = (shape.topStart ?: 0f).dp,
-                topEnd = (shape.topEnd ?: 0f).dp,
-                bottomStart = (shape.bottomStart ?: 0f).dp,
-                bottomEnd = (shape.bottomEnd ?: 0f).dp
-              )
-            } else {
-              RoundedCornerShape((shape.radius ?: 0f).dp)
-            }
-          }
-          BuiltinShapeType.CUT_CORNER -> {
-            val hasPerCorner = shape.topStart != null || shape.topEnd != null || shape.bottomStart != null || shape.bottomEnd != null
-            if (hasPerCorner) {
-              CutCornerShape(
-                topStart = (shape.topStart ?: 0f).dp,
-                topEnd = (shape.topEnd ?: 0f).dp,
-                bottomStart = (shape.bottomStart ?: 0f).dp,
-                bottomEnd = (shape.bottomEnd ?: 0f).dp
-              )
-            } else {
-              CutCornerShape((shape.radius ?: 0f).dp)
-            }
-          }
-          BuiltinShapeType.MATERIAL -> {
-            shape.name?.toRoundedPolygon()?.toShape()
-          }
-        }
-        composeShape?.let {
-          Modifier.clip(it)
-        }
+        resolveShape(shape)?.let { Modifier.clip(it) }
       } ?: Modifier
     }
 
-    register("clickable") { _, _, _, eventDispatcher ->
-      Modifier.clickable {
-        eventDispatcher("clickable", emptyMap())
+    register("clickable") { map, _, _, eventDispatcher ->
+      val params = recordFromMap<ClickableParams>(map)
+      if (params.indication) {
+        Modifier.clickable {
+          eventDispatcher("clickable", emptyMap())
+        }
+      } else {
+        Modifier.clickable(
+          interactionSource = null,
+          indication = null
+        ) {
+          eventDispatcher("clickable", emptyMap())
+        }
       }
     }
 
@@ -442,8 +524,35 @@ object ModifierRegistry {
       val params = recordFromMap<SelectableParams>(map)
       Modifier.selectable(
         selected = params.selected,
+        role = when (params.role) {
+          "radioButton" -> androidx.compose.ui.semantics.Role.RadioButton
+          "checkbox" -> androidx.compose.ui.semantics.Role.Checkbox
+          "switch" -> androidx.compose.ui.semantics.Role.Switch
+          "tab" -> androidx.compose.ui.semantics.Role.Tab
+          else -> null
+        },
         onClick = { eventDispatcher("selectable", emptyMap()) }
       )
     }
+
+    register("selectableGroup") { _, _, _, _ ->
+      Modifier.selectableGroup()
+    }
+
+    register("toggleable") { map, _, _, eventDispatcher ->
+      val params = recordFromMap<ToggleableParams>(map)
+      val role = when (params.role) {
+        SemanticRoleType.CHECKBOX -> Role.Checkbox
+        SemanticRoleType.RADIO_BUTTON -> Role.RadioButton
+        SemanticRoleType.SWITCH -> Role.Switch
+        SemanticRoleType.TAB -> Role.Tab
+        null -> null
+      }
+      Modifier.toggleable(
+        value = params.value,
+        role = role,
+        onValueChange = { eventDispatcher("toggleable", emptyMap()) }
+      )
+    }
   }
 }