@sabrenski/spire-ui 0.0.1

package/src/components/ChoiceChipGroup/ChoiceChipGroup.test.ts

@@ -0,0 +1,151 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ChoiceChipGroup from './ChoiceChipGroup.vue'
+import ChoiceChip from '../ChoiceChip/ChoiceChip.vue'
+import { h } from 'vue'
+
+describe('ChoiceChipGroup', () => {
+  describe('Rendering', () => {
+    it('renders as a div', () => {
+      const wrapper = mount(ChoiceChipGroup)
+      expect(wrapper.element.tagName).toBe('DIV')
+    })
+
+    it('renders slot content', () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        slots: {
+          default: () => [
+            h(ChoiceChip, { label: 'A', value: 'a' }),
+            h(ChoiceChip, { label: 'B', value: 'b' })
+          ]
+        }
+      })
+      expect(wrapper.text()).toContain('A')
+      expect(wrapper.text()).toContain('B')
+    })
+
+    it('has role="group"', () => {
+      const wrapper = mount(ChoiceChipGroup)
+      expect(wrapper.attributes('role')).toBe('group')
+    })
+  })
+
+  describe('Multiple selection (default)', () => {
+    it('adds value to array on click', async () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { type: 'multiple', modelValue: [] },
+        slots: {
+          default: () => [
+            h(ChoiceChip, { label: 'Price', value: 'price' }),
+            h(ChoiceChip, { label: 'Date', value: 'date' })
+          ]
+        }
+      })
+
+      await wrapper.findAllComponents(ChoiceChip)[0].find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['price']])
+    })
+
+    it('removes value from array when already selected', async () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { type: 'multiple', modelValue: ['price', 'date'] },
+        slots: {
+          default: () => [
+            h(ChoiceChip, { label: 'Price', value: 'price' }),
+            h(ChoiceChip, { label: 'Date', value: 'date' })
+          ]
+        }
+      })
+
+      await wrapper.findAllComponents(ChoiceChip)[0].find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['date']])
+    })
+
+    it('allows multiple values to be selected', async () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { type: 'multiple', modelValue: ['price'] },
+        slots: {
+          default: () => [
+            h(ChoiceChip, { label: 'Price', value: 'price' }),
+            h(ChoiceChip, { label: 'Date', value: 'date' })
+          ]
+        }
+      })
+
+      await wrapper.findAllComponents(ChoiceChip)[1].find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['price', 'date']])
+    })
+  })
+
+  describe('Single selection', () => {
+    it('emits selected value on click', async () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { type: 'single', modelValue: undefined },
+        slots: {
+          default: () => [
+            h(ChoiceChip, { label: 'Price', value: 'price' }),
+            h(ChoiceChip, { label: 'Date', value: 'date' })
+          ]
+        }
+      })
+
+      await wrapper.findAllComponents(ChoiceChip)[0].find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['price'])
+    })
+
+    it('emits undefined when same value clicked (toggle off)', async () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { type: 'single', modelValue: 'price' },
+        slots: {
+          default: () => [
+            h(ChoiceChip, { label: 'Price', value: 'price' }),
+            h(ChoiceChip, { label: 'Date', value: 'date' })
+          ]
+        }
+      })
+
+      await wrapper.findAllComponents(ChoiceChip)[0].find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([undefined])
+    })
+
+    it('switches selection when different value clicked', async () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { type: 'single', modelValue: 'price' },
+        slots: {
+          default: () => [
+            h(ChoiceChip, { label: 'Price', value: 'price' }),
+            h(ChoiceChip, { label: 'Date', value: 'date' })
+          ]
+        }
+      })
+
+      await wrapper.findAllComponents(ChoiceChip)[1].find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['date'])
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('applies disabled class', () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { disabled: true }
+      })
+      expect(wrapper.classes()).toContain('ui-choice-chip-group--disabled')
+    })
+
+    it('sets aria-disabled', () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { disabled: true }
+      })
+      expect(wrapper.attributes('aria-disabled')).toBe('true')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has aria-label when label prop provided', () => {
+      const wrapper = mount(ChoiceChipGroup, {
+        props: { label: 'Filter by' }
+      })
+      expect(wrapper.attributes('aria-label')).toBe('Filter by')
+    })
+  })
+})

