@sabrenski/spire-ui 0.0.1

package/src/components/Stepper/StepperSeparator.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { StepperKey, StepperItemKey } from './keys'
+
+const stepper = inject(StepperKey)
+const stepperItem = inject(StepperItemKey)
+
+if (!stepper || !stepperItem) {
+  throw new Error('StepperSeparator must be used within StepperItem')
+}
+
+const isCompleted = computed(() => stepperItem.state.value === 'completed')
+
+const separatorClasses = computed(() => [
+  'ui-stepper__separator',
+  `ui-stepper__separator--${stepper.orientation.value}`,
+  {
+    'ui-stepper__separator--completed': isCompleted.value
+  }
+])
+</script>
+
+<template>
+  <div :class="separatorClasses" aria-hidden="true" />
+</template>
+
+<style scoped>
+.ui-stepper__separator {
+  background: var(--border-default);
+  transition: background-color 0.2s ease;
+}
+
+.ui-stepper__separator--completed {
+  background: var(--status-success);
+}
+
+.ui-stepper__separator--horizontal {
+  position: absolute;
+  top: calc(1rem + var(--space-2));
+  left: calc(50% + 1rem + var(--space-1));
+  right: calc(-50% + 1rem + var(--space-1));
+  height: 2px;
+}
+
+.ui-stepper__separator--vertical {
+  width: 2px;
+  position: absolute;
+  left: calc(1rem + var(--space-2) - 1px);
+  top: calc(2rem + var(--space-4));
+  bottom: 0;
+}
+</style>

package/src/components/Stepper/StepperTrigger.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed, inject, h, type Component } from 'vue'
+import { StepperKey, StepperItemKey } from './keys'
+import { useInternalIcon } from '../../config/icons'
+
+export interface StepperTriggerProps {
+  /** Custom icon to display instead of step number */
+  icon?: Component
+}
+
+defineProps<StepperTriggerProps>()
+
+const stepper = inject(StepperKey)
+const stepperItem = inject(StepperItemKey)
+
+if (!stepper || !stepperItem) {
+  throw new Error('StepperTrigger must be used within StepperItem')
+}
+
+const CheckIcon = useInternalIcon('check')
+
+const triggerClasses = computed(() => [
+  'ui-stepper__trigger',
+  `ui-stepper__trigger--${stepperItem.state.value}`
+])
+
+const indicatorClasses = computed(() => [
+  'ui-stepper__indicator',
+  `ui-stepper__indicator--${stepperItem.state.value}`
+])
+</script>
+
+<template>
+  <button
+    :id="stepperItem.triggerId"
+    :class="triggerClasses"
+    type="button"
+    role="tab"
+    :aria-selected="stepperItem.state.value === 'current'"
+    :aria-controls="stepperItem.contentId"
+    :aria-disabled="stepperItem.isDisabled.value"
+    :disabled="stepperItem.isDisabled.value"
+    :tabindex="stepperItem.state.value === 'current' ? 0 : -1"
+    @click="stepperItem.goToStep"
+  >
+    <span :class="indicatorClasses">
+      <slot name="indicator">
+        <template v-if="stepperItem.state.value === 'completed'">
+          <component :is="CheckIcon" class="ui-stepper__check-icon" />
+        </template>
+        <template v-else-if="icon">
+          <component :is="icon" class="ui-stepper__custom-icon" />
+        </template>
+        <template v-else>
+          {{ stepperItem.index + 1 }}
+        </template>
+      </slot>
+    </span>
+    <span class="ui-stepper__label">
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.ui-stepper__trigger {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  transition: opacity 0.2s ease;
+}
+
+.ui-stepper__trigger:disabled {
+  cursor: not-allowed;
+}
+
+.ui-stepper__trigger:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-md);
+}
+
+.ui-stepper__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius-full);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  transition: all 0.2s ease;
+}
+
+.ui-stepper__indicator--pending {
+  background: var(--bg-tertiary);
+  color: var(--text-tertiary);
+  border: 2px solid var(--border-default);
+}
+
+.ui-stepper__indicator--current {
+  background: var(--action-primary);
+  color: var(--action-primary-text);
+  border: 2px solid var(--action-primary);
+}
+
+.ui-stepper__indicator--completed {
+  background: var(--status-success);
+  color: var(--color-white);
+  border: 2px solid var(--status-success);
+}
+
+.ui-stepper__indicator--error {
+  background: var(--status-error);
+  color: var(--color-white);
+  border: 2px solid var(--status-error);
+}
+
+.ui-stepper__check-icon,
+.ui-stepper__custom-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-stepper__label {
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  text-align: center;
+}
+
+.ui-stepper__trigger--pending .ui-stepper__label {
+  color: var(--text-tertiary);
+}
+
+.ui-stepper__trigger--current .ui-stepper__label {
+  font-weight: var(--font-medium);
+}
+</style>

