@sabrenski/spire-ui 0.0.1

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@sabrenski/spire-ui",
+  "version": "0.0.1",
+  "description": "A dependency-free Vue 3 component library built with pure CSS and OKLCH colors",
+  "type": "module",
+  "license": "MIT",
+  "author": "Sabri Stratos",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sabristratos/spire-ui.git"
+  },
+  "homepage": "https://github.com/sabristratos/spire-ui#readme",
+  "bugs": {
+    "url": "https://github.com/sabristratos/spire-ui/issues"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "components",
+    "ui",
+    "component-library",
+    "design-system",
+    "typescript",
+    "oklch",
+    "css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./style.css": "./src/styles/main.css",
+    "./src/*": "./src/*"
+  },
+  "publishConfig": {
+    "main": "./dist/spire-ui.umd.js",
+    "module": "./dist/spire-ui.es.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "import": "./dist/spire-ui.es.js",
+        "require": "./dist/spire-ui.umd.js",
+        "types": "./dist/index.d.ts"
+      },
+      "./style.css": "./dist/spire-ui.css"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit",
+    "docs:tokens": "npx tsx scripts/generate-token-docs.ts"
+  },
+  "peerDependencies": {
+    "chart.js": "^4.4.0",
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "chart.js": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/test-utils": "^2.4.6",
+    "chart.js": "^4.5.1",
+    "happy-dom": "^20.3.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.4.0",
+    "vitest": "^4.0.17",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/src/components/Accordion/Accordion.test.ts

@@ -0,0 +1,218 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, ref, defineComponent } from 'vue'
+import AccordionRoot from './AccordionRoot.vue'
+import AccordionItem from './AccordionItem.vue'
+import AccordionTrigger from './AccordionTrigger.vue'
+import AccordionContent from './AccordionContent.vue'
+
+function createAccordion(props: Record<string, unknown> = {}) {
+  return mount(AccordionRoot, {
+    props,
+    slots: {
+      default: () => [
+        h(AccordionItem, { value: 'item-1' }, {
+          default: () => [
+            h(AccordionTrigger, null, { default: () => 'Item 1' }),
+            h(AccordionContent, null, { default: () => 'Content 1' })
+          ]
+        }),
+        h(AccordionItem, { value: 'item-2' }, {
+          default: () => [
+            h(AccordionTrigger, null, { default: () => 'Item 2' }),
+            h(AccordionContent, null, { default: () => 'Content 2' })
+          ]
+        }),
+        h(AccordionItem, { value: 'item-3', disabled: true }, {
+          default: () => [
+            h(AccordionTrigger, null, { default: () => 'Item 3' }),
+            h(AccordionContent, null, { default: () => 'Content 3' })
+          ]
+        })
+      ]
+    }
+  })
+}
+
+describe('Accordion', () => {
+  describe('Rendering', () => {
+    it('renders all accordion items', () => {
+      const wrapper = createAccordion()
+      expect(wrapper.findAll('.ui-accordion__item')).toHaveLength(3)
+    })
+
+    it('renders triggers with correct text', () => {
+      const wrapper = createAccordion()
+      const triggers = wrapper.findAll('.ui-accordion__trigger')
+      expect(triggers[0].text()).toContain('Item 1')
+      expect(triggers[1].text()).toContain('Item 2')
+      expect(triggers[2].text()).toContain('Item 3')
+    })
+
+    it('renders chevron by default', () => {
+      const wrapper = createAccordion()
+      expect(wrapper.find('.ui-accordion__chevron').exists()).toBe(true)
+    })
+  })
+
+  describe('Single mode (default)', () => {
+    it('opens item when clicked', async () => {
+      const wrapper = createAccordion()
+      const trigger = wrapper.find('.ui-accordion__trigger')
+
+      await trigger.trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['item-1'])
+    })
+
+    it('closes open item when clicked again (collapsible)', async () => {
+      const wrapper = createAccordion({
+        modelValue: 'item-1',
+        collapsible: true
+      })
+
+      const trigger = wrapper.find('.ui-accordion__trigger')
+      await trigger.trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([undefined])
+    })
+
+    it('does not close last item when not collapsible', async () => {
+      const wrapper = createAccordion({
+        modelValue: 'item-1',
+        collapsible: false
+      })
+
+      const trigger = wrapper.find('.ui-accordion__trigger')
+      await trigger.trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+
+    it('closes other items when opening a new one', async () => {
+      const wrapper = createAccordion({
+        modelValue: 'item-1'
+      })
+
+      const triggers = wrapper.findAll('.ui-accordion__trigger')
+      await triggers[1].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['item-2'])
+    })
+  })
+
+  describe('Multiple mode', () => {
+    it('can open multiple items', async () => {
+      const wrapper = createAccordion({
+        modelValue: ['item-1'],
+        multiple: true
+      })
+
+      const triggers = wrapper.findAll('.ui-accordion__trigger')
+      await triggers[1].trigger('click')
+
+      const emitted = wrapper.emitted('update:modelValue')?.[0]?.[0] as string[]
+      expect(emitted).toContain('item-1')
+      expect(emitted).toContain('item-2')
+    })
+
+    it('can close one item while others remain open', async () => {
+      const wrapper = createAccordion({
+        modelValue: ['item-1', 'item-2'],
+        multiple: true
+      })
+
+      const triggers = wrapper.findAll('.ui-accordion__trigger')
+      await triggers[0].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['item-2']])
+    })
+  })
+
+  describe('Disabled state', () => {
+    it('applies disabled class to item', () => {
+      const wrapper = createAccordion()
+      const items = wrapper.findAll('.ui-accordion__item')
+      expect(items[2].classes()).toContain('ui-accordion__item--disabled')
+    })
+
+    it('does not toggle when disabled item is clicked', async () => {
+      const wrapper = createAccordion()
+      const triggers = wrapper.findAll('.ui-accordion__trigger')
+
+      await triggers[2].trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('trigger has aria-expanded attribute', () => {
+      const wrapper = createAccordion({
+        modelValue: 'item-1'
+      })
+
+      const triggers = wrapper.findAll('.ui-accordion__trigger')
+      expect(triggers[0].attributes('aria-expanded')).toBe('true')
+      expect(triggers[1].attributes('aria-expanded')).toBe('false')
+    })
+
+    it('trigger has aria-controls pointing to content', () => {
+      const wrapper = createAccordion()
+      const trigger = wrapper.find('.ui-accordion__trigger')
+      const content = wrapper.find('.ui-accordion__content')
+
+      expect(trigger.attributes('aria-controls')).toBe(content.attributes('id'))
+    })
+
+    it('content has role="region"', () => {
+      const wrapper = createAccordion()
+      const content = wrapper.find('.ui-accordion__content')
+      expect(content.attributes('role')).toBe('region')
+    })
+
+    it('content has aria-labelledby pointing to trigger', () => {
+      const wrapper = createAccordion()
+      const trigger = wrapper.find('.ui-accordion__trigger')
+      const content = wrapper.find('.ui-accordion__content')
+
+      expect(content.attributes('aria-labelledby')).toBe(trigger.attributes('id'))
+    })
+
+    it('trigger is a button element', () => {
+      const wrapper = createAccordion()
+      const trigger = wrapper.find('.ui-accordion__trigger')
+      expect(trigger.element.tagName).toBe('BUTTON')
+    })
+
+    it('trigger has type="button"', () => {
+      const wrapper = createAccordion()
+      const trigger = wrapper.find('.ui-accordion__trigger')
+      expect(trigger.attributes('type')).toBe('button')
+    })
+  })
+
+  describe('Data attributes', () => {
+    it('item has data-state attribute', () => {
+      const wrapper = createAccordion({
+        modelValue: 'item-1'
+      })
+
+      const items = wrapper.findAll('.ui-accordion__item')
+      expect(items[0].attributes('data-state')).toBe('open')
+      expect(items[1].attributes('data-state')).toBe('closed')
+    })
+  })
+
+  describe('Chevron', () => {
+    it('rotates chevron when open', () => {
+      const wrapper = createAccordion({
+        modelValue: 'item-1'
+      })
+
+      const chevrons = wrapper.findAll('.ui-accordion__chevron')
+      expect(chevrons[0].classes()).toContain('ui-accordion__chevron--open')
+      expect(chevrons[1].classes()).not.toContain('ui-accordion__chevron--open')
+    })
+  })
+})