package/src/components/ChoiceChipGroup/ChoiceChipGroup.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { provide, toRef } from 'vue'
+
+export interface ChoiceChipGroupProps {
+  /** Selected value(s) - single value for 'single' type, array for 'multiple' */
+  modelValue?: string | number | (string | number)[]
+  /** Selection type */
+  type?: 'single' | 'multiple'
+  /** Disabled state for all chips */
+  disabled?: boolean
+  /** Accessible label for the group */
+  label?: string
+}
+
+const props = withDefaults(defineProps<ChoiceChipGroupProps>(), {
+  type: 'multiple',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | (string | number)[] | undefined): void
+  (e: 'change', value: string | number | (string | number)[] | undefined): void
+}>()
+
+function toggle(value: string | number) {
+  if (props.type === 'single') {
+    const newValue = props.modelValue === value ? undefined : value
+    emit('update:modelValue', newValue)
+    emit('change', newValue)
+  } else {
+    const currentArray = Array.isArray(props.modelValue) ? props.modelValue : []
+    const newArray = currentArray.includes(value)
+      ? currentArray.filter(v => v !== value)
+      : [...currentArray, value]
+    emit('update:modelValue', newArray)
+    emit('change', newArray)
+  }
+}
+
+provide('choiceChipGroup', {
+  modelValue: toRef(props, 'modelValue'),
+  toggle,
+  type: props.type,
+  disabled: props.disabled
+})
+</script>
+
+<template>
+  <div
+    role="group"
+    :aria-label="label"
+    :aria-disabled="disabled || undefined"
+    class="ui-choice-chip-group"
+    :class="{ 'ui-choice-chip-group--disabled': disabled }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-choice-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.ui-choice-chip-group--disabled {
+  opacity: 0.5;
+}
+</style>

package/src/components/ChoiceChipGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as ChoiceChipGroup } from './ChoiceChipGroup.vue'
+export type { ChoiceChipGroupProps } from './ChoiceChipGroup.vue'

