feat: add api screens

6 files changed, 1255 insertions, 0 deletions

diff --git a/docs/src/wasmJsMain/kotlin/docs/screen/ApiAlphaSliderScreen.kt b/docs/src/wasmJsMain/kotlin/docs/screen/ApiAlphaSliderScreen.kt
new file mode 100644
index 0000000..6ef9eb4
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/screen/ApiAlphaSliderScreen.kt
@@ -0,0 +1,205 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package docs.screen
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import docs.component.CodeBlock
+import docs.theme.DocsTheme
+
+@Composable
+fun ApiAlphaSliderScreen() {
+  Column(
+    modifier = Modifier
+      .fillMaxSize()
+      .verticalScroll(rememberScrollState())
+      .padding(32.dp),
+  ) {
+    Text(
+      text = "AlphaSlider",
+      style = DocsTheme.typography.h1,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "A slider component that allows users to adjust the alpha (transparency) " +
+        "value of the selected color. The slider displays a gradient from transparent " +
+        "to the current color.",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Basic Usage
+    Text(
+      text = "Basic Usage",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """AlphaSlider(
+    modifier = Modifier
+        .fillMaxWidth()
+        .padding(10.dp)
+        .height(35.dp),
+    controller = controller,
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Parameters
+    Text(
+      text = "Parameters",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    ParameterItem(
+      name = "modifier",
+      type = "Modifier",
+      description = "Modifier to be applied to the slider",
+    )
+    ParameterItem(
+      name = "controller",
+      type = "ColorPickerController",
+      description = "Controller that manages the color picker state",
+    )
+    ParameterItem(
+      name = "borderRadius",
+      type = "Dp",
+      description = "Corner radius of the slider border",
+    )
+    ParameterItem(
+      name = "borderSize",
+      type = "Dp",
+      description = "Thickness of the slider border",
+    )
+    ParameterItem(
+      name = "borderColor",
+      type = "Color",
+      description = "Color of the slider border",
+    )
+    ParameterItem(
+      name = "wheelRadius",
+      type = "Dp",
+      description = "Radius of the slider wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelColor",
+      type = "Color",
+      description = "Color of the wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelImageBitmap",
+      type = "ImageBitmap?",
+      description = "Custom image for the wheel indicator",
+    )
+    ParameterItem(
+      name = "tileOddColor",
+      type = "Color",
+      description = "Color of odd tiles in the transparency pattern",
+    )
+    ParameterItem(
+      name = "tileEvenColor",
+      type = "Color",
+      description = "Color of even tiles in the transparency pattern",
+    )
+    ParameterItem(
+      name = "tileSize",
+      type = "Dp",
+      description = "Size of each tile in the transparency pattern",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Customization
+    Text(
+      text = "Customization",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "You can customize the appearance of the slider:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """AlphaSlider(
+    modifier = Modifier
+        .fillMaxWidth()
+        .height(35.dp),
+    controller = controller,
+    borderRadius = 6.dp,
+    borderSize = 5.dp,
+    borderColor = Color.LightGray,
+    wheelRadius = 30.dp,
+    wheelColor = Color.White,
+    tileOddColor = Color.White,
+    tileEvenColor = Color.LightGray,
+    tileSize = 30.dp,
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+  }
+}
+
+@Composable
+private fun ParameterItem(
+  name: String,
+  type: String,
+  description: String,
+) {
+  Column(
+    modifier = Modifier.padding(vertical = 8.dp),
+  ) {
+    Text(
+      text = "$name: $type",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.primary,
+    )
+    Spacer(modifier = Modifier.height(4.dp))
+    Text(
+      text = description,
+      style = DocsTheme.typography.bodySmall,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+  }
+}
diff --git a/docs/src/wasmJsMain/kotlin/docs/screen/ApiAlphaTileScreen.kt b/docs/src/wasmJsMain/kotlin/docs/screen/ApiAlphaTileScreen.kt
new file mode 100644
index 0000000..827486a
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/screen/ApiAlphaTileScreen.kt
@@ -0,0 +1,187 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package docs.screen
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import docs.component.CodeBlock
+import docs.theme.DocsTheme
+
+@Composable
+fun ApiAlphaTileScreen() {
+  Column(
+    modifier = Modifier
+      .fillMaxSize()
+      .verticalScroll(rememberScrollState())
+      .padding(32.dp),
+  ) {
+    Text(
+      text = "AlphaTile",
+      style = DocsTheme.typography.h1,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "A component that displays ARGB colors including transparency with a " +
+        "checkered tile background pattern, making it easy to visualize alpha values.",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Basic Usage
+    Text(
+      text = "Basic Usage",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """AlphaTile(
+    modifier = Modifier
+        .size(80.dp)
+        .clip(RoundedCornerShape(6.dp)),
+    controller = controller
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Parameters
+    Text(
+      text = "Parameters",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    ParameterItem(
+      name = "modifier",
+      type = "Modifier",
+      description = "Modifier to be applied to the tile",
+    )
+    ParameterItem(
+      name = "controller",
+      type = "ColorPickerController",
+      description = "Controller that provides the current color",
+    )
+    ParameterItem(
+      name = "tileOddColor",
+      type = "Color",
+      description = "Color of odd tiles in the checkered pattern (default: White)",
+    )
+    ParameterItem(
+      name = "tileEvenColor",
+      type = "Color",
+      description = "Color of even tiles in the checkered pattern (default: LightGray)",
+    )
+    ParameterItem(
+      name = "tileSize",
+      type = "Dp",
+      description = "Size of each tile in the checkered pattern",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Customization
+    Text(
+      text = "Customization",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "Customize the checkered background pattern:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """AlphaTile(
+    modifier = Modifier
+        .size(80.dp)
+        .clip(RoundedCornerShape(6.dp)),
+    controller = controller,
+    tileOddColor = Color.White,
+    tileEvenColor = Color.LightGray,
+    tileSize = 30.dp,
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Use Case
+    Text(
+      text = "Common Use Cases",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "• Display the currently selected color with alpha transparency\n" +
+        "• Preview colors before applying them\n" +
+        "• Show color swatches in a color palette UI",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+  }
+}
+
+@Composable
+private fun ParameterItem(
+  name: String,
+  type: String,
+  description: String,
+) {
+  Column(
+    modifier = Modifier.padding(vertical = 8.dp),
+  ) {
+    Text(
+      text = "$name: $type",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.primary,
+    )
+    Spacer(modifier = Modifier.height(4.dp))
+    Text(
+      text = description,
+      style = DocsTheme.typography.bodySmall,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+  }
+}
diff --git a/docs/src/wasmJsMain/kotlin/docs/screen/ApiBrightnessSliderScreen.kt b/docs/src/wasmJsMain/kotlin/docs/screen/ApiBrightnessSliderScreen.kt
new file mode 100644
index 0000000..c3a6023
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/screen/ApiBrightnessSliderScreen.kt
@@ -0,0 +1,187 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package docs.screen
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import docs.component.CodeBlock
+import docs.theme.DocsTheme
+
+@Composable
+fun ApiBrightnessSliderScreen() {
+  Column(
+    modifier = Modifier
+      .fillMaxSize()
+      .verticalScroll(rememberScrollState())
+      .padding(32.dp),
+  ) {
+    Text(
+      text = "BrightnessSlider",
+      style = DocsTheme.typography.h1,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "A slider component that allows users to adjust the brightness (value) " +
+        "of the selected color. The slider displays a gradient from black to the " +
+        "current color at full brightness.",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Basic Usage
+    Text(
+      text = "Basic Usage",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """BrightnessSlider(
+    modifier = Modifier
+        .fillMaxWidth()
+        .padding(10.dp)
+        .height(35.dp),
+    controller = controller,
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Parameters
+    Text(
+      text = "Parameters",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    ParameterItem(
+      name = "modifier",
+      type = "Modifier",
+      description = "Modifier to be applied to the slider",
+    )
+    ParameterItem(
+      name = "controller",
+      type = "ColorPickerController",
+      description = "Controller that manages the color picker state",
+    )
+    ParameterItem(
+      name = "borderRadius",
+      type = "Dp",
+      description = "Corner radius of the slider border",
+    )
+    ParameterItem(
+      name = "borderSize",
+      type = "Dp",
+      description = "Thickness of the slider border",
+    )
+    ParameterItem(
+      name = "borderColor",
+      type = "Color",
+      description = "Color of the slider border",
+    )
+    ParameterItem(
+      name = "wheelRadius",
+      type = "Dp",
+      description = "Radius of the slider wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelColor",
+      type = "Color",
+      description = "Color of the wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelImageBitmap",
+      type = "ImageBitmap?",
+      description = "Custom image for the wheel indicator",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Customization
+    Text(
+      text = "Customization",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "You can customize the appearance of the slider:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """BrightnessSlider(
+    modifier = Modifier
+        .fillMaxWidth()
+        .height(35.dp),
+    controller = controller,
+    borderRadius = 6.dp,
+    borderSize = 5.dp,
+    borderColor = Color.LightGray,
+    wheelRadius = 30.dp,
+    wheelColor = Color.White,
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+  }
+}
+
+@Composable
+private fun ParameterItem(
+  name: String,
+  type: String,
+  description: String,
+) {
+  Column(
+    modifier = Modifier.padding(vertical = 8.dp),
+  ) {
+    Text(
+      text = "$name: $type",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.primary,
+    )
+    Spacer(modifier = Modifier.height(4.dp))
+    Text(
+      text = description,
+      style = DocsTheme.typography.bodySmall,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+  }
+}
diff --git a/docs/src/wasmJsMain/kotlin/docs/screen/ApiControllerScreen.kt b/docs/src/wasmJsMain/kotlin/docs/screen/ApiControllerScreen.kt
new file mode 100644
index 0000000..7b17358
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/screen/ApiControllerScreen.kt
@@ -0,0 +1,266 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package docs.screen
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import docs.component.CodeBlock
+import docs.theme.DocsTheme
+
+@Composable
+fun ApiControllerScreen() {
+  Column(
+    modifier = Modifier
+      .fillMaxSize()
+      .verticalScroll(rememberScrollState())
+      .padding(32.dp),
+  ) {
+    Text(
+      text = "ColorPickerController",
+      style = DocsTheme.typography.h1,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "The central controller that manages state and coordinates all color picker " +
+        "components. Create it using rememberColorPickerController() and pass it to " +
+        "all related components.",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Creating Controller
+    Text(
+      text = "Creating a Controller",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """val controller = rememberColorPickerController()""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Properties
+    Text(
+      text = "Properties",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    ParameterItem(
+      name = "selectedColor",
+      type = "State<Color>",
+      description = "The currently selected color with alpha and brightness applied",
+    )
+    ParameterItem(
+      name = "selectedPoint",
+      type = "State<Offset>",
+      description = "The currently selected coordinate on the picker",
+    )
+    ParameterItem(
+      name = "enabled",
+      type = "Boolean",
+      description = "Enable or disable color selection",
+    )
+    ParameterItem(
+      name = "debounceDuration",
+      type = "Long?",
+      description = "Debounce duration for color change events (ms)",
+    )
+    ParameterItem(
+      name = "wheelRadius",
+      type = "Dp",
+      description = "Radius of the wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelColor",
+      type = "Color",
+      description = "Color of the wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelAlpha",
+      type = "Float",
+      description = "Alpha value of the wheel indicator",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Wheel Customization
+    Text(
+      text = "Wheel Customization",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """controller.setWheelRadius(40.dp)
+controller.setWheelColor(Color.Blue)
+controller.setWheelAlpha(0.5f)
+controller.setWheelImageBitmap(imageBitmap)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Point Selection
+    Text(
+      text = "Programmatic Selection",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "Select colors programmatically using these methods:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """// Select by coordinate
+controller.selectByCoordinate(x = 100f, y = 100f, fromUser = false)
+
+// Select center of the palette
+controller.selectCenter(fromUser = false)
+
+// Select by color
+controller.selectByColor(Color.Red, fromUser = false)
+
+// Select by HSV values
+controller.selectByHsv(h = 180f, s = 0.8f, v = 1f, alpha = 1f, fromUser = false)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Color Flow
+    Text(
+      text = "Observing Color Changes",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "Use getColorFlow() to observe color changes with optional debouncing:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """// Collect color changes
+LaunchedEffect(controller) {
+    controller.getColorFlow(debounceDuration = 200L)
+        .collect { colorEnvelope ->
+            // Handle color update
+        }
+}""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Debounce
+    Text(
+      text = "Debouncing",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "Set debounce duration to reduce overhead when communicating with " +
+        "external devices or performing heavy operations:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """controller.debounceDuration = 200L // 200ms debounce""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Enable/Disable
+    Text(
+      text = "Enable/Disable",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """// Disable color selection
+controller.enabled = false
+
+// Re-enable
+controller.enabled = true""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+  }
+}
+
+@Composable
+private fun ParameterItem(
+  name: String,
+  type: String,
+  description: String,
+) {
+  Column(
+    modifier = Modifier.padding(vertical = 8.dp),
+  ) {
+    Text(
+      text = "$name: $type",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.primary,
+    )
+    Spacer(modifier = Modifier.height(4.dp))
+    Text(
+      text = description,
+      style = DocsTheme.typography.bodySmall,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+  }
+}
diff --git a/docs/src/wasmJsMain/kotlin/docs/screen/ApiHsvColorPickerScreen.kt b/docs/src/wasmJsMain/kotlin/docs/screen/ApiHsvColorPickerScreen.kt
new file mode 100644
index 0000000..a10094b
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/screen/ApiHsvColorPickerScreen.kt
@@ -0,0 +1,194 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package docs.screen
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import docs.component.Callout
+import docs.component.CalloutType
+import docs.component.CodeBlock
+import docs.theme.DocsTheme
+
+@Composable
+fun ApiHsvColorPickerScreen() {
+  Column(
+    modifier = Modifier
+      .fillMaxSize()
+      .verticalScroll(rememberScrollState())
+      .padding(32.dp),
+  ) {
+    Text(
+      text = "HsvColorPicker",
+      style = DocsTheme.typography.h1,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "A circular HSV (Hue-Saturation-Value) color wheel that allows users to " +
+        "select colors by tapping or dragging on the wheel.",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Basic Usage
+    Text(
+      text = "Basic Usage",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """HsvColorPicker(
+    modifier = Modifier
+        .fillMaxWidth()
+        .height(450.dp)
+        .padding(10.dp),
+    controller = controller,
+    onColorChanged = { colorEnvelope: ColorEnvelope ->
+        // Handle color change
+    }
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Parameters
+    Text(
+      text = "Parameters",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    ParameterItem(
+      name = "modifier",
+      type = "Modifier",
+      description = "Modifier to be applied to the color picker",
+    )
+    ParameterItem(
+      name = "controller",
+      type = "ColorPickerController",
+      description = "Controller that manages the color picker state",
+    )
+    ParameterItem(
+      name = "initialColor",
+      type = "Color",
+      description = "Initial color to be selected (default: White)",
+    )
+    ParameterItem(
+      name = "wheelRadius",
+      type = "Dp",
+      description = "Radius of the selector wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelColor",
+      type = "Color",
+      description = "Color of the wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelAlpha",
+      type = "Float",
+      description = "Alpha value of the wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelImageBitmap",
+      type = "ImageBitmap?",
+      description = "Custom image for the wheel indicator",
+    )
+    ParameterItem(
+      name = "onColorChanged",
+      type = "(ColorEnvelope) -> Unit",
+      description = "Callback invoked when color changes",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Initial Color
+    Text(
+      text = "Setting Initial Color",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "You can set the initial color using the initialColor parameter:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """HsvColorPicker(
+    modifier = Modifier.size(300.dp),
+    controller = controller,
+    initialColor = Color.Red, // Start with red selected
+    onColorChanged = { /* ... */ }
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    Callout(
+      text = "Note: When using HsvColorPicker, you cannot use setPaletteImageBitmap() " +
+        "or setPaletteContentScale() functions on the controller.",
+      type = CalloutType.Warning,
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+  }
+}
+
+@Composable
+private fun ParameterItem(
+  name: String,
+  type: String,
+  description: String,
+) {
+  Column(
+    modifier = Modifier.padding(vertical = 8.dp),
+  ) {
+    Text(
+      text = "$name: $type",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.primary,
+    )
+    Spacer(modifier = Modifier.height(4.dp))
+    Text(
+      text = description,
+      style = DocsTheme.typography.bodySmall,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+  }
+}
diff --git a/docs/src/wasmJsMain/kotlin/docs/screen/ApiImageColorPickerScreen.kt b/docs/src/wasmJsMain/kotlin/docs/screen/ApiImageColorPickerScreen.kt
new file mode 100644
index 0000000..19b251c
--- /dev/null
+++ b/docs/src/wasmJsMain/kotlin/docs/screen/ApiImageColorPickerScreen.kt
@@ -0,0 +1,216 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package docs.screen
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import docs.component.CodeBlock
+import docs.theme.DocsTheme
+
+@Composable
+fun ApiImageColorPickerScreen() {
+  Column(
+    modifier = Modifier
+      .fillMaxSize()
+      .verticalScroll(rememberScrollState())
+      .padding(32.dp),
+  ) {
+    Text(
+      text = "ImageColorPicker",
+      style = DocsTheme.typography.h1,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "Allows you to pick colors from any image by tapping on the desired color. " +
+        "Works with drawable resources or dynamically loaded images.",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Basic Usage
+    Text(
+      text = "Basic Usage",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """ImageColorPicker(
+    modifier = Modifier
+        .fillMaxWidth()
+        .height(450.dp)
+        .padding(10.dp),
+    controller = controller,
+    paletteImageBitmap = ImageBitmap.imageResource(R.drawable.palette),
+    paletteContentScale = PaletteContentScale.FIT,
+    onColorChanged = { colorEnvelope: ColorEnvelope ->
+        // Handle color change
+    }
+)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Parameters
+    Text(
+      text = "Parameters",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    ParameterItem(
+      name = "modifier",
+      type = "Modifier",
+      description = "Modifier to be applied to the color picker",
+    )
+    ParameterItem(
+      name = "controller",
+      type = "ColorPickerController",
+      description = "Controller that manages the color picker state",
+    )
+    ParameterItem(
+      name = "paletteImageBitmap",
+      type = "ImageBitmap",
+      description = "The image to use as the color palette",
+    )
+    ParameterItem(
+      name = "paletteContentScale",
+      type = "PaletteContentScale",
+      description = "How to scale the palette image (FIT or CROP)",
+    )
+    ParameterItem(
+      name = "wheelRadius",
+      type = "Dp",
+      description = "Radius of the selector wheel indicator",
+    )
+    ParameterItem(
+      name = "wheelColor",
+      type = "Color",
+      description = "Color of the wheel indicator",
+    )
+    ParameterItem(
+      name = "onColorChanged",
+      type = "(ColorEnvelope) -> Unit",
+      description = "Callback invoked when color changes",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // PaletteContentScale
+    Text(
+      text = "PaletteContentScale",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "Control how the palette image is scaled within the picker:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """// Scale to fit within bounds
+controller.setPaletteContentScale(PaletteContentScale.FIT)
+
+// Center crop the image
+controller.setPaletteContentScale(PaletteContentScale.CROP)""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+
+    // Dynamic Palette
+    Text(
+      text = "Dynamic Palette",
+      style = DocsTheme.typography.h2,
+      color = DocsTheme.colors.onBackground,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    Text(
+      text = "You can change the palette image at runtime using the controller:",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.onSurface,
+    )
+
+    Spacer(modifier = Modifier.height(16.dp))
+
+    CodeBlock(
+      code = """// Load image from photo picker
+val photoPicker = rememberLauncherForActivityResult(PhotoPicker()) { uris ->
+    val uri = uris.firstOrNull() ?: return@rememberLauncherForActivityResult
+
+    val bitmap = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+        ImageDecoder.decodeBitmap(
+            ImageDecoder.createSource(context.contentResolver, uri)
+        )
+    } else {
+        MediaStore.Images.Media.getBitmap(context.contentResolver, uri)
+    }
+
+    controller.setPaletteImageBitmap(bitmap.asImageBitmap())
+}""",
+    )
+
+    Spacer(modifier = Modifier.height(32.dp))
+  }
+}
+
+@Composable
+private fun ParameterItem(
+  name: String,
+  type: String,
+  description: String,
+) {
+  Column(
+    modifier = Modifier.padding(vertical = 8.dp),
+  ) {
+    Text(
+      text = "$name: $type",
+      style = DocsTheme.typography.body,
+      color = DocsTheme.colors.primary,
+    )
+    Spacer(modifier = Modifier.height(4.dp))
+    Text(
+      text = description,
+      style = DocsTheme.typography.bodySmall,
+      color = DocsTheme.colors.onSurfaceVariant,
+    )
+  }
+}