package/src/components/Stepper/index.ts

@@ -0,0 +1,11 @@
+export { default as StepperRoot } from './StepperRoot.vue'
+export { default as StepperItem } from './StepperItem.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'
+export { default as StepperContent } from './StepperContent.vue'
+export { default as StepperSeparator } from './StepperSeparator.vue'
+
+export type { StepperRootProps } from './StepperRoot.vue'
+export type { StepperItemProps } from './StepperItem.vue'
+export type { StepperTriggerProps } from './StepperTrigger.vue'
+export type { StepperContext, StepperItemContext, StepState, StepperOrientation } from './keys'
+export { StepperKey, StepperItemKey } from './keys'

package/src/components/Stepper/keys.ts

@@ -0,0 +1,27 @@
+import type { InjectionKey, Ref, ComputedRef } from 'vue'
+
+export type StepState = 'completed' | 'current' | 'pending' | 'error'
+export type StepperOrientation = 'horizontal' | 'vertical'
+
+export interface StepperContext {
+  orientation: Ref<StepperOrientation>
+  linear: Ref<boolean>
+  currentStep: Ref<number>
+  goToStep: (step: number) => void
+  getStepState: (index: number) => StepState
+  canNavigateTo: (index: number) => boolean
+  registerStep: (index: number) => void
+  stepCount: Ref<number>
+}
+
+export interface StepperItemContext {
+  index: number
+  state: ComputedRef<StepState>
+  isDisabled: ComputedRef<boolean>
+  triggerId: string
+  contentId: string
+  goToStep: () => void
+}
+
+export const StepperKey: InjectionKey<StepperContext> = Symbol('stepper')
+export const StepperItemKey: InjectionKey<StepperItemContext> = Symbol('stepper-item')

package/src/components/Switch/Switch.test.ts

