@spavn/ui 0.0.1

package/src/lib/sheet/SheetFooter.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-reverse sm:flex-row sm:justify-end sm:space-x-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sheet/SheetHeader.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 space-y-2 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sheet/SheetOverlay.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { DialogOverlay } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <DialogOverlay
+    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/sheet/SheetTitle.vue

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

package/src/lib/sheet/SheetTrigger.vue

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

package/src/lib/sheet/index.ts

@@ -0,0 +1,9 @@
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetOverlay } from './SheetOverlay.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'

package/src/lib/sidebar/Sidebar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { useSidebar } from './useSidebar'
+
+const props = defineProps<{ class?: string }>()
+const { open } = useSidebar()
+</script>
+
+<template>
+  <aside
+    :class="cn(
+      'flex h-full flex-col border-r bg-background transition-all duration-300',
+      open ? 'w-64' : 'w-0 overflow-hidden border-r-0',
+      props.class
+    )"
+  >
+    <slot />
+  </aside>
+</template>

package/src/lib/sidebar/SidebarContent.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('flex-1 overflow-auto py-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sidebar/SidebarFooter.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('border-t p-4', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sidebar/SidebarGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('px-2 py-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sidebar/SidebarGroupLabel.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('px-3 py-1.5 text-xs font-medium text-muted-foreground', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sidebar/SidebarHeader.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('flex h-14 items-center border-b px-4', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sidebar/SidebarInset.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('flex-1 overflow-auto', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sidebar/SidebarMenu.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ul :class="cn('flex flex-col gap-1', props.class)">
+    <slot />
+  </ul>
+</template>

package/src/lib/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+  isActive?: boolean
+}>()
+</script>
+
+<template>
+  <button
+    :class="cn(
+      'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      isActive && 'bg-accent text-accent-foreground',
+      props.class
+    )"
+  >
+    <slot />
+  </button>
+</template>

package/src/lib/sidebar/SidebarMenuItem.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <li :class="props.class">
+    <slot />
+  </li>
+</template>

package/src/lib/sidebar/SidebarProvider.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref, provide } from 'vue'
+import { cn } from '@/lib/utils'
+import { SIDEBAR_KEY } from './context'
+
+const props = withDefaults(defineProps<{
+  class?: string
+  defaultOpen?: boolean
+}>(), {
+  defaultOpen: true,
+})
+
+const open = ref(props.defaultOpen)
+const toggleSidebar = () => { open.value = !open.value }
+
+provide(SIDEBAR_KEY, { open, toggleSidebar })
+</script>
+
+<template>
+  <div :class="cn('flex min-h-screen', props.class)">
+    <slot />
+  </div>
+</template>

package/src/lib/sidebar/SidebarSeparator.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div role="separator" :class="cn('mx-2 my-2 h-px bg-border', props.class)" />
+</template>

package/src/lib/sidebar/SidebarTrigger.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { useSidebar } from './useSidebar'
+
+const props = defineProps<{ class?: string }>()
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-10 w-10',
+      props.class
+    )"
+    @click="toggleSidebar"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <line x1="3" x2="21" y1="6" y2="6" />
+      <line x1="3" x2="21" y1="12" y2="12" />
+      <line x1="3" x2="21" y1="18" y2="18" />
+    </svg>
+    <span class="sr-only">Toggle sidebar</span>
+  </button>
+</template>

package/src/lib/sidebar/context.ts

@@ -0,0 +1,8 @@
+import { type InjectionKey, type Ref } from 'vue'
+
+export interface SidebarContext {
+  open: Ref<boolean>
+  toggleSidebar: () => void
+}
+
+export const SIDEBAR_KEY = Symbol('sidebar') as InjectionKey<SidebarContext>

package/src/lib/sidebar/useSidebar.ts

@@ -0,0 +1,10 @@
+import { inject } from 'vue'
+import { SIDEBAR_KEY, type SidebarContext } from './context'
+
+export function useSidebar(): SidebarContext {
+  const context = inject(SIDEBAR_KEY)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider')
+  }
+  return context
+}

