library: Add a ColorPicker based on OkLch color space (#142)

Author: YuKongA

docs/components/colorpicker.md

@@ -64,6 +64,7 @@ ColorPicker(
 | showPreview    | Boolean                           | Show color preview            | true                               | No       |
 | hapticEffect   | SliderDefaults.SliderHapticEffect | Slider haptic feedback effect | SliderDefaults.DefaultHapticEffect | No       |
 | modifier       | Modifier                          | Modifier for the component    | Modifier                           | No       |
+| colorSpace     | ColorSpace                        | Color space to use            | ColorSpace.HSV                     | No       |
 
 ## Individual Slider Components
 
@@ -129,6 +130,24 @@ AlphaSlider(
 
 ## Advanced Usage
 
+### Color Spaces
+
+ColorPicker supports multiple color spaces via `colorSpace`:
+- `ColorSpace.HSV` — classic HSV sliders (Hue, Saturation, Value, Alpha).
+- `ColorSpace.OKHSV` — perceptual HSV variant based on OkLCH, more uniform hue steps.
+- `ColorSpace.OKLAB` — OkLab sliders (Lightness, a, b, Alpha) for perceptual editing.
+- `ColorSpace.OKLCH` — OkLCH sliders (Lightness, Chroma, Hue, Alpha). Chroma is clamped to typical sRGB gamut.
+
+Example: use the OKLCH color space
+
+```kotlin
+ColorPicker(
+    initialColor = Color(0xFF4CAF50),
+    onColorChanged = { /* Handle color change */ },
+    colorSpace = ColorSpace.OKLCH
+)
+```
+
 ### Using in Forms
 
 Combine with other input controls to create a color selection form:

docs/zh_CN/components/colorpicker.md

@@ -64,6 +64,7 @@ ColorPicker(
 | showPreview    | Boolean                           | 是否显示颜色预览     | true                               | 否       |
 | hapticEffect   | SliderDefaults.SliderHapticEffect | 滑块的触觉反馈效果   | SliderDefaults.DefaultHapticEffect | 否       |
 | modifier       | Modifier                          | 应用于组件的修饰符   | Modifier                           | 否       |
+| colorSpace     | ColorSpace                        | 选择使用的颜色空间   | ColorSpace.HSV                     | 否       |
 
 ## 单独使用滑块组件
 
@@ -129,6 +130,24 @@ AlphaSlider(
 
 ## 进阶用法
 
+### 颜色空间
+
+ColorPicker 通过 `colorSpace` 支持多种颜色空间：
+- `ColorSpace.HSV` — 经典 HSV 滑条（色相、饱和度、明度、透明度）。
+- `ColorSpace.OKHSV` — 基于 OkLCH 的感知 HSV 变体，色相步进更均匀。
+- `ColorSpace.OKLAB` — OkLab 滑条（亮度 L、a、b、透明度），更符合人眼的感知。
+- `ColorSpace.OKLCH` — OkLCH 滑条（亮度 L、色度 C、色相 H、透明度）。为保证 sRGB 色域，色度会在常见范围内进行约束。
+
+示例：使用 OKLCH 颜色空间
+
+```kotlin
+ColorPicker(
+    initialColor = Color(0xFF4CAF50),
+    onColorChanged = { /* 处理颜色变化 */ },
+    colorSpace = ColorSpace.OKLCH
+)
+```
+
 ### 在表单中使用
 
 结合其他输入控件，创建颜色选择表单：

example/src/commonMain/kotlin/component/OtherComponent.kt

@@ -64,7 +64,6 @@ import top.yukonga.miuix.kmp.icon.icons.useful.Like
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.PressFeedbackType
 import top.yukonga.miuix.kmp.utils.toHsv
-import top.yukonga.miuix.kmp.utils.toOkLab
 import kotlin.math.round
 
 fun LazyListScope.otherComponent(
@@ -590,16 +589,11 @@ fun LazyListScope.otherComponent(
                 modifier = Modifier.padding(bottom = 12.dp),
                 verticalAlignment = Alignment.CenterVertically
             ) {
-                val hsv = selectedColor.toHsv()
                 Text(
                     text = "HEX: #${selectedColor.toArgb().toHexString(HexFormat.UpperCase)}" +
                             "\nRGBA: ${(selectedColor.red * 255).toInt()}, " +
                             "${(selectedColor.green * 255).toInt()}, " +
                             "${(selectedColor.blue * 255).toInt()}, " +
-                            "${(round(selectedColor.alpha * 100) / 100.0)}" +
-                            "\nHSVA: ${(hsv.h).toInt()}, " +
-                            "${(hsv.s).toInt()}%, " +
-                            "${(hsv.v).toInt()}%, " +
                             "${(round(selectedColor.alpha * 100) / 100.0)}",
                     modifier = Modifier.weight(1f)
                 )
@@ -629,16 +623,11 @@ fun LazyListScope.otherComponent(
                 modifier = Modifier.padding(bottom = 12.dp),
                 verticalAlignment = Alignment.CenterVertically
             ) {
-                val hsv = selectedColor.toHsv()
                 Text(
                     text = "HEX: #${selectedColor.toArgb().toHexString(HexFormat.UpperCase)}" +
                             "\nRGBA: ${(selectedColor.red * 255).toInt()}, " +
                             "${(selectedColor.green * 255).toInt()}, " +
                             "${(selectedColor.blue * 255).toInt()}, " +
-                            "${(round(selectedColor.alpha * 100) / 100.0)}" +
-                            "\nHSVA: ${(hsv.h).toInt()}, " +
-                            "${(hsv.s).toInt()}%, " +
-                            "${(hsv.v).toInt()}%, " +
                             "${(round(selectedColor.alpha * 100) / 100.0)}",
                     modifier = Modifier.weight(1f)
                 )
@@ -653,7 +642,7 @@ fun LazyListScope.otherComponent(
     }
 
     item(key = "colorPicker-okLab") {
-        SmallTitle(text = "ColorPicker (OKLAB)")
+        SmallTitle(text = "ColorPicker (okLab)")
         val miuixColor = MiuixTheme.colorScheme.primary
         var selectedColor by remember { mutableStateOf(miuixColor) }
 
@@ -668,16 +657,11 @@ fun LazyListScope.otherComponent(
                 modifier = Modifier.padding(bottom = 12.dp),
                 verticalAlignment = Alignment.CenterVertically
             ) {
-                val ok = selectedColor.toOkLab()
                 Text(
                     text = "HEX: #${selectedColor.toArgb().toHexString(HexFormat.UpperCase)}" +
                             "\nRGBA: ${(selectedColor.red * 255).toInt()}, " +
                             "${(selectedColor.green * 255).toInt()}, " +
                             "${(selectedColor.blue * 255).toInt()}, " +
-                            "${(round(selectedColor.alpha * 100) / 100.0)}" +
-                            "\nOkLab: ${((ok.l * 1000).toInt() / 1000.0)}, " +
-                            "${((ok.a * 1000).toInt() / 1000.0)}, " +
-                            "${((ok.b * 1000).toInt() / 1000.0)} / " +
                             "${(round(selectedColor.alpha * 100) / 100.0)}",
                     modifier = Modifier.weight(1f)
                 )
@@ -691,6 +675,41 @@ fun LazyListScope.otherComponent(
         }
     }
 
+    item(key = "colorPicker-okLch") {
+        SmallTitle(text = "ColorPicker (OkLch)")
+        val miuixColor = MiuixTheme.colorScheme.primary
+        var selectedColor by remember { mutableStateOf(miuixColor) }
+
+        Card(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 12.dp)
+                .padding(bottom = 12.dp),
+
+            insideMargin = PaddingValues(16.dp)
+        ) {
+            Row(
+                modifier = Modifier.padding(bottom = 12.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = "HEX: #${selectedColor.toArgb().toHexString(HexFormat.UpperCase)}" +
+                            "\nRGBA: ${(selectedColor.red * 255).toInt()}, " +
+                            "${(selectedColor.green * 255).toInt()}, " +
+                            "${(selectedColor.blue * 255).toInt()}, " +
+                            "${(round(selectedColor.alpha * 100) / 100.0)}",
+                    modifier = Modifier.weight(1f)
+                )
+            }
+            ColorPicker(
+                initialColor = selectedColor,
+                onColorChanged = { selectedColor = it },
+                hapticEffect = SliderDefaults.SliderHapticEffect.Step,
+                colorSpace = ColorSpace.OKLCH
+            )
+        }
+    }
+
     item(key = "colorPalette") {
         SmallTitle(text = "ColorPalette")
         val miuixColor = MiuixTheme.colorScheme.primary

iosApp/iosApp/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.0.5</string>
 	<key>CFBundleVersion</key>
-	<string>594</string>
+	<string>595</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>CADisableMinimumFrameDurationOnPhone</key>