feat(ColorPicker): implement component (#2670)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/app/app.vue

@@ -29,6 +29,7 @@ const components = [
   'checkbox',
   'chip',
   'collapsible',
+  'color-picker',
   'context-menu',
   'command-palette',
   'drawer',

playground/app/pages/components/color-picker.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const colorHex = ref('#9C27B0')
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <div class="flex items-center gap-2">
+      <span :style="{ backgroundColor: colorHex }" class="inline-flex w-5 h-5 rounded" />
+      <code class="font-mono">{{ colorHex }}</code>
+    </div>
+    <USeparator />
+    <div class="flex justify-between gap-2">
+      <UButton @click="colorHex = '#9C27B0'">
+        Purple
+      </UButton>
+      <UButton @click="colorHex = '#8BC34A'">
+        Lime
+      </UButton>
+      <UButton @click="colorHex = '#FF6347'">
+        Tomato
+      </UButton>
+    </div>
+    <USeparator />
+    <UColorPicker v-model="colorHex" @update:model-value="() => console.log('model update')" />
+  </div>
+</template>