package/src/components/ColorPicker/ColorArea.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { clamp } from '../../utils/color'
+
+export interface ColorAreaProps {
+  /** Hue value (0-360) */
+  hue: number
+  /** Saturation value (0-1) */
+  saturation: number
+  /** Value/Brightness (0-1) */
+  value: number
+}
+
+const props = defineProps<ColorAreaProps>()
+
+const emit = defineEmits<{
+  'update:saturation': [value: number]
+  'update:value': [value: number]
+}>()
+
+const areaRef = ref<HTMLDivElement | null>(null)
+const isDragging = ref(false)
+
+const thumbPosition = computed(() => ({
+  left: `${props.saturation * 100}%`,
+  top: `${(1 - props.value) * 100}%`
+}))
+
+const hueColor = computed(() => `hsl(${props.hue}, 100%, 50%)`)
+
+function updateValue(clientX: number, clientY: number) {
+  if (!areaRef.value) return
+
+  const rect = areaRef.value.getBoundingClientRect()
+  const x = clientX - rect.left
+  const y = clientY - rect.top
+
+  const saturation = clamp(x / rect.width, 0, 1)
+  const value = clamp(1 - y / rect.height, 0, 1)
+
+  emit('update:saturation', saturation)
+  emit('update:value', value)
+}
+
+function handleMouseDown(event: MouseEvent) {
+  event.preventDefault()
+  isDragging.value = true
+  updateValue(event.clientX, event.clientY)
+
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!isDragging.value) return
+  updateValue(event.clientX, event.clientY)
+}
+
+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, event.touches[0].clientY)
+
+  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, event.touches[0].clientY)
+}
+
+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="areaRef"
+    class="ui-color-area"
+    :class="{ 'ui-color-area--dragging': isDragging }"
+    :style="{ '--hue-color': hueColor }"
+    @mousedown="handleMouseDown"
+    @touchstart="handleTouchStart"
+  >
+    <div class="ui-color-area__gradient ui-color-area__gradient--saturation" />
+    <div class="ui-color-area__gradient ui-color-area__gradient--value" />
+    <div
+      class="ui-color-area__thumb"
+      :style="thumbPosition"
+    />
+  </div>
+</template>
+
+<style scoped>
+.ui-color-area {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  border-radius: var(--radius-md);
+  background: var(--hue-color);
+  cursor: crosshair;
+  user-select: none;
+  touch-action: none;
+  overflow: hidden;
+}
+
+.ui-color-area__gradient {
+  position: absolute;
+  inset: 0;
+}
+
+.ui-color-area__gradient--saturation {
+  background: linear-gradient(to right, white, transparent);
+}
+
+.ui-color-area__gradient--value {
+  background: linear-gradient(to top, black, transparent);
+}
+
+.ui-color-area__thumb {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--bg-primary);
+  box-shadow: 0 0 0 1px var(--border-default), var(--shadow-md);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  transition: box-shadow var(--duration-fast) var(--ease-default);
+}
+
+.ui-color-area:hover .ui-color-area__thumb,
+.ui-color-area--dragging .ui-color-area__thumb {
+  box-shadow: 0 0 0 1px var(--border-default), var(--shadow-lg);
+}
+
+.ui-color-area:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+</style>

package/src/components/ColorPicker/ColorPicker.test.ts

