@spavn/ui 0.0.1

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

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

package/src/lib/alert-dialog/index.ts

@@ -0,0 +1,11 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogPortal } from './AlertDialogPortal.vue'
+export { default as AlertDialogOverlay } from './AlertDialogOverlay.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'

package/src/lib/aspect-ratio/AspectRatio.vue

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

package/src/lib/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'

package/src/lib/avatar/Avatar.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Avatar from './Avatar.vue'
+import AvatarFallback from './AvatarFallback.vue'
+
+describe('Avatar', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Avatar)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(Avatar, {
+      slots: { default: '<span>AB</span>' },
+    })
+    expect(wrapper.text()).toContain('AB')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Avatar, {
+      props: { class: 'avatar-custom' },
+    })
+    expect(wrapper.classes()).toContain('avatar-custom')
+  })
+
+  it('has default size classes', () => {
+    const wrapper = mount(Avatar)
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('h-10')
+    expect(classes).toContain('w-10')
+  })
+})
+
+describe('AvatarFallback', () => {
+  it('renders correctly inside Avatar', () => {
+    const wrapper = mount(Avatar, {
+      slots: {
+        default: {
+          template: '<AvatarFallback>JD</AvatarFallback>',
+          components: { AvatarFallback },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('JD')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Avatar, {
+      slots: {
+        default: {
+          template: '<AvatarFallback class="fb-custom">X</AvatarFallback>',
+          components: { AvatarFallback },
+        },
+      },
+    })
+    expect(wrapper.html()).toContain('fb-custom')
+  })
+})

package/src/lib/avatar/Avatar.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { AvatarRoot, type AvatarRootProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AvatarRootProps & { class?: string }>()
+</script>
+
+<template>
+  <AvatarRoot
+    v-bind="props"
+    :class="
+      cn(
+        'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full shadow-depth-1',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </AvatarRoot>
+</template>

package/src/lib/avatar/AvatarFallback.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AvatarFallbackProps & { class?: string }>()
+</script>
+
+<template>
+  <AvatarFallback
+    v-bind="props"
+    :class="
+      cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </AvatarFallback>
+</template>

package/src/lib/avatar/AvatarImage.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AvatarImageProps & { class?: string }>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" :class="cn('aspect-square h-full w-full', props.class)" />
+</template>

package/src/lib/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'

package/src/lib/badge/Badge.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Badge from './Badge.vue'
+
+describe('Badge', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Badge)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(Badge, {
+      slots: { default: 'New' },
+    })
+    expect(wrapper.text()).toContain('New')
+  })
+
+  it('applies default variant classes', () => {
+    const wrapper = mount(Badge)
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('bg-primary')
+  })
+
+  it('applies destructive variant classes', () => {
+    const wrapper = mount(Badge, {
+      props: { variant: 'destructive' },
+    })
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('bg-destructive')
+  })
+
+  it('applies secondary variant classes', () => {
+    const wrapper = mount(Badge, {
+      props: { variant: 'secondary' },
+    })
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('bg-secondary')
+  })
+
+  it('applies outline variant classes', () => {
+    const wrapper = mount(Badge, {
+      props: { variant: 'outline' },
+    })
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('text-foreground')
+  })
+
+  it('applies default size classes', () => {
+    const wrapper = mount(Badge)
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('text-xs')
+  })
+
+  it('applies sm size classes', () => {
+    const wrapper = mount(Badge, {
+      props: { size: 'sm' },
+    })
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('text-[10px]')
+  })
+
+  it('applies lg size classes', () => {
+    const wrapper = mount(Badge, {
+      props: { size: 'lg' },
+    })
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('text-sm')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Badge, {
+      props: { class: 'my-badge' },
+    })
+    expect(wrapper.classes()).toContain('my-badge')
+  })
+})

package/src/lib/badge/Badge.vue

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

