Create Krail Ripple

taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/components/Button.kt

@@ -19,6 +19,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Dp
@@ -30,8 +31,10 @@ import xyz.ksharma.krail.taj.LocalTextColor
 import xyz.ksharma.krail.taj.LocalTextStyle
 import xyz.ksharma.krail.taj.LocalThemeColor
 import xyz.ksharma.krail.taj.hexToComposeColor
+import xyz.ksharma.krail.taj.modifier.klickable
 import xyz.ksharma.krail.taj.theme.KrailTheme
 import xyz.ksharma.krail.taj.theme.getForegroundColor
+import xyz.ksharma.krail.taj.theme.krailRipple
 import xyz.ksharma.krail.taj.themeBackgroundColor
 import xyz.ksharma.krail.taj.tokens.ContentAlphaTokens.DisabledContentAlpha
 import xyz.ksharma.krail.taj.tokens.ContentAlphaTokens.EnabledContentAlpha
@@ -148,23 +151,14 @@ fun TextButton(
     ) {
         Box(
             modifier = modifier
-                .then(
-                    when (dimensions) {
-                        ButtonDefaults.largeButtonSize() -> Modifier.fillMaxWidth()
-                        else -> Modifier
-                    }
-                )
-                .clickable(
-                    role = Role.Button,
-                    interactionSource = remember { MutableInteractionSource() },
-                    enabled = enabled,
-                    indication = null,
-                    onClick = onClick,
-                )
                 .heightIn(dimensions.height)
+                .clip(dimensions.shape)
                 .background(
                     color = Color.Transparent,
                     shape = dimensions.shape,
+                ).klickable(
+                    enabled = enabled,
+                    onClick = onClick,
                 )
                 .padding(dimensions.padding),
             contentAlignment = Alignment.Center,

taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/modifier/Klickable.kt

@@ -0,0 +1,43 @@
+package xyz.ksharma.krail.taj.modifier
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.Role
+import xyz.ksharma.krail.taj.LocalThemeColor
+import xyz.ksharma.krail.taj.hexToComposeColor
+import xyz.ksharma.krail.taj.theme.getForegroundColor
+import xyz.ksharma.krail.taj.theme.krailRipple
+
+/**
+ * Adds a click listener to the Modifier with a custom ripple effect.
+ * This method is used when you need a custom ripple effect with a clickable element.
+ *
+ * @param role The role of the clickable element.
+ * @param enabled Whether the clickable element is enabled.
+ * @param onClick The callback to be invoked when the element is clicked.
+
+ * @return The modified Modifier with the click listener and custom ripple effect.
+ */
+@Composable
+fun Modifier.klickable(
+    role: Role = Role.Button,
+    enabled: Boolean = true,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    onClick: () -> Unit,
+): Modifier {
+    val themeColorHex by LocalThemeColor.current
+    val themeColor by remember { mutableStateOf(themeColorHex.hexToComposeColor()) }
+
+    return this.clickable(
+        role = role,
+        interactionSource = interactionSource,
+        enabled = enabled,
+        indication = krailRipple(color = themeColor),
+        onClick = onClick,
+    )
+}

taj/src/commonMain/kotlin/xyz/ksharma/krail/taj/theme/KrailRipple.kt

@@ -0,0 +1,26 @@
+package xyz.ksharma.krail.taj.theme
+
+import androidx.compose.foundation.IndicationNodeFactory
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Stable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorProducer
+import androidx.compose.ui.unit.Dp
+
+@Stable
+fun krailRipple(
+    bounded: Boolean = true,
+    radius: Dp = Dp.Unspecified,
+    color: Color = Color.Unspecified
+): IndicationNodeFactory {
+    return ripple(bounded, radius, color)
+}
+
+@Stable
+fun krailRipple(
+    color: ColorProducer,
+    bounded: Boolean = true,
+    radius: Dp = Dp.Unspecified
+): IndicationNodeFactory {
+    return ripple(color, bounded, radius)
+}