@sabrenski/spire-ui 0.0.1

package/src/components/FileUpload/index.ts

@@ -0,0 +1,2 @@
+export { default as FileUpload } from './FileUpload.vue'
+export type { FileUploadProps, UploadFile } from './FileUpload.vue'

package/src/components/Heading/Heading.test.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Heading from './Heading.vue'
+
+describe('Heading', () => {
+  describe('Rendering', () => {
+    it('renders as h2 by default', () => {
+      const wrapper = mount(Heading, {
+        slots: { default: 'Hello' }
+      })
+      expect(wrapper.element.tagName.toLowerCase()).toBe('h2')
+    })
+
+    it('renders slot content', () => {
+      const wrapper = mount(Heading, {
+        slots: { default: 'Page Title' }
+      })
+      expect(wrapper.text()).toBe('Page Title')
+    })
+
+    it('renders as custom tag via "as" prop', () => {
+      const wrapper = mount(Heading, {
+        props: { as: 'h1' },
+        slots: { default: 'Main Title' }
+      })
+      expect(wrapper.element.tagName.toLowerCase()).toBe('h1')
+    })
+
+    it('can render as non-heading elements', () => {
+      const wrapper = mount(Heading, {
+        props: { as: 'div' },
+        slots: { default: 'Visual heading' }
+      })
+      expect(wrapper.element.tagName.toLowerCase()).toBe('div')
+    })
+  })
+
+  describe('Sizes', () => {
+    const sizes = ['4xl', '3xl', '2xl', 'xl', 'lg', 'md'] as const
+
+    sizes.forEach(size => {
+      it(`applies ${size} size class`, () => {
+        const wrapper = mount(Heading, {
+          props: { size },
+          slots: { default: 'Heading' }
+        })
+        expect(wrapper.classes()).toContain(`ui-heading--${size}`)
+      })
+    })
+
+    it('defaults to 2xl size', () => {
+      const wrapper = mount(Heading, {
+        slots: { default: 'Heading' }
+      })
+      expect(wrapper.classes()).toContain('ui-heading--2xl')
+    })
+  })
+
+  describe('Alignment', () => {
+    const alignments = ['left', 'center', 'right'] as const
+
+    alignments.forEach(align => {
+      it(`applies ${align} alignment class`, () => {
+        const wrapper = mount(Heading, {
+          props: { align },
+          slots: { default: 'Heading' }
+        })
+        expect(wrapper.classes()).toContain(`ui-heading--${align}`)
+      })
+    })
+
+    it('defaults to left alignment', () => {
+      const wrapper = mount(Heading, {
+        slots: { default: 'Heading' }
+      })
+      expect(wrapper.classes()).toContain('ui-heading--left')
+    })
+  })
+
+  describe('Truncation', () => {
+    it('applies truncate class when truncate prop is true', () => {
+      const wrapper = mount(Heading, {
+        props: { truncate: true },
+        slots: { default: 'Very long heading text' }
+      })
+      expect(wrapper.classes()).toContain('ui-heading--truncate')
+    })
+
+    it('does not apply truncate class by default', () => {
+      const wrapper = mount(Heading, {
+        slots: { default: 'Heading' }
+      })
+      expect(wrapper.classes()).not.toContain('ui-heading--truncate')
+    })
+  })
+
+  describe('Polymorphism', () => {
+    it('allows visual h1 with semantic h2', () => {
+      const wrapper = mount(Heading, {
+        props: { as: 'h2', size: '4xl' },
+        slots: { default: 'Looks big, semantically h2' }
+      })
+      expect(wrapper.element.tagName.toLowerCase()).toBe('h2')
+      expect(wrapper.classes()).toContain('ui-heading--4xl')
+    })
+  })
+})