package/src/lib/skeleton/Skeleton.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Skeleton from './Skeleton.vue'
+
+describe('Skeleton', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Skeleton)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('has default animation and background classes', () => {
+    const wrapper = mount(Skeleton)
+    const classes = wrapper.classes().join(' ')
+    expect(classes).toContain('animate-pulse')
+    expect(classes).toContain('bg-muted')
+    expect(classes).toContain('rounded-md')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Skeleton, {
+      props: { class: 'h-12 w-12' },
+    })
+    expect(wrapper.classes()).toContain('h-12')
+    expect(wrapper.classes()).toContain('w-12')
+  })
+
+  it('applies custom class alongside defaults', () => {
+    const wrapper = mount(Skeleton, {
+      props: { class: 'custom-skeleton' },
+    })
+    const classes = wrapper.classes()
+    expect(classes).toContain('custom-skeleton')
+    expect(classes).toContain('animate-pulse')
+  })
+})

package/src/lib/skeleton/Skeleton.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+</template>

package/src/lib/skeleton/index.ts

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

package/src/lib/slider/Slider.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect, beforeAll } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Slider from './Slider.vue'
+
+beforeAll(() => {
+  // Polyfill ResizeObserver for jsdom
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+})
+
+describe('Slider', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Slider)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('accepts modelValue prop', () => {
+    const wrapper = mount(Slider, {
+      props: { modelValue: [50] },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders multiple thumbs for multi-value slider', () => {
+    const wrapper = mount(Slider, {
+      props: { modelValue: [25, 75] },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('passes disabled attribute', () => {
+    const wrapper = mount(Slider, {
+      attrs: { disabled: true },
+      props: { modelValue: [50] },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Slider, {
+      props: { class: 'custom-slider', modelValue: [50] },
+    })
+    expect(wrapper.html()).toContain('custom-slider')
+  })
+
+  it('shows value when showValue is true', () => {
+    const wrapper = mount(Slider, {
+      props: { showValue: true, modelValue: [42] },
+    })
+    expect(wrapper.text()).toContain('42')
+  })
+
+  it('does not show value when showValue is false', () => {
+    const wrapper = mount(Slider, {
+      props: { showValue: false, modelValue: [42] },
+    })
+    const valueDisplay = wrapper.find('.tabular-nums')
+    expect(valueDisplay.exists()).toBe(false)
+  })
+})

package/src/lib/slider/Slider.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  class?: string
+  modelValue?: number[]
+  showValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showValue: false,
+})
+
+const thumbCount = computed(() => (props.modelValue ?? [0]).length)
+</script>
+
+<template>
+  <div class="relative flex items-center gap-3">
+    <SliderRoot
+      v-bind="$attrs"
+      :model-value="props.modelValue"
+      :class="
+        cn(
+          'relative flex w-full touch-none select-none items-center',
+          props.class
+        )
+      "
+    >
+      <SliderTrack
+        class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted shadow-depth-1"
+      >
+        <SliderRange class="absolute h-full bg-primary transition-all duration-150 ease-out" />
+      </SliderTrack>
+      <SliderThumb
+        v-for="(_, i) in thumbCount"
+        :key="i"
+        :class="
+          cn(
+            'block h-5 w-5 rounded-full border-2 border-primary bg-background',
+            'ring-offset-background transition-all duration-150 ease-out',
+            'shadow-depth-2 hover:shadow-depth-3 hover:scale-105',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            'disabled:pointer-events-none disabled:opacity-50'
+          )
+        "
+      />
+    </SliderRoot>
+    
+    <!-- Value Display Slot -->
+    <slot name="value" :value="modelValue">
+      <span
+        v-if="showValue && modelValue"
+        class="text-sm font-medium text-foreground tabular-nums min-w-[3ch] text-right"
+      >
+        {{ modelValue[0] }}
+      </span>
+    </slot>
+  </div>
+</template>

package/src/lib/slider/index.ts

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

package/src/lib/sonner/Toaster.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
+}>()
+
+const positionClasses: Record<string, string> = {
+  'top-left': 'top-0 left-0',
+  'top-right': 'top-0 right-0',
+  'bottom-left': 'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+  'top-center': 'top-0 left-1/2 -translate-x-1/2',
+  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+}
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'fixed z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px]',
+      positionClasses[position || 'bottom-right'],
+      props.class
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/lib/spinner/Spinner.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  size?: 'sm' | 'default' | 'lg'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'default',
+})
+
+const sizeClass = computed(() => {
+  const sizes = {
+    sm: 'h-4 w-4',
+    default: 'h-6 w-6',
+    lg: 'h-8 w-8',
+  } as const
+  return sizes[props.size]
+})
+</script>
+
+<template>
+  <svg
+    :class="cn('animate-spin text-muted-foreground', sizeClass, props.class)"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+  </svg>
+</template>

package/src/lib/spinner/index.ts

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