@sabrenski/spire-ui 0.0.1

package/src/components/ToggleGroup/ToggleGroup.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { provide, computed, toRef } from 'vue'
+
+export interface ToggleGroupProps {
+  /** Selected value(s) - single value for 'single' type, array for 'multiple' */
+  modelValue?: string | number | (string | number)[]
+  /** Selection type */
+  type?: 'single' | 'multiple'
+  /** Size for all buttons in group */
+  size?: 'sm' | 'md' | 'lg'
+  /** Disabled state for all buttons */
+  disabled?: boolean
+  /** Accessible label for the group */
+  label?: string
+  /** Orientation for keyboard navigation */
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const props = withDefaults(defineProps<ToggleGroupProps>(), {
+  type: 'single',
+  size: 'md',
+  disabled: false,
+  orientation: 'horizontal'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | (string | number)[] | undefined): void
+  (e: 'change', value: string | number | (string | number)[] | undefined): void
+}>()
+
+function toggle(value: string | number) {
+  if (props.type === 'single') {
+    const newValue = props.modelValue === value ? undefined : value
+    emit('update:modelValue', newValue)
+    emit('change', newValue)
+  } else {
+    const currentArray = Array.isArray(props.modelValue) ? props.modelValue : []
+    const newArray = currentArray.includes(value)
+      ? currentArray.filter(v => v !== value)
+      : [...currentArray, value]
+    emit('update:modelValue', newArray)
+    emit('change', newArray)
+  }
+}
+
+provide('toggleGroup', {
+  modelValue: toRef(props, 'modelValue'),
+  toggle,
+  type: props.type,
+  size: props.size,
+  disabled: props.disabled
+})
+
+const role = computed(() => props.type === 'single' ? 'radiogroup' : 'group')
+</script>
+
+<template>
+  <div
+    :role="role"
+    :aria-label="label"
+    :aria-orientation="orientation"
+    :aria-disabled="disabled || undefined"
+    class="ui-toggle-group"
+    :class="[
+      `ui-toggle-group--${orientation}`,
+      { 'ui-toggle-group--disabled': disabled }
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-toggle-group {
+  display: inline-flex;
+  gap: 0;
+}
+
+.ui-toggle-group--horizontal {
+  flex-direction: row;
+}
+
+.ui-toggle-group--vertical {
+  flex-direction: column;
+}
+
+.ui-toggle-group--horizontal :slotted(.ui-toggle-button) {
+  border-radius: 0;
+}
+
+.ui-toggle-group--horizontal :slotted(.ui-toggle-button:first-child) {
+  border-top-left-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
+}
+
+.ui-toggle-group--horizontal :slotted(.ui-toggle-button:last-child) {
+  border-top-right-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+}
+
+.ui-toggle-group--horizontal :slotted(.ui-toggle-button:not(:first-child)) {
+  margin-left: -1px;
+}
+
+.ui-toggle-group--vertical :slotted(.ui-toggle-button) {
+  border-radius: 0;
+}
+
+.ui-toggle-group--vertical :slotted(.ui-toggle-button:first-child) {
+  border-top-left-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
+}
+
+.ui-toggle-group--vertical :slotted(.ui-toggle-button:last-child) {
+  border-bottom-left-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+}
+
+.ui-toggle-group--vertical :slotted(.ui-toggle-button:not(:first-child)) {
+  margin-top: -1px;
+}
+
+.ui-toggle-group :slotted(.ui-toggle-button--pressed) {
+  z-index: 1;
+}
+
+.ui-toggle-group--disabled {
+  opacity: 0.5;
+}
+</style>

package/src/components/ToggleGroup/index.ts

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

package/src/components/Tooltip/Tooltip.test.ts

@@ -0,0 +1,238 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+import Tooltip from './Tooltip.vue'
+
+// Disable teleport for testing
+config.global.stubs = {
+  teleport: true
+}
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('Rendering', () => {
+    it('renders trigger slot content', () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text' },
+        slots: { default: '<button>Hover me</button>' }
+      })
+      expect(wrapper.find('button').text()).toBe('Hover me')
+    })
+
+    it('does not show tooltip initially', () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text' },
+        slots: { default: '<button>Hover me</button>' }
+      })
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(false)
+    })
+
+    it('shows tooltip on mouseenter after delay', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 100 },
+        slots: { default: '<button>Hover me</button>' }
+      })
+
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseenter')
+
+      // Not visible yet (within delay)
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(false)
+
+      // Advance past delay
+      vi.advanceTimersByTime(150)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(true)
+      expect(wrapper.find('[role="tooltip"]').text()).toBe('Help text')
+    })
+
+    it('hides tooltip on mouseleave', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 0 },
+        slots: { default: '<button>Hover me</button>' }
+      })
+
+      // Show tooltip
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseenter')
+      vi.advanceTimersByTime(50)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(true)
+
+      // Hide tooltip
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseleave')
+      vi.advanceTimersByTime(100)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(false)
+    })
+  })
+
+  describe('Focus interactions', () => {
+    it('shows tooltip on focusin', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 0 },
+        slots: { default: '<button>Focus me</button>' }
+      })
+
+      await wrapper.find('.ui-tooltip-trigger').trigger('focusin')
+      vi.advanceTimersByTime(50)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(true)
+    })
+
+    it('hides tooltip on focusout', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 0 },
+        slots: { default: '<button>Focus me</button>' }
+      })
+
+      await wrapper.find('.ui-tooltip-trigger').trigger('focusin')
+      vi.advanceTimersByTime(50)
+      await wrapper.vm.$nextTick()
+
+      await wrapper.find('.ui-tooltip-trigger').trigger('focusout')
+      vi.advanceTimersByTime(100)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(false)
+    })
+  })
+
+  describe('Keyboard interactions', () => {
+    it('hides tooltip on Escape key', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 0 },
+        slots: { default: '<button>Press Escape</button>' }
+      })
+
+      // Show tooltip
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseenter')
+      vi.advanceTimersByTime(50)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(true)
+
+      // Press Escape
+      await wrapper.find('.ui-tooltip-trigger').trigger('keydown', { key: 'Escape' })
+      vi.advanceTimersByTime(100)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(false)
+    })
+  })
+
+  describe('Props', () => {
+    it('respects custom delay', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 500 },
+        slots: { default: '<button>Hover me</button>' }
+      })
+
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseenter')
+
+      // Not visible at 400ms
+      vi.advanceTimersByTime(400)
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(false)
+
+      // Visible at 550ms
+      vi.advanceTimersByTime(150)
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(true)
+    })
+
+    it('does not show when disabled', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 0, disabled: true },
+        slots: { default: '<button>Hover me</button>' }
+      })
+
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseenter')
+      vi.advanceTimersByTime(100)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(false)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="tooltip" on content', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 0 },
+        slots: { default: '<button>Hover me</button>' }
+      })
+
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseenter')
+      vi.advanceTimersByTime(50)
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.find('[role="tooltip"]').exists()).toBe(true)
+    })
+
+    it('sets aria-describedby when visible', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 0 },
+        slots: { default: '<button>Hover me</button>' }
+      })
+
+      // Initially no aria-describedby
+      expect(wrapper.find('.ui-tooltip-trigger').attributes('aria-describedby')).toBeUndefined()
+
+      // Show tooltip
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseenter')
+      vi.advanceTimersByTime(50)
+      await wrapper.vm.$nextTick()
+
+      // Now has aria-describedby matching tooltip id
+      const describedBy = wrapper.find('.ui-tooltip-trigger').attributes('aria-describedby')
+      expect(describedBy).toBeDefined()
+      expect(describedBy).toMatch(/^tooltip-/)
+    })
+
+    it('tooltip id matches aria-describedby', async () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text', delay: 0 },
+        slots: { default: '<button>Hover me</button>' }
+      })
+
+      await wrapper.find('.ui-tooltip-trigger').trigger('mouseenter')
+      vi.advanceTimersByTime(50)
+      await wrapper.vm.$nextTick()
+
+      const describedBy = wrapper.find('.ui-tooltip-trigger').attributes('aria-describedby')
+      const tooltipId = wrapper.find('[role="tooltip"]').attributes('id')
+      expect(describedBy).toBe(tooltipId)
+    })
+  })
+
+  describe('Placement', () => {
+    it('defaults to top placement', () => {
+      const wrapper = mount(Tooltip, {
+        props: { text: 'Help text' },
+        slots: { default: '<button>Hover me</button>' }
+      })
+      // Placement is internal, but we can check the component accepts the prop
+      expect(wrapper.props('placement')).toBe('top')
+    })
+
+    it('accepts different placements', () => {
+      const placements = ['top', 'bottom', 'left', 'right'] as const
+
+      placements.forEach(placement => {
+        const wrapper = mount(Tooltip, {
+          props: { text: 'Help text', placement },
+          slots: { default: '<button>Hover me</button>' }
+        })
+        expect(wrapper.props('placement')).toBe(placement)
+      })
+    })
+  })
+})

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { useId, useRelativePosition, calculatePosition, type Placement } from '../../composables'
+
+export interface TooltipProps {
+  /** Tooltip text content */
+  text: string
+  /** Preferred placement (may flip on collision) */
+  placement?: Placement
+  /** Delay before showing (ms) - prevents flicker on rapid mouseover */
+  delay?: number
+  /** Gap between trigger and tooltip */
+  offset?: number
+  /** Disable the tooltip */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  placement: 'top',
+  delay: 200,
+  offset: 8,
+  disabled: false
+})
+
+const tooltipId = useId('tooltip')
+
+const triggerRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const isVisible = ref(false)
+let showTimer: ReturnType<typeof setTimeout> | null = null
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+const { coords, updatePosition, getPlacement } = useRelativePosition(
+  triggerRef,
+  contentRef,
+  () => props.placement,
+  props.offset
+)
+
+function onEnter(el: Element) {
+  if (!triggerRef.value) return
+  const result = calculatePosition(
+    triggerRef.value,
+    el as HTMLElement,
+    getPlacement(),
+    props.offset
+  )
+  coords.value = result
+}
+
+const tooltipStyle = computed(() => ({
+  top: `${coords.value.top}px`,
+  left: `${coords.value.left}px`
+}))
+
+const arrowClass = computed(() => `ui-tooltip__arrow--${coords.value.actualPlacement}`)
+
+function show() {
+  if (props.disabled) return
+
+  if (hideTimer) {
+    clearTimeout(hideTimer)
+    hideTimer = null
+  }
+
+  if (showTimer) clearTimeout(showTimer)
+  showTimer = setTimeout(() => {
+    isVisible.value = true
+  }, props.delay)
+}
+
+function hide() {
+  if (showTimer) {
+    clearTimeout(showTimer)
+    showTimer = null
+  }
+
+  hideTimer = setTimeout(() => {
+    isVisible.value = false
+  }, 50)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && isVisible.value) {
+    hide()
+  }
+}
+
+onUnmounted(() => {
+  if (showTimer) clearTimeout(showTimer)
+  if (hideTimer) clearTimeout(hideTimer)
+})
+</script>
+
+<template>
+  <span
+    ref="triggerRef"
+    class="ui-tooltip-trigger"
+    :aria-describedby="isVisible ? tooltipId : undefined"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+    @keydown="onKeydown"
+  >
+    <slot />
+  </span>
+
+  <Teleport to="body">
+    <Transition :name="`ui-tooltip-${coords.actualPlacement}`" @enter="onEnter">
+      <div
+        v-if="isVisible && !disabled"
+        :id="tooltipId"
+        ref="contentRef"
+        role="tooltip"
+        class="ui-tooltip"
+        :style="tooltipStyle"
+      >
+        {{ text }}
+        <span class="ui-tooltip__arrow" :class="arrowClass" />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.ui-tooltip-trigger {
+  display: inline-block;
+}
+
+.ui-tooltip {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  max-width: 250px;
+  padding: var(--space-1) var(--space-2);
+  background-color: var(--tooltip-bg);
+  color: var(--tooltip-text);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  line-height: 1.4;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+  pointer-events: none;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.ui-tooltip__arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--tooltip-bg);
+  transform: rotate(45deg);
+}
+
+.ui-tooltip__arrow--top {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.ui-tooltip__arrow--bottom {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.ui-tooltip__arrow--left {
+  right: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.ui-tooltip__arrow--right {
+  left: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.ui-tooltip-top-enter-active,
+.ui-tooltip-top-leave-active,
+.ui-tooltip-bottom-enter-active,
+.ui-tooltip-bottom-leave-active,
+.ui-tooltip-left-enter-active,
+.ui-tooltip-left-leave-active,
+.ui-tooltip-right-enter-active,
+.ui-tooltip-right-leave-active {
+  transition:
+    opacity var(--duration-fast) var(--ease-out-expo),
+    transform var(--duration-fast) var(--ease-out-expo);
+  will-change: transform, opacity;
+}
+
+.ui-tooltip-top-enter-from,
+.ui-tooltip-top-leave-to {
+  opacity: 0;
+  transform: translateY(4px) scale(0.96);
+}
+
+.ui-tooltip-bottom-enter-from,
+.ui-tooltip-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.96);
+}
+
+.ui-tooltip-left-enter-from,
+.ui-tooltip-left-leave-to {
+  opacity: 0;
+  transform: translateX(4px) scale(0.96);
+}
+
+.ui-tooltip-right-enter-from,
+.ui-tooltip-right-leave-to {
+  opacity: 0;
+  transform: translateX(-4px) scale(0.96);
+}
+</style>

package/src/components/Tooltip/index.ts

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