@spavn/ui 0.0.1

package/src/lib/accordion/Accordion.test.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Accordion from './Accordion.vue'
+import AccordionItem from './AccordionItem.vue'
+import AccordionTrigger from './AccordionTrigger.vue'
+import AccordionContent from './AccordionContent.vue'
+
+describe('Accordion', () => {
+  it('renders correctly with type single', () => {
+    const wrapper = mount(Accordion, {
+      props: { type: 'single' },
+      slots: { default: '<div>Accordion content</div>' },
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Accordion content')
+  })
+
+  it('renders correctly with type multiple', () => {
+    const wrapper = mount(Accordion, {
+      props: { type: 'multiple' },
+      slots: { default: '<div>Multiple content</div>' },
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Multiple content')
+  })
+
+  it('renders with AccordionItem children', () => {
+    const wrapper = mount(Accordion, {
+      props: { type: 'single', collapsible: true },
+      slots: {
+        default: {
+          template: `
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Trigger 1</AccordionTrigger>
+              <AccordionContent>Content 1</AccordionContent>
+            </AccordionItem>
+          `,
+          components: { AccordionItem, AccordionTrigger, AccordionContent },
+        },
+      },
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Trigger 1')
+  })
+})
+
+describe('AccordionItem', () => {
+  it('renders correctly inside Accordion', () => {
+    const wrapper = mount(Accordion, {
+      props: { type: 'single', collapsible: true },
+      slots: {
+        default: {
+          template: '<AccordionItem value="item-1"><span>Item</span></AccordionItem>',
+          components: { AccordionItem },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Item')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Accordion, {
+      props: { type: 'single', collapsible: true },
+      slots: {
+        default: {
+          template: '<AccordionItem value="item-1" class="custom-item"><span>Item</span></AccordionItem>',
+          components: { AccordionItem },
+        },
+      },
+    })
+    expect(wrapper.html()).toContain('custom-item')
+  })
+})
+
+describe('AccordionTrigger', () => {
+  it('renders trigger text', () => {
+    const wrapper = mount(Accordion, {
+      props: { type: 'single', collapsible: true },
+      slots: {
+        default: {
+          template: `
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Click me</AccordionTrigger>
+            </AccordionItem>
+          `,
+          components: { AccordionItem, AccordionTrigger },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Click me')
+  })
+
+  it('contains a chevron svg icon', () => {
+    const wrapper = mount(Accordion, {
+      props: { type: 'single', collapsible: true },
+      slots: {
+        default: {
+          template: `
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Toggle</AccordionTrigger>
+            </AccordionItem>
+          `,
+          components: { AccordionItem, AccordionTrigger },
+        },
+      },
+    })
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+})

package/src/lib/accordion/Accordion.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { AccordionRoot } from 'radix-vue'
+</script>
+
+<template>
+  <AccordionRoot v-bind="$attrs">
+    <slot />
+  </AccordionRoot>
+</template>

package/src/lib/accordion/AccordionContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AccordionContent } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="$attrs"
+    :class="
+      cn(
+        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        props.class
+      )
+    "
+  >
+    <div class="pb-4 pt-0">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/lib/accordion/AccordionItem.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AccordionItem } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="$attrs"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>

package/src/lib/accordion/AccordionTrigger.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AccordionHeader, AccordionTrigger } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="$attrs"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class
+        )
+      "
+    >
+      <slot />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="h-4 w-4 shrink-0 transition-transform duration-200"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/lib/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
+export { default as AccordionContent } from './AccordionContent.vue'

package/src/lib/alert/Alert.test.ts

@@ -0,0 +1,144 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import Alert from './Alert.vue'
+import AlertTitle from './AlertTitle.vue'
+import AlertDescription from './AlertDescription.vue'
+
+describe('Alert', () => {
+  it('renders with default variant', () => {
+    const wrapper = mount(Alert, {
+      slots: { default: 'Alert content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Alert content')
+  })
+
+  it('has role="alert" attribute', () => {
+    const wrapper = mount(Alert, {
+      slots: { default: 'Alert' },
+    })
+    expect(wrapper.attributes('role')).toBe('alert')
+  })
+
+  it('applies default variant classes', () => {
+    const wrapper = mount(Alert, {
+      slots: { default: 'Default alert' },
+    })
+    expect(wrapper.classes()).toContain('bg-background')
+    expect(wrapper.classes()).toContain('text-foreground')
+  })
+
+  it('applies destructive variant classes', () => {
+    const wrapper = mount(Alert, {
+      props: { variant: 'destructive' },
+      slots: { default: 'Error alert' },
+    })
+    const html = wrapper.html()
+    expect(html).toContain('border-destructive/50')
+    expect(html).toContain('text-destructive')
+  })
+
+  it('applies custom class alongside variant classes', () => {
+    const wrapper = mount(Alert, {
+      props: { class: 'custom-alert' },
+      slots: { default: 'Styled alert' },
+    })
+    expect(wrapper.classes()).toContain('custom-alert')
+    // Should also have base classes
+    expect(wrapper.classes()).toContain('relative')
+    expect(wrapper.classes()).toContain('w-full')
+  })
+
+  it('applies base classes for all variants', () => {
+    const wrapper = mount(Alert, {
+      slots: { default: 'Base classes' },
+    })
+    expect(wrapper.classes()).toContain('relative')
+    expect(wrapper.classes()).toContain('w-full')
+    expect(wrapper.classes()).toContain('rounded-lg')
+    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain('p-4')
+  })
+})
+
+describe('AlertTitle', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(AlertTitle, {
+      slots: { default: 'Warning Title' },
+    })
+    expect(wrapper.text()).toBe('Warning Title')
+  })
+
+  it('renders as an h5 element', () => {
+    const wrapper = mount(AlertTitle, {
+      slots: { default: 'Title' },
+    })
+    expect(wrapper.element.tagName).toBe('H5')
+  })
+
+  it('has correct base classes', () => {
+    const wrapper = mount(AlertTitle, {
+      slots: { default: 'Title' },
+    })
+    expect(wrapper.classes()).toContain('mb-1')
+    expect(wrapper.classes()).toContain('font-medium')
+    expect(wrapper.classes()).toContain('leading-none')
+    expect(wrapper.classes()).toContain('tracking-tight')
+  })
+
+  it('accepts custom class prop', () => {
+    const wrapper = mount(AlertTitle, {
+      props: { class: 'custom-title' },
+      slots: { default: 'Title' },
+    })
+    expect(wrapper.classes()).toContain('custom-title')
+  })
+})
+
+describe('AlertDescription', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(AlertDescription, {
+      slots: { default: 'This is a description' },
+    })
+    expect(wrapper.text()).toBe('This is a description')
+  })
+
+  it('renders as a div element', () => {
+    const wrapper = mount(AlertDescription, {
+      slots: { default: 'Description' },
+    })
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('has correct base classes', () => {
+    const wrapper = mount(AlertDescription, {
+      slots: { default: 'Description' },
+    })
+    expect(wrapper.classes()).toContain('text-sm')
+  })
+
+  it('accepts custom class prop', () => {
+    const wrapper = mount(AlertDescription, {
+      props: { class: 'custom-desc' },
+      slots: { default: 'Description' },
+    })
+    expect(wrapper.classes()).toContain('custom-desc')
+  })
+})
+
+describe('Alert composition', () => {
+  it('renders Alert with AlertTitle and AlertDescription', () => {
+    const wrapper = mount(Alert, {
+      slots: {
+        default: () => [
+          h(AlertTitle, null, { default: () => 'Heads up!' }),
+          h(AlertDescription, null, { default: () => 'You can add components.' }),
+        ],
+      },
+    })
+    expect(wrapper.text()).toContain('Heads up!')
+    expect(wrapper.text()).toContain('You can add components.')
+    expect(wrapper.find('h5').exists()).toBe(true)
+  })
+})

package/src/lib/alert/Alert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { alertVariants, type AlertVariants } from './variants'
+
+interface Props {
+  variant?: AlertVariants['variant']
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div role="alert" :class="cn(alertVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/alert/AlertDescription.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/alert/AlertTitle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

package/src/lib/alert/variants.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { alertVariants } from './variants'
+
+describe('alertVariants', () => {
+  describe('defaults', () => {
+    it('returns expected classes with no arguments (default variant)', () => {
+      const result = alertVariants()
+      expect(result).toContain('relative')
+      expect(result).toContain('w-full')
+      expect(result).toContain('rounded-lg')
+      expect(result).toContain('border')
+      expect(result).toContain('p-4')
+      expect(result).toContain('bg-background')
+      expect(result).toContain('text-foreground')
+      expect(result).toContain('shadow-depth-1')
+    })
+  })
+
+  describe('variant', () => {
+    it('default variant includes background and foreground styles', () => {
+      const result = alertVariants({ variant: 'default' })
+      expect(result).toContain('bg-background')
+      expect(result).toContain('text-foreground')
+      expect(result).toContain('shadow-depth-1')
+    })
+
+    it('destructive variant includes destructive border and text', () => {
+      const result = alertVariants({ variant: 'destructive' })
+      expect(result).toContain('border-destructive/50')
+      expect(result).toContain('text-destructive')
+      expect(result).toContain('[&>svg]:text-destructive')
+      expect(result).toContain('shadow-depth-1')
+    })
+
+    it('all variants include base classes', () => {
+      const variants = ['default', 'destructive'] as const
+      for (const variant of variants) {
+        const result = alertVariants({ variant })
+        expect(result).toContain('relative')
+        expect(result).toContain('w-full')
+        expect(result).toContain('rounded-lg')
+        expect(result).toContain('border')
+        expect(result).toContain('p-4')
+      }
+    })
+  })
+})

package/src/lib/alert/variants.ts

@@ -0,0 +1,19 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground shadow-depth-1',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive shadow-depth-1',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

package/src/lib/alert-dialog/AlertDialog.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { AlertDialogRoot } from 'radix-vue'
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="$attrs">
+    <slot />
+  </AlertDialogRoot>
+</template>

package/src/lib/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AlertDialogAction } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AlertDialogAction
+    v-bind="$attrs"
+    :class="
+      cn(
+        'inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors',
+        'hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:pointer-events-none disabled:opacity-50',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </AlertDialogAction>
+</template>

package/src/lib/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AlertDialogCancel } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="$attrs"
+    :class="
+      cn(
+        'inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium ring-offset-background transition-colors',
+        'hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'mt-2 sm:mt-0',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>

package/src/lib/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AlertDialogContent } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import AlertDialogOverlay from './AlertDialogOverlay.vue'
+import AlertDialogPortal from './AlertDialogPortal.vue'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogContent
+      v-bind="$attrs"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4',
+          'border bg-background p-6 shadow-depth-5 duration-200',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+          'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+          'sm:rounded-lg',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

package/src/lib/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AlertDialogDescription } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="$attrs"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

package/src/lib/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/alert-dialog/AlertDialogOverlay.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AlertDialogOverlay } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AlertDialogOverlay
+    v-bind="$attrs"
+    :class="
+      cn(
+        'fixed inset-0 z-50 bg-black/80',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        props.class
+      )
+    "
+  />
+</template>

package/src/lib/alert-dialog/AlertDialogPortal.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+import { AlertDialogPortal } from 'radix-vue'
+</script>
+
+<template>
+  <AlertDialogPortal v-bind="$attrs">
+    <slot />
+  </AlertDialogPortal>
+</template>

package/src/lib/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { AlertDialogTitle } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="$attrs"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>