library: Add 'Sink' and 'Tilt' press feedback effects to Card

docs/components/card.md

@@ -1,16 +1,17 @@
 # Card
 
-`Card` is a basic container component in Miuix, used to hold related content and actions. It provides a card container with Miuix style, suitable for scenarios such as information display and content grouping.
+`Card` is a basic container component in Miuix, used to hold related content and actions. It provides a card container with Miuix style, suitable for scenarios such as information display and content grouping. Supports both static display and interactive modes.
 
 ## Import
 
 ```kotlin
 import top.yukonga.miuix.kmp.basic.Card
+import top.yukonga.miuix.kmp.utils.PressFeedbackType // If using interactive card
 ```
 
 ## Basic Usage
 
-The Card component can be used to wrap and organize content:
+The Card component can be used to wrap and organize content (static card):
 
 ```kotlin
 Card {
@@ -22,30 +23,38 @@ Card {
 
 ### Card Properties
 
-| Property Name | Type                               | Description              | Default Value               | Required |
-| ------------- | ---------------------------------- | ------------------------ | --------------------------- | -------- |
-| modifier      | Modifier                           | Modifier applied to card | Modifier                    | No       |
-| cornerRadius  | Dp                                 | Card corner radius       | CardDefaults.CornerRadius   | No       |
-| insideMargin  | PaddingValues                      | Card inner padding       | CardDefaults.InsideMargin   | No       |
-| color         | Color                              | Card background color    | CardDefaults.DefaultColor() | No       |
-| content       | @Composable ColumnScope.() -> Unit | Composable function for card content area | - | Yes |
+| Property Name     | Type                               | Description                               | Default Value               | Required | Applies To  |
+| ----------------- | ---------------------------------- | ----------------------------------------- | --------------------------- | -------- | ----------- |
+| modifier          | Modifier                           | Modifier applied to the card              | Modifier                    | No       | All         |
+| cornerRadius      | Dp                                 | Card corner radius                        | CardDefaults.CornerRadius   | No       | All         |
+| insideMargin      | PaddingValues                      | Card inner padding                        | CardDefaults.InsideMargin   | No       | All         |
+| color             | Color                              | Card background color                     | CardDefaults.DefaultColor() | No       | All         |
+| pressFeedbackType | PressFeedbackType                  | Feedback type when pressed                | PressFeedbackType.None      | No       | Interactive |
+| showIndication    | Boolean?                           | Show indication on interaction            | false                       | No       | Interactive |
+| onClick           | (() -> Unit)?                      | Callback when clicked                     | null                        | No       | Interactive |
+| onLongPress       | (() -> Unit)?                      | Callback when long pressed                | null                        | No       | Interactive |
+| content           | @Composable ColumnScope.() -> Unit | Composable function for card content area | -                           | Yes      | All         |
+
+::: warning
+Some properties are only available when creating an interactive card!
+:::
 
 ### CardDefaults Object
 
 The CardDefaults object provides default values and color configurations for the card component.
 
 #### Constants
 
-| Constant Name | Type          | Description        | Default Value         |
-| ------------- | ------------- | ------------------ | --------------------- |
-| CornerRadius  | Dp            | Card corner radius | 16.dp                 |
-| InsideMargin  | PaddingValues | Card inner padding | PaddingValues(0.dp)   |
+| Constant Name | Type          | Description        | Default Value       |
+| ------------- | ------------- | ------------------ | ------------------- |
+| CornerRadius  | Dp            | Card corner radius | 16.dp               |
+| InsideMargin  | PaddingValues | Card inner padding | PaddingValues(0.dp) |
 
 #### Methods
 
-| Method Name    | Type  | Description               |
-| -------------- | ----- | ------------------------- |
-| DefaultColor() | Color | Creates the default color for the card |
+| Method Name    | Type  | Description                               |
+| -------------- | ----- | ----------------------------------------- |
+| DefaultColor() | Color | The default background color for the card |
 
 ## Advanced Usage
 
@@ -111,3 +120,17 @@ LazyColumn {
     }
 }
 ```
