@expo/ui 55.0.1 → 55.0.3

package/android/src/main/java/expo/modules/ui/button/Button.kt

@@ -1,24 +1,16 @@
 package expo.modules.ui.button
 
 import android.graphics.Color
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ElevatedButton
 import androidx.compose.material3.FilledTonalButton
-import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.unit.dp
 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
@@ -26,180 +18,147 @@ import expo.modules.ui.ModifierList
 import expo.modules.ui.ModifierRegistry
 import expo.modules.ui.ShapeRecord
 import expo.modules.ui.compose
-import expo.modules.ui.getImageVector
-import expo.modules.ui.menu.LocalContextMenuExpanded
 import expo.modules.ui.shapeFromShapeRecord
 import java.io.Serializable
 
 open class ButtonPressedEvent() : Record, Serializable
 
-enum class ButtonVariant(val value: String) : Enumerable {
-  DEFAULT("default"),
-  BORDERED("bordered"),
-  BORDERLESS("borderless"),
-  OUTLINED("outlined"),
-  ELEVATED("elevated")
-}
-
 class ButtonColors : Record {
-  @Field
-  val containerColor: Color? = null
-
-  @Field
-  val contentColor: Color? = null
-
-  @Field
-  val disabledContainerColor: Color? = null
+  @Field val containerColor: Color? = null
+  @Field val contentColor: Color? = null
+  @Field val disabledContainerColor: Color? = null
+  @Field val disabledContentColor: Color? = null
+}
 
-  @Field
-  val disabledContentColor: Color? = null
+class ContentPaddingRecord : Record {
+  @Field val start: Double? = null
+  @Field val top: Double? = null
+  @Field val end: Double? = null
+  @Field val bottom: Double? = null
 }
 
+fun ContentPaddingRecord.toPaddingValues(): PaddingValues =
+  PaddingValues(
+    start = start?.dp ?: ButtonDefaults.ContentPadding.calculateLeftPadding(androidx.compose.ui.unit.LayoutDirection.Ltr),
+    top = top?.dp ?: ButtonDefaults.ContentPadding.calculateTopPadding(),
+    end = end?.dp ?: ButtonDefaults.ContentPadding.calculateRightPadding(androidx.compose.ui.unit.LayoutDirection.Ltr),
+    bottom = bottom?.dp ?: ButtonDefaults.ContentPadding.calculateBottomPadding()
+  )
+
 data class ButtonProps(
-  val text: String = "",
-  val variant: ButtonVariant? = ButtonVariant.DEFAULT,
-  val elementColors: ButtonColors = ButtonColors(),
-  val leadingIcon: String? = null,
-  val trailingIcon: String? = null,
-  val disabled: Boolean? = false,
+  val colors: ButtonColors = ButtonColors(),
+  val enabled: Boolean = true,
+  val contentPadding: ContentPaddingRecord? = null,
   val shape: ShapeRecord? = null,
   val modifiers: ModifierList = emptyList()
 ) : ComposeProps
 
 @Composable
