@spavn/ui 0.0.1

package/src/lib/card/Card.test.ts

@@ -0,0 +1,202 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Card from './Card.vue'
+import CardHeader from './CardHeader.vue'
+import CardTitle from './CardTitle.vue'
+import CardDescription from './CardDescription.vue'
+import CardContent from './CardContent.vue'
+import CardFooter from './CardFooter.vue'
+
+describe('Card', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Card)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(Card, {
+      slots: { default: '<p>Card body</p>' },
+    })
+    expect(wrapper.text()).toContain('Card body')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Card, {
+      props: { class: 'my-custom-class' },
+    })
+    expect(wrapper.classes()).toContain('my-custom-class')
+  })
+
+  it('applies default elevation class', () => {
+    const wrapper = mount(Card)
+    expect(wrapper.classes().join(' ')).toContain('shadow-depth-1')
+  })
+
+  it('applies elevation 0 class', () => {
+    const wrapper = mount(Card, {
+      props: { elevation: 0 },
+    })
+    expect(wrapper.classes().join(' ')).toContain('shadow-none')
+  })
+
+  it('applies elevation 2 class', () => {
+    const wrapper = mount(Card, {
+      props: { elevation: 2 },
+    })
+    expect(wrapper.classes().join(' ')).toContain('shadow-depth-2')
+  })
+
+  it('applies elevation 3 class', () => {
+    const wrapper = mount(Card, {
+      props: { elevation: 3 },
+    })
+    expect(wrapper.classes().join(' ')).toContain('shadow-depth-3')
+  })
+
+  it('applies interactive classes when interactive is true', () => {
+    const wrapper = mount(Card, {
+      props: { interactive: true },
+    })
+    expect(wrapper.classes().join(' ')).toContain('cursor-pointer')
+  })
+
+  it('does not apply interactive classes by default', () => {
+    const wrapper = mount(Card)
+    expect(wrapper.classes().join(' ')).not.toContain('cursor-pointer')
+  })
+})
+
+describe('CardHeader', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(CardHeader)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(CardHeader, {
+      slots: { default: '<span>Header content</span>' },
+    })
+    expect(wrapper.text()).toContain('Header content')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(CardHeader, {
+      props: { class: 'extra-header' },
+    })
+    expect(wrapper.classes()).toContain('extra-header')
+  })
+})
+
+describe('CardTitle', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(CardTitle)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(CardTitle, {
+      slots: { default: 'My Title' },
+    })
+    expect(wrapper.text()).toContain('My Title')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(CardTitle, {
+      props: { class: 'title-class' },
+    })
+    expect(wrapper.classes()).toContain('title-class')
+  })
+})
+
+describe('CardDescription', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(CardDescription)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(CardDescription, {
+      slots: { default: 'A description' },
+    })
+    expect(wrapper.text()).toContain('A description')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(CardDescription, {
+      props: { class: 'desc-class' },
+    })
+    expect(wrapper.classes()).toContain('desc-class')
+  })
+})
+
+describe('CardContent', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(CardContent)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(CardContent, {
+      slots: { default: '<p>Content here</p>' },
+    })
+    expect(wrapper.text()).toContain('Content here')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(CardContent, {
+      props: { class: 'content-class' },
+    })
+    expect(wrapper.classes()).toContain('content-class')
+  })
+})
+
+describe('CardFooter', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(CardFooter)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(CardFooter, {
+      slots: { default: '<button>Save</button>' },
+    })
+    expect(wrapper.text()).toContain('Save')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(CardFooter, {
+      props: { class: 'footer-class' },
+    })
+    expect(wrapper.classes()).toContain('footer-class')
+  })
+})
+
+describe('Card composed', () => {
+  it('renders a full card with all sub-components', () => {
+    const wrapper = mount(Card, {
+      slots: {
+        default: {
+          template: `
+            <CardHeader>
+              <CardTitle>Title</CardTitle>
+              <CardDescription>Description</CardDescription>
+            </CardHeader>
+            <CardContent>Body</CardContent>
+            <CardFooter>Footer</CardFooter>
+          `,
+          components: { CardHeader, CardTitle, CardDescription, CardContent, CardFooter },
+        },
+      },
+    })
+    expect(wrapper.text()).toContain('Title')
+    expect(wrapper.text()).toContain('Description')
+    expect(wrapper.text()).toContain('Body')
+    expect(wrapper.text()).toContain('Footer')
+  })
+})