package/src/components/Heading/Heading.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span'
+type HeadingSize = '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md'
+
+export interface HeadingProps {
+  /** Semantic HTML tag */
+  as?: HeadingTag
+  /** Visual hierarchy size */
+  size?: HeadingSize
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right'
+  /** Prevent wrapping with ellipsis */
+  truncate?: boolean
+}
+
+const props = withDefaults(defineProps<HeadingProps>(), {
+  as: 'h2',
+  size: '2xl',
+  align: 'left'
+})
+
+const classes = computed(() => [
+  'ui-heading',
+  `ui-heading--${props.size}`,
+  `ui-heading--${props.align}`,
+  { 'ui-heading--truncate': props.truncate }
+])
+</script>
+
+<template>
+  <component :is="as" :class="classes">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.ui-heading {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+/* Sizes */
+.ui-heading--4xl { font-size: var(--heading-4xl); }
+.ui-heading--3xl { font-size: var(--heading-3xl); }
+.ui-heading--2xl { font-size: var(--heading-2xl); }
+.ui-heading--xl  { font-size: var(--heading-xl); }
+.ui-heading--lg  { font-size: var(--heading-lg); }
+.ui-heading--md  { font-size: var(--heading-md); }
+
+/* Alignment */
+.ui-heading--left   { text-align: left; }
+.ui-heading--center { text-align: center; }
+.ui-heading--right  { text-align: right; }
+
+/* Truncation */
+.ui-heading--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/components/Heading/index.ts

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

package/src/components/Icon/Icon.test.ts

@@ -0,0 +1,157 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, defineComponent, markRaw } from 'vue'
+import Icon from './Icon.vue'
+
+// Mock Vue component icon for testing
+const MockVueIcon = markRaw(defineComponent({
+  name: 'MockVueIcon',
+  render() {
+    return h('svg', { 'data-testid': 'mock-svg' }, [
+      h('path', { d: 'M0 0h24v24H0z' })
+    ])
+  }
+}))
+
+// Mock HugeIcons data array format
+const MockHugeIcon = [
+  ['path', { d: 'M12 2v20', stroke: 'currentColor', strokeWidth: '1.5', key: '0' }],
+  ['circle', { cx: '12', cy: '12', r: '4', stroke: 'currentColor', strokeWidth: '1.5', key: '1' }]
+] as [string, Record<string, unknown>][]
+
+describe('Icon', () => {
+  describe('Vue Component Icons', () => {
+    it('renders the passed Vue component', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockVueIcon }
+      })
+
+      expect(wrapper.find('[data-testid="mock-svg"]').exists()).toBe(true)
+    })
+
+    it('applies default size (md)', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockVueIcon }
+      })
+
+      const style = wrapper.attributes('style')
+      expect(style).toContain('--icon-size: var(--icon-md)')
+    })
+
+    it('applies predefined sizes correctly', () => {
+      const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+      for (const size of sizes) {
+        const wrapper = mount(Icon, {
+          props: { icon: MockVueIcon, size }
+        })
+
+        expect(wrapper.attributes('style')).toContain(`--icon-size: var(--icon-${size})`)
+      }
+    })
+
+    it('accepts custom size values', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockVueIcon, size: '3rem' }
+      })
+
+      expect(wrapper.attributes('style')).toContain('--icon-size: 3rem')
+    })
+
+    it('has aria-hidden="true" when no label provided', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockVueIcon }
+      })
+
+      expect(wrapper.attributes('aria-hidden')).toBe('true')
+    })
+
+    it('has accessible label when label prop provided', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockVueIcon, label: 'Close dialog' }
+      })
+
+      expect(wrapper.attributes('aria-label')).toBe('Close dialog')
+      expect(wrapper.attributes('aria-hidden')).toBe('false')
+    })
+
+    it('has role="img" for semantic meaning', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockVueIcon }
+      })
+
+      expect(wrapper.attributes('role')).toBe('img')
+    })
+
+    it('applies ui-icon class for styling', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockVueIcon }
+      })
+
+      expect(wrapper.classes()).toContain('ui-icon')
+    })
+  })
+
+  describe('HugeIcons Data Array Format', () => {
+    it('renders HugeIcons data array as SVG', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockHugeIcon }
+      })
+
+      expect(wrapper.element.tagName.toLowerCase()).toBe('svg')
+      expect(wrapper.find('path').exists()).toBe(true)
+      expect(wrapper.find('circle').exists()).toBe(true)
+    })
+
+    it('applies size to HugeIcons', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockHugeIcon, size: 'lg' }
+      })
+
+      expect(wrapper.attributes('style')).toContain('--icon-size: var(--icon-lg)')
+    })
+
+    it('applies custom size to HugeIcons', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockHugeIcon, size: '48px' }
+      })
+
+      expect(wrapper.attributes('style')).toContain('--icon-size: 48px')
+    })
+
+    it('has proper SVG attributes', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockHugeIcon }
+      })
+
+      expect(wrapper.attributes('xmlns')).toBe('http://www.w3.org/2000/svg')
+      expect(wrapper.attributes('viewBox')).toBe('0 0 24 24')
+      expect(wrapper.attributes('fill')).toBe('none')
+    })
+
+    it('has aria-hidden for decorative HugeIcons', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockHugeIcon }
+      })
+
+      expect(wrapper.attributes('aria-hidden')).toBe('true')
+    })
+
+    it('has accessible label when provided', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockHugeIcon, label: 'Sun icon' }
+      })
+
+      expect(wrapper.attributes('aria-label')).toBe('Sun icon')
+      expect(wrapper.attributes('aria-hidden')).toBe('false')
+    })
+
+    it('applies ui-icon class', () => {
+      const wrapper = mount(Icon, {
+        props: { icon: MockHugeIcon }
+      })
+
+      expect(wrapper.classes()).toContain('ui-icon')
+    })
+  })
+})

