@sabrenski/spire-ui 0.0.1

package/src/components/Progress/Progress.vue

@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type ProgressVariant = 'linear' | 'circular'
+export type ProgressSize = 'sm' | 'md' | 'lg'
+export type ProgressColor = 'primary' | 'success' | 'warning' | 'error'
+
+export interface ProgressProps {
+  /** Current progress value (0-100) */
+  value?: number
+  /** Display variant */
+  variant?: ProgressVariant
+  /** Size of the progress indicator */
+  size?: ProgressSize
+  /** Color theme */
+  color?: ProgressColor
+  /** Show indeterminate animation (unknown duration) */
+  indeterminate?: boolean
+  /** Show diagonal stripes (linear only) */
+  striped?: boolean
+  /** Animate stripes (linear only, requires striped) */
+  animated?: boolean
+  /** Show percentage value label */
+  showValue?: boolean
+  /** Accessible label describing the progress */
+  label?: string
+  /** Stroke width for circular variant (default auto based on size) */
+  strokeWidth?: number
+}
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+  value: 0,
+  variant: 'linear',
+  size: 'md',
+  color: 'primary',
+  indeterminate: false,
+  striped: false,
+  animated: false,
+  showValue: false
+})
+
+const clampedValue = computed(() => Math.min(100, Math.max(0, props.value)))
+
+const linearClasses = computed(() => [
+  'ui-progress-linear',
+  `ui-progress-linear--${props.size}`,
+  `ui-progress-linear--${props.color}`,
+  {
+    'ui-progress-linear--indeterminate': props.indeterminate,
+    'ui-progress-linear--striped': props.striped && !props.indeterminate,
+    'ui-progress-linear--animated': props.animated && props.striped && !props.indeterminate
+  }
+])
+
+const circularClasses = computed(() => [
+  'ui-progress-circular',
+  `ui-progress-circular--${props.size}`,
+  `ui-progress-circular--${props.color}`,
+  {
+    'ui-progress-circular--indeterminate': props.indeterminate
+  }
+])
+
+const circularSize = computed(() => {
+  const sizes = { sm: 32, md: 48, lg: 64 }
+  return sizes[props.size]
+})
+
+const circularStrokeWidth = computed(() => {
+  if (props.strokeWidth) return props.strokeWidth
+  const widths = { sm: 3, md: 4, lg: 5 }
+  return widths[props.size]
+})
+
+const circularRadius = computed(() => (circularSize.value - circularStrokeWidth.value) / 2)
+const circularCircumference = computed(() => 2 * Math.PI * circularRadius.value)
+const circularOffset = computed(() =>
+  circularCircumference.value - (clampedValue.value / 100) * circularCircumference.value
+)
+
+const ariaAttrs = computed(() => {
+  const attrs: Record<string, string | number | undefined> = {
+    role: 'progressbar',
+    'aria-valuemin': 0,
+    'aria-valuemax': 100,
+    'aria-label': props.label
+  }
+  if (!props.indeterminate) {
+    attrs['aria-valuenow'] = clampedValue.value
+  }
+  return attrs
+})
+
+const indicatorStyle = computed(() => ({
+  width: `${clampedValue.value}%`
+}))
+</script>
+
+<template>
+  <!-- Linear Progress -->
+  <div
+    v-if="variant === 'linear'"
+    :class="linearClasses"
+    v-bind="ariaAttrs"
+  >
+    <div class="ui-progress-linear__track">
+      <div
+        class="ui-progress-linear__indicator"
+        :style="!indeterminate ? indicatorStyle : undefined"
+      />
+    </div>
+    <span v-if="showValue && !indeterminate" class="ui-progress-linear__value">
+      {{ clampedValue }}%
+    </span>
+  </div>
+
+  <!-- Circular Progress -->
+  <div
+    v-else
+    :class="circularClasses"
+    v-bind="ariaAttrs"
+  >
+    <svg
+      :width="circularSize"
+      :height="circularSize"
+      :viewBox="`0 0 ${circularSize} ${circularSize}`"
+      class="ui-progress-circular__svg"
+    >
+      <!-- Track circle -->
+      <circle
+        class="ui-progress-circular__track"
+        :cx="circularSize / 2"
+        :cy="circularSize / 2"
+        :r="circularRadius"
+        fill="none"
+        :stroke-width="circularStrokeWidth"
+      />
+      <!-- Indicator circle -->
+      <circle
+        class="ui-progress-circular__indicator"
+        :cx="circularSize / 2"
+        :cy="circularSize / 2"
+        :r="circularRadius"
+        fill="none"
+        :stroke-width="circularStrokeWidth"
+        :stroke-dasharray="circularCircumference"
+        :stroke-dashoffset="indeterminate ? circularCircumference * 0.75 : circularOffset"
+        stroke-linecap="round"
+      />
+    </svg>
+    <span v-if="showValue && !indeterminate" class="ui-progress-circular__value">
+      {{ clampedValue }}%
+    </span>
+  </div>
+</template>
+
+<style scoped>
+/* ============================================
+   LINEAR PROGRESS
+   ============================================ */
+
+.ui-progress-linear {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  font-family: var(--font-sans);
+}
+
+.ui-progress-linear__track {
+  flex: 1;
+  background-color: var(--progress-track);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+/* Sizes */
+.ui-progress-linear--sm .ui-progress-linear__track {
+  height: 4px;
+}
+
+.ui-progress-linear--md .ui-progress-linear__track {
+  height: 8px;
+}
+
+.ui-progress-linear--lg .ui-progress-linear__track {
+  height: 12px;
+}
+
+/* Indicator */
+.ui-progress-linear__indicator {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width var(--duration-normal) var(--ease-out);
+}
+
+/* Colors */
+.ui-progress-linear--primary .ui-progress-linear__indicator {
+  background-color: var(--progress-primary);
+}
+
+.ui-progress-linear--success .ui-progress-linear__indicator {
+  background-color: var(--progress-success);
+}
+
+.ui-progress-linear--warning .ui-progress-linear__indicator {
+  background-color: var(--progress-warning);
+}
+
+.ui-progress-linear--error .ui-progress-linear__indicator {
+  background-color: var(--progress-error);
+}
+
+/* Striped pattern */
+.ui-progress-linear--striped .ui-progress-linear__indicator {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+/* Animated stripes (barber pole effect) */
+.ui-progress-linear--animated .ui-progress-linear__indicator {
+  animation: progress-stripes 1s linear infinite;
+}
+
+@keyframes progress-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+/* Indeterminate animation */
+.ui-progress-linear--indeterminate .ui-progress-linear__indicator {
+  width: 30%;
+  animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+/* Value label */
+.ui-progress-linear__value {
+  flex-shrink: 0;
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--progress-value-text);
+  min-width: 3ch;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================
+   CIRCULAR PROGRESS
+   ============================================ */
+
+.ui-progress-circular {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+}
+
+.ui-progress-circular__svg {
+  transform: rotate(-90deg);
+}
+
+/* Track circle */
+.ui-progress-circular__track {
+  stroke: var(--progress-track);
+}
+
+/* Indicator circle */
+.ui-progress-circular__indicator {
+  transition: stroke-dashoffset var(--duration-normal) var(--ease-out);
+}
+
+/* Colors */
+.ui-progress-circular--primary .ui-progress-circular__indicator {
+  stroke: var(--progress-primary);
+}
+
+.ui-progress-circular--success .ui-progress-circular__indicator {
+  stroke: var(--progress-success);
+}
+
+.ui-progress-circular--warning .ui-progress-circular__indicator {
+  stroke: var(--progress-warning);
+}
+
+.ui-progress-circular--error .ui-progress-circular__indicator {
+  stroke: var(--progress-error);
+}
+
+/* Indeterminate animation (Google-style spinner) */
+.ui-progress-circular--indeterminate .ui-progress-circular__svg {
+  animation: progress-circular-rotate 2s linear infinite;
+}
+
+.ui-progress-circular--indeterminate .ui-progress-circular__indicator {
+  animation: progress-circular-dash 1.5s ease-in-out infinite;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+}
+
+@keyframes progress-circular-rotate {
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+@keyframes progress-circular-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
+}
+
+/* Value label (centered inside circle) */
+.ui-progress-circular__value {
+  position: absolute;
+  font-weight: var(--font-medium);
+  color: var(--progress-value-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.ui-progress-circular--sm .ui-progress-circular__value {
+  font-size: var(--text-xs);
+}
+
+.ui-progress-circular--md .ui-progress-circular__value {
+  font-size: var(--text-sm);
+}
+
+.ui-progress-circular--lg .ui-progress-circular__value {
+  font-size: var(--text-base);
+}
+</style>

package/src/components/Progress/index.ts

@@ -0,0 +1,7 @@
+export { default as Progress } from './Progress.vue'
+export type {
+  ProgressProps,
+  ProgressVariant,
+  ProgressSize,
+  ProgressColor
+} from './Progress.vue'

package/src/components/Radio/Radio.test.ts

@@ -0,0 +1,216 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Radio from './Radio.vue'
+
+describe('Radio', () => {
+  describe('Rendering', () => {
+    it('renders as a label element', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('label').exists()).toBe(true)
+    })
+
+    it('renders native radio input', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('input[type="radio"]').exists()).toBe(true)
+    })
+
+    it('renders custom box element', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('.ui-radio__box').exists()).toBe(true)
+    })
+
+    it('does not render dot when unchecked', () => {
+      const wrapper = mount(Radio, {
+        props: { modelValue: 'b', value: 'a' }
+      })
+      expect(wrapper.find('.ui-radio__dot').exists()).toBe(false)
+    })
+
+    it('renders dot when checked', () => {
+      const wrapper = mount(Radio, {
+        props: { modelValue: 'a', value: 'a' }
+      })
+      expect(wrapper.find('.ui-radio__dot').exists()).toBe(true)
+    })
+  })
+
+  describe('v-model', () => {
+    it('is unchecked when modelValue differs from value', () => {
+      const wrapper = mount(Radio, {
+        props: { modelValue: 'other', value: 'a' }
+      })
+      const input = wrapper.find('input')
+      expect((input.element as HTMLInputElement).checked).toBe(false)
+    })
+
+    it('is checked when modelValue matches value', () => {
+      const wrapper = mount(Radio, {
+        props: { modelValue: 'a', value: 'a' }
+      })
+      const input = wrapper.find('input')
+      expect((input.element as HTMLInputElement).checked).toBe(true)
+      expect(wrapper.find('.ui-radio').classes()).toContain('ui-radio--checked')
+    })
+
+    it('emits update:modelValue on change', async () => {
+      const wrapper = mount(Radio, {
+        props: { modelValue: 'other', value: 'a' }
+      })
+      await wrapper.find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['a'])
+    })
+
+    it('emits change event on change', async () => {
+      const wrapper = mount(Radio, {
+        props: { modelValue: 'other', value: 'a' }
+      })
+      await wrapper.find('input').trigger('change')
+      expect(wrapper.emitted('change')?.[0]).toEqual(['a'])
+    })
+
+    it('works with number values', () => {
+      const wrapper = mount(Radio, {
+        props: { modelValue: 1, value: 1 }
+      })
+      expect(wrapper.find('.ui-radio').classes()).toContain('ui-radio--checked')
+    })
+
+    it('works with boolean values', () => {
+      const wrapper = mount(Radio, {
+        props: { modelValue: true, value: true }
+      })
+      expect(wrapper.find('.ui-radio').classes()).toContain('ui-radio--checked')
+    })
+  })
+
+  describe('Radio group behavior', () => {
+    it('uses name attribute for grouping', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', name: 'group1' }
+      })
+      expect(wrapper.find('input').attributes('name')).toBe('group1')
+    })
+
+    it('passes value to native input', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'option-a' }
+      })
+      expect(wrapper.find('input').attributes('value')).toBe('option-a')
+    })
+  })
+
+  describe('Size variants', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+
+    sizes.forEach(size => {
+      it(`applies ${size} size class`, () => {
+        const wrapper = mount(Radio, {
+          props: { value: 'a', size }
+        })
+        expect(wrapper.find('.ui-radio').classes()).toContain(`ui-radio--${size}`)
+      })
+    })
+
+    it('defaults to md size', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('.ui-radio').classes()).toContain('ui-radio--md')
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('applies disabled attribute to input', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', disabled: true }
+      })
+      expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+    })
+
+    it('applies disabled class', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', disabled: true }
+      })
+      expect(wrapper.find('.ui-radio').classes()).toContain('ui-radio--disabled')
+    })
+
+    it('does not emit events when disabled', async () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', modelValue: 'other', disabled: true }
+      })
+      await wrapper.find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Label and description', () => {
+    it('renders label text', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', label: 'Option A' }
+      })
+      expect(wrapper.find('.ui-radio__label').text()).toBe('Option A')
+    })
+
+    it('renders description text', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', description: 'This is the first option' }
+      })
+      expect(wrapper.find('.ui-radio__description').text()).toBe('This is the first option')
+    })
+
+    it('renders both label and description', () => {
+      const wrapper = mount(Radio, {
+        props: {
+          value: 'a',
+          label: 'Option A',
+          description: 'This is the first option'
+        }
+      })
+      expect(wrapper.find('.ui-radio__label').exists()).toBe(true)
+      expect(wrapper.find('.ui-radio__description').exists()).toBe(true)
+    })
+
+    it('does not render content wrapper when no label or description', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('.ui-radio__content').exists()).toBe(false)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('auto-generates unique id', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('input').attributes('id')).toMatch(/^radio-/)
+    })
+
+    it('uses provided id', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a', id: 'custom-radio' }
+      })
+      expect(wrapper.find('input').attributes('id')).toBe('custom-radio')
+    })
+
+    it('input is visually hidden but accessible', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('.ui-radio__input').exists()).toBe(true)
+    })
+
+    it('custom box has aria-hidden', () => {
+      const wrapper = mount(Radio, {
+        props: { value: 'a' }
+      })
+      expect(wrapper.find('.ui-radio__box').attributes('aria-hidden')).toBe('true')
+    })
+  })
+})