@sabrenski/spire-ui 0.0.1

package/src/components/Spinner/Spinner.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface SpinnerProps {
+  /** Predefined size or custom value */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string
+  /** Animation speed in seconds */
+  speed?: number
+  /** Accessible label for screen readers */
+  label?: string
+}
+
+const props = withDefaults(defineProps<SpinnerProps>(), {
+  size: 'md',
+  speed: 0.9,
+  label: 'Loading'
+})
+
+const sizeMap: Record<string, string> = {
+  xs: 'var(--spinner-xs)',
+  sm: 'var(--spinner-sm)',
+  md: 'var(--spinner-md)',
+  lg: 'var(--spinner-lg)',
+  xl: 'var(--spinner-xl)'
+}
+
+const resolvedSize = computed(() => sizeMap[props.size] ?? props.size)
+const resolvedSpeed = computed(() => `${props.speed}s`)
+</script>
+
+<template>
+  <div
+    class="ui-spinner"
+    role="status"
+    :aria-label="label"
+    :style="{
+      '--spinner-size': resolvedSize,
+      '--spinner-speed': resolvedSpeed
+    }"
+  >
+    <div class="ui-spinner__dot" />
+    <div class="ui-spinner__dot" />
+    <div class="ui-spinner__dot" />
+    <div class="ui-spinner__dot" />
+    <div class="ui-spinner__dot" />
+    <div class="ui-spinner__dot" />
+    <div class="ui-spinner__dot" />
+    <div class="ui-spinner__dot" />
+    <span class="ui-spinner__sr-only">{{ label }}</span>
+  </div>
+</template>
+
+<style scoped>
+.ui-spinner {
+  --spinner-size: 2rem;
+  --spinner-speed: 0.9s;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: var(--spinner-size);
+  width: var(--spinner-size);
+}
+
+.ui-spinner__dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  width: 100%;
+}
+
+.ui-spinner__dot::before {
+  content: '';
+  height: 20%;
+  width: 20%;
+  border-radius: 50%;
+  background-color: currentColor;
+  transform: scale(0);
+  opacity: 0.5;
+  animation: ui-spinner-pulse calc(var(--spinner-speed) * 1.111) ease-in-out infinite;
+}
+
+.ui-spinner__dot:nth-child(2) {
+  transform: rotate(45deg);
+}
+.ui-spinner__dot:nth-child(2)::before {
+  animation-delay: calc(var(--spinner-speed) * -0.875);
+}
+
+.ui-spinner__dot:nth-child(3) {
+  transform: rotate(90deg);
+}
+.ui-spinner__dot:nth-child(3)::before {
+  animation-delay: calc(var(--spinner-speed) * -0.75);
+}
+
+.ui-spinner__dot:nth-child(4) {
+  transform: rotate(135deg);
+}
+.ui-spinner__dot:nth-child(4)::before {
+  animation-delay: calc(var(--spinner-speed) * -0.625);
+}
+
+.ui-spinner__dot:nth-child(5) {
+  transform: rotate(180deg);
+}
+.ui-spinner__dot:nth-child(5)::before {
+  animation-delay: calc(var(--spinner-speed) * -0.5);
+}
+
+.ui-spinner__dot:nth-child(6) {
+  transform: rotate(225deg);
+}
+.ui-spinner__dot:nth-child(6)::before {
+  animation-delay: calc(var(--spinner-speed) * -0.375);
+}
+
+.ui-spinner__dot:nth-child(7) {
+  transform: rotate(270deg);
+}
+.ui-spinner__dot:nth-child(7)::before {
+  animation-delay: calc(var(--spinner-speed) * -0.25);
+}
+
+.ui-spinner__dot:nth-child(8) {
+  transform: rotate(315deg);
+}
+.ui-spinner__dot:nth-child(8)::before {
+  animation-delay: calc(var(--spinner-speed) * -0.125);
+}
+
+.ui-spinner__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes ui-spinner-pulse {
+  0%,
+  100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/src/components/Spinner/index.ts

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

package/src/components/SpireProvider/SpireProvider.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+import type { InjectionKey, ComputedRef } from 'vue'
+
+export type Theme = 'light' | 'dark'
+export type Mood = 'warm' | 'cool' | 'vibrant' | 'muted' | 'earthy'
+export type Depth = 'flat' | 'subtle' | 'elevated' | 'dimensional'
+export type Motion = 'minimal' | 'smooth' | 'spring' | 'snappy'
+export type Texture = 'none' | 'subtle' | 'medium'
+
+export interface SpireConfig {
+  theme?: Theme
+  mood?: Mood
+  depth?: Depth
+  motion?: Motion
+  texture?: Texture
+}
+
+export interface SpireProviderProps {
+  theme?: Theme
+  mood?: Mood
+  depth?: Depth
+  motion?: Motion
+  texture?: Texture
+  tag?: string
+}
+
+export const spireConfigKey: InjectionKey<ComputedRef<SpireConfig>> = Symbol('spire-config')
+</script>
+
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+
+const props = withDefaults(defineProps<SpireProviderProps>(), {
+  tag: 'div'
+})
+
+const config = computed<SpireConfig>(() => ({
+  theme: props.theme,
+  mood: props.mood,
+  depth: props.depth,
+  motion: props.motion,
+  texture: props.texture
+}))
+
+provide(spireConfigKey, config)
+
+const dataAttributes = computed(() => {
+  const attrs: Record<string, string | undefined> = {}
+
+  if (props.theme) attrs['data-theme'] = props.theme
+  if (props.mood) attrs['data-mood'] = props.mood
+  if (props.depth) attrs['data-depth'] = props.depth
+  if (props.motion) attrs['data-motion'] = props.motion
+  if (props.texture) attrs['data-texture'] = props.texture
+
+  return attrs
+})
+</script>
+
+<template>
+  <component :is="tag" class="spire-provider" v-bind="dataAttributes">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.spire-provider {
+  display: block;
+  min-height: inherit;
+}
+</style>

package/src/components/SpireProvider/index.ts

@@ -0,0 +1,11 @@
+export { default as SpireProvider } from './SpireProvider.vue'
+export { spireConfigKey } from './SpireProvider.vue'
+export type {
+  Theme,
+  Mood,
+  Depth,
+  Motion,
+  Texture,
+  SpireConfig,
+  SpireProviderProps
+} from './SpireProvider.vue'

package/src/components/Stepper/Stepper.test.ts

@@ -0,0 +1,221 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import StepperRoot from './StepperRoot.vue'
+import StepperItem from './StepperItem.vue'
+import StepperTrigger from './StepperTrigger.vue'
+import StepperContent from './StepperContent.vue'
+import StepperSeparator from './StepperSeparator.vue'
+
+function createStepper(props: Record<string, unknown> = {}) {
+  return mount(StepperRoot, {
+    props,
+    slots: {
+      default: () => [
+        h(StepperItem, { index: 0 }, {
+          default: () => [
+            h(StepperTrigger, null, { default: () => 'Step 1' }),
+            h(StepperSeparator),
+            h(StepperContent, null, { default: () => 'Content 1' })
+          ]
+        }),
+        h(StepperItem, { index: 1 }, {
+          default: () => [
+            h(StepperTrigger, null, { default: () => 'Step 2' }),
+            h(StepperSeparator),
+            h(StepperContent, null, { default: () => 'Content 2' })
+          ]
+        }),
+        h(StepperItem, { index: 2 }, {
+          default: () => [
+            h(StepperTrigger, null, { default: () => 'Step 3' }),
+            h(StepperContent, null, { default: () => 'Content 3' })
+          ]
+        })
+      ]
+    }
+  })
+}
+
+describe('Stepper', () => {
+  describe('Rendering', () => {
+    it('renders all stepper items', () => {
+      const wrapper = createStepper()
+      expect(wrapper.findAll('.ui-stepper__item')).toHaveLength(3)
+    })
+
+    it('renders triggers with correct text', () => {
+      const wrapper = createStepper()
+      const triggers = wrapper.findAll('.ui-stepper__trigger')
+      expect(triggers[0].text()).toContain('Step 1')
+      expect(triggers[1].text()).toContain('Step 2')
+      expect(triggers[2].text()).toContain('Step 3')
+    })
+
+    it('renders step indicators with numbers', () => {
+      const wrapper = createStepper()
+      const indicators = wrapper.findAll('.ui-stepper__indicator')
+      expect(indicators[0].text()).toContain('1')
+      expect(indicators[1].text()).toContain('2')
+      expect(indicators[2].text()).toContain('3')
+    })
+
+    it('renders separators', () => {
+      const wrapper = createStepper()
+      expect(wrapper.findAll('.ui-stepper__separator')).toHaveLength(2)
+    })
+  })
+
+  describe('Step states', () => {
+    it('marks first step as current by default', () => {
+      const wrapper = createStepper()
+      const items = wrapper.findAll('.ui-stepper__item')
+      expect(items[0].attributes('data-state')).toBe('current')
+    })
+
+    it('marks previous steps as completed', () => {
+      const wrapper = createStepper({ modelValue: 2 })
+      const items = wrapper.findAll('.ui-stepper__item')
+      expect(items[0].attributes('data-state')).toBe('completed')
+      expect(items[1].attributes('data-state')).toBe('completed')
+      expect(items[2].attributes('data-state')).toBe('current')
+    })
+
+    it('marks future steps as pending', () => {
+      const wrapper = createStepper({ modelValue: 0 })
+      const items = wrapper.findAll('.ui-stepper__item')
+      expect(items[1].attributes('data-state')).toBe('pending')
+      expect(items[2].attributes('data-state')).toBe('pending')
+    })
+
+    it('marks error steps correctly', () => {
+      const wrapper = createStepper({ modelValue: 2, errorSteps: [1] })
+      const items = wrapper.findAll('.ui-stepper__item')
+      expect(items[1].attributes('data-state')).toBe('error')
+    })
+  })
+
+  describe('Navigation', () => {
+    it('emits update:modelValue when clicking a step', async () => {
+      const wrapper = createStepper({ modelValue: 0 })
+      const triggers = wrapper.findAll('.ui-stepper__trigger')
+
+      await triggers[1].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+    })
+
+    it('prevents navigation to future steps in linear mode', async () => {
+      const wrapper = createStepper({ modelValue: 0, linear: true })
+      const triggers = wrapper.findAll('.ui-stepper__trigger')
+
+      await triggers[2].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('allows navigation to next step in linear mode', async () => {
+      const wrapper = createStepper({ modelValue: 0, linear: true })
+      const triggers = wrapper.findAll('.ui-stepper__trigger')
+
+      await triggers[1].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([1])
+    })
+
+    it('allows navigation to previous steps in linear mode', async () => {
+      const wrapper = createStepper({ modelValue: 2, linear: true })
+      const triggers = wrapper.findAll('.ui-stepper__trigger')
+
+      await triggers[0].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([0])
+    })
+  })
+
+  describe('Content visibility', () => {
+    it('shows content for current step only', () => {
+      const wrapper = createStepper({ modelValue: 1 })
+      const contents = wrapper.findAll('.ui-stepper__content')
+
+      expect(contents[0].attributes('aria-hidden')).toBe('true')
+      expect(contents[1].attributes('aria-hidden')).toBe('false')
+      expect(contents[2].attributes('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('Orientation', () => {
+    it('applies horizontal class by default', () => {
+      const wrapper = createStepper()
+      expect(wrapper.find('.ui-stepper').classes()).toContain('ui-stepper--horizontal')
+    })
+
+    it('applies vertical class when set', () => {
+      const wrapper = createStepper({ orientation: 'vertical' })
+      expect(wrapper.find('.ui-stepper').classes()).toContain('ui-stepper--vertical')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="tablist" on root', () => {
+      const wrapper = createStepper()
+      expect(wrapper.find('.ui-stepper').attributes('role')).toBe('tablist')
+    })
+
+    it('triggers have role="tab"', () => {
+      const wrapper = createStepper()
+      const trigger = wrapper.find('.ui-stepper__trigger')
+      expect(trigger.attributes('role')).toBe('tab')
+    })
+
+    it('content has role="tabpanel"', () => {
+      const wrapper = createStepper()
+      const content = wrapper.find('.ui-stepper__content')
+      expect(content.attributes('role')).toBe('tabpanel')
+    })
+
+    it('trigger has aria-selected for current step', () => {
+      const wrapper = createStepper({ modelValue: 1 })
+      const triggers = wrapper.findAll('.ui-stepper__trigger')
+      expect(triggers[0].attributes('aria-selected')).toBe('false')
+      expect(triggers[1].attributes('aria-selected')).toBe('true')
+      expect(triggers[2].attributes('aria-selected')).toBe('false')
+    })
+
+    it('trigger has aria-controls pointing to content', () => {
+      const wrapper = createStepper()
+      const trigger = wrapper.find('.ui-stepper__trigger')
+      const content = wrapper.find('.ui-stepper__content')
+      expect(trigger.attributes('aria-controls')).toBe(content.attributes('id'))
+    })
+
+    it('content has aria-labelledby pointing to trigger', () => {
+      const wrapper = createStepper()
+      const trigger = wrapper.find('.ui-stepper__trigger')
+      const content = wrapper.find('.ui-stepper__content')
+      expect(content.attributes('aria-labelledby')).toBe(trigger.attributes('id'))
+    })
+
+    it('disabled steps have aria-disabled', async () => {
+      const wrapper = createStepper({ modelValue: 0, linear: true })
+      const triggers = wrapper.findAll('.ui-stepper__trigger')
+      await nextTick()
+      expect(triggers[2].attributes('aria-disabled')).toBe('true')
+    })
+  })
+
+  describe('Separator styling', () => {
+    it('marks separator as completed when step is completed', () => {
+      const wrapper = createStepper({ modelValue: 2 })
+      const separators = wrapper.findAll('.ui-stepper__separator')
+      expect(separators[0].classes()).toContain('ui-stepper__separator--completed')
+      expect(separators[1].classes()).toContain('ui-stepper__separator--completed')
+    })
+
+    it('does not mark separator as completed for pending steps', () => {
+      const wrapper = createStepper({ modelValue: 0 })
+      const separators = wrapper.findAll('.ui-stepper__separator')
+      expect(separators[0].classes()).not.toContain('ui-stepper__separator--completed')
+    })
+  })
+})

package/src/components/Stepper/StepperContent.vue

@@ -0,0 +1,51 @@
+<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('StepperContent must be used within StepperItem')
+}
+
+const isActive = computed(() => stepperItem.state.value === 'current')
+
+const contentClasses = computed(() => [
+  'ui-stepper__content',
+  `ui-stepper__content--${stepper.orientation.value}`,
+  {
+    'ui-stepper__content--active': isActive.value
+  }
+])
+</script>
+
+<template>
+  <div
+    v-show="isActive"
+    :id="stepperItem.contentId"
+    :class="contentClasses"
+    role="tabpanel"
+    :aria-labelledby="stepperItem.triggerId"
+    :aria-hidden="!isActive"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-stepper__content {
+  padding: var(--space-4);
+}
+
+.ui-stepper__content--horizontal {
+  width: 100%;
+  text-align: center;
+}
+
+.ui-stepper__content--vertical {
+  flex: 1;
+  padding-left: var(--space-4);
+  padding-bottom: var(--space-6);
+}
+</style>

package/src/components/Stepper/StepperItem.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, provide, inject, onMounted } from 'vue'
+import { useId } from '../../composables'
+import { StepperKey, StepperItemKey } from './keys'
+
+export interface StepperItemProps {
+  /** Step index (0-based) */
+  index: number
+  /** Disable this step */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<StepperItemProps>(), {
+  disabled: false
+})
+
+const injectedStepper = inject(StepperKey)
+
+if (!injectedStepper) {
+  throw new Error('StepperItem must be used within StepperRoot')
+}
+
+const stepper = injectedStepper
+
+const triggerId = useId('stepper-trigger')
+const contentId = useId('stepper-content')
+
+const state = computed(() => stepper.getStepState(props.index))
+const isDisabled = computed(() => props.disabled || !stepper.canNavigateTo(props.index))
+
+function goToStep() {
+  if (isDisabled.value) return
+  stepper.goToStep(props.index)
+}
+
+onMounted(() => {
+  stepper.registerStep(props.index)
+})
+
+provide(StepperItemKey, {
+  index: props.index,
+  state,
+  isDisabled,
+  triggerId,
+  contentId,
+  goToStep
+})
+
+const itemClasses = computed(() => [
+  'ui-stepper__item',
+  `ui-stepper__item--${stepper.orientation.value}`,
+  `ui-stepper__item--${state.value}`,
+  {
+    'ui-stepper__item--disabled': isDisabled.value
+  }
+])
+</script>
+
+<template>
+  <div
+    :class="itemClasses"
+    :data-state="state"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-stepper__item {
+  display: flex;
+  position: relative;
+}
+
+.ui-stepper__item--horizontal {
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+}
+
+.ui-stepper__item--vertical {
+  flex-direction: row;
+  gap: var(--space-3);
+}
+
+.ui-stepper__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/src/components/Stepper/StepperRoot.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, provide, toRef, ref, watch } from 'vue'
+import { StepperKey } from './keys'
+import type { StepperOrientation, StepState } from './keys'
+
+export interface StepperRootProps {
+  /** Current step index (0-based, v-model) */
+  modelValue?: number
+  /** Layout direction */
+  orientation?: StepperOrientation
+  /** Prevents clicking future steps */
+  linear?: boolean
+  /** Mark specific steps as having errors */
+  errorSteps?: number[]
+}
+
+const props = withDefaults(defineProps<StepperRootProps>(), {
+  modelValue: 0,
+  orientation: 'horizontal',
+  linear: false,
+  errorSteps: () => []
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+
+const internalValue = ref(props.modelValue)
+const stepCount = ref(0)
+const registeredSteps = ref<Set<number>>(new Set())
+
+watch(() => props.modelValue, (newValue) => {
+  internalValue.value = newValue
+})
+
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentStep = computed(() => isControlled.value ? props.modelValue! : internalValue.value)
+
+function goToStep(step: number) {
+  if (!canNavigateTo(step)) return
+  internalValue.value = step
+  emit('update:modelValue', step)
+}
+
+function getStepState(index: number): StepState {
+  if (props.errorSteps.includes(index)) return 'error'
+  if (index < currentStep.value) return 'completed'
+  if (index === currentStep.value) return 'current'
+  return 'pending'
+}
+
+function canNavigateTo(index: number): boolean {
+  if (props.linear) {
+    return index <= currentStep.value + 1
+  }
+  return true
+}
+
+function registerStep(index: number) {
+  registeredSteps.value.add(index)
+  stepCount.value = registeredSteps.value.size
+}
+
+provide(StepperKey, {
+  orientation: toRef(props, 'orientation'),
+  linear: toRef(props, 'linear'),
+  currentStep,
+  goToStep,
+  getStepState,
+  canNavigateTo,
+  registerStep,
+  stepCount
+})
+</script>
+
+<template>
+  <div
+    class="ui-stepper"
+    :class="[`ui-stepper--${orientation}`]"
+    role="tablist"
+    :aria-orientation="orientation"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-stepper {
+  display: flex;
+  width: 100%;
+}
+
+.ui-stepper--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.ui-stepper--vertical {
+  flex-direction: column;
+}
+</style>