package/src/components/Icon/Icon.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, h, type Component, type VNode } from 'vue'
+
+type HugeIconData = [string, Record<string, unknown>][]
+
+export type IconInput = Component | HugeIconData
+
+export interface IconProps {
+  /** The icon - Vue component OR HugeIcons data array */
+  icon: IconInput
+  /** Predefined size or custom value */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string
+  /** Stroke width (for stroke-based icons like Lucide) */
+  strokeWidth?: number | string
+  /** Accessible label - required for standalone icons */
+  label?: string
+}
+
+const props = withDefaults(defineProps<IconProps>(), {
+  size: 'md',
+  strokeWidth: 1.5
+})
+
+const sizeMap: Record<string, string> = {
+  xs: 'var(--icon-xs)',
+  sm: 'var(--icon-sm)',
+  md: 'var(--icon-md)',
+  lg: 'var(--icon-lg)',
+  xl: 'var(--icon-xl)'
+}
+
+const resolvedSize = computed(() => sizeMap[props.size] ?? props.size)
+const ariaHidden = computed(() => !props.label)
+
+const isHugeIconData = computed(() => {
+  return Array.isArray(props.icon) &&
+         props.icon.length > 0 &&
+         Array.isArray(props.icon[0])
+})
+
+function renderHugeIcon(): VNode {
+  const data = props.icon as HugeIconData
+  const children = data.map(([tag, attrs]) => {
+    if (props.strokeWidth && attrs['stroke-width']) {
+      return h(tag, { ...attrs, 'stroke-width': props.strokeWidth })
+    }
+    return h(tag, attrs)
+  })
+
+  return h('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    class: 'ui-icon',
+    style: { '--icon-size': resolvedSize.value },
+    'aria-label': props.label,
+    'aria-hidden': ariaHidden.value,
+    role: 'img'
+  }, children)
+}
+</script>
+
+<template>
+  <component
+    v-if="!isHugeIconData"
+    :is="icon"
+    class="ui-icon"
+    :style="{ '--icon-size': resolvedSize }"
+    :stroke-width="strokeWidth"
+    :aria-label="label"
+    :aria-hidden="ariaHidden"
+    role="img"
+  />
+  <component v-else :is="renderHugeIcon" />
+</template>
+
+<style scoped>
+.ui-icon {
+  width: var(--icon-size);
+  height: var(--icon-size);
+  flex-shrink: 0;
+  color: currentColor;
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon.vue'
+export type { IconProps, IconInput } from './Icon.vue'

package/src/components/Input/Input.test.ts

@@ -0,0 +1,273 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+import Input from './Input.vue'
+
+// Mock icon component for testing
+const MockIcon = defineComponent({
+  name: 'MockIcon',
+  render() {
+    return h('svg', { class: 'mock-icon' })
+  }
+})
+
+describe('Input', () => {
+  describe('Rendering', () => {
+    it('renders input element', () => {
+      const wrapper = mount(Input)
+      expect(wrapper.find('input').exists()).toBe(true)
+    })
+
+    it('renders with label', () => {
+      const wrapper = mount(Input, {
+        props: { label: 'Email' }
+      })
+      expect(wrapper.find('label').text()).toBe('Email')
+    })
+
+    it('renders with placeholder', () => {
+      const wrapper = mount(Input, {
+        props: { placeholder: 'Enter email' }
+      })
+      expect(wrapper.find('input').attributes('placeholder')).toBe('Enter email')
+    })
+
+    it('renders with hint text', () => {
+      const wrapper = mount(Input, {
+        props: { hint: 'We will never share your email' }
+      })
+      expect(wrapper.find('.ui-input-field__message--hint').text()).toBe('We will never share your email')
+    })
+
+    it('renders with error message', () => {
+      const wrapper = mount(Input, {
+        props: { error: 'Email is required' }
+      })
+      expect(wrapper.find('.ui-input-field__message--error').text()).toBe('Email is required')
+    })
+
+    it('error takes precedence over hint', () => {
+      const wrapper = mount(Input, {
+        props: { hint: 'Hint text', error: 'Error text' }
+      })
+      expect(wrapper.find('.ui-input-field__message--error').exists()).toBe(true)
+      expect(wrapper.find('.ui-input-field__message--hint').exists()).toBe(false)
+    })
+
+    it('renders required indicator', () => {
+      const wrapper = mount(Input, {
+        props: { label: 'Email', required: true }
+      })
+      expect(wrapper.find('.ui-input-field__required').exists()).toBe(true)
+      expect(wrapper.find('input').attributes('required')).toBeDefined()
+    })
+  })
+
+  describe('v-model', () => {
+    it('binds modelValue to input', () => {
+      const wrapper = mount(Input, {
+        props: { modelValue: 'test@example.com' }
+      })
+      expect(wrapper.find('input').element.value).toBe('test@example.com')
+    })
+
+    it('emits update:modelValue on input', async () => {
+      const wrapper = mount(Input)
+      await wrapper.find('input').setValue('hello')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['hello'])
+    })
+
+    it('handles number type correctly', async () => {
+      const wrapper = mount(Input, {
+        props: { type: 'number' }
+      })
+      await wrapper.find('input').setValue('42')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([42])
+    })
+  })
+
+  describe('Events', () => {
+    it('emits focus event', async () => {
+      const wrapper = mount(Input)
+      await wrapper.find('input').trigger('focus')
+      expect(wrapper.emitted('focus')).toBeTruthy()
+    })
+
+    it('emits blur event', async () => {
+      const wrapper = mount(Input)
+      await wrapper.find('input').trigger('blur')
+      expect(wrapper.emitted('blur')).toBeTruthy()
+    })
+  })
+
+  describe('Size variants', () => {
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+    sizes.forEach(size => {
+      it(`applies ${size} size class`, () => {
+        const wrapper = mount(Input, {
+          props: { size }
+        })
+        expect(wrapper.find('.ui-input-wrapper').classes()).toContain(`ui-input-wrapper--${size}`)
+      })
+    })
+  })
+
+  describe('States', () => {
+    it('applies disabled state', () => {
+      const wrapper = mount(Input, {
+        props: { disabled: true }
+      })
+      expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+      expect(wrapper.find('.ui-input-wrapper').classes()).toContain('ui-input-wrapper--disabled')
+    })
+
+    it('applies readonly state', () => {
+      const wrapper = mount(Input, {
+        props: { readonly: true }
+      })
+      expect(wrapper.find('input').attributes('readonly')).toBeDefined()
+      expect(wrapper.find('.ui-input-wrapper').classes()).toContain('ui-input-wrapper--readonly')
+    })
+
+    it('applies error state', () => {
+      const wrapper = mount(Input, {
+        props: { error: 'Invalid input' }
+      })
+      expect(wrapper.find('.ui-input-wrapper').classes()).toContain('ui-input-wrapper--error')
+    })
+
+    it('applies block state', () => {
+      const wrapper = mount(Input, {
+        props: { block: true }
+      })
+      expect(wrapper.find('.ui-input-field').classes()).toContain('ui-input-field--block')
+    })
+  })
+
+  describe('Input types', () => {
+    const types = ['text', 'email', 'password', 'search', 'tel', 'url', 'number'] as const
+
+    types.forEach(type => {
+      it(`renders ${type} input type`, () => {
+        const wrapper = mount(Input, {
+          props: { type }
+        })
+        expect(wrapper.find('input').attributes('type')).toBe(type)
+      })
+    })
+  })
+
+  describe('Icons and loading', () => {
+    it('renders left icon', () => {
+      const wrapper = mount(Input, {
+        props: { iconLeft: MockIcon }
+      })
+      expect(wrapper.find('.ui-input-wrapper__addon--left').exists()).toBe(true)
+    })
+
+    it('renders right icon', () => {
+      const wrapper = mount(Input, {
+        props: { iconRight: MockIcon }
+      })
+      expect(wrapper.find('.ui-input-wrapper__addon--right').exists()).toBe(true)
+    })
+
+    it('renders loading spinner', () => {
+      const wrapper = mount(Input, {
+        props: { loading: true }
+      })
+      expect(wrapper.find('.ui-input-wrapper__addon--right').exists()).toBe(true)
+      expect(wrapper.findComponent({ name: 'Spinner' }).exists()).toBe(true)
+    })
+
+    it('loading spinner takes precedence over right icon', () => {
+      const wrapper = mount(Input, {
+        props: { loading: true, iconRight: MockIcon }
+      })
+      expect(wrapper.findComponent({ name: 'Spinner' }).exists()).toBe(true)
+    })
+  })
+
+  describe('Slots', () => {
+    it('renders left slot', () => {
+      const wrapper = mount(Input, {
+        slots: { left: '<span class="custom-left">$</span>' }
+      })
+      expect(wrapper.find('.custom-left').text()).toBe('$')
+    })
+
+    it('renders right slot', () => {
+      const wrapper = mount(Input, {
+        slots: { right: '<span class="custom-right">%</span>' }
+      })
+      expect(wrapper.find('.custom-right').text()).toBe('%')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('auto-generates unique id', () => {
+      const wrapper = mount(Input)
+      const input = wrapper.find('input')
+      expect(input.attributes('id')).toMatch(/^input-/)
+    })
+
+    it('uses provided id', () => {
+      const wrapper = mount(Input, {
+        props: { id: 'custom-id' }
+      })
+      expect(wrapper.find('input').attributes('id')).toBe('custom-id')
+    })
+
+    it('links label to input via for attribute', () => {
+      const wrapper = mount(Input, {
+        props: { label: 'Email', id: 'email-input' }
+      })
+      expect(wrapper.find('label').attributes('for')).toBe('email-input')
+    })
+
+    it('sets aria-describedby to hint id', () => {
+      const wrapper = mount(Input, {
+        props: { hint: 'Helpful hint', id: 'my-input' }
+      })
+      expect(wrapper.find('input').attributes('aria-describedby')).toBe('my-input-hint')
+    })
+
+    it('sets aria-describedby to error id when error exists', () => {
+      const wrapper = mount(Input, {
+        props: { error: 'Error message', id: 'my-input' }
+      })
+      expect(wrapper.find('input').attributes('aria-describedby')).toBe('my-input-error')
+    })
+
+    it('sets aria-invalid when error exists', () => {
+      const wrapper = mount(Input, {
+        props: { error: 'Error message' }
+      })
+      expect(wrapper.find('input').attributes('aria-invalid')).toBe('true')
+    })
+
+    it('error message has role="alert"', () => {
+      const wrapper = mount(Input, {
+        props: { error: 'Error message' }
+      })
+      expect(wrapper.find('.ui-input-field__message--error').attributes('role')).toBe('alert')
+    })
+  })
+
+  describe('HTML attributes', () => {
+    it('passes name attribute', () => {
+      const wrapper = mount(Input, {
+        props: { name: 'email' }
+      })
+      expect(wrapper.find('input').attributes('name')).toBe('email')
+    })
+
+    it('passes autocomplete attribute', () => {
+      const wrapper = mount(Input, {
+        props: { autocomplete: 'email' }
+      })
+      expect(wrapper.find('input').attributes('autocomplete')).toBe('email')
+    })
+  })
+})