feat: ColorPicker

.histoire/vite.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
     tree: {
       groups: [
         { title: 'Components', include: _file => true },
+        { title: 'Compounds', id: 'compounds' },
         { id: 'utilities', title: 'Utilities' },
       ],
     },

docs/.vitepress/config.ts

@@ -162,6 +162,19 @@ export default defineConfig({
               { text: 'Toggle Group', link: '/docs/components/toggle-group' },
             ],
           },
+          {
+            text: 'Color',
+            items: [
+              { text: `Color Area ${BadgeHTML('Alpha', true)}`, link: '/docs/components/color-area' },
+              { text: `Color Field ${BadgeHTML('Alpha', true)}`, link: '/docs/components/color-field' },
+              { text: `Color Slider ${BadgeHTML('Alpha', true)}`, link: '/docs/components/color-slider' },
+              { text: `Color Swatch ${BadgeHTML('Alpha', true)}`, link: '/docs/components/color-swatch' },
+              {
+                text: `Color Swatch Picker ${BadgeHTML('Alpha', true)}`,
+                link: '/docs/components/color-swatch-picker',
+              },
+            ],
+          },
           {
             text: 'Dates',
             items: [
@@ -314,6 +327,12 @@ export default defineConfig({
               { text: 'Checkbox Group', link: '/examples/checkbox-group' },
             ],
           },
+          {
+            text: 'Color',
+            items: [
+              { text: 'Color Picker', link: '/examples/color-picker' },
+            ],
+          },
           {
             text: 'Combobox',
             items: [

docs/components/demo/ColorArea/tailwind/index.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  ColorAreaArea,
+  ColorAreaRoot,
+  ColorAreaThumb,
+} from 'reka-ui'
+import { ref } from 'vue'
+
+const color = ref('#ff0000')
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="text-sm text-gray-600 dark:text-gray-400">
+      Current: {{ color }}
+    </div>
+
+    <ColorAreaRoot
+      v-slot="{ style }"
+      v-model="color"
+      class="relative"
+    >
+      <ColorAreaArea
+        class="relative w-[200px] h-[200px] rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-green-500"
+        :style="style"
+      >
+        <ColorAreaThumb class="block w-4 h-4 rounded-full bg-white border-2 border-gray-400 shadow cursor-pointer" />
+      </ColorAreaArea>
+    </ColorAreaRoot>
+  </div>
+</template>

docs/components/demo/ColorField/tailwind/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  ColorFieldInput,
+  ColorFieldRoot,
+} from 'reka-ui'
+import { ref } from 'vue'
+
+const color = ref('#3b82f6')
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <ColorFieldRoot
+      v-model="color"
+      class="inline-flex flex-col gap-1"
+    >
+      <label class="text-sm font-medium text-gray-900 dark:text-gray-100">
+        Color
+      </label>
+      <div class="flex items-center gap-2">
+        <div
+          class="w-8 h-8 rounded border border-gray-200 dark:border-gray-700 shrink-0"
+          :style="{ background: color }"
+        />
+        <ColorFieldInput
+          class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:opacity-50 disabled:cursor-not-allowed w-32"
+        />
+      </div>
+    </ColorFieldRoot>
+
+    <div class="flex items-center gap-2 text-xs text-gray-500">
+      <span>Value: {{ color }}</span>
+    </div>
+  </div>
+</template>

docs/components/demo/ColorSlider/tailwind/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {
+  ColorSliderRoot,
+  ColorSliderThumb,
+  ColorSliderTrack,
+} from 'reka-ui'
+import { ref } from 'vue'
+
+const color = ref('#10b981')
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <ColorSliderRoot
+      v-model="color"
+      channel="hue"
+      class="relative flex items-center select-none touch-none w-[200px] h-5"
+    >
+      <ColorSliderTrack
+        class="relative flex-1 rounded-full h-3"
+      >
+        <div class="absolute inset-0 rounded-full" />
+      </ColorSliderTrack>
+      <ColorSliderThumb
+        class="block w-5 h-5 rounded-full bg-white border-2 border-gray-400 shadow-lg cursor-pointer hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-green-500"
+      />
+    </ColorSliderRoot>
+
+    <div class="flex items-center gap-2 text-xs text-gray-500">
+      <div
+        class="w-5 h-5 rounded border border-gray-200 shrink-0"
+        :style="{ background: color }"
+      />
+      <span class="font-mono">{{ color }}</span>
+    </div>
+  </div>
+</template>

docs/components/demo/ColorSwatch/css/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { green } from '@radix-ui/colors'
+import { ColorSwatch } from 'reka-ui'
+import './styles.css'
+</script>
+
+<template>
+  <ColorSwatch
+    :color="green.green9"
+    class="swatch"
+  />
+</template>

docs/components/demo/ColorSwatch/css/styles.css

@@ -0,0 +1,11 @@
+.swatch {
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+    flex-shrink: 0;
+}
+
+.dark .swatch {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+}

docs/components/demo/ColorSwatch/tailwind/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { green } from '@radix-ui/colors'
+import { ColorSwatch } from 'reka-ui'
+</script>
+
+<template>
+  <ColorSwatch
+    :color="green.green9"
+    class="size-8 shrink-0 bg-[--reka-color-swatch-color] rounded ring-1 ring-inset ring-black/15 dark:ring-white/15"
+  />
+</template>

docs/components/demo/ColorSwatch/tailwind/tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./**/*.vue'],
+  theme: {},
+  plugins: [],
+}

docs/components/demo/ColorSwatchPicker/css/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import {
+  blue,
+  green,
+  orange,
+  pink,
+  red,
+  violet,
+  yellow,
+} from '@radix-ui/colors'
+import { ColorSwatchPickerItem, ColorSwatchPickerItemIndicator, ColorSwatchPickerItemSwatch, ColorSwatchPickerRoot } from 'reka-ui'
+import './styles.css'
+
+const colors = [
+  red.red9,
+  pink.pink9,
+  violet.violet9,
+  blue.blue9,
+  green.green9,
+  orange.orange9,
+  yellow.yellow9,
+]
+</script>
+
+<template>
+  <ColorSwatchPickerRoot class="root">
+    <ColorSwatchPickerItem
+      v-for="color in colors"
+      :key="color"
+      :value="color"
+      class="item"
+    >
+      <ColorSwatchPickerItemSwatch
+        class="swatch"
+      />
+      <ColorSwatchPickerItemIndicator class="indicator">
+        <Icon icon="radix-icons:check" />
+      </ColorSwatchPickerItemIndicator>
+    </ColorSwatchPickerItem>
+  </ColorSwatchPickerRoot>
+</template>

docs/components/demo/ColorSwatchPicker/css/styles.css

@@ -0,0 +1,32 @@
+.root {
+    display: flex;
+    gap: 8px;
+}
+
+.item {
+    position: relative;
+}
+
+.swatch {
+    height: 32px;
+    width: 32px;
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.dark .swatch {
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.indicator {
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    color: white;
+}
+
+.swatch[data-color-contrast='dark'] ~ .indicator {
+    color: black;
+}

docs/components/demo/ColorSwatchPicker/tailwind/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import {
+  blue,
+  green,
+  indigo,
+  orange,
+  red,
+  violet,
+  yellow,
+} from '@radix-ui/colors'
+import { ColorSwatchPickerItem, ColorSwatchPickerItemIndicator, ColorSwatchPickerItemSwatch, ColorSwatchPickerRoot } from 'reka-ui'
+
+const colors = [
+  red.red9,
+  orange.orange9,
+  yellow.yellow9,
+  green.green9,
+  blue.blue9,
+  indigo.indigo9,
+  violet.violet9,
+]
+</script>
+
+<template>
+  <ColorSwatchPickerRoot class="flex gap-2">
+    <ColorSwatchPickerItem
+      v-for="color in colors"
+      :key="color"
+      :value="color"
+      class="relative"
+    >
+      <ColorSwatchPickerItemSwatch
+        class="size-8 rounded ring-1 ring-inset ring-black/15 dark:ring-white/15 bg-[--reka-color-swatch-color] peer"
+      />
+      <ColorSwatchPickerItemIndicator class="text-white peer-data-[color-contrast=dark]:text-black absolute right-1 bottom-1">
+        <Icon icon="radix-icons:check" />
+      </ColorSwatchPickerItemIndicator>
+    </ColorSwatchPickerItem>
+  </ColorSwatchPickerRoot>
+</template>

docs/components/demo/ColorSwatchPicker/tailwind/tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./**/*.vue'],
+  theme: {},
+  plugins: [],
+}