package/src/lib/card/Card.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  elevation?: 0 | 1 | 2 | 3
+  interactive?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  elevation: 1,
+  interactive: false,
+})
+
+const elevationClasses = {
+  0: 'shadow-none',
+  1: 'shadow-depth-1',
+  2: 'shadow-depth-2',
+  3: 'shadow-depth-3',
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground',
+        elevationClasses[elevation],
+        interactive && 'transition-elevation hover:shadow-depth-2 cursor-pointer',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/card/CardContent.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('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/card/CardDescription.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 text-muted-foreground', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/card/CardFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import Button from '../button/Button.vue'
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0 gap-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/card/CardHeader.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('flex flex-col gap-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/card/CardTitle.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-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'

package/src/lib/carousel/Carousel.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue'
+import { cn } from '@/lib/utils'
+import { useProvideCarousel, type CarouselApi } from './useCarousel'
+
+const props = withDefaults(
+  defineProps<{
+    orientation?: 'horizontal' | 'vertical'
+    class?: string
+  }>(),
+  {
+    orientation: 'horizontal',
+  }
+)
+
+const containerRef = ref<HTMLElement>()
+const canScrollPrev = ref(false)
+const canScrollNext = ref(true)
+
+function updateScrollState() {
+  const el = containerRef.value
+  if (!el) return
+
+  if (props.orientation === 'horizontal') {
+    canScrollPrev.value = el.scrollLeft > 0
+    canScrollNext.value = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
+  } else {
+    canScrollPrev.value = el.scrollTop > 0
+    canScrollNext.value = el.scrollTop < el.scrollHeight - el.clientHeight - 1
+  }
+}
+
+function scrollPrev() {
+  const el = containerRef.value
+  if (!el) return
+
+  if (props.orientation === 'horizontal') {
+    el.scrollBy({ left: -el.clientWidth, behavior: 'smooth' })
+  } else {
+    el.scrollBy({ top: -el.clientHeight, behavior: 'smooth' })
+  }
+  setTimeout(updateScrollState, 350)
+}
+
+function scrollNext() {
+  const el = containerRef.value
+  if (!el) return
+
+  if (props.orientation === 'horizontal') {
+    el.scrollBy({ left: el.clientWidth, behavior: 'smooth' })
+  } else {
+    el.scrollBy({ top: el.clientHeight, behavior: 'smooth' })
+  }
+  setTimeout(updateScrollState, 350)
+}
+
+const api: CarouselApi = {
+  canScrollPrev,
+  canScrollNext,
+  scrollPrev,
+  scrollNext,
+  orientation: toRef(props, 'orientation'),
+  containerRef,
+}
+
+useProvideCarousel(api)
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)" role="region" aria-roledescription="carousel">
+    <slot />
+  </div>
+</template>

package/src/lib/carousel/CarouselContent.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<{ class?: string }>()
+
+const { orientation, containerRef } = useCarousel()
+
+function onScroll() {
+  const { canScrollPrev, canScrollNext } = useCarousel()
+  const el = containerRef.value
+  if (!el) return
+
+  if (orientation.value === 'horizontal') {
+    canScrollPrev.value = el.scrollLeft > 0
+    canScrollNext.value = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
+  } else {
+    canScrollPrev.value = el.scrollTop > 0
+    canScrollNext.value = el.scrollTop < el.scrollHeight - el.clientHeight - 1
+  }
+}
+
+onMounted(() => {
+  containerRef.value?.addEventListener('scroll', onScroll, { passive: true })
+  onScroll()
+})
+
+onUnmounted(() => {
+  containerRef.value?.removeEventListener('scroll', onScroll)
+})
+</script>
+
+<template>
+  <div class="overflow-hidden">
+    <div
+      :ref="(el: any) => { containerRef = el }"
+      :class="
+        cn(
+          'flex',
+          orientation === 'vertical' && '-mt-4 flex-col',
+          orientation !== 'vertical' && '-ml-4',
+          props.class
+        )
+      "
+      :style="{
+        scrollSnapType: orientation === 'vertical' ? 'y mandatory' : 'x mandatory',
+        overflow: 'auto',
+        scrollbarWidth: 'none',
+      }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/src/lib/carousel/CarouselItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<{ class?: string }>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="
+      cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'vertical' ? 'pt-4' : 'pl-4',
+        props.class
+      )
+    "
+    style="scroll-snap-align: start"
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/carousel/CarouselNext.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<{ class?: string }>()
+
+const { orientation, scrollNext, canScrollNext } = useCarousel()
+</script>
+
+<template>
+  <button
+    :disabled="!canScrollNext"
+    :class="
+      cn(
+        'absolute h-8 w-8 rounded-full inline-flex items-center justify-center border bg-background shadow-depth-1 hover:shadow-depth-2 transition-elevation disabled:opacity-50',
+        orientation === 'vertical'
+          ? '-bottom-12 left-1/2 -translate-x-1/2 rotate-90'
+          : '-right-12 top-1/2 -translate-y-1/2',
+        props.class
+      )
+    "
+    @click="scrollNext"
+  >
+    <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>
+    <span class="sr-only">Next slide</span>
+  </button>
+</template>