@@ -0,0 +1,214 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Switch from './Switch.vue'
+
+describe('Switch', () => {
+  describe('Rendering', () => {
+    it('renders as a button', () => {
+      const wrapper = mount(Switch)
+      expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('has role="switch"', () => {
+      const wrapper = mount(Switch)
+      expect(wrapper.find('button').attributes('role')).toBe('switch')
+    })
+
+    it('has type="button" to prevent form submission', () => {
+      const wrapper = mount(Switch)
+      expect(wrapper.find('button').attributes('type')).toBe('button')
+    })
+
+    it('renders track and thumb', () => {
+      const wrapper = mount(Switch)
+      expect(wrapper.find('.ui-switch__track').exists()).toBe(true)
+      expect(wrapper.find('.ui-switch__thumb').exists()).toBe(true)
+    })
+  })
+
+  describe('v-model', () => {
+    it('reflects modelValue as aria-checked', () => {
+      const wrapper = mount(Switch, {
+        props: { modelValue: false }
+      })
+      expect(wrapper.find('button').attributes('aria-checked')).toBe('false')
+    })
+
+    it('shows checked state when modelValue is true', () => {
+      const wrapper = mount(Switch, {
+        props: { modelValue: true }
+      })
+      expect(wrapper.find('button').attributes('aria-checked')).toBe('true')
+      expect(wrapper.find('.ui-switch').classes()).toContain('ui-switch--checked')
+    })
+
+    it('emits update:modelValue on click', async () => {
+      const wrapper = mount(Switch, {
+        props: { modelValue: false }
+      })
+      await wrapper.find('button').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+    })
+
+    it('emits change event on click', async () => {
+      const wrapper = mount(Switch, {
+        props: { modelValue: false }
+      })
+      await wrapper.find('button').trigger('click')
+      expect(wrapper.emitted('change')?.[0]).toEqual([true])
+    })
+
+    it('toggles from true to false', async () => {
+      const wrapper = mount(Switch, {
+        props: { modelValue: true }
+      })
+      await wrapper.find('button').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    })
+  })
+
+  describe('Size variants', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+
+    sizes.forEach(size => {
+      it(`applies ${size} size class`, () => {
+        const wrapper = mount(Switch, {
+          props: { size }
+        })
+        expect(wrapper.find('.ui-switch').classes()).toContain(`ui-switch--${size}`)
+      })
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('applies disabled attribute', () => {
+      const wrapper = mount(Switch, {
+        props: { disabled: true }
+      })
+      expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('applies disabled class', () => {
+      const wrapper = mount(Switch, {
+        props: { disabled: true }
+      })
+      expect(wrapper.find('.ui-switch').classes()).toContain('ui-switch--disabled')
+    })
+
+    it('does not emit events when disabled', async () => {
+      const wrapper = mount(Switch, {
+        props: { disabled: true, modelValue: false }
+      })
+      await wrapper.find('button').trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Loading state', () => {
+    it('renders spinner when loading', () => {
+      const wrapper = mount(Switch, {
+        props: { loading: true }
+      })
+      expect(wrapper.findComponent({ name: 'Spinner' }).exists()).toBe(true)
+    })
+
+    it('applies loading class', () => {
+      const wrapper = mount(Switch, {
+        props: { loading: true }
+      })
+      expect(wrapper.find('.ui-switch').classes()).toContain('ui-switch--loading')
+    })
+
+    it('is disabled when loading', () => {
+      const wrapper = mount(Switch, {
+        props: { loading: true }
+      })
+      expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('does not emit events when loading', async () => {
+      const wrapper = mount(Switch, {
+        props: { loading: true, modelValue: false }
+      })
+      await wrapper.find('button').trigger('click')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Keyboard interaction', () => {
+    it('toggles on Enter key', async () => {
+      const wrapper = mount(Switch, {
+        props: { modelValue: false }
+      })
+      await wrapper.find('button').trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+    })
+
+    it('does not toggle on Enter when disabled', async () => {
+      const wrapper = mount(Switch, {
+        props: { disabled: true, modelValue: false }
+      })
+      await wrapper.find('button').trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has aria-label when label prop provided', () => {
+      const wrapper = mount(Switch, {
+        props: { label: 'Enable notifications' }
+      })
+      expect(wrapper.find('button').attributes('aria-label')).toBe('Enable notifications')
+    })
+
+    it('auto-generates unique id', () => {
+      const wrapper = mount(Switch)
+      expect(wrapper.find('button').attributes('id')).toMatch(/^switch-/)
+    })
+
+    it('uses provided id', () => {
+      const wrapper = mount(Switch, {
+        props: { id: 'custom-switch' }
+      })
+      expect(wrapper.find('button').attributes('id')).toBe('custom-switch')
+    })
+  })
+
+  describe('Form submission', () => {
+    it('does not render hidden input by default', () => {
+      const wrapper = mount(Switch)
+      expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+    })
+
+    it('renders hidden input when name prop provided', () => {
+      const wrapper = mount(Switch, {
+        props: { name: 'notifications' }
+      })
+      const input = wrapper.find('input[type="checkbox"]')
+      expect(input.exists()).toBe(true)
+      expect(input.attributes('name')).toBe('notifications')
+    })
+
+    it('hidden input reflects checked state', () => {
+      const wrapper = mount(Switch, {
+        props: { name: 'notifications', modelValue: true }
+      })
+      const input = wrapper.find('input[type="checkbox"]')
+      expect((input.element as HTMLInputElement).checked).toBe(true)
+    })
+
+    it('hidden input is aria-hidden', () => {
+      const wrapper = mount(Switch, {
+        props: { name: 'notifications' }
+      })
+      expect(wrapper.find('input').attributes('aria-hidden')).toBe('true')
+    })
+
+    it('hidden input has tabindex=-1', () => {
+      const wrapper = mount(Switch, {
+        props: { name: 'notifications' }
+      })
+      expect(wrapper.find('input').attributes('tabindex')).toBe('-1')
+    })
+  })
+})

package/src/components/Switch/Switch.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import Spinner from '../Spinner/Spinner.vue'
+import { useId } from '../../composables'
+
+export interface SwitchProps {
+  /** Checked state (v-model) */
+  modelValue?: boolean
+  /** Switch size */
+  size?: 'sm' | 'md' | 'lg'
+  /** Disabled state */
+  disabled?: boolean
+  /** Loading state - shows spinner in thumb */
+  loading?: boolean
+  /** Accessible label (required for a11y if no visible label) */
+  label?: string
+  /** HTML name for form submission */
+  name?: string
+  /** ID for label association */
+  id?: string
+}
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  modelValue: false,
+  size: 'md',
+  disabled: false,
+  loading: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
+
+const uid = useId('switch')
+const switchId = computed(() => props.id || uid)
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+function toggle() {
+  if (isDisabled.value) return
+  const newValue = !props.modelValue
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    e.preventDefault()
+    toggle()
+  }
+}
+
+const spinnerSizeMap: Record<string, string> = {
+  sm: '0.625rem',
+  md: '0.75rem',
+  lg: '0.875rem'
+}
+const spinnerSize = computed(() => spinnerSizeMap[props.size])
+</script>
+
+<template>
+  <button
+    :id="switchId"
+    type="button"
+    role="switch"
+    :aria-checked="modelValue"
+    :aria-label="label"
+    :disabled="isDisabled"
+    class="ui-switch"
+    :class="[
+      `ui-switch--${size}`,
+      {
+        'ui-switch--checked': modelValue,
+        'ui-switch--disabled': isDisabled,
+        'ui-switch--loading': loading
+      }
+    ]"
+    @click="toggle"
+    @keydown="handleKeydown"
+  >
+    <span class="ui-switch__track" aria-hidden="true">
+      <span class="ui-switch__thumb">
+        <Spinner
+          v-if="loading"
+          :size="spinnerSize"
+          class="ui-switch__spinner"
+        />
+      </span>
+    </span>
+
+    <input
+      v-if="name"
+      type="checkbox"
+      :name="name"
+      :checked="modelValue"
+      :disabled="disabled"
+      class="ui-switch__input"
+      tabindex="-1"
+      aria-hidden="true"
+    />
+  </button>
+</template>
+
+<style scoped>
+.ui-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ui-switch::after {
+  content: '';
+  position: absolute;
+  top: -8px;
+  bottom: -8px;
+  left: -8px;
+  right: -8px;
+}
+
+.ui-switch__track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+  background-color: var(--switch-track-off);
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-switch--checked .ui-switch__track {
+  background-color: var(--switch-track-on);
+}
+
+.ui-switch--disabled .ui-switch__track {
+  opacity: 0.5;
+}
+
+.ui-switch__thumb {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  background-color: var(--switch-thumb);
+  box-shadow:
+    0 1px 3px 0 oklch(0 0 0 / 0.1),
+    0 1px 2px -1px oklch(0 0 0 / 0.1);
+  transition: transform var(--duration-normal) var(--ease-out-back);
+  will-change: transform;
+}
+
+.ui-switch--sm .ui-switch__track {
+  width: 2rem;
+  height: 1.125rem;
+}
+
+.ui-switch--sm .ui-switch__thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+  left: 2px;
+  transform: translateX(0);
+}
+
+.ui-switch--sm.ui-switch--checked .ui-switch__thumb {
+  transform: translateX(0.875rem);
+}
+
+.ui-switch--md .ui-switch__track {
+  width: 2.5rem;
+  height: 1.375rem;
+}
+
+.ui-switch--md .ui-switch__thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+  left: 2px;
+  transform: translateX(0);
+}
+
+.ui-switch--md.ui-switch--checked .ui-switch__thumb {
+  transform: translateX(1.125rem);
+}
+
+.ui-switch--lg .ui-switch__track {
+  width: 3rem;
+  height: 1.625rem;
+}
+
+.ui-switch--lg .ui-switch__thumb {
+  width: 1.375rem;
+  height: 1.375rem;
+  left: 2px;
+  transform: translateX(0);
+}
+
+.ui-switch--lg.ui-switch--checked .ui-switch__thumb {
+  transform: translateX(1.375rem);
+}
+
+.ui-switch--disabled {
+  cursor: not-allowed;
+}
+
+.ui-switch--loading {
+  cursor: wait;
+}
+
+.ui-switch:focus-visible .ui-switch__track {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-switch__spinner {
+  color: var(--switch-spinner);
+}
+
+.ui-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+</style>

package/src/components/Switch/index.ts

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