@spavn/ui 0.0.1

package/src/lib/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { NavigationMenuViewport } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="$attrs"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-depth-3',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90',
+          'md:w-[var(--radix-navigation-menu-viewport-width)]',
+          props.class
+        )
+      "
+    />
+  </div>
+</template>

package/src/lib/navigation-menu/index.ts

@@ -0,0 +1,8 @@
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'

package/src/lib/pagination/Pagination.vue

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

package/src/lib/pagination/PaginationContent.vue

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

package/src/lib/pagination/PaginationEllipsis.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span :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 pages</span>
+  </span>
+</template>

package/src/lib/pagination/PaginationFirst.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import PaginationLink from './PaginationLink.vue'
+
+defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <PaginationLink :class="$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"
+    >
+      <path d="m11 17-5-5 5-5" />
+      <path d="m18 17-5-5 5-5" />
+    </svg>
+  </PaginationLink>
+</template>

package/src/lib/pagination/PaginationItem.vue

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

package/src/lib/pagination/PaginationLast.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import PaginationLink from './PaginationLink.vue'
+
+defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <PaginationLink :class="$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"
+    >
+      <path d="m13 17 5-5-5-5" />
+      <path d="m6 17 5-5-5-5" />
+    </svg>
+  </PaginationLink>
+</template>

package/src/lib/pagination/PaginationLink.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+withDefaults(
+  defineProps<{
+    class?: string
+    isActive?: boolean
+    size?: string
+  }>(),
+  {
+    size: 'icon',
+  }
+)
+</script>
+
+<template>
+  <button
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap 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 disabled:pointer-events-none disabled:opacity-50',
+        'h-10 w-10',
+        isActive
+          ? 'border border-input bg-background hover:bg-accent hover:text-accent-foreground shadow-depth-1'
+          : 'hover:bg-accent hover:text-accent-foreground',
+        $props.class
+      )
+    "
+  >
+    <slot />
+  </button>
+</template>

package/src/lib/pagination/PaginationNext.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import PaginationLink from './PaginationLink.vue'
+
+defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <PaginationLink :class="$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"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  </PaginationLink>
+</template>

package/src/lib/pagination/PaginationPrev.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import PaginationLink from './PaginationLink.vue'
+
+defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <PaginationLink :class="$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"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  </PaginationLink>
+</template>

package/src/lib/pagination/index.ts

@@ -0,0 +1,9 @@
+export { default as Pagination } from './Pagination.vue'
+export { default as PaginationContent } from './PaginationContent.vue'
+export { default as PaginationItem } from './PaginationItem.vue'
+export { default as PaginationLink } from './PaginationLink.vue'
+export { default as PaginationFirst } from './PaginationFirst.vue'
+export { default as PaginationPrev } from './PaginationPrev.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationLast } from './PaginationLast.vue'
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'

