@sabrenski/spire-ui 0.0.1

package/src/components/ColorPicker/ColorPicker.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import Popover from '../Popover/Popover.vue'
+import Input from '../Input/Input.vue'
+import ColorArea from './ColorArea.vue'
+import ColorSlider from './ColorSlider.vue'
+import {
+  parseColorString,
+  formatColor,
+  hsvToHex,
+  hsvToRgb,
+  formatRgb,
+  type HSV
+} from '../../utils/color'
+
+export type ColorFormat = 'hex' | 'rgb' | 'oklch'
+
+export interface ColorPickerProps {
+  /** Current color value */
+  modelValue: string
+  /** Output format */
+  format?: ColorFormat
+  /** Disable the picker */
+  disabled?: boolean
+  /** Show only the swatch, hide text input */
+  swatchOnly?: boolean
+  /** Show alpha channel slider */
+  alpha?: boolean
+}
+
+const props = withDefaults(defineProps<ColorPickerProps>(), {
+  format: 'hex',
+  disabled: false,
+  swatchOnly: false,
+  alpha: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const internalHsv = ref<HSV>({ h: 0, s: 1, v: 1 })
+const internalAlpha = ref(1)
+const textInput = ref('')
+const isPopoverOpen = ref(false)
+
+const swatchColor = computed(() => {
+  const rgb = hsvToRgb(internalHsv.value)
+  if (props.alpha && internalAlpha.value < 1) {
+    return formatRgb(rgb, internalAlpha.value)
+  }
+  return hsvToHex(internalHsv.value)
+})
+
+const hueSliderColor = computed(() => hsvToHex({ ...internalHsv.value, s: 1, v: 1 }))
+
+watch(() => props.modelValue, (newValue) => {
+  if (!newValue) return
+
+  const parsed = parseColorString(newValue)
+  if (parsed) {
+    internalHsv.value = parsed.hsv
+    internalAlpha.value = parsed.alpha
+    textInput.value = newValue
+  }
+}, { immediate: true })
+
+function emitColor() {
+  const color = formatColor(internalHsv.value, internalAlpha.value, props.format)
+  textInput.value = color
+  emit('update:modelValue', color)
+}
+
+function handleHueChange(hue: number) {
+  internalHsv.value = { ...internalHsv.value, h: hue }
+  emitColor()
+}
+
+function handleSaturationChange(saturation: number) {
+  internalHsv.value = { ...internalHsv.value, s: saturation }
+  emitColor()
+}
+
+function handleValueChange(value: number) {
+  internalHsv.value = { ...internalHsv.value, v: value }
+  emitColor()
+}
+
+function handleAlphaChange(alpha: number) {
+  internalAlpha.value = alpha
+  emitColor()
+}
+
+function handleTextInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+  textInput.value = value
+
+  const parsed = parseColorString(value)
+  if (parsed) {
+    internalHsv.value = parsed.hsv
+    internalAlpha.value = parsed.alpha
+    emit('update:modelValue', value)
+  }
+}
+
+function handleTextBlur() {
+  const parsed = parseColorString(textInput.value)
+  if (!parsed) {
+    textInput.value = formatColor(internalHsv.value, internalAlpha.value, props.format)
+  }
+}
+
+async function handleEyeDropper() {
+  if (!('EyeDropper' in window)) return
+
+  try {
+    // @ts-expect-error EyeDropper is not in TS lib yet
+    const eyeDropper = new EyeDropper()
+    const result = await eyeDropper.open()
+
+    if (result.sRGBHex) {
+      const parsed = parseColorString(result.sRGBHex)
+      if (parsed) {
+        internalHsv.value = parsed.hsv
+        internalAlpha.value = 1
+        emitColor()
+      }
+    }
+  } catch {
+    // User cancelled or error
+  }
+}
+
+const hasEyeDropper = computed(() => 'EyeDropper' in window)
+</script>
+
+<template>
+  <Popover
+    placement="bottom-start"
+    :disabled="disabled"
+    :width="240"
+    @open="isPopoverOpen = true"
+    @close="isPopoverOpen = false"
+  >
+    <template #trigger>
+      <div
+        class="ui-color-picker__trigger"
+        :class="{ 'ui-color-picker__trigger--disabled': disabled }"
+      >
+        <div
+          class="ui-color-picker__swatch"
+          :style="{ backgroundColor: swatchColor }"
+        >
+          <div class="ui-color-picker__swatch-checkerboard" />
+        </div>
+        <Input
+          v-if="!swatchOnly"
+          :model-value="textInput"
+          :disabled="disabled"
+          class="ui-color-picker__input"
+          @input="handleTextInput"
+          @blur="handleTextBlur"
+        />
+      </div>
+    </template>
+
+    <div class="ui-color-picker__panel">
+      <ColorArea
+        :hue="internalHsv.h"
+        :saturation="internalHsv.s"
+        :value="internalHsv.v"
+        @update:saturation="handleSaturationChange"
+        @update:value="handleValueChange"
+      />
+
+      <div class="ui-color-picker__sliders">
+        <ColorSlider
+          :model-value="internalHsv.h"
+          type="hue"
+          @update:model-value="handleHueChange"
+        />
+
+        <ColorSlider
+          v-if="alpha"
+          :model-value="internalAlpha"
+          type="alpha"
+          :color="hueSliderColor"
+          @update:model-value="handleAlphaChange"
+        />
+      </div>
+
+      <div class="ui-color-picker__footer">
+        <div class="ui-color-picker__preview">
+          <div
+            class="ui-color-picker__preview-swatch"
+            :style="{ backgroundColor: swatchColor }"
+          >
+            <div class="ui-color-picker__swatch-checkerboard" />
+          </div>
+          <span class="ui-color-picker__preview-text">{{ textInput }}</span>
+        </div>
+
+        <button
+          v-if="hasEyeDropper"
+          type="button"
+          class="ui-color-picker__eyedropper"
+          title="Pick color from screen"
+          @click="handleEyeDropper"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M2 22l1-1h3l9-9" />
+            <path d="M3 21v-3l9-9" />
+            <path d="M14.5 6.5l3-3a2.12 2.12 0 0 1 3 3l-3 3" />
+            <path d="M12 9l3 3" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </Popover>
+</template>
+
+<style scoped>
+.ui-color-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.ui-color-picker__trigger--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ui-color-picker__swatch {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  cursor: pointer;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.ui-color-picker__swatch-checkerboard {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background-image:
+    linear-gradient(45deg, var(--bg-tertiary) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--bg-tertiary) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--bg-tertiary) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--bg-tertiary) 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+  background-color: var(--bg-primary);
+}
+
+.ui-color-picker__input {
+  width: 100px;
+}
+
+.ui-color-picker__input :deep(input) {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+}
+
+.ui-color-picker__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-3);
+}
+
+.ui-color-picker__sliders {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.ui-color-picker__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.ui-color-picker__preview {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-color-picker__preview-swatch {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-default);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.ui-color-picker__preview-text {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-color-picker__eyedropper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-default),
+              color var(--duration-fast) var(--ease-default);
+}
+
+.ui-color-picker__eyedropper:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.ui-color-picker__eyedropper:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+</style>

package/src/components/ColorPicker/ColorSlider.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { clamp } from '../../utils/color'
+
+export interface ColorSliderProps {
+  /** Current value (0-1 for alpha, 0-360 for hue) */
+  modelValue: number
+  /** Slider type */
+  type: 'hue' | 'alpha'
+  /** Current color for alpha gradient (hex without alpha) */
+  color?: string
+}
+
+const props = withDefaults(defineProps<ColorSliderProps>(), {
+  color: '#ff0000'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const trackRef = ref<HTMLDivElement | null>(null)
+const isDragging = ref(false)
+
+const thumbPosition = computed(() => {
+  if (props.type === 'hue') {
+    return (props.modelValue / 360) * 100
+  }
+  return props.modelValue * 100
+})
+
+const alphaGradient = computed(() => {
+  if (props.type !== 'alpha') return ''
+  return `linear-gradient(to right, transparent, ${props.color})`
+})
+
+function updateValue(clientX: number) {
+  if (!trackRef.value) return
+
+  const rect = trackRef.value.getBoundingClientRect()
+  const x = clientX - rect.left
+  const ratio = clamp(x / rect.width, 0, 1)
+
+  if (props.type === 'hue') {
+    emit('update:modelValue', Math.round(ratio * 360))
+  } else {
+    emit('update:modelValue', ratio)
+  }
+}
+
+function handleMouseDown(event: MouseEvent) {
+  event.preventDefault()
+  isDragging.value = true
+  updateValue(event.clientX)
+
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!isDragging.value) return
+  updateValue(event.clientX)
+}
+
+function handleMouseUp() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+}
+
+function handleTouchStart(event: TouchEvent) {
+  event.preventDefault()
+  isDragging.value = true
+  updateValue(event.touches[0].clientX)
+
+  document.addEventListener('touchmove', handleTouchMove, { passive: false })
+  document.addEventListener('touchend', handleTouchEnd)
+}
+
+function handleTouchMove(event: TouchEvent) {
+  event.preventDefault()
+  if (!isDragging.value) return
+  updateValue(event.touches[0].clientX)
+}
+
+function handleTouchEnd() {
+  isDragging.value = false
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+}
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+})
+</script>
+
+<template>
+  <div
+    ref="trackRef"
+    class="ui-color-slider"
+    :class="[
+      `ui-color-slider--${type}`,
+      { 'ui-color-slider--dragging': isDragging }
+    ]"
+    @mousedown="handleMouseDown"
+    @touchstart="handleTouchStart"
+  >
+    <div
+      v-if="type === 'alpha'"
+      class="ui-color-slider__checkerboard"
+    />
+    <div
+      class="ui-color-slider__gradient"
+      :style="type === 'alpha' ? { background: alphaGradient } : undefined"
+    />
+    <div
+      class="ui-color-slider__thumb"
+      :style="{ left: `${thumbPosition}%` }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.ui-color-slider {
+  position: relative;
+  height: 12px;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+
+.ui-color-slider__checkerboard {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image:
+    linear-gradient(45deg, var(--bg-tertiary) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--bg-tertiary) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--bg-tertiary) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--bg-tertiary) 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+  background-color: var(--bg-primary);
+}
+
+.ui-color-slider__gradient {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+
+.ui-color-slider--hue .ui-color-slider__gradient {
+  background: linear-gradient(
+    to right,
+    hsl(0, 100%, 50%),
+    hsl(60, 100%, 50%),
+    hsl(120, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(240, 100%, 50%),
+    hsl(300, 100%, 50%),
+    hsl(360, 100%, 50%)
+  );
+}
+
+.ui-color-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  background: var(--bg-primary);
+  border: 2px solid var(--bg-primary);
+  box-shadow: 0 0 0 1px var(--border-default), var(--shadow-md);
+  transform: translate(-50%, -50%);
+  transition: box-shadow var(--duration-fast) var(--ease-default);
+}
+
+.ui-color-slider:hover .ui-color-slider__thumb,
+.ui-color-slider--dragging .ui-color-slider__thumb {
+  box-shadow: 0 0 0 1px var(--border-default), var(--shadow-lg);
+}
+
+.ui-color-slider:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+</style>

package/src/components/ColorPicker/index.ts

@@ -0,0 +1,7 @@
+export { default as ColorPicker } from './ColorPicker.vue'
+export { default as ColorArea } from './ColorArea.vue'
+export { default as ColorSlider } from './ColorSlider.vue'
+
+export type { ColorPickerProps, ColorFormat } from './ColorPicker.vue'
+export type { ColorAreaProps } from './ColorArea.vue'
+export type { ColorSliderProps } from './ColorSlider.vue'