package/src/components/Accordion/AccordionContent.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { AccordionItemKey } from './keys'
+
+export interface AccordionContentProps {
+  /** Lazy render - use v-if instead of v-show. Better performance but breaks Ctrl+F search. */
+  lazy?: boolean
+}
+
+const props = withDefaults(defineProps<AccordionContentProps>(), {
+  lazy: false
+})
+
+const item = inject(AccordionItemKey)
+
+if (!item) {
+  throw new Error('AccordionContent must be used within AccordionItem')
+}
+
+function onEnter(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = '0'
+  element.style.overflow = 'hidden'
+  element.offsetHeight
+  element.style.height = `${element.scrollHeight}px`
+}
+
+function onAfterEnter(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = 'auto'
+  element.style.overflow = ''
+}
+
+function onLeave(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = `${element.scrollHeight}px`
+  element.style.overflow = 'hidden'
+  element.offsetHeight
+  element.style.height = '0'
+}
+
+function onAfterLeave(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = ''
+  element.style.overflow = ''
+}
+</script>
+
+<template>
+  <!-- Lazy mode: v-if for performance (destroys DOM when closed) -->
+  <Transition
+    v-if="lazy"
+    name="ui-accordion-content"
+    @enter="onEnter"
+    @after-enter="onAfterEnter"
+    @leave="onLeave"
+    @after-leave="onAfterLeave"
+  >
+    <div
+      v-if="item.isOpen.value"
+      :id="item.contentId"
+      class="ui-accordion__content"
+      role="region"
+      :aria-labelledby="item.triggerId"
+    >
+      <div class="ui-accordion__content-inner">
+        <slot />
+      </div>
+    </div>
+  </Transition>
+
+  <!-- Default mode: v-show for searchability (keeps DOM alive) -->
+  <Transition
+    v-else
+    name="ui-accordion-content"
+    @enter="onEnter"
+    @after-enter="onAfterEnter"
+    @leave="onLeave"
+    @after-leave="onAfterLeave"
+  >
+    <div
+      v-show="item.isOpen.value"
+      :id="item.contentId"
+      class="ui-accordion__content"
+      role="region"
+      :aria-labelledby="item.triggerId"
+    >
+      <div class="ui-accordion__content-inner">
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.ui-accordion__content {
+  transition: height var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.ui-accordion__content-inner {
+  padding-bottom: var(--space-4);
+  color: var(--accordion-content, var(--text-secondary));
+  font-size: var(--text-sm);
+  line-height: var(--leading-relaxed);
+}
+
+.ui-accordion-content-enter-active,
+.ui-accordion-content-leave-active {
+  transition: height var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+}
+</style>

package/src/components/Accordion/AccordionItem.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, provide, inject } from 'vue'
+import { useId } from '../../composables'
+import { AccordionKey, AccordionItemKey } from './keys'
+
+export interface AccordionItemProps {
+  /** Unique identifier for this item */
+  value: string
+  /** Disable this item */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<AccordionItemProps>(), {
+  disabled: false
+})
+
+const accordion = inject(AccordionKey)
+
+if (!accordion) {
+  throw new Error('AccordionItem must be used within AccordionRoot')
+}
+
+const triggerId = useId('accordion-trigger')
+const contentId = useId('accordion-content')
+
+const isOpen = computed(() => accordion.openItems.value.has(props.value))
+
+function toggle() {
+  if (props.disabled) return
+  accordion!.toggle(props.value)
+}
+
+provide(AccordionItemKey, {
+  value: props.value,
+  triggerId,
+  contentId,
+  isOpen,
+  disabled: computed(() => props.disabled),
+  toggle
+})
+
+const itemClasses = computed(() => [
+  'ui-accordion__item',
+  `ui-accordion__item--${accordion.variant.value}`,
+  {
+    'ui-accordion__item--disabled': props.disabled,
+    'ui-accordion__item--open': isOpen.value
+  }
+])
+</script>
+
+<template>
+  <div
+    :class="itemClasses"
+    :data-state="isOpen ? 'open' : 'closed'"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-accordion__item {
+  overflow: hidden;
+}
+
+.ui-accordion__item--disabled {
+  opacity: 0.5;
+}
+
+/* Contained variant: dividers between items */
+.ui-accordion__item--contained {
+  border-bottom: 1px solid var(--accordion-border, var(--border-default));
+  padding: 0 var(--space-4);
+}
+
+.ui-accordion__item--contained:last-child {
+  border-bottom: none;
+}
+
+/* Split variant: separate cards */
+.ui-accordion__item--split {
+  border: 1px solid var(--accordion-border, var(--border-default));
+  border-radius: var(--radius-lg);
+  padding: 0 var(--space-4);
+  background: var(--accordion-item-bg, var(--surface-default));
+}
+</style>

