feat(ui): add CornerBasedShape.inset() and use for concentric SlideToConfirm thumb

Add a reusable Shape.inset(Dp) extension that computes concentric
corner radii for nested rounded rectangles. Use it in SlideToConfirm
so the thumb corners run parallel to the track.

Signed-off-by: Brandon McAnsh <git@bmcreations.dev>

Author: bmc08gt

ui/components/src/main/kotlin/com/getcode/ui/components/SlideToConfirm.kt

@@ -44,6 +44,7 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.foundation.shape.CornerBasedShape
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.lerp
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
@@ -61,6 +62,7 @@ import com.getcode.theme.CodeTheme
 import com.getcode.theme.DesignSystem
 import com.getcode.theme.White20
 import com.getcode.theme.White50
+import com.getcode.theme.inset
 import com.getcode.ui.theme.CodeCircularProgressIndicator
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.delay
@@ -99,8 +101,6 @@ private object Thumb {
     val Size: Dp
         @Composable get() = CodeTheme.dimens.grid.x12
     val Color = androidx.compose.ui.graphics.Color.White
-    val Shape: Shape
-        @Composable get() = CodeTheme.shapes.small
 }
 
 private object Track {
@@ -146,7 +146,6 @@ fun SlideToConfirm(
     modifier: Modifier = Modifier,
     trackShape: Shape = Track.Shape,
     trackColor: Color = Track.Color,
-    thumbShape: Shape = Thumb.Shape,
     enabled: Boolean = true,
     isLoading: Boolean = false,
     isSuccess: Boolean = false,
@@ -167,6 +166,7 @@ fun SlideToConfirm(
     val density = LocalDensity.current
     val thumbSize = Thumb.Size
     val horizontalPadding = CodeTheme.dimens.grid.x1
+    val thumbShape = (trackShape as? CornerBasedShape)?.inset(horizontalPadding) ?: trackShape
     val overhead = with(density) { (2 * horizontalPadding + thumbSize).toPx() }
 
     val swipeState = remember {
@@ -352,7 +352,7 @@ private fun Thumb(
     modifier: Modifier = Modifier,
     size: Dp = Thumb.Size,
     color: Color = Thumb.Color,
-    shape: Shape = Thumb.Shape,
+    shape: Shape = Track.Shape,
 ) {
     Box(
         modifier = modifier

ui/theme/src/main/kotlin/com/getcode/theme/Shape.kt

@@ -1,11 +1,16 @@
 package com.getcode.theme
 
 import androidx.compose.foundation.shape.CornerBasedShape
+import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Shapes
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.max
 import com.getcode.view.shapes.TriangleCutShape
 
 internal val shapes = Shapes(
@@ -26,3 +31,22 @@ val Shapes.xxl: CornerBasedShape
 @Composable
 fun Shapes.receipt(step: Dp = CodeTheme.dimens.grid.x2) = TriangleCutShape(step)
 
+/**
+ * Returns a new [RoundedCornerShape] whose corners are concentric with this shape,
+ * inset by [inset]. Useful for nested rounded rectangles (e.g. a thumb inside a track)
+ * where the inner corners should run parallel to the outer ones.
+ */
+@Composable
+fun CornerBasedShape.inset(inset: Dp): RoundedCornerShape {
+    val density = LocalDensity.current
+    // Use a large reference size so percentage-based CornerSizes resolve to absolute values.
+    val ref = Size(10_000f, 10_000f)
+    fun CornerSize.shrink(): Dp = max(0.dp, with(density) { toPx(ref, this).toDp() } - inset)
+    return RoundedCornerShape(
+        topStart = topStart.shrink(),
+        topEnd = topEnd.shrink(),
+        bottomEnd = bottomEnd.shrink(),
+        bottomStart = bottomStart.shrink(),
+    )
+}
+