feat: add ColorSwatch components

docs/.vitepress/config.ts

@@ -157,6 +157,16 @@ export default defineConfig({
               { text: 'Toggle Group', link: '/docs/components/toggle-group' },
             ],
           },
+          {
+            text: 'Color',
+            items: [
+              { text: 'Color Swatch', link: '/docs/components/color-swatch' },
+              {
+                text: 'Color Swatch Picker',
+                link: '/docs/components/color-swatch-picker',
+              },
+            ],
+          },
           {
             text: 'Dates',
             items: [

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: [],
+}

docs/content/docs/components/color-swatch-picker.md

@@ -0,0 +1,90 @@
+---
+
+title: Color Swatch Picker
+description: A component that allows users to select from a set of predefined colors, often used for themes or branding.
+name: color-swatch-picker
+---
+
+# Color Swatch Picker
+
+<Description>
+A component that allows users to select from a set of predefined colors, often used for themes or branding.
+</Description>
+
+<ComponentPreview name="ColorSwatchPicker" />
+
+## Features
+
+<Highlights
+  :features="[
+    'Can be controlled or uncontrolled.',
+    'Focus is fully managed.',
+    'Full keyboard navigation.',
+    'Supports Right to Left direction.',
+    'Different selection behavior.',
+  ]"
+/>
+
+## Installation
+
+Install the component from your command line.
+
+<InstallationTabs value="reka-ui" />
+
+## Anatomy
+
+Import all parts and piece them together.
+
+```vue
+<script setup>
+import {
+  ColorSwatchPickerItem,
+  ColorSwatchPickerItemIndicator,
+  ColorSwatchPickerItemSwatch,
+  ColorSwatchPickerRoot,
+} from 'reka-ui'
+</script>
+
+<template>
+  <ColorSwatchPickerRoot>
+    <ColorSwatchPickerItem value="#ff0000">
+      <ColorSwatchPickerItemSwatch />
+      <ColorSwatchPickerItemIndicator />
+    </ColorSwatchPickerItem>
+    <ColorSwatchPickerItem value="#00ff00">
+      <ColorSwatchPickerItemSwatch />
+      <ColorSwatchPickerItemIndicator />
+    </ColorSwatchPickerItem>
+    <ColorSwatchPickerItem value="#0000ff">
+      <ColorSwatchPickerItemSwatch />
+      <ColorSwatchPickerItemIndicator />
+    </ColorSwatchPickerItem>
+  </ColorSwatchPickerRoot>
+</template>
+```
+
+## API Reference
+
+### ColorSwatchPickerRoot
+
+The main component that displays a color swatch picker.
+
+<!-- @include: @/meta/ColorSwatchPickerRoot.md -->
+
+### ColorSwatchPickerItem
+
+The item that represents a selectable color swatch.
+
+<!-- @include: @/meta/ColorSwatchPickerItem.md -->
+
+### ColorSwatchPickerItemSwatch
+
+The component that displays the color swatch within an item.
+
+<!-- @include: @/meta/ColorSwatchPickerItemSwatch.md -->
+
+### ColorSwatchPickerItemIndicator
+
+The component that indicates the selected color swatch within an item.
+
+<!-- @include: @/meta/ColorSwatchPickerItemIndicator.md -->

docs/content/docs/components/color-swatch.md

@@ -0,0 +1,54 @@
+---
+
+title: Color Swatch
+description: A predefined color block that allows users to quickly select commonly used or brand-specific colors.
+name: color-swatch
+---
+
+# Color Swatch
+
+<Description>
+Displays a color swatch, which can be used to represent colors in a UI.
+</Description>
+
+<ComponentPreview name="ColorSwatch" />
+
+## Features
+
+<Highlights
+  :features="[
+    'Supports custom colors',
+    'Provides an accessible label for screen readers',
+    'Provides a color contrast for better visibility',
+  ]"
+/>
+
+## Installation
+
+Install the component from your command line.
+
+<InstallationTabs value="reka-ui" />
+
+## Anatomy
+
+Import all parts and piece them together.
+
+```vue
+<script setup>
+import {
+  ColorSwatch,
+} from 'reka-ui'
+</script>
+
+<template>
+  <ColorSwatch color="#ff0000" />
+</template>
+```
+
+## API Reference
+
+### ColorSwatch
+
+The main component that displays a color swatch.
+
+<!-- @include: @/meta/ColorSwatch.md -->

docs/content/meta/ColorSwatch.md

@@ -0,0 +1,38 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.reka-ui.com/docs/guides/composition\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'color',
+    'description': '<p>The color to display in the swatch as a hex string.\nExample: <code>#16a372</code> or <code>#ff5733</code>.</p>\n',
+    'type': 'string',
+    'required': false,
+    'default': '\'\''
+  },
+  {
+    'name': 'label',
+    'description': '<p>Optional accessible label for the color. If omitted, the color name will be derived from the color value.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'color',
+    'description': '',
+    'type': 'string'
+  }
+]" />