@@ -0,0 +1,250 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ColorPicker from './ColorPicker.vue'
+import ColorArea from './ColorArea.vue'
+import ColorSlider from './ColorSlider.vue'
+import {
+  hexToRgb,
+  rgbToHex,
+  rgbToHsv,
+  hsvToRgb,
+  hexToHsv,
+  hsvToHex,
+  oklchToRgb,
+  rgbToOklch,
+  parseColorString,
+  formatColor
+} from '../../utils/color'
+
+describe('Color Utilities', () => {
+  describe('hexToRgb', () => {
+    it('converts 6-digit hex', () => {
+      expect(hexToRgb('#ff0000')).toEqual({ r: 255, g: 0, b: 0 })
+      expect(hexToRgb('#00ff00')).toEqual({ r: 0, g: 255, b: 0 })
+      expect(hexToRgb('#0000ff')).toEqual({ r: 0, g: 0, b: 255 })
+      expect(hexToRgb('#ffffff')).toEqual({ r: 255, g: 255, b: 255 })
+      expect(hexToRgb('#000000')).toEqual({ r: 0, g: 0, b: 0 })
+    })
+
+    it('converts 3-digit hex', () => {
+      expect(hexToRgb('#f00')).toEqual({ r: 255, g: 0, b: 0 })
+      expect(hexToRgb('#0f0')).toEqual({ r: 0, g: 255, b: 0 })
+      expect(hexToRgb('#00f')).toEqual({ r: 0, g: 0, b: 255 })
+    })
+  })
+
+  describe('rgbToHex', () => {
+    it('converts RGB to hex', () => {
+      expect(rgbToHex({ r: 255, g: 0, b: 0 })).toBe('#ff0000')
+      expect(rgbToHex({ r: 0, g: 255, b: 0 })).toBe('#00ff00')
+      expect(rgbToHex({ r: 0, g: 0, b: 255 })).toBe('#0000ff')
+    })
+  })
+
+  describe('rgbToHsv / hsvToRgb', () => {
+    it('converts RGB to HSV and back', () => {
+      const testColors = [
+        { r: 255, g: 0, b: 0 },
+        { r: 0, g: 255, b: 0 },
+        { r: 0, g: 0, b: 255 },
+        { r: 255, g: 255, b: 0 },
+        { r: 128, g: 128, b: 128 }
+      ]
+
+      testColors.forEach(rgb => {
+        const hsv = rgbToHsv(rgb)
+        const backToRgb = hsvToRgb(hsv)
+        expect(backToRgb.r).toBeCloseTo(rgb.r, 0)
+        expect(backToRgb.g).toBeCloseTo(rgb.g, 0)
+        expect(backToRgb.b).toBeCloseTo(rgb.b, 0)
+      })
+    })
+
+    it('handles grayscale (no hue)', () => {
+      const gray = rgbToHsv({ r: 128, g: 128, b: 128 })
+      expect(gray.s).toBe(0)
+    })
+  })
+
+  describe('hexToHsv / hsvToHex', () => {
+    it('converts hex to HSV and back', () => {
+      const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']
+
+      colors.forEach(hex => {
+        const hsv = hexToHsv(hex)
+        const backToHex = hsvToHex(hsv)
+        expect(backToHex).toBe(hex)
+      })
+    })
+  })
+
+  describe('OKLCH conversions', () => {
+    it('converts RGB to OKLCH and back', () => {
+      const testColors = [
+        { r: 255, g: 0, b: 0 },
+        { r: 0, g: 255, b: 0 },
+        { r: 0, g: 0, b: 255 },
+        { r: 255, g: 255, b: 255 },
+        { r: 0, g: 0, b: 0 }
+      ]
+
+      testColors.forEach(rgb => {
+        const oklch = rgbToOklch(rgb)
+        const backToRgb = oklchToRgb(oklch)
+        expect(backToRgb.r).toBeCloseTo(rgb.r, 0)
+        expect(backToRgb.g).toBeCloseTo(rgb.g, 0)
+        expect(backToRgb.b).toBeCloseTo(rgb.b, 0)
+      })
+    })
+  })
+
+  describe('parseColorString', () => {
+    it('parses hex colors', () => {
+      const result = parseColorString('#ff0000')
+      expect(result).not.toBeNull()
+      expect(result!.format).toBe('hex')
+      expect(result!.alpha).toBe(1)
+    })
+
+    it('parses hex with alpha', () => {
+      const result = parseColorString('#ff000080')
+      expect(result).not.toBeNull()
+      expect(result!.format).toBe('hex')
+      expect(result!.alpha).toBeCloseTo(0.5, 1)
+    })
+
+    it('parses rgb colors', () => {
+      const result = parseColorString('rgb(255, 0, 0)')
+      expect(result).not.toBeNull()
+      expect(result!.format).toBe('rgb')
+    })
+
+    it('parses rgba colors', () => {
+      const result = parseColorString('rgba(255, 0, 0, 0.5)')
+      expect(result).not.toBeNull()
+      expect(result!.format).toBe('rgb')
+      expect(result!.alpha).toBe(0.5)
+    })
+
+    it('parses oklch colors', () => {
+      const result = parseColorString('oklch(62.8% 0.258 29.2)')
+      expect(result).not.toBeNull()
+      expect(result!.format).toBe('oklch')
+    })
+
+    it('returns null for invalid colors', () => {
+      expect(parseColorString('invalid')).toBeNull()
+      expect(parseColorString('')).toBeNull()
+    })
+  })
+
+  describe('formatColor', () => {
+    it('formats as hex', () => {
+      const hsv = { h: 0, s: 1, v: 1 }
+      expect(formatColor(hsv, 1, 'hex')).toBe('#ff0000')
+    })
+
+    it('formats hex with alpha', () => {
+      const hsv = { h: 0, s: 1, v: 1 }
+      expect(formatColor(hsv, 0.5, 'hex')).toBe('#ff000080')
+    })
+
+    it('formats as rgb', () => {
+      const hsv = { h: 0, s: 1, v: 1 }
+      expect(formatColor(hsv, 1, 'rgb')).toBe('rgb(255, 0, 0)')
+    })
+
+    it('formats as rgba', () => {
+      const hsv = { h: 0, s: 1, v: 1 }
+      expect(formatColor(hsv, 0.5, 'rgb')).toBe('rgba(255, 0, 0, 0.5)')
+    })
+
+    it('formats as oklch', () => {
+      const hsv = { h: 0, s: 1, v: 1 }
+      const result = formatColor(hsv, 1, 'oklch')
+      expect(result).toMatch(/^oklch\([\d.]+% [\d.]+ [\d.]+\)$/)
+    })
+  })
+})
+
+describe('ColorSlider', () => {
+  it('renders hue slider', () => {
+    const wrapper = mount(ColorSlider, {
+      props: { modelValue: 180, type: 'hue' }
+    })
+    expect(wrapper.classes()).toContain('ui-color-slider--hue')
+  })
+
+  it('renders alpha slider', () => {
+    const wrapper = mount(ColorSlider, {
+      props: { modelValue: 0.5, type: 'alpha', color: '#ff0000' }
+    })
+    expect(wrapper.classes()).toContain('ui-color-slider--alpha')
+    expect(wrapper.find('.ui-color-slider__checkerboard').exists()).toBe(true)
+  })
+
+  it('positions thumb based on hue value', () => {
+    const wrapper = mount(ColorSlider, {
+      props: { modelValue: 180, type: 'hue' }
+    })
+    const thumb = wrapper.find('.ui-color-slider__thumb')
+    expect(thumb.attributes('style')).toContain('left: 50%')
+  })
+
+  it('positions thumb based on alpha value', () => {
+    const wrapper = mount(ColorSlider, {
+      props: { modelValue: 0.5, type: 'alpha', color: '#ff0000' }
+    })
+    const thumb = wrapper.find('.ui-color-slider__thumb')
+    expect(thumb.attributes('style')).toContain('left: 50%')
+  })
+})
+
+describe('ColorArea', () => {
+  it('renders with hue background', () => {
+    const wrapper = mount(ColorArea, {
+      props: { hue: 0, saturation: 1, value: 1 }
+    })
+    expect(wrapper.classes()).toContain('ui-color-area')
+    expect(wrapper.attributes('style')).toContain('--hue-color')
+  })
+
+  it('positions thumb based on saturation and value', () => {
+    const wrapper = mount(ColorArea, {
+      props: { hue: 0, saturation: 0.5, value: 0.5 }
+    })
+    const thumb = wrapper.find('.ui-color-area__thumb')
+    expect(thumb.attributes('style')).toContain('left: 50%')
+    expect(thumb.attributes('style')).toContain('top: 50%')
+  })
+})
+
+describe('ColorPicker', () => {
+  it('renders with swatch', () => {
+    const wrapper = mount(ColorPicker, {
+      props: { modelValue: '#ff0000' }
+    })
+    expect(wrapper.find('.ui-color-picker__swatch').exists()).toBe(true)
+  })
+
+  it('renders with input by default', () => {
+    const wrapper = mount(ColorPicker, {
+      props: { modelValue: '#ff0000' }
+    })
+    expect(wrapper.find('.ui-color-picker__input').exists()).toBe(true)
+  })
+
+  it('hides input when swatchOnly is true', () => {
+    const wrapper = mount(ColorPicker, {
+      props: { modelValue: '#ff0000', swatchOnly: true }
+    })
+    expect(wrapper.find('.ui-color-picker__input').exists()).toBe(false)
+  })
+
+  it('disables when disabled prop is true', () => {
+    const wrapper = mount(ColorPicker, {
+      props: { modelValue: '#ff0000', disabled: true }
+    })
+    expect(wrapper.find('.ui-color-picker__trigger--disabled').exists()).toBe(true)
+  })
+})