+
+### Interactive Card
+
+```kotlin
+Card(
+    modifier = Modifier.padding(16.dp),
+    pressFeedbackType = PressFeedbackType.Sink, // Set press feedback to sink effect
+    showIndication = true, // Show indication on click
+    onClick = {/* Handle click event */ },
+    onLongPress = {/* Handle long press event */ }
+) {
+    Text("Interactive Card")
+}
+```

docs/guide/utils.md

@@ -105,6 +105,82 @@ LazyColumn(
 *   `springDamp`: Float, defines the spring damping for the rebound animation. Higher values result in less oscillation. Defaults to `1f`.
 *   `isEnabled`: A lambda expression returning a Boolean, used to dynamically control whether the overscroll effect is enabled. By default, it is enabled only on Android and iOS platforms.
 
+## Press Feedback Effects
+
+Miuix provides visual feedback effects to enhance user interaction experience, improving operability through tactile-like responses.
+
+### Sink Effect
+
+The `pressSink` modifier applies a "sink" visual feedback when the component is pressed, by smoothly scaling down the component.
+
+```kotlin
+val interactionSource = remember { MutableInteractionSource() }
+
+Box(
+    modifier = Modifier
+        .clickable(interactionSource = interactionSource, indication = null)
+        .pressSink(interactionSource)
+        .background(Color.Blue)
+        .size(100.dp)
+)
+```
+
+### Tilt Effect
+
+The `pressTilt` modifier applies a "tilt" effect based on the position where the user pressed the component. The tilt direction is determined by touch offset, giving the effect that one corner "sinks" while the other "static".
+
+```kotlin
+val interactionSource = remember { MutableInteractionSource() }
+
+Box(
+    modifier = Modifier
+        .clickable(interactionSource = interactionSource, indication = null)
+        .pressTilt(interactionSource)
+        .background(Color.Green)
+        .size(100.dp)
+)
+```
+
+### Prerequisites for Triggering Press Feedback
+
+Press feedback effects require detecting `interactionSource.collectIsPressedAsState()` to be triggered.
+
+You can use responsive modifiers like `Modifier.clickable()` to add `PressInteraction.Press` to the `interactionSource` and trigger press feedback effects.
+
+However, it's recommended to use the method below to add `PressInteraction.Press` to the `interactionSource` for faster response triggering of press feedback effects.
+
+```kotlin
+val interactionSource = remember { MutableInteractionSource() }
+
+Box(
+    modifier = Modifier
+        .pointerInput(Unit) {
+            awaitEachGesture {
+                val pressInteraction: PressInteraction.Press
+                awaitFirstDown().also {
+                    pressInteraction = PressInteraction.Press(it.position)
+                    interactionSource.tryEmit(pressInteraction)
+                }
+                if (waitForUpOrCancellation() == null) {
+                    interactionSource.tryEmit(PressInteraction.Cancel(pressInteraction))
+                } else {
+                    interactionSource.tryEmit(PressInteraction.Release(pressInteraction))
+                }
+            }
+        }
+)
+```
+
+### Press Feedback Type (`PressFeedbackType`)
+
+The `PressFeedbackType` enum defines different types of visual feedback that can be applied when the component is pressed.
+
+| Type | Description |
+|------|-------------|
+| None | No visual feedback |
+| Sink | Applies a sink effect, where the component scales down slightly when pressed |
+| Tilt | Applies a tilt effect, where the component tilts slightly based on the touch position |
+
 ## Smooth Rounded Corners (SmoothRoundedCornerShape)
 
 `SmoothRoundedCornerShape` provides smoother rounded corners compared to the standard `RoundedCornerShape`.

docs/zh_CN/components/card.md

@@ -1,16 +1,17 @@
 # Card
 
-`Card` 是 Miuix 中的基础容器组件，用于承载相关内容和操作。它提供了具有 Miuix 风格的卡片容器，适用于信息展示、内容分组等场景。
+`Card` 是 Miuix 中的基础容器组件，用于承载相关内容和操作。它提供了具有 Miuix 风格的卡片容器，适用于信息展示、内容分组等场景。支持静态显示和交互式两种模式。
 
 ## 引入
 
 ```kotlin
 import top.yukonga.miuix.kmp.basic.Card
+import top.yukonga.miuix.kmp.utils.PressFeedbackType // 如果使用交互式卡片
 ```
 
 ## 基本用法
 
-Card 组件可以用于包装和组织内容：
+Card 组件可以用于包装和组织内容（静态卡片）：
 
 ```kotlin
 Card {
@@ -22,13 +23,22 @@ Card {
 
 ### Card 属性
 
-| 属性名       | 类型                               | 说明                     | 默认值                      | 是否必须 |
-| ------------ | ---------------------------------- | ------------------------ | --------------------------- | -------- |
-| modifier     | Modifier                           | 应用于卡片的修饰符       | Modifier                    | 否       |
-| cornerRadius | Dp                                 | 卡片圆角半径             | CardDefaults.CornerRadius   | 否       |
-| insideMargin | PaddingValues                      | 卡片内部边距             | CardDefaults.InsideMargin   | 否       |
-| color        | Color                              | 卡片背景颜色             | CardDefaults.DefaultColor() | 否       |
-| content      | @Composable ColumnScope.() -> Unit | 卡片内容区域的可组合函数 | -                           | 是       |
+
+| 属性名            | 类型                               | 说明                     | 默认值                      | 是否必须 | 适用范围 |
+| ----------------- | ---------------------------------- | ------------------------ | --------------------------- | -------- | -------- |
+| modifier          | Modifier                           | 应用于卡片的修饰符       | Modifier                    | 否       | 所有     |
+| cornerRadius      | Dp                                 | 卡片圆角半径             | CardDefaults.CornerRadius   | 否       | 所有     |
+| insideMargin      | PaddingValues                      | 卡片内部边距             | CardDefaults.InsideMargin   | 否       | 所有     |
+| color             | Color                              | 卡片背景颜色             | CardDefaults.DefaultColor() | 否       | 所有     |
+| pressFeedbackType | PressFeedbackType                  | 按压反馈类型             | PressFeedbackType.None      | 否       | 交互式   |
+| showIndication    | Boolean?                           | 显示点击指示效果         | false                       | 否       | 交互式   |
+| onClick           | (() -> Unit)?                      | 点击事件回调             | null                        | 否       | 交互式   |
+| onLongPress       | (() -> Unit)?                      | 长按事件回调             | null                        | 否       | 交互式   |
+| content           | @Composable ColumnScope.() -> Unit | 卡片内容区域的可组合函数 | -                           | 是       | 所有     |
+
+::: warning 注意
+部分属性仅在创建可交互的卡片时可用！
+:::
 
 ### CardDefaults 对象
 
@@ -45,7 +55,7 @@ CardDefaults 对象提供了卡片组件的默认值和颜色配置。
 
 | 方法名         | 类型  | 说明               |
 | -------------- | ----- | ------------------ |
-| DefaultColor() | Color | 创建卡片的默认颜色 |
+| DefaultColor() | Color | 卡片的默认背景颜色 |
 
 ## 进阶用法
 
@@ -89,7 +99,7 @@ Card(
         TextButton(
             text = "确定",
             colors = ButtonDefaults.textButtonColorsPrimary(), // 使用主题颜色
-            onClick = { /* 处理取消事件 */ }
+            onClick = { /* 处理确认事件 */ }
         )
     }
 }
@@ -111,3 +121,17 @@ LazyColumn {
     }
 }
 ```
+
+### 可交互的卡片
+
+```kotlin
+Card(
+    modifier = Modifier.padding(16.dp),
+    pressFeedbackType = PressFeedbackType.Sink, // 设置按压反馈为下沉动画效果
+    showIndication = true, // 显示点击时的视觉反馈效果
+    onClick = { /* 处理点击事件 */ },
+    onLongPress = { /* 处理长按事件 */ }
+) {
+    Text("可交互的卡片")
+}
+```

docs/zh_CN/guide/utils.md

@@ -106,6 +106,82 @@ LazyColumn(
 *   `springDamp`: 浮点数，定义回弹动画的弹簧阻尼。值越高，振荡越小。默认为 `1f`。
 *   `isEnabled`: 一个返回布尔值的 Lambda 表达式，用于动态控制是否启用越界回弹效果。默认情况下，仅在 Android 和 iOS 平台上启用。
 
+## 按压反馈效果 (PressFeedback)
+
+Miuix 提供了视觉反馈效果来增强用户交互体验，通过类似触觉的响应提升操作感。
+
+### 下沉效果
+
+`pressSink` 修饰符会在组件被按下时应用一种“下沉”视觉效果，通过平滑缩放组件实现。
+
+```kotlin
+val interactionSource = remember { MutableInteractionSource() }
+
+Box(
+    modifier = Modifier
+        .clickable(interactionSource = interactionSource, indication = null)
+        .pressSink(interactionSource)
+        .background(Color.Blue)
+        .size(100.dp)
+)
+```
+
+### 倾斜效果
+
+`pressTilt` 修饰符会根据用户按压组件的位置应用一种“倾斜”效果。倾斜方向由触摸偏移决定，使一角“下沉”而另一角保持“静止”。
+
+```kotlin
+val interactionSource = remember { MutableInteractionSource() }
+
+Box(
+    modifier = Modifier
+        .clickable(interactionSource = interactionSource, indication = null)
+        .pressTilt(interactionSource)
+        .background(Color.Green)
+        .size(100.dp)
+)
+```
+
+### 触发按压反馈效果的前提
+
+按压反馈效果需要检测 `interactionSource.collectIsPressedAsState()` 以触发。
+
+可以使用 `Modifier.clickable()` 等响应式修饰符来为 `interactionSource` 添加 `PressInteraction.Press` 以触发按压反馈效果。
+
+但更推荐使用下面的方法来为 `interactionSource` 添加 `PressInteraction.Press` 以获得更快响应的触发按压反馈效果。
+
+```kotlin
+val interactionSource = remember { MutableInteractionSource() }
+
+Box(
+    modifier = Modifier
+        .pointerInput(Unit) {
+            awaitEachGesture {
+                val pressInteraction: PressInteraction.Press
+                awaitFirstDown().also {
+                    pressInteraction = PressInteraction.Press(it.position)
+                    interactionSource.tryEmit(pressInteraction)
+                }
+                if (waitForUpOrCancellation() == null) {
+                    interactionSource.tryEmit(PressInteraction.Cancel(pressInteraction))
+                } else {
+                    interactionSource.tryEmit(PressInteraction.Release(pressInteraction))
+                }
+            }
+        }
+)
+```
+
+### 按压反馈类型 (PressFeedbackType)
+
+`PressFeedbackType` 枚举定义了组件被按下时可以应用的不同类型的视觉反馈。
+
+| 类型 | 说明 |
+|------|-------------|
+| None | 无视觉反馈 |
+| Sink | 应用下沉效果，组件在按下时轻微缩小 |
+| Tilt | 应用倾斜效果，组件根据触摸位置轻微倾斜 |
+
 ## 平滑圆角 (SmoothRoundedCornerShape)
 
 `SmoothRoundedCornerShape` 提供了比标准 `RoundedCornerShape` 更加平滑的圆角效果。

example/src/commonMain/kotlin/UITest.kt

@@ -89,7 +89,7 @@ data class UIState(
     val showFloatingToolbar: Boolean = false,
     val floatingToolbarPosition: Int = 1,
     val floatingToolbarOrientation: Int = 1,
-    val showFloatingActionButton: Boolean = true,
+    val showFloatingActionButton: Boolean = false,
     val floatingActionButtonPosition: Int = 2,
     val enablePageUserScroll: Boolean = false,
     val isTopPopupExpanded: Boolean = false