@sabrenski/spire-ui 0.0.1

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted } from 'vue'
+import { useId } from '../../composables'
+
+export interface CheckboxProps {
+  /** Checked state (v-model) */
+  modelValue?: boolean
+  /** Indeterminate state (partial selection) */
+  indeterminate?: boolean
+  /** Checkbox size */
+  size?: 'sm' | 'md' | 'lg'
+  /** Disabled state */
+  disabled?: boolean
+  /** Visible label text */
+  label?: string
+  /** Description text below label */
+  description?: string
+  /** HTML name for form submission */
+  name?: string
+  /** Value attribute for form submission */
+  value?: string
+  /** ID for label association */
+  id?: string
+}
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: false,
+  indeterminate: false,
+  size: 'md',
+  disabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const uid = useId('checkbox')
+const checkboxId = computed(() => props.id || uid)
+
+watch(
+  () => props.indeterminate,
+  (val) => {
+    if (inputRef.value) {
+      inputRef.value.indeterminate = val
+    }
+  }
+)
+
+onMounted(() => {
+  if (inputRef.value && props.indeterminate) {
+    inputRef.value.indeterminate = true
+  }
+})
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.checked)
+  emit('change', target.checked)
+}
+
+const checkPathLength = 24
+const indeterminatePathLength = 10
+</script>
+
+<template>
+  <label
+    class="ui-checkbox"
+    :class="[
+      `ui-checkbox--${size}`,
+      {
+        'ui-checkbox--disabled': disabled,
+        'ui-checkbox--checked': modelValue,
+        'ui-checkbox--indeterminate': indeterminate
+      }
+    ]"
+  >
+    <input
+      ref="inputRef"
+      :id="checkboxId"
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      class="ui-checkbox__input"
+      @change="handleChange"
+    />
+
+    <span class="ui-checkbox__box" aria-hidden="true">
+      <svg
+        v-if="modelValue && !indeterminate"
+        class="ui-checkbox__icon ui-checkbox__check"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path
+          d="M3.5 8.5L6.5 11.5L12.5 4.5"
+          :stroke-dasharray="checkPathLength"
+          :stroke-dashoffset="0"
+        />
+      </svg>
+
+      <svg
+        v-else-if="indeterminate"
+        class="ui-checkbox__icon ui-checkbox__indeterminate"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+      >
+        <path
+          d="M4 8H12"
+          :stroke-dasharray="indeterminatePathLength"
+          :stroke-dashoffset="0"
+        />
+      </svg>
+    </span>
+
+    <span v-if="label || description" class="ui-checkbox__content">
+      <span v-if="label" class="ui-checkbox__label">{{ label }}</span>
+      <span v-if="description" class="ui-checkbox__description">{{ description }}</span>
+    </span>
+  </label>
+</template>
+
+<style scoped>
+.ui-checkbox {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  cursor: pointer;
+  font-family: var(--font-sans);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ui-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ui-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ui-checkbox__box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 2px solid var(--checkbox-border);
+  border-radius: var(--radius-sm);
+  background-color: var(--checkbox-bg);
+  transition:
+    background-color var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default),
+    box-shadow var(--duration-fast) var(--ease-default);
+}
+
+.ui-checkbox--checked .ui-checkbox__box,
+.ui-checkbox--indeterminate .ui-checkbox__box {
+  background-color: var(--checkbox-checked-bg);
+  border-color: var(--checkbox-checked-bg);
+}
+
+.ui-checkbox:not(.ui-checkbox--disabled):hover .ui-checkbox__box {
+  border-color: var(--checkbox-border-hover);
+}
+
+.ui-checkbox--checked:not(.ui-checkbox--disabled):hover .ui-checkbox__box,
+.ui-checkbox--indeterminate:not(.ui-checkbox--disabled):hover .ui-checkbox__box {
+  background-color: var(--checkbox-checked-hover);
+  border-color: var(--checkbox-checked-hover);
+}
+
+.ui-checkbox__input:focus-visible + .ui-checkbox__box {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-checkbox--sm .ui-checkbox__box {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-checkbox--md .ui-checkbox__box {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.ui-checkbox--lg .ui-checkbox__box {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.ui-checkbox__icon {
+  position: absolute;
+  color: var(--checkbox-check);
+}
+
+.ui-checkbox--sm .ui-checkbox__icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.ui-checkbox--md .ui-checkbox__icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-checkbox--lg .ui-checkbox__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.ui-checkbox__check path {
+  stroke-dashoffset: 24;
+  animation: checkbox-draw 0.2s var(--ease-out-expo) forwards;
+}
+
+@keyframes checkbox-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.ui-checkbox__indeterminate path {
+  stroke-dashoffset: 10;
+  animation: checkbox-dash 0.15s var(--ease-out-expo) forwards;
+}
+
+@keyframes checkbox-dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.ui-checkbox__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding-top: 1px;
+}
+
+.ui-checkbox__label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--checkbox-label);
+  line-height: var(--leading-tight);
+}
+
+.ui-checkbox__description {
+  font-size: var(--text-xs);
+  color: var(--checkbox-description);
+  line-height: var(--leading-normal);
+}
+
+.ui-checkbox--sm .ui-checkbox__label {
+  font-size: var(--text-xs);
+}
+
+.ui-checkbox--lg .ui-checkbox__label {
+  font-size: var(--text-md);
+}
+
+.ui-checkbox--lg .ui-checkbox__description {
+  font-size: var(--text-sm);
+}
+</style>

package/src/components/Checkbox/index.ts

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

package/src/components/ChoiceChip/ChoiceChip.test.ts

@@ -0,0 +1,142 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ChoiceChip from './ChoiceChip.vue'
+
+describe('ChoiceChip', () => {
+  describe('Rendering', () => {
+    it('renders as a label element', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option' }
+      })
+      expect(wrapper.find('label').exists()).toBe(true)
+    })
+
+    it('renders hidden checkbox input', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option' }
+      })
+      expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+    })
+
+    it('renders label text', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Category' }
+      })
+      expect(wrapper.find('.ui-choice-chip__label').text()).toBe('Category')
+    })
+
+    it('renders check container', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option' }
+      })
+      expect(wrapper.find('.ui-choice-chip__check').exists()).toBe(true)
+    })
+  })
+
+  describe('Standalone v-model', () => {
+    it('is unchecked when modelValue is false', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', modelValue: false }
+      })
+      const input = wrapper.find('input')
+      expect((input.element as HTMLInputElement).checked).toBe(false)
+    })
+
+    it('is checked when modelValue is true', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', modelValue: true }
+      })
+      const input = wrapper.find('input')
+      expect((input.element as HTMLInputElement).checked).toBe(true)
+    })
+
+    it('applies selected class when checked', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', modelValue: true }
+      })
+      expect(wrapper.find('.ui-choice-chip').classes()).toContain('ui-choice-chip--selected')
+    })
+
+    it('emits update:modelValue on change', async () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', modelValue: false }
+      })
+      await wrapper.find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+    })
+
+    it('emits change event on change', async () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', modelValue: false }
+      })
+      await wrapper.find('input').trigger('change')
+      expect(wrapper.emitted('change')?.[0]).toEqual([true])
+    })
+
+    it('toggles from true to false', async () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', modelValue: true }
+      })
+      await wrapper.find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('applies disabled attribute to input', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', disabled: true }
+      })
+      expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+    })
+
+    it('applies disabled class', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', disabled: true }
+      })
+      expect(wrapper.find('.ui-choice-chip').classes()).toContain('ui-choice-chip--disabled')
+    })
+
+    it('does not emit events when disabled', async () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', disabled: true, modelValue: false }
+      })
+      await wrapper.find('input').trigger('change')
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Icon support', () => {
+    const mockIcon = { render: () => null }
+
+    it('renders icon when provided', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option', icon: mockIcon }
+      })
+      expect(wrapper.findComponent({ name: 'Icon' }).exists()).toBe(true)
+    })
+
+    it('does not render icon when not provided', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option' }
+      })
+      expect(wrapper.find('.ui-choice-chip__icon').exists()).toBe(false)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('input is visually hidden but accessible', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option' }
+      })
+      expect(wrapper.find('.ui-choice-chip__input').exists()).toBe(true)
+    })
+
+    it('check icon has aria-hidden', () => {
+      const wrapper = mount(ChoiceChip, {
+        props: { label: 'Option' }
+      })
+      expect(wrapper.find('.ui-choice-chip__check').attributes('aria-hidden')).toBe('true')
+    })
+  })
+})