package/src/lib/popover/Popover.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import Popover from './Popover.vue'
+import PopoverTrigger from './PopoverTrigger.vue'
+import PopoverContent from './PopoverContent.vue'
+
+describe('Popover', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Popover, {
+      slots: { default: 'Popover content' },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+})
+
+describe('PopoverTrigger', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(Popover, {
+      slots: {
+        default: () => h(PopoverTrigger, null, { default: () => 'Open Popover' }),
+      },
+    })
+    expect(wrapper.text()).toContain('Open Popover')
+  })
+
+  it('renders as a button', () => {
+    const wrapper = mount(Popover, {
+      slots: {
+        default: () => h(PopoverTrigger, null, { default: () => 'Click' }),
+      },
+    })
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+})
+
+describe('PopoverContent', () => {
+  it('mounts without errors inside Popover', () => {
+    const wrapper = mount(Popover, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(PopoverTrigger, null, { default: () => 'Trigger' }),
+          h(PopoverContent, null, { default: () => 'Popover body' }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts sideOffset prop', () => {
+    const wrapper = mount(Popover, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(PopoverTrigger, null, { default: () => 'Trigger' }),
+          h(PopoverContent, { sideOffset: 8 }, { default: () => 'Content' }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts align prop', () => {
+    const wrapper = mount(Popover, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(PopoverTrigger, null, { default: () => 'Trigger' }),
+          h(PopoverContent, { align: 'start' }, { default: () => 'Aligned content' }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('accepts custom class prop', () => {
+    const wrapper = mount(Popover, {
+      attrs: { open: true },
+      slots: {
+        default: () => [
+          h(PopoverTrigger, null, { default: () => 'Trigger' }),
+          h(PopoverContent, { class: 'custom-popover' }, { default: () => 'Styled' }),
+        ],
+      },
+      attachTo: document.body,
+    })
+    expect(wrapper.exists()).toBe(true)
+    wrapper.unmount()
+  })
+})

package/src/lib/popover/Popover.vue

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

package/src/lib/popover/PopoverContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  PopoverContent,
+  PopoverPortal,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{ class?: string; sideOffset?: number; align?: 'start' | 'center' | 'end' }>(), { sideOffset: 4, align: 'center' })
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="$attrs"
+      :side-offset="props.sideOffset" :align="props.align"
+      :class="
+        cn(
+          'z-depth-3 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-depth-3 outline-none',
+          '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-[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 />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/src/lib/popover/PopoverTrigger.vue

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

package/src/lib/popover/index.ts

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'

package/src/lib/progress/Progress.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Progress from './Progress.vue'
+
+describe('Progress', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(Progress)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('accepts modelValue prop', () => {
+    const wrapper = mount(Progress, {
+      props: { modelValue: 50 },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('applies default size class', () => {
+    const wrapper = mount(Progress)
+    expect(wrapper.html()).toContain('h-1.5')
+  })
+
+  it('applies sm size class', () => {
+    const wrapper = mount(Progress, {
+      props: { size: 'sm' },
+    })
+    expect(wrapper.html()).toContain('h-1')
+  })
+
+  it('applies lg size class', () => {
+    const wrapper = mount(Progress, {
+      props: { size: 'lg' },
+    })
+    expect(wrapper.html()).toContain('h-2')
+  })
+
+  it('sets aria-label when provided', () => {
+    const wrapper = mount(Progress, {
+      props: { ariaLabel: 'Upload progress', modelValue: 75 },
+    })
+    expect(wrapper.html()).toContain('Upload progress')
+  })
+
+  it('transforms indicator based on modelValue', () => {
+    const wrapper = mount(Progress, {
+      props: { modelValue: 60 },
+    })
+    const indicator = wrapper.find('[style]')
+    expect(indicator.exists()).toBe(true)
+    expect(indicator.attributes('style')).toContain('translateX(-40%)')
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(Progress, {
+      props: { class: 'my-progress' },
+    })
+    expect(wrapper.html()).toContain('my-progress')
+  })
+})

package/src/lib/progress/Progress.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: string
+  modelValue?: number
+  size?: 'default' | 'sm' | 'lg'
+  ariaLabel?: string
+}>()
+
+const sizeClasses = {
+  sm: 'h-1',
+  default: 'h-1.5',
+  lg: 'h-2',
+}
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="$attrs"
+    :model-value="props.modelValue"
+    :aria-label="props.ariaLabel"
+    :class="
+      cn(
+        'relative w-full overflow-hidden rounded-full bg-muted',
+        sizeClasses[props.size || 'default'],
+        props.class
+      )
+    "
+  >
+    <ProgressIndicator
+      :class="cn('h-full w-full flex-1 bg-primary rounded-full transition-all duration-300 ease-out')"
+      :style="{ transform: `translateX(-${100 - (props.modelValue || 0)}%)` }"
+    />
+  </ProgressRoot>
+</template>

package/src/lib/progress/index.ts

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

package/src/lib/radio-group/RadioGroup.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RadioGroup from './RadioGroup.vue'
+import RadioGroupItem from './RadioGroupItem.vue'
+
+describe('RadioGroup', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(RadioGroup)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(RadioGroup, {
+      slots: { default: '<div class="test-child">Option</div>' },
+    })
+    expect(wrapper.find('.test-child').exists()).toBe(true)
+  })
+
+  it('passes modelValue to radix RadioGroupRoot', () => {
+    const wrapper = mount(RadioGroup, {
+      attrs: { modelValue: 'option-1' },
+      slots: {
+        default: {
+          components: { RadioGroupItem },
+          template: '<RadioGroupItem value="option-1" /><RadioGroupItem value="option-2" />',
+        },
+      },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('passes disabled attribute', () => {
+    const wrapper = mount(RadioGroup, {
+      attrs: { disabled: true },
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('applies custom class', () => {
+    const wrapper = mount(RadioGroup, {
+      props: { class: 'custom-radio' },
+    })
+    expect(wrapper.html()).toContain('custom-radio')
+  })
+})

package/src/lib/radio-group/RadioGroup.vue

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

package/src/lib/radio-group/RadioGroupItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="$attrs"
+    :class="
+      cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 shadow-depth-1',
+        props.class
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="h-2.5 w-2.5"
+      >
+        <circle cx="12" cy="12" r="6" />
+      </svg>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

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

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

package/src/lib/resizable/ResizableHandle.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+import { SplitterResizeHandle } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string; withHandle?: boolean }>()
+</script>
+
+<template>
+  <SplitterResizeHandle
+    v-bind="$attrs"
+    :class="
+      cn(
+        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        props.class
+      )
+    "
+  >
+    <div
+      v-if="withHandle"
+      class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        class="h-2.5 w-2.5"
+      >
+        <circle cx="12" cy="9" r="1" />
+        <circle cx="12" cy="15" r="1" />
+      </svg>
+    </div>
+  </SplitterResizeHandle>
+</template>

package/src/lib/resizable/ResizablePanel.vue

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