package/src/lib/carousel/CarouselPrevious.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<{ class?: string }>()
+
+const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+</script>
+
+<template>
+  <button
+    :disabled="!canScrollPrev"
+    :class="
+      cn(
+        'absolute h-8 w-8 rounded-full inline-flex items-center justify-center border bg-background shadow-depth-1 hover:shadow-depth-2 transition-elevation disabled:opacity-50',
+        orientation === 'vertical'
+          ? '-top-12 left-1/2 -translate-x-1/2 rotate-90'
+          : '-left-12 top-1/2 -translate-y-1/2',
+        props.class
+      )
+    "
+    @click="scrollPrev"
+  >
+    <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="m15 18-6-6 6-6" />
+    </svg>
+    <span class="sr-only">Previous slide</span>
+  </button>
+</template>

package/src/lib/carousel/index.ts

@@ -0,0 +1,6 @@
+export { default as Carousel } from './Carousel.vue'
+export { default as CarouselContent } from './CarouselContent.vue'
+export { default as CarouselItem } from './CarouselItem.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
+export { default as CarouselNext } from './CarouselNext.vue'
+export { useCarousel } from './useCarousel'

package/src/lib/carousel/useCarousel.ts

@@ -0,0 +1,24 @@
+import { type InjectionKey, type Ref, inject, provide } from 'vue'
+
+export interface CarouselApi {
+  canScrollPrev: Ref<boolean>
+  canScrollNext: Ref<boolean>
+  scrollPrev: () => void
+  scrollNext: () => void
+  orientation: Ref<'horizontal' | 'vertical'>
+  containerRef: Ref<HTMLElement | undefined>
+}
+
+export const CAROUSEL_KEY: InjectionKey<CarouselApi> = Symbol('carousel')
+
+export function useCarousel() {
+  const context = inject(CAROUSEL_KEY)
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel /> component')
+  }
+  return context
+}
+
+export function useProvideCarousel(api: CarouselApi) {
+  provide(CAROUSEL_KEY, api)
+}

package/src/lib/checkbox/Checkbox.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Checkbox from './Checkbox.vue'
+
+describe('Checkbox', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Checkbox)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('passes checked prop to radix CheckboxRoot', () => {
+    const wrapper = mount(Checkbox, {
+      attrs: { checked: true },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('passes disabled attribute', () => {
+    const wrapper = mount(Checkbox, {
+      attrs: { disabled: true },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('has correct data-state when checked', () => {
+    const wrapper = mount(Checkbox, {
+      attrs: { checked: true },
+    })
+    expect(wrapper.html()).toContain('data-state="checked"')
+  })
+
+  it('has correct data-state when unchecked', () => {
+    const wrapper = mount(Checkbox, {
+      attrs: { checked: false },
+    })
+    expect(wrapper.html()).toContain('data-state="unchecked"')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Checkbox, {
+      props: { class: 'custom-class' },
+    })
+    expect(wrapper.html()).toContain('custom-class')
+  })
+})

package/src/lib/checkbox/Checkbox.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  CheckboxIndicator,
+  CheckboxRoot,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="$attrs"
+    :class="
+      cn(
+        'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow-depth-1 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        props.class
+      )
+    "
+  >
+    <CheckboxIndicator class="flex items-center justify-center text-current">
+      <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="M20 6 9 17l-5-5" />
+      </svg>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>