@sabrenski/spire-ui 0.0.1

package/src/components/Radio/Radio.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useId } from '../../composables'
+
+export interface RadioProps {
+  /** Selected value (v-model) - shared across radio group */
+  modelValue?: string | number | boolean
+  /** Value of this radio option */
+  value: string | number | boolean
+  /** Radio size */
+  size?: 'sm' | 'md' | 'lg'
+  /** Disabled state */
+  disabled?: boolean
+  /** Visible label text */
+  label?: string
+  /** Description text below label */
+  description?: string
+  /** HTML name for radio group (required for native behavior) */
+  name?: string
+  /** ID for label association */
+  id?: string
+}
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  size: 'md',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | boolean): void
+  (e: 'change', value: string | number | boolean): void
+}>()
+
+const uid = useId('radio')
+const radioId = computed(() => props.id || uid)
+
+const isChecked = computed(() => props.modelValue === props.value)
+
+function handleChange() {
+  if (props.disabled) return
+  emit('update:modelValue', props.value)
+  emit('change', props.value)
+}
+</script>
+
+<template>
+  <label
+    class="ui-radio"
+    :class="[
+      `ui-radio--${size}`,
+      {
+        'ui-radio--disabled': disabled,
+        'ui-radio--checked': isChecked
+      }
+    ]"
+  >
+    <input
+      :id="radioId"
+      type="radio"
+      :checked="isChecked"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      class="ui-radio__input"
+      @change="handleChange"
+    />
+
+    <span class="ui-radio__box" aria-hidden="true">
+      <span v-if="isChecked" class="ui-radio__dot" />
+    </span>
+
+    <span v-if="label || description" class="ui-radio__content">
+      <span v-if="label" class="ui-radio__label">{{ label }}</span>
+      <span v-if="description" class="ui-radio__description">{{ description }}</span>
+    </span>
+  </label>
+</template>
+
+<style scoped>
+.ui-radio {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ui-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ui-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ui-radio__box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 2px solid var(--radio-border);
+  border-radius: var(--radius-full);
+  background-color: var(--radio-bg);
+  transition:
+    border-color var(--duration-fast) var(--ease-default),
+    box-shadow var(--duration-fast) var(--ease-default);
+}
+
+.ui-radio--checked .ui-radio__box {
+  border-color: var(--radio-checked);
+}
+
+.ui-radio:not(.ui-radio--disabled):hover .ui-radio__box {
+  border-color: var(--radio-border-hover);
+}
+
+.ui-radio--checked:not(.ui-radio--disabled):hover .ui-radio__box {
+  border-color: var(--radio-checked-hover);
+}
+
+.ui-radio__input:focus-visible + .ui-radio__box {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-radio--sm .ui-radio__box {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-radio--md .ui-radio__box {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.ui-radio--lg .ui-radio__box {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.ui-radio__dot {
+  position: absolute;
+  border-radius: var(--radius-full);
+  background-color: var(--radio-checked);
+  animation: radio-scale 0.15s var(--ease-out-back) forwards;
+}
+
+.ui-radio--sm .ui-radio__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.ui-radio--md .ui-radio__dot {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.ui-radio--lg .ui-radio__dot {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+@keyframes radio-scale {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+.ui-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding-top: 1px;
+}
+
+.ui-radio__label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--radio-label);
+  line-height: var(--leading-tight);
+}
+
+.ui-radio__description {
+  font-size: var(--text-xs);
+  color: var(--radio-description);
+  line-height: var(--leading-normal);
+}
+
+.ui-radio--sm .ui-radio__label {
+  font-size: var(--text-xs);
+}
+
+.ui-radio--lg .ui-radio__label {
+  font-size: var(--text-md);
+}
+
+.ui-radio--lg .ui-radio__description {
+  font-size: var(--text-sm);
+}
+</style>

package/src/components/Radio/index.ts

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

package/src/components/Rating/Rating.test.ts

@@ -0,0 +1,319 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Rating from './Rating.vue'
+
+describe('Rating', () => {
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      expect(wrapper.find('.ui-rating').exists()).toBe(true)
+    })
+
+    it('renders correct number of stars based on max', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 0, max: 7 }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      expect(stars).toHaveLength(7)
+    })
+
+    it('defaults to 5 stars', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 0 }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      expect(stars).toHaveLength(5)
+    })
+
+    it('applies size classes', () => {
+      const sm = mount(Rating, { props: { modelValue: 3, size: 'sm' } })
+      const lg = mount(Rating, { props: { modelValue: 3, size: 'lg' } })
+
+      expect(sm.find('.ui-rating--sm').exists()).toBe(true)
+      expect(lg.find('.ui-rating--lg').exists()).toBe(true)
+    })
+
+    it('applies readonly class', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, readonly: true }
+      })
+      expect(wrapper.find('.ui-rating--readonly').exists()).toBe(true)
+    })
+  })
+
+  describe('Star states', () => {
+    it('shows full stars for rating value', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      expect(stars[0].classes()).toContain('ui-rating__star--full')
+      expect(stars[1].classes()).toContain('ui-rating__star--full')
+      expect(stars[2].classes()).toContain('ui-rating__star--full')
+      expect(stars[3].classes()).toContain('ui-rating__star--empty')
+      expect(stars[4].classes()).toContain('ui-rating__star--empty')
+    })
+
+    it('shows half star when allowHalf is true', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 2.5, allowHalf: true }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      expect(stars[0].classes()).toContain('ui-rating__star--full')
+      expect(stars[1].classes()).toContain('ui-rating__star--full')
+      expect(stars[2].classes()).toContain('ui-rating__star--half')
+      expect(stars[3].classes()).toContain('ui-rating__star--empty')
+    })
+
+    it('treats half values as empty when allowHalf is false', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 2.5, allowHalf: false }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      expect(stars[0].classes()).toContain('ui-rating__star--full')
+      expect(stars[1].classes()).toContain('ui-rating__star--full')
+      expect(stars[2].classes()).toContain('ui-rating__star--empty')
+    })
+
+    it('shows all empty stars for zero rating', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 0 }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      stars.forEach(star => {
+        expect(star.classes()).toContain('ui-rating__star--empty')
+      })
+    })
+
+    it('shows all full stars for max rating', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 5, max: 5 }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      stars.forEach(star => {
+        expect(star.classes()).toContain('ui-rating__star--full')
+      })
+    })
+  })
+
+  describe('Mouse interaction', () => {
+    it('emits update:modelValue on click', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 0 }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      await stars[2].trigger('click', { clientX: 100 })
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    })
+
+    it('emits hover event on mousemove', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 0 }
+      })
+      const star = wrapper.findAll('.ui-rating__star')[2]
+      await star.trigger('mousemove', { clientX: 100 })
+
+      expect(wrapper.emitted('hover')).toBeTruthy()
+    })
+
+    it('emits hover with null on mouseleave', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      await wrapper.find('.ui-rating').trigger('mouseleave')
+
+      const hoverEvents = wrapper.emitted('hover')
+      expect(hoverEvents).toBeTruthy()
+      expect(hoverEvents![hoverEvents!.length - 1]).toEqual([null])
+    })
+
+    it('does not emit on click when readonly', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, readonly: true }
+      })
+      const star = wrapper.findAll('.ui-rating__star')[0]
+      await star.trigger('click', { clientX: 50 })
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('does not emit hover when readonly', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, readonly: true }
+      })
+      const star = wrapper.findAll('.ui-rating__star')[0]
+      await star.trigger('mousemove', { clientX: 50 })
+
+      expect(wrapper.emitted('hover')).toBeFalsy()
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    it('increases value with ArrowRight', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([4])
+    })
+
+    it('decreases value with ArrowLeft', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'ArrowLeft' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([2])
+    })
+
+    it('increases value with ArrowUp', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'ArrowUp' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([4])
+    })
+
+    it('decreases value with ArrowDown', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'ArrowDown' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([2])
+    })
+
+    it('goes to min with Home', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'Home' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([0])
+    })
+
+    it('goes to max with End', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, max: 5 }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'End' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([5])
+    })
+
+    it('uses 0.5 step when allowHalf is true', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, allowHalf: true }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([3.5])
+    })
+
+    it('clamps at max', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 5, max: 5 }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('clamps at min (0)', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 0 }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'ArrowLeft' })
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('does not respond when readonly', async () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, readonly: true }
+      })
+      await wrapper.find('.ui-rating').trigger('keydown', { key: 'ArrowRight' })
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has slider role', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      expect(wrapper.find('.ui-rating').attributes('role')).toBe('slider')
+    })
+
+    it('has correct ARIA attributes', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, max: 5 }
+      })
+      const rating = wrapper.find('.ui-rating')
+      expect(rating.attributes('aria-valuemin')).toBe('0')
+      expect(rating.attributes('aria-valuemax')).toBe('5')
+      expect(rating.attributes('aria-valuenow')).toBe('3')
+    })
+
+    it('has aria-label', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, label: 'Product rating' }
+      })
+      expect(wrapper.find('.ui-rating').attributes('aria-label')).toBe('Product rating')
+    })
+
+    it('has default aria-label', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      expect(wrapper.find('.ui-rating').attributes('aria-label')).toBe('Rating')
+    })
+
+    it('has aria-readonly when readonly', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, readonly: true }
+      })
+      expect(wrapper.find('.ui-rating').attributes('aria-readonly')).toBe('true')
+    })
+
+    it('is focusable when not readonly', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3 }
+      })
+      expect(wrapper.find('.ui-rating').attributes('tabindex')).toBe('0')
+    })
+
+    it('is not focusable when readonly', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3, readonly: true }
+      })
+      expect(wrapper.find('.ui-rating').attributes('tabindex')).toBe('-1')
+    })
+  })
+
+  describe('Edge cases', () => {
+    it('handles zero max gracefully', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 0, max: 0 }
+      })
+      expect(wrapper.findAll('.ui-rating__star')).toHaveLength(0)
+    })
+
+    it('handles decimal values', () => {
+      const wrapper = mount(Rating, {
+        props: { modelValue: 3.7, allowHalf: true }
+      })
+      const stars = wrapper.findAll('.ui-rating__star')
+      expect(stars[0].classes()).toContain('ui-rating__star--full')
+      expect(stars[1].classes()).toContain('ui-rating__star--full')
+      expect(stars[2].classes()).toContain('ui-rating__star--full')
+      expect(stars[3].classes()).toContain('ui-rating__star--half')
+    })
+  })
+})