package/src/components/ChoiceChip/ChoiceChip.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import Icon from '../Icon/Icon.vue'
+import type { IconInput } from '../Icon/Icon.vue'
+import { useId } from '../../composables'
+
+export interface ChoiceChipProps {
+  /** Selected state for standalone usage (v-model) */
+  modelValue?: boolean
+  /** Value for group usage */
+  value?: string | number
+  /** Chip label text */
+  label: string
+  /** Optional leading icon */
+  icon?: IconInput
+  /** Disabled state */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<ChoiceChipProps>(), {
+  disabled: false
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
+
+const groupContext = inject<{
+  modelValue: { value: (string | number)[] | string | number | undefined }
+  toggle: (value: string | number) => void
+  type: 'single' | 'multiple'
+  disabled?: boolean
+} | null>('choiceChipGroup', null)
+
+const isInGroup = computed(() => groupContext !== null && props.value !== undefined)
+
+const effectiveDisabled = computed(() => props.disabled || groupContext?.disabled)
+
+const isSelected = computed(() => {
+  if (isInGroup.value && groupContext && props.value !== undefined) {
+    const groupValue = groupContext.modelValue.value
+    if (Array.isArray(groupValue)) {
+      return groupValue.includes(props.value)
+    }
+    return groupValue === props.value
+  }
+  return props.modelValue ?? false
+})
+
+const chipId = useId('chip')
+
+function handleChange() {
+  if (effectiveDisabled.value) return
+
+  if (isInGroup.value && groupContext && props.value !== undefined) {
+    groupContext.toggle(props.value)
+  } else {
+    const newValue = !props.modelValue
+    emit('update:modelValue', newValue)
+    emit('change', newValue)
+  }
+}
+</script>
+
+<template>
+  <label
+    class="ui-choice-chip"
+    :class="{
+      'ui-choice-chip--selected': isSelected,
+      'ui-choice-chip--disabled': effectiveDisabled
+    }"
+  >
+    <input
+      :id="chipId"
+      type="checkbox"
+      :checked="isSelected"
+      :disabled="effectiveDisabled"
+      class="ui-choice-chip__input"
+      @change="handleChange"
+    />
+
+    <span class="ui-choice-chip__check" aria-hidden="true">
+      <svg
+        class="ui-choice-chip__check-icon"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M3.5 8.5L6.5 11L12.5 5" />
+      </svg>
+    </span>
+
+    <Icon v-if="icon" :icon="icon" class="ui-choice-chip__icon" />
+
+    <span class="ui-choice-chip__label">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.ui-choice-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 32px;
+  padding: 0 var(--space-3);
+  background: var(--chip-bg);
+  border: 1px solid var(--chip-border);
+  border-radius: var(--radius-full);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--chip-text);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default),
+    color var(--duration-fast) var(--ease-default);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ui-choice-chip__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ui-choice-chip:not(.ui-choice-chip--disabled):hover {
+  background: var(--chip-bg-hover);
+  border-color: var(--chip-border-hover);
+}
+
+.ui-choice-chip:not(.ui-choice-chip--disabled):active {
+  background: var(--chip-bg-active);
+  border-color: var(--chip-border-active);
+}
+
+.ui-choice-chip--selected {
+  background: var(--chip-bg-selected);
+  border-color: var(--chip-border-selected);
+  color: var(--chip-text-selected);
+}
+
+.ui-choice-chip--selected:not(.ui-choice-chip--disabled):hover {
+  background: var(--chip-bg-selected-hover);
+  border-color: var(--chip-border-selected-hover);
+}
+
+.ui-choice-chip--selected:not(.ui-choice-chip--disabled):active {
+  background: var(--chip-bg-selected-active);
+  border-color: var(--chip-border-selected-active);
+}
+
+.ui-choice-chip__input:focus-visible + .ui-choice-chip__check {
+}
+
+.ui-choice-chip:has(.ui-choice-chip__input:focus-visible) {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-choice-chip--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ui-choice-chip__check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 0;
+  margin-right: calc(-1 * var(--space-2));
+  overflow: hidden;
+  transition:
+    width var(--duration-fast) var(--ease-out-expo),
+    margin var(--duration-fast) var(--ease-out-expo);
+}
+
+.ui-choice-chip--selected .ui-choice-chip__check {
+  width: 1rem;
+  margin-right: 0;
+}
+
+.ui-choice-chip__check-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+  opacity: 0;
+  transform: scale(0.5);
+  transition:
+    opacity var(--duration-fast) var(--ease-default),
+    transform var(--duration-fast) var(--ease-out-back);
+}
+
+.ui-choice-chip--selected .ui-choice-chip__check-icon {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ui-choice-chip__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.ui-choice-chip__label {
+  white-space: nowrap;
+}
+</style>

package/src/components/ChoiceChip/index.ts

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