package/src/lib/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.vue'
+export { badgeVariants, type BadgeVariants } from './variants'

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

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import { badgeVariants } from './variants'
+
+describe('badgeVariants', () => {
+  describe('defaults', () => {
+    it('returns expected classes with no arguments (default variant and size)', () => {
+      const result = badgeVariants()
+      expect(result).toContain('inline-flex')
+      expect(result).toContain('items-center')
+      expect(result).toContain('rounded-full')
+      expect(result).toContain('bg-primary')
+      expect(result).toContain('text-primary-foreground')
+      expect(result).toContain('px-2.5')
+      expect(result).toContain('py-0.5')
+      expect(result).toContain('text-xs')
+    })
+  })
+
+  describe('variant', () => {
+    it('default variant includes primary background and shadow', () => {
+      const result = badgeVariants({ variant: 'default' })
+      expect(result).toContain('bg-primary')
+      expect(result).toContain('text-primary-foreground')
+      expect(result).toContain('shadow-depth-1')
+      expect(result).toContain('border-transparent')
+    })
+
+    it('secondary variant includes secondary background', () => {
+      const result = badgeVariants({ variant: 'secondary' })
+      expect(result).toContain('bg-secondary')
+      expect(result).toContain('text-secondary-foreground')
+      expect(result).toContain('border-transparent')
+    })
+
+    it('destructive variant includes destructive background and shadow', () => {
+      const result = badgeVariants({ variant: 'destructive' })
+      expect(result).toContain('bg-destructive')
+      expect(result).toContain('text-destructive-foreground')
+      expect(result).toContain('shadow-depth-1')
+    })
+
+    it('outline variant includes foreground text only', () => {
+      const result = badgeVariants({ variant: 'outline' })
+      expect(result).toContain('text-foreground')
+      expect(result).not.toContain('bg-primary')
+      expect(result).not.toContain('bg-secondary')
+      expect(result).not.toContain('bg-destructive')
+    })
+  })
+
+  describe('size', () => {
+    it('sm size applies smaller padding and text', () => {
+      const result = badgeVariants({ size: 'sm' })
+      expect(result).toContain('px-2')
+      expect(result).toContain('py-0')
+      expect(result).toContain('text-[10px]')
+    })
+
+    it('default size applies standard padding and text', () => {
+      const result = badgeVariants({ size: 'default' })
+      expect(result).toContain('px-2.5')
+      expect(result).toContain('py-0.5')
+      expect(result).toContain('text-xs')
+    })
+
+    it('lg size applies larger padding and text', () => {
+      const result = badgeVariants({ size: 'lg' })
+      expect(result).toContain('px-3')
+      expect(result).toContain('py-1')
+      expect(result).toContain('text-sm')
+    })
+  })
+})

package/src/lib/badge/variants.ts

@@ -0,0 +1,26 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow-depth-1',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow-depth-1',
+        outline: 'text-foreground',
+      },
+      size: {
+        sm: 'px-2 py-0 text-[10px]',
+        default: 'px-2.5 py-0.5 text-xs',
+        lg: 'px-3 py-1 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

package/src/lib/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>

package/src/lib/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <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"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+    <span class="sr-only">More</span>
+  </span>
+</template>

package/src/lib/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <li :class="cn('inline-flex items-center gap-1.5', props.class)">
+    <slot />
+  </li>
+</template>

package/src/lib/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  href?: string
+  asChild?: boolean
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <component
+    :is="asChild ? 'slot' : 'a'"
+    :href="asChild ? undefined : href"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </component>
+</template>

package/src/lib/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <ol
+    :class="
+      cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ol>
+</template>

package/src/lib/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>

package/src/lib/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', 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"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </slot>
+  </li>
+</template>

package/src/lib/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'

package/src/lib/button/Button.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Button from './Button.vue'
+
+describe('Button', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Button)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('BUTTON')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(Button, {
+      slots: { default: 'Click me' },
+    })
+    expect(wrapper.text()).toContain('Click me')
+  })
+
+  it('applies variant prop classes', () => {
+    const wrapper = mount(Button, {
+      props: { variant: 'destructive' },
+    })
+    expect(wrapper.classes().join(' ')).toContain('bg-destructive')
+  })
+
+  it('applies default variant when no variant specified', () => {
+    const wrapper = mount(Button)
+    expect(wrapper.classes().join(' ')).toContain('bg-primary')
+  })
+
+  it('applies size prop classes', () => {
+    const wrapper = mount(Button, {
+      props: { size: 'sm' },
+    })
+    expect(wrapper.classes().join(' ')).toContain('h-9')
+  })
+
+  it('applies lg size prop classes', () => {
+    const wrapper = mount(Button, {
+      props: { size: 'lg' },
+    })
+    expect(wrapper.classes().join(' ')).toContain('h-11')
+  })
+
+  it('is disabled when disabled prop is true', () => {
+    const wrapper = mount(Button, {
+      props: { disabled: true },
+    })
+    expect(wrapper.attributes('disabled')).toBeDefined()
+  })
+
+  it('is disabled when loading prop is true', () => {
+    const wrapper = mount(Button, {
+      props: { loading: true },
+    })
+    expect(wrapper.attributes('disabled')).toBeDefined()
+  })
+
+  it('emits click event when clicked', async () => {
+    const wrapper = mount(Button)
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('sets type attribute correctly', () => {
+    const wrapper = mount(Button, {
+      props: { type: 'submit' },
+    })
+    expect(wrapper.attributes('type')).toBe('submit')
+  })
+
+  it('defaults type to button', () => {
+    const wrapper = mount(Button)
+    expect(wrapper.attributes('type')).toBe('button')
+  })
+
+  it('shows loading spinner when loading', () => {
+    const wrapper = mount(Button, {
+      props: { loading: true },
+      slots: { default: 'Submit' },
+    })
+    expect(wrapper.find('svg.animate-spin').exists()).toBe(true)
+  })
+})