@spavn/ui 0.0.1

package/src/lib/toast/Toast.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits, type ToastRootProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastRootProps & { class?: string }>()
+const emits = defineEmits<ToastRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ToastRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'spavn-toast group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-8 shadow-depth-4',
+        'data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]',
+        'data-[swipe=cancel]:translate-x-0',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ToastRoot>
+</template>
+
+<style>
+.spavn-toast[data-state="open"] {
+  animation: spavn-toast-in 200ms ease-out;
+}
+.spavn-toast[data-state="closed"] {
+  animation: spavn-toast-out 150ms ease-in forwards;
+}
+
+@keyframes spavn-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spavn-toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+</style>

package/src/lib/toast/ToastAction.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ToastAction, type ToastActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastActionProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastAction
+    v-bind="props"
+    :class="
+      cn(
+        'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        'group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30',
+        'group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',
+        'group-[.destructive]:focus:ring-destructive',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ToastAction>
+</template>

package/src/lib/toast/ToastClose.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ToastClose, type ToastCloseProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastCloseProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastClose
+    v-bind="props"
+    aria-label="Close"
+    :class="
+      cn(
+        'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100',
+        'group-[.destructive]:text-destructive-foreground group-[.destructive]:hover:text-destructive-foreground',
+        'group-[.destructive]:focus:ring-destructive group-[.destructive]:focus:ring-offset-destructive',
+        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"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  </ToastClose>
+</template>

package/src/lib/toast/ToastDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastDescriptionProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastDescription v-bind="props" :class="cn('text-sm opacity-90', props.class)">
+    <slot />
+  </ToastDescription>
+</template>

package/src/lib/toast/ToastProvider.ts

@@ -0,0 +1,65 @@
+import { ref, computed } from 'vue'
+import type { ToastProviderProps } from 'radix-vue'
+
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
+
+export interface Toast {
+  id: string
+  title?: string
+  description?: string
+  type?: ToastType
+  duration?: number
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+const toasts = ref<Toast[]>([])
+
+let toastIdCounter = 0
+
+function generateId(): string {
+  return `toast-${++toastIdCounter}-${Date.now()}`
+}
+
+function addToast(toast: Omit<Toast, 'id'>): string {
+  const id = generateId()
+  const newToast: Toast = {
+    id,
+    duration: 5000,
+    ...toast,
+  }
+  toasts.value = [...toasts.value, newToast]
+  return id
+}
+
+function dismissToast(id: string) {
+  toasts.value = toasts.value.filter(t => t.id !== id)
+}
+
+function dismissAll() {
+  toasts.value = []
+}
+
+// Export the composable
+export function useToast() {
+  return {
+    toasts: computed(() => toasts.value),
+    toast: addToast,
+    success: (title: string, description?: string, duration?: number) =>
+      addToast({ title, description, type: 'success', duration }),
+    error: (title: string, description?: string, duration?: number) =>
+      addToast({ title, description, type: 'error', duration }),
+    warning: (title: string, description?: string, duration?: number) =>
+      addToast({ title, description, type: 'warning', duration }),
+    info: (title: string, description?: string, duration?: number) =>
+      addToast({ title, description, type: 'info', duration }),
+    dismiss: dismissToast,
+    dismissAll,
+  }
+}
+
+// For backward compatibility with radix-vue
+export { ToastProvider } from 'radix-vue'
+export type { ToastProviderProps }

package/src/lib/toast/ToastTitle.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ToastTitle, type ToastTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastTitleProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastTitle v-bind="props" :class="cn('text-sm font-semibold', props.class)">
+    <slot />
+  </ToastTitle>
+</template>

package/src/lib/toast/ToastViewport.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ToastViewport, type ToastViewportProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ToastViewportProps & { class?: string }>()
+</script>
+
+<template>
+  <ToastViewport
+    v-bind="props"
+    :class="
+      cn(
+        'fixed bottom-0 right-0 z-[99999] flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-[420px]',
+        props.class
+      )
+    "
+  />
+</template>

package/src/lib/toast/Toaster.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ToastProvider } from 'radix-vue'
+import Toast from './Toast.vue'
+import ToastViewport from './ToastViewport.vue'
+import ToastTitle from './ToastTitle.vue'
+import ToastDescription from './ToastDescription.vue'
+import ToastAction from './ToastAction.vue'
+import ToastClose from './ToastClose.vue'
+import { useToast } from './ToastProvider'
+import { cn } from '@/lib/utils'
+
+const { toasts, dismiss } = useToast()
+
+function onOpenChange(id: string, open: boolean) {
+  if (!open) {
+    dismiss(id)
+  }
+}
+</script>
+
+<template>
+  <ToastProvider>
+    <Toast
+      v-for="t in toasts"
+      :key="t.id"
+      :duration="t.duration"
+      :default-open="true"
+      @update:open="(open: boolean) => onOpenChange(t.id, open)"
+      :class="cn(
+        'bg-card text-card-foreground border',
+        t.type === 'error' && 'destructive border-destructive bg-destructive text-destructive-foreground',
+      )"
+    >
+      <div class="grid gap-1">
+        <ToastTitle v-if="t.title">{{ t.title }}</ToastTitle>
+        <ToastDescription v-if="t.description">{{ t.description }}</ToastDescription>
+      </div>
+      <ToastAction
+        v-if="t.action"
+        :alt-text="t.action.label"
+        @click="t.action.onClick"
+      >
+        {{ t.action.label }}
+      </ToastAction>
+      <ToastClose />
+    </Toast>
+
+    <ToastViewport />
+  </ToastProvider>
+</template>

package/src/lib/toast/index.ts

@@ -0,0 +1,7 @@
+export { default as Toast } from './Toast.vue'
+export { default as ToastViewport } from './ToastViewport.vue'
+export { default as ToastTitle } from './ToastTitle.vue'
+export { default as ToastDescription } from './ToastDescription.vue'
+export { default as ToastAction } from './ToastAction.vue'
+export { default as ToastClose } from './ToastClose.vue'
+export { useToast } from './ToastProvider'

package/src/lib/toggle/Toggle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { Toggle } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { toggleVariants } from './variants'
+
+const props = defineProps<{
+  class?: string
+  variant?: 'default' | 'outline'
+  size?: 'default' | 'sm' | 'lg'
+}>()
+</script>
+
+<template>
+  <Toggle
+    v-bind="$attrs"
+    :class="cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)"
+  >
+    <slot />
+  </Toggle>
+</template>

package/src/lib/toggle/index.ts

@@ -0,0 +1,2 @@
+export { default as Toggle } from './Toggle.vue'
+export { toggleVariants, type ToggleVariants } from './variants'

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

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest'
+import { toggleVariants } from './variants'
+
+describe('toggleVariants', () => {
+  describe('defaults', () => {
+    it('returns expected classes with no arguments (default variant and size)', () => {
+      const result = toggleVariants()
+      expect(result).toContain('inline-flex')
+      expect(result).toContain('items-center')
+      expect(result).toContain('justify-center')
+      expect(result).toContain('rounded-md')
+      expect(result).toContain('bg-transparent')
+      expect(result).toContain('h-10')
+      expect(result).toContain('px-3')
+    })
+  })
+
+  describe('variant', () => {
+    it('default variant applies transparent background', () => {
+      const result = toggleVariants({ variant: 'default' })
+      expect(result).toContain('bg-transparent')
+      expect(result).not.toContain('border-input')
+    })
+
+    it('outline variant includes border and hover styles', () => {
+      const result = toggleVariants({ variant: 'outline' })
+      expect(result).toContain('border')
+      expect(result).toContain('border-input')
+      expect(result).toContain('bg-transparent')
+      expect(result).toContain('hover:bg-accent')
+      expect(result).toContain('hover:text-accent-foreground')
+    })
+  })
+
+  describe('size', () => {
+    it('default size applies h-10 and px-3', () => {
+      const result = toggleVariants({ size: 'default' })
+      expect(result).toContain('h-10')
+      expect(result).toContain('px-3')
+    })
+
+    it('sm size applies h-9 and px-2.5', () => {
+      const result = toggleVariants({ size: 'sm' })
+      expect(result).toContain('h-9')
+      expect(result).toContain('px-2.5')
+    })
+
+    it('lg size applies h-11 and px-5', () => {
+      const result = toggleVariants({ size: 'lg' })
+      expect(result).toContain('h-11')
+      expect(result).toContain('px-5')
+    })
+  })
+
+  describe('combining variant + size', () => {
+    it('outline + lg combines both variant and size classes', () => {
+      const result = toggleVariants({ variant: 'outline', size: 'lg' })
+      expect(result).toContain('border')
+      expect(result).toContain('border-input')
+      expect(result).toContain('h-11')
+      expect(result).toContain('px-5')
+    })
+
+    it('default + sm combines both variant and size classes', () => {
+      const result = toggleVariants({ variant: 'default', size: 'sm' })
+      expect(result).toContain('bg-transparent')
+      expect(result).toContain('h-9')
+      expect(result).toContain('px-2.5')
+    })
+  })
+
+  describe('base classes', () => {
+    it('all variants include disabled and focus-visible styles', () => {
+      const result = toggleVariants()
+      expect(result).toContain('disabled:pointer-events-none')
+      expect(result).toContain('disabled:opacity-50')
+      expect(result).toContain('focus-visible:outline-none')
+      expect(result).toContain('focus-visible:ring-2')
+    })
+
+    it('all variants include data-state=on styles', () => {
+      const result = toggleVariants()
+      expect(result).toContain('data-[state=on]:bg-accent')
+      expect(result).toContain('data-[state=on]:text-accent-foreground')
+    })
+  })
+})

package/src/lib/toggle/variants.ts

@@ -0,0 +1,21 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-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 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  }
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>

