@sabrenski/spire-ui 0.0.1

package/src/components/Accordion/AccordionTrigger.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { inject, useSlots } from 'vue'
+import { AccordionItemKey } from './keys'
+
+export interface AccordionTriggerProps {
+  /** Hide the default chevron indicator */
+  hideIndicator?: boolean
+}
+
+const props = withDefaults(defineProps<AccordionTriggerProps>(), {
+  hideIndicator: false
+})
+
+const slots = useSlots()
+
+const item = inject(AccordionItemKey)
+
+if (!item) {
+  throw new Error('AccordionTrigger must be used within AccordionItem')
+}
+
+const hasIconSlot = !!slots.icon
+</script>
+
+<template>
+  <h3 class="ui-accordion__heading">
+    <button
+      type="button"
+      class="ui-accordion__trigger"
+      :id="item.triggerId"
+      :aria-expanded="item.isOpen.value"
+      :aria-controls="item.contentId"
+      :disabled="item.disabled.value"
+      @click="item.toggle"
+    >
+      <span class="ui-accordion__trigger-text">
+        <slot />
+      </span>
+
+      <!-- Custom icon slot (for plus/minus, etc.) -->
+      <span v-if="hasIconSlot" class="ui-accordion__indicator">
+        <slot name="icon" :is-open="item.isOpen.value" />
+      </span>
+
+      <!-- Default chevron -->
+      <svg
+        v-else-if="!hideIndicator"
+        class="ui-accordion__chevron"
+        :class="{ 'ui-accordion__chevron--open': item.isOpen.value }"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M6 9l6 6 6-6" />
+      </svg>
+    </button>
+  </h3>
+</template>
+
+<style scoped>
+.ui-accordion__heading {
+  margin: 0;
+  font-size: inherit;
+}
+
+.ui-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--space-4) 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  color: var(--accordion-trigger, var(--text-primary));
+  text-align: left;
+  transition: color var(--duration-fast) var(--ease-default);
+}
+
+.ui-accordion__trigger:hover {
+  color: var(--accordion-trigger-hover, var(--text-primary));
+}
+
+.ui-accordion__trigger:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.ui-accordion__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ui-accordion__trigger-text {
+  flex: 1;
+}
+
+.ui-accordion__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--accordion-chevron, var(--text-secondary));
+}
+
+.ui-accordion__chevron {
+  flex-shrink: 0;
+  color: var(--accordion-chevron, var(--text-secondary));
+  transition: transform var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.ui-accordion__chevron--open {
+  transform: rotate(180deg);
+}
+</style>

package/src/components/Accordion/index.ts

@@ -0,0 +1,11 @@
+export { default as AccordionRoot } from './AccordionRoot.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+
+export type { AccordionRootProps } from './AccordionRoot.vue'
+export type { AccordionItemProps } from './AccordionItem.vue'
+export type { AccordionTriggerProps } from './AccordionTrigger.vue'
+export type { AccordionContentProps } from './AccordionContent.vue'
+export type { AccordionContext, AccordionItemContext, AccordionVariant } from './keys'
+export { AccordionKey, AccordionItemKey } from './keys'

package/src/components/Accordion/keys.ts

@@ -0,0 +1,23 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export type AccordionVariant = 'contained' | 'split'
+
+export interface AccordionContext {
+  openItems: Ref<Set<string>>
+  toggle: (value: string) => void
+  collapsible: Ref<boolean>
+  multiple: Ref<boolean>
+  variant: Ref<AccordionVariant>
+}
+
+export interface AccordionItemContext {
+  value: string
+  triggerId: string
+  contentId: string
+  isOpen: Ref<boolean>
+  disabled: Ref<boolean>
+  toggle: () => void
+}
+
+export const AccordionKey: InjectionKey<AccordionContext> = Symbol('accordion')
+export const AccordionItemKey: InjectionKey<AccordionItemContext> = Symbol('accordion-item')

package/src/components/Avatar/Avatar.test.ts

@@ -0,0 +1,181 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Avatar from './Avatar.vue'
+
+describe('Avatar', () => {
+  describe('Fallback hierarchy', () => {
+    it('renders image when src is provided', () => {
+      const wrapper = mount(Avatar, {
+        props: { src: 'https://example.com/avatar.jpg', name: 'John Doe' }
+      })
+      expect(wrapper.find('img').exists()).toBe(true)
+      expect(wrapper.find('.ui-avatar__text').exists()).toBe(false)
+    })
+
+    it('renders initials when no src provided', () => {
+      const wrapper = mount(Avatar, {
+        props: { name: 'John Doe' }
+      })
+      expect(wrapper.find('img').exists()).toBe(false)
+      expect(wrapper.find('.ui-avatar__text').text()).toBe('JD')
+    })
+
+    it('renders fallback icon when no src or name', () => {
+      const wrapper = mount(Avatar)
+      expect(wrapper.find('img').exists()).toBe(false)
+      expect(wrapper.find('.ui-avatar__text').exists()).toBe(false)
+      expect(wrapper.find('.ui-avatar__icon').exists()).toBe(true)
+    })
+
+    it('falls back to initials on image error', async () => {
+      const wrapper = mount(Avatar, {
+        props: { src: 'https://broken.url/image.jpg', name: 'John Doe' }
+      })
+
+      // Initially shows image
+      expect(wrapper.find('img').exists()).toBe(true)
+
+      // Simulate error
+      await wrapper.find('img').trigger('error')
+
+      // Now shows initials
+      expect(wrapper.find('img').exists()).toBe(false)
+      expect(wrapper.find('.ui-avatar__text').text()).toBe('JD')
+    })
+
+    it('falls back to icon on image error when no name', async () => {
+      const wrapper = mount(Avatar, {
+        props: { src: 'https://broken.url/image.jpg' }
+      })
+
+      await wrapper.find('img').trigger('error')
+
+      expect(wrapper.find('.ui-avatar__icon').exists()).toBe(true)
+    })
+  })
+
+  describe('Sizes', () => {
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+    sizes.forEach(size => {
+      it(`applies ${size} size class`, () => {
+        const wrapper = mount(Avatar, {
+          props: { size, name: 'Test' }
+        })
+        expect(wrapper.classes()).toContain(`ui-avatar--${size}`)
+      })
+    })
+
+    it('defaults to md size', () => {
+      const wrapper = mount(Avatar, {
+        props: { name: 'Test' }
+      })
+      expect(wrapper.classes()).toContain('ui-avatar--md')
+    })
+  })
+
+  describe('Shapes', () => {
+    it('applies circle shape by default', () => {
+      const wrapper = mount(Avatar, {
+        props: { name: 'Test' }
+      })
+      expect(wrapper.classes()).toContain('ui-avatar--circle')
+    })
+
+    it('applies square shape when specified', () => {
+      const wrapper = mount(Avatar, {
+        props: { shape: 'square', name: 'Test' }
+      })
+      expect(wrapper.classes()).toContain('ui-avatar--square')
+    })
+  })
+
+  describe('Variants', () => {
+    const variants = ['neutral', 'primary', 'soft'] as const
+
+    variants.forEach(variant => {
+      it(`applies ${variant} variant class`, () => {
+        const wrapper = mount(Avatar, {
+          props: { variant, name: 'Test' }
+        })
+        expect(wrapper.classes()).toContain(`ui-avatar--${variant}`)
+      })
+    })
+
+    it('defaults to soft variant', () => {
+      const wrapper = mount(Avatar, {
+        props: { name: 'Test' }
+      })
+      expect(wrapper.classes()).toContain('ui-avatar--soft')
+    })
+  })
+
+  describe('Bordered', () => {
+    it('applies bordered class when bordered prop is true', () => {
+      const wrapper = mount(Avatar, {
+        props: { bordered: true, name: 'Test' }
+      })
+      expect(wrapper.classes()).toContain('ui-avatar--bordered')
+    })
+
+    it('does not apply bordered class by default', () => {
+      const wrapper = mount(Avatar, {
+        props: { name: 'Test' }
+      })
+      expect(wrapper.classes()).not.toContain('ui-avatar--bordered')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="img"', () => {
+      const wrapper = mount(Avatar, {
+        props: { name: 'John Doe' }
+      })
+      expect(wrapper.attributes('role')).toBe('img')
+    })
+
+    it('uses name for aria-label', () => {
+      const wrapper = mount(Avatar, {
+        props: { name: 'John Doe' }
+      })
+      expect(wrapper.attributes('aria-label')).toBe('John Doe')
+    })
+
+    it('uses alt for aria-label when provided', () => {
+      const wrapper = mount(Avatar, {
+        props: { name: 'John Doe', alt: 'Profile picture' }
+      })
+      expect(wrapper.attributes('aria-label')).toBe('Profile picture')
+    })
+
+    it('falls back to "Avatar" when no name or alt', () => {
+      const wrapper = mount(Avatar)
+      expect(wrapper.attributes('aria-label')).toBe('Avatar')
+    })
+
+    it('sets alt attribute on image', () => {
+      const wrapper = mount(Avatar, {
+        props: { src: 'https://example.com/avatar.jpg', name: 'John Doe' }
+      })
+      expect(wrapper.find('img').attributes('alt')).toBe('John Doe')
+    })
+  })
+
+  describe('Image error recovery', () => {
+    it('resets error state when src changes', async () => {
+      const wrapper = mount(Avatar, {
+        props: { src: 'https://broken.url/image.jpg', name: 'John Doe' }
+      })
+
+      // Trigger error
+      await wrapper.find('img').trigger('error')
+      expect(wrapper.find('.ui-avatar__text').exists()).toBe(true)
+
+      // Change src
+      await wrapper.setProps({ src: 'https://new.url/image.jpg' })
+
+      // Should show image again (error reset)
+      expect(wrapper.find('img').exists()).toBe(true)
+    })
+  })
+})

package/src/components/Avatar/Avatar.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { getInitials } from '../../utils/string'
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+type AvatarShape = 'circle' | 'square'
+type AvatarVariant = 'neutral' | 'primary' | 'soft'
+
+export interface AvatarProps {
+  /** Image source URL */
+  src?: string
+  /** User name - used for alt text AND initials fallback */
+  name?: string
+  /** Override alt text (defaults to name) */
+  alt?: string
+  /** Avatar size */
+  size?: AvatarSize
+  /** Avatar shape */
+  shape?: AvatarShape
+  /** Background variant when showing initials/icon */
+  variant?: AvatarVariant
+  /** Add border for avatar groups (cutout effect) */
+  bordered?: boolean
+}
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  size: 'md',
+  shape: 'circle',
+  variant: 'soft',
+  bordered: false
+})
+
+const hasImageError = ref(false)
+
+watch(() => props.src, () => {
+  hasImageError.value = false
+})
+
+function handleError() {
+  hasImageError.value = true
+}
+
+const initials = computed(() => getInitials(props.name))
+
+const showImage = computed(() => props.src && !hasImageError.value)
+
+const showInitials = computed(() => !showImage.value && initials.value)
+
+const showFallback = computed(() => !showImage.value && !initials.value)
+
+const classes = computed(() => [
+  'ui-avatar',
+  `ui-avatar--${props.size}`,
+  `ui-avatar--${props.shape}`,
+  `ui-avatar--${props.variant}`,
+  { 'ui-avatar--bordered': props.bordered }
+])
+
+const ariaLabel = computed(() => props.alt || props.name || 'Avatar')
+</script>
+
+<template>
+  <div :class="classes" role="img" :aria-label="ariaLabel">
+    <img
+      v-if="showImage"
+      :src="src"
+      :alt="alt || name"
+      class="ui-avatar__img"
+      @error="handleError"
+    />
+
+    <span v-else-if="showInitials" class="ui-avatar__text">
+      {{ initials }}
+    </span>
+
+    <svg
+      v-else
+      class="ui-avatar__icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="8" r="4" />
+      <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.ui-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  flex-shrink: 0;
+  vertical-align: middle;
+  font-family: var(--font-sans);
+  font-weight: 600;
+  line-height: 1;
+}
+
+.ui-avatar--circle { border-radius: 50%; }
+.ui-avatar--square { border-radius: var(--radius-md); }
+
+.ui-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
+.ui-avatar--sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
+.ui-avatar--md { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
+.ui-avatar--lg { width: 3rem; height: 3rem; font-size: 1rem; }
+.ui-avatar--xl { width: 4rem; height: 4rem; font-size: 1.25rem; }
+
+.ui-avatar--neutral {
+  background-color: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.ui-avatar--primary {
+  background-color: var(--action-primary);
+  color: var(--action-primary-text);
+}
+
+.ui-avatar--soft {
+  background-color: var(--avatar-soft-bg);
+  color: var(--avatar-soft-text);
+}
+
+.ui-avatar--bordered {
+  box-shadow: 0 0 0 2px var(--bg-primary);
+}
+
+.ui-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-avatar__text {
+  text-transform: uppercase;
+}
+
+.ui-avatar__icon {
+  width: 60%;
+  height: 60%;
+  opacity: 0.6;
+}
+</style>

package/src/components/Avatar/index.ts

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

package/src/components/Badge/Badge.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Badge from './Badge.vue'
+
+describe('Badge', () => {
+  describe('Rendering', () => {
+    it('renders slot content', () => {
+      const wrapper = mount(Badge, {
+        slots: { default: 'New' }
+      })
+      expect(wrapper.text()).toBe('New')
+    })
+
+    it('renders numeric value', () => {
+      const wrapper = mount(Badge, {
+        props: { value: 5 }
+      })
+      expect(wrapper.text()).toBe('5')
+    })
+
+    it('has role="status" for accessibility', () => {
+      const wrapper = mount(Badge, {
+        slots: { default: 'Active' }
+      })
+      expect(wrapper.attributes('role')).toBe('status')
+    })
+  })
+
+  describe('Variants', () => {
+    const variants = ['default', 'success', 'warning', 'danger', 'info'] as const
+
+    variants.forEach(variant => {
+      it(`applies ${variant} variant class`, () => {
+        const wrapper = mount(Badge, {
+          props: { variant },
+          slots: { default: 'Test' }
+        })
+        expect(wrapper.classes()).toContain(`ui-badge--${variant}`)
+      })
+    })
+
+    it('defaults to default variant', () => {
+      const wrapper = mount(Badge, {
+        slots: { default: 'Test' }
+      })
+      expect(wrapper.classes()).toContain('ui-badge--default')
+    })
+  })
+
+  describe('Dot mode', () => {
+    it('renders as dot when dot prop is true', () => {
+      const wrapper = mount(Badge, {
+        props: { dot: true }
+      })
+      expect(wrapper.classes()).toContain('ui-badge--dot')
+      expect(wrapper.text()).toBe('')
+    })
+
+    it('renders as dot when no content provided', () => {
+      const wrapper = mount(Badge)
+      expect(wrapper.classes()).toContain('ui-badge--dot')
+    })
+
+    it('applies pulse animation when pulse prop is true', () => {
+      const wrapper = mount(Badge, {
+        props: { dot: true, pulse: true }
+      })
+      expect(wrapper.classes()).toContain('ui-badge--pulse')
+    })
+
+    it('does not apply pulse to non-dot badges', () => {
+      const wrapper = mount(Badge, {
+        props: { pulse: true },
+        slots: { default: 'Text' }
+      })
+      expect(wrapper.classes()).not.toContain('ui-badge--pulse')
+    })
+  })
+
+  describe('Numeric constraints', () => {
+    it('displays value directly when under max', () => {
+      const wrapper = mount(Badge, {
+        props: { value: 50 }
+      })
+      expect(wrapper.text()).toBe('50')
+    })
+
+    it('displays max+ when value exceeds default max (99)', () => {
+      const wrapper = mount(Badge, {
+        props: { value: 150 }
+      })
+      expect(wrapper.text()).toBe('99+')
+    })
+
+    it('respects custom max prop', () => {
+      const wrapper = mount(Badge, {
+        props: { value: 15, max: 10 }
+      })
+      expect(wrapper.text()).toBe('10+')
+    })
+
+    it('displays exact value at max boundary', () => {
+      const wrapper = mount(Badge, {
+        props: { value: 99 }
+      })
+      expect(wrapper.text()).toBe('99')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('uses label prop for aria-label', () => {
+      const wrapper = mount(Badge, {
+        props: { value: 150, label: '150 unread messages' }
+      })
+      expect(wrapper.attributes('aria-label')).toBe('150 unread messages')
+    })
+
+    it('uses actual value for aria-label when no label provided', () => {
+      const wrapper = mount(Badge, {
+        props: { value: 150 }
+      })
+      expect(wrapper.attributes('aria-label')).toBe('150')
+    })
+
+    it('has no aria-label for text-only badges without label prop', () => {
+      const wrapper = mount(Badge, {
+        slots: { default: 'New' }
+      })
+      expect(wrapper.attributes('aria-label')).toBeUndefined()
+    })
+  })
+
+  describe('Typography', () => {
+    it('applies ui-badge base class', () => {
+      const wrapper = mount(Badge, {
+        slots: { default: 'Test' }
+      })
+      expect(wrapper.classes()).toContain('ui-badge')
+    })
+  })
+})