-fun StyledButton(
-  variant: ButtonVariant,
-  colors: ButtonColors,
-  disabled: Boolean,
-  onPress: () -> Unit,
-  modifier: Modifier = Modifier,
-  shape: Shape?,
-  content: @Composable (RowScope.() -> Unit)
+fun FunctionalComposableScope.ButtonContent(
+  props: ButtonProps,
+  onClick: (ButtonPressedEvent) -> Unit
 ) {
-  when (variant) {
-    ButtonVariant.BORDERED -> FilledTonalButton(
-      onPress,
-      enabled = !disabled,
-      content = content,
-      colors = ButtonDefaults.filledTonalButtonColors(
-        containerColor = colors.containerColor.compose,
-        contentColor = colors.contentColor.compose,
-        disabledContainerColor = colors.disabledContainerColor.compose,
-        disabledContentColor = colors.disabledContentColor.compose
-      ),
-      shape = shape ?: ButtonDefaults.filledTonalShape,
-      modifier = modifier
-    )
-
-    ButtonVariant.BORDERLESS -> TextButton(
-      onPress,
-      enabled = !disabled,
-      content = content,
-      colors = ButtonDefaults.textButtonColors(
-        containerColor = colors.containerColor.compose,
-        contentColor = colors.contentColor.compose,
-        disabledContainerColor = colors.disabledContainerColor.compose,
-        disabledContentColor = colors.disabledContentColor.compose
-      ),
-      shape = shape ?: ButtonDefaults.textShape,
-      modifier = modifier
-    )
-
-    ButtonVariant.OUTLINED -> OutlinedButton(
-      onPress,
-      enabled = !disabled,
-      content = content,
-      colors = ButtonDefaults.outlinedButtonColors(
-        containerColor = colors.containerColor.compose,
-        contentColor = colors.contentColor.compose,
-        disabledContainerColor = colors.disabledContainerColor.compose,
-        disabledContentColor = colors.disabledContentColor.compose
-      ),
-      shape = shape ?: ButtonDefaults.outlinedShape,
-      modifier = modifier
-    )
-
-    ButtonVariant.ELEVATED -> ElevatedButton(
-      onPress,
-      enabled = !disabled,
-      content = content,
-      colors = ButtonDefaults.elevatedButtonColors(
-        containerColor = colors.containerColor.compose,
-        contentColor = colors.contentColor.compose,
-        disabledContainerColor = colors.disabledContainerColor.compose,
-        disabledContentColor = colors.disabledContentColor.compose
-      ),
-      shape = shape ?: ButtonDefaults.elevatedShape,
-      modifier = modifier
-    )
-
-    else -> androidx.compose.material3.Button(
-      onPress,
-      enabled = !disabled,
-      content = content,
-      colors = ButtonDefaults.buttonColors(
-        containerColor = colors.containerColor.compose,
-        contentColor = colors.contentColor.compose,
-        disabledContainerColor = colors.disabledContainerColor.compose,
-        disabledContentColor = colors.disabledContentColor.compose
-      ),
-      shape = shape ?: ButtonDefaults.shape,
-      modifier = modifier
-    )
+  androidx.compose.material3.Button(
+    onClick = { onClick(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    contentPadding = props.contentPadding?.toPaddingValues() ?: ButtonDefaults.ContentPadding,
+    colors = ButtonDefaults.buttonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shapeFromShapeRecord(props.shape) ?: ButtonDefaults.shape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope(rowScope = this))
   }
 }
 
 @Composable
-fun FunctionalComposableScope.ButtonContent(
+fun FunctionalComposableScope.FilledTonalButtonContent(
   props: ButtonProps,
-  onButtonPressed: (ButtonPressedEvent) -> Unit
+  onClick: (ButtonPressedEvent) -> Unit
 ) {
-  val variant = props.variant
-  val text = props.text
-  val colors = props.elementColors
-  val leadingIcon = props.leadingIcon
-  val trailingIcon = props.trailingIcon
-  val disabled = props.disabled
-
-  // Check if this Button is inside a ContextMenu
-  val contextMenuExpanded = LocalContextMenuExpanded.current
+  FilledTonalButton(
+    onClick = { onClick(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    contentPadding = props.contentPadding?.toPaddingValues() ?: ButtonDefaults.ContentPadding,
+    colors = ButtonDefaults.filledTonalButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shapeFromShapeRecord(props.shape) ?: ButtonDefaults.filledTonalShape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope(rowScope = this))
+  }
+}
 
-  StyledButton(
-    variant ?: ButtonVariant.DEFAULT,
-    colors,
-    disabled ?: false,
-    onPress = {
-      // If inside ContextMenu, expand the menu
-      contextMenuExpanded?.let { it.value = true }
-      // Also fire the button pressed event
-      onButtonPressed(ButtonPressedEvent())
-    },
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
-    shape = shapeFromShapeRecord(props.shape)
+@Composable
+fun FunctionalComposableScope.OutlinedButtonContent(
+  props: ButtonProps,
+  onClick: (ButtonPressedEvent) -> Unit
+) {
+  OutlinedButton(
+    onClick = { onClick(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    contentPadding = props.contentPadding?.toPaddingValues() ?: ButtonDefaults.ContentPadding,
+    colors = ButtonDefaults.outlinedButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shapeFromShapeRecord(props.shape) ?: ButtonDefaults.outlinedShape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
   ) {
-    Row(verticalAlignment = Alignment.CenterVertically) {
-      Children(ComposableScope(rowScope = this))
-      leadingIcon?.let { iconName ->
-        getImageVector(iconName)?.let {
-          Icon(
-            it,
-            contentDescription = iconName,
-            modifier = Modifier.padding(end = 8.dp)
-          )
-        }
-      }
+    Children(ComposableScope(rowScope = this))
+  }
+}
 
-      Text(text)
+@Composable
+fun FunctionalComposableScope.ElevatedButtonContent(
+  props: ButtonProps,
+  onClick: (ButtonPressedEvent) -> Unit
+) {
+  ElevatedButton(
+    onClick = { onClick(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    contentPadding = props.contentPadding?.toPaddingValues() ?: ButtonDefaults.ContentPadding,
+    colors = ButtonDefaults.elevatedButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shapeFromShapeRecord(props.shape) ?: ButtonDefaults.elevatedShape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope(rowScope = this))
+  }
+}
 
-      trailingIcon?.let { iconName ->
-        getImageVector(iconName)?.let {
-          Icon(
-            it,
-            contentDescription = iconName,
-            modifier = Modifier.padding(start = 8.dp)
-          )
-        }
-      }
-    }
+@Composable
+fun FunctionalComposableScope.TextButtonContent(
+  props: ButtonProps,
+  onClick: (ButtonPressedEvent) -> Unit
+) {
+  TextButton(
+    onClick = { onClick(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    contentPadding = props.contentPadding?.toPaddingValues() ?: ButtonDefaults.TextButtonContentPadding,
+    colors = ButtonDefaults.textButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shapeFromShapeRecord(props.shape) ?: ButtonDefaults.textShape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope(rowScope = this))
   }
 }

package/android/src/main/java/expo/modules/ui/button/FloatingActionButton.kt

@@ -0,0 +1,92 @@
+package expo.modules.ui.button
+
+import android.graphics.Color
+import androidx.compose.material3.ExtendedFloatingActionButton
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.material3.LargeFloatingActionButton
+import androidx.compose.material3.SmallFloatingActionButton
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.types.Enumerable
+import expo.modules.kotlin.views.ComposableScope
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.ui.ModifierList
+import expo.modules.ui.ModifierRegistry
+import expo.modules.ui.compose
+import expo.modules.ui.findChildSlotView
+
+enum class FloatingActionButtonVariant(val value: String) : Enumerable {
+  SMALL("small"),
+  MEDIUM("medium"),
+  LARGE("large"),
+  EXTENDED("extended")
+}
+
+data class FloatingActionButtonProps(
+  val variant: FloatingActionButtonVariant = FloatingActionButtonVariant.MEDIUM,
+  val expanded: Boolean = true,
+  val containerColor: Color? = null,
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.FloatingActionButtonContent(
+  props: FloatingActionButtonProps,
+  onClick: () -> Unit
+) {
+  val containerColor = props.containerColor?.compose ?: FloatingActionButtonDefaults.containerColor
+  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+
+  val iconSlotView = findChildSlotView(view, "icon")
+  val iconContent: (@Composable () -> Unit) = iconSlotView?.let {
+    {
+      with(ComposableScope()) {
+        with(it) {
+          Content()
+        }
+      }
+    }
+  } ?: {}
+
+  when (props.variant) {
+    FloatingActionButtonVariant.SMALL -> SmallFloatingActionButton(
+      onClick = onClick,
+      containerColor = containerColor,
+      modifier = modifier,
+      content = iconContent
+    )
+    FloatingActionButtonVariant.LARGE -> LargeFloatingActionButton(
+      onClick = onClick,
+      containerColor = containerColor,
+      modifier = modifier,
+      content = iconContent
+    )
+    FloatingActionButtonVariant.EXTENDED -> {
+      val textSlotView = findChildSlotView(view, "text")
+      val textContent: (@Composable () -> Unit) = textSlotView?.let {
+        {
+          with(ComposableScope()) {
+            with(it) {
+              Content()
+            }
+          }
+        }
+      } ?: {}
+      ExtendedFloatingActionButton(
+        onClick = onClick,
+        expanded = props.expanded,
+        icon = iconContent,
+        text = textContent,
+        containerColor = containerColor,
+        modifier = modifier
+      )
+    }
+    FloatingActionButtonVariant.MEDIUM -> FloatingActionButton(
+      onClick = onClick,
+      containerColor = containerColor,
+      modifier = modifier,
+      content = iconContent
+    )
+  }
+}

package/android/src/main/java/expo/modules/ui/button/IconButton.kt

@@ -1,107 +1,100 @@
 package expo.modules.ui.button
 
-import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.FilledIconButton
 import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.OutlinedIconButton
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Shape
-import expo.modules.kotlin.types.Enumerable
 import expo.modules.kotlin.views.ComposableScope
-import expo.modules.kotlin.views.ComposeProps
 import expo.modules.kotlin.views.FunctionalComposableScope
-import expo.modules.ui.ModifierList
 import expo.modules.ui.ModifierRegistry
-import expo.modules.ui.ShapeRecord
 import expo.modules.ui.compose
 import expo.modules.ui.shapeFromShapeRecord
 
-enum class IconButtonVariant(val value: String) : Enumerable {
-  DEFAULT("default"),
-  BORDERED("bordered"),
-  OUTLINED("outlined")
+@Composable
+fun FunctionalComposableScope.IconButtonContent(
+  props: ButtonProps,
+  onButtonPressed: (ButtonPressedEvent) -> Unit
+) {
+  val shape = shapeFromShapeRecord(props.shape)
+  IconButton(
+    onClick = { onButtonPressed(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    colors = IconButtonDefaults.iconButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shape ?: IconButtonDefaults.standardShape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope())
+  }
 }
 
-data class IconButtonProps(
-  val variant: IconButtonVariant? = IconButtonVariant.DEFAULT,
-  val elementColors: ButtonColors = ButtonColors(),
-  val disabled: Boolean? = false,
-  val shape: ShapeRecord? = null,
-  val modifiers: ModifierList = emptyList()
-) : ComposeProps
-
 @Composable
-fun StyledIconButton(
-  variant: IconButtonVariant,
-  colors: ButtonColors,
-  disabled: Boolean,
-  onPress: () -> Unit,
-  modifier: Modifier = Modifier,
-  shape: Shape?,
-  content: @Composable (() -> Unit)
+fun FunctionalComposableScope.FilledIconButtonContent(
+  props: ButtonProps,
+  onButtonPressed: (ButtonPressedEvent) -> Unit
 ) {
-  when (variant) {
-    IconButtonVariant.BORDERED -> FilledTonalIconButton(
-      onPress,
-      enabled = !disabled,
-      content = content,
-      colors = IconButtonDefaults.filledTonalIconButtonColors(
-        containerColor = colors.containerColor.compose,
-        contentColor = colors.contentColor.compose,
-        disabledContainerColor = colors.disabledContainerColor.compose,
-        disabledContentColor = colors.disabledContentColor.compose
-      ),
-      shape = shape ?: ButtonDefaults.filledTonalShape,
-      modifier = modifier
-    )
-
-    IconButtonVariant.OUTLINED -> OutlinedIconButton(
-      onPress,
-      enabled = !disabled,
-      content = content,
-      colors = IconButtonDefaults.outlinedIconButtonColors(
-        containerColor = colors.containerColor.compose,
-        contentColor = colors.contentColor.compose,
-        disabledContainerColor = colors.disabledContainerColor.compose,
-        disabledContentColor = colors.disabledContentColor.compose
-      ),
-      shape = shape ?: ButtonDefaults.outlinedShape,
-      modifier = modifier
-    )
-
-    else -> IconButton(
-      onPress,
-      enabled = !disabled,
-      content = content,
-      colors = IconButtonDefaults.iconButtonColors(
-        containerColor = colors.containerColor.compose,
-        contentColor = colors.contentColor.compose,
-        disabledContainerColor = colors.disabledContainerColor.compose,
-        disabledContentColor = colors.disabledContentColor.compose
-      ),
-      modifier = modifier
-    )
+  val shape = shapeFromShapeRecord(props.shape)
+  FilledIconButton(
+    onClick = { onButtonPressed(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    colors = IconButtonDefaults.filledIconButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shape ?: IconButtonDefaults.filledShape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope())
   }
 }
 
 @Composable
-fun FunctionalComposableScope.IconButtonContent(
-  props: IconButtonProps,
+fun FunctionalComposableScope.FilledTonalIconButtonContent(
+  props: ButtonProps,
   onButtonPressed: (ButtonPressedEvent) -> Unit
 ) {
-  val variant = props.variant
-  val colors = props.elementColors
-  val disabled = props.disabled
+  val shape = shapeFromShapeRecord(props.shape)
+  FilledTonalIconButton(
+    onClick = { onButtonPressed(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    colors = IconButtonDefaults.filledTonalIconButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shape ?: IconButtonDefaults.filledShape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
+  ) {
+    Children(ComposableScope())
+  }
+}
 
-  StyledIconButton(
-    variant ?: IconButtonVariant.DEFAULT,
-    colors,
-    disabled ?: false,
-    onPress = { onButtonPressed(ButtonPressedEvent()) },
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
-    shape = shapeFromShapeRecord(props.shape)
+@Composable
+fun FunctionalComposableScope.OutlinedIconButtonContent(
+  props: ButtonProps,
+  onButtonPressed: (ButtonPressedEvent) -> Unit
+) {
+  val shape = shapeFromShapeRecord(props.shape)
+  OutlinedIconButton(
+    onClick = { onButtonPressed(ButtonPressedEvent()) },
+    enabled = props.enabled,
+    colors = IconButtonDefaults.outlinedIconButtonColors(
+      containerColor = props.colors.containerColor.compose,
+      contentColor = props.colors.contentColor.compose,
+      disabledContainerColor = props.colors.disabledContainerColor.compose,
+      disabledContentColor = props.colors.disabledContentColor.compose
+    ),
+    shape = shape ?: IconButtonDefaults.outlinedShape,
+    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
   ) {
     Children(ComposableScope())
   }

package/android/src/main/java/expo/modules/ui/convertibles/AnimatableFloat.kt

@@ -0,0 +1,26 @@
+package expo.modules.ui.convertibles
+
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.snap
+import androidx.compose.animation.core.spring
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+
+@Composable
+fun resolveAnimatable(map: Map<String, Any?>, key: String, default: Float): Float {
+  val raw = map[key]
+  val targetValue = when {
+    raw is Number -> raw.toFloat()
+    raw is Map<*, *> && raw["\$animated"] == true ->
+      (raw["targetValue"] as Number).toFloat()
+    else -> default
+  }
+  val spec: AnimationSpec<Float> = when {
+    raw is Map<*, *> && raw["\$animated"] == true ->
+      parseAnimationSpec(raw["animationSpec"]) ?: spring()
+    else -> snap()
+  }
+  val animated by animateFloatAsState(targetValue, spec, label = key)
+  return animated
+}