package/src/lib/toggle-group/ToggleGroup.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ToggleGroupRoot } from 'radix-vue'
+import { provide } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+  variant?: 'default' | 'outline'
+  size?: 'default' | 'sm' | 'lg'
+}>()
+
+provide('toggleGroupVariant', props.variant)
+provide('toggleGroupSize', props.size)
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-bind="$attrs"
+    :class="cn('flex items-center justify-center gap-1', props.class)"
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/lib/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { ToggleGroupItem } from 'radix-vue'
+import { inject } from 'vue'
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '../toggle/variants'
+
+const props = defineProps<{
+  class?: string
+  variant?: 'default' | 'outline'
+  size?: 'default' | 'sm' | 'lg'
+}>()
+
+const groupVariant = inject<'default' | 'outline' | undefined>('toggleGroupVariant', undefined)
+const groupSize = inject<'default' | 'sm' | 'lg' | undefined>('toggleGroupSize', undefined)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        toggleVariants({
+          variant: props.variant || groupVariant,
+          size: props.size || groupSize,
+        }),
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/lib/toggle-group/index.ts

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

package/src/lib/tooltip/Tooltip.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import Tooltip from './Tooltip.vue'
+import TooltipProvider from './TooltipProvider.vue'
+import TooltipTrigger from './TooltipTrigger.vue'
+import TooltipContent from './TooltipContent.vue'
+
+function mountWithProvider(tooltipSlots: Record<string, unknown>) {
+  return mount(TooltipProvider, {
+    slots: {
+      default: () => h(Tooltip, null, tooltipSlots),
+    },
+  })
+}
+
+describe('Tooltip', () => {
+  it('renders without errors', () => {
+    const wrapper = mountWithProvider({
+      default: () => 'Tooltip child',
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+})
+
+describe('TooltipProvider', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(TooltipProvider, {
+      slots: { default: 'Provider content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('Provider content')
+  })
+})
+
+describe('TooltipTrigger', () => {
+  it('renders slot content', () => {
+    const wrapper = mountWithProvider({
+      default: () => h(TooltipTrigger, null, { default: () => 'Hover me' }),
+    })
+    expect(wrapper.text()).toContain('Hover me')
+  })
+
+  it('renders as a button', () => {
+    const wrapper = mountWithProvider({
+      default: () => h(TooltipTrigger, null, { default: () => 'Trigger' }),
+    })
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+})
+
+describe('TooltipContent', () => {
+  it('mounts without errors when tooltip is rendered', () => {
+    // TooltipContent uses a portal, so we verify the component tree mounts
+    // without throwing rather than checking portal content directly
+    const wrapper = mountWithProvider({
+      default: () => [
+        h(TooltipTrigger, null, { default: () => 'Trigger' }),
+        h(TooltipContent, null, { default: () => 'Tooltip text' }),
+      ],
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts sideOffset prop', () => {
+    const wrapper = mountWithProvider({
+      default: () => [
+        h(TooltipTrigger, null, { default: () => 'Trigger' }),
+        h(TooltipContent, { sideOffset: 8 }, { default: () => 'Offset tooltip' }),
+      ],
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts custom class prop', () => {
+    const wrapper = mountWithProvider({
+      default: () => [
+        h(TooltipTrigger, null, { default: () => 'Trigger' }),
+        h(TooltipContent, { class: 'custom-tooltip' }, { default: () => 'Styled' }),
+      ],
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+})

package/src/lib/tooltip/Tooltip.vue

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

package/src/lib/tooltip/TooltipContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  TooltipContent,
+  TooltipPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{ class?: string; sideOffset?: number }>(), { sideOffset: 4 })
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="$attrs"
+      :side-offset="props.sideOffset"
+      :class="
+        cn(
+          'z-depth-4 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-depth-2',
+          'animate-in fade-in-0 zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/lib/tooltip/TooltipProvider.vue

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

package/src/lib/tooltip/TooltipTrigger.vue

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

package/src/lib/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
+export { default as TooltipContent } from './TooltipContent.vue'

package/src/lib/typography/TypographyBlockquote.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <blockquote :class="cn('mt-6 border-l-2 pl-6 italic', props.class)">
+    <slot />
+  </blockquote>
+</template>