package/src/components/Accordion/AccordionRoot.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, provide, toRef, ref, watch } from 'vue'
+import { AccordionKey } from './keys'
+import type { AccordionVariant } from './keys'
+
+export interface AccordionRootProps {
+  /** Currently open item(s) - single value or array for multiple mode */
+  modelValue?: string | string[]
+  /** Allow all items to be collapsed */
+  collapsible?: boolean
+  /** Allow multiple items open simultaneously */
+  multiple?: boolean
+  /** Visual variant */
+  variant?: AccordionVariant
+}
+
+const props = withDefaults(defineProps<AccordionRootProps>(), {
+  collapsible: true,
+  multiple: false,
+  variant: 'contained'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | string[] | undefined]
+}>()
+
+const internalValue = ref<string | string[] | undefined>(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  internalValue.value = newValue
+})
+
+const isControlled = computed(() => props.modelValue !== undefined)
+
+const openItems = computed(() => {
+  const value = isControlled.value ? props.modelValue : internalValue.value
+  if (value === undefined) {
+    return new Set<string>()
+  }
+  if (Array.isArray(value)) {
+    return new Set(value)
+  }
+  return new Set([value])
+})
+
+function toggle(value: string) {
+  const isOpen = openItems.value.has(value)
+  let newValue: string | string[] | undefined
+
+  if (isOpen) {
+    if (!props.collapsible && openItems.value.size === 1) {
+      return
+    }
+
+    if (props.multiple) {
+      const newSet = new Set(openItems.value)
+      newSet.delete(value)
+      newValue = Array.from(newSet)
+    } else {
+      newValue = undefined
+    }
+  } else {
+    if (props.multiple) {
+      const newSet = new Set(openItems.value)
+      newSet.add(value)
+      newValue = Array.from(newSet)
+    } else {
+      newValue = value
+    }
+  }
+
+  internalValue.value = newValue
+  emit('update:modelValue', newValue)
+}
+
+provide(AccordionKey, {
+  openItems,
+  toggle,
+  collapsible: toRef(props, 'collapsible'),
+  multiple: toRef(props, 'multiple'),
+  variant: toRef(props, 'variant')
+})
+</script>
+
+<template>
+  <div
+    class="ui-accordion"
+    :class="[`ui-accordion--${variant}`]"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Contained variant: single border around group */
+.ui-accordion--contained {
+  border: 1px solid var(--accordion-border, var(--border-default));
+  border-radius: var(--radius-lg);
+}
+
+/* Split variant: no outer border, items are separate cards */
+.ui-accordion--split {
+  gap: var(--space-3);
+}
+</style>